/* CSS Document */

/* HTML, BODY ---------- */

* {margin:0; padding:0;}

body {position:relative; margin:0; background: url(images/bg.jpg) no-repeat top center #e4dfd7; font-family: Arial, Helvetica, sans-serif; font-size:12px; line-height:16px; color:#e4dfd7;}

p, h2, h3, ul, ol, blockquote {padding-top:7px; padding-bottom:7px;}

ul, blockquote {padding-left:30px; padding-right:20px;}

a {color:#e4dfd7;}

#footer a {color:#7f7364;}

#footer h2, #footer p {padding:0; margin:0;}

a:hover {text-decoration:none;}

a img {border-style:none;}



/* LAYOUT ---------- */

* #wrap {margin:0 auto;	width:780px; overflow:auto;	background: url(images/tile-body.jpg) repeat-y; background-position: 0px 546px;}

* #bodyheader {width:780px; background:url(images/header.jpg) no-repeat; overflow:auto;}

* #body {width:780px; background:url(images/bg-bottom.jpg) bottom no-repeat; overflow:auto; clear:both;}

* #text {position:relative; width:550px;  float:right; padding-right:20px; padding-top:52px; padding-bottom:60px; min-height:500px; height:auto !important; overflow:auto; }

* #address {width:141px; margin:-222px 0 0 19px; padding:0; color:#063477; position:absolute; clear:left;}

* #forms {padding:10px; background-color:#90abd9; border:10px solid #FFF; width:180px; margin: 10px 10px 10px 10px; float:right; /* color:#07367a; */ clear:right;}

#forms h3, #forms a {color:#021533}

* #footer {width:640px; padding:13px 70px 20px 70px; font-size:11px; color:#7f7364; text-align:center; clear:both; margin:0 auto;}





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

#text h1 {background-repeat: no-repeat; height: 73px; width:423px; text-indent: -999em; margin: 0; padding:0;}

h3 {color:#e4dfd7; font-size:12px; font-style:italic; font-weight:normal;}

h2 {color:#063477; font-size:14px;}

#footer h2 {color:#021634; font-size:11px;}

h1#logo {

margin: 0;

padding: 0;

background-repeat: no-repeat; 

width: 497px;/* this width reflects the width of the logo image */

height: 232px; /* 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: 232px;/*same height as logo h1*/ 

width: 497px;/*same width as logo h1*/}



/* CLASSES ---------- */

* #footer .sesame {color:#021634; font-weight:bold;}

* .img {margin:0 10px 10px 10px;}

* .right {float:right;}

* .left {float:left;}

* .top  {color:#e4a732; font-size:11px; font-weight:bold;}

* .hide {display:none;}

* .flash {margin:0 auto;}

* .flashp {color:#000; background-image: url(images/1.jpg); text-align:center; padding-bottom:180px; width:543px;}

* .block {display:block;}

* .listnone {list-style:none;}

* .center {text-align:center;}

* .hide {display:none;}

* .clear {clear:both;}

* .sub#text {margin-top:23px;}

* .maps {border:#FFF 5px solid; padding:0; float:right; margin:0;}

* .hide {display:none;}


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


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

ul#nav {list-style: none; padding: 0 0 0 1px; margin:0; position:absolute; top: 242px; z-index:99; width:778px}

#nav li {float:left;}



/*  Sets styles for all links that are inside the ul id="nav" */

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



/* Set the image for each nav item */

* #aboutus {background: url(images/nav-about-us.jpg); width:114px;}

* #aboutorthodontics {background: url(images/nav-about-orthodontics.jpg); width:219px;}

* #braces101 {background: url(images/nav-braces-101.jpg); width:122px;}

* #invisalign {background: url(images/nav-invisalign.jpg); width:125px;}

* #contactus {background: url(images/nav-contact-us.jpg); width:123px;}

* #home {background: url(images/nav-home.jpg); width:75px;}



/* Shift the image position up to show the active state */

#nav a:hover, #nav .active, #nav li:hover, #nav li.sfhover, 

#nav li:hover #aboutus, #nav li.sfhover #aboutus, 

#nav li:hover #aboutorthodontics, #nav li.sfhover #aboutorthodontics, 

#nav li:hover #braces101, #nav li.sfhover #braces101, 

#nav li:hover #invisalign, #nav li.sfhover #invisalign, 

#nav li:hover #home, #nav li.sfhover #home, 

#nav li:hover #contactus, #nav li.sfhover #contactus {background-position:0 -29px;}



/* 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 {background: #92a6c4; left: -999em; padding: 5px 0 5px 0; position: absolute; z-index: 1; border:#063477 1px solid; }

#nav li ul li {float:none;}

#nav li:hover ul, #nav li.sfhover ul {left: auto; margin: 0; color:#edca58;}

#nav ul li a {height:17px; margin: 0; text-decoration: none; width: 172px; text-indent:0; color:#063477; font-size:11px;	padding-left:10px; font-weight:bold;}

#nav ul li a:hover {background:#2a518a; color:#92a6c4;}



/* LOGINS NAV ITEMS ---------- */



ul#logins {height: 45px; width:174px; list-style: none; padding:0; margin:0 0 0 618px; position:absolute; top: 194px; z-index:98;}



/*  Makes the list items sit next to each other */

#logins li {float: left;}



/*  Sets styles for all links that are inside the ul id="nav" */

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

/* Set the image for each nav item */

* #patientlogin {background: url(images/nav-patient-login.jpg);width:161px;}

/* Shift the image position up to show the active state */

#logins a:hover, #logins .active, #logins li:hover, #logins li.sfhover {background-position:0 -45px;}

/* Set the cursor to default arrow so link does not appear clickable */

#logins .active {cursor: default}



div#sesame-game {

background: #000;

line-height: 0;

margin: 10px auto;

text-align: center;

width: 400px}



ul#sesame-games {

list-style: none;

margin: 0;

padding: 0}



ul#sesame-games li {

clear: both;

display: block}



ul#sesame-games img {

border: 0;

margin: 0 0 10px 10px}



ul#sesame-games a.button {

float:right;

height:85px;

width:200px}



ul#sesame-games p {

padding-bottom: 1em}

h2.media-center {

background:#000033;

color:#FFF;

margin:0;

padding:5px; width:410px;}

div.media-center {

background:#336699;

color:#FFF;

display:inline-block;

margin-bottom:10px;

overflow:auto;

padding:10px; width:400px;}

div.media-center a {

color:#FFF;}

div.media-center img {

border:1px solid #FFF;}

/* edit.com */

ul, ol {
	margin-top:0px;
	margin-bottom:0px;
}

* .PatForms {
	color:#021533;
	font-size:12px;
	font-style:italic;
	font-weight:normal;
}

.FooterText {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #021634;
	font-weight: bold;
}

.BlueText {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #07367a;
	font-weight: normal;
}

.NormalText, body, td {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #E4DFD7;
	font-weight: normal;
	text-decoration: none;
	text-transform: none;
	font-style:normal;
}

.SubjectHeader {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	color: #063477;
	font-weight: bold;
}

.PageTitle {
	font-family: Times New Roman, "Times", serif;
	font-size: 30px;
	line-height: 32px;
	color: #063477;
	font-weight: bold;
}









img.right {
	float: right;
	margin: 0 0 15px 15px;
	}
	
	img.left {
	float: left;
	margin: 0 15px 15px 0px;
	}
.right-border {
	border: solid 2px #063477; /* Customize me!! */
	float: right;
	clear: right;
	margin: 0 0 15px 15px;
	}
.left-border {
	border: solid 2px #063477; /* Customize me!! */
	float: left;
	clear: left;
	margin: 0 15px 15px 0;
	}
#video-invisalign {
	width: 360px; 
	height: 266px;
	display: block;
	}
p.flash_notice {
	margin: 18px;
	padding: 9px;
	color: #ff0000;
	border: 1px dotted #ff0000;
	background: #ffffff;
	text-align: center;
	}
	
	
	ul#testimonials {
	margin: 0;
	padding: 0;
	list-style: none;
	list-style-image: none;
	}
	
	
.invisalign-block {
	width: 315px; 
	float: left;
	}
	
	
	
	span.indent {
	padding-left: 40px;
	}
#invisalign-sidebar {
	background: #fff;
	width: 275px;
	margin: 0 0 15px 15px;
	padding: 0;
	border: solid 1px #000;
	line-height: 18px;
	font-size: 11px;
	float: right;
	clear: right;
	}
#invisalign-sidebar a {
	color: #036;
	}
#invisalign-sidebar h3 {
	background: #063477;
	margin: 0;
	padding: 15px;
	color: #fff;
	}
#invisalign-sidebar p {
	padding: 0 15px;
	margin: 15px 0;
	}
.thumb {
	border: solid 1px #000;
	margin: 0 10px 10px 0;
	float: left;
	clear: left;
	}




/* Invisalign Before and After */
ul#before-after-cycle li img.invisalign {
	height: 265px;
	}
#invisalign-before-after {
	width: 488px;
	min-height: 335px;
	line-height: 18px;
	margin: 0 0 18px 0;
	padding: 10px 0 10px 10px;
	background-color: #063477; /* 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 */
	}
#invisalign-before-after ul.slideshow {
	list-style: none; 
	margin: 0; 
	padding: 0;
	width: 488px;
	height: 270px;
	overflow: hidden;
	}
ul#before-after-cycle li img {
	width: 232px;
	float: left;
	margin-right: 10px;
	border: solid 1px #333; /* Customize me */
	}
#invisalign-before-after p {
	float: left;
	width: 50%;
	margin: 0 0 10px 0;
	}
#invisalign-before-after div.cycle-detail {
	min-height: 55px;
	clear: both;
	background-color: #fff; /* Customize me */
	color: #333; /* 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 */
	}
#invisalign-before-after .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 */
	}
#invisalign-before-after .before-after-nav a {
	text-decoration: none; 
	font-size: 12px; 
	padding: 5px; 
	margin: 0 3px;
	outline: none;
	color: #333; /* Customize me */
	}
#invisalign-before-after .before-after-nav a.activeSlide, #invisalign-before-after .before-after-nav a:hover {color: #009EC7;} /* Customize me */
	








img.border {
	border: solid 1px #333; /* Customize me!! */
	}

	
.bump-right {
	margin-right: 5px;
	}
	

	
	
/* Invisalign Footer */	
#invisalign-footer {
	
	width: 100%;
	margin: 30px 0;
	padding: 0;
	border: solid 1px #333; /* Customize me!! */
	font-size: 11px;
	-moz-border-radius: 5px; /* Optional - you may customize or remove */
	-webkit-border-radius: 5px; /* Optional - you may customize or remove */
	clear: both;
	}
#invisalign-footer h3 {
	background: #063477; /* Customize me!! */
	margin: 0;
	padding: 8px 15px;
	color: #fff; /* Customize me!! */
	font-size: 14px;
	-moz-border-radius: 5px 5px 0 0; /* Optional - you may customize or remove */
	-webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; /* Optional - you may customize or remove */
	}
#invisalign-footer ul li img {
	margin: 0 10px 0 15px;
	float: left;
	}
#invisalign-footer p {
	padding: 0 15px;
	margin: 30px 0 15px 0;
	}
#invisalign-footer ul {
	margin: 15px; 
	padding: 0 0 15px 0;
	list-style: none;
	border: solid 1px #333; /* Customize me!! */
	border-width: 0 0 1px 0;
	}
#invisalign-footer li {
	width: 33%;
	float: left;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	}
	
.invisalign-footer-logo {
	margin: 0 30px 0 15px;
	float: left;
	}