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

}



/* 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 0 20px;

	text-align:center;

	background-repeat: repeat-x;

	background-color: #F0E1C1;

	background-image: url(images/bkd2.jpg);

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



}

p{

	margin-top: 2px;

	margin-bottom: 15px;	

}

.border{

	border: 4px solid #FFFFFF;

	background-color: #F0E1C2;

}



.text{

	color: #3E2F17;

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

	font-size: 11px;

	line-height: 19px;

	padding-left: 4px;

	padding-right: 10px;

}

.text li{

	color: #3E2F17;

	list-style-type: circle;	

}

.text a:link{

	color: #3E2F17;

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

	font-size: 11px;

	font-weight: bold;

	text-decoration: none;

}



.text a:visited{

	color: #3E2F17;

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

	font-size: 11px;

	font-weight: bold;

	text-decoration: none;

}

.text a:hover{

	color: #3E2F17;

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

	font-size: 11px;

	font-weight: bold;

	text-decoration: underline;

}

#address{

	float: left;

	width: 208px;

}

#address .inner {

	margin: 18px 0 0 18px;

}

.address{

	color: #3E2F17;

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

	font-size: 10px;

	text-align:left;

	padding-left: 5px;

}

#footer{

	border: 4px solid #FFFFFF;

	background-color: #F0E1C2;

	margin-top: 13px;

	width: 760px;

	margin-left: auto;

	margin-right: auto;

	overflow: hidden;

}

#footernav {color: #3E2F17;

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

	font-size: 10px;

	text-decoration:none;

	text-align:left;

	float: left;

	width: 552px;

}

#footernav .inner {

	margin: 18px 0 0 18px;

}	

#footernav a:link{color: #3E2F17;

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

	font-size: 10px;

	text-decoration:none;}

#footernav a:visited{color: #3E2F17;

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

	font-size: 10px;

	text-decoration:none;}

#footernav a:hover{color: #3E2F17;

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

	font-size: 10px;

	text-decoration:underline;}

	

#design{

	color: #3E2F17;

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

	font-size: 11px;

	font-weight: bold;

	text-decoration:none;

	text-align:left;

}

#design a:link{

	color: #3E2F17;

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

	font-size: 11px;

	font-weight: bold;

	text-decoration:none;

}

#design a:visited{

	color: #3E2F17;

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

	font-size: 11px;

	font-weight: bold;

	text-decoration:none;

}

#design a:hover{

	color: #3E2F17;

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

	font-size: 11px;

	font-weight: bold;

	text-decoration:underline;

}

.header{

	background-color: #801817;

	border-bottom-width: 4px;

	border-bottom-style: solid;

	border-bottom-color: #FFFFFF;

}

h1{

	font-family: Comic Sans, Comic Sans MS, cursive;

	font-size: 18px;

	color: #801818;

	font-weight: bold;

	overflow: hidden;

	position: relative;

	height: 36px;

	margin-bottom: 10px;

	padding-bottom: 0px;

}

h1 span{

	background-repeat: no-repeat; 

height: 100%; 

position: absolute; 

width: 100%;

}

.pic{

	margin-right: 15px;

}

h2{

	color: #801818;

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

	padding-left: 4px;

	font-size: 14px;

	font-weight: bold;

	margin-bottom: 1px;

}

h2.replace {height: 36px;}

h3{

	color: #801818;

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

	font-size: 12px;

	font-weight: bold;

	padding-left: 4px;

	margin-bottom: 1px;

}

.subnav{

	border: 4px solid #FFFFFF;

	width: 220px;

}

h4{

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

	font-size: 13px;

	color: #3E2F17;

	font-weight: bold;

	margin-left: 8px;

	margin-top: 3px;

	margin-bottom: 6px;

	

}

ul{

	margin: 1px 10px 15px 10px;

	margin-top: 1px;

	list-style: inside disc;

}

.module{

	margin-bottom: 15px;

	margin-top: 11px;

}

hr{color: #801818;}



.top

{

	color: #3E2F17;

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

	font-size: 11px;

	font-weight: bold;

	text-decoration: none;

	text-align: right;

	padding-right: 10px;

}

.top a:link

{

	color: #3E2F17;

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

	font-size: 11px;

	font-weight: bold;

	text-decoration: none;

	text-align: right;

	padding-right: 10px;

}

.top a:visited

{

	color: #3E2F17;

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

	font-size: 11px;

	font-weight: bold;

	text-decoration: none;

	text-align: right;

	padding-right: 10px;

}

.top a:hover

{

	color: #3E2F17;

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

	font-size: 11px;

	font-weight: bold;

	text-decoration: underline;

	text-align: right;

	padding-right: 10px;

}

ul#nav, #nav ul {

	font-size: 11px;

	padding: 0;

	margin: 0;

	list-style: none;

	width: 173px;

}

ul#nav a {

	display: block;

	width: 173px;

	

}

ul#nav li {

	position: relative;

	float: left;

	width: 173px;

}

ul#nav li ul {

	position: absolute;

	width: 173px;

	top: 0;

	left: -999em;

	margin-left: 173px;

	background: #6db0b0;

	z-index: 10;

}



ul#nav ul li a {

	width: 173px;

	background: #6db0b0;

	padding: 3px 4px;

	color: #3E2F17;

	font-weight: bold;

	text-decoration: none;

}

ul#nav ul li a:hover {

	background: #fde178;

}

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

	left: auto;

}



#office, #care, #game, #ortho, #braces, #invisalign {

	overflow: hidden; 

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

	height: 35px; 

	width: 173px; 

	cursor: pointer;

}

/* Set the image for each nav item */

#office {background: url(images/office.jpg)}

#care {background: url(images/care.jpg)}

#game {background: url(images/game.jpg)}

#ortho {background: url(images/orthodontics.jpg)}

#braces {background: url(images/braces.jpg)}

#invisalign {background: url(images/invisalign.jpg)}



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

#nav a:hover, #nav .active {

	background-position:-173px 0px;

}



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

#nav .active {cursor: default}



ul#navsub {

height: 50px;

list-style: none;

margin: 0 0 0 20px;

padding: 0;

}



/*  Makes the list items sit next to each other */

#navsub li {

	float: left;

	padding-left: 3px;

}



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

#navsub a {

display: block;

height: 50px; 

overflow: hidden; 

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

width: 145px; 

}



/* Set the image for each nav item */

#login {background: url(images/patient.jpg)}

#contact {background: url(images/contact.jpg)}

#home {background: url(images/home.jpg)}



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

#navsub a:hover, #navsub .active {background-position:0px -50px;}



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

#navsub .active {cursor: default}





ul#nav2 {

	height: 35px;

	list-style: none;

	margin: 0;

	padding: 0;

	width: 173px;

	position: relative;

	top: 30px;

	left:16px;

	float: left;

}

/*  Makes the list items sit next to each other */

#nav2 li {

	float: none;

}



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

#nav2 a {

	display: block;

	height: 35px;

	overflow: hidden;

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

	width: 173px;

}





/* Image Replacement */



/* headings */

#h-welcome {background: url(images/index2_03.png) 0 0 no-repeat;}

#h-ortho {background: url(images/title_ortho.jpg);}

#h-ask {background: url(images/title_ask.jpg);}

#h-office {background-image: url(images/title_office.jpg);}

#h-braces {background-image: url(images/title_braces.jpg);}

#h-painter {background-image: url(images/title_paint.jpg);}

#h-meet-ortho {background-image: url(images/title_doc.jpg);}

#h-meet-team {background-image: url(images/title_team.jpg);}

#h-site-map {background-image: url(images/title_map.jpg);}

#h-policies {background-image: url(images/title_policies.jpg);}

#h-forms {background-image: url(images/title_forms.jpg);}

#h-for-children {background-image: url(images/title_child.jpg);}

#h-two-phase {background-image: url(images/title_phase.jpg);}

#h-for-adults {background-image: url(images/title_adults.jpg);}

#h-treatments {background-image: url(images/title_treatments.jpg);}

#h-dictionary {background-image: url(images/title_dic.jpg);}

#h-surgical {background-image: url(images/title_surg.jpg);}

#h-resources {background-image: url(images/title_resources.jpg);}

#h-life {background-image: url(images/title_life.jpg);}

#h-appliances {background-image: url(images/title_type_app.jpg);}

#h-diagram {background-image: url(images/title_diagram.jpg);}

#h-retainers {background-image: url(images/title_retainers.jpg);}

#h-emergency {background-image: url(images/title_care.jpg);}

#h-game {background-image: url(images/title_game.jpg);}

#h-contact {background-image: url(images/title_contact.jpg);}

#h-invisalign {background-image: url(images/title_invis.jpg);}



/* Set the image for each nav item */

#office {background: url(images/office.jpg)}

#care {background: url(images/care.jpg)}

#game {background: url(images/game.jpg)}

#ortho {background: url(images/orthodontics.jpg)}

#braces {background: url(images/braces.jpg)}

#invisalign {background: url(images/invisalign.jpg)}



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

#nav2 a:hover, #nav2 .active {background-position:-173px 0px;}



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

#nav2 .active {cursor: auto}





#intro {

	text-align: left;

	width: 720px;

	overflow: hidden;

	margin: 0 auto 13px;

	height: 200px;

}

#h-welcome {

	height: 46px;

	width: 149px;

	margin: 0;

	padding: 0;

}

#h-welcome {

	behavior: url(iepngfix.htc);

}

#container{

	border: 4px solid #FFFFFF;

	background-color: #F0E1C2;

	width: 760px;

	margin-top: 20px;

	margin-left: auto;

	margin-right: auto;

	text-align:left;

	padding-bottom: 15px;

}

#content {

	width: 760px;

}

#nav-column {

	width: 208px;

	float: left;

	margin: 0;



}

#nav-column .inner {

	margin: 29px 0 0 18px;

}

#main {

	float: left;

	width: 552px;

	padding-bottom: 15px;

	float: left;

}

#main .inner {

	margin: 30px 18px 30px 24px;

}



#logo {

	height: 81px;

	width: 259px;

}

#logo a {

	display: block;

	margin-top: 2px;

	width: 259px;

	height: 81px;

	background: url(images/logo.jpg) 0 0 no-repeat;

}



#sub  {

	width: 465px; 

	height:81px;

	position: absolute;

	top: 28px;

	left: 50%;

	margin-left: -105px;

}

#welcome-page #container #sub {

	top: 225px; 

}

#header{

	height: 85px;

	width: 760px;

	background-color: #801817;

	border: 4px solid #ffffff;

	border-width: 0 0 4px;

	overflow: hidden;

}

div#sub img					{display: block;}