/* Reset */
* {margin: 0 ; padding: 0;}

/* Layout */
body {background: url(../images/body-bg.gif) repeat; padding-top: 0;}
#container {width: 900px; margin-left: -450px; padding: 0; left: 50%; position: absolute; z-index: 2;}
#banner-bg {background: url(../images/banner-bg.png) repeat-x; width: 100%; height: 208px; position: absolute; z-index: 1; top: 47px;}
#banner {background: url(../images/banner.jpg) no-repeat bottom; height: 244px; margin: 0; padding: 27px 0 0 0;}
#content {background: url(../images/content-bg.gif) repeat-y; margin: 0; padding: 86px 28px 10px 273px; width: 599px; min-height: 450px;}
#nav-wrap { background: url(../images/nav/nav-bg.jpg) no-repeat; width: 220px; padding-top: 52px; position: absolute; z-index: 10; top: 240px; left: 25px;}
.top {background: url(../images/top-footer-bg.gif) repeat-y; width: 840px; margin: 0; padding: 1px 20px 0 40px; border: solid 1px #e6dfbd; border-width: 0 0 1px 0; clear: both;}
.bottom {background-color: #e6dfbd; margin: 0 25px; padding: 10px 30px 0 30px; height: 55px; text-align: center; -moz-border-radius-bottomright: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-bottomleft: 10px; -webkit-border-bottom-left-radius: 10px;}

.right {float: right;}
.left {float: left;}
.cr {clear: right;}
.cl {clear: left;}
.hide {display: none;}
.staff {padding: 25px 25px 0 25px; margin: 15px 0 0 0; border: solid 1px #93ab65; border-width: 1px 0 0 0; float: left;}

div.hr {background: #e6dfbd url(../images/line-rule.jpg) no-repeat; width: 599px; height: 26px; margin: 10px 0 0 0;}

/* Images */
img {border: none; outline: none;}
.photo {position: absolute; z-index: 3; top: 41px; left: 245px;}
.img-border {border: solid 1px #93ab65;}
.img-left {margin: 5px 35px 15px 10px; float: left;}
.img-left-border {border: solid 1px #453a24; margin: 5px 35px 15px 10px; float: left; clear: left;}
.img-right {margin: 5px 10px 15px 35px; float: right; clear: right;}
.img-right-border {border: solid 1px #453a24; margin: 5px 10px 15px 35px; float: right; clear: right;}
.img-center-border {border: solid 1px #453a24; margin: 10px auto; display: block;}

.layout {display: block;}
.callout {margin: 0 10px 35px 35px;}
.logo {margin-left: 25px;}
.map {margin: 0 10px 0 10px; border: solid 1px #93ab65; width: 579px; height: 400px;}
#invisalign-logo {border: solid 1px #453a24; margin: 0; background: #fff; padding: 10px;}

/* Typo */
body {font-size: 100%; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;}
#container {font-size: .88em; line-height: 1.5em;}
#content {color: #453a24; font-weight: normal;}
#content p {margin: 0 10px 18px 10px;}
#content p.sub_nav {color: #23420d; margin: 0; padding: 0 10px; line-height: normal;}
.address {font-size: .79em; margin: 0 0 18px 28px;}
.address .big {font-size: 1.27em; font-weight: bold;}
.footer {font-size: .79em; text-align: center;}
.text_nav {color: #5f9a11; text-align: center; margin: 0 43px; padding: 0; float: left; width: 520px;}
.sesame {margin: 0; padding: 0;}
.biggins {font-size: 1.29em; font-weight: bold; color: #5f9a11;}

p {margin: 0 0 18px 0;}
sup {font-size: .75em;}

/* Links */
a {color: #5f9a11;}
a:hover, .sub_nav a.active, .sub_nav a:hover {color: #6689c0;}
.sub_nav a {color: #23420d;}
.sub_nav a.active {cursor: default;}
.text_nav a, .sesame a {color: #5f9a11;}
.text_nav a:hover, .sesame a:hover {color: #6689c0;}
.top-link {background: url(../images/top-link.png) no-repeat 0 6px; padding-left: 20px; clear: both;}

/* Headings */
h1 {font-size: 1.71em; font-weight: bold; margin: 0 0 18px 0; padding: 0 10px; color: #6689c0; line-height: normal; font-family: Georgia, "Times New Roman", Times, serif;}
h2 {font-size: 1.14em; font-weight: bold; margin: 0 0 18px 0; padding: 0 10px; color: #453a24; font-family: Georgia, "Times New Roman", Times, serif;}
h3 {font-size: 1em; margin: 0; font-weight: bold; margin: 0; padding: 0 10px; font-family: Georgia, "Times New Roman", Times, serif; color: #5f9a11;}
h3.home {margin-bottom: 10px;}
h4 {font-size: 1em; color: #f1ead5; font-weight: normal; margin: 10px 0; padding: 0 0 0 240px;}
h1.logo {background: url(../images/oxford-logo.png) no-repeat; width: 220px; height: 203px; margin: 0 0 0 25px; padding: 0; text-indent: -999em; overflow: hidden; border: none;}
h1.logo a {width: 220px; height: 203px; display: block;}

/* Flash */
#flash-homepage {background: url(../images/flash-bg.jpg); width: 655px; height: 316px; margin: 0; position: absolute; z-index: 3; top: 41px; left: 245px;}
.flash {width: 500px; margin: 10px auto;}
.notice {width: 80%; background: #e4e4e4; font-size: 1em; text-align: left; margin: 50px; padding: 10px; border: solid 1px #000; position: relative; display: block;}
.flash-replaced .alt {display: block; height: 0px; position: absolute; overflow: hidden; width: 0px;}
#flash-palatal-expander {width: 200px; height: 150px;}

/* Lists */
#content ul, #content ol {margin: 0 0 18px 40px;}

/* Side Navigation */
#nav ul {width: 220px; margin: 0 0 25px 0; padding: 0; list-style: none;}
#nav li {margin: 0; height: 36px; padding: 0; list-style: none; display: inline;}
#nav li a {width: 220px; height: 36px; display: block; text-decoration: none; text-indent: -999em; overflow: hidden;}

#meet-dr-oxford {background: url(../images/nav/meet-dr-oxford.png);}
#about-our-office {background: url(../images/nav/about-our-office.png);}
#about-orthodontics {background: url(../images/nav/about-orthodontics.png);}
#faqs {background: url(../images/nav/faqs.png);}
#about-braces {background: url(../images/nav/about-braces.png);}
#treatment-options {background: url(../images/nav/treatment-options.png);}
#emergency-care {background: url(../images/nav/emergency-care.png);}
#contact-us {background: url(../images/nav/contact-us.png);}
#home {background: url(../images/nav/home.png);}

#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 #about-braces, #nav li.sfhover #about-braces,
#nav li:hover #treatment-options, #nav li.sfhover #treatment-options,
#nav li:hover #contact-us, #nav li.sfhover #contact-us {background-position: 0 -36px;}

/* Drop Down */
#nav li ul {margin: 0; padding: 0; width: 190px; border: solid 1px #453a25; border-width: 1px 1px 1px 0; position: absolute; z-index: 3; left: -999em;}
#nav li:hover ul, #nav li.sfhover ul {left: auto; margin: -36px 0 0 220px;}
#nav li ul li {background: #c4deff; display: block; width: 190px; height: 28px; padding: 0; margin: 0;}
#nav li ul li a {padding: 5px 0 5px 10px; margin: 0; width: auto; height: 18px; display: block; text-indent: 0; font-size: .86em; font-weight: normal; color: #453a24;}
#nav li ul li a:hover {height: 18px; color: #5f9a11; text-decoration: underline;}
#nav li ul li.first {padding-top: 5px;}
#nav li ul li.last {padding-bottom: 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;}

/* The Game Room */
div#sesame-game {background: #000; line-height: 0; margin: 10px auto 30px auto; text-align: center; width: 400px}
ul#sesame-games {list-style: none; margin: 0 18px 0 0; padding: 0}
ul#sesame-games li {clear: both; display: block}
ul#sesame-games img {border: 0; float: right; margin: 0 0 10px 10px}
ul#sesame-games a.button {float:right; height:85px; width:200px}
ul#sesame-games p { padding-bottom: 1em}

/* Invisalign Teen */
#sidebar {
background: #fff;
width: 275px;
margin: 0 10px 15px 15px;
padding: 0;
border: solid 1px #000;
float: right;
clear: right;}
#sidebar a {
color: #036;}
#sidebar h3 {
background: #678AC1;
margin: 0;
padding: 15px;
color: #fff;}
.thumb {
border: solid 1px #000;
margin: 0 0 10px 10px;
float: right;
clear: right;}
#sidebar p {
padding: 0 15px;
margin: 15px 0;
font-size: .86em;}

/* Damon System */
#damon-bracket {
display:block;
margin:0 auto 10px auto;}
#damon-wrap {
width:400px;
margin:0 auto;}
#damon-left {
float:left;
width:175px;
margin-right:20px;}
#damon-right {
float:left;
width:170px;}
#flash-damon-system-comparison {
margin:0 auto;
width:250px;}
#video-the-damon-system {
margin: 0 15px 15px 0;
width: 240px;
height: 206px;
float: left;
clear: left;}
#video-the-damon-system-2 {
margin: 0 15px 15px 0;
width: 400px;
height: 330px;
float: left;
clear: left;}