/* 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;font:12px/1.231 Arial,Helvetica,sans-serif;*font-size:small; *font:x-small;background:url("../images/bg.jpg") 0 0 repeat-x #ae6489;}
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;}
em { font-style:italic; }
.hide {display:none;}
.flash-replaced .alt {display:none;}
.clr:after {content:".";display:block;height:0;clear: both;visibility: hidden;}

#wrapper {
	width:800px;
	margin:0 auto;
	background:url("../images/wrapper-bg.jpg") 0 300px repeat-x #FFF;
}

#container {
	width:800px;
	margin:0 auto;
	background:url("../images/header-bg.jpg") 0 0 no-repeat;
}


/* HEADER */

#hd {
	height:135px;
	position:relative;
}

#logo {
	position:absolute;
	top:40px;
	left:25px;
}

#logo a {
	display:block;
	width:598px;
	height:35px;
	text-indent:-9999em;	
}

#motto {
	position:absolute;
	width:415px;
	height:30px;
	top:85px;
	left:265px;
	text-indent:-9999em;
}

#pl-button {
	position:absolute;
	display:block;
	width:143px;
	height:43px;
	background:url("../images/pl-button.gif") 0 0 no-repeat;
	top:7px;
	right:10px;
	text-indent:-9999em;
}

/* SIDEBAR */

#sidebar {
	float:left;
	width:218px;
}


/* NAVIGATION */

#utility-nav {
	width:231px;
	height:305px;
	background:url("../images/nav-bg.png") 0 0 no-repeat;
	position:relative;
	margin:0 0 0 -13px;
	padding-top:7px;
	z-index:999;
}

#utility-nav ul li {
	list-style:none;
	margin:0 0 0 6px;
	float:left;
	display:inline;
}

#utility-nav ul li ul {
	position:absolute;
	left:-999em;
}

#utility-nav ul li:hover ul {
	left:auto;
	margin:-29px 0 0 213px;
	background:#FFF;
	border:1px solid #999;
	width:200px;
}

#utility-nav ul li ul li {
	margin:0 !important;
	float:none !important;
	display:block !important;
}

#utility-nav ul li:hover ul li a {
	display:block;
	font-weight:bold;
	color:#7e2d56;
	height:34px;
	line-height:34px;
	text-decoration:none;
	padding:0 0 0 12px;
}

#utility-nav ul li:hover ul li a:hover {
	background:#7e2d56;
	color:#FFF;
}



#utility-nav ul li a.head, #emergency-care, #faqs, #home {
	display:block;
	width:219px;
	height:31px;
	background-image:url("../images/navigation.gif");
	text-indent:-9999em;
}


#utility-nav ul li #about-us { background-position:0 0; }
#utility-nav ul li #for-new-patients { background-position:0 -31px; }
#utility-nav ul li #about-orthodontics { background-position:0 -62px; }
#utility-nav ul li #faqs { background-position:0 -92px; }
#utility-nav ul li #about-braces { background-position:0 -121px; }
#utility-nav ul li #treatment-options { background-position:0 -151px; }
#utility-nav ul li #emergency-care { background-position:0 -181px; }
#utility-nav ul li #contact-us { background-position:0 -211px; }
#utility-nav ul li #home { background-position:0 -241px; }

#utility-nav ul li:hover #about-us, 
#utility-nav ul li.active #about-us, 
#utility-nav ul li.sfhover #about-us { background-position:-219px 0; }

#utility-nav ul li:hover #for-new-patients,
#utility-nav ul li.active #for-new-patients,
#utility-nav ul li.sfhover #for-new-patients { background-position:-219px -31px; }

#utility-nav ul li:hover #about-orthodontics,
#utility-nav ul li.active #about-orthodontics,
#utility-nav ul li.sfhover #about-orthodontics { background-position:-219px -62px; }

#utility-nav ul li:hover #faqs,
#utility-nav ul li.active #faqs,
#utility-nav ul li.sfhover #faqs { background-position:-219px -92px; }

#utility-nav ul li:hover #about-braces,
#utility-nav ul li.active #about-braces,
#utility-nav ul li.sfhover #about-braces { background-position:-219px -121px; }

#utility-nav ul li:hover #treatment-options,
#utility-nav ul li.active #treatment-options,
#utility-nav ul li.sfhover #treatment-options { background-position:-219px -151px; }

#utility-nav ul li:hover #emergency-care,
#utility-nav ul li.active #emergency-care,
#utility-nav ul li.sfhover #emergency-care { background-position:-219px -181px; }

#utility-nav ul li:hover #contact-us,
#utility-nav ul li.active #contact-us,
#utility-nav ul li.sfhover #contact-us { background-position:-219px -211px; }

#utility-nav ul li:hover #home,
#utility-nav ul li.active #home,
#utility-nav ul li.sfhover #home { background-position:-219px -241px; }


#sidebar address {
	color:#666;
	margin:0 0 15px 15px;
	line-height:140%;
}

#sidebar a.homepage-buttons {
	display:block;
	width:186px;
	height:67px;
	text-indent:-9999em;
	margin:0 0 4px 15px;
}

#btn-invisalign { background:url("../images/logos/btn-invisalign.gif") 0 0 no-repeat; }
#btn-ada { background:url("../images/logos/btn-ada.gif") 0 0 no-repeat; }
#btn-abo { background:url("../images/logos/btn-abo.gif") 0 0 no-repeat; }

#social-icons {margin-left:15px;}

/* CONTENT */

#content {
	float:left;
	width:582px;
}

.content-ext {
	margin:20px 0 20px 60px;
	width:500px !important;
}

#content h2 {
	font-size:16px;
	margin:0 0 20px 0;
}

#content p {
	line-height:1.8em;
	margin:0 0 20px 0;
}

#content a {
	color:#7F2C58;
	text-decoration:none;
}

#content a:hover {
	text-decoration:underline;
}

#content ol, #content ul {
	margin:0 0 20px 10px;
}

#content ol li, #content ul li {
	line-height:1.8em;
}

#content img.right {
	border:1px solid #999;
}

/* HEADLINES */

#content h1.headline {
	text-indent:-9999em;
	width:399px;
	height:29px;
	background-image:url("../images/headlines.gif");
	margin:0 0 30px 0;
}

#hdr-meet-dr-webster { background-position:0 0; }
#hdr-meet-the-team { background-position:0 -29px; }
#hdr-what-sets-us-apart { background-position:0 -56px; }
#hdr-your-first-visit { background-position:0 -87px; }
#hdr-office-tour { background-position:0 -116px; }
#hdr-patient-forms { background-position:0 -144px; }
#hdr-the-game-room { background-position:0 -173px; }
#hdr-for-children { background-position:0 -201px; }
#hdr-for-adults { background-position:0 -230px; }
#hdr-why-braces { background-position:0 -259px; }
#hdr-two-phase-treatment { background-position:0 -288px; }
#hdr-faqs { background-position:0 -317px; }
#hdr-life-with-braces { background-position:0 -346px; }
#hdr-patient-care { background-position:0 -375px; }
#hdr-types-of-braces { background-position:0 -404px; }
#hdr-braces-diagram { background-position:0 -433px; }
#hdr-brace-painter { background-position:0 -462px; }
#hdr-types-of-appliances { background-position:0 -489px; }
#hdr-palatal-expander { background-position:0 -518px; }
#hdr-retainer-instructions { background-position:0 -547px; }
#hdr-treatment-options { background-position:0 -576px; }
#hdr-orthodontic-treatments-video { background-position:0 -605px; }
#hdr-invisalign { background-position:0 -634px; }
#hdr-invisalign-teen { background-position:0 -663px; }
#hdr-dentofacial-orthopedics { background-position:0 -691px; }
#hdr-surgical-orthodontics { background-position:0 -720px; }
#hdr-emergency-care { background-position:0 -749px; }
#hdr-location { background-position:0 -778px; }
#hdr-cedar-city-office { background:url("../images/cedar-city-office.png") 0 0 no-repeat; width:399px; height:30px; }
#hdr-kanab-office { background:url("../images/kanab-office.png") 0 0 no-repeat; width:399px; height:30px; }
#hdr-appointment-request { background-position:0 -807px; }
#hdr-comment-form { background-position:0 -836px; }
#hdr-refer-a-friend { background-position:0 -864px; }
#hdr-site-map { background-position:0 -890px; }
#hdr-our-blog { background:url("../images/our-blog.gif") 0 0 no-repeat; width:399px; height:30px; margin-bottom:6px; }


/* HOMEPAGE */

#flash-homepage {
	width:592px;
	height:314px;
	margin:-9px 0 0 -9px;
	background:url("../images/flash-homepage.jpg") 0 0 no-repeat;
}

#headline-home {
	background:url("../images/headline-home.gif") 0 0 no-repeat;
	height:21px;
	text-indent:-9999em;
	margin:0 0 30px 0;
}





/* FOOTER */

#footer {
	width:800px;
	margin:0 auto;
	background:url("../images/footer-top.gif") 0 0 no-repeat #b2d7f2;
}

#footer-content {
	margin:85px 0px 0 0px;
	padding:0 0 30px 0;
	background:url("../images/footer-bottom.jpg") bottom left no-repeat;
	text-align:center;
}

#footer-content p {
	line-height:150%;
	margin:0 35px 6px 35px;
}

#footer-content p.footer-text {
	font-size:11px;
}

#footer-content p.footer-nav, #footer-content a {
	text-decoration:none;
	color:#7F2C58;
}

#footer-content p.footer-nav a { font-weight:bold; }

#footer-content a:hover {
	text-decoration:underline;
}







/* SESAME CONST */

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

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

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

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

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

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

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

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

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

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

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

*/


/* gallery */
#gallery-container {
	width: 420px; 
	min-height: 500px;}
	
ul#css-office-tour {
	width: 420px; 
	height: 320px;
	position: relative; 
	list-style: none; 
	margin: 0; 
	padding: 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 */
	background: url("../images/office-tour/01-waiting-room.jpg") 15px 15px no-repeat;}
ul#css-office-tour li {
	margin: 330px 0 0 10px; 
	float: left; 
	display: inline;}
ul#css-office-tour li img {
	border: solid 1px #333; /* Customize me */
	margin: 0 4px 2px 0; 
	width: 69px; 
	height: 52px;}
ul#css-office-tour a {text-decoration: none;}
ul#css-office-tour a span {
	left: -999em; 
	position: absolute;}
ul#css-office-tour a span img {
	border: none; 
	width: 400px; 
	height: 300px;}
ul#css-office-tour a:hover {
	background: none; 
	z-index: 100;}
ul#css-office-tour a:hover span {
	position: absolute; 
	top: 10px; 
	left: 10px; 
	display: block;}

/* 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;}
				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: #d5e0eb;/* 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: #537197;/* 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: #537197;/*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:#cfdae4;/* customize me! */
							border: 1px solid #537197;
							line-height: 34px;
							color:#537197;/* 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: #537197;/* customize me*/
		position: absolute;
		left: 9px;
		top: 9px;
	}
		
	
	/* 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.left {
	border: solid 1px #000;
	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 #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;}
.clear {clear: both;}