/*  container */
/*  this controls the fonts for the overall widget, also determines the overall width of the widget box*/
.weatherwidget {
	font: normal 12px Arial, Helvetica, sans-serif;
	color: #333;
	margin:10px;
	position:relative;
	z-index:1;
}

.weatherwidget, .weatherwidget .center{
	width:300px /* need a fixed with for layout, box can expand to 640px */
}


.ul, .ur, .bl, .br, .center{	background-repeat:no-repeat;
	float:left;
	display:block;
	position:relative;
}

.ul, .ur{
	height:73px;
}

.ul{
	background-position:left top;
}

.ur{
	background-position:right top;
}

/* Change background for time of day */

/* dawn/dusk */
.weatherwidget_dusk .ul, .weatherwidget_dawn .ul{
	background-position:left -300px;
}

.weatherwidget_dusk .ur, .weatherwidget_dawn .ur{
	background-position:right -300px;
}

/* night */
.weatherwidget_night .ul{
	background-position:left -599px;
}

.weatherwidget_night .ur{
	background-position:right -599px;
}

.ur, .br, .center .right{
	width:112px;
}

.ul, .bl, .center .left{
	width:188px;
}

.center{
	background-position:center -73px;
	float:none;
	padding-top:10px;
}

.message{
	position:absolute;
	top:0;
	left:108px;
	z-index:100;
	width:240px;
	top:130px;
}

.message .mt{
	background:url(/app/modules/weather_widget/images/callout.gif) no-repeat left top;
}


.message .inner{
	padding:18px 8px 0;	
}

.message .mb{
	background:url(/app/modules/weather_widget/images/callout.gif) no-repeat left bottom;
	display:block;
	height:13px;
}

.bl, .br{
	height:18px;	
}
.bl{
	background-position:left bottom;
}

.br{
	background-position:right bottom;
}


.center .left, .center .right{
	float:right;
	display:block;
}

.center .left .inner, .center .right .inner{
	padding:0 0 0 10px;
}

.center .left .inner{
	font-size:10px;
}


.weatherwidget h1{
	position:absolute;
	bottom:0;
	color:#333;
	font-size:18px;
	margin:0;
	padding:0 0 3px 5px;
}

.weatherwidget_night h1{
	color:#fff;
}

/* controls conditions font size*/
.ww_conditions {
	font-size: 10px;
	margin:0 8px 5px;
}

/* positions the weather icon*/
.ww_iconloc {
	float: left;
	position: absolute;
	margin: -13px 0 0 10px;
}

/* controls the temperature field and the weather status, located inside of the iconbox*/
.ww_temp {
	color: #000;
	text-align: center;
	padding:12px 0 0 0;
}

.ww_temp .desc{
 	font-size:10px;
	display:block;
}
.ww_temp .temp{
	font: bold 28px Verdana, Arial, Helvetica, sans-serif;
}

.weatherwidget h2 {
	font: bold 15px Verdana, Geneva, sans-serif;
	margin: 0;
	padding: 0 0 3px 0;
	color: #225a93;
}

/*********************************************
	UTILITIES
*********************************************/
.clear{
	clear:both;
	display:block;
	overflow:hidden;
	visibility:hidden;
	width:0;height:0
}

/* clearfix - is used for clearing floats */
.clearfix:after{
	clear:both;content:' ';
	display:block;
	font-size:0;
	line-height:0;
	visibility:hidden;
	width:0;
	height:0
}

.clearfix{
	display:inline-block
}

* html .clearfix{
	height:1%
}

.clearfix{
	display:block
}

.weather_extra {
	display:none !important;
}

.weather_widget{
	width:215px;
}