/* CSS Document */
/* HTML, BODY ---------- */
* {margin:0; padding:0;}
body {margin:0; background:#005a84 url(images/tile.jpg) repeat-x; font-family: Tahoma, Arial, sans-serif; font-size:12px; line-height:20px; color:#005a84;}
#text p, h3, ul, blockquote {padding-top:5px; padding-bottom:5px; }
ul, blockquote, ol {margin-left:30px; margin-right:20px; margin-bottom:5px;}
a {color:#005a84;}
a:hover {text-decoration:none;}
a img {border-style:none;}
#address p {padding-top:0; padding-bottom:0;}
#footer a {color:#80b0c6;}
#footer p {padding-top:0; padding-bottom:0;}

/* SHORTCUTS --------*/
* .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }
* html .clearfix {
    zoom: 1;     /* triggers hasLayout */
    }  /* Only IE can see inside the conditional comment
    and read this CSS rule. Don't ever use a normal HTML
    comment inside the CC or it will close prematurely. */


/* LAYOUT ---------- */
* #wrap {width:780px; background:url(images/tile-body.gif) repeat-y; margin:0 auto; min-height:1050px; }
* #body {width:780px; background:url(images/bg-header.gif) no-repeat; min-height:1050px;}
* #leftcorner {position:absolute; top:0px; margin-left:484px; z-index:99;}
* #address {width:279px; padding:18px 0 20px 0; color:#5691ad; text-align:right; line-height:18px;}
* #homeflash {width: 540px; position:absolute; top: 150px; margin-left: 221px;}
* #col1 {float:left; padding:20px 0 140px 21px; width:200px; clear:both;}
* #col2 {float:left; width:535px; padding:0 0 10px 0;}
* #sidebar {padding:10px 0 0 10px; width:250px; text-align:center; margin-bottom:10px; float:right; min-height:375px; height:auto !important; height:375px; }
* #text {width:479px;  clear:both;}
* #footer {width:535px; background:url(images/bg-footer.gif) no-repeat; font-size:10px; color:#80b0c6; text-align:center; line-height:14px; margin:0 auto; padding:23px 24px 20px 221px;}


/* HEADERS ---------- */
h1 {background-repeat: no-repeat; height: 63px; width:508px; text-indent: -999em; clear:both; margin-left:15px; z-index:101;}
#address h2 {padding:0; margin:0; font-size:12px;}
#address h3 {padding:0; margin:0; font-size:15px;}
#footer h2 {color:#FFF; font-size:12px; padding-top:0; padding-bottom:0;}
#text h2 {color:#deb408; font-size:14px; padding-top:10px; padding-bottom:10px;}
#text h3 {color:#005a84; font-size:13px; padding-top:10px; padding-bottom:10px;}
h1#logo {
margin: 0; float:left;
padding: 0;
background-repeat: no-repeat; 
width: 480px;/* this width reflects the width of the logo image */
height: 123px; /* this height reflects the height of the heading image */
overflow: hidden; 
text-indent: -999em;} /* hides rich text so only background image shows */

h1#logo a {
display: block; 
height: 123px;/*same height as logo h1*/ 
width: 480px;/*same width as logo h1*/}

/* CLASSES ---------- */
#footer .sesame {color:#deb408;}
* .img {border:#deb408 1px solid; padding:6px; background:#FFF; margin: 0 auto;}
* .resources {border:#deb408 1px solid; padding:6px; background:#FFF; }
* .right {float:right;}
* .left {float:left;}
* .top  {color:#e4a732; font-size:11px; font-weight:bold;}
* .hide {display:none;}
* .flash {width:328px; height:314px; float:left; padding-right:15px; }
* .flashp {color:#000; background-image: url(images/1.jpg); text-align:center; padding-bottom:241px; width:328px;}
* .block {display:block;}
* .listnone {list-style:none;}
* .center {text-align:center;}
* .clear {clear:both;}
* .margin {margin:24px 0 10px 10px;}
* .invisalignbanner {position:absolute; top:492px;width:156px; margin-left:39px;}
* .welcome {padding-top:16px; margin-left:13px; clear:both;}
* .homemargin {padding:440px 55px 0 246px;}
* .submargin {padding:115px 55px 0 246px;}
* .radio {padding-right:5px;}
* .smilesforlife {position:absolute; top:592px; width:156px; margin-left:39px;}
#social-icons {position:absolute; top:732px; width:160px; margin-left:38px; padding:0;}
#social-icons a, #social-icons img {margin:0; padding:0;width:37px;}

#dental-warranty
{
	position: absolute;
	margin-left: 39px;
	top: 855px;
	width: 162px;
	padding: 0;
	color: #fff;
	font-size: 10px;
}

#dental-warranty p
{
	margin-top: -10px;
	line-height: 14px;
}

#dental-warranty a:link, a:visited
{
	color: #80B0C6;
	text-decoration: underline;
}

#dental-warranty a:hover, a:active
{
	text-decoration: none;
}

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

/* NAVIGATION MAIN ---------- */
ul#nav {list-style: none; padding: 34px 0 0 21px; margin:0; width:183px; position:absolute; top:150px; z-index: 99;}

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

/* Set the image for each nav item */
* #ouroffice {background: url(images/nav-our-office.gif); }
* #familydentistry {background: url(images/nav-family-dentistry.gif); }
* #cosmeticdentistry {background: url(images/nav-cosmetic-dentistry.gif); }
* #sedationdentistry {background: url(images/nav-sedation-dentistry.gif); }
* #patientphotos {background: url(images/nav-patient-photos.gif); }
* #teeth101 {background: url(images/nav-teeth-101.gif); }
* #fornewpatients {background: url(images/nav-for-new-patients.gif); }
* #thegameroom {background: url(images/nav-the-game-room.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 #ouroffice, #nav li.sfhover #ouroffice, 
#nav li:hover #familydentistry, #nav li.sfhover #familydentistry, 
#nav li:hover #cosmeticdentistry, #nav li.sfhover #cosmeticdentistry, 
#nav li:hover #sedationdentistry, #nav li.sfhover #sedationdentistry, 
#nav li:hover #patientphotos, #nav li.sfhover #patientphotos, 
#nav li:hover #thegameroom, #nav li.sfhover #thegameroom, 
#nav li:hover #teeth101, #nav li.sfhover #teeth101, 
#nav li:hover #fornewpatients, #nav li.sfhover #fornewpatients {background-position:-183px 0pt;}

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

* #nav, #nav ul {list-style: none; margin: 0; }
#nav li {display: inline; }
#nav li ul {background: #deb408; left: -999em; padding: 0; position: absolute; z-index: 1; padding:3px;}
#nav li:hover ul, #nav li.sfhover ul {left: auto; margin: -30px 0 0 173px; color:#FFF;}
#nav ul li a {height:20px; margin: 0; text-decoration: none; width: 212px; text-indent:0; color:#FFF; font-size:12px;	padding-left:5px; }
#nav ul li a:hover {background:#86b1c5;}



/* LOGINS NAV ITEMS ---------- */

ul#logins {height: 20px; width:279px; list-style: none; padding:0; margin:0 0 0 0;}

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

/* Set the image for each nav item */
* #patientlogin {background: url(images/nav-patient-login.gif); width:120px;}
* #contactus {background: url(images/nav-contact-us.gif); width:104px;}
* #home {background: url(images/nav-home.gif); width:55px;}

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

* #logins, #logins ul {list-style: none; margin: 0; }
#logins li {display: inline; }
#logins li ul {background: #deb408; left: -999em; padding: 0; position: absolute; z-index: 1; }
#logins li ul li {float:none;}
#logins li:hover ul, #logins li.sfhover ul {left: auto; margin: 0; color:#FFF;}
#logins ul li a {height:20px; margin: 0; text-decoration: none; width: 212px; text-indent:0; color:#FFF; font-size:12px;	padding-left:5px; }
#logins ul li a:hover {background:#86b1c5;}


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}

/* SHORTCUTS --------*/
* .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }
* html .clearfix {
    zoom: 1;     /* triggers hasLayout */
    }  /* Only IE can see inside the conditional comment
    and read this CSS rule. Don't ever use a normal HTML
    comment inside the CC or it will close prematurely. */

/* Global form styles */
fieldset {border: none; padding: 9px 0;}
fieldset div {clear: both;}
* .form-header {border-bottom: 1px solid #3993b1;/*optional, change color to match site*/}
.form-header h3 {margin: 0 0 9px;}
.form-header p {margin: 0 0; padding-bottom: 0;}
* .form-footer {padding-top: 18px; text-align: center; border-top: 1px solid #3993b1;/*optional, change color to match site*/}
.form-footer button {/*these styles control the look of the button, change as necessary*/
	clear:both;/*do not change, forces button to sit below floated elements*/
	margin: 9px auto;/*do not change, controls positioning*/
	display: block;
	width:125px;
	height:31px;
	background:#0a799e;/* customize me! */
	border: 1px solid #0a799e;
	text-align:center;
	line-height:31px;
	color:#ffffff;/* customize me! */
	font-size:12px;
	font-weight:bold;}

/* Mini-Contact Form */
* .contact-form-mini {
	line-height: 16px;
	margin: 0;	
	position: relative;
	width: 159px; text-align:right; 
	padding: 10px 14px 17px 16px; 
	background: #deb408 url(images/bg-contact-form.gif) no-repeat; border: 0;}/*optional, change color to match site*/
	* .sub {margin:0 auto; padding-bottom:16px; clear:both;}
	
* .contact-form-mini .home {padding: 0 14px 17px 16px;}

* .sub {margin:0 0 10px 40px; padding: 20px 14px 16px 16px; clear:both; min-height:240px; height:auto !important; height:240px; }

.contact-form-mini fieldset {border: none; padding: 0 0;}
.contact-form-mini ul#errors {position: absolute; left: 0; top: -20px;}
.contact-form-mini li {
	font-size: 11px;
	margin: 0 10px 0 20px;
	list-style: outside disc;
	text-align: left;
	padding-right: 25px;
	
}
.contact-form-mini li {font-weight: bold;}
.contact-form-mini label {display: none;}
.contact-form-mini input, .contact-form-mini textarea {
	font-size:11px;
	color: #005a84;
	padding:0 3px 0 3px;
	border:solid 1px #005a84;
	width:154px;
	margin:3px 0;
	background: #fff;
	text-align: right; font-family:Tahoma, Arial, sans-serif;}
.contact-form-mini button {/*these styles control the look of the button, change as necessary*/
	margin: 0;/*do not change, controls positioning*/
	float: right;
	clear: right;
	display: block;
	width:57px;
	background:#fff;/* customize me! */
	border: 1px solid #005a84;
	text-align: center;
	line-height:18px;
	color:#005a84;/* customize me! */
	font-size:11px;
	font-weight:bold;
	}
	
	.contact-form-mini p {margin:0; padding:0;}
	
* #errors2
{
	margin: -70px 20px 0 0;
	z-index: 200;
	position: absolute;
}
	
* .contact-form-mini #errors2 p
{
	color: #f00;
	background: #fff;
	text-align: left;
	padding: 5px 0 5px 10px;
	margin: -25px 0 0 0;
	z-index: 200;
	border: 1px solid #f00;
	width: 150px;
	height: 70px;
}

.contact-form-mini #txtNumber
{
	width: 80px;
	float: left;
	clear: right;
}

.contact-form-mini #randoming
{
	float: right;
	vertical-align: text-top;
}	
	
	.form-referrals input, .form-referrals textarea {
	width:200px;}
	.form-referrals .button {
	width:100px;}
	
	input.radio {width:30px;}
	
.left-text
{
 text-align: left;	
}

	
* #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}
a#bone {height: 20px; left: 30px; top: 380px; width: 40px}
a#cementum {height: 20px; left: 100px; top: 460px; width: 90px}
a#dentin {height: 20px; left: 80px; top: 165px; width: 60px}
a#enamel {height: 20px; left: 165px; top: 135px; width: 60px}
a#gingiva {height: 30px; left: 20px; top: 275px; width: 60px}
a#periodontal {height: 30px; left: 205px; top: 440px; width: 70px}
a#pulp {height: 30px; left: 125px; top: 220px; width: 50px}
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}
a#bone:hover img {left: -30px; top: -380px}
a#cementum:hover img {left: -100px; top: -460px}
a#dentin:hover img {left: -80px; top: -165px}
a#enamel:hover img {left: -165px; top: -135px}
a#gingiva:hover img {left: -20px; top: -275px}
a#periodontal:hover img {left: -205px; top: -440px}
a#pulp:hover img {left: -125px; top: -220px}


ul#sitemap {list-style:circle;}
#sitemap li a {background:none; text-decoration:underline}
#sitemap li a:hover {text-decoration:none;}

/* edit.com */

ul, ol {
	margin-top:0px;
	margin-bottom:0px;
}

.NormalText, body, td {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 20px;
	color: #005A84;
	font-weight: normal;
	text-decoration: none;
	text-transform: none;
	font-style:normal;
}

.FooterText {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFF;
	font-weight: bold;
}

.SubjectHeader {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 20px;
	color: #DEB408;
	font-weight: bold;
}