@charset "UTF-8";
/*	--------------------------------------------------
	:: Global Reset & Standards
	-------------------------------------------------- */

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display:block;
}
.cPage * {
	margin:0;
	padding:0;
	border:0;
	font:inherit;
	vertical-align:baseline;
}

#zeissEyeTest, #zeissEyeTest * {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

#zeissEyeTest {
	position:relative;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	font-family:Arial, sans-serif;
	font-size:12px;
	line-height:16px;
	-webkit-font-smoothing:antialiased;
	-webkit-text-size-adjust:none;
	color:#626262;
	letter-spacing:0;
}
#zeissEyeTest input:not([type=checkbox]) {
	-webkit-appearance:none;
}
#zeissEyeTest textarea {
	resize:vertical;
}
#zeissEyeTest h1 {
	position:absolute;
	left:2px;
	top:13px;
	font-size:16px;
	font-weight:bold;
	color:#000;
	margin:0;
	line-height:20px;
	width:900px;
}
#zeissEyeTest h2 {
	font-size:18px;
	line-height:22px;
	color:#000;
	margin-bottom:6px;
}
#zeissEyeTest p {
	margin:0;
	line-height:1.2em;
}
#zeissEyeTest h4 {
	margin:0;
	padding:0;
	font-weight:normal;
	color:#626263;
}
.copyTextBig {
	color:#000;
	font-size:14px;
	line-height:18px;
	text-shadow:0 1px 0 #fff;
}

/*	--------------------------------------------------
	:: Global Helper
	@helper
	-------------------------------------------------- */

#zeissEyeTest table,
#zeissEyeTest table th,
#zeissEyeTest table td {
	border:none;
	background:none;
	padding:0;
	margin:0;
}

/* logo */
.zeiss_logo {
	display:block;
	width:46px;
	height:45px;
	position:absolute;
	top:7px;
	right:6px;
	background:transparent url('zeiss_eyetest_icons.png') no-repeat -368px -241px;
}

/* buttons */
.buttonWrap {
	text-align:center;
}
.buttonBlue,
.buttonGrey {
	display:inline-block;
	height:32px;
	padding:0 0 0 3px;
	overflow:hidden;
	cursor:pointer;
	*display:inline;
	zoom:1;
	text-decoration:none;
}
.buttonBlue {
	background:transparent url('zeiss_eyetest_icons.png') no-repeat left -40px;
}
.buttonBlue span {
	display:block;
	padding:7px 27px 9px 24px;
	background:transparent url('zeiss_eyetest_icons.png') no-repeat right top;
	font-weight:700;
	font-size:13px;
	color:#fff;
	text-shadow:0 -1px 0 #666;
	text-align:center;
}
.buttonBlue:hover {
	background-position:left -120px;
	text-decoration:none;
}
.buttonBlue:hover span {
	background-position:right -80px;
	text-shadow:0 1px 0 #666;
}
.buttonGrey {
	background:transparent url('zeiss_eyetest_icons.png') no-repeat left -600px;
}
.buttonGrey span {
	display:block;
	padding:6px 12px 9px 9px;
	background:transparent url('zeiss_eyetest_icons.png') no-repeat right -640px;
	font-weight:400;
	font-size:16px;
	color:#535353;
	text-shadow:0 1px 0 #ddd;
	text-align:center;
}
.buttonGrey:hover {
	background-position:left -680px;
}
.buttonGrey:hover span {
	background-position:right -720px;
}
.minusButton {
	line-height:13px;
}
.introButton {
	height:40px;
	background-position:left -2320px;
}
.introButton span {
	padding-top:9px;
	padding-bottom:13px;
	background-position:right -2220px;
	font-size:17px;
	line-height:20px;
	font-weight:normal;
}
.introButton:hover {
	background-position:left -2370px;
}
.introButton:hover span {
	background-position:right -2270px;
}

/* border box */
.borderBox {
	border:1px solid #e2e2e1;
	border-top:0;
	border-left:0;
}
.borderBoxInner {
	padding:15px;
	border:1px solid #e7e7e7;
	border-right-color:#c9c9c9;
	border-bottom-color:#c9c9c9;
	background:#f8f8f8;
}
.borderBox h2 {
	margin-bottom:6px;
	font-size:16px;
	line-height:20px;
	font-weight:700;
	color:#000;
}
.borderBox p {
	margin-bottom:10px;
	font-size:11px;
	line-height:14px;
}

/* layer overlay */
.layerOverlay {
	position:absolute;
	top:50px;
	left:0;
	width:974px;
	height:550px;
	background:#f8f8f8;
	opacity:0.7;
	filter:alpha(opacity=70);
}
.layerContent {
	width:534px;
	height:auto;
	position:absolute;
	top:0;
	left:0;
}
.layerContentInner {
	position:relative;
}
.layerTop {
	height:30px;
	background:transparent url('layer.png') no-repeat 0 0;
}
.layerMiddle {
	padding:0 45px 10px;
	background:transparent url('layer.png') no-repeat 0 -30px;
}
.layerBottom {
	height:45px;
	background:transparent url('layer.png') no-repeat 0 bottom;
}
#zeissEyeTest .layerContent h2 {
	margin-bottom:0;
	padding-bottom:6px;
	font-size:14px;
	line-height:17px;
}
#zeissEyeTest .layerContent p {
	margin:0;
	font-size:14px;
	line-height:17px;
}
#zeissEyeTest .layerContent .buttonWrap {
	padding-top:20px;
}

/* advice boxes */
.adviceDistance,
.adviceGlasses {
	position:absolute;
	right:24px;
}
.adviceDistance {
	top:15px;
}
.adviceDistance .borderBoxInner {
	padding:10px;
	width:59px;
	height:59px;
	background:#fff url('zeiss_eyetest_icons.png') no-repeat -778px -163px;
}
.unitSystemInch .adviceDistance .borderBoxInner {
	background-position:-118px -2000px;
}
.adviceDistance2 .borderBoxInner {
	background-position:-660px -163px;
}
.unitSystemInch .adviceDistance2 .borderBoxInner {
	background-position:0px -2000px;
}

.adviceGlasses {
	top:108px;
}
.adviceGlasses .borderBoxInner {
	padding:39px 5px 10px;
	width:69px;
	height:30px;
	font-size:10px;
	line-height:11px;
	text-align:center;
	background:#fff url('zeiss_eyetest_icons.png') no-repeat -895px -150px;
}

/* canvas setup */
.tWrap {
	width:310px;
	height:315px;
	position:absolute;
	left:330px;
	top:130px;
}
.tTop, .tRight, .tBottom, .tLeft {
	position:absolute;
	background:transparent url('zeiss_eyetest_icons.png') no-repeat 0 0;
	cursor:pointer;
	height:37px;
	width:39px;
}
.tTop {
	left:135px;
	top:0;
	background-position:-450px -240px;
}
.tTop:hover {
	background-position:-450px -290px;
}
.tRight {
	top:139px;
	right:0;
	background-position:-600px -240px;
}
.tRight:hover {
	background-position:-600px -290px;
}
.tBottom {
	left:135px;
	bottom:0;
	background-position:-500px -240px;
}
.tBottom:hover {
	background-position:-500px -290px;
}
.tLeft {
	top:139px;
	left:0;
	background-position:-550px -240px;
}
.tLeft:hover {
	background-position:-550px -290px;
}

/*
 * user selection:
/* these commands (::-moz-selection & ::selection) can't be combined in one rule,
 * otherwise some browsers will ignore the whole rule if you do so
 */
::-moz-selection { background:#8d8d8d; color:#fff; text-shadow:none; }
::selection { background:#8d8d8d; color:#fff; text-shadow:none; }
.noUserSelect {
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	-o-user-select:none;
	user-select:none;
}

/* misc */
.infoBoxSet {
	position:absolute;
	top:188px;
	right:24px;
	width:162px;
	height:210px;
	background:transparent url('zeiss_eyetest_icons.png') no-repeat 0 -780px;
}
.howToUseNote {
	position:absolute;
	left:40px;
	bottom:30px;
	width:750px;
}
.nextStepButton {
	position:absolute;
	right:24px;
	bottom:40px;
}

/*	--------------------------------------------------
	:: Forms
	-------------------------------------------------- */
/* global */
form {
	text-align:center;
	margin:0 auto;
}
label {
	display:block;
	margin:0 0 3px;
	color:#000;
	font-size:14px;
	text-shadow:0 1px 0 #fff;
}
.inputWrap {
	margin:0 0 13px;
}
.inputWrapInner {
	background:transparent url('zeiss_eyetest_icons.png') no-repeat -660px -250px;
	margin:0 auto;
	width:130px;
	height:24px;
	display:block;
	position:relative;
	text-align:right;
}
.lt-ie8 .inputWrapInner {
	background-position:-660px -249px;
}
.inputWrapInner input {
	height: 15px;
	display:block;
	width:112px;
	margin:0 0 0 9px;
	padding:3px 9px 4px 0;
	background:transparent url('zeiss_eyetest_icons.png') no-repeat right -281px;
	color:#666;
	text-align:center;
	outline:none;
	overflow:hidden;
	border:none;
}
.lt-ie8 .inputWrapInner input {
	width:114px;
}
input.placeholder, textarea.placeholder { color:#888; }
input:focus { outline:none; }

/* checkbox replacement */
.checkboxWrap {
	position:relative;
}
.checkboxWrapInner {
	position:relative;
	padding:8px 0 5px 30px;
	overflow:hidden;
}
.checkboxWrapInner input {
	position:absolute;
	top:0;
	left:-30px;
}
.checkboxWrapInner label {
	color:#000;
	cursor:pointer;
	font-size:14px;
	text-shadow:0 1px 0 #fff;
}
/* TODO: add noUserSelect Class to this elements and safe space */
.checkboxWrapInner label,
.styledCheckbox {
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	-o-user-select:none;
	user-select:none;
}
.styledCheckbox {
	position:absolute;
	left:0;
	top:0;
	background:transparent url('zeiss_eyetest_icons.png') no-repeat 0 -524px;
	width:27px;
	height:25px;
}
.checkboxChecked .styledCheckbox {
	background-position:0 -564px;
}

/* select replacement */
.styled-select-wrapper {
	position:relative;
	color:#999;
	cursor:pointer;
	width:130px;
	height:22px;
	margin:0 auto 13px auto;
	background:url('zeiss_eyetest_icons.png') no-repeat -660px -250px;
	z-index:10;
}
/*
 * to trigger focus on select elements with jquery (for mobile devices), it's important that it's not complete invisible (display: none)
 * we try to hide it as much as possible here to keep the magic going on
 */
.styled-select-wrapper select {
	width:1px !important;
	height:1px !important;
	border:none !important;
	padding:0 !important;
	margin:0 !important;
	float:left;
	background:transparent !important;
	-webkit-appearance:none;
}
.styled-select-wrapper select:focus {
	outline:none;
}
.lt-ie9 .styled-select-wrapper select {
	display: none;
}
.styled-select-header {
	position:relative;
	height:22px;
	margin:0 0 0 4px;
	padding:1px 0 0;
	background:url('zeiss_eyetest_icons.png') no-repeat right -281px;
}
.styled-select-header.open {  }
.styled-select-header-entry {
	white-space: nowrap;
	overflow: hidden;
	display:block;
	padding:3px 0 3px 3px;
	text-align:center;
	color:#666;
}
.styled-select-header-icon {
	position:absolute;
	top:0;
	right:0;
	display:block;
	width:20px;
	height:20px;
	background:url('zeiss_eyetest_icons.png') no-repeat -696px -247px;
}
.styled-select-content {
	position:absolute;
	width:130px;
	z-index:1000;
	margin:0;
	padding:0;
	padding:0;
	top:27px;
	left:0;
	max-height:195px;
	overflow-y:scroll;
	list-style:none;
}
.styled-select-entry {
	display:block;
	margin:0;
	padding:0;
	line-height:1.2em;
	float:none;
	padding:5px 10px;
	background:#fff;
	opacity:0.95;
	list-style:none;
}
.styled-select-entry.selected {
	color:#459adb;
	font-weight:700;
}

/* form errors */
.error label {
	color:#f00 !important;
}
.error .inputWrapInner {
	background:url('zeiss_eyetest_icons.png') no-repeat -660px -310px;
}
.error .inputWrapInner input {
	background:url('zeiss_eyetest_icons.png') no-repeat right -341px;
	color:#f00;
}

/*	--------------------------------------------------
	:: Main Navigation
	-------------------------------------------------- */
/* @status */
#status {
	position:absolute;
	top:60px;
	left:3px;
	width:100%;
	height:51px;
	background:transparent url('zeiss_eyetest_icons.png') no-repeat 0 -439px;
	overflow:hidden;
}
#status ul {
	list-style:none;
	margin:0;
	padding:1px 0 0 1px;
	overflow:hidden;
	height:50px;
}
#status li {
	display:block;
	padding:0;
	margin:0;
	float:left;
	position:relative;
	border-right:1px solid #b3b3b3;
}
#status li span {
	display:block;
	padding:15px 0 20px;
	text-align:center;
	border-top:1px solid #fff;
	text-shadow:0 1px 0 #fff;
}
#status li#status_i1 {
	width:134px;
}
#status li#status_i2 {
	width:196px;
}
#status li#status_i3 {
	width:195px;
}
#status li#status_i4 {
	width:196px;
}
#status li#status_i5 {
	width:133px;
}
#status li#status_i6 {
	width:116px;
}
#status li.active {
	background:#8e8e8e;
	border-right-color:#6a6a6a;
	left:-1px;
}
#status li.active span {
	border-left:1px solid #6a6a6a;
	border-top-color:#999;
	padding-left:0;
	text-shadow:0 -1px 0 #666;
	color:#fff;
}

/*	--------------------------------------------------
	:: Page Layout
	-------------------------------------------------- */
/* @boxLayout */
#zeissEyeTest {
	position:relative;
	width:976px;
	height:602px;
	margin:auto;
	padding:60px 0 0 2px;
	margin-bottom:7px;
	background:transparent url('app_bg.gif') no-repeat center bottom;
	text-align:left;
}
#zeissEyeTest .cPage {
	position:relative;
	height:600px;
	width: 974px;
	overflow:hidden;
	background: transparent url('zeiss_step_bg1.png') no-repeat 0 0;
	-webkit-background-size: 974px 3000px;
	border:1px solid #eaeaea;
}
#orientationErrorWrap {
	/*position:absolute;*/
	/*height:600px;*/
	/*width: 974px;*/
	/*overflow:hidden;*/
	/*top:0;*/
	/*left:0;*/
	/*border:1px solid #eaeaea;*/
}
#orientationErrorWrap .layerOverlay {
	/*background: none repeat scroll 0 0 #F8F8F8;*/
	height: 600px;
	left: 3px;
	/*opacity: 0.7;*/
	/*position: absolute;*/
	top: 44px;
	/*width: 974px;*/
}
#orientationErrorWrap h2 {
	margin-bottom:0;
	margin-top:0;
}


#zeissEyeTest .visual {
	position:absolute;
	left:0;
	top:50px;
	width:974px;
	background:transparent url('eyetest_visuals.jpg') no-repeat 0 0;
}
#loadingScreen {
	position:absolute;
	left:2px;
	top:60px;
	width:974px;
	height:600px;
	background:#fff url('ajax-loader.gif') no-repeat center center;
	border:1px solid #eaeaea;
}

#p8,
#p9,
#p10,
#p11 {
	background-image: url("zeiss_step_bg2.png") !important;
}

/* @p1 */
#p1 {
	background:transparent url('eyetest_visuals.png') no-repeat 0 bottom !important;
	-webkit-background-size: 974px 2324px !important;
}
#p1 .buttonWrap {
	position:absolute;
	top:309px;
	width:100%;
}
#p1 .buttonWrap .buttonBlue {
	margin-left:6px;
}
#p1_teaserWrap {
	position:absolute;
	top:373px;
	left:17px;
	width:945px;
	height:227px;
}
#p1_teaserWrap .icon {
	position:absolute;
	left:0;
	bottom:12px;
	width:295px;
	height:65px;
	background:transparent url('zeiss_eyetest_icons.png') no-repeat 0 -240px;
}
#p1_teaser1, #p1_teaser2, #p1_teaser3Voucher, #p1_teaser3NoVoucher {
	position:absolute;
	top:0;
	left:0;
	width:295px;
	height:227px;
}
#p1_teaser2 {
	left:325px;
}
#p1_teaser3Voucher,
#p1_teaser3NoVoucher {
	left:650px;
}
#p1_teaser1 .icon {
	position:absolute;
	left:120px;
	width:65px;
	background-position:0 -240px;
}
#p1_teaser2 .icon {
	left:68px;
	width:174px;
	bottom:0;
	background-position:-100px -240px;
}
#p1_teaser3Voucher .icon {
	left:50px;
	bottom:0;
	width:165px;
	height:124px;
	background-position:right -2000px;
}
.de_DE #p1_teaser3Voucher .icon {
	background-position:-645px -2000px;
}
#p1_teaser3NoVoucher .icon {
	left:50px;
	bottom:0;
	width:165px;
	height:124px;
	background:none;
}
#p1_teaserWrap h2 {
	margin:0 0 10px;
	font-size:15px;
	line-height:17px;
	font-weight: bold;
}
#p1_teaserWrap p,
#p1_teaserWrap ul,
#p1_teaserWrap li {
	margin:0;
	font-size:11px;
	line-height:14px;
}
#p1_teaserWrap li {
	padding-left:9px;
	list-style:none;
	background:transparent url('list_icon.gif') no-repeat 0 7px;
}

/* teaser gewinnspiel nur für "lang-de" */
#p1_teaser3Germany {
	display:none;
	position:absolute;
	width:300px;
	height:216px;
	right:-12px;
	top:-12px;
	background:transparent url('gewinnspiel-teaser.jpg') no-repeat 0 0;
	padding:12px;
}
/*		.de_DE #p1_teaser3Germany {
			display:block;
		}
		.de_DE #p1_teaser1 {
			display:none;
		}
		.de_DE #p1_teaser2 {
			left:0;
		}
		.de_DE #p1_teaser3Voucher,
		.de_DE #p1_teaser3NoVoucher {
			left:325px;
		}*/

#oldBrowserFallback {
	background: url('old_browser_fallback.jpg') no-repeat 31px 36px #fff;
	padding: 36px 60px 0 192px;
	height: 199px;
	left: 2px;
	position: absolute;
	top: 363px;
	width: 718px;
}
#oldBrowserFallback h1 {
	left: auto;
	margin: 0 0 11px;
	position: static;
	top: auto;
	width: auto;
}
#oldBrowserFallback p {

}
#alternativeBrowserList {
	list-style:none;
	margin: 16px 0 20px;
	height: 50px;
}
#alternativeBrowserList li {
	display:inline;
}
#alternativeBrowserList li a {
	background: url('old_browser_fallback_spacer.gif') no-repeat top left;
	float:left;
	display:block;
	padding: 12px 60px 6px;
	color: #626262;
	text-decoration:none;
}
#alternativeBrowserList li a:hover {
	text-decoration:underline;
}
#alternativeBrowserList li.first a {
	background:none;
	padding: 12px 60px 6px 0;
}
#alternativeBrowserList li a strong {
	display:block;
	font-weight:bold;
}
#alternativeBrowserList li a span {

}

/* @p3 */
#p3 {
	background-position: 0 -600px !important;
}
#p3 .copyText, #p3_startButton, #p3 .checkboxWrap, #p3_box1, #p3_box2, #p3_box3, #p3_box4, #p3_box4 .deskImage { position:absolute; }
#p3 .copyText {
	top:75px;
	left:25px;
	width:840px;
}
#p3_startButton {
	right:24px;
	bottom:40px;
}
#p3 .checkboxWrap {
	left:24px;
	bottom:40px;
}
#p3_box1 {
	top:160px;
	left:24px;
}
#p3_box1 .borderBoxInner {
	width:365px;
	height:310px;
}
#p3_box2 {
	top:160px;
	left:428px;
}
#p3_box2 .borderBoxInner {
	width:260px;
	height:310px;
}



/*		#p3_box3 {
			top:370px;
			left:428px;
		}
			#p3_box3 .borderBoxInner {
				width:260px;
				height:100px;
			}*/
#p3_box4 {
	top:160px;
	right:24px;
}
#p3_box4 .borderBoxInner {
	width:190px;
	height:310px;
}
#p3_box4 .deskImage {
	left:-10px;
	bottom:1px;
	width:254px;
	height:205px;
	background:transparent url('desk_image.gif') no-repeat 0 0;
}

#p3_openDisclaimer {
	color: #000000;
	cursor: pointer;
	font-size: 14px;
	padding: 0 0 0 30px;
	text-decoration: underline;
	text-shadow: 0 1px 0 #FFFFFF;
}
.error #p3_openDisclaimer {
	color: #FF0000 !important;
}
#p3_disclaimer_layer h2,
#p3_disclaimer_layer h3,
#p3_disclaimer_layer p {
	margin-bottom:15px;
	color:#666;
}
#p3_disclaimer_layer h2 {
	font-size:14px;
	font-weight:700;
	text-align:left;
}
#p3_disclaimer_layer h3 {
	margin-bottom:20px;
	padding-top:15px;
	font-size:12px;
	font-weight:700;
}
#p3_disclaimer_layer .closeLayer {
	position:absolute;
	right:32px;
	top:20px;
	width:25px;
	height:25px;
	background:transparent url('layer-close.gif') no-repeat 0 0;
	cursor:pointer;
}

.unitSystemInch #p3_box4 .deskImage {
	background:transparent url('desk_image_inch.gif') no-repeat 0 0;
}

/* size calibration */
#csContainer, .dimensionValue, #csExpand, #csNarrow {
	position:absolute;
}
#csContainer,
#csOuterWrap {
	width:363px;
	height:210px;
}

#csContainer {
	left:15px;
	bottom:1px;
}
#csOuterWrap {
	position:relative;
	overflow:hidden;
}
#csDimension {
	/*left:95px;*/
	bottom:0;
	width:199px;
	height:210px;
	overflow:hidden;
	margin: 0 auto;
	border-left:1px dashed #bababa;
	border-right:1px dashed #bababa;
}
.dimensionValue {
	top:0;
	left:0;
	display:block;
	width:100%;
	height:20px;
	text-align:center;
	font-size:10px;
	font-weight:700;
}
/* TODO: add noUserSelect Class to this elements and safe space */
#csExpand, #csNarrow {
	top:60px;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}
#csNarrow {
	right:0;
}
#csExpand {
	left:0;
}

/* contrast calibration */
#ccOuterWrap, #ccOuter, #ccInner, #ccInnerBg, #ccDarker, #ccLighter {
	position: absolute;
}
#ccOuterWrap {
	bottom: 10px;
	height: 230px;
	left: 17px;
	width: 258px;
}
#ccSlider {
	/*background: #666;*/
	background:url("zeiss_eyetest_icons.png") no-repeat scroll -364px -1991px;
	height: 36px;
	position: relative;
	width:258px;
	position: absolute;
	bottom:0;
}
#ccSlider .sliderHead {
	background: url("zeiss_eyetest_icons.png") no-repeat scroll -236px -2000px transparent;
	/*background: #f00;*/
	cursor: pointer;
	height: 28px;
	left: 0;
	position: relative;
	top: 1px;
	width: 23px;
}
#ccSlider .sliderHead:hover {
	background: url("zeiss_eyetest_icons.png") no-repeat scroll -300px -2000px transparent;
}

#ccOuter {
	top:0;
	left:40px;
	width:180px;
	height:180px;
	background:url('contrast_bg.gif') repeat 0 0;
}
#ccInner, #ccInnerBg {
	height: 89px;
	left: 45px;
	top: 45px;
	width: 90px;
	background:#000;
	color:#459ADB;
}
#ccInnerBg {
	background:#fff;
}
/* TODO: add noUserSelect Class to this elements and safe space */
#ccDarker,
#ccLighter {
	top:25px;
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	-o-user-select:none;
	user-select:none;
}
#ccLighter {
	right:0;
}
#ccDarker {
	left:0;
}

/* @p4 */
#p4 {
	background-position:0 -1200px !important;
}
.letterWrap, .circleWrap {
	position:absolute;
	left:50%;
	top:50%;
}
#contrastEl {
	position:relative;
	width:100%;
	height:100%;
	background:#000;
}
#contrastEl .mask {
	position:absolute;
	width:20%;
	height:20%;
	background:#fff;
}

#contrastEl.r .mask 	{ right:0; width:80%; }
#contrastEl.r .mask1 	{ top:20%; }
#contrastEl.r .mask2 	{ bottom:20%; }
#contrastEl.t .mask 	{ top:0; height:80%; }
#contrastEl.t .mask1 	{ left:20%; }
#contrastEl.t .mask2 	{ right:20%; }
#contrastEl.l .mask 	{ left:0; width:80%; }
#contrastEl.l .mask1 	{ top:20%; }
#contrastEl.l .mask2 	{ bottom:20%; }
#contrastEl.b .mask 	{ bottom:0; height:80%; }
#contrastEl.b .mask1 	{ left:20%; }
#contrastEl.b .mask2 	{ right:20%; }

/* @p5 */
#p5 {
	background-position:0 -1200px !important;
}
#p5 .visual {
	background-position:0 0;
	height:442px;
}
#p5 .wellDone {
	background-position:right 0;
}
.imageDisclaimer {
	position:absolute;
	left:24px;
	bottom:115px;
	font-size:10px;
	line-height:12px;
	color:#848484;
}
#r1Container {
	position:absolute;
	left:24px;
	top:505px;
	width:700px;
}
#r1Container p {
	padding:5px 0 0 55px;
	line-height:16px;
}
#r1Container .r1_result {
	background:transparent url('zeiss_eyetest_icons.png') no-repeat 0 0;
	min-height:45px;
}
#r1Container .r1_result2 {
	background-position:0 -1067px;
}
#r1Container .r1_result1 {
	background-position:0 -1207px;
}
#r1Container .r1_result0 {
	background-position:0 -1347px;
}

/* @p6 */
#p6 {
	background-position:0 -1800px !important;
}
#circleEl {
	position:relative;
	width:100%;
	height:100%;
}
#circleEl img,
#circleEl .mask {
	display:block;
	position:absolute;
}
#circleEl img {
	width:100%;
	height:100%;
}
#circleEl .mask {
	width:40%;
	height:20%;
	background:#fff;
}
#circleEl.l .mask {
	top:40%;
	left:0;
}
#circleEl.r .mask {
	top:40%;
	right:0;
}
#circleEl.t .mask {
	top:0;
	left:40%;
	width:20%;
	height:40%;
}
#circleEl.b .mask {
	bottom:0;
	left:40%;
	width:20%;
	height:40%;
}

/* @p7 */
#p7 {
	background-position:0 -2400px !important;
}
#p7 .visual {
	background-position:0 -830px;
	height:443px;
}
#p7 .wellDone {
	background-position:right -830px;
}
#r2Container {
	position:absolute;
	top:505px;
	left:24px;
	width:700px;
}
#r2Container p {
	padding:5px 0 0 55px;
	line-height:16px;
}
#r2Container .r2_result {
	background:transparent url('zeiss_eyetest_icons.png') no-repeat 0 0;
	min-height:45px;
}
#r2Container .r2_result2 {
	background-position:0 -1067px;
}
#r2Container .r2_result1 {
	background-position:0 -1207px;
}
#r2Container .r2_result0 {
	background-position:0 -1347px;
}

/* @p8 */
#p8 {
	background-position:0 0px !important;
}
#t3Wrap {
	width:416px;
	height:407px;
	top:89px;
	left:281px;
}
#t3Left, #t3Right {
	top:184px;
}
#t3Top, #t3Bottom {
	left:188px;
}
#t3Canvas {
	margin:46px 51px;
}
#t3ImgWrap {
	position:absolute;
	top:46px;
	left:50px;
	width:316px;
	height:313px;
	background:#000;
}
#t3Img {
	position:absolute;
	top:39px;
	left:37px;
	width:240px;
	height:240px;
	background:transparent url('deuteranop.png') no-repeat 0 0;
}

/* @p9 */
#p9 {
	background-position:0 -600px !important;
}
#p9 .visual {
	background-position:0 -1281px;
	height:435px;
}
.imageDisclaimerFotolia {
	position:absolute;
	right:6px;
	bottom:120px;
	font-size:10px;
	line-height:12px;
	color:#848484;
}
#r3Container {
	position:absolute;
	top:505px;
	left:24px;
	width:700px;
}
#r3Container p {
	padding:5px 0 5px 55px;
	line-height:16px;
}
#r3Container .r3_result {
	background:transparent url('zeiss_eyetest_icons.png') no-repeat 0 0;
	min-height:45px;
}
#r3Container .r3_result2 {
	background-position:0 -1067px;
}
#r3Container .r3_result1 {
	background-position:0 -1207px;
}
#r3Container .r3_result0 {
	background-position:0 -1347px;
}

/* @p10 */
#p10 {
	background-position:0 -1800px !important;
}
#p10 .visual {
	background-position:0 -450px;
	height:364px;
}
#p10_resultImage, .resultBox, .resultBox h4, .resultBox .p10_otimum, .resultBox .p10_you {
	position:absolute;
}
#p10_resultImage {
	top:50px;
	left:0;
	width:974px;
	height:364px;
}
.resultBox {
	top:30px;
}
.resultBox h4 {
	top:170px;
	width:155px;
	height:16px;
	text-align:center;
	font-size:13px;
	color:#626263;
	text-shadow:0 1px 0 rgb(255, 255, 255);
}
.resultBox .p10_otimum,
.resultBox .p10_you {
	display:block;
	top:4px;
	width:75px;
	height:16px;
	text-align:center;
	font-size:11px;
	font-weight:700;
	color:#000;
}
.resultBox .p10_otimum {
	left:0;
}
.resultBox .p10_you {
	left:74px;
	height:160px;
	background:transparent url('zeiss_eyetest_result.png') no-repeat -1px 22px;
}

/* compare result images */
#p10_resultTest1 { left:195px; }
#p10_resultTest2 { left:406px; }
#p10_resultTest3 { left:613px; }

#p10_resultTest1 .you_result2 { background-position:-1px 22px; }
#p10_resultTest1 .you_result1 { background-position:-101px 22px; }
#p10_resultTest1 .you_result0 { background-position:-201px 22px; }

#p10_resultTest2 .you_result2 { background-position:-1px -118px; }
#p10_resultTest2 .you_result1 { background-position:-101px -118px; }
#p10_resultTest2 .you_result0 { background-position:-201px -118px; }

#p10_resultTest3 .you_result2 { background-position:-1px -262px; }
#p10_resultTest3 .you_result1 { background-position:-101px -262px; }
#p10_resultTest3 .you_result0 { background-position:-201px -262px; }

/* result icons, tooltip span */
.p10_tooltip,
.p10_tooltip .r1_result,
.p10_tooltip .r2_result,
.p10_tooltip .r3_result {
	display:block;
	width:35px;
	height:35px;
}
.p10_tooltip {
	position:absolute;
	top:128px;
	left:115px;
	cursor:default;
}
.p10_tooltip .r1_result,
.p10_tooltip .r2_result,
.p10_tooltip .r3_result {
	background:transparent url('zeiss_eyetest_icons.png') no-repeat 0 0;
}
.p10_tooltip .r1_result2,
.p10_tooltip .r2_result2,
.p10_tooltip .r3_result2 {
	background-position:right -1067px;
}
.p10_tooltip .r1_result1,
.p10_tooltip .r2_result1,
.p10_tooltip .r3_result1 {
	background-position:right -1207px;
}
.p10_tooltip .r1_result0,
.p10_tooltip .r2_result0,
.p10_tooltip .r3_result0 {
	background-position:right -1347px;
}
/* tooltip container */
#tooltip {
	display:block;
	padding:22px 0 0;
	margin:0;
	width:338px;
	background:transparent url('zeiss_eyetest_icons.png') no-repeat 0 -1485px;
}
#tooltip .tooltipInner {
	display:block;
	margin:0;
	text-align:left;
	background:transparent url('zeiss_eyetest_icons.png') no-repeat 0 bottom;
	font-weight:700;
	color:#666;
	padding:0 32px 40px 32px;
	line-height:15px;
}

#p10_finalResult {
	position:absolute;
	top:433px;
	left:0;
	width:974px;
	height:160px;
}
#p10_finalResultCopy,
#p10_finalResultCopyStrong {
	display:inline;
	font-size:14px;
	color:#000;
	text-shadow:0 1px 0 rgb(255, 255, 255);
}
#p10_finalResultCopy {
	margin-left:25px;
}
#p10_finalResultCopyStrong {
	font-weight:700;
}

#p10_box1,
#p10_box2,
#p10_box3 {
	width:260px;
	height:130px;
	position:absolute;
	top:30px;
}
#p10_box1 { left:25px; }
#p10_box2 { left:355px; }
#p10_box3 { left:665px; }
#p10_box3 .buttonWrap {
	margin:15px 0 0;
	text-align:left;
}
#p10_box3 .buttonBlue span {
	padding:7px 10px 9px;
}
#p10_box1 h4,
#p10_box1 p {
	padding:0 0 0 55px;
}
#p10_box1 h4 {
	margin-bottom:0;
	padding-bottom:16px;
}
#p10_box1 h4.rf_result {
	background:transparent url('zeiss_eyetest_icons.png') no-repeat 0 0;
	overflow:visible;
	font-size:12px;
	font-weight:700;
	min-height:32px;
}
#p10_box1 h4.rf_result2 { background-position:0 -1067px; }
#p10_box1 h4.rf_result1 { background-position:0 -1207px; }
#p10_box1 h4.rf_result0 { background-position:0 -1347px; }

/* link */
.textlink {
	color:#469bdc;
	text-decoration:none;
}

/* @p11 */
#p11 {
	background-position:0 -2400px !important;
}
#p11_voucherFormWrap,
#p11_dublicateResultsFormWrap,
#p11_failureWrap {
	position:absolute;
	top:82px;
	left:65px;
	width:285px;
	height:415px;
	padding:55px 20px 0 20px;
	text-align:center;
	border:2px dashed #9f9f9e;
	/* TODO: add IE Fallback border-radius */
	border-radius:10px;
}
#p11_voucherFormWrap h2,
#p11_dublicateResultsFormWrap h2,
#p11_failureWrap h2 {
	font-size:18px;
	font-weight:400;
	color:#000;
	text-shadow:0 1px 0 rgb(255, 255, 255);
	margin:0 0 12px;
}
#p11_voucherFormWrap p,
#p11_dublicateResultsFormWrap p,
#p11_failureWrap p{
	font-size:14px;
	margin:0 0 8px;
}
#p11_failureWrap p{
	color: #C0262C;
}
#p11_voucherFormWrap p.small,
#p11_dublicateResultsFormWrap p.small,
#p11_failureWrap p.small {
	font-size:11px;
	margin:0 0 20px;
}
#p11_voucherForm label {
	color:#000;
	text-shadow:0 1px 0 rgb(255, 255, 255);
}
#p11_submitVoucherWrap,
#p11_dublicateResultsFormWrap .buttonWrap,
#p11_failureWrap .buttonWrap {
	width:100%;
	margin:20px 0 0;
}
#p11_failureWrap .buttonWrap {
	margin:55px 0 0;
}
#p11_submitVoucherWrap .buttonBlue,
#p11_dublicateResultsFormWrap .buttonWrap .buttonBlue,
#p11_failureWrap .buttonWrap .buttonBlue {
	width:210px;
}
.error .styled-select-header {
	background: url("zeiss_eyetest_icons.png") no-repeat scroll right -341px transparent;
}
.error .styled-select-wrapper {
	background: url("zeiss_eyetest_icons.png") no-repeat scroll -660px -310px transparent;
}

#p11_dublicateResultsFormWrap .styled-select-wrapper,
#p11_dublicateResultsFormWrap .styled-select-content {
	width: 275px;
}

#p11_voucherPreview {
	position:absolute;
	top:82px;
	left:65px;
	width:325px;
	height:415px;
	padding:0;
	text-align:center;
	border:2px dashed #9f9f9e;
	/* TODO: add IE Fallback border-radius */
	border-radius:10px;
	overflow: hidden;
}
#p11_voucherPreview img {
	width: 325px;
	position:absolute;
	top:-28px;
	left:0;
}

#p11_voucherDescWrap {
	position:absolute;
	top:80px;
	left:470px;
	width:420px;
}
#p11_voucherDescWrap h2,
#p11_voucherDescWrap p {
	font-size:14px;
	font-weight:400;
}
#p11_voucherDescWrap h2 {
	margin:0 0 38px;
	line-height:18px;
	color:#000;
	text-shadow:0 1px 0 rgb(255, 255, 255);
}
#p11_voucherDescWrap p {
	margin:0 0 18px;
}

/* social media, share */
#p11_shareWrap {
	position:absolute;
	top:500px;
	left:470px;
	width:500px;
}
#p11_shareWrap p.label {
	font-size:14px;
	font-weight:400;
	color:#000;
	text-shadow:0 1px 0 rgb(255, 255, 255);
}
#p11_mailButton,
#p11_facebookButton,
#p11_twitterButton,
#p11_googlePlusButton {
	position:relative;
	display:block;
	float:left;
	margin:8px 14px 0 0;
	width:32px;
	height:32px;
	background:transparent url('zeiss_eyetest_icons.png') no-repeat 0 0;
	cursor:pointer;
}
#p11_mailButton {
	background-position:-450px -335px;
}
#p11_mailLink {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:transparent;
	text-decoration:none;
}
#p11_facebookButton {
	background-position:-500px -335px;
}
#p11_twitterButton {
	background-position:-550px -335px;
}
#p11_googlePlusButton {
	background-position:-600px -335px;
}

#p11_resetWrap {
	position:absolute;
	top:524px;
	right:25px;
}
#p11_resetWrap .buttonBlue {
	width:220px;
}
#p11_downloadWrap {
	display: block;
	left: 470px;
	position: absolute;
	top: 312px;
}
#p11_downloadWrap .buttonBlue {
	width:210px;
}
#p11_sendWrap {
	display: block;
	left: 470px;
	position: absolute;
	top: 355px;
}
#p11_sendWrap .buttonBlue {
	width:210px;
}


/* gameLayer */

#p11_game_layer {
	position:absolute;
	left:82px;
	top:103px;
	width:800px;
	height:433px;
	z-index:100;
}

#takePartButton {
	position:absolute;
	right:48px;
	bottom:45px;
}
#takeNotPartButton {
	position:absolute;
	left:46px;
	bottom:45px;
}
#gameIntro {
	height:330px;
	background:transparent url('game-intro.jpg') no-repeat 0 0;
}
#gameIntro h2 {
	margin-bottom:20px;
}
#gameIntro p {
	font-size:14px;
	line-height:18px;
}

#gameForm {
	height:350px;
	background:transparent url('game-form.jpg') no-repeat 0 0;
	position:relative;
}
#gameForm label {
	font-weight:normal;
}
#gameForm h2 {
	margin-bottom:20px;
}
#gameForm p {
	font-size:13px;
	line-height:16px;
}
#gameForm .leftTextBox,
#gameForm .rightFormBox  {
	position:absolute;
	left:0;
	top:0;
	width:320px;
	height:350px;
}
#gameForm .rightFormBox {
	left:auto;
	right:0;
}

#gameForm .firstPrice {
	position:absolute;
	width:180px;
	left:150px;
	top:190px;
	font-size:12px;
}
#gameForm .firstPrice strong {
	font-weight:bold;
	font-size:14px;
}
#gameForm .secondPrice {
	position:absolute;
	width:180px;
	left:20px;
	bottom:20px;
	font-size:12px;
	text-align:right;
}
#gameForm .secondPrice strong {
	font-weight:bold;
	font-size:14px;
}

#gameForm form {
	padding-top:70px;
}
#gameForm table th {
	text-align:right;
	vertical-align:top;
}

#gameForm table td {
	text-align:left;
	vertical-align:top;
}
#gameForm table .buttonWrap {
	text-align:left;
}
#gameForm table .styled-select-header-entry,
#gameForm table input {
	text-align:left;
}

#gameForm label {
	padding:4px 10px 0 0;
	display:block;
	color:#000000;
}

#gameForm .styled-select-wrapper {
	width:83px;
	margin:0 0 10px 0;
}
#gameForm .styled-select-wrapper ul {
	width:84px;
	z-index:10;
	overflow:hidden;
}
#gameForm table .styled-select-header-entry {
	padding-left:6px;
}

#gameForm .inputWrap {
	margin-bottom:10px;
}
#gameForm .inputWrapInner {
	margin:0;
	width:220px !important;
	*background-position:-660px -249px;
}
#gameForm .inputWrapInner input {
	width:215px !important;
}

#gameForm .checkboxWrap {
	padding-left:60px;
	position:relative;
	overflow:hidden;
	margin-bottom:10px;
}
#gameForm .checkboxWrapInner {
	padding:0;
	margin:0;
}
#gameForm .checkboxWrap input {
	position:absolute;
	left:-30px;
	top:-30px;
}
#gameForm .checkboxWrap label {
	padding:0 0 0 30px;
	margin:0;
	font-size:12px;
	color:#626262;
	background:transparent url('form-checkbox.gif') no-repeat 0 -100px;
}
#gameForm .checkboxChecked label {
	background-position:0 0;
}
#gameForm .error .checkboxWrapInner label {
	background-position:0 -223px;
}
#gameForm .error .checkboxChecked label {
	background-position:0 0;
}
#gameForm .checkboxWrap label a {
	color:#626262;
	text-decoration:none;
}
#gameForm .error label a {
	color:#FF0000 !important;
}
#gameForm .checkboxWrap label a:hover {
	text-decoration:underline;
}
#gameForm .buttonBlue span {
	padding:7px 17px 9px 14px
}

#gameForm p.requiredNote {
	font-size:11px;
	margin-bottom:30px;
}
#submitFormButton {
	text-align:right !important;
}

#p11_game_layer .scrollContainer {
	height:317px;
	overflow-y:auto;
}
#p11_game_layer .scrollContainer p {
	margin-bottom:1.2em;
}

#p11_game_layer .closeGameLayer {
	position:absolute;
	right:32px;
	top:20px;
	width:25px;
	height:25px;
	background:transparent url('layer-close.gif') no-repeat 0 0;
	cursor:pointer;
}

#abortFormButton .buttonBlue {
	background-position:0 -2480px;
}
#abortFormButton .buttonBlue span {
	background-position:right -2440px;
}
#abortFormButton .buttonBlue:hover {
	background-position:0 -2560px;
}
#abortFormButton .buttonBlue:hover span {
	background-position:right -2520px;
}

#p11_game_layer .layerTop,
#p11_game_layer .layerMiddle,
#p11_game_layer .layerBottom {
	background-image:url('layer_game.png');
}
#p11_game_layer .layerMiddle {
	height:350px;
	padding-left:60px;
	padding-right:60px;
	padding-top:17px;
}

/* TODO: TEMP !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Just for testing display none !!!!! */
#p11_downloadWrap,
#p11_sendWrap {
	display:none;
}

/* --------------------------------------------------
	:: Mobile Fixes
---------------------------------------------------*/
@media only screen and (device-width: 768px), only screen and (device-width: 1280px), only screen and (device-width: 800px) {
	/* fix background image size on ipad, important for jpg background-images */
	.cPage {
		-webkit-background-size: 974px 6000px;
	}
	#p1,
	.visual {
		-webkit-background-size: 2000px 2324px;
	}

	/* prevent selection behaviour on ipad */
	::-moz-selection { background:none; color:inherit; }
	::selection { background:none; color:inherit; }

	/* add a little bit more margin to keep it nice */
	#zeissEyeTest {
		margin: 2px auto 0;
	}

	/* reduce distance, otherwise the creditcard is to big for the layout/to small for real creditcard */
	#csDimension {
		left:45px;
	}

	#zeissEyeTest h1 {
		font-size:14px;
	}
}

/* --------------------------------------------------
	:: Print Setup
---------------------------------------------------*/
@media print {
	/* Typo & Print Setup */
	* {
		background:transparent !important;
		color:black !important;
		text-shadow:none !important;
		filter:none !important;
		-ms-filter:none !important;
	}
	/* Black prints faster: sanbeiji.com/archives/953 */
	p a, p a:visited { color:#000 !important; text-decoration:underline; }
	p a[href]:after { content:" (" attr(href) ")"; }
	abbr[title]:after { content:" (" attr(title) ")"; }
	/* Don't show links for images, or javascript/internal links */
	.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content:""; }
	pre, blockquote { border:1px solid #999; page-break-inside:avoid; }
	/* css-discuss.incutio.com/wiki/Printing_Tables */
	thead { display:table-header-group; }
	tr, img { page-break-inside:avoid; }
	img { max-width:100%; }
	p, h2, h3 { orphans:3; widows:3; }
	h2, h3 { page-break-after:avoid; }
	@page { margin: 0.5cm; }

	/* Page Setup */
}


/* @en_GB */

/* @es_AR */
.es_AR #status_i3 span,
.es_AR #status_i4 span {
	padding:7px 20px 12px;
	line-height:15px;
}
.es_AR #status_i3.active span,
.es_AR #status_i4.active span {
	padding-left:20px;
}
.es_AR #p11_resetWrap .buttonBlue {
	width:240px;
}

/* @nn_NO */
.nn_NO #p10_box3 .buttonBlue span {
	font-size:12px;
}

/* @en_US */
.nn_NO #p10_box3 .buttonBlue span {
	font-size:12px;
}

/* @pt_PT */
.pt_PT #p11_resetWrap .buttonBlue {
	width:240px;
}

/* @pt_BR */
.pt_BR #status_i4 span {
	padding:7px 20px 12px;
	line-height:15px;
}
.pt_BR #status_i4.active span {
	padding-left:20px;
}

/* @es_AN */
.es_AN #status_i3 span,
.es_AN #status_i4 span {
	padding:7px 20px 12px;
	line-height:15px;
}
.es_AN #status_i3.active span,
.es_AN #status_i4.active span {
	padding-left:20px;
}
.es_AN #p11_resetWrap .buttonBlue {
	width:240px;
}
.es_AN #p11_resetWrap .buttonBlue {
	width:240px;
}

/* @nl_BE */
.pt_PT #p11_resetWrap .buttonBlue {
	width:240px;
}

/* @nl_NL */
.pt_PT #p11_resetWrap .buttonBlue {
	width:240px;
}