/* HTML, BODY ---------- */
html {height: 100%;}
body {background: #c5c6cb url(../images/bg.jpg) no-repeat 50% 0;}
* {margin:0; padding:0;}

/* TEXT ---------- */
body {color: #000; font: 12px/18px Arial, sans-serif; text-align:left;}
p {padding: 0px 0 15px 0; }

/* HEADERS ---------- */
h1{padding:10px 0 5px 0px; background-repeat: no-repeat; height: 41px; overflow: hidden; text-indent: -999em;}
h2{color: #0072bc; margin: 0 0 20px 0; font: bold italic 16px/18px Arial, Helvetica, sans-serif;}
h3{color: #0072bc; font: bold 14px/18px Arial, Helvetica, sans-serif; margin: 0;}

/* LISTS ---------- */
ol, ul {padding:0 0 10px 20px;}

/* LINKS ---------- */
a {color: #0072bc; text-decoration: none}
a:hover {color: #0072bc; text-decoration: underline; font-weight:normal;}
#logo a {position:absolute; top:14px; left:22px; width: 243px; height: 204px; display: block; background: url(../images/logo.gif) no-repeat; }
#footer p a {color: #000; font-size: 12px; font-style:normal; font-weight:normal;}
.sesame a {color:#0072bc;}

/* nav ---------- */
#nav{position:absolute; top:229px; left:13px; padding:31px 0 0 0; width:215px; height:400px; display:block; z-index: 99;}
#nav a {display: block; height: 30px; overflow: hidden; text-indent: -999px; width: 215px;}
#nav ul{padding:0;}
#our-office {background: url(../images/our-office.gif) 0 0; width:215px;}
#about-orthodontics {background: url(../images/about-orthodontics.gif) 0 0; width:215px;}
#braces-101 {background: url(../images/braces-101.gif) 0 0; width:215px;}
#treatment-options {background: url(../images/treatment-options.gif) 0 0; width:215px;}
#emergency-care {background: url(../images/emergency-care.gif) 0 0; width:215px;}
#the-game-room {background: url(../images/the-game-room.gif) 0 0; width:215px;}
#contact-us {background: url(../images/contact-us.gif) 0 0; width:215px;}
#home {background: url(../images/home.gif) 0 0; width:215px;}
#nav ul li:hover a, #nav a:hover, #nav .active {background-position: -215px 0}
#nav li.active a, #nav-with-sub li.active a {background-position: -215px 0;}

/* DROP-DOWN-NAVIGATION ----------------*/
#nav li {display: inline; z-index:100; margin:0; padding:0; }
#nav li ul {margin: 0 0 0 80px; width: 160px; position: absolute; background: #0072bb; left: -999em;font: bold italic 12px/24px Arial, Helvetica, sans-serif;	height: auto; border-right:2px solid #fff;border-bottom:2px solid #fff;border-left:2px solid #fff;}
#nav li ul a {list-style-image:none; padding: 0 0 0 10px; width: 150px; color: #fff; text-indent: 0px; 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: #0072bb; background: #ffcc00; font-weight:bold;}

/* SUBNAV ----------------*/
#subnav {float:left; height: 52px; margin-bottom: 60px;}
/*IE7 hack-------*/
*+html #subnav {margin-bottom: 20px;}
/*IE6 hack-------*/
*html #subnav {margin-bottom: -20px;}
#subnav p{color: #0072bc;}
#subnav p a {text-decoration: underline;}

/* LAYOUT ---------- */
hr{margin-bottom: 15px;}
.clear{clear:both;}
#main {position: absolute; width: 810px; top: 0; left: 50%; margin: 0 0 0 -419px;}
#header {height: 229px; width: 814px; display:block; background: url(../images/subheader-bg.jpg) no-repeat 0 0; margin: 0 0 0 4px;}
#patient-login a{position:absolute; top:113px; left:490px; width: 110px; height: 40px; display: block; background: url(../images/patient-login.gif) no-repeat; }
#doctor-login a{position:absolute; top:113px; left:607px; width: 110px; height: 43px; display: block; background: url(../images/doctor-login.gif) no-repeat; }
#address{font-size: 14px;padding: 10px 0 0 33px; line-height:18px; color:#fff; }
#damon-system-banner a{position: absolute; top: 643px; left:24px; width: 192px; height: 42px; background: url(../images/logos/damon-system-1.gif) no-repeat 0 0; display:block;}
#patient-forms {position: absolute; top: 770px; left:20px; width: 176px; position: block; background: #fff; border: 2px solid #ffcc01; color: #0072bc; padding: 10px;}
#mid{background: url(../images/main-bg.png) repeat-y 50% 0; width: 810px; margin: 0; padding: 0;}
#text{background: url(../images/subtext-bg.jpg) no-repeat 0 0; margin: 0; width:530px; padding: 42px 30px 0 250px; min-height: 482px; _height: 482px; }
#flash{	position: absolute; top: 163px; left: 226px; background: url(../images/frame.jpg) no-repeat 0 0; border:none; z-index:1;}
#footer {background: #c5c6cb url(../images/footer-bg.gif) no-repeat 50% 0; margin: 0; padding: 20px 0 30px 0; text-align: center; width:810px; }
#footer p{color:#000; line-height:18px;}

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

/* RESOURCES ---------- */
dl.logos, dl.logos dt, dl.logos dd {list-style:none;margin:0;padding:0;}
dl.logos {padding:10px;}
dl.logos dd {border-bottom:1px solid #CCC;margin:0;padding:10px 0 5px 0;width:50%;}
dl.logos span {font-size: 16px; font-weight:bold;}

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

/*right and left floating image with border*/
.right {float:right; border: 3px solid #ffcc01; margin: 0 0 10px 10px;}
.left {float:left; border: 3px solid #ffcc01; margin: 0 10px 10px 0px;}
.place-image { float:right; border: 3px solid #ffcc01; margin: 0 0 10px 10px; padding:0; width: 181px; height: 275px;}
/* THE GAME ROOM ---------- */
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}

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

ul#sesame-games a.button {
float:right;
height:85px;
width:200px}

ul#sesame-games p {
padding-bottom: 1em}
	
/* MEDIA CENTER ---------- */
h2.media-center {background:#ffcc01; color:#0072bc; margin:0; padding:5px; width: 510px;}
div.media-center {background:#0072bc; color:#FFF; display:inline-block; margin-bottom:10px; overflow:auto; padding:10px; width:500px;}
div.media-center a {color:#FFF;}
div.media-center img {border:1px solid #FFF;}