body {
	background-color:#DDD;
}

.logo {
    background-image: url("http://www.terrasigna.com/images/sprite.png");
    background-position: 0 -20px;
    background-repeat: no-repeat;
    cursor: pointer;
    float: left;
    height: 84px;
    margin: 0;
    position: relative;
    width: 370px;
}

html, body, #map {
	height:100%;
	width:100%;
	padding:0;
	margin:0;
}
img {
	user-drag: none; 
	user-select: none;
	-moz-user-select: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-ms-user-select: none;}
/*
img, canvas { 
	image-rendering: -moz-crisp-edges; 
	image-rendering: -moz-crisp-edges;
	image-rendering: -moz-crisp-edges;
	image-rendering: -o-crisp-edges;
	image-rendering: -webkit-optimize-contrast;
	-ms-interpolation-mode: nearest-neighbor;	
    image-rendering: optimizeSpeed;             
    image-rendering: -moz-crisp-edges;          
    image-rendering: -o-crisp-edges;            
    image-rendering: -webkit-optimize-contrast; 
    image-rendering: pixelated; 
    image-rendering: optimize-contrast;         
    -ms-interpolation-mode: nearest-neighbor;   
}
*/
#map {
	position:relative;
}
.mockup, .red {
	color:#900;
}
.navbar-brand-image {
	float:left;
	margin-right:10px;
}
#content {
    bottom: 0;
    overflow: hidden;
    position: absolute;
    top: 0px;
    width: 100%;
	z-index:10;	
}
.blur {
	-webkit-filter: blur(15px);
	-moz-filter: blur(15px);
	-o-filter: blur(15px);
	-ms-filter: blur(15px);
	filter: blur(15px);		
}

#sidebar_wrapper {
    position: absolute;
    z-index: 100;
	top:80px;
	left:0px;
	width:420px;
}
#sidebar {
    border-bottom-right-radius: 5px;
	/*border-top-right-radius: 5px;*/
    height: auto;
    overflow: hidden;
	background-color: rgba(255, 255, 255, 0.7);
	padding:20px 20px 20px 10px;	
    float: left;
    font-size: 12px;
    width: 420px;
}
#sidebar_wrapper_showhide {
	position:absolute;
	left:420px;
	background-color: rgba(255, 255, 255, 0.7);
	color:#555;
	font-size:14px;	
	padding:2px;
	padding-right:4px;
	cursor:pointer;
    border-bottom-right-radius: 5px;
	border-top-right-radius: 5px;
}

.map_wrapper {
    height: 100%;
    overflow: hidden;
	position:relative;
	
}
.formWrapper {
	background-color:#FFF;
	padding-bottom:20px;
	padding-top:30px;
	word-wrap:break-word;
}
.date-control {
	cursor:pointer;
}
label[for='aoi'] {
	float:left;
}
.fileinput-button {
	margin-top:7px;
	margin-left:3px;
	float:right;
}
select.chosen-select {
	/*width:300px;*/
}
input[type='text'], input[type='button']  {
	/*width:300px;	*/
}

label {
	font-size:1.2em;
}



.hide {
	display:none;
}
.clear {
    clear: both;
}

.error {
	color:#C00;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {
    -moz-appearance:textfield;
}

.datetime {
	position:absolute;
	top:25px;
	left:0px;
	font-size:0.8em;
	width:25px;
	text-align:center;
	color:#777;
	line-height:1.4;
}
.datetime > span {
	color:#333;
	font-size:1.1em;
}

/************************************ LOADER ******************************************************************/
.loader {
  display: inline-block;
  width: 30px;
  height: 30px;
  position: relative;
  border: 4px solid #4d7595;
  top: 50%;
  animation: loader 4s infinite ease;
}

.loader-inner {
  vertical-align: top;
  display: inline-block;
  width: 100%;
  background-color: #5c91bc;
  animation: loader-inner 4s infinite ease-in;
}

@keyframes loader {
  0% {
    transform: rotate(0deg);
  }
  
  25% {
    transform: rotate(180deg);
  }
  
  50% {
    transform: rotate(180deg);
  }
  
  75% {
    transform: rotate(360deg);
  }
  
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loader-inner {
  0% {
    height: 0%;
  }
  
  25% {
    height: 0%;
  }
  
  50% {
    height: 100%;
  }
  
  75% {
    height: 100%;
  }
  
  100% {
    height: 0%;
  }
}

#loader_1, #loader_2 {
	float:right;
	margin-top:0.5em;
	display:none;
}



.nopaddingleft { padding-left: 0px !important;  }


svg#visualisation {
	background-color:#FFF;
}
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {

}

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}
.point {
  stroke: steelblue;
  fill: steelblue;	
}

.overlay {
    fill: none;
    pointer-events: all;
}
g.tick text {
	font-size:0.75em;
}