/* CSS Document */
/* HTML, BODY ---------- */
* {margin:0; padding:0;}
body {margin:0 0 0 0; background: #ffffff url(images/body_bg.gif) 50% 0 repeat-x; font-family: Tahoma, Arial, sans-serif; font-size:12px; line-height:18px; color:#00568a;}
#footernav a {text-transform:uppercase; font-size:10px; padding-right:5px; color:#00568a;}
#footer a {color:#00568a; font-size:10px;}
p {margin-top:10px;}
h2, h3 {margin-bottom:5px;}
#body ul {margin-left:20px; padding-top:5px; margin-bottom:20px;}
#body a {color:#00568a;}
a:hover {text-decoration:none;}
blockquote {margin:20px;}

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

#container {background:url(images/tile.gif) repeat-y; width:750px; margin:0 auto; padding:10px 0 0 0;}
#header {background:url(images/header.jpg) no-repeat; width:730px; margin:0 auto; overflow:auto;}
#body {width:710px; margin:0 auto; padding:15px 0 20px 0;}
#footernav {width:722px; background:url(images/footer-bg.gif) no-repeat; padding:0 0 4px 0; margin:0 auto; text-align:center; line-height:16px; clear:both;}
#containerbottom {width:750px; background:url(images/content-bottom.gif) no-repeat; margin:0 auto; padding:0 0 17px 0;}
#footer {width:730px; margin:0 auto; color:#005099; font-size:11px; text-align:center; padding-top:5px;}

/* HEADERS ---------- */
h1 {background-repeat: no-repeat; height: 34px; width:462px; text-indent: -999em; margin: 0 0 0 -4px; padding:0;}
h4 {font-size:18px; padding-bottom:5px;}
#footer h2 {color:#73b163; font-size:14px;}
h3 {color:#987944; font-size:13px; padding-bottom:5px; padding-top:10px;}
#body h2 {font-size:12px; padding-top:10px;}

/* CLASSES ---------- */
#footer .sesame {color:#5c6994;}
.img {margin:0 10px 10px 10px;}
.right {float:right;}
.top  {color:#e4a732; font-size:11px; font-weight:bold;}

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

/* NAVIGATION MAIN ---------- */
ul#nav {list-style: none; padding: 0; margin:0 auto; height:36px; width:730px; clear:both; z-index:1; position:relative;}

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

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

/* Set the image for each nav item */
#meettheteam {background: url(images/nav-meet-the-team.gif); width:104px;}
#meettheorthodontist {background: url(images/nav-meet-the-orthodontist.gif); width:115px;}
#aboutorthodontics {background: url(images/nav-about-orthodontics.gif); width:135px; }
#braces101 {background: url(images/nav-braces-101.gif); width:78px; }
#newpatients {background: url(images/nav-new-patients.gif); width:93px; }
#forfun {background: url(images/nav-for-fun.gif); width:65px; }
#contactus {background: url(images/nav-contact-us.gif); width:78px; }
#home {background: url(images/nav-home.gif) no-repeat #FFF; width:62px; }

/* Shift the image position up to show the active state */
#nav a:hover, #nav .active, #nav li:hover, #nav li.sfhover, 
#nav li:hover #meettheteam, #nav li.sfhover #meettheteam, 
#nav li:hover #meettheorthodontist, #nav li.sfhover #meettheorthodontist, 
#nav li:hover #aboutorthodontics, #nav li.sfhover #aboutorthodontics, 
#nav li:hover #braces101, #nav li.sfhover #braces101, 
#nav li:hover #newpatients, #nav li.sfhover #newpatients, 
#nav li:hover #forfun, #nav li.sfhover #forfun, 
#nav li:hover #home, #nav li.sfhover #home, 
#nav li:hover #contactus, #nav li.sfhover #contactus {background-position:0 -36px;}

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

#nav, #nav ul {list-style: none; margin: 0; padding: 0}
#nav ul li {float:none;}
#nav li ul { left: -9999em; padding: 0; position: absolute; background: #9abad6;  }
#nav li:hover ul, #nav li.sfhover ul {left: auto; margin: 0; color:#FFF;}
#nav ul li a {height:25px; margin: 0; text-decoration: none; width: 154px; text-indent:0; color:#FFF; font-size:11px;	padding-left:5px;   padding-top:3px;}
#nav ul li a:hover {background:#00568a;}





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

/*  Sets styles for all links that are inside the ul id="nav" */
#logo a {display: block; height: 143px; width:251px; 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: 43px; width:276px; list-style: none; padding:0; margin:0 0 0 202px; float:left;}

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

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

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


#braces-diagram {background: url(images/braces-diagram/braces-diagram-bg.gif); height: 374px; position: relative; width: 425px; margin:0 auto;}
#braces-diagram a {cursor: help; display: block; position: absolute}
#braces-diagram a:hover {background: transparent}
a#elastic-tie {height: 20px; left: 90px; top: 100px; width: 65px}
a#loop-archwire {height: 20px; left: 150px; top: 80px; width: 100px}
a#archwire {height: 20px; left: 190px; top: 100px; width: 65px}
a#bracket {height: 20px; left: 230px; top: 120px; width: 60px}
a#headgear-tube {height: 20px; left: 335px; top: 100px; width: 90px}
a#coil-spring {height: 20px; left: 150px; top: 300px; width: 65px}
a#tie-wire {height: 20px; left: 235px; top: 325px; width: 65px}
a#band {height: 20px; left: 270px; top: 300px; width: 40px}
a#hook {height: 20px; left: 315px; top: 280px; width: 35px}
a#elastic {height: 40px; left: 355px; top: 280px; width: 45px}
a#print {cursor: pointer; height: 23px; left: 365px; top: 351px; width: 60px}
#braces-diagram a img {border: none; display: block; height: 0; position: absolute; width: 0}
#braces-diagram a:hover img {height: 74px; width: 425px}
a#elastic-tie:hover img {left: -90px; top: -100px}
a#loop-archwire:hover img {left: -150px; top: -80px}
a#archwire:hover img {left: -190px; top: -100px}
a#bracket:hover img {left: -230px; top: -120px}
a#headgear-tube:hover img {left: -335px; top: -100px}
a#coil-spring:hover img {left: -150px; top: -300px}
a#tie-wire:hover img {left: -235px; top: -325px}
a#band:hover img {left: -270px; top: -300px}
a#hook:hover img {left: -315px; top: -280px}
a#elastic:hover img {left: -355px; top: -280px}


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