/* HTML, BODY ---------- */
html {height: 100%;}
body {background: #e6f0e9; margin: 0;}
* {margin:0; padding:0;}

/* TEXT ---------- */
body {color: #000; font: 12px/20px Tahoma, Helvetica, sans-serif; text-align:left;}
p {	padding: 0px 0 15px 0px;}
.purple {color:#931b95;}
.teal {color:#1b9481;}

/* HEADERS ---------- */
/* jcIR Styles --------- */
h1 {height: 36px; font-weight:bolder; text-align: left; font-size: 26px; padding: 23px 0 15px 0; margin: 0 0 0 -2px; width: 335px;}
h2{color: #1b9481; padding: 0 0 15px 0; font-size: 14px;}
h3{color: #931b95; padding: 0; font-size: 12px;}

/* LISTS ---------- */
ol, ul {padding:0 0 10px 20px;}

/* LINKS ---------- */
a {color: #931b95; text-decoration: underline}
a:visited {color: #931b95; text-decoration: underline}
a:hover {color: #931b95; text-decoration: none; font-weight:normal;}
#logo {position:absolute; top:16px; left:45px; width: 345px; height: 110px; display: block; background: url(../images/logo.jpg) no-repeat 0 0; }
#logo a {width: 345px; height: 110px; display: block; }

/* nav ---------- */
#nav{position:absolute; top:198px; left:57px; background: url(../images/nav-bg.gif) no-repeat 0 0; padding:22px 0 0 0; width:215px; height: 344px; display:block; z-index: 100;}
#nav a {display: block; height: 30px; overflow: hidden; text-indent: -999px; width: 215px;}
#nav ul{padding:0; list-style:none;}
#patient-login {background: url(../images/nav/patient.gif) 0 0; }
#doctor-login {background: url(../images/nav/doctor.gif) 0 0; margin-bottom: 6px;}
#about-our-office {background: url(../images/nav/office.gif) 0 0; }
#about-orthodontics {background: url(../images/nav/ortho.gif) 0 0; }
#faq {background: url(../images/nav/faq.gif) 0 0; }
#about-braces {background: url(../images/nav/braces.gif) 0 0; }
#treatment-options {background: url(../images/nav/treatment.gif) 0 0;}
#emergency-care {background: url(../images/nav/emergency.gif) 0 0; }
#contact-us {background: url(../images/nav/contact.gif) 0 0;}
#home {background: url(../images/nav/home.gif) 0 0; }
#nav ul li:hover a, #nav li.sfhover a,#nav a:hover, #nav .active {background-position: -215px 0;}
#nav li.active a {background-position: -215px 0;}

/* DROP-DOWN-NAVIGATION ----------------*/
#nav li {display: inline; z-index:100; margin:0; padding:0;}
#nav li ul { /* second-level lists */margin: -30px 0 0 215px; padding:0; width: 170px; position: absolute;background: #F5F5DC; left: -999em; line-height: 26px; font-size: 12px; height: auto;  border-top: 1px solid #086121; border-right: 1px solid #086121; border-bottom: 1px solid #086121;	}
#nav li ul a {list-style-image:none; padding: 0 0 0 20px; width: 150px; text-indent: 0; text-decoration: none; height: auto; color:#086121;}
#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 {color: #F5F5DC; background: #086121;}

/* SUBNAV ----------------*/
.sub_nav {color: #931b95; font-weight:bold;}
.sub_nav a:hover, .sub_nav a.active {font-weight:bold; text-decoration:none;}

/* SUBNAV ----------------*/
#util ul{display:inline; margin-left: 20px;}
#util li{float: left; padding-right: 10px;}

/* LAYOUT ---------- */
.clear{clear:both;}
.hide {display:none;}
.flash-replaced .alt {display: none;}
div.hr { background: #7EA47B; clear: both; height: 1px; margin: 10px 0; width: 100%; }
div.hr hr { display: none; }
#main {position: relative; background: url(../images/main-tile.gif) repeat-y; width: 980px; margin: 0 auto; padding-bottom: 10px;}
#header {height: 198px; width: 980px; display:block; background: url(../images/header-bg.jpg) no-repeat 0 0;}
#welcome-text {background: url(../images/welcome-text.jpg) no-repeat 0 0; width: 895px; height: 80px; display: block; position: absolute; top: 118px; left: 0;}

#social{ position: absolute; top: 564px;left: 75px; margin-left: 10px;}
#office-address{font-size: 12px; position: absolute; top: 620px;left: 75px;line-height:18px; color:#fff; }
#office-address a{color: #fff; text-decoration:none;}
#office-address a:visited{color: #fff; text-decoration:none;}
#office-address a:hover{color: #fff; text-decoration:underline;}
.home #text{padding-top: 360px; min-height: 0; _height: 0;}
#text{background: url(../images/text-bg.jpg) no-repeat top right; width:586px; padding: 0 54px 0 324px;	min-height: 780px; _height: 780px;}
#flash-home{position:absolute; top:198px; left:50%; margin: 0 0 0 -169px; z-index:1;}
#tagline{background: url(../images/tagline.gif) no-repeat bottom center; display: block; width: 586px; height: 45px; border-top: 1px solid #60c5b7; padding: 20px 0 0 0; margin-bottom: 20px;}

/* FOOTER ---------- */
#column1{width: 175px; padding-right: 55px; float: left;}
	#column1 h2{text-indent: -999em; background: url(../images/titles/footer-locations.gif) no-repeat 0 0; display: block; width:104px; height: 16px; margin: 0; padding-bottom:5px;}	
	#column1 h3{text-indent: -999em; background: url(../images/titles/footer-contact.gif) no-repeat 0 0; display: block; width:89px; height: 16px; margin: 0; padding-bottom:5px;}
#column2{width: 163px; padding-right: 60px; float: left;}
	#column2 h2{text-indent: -999em; background: url(../images/titles/footer-email.gif) no-repeat 0 0; display: block; width:85px; height: 16px; margin: 0; padding-bottom:5px;}
#column3{width: 170px; padding-right: 49px; float: left;}
	#column3 h2{text-indent: -999em; background: url(../images/titles/footer-treatments.gif) no-repeat 0 0; display: block; width:119px; height: 16px; margin: 0; padding-bottom:5px;}
	#column3 h3{text-indent: -999em; background: url(../images/titles/footer-help.gif) no-repeat 0 0; display: block; width:119px; height: 16px; margin: 0; padding-bottom:5px;}	
#column4{width: 162px; padding-right: 0px; float: left;}
	#column4 h2{text-indent: -999em; background: url(../images/titles/footer-patient-info.gif) no-repeat 0 0; display: block; width:128px; height: 16px; margin: 0; padding-bottom:5px;}
#footer {background: url(../images/footer-bg.jpg) no-repeat 0 0; color: #6d2449; padding: 80px 60px 20px 60px; text-align: left; margin: 0 auto; width:860px;}
.line {background: #086121; height: 1px; margin: 0 0 5px 0; width: 100%;}
.line hr {display:none;}
#footer p{font-size:11px; line-height:18px;}
#footer a {font-weight:bold; text-decoration: underline;}
#footer a:visited {font-weight:bold; text-decoration: underline;}
#footer a:hover {font-weight:bold; text-decoration: none;}
.sesame a{color: #6d2449; }
.sesame a:visited{color: #6d2449; }
.sesame a:hover{color: #6d2449; }
.text_nav {font-weight:bold;}
/***IE 6 7 HACK ***/
*html .text_nav {margin-top: -60px;}
*+html .text_nav {margin-top: -60px;}

.text_nav a{color: #6d2449; }
.text_nav a:visited{color: #6d2449; }
.text_nav a:hover{color: #6d2449; }
.subnav {font-size: 13px; line-height:18px;}
.subnav a{color: #fff;}
.subnav a:visited{color: #fff;}
.subnav a:hover{color: #fff;}
.subnav ul{list-style:none; padding-bottom: 20px; padding-left: 10px;}


/* 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 */

/* RESOURCES ---------- */
dl.logos, dl.logos dt, dl.logos dd {list-style:none;margin:0;padding:0;}
dl.logos {padding:10px;}
dl.logos dd {border-bottom:1px solid #CCC;margin:0;padding:10px 0 5px 0;width:50%;}
dl.logos span {font-size: 16px; font-weight:bold;}

/* IMAGES ---------- */
img {border:none;}

/*right and left floating image with border*/
.right {float:right; border: 1px solid #931b95; margin-left:10px; margin-bottom:10px;}
.left {float:left; border: 1px solid #931b95; margin-right:10px; margin-bottom:10px;}
.left-borderless {float:left; border: none; margin-right:10px; margin-bottom:10px;}
img.center {display:block; margin:0 auto 10px auto;}
.place_image { float:right; margin: 0 0 20px 20px; padding:0; }
iframe {border: 1px solid #931b95; margin-bottom:20px;}

/* THE GAME ROOM ---------- */
div#sesame-game {line-height: 0; margin: 10px 0px 18px 0px; text-align: center;  width: 400px;background: #000;}
ul#sesame-games {list-style: none;}
ul#sesame-games li {clear: both; text-indent:none;}
ul#sesame-games img {border: 0; float:right;}
ul#sesame-games a.button {float:right; height:85px; width:200px; margin-right:10px; padding: 0 0 10px 10px;}/*THIS IS WHERE YOU MAKE PADDING ADJUSTMENTS TO THE GAMES IMG*/
ul#sesame-games p {	padding:0 10px 10px 0;}

/* Mini-Contact Form */
.contact-form-mini {
	margin: 0;	
	width: 100%; 
	padding: 9px 0 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-family:Tahoma, Verdana, sans-serif;
	font-size:13px;
	color: #a6a6a6;
	padding:1px 3px 1px 0;
	border:solid 1px #6d2449;
	width:159px;
	margin:3px 0;
	background: #fff;
	text-align: right;}
.contact-form-mini button {/*these styles control the look of the button, change as necessary*/
	font-size: 11px;
	font-weight: bold;
	padding:0 0 3px 0 ;
	margin: 0;/*do not change, controls positioning*/
	float: right;
	display: block;
	width:95px;
	height: 22px;
	color: #fff;
	background-color: #6d2449;
	text-align: center;
	border: none;}
.contact-form-mini button:hover {background-position: 0 0;}
.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; 
background: #232366 url(../images/form-success-bg.jpg) 0 100% repeat-x; 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;}

/* Errors */

/* JQuery */
input.error, textarea.error {border: 1px solid #ff0000; background: #fefda1; color: #ff0000;}
div.error {padding-left: 18px; background: #ffffff url(../images/validate_error.jpg) 0 0 no-repeat; color: #ff0000; 
		 display: block;margin:0 0 9px 50%;font-size: 11px;line-height: 18px;}
#html-contact-form div.error {width: 145px; margin: 0 0 3px 0;}
div.success {padding-left: 18px; background: #ffffff url(../images/validate_ok.jpg) 0 0 no-repeat; color: #000000; 
		   display: block;margin:0 0 9px 50%;font-size: 11px;line-height: 18px;}

/* --- DOCTOR SLIDESHOW ---*/
#slideshow { clear: both; padding: 0px; text-align: center; border:  10px solid #eee; background-color: #eee;  width:  500px; height: 350px; } 
#slideshow img {border:none;} 
#slideshow-nav ul{padding:0;}
#slideshow-nav li {list-style: none; display: inline; margin: 0; padding: 0;}
#slideshow-nav li a {float: left; display: block; width: 80px; height: 50px; margin: 8px; border: 1px solid #a69d80;}
#slideshow-nav li a:hover, #slideshow-nav li a.active {border-color: #4396f8;} 
h3#caption {
	text-align: center;
	margin: 0 18px;
}
