/* CSS Document */
* {margin: 0; padding: 0;}
body {	font-family: verdana, sans-serif;
 margin:0; background: #add1ef url(images/body_bg.gif) repeat-x; color: #2868a5;}
/*

|		  Typography					|

|Everything set to 18px baseline		|

|grid. use increments of 18px for 		|

|images, logos etc to maintain this grid|

*/

a {
	text-decoration: underline;
	color: #003366;
}

a:visited {
	text-decoration: underline;
}
a:active {
	text-decoration: underline;
}
a:hover {
	text-decoration: underline;
}

h1 {
	font-size: 24px;
	height: 36px;
	font-weight: normal;
	margin: 18px 0 0;
}
h1#logo {
	margin: 0;
	width: 780px;
	height: 102px;
	background: url(images/logo-banner.gif) 0 0 no-repeat;
	}
h1#logo a {width: 480px; height: 102px; display: block;}
h2, dt {
	font-size: 12px;
	font-weight: 600;
	line-height: 18px;
	margin: 9px 0 9px;
	color: #61152a;
}

h3 {
	font-size: 16px;
	color: #6b7f80;
	line-height: 18px;
	margin-bottom: 18px;
	font-weight: normal;
}
h4 {
	font-size: 16px;
	line-height: 20px;
	margin-bottom: 18px;
	font-weight: bold;
}
h5 {
	font-size: 12px;
	line-height: 18px;
	font-weight: bold;
	margin-bottom: 10px;
}
h6 {
	font-size: 10px;
	line-height: 18px;
	margin-bottom: 18px;
	font-weight: bold;
}
img {
	border: 0;
	display: block;
}
ol, ul, dl {/*no bullets as a rule*/
	list-style: none;
	margin: 9px 0;
	font-size: 11px;

}
ul.bullet {/*used to display bullets on specific ul's just add class="bullet" to the ul*/
	list-style: square outside;
	margin-left: 18px;

}
ul.bullet ul {/*for nested ul's with bullets*/
	list-style: square outside;
	margin-left: 0;
}

dt, th {
}
li, dd {
	font-size: 11px;
	line-height: 18px;
}
blockquote {
	margin-left: 18px;
	margin-top: 19px;
	margin-bottom: 10px
}
blockquote.testimonial {width: 430px; background: url(images/blockquote.gif) 0 100% no-repeat; margin: 19px 18px; padding: 9px 0;}
blockquote.testimonial p {padding-left: 15px; padding-right: 15px;}
p {

	margin: 0 0 18px;
}
p.top, .skip {font-weight: bold;}
li > p {
	margin-top: 3px;
}

pre {/*moz 1.0/1.1/1.2.1, net 7.0/7.01 make this way too small, but i'm not going to go larger because monospace tends to run you into overflow pretty quick. prior moz and net are okay.*/
	font-family: monospace;
	font-size: 11px;
}
strong, b {
	font-weight: bold;
}
em { font-style:italic;}
sup, sub {
	font-size: 75%;
}

/* 
| Shortcuts	|
*/

/* clear floats */

.clear:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
.clear {
	display: inline;
	display: block;
}
html[xmlns] .clear {
	display: block;
}
* html .clear {/* For IE =< 6 */
	height: 1%;
}

/* Image Replacement -- add class="replace" to root element, i.e. <p> and add a bg image*/
.replace {
	line-height: 0;
	overflow:hidden;
	line-height: 0;
	font-size: 0;
	text-indent: -999em;
}
/* Just for Opera, but hide from MacIE */

/*\*/html>body .replace {
	letter-spacing : normal;
	text-indent : -999em;
	overflow : hidden;
}
/* End of hack */


/* 
|	Flash 	|
*/
p.upgrade-flash {background: #73b164; color: #ffffff; font-size: 12px;}
.flash {overflow: hidden;}/* Basic styles for all flash modules */
/* End Flash */

/* 
|	Layout	|
*/

img {
	display: block;
	border: 0;
}
.float-left {/* Left Floated Images */
	float: left;
	display: block;
	clear: left;
	margin: 18px 0px 18px 0;
}
.float-right {/* Right Floated Images */
	float: right;
	display: block;
	margin: 9px 0px 18px 18px;
	border: 5px #61152a solid;
	clear: right;

}

/* Header */

#header {
	margin: 0;
	width: 780px;
	height: 140px;
	margin: 0 auto 26px;
	z-index: 0;
	}
	

.slogan {
	border:none;
}


#white-banner{
	height: 75px;
	width: 100%;
}


#container {
	width:780px; 
	padding: 0;
	margin: auto;
}

/* Left Column */

#left-column{
	width: 180px;
	position: absolute;
	left: 50%;
	margin-left: -390px;
}

.welcome {
	margin-top: 60px;
	
}
.orthodontist {
	color: #650a34;
	font-family: Verdana;
	font-size: 11px;
	line-height: 13px;
}
#contact-info{
	font-size: 11px;
	background-image:url(images/bg-contact-info.jpg); 
	background-repeat:no-repeat;
	height: 155px;
	width: 215px;
	margin-top: 50px;
	padding-top: 9px;
}

#contact-info p {
	margin: 8px 0 12px 12px;

}

.address {
	color: #324e78;
	font-family: Verdana;
	font-size: 11px;
	line-height: 13px;
}

/* Main Content */

#right-column {
	margin-left: 200px;
}


#maincontent {
	float: left;
	width: 526px;
	min-height: 500px;
	height:auto !important;
	_height:500px;
	padding: 10px;
	display: inline;
	margin: 0px 15px 15px 15px;

}

#maincontent h3 {
	font-weight:bold;
	color: #324e78 ;
	font-size: 11px;
	margin-bottom: 3px;
}

#maincontent h4 {
	font-weight:bold;
	color: #fafbfc;
	font-style:italic;
}

#maincontent p, #maincontent label, #maincontent td {
	font-size: 11px;
	color: #2868a5;
	line-height: 19px;
	margin-left: 0px;	
}


#maincontent a{
	color: #324e78;
	font-weight: bold;
}

#sidebar {
	width: 200px;
	display: block;
	float: right;
	clear: right;
	color: #fff;
	margin: 18px 0 18px 18px;
	border: 5px #61152a solid;
}

#sidebar h2{
	font-size: 12px;
	margin: 5px;
	color: #61152a;
}

#sidebar p{
	margin: 5px;
}

#flash-home {
	width: 495px;
	height: 215px;
	background: url(images/flash-bg.jpg) 0 0 no-repeat;
	margin-bottom: 20px;
	overflow: hidden;
	
}


/* Footer */

#footer{
	clear: both;
	font-family: Verdana;
	font-size: 11px;
	height: 200px;
	margin: auto;
	background: url(images/footer_bg.gif) repeat-x;
}

#footer-wrap {
	width: 850px;
	margin: 0 auto;
	padding: 60px 0 0;
}

#footer-left{
	float: left;
	height: 115px;
}

#footer-left img {
	margin-top: 5px;
}

#footer-right {
	float: left;
	margin-left: 45px;
}

#footer-right p{
	font-size: 11px;
	font-weight: bold;
	width: 500px;
	color: #1b3d6f;
	text-align: left;
	padding-top: 10px;
	line-height: 15px;
	}
	

#links {
	margin: -10px 0 0 0px;
	padding: 0;
	width: 100%;
	
}

#links a{
	color: #bfdaf2;	
	font-weight: normal;
	line-height: 12px;
	margin-top: 0px;
	padding-top: 0px;
}

#sesame {
	position: relative;
	margin-top: 5px;
}

#sesame p {
	color: #fff;
	font-weight: bold;

}
#sesame a{
	text-align: left;
	height: 25px;
	font-family: Verdana;
	font-size: 11px;
	color: #fff;
}


#nav-background {
	height: 38px;
	background-image: url(images/nav/bg-nav.gif);
	background-repeat:repeat-x;
	position: absolute;
	top: 104px;
	z-index: 2;
	width: 100%;
}


/* HORIZONTAL NAVIGATION */
#top-nav {
	position: absolute;
	top: 30px;
	left: 50%;
	margin-left: 156px;
	width: 191px;
	height: 28px;
}
#top-nav ul {
	width: 191px;
	margin: 0;
}
#top-nav li {
float: left;
}
#top-nav li a {
	height: 28px;
	display: block;
	overflow: hidden;
	text-indent: -999em;
}

#nav, #nav ul { /* all lists */
	width: 850px;
	height: 38px;
	z-index: 6;
	position: absolute;
	padding: 0;
	margin: 0;
	list-style: none;
}


#nav ul {
	width: 850px;
	margin-top: 1px;

}

#nav li {float: left;}

/*  Sets styles for all links that are inside the ul id="nav" */
#nav a {
	display: block;
	height: 38px; 
	overflow: hidden; 
	text-indent: -999em;  /*Indents the rich-text so it does not show */
}

/* HORIZONTAL NAVIGATION IMAGES */
* #our-office, * #your-first-visit, * #about-orthodontics, * #braces-101, * #contests-events, * #fun-games {float: left; height: 38px}

#our-office{background:url(images/nav/our-office.gif);  width: 99px;}
#your-first-visit{background:url(images/nav/your-first-visit.gif); width: 133px;}
#about-orthodontics{background:url(images/nav/about-orthodontics.gif);  width: 170px;}
#braces-101{background:url(images/nav/braces-101.gif);  width: 96px;}
#contests-events{background:url(images/nav/contests-events.gif);  width: 157px;}
#fun-games{background:url(images/nav/fun-games.gif);width: 125px;}


#top-contact {width: 115px; background: url(images/top-nav-bg.gif) 0 0 no-repeat;}
#top-contact:hover, #top-contact.active {background-position: 0 -30px;}
#top-home {width: 76px; background: url(images/top-nav-bg.gif) -115px 0 no-repeat;}
#top-home:hover, #top-home.active {background-position: -115px -30px; }

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

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

/* ----- END HORIZONTAL NAVIGATION ----- */


/* PAGE TITLE / WELCOME / HEADER TEXT */
#pagetitle {
	margin:0;
	width: 472px;
	height: 70px;
	position:relative;

}

#pagetitle h1{
	background-repeat: no-repeat; 
	height: 69px; /* this height reflects the height of the heading image */
	overflow: hidden; 
	text-indent: -999em; /* hides rich text so only background image shows */
}

	
	
/* TEXT SUBNAV */	

#subnav {
	width: 215px;
	font-family: Verdana;
	margin-top: 50px;
	margin-left: 3px;
	background-image: url(images/subnav-bg.jpg);
	background-repeat: no-repeat;
	height: 202px;

}

#subnav h4 {
	font-size: 16px;
	text-transform: capitalize;
	color: #61152a;
	text-decoration:underline;
	margin: 3px 0 3px 8px;
	font-family:"Times New Roman", Times, serif;

}

#subnav a {
	text-decoration: underline;
	color: #324e78;
	font-size: 10px;
}

#subnav a:hover {
	text-decoration: none;
	font-size: 10px;
}

#subnav .active {
	text-decoration: none;
	font-size: 10px;
}

#subnav ul{
	margin: 0px;
	padding: 0px;
}

#subnav li{
	margin-left: 8px;
}

/* Braces Diagram */
#braces-diagram {background: url(images/braces-diagram/braces-diagram-bg.gif); height: 374px; position: relative; width: 425px}
#braces-diagram a {cursor: help; display: block; position: absolute}
#braces-diagram a:hover {background: transparent}
a#elastic-tie {height: 20px; left: 90px; top: 100px; width: 65px}
a#loop-archwire {height: 20px; left: 150px; top: 80px; width: 100px}
a#archwire {height: 20px; left: 190px; top: 100px; width: 65px}
a#bracket {height: 20px; left: 230px; top: 120px; width: 60px}
a#headgear-tube {height: 20px; left: 335px; top: 100px; width: 90px}
a#coil-spring {height: 20px; left: 150px; top: 300px; width: 65px}
a#tie-wire {height: 20px; left: 235px; top: 325px; width: 65px}
a#band {height: 20px; left: 270px; top: 300px; width: 40px}
a#hook {height: 20px; left: 315px; top: 280px; width: 35px}
a#elastic {height: 40px; left: 355px; top: 280px; width: 45px}
a#print {cursor: pointer; height: 23px; left: 365px; top: 351px; width: 60px}
#braces-diagram a img {border: none; display: block; height: 0; position: absolute; width: 0}
#braces-diagram a:hover img {height: 74px; width: 425px}
a#elastic-tie:hover img {left: -90px; top: -100px}
a#loop-archwire:hover img {left: -150px; top: -80px}
a#archwire:hover img {left: -190px; top: -100px}
a#bracket:hover img {left: -230px; top: -120px}
a#headgear-tube:hover img {left: -335px; top: -100px}
a#coil-spring:hover img {left: -150px; top: -300px}
a#tie-wire:hover img {left: -235px; top: -325px}
a#band:hover img {left: -270px; top: -300px}
a#hook:hover img {left: -315px; top: -280px}
a#elastic:hover img {left: -355px; top: -280px}


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

/* Sesame Games*/
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: inline-block}

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

ul#sesame-games p {
padding-bottom: 1em}