/* Play nice with the WWW, validate me! */
/* clear floats */
* {
	margin: 0;
	padding: 0;
}/* sets all elements margin and padding to 0 */

.clear:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clear {
    display: inline-block;
}

html[xmlns] .clear {
    display: block;
}

* html .clear {/* For IE =< 6 */
    height: 1%;
}


.image-float-left {
	float: left;
	clear: left;
	display: block;
}
.image-float-right {
	float: right;
	clear: right;
	display: block;
	margin-left:8px;
	margin-bottom:5px;
}


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

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


html {
     /*overflow: -moz-scrollbars-vertical;*/
}

body {
	margin: 0;
}
hr{
	color: #231f20;
	margin-bottom: 8px;
	clear:both;
}
#main p {
	margin-top: 3px;
	margin-bottom:15px;
	color: #231f20;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 18px;
	font-weight: normal;	
}
a:link, a:visited{
	color: #892d4d;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight:normal;
	text-decoration: underline;
}
a:hover{
	color: #231f20;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight:normal;
	text-decoration: underline;
}
#main li{
	color: #231f20;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin-left: 35px;
	list-style: outside;
	line-height:20px;
}
#main li ul li{
	margin-left: 20px;
}
#main ul{
	margin-bottom:15px;
}
#main ol{
	margin-bottom:15px;
}
.top{
	color: #9b3b5d;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-align: right;
	font-weight: bold;
	text-decoration: underline;
}
.top a:link, .top a:visited{
	color: #9b3b5d;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-align: right;
	font-weight: bold;
	text-decoration: underline;
}
.top a:hover{
color: #031b54;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-align: right;
	font-weight: bold;
	text-decoration: underline;
}
h1{
	color: #031b54;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bold;
}
h2{
	color: #031b54;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bold;
}
h3{
	color: #231f20;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	text-transform: uppercase;
}
h4{
	color: #231f20;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
}


#footer{
clear:both;
	width: 780px;
	height:196px;
	background-image: url(images/footer_bkd.jpg);
	background-repeat: no-repeat;
	position: relative;
	top:60px;
}
	
#footer .inner{
	width:570px;
	padding-top: 35px;
	padding-left: 15px;
}

#footer p{
	color: #666666;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	line-height: 20px;
	margin-bottom:15px;
}
#footer a {
color:#969696;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	text-decoration: none;
}
#footer a:hover{
	text-decoration: underline;
}

#navrow{width:780px;
background-image: url(images/nav_bkd.jpg);
background-repeat: no-repeat;
position:absolute;
height:50px;
	top:80px;}
ul#nav, #nav ul {
	padding: 0;
	width:780px;
	margin: 0;
	list-style: none;
}
ul#nav a {
	display: block;
}
ul#nav li{
	position: relative;
	float: left; 
}
ul#nav li ul {
	position: absolute;
	left: -999em;
	top: 31px;
	width:182px;
	z-index:10;
}

.navstart{
	background: url(images/dropdown_start.gif) no-repeat;
	width:182px;
	height:168px;
}
.navstart a:hover{
background:#b55778;
}
.navchoose{
	background: url(images/dropdown_choose.gif) no-repeat;
	width:182px;
	height:90px;
}
.navchoose a:hover{
background:#1c4199;
}
.navbraces{
	background: url(images/dropdown_braces.gif) no-repeat;
	width:182px;
	height:257px;
}
.navbraces a:hover{
background:#488bc8;
}
.navpatient{
	background: url(images/dropdown_patient.gif) no-repeat;
	width:182px;
	height:144px;
}
.navpatient a:hover{
background:#ea9437;
}
.navstories{
	background: url(images/dropdown_stories.gif) no-repeat;
	width:182px;
	height:70px;
}
.navstories a:hover{
background:#9820aa;
}
.navkids{
	background: url(images/dropdown_kids.gif) no-repeat;
	width:182px;
	height:109px;
}
.navkids a:hover{
background:#60b017;
}
ul#nav ul {
	padding-top:28px;
}
ul#nav ul li a {
	font-size:12px;
	color: #ffffff;
	font-weight: normal;
	text-decoration: none;
	width:169px;
	margin-left: 4px;
	padding-left:6px;
	margin-top:1px;
line-height:17px;
}
ul#nav ul li a:hover {
	color: #ffffff;
}
#nav li:hover ul, #nav li.sfhover ul {
	left: auto;
}

#arebraces, #whyharte, #start,#patient,#stories,#kidsclub {
	overflow: hidden; 
	text-indent: -999em; /* Indents the rich-text so it does not show */
	height: 31px;
	cursor: pointer;
}
/* Set the image for each nav item */
#arebraces {background: url(images/braces.jpg); width:163px;}
#whyharte {background: url(images/why.jpg);width:156px;}
#start {background: url(images/start.jpg);width:128px;}
#patient {background: url(images/patient.jpg);width:114px;}
#stories {background: url(images/success.jpg);width:129px;}
#kidsclub{background: url(images/club.jpg);width:90px;}

/* Shift the image position up to show the active state */
#nav li:hover a, #nav li.sfhover a, #nav .active{
	background-position:0px -31px}

/* Set the cursor to default arrow so link does not appear clickable */
#nav .active {cursor: default}

#subnav{
	position:absolute;
	top:0px;
	right:0px;
	color:#cacaca;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	text-align: right;
}
.number{
	color:#031b54;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
}
ul#header-nav, #header-nav ul {
top:25px;
	right:0px;
position:absolute;
	list-style: none;
	font-size: 12px;
	font-weight:bold;
	color: #cacaca;
}
ul#header-nav a {
	display: block;
	
}
ul#header-nav li{
	position: relative;
	float: left; 
}
ul#header-nav ul {
	padding-top:18px;
}
ul#header-nav li ul {
position: absolute;
top:26px;
left: -999em;
background: url(images/dropdown_contact.gif) no-repeat;height:78px;	width: 182px;	}

ul#header-nav li#login-drop ul {
position: absolute;
top:26px;
left: -999em;
background: url(images/dropdown_ptlogin.gif) no-repeat;height:62px;	width: 182px;	}

ul#header-nav ul li a {
font-size:12px;
text-align:left;
	color: #ffffff;
	font-weight: normal;
	text-decoration: none;
	width:169px;
	margin-left: 4px;
	padding-#:6px;
margin-top:1px;
line-height:17px;
}

ul#header-nav ul li a:hover {
background:#e72769;}

ul#header-nav li#login-drop ul li a:hover {
background:#1C4199;}

#header-nav li:hover ul, #header-nav li.sfhover ul {
left: auto;}

#header-nav li:hover#login-drop ul, #header-nav li.sfhover#login-drop ul {
left: 0px;}

#login, #doclogin, #contact, #toplocations,#home {
	overflow: hidden; 
	text-indent: -999em; /* Indents the rich-text so it does not show */
height: 26px;
	cursor: pointer;
}

/* Set the image for each nav item */
#login{background: url(images/patientlogin.jpg); width:106px;}
#doclogin{background: url(images/doclogin.jpg);width:116px;}
#contact{background: url(images/contact.jpg);width:84px;}
#toplocations{background: url(images/toplocations.jpg);width:88px;}
#home{background: url(images/home.jpg);width:65px;}

/* Shift the image position up to show the active state */
#header-nav li:hover a, #header-nav li.sfhover a, #header-nav .active{
	background-position:0px -26px}
	

/* Set the cursor to default arrow so link does not appear clickable */
#header-nav .active {cursor: default}

#container{
	width: 780px;
	min-height: 630px;
	_height: 630px;
	position:relative;
	background: #fff url(images/harte-body-bg.jpg) 0 0 no-repeat;
}
div.hideme {background: #fff;}
body.home #container div.hideme {
	display: none;
}

#content {
position:relative;
top:55px;
	width: 780px;
}
#main {
float:right;
	width: 525px;
}
#main .inner {
margin:0px;
	padding-right: 25px;
	padding-left:15px;
}
#leftnav{
	float:left;
	width:235px;
}
#leftnav li{
	margin:0px;
}
.appointment-callout {display: block;}
body.home #leftnav .appointment-callout img {margin-top: 0px;}
#leftnav .appointment-callout img {margin-top: 55px;}
body.comment-form .appointment-callout, body.comment-form .appointment-callout img, 
body.refer-a-friend .appointment-callout, body.refer-a-friend .appointment-callout img, 
body.appointment-request .appointment-callout, body.appointment-request .appointment-callout img,
body.contact-us .appointment-callout, body.contact-us .appointment-callout img {display: none;}
#address{
	margin-top: 10px;
	height:203px;
}
#address p{
padding-left:20px;
padding-top:10px;
color:#444444;
font:11px/18px Verdana, Arial, Helvetica, sans-serif;
}
#address em {font-size: 90%; }
#address p span {margin-left: 20px; display: block;}
#logo {
	height: 85px;
	width: 298px;}
#logo a {
	display: block;
	height: 85px;
	width: 298px;
	line-height: 0px;
	text-indent: -999em;
	background: url(images/logo.jpg) no-repeat left;}

blockquote {
	padding-left: 23px;
}
#flash{
	margin-bottom: 10px;
	width: 525;
	height: 256;
	overflow: hidden;
}
ul#sub, #sub ul {
	padding: 0;
	width:235px;
	margin: 0;
	list-style: none;
}
ul#sub a {
	display: block;
}
ul#sub li{
	position: relative;
	float: left; 
}

#sub li:hover ul, #sub li.sfhover ul {
	left: auto;
}

#contactcomment, #contactappt, #contactrefer,#whybraces,#child,#adults,#treatments,#types,#apps,#phase,#invisalign, #invisalign-teen,#inovation,#bracesfaq,#bracesretention,#ibraces,#unique,
#choosedocs,#lifetime,#clause,#links,#visit,#forms,#cost,#locations,#startdocs,#startappt,#startfaq,#life,#care,#patientretention,#events,#patientform,#patientrefer,#test,
#before,#club,#painter,#color,#game {
	overflow: hidden; 
	text-indent: -999em; /* Indents the rich-text so it does not show */
	width: 235px;
	cursor: pointer;
}
/* Set the image for each nav item */
#contactcomment {background: url(images/comment2.jpg); height:28px;}
#contactappt {background: url(images/appt2.jpg); height:27px;}
#contactrefer {background: url(images/refer2.jpg);height: 27px;}
#whybraces{background: url(images/whybraces.jpg);height: 28px;}
#child{background: url(images/orthochild.jpg);height: 27px;}
#adults{background: url(images/adults.jpg);height: 27px;}
#treatments{background: url(images/treat.jpg);height: 27px;}
#types{background: url(images/types.jpg);height: 27px;}
#apps{background: url(images/apps.jpg);height: 27px;}
#phase{background: url(images/phase.jpg);height: 27px;}
#invisalign{background: url(images/invisalign.jpg);height: 27px;}
#invisalign-teen{background: url(images/invisalign-teen.jpg);height: 27px;}
#inovation{background: url(images/inovation.jpg);height: 27px;}
#bracesfaq{background: url(images/faq_braces.jpg);height: 27px;}
#bracesretention{background: url(images/retention.jpg);height: 27px;}
#ibraces{background: url(images/ibraces.jpg);height: 27px;}
#unique{background: url(images/unique.jpg);height: 28px;}
#choosedocs{background: url(images/doc.jpg);height: 27px;}
#lifetime{background: url(images/lifetime.jpg);height: 27px;}
#clause{background: url(images/clause.jpg);height: 27px;}
#links{background: url(images/links.jpg);height: 27px;}
#visit{background: url(images/visit.jpg);height: 28px;}
#forms{background: url(images/forms.jpg);height: 27px;}
#cost{background: url(images/cost.jpg);height: 27px;}
#locations{background: url(images/locations.jpg);height: 27px;}
#startdocs{background: url(images/docstart.jpg);height: 28px;}
#startappt{background: url(images/appt.jpg);height: 27px;}
#startfaq{background: url(images/faq.jpg);height: 27px;}
#life{background: url(images/life.jpg);height: 28px;}
#care{background: url(images/er.jpg);height: 27px;}
#patientretention{background: url(images/retentionpatient.jpg);height: 27px;}
#events{background: url(images/events.jpg);height: 27px;}
#patientform{background: url(images/comment.jpg);height: 27px;}
#patientrefer{background: url(images/refer.jpg);height: 27px;}
#test{background: url(images/test.jpg);height: 28px;}
#before{background: url(images/before.jpg);height: 27px;}
#club{background: url(images/joinclub.jpg);height: 28px;}
#painter{background: url(images/painter.jpg);height: 27px;}
#color{background: url(images/retainer.jpg);height: 27px;}
#game{background: url(images/game.jpg);height: 27px;}

/* Shift the image position up to show the active state */
#sub a:hover, #sub .active{
	background-position:-235px 0px}

/* Set the cursor to default arrow so link does not appear clickable */
#sub .active {cursor: default}

#h-contact,#h-contactcomment,#h-contactrefer,#h-contactappt,#h-braces,#h-whybraces,#h-child,#h-adults,#h-treatments,#h-types,#h-apps,#h-phase,#h-invisalign, #h-invisalign-teen,#h-inovation,#h-ibraces,#h-bracesretention,#h-bracesfaq,#h-choose,#h-unique,#h-choosedocs,#h-lifetime,#h-clause,#h-links,#h-start,#h-visit,#h-forms,#h-cost,#h-locations,#h-startdocs,#h-startappt,#h-startfaq,#h-patient,#h-life,#h-care,#h-patientretention,#h-events,#h-patientform,#h-patientrefer,#h-stories,#h-test,#h-before,#h-joinclub,#h-painter,#h-color,#h-game,#h-site{width:533px;height:261px; margin-bottom:8px;
overflow: hidden; 
	text-indent: -999em; /* Indents the rich-text so it does not show */}

#h-contact{background: url(images/h-contact.jpg)}
#h-contactcomment{background: url(images/h-contactcomment.jpg)}
#h-contactrefer{background: url(images/h-contactrefer.jpg)}
#h-contactappt{background: url(images/h-contactappt.jpg)}
#h-braces{background: url(images/h-braces.jpg)}
#h-whybraces{background: url(images/h-why.jpg)}
#h-child{background: url(images/h-child.jpg)}
#h-adults{background: url(images/h-adults.jpg)}
#h-treatments{background: url(images/h-treatments.jpg)}
#h-types{background: url(images/h-types.jpg)}
#h-apps{background: url(images/h-apps.jpg)}
#h-phase{background: url(images/h-phase.jpg)}
#h-invisalign{background: url(images/h-invisalign.jpg)}
#h-invisalign-teen{background: url(images/h-invisalign-teen.jpg)}
#h-inovation{background: url(images/h-inovation.jpg)}
#h-ibraces{background: url(images/h-ibraces.jpg)}
#h-bracesretention{background: url(images/h-bracesretention.jpg)}
#h-bracesfaq{background: url(images/h-bracesfaq.jpg)}
#h-choose{background: url(images/h-choose.jpg)}
#h-unique{background: url(images/h-unique.jpg)}
#h-choosedocs{background: url(images/h-choosedocs.jpg)}
#h-lifetime{background: url(images/h-lifetime.jpg)}
#h-clause{background: url(images/h-clause.jpg)}
#h-links{background: url(images/h-links.jpg)}
#h-start{background: url(images/h-start.jpg)}
#h-visit{background: url(images/h-visit.jpg)}
#h-forms{background: url(images/h-forms.jpg)}
#h-cost{background: url(images/h-cost.jpg)}
#h-locations{background: url(images/h-locations.jpg)}
#h-startdocs{background: url(images/h-startdocs.jpg)}
#h-startappt{background: url(images/h-startappt.jpg)}
#h-startfaq{background: url(images/h-startfaq.jpg)}
#h-patient{background: url(images/h-patient.jpg)}
#h-life{background: url(images/h-life.jpg)}
#h-care{background: url(images/h-care.jpg)}
#h-patientretention{background: url(images/h-patientretention.jpg)}
#h-events{background: url(images/h-events.jpg)}
#h-patientform{background: url(images/h-patientcomment.jpg)}
#h-patientrefer{background: url(images/h-patientrefer.jpg)}
#h-stories{background: url(images/h-stories.jpg)}
#h-test{background: url(images/h-test.jpg)}
#h-before{background: url(images/h-before.jpg)}
#h-joinclub{background: url(images/h-join.jpg)}
#h-painter{background: url(images/h-painter.jpg)}
#h-color{background: url(images/h-color.jpg)}
#h-game{background: url(images/h-game.jpg)}
#h-site{background: url(images/h-site.jpg)}

.textright{float:right}

.left {
float:left;
margin:0 10px 10px 0;}
img.right {
float:right;
margin:0 0 10px 10px;}
.clear {
clear:both;}
h2.media-center {
background:#000033;
color:#FFF;
margin:0;
padding:5px;}
div.media-center {
background:#336699;
color:#FFF;
display:inline-block;
margin-bottom:10px;
overflow:auto;
padding:10px;}
div.media-center a {
color:#FFF;}
div.media-center img {
border:1px solid #FFF;}
div#sesame-game {
background: #000;
line-height: 0;
margin: 10px auto;
text-align: center;
width: 400px}

ul#sesame-games {
list-style: none;
margin: 0;
padding: 0}

ul#sesame-games li {
clear: both;
display: block;
margin-left:0px;}

ul#sesame-games img {
border: 0;
margin: 0 0 10px 10px}

ul#sesame-games a.button {
float:right;
height:85px;
width:200px}

ul#sesame-games p {
padding-bottom: 1em}
#leftnav img, #main img {border:0;}
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;}

/* Global form styles */
fieldset {border: none; padding: 9px 0;}
fieldset div {clear: both;}
.form-header {border-bottom: 1px solid #b60d46;/*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 #b60d46;/*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:#b60d46;/* customize me! */
	border: 1px solid #b60d46;
	text-align:center;
	line-height:31px;
	color:#ffffff;/* customize me! */
	font-size:12px;
	font-weight:bold;
}


/* Mini-Contact Form */
.contact-form {
	margin: 0 0 36px 0px;
	width: 460px;
	padding: 10px;
	border:solid 2px #b60d46;/*optional, change color to match site*/
	background:#ffffff;/*optional, change color of background*/
}
.contact-form fieldset {border: none; padding: 9px 0;}
.contact-form li {font-weight: bold;}
.contact-form label {display: none;}
.contact-form input, .contact-form textarea {
	font-size:12px;
	padding:4px 2px;
	border:1px solid #b60d46;
	width:400px;
	margin:9px 10px;
	background: #ffffff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

.contact-form button {/*these styles control the look of the button, change as necessary*/
	text-align: center;
	margin: 9px auto;
	display: block;
	width:125px;
	height:31px;
	background:#ffffff url(images/button-bg.jpg) 0 50% repeat-x;/* customize me! */
	border: 1px solid #b60d46;
	text-align:center;
	line-height:31px;
	color:#b60d46;/* customize me! */
	font-size:12px;
	font-weight:bold;
}