html {
   height: 100%;
}

body{
	margin: 0px;
	font-family: 'Lato', sans-serif;
	height: 400px;
	min-height: 100%;
	width: 100%;
	min-width: 350px;
	position: relative;
}

#loader{
	background: #e5eced;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0px;
	left: 0px;
	right:0px;
	bottom:0px;
	z-index: 10;
}

#loaderContent{
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	position: absolute;
	width:420px;
	max-width: 100%;
	height: 280px;
	text-align: center;
}

#loaderContent img{
	display: inline-block;
	margin-left: 10px;
	max-width: 80%;
}
#loaderContent #spinner{
	display: inline-block;
	vertical-align: middle;
}
#loaderContent span{
	display: inline-block;
	clear: both;
	margin-left: 10px;
	padding-top: 10px;
}

#top{
	text-align: center;
	height: 45px;
	background: #e5eced; /* url(img/logo.png) center center no-repeat;
	background-size: 140px; */
}

#logo-psi {
	margin-right: 10px;
}

#logo-lsse {
	margin-left: 10px;
}

#logo-lsse, #logo-psi {
	height: 40px;
	margin-top: 2px;
}

#langs{
	display: block;
	position: absolute;
	right: 0;
	z-index: 3;
	height: 0px;
	width: 100px;
	list-style: none;
	margin: 0px 0px 0px 0px;
	border-bottom: 45px solid #ff832e;
	border-left: 45px solid transparent;
	margin-top: 0;
}

#langs li{
	padding: 0px;
	display: inline-block;
	height: 45px;
}

#langs a{
	color: #e5eced;
	padding: 3px;
	text-decoration: none;
	font-size: 14px;
	vertical-align: middle;
	
}

#langs a.active, #langs a:hover{
	color: #fff;
}

#menu{
	height: 35px;
	background: #ff832e;
	box-shadow: 0px 4px 10px -4px #000;
	z-index: 2;
}

#mapMenu{
	display: block;
	list-style: none;
	text-align: center;
	width: 50%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	float: right;
}

#mapMenu li{
	display: inline-block;
	height: 100%;
	margin: 0px 10px;
}

#mapMenu a{
	display: inline-block;
	width: 20px;
	height: 35px;
	vertical-align: middle;
	position: relative;
}
#mapMenu a::before, #zoom a::before{
	content: '';
	position: absolute;
	top:0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	margin: auto;
	width: 20px;
	height: 20px;
}

.nav-reset-map::before{
	background: url(img/mapMenu.png) -40px -20px no-repeat;
}
.nav-reset-map:hover::before, .nav-reset-map.active::before{
	background-position: -40px 0px;
}
.nav-line::before{
	background: url(img/mapMenu.png) -20px -20px no-repeat;
}
.nav-line:hover::before, .nav-line.active::before{
	background-position: -20px 0px;
}
.nav-area::before{
	background: url(img/mapMenu.png) 0px -20px no-repeat;
}
.nav-area:hover::before, .nav-area.active::before{
	background-position: 0px 0px;
}

.nav-legend::before{
	background: url(img/mapMenu.png) -100px -20px no-repeat;
}
.nav-legend:hover::before, .nav-legend.active::before{
	background-position: -100px 0px;
}

#legendContainer{
	position: relative;
}

.olControlZoomIn.olButton, .olControlZoomOut.olButton {
	background: #ff832e !important;
	margin: 5px;
    border-radius: 1px !important;
    height: 22px !important;
    width: 22px !important;
}

.olControlZoomIn.olButton a, .olControlZoomIn.olButton a{
	color: #eee !important;
}


.olControlAttribution {
  font-size: 12px !important;
  bottom: 1.2em !important;
}

#zoomIn {
	background: url(img/mapMenu.png) -60px -20px no-repeat;
}
#zoomIn:hover {
	background-position: -60px 0px;
}
#zoomOut {
	background: url(img/mapMenu.png) -80px -20px no-repeat;
}
#zoomOut:hover {
	background-position: -80px 0px;
}

#result{
	width: 50%;
	position: absolute;
	right: 0;
}

#wyniki-pomiaru{
	display: none;
	position: absolute;
	padding: 3px 10px;
	background: #ff832e;
	color: #eee;
	z-index: 2;
	right: 0;
	left: 0;
	top: 5px;
	margin: auto;
	width: 150px;
	text-align: center;
	font-size: 13px;
	cursor: pointer;
}

#infoMenu{
	float: left;
	display: block;
	list-style: none;
	margin: 0px;
	padding: 0px;
	text-align: left;
	height: 100%;
	width: 40%;
	font-size: 14px;
}

#infoMenu li{
	display: inline-block;
	height: 100%;
}

#infoMenu a{
	display: inline-block;
	padding: 0px 30px;
	color: #fff;
	text-decoration: none;
	height: 100%;
	vertical-align: middle;
}

#infoMenu a:hover{
	color: #fff;
}

#infoMenu li.active{
	background-color: rgba(251,252,252,1);
	position: relative;
	z-index: 2;
	box-shadow: 0px 0px 5px #000;
}


#infoMenu li.active:after{
	content: '';
	background: rgba(251,252,252,1);
	position: absolute;
	height: 12px;
	bottom: -12px;
	left: 0px;
	width: 100%;
}

#infoMenu li.active a{
	color: #222d7c;
}

#exports{
	opacity: 0.3;
	font-size: 13px;
	position: absolute;
	bottom: 10px;
}

.exportShow{
	opacity: 1 !important;
}

#object{
	display: none;
	position: absolute;
	left: 0;
	width: 50%;
	bottom: 35px;
	top: 45px;
	background-color: rgba(238,238,238,0.9);
	z-index:2;
	overflow: hidden;
	box-shadow: 0px 55px 10px #000;
}

#objectContent{
	position: absolute;
	top: 35px;
	bottom: 0px;
	width: 100%;
	overflow-y: scroll;
	background-color: rgba(251,252,252,1);
	z-index: 2;
}

#backToList{
	background: #ff832e;
	height: 35px;
	vertical-align: middle;
	font-size: 15px;
	text-decoration: none;
	padding: 0px;
}

#backToList a{
	text-decoration: none;
	color: #fff;
	display: inline-block;
	height: 35px;
	margin: 1px 0px 0px 10px;
}

.objectInfo{
	padding: 10px;
	font-size: 13px;
	overflow: hidden;
}

.objectInfo h2{
	color: #231f20;
	display: inline- block;
	padding: 0px 10px 10px 10px;
}

.objectInfo a{
	text-decoration: none;
	color: #231f20;
}

.objectInfo a:hover{
	color: #000;
}

.objectInfo img{
	float: left;
	width: 60%
}

#objectType{
	font-style: italic;
	color: #222d7c;
	margin-left: 10px;
}

#objectInfoMenu{
	display: block;
	list-style: none;
	margin: 0px;
    float: left;
}

#objectInfoMenu li{
	/*display: inline-block;*/
	margin: 10px 5px;
}

#objectInfoMenu li a{
	display: block;
	width: 36px;
	height: 36px;
}

.pointLargeButton{
	background: url(img/point_large.png) center center no-repeat;
}

.shareLargeButton{
	background: url(img/share_large.png) center center no-repeat;
}

.docsLargeButton{
	background: url(img/docs_large.png) center center no-repeat;
}

.pdfLargeButton{
	background: url(img/pdf_h.png) center center no-repeat;
}

.panoramaButton{
	background: url(img/panorama.png) center center no-repeat;
}

#contact{
	display: block;
	float: right;
    clear: right;
	width: 36%;
	padding: 0px 10px;
	font-size: 13px;
}

.params{
	font-size: 14px;
	padding: 5px 10px;
	vertical-align: top;
	-webkit-column-count: 2; /* Chrome, Safari, Opera */
	-moz-column-count: 2; /* Firefox */
	column-count: 2;
}

.param{
	display: inline-block;
	width: 49%;
	color: #222d7c;
	vertical-align: top;
	margin: 5px 0px;
}

.value{
	display: inline-block;
	width: 49%;
	vertical-align: top;
	margin: 5px 0px;
}

#content{
	position: absolute;
	top: 80px;
	bottom: 35px;
	width: 100%;
}

#map{
    left: 50%;
	width: 50%;
	height: 100%;
	position: absolute;
}

#info{
	float: left;
	width: 50%;
	height: 100%;
	background: #eee;
	background-color: rgba(251,252,252,1);
	position: relative;
	box-shadow: 0px 0px 10px #000;
}

#greenList, #brownList{
	margin-top: 10px;
}

#info > div{
	display: none;
}

#info > div:first-child{
	display: block;
}

.header{
	background: #e5eced;
	padding: 5px 10px;
	color: #000;
	display: block;
}

.header h2{
	color: #222d7c;
}

.grayHeader{
	background: #e5eced;
	padding: 10px 10px;
	color: #000;
	display: block;
}
h2{
	font-size: 16px;
	margin: 3px 0px;
	display: inline-block;
	font-weight: bold;
	color: #fff;
}

.grayHeader h2{
	color: #222d7c;
}

h3{
	font-size: 15px;
	color: #222d7c;
	font-weight: normal;
	margin: 0px;
}

h4{
	font-size: 15px;
	margin: 3px 0px;
	display: inline-block;
	font-weight: normal;
}

button{
	display: inline-block;
	font-family: 'Lato', sans-serif;
	padding: 0px 10px 0px 10px;
	height: 30px;
	line-height: 30px;
	font-size: 12px;
	color: #fff;
	position: relative;
	cursor: pointer;
	background: #222d7c;
	border: 0px;
}


button:hover{
	opacity: 0.9;
}

button img{
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	right: 10px
}

form{
	padding-bottom: 1px;
	box-shadow: 0px 5px 10px -4px #000;
	position: relative;
	z-index: 2;
}

.searchform{
	font-size: 13px;
	margin: 10px 30px 0px 10px;
	-webkit-column-count: 2; /* Chrome, Safari, Opera */
	-moz-column-count: 2; /* Firefox */
	column-count: 2;
}

.searchformButtons{
	margin: 10px;
	display: block;
	text-align: center;
}

.searchformButtons button{
	margin: 0px 5px 2px 0px;
}

.searchform input, .searchform .select, .searchform option{
	border: 0px;
	border-bottom: 1px solid #222d7c;
	font-size: 13px;
	width: 100%;
	height: 17px;
	background: transparent;
	outline: none;
	color: #222d7c;
}

.searchform select{
	width: 100%;
	border: 0px;
	-webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
	background: transparent;
	color: #222d7c;
}

.searchform .select{
	background: url(img/triangle-down.png) 98% 50% no-repeat;
}

.searchParam{
	display: inline-block;
	width: 48%;
	line-height: 30px;
	padding-right: 10px;
	box-sizing: border-box;
	color: #222d7c;
}

.searchValue{
	display: inline-block;
	width: 50%;
	height: 21px;
	padding: 2px 0px;
}

.objects{
	font-size: 15px;
	overflow-y: scroll;
	position: absolute;
	top:185px;
	bottom: 1px;
	width: 100%;
	text-align: center;
	padding-top: 5px;
}

.objectBox{
	display: inline-block;
	margin: 5px 2px 5px 2px;
	padding: 5px 10px;
	width: 45%;
	position: relative;
	background: #fff;
	border: 1px solid #dfe8e0;
	border-top: 3px solid #ff832e;
	overflow: hidden;
	font-size: 12px;
	text-align: left;
	vertical-align: top;
}


.objectBox:after{
	content: '';
	clear: both;
	display: block;
}

.objectBoxImgWrapper{
	float: left;
	width: 50%;
	position: absolute;
	overflow: hidden;
	top: 10px;
	bottom: 10px;
}

.objectBoxImgWrapper > img{
	position: absolute;
    max-height: 100px;
    max-width: 166px;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}

.objectBox button{
	margin-left: 5px;
}

.objectBox hr{
	height: 1px;
	border: 0px;
	background: #e7e7e7;
}

.objectBoxInfo{
	position: relative;
	z-index: 2;
	background: #fff;
	padding: 0px 10px 5px 0px;
}

.objects .objName{
	vertical-align: middle;
	font-size: 15px;
	display: inline;
	margin-left: 5px;
}

.objects .objectMenu{
	list-style: none;
	display: inline-block;
	vertical-align: top;
	padding: 0;
	width: 45%;
	float: right;
	margin: 0;
	margin-bottom: 12px;
	position: relative;
}

.objects .objectMenu li{
	display: block;
	vertical-align: top;
	padding: 0px;
	margin: 0px;
}

.objects .objectMenu a{
	display: block;
	padding: 5px;
	vertical-align: middle;
	color: #231f20;
	text-decoration: none;
}

.objects .objectMenu a .fa{
	display: block;
	float: left;
	height: 100%;
	width: 15px;
	font-size: 18px;
	text-align: center;
	vertical-align: middle;
	margin-right: 5px;
	color: #222d7c;
}

.objects .objectMenu a .fa-file-pdf-o{
	font-size: 16px;
}

.objects  .objectBoxDetails{
	display: block;
	margin: 5px 0px;
	font-size: 13px;
}

input[type=checkbox], input[type=radio]  {
	display: none;
}

label.check {
	display: inline-block;
	width: 13px;
	height: 13px;
	background: url(img/uncheck.png);
	margin-right: 0px;
	vertical-align: middle;
	cursor: pointer;
}

#legend label.check {
	display: inline-block;
	float: none;
	width: 13px;
	height: 13px;
	background: url(img/uncheck.png);
	margin-right: 10px;
	vertical-align: middle;
	cursor: pointer;
}

input[type=checkbox]:checked + label, #legend input[type=checkbox]:checked + label{
	background: url(img/check.png);
}

label.radio {
	display: inline-block;
	width: 13px;
	height: 13px;
	background: url(img/radio.png);
	margin-right: 10px;
	vertical-align: middle;
	cursor: pointer;
}

input[type=radio]:checked + label{
	background: url(img/radio_check.png);
}

.pointButton{
	background: url(img/point.png) center center no-repeat;
}

#legend{
	display: none;
	position: absolute;
	z-index: 2;
	overflow: visible;
	background: url(img/triangle.png) top center no-repeat;
	height: 7px;
	padding-top: 7px;
	margin-top: -7px;
	width: 20px;
	text-align: left;
}

#legendContent{
	width: 300px;
	margin: 0px;
	margin-left: -150px;
	padding: 0px;
	overflow: hidden;
	position: relative;
	top:0px;
	bottom: 5px;
	background: #eee;
	background-color: rgba(251,252,252,1);
	text-align: left;
	box-shadow: 0px 5px 10px -2px #000;
}

#legendForm{
	font-size: 14px;
	line-height: 25px;
	padding: 0px 10px;
}

.closeButton{
	display: block;
	float: right;
	cursor: pointer;
	margin-left: 5px;
}

#closeLegend{
	margin-top: 3px;
	color: #222d7c;
}

.legendMarker{
	display: inline-block;
	width: 13px;
	height: 13px;
	vertical-align: middle;
	margin-right: 10px;
}

.pnMark{background: #7dac95;}
.pkMark{background: #fefe84;}
.rpMark{background: #ee7645;}
.osMark{background: #d66755;}
.opMark{background: #7dadc3;}
.greenMark{background: #1d03ba;}
.greyMark{background: #848484;}
.communeMark{background: #e9b1ff;}

#footer{
	height: 35px;
	width: 100%;
	background: #e5eced;
	bottom: 0px;
	position: absolute;
	box-shadow: 0px 0px 10px #000;
	z-index: 2;
}

#footerLeft{
	float: left;
	height: 100%;
	margin-left: 10px;
}

#copyrights{
	display: inline-block;
	color: #fff;
	font-size: 12px;
	vertical-align: middle;
}

#footerLeft:before{
	content: '';
	position: absolute;
	height: 0px;
	width: 230px;
	z-index: -1;
	left: 0;
	border-top: 35px solid #ff832e;
	border-right: 45px solid transparent;
}

#inwestor{
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
	font-size: 13px;
	top: 10px;
	color: #007eba;
}
#inwestor a{
	text-decoration: none;
	color: #222d7c;
}
#inwestor a:hover{
	color: #007eba;
}

#scale{
	float: right;
	margin: 5px 10px;
	position: relative;
}

#scale .olControlScaleLineTop{
	border-bottom: 1px solid #007eba;
	position: absolute;
}

#scale .olControlScaleLineBottom{
	border-top: 1px solid #007eba;
	position: absolute;
	top: 10px;
	margin: 0px;
}

#scale .olControlScaleLineTop, #scale .olControlScaleLineBottom{
	border-left: 1px solid #007eba;
	border-right: 1px solid #007eba;
	height: 10px;
	text-align: center;
	line-height: 10px;
	color: #007eba;
	font-size:11px;
	right:0;
}

#langs li::before, #menu::before, #mapMenu li::before, #infoMenu a::before, #backToList a::before, .middleHelper{
	content: "";
	display: inline-block;
	height: 100%;
	vertical-align: middle;
	width:1px;
}

.clearfix{
	clear: both;
}

.clearRight{
	clear: right;
}

.floatRight{
	float: right;
}

.floatLeft{
	float: left;
}

.dialogWrapper{
	position: fixed;
	left: 50%;
	top:50%;
	z-index: 10;
}

.dialog{
	position: relative;
	background: #fff;
	left: -50%;
	max-width: 750px;
	box-shadow: 0px 0px 10px #231f20;
}

.message{
	padding: 10px;
}

.half{
	width: 50%;
}

@media all and (max-width: 1300px){
    .searchform, .criteria {
        font-size: 12px;
    }
    .searchformButtons {
        margin: 8px;
    }
}

@media all and (max-width: 1230px){
    .searchform, .criteria {
        font-size: 11px;
    }
    .searchformButtons {
        margin: 7px;
    }
}

@media all and (max-width: 1150px){
    
    .searchform {
        margin: 5px 20px 0px 5px;
    }

    .searchform, .criteria {
        font-size: 10px;
    }
    
    .searchformButtons {
        margin: 5px;
    }
    
	#infoMenu a{
		padding: 0px 15px;
	}
	
	.objects .objectMenu{
		width: 100%;
	}
	
	.objectBox{
		width: 42%;
	}
	
	.objectBoxImgWrapper{
		width: 100%;
		float: none;
		position: relative;
		height: 100px;
		margin-bottom: 10px;
	}
	
	.objects .objName{
		width: 100%;
	}
	
	#legendContent{
		width: 250px;
	}
	
	#contact{
		display: block;
		clear: both;
		width: 100%;
		padding: 0px;
		margin-top: 10px;
		-webkit-column-count: 2;
		-moz-column-count: 2;
		column-count: 2;
	}
}

@media all and (max-width: 950px){
	#top{
		background-position: 10px center;
	}
}

@media all and (max-width: 850px){
	.objectBox{
		width: 40%;
	}
	
	#legendContent{
		margin-left: -170px;
	}
	
	.searchformButtons{
		text-align: right;
	}
	
	.searchformButtons button{
		width: auto;
	}
	
	.searchform{
		-webkit-column-count: 1;
		-moz-column-count: 1;
		column-count: 1;
	}
	
	.objects{
		top: 250px;
	}
	
	.half{
		width: auto;
	}
	
	#exports span{
		display: none;
	}
}

@media all and (max-width: 630px){
	#map{
		display: none;
	}
	#mapMenu{
		display: none;
	}
	#zoom{
		display: none;
	}
	#top{
		background-position: -250px center;
	}
	#info{
		width: 100%;
		min-width: 350px;
		float: left;
	}
	
	#infoMenu{
		width: 90%;
	}
	
	.objectBox{
		width: 42%;
	}
	
	#object{
		width: 100%;
		min-width: 350px;
		float: left;
		right: auto;
	}
	
	#footer{
		min-width: 350px;
	}
	
	#exports span{
		display: inline;
	}
}


@media all and (min-width: 1600px){
	#info, #object{
		width: 50%;
	}
	
	#zoom{
		left: 50%;
	}
	
	#menu{
		position: relative;
	}
	
	#mapMenu{
		position: absolute;
		left: 50%;
		right: 0px;
		width: auto;
		height: 35px;
		top: 0px;
	}
}

#gallcontainer {
    max-width: 50%;
}