/* HTML, BODY ---------------------------------------- */
* {margin: 0; padding: 0;}
html {height: 100%; margin-bottom: 1px}
body {background: #9C9DA0; margin: 0; text-align: center}
/* TEXT ---------------------------------------------- */
body, table, input, textarea {color: #4E4E50; font: 12px/1.5em tahoma, sans-serif}
BODY, TD, .NormalText { font-weight: normal; text-decoration: none; font-style: normal; color: #4E4E50; font-size: 12px; line-height: 1.5em; font-family: Tahoma, Arial, Helvetica, sans-serif; }
.Header { color: #5A3843; font-size: 24px; font-weight: normal; font-style: italic; line-height: 24px; }
.Subheader { color: #999999; font-size: 14px; font-weight: bold; line-height: 16px; }
.Subheader2 { color: #5A3843; font-size: 12px; font-weight: bold; }
.Purple { color: #5A3843; }
.Gray { color: #4E4E50; }
.DarkGray { color: #999999; }
.Black { color: #000000; }
.SmallText { font-size: 10px; }
.MediumText { font-size: 16px; line-height: 16px; }
.LargeText { font-size: 24px; line-height: 24px; }
p {margin: 0; padding-bottom: 1em}
hr {background: #BEBEBE; border: 0; clear: both; color: #BEBEBE; height: 1px; margin-bottom: 1em}
* #flash-home p {background: #FFFF99; margin: 10px; padding: 5px}
* .clear {clear: both}
/* HEADERS ------------------------------------------- */
h1 {background-repeat: no-repeat; height: 30px; margin: 0 0 .25em 0; text-indent: -999em}
h2 {color: #999; font-size: 1.17em; margin: 0}
h3 {color: #5A3843; font-size: 1em; margin: 0}
/* LINKS --------------------------------------------- */
a {color: #B57087; text-decoration: underline}
a:hover {text-decoration: none}
* #logo {background: url(images/logo.gif); display: block; height: 90px; overflow: hidden; text-indent: -999em; width: 260px}
/* LISTS --------------------------------------------- */
ol, ul {margin-bottom: 1em; margin-top: 0; margin-left: 25px;}
dl.staff {margin: 10px 0 20px;}
dl.staff dt {color: #999; font-size: 1.17em; margin: 0}
dl.staff dd {margin: 0;}
* .none, * .links {list-style: none; margin: 0 0 1em 0; padding: 0}
* .links dd {margin: 0 0 1em 0}
* #team li {float: left; margin-bottom: 1em; text-align: center; width: 50%}
* #information, * #footer {background: #4E4E50 url(images/shadow-full.gif) no-repeat 0 100%; list-style: none; margin: 0; overflow: auto; padding: 30px 20px 40px 20px; width: 220px}
#information li, #footer li {border-bottom: 1px solid #9C9DA0; color: #CECED0; font-size: .92em; line-height: 30px}
* #footer {background-image: url(images/footer.gif); width: 460px}
* #footer li.borderless {border: 0; padding-bottom: 1px}
/* NAVIGATION ---------------------------------------- */
* #masthead {background: #FFF; height: 44px; list-style: none; margin: 0; padding: 20px 20px 0 20px; width: 460px}
* #masthead li {float: left}
* #masthead li a {border-right: 1px solid #9C9DA0; display: block; height: 24px; text-indent: -999em}
* #invisalign {background: url(images/navigation/invisalign.gif); width: 114px}
* #zoom {background: url(images/navigation/zoom.gif); width: 114px}
* #home {background: url(images/navigation/home.gif); width: 114px}
* #contact-us-masthead {background: url(images/navigation/contact-us-masthead.gif); width: 115px}
* #masthead li:hover #contact-us-masthead, #masthead li.sfhover #contact-us-masthead,
* #masthead a:hover, #masthead a.active {background-position: 0 -24px}
* #navigation {float: left; list-style: none; margin: 0; padding: 35px 20px 250px 20px; width: 220px}
#navigation li {display: inline}
#navigation a {background-repeat: no-repeat; border-bottom: 1px solid #775E69; display: block; height: 30px; overflow: hidden; text-indent: -999em; width: 220px}
* #our-office {background-image: url(images/navigation/our-office.gif)}
* #insurance {background-image: url(images/navigation/insurance.gif)}
* #why-see-a-dentist {background-image: url(images/navigation/why-see-a-dentist.gif)}
* #regular-checkups {background-image: url(images/navigation/regular-checkups.gif)}
* #teeth-101 {background-image: url(images/navigation/teeth-101.gif)}
* #improve-your-smile {background-image: url(images/navigation/improve-your-smile.gif)}
* #pediatric-dentistry {background-image: url(images/navigation/pediatric-dentistry.gif)}
* #blog {background-image: url(images/navigation/blog.gif)}
* #contact-us-navigation {background-image: url(images/navigation/contact-us-navigation.gif)}
* #patient-login {background-image: url(images/navigation/patient-login.gif)}
#navigation li:hover #our-office, #navigation li.sfhover #our-office,
#navigation li:hover #insurance, #navigation li.sfhover #insurance,
#navigation li:hover #teeth-101, #navigation li.sfhover #teeth-101,
#navigation li:hover #improve-your-smile, #navigation li.sfhover #improve-your-smile,
#navigation li:hover #pediatric-dentistry, #navigation li.sfhover #pediatric-dentistry,
#navigation li:hover #contact-us-navigation, #navigation li.sfhover #contact-us-navigation,
#navigation a:hover, #navigation a.active {background-position: 0 -30px}
#masthead ul, #navigation ul {background: #535354; left: -999em; list-style: none; margin: -41px 0 0 200px; padding: 10px 20px 20px 20px; position: absolute}
#masthead ul {margin: 0 0 0 -65px}
#masthead ul li, #navigation ul li {display: inline; float: none}
#masthead li:hover ul, #masthead li.sfhover ul, #navigation li:hover ul, #navigation li.sfhover ul {display: block; left: auto}
#masthead ul a, #navigation ul a {border-bottom: 1px solid #9C9DA0; border-right: 0; color: #FFF; display: block; font-size: .92em; font-weight: normal; height: 30px; line-height: 30px; text-decoration: none; text-indent: 0; width: 160px}
#masthead ul a:hover, #navigation ul a:hover {color: #B57087}
/* IMAGES -------------------------------------------- */
IMG.DashedBorder {border: 1px dashed #BEBEBE; padding: 4px}
img {border: none; color: #CCC}
* .border {border: 1px dashed #BEBEBE; padding: 4px}
* .centered {display: block; margin: 0 auto 1em auto}
* .left {float: left; margin: 0 10px 10px 0; clear: left;}
* .right {float: right; margin: 0 0 10px 10px; clear: right;}
/* LAYOUT -------------------------------------------- */
* #wrap {margin: 0 auto; overflow: auto; position: relative; text-align: left; width: 780px}
* .shadow, * .shadow-left, * .shadow-right {background: url(images/shadow.gif) no-repeat 0 100%; display: block; float: left; margin-bottom: 25px; padding-bottom: 15px; width: 780px}
* .shadow-left {margin-right: 20px; width: 260px}
* .shadow-right {background-position: 100% 100%; width: 500px}
* #container {background: #EEE url(images/container.gif) repeat-y; overflow: auto; width: 780px}
* #content {background: url(images/navigation.gif) no-repeat 0 100%; float: right; margin-left: -280px; min-height: 500px; padding: 40px 20px 30px 280px; width: 480px}
* html #content {height: 500px}
* #flash-home {background: url(images/flash.jpg); height: 240px; margin-bottom: 1em; padding: 5px 5px 15px 5px; width: 470px}
* .sidebar {background: #535354; color: #FFF; padding: 20px 20px 10px 20px; width: 220px}
* .footer {background-position: 100% 100%}
/* FORM DECORATION ----------------------------------- */
* #form {
}
fieldset {
border: 0;
margin: 0;
padding: 20px 20px 25px;
background: #c0c0c0 url(images/form-bottom.gif) 100% 100% no-repeat;
}
label {display: block; margin: 10px 0 0; line-height: 18px;}
input.text {}
p.radio {margin: 5px 0;}
p.radio input {display: inline; margin-left: 10px;}
textarea {
}
* #random-img {width: 85px; height: 40px; margin: 10px 0; background: url(forms/randomimg.php); }
button#btn-submit {
width: 75px;
height: 20px;
text-indent: -999em;
overflow: hidden;
display: block;
background: url(images/btn_submit.gif) 0 0 no-repeat;
border: 0;
margin-top: 10px;}
button#btn-submit:hover {background-position: 0 -20px;}/* Hover state does not work in IE6 */
#form table {margin: 0 10px;}
/* 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}
/* THE GAME ROOM ------------------------------------- */
div#sesame-game {background: #000; line-height: 0; margin: 2em auto; text-align: center; width: 400px}
ul#sesame-games {list-style: none; margin: 0; padding: 0}
ul#sesame-games li {clear: both; display: inline-block}
ul#sesame-games img {border: 0; float: right; margin: 0 0 10px 10px}
ul#sesame-games p {padding-bottom: 1em}
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> global settings needed for thickbox <<<-----------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*//* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox specific link and font settings <<<------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
* #TB_window {
font: 12px Arial, Helvetica, sans-serif;
color: #333333;
}
* #TB_secondLine {
font: 10px Arial, Helvetica, sans-serif;
color:#666666;
}
#TB_window a:link {color: #666666;}
#TB_window a:visited {color: #666666;}
#TB_window a:hover {color: #000;}
#TB_window a:active {color: #666666;}
#TB_window a:focus{color: #666666;}
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox settings <<<-----------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
* #TB_overlay {
position: fixed;
z-index:100;
top: 0px;
left: 0px;
height:100%;
width:100%;
}
* .TB_overlayMacFFBGHack {background: url(images/macFFBgHack.png) repeat;}
* .TB_overlayBG {
background-color:#000;
filter:alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
}
* html #TB_overlay { /* ie6 hack */
position: absolute;
height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}
* #TB_window {
position: fixed;
background: #ffffff;
z-index: 102;
color:#000000;
display:none;
border: 4px solid #525252;
text-align:left;
top:50%;
left:50%;
}
* html #TB_window { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}
* #TB_window img#TB_Image {
display:block;
margin: 15px 0 0 15px;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-top: 1px solid #666;
border-left: 1px solid #666;
}
* #TB_caption{
height:25px;
padding:7px 30px 10px 25px;
float:left;
}
* #TB_closeWindow{
height:25px;
padding:11px 25px 10px 0;
float:right;
}
* #TB_closeAjaxWindow{
padding:7px 10px 5px 0;
margin-bottom:1px;
text-align:right;
float:right;
}
* #TB_ajaxWindowTitle{
float:left;
padding:7px 0 5px 10px;
margin-bottom:1px;
}
* #TB_title{
background-color:#e8e8e8;
height:27px;
}
* #TB_ajaxContent{
clear:both;
padding:2px 15px 15px 15px;
overflow:auto;
text-align:left;
line-height:1.4em;
}
* #TB_ajaxContent.TB_modal{
padding:15px;
}
* #TB_ajaxContent p{
padding:5px 0px 5px 0px;
}
* #TB_load{
position: fixed;
display:none;
height:13px;
width:208px;
z-index:103;
top: 50%;
left: 50%;
margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */
}
* html #TB_load { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}
* #TB_HideSelect{
z-index:99;
position:fixed;
top: 0;
left: 0;
background-color:#fff;
border:none;
filter:alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
height:100%;
width:100%;
}
* html #TB_HideSelect { /* ie6 hack */
position: absolute;
height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}