* { margin: 0; outline: none; padding: 0; }
body { background: #FFF url(../images/bg.png) repeat-x; }

/* - - - - - - - - - - TEXT - - - - - - - - - - */
body, form, input, textarea { color: #000; font-family: tahoma, sans-serif; font-size: 12px; }
p { color: #000; line-height: 22px; margin: 10px 0; }
blockquote { margin: 10px 40px; padding: 0; }
div.hr { background: url(../images/hr.png) repeat-x; clear: both; height: 1px; margin: 20px 0; padding: 0; width: 528px; }
div.hr hr { display: none; }
.content ol { clear: left; color: #000; font-size: 11px; line-height: 22px; list-style: upper-roman; margin: 10px 40px; padding: 0; }
.content ol a { color: #000; }
.content ol li { margin: 10px 0; padding: 0; }
.content ol ol { clear: left; color: #000; font-size: 11px; line-height: 22px; list-style: upper-alpha; margin: 0 30px; padding: 0; }
.content ol ol a { color: #000; }
.content ol ol li { margin: 10px 0; padding: 0; }
.content ol ol ol { clear: left; color: #000; font-size: 11px; line-height: 22px; list-style: decimal; margin: 0 30px; padding: 0; }
.content ol ol ol a { color: #000; }
.content ol ol ol li { margin: 10px 0; padding: 0; }
.content ul { clear: left; color: #000; font-size: 11px; line-height: 22px; list-style: disc; margin: 10px 40px; padding: 0; }
.content ul a { color: #000; }
.content ul li { margin: 10px 0; padding: 0; }
.content ul ul { clear: left; color: #000; font-size: 11px; line-height: 22px; list-style: circle; margin: 0 30px; padding: 0; }
.content ul ul a { color: #000; }
.content ul ul li { margin: 10px 0; padding: 0; }
.flash p { background: #D61308; color: #FFF; padding: 10px; }
#footer p { color: #FFF; font-size: 11px; line-height: 20px; }
#footer-navigate ul { list-style: none; margin: 6px 0 0; }
#footer-navigate ul li { background:transparent url(../images/list.png) no-repeat; height: 18px; padding: 0 0 0 14px; }
#sesame { clear: left; }
#sidebar p { margin: 20px 0; }

/* - - - LINKS - - - */
a { color: #46469A; text-decoration: underline; }
a:hover { text-decoration: none; }
.back-to-top a { color: #46469A; font-size: 11px; line-height: 14px; text-decoration: none; }
.back-to-top a:hover { color: #46469A; text-decoration: underline; }
.flash a { color: #FFF; }
#footer a { color: #FFF; }
#footer-navigate ul a { color: #FFF; line-height: 18px; font-size: 10px; text-decoration: none; }
#footer-navigate ul a:hover { text-decoration: underline; }
#sesame a { font-weight: bold; text-decoration: none; }
#sesame a:hover { text-decoration: underline; }

/* - - - HEADERS - - - */
h1 { background: no-repeat; clear: left; height: 35px; overflow: hidden; margin: 15px 0 0; text-indent: -9999px; }
h2 { color: #D9AA1C; font-family: tahoma, sans-serif; font-size: 16px; margin: 10px 0; }
h3 { color: #46469A; font-family: tahoma, sans-serif; font-size: 12px; margin: 10px 0; }
h4 { color: #000; font-family: tahoma, sans-serif; font-size: 11px; margin: 5px 0; }

/* - - - - - - - - - - IMAGES - - - - - - - - - - */
img { border: 0; display: block; }
img.center { clear: both; margin: 0 auto; }
img.left { clear: left; float: left; margin: 0 10px 10px 0; }
img.right { clear: right; float: right; margin: 0 0 10px 10px; }
.flash img { float: right; padding: 10px; }
.map { float: right; }

/*---------------------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;}
.flash-container {margin: 10px 0;}/* global margins for all flash mods */
#flash-home {width: 528px;height: 234px;background: url(../images/flash_homepage.jpg) 0 0 no-repeat;}

/* - - - - - - - - - - LAYOUT - - - - - - - - - - */
.back-to-top { clear: both; text-align: right; width: 100%; }
.content { clear: both; padding: 25px 0 0; width: 740px; }
.flash-container { margin: 10px 0; }
#header a { background: url(../images/header.png) no-repeat; display: block; height: 175px; margin: 15px 0 0; overflow: hidden; text-indent: -9999px; width: 670px; }
#footer-wrapper { background: #353574 url(../images/footer-bg.png) repeat-x top; clear: both; padding: 50px 0 25px; width: 100%;}
#footer { min-height: 259px; _height: 259px; margin: 0 auto; width: 740px; }
#footer-address { float: left; width: 266px; }
#footer-address h1 {background-image:url(../images/titles/address.png);height:13px;margin:0;}
#footer-navigate {float: left; width: 236px; }
#footer-navigate h1 {background-image:url(../images/titles/navigate.png);height:13px;margin:0;}
#footer-contact{ float: left; width: 236px; }
#footer-contact h1 {background-image:url(../images/titles/contact.png);height:13px;margin:0;}
#main { background: url(../images/sidebar-bg.png) repeat-y right; float: left; padding: 0 17px 0 0; width: 528px; }
#sidebar { float: left; padding: 0 20px; width: 155px; }
#site { margin: 0 auto; width: 740px; }

/* CLEAR FLOATS */
.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%;}


/* - - - - - - - - - - NAVIGATION - - - - - - - - - - */
#navigation-wrapper { width: 740px; }
ul#navigation { height: 26px; list-style: none; margin: 3px 0 4px 0; position: relative; width: 740px; }
#navigation li { float: left; }
#navigation a { display: block; height: 26px; overflow: hidden; text-indent: -9999px; }

/* - - - IMAGES - - - */
#meet-our-team { background: url(../images/nav/meet-our-team.png); margin: 0 11px 0 0; width: 109px; }
#new-patients-team { background: url(../images/nav/new-patients-team.png); margin: 0 10px 0 0; width: 96px; }
#about-orthodontics { background: url(../images/nav/about-orthodontics.png); margin: 0 10px 0 0; width: 139px; }
#braces-101 { background: url(../images/nav/braces-101.png); margin: 0 9px 0 0; width: 79px; }
#faq { background: url(../images/nav/faq.png); margin: 0 11px 0 0; width: 35px; }
#online-form { background: url(../images/nav/online-form.png); margin: 0 10px 0 0; width: 88px; }
#kids-only { background: url(../images/nav/kids-only.png); width: 71px; }
/* - - - SUBNAVIGATION - - - */
#sub-navigation-wrapper { height: 48px; width: 740px; }
#sub-navigation { margin: 0; }
#sub-navigation a { background: url(../images/nav/subnav-bg.png) no-repeat right; color: #333; display: block; float: left; height: 24px; font-size: 12px; font-weight: bold; line-height: 24px; padding: 0 6px 0 5px; text-decoration: none; }
#sub-navigation a.end { background: none; }

/* - - - TOP RIGHT NAVIGATION - - - */
#top-right-navigation-wrapper { height: 15px; position: absolute; text-align: right; top: 10px; width: 740px; }
#top-right-navigation { color: #FFC819; height: 15px; font-size: 10px; line-height: 15px; margin: 0; text-decoration: none; }
#top-right-navigation a { color: #FFF; height: 15px; font-size: 10px; line-height: 15px; text-decoration: none; }

/* - - - ROLLOVER EFFECTS - - - */
#navigation a:hover, #navigation .active { background-position: 0 -26px; }

/* - - - SUBNAVIGATION ROLLOVER EFFECTS - - - */
#sub-navigation a:hover, #sub-navigation .active { color: #464699; text-decoration: underline; }
#top-right-navigation a:hover, #top-right-navigation .active { text-decoration: underline; }

/* - - - CURSOR EFFECTS - - - */
#navigation .active { cursor: default; }


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



/* Mini-Contact Form */
.contact-form-mini {
	margin: 0;	
	width: 100%; 
	padding: 9px 0 0;
	border: 0;}/*optional, change color to match site*/
.contact-form-mini fieldset {border: none; padding: 0 0;}
.contact-form-mini li {font-weight: bold;}
.contact-form-mini label {display: none;}
.contact-form-mini input, .contact-form-mini textarea {
	font-size:11px;
	color: #ffc81a;
	padding:3px;
	border:solid 1px #5656b1;
	width:217px;
	margin:3px 0;
	background: #353575;
	text-align: left;}
.contact-form-mini button {/*these styles control the look of the button, change as necessary*/
	margin: 0;/*do not change, controls positioning*/
	float: left;
	clear: left;
	display: block;
	overflow: hidden;
	text-indent: -999em;
	width:100px;
	height: 18px;
	background: url(../images/submit.png) no-repeat;
	text-align: left;
	border: none;}
.contact-form-mini button:hover {background-position: 0 -18px;}
.contact-form-mini span.error {	display: none;}
.contact-form-mini span.error, .contact-form-mini ul.error li {
	font-size: 11px;
	font-weight:normal; 
	color:#ff0000; 
	text-align:left; 
	padding: 3px 0 3px 18px;
    background: transparent url(../images/cancel.png) no-repeat left; }
.contact-form-mini h2.error {color: #ff0000;}
.contact-form-mini #message	{ margin: 9px 10px; padding: 9px; 
background: #232366 url(../images/form-success-bg.jpg) 0 100% repeat-x; border:solid 1px #5b589f;}
.contact-form-mini #message h2 {margin: 9px 0; text-align: center;}
.contact-form-mini #message p {margin:9px 0px; text-align: center;}
.contact-form-mini #checkmark {display: block; margin: 9px auto; text-align: center;}

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

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

fieldset {border: none; padding: 9px 0;}
fieldset fieldset {margin: 9px; border-bottom: 1px solid #46469a;}
fieldset div {clear: both;}
textarea {overflow: auto;}
.form-header {border-bottom: 1px solid #46469a;/*optional, change color to match site*/}
.form header ol {list-style: decimal;}
.form-header h3 {margin: 0 0 9px;}
.form-header p {margin: 0; padding-bottom: 18px;}
.form-footer {padding-top: 18px; text-align: center; border-top: 1px solid #46469a;/*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:#fec009;/* customize me! */
	border: 1px solid #46469a;
	text-align:center;
	line-height:31px;
	color:#46469a;/* customize me! */
	font-size:12px;
	font-weight:bold;}


/* referral form */
.referral-form {
	margin: 18px 0;
	padding: 10px;
	border:solid 2px #46469a;/*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:left;
	width:45%;
	float:left;
	line-height: 18px;
	padding-top: 4px;
	margin-left: 3%;}
.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 #46469a;
	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 #46469a;}
.referral-form p.radio input, .referral-form p.radio-float input {
	float: none;
	width: auto;
	margin: 0 0 0 2%;
	padding: 4px 2px;
	border: none;}

/* playlist form */
.playlist-form {
	margin: 18px 0;
	padding: 10px;
	border:solid 2px #46469a;/*optional, change color to match site*/
	background:#fafafa;/*optional, change color of background*/}
.playlist-form fieldset {border: none; padding: 9px 0;}
.playlist-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;
	margin-left: 3%;}
.playlist-form label span {/*sits below labels; holds instructions*/
	color:#666666;
	display:block;
	font-size:11px;
	font-weight:normal;
	text-align:left;
	width:100%;}
.playlist-form input, .playlist-form textarea {
	float:left;
	font-size:12px;
	padding:4px 2px;
	border:solid 1px #46469a;
	width:45%;
	margin:9px 0 9px 2%;
	background: #ffffff;
	position: relative;}
.playlist-form .artist-song-block {margin: 0 18px; clear: both;}
.playlist-form .artist-song-block label {width: 45%; margin-right: 2%; float: left; text-align: left;}
.playlist-form .artist-song-block label input {float: none; display: block; width: 90%; margin-left: 0;}
.playlist-form p.verification {
	clear: both;
	margin: 9px 0 9px 50%;
	font-size: 12px;}
.playlist-form p.verification {margin-top: 0;}
.playlist-form p.verification img {border: 1px solid #46469a;}


/* comment form */	
.comment-form {
	margin: 18px 0;
	padding: 10px;
	border:solid 2px #46469a;/*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:left;
	width:45%;
	float:left;
	padding-top: 4px;
	margin-left: 3%}
.comment-form label span {/*sits below labels; holds instructions*/
	color:#666666;
	display:block;
	font-size:11px;
	font-weight:normal;
	text-align:left;
	width:100%;}
.comment-form .label-block label {float: none; clear: both; width: 100%; text-align: left; margin-left: 0;}
.comment-form input, .comment-form textarea {
	float:left;
	font-size:12px;
	padding:4px 2px;
	border:solid 1px #46469a;
	width:45%;
	margin:9px 0 9px 2%;
	background: #ffffff;}
.comment-form p.verification {
	clear: both;
	margin: 9px 0 9px 50%;
	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 #46469a;}
.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; margin: 0;}
.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%;}



/* Errors */

/* JQuery */
input.error, textarea.error {border: 1px solid #ff0000; background: #fefda1; color: #ff0000;}
div.error {padding-left: 18px; background: #ffffff url(../images/validate_error.jpg) 0 0 no-repeat; color: #ff0000; 
		 display: block;margin:0 0 9px 50%;font-size: 11px;line-height: 18px;}
#contact-form div.error {margin: 0 20px 3px 0; background-color: #fefda1;}
div.success {padding-left: 18px; background: #ffffff url(../images/validate_ok.jpg) 0 0 no-repeat; color: #000000; 
		   display: block;margin:0 0 9px 50%;font-size: 11px;line-height: 18px;}