/* CSS Document */

/* HTML, BODY ---------- */
body {background:url(images/tile.gif) repeat-x #ad653e; color:#55512a; font-family:Tahoma, Arial, sans-serif; font-size:11px; line-height:20px; margin:0 0 0 0;}
#footer a {color:#d59775;}
#footer a:hover {text-decoration:none;}
#col3 p {margin:0; padding:0; color:#aba675;}
#column2 a {color:#ad653e;}
#column2 a:hover {text-decoration:none;}

/* LAYOUT ---------- */
#wrap {background:url(images/body-bg.jpg) repeat-y; width: 792px; margin:0 auto; overflow:auto;}
#body {background:url(images/banner-bg.jpg) no-repeat; width:792px; margin:0; padding:0 0 20px 0; overflow:auto;}
#column1 {width:206px; float:left; padding:20px 0 0 17px;}
#column2 {width:473px; float:left; padding:48px 20px 0 36px;}
#footer {background:url(images/footer-bg.jpg) no-repeat; width:792px; margin:0 auto; padding:30px 0 20px 0; overflow:auto; font-size:11px; color:#d59775; line-height:12px;}
#col3 {width:380px; float:left; padding:0 0 0 40px; }
#col4 {width:352px; float:left; text-align:right; padding:0 20px 0 0;}

/* HEADERS ---------- */
h1 {background-repeat: no-repeat; height: 84px; width:250px; margin:0; text-indent: -999em; padding:0 0 5px 0;}
#column2 h2 {font-size:12px; margin:0 0 5px 0;}
#footer h2 {color:#d7d4b6; font-size:11px; margin:0; padding:0;}
#col3 h2 {font-size:11px; margin:0; padding:0; color:d7d4b6;}
#col4 h2 {font-size:11px; color:#d7d4b6; margin:0; padding:0;}

/* CLASSES ---------- */
#footer .sesame {color:#d7d4b6; font-weight:bold;}
.right {float:right;}
.img {margin:0px 0 10px 10px; border:1px solid #ad653e; }

/* NAVIGATION ---------- */

/* NAVIGATION MAIN ---------- */
ul#nav {list-style: none;padding: 0; margin: 0 0 0 0; width:206px;}

/*  Sets styles for all links that are inside the ul id="nav" */
#nav a {display: block; overflow: hidden; text-indent:-999em; height:33px;}

/* Set the image for each nav item */
#aboutouroffice {background: url(images/nav-about-our-office.gif); }
#aboutorthodontics {background: url(images/nav-about-orthodontics.gif); }
#braces101 {background: url(images/nav-braces-101.gif); }
#emergencycare {background: url(images/nav-emergency-care.gif); }
#thegameroom {background: url(images/nav-the-game-room.gif); }
#invisalign {background: url(images/nav-invisalign.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 #aboutorthodontics, #nav li.sfhover #aboutorthodontics, 
#nav li:hover #braces101, #nav li.sfhover #braces101, 
#nav li:hover #contactus, #nav li.sfhover #contactus, 
#nav li:hover #invisalign, #nav li.sfhover #invisalign, 
#nav li:hover #thegameroom, #nav li.sfhover #thegameroom, 
#nav li:hover #emergencycare, #nav li.sfhover #emergencycare,
#nav li:hover #home, #nav li.sfhover #home {background-position:206px 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: #ad653e; left: -999em; padding: 0; position: absolute; z-index: 1; border:1px solid #55512a;}
#nav li:hover ul, #nav li.sfhover ul {left: auto; margin: -25px 0 0 205px; color:#d7d4b6;}
#nav ul li a {height:20px; padding-left: 10px;  text-decoration: none; width: 173px; text-indent:0; color:#d7d4b6; font-size:12px; }
#nav ul li a:hover {background-color:#55512a;}



/* NAVIGATION PTLOGIN ---------- */
ul#ptnav {list-style: none;padding: 0; margin: 20px 0 0 0; width:204px;}

/*  Sets styles for all links that are inside the ul id="nav" */
#ptnav a {display: block; overflow: hidden; text-indent:-999em; height:72px;}

/* Set the image for each nav item */
#patientlogin {background: url(images/nav-patient-login.gif); }

/* Shift the image position up to show the active state */
#ptnav a:hover, #ptnav .active, #ptnav li:hover, #ptnav li.sfhover, 
#ptnav li:hover #patientlogin, #ptnav li.sfhover #patientlogin {background-position:204px 0;}

/* Set the cursor to default arrow so link does not appear clickable */
#ptnav .active {cursor: default}


/* LOGOS NAVIGATION ---------- */
ul#logos {list-style: none;padding: 40px 0 30px 0; margin: 0 auto; width:505px;}

/*  Makes the list items sit next to each other */
#logos li {float: left;}

/*  Sets styles for all links that are inside the ul id="nav" */
#logos a {display: block; overflow: hidden; text-indent:-999em; height:79px;}

/* Set the image for each nav item */
#aao {background: url(images/logo-aao.gif); width:136px}
#abo {background: url(images/logo-abo.gif); width:141px}
#invisalignlogo {background: url(images/logo-invisalign.gif); width:144px}
#orthocad {background: url(images/logo-orthocad.gif); width:84px}

/* Set the cursor to default arrow so link does not appear clickable */
#logos .active {cursor: default}

/* BANNER LINK ---------- */
ul#banner {list-style: none;padding: 0; margin: 0; width:792px;}

/*  Sets styles for all links that are inside the ul id="nav" */
#banner a {display: block; overflow: hidden; text-indent:-999em; height:214px;}

/* Set the image for each nav item */
#bannerlink {background: url(images/banner.jpg);}

/* Set the cursor to default arrow so link does not appear clickable */
#banner .active {cursor: default}

