/* general ----------------------------------------*/

* {margin: 0; padding: 0;}

html, body {height: 100%;}



body {

background: #f2ecd6 url(../images/bg06.jpg) top center no-repeat;

margin: 0;

font: normal 14px/22px "Trebuchet MS", "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", Verdana, "Verdana Ref", sans serif;

color: #ccc;

}



table { border-collapse: collapse; border-spacing: 0; }



td, th { 

padding: 0; 

vertical-align: top;

font: normal 12px/24px arial, verdana, helvetica, sans-serif;

color: #333;

}



a { color: #cccc99; text-decoration: underline; }



a:hover { text-decoration: none; }



h1 {

background-repeat: no-repeat; 

height: 84px; /* height of the h1 image */

width: 960px;

margin: 0;

overflow: hidden; 

text-indent: -999em; /* hides rich text so only background image shows */

}



h2 {

font: normal 16px/22px "Trebuchet MS", "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", Verdana, "Verdana Ref", sans serif;

color: #f3ecbe;

margin: 12px 0;

}



h3 {

font: normal 14px arial, verdana, helvetica, sans-serif;

color: #fff;

margin: 10px 0;

}



h4 {

font: bold 12px "Trebuchet MS", "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", Verdana, "Verdana Ref", sans serif;

color: #ccc;

margin: 10px 0;

}



ul,ol {margin: 0 0 10px 30px;}



ul {

list-style: disc;

}



img {border: none; float:right; padding: 5px;}



p {margin: 0 0 10px 0;}



hr {

padding: 10px 0 0 0;

margin: 0 0 10px 0;

border: 0;

border-bottom: 1px dashed #696650;

clear: both;

}





/* contact-info ----------------------------------------*/

.contact-info {

padding: 0;
margin: 0;
width: 960px;

height: 30px;

position: absolute;
top:8px;
left:117px;
z-index:100;
text-transform:uppercase;
letter-spacing:1.3px;
color:#FFF;
font-family:"Times New Roman", Ti mes, serif;
font-size:14px;

}











/* logo ----------------------------------------*/

.logo { 

letter-spacing : -1000em;

text-indent : -999em;

overflow : hidden;

background: transparent;

padding: 0;

margin: 0;

line-height: 0;

width: 960px;

height: 240px;

position: relative;

}



/* Just for Opera, but hide from MacIE */

/*\*/html>body .logo {

letter-spacing : normal;

text-indent : -999em;

}

/* End of hack */



h1.logo a {

display: block;

background: transparent;

float: left;

padding: 0;

margin: 0;

width: 960px;

height: 240px;

}





/* utility */

#login, #login ul { /* all lists */

margin: 0;

padding: 0;

list-style: none;

}



#login {

z-index: 2;

position: absolute;

right: 15px;

top: 30px;

width: 402px;

}



#login li {

float: left;

}



#login a {

display: block;

overflow: hidden; 

text-indent: -999em;

height: 35px;

}



/* Set the image for each nav item */
#patient-forms {background: url(../images/patient-forms.png); width: 134px;}

#login-patient {background: url(../images/login-patient.png); width: 134px;}

#login-doctor {background: url(../images/login-doctor.png); width: 134px;}



/* Shift the image position up to show the active state */

#login a:hover, #login .active {background-position: 0 -35px;}



/* Set cursor to default arrow so link does not appear clickable */

#login .active {cursor: default}





/* navigation ----------------------------------------*/

#nav, #nav ul { /* all lists */

margin: 0;

padding: 0;

list-style: none;

position: relative;

z-index: 1;

}



#nav {

width: 774px;

margin: 0 0 0 93px;

}

#nav:after {clear: both; content: "."; display: block; height: 0; visibility: hidden}



#nav li {

float: left;

}



#nav a {

display: block;

overflow: hidden;

text-indent: -999em;

height: 60px;

}



/* Set the image for each nav item */

#about-us {background: url(../images/nav-about-us.gif); width: 106px;}

#new-patients {background: url(../images/nav-new-patients.gif); width: 135px;}

#family-dentistry {background: url(../images/nav-family-dentistry.gif); width: 156px;}

#cosmetic-dentistry {background: url(../images/nav-cosmetic-dentistry.gif); width: 177px;}

#contact-us {background: url(../images/nav-contact-us.gif); width: 118px;}

#home {background: url(../images/nav-home.gif); width: 82px;}



/* Shift the image position up to show the active state */

#nav a:hover, #nav .active {background-position: 0 -60px;}



/* Set cursor to default arrow so link does not appear clickable */

#nav .active {cursor: default}





/* sub-navigation --------------------*/

#nav li { display: inline; float: left;}



#nav li ul { /* second-level lists */

background: url(../images/bg-subnav.gif) no-repeat;

font: normal 12px/20px tahoma, arial, verdana, helvetica, sans-serif;

margin: 0;

padding: 0;

position: absolute;

left: -999em;

height: 32px;

width: 770px;

display: block;

text-align:center;

float: none;

}

#nav li ul li {float: none;}

#nav li ul a {

padding: 0 10px;

color: #888065;

text-indent: 0;

text-decoration: none;

line-height: 32px;

height: auto;



display:inline;

text-align:center;

}



#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */

left: 0;

display:block;

}



#nav li:hover ul a:hover, #nav li.sfhover ul a:hover { /* lists nested under hovered list items */

color: #585554;

text-decoration: underline;

}





/* page layout ----------------------------------------*/

#container {

margin: 0 auto;

position: relative;

width: 960px;

}

#container:after {clear: both; content: "."; display: block; height: 0; visibility: hidden}



#header {

margin: 0 auto;

position: relative;

width: 960px;

height: 280px;

}



#main {

width: 960px;

margin: 20px 0 0 0;

position: relative;

}

#main:after {clear: both; content: "."; display: block; height: 0; visibility: hidden}



#content {

background: #3c3a2e url(../images/bg-content.jpg) no-repeat;

width: 860px;

padding: 30px 50px 10px;

}

#content:after {clear: both; content: "."; display: block; height: 0; visibility: hidden}



.content-third {

width: 245px;

padding: 0 20px;

float: left;

text-align: center;

}



#logo-center {

text-align: center;

margin: 0 auto;

clear: both;

}

#flash-office-tour {
float: left;
}

#office-hours {
float: left;
padding: 20px;
}

.meet-the-team {
float: left;
text-align: center;
}

.border {

border: 1px solid #fff;

margin: 5px;

clear: both;

}

.treatmentborder {
border: 1px solid #fff;

margin: 5px;

padding: 5px;
}

img.left {

float: left;

margin: 0 20px 20px 0;

clear: both;

}



img.right {

float: right;

margin: 0 0 20px 20px;

clear: both;

}



img.center {

display:block;

margin:0 auto 10px auto;}



.site-map {font-weight: bold; float: left; padding-right: 30px;}

.site-map ul {list-style: none;}

.site-map a {color: #cc9;}

.site-map .sub {font-weight: normal;}

.site-map .sub ul {list-style: disc;}





/* in page sub nav ----------------------------------------*/

#sub-page-nav ul {margin: 0 0 20px 0; font: normal 12px/20px arial, verdana, helvetica, sans-serif;}

#sub-page-nav li {display:inline; list-style:none; text-indent:none; white-space:nowrap;}

#sub-page-nav li a {color: #fc6; padding: 0 10px 0 0; white-space:nowrap; text-decoration: underline;}

#sub-page-nav li a:visited {text-decoration: underline;}

#sub-page-nav li:hover a, #sub-page-nav li a.active {color: #9cc; font-weight:normal; text-decoration:none;}

#sub-page-nav li.#sub-page-nav-first a{padding-left:0; border-left:none;}

#sub-page-nav li.first a{padding-left:0; border-left:none;}

#sub-page-nav.color li a {color: #09c;}





/* footer */

#footer {

background: #f2ecd6 url(../images/bg-footer.gif) no-repeat;

width: 800px;

margin: 0;

padding: 40px 80px 20px;

text-align: center;

line-height: 20px;

color: #3c3a2e;

display: block;

clear: both;

overflow: hidden;

}



#footer h4 {

font: italic bold 12px/20px "Trebuchet MS", sans serif;

color: #3c3a2e;

}



#footer a {

font: 11px/16px arial, verdana, helvetica, sans-serif;

color: #7c765e;

text-decoration: underline;

}



#footer a:hover {

text-decoration: none;

}



#footer li {

display: inline;

list-style-type: none;

padding-right: 10px;

}





/* sesame ----------------------------------------*/

#sesame {

margin: 0;

padding: 0 0 20px 0; 

text-align: center;

}



#sesame a {

font: 10px/16px arial, verdana, helvetica, sans-serif;

color: #7c765e;

text-decoration: underline;

}



#sesame a:hover { text-decoration: none; }





/* clearfix ----------------------------------------*/

.clearfix:after {

	content: ".";

	display: block;

	clear: both;

	visibility: hidden;

	line-height: 0;

	height: 0;

}

 

.clearfix {

	display: inline-block;

}

 

html[xmlns] .clearfix {

	display: block;

}

 

* html .clearfix {

	height: 1%;

}





/* link types */

a.pdf { background: url(../images/icon-pdf.gif) no-repeat; padding-left: 16px; }

a.top { background: url(../images/arrow-top.gif) no-repeat; padding-left: 14px; font: bold 11px/0 arial, verdana, helvetica, sans-serif; text-transform: uppercase; color: #696650; text-decoration: none; }

a:hover.top { color: #848065; }



.back-to-top {

clear: both;

float: right;

padding: 20px 20px 10px 0;

}





/* SESAME */

.flash-replaced .alt {

display: block;

width: 0px;

height: 0px;

position: absolute;

overflow: hidden;}





ul#toggle-content {list-style: none; margin: 0 0 15px 0;}

#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;}

#flash-know-your-teeth {margin: 15px 0;}

.flash-replaced .alt {

display: block;

width: 0px;

height: 0px;

position: absolute;

overflow: hidden;}

.hide {display: none;}



/* The Game Room */

div#sesame-game {background: #000; line-height: 0; margin: 10px auto 30px auto; text-align: center; width: 400px}

ul#sesame-games {list-style: none; margin: 0 18px 0 0; padding: 0}

ul#sesame-games li {clear: both; display: block}

ul#sesame-games img {border: 0; float: right; margin: 0 0 10px 10px}

ul#sesame-games a.button {float:right; height:85px; width:200px}

ul#sesame-games p { padding-bottom: 1em}



/* brushing & flossing */

#flash-brushing-and-flossing-ortho {

width: 500px;

height: 300px;

margin: 10px auto;}

.flash-replaced .alt {

display: block;

width: 0px;

height: 0px;

position: absolute;

overflow: hidden;}



/* iBraces */

.left {

float:left;

margin:0 10px 10px 0;}

img.right {

float:right;

margin:0 0 10px 10px;}

.clear {

clear:both;}

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

.flash {

border: solid 1px #ccc;}

#flash-ibraces-1 {

width: 320px;

height: 266px;}

#flash-ibraces-2, #flash-ibraces-3 {

width: 352px;

height: 266px;}