/*********************************************************************
	
	Sesame Communications - (c) 2009
	Written by: Damien Komala
	All rights reserved. 
	Any reproduction or intentional misuse is strickly prohibited
	
*********************************************************************/

/*********************************************************************
	Reset
*********************************************************************/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin:0;
	padding:0;
	border:0;
	font-weight:inherit;
	font-style:inherit;
	font-size:100%;
	font-family:inherit;
	vertical-align:baseline;
}
 @font-face {
 font-family: 'SeganLight';
 src: url('../fonts/Segan-Light.eot');
 src: local('Segan Light'), local('Segan-Light'), url('../fonts/Segan-Light.ttf') format('truetype');
}

/*********************************************************************
	Common Elements
*********************************************************************/

body {
	line-height:1.5;
	font-family:Arial, Helvetica, sans-serif;
	margin:0;
	background:#cdcdcd url(../images/background.jpg) top left repeat-x;
	color: #000;
	font-size: 11px;
}

table {
	border-collapse:separate;
	border-spacing:0;
}

caption, th, td {
	text-align:left;
	font-weight:normal;
}

table, td, th {
	vertical-align:middle;
}

a img {
	border:none;
}

a {
	outline: none;
}

h1 {
	font-size: 36px;
	line-height:normal;
	font-weight: normal;
	font-family: 'SeganLight', sans-serif;
	color:#075388;
	margin-bottom: 20px;
}

h1 sup {
	font-size: 50%; 
	vertical-align: top;
}
p sup {
	font-size: 70%; 
	vertical-align: top;
} 

h2 {
	color:#87A9D8;
	font-size: 18px;
}

h3 {
	color:#87A9D8;
	font-size: 14px;
	font-weight: normal;
}

hr {
	background: #717171;
	height: 1px;
	border: none;
	clear:both;
	margin: 0 0 15px;
}

.hide {
	display:none;
}

.flash-replaced .alt {
	display:none;
}

.flash-replaced {
	margin-bottom:20px;
}

blockquote {
	margin: 0px;
	padding: 10px;
	/* border:1px solid #2F8E8E; */
	quotes: "\201C" "\201D";
}

blockquote:before {
	color:#2F8E8E;
	content: open-quote;
	font-weight: bold;
}

blockquote:after {
	color:#2F8E8E;
	content: close-quote;
	font-weight: bold;
}

p.small {
	font-size: 9px;
}

/*********************************************************************
	IE6 upgrade alert
*********************************************************************/
#ie_alert {
	display: none;
	background-color: #fff;
	width: 400px;
	color: #333;
	text-align: left;
	font-size: 11px;
	letter-spacing: normal;
	font-weight: bold;
	padding: 15px 15px 0 15px;
	border: solid 2px #a52003;
	position: absolute;
	z-index: 5000;
	top: 10px;
	left: 10px;
}

#ie_alert ul {
	margin: 0 0 15px 25px;
}

#ie_alert p {
	margin: 0 0 15px 0;
	line-height: 14px;
	padding: 0;
}

a.upgrade {
	float: left;
	margin: 0 10px 0 0;
}

span#ie_alert_reasons {
	color: #a52003;
}

.right {
	float: right;
	margin: 0 0 20px 20px;
	border:3px solid #FFF;
}

.right_noborder {
	float: right;
	margin: 0 0 20px 20px;
}

.left {
	float: left;
	margin: 0 20px 20px 0;
	border:3px solid #FFF;
}

/*********************************************************************
	set bg image for each link
*********************************************************************/

a#about-our-office {
	background-image:url(../images/navigation/about-our-office.jpg);
	text-indent: -999em;
	width:129px;
}

a#for-new-patients {
	background-image:url(../images/navigation/for-new-patients.jpg);
	text-indent: -999em;
	width:126px;
}

a#about-orthodontics {
	background-image:url(../images/navigation/about-orthodontics.jpg);
	text-indent: -999em;
	width:150px;
}

a#faqs {
	background-image:url(../images/navigation/faqs.jpg);
	text-indent: -999em;
	width:47px;
}
a#damon-system {
	background-image:url(../images/navigation/damon-system.jpg);
	text-indent: -999em;
	width:118px;
}

a#about-braces {
	background-image:url(../images/navigation/about-braces.jpg);
	text-indent: -999em;
	width:104px;
}

a#treatment-options {
	background-image:url(../images/navigation/treatment-options.jpg);
	text-indent: -999em;
	width:141px;
}

a#emergency-care {
	background-image:url(../images/navigation/emergency-care.jpg);
	text-indent: -999em;
	width:126px;
}

a#contact-us {
	background-image:url(../images/navigation/contact-us.jpg);
	text-indent: -99em;
	width:145px;
}

a#home {
	background-image:url(../images/navigation/home.jpg);
	text-indent: -99em;
	width:145px;
}

a#site-map {
	background-image:url(../images/navigation/site-map.jpg);
	text-indent: -99em;
	width:145px;
}

/*********************************************************************
	Structure
*********************************************************************/
#container, .container {
	width:941px;
	margin:0 auto;
}

#container {
	position:relative;
}

.clearfix:after, .container:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}

.clearfix, .container {
	display:inline-block;
}

* html .clearfix, * html .container {
	height:1%;
}

.clearfix, .container {
	display:block;
}

.clear {
	clear:both;
}

/*********************************************************************
	Header and top piece
*********************************************************************/

#hd {
	background: url(../images/header-background.jpg) top center no-repeat;
	float:left;
	height:210px;
	width:941px;
	margin: 0;
}

#hd h1 {
	margin: 0;
}

#logo, #logo a {
	height:200px;
	width:320px;
}

#logo {
	left:0;
	position:absolute;
	top:0;
}

#logo a {
	display:block;
	overflow: hidden;
	text-indent: -999em;
}

.logins {
	color:white;
	height:25px;
	position:absolute;
	right:0;
	text-align:center;
	top:4px;
	width:492px;
	}
.logins a {
	color:white;
	font-size: 13px;
	margin:0 10px;
	text-decoration: none;
	}

/*********************************************************************
	Content
*********************************************************************/
#bd {
	background:#F0EFED;
}

#content {
	float:left;
	width:620px;
	margin:46px 0 0;
}
.home #content {
	float:left;
	width:620px;
	margin:300px 0 0;
}

#content a {
	color:#075388;
}

#content ul {
	margin:0 0 20px 30px;
}

.site-map #content ul {
	margin:0 0 20px 10px;
	list-style: none;
	font-weight: bold;
}

.site-map #content ul li a {
	font-style: normal;
	text-decoration: none;
}

.site-map #content ul li a:hover {
	text-decoration: underline;
}

.site-map #content ul li ul li {
	font-weight: normal;
}

.page-content {
	margin: 20px 30px 0 60px;
	font-size: 12px;
}

.page-content p {
	margin-bottom: 20px;
}

#slideshow-home {
	height:251px;
	left:224px;
	margin-top:0;
	position:absolute;
	top:256px;
	width:718px;
	z-index:1;
}

.sub_nav {
	color:#075388;
}

.sub_nav a {
	font-style: normal;
}

.sub_nav a.active {
	color:#075388;
	text-decoration:none;
	cursor:default;
}

/*********************************************************************
	Page Specific Styles
*********************************************************************/

.contact {
	width:195px;
}

/* images */

img.border, img.auto {
	border:3px solid #075388;
}

img.auto {
	float: right;
	margin: 0 0 0 15px
}

img.logo {
	margin-right: 8px;
}

ul.column_ul {
	width:160px;
	_width:155px;
	float: left;
	list-style: none;
}

ul.column_ul li a {
	text-decoration: none;
	font-weight: bold;
}

ul.column_ul a:hover {
	text-decoration: underline;
}

ul.column_ul li ul li {
	list-style: none;
}

ul.column_ul li ul li a {
	font-weight: normal;
}

/*********************************************************************
	Sidebar
*********************************************************************/

#sidebar {
	background:  url(../images/sidebar-background.png) top left no-repeat;
	float:left;
	font-size:14px;
	margin:46px 0 0;
	min-height: 780px;
	width:278px;
	text-align: center;
	color:#fff;
	position:relative;
	z-index:5;
}

#sidebar p {
	border-bottom:1px solid #5979AD;
	margin:15px 40px 15px 20px;
	padding:0 0 15px;
	width:190px;
}

#sidebar a {
	color:#B3CBD9;
	text-decoration: none;
}

.invisalign-sidebar-copy {
	color:#fff;
}

.side-title {
	font-weight: bold;
	color: #ffffff;
}

#sidebar p.banners {
	border:none;
	margin:15px 40px 15px 20px;
	padding:0 0 15px;
	width:190px;
}


#sidebar p.invisalign-home {
	border:none;
	margin:20px 40px 15px 25px;
	padding:0 0 15px;
	width:190px;
	text-align: center;
	}
	
	#sidebar .rewards  {

text-align:center; width:150px; margin-bottom:15px; margin-left:40px; margin-top:45px; line-height:14px;
	}
	
	#sidebar .rewards a {
color:#095289;
	}

/*********************************************************************
	Navigation
*********************************************************************/
#util a, #nav a {
	display: block;
	height: 46px; /* h */
	outline: none;
	overflow: hidden;
	text-align: left;
}

#util {
	background: url(../images/layout/util.png) top left no-repeat;
	position:absolute;
	top:0;
	left:30px;
	width:190px;
	height:170px;
}

#util ul {
	list-style-type:none;
	margin:0;
	padding-top:25px;
	list-style-image:none;
}

#util ul {
	width: 190px;
}

#util a {
	height: 36px;
}

#util a:hover, #util li:hover a, #util li.sfhover a {
	background-position: -190px 0;
} /* -w */

#util li.active a {
	background-position: -380px 0;
} /* -2w */

/* main nav */
#nav {
	position:absolute;
	top:210px;
	left:0;
	width:941px;
}

#nav ul {
	list-style: none;
	margin: 0;
}

#nav li {
	float:left;
}

#nav a:hover, #nav li:hover a, #nav li.sfhover a {
	background-position: 0 -48px;
} /* -h */

#nav li.active a {
	background-position: 0 -48px;
} /* -2h */

#nav li.active a:hover, #nav li.active:hover a, #nav li.active.sfhover a {
	background-position: 0 -48px;
} /* -3h */

/*********************************************************************
	Navigation Fly outs
*********************************************************************/

#nav li ul {
	padding: 10px 0;
	left: -9999px;
	position: absolute;
	width: 185px;
	z-index: 10;
	background: #cdcdcd;
	top:46px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-bottomleft: 5px;
}

#nav li ul a {
	color: #000;
	background-image: none;
	text-decoration: none;
	text-indent:12px;
	height: 16px;
	width: 185px;
	padding:5px 0;
}

#nav li ul a:hover {
	background:#075388;
	color:#fff;
}

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

#nav ul ul ul {
	display:none;
}

#nav li:hover li:hover ul, #nav li.sfhover li.sfhover ul {
	display: block;
	margin-left: 200px;
}

/*********************************************************************
	Footer
*********************************************************************/

#ft {
	background: url(../images/footer-background.jpg) top center no-repeat;
	color: #717171;
	padding:20px 0;
	font-size: 12px;
	display:block;
	width:941px;
	margin:0;
	text-align: center;
}

#ft p {
	padding:0 60px;
	margin-bottom: 10px;
}

.text_nav {
}

#ft .description {
	font-style: bold;
	color: #Fff;
	margin-bottom: 30px;
}

#ft a {
	color: #717171;
	text-decoration: none;
}

#ft a:hover, #ft .sesame a:hover {
	color: #FFF;
}

#ft .sesame a {
	color: #717171;
	text-decoration: underline;
}

/*********************************************************************
	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 Teen
*********************************************************************/

span.indent {
	padding-left: 40px;
}

#invisalign-sidebar {
	background: #fff;
	width: 275px;
	margin: 0 0 15px 15px;
	padding: 0;
	border: solid 1px #000;
	float: right;
	clear: right;
}

#invisalign-sidebar a {
	color: #036;
}

#invisalign-sidebar h3 {
	background: #075388;
	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;
}

/*********************************************************************
	Common Treatments
*********************************************************************/

div.box {
	float: right;
	clear: right;
	width: 334px;
	background-color: #FFF; /* Customize me! */
	padding: 5px 0 5px 5px;
	margin: 0 0 20px 20px;
	border: solid 1px #87A9D8; /* Customize me! */
	-moz-border-radius: 5px; /* Optional - you may customize or remove */
	-webkit-border-radius: 5px;
	color: black;
}

div.box img {
	float: left;
	border: solid 1px #FFF; /* Customize me! */
	margin-right: 5px;
}

div.box p {
	float: left;
	width: 50%;
	margin: 0;
	padding: 0;
}

/*********************************************************************
	Form Styles
*********************************************************************/

div.referral-form, div.appointment-form, div.comments, div.login-form {
	width: 100%;
	margin-top: 18px;
}

fieldset {
	border: 0;
	padding: 9px 0;
	margin: 0 18px;
}

fieldset div {
	clear: both;
}

.form-header {
	border-bottom: 1px solid #FFF;/*optional, change color to match site*/
}

.form-header h3 {
	margin: 0 0 9px;
}

.form-header p {
	margin: 0 0;
	padding-bottom: 18px;
}

.form-footer {
	padding-top: 18px;
	text-align: center;
	border-top: 1px solid #c6dbed;/*optional, change color to match site*/
}

.form-footer button {/*these styles control the look of the button, change as necessary*/
	clear:both;/*do not change, forces button to sit below floated elements*/
	margin: 9px auto;/*do not change, controls positioning*/
	display: block;
	width:125px;
	height:31px;
	background:#440000;/* customize me! */
	border: 1px solid #FFFFFF;
	text-align:center;
	line-height:31px;
	color:#FFFFFF;/* customize me! */
	font-size:12px;
	font-weight:bold;
}

fieldset input, fieldset textarea, fieldset select {
	line-height: 18px;
	height: 18px;
	padding: 4px 9px 5px 9px; /* border: 1px solid #6B355F; */
}

fieldset input.radio {
	border: 0;
}

fieldset p.verification img {
	border: 1px solid #FFFFFF;
}

fieldset label {
	margin-top: 9px;
}

fieldset label, label span {
	text-align: left;
	line-height: 18px;
	height: 18px;
}

fieldset textarea {
	height: 144px;
	overflow: auto;
}

label.required {
	background: url(../images/required_note.gif) 100% 0 no-repeat;
}

p.required-note {
	font-weight: bold;
}

p.required-note img {
	display: inline;
}

p.radio-float, p.radio-float input {
	line-height: 27px;
	vertical-align: middle;
}

/*********************************************************************
	Referral Form
*********************************************************************/
div.referral-form {
	margin: 18px 0;
	padding: 0;
}

.referral-form fieldset {
	border: 0;
}

.referral-form label {/*floats labels left*/
	font-size: 12px;
	display:block;
	font-weight:bold;
	width:45%;
	float:left;
	line-height: 18px;
}

.referral-form label span {/*sits below labels; holds instructions*/
	color:#666666;
	display:block;
	font-size:11px;
	font-weight:normal;
	width:100%;
}

.referral-form input, .referral-form textarea {
	float:left;
	font-size:12px;
	padding:0 2px;
	width:40%;
	margin:9px 0 9px 2%;
	background: #ffffff;
	position: relative;
}

.referral-form p.radio, .referral-form p.verification {
	clear: both;
	margin: 9px 0 9px 47%;
	font-size: 12px;
}

.referral-form p.radio-float {
	clear: none;
	float:left;
	width: 45%;
	padding:0;
	margin:9px 0 9px 2%;
}

.referral-form p.verification {
	margin-top: 0;
}

.referral-form p.radio input, .referral-form p.radio-float input {
	float: none;
	width: auto;
	margin: 0 0 0 2%;
	padding: 0 2px;
	vertical-align: middle;
	line-height: 18px;
	height: 18px;
}

/*********************************************************************
	Appointment Form
*********************************************************************/
.appointment-form {
	margin: 18px 0;
	padding: 0;
}

.appointment-form fieldset {
	border: 0;
}

.appointment-form label {/*floats labels left*/
	font-size: 12px;
	display:block;
	font-weight:bold;
	width:45%;
	float:left;
	margin-top: 9px;
	line-height: 18px;
}

.appointment-form label span {/*sits below labels; holds instructions*/
	color:#666666;
	display:block;
	font-size:11px;
	font-weight:normal;
	width:100%;
}

.appointment-form input, .appointment-form select, .appointment-form textarea {
	float:left;
	font-size:12px;
	padding:0 2px;
	width:40%;
	margin:9px 0 9px 2%;
}

.appointment-form p.radio, .appointment-form p.verification {
	clear: both;
	margin: 9px 0 9px 47%;
	font-size: 12px;
}

.appointment-form p.radio-float {
	clear: none;
	float:left;
	width: 45%;
	padding:0;
	margin:9px 0 9px 2%;
	vertical-align: middle;
	line-height: 18px;
}

.appointment-form span#found-other {
	width: 100%;
}

.appointment-form span#found-other input {
	margin-left: 47%;
	background: #fff0b2
}

.appointment-form p.verification {
	margin-top: 0;
}

.appointment-form p.radio input, .appointment-form p.radio-float input {
	float: none;
	width: auto;
	margin: 0 0 0 2%;
	padding: 4px 2px;
}

/*********************************************************************
	Comment Form
*********************************************************************/	
div.comments {
	margin: 18px 0;
	padding: 0;
}

.comments li {
	font-weight: bold;
	margin: 0;
}

.comments label {/*floats labels left*/
	font-size: 12px;
	display:block;
	font-weight:bold;
	width:45%;
	float:left;
}

.comments label span {/*sits below labels; holds instructions*/
	color:#666666;
	display:block;
	font-size:11px;
	font-weight:normal;
	width:100%;
}

.comments .label-block label {
	float: none;
	clear: both;
	width: 100%;
	text-align: left;
}

.comments input, .comments textarea {
	float:left;
	font-size:12px;
	padding:0 2px;
	width:40%;
	margin:9px 0 9px 2%;
	background: #ffffff;
}

.comments textarea {
	width: 95%;
}

.comments p.verification {
	clear: both;
	margin: 9px 0 9px 47%;
	font-size: 12px;
}

.comments p.radio-float {
	clear: none;
	float:left;
	width: 45%;
	padding:0;
	margin:9px 0 9px 0;
	vertical-align: middle;
	line-height: 18px;
}

.comments p.verification {
	margin-top: 0;
}

.comments p.radio input, .comments p.radio-float input {
	float: none;
	margin: 0 0 0 0;
	padding: 4px 2px;
	width: auto;
}

.comments p.radio span {
	padding: 0 2% 0 0;
}

.comments .radio {
	text-align: left;
	font-weight: normal;
}

.comments .comments-box label {
	float: none;
	font-weight: normal;
	display: block;
	text-align: left;
}

.comments .comments-box textarea {
	float: none;
	margin-left: 0;
	width:95%;
}

/*********************************************************************
	Mini Contact Form
*********************************************************************/
.contact-form {
	margin: 0 auto;
	width: 216px;
	padding: 9px;
	border:solid 2px #02003e;/*optional, change color to match site*/
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

.contact-form fieldset {
	border: 0;
	padding: 9px 0;
}

.contact-form label {
	display: none;
}

.contact-form input, .contact-form textarea {
	font: normal 12px/18px Verdana, sans-serif;
	width:90%;
	margin:9px auto;
	background: #ffffff;
}

/*********************************************************************
	Form Errors
*********************************************************************/

/* JQuery */
input.error, select.error, textarea.error {
	border-color: #a52003;
	background: #fefda1;
}

div.error {
	padding-left: 18px;
	background: url(../images/validate_error.jpg) 0 0 no-repeat;
	color: #a52003;
	display: block;
	margin:0 0 9px 47%;
	font-size: 11px;
	font-weight: normal;
	line-height: 18px;
	clear: both;
}

div.success {
	padding-left: 18px;
	background: url(../images/validate_ok.jpg) 0 0 no-repeat;
	color: #000000;
	display: block;
	margin:9px 0 0 0;
	font-size: 11px;
	font-weight: normal;
	line-height: 18px;
	float: right;
	clear: none;
}

.contact-form div.error, .contact-form div.success {
	margin-left: 0;
}



.img-right {
	float: right;
	clear: right;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 20px;
	margin-left: 10px;
}  

.img-center { margin: 0 0 20px 0; text-align:center; width: 100%; }  

.text-left { margin: 0 0 20px 0; float: left; clear: left; width: 300px; }  
.text-right { margin: 0 0 20px 0; float: right; clear: right; width: 300px; }  
.img-left {
	float: left;
	clear: left;
	margin-top: 0;
	margin-right: 10px;
	margin-bottom: 20px;
	margin-left: 0;
} 
.video { display: block; /* Add more nifty stuff in here if you like */ }