/* CSS Document */



/* HTML, BODY ---------- */

body {margin: 0 0 0 0; background:#929754; color:#45391d; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; line-height:16px;}

#footercontent a {color:#FFF;}

#footercontent a:hover {color:#45391d;}

#address p{margin:0;}

#contentsub a, #content a {color:#45391d;}

#contentsub a:hover, #content a:hover {color:#929754;}







/* LAYOUT ---------- */

#banner {width:780px; background: url(images/banner-bg.gif) no-repeat; margin:0; padding:0; overflow:auto;}

#logo {width:216px; float:left; margin:0 0 0 0; padding:0 0 65px 0;}

#navflash {width:564px; float:left; margin:0; padding:0;}

#wrap {width:100%; background: url(images/tile.jpg) repeat-x #FFF; overflow:auto;}

#middlebg {width:780px; background: url(images/middle-bg.jpg) repeat-y; overflow:auto;}

#column1 {width:243px; float:left; margin:0; background:url(images/left-bg.jpg) no-repeat;}

#column2 {width:537px; float:left; overflow:auto;  }

#content {width:507px; margin:54px 21px 20px 9px;}

#contentsub {width:496px; margin:54px 21px 20px 20px; font-size:13px; line-height:height:16px;}

#address {width:167px; color:#FFF; padding:0 58px 30px 18px; margin:103px 0 0 0;}

#footer { background:url(images/footer-bg.jpg) repeat-x; width:100%;}

#footercontent {width:750px; padding:10px 10px 10px 20px; color:#FFF;}



/* HEADERS ---------- */

h1 {background-repeat: no-repeat; height: 36px; width:395px; margin:0; text-indent: -999em; padding:0; margin:120px 0 0 129px;}

#column2 h2 {font-size:13px; margin:0;}

#footercontent h2 {font-size:11px; color:#45391d; margin:0;}

#contentsub h3 {color:#929754; font-size:13px; margin:0;}



/* CLASSES ---------- */

#footercontent .sesame {color:#45391d;}

#footercontent .sesame a:hover {color:#FFF;}

.img {padding:10px;}

.right {float:right;}



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



/* LOGO ---------- */

ul#logonav {height: 143px; width:216px; list-style: none; padding: 0; margin: 0;}



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

#logonav a {display: block;height: 143px; overflow: hidden; text-indent:-999em;}



/* Set the image for each nav item */

#logobutton {background: url(images/logo.jpg);}





/* Set the cursor to default arrow so link does not appear clickable */

#logonav .active {cursor: default}



/* TOP NAV ITEMS ---------- */



ul#topnav {height: 43px; width:442px; list-style: none; padding: 0 0 0 122px; margin: 0;}



/*  Makes the list items sit next to each other */

#topnav li {float: left;}



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

#topnav a {display: block;height: 43px; overflow: hidden; text-indent:-999em;}



/* Set the image for each nav item */

#patientlogin {background: url(images/nav-patient-login.gif);width:209px;}

#contactus {background: url(images/nav-contact-us.gif);width:133px;}

#home {background: url(images/nav-home.gif);width:61px;}





/* Set the cursor to default arrow so link does not appear clickable */

#topnav .active {cursor: default}



/* Shift the image position up to show the active state */

#topnav a:hover, #topnav .active, #topnav li:hover, #topnav li.sfhover,  

#patientlogin, #topnav li.sfhover #patientlogin, 

#topnav li:hover #contactus, #topnav li.sfhover #contactus,

#topnav li:hover #home, #topnav li.sfhover #home, 

#topnav .active {background-position: 0 -43px;}



/* pop-up code */

#topnav, #topnav ul {list-style: none; margin: 0; padding: 0}

#topnav li ul li {float:none; text-align:left;}

#topnav li ul {background: #929754; left: -9999px; position: absolute}

#topnav li:hover ul, #topnav li.sfhover ul {left: auto; margin-top: 0px 0px 0 -120px; color:#FFF;}

#topnav ul li a {color: #FFF; height: 20px; padding-left: 10px; width: 153px; text-indent:0; font-size:12px; text-decoration:none;}

#topnav ul li a:hover { background-color:#54482b;}



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

ul#nav {list-style: none;padding: 0; margin: 93px 0 0 0; width:243px;}



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

#nav a {display: block; overflow: hidden; text-indent:-999em; height:29px;}



/* Set the image for each nav item */

#aboutouroffice {background: url(images/nav-about-our-office.gif); }

#asktheorthodontist {background: url(images/nav-ask-the-orthodontist.gif); }

#aboutorthodontics {background: url(images/nav-about-orthodontics.gif); }

#braces101 {background: url(images/nav-braces-101.gif); }

#thegameroom {background: url(images/nav-the-game-room.gif); }

#letsgetstarted {background: url(images/nav-lets-get-started.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 #asktheorthodontist, #nav li.sfhover #asktheorthodontist, 

#nav li:hover #aboutorthodontics, #nav li.sfhover #aboutorthodontics, 

#nav li:hover #letsgetstarted, #nav li.sfhover #letsgetstarted, 

#nav li:hover #braces101, #nav li.sfhover #braces101, 

#nav li:hover #thegameroom, #nav li.sfhover #thegameroom {background-position:-243px 0;}



/* Set the cursor to default arrow so link does not appear clickable */

#nav .active {cursor: default}



/* pop-up code */

#nav, #nav ul {list-style: none; margin: 0; }

#nav li {display: inline; }

#nav li ul {background: #929754; left: -999em; padding: 0; position: absolute; z-index: 1; }

#nav li:hover ul, #nav li.sfhover ul {left: auto; margin: -27px 0 0 180px; color:#FFF;}

#nav ul li a {height:20px; padding: 5px 10px 5px 10px;  text-decoration: none; width: 193px; text-indent:0; color:#FFF; font-size:12px; font-weight:bold;}

#nav ul li a:hover { background-color:#54482b; }