/* fullPage static css content */
/* @group keyframes */
@-webkit-keyframes wave {
	0% {
		background-position: 100px bottom;
	}
	100% {
		background-position: 0 bottom;
	}
}
@-moz-keyframes wave {
	0% {
		background-position: 100px bottom;
	}
	100% {
		background-position: 0 bottom;
	}
}
@keyframes wave {
	0% {
		background-position: 100px bottom;
	}
	100% {
		background-position: 0 bottom;
	}
}
@-webkit-keyframes pop {
	0% {
			-webkit-transform: scale(.1);
		opacity: 0;
	}
	85% {
			-webkit-transform: scale(1.05);
		opacity: 1;
	}
	100% {
			-webkit-transform: scale(1);
	}
}
@-moz-keyframes pop {
	0% {
			-moz-transform: scale(.1);
		opacity: 0;
	}
	85% {
			-moz-transform: scale(1.05);
		opacity: 1;
	}
	100% {
			-moz-transform: scale(1);
	}
}
@keyframes pop {
	0% {
			transform: scale(.1);
		opacity: 0;
	}
	85% {
			transform: scale(1.05);
		opacity: 1;
	}
	100% {
			transform: scale(1);
	}
}
@-webkit-keyframes spin {
	0% {
			-webkit-transform: rotate(180deg);
	}
	100% { 
			-webkit-transform: rotate(540deg);
	}
}
@-moz-keyframes spin {
	0% {
			-moz-transform: rotate(180deg);
	}
	100% { 
			-moz-transform: rotate(540deg);
	}
}
@keyframes spin {
	0% {
			transform: rotate(180deg);
	}
	100% { 
			transform: rotate(540deg);
	}
}
/* @end */

/* @group globals */
* {
	border: 0;
	text-decoration: none;
	padding: 0;
	margin: 0;
		-webkit-font-smoothing: subpixel-antialiased;
		-webkit-text-size-adjust: 100%;
		-webkit-tap-highlight-color: transparent;
	outline: none;
}
body {
	background: transparent;
	font: normal 12px/18px 'Helvetica Neue', Helvetica, Arial, sans-serif;
	padding: 0;
	margin: 0;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
	user-select: none;
	cursor: default;
}
.widget {
	position: relative;
		-webkit-background-clip: border-box;
		-moz-background-clip: border-box;
		-ms-background-clip: border-box;
	background-clip: border-box;
	width: 100%;
	overflow: hidden;
}
.primary {
	background: #eee url(../../bundles/willyweatherwebapp/images/widgets/ui-loader.gif) 50% 50% no-repeat;
	border: 1px solid #888;
	border-color: rgba(0,0,0,.6);
	height: 384px;
	overflow: hidden;
}
.ready .primary {
	background-image: none !important;
	height: auto;
}
.panel {
	display: none;
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
}
.panel.active {
	display: block;
}
.primary .panel {
	position: relative;
	border: 1px solid #444;
	border-color: rgba(0,0,0,.6);
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
	box-sizing: border-box;
	height: 386px;
	padding: 4px;
	margin: -1px;
}
.secondary {
	position: relative;
	background-color: #eee;
		background-image: -webkit-linear-gradient(top,rgba(255,255,255,.3),rgba(255,255,255,0));
		background-image: -moz-linear-gradient(top,rgba(255,255,255,.3),rgba(255,255,255,0));
		background-image: -ms-linear-gradient(top,rgba(255,255,255,.3),rgba(255,255,255,0));
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#30FFFFFF',endColorstr='#00FFFFFF',GradientType=0);
	background-image: linear-gradient(top,rgba(255,255,255,.3),rgba(255,255,255,0));
	border: 1px solid #ccc;
	border-color: rgba(0,0,0,.2);
	border-top: none;
	border-radius: 0 0 5px 5px;
		-webkit-box-shadow:
			inset 0 1px 2px rgba(255,255,255,.2),
			0 -1px 3px rgba(0,0,0,.2);
		-moz-box-shadow:
			inset 0 1px 2px rgba(255,255,255,.2),
			0 -1px 3px rgba(0,0,0,.1);
		-ms-box-shadow:
			inset 0 1px 2px rgba(255,255,255,.2),
			0 -1px 3px rgba(0,0,0,.1);
	box-shadow:
		inset 0 1px 2px rgba(255,255,255,.2),
		0 -1px 3px rgba(0,0,0,.1);
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
	box-sizing: border-box;
	padding: 4px 4px 0;
	z-index: 1;
}
		
.tabs-wrapper[style] + .primary + .secondary {
	border-radius: 0;
}		
/* @end */

/* @group graphs */
.primary .drag-mask {
	position: absolute;
	top: -1px;
	right: -1px;
	bottom: -1px;
	left: -1px;
	z-index: 5;
		cursor: -webkit-grabbing;
		cursor: -moz-grabbing;
	cursor: grabbing;
}
.primary .drag-mask span {
	position: absolute;
}
.primary .drag-mask span.top {
	top: 0;
	left: 0;
	width: 100%;
	height: 10px;
}
.primary .drag-mask span.right {
	top: 0;
	right: 0;
	width: 10px;
	height: 100%;
}
.primary .drag-mask span.bottom {
	bottom: 0;
	left: 0;
	width: 100%;
	height: 10px;
}
.primary .drag-mask span.left {
	top: 0;
	left: 0;
	width: 10px;
	height: 100%;
}
.primary .label {
	position: absolute;
	background: #444;
	background: rgba(0,0,0,.6);
		background-image: -webkit-linear-gradient(top,rgba(255,255,255,.2),rgba(255,255,255,0));
		background-image: -moz-linear-gradient(top,rgba(255,255,255,.2),rgba(255,255,255,0));
		background-image: -ms-linear-gradient(top,rgba(255,255,255,.2),rgba(255,255,255,0));
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#48FFFFFF',endColorstr='#00FFFFFF',GradientType=0);
	background-image: linear-gradient(top,rgba(255,255,255,.2),rgba(255,255,255,0));
	border-radius: 2px;
	font-style: normal;
	color: #fff;
	white-space: nowrap;
	text-align: center;
	padding: 0 5px;
}
.primary .graph img {
		-webkit-user-drag: none;
		-moz-user-drag: none;
		-ms-user-drag: none;
	user-drag: none;
}			
.primary .graph.plot {
	position: absolute;
	top: 80px;
	right: -1px;
	bottom: -1px;
	left: -1px;
	overflow: hidden;
}
.primary .graph.plot .scroll-view {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	background: #fff;
		-webkit-box-shadow: 0 0 5px rgba(0,0,0,.2);
		-moz-box-shadow: 0 0 5px rgba(0,0,0,.2);
		-ms-box-shadow: 0 0 5px rgba(0,0,0,.2);
	box-shadow: 0 0 5px rgba(0,0,0,.2);
	width: 1050px;
	cursor: hand;
		cursor: -webkit-grab;
		cursor: -moz-grab;
	cursor: grab;
}
.primary .graph.plot .scroll-view:before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border: 1px solid #333;
	border-color: rgba(0,0,0,.6);
	z-index: 2;
}
.primary .graph.plot .scroll-view::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border: 1px solid #333;
	border-color: rgba(0,0,0,.6);
	z-index: 2;
}
.primary .graph.plot .scroll-view:active,
.primary .graph.plot .scroll-view.ui-draggable-dragging {
		cursor: -webkit-grabbing;
		cursor: -moz-grabbing;
	cursor: grabbing;
}
.primary .graph.plot .scroll-view .flot-canvas {
	height: 305px;
	width: 1050px;
}
.primary .graph.plot .days {
	position: absolute;
	top: 0;
	left: 0;
	list-style-type: none;
	width: 1050px;
	height: 100%;
	padding: 0;
	margin: 0;
}
.primary .graph.plot .days::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-bottom: 1px solid rgba(0,0,0,.1);
}
.primary .graph.plot .days li {
	position: relative;
	width: 150px;
	height: 100%;
	float: left;
}
.primary .graph.plot .days li + li::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 1px;
	z-index: 1;
}
.primary .graph.plot .days span {
	position: absolute;
	top: 0;
	bottom: 0;
}
.primary .graph.plot .days .night.am {
	background: #d7dcff;
	left: 0;
	width: 27.5%;
}
.primary .graph.plot .days .twilight.dawn {
	background: #fff1ba;
	left: 27.5%;
	width: 2.5%;
}
.primary .graph.plot .days .twilight.dusk {
	background: #fff1ba;
	right: 25.625%;
	width: 1.875%;
}
.primary .graph.plot .days .night.pm {
	background: #d7dcff;
	right: 0;
	width: 25.625%;
}
.primary .graph.plot .days time {
	position: relative;
	display: block;
	text-align: center;
	padding-top: 6px;
}

.primary .graph.plot .horizontals {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
.primary .graph.plot .horizontals span {
	position: absolute;
	right: 0;
	left: 0;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#22000000',endColorstr='#22000000',GradientType=0);
	background: rgba(0,0,0,.1);
	height: 1px;
}
.primary .graph.plot .horizontals span.rule-01 {
	top: 25%;
}
.primary .graph.plot .horizontals span.rule-02 {
	top: 50%;
}
.primary .graph.plot .horizontals span.rule-03 {
	top: 75%;
}

/* @group ticks */

/* for full page widget we need to set the position to fixed so that it won't be scrolled along with the graph */
.primary .graph.plot .ticks b {
	position: fixed;
	top: 41%;
	left: 6px;
	background: rgba(255,255,255,.8);
		-webkit-background-clip: padding-box;
		-moz-background-clip: padding-box;
	background-clip: padding-box;
	border-radius: 11.5px;
	border: 1px solid rgba(0,0,0,.1);
	font-weight: normal;
	line-height: 21px;
	color: rgba(0,0,0,.5);
	padding: 0 8px;
	margin-top: -11.5px;
	z-index: 1;
}
.primary .graph.plot .ticks[data-yaxis="1"] b {
	right: 12px;
	left: auto;
}
.primary .graph.plot .ticks b:nth-child(2) {
	top: 61%;
}
.primary .graph.plot .ticks b:nth-child(3) {
	top: 81%;
}
.primary .graph.plot .ticks b span {
	position: relative;
	float: left;
}
.primary .graph.plot .ticks[data-yaxis="1"] b span {
	float: right;
}

/* @end */

/* @end */

/* @group data-stacks */

.data-stack {
	position: absolute;
	top: 10px;
	left: 22px;
	color: #fff;
	text-align: left;
	line-height: 14px;
	list-style-type: none;
	z-index: 3;
}
.data-stack + .data-stack {
	right: 22px;
	left: auto;
	text-align: right;
}
.data-stack > div {
	position: relative;
	padding: 8px 0;
}
.data-stack > div + div {
	margin-top: 1px;
}
.data-stack > div + div:before {
	content: '';
	position: absolute;
	right: 30px;
	top: -1px;
	left: 0;
	background: #fff;
	height: 1px;
}
.data-stack > div + div::before {
	content: '';
	position: absolute;
	right: 30px;
	top: -1px;
	left: 0;
		background: -webkit-linear-gradient(right,rgba(255,255,255,0),rgba(255,255,255,.3));
		background: -moz-linear-gradient(right,rgba(255,255,255,0),rgba(255,255,255,.3));
		background: -ms-linear-gradient(right,rgba(255,255,255,0),rgba(255,255,255,.3));
	background: linear-gradient(right,rgba(255,255,255,0),rgba(255,255,255,.3));
	height: 1px;
}
.data-stack + .data-stack > div + div:before {
	right: 0;
	left: 30px;
}
.data-stack + .data-stack > div + div::before {
	right: 0;
	left: 30px;
		background: -webkit-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,.3));
		background: -moz-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,.3));
		background: -ms-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,.3));
	background: linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,.3));
}
.data-stack > div > span {
	display: block;
}
.data-stack.inverse {
	color: #666;
	color: rgba(0,0,0,.6);
}

/* @end */

/* @group form */
form {
	position: relative;
	background-color: #eee;
		background-image: -webkit-linear-gradient(top,rgba(255,255,255,.5),rgba(255,255,255,0));
		background-image: -moz-linear-gradient(top,rgba(255,255,255,.5),rgba(255,255,255,0));
		background-image: -ms-linear-gradient(top,rgba(255,255,255,.5),rgba(255,255,255,0));
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#30FFFFFF',endColorstr='#00FFFFFF',GradientType=0);
	background-image: linear-gradient(top,rgba(255,255,255,.5),rgba(255,255,255,0));
	border: 1px solid #ccc;
	border-color: rgba(0,0,0,.2);
	border-bottom: none;
	border-radius: 5px 5px 0 0;
		-webkit-box-shadow:
			inset 0 1px 2px rgba(255,255,255,.5),
			0 1px 3px rgba(0,0,0,.2);
		-moz-box-shadow:
			inset 0 1px 2px rgba(255,255,255,.5),
			0 1px 3px rgba(0,0,0,.1);
		-ms-box-shadow:
			inset 0 1px 2px rgba(255,255,255,.5),
			0 1px 3px rgba(0,0,0,.1);
	box-shadow:
		inset 0 1px 2px rgba(255,255,255,.5),
		0 1px 3px rgba(0,0,0,.1);
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
	box-sizing: border-box;
	padding: 4px 4px 59px;
	z-index: 3;
}
form.active {
	filter: none !important;
	z-index: 5;
}
form fieldset {
	background: #fff;
	display: block;
	border: none;
	border-radius: 2px;
		-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.5);
		-moz-box-shadow: 0 1px 0 rgba(255,255,255,.5);
		-ms-box-shadow: 0 1px 0 rgba(255,255,255,.5);
	box-shadow: 0 1px 0 rgba(255,255,255,.5);
	height: 20px;
	padding: 0 20px 0 0;
	margin: 0;
}
form .fixed {
	background: none;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		-ms-box-shadow: none;
	box-shadow: none;
	width: 100%;
	padding: 0;
}
form [type="search"] {
	display: block;
	background: #fff;
		-webkit-background-clip: padding-box;
		-moz-background-clip: padding-box;
		-ms-background-clip: padding-box;
	background-clip: padding-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-color: rgba(0,0,0,.2);
	border-right: none;
	border-radius: 2px 0 0 2px;
		-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
		-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
		-ms-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
	box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
	font: normal 12px/18px 'Helvetica Neue', Helvetica, Arial, sans-serif;
	width: 100%;
	height: 20px;
	padding: 2px 3px;
	margin: 0;
		-webkit-appearance: none;
		-moz-appearance: none;
	appearance: none;
	cursor: pointer;
}
form input[disabled] {
	display: block;
	background-color: #fff !important;
	width: 100% !important;
	height: 20px !important;
}
form.active [type="search"] {
	border-bottom-left-radius: 0;
}
form [type="search"]:focus {
	border-color: rgba(0,0,0,.4);
	outline: none;
	cursor: text;
}
form input[type="search"]::-webkit-search-decoration,
form input[type="search"]::-webkit-search-cancel-button,
form input[type="search"]::-webkit-search-results-button,
form input[type="search"]::-webkit-search-results-decoration {
  display: none;
}
form .select [type="search"] {
	background: #fff;
		background-image: -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.05));
		background-image: -moz-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.05));
		background-image: -ms-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.05));
	background-image: linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.05));
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		-ms-box-shadow: none;
	box-shadow: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
	user-select: none;
}
form .select [type="search"]:active,
form.active .select [type="search"] {
	background-color: #ddd;
	border-color: rgba(0,0,0,.4);
}
form button {
	position: absolute;
	top: 4px;
	right: 4px;
	background: #666;
	background: rgba(0,0,0,.6);
		background-image: -webkit-linear-gradient(top,rgba(255,255,255,.2),rgba(255,255,255,0));
		background-image: -moz-linear-gradient(top,rgba(255,255,255,.2),rgba(255,255,255,0));
		background-image: -ms-linear-gradient(top,rgba(255,255,255,.2),rgba(255,255,255,0));
	background-image: linear-gradient(top,rgba(255,255,255,.2),rgba(255,255,255,0));
	border: none;
	border-radius: 0 2px 2px 0;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
	box-sizing: border-box;
		-webkit-box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
		-moz-box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
	width: 20px;
	height: 20px;
	padding: 0;
	cursor: pointer;
}
form .select [type="search"]:active + button,
form button:active,
form.active .select button {
	background-color: rgba(0,0,0,.8);
}
form button i {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	background: url(../../bundles/willyweatherwebapp/images/widgets/sprite.png) -60px -8px;
	width: 20px;
	height: 20px;
	text-indent: -9999em;
	padding: 0;
	margin: 0;
}
form .select button i {
	background-position: -112px -8px;
}

form h1 {
	font-size: 12px;
	line-height: 20px;
	color: #fff;
	color: rgba(255,255,255,.8);
	text-align: center;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	margin: 0;
}
form .results {
	display: none;
	position: absolute;
	top: 24px;
	left: 4px;
	right: 23px;
	background: #fff;
	background: rgba(255,255,255,.9);
		-webkit-background-clip: padding-box;
		-moz-background-clip: padding-box;
		-ms-background-clip: padding-box;
	background-clip: padding-box;
	border: 1px solid rgba(0,0,0,.4);
	border-top: none;
		-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.2);
		-moz-box-shadow: 0 1px 3px rgba(0,0,0,.1);
		-ms-box-shadow: 0 1px 3px rgba(0,0,0,.1);
	box-shadow: 0 1px 3px rgba(0,0,0,.1);
	list-style-type: none;
	padding: 0;
	margin: 0;
	z-index: 10;
}
form .results::after {
	content: '';
	position: absolute;
	top: 0;
	right: -10px;
	bottom: -10px;
	left: -10px;
	background: transparent;
}
form.active .results {
	display: block;
}
form .results li {
	position: relative;
	color: #5f5f5f;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	padding: 0 5px;
	z-index: 1;
}
form .results li:hover,
form .results li:active {
	background-color: #226be4;
		background-image: -webkit-linear-gradient(top,rgba(255,255,255,.3),rgba(255,255,255,0));
		background-image: -moz-linear-gradient(top,rgba(255,255,255,.3),rgba(255,255,255,0));
		background-image: -ms-linear-gradient(top,rgba(255,255,255,.3),rgba(255,255,255,0));
	background-image: linear-gradient(top,rgba(255,255,255,.3),rgba(255,255,255,0));
		-webkit-box-shadow:
inset 0 1px 0 rgba(0,0,0,.1),
inset 0 -1px 0 rgba(0,0,0,.2);
		-moz-box-shadow:
inset 0 1px 0 rgba(0,0,0,.1),
inset 0 -1px 0 rgba(0,0,0,.2);
		-ms-box-shadow:
inset 0 1px 0 rgba(0,0,0,.1),
inset 0 -1px 0 rgba(0,0,0,.2);
	box-shadow:
		inset 0 1px 0 rgba(0,0,0,.1),
		inset 0 -1px 0 rgba(0,0,0,.2);
	color: #fff;
	cursor: pointer;
}
form .results li::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: transparent;
}
form .results li:active::after {
	background: rgba(0,0,0,.4);
}
/* @end */

/* @group tabs */
.tabs-wrapper {
	position: relative;
	padding: 4px 5px;
	margin-top: -59px;
	z-index: 4;
}
.tabs {
	display: table;
	border-radius: 2px;
		-webkit-box-shadow: 0 1px 2px rgba(255,255,255,.5);
		-moz-box-shadow: 0 1px 2px rgba(255,255,255,.5);
		-ms-box-shadow: 0 1px 2px rgba(255,255,255,.5);
	box-shadow: 0 1px 2px rgba(255,255,255,.5);
	width: 100%;
	padding: 0;
	}
.tabs a {
	position: relative;
	display: table-cell;
		background-image: -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.1));
		background-image: -moz-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.1));
		background-image: -ms-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.1));
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000',endColorstr='#16000000',GradientType=0);
	background-image: linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.1));
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-color: rgba(0,0,0,.2);
	color: #fff;
	color: rgba(255,255,255,.8);
	text-align: center;
	text-decoration: none;
	padding: 2px 3px;
	cursor: pointer;
	}
.tabs a:first-child {
	border-radius: 2px 0 0 2px;
	}
.tabs a:last-child {
	border-radius: 0 2px 2px 0;
	}
.tabs a + a {
	border-left: none;
	}
.tabs a:active,
.tabs .current {
	background-color: rgba(0,0,0,.1);
		background-image: -webkit-linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0));
		background-image: -moz-linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0));
		background-image: -ms-linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0));
	background-image: linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0));
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33000000',endColorstr='#33000000',GradientType=0);
}
.tabs a .icon {
	display: block;
	background: url(../../bundles/willyweatherwebapp/images/widgets/sprite.png);
	border-radius: 2px;
	width: 28px;
	height: 28px;
	margin: 2px auto -3px;
}
.tabs [href="#weather"] .icon {
	background-position: -10px -1370px;
}
.tabs [href="#tides"] .icon {
	background-position: -48px -1370px;
}
.tabs [href="#wind"] .icon {
	background-position: -86px -1370px;
}
.tabs [href="#swell"] .icon {
	background-position: -124px -1370px;
}
.tabs [href="#rainfall"] .icon {
	background-position: -162px -1370px;
}
.tabs [href="#sunrisesunset"] .icon {
	background-position: -200px -1370px;
}
.tabs [href="#moonphases"] .icon {
	background-position: -238px -1370px;
}
.tabs [href="#uv"] .icon {
	background-position: -276px -1370px;
}
.collapsed .tabs-wrapper {
	margin-top: -57px;
}
.collapsed .tabs,
.collapsed .tabs a {
	position: relative;
	border: none;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		-ms-box-shadow: none;
	box-shadow: none;
	}
.collapsed .tabs a {
	background: none !important;
	font-size: 16px;
	font-weight: bold;
	cursor: default;
	}
.collapsed .tabs a .icon {
	margin: 0px auto -1px;
	}
.collapsed .fixed + .tabs a {
	padding-top: 4px;
	padding-bottom: 2px;
	}
.collapsed .fixed + .tabs-wrapper .tabs:before {
	content: '';
	position: absolute;
	right: 0;
	top: -3px;
	left: 0;
	background: #ccc;
		background: -webkit-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,.2) 10%,rgba(0,0,0,.2) 90%,rgba(0,0,0,0));
		background: -moz-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,.2) 10%,rgba(0,0,0,.2) 90%,rgba(0,0,0,0));
		background: -ms-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,.2) 10%,rgba(0,0,0,.2) 90%,rgba(0,0,0,0));
	background: linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,.2) 10%,rgba(0,0,0,.2) 90%,rgba(0,0,0,0));
	height: 1px;
}
.collapsed .fixed + .tabs-wrapper .tabs::before {
	content: '';
	position: absolute;
	right: 0;
	top: -3px;
	left: 0;
	background: #ccc;
		background: -webkit-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,.2) 10%,rgba(0,0,0,.2) 90%,rgba(0,0,0,0));
		background: -moz-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,.2) 10%,rgba(0,0,0,.2) 90%,rgba(0,0,0,0));
		background: -ms-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,.2) 10%,rgba(0,0,0,.2) 90%,rgba(0,0,0,0));
	background: linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,.2) 10%,rgba(0,0,0,.2) 90%,rgba(0,0,0,0));
	height: 1px;
}

/* @end */

/* @group wind-directions */
.direction .icon {
	display: inline-block;
	background: url(../../bundles/willyweatherwebapp/images/widgets/sprite.png);
	width: 16px;
	height: 16px;
	margin: -3px;
}
.direction-n .icon {
	background-position: -10px -478px;
}
.direction-nne .icon {
	background-position: -36px -478px;
}
.direction-ne .icon {
	background-position: -62px -478px;
}
.direction-ene .icon {
	background-position: -88px -478px;
}
.direction-e .icon {
	background-position: -114px -478px;
}
.direction-ese .icon {
	background-position: -140px -478px;
}
.direction-se .icon {
	background-position: -166px -478px;
}
.direction-sse .icon {
	background-position: -192px -478px;
}
.direction-s .icon {
	background-position: -10px -504px;
}
.direction-ssw .icon {
	background-position: -36px -504px;
}
.direction-sw .icon {
	background-position: -62px -504px;
}
.direction-wsw .icon {
	background-position: -88px -504px;
}
.direction-w .icon {
	background-position: -114px -504px;
}
.direction-wnw .icon {
	background-position: -140px -504px;
}
.direction-nw .icon {
	background-position: -166px -504px;
}
.direction-nnw .icon {
	background-position: -192px -504px;
}
.inverse.direction-n .icon {
	background-position: -140px -270px;
}
.inverse.direction-nne .icon {
	background-position: -166px -270px;
}
.inverse.direction-ne .icon {
	background-position: -192px -270px;
}
.inverse.direction-ene .icon {
	background-position: -218px -270px;
}
.inverse.direction-e .icon {
	background-position: -244px -270px;
}
.inverse .direction-ese .icon {
	background-position: -270px -270px;
}
.inverse.direction-se .icon {
	background-position: -296px -270px;
}
.inverse.direction-sse .icon {
	background-position: -322px -270px;
}
.inverse.direction-s .icon {
	background-position: -140px -296px;
}
.inverse.direction-ssw .icon {
	background-position: -166px -296px;
}
.inverse.direction-sw .icon {
	background-position: -192px -296px;
}
.inverse.direction-wsw .icon {
	background-position: -218px -296px;
}
.inverse.direction-w .icon {
	background-position: -244px -296px;
}
.inverse.direction-wnw .icon {
	background-position: -270px -296px;
}
.inverse.direction-nw .icon {
	background-position: -296px -296px;
}
.inverse.direction-nnw .icon {
	background-position: -322px -296px;
}
/* @end */

/* @group forecast table */
.primary .forecast-wrapper {
	position: absolute;
	right: -1px;
	bottom: -1px;
	left: -1px;
	background-color: #eee;
		background-image: -webkit-linear-gradient(top,rgba(255,255,255,.3),rgba(255,255,255,0));
		background-image: -moz-linear-gradient(top,rgba(255,255,255,.3),rgba(255,255,255,0));
		background-image: -ms-linear-gradient(top,rgba(255,255,255,.3),rgba(255,255,255,0));
	background-image: linear-gradient(top,rgba(255,255,255,.3),rgba(255,255,255,0));
	border: 1px solid #ccc;
	border-color: rgba(0,0,0,.2);
	padding: 4px;
	z-index: 10;
}
.primary .forecast {
	list-style-type: none;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33000000',endColorstr='#33000000',GradientType=0);
	background: rgba(0,0,0,.2);
	border-radius: 2px;
		-webkit-box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
		-moz-box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
		-ms-box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
	color: #fff;
	color: rgba(255,255,255,.8);
	width: 100%;
	max-height: 158px;
	padding: 0;
	margin: 0;
}
.primary .forecast:after {
	content: '';
	display: block;
	clear: both;
}
.primary .forecast::after {
	content: '';
	display: block;
	clear: both;
}
.primary .forecast li {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
	box-sizing: border-box;
	height: 100%;
	padding-bottom: 6px;
	float: left;
}
.primary .forecast li + li {
	border-left: 1px solid #ccc;
	border-left-color: rgba(0,0,0,.2);
}
/*.primary .forecast li.day-1 {
	background: rgba(0,0,0,.4);
	border-radius: 2px 0 0 2px;
}
.primary .forecast li.day-2 {
	border-left-color: rgba(0,0,0,.6);
}*/
.primary .forecast time {
	display: block;
	position: relative;
	font-weight: bold;
	text-align: center;
	padding: 6px 0 3px;
	margin-bottom: 9px;
}
.primary .forecast time:after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	background: #fff;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#66FFFFFF',endColorstr='#66FFFFFF',GradientType=0);
	height: 1px;
	z-index: 6;
}
.primary .forecast time::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
		background: -webkit-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,.2) 30%,rgba(255,255,255,.2) 70%,rgba(255,255,255,0));
		background: -moz-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,.2) 30%,rgba(255,255,255,.2) 70%,rgba(255,255,255,0));
		background: -ms-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,.2) 30%,rgba(255,255,255,.2) 70%,rgba(255,255,255,0));
	background: linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,.2) 30%,rgba(255,255,255,.2) 70%,rgba(255,255,255,0));
	height: 1px;
	z-index: 6;
}
.primary .forecast table {
	width: 100%;
	border-collapse: collapse;
}
.primary .forecast table td {
	font-weight: bold;
	line-height: 12px;
	text-align: center;
	padding: 2px 6px 3px;
}
.primary .forecast table td strong {
	display: block;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.primary .forecast table td em {
	display: block;
	font-style: normal;
	font-weight: normal;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
/* @end */

/* @group weather */
.primary .panel-weather {
	background: url(../../bundles/willyweatherwebapp/images/widgets/bgs-large.jpg) 50% -1005px;
	color: #fff;
}
.primary .panel-weather.partly-cloudy,
.primary .panel-weather.high-cloud,
.primary .panel-weather.chance-shower-fine,
.primary .panel-weather.chance-thunderstorm-fine {
	background-position: 50% -1391px;
}
.primary .panel-weather.mostly-cloudy,
.primary .panel-weather.cloudy,
.primary .panel-weather.fog {
	background-position: 50% -1775px;
}
.primary .panel-weather.overcast,
.primary .panel-weather.shower-or-two,
.primary .panel-weather.chance-shower-cloud,
.primary .panel-weather.drizzle,
.primary .panel-weather.few-showers,
.primary .panel-weather.showers-rain,
.primary .panel-weather.heavy-showers-rain,
.primary .panel-weather.chance-thunderstorm-cloud,
.primary .panel-weather.chance-thunderstorm-showers,
.primary .panel-weather.thunderstorm,
.primary .panel-weather.chance-snow-fine,
.primary .panel-weather.chance-snow-cloud,
.primary .panel-weather.snow-and-rain,
.primary .panel-weather.light-snow,
.primary .panel-weather.snow,
.primary .panel-weather.heavy-snow,
.primary .panel-weather.hail {
	background-position: 50% -2161px;
}
.primary .panel-weather .precis-icon {
	display: block;
	background: url(../../bundles/willyweatherwebapp/images/widgets/sprite-precis.png) -232px -220px;
	width: 64px;
	height: 64px;
	margin: 0 auto;
	opacity: 0;
}
.primary .panel-weather .precis-icon.fine {
	background-position: -10px -220px;
}
.primary .panel-weather .precis-icon.mostly-fine {
	background-position: -84px -220px;
}
.primary .panel-weather .precis-icon.high-cloud {
	background-position: -158px -220px;
}
.primary .panel-weather .precis-icon.partly-cloudy {
	background-position: -232px -220px;
}
.primary .panel-weather .precis-icon.mostly-cloudy {
	background-position: -10px -294px;
}
.primary .panel-weather .precis-icon.cloudy {
	background-position: -84px -294px;
}
.primary .panel-weather .precis-icon.overcast {
	background-position: -158px -294px;
}
.primary .panel-weather .precis-icon.shower-or-two {
	background-position: -232px -294px;
}
.primary .panel-weather .precis-icon.chance-shower-fine {
	background-position: -10px -368px;
}
.primary .panel-weather .precis-icon.chance-shower-cloud {
	background-position: -84px -368px;
}
.primary .panel-weather .precis-icon.drizzle {
	background-position: -158px -368px;
}
.primary .panel-weather .precis-icon.few-showers {
	background-position: -232px -368px;
}
.primary .panel-weather .precis-icon.showers-rain {
	background-position: -10px -442px;
}
.primary .panel-weather .precis-icon.heavy-showers-rain {
	background-position: -84px -442px;
}
.primary .panel-weather .precis-icon.chance-thunderstorm-fine {
	background-position: -158px -442px;
}
.primary .panel-weather .precis-icon.chance-thunderstorm-cloud {
	background-position: -232px -442px;
}
.primary .panel-weather .precis-icon.chance-thunderstorm-showers {
	background-position: -10px -516px;
}
.primary .panel-weather .precis-icon.thunderstorm {
	background-position: -84px -516px;
}
.primary .panel-weather .precis-icon.chance-snow-fine {
	background-position: -158px -516px;
}
.primary .panel-weather .precis-icon.chance-snow-cloud {
	background-position: -232px -516px;
}
.primary .panel-weather .precis-icon.snow-and-rain {
	background-position: -10px -590px;
}
.primary .panel-weather .precis-icon.light-snow {
	background-position: -84px -590px;
}
.primary .panel-weather .precis-icon.snow {
	background-position: -158px -590px;
}
.primary .panel-weather .precis-icon.heavy-snow {
	background-position: -232px -590px;
}
.primary .panel-weather .precis-icon.wind {
	background-position: -10px -664px;
}
.primary .panel-weather .precis-icon.frost {
	background-position: -84px -664px;
}
.primary .panel-weather .precis-icon.fog {
	background-position: -158px -664px;
}
.primary .panel-weather .precis-icon.hail {
	background-position: -232px -664px;
}
.primary .panel-weather .precis-icon.dust {
	background-position: -10px -738px;
}
.panel-weather .today {
	position: relative;
	text-align: center;
	padding: 0 0 35px;
}
.panel-weather .today::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
		background: -webkit-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,.2) 10%,rgba(0,0,0,.2) 90%,rgba(0,0,0,0));
		background: -moz-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,.2) 10%,rgba(0,0,0,.2) 90%,rgba(0,0,0,0));
		background: -ms-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,.2) 10%,rgba(0,0,0,.2) 90%,rgba(0,0,0,0));
	background: linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,.2) 10%,rgba(0,0,0,.2) 90%,rgba(0,0,0,0));
	height: 1px;
	z-index: 6;
}
.primary .panel-weather.init .today .precis-icon {
		-webkit-animation: pop .3s ease-in;
		-moz-animation: pop .3s ease-in;
		-ms-animation: pop .3s ease-in;
	animation: pop .3s ease-in;
	opacity: 1;
}
.panel-weather .current {
	font-size: 38px;
	line-height: 46px;
	margin: 0;
}
.panel-weather .short-precis {
	font-weight: bold;
}
.panel-weather .today .max-min {
	position: absolute;
	bottom: 0;
	left: 50%;
	list-style-type: none;
	width: 160px;
	margin-left: -80px;
}
.panel-weather .today .max-min li {
		background-image: -webkit-linear-gradient(top,rgba(255,255,255,.3),rgba(255,255,255,0));
		background-image: -moz-linear-gradient(top,rgba(255,255,255,.3),rgba(255,255,255,0));
	background-image: linear-gradient(top,rgba(255,255,255,.3),rgba(255,255,255,0));
		-webkit-background-clip: padding-box;
		-moz-background-clip: padding-box;
	background-clip: padding-box;
	border: 1px solid rgba(0,0,0,.3);
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 50%;
	float: left;
}
.panel-weather .today .max-min .min {
	background-color: #226be4;
	border-top-left-radius: 2px;
}
.panel-weather .today .max-min .max {
	background-color: #f33;
	border-left: none;
	border-top-right-radius: 2px;
}
.panel-weather .direction em {
	font-style: normal;
	font-size: 11px;
}
.panel-weather .overview::after {
	content: '';
	display: block;
	clear: both;
}
.panel-weather .overview {
	padding: 12px;
	max-height: 70px;
	overflow: hidden;
}
.panel-weather .overview:hover {
	overflow-y: auto;
}
.panel-weather .overview h3 {
	text-align: center;
}
.panel-weather .overview  p {
	position: relative;
	text-align: center;
	margin: 6px 0;
}
.panel-weather .overview .today-real-time {
	display: none;
}
.panel-weather .overview .today-real-time ul {
	list-style-type: none;
}
.panel-weather .forecast {
	position: absolute;
	bottom: -1px;
	background-color: rgba(0,0,0,.3) !important;
		background: -webkit-linear-gradient(top,rgba(0,0,0,.4),rgba(0,0,0,.6)) !important;
		background: -moz-linear-gradient(top,rgba(0,0,0,.4),rgba(0,0,0,.6)) !important;
	background: linear-gradient(top,rgba(0,0,0,.4),rgba(0,0,0,.6)) !important;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#44000000',endColorstr='#44000000',GradientType=0);
	color: #fff !important;
	text-align: center;
}
.panel-weather .forecast > li {
	padding: 0 6px 6px;
}
.panel-weather .forecast > li + li {
	border-left: 1px solid #888 !important;
	border-left-color: rgba(0,0,0,.4) !important;
}
.panel-weather .forecast .precis-icon {
	background: url(../../bundles/willyweatherwebapp/images/widgets/sprite-precis.png) -136px -10px;
	width: 32px;
	height: 32px;
	opacity: 1;
}
.panel-weather .forecast .precis-icon.fine {
	background-position: -10px -10px;
}
.panel-weather .forecast .precis-icon.mostly-fine {
	background-position: -52px -10px;
}
.panel-weather .forecast .precis-icon.high-cloud {
	background-position: -94px -10px;
}
.panel-weather .forecast .precis-icon.partly-cloudy {
	background-position: -136px -10px;
}
.panel-weather .forecast .precis-icon.mostly-cloudy {
	background-position: -178px -10px;
}
.panel-weather .forecast .precis-icon.cloudy {
	background-position: -220px -10px;
}
.panel-weather .forecast .precis-icon.overcast {
	background-position: -262px -10px;
}
.panel-weather .forecast .precis-icon.shower-or-two {
	background-position: -10px -52px;
}
.panel-weather .forecast .precis-icon.chance-shower-fine {
	background-position: -52px -52px;
}
.panel-weather .forecast .precis-icon.chance-shower-cloud {
	background-position: -94px -52px;
}
.panel-weather .forecast .precis-icon.drizzle {
	background-position: -136px -52px;
}
.panel-weather .forecast .precis-icon.few-showers {
	background-position: -178px -52px;
}
.panel-weather .forecast .precis-icon.showers-rain {
	background-position: -220px -52px;
}
.panel-weather .forecast .precis-icon.heavy-showers-rain {
	background-position: -262px -52px;
}
.panel-weather .forecast .precis-icon.chance-thunderstorm-fine {
	background-position: -10px -94px;
}
.panel-weather .forecast .precis-icon.chance-thunderstorm-cloud {
	background-position: -52px -94px;
}
.panel-weather .forecast .precis-icon.chance-thunderstorm-showers {
	background-position: -94px -94px;
}
.panel-weather .forecast .precis-icon.thunderstorm {
	background-position: -136px -94px;
}
.panel-weather .forecast .precis-icon.chance-snow-fine {
	background-position: -178px -94px;
}
.panel-weather .forecast .precis-icon.chance-snow-cloud {
	background-position: -220px -94px;
}
.panel-weather .forecast .precis-icon.snow-and-rain {
	background-position: -262px -94px;
}
.panel-weather .forecast .precis-icon.light-snow {
	background-position: -10px -136px;
}
.panel-weather .forecast .precis-icon.snow {
	background-position: -52px -136px;
}
.panel-weather .forecast .precis-icon.heavy-snow {
	background-position: -94px -136px;
}
.panel-weather .forecast .precis-icon.wind {
	background-position: -136px -136px;
}
.panel-weather .forecast .precis-icon.frost {
	background-position: -178px -136px;
}
.panel-weather .forecast .precis-icon.fog {
	background-position: -220px -136px;
}
.panel-weather .forecast .precis-icon.hail {
	background-position: -262px -136px;
}
.panel-weather .forecast .precis-icon.dust {
	background-position: -10px -178px;
}
.panel-weather .forecast .max-min {
	color: #fff;
	list-style-type: none;
	width: 100%;
	padding: 0;
	margin: 6px 0;
}
.panel-weather .forecast .max-min:after {
	content: '';
	display: block;
	clear: both;
}
.panel-weather .forecast .max-min::after {
	content: '';
	display: block;
	clear: both;
}
.panel-weather .forecast .max-min li {
		background-image: -webkit-linear-gradient(top,rgba(255,255,255,.3),rgba(255,255,255,0));
		background-image: -moz-linear-gradient(top,rgba(255,255,255,.3),rgba(255,255,255,0));
	background-image: linear-gradient(top,rgba(255,255,255,.3),rgba(255,255,255,0));
		-webkit-background-clip: padding-box;
		-moz-background-clip: padding-box;
	background-clip: padding-box;
	border: 1px solid rgba(0,0,0,.4);
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 50%;
	padding: 0 6px;
	float: left;
}
.panel-weather .forecast .max-min .min {
	background-color: #226be4;
	border-radius: 2px 0 0 2px;
}
.panel-weather .forecast .max-min .max {
	background-color: #f33;
	border-left: none;
	border-radius: 0 2px 2px 0;
}
.primary .forecast .short-precis {
	display: block;
	font-weight: normal;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
/* @end */

/* @group tides */
.primary .panel-tides {
	background: #fbffff url(../../bundles/willyweatherwebapp/images/widgets/bgs-large.jpg) 50% -635px;
}
.panel-tides .graph {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 216px;
}
.panel-tides .graph::after {
	content: '';
}
.panel-tides .graph .shine {
	position: absolute;
	top: -1px;
	bottom: -1px;
	left: 50%;
		background-image: -webkit-linear-gradient(130deg,rgba(255,255,255,0) 50%,rgba(255,255,255,.3) 50%,rgba(255,255,255,.3) 50.5%,rgba(255,255,255,.2) 50%);
		background-image: -moz-linear-gradient(130deg,rgba(255,255,255,0) 50%,rgba(255,255,255,.3) 50%,rgba(255,255,255,.3) 50.5%,rgba(255,255,255,.2) 50%);
	background-image: linear-gradient(320deg,rgba(255,255,255,0) 50%,rgba(255,255,255,.3) 50%,rgba(255,255,255,.3) 50.5%,rgba(255,255,255,.2) 50%);
	width: 800px;
	margin-left: -400px;
	z-index: 2;
}
.panel-tides .graph .clock {
	position: absolute;
	top: 50%;
	left: 50%;
	background: url(../../bundles/willyweatherwebapp/images/widgets/sprite.png) -132px -530px;
	width: 189px;
	height: 189px;
	margin: -94.5px 0 0 -94.5px;
	z-index: 3;
}
.panel-tides .graph .clock .tick {
	position: absolute;
	/*background: rgba(255,0,0,.1);*/
	font-size: 11px;
	font-weight: bold;
	font-style: normal;
	text-align: center;
	text-transform: uppercase;
	text-shadow:
		0 0 3px rgba(255,255,255,.8),
		0 0 3px rgba(255,255,255,.8),
		0 0 3px rgba(255,255,255,.8),
		0 0 3px rgba(255,255,255,.8),
		0 0 3px rgba(255,255,255,.8),
		0 0 3px rgba(255,255,255,.8);
	width: 50px;
	margin-top: -9px;
}
.panel-tides .graph .clock .tick.high {
	left: 50%;
	color: #226be4;
	margin-left: -25px;
}
.panel-tides .graph .clock .tick.low {
	right: 50%;
	color: #f33;
	margin-right: -25px;
}
.panel-tides .graph .clock .tick.high-00,
.panel-tides .graph .clock .tick.low-00 {
	font-size: 10px;
}
.panel-tides .graph .clock .tick.high-05 {
	top: 82%;
	margin-left: -60px;
}
.panel-tides .graph .clock .tick.high-04 {
	top: 68.5%;
	margin-left: -85px;
}
.panel-tides .graph .clock .tick.high-03 {
	top: 50%;
	margin-left: -94px;
}
.panel-tides .graph .clock .tick.high-02 {
	top: 31.5%;
	margin-left: -85px;
}
.panel-tides .graph .clock .tick.high-01 {
	top: 19%;
	margin-left: -60px;
}
.panel-tides .graph .clock .tick.high-00 {
	top: 25px;
}
.panel-tides .graph .clock .tick.low-05 {
	top: 19%;
	margin-right: -60px;
}
.panel-tides .graph .clock .tick.low-04 {
	top: 31.5%;
	margin-right: -85px;
}
.panel-tides .graph .clock .tick.low-03 {
	top: 50%;
	margin-right: -94px;
}
.panel-tides .graph .clock .tick.low-02 {
	top: 68.5%;
	margin-right: -85px;
}
.panel-tides .graph .clock .tick.low-01 {
	top: 82%;
	margin-right: -60px;
}
.panel-tides .graph .clock .tick.low-00 {
	top: 164px;
}

.panel-tides .graph .hand {
	position: absolute;
	top: 50%;
	left: 50%;
	background: url(../../bundles/willyweatherwebapp/images/widgets/sprite.png) -151px -114px;
	width: 141px;
	height: 141px;
	margin: -70.5px 0 0 -70.5px;
		/*-webkit-transform-origin: center;
		-moz-transform-origin: center;
		-ms-transform-origin: center;
	transform-origin: center;
		-webkit-transition: all 1s ease-out;
		-moz-transition: all 1s ease-out;
		-ms-transition: all 1s ease-out;
	transition: all 1s ease-out;*/
	z-index: 4;
}
.panel-tides .graph canvas {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -70.5px 0 0 -70.5px;
	z-index: 4;
}
.panel-tides .graph .wave {
	background: url(../../bundles/willyweatherwebapp/images/widgets/sprite.png) 100px bottom repeat-x;
	position: absolute;
	right: -1px;
	bottom: -141px;
	left: -1px;
	height: 151px;
	z-index: 1;
		-webkit-animation: wave 6s linear;
		-moz-animation: wave 6s linear;
		-ms-animation: wave 6s linear;
	animation: wave 6s linear;
		-webkit-transition: all 1s ease-out;
		-moz-transition: all 1s ease-out;
		-ms-transition: all 1s ease-out;
	transition: all 1s ease-out;
}
.panel-tides.init .graph .wave {
	bottom: -51px;
}
.panel-tides.init .graph .wave.low {
	bottom: -91px;
}
.panel-tides.init .graph .wave.high {
	bottom: -1px;
}
/* @end */

/* @group moon */
.primary .panel-moonphases {
	background: #171618 url(../../bundles/willyweatherwebapp/images/widgets/bgs-large.jpg) 50% -1px;
	color: #fff;
}
.panel-moonphases .hero {
	position: relative;
	padding: 0;
	height: 237px;
}
.panel-moonphases .hero h1 {
	position: relative;
	font-size: 12px;
	text-align: center;
	padding: 195px 0 1px;
	margin: 0;
}
.panel-moonphases .hero h1::before,
.panel-moonphases .hero h1::after {
	content: '';
	position: absolute;
	right: 0;
	left: 0;
	height: 1px;
}
.panel-moonphases .hero h1::before {
	bottom: -1px;
		background: -webkit-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,.2) 10%,rgba(0,0,0,.2) 90%,rgba(0,0,0,0));
		background: -moz-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,.2) 10%,rgba(0,0,0,.2) 90%,rgba(0,0,0,0));
		background: -ms-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,.2) 10%,rgba(0,0,0,.2) 90%,rgba(0,0,0,0));
	background: linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,.2) 10%,rgba(0,0,0,.2) 90%,rgba(0,0,0,0));
}
.panel-moonphases .hero h1::after {
	bottom: 0;
		background: -webkit-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,.2) 10%,rgba(255,255,255,.2) 90%,rgba(255,255,255,0));
		background: -moz-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,.2) 10%,rgba(255,255,255,.2) 90%,rgba(255,255,255,0));
		background: -ms-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,.2) 10%,rgba(255,255,255,.2) 90%,rgba(255,255,255,0));
	background: linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,.2) 10%,rgba(255,255,255,.2) 90%,rgba(255,255,255,0));
}
.panel-moonphases .hero p {
	text-align: center;
	margin: 0;
}
.panel-moonphases .hero time {
	font-weight: bold;
}

.panel-moonphases .hero .moon-phase {
	position: absolute;
	top: 50%;
	left: 50%;
	background: url(../../bundles/willyweatherwebapp/images/widgets/sprite.png) -10px -1141px;
	border-radius: 50%;
		-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.3);
		-moz-box-shadow: 0 1px 3px rgba(0,0,0,.3);
		-ms-box-shadow: 0 1px 3px rgba(0,0,0,.3);
	box-shadow: 0 1px 3px rgba(0,0,0,.3);
	width: 176px;
	height: 176px;
	margin: -108px 0 0 -88px;
	overflow: hidden;
}
.panel-moonphases .hero .moon-phase .fill {
	position: absolute;
	top: 50%;
	right: 100%;
	background: #000;
		-webkit-box-shadow: 0 0 5px #000;
		-moz-box-shadow: 0 0 5px #000;
		-ms-box-shadow: 0 0 5px #000;
	box-shadow: 0 0 5px #000;
	border-radius: 50%;
	width: 276px;
	height: 276px;
	margin-top: -138px;
		-webkit-transition: all 1s ease;
		-moz-transition: all 1s ease;
		-ms-transition: all 1s ease;
	transition: all 1s ease;
	z-index: 1;
}
.panel-moonphases .hero .moon-phase.waning .fill {
	right: 100%;
}
.panel-moonphases .hero .moon-phase.waxing .fill {
	left: 0;
}
.panel-moonphases.init .hero .moon-phase .mask {
	position: absolute;
	top: 0;
	left: 0;
	background: url(../../bundles/willyweatherwebapp/images/widgets/sprite.png) -10px -955px;
	width: 100%;
	height: 100%;
	z-index: 2;
}

.panel-moonphases .data-stack > div {
	padding-right: 20px;
	padding-left: 20px;
}
.panel-moonphases .data-stack .icon {
	position: absolute;
	top: 50%;
	left: -2px;
	background: url(../../bundles/willyweatherwebapp/images/widgets/sprite.png);
	border-radius: 9px;
	width: 16px;
	height: 16px;
	margin-top: -8px;
}
.panel-moonphases .data-stack + .data-stack .icon {
	right: -2px;
	left: auto;
}
.panel-moonphases .data-stack .full .icon {
	background-position: -10px -400px;
}
.panel-moonphases .data-stack .first-quarter .icon {
	background-position: -36px -400px;
}
.panel-moonphases .data-stack .new .icon {
	background-position: -63px -400px;
}
.panel-moonphases .data-stack .last-quarter .icon {
	background-position: -88px -400px;
}
.panel-moonphases .forecast table,
.panel-moonphases .forecast tbody,
.panel-moonphases .forecast tr,
.panel-moonphases .forecast td {
	display: block;
}

/* @end */

/* @group uv */
.primary .panel-uv {
	background: #ffa6a6 url(../../bundles/willyweatherwebapp/images/widgets/bgs-large.jpg) 50% -854px;
	text-align: center;
	color: rgba(0,0,0,.6);
}
.panel-uv .graph {
	position: absolute;
	top: -1px;
	right: -1px;
	left: -1px;
	box-shadow: none !important;
	height: 151px;
}
.panel-uv .graph h1 {
	position: relative;
	font-size: 12px;
	padding: 7px 0 1px;
	margin: 0;
}
.panel-uv h1::before,
.panel-uv h1::after {
	content: '';
	position: absolute;
	right: 0;
	left: 0;
	height: 1px;
}
.panel-uv h1::before {
	bottom: 0;
		background: -webkit-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,.2) 10%,rgba(0,0,0,.2) 90%,rgba(0,0,0,0));
		background: -moz-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,.2) 10%,rgba(0,0,0,.2) 90%,rgba(0,0,0,0));
		background: -ms-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,.2) 10%,rgba(0,0,0,.2) 90%,rgba(0,0,0,0));
	background: linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,.2) 10%,rgba(0,0,0,.2) 90%,rgba(0,0,0,0));
}
.panel-uv h1::after {
	bottom: -1px;
		background: -webkit-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,.2) 10%,rgba(255,255,255,.2) 90%,rgba(255,255,255,0));
		background: -moz-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,.2) 10%,rgba(255,255,255,.2) 90%,rgba(255,255,255,0));
		background: -ms-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,.2) 10%,rgba(255,255,255,.2) 90%,rgba(255,255,255,0));
	background: linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,.2) 10%,rgba(255,255,255,.2) 90%,rgba(255,255,255,0));
}
.panel-uv .graph p {
	margin: 0;
}
.panel-uv .graph time {
	font-weight: bold;
}
.panel-uv .graph .uv-line {
	position: absolute;
	bottom: -30px;
	left: 50%;
	background: url(../../bundles/willyweatherwebapp/images/widgets/uv-lines-large.png);
	width: 800px;
	height: 151px;
	margin-left: -400px;
	opacity: 0;
		-webkit-transition: all .3s ease-out;
		-moz-transition: all .3s ease-out;
		-ms-transition: all .3s ease-out;
	transition: all .3s ease-out;
}
.panel-uv .graph .uv-line.low {
	background-position: 50% 0;
}
.panel-uv .graph .uv-line.low + .label {
	bottom: 13px;
}
.panel-uv .graph .uv-line.moderate {
	background-position: 50% -151px;
}
.panel-uv .graph .uv-line.moderate + .label {
	bottom: 34px;
}
.panel-uv .graph .uv-line.high {
	background-position: 50% -302px;
}
.panel-uv .graph .uv-line.high + .label {
	bottom: 53px;
}
.panel-uv .graph .uv-line.very-high {
	background-position: 50% -453px;
}
.panel-uv .graph .uv-line.very-high + .label {
	bottom: 69px;
}
.panel-uv .graph .uv-line.extreme {
	background-position: 50% -604px;
}
.panel-uv .graph .uv-line.extreme + .label {
	bottom: 52px;
}
.panel-uv.init .graph .uv-line {
	bottom: 0;
	opacity: 1;
}
.panel-uv .graph .label {
	left: 50%;
	opacity: 0;
		-webkit-transition: opacity .3s ease-out;
		-moz-transition: opacity .3s ease-out;
		-ms-transition: opacity .3s ease-out;
	transition: opacity .3s ease-out;
}
.panel-uv.init .graph .label {
	opacity: 1;
}
.panel-uv .graph .label em {
	font-style: normal;
}
.panel-uv .forecast-wrapper {
	max-height: 226px;
	overflow-y: auto;
}
.panel-uv .forecast {
	display: table;
	position: relative;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
	box-sizing: border-box;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
	box-shadow: none;
	padding: 0 1px;
}
.panel-uv .forecast::after {
	display: none;
}
.panel-uv .forecast li {
	border-color: #333;
	border-radius: 0 !important;
	padding-bottom: 0;
}
.panel-uv .forecast table td {
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#88FFFFFF',endColorstr='#44FFFFFF',GradientType=0);
		background-image: -webkit-linear-gradient(top,rgba(255,255,255,.5),rgba(255,255,255,.3));
		background-image: -moz-linear-gradient(top,rgba(255,255,255,.5),rgba(255,255,255,.3));
		background-image: -ms-linear-gradient(top,rgba(255,255,255,.5),rgba(255,255,255,.3));
	background-image: linear-gradient(top,rgba(255,255,255,.5),rgba(255,255,255,.43));
}
.panel-uv .forecast table tr:last-child td {
	padding-bottom: 3px;
}
.panel-uv .forecast table td.low {
	background-color: #4da64d;
	color: #060;
}
.panel-uv .forecast table td.moderate {
	background-color: #ffff4d;
	color: #f3bc21;
}
.panel-uv .forecast table td.high {
	background-color: #ffC04d;
	color: #e28130;
}
.panel-uv .forecast table td.very-high {
	background-color: #ff4d4d;
	color: #c00;
}
.panel-uv .forecast table td.extreme {
	background-color: #f3a8f3;
	color: #f39;
}
.panel-uv .forecast table td span {
	font-weight: bold;
	line-height: 10px;
}
.panel-uv .forecast .day-1 table::after {
	content: '';
	position: absolute;
	top: 36px;
	right: 1px;
	bottom: 0;
	left: 1px;
	border-radius: 2px;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
}	
.panel-uv .forecast .day-1 table tr:first-child td {
	border-top-left-radius: 2px;
}
.panel-uv .forecast .day-1 table tr:last-child td {
	border-bottom-left-radius: 2px;
}
.panel-uv .forecast .day-7 table tr:first-child td {
	border-top-right-radius: 2px;
}
.panel-uv .forecast .day-7 table tr:last-child td {
	border-bottom-right-radius: 2px;
}
/* @end */

/* @group rainfall */
.primary .panel-rainfall {
	background: url(../../bundles/willyweatherwebapp/images/widgets/bgs-large.jpg) 50% -248px;
	padding: 0;
}
.panel-rainfall .forecast-wrapper {
	background: none !important;
	filter: none !important;
	height: 313px;
	max-height: inherit;
	padding: 2px;
}
.panel-rainfall .forecast {
	background: none !important;
	filter: none !important;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		-ms-box-shadow: none;
	box-shadow: none;
	color: #666 !important;
	color: rgba(0,0,0,.6) !important;
	overflow: visible;
}
.panel-rainfall .forecast li {
	background: none !important;
	border: none !important;
	padding: 2px;
}
.panel-rainfall .forecast time {
	border: 1px solid #aaa;
	border-color: rgba(0,0,0,.2);
	border-radius: 2px 2px 0 0;
	margin: 0;
}
.panel-rainfall .forecast time::after {
	display: none;
}
.panel-rainfall .forecast .data {
	position: relative;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#11000000',endColorstr='#11000000',GradientType=0);
	background: rgba(0,0,0,.1);
	border: 1px solid #aaa;
	border-color: rgba(0,0,0,.2);
	border-top: none;
	border-radius: 0 0 2px 2px;
	text-align: center;
	height: 279px;
}
.panel-rainfall .forecast .data:after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	background: url(../../bundles/willyweatherwebapp/images/widgets/sprite.png) -351px -7px;
	width: 16px;
	z-index: 1;
}
.panel-rainfall .forecast .probability .data:after {
	display: none;
}

.panel-rainfall .forecast p {
	position: relative;
	padding: 4px 2px 0;
	margin: 0;
	opacity: 0;
	z-index: 2;
		-webkit-transition: opacity .3s ease-out;
		-moz-transition: opacity .3s ease-out;
		-ms-transition: opacity .3s ease-out;
	transition: opacity .3s ease-out;
}
.panel-rainfall.init .forecast p {
	opacity: 1;
}
.panel-rainfall .forecast p span {
	position: relative;
	display: block;
	line-height: 14px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.panel-rainfall .forecast .fill {
	position: absolute;
	right: -1px;
	bottom: -1px;
	left: -1px;
	background: #226be4;
		background-image: -webkit-linear-gradient(top,rgba(255,255,255,.2),rgba(255,255,255,0) 30px);
		background-image: -moz-linear-gradient(top,rgba(255,255,255,.2),rgba(255,255,255,0) 30px);
		background-image: -ms-linear-gradient(top,rgba(255,255,255,.2),rgba(255,255,255,0) 30px);
	background-image: linear-gradient(top,rgba(255,255,255,.2),rgba(255,255,255,0) 30px);
		-webkit-box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
		-moz-box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
		-ms-box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
	border-radius: 0 0 2px 2px;
	height: 1px;
		-webkit-transition: height .3s ease;
		-moz-transition: height .3s ease;
		-ms-transition: height .3s ease;
	transition: height .3s ease;
}
/* @end */

/* @group sun */
.primary .panel-sunrisesunset {
	background: url(../../bundles/willyweatherwebapp/images/widgets/bgs-large.jpg) 50% -2549px;
}
.primary .panel-sunrisesunset.set {
	background: url(../../bundles/willyweatherwebapp/images/widgets/bgs-large.jpg) 50% -2768px;
}
.panel-sunrisesunset .graph {
	position: absolute;
	top: 0;
	left: 50%;
	width: 336px;
	height: 168px;
	padding: 45px 20px 0;
	margin-left: -188px;
	overflow: hidden;
}
.panel-sunrisesunset .graph::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
		background: -webkit-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,.2) 10%,rgba(0,0,0,.2) 90%,rgba(0,0,0,0));
		background: -moz-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,.2) 10%,rgba(0,0,0,.2) 90%,rgba(0,0,0,0));
		background: -ms-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,.2) 10%,rgba(0,0,0,.2) 90%,rgba(0,0,0,0));
	background: linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,.2) 10%,rgba(0,0,0,.2) 90%,rgba(0,0,0,0));
	height: 1px;
	z-index: 6;
}
.panel-sunrisesunset .graph .arc {
	position: relative;
	background: #fff;
	background: rgba(255,255,255,.5);
	border-radius: 50%;
	width: 336px;
	height: 336px;
	overflow: hidden;
	z-index: 1;
	behavior: url(https://cdnres.willyweather.com/js/widgets/PIE.php);
}
.panel-sunrisesunset .graph .arc::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border: 4px solid rgba(0,0,0,.6);
	border-radius: 50%;
		-webkit-box-shadow: 0 0 0 10px rgba(0,0,0,.6);
		-moz-box-shadow: 0 0 0 10px rgba(0,0,0,.6);
		-ms-box-shadow: 0 0 0 10px rgba(0,0,0,.6);
	box-shadow: 0 0 0 10px rgba(0,0,0,.6);
	z-index: 3;
}
.panel-sunrisesunset .graph .arc .fill {
	background-color: #ffd638;
		background-image: -webkit-linear-gradient(top,rgba(255,255,255,.2),rgba(255,255,255,0));
		background-image: -moz-linear-gradient(top,rgba(255,255,255,.2),rgba(255,255,255,0));
		background-image: -ms-linear-gradient(top,rgba(255,255,255,.2),rgba(255,255,255,0));
	background-image: linear-gradient(top,rgba(255,255,255,.2),rgba(255,255,255,0));
		-webkit-box-shadow:
			inset -1px 0 0 #efa336,
			1px 0 0 0 #efa336;
		-moz-box-shadow:
			inset -1px 0 0 #efa336,
			1px 0 0 0 #efa336;
		-ms-box-shadow:
			inset -1px 0 0 #efa336,
			1px 0 0 0 #efa336;
	box-shadow:
		inset -1px 0 0 #efa336,
		1px 0 0 0 #efa336;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
	box-sizing: border-box;
	width: 336px;
	height: 326px;
	margin-right: 336px;
	float: right;
		-webkit-transition: margin .3s ease-out;
		-moz-transition: margin .3s ease-out;
		-ms-transition: margin .3s ease-out;
	transition: margin .3s ease-out;
	z-index: 2;
}
.panel-sunrisesunset .graph .sun {
	position: absolute;
	background: url(../../bundles/willyweatherwebapp/images/widgets/sprite.png) -93px -275px;
	width: 32px;
	height: 32px;
	margin: 0 0 -16px 172px;
	opacity: 0;
	z-index: 40;
}
.panel-sunrisesunset.init .graph .sun {
		-webkit-animation: pop .3s ease-in;
		-moz-animation: pop .3s ease-in;
		-ms-animation: pop .3s ease-in;
	animation: pop .3s ease-in;
	opacity: 1;
}
.panel-sunrisesunset .graph .sun .label {
	top: -20px;
	left: 50%;
	width: 36px;
	padding: 0;
	margin-left: -18px;
}
/* @end */

/* @group wind */
.primary .panel-wind {
	background-color: #eee;
		background-image: -webkit-linear-gradient(top,rgba(255,255,255,.6),rgba(255,255,255,.8));
		background-image: -moz-linear-gradient(top,rgba(255,255,255,.6),rgba(255,255,255,.8));
		background-image: -ms-linear-gradient(top,rgba(255,255,255,.6),rgba(255,255,255,.8));
	background-image: linear-gradient(top,rgba(255,255,255,.6),rgba(255,255,255,.8));
}
.panel-wind .real-time {
	position: absolute;
	top: -1px;
	right: -1px;
	left: -1px;
	background: url(../../bundles/willyweatherwebapp/images/widgets/bgs-large.jpg) 50% -2986px;
	border-bottom: 1px solid #666;
	border-bottom-color: rgba(0,0,0,.6);
	height: 81px;
}
.panel-wind .spinner {
	position: relative;
	display: block;
	background: url(../../bundles/willyweatherwebapp/images/widgets/sprite.png) -13px -39px;
		-webkit-box-shadow: 0 1px 2px rgba(255,255,255,.2);
		-moz-box-shadow: 0 1px 2px rgba(255,255,255,.2);
		-ms-box-shadow: 0 1px 2px rgba(255,255,255,.2);
	box-shadow: 0 1px 2px rgba(255,255,255,.2);
	border-radius: 31px;
	width: 62px;
	height: 62px;
	margin: 9px auto 4px;
}
.panel-wind .spinner span {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.panel-wind .spinner .fan {
	background: url(../../bundles/willyweatherwebapp/images/widgets/sprite.png) -91px -39px;
		-webkit-animation: spin 0s infinite linear;
		-moz-animation: spin 0s infinite linear;
	animation: spin 0s infinite linear;
	z-index: 1;
}
.panel-wind .spinner .shield {
	background: url(../../bundles/willyweatherwebapp/images/widgets/sprite.png) -169px -39px;
		z-index: 2;
}
/* @end */

/* @group swell */
.primary .panel-swell {
	background-color: #eee;
		background-image: -webkit-linear-gradient(top,rgba(255,255,255,.6),rgba(255,255,255,.8));
		background-image: -moz-linear-gradient(top,rgba(255,255,255,.6),rgba(255,255,255,.8));
		background-image: -ms-linear-gradient(top,rgba(255,255,255,.6),rgba(255,255,255,.8));
	background-image: linear-gradient(top,rgba(255,255,255,.6),rgba(255,255,255,.8));
}
.panel-swell .real-time {
	position: absolute;
	top: -1px;
	right: -1px;
	left: -1px;
	background: url(../../bundles/willyweatherwebapp/images/widgets/bgs-large.jpg) 50% -3127px;
	border-bottom: 1px solid #666;
	border-bottom-color: rgba(0,0,0,.6);
	height: 81px;
}
/* @end */

/* @group footer */

.secondary .more {
	position: relative;
	display: table;
	border-radius: 2px;
	width: 100%;
	padding: 0;
	margin-bottom: 2px;
	}
.secondary .more a {
	display: table-cell;
		background-image: -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.1));
		background-image: -moz-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.1));
		background-image: -ms-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.1));
	background-image: linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.1));
	border: 1px solid #ccc;
	border-color: rgba(0,0,0,.2);
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
	box-sizing: border-box;
	color: #fff;
	color: rgba(255,255,255,.8);
	text-align: center;
	text-decoration: none;
	width: 25%;
	padding: 2px 3px;
	cursor: pointer;
	}
.secondary .more a:first-child {
	border-radius: 2px 0 0 2px;
	}
.secondary .more a:last-child {
	border-radius: 0 2px 2px 0;
	}
.secondary .more a + a {
	border-left: none;
	}
.secondary .more a:active {
	background-color: rgba(0,0,0,.1);
		background-image: -webkit-linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0));
		background-image: -moz-linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0));
		background-image: -ms-linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0));
	background-image: linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0));
	}
.secondary footer {
	display: block;
	color: #fff;
	color: rgba(255,255,255,.8);
	padding: 2px 0 3px;
}
.secondary footer:after {
	content: '';
	display: block;
	clear: both;
}
.secondary footer::after {
	content: '';
	display: block;
	clear: both;
}
.secondary footer time,
.secondary footer small {
	font-weight: normal;
	font-size: 12px;
	line-height: 14px;
	height: 14px;
	float: left;
}
.secondary footer time strong {
	line-height: 13px;
}
.secondary footer time em {
	font-style: normal;
}
.secondary footer small {
	position: relative;
	padding-right: 17px;
	float: right;
}
.secondary footer .logo {
	position: absolute;
	top: 50%;
	right: 0;
	background: url(../../bundles/willyweatherwebapp/images/widgets/sprite.png) -38px -12px;
	width: 12px;
	height: 12px;
	margin-top: -6px;
}
.secondary footer .logo.light {
	background-position: -12px -12px;
}
/* @end */

/* @group closest-locations */
.closest-locations {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #fff;
	padding: 4px;
	overflow-y: auto;
}
.closest-locations h2 {
	font-size: 12px;
	text-align: center;
	margin: 0;
}
.closest-locations p {
	text-align: center;
	margin: 6px 0;
}
.closest-locations ul {
	padding: 0;
	margin: 0;
}
.closest-locations ul li {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;	
}
.closest-locations ul a {
	display: block;
	color: #226be4;
	cursor: pointer;
}
.closest-locations ul a em {
	display: inline-block;
	font-style: normal;
	color: #aaa;
	text-align: right;
	width: 50px;
	padding-right: 6px;
}
/* @end */

/* @group responsiveness */

@media screen and (max-width: 666px) {
	.primary .forecast li.day-7 {
		display: none;
	}
}

@media screen and (max-width: 533px) {
	.primary .forecast li.day-6 {
		display: none;
	}
}
@media screen and (max-width: 449px) {
	.primary .forecast li.day-5 {
		display: none;
	}
}

/* @end */

/* @group retina support */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
	form button i,
	.tabs a .icon,
	.direction .icon,
	.primary .panel-weather .precis-icon,
	.panel-weather .forecast .precis-icon,
	.panel-tides .graph .clock,
	.panel-tides .graph .hand,
	.panel-tides .graph .label::before,
	.panel-tides .graph .wave,
	.panel-moonphases .hero ul li::before,
	.panel-moonphases .quarters li em .icon,
	.panel-rainfall .forecast .amount::after,
	.panel-sunrisesunset .graph .sun,
	.panel-sunrisesunset .graph > .label.sunrise::before,
	.panel-sunrisesunset .graph > .label.sunset::before,
	.panel-wind .spinner,
	.panel-wind .spinner .fan,
	.panel-wind .spinner .shield,
	.secondary footer .logo {
		background-image: url(../../bundles/willyweatherwebapp/images/widgets/sprite-2x.png);
			-webkit-background-size: 373px;
			-moz-background-size: 373px;
		background-size: 373px;
	}
	.primary .panel-weather .precis-icon,
	.panel-weather .forecast .precis-icon {
		background-image: url(../../bundles/willyweatherwebapp/images/widgets/sprite-precis-2x.png);
			-webkit-background-size: 306px;
			-moz-background-size: 306px;
		background-size: 306px;
	}
	.primary .panel-weather,
	.primary .panel-tides,
	.primary .panel-moonphases,
	.primary .panel-uv,
	.primary .panel-rainfall,
	.primary .panel-sunrisesunset,
	.primary .panel-sunrisesunset.set {
		background-image: url(../../bundles/willyweatherwebapp/images/widgets/bgs-large-2x.jpg);
			-webkit-background-size: 800px;
			-moz-background-size: 800px;
		background-size: 800px;
	}
	.panel-uv .graph .uv-line {
		background-image: url(../../bundles/willyweatherwebapp/images/widgets/uv-lines-large-2x.png);
			-webkit-background-size: 800px;
			-moz-background-size: 800px;
		background-size: 800px;
	}
	.primary {
		background-image: url(../../bundles/willyweatherwebapp/images/widgets/ui-loader-2x.gif) !important;
			-webkit-background-size: 16px !important;
			-moz-background-size: 16px !important;
		background-size: 16px !important;
	}
}
/* @end */.tabs a {width: 20%;}
		
body, form [type="search"] {font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;}
			
.secondary, form, .primary .forecast-wrapper, .primary .panel-wind, .primary .panel-swell {background-color: #eeeeee;}

.panel-weather .forecast {width: 690px;}

	.primary, .panel-wind .real-time, .panel-swell .real-time, .primary .panel, .primary .graph.plot .scroll-view::before {border-color: #ccc; border-color: rgba(0,0,0,.2);}
	.primary .graph.plot .ticks {background: #eee; background: rgba(0,0,0,.1);}
	form h1, .tabs a, .primary .forecast, .secondary .more a, .secondary footer {color: #444; color: rgba(0,0,0,.6);}
	.primary .forecast {filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33FFFFFF',endColorstr='#33FFFFFF',GradientType=0); background: rgba(255,255,255,.2);}
	.primary .forecast time::after {
			background: -webkit-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,.2) 30%,rgba(0,0,0,.2) 70%,rgba(20,0,0,0));
			background: -moz-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,.2) 30%,rgba(0,0,0,.2) 70%,rgba(20,0,0,0));
			background: -ms-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,.2) 30%,rgba(0,0,0,.2) 70%,rgba(20,0,0,0));
		background: linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,.2) 30%,rgba(0,0,0,.2) 70%,rgba(20,0,0,0));
	}
	.tabs [href="#weather"] .icon {
		background-position: -10px -1332px;
	}
	.tabs [href="#tides"] .icon {
		background-position: -48px -1332px;
	}
	.tabs [href="#wind"] .icon {
		background-position: -86px -1332px;
	}
	.tabs [href="#swell"] .icon {
		background-position: -124px -1332px;
	}
	.tabs [href="#rainfall"] .icon {
		background-position: -162px -1332px;
	}
	.tabs [href="#sunrisesunset"] .icon {
		background-position: -200px -1332px;
	}
	.tabs [href="#moonphases"] .icon {
		background-position: -238px -1332px;
	}
	.tabs [href="#uv"] .icon {
		background-position: -276px -1332px;
	}