/* HTML, BODY ---------- */
html {height: 100%;}
body {background: #ececec url(../images/tile.gif) repeat-x 0 0; margin: 0}
* {margin:0; padding:0;}
/* TEXT ---------- */
body {color: #000; font: 12px/18px Tahoma, Helvetica, sans-serif; text-align:left;}
p {padding: 0px 0px 15px 0;}
/* HEADERS ---------- */
h1{ padding:17px 0 5px 0px; background-repeat: no-repeat; background-position: bottom left; height: 61px; overflow: hidden; text-indent: -999em;}
h2{color: #528950; margin: 0 0 10px 0; font-size:14px;}
h3{color: #528950; font-size:12px; margin: 0;}
/* LISTS ---------- */
ol, ul {padding:0 0 10px 20px;}
/* LINKS ---------- */
a {color: #528950; text-decoration: underline}
a:hover {color: #528950; text-decoration: none; font-weight:normal;}
* #logo {position:absolute; top:5px; left:52px; width: 239px; height: 298px; display: block; z-index: 99;}
#logo a {position:absolute; top:5px; left:52px; width: 239px; height: 298px; display: block; }
#footer a {color: #92be90; font-size: 10px;}
/* top-links ----------*/
* #top-links {position: absolute; top: 0; left: 487px;}
#top-links a {display: block; overflow: hidden; text-indent: -999px; height: 140px;}
#top-links ul{padding:0;}
#top-links li {display: inline; float: left;}
* #patient-login { background: url(../images/patient-login.gif) no-repeat 0 0; width: 191px; z-index:100;}
* #doctor-login {background: url(../images/dr-login.gif) no-repeat 0 0; width: 206px; z-index: 100;}
#top-links ul li:hover a, #top-links a:hover, #top-links .active {background-position: 0 -140px}
#top-links li.active a {background-position: 0 -140px;}
/* nav ---------- */
* #nav-container{background: url(../images/nav-tile.gif) repeat-y 0 0; position: absolute; top:349px ; left: 57px; display:block; width:236px; height: 475px; z-index: 80;}
* #nav{position:absolute; top:0; left:0; padding:27px 0 0 5px; width:236px; display:block; z-index: 90;background: url(../images/nav-top.gif) no-repeat 0 0; }
#nav a {display: block; overflow: hidden; text-indent: -999px; width: 218px;}
#nav ul{padding:0;}
* #meet-the-doctors {background: url(../images/meet-doctors.gif) 0 0; height: 43px;}
* #meet-the-team {background: url(../images/meet-team.gif) 0 0; height: 39px;}
* #patient-information {background: url(../images/patient-info.gif) 0 0; height: 42px;}
* #testimonials {background: url(../images/testimonials.gif) 0 0; height: 40px;}
* #dental-services {background: url(../images/dental.gif) 0 0; height: 41px;}
* #improve-your-smile {background: url(../images/improve.gif) 0 0; height: 39px;}
* #contact-us {background: url(../images/contact.gif) 0 0; height: 39px;}
* #home {background: url(../images/home.gif) 0 0; height: 45px;}
#nav ul li:hover a, #nav li.sfhover a,#nav a:hover, #nav .active {background-position: -218px 0}
#nav li.active a, #nav-with-sub li.active a {background-position: -218px 0;}
/* DROP-DOWN-NAVIGATION ----------------*/
#nav li {display: inline; z-index:95; margin:0; padding:0;}
#nav li ul {margin: -39px 0 0 218px;padding: 0; width: 150px; position: absolute; background: #52894f url(../images/subnav-bg.gif) repeat-y 0 0; left: -999em; font-size: 11px; height: auto; border: 1px solid #000; line-height:20px;}
#nav li ul a {list-style-image:none; width: 150px; color: #000; text-indent: 20px; text-decoration: none; height: auto;padding:0;}
#nav li:hover ul, #nav li.sfhover ul { left: auto;display:block;z-index:95;}
#nav li:hover ul a:hover, #nav li.sfhover ul a:hover {color: #000; background: #92be90;}
/* SUBNAV ----------------*/
* .sub_nav {color: #528950;}
.sub_nav a{color: #528950; text-decoration: underline;}
.sub_nav a:visited {text-decoration: underline;}
.sub_nav a:hover, .sub_nav a.active {font-weight:normal; text-decoration:none;}
/* LAYOUT ---------- */
* .clear{clear:both;}
* .hide {display:none;}
.flash-replaced .alt {display: none;}
div.hr { background: #3c362e; clear: both; height: 1px; margin: 20px 0; width: 100%; }
div.hr hr { display: none; }
* #wrapper {width: 885px; margin: 0 auto; position: relative;}
* #main {background: url(../images/body-tile.gif) repeat-y 0 0; width: 868px;}
* #header {height: 350px; width: 875px; display:block; background: url(../images/header-bg.jpg) no-repeat 0 0;}
* #office-address{position: absolute; top: 303px; left:120px; font-size: 11px; line-height:14px; color:#fff; text-align: center; z-index: 96;}
* #dr-list {position: absolute; top: 355px; left: 0; z-index: 95; background: url(../images/nav-bottom.gif) no-repeat bottom left; display: block; width: 236px; height: 120px;}
* #dr-list p{padding: 25px 0 0 0;font-size: 11px; line-height:14px; color:#fff; text-align: center; font-weight:bold;}
* #mid{background: #f2efdc url(../images/nav-tile.gif) repeat-y 0 0; }
* #content{background: url(../images/text-top-bg.jpg) no-repeat 0 0; width:491px; padding: 0 55px 30px 329px; min-height: 477px; _height: 477px;}
* #flash-home{border:none; z-index:0; position: absolute; top: 0; left:11px;}
* #rate-your-smile{border:1px solid #51672a; width: 198px; padding:10px; float: right; margin: 0 0 10px 10px; background:#fff;}
#rate-your-smile h3{text-decoration:underline; font-weight:bold;}
* #footer {background: url(../images/footer-bg.png) no-repeat 0 0; color: #92be90; text-align: center; display: block; width:868px; height:159px; padding: 30px 0 20px 0; font-size: 11px;}
/* IE 6 HACK ----------*/
*html #footer{background: url(../images/footer-bg.gif) no-repeat 0 0;}
#footer p{font-size: 11px; padding:0 40px 15px 40px; line-height:14px;}
/* Shortcuts ----------*/
/* Image Replacement -- add class="replace" to root element, i.e. and add a bg image*/
* .replace {letter-spacing : -1000em;line-height: 0;overflow: hidden;line-height: 0;text-indent: -999em;}
/* Just for Opera, but hide from MacIE */
/*\*/html>body .replace { letter-spacing : normal;text-indent : -999em;overflow : hidden;}
/* End of hack */
/* RESOURCES ---------- */
dl.logos, dl.logos dt, dl.logos dd {list-style:none;margin:0;padding:0;}
dl.logos {padding:10px;}
dl.logos dd {border-bottom:1px solid #CCC;margin:0;padding:10px 0 5px 0;width:50%;}
dl.logos span {font-size: 16px; font-weight:bold;}
/* IMAGES ---------- */
img {border:none;}
/*right and left floating image with border*/
* .right {float:right; border: 1px solid #51672a; margin-left:10px;margin-bottom:10px;}
* .left {float:left; border: 1px solid #51672a; margin-right:10px;margin-bottom:10px;}
* .place-image { float:right; border: 1px solid #51672a; margin: 0 0 10px 10px; padding:0; width: 218px; height: 215px;}
* .img-border { border: 1px solid #51672a; margin-bottom: 10px;}
/* 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}
/* THE GAME ROOM ---------- */
div#sesame-game {
background: #000;
line-height: 0;
margin: 10px auto;
text-align: center;
width: 400px}
ul#sesame-games {
list-style: none;
margin: 0;
padding: 0}
ul#sesame-games li {
clear: both;
display: block}
ul#sesame-games img {
border: 0;
margin: 0 0 10px 10px}
ul#sesame-games a.button {
float:right;
height:85px;
width:200px}
ul#sesame-games p {
padding-bottom: 1em}
/* LOCATION ---------- */
iframe {border: 1px solid #51672a; margin-bottom:20px;}
/* MEDIA CENTER ---------- */
h2.media-center {background:#000033; color:#FFF; margin:0; padding:5px;}
div.media-center {background:#336699; color:#FFF; display:inline-block; margin-bottom:10px; overflow:auto; padding:10px;}
div.media-center a {color:#FFF;}
div.media-center img {border:1px solid #FFF;}
/* Global form styles */
fieldset {border: none; padding: 9px 0;}
fieldset div {clear: both;}
*html fieldset ol{margin-left: 10px;}
* .form-header {border-bottom: 1px solid #528950;/*optional, change color to match site*/}
.form-header h3 {margin: 0 0 9px;}
.form-header p {margin: 0 0; padding-bottom: 18px;}
* .form-footer {padding-top: 18px; text-align: center; border-top: 1px solid #528950;/*optional, change color to match site*/}
.form-footer button {/*these styles control the look of the button, change as necessary*/
clear:both;/*do not change, forces button to sit below floated elements*/
margin: 9px auto;/*do not change, controls positioning*/
display: block;
width:125px;
height:31px;
background:#5f5e5e;/* customize me! */
border: 1px solid #528950;/* customize me! */
text-align:center;
line-height:31px;
color:#ffffff;/* customize me! */
font-size:12px;
font-weight:bold;}
/* appointment form */
* .appointment-form {
margin: 0 0 18px;
width: 470px;
padding: 10px;
border:solid 2px #528950;/*optional, change color to match site*/
background:#fafafa;/*optional, change color of background*/}
.appointment-form fieldset {border: none; padding: 9px 0;}
.appointment-form label {/*floats labels left*/
font-size: 12px;
display:block;
font-weight:bold;
text-align:right;
width:200px;
float:left;
line-height: 18px;
padding-top: 4px;}
.appointment-form label span {/*sits below labels; holds instructions*/
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:200px;}
.appointment-form input, .appointment-form select, .appointment-form textarea {
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #528950;/* customize me! */
width:200px;
margin:9px 0 9px 10px;
background: #ffffff;}
.appointment-form p.radio, .appointment-form p.verification {
clear: both;
margin: 9px 0 9px 210px;
font-size: 12px;}
.appointment-form p.radio-float {
clear: none;
float:left;
width: 200px;
padding:0;
margin:9px 0 9px 0;}
.appointment-form p.verification {margin-top: 0;}
.appointment-form p.verification img {border: 1px solid #528950;}/* customize me! */
.appointment-form p.radio input, .appointment-form p.radio-float input {
float: none;
width: auto;
margin: 0 0 0 10px;
padding: 4px 2px;}
/* comment form */
* .comments {
margin: 0 0 18px;
width: 470px;
padding: 10px;
border: solid 2px #528950;/*optional, change color to match site*/
}
.comments li {font-weight: bold;}
.comments label {/*floats labels left*/
font-size: 12px;
display:block;
font-weight:bold;
text-align:right;
width:200px;
float:left;
padding-top: 4px;}
.comments label span {/*sits below labels; holds instructions*/
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:200px;}
.comments .label-block label {float: none; clear: both; width: 100%; text-align: left;}
.comments input, .comments textarea {
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #528950;/* customize me! */
width:200px;
margin:9px 0 9px 10px;
background: #ffffff;}
.comments p.verification {
clear: both;
margin: 9px 0 9px 210px;
font-size: 12px;}
.comments p.radio-float {
clear: none;
float:left;
width: 200px;
padding:0;
margin:9px 0 9px 0;}
.comments p.verification {margin-top: 0;}
.comments p.verification img {border: 1px solid #528950;}/* customize me! */
.comments p.radio input, .comments p.radio-float input {
float: none;
margin: 0 0 0 10px;
padding: 4px 2px;
width: auto;}
.comments .radio {text-align: left; font-weight: normal;}
.comments .comments-box label {float: none; font-weight: normal; display: block; text-align: left;}
.comments .comments-box textarea {float: none; margin-left: 0; width:95%;}
/* referral form */
* .referral-form {
margin: 0 0 18px;
width: 470px;
padding: 10px;
border:solid 2px #528950;/*optional, change color to match site*/
background:#fafafa;}/*optional, change color of background*/
.referral-form fieldset {border: none; padding: 9px 0;}
.referral-form label {/*floats labels left*/
font-size: 12px;
display:block;
font-weight:bold;
text-align:right;
width:200px;
float:left;
line-height: 18px;
padding-top: 4px;}
.referral-form label span {/*sits below labels; holds instructions*/
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:200px;}
.referral-form input, .referral-form textarea {
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #528950;/* customize me! */
width:200px;
margin:9px 0 9px 10px;
background: #ffffff;}
.referral-form p.radio, .referral-form p.verification {
clear: both;
margin: 9px 0 9px 210px;
font-size: 12px;}
.referral-form p.radio-float {
clear: none;
float:left;
width: 200px;
padding:0;
margin:9px 0 9px 0;}
.referral-form p.verification {margin-top: 0;}
.referral-form p.verification img {border: 1px solid #528950;}/* customize me! */
.referral-form p.radio input, .referral-form p.radio-float input {
float: none;
width: auto;
margin: 0 0 0 10px;
padding: 4px 2px;}
/* edit.com */
ul, ol {
margin-top:0px;
margin-bottom:0px;
}
.NormalText, body, td {
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
font-weight: normal;
text-decoration: none;
text-transform: none;
font-style: normal;
}
.SubHeader {
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #528950;
font-weight: bold;
}
.SubjectHeader {
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #528950;
font-weight: bold;
}
.PageTitle {
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 34px;
line-height: 38px;
color: #FFF;
font-weight: normal;
font-style: italic;
}
* .WhiteText {
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 14px;
color: #FFF;
font-weight: bold;
}
* #edrlist {padding-left: 50px;}