/* HTML, BODY ---------- */
html {height: 100%; margin-bottom: 1px}
body {background: #00355C url(images/body_bg.gif) repeat-x; margin: 0}
/* TEXT ---------- */
body, table, input, textarea {color: #333; font: 12px/1.5em tahoma, sans-serif}
p {margin: 0; padding: 0 0 1em 0}
td {vertical-align: top}
.flash p {background: #FFFF99; font-size: 10px; line-height: 14px; margin: 10px; padding: 5px; position: absolute}
.red {color: #FF0000}
/* HEADERS ---------- */
h1 {color: #00375A; font: bold 17px trebuchet ms, serif; margin: 0; text-transform: uppercase}
h2 {color: #00375A; font-size: 14px; font-weight: bold; margin: 0}
h3, .highlight {font-size: 12px; font-weight: bold; margin: 0}
/* LISTS ---------- */
ol, ul {margin-bottom: 1em; margin-top: 0}
#locations ul {background: url(images/locations_bg.gif) repeat-y; list-style: none; margin: 10px 0 0 0; padding: 5px; width: 200px}
#content ul.list {list-style-image: url(images/list.gif); padding: 0; margin-left: 15px}
#content ul ul, #content ul ul ul {margin-left: 20px; padding: 0}
/* LINKS ---------- */
a {color: #72A36B; text-decoration: underline}
a:hover {text-decoration: none}
a#header {background: #F4EFE5 url(images/header_bg.gif) no-repeat 50% 0; display: block; height: 130px; padding: 0 20px; overflow: hidden; text-indent: -999em; width: 720px}
a.portrait {float: left; margin-bottom: 10px; text-align: center; width: 50%}
#footer a {font-size: 10px}
a#sesame {color: #C4D1E1}
/* NAVIGATION ---------- */
ul#masthead {background: url(images/masthead_bg.gif); height: 40px; list-style: none; margin: 0; padding: 0 20px; width: 720px}
#masthead li {float: left}
#masthead a {display: block; height: 40px; overflow: hidden; text-indent: -999px}
#suresmile {background: url(images/navigation/suresmile.gif); width: 117px}
#invisalign {background: url(images/navigation/invisalign.gif); width: 104px}
#in_ovation {background: url(images/navigation/in_ovation.gif); width: 101px}
#ortho_sesame {background: url(images/navigation/ortho_sesame.gif); width: 91px}
#doctor_login {background: url(images/navigation/doctor_login.gif); margin-right: 5px; width: 140px}
#patient_login {background: url(images/navigation/patient_login.gif); width: 140px}
ul#navigation {left: 20px; list-style: none; margin: 0; padding: 0; position: absolute; top: 170px; width: 210px; z-index: 1}
#navigation a {display: block; height: 24px; overflow: hidden; text-indent: -999px; width: 210px}
#about_us {background: url(images/navigation/about_us.gif)}
#about_braces {background: url(images/navigation/about_braces.gif)}
#glossary {background: url(images/navigation/glossary.gif)}
#office_tours {background: url(images/navigation/office_tours.gif)}
#forms {background: url(images/navigation/forms.gif)}
#financial {background: url(images/navigation/financial.gif)}
#games {background: url(images/navigation/games.gif)}
#contact_us {background: url(images/navigation/contact_us.gif)}
#home {background: url(images/navigation/home.gif)}
a#dds_referral_form {background: url(images/navigation/dds_referral_form.gif); height: 40px}
#navigation a:hover, #navigation a.active,
#navigation li:hover #about_us, #navigation li.sfhover #about_us,
#navigation li:hover #about_braces, #navigation li.sfhover #about_braces,
#navigation li:hover #glossary, #navigation li.sfhover #glossary,
#navigation li:hover #office_tours, #navigation li.sfhover #office_tours,
#navigation li:hover #forms, #navigation li.sfhover #forms,
#navigation li:hover #financial, #navigation li.sfhover #financial,
#navigation li:hover #contact_us, #navigation li.sfhover #contact_us {background-position: 0 -24px}
#masthead a:hover, a#dds_referral_form:hover, a#dds_referral_form.active {background-position: 0 -40px}
#navigation ul {list-style: none; margin: 0; padding: 0}
#navigation li {float: left; margin-bottom: 5px}
#navigation ul {background: #C5CED0; border: 1px solid #00355C; border-width: 1px 1px 0 1px; font-size: 11px; left: -999em; margin: -25px 0 0 200px; position: absolute; width: 215px; z-index: 1}
#navigation li:hover ul ul, #navigation li.sfhover ul ul {left: -999em}
#navigation ul li {margin-bottom: 0}
#navigation ul ul {margin-top: -20px}
#navigation li:hover ul, #navigation li.sfhover ul, #navigation li li:hover ul, #navigation li li.sfhover ul {display: block; left: auto}
#navigation ul li a {border-bottom: 1px solid #00355C; color: #00355C; height: 18px; line-height: 18px; margin: 0; padding-left: 5px; text-indent: 0; text-decoration: none}
#navigation ul li a:hover, #navigation ul li:hover a.subnav, #navigation ul li.sfhover a.subnav {background: #77AC6A; color: #FFF}
/* IMAGES ---------- */
img, table {border: none}
.border {border: 1px solid #CAB69E}
.centered {display: block; margin: 0 auto 10px auto}
.clear {clear: both}
.left {float: left; margin: 0 10px 10px 0}
.right {float: right; margin: 0 0 10px 10px}
.flash img {float: left; margin-right: 10px}
/* LAYOUT ---------- */
#container {background: #F4EFE5 url(images/container_bg.gif) repeat-y; margin: 0 auto; position: relative; width: 760px}
.flash {position: relative}
#content {background: #FFF url(images/content_bg.gif) no-repeat 100% 100%; margin-left: 230px; min-height: 550px; padding: 20px 20px 8px 20px; width: 470px}
* html #content {height: 550px}
#locations {bottom: 0; font-size: 11px; line-height: 1.4em; left: 20px; position: absolute}
#footer {background: url(images/footer_bg.gif) no-repeat center 0; color: #FFF; font-size: 11px; margin: 0 auto; padding-top: 30px; text-align: center; width: 760px}