/* CSS full-screen layout */
html { overflow: hidden; }
body { overflow: hidden; padding: 0; margin: 0; width: 100%; height: 100%; font-family: Trebuchet MS, Trebuchet, Arial, sans-serif; }
#header { position: relative; top: 10px; left: 10px; margin-right:20px; margin-bottom:5px; height: 45px; overflow: hidden;  background: #fff; background-image: url('/img/nlsheader.jpg'); background-repeat:no-repeat; background-position:right top; ; box-shadow: 0 1px 3px #CCC; border: 1px solid #ccc; }
#headerwilbourn { position: relative; top: 10px; left: 10px; margin-right:20px; margin-bottom:5px; height: 75px; overflow: hidden;  background: #fff; box-shadow: 0 1px 3px #CCC;  border: 1px solid #ccc; } 
#headerwilbournimage { position: absolute; top: 0px; right:0px; width:290 height: 68px; overflow: hidden;  } 
#headerimage { position: absolute; top: 0px; left: 0px; right:10px; width:125px; height: 68px; padding-top: 3px; padding-left: 3px; overflow: hidden;  } 
#headertitle { position: absolute; top: 10px; left: 135px; right:10px; overflow: hidden;  } 
#map { position: absolute; top: 58px; left: 250px; right: 10px; bottom: 15px; } 
#topbar { position: relative;  top: 0px; left: 10px; right:10px; height: 30px; margin-bottom:5px; overflow: hidden; }
#headerlink {position: relative; top: 5px; text-align: right; width: 99%; padding-right:20px; padding-bottom:5px; z-index: 10000; font-size:12px;}
#textbox { border: 1px solid #ccc; box-shadow: 0 1px 3px #CCC; padding-top:1px; padding-bottom:1px; padding-right:5px; padding-left:5px; background-color: #fff; }
#sidebar { position: relative; top: 0px; left: 10px; width: 240px; bottom: 15px; font-size: 13px; }
#footer { position: absolute; bottom: 0px; left: 0px; width:100%; height: 14px; overflow: hidden; }
#layerSelect { position: absolute; top: 80px; right: 20px; z-index: 10000;}
#layerSelect2  { position: absolute; top: 340px; left: 20px; z-index: 10000;}
#overlaySelect2  { position: absolute; top: 70px; left: 0px; z-index: 10000;}


#overlaySelectNode  { margin-bottom: 4px; }

#zoomtoextent2 { position: absolute; top: 250px; left: 0px; z-index: 10000;}
#key { position: absolute; top: 280px; left: 270px; z-index: 10000;}
#slider-id { position: absolute; top: 70px; left: 530px; width: 192px;  height:10px; margin: 10px; z-index: 10000;}
#slider-id .ui-slider-handle { position: relative; z-index: 2; width: 1.6em; height: 1.6em; cursor: default; border-color: #729fcf;  }
#slider-id .ui-slider-range { position: relative; z-index: 1;  font-size: .7em; display: block; border: 1; background-position: 0 0;   background: #e6e6e6;}
#scalebar { position: absolute; right: 15px; bottom: 85px; z-index: 10001; font-size: small;}
#scotland { position: absolute; top: 220px; left: 277px; z-index: 10000;}

/* CSS design */
body { background: #f4f4f4;}
/* #header { background: #fff; box-shadow: 0 1px 3px #CCC; border: 1px solid #ccc; } */
#header h1 { padding:7px 10px; margin:0; font-size: 20px; padding-top: 2px; }
#header h2 { padding:7px 10px; padding-bottom:5px; margin:0; font-size: 14px;  }
#headerwilbourn h1 { padding:7px 10px; margin:0; font-size: 20px; }
#map { border: 1px solid #ccc; box-shadow: 0 1px 3px #CCC; background-color: #cedfe4; }
#footer { text-align:center; font-size:11px; color:#606060; }


.olControlScaleLine {
   display: block;
   position: absolute;
   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;
}

.olLayerGoogleCopyright {
    left: 2px;
    bottom: 2px;
}
.olLayerGoogleV3.olLayerGoogleCopyright {
    right: auto !important;
}
.olLayerGooglePoweredBy {
    left: 2px;
    bottom: 15px;
}
.olLayerGoogleV3.olLayerGooglePoweredBy {
    bottom: 15px !important;
}


.olImageLoadError { display: none; }

.olBingAttribution {
    color: #DDD;
    left: 2px;
    bottom: 15px;
}
.olBingAttribution.road {
    color: #333;
}

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



#map       .olControlAttribution {
            position: absolute;
            font-size: 10px;
            bottom: 0 !important;
            right: 150px !important;
   	    text-align: right;
            background: rgba(0, 0, 0, 0.1);
            font-family: Arial;
            padding: 2px 4px;
            border-radius: 5px 0 0 0;
        }

.olControlMousePosition {
    position: absolute;
    right: 5px;
    bottom: 18px;
    height: 50px;
    font-size: 9pt;
    text-align: right;
    background: rgba(255, 255, 255, 0.5);
}

#customZoom {
    z-index: 1001;
    position: relative;
    top: 10px;
    left: 10px;
}
#customZoom a {
    text-decoration: none;
    position: absolute;
    display: block;
    width: 50px;
    text-align: center;
    font-weight: bold;
    color: #fff;
    background: #369;
    border: 1px solid #ccc;
    border-radius: 3px;
}
#customZoom a:hover {
    background: #036;
}
#customZoomOut {
    top: 25px;
}

/* OpenLayers style.mobile.css */
div.olControlZoom {
    position: absolute;
    top: 8px ;
    left: 8px;
    background: rgba(255,255,255,0.4);
    border-radius: 4px;
    padding: 2px;
    margin: 1px;
}
* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
div.olControlZoom a {
    display: block;
    margin: 1px;
    padding: 0;
    color: white;
    font-size: 28px;
    font-family: sans-serif;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    height: 32px;
    width: 32px;
    line-height: 28px;
    text-shadow: 0 0 3px rgba(0,0,0,0.8);
    background: #130085; /* fallback for IE - IE6 requires background shorthand*/
    background: rgba(0, 60, 136, 0.5);
    filter: alpha(opacity=80);
}
a.olControlZoomIn {
    border-radius: 4px 4px 0 0;
}
a.olControlZoomOut {
    border-radius: 0 0 4px 4px;
}
div.olControlZoom a:hover {
    background: #130085; /* fallback for IE */
    background: rgba(0, 60, 136, 0.7);
    filter: alpha(opacity=100);
}
@media only screen and (max-width: 600px) {
    div.olControlZoom a:hover {
        background: rgba(0, 60, 136, 0.5);
    }
}
.olLayerGrid .olTileImage {
    -webkit-transition: opacity 0.2s linear;
    -moz-transition: opacity 0.2s linear;
    -o-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
}
/*
@media (-webkit-transform-3d) { img.olTileImage {    -webkit-transform: translate3d(0, 0, 0);}}


/* CSS autocomplete */
.ac-renderer {
  position: absolute;
  width: 350px;
  background-color: #fff;
  border: 1px solid #666;
  -moz-box-shadow: 2px 2px 2px rgba(102, 102, 102, .4);
  -webkit-box-shadow: 2px 2px 2px rgba(102, 102, 102, .4);
  z-index: 10000;
}

.ac-row {
  position: relative;
  padding: .4em;
  cursor: pointer;
}

.ac-highlighted {
  font-weight: bold;
}

.ac-active {
  background-color: #b2b4bf;
}

.ac-type {
  background-color: #990033;
  color: #FFFFFF;
  display: block;
  margin: 2px;
  padding: 2px;
  font-style: italic;
  float: right;
}