/* CSS Document */
@font-face {
 font-family: 'BlackJack';
	src: url('includes/blackjack-webfont.eot');
	src: local('?'), url('includes/blackjack-webfont.woff') format('woff'), url('includes/blackjack-webfont.ttf') format('truetype'), url('includes/blackjack-webfont.svg#webfontOCSyErlm') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* HTML, BODY ---------- */
* {margin:0; padding:0;}
body {margin:0; background:#83cbf1;}

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

.Title		{ color: #005288; font-size: 18px; font-weight: normal; font-family: Arial; font-style: italic; }
.Header		{ color: #005288; font-size: 14px; font-weight: bold; font-family: Arial; }
.Subheader	{ color: #FFFFFF; font-size: 13px; font-weight: bold; font-family: Arial; }

.DarkBlue	{ color: #005288; }
.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; }


p, h2, h3, ul, blockquote, ol {padding-top:10px; padding-bottom:10px;}
ul, blockquote, ol {padding-left:30px; padding-right:20px;}
a {color:#005288;}
a:hover {text-decoration:none;}
a img {border-style:none;}
* #text ul a, #text ul {color:#005288; font-style:italic; font-weight:bold;}
* #footer { position:relative; left:-30px;}
* #footer a {color:#8be2e7; text-decoration:none;}
* #footer a:hover {text-decoration:underline;}
* #footer p, #footer h2 {padding-top:5px; padding-bottom:5px;}

/* LAYOUT ---------- */
#centering { width:1223px; margin:0 auto;background:url(images/bg-center.gif) repeat-y }
* #wrap {background:url(images/BG.jpg) no-repeat; width:1002px; position:relative; left:221px;  }
* #body {background:url(images/bg-body.jpg) no-repeat; width:1002px; min-height:453px; height:auto !important; height:453px; }
* #bottom {background:url(images/bg-bottom.jpg) no-repeat bottom left; width:1002px; overflow:auto;}
* #text {width:511px; padding:140px 0 20px 235px; min-height:330px; height:auto !important; height:330px;}
* #forms {padding:10px; background-color:#FFF; border:10px solid #d1df8e;	width:180px; margin: 10px 10px 10px 10px; float:right; color:#003366; clear:right;}
* #forms h3, #forms a {color:#003366}
* #bannerinvisalign {position:absolute; z-index:70; top:564px; margin:0 0 0 9px;}
#tellafriend {position:absolute; z-index:70; top:674px; margin:0 0 0 9px;}
#facebook {position:absolute; z-index:70; top:674px; margin:0 0 0 138px;}
* #bannerdentofacial {position:absolute; z-index:30; top:761px; margin:0 0 0 294px; display: block;
					width: 369px; height: 107px;overflow: hidden; text-indent: -999em;}
* #footerwrap {width:841px; padding-top:44px; position:relative}
* #address {float:left; width:136px; padding:0 0 0 12px; color:#FFF;}
* #footer {float:left; width:533px; padding:106px 0 0 99px; text-align:center; color:#8be2e7;}

/* HEADERS ---------- */
* #footer h2 {color:#FFF; font-size:12px;}
* #text h2 {color:#005288; font-size:14px; clear: both;}
* #text h3 {color:#FFF; font-size:13px;}
h1 {margin: 0; padding:0;} /*background-repeat: no-repeat; height: 43px; width:254px; */
h1.home {color:#005288; font-family:'BlackJack'; font-size:24px; line-height:27px; }
#text h2.home {color:#005288; font-family:'BlackJack'; font-size:18px; line-height:18px;}
#title { color:#005288; font-family:'BlackJack'; font-size:24px; margin-bottom:20px}
h1#logo {
margin: 0;
padding: 0;
background-repeat: no-repeat; 
width: 268px;/* this width reflects the width of the logo image */
height: 230px; /* this height reflects the height of the heading image */
overflow: hidden; 
text-indent: -999em;} /* hides rich text so only background image shows */

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

/* CLASSES ---------- */
* #footer .sesame {color:#FFF; margin-bottom:0; padding-bottom:0}
p.breadcrumbs {color:#FFF; padding-top:40px;}
* .img {margin:0 0 0 382px; width:394px; height:224px; position:absolute; z-index:20; top:130px;}
* .right {float:right;}
* .left {float:left;}
* .top  {color:#e4a732; font-size:11px; font-weight:bold;}
* .hide {display:none;}
* .flash {z-index: 50; width:501px; height:231px; top:123px; margin-left:280px; position:absolute;}
* .flashp {color:#000; background-image: url(images/1.jpg); text-align:center; padding:30px 10px 0 0;}
* .flashp a {color:#000;}
* .block {display:block;}
* .listnone {list-style:none;}
* .center {text-align:center;}
* .clear {clear:both;}
* .resources {border:1px solid #000;}
* .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 */

/* NAVIGATION ---------- */

/* NAVIGATION MAIN ---------- */
ul#nav {list-style: none; padding: 0 0 20px 0; margin:0; width:197px; position:absolute; z-index:90; top:252px; background:url(images/nav-main-bg.jpg) no-repeat;}
ul#nav li {display: inline;}

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

/* Set the image for each nav item */
* #ouroffice {background: url(images/nav-our-office.jpg); }
* #aboutorthodontics {background: url(images/nav-about-orthodontics.jpg); }
* #yourfirstvisit {background: url(images/nav-your-first-visit.jpg); }
* #aboutbraces {background: url(images/nav-about-braces.jpg); }
* #emergencycare {background: url(images/nav-emergency-care.jpg); }
* #funandgames {background: url(images/nav-fun-and-games.jpg); }
* #treatmentoptions {background: url(images/nav-treatment-options.jpg); }

/* 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 #aboutbraces, #nav li.sfhover #aboutbraces, 
#nav li:hover #emergencycare, #nav li.sfhover #emergencycare, 
#nav li:hover #funandgames, #nav li.sfhover #funandgames, 
#nav li:hover #treatmentoptions, #nav li.sfhover #treatmentoptions {background-position:-167px 0pt;}

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

* #nav, #nav ul {list-style: none; margin: 0; padding:0;}
#nav li ul {left: -999em; position: absolute; z-index: 1; }
#nav li:hover ul, #nav li.sfhover ul {left: auto; margin: -35px 0 0 157px; }

#contact-menu a {cursor: default; display:block; }
#contact-menu  ul {left: -999em; position: absolute; z-index: 999; display:block }
#contact-menu  ul li { float:none; clear:left; margin:0; padding:0; background:#015289; list-style:none; display:block; width: 103px; height:24px}
#contact-menu:hover ul, #contact-menu.sfhover ul {left: auto; margin: -20px 0 0 -30px; }
#contact-menu ul li a { cursor:pointer; display: block; height: 24px; overflow: hidden; font:Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; width:103px; color:#FFF; text-indent:8px; text-decoration:none }
#contact-menu ul li a:hover {background:#83cbf1} 

/* SUB NAVIGATION - ORTHO ---------- */
ul#ortho {list-style: none; padding: 7px 0 15px 0; margin:0; width:193px; background:url(images/nav-bg-ortho.gif) no-repeat;}

/*  Sets styles for all links that are inside the ul id="nav" */
* #ortho a {display: block;height: 24px; overflow: hidden; font:Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; width:183px; color:#FFF; text-indent:8px; text-decoration:none }

/* Set the image for each nav item 
* #whybraces {background: url(images/nav-why-braces.gif); }
* #orthodonticsforchildren {background: url(images/nav-orthodontics-for-children.gif); }
* #twophasetreatment {background: url(images/nav-two-phase-treatment.gif); }
* #orthodonticsforadults {background: url(images/nav-orthodontics-for-adults.gif); }
* #tmjtmd {background: url(images/nav-tmj-tmd.gif); }
* #asktheorthodontist {background: url(images/nav-ask-the-orthodontist.gif); }
* #orthodictionary {background: url(images/nav-ortho-dictionary.gif); }
* #links {background: url(images/nav-links.gif); }*/

/* Shift the image position up to show the active state */
#ortho a:hover, #ortho .active, #ortho li:hover, #ortho li.sfhover, 
#ortho li:hover #whybraces, #ortho li.sfhover #whybraces, 
#ortho li:hover #twophasetreatment, #ortho li.sfhover #twophasetreatment, 
#ortho li:hover #orthodonticsforchildren, #ortho li.sfhover #orthodonticsforchildren, 
#ortho li:hover #orthodonticsforadults, #ortho li.sfhover #orthodonticsforadults, 
#ortho li:hover #tmjtmd, #ortho li.sfhover #tmjtmd, 
#ortho li:hover #orthodictionary, #ortho li.sfhover #orthodictionary, 
#ortho li:hover #links, #ortho li.sfhover #links, 
#ortho li:hover #asktheorthodontist, #ortho li.sfhover #asktheorthodontist { background:#83cbf1}

/* SUB NAVIGATION - OFFICE ---------- */
ul#office {list-style: none; padding: 7px 0 15px 0; margin:0; width:193px; background:url(images/nav-bg-treatments.gif) no-repeat;}

/*  Sets styles for all links that are inside the ul id="nav" */
* #office a {display: block;height: 24px; overflow: hidden; font:Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; width:183px; color:#FFF; text-indent:8px; text-decoration:none }

/* Set the image for each nav item 
* #meettheorthodontist {background: url(images/nav-meet-the-orthodontist.gif); }
* #meettheteam {background: url(images/nav-meet-the-team.gif); }
* #tourtheoffice {background: url(images/nav-tour-the-office.gif); }
* #eventscontests {background: url(images/nav-events-contests.gif); }
* #patientcomments {background: url(images/nav-patient-comments.gif); }*/

/* Shift the image position up to show the active state */
#office a:hover, #office .active, #office li:hover, #office li.sfhover, 
#office li:hover #meettheorthodontist, #office li.sfhover #meettheorthodontist, 
#office li:hover #meettheteam, #office li.sfhover #meettheteam, 
#office li:hover #tourtheoffice, #office li.sfhover #tourtheoffice, 
#office li:hover #patientcomments, #office li.sfhover #patientcomments {background:#83cbf1}

/* SUB NAVIGATION - BRACES ---------- */
ul#braces {list-style: none; padding: 7px 0 15px 0; margin:0; width:193px; background:url(images/nav-bg-braces.gif) no-repeat;}

/*  Sets styles for all links that are inside the ul id="nav" */
* #braces a {display: block;height: 24px; overflow: hidden; font:Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; width:183px; color:#FFF; text-indent:8px; text-decoration:none }

/* Set the image for each nav item 
* #lifewithbraces {background: url(images/nav-life-with-braces.gif); }
* #typesofbraces {background: url(images/nav-types-of-braces.gif); }
* #typesofappliances {background: url(images/nav-types-of-appliances.gif); }
* #palatalexpander {background: url(images/nav-palatal-expander.gif); }
* #bracesdiagram {background: url(images/nav-braces-diagram.gif); }
* #oralcarevideo {background: url(images/nav-oral-care-video.gif); }
* #retainers {background: url(images/nav-retainers.gif); }*/

/* Shift the image position up to show the active state */
#braces a:hover, #braces .active, #braces li:hover, #braces li.sfhover, 
#braces li:hover #lifewithbraces, #braces li.sfhover #lifewithbraces, 
#braces li:hover #typesofbraces, #braces li.sfhover #typesofbraces, 
#braces li:hover #typesofappliances, #braces li.sfhover #typesofappliances,
#braces li:hover #oralcarevideo, #braces li.sfhover #oralcarevideo,
#braces li:hover #bracesdiagram, #braces li.sfhover #bracesdiagram,
#braces li:hover #retainers, #braces li.sfhover #retainers, 
#braces li:hover #palatalexpander, #braces li.sfhover #palatalexpander {background:#83cbf1}

/* SUB NAVIGATION - TREATMENTS ---------- */
ul#treatments {list-style: none; padding: 7px 0 15px 0; margin:0; width:193px; background:url(images/nav-bg-treatments.gif) no-repeat;}

/*  Sets styles for all links that are inside the ul id="nav" */
* #treatments a {display: block;height: 24px; overflow: hidden; font:Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; width:183px; color:#FFF; text-indent:8px; text-decoration:none }

/* Set the image for each nav item 
* #orthodontictreatments {background: url(images/nav-orthodontic-treatments.gif); }
* #invisalign {background: url(images/nav-invisalign.gif); }
* #surgicalorthodontics {background: url(images/nav-surgical-orthodontics.gif); }
* #patientbeforeandafter {background: url(images/nav-patient-before-and-after.gif); }
* #dentofacialorthopedics {background: url(images/nav-dentofacial-orthopedics.gif); }*/

/* Shift the image position up to show the active state */
#treatments a:hover, #treatments .active, #treatments li:hover, #treatments li.sfhover, 
#treatments li:hover #orthodontictreatments, #treatments li.sfhover #orthodontictreatments, 
#treatments li:hover #invisalign, #treatments li.sfhover #invisalign, 
#treatments li:hover #surgicalorthodontics, #treatments li.sfhover #surgicalorthodontics,
#treatments li:hover #dentofacialorthopedics, #treatments li.sfhover #dentofacialorthopedics,
#treatments li:hover #patientbeforeandafter, #treatments li.sfhover #patientbeforeandafter {background:#83cbf1}

/* SUB NAVIGATION - FUN ---------- */
ul#fun {list-style: none; padding: 7px 0 15px 0; margin:0; width:193px; background:url(images/nav-bg-fun.gif) no-repeat;}

/*  Sets styles for all links that are inside the ul id="nav" */
* #fun a {display: block;height: 24px; overflow: hidden; font:Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; width:183px; color:#FFF; text-indent:8px; text-decoration:none }

/* Set the image for each nav item 
* #thegameroom {background: url(images/nav-the-game-room.gif); }
* #bracepainter {background: url(images/nav-brace-painter.gif); }
* #coloryourretainer {background: url(images/nav-color-your-retainer.gif); }*/

/* Shift the image position up to show the active state */
#fun a:hover, #fun .active, #fun li:hover, #fun li.sfhover, 
#fun li:hover #thegameroom, #fun li.sfhover #thegameroom, 
#fun li:hover #bracepainter, #fun li.sfhover #bracepainter, 
#fun li:hover #coloryourretainer, #fun li.sfhover #coloryourretainer {background:#83cbf1}


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

ul#logins {height: 36px; width:325px; list-style: none; padding:0; margin:0 0 0 450px; position:absolute; z-index:80; top:0px;}

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

/* Set the image for each nav item */
* #patientlogin {background: url(images/nav-patient-login.gif);width:103px;}
* #doctorlogin {background: url(images/nav-doctor-login.gif);width:85px;}
* #home {background: url(images/nav-home.gif);width:64px;}
* #contactus {background: url(images/nav-contact-us.gif);width:73px;}

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

/* FORMS------------------------*/

/* Global form styles */
* .contact-form {width: 500px;margin-top: 18px;}

fieldset {border: none; padding: 9px 1%;}
fieldset div {clear: both;}
fieldset p.note {text-align: right;}
textarea {overflow: auto;}
* .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;}

/* Contact Form */
#txtNumber { margin-left:48px;}
* .contact-form {
	clear: both;
	margin: 18px 0;
	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 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 2%;}
.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, .contact-form select {
	float:left;
	font-size:12px;
	padding:4px 2px;
	border:solid 1px #3993b1;
	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 #3993b1;}
.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, select.error, textarea.error {border: 1px solid #ff0000; background: #fefda1; color: #ff0000;}
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-----------------*/

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