*{margin: 0; padding: 0;}
body {
font: 100%/18px Arial,Verdana, Helvetica, sans-serif;
color: #000;
background: #ececec url(../images/body_bg.jpg) 50% 0 repeat-x;
}

/*-----------------------------------------
Typography Everything set to 18px baseline
|grid. use increments of 18px for images, 
logos etc to maintain this grid
-----------------------------------------*/

/*---------- LINKS ----------------------*/
a {cursor:pointer;}
a, a:link, a:visited {text-decoration: underline;color: #0f75bc;font-weight: normal;}
a:hover, a:active  {text-decoration: none;color:#7d0849;}
p.sub-nav a.active {color: #7d0849;text-decoration: none;}
/* displays icons next to PDF and WORD docs */
#pt-forms a[href$='.doc'], #pt-forms a[href$='.rtf'] {
 	width: 25px;
	height: 18px;
	text-indent: -999em;
	overflow: hidden;
	display: inline-block;
	background: transparent url(../images/icon_doc.gif) no-repeat center center;}
#pt-forms a[href$='.pdf'] { 
	width: 25px;
	height: 18px;
	text-indent: -999em;
	overflow: hidden;
	display: inline-block;
	background: transparent url(../images/icon_pdf.gif) no-repeat center center;}
.off-site a[href^="http:"] {
        background: url(../images/i-offsite.gif) 100% 50% no-repeat;
        padding-right: 25px;}
a.video-link {
	padding: 3px 27px 3px 0;
	background: url(../images/icon_video.gif) 100% 50% no-repeat;
}
#logo a {display: block; width: 368px; height: 162px;}
#footer .text-nav a {color: #000; text-decoration: none;}
#footer .text-nav a:hover {color: #7d0849;text-decoration: underline;}
#footer a.sesame-link {font-size: 12px; color: #000; text-decoration: none;}
#footer a.sesame-link:hover {color: #ffffff;background: #0f75bc;}

/*------------------------
Headings*/

h1 {
	font-size: 18px;
	color: #7d0849;
	line-height: 18px;
	font-weight: bold;
	margin: 9px 0 9px 0;}
h1#logo {
	margin: 0 0 0 10px;
	padding: 0;
	width: 212px;
	height: 102px;
	background: url(../images/logo.jpg) 0 0 no-repeat; 
	}
h1.sifr {font-size: 27px;margin: 0;color: #7d0849;font-weight: bold;text-align: left;height: 38px;}
h2 {
	font-size: 16px;
	font-weight: normal;
	line-height: 18px;
	margin: 0 0 9px;
	color: #0f75bc;}
h2.staff {clear: both; margin-top: 18px;}
h3 {
	font-size: 14px;
	line-height: 18px;
	margin: 9px 0;
	font-weight: bold;
	}
h4 {
	font-size: 13px;
	line-height: 18px;
	margin: 18px 0 0 0;
	color: #0f75bc;
	font-weight: bold;}
h5 {
	font-size: 12px;
	line-height: 18px;
	font-weight: bold;
	margin: 18px 0;}
#footer h5 {color: #000;}


/*Why Braces videos link on home page*/
h2 a.why-braces-video {font-weight: bold;

margin: 20px 0;
padding:10px 20px 10px 30px;
height: 20px;
background-image: url(../images/video-icon.png);
background-repeat: no-repeat;
background-position: 0 .25em;
}

/* LISTS */
ol, ul, dl {
	list-style: none;
	margin: 9px 0;
}
dt {
	font-size: 16px;
	font-weight: normal;
	line-height: 18px;
	margin: 0 0 9px;
	color: #0f75bc;}
dt em {color: #666666;}
dd {margin: 9px 0;}
dl.page-sub-nav {margin: 0 0 9px;}
dl.page-sub-nav dt {color: #000;font-size: 12px;font-weight: bold; margin: 0;line-height: 18px;}
dl.page-sub-nav dd {margin: 0;}
dl.page-sub-nav dd p {margin: 0 0 9px;}
dd ul {margin-left: 18px;}
dd ul li {margin-left: 18px;}
dl.glossary {width: 400px;margin: 18px auto;}
dl.glossary dt, dl.glossary dd {margin: 9px 0;}
dl.glossary dd.toggle-close {border-top: 1px solid #0f72ba;}
dl.glossary dd.toggle-close a {width: 98px;height: 30px;display: block; overflow: hidden;text-indent: -999em;
							float: right;background: url(../images/toggle_close.jpg) no-repeat;}
dl.glossary ul {margin-left: 0;}							
dl.glossary ul li {padding-left: 18px;margin: 9px 0;background: url(../images/bullet.jpg) 0 0 no-repeat;}

ul.bullet, ul.sitemap {
	list-style: none;
	display: block;
	margin-left: 18px;
}
ul.bullet li, ul.sitemap li {margin-left: 18px;padding-left:18px;background: url(../images/bullet.jpg) 0 0 no-repeat}
ul.bullet ul, ul.sitemap ul {margin: 0 0 9px 0;}
ul.bullet ul, ul.sitemap ul li {padding-left:18px;background: url(../images/bullet.jpg) 0 0 no-repeat; margin-left: 18px;}
ol {list-style: decimal outside; margin-left: 18px;}
ol li {margin-left: 18px;}
li, dd {
	font-size: 12px;
	line-height: 18px;}
li h3, li p {margin: 0 18px;}
li > p {margin-bottom: 16px;}

/* PARAGRAPHS */
p {
	font-size: 12px;
	line-height: 18px;
	margin: 9px 0 9px 0;}
p.sub-nav {margin: 0 0 9px;}
p.upgrade-flash {
	margin: 18px;
	padding: 9px;
	color: #ff0000;
	border: 1px dotted #ff0000;
	background: #ffffff;
}
p.note {padding-left: 36px;background: url(../images/note_bullet.jpg) 0 50% no-repeat;}
p.top-link {font-weight: bold; text-align: right; clear: both;}
p#address {float: right;text-align: right; color: #0f75bc; margin: 40px 12px 0 0;}
p#footer-text {font-size: 11px;margin: 0 22px 12px;padding: 13px 18px;background: #7d0849; color: #ffffff; text-align: center;}
#footer p.text-nav {margin-top: 27px;}

/* TEXT */
.center {text-align: center;}
.right {text-align: right;}
strong, b {	font-weight: bold;}
em {font-style:italic;}
sup, sub {font-size: 85%;}
q:before, q:after {/* remove quotes since IE doesn't understand :( */
    content: ""; }
q {font-style:italic;}
hr {display: none;}
div.hr {border-top: 1px solid; height: 1px; margin: 18px 0;clear: both;}

h6 {border-top: 1px solid #0F75BC; height: 1px; margin: 18px 0;clear: both;}

/*----------------------------- 
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 */
.clear:after {content: ".";display: block;clear: both;visibility: hidden;
			 line-height: 0;height: 0;}
.clear {display: inline-block;}
html[xmlns] .clear {display: block;}
* html .clear {height: 1%;}
.hide {display: none;}

.br {
clear: both;	
}
/*--------------------------------- 
Images
---------------------------------*/
img {display: block;border: 0;outline: 0;}

img.img-right {margin: 0 9px 27px;float: right;clear: left;border: 1px solid #7d0849;padding: 2px; box-shadow: 3px 3px 9px #666;}

				
				
.spotlight {width: 510px;height: 181px;position: absolute;top: 120px;left: 193px;}

/*--------------------------------- 
Flash
---------------------------------*/
.flash-replaced .alt {/*JQUERY STYLE - sets size of container to 0 to hide alternative content*/
	display: block;height: 0px;position: absolute;overflow: hidden;width: 0px;}
.module {margin: 18px 0;}/* global margins for all flash mods */
#flash-homepage {width: 510px;height: 181px;position: absolute;top: 120px;left: 193px;background: url(../images/flash_homepage.jpg) 0 0 no-repeat;}

/*---------------------------------
Layout
---------------------------------*/
#container {width: 724px;position:absolute;top:0;left:50%;margin-left:-362px;
			background: url(../images/content_bg.jpg) 0 0 repeat-y;}
#header {height: 312px; background: url(../images/content_top.jpg) 0 0 no-repeat;}
#call-to-action {clear: both;width: 157px;height: 181px; background: url(../images/consult.jpg) 0 0 no-repeat;
				margin: 18px 0 0 22px;}
#content {margin: 0 27px 0 193px;min-height:269px;_height:269px;}
#logo-bottom {width: 480px;margin:18px auto;}
#logo-bottom a {float: left;}
#logo-bottom a img {margin: 9px 40px 0;}

#mag-logo {
	width: 480px;
	padding-top: 20px;
	padding-left: 70px;
	font-size: 12px;
}

#mag-logo img {
	margin-bottom: -15px;
}

#footer {min-height: 112px;_height: 112px;padding: 12px 0 25px;text-align: center;
		background: #ececec url(../images/content_bottom.jpg) 0 0 no-repeat;}

/* NAVIGATION */
#utility-nav {width: 254px;height: 35px;position: absolute;top: 0;left:473px;}
#utility-nav ul {margin: 0;width: 254px;height: 35px;}
#utility-nav li {width: 122px;height:35px;float: left;display: block;overflow: hidden;text-indent: -999em;}
#utility-nav li a {width: 122px;height:35px;display: block;background: url(../images/utility_nav.jpg) no-repeat;}
				
#main-nav {width: 157px;height: 269px;position: absolute;top: 312px;left: 22px;}
#main-nav ul {margin: 0;}
#main-nav ul li {display: inline;}
#main-nav ul a {display: block; height: 30px;width: 157px;text-indent: -999em; overflow: hidden;
				background: url(../images/nav_bg.jpg) no-repeat;}
#main-nav ul ul a {height: auto; text-indent: 0; width: auto; background-image: none;}
#main-nav ul ul {position: absolute; left: -999em; width: 200px; background: #7a0847; display: block;border: 1px solid #7a0847;}
#main-nav ul ul a {padding: 5px 9px; color: #ffffff; text-decoration: none;}
#main-nav ul ul a:hover {background: #910955;}
#main-nav li:hover ul, #main-nav ul li.sfhover ul {left: auto; margin: -30px 0 0 157px;}


/* nav image replacement */
#utility-nav li #patient-login {background-position: 0 0;}
#utility-nav li #patient-login:hover {background-position: -132px 0;}
#utility-nav li #doctor-login {background-position: 0 -35px;}
#utility-nav li #doctor-login:hover {background-position: -132px -35px;}

#main-nav li #patient-information {background-position: 0 0;}
#main-nav li:hover #patient-information, #main-nav li.sfhover #patient-information, 
#main-nav li.active #patient-information {background-position: -157px 0;}
#main-nav li #about-orthodontics {background-position: 0 -30px;}
#main-nav li:hover #about-orthodontics, #main-nav li.sfhover #about-orthodontics,
#main-nav li.active #about-orthodontics {background-position: -157px -30px;}
#main-nav li #faq {background-position: 0 -60px;}
#main-nav li:hover #faq, #main-nav li.sfhover #faq,
#main-nav li.active #faq {background-position: -157px -60px;}
#main-nav li #about-braces {background-position: 0 -90px;}
#main-nav li:hover #about-braces, #main-nav li.sfhover #about-braces,
#main-nav li.active #about-braces {background-position: -157px -90px;}
#main-nav li #treatment-options {background-position: 0 -120px;}
#main-nav li:hover #treatment-options, #main-nav li.sfhover #treatment-options,
#main-nav li.active #treatment-options {background-position: -157px -120px;}
#main-nav li #emergency-care {background-position: 0 -150px;}
#main-nav li:hover #emergency-care, #main-nav li.sfhover #emergency-care,
#main-nav li.active #emergency-care {background-position: -157px -150px;}
#main-nav li #contact-us {background-position: 0 -180px;}
#main-nav li:hover #contact-us, #main-nav li.sfhover #contact-us,
#main-nav li.active #contact-us {background-position: -157px -180px;}
#main-nav li #home {background-position: 0 -210px;}
#main-nav li:hover #home, #main-nav lisfhover #home,
#main-nav li.active #home {background-position: -157px -210px;}

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

/* Global form styles */
.referral-form, .appointment-form, .comment-form {width: 450px;margin-top: 18px;}

fieldset {border: none; padding: 9px 0;}
fieldset div {clear: both;}
.form-header {border-bottom: 1px solid #3993b1;/*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 #3993b1;/*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:#0a799e;/* customize me! */
	border: 1px solid #0a799e;
	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;
	border:solid 2px #3993b1;/*optional, change color to match site*/
	background:#fafafa;/*optional, change color of background*/}
.referral-form fieldset {border: none; padding: 9px 0;}
.referral-form label {/*floats labels left*/
	font-size: 12px;
	display:block;
	font-weight:bold;
	text-align:right;
	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:right;
	width:100%;}
.referral-form input, .referral-form textarea {
	float:left;
	font-size:12px;
	padding:4px 2px;
	border:solid 1px #3993b1;
	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;}
.referral-form p.verification img {border: 1px solid #3993b1;}
.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;
	border:solid 2px #3993b1;/*optional, change color to match site*/
	background:#fafafa;/*optional, change color of background*/}
.appointment-form fieldset {border: none; padding: 9px 0;}
.appointment-form label {/*floats labels left*/
	font-size: 12px;
	display:block;
	font-weight:bold;
	text-align:right;
	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:right;
	width:100%;}
.appointment-form input, .appointment-form select, .appointment-form textarea {
	float:left;
	font-size:12px;
	padding:4px 2px;
	border:solid 1px #3993b1;
	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%;}
.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 #3993b1;}
.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 */	
.comment-form {
	margin: 18px 0;
	padding: 10px;
	border:solid 2px #3993b1;/*optional, change color to match site*/
	background: #fafafa;}
.comment-form li {font-weight: bold;}
.comment-form label {/*floats labels left*/
	font-size: 12px;
	display:block;
	font-weight:bold;
	text-align:right;
	width:45%;
	float:left;
	padding-top: 4px;}
.comment-form label span {/*sits below labels; holds instructions*/
	color:#666666;
	display:block;
	font-size:11px;
	font-weight:normal;
	text-align:right;
	width:100%;}
.comment-form .label-block label {float: none; clear: both; width: 100%; text-align: left;}
.comment-form input, .comment-form textarea {
	float:left;
	font-size:12px;
	padding:4px 2px;
	border:solid 1px #3993b1;
	width:45%;
	margin:9px 0 9px 2%;
	background: #ffffff;}
.comment-form p.verification {
	clear: both;
	margin: 9px 0 9px 47%;
	font-size: 12px;}
.comment-form p.radio-float {
	clear: none;
	float:left;
	width: 45%;
	padding:0;
	margin:9px 0 9px 0;}
.comment-form p.verification {margin-top: 0;}
.comment-form p.verification img {border: 1px solid #3993b1;}
.comment-form p.radio input, .comment-form p.radio-float input {
	float: none;
	margin: 0 0 0 0;
	padding: 4px 2px;
	width: auto;}
.comment-form p.radio span {padding: 0 2% 0 0;}
.comment-form .radio {text-align: left; font-weight: normal;}
.comment-form .comments-box label {float: none; font-weight: normal; display: block; text-align: left;}
.comment-form .comments-box textarea {float: none; margin-left: 0; width:95%;
}

/* Mini-Contact Form */
.contact-form {
	float: right; 
	clear: right; 
	margin: 0 0 36px 36px;	
	width: 225px; 
	padding: 10px;
	border:solid 2px #3993b1;/*optional, change color to match site*/
	background:#fafafa;/*optional, change color of background*/}
.contact-form fieldset {border: none; padding: 9px 0;}
.contact-form li {font-weight: bold;}
.contact-form label {display: none;}
.contact-form input, .contact-form textarea {
	font-size:12px;
	padding:4px 2px;
	border:solid 1px #3993b1;
	width:90%;
	margin:9px 10px;
	background: #ffffff;}

/* 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 50%;font-size: 11px;}
div.success {padding-left: 18px; background: url(../images/validate_ok.jpg) 0 0 no-repeat; color: #000000; 
		   display: block;margin:0 0 9px 50%;font-size: 11px;}


/*----------------------------
Sesame Content
----------------------------*/
.left {
float:left;
margin:0 9px 27px 0;}
img.right {
float:right;
margin:0 0 27px 9px;}
div.media-center {
display:inline-block;
overflow:auto;
padding:9px;}
div.media-center img {
border:1px solid #FFF;}

div#sesame-game {
background: #000;
line-height: 0;
margin: 10px 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;
margin: 0 0 10px 10px}

ul#sesame-games a.button {
float:right;
height:85px;
width:200px}

ul#sesame-games p {
padding-bottom: 1em}