@charset "utf-8";
/* CSS Document */

/* CSS Document */
/* HTML, BODY ---------- */
* {margin:0; padding:0;}
body {margin:0; background: url(../images/tile.jpg) repeat-x #99c7ca;}
p, h2, h3, ul, blockquote, ol {padding-bottom:10px; padding-top:10px;}
ul, blockquote, ol {padding-left:30px; padding-right:20px;}
a {color:#00747a;}
a:hover {text-decoration:none;}
a img {border-style:none;}
* #address a {color: #0068a5;}
* #footer a {color:#FFF;}
input {margin-right:5px;}
* #learnmore a {color:#0196ce;}

/* edit.com visible styles */
BODY, TD, .NormalText { text-decoration: none; font-weight: normal; font-style: normal; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; color: 000; }

.Title		{ color: #0068A5; font-size: 22px; font-weight: bold; font-family: Arial; }
.Header		{ color: #009EDA; font-size: 16px; font-weight: bold; font-family: Verdana; }
.Subheader	{ color: #000000; font-size: 13px; font-weight: bold; font-family: Verdana; }

.LightBlue	{ color: #009EDA; }
.DarkBlue	{ color: #0068A5; }
.Black		{ color: #000000; }
.White		{ color: #FFFFFF; }

.SmallText	{ font-size: 10px; }
.MediumText	{ font-size: 16px; line-height: 16px; }
.LargeText	{ font-size: 24px; line-height: 24px; }

IMG.FloatLeft 	{ float: left; margin: 0 5px 5px 0; }
IMG.FloatRight 	{ float: right; margin: 0 0 5px 5px; }


/* LAYOUT ---------- */
* #wrap {width:917px; margin:0 auto; background:url(../images/tile-body.jpg) repeat-y; position: relative;}
* #body {width:917px; background:url(../images/bg-header.jpg) no-repeat;}
* #address {float:right; width:203px; margin-right:15px; padding-top:47px; font-size:13px; line-height:14px; color:#0068a5; text-align:right;}
* #content {width:842px; margin:0 auto; padding-bottom:30px; padding-top:80px; clear:both; min-height:340px; height:auto !important; height:340px;}
* #text {width:517px;}
* #learnmore {width:354px;  background:url(../images/tile-learn-more.gif) repeat-y; margin-left:70px; margin-top:10px;  color:#0196ce; clear:both;}
* #learnmoretop {background:url(../images/corner-top.gif) no-repeat top;}
* #learnmorebottom {background:url(../images/corner-bottom.gif) no-repeat bottom; padding:10px 0 10px 10px;}
* #footerwrap {width:917px; margin:0 auto; background:url(../images/tile-footer.gif) repeat-y; min-height:111px; height:auto !important; height:111px;}
* #footer {width:843px;  padding:11px 37px 0 37px; background:url(../images/bg-footer.jpg) no-repeat  bottom; min-height:111px; height:auto !important; height:111px; text-align:right; color:#FFF; }
* #banners {float:left;  width:360px;}
* #banners img {float: left; text-align: left;}
* #patientforms {float:right; clear:right; width:260px; border:2px solid #FFF; background:#84ac99; padding: 10px; margin:10px 10px 10px 50px;}
* .clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

* .clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}
/* HEADERS ---------- */
h1.sifr {font-size: 22px; font-weight: bold; letter-spacing: 2px; color: #0068a5; text-align: left; height: 36px; width: 480px;}
h2 {color:#009eda; font-size:16px;}

h1#logo {
float:left;
margin: 0;
padding: 0;
background-repeat: no-repeat; 
width: 425px;/* this width reflects the width of the logo image */
height: 142px; /* this height reflects the height of the heading image */
overflow: hidden; 
text-indent: -999em; /* hides rich text so only background image shows */
background: url(../images/logo.jpg) 0 0 no-repeat;}

h1#logo a {
display: block; 
height: 142px;/*same height as logo h1*/ 
width: 425px;/*same width as logo h1*/}

* #flash-logo h1#logo {float: none;}
/* CLASSES ---------- */
* #footer .sesame {color:#0065a3; font-size:10px;}
* .img {margin:0 10px 10px 30px; float:right; position: realtive; margin-top: -36px;}
* .img-left {margin:0 30px 10px 0px; float:left; position: realtive; }
* .imgleft {margin:0 10px 10px 0px; float:left;}
* .right {float:right;}
* .left {float:left;}
* .top  {color:#e4a732; font-size:11px; font-weight:bold;}
* .hide {display:none;}
* #flash-logo {width:425px; height:142px; float:left; margin:20px 0 0 7px;}
* #flash-home {width: 327; height: 326px;}
* .flashp {color:#000;  text-align:center; padding-top:70px; padding-left:60px;}
* .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;}
* .block {display:block;}
* .listnone {list-style:none;}
* .center {text-align:center;}
* .clear {clear:both;}
* .resources {border:2px solid #FFF;}
* .blue {color:#0a659e; font-weight:bold;}
* .neg-margin {position: relative; margin-top: -36px;}
/* NAVIGATION ---------- */


/* NAVIGATION MAIN ---------- */
ul#nav {list-style: none; padding: 0; margin:0 0 0 33px; width:848px; position:absolute; z-index:80; top:165px;}

/*  Sets styles for all links that are inside the ul id="nav" */
* #nav a {display: block;height: 36px; overflow: hidden; text-indent:-999em; }
* #nav li {float:left;}

/* Set the image for each nav item */
* #ouroffice {background: url(../images/nav-our-office.jpg); width:98px}
* #aboutorthodontics {background: url(../images/nav-about-orthodontics.jpg); width:155px}
* #braces101 {background: url(../images/nav-braces-101.jpg); width:100px}
* #emergencycare {background: url(../images/nav-emergency-care.jpg); width:142px}
* #treatments {background: url(../images/nav-treatments.jpg); width:102px}
* #games {background: url(../images/nav-games.jpg); width:78px}
* #contactus {background: url(../images/nav-contact-us.jpg); width:106px}
* #home {background: url(../images/nav-home.jpg); width:67px}

/* Shift the image position up to show the active state */
* #nav a:hover, #nav .active, #nav li:hover, #nav li.sfhover, 
* #nav li:hover #ouroffice, #nav li.sfhover #ouroffice, 
* #nav li:hover #aboutorthodontics, #nav li.sfhover #aboutorthodontics, 
* #nav li:hover #braces101, #nav li.sfhover #braces101, 
* #nav li:hover #emergencycare, #nav li.sfhover #emergencycare, 
* #nav li:hover #games, #nav li.sfhover #games,
* #nav li:hover #treatments, #nav li.sfhover #treatments, 
* #nav li:hover #home, #nav li.sfhover #home, 
* #nav li:hover #contactus, #nav li.sfhover #contactus {background-position:0 -36px;}

/* Set the cursor to default arrow so link does not appear clickable */
* #nav .active {cursor: default}

* #nav, #nav ul {list-style: none; margin: 0; }
* #nav li {display: inline; }
* #nav li ul {background: url(../images/bg-pop-up-bottom.gif) bottom no-repeat; left: -999em; position: absolute; z-index: 1; padding-top:0; border-top:2px solid #FFF; padding-bottom:4px;}
* #nav li ul li {float:none;}
* #nav li:hover ul, #nav li.sfhover ul {left: auto; margin: 0 0 0 -8px; color:#FFF; padding-top:-15px;}
* #nav ul li a {height:auto; margin: 0 0 0 -12px; padding:2px 0 2px 8px; text-decoration: none; width: 150px; text-indent:0; color:#FFF; font-size:12px; }
* #nav ul li a:hover {color:#009ad6; background:#FFF;}

/* SUB NAVIGATION ---------- */
div#sub {width: 340px; }


* html div#sub {margin-right: 0px;}

/* for IE6*/
div#sub ul {list-style: none; width:340px; padding:0; margin:0; color:#0196ce;  }

/*  Sets styles for all links that are inside the ul id="nav" */
* #sub a { color:#0196ce; text-decoration:none;}
* #sub a:hover {text-decoration:underline; color:#0196ce;}
* #sub li {display: inline; white-space: nowrap; }



/* LOGINS NAV ITEMS ---------- */

ul#logins {height: 36px; width:169px; list-style: none; padding:0; margin:0 0 0 744px; position:absolute; z-index:50; top:0;}

/*  Makes the list items sit next to each other */
* #logins li {float: left;}

/*  Sets styles for all links that are inside the ul id="nav" */
* #logins a {display: block;height: 36px; overflow: hidden; text-indent:-999em; width:169px;}

/* Set the image for each nav item */
* #patientlogin {background: url(../images/nav-patient-login.jpg);}

/* Shift the image position up to show the active state */
* #logins a:hover, #logins .active, #logins li:hover, #logins li.sfhover {background-position:0 -36px;}
/* Set the cursor to default arrow so link does not appear clickable */
* #logins .active {cursor: default}

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

/* Global form styles */
* .referral-form, * .appointment-form, * .comments, * .contact-form {
	width: 450px; 
	margin: 18px auto; 
	border: 2px solid #0066a4;
	-moz-border-radius: 9px;
	-webkit-border-radius: 9px;}
ul#errors {list-style: none;}
ul#errors li {margin-left: 9px;}
fieldset {border: none; padding: 9px 0;}
fieldset div {clear: both;}
* .form-header {border-bottom: 1px solid #0066a4;/*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 #0066a4;/*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:#0066a4;/* customize me! */
	border: 1px solid #0066a4;
	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 #0066a4;
	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 #0066a4;}
.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 #0066a4;
	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 #0066a4;}
.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 #0066a4;
	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 #0066a4;}
.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%;
}

/* Contact Form */
* .contact-form {
	width: 400px;
	margin: 18px 0;
	padding: 10px;
	background: #fafafa;}
.contact-form fieldset {border: none; padding: 9px 0;}
.contact-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: 9px 0 9px 0;}
.contact-form label.required {background: url(images/required_note.gif) 100% 50% no-repeat;}
.contact-form label span {/*sits below labels; holds instructions*/
	color:#666666;
	display:block;
	font-size:11px;
	font-weight:normal;
	text-align:left;
	width:100%;}
.contact-form input, .contact-form textarea {
	float:left;
	font-size:12px;
	padding:4px 2px;
	border:solid 1px #0066a4;
	width:45%;
	margin:9px 0 9px 2%;
	background: #ffffff;
	position: relative;}
.contact-form p.radio, .contact-form p.verification {
	clear: both;
	margin: 9px 0 9px 47%;
	font-size: 12px;}
.contact-form p.radio-float {
	clear: none;
	float:left;
	width: 45%;
	padding:0;
	margin:9px 0 9px 2%;}
.contact-form p.verification {margin-top: 0;}
.contact-form p.verification img {border: 1px solid #0066a4;}
.contact-form p.radio input, .contact-form p.radio-float input {
	float: none;
	width: auto;
	margin: 0 0 0 2%;
	padding: 4px 2px;}


/* Errors */

/* JQuery */
input.error, textarea.error {border: 1px solid #ff0000; background: #fefda1; }
div.error {padding-left: 18px;background: url(../images/validate_error.png) 0 0 no-repeat; color: #ff0000; 
		 display: block;margin:0 0 9px 47%;font-size: 11px; line-height: 18px;}
p.error {color: #ff0000; font-weight: bold;}
div.success {padding-left: 18px; background: url(../images/validate_ok.png) 0 0 no-repeat; color: #000000; 
		   display: block;margin:0 0 9px 47%;font-size: 11px; line-height: 18px;}



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

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}

* #content h2.media-center {
background:#000033;
color:#FFF;
margin:0;
padding:5px; width:410px;}
* #content div.media-center {
background:#336699;
color:#FFF;
display:inline-block;
margin-bottom:10px;
overflow:auto;
padding:10px; width:400px;}
* #content div.media-center a {
color:#FFF;}
* #content div.media-center img {
border:1px solid #FFF;}
* #content div.media-center h3 {color:#FFF;}


.img-left {
  margin: 0 20px 20px 0;
  float: left;
  clear: left;
}

.img-right {
  margin: 0 0 20px 20px;
  float: right;
  clear: right;
}

.border {
  border: solid 1px #333; /* Customize me! */
  /* Add more nifty stuff in here if you like */
}
#smartclip-thumb {
  /* Add more nifty stuff in here if you like */
}
#flash-clarity-smart-clip { width: 498px; height: 374px; } p.flash_notice { margin: 18px; padding: 9px; color: #ff0000; border: 1px dotted #ff0000; background: #ffffff; text-align: center; } .clear {clear: both;}