/* CSS Document */
/* HTML, BODY ---------- */
* {margin:0; padding:0;}
body {margin:0; background: url(images/bg.jpg) no-repeat top center #b9b9b9; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:11px; line-height:20px; color:#0b0301;}
p, h2, h3, ul, blockquote, ol {padding-top:10px; padding-bottom:10px;}
ul, blockquote, ol {padding-left:30px; padding-right:20px;}
a {color:#0b0301;}
a:hover {text-decoration:none;}
a img {border-style:none;}
#footer a {color:#c7c7c7;}
#footer p {padding:0; margin:0; text-align:center;}

/* LAYOUT ---------- */
#wrap {width:780px; background:url(images/tile-body.gif) repeat-y; margin:0 auto; position:relative; }
#body {width:780px; background:url(images/bg-header.jpg) no-repeat; overflow:auto;}
#text {width:524px; padding:0 19px 0 237px; clear:both;}
#addresses {margin:0 0 0 10px; width:770px; text-align:center; font-size:11px; color:#6c6b6b; line-height:12px; height:67px;}
#forms {padding:10px; background-color:#FFF; border:2px solid #8a8a8a;	width:170px; margin: 10px 10px 10px 10px; float:right; color:#0b0301; clear:right;}
#forms h3, #forms a {color:#46111b}
#footer {width:746px; margin: 0 auto; background:url(images/bg-footer.gif) no-repeat; padding:36px 17px 60px 17px; font-size:11px; line-height:16px; color:#c7c7c7; clear:both;}
#banners {margin:-100px 0 0 13px; width:164px; position:relative; padding:0;}

/* HEADERS ---------- */
#body h1 {background-repeat: no-repeat; height: 68px; width:413px; text-indent: -999em; margin: 34px 0 0 0; padding:0;}
#text h2 {color:#46111b; font-size:15px;}
#text h3 {color:#8a8a8a; font-size:13px;}
#footer h2 {color:#FFF; font-size:11px; padding:0; margin: 0; text-align:center;}
h1#logo {
margin: 0 0 62px 0;
padding: 0;
background-repeat: no-repeat; 
width: 780px;/* this width reflects the width of the logo image */
height: 174px; /* this height reflects the height of the heading image */
overflow: hidden; 
text-indent: -999em;} /* hides rich text so only background image shows */

h1#logo a {
display: block; 
height: 174px;/*same height as logo h1*/ 
width: 780px;/*same width as logo h1*/}

/* CLASSES ---------- */
#footer .sesame {color:#46111b; font-weight:bold;}
.img {margin:10px; float:right;}
.right {float:right;}
.left {float:left;}
.top  {color:#e4a732; font-size:11px; font-weight:bold;}
.hide {display:none;}
.flash {width:537px; height:257px; margin:10px 0 0 221px;}
.flashp {color:#000; font-weight:bold; background-image: url(images/1.jpg); text-align:center; padding-bottom:200px;}
.block {display:block;}
.listnone {list-style:none;}
.center {text-align:center;}
.clear {clear:both;}
.city {color:#46111b; font-weight:bold;}
.address {float:left; width:185px; }
.textleft {text-align:left;  }
img.abo {margin-left:13px; margin-top:5px;}
.resources {border:#8a8a8a 2px solid;}

/* NAVIGATION ---------- */


/* NAVIGATION MAIN ---------- */
ul#nav {list-style: none; padding: 0 0 6px 0; margin:0 0 0 19px; width:184px; position:absolute; z-index:90; top:321px; background:url(images/bg-bottom.gif) no-repeat bottom;}

/*  Sets styles for all links that are inside the ul id="nav" */
#nav a {display: block;height: 24px; overflow: hidden; text-indent:-999em; width:184px; margin: 0; padding: 0;}

/* Set the image for each nav item */
#aboutouroffice {background: url(images/nav-about-our-office.gif); }
#yourfirstvisit {background: url(images/nav-your-first-visit.gif); }
#insuranceinfo {background: url(images/nav-insurance-info.gif); }
#paymentplans {background: url(images/nav-payment-plans.gif); }
#aboutorthodontics {background: url(images/nav-about-orthodontics.gif); }
#braces101 {background: url(images/nav-braces-101.gif); }
#treatmentoptions {background: url(images/nav-treatment-options.gif); }
#faq {background: url(images/nav-ask-the-orthodontist.gif); }
#emergencycare {background: url(images/nav-emergency-care.gif); }
#funandgames {background: url(images/nav-fun-and-games.gif); }
#contactus {background: url(images/nav-contact-us.gif); }
#home {background: url(images/nav-home.gif); }

/* Shift the image position up to show the active state */
#nav a:hover, #nav .active, #nav li:hover, #nav li.sfhover, 
#nav li:hover #aboutouroffice, #nav li.sfhover #aboutouroffice, 
#nav li:hover #yourfirstvisit, #nav li.sfhover #yourfirstvisit, 
#nav li:hover #insuranceinfo, #nav li.sfhover #insuranceinfo, 
#nav li:hover #paymentplans, #nav li.sfhover #paymentplans, 
#nav li:hover #treatmentoptions, #nav li.sfhover #treatmentoptions, 
#nav li:hover #faq, #nav li.sfhover #faq, 
#nav li:hover #aboutorthodontics, #nav li.sfhover #aboutorthodontics, 
#nav li:hover #braces101, #nav li.sfhover #braces101, 
#nav li:hover #emergencycare, #nav li.sfhover #emergencycare, 
#nav li:hover #funandgames, #nav li.sfhover #funandgames, 
#nav li:hover #home, #nav li.sfhover #home, 
#nav li:hover #contactus, #nav li.sfhover #contactus {background-position:-184px 0;}

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

/* NAVGIATION DROP-DOWNS */
#nav li {display: inline; z-index:100; margin:0; padding:0;}
#nav li ul { /* second-level lists */list-style:none; margin: -22px 0 0 184px; padding: 0; width: 170px; position: absolute; background: #8a8888; left: -999em; font-size: 11px;}
#nav li ul a {list-style-image:none; padding: 0 0 0 10px; width: 160px; color: #000; text-indent: 10px;	text-decoration: none; line-height: 22px;}
#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: #fff; background: #46111b;	}
	
/* SUB NAVIGATION ---------- */
div#sub {width: 560px; margin-left:203px; padding:8px; background:url(images/bg-sub.gif) no-repeat bottom #d1cfc8; min-height:42px; height:auto !important; height:42px; clear:both;}

* html div#sub {margin-right: 0px;}

/* for IE6*/
div#sub ul {list-style: none; padding:0; margin:0; color:#46111b; }

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

#sub li {display: inline; white-space: nowrap; padding:0; margin:0; }
#sub a {color:#46111b; font-size:11px;}

/* Shift the image position up to show the active state */
#sub a:hover, #sub .active {text-decoration:none;}

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


/* LOGINS NAV ITEMS ---------- */

ul#logins {height: 19px; width:108px; list-style: none; padding:0; margin:0 0 0 551px; position:absolute; z-index:100; top:169px;}

/*  Makes the list items sit next to each other */
#logins li {float: left;}

/*  Sets styles for all links that are inside the ul id="nav" */
#logins a {display: block;height: 19px; overflow: hidden; text-indent:-999em;}

/* Set the image for each nav item */
#patientlogin {background: url(images/nav-patient-login.gif);width:108px;}

/* Shift the image position up to show the active state */
#logins a:hover, #logins .active, #logins li:hover, #logins li.sfhover {background-position:0 -19px;}
/* Set the cursor to default arrow so link does not appear clickable */
#logins .active {cursor: default}

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}