/* CSS Document */
/* HTML, BODY ---------- */
* {margin:0; padding:0;}
body {margin:0; background:#d0e0ee; font-family: Tahoma, Arial, sans-serif; font-size:11px; line-height:16px; color:#045dad;}
#footer a {color:#0b2476;}
#footer a:hover {text-decoration:none;}
p {padding:15px 0 0 0;}
#content a {font-weight:bold; text-decoration:underline; color:#045dad;}
#content a:hover {text-decoration:none;}
blockquote {padding:0 20px 0 20px;}

/* LAYOUT ---------- */
#container {background:url(images/tile.jpg) repeat-y; margin:0 auto; width:788px;}
#header {width:788px; background:url(images/banner.jpg) no-repeat; overflow:auto;}
#body {width:780px; background:url(images/body.jpg) no-repeat; clear:both; overflow:auto; padding:0 0 20px 0; margin:0 auto;}
#address {float:left; width:212px; margin:0 0 0 0; color:#FFF; padding:2px 0 0 15px;}
#content {float:left; width:527px; margin:14px 0 0 0;}
#footer {width:728px; background:url(images/footer.jpg) no-repeat; color:#0b2476; line-height:13px; padding:13px 30px 45px 30px; margin:0 auto; clear:both; text-align:center;}

/* HEADERS ---------- */
h1 {background-repeat: no-repeat; height: 60px; width:527px; text-indent: -999em; margin: 0; padding:0;}
#address h2, #address h3 {color:#013767; font-weight:normal; font-size:11px; font-style:normal;}
#body h2 {font-size:11px; padding:10px 0 0 0;}
#body h3 {font-size:11px; font-style:italic; padding:10px 0 0 0;}
#footer h2 {color:#FFF; font-size:11px; font-weight:normal;}


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

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


/* NAVIGATION MAIN ---------- */
ul#nav {list-style: none; padding: 0 0 0 13px; margin:0; height:36px; float:left;  width:767px; clear:both; background:#FFF; position:relative; z-index:1;}

/*  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 */
#aboutouroffice {background: url(images/nav-about-our-office.gif) #FFF no-repeat; width:120px;}
#aboutorthodontics {background: url(images/nav-about-orthodontics.gif); width:150px; }
#braces101 {background: url(images/nav-braces-101.gif); width:82px; }
#emergencycare {background: url(images/nav-emergency-care.gif); width:121px; }
#orthodontictreatments {background: url(images/nav-ortho-technologies.gif); width:144px; }
#contactus {background: url(images/nav-contact-us.gif); width:87px; }
#home {background: url(images/nav-home.gif) no-repeat #FFF; width:57px; }

/* 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 #emergencycare, #nav li.sfhover #emergencycare, 
#nav li:hover #orthodontictreatments, #nav li.sfhover #orthodontictreatments, 
#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: #045dad;  }
#nav li:hover ul, #nav li.sfhover ul {left: auto; margin: 0px 0 0 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;  border-top:1px solid #2f7bc0; padding-top:3px;}
#nav ul li a:hover {color:#73afe5;}

#sitemap, #sitemap ul li {margin-left:20px; list-style:none; color:#FFF;}

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

/*  Sets styles for all links that are inside the ul id="nav" */
#logo a {display: block; height:100px; width:400px; 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: 32px; width:273px; list-style: none; padding:0; margin:0 0 0 0; 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: 32px; overflow: hidden; text-indent:-999em;}

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

/* Shift the image position up to show the active state */
#logins a:hover, #logins.active, #logins li:hover, #logins li.sfhover {background-position:0 -32px;}
/* 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}
#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}