.cPage * { font: inherit; margin: 0px; padding: 0px; border: 0px currentColor; vertical-align: baseline; font-size-adjust: inherit; font-stretch: inherit; }
#essvision { color: rgb(98, 98, 98); line-height: 16px; letter-spacing: 0px; font-size: 12px; position: relative; margin: 0px auto 20px auto; padding: 0px; width: 922px; height: 602px; text-align: left; position: relative; background-color: #dad9d9; background-repeat: repeat-x; background-position: center; background: url("/shili/essvision_bg.jpg") }
#essvision .cPage { border: 1px solid #DDD; width: 920px; height: 600px; overflow: hidden; position: relative; -webkit-background-size: 920px 3000px; margin: 0px auto 0px auto; }
/*-------------------------------------------------*/
#essvision h1 { margin: 0px; left: 2px; top: 13px; width: 900px; color: #0292d1; line-height: 20px; font-size: 16px; font-weight: bold; position: absolute; }
#essvision h2 { color: #0292d1; line-height: 22px; font-size: 14px; margin-bottom: 6px; font-weight: 400; }
#essvision p { margin: 0px; line-height: 1.6em; }
#essvision h4 { margin: 0px; padding: 0px; color: rgb(98, 98, 99); font-weight: normal; }
/*-------------------------------------------------*/
.essvisionTitle { margin: 20px 19px 0px 19px; padding: 10px; font-size: 16px; color: #0292d1; border: solid 1px #CCC; background-color: #F5F5F5; font-weight: 600; }
.essvisionTip { padding: 0px 20px 40px 20px; font-size: 12px; color: #999; }
.essvisionStartTip { font-size: 14px; text-align: center; line-height: 1.8em; padding-top: 40px; }
.essvisionResult { font-size: 14px; text-align: center; line-height: 1.6em; padding-top: 5px; padding-left: 150px; padding-right: 150px; }
.essvisionResultTip { font-size: 12px; text-align: center; line-height: 1.6em; padding-top: 350px; padding-left: 150px; padding-right: 150px; }
.essvisionReadyTip { font-size: 12px; text-align: left; line-height: 1.8em; padding-top: 0px; padding-left: 40px; }
.blueHighlight { color: #0292d1; }
.copyTextBig { color: #666; line-height: 1.6em; font-size: 14px; text-shadow: 0px 1px 0px #fff; }
.howToUseNote { left: 40px; width: 840px; bottom: 30px; position: absolute; text-align: center; }
/*-------------------------------------------------*/
#loadingScreen { background: url("/shili/ajax-loader.gif") no-repeat center rgb(255, 255, 255); left: 1px; top: 0px; width: 920px; height: 601px; position: absolute; }
/*-------------------------------------------------*/
#essvision .visual { left: 0px; top: 110px; width: 920px; position: absolute; background-color: red; }
#EssPage5 .visual { height: 350px; background: url("/shili/acuity_result_bg.jpg") no-repeat 0px 0px; }
#EssPage7 .visual { height: 350px; background: url("/shili/contrast_result_bg.jpg") no-repeat 0px 0px; }
#EssPage9 .visual { height: 350px; background: url("/shili/color_result_bg.jpg") no-repeat 0px 0px; }
/*-------------------------------------------------*/
.borderBox { }
.borderBoxInner { background: #FCFCFC; border: solid 1px #DDD; padding: 15px; }
.borderBox h2 { color: rgb(0, 0, 0); line-height: 20px; font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.borderBox p { line-height: 14px; font-size: 11px; margin-bottom: 10px; }
/*-------------------------------------------------*/
#EssPage1 { background: url("/shili/start_bg.jpg") no-repeat 0px bottom !important; }
#EssPage3 .copyText { position: absolute; left: 25px; top: 75px; width: 840px;   }
#EssPage3 .checkboxWrap { position: absolute; }
#EssPage3_box1 { position: absolute; left: 4px; top: 180px; }
#EssPage3_box2 { position: absolute; left: 402px; top: 180px; }
#EssPage3_box3 { position: absolute; top: 180px; right: 4px;  }
#EssPage3_box1 .borderBoxInner { width: 365px; height: 310px; }
#EssPage3_box2 .borderBoxInner { width: 260px; height: 310px; }
#EssPage3_box3 .borderBoxInner { width: 189px; height: 310px; }
#EssPage3_box3 .deskImage { position: absolute; background: url("/shili/desk_image.jpg") no-repeat 0px 0px; left: 0px; width: 219px; height: 219px; bottom: 1px; }
/*-------------------------------------------------*/
.tWrap { left: 220px; top: 130px; width: 310px; height: 315px; position: absolute; }
.tTop { background: url("/shili/essvision_icons.png") no-repeat 0px 0px; width: 39px; height: 37px; position: absolute; cursor: pointer; }
.tRight { background: url("/shili/essvision_icons.png") no-repeat 0px 0px; width: 39px; height: 37px; position: absolute; cursor: pointer; }
.tBottom { background: url("/shili/essvision_icons.png") no-repeat 0px 0px; width: 39px; height: 37px; position: absolute; cursor: pointer; }
.tLeft { background: url("/shili/essvision_icons.png") no-repeat 0px 0px; width: 39px; height: 37px; position: absolute; cursor: pointer; }
.tTop { background-position: -450px -240px; left: 135px; top: 0px; }
.tTop:hover { background-position: -450px -290px; }
.tRight { background-position: -600px -240px; top: 139px; right: 0px; }
.tRight:hover { background-position: -600px -290px; }
.tBottom { background-position: -500px -240px; left: 135px; bottom: 0px; }
.tBottom:hover { background-position: -500px -290px; }
.tLeft { background-position: -550px -240px; left: 0px; top: 139px; }
.tLeft:hover { background-position: -550px -290px; }
/*-------------------------------------------------*/
#t3Wrap { left: 160px; top: 109px; width: 416px; height: 407px; }
#t3Left { top: 184px; }
#t3Right { top: 184px; }
#t3Top { left: 188px; }
#t3Bottom { left: 188px; }
#t3Canvas { margin: 46px 51px; }
#t3ImgWrap { background: rgb(0, 0, 0); left: 50px; top: 46px; width: 316px; height: 313px; position: absolute; }
#t3Img { background: url("/shili/deuteranop.png") no-repeat 0px 0px; left: 37px; top: 39px; width: 240px; height: 240px; position: absolute; }
/*-----------------------ready--------------------------*/
#csContainer { position: absolute; }
.dimensionValue { position: absolute; }
#csExpand { position: absolute; }
#csNarrow { position: absolute; }
#csContainer { width: 366px; height: 210px; }
#csOuterWrap { width: 366px; height: 210px; }
#csContainer { left: 15px; bottom: 1px; }
#csOuterWrap { overflow: hidden; position: relative; }
#csDimension { margin: 0px auto; width: 199px; height: 210px; bottom: 0px; overflow: hidden; border-right-color: rgb(186, 186, 186); border-left-color: rgb(186, 186, 186); border-right-width: 1px; border-left-width: 1px; border-right-style: dashed; border-left-style: dashed; }
.dimensionValue { left: 0px; top: 0px; width: 100%; height: 20px; text-align: center; font-size: 10px; font-weight: 700; display: block; }
#csExpand { top: 60px; -ms-user-select: none; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; }
#csNarrow { top: 60px; -ms-user-select: none; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; }
#csNarrow { right: 0px; }
#csExpand { left: 0px; }
#ccOuterWrap { position: absolute; }
#ccOuter { position: absolute; }
#ccInner { position: absolute; }
#ccInnerBg { position: absolute; }
#ccDarker { position: absolute; }
#ccLighter { position: absolute; }
#ccOuterWrap { left: 17px; width: 258px; height: 230px; bottom: 10px; }
#ccSlider { background: url("/shili/essvision_icons.png") no-repeat -364px -1991px; width: 258px; height: 36px; bottom: 0px; position: absolute; }
#ccSlider .sliderHead { background: url("/shili/essvision_icons.png") no-repeat -236px -2000px; left: 0px; top: 1px; width: 23px; height: 28px; position: relative; cursor: pointer; }
#ccSlider .sliderHead:hover { background: url("/shili/essvision_icons.png") no-repeat -300px -2000px; }
#ccOuter { background: url("/shili/contrast_bg.gif") 0px 0px; left: 40px; top: 0px; width: 180px; height: 180px; }
#ccInner { background: rgb(0, 0, 0); left: 45px; top: 45px; width: 90px; height: 89px; color: rgb(69, 154, 219); }
#ccInnerBg { background: rgb(0, 0, 0); left: 45px; top: 45px; width: 90px; height: 89px; color: rgb(69, 154, 219); }
#ccInnerBg { background: rgb(255, 255, 255); }
#ccDarker { top: 25px; -ms-user-select: none; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; }
#ccLighter { top: 25px; -ms-user-select: none; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; }
#ccLighter { right: 0px; }
#ccDarker { left: 0px; }
/*-------------------------------------------------*/
.infoBoxSet { top: 150px; width: 162px; height: 300px; right: 24px; position: absolute; color: #0292d1; font-size: 14px; padding-left: 30px; border-left: solid 1px #AAA; line-height: 3em; font-weight: 600; }
.letterWrap { left: 50%; top: 50%; position: absolute; }
.circleWrap { left: 50%; top: 50%; position: absolute; }
#contrastEl { background: rgb(0, 0, 0); width: 100%; height: 100%; position: relative; }
#contrastEl .mask { background: rgb(255, 255, 255); width: 20%; height: 20%; position: absolute; }
.r#contrastEl .mask { width: 80%; right: 0px; }
.r#contrastEl .mask1 { top: 20%; }
.r#contrastEl .mask2 { bottom: 20%; }
.t#contrastEl .mask { top: 0px; height: 80%; }
.t#contrastEl .mask1 { left: 20%; }
.t#contrastEl .mask2 { right: 20%; }
.l#contrastEl .mask { left: 0px; width: 80%; }
.l#contrastEl .mask1 { top: 20%; }
.l#contrastEl .mask2 { bottom: 20%; }
.b#contrastEl .mask { height: 80%; bottom: 0px; }
.b#contrastEl .mask1 { left: 20%; }
.b#contrastEl .mask2 { right: 20%; }
.imageDisclaimer { left: 24px; bottom: 115px; color: rgb(132, 132, 132); line-height: 12px; font-size: 10px; position: absolute; }
/*-------------------------------------------------*/
#circleEl { width: 100%; height: 100%; position: relative; }
#circleEl img { display: block; position: absolute; }
#circleEl .mask { display: block; position: absolute; }
#circleEl img { width: 100%; height: 100%; }
#circleEl .mask { background: rgb(255, 255, 255); width: 40%; height: 20%; }
.l#circleEl .mask { left: 0px; top: 40%; }
.r#circleEl .mask { top: 40%; right: 0px; }
.t#circleEl .mask { left: 40%; top: 0px; width: 20%; height: 40%; }
.b#circleEl .mask { left: 40%; width: 20%; height: 40%; bottom: 0px; }
/*------------------------acuity result-------------------------*/
#r1Container { left: 24px; top: 510px; width: 700px; position: absolute; }
#r1Container p { padding: 5px 0px 0px 55px; line-height: 1.6em; }
#r1Container .r1_result {  min-height: 45px; background-repeat: no-repeat; background-position: 0px 0px; } 
#r1Container .r1_result2 { background-image: url("/shili/essvision_result_icon_good_b.png"); }
#r1Container .r1_result1 { background-image: url("/shili/essvision_result_icon_notbad_b.png"); }
#r1Container .r1_result0 { background-image: url("/shili/essvision_result_icon_bad_b.png"); }
/*------------------------contrast result-------------------------*/
#r2Container { left: 24px; top: 505px; width: 700px; position: absolute; }
#r2Container p { padding: 5px 0px 0px 55px; line-height: 16px; }
#r2Container .r2_result {  min-height: 45px; background-repeat: no-repeat; background-position: 0px 0px; }
#r2Container .r2_result2 { background-image: url("/shili/essvision_result_icon_good_b.png"); }
#r2Container .r2_result1 { background-image: url("/shili/essvision_result_icon_notbad_b.png"); }
#r2Container .r2_result0 { background-image: url("/shili/essvision_result_icon_bad_b.png"); }
/*------------------------color result-------------------------*/
#r3Container { left: 24px; top: 505px; width: 700px; position: absolute; }
#r3Container p { padding: 5px 0px 5px 55px; line-height: 16px; }
#r3Container .r3_result {  min-height: 45px; background-repeat: no-repeat; background-position: 0px 0px; }
#r3Container .r3_result2 { background-image: url("/shili/essvision_result_icon_good_b.png"); }
#r3Container .r3_result1 { background-image: url("/shili/essvision_result_icon_notbad_b.png"); }
#r3Container .r3_result0 { background-image: url("/shili/essvision_result_icon_bad_b.png"); }
/*-------------------------result------------------------*/
#EssPage10 { background: url("/shili/start_bg.jpg") no-repeat 0px bottom !important; }
#EssPage10 .resultBox { position: absolute; top: 240px;}
#EssPage10_resultTest1 { left: 194px; }
#EssPage10_resultTest2 { left: 398px; }
#EssPage10_resultTest3 { left: 601px; }
.EssPage10_tooltip { width: 35px; height: 35px; display: block; left: 125px; top: 128px; position: absolute; cursor: default; }
.EssPage10_tooltip .r1_result { background-repeat: no-repeat; background-position: 0px 0px; }
.EssPage10_tooltip .r2_result { background-repeat: no-repeat; background-position: 0px 0px; }
.EssPage10_tooltip .r3_result { background-repeat: no-repeat; background-position: 0px 0px; }
.EssPage10_tooltip .r1_result { width: 35px; height: 35px; display: block; }
.EssPage10_tooltip .r2_result { width: 35px; height: 35px; display: block; }
.EssPage10_tooltip .r3_result { width: 35px; height: 35px; display: block; }
.EssPage10_tooltip .r1_result2 { background-image: url("/shili/essvision_result_icon_good_s.png"); }
.EssPage10_tooltip .r2_result2 { background-image: url("/shili/essvision_result_icon_good_s.png"); }
.EssPage10_tooltip .r3_result2 { background-image: url("/shili/essvision_result_icon_good_s.png"); }
.EssPage10_tooltip .r1_result1 { background-image: url("/shili/essvision_result_icon_notbad_s.png"); }
.EssPage10_tooltip .r2_result1 { background-image: url("/shili/essvision_result_icon_notbad_s.png"); }
.EssPage10_tooltip .r3_result1 { background-image: url("/shili/essvision_result_icon_notbad_s.png"); }
.EssPage10_tooltip .r1_result0 { background-image: url("/shili/essvision_result_icon_bad_s.png"); }
.EssPage10_tooltip .r2_result0 { background-image: url("/shili/essvision_result_icon_bad_s.png"); }
.EssPage10_tooltip .r3_result0 { background-image: url("/shili/essvision_result_icon_bad_s.png"); }
/*----------------------??---------------------------*/
.buttonWrap { text-align: center; }
.buttonBlue { font-size: 16px; font-weight: bold; background-color: #008DC1; color: #FFF; padding: 10px 30px 10px 30px; overflow: hidden; text-decoration: none; display: inline-block; cursor: pointer; -ms-zoom: 1; -webkit-border-radius: 20px; border-radius: 20px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); }
.buttonBlue:hover { }
.buttonGrey { text-align: center; display: block; width: 28px; height: 24px; padding: 4px 0px 0px 0px; font-weight: 400; font-size: 16px; color: #535353; text-shadow: 0 1px 0 #ddd; text-align: center; border: solid 1px #AAA; background-color: #EEE; cursor: pointer; -webkit-border-radius: 3px; border-radius: 3px; }
.buttonGrey:hover { background-color: #FCFCFC; }
.minusButton { line-height: 16px; }
.introButton { background-position: left -2320px; height: 40px; }
.introButton span { background-position: right -2220px; line-height: 20px; padding-top: 9px; padding-bottom: 13px; font-size: 17px; font-weight: normal; }
.introButton:hover { background-position: left -2370px; }
.introButton:hover span { background-position: right -2270px; }
#EssPage1 .buttonWrap { bottom: 80px; width: 100%; position: absolute; }
#EssPage1 .buttonWrap .buttonBlue { margin-left: 6px; }
#EssPage3_nextStepWrap .buttonWrap { bottom: 20px; width: 100%; position: absolute; }
#EssPage3_nextStepWrap .buttonWrap .buttonBlue { margin-left: 6px; }
#EssPage10 .buttonWrap { bottom: 80px; width: 100%; position: absolute; }
#EssPage10 .buttonWrap .buttonBlue { margin-left: 6px; }
.nextStepButton { right: 24px; bottom: 50px; position: absolute; }
/*----------------------???---------------------------*/
.essvisionStatus { background: url("/shili/essvision_status_bg.png") no-repeat; height: 110px; position: relative; }
.essvisionStatus span { position: absolute; display: block; height: 25px; width: 96px; color: #666; font-size: 12px; padding-top: 75px; text-align: center; }
.essvisionStatus .ready { left: 11px; }
.essvisionStatus .acuity { left: 214px; }
.essvisionStatus .contrast { left: 416px; }
.essvisionStatus .color { left: 620px; }
.essvisionStatus .result { right: 2px; }
.essvisionStatus .active { background: url("/shili/essvision_status_dot.png") no-repeat; }