/* general ----------------------------------------*/
* {margin: 0; padding: 0;}
html, body {height: 100%;}

body {
background: #247b6c url(../images/bg01.jpg) top center repeat-x;
margin: 0;
font: normal 12px/20px arial, verdana, helvetica, sans-serif;
color: #fff;
}

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

/* edit.com visible styles */
BODY, TD, .NormalText { text-decoration: none; font-weight: normal; font-style: normal; font-size: 12px; font-family: Arial, Verdana, Helvetica, sans-serif; color: #FFF; line-height: 20px; }

.Title		{ color: #FFFFFF; font-size: 32px; font-weight: normal; font-family: Times New Roman, imes, serif; line-height: 1em; text-transform: uppercase; }
.Header		{ color: #C2FFF7; font-size: 18px; font-weight: normal; font-family: Arial, Verdana, Helvetica, sans-serif; line-height: 24px; }
.Subheader	{ color: #ABD8F7; font-size: 16px; font-weight: bold; font-family: Arial, Verdana, Helvetica, sans-serif; line-height: 24px; }
.Subheader2	{ color: #CCCCCC; font-size: 14px; font-weight: bold; font-family: Arial, Verdana, Helvetica, sans-serif; line-height: 24px; }

.Orange		{ color: #FFCC66; }
.LightBlue	{ color: #C2FFF7; }
.Blue		{ color: #ABD8F7; }
.Black		{ color: #000000; }
.White		{ color: #FFFFFF; }
.Gray		{ color: #333333; }

.SmallText	{ font-size: 10px; }
.MediumText	{ font-size: 16px; line-height: 16px; }
.LargeText	{ font-size: 24px; line-height: 24px; }

IMG.FloatLeft 	{ float: left; margin: 0 10px 10px 0; }
IMG.FloatRight 	{ float: right; margin: 0 0 10px 10px; }
IMG.WhiteBorder { border: 5px solid #fff; }

TABLE.team-profiles	   { margin-bottom: 15px; }
TABLE.team-profiles TD { border-bottom: 1px solid #C7C7C7; padding: 15px 0; }
TABLE.team-profiles TD.first { padding: 0 0 15px 0; }

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

a:hover { text-decoration: none; }

h1 {
background-repeat: no-repeat; 
height: 120px; /* height of the h1 image */
width: 540px;
margin: 0;
overflow: hidden; 
text-indent: -999em; /* hides rich text so only background image shows */
}

h2 {
font: normal 18px/24px arial, verdana, helvetica, sans-serif;
color: #c2fff7;
margin: 12px 0;
}

h3 {
font: bold 16px arial, verdana, helvetica, sans-serif;
color: #abd8f7;
margin: 10px 0;
}

h4 {
font: bold 14px arial, verdana, helvetica, sans-serif;
color: #ccc;
margin: 10px 0;
}

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

ul {
list-style: disc;
}

img {border: none;}

p {margin: 0 0 10px 0;}


/* ask-me-now */
* #zyte_avatar_contents { 
width: 81px;
height: 77px;
padding: 0;
margin: 0;
position: absolute;
top: 70px;
right: 60px;
}


/* logo ----------------------------------------*/
* .logo { 
letter-spacing : -1000em;
text-indent : -999em;
overflow : hidden;
background: transparent;
padding: 0;
margin: 0;
line-height: 0;
width: 220px;
height: 185px;
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: 220px;
height: 185px;
}


/* utility */
* #utility, #utility ul { /* all lists */
margin: 0;
padding: 0;
list-style: none;
}

* #utility {
z-index: 1;
position: relative;
width: 700px;
}

#utility li {
float: left;
}

#utility a {
display: block;
overflow: hidden; 
text-indent: -999em;
height: 50px;
}

/* Set the image for each nav item */
* #patient-login {background: url(../images/utility-patient-login.gif); width: 142px;}
* #doctor-login {background: url(../images/utility-doctor-login.gif); width: 138px;}

/* Shift the image position up to show the active state */
#utility a:hover, #utility .active {background-position: 0 -50px;}

/* Set cursor to default arrow so link does not appear clickable */
#utility .active {cursor: default}


/* navigation ----------------------------------------*/
* #nav, #nav ul { /* all lists */
margin: 0;
padding: 0;
list-style: none;
position: relative;
z-index: 1;
}

* #nav {
width: 220px;
margin: 30px 0 0 0;
text-align: left;
}

#nav a {
display: block;
overflow: hidden; 
text-indent: -999em;
height: 30px;
}

/* Set the image for each nav item */
* #patient-information {background: url(../images/nav-patient-information.gif);}
* #team-profiles {background: url(../images/nav-team-profiles.gif);}
* #map-and-directions {background: url(../images/nav-contact-us.gif);}
* #prizes-and-contests {background: url(../images/nav-prizes-and-contests.gif);}
* #treatment-instructions {background: url(../images/nav-treatment-instructions.gif);}
* #treatment-options {background: url(../images/nav-treatment-options.gif);}
* #lectures {background: url(../images/nav-lectures.gif);}
* #home {background: url(../images/nav-home.gif);}

/* Shift the image position up to show the active state */
#nav li:hover a, #nav .active, #nav li.sfhover a {background-position: -220px 0;}

/* Set cursor to default arrow so link does not appear clickable */
#nav .active {cursor: default}


/* sub-navigation --------------------*/
#nav li { display: inline }

#nav li ul { /* second-level lists */
font: normal 14px/30px arial, verdana, helvetica, sans-serif;
margin: -30px 0 0 220px;
padding: 0;
width: 190px;
position: absolute;
background: #eb8022;
left: -999em;
height: auto;
/* opacity */
filter:alpha(opacity=95);
-moz-opacity:0.95;
-khtml-opacity: 0.95;
opacity: 0.95;
}

#nav li ul a {
padding: 0 0 0 15px;
width: 175px;
color: #fff;
text-indent: 0;
text-decoration: none;
line-height: 30px;
height: auto;
}

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
left: auto;
display:block;
}

#nav li:hover ul a:hover, #nav li.sfhover ul a:hover { /* lists nested under hovered list items */
color: #fff;
background: #ce5100;
}


/* page layout ----------------------------------------*/
* #container {
margin: 0 auto;
position: relative;
width: 940px;
}
#container:after {clear: both; content: "."; display: block; height: 0; visibility: hidden}

* #header {
margin: 0 auto;
position: relative;
width: 940px;
height: 150px;
}

* #sidebar {
background: url(../images/bg-sidebar.gif) no-repeat;
color: #b0f8ec;
float: left;
width: 240px;
padding: 0 0 20px 0;
}

* #contact-info {
font: 12px/18px arial, verdana, helvetica, sans-serif;
padding: 50px 20px 30px 0;
overflow: hidden;
text-align: center;
}

#contact-info h5 {
font: bold 13px/18px arial, verdana, helvetica, sans-serif;
color: #fff;
margin: 0 0 10px 0;
}

* #main {
background: #1f7365 url(../images/bg-main.jpg) no-repeat;
width: 700px;
float: left;
}

* #content {
float: left;
width: 660px;
padding: 10px 20px 20px;
min-height: 500px;
}

div.team {
width: 240px;
background-color: #fff;
color: #223a6b;
margin: 0 0 20px 20px;
float: right;
}

div.product {
width: 400px;
float: left;
}

.team a {
color: #223a6b;
}

* .border {
border: 5px solid #fff;
margin: 10px 0;
clear: both;
}

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: #fc6;}
#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-container {
background-color: #1e3665;
border-top: 10px solid #1a305b;
color: #fff;
width: 100%;
margin: 0 auto;
padding: 0;
}

* #footer {
width: 940px;
margin: 30px auto;
padding: 0;
text-align: center;
line-height: 20px;
display: block;
clear: both;
overflow: hidden;
}

#footer h6 {
font: bold 12px/20px;
}

/* footer-nav */
* #footer-nav {
width: 960px;
color: #fc6;
margin: 0 auto;
padding: 20px 0;
text-align: center;
line-height: 20px;
display: block;
clear: both;
overflow: hidden;
}

#footer-nav a {
font: 12px/24px arial, verdana, helvetica, sans-serif;
color: #fc6;
text-decoration: underline;
}

#footer-nav a:hover {
text-decoration: none;
}

#footer-nav 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/24px arial, verdana, helvetica, sans-serif;
color: #71ade0;
text-decoration: underline;
}

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


/* 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: 12px; font: bold 11px/0 arial, verdana, helvetica, sans-serif; text-transform: uppercase; color: #fff; text-decoration: none; }
a:hover.top { color: #fff; }


/* SESAME */
.flash-replaced .alt {
display: block;
width: 0px;
height: 0px;
position: absolute;
overflow: hidden;}

* #flash-homepage {
background: url(images/flash-homepage.jpg);
width: 700px;
height: 270px;}

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