/* HTML, BODY ---------- */
html {height: 100%;}
body {background: #2e1b0f url(../images/tile.jpg) repeat-x 0 0;margin: 0; overflow-x:hidden;}
* {margin:0; padding:0;}
/* TEXT ---------- */
body {color: #805634; font: 12px/20px Tahoma, Helvetica, sans-serif; text-align:left;}
p {padding: 0px 0 15px 0px;}
#sidebar p{line-height: 18px;}
.testimonials p{padding-bottom: 0px;}
.staff p{padding-bottom: 22px;}
.staff strong{color: #5f9f78;}
/* HEADERS ---------- */
h1.headline {padding: 30px 0 0 0px; width: 512px; height: 68px; background-repeat:no-repeat; text-indent: -999em; overflow:hidden; background-position: bottom left; margin-bottom: 20px;}
*html h1.headline {width: 450px;}
.home h1.headline {width: 368px; height: 80px;}
h2{color: #805634; padding: 0 0 10px 0; font-size: 18px; line-height:36px;}
h3{color: #19504a; font-size: 14px; line-height:24px;}
h4{color: #805634; font-size: 13px;}
/* LISTS ---------- */
.the-game-room ul{list-style:none; list-style-image: none;}
ol, ul {padding:0 0 15px 20px; list-style-image: url(../images/bullet.gif);}
/* LINKS ---------- */
a {color: #003933; text-decoration: underline; font-weight:bold; }
a:visited{color: #003933;text-decoration: underline; }
a:hover {color: #003933; text-decoration: none; }
#logo {position:absolute; top:10px; left:33px; width: 512px; height: 165px; display: block; background: url(../images/logo.jpg) no-repeat 0 0; }
#logo a {display: block; width: 512px; height: 165px;}
#sidebar a{color: #3bb5e4; text-decoration: underline; font-style:normal;}
#sidebar a:visited{color: #3bb5e4; text-decoration: underline; font-style:normal;}
#sidebar a:hover{color: #3bb5e4; text-decoration: underline; font-style:normal;}
#sesame-link {float: left; text-decoration: none; color: #f3e9ca; font: normal 13px/20px Tahoma, sans-serif;}
#sesame-link a{text-decoration: none; color: #f3e9ca; font: normal 13px/20px Tahoma, sans-serif;}
#sesame-link a:visited{text-decoration: none; color: #f3e9ca; font: normal 13px/20px Tahoma, sans-serif;}
#sesame-link a:hover{text-decoration: underline; color: #f3e9ca; font: normal 13px/20px Tahoma, sans-serif;}
/* UTILITY ---------- */
#utility-nav{z-index:100; position:absolute; top: 25px; left: 50%; margin-left: 95px; width: 488px;}
#utility-nav a {display: block; height: 35px; overflow: hidden; text-indent: -999px;}
#utility-nav ul{padding:0; text-decoration:none;}
#utility-nav li{float: left; padding: 0; text-decoration:none; list-style:none;}
#patient-login {background: url(../images/nav/pt.gif) 0 0; width: 145px;}
#doctor-login {background: url(../images/nav/dr.gif) 0 0; width: 132px;}
#contact-us {background: url(../images/nav/contact.gif) 0 0; width: 118px;}
#home {background: url(../images/nav/home.gif) 0 0; width: 93px;}
#utility-nav ul li:hover a, #utility-nav li.sfhover a,#utility-nav a:hover, #utility-nav .active {background-position: 0 -35px;}
#utility-nav li.active a {background-position: 0 -35px;}
/* DROP-DOWN-NAVIGATION ----------------*/
#utility-nav li {display: inline; z-index:100; margin:0; padding:0;}
#utility-nav li ul {margin:0;padding: 0; width: 165px; position: absolute; background: #70a4a2 url(../images/nav-tile.gif) repeat-x 0 0; left: -999em; font-size: 13px; line-height:24px; height: auto; padding: 5px 0;}
#utility-nav li ul li {padding: 0;}
#utility-nav li ul a {color: #00322d; font-style: normal; font-weight:bold; list-style-image:none; padding: 0 5px 0 15px; width: 145px;text-indent: 0; text-decoration: none; height: auto; text-align: left;}
#utility-nav li:hover ul, #utility-nav li.sfhover ul {left: auto;display:block;z-index:100;}
#utility-nav li:hover ul a:hover, #utility-nav li.sfhover ul a:hover {background: #fff; color:#00322d;}
/* nav ---------- */
#nav{position:absolute; top:212px; left: 33px; margin: 0; padding:0; display:block; z-index: 100;}
*html #nav{width: 1000px;}
#nav a {display: block; height: 37px; overflow: hidden; text-indent: -999px; }
#nav ul{padding:0;}
#nav li{float: left; padding: 0;}
#meet-the-team {background: url(../images/nav/team.gif) 0 0; width: 127px;}
#for-new-patients {background: url(../images/nav/patients.gif) 0 0; width: 169px;}
#general-dentistry {background: url(../images/nav/dentistry.gif) 0 0; width: 216px;}
#restore-your-smile {background: url(../images/nav/restoration.gif) 0 0; width: 159px;}
#enhance-your-smile {background: url(../images/nav/enhancements.gif) 0 0; width: 167px;}
#dentistry-for-kids {background: url(../images/nav/kids.gif) 0 0; width: 113px;}
#nav ul li:hover a, #nav li.sfhover a,#nav a:hover, #nav .active {background-position: 0 -37px;}
#nav li.active a {background-position: 0 -37px;}
/* DROP-DOWN-NAVIGATION ----------------*/
#nav li {display: inline; z-index:100; margin:0; padding:0;}
#nav li ul {margin:0;padding: 0; width: 195px; position: absolute; background: #70a4a2 url(../images/nav-tile.gif) repeat-x 0 0; left: -999em; font: bold 13px/24px Trebuchet MS, Helvetica, sans-serif; height: auto; padding: 5px 0;}
#nav li ul li {padding: 0;}
#nav li ul a {color: #00322d; font-style: normal; font: bold 13px/24px Trebuchet MS, Helvetica, sans-serif;list-style-image:none; padding: 0 5px 0 15px; width: 175px;text-indent: 0; text-decoration: none; height: auto;}
#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 {background: #fff; color:#00322d;}
/* SUBNAV ----------------*/
.sub_nav {padding-bottom: 25px;}
.sub_nav a{padding: 0; text-decoration: none;}
.sub_nav a:visited {text-decoration: none;}
.sub_nav a:hover, .sub_nav a.active {text-decoration:underline;}
/* TEXT_NAV - FOOTER NAV ----------------*/
#invisalign-ft {float: left; width: 265px; height:85px; padding-bottom:40px;}
.text_nav { color: #f3e9ca; font: normal 13px/20px Tahoma, sans-serif; padding: 10px 0 0 0; text-align:left; float: left;width: 680px;}
.text_nav a { text-decoration: none; color: #f3e9ca; font: normal 13px/20px Tahoma, sans-serif;}
.text_nav a:visited{ text-decoration: none; color: #f3e9ca; font: normal 13px/20px Tahoma, sans-serif; }
.text_nav a:hover{ text-decoration: none; color: #f3e9ca; font: normal 13px/20px Tahoma, sans-serif;}
/* LAYOUT ---------- */
.hide {display:none;}
.replace {text-indent: -999em; overflow:hidden;}
.flash-replaced .alt {display: block; width: 0px; height: 0px; position: absolute; overflow: hidden;}
div.hr { background: url(../images/line.gif) no-repeat 0 0; clear: both; height: 3px; margin: 0 0 10px 0; width: 471px; }
div.hr hr { display: none; }
#container {background: url(../images/container-bg.jpg) no-repeat top center; min-height: 1302px; _height: 1302px; padding-top: 60px;}
#login-container {width: 1018px; position: relative; margin: 0 auto;}
#bd {position: relative;background: url(../images/bd-tile.png) repeat-y 0 0; width: 985px; margin: 0 auto 0; padding: 10px 0 0 33px;}
#hd {height: 212px; width: 951px; background: url(../images/hd-bg.jpg) no-repeat 0 0;}
#office-address {float: right; font-color: #f5ecd1; text-align: right; font-size: 13px; line-height:20px; padding: 120px 20px 0 0;}
#office-address a{color: #f5ecd1;text-decoration: none;}
#office-address a:visited{color: #f5ecd1;text-decoration: none;}
#office-address a:hover{color: #f5ecd1;text-decoration: none;}
#text{width: 841px; min-height: 350px; _height: 350px; background: url(../images/text-bg.gif) no-repeat 0 0; margin-top: 27px; padding: 0px 55px 40px 55px;}
.home #text {width: 379px; padding: 0px 517px 30px 55px;}
.home #spotlight {width: 512px; height: 463px; display:block; position: absolute; top: 249px; left: 472px; z-index:50; background: url(../images/base.jpg) no-repeat 0 0;}
#home-callouts {padding-left: 48px; height:123px; padding-bottom: 35px;}
#home-callouts img{float:left; width: 266px; padding-right: 30px;}
.back-to-top {background: url(../images/arrow.gif) no-repeat 0 0; padding-left: 19px;}
#ft {background: url(../images/ft-bg.png) no-repeat 0 0; margin: 0 auto;text-align: center; width: 985px; min-height: 122px; padding: 0 0 40px 33px;}
/* jQuery Slideshow */
.slideshow {padding: 0; list-style: none; overflow: hidden; width: 512px; height: 463px; z-index:100;}
#homepage-slideshow li {width: 512px; height: 463px;}
/* SESAME CSS */
img {border:none;}
img.right {
margin: 0 0 15px 15px;
float: right;
clear: right;
}
img.left {
margin: 0 15px 15px 0;
float: left;
clear: left;
}
img.left-border {
float: left;
clear: left;
margin: 5px 15px 15px 0;
border: solid 1px #19504a; /* Customize me! */
}
img.right-border {
float: right;
clear: right;
margin: 5px 0 15px 15px;
border: solid 1px #19504a; /* Customize me! */
}
p.flash_notice {
margin: 18px;
padding: 9px;
color: #ff0000;
border: 1px dotted #ff0000;
background: #ffffff;
text-align: center;
}
/* This styled div acts as the hr for most browsers */
div.hr {
height: 0px;
background-color: #eee; /* Customize me! */
border: solid 1px #eee; /* Customize me! */
border-width: 1px 0 0 0; /* Customize me! */
margin: 20px 0;
padding: 0;
clear: both;
}
/* This is the backup for screen readers */
hr {
display: none;
height: 0px;
background-color: #eee;
border: solid 1px #eee;
border-width: 1px 0 0 0;
clear: both;
}
/* Clear Fix */
.cf:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.cf {display: inline-block;} /*this trips hasLayout for ie7*/
.cf {display: block;} /*this returns it back to normal*/
* html .cf {height: 1px;}
/* invisalign teen */
span.indent {
padding-left: 40px;
}
#invisalign-sidebar {
background: #fff;
width: 275px;
margin: 0 0 15px 15px;
padding: 0;
border: solid 1px #000;
float: right;
clear: right;
}
#invisalign-sidebar a {
color: #036;
}
#invisalign-sidebar h3 {
background: #97AFC2;
margin: 0;
padding: 15px;
color: #fff;
}
#invisalign-sidebar p {
padding: 0 15px;
margin: 15px 0;
}
.thumb {
border: solid 1px #000;
margin: 0 10px 10px 0;
float: left;
clear: left;
}
/* anatomy of a tooth */
#anatomy-of-a-tooth {background: url(http://media.sesamehost.com/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}
#bd #anatomy-of-a-tooth a img {border: none; display: block; height: 0; position: absolute; width: 0; margin:0; padding:0;}
#bd #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 */
div.referral-form, div.appointment-form, div.comments {
width: 100%;
margin-top: 18px;
letter-spacing: normal;
}
fieldset {border: 0; padding: 9px 0;margin: 0 18px;}
fieldset h2 {margin: 0 0 9px;}
fieldset p {margin: 0 0 18px;}
fieldset p.disclaimer {font-size: 90%; font-style: italic; margin: 0;}
fieldset dl {}
fieldset dl dt {font-size: 16px; clear: both; margin: 9px 0 0;}
fieldset dd ul {margin: 9px 0;}
fieldset dd ul li, fieldset dd ol li {list-style: none;}
fieldset dd li {
clear: both;
margin: 3px 0;
padding: 5px 0 4px 10%;
overflow: auto;
height: auto;
position: relative;
}
fieldset dd li:hover {background: #d5e0eb;/* customize me - this is the hover color change of li */}
fieldset dd li input:hover, fieldset dd li input:focus,
fieldset dd li select:hover, fieldset dd li select:focus,
fieldset dd li textarea:hover, fieldset dd li textarea:focus {
background: #f1f1f1;/* customize me - this is the hover color change of form fields*/
outline-color: #537197;/* customize me */
}
fieldset li h3 {font-size: 12px; line-height: 18px; margin: 0;}
fieldset li div {float: left; display: inline-block; width: 40%; position: relative; padding-right: 5%;}
fieldset li div.input-street {width: 85%;}
fieldset li div.input-city {width: 60%;}
fieldset li div.input-full-name {width: 85%;}
fieldset li div.input-phone-full {width: 85%;}
fieldset li div.input-email {width: 85%;}
fieldset li div.input-zip {width: 20%;}
fieldset li div.content-switch, fieldset li div.radio, fieldset li div.checkbox {width: 85%;}
fieldset li div.radio input {border: none;}
fieldset li div.radio label {padding-right: 9px; font-size: 90%;}
/*fieldset li div.hidden-content, fieldset li.hidden-content {display: none;}*/
fieldset li div.input-select-full {width: 85%;}
fieldset li div.input-comments {width: 85%;}
li div.input-comments textarea {height: 63px; overflow: auto;}
fieldset li div.input-captcha {width: 50%;}
fieldset li div.verification {width: 35%;}
li div.verification img {
border: 1px solid;
margin-top: 9px;
-moz-border-radius: 4px; /*for Moz, optional*/
-webkit-border-radius: 4px; /*for Webkit Browsers, optional*/
}
fieldset li div label {
line-height: 18px;
font-weight: bold;
margin-bottom: 9px;
font-size: 80%;
color: #537197;/*override to match site*/
}
fieldset li div input, fieldset li div textarea, fieldset li div select {
display: block;
line-height: 18px;
width: 100%;
border: 1px solid;
padding: 4px 0 3px;
text-indent: 4px;
margin-top: 9px;
-moz-border-radius: 4px; /*for Moz, optional*/
-webkit-border-radius: 4px; /*for Webkit Browsers, optional*/
}
fieldset li div select {height: 25px;}
fieldset li div.radio input {display: inline; width: auto; margin-right: 4px;}
fieldset li div div {width: 100%;}
fieldset dl dd.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*/
display: block;
width: 125px;
height: 34px;
text-align: center;
margin: 0;
background:#cfdae4;/* customize me! */
border: 1px solid #537197;
line-height: 34px;
color:#537197;/* customize me! */
font-size:12px;
font-weight:bold;
-moz-border-radius: 4px; /*for Moz, optional*/
-webkit-border-radius: 4px; /*for Webkit Browsers, optional*/
}
/* appointment form
* Styles only for the appointment request form
*/
/* comment form
* Styles only for the comments form
*/
/*numbering added by jQuery*/
fieldset ol li span.comment-number {
font-size: 150%;
color: #537197;/* customize me*/
position: absolute;
left: 9px;
top: 9px;
}
/* referral form
* Styles only for the referral form
*/
.referral-form fieldset li div.radio {width: 40%;}
/* JQuery */
input.error, select.error, textarea.error {border-color: #a52003; background: #fefda1;}
div.error {
background: url(../images/validate_error.gif) 0 0 no-repeat;
color: #a52003;
width: 18px;
height: 18px;
position: absolute;
top: 0;
right: 0;
overflow: hidden;
display: block;
margin: 12px -2% 0 0;
text-indent: -999em;}
div.success {
background: url(../images/validate_ok.gif) 0 0 no-repeat;
width: 18px;
height: 18px;
position: absolute;
top: 0;
right: 0;
overflow: hidden;
display: block;
margin: 12px -2% 0 0;
text-indent: -999em;}
.contact-form div.error, .contact-form div.success {margin-left: 0;}
.clear {clear:both;}