ind/* CSS Document */
/* HTML, BODY ---------- */
* {margin:0; padding:0;}
body {margin:0; background:#147ba0 url(images/tile-bg.jpg) repeat-x; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:12px; line-height:20px; color:#6d6e71;}
p, h2, h3, ul, blockquote {padding-bottom:20px;}
ul, blockquote, ol {padding-left:30px; padding-right:20px;}
#content a {font-weight:bold; color:#6d6e71;}
a:hover {text-decoration:none;}
a img {border-style:none;}
#footer a {color:#c1e0eb;}
input {margin-right:5px;}
.mixedcase {text-transform:none;}
/* LAYOUT ---------- */
#wrap {margin:0 auto; width:963px; background:url(images/tile-body.gif) repeat-y;}
#body {width:963px; background:url(images/bg-body.jpg) no-repeat; min-height:720px; height:auto !important; height:720px; }
#address {width:225px; background:url(images/bg-address.gif) repeat-y; font-size:11px; line-height:13px; color:#FFF; padding:15px 120px 13px 22px; position:absolute; top:780px; margin-left:20px; z-index:80;}
#address p { padding-bottom:5px;}
#fbwidget {position:absolute; top:1125px; margin-left:35px; z-index:80;}
#social {padding: 4px 0 0 30px; position:absolute; top:819px; margin:235px 0 0 5px; width:225px; z-index:999; background:url(images/bg-nav2.gif) repeat-y bottom; height:auto !important; height:200px; }
#patient-forms {
width:220px; height:74px; font-size:11px; color:#6d6e71; padding:8px 41px 13px 22px; position:absolute; top:853px; margin-left:0; z-index:90;
}
#content {width:594px; padding:171px 69px 30px 300px; clear:both; min-height:1280px; height:auto !important; height:400px;}
#forms {padding:10px; background-color:#FFF; border:3px solid #5b3c20; width:180px; margin: 10px 0 10px 10px; float:right; color:#5b3c20; clear:right;}
#forms h3, #forms a {color:#a6aa62;}
#footer {width:641px; background:url(images/bg-footer.jpg) no-repeat #147ba0; min-height:131px; height:auto !important; height:131px; padding:15px 41px 20px 281px; margin:0 auto; font-size:11px; color:#c1e0eb; text-align:right;}
#logos {width:644px; height:50px; padding-right:14px; padding-bottom:35px;}
/* ---------- BOX INSERTS ---------------- */
#pt-forms {
width: 220px;
float: right;
clear: right;
margin: 0 0 18px 0px;
padding: 0 0 9px;
border: 1px solid #00749a;
background-color:#efefef;
}
#pt-forms dt {
margin: 0 0 9px;
padding: 3px 9px;
color: #ffffff;
background: #00749a;
}
#media-center dd, #pt-forms dd, #directions dd {margin: 0 9px 9px;}
p.pspacer {line-height: 50px;}
/* LOGO ROLLOVERS ---------------------- */
#footerlogos, #footerlogos ul {list-style: none; padding:0; margin:0; width:640px; height:50px;}
#footerlogos li {float:left; margin:0; padding:0;}
#footerlogos a {display: block; margin:0; padding:0;}
#logo-cda, #logo-cao, #logo-aao, #logo-invisalign {
height: 50px;
text-indent: 999em;
overflow:hidden;
}
#logo-cda {background:url(images/banner-cda.gif) no-repeat; width:130px;}
li:hover #logo-cda, li.sfhover #logo-cda, li.active #logo-cda {background:url(images/banner-cda-on.gif) no-repeat;}
#logo-cao {background:url(images/banner-cao.gif) no-repeat; width:284px;}
li:hover #logo-cao, li.sfhover #logo-cao, li.active #logo-cao {background:url(images/banner-cao-on.gif) no-repeat;}
#logo-aao {background:url(images/banner-aao.gif) no-repeat; width:87px;}
li:hover #logo-aao, li.sfhover #logo-aao, li.active #logo-aao {background:url(images/banner-aao-on.gif) no-repeat;}
#logo-invisalign {background:url(images/banner-invisalign.gif) no-repeat; width:126px;}
li:hover #logo-invisalign, li.sfhover #logo-invisalign, li.active #logo-invisalign {background:url(images/banner-invisalign-on.gif) no-repeat;}
/* HEADERS ---------- */
h1 {background-repeat: no-repeat; height: 48px; width:423px; text-indent: -999em; margin: 0; padding:0;}
#content h2 {font-size:14px; color:#147ba0;}
#footer h2 {color:#FFF; font-size:11px;}
h1#logo {
margin: 0;
padding: 17px 0 0 16px;
background-repeat: no-repeat;
width: 343px;/* this width reflects the width of the logo image */
height: 153px; /* this height reflects the height of the heading image */
overflow: hidden;
text-indent: -999em; float:left;} /* hides rich text so only background image shows */
h1#logo a {
display: block;
height: 153px;/*same height as logo h1*/
width: 343px;/*same width as logo h1*/}
/* CLASSES ---------- */
#footer .sesame {color:#0d475c; }
.img {margin:0 0 10px 30px; float:right; border:#6d6e71 1px solid;}
.border {border:#6d6e71 1px solid;}
.right {float:right;margin-left:10px;}
.left {float:left; margin-right:10px;}
.top {color:#e4a732; font-size:11px; font-weight:bold;}
.hide {display:none;}
.flash {z-index: 1; position:absolute; top:6px; width:630px; height: 265px; margin-left:216px;}
.flashp {color:#000; background-image: url(images/1.png); text-align:center; padding-bottom:212px;}
.block {display:block;}
.listnone {list-style:none;}
.center {text-align:center;}
.resources {border:#6d6e71 1px solid;}
.clear {clear:both;}
/* NAVIGATION ---------- */
/* NAVIGATION MAIN ---------- */
ul#nav {list-style: none; padding: 1px 0 0 1px; position:absolute; top:290px; margin:0 0 0 20px; width:225px; z-index:99; background:url(images/bg-nav.gif) no-repeat; min-height:396px; height:auto !important; height:427px; z-index:100}
/* Sets styles for all links that are inside the ul id="nav" */
#nav a {display: block;height: 31px; overflow: hidden; text-indent:-999em; width:224px}
/* Set the image for each nav item */
#aboutouroffice {background: url(images/nav-about-our-office.gif); }
#new-patients {background: url(images/nav-new-patients.gif); }
#aboutorthodontics {background: url(images/nav-about-orthodontics.gif); }
#braces101 {background: url(images/nav-braces-101.gif); }
#emergencycare {background: url(images/nav-emergency-care.gif); }
#before-after {background: url(images/nav-before-after.gif); }
#treatmentoptions {background: url(images/nav-treatment-options.gif); }
#games {background: url(images/nav-games.gif); }
#contactus {background: url(images/nav-contact-us.gif); }
#home {background: url(images/nav-home.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 #aboutorthodontics, #nav li.sfhover #aboutorthodontics,
#nav li:hover #braces101, #nav li.sfhover #braces101,
#nav li:hover #emergencycare, #nav li.sfhover #emergencycare,
#nav li:hover #before-after, #nav li.sfhover #before-after,
#nav li:hover #treatmentoptions, #nav li.sfhover #treatmentoptions,
#nav li:hover #games, #nav li.sfhover #games,
#nav li:hover #home, #nav li.sfhover #home,
#nav li:hover #contactus, #nav li.sfhover #contactus {background-position:-224px 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; padding:0;}
#nav li{display: inline; }
#nav li ul{background: #3d92b3; left: -999em; padding:9px 0; position: absolute; z-index: 1; border:1px solid #09658b;}
#nav li ul li{float:none;}
#nav li:hover ul, #nav li.sfhover ul{left: auto; margin: -30px 0 0 205px; color:#FFF;}
#nav ul li a{height:20px; margin: 0; text-decoration: none; width: 210px; text-indent:0; color:#FFF; font-size:12px; padding-left:13px; font-weight:bold; text-transform:lowercase; font-weight:normal;}
#nav ul li a:hover{background:#026e95;}
#callout-complimentary {background:url(images/callout-complimentary.jpg) no-repeat; width:223px; height:85px; display:block; padding-bottom:60px;}
#callout-invisalign {background:url(images/callout-invisalign.jpg) no-repeat; padding-bottom:30px;}
#callout-invisalign-teen {background:url(images/callout-invisalign-teen.jpg) no-repeat; padding-bottom:30px;}
#blog {background:url(images/icon-blogger.gif) no-repeat; padding-bottom:30px; display:inline}
#facebook {background:url(images/icon-facebook.gif) no-repeat; padding-bottom:30px; display:inline}
#twitter {background:url(images/icon-twitter.gif) no-repeat; padding-bottom:30px; display:inline}
#youtube {background:url(images/icon-YouTube.gif) no-repeat; padding-bottom:30px; display:inline}
a.social { display:inline;}
/* LOGINS NAV ITEMS ---------- */
ul#logins {height: 127px; width:108px; list-style: none; padding:0; margin:0 0 0 808px; position:absolute; top:0; z-index:999; }
/* Sets styles for all links that are inside the ul id="nav" */
#logins {height:127px; width:108px}
#logins li{height:127px; width:108px; z-index:999}
#logins a {display:block;height: 127px; text-indent:-999em; width:108px; line-height:40px; font-size:40px; z-index:999}
#ptlogin a {height:127px; width:108px; z-index:999}
#patientlogin {background: url(images/blank.png); height:127px; width:108px; z-index:999}
a #patientlogin {height:127px; width:108px; z-index:999}
/* Shift the image position up to show the active state */
#logins a:hover, #logins .active, #logins li:hover, #logins li.sfhover {background-position:108px 0; height:127px; width:108px}
/* Set the cursor to default arrow so link does not appear clickable */
#logins .active {cursor: default; height:127px; width:108px}
/*THE GAME ROOM */
div#sesame-game {
background: #000;
line-height: 0;
margin: 10px auto;
text-align: center;
width: 400px}
ul#sesame-games {
list-style: none;
margin: 0;
padding: 0}
ul#sesame-games li {
clear: both;
display: block}
ul#sesame-games img {
border: 0;
margin: 0 0 10px 10px}
ul#sesame-games a.button {
float:right;
height:85px;
width:200px}
ul#sesame-games p {
padding-bottom: 1em}
/* THE DAMON SYSTEM */
h2.media-center {
color:#000033;
margin:0;
padding:5px;}
div.media-center {
background:#336699;
color:#FFF;
display:inline-block;
margin-bottom:10px;
overflow:auto;
padding:10px;}
div.media-center a {
color:#FFF;}
div.media-center img {
border:1px solid #FFF;}
#flash h2 {
visibility:hidden;}
#flash p {
background:#FFFF99;
padding:5px;}
img.right {
float: right;
clear: right;
margin: 0 0 10px 10px;
}
#ptlogin ul{display:none}
#ptlogin:hover ul{display:block}
#patient-login{list-style:none; margin:0; z-index:99; }
#patient-login {position:relative; top:-60px; left:-30px; }
#patient-login a{height:20px;font:1em Arial, Helvetica, sans-serif;border:1px solid #491110;margin-top:-1px; display:block; float:left;padding:5px 7px 0;background:#7e201e;color:#fff;text-decoration:none;text-indent:0}
#patient-login a:hover{cursor:pointer;background:#942623;height:20px}
#patient-login li, #patient-login li:hover {display: block;height:20px}
#patient-login li {display: block;}