/* Reset */
* {margin: 0 ; padding: 0;}

/* Layout */
body {background: #9ca276 url(../images/body-bg.jpg) repeat-x;}
#container {background: url(../images/container-bg.gif) repeat-y; width: 890px; margin-left: -445px; padding: 0; left: 50%; position: absolute;}
#banner-home {background: url(../images/banner-bg-home.jpg) no-repeat; height: 170px;}
#banner-int {background: url(../images/banner-bg-int.jpg) no-repeat; height: 170px;}
#content-home {background: url(../images/content-top.jpg) no-repeat; width: 594px; margin: 0 0 0 228px; padding: 0 33px 0 35px; min-height: 730px; _height: 730px; clear: both;}
#content-int {background: url(../images/content-top.jpg) no-repeat; width: 594px; margin: 0 0 0 228px; padding: 30px 33px 0 35px; min-height: 520px; _height: 520px; clear: both;}
#nav-wrap {background: url(../images/nav/nav-bg.jpg) no-repeat; width: 228px; min-height: 550px; position: absolute; z-index: 50; top: 170px; left: 0;}
#footer {background: #9ca276 url(../images/footer-bg.jpg) no-repeat 32px 0; width: 826px; padding: 30px 32px 15px 32px; clear: both;}

/* Utilities */
.right {float: right;}
.left {float: left;}
.cr {clear: right;}
.cl {clear: left;}
.hide {display: none;}
.staff {margin: 0 0 22px 0; padding: 10px 0 0 0; border: solid 1px #9ca276; border-width: 1px 0 0 0; clear: both;}
hr {height: 0; background-color: #fff; border: solid 1px #ccc; margin: 10px 0; clear: both;}
span.thumbs {background-color: #e3e3e3; margin: 8px 15px 15px 0; padding: 10px 0 10px 10px; border: solid 1px #93ab65; float: left; clear: left;}
span.thumbs p {float: left; display: block; width: 152px; margin: 0 10px 0 0; padding: 0;}
#callouts {margin: 25px 16px 0 16px;}
.social-text {float: left; width: 70px; margin: 10px 15px 18px 0; font-size: .86em; line-height: 1em;}

/* Images */
img {border: none; outline: none;}
.photo {margin: 5px 0 10px 30px; float: right; clear: right;}
.img-border {border: solid 1px #93ab65;}
.img-left {margin: 5px 15px 15px 0; float: left; clear: left;}
.img-left-border {border: solid 1px #93ab65; margin: 5px 15px 15px 0; float: left; clear: left;}
.img-right-border {border: solid 1px #93ab65; margin: 5px 0 15px 15px; float: right; clear: right;}
.img-right {margin: 5px 0 15px 15px; float: right; clear: right;}
.img-center-border {border: solid 1px #93ab65; margin: 10px auto; display: block;}

.layout {display: block;}
.logo {float: left;}
.social {margin: 0 15px 18px 0; float: left;}

/* Typo */
body {font-size: 100%; font-family: Arial, Helvetica, sans-serif;}
#container {font-size: .75em; line-height: 1.83em;}
#content {color: #454a27; font-weight: normal;}
.text_nav {color: #dadbc6; margin: 0 30px 18px 30px; padding: 0;}
.sub_nav {color: #7c4067; margin: 0; padding: 0; text-transform: uppercase; position: absolute; z-index: 5; top: 150px; right: 55px;}
p {margin: 0 0 22px 0;}
#address {color: #efe0ea; margin: 30px 0 10px 25px;}
#name {font-size: 1.25em; font-weight: bold; line-height: 18px;}
#phone {font-size: 1.5em; font-weight: bold; font-style: italic; line-height: 34px;}
#footer {font-size: .92em; font-style: normal; line-height: 1.25em;}

/* Links */
a {color: #454a27; font-weight: bold; font-style: italic; border: none; outline: none;}
a:hover, .sub_nav a.active, .sub_nav a:hover {text-decoration: underline; color: #753C62;}
#footer a {font-style: normal; font-weight: normal;}
.sub_nav a {color: #7c4067; font-weight: normal; font-style: normal; font-size: .92em; text-decoration: none;}
.sub_nav a.active {cursor: default; text-decoration: underline;}
.text_nav a, .sesame {color: #dadbc6; text-decoration: none;}
.text_nav a:hover, p.sesame a:hover {color: #dadbc6; text-decoration: underline;}
.top-link {background: url(../images/top-link.gif) no-repeat 0 4px; padding-left: 20px; clear: both;}
.sesame {margin: 0 30px; text-decoration: underline;}

/* Headings */
h1.jcir {font-size: 1.83em; font-weight: bold; margin: 0; position: absolute; z-index: 5; top: 110px; right: 33px;}
h1.logo {background: url(../images/derek-tieken-dds-logo.jpg) no-repeat; width: 292px; height: 122px; margin: 0 0 0 16px; padding: 0; text-indent: -999em; overflow: hidden;}
h1.logo a {width: 292px; height: 122px; display: block;}
h1.home { background: url(../images/headings/title-home.gif) no-repeat; width: 391px; height: 21px; margin: 35px 0 18px 0; padding: 0; text-indent: -999em; overflow: hidden;}
h1.replaced {/* jcIR plugin wraps text in div named replaced and hides it */
	overflow: hidden; 
	text-indent: -999em; 
	background-repeat: no-repeat;
}
h2 {font-size: 1.33em; font-weight: bold; font-style: italic; margin: 0 0 22px 0; color: #753C62;}
h3 {font-size: 1.17em; margin: 0; font-weight: bold; color: #454a27;}
h4 {font-size: 1em; color: #dadbc6; font-weight: normal; margin: 0 30px 18px 30px; padding: 0;}

/* Flash */
.flash {width: 500px; margin: 10px auto;}
.notice {width: 80%; background: #e4e4e4; font-size: 1em; text-align: left; margin: 50px auto; padding: 10px; border: solid 1px #000; overflow: auto;}
.flash-replaced .alt {display: block; height: 0px; position: absolute; overflow: hidden; width: 0px;}
#flash-home-gallery {width: 357px; height: 191px; margin: 0 0 18px 20px; float: right;}

/* jQuery Slideshow */
.slideshow {margin: 0; padding: 0; list-style: none; overflow: hidden;}
#smiles li {width: 594px; height: 600px; text-align: center; background-color: #fff;}
#before-after li {width: 594px; height: 470px;}
#before-after span, #smiles span {padding: 5px 0; color: #753B61;}
#controls {text-align: right;}
#texas {width: 100%; height: 309px;}
#texas p {width: 345px; position: absolute; left: 250px; top: 0; padding: 5px 0; color: #454a27; border: solid 1px #621a4b; border-width: 1px 0;}


/* Lists */
ul, ol {margin: 0 0 18px 30px;}
#toggle-content {margin: 0; padding: 0; list-style: none; list-style-position: inside;}
#toggle-content li {margin: 0 0 20px 0; padding: 0; border-bottom: solid 1px #93ab65;}

/* Utility Links */
#util {position: absolute; z-index: 3; top: 33px; right: 132px;}
#util ul {list-style: none;}
#util li {width: 138px; height: 20px; float: left;}
#util li a {width: 138px; height: 20px; display: block; text-decoration: none; text-indent: -999em;}
#patient-login {background: url(../images/nav/patient-login.gif); height: 38px;}
#doctor-login {background: url(../images/nav/doctor-login.gif); height: 38px; margin-bottom: 10px;}

#util li:hover #patient-login, #util li.sfhover #patient-login,
#util li:hover #doctor-login, #util li.sfhover #doctor-login {background-position: 0 -20px;}

/* Side Navigation */
#nav ul {width: 228px; margin: 0; padding: 0; list-style: none;}
#nav li {margin: 0; height: 32px; padding: 0; list-style: none; display: inline;}
#nav li a {width: 228px; height: 32px; display: block; text-decoration: none; text-indent: -999em; overflow: hidden;}

#about-our-office {background: url(../images/nav/about-our-office.jpg);}
#cosmetic-dentistry {background: url(../images/nav/cosmetic-dentistry.jpg);}
#general-dentistry {background: url(../images/nav/general-dentistry.jpg);}
#new-dental-technology {background: url(../images/nav/new-dental-technology.jpg);}
#testimonials {background: url(../images/nav/testimonials.jpg);}
#tieken-smile-makeovers {background: url(../images/nav/tieken-smile-makeovers.jpg);}
#media-appearances {background: url(../images/nav/media-appearances.jpg);}
#smile-gallery {background: url(../images/nav/smile-gallery.jpg);}
#your-first-visit {background: url(../images/nav/your-first-visit.jpg);}
#contact-us {background: url(../images/nav/contact-us.jpg);}
#home {background: url(../images/nav/home.jpg);}
#invisalign {background: url(../images/nav/invisalign.jpg);}

#nav a:hover, #nav li.active a,
#nav li:hover #about-our-office, #nav li.sfhover #about-our-office,
#nav li:hover #invisalign, #nav li.sfhover #invisalign,
#nav li:hover #cosmetic-dentistry, #nav li.sfhover #cosmetic-dentistry,
#nav li:hover #general-dentistry, #nav li.sfhover #general-dentistry,
#nav li:hover #new-dental-technology, #nav li.sfhover #new-dental-technology,
#nav li:hover #testimonials, #nav li.sfhover #testimonials,
#nav li:hover #tieken-smile-makeovers, #nav li.sfhover #tieken-smile-makeovers,
#nav li:hover #media-appearances, #nav li.sfhover #media-appearances,
#nav li:hover #smile-gallery, #nav li.sfhover #smile-gallery,
#nav li:hover #your-first-visit, #nav li.sfhover #your-first-visit,
#nav li:hover #contact-us, #nav li.sfhover #contact-us,
#nav li:hover #home, #nav li.sfhover #home {background-position: 0 -32px;}

/* Drop Down */
#nav li ul {margin: 0; padding: 0; width: 210px; border: solid 1px #702a59; position: absolute; z-index: 5; left: -999em;}
#nav li:hover ul, #nav li.sfhover ul {left: auto; margin: -30px 0 0 216px;}
#nav li ul li {background: #f8f7f9; display: block; width: 210px; height: 28px; padding: 0; margin: 0;}
#nav li ul li a {padding: 5px 0 5px 10px; margin: 0; width: auto; height: 18px; display: block; text-indent: 0; font-size: 1.17em; font-weight: normal; color: #702a59; text-decoration: none; font-style: normal;}
#nav li ul li a:hover {height: 18px; color: #fff; background-color: #965881;}

.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;}

img.right {
float:right;
margin:0 0 10px 10px;}
#video-invisalign {
width: 360px;
height: 266px;}
.flash-replaced .alt {
display: block;
width: 0px;
height: 0px;
position: absolute;
overflow: hidden;}




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










/* invisalign teen */
img.right {
	border: solid 1px #000;
	margin: 0 0 15px 15px;
	float: right;
	clear: right;
	}
img.left {
	border: solid 1px #000;
	margin: 0 15px 20px 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;
	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;
	}
.clear {clear: both;}

.left-border {
	border: solid 1px #333; /* Customize me!! */
	float: left;
	
	margin: 0 15px 15px 0;
	}
	
ul#invisalign-testimonials {
	margin: 0;
	padding: 0;
	list-style: none;
	list-style-image: none;
	}
	
	
.invisalign-block {
	width: 315px; 
	float: left;
	}

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



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: #ad849f; /* 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 {
	background: #7a4c6a; /* 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 */
	

.right-border {
	border: solid 1px #333; /* Customize me!! */
	float: right;
	clear: right;
	margin: 0 0 15px 15px;
	}