* { margin: 0; outline: none; padding: 0; }
body { background: #FFEACD url(images/bg.jpg) repeat-x; }

/* - - - - - - - - - - TEXT - - - - - - - - - - */
body, form, input, textarea { color: #000; font-family: verdana, tahoma, arial, sans-serif; font-size: 12px; }
p { color: #000; line-height: 18px; margin: 10px 0; }
blockquote { margin: 10px 40px; padding: 0; }
.content ul { color: #3D4668; font-size: 11px; line-height: 14px; list-style: disc inside url("images/list.gif"); margin: 10px 40px; padding: 0; }
.content ul a { color: #3D4668; }
.content ul li { margin: 10px 0; padding: 0; }
html: not([lang*=""]) .content ul li { width: 100%; }
.content ul ul { color: #3D4668; font-size: 11px; line-height: 14px; list-style: circle inside url("images/list.gif"); margin: 10px 30px; padding: 0; }
.content ul ul a { color: #3D4668; }
.content ul ul li { margin: 10px 0; padding: 0; }
html: not([lang*=""]) .content ul ul li { width: 100%; }
.flash p { margin: 30px 0 0 290px; padding: 10px; width: 570px; }
div.hr { background: #4B9363; clear: right; height: 1px; margin: 10px 0; padding: 0; width: 100%; }
div.hr hr { display: none; }
#address p { color: #3D4668; font-size: 11px; line-height: 14px; margin: 0; }
#footer-green p { color: #3D4668; font-size: 11px; line-height: 14px; margin: 0 auto; text-align: left; width: 777px; }
#resource-list { list-style: none none; margin: 0; padding: 0; }
#resource-list li { padding: 0 0 20px; }
#retainers-list, #site-map-list { margin: 0; padding: 0; }
p#sesame  { padding: 15px 0 0; }

/* - - - LINKS - - - */
a { color: #3D4668; text-decoration: underline; }
a:hover { text-decoration: none; }
.back-to-top a { color: #3D4668; font-size: 11px; line-height: 14px; text-decoration: none; }
.back-to-top a:hover { color: #3D4668; text-decoration: underline; }
#footer-green a { color: #3D4668; text-decoration: none; }
#footer-green a:hover { text-decoration: underline; }

/* - - - HEADERS - - - */
h1 { background: no-repeat; height: 35px; margin: 30px 0 10px 0; overflow: hidden; text-indent: -9999px; }
h2 { color: #3D4668; font-family: verdana, tahoma, arial, sans-serif; font-size: 12px; margin: 10px 0; }
h3 { color: #000; font-family: verdana, tahoma, arial, sans-serif; font-size: 11px; margin: 10px 0; }
h4 { color: #3D4668; font-family: verdana, tahoma, arial, sans-serif; font-size: 12px; font-weight: normal; line-height: 18px; margin: 5px auto; text-align: left; }
#footer-purple h4 { width: 777px; }

/* - - - - - - - - - - IMAGES - - - - - - - - - - */
img { border: 0; display: block; }
img.center { clear: right; margin: 0 auto; }
img.left { clear: left; float: left; margin: 0 10px 10px 0; }
img.right { clear: right; float: right; margin: 0 0 10px 10px; }
.flash img { float: left; padding: 10px; }
.map { border: 4px solid #3D4668; margin: 10px 0; }

/* - - - - - - - - - - LAYOUT - - - - - - - - - - */
.back-to-top { clear: both; text-align: right; width: 100%; }
.content { margin: 0 0 0 290px; width: 570px; }
#address { clear: left; margin: -100px 0 0 -200px; position: absolute; }
#header { background: #FFF url(images/header.jpg) no-repeat; height: width: 950px; overflow: hidden; }
#header-link { display: block; height: 100px; overflow: hidden; text-indent: -9999px; width: 370px; } 
#flash-home { float: none; margin: 0 0 0 40px; }
#flash-braces-diagram, #flash-brace-painter, #flash-common-treatments, #flash-types-of-appliances, #flash-types-of-braces { margin: 0 0 50px 0; }
#flash-brushing-and-flossing { margin: 10px 0; }
#flash-emergency-care { margin: 10px 0 50px 0; }
#footer-green { background: #96C9A7; border-top: 1px solid #A0A5C9; padding: 20px 0; text-align: center; width: 100%; }
#footer-purple { background: #A0A5C9; border-bottom: 1px solid #96C9A7; margin: 30px 0 0;padding: 20px 0; text-align: center; width: 100%; }
#site { margin: 0 auto; width: 950px; }

/* - - - - - - - - - - NAVIGATION - - - - - - - - - - */
#navigation-wrapper { display: inline; float: left; margin: 30px 0 0 60px; width: 176px; }
ul#navigation { list-style: none; margin: 0 0 500px 0; width: 176px; }
#navigation li { float: left; }
#navigation a { display: block; height: 35px; overflow: hidden; text-indent: -9999px; width: 176px; }

/* - - - IMAGES - - - */
#patient-login { background: url(images/nav/patient-login.gif); width: 109px; }
#doctor-login { background: url(images/nav/doctor-login.gif); width: 108px; }
#home { background: url(images/nav/home.gif); }
#about-our-office { background: url(images/nav/about-our-office.gif); }
#about-orthodontics { background: url(images/nav/about-orthodontics.gif); }
#braces-101 { background: url(images/nav/braces-101.gif); }
#treatment-options { background: url(images/nav/treatment-options.gif); }
#emergency-care { background: url(images/nav/emergency-care.gif); }
#fun-and-games { background: url(images/nav/fun-and-games.gif); }
#contact-us { background: url(images/nav/contact-us.gif); }

/* - - - - - - - - - - HORIZONTAL NAVIGATION - - - - - - - - - - */
#horizontal-navigation-wrapper { margin: 7px 0 0 643px; width: 217px; }
ul#horizontal-navigation { height: 33px; list-style: none; width: 217px; }
#horizontal-navigation li { float: left; }
#horizontal-navigation a { display: block; height: 33px; overflow: hidden; text-indent: -9999px; }

/* - - - SUBNAVIGATION - - - */
#navigation li ul { background: #4B9363; border: 1px solid #2B8D5B; left: -9999px; list-style: none; position: absolute; z-index: 1; width: 184px; }
#navigation li:hover ul, #navigation li.sfhover ul { left: auto; margin: -35px 0 0 176px; }
#navigation ul li { display: block; }
#navigation ul li a { color: #FFEACD; font-size: 12px; height: 30px; line-height: 30px; padding-left: 10px; text-decoration: none; text-indent: 0; width: 174px; }

/* - - - ROLLOVER EFFECTS - - - */
#navigation a:hover { background-position: 0 -35px; }
#navigation .active { background-position: 0 -70px; }
#navigation li:hover #home, #navigation li.sfhover #home,
#navigation li:hover #about-our-office, #navigation li.sfhover #about-our-office,
#navigation li:hover #about-orthodontics, #navigation li.sfhover #about-orthodontics,
#navigation li:hover #braces-101, #navigation li.sfhover #braces-101,
#navigation li:hover #treatment-options, #navigation li.sfhover #treatment-options,
#navigation li:hover #emergency-care, #navigation li.sfhover #emergency-care,
#navigation li:hover #fun-and-games, #navigation li.sfhover #fun-and-games,
#navigation li:hover #contact-us, #navigation li.sfhover #contact-us { background-position: 0 -35px; }

/* - - - HORIZONTAL ROLLOVER EFFECTS - - - */
#horizontal-navigation a:hover, #horizontal-navigation .active { background-position: 0 -33px; }

/* - - - SUBNAVIGATION ROLLOVER EFFECTS - - - */
#navigation ul li a:hover, #navigation ul li .active { background: #6FA982; color: #FFEACD; font-weight: normal; }

/* - - - CURSOR EFFECTS - - - */
#navigation .active { cursor: default; }

/* - - - - - - - - - - THE GAME ROOM - - - - - - - - - - */
div#sesame-game {
background: #000;
line-height: 0;
margin: 10px auto;
text-align: center;
width: 400px}

ul#sesame-games {
float: left;
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}