/* CSS Document */

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

* {margin:0; padding:0;}

body {margin:0; background:#d1df8e; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:11px; line-height:16px; color:#FFF;}

#col2 p, h2, h3, ul, blockquote {margin-top:20px; margin-bottom:20px;}

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

a {color:#FFF;}

a:hover {text-decoration:none;}

a img {border-style:none;}

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

.footerlinks, .footerlinks a {color:#4b7a91;}



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

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

#body {width:780px; background:url(images/header.gif) no-repeat; min-height:444px; }

#col1 {float:left; width:192px; padding-bottom:10px; padding-top:132px; padding-right:38px;}

#col2 {float:left; width:530px; padding-bottom:20px;}

#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:700px; margin:0 auto; background:url(images/footer-bg.gif) no-repeat; text-align:center; padding:68px 40px 50px 40px; line-height:18px; clear:both;}



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

h1 {background-repeat: no-repeat; height: 50px; width:300px; text-indent: -999em; margin: 92px 0 35px 0; padding:0;}

#col2 h2 {font-size:13px; color:#FFF; font-weight:normal; font-style:italic;}

#footer h2 {color:#3d728b; font-size:11px; font-style:normal;}

h1#logo {

margin: 0;

padding: 0;

background-repeat: no-repeat; 

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

height: 188px; /* 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: 770px;/*same height as logo h1*/ 

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



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

#footer .sesame {color:#FFF; font-weight:bold;}

.right {float:right;}

.top  {color:#d1df8e; font-weight:bold; clear:both;}

.hide {display:none;}

.flash {z-index: 100;}

.flashp {color:#000; background-image: url(images/1.jpg); text-align:center; width:270px; height:511px; font-weight:bold;}

.block {display:block;}

.listnone {list-style:none;}

.center {text-align:center;}

.office {color:#3d728b; font-weight:bold;}

.footerlinks {color:#4b7a91;}

.margin {margin:0 0 10px 10px;}

.margintop {margin-top:107px;}

p.clear {margin-top:20px; clear:both;}

.clear {clear:both;}



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





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

ul#nav {list-style: none; padding: 0 0 19px 0; margin:0; width:192px;}



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

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



/* Set the image for each nav item */

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

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

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

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

#gameroom {background: url(images/nav-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 #aboutus, #nav li.sfhover #aboutus, 

#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 #thegameroom, #nav li.sfhover #thegameroom, 

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

#nav li:hover #contactus, #nav li.sfhover #contactus {background-position:-192px 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: #d1df8e; left: -999em; padding: 5px 0 0 0; position: absolute; z-index: 1; border:#4686bb solid 1px;}

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

#nav ul li a {height:20px; margin: 0; text-decoration: none; width: 169px; text-indent:0; color:#4686bb; font-size:11px;	padding-left:5px; }

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





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

h2.media-center {

background:#000033;

color:#FFF;

margin:0;

padding:5px; width:490px;}

div.media-center {

background:#336699;

color:#FFF;

display:inline-block;

margin-bottom:10px;

overflow:auto;

padding:10px; width:480px;}

div.media-center a {

color:#FFF;}

div.media-center img {

border:1px solid #FFF;}

/* old module */
hr, .clear {
clear:both;}

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

.border-green { border:#d1df8e 10px solid}