@charset "utf-8";
/* CSS Document */

/* HTML, BODY ---------- */
* {margin:0; padding:0;}
body {margin:0; background: url(images/bg.jpg) repeat-x #834813; font-family: Arial, Helvetica, sans-serif; font-size:12px; line-height:17px; }
p, h2, h3, ul, blockquote, ol {padding-bottom:20px;}
ul, blockquote, ol {padding-left:30px; padding-right:20px;}
a {color:#367c2b;}
a:hover {text-decoration:none;}
a img {border-style:none;}
#footer p {color:#d4bfad}
#footer a {color:#d4bfad; text-decoration:none;} #footer a:hover {text-decoration:underline;}
p.breadcrumbs  {color:#367c2b; font-weight:bold; text-transform:capitalize;}
input {margin-right:5px;}
#content ul {list-style:square;}

/* LAYOUT ---------- */
#wrap {width:860px; margin:0 auto; background:url(images/tile-body.gif) repeat-y;  position:relative;}
#body {width:847px; overflow:auto; padding-right:13px;}
#content {border:1px solid #000; float:right; clear:both; min-height:520px; height:auto !important; _height:520px;}
#content.home {min-height: 465px; _height: 465px;}
#address {width:126px; position:absolute; z-index:50; top:595px; margin-left:67px; text-align:center;}
#footer {text-align:center; line-height:14px; width:850px; margin:0 auto; background:url(images/bg-footer.gif) no-repeat #834813; padding:26px 5px 10px 5px; clear:both;}

/* HEADERS ---------- */
h1 {background-repeat: no-repeat; height: 55px; width:319px; text-indent: -999em; margin:0; padding:0;}
#footer h2 {font-size:11px; padding-bottom:30px;}
#content h2 {color:#367c2b; font-size:14px;}
h1#logo {
margin: 0;
padding: 0;
background-repeat: no-repeat; 
width: 249px;/* this width reflects the width of the logo image */
height: 191px; /* this height reflects the height of the heading image */
overflow: hidden; 
text-indent: -999em;} /* hides rich text so only background image shows */

h1#logo a {
display: block; 
height: 191px;/*same height as logo h1*/ 
width:249px;/*same width as logo h1*/}

/* CLASSES ---------- */
#footer .sesame {color:#000; text-decoration:none;}
.img {margin:-10px 10px 10px 10px; float:right; border:1px solid #382102;}
.imggif {margin:-10px 10px 10px 10px; float:right; }
.right {float:right;}
.left {float:left;}
.top  {color:#e4a732; font-size:11px; font-weight:bold;}
.hide {display:none;}
.flash {margin:42px 0 0 205px; width:545px; height:228px;}
.flashp {color:#000; background-image: url(images/1.jpg); text-align:center; padding-bottom:160px;}
.block {display:block;}
.listnone {list-style:none;}
.center {text-align:center;}
.clear {clear:both;}
.blue {color:#1b4164; font-weight:bold;}
.resources {border:1px solid #382102;}
.bghome {background:url(images/bg-body-home.jpg) no-repeat;}
.bgsub {background:url(images/bg-body-sub.jpg) no-repeat;}
.home {width:267px; padding:60px 7px 0 7px; margin: 46px 0 0 0;  height:418px;}
.sub {width:556px; padding:10px 15px 0 15px; margin: 46px 0 0 0;  }
.facebook-link {text-align: center; height: 64px; width: 128px; margin-top: 10px; display: block;}

/* NAVIGATION ---------- */


/* NAVIGATION MAIN ---------- */
ul#nav {list-style: none; padding: 0; margin:0 0 0 11px; width:235px; position:absolute; z-index:80; top:237px;}

/*  Sets styles for all links that are inside the ul id="nav" */
#nav a {display: block;height: 30px; overflow: hidden; text-indent:-999em; width:235px}

/* Set the image for each nav item */
#ouroffice {background: url(images/nav-our-office.gif); }
#fornewpatients {background: url(images/nav-for-new-patients.gif); }
#teeth101 {background: url(images/nav-teeth-101.gif); }
#services {background: url(images/nav-services.gif); }
#post-op {background: url(images/nav-post-op-instructions.gif); }
#contactus {background: url(images/nav-contact-us.gif); }
#onlineform {background: url(images/nav-onlineform.gif); }
#home {background: url(images/nav-home.gif); }
#testimonials {background: url(images/nav-testimonials.gif); }

/* Shift the image position up to show the active state */
#nav a:hover, #nav .active, #nav li:hover, #nav li.sfhover, 
#nav li:hover #ouroffice, #nav li.sfhover #ouroffice, 
#nav li:hover #onlineform, #nav li.sfhover #onlineform, 
#nav li:hover #fornewpatients, #nav li.sfhover #fornewpatients, 
#nav li:hover #teeth101, #nav li.sfhover #teeth101, 
#nav li:hover #services, #nav li.sfhover #services, 
#nav li:hover #post-op, #nav li.sfhover #post-op, 
#nav li:hover #home, #nav li.sfhover #home, 
#nav li:hover #testimonials, #nav li.sfhover #testimonials, 
#nav li:hover #contactus, #nav li.sfhover #contactus {background-position:-235px 0pt;}

/* Set the cursor to default arrow so link does not appear clickable */
#nav .active {cursor: default}

/* TOP NAVIGATION MAIN ---------- */
ul#topnav {list-style: none; padding: 0; margin:0 0 0 12px; width:835px; position:absolute; z-index:60; top:191px;}

/*  Makes the list items sit next to each other */
#topnav li {float: left;}

/*  Sets styles for all links that are inside the ul id="nav" */
#topnav a {display: block;height: 34px; overflow: hidden; text-indent:-999em; }

/* Set the image for each nav item */
#caringforyourteeth {background: url(images/nav-caring-for-your-teeth.gif); width:211px;}
#cosmeticdentistry {background: url(images/nav-cosmetic-dentistry.gif); width:173px;}
#sedationdentistry {background: url(images/nav-sedation-dentistry.gif); width:167px;}
#invisalign {background: url(images/nav-invisalign.gif); width:101px;}
#cerec {background: url(images/nav-cerec.gif); width:82px;}
#zoom {background: url(images/nav-zoom.gif); width:101px;}

/* Shift the image position up to show the active state */
#topnav a:hover, #topnav .active, #topnav li:hover, #topnav li.sfhover, 
#topnav li:hover #caringforyourteeth, #topnav li.sfhover #caringforyourteeth, 
#topnav li:hover #cosmeticdentistry, #topnav li.sfhover #cosmeticdentistry, 
#topnav li:hover #sedationdentistry, #topnav li.sfhover #sedationdentistry, 
#topnav li:hover #invisalign, #topnav li.sfhover #invisalign, 
#topnav li:hover #cerec, #topnav li.sfhover #cerec, 
#topnav li:hover #zoom, #topnav li.sfhover #zoom {background-position:0 -34px;}

/* Set the cursor to default arrow so link does not appear clickable */
#nav .active {cursor: default}


/* LOGINS NAV ITEMS ---------- */

ul#logins {height: 36px; width:172px; list-style: none; padding:0; margin:0 0 0 668px; position:absolute; z-index:90; top:22px;}


/*  Sets styles for all links that are inside the ul id="nav" */
#logins a {display: block;height: 36px; overflow: hidden; text-indent:-999em; width:172px;}

/* Set the image for each nav item */
#patientlogin {background: url(images/nav-patient-login.jpg);}
#doctorlogin {background: url(images/nav-doctor-login.jpg);}

/* Shift the image position up to show the active state */
#logins a:hover, #logins .active, #logins li:hover, #logins li.sfhover {background-position:-172px 0;}
/* Set the cursor to default arrow so link does not appear clickable */
#logins .active {cursor: default}

/* SUB NAVIGATION ---------- */
div#sub {width: 557px; margin-bottom:20px;}



* html div#sub {margin-right: 0px;}

/* for IE6*/
div#sub ul {list-style: none; width:557px; padding:0; margin:0; color:#367c2b;  }

/*  Sets styles for all links that are inside the ul id="nav" */
#sub a { color:#367c2b; }
#sub a:hover {text-decoration:none; color:#367c2b;}
#sub li {display: inline; white-space: nowrap; }

#sub  li.black {color:#000;}

/* Shift the image position up to show the active state */
#sub a:hover, #sub .active {text-decoration:none; color:#367c2b;}

#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}