/* ---------------------------------------------------------------------------- */
/* You are free to modify and use this CSS layout in accordance with the        */
/* Creative Commons 3.0 licence (see links to details of the license below) as  */
/* long as you include this comment, the link to the license, and it's          */
/* attribution.                                                                 */
/*                                                                              */
/* This CSS layout is licensed under the Creative Commons 3.0 licence.          */
/* Abstract: http://creativecommons.org/licenses/by/3.0/us/                     */
/* Full License: http://creativecommons.org/licenses/by/3.0/us/legalcode        */
/*                                                                              */
/* By: Ryan Chapin, Nuts & Bolts Interactive, Inc. http://nbinteractive.com */
/* Version: 1.0                                                                 */
/* Date: 2008-03-24                                                             */
/*                                                                              */
/* If you'd like to contact Ryan with questions or comments, please go to:      */
/* http://nbinteractive.com/contactryan.html                                    */
/* ---------------------------------------------------------------------------- */

/* ============================================================================ */
/* Layout Styles */
#mainContainer {
  min-width: 740px;
  padding: 0;
  margin: 0;
  height: 100%;
}

/* You must include some sort of border on this rule.  Otherwise IE 6.0 will not */
/* render the background image or color properly.                                */
#sideBarContentWrapper {
  background-position: right;
  height: 65%;
}

#contentContainer {
  float: left;
  width: 100%;
  height: 100%;
}

#nonmap {
  margin-right: 240px;
  padding: 10px;
  height: 65%;
}

#map {
  margin-right: 240px;
  padding: 0px;
  height: 100%;
}

#maptitle {
  left: 3em;
  top: 1em;
  position: absolute;
  font-size: 1.5em;
  filter: alpha(opacity=70);
  opacity: 0.7;
  background: white;
  z-index: 1000;
  padding: 5px;
  -moz-border-radius: 1em;
}

#news {
  left: 1em;
  top: 45%;
  position: absolute;
  font-size: 1em;
  filter: alpha(opacity=80);
  opacity: 0.8;
  background: white;
  z-index: 1000;
  padding: 10px;
  -moz-border-radius: 1em;
}

div.layersDiv {
  left: 17px;
  top: 45%;
  font-size: 1em;
  background: white;
  z-index: 1000;
  padding: 10px;
  -moz-border-radius: 1em;
  white-space: nowrap;
}

#newairport {
  right: 260px;
  top: 55%;
  position: absolute;
  font-size: 1em;
  filter: alpha(opacity=80);
  opacity: 0.8;
  background: white;
  z-index: 1000;
  padding: 10px;
  -moz-border-radius: 1em;
}

#quicksearch {
  right: 241px;
  top: 59%;
  position: absolute;
  font-size: 1em;
  z-index: 1000;
  padding: 5px 5px 5px 5px;
  background-color: #00008B;
  -moz-border-radius: 1em 0 0 1em;
}

#qsmini {
  right: 241px;
  top: 60%;
  position: absolute;
  z-index: 999;
}

#ajaxloader {
  left: 40%;
  top: 25%;
  position: absolute;
  z-index: 1000;
  border: 1;
}

#sideBar {
  float: left;
  width: 240px;
  margin-left: -240px;
}

/* IE 6.0: For some reason, if you just specify padding here it'll add 10 px  */
/* to the entire layout and cause the page to scroll horizontally. So we have */
/* to specify the width and then set a margin on it.  The width is equal to   */
/* the width of the column, 190px - the 10px margin * 2                       */
#sideBar p {
  margin: 10px auto;
  width: 220px;
}

#sideBarContentWrapper > #sideBar p {
  padding: 10px;
  margin: 0;
}

#login {
  max-width: 220px;
  margin: 0px 0px 0px 0px;
  padding: 10px 10px 0px 10px;
}

#filter {
  max-width: 220px;
  margin: 0px 0px 0px 0px;
  padding: 10px 10px 0px 10px;
}

#statsbox {
  max-width: 220px;
  margin: 0px 0px 0px 0px;
  padding: 10px 10px 0px 10px;
}

#contexthelp{
  margin: 0px 0px 0px 0px;
  padding: 10px;
}

#adBar {
  float: left;
  margin-right: 240px;
  padding: 0px;
}
#searchBar {
  float: left;
  width: 240px;
  margin-left: -240px;
}

/* We have to include some sort of height attribute for IE 6 and 7 to render  */
/* the columns background properly, and prevent additional, unwanted          */
/* whitespace from being rendered.                                            */
#resultbox {
  height: 34%;
  margin: 0;
  padding: 5px 10px;
  clear: both;
  overflow: auto;
}

#miniresultbox {
  padding: 5px 10px;
}

td.donate { padding: 10px; vertical-align: top; text-align: center; }
td.donate2 { padding: 10px; vertical-align: top; text-align: left; }

/* Autocomplete styles */

ul.autocomplete { padding: 3px; width: 350px; border: 1px solid #999; list-style-type: none; margin: 1px 0 0 0; background: #FFF; cursor: default; color: black; }
ul.autocomplete2 { padding: 3px; width: 250px; border: 1px solid #999; list-style-type: none; margin: 1px 0 0 0; background: #FFF; cursor: default; color: black; }
li.autocomplete:hover { background: #C6DEFF; }
li.selected { background: #C6DEFF; }

/* Textbox hinting */

input.date {
  min-width: 90px;
  max-width: 90px;
}
input.hintTextbox {
  color: #888;
  min-width: 250px;
  max-width: 350px;
}
input.hintTextboxActive {
  color: #000;
  min-width: 250px;
  max-width: 350px;
}
input.miniTextbox {
  color: #888;
  min-width: 60px;
  max-width: 60px;
}
input.miniTextboxActive {
  color: #888;
  min-width: 60px;
  max-width: 60px;
}

/* Sortable tables
  Copyright 2006 Joost de Valk */

table.sortable {
  border-spacing: 0;
  border: 1px solid #000;
  border-collapse: collapse;
}
table.sortable th, table.sortable td {
  text-align: left;
  padding: 2px 4px 2px 4px;
  border-style: solid;
  border-color: #444;
}
table.sortable th {
  border-width: 0px 1px 1px 1px;
  background-color: #ccc;
}
table.sortable td {
  border-width: 0px 1px 0px 1px;
}
table.sortable tr.odd td {
  background-color: #ddd;
}
table.sortable tr.even td {
  background-color: #fff;
}
table.sortable tr.sortbottom td {
  border-top: 1px solid #444;
  background-color: #ccc;
  font-weight: bold;
}

/* Misc styles */

input:focus, textarea:focus { background-color: LightYellow; }
select.filter { width: 160px; }

/* OpenLayers default stuff starts here */

div.olLayerDiv {
  -moz-user-select: none;
  text-align: left;
}

.olLayerGoogleCopyright {
  left: 2px;
  bottom: 2px;
}
.olLayerGooglePoweredBy {
  left: 2px;
  bottom: 15px;
}
.olControlAttribution {
  font-size: smaller;
  right: 20px;
  bottom: 1em;
  position: absolute;
  display: block;
}
.olControlScale {
  right: 3px;
  bottom: 3em;
  display: block;
  position: absolute;
  font-size: smaller;
}
.olControlScaleLine {
  left: 10px;
  bottom: 15px;
  font-size: xx-small;
}
.olControlScaleLineBottom {
  border: solid 2px black;
  border-bottom: none;
  margin-top:-2px;
  text-align: center;
}
.olControlScaleLineTop {
  border: solid 2px black;
  border-top: none;
  text-align: center;
}

.olControlPermalink {
  right: 3px;
  bottom: 1.5em;
  display: block;
  position: absolute;
  font-size: smaller;
}

div.olControlMousePosition {
  bottom: 0em;
  right: 3px;
  display: block;
  position: absolute;
  font-family: Arial;
  font-size: smaller;
}

.olControlOverviewMapContainer {
  position: absolute;
  bottom: 0px;
  right: 0px;
}

.olControlOverviewMapElement {
  padding: 10px 18px 10px 10px;
  background-color: #00008B;
  -moz-border-radius: 1em 0 0 0;
}

.olControlOverviewMapMinimizeButton {
  right: 0px;
  bottom: 80px;
}

.olControlOverviewMapMaximizeButton {
  right: 0px;
  bottom: 80px;
}

.olControlOverviewMapExtentRectangle {
  overflow: hidden;
  background-image: url("img/blank.gif");
  cursor: move;
  border: 2px dotted red;
}
.olControlOverviewMapRectReplacement {
  overflow: hidden;
  cursor: move;
  background-image: url("./img/overview_replacement.gif");
  background-repeat: no-repeat;
  background-position: center;
}

.olLayerGeoRSSDescription {
  float: left;
  width: 100%;
  overflow: auto;
  font-size: 1.0em;
}
.olLayerGeoRSSClose {
  float: right;
  color: gray;
  font-size: 1.2em;
  margin-right: 6px;
  font-family: sans-serif;
}
.olLayerGeoRSSTitle {
  float: left;
  font-size: 1.2em;
}

.olPopupContent {
  padding: 1px;
  overflow: auto;
}
.olControlNavToolbar {
  width: 0px;
  height: 0px;
}
.olControlNavToolbar div {
  display: block;
  width: 28px;
  height: 28px;
  top: 200px;
  left: 6px;
  position: relative;
}

.olControlNavigationHistory {
  background-image: url("img/navigation_history.png");
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;

}
.olControlNavigationHistoryPreviousItemActive {
  background-position: 0px 0px;
}
.olControlNavigationHistoryPreviousItemInactive {
  background-position: 0px -24px;
}
.olControlNavigationHistoryNextItemActive {
  background-position: -24px 0px;
}
.olControlNavigationHistoryNextItemInactive {
  background-position: -24px -24px;
}

.olControlNavToolbar .olControlNavigationItemActive {
  background-image: url("img/panning-hand-on.png");
  background-repeat: no-repeat;
}
.olControlNavToolbar .olControlNavigationItemInactive {
  background-image: url("img/panning-hand-off.png");
  background-repeat: no-repeat;
}
.olControlNavToolbar .olControlZoomBoxItemActive {
  background-image: url("img/drag-rectangle-on.png");
  background-color: orange;
  background-repeat: no-repeat;
}
.olControlNavToolbar .olControlZoomBoxItemInactive {
  background-image: url("img/drag-rectangle-off.png");
  background-repeat: no-repeat;
}
.olControlEditingToolbar {
  float: right;
  right: 0px;
  height: 30px;
  width: 200px;
}
.olControlEditingToolbar div {
  background-image: url("img/editing_tool_bar.png");
  background-repeat: no-repeat;
  float: right;
  width: 24px;
  height: 24px;
  margin: 5px;
}
.olControlEditingToolbar .olControlNavigationItemActive {
  background-position: -103px -23px;
}
.olControlEditingToolbar .olControlNavigationItemInactive {
  background-position: -103px -0px;
}
.olControlEditingToolbar .olControlDrawFeaturePointItemActive {
  background-position: -77px -23px;
}
.olControlEditingToolbar .olControlDrawFeaturePointItemInactive {
  background-position: -77px -0px;
}
.olControlEditingToolbar .olControlDrawFeaturePathItemInactive {
  background-position: -51px 0px;
}
.olControlEditingToolbar .olControlDrawFeaturePathItemActive {
  background-position: -51px -23px;
}
.olControlEditingToolbar .olControlDrawFeaturePolygonItemInactive {
  background-position: -26px 0px;
}
.olControlEditingToolbar .olControlDrawFeaturePolygonItemActive {
  background-position: -26px -23px;
}
.olControlSaveFeaturesItemActive {
  background-image: url("img/save_features_on.png");
  background-repeat: no-repeat;
  background-position: 0px 1px;
}
.olControlSaveFeaturesItemInactive {
  background-image: url("img/save_features_off.png");
  background-repeat: no-repeat;
  background-position: 0px 1px;
}

.olHandlerBoxZoomBox {
  border: 2px solid red;
  position: absolute;
  background-color: white;
  opacity: 0.50;
  font-size: 1px;
  filter: alpha(opacity=50);
}

/**
 * Layer switcher
 */
.olControlLayerSwitcher {
  position: absolute;
  top: 25px;
  right: 0;
  width: 20em;
  font-family: sans-serif;
  font-weight: bold;
  margin-top: 3px;
  margin-left: 3px;
  margin-bottom: 3px;
  font-size: smaller;
  color: white;
  background-color: transparent;
}

.olControlLayerSwitcher .layersDiv {
  padding-top: 5px;
  padding-left: 10px;
  padding-bottom: 5px;
  padding-right: 10px;
  background-color: darkblue;
}

.olControlLayerSwitcher .layersDiv .baseLbl,
.olControlLayerSwitcher .layersDiv .dataLbl {
  margin-top: 3px;
  margin-left: 3px;
  margin-bottom: 3px;
}

.olControlLayerSwitcher .layersDiv .baseLayersDiv,
.olControlLayerSwitcher .layersDiv .dataLayersDiv {
  padding-left: 10px;
}

.olControlLayerSwitcher .maximizeDiv,
.olControlLayerSwitcher .minimizeDiv {
  width: 18px;
  height: 18px;
  top: 5px;
  right: 0;
  cursor: pointer;
}

/*
 * Due to current limitations in the OpenLayers code, you can only
 * replace this image with another image which is 17px x 17px.
 */
.olPopupCloseBox {
  background: url("img/close.gif") no-repeat;
  cursor: pointer;
}

.olControlNoSelect {
  -moz-user-select: none;
}