<?php include_once('livedata.php');?>
   
    <div class="average"><span>Rate</span>
<?php echo "${cumulus[8]}\n";?><span><?php echo "${rainunit}\n"; ?></span>
   </div> 
 <style>   
#container1 {
  height: 170px;
  margin: 0 auto;
  overflow:hidden;
  position: absolute;
  margin-top: -30px;
  width: 210px;
  margin-left:10px;
}

#container1 div { position: absolute; }

.rainvalue {
	font-size:1.1em;
	color:#66a1ba;
	margin-left:30px;
	margin-top:2%;
	line-height:1em;
	font-family: "Helvetica", Arial, "Lucida Grande", sans-serif; font-weight: 600;
}

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

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


.raintext1 {
	font-size:0.5em;
	color:#66a1ba;
	margin-left:0px;
	margin-top:3%;
	font-weight:600;
	line-height:10px;
	font-family:'Helvetica',Arial, Helvetica, sans-serif;
	
}

.raintext1 span{
	color:#df826b;
	font-size:1em;
	
}




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

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

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

#raintoday {
  background-color: #66a1ba;
  border: 1px solid #66a1ba;
  border-radius: 0 0 1px 1px;
  bottom: 0;
  width: 115px;
  margin-left:55px;
  margin-bottom:5px;
 
}

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

.maxrainfallmonth{position:absolute;background:none;border-radius:50%;height:60px;width:60px;padding:5px;float:right;
border:1px solid #777;
-webkit-background-size:cover!important;-moz-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:#676e73;font-family:"Helvetica", Arial;-webkit-font-smoothing:antialiased!important;font-size:0.8em}

.maxrainfallyear{position:absolute;background:none;border-radius:50%;height:60px;width:60px;padding:5px;float:right;
border:1px solid #777;
-webkit-background-size:cover!important;-moz-background-size:cover!important;-ms-background-size:cover!important;background-size:cover!important;margin-top:12px;
margin-left:-7px}
.maxrainfallyear-content{float:left;line-height:1;margin-top:-.9em;padding-top:37%;text-align:center;width:100%;color:#676e73;font-family:"Helvetica", Arial;-webkit-font-smoothing:antialiased!important;font-size:0.8em}

</style>

  
    
<div class="updatedtime"><span><?php echo "${cumulus[0]}";?></span><br /><?php echo "${cumulus[1]}";?></div> 
   <div id="container1"> <div id="beaker">
    <div class="rainvalue"><?php echo "${cumulus[9]} <span>${rainunit}</span>\n" ; 
	if ($cumulus[9] <0.01){echo '<div class=\'norain fade-in norain\'></div>';}
	if ($cumulus[9] >0.01){echo '<div class=\'raintext1\'>measured <span>today</div>';}
	?></div>    
   </div><div id="raintoday"></div></div>  
  
  
  
 <!-- simple jquery barometer donut full circle for homeweather station rain-->

 <div class="maxrainfallmonth">
<div class="maxrainfallmonth-content"><span style='font-weight:700; font-size:11px;color:#ccc;'><?php echo date('M');?></span><br>
<span style='color:#66a1ba;font-weight:700;font-size:11px;'>
<?php echo "${cumulus[19]}\n"; ?><span style='font-size:9px;'><?php echo "${rainunit}\n"; ?><br></span><span style='font-size:10px;color:#df826b;'>total <div class='wi wi-raindrop wi-rotate-45'></div> <div class='wi wi-raindrop wi-rotate-45'></div></span></span>
 
 
 <div class="maxrainfallyear">
<div class="maxrainfallyear-content"><span style='font-weight:700;font-size:11px;color:#ccc;'><?php echo date('Y');?><br>
<span style='color:#66a1ba;font-weight:700;font-size:11px;''>
<?php echo "${cumulus[20]}\n"; ?><span style='font-size:9px;'><?php echo "${rainunit}";?><br></span><span style='font-size:10px;'><span style='font-size:10px;color:#df826b;'>total </span><div class='wi wi-raindrop wi-rotate-45'></div> <div class='wi wi-raindrop wi-rotate-45'></div> </span></span>


</div><div>


        <script>
        $(document).ready(function() {
 
  $('#raintoday') // fill the rain up max 100mm
    .delay(0)
    .animate({
    height :'<?php print $cumulus[9] * 1.5;?>px'
    }, 0); 
  
  });</script>
 