/* 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;}
body {line-height:1.5;}
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;}
.hide {display:none;}
.flash-replaced .alt {display:none;}

em { font-style: italic; }

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

#nav ul {height: 39px; margin: 0; padding: 0; list-style: none; position:absolute; top:140px;left:0px;}
#nav li {margin: 0; padding: 0; list-style: none; display: inline; float:left;}
#nav li a {height: 39px; display: block; text-decoration: none; text-indent: -999em; overflow: hidden;}


#nav a:hover, #nav li.active a,
#nav li:hover #treatment, #nav li.sfhover #treatment,
#nav li:hover #appointment-shuttle, #nav li.sfhover #appointment-shuttle,
#nav li:hover #rewards-and-games, #nav li.sfhover #rewards-and-games,
#nav li:hover #invisalign, #nav li.sfhover #invisalign,
#nav li:hover #our-office, #nav li.sfhover #our-office,
#nav li:hover #new-patients, #nav li.sfhover #new-patients
{background-position: 0px -39px;}

#our-office,#treatment,#appointment-shuttle,#rewards-and-games,#new-patients,#invisalign{
overflow: hidden;
text-indent: -999em;
	height: 39px;
	cursor: pointer;
}


#our-office {background-image:url(../images/nav/our-office.gif); width:133px;}
#treatment {background-image:url(../images/nav/treatment.gif);width:118px;}
#appointment-shuttle {background-image:url(../images/nav/appointment-shuttle.gif);width:203px;}
#rewards-and-games {background-image:url(../images/nav/rewards-and-games.gif);width:187px;}
#invisalign {background-image:url(../images/nav/invisalign.gif);width:119px;}
#new-patients {background-image:url(../images/nav/new-patients.gif);width:140px;}

/* Drop Down */
#nav li ul {margin: 0; padding: 0; width: 180px; position: absolute; z-index: 3; left: -999em; 
	top:auto;background-image: url(../images/dropdown.jpg);
	background-position: left bottom;
	top:auto;
	height:auto;
	padding-bottom:10px;
}
#nav li:hover ul, #nav li.sfhover ul {left: auto; margin: 0px;}
#nav li ul li {
	display: block;
	width: 180px;
	height: 22px;
	padding: 0;
	margin: 4px 0;
}
#nav li ul li a {
	padding: 5px 0 5px 8px;
	margin: 0;
	width: auto;
	height: 16px;
	display: block;
	text-indent: 0;
	font-size: 11px;
	font-weight: normal;
	color: #ffffff;
}
#nav li ul li a:hover {height: 16px;  background-color:#244061;}


#utility-nav ul {height: 33px; margin: 0; padding: 0; list-style: none; position:absolute; top:0px;left:545px;}
#utility-nav li {margin: 0; padding: 0; list-style: none; display: inline; float:left;}
#utility-nav li a {height: 33px; display: block; text-decoration: none; text-indent: -999em; overflow: hidden;}


#utility-nav a:hover, #utility-nav li.active a,
#utility-nav li:hover #contact-us, #utility-nav li.sfhover #contact-us,
#utility-nav li:hover #home, #utility-nav li.sfhover #home,
#utility-nav li:hover #patient-login, #utility-nav li.sfhover #patient-login {background-position: 0px -33px;}

#patient-login,#contact-us,#home{
overflow: hidden;
text-indent: -999em;
height: 33px;
	cursor: pointer;
}


#contact-us {background-image:url(../images/nav/contact-us.gif); width:116px;}
#patient-login {background-image:url(../images/nav/patient-login.gif);width:120px;}
#home{background-image:url(../images/nav/home.gif);width:110px;}

/* Drop Down */
#utility-nav li ul {
	margin: 0;
	padding: 0;
	width: 150px;
	position: absolute;
	z-index: 3;
	left: -999em;
	top:auto;background-image: url(../images/dropdown.jpg);
	background-position: left bottom;
	top:auto;
	height:auto;
		padding-bottom:10px;
}
#utility-nav li:hover ul, #utility-nav li.sfhover ul {
	left: auto;
	margin: -7px 0px 0px;
}
#utility-nav li ul li {
	display: block;
	width: 150px;
	height: 22px;
	padding: 0;
	margin: 5px 0;
}
#utility-nav li ul li a {
	padding: 5px 0 5px 8px;
	margin: 0;
	width: auto;
	height: 16px;
	display: block;
	text-indent: 0;
	font-size: 11px;
	font-weight: normal;
	color: #ffffff;
}
#utility-nav li ul li a:hover {height: 16px; background-color:#244061;}

.home .address-number { margin: 43px 0 5px; }
.address-number {
background-repeat: no-repeat; 
height: 43px; /* this height reflects the height of the heading image */
overflow: hidden;
margin: 0 0 5px; 
text-indent: -999em;} /* hides rich text so only background image shows */


/* custom layout*/
body {
	background-image: url(../images/bg.jpg);
	background-repeat: repeat-x;
	background-color:#834a77;
	font-family:   Arial, Helvetica, sans-serif;
	font-size: 12px;
}
#container{
	width: 900px;
	margin: 0px auto;
	position:relative;
	
}
#bd{
	width: 900px;
	background-image: url(../images/home_bkd.gif);
	background-repeat: repeat-y;
}
#bd-int {
	width: 900px;
	background-image: url(../images/interior_bkd.gif);
	background-repeat: repeat-y;
}
#content-int {
	background-position: right bottom;
	background-image: url(../images/watermark.gif);
	background-repeat: no-repeat;
	margin-left:225px;	
	padding-right:25px;
	padding-bottom:5px;
	min-height:580px;
	padding-top:10px;
}
*html #content-int {
	background-position: right bottom;
	background-image: url(../images/watermark.gif);
	background-repeat: no-repeat;
	margin-left:225px;	
	padding-right:25px;
	padding-bottom:5px;
	height:580px;
}
#content{
padding-top:395px;
	background-position: right bottom;
	background-image: url(../images/watermark-home.gif);
	background-repeat: no-repeat;
	margin-left:225px;	
	padding-right:25px;
	padding-bottom:5px;
}

#hd{
	width: 900px;
	height: 179px;
	background-image: url(../images/header_bkd.gif);
}
#logo {
position:absolute;
	height:126px;
	width:386px;
	left:0px;
	top:0px;}

#logo a {
	display: block;
	height:126px;
	width:386px;
	line-height: 0px;
	text-indent: -999em;	background: url(../images/logo.gif) no-repeat left;}

/* custom general*/
.image-float-border {
	float: right;
	clear: right;
	display: block;
	margin-left:8px;
	margin-bottom:5px;
	border:solid 1px #431538;
}

.img-mainpage {
left:16px;
top:520px;
position:absolute;
	
}
hr{
	color: #000000;
	margin-bottom: 10px;
	margin-top: 8px;
	clear:both;
}

blockquote, .quote {
	padding-left: 23px;
}
p{
	margin-bottom:18px;
	color: #000000;
	font-family:   Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 20px;
	font-weight: normal;
}

li{
	color: #000000;
	font-family:   Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin-left: 28px;
	list-style: url(../images/bullet.gif) outside;
	line-height:20px;
}

ul{
	margin-bottom:18px;
}
ol{
	margin-bottom:18px;
}
ol li{
	color: #000000;
	font-family:   Arial, Helvetica, sans-serif;
	font-size: 11px;
	margin-left: 35px;
	list-style: outside;
	line-height:20px;
}
h1{
	color: #834a77;
	font-family: Veranda, Arial, Helvetica, sans-serif;font-size: 18px;
	line-height:27px;
	font-weight: bold;
}

h2{
	color: #244061;
	font-family: Veranda, Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	margin-bottom:18px;
}
h3{
	color: #1b8b59;
	font-family: Veranda, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
}


/* custom links*/
.back-to-top{
clear:both;
	color: #834a77;
	font-family:   Arial, Helvetica, sans-serif;font-size: 11px;
	text-align: right;
	font-weight: bold;
}
.back-to-top p{
margin-bottom:0px;
}
.back-to-top a:link, .back-to-top a:visited{
	color: #834a77;
	font-family:   Arial, Helvetica, sans-serif;font-size: 11px;
	text-align: right;
	font-weight: bold;
	text-decoration: underline;
	margin-right:15px;
	
}
.back-to-top a:hover{color: #244061;
}
a:link, a:visited{
	color: #834a77;
	font-family:   Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight:normal;
	text-decoration: none;
}
a:hover, a.active, .sub_nav a.active{ color:#244061;
}


/* Image Replacement -- add class="replace" to root element, i.e. <p> and add a bg image*/

.replace { letter-spacing : -1000em; }
/* Just for Opera, but hide from MacIE */
/*\*/html>body .replace { letter-spacing : normal; text-indent : -999em; overflow : hidden;}
/* End of hack */

*html .replace { letter-spacing : normal; text-indent : -999em; overflow : hidden;}

.replace ul, .replace ul li {letter-spacing: 0; text-indent: 0; overflow: auto;}

/* footer */

#ft {
	background-image: url(../images/footer_bkd.gif);
	background-repeat: no-repeat;
	width: 900px;
	height:201px;
	clear: both;
	color: #d5c1c6;
	line-height:14px;
	padding-top:25px;
	text-align:center;
	position: relative;
}
#ft p{ margin-bottom:10px;
	
}
#ft h4 {
		color: #ffffff;
		font-size: 11px;
		font-weight:normal;
		margin-bottom:20px;
		margin-left:190px;
}

#ft #sesame-link{
	text-decoration:none;
	font-size: 11px;	color: #431538;
	font-weight:normal;
}

#ft a {
	color: #d5c1c6;
	font-size: 11px;
	font-weight:normal;
	text-decoration:none;
}
#ft .text_nav {
	color: #d5c1c6;
}
#ft a:hover{
		text-decoration:underline;
}
#blog { float:right;  margin-top:-7px; }
#facebook { float:left;  margin-top:-8px;}

#sidebar{
	width: 205px;
	position:absolute;
	top:190px;
	left:0px;
}

#flash-homepage{
	width:488px;
	height:339px;
	left:215px;
	top:194px;
	background-image: url(../images/flash_bkd.jpg);
	background-repeat: no-repeat;
	position:absolute;
}

.address{color:#244061;
padding-left:3px;
font-size:12px; margin: 10px 0 18px; text-align:center;}
.home .address { margin: 10px 0; }

#callout-videos{position:absolute; width:195px;
left:705px;
top:190px; }
#callout-videos img {border:none; margin:0; padding:0;display:block; float:left;}
#flash-brushing-and-flossing-ortho,#flash-types-of-appliances,#flash-brace-painter{margin-bottom:18px;
}

.flash-replaced .alt {
display: block;
width: 0px;
height: 0px;
position: absolute;
overflow: hidden;}

img a{border:none;}


.sitemap_list li{
	list-style:none url(none);
	margin-left:15px;
	text-decoration:none;
}
.sitemap_list ul li a, .sitemap_list ul li a:visited{ font-weight:normal; }
.sitemap_list li a, .sitemap_list li a:visited{ font-weight:bold; text-decoration:none;  }
.sitemap_list a:hover{text-decoration:underline;}


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


/*-----------------------------------------------
	Forms
	*/
	/* Global form styles */
	div.referral-form, div.appointment-form, div.comments {
		width: 100%;
		margin-top: 18px;
		letter-spacing: normal;
	}

	fieldset {border: 0; padding: 9px 0;margin: 0 18px;}
		fieldset h2 {margin: 0 0 9px;}
		fieldset p {margin: 0 0 18px;}
		fieldset p.disclaimer {font-size: 90%; font-style: italic; margin: 0;}
		fieldset dl {}
			fieldset dl dt {font-size: 16px; clear: both; margin: 9px 0 0; font-weight:bold;}
				fieldset dd ul {margin: 9px 0;}
					fieldset dd ul li, fieldset dd ol li {list-style: none;}
					fieldset dd li {
						clear: both;
						margin: 3px 0;
						padding: 5px 0 4px 10%;
						overflow: auto;
						height: auto;
						position: relative;
						}
					fieldset dd li:hover {background: #ffffff;/* customize me - this is the hover color change of li */}
					fieldset dd li input:hover, fieldset dd li input:focus,
					 fieldset dd li select:hover, fieldset dd li select:focus,
					 fieldset dd li textarea:hover, fieldset dd li textarea:focus {
					 	background: #f1f1f1;/* customize me - this is the hover color change of form fields*/
					 	outline-color: #244061;/* customize me */
					 	}
						fieldset li h3 {font-size: 12px; line-height: 18px; margin: 0;}
						fieldset li div {float: left; display: inline-block; width: 40%; position: relative; padding-right: 5%;}
						fieldset li div.input-street {width: 85%;}
						fieldset li div.input-city {width: 60%;}
						fieldset li div.input-full-name {width: 85%;}
						fieldset li div.input-phone-full {width: 85%;}
						fieldset li div.input-email {width: 85%;}
						fieldset li div.input-zip {width: 20%;}
						fieldset li div.content-switch, fieldset li div.radio, fieldset li div.checkbox {width: 85%;}
							fieldset li div.radio input {border: none;}
							fieldset li div.radio label {padding-right: 9px; font-size: 90%;}
						/*fieldset li div.hidden-content, fieldset li.hidden-content {display: none;}*/
						fieldset li div.input-select-full {width: 85%;}
						fieldset li div.input-comments {width: 85%;}
							li div.input-comments textarea {height: 63px; overflow: auto;}
						fieldset li div.input-captcha {width: 50%;}
						fieldset li div.verification {width: 35%;}
							li div.verification img {
								border: 1px solid;
								margin-top: 9px;
								-moz-border-radius: 4px; /*for Moz, optional*/
								-webkit-border-radius: 4px; /*for Webkit Browsers, optional*/
								}
							fieldset li div label {
								line-height: 18px;
								font-weight: bold;
								margin-bottom: 9px;
								font-size: 80%;
								color: #244061;/*override to match site*/
								}
							fieldset li div input, fieldset li div textarea, fieldset li div select {
								display: block;
								line-height: 18px;
								width: 100%;
								border: 1px solid;
								padding: 4px 0 3px;
								text-indent: 4px;
								margin-top: 9px;
								-moz-border-radius: 4px; /*for Moz, optional*/
								-webkit-border-radius: 4px; /*for Webkit Browsers, optional*/
								}
							fieldset li div select {height: 25px;}
							fieldset li div.radio input {display: inline; width: auto; margin-right: 4px;}
							fieldset li div div {width: 100%;}
						fieldset dl dd.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*/
							display: block;
							width: 125px;
							height: 34px;
							text-align: center;
							margin: 0;
							background:#244061;/* customize me! */
							border: 1px solid #244061;
							line-height: 34px;
							color:#cfdae4;/* customize me! */
							font-size:12px;
							font-weight:bold;
							-moz-border-radius: 4px; /*for Moz, optional*/
							-webkit-border-radius: 4px; /*for Webkit Browsers, optional*/
							}





	/* appointment form
	* Styles only for the appointment request form
	*/


	/* comment form
	* Styles only for the comments form
	*/
	/*numbering added by jQuery*/
	fieldset ol li span.comment-number {
		font-size: 150%;
		color: #244061;/* customize me*/
		position: absolute;
		left: 9px;
		top: 9px;
	}
	
			*html fieldset ol li span.comment-number {
		font-size: 150%;
		color:#244061;/* customize me*/
		position: absolute;
		left: 9px;
		top: 9px;
		margin-left:-35px;
	}


	/* referral form
	* Styles only for the referral form
	*/
	.referral-form fieldset li div.radio {width: 40%;}

	/* JQuery */
	input.error, select.error, textarea.error {border-color: #a52003; background: #fefda1;}
	div.error {
		background: url(../images/validate_error.gif) 0 0 no-repeat;
		color: #a52003;
		width: 18px;
		height: 18px;
		position: absolute;
		top: 0;
		right: 0;
		overflow: hidden;
		display: block;
		margin: 12px -2% 0 0;
		text-indent: -999em;}
	div.success {
		background: url(../images/validate_ok.gif) 0 0 no-repeat;
		width: 18px;
		height: 18px;
		position: absolute;
		top: 0;
		right: 0;
		overflow: hidden;
		display: block;
		margin: 12px -2% 0 0;
		text-indent: -999em;}

	.contact-form div.error, .contact-form div.success {margin-left: 0;}
	
	
	
img.right {
	border: solid 1px #431538;
	margin: 0 0 15px 15px;
	float: right;
	clear: right;}
img.left {
	border: solid 1px #431538;
	margin: 0 15px 20px 0;
	float: left;}
span.indent {
	padding-left: 40px;}
#invisalign-sidebar {
	background: #fff;
	width: 275px;
	margin: 0 0 15px 15px;
	padding: 0;
	border: solid 1px #431538;
	float: right;
	clear: right;}
#invisalign-sidebar a {
	color: #834a77;}
	#invisalign-sidebar a:hover {
	color: #000000;}
#invisalign-sidebar h3 {
	background: #431538;
	margin: 0;
	padding: 15px;
	color: #fff;}
#invisalign-sidebar p {
	padding: 0 15px;
	margin: 15px 0;}
.thumb {
	border: solid 1px #431538;
	margin: 0 10px 10px 0;
	float: left;
	clear: left;}
.clear {clear: both;}


/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable { position:relative; overflow:hidden; width: 655px; height:120px; 
	
	/* custom decorations */
	border:1px solid #ccc;
	background:url(/img/global/gradient/h300.png) repeat-x;
}

.scrollable.baScroll { height: 160px; }

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.scrollable .items, .scrollable .baItems {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
}

/* single scrollable item */
.scrollable img { float:left; margin:20px 5px 20px 17px; background-color:#fff; padding:2px; border:1px solid #ccc; cursor:pointer; width:100px; -moz-border-radius:4px; -webkit-border-radius:4px; }

/* active item */
.scrollable .active {
	border:2px solid #000;
	z-index:9999;
	position:relative;
}

#slideControls { width: 100%; height: 40px; position: relative; }
.browse { width: 50px; height: 13px; display: inline-block; overflow: hidden; text-indent: -9999px; margin: 5px 0 35px; cursor: pointer; color: #834A77; }
.prevPage, .nextPage {  }
.prevPage { position: absolute; left: 0; background: url(../images/prev.gif) no-repeat 0 0; }
.nextPage { position: absolute; right: 0; background: url(../images/next.gif) no-repeat 0 0; }

#image_wrap { width:655px; margin:15px 0 15px; padding:15px 0; text-align:center; }

#photos li, #baPhotos li { margin-left: 0; list-style: none; }

#rewardBox { 
width: 600;
border-color:#834a77;
border-style:solid;
border-width:3px;
padding:20px;
padding-left:30px;
font-size:16px;

}

#rewardBox2 { 
width: 600;
border-color:#834a77;
border-style:solid;
border-width:3px;
padding:20px;
padding-left:30px;
font-size:16px;

}

#rewardText{
width: 600;
padding:20px;
padding-left:30px;
}