/* Reset */
* {margin: 0; padding: 0; border: 0; outline: 0;}
.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;}
.smartsite { float:left; width:130px; height:98px; z-index:9999}
/* Layout */
body {background: #d5d3ac url(../images/body-bg.jpg) repeat-x; font-size: 100%; font-family: "Trebuchet MS", Verdana, Arial;}
#container {background: url(../images/container-bg.gif) repeat-y; width: 800px; top: 0; left: 50%; margin-left: -400px; position: absolute; font-size: .75em; line-height: 1.5em;}
#header {background: #fdffe7; height: 160px;}
#wrap {background: url(../images/content-top.gif) no-repeat; width: 800px; min-height: 725px; _height: 725px; clear: both;}
#content-wrap {width: 585px; margin-left: 215px; overflow: hidden;}
#content {width: 555px; _width: 585px; padding: 0 15px; color: #62644c;}
.sub {margin-top: 70px;}
#footer {background: #adb187 url(../images/content-bottom.gif) no-repeat; padding: 30px 15px 10px 15px; color: #fdffe7; font-size: .92em;}
#sesame {background: #d5d3ac; padding: 5px 0 15px 15px; font-size: .83em; clear: both;}

/* Typo */
p {margin: 0 0 10px 0;}
#nav-wrap p {color: #fff; font-size: .92em; line-height: 1.17em; margin: 0 0 15px 3px;}
p.text-nav {width: 320px; text-align: right; float: right;}


/* Headings */
h1 {font-size: 1.33em; line-height: 1.33em; font-family: "Times New Roman", Times, serif; color: #62644c; margin: 0 0 10px 0; padding: 0; text-transform: uppercase;}
h2 {font-size: 1.17em; font-weight: bold; color: #62644c; margin: 0 0 10px; line-height: 1.17em; clear: left;}
h3 {font-size: 1em; margin: 0; font-weight: bold;}
h4 {font-size: 1em; width: 400px; float: left; margin: 0; font-weight: normal;}
a.logo {background: url(../images/brown-logo.gif) no-repeat; width: 380px; height: 160px; margin: 0; float: left; overflow: hidden; text-indent: -999em; display: block;}


h1.welcome {background: url(../images/welcome.gif) no-repeat; width: 475px; height: 35px; margin: 20px 0; text-indent: -999em; overflow: hidden;}

/* Links */
a {color: #62644c; font-weight: bold; text-decoration: none;}
a:hover {text-decoration: underline;}
#sesame a {font-weight: normal;}
p.text-nav a {color: #fdffe7; font-weight: normal;}
p.sub_nav a.active {text-decoration: underline;}

/* Lists */
ul, ol {margin: 0 0 10px 30px;}
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: 10px 0 5px 0; padding: 10px 0 5px 10px; width: 80%;}
dl.logos dd {margin-bottom: 10px; padding: 10px 0 5px 0;}
dl.logos span {font-size: 14px; font-weight: bold; line-height: normal;}

/* Images */
#locations {float: right; clear: right;}
.photo {border: solid 1px #adb187; margin: 5px 0 15px 15px; float: right; clear: right;}
.map {border: solid 1px #adb187;}
.left {float: left; margin:0 15px 15px 0;}
img.right {float:right; margin:0 0 10px 10px;}
.img-left-border {border: solid 1px #adb187; margin: 5px 15px 15px 0; float: left; clear: left;}

/* Flash */
.flash {width: 500px; margin: 10px auto;}
.upgrade {width: 200px; background: #e4e4e4; font-size: .83em; text-align: left; position: relative; left: 50%; top: 30px; padding: 5px; border: solid 1px #000;}
.flash-replaced .alt {display: block; height: 0px; position: absolute; overflow: hidden; width: 0px;}
#flash-home {background: url(../images/flash-bg.gif); width: 585px; height: 300px;}
#flash-palatal-expander {width: 200px; margin: 10px auto;}

/* Top Links */
#logins {height: 26px; margin-right: 15px; float: right;}
#logins a {width: 137px; height: 26px; display: block; float: left; text-indent: -999em;}
#logins a:hover {background-position: 0 -26px;}
#pt-login {background: url(../images/nav/pt-login.gif);}
#dt-login {background: url(../images/nav/dt-login.gif);}


/* Side Navigation */
#nav-wrap {width: 200px; position: absolute; z-index: 2; top: 227px; left: 15px;}
#nav {margin: 0 0 20px 0; list-style: none;}
/*#nav ul {position: relative; left: 0; margin: 0;}*/
#nav li {margin: 0; height: 28px; padding: 0; list-style: none; display: inline;}
#nav li a {width: 200px; height: 28px; display: block; text-decoration: none; text-indent: -999em; overflow: hidden;}

#about-our-office, #about-orthodontics, #braces-101, #ortho-technologies, #emergency-care, #fun-and-games, #contact-us, #home {text-indent: -999em; overflow: hidden;}

#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);}
#ortho-technologies {background: url(../images/nav/ortho-technologies.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);}
#home {background: url(../images/nav/home.gif);}

#nav a:hover, #nav li.active a,
#nav li:hover #about-our-office, #nav li.sfhover #about-our-office,
#nav li:hover #about-orthodontics, #nav li.sfhover #about-orthodontics,
#nav li:hover #braces-101, #nav li.sfhover #braces-101,
#nav li:hover #ortho-technologies, #nav li.sfhover #ortho-technologies,
#nav li:hover #emergency-care, #nav li.sfhover #emergency-care, 
#nav li:hover #fun-and-games, #nav li.sfhover #fun-and-games,
#nav li:hover #contact-us, #nav li.sfhover #contact-us,
#nav li:hover #home, #nav li.sfhover #home {background-position: 0 -28px;}

/* Drop Down */
#nav li ul {margin: 0; padding: 0; width: 200px; position: absolute; z-index: 3; left: -999em;}
#nav li:hover ul, #nav li.sfhover ul {left: auto; margin: -28px 0 0 200px;}
#nav li ul li {background: #7EA1B5; display: block; width: 200px; height: 28px; padding: 0; margin: 0;}
#nav li ul li a {padding: 5px 0 5px 7px; margin: 0; width: auto; height: 28px; display: block; color: #fff; text-indent: 0; font-size: 1em; font-weight: normal;}
#nav li ul li a:hover {color: #fff8a5; background: #9cbacb; height: 18px; _height: 28px;}

/* In-Ovation */
h2.media-center {
background:#000033;
color:#FFF;
margin:0 0 5px 0;
padding:5px;}
div.media-center {
background:#336699;
color:#FFF;
margin-bottom:10px;
overflow:auto;
padding:10px;}
div.media-center a {
color:#FFF;}
div.media-center img {
border:1px solid #FFF;}

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