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

/* - - - - - - - - - - TEXT - - - - - - - - - - */
body, form, input, textarea { color: #36190f; font-family: 'trebuchet ms', trebuchet, sans-serif; font-size: 12px; }
p { color: #36190f; line-height: 22px; margin: 10px 0; }
p.top-link { clear: both; font-size: 11px; line-height: 14px; text-align: right; }
p.address { color: #8c3315; font-size: 14px; }
span.office { color: #36190f; font-size: 14px; font-weight: bold; }
blockquote { margin: 10px 40px; padding: 0; }
body.site-map #content ul { color: #36190f; 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: #36190f; }
body.site-map #content ul li { margin: 10px 0; }
body.site-map #content ul ul { color: #36190f; 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: #374d17; font-weight: normal; }
body.site-map #content ul ul li { margin: 10px 0; }
div.hr { background: url(../images/hr.gif) repeat-x left; clear: both; height: 1px; margin: 10px 0; padding: 0; width: 100%; }
div.hr hr { display: none; }
#content ul { line-height: 14px; list-style: disc; list-style-image: url(../images/list.gif); margin: 10px 30px; }
#content ul li { margin: 10px 0; }
#content ul li ul { line-height: 14px; list-style: circle; list-style-image: url(../images/list.gif); margin: 10px 30px; }
#content ul li ul li { margin: 10px 0; }
#footer p { color: #fff; font-size: 12px; line-height: 14px; }

/* - - - LINKS - - - */
a { color: #374d17; text-decoration: none; font-weight: bold; }
a:hover { text-decoration: underline; }
p.top-link a { color: #000; text-decoration: underline; }
p.top-link a:hover { color: #000; text-decoration: none; }
#footer a { color: #fff; text-decoration: none; }
#footer a:hover { text-decoration: underline; }

/* - - - HEADERS - - - */
h1 { background: no-repeat; height: 76px; margin: 0 0 20px; overflow: hidden; text-indent: -9999px; }
h2 { background: url(../images/hr.gif) repeat-x bottom left; color: #36190f; font-size: 18px; font-weight: normal; margin: 20px 0 10px; text-transform: uppercase; }
h3 { color: #36190f; font-size: 14px; margin: 10px 0; }
h4 { color: #fff; font-size: 12px; font-weight: normal; margin: 5px 0; }

/* - - - - - - - - - - IMAGES - - - - - - - - - - */
img { border: 0; display: block; }
img.center { clear: both; margin: 0 auto; }
img.left { clear: left; float: left; margin: 0 10px 10px 0; }
img.right { clear: right; float: right; margin: 0 0 10px 10px; }
img.auto {  }
img.link { float: left; margin: 10px 20px 10px 0; }
img.clear { clear: left; }
#content img.group { border: none; clear: both; margin: 0 auto; }
.flash-replaced .alt { display: block; height: 1000px; position: absolute; overflow: hidden; width: 0; }
.map { border: 1px solid #2d2012; margin: 10px 0; }
.image-wrap { background: #f2ebd7 url(../images/image-wrap.jpg) repeat-x top; clear: right; float: right; padding: 0 0 20px 20px; }
#content img { border: 1px solid #2d2012; }

/* - - - - - - - - - - LAYOUT - - - - - - - - - - */
#container { background: #f2ebd7; margin: 0 auto; width: 780px; }
#content { background: url(../images/content-bg.jpg) top no-repeat; float: left; padding: 50px 20px 20px 0; width: 444px; }
#header { background: url(../images/header.jpg) no-repeat 0 60px; display: block; height: 266px; margin: 0 auto; width: 780px; }
#footer { background: url(../images/footer-bg.jpg) top no-repeat; clear: both; margin: 0 auto; padding: 80px 0 10px; width: 780px; }
#footer-container { background: url(../images/footer-container-bg.jpg) top repeat-x; clear: both; height: 250px; width: 100%; }
#links-container { height: 255px; margin: 30px 0 50px; }

/* - - - FLASH - - - */
#flash-home { background: url(../images/flash-home-bg.jpg) no-repeat; height: 158px; margin: 0 auto; padding: 10px 1px 0 1px; width: 442px; }
#flash-logo { height: 206px; margin: 60px 0 0 0; position: absolute; width: 316px; }
#flash-braces-diagram { height: 333px; margin: 20px 0; width: 444px; }
#flash-common-treatments { height: 266px; margin: 20px 0; width: 444px; }
#flash-emergency-care { height: 266px; margin: 20px 0; width: 444px; }
#flash-office-tour { height: 333px; margin: 20px 0; width: 444px; }
#flash-patient-care-videos { height: 333px; margin: 20px 0; width: 444px; }
#flash-smile-gallery { border: 1px solid #2d2012; height: 280px; margin: 20px auto; width: 200px; }

/* - - - - - - - - - - NAVIGATION - - - - - - - - - - */
#nav-container { background: url(../images/nav-container-bg.jpg) top no-repeat; display: inline; float: left; padding: 0 36px; width: 244px; }
#nav { height: 277px; /*height is normally 317px when patient testimonials are included */ width: 244px; }
#nav ul { list-style: none; width: 244px; }
#nav li { float: left; }
#nav a { display: block; height: 40px; overflow: hidden; text-indent: -9999px; width: 244px; }

/* - - - NAVIGATION IMAGES - - - */
a#about-us { background: url(../images/nav/about-us.jpg); height: 48px; }
a#patient-information { background: url(../images/nav/patient-information.jpg); }
a#braces-101 { background: url(../images/nav/braces-101.jpg); }
a#smile-idol-and-smile-gallery { background: url(../images/nav/smile-idol-and-smile-gallery.jpg); }
a#patient-testimonials { background: url(../images/nav/patient-testimonials.jpg); }
a#contact-us { background: url(../images/nav/contact-us.jpg); }
a#home { background: url(../images/nav/home.jpg); height: 49px; margin-bottom: 20px; }

/* - - - NAVIGATION ROLLOVER EFFECTS - - - */
#nav ul a:hover, #nav ul li.active a { background-position: 0 -40px; }
#nav ul li:hover #about-us { background-position: 0 -48px; }
#nav ul li:hover #patient-information, #nav ul li:hover #braces-101, #nav ul li:hover #contact-us { background-position: 0 -40px; }
#nav ul a#about-us:hover, #nav ul li.active a#about-us { background-position: 0 -48px; }
#nav ul a#home:hover, #nav ul li.active a#home { background-position: 0 -49px; }

/* - - - SUBNAVIGATION - - - */
#nav ul li ul { background: url(../images/subnav-bg.jpg); list-style: none; width: 244px; }
#nav ul li ul li { float: none; }
#nav ul li ul li.first { padding-top: 5px; }
#nav ul li ul li.last { padding-bottom: 5px; }
#nav ul li ul li a { display: block; height: 23px; line-height: 23px; text-indent: -9999px; width: 244px; }
#nav ul li.active ul li a { background-position: 0 0; }

/* - - - SUBNAVIGATION IMAGES - - - */
li.about-dr-rosenzweig a { background: url(../images/nav/about-dr-rosenzweig.jpg); }
li.about-our-team a { background: url(../images/nav/about-our-team.jpg); }
li.about-our-practice a { background: url(../images/nav/about-our-practice.jpg); }
li.office-tour a { background: url(../images/nav/office-tour.jpg); }
li.map-and-directions a { background: url(../images/nav/map-and-directions.jpg); }
li.initial-visit a { background: url(../images/nav/initial-visit.jpg); }
li.oral-hygiene a { background: url(../images/nav/oral-hygiene.jpg); }
li.common-problems a { background: url(../images/nav/common-problems.jpg); }
li.patient-emergencies a { background: url(../images/nav/patient-emergencies.jpg); }
li.orthodontic-faq a { background: url(../images/nav/orthodontic-faq.jpg); }
li.new-patient-forms a { background: url(../images/nav/new-patient-forms.jpg); }
li.treatment-timing a { background: url(../images/nav/treatment-timing.jpg); }
li.types-of-braces a { background: url(../images/nav/types-of-braces.jpg); }
li.parts-of-braces a { background: url(../images/nav/parts-of-braces.jpg); }
li.types-of-appliances a { background: url(../images/nav/types-of-appliances.jpg); }
li.the-suresmile-difference a { background: url(../images/nav/the-suresmile-difference.jpg); }
li.before-and-after a { background: url(../images/nav/before-and-after.jpg); }
li.referrals a { background: url(../images/nav/referrals.jpg); }
li.locations a { background: url(../images/nav/locations.jpg); }

/* - - - SUBNAVIGATION ROLLOVER EFFECTS - - - */
#nav ul li ul li a:hover, #nav ul li ul li.active a { background-position: 0 -23px; }

/* - - - - - - - - - - TOP NAVIGATION - - - - - - - - - - */
#topnav-container { display: block; height: 60px; width: 780px; }
#social-links { margin: 10px 0 0 0px; position: absolute; width: 400px; list-style: none; }
.facebook { float:left; margin-right:15px;}
.blogger { float:left; }
#topnav { margin: 28px 0 0 457px; position: absolute; width: 126px; }
#topnav ul { list-style: none; width: 301px; }
#topnav li { float: left; }
#topnav a { display: block; height: 32px; overflow: hidden; text-indent: -9999px; }

/* - - - TOP NAVIGATION IMAGES - - - */
a#patient-referrals { background: url(../images/nav/patient-referrals.jpg); margin-right: 10px; width: 158px; }
a#patient-login { background: url(../images/nav/patient-login.jpg); margin-right: 7px; width: 126px; }

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

/* - - - - - - - - - - CLEARFIX HACK - - - - - - - - - - */
* html .clearfix { height: 1%; }
html[xmlns] .clearfix{ display: block; }
.clearfix { display: inline-block; }
.clearfix:after { clear: both; content: " "; display: block; height: 0; line-height: 0; visibility: hidden; }

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

/* Global Form Styles */
fieldset { border: none; padding: 10px 0; }
fieldset div { clear: both; }
.form-header { border-bottom: 1px solid #b3a577; }
.form-footer { border-top: 1px solid #b3a577; padding-top: 20px; text-align: center; }
.form-footer button { background: #297ebb; border: 1px solid #18486b; 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; }

/* Refer a Friend Form */
.referral-form-content { background: #fafafa; border: solid 2px #b3a577; margin: 20px 0; padding: 10px; width: 420px; }
.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 #b3a577; 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 #b3a577; }
.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; }

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