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

*{margin: 0; padding: 0;}
body {
	font-size: 12px;
	line-height: 18px;
	/* Helvetica/Arial-based sans serif stack */
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", 
	"Liberation Sans", Verdana, "Verdana Ref", Corbel, sans-serif;
	/* end font stack */
	color: #0f0f0f;
	background: #fff url(../images/body-bg.png) 50% 0 repeat-x;
	text-align: center;
}
* .replaced {overflow: hidden; text-indent: -999em; background-repeat: no-repeat;}
div.light_rounded * {color: #000;}
/*-----------------------------------------
Typography Everything set to 18px baseline
|grid. use increments of 18px for images, 
logos etc to maintain this grid
-----------------------------------------*/

/*-----------------------
LINKS 
-----------------------*/
a {cursor:pointer; outline: none;}
a, a:link, a:visited {text-decoration: underline; color: #0f0f0f; font-weight: normal;}
a:visited {color: #77787b;}
a:hover, a:active  {text-decoration: none; color: #1a7b8d;}


/* displays icons next to PDF and WORD docs */
a.pdf, a.video-link, .pdf span, .video-link span {padding: 0 9px 0 0;}
.pdf span { 
	display: inline-block;
	vertical-align: middle;
	width: 18px;
	height: 18px;
	background: url(../images/icon_pdf.gif) 100% 0 no-repeat;}
.video-link span {
	display: inline-block;
	vertical-align: middle;
	width: 18px;
	height: 18px;
	padding: 9px 9px 9px 0;
	background: url(../images/icon_video.gif) 100% 0 no-repeat;}
* .back-to-top {text-align: right; clear: both;}
/*------------------------
Headings
------------------------*/
h1, h2, h3, h4, h5, h6, dt {font-weight: normal; font-family: "TwCenMTRegular", Futura, "Century Gothic", "URW Gothic L", sans-serif; color: #332c27;}
h1 {
	font-size: 26px;
	line-height: 27px; 
	text-align: left; 
	}
h2 {
	font-size: 20px;
	line-height: 27px;
	margin: 27px 0 18px;
	color: #005668;
	}
h3 {
	color: #91876e;
	font-size: 18px;
	line-height: 27px;
	margin: 9px 0 9px;
	}
h4 {
	font-size: 15px;
	line-height: 18px;
	margin: 9px 0 9px;
	}
h5 {
	font-size: 13px;
	line-height: 18px;
	margin: 18px 0;
	}

/*-------------------------
LISTS 
-------------------------*/
ol, ul, dl {
	list-style: none;
	margin: 0px 0 18px;
	}
dl {margin: 0 0 18px; text-align: left;}
dl.indent {margin: 9px 18px 27px;}
dt {
	font-size: 18px;
	line-height: 27px;
	margin: 27px 0 18px;
	text-decoration: none;
	color: #005567;
	}
dt a {
	color: #fff;
	text-decoration: none;
	}
dt span {color: #2c8a9b; font-size: 17px; display: block;}
dl dl dt {
	font-size: 20px;
	color: #482a19;
	font-weight: bold;
	margin: 18px 0 0;
	}
dt em {color: #1d61d0; font-weight: normal;}
dd {margin: 0 0 18px;}
dd ul, dd ol, dd li, dd li {margin: 9px 18px 9px 18px;}


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;}
li > p {margin-bottom: 18px;}
li h3 {margin-top: 0;}

ul.bullet, ul.sitemap-list {
	list-style: none;
	display: block;
	margin: 0px 18px 18px;
	}
ul.bullet li {padding-left: 18px; background: url(../images/bullet.png) 0 0 no-repeat;  margin: 0 0 9px ;}
ul.bullet ul {margin: 0 0 9px 0;}
ul.bullet ul li {padding-left: 18px; background: url(../images/bullet.png) 0 0 no-repeat; margin-left: 9px;}

ul.sitemap-list li {margin: 18px 0 0 18px; font-weight: bold; font-size: 14px;}
ul.sitemap-list li a {font-weight: bold;}
ul.sitemap-list ul {margin: 0 0 18px 18px;}
ul.sitemap-list li li {margin: 0 0 0 18px; padding-left: 18px; background: url(../images/bullet.png) 0 0 no-repeat;  margin: 0 0 9px ;}
ul.sitemap-list li li a {font-weight: normal; font-size: 12px;}



/*--Used with jQuery to style bullet and text separately*/
ol.js {
	list-style: decimal outside; 
	margin-left: 18px; 
	margin-right: 18px; 
	font: bold italic 16px Georgia; 
	color: #9ab182; 
	}
ol.js li span {
	font: normal normal 13px Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, 
	"DejaVu Sans Condensed","Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; 
	color: #000; 
	}

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;
	color: #91876e;/* customize color to match site */
	}
ul.q-and-a li span {
	display: inline-block;
	float: left;
	position: relative;
	margin-left: -36px;
	font-size: 18px;
	line-height: 18px;
	font: bold normal 18px Georgia;
	vertical-align: middle;
	}
ul.q-and-a li div span {color: #9fcad1;}/* 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: 9px 0 27px 0;
	}
p.skipto {
	position: absolute;
	left: -999em;
	display: none;
	}
* .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;}
* .note {color: #77787b; font-style: oblique;}
sup, sub {font-size: 90%; line-height: 18px; vertical-align: middle;}
sup {color:#747474;}
sub {vertical-align: text-bottom;}
q:before, q:after {/* remove quotes since IE doesn't understand :( */
    content: ""; }
q {font-style: normal; font-style: italic; color:#308c9c;}
q.js span {font: 125% Georgia; line-height: 18px; vertical-align: middle;}
hr {display: none; clear: both;}
div.hr {height: 1px; margin: 9px 0 8px; clear: both; border-top: 1px solid #154071;}
* .map {
	width: 583px; 
	height: 340px; 
	border: 1px solid; 
	overflow: hidden; 
	display: block; 
	margin: 18px 0;
	padding: 9px;
	background: #fff;
	-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 */
* .clearfix:after {content: ".";display: block;clear: both;visibility: hidden;
			 line-height: 0;height: 0;}
* .clearfix {display: inline-block;}
html[xmlns] .clearfix {display: block;}
* html .clearfix {height: 1%;}
* .hide {display: none;}
* .replaced {overflow: hidden; text-indent: -999em; background-repeat: no-repeat; }

/*--------------------------------- 
Flash
---------------------------------*/
* #flash-home {width: 541px; height: 219px; }
 .flash-replaced .alt {/*JQUERY STYLE - sets size of container to 0 to hide alternative content*/
	display: block;height: 0px;position: absolute;overflow: hidden;width: 0px;}
* .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;
	border: 1px solid #00405b;
	}
* .img-right {
	position: relative;
	float: right;
	margin: 0 0 36px 18px;
	clear: right;
	border: 1px solid #00405b;
	}

* .img-center {
	margin: 18px auto; 
	text-align: center; 
	border: 1px solid #00405b;
	
	}
.home-callout img {float: right; display: block; margin-left: 9px;}
* .morph {
	position: relative;
	display: block;
	width: 297px;
	height: 171px;
	margin: 0 0 18px 18px;
	float: right;
	overflow: hidden;
	}

/*---------------------------
Layout
---------------------------*/
* #container {
	width: 100%;
	background: url(../images/bg-tile.png) 50% 0 repeat-y;
	min-width: 990px;
	}
* #container-bg {
	width: 100%;
	background: url(../images/sprite.png) 50% -126px no-repeat;
	}
* .container {/* global layout div styles */
	margin: 0 auto;
	width: 990px;
	position: relative;
	clear: both;
	}
* .col {width: 50%; float: left;}
* #hd {
	height: 193px; position:relative;
	}
* #logo {
	width: 396px;
	height: 90px;
	position: absolute;
	top: 18px;
	left: 0;
	text-indent: -999em;
	overflow: hidden;
	}
#logo a {
	width: 396px;
	height: 90px;
	display: block;
	}
* #social{
	float:right;
	margin-top:20px;
	list-style:none;
	}
#invisalign-callout { position:absolute; top:20px; left:470px;}
#social li{
	float:left;
	padding-left:10px;
	}
* #bd {
	width: 990px;
	}
* #sidebar {
	width: 373px;
	position: absolute;
	right: 3px;
	}
#sidebar #login {
	width: 136px;
	height: 85px;
	position: absolute;
	top: 0;
	left: 21px;
	margin-top: -63px;
	}
#sidebar #login a {
	width: 136px;
	height: 85px;
	display: block;
	overflow: hidden;
	text-indent: -999em;
	background: url(../images/sprite.png) -998px 0 no-repeat;
	}
#sidebar .col {width: 50%; float: left; margin-top: 36px; color: #fff;}
#sidebar dl {margin: 0}
#sidebar dt {text-transform: uppercase; margin: 0;}
#sidebar dt.did-you-know {
	font-size: 28px; 
	color: #f7f8f9; 
	text-align: center; 
	text-transform: uppercase; 
	line-height: 27px;
	width: 216px; 
	height: 45px;
	overflow: hidden;
	position: relative;
	margin: 0 0 0 -17px;
	padding-top:2px;
	background: url(../images/sprite.png)  0 0 no-repeat;
	}
html.cufon-ready #sidebar dt.did-you-know {/*fix positioning for cufon-replaced font*/
	line-height: 18px;
	} 
#sidebar dd ul {margin: 0 18px 0 0;}
#sidebar dd ul.spy {margin: 0 24px 0 18px; height: 234px; overflow: hidden;}
#sidebar dd ul.spy li {margin: 18px 0 0; height: 234px;} 
#sidebar dd li.border {}
#sidebar dd ul.address {margin: 0 0 36px;}
#sidebar dd ul.address li {margin: 0 0 18px; font-size: 11px;}	
#sidebar dd ul.address li a {font-weight: bold; }
#sidebar .outer {color: #0f0f0f; position: absolute;  right: 0; float: none;}
#sidebar .outer dl {margin-left: 27px;}
#sidebar .outer dt {margin: 0 0 36px; color: #332c27; font-size: 30px;}
	
* #content {
	margin: 0 374px 0 0;
	min-height: 800px;
	text-align: left;
	}
* #content-body {margin-left: 18px;}
#content-body .contents {
	margin-left: 20px;
	margin-right: 36px;
	}
* #interior-content {
	width: 99%;
	margin: 14px 0 27px 0;
	overflow-x: hidden;
	float: right;
	background: #e5ecf5;
	border: 1px solid #3b5c6e;
	min-height: 600px;
	-moz-box-shadow: -9px 0 18px rgba(0,0,0,0.65);
	-webkit-box-shadow: -9px 0 27px rgba(0,0,0,0.65);
	}
#interior-content .contents {margin: 0 36px 0 54px; padding: 18px 0; position: relative; }
h1.headline {font-size: 16px; font-family:TwCenMTRegular; font-weight:bold; margin: 0 0 36px; padding: 24px 0 0; line-height: 54px; text-transform: uppercase;}
#interior-content h1.headline {font-size: 32px; color: #00405b; line-height: 36px; padding: 0; margin: 0 0 9px;}
h2.intro {font-size: 15px; color: #000;}
h3.outro {font-weight: normal; font-size: 15px; color: #000000;}

* #subnav-wrapper {
	background: #e8f2f4; 
	border: 1px solid #fff;
	padding: 9px 27px;
	clear: both;
	}
#subnav-wrapper dl {margin: 0;}
#subnav-wrapper dt {
	font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", 
	"Liberation Sans", Verdana, "Verdana Ref", sans-serif;
	font-size: 14px; 
	color: #0c2a33; 
	margin: 0;
	line-height: 18px;
	}
#subnav-wrapper dd {margin: 0;}
#subnav-wrapper p {
	margin: 0; 
	font-size: 10px;
	}
#subnav-wrapper p a {color: #77787b;}
#subnav-wrapper p a:hover,#subnav-wrapper p a.active {font-weight: bold;}

/* blockquote styles */
blockquote {
	position: relative;
	background: #026e82;
	border: 2px solid #025969;
	padding: 9px 27px;
	margin: 45px 27px 14px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	}
blockquote cite {
	display: block;
	position: absolute;
	top: 0;
	left: 18px;
	margin-top: -45px;
	padding-left: 54px;
	font-size: 16px;
	font-weight: bold;
	line-height: 54px;
	height: 54px;
	color: #025969;
	background: url(../images/cite-bg.png) 0 0 no-repeat;
	}
blockquote p {
	color: #e5ecf5;
	margin: 0;
	}
* #ft {
	background: #0f0f0f;
	color: #edf2f8;
	text-align: left;
	clear: both;
	}
#ft .container {padding: 18px 0;}
#ft .text_nav, #ft .text_nav a, #ft .text_nav a:visited {font-size: 10px; color: #edf2f8; text-align: left; text-transform: lowercase;}
* #sesame-link {
	width: 198px;
	height: 45px;
	position: absolute;
	right: 0;
	top: 0;
	text-indent: -999em;
	overflow: hidden;
	margin: -20px 185px 0 0;
	}
#sesame-link a {
	width: 198px;
	height: 45px;
	display: block;
	margin: 0;
	margin: 0;
	background: url(../images/sprite.png) -263px 0 no-repeat;
	}
* #nav {
	width: 612px;
	height: 33px;
	position: absolute;
	left: 50%;
	top: 121px;
	margin: 0 0 0 -493px;
	}
#nav ul {
	width: 612px;
	}
#nav ul li, #utility-nav li {float: left;}
#nav a, #utility-nav a {
	display: block;
	}
#nav ul ul, #utility-nav ul ul {
	position: absolute; 
	top: -999em;
	z-index: 1000;
	margin: 0;
	padding: 18px 0;
	width: 198px;
	background: url(../images/nav-bg.png) 50% 100% no-repeat;
	text-align: left;
	}
#nav ul ul a, #utility-nav ul ul a {
	line-height: 27px;
	color: #fff;
	text-decoration: none;
	margin: 0 1px;
	padding: 0 18px;
	display: block;
	}
#nav ul ul a:hover, #nav ul ul li.active a, 
#utility-nav ul ul a:hover, #utility-nav ul ul li a:hover {
	background: #181512 url(../images/nav-pointer.png) 100% 50% no-repeat;
	color: #9cc8ce;
	}
#nav ul li.sfhover ul, #nav ul li:hover ul, #utility-nav ul li.sfhover ul, #utility-nav ul li:hover ul {top: auto;}
#nav ul ul li, #utility-nav ul ul li {float: none;}
#nav ul li.our-office ul {margin-left: 49px;}
#nav ul li.for-patients ul {margin-left: 44px;}
#nav ul li.about-ortho ul {margin-left: 48px;}
#nav ul li.about-braces ul {margin-left: 48px;}
#nav ul li.treatments ul {margin-left: 41px;}
#utility-nav ul li.contact-us ul {margin-left: 45px;}
* #utility-nav {
	width: 179px
	height: 33px;
	position: absolute;
	top: 121px;
	left: 50%;
	margin: 0 0 0 310px;	
	}
#utility-nav ul {width: 179px;}
/*-------------------------------
Image Replacement
-------------------------------*/
/*--//Main Nav */
* #our-office, * #for-patients, * #about-ortho, * #faqs, 
* #about-braces, * #treatments, * #contact-us, * #home {
	overflow: hidden;
	text-indent: -999em;
	height: 33px;
	background: url(../images/sprite.png) 0 -50px no-repeat;	
	}
* #our-office {width: 105px; background-position: 0 -50px;}
#nav li:hover #our-office, #nav li.sfhover #our-office, #nav li.active #our-office {background-position: 0 -83px;}
* #for-patients {width: 112px; background-position: -105px -50px;}
#nav li:hover #for-patients, #nav li.sfhover #for-patients, #nav li.active #for-patients {background-position: -105px -83px;}
* #about-ortho {width: 113px; background-position: -215px -50px;}
#nav li:hover #about-ortho, #nav li.sfhover #about-ortho, #nav li.active #about-ortho {background-position: -215px -83px;}
* #faqs {width: 58px; background-position: -330px -50px;}
#nav li:hover #faqs, #nav li.sfhover #faqs, #nav li.active #faqs {background-position: -330px -83px;}
* #about-braces {width: 118px; background-position: -388px -50px;}
#nav li:hover #about-braces, #nav li.sfhover #about-braces, #nav li.active #about-braces {background-position: -388px -83px;}
* #treatments {width: 99px; background-position: -507px -50px;}
#nav li:hover #treatments, #nav li.sfhover #treatments, #nav li.active #treatments {background-position: -507px -83px;}
* #contact-us {width: 101px; background-position: -807px -50px;}
#utility-nav li:hover #contact-us, #utility-nav li.sfhover #contact-us, #utility-nav li.active #contact-us {background-position: -807px -83px;}
* #home {width: 78px; background-position: -908px -50px;}
#utility-nav li:hover #home, #utility-nav li.sfhover #home, #utility-nav li.active #home {background-position: -908px -83px;}
/*--//utility Nav */

/*-------------------------------
Slide show globals
-------------------------------*/

/*-------------------------------
Home
-------------------------------*/
* #slidehow-home {
	width: 532px;
	height: 210;
	margin-bottom: 15px;
	position: relative;
	overflow: hidden;	
	}

/*-------------------------------
Office Tour

  The class "jq" is added to the 
  slideshow div by the office tour 
  jquery function. This means the 
  office tour will degrade to a 
  standard list of images when jq 
  is not present; Javascript 
  is disabled.
--------------------------------*/
div.slideshow-wrapper {position: relative; margin-top: 18px;}
h3.f-caption, h3.g-caption {display: none;}

* .slideshow-wrapper.jq {
	width: 532px; 
	height: 324px; 
	margin: 36px 0 0;
	position: relative;
}
div.slideshow-wrapper div.slideshow {
	width: 532px; 
	height: 324px; 
}
.slideshow-wrapper img {display: block; margin: 18px 0;}
.slideshow-wrapper.jq img {display: block; margin: 0;}
.slideshow-wrapper h3 {display: block; position: absolute; bottom: 0; z-index: 1000; text-align: center; margin: 0; width: 532px; height: 36px; line-height: 27px; font-size: 18px; color: #fff;}
p.controls {
	display: none;
}
* .controls {
	display: block;
	width: 532px;
	height: 27px;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	margin: -28px 0 0;
}
.controls a {
	display: inline;
	line-height: 27px;
	border: 1px solid #338e9d;
	color: #332c26;
	background: #94c2c9;
	text-align: center;
	padding: 4px;
	margin-right: 9px;
}
p.controls a.first {border-right: none;}

/*---------------------------
Sesame Forms
---------------------------*/

/*-----------------------------------------------
	Forms 
	*/
	/* Global form styles */
	div.referral-form, div.appointment-form, div.comments {
		width: 100%;
		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: #e8f2f4;/* 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: #e5edf5;/* customize me - this is the hover color change of form fields*/
					 	outline-color: #2f3726;/* customize me */
					 	}
						fieldset li h3 {font-size: 14px; 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 {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: 80%; 
								color: #0f0f0f;/*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;
								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 {/*these styles control the look of the button, change as necessary*/
							clear:both;/*do not change, forces button to sit below floated elements*/
							display: block;
							width: 125px;
							height: 34px;
							text-align: center;
							margin: 0;
							background:#9ab182;/* customize me! */
							border: 1px solid #2f3726;
							line-height: 34px;
							color:#ffffff;/* customize me! */
							font-size:12px;
							font-weight:bold;
							-moz-border-radius: 4px; /*for Moz, optional*/
							-webkit-border-radius: 4px; /*for Webkit Browsers, optional*/
							}
							
					
					
					
	
	/* 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%;}
	
	/* 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 {margin-left: 0;}


/*-------------------------------
SESAME CONTENT
-------------------------------*/
ul#sesame-games {
list-style: none;
margin: 0 0 27px;
padding: 0
}
ul#sesame-games li {
	width: 187px;
	height: 79px;
	border: 1px solid #012845;/* add hex color to change border color; defaults to BODY Font Color*/
	float: left;
	margin: 18px 9px 0;
	overflow: hidden;
	position: relative;
	background: #17749f;
	}

ul#sesame-games a {
	position: relative;
	display: block;
	overflow: hidden;
	width: 187px;
	height: 79px;
	}
ul#sesame-games img {
	position: absolute;
	top: 0;
	left: 0;
	border: 0;
	width: 187px;
	display: block;
}
ul#sesame-games li p {
	font-size: 11px;
	color: #fff;
	margin: 9px;
	position: relative;
}

* .left {
float:left;
margin:9px 18px 36px 0;}
img.right {
float:right;
margin:9px 0 36px 18px;}
* .clear {
clear:both;}
* #toggle-content {margin: 18px 0;}
* #anatomy-of-a-tooth {background: url(../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;}
.flash-replaced .alt {
display: block;
width: 0px;
height: 0px;
position: absolute;
overflow: hidden;}
* .hide {display: none;}

/*-------------------------------
EDIT.COM
-------------------------------*/

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

.NormalText, body, td {
	font-family: "Lucida Grande","Lucida Sans Unicode","Lucida Sans", Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 18px;
	color: #0F0F0F;
	font-weight: normal;
	text-decoration: none;
	text-transform: none;
	font-style: normal;
}

.BlueText {color: #308C9C;}

.GrayText {color: #77787B;}

.SubjectHeader {
	font-family: "Lucida Grande","Lucida Sans Unicode","Lucida Sans", Tahoma, Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 22px;
	color: #005668;
	font-weight: bold;
}

td.BlueBorderTop {border-top: solid 1px #154071; padding-top: 20px;}

/************/
img.right {
	float: right;
	margin: 0 0 15px 15px;
	}
.right-border {
	border: solid 1px #333; /* Customize me!! */
	float: right;
	clear: right;
	margin: 0 0 15px 15px;
	}
.left-border {
	border: solid 1px #333; /* Customize me!! */
	float: left;
	clear: left;
	margin: 0 15px 15px 0;
	}
#video-invisalign {
	width: 360px; 
	height: 266px;
	display: block;
	}
p.flash_notice {
	margin: 18px;
	padding: 9px;
	color: #ff0000;
	border: 1px dotted #ff0000;
	background: #ffffff;
	text-align: center;
	}
	
.right-border {
	border: solid 1px #333; /* Customize me!! */
	float: right;
	clear: right;
	margin: 0 0 15px 15px;
	}
img.right {
	float: right;
	margin: 0 0 15px 15px;
	}
.left-border {
	border: solid 1px #000;
	margin: 0 15px 15px 0;
	float: left;
	}
img.left {
	margin: 0 15px 15px 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;
	line-height: 18px;
	font-size: 11px;
	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;
	}
	
div.invisalign-video {
	background: url(http://media.sesamehost.com/images/invisalign-pro-package/invisalign-video-bg.jpg) no-repeat;
	width: 450px;
	height: 250px;
	border: solid 1px #333; /* Customize me!! */
	margin-bottom: 15px;
	text-align: right;
	}
	
div.invisalign-video img {
	margin: 30px 50px 0;
	}

img.border {
	border: solid 1px #333; /* Customize me!! */
	}

.left-border {
	border: solid 1px #333; /* Customize me!! */
	float: left;
	clear: left;
	margin: 0 15px 15px 0;
	}
	
.bump-right {
	margin-right: 5px;
	}
	
/* Invisalign Videos */
#video-invisalign {
	width: 360px; 
	height: 266px;
	display: block;
	}
#video-invisalign-best-friends, #video-invisalign-news-travels-fast {
	width: 320px;
	height: 206px;
	display: block;
	}
#video-invisalign-lobby {
	width: 320px; 
	height: 266px;
	display: block;
	}
	
	
ul#testimonials {
	margin: 0;
	padding: 0;
	list-style: none;
	list-style-image: none;
	}
	
	
.invisalign-block {
	width: 315px; 
	float: left;
	}

/* Invisalign Before and After */
ul#before-after-cycle li img.invisalign {
	height: 265px;
	}
#invisalign-before-after {
	width: 488px;
	min-height: 335px;
	line-height: 18px;
	margin: 30px 0 18px; /* Adjust this top margin if needed according to your design */
	padding: 10px 0 10px 10px;
	background-color: #519FAC; /* Customize me */
	border: solid 1px #333; /* Customize me */
	-moz-border-radius: 5px; /* Optional - you may customize or remove */
	-webkit-border-radius: 5px; /* Optional - you may customize or remove */
	position: relative;
	}
ul.slideshow {
	list-style: none; 
	margin: 0; 
	padding: 0;
	}
ul#before-after-cycle li img {
	width: 232px;
	float: left;
	margin-right: 10px;
	border: solid 1px #333; /* Customize me */
	}
#invisalign-before-after p {
	float: left;
	width: 50%;
	margin: 265px 0 10px 0;
	}
#invisalign-before-after div.cycle-detail {
	min-height: 55px;
	clear: both;
	background-color: #fff; /* Customize me */
	padding: 10px;
	margin: 300px 10px 0 0;
	border: solid 1px #333; /* Customize me */
	-moz-border-radius: 5px; /* Optional - you may customize or remove */
	-webkit-border-radius: 5px; /* Optional - you may customize or remove */
	}
#invisalign-before-after .before-after-nav {
	background: #033847; /* Customize me */
	position: absolute; 
	z-index: 50;
	top: -19px;
	left: 11px;
	padding: 0 3px;
	border: solid 1px #333; /* Customize me */
	border-width: 1px 1px 0 1px;
	-moz-border-radius: 5px 5px 0 0; /* Optional - you may customize or remove */
	-webkit-border-top-left-radius: 5px; /* Optional - you may customize or remove */
	-webkit-border-top-right-radius: 5px;} /* Optional - you may customize or remove */
#invisalign-before-after .before-after-nav a {
	text-decoration: none; 
	font-size: 12px; 
	padding: 5px; 
	margin: 0 3px; 
	color: #fff;} /* Customize me */
#invisalign-before-after .before-after-nav a.activeSlide {color: #333;} /* Customize me */