/* HTML, BODY ---------- */
html {height: 100%;}
body {background: #fae38c; margin: 0;}
* {margin:0; padding:0;}
/* TEXT ---------- */
body {color: #000; font: 12px/20px Tahoma, Helvetica, sans-serif; text-align:left;}
p {padding: 0px 0 20px 0;}
/* HEADERS ---------- */
h1{padding:0 0 10px 0px; height: 40px;/* this height reflects the height of the heading image */overflow: hidden; text-indent: -999em;} /* hides rich text so only background image shows */
h2{color: #116a75; margin: 0 0 10px 0; font-size:16px;}
h3{color: #116a75; font-size:14px;margin: 0;}
/* LISTS ---------- */
ol, ul {padding:0 0 10px 20px;}
/* LINKS ---------- */
a {color: #116a75; text-decoration: underline}
a:visited {color: #116a75; text-decoration: underline}
a:hover {color: #116a75; text-decoration: none; font-weight:normal;}
#logo a {position:absolute; top:32px; right:48px; margin-left: margin: 0; width: 246px; height: 126px; display: block; background: url(../images/logo.jpg) no-repeat; }
* #harold-s-marks-dds-mscd {position:absolute; top:54px; left:; margin-left: 40px; width: 417px; height: 52px; display: block; background: url(../images/harold-s-marks-dds-mscd.jpg) no-repeat; }
* #welcome {position:absolute; top:137px; left:; margin-left: 34px; width: 753px; height: 97px; display: block; background: url(../images/welcome.jpg) no-repeat; }
* #left-column-phone-number {width: 144px; height: 21px; display: block; background: url(../images/phone-number.gif) no-repeat top right; padding-left: 33px;}
/*IE 6 hack*/
*html #left-column-phone-number {padding-left: 0px;}
* #footer-text {width: 523px; height: 51px; display: block; background: url(../images/footer-text.jpg) no-repeat 0 0; padding: 0 0 23px 0;}
#left-container a {color: #68784e; text-decoration:none;}
#left-container a:visited {color: #68784e; text-decoration:none;}
#left-container a:hover {color: #68784e; text-decoration:underline;}
#footer a {color: #116a75; text-decoration:none;}
#footer a:visited {color: #116a75; text-decoration:none;}
#footer a:hover {color: #116a75; text-decoration:underline;}
/* nav ---------- */
* #nav{padding:0 0 30px 0; width:214px; display:block; z-index: 100; height:390px; text-align:left;}
#nav a {display: block; overflow: hidden; text-indent: -999px; width: 214px;}
#nav ul{padding:0;}
* #patient-login {background: url(../images/login.gif) 0 0; height: 38px;}
* #meet-dr-marks {background: url(../images/dr.gif) 0 0; height: 36px;}
* #tour-our-office {background: url(../images/tour.gif) 0 0; height:36px;}
* #your-first-visit-new-patients {background: url(../images/visit.gif) 0 0; height:36px;}
* #pediatric-dentistry-101 {background: url(../images/101.gif) 0 0; height:36px;}
* #pediatric-dental-emergencies {background: url(../images/emergencies.gif) 0 0; height:36px;}
* #referrals-and-appointment-requests {background: url(../images/referrals.gif) 0 0; height: 36px;}
* #helpful-links {background: url(../images/links.gif) 0 0; height:36px;}
* #just-for-kids {background: url(../images/kids.gif) 0 0; height:36px;}
* #contact-us {background: url(../images/contact.gif) 0 0; height:36px;}
* #home {background: url(../images/home.gif) 0 0; height:36px;}
#nav ul li:hover a, #nav li.sfhover a, #nav .active {background-position: -214px 0}
#nav li.active a, #nav-with-sub li.active a {background-position: -214px 0;}
/* DROP-DOWN-NAVIGATION ----------------*/
#nav li {display: inline; z-index:100; margin:0; padding:0;}
#nav li ul { /* second-level lists */margin: -36px 0 0 203px;padding:0; width: 180px; position: absolute; background: #c2dd98; left: -999em; line-height: 30px; font-size: 12px; height: auto; border: 1px solid #116a75;}
#nav li ul a {list-style-image:none; padding: 0px;width: 180px; color: #116a75; text-indent: 10px; text-decoration: none; height: auto;}
#nav li ul a:visited {color:#116a75;}
#nav li:hover ul, #nav li.sfhover ul {left: auto;display:block;z-index:100;}
#nav li:hover ul a:hover, #nav li.sfhover ul a:hover {color: #c2dd98; background: #116a75; text-decoration:none;}
/* SUBNAV ----------------*/
* .sub_nav {color: #116a75;}
.sub_nav a{color: #116a75; 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; }
* #main {background: url(../images/tile.gif) repeat-y 0 0; width: 839px; margin: 0 auto;}
* #header {height: 273px; width: 839px; display:block; background: url(../images/header.jpg) no-repeat 0 0; position: relative;}
* #left-container{width: 203px; position:absolute; top:243px; left:;margin-left: 28px; color:#68784e; text-align:center}
#left-container p{font-size: 10px; line-height:12px; width: 155px; padding: 10px 0 0 26px;}
* #left-column-address{font-size: 11px;padding: 10px 0 25px 32px; line-height:16px; text-align: left; width: 203px;}
* #content{width:543px; padding: 21px 0 0 255px; min-height: 500px; _height: 500px;}
* #flash-home {padding: 5px 0 0 5px;}
* #spotlight{z-index:1; width: 544px; height: 281px; background: #fff; margin: 0 0 15px 0;}
#spotlight img{border: 5px solid #fff;}
* #footer {background: url(../images/footer.jpg) no-repeat 0 0; color: #116a75; font-size: 10px; line-height: 14px; padding: 105px 0 0 257px; margin: 0 auto; text-align: left; width:582px; height:203px;}
#footer p{width: 544px; padding: 0 0 12px 0;}
/* 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: 3px solid #fff; margin-left:10px; margin-bottom:10px;}
* .left {float:left; border: 3px solid #fff; margin-right:10px; margin-bottom:10px;}
* .place-image {border: 5px solid #fff; margin: 0 0 17px 0;}
/* JQUERY cycle styles ----------*/
* .pics {
height: 332px;
width: 432px;
padding: 0;
margin: 0;
}
.pics img {
padding: 15px;
border: 1px solid #ccc;
background-color: #eee;
width: 400px;
height: 300px;
top: 0;
left: 0
}
/* Teeth for life ---------- */
* #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}
/* SURESMILE ----------*/
p.small {
font-size: 10px;}
img.photo {
border: solid 1px #000;
float: right;
margin: 0 0 15px 15px;}
div.learn-more {
background-color: #fff;
color: #036;
width: 50%;
border: solid 1px #fff;
padding: 0;
margin: 15px 18px 15px 15px;
float: right;}
div.learn-more a {color: #036;}
.learn-more h3 {
background-color: #97AFC2;
color: #fff;
margin: 0 0 10px 0;
padding: 10px;}
.learn-more p {
padding: 0;
margin: 0 0 10px 0;}
* .clear {clear: both;}
* #flash-suresmile-pt-testimonial {
margin: 15px auto;
width: 320px;
height: 206px;
border: solid 1px #ccc;}
/* 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: 5px solid #fff; 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;}
/*---------------------------
Sesame Forms
---------------------------*/
/* Global form styles */
* .referral-form, * .appointment-form, * .comments {margin: 18px auto;}
fieldset {border: none; padding: 9px 0;}
fieldset div {clear: both;position: relative;}
* .form-header {border-bottom: 1px solid #116a75;/*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 #116a75;/*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:#116a75;/* customize me! */
border: 1px solid #fff;
text-align:center;
line-height:31px;
color:#ffffff;/* customize me! */
font-size:12px;
font-weight:bold;}
/* referral form */
* .referral-form {
margin: 18px 0;
padding: 10px;}
.referral-form fieldset {border: none; padding: 9px 0;}
.referral-form label {/*floats labels left*/
font-size: 12px;
display:block;
font-weight:bold;
text-align:left;
width:45%;
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:left;
width:100%;}
.referral-form input, .referral-form textarea {
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #116a75;/* customize me! */
width:45%;
margin:9px 0 9px 2%;
background: #ffffff;
position: relative;}
.referral-form p.radio, .referral-form p.verification {
clear: both;
margin: 9px 0 9px 47%;
font-size: 12px;}
.referral-form p.radio-float {
clear: none;
float:left;
width: 45%;
padding:0;
margin:9px 0 9px 2%;}
.referral-form p.verification {margin-top: 0;}
.referral-form p.verification img {border: 1px solid #116a75;}/* customize me! */
.referral-form p.radio input, .referral-form p.radio-float input {
float: none;
width: auto;
margin: 0 0 0 2%;
padding: 4px 2px;}
/* appointment form */
* .appointment-form {
margin: 18px 0;
padding: 10px;}
.appointment-form fieldset {border: none; padding: 9px 0;}
.appointment-form label {/*floats labels left*/
font-size: 12px;
display:block;
font-weight:bold;
text-align:left;
width:45%;
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:left;
width:100%;}
.appointment-form input, .appointment-form select, .appointment-form textarea {
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #116a75;/* customize me! */
width:45%;
margin:9px 0 9px 2%;
background: #ffffff;}
.appointment-form p.radio, .appointment-form p.verification {
clear: both;
margin: 9px 0 9px 47%;
font-size: 12px;}
.appointment-form p.radio-float {
clear: none;
float:left;
width: 45%;
padding:0;
margin:9px 0 9px 2%;}
.appointment-form span#found-other, .appointment-form span#schedule-other {width: 100%;}
.appointment-form span#found-other input, .appointment-form span#schedule-other input {margin-left: 47%; background: #fff0b2}
.appointment-form p.verification {margin-top: 0;}
.appointment-form p.verification img {border: 1px solid #116a75;}/* customize me! */
.appointment-form p.radio input, .appointment-form p.radio-float input {
float: none;
width: auto;
margin: 0 0 0 2%;
padding: 4px 2px;}
/* Errors */
/* JQuery */
input.error {border: 1px solid #ff0000; background: #fefda1; }
div.error {padding-left: 18px;background: url(../images/validate_error.jpg) 0 0 no-repeat; color: #ff0000;
display: block;margin:0 0 9px 47%;font-size: 11px; line-height: 18px;}
div.success {padding-left: 18px; background: url(../images/validate_ok.jpg) 0 0 no-repeat; color: #000000;
display: block;margin:0 0 9px 47%;font-size: 11px; line-height: 18px;}
/* edit.com */
ul, ol {
margin-top:0px;
margin-bottom:0px;
}
.NormalText, body, td {
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 20px;
color: #000;
font-weight: normal;
text-decoration: none;
text-transform: none;
font-style:normal;
}
.FooterText {
color: #116A75;
font-size: 10px;
line-height: 14px;
font-weight: bold;
}
.GreenText {
color: #68784E;
font-size: 11px;
line-height: 16px;
font-weight: normal;
}
.SubHeader {
color: #116A75;
font-size: 14px;
font-weight: bold;
}
.SubjectHeader {
color: #116A75;
font-size: 16px;
line-height: 20px;
font-weight: bold;
}
* .PageTitle {
font-family: Georgia, Times New Roman, "Times", serif;
font-size: 26px;
line-height: 30px;
color: #FFF;
font-weight: bold;
font-style: italic;
}
td.BlackBottomBorder { border-bottom: solid 1px #000; padding-top: 10px; }