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

/* TEXT ---------- */
body, table, input, textarea {color: #333; font: 11px/1.64em tahoma, sans-serif}
p {margin: 0; padding-bottom: 1em}
td {vertical-align: top}
#flash p {background: #FFFF99; font-size: 10px; padding: 5px; width: 190px}

/* HEADERS ---------- */
h1 {background-repeat: no-repeat; height: 20px; margin: 0; overflow: hidden; text-indent: -999em}
h2 {color: #631975; font-size: 1.18em; margin: 0}
h3 {font-size: 1.18em; margin: 0}

/* LISTS ---------- */
ol, ul {margin-bottom: 1.5em; margin-top: 0}
#footer ul {list-style: none; margin: -1em 0 0 0; padding: 0}
#footer li {display: inline}

/* LINKS ---------- */
a {color: #631975; text-decoration: underline}
a:hover {text-decoration: none}
#logo {background: transparent; display: block; height: 120px; overflow: hidden; text-indent: -999em; width: 480px}
.callout {float: left; height: 50px; margin: 0 0 1em -240px; overflow: hidden; text-indent: -999em; width: 210px}

/* NAVIGATION ---------- */
#patient-login {background: url(images/navigation/patient-login.gif); display: block; height: 40px; left: 500px; overflow: hidden; position: absolute; text-indent: -999em; top: 70px; width: 140px}
#aacd {background: url(images/navigation/aacd.gif); display: block; height: 72px; overflow: hidden; position: absolute; right: 30px; text-indent: -999em; top: 10px; width: 87px}

#navigation {height: 30px; left: 0; list-style: none; margin: 0 20px; padding: 0; position: absolute; top: 120px}
#navigation li {float: left}
#navigation a {display: block; height: 30px; overflow: hidden; text-indent: -999em}
#our-office {background: url(images/navigation/our-office.gif); width: 113px}
#cosmetic-dentistry {background: url(images/navigation/cosmetic-dentistry.gif); width: 111px}
#smile-gallery {background: url(images/navigation/smile-gallery.gif); width: 114px}
#rate-your-smile {background: url(images/navigation/rate-your-smile.gif); width: 128px}
#services {background: url(images/navigation/services.gif); width: 85px}
#contact-us {background: url(images/navigation/contact-us.gif); width: 103px}
#home {background: url(images/navigation/home.gif); width: 86px}
#navigation a:hover, #navigation a.active, 
#navigation li:hover #our-office, #navigation li.sfhover #our-office, 
#navigation li:hover #services, #navigation li.sfhover #services {background-position: 0 -30px}

#navigation ul {border: 1px solid #FFF; left: -999em; list-style: none; margin: 0 0 0 10px; padding: 0; position: absolute; width: 140px}
#navigation ul li {float: none}
#navigation li:hover ul, #navigation li.sfhover ul {display: block; left: auto}
#navigation ul li a {background: #E1CFE6; border-top: 1px solid #FFF; display: block; height: auto; line-height: 2.7em; margin-top: -1px; padding-left: 10px; text-decoration: none; text-indent: 0; width: 140px}
#navigation ul li a:hover {background: #EFE4F2}

/* 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}

/* LAYOUT ---------- */
#container {background: url(images/container.gif); margin: 0 auto; position: relative; text-align: left; width: 780px}
#header {background: url(images/header.gif) no-repeat; height: 120px; margin: 0 20px; padding-bottom: 30px}
#content {background: url(images/content.gif) no-repeat 50% 100%; min-height: 310px; padding: 50px 60px 40px 60px}
* html #content {height: 310px}
#flash {background: url(images/flash.jpg); height: 250px; margin: -50px -40px 0 -280px; padding-bottom: 30px; width: 740px}
.sidebar {background: #F1F1F1; padding: 10px 10px 0 10px}
#footer {background: url(images/footer.gif); height: 80px; line-height: 1.45em; padding: 20px; text-align: center}

/* ANATOMY OF A TOOTH ---------- */
#anatomy-of-a-tooth {background: url(images/anatomy-of-a-tooth/anatomy-of-a-tooth-bg.gif); height: 525px; position: relative; width: 300px}
#anatomy-of-a-tooth a {cursor: help; display: block; position: absolute}
#anatomy-of-a-tooth a:hover {background: transparent}
a#bone {height: 20px; left: 30px; top: 380px; width: 40px}
a#cementum {height: 20px; left: 100px; top: 460px; width: 90px}
a#dentin {height: 20px; left: 80px; top: 165px; width: 60px}
a#enamel {height: 20px; left: 165px; top: 135px; width: 60px}
a#gingiva {height: 30px; left: 20px; top: 275px; width: 60px}
a#periodontal {height: 30px; left: 205px; top: 440px; width: 70px}
a#pulp {height: 30px; left: 125px; top: 220px; width: 50px}
a#print {cursor: pointer; height: 23px; left: 240px; top: 502px; width: 60px}
#anatomy-of-a-tooth a img {border: none; display: block; height: 0; position: absolute; width: 0}
#anatomy-of-a-tooth a:hover img {height: 98px; width: 300px}
a#bone:hover img {left: -30px; top: -380px}
a#cementum:hover img {left: -100px; top: -460px}
a#dentin:hover img {left: -80px; top: -165px}
a#enamel:hover img {left: -165px; top: -135px}
a#gingiva:hover img {left: -20px; top: -275px}
a#periodontal:hover img {left: -205px; top: -440px}
a#pulp:hover img {left: -125px; top: -220px}