/* CSS Document */
/* HTML, BODY ---------- */
body {margin:0 0 0 0; background: url(images/tile.jpg) repeat-x #13355b;}
* #drs p {padding:0; margin:0;}
* #address p {padding-top:0; margin-top:0;}
* #footer a {color:#8fa8c2;}
a {color:#b2ba2a; font-size:13px;}
a:hover {text-decoration:none;}
/* edit.com visible styles */
BODY, TD, .NormalText { text-decoration: none; font-weight: normal; font-style: normal; font-family: Times New Roman, Times, serif; font-size:13px; line-height:20px; color:#000; }
.Title { color: #3E72AB; font-size: 32px; font-weight: normal; font-style: italic; font-family: Arial; line-height:32px; }
.Header { color: #3E72AB; font-size: 14px; font-weight: bold; font-family: Times New Roman; }
.Subheader { color: #B2BA2A; font-size: 13px; font-weight: bold; font-family: Times New Roman; }
.Green { color: #B2BA2A; }
.Blue { color: #3E72AB; }
.Black { color: #000000; }
.White { color: #FFFFFF; }
.SmallText { font-size: 10px; }
.MediumText { font-size: 16px; line-height: 16px; }
.LargeText { font-size: 24px; line-height: 24px; }
IMG.FloatLeft { float: left; margin: 0 5px 5px 0; }
IMG.FloatRight { float: right; margin: 0 0 5px 5px; }
IMG.GreenBorder { border:#b2ba2a 3px solid; margin:0 10px 10px 10px; padding:5px;}
/* LAYOUT ---------- */
* #wrap {margin:0 auto; width:781px; background:url(images/tile-body.jpg) repeat-y; overflow:auto; }
* #body {width:781px; background:url(images/nav-bottom.jpg) bottom left no-repeat; overflow:auto; border-bottom:solid 4px #b2ba2a; padding-bottom:213px;}
* #col1 {width:242px; float:left;}
* #drs {width:142px; text-align:right; color:#FFF; padding:20px 50px 20px 76px; float:left;}
* #col2 {width:539px; float:left; background:url(images/col2-bg-home.jpg) no-repeat; }
* #content {width:478px; margin:0 auto; padding-bottom:5px;}
* #address {width:461px; border-top: 4px solid #b2ba2a; margin:60px 0 20px 0; line-height:13px; padding:15px 0 20px 0; float:left; color:#000;}
* #box1, * #box2 {width:132px; font-size:12px; float:left;}
* #box1 {text-align:right; padding-right:24px; padding-left:80px;}
* #box2 {text-align:left;}
* #footerwrap {margin-top:-230px; position:relative; }
* #footer {width:770px; margin:0 auto; line-height:17px; padding:8px 0 20px 0; color:#8fa8c2; clear:both; text-align:center;}
/* HEADERS ---------- */
h1 {background-repeat: no-repeat; height: 50px; width:419px; text-indent: -999em; margin:15px 0 60px 100px; padding: 0 0 0 0;}
* #drs h2 {font-size:14px; color:#FFF; font-weight:bold;}
* #drs h3 {font-size:13px; color:#547a9f; margin-bottom:0; padding-bottom:0;}
* #footer #address h2 {font-size:12px; color:#2f567a; margin:0; padding:0; font-weight:bold;}
* #content h2 {font-size:14px; color:#3e72ab;}
* #footer h2 {font-size:12px; color:#547a9f; font-weight:normal; margin:0; padding:0;}
h4 {font-size:13px; color:#3e72ab;}
* #content h3 {font-size:13px; color:#b2ba2a;}
/* CLASSES ---------- */
* #footer .sesame {color:#FFF;}
* .img {border:#b2ba2a 3px solid; margin:0 10px 10px 10px; padding:5px;}
* .right {float:right;}
* .left {float:left;}
* .sub#col2 {background:url(images/col2-bg-sub.jpg) no-repeat; }
/* NAVIGATION ---------- */
/* NAVIGATION MAIN ---------- */
ul#nav {list-style: none; padding:46px 0 0 21px; margin:0 0 0 0; width:209px; clear:both;}
/* Sets styles for all links that are inside the ul id="nav" */
* #nav a {display: block;height: 35px; overflow: hidden; text-indent:-999em; width:209px}
/* Set the image for each nav item */
* #ouroffice {background: url(images/nav-our-office.gif); }
* #newpatients {background: url(images/nav-new-patients.gif); }
* #newsletter {background: url(images/nav-newsletter.gif); }
* #careforyoursmile {background: url(images/nav-care-for-your-smile.gif); }
* #restoreyoursmile {background: url(images/nav-restore-your-smile.gif); }
* #enhanceyoursmile {background: url(images/nav-enhance-your-smile.gif); }
* #beforeandaftergallery {background: url(images/nav-before-and-after-gallery.gif); }
* #patientfinancing {background: url(images/nav-patient-financing.gif); }
/** #communityinvolvement {background: url(images/nav-community-involvement.gif); }
*/
* #communityinvolvement {background: url(images/nav-community-involvement2.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 #ouroffice, #nav li.sfhover #ouroffice,
#nav li:hover #newpatients, #nav li.sfhover #newpatients,
#nav li:hover #newsletter, #nav li.sfhover #newsletter,
#nav li:hover #careforyoursmile, #nav li.sfhover #careforyoursmile,
#nav li:hover #restoreyoursmile, #nav li.sfhover #restoreyoursmile,
#nav li:hover #beforeandaftergallery, #nav li.sfhover #beforeandaftergallery,
#nav li:hover #communityinvolvement, #nav li.sfhover #communityinvolvement{background-position:-209px 0pt;}
/* Set the cursor to default arrow so link does not appear clickable */
#nav .active {cursor: default}
* #nav, #nav ul {list-style: none; margin: 0; }
#nav li {display: inline; }
#nav li ul {background: #b2ba2a; left: -999em; padding: 0; position: absolute; z-index: 1; border:#889238 1px solid;}
#nav li:hover ul, #nav li.sfhover ul {left: auto; margin: -25px 0 0 208px; color:#FFF;}
#nav ul li a {height:20px; margin: 0; text-decoration: none; width: 179px; text-indent:0; color:#FFF; font-size:13px; padding-left:5px; font-weight:bold;}
#nav ul li a:hover {background:#889238;}
/* TOPNAV MAIN ---------- */
ul#topnav {list-style: none; margin: 52px 0 0 0; padding:0; width:242px;}
/* Makes the list items sit next to each other */
#topnav li {float: left;}
/* Sets styles for all links that are inside the ul id="nav" */
#topnav a {display: block;height: 29px; text-indent:-999em; }
/* Set the image for each nav item */
* #home {background: url(images/nav-home.gif); width:111px;}
* #contactus {background: url(images/nav-contact-us.gif); width:131px;}
/* Shift the image position up to show the active state */
#topnav a:hover, #topnav .active, #topnav li:hover, #topnav li.sfhover,
#topnav li:hover #contactus, #topnav li.sfhover #contactus,
#topnav li:hover #home, #topnav li.sfhover #home {background-position:0 29px;}
/* Set the cursor to default arrow so link does not appear clickable */
#topnav .active {cursor: default}
* #topnav, #topnav ul{list-style: none; margin: 0; }
#topnav li {display: inline; }
#topnav li ul {background: #b2ba2a; left: -999em; margin: 0; padding: 0; position: absolute; z-index: 1; border:#889238 1px solid;}
#topnav li ul li {float:none;}
#topnav li:hover ul, #topnav li.sfhover ul {display: block; left: auto; margin: -25px 0 0 129px; color:#FFF;}
#topnav li:hover ul li ul, #topnav li.sfhover ul li ul {display: block; left: auto; margin: -15px 0 0 135px; color:#FFF;}
#topnav ul li a {height:20px; margin: 0; text-decoration: none; width: 179px; text-indent:0; color:#FFF; font-size:13px; padding-left:5px; font-weight:bold;}
#topnav ul li a:hover {background:#889238;}
/* LOGO NAVIGATION ---------- */
ul#logo { list-style: none; padding: 0; margin:0; width:781px; }
/* Sets styles for all links that are inside the ul id="nav" */
#logo a {display: block; height: 161px; width:781px; overflow: hidden; text-indent:-999em;}
/* Set the image for each nav item */
* #logolink {background: url(images/header.jpg);}
/* Set the cursor to default arrow so link does not appear clickable */
* #logo .active {cursor: default}
/* ANATOMY OF A TOOTH ---------- */
* #anatomy-of-a-tooth-diagram {background: url(images/anatomy-of-a-tooth/anatomy-of-a-tooth-bg.gif); height: 525px; position: relative; width: 300px}
* #anatomy-of-a-tooth-diagram a {cursor: help; display: block; position: absolute}
* #anatomy-of-a-tooth-diagram 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-diagram a img {border: none; display: block; height: 0; position: absolute; width: 0}
* #anatomy-of-a-tooth-diagram 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}
/* GUM DISEASE ---------- */
img.right {
clear:right;
float:right;
margin:0 0 10px 10px;}
/* jQuery Cycle Before and After */
#before-after-container {
width: 488px;
line-height: 18px;
margin: 0 0 18px 0;
padding: 10px 0 10px 10px;
background-color: #CAD5E9; /* 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 */
z-index:0;
}
#before-after-container ul.slideshow {
list-style: none;
margin: 0;
padding: 0;
width: 488px;
height: 243px;
overflow: hidden;
z-index:0;
}
ul#before-after-cycle li img {
width: 232px;
float: left;
margin-right: 10px;
border: solid 1px #333; /* Customize me */
}
#before-after-container p {
float: left;
width: 50%;
margin: 0 0 10px 0;
}
#before-after-container div.cycle-detail {
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;
color: #333; /* Customize me */
}
#before-after-container .before-after-nav a.activeSlide, #before-after-container .before-after-nav a:hover {color: #009EC7;} /* Customize me */