/* 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 Tahoma, Arial,Helvetica,sans-serif;background:url("../images/body-bg.jpg") 0 0 repeat-x #474749; color:#462820;}
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;}

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


#container {
	width:999px;
	margin:20px auto 0 auto;
}

/* Header */

#hd-sl { 
	height:350px; 
	background:url("../images/header-shadow.png") top left no-repeat;
}

#hd-sr {
	height:350px;
	background:url("../images/header-shadow.png") bottom right no-repeat;
}

#hd {
	position:relative;
	margin:0 0 0 63px;
	height:350px;
	background:url("../images/header-bg.jpg") 0 0 no-repeat;
}

#logo { 
	position:absolute;
	top:28px;
	left:30px;
	z-index:700;
}

#logo a {
	display:block;
	width:674px;
	height:70px;
	background:url("../images/logo.gif") 0 0 no-repeat;
	text-indent:-9999em;
}

#logins {
	position:absolute;
	width:251px;
	height:67px;
	top:123px;
	left:21px;
	z-index:500;
}

#logins li {
	list-style:none;
	float:left;
}

#logins li a {
	display:block;
	background-image:url("../images/logins.png");
	background-repeat: no-repeat;
	text-indent:-9999em;
}

#logins .patient a {
	background-position:0 0;
	width:128px;
	height:46px;
	margin:22px 0 0 0;
}

#logins .doctor a {
	background-position:-129px 0;
	width:121px;
	height:43px;
}

#slideshow-home {
	position:absolute;
	overflow:hidden;
	width:873px;
	height:215px;
	bottom:33px;
}

img.page-photo {
	position:absolute;
	overflow:hidden;
	width:873px;
	height:225px;
	bottom:33px;
}

/* Navigation */

#nav {
	position: absolute;
	width: 873px;
	height: 32px;
	top: 317px;
	z-index: 1000;
}

#nav ul {
	/*position: relative;*/
	z-index: 1000;
}

#nav ul li {
	list-style: none;
	float: left;
	display: inline;
	height: 32px;
}

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

#nav .about-our-office { width:140px; }
#nav .for-new-patients { width:139px; }
#nav .about-orthodontics { width:163px; }
#nav .about-braces { width:114px; }
#nav .treatment-options { width:150px; }
#nav .contact-us { width:110px; }
#nav .home { width:57px; }

#nav #about-our-office { background-position:0 0; }
#nav li:hover #about-our-office, 
#nav li.sfhover #about-our-office,
#nav li.active #about-our-office { background-position:0 -32px; }

#nav #for-new-patients { background-position:-140px 0; }
#nav li:hover #for-new-patients,
#nav li.sfhover #for-new-patients,
#nav li.active #for-new-patients { background-position:-140px -32px; }

#nav #about-orthodontics { background-position:-279px 0; }
#nav li:hover #about-orthodontics,
#nav li.sfhover #about-orthodontics,
#nav li.active #about-orthodontics { background-position:-279px -32px; }

#nav #about-braces { background-position:-442px 0; }
#nav li:hover #about-braces,
#nav li.sfhover #about-braces,
#nav li.active #about-braces { background-position:-442px -32px; }

#nav #treatment-options { background-position:-556px 0; }
#nav li:hover #treatment-options,
#nav li.sfhover #treatment-options,
#nav li.active #treatment-options { background-position:-556px -32px; }

#nav #contact-us { background-position:-706px 0; }
#nav li:hover #contact-us,
#nav li.sfhover #contact-us,
#nav li.active #contact-us { background-position:-706px -32px; }

#nav #home { background-position:-816px 0; }
#nav li:hover #home,
#nav li.sfhover #home,
#nav li.active #home { background-position:-816px -32px; }

/* Sub-navigation */

#nav li ul {
	width: 155px;
	position: absolute;
	z-index: 1000;
	left: -9999em;
	top:32px;
	background: url("../images/subnav-bg.png") 0 0 repeat;
}

#nav ul ul li {
	float: none;
	display: block;
	height: 26px;
/*	overflow: hidden;*/
}

#nav ul ul li a {
	display: block;
	height: 26px;
	text-decoration: none;
	color: #FFF;
	line-height: 26px;
	padding: 0 8px;
}

#nav ul ul li a:hover {
	background:#01383b;
}

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



/* Content */

#content-c {
	margin:-1px 0 0 0;
	background:url("../images/content-bg.png") 0 0 repeat-y;
}

/* Sidebar */

#side {
	float:left;
	width:237px;
	margin:0 0 0 63px;
}

#side div.address {
	width:237px;
	height:186px;
	background:url("../images/sidebar-address.jpg") 0 0 no-repeat;
	
}

#side .address a {
	display:block;
	width:194px;
	height:120px;
	margin:38px 0 0 22px;
	color:#FFF;
	font-family:Arial, Helvetica, sans-serif;
	font-size:22px;
	padding:76px 0 0 18px;
	text-decoration:none
}

#side .logos {
	width:237px;
	height:236px;
	background:url("../images/sidebar-logos-bg.jpg") 0 0 no-repeat;
	margin:0 0 20px 0;
}

#side .logos a {
	display:block;
	width:194px;
	background-image:url("../images/sidebar-logos.jpg");
	text-indent:-9999em;
	margin:0 0 24px 22px;
}


#side .logos a.aao { height:78px; }
#side .logos a.invisalign { height:55px; background-position:0 -78px; }
#side .logos a.invisalign-teen { height:55px; background-position:0 -133px; }



#side .icons {
	width:237px;
	height:53px;
	margin:0 0 20px 12px;
}

#side .icons a {
	display:block;
	width: 53px;
	height: 53px;
	background: url("../images/icons/blog.png") 0 0 no-repeat;
	text-indent:-9999em;
	margin: 0 2px 0 0;
	float: left;
}

#side .icons a.youtube { background-image: url(../images/icons/youtube.png); }
#side .icons a.facebook { background-image: url(../images/icons/facebook.png); }
#side .icons a.google-plus { background-image: url(../images/icons/google-plus.png); }



/* Content */

#content {
	float:left;
	width:565px;
	margin:15px 0 0 35px;
	padding-bottom:30px;
}

#content a {
	color:#014f53;
}

#content h2 {
	font-size:14px;
	color:#69465d;
	font-weight:bold;
	margin:0 0 15px 0;
}

#content h2.lead-in {
	font-weight:normal !important;
}

#content h3 {
	font-weight:bold;
	margin:0 0 6px 0;
}

#content ul {
	margin:0 0 15px 15px;
}

#content ul li {
	list-style:disc inside;
	margin:0 0 6px 0;
	line-height:160%;
}

#content p {
	line-height:160%;
	margin:0 0 15px 0;
}

#content p.sub_nav {
	padding:0 0 10px 0;
	border-bottom:2px solid #02777d;
}

#content p.sub_nav a {
	text-decoration:none;
	color:#333333;
}

#content p.sub_nav a:hover, #content p.sub_nav a.active {
	color:#76526b;
}

#content .separator {
	clear:both;
	margin:20px 0;
	height:2px;
	background:#2e8d92;
}

.column {
	float:left;
	width:49%;
} 

.left-border {
	float:left;
	margin: 0 15px 15px 0;
	border: 1px solid #257D81;
}
#content ul, #content ol {
	margin:0 0 20px 30px;
	list-style: url("../images/bullet.jpg");
}

.site-map #content ul li ul li{
	list-style: none;
}
/* Headlines*/

h1.headline {
	width:289px;
	height:43px;
	background-image:url("../images/headlines.gif");
	text-indent:-9999em;
	margin:0 0 5px 0;
}

#hdl-home {
	background:url("../images/headline-home.gif") 0 0 no-repeat !important;
	width:567px !important;
	height:49px !important;
}

#hdl-meet-dr-martin { background-position:0 0; }
#hdl-meet-the-team { background-position:0 -43px; }
#hdl-the-game-room { background-position:0 -86px; }
#hdl-your-first-visit { background-position:0 -129px; }
#hdl-patient-forms { background-position:0 -172px; }
#hdl-for-adults { background-position:0 -215px; }
#hdl-for-children { background-position:0 -258px; }
#hdl-why-braces { background-position:0 -301px; }
#hdl-two-phase-treatment { background-position:0 -344px; }
#hdl-ortho-dictionary { background-position:0 -387px; }
#hdl-faqs { background-position:0 -430px; }
#hdl-life-with-braces { background-position:0 -473px; }
#hdl-patient-care-videos { background-position:0 -516px; }
#hdl-types-of-braces { background-position:0 -559px; }
#hdl-braces-diagram { background-position:0 -605px; }
#hdl-brace-painter { background-position:0 -648px; }
#hdl-types-of-appliances { background-position:0 -691px; }
#hdl-retainer-instructions { background-position:0 -734px; }
#hdl-orthodontic-treatments { background-position:0 -777px; }
#hdl-invisalign { background-position:0 -820px; }
#hdl-invisalign-teen { background-position:0 -863px; }
#hdl-dentofacial-orthopedics { background-position:0 -906px; }
#hdl-tmj-tmd { background-position:0 -949px; }
#hdl-surgical-orthodontics { background-position:0 -992px; }
#hdl-emergency-care { background-position:0 -1035px; }
#hdl-location { background-position:0 -1078px; }
#hdl-appointment-request { background-position:0 -1121px; }
#hdl-comment-form { background-position:0 -1164px; }
#hdl-refer-a-friend { background-position:0 -1207px; }
#hdl-site-map { background-position:0 -1250px; height:38px !important; }


/* Homepage */

div.col {
	float:left;
	width:265px;
	margin:0 20px 20px 0;
}

div.col-last { margin-right:0 !important; clear:right !important; }

div.col ul {
	margin:0 0 0 25px !important;
}

div.col ul li {
	list-style:url("../images/list-bullet.gif") inside !important;
}

/* Site Map */

#site-map ul ul {
	margin:0 0 0 25px;
}


/* Footer */

#footer {
	min-height:132px;
	background:url("../images/footer-bg.gif") 0 0 repeat-x #02777d;
}

#footer-content {
	margin:0 auto;
	padding:10px 0 0 0;
	width:873px;
}

#footer-s {
	float:left;
	width:237px;
}

#footer-c {
	float:left;
	width:565px;
	margin:0 0 0 35px;
}

#footer-content p {
	line-height:160%;
	margin:0 0 15px 0;
	color:#FFF;
}

#footer-content a {
	font-size:10px;
	text-decoration:none;
	color:#e0e0e1;
}

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

#footer-s p {
	font-size:10px;
}

/* Gallery - Office Tour */

#gallery-container {
	width: 480px; 
	min-height: 500px;
}

ul#css-office-tour {
	width: 480px; 
	height: 370px;
	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/operatory-treatment-area.jpg") 10px 10px no-repeat;}

ul#css-office-tour li {
	margin: 380px 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: 68px; 
	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: 460px; 
	height: 350px;
}

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


/* Types of Braces */
img.right-border {
	float: right;
	clear: right;
	margin: 5px 0 15px 15px;
	border: solid 1px #333; /* Customize me! */}
/* This styled div acts as the hr for browsers */
div.hr {
	height: 0px;
	background-color: #eee; /* Customize me! */
	border: solid 1px #eee; /* Customize me! */
	border-width: 1px 0 0 0; /* Customize me! */
	margin: 20px 0;
	padding: 0;
	clear: both;}
/* This is the backup for screen readers */
hr {
	display: none;
	height: 0px;
	background-color: #eee;
	border: solid 1px #eee;
	border-width: 1px 0 0 0;
	clear: both;}	

/* invisalign teen */
img.right {
	border: solid 1px #000;
	margin: 0 0 15px 15px;
	float: right;
	clear: right;}
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;}


/* games */
ul#sesame-games {
	list-style: none;
	margin: 0 0 15px 0;
	padding: 0;}
ul#sesame-games li {
	width: 187px;
	height: 79px;
	border: 1px solid #1e3554; /* add hex color to change border color; defaults to BODY Font Color*/
	float: left;
	margin: 0 9px 9px 0;
	overflow: hidden;
	position: relative;
	background: #603329; /*add hex color to match site*/}
ul#sesame-games li p {
	font-size: 11px;
	color: #fff;
	margin: 9px;
	position: relative;}
ul#sesame-games li a {
	position: relative;
	display: block;
	overflow: hidden;
	width: 187px;
	height: 79px;}
ul#sesame-games a img {
	position: absolute;
	top: 0;
	left: 0;
	border: 0;
	width: 187px;
	display: block;}




/* Common Treatmens */
div.box {
	float: right;
	clear: right;
	width: 334px;
	background-color: #257D81; /* Customize me! */
	padding: 5px 0 5px 5px;
	margin: 0 0 20px 20px;
	border: solid 1px #333; /* Customize me! */
	-moz-border-radius: 5px; /* Optional - you may customize or remove */
	-webkit-border-radius: 5px;
	color: #FFF;
}
div.box img {
	float: left;
	border: solid 1px #333; /* Customize me! */
	margin-right: 5px;
}
div.box p {
	float: left;
	width: 50%;
	margin: 0;
	padding: 0;
}
hr { /* Customize me! */
	clear: both;
	margin: 1em 0;
}


/*-----------------------------------------------
	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: #E0E0E2;/* 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:#257D81;/* customize me! */
							border: 1px solid #257D81;
							line-height: 34px;
							color:#FFF;/* 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;}