@charset "utf-8";

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

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


/* -------------------------------------------------------------------------------------
  BASIS
------------------------------------------------------------------------------------- */
table.obs-data{margin:0 auto;}table.obs-data thead td{padding:5px 3px;}table.obs-data tbody tr td{width:25%;border-right:solid 1px #c1c5cc;padding:5px 1px;}table.obs-data tbody tr td:last-child{border-right:none;}
table.detail-data{width:95%;margin:15px auto 0;background: #fff;text-decoration: none;border: solid 1px #757d8a;-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);border-spacing: 0;border-collapse: collapse;text-align: center;font-size: 13px;line-height: 14px}
table.detail-data thead td {padding:5px 3px;
	vertical-align: middle;
	background: #bbcfe5;
	background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(50%, #ededed), color-stop(50%, #e7e7e7), to(#ffffff));
	background: -webkit-linear-gradient(top, #ffffff, #ededed 50%, #e7e7e7 50%, #ffffff);
	background: -moz-linear-gradient(top, #ffffff, #ededed 50%, #e7e7e7 50%, #ffffff);
	background: -ms-linear-gradient(top, #ffffff, #ededed 50%, #e7e7e7 50%, #ffffff);
	background: -o-linear-gradient(top, #ffffff, #ededed 50%, #e7e7e7 50%, #ffffff);
	background: linear-gradient(top, #ffffff, #ededed 50%, #e7e7e7 50%, #ffffff);
	border: solid 1px #757d8a;
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
	text-align: center;
}
table.detail-data tbody tr{border-bottom: solid 1px #c1c5cc;}table.detail-data tbody tr:last-child{border-bottom:none;}table.detail-data tbody tr:nth-child(even) {background:#f3f3f4;}
table.detail-data tbody tr td{width:16.5%;border-right: solid 1px #c1c5cc;padding:5px 1px;}table.detail-data tbody tr td:last-child{border-right:none;}
table.detail-data tbody tr td:first-child{
	vertical-align: middle;
	background: #bbcfe5;
	background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(50%, #ededed), color-stop(50%, #e7e7e7), to(#ffffff));
	background: -webkit-linear-gradient(top, #ffffff, #ededed 50%, #e7e7e7 50%, #ffffff);
	background: -moz-linear-gradient(top, #ffffff, #ededed 50%, #e7e7e7 50%, #ffffff);
	background: -ms-linear-gradient(top, #ffffff, #ededed 50%, #e7e7e7 50%, #ffffff);
	background: -o-linear-gradient(top, #ffffff, #ededed 50%, #e7e7e7 50%, #ffffff);
	background: linear-gradient(top, #ffffff, #ededed 50%, #e7e7e7 50%, #ffffff);
	border: solid 1px #757d8a;
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* -------------------------------------------------------------------------------------
  GRAPH
------------------------------------------------------------------------------------- */
div.graph-container{width:264px;margin:10px auto 0;position:relative;}
canvas.obs-graph{margin:0 auto;}
div.graph-y{width:264px;margin:0 auto;}div.graph-y p{width:11px;float:left;font-size:10px;text-align:center;position:relative;}div.graph-y p:last-child:after{content:"時";width:11px;font-size:10px;text-align:center;position:absolute;top:0;right:-11px;}
div.graph-x{height:264px;position:absolute;top:-4px;left:-12px;}div.graph-x p{width:11px;font-size:10px;text-align:right;line-height:10px;}

div.graph-x.temp p{height:25px;}
div.graph-x.temp p:last-child:after{content:"℃";width:11px;font-size:10px;text-align:right;position:absolute;top:-11px;left:0;}
div.graph-x.wind p{height:50px;}
div.graph-x.wind p:last-child:after{content:"m/s";width:11px;font-size:10px;text-align:right;position:absolute;top:-11px;left:0;}
div.graph-x.rain p{height:75px;color:#000;}
div.graph-x.rain p:last-child:after{content:"mm/h";width:11px;font-size:10px;text-align:right;position:absolute;top:-11px;left:0;}
div.graph-x.sun p{height:50px;}
div.graph-x.sun p:last-child:after{content:"min.";width:11px;font-size:10px;text-align:right;position:absolute;top:-11px;left:0;}