@charset "utf-8";

/* -------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------
	RADAR Channel
	
	new released : October 17, 2011
	update : 

	Copyright(c)WEATHER NEWS INC. ALL RIGHT RESERVED.
----------------------------------------------------------------------------------------
------------------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------------------
  BASIS
------------------------------------------------------------------------------------- */
#cnt-location { font-size: 16px; color: #0026a0; font-weight: bold; text-align: center; padding-bottom: 5px; border-bottom: dotted 1px; }
#cnt-set { width: 95%; margin:0 auto;position:relative; }
#cnt-str { width: 15%; float: left; padding-top: 40px; font-size: 16px; }
#cnt-digit { width: 70%; background: #000; margin: 0 auto; float: left; }
#cnt-digit>div { padding: 2%; position: relative; }
#cnt-digit p {
	width: 49.5%;
	text-align: center;
	font: 6em/1.1 "ヒラギノ角ゴ ProN W3","HiraKakuProN-W3";
	color: #fff;
	background: #484848;
	background: -webkit-gradient(linear, left top, left bottom, from(#505050), color-stop(20%, #191919), color-stop(49%, #505050), color-stop(50%, #e8e8e8), color-stop(51%, #505050), color-stop(80%, #191919), to(#505050));
	background: -webkit-linear-gradient(top, #505050, #191919 20%, #505050 49%, #e8e8e8 50%, #505050 51%, #191919 80%, #505050);
	background: -moz-linear-gradient(top, #505050, #191919 20%, #505050 49%, #e8e8e8 50%, #505050 51%, #191919 80%, #505050);
	background: -ms-linear-gradient(top, #505050, #191919 20%, #505050 49%, #e8e8e8 50%, #505050 51%, #191919 80%, #505050);
	background: -o-linear-gradient(top, #505050, #191919 20%, #505050 49%, #e8e8e8 50%, #505050 51%, #191919 80%, #505050);
	background: linear-gradient(top, #505050, #191919 20%, #505050 49%, #e8e8e8 50%, #505050 51%, #191919 80%, #505050);
	
}
#cnt-digit p:nth-child(1){float:left;} #cnt-digit p:nth-child(2){float:right;}
#cnt-digit p:after {
	content: "";
	width: 96.5%;
	height: 1px;
	background: #242424;
	position: absolute;
	top: 49.5%;
	left: 2%;
	-moz-box-shadow: 0 0px 2px rgba(0, 0, 0, 0.8);
	-webkit-box-shadow: 0 0px 2px rgba(0, 0, 0, 0.8);
	box-shadow: 0 0px 2px rgba(0, 0, 0, 0.8);
	
}
#cnt-m {width: 15.5%;font-size: 20px;line-height: 40px;text-align: center;color: #fff;position: absolute;bottom: 0;right: 0;
	background: #000;
	background: -webkit-gradient(linear, left top, left bottom, from(#505050), color-stop(80%, #191919), to(#505050));
	background: -webkit-linear-gradient(top,#505050,#191919 80%,#505050);
	background: -moz-linear-gradient(top,#505050,#191919 80%,#505050);
	background: -ms-linear-gradient(top,#505050,#191919 80%,#505050);
	background: -o-linear-gradient(top,#505050,#191919 80%,#505050);
}

.cnt-bg-wht { padding: 5px 0px; }
#time-control { padding: 5px; }
#gps-button { padding: 0px; }
#countdown-button { margin: 10px auto 0px; }

#timestamp {
  position: absolute;
  height: 18px;
  bottom: 20px;
  right:  25px;
  z-index: 5;
  font-size: 13pt;
  font-weight: bold;
  text-align: center;
  padding: 5px;
  background-color: rgb(30%,30%,30%);
  background-color: rgba(0,0,0,0.5);
  border-radius: 5px;
}

.obs {
  color: white;
  width: 55px;
}

.fcst {
  color: orange;
  width: 100px;
}

div.leg-container { width: 200px; margin: 0px auto 0px; padding: 5px; background: #f4f4f4; border: dashed 1px #d0d0d0; }
div.leg-container div.leg-radar { padding: 0 0px; line-height: 18px; display: -webkit-box; display: -moz-box; display: box; text-align: center;background: #4b4b4b; color: #fff; }
div.leg-container div.leg-radar p { width: 14.2%; } 
div.leg-container div.leg-radar p:nth-child(2) { color: #fff; text-shadow: 0px 0px 2px #000000; } 
div.leg-container div.leg-radar p:nth-child(3) { color: #00dcea; text-shadow: 0px 0px 2px #000000; } 
div.leg-container div.leg-radar p:nth-child(4) { color: #0005ba; text-shadow: 0px 0px 2px #000000; } 
div.leg-container div.leg-radar p:nth-child(5) { color: #fff100; text-shadow: 0px 0px 2px #000000; } 
div.leg-container div.leg-radar p:nth-child(6) { color: #f50000; text-shadow: 0px 0px 2px #000000; }