/* CSS Document */
/* HTML, BODY ---------- */
* {margin:0; padding:0;}
body {margin:0; background:url(images/tile-body.jpg) repeat-x #93c9ef; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:12px; line-height:18px; color:#000;}
p, h2, h3, ul, blockquote, ol {padding-bottom:20px;}
ul, blockquote, ol {padding-left:30px; padding-right:20px;}
a {color:#FFF;}
a:hover {text-decoration:none;}
a img {border-style:none;}
#footer a {color:#69a1cf;}
#address p {padding:6px 15px 12px 0; text-align:right; }

/* LAYOUT ---------- */
#bg {width:100%; background:url(images/bg-tree.jpg) no-repeat;}
#wrap {width:725px; margin:0 auto; background:url(images/bg-body.gif) no-repeat; min-height:720px; height:auto !important; height:720px; position:relative;}
#content {width:725px; padding:30px 0 20px 5px;}
#text {width:468px;}
#sidebar {float:right; width:241px; padding:0 3px 0 0;}
#address {padding:8px 0 0 0;  color:#07598a; font-size:11px; line-height:14px; width:178px; float:right; border-top:1px dashed #6c6d64; border-bottom:1px dashed #6c6d64; margin-top:20px;}
#teamdentist {padding:66px 0 0 0; background:url(images/bg-team-dentist.gif) no-repeat 0 18px; text-align:center; clear:both; width:181px; height:170px; float:right;}
#footerwrap {width:100%; background:url(images/tile-footer.gif) repeat-x #eff0e9; clear:both; padding:20px 0; height:158px;}
#footer {width:720px; margin:0 auto; font-size:11px; line-height:13px; padding-left:5px}
#footernav {float:right; width:224px; text-align:right; padding:0 6px 0 100px;}
#img {height:262px;}

/* HEADERS ---------- */
h1 {background-repeat: no-repeat; height: 70px; width:306px; text-indent: -999em; margin: 0; padding:0;}
#content h2 {font-size:14px; color:#07598a; padding:0; margin:0;}
#footer h2 {font-size:11px; color:#07598a; font-weight:normal; margin-top:6px;}
h1#logo {
margin: 0 0 0 293px;
padding: 0;
background-repeat: no-repeat; 
width: 431px;/* this width reflects the width of the logo image */
height: 141px; /* 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: 141px;/*same height as logo h1*/ 
width: 431px;/*same width as logo h1*/}

/* CLASSES ---------- */
#footer .sesame {color:#b0b7c1; font-weight:bold;}
.img {border:#FFF 1px solid; margin:0 0 10px 10px; float:right;}
.animation {margin:0 0 10px 10px; float:right;}
.right {float:right;}
.left {float:left;}
.top  {color:#e4a732; font-size:11px; font-weight:bold;}
.hide {display:none;}
.flash {width:722px; height:268px; margin-top:88px;}
.flashp {color:#000; background-image: url(images/1.jpg); text-align:center; padding:20px 20px 197px 20px;}
.block {display:block;}
.listnone {list-style:none;}
.center {text-align:center;}
.clear {clear:both;}
.breadcrumbs, .breadcrumbs a {font-weight:bold; color:#FFF; font-size:11px; clear:both;}
.sub {margin-top:94px;}

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


/* NAVIGATION MAIN ---------- */
ul#nav {list-style: none; padding: 0; margin:0; width:725px; position:absolute; top:191px; z-index:70; clear:both;}

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

/* Set the image for each nav item */
#aboutus {background: url(images/nav-about-us.gif); width:92px}
#newpatients {background: url(images/nav-new-patients.gif); width:126px}
#treatmentoptions {background: url(images/nav-treatment-options.gif); width:170px}
#sportsdentistry {background: url(images/nav-sports-dentistry.gif); width:156px}
#contactus {background: url(images/nav-contact-us.gif); width:113px}
#home {background: url(images/nav-home.gif); width:65px}

/* Shift the image position up to show the active state */
#nav a:hover, #nav .active, #nav li:hover, #nav li.sfhover, 
#nav li:hover #aboutus, #nav li.sfhover #aboutus, 
#nav li:hover #newpatients, #nav li.sfhover #newpatients, 
#nav li:hover #treatmentoptions, #nav li.sfhover #treatmentoptions, 
#nav li:hover #sportsdentistry, #nav li.sfhover #sportsdentistry, 
#nav li:hover #home, #nav li.sfhover #home, 
#nav li:hover #contactus, #nav li.sfhover #contactus {background-position:0 -38px;}

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

#nav, #nav ul {list-style: none; margin: 0; }
#nav li {display: inline; }
#nav li ul {background: #07598a; left: -999em; padding: 0; position: absolute; z-index: 1;  border:1px solid #FFF;}
#nav li ul li { float:none;}
#nav li:hover ul, #nav li.sfhover ul {left: auto; margin: -2px 0 0 13px; color:#FFF;}
#nav ul li a {height:25px; margin: 0; text-decoration: none; width: 202px; text-indent:0; color:#FFF; font-size:11px;	padding-left:5px;  text-transform:uppercase;}
#nav ul li a:hover { color:#89d301;}



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

ul#logins {height: 17px; width:178px; list-style: none; padding:0; margin:0 0 0 0;}

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

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

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

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

#anatomy-of-a-tooth-diagram {background: url(images/anatomy-of-a-tooth/anatomy-of-a-tooth-bg.gif); height: 525px; position: relative; width: 300px}
#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}