/* CSS Document */

/* HTML, BODY ---------- */
body {margin:0 0 0 0; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:11px; line-height:16px; color:#FFF;}
a {color:#FFF; }
a:hover {text-decoration:none;}
a#content {text-decoration:underline;}
#footer a {text-decoration:none;}
#footer a:hover {text-decoration:underline;}

/* LAYOUT ---------- */
#container {background:url(images/tile.jpg) repeat-y; width:857px; margin:0 auto;}
#header {background:url(images/header-home.jpg) no-repeat; overflow:auto; width:857px;}
.sub#header {background:url(images/header-sub.jpg) no-repeat;}
#col1 {float:left; width: 172px; padding-left:7px;}
#address {background:url(images/address-background.gif) no-repeat; width:154px; overflow:auto; line-height:12px; padding-left:13px; margin-top:62px; padding-top:5px; padding-bottom:5px;}
#col2 {float:left; width: 655px; }
#content {width:604px; margin:0 auto;}
#footer {width:620px; margin:0 auto; text-align:center; font-size:10px; padding-top:20px; clear:both;}
#bottom {width:857px; margin:0 auto; background:url(images/bottom.jpg) no-repeat; overflow:auto; padding-bottom:20px;}

/* HEADERS ---------- */
h1 {background-repeat: no-repeat; height: 49px; width:344px; text-indent: -999em; margin: 0; padding:0;}
#address h2 {font-size:11px;}
h2 {font-size:12px;}
h3 {color:#b2d135;}
p { line-height:16px; margin-bottom:24px}
li { margin-left:20px;}
ul { margin-bottom:24px}

/* CLASSES ---------- */
#footer .sesame {color:#5c6994;}
.img { margin:0 10px 10px 10px;}
.left-doctors {float: left; padding-left: 35px;}
.right-doctors {float:right; padding-right: 35px;}
.top  {color:#b2d135; font-weight:bold;}
.clear {clear: both;}

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


/* NAVIGATION MAIN ---------- */
ul#nav {list-style: none; padding: 0; margin:20px 0 0 0; width:157px;}
ul#nav { margin-left:-20px}
/*  Sets styles for all links that are inside the ul id="nav" */
#nav a {display: block;height: 21px; overflow: hidden; text-indent:-999em; width:157px}

/* Set the image for each nav item */
#meettheorthodontist {background: url(images/nav-meet-the-orthodontist.jpg); }
#aboutouroffice {background: url(images/nav-about-our-office.jpg); }
#yourfirstvisit {background: url(images/nav-your-first-visit.jpg); }
#testimonials {background: url(images/nav-testimonials.jpg); }
#aboutorthodontics {background: url(images/nav-about-orthodontics.jpg); }
#braces101 {background: url(images/nav-braces-101.jpg); }
#invisalign {background: url(images/nav-invisalign.jpg); }
#emergencycare {background: url(images/nav-emergency-care.jpg); }
#faqs {background: url(images/nav-faqs.jpg); }
#gameroom {background: url(images/nav-game-room.jpg); }
#officeforms {background: url(images/nav-office-forms.jpg); }
#contactus {background: url(images/nav-contact-us.jpg); }
#home {background: url(images/nav-home.jpg); }

/* Shift the image position up to show the active state */
#nav a:hover, #nav .active, #nav li:hover, #nav li.sfhover, 
#nav li:hover #meettheorthodontist, #nav li.sfhover #meettheorthodontist, 
#nav li:hover #aboutouroffice, #nav li.sfhover #aboutouroffice, 
#nav li:hover #yourfirstvisit, #nav li.sfhover #yourfirstvisit, 
#nav li:hover #testimonials, #nav li.sfhover #testimonials, 
#nav li:hover #faqs, #nav li.sfhover #faqs, 
#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 #thegameroom, #nav li.sfhover #thegameroom, 
#nav li:hover #officeforms, #nav li.sfhover #officeforms, 
#nav li:hover #home, #nav li.sfhover #home, 
#nav li:hover #contactus, #nav li.sfhover #contactus {background-position:-157px 0;}

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

/* SUB NAVIGATION ---------- */
div#sub {width: 600px; margin:40px 0 0 30px; }
div#sub ul li { margin-left:0px}

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

/* for IE6*/
div#sub ul {list-style: none; width:600px; padding:0; margin:0;}

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

#sub li {display: inline; white-space: nowrap; }
#sub a {text-decoration:none;}

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

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

/* LOGO NAVIGATION ---------- */
ul#logo { list-style: none; padding: 0; margin:0; width:165px; }

/*  Sets styles for all links that are inside the ul id="nav" */
#logo a {display: block; height: 274px; width:165px; 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: 23px; width:321px; list-style: none; padding:0; margin:0 0 0 436px;}

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

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

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

/* RETAINERS ---------- */
img.right {
float:right;
margin:0 0 10px 10px;}

/* 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: inline-block}

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

ul#sesame-games p {
padding-bottom: 1em}