/* Layout */
body {background: #d2d2d2 url(images/body-bg.jpg) repeat-x; margin: 0; text-align: center;}
#container {background: url(images/container-bg.gif) repeat-y; width: 892px; margin: 0 auto; text-align: left; position: relative;}
#wrap {background: url(images/wrap-bg.jpg) no-repeat; padding-top: 67px; min-height: 705px;}
* html #wrap {height: 655px;}
#wrap_sub {background: url(images/wrap-bg.jpg) no-repeat; padding-top: 67px; min-height: 540px;}
* html #wrap_sub {height: 540px;}
#header {background: url(images/head-bg.gif) repeat-x; height: 132px;}
#content {width: 488px; margin: 0 0 0 306px; position: relative;}
#footer {background: #d2d2d2 url(images/footer.jpg) no-repeat; text-align: center; font-size: 11px; padding: 20px;}
.sidebar {background: #cfc3ad; width: 105px; display: block; text-align: center; border: solid 1px #013366; float: right; margin: 5px 0 15px 15px; padding: 5px;}

.clear {clear: both;}
.cf:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.cf {display: inline-block;} /*this trips hasLayout for ie7*/
.cf {display: block;} /*this returns it back to normal*/
* html .cf {height: 1px;}

/* Flash */
p.upgrade {width: 50%; background: #e4e4e4; font-size: 10px; text-align: left; margin: 20px auto; padding: 5px; border: solid 1px #000;}
#flash_home {width: 488px; height: 221px;}

/* Images */
img {border: 0; display: block;}
.img_center {margin: 0 auto; display: block;}
.img_center_border {border: solid 1px #325c96; margin: 0 auto; padding: 3px; display: block;}
.img_left_border {border: solid 1px #325c96; margin: 5px 15px 15px 0; padding: 3px; float: left; clear: left;}
.img_right_border {border: solid 1px #325c96; margin: 5px 0 15px 15px; padding: 3px; float: right; clear: right;}

/* Text */
body, table {font: 12px Verdana, Arial, Helvetica, sans-serif; color: #325c96;}
p {margin: 0 0 10px 0;}
.small {font-size: 10px;}

/* Links */
a {color: #325c96;}
a:hover {color: #84955e;}
#footer a {color: #325c96; text-decoration: none;}
#footer a:hover {text-decoration: underline; color: #84955e;}
#footer a.sesame {font-size: 10px;}
#logo {margin: 0 0 0 56px; float: left; display: block;}

/* Lists */
ol, ul {margin-bottom: 10px; margin-top: 0;}
dl.logos, dl.logos dt, dl.logos dd {list-style: none; margin: 0; padding: 0;}
dl.logos {border: 1px solid #CCC; border-width: 0 0 1px 1px; margin-top: 10px; padding: 10px 0 5px 10px; width: 50%;}
dl.logos dd {margin-bottom: 10px; padding: 10px 0 5px 0;}
dl.logos span {font-size: 14px; font-weight: bold; line-height: normal;}

/* Headings */
h1 {width: 488px; height: 42px; margin: 0; text-indent: -999em; overflow: hidden;}
h2 {font: bold 14px "Trebuchet MS", Verdana, Arial; color: #84955e; margin: 0 0 10px 0;}
h3 {font-size: 12px; font-weight: bold; color: #325c96; margin: 0;}
h4 {font-size: 12px; color: #325c96; margin: 10px 0;}


h1.slogan {background: url(images/slogan.gif); width: 323px; height: 39px; margin: 62px 0 0 80px; float: left;}
h1.welcome {background: url(images/titles/welcome.jpg); height: 62px; margin-top: 10px;}
h1.about-our-office {background: url(images/titles/about-office.jpg);}
h1.what-sets-us-apart {background: url(images/titles/what-sets-apart.jpg);}
h1.meet-dr-huse {background: url(images/titles/meet-doctor.jpg);}
h1.meet-the-team {background: url(images/titles/meet-team.jpg);}
h1.office-policies {background: url(images/titles/office-policies.jpg);}
h1.about-orthodontics {background: url(images/titles/about-ortho.jpg);}
h1.why-braces {background: url(images/titles/why-braces.jpg);}
h1.for-children {background: url(images/titles/for-children.jpg);}
h1.for-adults {background: url(images/titles/for-adults.jpg);}
h1.two-phase-treatment {background: url(images/titles/two-phase.jpg);}
h1.orthodontic-treatments {background: url(images/titles/ortho-treatments.jpg);}
h1.surgical-orthodontics {background: url(images/titles/surgical-ortho.jpg);}
h1.ortho-dictionary {background: url(images/titles/ortho-dictionary.jpg);}
h1.faq {background: url(images/titles/faq.jpg);}
h1.resources {background: url(images/titles/resources.jpg);}
h1.braces-101 {background: url(images/titles/braces-101.jpg);}
h1.life-with-braces {background: url(images/titles/life-braces.jpg);}
h1.types-of-braces {background: url(images/titles/types-braces.jpg);}
h1.types-of-appliances {background: url(images/titles/types-appliances.jpg);}
h1.invisalign {background: url(images/titles/invisalign.jpg);}
h1.braces-diagram {background: url(images/titles/braces-diagram.jpg);}
h1.brace-painter {background: url(images/titles/brace-painter.jpg);}
h1.retainers {background: url(images/titles/retainers.jpg);}
h1.emergency-care {background: url(images/titles/emergency-care.jpg);}
h1.before-and-after {background: url(images/titles/before-after.jpg);}
h1.the-game-room {background: url(images/titles/game-room.jpg);}
h1.contact-us {background: url(images/titles/contact.jpg);}
h1.locations {background: url(images/titles/locations.jpg);}
h1.comment-form {background: url(images/titles/comment-form.jpg);}
h1.refer-a-friend {background: url(images/titles/referrals.jpg);}
h1.site-map {background: url(images/titles/site-map.jpg);}

/* Side Navigation */
#nav {width: 206px; margin: 0; padding: 0; left: 71px; top: 221px; position: absolute; z-index: 2;}
#nav a {width: 206px; height: 26px; display: block; text-decoration: none; text-indent: -999em; overflow: hidden;}

#about-office {background: url(images/nav/about-office.jpg);}
#about-ortho {background: url(images/nav/about-ortho.jpg);}
#braces-101 {background: url(images/nav/braces-101.jpg);}
#before-after {background: url(images/nav/before-after.jpg);}
#game-room {background: url(images/nav/game-room.jpg);}
#contact {background: url(images/nav/contact.jpg);}
#home {background: url(images/nav/home.jpg);}
#nav li a.invisalign {border: solid 1px #d2d2d2; width: 198px; height: 98px; margin: 0 0 20px 8px;}
#nav li p {font-size: 11px; margin: 0 0 10px 20px;}


#nav a:hover, #nav a.active,
#nav li:hover #about-office, #nav li.sfhover #about-office,
#nav li:hover #about-ortho, #nav li.sfhover #about-ortho,
#nav li:hover #braces-101, #nav li.sfhover #braces-101,
#nav li:hover #contact, #nav li.sfhover #contact {background-position: 0 26px;}
#nav a.active {cursor: default;}

/* Drop Down */
#nav ul {line-height: 1; list-style: none; margin: 0; padding: 0; border: 0;}
#nav li {display: inline;}
#nav li ul {background: #d1d7e6; border: solid 1px #325c96; font: "Trebuchet MS", Verdana, Arial; font-size: 11px; left: -9999px; position: absolute; z-index: 4; padding: 3px;}
#nav li:hover ul, #nav li.sfhover ul {left: auto; margin: -26px 0 0 206px;}
#nav ul li a {color: #325c96; padding: 2px 0 2px 5px; width: 150px; height: 18px; line-height: 18px; text-indent: 0;}
#nav ul li a:hover {color: #84955e;}

/* 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;}
ul#sesame-games img {border: 0; float: right; margin: 0 0 10px 10px;}
ul#sesame-games p {padding-bottom: 1em;}