/** * Optifresh * */ @font-face { font-family: 'Klavika'; src: url('/Optifresh/Templates/font/klavikawebbasicregular-webfont.eot'); src: url('/Optifresh/Templates/font/klavikawebbasicregular-webfont.eot?#iefix') format('embedded-opentype'), url('/Optifresh/Templates/font/klavikawebbasicregular-webfont.woff') format('woff'), url('/Optifresh/Templates/font/klavikawebbasicregular-webfont.ttf') format('truetype'), url('/Optifresh/Templates/font/klavikawebbasicregular-webfont.svg#klavika_web_basicregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Klavikasub'; src: url('/Optifresh/Templates/font/klavikawebbasicregularsub-webfont.eot'); src: url('/Optifresh/Templates/font/klavikawebbasicregularsub-webfont.eot?#iefix') format('embedded-opentype'), url('/Optifresh/Templates/font/klavikawebbasicregularsub-webfont.woff') format('woff'), url('/Optifresh/Templates/font/klavikawebbasicregularsub-webfont.ttf') format('truetype'), url('/Optifresh/Templates/font/klavikawebbasicregularsub-webfont.svg#klavika_web_basicregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Klavikabold'; src: url('/Optifresh/Templates/font/klavikawebbasicbold-webfont.eot'); src: url('/Optifresh/Templates/font/klavikawebbasicbold-webfont.eot?#iefix') format('embedded-opentype'), url('/Optifresh/Templates/font/klavikawebbasicbold-webfont.woff') format('woff'), url('/Optifresh/Templates/font/klavikawebbasicbold-webfont.ttf') format('truetype'), url('/Optifresh/Templates/font/klavikawebbasicbold-webfont.svg#klavika_web_basicbold') format('svg'); font-weight: normal; font-style: normal; } html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figure, figcaption, hgroup, menu, footer, header, nav, section, summary, time, mark, audio, video { border: 0; margin: 0; list-style: none; padding: 0; } article, aside, canvas, figure, figure img, figcaption, hgroup, footer, header, nav, section, audio, video { display: block; } a img { border: 0; } a, a:visited { color: #1B42A9; font-weight: 400; text-decoration: none; } a:hover { text-decoration: none; } .clear { clear: both; display: block; } /** * Default Layout - 992px - 984px * */ body { background: #153D77 url(../img/bg-body.png) repeat-x; color: #231F20; font-family: Klavika; font-size: 12px; font-weight: normal; margin: 0 !important; } body.page18 { background: #153D77 url(../img/bg-body-prod.png) repeat-x; } .wrapper { margin: 0 auto; position: relative; width: 925px; } body.page18 #main .wrapper { width: 980px; } /** * Header */ header#siteHeader { height: 85px; margin: 30px 0 40px; position: relative; z-index: 30; } header#siteHeader h1#logo { float: left; height: 85px; width: 293px; } header#siteHeader h1#logo a, header#siteHeader h1#logo a:visited { color: #FFF; float: left; font-size: 70px; font-weight: bold; height: 85px; line-height: 75px; position: relative; width: 293px; } header#siteHeader h1#logo a span.reg { font-size: 38px; font-weight: normal; line-height: 38px; position: absolute; right: 0; top: 1px; } header#siteHeader h1#logo a span.tagline { bottom: 0; clear: both; display: block; font-size: 10.7pt; font-weight: normal; line-height: 18px; position: absolute; right: 0; text-transform: uppercase; } #mainNav { float: right; margin: 17px 0 0; } #mainNav ul { background: url(../img/bg-nav.png) no-repeat; height: 47px; width: 609px; } #mainNav ul li { float: left; height: 43px; margin: 2px 0 0; } #mainNav ul li a, #mainNav ul li a:visited { color: #FFF; display: block; float: left; font-family: Arial,sans-serif; font-size: 14px; font-weight: bold; height: 43px; line-height: 43px; text-align: center; text-transform: uppercase; } #mainNav ul li a.nav1, #mainNav ul li a.nav1:visited { width: 163px; margin-left: 2px; } #mainNav ul li a.nav2, #mainNav ul li a.nav2:visited { width: 170px; margin-left: -12px; } #mainNav ul li a.nav3, #mainNav ul li a.nav3:visited { width: 159px; margin-left: -13px; } #mainNav ul li a.nav4, #mainNav ul li a.nav4:visited { width: 150px; margin-left: -12px; } #mainNav ul li a.nav1:hover { background: url(../img/bg-nav-home.png) no-repeat; } #mainNav ul li a.nav2:hover { background: url(../img/bg-nav-about.png) no-repeat; } #mainNav ul li a.nav3:hover { background: url(../img/bg-nav-products.png) no-repeat; } #mainNav ul li a.nav4:hover { background: url(../img/bg-nav-contact.png) no-repeat; } #mainNav ul li.currentLi a.nav1, #mainNav ul li.currentLi a.nav1:visited { background: url(../img/bg-nav-home.png) no-repeat; z-index: 999; } #mainNav ul li.currentLi a.nav2, #mainNav ul li.currentLi a.nav2:visited { background: url(../img/bg-nav-about.png) no-repeat; z-index: 999; } #mainNav ul li.currentLi a.nav3, #mainNav ul li.currentLi a.nav3:visited { background: url(../img/bg-nav-products.png) no-repeat; z-index: 999; } #mainNav ul li.currentLi a.nav4, #mainNav ul li.currentLi a.nav4:visited { background: url(../img/bg-nav-contact.png) no-repeat; z-index: 999; } /** * Content */ #main { height: 443px; } body.page18 #main { height: 686px; } #pageTitle { display: none; } .fade { position: absolute; bottom: 0; display: none; } #main section.video { opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; height: 216px; left: -168px; position: absolute; top: 227px; width: 384px; } body.page18 #main section.video { left: -148px; top: 470px; } #main section.home {} #main section.home .product-intro { background: url(../img/img-home-product.png) no-repeat right center; height: 598px; left: 0; position: absolute; top: -159px; width: 985px; } #main section.home .product-intro h1 { color: #13458A; font-family: Klavikabold; font-size: 98px; font-weight: normal; left: 0; letter-spacing: -4px; position: absolute; top: 167px; } #main section.home .product-intro h1 span { font-size: 66px; font-weight: normal; position: absolute; right: -22px; top: 0; } #main section.home .product-intro img.logoblue { left: 0; position: absolute; top: 175px; } #main section.home .product-intro ul { left: 14px; position: absolute; top: 297px; } #main section.home .product-intro ul li { background: url(../img/img-droplets.png) no-repeat left center; clear: both; color: #1D4589; display: block; float: left; font-size: 52px; letter-spacing: -2px; line-height: 58px; list-style: none; padding: 4px 0 0 45px; } #main section {} #main section h2 { color: #15478B; float: left; font-size: 72px; font-weight: 400; line-height: 64px; margin: 0 30px 0 0; width: 290px; } #main section h2 span { clear: both; display: block; float: left; font: 30px/34px Arial,sans-serif; margin: 25px 0 0; width: 215px; } #main section .left { float: left; margin: 0 30px 0 0; width: 280px; } #main section .left h3 { color: #231F20; font: bold 18px/24px Arial,sans-serif; margin: 0 0 15px; text-transform: uppercase; } #main section .left p { color: #231F20; font: 18px/22px Arial,sans-serif; margin: 0 0 15px; } #main section .left p.blue { clear: both; color: #15478B; display: block; float: left; margin: 28px 0 0; } #main section .right { float: left; width: 280px; } #main section .right h3 { color: #231F20; font: bold 18px/24px Arial,sans-serif; margin: 0 0 15px; text-transform: uppercase; } #main section .right p { color: #231F20; font: 18px/22px Arial,sans-serif; margin: 0 0 15px; } #main section .right p.num { margin: 0 0 7px; } #main section .right p.num span { color: #15478B; font-weight: bold; } #main section .right img.about {} #main section .right img.stratnat {} #main section .prod-left { float: left; margin: 0 30px 0 0; width: 290px; } #main section .prod-left h2 { margin: 0 0 60px; width: auto; } #main section .prod-left h3.btn-red { float: left; } #main section .prod-left h3.btn-red a, #main section .prod-left h3.btn-red a:visited { background: url(../img/btn-red-prod.png) no-repeat; color: #FFF; cursor: pointer; float: left; font-size: 22px; height: 62px; line-height: 62px; text-align: center; width: 268px; } #main section.product-top { margin: 0 auto; width: 925px; } #main section.product-list { float: left; margin: 15px 0 0; position: relative; width: 980px; } #main section.product-list article { float: left; width: 326px; } #main section.product-list article.opti-tears { background: url(../img/img-prod-tears.png) no-repeat; height: 438px; } #main section.product-list article.opti-plus { background: url(../img/img-prod-plus.png) no-repeat; height: 438px; width: 328px; } #main section.product-list article.opti-eyegel { background: url(../img/img-prod-eyegel.png) no-repeat; height: 410px; margin: 28px 0 0; } #main section.product-list article h3 { color: #FFF; font: normal 18px/22px Arial,sans-serif; margin: 0 auto; padding: 200px 0 30px; text-align: center; width: 200px; } #main section.product-list article h3 span { font-weight: bold; text-transform: uppercase; } #main section.product-list article.opti-eyegel h3 { padding: 172px 0 30px; } #main section.product-list article h4 { color: #FFF; font: normal 14px/18px Arial,sans-serif; margin: 0 0 5px 25px; text-transform: uppercase; } #main section.product-list article h4 span { font-weight: bold; } #main section.product-list article ul { margin: 0 0 0 25px; } #main section.product-list article ul li { color: #FFF; font: 14px/18px Arial,sans-serif; list-style: disc outside none; margin: 0 0 5px 13px; padding: 0; } /** * Footer */ footer#siteFooter { /* background: url(../img/footer-background.jpg) no-repeat center center; height: 402px; */ width: 100%; } body.xpage18 footer#siteFooter { height: 159px; } footer#siteFooter ul { float: left; margin: 18px 0 0; } footer#siteFooter ul li {} footer#siteFooter ul li a, footer#siteFooter ul li a:visited { color: #FFF; font: bold 14px/18px Arial,sans-serif; text-transform: uppercase; } footer#siteFooter ul li a:hover { text-decoration: underline; } footer#siteFooter p.copyright { color: #FFF; float: right; font: 14px/24px Arial,sans-serif; height: 24px; margin: 14px 42px 0 0; padding: 1px 85px 0 0; } footer#siteFooter a.petrus, footer#siteFooter a.petrus:visited { height: 24px; position: absolute; top: 14px; width: 109px; right: 0px; } /*************************************************************** * Tablet Layout - 768px - 712px * */ @media only screen and (min-width: 768px) and (max-width: 959px) { body { background: #FFF url(../img/768/bg-body.png) repeat-x; } body.page18 { background: #FFF url(../img/768/bg-body.png) repeat-x; } .wrapper { width: 768px; } body.page18 #main .wrapper { width: 768px; } /*** Header ****/ header#siteHeader { height: 267px; margin: 0; } header#siteHeader h1#logo { float: none; height: 116px; margin: 0 auto 36px; padding: 60px 0 0; width: 448px; } header#siteHeader h1#logo a, header#siteHeader h1#logo a:visited { background: url(../img/768/img-logo-header.png) no-repeat; float: left; height: 116px; text-indent: -9999px; width: 448px; } #mainNav { float: left; margin: 0 0 0 27px; } #mainNav ul { background: url(../img/768/bg-nav.png) no-repeat; height: 55px; width: 711px; } #mainNav ul li { float: left; height: 52px; margin: 2px 0 0; } #mainNav ul li a, #mainNav ul li a:visited { color: #FFF; float: left; font-family: Arial,sans-serif; font-size: 14px; font-weight: bold; height: 52px; line-height: 52px; text-align: center; text-transform: uppercase; } #mainNav ul li a.nav1, #mainNav ul li a.nav1:visited { width: 191px; margin-left: 2px; } #mainNav ul li a.nav2, #mainNav ul li a.nav2:visited { width: 196px; margin-left: -13px; } #mainNav ul li a.nav3, #mainNav ul li a.nav3:visited { width: 186px; margin-left: -14px; } #mainNav ul li a.nav4, #mainNav ul li a.nav4:visited { width: 174px; margin-left: -13px; } #mainNav ul li a.nav1:hover { background: url(../img/768/bg-nav-home.png) no-repeat; } #mainNav ul li a.nav2:hover { background: url(../img/768/bg-nav-about.png) no-repeat; } #mainNav ul li a.nav3:hover { background: url(../img/768/bg-nav-products.png) no-repeat; } #mainNav ul li a.nav4:hover { background: url(../img/768/bg-nav-contact.png) no-repeat; } #mainNav ul li.currentLi a.nav1, #mainNav ul li.currentLi a.nav1:visited { background: url(../img/768/bg-nav-home.png) no-repeat; z-index: 999; } #mainNav ul li.currentLi a.nav2, #mainNav ul li.currentLi a.nav2:visited { background: url(../img/768/bg-nav-about.png) no-repeat; z-index: 999; } #mainNav ul li.currentLi a.nav3, #mainNav ul li.currentLi a.nav3:visited { background: url(../img/768/bg-nav-products.png) no-repeat; z-index: 999; } #mainNav ul li.currentLi a.nav4, #mainNav ul li.currentLi a.nav4:visited { background: url(../img/768/bg-nav-contact.png) no-repeat; z-index: 999; } /*** Content ****/ #main {height: 697px; position: relative;background: url(../img/768/bg_780_970.png) bottom repeat-x; } body.page17 .inLineContentContainer { background: url(../img/768/bg_conten_780.png) bottom left no-repeat;height:697px } body.page18 .inLineContentContainer { background: url(../img/768/bg_conten_780.png) bottom left no-repeat;height:800px } body.page19 .inLineContentContainer { background: url(../img/768/bg_conten_780.png) bottom left no-repeat;height:730px } body.page18 #main { height: 752px;background: url(../img/768/bg_780_970_2.png) bottom repeat-x; } body.page19 #main { height: 710px;background: url(../img/768/bg_780_970_2.png) bottom repeat-x; } #main section.video { display: none; } #main section.home .product-intro { background: url(../img/768/bg-body-home.jpg) no-repeat; height: 1024px; top: -267px; width: 768px;border:solid 0px red !important; } #main section.home .product-intro img.logoblue { display: none; } #main section.home .product-intro ul { top: 871px; } #main section.home .product-intro ul li { clear: none; display: inline; padding: 4px 19px 0 44px; } #main section.home .product-intro ul li:nth-child(1) { background: none; } #main section h2 { clear: both; display: block; margin: 43px 0; text-align: center; width: 768px; } body.page19 #main section h2 { margin: 43px 0 28px; } #main section h2 span { margin: 10px 0 0; width: 768px; } #main section .left { margin: 0 0 0 90px; position: relative;width:35% !important } #main section .left h3 { font-size: 24px; line-height: 30px; margin: 0 0 10px; text-transform: none; } body.page19 #main section .left h3 { color: #231F20; font: bold 18px/24px Arial,sans-serif; margin: 0 0 15px; text-transform: uppercase; } #main section .left p { margin: 0; } body.page19 #main section .left p { margin: 0 0 15px; } #main section .left p.blue { bottom: -70px; left: 327px; position: absolute; width: 280px; } body.page19 #main section .left p.blue { left: 0; } #main section .right { float: right; margin: 0 70px 0 0;width:40% !important } #main section .right img.stratnat { margin: 0; } #main section .prod-left { clear: both; display: block; margin: 0; width: 768px; } #main section .prod-left h2 { margin: 43px 0 16px; width: 768px; } #main section .prod-left h3.btn-red { float: none; left: 50%; margin: 0 0 0 35px; position: absolute; top: 290px; width: 268px; } #main section.product-top { width: 768px; } #main section.product-top .left, #main section.product-top .right { clear: none; display: block; margin: 0; padding: 0 40px; text-align: left; width: 688px; } #main section.product-top .right{padding-right:20px} #main section.product-list { background: url(../img/768/bg-product-box.png) no-repeat; height: 322px; margin: 85px 0 0 8px; width: 752px; } #main section.product-list article.opti-tears { background: none; width: 251px; } #main section.product-list article.opti-plus { background: none; width: 251px; } #main section.product-list article.opti-eyegel { background: none; width: 250px; } #main section.product-list article h3 { font-size: 17px; line-height: 20px; padding: 136px 0 13px; } #main section.product-list article.opti-eyegel h3 { padding: 108px 0 13px; } #main section.product-list article h4 { font-size: 12px; line-height: 16px; margin: 0 0 3px 10px; } #main section.product-list article ul { margin: 0 0 0 15px; } #main section.product-list article ul li { font-size: 11px; line-height: 14px; margin: 0 10px 4px 6px; } /*** Footer ****/ footer#siteFooter { background: #15478B; height: 60px; position: relative; z-index: 2345; } body.xpage18 footer#siteFooter {} footer#siteFooter ul { margin: 18px 0 0 35px; } footer#siteFooter p.copyright { margin: 0; padding: 0; position: absolute; right: 160px; top: 15px; } footer#siteFooter a.petrus, footer#siteFooter a.petrus:visited { right: 35px; } } /*************************************************************** * iPads (landscape) * */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { body.page16 #main .wrapper { width: 1028px; } #main section.video { display: none; } #main section.home .product-intro { background: url(../img/bg-ch-landscape-final.png) no-repeat right center; height: 598px; left: 0; position: absolute; top: -159px; width: 1028px; } #main section.home .product-intro img.logoblue { left: 54px; } #main section.home .product-intro ul { left: 80px; } } /*************************************************************** * Mobile Layout - 320px - 252px * */ @media only screen and (max-width: 767px) { body, body.page18 { background: none; } body.page12, body.page16 { background: #1D4589 url(../img/320/bg-home-back.png) repeat-x; } .wrapper, body.page18 #main .wrapper { width: 320px; } /*** Homepage ****/ body.page12 header#siteHeader, body.page16 header#siteHeader { height: auto; margin: 0; } body.page12 header#siteHeader h1#logo, body.page16 header#siteHeader h1#logo { height: 70px; left: 33px; position: absolute; top: 22px; width: 254px; } body.page12 header#siteHeader h1#logo a, body.page12 header#siteHeader h1#logo a:visited, body.page16 header#siteHeader h1#logo a, body.page16 header#siteHeader h1#logo a:visited { height: 70px; text-indent: -9999px; width: 254px; } body.page12 header#siteHeader #mainNav, body.page16 header#siteHeader #mainNav { left: 0; margin: 0; position: absolute; top: 312px; width: 320px; } body.page12 header#siteHeader #mainNav ul, body.page16 header#siteHeader #mainNav ul { background: none; height: 168px; width: 320px; } body.page12 header#siteHeader #mainNav ul li, body.page16 header#siteHeader #mainNav ul li { height: 56px; margin: 0; width: 320px; border: none; } body.page12 header#siteHeader #mainNav ul li.firstLi, body.page16 header#siteHeader #mainNav ul li.firstLi { display: none; } body.page12 header#siteHeader #mainNav ul li a, body.page12 header#siteHeader #mainNav ul li a:visited, body.page16 header#siteHeader #mainNav ul li a, body.page16 header#siteHeader #mainNav ul li a:visited { background: url(../img/320/bg-nav-home.png) repeat-x; font-size: 16px; font-weight: 700; height: 56px; line-height: 56px; margin: 0; padding: 0; width: 320px; } body.page12 header#siteHeader #mainNav ul li a.nav2:hover, body.page12 header#siteHeader #mainNav ul li a.nav2:active, body.page16 header#siteHeader #mainNav ul li a.nav2:hover, body.page16 header#siteHeader #mainNav ul li a.nav2:active { background: url(../img/320/bg-nav-home-about.png) repeat-x; } body.page12 header#siteHeader #mainNav ul li a.nav3:hover, body.page12 header#siteHeader #mainNav ul li a.nav3:active, body.page16 header#siteHeader #mainNav ul li a.nav3:hover, body.page16 header#siteHeader #mainNav ul li a.nav3:active { background: url(../img/320/bg-nav-home-products.png) repeat-x; } body.page12 header#siteHeader #mainNav ul li a.nav4:hover, body.page12 header#siteHeader #mainNav ul li a.nav4:active, body.page16 header#siteHeader #mainNav ul li a.nav4:hover, body.page16 header#siteHeader #mainNav ul li a.nav4:active { background: url(../img/320/bg-nav-home-contact.png) repeat-x; } /*** Header ****/ header#siteHeader { background: url(../img/320/bg-header.png) repeat-x; height: 170px; left: 0; margin: 0 0 20px; position: relative; top: 0; } header#siteHeader h1#logo { float: none; height: 78px; margin: 0 auto; padding: 12px 0 24px; width: 257px; } header#siteHeader h1#logo a, header#siteHeader h1#logo a:visited { font-size: 59px; height: 78px; letter-spacing: 0.016em; width: 257px; } header#siteHeader h1#logo a span.reg { right: -3px; top: 6px; } header#siteHeader h1#logo a span.tagline { bottom: 0; letter-spacing: -0.06em; } header#siteHeader #mainNav { float: left; margin: 1px 0 0; width: 320px; } header#siteHeader #mainNav ul { background: none; height: 54px; width: 320px; } #siteHeader #mainNav ul li { height: 54px; margin: 0 1px 0 0; border-right: 1px solid #fff; } header#siteHeader #mainNav ul li.lastLi { margin: 0; border:none; } header#siteHeader #mainNav ul li.firstLi { display: none; } header#siteHeader #mainNav ul li a, header#siteHeader #mainNav ul li a:visited { background: url(../img/320/bg-nav-inner.png) repeat-x; font-size: 15px; font-weight: 700; height: 54px; line-height: 54px; margin: 0; width: 106px; } header#siteHeader #mainNav ul li a.nav2, header#siteHeader #mainNav ul li a.nav2:visited, header#siteHeader #mainNav ul li a.nav4, header#siteHeader #mainNav ul li a.nav4:visited { height: 44px; line-height: 17px; margin: 0; padding: 10px 11px 0; width: 83px; } header#siteHeader #mainNav ul li.currentLi a.nav2, header#siteHeader #mainNav ul li.currentLi a.nav2:visited, header#siteHeader #mainNav ul li a.nav2:hover, header#siteHeader #mainNav ul li a.nav2:active { background: url(../img/320/bg-nav-inner-about.png) repeat-x; } header#siteHeader #mainNav ul li.currentLi a.nav3, header#siteHeader #mainNav ul li.currentLi a.nav3:visited, header#siteHeader #mainNav ul li a.nav3:hover, header#siteHeader #mainNav ul li a.nav3:active { background: url(../img/320/bg-nav-inner-products.png) repeat-x; } header#siteHeader #mainNav ul li.currentLi a.nav4, header#siteHeader #mainNav ul li.currentLi a.nav4:visited, header#siteHeader #mainNav ul li a.nav4:hover, header#siteHeader #mainNav ul li a.nav4:active { background: url(../img/320/bg-nav-inner-contact.png) repeat-x; } body.page18 header#siteHeader { margin: 0; } /*** Content ****/ #main { background: #FFF url(../img/320/bg-content-water.png) no-repeat center bottom; height: auto; padding: 0 0 118px; } body.page18 #main { background: #FFF url(../img/320/bg-content-water-product.png) no-repeat center -1px; height: auto; padding: 0; } body.page12 #main, body.page16 #main { background: none; } #main section.video { display: none; } #main section.home .product-intro { background: url(../img/320/bg-home.png) no-repeat; height: 312px; position: relative; top: 0; width: 320px; } #main section.home .product-intro img.logoblue { display: none; } #main section.home .product-intro ul { left: 9px; top: 275px; } #main section.home .product-intro ul li { background: none; clear: none; color: #11407B; display: inline; font-size: 24px; font-weight: 400; letter-spacing: -1px; line-height: 28px; padding: 0 9px; } #main section h2 { float: none; font-size: 43px; line-height: 60px; margin: 0 0 10px; text-align: center; width: auto; } body.page19 #main section h2 { margin: 0 0 22px; } body.page19 #main section h2 span { float: none; font-size: 24px; line-height: 28px; margin: 0; padding: 0 15px; width: 290px; } body.page19 #main section .left h3, body.page19 #main section .right h3 { font-size: 14px; line-height: 17px; margin: 0 0 5px; padding: 0 75px; } #main section .left, #main section .right { float: none; margin: 0; text-align: center; width: auto; } body.page19 #main section .left { margin: 0 0 20px; position: relative; } #main section .left p, #main section .right p { font: 13px/17px Arial,sans-serif; margin: 0 0 10px; padding: 0 30px; } body.page19 #main section .left p, body.page19 #main section .right p { font-size: 14px; line-height: 16px; margin: 0 0 5px; padding: 0 25px; } body.page19 #main section .left p.blue { position: absolute; top: 485px; } #main section .right img.stratnat { margin: 65px 0 15px; } #main section .right img.about { margin: 0 auto; width: 274px; } #main section.product-top { background: none; margin: 0; padding: 20px 0 122px; position: relative; width: 320px; } #main section .prod-left { float: none; margin: 0; position: relative; width: 320px; } #main section .prod-left h2 { margin: 0 0 10px; } #main section .prod-left h3.btn-red { left: 50%; margin: 0 0 0 -117px; position: absolute; top: 335px; width: 234px; } #main section .prod-left h3.btn-red a, #main section .prod-left h3.btn-red a:visited { background: url(../img/320/btn-red-prod.png) no-repeat; clear: both; display: block; float: none; font-size: 20px; height: 54px; line-height: 54px; width: 234px; } #main section.product-top .left h3 { font-size: 22px; line-height: 26px; padding: 0 30px; text-transform: none; } #main section.product-top .left p, #main section.product-top .right p { font-size: 14px; } #main section.product-list { float: none; margin: 0 auto; width: 320px; } #main section.product-list article { float: none; width: 320px; } #main section.product-list article.opti-tears { background: url(../img/320/bg-prod-optitears.jpg) no-repeat; height: 434px; } #main section.product-list article.opti-plus { background: url(../img/320/bg-prod-optiplus.jpg) no-repeat; height: 434px; } #main section.product-list article.opti-eyegel { background: url(../img/320/bg-prod-optieyegel.jpg) no-repeat; height: 358px; margin: 0; } #main section.product-list article.opti-eyegel h3 { padding: 133px 0 23px; } /*** Footer ****/ footer#siteFooter, footer#siteFooter ul { display: none; } footer#siteFooter p.copyright { float: none; margin: 0; padding: 77px 0 0; } footer#siteFooter a.petrus, footer#siteFooter a.petrus:visited { background: url(../img/320/logo-petrus.png) no-repeat; height: 30px; left: 50%; margin: 0 0 0 -70px; top: 31px; width: 139px; } footer#siteFooter a.petrus img { display: none; } body.page19 footer#siteFooter { background: #1D4589; clear: both; display: block; height: 138px; text-align: center; } } /*************************************************************** * Wide Mobile Layout - 480px - 436px * */ @media only screen and (min-width: 480px) and (max-width: 767px) { body, body.page18 { background: none; } body.page12, body.page16 { background: #1D4589 url(../img/480/bg-home-back.png) repeat-x; } .wrapper, body.page18 #main .wrapper { width: 480px; } /*** Header ****/ header#siteHeader, body.page12 header#siteHeader, body.page16 header#siteHeader { background: url(../img/480/bg-header.png) repeat-x; height: 132px; left: 0; margin: 0 0 20px; position: relative; top: 0; } header#siteHeader h1#logo, body.page12 header#siteHeader h1#logo, body.page16 header#siteHeader h1#logo { height: 78px; left: 50%; margin: 0 0 0 -128px; padding: 0; position: absolute; top: 2px; width: 257px; } header#siteHeader h1#logo a, header#siteHeader h1#logo a:visited, body.page12 header#siteHeader h1#logo a, body.page12 header#siteHeader h1#logo a:visited, body.page16 header#siteHeader h1#logo a, body.page16 header#siteHeader h1#logo a:visited { font-size: 59px; height: 78px; letter-spacing: 0.016em; text-indent: 0; width: 257px; } header#siteHeader h1#logo a span.reg { right: -3px; top: 6px; } header#siteHeader h1#logo a span.tagline { bottom: 0; letter-spacing: -0.06em; } header#siteHeader #mainNav, body.page12 header#siteHeader #mainNav, body.page16 header#siteHeader #mainNav { height: 39px; left: 0; margin: 0; position: absolute; top: 93px; width: 480px; } header#siteHeader #mainNav ul, body.page12 header#siteHeader #mainNav ul, body.page16 header#siteHeader #mainNav ul { background: none; height: 39px; width: 480px; } header#siteHeader #mainNav ul li, body.page12 header#siteHeader #mainNav ul li, body.page16 header#siteHeader #mainNav ul li { height: 39px; margin: 0; width: 158px; } header#siteHeader #mainNav ul li.lastLi, body.page12 header#siteHeader #mainNav ul li.lastLi, body.page16 header#siteHeader #mainNav ul li.lastLi { margin: 0; width: 160px; } header#siteHeader #mainNav ul li.firstLi, body.page12 header#siteHeader #mainNav ul li.firstLi, body.page16 header#siteHeader #mainNav ul li.firstLi { display: none; } header#siteHeader #mainNav ul li a, header#siteHeader #mainNav ul li a:visited, body.page12 header#siteHeader #mainNav ul li a, body.page12 header#siteHeader #mainNav ul li a:visited, body.page16 header#siteHeader #mainNav ul li a, body.page16 header#siteHeader #mainNav ul li a:visited, header#siteHeader #mainNav ul li a.nav2, header#siteHeader #mainNav ul li a.nav2:visited, header#siteHeader #mainNav ul li a.nav4, header#siteHeader #mainNav ul li a.nav4:visited { background: url(../img/480/bg-nav-inner.png) repeat-x; font-size: 14px; font-weight: 700; height: 39px; line-height: 39px; margin: 0; padding: 0; width: 158px; } header#siteHeader #mainNav ul li.lastLi a, header#siteHeader #mainNav ul li.lastLi a:visited, body.page12 header#siteHeader #mainNav ul li.lastLi a, body.page12 header#siteHeader #mainNav ul li.lastLi a:visited, body.page16 header#siteHeader #mainNav ul li.lastLi a, body.page16 header#siteHeader #mainNav ul li.lastLi a:visited { width: 160px; } header#siteHeader #mainNav ul li.currentLi a.nav2, header#siteHeader #mainNav ul li.currentLi a.nav2:visited, header#siteHeader #mainNav ul li a.nav2:hover, header#siteHeader #mainNav ul li a.nav2:active, body.page12 header#siteHeader #mainNav ul li.currentLi a.nav2, body.page12 header#siteHeader #mainNav ul li.currentLi a.nav2:visited, body.page12 header#siteHeader #mainNav ul li a.nav2:hover, body.page12 header#siteHeader #mainNav ul li a.nav2:active, body.page16 header#siteHeader #mainNav ul li.currentLi a.nav2, body.page16 header#siteHeader #mainNav ul li.currentLi a.nav2:visited, body.page16 header#siteHeader #mainNav ul li a.nav2:hover, body.page16 header#siteHeader #mainNav ul li a.nav2:active { background: url(../img/480/bg-nav-inner-about.png) repeat-x; height: 39px; line-height: 39px; margin: 0; padding: 0; width: 158px; } header#siteHeader #mainNav ul li.currentLi a.nav3, header#siteHeader #mainNav ul li.currentLi a.nav3:visited, header#siteHeader #mainNav ul li a.nav3:hover, header#siteHeader #mainNav ul li a.nav3:active, body.page12 header#siteHeader #mainNav ul li.currentLi a.nav3, body.page12 header#siteHeader #mainNav ul li.currentLi a.nav3:visited, body.page12 header#siteHeader #mainNav ul li a.nav3:hover, body.page12 header#siteHeader #mainNav ul li a.nav3:active, body.page16 header#siteHeader #mainNav ul li.currentLi a.nav3, body.page16 header#siteHeader #mainNav ul li.currentLi a.nav3:visited, body.page16 header#siteHeader #mainNav ul li a.nav3:hover, body.page16 header#siteHeader #mainNav ul li a.nav3:active { background: url(../img/480/bg-nav-inner-products.png) repeat-x; height: 39px; line-height: 39px; margin: 0; padding: 0; width: 158px; } header#siteHeader #mainNav ul li.currentLi a.nav4, header#siteHeader #mainNav ul li.currentLi a.nav4:visited, header#siteHeader #mainNav ul li a.nav4:hover, header#siteHeader #mainNav ul li a.nav4:active, body.page12 header#siteHeader #mainNav ul li.currentLi a.nav4, body.page12 header#siteHeader #mainNav ul li.currentLi a.nav4:visited, body.page12 header#siteHeader #mainNav ul li a.nav4:hover, body.page12 header#siteHeader #mainNav ul li a.nav4:active, body.page16 header#siteHeader #mainNav ul li.currentLi a.nav4, body.page16 header#siteHeader #mainNav ul li.currentLi a.nav4:visited, body.page16 header#siteHeader #mainNav ul li a.nav4:hover, body.page16 header#siteHeader #mainNav ul li a.nav4:active { background: url(../img/480/bg-nav-inner-contact.png) repeat-x; height: 39px; line-height: 39px; margin: 0; padding: 0; width: 160px; } body.page18 header#siteHeader { margin: 0; } /*** Content ****/ #main { height: auto; padding: 0 0 50px; } body.page12 #main, body.page16 #main { background: none; padding: 0; } body.page18 #main { background: #FFF url(../img/480/bg-content-water-product.png) no-repeat scroll center 0; } #main section.home .product-intro { background: url(../img/480/bg-home.png) no-repeat; height: 189px; position: relative; top: 0; width: 480px; } #main section.home .product-intro ul { left: 40px; top: 18px; } #main section.home .product-intro ul li { clear: both; display: block; font-size: 26px; line-height: 30px; padding: 0 0 2px; } #main section h2 { font-size: 48px; line-height: 70px; margin: 0; padding: 6px 0 0; } body.page19 #main section h2 span { padding: 0 80px; width: 320px; } body.page19 #main section .left h3, body.page19 #main section .right h3 { font-size: 16px; } #main section .right { background: url(../img/480/img-aboutdryeyes.jpg) no-repeat center bottom; padding: 0 0 245px; } body.page19 #main section .right { background: none; padding: 0 0 50px; } #main section .left p, #main section .right p { font-size: 16px; line-height: 20px; } body.page19 #main section .left p, body.page19 #main section .right p { font-size: 16px; line-height: 18px; margin: 15px 0; } body.page19 #main section .left p.blue { padding: 0 60px; top: 620px; } #main section .right img.about { display: none; } #main section.product-top { background: none; padding: 20px 0 98px; width: 480px; } #main section .prod-left { width: 480px; } #main section.product-top .right { background: none; padding: 0; } #main section .prod-left h2 { line-height: 56px; margin: 0; } #main section .prod-left h3.btn-red { height: 62px; margin: 0 0 0 -134px; top: 340px; width: 268px; } #main section .prod-left h3.btn-red a, #main section .prod-left h3.btn-red a:visited { background: url(../img/btn-red-prod.png) no-repeat; font-size: 22px; height: 62px; line-height: 62px; width: 268px; } #main section.product-top .left h3 { font-size: 23px; padding: 0 110px; } #main section.product-top .left p, #main section.product-top .right p { font-size: 18px; padding: 0 40px; } #main section.product-list { width: 480px; } #main section.product-list article { width: 480px; } #main section.product-list article h3 { font-size: 23px; height: 50px; line-height: 50px; padding: 0; width: 480px; } #main section.product-list article h4 { float: right; margin: 14px 0 0; padding: 0 20px; width: 203px; } #main section.product-list article ul { float: right; padding: 5px 20px 0; width: 203px; } #main section.product-list article ul li { line-height: 17px; } #main section.product-list article.opti-tears { background: url(../img/480/bg-prod-optitears.jpg) no-repeat; height: 277px; } #main section.product-list article.opti-plus { background: url(../img/480/bg-prod-optiplus.jpg) no-repeat; height: 289px; width: 480px; } #main section.product-list article.opti-eyegel { background: url(../img/480/bg-prod-optieyegel.jpg) no-repeat; height: 279px; margin: 0; } #main section.product-list article.opti-eyegel h3 { padding: 0; } /*** Footer ****/ footer#siteFooter { display: none; } body.page19 footer#siteFooter { display: block; } } /* TGA Statement */ .tga-statement{ text-align: center; font-size: 16px; }