@charset "utf-8";
/* CSS Document */


.flash-replaced .alt {/*JQUERY STYLE - sets size of container to 0 to hide alternative content*/
 display: block;height: 0px;position: absolute;overflow: hidden;width: 0px;}
 
/* HTML, BODY ---------- */
* {margin:0; padding:0;}
body {margin:0; padding:0;background: url(../images/tile2.jpg) repeat-x #0f0f0e; font-family: Arial, Helvetica, sans-serif; font-size:13px; line-height:20px; color:#635630;}
p, h2, h3, ul, blockquote, ol {padding-bottom:10px; padding-top:10px;}
ul, blockquote, ol {padding-left:30px; padding-right:10px; padding-top:10px;}
a {color:#635630; }
a:hover {text-decoration:none;}
a img {border-style:none;}
p.breadcrumbs, .breadcrumbs a {font-size:12px; font-weight:bold; color:#3e5a55; clear:both; padding:30px 0px;}
hr {border:1px solid #cac0a2; }


/* LAYOUT ---------- */
#wrap {margin:0 auto; width:990px; position:relative; background:url(../images/bg-body.jpg) no-repeat #FFF;}
#address {float:right; width:330px; text-align:right; padding:17px 24px 97px 0; color:#FFF; font-size:13px; line-height:16px;  }
#content {width:620px; margin-left:297px; clear:both; padding-bottom:20px; min-height:1330px; height:auto !important; height:1330px;}
#footer {margin:0 auto; width:965px; padding:25px 0 30px 25px;  line-height:20px; background:url(../images/tile-footer.jpg) repeat-x; overflow:auto;}
#col1 {float:left; width:247px; padding-right:25px;}
#col2 {float:left; width:620px;}

.content_home {min-height:500px; height:auto !important; height:500px;}
.content_sub {min-height:840px; height:auto !important; height:840px;}

/* BANNERS ---------- */
#callouts {width:260px; position:absolute; top:353px; margin-left:0px; z-index:8; }
#callouts-vids-logos {width:260px; text-align:center; border:1px solid #b2a88a; margin-left:10px; margin-top:26px;}


/* HEADERS ---------- */

h1 {background-repeat: no-repeat; height: 43px; width:494px; text-indent: -999em; margin: 0; padding:0; background-position: bottom;}
h1.replaced {overflow: hidden; text-indent: -999em; background-repeat: no-repeat; background-position: bottom;}
h1.jcir {font-size: 35px; margin: 0 0px; }

h1#logo {float:left; 
margin: 0;
padding: 0;
background-repeat: no-repeat; 
width: 617px;/* this width reflects the width of the logo image */
height: 106px; /* this height reflects the height of the heading image */
overflow: hidden; 
text-indent: -999em;} /* hides rich text so only background image shows */

h1#logo a {
display: block; 
height: 106px;/*same height as logo h1*/ 
width: 617px;/*same width as logo h1*/}

#content h2 {color:#50867c; font-size:15px; }
#content h2.special {color:#635630; font-size:15px;}
#content h3 {color:#272317; font-size:14px; font-style:italic; font-weight:normal;}
#content h4 {color:#635630; font-size:13;}
#footer h2 {color:#afd5cf; font-size:12px; margin:0; padding:0; line-height:14px; }
#address h2 {padding:0; color:#FFF; font-size:15px; }

/* CLASSES ---------- */
#footer .sesame {color:#FFF; font-size:13px; }
.right {float:right;}
.left {float:left;}
.imgleft {float:left; margin:0 10px 10px 0;}
.imgright {float:right; margin:10px 0px 10px 10px;}

.border { border:#907962 3px solid;	
	-moz-border-radius: 4px; /*for Moz, optional*/
	-webkit-border-radius: 4px; /*for Webkit Browsers, optional*/
}
.border-left { border:#907962 3px solid;
	float:left;
	margin:0 10px 10px 0;
	-moz-border-radius: 4px; /*for Moz, optional*/
	-webkit-border-radius: 4px; /*for Webkit Browsers, optional*/
}
.border-right { border:#907962 3px solid;
	float:right;
	margin:0 0 10px 10px;
	-moz-border-radius: 4px; /*for Moz, optional*/
	-webkit-border-radius: 4px; /*for Webkit Browsers, optional*/
}

.hide {display:none;}
.flashhome {width:990px; height:173px;  background:url(../images/flash.jpg) no-repeat;}
.img {margin-left:6px;}
.block {display:block;}
.listnone {list-style:none;}
.center {text-align:center;}
.clear {clear:both;}
.marginnone {margin:0; padding:0;}
.resources {padding:7px; background:#FFF; }
.welcome {padding-top:10px;}
.video {padding-top:10px;}
.rule {padding-left:15px;}

/* NAVIGATION ---------- */


/* NAVIGATION MAIN ---------- */
ul#nav {list-style: none; padding: 0; margin:0; width:990px; position:absolute; z-index:24; top:279px; height:28px;}
/*  Sets styles for all links that are inside the ul id="nav" */
#nav a {display: block; overflow: hidden; text-indent:-999em; height:28px}
#nav li {float:left;}
/* Set the image for each nav item */
.aboutouroffice {background: url(../images/nav/about-our-office.gif);  width: 133px;}
.fornewpatients {background: url(../images/nav/for-new-patients.gif);  width: 130px;}
.aboutorthodontics {background: url(../images/nav/about-orthodontics.gif);  width: 145px;}
.faqs {background: url(../images/nav/ask-the-orthodontist.gif);  width: 54px;}
.emergencycare {background: url(../images/nav/emergency-care.gif);  width: 129px;}
.aboutbraces {background: url(../images/nav/about-braces.gif);  width: 107px;}
.treatmentoptions {background: url(../images/nav/treatment-options.gif);  width: 140px;}
.contactus {background: url(../images/nav/contact-us.gif);  width: 91px;}
.home {background: url(../images/nav/home.gif);  width: 61px;}

/* Shift the image position up to show the active state */
#nav a:hover, #nav .active, #nav li:hover, #nav li.sfhover, 
#nav li:hover .aboutouroffice, #nav li.sfhover .aboutouroffice, 
#nav li:hover .fornewpatients, #nav li.sfhover .fornewpatients, 
#nav li:hover .faqs, #nav li.sfhover .faqs, 
#nav li:hover .aboutorthodontics, #nav li.sfhover .aboutorthodontics, 
#nav li:hover .emergencycare, #nav li.sfhover .emergencycare, 
#nav li:hover .treatmentoptions, #nav li.sfhover .treatmentoptions, 
#nav li:hover .aboutbraces, #nav li.sfhover .aboutbraces, 
#nav li:hover .home, #nav li.sfhover .home, 
#nav li:hover .contactus, #nav li.sfhover .contactus {background-position:0 -28px;}

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


#nav, #nav ul {list-style: none; margin: 0; }
#nav li {display: inline; }
#nav li ul { left: -999em; padding: 0; position: absolute; z-index: 1; padding:0 0; }
#nav li ul li {float:none;}
#nav li:hover ul, #nav li.sfhover ul {left: auto; margin: 0; color:#FFF;  background:#857850; filter:alpha(opacity=90);	-moz-opacity:0.9;	-khtml-opacity: 0.9;	opacity: 0.9;}
#nav ul li a {height:auto;  text-decoration: none; width: 150px; text-indent:0; color:#FFF; font-size:13px; padding:5px 10px; }
#nav ul li a:hover {background:#e5e0d1; color:#7f7149;}

/* logos MAIN ---------- */
ul#logos {list-style: none; padding: 0;  width:260px; }
/*  Sets styles for all links that are inside the ul id="nav" */
#logos a {display: block; overflow: hidden; text-indent:-999em;   width:260px; }

/* Set the image for each nav item */
.banner_invisalign {background: url(../images/logos/invisalign.png); height:53px;}
.banner_aao {background: url(../images/logos/aao.png); height:76px;}
.banner_abo {background: url(../images/logos/abo.png); height:75px;}

/* Shift the image position up to show the active state */
#logos a:hover, #logos .active, #logos li:hover, #logos li.sfhover, 
#logos li:hover .banner_invisalign, #logos li.sfhover .banner_invisalign,
#logos li:hover .banner_invisalign, #logos li.sfhover .banner_aao,
#logos li:hover .banner_invisalign, #logos li.sfhover .banner_abo {background-position: -260px 0;}

/* LOGINS MAIN ---------- */
ul#logins {list-style: none; padding: 0; margin-left:662px; position:absolute; z-index:22; top:307px; float:left}
ul#logins li {float:left}
/*  Sets styles for all links that are inside the ul id="nav" */
#logins a {display: block; overflow: hidden; text-indent:-999em;  height:31px; }

/* Set the image for each nav item */
.patientlogin {background: url(../images/nav/patient-login.jpg);width:182px; }
.rewards {background: url(../images/nav/rewards.jpg); width:125px }

/* Shift the image position up to show the active state */
#logins a:hover, #logins .active, #logins li:hover, #logins li.sfhover, 
#logins li:hover .patientlogin, #logins li.sfhover .patientlogin {background-position: -182px 0;}
#logins li:hover .rewards, #logins li.sfhover .rewards {background-position: -125px 0;}


/* SITE MAP NAV */
ul#sitemap {list-style:circle;}
#sitemap li a {background:none; text-decoration:underline}
#sitemap li a:hover {text-decoration:none;}

/* FOOTERNAV */
ul#footernav {list-style:none;  margin:0; padding:0; color:#b19a82; }
#footernav li {padding:0; margin-bottom:7px; display:inline; white-space:nowrap;}
#footernav li a {border-right:1px solid #b19a82; padding:0 3px 0 0px; background:none; text-decoration:underline; color:#b19a82; font-size:12px;  text-indent:none; height:5px;}
#footernav li a:hover {text-decoration:none;}
#footernav li ul {display:none;}
#footernav a.bordernone {border:none;}

/* SUB NAV */
ul#sub {list-style:none;  margin:0 0 10px 0; padding:15px 0; clear:both; color:#232015; border-top:1px solid #cac0a2; border-bottom:1px solid #cac0a2; width:620px;}
#sub li {padding:0; margin-bottom:7px; display:inline; white-space:nowrap;}
#sub li a {border-right:1px solid #232015; padding:0 3px 0 0px; background:none; text-decoration:underline; color:#232015; font-size:13px;  text-indent:none; height:5px;}
#sub li a:hover {text-decoration:none;}
#sub li ul {display:none;}
#sub a.bordernone {border:none;}
/* Shift the image position up to show the active state */
#sub a:hover, #sub .active, #sub li:hover, #sub li.sfhover {text-decoration: none;}


.bordernone {border: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}


p.small {
font-size: 10px;}
img.photo {
border: solid 1px #000;
float: right;
margin: 10px 40px 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;}


/* Invisalign Teen*/
img.right {
border: solid 1px #000;
margin: 0 0 15px 15px;
float: right;
clear: right;}
img.right-no-border {
margin: 0 0 15px 15px;
float: right;
clear: right;}
.img-left {
border: solid 1px #000;
margin: 0 15px 20px 0;
float: left;}
span.indent {
padding-left: 40px;}
#sidebar {
background: #fff;
width: 275px;
margin: 0 0 15px 15px;
padding: 0;
border: solid 1px #000;
float: right;
clear: right;}
#sidebar a {
color: #036;}
#sidebar h3 {
background: #97AFC2;
margin: 0;
padding: 15px;
color: #fff;}
.thumb {
border: solid 1px #000;
margin: 0 10px 10px 0;
float: left;
clear: left;}
#sidebar p {
padding: 0 15px;
margin: 15px 0;}
.clear {clear: both;}

/* tour */
ul.slideshow {
	list-style: none; 
	margin: 0; 
	padding: 0;}
#slideshow-container {
	background: #fff; /* Customize me */
	border: solid 1px #333; /* Customize me */
	-moz-border-radius: 5px; /* Optional - you may customize or remove */
	-webkit-border-radius: 5px; /* Optional - you may customize or remove */
	width: 500px; 
	height: 420px; 
	padding: 10px;
	position: relative;}
#caption {
	margin: 25px 5px;
	height: 30px; /* Adjust this if caption text runs over two lines long */
	display: block;
	font-weight: bold;
	font-size: 1.17em;}
ul.slideshow img {
	width: 500px; 
	height: 375px;}
.office-tour-nav {
	background: #93BBB4; /* Customize me */
	position: absolute; 
	z-index: 50; 
	bottom: 30px;
	padding: 0 3px;}
.office-tour-nav a {
	text-decoration: none; 
	font-size: 12px; 
	padding: 5px; 
	margin: 0 3px; 
	color: #fff;}
.office-tour-nav a.activeSlide {color: #333;}

hr{ clear:both;}