/*-----------------------------------------------
	Main Styles
	Created: 	12/02/2009
	Version: 	1.0
----*/

/* Import reset stylesheet */
@import url('reset.css');
/* Import font-face stylesheet */
@import url('fonts.css');

/*-----------------------
	Per Project Reset
----*/
body {
	font-size: 14px;
	line-height: 18px;
	/* Trebuchet-based sans serif stack */
	font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
	/* end font stack */
	color: #000;
	background: #e7eaf4 url(../images/body-bg.png) 50% 0 repeat-x;
	text-align: center;
	}
.replaced {overflow: hidden; text-indent: -999em; background-repeat: no-repeat;}
/*prettyPhoto text color reset*/
.pp_content * {color: #000;}


/*-----------------------
	Typography
----*/

/*LINKS*/
	a {cursor:pointer;!important outline: none;}
	a, a:link, a:visited {text-decoration: underline; font-weight: bold;}
	a:visited {color: #b4bddc; text-decoration: none;}
	a:hover, a:active  {text-decoration: none;}
	
	
	/* displays icons next to PDF and WORD docs */
	.pdf span, .video-link span {padding: 0;}
	.pdf span { 
		display: inline-block;
		vertical-align: middle;
		width: 18px;
		height: 18px;
		background: url(../images/icon_pdf.gif) 100% 0 no-repeat;}
	.doc span { 
		display: inline-block;
		vertical-align: middle;
		width: 18px;
		height: 18px;
		background: url(../images/icon_doc.gif) 100% 0 no-repeat;}
	.video-link span {
		display: inline-block;
		vertical-align: middle;
		width: 18px;
		height: 18px;
		background: url(../images/icon_film.gif) 100% 0 no-repeat;}
	#bd a.external {
		padding-right: 18px;
		background: url(../images/icon_external.gif) 100% 50% no-repeat;
	}
	#bd a.noicon {background: none;}
	

/*HEADINGS*/
	h1 {font-family: 'KunstlerschreibschDBolRegular'; }
	h1 em {font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;}
	h1, h2, h3, h4, h5, h6, dt {font-weight: normal;}
	h1 {
		font-size: 36px;
		line-height: 36px; 
		margin: 0 0 18px;
		}
	h2 {
		font-size: 20px;
		line-height: 27px;
		margin: 0 0 18px;
		}
		h2 span {display: block; font-size: 90%;}
	h3 {
		font-size: 18px;
		margin: 0 0 18px;
		}
	h4 {
		font-size: 16px;
		line-height: 18px;
		margin: 9px 0 9px;
		}
	h5 {
		font-size: 14px;
		line-height: 18px;
		margin: 18px 0 0;
		}

/*LISTS*/
	ol, ul, dl {
		list-style: none;
		margin: 0px 0 18px;
		}
	dl {margin: 0 0 18px; text-align: left;}
		dt {
			font-size: 18px;
			line-height: 18px;
			margin: 18px 0 18px;
			text-decoration: none;
			}
			dt span {font-size: 90%; display: block;}
		dd {margin: 0 0 18px;}
			dd ul, dd ol, dd li, dd li {margin: 9px 18px 9px 18px;}
			dd h2, dd h3 {font-size: 16px;}
	
	
	ol {list-style: decimal outside; margin-left: 18px;}
		ol ol {margin: 0 0 18px;}
		ol li {margin-left: 18px;}
		li {
			line-height: 18px;
			margin-bottom: 0;
			}
		li {line-height: 18px; margin: 0 0 9px;}
			li h3 {font-size: 14px; margin: 0;}
		li > p {margin-bottom: 18px;}
	ul {margin: 0 0 18px;}
		ul ul {margin-left: 18px; margin-right: 18px;}
	ul.bullet, ul.sitemap-list {
		list-style: none;
		display: block;
		margin: 0px 18px 18px;
		}
	ul.bullet li {padding-left: 18px; background: url(../images/bullet.jpg) 0 2px no-repeat; }
		ul.bullet ul {margin: 0 0 9px 0;}
			ul.bullet ul li {padding-left: 18px; background: url(../images/bullet.jpg) 0 0 no-repeat; margin-left: 9px;}
	
	
	
	
	/*--Used with jQuery to style bullet and text separately*/
	ol.js {
		list-style: decimal outside; 
		margin-left: 18px; 
		margin-right: 18px; 
		font: bold italic 14px Georgia; 
		}
	ol.js li span {
		font: normal normal 13px Corbel, Arial, Helvetica, "Nimbus Sans L", "Liberation Sans", sans-serif; 
		}
		
	ul.q-and-a li {
		padding: 0 0 0 36px;
		}
		ul.q-and-a li h2, ul.q-and-a li h3, ul.q-and-a li h4 {
			margin: 18px 0 0;
			font-size: 18px;
			}
		ul.q-and-a li span {
			display: inline-block;
			float: left;
			position: relative;
			margin-left: -36px;
			font-size: 16px;
			line-height: 18px;
			font: bold normal 18px Georgia;
			color: #000;/* customize color to match site */
			vertical-align: middle;
			}
	ul.q-and-a li div span {color: #000;}/* customize color to match site */
		ul.q-and-a li div ul {margin-top: 0; padding: 0;}
		ul.q-and-a li div ul li {padding-left: 18px;}
	
	/*--end */
	ol.alpha {list-style: upper-alpha outside;}
	ol.numeric {list-style: decimal outside;}
	ol.alpha li, ol.numeric li {margin-bottom: 9px;}
	
/*PARAGRAPHS*/
	p {
		line-height: 18px;
		margin: 0 0 18px 0;
		}
	p.skipto {
		position: absolute;
		left: -999em;
		display: none;
		}
	p.callout {font-weight: bold; color: #004990; }
p.flash_notice {
	margin: 18px;
	padding: 9px;
	color: #ff0000;
	border: 1px dotted #ff0000;
	background: #ffffff;
	text-align: center;
	}
	.top-link {text-align: right; clear: both;}
	
/*TEXT*/
	.hide {display: none;}
	.center {text-align: center;}
	.right {text-align: right;}
	strong, b {	font-weight: bold;}
	em {font-style:italic;}
	sup, sub {font-size: 90%; line-height: 18px; vertical-align: middle;}
	sub {vertical-align: text-bottom;}
	q:before, q:after {/* remove quotes since IE doesn't understand :( */
	    content: ""; }
	q {font-style: italic; font-weight: bold;}
	q.js span {font: 125% Georgia; line-height: 18px; vertical-align: middle;}
	li blockuote {margin: 0; padding: 0; display: inline;}
	blockquote {margin: 18px 54px; padding: 9px 18px 18px 45px;}
	blockquote p {margin: 18px 0 0; font-style: oblique;}
	.map {
		float: right;
		width: 504px; 
		height: 358px; 
		border: 1px solid; 
		overflow: hidden; 
		display: block; 
		margin: 0 0 18px 18px;
		padding: 9px;
		background: #004990;
		-moz-border-radius: 9px;
		-webkit-border-radius: 9px;
		}
	
/*SHORTCUTS*/
	
	/* Image Replacement -- add class="replace" to root element, i.e. <p> and add a bg image*/
	.replace {letter-spacing : -1000em;line-height: 0;overflow: hidden;line-height: 0;text-indent: -999em;}
	/* Just for Opera, but hide from MacIE */
	/*\*/html>body .replace {letter-spacing : normal;text-indent : -999em;overflow : hidden;}
	/* End of hack */
	/* 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;}
	.hide {display: none;}
	.replaced {overflow: hidden; text-indent: -999em; background-repeat: no-repeat; }
	p.adobe-rdr a {margin: 36px 18px;}
	
/*FLASH*/
	#flash-homepage {width: 540px; height: 227px; position: absolute; top: 252px; left: 18px;background: url(../images/homepage-bg.jpg) 0 0 no-repeat;}
	.module {margin: 18px 0;}/* global margins for all flash mods */
	
/*IMAGES*/
	img {display: inline; border: 0;outline: 0;}
	.img-left {
		position: relative;
		float: left;
		margin: 0 18px 18px 0;
		}
	.img-right {
		position: relative;
		float: right;
		margin: 0 0px 36px 18px;
		clear: right;
		}
	.img-staff {position: relative; float: right; display: block; margin: 0 -335px 36px 0; text-align: center;}
	.img-center {
		margin: 18px auto; 
		text-align: center; 
		border: 1px solid;
		}

/*LAYOUT*/	
	#container {
		width: 100%;
		min-width: 954px;
		background: url(../images/content-bg.png) 50% 0 repeat-y;
		}
		#container .inner {width: 100%; background: url(../images/sprite.png) 50% -306px no-repeat;}
		#bd, #hd, .content {width: 954px; position: relative; margin: 0 auto;}
		.col {width: 50%; float: left;}
	/*HEADER*/
	#hd {
		height: 270px;
		text-align: left;
		}
		#hd h1#logo {
			width: 306px;
			height: 189px;
			margin: 0;
			position: absolute;
			top: 0;
			right: 27px;
			}
			#hd h1#logo a {
				width: 306px;
				height: 189px;
				display: block;
				text-indent: -999em;
				overflow: hidden;			
				}
		#hd address {margin: 0 333px 0 0; padding: 144px 0 0 54px; font-size: 16px; color: #034d8c;}		
					
	/*MAIN CONTENT*/		
	#bd {
		padding: 9px 0 9px;
		}
		#bd a {color: #004990; text-decoration: underline;}
		#bd a:hover, #bd a:active {color: #7084b9; text-decoration: none;}
	/*sidebar*/
	#sidebar {
		width: 324px;
		position: absolute;
		padding-top: 18px;
		right: 18px;
		}
	/*content body*/
	#content {
		margin: 0 351px 0 36px;
		padding: 0 0 18px;
		text-align: left;
		}
	body.interior #content {margin-right: 45px; margin-left: 45px;}	
		#content h1.headline {
			font-family: 'KunstlerschreibschDBolRegular'; 
			font-size: 36px;
			line-height: 36px;
			color: #678f48;
			margin-top: 0;
			text-align: left;
			position: relative;
			}
		body.home #content h1.headline {
			font-size: 32px;
			line-height: 36px;
			}
			#content h1.headline em {font-size: 22px; line-height: 36px; display: block; color: #004990; text-align: right;}
		body.interior #content h1.headline {font-size: 45px; line-height: 45px; letter-spacing: normal;}
		#content h2 {font-size: 20px; color: #3f61c2;}
			#content h2 em {font-size: 95%; color: #485980;}
		#content h2.intro {
			font-size: 14px; 
			line-height: 18px;
			font-weight: normal; 
			font-style: italic; 
			margin-bottom: 18px; 
			}
			#content h2.intro a {color: #678f48;}
			#content h2.intro a:hover {text-decoration: underline;}
		#content h3 {color: #678f48; font-weight: bold;}
			#content h3 span {color: #aeafab;}
		#content h4 {color: #aeafab;}
		#content dt {color: #3f61c2; font-weight: bold;}
		#content dt span {}
		/* on-page sub nav */
		#content p.sub_nav {font-size: 14px; padding-bottom: 17px;}
			#content p.sub_nav a {color: #7084b9; font-weight: bold; text-decoration: underline;}
			#content p.sub_nav a:hover, #content p.sub_nav a.active {
				color: #004990;
				text-decoration: none;
				}
		/* back to top */
		p.back-to-top {clear: both;}
			p.back-to-top a {text-align: left; font-weight: bold; text-decoration: none; padding: 9px 18px 9px 0; background: url(../images/uparr.jpg) 100% 50% no-repeat;}

	/*FOOTER*/
	#ft {
		width: 100%;
		min-width: 954px;
		padding-top: 18px;
		background: url(../images/footer-bg.png) 50% 0 no-repeat;
		}
		#ft a {color: #004990; text-decoration: none;}
		#ft a:hover {text-decoration: underline; color: #b4bddc;}
		#ft a:visited {color: #b4bddc;}
		#ft .content {
			margin: 0 auto; 
			text-align: left; 
			color: #004990;
			}
			.content #page-tools {height: 252px; position: relative;}
				#page-tools #contact-options {position: absolute; top: 9px; left: 252px; width: 324px; height: 180px;}
				#page-tools #footer-nav {width: 288px; position: absolute; top: 90px; left: 630px; margin: 0;}
					#footer-nav dt {padding-left: 36px; margin: 0 0 18px; font-family: KabelBook; font-size: 14px;}
					#footer-nav dd {width: 50%; float: left;}
						#footer-nav dd ul.bullet, #footer-nav dd ul.bullet li {margin: 0; font-size: 12px;}
			#ft .content .ft-sidebar {width: 306px; position: absolute; right: 18px; margin-top: -3px; }
				#ft .content .ft-sidebar p a img {margin-right: 9px;}
			#ft .content h4 {font-size: 13px; margin: 9px 423px 0 36px; font-weight: bold;}
			#ft .content p {margin: 0 0 18px}
			/*footer text nav */
			#ft .content p.text_nav {margin: 9px 0 0;}
				

/*NAVIGATION*/
	/*Primary Nav*/
	#nav {
		width: 918px;
		height: 63px;
		position: absolute;
		top: 200px;
		left: 50%;
		margin-left: -459px;
		z-index: 500;
		}
		#nav ul {
			width: 918px;
			height: 63px;
			}
			#nav ul li {display: inline; float: left;}
				#nav ul li a {
					display: block;
					}
					/*NAV IMAGES*/
					#our-office, #patient-information, #about-orthodontics, #braces-101, #orthodontic-treatments, #first-aid, #home {
						height: 63px;
						overflow: hidden;
						text-indent: -999em;
						background: url(../images/sprite.png) no-repeat;
						}
					#nav ul li #home {width: 80px; background-position: -441px -9px;}
					#nav ul li:hover #home, #nav ul li.sfhover #home, 
					  #nav ul li.active:hover #home, #nav ul li.active.sfhover #home {background-position: -441px -81px} 
					#nav ul li.active #home {background-position: -441px -153px}
					
					#nav ul li #our-office {width: 111px; background-position: -521px -9px;}
					#nav ul li:hover #our-office, #nav ul li.sfhover #our-office, 
					  #nav ul li.active:hover #our-office, #nav ul li.active.sfhover #our-office {background-position: -521px -81px}
					#nav ul li.active #our-office {background-position: -521px -153px}
					
					#nav ul li #patient-information {width: 199px; background-position: -632px -9px;}
					#nav ul li:hover #patient-information, #nav ul li.sfhover #patient-information, 
					  #nav ul li.active:hover #patient-information, #nav ul li.active.sfhover #patient-information {background-position: -632px -81px}
					#nav ul li.active #patient-information {background-position: -632px -153px}
					
					#nav ul li #about-orthodontics {width: 193px; background-position: -831px -9px;}
					#nav ul li:hover #about-orthodontics, #nav ul li.sfhover #about-orthodontics, 
					  #nav ul li:hover #about-orthodontics, #nav ul li.sfhover #about-orthodontics, #nav ul li.active.sfhover #about-orthodontics {background-position: -831px -81px}
					#nav ul li.active #about-orthodontics {background-position: -831px -153px}

					#nav ul li #braces-101 {width: 110px; background-position: -1025px -9px;}
					#nav ul li:hover #braces-101, #nav ul li.sfhover #braces-101, 
					  #nav ul li.active:hover #braces-101, #nav ul li.active.sfhover #braces-101 {background-position: -1025px -81px}
					#nav ul li.active #braces-101 {background-position: -1025px -153px}
					
					#nav ul li #orthodontic-treatments {width: 125px; background-position: -1135px -9px;}
					#nav ul li:hover #orthodontic-treatments, #nav ul li.sfhover #orthodontic-treatments, 
					  #nav ul li.active:hover #orthodontic-treatments, #nav ul li.active.sfhover #orthodontic-treatments {background-position: -1135px -81px}
					#nav ul li.active #orthodontic-treatments {background-position: -1135px -153px}
					
					#nav ul li #first-aid {width: 99px; background-position: -1260px -9px;}
					#nav ul li:hover #first-aid, #nav ul li.sfhover #first-aid, 
					  #nav ul li:hover #first-aid, #nav ul li.sfhover #first-aid, #nav ul li.active:hover #first-aid, #nav ul li.active.sfhover #first-aid {background-position: -1260px -81px}
					#nav ul li.active #first-aid {background-position: -1260px -153px}

				/* dropdown styles */
				#nav ul li ul {
					width: 207px;
					height: auto;
					position: absolute;
					left: -999em;
					display: block;
					margin: -13px 0 0 3px;
					background: #cedaa9;
					border: 1px solid #8eb14d;
					-moz-border-radius: 0 6px 6px 6px;
					-webkit-border-bottom-left-radius: 6px;
					-webkit-border-top-right-radius: 6px;
					-webkit-border-bottom-right-radius: 6px;
					-moz-box-shadow: 0px 5px 5px rgba(0,0,0,0.35);
					-webkit-box-shadow: 0 5px 5px rgba(0,0,0,0.35);
					padding: 9px 0 9px;
					}
				#nav ul li:hover ul, #nav ul li.sfhover ul,
				  #utility-nav ul li:hover ul, #utility-nav ul li.sfhover ul {
						left: auto;
					}
					#nav ul li ul li, #utility-nav ul li ul li {float: none;}
						#nav ul li ul li a, #utility-nav ul li ul li a{
							font-size: 14px;
							float: none;
							font-weight: normal;
							text-decoration: none;
							line-height: 27px;
							padding: 0 18px;
							text-align: left;
							color: #004990;
							}
						#nav ul li ul li a:hover, #nav ul li ul li.active a, 
						  #utility-nav ul li ul li a:hover, #utility-nav ul li ul li.active a {color: #fff; font-weight: bold; background: #004990;}
	
	/*Top-Left Nav*/
	#utility-nav {
		width: 441px; 
		height: 45px;
		position: absolute;
		top: 63px;
		left: 50%;
		margin-left: -441px;
		z-index: 1000;
		}
		#utility-nav ul {
			width: 441px; 
			height: 45px;
			z-index: 1000;
			}
			#utility-nav ul li {display: inline; float: left;}
			/*NAV LINKS*/
			#utility-nav ul li a {
				display: block;
				}
				/*NAV IMAGES*/
				#patient-login, #doctor-login, #contact-us {
					height: 45px;
					overflow: hidden;
					text-indent: -999em;
					background-image: url(../images/sprite.png);
					}
				#utility-nav ul li #patient-login {width: 152px; background-position: 0px 0px;}
				#utility-nav ul li:hover #patient-login, #utility-nav ul li.sfhover #patient-login, 
				  #utility-nav ul li.active #patient-login {background-position: 0 -54px;}
				
				#utility-nav ul li #doctor-login {width: 142px; background-position: -152px 0;}
				#utility-nav ul li:hover #doctor-login, #utility-nav ul li.sfhover #doctor-login, 
				  #utility-nav ul li.active #doctor-login {background-position: -152px -54px;}
	
				#utility-nav ul li #contact-us {width: 146px; background-position: -294px 0;}
				#utility-nav ul li:hover #contact-us, #utility-nav ul li.sfhover #contact-us, 
				  #utility-nav ul li.active #contact-us {background-position: -294px -54px;}

				/*dropdown styles */
				#utility-nav ul li ul {
					position: absolute;
					left: -999em;
					width: 216px;
					height: auto;
					background: #6e81af;
					border: 1px solid #163e6f;
					margin: -1px 0 0 6px;
					-moz-border-radius: 0 6px 6px 6px;
					-webkit-border-bottom-left-radius: 6px;
					-webkit-border-top-right-radius: 6px;
					-webkit-border-bottom-right-radius: 6px;
					-moz-box-shadow: 0px 5px 5px rgba(0,0,0,0.35);
					-webkit-box-shadow: 0 5px 5px rgba(0,0,0,0.35);
					padding: 9px 0 9px;
					}
					#utility-nav ul li ul li {float: none;}
						#utility-nav ul li ul li a {
							line-height: 27px;
							color: #fff;
							}
						#utility-nav ul li a:hover, #utility-nav ul li.active a {}



/*-----------------------------------------------
	Before/After 
	*/

/*-----------------------------------------------
	Tours/Slideshows 
	*/
	/* Slideshow home */
	#slideshow-home {
		position: relative;
		width: 324px;
		z-index: 0;
		}
		#slideshow-home .slideshow {
			width: 324px;
			list-style: none;
			margin: 0;
			padding: 0;
			}
			.slideshow li img {width: 324px; height: 342px;}


/*-----------------------------------------------
	Sesame CSS
	*/
	img.right {
		margin: 0 0 15px 15px;
		float: right;
		clear: right;
		}
	img.left {
		margin: 0 15px 15px 0;
		float: left;
		clear: left;
		}
	img.left-border {
		float: left;
		clear: left;
		margin: 5px 15px 15px 0;
		border: solid 1px #333; /* Customize me! */
		}
	img.right-border {
		float: right;
		clear: right;
		margin: 5px 0 15px 15px;
		border: solid 1px #333; /* Customize me! */
		}
	p.flash_notice {
		margin: 18px;
		padding: 9px;
		color: #ff0000;
		border: 1px dotted #ff0000;
		background: #ffffff;
		text-align: center;
		}
	.clear {clear: both;}

	/* This styled div acts as the hr for most browsers */
	div.hr {
		height: 0px;
		background-color: #eee; /* Customize me! */
		border: solid 1px #eee; /* Customize me! */
		border-width: 1px 0 0 0; /* Customize me! */
		margin: 17px 0 18px 0;
		padding: 0;
		clear: both;
		}
	/* This is the backup for screen readers */
	hr {
		display: none;
		height: 0px;
		background-color: #eee;
		border: solid 1px #eee;
		border-width: 1px 0 0 0;
		clear: both;
		}
	/* 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;}
	
	div.box {
		color: #fff;
		float: right;
		clear: right;
		width: 334px;
		background-color: #7084b9; /* Customize me! */
		padding: 5px 0 5px 5px;
		margin: 0 0 20px 20px;
		border: solid 1px #004990; /* Customize me! */
		-moz-border-radius: 5px; /* Optional - you may customize or remove */
		-webkit-border-radius: 5px;
	}
	div.box img {
		float: left;
		border: solid 1px #004990; /* Customize me! */
		margin-right: 5px;
	}
	div.box p {
		float: left;
		width: 50%;
		margin: 0;
		padding: 0;
	}
	
	
	/* Clarity */
	#flash-clarity-smart-clip {
		width: 498px;
		height: 374px;
		margin: 10px 0;
		clear: both;
		}
	
	/* In-Ovation */
	div.comparison {
		background: #fff;
		border: 1px solid #a0b606;
		display: inline-block;
		margin-bottom: 10px;
		clear: both;
		padding: 5px;
		}
		div.comparison div {
			float: left;
			width: 49%;
			}
	#video-in-ovation {
		width: 320px;
		height: 266px;
		}
	
	/* invisalign teen */
	img.right {
		border: solid 1px #000;
		margin: 0 0 15px 15px;
		float: right;
		clear: right;
		}
	img.left {
		border: solid 1px #000;
		margin: 0 15px 20px 0;
		float: left;
		}
	span.indent {
		padding-left: 40px;
		}
	#invisalign-sidebar {
		background: #fff;
		width: 275px;
		margin: 0 0 15px 15px;
		padding: 0;
		border: solid 1px #000;
		float: right;
		clear: right;
		}
		#invisalign-sidebar a {
			color: #036;
			}
		#invisalign-sidebar h3 {
			background: #97AFC2;
			margin: 0;
			padding: 15px;
			color: #fff;
			}
		#invisalign-sidebar p {
			padding: 0 15px;
			margin: 15px 0;
			}
	.thumb {
		border: solid 1px #000;
		margin: 0 10px 10px 0;
		float: left;
		clear: left;
		}
.clear {clear: both;}	

	/* Emergency Care */
	ul#toggle-emergency {
		list-style: none;
		margin: 0 0 1em 0;}
	ul#toggle-emergency li {
		border: solid 1px #fff;
		border-width: 0 0 1px 0;
		padding: 1em 0;
		margin: 0;}
	.general-soreness {
		background: url(http://media.sesamehost.com/images/emergency-care/general-soreness.gif) no-repeat;
		width: 80px;
		height: 60px;}
	.headgear {
		background: url(http://media.sesamehost.com/images/emergency-care/headgear.gif) no-repeat;
		width: 80px;
		height: 60px;}
	.loose-appliance {
		background: url(http://media.sesamehost.com/images/emergency-care/loose-appliance.gif) no-repeat;
		width: 80px;
		height: 60px;}
	.loose-bracket {
		background: url(http://media.sesamehost.com/images/emergency-care/loose-bracket.gif) no-repeat;
		width: 80px;
		height: 60px;}
	.loose-wire {
		background: url(http://media.sesamehost.com/images/emergency-care/loose-wire.gif) no-repeat;
		width: 80px;
		height: 60px;}
	.poking-wire {
		background: url(http://media.sesamehost.com/images/emergency-care/poking-wire.gif) no-repeat;
		width: 80px;
		height: 60px;}
	.left-border {
		border: solid 1px #333;
		margin: 5px 15px 15px 0;
		float: left;
		clear: left;}
	
	/* games */
	ul#sesame-games {
		list-style: none;
		margin: 0 0 15px 0;
		padding: 0;}
		ul#sesame-games li {
			width: 187px;
			height: 79px;
			border: 9px solid #adbe73; /* add hex color to change border color; defaults to BODY Font Color*/
			-moz-border-radius: 9px;
			-webkit-border-radius: 9px;
			float: left;
			margin: 0 9px 9px 0;
			overflow: hidden;
			position: relative;
			background: #adbe73; /*add hex color to match site*/
			}
			ul#sesame-games li p {
				font-size: 11px;
				color: #fff;
				margin: 9px;
				position: relative;
				}
			ul#sesame-games li a {
				position: relative;
				display: block;
				overflow: hidden;
				width: 187px;
				height: 79px;	
				}
				ul#sesame-games a img {
					position: absolute;
					top: 0;
					left: 0;
					border: 0;
					width: 187px;
					display: block;
					}	

	/* smartclip */
	#flash-clarity-smart-clip {
		width: 498px;
		height: 374px;
		margin: 10px 0;
		clear: both;
		}
	
	/* suresmile */
	p.small {
		font-size: 10px;
		}
	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;
			}
	#video-suresmile {
		width: 320px;
		height: 206px;
		}
	
	/* damon system */
	#damon-bracket {
		display: block;
		margin: 0 auto 10px auto;
		}
	#damon-wrap {
		width: 400px;
		margin: 0 auto;
		}
	#damon-left {
		float: left;
		width: 175px;
	 	margin-right: 20px;
		}
	#damon-right {
		float: left;
		width: 170px;
		}
	#flash-damon-system-comparison {
		margin: 0 auto;
		width: 250px;
		}
	#video-the-damon-system {
		margin: 0 15px 15px 0;
		width: 240px;
		height: 206px;
		float: left;
		clear: left;
		}
	#video-the-damon-system-2 {
		margin: 0 15px 15px 0;
		width: 400px;
		height: 330px;
		float: left;
		clear: left;
		}
	
	/* anatomy of a tooth */
	#anatomy-of-a-tooth {background: url(http://media.sesamehost.com/images/anatomy-of-a-tooth/anatomy-of-a-tooth-bg.gif); height: 525px; position: relative; width: 300px}
		#anatomy-of-a-tooth a {cursor: help; display: block; position: absolute}
		#anatomy-of-a-tooth a:hover {background: transparent}
	a#bone {height: 20px; left: 30px; top: 380px; width: 40px}
	a#cementum {height: 20px; left: 100px; top: 460px; width: 90px}
	a#dentin {height: 20px; left: 80px; top: 165px; width: 60px}
	a#enamel {height: 20px; left: 165px; top: 135px; width: 60px}
	a#gingiva {height: 30px; left: 20px; top: 275px; width: 60px}
	a#periodontal {height: 30px; left: 205px; top: 440px; width: 70px}
	a#pulp {height: 30px; left: 125px; top: 220px; width: 50px}
	a#print {cursor: pointer; height: 23px; left: 240px; top: 502px; width: 60px}
	#anatomy-of-a-tooth a img {border: none; display: block; height: 0; position: absolute; width: 0}
	#anatomy-of-a-tooth a:hover img {height: 98px; width: 300px}
	a#bone:hover img {left: -30px; top: -380px}
	a#cementum:hover img {left: -100px; top: -460px}
	a#dentin:hover img {left: -80px; top: -165px}
	a#enamel:hover img {left: -165px; top: -135px}
	a#gingiva:hover img {left: -20px; top: -275px}
	a#periodontal:hover img {left: -205px; top: -440px}
	a#pulp:hover img {left: -125px; top: -220px}

/*-----------------------------------------------
	Forms
	*/
	/* Global form styles */
	div.referral-form, div.appointment-form, div.comments, div.contact-form {
		width: 70%;
		margin-top: 18px;
		letter-spacing: normal;
	}

	fieldset {border: 0; padding: 9px 0;margin: 0 18px;}
		fieldset h2 {margin: 0 0 9px;}
		fieldset p {margin: 0 0 18px;}
		fieldset p.disclaimer {font-size: 90%; font-style: italic; margin: 0;}
		fieldset dl {}
			fieldset dl dt {font-size: 16px; clear: both; margin: 9px 0 0;}
				fieldset dd ul {margin: 9px 0;}
					fieldset dd ul li, fieldset dd ol li {list-style: none;}
					fieldset dd li {
						clear: both;
						margin: 3px 0;
						padding: 5px 0 4px 10%;
						overflow: auto;
						height: auto;
						position: relative;
						}
					fieldset dd li:hover {background: #d6dbec;/* customize me - this is the hover color change of li */}
					fieldset dd li input:hover, fieldset dd li input:focus,
					 fieldset dd li select:hover, fieldset dd li select:focus,
					 fieldset dd li textarea:hover, fieldset dd li textarea:focus {
					 	background: #f1f1f1;/* customize me - this is the hover color change of form fields*/
					 	outline-color: #004990;/* customize me */
					 	}
						fieldset li h3 {font-size: 12px; line-height: 18px; margin: 0;}
						fieldset li div {float: left; display: inline-block; width: 40%; position: relative; padding-right: 5%;}
						fieldset li div.input-street, fieldset li div.full-width {width: 85%;}
						fieldset li div.input-city {width: 60%;}
						fieldset li div.input-full-name {width: 85%;}
						fieldset li div.input-phone-full {width: 85%;}
						fieldset li div.input-email {width: 85%;}
						fieldset li div.input-zip {width: 20%;}
						fieldset li div.content-switch, fieldset li div.radio, fieldset li div.checkbox {width: 85%;}
							fieldset li div.radio input {border: none;}
							fieldset li div.radio label {padding-right: 9px; font-size: 90%;}
						/*fieldset li div.hidden-content, fieldset li.hidden-content {display: none;}*/
						fieldset li div.input-select-full {width: 85%;}
						fieldset li div.input-comments {width: 85%;}
							li div.input-comments textarea {height: 63px; overflow: auto;}
						fieldset li div.input-captcha {width: 50%;}
						fieldset li div.verification {width: 35%;}
							li div.verification img {
								border: 1px solid;
								margin-top: 9px;
								-moz-border-radius: 4px; /*for Moz, optional*/
								-webkit-border-radius: 4px; /*for Webkit Browsers, optional*/
								}
							fieldset li div label {
								line-height: 18px;
								font-weight: bold;
								margin-bottom: 9px;
								font-size: 90%;
								color: #004990;/*override to match site*/
								}
							fieldset li div input, fieldset li div textarea, fieldset li div select {
								display: block;
								line-height: 18px;
								width: 100%;
								border: 1px solid #004990;
								padding: 4px 0 3px;
								text-indent: 4px;
								margin-top: 9px;
								-moz-border-radius: 4px; /*for Moz, optional*/
								-webkit-border-radius: 4px; /*for Webkit Browsers, optional*/
								}
							fieldset li div select {height: 25px;}
							fieldset li div.radio input {display: inline; width: auto; margin-right: 4px;}
							fieldset li div div {width: 100%;}
						fieldset dl dd.form-footer button {
							/* for more information, see: http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba */
							clear:both;/*do not change, forces button to sit below floated elements*/
							background: #1e5498 url(../images/button-overlay.png) 50% 50% repeat-x;/* customize color and optionally button-overlay.png */
							display: inline-block;
							padding: 9px 18px 9px;
							color: #fff;
							text-decoration: none;
							font-weight: bold;
							font-size: 110%;
							line-height: 1;
							/* OPTIONAL: only available only to Safari and Firefox */
							-moz-border-radius: 5px;
							-webkit-border-radius: 5px;
							-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
							-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
							/*end*/
							
							/* these styles not shown in IE */
							text-shadow: 0 1px 1px rgba(0,0,0,0.25);
							border-bottom: 1px solid rgba(0,0,0,0.25);
							/*end*/	
							position: relative;
							cursor: pointer;
							}	
						fieldset dl dd.form-footer button:hover {
							background-color: #6181b3;/* darker color than above */
							color: #fff;
							text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
							}
						fieldset dl dd.form-footer button:active {top: 1px;}					





	/* appointment form
	* Styles only for the appointment request form
	*/


	/* comment form
	* Styles only for the comments form
	*/
	/*numbering added by jQuery*/
	fieldset ol li span.comment-number {
		font-size: 150%;
		color: #537197;/* customize me*/
		position: absolute;
		left: 9px;
		top: 9px;
	}


	/* referral form
	* Styles only for the referral form
	*/
	.referral-form fieldset li div.radio {width: 40%;}

	/* contact form
	* Styles only for the contact form
	*/
	div.contact-form {width: 100%;}
		.contact-form fieldset {padding: 0; margin: 0;}
			.contact-form fieldset dl dt {margin: 0; font-size: 13px; font-family: 'KabelBook';}
			.contact-form fieldset dd li {padding: 5px 0 4px 5%;}
			.contact-form fieldset ul {margin: 0;}
				.contact-form fieldset ul li {margin: 0;}
				.contact-form fieldset dd li:hover {background: none;}
					.contact-form fieldset li div input, .contact-form fieldset li div textarea, .contact-form fieldset li div select {
						-moz-border-radius: 0;
						-webkit-border-radius: 0;
						margin: 0;
						padding: 3px 0 4px;
						text-indent: 8px;
						}
					.contact-form fieldset li div textarea {height: 27px;}
						.contact-form fieldset li div label {position: absolute; font-size: 90%; z-index: 100; padding: 4px 0 0 9px; line-height: 18px;}
				.contact-form fieldset li div.button {display: block; width: 85%; position: relative; margin-right: -18px; padding: 0;}
					.contact-form fieldset li div button {
						float: right; 
						width: 90px; 
						height: 18px; 
						overflow: hidden; 
						text-indent: -999em; 
						background: url(../images/sprite.png) 0 -126px no-repeat;}
					.contact-form fieldset li div button:hover {background-position: 0 -153px;}
	
	/* send to friend form
	* Styles only for the send to friend form
	*/
	.send-to-friend {width: 100%; margin: 0;}
	.send-to-friend fieldset {padding: 0; margin: 0; position: relative; margin-top: -9px;}
		.send-to-friend fieldset dl {margin: 0; padding: 0;}
		.send-to-friend fieldset dl dt {margin: 0; font-size: 13px; font-family: 'KabelBook';}
		.send-to-friend fieldset dd li {padding: 5px 0 4px 5%;}
		.send-to-friend fieldset ul {margin: 0;}
			.send-to-friend fieldset ul li {margin: 0;}
			.send-to-friend fieldset dd li:hover {background: none;}
				.send-to-friend fieldset li div input, .send-to-friend fieldset li div textarea, .send-to-friend fieldset li div select {
					-moz-border-radius: 0;
					-webkit-border-radius: 0;
					margin: 0;
					padding: 3px 0 4px;
					text-indent: 8px;
					}
				.send-to-friend fieldset li div.input {width: 50%;}
				.send-to-friend fieldset li div.button {width: 35%;}
					.send-to-friend fieldset li div label {position: absolute; font-size: 90%; z-index: 100; padding: 4px 0 0 9px; line-height: 18px;}
					.send-to-friend fieldset li div button {
						float: none; 
						width: 90px; 
						height: 18px; 
						overflow: hidden; 
						text-indent: -999em; 
						background: url(../images/sprite.png) -106px -126px no-repeat;
						margin-top: 9px;
						}
					.send-to-friend fieldset li div button:hover {background-position: -106px -154px;}
				
	/* JQuery */
	input.error, select.error, textarea.error {border-color: #a52003; background: #fefda1;}
	div.error {
		background: url(../images/validate_error.gif) 0 0 no-repeat;
		color: #a52003;
		width: 18px;
		height: 18px;
		position: absolute;
		top: 0;
		right: 0;
		overflow: hidden;
		display: block;
		margin: 12px -2% 0 0;
		text-indent: -999em;}
	div.success {
		background: url(../images/validate_ok.gif) 0 0 no-repeat;
		width: 18px;
		height: 18px;
		position: absolute;
		top: 0;
		right: 0;
		overflow: hidden;
		display: block;
		margin: 12px -2% 0 0;
		text-indent: -999em;}

	.contact-form div.error, .contact-form div.success,
	.send-to-friend div.error, .send-to-friend div.success {margin-top: 4px;}


/*-----------------------------------------------
	Hidden PT/Doctor Login Form Styles 
	*/
	#pt-login-form, #dr-login-form {
		position: relative;
		padding-bottom: 36px;
		}
		#pt-login-form p, #dr-login-form p {margin: 18px 0 0;}
		#pt-login-form a.powered-by-sesame, #dr-login-form a.powered-by-sesame {
			position: absolute;
			right: 0;
			bottom: 0;
			display: block;
			width: 165px;
			height: 45px;
			}
			a.powered-by-sesame img {width: 165px; height: 45px; outline: none;}

/* GALLERY LIST */
/* IMPORTANT - This prevents a flash of unstyled content */
#gallery { visibility: hidden; }

/* GALLERY CONTAINER */
.gallery { background: #fff; border: 1px solid #333; padding: 10px; margin: 0; -moz-border-radius: 5px; -webkit-border-radius: 5px;}

/* LOADING BOX */
.loader { background: url(../images/loader.gif) center center no-repeat #ddd; }

/* GALLERY PANELS */
.panel {}

/* DEFINE HEIGHT OF PANEL OVERLAY */
/* NOTE - It is best to define padding here as well so overlay and background retain identical dimensions */
.panel .panel-overlay,
.panel .overlay-background { height: 25px; padding: 0 1em; }

/* PANEL OVERLAY BACKGROUND */
.panel .overlay-background { background: #222; }

/* PANEL OVERLAY CONTENT */
.panel .panel-overlay { color: white; font-size: 1em; }
.panel .panel-overlay a { color: white; text-decoration: underline; font-weight: bold; }

/* FILMSTRIP */
/* margin will define top/bottom margin in completed gallery */
.filmstrip { margin: 5px; }

/* FILMSTRIP FRAMES (contains both images and captions) */
.frame {}

/* WRAPPER FOR FILMSTRIP IMAGES */
.frame .img_wrap { border: 1px solid #aaa; }

/* WRAPPER FOR CURRENT FILMSTRIP IMAGE */
.frame.current .img_wrap { border-color: #000; }

/* FRAME IMAGES */
.frame img { border: none; }

/* FRAME CAPTION */
.frame .caption { font-size: 11px; text-align: center; color: #888; }

/* CURRENT FRAME CAPTION */
.frame.current .caption { color: #000; }

/* POINTER FOR CURRENT FRAME */
.pointer {
	border-color: #000;
}

/* TRANSPARENT BORDER FIX FOR IE6 */
/* NOTE - DO NOT CHANGE THIS RULE */
*html .pointer {
	filter: chroma(color=pink);
}