/**
 * CSS Reset
 * From Blueprint reset.css
 * http://blueprintcss.googlecode.com
 */
/*  h1, h2, h3, h4, h5, h6 */

html, body, div, span, object, iframe, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
body {line-height:1.5;}
table {border-collapse:separate;border-spacing:0;}
table, td, th {vertical-align:middle;}
caption, th, td {text-align:left;font-weight:normal;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}
a img {border:none;}

/**
 * Basic Typography
 */
body {
    font-family: "Lucida Grande", Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
    font-size: 80%;
    color: #222;
    background: #fff;
    margin: 1em 1.5em;
}
label {
	padding-left: 5px;
}
pre, code {
    margin: 1.5em 0;
    white-space: pre;
}
pre, code {
    font: 1em 'andale mono', 'lucida console', monospace;
    line-height:1.5;
}
a[href] {
    color: #436976;
    background-color: transparent;
}
/*
h1, h2, h3, h4, h5 {
    color: #003a6b;
    background-color: transparent;
    font: 100% 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
    margin: 0;
    padding-top: 0.5em;
}
h1 {
    font-size: 130%;
    margin-bottom: 0.5em;
    border-bottom: 1px solid #fcb100;
}
h2 {
    font-size: 120%;
    margin-bottom: 0.5em;
    border-bottom: 1px solid #aaa;
}
h3 {
    font-size: 110%;
    margin-bottom: 0.5em;
    text-decoration: underline;
}
h4 {
    font-size: 100%;
    font-weight: bold;
}
h5 {
    font-size: 100%;
    font-weight: bold;
}
 */
/*
h6 {
    font-size: 80%;
    font-weight: bold;
}
 */
popbold {
    font: 100% 'Calibri', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
    font-size: 100%;
    font-weight: bold;
}
poptitle {
    font: 100% 'Calibri', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
    font-size: 100%;
    font-weight: bold;
	margin-bottom: 0.5em;
    border-bottom: 1px solid #0087FB;
}
poptext {
    font: 100% 'Calibri', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
    font-size: 100%;
/*     font-weight: bold; */
}

poplongtext {
    font: 50% 'Calibri', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
    font-size: 70%;
/*     font-weight: bold; */
}
.olControlAttribution {
    bottom: 5px;
}

/**
 * Map Examples Specific
 */
.smallmap {
    width: 100%;
    height: 50%;
/*
    width: 512px;
    height: 256px;
 */
    border: 1px solid #ccc;
}
#tags {
    display: none;
}

/* mobile specific */
@media only screen and (max-width: 600px) {
    body {
        height           : 100%;
        margin           : 0;
        padding          : 0;
        width            : 100%;
    }
    #map {
        background : #7391ad;
        width      : 100%;
    }
    #map {
        /*border : 0;*/
        height : 250px;
    }
    #title {
        font-size   : 1.3em;
        line-height : 2em;
        text-indent : 1em;
        margin      : 0;
        padding     : 0;
    }
    #docs {
        bottom     : 0;
        padding    : 1em;
    }
    #shortdesc {
        color      : #aaa;
        font-size  : 0.8em;
        padding    : 1em;
        text-align : right;
    }
    #tags {
        display : none;
    }
}
@media only screen and (orientation: landscape) and (max-width: 600px) {
    #shortdesc {
       float: right;
       width: 25%;
    }
    #map {
        width: 100%;
    }
    #docs {
        font-size: 12px;
    }
}
body {
    -webkit-text-size-adjust: none;
}

#container1 {
    float:left;
    width:100%;
    resize: both;
    overflow: auto;
}
/* Left column of screen for accordion menue */
#col1 {
    float:left;
    width:150px;
}
/* Middle column, i.e. Map Area */
#col2 {
    float:left;
    width:80%;
    resize: both;
    overflow: auto;
}
/* Right column for drawing tools and legend */
#col3 {
    float:left;
    width:0px;
}
/* Right column for drawing tools and legend */
#colHelp {
	clear:both;
    float:right;
    width:100px;
}

/* Footer styles */
#footer {
	clear:both;
	float:left;
	width:100%;
	border-top:1px solid #000;
}
#footer p {
	padding:0px;
	margin:0;
}

	<!-- center and far right column-->
		#controls {
			width: 230px;
		}
		#controlToggle {
			padding-left: 1em;
		}
		#controlToggle li {
			list-style: none;
		}
		#map {
			width: 1180px;
			height: 700px;
		}

		.olControlAttribution {
			bottom: 0px;
			left: 2px;
			right: inherit;
			width: 400px;
		}
		.olControlPanel div {
		  position: relative;
		  left: 5px;
		  display:block;
		  width:  24px;
		  height: 24px;
		  margin: 5px;
		  float: left;
		  background-color:white;
		}
		.olControlPanel .olControlZoomToMaxExtentItemInactive {
		  width:  18px;
		  height: 18px;
		  background-image: url("../img/zoom-world-mini.png");
		}
		.olControlPanel .olControlZoomBoxItemInactive {
		  width:  22px;
		  height: 22px;
		  background-color: orange;
		  background-image: url("../img/drag-rectangle-off.png");
		}
		.olControlPanel .olControlZoomBoxItemActive {
		  width:  22px;
		  height: 22px;
		  background-color: blue;
		  background-image: url("../img/drag-rectangle-on.png");
		}
		.olControlPanel .olControlZoomInItemInactive {
		  width:  22px;
		  height: 22px;
		  background-color: white;
		  background-image: url("../img/zoomin.png");
		}
		.olControlPanel .olControlZoomOutItemInactive {
		  width:  22px;
		  height: 22px;
		  background-color: white;
		  background-image: url("../img/zoomout.png");
		}
		.olControlPanPanel .olControlPanNorthItemInactive {
			 left:50%;
			 right:auto;
			 margin-left: -9px;
			 top: 0;
		}
		.olControlPanPanel .olControlPanSouthItemInactive {
			 left: 50%;
			 margin-left: -9px;
			 top: auto;
			 bottom: 0;
		}
		.olControlPanPanel .olControlPanWestItemInactive {
			 top: 50%;
			 margin-top: -9px;
			 left: 0;
		}
		.olControlPanPanel .olControlPanEastItemInactive {
			 top: 50%;
			 margin-top: -9px;
			 left: auto;
			 right: 0;
		}
	   .olControlZoomPanel {
			 left: 5px;
			 right: 23px;
			 top: 150px;
	   }
	.olControlPanZoomBar {
		left:450px;
	}
	.tableshow {
		  width:  24px;
		  height: 24px;
		  background-color: white;
		  background-image: url("../img/tableview.png");
		}
	.xlsexport {
		  width:  24px;
		  height: 24px;
		  background-color: white;
		  background-image: url("../img/tXLSExport.png");
		}
	.deletezone {
		  width:  20px;
		  height: 20px;
		  background-color: white;
		  background-image: url("../img/delete2.png");
		}

		table.lremain tr td {
			border: 1px solid #ccc;
			border-color:#ffcc00;
			width: 200px;
		}
		table.map_area tr td {
			border: 1px solid #ccc;
			border-color:#ffcc00;
		}

 #loading
    {
        display:none;
        position:fixed;
        left:0;
        top:0;
        width:100%;
        height:100%;
        background:rgba(255,255,255,0.8);
        z-index:1000;
    }

    #loadingcontent
    {
        display:table;
        position:fixed;
        left:0;
        top:0;
        width:100%;
        height:100%;
    }

    #loadingspinner
    {
        display: table-cell;
        vertical-align:middle;
        width: 100%;
        text-align: center;
        font-size:larger;
        padding-top:80px;
    }

 #overlay {
     visibility: hidden;
     position: absolute;
     left: 0px;
     top: 0px;
     width:37%;
     height:50%;
     text-align:center;
     z-index: 1000;
/*   background-image:url(ModalBG.png); */
  }

#overlay div {
     width:300px;
     margin: 100px 100px;
     background-color: #fff;
     border:1px solid #000;
     padding:15px;
     text-align:center;
}

 #printoptionsoverlay {
     visibility: hidden;
     position: absolute;
     left: 0px;
     top: 0px;
     width:37%;
     height:50%;
     text-align:center;
     z-index: 1000;
/*   background-image:url(ModalBG.png); */
  }

#printoptionsoverlay div {
     width:300px;
     margin: 100px 100px;
     background-color: #fff;
     border:1px solid #000;
     padding:15px;
     text-align:center;
}

 #shpoptionsoverlay {
     visibility: hidden;
     position: absolute;
     left: 0px;
     top: 0px;
     width:37%;
     height:50%;
     text-align:center;
     z-index: 1000;
/*   background-image:url(ModalBG.png); */
  }

#shpoptionsoverlay div {
     width:300px;
     margin: 100px 100px;
     background-color: #fff;
     border:1px solid #000;
     padding:15px;
     text-align:center;
}
 #overlayadmin {
     visibility: hidden;
     position: absolute;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     text-align:center;
     z-index: 1000;
/*   background-image:url(background.png); */
  }

#overlayadmin div {
     width:300px;
     margin: 100px 100px;
     background-color: #fff;
     border:1px solid #000;
     padding:15px;
     text-align:center;
}
 #overlayxls {
     visibility: hidden;
     position: absolute;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     text-align:center;
     z-index: 1000;
/*   background-image:url(background.png); */
  }

#overlayxls div {
     width:300px;
     margin: 100px 100px;
     background-color: #fff;
     border:1px solid #000;
     padding:15px;
     text-align:center;
}
 #overlayreports {
     visibility: hidden;
     position: absolute;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     text-align:center;
     z-index: 1000;
}
#overlayreports div {
     width:300px;
     margin: 100px 100px;
     background-color: #fff;
     border:1px solid #000;
     padding:15px;
     text-align:center;
}
 #overlaysms {
     visibility: hidden;
     position: absolute;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     text-align:center;
     z-index: 1000;
}
#overlaysms div {
     width:300px;
     margin: 100px 100px;
     background-color: #fff;
     border:1px solid #000;
     padding:15px;
     text-align:center;
}

 #overlaysearch {
     visibility: hidden;
     position: absolute;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     text-align:center;
     z-index: 1000;
}

#overlaysearch div {
     width:300px;
     margin: 100px 100px;
     background-color: #fff;
     border:1px solid #000;
     padding:15px;
     text-align:center;
}
 #overlayeasteregg {
     visibility: hidden;
     position: absolute;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     text-align:center;
     z-index: 1000;
}

#overlayeasteregg {
     width:800px;
     height:400px;
     margin: 100px 100px;
     background-color: #fff;
     border:1px solid #000;
     padding:15px;
     text-align:center;
}
 #overlayAdminLogin {
     visibility: hidden;
     position: absolute;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     text-align:center;
     z-index: 1000;
}
#overlayAdminLogin {
     width:300px;
     height:150px;
     margin: 100px 100px;
     background-color: #fff;
     border:1px solid #000;
     padding:15px;
     text-align:center;
}

.ol-popup {
        position: absolute;
        background-color: white;
        -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
        filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
        padding: 15px;
        border-radius: 10px;
        border: 1px solid #cccccc;
        bottom: 12px;
        left: -50px;
        min-width: 480px;
       	overflow-y: scroll;
      }
      .ol-popup:after, .ol-popup:before {
        top: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
      }
      .ol-popup:after {
        border-top-color: white;
        border-width: 10px;
        left: 48px;
        margin-left: -10px;
      }
      .ol-popup:before {
        border-top-color: #cccccc;
        border-width: 11px;
        left: 48px;
        margin-left: -11px;
      }
      .ol-popup-closer {
        text-decoration: none;
        position: absolute;
        top: 2px;
        right: 8px;
      }
      .ol-popup-closer:after {
        content: "✖";
      }

.ol-popupHov {
        position: absolute;
		background: rgba(235, 235, 235, 0.5);
        -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
        filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
        padding: 15px;
        border-radius: 10px;
        border: 1px solid #cccccc;
        bottom: 12px;
        left: -50px;
        min-width: 150px;
		color: #A32921;
        font-size: 75%;
         font-weight: 300;
      }
      .ol-popupHov:after, .ol-popupHov:before {
        top: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
      }
      .ol-popupHov:after {
        border-top-color: white;
        border-width: 10px;
        left: 48px;
        margin-left: -10px;
      }
      .ol-popupHov:before {
        border-top-color: #cccccc;
        border-width: 11px;
        left: 48px;
        margin-left: -11px;
      }

.loader {
   width:50px;
   height:50px;
   display:inline-block;
   padding:0px;
   opacity:0.5;
   border:3px solid #09acfd;
   -webkit-animation: loader 1s ease-in-out infinite alternate;
   animation: loader 1s ease-in-out infinite alternate;
}

.loader:before {
  content: " ";
  position: absolute;
  z-index: -1;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border: 3px solid #09acfd;
}

.loader:after {
  content: " ";
  position: absolute;
  z-index: -1;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border: 3px solid #09acfd;
}

@keyframes loader {
   from {transform: rotate(0deg) scale(1,1);border-radius:0px;}
   to {transform: rotate(360deg) scale(0, 0);border-radius:50px;}
}
@-webkit-keyframes loader {
   from {-webkit-transform: rotate(0deg) scale(1, 1);border-radius:0px;}
   to {-webkit-transform: rotate(360deg) scale(0,0 );border-radius:50px;}
}
.loader4 {
   width:45px;
   height:45px;
   display:inline-block;
   padding:0px;
   border-radius:100%;
   border:5px solid;
   border-top-color:rgba(246, 36, 89, 1);
   border-bottom-color:rgba(255,255,255, 0.3);
   border-left-color:rgba(246, 36, 89, 1);
   border-right-color:rgba(255,255,255, 0.3);
   -webkit-animation: loader4 1s ease-in-out infinite;
   animation: loader4 1s ease-in-out infinite;
}
@keyframes loader4 {
   from {transform: rotate(0deg);}
   to {transform: rotate(360deg);}
}
@-webkit-keyframes loader4 {
   from {-webkit-transform: rotate(0deg);}
   to {-webkit-transform: rotate(360deg);}
}

.legendStyle{
  border-bottom-color: orange;
}
.top-bar-bg{
  background-color: orange;
  color: #fff;
}

fieldset {
   position:relative
}
legend.dlrev-legend {
  color:#ed9d14;
  border-bottom: 1px solid;
}