/* Reset */
* {margin: 0; padding: 0;}
img {display: block; border: 0;}
.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;}

/* Layout */
body {background: #d3e2ed; font-size: 100%; line-height: 1em; font-family: "Trebuchet MS", Verdana, Arial; color: #003744;}
#header-wrap {background: url(images/header-wrap-bg.jpg) repeat-x; width: 100%; height: 134px;}
#header {width: 900px; padding: 0 15px; position: relative;}
#content-wrap {background: #f1f3f5 url(images/body-bg.jpg) top left no-repeat; width: 100%;}
#content {width: 900px; font-size: .75em; padding: 0; margin-left: 15px; padding: 15px 0 0 0;}
#footer-wrap {background: #d3e2ed url(images/footer-wrap-bg.gif) repeat-x; width: 100%; clear: both;}
#footer {background: url(images/footer-bg.gif) no-repeat; width: 547px; height: 120px; padding-top: 10px; margin-left: 141px; text-align: center; font-size: .63em; color: #7e3b00;}
.sidebar {background: #fff; width: 270px; display: block; border: solid 1px #610000; float: right; margin: 5px 0 15px 15px; padding: 5px;}

/* Headings */
h1.logo {background: url(images/apton-logo.gif); width: 284px; height: 99px; margin: 0; padding: 0; overflow: hidden; text-indent: -999em;}
h1.logo a {width: 284px; height: 99px; display: block;}
h2.home {font-size: 1.17em; color: #7e3b00; margin-bottom: 10px; width: 405px;}
h1 {font-size: 1.83em; color: #7e3b00; margin-bottom: 10px; line-height: normal;}
h2 {font-size: 1.33em; color: #003744; margin-bottom: 10px;}
h3 {font-size: 1em;}
h4 {font-size: 1em; font-weight: normal; margin: 0 auto; padding-bottom: 10px; width: 60%;}

/* Lists */
ol, ul {margin: 0 0 10px 15px;}
dl.logos, dl.logos dt, dl.logos dd {list-style: none; margin: 0; padding: 0;}
dl.logos {border: 1px solid #CCC; border-width: 0 0 1px 1px; margin: 10px 0 5px 0; padding: 10px 0 5px 10px; width: 60%;}
dl.logos dd {margin-bottom: 10px; padding: 10px 0 5px 0;}
dl.logos span {font-size: 14px; font-weight: bold; line-height: normal;}

/* Links */
a {color: #003744;}
a:hover {color: #7e3b00;}
#footer a {color: #7e3b00; text-decoration: none;}
#footer a:hover {text-decoration: underline;}
#sesame {margin-bottom: 20px;}
a.video-link {padding: 3px 27px 3px 0; background: url(images/icon_video.gif) 100% 50% no-repeat;}
a.pdf-link {padding: 3px 27px 3px 0; background: url(images/icon_pdf.gif) 100% 50% no-repeat;}

/* Text */
#footer p {margin: 0;}
p {margin: 0 0 10px 0;}
p.breadcrumbs {float: right;}
blockquote {margin: 0 30px 10px 30px;}

/* Images */
.img-right {border: solid 1px #610000; margin: 5px 0 15px 15px; float: right; clear: right;}
.img-left {border: solid 1px #610000; margin: 5px 15px 15px 0; float: left; clear: left;}
#invisalign-foot {margin: 20px auto;}
.callout {float: right; clear: right; margin: -20px 0 30px 30px;}

/* Flash */
.flash {width: 500px; margin: 10px auto;}
#flash-home {width: 800px; height: 277px; margin:0 0 15px 50px;}
#flash-palatal-expander {width: 200px; height: 150px; margin: 10px auto; border: solid 1px #610000;}
p.upgrade {width: 50%; background: #e4e4e4; font-size: .63em; text-align: left; margin: 50px auto; padding: 5px; border: solid 1px #000; overflow: auto;}
.flash-replaced .alt {display: block; height: 0px; position: absolute; overflow: hidden; width: 0px;}

/* Login Links */
#logins {width: 200px; height: 27px; position: absolute; z-index: 2; top: 11px; left: 705px; text-indent: -999em;}
a.pt-login, a.dt-login {width: 100px; height: 27px; float: left;}
a.pt-login {background: url(images/nav/pt-login.gif);}
a.dt-login {background: url(images/nav/dt-login.gif);}
a.pt-login:hover, a.dt-login:hover {background-position: 0 -27px;}

/* Social Icons */
#social-icons {width:200px; height:32px; position:absolute; z-index: 2; top:46px; left:705px; text-align:right;}
#social-icons a, #social-icons img {display:inline; padding:0 1px; height:32px; width:32px;}

/* Navigation */
#nav {position: absolute; top: 99px; left: 15px; margin: 0; font-size: .75em;}
#nav ul {width: 900px; height: 35px; position: relative; left: 0; margin: 0; padding: 0;}
#nav ul li {float: left; margin: 0; padding: 0; list-style: none;}
#nav ul li a {display: block; text-decoration: none;}

#about-our-office, #new-patients, #about-orthodontics, #braces-101, #invisalign, #the-game-room, 
#contact-us, #location, #home {text-indent: -999em; overflow: hidden; height: 35px;}
#about-our-office {background: url(images/nav/about-office.gif); width: 126px;}
#new-patients {background: url(images/nav/new-patients.gif); width: 100px;}
#about-orthodontics {background: url(images/nav/about-ortho.gif); width: 137px;}
#braces-101 {background: url(images/nav/braces-101.gif); width: 86px;}
#invisalign {background: url(images/nav/invisalign.gif); width: 116px;}
#the-game-room {background: url(images/nav/game-room.gif); width: 122px;}
#contact-us {background: url(images/nav/contact.gif); width: 86px;}
#location {background: url(images/nav/location.gif); width: 70px;}
#home {background: url(images/nav/home.gif); width: 57px;}

li:hover #about-our-office, li.sfhover #about-our-office, li.active #about-our-office,
li:hover #new-patients, li.sfhover #new-patients, li.active #new-patients,
li:hover #about-orthodontics, li.sfhover #about-orthodontics, li.active #about-orthodontics,
li:hover #braces-101, li.sfhover #braces-101, li.active #braces-101,
li:hover #invisalign, li.sfhover #invisalign, li.active #invisalign,
li:hover #the-game-room, li.sfhover #the-game-room, li.active #the-game-room,
li:hover #contact-us, li.sfhover #contact-us, li.active #contact-us,
li:hover #location, li.sfhover #location, li.active #location,
li:hover #home, li.sfhover #home, li.active #home {background-position: 0 -35px;}

#nav ul ul {position: absolute; left: -999em; margin: 0; height: auto; border: 1px solid #003744; display: block; width: 180px; background: #ffb06a;}
#nav ul ul li {float: none; display: inline;}
#nav ul ul li a {font-weight: normal; padding: 3px 9px; line-height: 1.3em; width: 180px; height: auto; color: #fff;}
#nav ul ul li a:hover {color: #7e3b00;}
#nav ul li:hover {position: static;}
#nav ul li:hover ul, #nav li.sfhover ul {left: auto; margin: -1px 0 0 1px;}

/* Incognito */
#media-center {background: #fff; width: 50%; margin: 10px 0; padding: 0 0 9px 0; border: 1px solid #4f4c90;}
#media-center dt {margin: 0 0 9px 0; padding: 9px; color: #ffffff; font-weight: bold; background: #468392;}
#media-center dd {margin: 0 0 9px 9px;}

/* The Game Room */
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: inline;}
ul#sesame-games img {border: 0; float: right; clear: right; margin: 0 0 10px 10px;}
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 #610000;/*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 #610000;/*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:#0a799e;/* customize me! */
	border: 1px solid #0a799e;
	text-align:center;
	line-height:31px;
	color:#ffffff;/* customize me! */
	font-size:12px;
	font-weight:bold;}


/* referral form */
.referral-form {
	margin: 0 0 18px;
	width: 500px; 
	padding: 10px;
	border:solid 1px #003744;/*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 {
	float:left;
	font-size:12px;
	padding:4px 2px;
	border:solid 1px #3993b1;/* customize me! */
	width:200px;
	margin:9px 0 9px 10px;
	background: #ffffff;}
.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 #3993b1;}/* 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;}

/* appointment form */
.appointment-form {
	margin: 0 0 18px;
	width: 500px; 
	padding: 10px;
	border:solid 1px #003744;/*optional, change color to match site*/
	background:#fafafa;/*optional, change color of background*/}
.appointment-form fieldset {border: none; padding: 9px 0;}
.appointment-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;}
.appointment-form label span {/*sits below labels; holds instructions*/
	color:#666666;
	display:block;
	font-size:11px;
	font-weight:normal;
	text-align:right;
	width:200px;}
.appointment-form input, .appointment-form select, .appointment-form textarea {
	float:left;
	font-size:12px;
	padding:4px 2px;
	border:solid 1px #3993b1;/* customize me! */
	width:200px;
	margin:9px 0 9px 10px;
	background: #ffffff;}
.appointment-form p.radio, .appointment-form p.verification {
	clear: both;
	margin: 9px 0 9px 210px;
	font-size: 12px;}
.appointment-form p.radio-float {
	clear: none;
	float:left;
	width: 200px;
	padding:0;
	margin:9px 0 9px 0;}
.appointment-form p.verification {margin-top: 0;}
.appointment-form p.verification img {border: 1px solid #3993b1;}/* customize me! */
.appointment-form p.radio input, .appointment-form p.radio-float input {
	float: none;
	width: auto;
	margin: 0 0 0 10px;
	padding: 4px 2px;}

/* comment form */	
.comment-form {
	margin: 0 0 18px;
	width: 500px; 
	padding: 10px;
	border:solid 1px #003744;/*optional, change color to match site*/
	background: #fafafa;}
.comment-form li {font-weight: bold;}
.comment-form label {/*floats labels left*/
	font-size: 12px;
	display:block;
	font-weight:bold;
	text-align:right;
	width:200px;
	float:left;
	padding-top: 4px;}
.comment-form label span {/*sits below labels; holds instructions*/
	color:#666666;
	display:block;
	font-size:11px;
	font-weight:normal;
	text-align:right;
	width:200px;}
.comment-form .label-block label {float: none; clear: both; width: 100%; text-align: left;}
.comment-form input, .comment-form textarea {
	float:left;
	font-size:12px;
	padding:4px 2px;
	border:solid 1px #3993b1;/* customize me! */
	width:200px;
	margin:9px 0 9px 10px;
	background: #ffffff;}
.comment-form p.verification {
	clear: both;
	margin: 9px 0 9px 210px;
	font-size: 12px;}
.comment-form p.radio-float {
	clear: none;
	float:left;
	width: 200px;
	padding:0;
	margin:9px 0 9px 0;}
.comment-form p.verification {margin-top: 0;}
.comment-form p.verification img {border: 1px solid #3993b1;}/* customize me! */
.comment-form p.radio input, .comment-form p.radio-float input {
	float: none;
	margin: 0 0 0 10px;
	padding: 4px 2px;
	width: auto;}
.comment-form .radio {text-align: left; font-weight: normal;}
.comment-form .comments-box label {float: none; font-weight: normal; display: block; text-align: left;}
.comment-form .comments-box textarea {float: none; margin-left: 0; width:95%;}

/* Mini-Contact Form */
.contact-form {
	float: right; 
	clear: right; 
	margin: 0 0 36px 36px;	
	width: 225px; 
	padding: 10px;
	border:solid 2px #3993b1;/*optional, change color to match site*/
	background:#fafafa;/*optional, change color of background*/}
.contact-form fieldset {border: none; padding: 9px 0;}
.contact-form li {font-weight: bold;}
.contact-form label {display: none;}
.contact-form input, .contact-form textarea {
	font-size:12px;
	padding:4px 2px;
	border:solid 1px #3993b1;
	width:200px;
	margin:9px 10px;
	background: #ffffff;}

.contact-form button {/*these styles control the look of the button, change as necessary*/
	text-align: center;
	margin: 9px auto;
	display: block;
	width:125px;
	height:31px;
	background:#ffffff url(images/button-bg.jpg) 0 50% repeat-x;/* customize me! */
	border: 1px solid #333333;
	text-align:center;
	line-height:31px;
	color:#333333;/* customize me! */
	font-size:12px;
	font-weight:bold;}
	
	
	
	
/* Invisalign*/
	img.right {
	float: right;
	margin: 0 0 15px 15px;
	}
.right-border {
	border: solid 1px #610000; /* Customize me!! */
	float: right;
	clear: right;
	margin: 0 0 15px 15px;
	}
.left-border {
	border: solid 1px #610000; /* 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;
	}
	
	
ul#testimonials {
	margin: 0;
	padding: 0;
	list-style: none;
	list-style-image: none;
	}
	
	
.invisalign-block {
	width: 315px; 
	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: #033B48;
	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; padding-left:200px
	}

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

	
.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: #033B48; /* 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: 0 0 10px 0;
	}
#invisalign-before-after div.cycle-detail {
	min-height: 55px;
	clear: both;
	background-color: #fff; /* Customize me */
	padding: 10px;
	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 {
	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;
	background-color: #29A6CF;
} /* 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: #033B48; /* 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;
	}
#acceledent-foot {
	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;
	}
	
	
	
	
	
	
/* 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;}