/* flex webkit usage homeweatherstation css September 14th 2016  cleaned with http://www.cleancss.com/css-beautify/*/
@font-face {
	font-family: weathericons;
	src: url(fonts/weathericons-regular-webfont.eot?) format("eot"),url(fonts/weathericons-regular-webfont.woff) format("woff"),url(fonts/weathericons-regular-webfont.ttf) format("truetype");
	font-display: swap;
}

@font-face {
	font-family: weathertext;
	src: url(fonts/weathertext.eot?) format("eot"),url(fonts/weathertext.woff) format("woff"),url(fonts/weathertext.ttf) format("truetype");
	font-display: swap;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;	
}

@font-face {font-family: 'VerbLight';src: url('fonts/321E69_0_0.eot');src: url('fonts/321E69_0_0.eot?#iefix') format('embedded-opentype'),url('fonts/321E69_0_0.woff2') format('woff2'),url('fonts/321E69_0_0.woff') format('woff'),url('fonts/321E69_0_0.ttf') format('truetype');
font-display: swap;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;


}




@font-face {
	font-family: HelveticaNeue;
	src: url(fonts/HelveticaNeue.eot) format("eot"),url(fonts/HelveticaNeue.woff) format("woff"),url(fonts/HelveticaNeue.ttf) format("truetype");
	font-display: swap;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
}

*,:after,:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	background: #fff;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
	color: #7c7e80;
	font-family: arial,sans-serif;
	clear: both;
}

#navigation {
	display: none;
}

.fgtext {
	color:#777;
}

.windvalue {
color:#777;
font-family:weathertext,arial;
}

.windblowing {
	
	position:absolute;margin-top:5px;margin-left:60px;font-size:11px;
	}



.gustblowing {
	
	position:absolute;margin-top:5px;margin-left:165px;font-size:11px;
	}
	
.beaufort {
	
	position:absolute;margin-top:55px;margin-left:50px;font-size:11px;
	}	



.left {
	float: left;
}

.right {
	float: right;
	top: 10px;
	margin-left: 0;
	margin-right: 20px;
}

input[data-function*='swipe'] {
	position: absolute;
	opacity: 0;
	
}

label[data-function*='swipe'] {
	position: absolute;
	top: 10px;
	left: 5px;
	z-index: 99999;
	display: block;
	width: 142px;
	height: 45px;
	text-align: center;
	color: #777;
	-webkit-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	-webkit-transition: transform .3s;
	-moz-transform: translate3d(0,0,0);
	-moz-transition: transform .3s;
	-o-transform: translate3d(0,0,0);
	-o-transition: transform .3s;
	transform: translate3d(0,0,0);
	transition: transform .3s;
	cursor:pointer;
}

label[data-function*='swipe']:after {
	position:absolute;
	content: 'MENU';
	font-family: "HelveticaNeue","Helvetica Neue Light","Helvetica Neue",Arial,"Lucida Grande",sans-serif;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
	font-weight: 400;
	font-size: 13px;
	padding-left: 5px;
	margin-top:10px;
	cursor:pointer;
}

input[data-function*='swipe']:checked ~ label[data-function*='swipe']:after {
	content: 'CLOSE';
	font-family: "HelveticaNeue","Helvetica Neue Light","Helvetica Neue",Arial,"Lucida Grande",sans-serif;
	
	font-weight: 400;
	font-size: 13px;
	padding-left: 5px;
}

input[data-function*='swipe']:checked ~ .content {
	-webkit-transform: translate3d(260px,0px,0px);
	-moz-transform: translate3d(260px,0px,0px);
	-o-transform: translate3d(260px,0px,0px);
	-ms-transform: translate3d(260px,0px,0px);
	transform: translate3d(260px,0px,0px);
}

input[data-function*='swipe']:checked ~ .sidebar {
	-webkit-transform: translate3d(0px,0px,0px);
	-moz-transform: translate3d(0px,0px,0px);
	-o-transform: translate3d(0px,0px,0px);
	-ms-transform: translate3d(0px,0px,0px);
	transform: translate3d(0px,0px,0px);
}

input[data-function*='swipe']:checked ~ .sidebar .menu li {
width:260px;
}

.sidebar {
-webkit-transform:translate3d(-260px,0px,0px);
-moz-transform:translate3d(-260px,0px,0px);
-o-transform:translate3d(-260px,0px,0px);
-ms-transform:translate3d(-260px,0px,0px);
transform:translate3d(-260px,0px,0px);
position:absolute;
width:260px;
color:#ccc;
left:0;
height:100%;
transition:all .3s;
z-index:10;
top:55px;
border:0;
border-top:1px solid #777;

}

.menu li {
list-style:none;
text-align:left;
padding:2px;
background:#3d3d3d;
border-bottom:1px solid #777;
line-height:0.8em;
}

.menu .active {
font-family:Arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
font-weight:400;
background:#3d3d3d;

}

.menu li a {
color:#fff;
display:block;
text-decoration:none;
-webkit-box-shadow:rgba(0,0,0,.2) 0 0 1px;
-moz-box-shadow:rgba(0,0,0,.2) 0 0 1px;
-ms-box-shadow:rgba(0,0,0,.2) 0 0 1px;
-o-box-shadow:rgba(0,0,0,.2) 0 0 1px;
box-shadow:rgba(0,0,0,.2) 0 0 1px;
font-family:Arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
font-weight:400;
font-size:12px;
margin:0 5px;
padding:3px 0;

}

.menu li:hover {
color:#777;
border-radius:0;
font-family:Arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
border-left:0;
-webkit-border-top-right-radius:3px;
-webkit-border-bottom-right-radius:3px;
border-top-right-radius:3px;
border-bottom-right-radius:3px;
margin-left:0;
width:90%;
background:#3d3d3d;
}

button {
position:relative;
font-size:16px;
border:none;
cursor:pointer;
margin-right:0;
margin-top:-45px;
width:auto;
padding:0;
background:none;
}

header {
	-webkit-box-shadow: rgba(0,0,0,.1) 0 1px 0;
	-o-box-shadow: rgba(0,0,0,.1) 0 1px 0;
	-ms-box-shadow: rgba(0,0,0,.1) 0 1px 0;
	background-color: #fff;
	box-shadow: rgba(0,0,0,.1) 0 1px 0;
	height: 3.9em;
	position: fixed;
	text-align: center;
	top: 0;
	width: 100%;
	z-index: 1;
}

h1 {
	color: #7c7e80;
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: -.05em;
	line-height: 3.3em;
	padding-right: .5em;
	top: 10px;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
}

.logo {
	position: absolute;
	color: #7c7e80;
	font-size: 1.4em;
	letter-spacing: -.05em;
	line-height: 3.3em;
	padding-right: .5em;
	margin-top: -60px;
}

.logo span {
	color: #7c7e80;
	font-weight: 100;
	letter-spacing: -.05em;
}

.weather-item,body {
	text-align: center;
	text-transform: none;
	font-family: arial,sans-serif;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
}

.weather-container,.weather-item,a,body {
	text-transform: none;	
	font-family: arial,sans-serif;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
}

.weather2-item,.weatherfooter-item {
	font-family: "HelveticaNeue","Helvetica Neue Light","Helvetica Neue",Arial,"Lucida Grande",sans-serif;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
}

.weather-item,.weather2-item {
	color: #7c7e80;
	font-weight: 400;
	-webkit-box-shadow: 0 .25em .25em #e9ebf1;
	-o-box-shadow: 0 .25em .25em #e9ebf1;
	-ms-box-shadow: 0 .25em .25em #e9ebf1;
	box-shadow: 0 .25em .25em #e9ebf1;
	max-height: 360px;
}

.h2mbunit,h2mb span {
	position: absolute;
}

.featherlight:before,img,wm2 {
	vertical-align: middle;
}

.heading1,.wi {
	-moz-osx-font-smoothing: grayscale;
}

.sr-only,svg:not(:root) {
	overflow: hidden;
}

.weather-container {
	display: -webkit-box;
	display: -moz-box;
	display: -o-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	list-style: none;
	width: 960px;
	height: 204px;
	background-color: none;
	margin: 5px auto;
	font-family: arial,sans-serif;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
	overflow: hidden;
}

.weather-item {
	background-color: #fff;
	width: 320px;
	height: 201px;
	margin: 0 5px 5px 0;
	border: 1px solid #e9ebf1;
	border-bottom: 18px solid #f6f8fc;
	-webkit-border-radius: 4px;
	-o-border-radius: 4px;
	-ms-border-radius: 4px;
	border-radius: 4px;
	padding: 6px;
	font-size: 1em;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
	font-family: arial,sans-serif;
}

.weather2-container {
	display: -webkit-box;
	display: -moz-box;
	display: -o-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	width: 960px;
	height: 100px;
	background-color: none;
	margin: 65px auto -20px;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
	font-family: arial,sans-serif;
}

.weather2-item {
	background-color: #fff;
	width: 33.3333%;
	height: 80px;
	margin: 0 5px 5px 0;
	border: 1px solid #e9ebf1;
	text-align: left;
	padding-left: 10px;
	-webkit-border-radius: 4px;
	-o-border-radius: 4px;
	-ms-border-radius: 4px;
	border-radius: 4px;
	float: left;
	text-transform: none;
	font-size: .9em;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
	font-family: arial,sans-serif;
}

.weatherfooter-container {
	display: -webkit-box;
	display: -moz-box;
	display: -o-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	width: 960px;
	margin: 0 auto 5px;
	font-family: "HelveticaNeue","Helvetica Neue Light","Helvetica Neue",Arial,"Lucida Grande",sans-serif;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
	margin-bottom: 2px;
}

#wuforecast:nth-child(4n),#wuforecast:nth-child(5n),#wuforecast:nth-child(6n),#wuforecast:nth-child(7n),#wuforecast:nth-child(8n),#wuforecast:nth-child(9n),.magnitude:nth-child(1n),.magnitude:nth-child(2n) {
	display: none;
}

.weatherfooter-item {
	background-color: #fff;
	width: 100%;
	height: 90px;
	margin: 0 5px 5px 0;
	border: 1px solid #e9ebf1;
	text-align: center;
	-webkit-border-radius: 4px;
	-o-border-radius: 4px;
	-ms-border-radius: 4px;
	border-radius: 4px;
	padding: 5px;
	font-family: "HelveticaNeue","Helvetica Neue Light","Helvetica Neue",Arial,"Lucida Grande",sans-serif;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
}

.barometergaugegrid {
	width: 90%;
	margin: 10px 0 auto;
	text-align: center;
}

h2mb {
	letter-spacing: 0;
	font: 2em arial,sans-serif;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
}

h2mb span {
	color: #F26C4F;
	margin-left: 0;
	margin-top: 5px;
	font: .4em arial,sans-serif;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
}

.h2mbvalue {
	margin-top: 3px;
	padding-right: 0;
	color: #666;
	font-weight: 400;
	font-family: "weathertext",arial,sans-serif;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
}

.h2mbunit {
	padding-right: 25px;
	margin-top: -60px;
	margin-left: 115px;
	color: #999;
	font: .8em arial,sans-serif;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
}

.barometertrend {
	position: relative;
	color: #fff;
	margin: -58px auto auto;
	text-align: center;
	z-index: 1;
	font: 11px Arial,sans-serif;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
}

.barometertrend falling,.barometertrend rising,.barometertrend steady {
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
	font-family: arial,sans-serif;
}

.barometertrend steady {
	color: #4c9f83;
}

.barometertrend rising {
	color: #F26C4F;
}

.barometertrend falling {
	color: #00adbc;
}

.temptrend {
	position: absolute;
	color: #fff;
	margin-top: 32px;
	margin-left: 15%;
	text-align: center;
	z-index: auto;
	font: 700 11px arial,sans-serif;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
}

.indoortrend {
	position: absolute;
	margin-left: 255px;
	top: 0;
	background: none;
	height: 25px;
}

.indoorfeels {
	position: absolute;
	margin-left: 52px;
	top: 55px;
	background: none;
	color: #777;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
	font-family: arial,sans-serif;
	font-size: 10px;
	width: 80px;
	
}

.indoorfeels span {
	color: #ddd;
	
}



h3 {
	font: 4em weathertext,arial,sans-serif;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
}

.featherlight {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	text-align: center;
	white-space: nowrap;
	
	background-color: #3d3d3d;
}

.featherlight:last-of-type {
	background: rgba(0, 0, 0, .5)
}

.featherlight:before {
	content: '';
	display: inline-block;
	height: 100%;
}

.featherlight .featherlight-content {
	position: relative;
	text-align: left;
	vertical-align: top;
	display: inline-block;
	overflow: hidden;
	padding: 0;
	border-bottom: 1px solid transparent;
	width: 700px;
	margin-left: 5%;
	margin-right: 0;
	max-height: 500px;
	background-color: #3d3d3d;
	white-space: normal;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
	-ms-border-radius: 4px;
	border-radius: 4px;
	margin-top:5%;
	padding:0;
}

.featherlight .featherlight-inner {
	display: block
}

.featherlight .featherlight-close-icon {
	position: absolute;
	z-index: 9999;
	top: 5px;
	right: 10px;
	width: 25px;
	
	text-align: center;
	font: 22px / 25px arial,sans-serif;
	background-color: #3d3d3d;
	background-size:cover;
	color: #F26C4F;
	font-weight: 900
}

.featherlight .featherlight-image {
	width: 100%;
}

.featherlight-iframe .featherlight-content {
	border: 1px;
	border: 1px solid #3d3d3d;
	padding-top: 10px;
	padding-bottom: 0px;
	padding-left:10px;
	padding-right:10px;
}

.featherlight iframe {
	border: 1px solid #3d3d3d;
	background-color: #3d3d3d;
	
}

.box.icon-humidity,.box.icon-temp {
	background-repeat: no-repeat;
	background-position: bottom left;
}

/*scrollbar color change*/
::-webkit-scrollbar {
	width: 12px;
}

::-webkit-scrollbar-track {
	background-color: #eaeaea;
	border-left: 1px solid #ccc;
}

::-webkit-scrollbar-thumb {
	background-color: #F26C4F;
}

::-webkit-scrollbar-thumb:hover {
	background-color: #00adbc;
}

::-moz-scrollbar {
	width: 12px;
}

::-moz-scrollbar-track {
	background-color: #eaeaea;
	border-left: 1px solid #ccc;
}

::-moz-scrollbar-thumb {
	background-color: #F26C4F;
}

::-moz-scrollbar-thumb:hover {
	background-color: #00adbc;
}

::-o-scrollbar {
	width: 12px;
}

::-o-scrollbar-track {
	background-color: #eaeaea;
	border-left: 1px solid #ccc;
}

::-o-scrollbar-thumb {
	background-color: #F26C4F;
}

::-o-scrollbar-thumb:hover {
	background-color: #00adbc;
}

::scrollbar {
	width: 12px;
}

::scrollbar-track {
	background-color: #eaeaea;
	border-left: 1px solid #ccc;
}

::scrollbar-thumb {
	background-color: #F26C4F;
}

::scrollbar-thumb:hover {
	background-color: #00adbc;
}

.clock-container {
	position: absolute;
	margin-top: 20px;
	margin-left: 140px;
	width: 150px;
}

.clock-container > ul {
	display: inline-block;
	color: #F26C4F;
	font: 2em weathertext,arial,sans-serif;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
}

.clock-container > ul > li {
	color: #F26C4F;
	list-style: none;
}

.clock-container > ul > li > span {
	position: absolute;
	display: block;
	margin-top: -37px;
	font-family: weathertext,arial,sans-serif;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
	color: #F26C4F;
	margin-right: 40px;
}

.box.icon-temp {
	background-image: url(homepageicons/temp.light.png);
}

.box.icon-humidity {
	background-image: url(homepageicons/humidity.png);
}

.indoortitles {
	color: #F26C4F;
	margin-top: 5px;
	text-align: center;
	font: 1.2em arial,sans-serif;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
}

.chartindoor,.indoorlocation {
	margin-top: 40px;
	text-align: left;
	font: 400 11px arial,sans-serif;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
	position: absolute;
	background: 0 0;
}

.chartindoor {
	margin-left: 250px;
}


.indoorlocation {
	margin-left: 35px;
	width: 300px;
}

.indoorvalues {
	position: absolute;
	margin-top: -15px;
}

.heading1 {
	color: #7c7e80;
	-webkit-font-smoothing: antialiased;
	font: 1em / 15px arial,sans-serif;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
}

.tempcontainer,.tempcontainer1 {
	float: left;
	font-family: weathertext,arial,sans-serif;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
}

supmb {
	font-size: .8em;
	color: #7c7e80;
}

supunit {
	font-size: .7em;
	color: #00adbc;
	font-weight: 400;
	vertical-align: top;
}

verticalline {
	border-right: thin solid #ccc;
	margin-right: 10px;
}

a:visited {
	border: none;
}

.tempcontainer .circleOut,.tempcontainer1 .circleOut {
	border-radius: 50%;
	left: 0;
	bottom: 0;
	right: 0;
	top: -25px;
	color: #fff;
}

.tempcontainer {
	position: relative;
	width: 115px;
	height: 115px;
	margin: 40px 10px 10px 55px;
}

.tempcontainer .circleOut {
	position: absolute;
	width: 120px;
	height: 120px;
	font-size: 38px;
}

.tempcontainer1 {
	position: relative;
	width: 100px;
	height: 100px;
	margin: 20px 10px 10px;
}

.tempcontainer1 .circleOut {
	position: absolute;
	width: 100px;
	height: 100px;
	font-family:weathertext,HelveticaNeue,"Helvetica Neue Light","Helvetica Neue",Arial,sans-serif;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
}

.temptext {
	font-size: 30px;
	color: #fff;
	position: absolute;
	text-align: center;
	padding-top: 0;
	background: 0 0;
	top: 30%;
	left: 0;
	bottom: 0;
	right: 0;
}

.cold,.freezing {
	width: 115px;
	height: 115px;
	border-radius: 50%;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	font-size: 0;
	color: #fff;
	position: absolute;
	text-align: center;
	padding-top: 25%;
}

.freezing {
	background: #00acdf;
	border: 5px solid #e9ebf1;
}

.cold {
	background: #00acdf;
	border: 5px solid #e9ebf1;
}

.colder,.gettingcolder {
	width: 115px;
	height: 115px;
	border-radius: 50%;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	font-size: 0;
	color: #fff;
	position: absolute;
	text-align: center;
	padding-top: 25%;
}

.gettingcolder {
	background: #00acdf;
	border: 5px solid #e9ebf1;
}

.colder {
	background: #60a3bf;
	border: 5px solid #e9ebf1;
}

.cooler,.mild {
	width: 115px;
	height: 115px;
	border-radius: 50%;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	font-size: 0;
	color: #fff;
	position: absolute;
	text-align: center;
	padding-top: 25%;
}

.cooler {
	background: #5ab329;
	border: 5px solid #e9ebf1;
}

.mild {
	background: #83ad2d;
	border: 5px solid #e9ebf1;
}

.gettingcooler,.milder {
	width: 115px;
	height: 115px;
	border-radius: 50%;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	font-size: 0;
	position: absolute;
	text-align: center;
	padding-top: 25%;
	color: #fff;
}

.milder {
	background: #ceb862;
	border: 5px solid #e9ebf1;
}

.gettingcooler {
	background: #ffae00;
	border: 5px solid #e9ebf1;
}

.warm,.warmer {
	width: 115px;
	height: 115px;
	border-radius: 50%;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	font-size: 0;
	position: absolute;
	text-align: center;
	padding-top: 25%;
}

.warm {
	background: #ff9900;
	color: #fff;
	border: 5px solid #e9ebf1;
}

.warmer {
	background: #ff7f00;
	border: 5px solid #e9ebf1;
}

.hot,.hotter {
	width: 115px;
	height: 115px;
	border-radius: 50%;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	color: #fff;
	position: absolute;
	text-align: center;
	padding-top: 25%;
}

.hot {
	background: #ff4f00;
	border: 5px solid #e9ebf1;
}

.hotter {
	background: #ff4545;
	border: 5px solid #e9ebf1;
}

.extremehot, .veryhot {
	width: 115px;
	height: 115px;
	border-radius: 50%;
	font-size: 0;
	color: #fff;
	padding-top: 25%;
	bottom: 0;
	right: 0;
	position: absolute;
	text-align: center;
	left: 0;
	top: 0;
}

.veryhot {
	background: #da7171;
	border: 5px solid #e9ebf1;
}

.extremehot {
	background: rgba(218,113,113,1);
	border: 5px solid #e9ebf1;
}

.temptext1 {
	color: #f26c4f;
	position: absolute;
	text-align: center;
	padding-top: 0;
	background: 0 0;
	margin-top: -29px;
	left: 190px;
	right: 0;
	font-size: 28px;
	font-family:weathertext,HelveticaNeue,"Helvetica Neue Light","Helvetica Neue",Arial,sans-serif;
}

supsolar,suptemp1 {
	color: #7c7e80;
}

.temptext1 span {
	position: absolute;
	color: #7c7e80;
	margin-left: 5px;
	font: 800 11px arial,sans-serif;
}

suptemp,suptemp1 {
	font-size: .7em;
	vertical-align: text-top;
}

suptemp {
	color: #fff;
}

supsolar {
	font-size: .8em;
	vertical-align: text-top;
}

.who {
	position: absolute;
	margin-top: -30px;
	text-align: center;
	margin-left: 5%;
	font: 12px arial,sans-serif;
}

#wuforecast,.magnitude:first-child {
	display: block;
}

uvi {
	font-size: .35em;
	text-align: center;
	margin: 32px auto 0 -30px;
	position: absolute;
}

uviforecast {
	font-size: .35em;
	text-align: center;
	margin: -3px auto 0 0;
	position: absolute;
}

.uv01,.uv03,.uv35,.uv67,.uv810,.uv1112 {
	padding-top: 4.5%;
	font: 2em 'weathertext',arial,sans-serif;
	color: #fff;
	margin-top: -25px;
	border-radius: 50%;
	margin-left: 20px;
	border: 5px solid #e9ebf1;
	width: 90px;
	height: 90px;
	text-align: center;
}

.uv01 {
	background: #4e5a69;
}

.uv01:after {
	content: 'UVINDEX';
	display: block;
	font-size: 10px;
	line-height:10px;
}

.uv03 {
	background: #4fb87b;
}

.uv03:after {
	content: 'UVINDEX';
	display: block;
	font-size: 10px;
	line-height:10px;
}

.uv35 {
	background: #e48f4c;
}

.uv35:after {
	content: 'UVINDEX';
	display: block;
	font-size: 10px;
}

.uv67 {
	background: #ee7259;
}

.uv67:after {
	content: 'UVINDEX';
	display: block;
	font-size: 10px;
	line-height:10px;
}

.uv810 {
	background: #d15e52;
}

.uv810:after {
	content: 'UVINDEX';
	display: block;
	font-size: 10px;
	line-height:10px;
}

.uv1112 {
	background: #945188;
	font: 1.9em  Arial, sans-serif;
}

.uv1112:after {
	content: 'UVINDEX';
	display: block;
	font-size: 10px;
	line-height:10px;
}

.solarcircle {
	position: absolute;
	margin-top: -15px;
	-webkit-border-radius: 100%;
	border-radius: 100%;
	height: 60px;
	width: 60px;
	margin-left: 100px;
	border: 2px solid #e9ebf1;
	padding-top: 18px;
	background: #fff;
	font-family: "Helvetica Neue Light","Helvetica Neue",Arial,"Lucida Grande",sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 12px;
	color: #f26c4f;
}

.solarcircle span {
	color: #999;
	text-align: center;
	font: 400 .7em / 10px arial,sans-serif;
}

.solarcircle1 {
	position: absolute;
	margin-top: -15px;
	-webkit-border-radius: 100%;
	border-radius: 100%;
	height: 60px;
	width: 60px;
	margin-left: 100px;
	border: 2px solid #e9ebf1;
	padding-top: 18px;
	background: #fff;
	font-family: "Helvetica Neue Light","Helvetica Neue",Arial,"Lucida Grande",sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 12px;
	color: #4c9f83;
}

.solarcircle1 span {
	color: #999;
	text-align: center;
	font: 400 .7em / 10px arial,sans-serif;
}

.solarcircle2 {
	position: absolute;
	margin-top: -15px;
	-webkit-border-radius: 100%;
	border-radius: 100%;
	height: 60px;
	width: 60px;
	margin-left: 100px;
	border: 2px solid #e9ebf1;
	padding-top: 18px;
	background: #fff;
	font-family: "Helvetica Neue Light","Helvetica Neue",Arial,"Lucida Grande",sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 12px;
	color: #4c9f83;
}

.solarcircle2 span {
	color: #999;
	text-align: center;
	font: 400 .7em / 10px arial,sans-serif;
}

.solarcircle3 {
	position: absolute;
	margin-top: -15px;
	border-radius: 100%;
	-webkit-border-radius: 100%;
	height: 60px;
	width: 60px;
	margin-left: 100px;
	border: 2px solid #e9ebf1;
	padding-top: 18px;
	background: #fff;
	font-family: "Helvetica Neue Light","Helvetica Neue",Arial,"Lucida Grande",sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 12px;
	color: #00adbc;
}

.solarcircle3 span {
	color: #999;
	text-align: center;
	font: 400 .7em / 10px arial,sans-serif;
}

.solatext {
	color: #7c7e80;
	float: left;
	width: 150px;
	margin-left: 135px;
	margin-top: 0;
	font: 11px  arial,sans-serif;
}

.solatext color {
	color: #F26C4F;
	font-weight: 700;
}

.solatext color1 {
	color: #4c9f83;
	font-weight: 700;
}

.solatext color2 {
	color: #4c9f83;
	font-weight: 700;
}

.solatext color3 {
	color: #00adbc;
	font-weight: 700;
}

/* 29th July 2016 new earthquake css for eq.php */
eq {
	font-size: .35em;
	text-align: center;
	margin: 32px auto 0 -30px;
	position: absolute;
	font-weight:600;
}

.eqtext {
	color: #777;
	float: left;
	width: 150px;
	margin-left: 120px;
	margin-top: -80px;
	font: 10px  arial,sans-serif;
}

.eqtext color{
	font-size: 1em;
	color: #F26C4F;
}

.eqtext depth{
	font-size: 1em;
	color: #00adbc;
	font-weight:normal;
	
}

.eq03,.eq45,.eq5,.eq67,.eq08 {
	padding-top: 15px;
	font: 2em/1.2em arial,sans-serif;
	color: #fff;
	margin-top: -25px;
	border-radius: 50%;
	margin-left: 20px;
	border: 5px solid #e9ebf1;
	width: 90px;
	height: 90px;
	text-align: center;
}

.eq03 {
	background: #4c9f83;
}

.eq03:after {
	content: 'MINOR';
	position:absolute;
	display: block;
	font-size: 9px;
	line-height:9px;
	margin-top:3px;
	margin-left:5px;
	width:70px;
}

.eq45 {
	background: #e48f4c;
}

.eq45:after {
	content: 'MODERATE';
	position:absolute;
	display: block;
	font-size: 9px;
	line-height:9px;
	margin-top:3px;
	margin-left:5px;
	width:70px;
}

.eq5 {
	background: #e48f4c;
}

.eq5:after {
	content: 'MODERATE';
	position:absolute;
	display: block;
	font-size: 9px;
	line-height:9px;
	margin-top:3px;
	margin-left:5px;
	width:70px;
}

.eq67 {
	background: #ee7259;
}

.eq67:after {
	content: 'STRONG';
	position:absolute;
	display: block;
	font-size: 9px;
	line-height:9px;
	margin-top:3px;
	margin-left:5px;
	width:70px;
}

.eq08 {
	background: #d15e52;
}

.eq08:after {
	content: 'MAJOR';
	position:absolute;
	display: block;
	font-size: 9px;
	line-height:9px;
	margin-top:3px;
	margin-left:5px;
	width:70px;
}

/* smaller second eathquake data eq.php */

.eqcircle {
	position: absolute;
	margin-top: -15px;
	-webkit-border-radius: 100%;
	border-radius: 100%;
	height: 60px;
	width: 60px;
	margin-left: 220px;
	border: 2px solid #e9ebf1;
	padding-top: 18px;
	background: #fff;
	font-family: "Helvetica Neue Light","Helvetica Neue",Arial,"Lucida Grande",sans-serif;
	font-size: 22px;
	
	line-height: 12px;
	color: #f26c4f;
}

.eqcircle span {
	color: #999;
	text-align: center;
	font: 400 .3em / 10px arial,sans-serif;
}

.eqcircle1 {
	position: absolute;
	margin-top: -15px;
	-webkit-border-radius: 100%;
	border-radius: 100%;
	height: 60px;
	width: 60px;
	margin-left: 220px;
	border: 2px solid #e9ebf1;
	padding-top: 18px;
	background: #fff;
	font-family: "Helvetica Neue Light","Helvetica Neue",Arial,"Lucida Grande",sans-serif;
	font-size: 22px;
	line-height: 12px;
	color: #4c9f83;
}

.eqcircle1 span {
	color: #999;
	text-align: center;
	font: 400 .3em / 10px arial,sans-serif;
}

.eqcircle2 {
	position: absolute;
	margin-top: -15px;
	-webkit-border-radius: 100%;
	border-radius: 100%;
	height: 60px;
	width: 60px;
	margin-left: 220px;
	border: 2px solid #e9ebf1;
	padding-top: 18px;
	background: #fff;
	font-family: "Helvetica Neue Light","Helvetica Neue",Arial,"Lucida Grande",sans-serif;
	font-size: 22px;
	line-height: 12px;
	color:#e48f4c;
}

.eqcircle2 span {
	color: #999;
	text-align: center;
	font: 400 .3em / 10px arial,sans-serif;
}

.eqcircle3 {
	position: absolute;
	margin-top: -15px;
	border-radius: 100%;
	-webkit-border-radius: 100%;
	height: 60px;
	width: 60px;
	margin-left: 220px;
	border: 2px solid #e9ebf1;
	padding-top: 18px;
	background: #fff;
	font-family: "Helvetica Neue Light","Helvetica Neue",Arial,"Lucida Grande",sans-serif;
	font-size: 22px;
	line-height: 12px;
	color:#ee7259;
}

.eqcircle3 span {
	color: #999;
	text-align: center;
	font: 400 .3em / 10px arial,sans-serif;
}

.eqcircle4 {
	position: absolute;
	margin-top: -15px;
	border-radius: 100%;
	-webkit-border-radius: 100%;
	height: 60px;
	width: 60px;
	margin-left: 220px;
	border: 2px solid #e9ebf1;
	padding-top: 18px;
	background: #fff;
	font-family: "Helvetica Neue Light","Helvetica Neue",Arial,"Lucida Grande",sans-serif;
	font-size: 22px;
	line-height: 12px;
	color: #f26c4f;
}

.eqcircle4 span {
	color: #999;
	text-align: center;
	font: 400 .3em / 10px arial,sans-serif;
}

/* home weather station earthquake notification 4th August 2016 */
.eqnotification {
	position:fixed;
	top:70px;
	right:70px;
	max-width:400px;
	width:100%;
	border-radius:4px;
	padding:15px;
	margin:10px auto;
	z-index:99999
}

.eqnotification .eqnotification-close {
	position:absolute;top:10px;right:10px;font-size:18px;border-radius:50px;width:28px;height:28px;line-height:22px;text-align:center;color:#fff
}

.eqnotification .eqnotification-close :after {
	content:"!";color:#fff
}

.eqnotification .eqnotification-title,
.eqnotification .eqnotification-message {
	color:#fff;font-family:'Helvetica',arial,sans-serif
}

.eqnotification .eqnotification-title {
	position:relative;
	margin-top:-10px;
	font-size:18px;
	font-weight:600
}

.eqnotification .eqnotification-message {
	position:relative;margin-top:-5px;font-weight:normal;font-size:13px;font-weight:600;line-height:15px;width:300px
}

.eqnotification .eqnotification-distance {
	position:relative;
	margin-top:-5px;
	font-weight:normal;
	font-size:13px;
	font-weight:600;
	line-height:15px;
	width:300px;
	color:#fff
}

.eqnotification .eqnotification-credit {
	position:absolute;font-weight:normal;font-size:10px;font-weight:600;line-height:20px;color:#fff;padding-left:5px;margin-top:-10px;float:right
}

.eqnotification a {
	font-weight:normal;font-size:10px;font-weight:normal;line-height:20px;color:#fff
}

.eqpopup {
	background:#f26c4f
}

.eqpopup .eqnotification-close {
	border:1px solid #fff;color:#fff
}

eqnoti {
	position:absolute;margin-top:15px;margin-left:5px;font-size:14px;font-weight:normal;color:#878a8d;font-family:arial
}

eqnoti color {
	font-size:1em;font-weight:600;color:#f26c4f;font-family:arial
}

eqnoti magn {
	font-size:0.8em;font-weight:normal;color:#bbb;font-family:arial
}

magalert {
	position:absolute;margin-top:5px;margin-left:-15px;font-size:20px;font-weight:600;color:#f26c4f;font-family:arial
}

eqalert {
	position:absolute;margin-left:5px;margin-top:17px;font-size:9px;font-weight:600;font-family:arial;width:245px;line-height:10px
}

eqalert a{
	color:#777;
}


eqalert1 {
	position:absolute;margin-left:5px;margin-top:0px;font-size:9px;font-weight:600;font-family:arial;width:245px;line-height:10px
}


eqtime {
	position:absolute;
	margin-top:10px;
	font-size:10px;
	margin-left:200px;
	font-weight:400;
	font-family:arial;
}

eqspan{
color:#f26c4f;
font-size:9px;
}

eqspan1{
color:#00adbc;
font-size:9px;
}

dist {
	position:absolute;
	font-size:10px;
	font-weight:600;
	color:#f26c4f;
	font-family:arial;
	margin-left:5px;
	line-height:11px;
	margin-top:5px;
}

dist place {
	font-weight:normal;
	color:#777;
	font-size:10px;
}

.eqtext1 {
	color: #7c7e80;
	float: left;
	width: 100px;
	margin-left: 100px;
	margin-top: -5px;
	font: 10px  arial,sans-serif;
}

.eqtext1 color {
	color: #F26C4F;
	font-weight: normal;
}

.eqtext1 color1 {
	color: #4c9f83;
	font-weight: normal;
}

.eqtext1 color2 {
	color: #4c9f83;
	font-weight: normal;
}

.eqtext1 colortext {
	color: #4c9f83;
	font-weight: normal;
	font-size:10px;
}

.eqtext1 colordepth {
	color: #777;
	font-weight: normal;
	font-size:10px;
}

.eqtext1 color3 {
	color: #00adbc;
	font-weight: normal;
}


.uvsup {
	font-size: 14px;
	color: #F26C4F;
}

.uvtext {
	color: #7c7e80;
	float: left;
	width: 150px;
	margin-left: 120px;
	margin-top: -80px;
	font: 12px arial,sans-serif;
}

.uvtext color,.uvtext color2 {
	font-size: 1em;
	color: #F26C4F;
}

.uvfooter {
	position: relative;
	margin-top: 110px;
	text-align: center;
}

.baromcircle,.heatcircle {
	position: absolute;
	background: 0 0;
}

.heatcircle {
	padding: 2px;
	float: right;
	margin-top: 0;
	margin-left: 150px;
}

.heatcircle-content {
	color: #7c7e80;
	float: left;
	margin-top: 0;
	padding-top: 7%;
	text-align: center;
	width: 100%;
	font: 400 13px / 1.2 arial,sans-serif;
}

.baromcircle-content {
	float: left;
	line-height: 1;
	margin-top: -.9em;
	padding-top: 50%;
	text-align: center;
	width: 100%;
	color: #76797c;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
	font-family: arial,sans-serif;
	font-weight: 900;
}

supraindrop,supraindropw {
	z-index: 9999999;
	font: .4em weathertext,arial,sans-serif;
}

.baromcircle {
	border-radius: 50%;
	height: 70px;
	width: 70px;
	padding: 2px;
	float: right;
	border-top: .1rem solid rgba(76,59,131,.1);
	border-right: .1rem solid rgba(76,59,131,.1);
	border-left: .1rem solid rgba(68,59,155,.1);
	border-bottom: .1rem solid rgba(68,145,155,.1);
	-webkit-background-size: cover;
	-ms-background-size: cover;
	background-size: cover;
	margin-top: -32px;
	margin-left: 212px;
}

supraindrop {
	color: #00adbc;
}

supraindropw {
	color: #f8f8f8;
}

.rainfalltext color {
	font-size: 1em;
	color: #387791;
}

suprain,suprain1,suprain2 {
	font-size: .4em;
	font-weight: 800;
}

suprain {
	color: #00adbc;
}

suprain1 {
	color: #7c7e80;
}

suprain2 {
	color: #fff;
}

.chartforecast {
	margin-left: 0;
	font-size: 0.67em;
	font-family:arial,sans-serif;
	font-weight:600;
	position: absolute;
	color: #777;
	margin-top: 174px;
	width: 300px;
	padding-top: 6px;
	padding-left: 10px;
	text-align: left;
}

.chartforecast :hover{
	color: #f26c4f;
}

.chartforecast a{
	color: #828181;
}

.humidity,.windgustcircle,.windgustheadingcircle {
	padding-top: 35px;
	color: #7c7e80;
}

.h2uv,.max,.sun {
	text-align: center;
}

a {
	font-family: 'weathertext',arial,sans-serif;
	color: #777;
	font-size: 1em;
}

.humidity {
	font: 400 4em arial,sans-serif;
}

.windgustheading {
	color: #7c7e80;
	font: 1em weathertext,arial,sans-serif;
}

.windgustcircle {
	position: absolute;
	margin-top: 35px;
	margin-left: -136px;
	font: 20px arial,sans-serif;
}

.windgustheadingcircle {
	position: absolute;
	margin-top: 14px;
	margin-left: -125px;
	font: 12px arial,sans-serif;
}

.iconsize {
	font-size: 0;
	width: 50%;
	height: 50%;
	margin-left: 10px;
}

/* start the homeweatherstation moon & sun info */
.mooninfo {
	margin-left: 120px;
	font: 1em / 1.2em arial,sans-serif;
	margin-top: 100px;
	padding: 0;
	padding-bottom: 10px;
	padding-top: 100px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid rgba(0,0,0,0.1);
	border-top: 1px solid rgba(0,0,0,0.1);
	width: auto;
	background: none;
	height: 270px;
}

.line {
	margin-top: 5px;
	border-bottom: 1px solid rgba(0,0,0,0.1);
	margin-bottom: 5px;
}

.mooninfo img {
	margin-bottom: 3px;
}

.mooncircle {
	position: absolute;
	color:#ccc;
	top: 50px;
	-webkit-border-radius: 100%;
	border-radius: 100%;
	height: 160px;
	width: 160px;
	margin-left: 165px;
	border: 10px solid #777;
	padding-top: 10px;
	font-size: 26px;
	 background-color: #3d3d3d;
}

.mooncircle span {
	display: inline;
	color:#ccc;
	text-align: center;
	font-family: 'weathertext',arial,sans-serif;
	font: 200 2.1em weathertext,arial,sans-serif;
	display: block;
	margin-left: 0;
}

.mooncircle moonhead {
	position: absolute;
	color: #f26c4f;
	text-align: center;
	font-size: 18px;
	font-family: "HelveticaNeue","Helvetica Neue Light","Helvetica Neue",Arial,"Lucida Grande",sans-serif;
	margin-top: 20px;
	margin-left: -45px;
}

.solar {
	padding-left: 25px;
	font: 2.8em weathertext,Arial,sans-serif;
}

.h2uv {
	margin-top: 35px;
	position: relative;
	padding: 40px;
	border-radius: 100%;
	width: 180px;
	height: 180px;
	background: 0 0;
	background: linear-gradient(180deg,#068895 25%,#51b1a5 45%);
	font: 4em arial,sans-serif;
}

.luminance,.sun,.windir {
	color: #7c7e80;
}

.sun {
	margin-left: 85px;
	font: .9em / 1.3em arial,sans-serif;
	margin-top: 10px;
}

.sun img {
	margin-bottom: 3px;
}

.luminance {
	postion:absolute;
	margin-top: 95px;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
	font-family: arial,sans-serif;
	font-size: 11px;
	line-height: 11px;
	
}

.luminance:before {
	content: "Luminance";
	font-size: 11px;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
	font-family: arial,sans-serif;
	color: #f26c4f;
	line-height: 12px;
	margin-left: 5px;
}

.moonrise {
	padding-top: 5px;
	margin-top: -5px;
	margin-left: -0;
	font-size: 11px;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
	font-family: arial,sans-serif;
}

.moonset {
	padding-top: 5px;
	margin-top: -32px;
	margin-left: 80px;
}

.fullmoon {
	padding-top: 5px;
	margin-top: -6px;
	margin-left: 0px;
	font-size:11px;
}


.luminance1 {
	padding-top: 0;
	margin-top: 0;
	font: .9em arial,sans-serif;
	width: 300px;
}

.luminance1:before {
	content: "Phase";
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
	font-family: arial,sans-serif;
	color: #00adbc;
}

.moon {
	color: #7c7e80;
	font:normal .9em / .95em arial,sans-serif;
}

.moon:before {
	content: "";
	color: #00adbc;
	font: .9em arial,sans-serif;
}

.moon1 {
	color: #7c7e80;
	font:normal .9em / .95em arial,sans-serif;
}

.moon1:before {
	content: "";
	color: #00adbc;
	font: .9em arial,sans-serif;
}

in,mb {
	position: absolute;
	background: 0 0;
	font: .65em arial,sans-serif;
}

.moon img {
	width: 20px;
	height: 20px;
}

/*homeweatherstation daylight canvas css */
.daylight {
	position: absolute;
	color: #fff;
	font-family: arial,sans-serif;
	text-align: center;
	z-index: 999;
	top: 50px;
	margin-left: 360px;
	border: 0;
}

canvas {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 75%;
	background: #777;
	background: -moz-linear-gradient(45deg,#777,#444);
	background: -webkit-linear-gradient(45degt,#777,#444);
	background: -o-linear-gradient(45deg,#777,#444);
	background: linear-gradient(45deg,#777,#444);
	z-index: -1;
	border: 0;
	width: 160px;
	font-family: "weathertext",Arial,"Lucida Grande",sans-serif;
	-ms-transform: scale(.9999);
	-moz-transform: scale(.9999);
	-webkit-transform: scale(.9999);
	-o-transform: scale(.9999);
	transform: scale(.9999);
}

daylighthours:before {
	position: absolute;
	content: "Today Estimated";
	font-size: 12px;
	margin-top: -20px;
	display: inline;
	margin-left: 2px;
	font-family: "HelveticaNeue","Helvetica Neue Light","Helvetica Neue",Arial,"Lucida Grande",sans-serif;
}

daylighthours {
	color: #f8f8f8;
	display: block;
	line-height: 160px;
	text-align: center;
	width: 140px;
	font-size: 26px;
	font-weight: 100;
	margin-left: 5px;
	z-index: auto;
	font-family: "weathertext","Helvetica Neue Light",Arial,"Lucida Grande",sans-serif;
}

daylighthours .hrs{
	color: #f8f8f8;
	font-size: 14px;
}

daylighthours:after {
	position: absolute;
	content: "of Daylight";
	font-size: 12px;
	margin-top: 20px;
	display: inline;
	margin-left: -60px;
	font-family: "HelveticaNeue","Helvetica Neue Light",Arial,"Lucida Grande",sans-serif;
}

/*start the sun hours */
.sunpos {
	position: relative;
	margin-top: -21px;
}

.sunpos > div {
	margin-left: 125px;
}

.sunpos-times {
	margin-top: 40px;
	width: 230px;
	height: 60px;
	border-bottom: 1rem thin #ccc;
	overflow-y: hidden;
}

.sunpos-times .sunpos-path {
	margin-left: 25px;
	width: 190px;
	height: 190px;
	overflow: hidden;
	border: 1px dashed #aaa;
	border-radius: 50%;
}

.sunpos-times .sunpos-symbol-path {
	position: absolute;
	color: #f26c4f;
	text-shadow: 0 0 0 #000;
	height: 15px;
	-webkit-transition: -webkit-transform 2s linear;
	-moz-transition: -webkit-transform 2s linear;
	-o-transition: -webkit-transform 2s linear;
	-ms-transition: -webkit-transform 2s linear;
	-webkit-transform-origin: 50% 100%;
	-moz-transform-origin: 50% 100%;
	-o-transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	-webkit-transform: rotateZ(-75deg);
	-moz-transform: rotateZ(-75deg);
	-o-transform: rotateZ(-75deg);
	-ms-transform: rotateZ(-75deg);
	transform-origin: 50% 100%;
	transform: rotateZ(-75deg);
	left: 70px;
	bottom: 0;
}

.sunpos-times .sunpos-symbol-path .symbol {
	position: relative;
	font-size: 16px;
	top: -8px;
}

.sunpos-times .sunpos-animation {
	width: 0;
	height: 160px;
	background-color: #f26c4f;
	-webkit-transition: width 2s linear;
	-moz-transition: width 2s linear;
	-o-transition: width 2s linear;
	-ms-transition: width 2s linear;
	transition: width 2s linear;
	border-right: 1px dashed #ccc;
}

.symbol {
	font-size: 10px;
}

/*end moon info */
mb {
	color: #00adbc;
	padding-top: 17px;
	margin-left: -60px;
	-webkit-background-size: cover;
	-ms-background-size: cover;
	background-size: cover;
}

in {
	color: #F26C4F;
	padding-top: 14px;
	margin-left: -35px;
	-webkit-background-size: cover;
	-ms-background-size: cover;
	background-size: cover;
}

wm2 {
	color: #848688;
	font: .4em arial,sans-serif;
}

.lo,.max {
	color: #fff;
	font-weight: 700;
}

.max {
	position: relative;
	margin-top: 0;
	margin-left: 3px;
	z-index: auto;
	font:.83em arial,sans-serif;
	font-weight:bold;
}

.lo {
	position: absolute;
	margin-top: 65px;
	margin-left: 39px;
	z-index: auto;
	font: .9em arial,sans-serif;
	font-weight: 700;
}

.feels,.feels1 {
	position: relative;
	color: #fff;
	margin-left: auto;
	text-align: center;
	z-index: auto;
}

.feels {
	margin-top: 45px;
	font: 12px arial,sans-serif;
	font-weight:bold;
}

.feels1 {
	margin-top: 30px;
	font: .7em arial,sans-serif;
	font-weight: 700;
}

.windchillcircle,.windgustmphcircle,.windmphcircle {
	position: absolute;
	border-radius: 50%;
	height: 65px;
	border-top: .1rem solid rgba(76,59,131,.1);
	border-right: .1rem solid rgba(76,59,131,.1);
	border-left: .1rem solid rgba(68,59,155,.1);
	border-bottom: .1rem solid rgba(68,145,155,.1);
}

.windchillcircle {
	background: 0 0;
	width: 65px;
	padding: 2px;
	float: right;
	-webkit-background-size: cover;
	-ms-background-size: cover;
	background-size: cover;
	margin-top: -56px;
	margin-left: 212px;
}

.windchillcircle-content {
	float: left;
	line-height: 1;
	margin-top: -.9em;
	padding-top: 40%;
	text-align: center;
	width: 100%;
	color: #676e73;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
	font-family: arial,sans-serif;
	-webkit-font-smoothing: antialiased;
}

.windgustmphcircle-content,.windmphcircle-content {
	float: left;
	line-height: 1;
	color: #7c7e80;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
	font-family: arial,sans-serif;
	text-align: center;
}

.windmphcircle {
	background: 0 0;
	width: 65px;
	padding: 2px;
	float: left;
	-webkit-background-size: cover;
	-ms-background-size: cover;
	background-size: cover;
	margin-top: -56px;
	margin-left: 12px;
}

.windmphcircle-content {
	margin-top: -.9em;
	padding-top: 40%;
	width: 100%;
}

.windgustmphcircle {
	background: 0 0;
	width: 65px;
	padding: 2px;
	float: left;
	-webkit-background-size: cover;
	-ms-background-size: cover;
	background-size: cover;
	margin-top: -56px;
	margin-left: 212px;
}

#weekday,#wuforecast,#wuforecasts {
	background:#f6f8fc;
}

.windgustmphcircle-content {
	margin-top: -.9em;
	padding-top: 40%;
	width: 100%;
}

.whitespace {
	height: 45px;
}

sup {
	color: #828487;
}

.sup {
	font-size: .3em;
	color: #913636;
}

.suptemp {
	font-size: 12px;
	color: #fff;
	position: relative;
	margin-bottom: 50px;
	margin-right: 150px;
}

#weekday,.a {
	color: #7c7e80;
}

.iconh3,.outlook,.updatedtime {
	position: absolute;
}

.centered {
	float: none;
	margin-left: auto;
	margin-right: auto;
}

#wuforecasts {
	max-width: 420px;
	margin-left: 1px;
	margin-right: 0;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
	font-family: arial,sans-serif;
}

#wuforecast {
	float: left;
	width: 26%;
	margin: -10px 0 0 15px;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
	font-family: arial,sans-serif;
}

#wuforecast:last-child,#wuforecast:nth-child(1n),#wuforecast:nth-child(2n),#wuforecast:nth-child(3n) {
	margin-right: 0;
	border: 1px solid #f6f8fc;
	padding: 0;
	border-radius: 4px;
	background: #fff;
	background: -moz-linear-gradient(top,rgba(255,255,255,1) 0,rgba(255,255,255,1) 43%,rgba(250,250,250,1) 43%,rgba(255,255,255,1) 100%);
	background: -webkit-gradient(left top,left bottom,color-stop(0,rgba(255,255,255,1)),color-stop(43%,rgba(255,255,255,1)),color-stop(43%,rgba(250,250,250,1)),color-stop(100%,rgba(255,255,255,1)));
	background: -webkit-linear-gradient(top,rgba(255,255,255,1) 0,rgba(255,255,255,1) 43%,rgba(250,250,250,1) 43%,rgba(255,255,255,1) 100%);
	background: -o-linear-gradient(top,rgba(255,255,255,1) 0,rgba(255,255,255,1) 43%,rgba(250,250,250,1) 43%,rgba(255,255,255,1) 100%);
	background: -ms-linear-gradient(top,rgba(255,255,255,1) 0,rgba(255,255,255,1) 43%,rgba(250,250,250,1) 43%,rgba(255,255,255,1) 100%);
	background: linear-gradient(to bottom,rgba(255,255,255,1) 0,rgba(255,255,255,1) 43%,rgba(250,250,250,1) 43%,rgba(255,255,255,1) 100%);
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
	font-family: arial,sans-serif;
	height: 135px;
	line-height: 15px;
}

#weekday {
	margin: 0;
	text-align: center;
	padding: 3px;
	font:.8em arial,sans-serif;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;	
	color:#555;
}

#temp,#temp2 {
	font: 1em arial,sans-serif;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;	
	font-weight: 700;
}

#temp {
	color: #F26C4F;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;	
	font-weight: 700;
}

#temp2 {
	color: #00adbc;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;	
	font-weight: 700;
}

.temptrend {
	color:#fff;
}

.temptrendrising {
}

.temptrendfalling {
}

.kmh,.rain {
	padding-top: 5px;
	font: .9em arial,sans-serif;
	font-weight: 700;
}

#icon {
	width: 55px;
	height: 43px;
	float: left;
	padding: 5px;
	margin: 0 10px;
}

.wi-rotate-35 {
	-webkit-transform: rotate(35deg);
	-ms-transform: rotate(35deg);
	transform: rotate(35deg);
}

.wi-rotate-55 {
	-webkit-transform: rotate(55deg);
	-ms-transform: rotate(55deg);
	transform: rotate(55deg);
}

.wi-snow-wind:before {
	content: "\f064";
}

.wi-snow:before {
	content: "\f01b";
}

.wi-smog:before {
	content: "\f074";
}

.wi-smoke:before {
	content: "\f062";
}

.wi-lightning:before {
	content: "\f016";
}

.wi-dust:before {
	content: "\f063";
}

.wi-snowflake-cold:before {
	content: "\f076";
	color: #00adbc;
}

.wi-snowflake1-cold:before {
	content: "\f076";
	color: #f8f8f8;
	padding: 10px;
}

.wi-windy:before {
	content: "\f021";
}

.wi-strong-wind:before {
	content: "\f050";
}

.wi-sandstorm:before {
	content: "\f082";
}

.wi-fire:before {
	content: "\f0c7";
}

.wi-flood:before {
	content: "\f07c";
}

.outlook {
	background: #3d3d3d;
	border-radius: 4px;
	padding: 15px;
	border:1px solid #777;
	width: 600px;
	margin-left: 4%;
}

.outlook #dayicon,.outlook #nticon,.outlook #tomoicon {
	background-size: 60px;
	z-index: 1;
}

.outlook .with-badge:before {
	content: "";
	border: 20px solid #00adbc;
	position: absolute;
	top: 0;
	left: 0;
	border-bottom-color: transparent;
	border-right-color: transparent;
}

.outlooktitle {
	color: #ccc;
	margin-top: 5px;
	text-align: center;
	font: 1em arial,sans-serif;
}

.outlooktitle span {
	color: #ccc;
	font-family: arial,sans-serif; 
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;	
}

#day,#night,#tomo,#dayaftertomo {
	color: #ccc;
	padding: 5px;	
	border-bottom: 0px solid #e9ebf1;
	text-align: left;
}

#rainday,#rainnight,#raintomo,#dayafterraintomo {
	color: #00adbc;
	padding: 5px;	
	border-bottom: 1px solid #777;
	text-align: right;
	margin-top:-10px;
	font-size:0.9em;
}

#day {
	font: 0.9em arial,sans-serif;
}

#day span,#tomo span {
	color: #00adbc;
	font-family: arial,sans-serif; 
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;	
	text-align: left;
}
#dayaftertomo span {
	color: #f26c4f;
	font-family: arial,sans-serif; 
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;	
	text-align: left;
}

#night,#tomo,#dayaftertomo {
	margin-bottom: auto;
	width: 90%;
	font: 0.9em arial,sans-serif;
}

#night span {
	color: #ff6861;
	font-family: arial,sans-serif; 
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;	
	text-align: left;
}

#chartdiv {
	width: 100%;
	height: 500px;
}

.iconh3 {
	color: #999;
	margin-top:20px;
	margin-left:125px;
	margin-bottom: 12px;
	font-family: Arial;
	font-size:12px;
	line-height:12px;
	text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
}

.iconh3 span{
	color: #f26c4f;
	font-family: Arial;
	font-size:12px;
}

.iconcurrent img {
	width: 128px;
	height:101px;
	margin-top: 0px;
	float: left;
	margin-left: 10px;
	font-size:0px;
	margin-bottom:-10px;
}

.wi {
	display: inline-block;
	font-family: weathericons;
	font-style: normal;
	font-weight: 400;
	line-height: 1;
}

.wi-fw {
	text-align: center;
	width: 1.4em;
}

.wi-rotate-45 {
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.wi-rotate-90 {
	-webkit-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
}

.wi-rotate-180 {
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
}

.wi-rotate-270 {
	-webkit-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	transform: rotate(270deg);
}

.wi-flip-horizontal {
	-webkit-transform: scale(-1,1);
	-ms-transform: scale(-1,1);
	transform: scale(-1,1);
}

.wi-flip-vertical {
	-webkit-transform: scale(1,-1);
	-ms-transform: scale(1,-1);
	transform: scale(1,-1);
}

.wi-raindrops:before {
	content: "\f04e";
	color: #00adbc;
}

.wi-raindrop:before {
	content: "\f078";
	color: #00adbc;
}

.wi-na:before {
	content: "\f07b";
}

.wi-train:before {
	content: "\f0cb";
}

.wi-moon-0:before {
	content: "\f0eb"; /* New moon */
}

.wi-moon-1:before {
	content: "\f0d0"; /* Waxing crescent */
}

.wi-moon-2:before {
	content: "\f0d1";
}

.wi-moon-3:before {
	content: "\f0d2";
}

.wi-moon-4:before {
	content: "\f0d3";
}

.wi-moon-5:before {
	content: "\f0d4";
}

.wi-moon-6:before {
	content: "\f0d5";
}

.wi-moon-7:before {
	content: "\f0d6"; /* First quarter */
}

.wi-moon-8:before {
	content: "\f0d7";
}

.wi-moon-9:before {
	content: "\f0d8";
}

.wi-moon-10:before {
	content: "\f0d9";
}

.wi-moon-11:before {
	content: "\f0da";
}

.wi-moon-12:before {
	content: "\f0db";
}

.wi-moon-13:before {
	content: "\f0dc";
}

.wi-moon-14:before {
	content: "\f0dd"; /* Full moon */
}

.wi-moon-15:before {
	content: "\f0de";
}

.wi-moon-16:before {
	content: "\f0df";
}

.wi-moon-17:before {
	content: "\f0e0";
}

.wi-moon-18:before {
	content: "\f0e1";
}

.wi-moon-19:before {
	content: "\f0e2";
}

.wi-moon-20:before {
	content: "\f0e3";
}

.wi-moon-21:before {
	content: "\f0e4"; /* Third quarter */
}

.wi-moon-22:before {
	content: "\f0e5";
}

.wi-moon-23:before {
	content: "\f0e6";
}

.wi-moon-24:before {
	content: "\f0e7";
}

.wi-moon-25:before {
	content: "\f0e8";
}

.wi-moon-26:before {
	content: "\f0e9";
}

.wi-moon-27:before {
	content: "\f0ea"; /* Waning crescent */
}

.wi-moon-alt-0:before {
	content: "\f095"; /* New moon */
}

.wi-moon-alt-1:before {
	content: "\f096"; /* Waxing crescent */
}

.wi-moon-alt-2:before {
	content: "\f097";
}

.wi-moon-alt-3:before {
	content: "\f098";
}

.wi-moon-alt-4:before {
	content: "\f099";
}

.wi-moon-alt-5:before {
	content: "\f09a";
}

.wi-moon-alt-6:before {
	content: "\f09b";
}

.wi-moon-alt-7:before {
	content: "\f09c";
}

.wi-moon-alt-8:before {
	content: "\f09d"; /* First quarter */
}

.wi-moon-alt-9:before {
	content: "\f09e";
}

.wi-moon-alt-10:before {
	content: "\f09f";
}

.wi-moon-alt-11:before {
	content: "\f0a0";
}

.wi-moon-alt-12:before {
	content: "\f0a1";
}

.wi-moon-alt-13:before {
	content: "\f0a2";
}

.wi-moon-alt-14:before {
	content: "\f0a3"; /* Full moon */
}

.wi-moon-alt-15:before {
	content: "\f0a4";
}

.wi-moon-alt-16:before {
	content: "\f0a5";
}

.wi-moon-alt-17:before {
	content: "\f0a6";
}

.wi-moon-alt-18:before {
	content: "\f0a7";
}

.wi-moon-alt-19:before {
	content: "\f0a8";
}

.wi-moon-alt-20:before {
	content: "\f0a9";
}

.wi-moon-alt-21:before {
	content: "\f0aa"; /* Third quarter */
}

.wi-moon-alt-22:before {
	content: "\f0ab";
}

.wi-moon-alt-23:before {
	content: "\f0ac";
}

.wi-moon-alt-24:before {
	content: "\f0ad";
}

.wi-moon-alt-25:before {
	content: "\f0ae";
}

.wi-moon-alt-26:before {
	content: "\f0af";
}

.wi-moon-alt-27:before {
	content: "\f0b0"; /* Waning crescent */
}

.wi-horizon-alt:before {
	content: "\f046";
}

.wi-horizon:before {
	content: "\f047";
}

.wi-sunrise:before,.wi-sunset:before {
	content: "\f0a3";
}

.wi-sunrise:before {
	color: #ff9350;
}

.wi-sunset:before {
	color: #F26C4F;
}

.wi-moonrise:before {
	content: "\f0c9";
	color: #ff9350;
}

.wi-moonset:before {
	content: "\f0ca";
	color: #d16a54;
}

.wi-earthquake:before {
	content: "\f0c6";
	color: #fff;
	font-size: 1.8em;
}

.wi-earthquake1:before {
	content: "\f0c6";
	color: #aaa;
	font-size: 1em;
}

.wi-wind:before {
	content: "\f0b1";
	font-size: 1.2em;
	vertical-align: text-bottom;
}

.wi-wind.towards-45-deg {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

.wi-wind.towards-90-deg {
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
}

.wi-wind.towards-135-deg {
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	-o-transform: rotate(135deg);
	transform: rotate(135deg);
}

.wi-meteor:before {
	content: "\f071";
	color:#f26c4f;
}

.updatedtime {
	margin-top: -15px;
	width: 75px;
	text-align: right;
	margin-left: 220px;
	color: #F26C4F;
	font:bold 10px  arial,sans-serif;
	line-height:10px;
}

.updatedtime span {
	margin-bottom: 0;
	color: #777;
	font-weight: 400;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
	font-family: arial,sans-serif;
}

.updatedtimecurrent {
	margin-top: -15px;
	width: 75px;
	text-align: right;
	margin-left: 220px;
	color: #F26C4F;
	font: 700 10px  arial,sans-serif;
	line-height:10px;
}

.updatedtimecurrent span {
	margin-bottom: 0;
	color: #777;
	font-weight: normal;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
	font-family: arial,sans-serif;
}

.updatedtimealert {
	margin-top: 5px;
	width: 75px;
	text-align: right;
	margin-left: 215px;
	color: #F26C4F;
	font: 700 10px  arial,sans-serif;
	line-height:10px;
}

.updatedtimealert span {
	margin-bottom: 0;
	color: #777;
	font-weight: 400;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
	font-family: arial,sans-serif;
}

.updatedtimedir {
	margin-top: -25px;
	width: 75px;
	text-align: right;
	margin-left: 135px;
	position: absolute;
	color: #F26C4F;
	font: 700 10px  arial,sans-serif;
	line-height:10px;
}

.average,.averageuv {
	margin-top: 140px;
	width: 100px;
	text-align: right;
	position: absolute;
	font: 700 10px  arial,sans-serif;
}

.averagetemp {
	margin-top: -5px;
	width: 100px;
	text-align: center;
	position: absolute;
	margin-left: -2px;
	color: #F26C4F;
	font:bold 10px  arial,sans-serif;
}

.averagetemp span {
	color: #00adbc;
	font: normal 10px  arial,sans-serif;
	text-align: center;
	margin-left: -5px;
}

.averagetemp span2 {
	color: #7c7e80;
}

.updatedtimedir span {
	margin-bottom: 0;
	color: #777;
	font-weight: 400;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
	font-family: arial,sans-serif;
}

.average {
	margin-left: 180px;
	color: #F26C4F;
	font:bold 10px  arial,sans-serif;
}

.average span {
	margin-bottom: 0;
	color: #00adbc;
	font-weight: 400;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
	font-family: arial,sans-serif;
}

.windrunarea {
position:absolute;
margin-left:-70px;
width:100px;
color:#F26C4F;
font:bold 11px  arial,sans-serif;
text-align:left;

}

.windrun {
width:120px;
color:#F26C4F;
font:bold 11px  arial,sans-serif;
margin-top:130px;
text-align:left;
margin-left:0px;

}

.windrun span{
color:#777;
font:normal 11px  arial,sans-serif;
}



.averageuv {
	margin-left: -45px;
	color: #F26C4F;
	font:bold 10px  arial,sans-serif;
}

.averageuv span {
	margin-bottom: 0;
	color: #00adbc;
	font-weight: 400;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
	font-family: arial,sans-serif;
}

.averageindoor {
	margin-left: 255px;
	color: #777;
	font: normal 10px  arial,sans-serif;
	position: absolute;
	margin-top: 43px;
	width: 85px;
}

.averageindoor span {
	margin-bottom: 0;
	color: #00adbc;
	font-weight: 400;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
	font-family: arial,sans-serif;
}
.barometertrend1 {
margin-left:10px;
margin-top:130px;
width:100px;
text-align:left;
position:absolute;
color:#F26C4F;
font:bold 11px  arial,sans-serif;
line-height:9px;
}


.barometertrend1 hourtrend {
font:normal 9px  arial,sans-serif;
color:#777;
line-height:9px;
text-align:left;
margin-left:15px;
}
.indoorunit {
	margin-left: 230px;
	margin-top: 45px;
	text-align: left;
	font:10px arial,sans-serif;
	position: absolute;
	background: 0 0;
}


.humidityindoor {
	margin-left: 185px;
	color: #F26C4F;
	font:normal 26px  weathertext,arial,sans-serif;
	position: absolute;
	margin-top: 25px;
	width: 185px;
}

.humidityindoor span {
	margin-bottom: 0;
	font-size:0.4em;
	color: #7c7e80;
	font-weight: 400;
	font-family: weathertext,arial,sans-serif;
}


.temperatureindoor {
	margin-left: 50px;
	color: #F26C4F;
	font:normal 26px  weathertext,arial,sans-serif;
	position: absolute;
	margin-top: 25px;
	width: 185px;
}

.temperatureindoor span {
	margin-bottom: 0;
	font-size:0.4em;
	color: #7c7e80;
	font-weight: 400;
	font-family: weathertext,arial,sans-serif;
}

.averagedir {
	margin-left: 105px;
	margin-top: 130px;
	width: 100px;
	text-align: right;
	position: absolute;
	color: #F26C4F;
	font:400 10px  arial,sans-serif;
}

.windalarm,.windcondition {
	width: 100px;
	text-align: left;
}

.averagedir span {
	margin-bottom: 0;
	color: #00adbc;
	font-weight: 400;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
	font-family: arial,sans-serif;
}

.windicons {
	font-size: 0;
	position: absolute;
	margin-top: 75px;
	margin-left: 135px;
	background: #fff;
	border: 3px solid #e9ebf1;
	border-radius: 75%;
	padding: 3px;
}

.windicons img{
	width:20px;
}

.windcondition {
	margin-top: -25px;
	margin-left: 65px;
	position: absolute;
	color: #7c7e80;
	font: 400 9px  arial,sans-serif;
}

.windcondition span {
	margin-bottom: 0;
	color: #7c7e80;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
	font-family: arial,sans-serif;
}

.windalarm {
	margin-top: -26px;
	margin-left: 185px;
	position: absolute;
	color: #7c7e80;
	font: 400 9px  arial,sans-serif;
}

.gustspeedtrend,.windspeedtrend {
	margin-top: 25px;
	width: 100px;
	text-align: right;
	position: absolute;
}

.avgspeedwind,.avgspeedgust{
margin-top:10px;
width:120px;
text-align:left;
position:absolute;
}

.windalarm span {
	margin-bottom: 0;
	color: #7c7e80;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
	font-family: arial,sans-serif;
}

.gustspeedtrend {
	margin-left: 180px;
	color: #F26C4F;
	font:700 11px  arial,sans-serif;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;
}

.gustspeedtrend span {
	margin-bottom: 0;
	color: #7c7e80;	
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
	font-family: arial,sans-serif;
}

.windspeedtrend {
	margin-left: 10px;
	color: #F26C4F;
	font:700 11px  arial,sans-serif;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;	
}

.windspeedtrend span {
	margin-bottom: 0;
	color: #7c7e80;	
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
	font-family: arial,sans-serif;
}

.avgspeedgust {
margin-left:200px;
color:#F26C4F;
font:11px  arial,sans-serif;
font-weight:600;
}

.avgspeedgust span {
margin-bottom:0;
color:#ccc;
font-family:arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
}
.avgspeedwind {
margin-left:30px;
color:#F26C4F;
font:11px  arial,sans-serif;
font-weight:600;
}

.avgspeedwind span {
margin-bottom:0;
color:#ccc;
font-family:arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
}


.windunits {
	color:#F05E40;
}

.windseparator {
	color:#eee;
}

hr,img {
	border: 0;
}

body,figure {
	margin: 0;
}

sub,sup {
	position: relative;
	font-size: 75%;
	line-height: 0;
	vertical-align: baseline;
}

sup {
	top: -.5em;
}

sub {
	bottom: -.25em;
}

hr {
	height: 0;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	-o-box-sizing: border-box;
	box-sizing: content-box;
}

html {
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
	font-family: arial,sans-serif;
}

body {
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
	font-family: arial,sans-serif;
	font-size: 14px;
	line-height: 1.42857143;
	color: #7c7e80;
}

a {
	color: #777;
	text-decoration: none;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
	font-family: arial,sans-serif;
	font-weight: 700;
}

a:hover {
	color: #f26c4f;
}

hr {
	margin-top: 20px;
	margin-bottom: 20px;
	border-top: 1px solid #eee;
}

.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6 {
	font-family: inherit;
	font-weight: 400;
	line-height: 1.1;
	color: inherit;
}

.h2 .small,.h2 small,.h3 .small,.h3 small,.h4 .small,.h4 small,.h5 .small,.h5 small,.h6 .small,.h6 small,h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small,h4 .small,h4 small,h5 .small,h5 small,h6 .small,h6 small {
	font-weight: 400;
	line-height: 1;
	color: #7c7e80;
}

.h1,.h2,.h3,h1,h2,h3 {
	margin-top: 20px;
	margin-bottom: 10px;
}

.h1 .small,.h1 small,.h2 .small,.h2 small,.h3 .small,.h3 small,h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small {
}

.h4,.h5,.h6,h4,h5,h6 {
	margin-top: 10px;
	margin-bottom: 10px;
}

.h4 .small,.h4 small,.h5 .small,.h5 small,.h6 .small,.h6 small,h4 .small,h4 small,h5 .small,h5 small,h6 .small,h6 small {
}

/* homeweatherstation beta css for mobile devices */
/* Tablet */
@media screen and (max-width: 768px) {
	.weather-container {
		display: inline;
		width: 300px;
		height: 200px;
		background-color: none;
		margin: 5px auto;
		text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;		
	font-family: arial,sans-serif;
		overflow: hidden;
	}

	.weather-item {
		float: none;
		width: 310px;
		margin-left: 1px;
		margin-top: 10px;
		overflow: hidden;
	/*scrolling overflow hidden keeping height correct for small devices */
	}

	.homeweathernotifications {
		display: none;
	}

	.homeweathernotify {
		display: none;
	}

	.chart,.chart,.charttemperature,.chartforecast,.a,.chartbarometer,.chartdeprem,.chartdirection,.chartrainfall,.chartsky,.chartsolar,.chartwindspeed,.weather2-container,.weatherfooter-container,.weatherheather {
		display: none;
	}

	header {
		display: none;
	}

	#icon {
		width: 55px;
		height: 43px;
		float: left;
		padding: 5px;
		margin: 0 0 0 10px;
	}
}

:-webkit-full-screen {
	background: #fff;
}

:-moz-full-screen {
	background: #fff;
}

:-ms-fullscreen {
	background: #fff;
}

:full-screen {
/*pre-spec */
	background: #fff;
}

:fullscreen {
/* spec */
	background: #fff;
}

.homeweatherinfo {
	width: 230px;
	height: 70px;
	transform: translate(40px,-45px);
	padding: 10px;
	font-family: 'weathertext',sans-serif;
}

.homeweatherinfo span:first-child {
	display: block;
	color: #f26c4f;
	font-size: 15px;
	font-family: 'weathertext',sans-serif;
}

.homeweatherinfo span:last-child {
	color: #919191;
	font-size: 13px;
	font-family: 'weathertext',sans-serif;
}

.homeweatherinfo span a {
	color: #545454;
	text-decoration: none;
	font-family: 'weathertext',sans-serif;
}

/*notifications homeweather station*/
.homeweathernotify {
	width: 300px;
	height: 65px;
	background-color: none;
	border-radius: 4px;
	overflow: hidden;
	
	margin: -25px 0 0 45px;
	font-family: "HelveticaNeue","Helvetica Neue Light","Helvetica Neue",Arial,"Lucida Grande",sans-serif;
}

.homeweathernotify hv {
	font-size: 20px;
	font-weight: 400;
	font-family: "weathertext",Arial,"Lucida Grande",sans-serif;
	color: #f26c4f;
}

.homeweathernotify hvempty {
	font-size: 14px;
	font-family: "HelveticaNeue","Helvetica Neue Light","Helvetica Neue",Arial,"Lucida Grande",sans-serif;
	color: #878a8c;
	font-weight: 400;
	margin-left: 25px;
	top: 35px;
}

.homeweathernotify hvcold {
	font-size: 20px;
	font-family: "weathertext",Arial,"Lucida Grande",sans-serif;
	color: #00adbc;
	font-weight: 400;
}

.homeweathernotify hv10 {
	font-size: 26px;
	font-family: "weathertext",Arial,"Lucida Grande",sans-serif;
	color: #8560a8;
	font-weight: 400;
}

.homeweathernotify span {
	margin-top: 25px;
	font-size: 12px;
	font-family: "HelveticaNeue","Helvetica Neue Light","Helvetica Neue",Arial,"Lucida Grande",sans-serif;
}

.homeweathernotify description {
	position: absolute;
	margin-top: 20px;
	margin-left: 2px;
	font-size: 13px;
	line-height: 12px;
	font-family: "HelveticaNeue","Helvetica Neue Light","Helvetica Neue",Arial,"Lucida Grande",sans-serif;
}

.homeweathernotify colder {
	color: #00adbc;
}

.homeweathernotify warmer {
	color: #f26c4f;
}

/* windirection homeweatherstation css July 15th 2016  cleaned with http://www.cleancss.com/css-beautify/*/
.windirection {
	margin: 10px 0 0 85px;
	width: 100%;
}

.homeweathercompass {
	position: absolute;
	width: 175px;
	height: 175px;
	text-align: center;
	margin-top: -20px;
	margin-left: -20px;
	background: none;
	z-index: 1;
}

.text {
	z-index: 10;
	margin:auto 0;
	margin-top: 60px;
	text-align:center;
	background: none;
	font-family: 'weathertext',  Arial;
	font-size: 26px;
	background: none;
	color:#878a8c;
}

.windvalue {
	font-family: 'weathertext',  Arial;
	font-size: 26px;
	background: none;
	color:#878a8c;
}

.homeweathercompass > .homeweathercompass-line {
	position: absolute;
	z-index: 10;
	left: 25px;
	right: 25px;
	top: 25px;
	bottom: 25px;
	margin: auto;
	-webkit-border-radius: 100%;
	-o-border-radius: 100%;
	-ms-border-radius: 100%;
	border-radius: 100%;
	border-left: 8px solid rgba(95, 96, 97,0.5);
	border-top: 8px solid rgba(95, 96, 97,0.8);
	border-right: 8px solid rgba(95, 96, 97,0.5);
	border-bottom: 8px solid rgba(95, 96, 97,0.8);
	-webkit-clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 100%, 0 0);
	-ms-clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 100%, 0 0);
}

.thearrow {
	position: absolute;
	z-index: 200;
	top: 0;
	left: 50%;
	margin-left: -5px;
	width: 10px;
	height: 50%;
	-webkit-transform-origin: 50% 100%;
	-moz-transform-origin: 50% 100%;
	-o-transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
}

.thearrow:after {
	content: '';
	position: absolute;
	left: 50%;
	top: 0%;
	height: 15px;
	width: 15px;
	background-color: #f26c4f;
	-webkit-border-radius: 100%;
	-o-border-radius: 100%;
	-ms-border-radius: 100%;
	border-radius: 100%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.thearrow:before {
	content: '';
	width: 6px;
	height: 6px;
	position: absolute;
	z-index: 9;
	left: 2px;
	top: -3px;
	border: 2px solid #fff;
	-webkit-border-radius: 100%;
	-o-border-radius: 100%;
	-ms-border-radius: 100%;
	border-radius: 100%;
}

.homeweathercompass > .windirectiontext {
	display: block;
	margin:auto 0;
	margin-top: 0px;
	text-align:center;
	color:#878a8c;
	font-family:  Arial, "Lucida Grande", sans-serif;
	font-weight: 600;
	line-height: 12px;
	font-size: 12px;
	z-index: 10;
}
.windirectiontext span {
	color: #F26C4F
}
.thearrow {
	animation: rotate 1.5s both linear;
	-webkit-animation: rotate 1.5s both linear;
	-moz-animation: rotate 1.5s both linear;
	-o-animation: rotate 1.5s both linear;
	-ms-animation: rotate 1.5s both linear;
}
.animated .thearrow {
	animation: rotate 1.5s both linear;
	-webkit-animation: rotate 1.5s both linear;
	-moz-animation: rotate 1.5s both linear;
	-o-animation: rotate 1.5s both linear;
	-ms-animation: rotate 1.5s both linear;
}

#raincontainer1 {
	height: 170px;
	margin: 0 auto;
	overflow:hidden;
	position: absolute;
	margin-top: -30px;
	width: 210px;
	margin-left:10px;
	z-index:auto;
}

#raincontainer1 div {
	position: absolute;
	
}

.rainvalue {
	font-size:1.1em;
	color:rgba(0,0,0,0.6);
	margin-left:30px;
	margin-top:2%;
	line-height:1em;
	font-family: weathertext, Arial, "Lucida Grande", sans-serif;
	width: 50%;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	
}

.rainvalue span{
	font-size:0.6em;
}

.norain {
	margin-left:-10px;
	margin-top:15%;
	background:none;
	height:60px;
	padding:4px;
	width:75px;
	background-image:url(homepageicons/norain.png);
	background-repeat:no-repeat;
	background-position:center;
	z-index:auto;
}

.raintext1 {
	font-size:10px;
	color:#00adbc;
	margin-left:0px;
	margin-top:1%;
	font-weight:600;
	line-height:10px;
	font-family:Arial,  sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.raintext1 span{
	color:#f26c4f;
	font-size:10px;
}

#beaker {
	border: 5px solid #e9ebf1;
	border-top: 0;
	border-radius: 5px 5px 5px 5px;
	height: 120px;
	left: 50px;
	bottom: 0;
	width: 125px;
	background-image:url(rain/marker.png);
	background-repeat:no-repeat;
}

#beaker:before,
#beaker:after {
	border: 5px solid #e9ebf1;
	border-bottom: 0;
	border-radius: 7px;
	content: '';
	height: 5px;
	position: absolute;
	top: -0px;
	width: 15px;
}

#beaker:before { left: -15px;  }
#beaker:after { right: -15px;  }

#raintoday {	
  background-color: none;
  border:3px solid #00adbc;
  border-top: 0px ;
  border-left: 0px ;
  border-right: 0px ;  
  border-radius: 0 0 1px 1px;
  bottom: 0;
  top:15;
  width: 115px;
  margin-left:55px;
  margin-bottom:5px;
  background-image:url(rain/water.svg);
  background-repeat:no-repeat;
}

#raintoday:after {
	background-color:none;
	bottom: 0px;
	content: '';
	height: 200px;
	left: -40px;
	position: absolute;
	transform: rotate(30deg);
	-webkit-transform: rotate(15deg);
	width: 120px;
}

/*month*/
.maxrainfallmonth {
	position:absolute;
	background:none;
	border-radius:50%;
	height:60px;
	width:60px;
	padding:5px;
	float:right;
	border:1px solid #eee;
	-webkit-background-size:cover!important;
	-ms-background-size:cover!important;
	background-size:cover!important;
	margin-top:10px;
	margin-left:210px;
}

.maxrainfallmonth-content {
	float:left;
	line-height:1;
	margin-top:-.9em;
	padding-top:37%;
	text-align:center;
	width:100%;
	color:#777;
	font-family: Arial;
	-webkit-font-smoothing:antialiased!important;
	font-size:0.8em;
}

/*year*/
.maxrainfallyear {
	position:absolute;
	background:none;
	border-radius:50%;
	height:60px;
	width:60px;
	padding:5px;
	float:right;
	border:1px solid #eee;
	-webkit-background-size:cover!important;
	-ms-background-size:cover!important;
	background-size:cover!important;
	margin-top:15px;
	margin-left:-7px;
}

.maxrainfallyear-content {
	float:left;
	line-height:1;
	margin-top:-.9em;
	padding-top:37%;
	text-align:center;
	width:100%;
	color:#777;
	font-family: Arial;
	-webkit-font-smoothing:antialiased!important;
	font-size:0.8em;
}

/* Daylight */
.daylightvalue {
	position:absolute;
	font-family:'weathertext',Arial;
	left:-10px;
	top:50px;
	color:#f8f8f8;
	z-index:1;
	font-size:22px;
	line-height:20px;
	width:100px;
}

.daylightvalue minutes {
	position:absolute;
	font-family:'weathertext',Arial;
	left:40px;
	color:#f8f8f8;
	z-index:auto;
	font-size:22px;
	line-height:20px;
	width:100px;
}

.daylightvalue:before {
	position:absolute;
	content:"Estimated";
	display:block;
	font-size:11px;
	line-height:20px;
	top:-28px;
	left:45px;
	letter-spacing:normal
}

.daylightvalue span {
	position:absolute;
	color:#fff;
	font-size:3px;
	left:67px;
	top:0px
}

.daylightvalue period {
	position:absolute;
	color:#fff;
	font-size:11px;
	left:47px;
	top:20px
}

.daylightvalue dayperiod {
	position:absolute;
	color:#fff;
	font-size:10px;
	left:20px;
	top:20px;
	width:100px;
}

.daylightvalue min {
	position:absolute;
	color:#fff;
	font-size:9px;
	left:85px;
	top:-17px;
	letter-spacing:normal;
}

.daylightvalue hrs {
	position:absolute;
	color:#fff;
	font-size:9px;
	left:40px;
	top:-17px;
	letter-spacing:normal
}

.moonimage {
	position:absolute;
	left:55px;
	top:94px;
	color:#f8f8f8;
	font-size:10px;
	line-height:20px;
	z-index:1;
}

.sunimage {
	position:absolute;
	left:55px;
	top:4px;
	color:#f8f8f8;
	font-size:10px;
	line-height:20px;
	z-index:1;
}

.wi-daylight:before {
	content:"\f06e"
}

.hrswassunrise {
	margin-top:-120px;
	width:100px;
	position:absolute;
	font-size:10px;
	margin-left:-95px;
	line-height:12px
}

.hrstillsunset {
	margin-top:-20px;
	width:100px;
	position:absolute;
	font-size:10px;
	margin-left:120px;
	line-height:12px
}

.sunrisehome {
	margin-top:-120px;
	width:100px;
	position:absolute;
	font-size:10px;
	margin-left:120px;
	line-height:12px
}

.sunsethome {
	margin-top:-20px;
	width:100px;
	position:absolute;
	font-size:10px;
	margin-left:-95px;
	line-height:12px
}

#daylight {
	background:none;border:4px solid #e9ebf1;
	-webkit-border-radius:100%;
	-o-border-radius:100%;
	-ms-border-radius:100%;
	border-radius:100%;
	width:118px;height:118px;
	-webkit-transform: rotate(-85deg) ;
	-moz-transform: rotate(-85deg) ;
	-o-transform: rotate(-85deg) ;
	-ms-transform: rotate(-85deg) ;
	transform: rotate(-85deg) ;
}

.daylightbox {
	margin-top:15px;position:absolute;margin-left:85px;
	-webkit-border-radius:100%;
	-o-border-radius:100%;
	-ms-border-radius:100%;
	border-radius:100%;
	border:0px solid #e9ebf1;
	width:120px;height:120px;
}

.daylightoutput {
	position:absolute;
	z-index:0
}

/* Moon */
.daylightoutputmoon {
	position:absolute;
	z-index:101;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	top:-2;
	left:-2;
	width:160px;
	height:160px;
	border-radius:100%;
	border:10px solid #e9ebf1;
	z-index:10
}