/* Play nice with the WWW, validate me! */
/* clear floats */
* {
	margin: 0;
	padding: 0;
}/* sets all elements margin and padding to 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 {/* For IE =< 6 */
    height: 1%;
}

.image-float-left {
	float: left;
	clear: left;
	display: block;
	margin-right:10px;
	margin-bottom:5px;
	border:solid 1px #015081;
}

.i-float-left {
	float: left;
	clear: left;
	margin-right:10px;
	margin-bottom:5px;
}

.image-float-right {
	float: right;
	clear: right;
	display: block;
	margin-left:10px;
	margin-bottom:5px;
	border:solid 1px #015081;
}


.hide {display: none;}
img { border: none; } 


/* Image Replacement -- add class="replace" to root element, i.e. <p> and add a bg image*/

.replace { letter-spacing : -1000em; }
/* Just for Opera, but hide from MacIE */
/*\*/html>body .replace { letter-spacing : normal; text-indent : -999em; overflow : hidden;}
/* End of hack */

.replace ul, .replace ul li {letter-spacing: 0; text-indent: 0; overflow: auto;}


html {
	/*overflow: -moz-scrollbars-vertical;*/
	background-image: url(../images/bg_repeat.jpg);
}

	
body {
	margin: 0px;
	padding:0px;
	background-image: url(../images/bg.jpg);
	background-repeat: repeat-x;
	background-position: center top;
}
hr{
	color: #012339;
	margin-bottom: 10px;
	margin-top: 8px;
	clear:both;
}

iframe {
	border: 0;
}
a.vTrigger:link, a.vTrigger:visited,
a.vControl:link, a.vControl:visited {
	font-size: 24px;
}

blockquote {
	padding-left: 23px;
}
p{
	margin-bottom:18px;
	color: #012339;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 20px;
	font-weight: normal;
}
a:link, a:visited{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight:normal;
	color:#012339;
	text-decoration: underline;
}
a:hover{
	color:#015081;
}

li{
	color: #012339;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	margin-left: 40px;
	list-style: inside;
	line-height:20px;
}

ul{
	margin-bottom:18px;
}
ol{
	margin-bottom:18px;
}
ol li{
	color: #012339;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	margin-left: 85px;
	list-style: outside;
	line-height:20px;
}

.top{
clear:both;
	color: #015081;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-align:right;
}
.top p{
margin-bottom:-19px;
}
.top a:link, .top a:visited{
	color: #015081;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: right;
	font-weight: bold;
	text-decoration: none;
	margin-right:58px;
	
}
.top a:hover{text-decoration: underline;
}

h1{
	color: #9c6306;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 28px;
	line-height:27px;
	font-weight: bold;
}

.test h1 {
	color: #009ddc;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 28px;
	line-height:27px;
	font-weight: bold;
	margin-bottom:12px;
}

h2{
	color: #015081;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bold;
	margin-bottom:12px;
}
.home{
	font-style:italic;font-size: 15px; font-weight:bold; color:#015081;font-family: Arial, Helvetica, sans-serif; margin-bottom:18px;
}
h3{
	color: #012339;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	margin-bottom:12px;
}

h4{
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:14px;
	margin-bottom:12px;
}

#footer{
	width:988px;
	height:185px;
	clear:both;
	background-image: url(../images/footer_bkd.gif);
}
	
#footer .inner{
padding-right:55px;
padding-top:38px;	
}

h5{
	color: #b9cdd7;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight:normal;
	line-height: 17px;
	padding-top:20px;

}
#footer p {margin-top:18px;}
#footer a{font-weight:bold;
color:#ebf6fb;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	text-decoration: underline;
}
#footer a:hover{
color:#ffffff;
}
#footer-nav{width:200px;
color:#b9cdd7;
float:left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight:bold;margin-left:55px; margin-right:25px;}
#footer-nav a {
color:#b9cdd7;
line-height:18px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
font-weight:bold;
text-decoration: underline;	
}
#footer-nav a:hover{
color:#ffffff;
}

ul#nav {list-style: none;}
ul#nav a {display: block; padding: 0; width: 248px; margin:0;}

ul#nav, #nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
	position:absolute;
	left:0px;
	top:220px;
	z-index:10;
}

ul#nav li {display: inline;
margin:0;float:none;}
ul#nav li:hover ul, ul#nav li.sfhover ul {
	left: auto;
	display: block;
}

ul#nav li ul {
	position: absolute;
	left: -999em;
	margin-left:230px;
	top:auto;
	margin-top:-27px;
	z-index:10;
	border: 2px solid #009ddc;
}

ul#nav ul li a {
	position: relative;
	background:#bee2f2;
	height:28px;
	padding: 8px 4px 2px 8px;
	color: #015081;
	font-size:13px;
	font-weight: normal;
	text-decoration: none;
	width:155px;
}

ul#nav ul li a:hover {
background: #009ddc; color:#ffffff;}

#nav li:hover ul, #nav li.sfhover ul {
left: auto;} 


#office,#new,#ortho,#braces,#er,#contact,#home,#treat,#faqs,#invis {
	overflow: hidden; 
	text-indent: -999em; /* Indents the rich-text so it does not show */
	height: 248px;
	cursor: pointer;
}

/* Set the image for each nav item */
#office{background: url(../images/btn_office.jpg);height:25px;}
#new {background: url(../images/btn_new.jpg);height:28px;}
#ortho {background: url(../images/btn_ortho.jpg);height:28px;}
#treat {background: url(../images/btn_treat.jpg);height:28px;}
#invis{background: url(../images/btn_invis.jpg);height:28px;}
#braces {background: url(../images/btn_braces.jpg);height:28px;}
#er {background: url(../images/btn_er.jpg);height:30px;}
#faqs {background: url(../images/btn_faq.jpg);height:28px;}
#contact {background: url(../images/btn_contact.jpg);height:25px;}
#home{background: url(../images/btn_home.jpg);height:27px;}

/* Shift the image position up to show the active state */
#nav li:hover a, #nav li.sfhover a, #nav .active{
	background-position:-248px 0px}

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

ul#nav2 {list-style: none;}
ul#nav2 a {display: block; padding: 0; height: 38px; margin:0 0 0 5px;}

ul#nav2, #nav2 ul {
	padding: 0;
	margin: 0;
	list-style: none;
	position:absolute;
	left:522px;
	top:74px;
	z-index:10;
}

ul#nav2 li {display: inline;
margin:0; float:left;}
ul#nav2 li:hover ul, ul#nav2 li.sfhover ul {
	left: auto;
	display: block;
}

#nav2 li:hover ul, #nav2 li.sfhover ul {
left: auto;} 


#doclogin,#login,#confirmappt {
	overflow: hidden; 
	text-indent: -999em; /* Indents the rich-text so it does not show */
	height: 38px;
	cursor: pointer;
}

/* Set the image for each nav2 item */
#doclogin {background: url(../images/btn_doclogin.png);width:133px;}
#login {background: url(../images/btn_login.png);width:133px;}
#confirmappt {background: url(../images/btn_confirm.png);width:181px;}

/* Shift the image position up to show the active state */
#nav2 li:hover a, #nav2 li.sfhover a, #nav2 .active{
	background-position:0px -38px}

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

#container{
	width: 988px;
	margin: auto;
	position:relative;
	background-image: url(../images/container_bkd.gif);
	background-repeat: repeat-y;
	
}
#content {
	width: 988px;
	background-image: url(../images/inner_bkd.gif);
	background-repeat: no-repeat;
	background-position: left bottom;
	padding-bottom:5px;
}

#content .inner {
	padding-top:25px;
	padding-right:58px;
	padding-left:280px;
	background-image: url(../images/content_bkd.gif);
	background-repeat: no-repeat;
	background-position: left top;
	padding-bottom:50px;
	min-height:465px;		
}
*html #content .inner {
	padding-top:25px;
	padding-right:58px;
	padding-left:280px;
	background-image: url(../images/content_bkd.gif);
	background-repeat: no-repeat;
	background-position: left top;
	padding-bottom:50px;
	height:465px;		
}

#header{
	width: 988px;
	height: 487px;
	background-image: url(../images/header_bkd.jpg);
	background-repeat: no-repeat;
	background-position: left top;
}

#logo {
position:absolute;
	height:189px;
	width:399px;
	left:10px;
	top:0px; 
	}

#logo a {
	display: block;
	height:189px;
	width:399px;
	line-height: 0px;
	text-indent: -999em;
	background: url(../images/logo.jpg) no-repeat left;}

#createaccount {
	position:absolute;
	top:67px;
	right:12px;
}

#nav-sub{
	font-size: 12px;
	text-align:center;
	font-family: Arial, Helvetica, sans-serif;
	margin-bottom:20px;
	position:relative;
	right:0px;
	color:#015081;
	line-height:16px;font-weight: bold;
}
#nav-sub a{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #015081;
	text-decoration:none;
	font-weight: bold;
}
#nav-sub a:hover, #nav-sub .active{
	text-decoration:underline;}
	
.flash-replaced .alt {
display: block;
width: 0px;
height: 0px;
position: absolute;
overflow: hidden;}

.address{
	position:absolute;
	margin-left:538px;
	top:0px;
	font-size:15px;
	margin-top:3px;
	color:#ffffff;
}
.callout{position:absolute;
left:26px;
top:510px;
width:222px;
}



#flash-brushing-and-flossing-ortho {
width: 500px;
height: 300px;
margin: 10px auto;}

#flash-braces-diagram {
	height: 375px;
	margin: 10px auto 30px;
}
#flash-brace-painter{	margin: 10px auto 30px;height: 430px;}


	
/* The Game Room */
div#sesame-game {background: #000; line-height: 0; margin: 10px auto 30px auto; text-align: center; width: 400px}
ul#sesame-games {list-style: none; margin: 0 18px 0 0; padding: 0}
ul#sesame-games li {clear: both; display: block; list-style:none; margin-left:0px;}
ul#sesame-games img {border:solid 1px #015081; float: right; margin: 0 0 10px 10px}
ul#sesame-games a.button {float:right; height:85px; width:200px}
ul#sesame-games p { padding-bottom: 1em}


.sitemap li { list-style:none; margin-left:15px; }
.sitemap ul { margin-bottom:0px; }
.sitemap li a:link, .sitemap li a:visited{color: #015081; font-weight:normal;
text-decoration:none;}
.sitemap li a:hover{
text-decoration:underline;}


#flash-homepage{position:absolute;
top:198px;
width:703px;
padding-left:252px;}


#pic{position:absolute;
top:161px;
padding-left:425px;}

.centernav {
	text-align:center;
	margin-bottom:4px;
	margin-top:0;
	font-weight:bold;
	color:#015081;
}

.img-left { margin: 0 20px 20px 0; float: left; clear: left; }

.img-right {
  margin: 0 0 20px 20px;
  float: right;
  clear: right;
}

.border { border: solid 4px #70c5e9; /* Customize me! */ /* Add more nifty stuff in here if you like */ }

/* 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 Styles ------------------- */
#pro-pack .border {
  border: solid 1px #333; /* Customize me!! */
}
#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: 0 0 20px 20px;
  float: right;
  clear: right;
}
#pro-pack .img-left {
  margin: 0 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 {
 list-style:none; list-style-image:none;
}
#pro-pack .invisalign-block {
  width: 315px; 
  float: left;
  margin-top:-5px;
}



/* Invisalign Teen ------------------ */
#pro-pack span.indent {padding-left: 40px;}
#pro-pack #invisalign-sidebar {
  background: #fff;
  width: 275px;
  margin: 0 0 20px 20px;
  padding: 0;
  border: solid 1px #333; /* Customize me! */
  line-height: 18px;
  font-size: 11px;
  float: right;
  clear: right;
}
#pro-pack #invisalign-sidebar a {
  color: #036; /* Customize me!! */
}
#pro-pack #invisalign-sidebar h3 {
  background: #448dba; /* Customize me!! */
  margin: 0;
  padding: 20px;
  font-size: 16px; /* Customize me!! */
  font-weight: bold; /* Customize me!! */
  color: #fff; /* Customize me!! */
}
#pro-pack #invisalign-sidebar p {
  padding: 0 15px;
  margin: 15px 0;
  font-size: 11px;
  line-height: 16px;
}
#pro-pack .thumb {
  border: solid 1px #333; /* Customize me!! */
  margin: 0 10px 15px 0;
  float: left;
  clear: left;
}

/* Invisalign Videos ------------------- */
#pro-pack div.invisalign-flash {
  background: url(/sesame_media/images/invisalign-pro-package/invisalign-video-bg.jpg) no-repeat;
  width: 450px;
  height: 250px;
  border: solid 1px #333; /* Customize me!! */
  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;
  background-color: #448dba; /* Customize me */
  border: solid 1px #333; /* Customize me */
  border-radius: 5px; /* Optional - you may customize or remove - Does not work in IE */
  -moz-border-radius: 5px; /* Optional - you may customize or remove - Does not work in IE */
  -webkit-border-radius: 5px; /* Optional - you may customize or remove - Does not work in IE */
}
#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;
  border: solid 1px #333; /* Customize me */
}
#pro-pack ul#before-after-cycle li  {
list-style:none;
list-style-image:none;
margin-left:0px;
}
#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;
  background-color: #fff; /* Customize me */
  color: #333; /* Customize me */
  padding: 10px;
  margin: 0 10px 0 0;
  border: solid 1px #333; /* Customize me */
  border-radius: 5px; /* Optional - you may customize or remove - Does not work in IE */
  -moz-border-radius: 5px; /* Optional - you may customize or remove - Does not work in IE */
  -webkit-border-radius: 5px; /* Optional - you may customize or remove - Does not work in IE */
}
#pro-pack #invisalign-before-after div.before-after-nav {
  background: #fff; /* Customize me */
  _width: 478px;
  margin: 0 10px 10px 0;
  padding: 5px 3px;
  border: solid 1px #333; /* Customize me */
  border-radius: 5px 5px 0 0; /* Optional - you may customize or remove - Does not work in IE */
  -moz-border-radius: 5px 5px 0 0; /* Optional - you may customize or remove - Does not work in IE */
  -webkit-border-top-left-radius: 5px; /* Optional - you may customize or remove - Does not work in IE */
  -webkit-border-top-right-radius: 5px; /* Optional - you may customize or remove - Does not work in IE */
}
#pro-pack #invisalign-before-after .before-after-nav a {
  text-decoration: none; 
  font-size: 12px; 
  padding: 5px; 
  margin: 0 3px;
  outline: none;
  color: #333; /* Customize me */
}
#pro-pack #invisalign-before-after .before-after-nav a.activeSlide, #pro-pack #invisalign-before-after .before-after-nav a:hover {color: #009EC7;} /* Customize me */

/* Invisalign Footer -------------------- */	
#pro-pack #invisalign-footer {
  background: #fff;
  width: 99%;
  margin: 30px 0;
  padding: 0;
  border: solid 1px #333; /* Customize me!! */
  font-size: 11px;
  border-radius: 5px; /* Optional - you may customize or remove - Does not work in IE */
  -moz-border-radius: 5px; /* Optional - you may customize or remove - Does not work in IE */
  -webkit-border-radius: 5px; /* Optional - you may customize or remove - Does not work in IE */
  clear: both;
}
#pro-pack #invisalign-footer h3 {
  background: #448dba; /* Customize me!! */
  margin: 0;
  padding: 10px 20px;
  color: #fff; /* Customize me!! */
  font-size: 14px;
  border-radius: 5px 5px 0 0; /* Optional - you may customize or remove - Does not work in IE */
  -moz-border-radius: 5px 5px 0 0; /* Optional - you may customize or remove - Does not work in IE */
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px; /* Optional - you may customize or remove - Does not work in IE */
}
#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: solid 1px #333; /* Customize me!! */
  border-width: 0 0 1px 0;
}
#pro-pack #invisalign-footer li {
  width: 33%;
  float: left;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  list-style:none; list-style-image: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;
  background: #eee /* Customize this color!! */ url(/sesame_media/images/invisalign-pro-package/callout-sm.png) no-repeat;
  border: solid 1px #000; /* Customize me!! */
  border-radius: 3px; /* Optional - you may customize or remove - Not supported in IE*/
  -moz-border-radius: 3px; /* Optional - you may customize or remove - Not supported in IE*/
  -webkit-border-radius: 3px; /* Optional - you may customize or remove - Does not work in IE */
  margin: 0 0 18px; /* Customize me!! */
  padding: 0;
  display: block;
  text-indent: -9999px;
  /* Uncomment the following lines if using absolute positioning */
  /* top: 390px; Customize me!! */
  /* left: 350px; Customize me!! */
  /* position: absolute; */
  /* z-index: 2; Adjust this number if needed */
}
#pro-pack-callout-sm a {
  width: 123px;
  height: 63px;
  display: block;
}
#pro-pack-callout-lg {
  width: 223px;
  height: 128px;
  background: #eee /* Customize this color!! */ url(/sesame_media/images/invisalign-pro-package/callout-lg.png) no-repeat;
  border: solid 1px #000; /* Customize me!! */
  border-radius: 3px; /* Optional - you may customize or remove - Not supported in IE*/
  -moz-border-radius: 3px; /* Optional - you may customize or remove - Does not work in IE */
  -webkit-border-radius: 3px; /* Optional - you may customize or remove - Does not work in IE */
  margin: 0 0 18px;
  padding: 0;
  display: block;
  text-indent: -9999px;
  /* Uncomment the following lines if using absolute positioning */
  /* top: 470px; Customize me!! */
  /* left: 350px; Customize me!! */
  /* position: absolute; */
  /* z-index: 2; Adjust this number if needed */
}
#pro-pack-callout-lg a {
  width: 223px;
  height: 128px;
  display: block;
}

/* Clear Fix --------------------- */
.clear {clear: both;}
.cf:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.cf {display: inline-block;} /*this trips hasLayout for ie7*/
.cf {display: block;} /*this returns it back to normal*/
* html .cf {height: 1px;}



div#preloaded-images {
   position: absolute;
   overflow: hidden;
   left: -9999px; 
   top: -9999px;
   height: 1px;
   width: 1px;
}

/* Coronavirus Update --------------------- */
#coronavirus-update {
    background: #e12118;
    color: #fff;
    text-decoration: none;
    padding: 10px 25px;
    position: fixed;
    bottom: 0;
    left: 10px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    -ms-transition-duration: 0.3s;
    transition-duration: 0.3s;
    z-index: 3000;
}
.coronavirus-update #coronavirus-update {display:none}
#coronavirus-update a {
	color:#FFF;
	font-size: 20px;
	text-decoration: none;
}
#coronavirus-update:hover {
    background: #c40a01;
    color: #fff;
}
.CoronaClose {
  cursor: pointer;
  position: absolute;
  top: 21%;
  right: 0%;
  padding: 0px 8px;
  transform: translate(0%, -50%);
  color:#FFF;
}

/*-----------------------------------------------
	Forms 
	*/
	/* Global form styles */
	div.referral-form, div.appointment-form, div.comments, div.contact-us-form {
		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 {}
			fieldset {font-size: 16px; clear: both; margin: 9px 0 0;}
				#content fieldset ul {margin: 9px 0;}
					fieldset ul li, fieldset ol li {list-style: none;}
					fieldset li {
						clear: both; 
						margin: 3px 0; 
						padding: 5px 0 4px 4%;  
						overflow: auto; 
						height: auto;
						position: relative;
						}
					fieldset li:hover {/* this is the hover color change of li */}
					fieldset li input:hover, fieldset li input:focus,
					 fieldset li select:hover, fieldset li select:focus, 
					 fieldset li textarea:hover, fieldset li textarea:focus {
					 	/* background: #f1f1f1;customize me - this is the hover color change of form fields*/
					 	/* outline-color: #537197;customize me */
					 	}
						fieldset li h3 {font-size: 12px; line-height: 18px; margin: 0;}
						fieldset li div {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: 40%;}
						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: 40%;}
							li div.input-comments textarea {height: 63px; overflow: auto;}
						fieldset li div.input-captcha {width: 40%;}
						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; 
								margin-bottom: 9px;
								font-size: 11px; 
								color: #022239;/*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 .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:#b9cdd7;/* customize me! */
							border: 1px solid #539ac5;
							line-height: 34px;
							color:#064e81;/* 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(../forms/validate_error2.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(../forms/validate_ok2.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;}

/* Common Treatments */
div.box {
  background-color: #ff99ff; /* 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 */
  float: right;
  clear: right;
  width: 334px;
  padding: 5px 0 5px 5px;
  margin: 0 0 20px 20px;
}
div.box img {
  border: solid 1px #333; /* Customize me! */
  margin-right: 5px;
  float: left;
}
div.box p {
  float: left;
  width: 50%;
  margin: 0;
  padding: 0;
}

/* This styled div acts as the hr for most browsers */
div.hr {
  height: 0px;
  background-color: #eee; /* Customize me! */
  border: solid 1px #eee; /* Customize me! */
  border-width: 1px 0 0 0; /* Customize me! */
  margin: 20px 0;
  padding: 0;
  clear: both;
}
/* This is the backup for screen readers */
hr {
  height: 0px;
  background-color: #eee;
  border: solid 1px #eee;
  border-width: 1px 0 0 0;
  clear: both;
}

p.before-after-text {width:50%;float:right;margin-top:-5px;}
.before-after-box {width:50%;clear:both;}
.before-after-image {width:40%;float:left;padding-right:20px;margin-bottom:32px;}
.before-after-image span {display:block;text-align:center;font-family: Arial, Helvetica, sans-serif;font-size: 13px;color: #012339;}   
.before-after-image img {border: 1px solid rgba(0,0,0,.3);max-width:100%}

