@font-face {
font-family: "Natural_Script_Bold";
src: url(Natural-Script-Bold.ttf) format('truetype');
}

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

/* Layout */
body {background: #5f8901 url(../images/body-bg.gif) repeat-x;}
* #banner {background-color: #5883d7; width: 896px; height: 142px;}
* #callout { margin-bottom: -63px; margin-left:360px; z-index:10; width: 400px; padding-top:10px;}
* #container {background: url(../images/content-bg.gif) repeat-y; width: 896px; position: absolute; left: 50%; margin-left: -448px;}
* #content-wrap {width: 624px; margin: 0 0 20px 272px;}
* #content {margin: 0 31px; min-height: 450px;}
* #nav-wrap {width: 272px; position: absolute; z-index: 5; top: 142px; left: 0;}
* #footer {background: #5f8901 url(../images/footer-bg.jpg) no-repeat; min-height: 130px; margin: 0; padding: 0; clear: both;}

* .right {float: right;}
* .left {float: left;}
* .cr {clear: right;}
* .cl {clear: left;}
* .hide {display: none;}
* .staff {padding: 18px 0 0 0; margin: 0; border: solid 1px #fff; border-width: 1px 0 0 0; clear: both;}

div.hr {margin: 10px 0; height: 0; border: solid 1px #fff; border-width: 1px 0 0 0; background-color: #fff; clear: both;}
hr {display: none;}

/* Images */
img, a {border: none; outline: none;}
* .photo {margin: 0;}
* .img-border {border: solid 1px #fff;}
* .img-right {float: right; margin: 0 0 15px 15px; clear: right;}
* .img-left {float: left; margin: 0 15px 15px 0; clear: left;}
* .img-left-border {border: solid 1px #fff; margin: 5px 15px 15px 0; float: left; clear: left;}
* .img-right-border {border: solid 1px #fff; margin: 5px 0 15px 15px; float: right; clear: right;}
* .img-center-border {border: solid 1px #fff; margin: 10px auto; display: block;}
* .img-center {margin: 10px auto; display: block;}
#home-video { float:right; margin-left:10px; background:#5883D7; padding:3px}

.layout {display: block;}
* .callout {border: solid 1px #fff;}
* #schedule {margin: 0 0 0 25px;}
* .bump {margin-right: 30px;}
* .logo {background: #fff; padding: 10px;}

/* Typo */
body {font-size: 100%; font-family: Arial, Helvetica, sans-serif;}
* #container {font-size: .75em; line-height: 1.5em;}
* #content {color: #000; font-weight: normal;}
* #footer {color: #fff; padding: 0 32px;}
* .text_nav {color: #fff; text-align: center; margin: 0; padding: 0 0 20px 0;}
* .sub_nav {color: #04749b; margin: 0 0 18px 0; padding: 0 0 15px 0; border: solid 1px #93ab65; border-width: 0 0 1px 0;}
#nav-wrap p {color: #2b62b4; margin: 0 0 20px 32px;}
p {margin: 0 0 18px 0;}
blockquote {margin: 0 30px;}

/* edit.com visible styles */
.NormalText { text-decoration: none; font-weight: normal; font-style: normal; font-family: Arial, Helvetica, sans-serif; color: #000; font-size: 12px; }

.Title		{ color: #143E92; font-size: 24px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; font-style: italic; }
.Header		{ color: #5F8901; font-size: 14px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; font-style: italic; }
.Subheader	{ color: #143E92; font-size: 12px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; }

.Green		{ color: #5F8901; }
.Blue		{ color: #143E92; }
.Black		{ color: #000000; }
.White		{ color: #FFFFFF; }

.SmallText	{ font-size: 10px; }
.MediumText	{ font-size: 16px; line-height: 1em; }
.LargeText	{ font-size: 24px; line-height: 1em; }

IMG.FloatLeft 	{ float: left; margin: 0 10px 10px 0; }
IMG.FloatRight 	{ float: right; margin: 0 0 10px 10px; }
IMG.WhiteBorder { border: 1px solid #FFF; }

table#staffTable TD { text-align: left; vertical-align: top; padding: 10px; border-bottom: 1px solid #FFF; }

/* Links */
a {color: #5f8901;}
a:hover, .sub_nav a.active {color: #fff;}
.sub_nav a {color: #04749b; font-weight: bold;}
.sub_nav a.active {cursor: default;}
.text_nav a, p.sesame a {color: #faeed3; text-decoration: none;}
.text_nav a:hover, p.sesame a:hover {color: #f1ead5; text-decoration: underline;}
* .top-link {background: url(../images/top-link.gif) no-repeat 0 4px; padding-left: 20px; clear: both;}
a.sesame {margin: 0; padding: 0; color: #e45a29; font-size: .83em;}

/* Headings */
h1 {font-size: 3em; font-weight: normal; margin: 20px 0 18px 0; clear: both; font-family: "Natural_Script_Bold"; color: #143e92;}
h2 {font-size: 1.17em; font-weight: bold; font-style: italic; margin: 0 0 18px 0; color: #5f8901;}
h3 {font-size: 1em; margin: 0; font-weight: bold; color: #143e92;}
h4 {font-size: 1em; color: #fff; font-weight: normal; margin: 40px 0 25px 0; padding: 0; text-align: center;}

/* Flash */
* .flash {width: 500px; margin: 10px auto;}
* #flash-homepage {background: url(../images/flash-bg.jpg) no-repeat; width: 624px; height: 309px; margin: 0;}
* .notice {width: 80%; background: #e4e4e4; font-size: 1em; text-align: left; margin: 0 auto; padding: 10px; border: solid 1px #000; overflow: auto;}
.flash-replaced .alt {display: block; height: 0px; position: absolute; z-index: 5; overflow: hidden; width: 0px;}

/* Lists */
ul, ol {margin: 0 0 18px 30px;}


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

* #patient-login, * #doctor-login {display: block; text-decoration: none; text-indent: -999em; overflow: hidden;}
* #patient-login {background: url(../images/nav/patient-login.jpg); width: 118px; height: 142px;}
* #doctor-login {background: url(../images/nav/doctor-login.jpg); width: 92px; height: 142px;}

* #about-our-office {background: url(../images/nav/about-our-office.gif);}
* #about-orthodontics {background: url(../images/nav/about-orthodontics.gif);}
* #faqs {background: url(../images/nav/faqs.gif);}
* #about-braces {background: url(../images/nav/about-braces.gif);}
* #treatment-options {background: url(../images/nav/treatment-options.gif);}
* #for-new-patients {background: url(../images/nav/for-new-patients.gif);}
* #helpful-links {background: url(../images/nav/helpful-links.gif);}
* #emergency-care-video {background: url(../images/nav/emergency-care-video.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 #faqs, #nav li.sfhover #faqs,
#nav li:hover #helpful-links, #nav li.sfhover #helpful-links,
#nav li:hover #treatment-options, #nav li.sfhover #treatment-options,
#nav li:hover #about-braces, #nav li.sfhover #about-braces,
#nav li:hover #for-new-patients, #nav li.sfhover #for-new-patients,
#nav li:hover #emergency-care-video, #nav li.sfhover #emergency-care-video,
#nav li:hover #contact-us, #nav li.sfhover #contact-us,
#nav li:hover #home, #nav li.sfhover #home {background-position: 0 -30px;}

/* Drop Down */
#nav li ul { margin: 0; padding: 0;  width: 165px; position: absolute; z-index: 3; left: -999em;}
#nav li:hover ul, #nav li.sfhover ul {left: auto; margin: -30px 0 0 245px; height: auto;}
#nav li ul li {background: #ffa54a; width: 165px; height: 28px; display: block; padding: 0 0 5px 0; margin: 0;}
#nav li ul li a {padding: 5px 0 5px 10px; margin: 0; width: 155px; height: 23px; line-height: 28px; display: block; color: #2b62b4; text-indent: 0; font-weight: normal; position: relative;}
#nav li ul li a:hover, #nav li ul li.sfhover a {background: #2b62b4; color: #fff;}

/* Clear fix */
* .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;}


/* Sesame Content ================= */ 
/* 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}

/* In-ovation */
h2.media-center {
background:#000033;
color:#FFF;
margin:0;
padding:5px;}
div.media-center {
background:#336699;
color:#FFF;
margin-bottom:10px;
padding:10px;}
div.media-center a {
color:#FFF;}
div.media-center img {
border:1px solid #FFF;}
* #video-in-ovation {
width: 320px;
height: 266px;
border: solid 1px #ccc;}