@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; background:#c9e3fb url(../images/tile.jpg) repeat-x; font-family: Arial, Helvetica, sans-serif; font-size:12px; line-height:18px; color:#28337e;}
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:#7da8d6; font-weight:bold;}
a:hover {text-decoration:none;}
a img {border-style:none;}
p.breadcrumbs, .breadcrumbs a {font-size:11px; font-weight:bold; color:#586aa7; clear:both; margin-top:30px;}


/* LAYOUT ---------- */
#wrapfull {width:100%; background:url(../images/tile-bottom.jpg) bottom repeat-x;}
#wrap {width:816px; margin:0 auto; background:url(../images/tile-body.jpg) repeat-y; position:relative;}
#body {width:816px; background:url(../images/bg-body.jpg) no-repeat; }
#bottom {width:816px; background:url(../images/bg-bottom.jpg) no-repeat bottom; min-height:1008px; height:auto !important; height:1008px;}
#address {width:168px; position:absolute; z-index:31; top:463px; margin-left:34px; }
#content {clear:both; width:513px; margin-left:254px;  padding-bottom:30px; }
#footerwrap {width:100%; background:#6fa2d2;}
#footer {width:796px; margin:0 auto; text-align:center; font-size:12px; line-height:18px; padding:10px 10px 30px 10px;}

/* BANNERS ---------- */
#address p{ padding:0px; margin:0px; }
#address a{ color:#FFFFFF; text-decoration:none; font-size:11px; font-weight:bold; }
#address a:hover{ text-decoration:underline; }
#callout-invisalign {width:187px; height:36px; position:absolute; top:910px; margin-left:22px; z-index:8; }

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

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

h1#logo {
margin: 0;
padding: 0;
background-repeat: no-repeat; 
width: 378px;/* this width reflects the width of the logo image */
height: 163px; /* 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: 163px;/*same height as logo h1*/ 
width: 378px;/*same width as logo h1*/}

#content h2 {color:#80b0dd; font-size:16px; text-transform:capitalize;}
#content h3 {color:#28337e; font-size:14px; font-weight:normal; font-style:italic;}
#footer h2 {color:#28337e; font-size:12px; font-weight:normal; line-height:18px; clear:both;}

/* CLASSES ---------- */
#footer .sesame {color:#FFF; font-weight:normal; font-size:12px; font-style:italic; border:none;}
.img {float:right; margin:0 0 10px 10px;}
.right {float:right;}
.left {float:left;}
.imgleft {float:left; margin:0 10px 10px 0;}
.hide {display:none;}
.flashhome {width:545px; height:360px;  margin-left:234px; clear:both; background:url(../images/photo1.jpg) no-repeat;}
.block {display:block;}
.listnone {list-style:none;}
.center {text-align:center;}
.clear {clear:both;}
.marginnone {margin:0; padding:0;}
.resources {padding:7px; background:#FFF; border:4px solid #586aa7;}


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


/* NAVIGATION MAIN ---------- */
ul#nav {list-style: none; padding: 0; margin:0 0 0 22px; width:191px; position:absolute; z-index:24; top:158px;}

/*  Sets styles for all links that are inside the ul id="nav" */
#nav a {display: block; overflow: hidden; text-indent:-999em; width:191px}

/* Set the image for each nav item */
.meettheteam {background: url(../images/nav-meet-the-team.jpg); height:46px;}
.aboutouroffice {background: url(../images/nav-about-our-office.jpg); height:35px;}
.aboutorthodontics {background: url(../images/nav-about-orthodontics.jpg); height:36px;}
.home {background: url(../images/nav-home.jpg); height:37px;}
.aboutbraces {background: url(../images/nav-about-braces.jpg); height:36px;}
.treatmentoptions {background: url(../images/nav-treatment-options.jpg); height:36px;}
.faqs {background: url(../images/nav-ask-the-orthodontist.jpg); height:36px;}
.contactus {background: url(../images/nav-contact-us.jpg); height:36px;}

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

/* 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:hover ul, #nav li.sfhover ul {left: auto; margin: -35px 0 0 170px; color:#FFF;  background:#28337e;}
#nav ul li a {height:auto; margin: 1px; text-decoration: none; width: 180px; text-indent:0; color:#FFF; font-size:13px; padding:10px 10px;  font-weight:bold; }
#nav ul li a:hover {background:#80b0dd; }

/* LOGINS MAIN ---------- */
ul#logins {list-style: none; padding: 0; margin-left:561px; width:238px; position:absolute; z-index:22; top:0px;}
#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:62px; width:119px;}

/* Set the image for each nav item */
.patientlogin {background: url(../images/nav-patient-login.jpg); }
.doctorlogin {background: url(../images/nav-doctor-login.jpg); }

/* 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, 
#logins li:hover .doctorlogin, #logins li.sfhover .doctorlogin {background-position:0px -62px;}

/* 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; line-height:18px; width:710px; text-align:center;}
#footernav li {padding:0; margin-bottom:5px; display:inline; white-space:nowrap;}
#footernav li a {border-right:1px solid #28337e;padding:0 5px;background:none; text-decoration:underline; color:#FFF; font-size:12px; line-height:18px;  font-weight:bold; text-indent:none; height:5px;}
#footernav li a:hover {text-decoration:none;}
#footernav li ul {display: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}

/* Invisalign */
#video-invisalign {
width: 320px;
height: 239px;}

/*Photos*/

.image-float-right {
	float: right;
	clear: right;
	display: block;
	margin-left:8px;
	margin-bottom:5px;
}


/* jQuery Cycle Before and After */
#before-after-container {
	width: 509px;
	line-height: 18px;
	margin: 0 0 18px 0;
	padding: 10px 0 10px 10px;
	background-color: #9EC6EA; /* 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 */
	}
#before-after-container ul.slideshow {
	list-style: none; 
	margin: 0; 
	padding: 0;
	width: 509px;
	height: 440px;
	overflow: hidden;
	}
ul#before-after-cycle li img {
	margin-right: 10px;
	border: solid 1px #333; /* Customize me */
	}
#before-after-container p {
	float: left;
	width: 50%;
	margin: 0 0 10px 0;
	}
#before-after-container div.cycle-detail {
	min-height: 55px; /* Increase this number to accomodate longer or shorter description text and to prevent "bumping" of lower content */
	clear: both;
	background-color: #fff; /* Customize me */
	padding: 10px;
	margin: 0 10px 0 0;
	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 */
	}
#before-after-container .before-after-nav {
	background: #fff; /* Customize me */
	margin: 0 10px 10px 0;
	padding: 5px 3px;
	border: solid 1px #333; /* Customize me */
	-moz-border-radius: 5px 5px 0 0; /* Optional - you may customize or remove */
	-webkit-border-top-left-radius: 5px; /* Optional - you may customize or remove */
	-webkit-border-top-right-radius: 5px; /* Optional - you may customize or remove */
	}
#before-after-container .before-after-nav a {
	text-decoration: none; 
	font-size: 12px; 
	padding: 5px; 
	margin: 0 3px; 
	outline: none;
	color: #333; /* Customize me */
	}
#before-after-container .before-after-nav a.activeSlide, #before-after-container .before-after-nav a:hover {color: #009EC7;} /* Customize me */

p.flash_notice {
	margin: 18px;
	padding: 9px;
	color: #ff0000;
	border: 1px dotted #ff0000;
	background: #ffffff;
	text-align: center;
	}
#your-own-box {

	background-color: #fff;
	padding: 4px 0 4px 4px;
	border: 1px solid #a8c6d8;
	margin: 0 0px 20px 0;
	width: 307px; 
	display:block; 

}