@font-face {
font-family: "Chaparral_Pro";
src: url(ChaparralPro-Semibold.otf) format('opentype');
}

/* Reset */
* {margin: 0 ; padding: 0;}

/* Layout */
body {background-color: #fff;}
#container {width: 950px; margin-left: -475px; padding: 0; left: 50%; position: absolute;}
#wrap {padding-left: 20px; clear: both;}
#left-col {width: 599px; min-height: 405px; margin: 0 0 30px 0; padding: 0; clear: left;}
#content {border: solid 1px #d60d8c; border-width: 0 1px 0 0; padding: 0 40px 0 0; margin: 20px 0 0 0; clear: left; position: relative;}
#right-col {width: 330px; float: right;}

#right-col-edit 
{
	z-index: 5;
	position: absolute;
	width: 330px;
	display: block;
	top: -110px;
	right: -332px;
}

#footer {margin: 40px 0 20px 0; clear: both;}
#footer-nav {position: absolute; margin: -30px 0 0 130px;}

.right {float: right;}
.left {float: left;}
.cr {clear: right;}
.cl {clear: left;}
.hide {display: none;}
.staff {margin: 0 0 30px 0; padding: 0 0 15px 0; border: solid 1px #d60d8c; border-width: 0 0 1px 0;}

div.hr {height: 0; background-color:#d60d8c; border: solid 1px #d60d8c; border-width: 0 0 1px 0; margin: 30px 0;}
hr {display: none;}

/* Images */
img, a {border: none; outline: none;}
.photo {margin: 95px 0 0 40px; border: solid 1px #d60d8c;}
.img-border {border: solid 1px #d60d8c;}
.img-left-border {border: solid 1px #d60d8c; margin: 5px 15px 15px 0; float: left; clear: left;}
.img-left {margin: 5px 15px 30px 0; float: left; clear: left;}
.img-right-border {border: solid 1px #d60d8c; margin: 5px 0 15px 15px; float: right; clear: right;}
.img-right {margin: 5px 0 15px 15px; float: right; clear: right;}
.img-center-border {border: solid 1px #d60d8c; margin: 10px auto; display: block;}

.layout {display: block;}
.logo {margin: 0 0 0 20px; float: left;}
.tagline {margin: 0 0 50px 100px; float: left;}
.welcome {margin: 0 0 15px 20px; width: 290px;}
.callout {margin: 0 0 20px 40px;}

/* Typo */
body {font-size: 100%; font-family: Verdana, Geneva, sans-serif;}
#container {font-size: .75em; line-height: 1.5em;}
#content {color: #000; font-weight: normal;}
.text_nav {color: #d60d8c; margin: 0;}
.sub_nav {color: #23420d; margin: 0; padding: 0; clear: left;}
p.sesame {margin: 0; padding: 0; font-size: .83em;}
p {margin: 0 0 18px 0;}

.big-boom {font-size: 1.17em; font-weight: bold; color: #9a0a65;}
.lil-boom {font-weight: bold; color: #9a0a65;}

/* Links */
a {color: #d60d8c; text-decoration: none;}
a:hover, .sub_nav a.active {text-decoration: underline;}

.sub_nav a.active {cursor: default;}
.text_nav a, p.sesame a {color: #d60d8c; text-decoration: none;}
.text_nav a:hover, p.sesame a:hover {text-decoration: underline;}
.top-link {background: url(../images/top-link.gif) no-repeat 0 4px; padding-left: 20px; clear: both;}

/* Headings */
h1 {font-size: 2.83em; margin: 0 0 20px 0; width: 560px; font-family: "Chaparral_Pro"; line-height: .75em; color: #000;}
h1 .mini {font-size: .47em;}
h2 {font-size: 1.17em; font-weight: bold; margin: 0 0 18px 0; color: #9a0a65;}
h3 {font-size: 1em; margin: 0 0 9px 0; font-weight: bold; color: #000;}
h4 {font-size: 1em; color: #000; font-weight: normal; margin: 15px 0 18px 0; width: 525px; padding: 0; text-align: right; float: right;}

/* jQuery slideshow */
#slideshow {width: 330px; height: 348px;}
.slide {display: block;}

/* Flash */
.flash {width: 500px; margin: 10px auto;}
.notice {width: 80%; background: #e4e4e4; font-size: 1em; text-align: left; margin: 50px auto; padding: 10px; border: solid 1px #000; overflow: auto;}
.flash-replaced .alt {display: block; height: 0px; position: absolute; overflow: hidden; width: 0px;}

/* Lists */
ul, ol {margin: 0 0 18px 15px;}
li {border: solid 1px #d60d8c; border-width: 0 0 0 1px; list-style: none; margin-bottom: 20px; padding-left: 15px;}
.no-pink li {border: none; list-style: disc; margin-bottom: 0;}
.no-pink {margin-left: 15px;}

/* Navigation */
#nav {height: 35px; width: 720px; position: absolute; z-index: 200; top: 188px; right: 0;}
#nav ul {height: 35px; margin: 0; padding: 0; list-style: none;}
#nav li {height: 35px; margin: 0; padding: 0; list-style: none; border-width: 0; display: inline; float: left;}
#nav li a {height: 35px; display: block; text-decoration: none; text-indent: -999em; overflow: hidden;}

#about-our-office {background: url(../images/nav/about-our-office.gif); width: 179px;}
#teeth-101 {background: url(../images/nav/teeth-101.gif); width: 120px;}
#improve-your-smile {background: url(../images/nav/improve-your-smile.gif); width: 207px;}
#contact-us {background: url(../images/nav/contact-us.gif); width: 131px;}
#home {background: url(../images/nav/home.gif); width: 82px;}

#nav a:hover, #nav li.active a,
#nav li:hover #about-our-office, #nav li.sfhover #about-our-office,
#nav li:hover #teeth-101, #nav li.sfhover #teeth-101,
#nav li:hover #improve-your-smile, #nav li.sfhover #improve-your-smile,
#nav li:hover #contact-us, #nav li.sfhover #contact-us,
#nav li:hover #home, #nav li.sfhover #home {background-position: 0 -35px;}

/* Drop Down */
#nav li ul {margin: 0; padding: 0; width: 200px; position: absolute; z-index: 999; left: -999em; border: solid 1px #000;}
#nav li:hover ul, #nav li.sfhover ul {left: auto; margin: 0 0 0 5px; height: auto;}
#nav li ul li {background: #fff; display: block; width: 200px; 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: 1em; font-weight: normal; color: #000;}
#nav li ul li a:hover {height: 18px; text-decoration: underline; color: #d60d8c;}
#nav li ul li.first {padding-top: 5px;}
#nav li ul li.last {padding-bottom: 5px;}

/* Utilities */
#util {width: 160px; margin: 15px 0 0 0; float: right;}
#util ul {margin: 0; padding: 0; list-style: none;}
#util li {margin: 0; padding: 0; border-width: 0;}
#util li a {height: 33px; display: block; text-decoration: none; text-indent: -999em; overflow: hidden;}
#util li.doctor-login {margin-left: 30px;}

#util li #patient-login {background: url(../images/nav/patient-login.jpg); width: 133px;}
#util li #doctor-login {background: url(../images/nav/doctor-login.jpg); width: 122px;}

#util a:hover, #util li.active a,
#util li:hover #patient-login, #util li.sfhover #patient-login,
#util li:hover #doctor-login, #util li.sfhover #doctor-login {background-position: 0 -33px;}

.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;}






