/* CSS Document */
body {
	font-family: 'Roboto';
}
#menu {
	position: absolute;
	width: 100%;
	background-color: #0277bd;
	z-index: 1000;
	opacity:0.9;
}
#menu select {
	border: 1px solid #455A64;
	background-color: #455A64;
	color: white;
}
.ui-select {
	margin: 5px !important;
	border-radius: unset !important;
	width: 160px !important;
}
.ui-select .ui-btn {
	padding-top: 5px;
	padding-bottom: 5px;
}
.ui-page-theme-a .ui-btn {
	background-color: #01579b !important;
	border: 0px solid #455A64 !important;
	color: white !important;
	text-shadow: unset !important;
	font-weight: 400 !important;
}
h4 a {
	line-height: 35px !important;
}
#menu > div.ui-collapsible.ui-collapsible-inset.ui-corner-all.ui-collapsible-themed-content.ui-collapsible-collapsed > h4 > a {
	color: yellow !important;
	font-size: 1.05em;
}
#slider {
	width: 30%;
}

#reset_default, #blur, #spin, #intensity {
margin-top:5px;
height:28px !important;
background-color: white !important;
color: blue !important;
line-height: 28px !important;
text-align: center;
}

#blurl, #spinl, #intensityl {
height:28px !important;
line-height: 20px !important;
text-align: center;
color: yellow !important;
}

.ui-grid-b {
border:0px solid #455A64;
margin-top:5px;
padding:2px;
float:left;
}

.intensity {
float:left;
padding:10px;
padding-top: 5px;
}

.intensity label {
float:left;
margin-right:5px !important;
margin-top:5px !important;
}

.intensity button {
float:left;
padding:5px;
padding-left:10px;
padding-right:10px;
}

.radius, .blur {
float:left;
padding:10px;
padding-top: 5px;
}

.radius label, .blur label {
float:left;
margin-right:5px !important;
margin-top:5px !important;
}

.intensity .ui-controlgroup-horizontal {
margin-top:0px !important;
}




.radius .ui-controlgroup-horizontal {
margin-top:0px !important;
}

#spin, #intensity {
margin-top:-5px;
}

.blur .ui-controlgroup-horizontal {
margin-top:0px !important;
}

#blur {
margin-top:-5px;
}


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 !important;
}
.ui-field-contain>label {
	width: 80px !important;
}
.ui-page-theme-a, .ui-overlay-a {
	text-shadow: unset !important;
}
.ui-page-theme-a a {
}
.leaflet-control-zoom-in, .leaflet-control-zoom-out {
	color: #FDD835 !important;
	margin-right: 2px !important;
}
.ui-btn-icon-left:after, .ui-btn-icon-right:after, .ui-btn-icon-top:after, .ui-btn-icon-bottom:after, .ui-btn-icon-notext:after {
	width: 19px !important;
	height: 19px !important;
}
.ui-controlgroup, fieldset.ui-controlgroup {
	margin: 0 !important;
	float: left;
	margin-top: -28px !important;
}
#menu select option:focus {
	outline: none;
}
#reset {
	background-image: url(../images/reset.png);
	background-color: #bf360c;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	width: 30px;
	width: 30px;
	height: 30px;
	line-height: 30px;
	position: fixed;
	top: 100px;
	right: 2px;
	z-index: 999;
}

#legend2,#legend3,#legend4 {
display:none;
min-width:150px;
}

.ui-mobile label, div.ui-controlgroup-label {
	font-size: 12px !important;
}
.ui-body-a, .ui-page-theme-a .ui-body-inherit {
	border-color: #607D8B !important;
	background-color: transparent !important;
	text-shadow: unset !important;
}

.ui-page-theme-a .ui-body-inherit {
color:white !important;
}

.ui-body-a {
 color:white !important;
}


.ui-shadow-inset {

-webkit-box-shadow:unset !important;

-moz-box-shadow:unset !important;

box-shadow:unset !important;
}

#menu select:focus {
	border-color: transparent;
	border: 1px solid black;
	outline: none;
}
#menu select:active {
	border: 1px solid black;
}
.leaflet-top {
	top: 80px;
}
.title {
	width: 100%;
	float: left;
	text-align: center;
	color: white;
	padding: 5px;
	padding-top: 10px;
	font-weight:550;
	text-align: center !important;
	font-size: 1.1em !important;
}
footer {
	background-color: #607D8B;
	z-index: 1000;
	font-size: 10px;
	width: 120px;
	color: white;
	padding: 1px;
	font: 400 13.3333px Arial;
	margin-top: 5px;
	position: absolute;
	right: 5px;
	top: 5px;
}
footer .wrapper {
	background-color: white;
	padding: 4px;
	color: black;
	border: 0px solid black;
}
footer .counter {
	line-height: 10px;
	padding: 3px;
	float: right;
	text-align: center;
	color: crimson;
}
#logo {
    width: 150px;
    height: 125px;
    /* position: absolute; */
    z-index: 999;
    /* right: 10px; */
    /* bottom: 5px; */
    border:unset;
    font-size: 9px;
    /* margin-top: 10px; */
    /* z-index: 9999999; */
}

#logo a {
background-color: white !important;
display: initial;
padding: 1px;
line-height:20px;
}

.legends {
font-size:12px;
line-height:12px;
float:left;
margin-bottom:10px;
}

#legendheat {
font-size:12px;
line-height:12px;
position:fixed;
bottom:10px;
right:0;
margin-bottom:10px;
z-index:999;
margin-right: 2px;
background-color:white;
padding:4px;
border: 1px solid grey;
height:135px;
}

#legend1 {
width:150px;
}

#links {
    position: fixed;
    z-index: 20;
    left: 0;
    top: 100px;
    margin: 2px;
    padding: 2px;
    width: 90px;
    font-size: .55em;
    border-radius: 0;
    float: right;
    z-index: 999;
    text-align: center;
    color:black;
}

#links > a > img {
    border: 1px solid grey
}

.ui-field-contain > label ~ [class*="ui-"] {
//width:35% !important;
}

#colour-button span {
font-size:12.5px !important;

}

#colour-button select {
font-size:12.5px !important;
}

.leaflet-control-zoom {
	margin-top: 90px !important;
}
.legend-elements li {
	list-style-type: none;
}
.leaflet-touch .leaflet-control-layers-toggle {
    width: 30px;
    height: 30px;
    background-color: #607D8B;
    background-image: url(../images/layers-2xc.png);
    background-size: 18px 18px;
}
#legend ul {
	padding: 0;
	font-size: 12px;
	margin: 0;
	margin-top: 10px;
	text-transform: none;
}
#legend ul li {
	list-style-type: none;
}
li.red {
	background: url('../images/red.png') no-repeat left top;
	height: 22px;
	padding-left: 20px;
	line-height: 22px;
}
li.green {
	background: url('../images/green.png') no-repeat left top;
	height: 22px;
	padding-left: 20px;
	line-height: 22px;
}
.leaflet-left {
	top: 50px;
	right: 0px;
	left: unset;
}
.leaflet-control-layers {
	position: absolute;
	right: 2px;
	top: 120px;
	z-index: 1000;
}
.leaflet-control-geocoder {
	position: absolute;
	right: 0px;
	top: 160px;
	z-index: 999;
}
.leaflet-bar {
	border-radius: unset;
}
.leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	border: unset;
	background-clip: padding-box;
}

.leaflet-control-layers-expanded {
	background-color: #607D8B;
	color: white;
	border: unset;
	border-radius: unset;
}
.leaflet-touch .leaflet-bar a {
	border-radius: unset;
}

.zoom-levels {
	margin-right: 35px !important;
}
.leaflet-bar a, .leaflet-bar a:hover {
	background-color: #607D8B;
	color: #FDD835;
	border-radius: unset;
}
.leaflet-touch .leaflet-control-zoom-in {
	font-size: 18px;
}
.leaflet-control-geocoder {
	order-radius: unset;
}
.leaflet-control-geocoder-icon {
	border-radius: unset !important;
	width: 26px;
	height: 26px;
	border: none;
	background-color: #1565c0 !important;
	background-image: url(../images/geocoder2.png) !important;
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
	margin-right: 2px !important;
}
.leaflet-control-geocoder {
	border-radius: unset;
	background: #607D8B;
	font: 400 13.3333px Arial;
	font-weight: normal;
}
.leaflet-control-geocoder-form input {
	font-size: 14px !important;
	font: 400 13.3333px Arial !important;
	border: 0;
	background-color: transparent;
	width: 246px;
	height: 30px;
}
.leaflet-control-layers .leaflet-control-layers-list {
	width: 194px;
}
.ui-btn {
	padding-top: 0.25em !important;
}
#projectname-button span {
	color: #FDD835 !important;
}
@media only screen and (max-width: 767px) {
.title {
	font-size: 15px !important;
	text-align: left;
}
#slider {
	width: 80%;
	margin-left: 70px;
}

#labelcolours {
    float:left;
}
.yearrangeselection {
    float:left;
}

#menu > div.ui-collapsible.ui-collapsible-inset.ui-corner-all.ui-collapsible-themed-content > div > div:nth-child(3) > div {
    width: 300px !important;
}
}