/* HTML, BODY ---------- */
html {height: 100%; margin-bottom: 1px}
body {background: #004727; margin: 0}

/* TEXT ---------- */
body, table, input, textarea {color: #353535; font: 12px/20px tahoma, sans-serif}
p {margin: 0 0 10px 0}
td {vertical-align: top}
hr {border: 0; background: #FFF; color: #FFF; height: 1px}
.flash p {background: #FFFF99; font-size: 10px; margin: 10px 10px 0 10px; padding: 5px}

/* HEADERS ---------- */
h1 {background-repeat: no-repeat; color: #508672; font: normal 25px georgia, serif; height: 30px; margin: 0 0 5px 0; overflow: hidden; text-indent: -999em}
h2 {color: #ACB777; font: normal 17px georgia, serif; margin: 0}
h3 {color: #508672; font-size: 13px; font-weight: bold; margin: 0}

/* LISTS ---------- */
ol, ul {margin-bottom: 10px; margin-top: 0}
ul#masthead {left: 470px; list-style: none; margin: 0; overflow: hidden; padding: 0; text-indent: -999em; position: absolute; width: 250px}
ul#masthead li {float: left}
ul#navigation {background: url(images/navigation_bg.gif) no-repeat; float: left; list-style: none; margin: 0; padding: 25px 0 170px 0; width: 180px}

/* LINKS ---------- */
a {color: #679998; text-decoration: underline}
a:hover {color: #2A636C; text-decoration: none}
a#logo {background: transparent; display: block; height: 140px; left: 50px; overflow: hidden; text-indent: -999em; top: 35px; position: absolute; width: 435px}
#footer a {color: #E6F6B5}
a#sesame {color: #9FC4B2; font-size: 10px}

/* NAVIGATION ---------- */
ul#masthead a {display: block; height: 35px; width: 125px}
#patient_login {background: url(images/navigation/patient_login.gif)}
#doctor_login {background: url(images/navigation/doctor_login.gif)}
ul#masthead a:hover {background-position: 0 -35px}

#navigation a {display: block; height: 25px; overflow: hidden; text-indent: -999px; width: 180px}
#about_us {background: url(images/navigation/about_us.gif)}
#for_new_patients {background: url(images/navigation/for_new_patients.gif)}
#orthodontics {background: url(images/navigation/orthodontics.gif)}
#braces_101 {background: url(images/navigation/braces_101.gif)}
#invisalign {background: url(images/navigation/invisalign.gif)}
#emergency_care {background: url(images/navigation/emergency_care.gif)}
#the_game_room {background: url(images/navigation/the_game_room.gif)}
#contact_us {background: url(images/navigation/contact_us.gif)}
#home {background: url(images/navigation/home.gif)}
#navigation a:hover, #navigation .active, 
#navigation li:hover #about_us, #navigation li.sfhover #about_us, 
#navigation li:hover #orthodontics, #navigation li.sfhover #orthodontics, 
#navigation li:hover #braces_101, #navigation li.sfhover #braces_101, 
#navigation li:hover #contact_us, #navigation li.sfhover #contact_us {background-position: 0 -25px}

#navigation ul {list-style: none; margin: 0; padding: 0}
#navigation li {display: inline}
#navigation li ul {background: #E2F3EB; font-size: 11px; left: -999em; padding: 5px 0; position: absolute; z-index: 1}
#navigation li:hover ul, #navigation li.sfhover ul {left: auto; margin: -25px 0 0 180px}
#navigation ul li a {height: 12px; line-height: 11px; margin: 0; padding: 4px 4px 4px 15px; text-indent: 0; text-decoration: none; width: 140px}
#navigation ul li a:hover {background: url(images/subnav_bg.gif) no-repeat}

/* IMAGES ---------- */
img, table {border: none}
.centered {display: block; margin: 0 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 ---------- */
.wrap {width: 100%}
.top {background: #78A393 url(images/body_top_bg.gif) repeat-x}
.bottom {background: url(images/body_bottom_bg.gif) repeat-x}
#container {background: #FFF; margin: 20px auto 0 auto; position: relative; width: 770px}
#container:after {clear: both; content: "."; display: block; height: 0; visibility: hidden}
#header {background: url(images/header_bg.gif); height: 180px; position: relative}
#content {background: url(images/content_bg.gif) no-repeat 100% 0; float: left; min-height: 380px; padding: 20px 20px 0 20px; width: 550px}
* html #content {height: 380px}
#footer {background: url(images/footer_bg.gif) no-repeat center 0; clear: both; color: #FFF; font-size: 11px; margin: 0 auto; padding: 70px 0 10px 0; text-align: center}