/* HTML, BODY ---------- */
html {height: 100%; margin-bottom: 1px}
body {background: #EAEBDB; margin: 0; text-align: center}
/* TEXT ---------- */
body, table, input, textarea {color: #666; font: 12px/1.5em arial, sans-serif}
BODY, TD, .NormalText { font-weight: normal; text-decoration: none; font-style: normal; color: #666; font-size: 12px; font-family: Arial, Helvetica, Georgia, sans-serif; line-height: 18px; }
.Header { color: #7BA978; font-weight: normal; font-size: 16px; font-family: Georgia, serif; }
.Subheader { color: #B07E3B; font-weight: bold; font-size: 12px; }
.Green { color: #7BA978; }
.Brown { color: #B07E3B; }
.Black { color: #000000; }
.Gray { color: #666666; }
.SmallText { font-size: 10px; }
.MediumText { font-size: 16px; }
.LargeText { font-size: 24px; }
p {margin: 0; padding-bottom: 1em}
td {vertical-align: top}
* .flash p {background: #FFFF99; font-size: 10px; margin: 10px; padding: 5px}
/* HEADERS ---------- */
h1 {color: #7BA978; font: normal 1.42em georgia, serif; margin: 0 0 .71em 0}
h2 {color: #B07E3B; font-size: 1em; margin: 0}
h3 {font-size: 1em; margin: 0}
/* FORMS ---------- */
form {margin: 0 0 1em 0}
/* LISTS ---------- */
dl, ol, ul {margin-bottom: 1em; margin-top: 0}
/* LINKS ---------- */
a {color: #7BA978; text-decoration: underline}
a:hover {text-decoration: none}
a#logo {background: transparent; height: 140px; margin-bottom: 10px; overflow: hidden; text-indent: -999em}
/* NAVIGATION ---------- */
* #navigation {background: url(images/navigation-bg.gif); height: 470px; left: 10px; list-style: none; margin: 0; padding: 10px; position: absolute; top: 10px}
* #navigation li {display: inline}
* #navigation a {color: #FFF; display: block; font: 1.42em georgia, serif; line-height: 30px; padding: 0 10px; text-decoration: none; width: 200px}
* #navigation a:hover, #navigation a.active {color: #FDBE50}
* #masthead {background: url(images/masthead-bg.gif); color: #FFF; line-height: 35px; list-style: none; margin: 0; padding: 5px 10px 0 10px; text-align: right}
* #masthead li {display: inline}
* #masthead a {color: #FFF; font-weight: bold; text-decoration: none}
* #masthead a:hover, #masthead a.active {color: #FDBE50}
* #sub-navigation {background: #75A575; color: #FFF; list-style: none; margin: 0 0 1em 0; padding: 10px}
* #sub-navigation li {display: inline}
* #sub-navigation a {color: #FFF; font-weight: bold; text-decoration: none}
* #sub-navigation a:hover, #sub-navigation a.active {color: #FDBE50}
* #site-map {border-top: 1px solid #CCCBC9; list-style: none; margin: 0; padding: 1em 0; width: 500px}
* #site-map li {display: inline}
/* IMAGES ---------- */
img, table {border: none; display: block}
* .border {border: 4px solid #DFE1CC; padding: 1px}
* .centered {display: block; margin: 0 auto 1em auto}
* .clear {clear: both; }
* .left {float: left; margin: 0 10px 10px 0}
* .right {float: right; margin: 0 0 10px 10px}
* .flash img {float: left; margin-right: 10px}
IMG.GrayBorder {border: 4px solid #DFE1CC; padding: 1px}
IMG.FloatLeft {float: left; margin: 0 10px 10px 0}
IMG.FloatRight {float: right; margin: 0 0 10px 10px}
/* LAYOUT ---------- */
* #container {background: url(images/container-bg.gif) repeat-y; margin: 0 auto; padding-bottom: 20px; position: relative; text-align: left; width: 780px}
* #header {background: url(images/header-bg.gif); height: 120px; text-indent: -999em}
* #info {margin: -8.5em 0 0 -260px; position: absolute; width: 240px}
* #description {border-bottom: 1px solid #CCCBC9; color: #B07E3B; font-style: italic; margin-bottom: 1em}
* #content {margin-left: 260px; min-height: 420px; padding: 10px 10px 0 10px; width: 500px}
* html #content {height: 420px}
* .sidebar {background: #DFE1CC; font-size: .92em; padding: 10px 10px 0 10px; width: 165px}
* #footer {margin-left: 270px; width: 490px}
/* BRACES DIAGRAM ---------- */
* #braces-diagram {background: url(images/braces-diagram/braces-diagram-bg.gif); height: 374px; margin: 1em 0; position: relative; width: 425px}
* #braces-diagram a {cursor: help; display: block; position: absolute}
* #braces-diagram a:hover {background: transparent}
a#elastic-tie {height: 20px; left: 90px; top: 100px; width: 65px}
a#loop-archwire {height: 20px; left: 150px; top: 80px; width: 100px}
a#archwire {height: 20px; left: 190px; top: 100px; width: 65px}
a#bracket {height: 20px; left: 230px; top: 120px; width: 60px}
a#headgear-tube {height: 20px; left: 335px; top: 100px; width: 90px}
a#coil-spring {height: 20px; left: 150px; top: 300px; width: 65px}
a#tie-wire {height: 20px; left: 235px; top: 325px; width: 65px}
a#band {height: 20px; left: 270px; top: 300px; width: 40px}
a#hook {height: 20px; left: 315px; top: 280px; width: 35px}
a#elastic {height: 40px; left: 355px; top: 280px; width: 45px}
a#print {cursor: pointer; height: 23px; left: 365px; top: 351px; width: 60px}
* #braces-diagram a img {border: none; display: block; height: 0; position: absolute; width: 0}
* #braces-diagram a:hover img {height: 74px; width: 425px}
a#elastic-tie:hover img {left: -90px; top: -100px}
a#loop-archwire:hover img {left: -150px; top: -80px}
a#archwire:hover img {left: -190px; top: -100px}
a#bracket:hover img {left: -230px; top: -120px}
a#headgear-tube:hover img {left: -335px; top: -100px}
a#coil-spring:hover img {left: -150px; top: -300px}
a#tie-wire:hover img {left: -235px; top: -325px}
a#band:hover img {left: -270px; top: -300px}
a#hook:hover img {left: -315px; top: -280px}
a#elastic:hover img {left: -355px; top: -280px}
/* THE GAME ROOM ---------- */
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: inline-block}
ul#sesame-games img {border: 0; float: right; margin: 0 0 10px 10px}
ul#sesame-games p {padding-bottom: 1em}