@charset "utf-8"; /* --------------------------------------------------- Note: Have consolidated desktop and phone styles up to top nav. july 31 2015 -------------------------------- */ * { margin: 0; padding: 0; } html { min-height: 100%; margin: 0 0 .1em; } body { background: url('../i/layout/sprite-vertical.png') repeat-x 0 0 #0077DC; font: 14px/22px Georgia, "Times New Roman", Times, serif; color: #303030; text-align: center; } body#video { background-color: #FFF; background-image: none; } .normal_font { font-size: 14px; line-height: 22px; } .large_font { font-size: 16px; line-height: 24px; } body * { position: relative; } /* links */ a:link, a:visited { color: #266FB4; text-decoration: none; font-weight: bold; } a:hover { text-decoration: underline; } /* site-wide classes */ .clear { clear: both; } .clearL { clear: left; } .clearR { clear: right; line-height: 0; } .floatR { float: right; } .floatL { float: left; } .alignC { text-align: center; } .alignL { text-align: left; } .alignR { text-align: right; } .hd { position: absolute; z-index: -100; visibility: hidden; } hr { color: #d4d3d3; background: #d4d3d3; height: 1px; border: 0; margin: 0 0 20px 0; display: block; } #wrapper { width: 99.999%; min-width: 1000px; margin: 0 auto; background: url('../i/layout/backgrounds-jpeg.jpg') no-repeat center top; z-index: 0; } #container { width: 910px; height: auto; margin: 0 auto; text-align: left; z-index: 3; } #subpage #container .top { position: absolute; left: 0; top: 0; width: 910px; height: 135px; background: url('../i/layout/backgrounds2.png') no-repeat -50px -113px; } #container .bottom { position: absolute; left: 0; bottom: -25px; z-index: 1; width: 910px; height: 25px; background: url('../i/layout/backgrounds2.png') no-repeat -50px -275px; } /* header */ #header { float: left; width: 100%; height: 113px; z-index: 2; } #header #logo { position: absolute; overflow: hidden; float: left; left: 0; top: 0; width: 450px; height: 100px; } @media all and (min-width:0px) {head~body #header #logo { top: 15px; }} #topSearch { position: absolute; right: 0; float: right; height: 20px; top: 10px; margin: 0; width: 347px; _width: 348px; } #topSearch input.txtField { float: left; width: 150px; w\idth: 150px; height: 18px; he\ight: 16px; border: 1px solid #d4d3d3; font-size: 14px; font-weight: bold; } #topSearch input.submit { float: right; width: 20px; height: 18px; } #topSearch #search { float: left; } /* top navigation */ .topnavsee, .topnavhide, .topsearchsee, .topsearchhide, .topbacktosite { display: none; } /* buttons are only for phone version */ #topNav { position: absolute; right: 0; top: 82px; background:url("../i/layout/buttons2.png") no-repeat 0 0; width: 721px; height: 31px; z-index: 10; _margin-bottom: -1px; font-family: Arial, Helvetica, sans-serif; } #topNav span { display: none; } #topNav li { float: left; list-style: none; _display: inline; position: relative; height: 31px; } #topNav li a:link, #topNav li a:visited, #topNav li a:hover { width: auto; height: 31px; display: block; background-image: url("../i/layout/buttons2.png"); background-repeat: no-repeat; } #topNav #home { width: 76px; } #topNav #home a { width: auto; background-position: 0 0; } #topNav #home a:hover, #homepage #topNav #home a { background-position: 0px -31px; } #topNav #agl { width: 147px; } #topNav #agl a { width: auto;background-position: -76px 0; } #topNav #agl a:hover, #wrapper.agl #topNav #agl a { background-position: -76px -31px; } #topNav #yvn { width: 155px; } #topNav #yvn a { width: auto; background-position: -223px 0; } #topNav #yvn a:hover, #wrapper.yvn #topNav #yvn a { background-position: -223px -31px; } #topNav #gpb { width: 115px; } #topNav #gpb a { width: auto; background-position: -378px 0; } #topNav #gpb a:hover, #wrapper.gpb #topNav #gpb a { background-position: -378px -31px; } #topNav #test { width: 122px; } #topNav #test a { width: auto; background-position: -493px 0; } #topNav #test a:hover, #wrapper.test #topNav #test a { background-position: -493px -31px; } #topNav #mi { width: 106px; } #topNav #mi a { width: auto; background-position: -615px 0; } #topNav #mi a:hover, #wrapper.mi #topNav #mi a { background-position: -615px -31px; } /* popup hover menus - level 1 */ #topNav ul.popup { display: none; position: absolute; z-index: 1000; width: 207px; height: auto; } #topNav ul.popup li { left: 0; height: 32px; margin: 0; width: 207px; } #topNav li>ul.popup { left: 0; top: 31px; } #topNav li:hover ul.popup, #topNav li.sfhover ul.popup { left: 0; top: 31px; display: block; } #topNav li#mi>ul.popup { left: -101px; } #topNav li#mi:hover ul.popup, #topNav li#mi.sfhover ul.popup { left: -101px; } #topNav li li a:link, #topNav li li a:visited, #topNav li li a, #topNav li#home li a, #topNav li#agl li a, #wrapper.agl #topNav #agl li a, #topNav li#yvn li a, #wrapper.yvn #topNav #yvn li a, #topNav li#gpb li a, #wrapper.gpb #topNav #gpb li a, #topNav li#test li a, #wrapper.test #topNav #test li a, #topNav li#mi li a, #wrapper.mi #topNav #mi li a { padding: 0 10px; width: 207px; w\idth: 187px; height: 32px; he\ight: 31px; background: url("../i/layout/drop-bg.png") no-repeat 0 -20px #e9e9e9; border-bottom: 1px solid #f4f4f4; cursor: pointer; display: block; text-decoration: none; color: #000; font-weight: normal; font-size: 11px; line-height: 32px; font-weight: bold; } #topNav li#home li a:hover, #topNav li#agl li a:hover, #wrapper.agl #topNav #agl li a:hover, #topNav li#yvn li a:hover, #wrapper.yvn #topNav #yvn li a:hover, #topNav li#gpb li a:hover, #wrapper.gpb #topNav #gpb li a:hover, #topNav li#test li a:hover, #wrapper.test #topNav #test li a:hover, #topNav li#mi li a:hover, #wrapper.mi #topNav #mi li a:hover { background: url("../i/layout/drop-bg.png") no-repeat -207px -20px; } #topNav li li a.top:link, #topNav li li a.top:visited, #topNav li#home li a.top, #topNav li#agl li a.top, #wrapper.agl #topNav #agl li a.top, #topNav li#yvn li a.top, #wrapper.yvn #topNav #yvn li a.top, #topNav li#gpb li a.top, #wrapper.gpb #topNav #yvn li a.top, #topNav li#test li a.top, #wrapper.test #topNav #test li a.top, #topNav li#mi li a.top, #wrapper.mi #topNav #mi li a.top { position: relative; bottom: 0; width: 207px; w\idth: 187px; height: 32px; he\ight: 31px; z-index: auto; background: url("../i/layout/drop-bg.png") no-repeat left top; } #topNav li#home li a.top:hover, #topNav li#agl li a.top:hover, #wrapper.agl #topNav #agl li a.top:hover, #topNav li#yvn li a.top:hover, #wrapper.yvn #topNav #yvn li a.top:hover, #topNav li#gpb li a.top:hover, #wrapper.gpb #topNav #gpb li a.top:hover, #topNav li#test li a.top:hover, #wrapper.test #topNav #test li a.top:hover, #topNav li#mi li a.top:hover, #wrapper.mi #topNav #mi li a.top:hover { background-position: right top; } #topNav li li a.bottom:link, #topNav li li a.bottom:visited, #topNav li#home li a.bottom, #topNav li#agl li a.bottom, #wrapper.agl #topNav #agl li a.bottom, #topNav li#yvn li a.bottom, #wrapper.yvn #topNav #yvn li a.bottom, #topNav li#gpb li a.bottom, #wrapper.gpb #topNav #gpb li a.bottom, #topNav li#test li a.bottom, #wrapper.test #topNav #test li a.bottom, #topNav li#mi li a.bottom, #wrapper.mi #topNav #mi li a.bottom { position: relative; bottom: 0; width: 207px; w\idth: 187px; height: 32px; z-index: auto; background: url("../i/layout/drop-bg.png") no-repeat left bottom; border-bottom: none; } #topNav li#home li a.bottom:hover, #topNav li#agl li a.bottom:hover, #wrapper.agl #topNav #agl li a.bottom:hover, #topNav li#yvn li a.bottom:hover, #wrapper.yvn #topNav #yvn li a.bottom:hover, #topNav li#gpb li a.bottom:hover, #wrapper.gpb #topNav #gpb li a.bottom:hover, #topNav li#test li a.bottom:hover, #wrapper.test #topNav #test li a.bottom:hover, #topNav li#mi li a.bottom:hover, #wrapper.mi #topNav #mi li a.bottom:hover { background-position: right bottom; } /* home page */ #homepage #main { background: url('../i/main-1140x264.jpg') no-repeat ; width: 910px; height: 264px; margin: 0; padding: 0; font-size: 0; } #homepage #main h1 { display: none; } #homepage #articles { width: 910px; background-color: #FFFFFF; margin: 0; } #articles #major { float: left; width: 308px; height: 286px; margin: 20px 20px 20px 0; padding-left: 20px; clear: left; } #articles #minor { float: right; width: 562px; height: 276px; clear: right; } #articles #minor #TopLeft { float: left; margin: 20px 11px 11px 0; } #articles #minor #TopRight { float: right; margin: 20px 0 11px 0; padding-right: 20px; } #articles #minor #BottomLeft { float: left; margin: 0 11px 20px 0; } #articles #minor #BottomRight { float: right; margin: 0 0 20px 0; padding-right: 20px; } #homepage #content { background: url('../i/layout/content-bg-hp.png') repeat-x bottom; margin: auto; width: 910px; } #homepage #content p { margin: 0 20px 20px 18px; font-size:14px; line-height:16px; } #homepage #content #contentLeft { float: left; left: 20px; top: 14px; width: 423px; margin: 0 20px 16px 0; font-size:14px; line-height:16px; } #homepage #content #contentRight { float: right; right: 20px; top: 14px; width: 423px; margin: 0 0 12px 20px; } #homepage #content #contentRight p, #homepage #content #contentLeft p { margin: 0 0 18px 0; } #homepage #content h3 { font-size:16px; line-height:20px; } #homepage #footer #hon { float: left; width: 200px; margin-right: -10px; margin-bottom: 5px; z-index: 5; } #homepage #footer #hon img { width: 43px; height: 60px; float: left; margin-right: 5px; } #homepage #footer p { font: 10px/11px Arial, Helvetica, sans-serif; margin: 0px 20px 0px 20px; padding-bottom: 10px; } #homepage #footer a:link, #homepage #footer a:visited { color: #303030; text-decoration: none; font-weight: normal; } #homepage #footer a:hover { text-decoration: underline; } /* main feature */ #feature li span { display: none; } #feature li { float: left; list-style: none; } #feature #article li, #feature #article a { width: 680px; height: 264px; display: block; } #feature #ask li, #feature #go li, #feature #ask a, #feature #go a { height: 40px; display: block; } #feature #go { margin-top: 175px; } #feature #go, #feature #ask { width: 230px; } #feature #go a:hover { background: url('../i/main-1140x264.jpg') -910px -175px no-repeat; } #feature #ask a:hover { background: url('../i/main-1140x264.jpg') -910px -215px no-repeat; } /* sub page */ #subpage #rule { float: left; width: 910px; height: auto; margin: 0 auto; background: url('../i/layout/sprite-horizontal.png') repeat-y 0 0; } #subpage #content { float: left; background: url('../i/layout/content-bg-sp.png') no-repeat bottom; margin: auto; width: 910px; } #subpage #content #left { position: relative; float: left; width: 245px; top: 20px; z-index: 5; } #subpage #content #left #promo img { margin: 0 20px 20px 20px; } #subpage #content #right { position: relative; float: right; width: 580px; margin: 28px 0 0 42px; padding-right: 42px; } #subpage #content h1 { font-size: 30px; line-height: 32px; margin-bottom: 32px; margin-top: 32px; font-weight: normal; } #subpage #content h2 { font-size: 18px; line-height: 24px; margin-bottom: 18px; } #subpage #content h2.subtle { font-size: 14px; line-height: 22px; margin-bottom: 0; } #subpage #content p { margin: 0 0 20px 0; } #subpage #content #right ul { margin: 0 0 18px 10px; } #subpage #content ol { margin: 0 0 18px 18px; } #subpage #content #right ul li { padding: 0 0 0 10px; margin: 0 0 10px 8px; } #subpage #content #right ul.tight li { padding: 0 0 0 10px; margin: 0 0 0 8px; } #subpage #content #right .related li { padding: 0 0 0 10px; margin: 0 0 5px 15px; } #subpage #content .imgR { font-size: .8em; line-height: 1.4em; font-weight: bold; color: #303030; z-index: 1; float: right; margin: 0 0 10px 15px; } #subpage #content .imgL { font-size: .8em; line-height: 1.4em; font-weight: bold; color: #303030; z-index: 1; float: left; margin: 0 15px 10px; } .imgR.px149 { width: 149px; } .imgR.px171 { width: 171px; } .imgR.px183 { width: 183px; } .imgR.px274 { width: 274px; } .imgR.px275 { width: 275px; } .imgR.px293sidebar { width: 293px; } .imgR img, .imgL img { margin: 0 0 10px 0; } #subpage #content .imgR a:link, #subpage #content .imgR a:visited { font-weight: bold; text-decoration: underline; } #subpage #content .imgR a:hover { text-decoration: none; } #subpage #content .quoteR { float: right; margin: 0 0 15px 15px; width: 235px; } #content .update { font-size:11px; line-height:14px; } #subpage #footer #hon { float: left; width: 200px; margin-top: -15px; margin-right: -10px; margin-bottom: 5px; z-index: 5; } #subpage #footer #hon img { width: 43px; height: 60px; float: left; margin-right: 5px; } #subpage #footer p { font: 10px/11px Arial, Helvetica, sans-serif; margin: 15px 20px 10px 20px; } #subpage #pageControls { right: 20px; top: 16px; margin: 0; float: right; clear: right; width: 219px; height: 12px; font-size: 10px; line-height: 10px; background: url('../i/layout/buttons2.png') no-repeat -9px -75px; } #subpage #pageControls ul { left: 0; top: 0; float: left; width: 219px; margin: 0; } #subpage #pageControls li { float: left; width: auto; height: 16px; margin: 0; padding: 0; line-height: 10px; list-style: none; background: none; } #subpage #pageControls li span { position: absolute; left: 0; top: 0; background: url('../i/layout/buttons2.png') no-repeat 0 0; } #subpage #pageControls li#type { width: 84px; height: 12px; } #subpage #pageControls li#type a { float: left; width: 12px; height: 12px; margin: 0 3px 0 0; overflow: hidden; cursor: pointer; } #subpage #pageControls li#type a#med span { width: 12px; height: 12px; background-position: -9px -75px; } #subpage #pageControls li#type a#lg span { width: 72px; height: 12px; background-position: -24px -75px; } #subpage #pageControls li#type a#med:hover span, #subpage #pageControls li#type a#med.on span { background-position: -9px -92px; } #subpage #pageControls li#type a#lg:hover span, #subpage #pageControls li#type a#lg.on span { background-position: -24px -92px; } #subpage #pageControls li#email { left: 20px; margin: 0; width: 47px; } #subpage #pageControls li#email a { width: 47px; height: 12px; display: block; cursor: pointer; background: url('../i/layout/buttons2.png') no-repeat -113px -75px; } #subpage #pageControls li#email a span { display: none; } #subpage #pageControls li#email a:hover, #subpage #pageControls li#email.on { background-position: -113px -92px; } #subpage #pageControls li#print { left: 20px; margin-left: 20px; width: 48px; } #subpage #pageControls li#print a { width: 48px; height: 12px; display: block; cursor: pointer; background: url('../i/layout/buttons2.png') no-repeat -180px -75px; } #subpage #pageControls li#print a span { display: none; } #subpage #pageControls li#print a:hover, #subpage #pageControls li#print.on { background-position: -180px -92px; } #subpage #content.printRebate { margin: 30px; font-size: 13px; line-height: 20px; background-image: none; } .legal { font-size: 0.7em; line-height: 1.2em; } #rebateform { width: 580px; padding: 0; margin: 0; border: 0; border-collapse:collapse; } #rebateform td.q { width: 190px; padding: 5px 5px 0 0; vertical-align: top; text-align:right; float:left; } #rebateform td.a { width: 210px; padding: 5px 0 0 0; vertical-align: top; float: left; } .rebateinput { font-family: Georgia, Helvetica, Times, serif; } ol.rebate { font-weight: bold; margin: 0; padding: 0 0 0 1.5em; } ol span { font-weight: normal; } /* video */ #video .imgL { font-size: .8em; line-height: 1.4em; font-weight: bold; color: #303030; text-align: left; z-index: 1; float: left; margin: 0 0 10px 0; } .imgL img { margin: 0 0 10px 0; } #video .imgL a:link, #subpage #content .imgL a:visited { font-weight: bold; text-decoration: underline; } #video .imgL a:hover { text-decoration: none; } /* left navigation */ #leftNavAgpl { position: relative; float: left; left: 20px; width: 225px; height: 223px; list-style: none; background: url('../i/layout/left-nav.png') no-repeat 0 -3px; margin-bottom:20px; } #leftNavAgpl li { float: left; width: 225px; height: 32px; list-style: none; background: url('../i/layout/left-nav.png') no-repeat 0 -3px; } #leftNavAgpl li a { display: block; overflow: hidden; height: 32px; background: url('../i/layout/left-nav.png') no-repeat 0 -3px; } #leftNavAgpl li span { position: absolute; left: 0; top: 0; height: 32px; display: block; background: url('../i/layout/left-nav.png') no-repeat 0 0; } #leftNavAgpl li#what a, #leftNavAgpl li#what span { width: 225px; background-position: 0 -3px; } #leftNavAgpl li#what a:hover span, #wrapper.what #leftNavAgpl li#what span { background-position: -225px -3px; } #leftNavAgpl li#clvg a, #leftNavAgpl li#clvg span { width: 225px; background-position: 0 -35px; } #leftNavAgpl li#clvg a:hover span, #wrapper.clvg #leftNavAgpl li#clvg span { background-position: -225px -35px; } #leftNavAgpl li#gpvsl a, #leftNavAgpl li#gpvsl span { width: 225px; background-position: 0 -67px; } #leftNavAgpl li#gpvsl a:hover span, #wrapper.gpvsl #leftNavAgpl li#gpvsl span { background-position: -225px -67px; } #leftNavAgpl li#gpvls a, #leftNavAgpl li#gpvls span { width: 225px; background-position: 0 -99px; } #leftNavAgpl li#gpvls a:hover span, #wrapper.gpvls #leftNavAgpl li#gpvls span { background-position: -225px -99px; } #leftNavAgpl li#orthok a, #leftNavAgpl li#orthok span { width: 225px; background-position: 0 -131px; } #leftNavAgpl li#orthok a:hover span, #wrapper.orthok #leftNavAgpl li#orthok span { background-position: -225px -131px; } #leftNavAgpl li#scleral a, #leftNavAgpl li#scleral span { width: 225px; background-position: 0 -163px; } #leftNavAgpl li#scleral a:hover span, #wrapper.scleral #leftNavAgpl li#scleral span { background-position: -225px -163px; } #leftNavAgpl li#care a, #leftNavAgpl li#care span { width: 225px; background-position: 0 -195px; } #leftNavAgpl li#care a:hover span, #wrapper.care #leftNavAgpl li#care span { background-position: -225px -195px; } #leftNavYvn { position: relative; float: left; left: 20px; width: 225px; height: 287px; list-style: none; background: url('../i/layout/left-nav.png') no-repeat -450px -3px; margin-bottom:20px; } #leftNavYvn li { float: left; width: 225px; height: 32px; list-style: none; background: url('../i/layout/left-nav.png') no-repeat -450px -3px; } #leftNavYvn li a { display: block; overflow: hidden; height: 32px; background: url('../i/layout/left-nav.png') no-repeat -450px -3px; } #leftNavYvn li span { position: absolute; left: 0; top: 0; height: 32px; display: block; background: url('../i/layout/left-nav.png') no-repeat -450px -3px; } #leftNavYvn li#myopia a, #leftNavYvn li#myopia span { width: 225px; background-position: -450px -3px; } #leftNavYvn li#myopia a:hover span, #wrapper.myopia #leftNavYvn li#myopia span { background-position: -675px -3px; } #leftNavYvn li#teens a, #leftNavYvn li#teens span { width: 225px; background-position: -450px -35px; } #leftNavYvn li#teens a:hover span, #wrapper.teens #leftNavYvn li#teens span { background-position: -675px -35px; } #leftNavYvn li#parents a, #leftNavYvn li#parents span { width: 225px; background-position: -450px -67px; } #leftNavYvn li#parents a:hover span, #wrapper.parents #leftNavYvn li#parents span { background-position: -675px -67px; } #leftNavYvn li#sports a, #leftNavYvn li#sports span { width: 225px; background-position: -450px -99px; } #leftNavYvn li#sports a:hover span, #wrapper.sports #leftNavYvn li#sports span { background-position: -675px -99px; } #leftNavYvn li#lasik a, #leftNavYvn li#lasik span { width: 225px; background-position: -450px -131px; } #leftNavYvn li#lasik a:hover span, #wrapper.lasik #leftNavYvn li#lasik span { background-position: -675px -131px; } #leftNavYvn li#astigmatism a, #leftNavYvn li#astigmatism span { width: 225px; background-position: -450px -163px; } #leftNavYvn li#astigmatism a:hover span, #wrapper.astigmatism #leftNavYvn li#astigmatism span { background-position: -675px -163px; } #leftNavYvn li#keratoconus a, #leftNavYvn li#keratoconus span { width: 225px; background-position: -450px -195px; } #leftNavYvn li#keratoconus a:hover span, #wrapper.keratoconus #leftNavYvn li#keratoconus span { background-position: -675px -195px; } #leftNavYvn li#problems a, #leftNavYvn li#problems span { width: 225px; background-position: -450px -227px; } #leftNavYvn li#problems a:hover span, #wrapper.problems #leftNavYvn li#problems span { background-position: -675px -227px; } #leftNavYvn li#presbyopia a, #leftNavYvn li#presbyopia span { width: 225px; background-position: -450px -259px; } #leftNavYvn li#presbyopia a:hover span, #wrapper.presbyopia #leftNavYvn li#presbyopia span { background-position: -675px -259px; } #leftNavMi { position: relative; float: left; left: 20px; width: 225px; height: 287px; list-style: none; background: url('../i/layout/left-nav.png') no-repeat -450px -300px; margin-bottom:20px; } #leftNavMi li { float: left; width: 225px; height: 32px; list-style: none; background: url('../i/layout/left-nav.png') no-repeat -450px -300px; } #leftNavMi li a { display: block; overflow: hidden; height: 32px; background: url('../i/layout/left-nav.png') no-repeat -450px -300px; } #leftNavMi li span { position: absolute; left: 0; top: 0; height: 32px; display: block; background: url('../i/layout/left-nav.png') no-repeat -450px -300px; } #leftNavMi li#clqa a, #leftNavMi li#clqa span { width: 225px; background-position: -450px -300px; } #leftNavMi li#clqa a:hover span, #wrapper.clqa #leftNavMi li#clqa span { background-position: -675px -300px; } #leftNavMi li#clrx a, #leftNavMi li#clrx span { width: 225px; background-position: -450px -332px; } #leftNavMi li#clrx a:hover span, #wrapper.clrx #leftNavMi li#clrx span { background-position: -675px -332px; } #leftNavMi li#cost a, #leftNavMi li#cost span { width: 225px; background-position: -450px -364px; } #leftNavMi li#cost a:hover span, #wrapper.cost #leftNavMi li#cost span { background-position: -675px -364px; } #leftNavMi li#history a, #leftNavMi li#history span { width: 225px; background-position: -450px -396px; } #leftNavMi li#history a:hover span, #wrapper.history #leftNavMi li#history span { background-position: -675px -396px; } #leftNavMi li#glossary a, #leftNavMi li#glossary span { width: 225px; background-position: -450px -428px; } #leftNavMi li#glossary a:hover span, #wrapper.glossary #leftNavMi li#glossary span { background-position: -675px -428px; } #leftNavMi li#brochure a, #leftNavMi li#brochure span { width: 225px; background-position: -450px -460px; } #leftNavMi li#brochure a:hover span, #wrapper.brochure #leftNavMi li#brochure span { background-position: -675px -460px; } #leftNavMi li#practition a, #leftNavMi li#practition span { width: 225px; background-position: -450px -492px; } #leftNavMi li#practition a:hover span, #wrapper.practition #leftNavMi li#practition span { background-position: -675px -492px; } #leftNavMi li#question a, #leftNavMi li#question span { width: 225px; background-position: -450px -524px; } #leftNavMi li#question a:hover span, #wrapper.question #leftNavMi li#question span { background-position: -675px -524px; } #leftNavMi li#links a, #leftNavMi li#links span { width: 225px; background-position: -450px -556px; } #leftNavMi li#links a:hover span, #wrapper.links #leftNavMi li#links span { background-position: -675px -556px; } #leftNavGpb { position: relative; float: left; left: 20px; width: 225px; height: 158px; list-style: none; background: url('../i/layout/left-nav.png') no-repeat 0 -300px; margin-bottom:20px; } #leftNavGpb li { float: left; width: 225px; height: 32px; list-style: none; background: url('../i/layout/left-nav.png') no-repeat 0 -300px; } #leftNavGpb li a { display: block; overflow: hidden; height: 32px; background: url('../i/layout/left-nav.png') no-repeat 0 -300px; } #leftNavGpb li span { position: absolute; left: 0; top: 0; height: 32px; display: block; background: url('../i/layout/left-nav.png') no-repeat 0 -300px; } #leftNavGpb li#gpbvbe a, #leftNavGpb li#gpbvbe span { width: 225px; background-position: 0 -300px; } #leftNavGpb li#gpbvbe a:hover span, #wrapper.gpbvbe #leftNavGpb li#gpbvbe span { background-position: -225px -300px; } #leftNavGpb li#gpbvm a, #leftNavGpb li#gpbvm span { width: 225px; background-position: 0 -332px; } #leftNavGpb li#gpbvm a:hover span, #wrapper.gpbvm #leftNavGpb li#gpbvm span { background-position: -225px -332px; } #leftNavGpb li#design a, #leftNavGpb li#design span { width: 225px; background-position: 0 -364px; } #leftNavGpb li#design a:hover span, #wrapper.design #leftNavGpb li#design span { background-position: -225px -364px; } #leftNavGpb li#faq a, #leftNavGpb li#faq span { width: 225px; background-position: 0 -396px; } #leftNavGpb li#faq a:hover span, #wrapper.faq #leftNavGpb li#faq span { background-position: -225px -396px; } #leftNavGpb li#wearers a, #leftNavGpb li#wearers span { width: 225px; background-position: 0 -428px; } #leftNavGpb li#wearers a:hover span, #wrapper.wearers #leftNavGpb li#wearers span { background-position: -225px -428px; } #leftNavTest { position: relative; float: left; left: 20px; width: 225px; height: 63px; list-style: none; background: url('../i/layout/left-nav.png') no-repeat 0 -493px; margin-bottom:20px; } #leftNavTest li { float: left; width: 225px; height: 32px; list-style: none; background: url('../i/layout/left-nav.png') no-repeat 0 -493px; } #leftNavTest li a { display: block; overflow: hidden; height: 32px; background: url('../i/layout/left-nav.png') no-repeat 0 -493px; } #leftNavTest li span { position: absolute; left: 0; top: 0; height: 32px; display: block; background: url('../i/layout/left-nav.png') no-repeat 0 -493px; } #leftNavTest li#doctors a, #leftNavTest li#doctors span { width: 225px; background-position: 0 -492px; } #leftNavTest li#doctors a:hover span, #wrapper.doctors #leftNavTest li#doctors span { background-position: -225px -492px; } #leftNavTest li#consumers a, #leftNavTest li#consumers span { width: 225px; background-position: 0 -524px; } #leftNavTest li#consumers a:hover span, #wrapper.consumers #leftNavTest li#consumers span { background-position: -225px -524px; } /* FAQ */ #qanda { } #qanda .start { margin-bottom: 20px; } #qanda .answersee, #qanda .answerhide { width: 580px; text-align: right; } #qanda .answersee span, #qanda .answerhide span { color: #000; margin: 0; padding: 0; cursor: pointer; font-weight: bold; } #qanda .answersee img, #qanda .answerhide img { width: 104px; height: 26px; display: inline; vertical-align: middle; margin-left: 5px; cursor: pointer; } #qanda .answerhide { display: none; } #qanda .qa { width: 580px; padding-top: 5px; padding-bottom: 5px; margin-bottom: 5px; } #qanda .qa .bar { width: 580px; height: 14px; } #qanda .qa .question { display: block; float: left; width: 500px; cursor: pointer; font-weight: bold; margin-top: 10px; margin-bottom: 10px; } #qanda .qa .question:hover { display: block; float: left; width: 500px; cursor: pointer; font-weight: bold; } #qanda .qa .clear { clear: both; } #qanda .qa .answer { width: 475px; margin-left: 25px; margin-top: 8px; display: none; } #qanda .qa .answer img { margin: 5px 0 10px 15px; float: right; } /* charts and tables */ .chartContainer { width: 585px; w\idth: 583px; margin-left: -3px; padding: 3px 0 3px 3px; background: url('../i/layout/chart-bg2.gif') repeat-y 0 0; border: none; margin-bottom: 20px; } .chartContainer .chartTop { position: absolute; left: 0; top: 0; width: 585px; height: 10px; background: url('../i/layout/chart-top2.gif') no-repeat 0 0; } .chartContainer .chartBottom { position: absolute; left: 0; bottom: 0; z-index: 1; width: 585px; height: 10px; background: url('../i/layout/chart-bottom2.gif') no-repeat 0 0; } .chart { width: 580px; w\idth: 578px; font-size: .9em; line-height: 1.4em; z-index: 2; } .chart tr.row1 { background: #ededed; } .chart tr.row2 { background: #fff2db; } .chart th { color: #fff; font-weight: bold; text-align: left; vertical-align: bottom; background-color: #e99403; } .chart th, .chart td { padding: 10px 15px 10px 15px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; vertical-align: top; } .chart th { vertical-align: bottom; } .chart th.headL { background: url('../i/layout/chart-th-left.gif') no-repeat 0 0; background-color: #e99403; } .chart th.headR { background: url('../i/layout/chart-th-right.gif') no-repeat top right; background-color: #e99403; } .chart td.oL { background: url('../i/layout/chart-td-lo.gif') no-repeat bottom left; background-color: #fff2db; } .chart td.oR { background: url('../i/layout/chart-td-ro.gif') no-repeat bottom right; background-color: #fff2db; } .chart td.lgL { background: url('../i/layout/chart-td-llg.gif') no-repeat bottom left; background-color: #ededed; } .chart td.lgR { background: url('../i/layout/chart-td-rlg.gif') no-repeat bottom right; background-color: #ededed; } .chart th.right, .chart td.right { border-right: none; } .chart td.noteA, .chart td.noteB { font-size: .8em; line-height: 1.5em; border-right: none; border-bottom: none; } .chart .rating { margin-bottom: 5px; text-align: center; } /* definitions */ a.def:link, a.def:visited, .glossary { color: #000; border-bottom: 1px dashed #000; } a.def:hover { text-decoration: none; border-bottom: 1px dashed #000; } div#tipDiv { width: 258px; padding: 0 0 25px; } div#tipDiv .callout { position: absolute; left: 100px; bottom: -26px; width: 43px; height: 27px; } div#tipDiv { width: 258px; w\idth: 234px; padding: 12px; background: #f2f9ff; border: 1px solid #216eb4; color: #216eb4; text-align: left; font-size: .8em; line-height: 1.4em; } /* contact-us form */ #contactUs, #contactUs table { width: 100%; } #contactUs table td { padding: 5px; } /* email form */ body#clorg { background: url("../i/layout/email-bg.gif") no-repeat 0 0; background-position: 2px 0; text-align: left; } body#clorg #menu { display: none; } #clorg #container { left: 0; width: 242px; margin: 0; background: none; font-size: 1.1em; line-height: 1.4em; float: left; } #clorg #container #close { position: absolute; top: 10px; right: 15px; } #clorg #formContainer { position: relative; left: 18px; top: 50px; margin: 0 36px 20px 0; width: 202px; float: left; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: .7em; line-height: 1.3em; } #clorg #formContainer input { width: 202px; } #clorg #formContainer input.error { width: 202px; w\idth: 196px; } #clorg #formContainer input#send { position: absolute; bottom: 11px; right: 0; z-index: 5; height: 23px; width: 46px; } .error { border: 1px solid #c00; color: #c00; background: #fcc; margin: 1px 0; padding: 0 3px; font-weight: bold; } /* doctor ad */ #doctor { background: url('../i/doctor-410x211.jpg'); width: 205px; height: 211px; margin: 0 0 20px 20px; padding: 0; } #doctor li span { display: none; } #doctor li { float: left; list-style: none; } #doctor li, #doctor a { height: 40px; display: block; } #doctor #go { margin-top: 130px; } #doctor #go, #doctor #ask { width: 205px; } #doctor #go a:hover { background: url('../i/doctor-410x211.jpg') -205px -130px no-repeat; } #doctor #ask a:hover { background: url('../i/doctor-410x211.jpg') -205px -170px no-repeat; } /* conveyor belt */ #conveyor-belt { position: absolute; top: 90px; width: 580px; } /* ----- global settings needed for thickbox ----- */ *{padding: 0; margin: 0;} /* ----- thickbox specific link and font settings ----- */ #TB_window { font: 12px Arial, Helvetica, sans-serif; color: #333333; } #TB_secondLine { font: 10px Arial, Helvetica, sans-serif; color:#666666; } #TB_window a:link {color: #666666;} #TB_window a:visited {color: #666666;} #TB_window a:hover {color: #000;} #TB_window a:active {color: #666666;} #TB_window a:focus{color: #666666;} /* ----- thickbox settings ----- */ #TB_overlay { position: fixed; z-index:100; top: 0px; left: 0px; height:100%; width:100%; } .TB_overlayMacFFBGHack {background: url('../i/layout/macFFBgHack.png') repeat;} .TB_overlayBG { background-color:#000; filter:alpha(opacity=55); -moz-opacity: 0.55; opacity: 0.55; } * html #TB_overlay { /* ie6 hack */ position: absolute; height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px'); } #TB_window { position: fixed; background: #ffffff; z-index: 102; color:#000000; display:none; border: none; text-align:left; top:50%; left:50%; } * html #TB_window { /* ie6 hack */ position: absolute; margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px'); } #TB_window img#TB_Image { display:block; margin: 15px 0 0 15px; border-right: 1px solid #666; border-bottom: 1px solid #666; border-top: 1px solid #666; border-left: 1px solid #666; } #TB_caption{ height:25px; padding:7px 30px 10px 25px; float:left; } #TB_closeWindow{ height:25px; padding:11px 25px 10px 0; float:right; } #TB_closeAjaxWindow{ padding:7px 10px 5px 0; margin-bottom:1px; text-align:right; float:right; } #TB_ajaxWindowTitle{ float:left; padding:7px 0 5px 10px; margin-bottom:1px; } #TB_title{ background-color:#e8e8e8; height:27px; } #TB_ajaxContent{ clear:both; padding:2px 15px 15px 15px; overflow:auto; text-align:left; line-height:1.4em; } #TB_ajaxContent.TB_modal{ padding:15px; } #TB_ajaxContent p{ padding:5px 0px 5px 0px; } #TB_load{ position: fixed; display:none; height:13px; width:208px; z-index:103; top: 50%; left: 50%; margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */ } * html #TB_load { /* ie6 hack */ position: absolute; margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px'); } #TB_HideSelect{ z-index:99; position:fixed; top: 0; left: 0; background-color:#fff; border:none; filter:alpha(opacity=0); -moz-opacity: 0; opacity: 0; height:100%; width:100%; } * html #TB_HideSelect { /* ie6 hack */ position: absolute; height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px'); } #TB_iframeContent{ clear:both; border:none; margin-bottom:-1px; margin-top:1px; _margin-bottom:1px; } table.search-line, #ifPhone { display: none; } /* ----------- iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { } /* -------------------------------------------------------------------------------------- Phones (portrait) -------------------------------------------------------------------------------------- */ @media only screen and (min-device-width : 250px) and (max-device-width : 767px) and (orientation: portrait) { body { font-size: 3.2em; line-height: 1.25em; } #wrapper { width: 100%; min-width: 300px; background: url('../i/layout/backgrounds-jpeg.jpg') no-repeat -270px 0; background-size: 2490px 450px; } #header { float: none; height: 200px; } #header #logo { position: relative; float: none; width: 100%; height: 130px; } .topnavsee, .topnavhide { position: absolute; display: inline; width: 300px; height: 81px; right: 320px; top: 196px; z-index: 5; } .topnavsee img, .topnavhide img { width: 300px; height: 81px; } .topsearchsee, .topsearchhide { position: absolute; display: inline; width: 300px; height: 81px; right: 10px; top: 196px; z-index: 5; } .topsearchsee img, .topsearchhide img { width: 300px; height: 81px; } .topbacktosite { position: absolute; display: inline; width: 358px; height: 81px; right: 10px; top: 196px; z-index: 5; } .topbacktosite img { width: 358px; height: 81px; } #topSearch { float: none; height: 144px; top: 277px; width: 700px; _width: 698px; display: none; background-color: #e67303; text-align: right; } #topSearch input.txtField { float: none; top: 20px; width: 550px; w\idth: 548px; height: 100px; he\ight: 98px; border: none; font-size: 60px; font-weight: normal; } #topSearch input.submit { top: 20px; right: 30px; width: 100px; height: 100px; } #topNav { position: absolute; right: 0; top: 277px; background-image: none; background-color: #e67303; width: 700px; height: 100%; z-index: 10; _margin-bottom: -1px; font-family: Arial, Helvetica, sans-serif; display: none; } #topNav span { display: block; font-size: 48px; line-height: 48px; font-weight: bold; padding: 20px 0 20px 32px; text-align: left; background-color: #ce6703; } #topNav li { width: 700px; list-style: none; _display: block; position: relative; height: auto; border-bottom: none; } #topNav li a:link, #topNav li a:visited, #topNav li a:hover { width: 700px; height: 62px; display: block; background-image: none; background-repeat: no-repeat; color: #fff; text-decoration: none; } #topNav #home, #topNav #agl, #topNav #yvn, #topNav #gpb, #topNav #test, #topNav #mi, #topNav #home a, #topNav #agl a, #topNav #yvn a, #topNav #gpb a, #topNav #test a, #topNav #mi a { width: 700px; color: #fff; } #topNav #home, #topNav #home a { height: auto; } /* fixes problem of home button not showing completely on phone menu */ #topNav ul.popup { display: block; position: relative; z-index: 10; width: 700px; height: auto; } #topNav ul.popup li { width: 700px; list-style: none; _display: block; position: relative; height: auto; } #topNav li>ul.popup { left: 0; top: auto; display: block; } #topNav li:hover ul.popup, #topNav li.sfhover ul.popup { left: 0; top: auto; display: block; } #topNav li#mi>ul.popup { left: 0; } #topNav li#mi:hover ul.popup, #topNav li#mi.sfhover ul.popup { left: 0; } #topNav li li a:link, #topNav li li a:visited, #topNav li li a, #topNav li#home li a, #topNav li#agl li a, #wrapper.agl #topNav #agl li a, #topNav li#yvn li a, #wrapper.yvn #topNav #yvn li a, #topNav li#gpb li a, #wrapper.gpb #topNav #gpb li a, #topNav li#test li a, #wrapper.test #topNav #test li a, #topNav li#mi li a, #wrapper.mi #topNav #mi li a { padding: 20px 0 20px 32px; width: 668px; w\idth: 668px; height: auto; he\ight: auto; background: none; border-bottom: none; cursor: pointer; display: block; text-decoration: none; color: #fff; font-weight: normal; font-size: 40px; line-height: 40px; } #topNav li#home li a:hover, #topNav li#agl li a:hover, #wrapper.agl #topNav #agl li a:hover, #topNav li#yvn li a:hover, #wrapper.yvn #topNav #yvn li a:hover, #topNav li#gpb li a:hover, #wrapper.gpb #topNav #gpb li a:hover, #topNav li#test li a:hover, #wrapper.test #topNav #test li a:hover, #topNav li#mi li a:hover, #wrapper.mi #topNav #mi li a:hover { background: none; border-bottom: none; color: #fff; } #topNav li li a.top:link, #topNav li li a.top:visited, #topNav li#home li a.top, #topNav li#agl li a.top, #wrapper.agl #topNav #agl li a.top, #topNav li#yvn li a.top, #wrapper.yvn #topNav #yvn li a.top, #topNav li#gpb li a.top, #wrapper.gpb #topNav #yvn li a.top, #topNav li#test li a.top, #wrapper.test #topNav #test li a.top, #topNav li#mi li a.top, #wrapper.mi #topNav #mi li a.top { position: relative; bottom: inherit; width: 668px; w\idth: 668px; height: auto; he\ight: auto; z-index: auto; background: none; } #topNav li li a.bottom:link, #topNav li li a.bottom:visited, #topNav li#home li a.bottom, #topNav li#agl li a.bottom, #wrapper.agl #topNav #agl li a.bottom, #topNav li#yvn li a.bottom, #wrapper.yvn #topNav #yvn li a.bottom, #topNav li#gpb li a.bottom, #wrapper.gpb #topNav #gpb li a.bottom, #topNav li#test li a.bottom, #wrapper.test #topNav #test li a.bottom, #topNav li#mi li a.bottom, #wrapper.mi #topNav #mi li a.bottom { position: relative; bottom: 0; width: 668px; w\idth: 668px; height: auto; z-index: auto; background: none; border-bottom: none; } #topNav li#home li a.bottom:hover, #topNav li#agl li a.bottom:hover, #wrapper.agl #topNav #agl li a.bottom:hover, #topNav li#yvn li a.bottom:hover, #wrapper.yvn #topNav #yvn li a.bottom:hover, #topNav li#gpb li a.bottom:hover, #wrapper.gpb #topNav #gpb li a.bottom:hover, #topNav li#test li a.bottom:hover, #wrapper.test #topNav #test li a.bottom:hover, #topNav li#mi li a.bottom:hover, #wrapper.mi #topNav #mi li a.bottom:hover { background-position: right bottom; } #homepage #main { background: #fff; background-color: #fff; width: 100%; height: 100%; margin: 0 auto; padding: 0; font-size: 0; } #homepage #articles { width: 100%; background: #fff; background-color: #fff; margin: 0 auto; } #articles #major { float: none; display: block; width: 90%; height: auto; margin: -1px 0 0 10%; padding: 50px 0; clear: both; background: #fff; background-color: #fff; } #articles #major img { width: 800px; } #articles #minor { float: none; width: 90%; height: auto; clear: both; display: block; margin: 0 0 0 10%; } #articles #minor #TopLeft { float: none; margin: 0 0 50px 0; } #articles #minor #TopRight { float:none; margin: 0 0 50px 0; padding-right: 0; } #articles #minor #BottomLeft { float: none; margin: 0 0 50px 0; } #articles #minor #BottomRight { float: none; margin: 0; padding-right: 0; } #articles #minor #TopLeft img, #articles #minor #TopRight img, #articles #minor #BottomLeft img, #articles #minor #BottomRight img { width: 800px; } #homepage #content { background: none; background-color: #fff; margin: 0 auto; width: 90%; } #homepage #content p { margin: 0 20px 20px 18px; font-size:3.85em; line-height:1.25em; } #homepage #content #contentLeft { float: none; left: 0; top: 0; width: 100%; margin: 0 20px 16px 0; font-size:14px; line-height:16px; } #homepage #content #contentRight { float: none; right: 0; top: 0; width: 100%; margin: 0 20px 16px 0; font-size:14px; line-height:16px; } #homepage #content #contentRight p, #homepage #content #contentLeft p { margin: 0 0 1.25em 0; } #homepage #content h3 { font-size:3.85em; line-height:1.25em; } #feature li { width: 100%; float: none; list-style: none; margin: 0; } #feature #article li, #feature #article a { width: 980px; height: 439px; display: block; background: url('../i/layout/home-article-bg-phone-b-583x261.jpg') no-repeat; background-size: 100% 100%; } #feature #ask li, #feature #go li, #feature #ask a, #feature #go a { display: block; width: 100%; } #feature #go li, #feature #go a { background: url('../i/doctor-410x211.jpg') 0 0; background-size: 1640px 844px; width: 820px; height: 650px; margin: 0 auto; padding: 0; } #feature #ask li, #feature #ask a { background: url('../i/doctor-410x211.jpg') 0 -650px; background-size: 1640px 844px; width: 820px; height: 194px; margin: 0 auto; padding: 0; } #feature #go { margin-top: 50px; } #feature #go, #feature #ask { width: 230px; margin-left: 80px; } #feature #go a:hover { background: #fff; } #feature #ask a:hover { background: #fff; } #subpage #content h1 { font-size: 1.5em; line-height: 1em; margin-bottom: .6em; margin-top: 0; } #subpage #content h2 { font-size: 1em; line-height: 1.1em; margin-bottom: .75em; } #subpage #content h2.subtle { font-size: 1em; line-height: 1.1em; margin-bottom: 0; } #subpage #content #right ul li { padding: 0; margin: 0 0 .75em 50px; } #subpage #content #right ul.tight li, #subpage #content #right .related li { padding: 0; margin: 0 0 0 50px; } #subpage #content .quoteR { float: right; margin: 0 0 .75em 20px; width: 470px; } .quoteR img { width: 470px; } #subpage #content .imgR { font-size: .75em; line-height: 1.1em; font-weight: normal; font-style: italic; float: right; margin: 0 0 .75em 20px; } .imgR.px149 { width: 249px; } .imgR.px171 { width: 271px; } .imgR.px183 { width: 283px; } .imgR.px274 { width: 374px; } .imgR.px275 { width: 375px; } .imgR.px293sidebar { width: 593px; } .imgR.px149 img { width: 249px; } .imgR.px171 img { width: 271px; } .imgR.px183 img { width: 283px; } .imgR.px274 img { width: 374px; } .imgR.px275 img { width: 375px; } .imgR.px293sidebar img { width: 593px; } #subpage #content #freefind { } #subpage #content #freefind h1 { font-size: 1.5em; line-height: 1.2em; margin-bottom: 0; } #subpage #content #freefind .search-headline, #subpage #content #freefind .search-count, #subpage #content #freefind .search-count .search-suggest { font-size: 45px; line-height: 48px; } #subpage #content #freefind .search-form-cell { /*width: 300px; height: 80px; margin-bottom: 2em; font-size: 50px;*/ display: none; } #subpage #content #freefind .search-results, #subpage #content #freefind .search-results .search-nav { font-size: 50px; line-height: 57px; } #subpage #content #freefind a, #freefind .search-results a { font-weight: bold !important; font-size: 50px; line-height: 57px; } #subpage #content #freefind .search-header-table { margin-top: 0; margin-bottom: -30px; } #subpage #content #freefind .search-nav-form-table { margin-bottom: 40px; } #subpage #content #freefind .search-page-links, #subpage #content #freefind input #radio { display: none; } #leftNavAgpl li, #leftNavYvn li, #leftNavMi li, #leftNavGpb li, #leftNavTest li { font-size: .9em; left: 10%; } #qanda .start { margin-bottom: 40px; } #qanda .answersee, #qanda .answerhide { width: 100%; } #qanda .answersee img, #qanda .answerhide img { width: 416px; height: 104px; } #qanda .qa { width: 100%; padding-top: 5px; padding-bottom: 5px; margin-bottom: 5px; } #qanda .qa .bar { width: 100%; height: auto; } #qanda .qa .question { width: 100%; margin-top: 20px; margin-bottom: 10px; } #qanda .qa .question:hover { width: 100%; } #qanda .qa .answer { width: 100%; margin-left: 0; margin-top: 16px; } #qanda .qa .answer img { margin: 5px 0 10px 15px; } #qanda .qa .answer img.hor { width: 350px; } #qanda .qa .answer img.vert { width: 250px; } .chartContainer { width: 100%; w\idth: 100%; margin-left: -3px; padding: 3px 0 3px 3px; background: none; border: none; margin-bottom: 20px; } .chartContainer .chartTop { position: absolute; left: 0; top: 0; width: 100%; height: 10px; background: none; } .chartContainer .chartBottom { position: absolute; left: 0; bottom: 0; z-index: 1; width: 100%; height: 10px; background: none; } .chart { width: 100%; w\idth: 100%; font-size: .8em; line-height: 1.2em; z-index: 2; } .chart tr.row1 { background: #ededed; } .chart tr.row2 { background: #fff2db; } .chart th { color: #fff; font-weight: bold; text-align: left; vertical-align: bottom; background-color: #e99403; } .chart th, .chart td { padding: 10px 15px 10px 15px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; vertical-align: top; } .chart th { vertical-align: bottom; } .chart th.headL, .chart th.headR { background: none; background-color: #e99403; } .chart td.oL, .chart td.oR { background: none; background-color: #fff2db; } .chart td.lgL, .chart td.lgR { background: none; background-color: #ededed; } .chart td.noteA, .chart td.noteB { font-size: .8em; line-height: 1.5em; border-right: none; border-bottom: none; } .chart .rating { margin-bottom: 5px; text-align: center; } #contactUs, #contactUs table { width: 100%;} #contactUs table td {padding: 5px;} #contactUs input {width: 80%; height: 3em; font-size: 50px;} #contactUs textarea {width: 80%; height: 9em; font-size: 50px;} #contactUs .sendButton {width: 400px; height: 3em; font-size: 50px;} #homepage #footer #hon img, #subpage #footer #hon img { width: 113px; height: 142px; float: left; margin-right: 20px; } #conveyor-belt { position: absolute; top: 210px; width: 100%; } #subpage #content #left #promo { position: relative; width: 90%; margin: 0 auto; } #subpage #content #left #promo img { margin: 0; } #subpage #content #left #promo #wtPhone { float: none; margin: 0 auto 50px; width: 820px; } #subpage #content #left #promo #wtPhone img { width: 820px; } #doctor { position: relative; float: none; background: url('../i/doctor-410x211.jpg'); background-size: 1640px 844px; width: 820px; height: 844px; margin: 0 auto 100px; padding: 0; } #doctor li { float: left; list-style: none; } #doctor li, #doctor a { height: 170px; display: block; } #doctor #go { margin-top: 470px; } #doctor #go, #doctor #ask { width: 820px; } #doctor #ask { margin-top: 40px; } #doctor #go a:hover, #doctor #go a:visited, #doctor #ask a:hover, #doctor #ask a:visited { background: none; } } /* -------------------------------------------------------------------------------------- Phones (landscape) -------------------------------------------------------------------------------------- */ @media only screen and (min-device-width : 250px) and (max-device-width : 767px) and (orientation: landscape) { body { font-size: 1.65em; line-height: 1.2em; } #wrapper { width: 100%; min-width: 300px; background: url('../i/layout/backgrounds-jpeg.jpg') no-repeat -270px -17px; background-size: 2490px 450px; } #header { float: none; height: 180px; } #header #logo { position: relative; float: none; width: 100%; height: 120px; } .topnavsee, .topnavhide, { position: absolute; display: inline; width: 200px; height: 54px; right: 220px; top: 157px; z-index: 5; } .topnavsee img, .topnavhide img { width: 200px; height: 54px; } .topsearchsee, .topsearchhide { position: absolute; display: inline; width: 200px; height: 54px; right: 10px; top: 157px; z-index: 5; } .topsearchsee img, .topsearchhide img { width: 200px; height: 54px; } .topbacktosite { position: absolute; display: inline; width: 238px; height: 54px; right: 10px; top: 157px; z-index: 5; } .topbacktosite img { width: 238px; height: 54px; } #topSearch { float: none; height: 104px; top: 211px; width: 650px; _width: 648px; display: none; background-color: #e67303; text-align: right; } #topSearch input.txtField { float: none; top: 20px; width: 550px; w\idth: 548px; height: 60px; he\ight: 58px; border: none; font-size: 40px; font-weight: normal; } #topSearch input.submit { top: 20px; right: 30px; width: 60px; height: 60px; } #topNav { position: absolute; right: 0; top: 211px; background-image: none; background-color: #e67303; width: 550px; height: 100%; z-index: 10; _margin-bottom: -1px; font-family: Arial, Helvetica, sans-serif; display: none; } #topNav span { display: block; font-size: 31px; line-height: 31px; font-weight: bold; padding: 20px 0 20px 32px; text-align: left; background-color: #ce6703; } #topNav li { width: 550px; list-style: none; _display: block; position: relative; height: auto; border-bottom: none; } #topNav li a:link, #topNav li a:visited, #topNav li a:hover { width: 550px; height: 42px; display: block; background-image: none; background-repeat: no-repeat; color: #fff; text-decoration: none; } #topNav #home, #topNav #agl, #topNav #yvn, #topNav #gpb, #topNav #test, #topNav #mi, #topNav #home a, #topNav #agl a, #topNav #yvn a, #topNav #gpb a, #topNav #test a, #topNav #mi a { width: 550px; color: #fff; } #topNav #home, #topNav #home a { height: auto; } /* fixes problem of home button not showing completely on phone menu */ #topNav ul.popup { display: block; position: relative; z-index: 10; width: 550px; height: auto; } #topNav ul.popup li { width: 550px; list-style: none; _display: block; position: relative; height: auto; } #topNav li>ul.popup { left: 0; top: auto; display: block; } #topNav li:hover ul.popup, #topNav li.sfhover ul.popup { left: 0; top: auto; display: block; } #topNav li#mi>ul.popup { left: 0; } #topNav li#mi:hover ul.popup, #topNav li#mi.sfhover ul.popup { left: 0; } #topNav li li a:link, #topNav li li a:visited, #topNav li li a, #topNav li#home li a, #topNav li#agl li a, #wrapper.agl #topNav #agl li a, #topNav li#yvn li a, #wrapper.yvn #topNav #yvn li a, #topNav li#gpb li a, #wrapper.gpb #topNav #gpb li a, #topNav li#test li a, #wrapper.test #topNav #test li a, #topNav li#mi li a, #wrapper.mi #topNav #mi li a { padding: 20px 0 20px 32px; width: 518px; w\idth: 518px; height: auto; he\ight: auto; background: none; border-bottom: none; cursor: pointer; display: block; text-decoration: none; color: #fff; font-weight: normal; font-size: 31px; line-height: 31px; } #topNav li#home li a:hover, #topNav li#agl li a:hover, #wrapper.agl #topNav #agl li a:hover, #topNav li#yvn li a:hover, #wrapper.yvn #topNav #yvn li a:hover, #topNav li#gpb li a:hover, #wrapper.gpb #topNav #gpb li a:hover, #topNav li#test li a:hover, #wrapper.test #topNav #test li a:hover, #topNav li#mi li a:hover, #wrapper.mi #topNav #mi li a:hover { background: none; border-bottom: none; color: #fff; } #topNav li li a.top:link, #topNav li li a.top:visited, #topNav li#home li a.top, #topNav li#agl li a.top, #wrapper.agl #topNav #agl li a.top, #topNav li#yvn li a.top, #wrapper.yvn #topNav #yvn li a.top, #topNav li#gpb li a.top, #wrapper.gpb #topNav #yvn li a.top, #topNav li#test li a.top, #wrapper.test #topNav #test li a.top, #topNav li#mi li a.top, #wrapper.mi #topNav #mi li a.top { position: relative; bottom: inherit; width: 518px; w\idth: 518px; height: auto; he\ight: auto; z-index: auto; background: none; } #topNav li li a.bottom:link, #topNav li li a.bottom:visited, #topNav li#home li a.bottom, #topNav li#agl li a.bottom, #wrapper.agl #topNav #agl li a.bottom, #topNav li#yvn li a.bottom, #wrapper.yvn #topNav #yvn li a.bottom, #topNav li#gpb li a.bottom, #wrapper.gpb #topNav #gpb li a.bottom, #topNav li#test li a.bottom, #wrapper.test #topNav #test li a.bottom, #topNav li#mi li a.bottom, #wrapper.mi #topNav #mi li a.bottom { position: relative; bottom: 0; width: 518px; w\idth: 518px; height: auto; z-index: auto; background: none; border-bottom: none; } #topNav li#home li a.bottom:hover, #topNav li#agl li a.bottom:hover, #wrapper.agl #topNav #agl li a.bottom:hover, #topNav li#yvn li a.bottom:hover, #wrapper.yvn #topNav #yvn li a.bottom:hover, #topNav li#gpb li a.bottom:hover, #wrapper.gpb #topNav #gpb li a.bottom:hover, #topNav li#test li a.bottom:hover, #wrapper.test #topNav #test li a.bottom:hover, #topNav li#mi li a.bottom:hover, #wrapper.mi #topNav #mi li a.bottom:hover { background-position: right bottom; } #homepage #main { background: #fff; background-color: #fff; width: 100%; height: 100%; margin: 0 auto; padding: 0; font-size: 0; } #homepage #articles { width: 100%; background: #fff; background-color: #fff; margin: 0 auto; } #articles #major { float: none; display: block; width: 90%; height: auto; margin: -1px 0 0 0; padding: 50px 0; clear: both; background: #fff; background-color: #fff; } #articles #major img { width: 600px; margin: 0 0 0 190px; } #articles #minor { float: none; width: 90%; height: auto; clear: both; display: block; margin: 0; } #articles #minor #TopLeft { float: none; margin: 0 0 50px 0; } #articles #minor #TopRight { float:none; margin: 0 0 50px 0; padding-right: 0; } #articles #minor #BottomLeft { float: none; margin: 0 0 50px 0; } #articles #minor #BottomRight { float: none; margin: 0; padding-right: 0; } #articles #minor #TopLeft img, #articles #minor #TopRight img, #articles #minor #BottomLeft img, #articles #minor #BottomRight img { width: 600px; margin: 0 0 0 190px; } #homepage #content { background: none; background-color: #fff; margin: 0 auto; width: 90%; } #homepage #content p { margin: 0 20px 20px 18px; font-size: 1.65em; line-height: 1.2em; } #homepage #content #contentLeft { float: none; left: 0; top: 0; width: 100%; margin: 0 20px 16px 0; font-size:14px; line-height:16px; } #homepage #content #contentRight { float: none; right: 0; top: 0; width: 100%; margin: 0 20px 16px 0; font-size:14px; line-height:16px; } #homepage #content #contentRight p, #homepage #content #contentLeft p { margin: 0 0 1.25em 0; } #homepage #content h3 { font-size:1.65em; line-height:1.2em; } #feature li { width: 100%; float: none; list-style: none; margin: 0; } #feature #article li, #feature #article a { width: 980px; height: 439px; display: block; background: url('../i/layout/home-article-bg-phone-b-583x261.jpg') no-repeat; background-size: 100% 100%; } #feature #ask li, #feature #go li, #feature #ask a, #feature #go a { display: block; width: 100%; } #feature #go li, #feature #go a { background: url('../i/doctor-410x211.jpg') 0 0; background-size: 820px 422px; width: 410px; height: 325px; margin: 0 auto; padding: 0; } #feature #ask li, #feature #ask a { background: url('../i/doctor-410x211.jpg') 0 -325px; background-size: 820px 422px; width: 410px; height: 97px; margin: 0 auto; padding: 0; } #feature #go { margin-top: 50px; } #feature #go, #feature #ask { width: 230px; margin-left: 290px; } #feature #go a:hover { background: #fff; } #feature #ask a:hover { background: #fff; } #subpage #content h1 { font-size: 2.4em; line-height: 1em; margin-bottom: .35em; margin-top: 0; } #subpage #content h2 { font-size: 1.6em; line-height: 1.1em; margin-bottom: .75em; } #subpage #content h2.subtle { font-size: 1.6em; line-height: 1.1em; margin-bottom: 0; } #subpage #content #right ul li { padding: 0; margin: 0 0 .75em 28px; } #subpage #content #right ul.tight li, #subpage #content #right .related li { padding: 0; margin: 0 0 0 28px; } #subpage #content .quoteR { float: right; margin: 0 0 .75em 20px; width: 350px; } .quoteR img { width: 350px; } #subpage #content .imgR { font-size: .9em; line-height: 1.3em; font-weight: normal; font-style: italic; float: right; margin: 0 0 .75em 20px; } .imgR.px149 { width: 249px; } .imgR.px171 { width: 271px; } .imgR.px183 { width: 283px; } .imgR.px274 { width: 374px; } .imgR.px275 { width: 375px; } .imgR.px293sidebar { width: 493px; } .imgR.px149 img { width: 249px; } .imgR.px171 img { width: 271px; } .imgR.px183 img { width: 283px; } .imgR.px274 img { width: 374px; } .imgR.px275 img { width: 375px; } .imgR.px293sidebar img { width: 493px; } #subpage #content #freefind { } #subpage #content #freefind h1 { font-size: 2em; line-height: 1.3em; margin-bottom: 0; } #subpage #content #freefind .search-headline, #subpage #content #freefind .search-count, #subpage #content #freefind .search-count .search-suggest { font-size: 30px; line-height: 33px; } #subpage #content #freefind .search-form-cell { /*width: 300px; height: 80px; margin-bottom: 2em; font-size: 50px;*/ display: none; } #subpage #content #freefind .search-results, #subpage #content #freefind .search-results .search-nav { font-size: 30px; line-height: 37px; } #subpage #content #freefind a, #freefind .search-results a { font-weight: bold !important; font-size: 30px; line-height: 37px; } #subpage #content #freefind .search-header-table { margin-top: 0; margin-bottom: 0; } #subpage #content #freefind .search-nav-form-table { margin-bottom: 40px; } #subpage #content #freefind .search-page-links, #subpage #content #freefind input #radio { display: none; } #leftNavAgpl li, #leftNavYvn li, #leftNavMi li, #leftNavGpb li, #leftNavTest li { font-size: 1.3em; left: 10%; } #qanda .start { margin-bottom: 40px; } #qanda .answersee, #qanda .answerhide { width: 100%; } #qanda .answersee img, #qanda .answerhide img { width: 208px; height: 52px; } #qanda .qa { width: 100%; padding-top: 5px; padding-bottom: 5px; margin-bottom: 5px; } #qanda .qa .bar { width: 100%; height: auto; } #qanda .qa .question { width: 100%; margin-top: 20px; margin-bottom: 10px; } #qanda .qa .question:hover { width: 100%; } #qanda .qa .answer { width: 100%; margin-left: 0; margin-top: 16px; } #qanda .qa .answer img { margin: 5px 0 10px 15px; } #qanda .qa .answer img.hor { width: 250px; } #qanda .qa .answer img.vert { width: 180px; } .chartContainer { width: 100%; w\idth: 100%; margin-left: -3px; padding: 3px 0 3px 3px; background: none; border: none; margin-bottom: 20px; } .chartContainer .chartTop { position: absolute; left: 0; top: 0; width: 100%; height: 10px; background: none; } .chartContainer .chartBottom { position: absolute; left: 0; bottom: 0; z-index: 1; width: 100%; height: 10px; background: none; } .chart { width: 100%; w\idth: 100%; font-size: 1.1em; line-height: 1.4em; z-index: 2; } .chart tr.row1 { background: #ededed; } .chart tr.row2 { background: #fff2db; } .chart th { color: #fff; font-weight: bold; text-align: left; vertical-align: bottom; background-color: #e99403; } .chart th, .chart td { padding: 10px 15px 10px 15px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; vertical-align: top; } .chart th { vertical-align: bottom; } .chart th.headL, .chart th.headR { background: none; background-color: #e99403; } .chart td.oL, .chart td.oR { background: none; background-color: #fff2db; } .chart td.lgL, .chart td.lgR { background: none; background-color: #ededed; } .chart td.noteA, .chart td.noteB { font-size: .8em; line-height: 1.5em; border-right: none; border-bottom: none; } .chart .rating { margin-bottom: 5px; text-align: center; } #contactUs, #contactUs table { width: 100%;} #contactUs table td {padding: 5px; font-size: 33px;} #contactUs input {width: 80%; height: 1.3em; font-size: 40px;} #contactUs textarea {width: 80%; height: 5em; font-size: 40px;} #contactUs .sendButton {width: 250px; height: 1.8em; font-size: 35px;} #homepage #footer #hon img, #subpage #footer #hon img { width: 43px; height: 60px; float: left; margin-right: 15px; } #conveyor-belt { position: absolute; top: 150px; width: 100%; } #subpage #content #left #promo { position: relative; width: 90%; margin: 0 auto; } #subpage #content #left #promo img { margin: 0; } #subpage #content #left #promo #wtPhone { float: none; margin: 0 auto 50px; width: 410px; } #subpage #content #left #promo #wtPhone img { width: 410px; } #doctor { position: relative; float: none; background: url('../i/doctor-410x211.jpg'); background-size: 820px 422px; width: 410px; height: 422px; margin: 0 auto 60px; padding: 0; } #doctor li { float: left; list-style: none; } #doctor li, #doctor a { height: 140px; display: block; } #doctor #go { margin-top: 180px; } #doctor #go, #doctor #ask { width: 410px; } #doctor #ask { margin-top: 10px; height: 80px;} #doctor #go a:hover, #doctor #go a:visited, #doctor #ask a:hover, #doctor #ask a:visited { background: none; } } /* --------------------------------------------------------------------------- Phones (portrait and landscape) --------------------------------------------------------------------------- */ @media only screen and (min-device-width : 250px) and (max-device-width : 767px) { #container { width: 100%; } #subpage #container .top, #container .bottom { width: 100%; height: auto; background: none; } #subpage #rule { width: auto; height: auto; margin: 0 auto; background: #fff; } #subpage #content { float: none; width: 100%; background: #fff; } #subpage #content #left { clear: right; float: none; width: 100%; top: 20px; z-index: 5; } #subpage #content #right { clear: both; float: none; width: 90%; margin: 28px 0 0 5%; } #subpage #content h1 { font-weight: bold; } #subpage #content p, #subpage #content #right ul, #subpage #content ol { margin: 0 0 .75em 0; } #subpage #content .update { font-size: .85em; margin: 1.5em 0 1.5em 0; } #subpage #content #freefind { width: 95%; } #homepage #footer, #subpage #footer { padding-bottom: 100px; } #homepage #footer #hon, #subpage #footer #hon { float: none; width: 100%; margin: 0 0 0 0; } #homepage #footer p, #subpage #footer p { width: 90%; font-size: .7em; line-height: 1.2em; margin: 0 0 0 5%; padding-bottom: 1.2em; } .imgR img, .imgL img { margin: 0 0 .3em 0; } #leftNavAgpl, #leftNavYvn, #leftNavMi, #leftNavGpb, #leftNavTest { float: none; width: 90%; height: auto; background: none; list-style: disc; margin: 0 auto; } #leftNavAgpl li, #leftNavYvn li, #leftNavMi li, #leftNavGpb li, #leftNavTest li { float: none; width: 90%; height: auto; background: none; list-style: disc; margin-bottom: .5em; } #leftNavAgpl li a, #leftNavYvn li a, #leftNavMi li a, #leftNavGpb li a, #leftNavTest li a { height: auto; background: none; overflow: visible; } #leftNavAgpl li span, #leftNavYvn li span, #leftNavMi li span, #leftNavGpb li span, #leftNavTest li span { position: relative; height: auto; background: none; } #leftNavAgpl li#what a, #leftNavAgpl li#what span, #leftNavAgpl li#clvg a, #leftNavAgpl li#clvg span, #leftNavAgpl li#gpvsl a, #leftNavAgpl li#gpvsl span, #leftNavAgpl li#gpvls a, #leftNavAgpl li#gpvls span, #leftNavAgpl li#orthok a, #leftNavAgpl li#orthok span, #leftNavAgpl li#scleral a, #leftNavAgpl li#scleral span, #leftNavAgpl li#care a, #leftNavAgpl li#care span, #leftNavYvn li#myopia a, #leftNavYvn li#myopia span, #leftNavYvn li#teens a, #leftNavYvn li#teens span, #leftNavYvn li#parents a, #leftNavYvn li#parents span, #leftNavYvn li#sports a, #leftNavYvn li#sports span, #leftNavYvn li#lasik a, #leftNavYvn li#lasik span, #leftNavYvn li#astigmatism a, #leftNavYvn li#astigmatism span, #leftNavYvn li#keratoconus a, #leftNavYvn li#keratoconus span, #leftNavYvn li#problems a, #leftNavYvn li#problems span, #leftNavYvn li#presbyopia a, #leftNavYvn li#presbyopia span, #leftNavMi li#clqa a, #leftNavMi li#clqa span, #leftNavMi li#clrx a, #leftNavMi li#clrx span, #leftNavMi li#cost a, #leftNavMi li#cost span, #leftNavMi li#history a, #leftNavMi li#history span, #leftNavMi li#glossary a, #leftNavMi li#glossary span, #leftNavMi li#brochure a, #leftNavMi li#brochure span, #leftNavMi li#practition a, #leftNavMi li#practition span, #leftNavMi li#question a, #leftNavMi li#question span, #leftNavMi li#links a, #leftNavMi li#links span, #leftNavGpb li#gpbvbe a, #leftNavGpb li#gpbvbe span, #leftNavGpb li#gpbvm a, #leftNavGpb li#gpbvm span, #leftNavGpb li#design a, #leftNavGpb li#design span, #leftNavGpb li#faq a, #leftNavGpb li#faq span, #leftNavGpb li#wearers a, #leftNavGpb li#wearers span, #leftNavTest li#doctors a, #leftNavTest li#doctors span, #leftNavTest li#consumers a, #leftNavTest li#consumers span { width: 90% } #ifPhone { display: inline; } #subpage #pageControls, h1 br, #doNotShowOnPhone, #ifNotPhone, #homepage #footer #hon br, #subpage #footer #hon br, #promo #wtNoPhone, .topnavhide, .topsearchhide, #topSearch #search, #topSearch #info, #homepage #content #contentLeft .update, #feature li span, #doctor li span { display: none; } }