/* IMPORTANT NOTES: - Redesigned October 2009. - This style sheet is for the CLMA and GPLI contact lens prescriber locator that Pliner developed with ASP. - locator.css and locator-print.css contain the same info, so when you change one, just do "save as" to change the other. */ * { padding: 0; margin: 0; } html { min-height: 100%; margin: 0; background: url(../images/locator/bg-page-gradient-1x154.gif) repeat-x 0 0 #0077dc; } body { font: 12px/18px Verdana, Arial, Helvetica, sans-serif; color: #000; text-align: center; } a:link, a:visited { color: #000; text-decoration: underline; } a:hover { color: #000; text-decoration: none; } blockquote { position: relative; margin: 0 30px; } .clear { clear: both; } #container { position: relative; margin: 0 auto; width: 730px; text-align: left; } #header { position: relative; margin: 18px 0 0 0; width: 730px; height: 68px; background: url(../images/locator/hed-730x68.gif) no-repeat 0 0; } #content { position: relative; width: 730px; height: 100%; } #content-top { position: relative; width: 730px; height: 68px; background: url(../images/locator/hed-search-730x68.gif) no-repeat 0 0; } #content-top2 { position: relative; width: 730px; height: 68px; background: url(../images/locator/Doctor-Finder.gif) no-repeat 0 0; } #content-top-intl { position: relative; width: 730px; height: 68px; background: url(../images/locator/hed-international-730x68.gif) no-repeat 0 0; } #txtSearchName { position: relative; top: 15px; left: 140px; padding: 0 2px 0 2px; width: 142px; height: 15px; font: 11px/13px Verdana, Arial, Helvetica, sans-serif; color: #000; background: #fff; border: 1px solid #ccc; } #ddlSearchState { position: relative; top: 15px; left: 250px; width: 60px; height: 17px; font: 11px/13px Verdana, Arial, Helvetica, sans-serif; color: #000; background: #fff; border: 1px solid #ccc; } #ddlSearchState option { font: 11px/13px Verdana, Arial, Helvetica, sans-serif; color: #000; background: #fff; margin: 0 0 3px 3px; } #txtSearchZip { position: relative; top: 15px; left: 334px; padding: 0 2px 0 2px; width: 86px; height: 15px; font: 11px/13px Verdana, Arial, Helvetica, sans-serif; color: #000; background: #fff; border: 1px solid #ccc; } #btnSearch { position: relative; top: 20px; left: 343px; width: 34px; height: 19px; } #content-mid { position: relative; width: 730px; background: url(../images/locator/bg-content-mid-730x1.gif) repeat-y 0 0; } #lblErr { text-align: center; } .result { position: relative; left: 40px; width: 650px; margin: 0 0 20px 0; padding: 0 0 20px 0; border-bottom: 2px solid #d7d7d7; } #result { position: relative; left: 40px; width: 650px; margin: 0 0 20px 0; padding: 0 0 20px 0; border-bottom: 2px solid #d7d7d7; } .col-01 { position: relative; float: left; width: 320px; } #col-01 { position: relative; float: left; width: 320px; } .col-02 { position: relative; float: right; width: 330px; } #col-02 { position: relative; float: right; width: 330px; } .col-02-country { position: relative; float: right; width: 330px; margin: 10px 0 0 0; } #col-02-country { position: relative; float: right; width: 330px; margin: 10px 0 0 0; } .name, .address, .citystatezip { margin: 0 10px 0 0; } .country { font: 12px/18px Arial, Helvetica, sans-serif; color: #014a89; font-weight: bold; margin: 0 0 10px 0; } .name { font: 14px/18px Verdana, Arial, Helvetica, sans-serif; color: #000; font-weight: bold; } .phone { margin: 10px 10px 0 0; } .web { margin: 0 10px 0 0; } .credentials { margin: 0 10px 0 0; list-style-position: inside; } #pnlView { margin: 10px 0 10px; } #content-btm { position: relative; margin: -22px 0 0 0; width: 730px; height: 58px; background: url(../images/locator/bg-content-btm-730x58.gif) no-repeat 0 0; z-index: 10; } #footer { position: relative; width: 730px; text-align: center; padding: 0 0 30px 0; font: 11px/13px Verdana, Arial, Helvetica, sans-serif; color: #000; } #footer p.international { padding: 0 0 20px 0; font: 14px/13px Verdana, Arial, Helvetica, sans-serif; color: #7adbff; } #footer p.international a, #footer p.international a:visited { text-decoration: underline; color: #7adbff; } #footer p.international a:hover { text-decoration: none; color: #7adbff; } /* --------------------------------------------------------------------------- Phones (portrait and landscape) --------------------------------------------------------------------------- */ @media only screen and (min-device-width : 250px) and (max-device-width : 767px) { html { background: none; background-color: #1d8ed4; } body { width: 100%; } blockquote { position: relative; margin: 0 10px; } #container { width: 98%; margin: 0 auto; } #content-mid { width: 93%; min-height: 600px; background: none; background-color: #fff; margin: 0 auto; padding: 0 30px; } #lblErr { text-align: center; position: relative; top: 140px; padding-bottom: 140px; } .result { left: 0; width: auto; margin: 0 0 20px 0; padding: 0 0 20px 0; border-bottom: 3px solid #d7d7d7; } #result { left: 0; width: auto; margin: 0 0 20px 0; padding: 0 0 20px 0; border-bottom: 3px solid #d7d7d7; } .col-01, #col-01, .col-02, #col-02 { float: none; width: auto; } .col-02-country, #col-02-country { float: none; width: auto; margin: 10px 0 0 0; } .col-01, #col-01 { margin-bottom: 30px; } .name, .address, .citystatezip { margin: 0 0 0 0; } .phone { margin: 30px 0 0 0; } .web { margin: 0 0 0 0; } #pnlView { margin: 10px 0 10px; } #content-btm { margin: 0 auto; width: 90%; height: auto; background: none; background-color: #fff; } #footer p.international a, #footer p.international a:visited, #footer a, #footer a:visited { color: #b6ebff; font-weight: bold; } #footer p.international a:hover, #footer a:hover { color: #b6ebff; font-weight: bold; } } /* -------------------------------------------------------------------------------------- Phones (portrait) -------------------------------------------------------------------------------------- */ @media only screen and (min-device-width : 250px) and (max-device-width : 767px) and (orientation: portrait) { body { width: 100%; font: 48px/54px Verdana, Arial, Helvetica, sans-serif; } #header { margin: 0 auto; width: 100%; height: 200px; background: url(../images/locator/locator-head-phone-980x200.jpg) no-repeat 0 0; background-size: 100% 200px; border: none; } #content { width: 100%; height: 100%; } #content-top { width: 100%; height: 200px; background: url(../images/locator/locator-head-phone-search-980x200.png) no-repeat 0 0; background-size: 980px 200px; margin: 0 auto; } #content-top2 { width: 100%; height: 200px; background: url(../images/locator/locator-head-phone-search-980x200.png) no-repeat 0 0; background-size: 980px 200px; margin: 0 auto; } #content-top-intl { width: 100%; height: 168px; background: url(../images/locator/hed-international-730x68.gif) no-repeat 0 0; background-size: 980px 168px; margin: 0 auto; } #txtSearchName { top: 30px; left: 22px; padding: 0 2px 0 2px; width: 270px; height: 70px; font: 43px/43px Verdana, Arial, Helvetica, sans-serif; border: 1px solid #ccc; } #ddlSearchState { top: 30px; left: 79px; width: 132px; height: 70px; font: 45px/45px Verdana, Arial, Helvetica, sans-serif; border: 1px solid #ccc; } #ddlSearchState option { font: 40px/45px Verdana, Arial, Helvetica, sans-serif; margin: 0 0 3px 3px; } #txtSearchZip { top: 30px; left: 148px; padding: 0 2px 0 2px; width: 138px; height: 70px; font: 43px/43px Verdana, Arial, Helvetica, sans-serif; border: 1px solid #ccc; } #btnSearch { top: 40px; left: 184px; width: 144px; height: 104px; } #content-mid table { width: 90% !important; margin: auto auto; } #content-mid table td { width: 30% !important; padding: 20px; } #content-mid table a { font-size: 40px !important; } .country { font: 53px/58px Arial, Helvetica, sans-serif; font-weight: bold; margin: 0 0 10px 0; } .name { font: 53px/59px Verdana, Arial, Helvetica, sans-serif; font-weight: bold; padding-top: 30px; } .credentials { margin: 0 0 0 0; list-style-position: inside; font: 35px/40px Verdana, Arial, Helvetica, sans-serif; } #footer { width: 90%; margin: 80px auto; padding: 0 30px 120px 30px; font: 36px/43px Verdana, Arial, Helvetica, sans-serif; color: #b6ebff; } #footer p.international { padding: 0 30px 30px 30px; font: 36px/43px Verdana, Arial, Helvetica, sans-serif; color: #b6ebff; } } /* -------------------------------------------------------------------------------------- Phones (landscape) -------------------------------------------------------------------------------------- */ @media only screen and (min-device-width : 250px) and (max-device-width : 767px) and (orientation: landscape) { body { width: 100%; font: 28px/34px Verdana, Arial, Helvetica, sans-serif; } #header { margin: 0 auto; width: 100%; height: 150px; background: url(../images/locator/locator-head-phone-980x150.jpg) no-repeat 0 0; background-size: 100% 150px; border: none; } #content { width: 100%; height: 100%; } #content-top { width: 100%; height: 150px; background: url(../images/locator/locator-head-phone-search-980x150.png) no-repeat 0 0; background-size: 980px 150px; margin: 0 auto; } #content-top2 { width: 100%; height: 150px; background: url(../images/locator/locator-head-phone-search-980x150.png) no-repeat 0 0; background-size: 980px 150px; margin: 0 auto; } #content-top-intl { width: 100%; height: 168px; background: url(../images/locator/hed-international-730x68.gif) no-repeat 0 0; background-size: 980px 168px; margin: 0 auto; } #txtSearchName { left: 23px; padding: 0 2px 0 2px; width: 260px; height: 50px; font: 40px/40px Verdana, Arial, Helvetica, sans-serif; border: 1px solid #ccc; } #ddlSearchState { left: 120px; width: 132px; height: 50px; font: 40px/40px Verdana, Arial, Helvetica, sans-serif; border: 1px solid #ccc; } #ddlSearchState option { font: 40px/45px Verdana, Arial, Helvetica, sans-serif; margin: 0 0 3px 3px; } #txtSearchZip { left: 180px; padding: 0 2px 0 2px; width: 138px; height: 50px; font: 40px/40px Verdana, Arial, Helvetica, sans-serif; border: 1px solid #ccc; } #btnSearch { top: 23px; left: 220px; width: 144px; height: 104px; } #content-mid table { width: 90% !important; margin: auto auto; } #content-mid table td { width: 30% !important; padding: 20px; } #content-mid table a { font-size: 30px !important; } .country { font: 30px/35px Arial, Helvetica, sans-serif; font-weight: bold; margin: 0 0 10px 0; } .name { font: 34px/40px Verdana, Arial, Helvetica, sans-serif; font-weight: bold; padding-top: 30px; } .credentials { margin: 0 0 0 0; list-style-position: inside; font: 25px/30px Verdana, Arial, Helvetica, sans-serif; } #footer { width: 90%; margin: 80px auto; padding: 0 30px 120px 30px; font: 28px/35px Verdana, Arial, Helvetica, sans-serif; color: #b6ebff; } #footer p.international { padding: 0 30px 30px 30px; font: 28px/35px Verdana, Arial, Helvetica, sans-serif; color: #b6ebff; } } /* COLOR PALETTE: fff = white 000 = black ccc = light gray (used in borders in the search form) ebebf9 = light purple (used in page background) def4ef = light green (used in search box and divider rules) */