* { margin: 0; outline: none; padding: 0; }
body { background: #654C2A url(../images/bg.gif); }

/* - - - - - - - - - - TEXT - - - - - - - - - - */
body, form, input, textarea { color: #666; font-family: arial, sans-serif; font-size: 12px; }
blockquote { margin: 10px 30px; padding: 0; }
p.breadcrumbs { color: #000; font-size: 10px; line-height: 10px; }
p { line-height: 18px; margin: 10px 0; }
p.address { font-size: 11px; color: #8B8D09; }
p.flash { color: #F00; line-height: 18px; padding: 10px; }
p.top-link { clear: both; font-size: 11px; line-height: 14px; text-align: right; }
div.hr { background: #8B8D09; clear: both; height: 1px; margin: 20px 0; width: 100%; }
div.hr hr { display: none; }
#content ul { font-size: 11px; line-height: 12px; list-style: disc; list-style-image: url(../images/list.gif); margin: 10px 40px; }
#content ul li { margin: 10px 0; }
#content ul li ul { line-height: 12px; list-style: circle; list-style-image: url(../images/list.gif); margin: 10px 30px; }
#content ul li ul li { margin: 10px 0; }
#content ul.sitemap { color: #000; font-size: 12px; line-height: 12px; list-style: disc; list-style-image: url(../images/list.gif); margin: 10px 20px; }
#content ul.sitemap a { color: #000; }
#content ul.sitemap li { margin: 10px 0; }
#content ul.sitemap ul { color: #000; font-size: 12px; line-height: 12px; list-style: circle; list-style-image: url(../images/list.gif); margin: 10px 30px; }
#content ul.sitemap ul a { color: #000; }
#content ul.sitemap ul li { margin: 10px 0; }

#content #patient-forms ul { margin: 10px 30px; }

#nav-wrapper p, #nav-wrapper h3 { margin-left: 6px; }
#footer p { color: #FFF; font-size: 11px; line-height: 14px; text-transform: lowercase; }

/* - - - LINKS - - - */
a { color: #000; text-decoration: none; }
a:hover { text-decoration: underline; }
p.breadcrumbs a { color: #000; font-size: 10px; line-height: 10px; text-decoration: none; }
p.breadcrumbs a:hover { text-decoration: underline; }
p.top-link a { color: #000; text-decoration: none; }
p.top-link a:hover { color: #000; text-decoration: underline; }
.flash a { color: #F00; font-weight: bold; }
#footer a { color: #FFF; text-decoration: none; }
#footer a:hover { text-decoration: underline; }

/* - - - HEADERS - - - */
h1 { background: no-repeat; height: 50px; overflow: hidden; text-indent: -9999px; }
h1.home { background: no-repeat; float: left; height: 169px; margin: 0 10px 10px 0; overflow: hidden; text-indent: -9999px; width: 219px; }
h2 { color: #652D89; font-family: arial, sans-serif; font-size: 18px; margin: 10px 0; }
h3 { color: #8B8D09; font-family: arial, sans-serif; font-size: 14px; margin: 10px 0; }
h4 { color: #C3C695; font-family: arial, sans-serif; font-size: 11px; margin: 5px 0; }

/* - - - - - - - - - - IMAGES - - - - - - - - - - */
img { border: 0; display: block; }
img.side { clear: both; margin: 0 auto 10px; }
img.callout { clear: both; margin: 10px 0; }
img.center { clear: both; margin: 0 auto; }
img.left { clear: left; float: left; margin: 0 20px 20px 0; }
img.left-nofloat { clear: left; margin: 0 20px 20px 0; }
img.right { clear: right; float: right; margin: 0 0 20px 20px; }
img.auto { clear: right; float: right; margin: 0 0 20px 20px; }
.flash img { float: right; padding: 10px; }
.flash-replaced .alt { display: block; height: 1000px; position: absolute; overflow: hidden; width: 0; }
.map { border: 1px solid #652D89; margin: 20px 0; }

/* - - - - - - - - - - LAYOUT - - - - - - - - - - */
#container-wrapper { background: url(../images/container-wrapper-bg.png) repeat-y; margin: 0 auto; width: 778px; }
#container { background: url(../images/container-bg.gif) no-repeat bottom; clear: both; width: 778px; }
#content-wrapper { margin: 0 auto; width: 778px; }
#content { float: left; margin: 10px 0 0 10px; width: 580px; }
#header { margin: 0 auto; width: 778px; }
#header a { background: url(../images/header.png) no-repeat; display: block; height: 118px; overflow: hidden; text-indent: -9999px; width: 778px; }
#flash-home-1 { clear: right; float: left; height: 169px; margin-bottom: 10px; width: 350px; }
#flash-home-2 { float: right; height: 169px; margin: 0 0 20px 10px; width: 199px; }
#flash-the-damon-system { height: 295px; margin: 20px auto ; width: 360px; }
#flash-the-damon-system-comparison { height: 165px; margin: 0 auto; width: 250px; }
#footer { background: url(../images/footer-bg.gif) no-repeat top; clear: both; margin: 0 auto; padding: 30px 0; text-align: center; width: 778px; }

/* - - - - - - - - - - - - - - - - - - - - VERTICAL NAVIGATION - - - - - - - - - - - - - - - - - - - - */

/* - - - - - - - - - - NAVIGATION - - - - - - - - - - */
#nav-wrapper { float: left; padding: 10px 0 0 20px; width: 147px; }
#nav { display: inline; height: 155px; width: 147px; }
#nav ul { background: url(../images/nav/nav-bg.gif) no-repeat; height: 226px; list-style: none; padding-top: 8px; width: 147px; }
#nav li { float: left; margin-bottom: 3px; }
#nav a { display: block; height: 21px; overflow: hidden; text-indent: -9999px; width: 147px; }

/* - - - NAVIGATION IMAGES - - - */
a#about-our-office { background: url(../images/nav/about-our-office.gif); }
a#about-orthodontics { background: url(../images/nav/about-orthodontics.gif); }
a#new-patients { background: url(../images/nav/new-patients.gif); }
a#braces-101 { background: url(../images/nav/braces-101.gif); }
a#emergency-care { background: url(../images/nav/emergency-care.gif); }
a#the-game-room { background: url(../images/nav/the-game-room.gif); }
a#contact-us { background: url(../images/nav/contact-us.gif); }
a#damon-system-info { background: url(../images/nav/damon-system.gif); }
a#invisalign-info { background: url(../images/nav/invisalign.gif); }

/* - - - NAVIGATION ROLLOVER EFFECTS - - - */
#nav ul a:hover, #nav ul li.active a { background-position: 0 -21px; }
#nav ul li:hover #about-our-office, #nav ul li.sfhover #about-our-office,
#nav ul li:hover #about-orthodontics, #nav ul li.sfhover #about-orthodontics,
#nav ul li:hover #braces-101, #nav ul li.sfhover #braces-101,
#nav ul li:hover #damon-system-info, #nav ul li.sfhover #damon-system-info,
#nav ul li:hover #invisalign-info, #nav ul li.sfhover #invisalign-info,
#nav ul li:hover #contact-us, #nav ul li.sfhover #contact-us { background-position: 0 -21px; }

/* - - - - - - - - - - - - - - - - - - - - VERTICAL TEXTUAL SUBNAVIGATION - - - - - - - - - - - - - - - - - - - - */

/* - - - SUBNAVIGATION - - - */
#nav ul li ul { background: #B8BB8A; height: auto; left: -9999px; list-style: none; position: absolute; z-index: 100; width: 197px; }
#nav ul li:hover ul, #nav ul li.sfhover ul { left: auto; margin: -21px 0 0 147px; padding: 0; }
#nav ul li ul li { display: block; margin: 0; }
#nav ul li ul li a { color: #652D89; font-size: 12px; height: 15px; line-height: 15px; padding: 6px 10px; text-decoration: none; text-indent: 0; width: 177px; }

/* - - - SUBNAVIGATION ROLLOVER EFFECTS - - - */
#nav ul li ul li a:hover, #nav ul li ul li.active a { background: #652D89; color: #FFF; }

/* - - - - - - - - - - - - - - - - - - - - HORIZONTAL NAVIGATION - - - - - - - - - - - - - - - - - - - - */

/* - - - - - - - - - - NAVIGATION - - - - - - - - - - */
#topnav { margin: 96px 0 0 407px; position: absolute; width: 351px; }
#topnav ul { list-style: none; width: 351px; }
#topnav li { float: left; }
#topnav a { display: block; height: 22px; margin-right: 3px; overflow: hidden; text-indent: -9999px; width: 114px; }

/* - - - NAVIGATION IMAGES - - - */
a#home { background: url(../images/nav/home.gif); }
a#patient-login { background: url(../images/nav/patient-login.gif); }
a#doctor-login { background: url(../images/nav/doctor-login.gif); }

/* - - - NAVIGATION ROLLOVER EFFECTS - - - */
#topnav ul a:hover, #topnav ul li.active a { background-position: 0 -22px; }

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

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

ul#sesame-games li {
clear: both;
display: block}

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}

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

/* Global form styles */
fieldset {border: none; padding: 9px 0;}
fieldset div {clear: both;}
.form-header {border-bottom: 1px solid #652D89;/*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 #652D89;/*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:#652D89;/* customize me! */
	border: none;/* customize me! */
	text-align:center;
	line-height:31px;
	color:#ffffff;/* customize me! */
	font-size:12px;
	font-weight:bold;
	text-transform:uppercase;}

/* referral form */
.referral-form {
	margin: 20px auto;
	width: 500px; 
	padding: 10px;
	border: solid 1px #652D89;/*optional, change color to match site*/
	background:#fafafa;}/*optional, change color of background*/
.referral-form fieldset {border: none; padding: 9px 0;}
.referral-form label {/*floats labels left*/
	font-size: 12px;
	display:block;
	font-weight:bold;
	text-align:right;
	width:200px;
	float:left;
	line-height: 18px;
	padding-top: 4px;}
.referral-form label span {/*sits below labels; holds instructions*/
	color:#666666;
	display:block;
	font-size:11px;
	font-weight:normal;
	text-align:right;
	width:200px;}
.referral-form input, .referral-form textarea {
	color:#000;
	float:left;
	font-size:12px;
	padding:4px 2px;
	border:solid 1px #652D89;/* customize me! */
	width:200px;
	margin:9px 0 9px 10px;
	background: #FFF;}
.referral-form p.radio, .referral-form p.verification {
	clear: both;
	margin: 9px 0 9px 210px;
	font-size: 12px;}
.referral-form p.radio-float {
	clear: none;
	float:left;
	width: 200px;
	padding:0;
	margin:9px 0 9px 0;}
.referral-form p.verification {margin-top: 0;}
.referral-form p.verification img {border: 1px solid #652D89;}/* customize me! */
.referral-form p.radio input, .referral-form p.radio-float input {
	float: none;
	width: auto;
	margin: 0 0 0 10px;
	padding: 4px 2px;}
	
	
	.img-right { margin: 0 0 20px 0; float: right; clear: right; margin-left: 10px; }  

.img-center { margin: 0 0 20px 0; text-align:center; width: 100%; }  

.text-left { margin: 0 0 20px 0; float: left; clear: left; width: 300px; }  
.text-right { margin: 0 0 20px 0; float: right; clear: right; width: 300px; }  
.img-left {
	float: left;
	clear: left;
	margin-top: 0;
	margin-right: 20px;
	margin-bottom: 20px;
	
} 
.video { display: block; /* 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 .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: #652d89; /* 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;
  margin-top:-30px;
  margin-bottom:75px;
}
#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: #652d89; /* 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 */
  color:#FFFFFF;
}
#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 #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: #652d89; /* 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;
}
#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;}


/* Social Networks */
/* Social Networks */
#social-networks
{
	width: 145px;
	display: block;
	padding-bottom: 10px;
}

#social-networks img
{
	display: inline;
	margin: 0;
	padding: 0 5px 0 0;	
}

/* Cycle Office Tour */
#slideshow-container ul.slideshow {
  list-style: none; 
  width: 462px; 
  height: 352px;
  margin: 0; 
  padding: 0;
  overflow: hidden;
}
#slideshow-container {
  background: #c3c695; /* Customize me */
  border: solid 1px #333; /* Customize me */
  border-radius: 5px; /* Optional - you may customize or remove */
  -moz-border-radius: 5px; /* Optional - you may customize or remove */
  -webkit-border-radius: 5px; /* Optional - you may customize or remove */
  width: 462px; 
  padding: 10px;
  line-height: 18px;
  margin: 30px auto;
}
#slideshow-container div#caption {
  min-height: 18px;
  clear: both;
  background-color: #fff; /* Customize me */
  color: #333; /* Customize me */
  padding: 10px;
  margin: 10px 0 0 0;
  border: solid 1px #333; /* Customize me */
  border-radius: 0 0 5px 5px; /* Optional - you may customize or remove */
  -moz-border-radius: 0 0 5px 5px; /* Optional - you may customize or remove */
  -webkit-border-bottom-left-radius: 5px; /* Optional - you may customize or remove */
  -webkit-border-bottom-right-radius: 5px; /* Optional - you may customize or remove */
}
#slideshow-container ul.slideshow img {
  width: 460px; 
  height: 350px;
  margin: 0;
  border: solid 1px #333; /* Customize me */
}
.office-tour-nav {
  background-color: #fff; /* Customize me */
  margin: 0 0 10px 0;
  padding: 5px 3px;
  border: solid 1px #333; /* Customize me */
  border-radius: 5px 5px 0 0; /* Optional - you may customize or remove */
  -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 */
}
.office-tour-nav a {
  text-decoration: none; 
  font-size: 12px; 
  padding: 5px; 
  margin: 0 3px; 
  color: #666;
}
.office-tour-nav a.activeSlide, .office-tour-nav a:hover {color: #8d24d0; font-weight:bold;}