/* HTML, BODY ---------- */
html {background: #E0D1A8 url(images/html.gif) repeat-x 0 150px; height: 100%; margin-bottom: 1px}
body {background: url(images/body.gif) no-repeat center 0; margin: 0; text-align: center}

/* TEXT ---------- */
body, table, input, textarea {color: #000; font: 11px/1.5em tahoma, sans-serif}

BODY, TD, .NormalText { font-weight: normal; text-decoration: none; font-style: normal; font-size: 11px; font-family: Tahoma, Arial, sans serif;}

.Header		{ color: #2E0C02; font-size: 20px; font-weight: normal; }
.Subheader	{ color: #AB7642; font-size: 14px; font-weight: bold; }
.Subheader2	{ color: #2E0C02; font-size: 11px; font-weight: bold; }

.LightBrown	{ color: #AB7642; }
.DarkBrown	{ color: #2E0C02; }
.Black		{ color: #000000; }

.SmallText	{ font-size: 10px; }
.MediumText	{ font-size: 16px; line-height: 16px; }
.LargeText	{ font-size: 24px; line-height: 24px; }

p {margin: 0 0 1em 0}
td {vertical-align: top}
* .flash p {background: #FFFF99; font-size: 10px; line-height: 14px; margin: 10px; padding: 5px}

/* HEADERS ---------- */
h1 {color: #2E0C02; font-size: 1.82em; font-weight: normal; margin: 0 0 .9em 0}
h2 {color: #AB7642; font-size: 1.27em; margin: 0}
h3 {color: #2E0C02; font-size: 11px; font-weight: bold; margin: 0}

/* FORMS ---------- */
form {margin: 0 0 1em 0}

/* LISTS ---------- */
ol, ul {margin-bottom: 1em; margin-top: 0}
* #footer ul {list-style: none; margin: 0 0 1em 0; padding: 0}
* #footer ul li {display: inline}

/* LINKS ---------- */
a {color: #ED1B24; text-decoration: underline}
a:hover {text-decoration: none}
a#logo {background: url(images/reznik-orthodontics.gif); float: left; height: 110px; overflow: hidden; text-indent: -999em; width: 330px}

/* NAVIGATION ---------- */
* #masthead {list-style: none; margin: 0; padding: 0}
* #masthead li {float: left}
* #masthead li a {display: block; line-height: 110px; overflow: hidden; text-indent: -999em; width: 150px}
* #patient-login {background: url(images/navigation/patient-login.gif)}
* #contact-us {background: url(images/navigation/contact-us.gif)}
* #home {background: url(images/navigation/home.gif)}
* #masthead li a:hover, #masthead li a.active, 
* #masthead li:hover #contact-us, #masthead li.sfhover #contact-us {background-position: 0 -110px}

* #navigation {height: 40px; list-style: none; margin: 0; padding: 0}
* #navigation li {float: left}
* #navigation li a {display: block; line-height: 40px; overflow: hidden; text-indent: -999em}
* #about-our-office {background: url(images/navigation/about-our-office.gif); width: 149px}
* #about-orthodontics {background: url(images/navigation/about-orthodontics.gif); width: 174px}
* #braces-101 {background: url(images/navigation/braces-101.gif); width: 90px}
* #emergency-care {background: url(images/navigation/emergency-care.gif); width: 138px}
* #invisalign {background: url(images/navigation/invisalign.gif); width: 96px}
* #the-game-room {background: url(images/navigation/the-game-room.gif); width: 133px}
#navigation a:hover, #navigation a.active, 
#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 {background-position: 0 -40px}

#masthead ul, #navigation ul {background: #E0D1A8; left: -999em; list-style: none; margin: 0; padding: 0 0 10px 0; position: absolute}
#masthead ul li, #navigation ul li {float: none}
#masthead li:hover ul, #masthead li.sfhover ul, #navigation li:hover ul, #navigation li.sfhover ul {display: block; left: auto}
#masthead ul li a, #navigation ul li a {border-bottom: 1px dotted #2E0C02; color: #AB7642; line-height: 14px; margin: 0 10px; padding-top: 6px; text-decoration: none; text-indent: 0; width: 130px}
#masthead ul li a:hover, #navigation ul li a:hover {color: #2E0C02}

/* IMAGES ---------- */
img, table {border: none}
* .border {border: 3px solid #AB7642; padding: 1px}
* .centered {display: block; margin: 0 auto}
* .clear {clear: both}
* .left {float: left; margin: 0 10px 10px 0}
* .right {float: right; margin: 0 0 10px 10px}

/* LAYOUT ---------- */
* #container {margin: 0 auto; position: relative; text-align: left; width: 780px}
* #content {background: #F7F3E9; clear: both; min-height: 170px; overflow: auto; padding: 20px 40px 9px 40px}
* html #content {height: 170px; overflow: visible}
* .sidebar {background: #E0D1A8; padding: 10px 10px 0 10px; width: 188px}
* #footer {background: #2E0C02 url(images/footer.gif) no-repeat; color: #E0D1A8; padding-top: 20px; text-align: center}

/* BRACES DIAGRAM ---------- */
* #braces-diagram {background: url(images/braces-diagram/braces-diagram-bg.gif); height: 374px; 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;
padding: .5em 0;}

ul#sesame-games img {
border: 0;
float: left;
margin-left: -210px;}

ul#sesame-games p {
padding-left: 210px;}