*{margin: 0; padding: 0;}
body {
font: 12px/18px Arial,Verdana, Helvetica, sans-serif;
color: #000;
background: #79bcd9 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: #1f6cd5;font-weight: normal;}
a:hover, a:active  {text-decoration: none;color:#88a82a;}
.sub-nav a.active {color: #92683d;text-decoration: none;}

/* displays icons next to PDF and WORD docs */
.doc {
	padding: 4px 18px 5px 0;
	background: url(../images/icon_doc.gif) 100% 50% no-repeat;}
.pdf { 
	padding: 4px 18px 5px 0;
	background: url(../images/icon_pdf.gif) 100% 50% no-repeat;}
.video-link {
	padding: 4px 18px 5px 0;
	background: url(../images/icon_video.gif) 100% 50% no-repeat;}
#logo a {display: block; width: 445px; height: 98px; background: url(../images/logo.png) 0 0 no-repeat;}
.sesame-link a {font-size: 12px; color: #fefefe; text-decoration: none;}
.sesame-link a:hover {color: #fefefe; background: #0f75bc;}
dd a.toggle-link {display: none; text-align: right; font-weight: bold;}

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

h1 {
	font-size: 18px;
	color: #1f6cd5;
	line-height: 18px;
	font-weight: bold;
	margin: 9px 0 9px 0;}
h1#logo {
	margin: 0 0 0 27px;
	padding: 0;
	width: 445px;
	height: 98px;}
h1.jcir {font-size: 27px;margin: 0 0 9px;font-weight: bold;text-align: left; padding-top: 18px;}
h1.replaced {overflow: hidden; text-indent: -999em; background-repeat: no-repeat;}
h2 {
	font-size: 16px;
	font-weight: bold;
	line-height: 18px;
	margin: 18px 0;
	color: #88a82a;}
h2 span {font-size: 14px; font-weight: normal; color: #4396f8;}
h3 {
	color: #4396f8;
	font-size: 14px;
	line-height: 18px;
	margin: 9px 0 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;}


/*-------------------------
LISTS 
-------------------------*/
ol, ul, dl {
	list-style: none;
	margin: 9px 0;
}
dl {margin: 9px 0;}
dl.indent {margin: 9px 18px;}
dt {
	font-size: 14px;
	font-weight: bold;
	line-height: 18px;
	margin: 18px 0 0;
	color: #4396f8;}
dt em {color: #666666; font-weight: normal;}
dd {margin: 0 0 9px;}
dd ul {margin-left: 18px;}
dd ul li {margin-left: 18px;}
ul.bullet, ul#sitemap-list {
	list-style: none;
	display: block;
	margin-left: 18px;
}
ul.bullet li, ul#sitemap-list li {margin-left: 18px;padding-left:18px;background: url(../images/bullet.gif) 0 0 no-repeat}
ul#sitemap-list li {font-weight: bold; font-size: 14px;}
ul#sitemap-list li li {font-weight: normal; font-size: 12px;}
ul.bullet ul, ul#sitemap-list ul {margin: 0 0 9px 0;}
ul.bullet ul, ul#sitemap-list ul li {padding-left:18px;background: url(../images/bullet.gif) 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;
	margin-bottom: 9px;}
li h3, li p {margin: 0 18px;}
li > p {margin-bottom: 16px;}

/*-------------------------- 
PARAGRAPHS
-------------------------*/
p {
	font-size: 12px;
	line-height: 18px;
	margin: 0 0 18px 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;}
#address p {margin: 0 9px 27px; font-size: 14px; font-weight: bold;}
p.footer-text {font-size: 11px; font-weight: bold; margin: 0; color: #92683d; text-align: center;}
#footer p.text_nav {color: #1f6cd5; margin: 18px 0 0;}

/*--------------------------
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;}
dl.clear-each dt {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;}

/*--------------------------------- 
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 auto; text-align: center;}/* global margins for all flash mods */
#flash-home {width: 228px; height: 243px; background: url(../images/flash-home-bg.jpg) 0 0 no-repeat;}
/*--------------------------------- 
Images
---------------------------------*/
img {display: block;border: 0;outline: 0;}
.img-left {
	position: relative;
	float: left;
	margin: -9px 18px 18px 0;	
	clear: left;
}
.img-right {
	position: relative;
	float: right;
	margin: -9px 0 18px 18px;
	clear: right;
}
img.img-right, img.img-left {border: 4px solid #ffffff;}
img.link {border: 2px solid #7d7661; float: right; clear: right; margin: 0 0 9px 18px;}
#links-box img.link {clear: none; border: none; margin: 0 0 0 9px;}

/*---------------------------
Layout
---------------------------*/
#container {width: 810px; position: absolute; top: 0; left: 50%; margin-left: -405px; 
			background: url(../images/content-bg-tile.jpg) 0 192px repeat-y;}
#content-wrapper {margin: 0; padding: 0 0 36px;; background: url(../images/content-bg.jpg) 0 0 no-repeat;}
#header {height: 192px;}
#address {margin: 18px 0 9px 27px;}
#sub-placeholder {min-height: 27px; _height: 27px; width: 450px; margin: 5px 45px;}
#content {position: relative; min-height: 355px; margin: 0px 45px 0; padding: 27px 27px 36px; border: 2px solid #ffffff; background: rgba(246,255,245,0.70);}
#content.trans {background: url(../images/trans.png);}		  
#links-box {position: absolute; right: 27px; bottom: 9px; width: 70%; text-align: right; height: 45px;}
#footer {padding: 36px 45px 0; background: url(../images/footer-bg.jpg) 0 0 no-repeat;}
#footer-bottom {padding: 27px 45px; background: #79bcd9 url(../images/footer-bg-bottom.jpg) 0 0 no-repeat; text-align: center;}

/*NAV----------------------*/
#nav {width: 790px; height: 45px; position: absolute; top: 145px; left: 9px;background-image: url(../images/nav-bg.jpg);}
#nav ul {position: relative; width: 770px; margin: 0 0 0 10px; padding: 0;}
#nav ul li {float: left; margin: 0; padding: 0;}
#nav a {display: block;}

/*NAV Image replacement */
#about-our-office, #about-orthodontics, #faq, #about-braces, #treatment-options, #emergency-care,
#contact-us, #home {height: 44px; overflow: hidden; text-indent: -999em; background-image: url(../images/nav.jpg);}

#about-our-office {width: 114px; background-position: 0 0;}
li:hover #about-our-office, li.sfhover #about-our-office, li.active #about-our-office {background-position: 0 -46px;}
#about-orthodontics {width: 139px; background-position: -114px 0;}
li:hover #about-orthodontics, li.sfhover #about-orthodontics, li.active #about-orthodontics {background-position: -114px -46px;}
#faq {width: 39px; background-position: -253px 0;}
li:hover #faq, li.sfhover #faq, li.active #faq {background-position: -253px -46px;}
#about-braces {width: 97px; background-position: -292px 0;}
li:hover #about-braces, li.sfhover #about-braces, li.active #about-braces {background-position: -292px -46px;}
#treatment-options {width: 131px; background-position: -389px 0;}
li:hover #treatment-options, li.sfhover #treatment-options, li.active #treatment-options {background-position: -389px -46px;}
#emergency-care {width: 111px; background-position: -520px 0;}
li:hover #emergency-care, li.sfhover #emergency-care, li.active #emergency-care {background-position: -520px -46px;}
#contact-us {width: 84px; background-position: -630px 0;}
li:hover #contact-us, li.sfhover #contact-us, li.active #contact-us {background-position: -630px -46px;}
#home {width: 55px; background-position: -714px 0;}
li:hover #home, li.sfhover #home, li.active #home {background-position: -714px -46px;}


#nav ul ul {
	position: absolute;
	left: -999em;
	width: 180px;
	margin: 0 0 0 7px;
	border: 2px solid #ffffff;
	background: #a69d80;
	display: block;
}
#nav ul li:hover ul, #nav ul li.sfhover ul {left: auto;}
#nav ul ul li {display: inline; float: none;}
#nav ul ul li a, #subnav ul li a {display: block; padding: 4px 9px; color: #ffffff; text-decoration: none;}
#nav ul ul li a:hover, #subnav ul li a:hover, #nav ul ul li.active a, #subnav ul li.active a {background: #d1e09d; color: #7c7560;}

#subnav {margin: 4px 45px 4px;}
#subnav ul {display: inline;}
#subnav li {float: left; position: relative; margin: -1px 0 0 -1px; border: 1px solid #ffffff; border-width: 1px;}
#subnav ul li a {background: #a69d80; float: left; text-align: center; padding: 3px 9px 3px 9px; white-space: nowrap;}

/*--------------------------------
Office Tour
--------------------------------*/
#slideshow {
	width: 500px;
	margin: 9px auto 9px;
	text-align: center;
	border: 1px solid;
}
#slideshow img {display: block; border: none;}
#slideshow-nav li {list-style: none; display: inline; margin: 0; padding: 0;}
#slideshow-nav li a {float: left; display: block; width: 72px; height: 54px; margin: 8px; border: 1px solid #a69d80;}
#slideshow-nav li a:hover, #slideshow-nav li a.active {border-color: #4396f8;} 
h3#caption {
	text-align: center;
	margin: 0 18px;
}


/*---------------------------
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
-------------------------------*/
div#sesame-game {
background: #000;
line-height: 0;
margin: 10px auto;
text-align: center;
width: 400px}

ul#sesame-games {
list-style: none;
margin: 0;
padding: 0}

ul#sesame-games li {
clear: both;
display: block;
margin-left:0px;}

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}