/* Reset */
* {margin: 0; padding: 0; border: 0; outline: none;}

/* Layout */
body {background: #436386 url(../images/body-bg.jpg) repeat-x;}
#wrap {background: url(../images/bg-repeat.gif) repeat-y; width: 800px; margin:0 auto; position:relative}
#container {background: url(../images/bg-top.jpg) no-repeat; width: 760px; padding: 0 20px;}
#content-home {background: url(../images/home-bg.jpg) no-repeat; margin-left: 176px; clear: both; min-height: 925px; _height: 875px;}
#content-interior {background: url(../images/interior-bg.jpg) no-repeat; margin-left: 176px; padding-top: 50px; clear: both; min-height: 830px; _height: 830px;}
#padding {padding: 0 50px 10px 53px; width: 476px;}
#header {height: 136px;}
#footer {background: #436386 url(../images/footer.gif) no-repeat; clear: both; color: #fff; text-align: center; padding-top: 25px; padding-bottom: 20px;}
.sub-nav {margin-bottom: 0; border: solid 1px #c1d3e7; border-width: 0 0 1px 0; padding-bottom: 10px;}
.sidebar {background: #FFF8F2; width: 180px; margin: 5px 0 15px 15px; padding: 10px; display: block; border: solid 1px #4d4e4c; float: right; clear: right;}
.left {float: left; clear: left;}
.right {float: right; clear: right;}

/* Images */
.callout {margin: 10px 0 0 10px; border: solid 1px #3c3d3a;}
.photo {border: solid 1px #4d4e4c; margin: 5px 0 15px 15px; float: right; clear: right;}
.img-border {border: solid 1px #4d4e4c;}
.img-right-border {border: solid 1px #4d4e4c; margin: 5px 0 15px 15px; float: right; clear: right;}
.img-right {border: 0; margin: 5px 0 15px 15px; float: right; clear: right;}
.img-left-border {border: solid 1px #4d4e4c; margin: 5px 15px 15px 0; float: left; clear: left;}
.img-left {border: 0; margin: 5px 15px 15px 0; float: left; clear: left;}
.form-icon {background: url(../images/form-icon.gif) no-repeat; padding-left: 20px;}
.give-smile {margin: 0 0 15px 25px; float: right; clear: right;}

/* Typo */
body {font-size: 100%; color: #436386; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;}
#wrap {font-size: .75em; line-height: 1.5em;}
#padding p {margin: 0 0 10px 0;}
#address {margin: 30px 0 25px 13px;}
blockquote {margin: 0 30px;}
.small { font-size: .83em;}

/* Lists */
ol, ul {margin: 0 0 10px 20px;}
dl.logos, dl.logos dt, dl.logos dd {list-style: none; margin: 0; padding: 0;}
dl.logos {border: 1px solid #c1d3e7; 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;}

/* Links */
a {color: #436386;}
a:hover {color: #f8864b; text-decoration: none;}
#sesame {font-size: .83em;}
#footer a {color: #fff; text-decoration: none;}
#footer a:hover {text-decoration: underline; font-weight: normal;}
.sub-nav a {white-space: nowrap;}
.sub-nav a.active {color: #f8864b;}

/* Headings */
h1.logo {background: url(../images/logo.jpg) no-repeat; width: 407px; height: 136px; text-indent: -999em; overflow: hidden; float: left;}
h1.logo a {width: 407px; height: 136px; display: block;}
#content-home #padding h1 {font-size: 1.5em; line-height: 24px; margin: 10px 0 0 0; height: 24px; _line-height: 12px; color: #1b4d84;}
#content-interior #padding h1 {font-size: 2em; line-height: 26px; margin: 0 0 10px 0; height: 26px; _line-height: 13px; color: #1b4d84;}
h2 {font-size: 1.5em; font-weight: normal; color: #436386; margin: 0 0 10px; line-height: 1.17em;}
h3 {font-size: 1.17em; margin: 0; font-weight: bold;}
h4 {font-size: 1em; text-align: center; font-weight: bold;}

/* Flash */
.flash {width: 480px; margin: 10px auto;}
.suresmile {width: 320px; margin: 0 auto;}
#flash-home {margin-left: 33px; width: 521px; height: 301px;}
.upgrade {width: 50%; background: #e4e4e4; font-size: .83em; text-align: left; margin: 0 auto; padding: 20px; border: solid 1px #000;}
.flash-replaced .alt {display: block; height: 0px; position: absolute; overflow: hidden; width: 0px;}


/* Top Nav */
#top-nav {height: 25px; position: absolute; z-index: 3; top: 0; right: 20px;}
#top-nav a {height: 25px; float: left; text-indent: -999em; overflow: hidden;}
#top-nav a:hover, #top-nav a.active {background-position: 0 -25px;}

#pt-login {background: url(../images/nav/patient-login.gif); width: 119px;}
#dt-login {background: url(../images/nav/doctor-login.gif); width: 119px;}
#contact-us {background: url(../images/nav/contact-us.gif); width: 115px;}

/* Side Navigation */
#nav-wrap {background: url(../images/nav/nav-bg.jpg) no-repeat; width: 176px; position: absolute; z-index: 2; top: 136px; left: 20px; padding-top: 35px; margin-bottom: 20px;}
#nav {margin: 0; list-style: none;}
#nav li {margin: 0; height: 24px; padding: 0; list-style: none; display: inline;}
#nav li a {width: 176px; height: 24px; display: block; text-decoration: none; text-indent: -999em; overflow: hidden;}

#meet-dr-d {background: url(../images/nav/meet-dr-d.gif);}
#our-team {background: url(../images/nav/our-team.gif);}
#for-new-patients {background: url(../images/nav/for-new-patients.gif);}
#financing {background: url(../images/nav/financing.gif);}
#about-orthodontics {background: url(../images/nav/about-orthodontics.gif);}
#braces-101 {background: url(../images/nav/braces-101.gif);}
#instructions {background: url(../images/nav/instructions.gif);}
#emergency-care {background: url(../images/nav/emergency-care.gif);}
#faqs {background: url(../images/nav/faqs.gif);}
#home {background: url(../images/nav/home.gif);}

#nav a:hover, #nav li.active a,
#nav li:hover #meet-dr-d, #nav li.sfhover #meet-dr-d,
#nav li:hover #our-team, #nav li.sfhover #our-team,
#nav li:hover #for-new-patients, #nav li.sfhover #for-new-patients,
#nav li:hover #about-orthodontics, #nav li.sfhover #about-orthodontics,
#nav li:hover #braces-101, #nav li.sfhover #braces-101,
#nav li:hover #instructions, #nav li.sfhover #instructions,
#nav li:hover #emergency-care, #nav li.sfhover #emergency-care,
#nav li:hover #home, #nav li.sfhover #home {background-position: 0 -24px;}

/* 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: -35px 0 0 176px; padding: 5px 0;}
#nav li ul li {background: #fff; display: block; width: 200px; height: 26px; padding: 0 5px 5px 5px; margin: 0;}
#nav li ul li.first {padding-top: 5px;}
#nav li ul li a {padding: 5px 0 3px 7px; margin: 0 0 5px 0; _margin: 0; width: auto; height: 18px; line-height: 18px; display: block; color: #375473; text-indent: 0; font-size: 1em; font-weight: normal;}
#nav li ul li a:hover {background: #f0ad74; height: 18px;}

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

.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;}