html, body
			{
				width: 100%;
				height: 100%;
				padding: 0px;
				margin: 0px;
			}
			body
			{
				font-family: Arial, Helvetica, sans-serif;
			}

			#header
			{
				position: absolute;
				left: 0px;
				top: 0px;
				z-index: 100;
			}

            .auto-style1 {
            color: white;
            font-size: 25px
            }

			#map
			{
				position: absolute;
				left: 0px;
				top: 0px;
				width: 100%;
				height: 100%;
				z-index: 1;
			}

			#map .ol-zoom {
				//in stylesheet even commented lines should finish with semicolumn ;
				left: auto;
				right: 8px;
				//width: 17px;  //at development;
				width: 21px;
				background: rgba(0, 60, 136, 0.3);
			}

			#map .ol-zoom .ol-zoom-in {
				margin-top: 0px;
				margin-left: 1px;
				width: 15px;
				height: 15px;
			}

			#map .ol-zoom .ol-zoom-out {
				margin-top: 100px;
				margin-left: 1px;
				width: 15px;
				height: 15px;
			}

			#map .ol-zoomslider {
				background-color: transparent;
				//background-color: green;
				top: 25px;
				left: auto;
				right: 8px;
				//width: 17px;  //at development;
				width: 21px;  
				//height: 93px;  //at development;
				height: 94px;
			}

			#map .ol-zoomslider-thumb {
				height: 10px;
				width: 17px;
				margin: 0px;
				border-radius: 5px;
			}

			#map .ol-zoom-in.ol-has-tooltip:hover [role=tooltip],
			#map .ol-zoom-in.ol-has-tooltip:focus [role=tooltip] {
				top: 3px;
			}

			#map .ol-zoom-out.ol-has-tooltip:hover [role=tooltip],
			#map .ol-zoom-out.ol-has-tooltip:focus [role=tooltip] {
				top: 232px;
			}

			.panel, .panel-heading
			{
				border-color: #42a62a !important;
				border-radius: 0px;
			}



			.btn, input
			{
				border-radius: 0px !important;
				color: #42a62a !important;
				background-color: #FFF !important;
				border-color: #42a62a !important;
			}

			input
			{
				color: #000 !important;
			}

			.btn:hover, .btn:active, .btn.active
			{
				background-color: #42a62a !important;
				border-color: #42a62a !important;
				color: #FFF !important;
			}

			label
			{
				color: #404040;
				margin-right: 20px;
			}

			#body
			{
				position: absolute;
				left: 0px;
				right: 0px;
				top: 0px;
				bottom: 0px;
				z-index: 100;
			}

			.panel-float
			{
				margin-top: 10%;
			}

			.panel-float .panel-body
			{
				padding-top: 0px;
				padding-bottom: 0px;
			}

			.panel-float .panel-heading
			{
				position: relative;
				background-color: #42a62a;
				color: #FFF;
				overflow: hidden;
			}

			/*.panel-float .panel-heading:after {
				position: absolute;
				top: 0px;
				content: "";
				display: block;
				width: 0;
				height: 0;
				margin-left: -500px;
				border-bottom: 500px solid transparent;
				border-left: 500px solid #FFF;
			}*/

			#welcome-wizard
			{
				background-color: #42a62a;
			}

			#welcome-wizard .panel-template-download
			{
				padding-top: 10%;
				padding-bottom: 0%;
				text-align: center;
				background-color: #42a62a;
				color: #FFF;
			}

			#welcome-wizard .panel-template-side
			{
				padding-top: 5%;
				padding-bottom: 7%;
				text-align: center;
				background-color: #42a62a;
				color: #FFF;
			}
/*
			#welcome-wizard .panel-upload
			{
				padding-top: 20%;
				padding-bottom: 20%;
				text-align: center;
			}
*/
			#dowload-template-btn, #fillout-template-btn, #upload-btn
			{
				border: 0px;
				font-size: 2rem;
				background-color: transparent;
				color: #FFF;
                width: 350px;
			}

            /*why thea below has no effect?*/
			#dowload-template-btn:hover,  #fillout-template-btn:hover, #upload-btn:hover
			{
				background-color: #FFF;
				color: #42a62a;
			}

/*
			#welcome-wizard .panel-upload .error-panel
			{
				position: absolute;
				bottom: 0px;
				width: 100%;
				left: 0px;
				color: #a94442;
				font-weight: bold;
			}
*/
			#welcome-wizard .panel-template-download .error-panel
			{
				position: absolute;
				bottom: 0px;
				width: 100%;
				left: 0px;
				color: #a94442;
				font-weight: bold;
			}

			#setup-panel
			{
				width: 50%;
				margin-left: auto;
				margin-right: auto;
			}

			@media(max-width:767px)
			{
				#setup-panel
				{
					width: 90%;
				}
			}

			#setup-panel .panel-body
			{
				padding: 20px;
			}

			#setup-panel .panel-body label
			{
				display: block;
			}

			#correct-panel
			{

			}

			#correct-panel .panel-message
			{
				padding-top: 20%;
				padding-bottom: 20%;
				text-align: center;
				background-color: #42a62a;
				color: #FFF;
			}

			#correct-panel .panel-table
			{
				text-align: center;
			}

			#correct-panel .panel-table .table-container
			{
				height: 390px;
				overflow-y: scroll;
			}


			#config-panel
			{
				position: absolute;
				left: 0px;
				top: 0px;
        		//width: 25%;
                //min-width:460px;
        		width: 460px;
				height: 100%;
				background-color: #FFF;
				z-index: 99;
				padding: 10px;
				padding-top: 80px;
				overflow: hidden;
			}

			#config-panel .container .row .label
			{
				color: #999;
				display: inline-block;
				width: 100px;
			}


			#config-panel .exportContainer
			{
				position: absolute;
				bottom: 0px;
				left: 0px;
				width: 100%;
				height: 160px;
				/*background-color: #42a62a;*/
				text-align: left;
				padding-left: 15px;
			}

			#config-panel .exportContainer h3
			{
				margin-left: 10px;
			}

			#config-panel .exportContainer button
			{
				margin: 10px;
                font-size: 13px;  //attila
			}


			.obj_land {
				/*fill: brown;*/
				fill-opacity: 0.9;
				stroke: #000;
				stroke-width: 1.5px;
				stroke-opacity: 0.4;
			}

			.obj_land:hover {
				fill: brown;
				fill-opacity: 0.6;
				z-index: 9999;
			}

			.land-label
			{
				font-size: 0.8em;
				font-weight: bold;
				fill:#000;
				fill-opacity:1;

			}

			.label-shadow
			{
				font-size: 0.8em;
				font-weight: bold;
				stroke: white;
				stroke-width: 2px;
				opacity: 0.9;
			}



			.cloroplethLayer
			{
				z-index: 100;
			}

			.dataPointsLayer
			{
				z-index: 150;
			}

			#legendContainer
			{
				position: relative;
				margin-left: 15px;
			}

			#legendContainer .row
			{
				margin: 0 auto;
				width: 95%;
			}

			#legendContainer #minValueLabel
			{
				display: inline-block;
				float: left;
			}

			#legendContainer #maxValueLabel
			{
				display: inline-block;
				float: right;
			}

			#legendContainer .legendBar
			{
				height: 30px;
				border: 1px solid #F1F1F1;
/*                 
				//background: #39CC4F; // Old browsers 
				//background: -moz-linear-gradient(left, #39CC4F 0%, #CC3959 100%); // FF3.6+ 
				//background: -webkit-gradient(linear, left top, right top, color-stop(0%,#39CC4F), color-stop(100%,#CC3959)); // Chrome,Safari4+ 
				//background: -webkit-linear-gradient(left, #39CC4F 0%,#CC3959 100%); // Chrome10+,Safari5.1+ 
				//background: -o-linear-gradient(left, #39CC4F 0%,#CC3959 100%); // Opera 11.10+ 
				//background: -ms-linear-gradient(left, #39CC4F 0%,#CC3959 100%); // IE10+ 
				//background: linear-gradient(to right, #39CC4F 0%,#CC3959 100%); // W3C 
				//filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#39CC4F', endColorstr='#CC3959',GradientType=1 ); // IE6-9 
*/
			}

			.title-label
			{
				margin-left: 10px;
			}


			#mapOptions
			{
				display: inline-block;
			}

			#mapOptions button
			{
				font-size: 10px;
			}

      		.popover-content {
    			min-width: 135px;
		    }