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

@charset "utf-8";


/* CSS Document */

.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;}
 
/* HTML, BODY ---------- */
* {margin:0; padding:0;}
body {margin:0; background: url(../images/tile.jpg) repeat-x #60605f; font-family: Arial, Helvetica, sans-serif; font-size:13px; line-height:20px; color:#FFF;}
p, h2, h3, ul, blockquote, ol {padding-bottom:10px; padding-top:10px;}
ul, blockquote, ol {padding-left:30px; padding-right:10px; padding-top:10px;}
a {color:#fc9b15; }
a:hover {text-decoration:none;}
a img {border-style:none;}
#footer a {color:#779fdc; padding-right:10px;}
#footer p {margin:0; padding:0;}
p.breadcrumbs, .breadcrumbs a {font-size:11px; color:#9cbae8; font-weight:bold;}
#video-our-invisalign-video {border:1px solid #FFF; background:#FFF; width:550px; height:400px;}

/* LAYOUT ---------- */
#wrap {width:932px; margin:0 auto; background:url(../images/bg-body.jpg) no-repeat; min-height:680px; height:auto !important; height:680px;}
#content {width:651px; clear:both; padding-bottom:20px; margin-left:278px;}
#footerwrap {width:100%; background:url(../images/tile-footer.jpg) repeat-x #13499c; margin:0; padding:0; clear:both;}
#footer {width:568px; margin:0 auto; padding:25px 87px 50px 277px; line-height:18px;}
#address {float:left; width:354px; padding-top:95px; color:#08367c; font-size:13px; text-align:right; padding-left:202px;}


/* HEADERS ---------- */
h1 {background-repeat: no-repeat; height: 110px; width:297px; text-indent: -999em; margin: 0; padding:0px 0 0 0; background-position: bottom;}
h1.replaced {text-indent: -999em; background-repeat: no-repeat; background-position: 0 20px; padding:0; margin:0; overflow: hidden; }
h1.jcir {font-size: 35px;margin: 0;font-weight: normal;text-align: left; }
#footer h2 {color:#fc9b15; font-size:13px; margin:0; padding:0; }
#content h3 {color:#FFF; font-size:13px;}
#content h2 {color:#fda328; font-size:15px;}

h1#logo {float:left;
margin: 0 0 50px 0;
padding: 0;
background-repeat: no-repeat; 
width: 369px;/* this width reflects the width of the logo image */
height: 176px; /* 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: 176px;/*same height as logo h1*/ 
width: 369px;/*same width as logo h1*/}

/* CLASSES ---------- */
#footer .sesame {color:#f7f7f7;}
.img {margin:0 0 10px 10px;}
.right {float:right;}
.left {float:left;}
.top  {color:#e4a732; font-size:11px; font-weight:bold;}
.hide {display:none;}
.flashhome { clear:both; margin-left: 233px; z-index: 78; width:696px; height:262px; }
.flashp {color:#000; background-image: url(images/1.jpg); text-align:center; padding-bottom:160px;}
.block {display:block;}
.listnone {list-style:none;}
.center {text-align:center;}
.clear {clear:both;}
.resources {border:1px solid #fc9405; padding:5px; background:#FFF;}
.starter {color:#fda328; font-size:15px; font-weight:bold;}


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


/* NAVIGATION MAIN ---------- */
ul#nav {list-style: none; padding: 0; margin:0; width:932px; position:absolute; z-index:80; top:176px; border-top:1px solid #fec475; }

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

/* Set the image for each nav item */
#aboutus {background: url(../images/nav-about-us.jpg); width:87px}
#aboutbraces {background: url(../images/nav-about-braces.jpg); width:132px}
#aboutorthodontics {background: url(../images/nav-about-orthodontics.jpg); width:200px}
#treatmentoptions {background: url(../images/nav-treatment-options.jpg);width:179px}
#contactus {background: url(../images/nav-contact-us.jpg); width:116px}
#home {background: url(../images/nav-home.jpg); width:62px}
#emergencycare {background: url(../images/nav-emergency-care.jpg); width:156px}

/* Shift the image position up to show the active state */
#nav a:hover, #nav .active, #nav li:hover, #nav li.sfhover, 
#nav li:hover #aboutus, #nav li.sfhover #aboutouroffice, 
#nav li:hover #aboutbraces, #nav li.sfhover #aboutbraces, 
#nav li:hover #treatmentoptions, #nav li.sfhover #treatmentoptions, 
#nav li:hover #home, #nav li.sfhover #home, 
#nav li:hover #emergencycare, #nav li.sfhover #emergencycare, 
#nav li:hover #contactus, #nav li.sfhover #contactus {background-position:0 -45px;}

/* 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: #8ca2c3; left: -999em; padding: 12px 0; position: absolute; z-index: 1; border:1px solid #FFF;}
#nav li ul li {float:none;}
#nav li:hover ul, #nav li.sfhover ul {left: auto; margin: -5px 0 0 10px; color:#454545;}
#nav ul li a {height:auto; margin: 0; text-decoration: none; width: 167px; text-indent:0; color:#454545; font-size:13px; padding:0 12px; font-weight:bold;}
#nav ul li a:hover {color:#FFF; }

ul#sitemap {list-style:circle;}
#sitemap li a {background:none; text-decoration:underline}
#sitemap li a:hover {text-decoration:none;}


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

ul#logins {height: 50px; width:354px; list-style: none; padding:0; margin:0 0 0 577px; position:absolute; z-index:90; 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: 50px; overflow: hidden; text-indent:-999em; }

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

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


/* CALLOUTS ---------------*/
ul#callouts {position:absolute; top:240px; margin:0; width:203px; z-index:3; padding:0; list-style: none;}
#callouts a {display:block; height:82px; overflow:hidden; text-indent:-999em; width:203px;}

#video {background:url(../images/callout-view-our-video.gif);}
#getstarted {background:url(../images/callout-get-started.gif);}
#invisalign {background:url(../images/callout-invisalign.gif);}
#invisalignteen {background:url(../images/callout-invisalign-teen.gif);}
#internetoffer {background:url(../images/callout-internet-offer.gif);}

#callouts .active {cursor:default;}



/* SESAME CONTENT ----------*/
.left {
float:left;
margin:0 10px 10px 0;}
img.right {
float:right;
margin:0 0 10px 10px;}
.clear {
clear:both;}
#damon-bracket {
display:block;
margin:0 auto 10px auto;}
#damon-wrap {
width:400px;
margin:0 auto;}
#damon-left {
float:left;
width:175px;
margin-right:20px;}
#damon-right {
float:left;
width:170px;}
#flash-damon-system-comparison {
margin:0 auto;
width:250px;}
#video-the-damon-system {
margin: 0 15px 15px 0;
width: 240px;
height: 206px;
float: left;
clear: left;}
.flash-replaced .alt {
display: block;
width: 0px;
height: 0px;
position: absolute;
overflow: hidden;}