/* HTML, BODY ---------- */
html {height: 100%; margin-bottom: 1px}
body {background: #004727; margin: 0}

#bruno {position:absolute; top:50px; margin-left:570px; z-index:37;}

/* TEXT ---------- */
body, table, input, textarea {color: #353535; font: 12px/20px tahoma, sans-serif}
p {margin: 0 0 10px 0}
td {vertical-align: top}
hr {border: 0; background: #FFF; color: #FFF; height: 1px}
.flash p {background: #FFFF99; font-size: 10px; margin: 10px 10px 0 10px; padding: 5px}

/* HEADERS ---------- */
h1 {background-repeat: no-repeat; color: #508672; font: normal 25px georgia, serif; height: 30px; margin: 0 0 5px 0; overflow: hidden; text-indent: -999em}
h2 {color: #ACB777; font: normal 17px georgia, serif; margin: 0}
h3 {color: #508672; font-size: 13px; font-weight: bold; margin: 0}

/* LISTS ---------- */
ol, ul {margin-bottom: 10px; margin-top: 0}
ul#masthead {left: 470px; list-style: none; margin: 0; overflow: hidden; padding: 0; text-indent: -999em; position: absolute; width: 250px}
ul#masthead li {float: left}
ul#navigation {background: url(images/navigation_bg.gif) no-repeat; float: left; list-style: none; margin: 0; padding: 25px 0 170px 0; width: 180px}

/* LINKS ---------- */
a {color: #679998; text-decoration: underline}
a:hover {color: #2A636C; text-decoration: none}
a#logo {background: transparent; display: block; height: 140px; left: 50px; overflow: hidden; text-indent: -999em; top: 35px; position: absolute; width: 435px}
#footer a {color: #E6F6B5}
a#sesame {color: #9FC4B2; font-size: 10px}

/* NAVIGATION ---------- */
ul#masthead a {display: block; height: 35px; width: 125px}
#patient_login {background: url(images/navigation/patient_login.gif)}
#doctor_login {background: url(images/navigation/doctor_login.gif)}
ul#masthead a:hover {background-position: 0 -35px}

#navigation a {display: block; height: 25px; overflow: hidden; text-indent: -999px; width: 180px; z-index: 50;}
#about_us {background: url(images/navigation/about_us.gif)}
#for_new_patients {background: url(images/navigation/for_new_patients.gif)}
#orthodontics {background: url(images/navigation/orthodontics.gif)}
#braces_101 {background: url(images/navigation/braces_101.gif)}
#invisalign {background: url(images/navigation/invisalign.gif)}
#invisalign_teen {background: url(images/navigation/invisalign-teen.gif)}
#emergency_care {background: url(images/navigation/emergency_care.gif)}
#the_game_room {background: url(images/navigation/the_game_room.gif)}
#contact_us {background: url(images/navigation/contact_us.gif)}
#home {background: url(images/navigation/home.gif)}
#navigation a:hover, #navigation .active, 
#navigation li:hover #about_us, #navigation li.sfhover #about_us, 
#navigation li:hover #orthodontics, #navigation li.sfhover #orthodontics, 
#navigation li:hover #braces_101, #navigation li.sfhover #braces_101, 
#navigation li:hover #contact_us, #navigation li.sfhover #contact_us {background-position: 0 -25px}

#navigation ul {list-style: none; margin: 0; padding: 0}
#navigation li {display: inline}
#navigation li ul {background: #E2F3EB; font-size: 11px; left: -999em; padding: 5px 0; position: absolute; z-index: 1}
#navigation li:hover ul, #navigation li.sfhover ul {left: auto; margin: -25px 0 0 180px}
#navigation ul li a {height: 12px; line-height: 11px; margin: 0; padding: 4px 4px 4px 15px; text-indent: 0; text-decoration: none; width: 140px}
#navigation ul li a:hover {background: url(images/subnav_bg.gif) no-repeat}

/* IMAGES ---------- */
img, table {border: none}
.centered {display: block; margin: 0 auto}
.clear {clear: both}
.left {float: left; margin: 0 10px 10px 0}
.right {float: right; margin: 0 0 10px 10px}

.flash {
	display: inline;
	float: right;
}

.flash img {float: left; margin-right: 10px}

#virtual-tour { text-indent:-999em; width:221px; height:126px; display:block; overflow:hidden; background:url(images/video-bg.jpg); float:right; margin:0 0 10px 10px; border:#000 1px solid}
#virtual-tour:hover {background:url(images/video-bg.jpg) 0 -126px}

.virtual-tour2 { text-indent:-999em; width:550px; height:309px; display:block; overflow:hidden; background:url(images/video-bg-LG.jpg); float:right; margin: -20px 0 20px 0; border: 0;}


.virtual-tour2:hover {background:url(images/video-bg-LG.jpg) 0 -309px}


.yt-comfortable {text-indent:-999em; width:140px; height:80px; display:block; overflow:hidden; background:url(images/comfortable.jpg); border:#000 1px solid; margin-bottom: 10px;}
.yt-comfortable:hover {background:url(images/comfortable.jpg) 0 -80px;}

.yt-affordable {text-indent:-999em; width:140px; height:80px; display:block; overflow:hidden; background:url(images/affordable.jpg); border:#000 1px solid; margin-bottom: 10px;}
.yt-affordable:hover {background:url(images/affordable.jpg) 0 -80px;}

.yt-the-best-part {text-indent:-999em; width:140px; height:80px; display:block; overflow:hidden; background:url(images/the-best-part.jpg); border:#000 1px solid; margin-bottom: 10px;}
.yt-the-best-part:hover {background:url(images/the-best-part.jpg) 0 -80px;}

#sidebar-videos {
	left: 20px; 
	position: absolute; 
	top: 475px; 

}

#home-invisalign {
	left: 40px; 
	position: absolute; 
	top: 835px; 	
}


/* LAYOUT ---------- */
.wrap {width: 100%}
.top {background: #78A393 url(images/body_top_bg.gif) repeat-x}
.bottom {background: url(images/body_bottom_bg.gif) repeat-x}
#container {background: #FFF; margin: 20px auto 0 auto; position: relative; width: 770px;}
#container:after {clear: both; content: "."; display: block; height: 0; visibility: hidden}
#header {background: url(images/header_bg.gif); height: 180px; position: relative}
#content {background: url(images/content_bg.gif) no-repeat 100% 0; float: left; min-height: 380px; padding: 20px 20px 0 20px; width: 550px}
* html #content {height: 380px}
#footer {background: url(images/footer_bg.gif) no-repeat center 0; clear: both; color: #FFF; font-size: 11px; margin: 0 auto; padding: 70px 0 10px 0; text-align: center}

.map {border: #E8F4EE solid 1px; padding: 0px 2px 2px 2px;}

.right-border {
	border: solid 1px #333; /* Customize me!! */
	float: right;
	clear: right;
	margin: 0 0 15px 15px;
	}
img.right {
	float: right;
	margin: 0 0 15px 15px;
	}
.left-border {
	border: solid 1px #000;
	margin: 0 15px 15px 0;
	float: left;
	}
img.left {
	margin: 0 15px 15px 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;
	line-height: 18px;
	font-size: 11px;
	float: right;
	clear: right;
	}
#invisalign-sidebar a {
	color: #036;
	}
#invisalign-sidebar h3 {
	background: #486057;
	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 Fix */
.clear {clear: both;}
.cf:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.cf {display: inline-block;} /*this trips hasLayout for ie7*/
.cf {display: block;} /*this returns it back to normal*/
* html .cf {height: 1px;}

#contest {
	position:absolute;
	top:25px;
	left:285px;
	z-index:1000;
	}