@charset "utf-8";
/* CSS Document */

.flash-replaced .alt {/*JQUERY STYLE - sets size of container to 0 to hide alternative content*/
 display: block;height: 0px;position: absolute;overflow: hidden;width: 0px;}
 
/* HTML, BODY ---------- */
* {margin:0; padding:0;}
body {margin:0; background:#f5ebcb url(../images/tile.jpg) repeat-x; font-family: Arial, Helvetica, sans-serif; font-size:13px; line-height:20px; color:#01678d; }
p, h2, h3, ul, blockquote, ol {padding-bottom:10px; padding-top:10px;}
ul, blockquote, ol {padding-left:30px; padding-right:10px; padding-top:10px;}
ul {text-align:left;}
a {color:#01678d; }
a:hover {text-decoration:none;}
a img {border-style:none;}
#footer a {color:#f4911e; }
p.breadcrumbs, .breadcrumbs a {font-size:12px; font-weight:bold; color:#01678d; clear:both;}
td.White {height:68px; background:#FFF; padding:10px; margin:10px; border:1px solid #f4911e; text-align:center;}
/* table {max-width:80%; margin-left:30px; border:none;} */

/* LAYOUT ---------- */
* #wrapfull {width:100%; background:url(../images/bg.jpg) top center no-repeat;}
* #wrap {width:960px; background:url(../images/tile-body.jpg) repeat-y; margin:0 auto; position:relative;}
* #body {width:960px; background:url(../images/bg-body.jpg) no-repeat;}
* #bottom {width:960px; background:url(../images/bg-bottom.jpg) no-repeat bottom; min-height:980px; height:auto !important; height:980px;}
* #content {width:542px; clear:both; margin-left:253px; text-align:justify;}
* #footerwrap {width:100%; background:url(../images/tile-footerwrap.gif) repeat-x #FFF; clear:both; padding-top:25px;}
* #footer {width:960px; margin:0 auto; background:url(../images/bg-footer.jpg) no-repeat bottom; min-height:215px; height:auto !important; height:215px;}
#footer ul {list-style:none; margin:0; padding:0; float:left; width:208px; padding-bottom:50px; padding-left:48px; font-size:12px; line-height:14px; height:auto; color:#f4911e;}

div.office-info-left {float:left; width:180px; margin-top: 10px; margin-left:27px; color:#fdfcf8; font-size:13px; line-height:17px; font-weight:bold; padding-bottom:120px; padding-left:13px;}

div.office-info-right {float:left; width:184px; margin-top: 10px; margin-left:516px; color:#fdfcf8; font-size:13px; line-height:17px; font-weight:bold; text-align: right;}


/* BANNERS ---------- */
* #callout-invisalign {position:absolute; z-index:3; top:979px; margin-left:27px; }
* #callout-consultation {position:absolute; z-index:3; top:816px; margin-left:27px; }
#tucson { position:absolute; top:53px; left:140px; font-family:Arial, Helvetica, sans-serif; color:#FFF; font-size:17px; letter-spacing:-2; font-weight:bold }
#marana {position:absolute; top:53px; left:380px; font-family:Arial, Helvetica, sans-serif; color:#FFF; font-size:17px; letter-spacing:-2; font-weight:bold }

/* HEADERS ---------- */

h1 {background-repeat: no-repeat; height: 54px; width:545px; text-indent: -999em; margin: 0; padding:0; background-position: bottom;}
h1.replaced {overflow: hidden; text-indent: -999em; background-repeat: no-repeat; background-position: 0 0}
h1.jcir {font-size: 35px; margin: 0 0 0 0;}

h1.logo {text-align:left;
margin: 8px 0 0 0;
padding: 0;
background-repeat: no-repeat; 
width: 180px;/* this width reflects the width of the logo image */
height: 158px; /* this height reflects the height of the heading image */
overflow: hidden; 
text-indent: -999em;} /* hides rich text so only background image shows */

h1.logo a {text-align:left;
display: block; 
height: 158px;/*same height as logo h1*/ 
width: 180px;/*same width as logo h1*/}

h6{
	color: #000000;
	margin-bottom: 8px;
	margin-top: 8px;
	clear:both;
	border-bottom: 1px solid #000;
		
	}

#content h2 {color:#f4911e; font-size:15px; font-family:Georgia, "Times New Roman", Times, serif;}
#content h3 {font-size:14px; font-weight:normal; font-style:italic;}
#footer h2 {color:#008fc5; font-size:13px; font-family:Georgia, "Times New Roman", Times, serif; margin-top:0px; padding-top:0px;}

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

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

.note, sup {
  font-size: 10px;
}
#footer .sesame {color:#39aeda; font-size:13px;}
* .img {float:right; margin:0 0 10px 10px;}
* .right {float:right;}
* .left {float:left;}
* .imgleft {float:left; margin:0 20px 10px 0;}
* .hide {display:none;}
* .flashhome {width:546px; height:307px;  margin-left:207px; position:absolute; z-index:3; top:0px;}
* .block {display:block;}
* .listnone {list-style:none;}
* .center {text-align:center;}
* .clear {clear:both;}
* .marginnone {margin:0; padding:0;}
* .resources {padding:7px; background:#FFF; border:1px solid #f4911e;}
.border-left {border:1px solid #f4911e; float:left; margin:0 10px 10px 0}
.border {border:1px solid #f4911e; text-align:center; display:block;}

#new-patient-callout { width:251px; height:100px; display:block; overflow:hidden; text-indent:-999em; background:url(../images/callout-new-patient.jpg); margin:0 auto}
#new-patient-callout:hover { background:url(../images/callout-new-patient.jpg) 0 -100px;}
/* NAVIGATION ---------- */


/* NAVIGATION MAIN ---------- */
ul#nav {list-style: none; padding: 13px 0 0 0; margin:0 0 0 27px; width:181px; position:absolute; z-index:42; top:359px; background:url(../images/bg-nav.jpg) no-repeat;}
#nav li {}
/*  Sets styles for all links that are inside the ul id="nav" */
#nav a {display: block;height: 29px; overflow: hidden; text-indent:-999em; width:181px; margin-bottom:1px;}

/* Set the image for each nav item */
* #aboutus {background: url(../images/nav-about-us.gif); }
* #fornewpatients {background: url(../images/nav-for-new-patients.gif); }
* #generaldentistry {background: url(../images/nav-general-dentistry.gif); }
* #home {background: url(../images/nav-home.gif); }
* #pediatricdentistry {background: url(../images/nav-pediatric-dentistry.gif); }
* #faqs {background: url(../images/nav-ask-the-dentist.gif); }
* #enhanceyoursmile {background: url(../images/nav-enhance-your-smile.gif); }
* #restoreyoursmile {background: url(../images/nav-restore-your-smile.gif); }
* #preventivedentistry {background: url(../images/nav-preventive-dentistry.gif); }
* #contactus {background: url(../images/nav-contact-us.gif); }
* #invisalign {background: url(../images/nav-invisalign.gif); }

/* Shift the image position up to show the active state */
#nav a:hover, #nav .active, #nav li:hover, #nav li.sfhover, 
#nav li:hover #aboutus, #nav li.sfhover #aboutus, 
#nav li:hover #fornewpatients, #nav li.sfhover #fornewpatients, 
#nav li:hover #home, #nav li.sfhover #home, 
#nav li:hover #invisalign, #nav li.sfhover #invisalign, 
#nav li:hover #generaldentistry, #nav li.sfhover #generaldentistry, 
#nav li:hover #pediatricdentistry, #nav li.sfhover #pediatricdentistry, 
#nav li:hover #faqs, #nav li.sfhover #faqs, 
#nav li:hover #preventivedentistry, #nav li.sfhover #preventivedentistry, 
#nav li:hover #enhanceyoursmile, #nav li.sfhover #enhanceyoursmile,
#nav li:hover #restoreyoursmile, #nav li.sfhover #restoreyoursmile{background-position:-181px 0px;}

* #nav, #nav ul {list-style: none; margin: 0; }
#nav li {display: inline; }
#nav li ul {background: #f4911e; left: -999em; padding: 3px 0; position: absolute; z-index: 1; }
#nav li ul li {float:none;}
#nav li:hover ul, #nav li.sfhover ul {left: auto; margin: -30px 0 0 173px; color:#f5ebcb; }
#nav ul li a {height:auto; margin: 0; text-decoration: none; width: 200px; text-indent:0; color:#f5ebcb; font-size:13px; padding:1px 10px 1px 10px;  font-weight:bold;}
#nav ul li a:hover {color:#0183b4; }


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

#social-icons {
	margin:12px 0 12px 37px;
}
#social-icons a, #social-icons img {
	display:inline;
	height:auto;
	width:auto;
	text-indent:0;
	border:none;
}


/* NAVIGATION LOGINS - GOODMAN ---------- */
ul#login-goodman {list-style: none; padding: 0; margin:0 0 0 40px; width:154px; position:absolute; z-index:71; top:241px;}
/*  Sets styles for all links that are inside the ul id="nav" */
#login-goodman a {display: block;height: 66px; overflow: hidden; text-indent:-999em; width:154px}

/* Set the image for each nav item */
* #goodmanlogin {background: url(../images/nav-login-goodman.jpg); }


/* Shift the image position up to show the active state */
#login-goodman a:hover, #login-goodman .active, #login-goodman li:hover, #login-goodman li.sfhover, 
#login-goodman li:hover #goodmanlogin, #login-goodman li.sfhover #goodmanlogin {background-position:0px -66px ;}

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

/* NAVIGATION LOGINS - TANGERINE ---------- */
ul#login-tangerine {list-style: none; padding: 0; margin:0 0 0 768px; width:152px; position:absolute; z-index:73; top:241px;}
/*  Sets styles for all links that are inside the ul id="nav" */
#login-tangerine a {display: block;height: 66px; overflow: hidden; text-indent:-999em; width:152px}

/* Set the image for each nav item */
* #tangerinelogin {background: url(../images/nav-login-tangerine.jpg); }

/* Shift the image position up to show the active state */
#login-tangerine a:hover, #login-tangerine .active, #login-tangerine li:hover, #login-tangerine li.sfhover, 
#login-tangerine li:hover #tangerinelogin, #login-tangerine li.sfhover #tangerinelogin {background-position:0px -66px ;}

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

ul#sitemap {list-style:circle;}
#sitemap li a {background:none; text-decoration:underline}
#sitemap li a:hover {text-decoration:none;}


/* TEETH FOR LIFE */
* #toggle-content {margin: 0 0 15px 0;}
* #anatomy-of-a-tooth {background: url(../images/anatomy-of-a-tooth/anatomy-of-a-tooth-bg.gif); height: 525px; position: relative; width: 300px;}
#anatomy-of-a-tooth a {cursor: help; display: block; position: absolute;}
#anatomy-of-a-tooth a:hover {background: transparent;}
a#bone {height: 20px; left: 30px; top: 380px; width: 40px;}
a#cementum {height: 20px; left: 100px; top: 460px; width: 90px;}
a#dentin {height: 20px; left: 80px; top: 165px; width: 60px;}
a#enamel {height: 20px; left: 165px; top: 135px; width: 60px;}
a#gingiva {height: 30px; left: 20px; top: 275px; width: 60px;}
a#periodontal {height: 30px; left: 205px; top: 440px; width: 70px;}
a#pulp {height: 30px; left: 125px; top: 220px; width: 50px;}
a#print {cursor: pointer; height: 23px; left: 240px; top: 502px; width: 60px;}
#anatomy-of-a-tooth a img {border: none; display: block; height: 0; position: absolute; width: 0;}
#anatomy-of-a-tooth a:hover img {height: 98px; width: 300px;}
a#bone:hover img {left: -30px; top: -380px;}
a#cementum:hover img {left: -100px; top: -460px;}
a#dentin:hover img {left: -80px; top: -165px;}
a#enamel:hover img {left: -165px; top: -135px;}
a#gingiva:hover img {left: -20px; top: -275px;}
a#periodontal:hover img {left: -205px; top: -440px;}
a#pulp:hover img {left: -125px; top: -220px;}
* #flash-know-your-teeth {margin: 15px 0;}
.flash-replaced .alt {
display: block;
width: 0px;
height: 0px;
position: absolute;
overflow: hidden;}
* .hide {display: none;}

/* 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}
ul#sesame-games img {border: 0; 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}

/* Edit.com */

ul, ol {
	margin-top:0px;
	margin-bottom:0px;
}

.NormalText, body, td {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 20px;
	color: #01678D;
	font-weight: normal;
	text-decoration: none;
	text-transform: none;
	font-style:normal;
}

.FooterText {
	font-family: Georgia, Times New Roman, "Times", serif;
	font-size: 15px;
	color: #008FC5;
	font-weight: bold;
}

.SubHeader {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #01678D;
	font-weight: normal;
	font-style: italic;
}

.SubjectHeader {
	font-family: Georgia, Times New Roman, "Times", serif;
	font-size: 15px;
	color: #F4911E;
	font-weight: bold;
}

* .PageTitle {
	font-family: Georgia, Times New Roman, "Times", serif;
	font-size: 28px;
	line-height: 32px;
	color: #038EC9;
	font-weight: normal;
}

/* 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 15px 15px;
	}
#pro-pack .left {
	margin: 0 15px 15px 0;
	float: left;
	}
#pro-pack .right-border {
	border: solid 1px #333; /* Customize me!! */
	float: right;
	clear: right;
	margin: 0 0 15px 15px;
	}
#pro-pack .left-border {
	border: solid 1px #333; /* Customize me!! */
	float: left;
	clear: left;
	margin: 0 15px 15px 0;
	}
#pro-pack img.border {
	border: solid 1px #333; /* Customize me!! */
	}
	
/* Main Invisalign page ----------------- */
#pro-pack #video-invisalign {
	width: 360px; 
	height: 266px;
	display: block;
	}
#pro-pack p.flash_notice {
	margin: 18px;
	padding: 9px;
	color: #ff0000;
	border: 1px dotted #ff0000;
	background: #ffffff;
	text-align: center;
	}
/* 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;
	}

/* Invisalign Teen ------------------ */
#pro-pack span.indent {
	padding-left: 40px;
	}
#pro-pack #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;
	}
#pro-pack #invisalign-sidebar a {
	color: #036; /* Customize me!! */
	}
#pro-pack #invisalign-sidebar h3 {
	background: #4DABC4; /* 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 #000; /* Customize me!! */
	margin: 0 10px 10px 0;
	float: left;
	clear: left;
	}
/* Invisalign Videos ------------------- */
#pro-pack div.invisalign-flash {
	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;
	}
#pro-pack div.invisalign-flash img {
	margin: 30px 50px 0;
	float: right;
	}
#pro-pack .bump-right {
	margin-right: 5px;
	}
#video-invisalign-best-friends, #video-invisalign-news-travels-fast {
	width: 320px;
	height: 206px;
	
	margin:0; padding:0
	}
#video-invisalign-lobby {
	width: 320px; 
	height: 266px;
	
	margin:0; padding:0
	}

/* Invisalign Before and After */
#pro-pack #invisalign-before-after {
	width: 488px;
	min-height: 335px;
	line-height: 18px;
	margin: 0 0 18px 0;
	padding: 10px 0 10px 10px;
	background-color: #4DABC4; /* 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 */
	}
#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 */
	-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 */
	-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: 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 - 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: #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 - 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 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;
	}
	
/* 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;}