/* CSS Document */

/* HTML, BODY ---------- */

* {margin:0; padding:0;}

body {margin:0; background:url(images/tile.jpg) repeat-x #004681; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:12px; line-height:18px; }

p, h2, h3, ul, blockquote, ol {padding-bottom:25px;}

ul, blockquote, ol {padding-left:30px; padding-right:20px;}

a {color:#004681;}

a:hover {text-decoration:none;}

a img {border-style:none;}

#footer a {color:#b2c8e0;}

#footer p {padding:0; margin:0;}

#address p {padding-bottom:18px;}





/* LAYOUT ---------- */



#wrap {margin:0 auto; width:780px; background: url(images/tile-body.gif) repeat-y; position:relative}

#body {width:780px; background:url(images/bg-body.jpg) no-repeat; min-height:851px; height:auto !important; height:851px;}

#address {width:224px; float:right; color:#004681; font-size:11px; line-height:14px; padding-top:33px; padding-right:13px; text-align:right;}

#content {width:466px; padding:0 70px 20px 244px; clear:both; min-height:800px}

#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}

#footer {width:547px; margin:0 auto; padding:22px 25px 20px 208px; background:url(images/bg-footer.gif) no-repeat #004681; text-align:right; font-size:11px; line-height:18px; color:#b2c8e0}

.border {border:#f0e13d 5px solid; margin:0 10px 10px 10px;}

/* HEADERS ---------- */

h1 {background-repeat: no-repeat; height: 97px; width:233px; text-indent: -999em; margin: 0; padding:0;}

#content h2 {color:#004681; font-size:12px; padding:0; margin:0;}

#content h3 {font-size:11px; color:#d8263c;}

#content h4 {font-size:11px; font-style:italic;}

#footer h2 {color:#a91d1c; font-weight:normal; padding-bottom:25px; font-size:11px; padding-left:48px;}

h1#logo {

margin: 0;

padding: 0;

background-repeat: no-repeat; 

width: 497px;/* this width reflects the width of the logo image */

height: 223px; /* this height reflects the height of the heading image */

overflow: hidden; 

text-indent: -999em; float:left;} /* hides rich text so only background image shows */



h1#logo a {

display: block; 

height: 223px;/*same height as logo h1*/ 

width: 497px;/*same width as logo h1*/}



/* CLASSES ---------- */

#footer .sesame {color:#88b79a;}

.img {border:#f0e13d 5px solid; margin:0 10px 10px 10px; float:right;}

.img-left {border:#f0e13d 5px solid; margin:0 10px 10px 0px; float:left;}

.right {float:right;}

.left {float:left;}

.top  {font-size:11px; font-weight:bold;}

.hide {display:none;}

.flash {width:537px; margin-left:237px;}

.flashp {color:#000; background-image: url(images/1.jpg); text-align:center; padding-bottom:200px; padding-right:50px;}

.block {display:block;}

.listnone {list-style:none;}

.center {text-align:center;}

.mission {position:absolute; z-index:102; top:992px; margin-left:41px;}

.sub#content {padding-top:64px;}

.yellow, .yellow a {color:#f0e13e;}

.black {color:#000;}

.clear {clear: both;}

.resources {border:#f0e13d 5px solid;}

.clearleft {clear:left;}

.clearright {clear:right;}

.name {float:right; clear:both;}



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





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

ul#nav {list-style: none; padding: 0; margin:0 0 0 45px; width:211px; position:absolute; z-index:80; top:368px;}



/*  Sets styles for all links that are inside the ul id="nav" */

#nav a {display: block;height: 28px; overflow: hidden; text-indent:-999em; width:168px}



/* Set the image for each nav item */

#meettheorthodontists {background: url(images/nav-meet-the-orthodontists.gif); }

#meettheteam {background: url(images/nav-meet-the-team.gif); }

#officelocations {background: url(images/nav-office-locations.gif); }

#whychooseus {background: url(images/nav-why-choose-us.gif); }

#newpatients {background: url(images/nav-new-patients.gif); }

#aboutorthodontics {background: url(images/nav-about-orthodontics.gif); }

#braces101 {background: url(images/nav-braces-101.gif); }

#treatmentoptions {background: url(images/nav-treatment-options.gif); }

#emergencycare {background: url(images/nav-emergency-care.gif); }

#thegameroom {background: url(images/nav-the-game-room.gif); }

#contactus {background: url(images/nav-contact-us.gif); }

#home {background: url(images/nav-home.gif); }



/* Shift the image position up to show the active state */

#nav a:hover, #nav .active, #nav li:hover, #nav li.sfhover, 

#nav li:hover #meettheorthodontists, #nav li.sfhover #meettheorthodontists, 

#nav li:hover #whychooseus, #nav li.sfhover #whychooseus, 

#nav li:hover #meettheteam, #nav li.sfhover #meettheteam, 

#nav li:hover #officelocations, #nav li.sfhover #officelocations, 

#nav li:hover #newpatients, #nav li.sfhover #newpatients, 

#nav li:hover #aboutorthodontics, #nav li.sfhover #aboutorthodontics, 

#nav li:hover #braces101, #nav li.sfhover #braces101,

#nav li:hover #treatmentoptions, #nav li.sfhover #treatmentoptions, 

#nav li:hover #emergencycare, #nav li.sfhover #emergencycare, 

#nav li:hover #thegameroom, #nav li.sfhover #thegameroom, 

#nav li:hover #home, #nav li.sfhover #home, 

#nav li:hover #contactus, #nav li.sfhover #contactus {background-position:-168px 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; }

#nav li {display: inline; }

#nav li ul {background: #a91d1c; left: -999em; padding: 5px; position: absolute; z-index: 1; }

#nav li:hover ul, #nav li.sfhover ul {left: auto; margin: -25px 0 0 148px; color:#FFF;}

#nav ul li a {height:17px; margin: 0; text-decoration: none; width: 196px; text-indent:0; color:#FFF; font-size:11px;	padding-left:5px;}

#nav ul li a:hover {color:#f0e13d;}





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



ul#logins {height: 146px; width:28px; list-style: none; padding:0; margin:0 0 0 1px; position:absolute; z-index:90; top:269px;}





/*  Sets styles for all links that are inside the ul id="nav" */

#logins a {display: block;height: 146px; overflow: hidden; text-indent:-999em; width:28px;}



/* Set the image for each nav item */

#patientlogin {background: url(images/nav-patient-login.gif);}

#doctorlogin {background: url(images/nav-doctor-login.gif);}



/* Shift the image position up to show the active state */

#logins a:hover, #logins .active, #logins li:hover, #logins li.sfhover {background-position:-28px 0;}

/* Set the cursor to default arrow so link does not appear clickable */

#logins .active {cursor: default}



/* PATIENT EDUCATION NAV ITEMS ---------- */



ul#pteducation {height: 84px; width:94px; list-style: none; padding:0; margin:0 0 0 82px; position:absolute; z-index:100; top:282px;}





/*  Sets styles for all links that are inside the ul id="nav" */

#pteducation a {display: block;height: 84px; overflow: hidden; text-indent:-999em; width:94px;}



/* Set the image for each nav item */

#patienteducation {background: url(images/nav-patient-education.jpg);}



/* Shift the image position up to show the active state */

#pteducation a:hover, #pteducation .active, #pteducation li:hover, #pteducation li.sfhover {background-position:-94px 0;}

/* Set the cursor to default arrow so link does not appear clickable */

#pteducation .active {cursor: default}



/* CONSULTATION NAV ITEMS ---------- */



ul#consultation {height: 53px; width:171px; list-style: none; padding:0; margin:0 0 0 35px; position:absolute; z-index:1; top:727px;}



/* icat NAV ITEMS ---------- */



ul#icat {height: 53px; width:171px; list-style: none; padding:0; margin:0 0 0 35px; position:absolute; z-index:101; top:734px;}



/* regular Appt NAV ITEMS ---------- */



ul#regularAppointment {height: 97px; width:171px; list-style: none; padding:0; margin:0 0 0 35px; position:absolute; z-index:101; top:801px;}



/*  Sets styles for all links that are inside the ul id="nav" */

#consultation a, #icat a {display: block;height: 53px; overflow: hidden; text-indent:-999em; width:171px;}

#regularAppointment a {display: block;height: 180px; overflow: hidden; text-indent:-999em; width:171px;}



/* Set the image for each nav item */

#freeconsultation {background: url(images/nav-consultation.jpg);} 

#regularAppointment {background: url(images/nav-reg-appointment.gif);}

#icatButton {background: url(images/nav-icat.jpg);}



/* Shift the image position up to show the active state */

#consultation a:hover, #consultation .active, #consultation li:hover, #consultation li.sfhover,

#icat a:hover, #icat .active, #icat li:hover, #icat li.sfhover,

#regularAppointment a:hover, #regularAppointment .active, #regularAppointment li:hover, #regularAppointment li.sfhover {background-position:-171px 0;}

/* Set the cursor to default arrow so link does not appear clickable */

#consultation .active, #icat .active, #regularAppointment .active {cursor: default}



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}



/* THE DAMON SYSTEM */



#content h2.media-center {

background:#000033;

color:#FFF;

margin:0;

padding:5px; width:476px;}

div.media-center {

background:#336699;

color:#FFF;

display:inline-block;

margin-bottom:10px;

overflow:auto;

padding:10px; width:466px;}

div.media-center a {

color:#FFF;}

div.media-center img {

border:1px solid #FFF;}

/* smartclip */
.flash-replaced .alt {
display: block;
width: 0px;
height: 0px;
position: absolute;
overflow: hidden;}
#flash-smartclip {
background: url(images/video-smartclip.jpg);
width: 400px;
height: 302px;}