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

/* Layout */
body {background: #00539b url(../images/body-bg.jpg) repeat-x;}
#container {background: url(../images/container-bg.gif) repeat-y; width: 922px; margin-left: -461px; padding: 0; left: 50%; position: absolute;}
#wrap {background: url(../images/content-bottom.gif) bottom no-repeat;}
#left-col {width: 238px; float: left;}
#right-col {width: 684px; float: left;}
#address {background-color: #7697b7; border: solid 4px #fff; border-width: 4px 0; margin: 0 12px; padding: 10px 0 10px 22px;}
#content {margin: 0 34px; padding: 22px 0;}
#footer {background: #00539b; margin: 0; padding: 20px 34px 0 272px; text-align: center; clear: both;}
#logo {width: 238px; height: 143px;}

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

div.hr {height: 1px; background-color:#999; margin: 18px 0; clear: both;}
hr {display: none;}

/* Images */
img {border: none; outline: none;}
.photo {margin: 0; display: block;}
.img-border {border: solid 1px #00539b;}
.img-left {margin: 5px 15px 15px 0; float: left; clear: left;}
.img-left-border {border: solid 1px #00539b; margin: 5px 15px 15px 0; float: left; clear: left;}
.img-right-border {border: solid 1px #00539b; margin: 5px 0 15px 15px; float: right; clear: right;}
.img-center-border {border: solid 1px #00539b; margin: 10px auto; display: block;}

.layout {display: block;}
.callout {margin: 0 0 80px 40px;}
.logo {background-color: #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;}
.text_nav {color: #e1e4f1; margin: 0 0 18px 0;}
.sub_nav {color: #23420d; margin: 0 0 18px 0; padding: 0 0 15px 0; border: solid 1px #93ab65; border-width: 0 0 1px 0;}
p.sesame {margin: 0; padding: 0;}
p {margin: 0 0 18px 0;}
#address p {float: left; margin-bottom: 0; color: #fff;}
p.bump { display: block; margin-right: 80px;}

/* Links */
a {color: #7697b7; border: none; outline: none;}
a:hover, .sub_nav a.active {color: #355780; text-decoration: underline;}
.sub_nav a {color: #23420d;}
.sub_nav a.active {cursor: default;}
.text_nav a {color: #e1e4f1; text-decoration: none;}
p.sesame a {color: #7697b7;}
.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;}

/* Headings */
h1, h1.jcir {font-size: 1.33em; font-weight: bold; margin: 0 0 18px 0; color: #00539b; clear: both;}
h2 {font-size: 1.17em; font-weight: bold; margin: 0 0 5px 0; color: #00539b;}
h2.home {font-size: 1em; font-weight: bold; font-style: italic; margin: 0 0 18px 0; color: #355780;}
h3 {font-size: 1em; margin: 0; font-weight: bold; color: #000;}
h4 {font-size: 1em; color: #fff; font-weight: bold; font-style: italic; margin: 0 0 18px 0; padding: 0;}
h2.address {font-size: 1.17em; font-weight: bold; color: #f1ead5; text-align: right; float: right; margin: 8px 0 0 0;}
h1.replaced {/* jcIR plugin wraps text in div named replaced and hides it */
	overflow: hidden; 
	text-indent: -999em; 
	background-repeat: no-repeat;
}

/* Flash */
.flash {width: 500px; margin: 10px auto;}
.notice {width: 60%; background: #e4e4e4; font-size: 1em; text-align: left; margin: 0 auto; padding: 10px; border: solid 1px #000; top: 120px; position: relative;}
.flash-replaced .alt {display: block; height: 0px; position: absolute; overflow: hidden; width: 0px;}
#flash-homepage {background: url(../images/flash-bg.jpg); width: 684px; height: 266px; margin: 0;}
#flash-palatal-expander {width: 200px; height: 150px;}
#flash-color-your-retainer {width: 300px; height: 300px;}

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

/* Side Navigation */
#nav {background: url(../images/nav/nav-bg.jpg) no-repeat; width: 238px; margin-bottom: 50px;}
#nav ul {width: 225px; margin: 0; padding: 14px 0 0 13px; list-style: none;}
#nav li {margin: 0; padding: 0; list-style: none;}
#nav li a {width: 225px; display: block; text-decoration: none; text-indent: -999em; overflow: hidden;}

#patient-login {background: url(../images/nav/patient-login.jpg); height: 36px;}
#doctor-login {background: url(../images/nav/doctor-login.jpg); height: 35px;}
#about-us {background: url(../images/nav/about-us.png); height: 30px;}
#for-new-patients {background: url(../images/nav/for-new-patients.png); height: 30px;}
#testimonials {background: url(../images/nav/testimonials.png); height: 30px; background-position: top;}
#about-orthodontics {background: url(../images/nav/about-orthodontics.png); height: 30px;}
#faqs {background: url(../images/nav/faqs.png); height: 30px;}
#treatment-options {background: url(../images/nav/treatment-options.png); height: 30px;}
#about-braces {background: url(../images/nav/about-braces.png); height: 30px;}
#emergency-care {background: url(../images/nav/emergency-care.png); height: 30px;}
#contact-us {background: url(../images/nav/contact-us.png); height: 30px;}
#home {background: url(../images/nav/home.png); height: 30px;}

#nav li:hover #patient-login, #nav li.sfhover #patient-login {background-position: 0 -36px;}
#nav li:hover #doctor-login, #nav li.sfhover #doctor-login {background-position: 0 -35px;}
#nav li a:hover, #nav li.active a,
#nav li:hover #about-us, #nav li.sfhover #about-us,
#nav li:hover #for-new-patients, #nav li.sfhover #for-new-patients,
#nav li:hover #testimonials, #nav li.sfhover #testimonials,
#nav li:hover #about-orthodontics, #nav li.sfhover #about-orthodontics,
#nav li:hover #faqs, #nav li.sfhover #faqs,
#nav li:hover #treatment-options, #nav li.sfhover #treatment-options,
#nav li:hover #about-braces, #nav li.sfhover #about-braces,
#nav li:hover #emergency-care, #nav li.sfhover #emergency-care,
#nav li:hover #contact-us, #nav li.sfhover #contact-us,
#nav li:hover #home, #nav li.sfhover #home {background-position: 0 -30px;}

/* Sub nav */
#nav ul ul {padding: 9px 0 0 0;}
#nav ul ul li {height: 24px;}
#nav ul ul li a {color: #e1e4f1; display: inline; font-size: 1.17em; margin-left: 35px; text-indent: 0;}
#nav ul ul li a:hover, #nav ul ul li a.active {color: #00539b;}
#nav ul ul.ui-accordion {border: solid 1px #fff; border-width: 0 0 1px 0;}

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

/* 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}