/* HTML, BODY ---------- */
html {height: 100%;}
body {background: #fff url(../images/tile.jpg) repeat-x 0 0;margin: 0;}
* {margin:0; padding:0;}
/* TEXT ---------- */
body {color: #45698e; font: 12px/22px Tahoma, sans-serif; text-align:left;}
p {padding: 0px 0 22px 0px;}
.testimonials-style p{font-style: italic;}
/* HEADERS ---------- */
.home .headline{padding: 20px 0 0 0; width: 100%; height: 47px;background-position: bottom left;}
h1.headline {width: 100%; height: 47px; display: block; overflow: hidden; text-indent: -999em; background-repeat: no-repeat; padding: 73px 0 0 0; background-position: bottom left;}
h2{color: #4b84c0; padding: 0 0 10px 0; font: bold 18px/24px Georgia, serif;}
h3{font: bold 14px/22px Georgia, serif; color: #4b84c0; padding: 0 0 10px 0;}
/* LISTS ---------- */
ol, ul {padding:0 0 28px 20px;}
/* LINKS ---------- */
a {color: #3d8ee4; text-decoration: none; font-weight:bold;}
a:visited{color: #3d8ee4;text-decoration: none; font-weight:bold;}
a:hover {color: #3d8ee4; text-decoration: underline; font-weight:bold;}
#logo {width: 288px; height: 228px; display: block; background: url(../images/logo.gif) no-repeat top right; padding:0 0 0 49px; margin: 0; border:none;}
#logo a {display: block; width: 288px; height: 228px;}
#sesame-link {color: #45698e; text-decoration: none; font: bold 11px/20px Tahoma, sans-serif;}
/* login-nav ---------- */
#utility-nav{position:absolute; top:78px; left:466px; padding:0; height:35px; display:block; z-index: 100;}
#utility-nav a {display: block; overflow: hidden; text-indent: -999px; height: 35px;}
#utility-nav ul{padding:0;}
#utility-nav li{display: inline; float: left;}
#patient-login {background: url(../images/pt-login.gif) 0 0; width: 156px;}
#doctor-login {background: url(../images/dr-login.gif) 0 0; width: 155px;}
#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;}
/* nav ---------- */
#nav{position:absolute; top:256px; left:5px; padding:3px 0 0 0; width:239px; height: 418px; display:block; z-index: 100; background: url(../images/nav-bg.gif) no-repeat 0 0;}
#nav a {display: block; overflow: hidden; text-indent: -999px; width: 238px; height: 40px;}
#nav ul{padding:0;}
#meet-the-team {background: url(../images/nav/team.gif) 0 0;}
#for-new-patients {background: url(../images/nav/patients.gif) 0 0;}
#general-dentistry {background: url(../images/nav/dentistry.gif) 0 0;}
#restore-your-smile {background: url(../images/nav/restore.gif) 0 0;}
#enhance-your-smile {background: url(../images/nav/enhance.gif) 0 0;}
#periodontal-therapy {background: url(../images/nav/therapy.gif) 0 0;}
#dental-technology {background: url(../images/nav/tech.gif) 0 0;}
#dental-library{background: url(../images/nav/library.gif) 0 0;}
#contact-us {background: url(../images/nav/contact.gif) 0 0;}
#home {background: url(../images/nav/home.gif) 0 0;}
#nav ul li:hover a, #nav li.sfhover a,#nav a:hover, #nav .active {background-position: -239px 0;}
#nav li.active a {background-position: -239px 0;}
/* DROP-DOWN-NAVIGATION ----------------*/
#nav li {display: inline; z-index:100; margin:0; padding:0;}
#nav li ul {margin: -40px 0 0 238px;padding:10px 0 10px 5px; width: 195px; position: absolute; background: #235181; left: -999em; font: bold 11px/24px Verdana, sans-serif; text-transform:uppercase;}
#nav li ul a {list-style-image:none; padding: 0 0 0 10px; width: 185px;text-indent: 0; text-decoration: none; height: auto; color: #fff;}
#nav li ul a.last {border-bottom: none;}
#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: #fff; text-decoration:underline;}
/* SUBNAV ----------------*/
.sub_nav {color: #2582e6; font: bold 12px/18px Tahoma, sans-serif; border-bottom: 1px solid #829ab2; padding: 0 0 17px 0; margin-bottom: 20px;}
.sub_nav a{color: #2582e6; text-decoration: none;}
.sub_nav a:visited {color: #2582e6; text-decoration: none;}
.sub_nav a:hover, .sub_nav a.active {color: #829ab2; text-decoration:none;}
/* FOOTER_LOGINS - FOOTER NAV ----------------*/
#footer-logins { color: #4b84c0; padding-bottom: 5px;}
#footer-logins a { color: #4b84c0; font: bold 12px/20px Tahoma, sans-serif;}
#footer-logins a:visited{ color: #4b84c0; text-decoration: none; font: bold 12px/20px Tahoma, sans-serif;}
#footer-logins a:hover{ color: #4b84c0; text-decoration: underline; font: bold 12px/20px Tahoma, sans-serif;}
/* TEXT_NAV - FOOTER NAV ----------------*/
.text_nav { color: #27507a;}
.text_nav a { color: #27507a; font: normal 11px/20px Tahoma, sans-serif;}
.text_nav a:visited{ color: #27507a; text-decoration: none; font: normal 11px/20px Tahoma, sans-serif;}
.text_nav a:hover{ color: #27507a; text-decoration: underline; font: normal 11px/20px Tahoma, sans-serif;}
/* LAYOUT ---------- */
.hide {display:none;}
.flash-replaced .alt {display: block; width: 0px; height: 0px; position: absolute; overflow: hidden; background: url(../images/home-flash.png) no-repeat 0 0;}
#container { width: 862px; min-height: 894px; _height: 894px; position: relative; margin: 0 auto;background: url(../images/container-bg.gif) no-repeat 0 0;}
#bd {background: url(../images/bd-bg.jpg) no-repeat 0 0; }
#office-address{width: 432px; height: 22px; position: absolute; top: 149px; left: 404px;text-decoration:none; color:#27507a; font-family:"Times New Roman", Times, serif; font-size:19px; font-weight:normal}
#office-address a{text-decoration:none; color:#27507a; font-family:"Times New Roman", Times, serif; font-size:19px; font-weight:normal}
.home #content {padding-left: 295px;}
#content{width: 510px; padding: 0 0 0 304px; min-height: 1230px; _height: 1230px;}
#ft { width: 862px; padding: ; text-align: center; }
#sidebar {position: absolute; top: 693px; left: 18px; width: 220px;}
#sidebar h2{font: italic 14px/28px Georgia, "Times New Roman", Times, serif; color: #27507a; text-align:center; font-weight:bold;padding: 20px 0 20px 0;}
#consultation-callout {width: 220px; height: 154px; background: url(../images/consultation-callout.gif) no-repeat top center; display: block; margin-bottom: 25px; }
#consultation-callout a{display: block; width: 220px; height: 154px;}
#wand-callout {width: 220px; height: 77px; background: url(../images/wand-callout.gif) no-repeat top center; display: block;}
#wand-callout a{display: block; width: 220px; height: 77px;}
/*#twitter{width: 50px; height: 50px; margin-top:20px; background: url(../images/twittericon.png) no-repeat top center; display: block;}
#twitter a{display: block; width: 50px; height: 50px;}*/
#social-icons{width:220px; height:55px; margin-top:22px; display:block; text-align:center;}
#social-icons a{display:inline;}
#ada-callout {width: 220px; height: 35px; background: url(../images/ada.gif) no-repeat top center; display: block; margin-bottom: 20px;}
#ada-callout a{display: block; width: 220px; height: 35px;}
#aacd-callout {width:220px; height: 68px; background: url(../images/aacd.gif) no-repeat top center; display: block; margin-bottom: 20px;}
#aacd-callout a{display: block; width: 220px; height: 68px;}
#aaid-callout {width: 220px; height: 73px; background: url(../images/aaid.gif) no-repeat top center; display: block; margin-bottom: 20px;}
#aaid-callout a{display: block; width: 220px; height: 73px;}
/* jQuery Slideshow */
.home-slideshow {background: url(../images/home-slideshow/home-slideshow-base.gif) no-repeat 0 0; padding:0; list-style: none; overflow: hidden; width: 520px; height: 260px; z-index:100; margin: 47px 0 0 0;}
#home-slideshow li {width: 498px; height: 238px; padding: 11px 0 0 11px;}
#slideshow-container ul.slideshow {
list-style: none;
width: 460px;
height: 350px;
margin: 0;
padding: 0;
}
#slideshow-container {
background: #edeccd; /* Customize me */
border: solid 1px #a0b606; /* Customize me */
-moz-border-radius: 5px; /* Optional - you may customize or remove */
-webkit-border-radius: 5px; /* Optional - you may customize or remove */
width: 460px;
padding: 10px;
line-height: 18px;
}
#slideshow-container div#caption {
min-height: 18px;
clear: both;
background-color: #fff; /* Customize me */
color: #333; /* Customize me */
padding: 10px;
margin: 10px 0 0 0;
border: solid 1px #a0b606; /* Customize me */
-moz-border-radius: 5px; /* Optional - you may customize or remove */
-webkit-border-radius: 5px;
}
#slideshow-container ul.slideshow img {
width: 460px;
height: 350px;
margin: 0;
}
.office-tour-nav {
background-color: #fff; /* Customize me */
margin: 0 0 10px 0;
padding: 5px 3px;
border: solid 1px #a0b606; /* Customize me */
-moz-border-radius: 5px 5px 0 0; /* Optional - you may customize or remove */
-webkit-border-top-left-radius: 5px; /* Optional - you may customize or remove */
-webkit-border-top-right-radius: 5px; /* Optional - you may customize or remove */
}
.office-tour-nav a {
text-decoration: none;
font-size: 12px;
padding: 5px;
margin: 0 3px;
color: #333;}
.office-tour-nav a.activeSlide, .office-tour-nav a:hover {color: #009EC7;}
/* 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 */
.right {
margin: 0 0 15px 15px;
float: right;
clear: right;
}
/* IMAGES ---------- */
img {border:none;}
/* SESAME CSS */
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 #333; /* Customize me! */
}
img.right-border {
float: right;
clear: right;
margin: 5px 0 15px 15px;
border: solid 1px #333; /* Customize me! */
}
.map iframe {border: 1px solid #45698e;}
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: #829ab2; /* Customize me! */
border: solid 1px #829ab2; /* 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: #829ab2;
border: solid 1px #829ab2;
border-width: 1px 0 0 0;
clear: both;
}
/* Clear Fix */
.clear {clear: both;}
.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;}
/* 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;}