@charset "utf-8";
/* CSS Document */

  #station {
  height: 590px;
  width: 662px;
  text-align :center;
  margin: auto;
  position: relative;
  background-image: url('kasetdisplay.png');
 }

#date {
  
  position: absolute;
  color: white;
  font-size: 20px;
  font-weight: bold;
  left: 130px;
  top: 500px;
  height: 100px;
  width: 180px;

 
  
 
  text-align: center;
 
  display: flex;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */

}
#time {
  
  position: absolute;
  color: white;
  font-size: 20px;
  font-weight: bold;
  left: 310px;
  top: 500px;
  height: 100px;
  width: 180px;

 
  
 
  text-align: center;
 
  display: flex;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */

}	 
 
#temp {
  
  position: absolute;
  color: white;
  font-size: 20px;
  font-weight: bold;
  left: 5px;
  top: 100px;
  height: 100px;
  width: 180px;

 
  
 
  text-align: center;
 
  display: flex;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */

}	 
  
#humid {
  
  position: absolute;
  color: white;
  font-size: 20px;
  font-weight: bold;
  left: 5px;
  top: 280px;
  height: 100px;
  width: 180px;

 
  
 
  text-align: center;
 
  display: flex;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */

}	 
#level {
  
  position: absolute;
  color: white;
  font-size: 20px;
  font-weight: bold;
  left: 230px;
  top: 70px;
  height: 100px;
  width: 180px;

 
  
 
  text-align: center;
 
  display: flex;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */

}


#lux {
  
  position: absolute;
  color: white;
  font-size: 20px;
  font-weight: bold;
  left: 5px;
  top: 420px;
  height: 100px;
  width: 180px;

 
  
 
  text-align: center;
 
  display: flex;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */

}	 


#windspeed {
  
  position: absolute;
  color: white;
  font-size: 30px;
  font-weight: bold;
  left: 450px;
  top: 250px;
  height: 100px;
  width: 180px;

 
  
 
  text-align: center;
 
  display: flex;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */

}	 


#winddirection {
  
  position: absolute;
  color: white;
  font-size: 30px;
  font-weight: bold;
  left: 450px;
  top: 420px;
  height: 100px;
  width: 180px;

 
  
 
  text-align: center;
 
  display: flex;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */

}	 

#rain {
  
  position: absolute;
  color: white;
  font-size: 20px;
  font-weight: bold;
  left: 450px;
  top: 70px;
  height: 100px;
  width: 180px;

 
  
 
  text-align: center;
 
  display: flex;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */

}	 



       #map-canvas { 

    width:90%;  
    height:500px;
    margin:20px 20px 20px auto;  
    
    }
     #nav1 {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px; 
	 }

	 #data {
  
   
  height: 255px;
  width: 100%;
  text-align :center;

 }
	 
	 
	 
	 #container {
  height: 535px;
  width: 978px;
  text-align :center;
  margin: auto;
  position: relative;
  background-image: url('kaset01.png');
 }

#datetime {
  
  position: absolute;
  color: black;
  font-size: 20px;
  font-weight: bold;
  left: 290px;
  top: -20px;
  height: 100px;
  width: 180px;

 
  
 
  text-align: center;
 
  display: flex;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */

}


 
#level1 {
  
  position: absolute;
  color: white;
  font-size: 20px;
  font-weight: bold;
  left: 475px;
  top: 115px;
  height: 100px;
  width: 180px;

 
  
 
  text-align: center;
 
  display: flex;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */

}
#level2 {
  
  position: absolute;
  color: white;
  font-size: 20px;
  font-weight: bold;
  left: 625px;
  top: 115px;
  height: 100px;
  width: 180px;

 
  
 
  text-align: center;
 
  display: flex;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */

}	 
 
#level3 {
  
  position: absolute;
  color: white;
  font-size: 20px;
  font-weight: bold;
  left: 50px;
  top: 420px;
  height: 100px;
  width: 180px;

 
  
 
  text-align: center;
 
  display: flex;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */

}	 
  
#moisture1 {
  
  position: absolute;
  color: white;
  font-size: 20px;
  font-weight: bold;
  left: 775px;
  top: 95px;
  height: 100px;
  width: 180px;

 
  
 
  text-align: center;
 
  display: flex;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */

}	 
#moisture2 {
  
  position: absolute;
  color: white;
  font-size: 20px;
  font-weight: bold;
  left: 775px;
  top: 130px;
  height: 100px;
  width: 180px;

 
  
 
  text-align: center;
 
  display: flex;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */

}	 


#moisture3 {
  
  position: absolute;
  color: white;
  font-size: 20px;
  font-weight: bold;
  left: 50px;
  top: 240px;
  height: 100px;
  width: 180px;

 
  
 
  text-align: center;
 
  display: flex;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */

}	 
#moisture4 {
 
  position: absolute;
  color: white;
  font-size: 20px;
  font-weight: bold;
  left: 50px;
  top: 275px;
  height: 100px;
  width: 180px;
  text-align: center;
 
  display: flex;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */

}	 


div.img {
    
    width: 180px;
	position: absolute;
	left: 290px;
    top: 50px;
     font-size: 30px;
  font-weight: bold;
  text-align: center;
 
 
  
}
div.img:hover {
	
    border: 1px solid #777;
}

div.img img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
	position: absolute;
	left : 200px;
	top: 155px;
	 font-size: 30px;
  font-weight: bold;
}