*{margin: 0; padding: 0;}
body {
font: 14px/18px Arial,Verdana, Helvetica, sans-serif;
color: #ffffff;
background: #001c33;
}

/*-----------------------------------------
Typography Everything set to 18px baseline
|grid. use increments of 18px for images, 
logos etc to maintain this grid
-----------------------------------------*/

/*-----------------------
LINKS 
-----------------------*/
a {cursor:pointer;}
a, a:link, a:visited {text-decoration: underline;color: #ffb817;font-weight: normal;}
a:hover, a:active  {text-decoration: none;color:#005ea0;}
.skip {/*skip-to link only available when viewed without css for screen readers*/
	width: 0; 
	height: 0; 
	display: block; 
	position: absolute; 
	left: -9999em; 
	overflow: hidden;
}
.text_nav a {color: #ffffff; text-decoration: none;	font-weight: bold;}
.text_nav a:hover {text-decoration: underline;}
/* displays icons next to PDF and WORD docs */
.doc {
	padding: 4px 18px 5px 0;
	background: url(../images/icon_doc.gif) 100% 50% no-repeat;}
.pdf { 
	padding: 4px 18px 5px 0;
	background: url(../images/icon_pdf.gif) 100% 50% no-repeat;}
.video-link {
	padding: 4px 18px 5px 0;
	background: url(../images/icon_video.gif) 100% 50% no-repeat;}
.hhf {
	padding: 4px 18px 5px 0;
	background: url(../images/icon_exe.gif) 100% 50% no-repeat;}
#logo a {display: block; width: 565px; height: 145px;}
.sesame-link a {font-size: 12px; color: #fefefe; text-decoration: none;}
.sesame-link a:hover {color: #ffffff; background: #005ea0;padding: 3px;}
dd a.toggle-link {display: none; text-align: right; font-weight: bold;}
.sitemap-list li a {font-weight: bold;}
.sitemap-list li li a {font-weight: normal; color: #8fa3c0;}
#home-callout-ptforms a {display: block; width: 327px; height: 244px;}
.img-wrap-enlarge a {position: relative; text-decoration: none;}
.img-wrap-enlarge a span {display: block; width: 126px; height: 18px; background: url(../images/zoom.gif) 0 0 no-repeat;
position: absolute; left: 0; top: 100%; margin-top: 0; z-index: 10;}
/*------------------------
Headings
------------------------*/
h1,h2,h3, h4, h5, h6, dt {font-family: "georgia"; font-weight: normal; color: #ffb817;}
h1.jcir {
	font-size: 24px; 
	line-height: 18px;
	padding: 0;
	margin: 0 0 27px;
	text-align: left; 
}
h1.jcir a, h2.jcir a {display: block; float: left; height: 45px; overflow: hidden; text-indent: -999em;}
h1.jcir a.title-link-spillane {width: 275px;}
h1.jcir a.title-link-reynolds {width: 275px;}
h2.jcir a.title-link-testimonials {width: 332px; float: none;}
h1.jcir a.title-link-our-mission {width: 550px; float: none;}
h2.jcir a.title-link-new-patients {width: 332px; float: none;}

h1#logo {
	margin: 0;
	padding: 0;
	width: 565px;
	height: 145px;
	position: absolute; 
	top: 27px; 
	left: 0;
	z-index: 100;}

h2 {
	font-size: 17px;
	line-height: 27px;
	margin: 0 0 0;
	padding: 0;}
h2 span {font-size: 16px; font-weight: normal; color: #8fa3c0;}
h2.jcir {margin: 0 0 27px;}

h3 {
	color: #6598ff;
	font-size: 16px;
	line-height: 18px;
	margin: 0px 0 18px;
}
h3 span {color: #8fa3c0;}
.pullquote {
	overflow: hidden; 
	text-indent: -999em;
	position: relative; 
	height: 36px;
	background: #ffe3a4;
	clear: both;
}
#q-home {
	width: 958px;
	height: 63px;
	margin: 0 0 12px; 
	padding: 0;
	border-bottom: 1px solid #ffffff;
	background: url(../images/inline-quote-home.jpg) 0 0 no-repeat;
}
#q-amazing-results {
	margin: 0 -24px 27px -24px;
	background: #ffe3a4 url(../images/q-amazing-results.jpg) 50% 50% no-repeat;	
}
#q-best-team {
	margin: 0 -24px 27px -24px;
	background: #ffe3a4 url(../images/q-best-team.jpg) 50% 50% no-repeat;	
}
#q-boost-confidence {
	margin: 0 -24px 27px -24px;
	background: #ffe3a4 url(../images/q-boost-confidence.jpg) 50% 50% no-repeat;	
}
#q-new-smile {
	margin: 0 -24px 27px -24px;
	background: #ffe3a4 url(../images/q-new-smile.jpg) 50% 50% no-repeat;	
}
#q-beautiful-smiles {
	margin: 0 -24px 27px -24px;
	background: #ffe3a4 url(../images/q-beautiful-smiles.jpg) 50% 50% no-repeat;	
}
h4 {
	font-size: 14px;
	line-height: 18px;
	margin: 18px 0 0 0;
	color: #6598ff;
}
h5 {
	font-size: 12px;
	line-height: 18px;
	margin: 18px 0;
}

/*-------------------------
LISTS 
-------------------------*/
ol, ul, dl {
	list-style: none;
	margin: 0px 0 12px;
}
dl {margin: 0 0 18px; text-align: left;}
dl.indent {margin: 9px 18px 27px;}
dt {
	font-size: 17px;
	line-height: 18px;
	margin: 9px 0 9px;
}
dl.indent dt {
	color: #6598ff;
	font-size: 16px;
	line-height: 18px;
}
dt.jcir {margin: 0 0 0; text-align: center;}

dt em {color: #8fa3bf; font-weight: normal;}
dd {margin: 0 0 18px;}
dd ul {margin-left: 9px;}
dd ul li {margin-left: 9px;}
#footer-addresses dl {margin: 0; font-size: 12px; float: right; margin-left: 23px;}
#footer-addresses dl.align-right {text-align: right;}
#footer-addresses dt {color: #ff340d; margin: 0; font-size: 12px; font-family: Arial,Verdana, Helvetica, sans-serif;}
#footer-addresses dd {margin: 0;}

#subnav dd ul {margin-left: 0; list-style: none;}
#subnav li {margin: 0;}

ul.bullet, ul#sitemap-list {
	list-style: none;
	display: block;
	margin-left: 9px;
}
ul.bullet li {margin-left: 9px;padding-left:18px;background: url(../images/bullet.gif) 0 9px no-repeat}
ul#sitemap-list li {font-weight: bold; font-size: 14px;}
ul#sitemap-list ul {margin: 0 0 9px 0;}
ul#sitemap-list li li {margin-left: 9px;font-weight: normal; font-size: 12px;}
ul.bullet ul {margin: 0 0 9px 0;}
ul.bullet ul {padding-left:18px;background: url(../images/bullet.gif) 0 0 no-repeat; margin-left: 18px;}
ol {list-style: decimal outside; margin-left: 18px;}
ol li {margin-left: 18px;}
li {
	font-size: 14px;
	line-height: 18px;
	margin-bottom: 0;}
li {line-height: 27px;}

.logo-box p, .logo-box-large p, .logo-box-spillane p, .logo-box-reynolds p {
	background: url(../images/logos/logos-box-bg.jpg) no-repeat; 
	width: 203px; 
	margin: 0; 
	padding: 0;
}
.logo-box-spillane p {width: 332px; height: 144px; background: url(../images/logos/large-logo-box-bg-spillane.jpg) no-repeat}
.logo-box-reynolds p {width: 332px; height: 144px; background: url(../images/logos/large-logo-box-bg-reynolds.jpg) no-repeat}
.logo-box a, .logo-box-large a, .logo-box-spillane a, .logo-box-reynolds a {float: left; display: block; height: 72px; text-indent: -999em; overflow: hidden; position: relative;}
#logo-aao {width: 109px; height: 144px;}
#logo-ada {width: 112px; height: 144px;}
#logo-abo {width: 111px; height: 144px;}
#logo-ormco {width: 203px; height: 72px; background: url(../images/logos/logo-small-ormco.jpg) 0 0 no-repeat;}
#logo-ibraces {width: 203px; background: url(../images/logos/logo-small-ibraces.jpg) 0 0 no-repeat;}
#logo-invisalign {width: 203px; background: url(../images/logos/logo-small-invisalign.jpg) 0 0 no-repeat;}
#logo-invisalign-teen {width: 203px; background: url(../images/logos/logo-small-invisalign-teen.jpg) 0 0 no-repeat;}

ul.sitemap-list ul {
	margin-left: 18px;
}
ul.sitemap-list li {
	font-size: 16px; 
	font-weight: bold;
}
ul.sitemap-list ul li {font-size: 14px; margin-left: 18px;}


/*-------------------------- 
PARAGRAPHS
-------------------------*/
p {
	font-size: 14px;
	line-height: 18px;
	margin: 18px 0 ;}
p.sub-nav {margin: 0 0 9px;}
p.notice {
	margin: 18px;
	padding: 9px;
	color: #ff0000;
	border: 1px dotted #ff0000;
	background: #ffffff;
}
p.note {padding-left: 36px;background: url(../images/note_bullet.jpg) 0 50% no-repeat;}
p.top-link {font-weight: bold; text-align: right; clear: both; }
.l-column p {padding-right: 24px; border-right: 1px solid #ffb817;}
p.pullquote {clear: both; display: block; width: 958px;}
p.view-all-testimonials {font-size: 12px; text-align: right; margin-top: 0;}
p.view-all-testimonials span {font-size: 10px;}
p.copy {padding-left: 27px; background: url(../images/ldquo.jpg) 0 0 no-repeat;}
p.name {padding-left: 27px;}
.bf-link p {text-align: right; font-size: 12px; margin: 9px 0;}
p.footer-text {font-size: 12px; width: 500px; text-align: left;}
#footer p.text_nav {text-align: center; font-size: 11px;}
p.sesame-link {margin-top: 0; text-align: center;}

/*--------------------------
TEXT 
-------------------------*/
.center {text-align: center;}
.right {text-align: right;}
strong, b {	font-weight: bold;}
strong.highlight {font-family: "georgia"; font-size: 18px; color: #ffb817; text-transform: capitalize;}
em {font-style:italic;}
sup, sub {font-size: 85%;}
q:before, q:after {/* remove quotes since IE doesn't understand :( */
    content: ""; }
q {font-style:italic;}
hr {display: none;}
div.hr {border-top: 1px solid #c6dbed; height: 1px; margin: 18px 0;clear: both;}
div.hr-team {border: none; height: 1px; margin: 18px 0;clear: both;}
dl.clear-each dt {clear: both;}
.float-right {float: right; clear: right; margin: 0 0 18px 9px;}
.ph {padding-left: 27px; background: url(../images/icon_phone.gif) 0 50% no-repeat;}
.mailto {padding-left: 27px; background: url(../images/icon_mailto.gif) 0 50% no-repeat;}
.fx {padding-left: 27px; background: url(../images/icon_fax.gif) 0 50% no-repeat;}
.map {padding-left: 27px; background: url(../images/icon_directions.gif) 0 50% no-repeat;}

/*-----------------------------
Tables
-----------------------------*/
table {
	padding: 0; 
	width: 75%; 
	text-align: center; 
	margin: 18px auto; 
	background: #001c33; 
	border: 1px solid #c6dbee;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
tr.row-color {padding: 0; background: #334b63;}
td {border: none; margin: 0;  padding: 9px; text-align: left; border-collapse: collapse;}
td h3,td p {margin: 0; padding: 0;}

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

.replaced {/* jcIR image replacement */
	overflow: hidden; 
	text-indent: -999em; 
	background-repeat: no-repeat; 
	width: 0; 
	height: 0; 
}
	
.clear:after {content: ".";display: block;clear: both;visibility: hidden;
			 line-height: 0;height: 0;}
.clear {display: inline-block;}
html[xmlns] .clear {display: block;}
* html .clear {height: 1%;}
.hide {display: none;}

/*--------------------------------- 
Flash
---------------------------------*/
.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 */
#flash-banner {width: 407px; height: 128px; position: absolute; left: 551px; top: 51px;}

/*--------------------------------- 
Images
---------------------------------*/
img {display: block; border: 0;outline: 0;}
.img-left {
	position: relative;
	float: left;
	margin: 0 18px 18px 0;	
	clear: left;
}
.img-right, .inset {
	position: relative;
	float: right;
	margin: 0 0 18px 18px;
	clear: right;
}
.img-center {margin: 0 auto 18px; text-align: center;}
img.noclear {clear: none;}
img.quote {display: inline; margin-left: 9px;}
body.two-col .bf-link {float: right; margin: 0 0 18px 27px;}
.img-wrap-enlarge {padding-bottom: 36px;}
.img-wrap-enlarge img {border: 2px solid #ffffff;}
div.inset {background: url(../images/caption-box-bg.jpg) 50% 0;}
div.inset p {/* caption wrapper */
	text-align: center;
	color: #002544;
	padding: 9px 0;
	margin: 0 9px;
}
dl.links img {display: inline;}
.map-frame {
	width: 350px;
	height: 325px;
	overflow: hidden;
	position: relative;
	float: right;
	margin: 0 0 18px 18px;
	clear: right;
	border: 1px solid;	
}

/*---------------------------
Layout
---------------------------*/
#container {
	width: 960px;
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -480px;
	margin-bottom: 0;
}
#header {
	height: 212px;
	background: url(../images/interior-header-bg.jpg) 50% 0 no-repeat/*header background with double-column bottom border*/
}
body.one-col #header {
	background: url(../images/home-header-bg.jpg) 50% 0 no-repeat/*header background with single-column bottom border*/	
}
#phone-numbers {
	width: 446px;
	height: 50px;
	position: absolute;
	right: 0;
}
#phone-numbers ul {width: 446px; margin: 0; padding: 0;}
#phone-numbers ul li {display: inline;}
/*phone numbers image replacement*/
#phone-numbers a {height: 50px; display: block; float: left; background: url(../images/ph-numbers.gif) no-repeat;}
#phone-numbers a#ph-novi {width: 216px; background-position: 0 0;}
#phone-numbers a#ph-rochester {width: 230px; background-position: -216px 0;}

#content-wrapper {
	border: 1px solid #c6dbed;
	border-width: 0 1px;
	width: 958px;
	margin: 0;
	padding: 12px 0 0 0;
	background: #002544 url(../images/interior-content-bg.jpg) 308px 0 repeat-y; 
}
/*HOME/Site Map content styles*/
body.one-col #content-wrapper {background-image: none;}
#content {
	margin: 0 24px;
}
.l-column {float: left; width: 550px; margin-left: 4px;margin-bottom: 23px; }
.r-column {margin: 0 0 23px 576px; position: relative;}
#home-bottom-row {
	position: relative;
	width: 958px;
	border-top: 1px solid #c6dbed;
	margin: 0 -24px 0;
	padding: 0 0 23px;
	background: #334c63;
	clear: both;
}
#home-bottom-row .l-column, #home-bottom-row .r-column {margin-bottom: 0;}
#home-bottom-row .inner {margin: 0 23px;}
body.one-col #footer {
	background: url(../images/home-footer-bg.jpg) 50% 0 no-repeat;
}
/*INTERIOR content styles*/
#nav-column {width: 308px; position: absolute; left: 1px;}
body.two-col #content {margin-left: 349px; width: 585px;min-height: 636px;}
body.two-col #footer {
	background: url(../images/home-footer-bg.jpg) 50% 0 no-repeat;
}
body.two-col .testimonial-block {clear: both; margin: 0 0 27px;}
#footer {
	position: relative;
	width: 960px;
	padding: 2px 0 27px;
}
#footer-wrapper {
	margin-top: 290px;
}
#footer-logo-box {width: 960px; height: 150px; position: absolute; top: 0; margin-top: 25px; }
#footer-logo-box img {float: left; margin-left: 15px;}
#footer-logo-box img.first {margin-left: 0;}
#footer-logo-box img.facebook { margin-left:325px}
#footer-addresses {
	position: absolute;
	right: 0;
	width: 350px;
}

/*Navigation
---------------------------------*/
#nav {
	width: 960px;
	height: 25px;
	position: absolute;
	top: 181px;
	left: 0;
}
#nav ul {
	width: 960px;
	margin: 0;
	padding: 0;	
}
#nav ul li {display: inline; margin: 0; padding: 0;}
#nav ul li a {display: block; float: left;}

#home, #about-us, #braces, #treatment, #new-patients, #invisalign, #patient-login, #doctor-login, #contact {
	text-indent: -999em;
	overflow: hidden;
	height: 25px; 
	background: url(../images/nav.jpg) no-repeat;
}
#nav a#home {width: 81px; background-position: 0 0;}
#nav li:hover a#home, #nav li.sfhover a#home, #nav li.active a#home {background-position: 0 -25px;}
#nav a#about-us {width: 116px; background-position: -81px 0;}
#nav li:hover a#about-us, #nav li.sfhover a#about-us, #nav li.active a#about-us {background-position: -81px -25px;}
#nav a#braces {width: 92px; background-position: -194px 0;}
#nav li:hover a#braces, #nav li.sfhover a#braces, #nav li.active a#braces {background-position: -194px -25px;}
#nav a#treatment {width: 126px; background-position: -287px 0;}
#nav li:hover a#treatment, #nav li.sfhover a#treatment, #nav li.active a#treatment {background-position: -287px -25px;}
#nav a#invisalign {width: 117px; background-position: -961px 0;}
#nav li:hover a#invisalign, #nav li.sfhover a#invisalign, #nav li.active a#invisalign {background-position: -961px -25px;}
#nav a#new-patients {width: 144px; background-position: -413px 0;}
#nav li:hover a#new-patients, #nav li.sfhover a#new-patients, #nav li.active a#new-patients {background-position: -413px -25px;}

#nav a#patient-login {width: 150px; background-position: -557px 0; position:absolute; top:-167px; left:180px; z-index:9999}
#nav li:hover a#patient-login, #nav li.sfhover a#patient-login, #nav li.active a#patient-login {background-position: -557px -25px;}
#nav a#doctor-login {width: 150px; background-position: -707px 0; position:absolute; top:-167px; left:330px; z-index:9999}
#nav li:hover a#doctor-login, #nav li.sfhover a#doctor-login, #nav li.active a#doctor-login {background-position: -707px -25px;}

#nav a#contact {width: 100px; background-position: -857px 0;}
#nav li:hover a#contact, #nav li.sfhover a#contact, #nav li.active a#contact {background-position: -857px -25px;}

#subnav dl {margin: 0; width: 308px;}
#subnav dd, #subnav ul {margin: 0;}
#subnav li {display: inline;}
#subnav li a {
	text-decoration: none;
	text-transform: uppercase;
	color: #ffffff;
	display: block; 
	width: 308px;
	margin: 0 0 3px;
	padding: 9px 0; 
	font-family: Georgia; 
	font-size: 14px; 
	text-align: center; 
	background: url(../images/subnav.jpg) 50% 50% no-repeat;
}
#subnav li.for-referring-offices a {background: url(../images/subnav-locked.jpg) 0 50% no-repeat;}

#subnav li a:hover, #subnav li.active a {color: #efb94b;}

/*-------------------------------
Slide show globals
-------------------------------*/
div.slideshow-wrapper {position: relative; margin-top: 18px;}
div.slideshow-wrapper .shadow-box {display: none; background: url(../images/slideshow-bottom-shadow.png) no-repeat;
								   width: 500px; height: 36px; position: absolute; top: 100%; z-index: 10; margin-top: -36px;}
div.slideshow-wrapper.jq .shadow-box {display: block;}
div.slideshow-wrapper.jq, div.slideshow-wrapper.jq .slideshow {width: 500px; height: 375px;}
#skating09-slideshow, #skating-slideshow, #hygiene-slideshow {margin-top: 45px;}
.controls {display: none; width: 190px; height: 27px; margin: 0; position: absolute; margin-left: 310px; margin-top: -45px;}
.controls li {display: inline; margin: 0;}
.controls a {display: block; float: left; height: 27px; overflow: hidden; text-indent: -999em;
			 background: url(../images/testimonial-controls.jpg) no-repeat;}
div.caption {display: none; margin: 0 0 36px; width: 500px; height: 72px; position: relative; background: url(../images/caption-bg.jpg) 50% 0 no-repeat;}
div.caption.jq {display: block;}
div.caption h2 {display: none; margin: 0; padding: 5px 0 0; text-align: center;}


/*-------------------------------
testimonial slider
--------------------------------*/
#testimonial-slider.jq {
	width: 332px;
	height: 468px;
	position: relative; 
	overflow: hidden;
}
#testimonial-slider .bf-link a {display: none;}
#testimonial-slider .pullquote {display: none;}
#testimonial-controls {width: 190px; height: 27px; margin: 0; position: absolute; margin-left: 142px; margin-top: -23px;}
#testimonial-controls li {display: inline; margin: 0;}
#testimonial-controls a {display: block; float: left; height: 27px; overflow: hidden; text-indent: -999em;background: url(../images/testimonial-controls.jpg) no-repeat;}
#testimonial-controls a#testimonial-prev {width: 107px; background-position: 0 0;}
#testimonial-controls a#testimonial-prev:hover {background-position: 0 -27px;}
#testimonial-controls a#testimonial-next {width: 83px; background-position: -107px 0;}
#testimonial-controls a#testimonial-next:hover {background-position: -107px -27px;}

#testimonial-slider div {width: 332px;}
#testimonial-slider div div {width: auto; }
#testimonial-slider p.copy {margin-right: 23px; padding-left: 27px; background: url(../images/ldquo.jpg) 0 0 no-repeat;}
#testimonial-slider p.name {margin: 18px 0 0 27px; padding: 0;}
#testimonial-slider img {float: none; margin: 0;}

/*jquery test truncation*/
.truncate_less {display: inline;}


/*-------------------------------
event slideshows
--------------------------------*/
a#skating-prev,a#skating09-prev, a#hygiene-prev {width: 107px; background-position: 0 0;}
a#skating-prev:hover,a#skating09-prev:hover, a#hygiene-prev:hover {background-position: 0 -27px;}
a#skating-next, a#skating09-next, a#hygiene-next {width: 83px; background-position: -107px 0;}
a#skating-next:hover, a#skating09-next:hover, a#hygiene-next:hover {background-position: -107px -27px;}


/*-------------------------------
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.
--------------------------------*/
a#tour-prev {width: 107px; background-position: 0 0;}
a#tour-prev:hover {background-position: 0 -27px;}
a#tour-next {width: 83px; background-position: -107px 0;}
a#tour-next:hover {background-position: -107px -27px;}

a#tour2-prev {width: 107px; background-position: 0 0;}
a#tour2-prev:hover {background-position: 0 -27px;}
a#tour2-next {width: 83px; background-position: -107px 0;}
a#tour2-next:hover {background-position: -107px -27px;}

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

.tabNavigation {display: inline;  margin: 0;}
.tabNavigation li {display: inline;}
.tabNavigation li a {padding: 3px 9px; border: 1px solid #ca9212; background: #c6dbed; color: #ca9212;}
.tabNavigation li a:hover, .tabNavigation li.active a {background: #ffffff; color: #ca9212;}


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

/* Global form styles */
div.referral-form, div.appointment-form, div.comments, div.login-form {
	width: 500px;
	margin-top: 18px;	
	border:solid 2px #002544;/*optional, change color to match site*/
	background: #ffffff;
}

fieldset {border: 0; padding: 9px 0;color: #002544; margin: 0 18px;}
fieldset div {clear: both;}
.form-header {color: #002544; border-bottom: 1px solid #002544;/*optional, change color to match site*/}
.form-header h3 {margin: 0 0 9px;}
.form-header p {margin: 0 0; padding-bottom: 18px;}
.form-footer {padding-top: 18px; text-align: center; border-top: 1px solid #c6dbed;/*optional, change color to match site*/}
.form-footer button {/*these styles control the look of the button, change as necessary*/
	clear:both;/*do not change, forces button to sit below floated elements*/
	margin: 9px auto;/*do not change, controls positioning*/
	display: block;
	width:125px;
	height:31px;
	background:#c6dbed;/* customize me! */
	border: 1px solid #002544;
	text-align:center;
	line-height:31px;
	color:#002544;/* customize me! */
	font-size:12px;
	font-weight:bold;}
fieldset input, fieldset textarea, fieldset select {line-height: 18px; _height: 36px; padding: 4px 9px 5px; border: 1px solid #002544;}
fieldset input.radio {border: 0;}
fieldset p.verification img {border: 1px solid #002544;}
fieldset label {margin-top: 9px;}
fieldset label, label span {text-align: left; line-height: 18px;}
label.required {background: url(../images/required_note.gif) 100% 0 no-repeat;}
p.required-note {font-weight: bold;}
p.required-note img {display: inline;}
p.radio-float, p.radio-float input {line-height: 27px; vertical-align: middle;}

/* referral form */
div.referral-form {
	margin: 18px 0;
	padding: 10px;
}
.referral-form fieldset {border: 0; }
.referral-form label {/*floats labels left*/
	font-size: 12px;
	display:block;
	font-weight:bold;
	width:45%;
	float:left;
	line-height: 18px;}
.referral-form label span {/*sits below labels; holds instructions*/
	color:#666666;
	display:block;
	font-size:11px;
	font-weight:normal;
	width:100%;}
.referral-form input, .referral-form textarea {
	float:left;
	font-size:12px;
	width:45%;
	margin:9px 0 9px 2%;
	background: #ffffff;
	position: relative;}
.referral-form p.radio, .referral-form p.verification {
	clear: both;
	margin: 9px 0 9px 47%;
	font-size: 12px;}
.referral-form p.radio-float {
	clear: none;
	float:left;
	width: 45%;
	padding:0;
	margin:9px 0 9px 2%;}
.referral-form p.verification {margin-top: 0;}
.referral-form p.radio input, .referral-form p.radio-float input {
	float: none;
	width: auto;
	margin: 0 0 0 2%;
	padding: 0 2px;
	vertical-align: middle;
	line-height: 18px;
	height: 18px;}

/* appointment form */
.appointment-form {
	margin: 18px 0;
	padding: 10px;
}
.appointment-form fieldset {border: 0; }
.appointment-form label {/*floats labels left*/
	font-size: 12px;
	display:block;
	font-weight:bold;
	width:45%;
	float:left;
	margin-top: 9px;
	line-height: 18px;
	}
.appointment-form label span {/*sits below labels; holds instructions*/
	color:#666666;
	display:block;
	font-size:11px;
	font-weight:normal;
	width:100%;}
.appointment-form input, .appointment-form select, .appointment-form textarea {
	float:left;
	font-size:12px;
	width:45%;
	margin:9px 0 9px 2%;
	background: #ffffff;}
.appointment-form textarea {
	height: 162px;
	overflow: auto;
}
.appointment-form p.radio, .appointment-form p.verification {
	clear: both;
	margin: 9px 0 9px 47%;
	font-size: 12px;}
.appointment-form p.radio-float {
	clear: none;
	float:left;
	width: 45%;
	padding:0;
	margin:9px 0 9px 2%;
	vertical-align: middle;
	line-height: 18px;}
.appointment-form span#found-other {display: block; clear: both; width: 100%;}
.appointment-form span#found-other input {margin-left: 47%; _width: 85%; background: #fff0b2; display: block; float: none;}
.appointment-form p.verification {margin-top: 0;}
.appointment-form p.radio input, .appointment-form p.radio-float input {
	float: none;
	width: auto;
	margin: 0 0 0 2%;
	padding: 4px 2px;}

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

/* Login Form */
.login-form {
	width: 275px;
	margin: 18px 0;
	padding: 10px;
	background: #ffffff;}
.login-form fieldset {border: none; padding: 9px 0;}
.login-form label {/*floats labels left*/
	font-size: 12px;
	display:block;
	font-weight:bold;
	text-align:left;
	width:45%;
	float:left;
	line-height: 18px;
	padding-top: 4px;
	margin: 9px 0 9px 0;}
.login-form label span {/*sits below labels; holds instructions*/
	color:#666666;
	display:block;
	font-size:11px;
	font-weight:normal;
	text-align:left;
	width:100%;}
.login-form input {
	float:left;
	font-size:12px;
	padding:4px 2px;
	border:solid 1px #776f47;
	width:45%;
	margin:9px 0 9px 2%;
	background: #ffffff;
	position: relative;}
	
	
/* Errors */

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

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

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

ul#sesame-games li {
clear: both;
display: block;
margin-left:0px;}

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

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

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


#braces-diagram {background: url(../images/braces-diagram/braces-diagram-bg.gif); height: 374px; position: relative; width: 425px}
#braces-diagram a {cursor: help; display: block; position: absolute}
#braces-diagram a:hover {background: transparent}
a#elastic-tie {height: 20px; left: 90px; top: 100px; width: 65px}
a#loop-archwire {height: 20px; left: 150px; top: 80px; width: 100px}
a#archwire {height: 20px; left: 190px; top: 100px; width: 65px}
a#bracket {height: 20px; left: 230px; top: 120px; width: 60px}
a#headgear-tube {height: 20px; left: 335px; top: 100px; width: 90px}
a#coil-spring {height: 20px; left: 150px; top: 300px; width: 65px}
a#tie-wire {height: 20px; left: 235px; top: 325px; width: 65px}
a#band {height: 20px; left: 270px; top: 300px; width: 40px}
a#hook {height: 20px; left: 315px; top: 280px; width: 35px}
a#elastic {height: 40px; left: 355px; top: 280px; width: 45px}
a#print {cursor: pointer; height: 23px; left: 365px; top: 351px; width: 60px}
#braces-diagram a img {border: none; display: block; height: 0; position: absolute; width: 0}
#braces-diagram a:hover img {height: 74px; width: 425px}
a#elastic-tie:hover img {left: -90px; top: -100px}
a#loop-archwire:hover img {left: -150px; top: -80px}
a#archwire:hover img {left: -190px; top: -100px}
a#bracket:hover img {left: -230px; top: -120px}
a#headgear-tube:hover img {left: -335px; top: -100px}
a#coil-spring:hover img {left: -150px; top: -300px}
a#tie-wire:hover img {left: -235px; top: -325px}
a#band:hover img {left: -270px; top: -300px}
a#hook:hover img {left: -315px; top: -280px}
a#elastic:hover img {left: -355px; top: -280px}


/** pro pac **/
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 #000;
	margin: 0 15px 15px 0;
	float: left;
	}
img.left {
	margin: 0 15px 15px 0;
	float: left;
	}

#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;
	}
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;
	}
ul#testimonials {
	margin: 0;
	padding: 0;
	list-style: none;
	list-style-image: none;
	}
	
	
.invisalign-block {
	width: 315px; 
	float: 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;
	}	
/* 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: #334B63; /* 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;
	}
#prettyBox { position:relative; left:200px;}
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: 0 0 10px 0;
	}
#invisalign-before-after div.cycle-detail {
	min-height: 55px;
	clear: both;
	background-color: #fff; /* Customize me */
	padding: 10px;
	color:#001C33;
	margin: 0 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: #005596; /* 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 */
	

	
/* Invisalign Footer */	
#invisalign-footer {
	background: #fff;
	width: 100%;
	margin: 30px 0;
	padding: 0;
	border: solid 1px #333; /* Customize me!! */
	font-size: 11px;
	-moz-border-radius: 5px; /* Optional - you may customize or remove */
	-webkit-border-radius: 5px; /* Optional - you may customize or remove */
	clear: both;
	}
#invisalign-footer h3 {
	background: #97AFC2; /* Customize me!! */
	margin: 0;
	padding: 8px 15px;
	color: #fff; /* Customize me!! */
	font-size: 14px;
	-moz-border-radius: 5px 5px 0 0; /* Optional - you may customize or remove */
	-webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; /* Optional - you may customize or remove */
	}
#invisalign-footer ul li img {
	margin: 0 10px 0 15px;
	float: left;
	}
#invisalign-footer p {
	padding: 0 15px;
	margin: 30px 0 15px 0;
	}
#invisalign-footer ul {
	margin: 15px; 
	padding: 0 0 15px 0;
	list-style: none;
	border: solid 1px #333; /* Customize me!! */
	border-width: 0 0 1px 0;
	}
#invisalign-footer li {
	width: 33%;
	float: left;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	}
#invisalign-footer li a {
	float: left;
	}	
.invisalign-footer-logo {
	margin: 0 30px 0 15px;
	float: left;
	}
/* 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;}