/* HTML, BODY ---------- */
html {height: 100%;}
body {background: #d6eefa url(../images/clouds.gif) repeat-x 0 0; margin: 0;}
* {margin:0; padding:0;}

/* TEXT ---------- */
body {color: #333; font: 13px/19px Verdana, Helvetica, sans-serif; text-align:left;}
p {padding: 0px 0 15px 0px;}
.blue {color: #005baa;}
.red {color: #c11331;}

@font-face  {
 font-family: cookie;
 src: url("/includes/cookienookie.eot") /* EOT file for IE */
}
@font-face  {
 font-family: cookie;
 src: url("/includes/cookienookie.ttf") /* TTF file for CSS3 browsers */
}
#home-phone { font-family:"cookie", verdana; color:#c11330; font-weight:500; font-size:30px; letter-spacing:1px;}

/* HEADERS ---------- */
/* jcIR Styles --------- */
h1.jcir {/* standard styles for your headings if image replacement not-available */
position: absolute; top: 146px; left: 285px; z-index: 1;}
h1.jcir.home {top: 139px; left: 265px;}
h1.replaced {/* jcIR plugin wraps text in div named replaced and hides it */overflow: hidden; text-indent: -999em; background-repeat: no-repeat;}
h2{color: #333; padding: 0 0 10px 0; font-size: 15px;}
h3{	padding: 0; font-size: 13px;}

/* LISTS ---------- */
ol, ul {padding:0 0 10px 20px;}

/* LINKS ---------- */
a {color: #024f92; text-decoration: underline;}
a:visited{color: #024f92; text-decoration: underline;}
a:hover {color: #024f92; text-decoration: none; }
#logo {background: url(../images/logo.gif) no-repeat 0 0; display: block; width: 207px; height: 131px; position: absolute; top:86px; left: 38px;}
#logo a {width: 207px; height: 131px;}
#text a{font-weight: bold; text-decoration:none;}
#text a:visted {text-decoration: none;}
#text a:hover{text-decoration: underline;}
#footer p a {color: #024f92;}
	
/* nav ---------- */
#nav{background: url(../images/nav-bg.gif) no-repeat 0 0;position:absolute; top:244px; left:17px; padding:12px 0 0 4px; width:201px; height: 379px; display:block; z-index: 100;}
#nav a {display: block; height: 40px; overflow: hidden; text-indent: -999px; width: 189px; background-repeat:no-repeat;}
#nav ul{padding:0;}
#for-new-patients {background: url(../images/nav/patients.gif) 0 0; }
#meet-our-team {background: url(../images/nav/team.gif) 0 0; }
#pediatric-dentistry {background: url(../images/nav/dentistry.gif) 0 0; }
#faqs {background: url(../images/nav/faqs.gif) 0 0; }
#teeth-101 {background: url(../images/nav/teeth.gif) 0 0; }
#regular-checkups {background: url(../images/nav/checkups.gif) 0 0;}
#the-game-room {background: url(../images/nav/game.gif) 0 0;}
#contact-us {background: url(../images/nav/contact.gif) 0 0;}
#home {background: url(../images/nav/home.gif) 0 0; height: 27px;}
#nav ul li:hover a, #nav li.sfhover a,#nav a:hover, #nav .active {	background-position: -189px 0;}
#nav li.active a {background-position: -189px 0;}

/* DROP-DOWN-NAVIGATION ----------------*/
#nav li {display: inline; z-index:100; margin:0; padding:0;}
#nav li ul { /* second-level lists */margin: -41px 0 0 185px; padding:0; width: 175px; position: absolute; background: #d6eefa; left: -999em; line-height: 32px; font-size: 11px; height: auto; border: 1px solid #333;}
#nav li ul a {font-weight: bold; list-style-image:none; padding: 0 0 0 10px; width: 165px; color: #333; 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 {color: #fff; background: #005baa;}

/* SUBNAV ----------------*/
.sub_nav {font-size: 11px;}
.sub_nav a{font-weight: normal; text-decoration: underline;}
.sub_nav a:visited {text-decoration: underline; font-weight: normal;}
.sub_nav a:hover, .sub_nav a.active {font-weight:normal; text-decoration:none;}

/* TEXT_NAV - FOOTER NAV ----------------*/
.text_nav {line-height: 18px;}

/* LAYOUT ---------- */
.clear{clear:both;}
.hide {display:none;}
.flash-replaced .alt {display: block;width: 0px;height: 0px;position: absolute;overflow: hidden;}
div.hr { background: #ccc; clear: both; height: 1px; margin: 15px 0 30px 0; width: 100%; }
div.hr hr { display: none; }
#main {position: relative; width: 800px; margin: 0 auto;}
#header {height: 239px; width: 800px; display:block; background: url(../images/header-bg.png) no-repeat 0 0;}
#office-address{font-size: 11px; line-height:16px; color:#3c362e; position: absolute; top: 635px; left: 34px; }
#phone-number {width: 375px; height: 32px; display: block; background:url(../images/phone-number.gif) no-repeat 0 0;}
#content{background: url(../images/content-tile.gif) repeat-y 0 0;}
#text{width:500px; padding: 0 0 20px 265px; min-height: 520px; _height: 520px;}
.home #text {padding-top: 160px; min-height: 400px; _height: 400px;}
#flash-home{border:none; z-index:25; position: absolute; top: 370px; left: 473px; width: 374px;}
#flash-logo {position:absolute; top:75px; left:32px; }
#flash-home-box{float: right; width: 305px; height: 250px; padding-top: 0px;}
*html #flash-home-box {padding-top: 0; height: 250px; width: 305px;}
*+html #flash-home-box {padding-top: 0; height: 254px; width: 305px;}
.kids-graphic {display: block; width:189px; height:212px ; background: url(../images/kids-graphic.gif) no-repeat top right; float: left;margin-top: -212px; padding-left: 18px;}	
#footer {background: url(../images/footer-bg.gif) no-repeat top center; color: #000; font-size: 11px; line-height:14px; margin: 0 auto;	padding:  30px 20px 30px 20px; text-align: center; width:760px; }

/* Shortcuts ----------*/
/* Image Replacement -- add class="replace" to root element, i.e. <p> 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 */

/* RESOURCES ---------- */
dl.logos, dl.logos dt, dl.logos dd {list-style:none;margin:0;padding:0;}
dl.logos {padding:10px;}
dl.logos dd {border-bottom:1px solid #CCC;margin:0;padding:10px 0 5px 0;width:50%;}
dl.logos span {font-size: 16px; font-weight:bold;}

/* IMAGES ---------- */
img {border:none;}

/*right and left floating image with border*/
.right {float:right; margin-left:10px; margin-bottom:10px;}
.left {float:left; margin-right:10px; margin-bottom:10px;}
.left-blue {float:left; margin-right:10px; margin-bottom:20px; border:1px solid #024f92;}
img.center {display:block; margin:0 auto 10px auto;}
.place_image { float:right; border: 1px solid #333; margin: 0 0 10px 10px; padding:0; }
iframe {border: 1px solid #333; margin-bottom:20px;}

/* ANATOMY OF A TOOTH ---------- */
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}

/* THE GAME ROOM ---------- */
div#sesame-game {line-height: 0; margin: 10px 0px 18px 0px; text-align: center;  width: 400px;background: #000;}
ul#sesame-games {list-style: none;}
ul#sesame-games li {clear: both; text-indent:none;}
ul#sesame-games img {border: 0; float:right;}
ul#sesame-games a.button {float:right; height:85px; width:200px; margin-right:10px; padding: 0 0 10px 10px;}/*THIS IS WHERE YOU MAKE PADDING ADJUSTMENTS TO THE GAMES IMG*/
ul#sesame-games p {	padding:0 10px 10px 0;}
	
/* MEDIA CENTER ---------- */
h2.media-center {background:#000033; color:#FFF; margin:0; padding:5px;}
div.media-center {background:#336699; color:#FFF; margin-bottom:10px; padding:10px;}
div.media-center a {color:#FFF;}
div.media-center img {border:1px solid #FFF;}
.flash {border: solid 1px #ccc;}
#flash-in-ovation {width: 320px;height: 266px;}
#flash-ibraces-1 {width: 320px; height: 266px;}
#flash-ibraces-2, #flash-ibraces-3 {width: 352px; height: 266px;}