@charset "UTF-8";
/* CSS Document */
#weather_map {
	background-image: url("../images/yellowstone_map.jpg");
	background-size: cover;
	background-color: rgba(178,188,183,1.0);
	background-repeat: no-repeat;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 1;
}
#weather_mammoth {
	position: absolute;
	top: 10%;
	left: 30%;
	background-color: rgba(0,0,0,0.7);
	width: 360px;
	height: 200px;
	z-index: 2;
	font-size: 80%;
	box-shadow: 10px 10px 20px rgba(0, 0, 0, .7);
}
#weather_lake {
	position: absolute;
	top: 60%;
	left: 60%;
	background-color: rgba(0,0,0,0.7);
	width: 360px;
	height: 200px;
	z-index: 2;
	font-size: 80%;
	box-shadow: 10px 10px 20px rgba(0, 0, 0, .7);
}
#weather_of {
	position: absolute;
	top: 65%;
	left: 30%;
	background-color: rgba(0,0,0,0.7);
	width: 360px;
	height: 200px;
	z-index: 2;
	font-size: 80%;
	box-shadow: 10px 10px 20px rgba(0, 0, 0, .7);
}
#weather_west {
	position: absolute;
	top: 40%;
	left: 15%;
	background-color: rgba(0,0,0,0.7);
	width: 360px;
	height: 200px;
	z-index: 2;
	font-size: 80%;
	box-shadow: 10px 10px 20px rgba(0, 0, 0, .7);
}
#weather_northeast {
	position: absolute;
	top: 10%;
	left: 70%;
	background-color: rgba(0,0,0,0.7);
	width: 360px;
	height: 200px;
	z-index: 2;
	font-size: 80%;
	box-shadow: 10px 10px 20px rgba(0, 0, 0, .7);
}
.weather-title {
	font-weight: bold;
	font-size: 24px;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 2;
	width: 352px;
	height: 30px;
	background-color: rgba(0,0,0,.8);
	padding-left: 8px;
	padding-top: 2px;
}
.weather-title2 {
	font-weight: bold;
	font-size: 14px;
	position: absolute;
	top: 3%;
	left: 2%;
}
.weather-description {
	position: absolute;
	top: 35px;
	left: 8px;
	width: 240px;
	font-size: 18px;
	z-index: 2;
}
.weather-description2 {
	position: absolute;
	top: 42%;
	left: 2%;
	width: 75%;
	font-size: 10px;
}
.weather-rain {
	position: absolute;
	top: 90px;
	left: 8px;
	z-index: 2;
	font-size: 24px;
}
.weather-temp {
	position: absolute;
	top: 90px;
	left: 8px;
	z-index: 2;
	font-size: 24px;
}
.weather-temp2 {
	position: absolute;
	top: 50%;
	left: 2%;
	width: 75%;
	font-size: 14px;
}
.weather-degrees {
	font-weight: bold;
}
.weatherIcon {
	position: absolute;
	top: 45px;
	right: 8px;
	width: 100px;
	height: 100px;
	overflow-x: hidden;
}
.weather-icon {
	height: 100%;
	float: right;
	z-index: 1;
}
.weatherIcon2 {
	position: absolute;
	top: 80%;
	right: 50%;
	width: 25%;
	height: 20%;
	overflow-x: hidden;
}
.weatherIcon3 {
	position: absolute;
	top: 80%;
	right: 0%;
	width: 25%;
	height: 20%;
	overflow-x: hidden;
}
.tomorrow {
	position: absolute;
	top: 80%;
	left: 0%;
	width: 50%;
	height: 20%;
	background-color: rgba(255,255,255,0.15);
}
.nextday {
	position: absolute;
	top: 80%;
	left: 50%;
	width: 50%;
	height: 20%;
	background-color: rgba(255,255,255,0.25);
}