* { margin: 0; outline: none; padding: 0; }
body { background: #f7e092 url(../images/bg.jpg) top repeat-x; }

/* - - - - - - - - - - TEXT - - - - - - - - - - */
body, form, input, textarea { color: #20416c; font-family: Verdana, "Verdana Ref", Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", sans serif; font-size: 12px; }
p { color: #20416c; line-height: 22px; margin: 15px 0; }
p.link { clear: right; font-size: 11px; line-height: 16px; }
p.top-link { clear: both; font-size: 11px; line-height: 14px; text-align: right; }
blockquote { margin: 10px 40px; padding: 0; }
body.site-map #content ul { color: #750276; font-size: 12px; line-height: 12px; list-style: disc; list-style-image: url(../images/list.gif); margin: 10px 20px; }
body.site-map #content ul a { color: #750276; }
body.site-map #content ul li { margin: 10px 0; }
body.site-map #content ul ul { color: #20416c; font-size: 12px; line-height: 12px; list-style: circle; list-style-image: url(../images/list.gif); margin: 10px 30px; }
body.site-map #content ul ul a { color: #20416c; font-weight: normal; }
body.site-map #content ul ul li { margin: 10px 0; }
div.hr { background: #750276; clear: both; height: 1px; margin: 20px 0; padding: 0; width: 100%; }
div.hr hr { display: none; }
#content ol { font-size: 11px; line-height: 16px; list-style: decimal; margin: 20px 40px; }
#content ol li { margin: 10px 0; }
#content ul { font-size: 11px; line-height: 16px; list-style: disc; list-style-image: url(../images/list.gif); margin: 20px 40px; }
#content ul li { margin: 10px 0; }
#content ul li ul { line-height: 12px; list-style: circle; list-style-image: url(../images/list.gif); margin: 10px 30px; }
#content ul li ul li { margin: 10px 0; }
div#subnav ul { color: #fff; font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; font-size: 11px; line-height: 20px; list-style: circle; margin: 0 0 0 30px; }
div#subnav ul a { color: #fff; font-weight: normal; }
div#subnav ul a:hover, div#subnav ul li.active a { font-weight: bold; text-decoration: underline; }
#footer p { color: #20416c; font-size: 11px; line-height: 16px; }
#footer p.sesame-link { font-size: 11px; }
#rate-your-smile-sidebar p { font-size: 11px; line-height: 14px; }
#rate-your-smile-sidebar h3 { margin: 0; }

/* - - - LINKS - - - */
a { color: #750276; font-weight: bold; text-decoration: none; }
a:hover { text-decoration: underline; }
p.top-link a { background: url(../images/back-to-top.gif) no-repeat; color: #20416c; padding-left: 12px; text-decoration: none; }
p.top-link a:hover { color: #20416c; text-decoration: underline; }
#footer a { color: #fff; }
#footer p.sesame-link a { color: #fff; }

/* - - - HEADERS - - - */
h1 { background: no-repeat; height: 90px; margin-top: 64px; overflow: hidden; text-indent: -9999px; }
h1.home { background: no-repeat; height: 120px; margin-top: 0; overflow: hidden; text-indent: -9999px; }
h2 { color: #770278; font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; font-size: 18px; margin: 10px 0; }
h2#subnav-title { color: #fff; font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; font-size: 15px; margin: 30px 0 10px 15px; }
h3 { color: #20416c; font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; font-size: 14px; margin: 10px 0; }
h4 { color: #fff; font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; margin: 5px 0; }

/* - - - - - - - - - - IMAGES - - - - - - - - - - */
img { border: 0; display: block; }
img.center { border: 1px solid #f0d127; clear: both; margin: 0 auto; }
img.left { clear: left; float: left; margin: 0 10px 10px 0; }
img.right { border: 1px solid #f0d127; clear: right; float: right; margin: 10px 0 20px 20px; }
img.auto { clear: right; float: right; margin: 10px 0 20px 20px; }
.flash-replaced .alt { display: block; height: 1000px; position: absolute; overflow: hidden; width: 0; }
.map { border: 1px solid #f0d127; height: 350px; overflow: hidden; width: 533px; }
#content img.link { border: 1px solid #750276; float: left; margin: 0 10px 0 0; }
#navigation-container img.link { clear: left; margin: 10px auto 10px; }

/* - - - - - - - - - - LAYOUT - - - - - - - - - - */
#container { background: #4b014c url(../images/container-bg.gif) repeat-y; margin: 0 auto; width: 780px; }
#content { background: #eef2f9 url(../images/content-bg.jpg) top center no-repeat; float: left; min-height: 575px; padding: 0 20px; width: 535px; }
#header a { background: url(../images/header.jpg) no-repeat; display: block; height: 214px; overflow: hidden; text-indent: -9999px; width: 780px; }
#footer { background: #476c9c url(../images/footer-bg.jpg) top center no-repeat; clear: both; padding: 75px 15px 10px; width: 750px; }
#navigation-container { background: #4b014c url(../images/nav-bg.jpg) top center no-repeat; display: inline; float: left; width: 205px; }
#rate-your-smile-sidebar { float: right; padding-left: 20px; width: 180px; }
.clear { clear: both; }

/* - - - FLASH - - - */
#flash-home { height: 277px; width: 535px; }
#flash-brushing-and-flossing { height: 300px; margin: 20px 0; width: 500px; }

/* - - - - - - - - - - NAVIGATION - - - - - - - - - - */
#nav { height: 336px; margin: 64px 0 30px 0; width: 205px; }
#nav ul { list-style: none; width: 205px; }
#nav li { float: left; }
#nav a { display: block; height: 42px; overflow: hidden; text-indent: -9999px; width: 205px; }

/* - - - NAVIGATION IMAGES - - - */
a#about-our-office { background: url(../images/nav/about-our-office.jpg); }
a#for-new-patients { background: url(../images/nav/for-new-patients.jpg); }
a#cosmetic-dentistry { background: url(../images/nav/cosmetic-dentistry.jpg); }
a#general-dentistry { background: url(../images/nav/general-dentistry.jpg); }
a#pediatric-dentistry { background: url(../images/nav/pediatric-dentistry.jpg); }
a#patient-education { background: url(../images/nav/patient-education.jpg); }
a#contact-us { background: url(../images/nav/contact-us.jpg); }
a#home { background: url(../images/nav/home.jpg); }

/* - - - NAVIGATION ROLLOVER EFFECTS - - - */
#nav ul a:hover, #nav ul li.active a { background-position: 0 -42px; }
#nav ul li:hover #about-our-office, #nav ul li.sfhover #about-our-office,
#nav ul li:hover #for-new-patients, #nav ul li.sfhover #for-new-patients,
#nav ul li:hover #cosmetic-dentistry, #nav ul li.sfhover #cosmetic-dentistry,
#nav ul li:hover #general-dentistry, #nav ul li.sfhover #general-dentistry,
#nav ul li:hover #pediatric-dentistry, #nav ul li.sfhover #pediatric-dentistry,
#nav ul li:hover #patient-education, #nav ul li.sfhover #patient-education,
#nav ul li:hover #contact-us , #nav ul li.sfhover #contact-us { background-position: 0 -42px; }

/* - - - SUBNAVIGATION - - - */
#nav ul li ul { background: #3a6db1 url(../images/subnav-bg.jpg) bottom center no-repeat; border-bottom: 1px solid #3a6db1; border-right: 1px solid #3a6db1; display: block; left: -9999px; list-style: none; position: absolute; z-index: 1; width: 179px; }
#nav ul li:hover ul, #nav ul li.sfhover ul { left: auto; margin: -42px 0 0 205px; }
#nav ul li ul li { border-bottom: 1px solid #6aa1ea; display: block; margin-left: 12px; width: 167px; }
#nav ul li ul li.first { padding-top: 10px; }
#nav ul li ul li.last { border: none; padding-bottom: 10px; }
#nav ul li ul li a { color: #fff; font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; height: 22px; line-height: 22px; text-decoration: none; text-indent: 0; width: 167px; }

/* - - - SUBNAVIGATION ROLLOVER EFFECTS - - - */
#nav ul li ul li a:hover, #nav ul li ul li.active a { color: #fff; font-weight: bold; text-decoration: underline; }

/* - - - - - - - - - - TOP NAVIGATION - - - - - - - - - - */
#topnav { margin: 54px 0 0 358px; position: absolute; width: 261px; }
#topnav ul { list-style: none; width: 261px; }
#topnav li { float: left; }
#topnav a { display: block; height: 20px; overflow: hidden; text-indent: -9999px; width: 124px; }

/* - - - TOP NAVIGATION IMAGES - - - */
a#patient-login { background: url(../images/nav/patient-login.jpg); margin-right: 13px; width: 124px; }
a#doctor-login { background: url(../images/nav/doctor-login.jpg); width: 124px; }

/* - - - TOP NAVIGATION ROLLOVER EFFECTS - - - */
#topnav ul a:hover, #topnav ul li.active a { background-position: 0 -20px; }

/* - - - - - - - - - - INVISALIGN TEEN - - - - - - - - - - */
#invisalign-teen-sidebar { background:#fff; border:solid 1px #20416c; clear:right; float:right; margin:0 0 15px 15px; padding:0; width:275px; }
#invisalign-teen-sidebar p { margin:15px 0; line-height: 16px; padding:0 15px; }
#invisalign-teen-sidebar h3 { background:#97AFC2; color:#fff; margin:0; padding:15px; }
#invisalign-teen-sidebar a { color:#036; font-weight: normal; }
img.invisalign-teen-right { border:solid 1px #20416c; clear:right; float:right; margin:0 0 15px 15px; }
img.invisalign-teen-left { border:solid 1px #20416c; float:left; margin:0 15px 20px 0; }
img.invisalign-teen-thumb { border:solid 1px #20416c; clear:left; float:left; margin:0 10px 10px 0; }

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

/* - - - - - - - - - - FORMS - - - - - - - - - - */

/* Global Form Styles */
fieldset { border: none; padding: 10px 0; }
fieldset div { clear: both; }
.form-header { border-bottom: 1px solid #639cce; }
.form-footer { border-top: 1px solid #639cce; padding-top: 20px; text-align: center; }
.form-footer button { background: #750277; border: 1px solid #4B014C; clear: both; color: #fff; display: block; font-size: 12px; font-weight: bold; height: 32px; line-height: 32px; margin: 10px auto; text-align: center; width: 125px; }

/* Comments Form */
.comment-form-content { background: #fafafa; border: solid 2px #639cce; margin: 0 auto; padding: 10px; width: 475px; }
.comment-form-content li { font-weight: bold; }
.comment-form-content label { display: block; float: left; font-size: 12px; font-weight: bold; padding-top: 5px; text-align: right; width: 200px; }
.comment-form-content label span { color: #666; display: block; font-size: 11px; font-weight: normal; text-align: right; width: 200px; }
.comment-form-content .label-block label { clear: both; float: none; text-align: left; width: 100%; }
.comment-form-content input, .comment-form-content textarea { background: #fff; border: solid 1px #639cce; float: left; font-size: 12px; margin: 10px 0 10px 10px; padding: 5px 2px; width: 200px; }
.comment-form-content p.verification { clear: both; font-size: 12px; margin: 0 0 10px 210px; }
.comment-form-content p.radio-float { clear: none; float: left; margin: 10px 0; padding: 0; width: 200px; }
.comment-form-content p.verification img { border: 1px solid #639cce; }
.comment-form-content p.radio input, .comment-form-content p.radio-float input  { background: none; border: none; float: none; margin: 0 0 0 10px; padding: 5px 2px; width: auto; }
.comment-form-content .radio { font-weight: normal; text-align: left; }
.comment-form-content .comment-form-box label { display: block; float: none; font-weight: normal; text-align: left; }
.comment-form-content .comment-form-box textarea { float: none; margin-left: 0; width: 95%; }
.comment-form-content ol { padding: 0 20px; }

/* Refer a Friend Form */
.referral-form-content { background: #fafafa; border: solid 2px #639cce; margin: 0 auto; padding: 10px; width: 475px; }
.referral-form-content fieldset { border: none; padding: 10px 0; }
.referral-form-content label { display: block; float: left; font-size: 12px; font-weight: bold; line-height: 18px; padding-top: 5px; text-align: right; width: 200px; }
.referral-form-content label span { color: #666; display: block; font-size: 11px; font-weight: normal; text-align: right; width: 200px; }
.referral-form-content input,.referral-form-content textarea { background: #fff; border: solid 1px #639cce; float: left; font-size: 12px; margin: 10px 0 10px 10px; padding: 5px 2px; width: 200px; }
.referral-form-content p.radio,.referral-form-content p.verification { clear: both; font-size: 12px; margin: 10px 0 10px 210px; }
.referral-form-content p.radio-float { clear: none; float: left; margin: 10px 0; padding: 0; width: 200px; }
.referral-form-content p.verification { margin-top: 0; }
.referral-form-content p.verification img { border: 1px solid #639cce; }
.referral-form-content p.radio input,.referral-form-content p.radio-float input { background: none; border: none; float: none; margin: 0 0 0 10px; padding: 5px 2px; width: auto; }

/* Appointment Request Form */
.appointment-form-content { background: #fafafa; border: solid 2px #639cce; margin: 0 auto; padding: 10px; width: 475px; }
.appointment-form-content fieldset { border: none; padding: 10px 0; }
.appointment-form-content label { display: block; float: left; font-size: 12px; font-weight: bold; line-height: 18px; padding-top: 5px; text-align: right; width: 200px; }
.appointment-form-content label span { color: #666; display: block; font-size: 11px; font-weight: normal; text-align: right; width: 200px; }
.appointment-form-content input,.appointment-form-content select,.appointment-form-content textarea { background: #fff; border: solid 1px #639cce; float: left; font-size: 12px; margin: 10px 0 10px 10px; padding: 5px 2px; width: 200px; }
.appointment-form-content p.radio,.appointment-form-content p.verification { clear: both; font-size: 12px; margin: 10px 0 10px 210px; }
.appointment-form-content p.radio-float { clear: none; float: left; margin: 10px 0; padding: 0; width: 200px; }
.appointment-form-content p.verification { margin-top: 0; }
.appointment-form-content p.verification img { border: 1px solid #639cce; }
.appointment-form-content p.radio input,.appointment-form-content p.radio-float input { background: none; border: none; float: none; margin: 0 0 0 10px; padding: 5px 2px; width: auto; }
#found-other input { background: #fff0B2; margin-left: 210px; }

/* Errors */
.referral-form-content span.required,.appointment-form-content span.required,.comment-form-content span.required,.contact-form-content span.required { color: #f00; display: inline; font-size: 12px; font-weight: bold; text-align: inherit; width: auto; }
input.error,select.error,textarea.error { background: #fefda1; border: 1px solid #f00; color: #f00; }
div.error { background: url(../images/validate-fail.png) 0 0 no-repeat; color: #f00; display: block; font-size: 11px; height: 15px; padding-left: 18px; width: 220px; margin: 0 0 10px 225px; }
div.success { background: url(../images/validate-pass.png) 0 0 no-repeat; color: #000; display: block; font-size: 11px; height: 15px; padding-left: 18px; width: 220px; margin: 0 0 10px 225px; }
p.radio-float div.error { float: left; width: 220px; margin: 5px 0 5px 10px; }
.contact-form-content div.error,.contact-form-content div.success { width: 220px; margin: 0 0 10px 10px; }

/* - - - - - - - - - - IE6 UPGRADE ALERT - - - - - - - - - - */
#alert { display: none; background-color: #fff; width: 400px; color: #333; text-align: left; font-size: 11px; letter-spacing: normal; font-weight: bold; padding: 15px 15px 0 15px; border: solid 2px #a52003; position: absolute; z-index: 5000; top: 10px; left: 10px; }
#alert p { color: #333; margin: 0 0 15px 0; line-height: 14px; padding: 0; }
#alert ul { margin: 0 0 15px 25px; }


/* - - - - - - - - - - FLASH - - - - - - - - - - */
.flash-replaced .alt {
display: block;
width: 0px;
height: 0px;
position: absolute;
overflow: hidden;}
#alert a.upgrade { float: left; margin: 0 10px 0 0; }
#alert .right { float: right; }
#alert span.red { color: #a52003; }