/* Screensize sm: */
@media (min-width:480px){
	.dijitTooltipContainer{
		max-width: 450px;
	}
	
	/* title pane area */
	#headerPane{
		height: 46px;
		margin-Top: 0px; /*or 10px?*/
		background-image: url("img/header_v3.jpg");
	    background-position: 50% 50%;
	    background-repeat: no-repeat;
	    background-size: cover;
	    border: solid #9c9c9c;  
	    border-width: 0px 0px 0px 0px;
		overflow: hidden;
		font-size: 2.4em;
	    font-weight: bold;
	    color: #fff; /*#efefef;*/
	}
	#headerPane .title{
		margin-left: 20px; 
		margin-top: 10px; 		
	}
	#headerPane span{
		visibility: hidden;
	}

	/* map pane area */
	#layerContainer{
		top: 8px;
	}
	#mainToolBar {
		 left: 10px;
		 position: absolute;
		 top: 10px;
		 z-index: 1000;
	}
	#secondToolBar {
		 left: 10px;
		 position: absolute;
		 top: 200px;
		 z-index: 1000;
	}
	#toggleTimeSlider{
		display: block!important;
	}
	#bottomPanel { /* timeSlider not in xs version*/
		 background-color: #eee;
		 bottom: 10px;
		 display: none;
		 /* centering in absolute mode */
		 left: 0;
		 right: 0;
		 width: 85%;
		 margin-right: auto;
		 margin-left: auto;
		 position: absolute;
		 font-size: 1.4em;
		 border-radius: 4px;
		 box-shadow: 0px 0px 0.75em #777;
		 z-index: 99;
	}
	#arrow{
		left: 36px;
	}
    #baseLayerContainer{
		left: 58px;
		top: 185px;
	}
	
	/* Screensize sm AND wide: */
	@media (max-height:440px){
		#baseLayerContainer{
			top: 131px;
			left: 52px;
		}
		#secondToolBar{
			left: 4px;
			top: 146px;
		}
		#layerContainer{
			top: 2px;
		}
		#mainToolBar{
			top: 4px;
			left: 4px;
		}
		#headerPane{
			height: 0px;
		}
		#arrow{
			left: 30px;
		}
		#bottomPanel{
			bottom: 2px;
		}
	}
	
}

/* Screensize md: */
@media (min-width:690px){
	body{
		height: auto;
		overflow: auto;	
	}
	.dijitTooltipContainer{
		max-width: 500px;
	}
	
	/* title panes area */		
	#headerPaneLogo{
		height: auto;
		/*max-height: 92px;*/
		overflow: hidden;
		background-color: white;
	}
	#headerPaneLogo div:first-child{
		float:left; 
		margin-top: 36px; 
		margin-right: 10px; 
		margin-left: 10px;
	}
	#headerPaneLogo div:last-child{
		float:right;
		margin-top: 0px; 
		margin-right: 10px;
	}
	#lwf_text{
		height:94px;
		margin-bottom: -20px;
	}
	#wappen{
		width:110px;
		height:94px;
		margin-left:5px;
		border:0;
		margin-bottom: -20px;
	}
	#headerPane {
	  height: 110px;
	  margin-Top: 8px;
	  font-size: 3.2em;
	  text-shadow: 0px 0px 4px #777;
	}
	#headerPane .title{
		margin-top: 20px;  
	}
	#headerPane span{
		visibility: visible;
	}
	/* #mapPane { */
		/* min-height: 800px; */
	/* } */
	/* left pane area */
	#leftPane {
	   /* min-height: 800px; */
	   border: solid #9c9c9c;  
	   border-width: 1px 0px 1px 0px;
	   width: 28%;
	   background-color: #fff;/*#f5f5f5;*/
	   color: #444;/*#fff;*/
	   font-size: 1.3em;
	   overflow: auto;
	   position: absolute;
	   text-align: left;
	}
	#leftPaneTop,#leftPane2,#leftPane3,#leftPane4{
	   /*border: solid #9c9c9c;
	   border-width: 0px 0px 1px 0px;*/
	   /*background-color: #298d29;*/
	   padding: 6px 14px;
	   min-width: 170px;
	   width: 90% !important;
	}
	#leftPane2 div, #leftPane3 div{
		padding: 5px 0px;
	}
	#leftPane3 a, #leftPane4 a{
		text-decoration: underline;
		color: #338233;
	}

	#leftPaneBottom{
	   /*background-color: #f5f5f5;*/
	   color: #444;
	   padding: 4px 14px;
	}
	
	/* bottom pane area */
	#bottomPane {
	   height: auto;
	   position: absolute;
	   background-color: #fff;
	   color: #338233;
	   font-size: 1.3em;
	   line-height: 11pt;
	   overflow: hidden;
	   margin: 10px;
	   text-align: center;
	}
	#bottomPane .title{
		font-size: 10pt; /*TODO these pts into px or em.*/
		font-weight: bold; 
		color: #737373; 
		line-height: 14pt;
	}
	
	/* map pane area */
	#borderContainer{ /*responsible for the small map*/
		height: 1000px; /*869px;*/
		background-color: white;
	}
	#chartInfoText{
		/* padding: 30px; */
		width: 30%;
	}
	
	.esriLegendLayerLabel {
		padding-top: 0px;
	}
	.esriLegendService {
		padding-bottom: 10px;
	}
		
	/* Screensize md+ AND wide: */
	@media (max-height:440px){
        #secondToolBar{
			top: 152px;
		}
    }
}