/* _directory - general settings
==========================================*/
#directory{
  width: 540px;
  float: left;
  position: relative;
}
#directory .userAvatar{
  width: 80px;
  height: 80px;
  display: block;
  background: url(/images/default-80x80.jpg) no-repeat left top;
}

/* lightbox window */
h2.lightbox {
 color: #056483;
 font-size: 18px;
 margin: 5px 0 8px 67px;
}
/* ie8,9 hack */
h2.lightbox {
  margin-left: 60px\0/IE8+9; /* IE8+9  */
}
/* ie8 hack */
h2.lightbox  { margin-left: 67px\9; }

#directory h2 {
  float: left;
  font-size: 1.5em;
  font-weight: bold;
  margin: 0 0 20px 0;
}
/* general settings - headline change city link */
#directory h1 a.changeCity,
#directory h2 a.changeCity{
  font-size: 12px;
	font-weight: normal;
	color: #056483;
  margin-left: 6px;
}
#directory h2 a{
  color: #333333;
}
#directory h2 a:hover{
  text-decoration: underline;
}
/* To prevent multi word sub categories wrapping in header */
#directory h2 span.subCategory{
  white-space: nowrap;
}
#directory h4 {
  margin-top: 10px;
}
#directory li h4 {
  margin-top: 0;
}
/* General settings - h4 with icon for "most popular business" etc. */
#directory h4.icon span{ 
  width: 22px;
  height: 22px;
  display: block;
  background: url(/images/directory/dir-icons.png) repeat-x top left;
  position: absolute;
  top: 3px;
  left: 2px;  
}

/* General settings - h4 with padding according to the title and icon */
#directory h4.catBarsPubs,
#directory h4.catClubs,
#directory h4.catCafesBistros,
#directory h4.catRestaurants,
#directory h4.catHotelsResorts,
#directory h4.catBudget,
#directory h4.catMassage,
#directory h4.catSaunas,
#directory h4.catGyms,
#directory h4.catCommunityCenters,
#directory h4.catCruisingSpots,  
#directory h4.catShopping, 
#directory h4.catServices,
#directory h4.catNightlife,
#directory h4.catFood,
#directory h4.catAccommodation,
#directory h4.catHealth,
#directory h4.catMeetingPlaces,
#directory h4.catBusinesses {
  padding-left: 33px !important;
  width: 497px;
}

/* General settings - h4 with icons according to the category on search results */
#directory h4.catNightlife span{ background-position: 0 0; }
#directory h4.catFood span{ background-position: 0 -22px; }
#directory h4.catAccommodation span{ background-position: 0 -44px }
#directory h4.catHealth span{ background-position: 0 -66px }
#directory h4.catMeetingPlaces span{ background-position: 0 -88px }
#directory h4.catBusinesses span{ background-position: 0 -110px }

/* General settings - h4 with icons according to the subcategory */
#directory h4.catBarsPubs span{ background-position: -22px 0;}
#directory h4.catClubs span{ background-position: -66px 0;}
#directory h4.catCafesBistros span{ background-position: -22px -22px;}
#directory h4.catRestaurants span{ background-position: -44px -22px;}
#directory h4.catHotelsResorts span{ background-position: -22px -44px;}
#directory h4.catBudget span{ background-position: -44px -44px;}
#directory h4.catMassage span{ background-position: -66px -66px;}
#directory h4.catSaunas span{ background-position: -44px -66px;}
#directory h4.catGyms span{ background-position: -22px -66px;}
#directory h4.catCommunityCenters span{ background-position: -22px -88px;}
#directory h4.catCruisingSpots span{ background-position: -44px -88px;}
#directory h4.catShopping span{ background-position: -22px -110px;}
#directory h4.catServices span{ background-position: -44px -110px;}

#directory h4 .btnSeeAll{
  float: right;
  font-size: 11px;
}


/* General settings - h3 with see all link */
#directory h3 .btnSeeAll{
  position: absolute;
  top: 2px;
  right: 10px;
  font-size: 11px;
  text-align:right;
}

#directory .reviewEntry h4 { font-size: 1.2em; }

/* general settings - exceptions for class="listform" */
#directory .listForm { width:538px; }

/* add to icons.css ? */
.iconConfirm { background: transparent url(/images/icons/iconsdev.png) no-repeat scroll -320px -22px; }
.iconMap { background: transparent url(/images/icons/iconsdev.png) no-repeat scroll -100px -40px; }
.iconRatingOne { background: transparent url(/images/icons/iconsdev.png) no-repeat scroll 1px -60px; }
.iconRatingTwo { background: transparent url(/images/icons/iconsdev.png) no-repeat scroll -19px -60px; }
.iconRatingThree { background: transparent url(/images/icons/iconsdev.png) no-repeat scroll -39px -60px; }
.iconRatingFour { background: transparent url(/images/icons/iconsdev.png) no-repeat scroll -59px -60px; }
.iconRatingFive { background: transparent url(/images/icons/iconsdev.png) no-repeat scroll -79px -60px; }

/* - No content display with icon */
.noContentTeaser{
  border: 1px solid #DCDBDB;
  float: left;
  position: relative;
}
.noContentTeaser a{
  background: #FFFFFF url(/images/directory/noContentTeaserBg.png) repeat-x scroll 0 0;
  display: block;
  font-size: 1.2em;
  height: 40px;
  padding: 10px 10px 10px 90px;
  text-align: center;
  width: 437px;
  line-height: 1.25em;
}
.noContentTeaser a.oneLine{
  padding-top: 18px;
  height: 32px;
}
.noContentTeaser a:hover { background-position: 0 -60px; }
.noContentTeaser a.noContentReviews { background-position: 0 -120px; }
.noContentTeaser a.noContentReviews:hover { background-position: 0 -180px; }
.noContentTeaser a span{ 
  font-size: 1.2em;
  color: #333;
}
.noContentTeaser a:hover{ text-decoration: none !important; }

/* general settings - adjust the form_error */
#directory .form_error{
  float: none !important;
  margin-left: 180px;
  width: 226px;
}

/* Revert to site default for add place page */
#directory .addBusinessForm .form_error{ margin-left:230px; }

/* _directory - buttons (add business, add review, etc.) pure css
==========================================*/
/* GO Search Button in right sidebar */
.go {
  float: right; 
  font-size: 11px !important;
  padding: 0px 4px!important;
}
/* ie7 hack */
*:first-child+html .go{
  padding: 1px 4px !important; 
  top: 1px;
  right: -28px;
  position: absolute;
}
/* Chrome/Safari Hack */
@media screen and (-webkit-min-device-pixel-ratio:0) { 
  .go{ padding: 2px 4px !important; font-size: 11px !important; } 
}

/* Cancel button */
.lightboxCancel {
  float: left;
  margin: 10px 0 0 13px;
}

/* 
  buttons - position add business button on the cityscene page next to the <h2> 
  this classname surely could be shorter and more meaningful (!)
*/
.goToAddBusiness{  
  float: right; 
}
/* ie7 hack */
*:first-child+html .goToAddBusiness .btnBlue,
*:first-child+html .goToAddBusiness .btnBlue:hover{
  margin-top: -20px !important;
}

/* _directory - categorymenu 
==========================================*/
#navDir{
  width: 538px;  
  float: left;
  border: 1px dotted #ccc;    
  margin-top: 10px;
  padding-top: 10px;   
  background: #f4f4f4 url(/images/directory/navdir-bg.png) repeat-x bottom left;  
}
#navDir li{
  width: 158px;
  /*height: 75px;*/  
  margin: 0 10px 10px 10px;
  float: left;   
  position: relative;    
}
#navDir li a{
  color: #fff;
  display: block;
  padding: 2px 0 0 30px;
}

/* 
  categorymenu - the <label> tag is used for spanning the background colour for the diffrent main categories
  this class / code is reused for the google maps popup layer
*/
.dirCatMain label{
  background: url(/images/directory/cat-main-bg.png) repeat-x 0px 0px;
  color: #fff;
  font-weight: bold;
  height: 22px;
  display: block;
}

/* categorymenu - colour code the diffrent main categories */
.catNightlife label{ background-position: 0px 0px; }
.catAccommodation label{ background-position: 0px -66px; }
.catFood label{ background-position: 0px -22px; }
.catHealth label{ background-position: 0px -88px; }
.catMeetingPlaces label{ background-position: 0px -44px; }
.catBusinesses label{ background-position: 0px -110px; }

/* categorymenu - adding the icon */
#navDir li span,
#gmap_large_cats ul li span.iconMain{
  width: 22px;
  height: 22px;
  float: left;
  display: block;
  background: url(/images/directory/dir-icons.png) no-repeat 0px 0px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;  
}

/* categorymenu - icons for the main categories */
/* added the icons for the googlemaps cat menu here as well, needs merging and cleaning code!!!!
   so we just have one code for the cat menu! */
#navDir li.catNightlife span,
#gmap_large_cats ul li.catNightlife span.iconMain{ background-position: 0px 0px; }

#navDir li.catAccommodation span,
#gmap_large_cats ul li.catAccommodation span.iconMain{ background-position: 0px -44px; }

#navDir li.catFood span,
#gmap_large_cats ul li.catFood span.iconMain{ background-position: 0px -22px; }

#navDir li.catHealth span,
#gmap_large_cats ul li.catHealth span.iconMain{ background-position: 0px -66px; }

#navDir li.catMeetingPlaces span,
#gmap_large_cats ul li.catMeetingPlaces span.iconMain{ background-position: 0px -88px; }

#navDir li.catBusinesses span,
#gmap_large_cats ul li.catBusinesses span.iconMain{ background-position: 0px -110px; }

/* categorymenu - category 2nd level menu */
#navDir ul{
  float: left;  
  border: 0;  
  margin-top: 5px;
}
#navDir ul li{  
  height: auto !important;       
  margin: 0;  
}

/* categorymenu - icons for the 2nd level menu */
#navDir ul li span,
#gmap_large_cats ul ul li span{
  position: absolute:
  float: left;
  top: 2px;
  left: 4px;
  width: 12px;
  height: 12px;
}

/* subcategory icons for nightlife */
#navDir ul li.catBarsPubs span{ background-position: -88px 0px;  }
#navDir ul li.catClubs span{ background-position: -101px 0px; } /* Should be 100px but moved slightly for visual alignment - image should be tweaked. */

/* subcategory icons for accommodation */
#navDir ul li.catHotelsResorts span{ background-position: -88px -44px; }
#navDir ul li.catBudget span{ background-position: -100px -44px; }

/* subcategory icons for food */
#navDir ul li.catCafesBistros span{ background-position: -88px -22px; }
#navDir ul li.catRestaurants span{ background-position: -100px -22px; }

/* subcategory icons for health */
#navDir ul li.catGyms span{ background-position: -88px -66px; }
#navDir ul li.catSaunas span{ background-position: -100px -66px; }
#navDir ul li.catMassage span{ background-position: -112px -66px; }

/* subcategory icons for meeting places */
#navDir ul li.catCommunityCenters span{ background-position: -88px -88px; }
#navDir ul li.catCruisingSpots span{ background-position: -100px -88px; }

/* subcategory icons for business */
#navDir ul li.catShopping span{ background-position: -88px -110px; }
#navDir ul li.catServices span{ background-position: -100px -110px; }

/*#navDir ul li span{ display: none; }*/
#navDir ul li:hover{ background: #dedfcc; }
#navDir ul li a{
  color: #056483;
  font-size: 11px;    
  padding: 0 5px 0 30px;  
}

/* categorymenu - navdirsub on category page, category (sub)navigation */
#navDirSub{
  width: 100%;
  float: left;
  padding: 0 0 15px 0;
}

#navDirSub li{
  float: left;
  padding-right: 5px;
  color: #056483;
}

#navDirSub li.first-child a{ font-weight: bold; }
#navDirSub .dirIcons{
  position: relative;
  float: left;
  margin-top: -2px;
}
/* Main Category Arrows */
#navDirSub.catNightlife li.first-child .dirIcons { background-position: -124px 0; }
#navDirSub.catFood li.first-child .dirIcons { background-position: -124px -22px; }
#navDirSub.catAccommodation li.first-child .dirIcons { background-position: -124px -44px; }
#navDirSub.catHealth li.first-child .dirIcons { background-position: -124px -66px; }
#navDirSub.catMeetingPlaces li.first-child .dirIcons { background-position: -124px -88px; }
#navDirSub.catBusinesses li.first-child .dirIcons { background-position: -124px -110px; }

#navDirSub.catNightlife li.first-child a,
#navDirSub.catNightlife li a:hover{ color: #c0191d; }
#navDirSub.catAccommodation li.first-child a,
#navDirSub.catAccommodation li a:hover{ color: #338da0; }
#navDirSub.catFood li.first-child a,
#navDirSub.catFood li a:hover{ color: #d06717; }
#navDirSub.catMeetingPlaces li.first-child a,
#navDirSub.catMeetingPlaces li a:hover{ color: #4fac3e; }
#navDirSub.catBusinesses li.first-child a,
#navDirSub.catBusinesses li a:hover{ color: #000; }
#navDirSub.catHealth li.first-child a,
#navDirSub.catHealth li a:hover{ color: #c2085f; }

/*spacing for showing catMenu*/
.catPage #navDir,
.subCatPage #navDir{
  margin-top: -10px;
  margin-bottom: 12px
}

/* categorymenu - 2nd level menu color code for the diffrent categories */
#navDirSub.catNightlife li.ACT a{ 
  color: #c0191d;
  text-decoration: none;
}
#navDirSub.catAccommodation li.ACT a{
  color: #338da0;
  text-decoration: none; 
}
#navDirSub.catFood li.ACT a{
  color: #d06717;
  text-decoration: none;
}
#navDirSub.catMeetingPlaces li.ACT a{
  color: #4fac3e;
  text-decoration: none;
}
#navDirSub.catBusinesses li.ACT a{
  color: #000;
  text-decoration: none;
}
#navDirSub.catHealth li.ACT a{
  color: #c2085f;
  text-decoration: none;
}

/* categorymenu - navdirsub highlight current subcat */
#navDirSub li.ACT a{
  text-decoration: underline;  
}

/* _directory - cityscene 
==========================================*/
.cityscene{  
  float: left;
  width: 100%;
}

/* cityscene - city teaser (image with text) */
#citysceneDetails{
  float: left;
  width: 520px;
  padding: 10px;  
}
#citysceneDetails img{
  float: left;
  margin: 0 10px 0 0;
  padding: 2px;
  border: 1px solid #ccc;  
}
#citysceneDetails p{  
  width: 100%;
  float: left;  
}
/*
.cityScene h3 form{
  top: 4px;
}
*/

/* cityscene - review section */
.reviewSection{
  position: relative;
  float: left;
  width: 100%;      
}

/* cityscene - review content */
.reviewEntry,
.reviewAlternatives{
  width: 250px;
  position: relative;
  float: left;
  padding: 0 10px 10px 10px;      
}
.reviewEntry p{
  clear: left; 
  width: 100%;
  font-size: 11px;
}

/* cityscene - alternating row (is this still needed?) */
.reviewEntryOdd { clear: left; }

/* cityscene - review alternatives (needs a more meaningful name(!) */
.reviewAlternatives li {
  border-bottom: 1px dotted #cadee6;
  font-size: 11px;
  width: 100%;
  float: left;
  padding: 4px 0;  
}
.reviewAlternatives li .reviewRating{ margin-top: -4px; }

.reviewAlternatives a,
.reviewEntry p,
.reviewEntry h4,
.directorySearchResult h4 {
  float: left;
  position: relative;
}
/* cityscene - review published */
.reviewPublished{ font-style: italic; }

/* cityscene reviews */
.cityScene #businessReviews ul.options {
  width: 80px;
}
.cityScene #businessReviews span.dirIcons{
  margin-left: 0;
}

/* _directory - cityscene add review / business forms
==========================================*/
#directory input[class=button] {
  font-weight: bold;
  color: #005e20;
}
.addBusinessButton{ margin-right: 3px !important; }

/* add review/business - already added */
#fuzzyCheck {
  border: 1px solid #ced9e1;
  width: 224px;
  display: block;
  position: relative;
  float: left;
}
#fuzzyCheck p {
  background-color:#E8E8E8;
  color:#333333;
  font-size:0.9em;
  padding:5px;
}
#fuzzyCheck ul {
  margin: 0;
  padding: 0;
  height: 70px;
  overflow-y: scroll;
  width:224px;
}
#fuzzyCheck li{ width:100%; }
#fuzzyCheck li:hover {
    display: block;
    background-color: #ebf4fa;
}
#fuzzyCheck li a {
    padding: 3px 10px 2px 5px;
    display: block;
    font-size: 0.9em;
}
#fuzzyCheck li a:hover {
    font-style: none;
    text-decoration: none;
}
/* add review/business - already added */
#alreadyAdded {
  border: 1px solid #ced9e1;
  width: 224px;
  display: block;
  position: relative;
  float: left;
}
#alreadyAdded p {
  background-color:#E8E8E8;
  color:#333333;
  font-size:0.9em;
  padding:5px;
  float: left;
  width: 214px;
}

/* business already exist - show dropdown list of businesses with the same name */
#alreadyAdded ul {
  margin: 0;
  padding: 0;
  height: 150px;
  overflow-y: scroll;
  width: 224px;
  float: left;
  position: relative;
}
#alreadyAdded li{ 
  float: left;
  width: 100%;
  border-bottom: 1px dotted #ccc;
  padding: 2px 0;  
}
#alreadyAdded li:hover {
  display: block;
  background: #ebf4fa;
}
#alreadyAdded li a {
  float: left;
  padding: 3px 10px 2px 20px;
  display: block;
  font-size: 0.9em;    
  position: relative;
}
#alreadyAdded li a:hover {
    font-style: none;
    text-decoration: none;
}
#alreadyAdded li a span{  
  position: absolute;
  float: left;
  top: 3px;
  left: 4px;
  width: 12px;
  height: 12px;
  background: url(/images/directory/dir-icons.png) repeat-x top left;
}

/* alreadyadded - adding icon to the dropdown list */
#alreadyAdded li.catBarsPubs a span{ background-position: -88px 0px;  }
#alreadyAdded li.catClubs a span{ background-position: -101px 0px; } /* Should be 100px but moved slightly for visual alignment - image should be tweaked. */

/* subcategory icons for accommodation */
#alreadyAdded li.catHotelsResorts a span{ background-position: -88px -44px; }
#alreadyAdded li.catBudget a span{ background-position: -100px -44px; }

/* subcategory icons for food */
#alreadyAdded li.catCafesBistros a span{ background-position: -88px -22px; }
#alreadyAdded li.catRestaurants a span{ background-position: -100px -22px; }

/* subcategory icons for health */
#alreadyAdded li.catGyms a span{ background-position: -88px -66px; }
#alreadyAdded li.catSaunas a span{ background-position: -100px -66px; }
#alreadyAdded li.catMassage a span{ background-position: -112px -66px; }

/* subcategory icons for meeting places */
#alreadyAdded li.catCommunityCenters a span{ background-position: -88px -88px; }
#alreadyAdded li.catCruisingSpots a span{ background-position: -100px -88px; }

/* subcategory icons for business */
#alreadyAdded li.catShopping a span{ background-position: -88px -110px; }
#alreadyAdded li.catServices a span{ background-position: -100px -110px; }




/*addReview Lightwindow label width - overwriting listform*/
.addReviewForm label{ width: 110px !important; }
.addReviewForm .form_error{
  margin-left: 140px;
  width: 286px;
}
.missingInfo .form_error{
  margin-left: 180px;
  width: 256px;
}
/* Missing Information */
#biz_add_info_section label{ width: 150px !important;}
#biz_add_info_section .dirBtn{ margin-right: 5px; }
#biz_add_info_section input#suppinfo_address1,
#biz_add_info_section input#suppinfo_address2,
#biz_add_info_section input#suppinfo_zip_code,
#biz_add_info_section input#suppinfo_telephone,
#biz_add_info_section input#suppinfo_web_site,
#biz_add_info_section input#suppinfo_email{ width: 250px; }

/* 
  add review/business - ???
  sometimes its not possible to avoid more then one exceptional declaration, 
  but in many cases a clever css classname can help fix this bloated code, please check(!)
*/

#directory input[type="text"] {
    width: 220px;
}
#directory select {
    width: 226px;
    font-family: arial;
} 
#directory input.postcodeinput {
    width: 40px;
    margin-right: 4px;
}
#directory input.imageinput {
    width: 150px;
}
#directory select.multiselect {
    width: auto;
    margin-right: 4px;
}

/* 
  add review/business - ???
  bloated exceptions, please check if possible to reduce code(!)
*/
#business_adding_section #DirectoryphotoUpload label,
#biz_add_review_section #DirectoryphotoUpload label,
#biz_add_info_section  #DirectoryphotoUpload label {
    display: none;
}

#addreview_HolderFiles li,
#addbusiness_HolderFiles li,
#addsuppinfo_HolderFiles li {
    width:530px;
}
#addreview_HolderFiles p,
#addbusiness_HolderFiles p,
#addsuppinfo_HolderFiles p {
    display: block;
    position: relative;
    float:left;
    margin-left: 28px;
}
#addreview_HolderFiles p a,
#addbusiness_HolderFiles p a,
#addsuppinfo_HolderFiles p a {
    margin-left: 5px;
}

/* 
  add review/business - ???
  bloated exceptions, please check if possible to reduce code(!)
*/
#biz_add_info_section input[disabled][type='text'],
#business_adding_section input[disabled][type='text'],
#biz_add_review_section input[disabled][type='text'],
#business_adding_section select[disabled],
#biz_add_review_section select[disabled]{
    border: 1px solid #CCD8E3;
    color: #ADADAD;
    padding: 2px;
}
#btn_add_new_business {
    margin-top: 6px;
    display: block;
}
#review_text {
    width: 280px;
    height: 120px;
    font-family: arial;
}
.mandatory {
  font-size: 11px;
}

/* directory - cityscene add review form (wrong place here ?) */
.addReviewForm button{ margin-right: 10px; }

/* _directory - review star rating
==========================================*/
ul.rating {
    width: 90px;
    height: 16px;
    margin-top: 4px;
    padding: 0;
    list-style: none;
    clear: right;
    position: relative;
    background: url(/images/directory/stars.png) no-repeat 0 0;
}
/* add these classes to the ul to effect the change to the correct number of stars */
ul.rating.nostar     { background-position: 0 0 }
ul.rating.onestar    { background-position: 0 -17px }
ul.rating.twostar    { background-position: 0 -34px }
ul.rating.threestar  { background-position: 0 -51px }
ul.rating.fourstar   { background-position: 0 -68px }
ul.rating.fivestar   { background-position: 0 -85px }
ul.rating li {
  cursor: pointer;
  float:left;    
  text-indent:-999em;
  padding: 0;
}
ul.rating li a {
    position: absolute;
    left: 0;
    top: 0;
    width: 17px;
    height: 17px;
    text-decoration: none;
    z-index: 200;
}
ul.rating li.one a    { left: 0; }
ul.rating li.two a    { left: 17px; }
ul.rating li.three a  { left: 34px; }
ul.rating li.four a   { left: 51px; }
ul.rating li.five a   { left: 68px; }
ul.rating li a:hover {
    z-index: 2;
    width: 90px;
    height: 17px;
    overflow: hidden !important;
    left: 0;
    background: url(/images/directory/stars.png) no-repeat 0 0
}
ul.rating li.one a:hover{ background-position: 0 -102px }
ul.rating li.two a:hover{ background-position: 0 -119px }
ul.rating li.three a:hover{ background-position: 0 -136px }
ul.rating li.four a:hover{ background-position: 0 -153px }
ul.rating li.five a:hover{ background-position: 0 -170px }

/* lucene - filter in sidebar fix */
body.searchResult .starsRow{
  width: 100%;
  float: left;
  padding: 10px 0 5px 0;
}
body.searchResult .starsRow ul.rating{ 
  float: left;
  margin: 0; 
} 
body.searchResult .starsRow label{
  float: left;
  padding: 1px 10px 0 0;
  font-weight: bold;
}

/* _directory - business singleview 
==========================================*/
#businessPage{
  border: 1px solid #ccc;
  background: url(/images/directory/business_sv_bg.gif) repeat-x bottom left;
  width: 518px;
  padding: 10px;  
  float: left;  
  position: relative;    
}

/* business singleview  - name of business */
#businessPage h1,
#businessPage h2{ margin: 0; }

/* business singleview  - ratings for that business next to the name (headline) */
#businessPage h1 span.reviewRating,
#businessPage h2 span.reviewRating{
  float: none;
  position: static;
  display: inline-block;
  margin-left: 6px;
}

/* business singleview - sub nav (category navi) sticks under the title */
.businessSubNav{
  width: 100%;
  float: left;
  margin: 0 0 10px 0;    
}
.businessSubNav li{
  /*float: left;*/
  color: #056483;
  /*margin-right: 5px;*/
  display: inline;
}
.businessSubNav li a{
  font-size: 11px; 
}

/* business singleview - fav icon upper right */
#icon_top_fav{
  position: absolute;
  top: 0;
  right: 0;
  width: 89px;
  height: 52px;  
}
#icon_top_fav.faved{
  background: url(/images/directory/ribbon-fav.png) no-repeat left top;
}

/* business singleview - business photos (thumbnails) */
.businessPhotos{
  float: right;
  width: 226px;          
}
.businessPhotos img{
  margin: 0 0 5px 10px;
  border: 1px solid #ccc;
  float: right;
  max-height: 98px;
  max-width: 98px;
  overflow: hidden;
}

/* business photos - ph-photo (placeholder photo) */
.businessPhotos img.ph-photo{
  background: url(/images/directory/ph-photo.png) no-repeat left top;  
  width: 98px;
  height: 98px;
}

/* business photos - add photos button */
.businessPhotos #btn_add_photo{ 
  float: right;
  font-size: 11px;
}

/* business photos - class name for the popupgallery link on thumbs */
.businessPhotos .pg_display{ cursor: pointer; }

/* business details - address, phone, etc. */
#businessDetails{
  float: left;  
  position: relative;
  width: 290px;    
}
#businessDetails h3{
  background: none;
  margin: 0 !important;
  padding: 0 !important;  
  height: auto !important;
  font-size: 1.25em;
}

/* business details - list */
#businessDetails ul{
  width: 100%;
  float: left; 
  margin: 5px 0;
}
#businessDetails ul li.divider{
  margin-bottom: 10px;
}

/* business options - add info if incomplete box */
#businessOptions{
  float: left;  
  position: relative;
  width: 250px;    
}
#businessOptions a{
  background:#FFFFFF url(/images/directory/dir-teaser-bg.png) repeat-x scroll 10px 15px;
  border: 1px solid #ccc;
  display: block;
  font-size: 11px;
  padding: 10px 10px 10px 40px;
  text-align: center;
  width: 220px;
}
#businessOptions a:hover{
  background-image: url(/images/directory/dir-teaser-bg2.png);
  text-decoration: none;
}
#businessOptions img{
  position: absolute;
  margin: 12px;
}
/* business call to action buttons - favourite and add review
added #businessPage as this was affecting 'Save Changes Cancel button positioning' */
#businessPage .businessCTABtn{
  width: 222px;
  padding-top: 10px;
  float: right;    
  position: relative;    
}
#businessPage .businessCTABtn li {
  float: right;
  position: relative;
}
#businessPage .businessCTABtn a{    
  margin: 0 0 0 5px !important;  
}
#businessPage .businessCTABtn .icon{
  float: left;
  margin: 5px 1px 0 0;
  position: relative;
}
#favouriteButton {
  margin: 0 !important;
}

/* _directory - business review
==========================================*/
#businessReviews h4 {
  width: 497px;
}
#businessReviews,
.h3sort{  /* needs cleaning! - this is in SubCategories but @businessReviews is also used in search*/
  float: left;
  width: 100%;
  position: relative;
  padding-bottom: 10px;
}
/* To prevent long names on business page hitting sort form */
#businessPage #businessReviews h3{
  overflow: hidden;
  white-space: nowrap;
}
/* business review - the sorting filter form - this can be condensed later! */
#businessReviews form,
.cityScene h3 form,
.h3sort form{
  position: absolute;
  top: 14px;
  right: 10px;
}


#businessReviews form{
  background: transparent url(/images/directory/dir-h3-bg.png) repeat-x scroll left top !important; 
  padding-left: 5px;
}
#businessReviews form label,
#businessReviews form select,
.h3sort form label,
.h3sort form select{
  font-size: 11px;
}

.cityScene h3 form label,
.cityScene h3 form select{
  font-size: .8em;
} 
#businessReviews form select,
.cityScene form select{
  width: 100px !important;
}
#businessReviews h4.dirTitle {
  padding-left: 33px !important;
}
/* business review - the review listing */
#businessReviews ul{
  float: left;
  width: 100%;
}
#businessReviews ul li{
  float: left;
  width: 100%;
  border-bottom: 1px dotted #ccc;
  padding: 10px 0;
  margin-bottom: 10px;
}

/* business review - left coloum */
#businessReviews ul li .col1{
  float: left;
  width: 80px;
  padding: 0 10px;
}

/* business review - right coloum */
#businessReviews ul li .col2{
  float: left;
  width: 420px;
  padding: 0 10px;
  position: relative;  
}

/* business review - review meta = star rating, timestamp, reviewer name */
#businessReviews .reviewMeta{
  color: #666;
  font-size: 11px;
  padding-bottom: 5px;  
}

/* business review - review content */
#businessReviews .reviewContent{
  width: 320px;
  float: left;  
  color: #666;
  overflow: hidden;
}

/* business review - review content read more button */
#businessReviews .readMore,
.reviewSection .readMore{    
  font-size: 11px !important;    
  clear: both;
  float: left;  
  display: block;
}

/* business review - starratings */
.reviewRating{  
  float: left;
  height: 14px;  
  width: 63px;
  position: relative;  
}
.reviewRating.nostars { background: url(/images/directory/stars.png) no-repeat left -283px !important; }
.reviewRating.onestars { background: url(/images/directory/stars.png) no-repeat scroll left -198px !important; }
.reviewRating.twostars { background: url(/images/directory/stars.png) no-repeat scroll left -215px !important; }
.reviewRating.threestars { background: url(/images/directory/stars.png) no-repeat scroll left -232px !important; }
.reviewRating.fourstars { background: url(/images/directory/stars.png) no-repeat scroll left -249px !important; }
.reviewRating.fivestars { background: url(/images/directory/stars.png) no-repeat scroll left -265px !important; }

/* business review - adjust the positioning of the stars for the review list */
#businessReviews .reviewRating{ margin: -1px 5px 0 0; }

/* business review - review options (was this review helpful thumbs up/down) */
#businessReviews .reviewOptions{  
  width: 60px;
  position: absolute;
  top: 0;
  right: 0;
}
#businessReviews .reviewOptions a{
  float: left;
  position: absolute;      
  left: 0;
}
#businessReviews .reviewOptions a span{ float: left; }
#businessReviews .reviewOptions a.rateUp{ top: 20px; }
#businessReviews .reviewOptions a.rateDown{ top: 50px; }
#businessReviews .reviewOptions a.rateDown span.icons{ margin-top: 5px; }

/* business review - disable review option after vote */
#businessReviews .rate_disabled {  
  cursor: default;  
  text-decoration: none !important;
  opacity: .5;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
}

/* business review - revier points (underneath the useravatar in the col1 on the left side) */
#businessReviews .userReviews{
  color: #666;
  font-size: 11px;
  text-align: center;
  display: block;
}

/* _directory - searchbox in sidebar
==========================================*/
#dirSearchBox label{
  float: left;
  padding: 5px 10px 0 0;
  text-align: right;
  width: 50px;
  font-weight: bold;
}

/* searchbox - select city dropdown */
#dirSearchBox select{
  width: 200px;
  height: 21px;
  font-size: .9666em;  
}
#dirSearchBox optgroup.citiesListInstruction{
  font-size: 1em;
  font-weight: normal !important;
  background-color: #fff;
  font-style: normal !important;
}
#dirSearchBox optgroup{
  background-color: #E3E8CD;
  font-style: normal;
  font-family: arial;
  padding: 0px 3px !important;
  margin: 2px 0 !important;
}
#dirSearchBox #citiesList option{
  background-color: #fff;
  padding-top: 1px;
  padding-bottom: 1px;
  font-weight: normal !important; /* For Chrome! */
}
#dirSearchBox li.searchHint {
  margin-bottom: 0;
  padding-bottom: 5px;
  margin-top: -8px;
  font-size: 0.9em;
}
#dirSearchBox input#search_string {
  width: 161px;
  height: 17px;
  padding: 0 2px;
}
/* ie7 hack 
*:first-child+html #dirSearchBox input#search_string {
  width: 161px;
}*/

#dirSearchBox #citiesList .citySelected{
  background-color: #e8e8e8;
}

#searchCity {
    margin-top: 5px;
}
#searchCity li.first {
    padding-bottom: 5px;
}
#searchCity li {
    margin-bottom: 3px;
    padding-bottom: 0;
}
#dirSearchBox.block li {
    border-bottom: 0px dotted #ccc;
		*display: inline;
}
#dirSearchBox.block {
    *padding-bottom: 15px;
}
#dirSearchBox.block input {
		*margin-bottom: 4px;
}
#dirSearchBox #jumpto_location_name_auto_complete {
    width: 197px;
}
/* _directory - place listings default settings for cityScene, categoryies, subcategories & search results
==========================================*/
.cityAvatar{    
  float: left;  
  border: 1px solid #ccc;
  background: url(/images/directory/default-cityavatar.png) no-repeat center; 
}
.listing{
  width: 540px;
  float: left;  
}
.listing li{
  width: 520px;
  padding: 10px;
  border-bottom: 1px dotted #ccc;
  margin-bottom: 5px;  
  position: relative;
  float: left;
  overflow: hidden;    
}
.listing li.favourite{ border: 0; }

/* searchresult - business headline */
.listing h4{
  font-size: 13px !important;
  font-weight: bold;  
  margin: 0 5px 0 0;    
}
/* ie8,9 hack */
.listing h4{
  font-size: 12px\0/IE8+9; /* IE8+9  */
}

/* listing - position the useravatar or groupavatar to the left */
.listing h4 .cityAvatar{  
  margin: 0 10px 10px 0;
}

.listing li p.addressContent{ width: 420px; }

/* searchresult - review content */
.listing .reviewContent{
  float: left;
  width: 420px;  
  line-height: 1.3em;
}

/* searchresult - review publisher + category name */
.listing .reviewPublished{
  font-style: normal;  
  font-size: 11px;
  color: #666;
}
.listing .locationCategory {
  float: left;
  margin-left: 5px;
  position: relative;
}

/* searchresult - no review added yet */
.listing .noReview{  
  padding: 0 0 5px 20px;
  width: 500px;  
  float: left;
  position: relative;  
}
.listing .noReview .icons{  
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

/* searchresults - address content */
.listing .lHack{     
  float: left;
  width: 375px;
}
/* To 'address' problem of long addressses clashing with options on right */
/*
.addressContent,
#directory .listing h4{ 
  overflow: hidden;
  width: 430px;
}
*/

/* searchresult -  options (add review, favourite) */
.listing ul.options{
  width: 80px;
  position: absolute;
  top: 18px;
  right: 10px;   
}
.listing ul.options li{  
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: right;
  font-size: 11px;
}
#businessReviews ul li.addReview{
  margin-bottom: 0;
}
#businessReviews ul li.favourite{
  border-bottom: 0px;
}
.cityScene #businessReviews ul.options li{
  padding: 0;
}


/* _directory - searchresults
==========================================*/

.dirSearch{}

.dirSearch #businessReviews{ padding: 0;}
.dirSearch h3.catNightlife{ margin: 0 !important; }
.dirSearch .noContentTeaser{ margin-bottom: 15px; }

/* _directory - CityScene
==========================================*/
.cityScene{}

/* problem overriding other setting, so added class name */
#directory h3.citySceneHeader,
#directory h3.whatsNew,
#directory h3.searchData,
#directory.addBusiness h3{
  padding-left: 10px !important;
  width: 525px;
}

/* searchresult - total number of reviews */
.listing .reviewTotal,
#gmapCol1 ul li .reviewTotal,
.gmapBubble .reviewTotal {
  position: relative;
  float: left;
  margin: 0 5px;
}
.cityScene .readMore {
  clear: left;
  float: left;
  position: relative;
  margin: 0.3em 0 0.2em;
}
.cityScene #businessReviews .readMore {
  margin: 0;
}
.reviewDetails {
  position: relative;
  float: left;
  font-size: 11px;
  margin: 0.3em 0;
  clear: left; /* Added for IE7, maybe an easier fix */
  width: 100%; /* Added for IE7, maybe an easier fix */
}
.reviewDetails .voteRating{
  float: left;
  clear: left; /* Added for IE7, maybe an easier fix */
  width: 100%; /* Added for IE7, maybe an easier fix */
}
/* listing - category icon */
.reviewDetails span.dirIcons {
  float: left;
  margin: 0 5px 0 0;
  position: relative;
  top: 2px;
}

/* _directory - search country listing
==========================================*/
/* search - position filter "view all places in your location" */
#directorySearchMain h3 a{
  font-size: 11px;
  font-weight: normal;  
  position: absolute;
  right: 10px;
  top: 5px;
}
#directorySearchMain {
    position:relative;
    float:left;
}
#directorySearchMain  #jumpto_location_name_auto_complete {
  width: 226px;
}
#directorySearchMain  #jumpto_location_name_auto_complete ul {
    margin-top: 0;
    padding-top: 0;
}
#directorySearchMain #jumpto_location_name_auto_complete li {
    margin-top: 0;
}
#directorySearchMain ul {
    margin-top: 10px; 
}
#directorySearchMain label {
    float:left;
    font-size:1.1em;
    font-weight:bold;
    padding:2px 12px 0 0;
    text-align:right;
    width:165px;
}
#directorySearchMain input[type="text"] {
    border: 1px solid #99B1BB;
    font-size: 1em;
    padding:3px;
}
#directorySearchMain li {
  margin-top: 15px;
}
#directorySearchMain li.searchHint {
    font-size: 0.9em;
    margin-top: 2px;
    clear: both;
}
#directorySearchMain li.searchHint label {
      text-align: left;
}
#directorySearchMain input {
    width: 130px;
    font-size: 1em;
}
#directorySearchMain input.button {
    width: auto;
    font-weight:normal;
}
#directorySearchMain ul {
    padding: 35px 0 0;
}
#directorySearchMain .form_error {
    margin-left:177px;
    width:228px;
}
#directorySearchMain p a {
    margin-left: 20px;
}
#directorySearchMain span.icons {
    position:absolute;
}

/* _directory - cities overview page 
==========================================*/
/* cities overview page - country flag + country name  */
#directory.citiesOverview h3{
  padding: 5px 5px 5px 10px !important;  
  width: 525px;
  margin-bottom: -10px;
}
.citiesOverview li span.country{ 
  margin-right: 5px;
  left: 0;
  position: relative;
}

/* citiesoverview - list of cities */
.citiesOverview ul {
  float: left;
	overflow: hidden;
  width: 100%;  
  margin-top: 10px;    
}
.citiesOverview li {
  padding: 3px 10px 2px 10px;  
  border-bottom: 1px dotted #ccc;
}

/* citiesoverview - 2nd level? */
.citiesOverview li li{
  margin: 0;
}

/* citieoverview - highlight default city */
.citiesOverview li.defaultCity{
  background: #eee;  
  color: #666;      
}
.citiesOverview li.defaultCity a{
  color: #666 !important;
}
.citiesOverview li span {
    position: absolute;
    right: 10px;
}
.citiesOverview span.setDefaultCity,
.citiesOverview span.setDefaultCityTxt{
  position: absolute;
  right: 2px;
  font-size: 11px;  
}
.citiesOverview span.setDefaultCity {
  display: none;
}
.citiesOverview li:hover span.setDefaultCity { display: inline; }
.citiesOverview li:hover span.setDefaultCity a{ color: #056483; }
.citiesOverview li.defaultCity span.setDefaultCity { display: none !important; }

/* citieoverview - display icon and text for "your current city" */
.citiesOverview span.setDefaultCityTxt{ right: 25px;}
.citiesOverview span.setDefaultCityTxt span{
  position: absolute;
  top: 0;
  right: -23px;
}







/*****************************************************
  SIDEBAR (right) properties
*****************************************************/

/* 
  directory - adjust the error / success msg
  one thing, i think its BAD to choose .directory as classname for the (right)sidebar on the directories(!)
  why? because the main content wrapper for the directories is #directory(!), so for the sidebar sth meaningful like
  .dirAside or .dirSupp would have done a better trick(!) - i agree! just thats how the guys developed it at the start, i did argue for this, enough times. Once complete, we can revert back to how we want.
  
  Update - Changed to .dirSidebar
*/

body.directory .block li {
    margin-bottom: 5px;
    border-bottom: 1px dotted #CCC;
    position: relative;
}

.directory .noticeSuccess,
.directory .noticeError {
  margin: 0 0 10px 0;
}

/* _directory - google map widget (siderbar)
==========================================*/
#googleMapWidget span.icons {
  left: 0px;
  position: absolute;
  top: 0px;
  width: 17px;
  height: 17px;
}

#googleMapWidget ul {
  margin: 15px 0 0 0;
}
#googleMapWidget li {
  border-bottom: 0px dotted #CCCCCC;
}
#googleMapWidget ul a {
  display: block;
  padding-left: 25px;
}
#googleMapWidget li{
  position: relative;    
}
/* Line up copyright notice, and hide overflow */
#googleMapWidget #copyright{
  bottom: 6px !important;
  left: 70px !important;
  right: auto !important;
}
#googleMapWidget #HolderGmap,
#googleMapWidget #HolderBCGmap{
  overflow: hidden;
}
/* please cleanup this code */
.gmnoprint span, .gmnoprint a {
    font-size: 0.9em;
}
#directoryGoogleMap div[dir="ltr"] {
    left:3px;
    text-align:left !important;
}
#directoryGoogleMap img[src="http://maps.google.com/intl/en_ALL/mapfiles/poweredby.png"] {
    left:0 !important;
    position: absolute;
    bottom: 12px;
}
#directoryGoogleMap  #HolderGmap {
    overflow: hidden !important;
}

/* Removed bottom borders from IE6 as inconsistent results */
* html body.directory .block li {
    border-bottom: 0px dotted #CCC;
}
body.directory #contentWrapper {
    background: transparent url(/images/content/content_bg.gif) repeat-y scroll left top;
}

/* _directory - people in the city + people who also favourited this business (sidebar)
==========================================*/
#dirPeopleCity,
#dirPeopleFaved{ overflow: hidden }


/* _directory - Other Popular Locations (sidebar)
==========================================*/

#directoryPopularLocations { overflow: hidden; }
#directoryPopularLocations li { padding: 0 0 8px; }
#directoryPopularLocations p{ padding-top: 3px }
#directoryPopularLocations .reviewTotal{ font-size: 11px; }
#directoryPopularLocations .reviewRating{ margin-top: -1px; }

/* _directory - top scenesters (sidebar)
==========================================*/
#directoryScenesters ul{
  width: 100%;
  float: left;
}
#directoryScenesters ul li{
  float: left;
  width: 100%;
  padding-bottom: 4px;  
}
#directoryScenesters ul li:last-child{
  border: 0;
  padding-bottom: 0px;    
}
#directoryScenesters img{
  width: 38px;
  height: 38px;
}
#directoryScenesters p{  
  float: right;  
  width: 150px; 
  margin-top: 0;   
}
#directoryScenesters p a{
  display: block;  
  margin-left: -1px;
}
#directoryScenesters p span{
  font-size: 11px;
  display: block;
}
#directoryScenesters p span.cityName{
  float: left;
  margin-top: -2px;
}
/* top scenesters - <li> exception for "no review" */
#directoryScenesters .noReviews li{ border: 0;}

#directoryScenesters .add_review_for_cat {
    padding-left: 0;
}

#directoryScenesters .username{
  font-weight: bold;
  font-size: 12px;
}

#directoryScenesters .username{
  font-weight: bold;
  font-size: 12px;
}

/* ===== Photo Gallery CSS ===== */
#biz_photo_gallery_section{
    background-color:#000;
    position: relative;
    height: 408px;
    padding: 0;
}
#slideshow {
    list-style:none;
    color:#fff;
}
#slideshow span{ display:none }
#wrapper {
    width: 525px;
    margin: 0 auto;
    background: #FFFFFF url(/images/directory/gallery/greybg.png) repeat-x scroll 0 bottom;
    padding: 5px 0;
    height: 420px;
    position: relative;
    float:left;
}
#wrapper * {
    margin: 0;
    padding: 0
}
#fullsize {
    position: relative;
    width: 500px;
    height: 300px;
    overflow: hidden;
    padding: 0;
    border: 5px solid #D2D2D2;
    background: #000;
    margin: 3px 0 0 7px;

}
#information {
    position: absolute;
    left: 0px;
    bottom: 0;
    width: 500px;
    color: #313030;
    line-height: 1.3em;
    text-align: left;
    height: 0;
    background: #FFF;
    color: #313030;
    overflow: hidden;
    z-index: 200;
    opacity: .7;
    filter: alpha(opacity=70);
}
#information h3 {
    padding: 4px 8px 0;
    font-size: 14px;
    font-weight: bold;
}
#information p {
    padding: 0 8px 8px;
    font-size: 0.95em;
}
#image {
    width: 500px;
    position: relative;
    float: left;
    text-align: left;
    overflow: hidden;
    height: 300px;
}
#image img {
    position: absolute;
    z-index: 25;
    height: auto; /* Configure height/width auto to see which is better */
    border: 0px solid #D2D2D2;
} 
.imgnav {
    position: absolute;
    width: 25%;
    height: 306px;
    cursor: pointer;
    z-index: 150;
}
#imgprev {
    left: 0;
    background: url(/images/directory/gallery/left.gif) left center no-repeat;

}
#imgnext {
    right: 0;
    background: url(/images/directory/gallery/right.gif) right center no-repeat;
}
#imglink {
    position: absolute;
    height: 306px;
    width: 100%;
    z-index: 100;
    opacity: .4;
    filter: alpha(opacity=40);
}
.linkhover {
    background:url(/images/directory/gallery/link.gif) center center no-repeat;
}
#thumbnails {
    padding: 20px 0 0 12px;
    float:left;
    position:relative;
    width: 500px;
}
#slideleft {
    float:left;
    width:15px;
    height:81px;
    background:transparent url(/images/directory/gallery/scroll-left.gif) center center no-repeat;
    cursor:pointer;
}
#slideright {
    float: right;
    width: 15px;
    height: 81px;
    background: transparent url(/images/directory/gallery/scroll-right.gif) center center no-repeat;
    cursor: pointer;
}
#slidearea {
    float: left;
    position: relative;
    width: 456px;
    margin: 0 7px;
    height: 83px;
    overflow: hidden;
}
#slider {
    height: 81px;
    overflow: hidden;
    position: absolute;
    left: 0;
}
#slidearea #slider{ background: none !important; } 

#slider img {
    cursor: pointer;
    border: 1px solid #575859;
    padding: 0;
    height: 80px;
}
#slider img:last-child {
    margin-right:0 !important;
}
#GalleryTitle {
    background-color:#000;
    text-align:left;
    font-size:1em;
    color:#FFFCCF;
    height:23px;
    text-align:left;
    display: none;
}
#GalleryTitle span {
    font-size:1.2em;
    left:18px;
    position:absolute;
    color: #fffccf;
}
#GalleryTitle a {
    position:absolute;
    right:18px;
    top:12px;
    color: #FFF;
}
.photoCounter {
    display: inline;
}

/* _directory - google maps (large popup layer) 
==========================================*/
h2.gmapLocation{
  font-weight: bold;
  font-size: 1.5em;
  padding: 0 5px;
  position: relative;
  top: -5px;
  left: 0;
  width: 500px;
}

/* google maps - left coloumn */
#gmapCol1{
  width: 200px;
  padding: 10px;     
  float: left;        
}

/* google maps - list of businesses */
#gmapCol1 ul{
  width: 210px;    
  height: 100%;
  float: left;
  border: 1px solid #ccc;
  overflow: auto;  
  overflow-x: hidden;
  overflow-y: auto;  
  position: relative;
}
#gmapCol1 ul li{
  width: 198px;
  padding: 5px;  
  float: left;
  border-bottom: 1px dotted #999;  
}
#gmapCol1 ul li p{
  width: 190px;
}
#gmapCol1 ul li:hover{
  background: #eaeaea;
  cursor: pointer;
}
#gmapCol1 ul li h4 a,
.gmapBubble h4 a{
  font-size: 1em !important;
  font-weight: bold !important; 
  margin-right: 5px;
}

/* google maps - right coloumn */
#gmapCol2{
  float: right;
  width: 600px;
  padding: 10px;    
}

/* google maps - the google map (js) */
#gmap_large_map{ 
  height: 470px;
}

/* google maps - categorymenu */
#gmap_large_cats{
  position: absolute;  
  top: 12px;
  left: 232px;
  z-index: 10;
  width: 590px;
  /*height: 180px;    */
  float: left;  
}

/* google maps - toogle (hide filter) */
#gmapToogle{
  display: block;
  float: left;
  width: 110px;
  height: 30px;    
  position: relative;
  top: -10px;
  left: 467px;
}
#gmapToogle.toggleUp{background: url(/images/directory/gmap_toggle_up.png) no-repeat top left;}
#gmapToogle.toggleDown{background: url(/images/directory/gmap_toggle_down.png) no-repeat top left;}

/* google maps - the categories list */
#gmap_large_cats ul{
  float: left;
  width: 588px; 
  padding: 10px 5px 20px 5px;   
  background: url(/images/directory/gmap_menu_bg.png) repeat-x bottom left !important;  
  border: 1px dotted #ccc;
  border-width: 1px 1px 0 1px;
}

/* google maps - main cat */
#gmap_large_cats ul li{
  float: left;
  width: 195px;
  height: 75px;
  position: relative;  
}
#gmap_large_cats ul li label{
  width: 170px;
  padding-left: 10px;
  float: left;  
}

/* google maps - align checkboxes */
#gmap_large_cats ul li input{
  position: relative;
  top: 2px;
  left: 145px;
}

/* google maps - subcat */
#gmap_large_cats ul ul{
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
}
#gmap_large_cats ul ul li{
  font-size: 11px;
  width: 180px;    
  height: 17px !important; 
  font-weight: normal;  
  position: relative;
  clear: left;          
}
/*code also in NavDir, needs merging into one*/
#gmap_large_cats ul ul li span{
  top: 5px;
}
#gmap_large_cats ul ul li label{
  width: 180px;
  padding: 0;
}

/* google maps - align checkboxes sublevel*/
#gmap_large_cats ul ul li input{
  left: 145px;
}
#gmap_large_cats ul ul li:hover{
  background: #dedfcc;
}
#gmap_large_cats ul ul li.dirCatSub label{
  background: none !important; 
  color: #333;   
  font-weight: normal;   
  padding-left: 10px; 
}

/* googlemap bubble! */
.gmapBubble{
  background: #fff;
  width: 200px;
  padding: 7px 10px; 
  border: 1px solid #ccc;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -webkit-box-shadow: 3px 3px 5px #333;
  -moz-box-shadow: 3px 3px 5px #333;
}
.gmapBubbleLB {}
.gmapBubbleRT {}
.gmapBubbleRB {}
.gmapBubbleLT {}

/*so long addresses wrap*/
.gmapBubble p{ width: 190px; }

/*loading gif*/
.loadingMap{
  background: url(/images/directory/loadingbk.png);
  display: block;
  height: 60px;
  width: 225px;
}

.loadingMap img{
  float: left;
  margin: 13px 0 0 45px;
}
.loadingMap p{
  color: #ccc;
  float: left;
  margin: 21px 0 0 10px;
}

/* No Pins Teaser in left column */
#gmap_large .dirGmapInstruction li{
  border-bottom: 0;
}
#gmap_large .dirGmapInstruction li:hover {
  background: #fff;
}
#gmap_large .dirGmapInstruction h4{
  font-weight: bold;
  line-height: 1.25em;
  margin-bottom: 1em;
}
#gmap_large .dirGmapInstruction #businessOptions{
  margin-top: 10px;
}
#gmap_large .dirGmapInstruction #businessOptions a {
  color: #333333 !important;
  height: 30px;
  padding: 8px 30px 10px 60px;
  width: 108px;
	line-height: 1.5;
}
#gmap_large .dirGmapInstruction #businessOptions img{
  left: 0;
  top:-4px;
}

/* _directory - photoupload for business
the id name is not very meaningful(!) 
==========================================*/
#biz_add_photo_section{
  float: left;
  height: 200px;
  width: 390px; 
  line-height: 1.5;
  padding: 5px;
  position: relative;
}
#biz_add_photo_section p.uploadInfo{
  width: 245px;  
  font-size: 11px;  
  color: #666;
  margin-top: 5px;
}

/* photoupload for business - flash upload button */
#biz_add_photo_section .swfupload{
  position: absolute;
  top: 13px;
  right: 5px; 
}

/* photoupload for business - list of selected files - headline*/
#biz_add_photo_section #HolderProgress{
  background: #eaeaea;
  font-size: 1.25em;
  font-weight: bold;
  width: 380px;
  padding: 5px;
  float: left;
  margin-top: 10px;
}

/* photoupload for business - display remaining uploadtime */
.uploadTime{
  font-size: 11px;
  color: #999;
}

/* photoupload for business - list of selected files */
.listUploadFiles{
  width: 390px;
  height: 84px;
  float: left;  
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 !important;
  margin: 0 0 10px 0 !important;
  position: relative;  
}
.listUploadFiles li{
  padding: 2px;
  color: #666;
  font-size: 11px;
  position: relative;
  border-bottom: 1px dotted #ccc;
}
.listUploadFiles li.ACT{
  color: #056483;
  font-weight: bold;
}
.listUploadFiles li.last-child{
  border: 0;
  text-align: right;
  padding: 10px 2px;
}

/* photoupload for business - uploadfilename */

.listUploadFiles .fileState,
.listUploadFiles .fileAction{
    float: right !important;
}

/* photoupload for business - position the uploading gif */
.listUploadFiles li img{
  top: 5px;
  left: 0;
}

/* message to show if photos uploaded, cancelled, error*/
.uploadSummary{
  font-weight: bold;
  position: absolute;
  bottom: 0;
  left: 5px;
}
.uploadSummary li{
  display: none;
}
.uploadSummary.terms .terms{
  font-weight: normal;
}
.uploadSummary.success .success,
.uploadSummary.someFail .someFail,
.uploadSummary.allFail .allFail,
.uploadSummary.canceled .canceled,
.uploadSummary.terms .terms{
  display: block;
}

/* Upload, Cancel, Done buttons*/
.uploadAction{
  position: absolute;
  bottom: 2px;
  left: 340px;
}
.uploadAction li{
    display: none;
}
.uploadAction .dirBtn{ /* did not use float right because safari on Mac renders button text below button*/
  font-weight: normal;
  border: 1px solid #fff;
}
.uploadAction.start .start,
.uploadAction.cancel .cancel,
.uploadAction.done .done{
  display: block;
}


/* _Logged Out Directory Pages 
==========================================*/
/* _Logged Out Sitewide */

.directoryLoggedOut h1{
  font-size: 1.5em;
  font-weight: bold;
  margin: 0 0 5px -1px;
	max-width: 420px;
	overflow: hidden;
  position: relative;
	float: left;
}
.directoryLoggedOut .citiesOverview h1{ float: none; }
.directoryLoggedOut h1 a { color: #333 }
.directoryLoggedOut h1 a:hover { text-decoration:none; }

/* _Logged Out Footer */

#siteinfo .gayguide li {
  color: #fff;
  text-align: left;
}
#siteinfo .gayguide li:nth-child(1) { font-weight: bold; }
.gayguide { width: 170px }



/* _Select Your City */

.cityList {
  float: left;	
  position: relative;
  padding-bottom: 30px;
	width: 100%;
}
.cityListLeft,
.cityListRight {
  overflow: hidden;
  position: relative;
  float: left;
  width: 260px;
  padding-bottom: 10px;
}
.cityListRight { float: right; }
.directoryLoggedOut #directory .cityList h3{
  width: auto;
	float: none;
}

.directoryLoggedOut .noContentTeaser{ margin-top: 10px; }









/* _People in <<AREA>>
==========================================*/
#dirPeopleCity #avatarWidget {
  padding: 2px !important;
}