@import url("navigation.css"); /* STAGE */ .foreground, .pagewrap, .contactwrap, #intro, #aside, #main, #main-uv, #footer{ margin:0 auto; padding:0 } .foreground{ width:100% } .pagewrap{ position:absolute } .contactwrap{ position:relative; max-width:900px } #header, #main, #footer{ } #intro{ position:fixed; width:100%; min-height:640px; background:#fff url('../images/intro-page.jpg') no-repeat top center; background-size:cover; z-index:999 } #finish{ visibility:visible } /* ASIDE */ #aside{ position:fixed; right:0; width:135px; height:100%; background:transparent url('../images/aside-bar-extend.jpg') repeat-y; text-align:center; z-index:98 } #aside-bg{ background:transparent url('../images/aside-bar.jpg') no-repeat top center } .language{ padding-top:18px; color:#be1622; font-size:12px; text-transform:uppercase } .logo{ margin-top:33px } .logo h1 a{ display:block; width:135px; height:73px; background:url('../images/eversoft-skinz.png'); text-indent:-98777px } div.navigation{ margin:30px 0 /* Goes to navigation.css */ } .social-media{ margin-bottom:40px; line-height:12px } /* MAIN */ #main, #main-uv{ height:100% } .content{ margin-right:135px; width:100% } .article{ /*width:100%*//*may15fix*/min-width:1400px; } /* Home page ############ */ #main #home{ width:945px; height:575px; background:#fff url('../images/home-stage.jpg') no-repeat top left } #home h2{ position:absolute; top:25px; left:300px; display:block; width:595px; height:140px; background:transparent url('../images/5-step-anti-ageing.png') no-repeat; text-indent:-98777px } #home h2.cn{ position:absolute; top:25px; left:300px; display:block; width:595px; height:140px; background:transparent url('../images/5-step-anti-ageing_cn.png') no-repeat; text-indent:-98777px } #home h3{ position:absolute; top:500px; left:54px; width:850px } #home #products{ position:absolute; top:167px; left:368px; width:524px; height:355px } #products a.step{ position:absolute; top:0 } #products a.step.pr1{ background:url('../images/product1.png') center top no-repeat transparent; left:1px; width:60px; height:355px } #products a.step.pr2{ background:url('../images/product2.png') center top no-repeat transparent; left:85px; width:118px; height:355px } #products a.step.pr3{ background:url('../images/product3.png') center top no-repeat transparent; left:215px; width:56px; height:355px } #products a.step.pr4{ background:url('../images/product4.png') center top no-repeat transparent; left:285px; width:55px; height:355px } #products a.step.pr5{ background:url('../images/product5.png') center top no-repeat transparent; left:370px; width:154px; height:355px } /* CHI */ #products a.step.pr1cn{ background:url('../images/product1_cn.png') center top no-repeat transparent; left:1px; width:60px; height:355px } #products a.step.pr2cn{ background:url('../images/product2_cn.png') center top no-repeat transparent; left:85px; width:118px; height:355px } #products a.step.pr3cn{ background:url('../images/product3_cn.png') center top no-repeat transparent; left:215px; width:56px; height:355px } #products a.step.pr4cn{ background:url('../images/product4_cn.png') center top no-repeat transparent; left:285px; width:55px; height:355px } #products a.step.pr5cn{ background:url('../images/product5_cn.png') center top no-repeat transparent; left:370px; width:154px; height:355px } #products a.step:hover{ background-position: bottom center } #main-uv #home #uv-products{ position:absolute; background:url('../images/uv-product-curve.png') top center no-repeat transparent; top:167px; left:92px; width:585px; height:340px } #uv-products a.step{ position:absolute; top:0 } #uv-products a.step.pr1{ background:url('../images/uv-product1.png') center top no-repeat transparent; left:0; width:255px; height:340px } #uv-products a.step.pr2{ background:url('../images/uv-product2.png') center top no-repeat transparent; left:255px; width:75px; height:340px } #uv-products a.step.pr3{ background:url('../images/uv-product3.png') center top no-repeat transparent; left:330px; width:80px; height:340px } #uv-products a.step.pr4{ background:url('../images/uv-product4.png') center top no-repeat transparent; left:410px; width:105px; height:340px } #uv-products a.step.pr5{ background:url('../images/uv-product5.png') center top no-repeat transparent; left:515px; width:70px; height:340px } /* CHI */ #uv-products a.step.pr1cn{ background:url('../images/uv-product1_cn.png') center top no-repeat transparent; left:0; width:255px; height:340px } #uv-products a.step.pr2cn{ background:url('../images/uv-product2_cn.png') center top no-repeat transparent; left:255px; width:75px; height:340px } #uv-products a.step.pr3cn{ background:url('../images/uv-product3_cn.png') center top no-repeat transparent; left:330px; width:80px; height:340px } #uv-products a.step.pr4cn{ background:url('../images/uv-product4_cn.png') center top no-repeat transparent; left:410px; width:105px; height:340px } #uv-products a.step.pr5cn{ background:url('../images/uv-product5_cn.png') center top no-repeat transparent; left:515px; width:70px; height:340px } #uv-products a.step:hover{ background-position: bottom center } #home #next-stage{ position:absolute; top:570px; left:430px } #next-stage .button{ text-align:center } #next-stage .button a{ padding-left:10px; display:block; float:left; background:url('../images/button.png') top center no-repeat; width:9px; height:9px; text-indent:-98777px } #next-stage .button a:hover, #next-stage .button a.selected{ background-position: bottom center } /* About page ############ */ #about{ margin:50px 180px 40px 54px } #about h2{ margin:0; padding:0; padding-bottom:28px; color:#c05a6a; font-family:'Franklin-Gothic', Helvetica; font-size:38px } #about p{ font-size:13px; line-height:16px } #about p a{ text-decoration:underline } /* FAQ page ############ */ #faq{ margin:50px 180px 40px 54px } #faq h2{ margin:0; padding:0; padding-bottom:28px; color:#c05a6a; font-family:'Franklin-Gothic', Helvetica; font-size:38px } #faq h4{ margin:0; padding:18px 0 8px; color:#c05a6a; font-family:'Franklin-Gothic', Helvetica; font-size:15px; font-weight:bold; text-decoration:underline } #faq b{ line-height:20px } #faq p{ padding-left:13px; font-size:13px; line-height:16px } #faq p.after{ padding-left:21px } #faq p a{ text-decoration:underline } /* Videos page ############ */ #video{ width:100%; height:575px } /* ########### */ .channel{ padding-bottom:10px; color:#c05a6a; font-family:'Franklin-Gothic', Helvetica; font-size:21px } .channel a{ color:#c05a6a } .channel a:hover, .channel a.this{ color:#575756 } .video-stage{ width:670px; height:355px; background:url('../images/videos/channel-bg.jpg') no-repeat } .video-stage a{ color:#c05a6a; font-family:'Franklin-Gothic', Helvetica; font-size:45px; text-align:center } .video-stage a:hover{ color:#575756 } .video-stage a div{ float:left; padding:165px 0 170px 1px; width:334px } .thumb{ } .thumb p{ float:left; padding-right:8px } .thumb p:last-child{ padding-right:0 } /* ########### */ a.prev{ position:absolute; top:42%; left:2%; width:18px; height:55px; background:transparent url('../images/videos/arrow.png') top left; z-index:99 } a.prev:hover{ background-position: bottom left } a.next{ position:absolute; top:42%; left:90%; width:18px; height:55px; background:transparent url('../images/videos/arrow.png') top right; z-index:99 } a.next:hover{ background-position: bottom right } .step{ position:absolute } /*.step span{ font-family:'Franklin-Gothic', Helvetica; font-size:36px; line-height:40px }*/ .step span{ font-family:'Franklin-Gothic', Helvetica; font-size:28px; line-height:40px } .step h2{ font-family:'Franklin-Gothic', Helvetica; font-size:54px; line-height:50px; text-transform:uppercase } .step h2 span{ font-size:20px; line-height:20px; text-transform:none } .step h3{ padding-top:4px; font-family:'Franklin-Gothic', Helvetica; font-size:28px; line-height:30px; text-transform:uppercase } .step h3 span{ font-size:15px; line-height:16px; text-transform:none } .step p{ padding-top:6px; font-family:'Myriad-Pro', Arial; font-size:12px; line-height:13px } .instructions{ position:absolute; padding-left:20px; background:transparent url('../images/range/anti-ageing/5-step/sp.gif') repeat-y top left } .instructions a.video{ } .instructions div{ padding-top:16px; padding-bottom:0; line-height:0 } .products{ position:absolute; top:525px; left:180px; width:438px; height:50px; background:transparent url('../images/range/anti-ageing/5-step/products-stage.png') } .products a.step{ position:absolute; top:0 } .products a.step.pr1{ left:0; width:54px; height:50px; background:transparent url('../images/range/anti-ageing/5-step/product1.png') top center } .products a.step.pr2{ left:95px; width:70px; height:50px; background:transparent url('../images/range/anti-ageing/5-step/product2.png') top center } .products a.step.pr3{ left:190px; width:52px; height:50px; background:transparent url('../images/range/anti-ageing/5-step/product3.png') top center } .products a.step.pr4{ left:284px; width:52px; height:50px; background:transparent url('../images/range/anti-ageing/5-step/product4.png') top center } .products a.step.pr5{ left:378px; width:60px; height:50px; background:transparent url('../images/range/anti-ageing/5-step/product5.png') top center } /* CHI */ .products a.step.pr1cn{ left:0; width:54px; height:50px; background:transparent url('../images/range/anti-ageing/5-step/product1_cn.png') top center } .products a.step.pr2cn{ left:95px; width:70px; height:50px; background:transparent url('../images/range/anti-ageing/5-step/product2_cn.png') top center } .products a.step.pr3cn{ left:190px; width:52px; height:50px; background:transparent url('../images/range/anti-ageing/5-step/product3_cn.png') top center } .products a.step.pr4cn{ left:284px; width:52px; height:50px; background:transparent url('../images/range/anti-ageing/5-step/product4_cn.png') top center } .products a.step.pr5cn{ left:378px; width:60px; height:50px; background:transparent url('../images/range/anti-ageing/5-step/product5_cn.png') top center } .products a.step:hover, .products a.step.this{ background-position: bottom center } .uv-products{ position:absolute; top:525px; left:180px; width:425px; height:55px; background:transparent url('../images/range/whitening/5-step/products-stage.png') } .uv-products a.step{ position:absolute; top:0 } .uv-products a.step.pr1{ left:0; width:56px; height:55px; background:transparent url('../images/range/whitening/5-step/product1.png') top center } .uv-products a.step.pr2{ left:92px; width:55px; height:55px; background:transparent url('../images/range/whitening/5-step/product2.png') top center } .uv-products a.step.pr3{ left:185px; width:55px; height:55px; background:transparent url('../images/range/whitening/5-step/product3.png') top center } .uv-products a.step.pr4{ left:277px; width:65px; height:55px; background:transparent url('../images/range/whitening/5-step/product4.png') top center } .uv-products a.step.pr5{ left:370px; width:55px; height:55px; background:transparent url('../images/range/whitening/5-step/product5.png') top center } /* CHI */ .uv-products a.step.pr1cn{ left:0; width:56px; height:55px; background:transparent url('../images/range/whitening/5-step/product1_cn.png') top center } .uv-products a.step.pr2cn{ left:92px; width:55px; height:55px; background:transparent url('../images/range/whitening/5-step/product2_cn.png') top center } .uv-products a.step.pr3cn{ left:185px; width:55px; height:55px; background:transparent url('../images/range/whitening/5-step/product3_cn.png') top center } .uv-products a.step.pr4cn{ left:277px; width:65px; height:55px; background:transparent url('../images/range/whitening/5-step/product4_cn.png') top center } .uv-products a.step.pr5cn{ left:370px; width:55px; height:55px; background:transparent url('../images/range/whitening/5-step/product5_cn.png') top center } .uv-products a.step:hover, .uv-products a.step.this{ background-position: bottom center } .uv-subs{ position:absolute; top:48px; left:325px; width:235px; height:148px; background:transparent url('../images/range/whitening/5-step/sub-stage.png') } .uv-subs a.sub{ position:absolute; top:0 } .uv-subs a.sub.pr1{ left:0; width:55px; height:148px; background:transparent url('../images/range/whitening/5-step/sub1.png') top center } .uv-subs a.sub.pr2{ left:55px; width:60px; height:148px; background:transparent url('../images/range/whitening/5-step/sub2.png') top center } .uv-subs a.sub.pr3{ left:115px; width:70px; height:148px; background:transparent url('../images/range/whitening/5-step/sub3.png') top center } .uv-subs a.sub.pr4{ left:185px; width:50px; height:148px; background:transparent url('../images/range/whitening/5-step/sub4.png') top center } /* CHI */ .uv-subs a.sub.pr1cn{ left:0; width:56px; height:148px; background:transparent url('../images/range/whitening/5-step/sub1_cn.png') top center } .uv-subs a.sub.pr2cn{ left:55px; width:60px; height:148px; background:transparent url('../images/range/whitening/5-step/sub2_cn.png') top center } .uv-subs a.sub.pr3cn{ left:115px; width:70px; height:148px; background:transparent url('../images/range/whitening/5-step/sub3_cn.png') top center } .uv-subs a.sub.pr4cn{ left:185px; width:50px; height:148px; background:transparent url('../images/range/whitening/5-step/sub4_cn.png') top center } .uv-subs a.sub:hover, .uv-subs a.sub.this{ background-position: bottom center } /* Contact page ############ */ #contact{ margin-top:50px; margin-left:54px } #contact h2{ margin:0; padding:0; padding-bottom:28px; color:#c05a6a; font-family:'Franklin-Gothic', Helvetica; font-size:38px } #contact p{ font-size:13px; line-height:16px } /* FOOTER */ #footer{ position:fixed; bottom:0; width:100%; height:20px; color:#fff; font-size:14px; line-height:20px; text-align:center; z-index:99; background:-webkit-linear-gradient(left, #ef787c, #8e1828); /* For Safari 5.1 to 6.0 */ background:-o-linear-gradient(right, #ef787c, #8e1828); /* For Opera 11.1 to 12.0 */ background:-moz-linear-gradient(right, #ef787c, #8e1828); /* For Firefox 3.6 to 15 */ background:linear-gradient(to right, #ef787c, #8e1828); /* Standard syntax (must be last) */ } .bottom-link, .bottom-link a{ color:#fff; font-size:12px; line-height:20px; text-decoration:none } .bottom-link a:hover{ color:#8D1926 }