/* ---------------------------------------------------------------------------- CSS Document - styles.css ---------------------------------------------------------------------------- */ ul,ol { list-style: none; } h1,h2,h3,h4,h5,h6,pre,code { font-size: 1em; } ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input,div,dd,dt,dl { margin: 0; padding: 0; } a img,:link img,:visited img { border: none; } h1 { font-size: 13px; } /* HTML ---------------------------------------------------------------------------- */ html,body { height: 100%; } body { margin: 0 auto; text-align: center; font: 12px/17px "Trebuchet MS", Arial, Helvetica, sans-serif; height: 100%; background: #688196 url(../images/body-bg.jpg) repeat-x; } a { text-decoration: underline; color: #fff; } a:hover { text-decoration: none; } a span, #splash blockquote, #splash-1 blockquote, #splash-2 blockquote, #splash-2 blockquote, #splash-3 blockquote, #splash-4 blockquote, #splash-5 blockquote { display: none; } fieldset { border: none; } em strong { display: block; visibility: hidden; } /* Layout ---------------------------------------------------------------------------- */ #top, #splash, #splash-1, #splash-2, #splash-3, #splash-4, #splash-5, #nav, #actual-nav, #content-container, #pre-footer, #footer { width: 762px; } #top { margin: 0 auto; text-align: left; background: url(../images/wrap-bg.jpg) repeat-y; } #mast { height: 145px; background: url("../images/mast.jpg"); position:relative; } #mast a { position:absolute; width:262px; height:37px; left:143px; top:48px; } #mast a span {display:none; } #splash { height: 233px; background: url(../images/splash.jpg); } #splash-1 { height: 233px; background: url(../images/banners/dr.jpg); } #splash-2 { height: 233px; background: url(../images/banners/technology.jpg); } #splash-3 { height: 233px; background: url(../images/banners/faq.jpg); } #splash-4 { height: 233px; background: url(../images/banners/contact.jpg); } #splash-5 { height: 233px; background: url(../images/banners/lasik.jpg); } #splash-6 { height: 233px; background: url(../images/banners/corneal.jpg); } #campus { height: 566px; background: url(../images/banners/campus.gif); } #content-container, #other-container { position: relative; } #left-col, #right-col { float: left; } #left-col { width: 215px; color: #fff; } #left-col p { margin: 0 25px 12px 17px; } #right-col { width: 547px; color: #1c374c; } #right-col h1, #right-col h2, #right-col h3, #right-col h4, #right-col h5, #right-col h6 { margin: 0 36px 7px 25px; } #right-col ul.list { margin: 0 36px 12px 42px; list-style: square inside; } #cc ul { margin: 0 36px 12px 42px; list-style: square inside; } #right-col p { margin: 0 40px 12px 25px; } #right-col a:link, #right-col a:visited { text-decoration:underline; color: #1c374c;} #right-col a:hover, #right-col a:active { text-decoration:none; } #right-col .btp { font-size: 11px; text-align:right; } /* Headers */ .left-hdr { width: 215px; } .right-hdr, #sm-panel-container, #sm-panel-top, #sm-panel-bot { width: 547px; } #left-col .left-hdr strong, #right-col .right-hdr strong { display: none; } #hdr-contact-dr { height: 55px; background: url(../images/headers/hdr-contact-dr.jpg); } #hdr-office-info { height: 55px; background: url(../images/headers/hdr-office-info.jpg); } #hdr-directions { height: 50px; background: url(../images/headers/hdr-directions.gif); } #hdr-directions strong { display: none; } #hdr-directions a { position: relative; top: 32px; left: 30px; width: 110px; height: 9px; display: block; } html>body #hdr-directions a { width: 110px; height: 13px; } #hdr-campus { height: 16px; background: url(../images/headers/hdr-campus.gif) no-repeat; } #hdr-campus strong { display: none; } #hdr-campus a { position: relative; top: 0px; left: 30px; width: 145px; height: 8px; display: block; } html>body #hdr-campus a { width: 145px; height: 8px; } #btns-panel, #btn-panels ul { width: 215px; height: 326px; background: url(../images/btns-panel.jpg) no-repeat; } #btns-panel li { float: left; } #btns-panel li, #btns-panel a { display: block; width: 174px; height: 92px; margin-left: 4px; } html>body #btns-panel li, html>body #btns-panel a { margin-left: 7px; } #abtn-1 { margin-top: 8px; } #abtn-2 { margin-top: 13px; } html>body #abtn-2 { margin-top: 17px; } #abtn-3 { margin-top: 13px; } html>body #abtn-3 { margin-top: 19px; } #hdr-why-choose-us { height: 75px; background: url(../images/headers/hdr-why-choose-us.jpg); } #hdr-lasik { height: 75px; background: url(../images/headers/hdr-lasik.jpg); } #hdr-corneal { height: 75px; background: url(../images/headers/hdr-corneal.jpg); } #hdr-about-dr { height: 75px; background: url(../images/headers/hdr-about-dr.jpg); } #hdr-technology { height: 75px; background: url(../images/headers/hdr-technology.jpg); } #hdr-faqs { height: 75px; background: url(../images/headers/hdr-faqs.jpg); } #hdr-contact { height: 75px; background: url(../images/headers/hdr-contact.jpg); } #hdr-thanks { height: 75px; background: url(../images/headers/hdr-thanks.jpg); } #hdr-sitemap { height: 75px; background: url(../images/headers/hdr-sitemap.jpg); } #hdr-expertise { width: 178px; float: left; background: url(../images/headers/hdr-expertise.jpg) no-repeat; } #hdr-expertise p { margin: 0 0 11px 27px; } #hdr-experience { width: 170px; float: left; background: url(../images/headers/hdr-experience.jpg) no-repeat; } #hdr-experience p { margin: 0 1px 11px 15px; } #hdr-excellence { width: 199px; float: left; background: url(../images/headers/hdr-excellence.jpg) no-repeat; } #hdr-excellence p { margin: 0 42px 11px 11px; } #hdr-expertise em strong, #hdr-experience em strong, #hdr-excellence em strong { height: 48px; } #hdr-all-laser-lasik, #hdr-personal-bv { width: 296px; height: 44px; } #hdr-all-laser-lasik { background: url(../images/headers/hdr-all-laser-lasik.jpg); } #hdr-personal-bv { background: url(../images/headers/hdr-personal-bv.jpg); } #hdr-all-laser-lasik span, #hdr-personal-bv span { display: none; } #hdr-see-the-world { width: 547px; height: 124px; clear: both; background: url(../images/headers/hdr-see-the-world.jpg); } #hdr-see-the-world span { display: none; } #best-doctors-logo { width: 547px; height: 201px; clear: both; background: url(../images/best-doctors-logo-2011-2012.jpg); } #best-doctors-logo span { display: none; } #img-candidate, #img-concerned-vision { height: 331px; float: left; position: relative; } #img-candidate blockquote, #img-concerned-vision blockquote { display: none; } #img-candidate { width: 262px; background: url(../images/img-candidate.jpg); } #img-candidate a { position: relative; width: 106px; height: 112px; display: block; top: 179px; left: 131px; } html>body #img-candidate a { width: 110px; height: 117px; top: 179px; left: 131px; } #img-concerned-vision { width: 285px; background: url(../images/img-concerned-vision.jpg); } #img-concerned-vision ul { width: 100%; } #img-concerned-vision li { float: left; } #img-concerned-vision li, #img-concerned-vision a { display: block; width: 97px; height: 95px; } html>body #img-concerned-vision li, html>body #img-concerned-vision a { height: 99px; } #cv-btn-1 { margin: 101px 0 0 11px; } #cv-btn-2 { margin: 101px 0 0 12px; } #cv-btn-3 { margin: 6px 0 0 11px; } #cv-btn-4 { margin: 6px 0 0 12px; } html>body #cv-btn-1 { margin: 101px 0 0 24px; } html>body #cv-btn-2 { margin: 101px 0 0 16px; } html>body #cv-btn-3 { margin: 6px 0 0 24px; } html>body #cv-btn-4 { margin: 6px 0 0 16px; } #hdr-patient-forms { background: url(../images/headers/hdr-patient-forms.jpg); height: 65px; } #hdr-visx-booklets { background: url(../images/headers/hdr-visx_booklets.jpg); height: 37px; } #left-col .patient-forms-list { list-style: none outside; padding-bottom: 12px; font-size: 11px; } #left-col .patient-forms-list li { background: url(../images/li-bg.gif) no-repeat 17px 5px; padding: 0 28px 0 32px; } #hdr-testimonials { background: url(../images/headers/hdr-testimonials.jpg); height: 38px; } #sm-panel-container { float: left; background: url(../images/sm-panel-bg.jpg) repeat-y; } #sm-panel-container dl { width: 100%; } #sm-panel-container dd { float: left; } #sm-panel-container dd.spt-img { width: 251px; } #sm-panel-container dd.spt-copy { width: 296px; } #sm-panel-container dd p { margin: 0 70px 11px 24px; } #sm-panel-top { height: 29px; background: url(../images/sm-panel-top.jpg); } #sm-panel-bot { height: 24px; float: left; background: url(../images/sm-panel-bot.jpg); } #pre-footer, #footer { margin: 0 auto; text-align: center; } #pre-footer { height: 41px; background: url(../images/pre-footer.jpg) no-repeat bottom; } #footer { padding-bottom: 12px; color: #fff; } #footer a { color: #fff; } #footer ul { padding: 0 0 5px; } #footer ul.first { padding-top: 12px; } #footer li { padding: 0 5px 0 7px; display: inline; font-size: 11px; line-height: 15px; border-left: 1px solid #ccc; } #footer li.first { border-left: none; } #footer p { margin: 0 24px 12px; } /* Navigation ---------------------------------------------------------------------------- */ #actual-nav { background: url(../images/nav.jpg) top left no-repeat; height: 37px; } #actual-nav span { display: none; } #actual-nav li, #actual-nav a { height: 37px; display: block; } #actual-nav li { float: left; list-style: none; _display: inline; } #btn-1 { width: 83px; margin-left:3px; } #btn-2 { width: 145px; } #btn-3 { width: 82px; } #btn-4 { width: 156px; } #btn-5 { width: 115px; } #btn-6 { width: 81px; } #btn-7 { width: 94px; } /* Changed values should match "width" numbers specified above */ #btn-1 a:hover { background: transparent url(../images/nav.jpg) no-repeat -3px -37px; } #btn-2 a:hover { background: transparent url(../images/nav.jpg) no-repeat -86px -37px; } #btn-3 a:hover { background: transparent url(../images/nav.jpg) no-repeat -231px -37px; } #btn-4 a:hover { background: transparent url(../images/nav.jpg) no-repeat -313px -37px; } #btn-5 a:hover { background: transparent url(../images/nav.jpg) no-repeat -469px -37px; } #btn-6 a:hover { background: transparent url(../images/nav.jpg) no-repeat -584px -37px; } #btn-7 a:hover { background: transparent url(../images/nav.jpg) no-repeat -665px -37px; } /* Son of Suckerfish */ #actual-nav li ul { position: absolute; left: -9999px; background-color: #720000; /* Background color of drop down menu - add more styles (i.e. background image) if you want */ } #actual-nav li ul li { height: 20px; } /* Height of each drop down menu item */ #actual-nav li ul li a { width: 100%; height: 20px; line-height: 20px; } #actual-nav li ul li a span { display: block; padding-left: 5px; } /* Drop down link styles */ #actual-nav a:link, #actual-nav a:visited, #actual-nav a:hover, #actual-nav a:active { font-size: 11px; color: #fff; text-decoration: none; } #actual-nav li:hover ul, #actual-nav li.sfhover ul { left: auto; } /* Hover styles for drop down items */ #btn-3 ul a:hover, #btn-4 ul a:hover { background-image: none; background-color: #aa0; } /* width of drop down menu - choose width that allows items to display on one line */ #btn-3 ul, #btn-3 li { width: 260px; } #btn-4 ul, #btn-4 li { width: 90px; } /* Side Buttons ---------------------------------------------------------------------------- */ /* Quick Contact ---------------------------------------------------------------------------- */ #left-col form { margin: 0 25px 12px 27px; } #left-col input, #left-col textarea { width: 144px; padding: 1px 2px; margin-bottom: 3px; font: 11px/11px "Trebuchet MS", Arial, Helvetica, sans-serif; background-color: #fff; color: #000; border: 1px solid #fff; } textarea { height: 96px; overflow: auto; } input.hidden { display: none; } #left-col input.btn-send { width: 58px; margin-top: 3px; padding: 1px; } #contact-business { display:none; } /* Main Contact ---------------------------------------------------------------------------- */ #right-col form { margin: 0 36px 12px 25px; } #right-col fieldset { margin-bottom: 3px; height: 28px; line-height: 13px; } #right-col fieldset.custom { height: 42px; } #right-col fieldset div { float: left; width: 200px; } #right-col fieldset div.field-item { text-align: right; padding-right: 12px; } #right-col fieldset div.clear { clear: both; text-align: center; padding-top: 24px; } #right-col input, #right-col select { width: 144px; padding: 1px 2px; margin-bottom: 2px; font: 11px/11px "Trebuchet MS", Arial, Helvetica, sans-serif; background-color: #fff; color: #000; border: 1px solid #333; } #right-col textarea { width: 344px; height: 88px; padding: 1px 2px; margin: 0 auto 2px; font: 11px/11px "Trebuchet MS", Arial, Helvetica, sans-serif; background-color: #fff; color: #000; border: 1px solid #333; display: block; } #right-col input.btn-send { width: 58px; margin: 3px auto; padding: 1px; display: block; } /* Classes ---------------------------------------------------------------------------- */ .clear { clear: both; } .no-height { clear: both; height: 0;} .img-left { float: left; padding: 0 8px 1px 0; } .img-right { float: right; padding: 0 10px 7px 10px; } .txt-center { text-align: center; } .txt-right { text-align: right; }