/* Basics tags */
body { 
  margin:0px; 
  background-color: #F6F8Fe; 
  color: #383054; 
  text-align:center;
  padding:0px;
}

table {
    border-collapse:collapse;
}
td {vertical-align:top}
body, p, ol, ul, td {
  font-family: verdana, arial, helvetica, sans-serif;
  font-size:   12px;
}

p, ol, ul, td, div {
  text-align:left;
}

h1,h2,h3,h4 {
    margin-top:2px;
    margin-bottom:2px;
    color: #555;
}

ul {margin:0px; padding-left:20px;}
li {font-size:10px; list-style-type:square;}
li.larger{font-size:12px;}

pre {
  background-color: #eee;
  padding: 10px;
  font-size: 11px;
}

img {border:0px; margin:0px;}

a { color: #2278A5; text-decoration:none;}
a:hover { background-color:yellow; }
a.no-hover:hover {background-color:transparent !important;}
a img {border:0px;}
a.small {font-size:10px; font-weight:normal}

.faux-link {
    cursor:pointer;
}

/* contains the page as a whole */
#top-level-contents {
  width: 900px;
  margin: 3px auto 20px auto;
  padding-bottom:0px;
  position:relative;
  background:white;
  border:1px solid #AAA;
  //min-height:750px;
  //height:100%;
}

/*---------------------------------------------------------*/
/* General Layout stuff */
.column-container .column {
    float:left;
    width:50%;
}

.column-container .three-quarters {
    width:75% !important;
}

.column-container .one-quarter {
    width:25% !important;
}

.padded-content {
  margin:30px 60px 20px 60px;
}

.padded-content p, li.padded {
  margin-left:30px;
  line-height:1.8;
}

/*---------------------------------------------------------------------------*/
/* banner */
#banner {
  background:url('../images/banner-bg-50.gif') top left repeat-x;
  border-bottom:1px solid #bbb;
  height:50px;
  position:relative;
  padding-left: 10px;  
}

#banner-logo {
  margin-left:10px;
}

#banner a {color:#fff;font-size:13px;}
#banner a:hover {
  background:transparent;
  text-decoration:underline;
}

#breadcrumb-container{
  position:absolute;
  top:21px;
  left:144px;
  color:#444;
}

/*-------------------------------------------------------------------- */
/* The sidebar column*/
td#sidebar {
  border-right:1px solid #aaa;
  vertical-align:top;
  padding:8px 16px 16px 16px;
  width:200px;  
}
.explanation {
  font-size:10px;
  color:#888;
}

#sidebar h3 {
  color:#A30000;
  margin-top:4px;
}

li.state{
  list-style-type:none; 
  position:relative;
  left:-20px;
  font-size:18px;
  color:#888;
}
li.city{
  list-style-image: url('../images/bullet-dashed-corner.gif');
  font-size:12px;
}
li.current {
  font-weight:bold;
}

span.count {
  font-size:14px;
  font-weight:bold;
}

/*-------------------------------------------------------------------- */
/* The content column*/
td#content {
  width:700px;
}

/*-------------------------------------------------------------------- */
/* the spot list table */
#spot-list {
    width:700px;
}

#spot-list td { 
    padding: 12px 8px 12px 8px;
    vertical-align:top; 
    border-top:1px solid white;
    border-bottom:1px solid #DDD;
}

#spot-list tr.odd { 
    background:#F7F7F7; 
}
#spot-list tr.even { 
    background:#EEE; 
}
#spot-list th {
    padding: 4px 0px 4px 5px;
    text-align:left;
    font-size:26px;
    font-weight:bold;
    color:#BBB;
}

#spot-list td.first-col {
  padding-left:18px;
}
#spot-list td.second-col {
    width:150px;
    font-size:10px;
}
#spot-list td.third-col {
    width:250px;
    font-size:10px;
}

/*rating display within the list table */
#spot-list td.second-col .rating-label {
  display:none;
}

/*comments-list -- same list styles as general list styles above*/

/*-----------------------------------------------------------*/
/* map page */
a.filter {
  background:url('../images/checkbox-unchecked.gif') no-repeat;
  color:black;
  font-size:14px;
  padding-left:20px;
  margin:0 6px 0 4px;;
}

a.filter:hover {
  background:url('../images/checkbox-hover.gif') no-repeat;
}

a.checked, a.checked:hover {
  background:url('../images/checkbox-checked.gif') no-repeat;
}


.map-balloon {
  font-size:10px;
}

#large-google-map {
    width: 700px; 
    height: 622px;     
}

#map-loading-indicator {
  position:absolute;
  top:4px;
  right:0px;
  width:80px;
  padding:3px;
  background-color: #5F5;
  z-index:9999;
  display:none;
}

/* elabel style */
.elabel {
  background-color:#ffffff;
  font-size:10px;
  border:1px #006699 solid;
}

/* HACK -- this style is duplicated in wifi-ie.css */
.bigmap-controls-backdrop {position:absolute;opacity:.90;z-index:20;background:#fff;top:0px;left:0px; height:35px;width:100%;border-bottom:1px solid #999;}
.bigmap-controls{position:absolute;z-index:21;padding:10px; top:0px;left:0px; height:35px;width:100%;}

/*-------------------------------------------------------------------- */
/*An individual spot listing */
.spot-name { 
  font-size:22px;
  display:block;
  font-weight:bold;
}
.spot-neighborhood { 
  display:block;
  margin-left:20px;
  font-size:14px;
  font-weight:bold;
  color: #666;
}

.spot-address{
  display:block;
  margin-left:20px;
  font-size:12px;
  font-weight:bold;
  color: #666;
}

.not-free {color:#f33;font-weight:bold;}

.spot-icons {margin:3px 0px 3px 20px ; font-size:10px; color:#666;}
.spot-notes {margin-top:6px; font-size:10px;}

/*-------------------------------------------------------------------*/
/* The individual spot display page */
.individual-spot-display .column .inner{
  margin: 20px 0px 0px 20px;
}

.spot-buttons {
  margin-top:30px;
}
.spot-buttons input{
  display:inline;
}

.spot-ratings .rating-label {
    display:block;
    float:left;
    width:175px;
    text-align:right;
    margin:4px 16px 0px 0px;
}

.spot-ratings .rating-body {
  margin-top:3px;
  float:left;
}

.rating-spinner {
  display:none;
}

.rating-wrapper {
  height:34px;
}

#review-area{
  border-top:1px solid #AAA;
  margin-top:8px;
  padding:12px 20px 20px 20px;
  background: url('/images/light-blue-gradient.png') top left repeat-x;	
}

#review-form {
  display:none;
}

#review-area.show-form #review-form{
  display:block;
}
#review-area.show-form #add-review-button {
  display:none;
}

.review-intro{
  font-style:normal;
}

.review-intro .author-name {
  color:#666;
  font-weight:bold;
}

ul.reviews { 
  padding-right:220px;
  list-style-type:none;
}

ul.reviews li{
  margin-top:8px;
  font-size:14px;
  color:#888;
  font-weight:normal;
  line-height:22px;
  list-style-type:none;
}

/*-------------------------------------------------------------------*/
/* The spot edit / new page */
.small-map-container {
  position:relative;
}

#streetview-available {
  position:absolute;
  display:none;
  top:0px;
  left:360px;
  background:black;
  padding:3px;
  cursor:pointer;
  z-index:100;
  color:white;
}
#streetview {
  display:none;
  position:absolute;
  top:0px;
  left:0px;
  background:black;
  z-index:101;
  border-bottom:1px solid #333;
  border-bottom:1px solid #333;
}
.required { color: red; margin-right:2px; }

input, textarea {
  margin:2px; /* This is so the form-outlining script doesn't make the page "jump" when it initializes*/
}

.field-notes {
  font-size:10px;
  color:#666;
}

/* general purpose table for input */
table.form-labels-left td.label { padding:3px 15px 3px 10px;text-align:right; vertical-align:top; background-color:#EEF;} 

/* The address warning stuff */
#address-warning-icon { display: none; }
#address-unsure-icon { display: none; }
#address-good-icon { display: none; }

.address-warning #address-warning-icon { display:inline; }
.address-unsure #address-unsure-icon { display:inline; }
.address-good #address-good-icon { display:inline; }


/*-------------------------------------------------------------------*/
/* new spot page */
#map-cover {
  position:absolute;
  top:1px;
  left:0px;
  width:100%;
  height:200px;
  background:white;
	-moz-opacity: 0.6;
	opacity: 0.6;
	z-index:100;
}


#map-message {
  position:absolute;
  top:75px;
  left:250px;
  width:400px;
  height:50px;
	z-index:101;
	border: 1px solid #333;
	border-top:1px solid #999;
	background: #DDD;
	color:#333;
  padding:10px;
  font-size:16px;
  font-weight:bold;
}

/*-------------------------------------------------------------------*/
/* Search form -- banner */
#banner-add-button{
  position:absolute;
  top:15px;
  right:240px;
}
#banner-search-form{
  position:absolute;
  top:13px;
  right:10px;
  z-index:999;
  width:220px;
  text-align:right;
}

#banner-search-form .search-input {
  width:160px;
}

/* Search form -- general */
.search-input {
  border:1px solid #bbf;
  background:#fff;
  font-size:12px;
  padding:2px 2px 2px 2px;
  margin-right:0px;
  color:#666;
}
.search-submit{
  font-size:12px;
  font-weight:bold;
  padding:1px;
  border:1px solid #ccc;
  color:#666;
  margin-left:0px;
}
.search-form .hover {
  background:yellow;
}


/*-------------------------------------------------------------------*/
/*welcome page*/

#cities-map {
  width:100%;
  height:510px;
  border-top:1px solid #eee;
}

.overlay{position:absolute;opacity:.90;zz-index:1000;background:#e9e9e9;}
.overlay-content{position:absolute;zz-index:1001;padding:10px;}
.left-overlay{top:272px;left:0px;width:360px;height:387px;} /*WARNING: had to hack IE height! Change it there if changed here*/
.bottom-overlay{top:272px;left:360px;width:540px;height:387px;} /*WARNING: had to hack IE height! Change it there if changed here*/

.welcome-column {
  width:150px !important;
  padding:0px 10px 10px 10px;
  height:300px;  
}

.left-overlay h1 {
  color:#A30000;
  margin-bottom:2px;
  font-size:15px;
}

.left-overlay p { 
  margin:5px 15px 10px 0px;
  line-height:18px; 
}

.bottom-overlay li{
  margin-top:4px;
  margin-bottom:6px;
  line-height:14px;
}

.bottom-overlay h3 {
  font-size:20px;
  color:#999;
}

.bottom-overlay a {font-weight:bold; }

.announcements {
  padding-left:0px;
}
.announcements li {
  list-style-type:none;
  padding:4px 0px 4px 0px; 
  margin: 0px; 
  border-bottom:1px solid white;
}
.announcements li.highlight {}

/*-------------------------------------------------------------------*/
/* Cities page */
.top-cities {
  margin:10px 20px 10px 0px;
  padding:5px;
  background-color: #ffd;
  border:1px solid #ff6;
}

#city-add-form {
  display:none;
}

#international-selector {
  text-align:center;
  font-size:20px;
  padding-bottom:14px;
}

/*-------------------------------------------------------------------*/
/* star rater */
a { outline: none;}

/*             styles for the unit rater                */	
.unit-rating{
	list-style:none;
	margin: 0px;
	padding:0px;
	height: 17px;
	position: relative;
	background: url('../images/three-star-rater.png') top left repeat-x;	
}

.unit-rating li{
  text-indent: -90000px;
	padding:0px;
	margin:0px;
	list-style-type:none;
	/*\*/
	float: left;
	/* */
}
.unit-rating li a{
	display:block;
	width:17px;
	height: 17px;
	text-decoration: none;
	text-indent: -9000px;
	z-index: 20;
	position: absolute;
	padding: 0px;
}
.unit-rating li a:hover{
	background: url('../images/three-star-rater.png') left center;
	z-index: 2;
	left: 0px;
}

.ajax-scaffold td .unit-rating a:hover {
	background-color: transparent;	
}
.unit-rating a.r1-unit{left: 0px;}
.unit-rating a.r1-unit:hover{width:17px;}
.unit-rating a.r2-unit{left:17px;}
.unit-rating a.r2-unit:hover{width: 34px;}
.unit-rating a.r3-unit{left: 34px;}
.unit-rating a.r3-unit:hover{width: 51px;}
.unit-rating a.r4-unit{left: 51px;}	
.unit-rating a.r4-unit:hover{width: 68px;}
.unit-rating a.r5-unit{left: 68px;}
.unit-rating a.r5-unit:hover{width: 85px;}
.unit-rating a.r6-unit{left: 85px;}
.unit-rating a.r6-unit:hover{width: 102px;}
.unit-rating a.r7-unit{left: 102px;}
.unit-rating a.r7-unit:hover{width: 119px;}
.unit-rating a.r8-unit{left: 119px;}
.unit-rating a.r8-unit:hover{width: 138px;}
.unit-rating a.r9-unit{left: 136px;}
.unit-rating a.r9-unit:hover{width: 153px;}
.unit-rating a.r10-unit{left: 153px;}
.unit-rating a.r10-unit:hover{width: 170px;}	
.unit-rating li.current-rating{
	background: url('../images/three-star-rater.png') left bottom;
	position: absolute;
	height: 17px;
	display: block;
	text-indent: -9000px;
	z-index: 1;
}	

/* ACL Added */
.rating-quatification{
    font-size:10px;
}
.enum-rater-choicetext {
  position:absolute;
  top:0px;
  font-weight:bold;
  font-size:10px;
  width:200px;
  /*NOTE: left position is set dynamically according to the scale of the rater in the partial */
}

/*-------------------------------------------------------------------*/
/* GMaps tooltips */
div.markerTooltip, div.markerDetail {
  color: black;
  font-weight: bold;
  background-color: white;
  white-space: nowrap;
  margin: 0;
  padding: 2px 4px;
  border: 1px solid black;
}

/*-------------------------------------------------------------------*/
/* flashes */
.flash {
  color:black;
  position:absolute;
  right:0px;
  width:300px;
  top:52px;
  font-weight:bold;
  z-index:210;
  padding:12px 8px 12px 8px;
}

.error {
  background-color:red;
}

.warning {
  background-color:yellow;
}

.notice, .info {
  background-color:#5F5;
}


/*-----------------------------------------------------------------------------------*/
/* The footer */
#footer {
  width:900px;
	text-align:center;
	margin: 10px auto 10px auto;
}

/*-------------------------------------------------------------------*/
/* Rails scaffolding styles */
#errorExplanation {
  width: 400px;
  border: 2px solid red;
  padding: 7px;
  padding-bottom: 12px;
  margin-bottom: 20px;
  background-color: #f0f0f0;
}

#errorExplanation h2 {
  text-align: left;
  font-weight: bold;
  padding: 5px 5px 5px 15px;
  font-size: 12px;
  margin: -7px;
  background-color: #c00;
  color: #fff;
}

#errorExplanation p {
  color: #333;
  margin-bottom: 0;
  padding: 5px;
}

#errorExplanation ul li {
  font-size: 12px;
  list-style: square;
}


/*-------------------------------------------------------------------*/
/* "padded content" like the about page */
.padded-content h1 {
  margin-top:30px;
  color: #888;
}
.padded-content h3 {
  margin-left:30px;
}

.padded-content td.main-column {
  padding-right:80px;
}

.padded-content td.sidebar-column {
  width:300px;  
}

.padded-content li {
  font-size:12px;
  line-height:16px;
}

.padded-content ul.padded-left {
  margin-left:30px;
}  



/*-------------------------------------------------------------------*/
/* browser hacks */
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */