/* Layout */

body {background: #70480f url(images/body_bg.gif) repeat-x; margin: 0; text-align: center; font: 12px/15px "Trebuchet MS", Verdana, Arial; color: #70480f;}

#container {background: url(images/container_bg.gif) repeat-y; width: 776px; margin: 0 auto; text-align: left; position: relative;}

#header {margin-bottom: 10px;}

#home_wrap {background: url(images/container_bg.gif) repeat-y; width: 745px; padding: 10px 10px 10px 21px;}

#home_text {width: 285px; margin: 0 0 0 15px; float: left;}

#home_list {float: right; margin: 0 0 0 5px;}

#content_wrap {background: url(images/content_bg.gif) repeat-y; width: 756px; padding: 0 0 0 20px;}

#content {width: 736px;}

#content_bottom {background: url(images/content_bottom.gif); height: 10px;}

#right_col {background: url(images/right-col_top.jpg) no-repeat; width: 235px; height: 10px; float: right;}

#footer {background: #70480f url(images/main_bottom.gif) no-repeat; padding: 25px 21px 20px 21px; color: #fff;}

#footer #address {width: 175px; float: right; text-align: right;}

.sidebar {background: url(images/empty_frame.jpg) no-repeat; width: 138px; height: 278px; display: block; text-align: center; float: right; margin: 0; padding: 50px 30px;}

#damon {width: 450px; margin-bottom: 10px;}

#damon .system {width: 173px; float: left; margin-right: 20px;}



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

#flash-brace-painter {background: url(images/brace-painter-bg.gif) no-repeat; width: 500px; height: 430px;}

#home-flash {background: url(images/flash_bg.gif); width: 431px; height: 311px; margin: 0; float: left;}

p.upgrade {width: 200px; background: #FFCC00 url(images/get_flash_player.gif) no-repeat 5px; font-size: 10px; text-align: left; margin: 0 auto; position: relative; top: 20px; padding: 5px 5px 5px 105px; border: solid 1px #000;}



/* Text */

p {margin: 0; padding: 0 0 10px 0; width: 520px;}

p.left {clear: left;}

p.right {clear: right;}

p.contact {width: 160px;}

.bold, .bold a {font-weight: bold; color: #000;}





/* Images */

img {margin: 0; border: 0;display: block; } 

.img_call {margin: 0; float: right; clear: right; position:relative; top:-10px;} 

.img_center_border {border: solid 1px #231f20; margin: 0 auto;}

.img_border {border: solid 1px #231f20;}

.img_right {margin: 0 0 15px 15px; float: right;}

.img_right_border {border: solid 1px #231f20; margin: 5px 0 15px 15px; float: right; clear: right;}

.img_left {margin: 0 15px 15px 0; float: left;}

.img_left_border {border: solid 1px #231f20; margin: 5px 15px 15px 0; float: left; clear: left;}







/* Lists */

ul, ol {margin-top: 0; margin-bottom: 0; padding-bottom: 10px;}

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 {border-bottom:1px solid #CCC; margin-bottom:10px; padding:10px 0 5px 0; width:50%;}

dl.logos span {font-size: 14px; font-weight: bold; line-height: normal;}



/* Links */

a {color: #70480f; text-decoration: underline;}

a:hover {color: #231f20;}

#footer a {color: #fff; text-decoration: none;}

#footer a:hover {text-decoration: underline;}





/* Headings */

h1 {width: 520px; height: 41px; margin: 0; text-indent: -999em; clear: both;}

h1.welcome {background: url(images/titles/welcome.gif); float: left;}

h1.about_office {background: url(images/titles/about_office.gif);}

h1.meet_doctor {background: url(images/titles/meet_doctor.gif);}

h1.meet_team {background: url(images/titles/meet_team.gif);}

h1.office_tour {background: url(images/titles/office_tour.gif);}

h1.office_policies {background: url(images/titles/office_policies.gif);}

h1.about_ortho {background: url(images/titles/about_ortho.gif);}

h1.why_braces {background: url(images/titles/why_braces.gif);}

h1.children {background: url(images/titles/for_children.gif);}

h1.two_phase {background: url(images/titles/two_phase.gif);}

h1.adults {background: url(images/titles/for_adults.gif);}

h1.treatments {background: url(images/titles/ortho_treatments.gif);}

h1.dictionary {background: url(images/titles/ortho_dictionary.gif);}

h1.surgical_ortho {background: url(images/titles/surgical_ortho.gif);}

h1.faqs {background: url(images/titles/faq.gif);}

h1.resources {background: url(images/titles/resources.gif);}

h1.braces {background: url(images/titles/braces_101.gif);}

h1.life {background: url(images/titles/life_braces.gif);}

h1.types_braces {background: url(images/titles/types_braces.gif);}

h1.types_appliances {background: url(images/titles/types_appliances.gif);}

h1.diagram {background: url(images/titles/braces_diagram.gif);}

h1.retainers {background: url(images/titles/retainers.gif);}

h1.ortho_technology {background: url(images/titles/ortho_technology.gif);}

h1.invisalign {background: url(images/titles/invisalign.gif);}

h1.invisalign-teen {background: url(images/titles/invisalign-teen.gif);}

h1.inovation {background: url(images/titles/inovation.gif);}

h1.ibraces {background: url(images/titles/titles-ibraces.gif);}

h1.damon {background: url(images/titles/damon_system.gif);}

h1.emergency_care {background: url(images/titles/emergency_care.gif);}

h1.fun_games {background: url(images/titles/fun_games.gif);}

h1.games {background: url(images/titles/game_room.gif);}

h1.brace_painter {background: url(images/titles/brace_painter.gif);}

h1.contact {background: url(images/titles/contact.gif);}

h1.location {background: url(images/titles/location.gif);}

h1.comments {background: url(images/titles/comments.gif);}

h1.referrals {background: url(images/titles/referrals.gif);}

h1.site_map {background: url(images/titles/site_map.gif);}

h2 {font: bold 18px "Trebuchet MS", Verdana, Arial; color: #231f20; margin: 0 0 10px 0; clear: left;}

h2.home {font-size: 17px; clear: left; margin: 0;}

h3 {font: bold 14px "Trebuchet MS", Verdana, Arial; color: #000; margin: 0;}


/* Top Links */

#top_nav {position: absolute; z-index: 1; top: 102px; right: 24px; margin: 0;}

#top_nav a {display: block; text-decoration: none; text-indent: -999em; overflow: hidden; height: 38px;}

#login, #home, #contact {height: 38px; float: left;}

#login { background: url(images/nav/login.gif); width: 264px;}

#contact {background: url(images/nav/contact.gif); width: 123px;}

#home {background: url(images/nav/home.gif); width: 78px;}

#top_nav li.active,

#login:hover, li.Hsfhover#login,

#contact:hover, li.Hsfhover#contact,

#home:hover, li.Hsfhover#home {background-position: 0 -38px;}

#top_nav li.active {cursor: pointer;}



/* Drop Down */

#top_nav, #top_nav ul {list-style: none; margin: 0; padding: 0;}

#top_nav li {display: inline;}

#top_nav li ul {left: -9999px; position: absolute; z-index: 2; background: #70480f; border: solid 1px #231f20; border-width: 0 1px 1px 1px; padding: 3px;}

#top_nav li:hover ul, #top_nav li.Hsfhover ul {left: auto; margin: 0 0 0 10px;}

#top_nav ul li a {color: #fff0cc; height: 18px; line-height: 18px; padding: 2px 0 2px 10px; width: 150px; text-indent: 0;}

#top_nav ul li a:hover {text-decoration: none; color: #231f20; background: #fff0cc;}



/* Main Navigation */

#nav {margin: 0;}

#nav a {display: block; text-decoration: none; text-indent: -999em; overflow: hidden; height: 35px;}

#about_office, #about_ortho, #braces_101, #ortho_technology, #emergency_care, #fun_games {height: 35px; float: left;}

#about_office {background: url(images/nav/about_office.gif); width: 130px;}

#about_ortho {background: url(images/nav/about_ortho.gif); width: 148px;}

#braces_101 {background: url(images/nav/braces_101.gif); width: 92px;}

#ortho_technology {background: url(images/nav/ortho_technology.gif); width: 175px;}

#emergency_care {background: url(images/nav/emergency_care.gif); width: 125px;}

#fun_games {background: url(images/nav/fun_games.gif); width: 106px;}

#nav li.active,

#about_office:hover, li.sfhover#about_office,

#about_ortho:hover, li.sfhover#about_ortho,

#braces_101:hover, li.sfhover#braces_101,

#ortho_technology:hover, li.sfhover#ortho_technology,

#emergency_care:hover, li.sfhover#emergency_care,

#fun_games:hover, li.sfhover#fun_games {background-position: 0 -35px;}

#nav li.active {cursor: default;}



/* Drop Down */

#nav, #nav ul {list-style: none; margin: 0; padding: 0;}

#nav li {display: inline;}

#nav li ul {left: -9999px; position: absolute; z-index: 3; background: #70480f; border: solid 1px #231f20; border-width: 0 1px 1px 1px; padding: 3px;}

#nav li:hover ul, #nav li.sfhover ul {left: auto; margin: 0 0 0 9px;}

#nav ul li a {color: #fff0cc; height: 18px; line-height: 18px; padding: 2px 0 2px 10px; width: 150px; text-indent: 0;}

#nav ul li a:hover {text-decoration: none; color: #231f20; background: #fff0cc;}



/* 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; 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: 0;}

ul#sesame-games p {margin-left: 210px; width: 310px;}



/*iBraces*/

.leftB {

float:left; 

margin:0 10px 10px 0;} 

img.rightB {

float:right;

margin:0 0 10px 10px;}



h2.media-center {

background:#70480f;

color:#FFF;

margin:0;

padding:5px;}



div.media-center {

background:#cba978;

color:#FFF;

display:inline-block; 



margin-bottom:10px;

overflow:auto;

padding:10px;}

div.media-center a {

color:#FFF;}

div.media-center img {

border:1px solid #FFF;}

/* -- */

.left {
float:left;
margin:0 10px 10px 0;}
img.right {
float:right;
margin:0 0 10px 10px;}
.clear {
clear:both;}
h2.media-center {
background:#70480f;
color:#FFF;
margin:0;
padding:5px;}
div.media-center {
background:#cba978;
color:#FFF;
margin-bottom:10px;

padding:10px;}
div.media-center a {
color:#FFF;}
div.media-center img {
border:1px solid #FFF;}
.flash {
border: solid 1px #ccc;}
#flash-in-ovation {
width: 320px;
height: 266px;}

img.right {
border: solid 1px #000;
margin: 0 0 15px 15px;
float: right;
clear: right;}
.img-left {
border: solid 1px #000;
margin: 0 15px 20px 0;
float: left;}
span.indent {
padding-left: 40px;}
#sidebox p {
background: #fff;
width: 250px;
margin: 0 0 5px 5px;
text-align: center;
padding: 0;
border: solid 1px #000;
float: right;
clear: right;}
#sidebar {
background: #fff;
width: 275px;
margin: 0 0 15px 15px;
padding: 0;
border: solid 1px #000;
float: right;
clear: right;}
#sidebar a {
color: #036;}
#sidebar h3 {
background: #97AFC2;
margin: 0;
padding: 15px;
color: #fff;}
#sidebar h4 {
background: #97AFC2;
margin: 0;
padding: 1px;
color: #fff;}
.thumb {
border: solid 1px #000;
margin: 0 10px 10px 0;
float: left;
clear: left;}
#sidebar p {
padding: 0 15px;
margin: 15px 0;}
.clear {clear: both;}