/*--Sesame-Specific Styles 
	Created by Sesame Communications; 06/01/2010
	Updated: 04/11/2012
*/


	
/* Global Styles ------------------ */
.video {
	display: block;
}
.flash {
	width: 500px;
	margin: 20px auto;
}
p.flash_notice {
  margin: 18px;
  padding: 9px;
  color: #ff0000;
  border: 1px dotted #ff0000;
  background: #ffffff;
  text-align: center;
}
.left {float: left;}
.right {float: right;}

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

/* Forms ------------------------------ */	
div.error {	width: 275px; background:#AD2D10}
	div.error p { margin: 0; top: 0; color:#fff; }

legend							{ padding-bottom: 18px; }
label							{ width: 100%; position: relative; top: 5px; margin-bottom: 18px; line-height: 18px; display: block; }

input[type="text"],
input[type="password"],
input[type="search"]			{ width: 100%; margin-bottom: -1px; display: block;}

input[type="radio"]				{ top: -1px; margin: 0 4px 3px 1px; }
input[type="checkbox"]			{ top: -2px; margin: 0 4px 3px 1px; }
input[type="file"]				{ margin: 0px 6px 3px 6px; }

input[type="submit"],
input[type="reset"],
input[type="button"]			{ position: relative; top: 5px; margin-bottom: 18px; }

select							{ display: block; margin: 0px; width: auto;}
textarea						{ width: 99%; line-height: 18px; margin-bottom: -2px; display: block; clear: left; overflow: auto; }

input, select, textarea { cursor: pointer;}

.unitx1 		{ width: 45px; }
.unitx2 		{	width: 108px; }
.unitx3 		{	width: 171px; }
.unitx8 		{	width: 486px;	}

label.unitx1 select					{ width: 45px; }
label.unitx2 select					{ width: 108px; }
label.unitx3 select					{ width: 171px; }
label.unitx8 select					{ width: 486px; }

label.width1, label.width2,
label.width3	{ margin-right: 18px; float: left; }

label.unitx1, label.unitx2,
label.unitx3, label.unitx8,		{ margin-right: 18px; float: left; }
label.first						{ margin-left: 0; }

label.width4, label.unitx8		{ width: 990px; overflow: hidden; }

label.width1 input[type="text"], label.width1 input[type="email"], label.width1 input[type="url"], label.width1 input[type="password"], 
label.width1 input[type="date"], label.width1 input[type="search"]	{ width: 228px; }

label.width2 input[type="text"], label.width2 input[type="email"], label.width2 input[type="url"], label.width2 input[type="password"], 
label.width2 input[type="date"], label.width2 input[type="search"]	{ width: 480px; }

label.width3 input[type="text"], label.width3 input[type="email"], label.width3 input[type="url"], label.width3 input[type="password"], 
label.width3 input[type="date"], label.width3 input[type="search"]	{ width: 732px; }

label.width1 select				{ width: 234px; }
label.width2 select				{ width: 486px; }
label.width3 select				{ width: 738px; }

label.unitx1 input[type="text"], label.unitx1 input[type="email"], label.unitx1 input[type="url"], 
label.unitx1 input[type="password"], label.unitx1 input[type="date"], label.unitx1 input[type="search"]	{ width: 39px; }

label.unitx2 input[type="text"], label.unitx2 input[type="email"], label.unitx2 input[type="url"], 
label.unitx2 input[type="password"], label.unitx2 input[type="date"], label.unitx2 input[type="search"]	{ width: 102px; }

label.unitx3 input[type="text"], label.unitx3 input[type="email"], label.unitx3 input[type="url"], 
label.unitx3 input[type="password"], label.unitx3 input[type="date"], label.unitx3 input[type="search"]	{ width: 165px; }

label.unitx8 input[type="text"], label.unitx8 input[type="email"], label.unitx8 input[type="url"], 
label.unitx8 input[type="password"], label.unitx8 input[type="date"], label.unitx8 input[type="search"]	{ width: 480px; }

/* Radios and Checkboxes*/
.radio-group {}
	.radio-group p {margin: 0;}
	.radio-group label span { font-size: 11px;}
	
/* Field hover styles */

input[type="text"]:hover,	input[type="date"]:hover,	input.date:hover, input[type="email"]:hover,	input[type="url"]:hover, 
input[type="password"]:hover,	input[type="select"]:hover, input[type="search"]:hover, textarea:hover, select:hover, 	
input[type="text"]:focus,	input[type="date"]:focus,	input.date:focus,	input[type="email"]:focus,	input[type="url"]:focus, input[type="password"]:focus,
input[type="select"]:focus, input[type="search"]:focus, textarea:focus, select:focus {
	background: #ffffff;
	border-color: #333; /* customize me*/
	box-shadow: 0 0 3px rgba(0,0,0,.35);
	-moz-box-shadow: 0 0 3px rgba(0,0,0,.35);
	-webkit-box-shadow: 0 0 3px rgba(0,0,0,.35);
	}
/* disabled fields */
input[disabled="disabled"], textarea[disabled="disabled"], select[disabled="disabled"],
input[disabled="disabled"]:hover, textarea[disabled="disabled"]:hover, select[disabled="disabled"]:hover {
	border-color: #e0e0e0;
	background: #e0e0e0;
	}
/* Buttons */	
button { margin-bottom:13px}
button:active { top: 6px;}

/* Required and Error styles */
label.required > span, p.required > span  {font-weight: bold;}	
/*errors*/
fieldset div.error {text-shadow: 1px 0 1px rgba(0,0,0,.45); width: 250px; font-size: 90%;}
	.form-errors li { color:#F00; }
	.error em {
		display:block;
		width:0;
		height:0;
		border: 9px solid;
		border-color: transparent transparent #ad2d10;

		/* positioning */
		position:absolute;
		top:-18px;
		left:18px;
		}
		.error span {display: block; margin: 0;}

input[type="text"].invalid,	input[type="email"].invalid,	input[type="url"].invalid, input[type="password"].invalid,
input[type="select"].invalid, input[type="search"].invalid, textarea.invalid, select.invalid {
	border-color: #900f00; 
	color: #900f00;
	}

/* hidden field styles */
.hidden-option {
	display: none;
	}

/* Star Rating*/
div.js-rate {margin-bottom: 18px;}	
	div.js-rate p {margin: 0 0 9px;}
	div.js-rate label, div.js-rate label span {display: none;}

.ui-stars-star,
.ui-stars-cancel {
  float: left;
  display: block;
  overflow: hidden;
  text-indent: -999em;
  cursor: pointer;
	}
	.ui-stars-star a,
	.ui-stars-cancel a {
	  width: 18px;
	  height: 18px;
	  display: block;
	  background: url(../images/star_rating/jquery.ui.stars.png) no-repeat 0 0;
		}
	.ui-stars-star a {
	  background-position: 0 -36px;
		}
	.ui-stars-star-on a {
	  background-position: 0 -54px;
		}
	.ui-stars-star-hover a {
	  background-position: 0 -72px;
		}
	.ui-stars-cancel-hover a {
	  background-position: 0 -18px;
		}
	.ui-stars-star-disabled,
	.ui-stars-star-disabled a,
	.ui-stars-cancel-disabled a {
	  cursor: default !important;
		}
	
/* Common Treatments ------------------ */
div.box {
  float: right;
  clear: right;
  width: 335px;
  padding: 5px 0 5px 5px;
  margin: 0 0 20px 20px;
}
div.box img {
  margin-right: 5px;
  float: left;
}
div.box p {
  float: left;
  width: 50%;
  margin: 0;
  padding: 0;
}

/* Clarity ------------------ */
#flash-clarity-smart-clip {
  width: 498px;
  height: 374px;
}


/* Damon System ------------------ */
#damon-bracket {
  display: block;
  margin: 20px 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: 20px auto;
  width: 250px;
  display: block;
}
#video-the-damon-system {
  width: 240px;
  height: 206px;
  float: left;
  clear: left;
}
#video-the-damon-system-2 {
  width: 400px;
  height: 330px;
  float: left;
  clear: left;
}

/* In-Ovation ------------------ */
div.comparison {
  background: #fff; 
  display: inline-block; 
  margin-bottom: 20px; 
  clear: both;
  padding: 20px 0 20px 20px;
}
div.comparison div {
  float: left; 
  margin: 0 20px 0 0;
}
div.comparison img {
  margin: 0 0 0 20px;
  float: right;
}
div.comparison p {
  margin: 0;
  padding: 0;
}
#video-in-ovation {
  width: 320px;
  height: 266px;
}
 
/* Invisalign ------------------ */
#video-invisalgin {
	width: 360px;
	height: 266px;
}
	
/* Invisalign Teen ------------------ */
span.indent {padding-left: 40px;}
#invisalign-sidebar {
  width: 275px;
  margin: 0 0 20px 20px;
  padding: 0;
  line-height: 18px;
  font-size: 11px;
  float: right;
  clear: right;
}
#invisalign-sidebar h3 {
  margin: 0;
  padding: 15px;
}
#invisalign-sidebar p {
  padding: 0 18px;
  margin: 18px 0;
}
.thumb {
  margin: 0 10px 10px 0;
  float: left;
  clear: left;
}
	
/* Invisalign Pro Pack ======================= */

/* Reset */
#pro-pack {
  position: relative;
  font-size: inherit;
  line-height: inherit;
}
#pro-pack img {display: block;}
#pro-pack a, #pro-pack img, #pro-pack object {
  border:none; 
  outline:none;
}

/* Global Pro Pack Styles ------------------- */
#pro-pack .right {
  float: right;
  margin: 0 0 20px 20px;
}
#pro-pack .left {
  margin: 0 20px 20px 0;
  float: left;
}
#pro-pack .img-right {
  margin: 10px 0 20px 20px;
  float: right;
  clear: right;
}
#pro-pack .img-left {
  margin: 10px 20px 20px 0;	
  float: left;
  clear: left;
}
#pro-pack p.flash_notice {
  margin: 18px;
  padding: 9px;
  color: #ff0000;
  border: 1px dotted #ff0000;
  background: #ffffff;
  text-align: center;
}

/* Main Invisalign page ----------------- */
#pro-pack #video-invisalign {
  width: 360px; 
  height: 266px;
  display: block;
}

/* Invisalign Testimonials ------------------ */
#pro-pack ul#testimonials {
  margin: 0;
  padding: 0;
  list-style: none;
  list-style-image: none;
}
#pro-pack ul#testimonials li {
  clear: both;
}
#pro-pack .invisalign-block {
  width: 315px; 
  float: left;
}

/* Invisalign Teen ------------------ */
#pro-pack span.indent {padding-left: 40px;}
#pro-pack #invisalign-sidebar {
  width: 275px;
  margin: 0 0 20px 20px;
  padding: 0;
  line-height: 18px;
  font-size: 11px;
  float: right;
  clear: right;
}
#pro-pack #invisalign-sidebar h3 {
  margin: 0;
  padding: 20px;
}
#pro-pack #invisalign-sidebar p {
  padding: 0 15px;
  margin: 15px 0;
  font-size: 11px;
  line-height: 16px;
}
#pro-pack .thumb {
  margin: 0 10px 15px 0;
  float: left;
  clear: left;
}

/* Invisalign Videos ------------------- */
#pro-pack div.invisalign-flash {
  background: url(../../../media.sesamehost.com/images/invisalign-pro-package/invisalign-video-bg.jpg) no-repeat;
  width: 450px;
  height: 250px;
  margin-bottom: 20px;
}
#pro-pack div.invisalign-flash img {
  margin: 30px 50px 0;
  float: right;
}
#pro-pack .bump-right {
  margin-right: 5px;
}
#pro-pack #video-invisalign-best-friends, #pro-pack #video-invisalign-news-travels-fast {
  width: 320px;
  height: 206px;
  display: block;
}
#pro-pack #video-invisalign-lobby {
  width: 320px; 
  height: 266px;
  display: block;
}

/* Invisalign Before and After --------------- */
#pro-pack #invisalign-before-after {
  width: 488px;
  min-height: 335px;
  line-height: 18px;
  margin: 0 0 20px 0;
  padding: 10px 0 10px 10px;
}
#pro-pack #invisalign-before-after ul.slideshow {
  list-style: none; 
  margin: 0; 
  padding: 0;
  width: 488px;
  height: 270px;
  overflow: hidden;
}
#pro-pack ul#before-after-cycle li img {
  width: 232px;
  height: 265px;
  float: left;
  margin-right: 10px;
}
#pro-pack #invisalign-before-after p {
  float: left;
  width: 50%;
  margin: 0 0 10px 0;
}
#pro-pack #invisalign-before-after div.cycle-detail {
  _width: 478px;
  min-height: 55px;
  _height: 75px;
  line-height: 18px;
  clear: both;
  padding: 10px;
  margin: 0 10px 0 0;
}
#pro-pack #invisalign-before-after div.before-after-nav {
  _width: 478px;
  margin: 0 10px 10px 0;
  padding: 5px 3px;
}
#pro-pack #invisalign-before-after .before-after-nav a {
  text-decoration: none; 
  font-size: 12px; 
  padding: 5px; 
  margin: 0 3px;
  outline: none;
}

/* Invisalign Footer -------------------- */	
#pro-pack #invisalign-footer {
  background: #fff;
  width: 99%;
  margin: 30px 0;
  padding: 0;
  font-size: 11px;
  clear: both;
}
#pro-pack #invisalign-footer h3 {
  margin: 0;
  padding: 10px 20px;
  font-size: 14px;
}
#pro-pack #invisalign-footer ul li img {
  margin: 0 10px 0 20px;
  float: left;
}
#pro-pack #invisalign-footer p {
  padding: 0 20px;
  margin: 30px 0 20px 0;
}
#pro-pack #invisalign-footer ul {
  margin: 15px; 
  padding: 0 0 15px 0;
  list-style: none;
  border-width: 0 0 1px 0;
}
#pro-pack #invisalign-footer li {
  /*width: 33%;*/
  float: left;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}
#pro-pack #invisalign-footer li a {float: left;}	
#pro-pack .invisalign-footer-logo {
  margin: 0 30px 0 15px;
  float: left;
}

/* Pro Pack Callouts --------------- */
#pro-pack-callout-sm {
  width: 123px;
  height: 63px;
  padding: 0;
  display: block;
  text-indent: -999em;
}
#pro-pack-callout-sm a {
  width: 123px;
  height: 63px;
  display: block;
}
#pro-pack-callout-lg {
  width: 223px;
  height: 128px;
  margin: 0 0 18px;
  padding: 0;
  display: block;
  text-indent: -999em;
}
#pro-pack-callout-lg a {
  width: 223px;
  height: 128px;
  display: block;
}

/* Before and After - Static ------------------ */
ul.before-after-static {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.before-after-static li {
  width: 488px;
  margin: 0 0 18px 0;
  padding: 10px 0 10px 10px;
}
ul.before-after-static li img {
  width: 232px;
  height: 177px;
  float: left;
  margin-right: 10px;
}
ul.before-after-static li p {
  float: left;
  width: 50%;
  margin: 0 0 10px 0;
}
ul.before-after-static li div.detail {
  clear: both;
  padding: 10px;
  margin: 0 10px 0 0;
}

/* Before and After - jQuery Cycle ------------------ */
#before-after-container {
  width: 488px;
  line-height: 18px;
  margin: 0 0 18px 0;
  padding: 10px 0 10px 10px;
}
#before-after-container ul.slideshow {
  list-style: none; 
  margin: 0; 
  padding: 0;
  width: 488px;
  height: 182px;
  overflow: hidden;
}
ul#before-after-cycle li img {
  width: 232px;
  float: left;
  margin-right: 10px;
}
#before-after-container p {
  float: left;
  width: 50%;
  margin: 0 0 10px 0;
}
#before-after-container div.cycle-detail {
  clear: both;
  padding: 10px;
  margin: 0 10px 0 0;
}
#before-after-container .before-after-nav {
  margin: 0 10px 10px 0;
  padding: 5px 3px;
}
#before-after-container .before-after-nav a {
  text-decoration: none; 
  font-size: 12px; 
  padding: 5px; 
  margin: 0 3px; 
  outline: none;
}

/* Before and After - jQuery Slider ------------------ */
.slider-container {
width: 462px;
margin: 0 0 20px 0;
padding: 10px;
line-height: 18px;
}
ul#slider-cycle {
list-style: none;
margin: 0;
padding: 0;
}
.slider-container p {
width: 50%;
float: left;
margin: 0 0 10px 0;
}
.slider-container p.after {text-align: right;}
.slider-container div.slider-detail {
clear: both;
padding: 10px;
}
.slider-nav {
padding: 5px 3px;
margin: 0 0 10px 0;
}
.slider-nav a {
text-decoration: none; 
font-size: 12px; 
padding: 5px; 
margin: 0 3px; 
}

/* Office Tour CSS ------------------ */
#gallery-container {
  width: 480px; 
  min-height: 500px;
}
ul#css-office-tour {
  width: 480px; 
  height: 370px;
  position: relative; 
  list-style: none; 
  margin: 0; 
  padding: 0; 
}
ul#css-office-tour li {
  margin: 380px 0 0 10px; 
  float: left; 
  display: inline;
}
ul#css-office-tour li img {
  margin: 0 4px 2px 0; 
  width: 68px; 
  height: 52px;
}
ul#css-office-tour a {text-decoration: none;}
ul#css-office-tour a span {
  left: -9999px; 
  position: absolute;
}
ul#css-office-tour a span img {
  border: none; 
  width: 460px; 
  height: 350px;
}
ul#css-office-tour a:hover {
  background: none; 
  z-index: 100;
}
ul#css-office-tour a:hover span {
  position: absolute; 
  top: 10px; 
  left: 10px; 
  display: block;
}

/* Office Tour - jQuery Cycle ------------------ */
#slideshow-container ul.slideshow {
  list-style: none; 
  width: 460px; 
  height: 350px;
  margin: 0; 
  padding: 0;
	overflow: hidden;
}
#slideshow-container {
  width: 460px; 
  padding: 10px;
  line-height: 18px;
}
#slideshow-container div#caption {
  min-height: 18px;
  clear: both;
  padding: 10px;
  margin: 10px 0 0 0;
}
#slideshow-container ul.slideshow img {
  width: 460px; 
  height: 350px;
  margin: 0;
}
.office-tour-nav {
  margin: 0 0 10px 0;
  padding: 5px 3px;
}

/* Office Tour - jQuery Slider ----------------- */
/* 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 10px; 
} /* Change height to 0 if no captions are required */

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

/* PANEL OVERLAY CONTENT */
.panel .panel-overlay {
	color: #fff; 
	font-size: 12px; 
}
.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);}


/* Emergency Care ------------------ */
ul#toggle-emergency {
	list-style: none;
	margin: 0 0 20px 0;
}
ul#toggle-emergency li {
	border: solid 1px #fff;
	border-width: 0 0 1px 0;
	padding: 18px 0;
	margin: 0;
}
.general-soreness {
	background: url(../../../media.sesamehost.com/images/emergency-care/general-soreness.gif) no-repeat;
	width: 80px;
	height: 60px;}
.headgear {
	background: url(../../../media.sesamehost.com/images/emergency-care/headgear.gif) no-repeat;
	width: 80px;
	height: 60px;}
.loose-appliance {
	background: url(../../../media.sesamehost.com/images/emergency-care/loose-appliance.gif) no-repeat;
	width: 80px;
	height: 60px;}
.loose-bracket {
	background: url(../../../media.sesamehost.com/images/emergency-care/loose-bracket.gif) no-repeat;
	width: 80px;
	height: 60px;}
.loose-wire {
	background: url(../../../media.sesamehost.com/images/emergency-care/loose-wire.gif) no-repeat;
	width: 80px;
	height: 60px;}
.poking-wire {
	background: url(../../../media.sesamehost.com/images/emergency-care/poking-wire.gif) no-repeat;
	width: 80px;
	height: 60px;}
.general-soreness, .headgear, .loose-appliance, 
.loose-bracket, .loose-wire, .poking-wire { background-position: 50% 50%;}

/* Game Room ------------------ */
ul#sesame-games {
	list-style: none;
	margin: 0 0 27px;
	padding: 0;
}
ul#sesame-games li {
	width: 187px;
	height: 79px;
	border: 1px solid;
	float: left;
	margin: 18px 9px 0;
	overflow: hidden;
	position: relative;
	background: #603329;
}
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;
}
#video-suresmile {
	width: 320px;
	height: 206px;
}

#suresmile-footer	li {display: inline;}
/* 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(../../../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;}
#bd #anatomy-of-a-tooth a img {
	border: none; 
	display: block; 
	height: 0; 
	position: absolute; 
	width: 0; 
	margin:0; 
	padding: 0;
}
#bd #anatomy-of-a-tooth a:hover img {height: 98px; width: 300px;}
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;}
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;}

/**************************************/
/*           JQUERY PLUGINS           */
/**************************************/
/* JQUERY TOOLS ----------------*/
/* Calendar for <input type="date"/> */
/* calendar root element */
input.date {position: relative;}
#calroot {
	
	top: 0;
	display: block;
	z-index:1000;/* place on top of other elements. set a higher value if nessessary */
	margin-top:-1px;
	width:198px;
	padding: 2px;
	background-color:#fff;
	font-size:11px;
	border:1px solid #ccc;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-moz-box-shadow: 0 0 15px #666;
	-webkit-box-shadow: 0 0 15px #666;	
	}
/* head. contains title, prev/next month controls and possible month/year selectors */
#calhead {	
	padding:2px 0;
	height:22px;
	} 
#caltitle {
	font-size:14px;
	color:#0150D1;	
	float:left;
	text-align:center;
	width:155px;
	line-height:20px;
	text-shadow:0 1px 0 #ddd;
	}
#calnext, #calprev {
	display:block;
	width:18px;
	height:18px;
	background:transparent url(../images/calendar/prev.png) no-repeat scroll center center;
	float:left;
	cursor:pointer;
	}
#calnext { background-image:url(../images/calendar/next.png); float:right;}
#calprev.caldisabled, #calnext.caldisabled { visibility:hidden;}
/* year/month selector */
#caltitle select { font-size:10px;}
/* names of the days */
#caldays { height:14px; border-bottom:1px solid #ddd;}
	#caldays span { display:block; float:left; width:28px; text-align:center;}
/* container for weeks */
#calweeks { background-color:#fff; margin-top:4px;}
/* single week */
.calweek { clear:left; height:22px;}
/* single day */
.calweek a {
	display:block;
	float:left;
	width:27px;
	height:20px;
	text-decoration:none;
	font-size:11px;
	margin-left:1px;
	text-align:center;
	line-height:20px;
	color:#666;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;} 
/* different states */
.calweek a:hover, .calfocus { background-color:#ddd;}
/* sunday */
a.calsun { color:red;}
/* offmonth day */
a.caloff { color:#ccc;}
a.caloff:hover { background-color:rgb(245, 245, 250);}
/* unselecteble day */
a.caldisabled { background-color:#efefef !important; color:#ccc	!important;	cursor:default;}
/* current day */
#calcurrent {	background-color:#498CE2;	color:#fff;}
/* today */
#caltoday { background-color:#333; color:#fff;}	

/**************************************/
/*           BRACES DIAGRAM           */
/**************************************/	
#jquery-braces-diagram { 
	height:375px;
	width:500px;
	position:relative; 
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	margin: 20px 0;
	background-color: #525253;
}
#jquery-braces-diagram div.mOver{ display:block; width:60px; height:15px; cursor: pointer;  position:absolute; background-image: none; }

#jquery-braces-diagram a{ display:block; width:60px; height:15px; position:absolute; background-image: none; }

#jquery-braces-diagram #elastic-tie{ top:51px; left:50px; }
#jquery-braces-diagram #loop-in-archwire{ top:27px; left:120px; width:100px; }
#jquery-braces-diagram #archwire{ top:50px; left:150px; }
#jquery-braces-diagram #bracket{ top:70px; left:180px; width:50px; }
#jquery-braces-diagram #headgear-tube{ top:52px; left:256px; width:85px; }
#jquery-braces-diagram #coil-spring{ top:257px; left:110px; }
#jquery-braces-diagram #tie-wire{ top:281px; left:190px; width:50px; }
#jquery-braces-diagram #band{ top:254px; left:220px; width:35px; }
#jquery-braces-diagram #hook{ top:231px; left:258px; width:35px; }
#jquery-braces-diagram #elastic{ top:233px; left:300px; height:45px; }

#jquery-braces-diagram #sesame-link{ top:283px; left:370px; height:30px; width:70px;}
#jquery-braces-diagram #braces-print{ top:287px; left:444px; height:25px; width:50px;}

#jquery-braces-diagram #description{ width:470px; height:50px; position:relative; top:300px; left:20px;}
#jquery-braces-diagram #description h3{ font-size:14px; margin:0px; padding:0px; font-weight:bold;}
#jquery-braces-diagram #description p{ font-size:11px; margin:0px; padding:0px; color:black; line-height:12px;}

#color-your-retainer {
    background-color: #525253;
    background-image: url("../images/color-your-retainer/retainer-bg.png");
    border: 1px solid gray;
    border-radius: 15px 15px 15px 15px;
    height: 290px;
    overflow: visible;
    position: relative;
	margin: 20px 0 0 0;
    width: 299px;
}
#retainer-color {
    height: 175px;
    left: 62px;
    position: absolute;
    top: 60px;
    width: 175px;
}
.color-btn {
    cursor: pointer;
    height: 20px;
    position: absolute;
    top: 260px;
    width: 20px;
}
#clear {
    left: 80px;
}
#blue {
    left: 105px;
}
#cyan {
    left: 130px;
}
#green {
    left: 155px;
}
#orange {
    left: 180px;
}
#purple {
    left: 205px;
}
#red {
    left: 230px;
}
#yellow {
    left: 255px;
}


/**************************************/
/*            BRACE PAINTER           */
/**************************************/
#jquery-brace-painter { 
	width:500px;
	height:430px; 
	background-image: url('../images/brace-painter/background.png');
	position:relative;
	border:solid 2px #969595;
}

#assign_btns {
	margin-top:94px;
	height:19px;
	width:510px;
}

.assign_btn { 
	width:83px;
	height:19px;
	float:left;
	cursor:pointer;
}

#color_btns {
	margin:0px;
	margin-top:1px;
	padding:0px;
	height:60px;
	width:510px;
	clear:both;
}

.color_btn {
	width:50px;
	height:20px;
	float:left;
	cursor:pointer;
}


#mouth {
	pointer-events:none;
	width:430px;
	height:174px;
	position:absolute;
	top:206px;
	left:38px;
	background-image: url('../images/brace-painter/mouth.png');
	z-index:100;
}

.tooth{ 
	width:20px; 
	height:24px; 
	background-color: white;
	position:absolute;
	top:280px;
	cursor:pointer;
	z-index:50;
}

.tooth-top { 
	width:20px; 
	height:24px;
	position:absolute;
	top:280px;
	cursor:pointer;
	z-index:500;
}

/*top teeth*/
#tooth_0, #tooth_0_color {left:54px; width:14px;}
#tooth_1, #tooth_1_color {left:69px; width:16px; top:275px;}
#tooth_2, #tooth_2_color {left:90px; top:270px; height:27px; width:25px;}
#tooth_3, #tooth_3_color {left:122px; top:268px; width:30px; height:30px;}
#tooth_4, #tooth_4_color {left:160px; top:266px; width:35px; height:32px;}
#tooth_5, #tooth_5_color {left:205px; top:265px; width:38px; height:32px;}
#tooth_6, #tooth_6_color {left:253px; top:265px; width:40px; height:30px;}
#tooth_7, #tooth_7_color {left:300px; top:265px; width:39px; height:30px;}
#tooth_8, #tooth_8_color {left:345px; top:267px; width:34px; height:31px;}
#tooth_9, #tooth_9_color {left:381px; top:268px; width:28px; height:29px;}
#tooth_10, #tooth_10_color {left:411px; top:272px; width:18px; height:28px;}
#tooth_11, #tooth_11_color {left:431px; top:278px; width:16px; height:25px;}

/*bottom teeth*/
#tooth_12, #tooth_12_color {left:77px; top:313px; width:18px;}
#tooth_13, #tooth_13_color {left:99px; top:313px; width:21px;}
#tooth_14, #tooth_14_color {left:124px; top:314px; width:24px; height:26px;}
#tooth_15, #tooth_15_color {left:154px; top:316px; width:27px;}
#tooth_16, #tooth_16_color {left:184px; top:316px; width:28px; height:26px;}
#tooth_17, #tooth_17_color {left:215px; top:318px; width:32px; height:26px;}
#tooth_18, #tooth_18_color {left:250px; top:318px; width:33px; height:26px;}
#tooth_19, #tooth_19_color {left:287px; top:316px; width:29px; height:26px;}
#tooth_20, #tooth_20_color {left:318px; top:316px; width:25px; height:26px;}
#tooth_21, #tooth_21_color {left:349px; top:315px; width:24px;}
#tooth_22, #tooth_22_color {left:378px; top:314px; width:22px;}
#tooth_23, #tooth_23_color {left:402px; top:312px; width:23px;}

/**************************************/
/*           Teeth For Life           */
/**************************************/	
#jquery-know-your-teeth {
	background: url('../images/teeth-for-life/teeth-bg.png') no-repeat;
	width:500px;
	height:400px;
	margin-top:15px;
	margin-bottom: 30px;
	position:relative;
}


#jquery-know-your-teeth #titles{
	display:none;
}

#jquery-know-your-teeth #age{
	width:100px;
	height:40px;
	position:absolute;
	top:10px;
	left:10px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	font-weight:bold;
}

#jquery-know-your-teeth #age span {
	font-size:14px;
	font-weight:bold;
	padding:0px;
	margin:0px;
	margin-top:3px;
	color:black;
}

#jquery-know-your-teeth #desc {
	width:370px;
	height:40px;
	position:absolute;
	top:9px;
	left:110px;
	padding:0px;
	margin:0px;
	font-size:12px;
	line-height:13px;
	font-family:Arial, Helvetica, sans-serif;
}

#jquery-know-your-teeth #teeth-img{
	position:absolute;
	top:64px;
	left:20px;
}

#jquery-know-your-teeth #footer{
	width:500px;
	height: 50px;
	position:absolute;
	top: 345px;
	padding-top:2px;
	padding-left:15px;
}

#jquery-know-your-teeth #footer .btn{
	background: white;
	cursor:pointer;
	width:54px;
	height:13px;
	padding-left:3px;
	padding-bottom:2px;
	margin-right:10px;
	margin-top:5px;
	border: solid 1px black;
	float:left;
	font:Arial, Helvetica, sans-serif;
	font-size:9px;
	font-weight:bold;
}


#jquery-know-your-teeth #footer .btn:hover, #jquery-know-your-teeth #footer .btn:active {
 background-color: f7f571;
}
 
/* Common Treatments -----------------
p.before-after-text {width:50%;float:right;}
.before-after-box {width:51%;}
.before-after-image {width:40%;float:left;text-align:center;padding-right:20px;margin-bottom:25px;}
.before-after-image span {display:block;}	
.before-after-image img {border: 1px solid rgba(0,0,0,.3);}*/

 /* Common Treatments -----------------*/
.common-treatments p.before-after-text {width:50%;float:right;margin-top:-5px;}
.common-treatments .before-after-box {width:50%;clear:both;}
.common-treatments .before-after-image {width:40%;float:left;padding-right:20px;margin-bottom:25px;}
.common-treatments .before-after-image span {display:block;text-align:center;}   
.common-treatments .before-after-image img {border: 1px solid rgba(0,0,0,.3);max-width:100%}