* {margin: 0; outline: none; padding: 0; }
body { background: #22A3F4 url(images/bg.jpg) repeat-x; }

/* - - - EDIT.COM visible styles - - - */
BODY, TD, .NormalText { font-weight: normal; text-decoration: none; font-style: normal; color: #5683A2; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; }

.Title		{ color: #485C69; font-size: 28px; font-weight: bold; font-family: Arial; padding: 10px 0; }
.Header		{ color: #485C69; font-size: 16px; font-weight: bold; font-family: Arial; }
.Subheader	{ color: #485C69; font-size: 12px; font-weight: bold; font-family: Arial; }

.LightBlue	{ color: #5683A2; }
.DarkBlue	{ color: #485C69; }
.Black		{ color: #000000; }
.White		{ color: #FFFFFF; }

.SmallText	{ font-size: 10px; }
.MediumText	{ font-size: 16px; line-height: 16px; }
.LargeText	{ font-size: 24px; line-height: 24px; }

IMG.FloatLeft 	{ float: left; margin: 0 5px 5px 0; }
IMG.FloatRight 	{ float: right; margin: 0 0 5px 5px; }
 
/* - - - - - - - - - - TEXT - - - - - - - - - - */
body, form, input, textarea { color: #5683A2; font-family: arial, sans-serif; font-size: 12px; }
p { color: #5683A2; line-height: 18px; margin: 10px 0; }
* .flash p { color: #FFF; padding: 20px; width: 540px; }
* .content ul { clear: left; list-style: disc; margin: 10px 20px; padding: 0; }
* .content ul li { line-height: 18px; margin: 10px 0; padding: 0; }
* .content ul ul { clear: left; list-style: circle; margin: 10px 20px; padding: 0; }
* .content ul ul li { line-height: 18px; margin: 10px 0; padding: 0; }
div.hr { background: #22A3F4; clear: both; height: 2px; margin: 10px 0; padding: 0; width: 100%; }
div.hr hr { display: none; }
* #footer p { color: #FFF; font-size: 11px; line-height: 14px; }
* #sidebar p { color: #485C69; font-size: 11px; line-height: 14px; margin-bottom: 20px; }

.clear {
	clear: both;	
}

/* - - - LINKS - - - */
a { color: #394953; font-weight: bold; text-decoration: none; }
a:hover { text-decoration: underline; }
* .back-to-top a { color: #000; font-size: 11px; line-height: 14px; text-decoration: underline; }
* .back-to-top a:hover { color: #000; text-decoration: none; }
* .flash a { color: #FFF; }
* #footer a { color: #FFF; }

/* - - - HEADERS - - - */
h1 { background: no-repeat; clear: left; height: 45px; overflow: hidden; text-indent: -9999px; }
h1.sidebar { background: no-repeat; clear: left; height: 20px; margin-bottom: 20px; overflow: hidden; text-indent: -9999px; }
h2 { color: #485C69; font-family: arial, sans-serif; font-size: 16px; margin: 10px 0; }
h3 { color: #485C69; font-family: arial, sans-serif; font-size: 12px; margin: 10px 0; }
h4 { color: #FFF; font-family: arial, sans-serif; font-size: 11px; font-weight: normal; margin: 5px 0; }

/* - - - - - - - - - - IMAGES - - - - - - - - - - */
img { border: 0; display: block; }
img.center { border: #22A3f4 2px solid; clear: both; margin: 0 auto; }
img.left { border: #22A3f4 2px solid; clear: left; float: left; margin: 0 20px 20px 0; }
img.right { border: #22A3f4 2px solid; clear: right; float: right; margin: 0 0 20px 20px; }
img.no-border { border: none; }
* .flash img { float: right; padding: 30px 20px; }
* .flash-replaced .alt { display: block; height: 0px; position: absolute; overflow: hidden; width: 0px;}
* .map { border: #22A3f4 2px solid; }
* #header img { border: 0; float: left; }
* #sidebar img { margin-bottom: 20px; }
* 
/* - - - - - - - - - - LAYOUT - - - - - - - - - - */
* .back-to-top { clear: both; text-align: right; width: 100%; }
* .content { clear: both; min-height: 600px; padding: 20px; width: 740px; }
* .content-home { clear: both; padding: 0; width: 780px; }
* #header { display: block; height: 100px; width: 780px; }
* #header-image { margin-left: 200px; }
* #flash-home { background: url(images/flash-bg.jpg) no-repeat; height: 357px; margin-left: 200px; width: 580px; }
* #footer { background: #22A3F4 url(images/footer-bg.jpg) no-repeat top; clear: both; padding: 20px; text-align: center; width: 740px; }
* #home-text { float: left; margin-right: 20px; padding: 20px; width: 500px; }

* #header-contact {width: 400px; height: 100px; position: absolute; top: 0; left: 390px; background-image:url(images/call-us-bg.png); background-repeat: no-repeat; padding-top: 30px; padding-left: 7px;}


* #header-contact .haspopup {}
* #patient-forms { border-left: #22A3f4 2px solid; clear: right; float: right; margin: 0 0 10px 10px; padding: 0 10px; width: 200px; }
* #sidebar { background: url(images/sidebar/bg.jpg) repeat-y; float: left; padding: 20px; width: 160px; }
* #site { background: #FFF; margin: 0 auto; width: 780px; position: relative;}

/* - - - - - - - - - - NAVIGATION - - - - - - - - - - */
* #navigation-wrapper { background: url(images/nav/bg.jpg); position: absolute; left: 0; width: 200px; }
ul#navigation { list-style: none; width: 200px; }
* #navigation li { float: left; }
* #navigation a { display: block; height: 30px; overflow: hidden; text-indent: -9999px; width: 200px; }

/* - - - IMAGES - - - */
a#home { background: url(images/nav/home.jpg); height: 46px; }
* #your-first-visit { background: url(images/nav/your-first-visit.jpg); }
* #meet-the-doctors { background: url(images/nav/meet-the-doctors.jpg); }
* #meet-the-team { background: url(images/nav/meet-the-team.jpg); }
* #office-tour { background: url(images/nav/office-tour.jpg); }
* #dental-implants { background: url(images/nav/dental-implants.jpg); }
* #wisdom-teeth { background: url(images/nav/wisdom-teeth.jpg); }
* #other-procedures { background: url(images/nav/other-procedures.jpg); }
* #patient-information { background: url(images/nav/patient-information.jpg); }
* #contact-us { background: url(images/nav/contact-us.jpg); }
a#links { background: url(images/nav/links.jpg); height: 41px; }

/* - - - SUBNAVIGATION - - - */
* #navigation li ul { background: #FFF; border: #22A3F4 1px solid; left: -9999px; list-style: none; position: absolute; width: 180px; }
* #navigation li:hover ul, #navigation li.sfhover ul { left: auto; margin: -30px 0 0 180px; }
* #navigation ul li { display: block; }
* #navigation ul li a { color: #394953; font-size: 12px; font-weight: bold; height: 20px; line-height: 20px; padding-left: 10px; text-decoration: none; text-indent: 0; width: 170px; }

/* - - - ROLLOVER EFFECTS - - - */
* #navigation a:hover, #navigation .active { background-position: 0 -30px; }
* #navigation li:hover #other-procedures, #navigation li.sfhover #other-procedures,
* #navigation li:hover #patient-information, #navigation li.sfhover #patient-information,
* #navigation li:hover #contact-us, #navigation li.sfhover #contact-us { background-position: 0 -30px; }
a#home:hover, a#home.active { background-position: 0 -46px; }
a#links:hover, a#links.active { background-position: 0 -41px; }

/* - - - SUBNAVIGATION ROLLOVER EFFECTS - - - */
* #navigation ul li a:hover, #navigation ul li .active { background: #143C5F; color: #FFF; font-weight: bold; }

/* - - - CURSOR EFFECTS - - - */
* #navigation .active { cursor: default; }

/* - - - CODA BUBBLE EFFECT - - - */
.haspopup {
	width: 90px;
	height: 29px;
	float: left;
	margin: 0;
	padding-bottom: 5px;
	padding-right: 2px;
	
}

.haspopup img { z-index:0; clear:left
	
}

.popup {
	position:relative;
	background:url(images/bubble.gif) no-repeat 0 0;
	font:Arial, Helvetica, sans-serif;
	font-size:10px;
	margin: 35px 0 0 -25px;
	padding:30px 20px 10px 20px;
	color:#59baf7;
	height:105px;
	width:125px;
	z-index: 9999;
	display: none; /* keeps the popup hidden if no JS avail */
}

img.trigger {
	
}


/* - - - - - - - - - - ANATOMY OF A TOOTH - - - - - - - - - - */
* #anatomy-of-a-tooth-diagram {background: url(images/anatomy-of-a-tooth/anatomy-of-a-tooth-bg.gif); height: 525px; position: relative; width: 300px}
* #anatomy-of-a-tooth-diagram a {cursor: help; display: block; position: absolute}
* #anatomy-of-a-tooth-diagram 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-diagram a img {border: none; display: block; height: 0; position: absolute; width: 0}
* #anatomy-of-a-tooth-diagram 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}

/* - - - - - - - - - - MINI CONTACT FORM - - - - - - - - - - */
* .contact-form-mini {
margin: 0;	
width: 100%; 
padding: 0;
border: 0;}/*optional, change color to match site*/
* .contact-form-mini fieldset {border: none; padding: 0 0;}
* .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: #5683A2;
padding:0 0;
border:solid 1px #b3bfc7;
width:100%;
margin:3px 0;
background: #ffffff;
text-align: left;}
* .contact-form-mini button {/*these styles control the look of the button, change as necessary*/
margin: 0;/*do not change, controls positioning*/
float: left;
clear: left;
display: block;
width:57px;
background:#ffffff;/* customize me! */
border: 1px solid #a09fbb;
text-align: center;
line-height:18px;
color:#5683A2;/* customize me! */
font-size:11px;
font-weight:bold;
text-transform: uppercase;}
* .contact-form-mini span.error {	display: none;}
* .contact-form-mini span.error, .contact-form-mini ul.error li {
font-size: 11px;
font-weight:normal; 
color:#ff0000; 
text-align:left; 
padding: 3px 0 3px 18px;
background: transparent url(images/cancel.png) no-repeat left; }
* .contact-form-mini h2.error {color: #ff0000;}
* .contact-form-mini #message	{ margin: 9px 10px; padding: 9px; border:solid 1px #5b589f;}
* .contact-form-mini #message h2 {margin: 9px 0; text-align: center;}
* .contact-form-mini #message p {margin:9px 0px; text-align: center;}
* .contact-form-mini #checkmark {display: block; margin: 9px auto; text-align: center;}