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

}



* .border {

	padding:3px; 

	background:#FFFFFF; 

	border:#bb9501 3px solid;

}

* .image-left {

	float: left;

	padding:3px; 

	background:#FFFFFF; 

	border:#bb9501 3px solid;

}

* .image-right {

	float: right;

	padding:3px; 

	background:#FFFFFF; 

	border:#bb9501 3px solid;

}

img { 

	behavior: url(iepngfix.htc);

}



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

	font-family: Arial, Helvetica, sans-serif;

	background: url(images/bg.jpg) repeat-x #e0eaf1;

	font-size: 16px;

	line-height: 19px;

	font-weight: normal;

}



BODY, TD, .NormalText { font-weight: normal; text-decoration: none; font-style: normal; color: #000000;	font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 16px; line-height: 19px; }



.Title		{ color: #104166; font-size: 36px; font-weight: normal; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 40px; }

.Header		{ color: #104166; font-size: 16px; font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 18px; }

.Subheader	{}



.Gold		{ color: #BB9501; }

.Blue		{ color: #104166; }

.Black		{ color: #000000; }



.SmallText	{ font-size: 10px; }

.MediumText	{ font-size: 16px; line-height: 16px; }

.LargeText	{ font-size: 24px; line-height: 24px; }



IMG.FloatLeft 	{ float: left; margin: 0 5px 5px 0; }

IMG.FloatRight 	{ float: right; margin: 0 0 5px 5px; }

IMG.GoldBorder	{ padding: 3px; background: #FFFFFF; border: #BB9501 3px solid; }



p{

	color: #000000;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 16px;

	line-height: 19px;

	font-weight: normal;

}

* .caption{

	color: #000000;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 12px;

	line-height: 12px;

	font-weight: normal;

}



li.text,.text li{

	font-family: Arial, Helvetica, sans-serif;

	font-size: 16px;

	margin-left: 32px;

	list-style: disc inside;

	line-height:19px;

}

* #main ul li{ 

	margin-left:32px

}

a:link{

	color: #000000;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 16px;

	line-height: 19px;

	font-weight: normal;

	text-decoration: none;

}



a:visited{

	color: #000000;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 16px;

	font-weight: normal;

	line-height: 19px;

	text-decoration: none;

}

a:hover{

	color: #000000;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 16px;

	line-height: 19px;

	font-weight: normal;

	text-decoration: underline;

}



* #footernav {

	text-align:center; 

	margin-left:auto; 

	margin-right:auto;	

	width: 701px;

}



* #footernav .inner {

	margin-top: 5px;

}

* .footer {

	color: #ffffff;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 14px;

	line-height:18px;

	font-weight: bold;

}

* .footerguide {

	color: #000000;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 14px;

	line-height:18px;

	font-weight: bold;

}

* .footerguide a{

	color: #000000;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 10px;

	line-height:18px;

	font-weight: normal;

	text-decoration: none;

}

* .footerguide a:hover{

	color: #000000;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 10px;

	line-height:18px;

	font-weight: normal;

	text-decoration: underline;

}			



h1{

	font-family: Verdana, Arial, Helvetica, sans-serif;

	font-size: 36px;

	color: #104166;

	font-weight: normal;

	line-height: 40px;

	margin-bottom: 26px;

}



h2{

	font-family: Verdana, Arial, Helvetica, sans-serif;

	font-size: 16.5px;

	color: #104166;

	font-weight: bold;

}

h3{

	padding: 6px 16px 6px 0;

	color: #437296;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 11px;

	line-height: 19px;

	font-weight: bold;

}



h4{

	font-family: Verdana, Arial, Helvetica, sans-serif;

	font-size: 16.5px;

	color: #104166;

	font-weight: bold;

}



h5{

	font-family: Verdana, Arial, Helvetica, sans-serif;

	font-size: 10px;

	color: #104166;

	font-weight: normal;

}

* #homemovie{ width:260px; height:389px; float:right; }

* .home_movie{

	width:230px;

	height:359px; 

	background:url(images/bg-flash.jpg) #FFFFFF; 

	position:relative; top:6px; left:6px; 

	padding:3px; 

	border:#bb9501 3px solid;

}



* #nav-column {

	float:left;

	padding-left:0;

	width: 190px;

	position:relative;

	z-index:6;

	top:0; 

}



* #nav-column .address {

	color: #ffffff;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 12px;

	line-height: 12px;

	padding: 75px 0 0 11px;

}

* #nav-column .inner { 

	margin-top: 0; 

}

/* header login, contact */

* #nav-login {list-style: none;}

* #nav-login a {display: block; padding: 0; height:48px; margin: 0;}

* #nav-login ul {

	position: absolute;

	left: -999em;

	list-style: none;

	margin: 0;

}

#nav-login li {position: relative; float: left;}

#nav-login li:hover ul, #nav-login li.sfhover ul {

	left: auto;

	display: block;

}



#nav-login a:hover{

	background-position:0px -48px

}

#nav-login li ul { position:absolute; left:-999em}
#nav-login li:hover ul { left:auto; z-index:999 }
#nav-login li ul li { background:#5484aa;height:25px; width:140px}
#nav-login li ul li:hover { background:#0e7859}
#nav-login li ul li a { color:#FFF; font-size:14px; line-height:14px; height:25px; text-indent:20px; padding-top:5px}

* #login, * #contact-us, * #top-left, * #top-right, * #patient-forms {

	overflow: hidden; 

	text-indent: -999em; /* Indents the rich-text so it does not show */

	height: 48px;

	

}

/* Set the image for each nav item */

* #login {background: url(images/nav-patient-login.jpg); width:164px; cursor: pointer;}

* #contact-us {background: url(images/nav-contact-us.jpg); width:147px; cursor: pointer;}

* #patient-forms {background: url(images/nav-patient-forms.jpg); width:170px; cursor: pointer;}

* #top-left {background: url(images/top-left.jpg); width:189px; cursor: default; }



/* end header login */



* #nav {list-style: none;}

#nav a{display: block; padding: 0; width: 188px; margin: 0;}

#nav ul {

	position: absolute;

	left: -999em;

	list-style: none;

	margin: -32px 0 0 212px;

	background: #016FC4;

	z-index: 1;

}

#nav li{display: inline;}

#nav li:hover ul, #nav li.sfhover ul {

	left: auto;

	display: block;

}



ul#nav ul li a {

	font-size:11px;

	background:#feefba;

	padding: 4px 4px 5px;

	color: #47a35a;

	font-weight: bold;

	text-decoration: none;

	width:170px;

}

ul#nav ul li a:hover {

	background: #a3e3b0;

	color: #47a35a;

}

* #home, * #doctor, * #team, * #policies, * #ortho, * #braces101, * #retainer, * #comment, * #refer, * #game, * #faq, * #incognito, * #invisalign, * #links, * #contests-events {

	overflow: hidden; 

	text-indent: -999em; /* Indents the rich-text so it does not show */

	width: 188px;

	cursor: pointer;

}



/* Shift the image position up to show the active state */

#nav a:hover, #nav .active{

	background-position:-188px 0px

}



/* Set the cursor to default arrow so link does not appear clickable */

* #nav .active {cursor: default}



/* Image Replacement */

* #container{

	width: 701px;

	text-align:left;

	margin-right: auto;

	margin-left: auto; 

	background:url(images/bg-nav.jpg) repeat-y #FFFFFF; 

}

* #bottom{ 

	background:url(images/bg-bottom.jpg) repeat-x #74afdd ; padding:0; margin:0;

}

* #main {

	float: right;

	padding-top:28px;

	width: 511px; 

	background:#FFFFFF;

}

* #main .inner {

	margin-right: 10px;

	padding-left: 16px;

}

* #header{

	width: 876px;

	height:189px;

	padding:0;

}

* #logo {

	width: 701px;

	height: 141px;	

}

* #logo a {

	display: block;

	width: 701px;

	height: 141px;

	text-indent: -999em;

	background-image: url(images/logo-hartman-orthodontics.jpg);

	background-repeat: no-repeat;

	cursor:pointer;	

}



* .top{

	color: #47a35a;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 10px;

	text-align: right;

	font-weight: bold;

	text-decoration: underline;

}

/* NAVIGATION ---------- */



/* NAVIGATION MAIN ---------- */

ul#navlists {list-style: none; padding:0; margin:0; width:190px;}



/*  Sets styles for all links that are inside the ul id="nav" */

#navlists a {display: block;height: 33px; overflow: hidden; text-indent:-999em; width:190px}



/* Set the image for each nav item */

* #home {background: url(images/nav-home.jpg); height:33px}

* #doctor {background: url(images/nav-meet-doctors.jpg); height:33px}

* #team {background: url(images/nav-meet-team.jpg); height:33px}

* #policies {background: url(images/nav-office-policies.jpg); height:33px}

* #ortho {background: url(images/nav-about-ortho.jpg); height:33px}

* #braces101 {background: url(images/nav-braces101.jpg); height:33px}

* #retainer {background: url(images/nav-retainer.jpg); height:33px}

* #comment {background: url(images/nav-comment-form.jpg); height:33px}

* #refer {background: url(images/nav-refer.jpg); height:33px}

* #game {background: url(images/nav-game.jpg); height:33px}

* #faq {background: url(images/nav-faq.jpg); height:33px}
* #incognito {background: url(images/nav-incognito.jpg); height:33px}
* #invisalign {background: url(images/nav-invisalign.jpg); height:33px}

* #links {background: url(images/nav-links.jpg); height:33px}

* #contests-events {background: url(images/nav-events-contests.jpg); height:33px}



/* Shift the image position up to show the active state */

#navlists a:hover, #navlists .active, #navlists li:hover, #navlists li.sfhover, 

#navlists li:hover #home, #navlists li.sfhover  #home

#navlists li:hover #doctor, #navlists li.sfhover #doctor, 

#navlists li:hover #team, #navlists li.sfhover #team, 

#navlists li:hover #policies, #navlists li.sfhover #policies, 

#navlists li:hover #ortho, #navlists li.sfhover #ortho, 

#navlists li:hover #braces101, #navlists li.sfhover #braces101,

#navlists li:hover #retainer, #navlists li.sfhover  #retainer,

#navlists li:hover #comment, #navlists li.sfhover  #comment, 

#navlists li:hover #refer, #navlists li.sfhover  #refer,

#navlists li:hover #game, #navlists li.sfhover  #game,

#navlists li:hover #faq, #navlists li.sfhover  #faq,

#navlists li:hover #invisalign, #navlists li.sfhover  #invisalign,
#navlists li:hover #incognito, #navlists li.sfhover  #incognito,
#navlists li:hover #links, #navlists li.sfhover  #links,

#navlists li:hover #contests-events, #navlists li.sfhover  #contests-events {background-position:-190px 0pt;}



/* Set the cursor to default arrow so link does not appear clickable */

* #navlists .active {cursor: default}



/* NAVIGATION SUB ---------- */

ul#sub {list-style: none; padding: 0; margin:0; width:190px;}



/*  Sets styles for all links that are inside the ul id="nav" */

* #sub a {display: block;height: 35px; overflow: hidden; text-indent:-999em; width:190px}



/* Set the image for each sub nav item */

* #children {background: url(images/sub-children.jpg); }

* #adults {background: url(images/sub-adults.jpg); }

* #common {background: url(images/sub-treatments.jpg); }

* #dictionary {background: url(images/sub-dictionary.jpg); }

* #braces {background: url(images/sub-types-braces.jpg); height: 35px; }

* #litigating {background: url(images/sub-litigating.jpg); }

* #appliances {background: url(images/sub-appliances.jpg); }

* #diagram {background: url(images/sub-diagram.jpg); }

* #painter {background: url(images/sub-painter.jpg); }

* #oral {background: url(images/sub-oral.jpg); }

* #emergency {background: url(images/sub-emergency.jpg); }



/* Shift the image position up to show the active state */

#sub a:hover, #sub .active, #sub li:hover, #sub li.sfhover,  #sub li.active,

#sub li:hover #children, #sub li.sfhover #children, 

#sub li:hover #adults, #sub li.sfhover #adults, 

#sub li:hover #common, #sub li.sfhover #common, 

#sub li:hover #dictionary, #sub li.sfhover #dictionary, 



#sub li:hover #braces, #sub li.sfhover #braces, 

#sub li:hover #litigating, #sub li.sfhover #litigating, 

#sub li:hover #appliances, #sub li.sfhover #appliances, 

#sub li:hover #diagram, #sub li.sfhover #diagram,

#sub li:hover #painter, #sub li.sfhover #painter,

#sub li:hover #oral, #sub li.sfhover #oral,

#sub li:hover #emergency, #sub li.sfhover #emergency {background-position:-190px 0pt;}



/* Set the cursor to default arrow so link does not appear clickable */

* #sub .active {cursor: default}



/* etc */



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:-5px}



ul#sesame-games li h2 a {

font-weight:bold;}



ul#sesame-games img {

border: 0;

margin: 0 0 10px 10px}



ul#sesame-games a.button {

float:right;

height:85px;

width:200px; 

padding-right:18px;}



ul#sesame-games p {

padding-bottom: 1em}

img.right {
	float: right;
	clear: right;
	margin: 0 0 10px 10px;
	}