/* CSS Document */



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



* {margin:0; padding:0;}



body {margin:0; background:#c3dbeb; font-family: Arial, Helvetica, sans-serif; font-size:13px; line-height:16px;}



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



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



a {color:#529cce;}



#footer a {padding-right:15px;}



a:hover {text-decoration:none;}



#content ul {color:#000000;}



#container { width:839px; margin-left:auto; margin-right:auto; }



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



#headerwrap {width:100%; background: url(images/header-bg.gif) repeat-x; overflow: hidden;}



#header {width:815px; background: url(images/header.jpg) no-repeat; overflow:hidden;}



#middle {width:100%; padding-bottom:0; background:url(images/tile.gif) repeat-y #FFF; overflow:hidden;}



#content {width:815px; background:url(images/tag.gif) no-repeat bottom left; overflow:auto;}



#col1 {float:left; width:182px; background:url(images/nav-bg.jpg) no-repeat; padding-bottom:350px;}



#col2 {float:left; width:615px;  padding:27px 0 40px 18px;}



#forms {padding:10px; background-color:#FFF; border:solid 2px #0b6eaf; width:200px; margin: 10px; float:right; clear:right;}



#footerwrap {margin-top:0; width:100%;border-top:#0067ac solid 1px; }



#footer {width:815px;  color:#5c5b5b; padding:10px 14px 10px 10px;background:#ffd204;}



#address {width:815px; text-align:right; padding:0; margin:-70px 0 0 0;  position:relative;}







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



h1 {background-repeat: no-repeat; height: 49px; width:549px; text-indent: -999em; margin: 28px 0 0 0; padding:0;}



h2 {color:#0067ac; font-size:13px; font-weight:normal;}



#footer h2 {color:#5c5b5b; font-size:13px; margin:0; padding:0;}



#address h3 {font-size:13px; font-weight:normal; color:#0067ac;}



#footer h3 {color:#529cce; text-align:right;}



h3 {font-size:12px; font-weight:normal; color:#000;}



h4 {font-size:12px; font-style:italic; font-weight:normal;}







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



#footer .sesame {color:#FFF; text-decoration:none;}



.img {margin:20px 0 0 0;}



.border {border:#0b6eaf solid 1px;}



.right {float:right;}



.top  {color:#e4a732; font-size:11px; font-weight:bold;}



.clear {clear:both}







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











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



ul#nav {list-style: none; padding: 97px 0 0 0; margin:0; width:182px; position:relative;}







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



#nav a {display: block; overflow: hidden; text-indent:-999em; width:182px}







/* Set the image for each nav item */



#aboutus {background: url(images/nav-about-us.jpg); height: 37px; }



#patientforms {background: url(images/nav-patient-forms.gif); height: 37px; }



#invisalign {background: url(images/nav-invisalign.jpg); height: 37px; }



#incognito {background: url(images/nav-incognito.jpg); height: 37px; }



#children {background: url(images/nav-children-braces.jpg); height: 37px; }



#adults {background: url(images/nav-adult-braces.jpg); height: 37px; }



#aboutorthodontics {background: url(images/nav-about-orthodontics.jpg); height: 37px; }



#braces101 {background: url(images/nav-braces-101.jpg); height: 37px; }



#emergencycare {background: url(images/nav-emergency-care.jpg); height: 37px; }



#thegameroom {background: url(images/nav-the-game-room.jpg); height: 37px; }

#new-patient-appointment-request {background: url(images/nav-new-patient-appointment-request.jpg); height: 53px; }

#giving-back {background: url(images/nav-giving-back.jpg); height: 37px; }







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



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



#nav li:hover #aboaboutus, #nav li.sfhover #aboutus, 



#nav li:hover #patientforms, #nav li.sfhover #patientforms, 



#nav li:hover #aboutorthodontics, #nav li.sfhover #aboutorthodontics, 

#nav li:hover #giving-back, #nav li.sfhover #giving-back, 

#nav li:hover #braces101, #nav li.sfhover #braces101, 



#nav li:hover #emergencycare, #nav li.sfhover #emergencycare, 



#nav li:hover #thegameroom, #nav li.sfhover #thegameroom {background-position:-182px 0pt;}







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



#nav .active {cursor: default}

/* sub nav */

#nav li ul {left:137px;margin-top:-31px;visibility: hidden; /*font-size: 0.8em;*/ border: solid 1px #2b3f48;position: absolute;list-style-type: none;text-indent:0; background:#FFFFFF}
#nav li ul li {text-indent:0;float: none;width: auto;display:inline;}
#nav li:hover ul, #nav li.sfhover ul {visibility: visible; text-indent:0;}
#nav li ul li a, #nav li ul li a {display: block;background: #fff;padding: 3px;height:auto;color: #000;width:12em; text-indent:0;}
#nav li ul li a:hover, #nav li ul li a:hover {background: #1c78b4;color:#ffd204;text-indent:0;}










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



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







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



#logo a {display: block; height: 157px; width:447px; 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: 38px; width:332px; list-style: none; padding:120px 0 0 0; margin:0; float:left; overflow:hidden;}







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







/* Set the image for each nav item */



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



#doctorlogin {background: url(images/nav-doctor-login.gif);width:87px;}



#home {background: url(images/nav-home.gif);width:88px;}



#findus {background: url(images/nav-find-us.gif);width:78px;}







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



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



#logins li:hover #home, #logins li.sfhover #home,  



#logins li:hover #findus, #logins li.sfhover #findus  {background-position:0 -38px;}



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



#logins .active {cursor: default}











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



div#sub {width: 454px; margin:0 0 0 0; padding:0 0 40px 95px; overflow:auto; background:url(images/more-in-this-section.gif) no-repeat;}







* html div#sub {margin-right: 0px;}







/* for IE6*/



div#sub ul {list-style: none; padding:0; margin:0; color:#529cce; }







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







#sub li {display: inline; white-space: nowrap; padding:0; margin:0; }



#sub a {color:#529cce; }







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



#sub a:hover, #sub .active {text-decoration:none;}







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



#sub .active {cursor: default}







div#sesame-game {



background: #000;



line-height: 0;



margin: 10px auto;



text-align: center;



width: 400px; color:#000;}







ul#sesame-games {



list-style: none;



margin: 0;



padding: 0}







ul#sesame-games li {



clear: both;



display: block; color:#000;}







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}











.left {



float:left;



margin:0 10px 10px 0;}



img.right {



float:right;



margin:0 0 10px 10px;}



.clear {



clear:both;}



h2.media-center {



background:#000033;



color:#FFF;



margin:0;



padding:5px;}



div.media-center {



background:#336699;



color:#FFF;



display:inline-block;



margin-bottom:10px;



overflow:auto;



padding:10px;}



div.media-center a {



color:#FFF;}



div.media-center img {



border:1px solid #FFF;}

/* Global form styles */
div.referral-form, div.appointment-form, div.comments, div.login-form {
	width: 88%;
	margin-top: 18px;	
	border:solid 0px #002544;/*optional, change color to match site*/
	background: #ffffff;
}

fieldset {border: 0; padding: 9px 0;color: #002544; margin: 0 18px;}
fieldset div {clear: both;}
.form-header {color: #002544; border-bottom: 1px solid #002544;/*optional, change color to match site*/}
.form-header h3 {margin: 0 0 9px;}
.form-header p {margin: 0 0; padding-bottom: 18px;}
.form-footer {padding-top: 18px; text-align: center; border-top: 1px solid #c6dbed;/*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:#c6dbed;/* customize me! */
	border: 1px solid #002544;
	text-align:center;
	line-height:31px;
	color:#002544;/* customize me! */
	font-size:12px;
	font-weight:bold;}
fieldset input, fieldset textarea, fieldset select {line-height: 18px; height: 18px; padding: 4px 9px 5px 9px; border: 1px solid #002544;}
fieldset input.radio {border: 0;}
fieldset p.verification img {border: 1px solid #002544;}
fieldset label {margin-top: 9px;}
fieldset label, label span {text-align: left; line-height: 18px; height: 18px;}
label.required {background: url(../images/required_note.gif) 100% 0 no-repeat;}
p.required-note {font-weight: bold;}
p.required-note img {display: inline;}
p.radio-float, p.radio-float input {line-height: 27px; vertical-align: middle;}


/* appointment form */
.appointment-form {
	margin: 18px 0;
	padding: 10px;
}
.appointment-form fieldset {border: 0; }
.appointment-form label {/*floats labels left*/
	font-size: 12px;
	display:block;
	font-weight:bold;
	width:45%;
	float:left;
	margin-top: 9px;
	line-height: 18px;
	}
.appointment-form label span {/*sits below labels; holds instructions*/
	color:#666666;
	display:block;
	font-size:11px;
	font-weight:normal;
	width:100%;}
.appointment-form input, .appointment-form select, .appointment-form textarea {
	float:left;
	font-size:12px;
	padding:0 2px;
	width:45%;
	margin:9px 0 9px 2%;
	background: #ffffff;}
.appointment-form p.radio, .appointment-form p.verification {
	clear: both;
	margin: 9px 0 9px 47%;
	font-size: 12px;}
.appointment-form p.radio-float {
	clear: none;
	float:left;
	width: 45%;
	padding:0;
	margin:9px 0 9px 2%;
	vertical-align: middle;
	line-height: 18px;}
.appointment-form span#found-other {width: 100%;}
.appointment-form span#found-other input {margin-left: 47%; background: #fff0b2}
.appointment-form p.verification {margin-top: 0;}
.appointment-form p.radio input, .appointment-form p.radio-float input {
	float: none;
	width: auto;
	margin: 0 0 0 2%;
	padding: 4px 2px;}

/* JQuery */
input.error, select.error, textarea.error {border-color: #a52003; background: #fefda1; }
div.error {padding-left: 18px; background: url(../images/validate_error.jpg) 0 0 no-repeat; color: #a52003; 
		 display: block; margin:0 0 9px 47%; font-size: 11px; font-weight: normal; line-height: 18px;}
div.success {padding-left: 18px; background: url(../images/validate_ok.jpg) 0 0 no-repeat; color: #000000; 
		   display: block;margin:0 0 9px 47%;font-size: 11px; font-weight: normal; line-height: 18px;}
.contact-form div.error, .contact-form div.success {margin-left: 0;}