.phg_weather {
	text-align: center;
	margin: 10px 0;
	padding: 10px 0;
	width: 100%;
	border: solid #333;
	border-width: 1px 0;
	display: table;
}

.phg_weather span {
	display: block;
}

.phg_weather .phg_weather_description {
	text-transform: capitalize;
}

.phg_weather .phg_weather_current {
	display: table-cell;
	width: 20%;
	border: solid #333;
	border-width: 0 1px 0 0;
	box-sizing: border-box;
	vertical-align: top;
}

.phg_weather .phg_weather_current .phg_weather_temperature {
	font-size: 2.5rem;
}

.phg_weather .phg_weather_forecast {
	display: table-cell;
	width: 80%;
	position: relative;
	overflow: auto;
	padding-bottom: 60px;
}

.phg_weather .phg_weather_forecast .phg_weather_forecast_titles {
	width: 15%;
	text-transform: uppercase;
}

.phg_weather .phg_weather_forecast .phg_weather_temperatures {
	width: 17%; /* This should be the 20% of the 85%, LI to .phg_weather_forecast_relationship */
}

.phg_weather .phg_weather_forecast .phg_weather_temperatures,
.phg_weather .phg_weather_forecast .phg_weather_forecast_titles {
	position: absolute;
	bottom: 0;
}

.phg_weather .phg_weather_forecast ul {
	float: right;
	width: 85%;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.phg_weather .phg_weather_forecast ul li {
	float: left;
	width: 20%;
	margin: 0;
	padding: 0;
}

.phg_weather_icon:before {
	content: "";
	display: block;
	margin: 0 auto;
	width: 60px;
	height: 60px;
	background: url(../images/weather.jpg);
	background-size: 400px; /* It depends on the image original size */
}

/* clear sky - day */
.phg_weather_icon_01d:before {
	background-position: 0 0;
}

/* clear sky - night */
.phg_weather_icon_01n:before {
	background-position: -175px 0;
}

/* few clouds - day */
.phg_weather_icon_02d:before {
	background-position: -260px 0;
}

/* few clouds - night */
.phg_weather_icon_02n:before {
	background-position: -341px 0;
}

/* scattered clouds - day */
.phg_weather_icon_03d:before,
/* scattered clouds - night */
.phg_weather_icon_03n:before {
	background-position: -85px 0;
}

/* broken clouds - day */
.phg_weather_icon_04d:before,
/* broken clouds - night */
.phg_weather_icon_04n:before {
	background-position: -85px -335px;
}

/* shower rain - day */
.phg_weather_icon_09d:before,
/* shower rain - night */
.phg_weather_icon_09n:before {
	background-position: -85px -80px;
}

/* rain - day */
.phg_weather_icon_10d:before {
	background-position: -85px -163px;
}

/* rain - night */
.phg_weather_icon_10n:before {
	background-position: -85px -248px;
}

/* thunderstorm - day */
.phg_weather_icon_11d:before {
	background-position: 0 -163px;
}

/* thunderstorm - night */
.phg_weather_icon_11n:before {
	background-position: 0 -248px;
}

/* snow - day */
.phg_weather_icon_12d:before {
	background-position: -340px -163px;
}

/* snow - night */
.phg_weather_icon_12n:before {
	background-position: -340px -248px;
}

/* mist - day */
.phg_weather_icon_13d:before {
	background-position: -170px -163px;
}

/* mist - night */
.phg_weather_icon_13n:before {
	background-position: -170px -248px;
}

.phg_weather_icon img {
	display: none;
}

@media (max-width: 640px) {
	.phg_weather .phg_weather_current {
		border-width: 0 0 1px 0;
		padding-bottom: 10px;
	}

	.phg_weather .phg_weather_forecast {
		padding-top: 10px;
		font-size: 0.8em;
	}

	.phg_weather .phg_weather_current span {
		display: inline-block;
		vertical-align: middle;
		margin: 0 20px;
	}

	.phg_weather .phg_weather_current .phg_weather_description {
		display: none;
	}

	.phg_weather .phg_weather_current,
	.phg_weather .phg_weather_forecast {
		display: block;
		width: 100%;
	}

	.phg_weather .phg_weather_forecast .phg_weather_icon:before {
		width: 50px;
		height: 50px;
		background-size: 350px;
	}

	/* clear sky - day */
	.phg_weather .phg_weather_forecast .phg_weather_icon_01d:before {
		background-position: 0 0;
	}

	/* clear sky - night */
	.phg_weather .phg_weather_forecast .phg_weather_icon_01n:before {
		background-position: -150px 0;
	}

	/* few clouds - day */
	.phg_weather .phg_weather_forecast .phg_weather_icon_02d:before {
		background-position: -226px 0;
	}

	/* few clouds - night */
	.phg_weather .phg_weather_forecast .phg_weather_icon_02n:before {
		background-position: -302px 0;
	}

	/* scattered clouds - day */
	.phg_weather .phg_weather_forecast .phg_weather_icon_03d:before,
	/* scattered clouds - night */
	.phg_weather .phg_weather_forecast .phg_weather_icon_03n:before {
		background-position: -74px 0;
	}

	/* broken clouds - day */
	.phg_weather .phg_weather_forecast .phg_weather_icon_04d:before,
	/* broken clouds - night */
	.phg_weather .phg_weather_forecast .phg_weather_icon_04n:before {
		background-position: -74px -296px;
	}

	/* shower rain - day */
	.phg_weather .phg_weather_forecast .phg_weather_icon_09d:before,
	/* shower rain - night */
	.phg_weather .phg_weather_forecast .phg_weather_icon_09n:before {
		background-position: -74px -69px;
	}

	/* rain - day */
	.phg_weather .phg_weather_forecast .phg_weather_icon_10d:before {
		background-position: -74px -143px;
	}

	/* rain - night */
	.phg_weather .phg_weather_forecast .phg_weather_icon_10n:before {
		background-position: -74px -218px;
	}

	/* thunderstorm - day */
	.phg_weather .phg_weather_forecast .phg_weather_icon_11d:before {
		background-position: 0 -143px;
	}

	/* thunderstorm - night */
	.phg_weather .phg_weather_forecast .phg_weather_icon_11n:before {
		background-position: 0 -218px;
	}

	/* snow - day */
	.phg_weather .phg_weather_forecast .phg_weather_icon_12d:before {
		background-position: -302px -143px;
	}

	/* snow - night */
	.phg_weather .phg_weather_forecast .phg_weather_icon_12n:before {
		background-position: -302px -218px;
	}

	/* mist - day */
	.phg_weather .phg_weather_forecast .phg_weather_icon_13d:before {
		background-position: -148px -143px;
	}

	/* mist - night */
	.phg_weather .phg_weather_forecast .phg_weather_icon_13n:before {
		background-position: -148px -218px;
	}
}