/* Layout */
body {background: #1d3653; margin: 0; text-align: center;}
#wrap {background: #ebe2a8 url(images/wrap-bg.gif) repeat-x; width: 100%;}
#container {width: 800px; margin: 0 auto; position: relative; text-align: left;}
#header {position: relative;}
#content_wrap {background: url(images/content-top.jpg) no-repeat; margin: 0 0 0 221px; width: 563px; min-height: 420px;}
* html #content_wrap {height: 420px;}
#content {padding: 15px 22px;}
#footer {background: url(images/footer-bg.gif) repeat-x; padding: 20px 0; width: 100%;}
.sidebar {background: #cfc3ad; width: 105px; display: block; text-align: center; border: solid 1px #013366; float: right; margin: 5px 0 15px 15px; padding: 5px;}

.clear {clear: both;}
.cf:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.cf {display: inline-block;} /*this trips hasLayout for ie7*/
.cf {display: block;} /*this returns it back to normal*/
* html .cf {height: 1px;}

/* Images */
img {border: 0; display: block;}
.img_left_border {border: solid 1px #365476; margin: 5px 15px 15px 0; float: left; clear: both;}
.img_center_border {border: solid 1px #365476; margin: 0 auto; display: block; text-align: center;}
.img_right_border {border: solid 1px #365476; margin: 5px 0 15px 15px; float: right; clear: right;}

/* Text */
body, table {font: 12px/18px Verdana, Arial, Helvetica, sans-serif; color: #565656;}
#address p {color: #365476; line-height: normal; width: 182px; padding: 0 0 0 35px; margin: 15px 0; display: block;}
#content p {padding: 0 0 15px 0; margin: 0;}
#footer p {width: 800px; margin: 10px auto; padding: 0; color: #d7ffdd; text-align: center; line-height: normal;}

/* Links */
a {color: #565656;}
a:hover {color: #67bc0b;}
#footer a {font-size: 10px; color: #d7ffdd;}
#footer a:hover {color: #75dd83;}

/* Lists */
ol, ul {margin-bottom: 15px; margin-top: 0;}
dl.logos, dl.logos dt, dl.logos dd {list-style: none; margin: 0; padding: 0;}
dl.logos {border: 1px solid #CCC; border-width: 0 0 1px 1px; margin: 10px 0 5px 0; padding: 10px 0 5px 10px; width: 60%;}
dl.logos dd {margin-bottom: 10px; padding: 10px 0 5px 0;}
dl.logos span {font-size: 14px; font-weight: bold; line-height: normal;}

/* Patient Login */
#pt-login {width: 174px; margin: 0; padding: 0; position: absolute; z-index: 2; right: 16px;}
#pt-login a {background: url(images/nav/pt-login.jpg); line-height: 32px; display: block; text-indent: -999em; overflow: hidden;}
#pt-login a:hover {background-position: 0 -32px;}

/* Side Navigation */
#nav {width: 217px; margin: 0; padding: 0; left: 4px; top: 117px; position: absolute; z-index: 3;}
#nav a {display: block; text-decoration: none; text-indent: -999em; overflow: hidden;}

#our-office {background: url(images/nav/our-office.gif);}
#new-patients {background: url(images/nav/new-patients.gif);}
#pediatric {background: url(images/nav/pediatric.gif);}
#cosmetic {background: url(images/nav/cosmetic.gif);}
#sedation {background: url(images/nav/sedation.gif);}
#treatments {background: url(images/nav/treatments.gif);}
#anatomy {background: url(images/nav/anatomy.gif);}
#links {background: url(images/nav/links.gif);}
#contact {background: url(images/nav/contact.gif);}
#whats-new {background: url(images/nav/whats-new.gif);}
#home {background: url(images/nav/home.gif);}

#nav a {width: 217px; height: 25px;}
#nav a:hover, #nav a.active,
#nav li:hover #our-office, #nav li.sfhover #our-office,
#nav li:hover #new-patients, #nav li.sfhover #new-patients,
#nav li:hover #treatments, #nav li.sfhover #treatments,
#nav li:hover #contact, #nav li.sfhover #contact {background-position: 0 -25px;}
#nav a.active {cursor: default;}

/* Drop Down */
#nav ul {line-height: 1; list-style: none; margin: 0; padding: 0; border: 0;}
#nav li {display: inline;}
#nav li ul {background: #d3fdd9; font-size: 11px; left: -9999px; position: absolute; z-index: 4; padding: 3px;}
#nav li:hover ul, #nav li.sfhover ul {left: auto; margin: -25px 0 0 210px;}
#nav ul li a {color: #365375; padding: 2px 0 2px 10px; width: 150px; height: 18px; line-height: 18px; text-indent: 0;}
#nav ul li a:hover {background: #fff;}

/* Headings */
h1 {width: 519px; height: 50px; margin: 0 0 10px 0; text-indent: -999em; overflow: hidden;}
h2 {font-size: 17px; color: #577497; margin: 10px 0;}
h3 {font-size: 14px; color: #565656; margin: 0;}
h1.our-office {background: url(images/titles/our-office.gif);}
h1.meet-dr-chang {background: url(images/titles/meet-doctor.gif);}
h1.meet-the-team {background: url(images/titles/meet-team.gif);}
h1.office-tour {background: url(images/titles/office-tour.gif);}
h1.for-new-patients {background: url(images/titles/new-patients.gif);}
h1.office-policies {background: url(images/titles/office-policies.gif);}
h1.privacy-policy {background: url(images/titles/privacy-policy.gif);}
h1.pediatric-dentistry  {background: url(images/titles/pediatric.gif);}
h1.cosmetic-dentistry {background: url(images/titles/cosmetic.gif);}
h1.sedation-dentistry {background: url(images/titles/sedation.gif);}
h1.dental-treatments {background: url(images/titles/treatments.gif);}
h1.bonding {background: url(images/titles/bonding.gif);}
h1.bridges {background: url(images/titles/bridges.gif);}
h1.crowns {background: url(images/titles/crowns.gif);}
h1.fillings {background: url(images/titles/fillings.gif);}
h1.implants {background: url(images/titles/implants.gif);}
h1.veneers {background: url(images/titles/veneers.gif);}
h1.teeth-whitening {background: url(images/titles/teeth-whitening.gif);}
h1.anatomy-of-a-tooth {background: url(images/titles/anatomy.gif);}
h1.links {background: url(images/titles/links.gif);}
h1.contact-us {background: url(images/titles/contact.gif);}
h1.location {background: url(images/titles/location.gif);}
h1.comment-form {background: url(images/titles/comments.gif);}
h1.refer-a-friend {background: url(images/titles/referrals.gif);}
h1.appointment-request {background: url(images/titles/appointments.gif);}
h1.whats-new {background: url(images/titles/whats-new.gif);}
h1.site-map {background: url(images/titles/site-map.gif);}

/* Anatomy of a Tooth */
#anatomy-of-a-tooth-diagram {background: url(images/anatomy-of-a-tooth/anatomy-of-a-tooth-bg.gif); height: 525px; position: relative; width: 300px; margin: 10px auto;}
#anatomy-of-a-tooth-diagram a {cursor: help; display: block; position: absolute;}
#anatomy-of-a-tooth-diagram 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-diagram a img {border: none; display: block; height: 0; position: absolute; width: 0;}
#anatomy-of-a-tooth-diagram 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;}