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

/*forecast outer*/
#wea-forecast-outer{
	margin:0;
	padding:15px;
	position:relative;
	text-align:center;
}
/* forecast title */
.wea-forecast-title{
	float:left;
	text-align:left;
	margin:0 2em 15px 0;
}

/* forcast title H2*/
.wea-forecast-title h2{
	font-size:1.8em;
	font-weight:400;
	margin:0;
	padding:0;
}

/* forecast chart block */
.wea-for-chart{
	position:absolute;
	font-size:1em;
	cursor:pointer;
	right:0;
}
/* forecast chart icon */
.wea-for-chart .fa{
	font-size:1.8em;
}

/*forecast charts area*/
.wea-for-chart-area{
	text-align:center;
	padding:15px;
	border:1px solid;
	margin: 0 0 20px 0;
}

/*forecast date*/
#wea-forecast-outer h3{
	margin:0 0 5px 0;
	padding:0;
	font-weight:400;
	font-size:1.3em;
	text-align:left;
}

/*forecast item outer*/
.forecast-item{
	padding:10px;
	margin:0 0 20px 0;
	text-align:left;
	position:relative;
	background:#f9f9f9;
	border:1px solid #c9c9c9;
}

/* forecast item left */
.forecast-item-left{
	float:left;
	margin:0 20px 0 0;
	text-align:center;
	position:relative;	
}

/* forecast item right */
.forecast-item-left{
	float:left;
	margin:0;
	text-align:left;
	position:relative;	
}

/* forecast icon outer */
.forecast-item-icon{
	float:left;
	position:relative;
}

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

/* forecast temperatures outer */
.forecast-item-temps{
	float:left;
	text-align:left;
	margin:  0 0 0 20px;
	max-width:170px;
	text-align:center;
}

/* forecast temperatures */
.forecast-temp-high{
	font-weight:100;
	font-size:40px;
	padding:10px 0 10px 0;
	display:inline-block;
}
.forecast-temp-high sup{
	font-size:20px;
	font-weight:300;
}

.forecast-temp-low{
	font-weight:100;
	font-size:40px;
	padding:10px 0 10px 0;
	display:inline-block;	
}
.forecast-temp-low sup{
	font-size:20px;
	font-weight:300;
}

/*forecast condition*/
.forecast-condition{
	font-size:1.4em;
	font-weight:300;
	text-align:center;
	display:inline-block;
	margin:0;
	padding:0;
}

/* forecast sunrise sunset*/
.forecast-sunrise{
	float:left;
	text-align:left;
	margin:10px 20px 0 0;
	font-size:1.0em;
}
.forecast-sunrise p{
	margin:0 0 4px 0;
	padding:7px 0 0 1.8em;
	position:relative;	
}

.forecast-sunrise .wea{
	font-size:1.7em;
	font-weight:700;
	position:absolute;	
	top:0;
	left:0;
}

/* forecast moon phase*/
.forecast-moon{
	float:left;
	text-align:left;
	margin:10px 0 0 0;
	font-size:1.0em;
	padding:0;
	cursor:pointer;
}
.forecast-moon p{
	margin:6px 0 8px 0;
	padding:0;
	position:relative;	
}
.forecast-moon p.icon{
	padding:3px 0 0 1.5em;	
}
.forecast-moon .wi{
	font-size:1.4em;
	font-weight:700;
	position:absolute;	
	top:0;
	left:0;	
}

/*forecast detais (humitidy, wind etc)*/
.forecast-details{
	float:left;
	position:relative;
	text-align:left;
	margin:15px 0 0 20px;
	max-width:50%;
}
.forecast-details p{
	margin:0;
	padding:0 0 8px 0;
	position:relative;
	font-size:1.05em;
}
.forecast-details p span{
	font-weight:700;
}
.forecast-details p.wind-dir{
	padding: 0 0 0 1.4em;
	text-align:left;
}
.forecast-details p .cur-deg{
	font-size:1.3em;
	position:absolute;
	left:0;
	top:-0.25em;
}
.forecast-details .wind-dir{
	margin:0 0 8px 0;
}
/*uv*/
.forecast-details .wea-uv-value p{
	margin:0;
	padding:0;
}
/* tabs outer */
.for-tabs{
	padding:15px 0 0 0;
	text-align:center;
}
.for-carousel{
	width:90%;
	margin:0 auto;
}



/*RESPONSIVE STYLE*/
@media only screen and (max-width: 600px) {
	/* forecast outer */
	.forecast-item{
		text-align:center;
	}
	/* forecast conditions (icon, text etc) */
	.forecast-item-left{
		float:none;
		position:relative;
		max-width:100%;
		display:inline-block;
		text-align:center;
	}

	/* forecast details (humidity, wind  etc) */
	.forecast-details{
		float:none;
		position:relative;
		max-width:100%;
		display:inline-block;
	}

	/* forecast icon*/
	.forecast-item-icon {
		float:none;
		position:relative;	
		width:100px;
		text-align:center;
		display:inline-block;
	}

	/* forecats temps (temperature, condition)*/
	.forecast-item-temps {
		float:none;
		position:relative;	
		text-align:center;
		margin: 0 0 0 5px;
		display:inline-block;		
	}
	.wea-current-text p{
		margin:5px 0;
	}
	/* sun-moon*/
	.forecast-sunrise{
		float:none;
		display:inline-block;
		margin-top:10px;
	}

	.forecast-moon{
		float:none;
		display:inline-block;
		padding:5px 0 0 0;
		text-align:left;
	}
	
}