/* reset */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;}
table, td, th {vertical-align:middle;}
a, img, object {border:none; outline:none;}
.hide {display:none;}

@font-face {
	font-family: 'SharpieRegular';
	src: url('sharpie-webfont.eot');
	src: local('Sharpie'), url('sharpie-webfont.woff') format('woff'), url('sharpie-webfont.ttf') format('truetype'), url('sharpie-webfont.svg#webfont9KmpRh9h') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* Layout */
body {background: #dcc6a1 url(../images/body-bg.jpg) top center no-repeat;}
#container {background: url(../images/container-bg.gif) repeat-y; width: 960px; position: absolute; left: 50%; margin-left: -480px;}
#banner {background: url(../images/banner-bg.jpg); height: 222px;}
#wrap {background: url(../images/wrap-bg.jpg) no-repeat; min-height: 755px;}
#left-col {width: 308px; float: left;}
#content {width: 566px; float: left; margin-left: 29px;}
#footer {background: url(../images/footer-bg.jpg) no-repeat; height: 125px; padding: 70px 0 0; text-align: center; clear: both;}
#amp {background: url(../images/amp.jpg) no-repeat; width: 308px; height: 372px; margin-top: 18px; padding: 40px 0 0 40px;}
#home-logos {background: url(../images/logo-box.jpg) no-repeat; width: 263px; height: 199px; margin: 0 0 20px 20px; padding: 20px 0 0; text-align: center; float: right; clear: right;}
#logo-box {width: 256px; margin: 0 0 20px 20px; padding: 20px 0 0; text-align: center; float: right; clear: right;}
.map {width: 550px; height: 420px; margin: 20px auto;}
.right {float: right;}
.left {float: left;}


a.call
{
color: #ffffff;
text-decoration: none
}

div.hr {height: 1px; background-color: #DCC6A1; border: solid 1px #fff; border-width: 0 0 1px 0; margin: 20px 0; padding: 0; clear: both;}
hr {display: none; height: 1px; background-color: #DCC6A1; border: solid 1px #fff; border-width: 1px 0 0 0; clear: both;}

/* Images */
.border {padding: 3px; background: #fff; border: solid 1px #333; -webkit-box-shadow: 0 0 8px  #3d260a; -moz-box-shadow: 0 0 8px #3d260a; box-shadow: 0 0 8px #3d260a;}
.img-left {margin: 0 20px 20px 0; float: left; clear: left;}
.img-right {margin: 0 0 20px 20px; float: right; clear: right;}
.img-center {margin: 20px auto; display: block;}
.auto {width: 548px; height: 208px; margin: 0; clear: both;}
.layout {display: block;}

#left-col img {margin: 25px 0 0 35px;}
#home-logos img, #logo-box img {margin-bottom: 20px;}


#review-icons {
    border-bottom: 1px solid #AAAAAA;
    margin-left: 45px;
    margin-top: 206px;
    padding-bottom: 20px;}

#social-icons {
    margin-left: 65px;
    margin-top: 25px;}
#social-icons img, #review-icons img {margin:0 2px 0 0;}

#review-icons h4 {
	color: #7C050F;
    font-size: 18px;
    font-style: italic;
    margin: 0;
    padding-bottom: 5px;
}

/* Typo */
body {font: 12px/22px Arial, Helvetica, sans-serif;}
#content {color: #333;}
#footer, #footer a {color: #fdf5ea;}
#amp {color: #fff;}
#phone {font-size: 26px; line-height: 30px; margin: 0;}
#consult {font-size: 18px; margin: 80px 0 25px 60px;}
.address {margin-left: 60px; line-height: 18px;}
.address span {font-size: 18px;}
.address span.street-address,
.address span.locality,
.address span.region,
.address span.postal-code {font-size:100%;}
.text_nav {margin: 0;}
.sub_nav {color: #003158; background: url(../images/bullet.png) no-repeat; margin: 0; padding: 10px 0 0 40px; line-height: 28px;}
.text-shadow {text-shadow: 1px 2px 2px #000; filter: dropshadow(color=#000000, offx=1, offy=2);}
.sharpie {font-family: 'SharpieRegular', 'Comic Sans MS', Arial, sans-serif;}
p {margin: 0 0 22px 0;}

blockquote {margin: 0 30px 22px 30px;}
sup {font-size: 10px;}
em {font-style: italic;}

/* Links */
a {color: #003f71;}
a:hover, a.active {color: #666;}
.sub_nav a.active {cursor: default;}
#footer a:hover {text-decoration: underline;}
.back-to-top {background: url(../images/back-to-top.png) no-repeat; width: 95px; height: 24px; text-align: center; padding: 5px 0 0 10px; float: right; clear: both;}
.pdf {background: url(../images/pdficon_small.gif) no-repeat 0 2px; padding-left: 20px; display: inline-block; height: 20px;}
.doc {background: url(../images/docicon_small.gif) no-repeat 0 2px; padding-left: 20px; display: inline-block; height: 20px;}

/* Headings */
h1, h1.headline {font-size: 24px; font-family: 'SharpieRegular', 'Comic Sans MS', Arial, sans-serif; margin: 0 0 35px 0; line-height: 30px; color: #fff; clear: both;}
h2 {font-size: 18px; font-style: italic; margin: 0 0 22px; color: #7c050f;}
h3 {font-size: 16px; font-style: italic; margin: 0 0 22px; color: #b36d2c;}
h4 {font-size: 14px; font-style: italic; margin: 0; color: #19354b;}

h1#logo {background: url(../images/jennings-logo.gif) no-repeat; width: 303px; height: 137px; margin: 11px 75px 0 0; padding: 0; text-indent: -9999px; overflow: hidden; border: none; float: right;}
h1#logo a {width: 303px; height: 137px; display: block;}
h2#welcome {font-size: 16px; font-style: italic; color: #714a1a;}

/* jQuery home page slideshow */
#slideshow-home {background: url(../images/slideshow-home/slideshow-bg.jpg) no-repeat; width: 548px; height: 208px; margin-bottom: 10px;}

/* Flash */
.flash {width: 500px; margin: 10px auto; display: block;}
p.flash_notice {margin: 18px; padding: 9px; color: #ff0000; border: 1px dotted #ff0000; background: #ffffff; text-align: center;}
#flash-homepage {width: 690px; height: 323px; margin: -350px 0 0 0; position: absolute; z-index: 8;}

/* Flash Videos */
.video {display: block;}

/* Lists */
ul, ol {margin: 0 0 22px 30px;}
#content li {background: url(../images/bullet-sm.png) no-repeat 0 2px; list-style-type: none; padding-left: 25px;}
dl dt {font-size: 16px; font-weight: bold;}
dl dd ul {margin: 0; list-style-type: none;}

/* Main Navigation */
#nav {width: 960px; height: 75px; position: absolute; z-index: 50; top: 147px;}
#nav ul {background: url(../images/nav.jpg) no-repeat; width: 773px; height: 75px; margin-left: 147px; padding: 0; list-style: none; position: relative;}
#nav li {height: 75px; margin: 0; padding: 0; list-style: none; position: absolute; left: 0;}
#nav li a {width: 100%; height: 75px; display: block; text-decoration: none; text-indent: -9999px; position: absolute; top: 0; left: 0;}

#nav .meet-the-team {width: 126px; left: 0;}
#nav .for-new-patients {width: 140px; left: 126px;}
#nav .about-orthodontics {width: 155px; left: 266px;}
#nav .orthodontic-treatments {width: 190px; left: 421px;}
#nav .invisalign {width: 98px; left: 611px;}
#nav .first-aid {width: 64px; left: 709px;}

#nav li ul li.invisalign {left: 0; width: 200px;}

/* Drop Down */
#nav li ul {background: url(../images/dropdown-bg.png) repeat; margin: 75px 0 0 0; padding: 5px 0; width: 180px; height: auto; position: absolute; z-index: 3; left: auto; border: solid 1px #fff; display: none;}
#nav li:hover ul {display: block;}
#nav li ul li {display: block; width: 180px; height: 28px; padding: 0; margin: 0; position: relative;}
#nav li ul li:hover {}
#nav li ul li a {padding: 5px 0 5px 10px; margin: 0; width: 170px; height: 18px; display: block; text-indent: 0; color: #fff;}
#nav li ul li a:hover {color: #fdd62b;}

/* Utility Nav */
#utility-nav {width: 327px; height: 33px; margin: 0; padding: 0; position: absolute; top: 0; left: 216px;}
#utility-nav ul {background: url(../images/top-nav.jpg) no-repeat; width: 327px; height: 33px; margin: 0; padding: 0; list-style: none; position: relative;}
#utility-nav li {margin: 0; padding: 0; height: 33px; list-style: none; position: absolute; left: 0;}
#utility-nav li a {width: 100%; height: 33px; display: block; text-decoration: none; text-indent: -9999px; position: absolute; top: 0; left: 0;}

#utility-nav .patient-login {width: 91px; left: 0;}
#utility-nav .doctor-login {width: 97px; left: 91px;}
#utility-nav .home {width: 60px; left: 188px;}
#utility-nav .contact-us {width: 79px; left: 248px;}

/*#utility-nav a:hover, #utility-nav li.active a,
#utility-nav li:hover #patient-login, #utility-nav li.sfhover #patient-login,
#utility-nav li:hover #doctor-login, #utility-nav li.sfhover #doctor-login,
#utility-nav li:hover #contact-us, #utility-nav li.sfhover #contact-us,
#utility-nav li:hover #home, #utility-nav li.sfhover #home {background-position: 0 -25px;}*/

/* 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;}

/* Sesame Content ------------------------- */ 
#groupon {position: absolute; top: 50px; left: 156px}
/* common treatments */
div.box {
	float: right;
	clear: right;
	width: 334px;
	background-color: #2A2A2C; /* Customize me! */
	padding: 5px 0 5px 5px;
	margin: 0 0 20px 20px;
	border: solid 1px #333; /* Customize me! */
	-moz-border-radius: 5px; /* Optional - you may customize or remove */
	-webkit-border-radius: 5px;
}
div.box img {
	float: left;
	border: solid 1px #DCC6A1; /* Customize me! */
	margin-right: 5px;
}
div.box p {
	float: left;
	width: 50%;
	margin: 0;
	padding: 0;
	color: #fff;
}

/* Damon System */
#damon-bracket {
	display: block;
	margin: 0 auto 20px auto;
	}
#damon-wrap {
	width: 400px;
	margin: 0 auto;
	}
#damon-left {
	float: left;
	width: 175px;
 	margin-right: 20px;
	}
#damon-right {
	float: left;
	width: 170px;
	}
#flash-damon-system-comparison {
	margin: 20px auto;
	width: 250px;
	display: block;
	}
#video-the-damon-system {
	margin: 0 20px 20px 0;
	width: 240px;
	height: 206px;
	float: left;
	clear: left;
	}
#video-the-damon-system-2 {
	margin: 0 20px 20px 0;
	width: 400px;
	height: 330px;
	float: left;
	clear: left;
	}
	
	/* Pro Pack Callouts --------------- */

	
/* Main Invisalign page ----------------- */
#pro-pack #video-invisalign {
	width: 360px; 
	height: 266px;
	display: block;
	margin: 20px auto;
	}
#pro-pack p.flash_notice {
	margin: 18px;
	padding: 9px;
	color: #ff0000;
	border: 1px dotted #ff0000;
	background: #ffffff;
	text-align: center;
	}
	
/* Invisalign Teen ------------------ */
#pro-pack span.indent {
	padding-left: 40px;
	}
#pro-pack #invisalign-sidebar {
	background: #fff;
	width: 275px;
	margin: 0 0 15px 15px;
	padding: 0;
	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: #2A2A2C; /* Customize me!! */
	margin: 0;
	padding: 15px;
	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 10px 0;
	float: left;
	clear: left;
	}
	
/* Invisalign Testimonials ------------------ */
#pro-pack ul#testimonials {
	margin: 0;
	padding: 0;
	list-style: none;
	list-style-image: none;
	}
#pro-pack ul#testimonials li {
	background: none;
	margin: 0;
	padding: 0;
}
#pro-pack .invisalign-block {
	width: 315px; 
	float: left;
	}

/* Invisalign Videos ------------------- */

#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: 20px auto;
	padding: 10px 0 10px 10px;
	background-color: #2A2A2C; /* Customize me */
	border: solid 1px #333; /* Customize me */
	-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 */
	-webkit-box-shadow: 0 0 8px  #3d260a; -moz-box-shadow: 0 0 8px #3d260a; box-shadow: 0 0 8px #3d260a;
	}
#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 #DCC6A1; /* Customize me */
	}
#pro-pack #invisalign-before-after p {
	float: left;
	width: 50%;
	margin: 0 0 10px 0;
	color: #fff;
	}
#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 #DCC6A1; /* Customize me */
	-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 */
	}
#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 #DCC6A1; /* Customize me */
	-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;
	}
#pro-pack #invisalign-before-after .before-after-nav a.activeSlide, #pro-pack #invisalign-before-after .before-after-nav a:hover {text-decoration: underline;} /* Customize me */
	

	
/* Invisalign Footer -------------------- */	
#pro-pack #invisalign-footer {
	background: #fff;
	width: 99%;
	margin: 30px 0;
	padding: 0;
	font-size: 11px;
	border: solid 1px #333;
	-webkit-box-shadow: 0 0 8px  #3d260a; -moz-box-shadow: 0 0 8px #3d260a; box-shadow: 0 0 8px #3d260a;
	clear: both;
	}
#pro-pack #invisalign-footer h3 {
	background: #2A2A2C; /* Customize me!! */
	margin: 0;
	padding: 8px 15px;
	color: #fff; /* Customize me!! */
	font-size: 14px;
	}
#pro-pack #invisalign-footer ul li img {
	margin: 0 10px 0 15px;
	float: left;
	}
#pro-pack #invisalign-footer p {
	padding: 0 15px;
	margin: 30px 0 15px 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;
	}
	
/* Emergency care */
ul#toggle-emergency {
	list-style: none;
	margin: 0 0 20px 0;}
ul#toggle-emergency li {
	border: solid 1px #fff; /* Customize me! */
	border-width: 0 0 1px 0;
	padding: 20px 0;
	margin: 0;
	background: none;
	}
.general-soreness {
	background: url(http://media.sesamehost.com/images/emergency-care/general-soreness.gif) no-repeat 3px;
	width: 80px;
	height: 60px;}
.headgear {
	background: url(http://media.sesamehost.com/images/emergency-care/headgear.gif) no-repeat 3px;
	width: 80px;
	height: 60px;}
.loose-appliance {
	background: url(http://media.sesamehost.com/images/emergency-care/loose-appliance.gif) no-repeat 3px;
	width: 80px;
	height: 60px;}
.loose-bracket {
	background: url(http://media.sesamehost.com/images/emergency-care/loose-bracket.gif) no-repeat 3px;
	width: 80px;
	height: 60px;}
.loose-wire {
	background: url(http://media.sesamehost.com/images/emergency-care/loose-wire.gif) no-repeat 3px;
	width: 80px;
	height: 60px;}
.poking-wire {
	background: url(http://media.sesamehost.com/images/emergency-care/poking-wire.gif) no-repeat 3px;
	width: 80px;
	height: 60px;}



/* jQuery Cycle Before and After */
#before-after-container {
	width: 488px;
	line-height: 18px;
	margin: 20px auto;
	padding: 10px 0 10px 10px;
	background-color: #2A2A2C; /* Customize me */
	-moz-border-radius: 5px; /* Optional - you may customize or remove */
	-webkit-border-radius: 5px; /* Optional - you may customize or remove */
	-webkit-box-shadow: 0 0 8px  #3d260a; -moz-box-shadow: 0 0 8px #3d260a; box-shadow: 0 0 8px #3d260a;
	}
#before-after-container p {
	color: #fff;
}
#before-after-container ul.slideshow {
	list-style: none; 
	margin: 0; 
	padding: 0;
	width: 488px;
	height: 440px;
	overflow: hidden;
	}
ul#before-after-cycle li {
	background: none;
	padding: 0;
	margin: 0;
}
ul#before-after-cycle li img {
	width: 232px;
	float: left;
	margin-right: 10px;
	border: solid 1px #DCC6A1; /* Customize me */
	}
#before-after-container p {
	float: left;
	width: 50%;
	margin: 0 0 10px 0;
	}
#before-after-container div.cycle-detail {
	min-height: 20px; /* Increase this number to accomodate longer or shorter description text and to prevent "bumping" of lower content */
	clear: both;
	background-color: #fff; /* Customize me */
	padding: 10px;
	margin: 0 10px 0 0;
	border: solid 1px #DCC6A1; /* Customize me */
	-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 */
	}
#before-after-container .before-after-nav {
	background: #fff; /* Customize me */
	margin: 0 10px 10px 0;
	padding: 5px 3px;
	border: solid 1px #DCC6A1; /* Customize me */
	-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 */
	}
#before-after-container .before-after-nav a {
	text-decoration: none; 
	font-size: 12px; 
	padding: 5px; 
	margin: 0 3px; 
	outline: none;
	}
#before-after-container .before-after-nav a.activeSlide, #before-after-container .before-after-nav a:hover {text-decoration: underline;} /* Customize me */

/* Office Tour */
#slideshow-container ul.slideshow {
	list-style: none; 
	width: 547px; 
	height: 365px;
	margin: 0; 
	padding: 0;
	}
#slideshow-container {
	background: #2A2A2C; /* Customize me */
	-moz-border-radius: 5px; /* Optional - you may customize or remove */
	-webkit-border-radius: 5px; /* Optional - you may customize or remove */
	-webkit-box-shadow: 0 0 8px  #3d260a; -moz-box-shadow: 0 0 8px #3d260a; box-shadow: 0 0 8px #3d260a;
	width: 547px; 
	padding: 10px;
	line-height: 18px;
	margin-bottom: 20px;
	}
#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 #DCC6A1; /* Customize me */
	-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: 545px; 
	height: 365px;
	margin: 0;
	border: solid 1px #DCC6A1;
	}
#slideshow-container ul.slideshow li {
	background: none;
	padding: 0;
	margin: 0;
}
.office-tour-nav {
	background-color: #fff; /* Customize me */
	margin: 0 0 10px 0;
	padding: 5px 3px;
	border: solid 1px #DCC6A1; /* Customize me */
	-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; 
	}
.office-tour-nav a.activeSlide, .office-tour-nav a:hover { text-decoration: underline;}

