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

/* TEXT ---------- */
body {
	color: #000; 
	font: 12px/18px Arial, Helvetica, sans-serif; 
	text-align:left;
	}
p {
	padding: 0px 0 15px 0px;
	}

/* HEADERS ---------- */
/* jcIR Styles --------- */
h1.jcir {/* standard styles for your headings if image replacement not-available */

}
h1.replaced {/* jcIR plugin wraps text in div named replaced and hides it */
	overflow: hidden; 
	text-indent: -999em; 
	background-repeat: no-repeat;
	padding-bottom: 15px;
}
h2{
	color: #84a049; 
	padding: 10px 0 10px 0;  
	line-height: 130%; 
	}
h3{
	color: #b64c32; 
	padding: 10px 0 10px 0; 
	}
	
/* LISTS ---------- */
ol, ul {
	padding: 0 0 10px 20px;
	}

/* LINKS ---------- */
a {
	color: #84a049;
	text-decoration: underline;
	}
a:visited{
	color: #84a049;
	text-decoration: underline;
	}
a:hover {
	color: #84a049; 
	text-decoration: none; 
	}
#logo {
	position:absolute; 
	top:17px; 
	left:50%;
	margin-left: -432px; 
	width: 228px; 
	height: 88px; 
	display: block; 
	background: url(../images/logo.gif) no-repeat; 
	}
#logo a {
	display: block; 
	width: 228px; 
	height: 88px;
	}
#abo-logo {
	position:absolute; 
	top:398px; 
	left:5px; 
	width: 239px; 
	height: 58px; 
	display: block; 
	background: url(../images/abo-logo.gif) no-repeat; 
	}
#abo-logo a {
	display: block; 
	width: 239px; 
	height: 58px;
	}
#schedule {
	position:absolute; 
	top:240px; 
	left:5px; 
	width: 239px; 
	height: 145px; 
	display: block; 
	background: url(../images/schedule.jpg) no-repeat; 
	}
#schedule a {
	display: block; 
	width: 239px; 
	height: 145px;
	}
#invisalign-logo {
	position:absolute; 
	top:529px; 
	left:5px; 
	width: 239px; 
	height: 58px; 
	display: block; 
	background: url(../images/invisalign-logo.jpg) no-repeat; 
	}
#invisalign-logo a {
	display: block; 
	width: 239px; 
	height: 58px;
	}
#aao-logo {
	position:absolute; 
	top:464px; 
	left:5px; 
	width: 239px; 
	height: 58px; 
	display: block; 
	background: url(../images/aao-logo.jpg) no-repeat; 
	}
#aao-logo a {
	display: block; 
	width: 239px; 
	height: 58px;
	}
.sesame a {color:#b64c32;}

#util {
	position: absolute;
	top: 17px;
	left: 50%;
	margin-left: 169px;
	width: 262px;
	z-index: 100;}
#util ul {
	list-style: none; 
	padding: 0;
	}
#util li {
	float: left; 
	display:inline;
	}
#util a {
	width: 131px;
	height: 29px; 
	display: block; 
	overflow: hidden; 
	text-indent: -999em;
	}
#patient-login {background: url(../images/patient-login.gif) 0 0;}
#doctor-login {background: url(../images/doctor-login.gif) 0 0;}
#util ul li:hover a, #util li.sfhover a,#util a:hover, #util .active {
	background-position: 0 -29px;
	}
#util li.active a{
	background-position: 0 -29px;
	}

/* NAVIGATION ---------- */
#nav-container{height: 47px; width: 878px;}
#nav {
	position:absolute;
	top: 119px;
	left:50%;
	margin-left: -432px;
	width: 875px;
	z-index: 100;}
#nav ul {list-style: none; padding: 0;}
#nav li {display:inline; float: left; margin: 0;}
#nav a {height: 29px; display: block; overflow: hidden; text-indent: -999em;}
#about-our-office {background: url(../images/nav/about-our-office.gif) 0 0; width:109px;}
#about-orthodontics {background: url(../images/nav/about-orthodontics.gif) 0 0; width:133px;}
#for-new-patients {background: url(../images/nav/for-new-patients.gif) 0 0; width:116px;}
#about-braces {background: url(../images/nav/about-braces.gif) 0 0; width:98px;}
#emergency-care {background: url(../images/nav/emergency-care.gif) 0 0; width:114px;}
#faqs {background: url(../images/nav/faq.gif) 0 0; width:46px;}
#treatment-options {background: url(../images/nav/treatment-options.gif) 0 0; width:131px;}
#contact-us {background: url(../images/nav/contact-us.gif) 0 0; width:78px;}
#home {background: url(../images/nav/home.gif) 0 0; width:50px;}
#nav ul li:hover a, #nav li.sfhover a,#nav a:hover, #nav .active {
	background-position: 0 -29px;
	}
#nav li.active a{
	background-position: 0 -29px;
	}

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

/*DROP DOWNS-----------*/
#nav li ul {
	position: absolute; 
	top: -999em; 
	left: 0; 
	margin: 0 0 0 -10px; 
	padding: 0px 0 3px 0; 
	display: block;	
	width: 888px; 
	height: 18px; 
	background: #FBF7ED;
	text-align: center;
	}
#nav li ul li {
	float: none; 
	display: inline;
	margin: 0;
	}
#nav li ul li a { 
	font: bold 11px/18px Tahoma, Helvetica, sans-serif;
	float: none; 
	display: inline;
	padding: 0 3px 0 5px; 
	border-left: 1px solid #b64c32; 
	color: #b64c32; 
	text-decoration: none;
	text-indent: 0;
	}
#nav li ul li a:hover, #nav li ul li a.active, #nav li ul li.active a { 
	color: #84a049; 
	text-decoration: none;
	}
#nav li:hover ul, #nav li.sfhover ul {
	top: auto; 
	left: 0; 
	}
#nav li.active ul {
	top: auto; 
	left: 0; 
	}
#nav li.first a {
	border: none;
	}

/* SUBNAV ----------------*/
.sub_nav a{
	color: #56422a; 
	text-decoration: underline;
	}
.sub_nav a:visited {
	text-decoration: underline;
	}
.sub_nav a:hover, .sub_nav a.active {
	text-decoration:none;
	}
	
/* TEXT_NAV - FOOTER NAV ----------------*/
.text_nav {
	padding-top: 10px;
	font-size: 12px;
	line-height:18px;
	color: #b64c32;
	font-weight: bold;
	}
.text_nav a {
	color: #b64c32;
	text-decoration: none;
	}
.text_nav a:visited{
	text-decoration: none;
	}
.text_nav a:hover{
	text-decoration: underline;
	}	
	
/* LAYOUT ---------- */
.clear{clear:both;}
.hide {display:none;}
.flash-replaced .alt {
	display: block;
	width: 0px;
	height: 0px;
	position: absolute;
	overflow: hidden;
	}
div.hr { 
	background: #COLORGOESHERE; 
	clear: both; 
	height: 1px; 
	margin: 20px 0; 
	width: 100%; 
	}
div.hr hr { display: none; }
#top {
	background:  url(../images/top-tile.gif) repeat-x 0 0;
	height: 177px;
	}
#main {position: relative;
	background: url(../images/main-tile.png) repeat-y 0 0;
	width: 909px;
	margin: 0px auto 0 auto;
	}
#header {
	height: 169px; 
	width: 909px;
	margin: 0 auto;
	display:block;
	background: url(../images/header-bg.gif) no-repeat 0 0;
	}
#office-address{
	position:absolute;
	top: -8px;
	left:5px;
	width: 221px;
	height: 211px;
	font-size: 12px;
	padding: 15px 0 0 22px;
	line-height:18px;
	color:#FFF; 
	display:block;
	background: url(../images/address-bg.gif) no-repeat 0 0;
	}
#office-address a{
	color:#FFF;
	text-decoration:none;
	}
#mid {
	height: 8px; 
	width: 909px;
	display:block;
	background: url(../images/mid-bg.gif) no-repeat 0 0;
	margin: -8px auto 0 auto;
	}
#text{
	width:610px;
	padding: 232px 36px 0 263px;
	min-height: 400px;
	_height: 400px;
	}
#flash-home{
	position: absolute;
	top:-8px;
	left:263px;
	background: url(../images/frame.jpg) no-repeat 0 0;
	border:none;
	z-index:1;
	}
#footer {
	background: url(../images/footer-bg.gif) no-repeat top center; 
	font-size: 12px; 
	line-height:18px;
	margin: 0 auto;
	padding: 50px 0 0 0; 
	text-align: center; 
	width:909px; 
	height:145px;
	}

/* 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:20px;
	}
.centro{
	position: absolute;
	top:-8px;
	left:263px;
	border:none;
	z-index:1;
	}

img.center {
	display:block;
	margin:0 auto 10px auto;
	}

iframe {
	border: 1px solid #B64C32; 
	margin-bottom:20px;
	}

/* 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 {margin-bottom: 10px;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;}

/* SURESMILE ----------*/
p.small {
font-size: 10px;}
img.photo {
border: solid 1px #000;
float: right;
margin: 0 0 15px 15px;}
div.learn-more {
background-color: #fff;
color: #036;
width: 50%;
border: solid 1px #fff;
padding: 0;
margin: 15px 18px 15px 15px;
float: right;}
div.learn-more a {color: #036;}
.learn-more h3 {
background-color: #97AFC2;
color: #fff;
margin: 0 0 10px 0;
padding: 10px;}
.learn-more p {
padding: 0;
margin: 0 0 10px 0;}
.clear {clear: both;}
#flash-suresmile-pt-testimonial {
margin: 15px auto;
width: 320px;
height: 206px;
border: solid 1px #ccc;}

/* ANATOMY OF A TOOTH ---------- */
#toggle-content {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;}

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

/* THE DAMON SYSTEM ---------- */
#damon-bracket {
display:block;
margin:0 auto 10px auto;}
#damon-wrap {
width:400px;
margin:0 auto;}
#damon-left {
float:left;
width:175px;
margin-right:20px;}
#damon-right {
float:left;
width:170px;}
#flash-damon-system-comparison {
margin:0 auto;
width:250px;}
#video-the-damon-system {
margin: 0 15px 15px 0;
width: 240px;
height: 206px;
float: left;
clear: left;}
#video-the-damon-system-2 {
margin: 0 15px 15px 0;
width: 400px;
height: 330px;
float: left;
clear: left;}

/* THE CLARITY SMART CLIP ---------- */
#flash-clarity-smart-clip {
width: 520px;
height: 390px;
margin: 10px auto;
clear: both;}

/* OPALESCENCE ---------- */
#video-opalescence {
width: 400px;
height: 251px;}


/* LOCATION ---------------------- */

.maptextlink {
text-align: right;
margin: 0 12px 0 0;
padding:0;
}


/* MEET THE TEAM ---------------------- */


.videocredit {
	width: 140px;
	font-size: 90%;
	color: #666666;
	float: right;
	margin-top: 40px;
	text-align: right;
}

.videocredit img {
	float: right;
	margin-left: 5px;
}