<style type="text/css">
svg text {
	font: 14px sans-serif;
	text-anchor: middle
}

svg .caption {
	font: 18px sans-serif;
}

svg .axes {
	stroke: #aaa;
	stroke-width: 0.5px;
	fill: none;
}

svg .labels text {
	letter-spacing: 1px;
	fill: #444;
	font-size: 12px;
}

svg .arcs {
	stroke: #000;
	stroke-width: 0.5px;
}

svg .arctext text {
	font-size: 9px;
}

svg #windrose .arctext {
	fill: #44d;
}

svg #windspeed .arctext {
	fill: #933;
}

svg .calmwind text {
	font-size: 18px;
}

svg text.calmcaption {
	font-size: 12px;
}

svg g.tickmarks>text {
	font-size: 10px;
	fill: #888;
}

.stationname {
	text-transform: capitalize
}

#about {
	width: 500px;
	padding-left: 150px;
}

#copyright {
	font-size: 83%;
	text-align: center;
}

#diagrams {
	/*padding-top: 40px;*/
	padding-bottom: 40px;
}

#links {
	text-align: center;
	padding-bottom: 20px;
}

#links span,#links a {
	padding-left: 8px;
	padding-right: 8px;
}

/* D3 style */
svg {
	font-size: 10px;
}

#spot {
	
}

.spot {
	fill: none;
	stroke-width: 1px;
}

.Dot {
	fill: none;
	stroke-width: 1px;
}

.spotCircle {
	fill: none;
	stroke-opacity: .3;
	stroke-width: 6px;
}

.legend text {
	/*fill: #1F77B4;*/
	/*fill-width: 5px;*/
	/*font-weight:bold;*/
	/*fill-opacity: .2;*/
	/*stroke: #fff;*/
	/*stroke-width: .5px;*/
	/*stroke-position:2;*/
	/*stroke-opacity: .8;*/
	
}

.legend .val,.legend .date {
	text-anchor: end;
}

.legend .Infos {
	text-anchor: middle;
}

.calm {
	fill: #fff;
	stroke: #000;
	stroke-width: 0.5px;
}

.stepPointBox g {
	/*display: none;*/
	/*fill-opacity: .0;*/
	/*visibility: hidden;*/
	
}

.stepPetalsBox {
	/*display: none;*/
	/*fill-opacity: .0;*/
	/*visibility: hidden;*/
	
}

.sensitive {
	/*display: none;*/
	opacity: 0;
	/*visibility: hidden;*/
}

.hoverBox .sensitive:hover+.petals {
	visibility: visible;
	opacity: .8;
	zoom: 2;
	transition: visibility 0s linear;
	-webkit-transition: visibility 0s linear;
	/*shape-rendering: crispEdges;*/
}

.petals {
	fill: #58e;
	stroke: #000;
	stroke-width: 0.5px;
	visibility: hidden;
	opacity: 0.1;
	transition: visibility 0s linear .7s, opacity .6s linear;
	-webkit-transition: visibility 0s linear .7s, opacity .6s linear;
	/*shape-rendering: crispEdges;*/
}

.line {
	fill: none;
	/*stroke: #000;*/
	stroke-width: 1px;
	/*shape-rendering: crispEdges;*/
}

.axis line,.axis path {
	fill: none;
	stroke: #AAA;
	stroke-width: 1px;
	shape-rendering: crispEdges;
}

/*    .arrow:hover>.hair, .arrow:hover>.marker {
        stroke: #E6550D;
        stroke-width: 2px;
    }*/
/*Blue:#1F77B4 #3182bd #6baed6*/
/*Red:#E6550D*/
/*    .hair {
        fill: none;
        stroke: #3182bd;
        stroke-width: 1px;
        shape-rendering: crispEdges;
    }*/
/*    .marker {
        fill: #FFF;
        stroke: #3182bd;
        stroke-width: .7px;
        shape-rendering: crispEdges;
    }*/
.arrow,.arrow>.hair {
	stroke-width: 1px;
}

.arrow:hover,.arrow:hover>.hair {
	stroke-width: 2px;
}

.arrow:hover>.hair2 {
	stroke-width: 10px;
}

/*Blue:#1F77B4 #3182bd #6baed6*/
/*Red:#E6550D*/
.hair {
	fill: none;
}

.hair2 {
	fill: none;
	stroke: #3182bd;
	stroke-width: 5px;
	stroke-opacity: 0;
}

marker polygon {
	fill: #FFF;
}

#TEMP,#FORECAST,#RAIN,#WIND,#BARO,#HUMIDITY,#CURRENT,#SUNMOON,#DEGDAY,#LIGHT,#DON,#UV,#SOIL,#ET,#ALLTIME,#SNOW,#SNOW2,#WINDCHILL,#HEAT,#AQI,#SHORTFCST,#CLOUDIMG,#CLOUD,#SOLAR,#SOLAR2,#BLANK,#OUTLOOK,#ALMANAC,#SWPOOL
	{
	/*background: #ccc;
	border: 1px solid #aaa;*/
	position: absolute
}
.ndisplay {
	display: none
}
#TEMP {
	top: 0px;
	left: 0px;
}

#FORECAST {
	top: 100px;
	left: 182px;
}

#RAIN {
	top: 410px;
	left: 0px;
}

#WIND {
	top: 0px;
	left: 650px;
}

#BARO {
	top: 0px;
	left: 465px;
}

#HUMIDITY {
	top: 0px;
	left: 220px;
}

#CURRENT {
	top: 500px;
	left: 270px;
}

#SUNMOON {
	top: 160px;
	left: 460px;
}

#DEGDAY {
	top: 275px;
	left: 240px;
}

#LIGHT {
	top: 200px;
	left: 270px;
}

#DON {
	top: 320px;
	left: 550px;
}

#UV {
	top: 515px;
	left: 260px;
}

#SOIL {
	top: 520px;
	left: 5px;
}

#SWPOOL {
	top: 726px;
	left: 224px;
}

#ET {
	top: 726px;
	left: 2px;
}

#ALLTIME {
	top: 740px;
	left: 612px;
}

#SNOW {
	top: 370px;
	left: 270px;
}

#SNOW2 {
	top: 400px;
	left: 270px;
}

#WINDCHILL {
	top: 435px;
	left: 760px;
}

#HEAT {
	top: 560px;
	left: 195px;
}

#AQI {
	top: 300px;
	left: 270px;
}

#SHORTFCST {
	top: 735px;
	left: 5px;
}

#CLOUDIMG {
	top: 445px;
	left: 570px;
}

#CLOUD {
	top: 445px;
	left: 570px;
}

#SOLAR {
	top: 382px;
	left: 265px;
}

#SOLAR2 {
	top: 160px;
	left: 195px;
}

#BLANK {
	top: 300px;
	left: 270px;
}

#OUTLOOK {
	top: 300px;
	left: 270px;
}

#ALMANAC {
	top: 320px;
	left: 550px;
}
 
#ZONE_1 {
	/*width: 1000px;*/
	height: 1000px;
	/*background: #ccd;*/
	/*border: 1px solid #aaa;
	top: 5px;
	left: 5px;*/
	position: relative;
	overflow: hidden
}
svg {
    font-size: 10px;
}
#spot {
    
}
.spot {
    fill: none;
    stroke-width: 1px;
}
.Dot {
    fill: none;
    stroke-width: 1px;
}
.spotCircle {
    fill: none;
    stroke-opacity: .3;
    stroke-width: 6px;
}
.legend text {
    /*fill: #1F77B4;*/
    /*fill-width: 5px;*/
    /*font-weight:bold;*/
    /*fill-opacity: .2;*/
    /*stroke: #fff;*/
    /*stroke-width: .5px;*/
    /*stroke-position:2;*/
    /*stroke-opacity: .8;*/
}
.legend .val, .legend .date {
    text-anchor:end;
}
.sensitive {
    opacity: 0;
}
.line {
    fill: none;
    stroke-width: 1px;
}

.axis line,.axis path {
    fill: none;
    stroke: #000;
    stroke-width: 1px;
    shape-rendering: crispEdges;
}
</style>