/* HTML, BODY ---------- */
html {height: 100%;}
body {background: #a38d60 url(../images/tile.jpg) repeat-x 0 0;	margin: 0;}
* {margin:0; padding:0;}

/* TEXT ---------- */
body {color: #550c1a; font: 13px/24px Verdana, Helvetica, sans-serif; text-align:left;}
p {padding: 0px 0 20px 0px;}

/* HEADERS ---------- */
h1{display: block; width: 450px; height: 39px; overflow: hidden; text-indent: -999em; 	background-repeat: no-repeat;}
h2{padding: 10px 0 15px 0; font-size: 18px;}
h3{color: #645029; padding: 0 0 5px 0; font-size: 16px;}
h4{font-size: 14px; font-weight:bold; padding: 0;}

/* LISTS ---------- */
ol, ul {padding:0 0 10px 20px;}
.the-game-room ul{padding-left: 0;}
/* LINKS ---------- */
a {color: #645029; text-decoration: underline;}
a:visited{color: #645029; text-decoration: underline;}
a:hover {color: #645029; text-decoration: none; }
#logo {position:absolute; top:0; left:50%;margin-left: -270px;width: 669px; height: 90px;	display: block; background: url(../images/logo.jpg) no-repeat; }
#logo a {display: block; width: 652px; height: 79px;}
#office-address a{text-decoration: none;}
#office-address a:visited{text-decoration: none;}
#office-address a:hover{text-decoration: underline;}

/* nav ---------- */
#nav{position:absolute; top:389px; left: 50%; margin-left: -361px; padding:0; width:200px; display:block; z-index: 100;}
#nav a {display: block; height: 30px; overflow: hidden; text-indent: -999px; width: 200px;}
#nav ul{padding:0;}
#patient-login {background: url(../images/nav/login.jpg) 0 0; height: 40px; padding-bottom: 10px;}
#about-our-office {background: url(../images/nav/office.jpg) 0 0;}
#for-new-patients {background: url(../images/nav/patients.jpg) 0 0; }
#faqs {background: url(../images/nav/faqs.jpg) 0 0; }
#about-orthodontics {background: url(../images/nav/ortho.jpg) 0 0; }
#braces-101 {background: url(../images/nav/braces.jpg) 0 0; }
#treatment-options {background: url(../images/nav/treatment.jpg) 0 0; }
#emergency-care {background: url(../images/nav/emergency.jpg) 0 0; }
#fun-zone {background: url(../images/nav/fun.jpg) 0 0; }
#contact-us {background: url(../images/nav/contact.jpg) 0 0; }
#home {background: url(../images/nav/home.jpg) 0 0; height: 33px;}
#nav ul li:hover a, #nav li.sfhover a,#nav a:hover, #nav .active {background-position: -200px 0;}
#nav li.active a {background-position: -200px 0;}

/* DROP-DOWN-NAVIGATION ----------------*/
#nav li {display: inline; z-index:100; margin:0; padding:0;}
#nav li ul { /* second-level lists */margin: -30px 0 0 200px; padding: 5px 0 ; width: 180px; position: absolute; background: #c2b59b; left: -999em; line-height: 24px; font-size: 12px; height: auto; border: 1px solid #550c1a;}
#nav li ul a {list-style-image:none; padding: 0 0 0 10px; width: 170px; color: #645029;	text-indent: 0; text-decoration: none; height: auto;}
#nav li:hover ul, #nav li.sfhover ul {left: auto;display:block;z-index:100;}
#nav li:hover ul a:hover, #nav li.sfhover ul a:hover {color: #faf2e1; font-weight:bold;	background: #550c1a;}

/* SUBNAV ----------------*/
.sub_nav{font-size: 12px; line-height: 18px; padding: 8px 0 10px 0;}
.sub_nav a{color: #645029; text-decoration: underline;}
.sub_nav a:visited {text-decoration: underline;}
.sub_nav a:hover, .sub_nav a.active {font-weight:normal; text-decoration:none;}

/* TEXT_NAV - FOOTER NAV ----------------*/
.text_nav {text-transform:uppercase; font-size: 10px;}
.text_nav a {text-decoration: none; color:#c2b59b; }
.text_nav a:visited{text-decoration: none; color:#c2b59b;}
.text_nav a:hover{text-decoration: underline;color:#c2b59b;}	

/* LAYOUT ---------- */
.clear{clear:both;}
.hide {display:none;}
.flash-replaced .alt {display: block;width: 0px; height: 0px; position: absolute;	overflow: hidden;}
div.hr { background: #550c1a; clear: both; height: 1px; margin: 20px 0; width: 100%; }
div.hr hr { display: none; }
#tile{width: 1400px; background: url(../images/text-tile.jpg) repeat-y 0 0; position: absolute; top: 0; left: 50%; margin-left: -700px;}
#main {position: relative; background: url(../images/header-bg.jpg) no-repeat; width: 1400px; margin: 0 auto; min-height:731px; _height: 731px;}
#office-address{font-size: 13px; position:absolute; top:81px; left: 50%; margin-left:-52px; color:#645029; z-index: 25; text-align:right;}
#text{width:477px;padding: 386px 0 0 587px; min-height:350px; _height: 350px;}
#flash-home{position:absolute; top:105px; left:50%; margin: 0 0 0 -420px; border:none; z-index:1;}
.spotlight{position:absolute; top:105px; left:50%; margin: 0 0 0 -420px; border:none; z-index:1;}
#footer {background: #a38d60 url(../images/footer-bg.jpg) no-repeat top center; color: #c2b59b; font-size: 12px; line-height:18px; margin: 0 auto; padding: 40px 430px 0 514px; text-align: center; width:456px; height:251px;}

/* Shortcuts ----------*/
/* Image Replacement -- add class="replace" to root element, i.e. <p> and add a bg image*/
.replace {letter-spacing : -1000em;line-height: 0;overflow: hidden;line-height: 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 */

/* IMAGES ---------- */
img {border:none;}

/*right and left floating image with border*/
.right {float:right; border: 1px solid #550c1a; margin-left:10px; margin-bottom:10px;}
.left {float:left; border: 1px solid #550c1a; margin-right:10px; margin-bottom:10px;}
img.center {display:block; margin:0 auto 10px auto;}
iframe {border: 1px solid #550c1a; margin-bottom:20px;}

/* THE GAME ROOM ---------- */
div#sesame-game {line-height: 0; margin: 10px 0px 18px 0px; text-align: center;  width: 400px;background: #000;}
ul#sesame-games {list-style: none;}
ul#sesame-games li {clear: both; text-indent:none;}
ul#sesame-games img {border: 0; float:right;}
ul#sesame-games a.button {float:right; height:85px; width:200px; margin-right:10px; padding: 0 0 10px 10px;}/*THIS IS WHERE YOU MAKE PADDING ADJUSTMENTS TO THE GAMES IMG*/
ul#sesame-games p {	padding:0 10px 10px 0;}
	
/* MEDIA CENTER ---------- */
h2.media-center {background:#000033; color:#FFF; margin:0; padding:5px;}
div.media-center {background:#336699; color:#FFF; margin-bottom:10px; padding:10px;}
div.media-center a {color:#FFF;}
div.media-center img {border:1px solid #FFF;}
.flash {border: solid 1px #ccc;}
#flash-in-ovation {width: 320px;height: 266px;}
#flash-ibraces-1 {width: 320px; height: 266px;}
#flash-ibraces-2, #flash-ibraces-3 {width: 352px; height: 266px;}

/* THE DAMON SYSTEM ---------- */
#damon-bracket {
display:block;
margin:0 auto 10px auto;}
#damon-wrap {
width:400px;
margin:0 auto;}
#damon-left {
float:left;
width:175px;
margin-right:20px;}
#damon-right {
float:left;
width:170px;}
#flash-damon-system-comparison {
margin:0 auto;
width:250px;}
#video-the-damon-system {
margin: 0 15px 15px 0;
width: 240px;
height: 206px;
float: left;
clear: left;}
#video-the-damon-system-2 {
margin: 0 15px 15px 0;
width: 400px;
height: 330px;
float: left;
clear: left;}