body{
	font-family:Garamond;
	background-color:#996633;
	font-weight:800;
    margin:0;
}

h1{
	color:green;
}

.healthTitleBar{
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 50%;
	transform: translate(0, -15%)
}


.actionBar{
	float:left;
	width:330px;
	height:300px;
	padding:10px;
	background-size:100%;
}

.infoBar{
	background-color:#663300;
	Color:#BFBEBE;
	font-size:20px;
	font-weight:bold;
	padding:10px;
	text-align:right;
	height:60px;
}

.infoItem{
	display:inline-block;
	width:150px;
	height:40px;
	padding:px;
	background-image:url("file:///C:/Users/RMaxw/OneDrive/Desktop/Website/images/png/StoneSmall.png");
	background-size:150px;
}

.resourceBar{
	background-color:#663300;
	Color:#BFBEBE;
	font-size:20px;
	font-weight:bold;
	padding:20px;
	text-align:right;
	height:400px;
	float:right;
	width:18%;	
	background-image:url("file:///C:/Users/RMaxw/OneDrive/Desktop/Website/images/png/ParchmentMega.png");
	background-size:100%;
	position:relative;
}

.resourceTitleBar{
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 75%;
	transform: translate(0, -45%)
}

.resource{
	display:block;
	width:130px;
	height:30px;
	background-image:url("file:///C:/Users/RMaxw/OneDrive/Desktop/Website/images/png/StoneSmall.png");
	background-size:130px;
}

.weatherImage{
	background-color:#51BBE9;
	padding:20px;
	height: 400px;
	width:77%;
	float:left;
	transition-property: background-color;
	transition-duration: .5s;
	position: relative;
}

.results{
	padding:10px;
	float:left;
	width:270px;
	height:185px;
	background-size:100%;
}

.infoscreenbox{
	padding:10px;
	float:left;
	width:270px;
	height:185px;
}

.button{
	width:150px;
	height:49px;
	background-image: url("file:///C:/Users/RMaxw/OneDrive/Desktop/Website/images/png/BtnUp.png");
	background-size:150px;
	font-size:20px;
	border:none;
	background-color:transparent;
}

.button:active{
	background-image: url("file:///C:/Users/RMaxw/OneDrive/Desktop/Website/images/png/BtnDown.png");
	
}

.button:focus{
	outline:none;
}


.slidecontainer {
	width: 330px;
	height: 120px;
	background-image:url("file:///C:/Users/RMaxw/OneDrive/Desktop/Website/images/png/ParchmentSmall.png");
	background-size:100%;
	clear: Both;
	position: relative;
	float:right;
	margin-top:20px;
}

/* The slider itself */
.slider {
	-webkit-appearance: none;  /* Override default CSS styles */
	appearance: none;
	width: 200px; /* Specified width */
	height: 32px; /* Specified height */
	background-image: url("file:///C:/Users/RMaxw/OneDrive/Desktop/Website/images/png/healthbarB.png");
	background-size: 100%;
	background-color:transparent;
	outline: none; /* Remove outline */
	/*opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
	/*-webkit-transition: .2s; /* 0.2 seconds transition on hover */
	/*transition: opacity .2s;*/
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -70%)
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
	-webkit-appearance: none; /* Override default look */
	appearance: none;
	width: 23px; /* Set a specific slider handle width */
	height: 23px; /* Slider handle height */
	border-radius: 11px;
	background: #4CAF50; /* Grey background */
	cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
	position: absolute;
	width: 25px;
	height: 25px;
	background: #4CAF50;
	cursor: pointer;
}

.topmid{
	position: absolute;
	left: 50%;
	Transform: translate(-50%, -180%);
}

.bottommid{
	position: absolute;
	width: 90%;
	left: 50%;
	Transform: translate(-50%, 25px);
	text-align: center;
}
.right{
	position: absolute;
	left: 100%;
	Transform: translate(-50px, 0);
}
.toptitle{
	position: absolute;
	left: 50%;
	Transform: translate(-50%, -210%);
	font-size:30px;
}

.brclear {
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}

.captiontext{
	color:black;
}