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

/* Layout */
body {background: url(../images/body-bg.gif) repeat;}
* #container {background: url(../images/oops.gif) no-repeat 237px 108px; width: 926px; margin-left: -463px; left: 50%; position: absolute;}
* #header {height: 366px; border: 5px solid #d9531e; border-width: 0 0 5px 0;}
* #banner-left {width: 237px; height: 366px; float: left; background: #fff;}
* #banner-right {width: 689px; float: left;}
* #top-nav-wrap {background: url(../images/banner.png) no-repeat; height: 108px;}
* #content-wrap {background: url(../images/content-bg.gif) repeat-y; min-height: 360px; _height: 360px;}
* #content {width: 640px; margin-left: 262px; padding: 20px 0 0 0; clear: both;}
* #footer {background: url(../images/footer-bg.png) no-repeat; height: 96px; clear: both;}
* .staff {background-color: #f2f2e9; border: solid 1px #55542d; padding: 15px 15px 0 15px; margin-bottom: 15px; clear: both;}
p.hr {border: solid 1px #d9531e; border-width: 0 0 1px 0; margin-bottom: 15px; padding-bottom: 10px;}

/* Images */
img {border: none; outline: none;}
* #home-callouts {width: 513px; margin: 0 auto;}
* #home-callouts .callout {float: left;}
* #home-callouts .aao {margin: 0 0 0 27px;}
* #home-callouts .invisalign {margin: 10px 0 0 0;}
* #home-callouts  .consult {margin: 0 0 0 26px;}
* .img-left {border: 0; margin: 5px 15px 15px 0; float: left;}
* .img-left-border {border: solid 5px #d9531e; margin: 5px 15px 15px 0; float: left; clear: left;}
* .img-right-border {border: solid 5px #d9531e; margin: 5px 0 15px 15px; float: right; clear: right;}

/* Typo */
body {font-size: 100%; font-family: Arial, Helvetica, sans-serif;}
* #container {font-size: .75em;}
* #content {color: #4f552a; line-height: 1.5em; font-weight: normal;}
p.address {margin: 20px 0 0 43px; line-height: 1.5em; font-size: 12px; color: #000;}
* .text_nav {color: #fff; text-align: center; margin-top: 20px;}
* .sub_nav {color: #d9531e; margin-bottom: 25px;}
* .learn-more {color: #4f552a; font-weight: bold;}
p.sesame {text-align: center; margin-top: 18px; padding-bottom: 20px;}
p {margin: 0 0 10px 0;}

/* edit.com visible styles */
BODY, TD, .NormalText { text-decoration: none; font-weight: normal; font-style: normal; color: #4F552A; font-family: Arial, Helvetica, sans-serif; line-height: 1.4em; }

.Title		{ color: #4F552A; font-size: 32px; font-weight: normal; font-family: Arial; line-height: 1.17em; font-style: italic; }
.Header		{ color: #D9531E; font-size: 18px; font-weight: bold; font-family: Arial; line-height: 1.17em; }
.Subheader	{ color: #4F552A; font-size: 12px; font-weight: bold; font-family: Arial; line-height: 1.17em; }

.Orange		{ color: #D9531E; }
.Green		{ color: #4F552A; }
.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.OrangeBorder { border: solid 5px #D9531E; }

TABLE.staffTable 	{ margin: -10px 0 0 -10px; }
TABLE.staffTable TD { background: #FFF; padding: 10px; border: 1px solid #55542D; }
TABLE.staffTable TD IMG { }

/* Links */
a {color: #d9531e;}
a:hover, .sub_nav a.active {color: #4f552a;}
* .sub_nav a.active {cursor: default;}
* .text_nav a, p.sesame a {color: #fff; text-decoration: none;}
* .text_nav a:hover, p.sesame a:hover {text-decoration: underline;}

/* Headings */
h1 {font-size: 1.83em; font-weight: bold; color: #4f552a; margin: 0 0 10px; line-height: 1.17em;}
h1.replaced {background-repeat: no-repeat; width: 640px; height: 60px; margin: 0; text-indent: -999em; overflow: hidden;}
h2 {font-size: 1.5em; font-weight: bold; color: #d9531e; margin: 0 0 10px; line-height: 1.17em;}
h3 {font-size: 1em; margin: 0; font-weight: bold;}
h4 {font-size: 1em; color: #fff; font-weight: normal; line-height: 1.33em; margin: 0; padding: 38px 0 0 262px; width: 647px;}
h1.logo {background: url(../images/emrich-logo.gif) no-repeat; width: 237px; height: 224px; margin: 0; padding: 0;  position: relative; text-indent: -999em; overflow: hidden;}
h1.logo a {width: 237px; height: 224px; display: block;}

/* Flash */
* .flash {width: 500px; margin: 10px auto;}
* .notice {width: 80%; background: #e4e4e4; font-size: .83em; text-align: left; margin: 50px auto; padding: 10px; border: solid 1px #000; overflow: auto;}
* .flash-replaced .alt {display: block; height: 0px; position: absolute; overflow: hidden; width: 0px;}
* #flash-homepage {background: url(../images/flash-home-bg.jpg); width: 689px; height: 258px;}
* #flash-color-your-retainer {width: 300px; margin: 10px auto;}

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

/* Top Nav */
* #util {position: absolute; z-index: 1; top: 72px; right: 0; width: 346px;}
* #util ul {margin: 0; padding: 0; height: 20px; list-style: none; }
* #util ul li {display: inline; float: left; margin-right: 17px;}
* #util li a {display: block; text-decoration: none; text-indent: -999em; overflow: hidden; height: 20px;}
* #patient-login, * #doctor-login, * #contact-us {height: 20px;}
* #patient-login {background: url(../images/nav/pt-login.gif); width: 104px;}
* #doctor-login {background: url(../images/nav/dt-login.gif); width: 103px;}
* #contact-us {background: url(../images/nav/contact-us.gif); width: 88px;}

#util a:hover, #util li.active #contact-us, #util li:hover, #util li.sfhoverTop,
#util li:hover #contact-us, #util li.sfhoverTop #contact-us,
#util li:hover #patient-login, #util li.sfhoverTop #patient-login,
#util li:hover #doctor-login, #util li.sfhoverTop #doctor-login  {background-position: 0 -20px;}
#util li.active a {cursor: default;}

/* Drop Down */
#util li ul {margin: 0; padding: 1px 1px 0 1px; left: -9999px; position: absolute; z-index: 3;}
#util li ul li {float: none; margin: 0; padding: 0;}
#util li:hover ul, #util li.sfhoverTop ul {left: auto; margin: 0 0 0 -46px; height: auto;}
#util li ul li a {font: bold 1em Arial, Helvetica, sans-serif; color: #000; background: #f2f2e9; height: 24px; line-height: 24px; display: block; padding: 4px 0 4px 10px; width: 140px; text-indent: 0; text-decoration: none;}
#util li ul a:hover {background: #d4d4c2;}

/* Side Navigation */
* #nav {width: 235px; position: absolute; z-index: 2; top: 390px; left: 27px;}
#nav ul {margin: 0; padding: 0; list-style: none;}
#nav li {margin: 0; height: 36px; padding: 0; list-style: none; display: inline;}
#nav li a {width: 235px; height: 36px; display: block; text-decoration: none; text-indent: -999em; overflow: hidden;}

* #about-our-office, * #for-new-patients, * #about-orthodontics, * #orthodontic-treatments, * #braces-101, * #kids-fun-zone, * #emergency-care, * #faq, * #home {text-indent: -999em; overflow: hidden;}
* #about-our-office {background: url(../images/nav/about-our-office.gif);}
* #for-new-patients {background: url(../images/nav/for-new-patients.gif);}
* #about-orthodontics {background: url(../images/nav/about-orthodontics.gif);}
* #orthodontic-treatments {background: url(../images/nav/orthodontic-treatments.gif);}
* #braces-101 {background: url(../images/nav/braces-101.gif);}
* #kids-fun-zone {background: url(../images/nav/kids-fun-zone.gif);}
* #emergency-care {background: url(../images/nav/emergency-care.gif);}
* #faq {background: url(../images/nav/faq.gif);}
* #home {background: url(../images/nav/home.gif);}

#nav a:hover, #nav li.active a,
#nav li:hover #about-our-office, #nav li.sfhover #about-our-office,
#nav li:hover #for-new-patients, #nav li.sfhover #for-new-patients,
#nav li:hover #about-orthodontics, #nav li.sfhover #about-orthodontics,
#nav li:hover #orthodontic-treatments, #nav li.sfhover #orthodontic-treatments,
#nav li:hover #braces-101, #nav li.sfhover #braces-101,
#nav li:hover #kids-fun-zone, #nav li.sfhover #kids-fun-zone,
#nav li:hover #emergency-care, #nav li.sfhover #emergency-care, 
#nav li:hover #faq, #nav li.sfhover #faq,
#nav li:hover #home, #nav li.sfhover #home {background-position: 0 -36px;}

/* Drop Down */
#nav li ul {margin: 0; padding: 0;  width: 208px; position: absolute; z-index: 3; left: -999em;}
#nav li:hover ul, #nav li.sfhover ul {left: auto; margin: -36px 0 0 200px; height: auto;}
#nav li ul li {background: url(../images/nav/nav-bg.png) repeat-y; width: 203px; height: 24px; display: block; padding: 0 0 0 5px; margin: 0;}
#nav li ul li a {padding: 5px 0 0 5px; margin: 0; width: 193px; height: 19px; _height: 19px; line-height: 24px; display: block; color: #000; text-indent: 0; font: 1em Arial, Helvetica, sans-serif; font-weight: normal; position: relative;}
#nav li ul li a:hover, #nav li ul li.sfhover a {background: #d4d4c2; height: 19px;}
#nav li ul li.first {background: url(../images/nav/nav-top.png) no-repeat top center; padding-top: 4px;}
#nav li ul li.last {background: url(../images/nav/nav-bottom.png) no-repeat bottom center; padding-bottom: 4px;}

/* Invisalign Teen */
span.indent {padding-left: 40px;}
* #sidebar {background: #f2f2e9; width: 275px; margin: 0 0 15px 15px; padding: 0; border: solid 5px #d9531e; float: right; clear: right;}
* #sidebar h3 {background: #4f552a; margin: 0; padding: 15px; color: #fff;}
* .thumb {border: solid 1px #000; margin: 0 10px 10px 0; float: left; clear: left;}
* #sidebar p {padding: 0 15px; margin: 15px 0;}

/* The Game Room */
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}

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

/*---------------------------
Sesame Forms
---------------------------*/

/* Global form styles */
* .referral-form, * .appointment-form, * .comments {width: 100%; margin: 0 auto;}

fieldset {border: none; padding: 9px 0;}
fieldset div {clear: both;}
fieldset p.note {font-weight: bold;}
* .form-header {border-bottom: 1px solid #d9531e;/*optional, change color to match site*/}
* .form-header h3 {margin: 0 0 9px;}
* .form-header p {margin: 0 0; padding-bottom: 18px;}
label.required {background: url(../images/required_note.gif) 100% 10px no-repeat;}
* .form-footer {padding-top: 18px; text-align: center; border-top: 1px solid #d9531e;/*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:#d9531e;/* customize me! */
	border: 1px solid #55542D;/* customize me! */
	text-align:center;
	line-height:31px;
	color:#ffffff;/* customize me! */
	font-size:12px;
	font-weight:bold;}


/* referral form */
* .referral-form {
	margin: 18px 0;
	padding: 10px;}
.referral-form fieldset {border: none; padding: 9px 0;}
.referral-form label {/*floats labels left*/
	font-size: 12px;
	display:block;
	font-weight:bold;
	text-align:left;
	width:45%;
	float:left;
	line-height: 18px;
	padding-top: 4px;}
.referral-form label span {/*sits below labels; holds instructions*/
	color:#666666;
	display:block;
	font-size:11px;
	font-weight:normal;
	text-align:left;
	width:100%;}
.referral-form input, .referral-form textarea {
	float:left;
	font-size:12px;
	padding:4px 2px;
	border:solid 1px #d9531e;/* customize me! */
	width:45%;
	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; clear: both;}
.referral-form p.verification img {border: 1px solid #d9531e;}/* customize me! */
.referral-form p.radio input, .referral-form p.radio-float input {
	float: none;
	width: auto;
	margin: 0 0 0 2%;
	padding: 4px 2px;}

/* appointment form */
* .appointment-form {
	margin: 18px 0;
	padding: 10px;}
.appointment-form fieldset {border: none; padding: 9px 0;}
.appointment-form label {/*floats labels left*/
	font-size: 12px;
	display:block;
	font-weight:bold;
	text-align:left;
	width:45%;
	float:left;
	line-height: 18px;
	padding-top: 4px;}
.appointment-form label span {/*sits below labels; holds instructions*/
	color:#666666;
	display:block;
	font-size:11px;
	font-weight:normal;
	text-align:left;
	width:100%;}
.appointment-form input, .appointment-form select, .appointment-form textarea {
	float:left;
	font-size:12px;
	padding:4px 2px;
	border:solid 1px #d9531e;/* customize me! */
	width:47%;
	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: 47%;
	padding:0;
	margin:9px 0 9px 2%;}
.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.verification img {border: 1px solid #d9531e;}/* customize me! */
.appointment-form p.radio input, .appointment-form p.radio-float input {
	float: none;
	width: auto;
	margin: 0 0 0 2%;
	padding: 4px 2px;}

/* comment form */	
* .comments {
	margin: 18px 0;
	padding: 10px;}
.comments li {font-weight: bold;}
.comments label {/*floats labels left*/
	font-size: 12px;
	display:block;
	font-weight:bold;
	text-align:left;
	width:45%;
	float:left;
	padding-top: 4px;}
.comments label span {/*sits below labels; holds instructions*/
	color:#666666;
	display:block;
	font-size:11px;
	font-weight:normal;
	text-align:left;
	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:4px 2px;
	border:solid 1px #d9531e;/* customize me! */
	width:45%;
	margin:9px 0 9px 2%;
	background: #ffffff;}
.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;}
.comments p.verification {margin: 0 0 0 47%;}
.comments p.verification img {border: 1px solid #d9531e;}/* customize me! */
.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%;
}

/* Errors */

/* JQuery */
input.error {border: 1px solid #ff0000; background: #fefda1; }
div.error {padding-left: 18px;background: url(../images/validate_error.jpg) 0 0 no-repeat; color: #ff0000; display: block;margin:0 0 9px 47%;font-size: 11px; 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; line-height: 18px;}