/* CSS Document */

/* HTML, BODY ---------- */
* {margin:0; padding:0;}
body {margin:0; background:#e5d187; font-family: Tahoma, Arial, sans-serif; font-size:12px; line-height:22px; color:#311c00;}
p, h2, h3, ul, blockquote, ol {padding-top:0px; padding-bottom:20px;}
ul, blockquote, ol {padding-left:30px; padding-right:20px;}
a {color:#311c00;}
a:hover {text-decoration:none;}
a img {border-style:none;}
#footer a {color:#da8c55}
#footer p {margin:0; padding:0;}


/* LAYOUT ---------- */
* #wrap {width:937px; margin:0 auto; background:url(images/bg-body.gif) no-repeat; min-height:722px; height:auto !important; height:722px; position:relative;}
* #address {float:right; margin:17px 166px 0 0; /* font-size:11px; color:#754200; */ line-height:15px; width:121px; text-align:right;}
* #content {width:738px; padding:0 0 0 199px; clear:both;}
* #text {width:708px; margin:0 auto;}
* #forms {padding:10px; background-color:#FFF; border:10px solid #d1df8e;	width:180px; margin: 10px 10px 10px 10px; float:right; color:#003366; clear:right;}
#forms h3, #forms a {color:#003366}
* #footerwrap {width:100%; background:url(images/tile-footer.gif) repeat-x #ba5915; padding-bottom:20px; clear:both;}
* #footer {width:937px; margin:0 auto; padding:50px 64px 0 4px; background:url(images/bg-footer.gif) no-repeat; color:#da8c55; font-size:11px; line-height:16px; overflow:auto;}
* #invisalignbanner {float:left; padding-right:39px;}
* #ibracesbanner {float:left; padding-right:39px; clear:left; margin-top:10px;}

/* HEADERS ---------- */
h1 {background-repeat: no-repeat; height: 110px; width:738px; text-indent: -999em; margin: 0; padding:0 0 40px 0;}
#content h2 {color:#ba5915; font-size:13px; margin:0; padding:0;}
#content h3 {color:#994708; font-size:12px;}
#content h4 {font-size:11px;}
#address h2 {font-size:11px; color:#754200; margin:0; padding:0; text-decoration:underline;}
#footer h2 {color:#e5d187; font-size:11px; margin:0; padding:9px 0 0 0;}
h1#logo {
margin: 0;
padding: 0;
background-repeat: no-repeat; 
width: 199px;/* this width reflects the width of the logo image */
height: 189px; /* this height reflects the height of the heading image */
overflow: hidden; 
text-indent: -999em; float:left;} /* hides rich text so only background image shows */

h1#logo a {
display: block; 
height: 189px;/*same height as logo h1*/ 
width: 199px;/*same width as logo h1*/}

/* CLASSES ---------- */
* #footer .sesame {color:#FFF; font-weight:bold;}
* .img {margin:10px; float:right;}
* .right {float:right;}
* .left {float:left;}
* .top  {color:#e4a732; font-size:11px; font-weight:bold;}
* .hide {display:none;}
* .flash {width:738px; height:286px;}
* .flashp {color:#FFF; font-weight:bold; background-image: url(images/1.jpg); text-align:center; padding:20px 20px 211px 20px;}
* .block {display:block;}
* .listnone {list-style:none;}
* .center {text-align:center;}
* .clear {clear:both;}
* .clearleft {clear:left;}
* .clearright {clear:right;}
* .resources {border:1px solid #321c00; text-shadow:#999999;}
* .name {margin-left:40px; /* font-style:italic; color:#CC6600; */}

/* NAVIGATION ---------- */


/* NAVIGATION MAIN ---------- */
ul#navlists {list-style: none; position:absolute; top:218px; margin:0 0 0 12px; width:169px; z-index:90; clear:both;  padding:0;}

/*  Sets styles for all links that are inside the ul id="nav" */
#navlists a {display: block; height: 30px; overflow: hidden; text-indent:-999em; width:169px}

/* Set the image for each nav item */
* #aboutus {background: url(images/nav-about-us.gif); }
* #firstvisit {background: url(images/nav-first-visit.gif); }
* #aboutorthodontics {background: url(images/nav-about-ortho.gif); }
* #braces101 {background: url(images/nav-braces-101.gif); }
* #emergencies {background: url(images/nav-emergencies.gif); }
* #gameroom {background: url(images/nav-game-room.gif); }
* #technologies {background: url(images/nav-technologies.gif); }
* #contactus {background: url(images/nav-contact-us.gif); }
* #home {background: url(images/nav-home.gif); }

/* Shift the image position up to show the active state */
#navlists a:hover, #navlists .active, #navlists li:hover, #navlists li.sfhover, 
#navlists li:hover #aboutus, #navlists li.sfhover #aboutus, 
#navlists li:hover #firstvisit, #navlists li.sfhover #firstvisit, 
#navlists li:hover #navlists #aboutorthodontics, #navlists li.sfhover #aboutorthodontics, 
#navlists li:hover #braces101, #navlists li.sfhover #braces101, 
#navlists li:hover #emergencies, #navlists li.sfhover #emergencies, 
#navlists li:hover #gameroom, #navlists li.sfhover #gameroom, 
#navlists li:hover #technologies, #navlists li.sfhover #technologies, 
#navlists li:hover #contactus, #navlists li.sfhover  #contactus,
#navlists li:hover #home, #navlists li.sfhover  #home {background-position:-169px 0pt;}

/* Set the cursor to default arrow so link does not appear clickable */
* #navlists .active {cursor: default}

/* NAVIGATION SUB ---------- */
ul#sub {list-style: none; padding: 0; margin:0; width:169px;}

/*  Sets styles for all links that are inside the ul id="nav" */
#sub a {display: block;height: 19px; overflow: hidden; text-indent:-999em; width:169px}

/* Set the image for each nav item */
* #meetdrfrasersherrard {background: url(images/nav-meet-dr-fraser-sherrard.gif); }
* #meetdrjohnsherrard {background: url(images/nav-meet-dr-john-sherrard.gif); }
* #meetthestaff {background: url(images/nav-meet-the-staff.gif); }
* #testimonials {background: url(images/nav-testimonials.gif); }
* #upcomingevents {background: url(images/nav-upcoming-events.gif); }
* #photogallery {background: url(images/nav-photo-gallery.gif); }
* #whybraces {background: url(images/nav-why-braces.gif); }
* #orthodonticsforchildren {background: url(images/nav-orthodontics-for-children.gif); }
* #orthodonticsforadults {background: url(images/nav-orthodontics-for-adults.gif); }
* #orthodontictreatments {background: url(images/nav-orthodontic-treatments.gif); }
* #asktheorthodontist {background: url(images/nav-ask-the-orthodontist.gif); }
* #resources {background: url(images/nav-resources.gif); }
* #lifewithbraces {background: url(images/nav-life-with-braces.gif); }
* #typesofbraces {background: url(images/nav-types-of-braces.gif); }
* #bracepainter {background: url(images/nav-brace-painter.gif); }
* #bracesdiagram {background: url(images/nav-braces-diagram.gif); }
* #retainers {background: url(images/nav-retainers.gif); }
* #beforeandafter {background: url(images/nav-before-and-after.gif); }
* #invisalign {background: url(images/nav-invisalign.gif); }
* #suresmile {background: url(images/nav-suresmile.gif); }
* #ibraces {background: url(images/nav-ibraces.gif); }
* #speedsystem {background: url(images/nav-speed-system.gif); }
* #oralcarevideo {background: url(images/nav-oral-care-video.gif); }
* #surgicalorthodontics {background: url(images/nav-surgical-orthodontics.gif); }
* #location {background: url(images/nav-location.gif); }
* #commentform {background: url(images/nav-comment-form.gif); }
* #referafriend {background: url(images/nav-refer-a-friend.gif); }
* #appointmentrequest {background: url(images/nav-appointment-request.gif); }

/* Shift the image position up to show the active state */
#sub a:hover, #sub .active, #sub li:hover, #sub li.sfhover, 
#sub li:hover #meetdrfrasersherrard, #sub li.sfhover #meetdrfrasersherrard, 
#sub li:hover #meetdrjohnsherrard, #sub li.sfhover #meetdrjohnsherrard, 
#sub li:hover #meetthestaff, #sub li.sfhover #meetthestaff, 
#sub li:hover #testimonials, #sub li.sfhover #testimonials, 
#sub li:hover #upcomingevents, #sub li.sfhover #upcomingevents, 
#sub li:hover #photogallery, #sub li.sfhover #photogallery, 
#sub li:hover #whybraces, #sub li.sfhover #whybraces, 
#sub li:hover #orthodonticsforchildren, #sub li.sfhover #orthodonticsforchildren, 
#sub li:hover #orthodontictreatments, #sub li.sfhover #orthodontictreatments,
#sub li:hover #asktheorthodontist, #sub li.sfhover #asktheorthodontist,
#sub li:hover #resources, #sub li.sfhover #resources,
#sub li:hover #lifewithbraces, #sub li.sfhover #lifewithbraces,
#sub li:hover #typesofbraces, #sub li.sfhover #typesofbraces,
#sub li:hover #bracepainter, #sub li.sfhover #bracepainter,
#sub li:hover #bracesdiagram, #sub li.sfhover #bracesdiagram,
#sub li:hover #retainers, #sub li.sfhover #retainers,
#sub li:hover #oralcarevideo, #sub li.sfhover #oralcarevideo,
#sub li:hover #surgicalorthodontics, #sub li.sfhover #surgicalorthodontics,
#sub li:hover #invisalign, #sub li.sfhover #invisalign,
#sub li:hover #suresmile, #sub li.sfhover #suresmile,
#sub li:hover #speedsystem, #sub li.sfhover #speedsystem,
#sub li:hover #ibraces, #sub li.sfhover #ibraces,
#sub li:hover #location, #sub li.sfhover #location,
#sub li:hover #commentform, #sub li.sfhover #commentform,
#sub li:hover #referafriend, #sub li.sfhover #referafriend,
#sub li:hover #appointmentrequest, #sub li.sfhover #appointmentrequest,
#sub li:hover #orthodonticsforadults, #sub li.sfhover #orthodonticsforadults {background-position:-169px 0pt;}

/* Set the cursor to default arrow so link does not appear clickable */
* #sub .active {cursor: default}

/* LOGINS NAV ITEMS ---------- */

ul#logins {height: 170px; width:140px; list-style: none; position:absolute; top:0px; z-index:100; left:754px}

/*  Makes the list items sit next to each other */
#logins li {float: left;}

/*  Sets styles for all links that are inside the ul id="nav" */
#logins a {display: block;height: 170px; overflow: hidden; text-indent:-999em;}

/* Set the image for each nav item */
* #patientlogin {background: url(images/nav-patient-login.gif);width:47px;}
* #doctorlogin {background: url(images/nav-doctor-login.gif);width:47px;}
* #appointments {background: url(images/nav-appointments.gif);width:46px;}

/* Shift the image position up to show the active state */
#logins a:hover, #logins .active, #logins li:hover, #logins li.sfhover {background-position:0 -170px;}
/* Set the cursor to default arrow so link does not appear clickable */
* #logins .active {cursor: default}

div#sesame-game {
background: #000;
line-height: 0;
margin: 10px auto;
text-align: center;
width: 400px}

ul#sesame-games {
list-style: none;
margin: 0;
padding: 0}

ul#sesame-games li {
clear: both;
display: block}

ul#sesame-games img {
border: 0;
margin: 0 0 10px 10px}

ul#sesame-games a.button {
float:right;
height:85px;
width:200px}

ul#sesame-games p {
padding-bottom: 1em}

* .left {
float:left;
margin:0 10px 10px 0;}
img.right {
float:right;
margin:0 0 10px 10px;}
* .clear {
clear:both;}
#text h2.media-center {
background:#000033;
color:#FFF;
margin:0;
padding:5px;}
div.media-center {
background:#336699;
color:#FFF;
display:inline-block;
margin-bottom:10px;
overflow:auto;
padding:10px;}
div.media-center a {
color:#FFF;}
div.media-center img {
border:1px solid #FFF;}

/* 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: 22px;
	color: #311c00;
	font-weight: normal;
	text-decoration: none;
	text-transform: none;
	font-style:normal;
}

.FooterText {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #E5D187;
	font-weight: bold;
}

.BrownText {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #754200;
	font-weight: normal;
}

.OrangeText {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #CC6600;
	font-weight: normal;
}

.DarkBrownSubjectHeader {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #994708;
	font-weight: bold;
}

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

* #pt {
	background-image: url(images/title-template.gif);
	background-repeat: no-repeat;
	height: 110px;
	width:738px;
	margin: 0;
	padding: 40px 0 0 40px;
}
p.small {
	font-size: 10px;
	}
img.right-border {
	border: solid 1px #333;
	float: right;
	margin: 0 0 15px 15px;
	}
div.learn-more {
	background-color: #fff;
	color: #036;
	width: 50%;
	border: solid 1px #fff;
	padding: 0;
	margin: 15px 18px 15px 15px;
	float: right;
	}
div.learn-more a {
	color: #036;
	}
.learn-more h3 {
	background-color: #97AFC2;
	color: #fff;
	margin: 0 0 10px 0;
	padding: 10px;
	}
.learn-more p {
	padding: 0;
	margin: 0 0 10px 0;
	}
.clear {
	clear: both;
	}
#video-suresmile {
	width: 320px;
	height: 206px;
	}
p.flash_notice {
	margin: 18px;
	padding: 9px;
	color: #ff0000;
	border: 1px dotted #ff0000;
	background: #ffffff;
	text-align: center;
	}