/*!
* Full Weather Page V2
* hourly.css file
* edit below as your needs if you are familiar with css!
*/

/* hourly item */
.hourly-item{
	margin:5px;
	background:#f5f5f5;
	padding:10px;
	text-align:left;
	position:relative;	
}

/* time block */
.hourly-time{
	display:inline-block;
	padding:4px 8px;
	border:1px solid;
	font-size:1.1em;
	font-weight:700;
	margin:0 5px 0 0;
}

/*hourly left area*/
.hourly-left{
	float:left;
	margin:0 10px 0 0;
	width:120px;
    text-align:center;
	position:relative;
}


/*hourly right area*/
.hourly-right{
  float: none;
  overflow: hidden;
  word-wrap: break-word;
}

/* condition text */
.hourly-condition{
	display:inline-block;
	padding:8px 4px 8px 0;
	font-size:1.1em;
	font-weight:400;
	margin:0 10px 0 0;
}

/* hourly icon */
.wea-hourly-icon{
	position:relative;
	width:80px;
	height:80px;
	font-size:80px;	
}

/* hourly temperature*/
.hourly-temp{
	text-align:center;
	font-size:2em;
	font-weight:400;
}
.hourly-temp sup{
	font-size:0.6em;
	font-weight:300;
}

/*hourly right text*/
.hourly-right p{
  margin: 3px 0;
  padding:0;
}
.hourly-right p span{
	font-weight:700;
}

/*hourly pagination outer*/
.hourly-pagination{
	position:relative;
	text-align:center;
	margin:5px 0 0 0;
	width:auto;
	max-width:100%;
	display:inline-block;
	clear:both;
}

/*hourly pagination item*/
.hourly-pagination-item{
	margin:4px;
	padding:4px;
	font-size:0.9em;
	border:1px solid;
	background:#f5f5f5;
	display:inline-block;
	cursor:pointer;
}



/*RESPONSIVE STYLE*/
@media only screen and (max-width: 600px) {
	/*hourly left area*/
	.hourly-left{
		float:none;
		margin:0;
		width:auto;
	}

	/*hourly right area*/
	.hourly-right{
	  float: none;
	  overflow: visible;
	  word-wrap: break-word;
	  clear:both;
	}

	/* hourly icon */
	.wea-hourly-icon{
		float:left;
		max-width:40%;
	}
	.hourly-temp-fl{
		float:right;
		margin:20px 0 10px 0;
		max-width:40%;	
		word-wrap: break-word;		
	}
}