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

/* Layout */
body {background: #C2D8F0 url(../images/body-bg.gif) 50% 0 repeat-x;}
* #container {background: url(../images/content-bg.gif) repeat-y; width: 770px; margin-left: -385px; left: 50%; position: absolute;}
* #banner-right {background: url(../images/banner-bg.gif); width: 430px; height: 165px; float: left;}
* #content-home {background: url(../images/content-top-home.gif) no-repeat; min-height: 710px; _height: 710px; clear: both;}
* #content-int {background: url(../images/content-top-int.gif) no-repeat; min-height: 530px; clear: both;}
* #content {width: 560px; margin-left: 190px; padding: 20px 0 0 0; _height: 530px; clear: both;}
* #footer {background-color: #3b5a7c; clear: both;}
* #nav-wrap {position: absolute; z-index: 2; top: 203px; left: 0;}
* #address {background: url(../images/address-box.gif) no-repeat; width: 170px; height: 109px; margin: 20px 0; padding: 10px 0 0 20px;}
* #callout {background: url(../images/callout-box.gif) no-repeat; width: 170px; height: 114px; margin: 0; padding: 10px 0 0 20px;}
/* #callout span {font-size: 1.17em; font-weight: bold;} */
* .right {float: right; clear: right; margin: 0 0 15px 15px;}
* .left {float: left; clear: left; margin: 0 15px 15px 0;}
.right img {float: left; margin: 0 10px 0 0;}
* .bio {padding: 20px 0 0 0; border: solid 1px #254D7C; border-width: 0 0 1px 0;}
hr {color: #e9f4b2; background-color: #e9f4b2; height: 1px; border: solid 1px #254D7C; border-width: 1px 0 0 0; margin: 10px 0; padding: 0;}

/* Images */
img {border: none; outline: none;}
* .photo {margin: 5px 0 15px 15px; float: right; clear: right;}
* .img-left {border: 0; margin: 5px 15px 15px 0; float: left;}
* .img-left-border {border: solid 1px #254D7C; margin: 5px 15px 15px 0; float: left; clear: left;}
* .img-right-border {border: solid 1px #254D7C; margin: 5px 0 15px 15px; float: right; clear: right;}
* .logo {margin: 15px 0 0 0; display: block;}
#footer img {display: block;}

/* Typo */
body {font-size: 100%; font-family: Tahoma, Geneva, sans-serif;}
* #container {/* font-size: .75em; */}
* #content {color: #254d7c; /* line-height: 1.5em; */ font-weight: normal;}
* #nav-wrap {color: #697432; /* line-height: 1.5em; */}
/* #address {font-size: .92em;} */
* #footer {text-align: center; color: #fff;}
p.address {line-height: 1.5em;}
* .text_nav {color: #fff; text-align: center; margin-top: 20px;}
* .sub_nav {color: #254d7c; margin: 0 0 0 50px; height: 80px;}
p.sesame {text-align: center; margin: 0; padding: 0;}
p {margin: 0 0 18px 0;}

/* Links */
a {color: #254d7c;}
a:hover, .sub_nav a.active {color: #4e82bc;}
.sub_nav a.active {cursor: default;}
.text_nav a, p.sesame a {color: #fff; text-decoration: none;}
.text_nav a:hover, p.sesame a:hover {text-decoration: underline;}
* .top-link {clear: both;}

/* Headings */
h1 {font-size: 16px; font-weight: bold; margin: 0 0 10px;}
h2 {font-size: 1.17em; font-weight: bold; margin: 0;}
h3 {font-size: 1em; margin: 0; font-weight: bold; color: #777F4F;}
h4 {font-size: 13px; color: #fff; font-weight: normal; /* line-height: 1.5em; */ margin: 10px 0 0; padding: 0 80px;}
h1.logo {background: url(../images/markham-logo.gif) no-repeat; width: 340px; height: 165px; margin: 0 auto; padding: 0;  position: relative; text-indent: -999em; overflow: hidden; float: left;}
h1.logo a {width: 340px; height: 165px; display: block;}

/* Flash */
* .flash {width: 500px; margin: 10px auto;}
* .notice {width: 80%; background: #e4e4e4; font-size: .83em; 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;}
* #flash-homepage {margin: 0 0 25px 0; width: 560px;}


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

/* Login Buttons */
* #login {position: absolute; z-index: 1; top: 38px; right: 30px;}
#login a {width: 93px; height: 40px; display: block; text-decoration: none; text-indent: -999em; overflow: hidden; float: left;}
#login a:hover {background-position: 0 -40px;}
* #pt-login {background: url(../images/nav/patient-login.gif); margin: 0 33px 0 0;}
* #dt-login {background: url(../images/nav/doctor-login.gif); margin: 10px 0 0 0;}

/* Side Navigation */

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

* #meet-our-office {background: url(../images/nav/meet-our-office.gif);}
* #new-patients {background: url(../images/nav/new-patients.gif);}
* #about-orthodontics {background: url(../images/nav/about-orthodontics.gif);}
* #braces-101 {background: url(../images/nav/braces-101.gif);}
* #invisalign {background: url(../images/nav/invisalign.gif);}
* #art-gallery {background: url(../images/nav/art-gallery.gif);}
* #games {background: url(../images/nav/games.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 #meet-our-office, #nav li.sfhover #meet-our-office,
#nav li:hover #new-patients, #nav li.sfhover #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 #invisalign, #nav li.sfhover #invisalign,
#nav li:hover #art-gallery, #nav li.sfhover #art-gallery,
#nav li:hover #games, #nav li.sfhover #games,
#nav li:hover #contact-us, #nav li.sfhover #contact-us,
#nav li:hover #emergency-care-videos, #nav li.sfhover #emergency-care-videos, 
#nav li:hover #home, #nav li.sfhover #home {background-position: 0 -25px;}

/* 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: -25px 0 0 190px;}
#nav li ul li {background: #C2D8F0; display: block; width: 200px; height: 28px; padding: 0; margin: 0;}
#nav li ul li a {padding: 5px 0 5px 7px; margin: 0; width: auto; height: 18px; display: block; color: #254d7c; text-indent: 0; /* font-size: 1em; */ font-weight: normal; text-decoration: underline;}
#nav li ul li a:hover {color: #4e82bc; height: 18px; _height: 18px;}

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

h2.media-center {
background:#000033;
color:#FFF;
margin:0;
padding:5px;}
div.media-center {
background:#336699;
margin-bottom:10px;
padding:10px;}
div.media-center h3 {
color: #fff;
text-align: center;}
div.media-center img {
border:1px solid #FFF;}
* #video-in-ovation {
width: 320px;
height: 266px;
margin: 0 auto;}

* .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 Forms
---------------------------*/

/* Global form styles */
* .referral-form, * .appointment-form, * .comments {width: 100%; margin: 0 auto;}

fieldset {border: none; padding: 9px 0;}
fieldset div {clear: both;}
fieldset p.note {font-weight: bold;}
* .form-header {border-bottom: 1px solid #254d7c;/*optional, change color to match site*/}
.form-header h3 {margin: 0 0 9px;}
.form-header p {margin: 0 0; padding-bottom: 18px;}
label.required {background: url(../images/required_note.gif) 100% 10px no-repeat;}
* .form-footer {padding-top: 18px; text-align: center; border-top: 1px solid #254d7c;/*optional, change color to match site*/}
.form-footer button {/*these styles control the look of the button, change as necessary*/
	clear:both;/*do not change, forces button to sit below floated elements*/
	margin: 9px auto;/*do not change, controls positioning*/
	display: block;
	width:125px;
	height:31px;
	background:#4671A1;/* customize me! */
	border: 1px solid #254d7c;/* customize me! */
	text-align:center;
	line-height:31px;
	color:#ffffff;/* customize me! */
	font-size:12px;
	font-weight:bold;}

/* comment form */	
* .comments {
	margin: 18px 0;
	padding: 10px;}
.comments li {font-weight: bold; vertical-align: text-top;}
.comments label {/*floats labels left*/
	font-size: 12px;
	display:block;
	font-weight:bold;
	text-align:left;
	width:45%;
	float:left;}
.comments label span {/*sits below labels; holds instructions*/
	color:#666666;
	display:block;
	font-size:11px;
	font-weight:normal;
	text-align:left;
	width:100%;}
.comments .label-block label {float: none; clear: both; width: 100%; text-align: left; margin-bottom: 10px;}
.comments input, .comments textarea {
	float:left;
	font-size:12px;
	padding:4px 2px;
	border:solid 1px #254d7c;/* customize me! */
	width:45%;
	margin:9px 0 9px 2%;
	background: #ffffff;}
.comments p.verification {
	clear: both;
	margin: 9px 0 9px 47%;
	font-size: 12px;}
.comments p.radio-float {
	clear: none;
	float:left;
	width: 45%;
	padding:0;
	margin:9px 0 9px 0;}
.comments p.verification {margin: 0 0 0 47%;}
.comments p.verification img {border: 1px solid #254d7c;}/* customize me! */
.comments p.radio input, .comments p.radio-float input {
	float: none;
	margin: 0 0 0 0;
	padding: 4px 2px;
	width: auto;}
.comments p.radio span {padding: 0 2% 0 0;}
.comments .radio {text-align: left; font-weight: normal;}
.comments .comments-box label {float: none; font-weight: normal; display: block; text-align: left;}
.comments .comments-box textarea {float: none; margin-left: 0; width:95%;
}

/* Errors */

/* JQuery */
input.error {border: 1px solid #ff0000; background: #fefda1; }
div.error {padding-left: 18px;background: url(../images/validate_error.jpg) 0 0 no-repeat; color: #ff0000; display: block;margin:0 0 9px 47%;font-size: 11px; line-height: 18px;}
div.success {padding-left: 18px; background: url(../images/validate_ok.jpg) 0 0 no-repeat; color: #000000; display: block;margin:0 0 9px 47%;font-size: 11px; line-height: 18px;}

/* Edit.com */

ul, ol {
	margin-top:0px;
	margin-bottom:0px;
}

.NormalText, body, td {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 18px;
	color: #254D7C;
	font-weight: normal;
	text-decoration: none;
	text-transform: none;
	font-style:normal;
}

.SmallGreenText {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 16px;
	color: #697432;
	font-weight: normal;
}

.GreenText {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 18px;	
	color: #697432;
	font-weight: normal;
}

.FooterText {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #FFF;
	font-weight: normal;
}

.GreenSubHeader {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 18px;	
	color: #697432;
	font-weight: bold;
}

.SubjectHeader {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #254D7C;
	font-weight: bold;
}

* #content p {font-size: 12px;}
* #footer p.text_nav, * #footer p.sesame {font-size: 12px;}

td.BlueBorderBottom {border-bottom: solid 1px #254D7C; padding-bottom: 15px;}