/**
 * DrUsal.com Stylesheet
 */

/* base stylse */
body {
    background: url(/include/bg.jpg) 0 0;
    font-size: xsmall;
    /* Font size value for IE4/5 on Windows */
    voice-family: "\"}\"";
    voice-family:inherit;
    font-size:small;
    font-family: verdana, tahoma, helvetica, sans-serif;
    color: #fff;
    padding:0px;
    margin:0px;
    text-align: center;
}

img { behavior: url(/handlers/css/iepngfix.htc);}

#tinymce {
    background: #000;
}

#canvas-top {
    background:transparent url(/include/topBG.jpg) repeat-x scroll 0pt;
    height:297px;
    left:0px;
    margin:0px;
    position:absolute;
    width:100%;
}

#canvas {
    width: 799px;
}

a, a:active, a:link, a:visited{
  color: #FFB114;
  font-size: 1.2em;
  text-decoration: none;
}
a:hover {
  color: #7AB6DF;
  font-size: 1.2em;
  text-decoration: underline;
}

#main-content a:hover {
  background: #333;
}

.dlg a:hover {
  background: #eee;
}

h1 {
    clear:both;
    color:#7AB6DF;
    font-size: 24px;
    font-weight:normal;
    text-align:left;
    text-decoration:none;   
}

.strong {
    font-weight: bold;
}

legend {
    color: #ccc;
}

#feedback {
   position: fixed;
   width: 34px;
   height: 137px;
   right: 0px;
   top: 240px;
   text-indent: -9999px;
}
#feedback a {
   outline: none;
   display: block;
   width: 34px;
   height: 137px;   
   background: url(http://assets.zooluserver.com/drusal/img/btn-question.png);
}
#feedback a:hover { 
   background: url(http://assets.zooluserver.com/drusal/img/btn-question.png) -34px;
}

/* #### form styles #### */
fieldset {
    margin: 0;
    padding: 0;
}

fieldset ul {
    margin: 10px;
}

legend {
    margin-left: 5px;
}

.form-err {
    background: #ccc;
    border: 2px #CF1919 solid;
    font-size: 1em;
}

.error {
    color:#EF7B1D;
}

.form-err h3 {
    font-size: 18px;
    color: #CF1919;
}

/* #### header styles #### */
#canvas .header {
    background:transparent url(/include/splash_top.gif) no-repeat;
    height:390px;
    position:relative;
    width:799px;
    font-family: tahoma, verdana, helvetica, sans-serif;    
}
#canvas .header #splash {
    background:transparent url(/include/splash_body2.jpg) no-repeat scroll 0px 31px;
    height:355px;
    position:relative;
    top: 0;
    width:799px;
}

#location-pop-ip {
    position: absolute;
    top: 20px;
    left: 150px;
}

.nav {
    list-style: none;
}

#address-help {
    font-size: 14px;
    position: absolute;
    left: 365px;
    width: 400px;
    text-align: center;
    top: 140px;
    color: #666;
    font-weight: bold;
}

#address-nav {
    position:absolute;
    top:111px;
    width:400px;
    color:#555555;
    font-size:14pt;
    font-weight:bold;
    left:365px;
    white-space: nowrap;
}
#address-nav li {
    display: inline;
    margin-right: 10px;
    border-right: 2px #666 solid;
    padding-right: 10px;
}


#address-nav li a, #address-nav li a:hover {
    font-size: 18px;
    color: #666;
}

#procedure-nav {
    height:160px;
    margin:auto;
    padding:0px;
    position: relative;
    text-align:center;
    top:190px;
    width:765px;
    z-index:500;
}
#procedure-nav li {
    background:#FFF239 none repeat scroll 0%;
    float:left;
    margin-right:5px;
}
#procedure-nav li a, #procedure-nav li a:active, #procedure-nav li a:link, #procedure-nav li a:visited {
    border:3px solid #FFFFFF;
    color:#F45201;
    display:block;
    font-family:Arial,verdana,helvetica,sans-serif;
    font-size:1.1em;
    font-weight:900;
    height:150px;
    position:relative;
    text-align:center;
    text-decoration:none;
    text-transform:uppercase;
    width:180px;
}
#procedure-nav li a, #procedure-nav li a:active, #procedure-nav li a:link, #procedure-nav li a:visited {
    border:3px solid #FFFFFF;
    color:#F45201;
    display:block;
    font-family:Arial,verdana,helvetica,sans-serif;
    font-size:1.1em;
    font-weight:900;
    height:150px;
    position:relative;
    text-align:center;
    text-decoration:none;
    text-transform:uppercase;
    width:180px;
}
#procedure-nav li a:hover{
    border: 3px #FFFF67 solid;
    color: #fff;
    background: #FFA510;
}

/* #### primary nav styles #### */
#primary-nav {
    position: relative;
    background: url(/include/primary-nav-bg.gif) no-repeat 0 0;
    top: 195px;
    margin: 0px;
    list-style: none;
    height: 65px;
    width: 799px;
    margin: auto;
    padding: 0;
}

#primary-nav li a,  #primary-nav li a:active, #primary-nav li a:link, #primary-nav li a:visited {
    font-size: 10pt;
    color: #000;
}

#primary-nav li {
    float: left;
    display: block;
    text-indent: -9999px;
}
#primary-nav li a {
    display: block;
    height: 35px;
    outline: none;
}

#primary-nav li#home-nav-item {
    width: 79px;
}
#primary-nav li#home-nav-item a:hover {
    background: url(/include/primary-nav-bg-hover.gif);
}
#primary-nav li#home-nav-item.selected a {
    background: url(/include/primary-nav-bg-selected.gif);
}

#primary-nav li#cosmetic-nav-item {
    width: 130px;
}
#primary-nav li#cosmetic-nav-item a:hover {
    background: url(/include/primary-nav-bg-hover.gif) -79px;
}
#primary-nav li#cosmetic-nav-item.selected a {
    background: url(/include/primary-nav-bg-selected.gif) -79px;
}

#primary-nav li#reconstructive-nav-item {
    width: 166px;
}
#primary-nav li#reconstructive-nav-item a:hover {
    background: url(/include/primary-nav-bg-hover.gif) -209px;
}
#primary-nav li#reconstructive-nav-item.selected a {
    background: url(/include/primary-nav-bg-selected.gif) -209px;
}

#primary-nav li#media-nav-item {
    width: 100px;
}
#primary-nav li#media-nav-item a:hover {
    background: url(/include/primary-nav-bg-hover.gif) -375px;
}
#primary-nav li#media-nav-item.selected a {
    background: url(/include/primary-nav-bg-selected.gif) -375px;
}

#primary-nav li#testimonials-nav-item {
    width: 100px;
}
#primary-nav li#testimonials-nav-item a:hover {
    background: url(/include/primary-nav-bg-hover.gif) -475px;
}
#primary-nav li#testimonials-nav-item.selected a {
    background: url(/include/primary-nav-bg-selected.gif) -475px;
}

#primary-nav li#about-nav-item {
    width: 112px;
}
#primary-nav li#about-nav-item a:hover {
    background: url(/include/primary-nav-bg-hover.gif) -575px;
}
#primary-nav li#about-nav-item.selected a {
    background: url(/include/primary-nav-bg-selected.gif) -575px;
}

#primary-nav li#contactus-nav-item {
    width: 110px;
}
#primary-nav li#contactus-nav-item a:hover {
    background: url(/include/primary-nav-bg-hover.gif) -687px;
}
#primary-nav li#contactus-nav-item.selected a {
    background: url(/include/primary-nav-bg-selected.gif) -687px;
}

/* bread crumb styles */
#wgt-breadcrumbs ul li {
    display:inline;
    margin-left: 5px;
    font-size: 9px;
}
#wgt-breadcrumbs {
    right:0;
    top:-8px;
}

/* #### main content #### */
#canvas .content {
    background:#FFFFFF url(/include/mainbg.jpg);
    float:left;
    margin-top: 0px;
    padding: 0;
    padding-top: 25px;
    width:799px;
    line-height: 1.5em;
    
}

#main-content {
    padding: 10px;
    float: left;
    width: 545px;
    padding: 0 20px 50px 0;
}

#main-content h1 {
    height: 39px;
    line-height: 39px;
    clear: both;
}

#main-content ul {
    clear: both;
    margin-bottom: 10px;
    margin-top: 10px;
}

#main-content h2 {
    clear: both;
    font-family: verdana, sans-serif;
    background: #555;
    border-bottom: 1px #fff solid;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 1.2em;
    padding: 3px;
}

/* #### sidebar styles #### */
#left-sidebar {
    width: 230px;
    float: left;
    padding-bottom: 50px;
}
#left-sidebar .sponsor {
    text-align: center;
    margin-top: 20px;
    margin-left: 10px;
    margin-right: 20px;
}

#left-sidebar a, #left-sidebar a:hover {
    font-size: 1em;   
}

#asbpslogo {
    margin-top: 20px;
}

/* #### footer styles #### */
#footer-nav {    
    margin-bottom: 10px;
    font-size: 12px;
}
#footer-nav li {
    display: inline;
    margin-right: 8px;
    padding-right: 8px;
    border-right: 1px #eee solid;
}
.footer {
    background: #333;
    line-height: 1.2em;
    border-top: 1px #666 solid;
    padding: 20px;
    font-size: 10px;
    color: #ccc;
    text-align: center;
}
.footer .copyright {
    margin-bottom: 40px;
}
.footer .copyright a {
    color: #eee;
    padding: 2px;    
   
}
.footer .copyright a:hover {
    color: #000;
    background-color:#7AB6DF;
    text-decoration:underline;
}

.footer a, .footer a:hover {
    font-size: 1em;
}

div.nav-box {
    background: #000 url(http://assets.zooluserver.com/drusal/img/grytoblk.gif) repeat-x scroll 0 0;
    border-color:#FFFFFF;
    border-style:solid;
    border-width:10px 3px 3px;
    margin: 15px;
    margin-top: 0;
    padding: 10px;
    width:154px;
}
div.nav-box ul {
    padding: 10px;
    padding-top: 0;
    padding-right: 2px;
}


#help-links {
    margin-top: 30px;
    width: auto;
}

/* #### table styles #### */
table.zoo {
    color: #000;
    background: #fff;
}

th {
   color: #003E7E;
   border-bottom: 2px #003E7E solid;
   background: #9BD0F8;    
}

th, td {
  padding: 2px 5px 2px 5px;
}

tr.odd {
   background: #eee;
}

/* #### location popup styles #### */
.dlg {
    border: 1px #99C7E7 solid;
    font-family: verdana, tahoma, sans-serif;
}
.dlg a {
    color: blue;
    text-decoration: underline;
    font-size: 12px;
}

.dlg h1.dlg-title-bar  {
    background: #99C7E7;
    margin: 0;
    color: #000;
    font-weight: bold;
}

.location-popup .content h2 {
    font-size: 16px;
    margin-bottom: 5px;
}

.location-popup .content ul {
    list-style: none;
    padding: 0;
}
.location-popup .content li {
    border-bottom: 1px #eee solid;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

.location-popup .content li.last {
    border: 0;
}


/* ####specific page styles #### */

/* homepage: */
#page-welcome #procedures a {
    font-size: 100%;   
}

#page-welcome #procedures li {
    position: relative;
    line-height: 1.8em;
}
#procedures li img {
    cursor:pointer;
    margin-left:8px;
    position:absolute;
    top: 0px;
}

#page-welcome #main-content h1 {
    display: block;
    background: url(http://assets.zooluserver.com/drusal/img/welcome.gif) no-repeat;
    position: relative;
    text-indent: -9999px;
}

/* testimonials: */
#page-testimonials #main-content h1 {
    display: block;
    background: url(http://assets.zooluserver.com/drusal/img/testimonials.gif) no-repeat;
    position: relative;
    text-indent: -9999px;
}

blockquote {
    border: 1px #FFAA18 solid;
    color: #666;
    background: #fff url(http://assets.zooluserver.com/drusal/img/openquote.gif) no-repeat;
    padding: 50px 50px 50px 55px;
}

#page-officepolicies #main-content h2 {
    margin-top: 15px;
}

/* contact: */
#page-contactus #main-content h1 {
    display: block;
    background: url(http://assets.zooluserver.com/drusal/img/contactus.gif) no-repeat;
    position: relative;
    text-indent: -9999px;
}

#page-contactus #main-content .location-content li, #page-contactus #main-content .location-content li.last {
    border-bottom: 1px #666 solid !important;
    margin-bottom: 10px;
    padding: 5px;
    padding-bottom: 10px;
    background: #333;
}

#page-contactus #offices {
    margin-bottom: 40px;
}

#page-contactus .location-content ul {
    list-style: none;
    padding: 0;
}

#page-contactus .location-content h2 {
    font-size: 1.1em;
    background: none;
    border: 0;
    padding: 0;
}

#frm-contact-us .text {
    width: 330px;
}

/* media: */
#page-media #main-content h1 {
    display: block;
    background: url(http://assets.zooluserver.com/drusal/img/media.gif) no-repeat;
    position: relative;
    text-indent: -9999px;
}
/* media styles */
/* for god sake update these please */
.imgbrd {
  border: 1px #ccc solid;
}
.mediacontainer, .videogallery-container {
  border: 1px #FFAA18 solid;
	border-top: 10px #FFAA18 solid;
	background: #fff;
	color: #666;
	width:500px;
}
.mediacontainer a, .mediacontainer a:active, .mediacontainer a:link, .mediacontainera:visited{
  font-size: small;
}

.mediacontainer td {
    padding: 10px;
}

#page-media .mediacontainer .header {
  font-weight: bold;
  text-align: left;
  background: none;
} 
.videogallery-container {
  float: left;
  width: 550px;
  text-align: center;
  margin: 10px;
  height: 200px;
}
.videodescription {
  float: left;
  width: 45%;
  margin: 50px 15px 10px 10px;
}
.videopreview img{
  border: 2px #FFAA18 solid;
}

/* procedures: */
#page-procedures #main-content h1 {
    display: block;
    background: url(http://assets.zooluserver.com/drusal/img/procedures.gif) no-repeat;
    position: relative;
    text-indent: -9999px;
}

dl.procedure-container {
  float: left;
  width:535px;
  border-bottom: 1px #666 solid;  
  padding-top:10px;
  background: #333;
  margin-bottom: 10px;
  padding-bottom: 20px;
}

dl.procedure-container .title {
  font-weight: bold;
  font-size: 110%;
  height:25px;
}

dl.procedure-container .Photo img {
  border: 1px white solid;
}

dl.procedure-container dt {
  width: 150px;
  float: left;
  clear: left;
}
dl.procedure-container dd {
  float: left;
  margin: 10px;
  width: 345px;
}
dl.procedure-container dd p {
  margin-top: 0px;
  position: relative;
}

#procedures li, .procedures li {
  position: relative;
  margin-bottom: 1px;	
}
#procedures li img, .procedures li img {
 position: absolute;
  top: 0px;
  margin-left: 8px;
  cursor: pointer;
}

dl.procedure-container p img {
    cursor:pointer;
    margin-left:7px;
    position:absolute;
    top:-12px;
    right: 0;
}

#procedures a, #procedures a:visited, #procedures a:link, #procedures a:active,
dl.procedure-container dd a, dl.procedure-container dd a:visited, dl.procedure-container dd a:link, dl.procedure-container dd a:active {
  font-size: 100%;
}


/* procedures details */
#procedures-detailed {
    list-style: none;
}
#procedures-detailed li {
    margin-bottom: 40px;
    display: inline;
    float: left;
    clear: both;
    width: 505px;

}

#procedures-detailed li li {
    margin-bottom: 10px;
    list-style: circle;
    float: none;
    width: auto;
}

#page-directions #main-content ol {
    margin: 20px;
    
}

/* ###### before and after styles ##### */
/*
h1 #pagetitle-description {
    color:#73B2DE;
    font-size:10pt;
    position:relative;
    text-decoration:none;
    top:-16px;
}
*/
h1 #pagetitle-description {
    color:#73B2DE;
    display:block;
    font-size:10pt;
    left:370px;
    line-height:10pt;
    position:absolute;
    text-decoration:none;
    top:45px;
    width:400px;
}
.pagination {
    margin-top: 20px;
}

.beforeandafter {
  margin: 0px;
  /* width: 560px; */
}
.beforeandafter img {
  border: 2px white solid;
}

.beforeandafter .galleryphoto {
  width: 260px;
  text-align: center;
  font-weight: bold;
  float: left;
  margin-bottom: 15px;
}
#beforeandafter-example-face-e14 .galleryphoto,
#beforeandafter-example-face-e13 .galleryphoto,
#beforeandafter-example-breast-e22 .galleryphoto,
#beforeandafter-example-body1-e10 .galleryphoto,
#beforeandafter-example-body1-e9 .galleryphoto,
#beforeandafter-example-face-e11 .galleryphoto,
#beforeandafter-example-skin-e3 .galleryphoto, #beforeandafter-example-face-E7 .galleryphoto, #beforeandafter-example-face3-0 .galleryphoto, #beforeandafter-example-breast3-0 .galleryphoto, #beforeandafter-example-body1-3 .galleryphoto{
  height: 320px;
}
#beforeandafter-example-face2-0 .galleryphoto,  #beforeandafter-example-breast3-1 .galleryphoto  {
  height: 250px;
}
.galleryphoto.photo246, #beforeandafter-example-breast-e19 .galleryphoto, #beforeandafter-example-face2-1 .galleryphoto {
  height: 270px;
}
.galleryphoto.photo261, #beforeandafter-example-e11-3 .galleryphoto, #beforeandafter-example-face-E8 .galleryphoto, #beforeandafter-example-face-E9 .galleryphoto {
  height: 310px;
}

.galleryphoto.photo300 {
    height: 340px;
}

#beforeandafter-example-body1-e8 .galleryphoto,
#beforeandafter-example-e13 .galleryphoto  {
    height: 220px;
}
#beforeandafter-example-face-e6 .galleryphoto {
    height: 250px;
}
.beforeandafter .galleryphoto p {
    font-size: 110%;
    color: #fff;
    margin-top: 5px;
    text-transform: uppercase;
}
.beforeandafter-example {
    /* border-bottom: 1px #ccc solid; */
    margin-bottom: 10px;
    float: left;
    width: 520px;
    padding-bottom: 15px;
}
.beforeandafter-example .description {
    text-align: center;
    clear: both;
}
.pagination .next-page {
    float: right;
}
.pagination .prev-page {
    float: left;
}