/* CSS Document */

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

* {margin:0; padding:0;}

body {margin:0; background: url(images/tile.jpg) repeat-x #4da4c0; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:11px; line-height:20px; color:#082a67;}

p, h2, h3, ul, blockquote {margin-top:20px; margin-bottom:20px;}

ul, blockquote, ol {margin-left:30px; margin-right:20px;}

a {font-weight:normal;}

a:hover {text-decoration:none;}

#footer a {color:#d4cae5; font-weight:normal;}

a img {border-style:none;}

#footer p {margin:0; padding:0;}



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

#wrap {width:816px; margin:0 auto;}

#header {width:816px; background:url(images/header.jpg) no-repeat; height:257px;}

#spots {with:717px; margin-left:22px; background:url(images/spots.jpg) repeat-y; }

#body {width:728px; background: url(images/chompy.jpg) no-repeat bottom right #FFF; overflow:auto; margin-left:41px;}

#col1 {float:left;   width:214px; padding:0;}

#address {width:152px; color:#7c64ac; line-height:12px; margin:0 0 0 18px;}

#col2 {float:left; width:513px; background:url(images/content-bg.jpg) no-repeat; min-height:400px; padding:50px 0 0 0;}

#text {width:464px; padding-bottom:20px; margin:0 0 0 10px;}

#forms {padding:10px; background-color:#FFFFFF; border:solid 2px #a6d279; width:239px; margin: 0 10px 10px 10px; float:right}

#footer {width:716px; background:url(images/footer-bg.jpg) no-repeat; text-align:center; min-height:108px; padding:50px; line-height:16px; color:#d4cae5; clear:both;}



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

/*#logo {background: no-repeat url(images/spacer.gif); height: 204px; width:810px; text-indent: -999em; margin: 0; padding:0; }

#logo a {height: 204px; width:810px; background: no-repeat url(images/spacer.gif);}*/

h1 {background-repeat: no-repeat; height: 76px; width:232px; text-indent: -999em; margin: 0; padding:0; }

#footer h2 {font-size:11px; color:#c4e075; margin:0; padding:0;}

#col2 h2 {font-size:13px; color:#7c64ac;}

#col2 h3 {color:#91bc3e; font-size:11px; font-weight:normal; font-style:italic;}

#address h2 {font-size:11px; color:#8fba3e;}



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

#footer .sesame {color:#4b3085; font-weight:bold;}

.img {margin:-76px 10px 10px 10px; float:right;}

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

.right {float:right;}

.left {float:left;}

.top p, a  {color:#8fba3e; font-size:11px; font-weight:bold; clear:both;}

.hide {display:none;}

.flash {z-index: 100;}

.flashp {color:#000; background-image: url(images/1.jpg); text-align:center; padding-bottom:140px; width:489px;}

.getflash {padding:5px; float:left;}

.block {display:block;}

.alpha li {list-style:upper-alpha;}

.listnone {list-style:none;}

.center {text-align:center;}





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



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

ul#navlists {list-style: none; padding: 50px 0 20px 0; margin:0; width:214px; background:url(images/content-bg.jpg) no-repeat;}



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

#navlists a {display: block;height: 35px; overflow: hidden; text-indent:-999em; width:200px}



/* Set the image for each nav item */

#ouroffice {background: url(images/nav-our-office.jpg); }

#fornewpatients {background: url(images/nav-for-new-patients.jpg); }

#teeth101 {background: url(images/nav-teeth-101.jpg); }
#testimonials {background: url(images/nav-testimonials.jpg); }
#yoursmile {background: url(images/nav-your-smile.jpg); }

#funandgames {background: url(images/nav-fun-and-games.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 */

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

#navlists li:hover #ouroffice, #navlists li.sfhover #ouroffice, 

#navlists li:hover #navlists #fornewpatients, #navlists li.sfhover #fornewpatients, 

#navlists li:hover #teeth101, #navlists li.sfhover #teeth101, 

#navlists li:hover #yoursmile, #navlists li.sfhover #yoursmile, 

#navlists li:hover #funandgames, #navlists li.sfhover #funandgames, 

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

#navlists li:hover #home, #navlists li.sfhover  #home {background-position:-200px 0pt;}



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

#navlists .active {cursor: default}



/* NAVIGATION SUB CONTACT ---------- */

ul#subcontact {list-style: none; padding: 0; margin:0; width:200px; }

#ssubcontactub li {height:18px;}



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

#subcontact a {display: block;height: 18px; overflow: hidden; text-indent:-999em; width:200px}



/* Set the image for each nav item */

#location {background: url(images/nav-location.gif); }

#commentform {background: url(images/nav-comment-form.gif); }

#referafriend {background: url(images/nav-refer-a-friend.gif); }

#appointmentrequest {background: url(images/nav-appointment-request.gif); }



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

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

#subcontact li:hover #location, #subcontact li.sfhover #location,

#subcontact li:hover #commentform, #subcontact li.sfhover #commentform,

#subcontact li:hover #referafriend, #subcontact li.sfhover #referafriend,

#subcontact li:hover #appointmentrequest, #subcontact li.sfhover #appointmentrequest {background-position:-200px 0pt;}



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

#subcontact .active {cursor: default}



/* NAVIGATION SUB OFFICE ---------- */

ul#suboffice {list-style: none; padding: 0; margin:0; width:200px; }

#suboffice li {height:18px;}



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

#suboffice a {display: block;height: 18px; overflow: hidden; text-indent:-999em; width:200px}



/* Set the image for each nav item */

#meetthedentist {background: url(images/nav-meet-the-dentist.gif); }

#officetour {background: url(images/nav-office-tour.gif); }

#meettheteam {background: url(images/nav-meet-the-team.gif); }
#officeevents {background: url(images/nav-office-events.gif); }



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

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

#suboffice li:hover #meetthedentist, #suboffice li.sfhover #meetthedentist,
#suboffice li:hover #officeevents#suboffice li.sfhover #officeevents, 

#suboffice li:hover #officetour, #suboffice li.sfhover #officetour {background-position:-200px 0pt;}



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

#suboffice .active {cursor: default}



/* NAVIGATION SUB PATIENTS	---------- */

ul#subpatients {list-style: none; padding: 0; margin:0; width:200px; }

#subpatients li {height:18px;}



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

#subpatients a {display: block;height: 18px; overflow: hidden; text-indent:-999em; width:200px}



/* Set the image for each nav item */

#yourchildsfirstvisit {background: url(images/nav-your-childs-first-visit.gif); }

#privacypolicy {background: url(images/nav-privacy-policy.gif); }



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

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

#subpatients li:hover #yourchildsfirstvisit, #subpatients li.sfhover #yourchildsfirstvisit, 

#subpatients li:hover #privacypolicy, #subpatients li.sfhover #privacypolicy {background-position:-200px 0pt;}



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

#subpatients .active {cursor: default}



/* NAVIGATION SUB TEETH ---------- */

ul#subteeth {list-style: none; padding: 0; margin:0; width:200px; }

#subteeth li {height:18px;}



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

#subteeth a {display: block;height: 18px; overflow: hidden; text-indent:-999em; width:200px}



/* Set the image for each nav item */



#teethforlife {background: url(images/nav-teeth-for-life.gif); }

#gumdisease {background: url(images/nav-gum-disease.gif); }

#faq {background: url(images/nav-faq.gif); }

#trauma {background: url(images/nav-trauma.gif); }

#resources {background: url(images/nav-resources.gif); }



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

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

#subteeth li:hover #teethforlife, #subteeth li.sfhover #teethforlife,

#subteeth li:hover #gumdisease, #subteeth li.sfhover #gumdisease,

#subteeth li:hover #faq, #subteeth li.sfhover #faq,

#subteeth li:hover #trauma, #subteeth li.sfhover #trauma,

#subteeth li:hover #resources, #subteeth li.sfhover #resources {background-position:-200px 0pt;}



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

#subteeth .active {cursor: default}



/* NAVIGATION SUB SMILE---------- */

ul#subsmile {list-style: none; padding: 0; margin:0; width:200px; }

#subsmile li {height:18px;}



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

#subsmile a {display: block;height: 18px; overflow: hidden; text-indent:-999em; width:200px}



/* Set the image for each nav item */

#sedationdentistry {background: url(images/nav-sedation-dentistry.gif); }

#preventingtoothdecay {background: url(images/nav-preventing-tooth-decay.gif); }

#extractions {background: url(images/nav-extractions.gif); }

#whitening {background: url(images/nav-whitening.gif); }


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

#subsmile a:hover, #susubsmile .active, #subsmile li:hover, #subsmile li.sfhover, 

#subsmile li:hover #sedationdentistry, #subsmile li.sfhover #sedationdentistry,

#subsmile li:hover #preventingtoothdecay, #subsmile li.sfhover #preventingtoothdecay,

#subsmile li:hover #whitening, #subsmile li.sfhover #whitening,

#subsmile li:hover #extractions, #subsmile li.sfhover #extractions {background-position:-200px 0pt;}



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

#subsmile .active {cursor: default}



/* NAVIGATION SUB FUN ---------- */

ul#subfun {list-style: none; padding: 0; margin:0; width:200px; }

#subfun li {height:18px;}



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

#subfun a {display: block;height: 18px; overflow: hidden; text-indent:-999em; width:200px}



/* Set the image for each nav item */

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

#dentalfunkit {background: url(images/nav-dental-fun-kit.gif); }



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

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

#subfun li:hover #thegameroom, #subfun li.sfhover #thegameroom,

#subfun li:hover #dentalfunkit, #subfun li.sfhover #dentalfunkit {background-position:-200px 0pt;}



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

#subfun .active {cursor: default}





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

ul#logo { list-style: none; padding: 0; margin:0; width:816px;}



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

#logo a {display: block; height: 204px; width:810px; 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: 53px; width:221px; list-style: none; padding:0; margin:0	0 0 535px;}



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



/* Set the image for each nav item */

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



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

#logins a:hover, #logins .active, #logins li:hover, #logins li.sfhover {background-position:0 -53px;}

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

#logins .active {cursor: default}



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: block}



ul#sesame-games img {

border: 0;

margin: 0 0 10px 10px}



ul#sesame-games a.button {

float:right;

height:85px;

width:200px}



ul#sesame-games p {

padding-bottom: 1em}





#anatomy-of-a-tooth {background: url(images/anatomy-of-a-tooth/anatomy-of-a-tooth-bg.gif); height: 525px; position: relative; width: 300px}

#anatomy-of-a-tooth a {cursor: help; display: block; position: absolute}

#anatomy-of-a-tooth a:hover {background: transparent}

#anatomy-of-a-tooth a#bone {height: 20px; left: 30px; top: 380px; width: 40px}

#anatomy-of-a-tooth a#cementum {height: 20px; left: 100px; top: 460px; width: 90px}

#anatomy-of-a-tooth a#dentin {height: 20px; left: 80px; top: 165px; width: 60px}

#anatomy-of-a-tooth a#enamel {height: 20px; left: 165px; top: 135px; width: 60px}

#anatomy-of-a-tooth a#gingiva {height: 30px; left: 20px; top: 275px; width: 60px}

#anatomy-of-a-tooth a#periodontal {height: 30px; left: 205px; top: 440px; width: 70px}

#anatomy-of-a-tooth a#pulp {height: 30px; left: 125px; top: 220px; width: 50px}

#anatomy-of-a-tooth a#print {cursor: pointer; height: 23px; left: 240px; top: 502px; width: 60px}

#anatomy-of-a-tooth a img {border: none; display: block; height: 0; position: absolute; width: 0}

#anatomy-of-a-tooth a:hover img {height: 98px; width: 300px}

#anatomy-of-a-tooth a#bone:hover img {left: -30px; top: -380px}

#anatomy-of-a-tooth a#cementum:hover img {left: -100px; top: -460px}

#anatomy-of-a-tooth a#dentin:hover img {left: -80px; top: -165px}

#anatomy-of-a-tooth a#enamel:hover img {left: -165px; top: -135px}

#anatomy-of-a-tooth a#gingiva:hover img {left: -20px; top: -275px}

#anatomy-of-a-tooth a#periodontal:hover img {left: -205px; top: -440px}

#anatomy-of-a-tooth a#pulp:hover img {left: -125px; top: -220px}

#callout { width:270px; height:120px; float:right; margin:0 0 10px 10px; background:url(images/callout-party.jpg); text-indent:-999em;}
#callout:hover { background:url(images/callout-party.jpg) 0 120px}