/* HTML, BODY ---------- */
body {margin:0 0 0 0; background:#24310c url(images/tile.jpg) repeat-x; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:11px; line-height:20px; color:#32500c;}
#footer p, h2 {margin:0; padding:0;}
#footer a {color:#97aa75;}
#footer a:hover {text-decoration:none;}
a {color:#855d1f;}
a:hover {text-decoration:none;}

/* LAYOUT ---------- */
#container {width:780px; margin:0 auto; background: url(images/content-tile.jpg) repeat-y; background-position:0 234px; overflow:auto;}
#headerbg {width:780px; background:url(images/banner.jpg) no-repeat; overflow:auto;}
#wrap {width:780px; background:url(images/content-bottom.jpg) bottom center no-repeat; overflow:hidden}
#col2 {width:506px; float:left; margin-left:50px; padding-bottom:20px;}
#footer {width:682px; color:#fde092; text-align:center; padding:8px 94px 10px 30px; line-height:13px; overflow:auto; background:url(images/footer-bg.jpg) no-repeat;}

/* HEADERS ---------- */
h1 {background-repeat: no-repeat; height: 44px; width:501px; text-indent: -999em; margin: 0px 0 0 -5px; padding:0;}
h2 {font-size:14px;}
#footer h2 {color:#FFF; font-size:11px;}

/* CLASSES ---------- */
#footer .sesame {color:#FFF;}
.img {border:#855d1f 1px solid; margin:0 0 10px 10px;}
.border {border:#855d1f 1px solid;}
.right {float:right;}
#col2 .top  {color:#855d1f; font-weight:bold; }
.footernav {color:#97aa75;}

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


/* MAIN NAV ITEMS ---------- */

ul#mainnav {list-style: none; padding: 0 0 200px 0; margin:10px 0 0 0; float:left; width:188px;}
ul#mainnav .subnav {list-style:none; padding:0; margin:10px 0 10px 8px; float:none; width:188px;}

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

#mainnav li .subnav li a {display: block;  overflow: hidden; text-indent:-999em;}

/* Set the image for each nav item */
#aboutouroffice {background: url(images/nav-about-our-office.gif); width: 174px; height: 30px;}
#meettheorthodontist {background: url(images/nav-meet-the-orthodontist.gif); height: 17px; width: 180px;}
#officetour {background: url(images/nav-office-tour.gif); height: 17px; width: 180px;}
#missionstatement {background: url(images/nav-mission-statement.gif); height: 17px; width: 180px;}
#patientforms {background: url(images/nav-patient-forms.gif); height: 17px; width: 180px;}
#aboutorthodontics {background: url(images/nav-about-orthodontics.gif); height: 30px; width: 174px;}
#whybraces {background: url(images/nav-why-braces.gif); height: 17px; width: 180px;}
#forchildren {background: url(images/nav-orthodontics-for-children.gif); height: 17px; width: 180px;}
#foradults {background: url(images/nav-orthodontics-for-adults.gif); height: 17px; width: 180px;}
#orthodontictreatments {background: url(images/nav-orthodontic-treatments.gif); height: 17px; width: 180px;}
#suresmile {background: url(images/nav-suresmile.gif); height: 17px; width: 180px;}
#asktheorthodontist {background: url(images/nav-ask-the-orthodontist.gif); height: 17px; width: 180px;}
#resources {background: url(images/nav-resources.gif); height: 17px; width: 180px;}
#braces101 {background: url(images/nav-braces-101.gif); height: 30px; width: 174px;}
#lifewithbraces {background: url(images/nav-life-with-braces.gif); height: 17px; width: 180px;}
#typesofappliances {background: url(images/nav-types-of-appliances.gif); height: 17px; width: 180px;}
#bracesdiagram {background: url(images/nav-braces-diagram.gif); height: 17px; width: 180px;}
#bracepainter {background: url(images/nav-brace-painter.gif); height: 17px; width: 180px;}
#oralcarevideo {background: url(images/nav-oral-care-video.gif); height: 17px; width: 180px;}
#retainers {background: url(images/nav-retainers.gif); height: 17px; width: 180px;}
#emergencycare {background: url(images/nav-emergency-care.gif); height: 30px; width: 174px;}
#invisalign {background: url(images/nav-invisalign.gif); height: 30px; width: 174px;}
#thegameroom {background: url(images/nav-the-game-room.gif); height: 30px; width: 174px;}
#contactus {background: url(images/nav-contact-us.gif); height: 30px; width: 174px;}
#location {background: url(images/nav-location.gif); height: 17px; width: 180px;}
#commentform {background: url(images/nav-comment-form.gif); height: 17px;}
#home {background: url(images/nav-home.gif); height: 30px; width: 174px;}


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

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

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

#mainnav li .subnav .block {display:block;}

#mainnav li#social a { text-indent:0; background:none; display:inline; margin-top:20px;}
/* LOGO NAVIGATION ---------- */
ul#logo { list-style: none; padding: 0; margin:0; width:600px;}

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

/* Set the image for each nav item */
#logolink {background: url(images/spacer.gif);}

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


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

ul#logins {height: 41px; width:221px; list-style: none; padding:0; margin:0; clear:both;}

/*  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: 41px; overflow: hidden; text-indent:-999em;}

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

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

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;}