/* 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: 'SegoeUINormal';
src: url('segoeui-webfont.eot');
src: local('SegoeUINormal'), url('segoeui-webfont.woff') format('woff'), url('segoeui-webfont.ttf') format('truetype'), url('segoeui-webfont.svg#webfontRoXam6yo') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'dearJoeItalic';
src: url('dearjoe-webfont.eot');
src: local('dearJoeItalic'), url('dearjoe-webfont.woff') format('woff'), url('dearjoe-webfont.ttf') format('truetype'), url('dearjoe-webfont.svg#webfontZ9IAZ3Ic') format('svg');
font-weight: normal;
font-style: normal;
}
/* Layout */
body {background: #f7ebc1 url(../images/body-bg.jpg) repeat-x;}
.wrap {width: 998px; margin: 0 auto;}
#header {background: url(../images/header-bg.png) no-repeat; height: 165px; position: relative;}
#container {background: url(../images/container-bg.png) repeat-y; clear: both; position: relative;}
#content-wrap {background: url(../images/content-top.jpg) no-repeat; margin-left: 10px;}
#content {background: url(../images/content-bottom.jpg) -28px 100% no-repeat; width: 643px; min-height: 700px; padding-right: 56px; float: right;}
#left-col {width: 261px; float: left;}
#footer {background: url(../images/footer-bg.png) no-repeat -8px 0; height: 65px; padding-top: 40px; text-align: center; clear: both;}
#logos {text-align: center;}
#address {font-family: 'SegoeUINormal', Tahoma, Geneva, sans-serif; color: #fff; margin: 74px 0 0 25px; position: absolute; z-index: 20;}
.map {width: 640px; height: 420px; margin: 20px auto; clear: both;}
.right {float: right;}
.left {float: left;}
.cl {clear: left;}
.cr {clear: right;}
div.hr {height: 0px; background-color: #2b3984; border: solid 1px #2b3984; border-width: 1px 0 0 0; margin: 20px 0; padding: 0; clear: both;}
hr {display: none; height: 0px; background-color: #2b3984; border: solid 1px #2b3984; border-width: 1px 0 0 0; clear: both;}
/* Images */
.auto {width: 357px; height: 371px; margin-right: -56px; float: right;}
.border {border: solid 1px #2b3984;}
.img-left {margin: 5px 15px 15px 0; float: left; clear: left;}
.img-right {margin: 5px 0 15px 15px; float: right; clear: right;}
.img-center-border {margin: 20px auto; display: block;}
.office-event {float: left; margin: 0 18px 18px 0;}
#logos img {margin: 0 15px auto;}
#left-col img {margin: 20px 0 0 39px;}
.layout {display: block;}
#social-icons {margin:20px 0 0 39px;}
#social-icons img {margin:1px;}
/* Typo */
body {font-size: 14px; line-height: 18px;}
#content {font-family: 'SegoeUINormal', Tahoma, Geneva, sans-serif; color: #493732;}
#footer, #footer a {font-family: 'SegoeUINormal', Tahoma, Geneva, sans-serif; font-size: 12px; color: #fff;}
.text_nav {margin-bottom: 0;}
.sub_nav {color: #571c6c; margin-bottom: 30px; clear: left;}
p.sesame {}
p {margin: 0 0 18px 0;}
blockquote {margin: 0 30px 18px 30px;}
sup {font-size: 10px;}
em {font-style: italic;}
/* Links */
a {color: #571c6c; text-decoration: underline;}
a:hover {color: #2f3f8b; text-decoration: none;}
.sub_nav a:hover, .sub_nav a.active {color: #2f3f8b; text-decoration: underline;}
.sub_nav a.active {cursor: default;}
#footer a:hover { text-decoration: underline;}
.back-to-top {background: url(../images/back-to-top.gif) no-repeat 0 4px; padding-left: 20px; 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.headline {font-size: 60px; font-weight: normal; font-family: 'dearJoeItalic', 'Palatino Linotype', 'Book Antiqua', Palatino, serif; margin: 140px 0 20px; line-height: 44px; color: #2c3c87; width: 342px; float: left;}
h2 {font-size: 24px; font-weight: normal; line-height: 24px; margin: 0 0 18px; color: #571c6c;}
h2#welcome {color: #571c6c; font-size: 14px; line-height: 18px;}
h3 {font-size: 18px; font-weight: normal; margin: 0 0 18px; color: #2f3f8b;}
h4 {font-size: 12px; font-weight: normal; margin: 0; color: #493732;}
h1#logo {background: url(../images/theisen-logo.png) no-repeat; width: 477px; height: 123px; margin: 28px 0 0 10px; padding: 0; text-indent: -9999px; overflow: hidden; border: none; float: left;}
h1#logo a {width: 477px; height: 123px; display: block;}
/* jQuery home page slideshow */
#slideshow-home {width: 357px; height: 371px; background: url(../images/slideshow/slide-01.jpg); margin-right: -56px; float: right;}
/* 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;}
/* Lists */
ul, ol {margin: 0 0 18px 30px;}
dl dt {font-size: 18px;}
dl dd ul {margin: 0; list-style-type: none;}
/* Main Navigation */
#nav {font-family: 'SegoeUINormal', Tahoma, Geneva, sans-serif; width: 261px; height: 288px; padding: 0; margin: 112px 0 0 0;}
#nav ul {width: 261px; height: 288px; margin: 0; padding: 0; list-style: none;}
#nav li {width: 261px; height: 36px; margin: 0; padding: 0; list-style: none; display: inline;}
#nav li a {width: 261px; height: 36px; display: block; text-decoration: none; text-indent: -9999px; overflow: hidden;}
#about-us, #for-new-patients, #general-dentistry, #restore-your-smile, #enhance-your-smile, #dentistry-for-kids, #contact-us, #home {background: url(../images/nav.jpg) no-repeat;}
#about-us {background-position: 0 0;}
#nav li:hover #about-us, #nav li.active #about-us, #nav li.sfhover #about-us {background-position: -261px 0;}
#for-new-patients {background-position: 0 -36px;}
#nav li:hover #for-new-patients, #nav li.active #for-new-patients, #nav li.sfhover #for-new-patients {background-position: -261px -36px;}
#general-dentistry {background-position: 0 -72px;}
#nav li:hover #general-dentistry, #nav li.active #general-dentistry, #nav li.sfhover #general-dentistry {background-position: -261px -72px;}
#restore-your-smile {background-position: 0 -108px;}
#nav li:hover #restore-your-smile, #nav li.active #restore-your-smile, #nav li.sfhover #restore-your-smile {background-position: -261px -108px;}
#enhance-your-smile {background-position: 0 -144px;}
#nav li:hover #enhance-your-smile, #nav li.active #enhance-your-smile, #nav li.sfhover #enhance-your-smile {background-position: -261px -144px;}
#dentistry-for-kids {background-position: 0 -180px;}
#nav li:hover #dentistry-for-kids, #nav li.active #dentistry-for-kids, #nav li.sfhover #dentistry-for-kids {background-position: -261px -180px;}
#contact-us {background-position: 0 -216px;}
#nav li:hover #contact-us, #nav li.active #contact-us, #nav li.sfhover #contact-us {background-position: -261px -216px;}
#home {background-position: 0 -252px;}
#nav li:hover #home, #nav li.active #home, #nav li.sfhover #home {background-position: -261px -252px;}
/* Drop Down */
#nav li ul {background: #f1de9a url(../images/sub-nav-bg.jpg) repeat-x; margin: 0; padding: 10px 0; width: 200px; position: absolute; z-index: 10; left: -9999px; -webkit-box-shadow: 5px 5px 5px #828282;
-moz-box-shadow: 5px 5px 5px #828282;
box-shadow: 5px 5px 5px #828282;}
#nav li:hover ul, #nav li.sfhover ul {left: auto; height: auto; margin: -36px 0 0 261px;}
#nav li ul li {display: block; height: 28px; padding: 0; margin: 0;}
#nav li ul li:hover {background: #2f3f8b; width: 200px;}
#nav li ul li a {padding: 5px 0 5px 15px; margin: 0; width: auto; height: 18px; display: block; text-indent: 0; color: #fff;}
#nav li ul li a:hover {color: #fff;}
/* Utility Nav */
#utility-nav {width: 170px; height: 35px; position: absolute; top: 20px; right: 50px;}
#utility-nav ul {margin: 0; padding: 0;}
#utility-nav li {margin: 0; padding: 0; height: 35px; list-style: none; display: inline;}
#utility-nav li a {width: 170px; height: 35px; display: block; text-decoration: none; text-indent: -9999px; overflow: hidden;}
#patient-login {background: url(../images/patient-login.png);}
#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 -35px;}
/* 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 ------------------------- */
/* Anatomy of Tooth */
#toggle-content {margin: 0 0 15px 0;}
#anatomy-of-a-tooth {background: url(http://media.sesamehost.com/images/anatomy-of-a-tooth/anatomy-of-a-tooth-bg.gif); height: 525px; position: relative; width: 300px; margin: 15px 0;}
#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;}
/* jQuery Cycle Before and After */
#before-after-container {
width: 488px;
line-height: 18px;
margin: 0 auto;
padding: 10px 0 10px 10px;
background-color: #2B3984; /* 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 */
clear: both;
}
#before-after-container ul.slideshow {
list-style: none;
margin: 0;
padding: 0;
width: 488px;
height: 182px;
overflow: hidden;
}
ul#before-after-cycle li img {
width: 232px;
float: left;
margin-right: 10px;
border: solid 1px #333; /* Customize me */
}
#before-after-container p {
display: none; /* Remove this style to show captions when they are ready */
float: left;
width: 50%;
margin: 0 0 10px 0;
color: #fff;
}
#before-after-container div.cycle-detail {
display: none; /* Remove this style to show captions when they are ready */
min-height: 55px; /* 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 #333; /* Customize me */
-moz-border-radius: 5px; /* Optional - you may customize or remove */
-webkit-border-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 #333; /* 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 */
/*-----------------------------------------------
Forms
*/
/* Global form styles */
div.referral-form, div.appointment-form, div.comments {
width: 100%;
letter-spacing: normal;
}
fieldset {border: 0; padding: 0; margin: 0;}
fieldset h2 {margin: 0 0 9px;}
fieldset p {margin: 0 0 18px;}
fieldset p.disclaimer {font-size: 90%; font-style: italic; margin: 0;}
fieldset dl {}
fieldset dl dt {font-size: 16px; clear: both; margin: 9px 0 0;}
fieldset dd ul {margin: 9px 0;}
fieldset dd ul li, fieldset dd ol li {list-style: none;}
fieldset dd li {
clear: both;
margin: 3px 0;
padding: 5px 0 4px 10%;
overflow: auto;
height: auto;
position: relative;
}
fieldset dd li input:hover, fieldset dd li input:focus,
fieldset dd li select:hover, fieldset dd li select:focus,
fieldset dd li textarea:hover, fieldset dd li textarea:focus {
background: #f1f1f1;/* customize me - this is the hover color change of form fields*/
outline-color: #537197;/* customize me */
}
fieldset li h3 {font-size: 12px; line-height: 18px; margin: 0;}
fieldset li div {float: left; display: inline-block; width: 40%; position: relative; padding-right: 5%;}
fieldset li div.input-street {width: 85%;}
fieldset li div.input-city {width: 60%;}
fieldset li div.input-full-name {width: 85%;}
fieldset li div.input-phone-full {width: 85%;}
fieldset li div.input-email {width: 85%;}
fieldset li div.input-zip {width: 20%;}
fieldset li div.content-switch, fieldset li div.radio, fieldset li div.checkbox {width: 85%;}
fieldset li div.radio input {border: none;}
fieldset li div.radio label {padding-right: 9px; font-size: 90%;}
/*fieldset li div.hidden-content, fieldset li.hidden-content {display: none;}*/
fieldset li div.input-select-full {width: 85%;}
fieldset li div.input-comments {width: 85%;}
li div.input-comments textarea {height: 63px; overflow: auto;}
fieldset li div.input-captcha {width: 50%;}
fieldset li div.verification {width: 35%;}
li div.verification img {
border: 1px solid;
margin-top: 9px;
}
fieldset li div label {
line-height: 18px;
font-weight: bold;
margin-bottom: 9px;
font-size: 80%;
color: #537197;/*override to match site*/
}
fieldset li div input, fieldset li div textarea, fieldset li div select {
display: block;
line-height: 18px;
width: 100%;
border: 1px solid;
padding: 4px 0 3px;
text-indent: 4px;
margin-top: 9px;
-moz-border-radius: 4px; /*for Moz, optional*/
-webkit-border-radius: 4px; /*for Webkit Browsers, optional*/
}
fieldset li div select {height: 25px;}
fieldset li div.radio input {display: inline; width: auto; margin-right: 4px;}
fieldset li div div {width: 100%;}
fieldset dl dd.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*/
display: block;
width: 125px;
height: 34px;
text-align: center;
margin: 0;
background:#cfdae4;/* customize me! */
border: 1px solid #537197;
line-height: 34px;
color:#537197;/* customize me! */
font-size:12px;
font-weight:bold;
-moz-border-radius: 4px; /*for Moz, optional*/
-webkit-border-radius: 4px; /*for Webkit Browsers, optional*/
}
/* appointment form
* Styles only for the appointment request form
*/
/* comment form
* Styles only for the comments form
*/
/*numbering added by jQuery*/
fieldset ol li span.comment-number {
font-size: 150%;
color: #537197;/* customize me*/
position: absolute;
left: 9px;
top: 9px;
}
/* referral form
* Styles only for the referral form
*/
.referral-form fieldset li div.radio {width: 40%;}
/* JQuery */
input.error, select.error, textarea.error {border-color: #a52003; background: #fefda1;}
div.error {
background: url(../images/validate_error.gif) 0 0 no-repeat;
color: #a52003;
width: 18px;
height: 18px;
position: absolute;
top: 0;
right: 0;
overflow: hidden;
display: block;
margin: 12px -2% 0 0;
text-indent: -999em;}
div.success {
background: url(../images/validate_ok.gif) 0 0 no-repeat;
width: 18px;
height: 18px;
position: absolute;
top: 0;
right: 0;
overflow: hidden;
display: block;
margin: 12px -2% 0 0;
text-indent: -999em;}
.contact-form div.error, .contact-form div.success {margin-left: 0;}
#slideshow-container ul.slideshow {
list-style: none;
width: 460px;
height: 350px;
margin: 0;
padding: 0;
}
#slideshow-container {
background: #e5cb6c; /* Customize me */
border: solid 1px #a0b606; /* Customize me */
-moz-border-radius: 5px; /* Optional - you may customize or remove */
-webkit-border-radius: 5px; /* Optional - you may customize or remove */
width: 460px;
padding: 10px;
line-height: 18px;
}
#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 #a0b606; /* Customize me */
-moz-border-radius: 5px; /* Optional - you may customize or remove */
-webkit-border-radius: 5px;
}
#slideshow-container ul.slideshow img {
width: 460px;
height: 350px;
margin: 0;
}
.office-tour-nav {
background-color: #fff; /* Customize me */
margin: 0 0 10px 0;
padding: 5px 3px;
border: solid 1px #a0b606; /* 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;
color: #333;}
.office-tour-nav a.activeSlide, .office-tour-nav a:hover {color: #681861;}
#cashforcandy {
position:relative;
height:100px;
width:300px;
}
#cashforcandy a img#cashimg{
position:absolute;
left:166px;
}