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


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

body {
	line-height:1.5;
	font-family:Arial, Helvetica, sans-serif;
	margin:0;
	background:#795B49 url(../images/body-background.jpg) top center no-repeat;
	color: #66583D;
}

/* edit.com visible styles */
body, td, .NormalText { text-decoration: none; font-weight: normal; font-style: normal; line-height: 1.5em; color: #66583D; font-family: Arial, Helvetica, sans-serif, Trebuchet MS; font-size: 12px; }

.Title		{ color: #2F8E8E; font-size: 24px; font-weight: normal; font-family: Trebuchet MS, Arial; }
.Header		{ color: #694C3E; font-size: 18px; font-weight: normal; font-family: Arial; }
.Subheader	{ color: #694C3E; font-size: 13px; font-weight: bold; font-family: Arial; }

.Blue		{ color: #2F8E8E; }
.Brown		{ color: #694C3E; }
.Black		{ color: #000000; }
.White		{ color: #FFFFFF; }

.SmallText	{ font-size: 10px; }
.MediumText	{ font-size: 16px; line-height: 1em; }
.LargeText	{ font-size: 24px; line-height: 1em; }

IMG.FloatLeft 	{ float: left; margin: 0 10px 10px 0; }
IMG.FloatRight 	{ float: right; margin: 0 0 10px 10px; }
IMG.BrownBorder { border: 3px solid #8B7858; }

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-family:"Century Gothic","Trebuchet MS","Lucida Grande",Lucida,Arial,sans-serif;
	color:#2F8E8E;
	font-size:25px;
	font-weight:lighter;
	margin-bottom: 20px;
}
h1 span {
	font-size: 12px;
	position:relative;
	top:-13px;
	}
	
.home h1 {
	font-size: 16px;
}

h2 {
	color:#694C3E;
	font-size: 18px;
	font-weight: normal;
}
h3 {
	color:#694C3E;
	font-size: 14px;
	font-weight: normal;
}
hr {
	background: #8F8B5C;
	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 #8B7858;
}

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

* .left {
	float: left;
	margin: 0 20px 20px 0;
	border:3px solid #8B7858;
}


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

a#about-our-office {background-image:url(../images/nav/about-our-office.jpg);}

a#for-new-patients {background-image:url(../images/nav/for-new-patients.jpg);}

a#about-orthodontics {background-image:url(../images/nav/about-orthodontics.jpg);}

a#faqs {background-image:url(../images/nav/faqs.jpg);}

a#about-braces {background-image:url(../images/nav/about-braces.jpg);}

a#treatment-options {background-image:url(../images/nav/treatment-options.jpg);}

a#emergency-care {background-image:url(../images/nav/emergency-care.jpg);}

a#contact-us {background-image:url(../images/nav/contact-us.jpg);}

a#home {background-image:url(../images/nav/home.jpg);}

a#site-map {background-image:url(../images/nav/site-map.jpg);}


/*********************************************************************
	Structure
*********************************************************************/
* #container, * .container {
	width:981px;
	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.png) top center no-repeat;
	float:left;
	height:105px;
	width:981px;
	margin: 0;
}

* #logo, #logo a {
	height:75px;
	width:709px;
}

* #logo {
	left:135px;
	position:absolute;
	top:24px;
}

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

/*********************************************************************
	Content
*********************************************************************/
* #bd {
	background:url(../images/content-background.png) bottom center no-repeat;
}

* #content {
	float:left;
	width:620px;
}

#content a {
	color:#66583D;
	font-style: italic;
}

#content ul {
	margin:0 0 20px 30px;
	list-style:outside;
}
#content ul li{
	padding-left:10px;
	}
#content ul li a {
	font-style: normal;
	text-decoration: none;
}
#content ul li a:hover {
	text-decoration: underline;
}

.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;
}

* #flash_box {
	float: left;
	width:634px;
	height: 305px;
	background: url(../images/alt-flash-image.jpg) top left no-repeat;
	margin-top: 0px;
	border-bottom: 3px solid #89764E;
}

* .sub_nav {
	color:#999966;
}

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

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

* .contact {
	width:195px;
}

/* images */

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

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

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

img.logo-leftmargin {
	margin-left: 40px;
	margin-bottom:10px;
	margin-top:-30px;
}

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 {
	float:left;
	margin:15px 0 0 42px;
	padding-top:420px;
	width:262px;
	font-size: 12px;
}
#sidebar p {
	margin: 0 40px 20px;
}
#sidebar p strong {
	font-size: 16px;
	}

* .banners {
	margin:240px 0 0 18px;
}

/*********************************************************************
	Navigation
*********************************************************************/

* #nav {
	background: url(../images/nav-back.png) top left no-repeat;
	display:block;
	height:auto;
	left:43px;
	padding-top:96px;
	position:absolute;
	top:105px;
}

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

#nav a {
	display: block;
	height: 32px; /* h */
	overflow: hidden;
	text-align: left;
	width: 261px; /* w */
	text-indent: -999em;
}



/*********************************************************************
	Vertical Navigation
*********************************************************************/

#nav ul {
	width: 261px;

}

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

#nav li.active a {
	background-position: -261px 0;

} /* -2w */

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

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

#nav li ul {
	left: -9999px;
	position: absolute;
	width: 160px;
	z-index: 10;
	padding: 1px 0;
	background: url(../images/subnav-back.jpg) top left repeat-y ;
	border: 1px solid #68D3CB;
}

#nav li ul a {
	color: #634B3F;
	height: 20px;
	font-size: 12px;
	padding-top: 5px;
	text-decoration: none;
	text-indent: 15px;
	width: 160px;
}

#nav li ul a:hover {
	background: #634B3F;
	color: #FFF;
}

#nav li:hover ul, #nav li.sfhover ul {
	left: 0;
	margin: -35px 0 0 261px; /* margin: -h 0 0 w */
}

* #util {
	position: absolute;
	top: 75px;
	right: 50px;
}

* #util, #util a {
	width: 161px;
	height: 50px;
}

#util a {
	display: block;
	overflow: hidden;
	text-align: left;
	text-indent: -999em;
}

#util a:hover {
	background-position: 0 -50px;
}


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

* #ft {
	font-family:"Century Gothic","Trebuchet MS","Lucida Grande",Lucida,Arial,sans-serif;
	background: url(../images/footer-background.png) top left no-repeat;
	color: #6B4542;
	padding: 30px 0 0 0;
	font-size: 12px;
	display:block;
	width:981px;
	margin:0;
	height: 254px;
}

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

* .text_nav {
	font-weight: bold;
}

#ft .description {
	font-style: italic;
}

#ft a {
	color: #2F8E8E;
	text-transform: uppercase;
	text-decoration: none;
}

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

#ft .sesame a {
	color: #6B4542;
	text-transform: none;
	font-weight: bold;
	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: #97AFC2;
	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: #92CECE; /* Customize me! */
	padding: 5px 0 5px 5px;
	margin: 0 0 20px 20px;
	border: solid 1px #4BAAB0; /* 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 #4BAAB0; /* 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;
}