/* reset */
* {margin:0;padding:0;}
html, body, * #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

* #bd {padding-bottom: 387px;}  /* must be same height as the footer */

* #ft {
	position: relative;
	margin-top: -387px; /* negative value of footer height */
	height: 387px;
	clear:both;
	background-image: url(../images/footer-bg.jpg);
	background-repeat: repeat-x;
	background-position: left top;
} 

/* CLEAR FIX*/
* .clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
* .clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
* .clearfix {display: block;}
/* End hide from IE-mac */

body {
	line-height:1.5em;
	background-color: #FFF;
	background-image: url(../images/page-bg.jpg);
	background-repeat: repeat-x;
	font-family: arial, verdana, helv, helvetica, sans-serif;
	font-size: 12px;
}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;}

a img {border:none;}
* .hide {display:none;}
.flash-replaced .alt {display:none;}
a {
	color:#019494;}
a:hover {
	text-decoration: none;
	color: #8BAC03;
}
/* LAYOUT */
* #video-speed-braces {border: 1px solid #CDD7B6; height:282px; width:368px;}
* #wrap {
	background-image: url(../images/wrap-bg.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	width: 100%;
	position: relative;
}
* #container {
	position: relative;
	width: 870px;
	margin-right: auto;
	margin-left: auto;
}
* #hd {
	padding-top: 18px;
	text-indent: -9999px;
	display: block;
}
.home #hd {
	height:310px;}
* #logo {z-index:10;}
#logo a {
	background-image: url(../images/logo.jpg);
	display: block;
	height: 206px;
	width: 268px;
	background-repeat: no-repeat;
	background-position: left top;
	z-index: 100;
}
* #tag {
	background-image: url(../images/callout-expresssmile.png);
	background-repeat: repeat;
	height: 90px;
	width: 263px;
	position: absolute;
	z-index: 100;
	top: -120px;
	right: 20px;

}
.home #sidebar {
	position: absolute;
	right: 10px;
	width: 200px;
	top: 700px;
	z-index: 12;
}
* #sidebar {
	position: absolute;
	right: 10px;
	width: 200px;
	top: 700px;
	z-index: 12;
}
.meet-the-orthodontists #sidebar, .meet-the-team #sidebar, .office-tour #sidebar, .braces-in-action #sidebar, .fun-and-games #sidebar {
		top: 500px;
}
* #bd {
	background-image: url(../images/bd-bg.png);
	background-repeat: repeat-y;
	background-position: center top;
	margin-top: 40px;
	z-index: 5;
}
* #content {
	background-image: url(../images/content-bg-trans.png);
	background-repeat: no-repeat;
	background-position: center top;
	padding-top: 100px;
	padding-left: 46px;
	padding-right: 254px;
	position: relative;
	top: -23px;
	min-height:650px;
	height:auto !important;
	height:510px;
	z-index: 6;

}
* #memberships {
	width: 740px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 20px;
	height: 140px;
}
#memberships li {
	display: inline;
	text-indent: -9999px;
}
#memberships #logoa a, #memberships #logob a, #memberships #logoc a, #memberships #logod a {
	display: block;
	float: left;
	margin-right: 40px;
	margin-left: 40px;
	background-repeat: no-repeat;
	background-position: center top;
}
#memberships #logoa a {
	background-image: url(../images/ft-logoa.png);
	height: 70px;
	width: 135px;
	background-position: left top;}
#memberships #logoa a:hover {
	background-position: left top;
}
#memberships #logob a {
	background-image: url(../images/ft-logob.png);
	background-position: left top;
	height: 70px;
	width:65px;
}
#memberships #logob a:hover {
	background-position: left top;
}
#memberships #logoc a {
	background-image: url(../images/ft-logoc.png);
	background-position: left top;
	height: 70px;
	width: 120px;
}
#memberships #logoc a:hover {
	background-position: left top;
}
#memberships #logod a {
	background-image: url(../images/ft-logod.png);
	background-position: left top;
	height: 70px;
	width: 100px;
}
#memberships #logod a:hover {
	background-position: left top;
}
/*Header Appointment Button*/
#appointment a {
	background-image: url(../images/callout-schedule.png);
	height: 117px;
	width: 133px;
	display: block;
	position: absolute;
	top: 80px;
	right: 28px;
	background-repeat: no-repeat;
	background-position: -167px top;
	text-indent: -9999px;
	z-index: 100;
	overflow:hidden;
}
#appointment a:hover {
	background-position: -468px top;
}
#rewards-card a {
	background-image: url(../images/callout-schedule.png);
	height: 117px;
	width: 167px;
	display: block;
	position: absolute;
	top: 80px;
	right: 160px;
	background-repeat: no-repeat;
	background-position: left top;
	z-index: 100;
	overflow:hidden;
}
#rewards-card a:hover {
	background-position: -301px top;
}
/* Video Button*/
#welcomevideo a {
	background-image: url(../images/welcomevideo.png);
	height: 91px;
	width: 161px;
	display: block;
	position: absolute;
	top: 150px;
	right: 45px;
	background-repeat: no-repeat;
	background-position: left top;
	text-indent: -9999px;
	z-index: 10;
}
#welcomevideo a:hover {
	background-position: right top;
}
#faqvideo a {
	background-image: url(../images/qandavideo.png);
	height: 99px;
	width: 169px;
	display: block;
	background-repeat: no-repeat;
	background-position: left top;
	text-indent: -9999px;
	z-index: 10;
	position: absolute;
	top: 200px;
	right: 250px;
}
#faqvideo a:hover {
	background-position: left bottom;
}
/*Social Links */
.home #social {
	position: absolute;
	top: 620px;
	right: 36px;
	z-index: 12;
}
.meet-the-orthodontists #social, .meet-the-team #social, .office-tour #social, .braces-in-action #social, .fun-and-games #social {
		top: 400px;
}
* #social  {
	position: absolute;
	top: 610px;
	right: 36px;
	z-index: 12;
	background-image: url(../images/follow-us.png);
	background-repeat: no-repeat;
	background-position: left top;
	padding-top: 40px;
}
#social li {
	display: inline;
}

#social .facebook a, #social .twitter a, #social .youtube a {
	background-repeat: no-repeat;
	background-position: left top;
	height: 38px;
	width: 37px;
	display: block;
	text-indent: -9999px;
	float: left;
	padding-right: 10px;
	padding-left: 10px;
}

#social .facebook a {
	background-image: url(../images/ico-facebook.png);
}
#social .facebook a:hover {
	background-image: url(../images/ico-facebook.png);
	background-position: left bottom;
}

#social .twitter a {
	background-image: url(../images/ico-twitter.png);
}
#social .twitter a:hover {
	background-image: url(../images/ico-twitter.png);
	background-position: left bottom;
}

#social .youtube a {
	background-image: url(../images/ico-youtube.png);
}
#social .youtube a:hover {
	background-image: url(../images/ico-youtube.png);
	background-position: left bottom;
}

/*Top menu */
* #topmenu {
	position: absolute;
	top: 0px;
	right: 20px;
}
#topmenu li {
	display: inline;
	list-style-type: none;
}

/*Footer*/
* #ft {
	text-align: center;
}
#ft .text_nav {
	clear: both;
	padding-top: 20px;
	width: 800px;
	margin-right: auto;
	margin-left: auto;
	color: #4C4C4C;
}
#ft .text_nav a {
	color: #98e5fe;
	text-decoration: none;
}
#ft .text_nav a:hover {
	color: #FFF;
}

#ft h4 {
	width: 800px;
	margin-right: auto;
	margin-left: auto;
	font-size: 12px;
	font-style: italic;
	color: #FFF;
}
#ft p {
	width: 800px;
	margin-right: auto;
	margin-left: auto;
}
#ft #sesame-link  {
	color: #cdd7b6;
	text-decoration: none;
}
#ft #sesame-link:hover  {
	color: #FFF;
	text-decoration: none;
}
/*TYPOGRAPHY*/
h1, h2, h3, h4, h5 {}
h1 {
	font-size: 30px;
	color: #047d9b;
	font-weight: normal;
}

h2 {
	font-size: 18px;
	color: #047d9b;
	font-weight: normal;
}
h3 {
	font-size: 12px;
	font-weight: bold;
	font-family: Verdana, Geneva, sans-serif;
	color:#047d9b;
	padding-top: 15px;
}
h4 {
	font-size: 12px;
	font-weight: bold;
}
h6 {
	display:block;
	border: 0;
	background-color:#000;
	height: 1px;
	text-align: left;
	width: 540px;
	clear:both;
}
p {
	padding-top: 10px;
	padding-bottom: 10px;
}
* .padding {
	padding-top: 10px;
	padding-bottom: 10px;
}

#content ul {
	padding-left: 20px;
}
#content ul li {
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
	list-style-type: circle;
}
#content ol {
	padding-left: 30px;
}
#content ol li {
	padding-top: 5px;
	padding-bottom: 5px;
}
/*SUBNAV*/
* .sub_nav {
	font-weight: bold;
}
.sub_nav a {
	color: #0180A3;
}
.sub_nav .active {
	color:#666;
	text-decoration: none;
}
/*MISC STYLES*/

img.brace-option {border:1px solid #CDD7B6;clear:right;float:right;margin:20px 20px 10px 10px;}

div.comparison {
	display: inline-block; 
	margin-bottom: 10px; 
	clear: both;
	padding: 5px;
	}
div.comparison div {
	float: left; 
	width: 42%;
	margin: 0 10px;
	}


.back-to-top a {
	background-image: url(../images/totop.gif);
	background-repeat: no-repeat;
	display: block;
	background-position: left 2px;
	color: #0A93C9;
	padding-left: 15px;
}
* .left {float: left;}
* .right {float: right;}
* .center {
	text-align: center;
	display: block;
	margin-right: auto;
	margin-left: auto;
}
table tr td {
	padding: 2px 10px 2px 0px;
}
* .hr, hr {
	color: #98BC10;
	margin-top: 10px;
	margin-bottom: 10px;
	height: 2px;
	display: block;
	width: 100%;
	background-color: #98BC10;
	clear: both;
}
* .img-left {
	padding: 0px;
	float: left;
	clear: right;
	margin-right: 20px;
	margin-bottom: 20px;
}
* .img-right {
	padding: 0px;
	float: right;
	clear: left;
	margin-left: 20px;
	margin-bottom: 20px;
}
* .photo-right {
	padding: 0px;
	margin-left: 10px;
	margin-top: 10px;
	position: absolute;
	top: 80px;
	right: 25px;
}
* .border {
	padding: 5px;
	border: 1px solid #666;
	background: #FFF;
}
* .intro {
	color: #000;
	font-size: 15px;
	text-align: justify;
}
* .antispam { font-weight: bold; }
* .dualcol {
	float: left;
	width: 250px;
	padding: 10px;
}
* .slideshow {
	position: absolute;
	z-index: 1;
	left: 130px;
	top: -260px;
}
* .staff {
	text-align: center;
	float: left;
	width: 85px;
	border: 1px solid #CCC;
	margin-right: 5px;
	margin-left: 5px;
	margin-bottom: 10px;
	padding-top: 5px;
}
.home #nav {
	left: 20px;
	top: 370px;
}
* #nav {
	position: absolute;
	left: 20px;
	top: 260px;
	z-index: 50;
	display: block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
* #about-us, * #about-orthodontics, * #for-our-patients, * #braces-101, * #orthodontic-treatments {
	display: inline;
	background-image: url(../images/nav.png);
	background-repeat: no-repeat;
	text-indent: -9999px;
	line-height: 56px;
	float: left;
}
#nav ul ul {
	text-indent: 0px;
	line-height: 18px;
	z-index: 50;
}
#nav ul li #about-us {
	background-position: left top;
	width: 135px;
}
#nav ul #about-us:hover, #nav li:hover #about-us, #nav li.sfhover #about-us, #nav .active #about-us, #nav ul #about-us.active {
	background-position: left -56px;
}
#nav ul li #about-orthodontics {
	background-position: -135px top;
	width: 185px;
}
#nav ul #about-orthodontics:hover, #nav li:hover #about-orthodontics, #nav li.sfhover #about-orthodontics, #nav .active #about-orthodontics, #nav ul #about-orthodontics.active {
	background-position: -135px -56px;
}
#nav ul li #for-our-patients {
	background-position: -320px top;
	width: 154px;
}
#nav ul #for-our-patients:hover, #nav li:hover #for-our-patients, #nav li.sfhover #for-our-patients, #nav .active #for-our-patients, #nav ul #for-our-patients.active {
	background-position: -320px -56px;
}
#nav ul li #braces-101 {
	background-position: -474px top;
	width: 114px;
}
#nav ul #braces-101:hover, #nav li:hover #braces-101, #nav li.sfhover #braces-101, #nav .active #braces-101, #nav ul #braces-101.active {
	background-position: -474px -56px;
}
#nav ul li #orthodontic-treatments {
	background-position: -588px top;
	width: 238px;
}
#nav ul #orthodontic-treatments:hover, #nav li:hover #orthodontic-treatments, #nav li.sfhover #orthodontic-treatments, #nav .active #orthodontic-treatments, #nav ul #orthodontic-treatments.active {
	background-position: -588px -56px;
}
* #patient-login, * #contact-us, * #home {
	display: inline;
	background-image: url(../images/top-menu.png);
	background-repeat: no-repeat;
	text-indent: -9999px;
	line-height: 48px;
	float: left;
}
#topmenu ul li #patient-login {
	background-position: left top;
	width: 130px;
}
#topmenu ul #patient-login:hover, #topmenu li:hover #patient-login, #topmenu li.sfhover #patient-login, #topmenu .active #patient-login, #topmenu ul #patient-login.active {
	background-position: left -48px;
}
#topmenu ul li #contact-us {
	background-position: -130px top;
	width: 125px;
}
#topmenu ul #contact-us:hover, #topmenu li:hover #contact-us, #topmenu li.sfhover #contact-us, #topmenu .active #contact-us, #topmenu ul #contact-us.active {
	background-position: -130px -48px;
}
#topmenu ul li #home {
	background-position: -255px top;
	width: 73px;
}
#topmenu ul #home:hover, #topmenu li:hover #home, #topmenu li.sfhover #home, #topmenu .active #home, #topmenu ul #home.active {
	background-position: -255px -48px;
}


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





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

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;}
fieldset textarea {height: 144px; overflow: auto;}
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;}

/* 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; clear: both;}
div.success {padding-left: 18px; background: url(../images/validate_ok.jpg) 0 0 no-repeat; color: #000000; display: block;margin:9px 0 0 0;font-size: 11px; font-weight: normal; line-height: 18px; float: right; clear: none;}
.contact-form div.error, .contact-form div.success {margin-left: 0;}

/* comment form */
div.comments {
	margin: 18px 0;
	padding: 0;
}
.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:40%;
	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%;
}

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

/* appointment form */
* .appointment-form {
	margin: 18px 0;
	padding: 0;
}
.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:40%;
	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;}
	
/* edit.com */

ul, ol {
	margin-top:0px;
	margin-bottom:0px;
}

.NormalText, body, td {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
	font-weight: normal;
	text-decoration: none;
	text-transform: none;
	font-style: normal;
}

.SubjectHeader {
	font-family: Century Gothic, Arial, sans-serif;
	font-size: 18px;
	color: #047D9B;
	font-weight: bold;
}

* .PageTitle {
	font-family: Century Gothic, Arial, sans-serif;
	font-size: 32px;
	line-height: 36px;
	color: #047D9B;
	font-weight: normal;
}

td.GreenBorderTop {border-top: solid 2px #5F750A; padding-top: 10px;}
table.team td {border:1px solid #CCCCCC; text-align: center; width: 85px;}

.red
{
	color: #ff0000;	
}

.clear 
{
	clear: both;	
}

p.flash_notice {
  margin: 18px;
  padding: 9px;
  color: #ff0000;
  border: 1px dotted #ff0000;
  background: #ffffff;
  text-align: center;
}

.flash {
  width: 500px;
  margin: 20px auto;
  display: block;
}