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

/* current outer */
.current-outer{
	margin:0;
	padding:15px;
	position:relative;
}

/* city title/settings outer */
.wea-title-outer{
	position:relative;
	clear:both;
}

/* city title */
.wea-city-title{
	float:left;
	text-align:left;
	margin-right:2em;
}

/* city title H1*/
.wea-title-outer h1{
	font-size:1.8em;
	font-weight:400;
	margin:0;
	padding:0;
}

/* settings block */
.wea-settings{
	position:absolute;
	font-size:1.8em;
	cursor:pointer;
	right:0;
}

/* current conditions (icon, text etc) */
.current-conditions{
	float:left;
	position:relative;
	max-width:60%;
}

/* current conditions left (icon + text)*/
.current-conditions-left {
	float:left;
	position:relative;	
	width:128px;
	text-align:center;	
}

/* current conditions right (temperature, forecast)*/
.current-conditions-right {
	float:left;
	position:relative;	
	text-align:center;
	margin: 0 0 0 20px;
}

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

/* current text */
.wea-current-text{
	position:relative;
	text-align:center;
}
.wea-current-text p{
	font-weight:400;
	font-size:1.3em;
	margin:10px 0 10px 0;
	padding:0;
}
.current-conditions-right p{
	font-weight:100;
	font-size:80px;
	margin:20px 0 0 0;
	padding:0;
}
.current-conditions-right sup{
	font-size:32px;
	font-weight:300;
}
.current-conditions-right h2{
	font-size:1.1em;
	margin:0 0 15px 0;
	padding:0;
	font-weight:400;
}
.current-conditions-right h2 sup{
	font-size:0.9em;
}
.current-conditions-right span{
	font-size:1.1em;
}
.current-conditions-right span sup{
	font-size:0.9em;
}

/* current sun moon */
.current-sun-moon p{
	margin:5px 0 0 0;
	padding:0 0 0 1.8em;
	font-size:1.1em;
	font-weight:400;
	text-align:left;
	position:relative;	
}
.current-sun{
	float:left;
	margin:0 30px 0 0;
	position:relative;
}
.sun-pos{
	padding:0;
	margin:0 0 5px 0;
	position:relative;
}
/*sun icon*/
.current-sun p .wea{
	font-size:1.7em;
	position:absolute;
	left:0;
	top:-0.2em;
}
.current-moon{
	float:left;
	text-align:left;
	padding:5px 0 0 0;
	cursor:pointer;
}
.current-moon p {
	position:relative;
	text-align:right;
}
.current-moon .icon {
	position:relative;
	padding:0.15em 0 0 1.4em;
	text-align:left;
}
/*moon icon*/
.current-sun-moon p .wi{
	font-size:1.3em;
	position:absolute;
	left:0;
	top:0;
	color:#ccc;
}
.current-sun-moon p span{
	font-weight:700;
}
.current-moon img{
	float:left;
	margin:0 5px 0 0;
	width:1.1em;
}
/*current update,station etc */
.wea-cur-update{
	margin:7px 0 0 0;
	text-align:center;
	font-size:1em;
}

/*earthquake div*/
.wea-earthquake{
	margin:10px 0;
	padding:5px 10px;
	font-size:1.1em;
	text-align:center;
	border:1px dotted #999999;
	background:#f9f9f9;
	cursor:pointer;
}
.wea-earthquake p{
	margin:0;
	padding:0;
	font-weight:700;
}
.wea-earthquake p span{
	font-weight:400;
}
.wea-earthquake span{
	font-weight:700;
}

/*earthquake modal window*/
#popupeq{
	width:50%;
}
#popupeq h3{
	color:#cc0000;
}
#popupeq .eq-details{
	margin:0 0 10px 0;
	text-align:left;
	color:#000;
}

#popupeq p span{
	font-weight:700;
}
#eqmap{
	width: 100%; 
}

/** Alert */
.cur-alert{
	padding:8px 15px;
	font-size:1.1em;
	font-weight:700;
	text-align:left;
	margin:15px 0;
	cursor:pointer;
}
#popupalert h3{
	color:#cc0000;
	display:inline-block;
}


/**** current details ***/
.current-details{
	float:left;
	position:relative;
	margin:0 0 0 30px;
	padding:20px 0 0 0;
	text-align:left;
	font-size:1.1em;
	max-width:35%;
}
.current-details p {
	margin:0 0 10px 0;
	padding:0;
	position:relative;
}
.current-details p span{
	font-weight:700;
}
.current-details p.wind-dir{
	padding: 0 0 0 1.4em;
	text-align:left;
}
.current-details p .cur-deg{
	font-size:1.3em;
	position:absolute;
	left:0;
	top:-0.1em;
}
.cur-notes{
	font-size:0.9em;
	text-align:left;
	margin:5px 0 0 0;
}
.wea-copyright{
	margin:5px 0 0 0;
	text-align:left;
	font-size:0.9em;
}

/*uv style */
.uv-outer{
	position:relative;
	margin:0 0 5px 0;
}
.wea-uv-title{
	float:left;
	padding:0.45em 0;
	margin:0 5px 0 0;
}
.wea-uv-bar-outer{
	float:left;
	font-size:0.9em;
	position:relative;
	font-weight:700;
}
.wea-uv-value{
	display:inline-block;
	text-align:center;
	margin:0 0 1px 0;
}
.wea-uv-value p{
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0.5em 0.4em 0 0.4em;
	border-color: #000000 transparent transparent transparent;
	line-height: 0px;
	_border-color: #000000 #ffffff #ffffff #ffffff;
	_filter: progid:DXImageTransform.Microsoft.Chroma(color='#ffffff');
	margin:0;
	padding:0;
	text-align:center;	
}
.wea-uv-bar{
	background: #22ad22; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzIyYWQyMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2Y0ZGMwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjgwJSIgc3RvcC1jb2xvcj0iI2ZmMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM4ODAwZjciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(left,  #22ad22 0%, #f4dc00 50%, #ff0000 80%, #8800f7 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#22ad22), color-stop(50%,#f4dc00), color-stop(80%,#ff0000), color-stop(100%,#8800f7)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  #22ad22 0%,#f4dc00 50%,#ff0000 80%,#8800f7 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  #22ad22 0%,#f4dc00 50%,#ff0000 80%,#8800f7 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  #22ad22 0%,#f4dc00 50%,#ff0000 80%,#8800f7 100%); /* IE10+ */
	background: linear-gradient(to right,  #22ad22 0%,#f4dc00 50%,#ff0000 80%,#8800f7 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#22ad22', endColorstr='#8800f7',GradientType=1 ); /* IE6-8 */
	width:120px;
	height:3px;
	display:block;
	margin:0 0 0 5px;
}

/*sun/moon position*/
.wea-sun-outer{
	position:relative;
	margin:0 0 5px 0;
}
.wea-sun-title{
	float:left;
	padding:0.45em 0;
	margin:0 5px 0 0;
}
.wea-sun-bar-outer{
	float:left;
	font-size:0.9em;
	position:relative;
	font-weight:700;
}
.wea-sun-value{
	display:inline-block;
	text-align:center;
	margin:0 0 1px 0;
}
.wea-sun-value i{
	font-size:2em;
	margin:0 0 0 -7px;
	padding:0;
	font-weight:700;
	color:#e7731d;
}
.wea-sun-value p{
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0.5em 0.4em 0 0.4em;
	border-color: #e7731d transparent transparent transparent;
	line-height: 0px;
	_border-color: #e7731d #ffffff #ffffff #ffffff;
	_filter: progid:DXImageTransform.Microsoft.Chroma(color='#ffffff');
	margin:0;
	padding:0;
	text-align:center;	
}
.wea-sun-bar{
	background: #82c0ff; 
	height:10px;
	display:block;
	margin:0;
	float:left;	
	border-left:1px solid #fff;
	border-right:1px solid #fff;
	position:relative;
}
.wea-sun-bar-div{
	height:10px;
	width:1px;
	background:#e7731d;
	margin:0;
	padding:0;
	display:block;	
}
.wea-sun-bar-s{
	background: #000c17; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBlMGUwZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZDdlN2QiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(left,  #000c17 0%, #0078e6 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#000c17), color-stop(100%,#0078e6)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  #000c17 0%,#0078e6 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  #000c17 0%,#0078e6 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  #000c17 0%,#0078e6 100%); /* IE10+ */
	background: linear-gradient(to right,  #000c17 0%,#0078e6 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000c17', endColorstr='#0078e6',GradientType=1 ); /* IE6-8 */
	height:10px;
	display:block;
	margin:0;	
	float:left;		
}
.wea-sun-bar-e{
	background: #0078e6; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkN2U3ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwZTBlMGUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(left,  #0078e6 0%, #000c17 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#0078e6), color-stop(100%,#000c17)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  #0078e6 0%,#000c17 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  #0078e6 0%,#000c17 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  #0078e6 0%,#000c17 100%); /* IE10+ */
	background: linear-gradient(to right,  #0078e6 0%,#000c17 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0078e6', endColorstr='#000c17',GradientType=1 ); /* IE6-8 */
	height:10px;
	display:block;
	margin:0;
	float:left;		
}
.wea-sun-bar-rise{
	float:left;
	margin-left:-4px;
	font-size:0.9em;
	font-weight:400;
	text-align:left;
}
.wea-sun-bar-set{
	float:right;
	margin-right:0;
	font-size:0.9em;
	font-weight:400;
	text-align:right;	
}
.wea-sun-bar-rise p, .wea-sun-bar-set p{
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0.4em 0.3em 0 0.3em;
	border-color: #000000 transparent transparent transparent;
	line-height: 0px;
	_border-color: #000000 #ffffff #ffffff #ffffff;
	_filter: progid:DXImageTransform.Microsoft.Chroma(color='#ffffff');
	margin:0;	
	padding:0;
	text-align:left;	
}

.wea-sun-bar-set p{
	text-align:right;
	float:right;
	margin-right:-2px;
}
/* tabs outer */
#cur-tabs{
	padding:15px 0 0 0;
	text-align:center;
}

.wea-carousel{
	width:90%;
	margin:0 auto;
}



/*RESPONSIVE STYLE*/
@media only screen and (max-width: 600px) {
	/* current outer */
	.current-outer{
		text-align:center;
	}
	/* current conditions (icon, text etc) */
	.current-conditions{
		float:none;
		position:relative;
		max-width:100%;
		margin:0 auto;
	}

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

	/* current conditions left (icon + text)*/
	.current-conditions-left {
		float:none;
		position:relative;	
		width:128px;
		text-align:center;
		display:inline-block;
	}

	/* current conditions right (temperature, forecast)*/
	.current-conditions-right {
		float:none;
		position:relative;	
		text-align:center;
		margin: 0 0 0 5px;
		display:inline-block;		
	}
	.wea-current-text p{
		margin:5px 0;
	}
	.current-conditions-right p{
		margin:0;
	}	
	/* sun-moon*/
	.current-sun{
		float:none;
		display:inline-block;
		margin-top:15px;
	}

	.current-moon{
		float:none;
		display:inline-block;
		padding:5px 0 0 0;
		text-align:left;
	}
	/*earthquake modal window*/
	#popupeq{
		width:90%;
	}	
}