/* HTML, BODY ---------- */
html {height: 100%;}
body {background: #0c2618 url(../images/tile.jpg) repeat-x 0 0;margin: 0;}
* {margin:0; padding:0;}

/* TEXT ---------- */
body {color: #094f71; font: 13px/20px Arial, Helvetica, sans-serif; text-align:left;}
p {padding: 0px 0 15px 0px;}

/* edit.com visible styles */
body, td, .NormalText { text-decoration: none; font-weight: normal; font-style: normal; color: #094F71; font-size: 13px; line-height: 20px; font-family: Arial, Helvetica, sans-serif, Times New Roman; }

.Title		{ color: #042B07; font-size: 42px; font-weight: normal; font-family: Times New Roman, Times, serif; line-height: 1.5em; }
.Header		{ color: #042B07; font-size: 17px; font-weight: bold; font-family: Times New Roman, Times, serif; font-style: italic; }
.BlueHeader	{ color: #002946; font-size: 16px; font-weight: bold; font-family: Arial; line-height: 1.5em; }
.Subheader	{ color: #094F71; font-size: 14px; font-weight: bold; font-family: Arial; line-height: 1.5em; }

.DarkGreen	{ color: #042B07; }
.LightBlue	{ color: #A0B5D4; }
.Blue		{ color: #094F71; }
.DarkBlue	{ color: #002945; }
.Black		{ color: #000000; }
.White		{ color: #FFFFFF; }

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

IMG.FloatLeft 	{ float: left; margin: 0 10px 10px 0; }
IMG.FloatRight 	{ float: right; margin: 0 0 10px 10px; }
IMG.WhiteBorder { border: 10px solid #fff; }

table.teamTable		{ margin-bottom: 15px; }
table.teamTable td  { border-bottom: 1px solid #A0B5D4; padding: 10px 0; }

/* HEADERS ---------- */
.home h1.headline {padding-bottom: 25px; width: 530px; height: 65px; margin-left: -10px;}
h1.headline {width: 100%; display: block; overflow: hidden; text-indent: -999em; background-repeat: no-repeat; padding-bottom: 15px; height: 61px; background-position: top left;}
h2{color: #042b07; padding: 0 0 20px 0; font: bold 17px/20px "Times New Roman", Times, serif; font-style:italic;}
h3{color: #002946; font-size: 16px; font-weight: bold;}
h4 {font-size: 14px; font-weight:bold; padding-bottom: 5px;}

h2#phone-frankfort { position:absolute; top:345px; right:50px; font-size:18px; font-weight:normal; color:#2a5961; font-style:normal; font-family:Arial, Helvetica, sans-serif}
h2#phone-oak { position:absolute; top:235px; right:50px; font-size:18px; font-weight:normal; color:#2a5961; font-style:normal; font-family:Arial, Helvetica, sans-serif; z-index:2000}

#comments-callout { position:absolute; top:400px; right:40px;}
#comments-callout:hover { margin-top:1px;}


/* LISTS ---------- */
.the-game-room ul{list-style:none; list-style-image: none;}
ol, ul {padding:0 0 28px 20px; list-style-image: url(../images/bullet.jpg);}

/* LINKS ---------- */
a {color: #042b07; text-decoration: underline; }
a:visited{color: #042b07;text-decoration: underline; }
a:hover {color: #042b07; text-decoration: none; }
* #logo {position:absolute; top:0; left:98px; width: 382px; height: 192px; display: block; background: url(../images/logo.jpg) no-repeat 0 0; }
#logo a {display: block; width: 382px; height: 192px;}
* #sesame-link {color: #a0b5d4; font: 12px/16px Arial, Helvetica, sans-serif; text-align: right;}
#sesame-link a{color: #a0b5d4; font: 12px/16px Arial, Helvetica, sans-serif; text-decoration: underline}
#sesame-link a:visited{color: #a0b5d4; font: 12px/16px Arial, Helvetica, sans-serif; text-decoration: underline;}
#sesame-link a:hover{color: #a0b5d4; font: 12px/16px Arial, Helvetica, sans-serif; text-decoration: none;}

/* nav ---------- */
* #nav{position:absolute; top:275px; left:32px; padding:0; width:185px; height: 234px; display:block; z-index: 100;}
#nav a {display: block; overflow: hidden; text-indent: -999px;}
#nav ul{padding:0;}
* #home {background: url(../images/nav/home.jpg) no-repeat 0 0; height: 26px;width: 185px;}
* #about-our-office {background: url(../images/nav/office.jpg) no-repeat 0 0; height: 30px;width: 185px;}
* #current-events {background: url(../images/nav/current-events.jpg) no-repeat 0 0; height: 30px;width: 185px;}
* #contest-corner {background: url(../images/nav/contest-corner.jpg) no-repeat 0 0; height: 30px;width: 185px;}
* #for-new-patients {background: url(../images/nav/patients.jpg) no-repeat 0 0; height: 30px;width: 185px;}
* #about-orthodontics {background: url(../images/nav/ortho.jpg) no-repeat 0 0; height: 30px;width: 185px;}
* #about-braces {background: url(../images/nav/braces.jpg) no-repeat 0 0;height: 30px;width: 185px;}
* #treatment-options {background: url(../images/nav/options.jpg) no-repeat 0 0; height: 30px;width: 185px;}
* #emergency-care {background: url(../images/nav/care.jpg) no-repeat 0 0; height: 30px;width: 185px;}
* #contact-us {background: url(../images/nav/contact.jpg) no-repeat 0 0; height: 30px;width: 185px;}
#nav ul li:hover a, #nav li.sfhover a,#nav a:hover, #nav .active {background-position: -185px 0;}
#nav li.active a {background-position: -185px 0;}

/* DROP-DOWN-NAVIGATION ----------------*/
#nav li {display: inline; z-index:100; margin:0; padding:0;}
#nav li ul {margin: -30px 0 0 175px; padding:5px; width: 200px; position: absolute; background: #042b07; 	left: -999em; line-height: 25px; font-size: 14px; height: auto; border: 1px solid #25729e; font-weight: normal;}
#nav li ul a {list-style-image:none; padding: 0 0 0 10px; width: 190px; color: #fff; text-indent: 0;	text-decoration: none; height: auto;}
#nav li:hover ul, #nav li.sfhover ul {left: auto;display:block;z-index:100;}
#nav li:hover ul a:hover, #nav li.sfhover ul a:hover {text-decoration:underline;}

/* UTILITY NAV ---------- */
* #utility-nav {width: 245px; z-index: 100; position: absolute; top: 0; left: 758px;}
#utility-nav ul {list-style: none; padding: 0;}
#utility-nav li {float: left; display:inline;}
#utility-nav a {height: 42px; display: block; overflow: hidden; text-indent: -999em;}
* #patient-login {background: url(../images/nav/patient.jpg) 0 0;width: 118px;}
* #doctor-login {background: url(../images/nav/doctor.jpg) 0 0;width: 127px;}
#utility-nav ul li:hover a, #utility-nav li.sfhover a,#utility-nav a:hover, #utility-nav .active {	background-position: 0 -42px;}
#utility-nav li.active a{background-position: 0 -42px;}

#utility-nav li ul {margin: -30px 0 0 175px; padding:5px; width: 100px; position: absolute; background: #042b07; 	left: -999em; line-height: 25px; font-size: 14px; height: auto; border: 1px solid #25729e; font-weight: normal;}
#utility-nav li ul a {list-style-image:none; padding: 0 0 0 10px; width: 100px; color: #fff; text-indent: 0;	text-decoration: none; height: auto;}
#utility-nav li:hover ul, #utility-nav li.sfhover ul {left: -160px; top:60px;;display:block;z-index:100;}
#utility-nav li:hover ul a:hover, #utility-nav li.sfhover ul a:hover {text-decoration:underline;}

/* SUBNAV ----------------*/
* .sub_nav{color:#19411d; font-size: 12px; line-height: 20px;font-weight: bold;}
.sub_nav a{text-decoration: underline; color:#19411d; font-weight:bold; font-size:12px;}
.sub_nav a:visited {text-decoration: underline; color:#19411d; font-weight:bold;}
.sub_nav a:hover, .sub_nav a.active {font-weight:bold; text-decoration:none; color:#19411d;}

/* TEXT_NAV - FOOTER NAV ----------------*/
* .text_nav { color: #3c9884; font: normal 13px/16px Arial, Helvetica, sans-serif;}
.text_nav a { color: #3c9884; font-weight:normal; text-decoration: underline;}
.text_nav a:visited{ color: #3c9884; font-weight:normal; text-decoration: underline;}
.text_nav a:hover{ color: #3c9884; font-weight:normal; text-decoration: none;}	
 
/* LAYOUT ---------- */
* .clear{clear:both;}
* .hide {display:none;}
.flash-replaced .alt {display: block; width: 0px; height: 0px; position: absolute;	overflow: hidden;}

div.hr { background: #a0b5d4; clear: both; height: 1px; margin: 0 0 10px 0; width: 100%; }
div.hr hr { display: none; }

* #container {position: relative; width: 1003px; margin: 0 auto; background: url(../images/container-tile.png) repeat-y 0 0;}

* #oak-lawn-address {position: absolute; top: 175px; left: 796px; background: url(../images/oak-lawn-address.jpg) no-repeat 0 0; display: block; width: 169px; height: 78px;}
* #frankfort-address {position: absolute; top: 283px; left: 796px; background: url(../images/frankfort-address.jpg) no-repeat 0 0; display: block; width: 169px; height: 78px;}

* #aao-logo {width: 185px; height: 59px; display: block; background: url(../images/home-aao.jpg) no-repeat 0 0; position: absolute; top: 926px; left: 32px;}
#aao-logo a{width: 185px; height: 59px; display: block;}

* #abo-logo {width: 184px; height: 59px; display: block; background: url(../images/home-abo.jpg) no-repeat 0 0; position: absolute; top: 926px; left: 781px;}
#abo-logo a{width: 184px; height: 59px; display: block;}

* #bd {width: 1003px; background: url(../images/bd-bg.jpg) no-repeat 0 0; margin: 0 auto;}

* #content{width:514px; padding: 280px 209px 20px 242px; background:url(../images/content-bg.jpg) no-repeat bottom right; min-height: 555px; _height: 555px;}

* #spotlight {background-color: #E2E9F2; width: 530px; height: 281px; z-index:100; margin-left: -10px; margin-bottom: 30px;}

* #ft {background: url(../images/ft-bg.jpg) no-repeat 0 0; color: #f9fafc; font: normal 14px/16px "Times New Roman", Times, serif; margin: 0 auto; padding: 20px 108px 0 239px; text-align: left; width: 656px; height: 163px; position:relative;}

* #facebook {width: 41px; height: 43px; position: absolute; top: 29px; left: 96px; background: url(../images/facebook.jpg) no-repeat 0 0; display:block;}
#facebook a {display: block; width: 41px; height: 43px; text-indent:-999em; overflow:hidden;}

#social-icons {position: absolute;left:45px; top:590px; padding:0; width:160px; text-align:center;}
#social-icons img {width:42px; height:42px;}
/* Shortcuts ----------*/
/* Image Replacement -- add class="replace" to root element, i.e. <p> and add a bg image*/
* .replace {letter-spacing : -1000em;line-height: 0;overflow: hidden;line-height: 0;text-indent: -999em;}
/* Just for Opera, but hide from MacIE */

/*\*/html>body .replace {	letter-spacing : normal;text-indent : -999em;overflow : hidden;}
/* End of hack */

/* IMAGES ---------- */
img {border:none;}

/*right and left floating image with border*/
* .right {float:right; border: 10px solid #fff; margin-left:20px; margin-bottom:15px;}
.meet-the-orthodontist .left{border: 10px solid #fff;}
.invisalign .left{border: 1px solid #0757ad;}
.office-policies .left{border: 1px solid #0757ad;}
* .left {float:left; border: 1px solid #0757ad; margin-right:10px; margin-bottom:15px;}
* .borderless {border: none;}	
img.center {display:block; margin:0 auto 10px auto;}
* .place_image { float:right; margin: 0 0 10px 10px; padding:0; }
iframe {border: 10px solid #fff; margin-bottom:10px;}

/* --- OFFICE TOUR SLIDESHOW ---*/
* .slideshow { height: 382px; width: 512px; margin: 0 auto;}
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }


/* IE6 upgrade alert */
* #ie_alert {
display: none;
background-color: #fff;
width: 400px;
color: #333;
text-align: left;
font-size: 11px;
letter-spacing: normal;
font-weight: bold;
padding: 15px 15px 0 15px;
border: solid 2px #a52003;
position: absolute;
z-index: 5000;
top: 10px;
left: 10px;
}
#ie_alert ul {margin: 0 0 15px 25px;}
#ie_alert p {margin: 0 0 15px 0; line-height: 14px; padding: 0;}
a.upgrade {float: left; margin: 0 10px 0 0;}
span#ie_alert_reasons {color: #a52003;}

/* games */
div#sesame-game {background: #000; line-height: 0; margin: 10px auto 30px auto; text-align: center; width: 400px}
ul#sesame-games {list-style: none; margin: 0 18px 0 0; padding: 0}
ul#sesame-games li {clear: both; display: block}
ul#sesame-games img {border: 0; float: right; margin: 0 0 10px 10px}
ul#sesame-games a.button {float:right; height:85px; width:200px}
ul#sesame-games p { padding-bottom: 1em}

/* invisalign teen */
span.indent {
	padding-left: 40px;}
* #invisalign-sidebar {
	background: #fff;
	width: 275px;
	margin: 0 0 15px 15px;
	padding: 0;
	border: solid 1px #000;
	float: right;
	clear: right;}
#invisalign-sidebar a {
	color: #036;}
#invisalign-sidebar h3 {
	background: #97AFC2;
	margin: 0;
	padding: 15px;
	color: #fff;}
#invisalign-sidebar p {
	padding: 0 15px;
	margin: 15px 0;}
* .thumb {
	border: solid 1px #000;
	margin: 0 10px 10px 0;
	float: left;
	clear: left;}

/* in-ovation */
div.comparison {
	background: #fff; 
	border: 1px solid #a0b606; 
	display: inline-block; 
	margin-bottom: 10px; 
	clear: both;
	padding: 5px;}
div.comparison div {
	float: left; 
	width: 49%;}
* #video-in-ovation {
	width: 320px;
	height: 266px;}

/* the damon system */
* #damon-bracket {
display:block;
margin:0 auto 10px auto;}
* #damon-wrap {
width:400px;
margin:0 auto;}
* #damon-left {
float:left;
width:175px;
margin-right:20px;}
* #damon-right {
float:left;
width:170px;}
* #flash-damon-system-comparison {
margin:0 auto;
width:250px;}
* #video-the-damon-system {
margin: 0 15px 15px 0;
width: 240px;
height: 206px;
float: left;
clear: left;}
* #video-the-damon-system-2 {
margin: 0 15px 15px 0;
width: 400px;
height: 330px;
float: left;
clear: left;}

/* orthodontic treatments */
div.box {
	float: right;
	clear: right;
	width: 334px;
	background-color: #a0b5d4; /* Customize me! */
	padding: 5px 0 5px 5px;
	margin: 0 0 20px 20px;
	border: solid 1px #333; /* Customize me! */
	-moz-border-radius: 5px; /* Optional - you may customize or remove */
	-webkit-border-radius: 5px;
}
div.box img {
	float: left;
	border: solid 1px #333; /* Customize me! */
	margin-right: 5px;
}
div.box p {
	float: left;
	width: 50%;
	margin: 0;
	padding: 0;
}



/*-----------------------------------------------
	Forms
	*/
	/* Global form styles */
	div.referral-form, div.appointment-form, div.comments {
		width: 100%;
		margin-top: 18px;
		letter-spacing: normal;
	}

	fieldset {border: 0; padding: 9px 0;margin: 0 18px;}
		fieldset h2 {margin: 0 0 9px;}
		fieldset p {margin: 0 0 18px;}
		fieldset p.disclaimer {font-size: 90%; font-style: italic; margin: 0;}
		fieldset dl {}
			fieldset dl dt {font-size: 16px; clear: both; margin: 9px 0 0;}
				fieldset dd ul {margin: 9px 0;}
					fieldset dd ul li, fieldset dd ol li {list-style: none;}
					fieldset dd li {
						clear: both;
						margin: 3px 0;
						padding: 5px 0 4px 10%;
						overflow: auto;
						height: auto;
						position: relative;
						}
					fieldset dd li:hover {background: #d5e0eb;/* customize me - this is the hover color change of li */}
					fieldset dd li input:hover, fieldset dd li input:focus,
					 fieldset dd li select:hover, fieldset dd li select:focus,
					 fieldset dd li textarea:hover, fieldset dd li textarea:focus {
					 	background: #f1f1f1;/* customize me - this is the hover color change of form fields*/
					 	outline-color: #537197;/* customize me */
					 	}
						fieldset li h3 {font-size: 12px; line-height: 18px; margin: 0;}
						fieldset li div {float: left; display: inline-block; width: 40%; position: relative; padding-right: 5%;}
						fieldset li div.input-street {width: 85%;}
						fieldset li div.input-city {width: 60%;}
						fieldset li div.input-full-name {width: 85%;}
						fieldset li div.input-phone-full {width: 85%;}
						fieldset li div.input-email {width: 85%;}
						fieldset li div.input-zip {width: 20%;}
						fieldset li div.content-switch, fieldset li div.radio, fieldset li div.checkbox {width: 85%;}
							fieldset li div.radio input {border: none;}
							fieldset li div.radio label {padding-right: 9px; font-size: 90%;}
						/*fieldset li div.hidden-content, fieldset li.hidden-content {display: none;}*/
						fieldset li div.input-select-full {width: 85%;}
						fieldset li div.input-comments {width: 85%;}
							li div.input-comments textarea {height: 63px; overflow: auto;}
						fieldset li div.input-captcha {width: 50%;}
						fieldset li div.verification {width: 35%;}
							li div.verification img {
								border: 1px solid;
								margin-top: 9px;
								-moz-border-radius: 4px; /*for Moz, optional*/
								-webkit-border-radius: 4px; /*for Webkit Browsers, optional*/
								}
							fieldset li div label {
								line-height: 18px;
								font-weight: bold;
								margin-bottom: 9px;
								font-size: 80%;
								color: #537197;/*override to match site*/
								}
							fieldset li div input, fieldset li div textarea, fieldset li div select {
								display: block;
								line-height: 18px;
								width: 100%;
								border: 1px solid;
								padding: 4px 0 3px;
								text-indent: 4px;
								margin-top: 9px;
								-moz-border-radius: 4px; /*for Moz, optional*/
								-webkit-border-radius: 4px; /*for Webkit Browsers, optional*/
								}
							fieldset li div select {height: 25px;}
							fieldset li div.radio input {display: inline; width: auto; margin-right: 4px;}
							fieldset li div div {width: 100%;}
						fieldset dl dd.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*/
							display: block;
							width: 125px;
							height: 34px;
							text-align: center;
							margin: 0;
							background:#cfdae4;/* customize me! */
							border: 1px solid #537197;
							line-height: 34px;
							color:#537197;/* customize me! */
							font-size:12px;
							font-weight:bold;
							-moz-border-radius: 4px; /*for Moz, optional*/
							-webkit-border-radius: 4px; /*for Webkit Browsers, optional*/
							}





	/* appointment form
	* Styles only for the appointment request form
	*/


	/* comment form
	* Styles only for the comments form
	*/
	/*numbering added by jQuery*/
	fieldset ol li span.comment-number {
		font-size: 150%;
		color: #537197;/* customize me*/
		position: absolute;
		left: 9px;
		top: 9px;
	}


	/* referral form
	* Styles only for the referral form
	*/
	.referral-form fieldset li div.radio {width: 40%;}

	/* JQuery */
	input.error, select.error, textarea.error {border-color: #a52003; background: #fefda1;}
	div.error {
		background: url(../images/validate_error.gif) 0 0 no-repeat;
		color: #a52003;
		width: 18px;
		height: 18px;
		position: absolute;
		top: 0;
		right: 0;
		overflow: hidden;
		display: block;
		margin: 12px -2% 0 0;
		text-indent: -999em;}
	div.success {
		background: url(../images/validate_ok.gif) 0 0 no-repeat;
		width: 18px;
		height: 18px;
		position: absolute;
		top: 0;
		right: 0;
		overflow: hidden;
		display: block;
		margin: 12px -2% 0 0;
		text-indent: -999em;}

	.contact-form div.error, .contact-form div.success {margin-left: 0;}


/* GALLERY LIST */
/* IMPORTANT - This prevents a flash of unstyled content */
* #gallery { visibility: hidden; }

/* GALLERY CONTAINER */
* .gallery { background: #fff; border: 1px solid #333; padding: 10px; margin: 0; -moz-border-radius: 5px; -webkit-border-radius: 5px;}

/* LOADING BOX */
* .loader { background: url(../images/loader.gif) center center no-repeat #ddd; }

/* GALLERY PANELS */
* .panel {}

/* DEFINE HEIGHT OF PANEL OVERLAY */
/* NOTE - It is best to define padding here as well so overlay and background retain identical dimensions */
.panel .panel-overlay,
.panel .overlay-background { height: 25px; padding: 0 1em; }

/* PANEL OVERLAY BACKGROUND */
.panel .overlay-background { background: #222; }

/* PANEL OVERLAY CONTENT */
.panel .panel-overlay { color: white; font-size: 1em; }
.panel .panel-overlay a { color: white; text-decoration: underline; font-weight: bold; }

/* FILMSTRIP */
/* margin will define top/bottom margin in completed gallery */
* .filmstrip { margin: 5px; }

/* FILMSTRIP FRAMES (contains both images and captions) */
* .frame {}

/* WRAPPER FOR FILMSTRIP IMAGES */
.frame .img_wrap { border: 1px solid #aaa; }

/* WRAPPER FOR CURRENT FILMSTRIP IMAGE */
.frame.current .img_wrap { border-color: #000; }

/* FRAME IMAGES */
.frame img { border: none; }

/* FRAME CAPTION */
.frame .caption { font-size: 11px; text-align: center; color: #888; }

/* CURRENT FRAME CAPTION */
.frame.current .caption { color: #000; }

/* POINTER FOR CURRENT FRAME */
* .pointer {
	border-color: #000;
}

/* TRANSPARENT BORDER FIX FOR IE6 */
/* NOTE - DO NOT CHANGE THIS RULE */
*html .pointer {
	filter: chroma(color=pink);
}