/************ Main Weather ************/

.weatherContainer, .weatherContainer *, .weatherContainer *:before, .weatherContainer *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

/**** Mobile Weather Widget ****/
.weatherContainer.weatherWidgetMobile {
	position: absolute;
	right: 0px;
	z-index: 20002;
}
.weatherContainer.weatherWidgetMobile .currentDay {
	height: 32px;
	width: 74px;
	cursor: pointer;
}
.weatherContainer.weatherWidgetMobile.open .currentDay {
	background-color: #047880;
}

/**** Desktop Weather Widget ****/
.weatherContainer.weatherWidgetMulti {
	position: absolute;
	left: 322px;
	z-index: 20002; /* To be above nav */
}
.weatherContainer a { text-decoration: none;}
.weatherContainer.weatherWidgetMulti .currentDay {
	background: transparent url(/includes/public/assets/images/weather-downarrow.png) no-repeat 66px center;
	height: 32px;
	width: 80px;
	cursor: pointer;
}
.weatherContainer.weatherWidgetMulti.open .currentDay { background-color: #047880;}
.weatherContainer .weather-img {
	width: 32px;
	height: 32px;
	display: block;
	float: left;
	margin-right: 5px;
}
.weatherContainer .weather-img img { width: 32px;}
.weatherContainer .currentDay .temp {}

/* Typography */
.weatherContainer .temp,
.weatherContainer .date,
.weatherContainer .text,
.weatherContainer .daytext {
	display: block;
	float: left;
	line-height: 32px;
	font-family: "tablet-gothic-compressed";
	font-style: normal;
	font-size: 18px;
	color: #fff;
}
.weatherContainer .temp.high { color: #ffd479;}
.weatherContainer .temp.low { color: #1ceafe;}
.weatherContainer .weatherdroptop .temp { font-size: 30px; margin-right: 10px;}
.weatherContainer .date {}
.weatherContainer .visual { display: inline-block; width: 85px; height: 32px;}
.weatherContainer .visual img {width: 32px;}
.weatherContainer .text {}
.weatherContainer .weatherdroptop .weather-img img { position: relative; top: 5px;}
.weatherContainer .weatherdroptop .text.current { width: 60px; line-height: 17px; position: relative; top: 7px; margin-right: 5px;}
.weatherContainer .weatherinfo.weekend .daytext { color: #ffd479;}

.weatherContainer .weatherdrop {
	background-color: #059baa;
	display: none;
	width: 304px;
	height: 235px;
	padding: 0 16px 10px 16px;
	-webkit-box-shadow: 0 0 16px 0 rgba(0,0,0,.50);
	box-shadow: 0 0 16px 0 rgba(0,0,0,.50);
	-webkit-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;
}
.weatherContainer .weatherdroptop { height: 50px;}
.weatherContainer .weatherdroptop .weather-img { width: 50px; height: 51px;}
.weatherContainer .weatherdroptop .weather-img img {width: 50px;}
.weatherContainer .weatherdroptop .temp { line-height: 50px;}
.weatherContainer .weatherdroptop .text { line-height: 50px; position: relative; top: 5px;}

.weatherContainer .weatherinfo a {
	border-top: 1px solid #69c1ca;
	line-height: 32px;
	height: 32px;
	display: block;
}
.weatherContainer .weatherinfo span { float: left; text-transform: uppercase;}
.weatherContainer .weatherinfo span.temp {}
.weatherContainer .weatherinfo span.temp.high {}
.weatherContainer .weatherinfo span.temp.low {float: right;}
.weatherContainer .weatherdrop .weatherinfo span {text-align: center;}
.weatherContainer .weatherdrop .weatherinfo span.date { width: 67px; text-align: left;}
.weatherContainer .weatherdrop .weatherinfo span.daytext { width: 47px;}
.weatherContainer .weatherdrop .weatherinfo .visual img { width: 32px;}



/************ Side Widget ************/
.weatherWidgetSide {
	background-color: #059baa;
	width: 224px;
	height: 235px;
	padding: 0 16px 10px 16px;
	-webkit-box-shadow: 0 0 8px 0 rgba(0,0,0,.50);
	box-shadow: 0 0 16px 0 rgba(0,0,0,.50);
	-webkit-border-radius: 5px;
	border-radius: 5px;
	margin: 0px 0 20px;
	overflow: hidden;
}
.weatherWidgetSide.left { margin: 0px 15px 20px 0px; }
.weatherWidgetSide.right { margin: 0px 0px 20px 15px; }
.weatherWidgetSide .weathertop { height: 50px;}
.weatherContainer .weathertop .text.current { width: 50px; line-height: 14px; position: relative; top: 10px; margin-right: 5px;}
.weatherWidgetSide .weathertop .weather-img { width: 50px; height: 51px;}
.weatherWidgetSide .weathertop .weather-img img {width: 50px;}
.weatherWidgetSide .weathertop .temp { line-height: 50px; margin-right: 5px; font-size: 24px;}
.weatherWidgetSide .weathertop .text {   max-width: 54px; line-height: 14px; top: 10px; position: relative; }
.weatherWidgetSide .weatherinfo span.date { width: 55px;}
.weatherWidgetSide .weatherinfo .daytext, .weatherWidgetSide .visual { width: 45px;}

.weatherAjax { display: none; }

@media only screen and (max-width: 40em) {
	.weatherWidgetSide.left, .weatherWidgetSide.right { float: none !important; margin: 0px auto 20px; }
}