/* Reset */
* {margin: 0 ; padding: 0;}

/* Layout */
body {background: #faeed3 url(../images/body-bg.gif) no-repeat center 159px;}
.wrap {width: 778px; margin: 0 auto; position: relative;}
#banner {background: url(../images/banner-bg.jpg) repeat-x; height: 159px;}
#content {width: 550px; margin: 0 0 20px 33px; float: left;}
#nav-wrap {width: 195px; float: left;}
.rounded {background: #e8dabd; margin: 30px 0;}
#footer {background: #4e3f2b url(../images/footer-bg.jpg) repeat-x; min-height: 185px; margin: 0; padding: 15px 0 0 0; clear: both;}

.right {float: right;}
.left {float: left;}
.cr {clear: right;}
.cl {clear: left;}
.hide {display: none;}
.staff {padding: 25px 25px 0 25px; margin: 15px 0 0 0; border: solid 1px #93ab65; border-width: 1px 0 0 0; float: left;}

div.hr {margin: 18px 0; height: 1px; border: solid 1px #E8DABD; border-width: 1px 0 0 0; background-color: #fff; clear: both;}
div.team {margin: 0 0 15px 15px; float: right;}

/* Images */
img, a {border: none; outline: none;}
.photo {margin: 5px 0 15px 15px; float: right; clear: right;}
.img-border {border: solid 1px #93ab65;}
.img-right {float: right; margin: 0 0 15px 15px; clear: right;}
.img-left {float: left; margin: 0 15px 15px 0; clear: left;}
.img-left-border {border: solid 1px #8a704d; margin: 5px 15px 15px 0; float: left; clear: left;}
.img-right-border {border: solid 1px #8a704d; margin: 5px 0 15px 15px; float: right; clear: right;}
.img-center-border {border: solid 1px #8a704d; margin: 10px auto; display: block;}
.img-center {margin: 10px auto; display: block;}

.layout {display: block;}
.callout {margin: 15px 0 0 25px;}
.logo {background-color: #fff; padding: 10px;}
.ribbon {margin-left: 35px;}
.social {margin-right: 20px;}

.sidebar {background: #fff; width: 250px; display: block; border: solid 1px #8a704d; float: right; margin: 5px 0 15px 15px; padding: 10px;}

/* Typo */
body {font-size: 100%; font-family: Arial, Helvetica, sans-serif;}
.wrap {font-size: .75em; line-height: 1.5em;}
#content {color: #000; font-weight: normal;}
#footer {color: #faeed3; text-align: center; font-size: .92em;}
.rounded p {color: #69553a; padding: 10px 20px; margin: 0;}
.text_nav {color: #faeed3; text-align: center; margin: 10px 0;}
.sub_nav {color: #04749b; margin: 0 0 18px 0; padding: 0 0 15px 0; border: solid 1px #93ab65; border-width: 0 0 1px 0;}
p.sesame {margin: 0; padding: 0;}
p {margin: 0 0 18px 0;}

/* Links */
a {color: #04749b;}
a:hover, .sub_nav a.active {color: #69553a;}
.sub_nav a {color: #04749b; font-weight: bold;}
.sub_nav a.active {cursor: default;}
.text_nav a, p.sesame a {color: #faeed3; text-decoration: none;}
.text_nav a:hover, p.sesame a:hover {color: #f1ead5; text-decoration: underline;}
.top-link {background: url(../images/top-link.png) no-repeat 0 4px; padding-left: 20px; clear: both;}

/* Headings */
h1, h1.jcir {font-size: 1.83em; font-weight: normal; margin: 30px 0 18px 0; clear: both; font-family: Georgia, "Times New Roman", Times, serif; color: #04749b;}
h2 {font-size: 1.17em; font-weight: bold; margin: 0 0 10px 0; color: #886f4b;}
h3 {font-size: 1em; margin: 0; font-weight: bold; color: #886f4b;}
h4 {font-size: 1em; color: #fff; font-weight: normal; margin: 10px 0 5px 25px; padding: 0;}
h1.logo {background: url(../images/banner.gif) no-repeat; width: 100%; height: 159px; margin: 0; padding: 0;  position: relative; text-indent: -999em; overflow: hidden; border: none;}
h1.logo a {width: 100%; height: 159px; display: block;}
h1.replaced {/* jcIR plugin wraps text in div named replaced and hides it */
	overflow: hidden; 
	text-indent: -999em; 
	background-repeat: no-repeat;
}
h1#title-home {height: 73px;}

/* Flash */
.flash {width: 500px; margin: 10px auto;}
#flash-homepage {margin: 0;}
.notice {width: 80%; background: #e4e4e4; font-size: 1em; text-align: left; margin: 50px auto; padding: 10px; border: solid 1px #000; overflow: auto;}
.flash-replaced .alt {display: block; height: 0px; position: absolute; z-index: 5; overflow: hidden; width: 0px;}
#video-clear-braces {width: 352px; margin: 10px auto;}

/* Lists */
ul, ol {margin: 0 0 15px 30px;}

/* Side Navigation */
#nav ul {width: 195px; margin: 20px 0 0 0; padding: 0; list-style: none;}
#nav ul li {margin: 0; height: 31px; padding: 0; list-style: none; display: inline;}
#nav ul li a {width: 195px; height: 31px; display: block; text-decoration: none; text-indent: -999em; overflow: hidden;}

#patient-login {background: url(../images/nav/patient-login.png); margin-bottom: 10px;}
#about-our-office {background: url(../images/nav/about-our-office.png);}
#about-orthodontics {background: url(../images/nav/about-orthodontics.png);}
#faq {background: url(../images/nav/faq.png);}
#about-braces {background: url(../images/nav/about-braces.png);}
#treatment-options {background: url(../images/nav/treatment-options.png);}
#emergency-and-remedies {background: url(../images/nav/emergency-and-remedies.png);}
#contact {background: url(../images/nav/contact.png);}
#home {background: url(../images/nav/home.png);}

#nav a:hover, #nav li.active a,
#nav li:hover #patient-login, #nav li.sfhover #patient-login,
#nav li:hover #about-our-office, #nav li.sfhover #about-our-office,
#nav li:hover #about-orthodontics, #nav li.sfhover #about-orthodontics,
#nav li:hover #faq, #nav li.sfhover #faq,
#nav li:hover #about-braces, #nav li.sfhover #about-braces,
#nav li:hover #treatment-options, #nav li.sfhover #treatment-options,
#nav li:hover #emergency-and-remedies, #nav li.sfhover #emergency-and-remedies,
#nav li:hover #contact-us, #nav li.sfhover #contact-us,
#nav li:hover #home, #nav li.sfhover #home {background-position: 0 -31px;}

/* Subnav */
#nav ul ul {margin: 0; padding: 0;}
#nav ul ul li.first a {margin-top: 10px;}
#nav ul ul li.last a {margin-bottom: 20px;}
#nav ul ul a {color: #04749b; text-indent: 1.17em; height: 1.50em; font-weight: bold; display: block;}
#nav ul ul a:hover {text-decoration: underline;}
#nav ul ul li.active a {text-decoration: underline; cursor:default;}



.clear {clear: both;}
.cf:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.cf {display: inline-block;} /*this trips hasLayout for ie7*/
.cf {display: block;} /*this returns it back to normal*/
* html .cf {height: 1px;}



/* Global form styles */
div.referral-form, div.appointment-form, div.comments, div.login-form {
	width: 98%;
	margin-top: 18px;	
	border:solid 2px #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;}

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

/* 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;}