charset "UTF-8";
/**
 * 石川県河川情報
 * グラフ CSS
 *
 */

/*=======================
	グラフ
  =======================*/
ul.graph{
	width: 100%;
}
ul.graph li{
	display:block;
	min-height: 140px;
	position:relative;
}

/* グラフ局名 */
ul.graph li h4, h4{
	background: url(../images/common/marker.png) no-repeat 0 5px;
	font-size: 13px;
	text-indent: 12px;
	line-height: normal;
	min-width:100px;
	display:inline-block;	/* 後ろに情報がつながる場合に */
}

.graphImg{
	width: 620px;
}

ul.graph.stage{
	width: 570px;
	margin-right : 300px;
}
ul.graph.stage .graphImg{
	width: 100%;
}

/*=======================
	水位グラフ右側:時系列表
  =======================*/
.tblPosition{
 	position : absolute;
 	right : 0;
 	top : 0;
 	width : 280px;
	height: 100%;
}
.tblPosition table{
	width:100%;
	border: 1px solid #a4b9cb;
}

/*=======================
	グラフ右側:データBox
  =======================*/
.dataList{
	position: absolute;
	right : 0 ;
	top : 20px ;
	width: 210px;
	min-height: 85px;
	padding: 1px;
	border: 1px solid #a4b9cb;
}

/*------------- Header:降雨開始時刻 */
.dataList p{
	font-size: 13px;
	line-height:17px;
	background: #e5eaee;
	padding: 0 0 0 10px;
}
.dataList p span{
	display: block;
}
/*--------------------- データ表示 */
.dataList dl{
	width: 96%;
	margin: 10px 0 10px 5px;
}

/* データ項目名 */
.dataList dl dt{
	float: left;
	min-width: 80px;
	position: relative;
	padding: 0 0 0 7px;
	line-height:normal;
}

/* データ */
.dataList dl dd{
	margin: 0 0 5px 100px;
	text-align: right;
	line-height:normal;
}
/* 単位 */
.dataList dl dd span.unit{
	display: inline-block;
	width: 36px;
	text-align:left;
	margin-left: 2px;
	padding-left:2px;
	background: #fff;
	color: #000;
}

/*-------------------風向 */
.dataList dl dt.windDirection{
	padding-left:17px;
}
.dataList dl dd.windDirection{
	text-align: center;
}


/* グラフ凡例はデータ表の項目名の前位置に */

/* 雨量 */
.dataList dt.ex-rainfall{
	height: 10px;
	border-left: 10px solid #4092bc;
	line-height: 10px;
	margin: 5px 0 0 0;
}
/* 累加 */
.dataList dt.ex-rainSum{
	height: 8px;
	line-height: 8px;
	margin: 8px 0 0 0;
	padding-left:18px;
	background: url(../images/icon/ex_rainSum.png) no-repeat;
}
/* 水位 */
.dataList dt.ex-stage{
	height: 8px;
	line-height: 8px;
	margin: 8px 0 0 0;
	padding-left:18px;
	background: url(../images/icon/ex_stage.png) no-repeat;
}
/* 潮位 */
.dataList dt.ex-tide{
	height: 8px;
	line-height: 8px;
	margin: 8px 0 0 0;
	padding-left:18px;
	background: url(../images/icon/ex_tide.png) no-repeat;
}
/* 風速 */
.dataList dt.ex-wind{
	height: 8px;
	line-height: 8px;
	margin: 8px 0 0 0;
	padding-left:18px;
	background: url(../images/icon/ex_wind.png) no-repeat;
}
/* 貯水位 */
.dataList dt.ex-reserve{
	height: 8px;
	line-height: 8px;
	margin: 8px 0 0 0;
	padding-left:18px;
	background: url(../images/icon/ex_reserve.png) no-repeat;
}
.ctg dt.ex-reserve{
	height: 8px;
	line-height: 2px;
	margin: 3px 0 0 0;/*赤瀬ダム凡例*/
	padding-left:18px;
	background: url(../images/icon/ex_reserve.png) no-repeat;
}
/* 流入量 */
.dataList dt.ex-inflow{
	height: 8px;
	line-height: 8px;
	margin: 8px 0 0 0;
	padding-left:18px;
	background: url(../images/icon/ex_inflow.png) no-repeat;
}
.ctg dt.ex-inflow{
	height: 8px;
	line-height: 2px;
	margin: 3px 0 0 0;/*赤瀬ダム凡例*/
	padding-left:18px;
	background: url(../images/icon/ex_inflow.png) no-repeat;
}
/* 放流量 */
.dataList dt.ex-outflow{
	height: 8px;
	line-height: 8px;
	margin: 8px 0 0 0;
	padding-left:18px;
	background: url(../images/icon/ex_outflow.png) no-repeat;
}
.ctg dt.ex-outflow{
	height: 8px;
	line-height: 2px;
	margin: 3px 0 0 0;/*赤瀬ダム凡例*/
	padding-left:18px;
	background: url(../images/icon/ex_outflow.png) no-repeat;
}

/*流域平均雨量*/
.ctg dt.ex-basinAbe{
	height: 10px;
	border-left: 10px solid #4092bc;
	line-height: 10px;
	margin: 2px 0 0 0;
}
/*予測流域平均雨量*/
.ctg dt.ex-preBasinAve{
	height: 10px;
	border-left: 10px solid #29ac8c;
	line-height: 10px;
	margin: 2px 0 0 0;
}


.dataList dt.ex-max,
.dataList dt.ex-george,
.dataList dt.ex-min,
.ctg dt.ex-max,
.ctg dt.ex-george,
.ctg dt.ex-min{
	padding: 0 0 0 /*15*/18px;
}
.dataList dt.adjLeft{
	padding-left:0;
}
.dataList dt.ex-max:before{
	content: url(../images/icon/ex_border_max.png);
	position: absolute;
	top:-3px;
	left: 0;
}
.dataList dt.ex-george:before{
	content: url(../images/icon/ex_border_george.png);
	position: absolute;
	top:-3px;
	left: 0;
}
.dataList dt.ex-min:before{
	content: url(../images/icon/ex_border_min.png);
	position: absolute;
	top:-3px;
	left: 0;
}
/*赤瀬ダム凡例*/
.ctg dt.ex-max:before{
	content: url(../images/icon/ex_border_max.png);
	position: relative;
	top:-3px;
}
.ex-damList dt.ex-max:before{
	content: url(../images/icon/ex_border_max.png);
	position: relative;
	top:-3px;
	left: -4px;
}
.ex-damList dt.ex-george:before{
	content: url(../images/icon/ex_border_george.png);
	position: relative;
	top:-3px;
	left: -4px;
}
.ctg dt.ex-min:before{
	content: url(../images/icon/ex_border_min.png);
	position: relative;
	top:-3px;
}
.ex-damList dt.ex-min:before{
	content: url(../images/icon/ex_border_min.png);
	position: relative;
	top:-3px;
	left: -4px;
}

.ex-damList dl.add-border{
	border-top:1px solid #c3d0db;
	padding-top:6px;
}

/*=======================
	グラフ凡例
  =======================*/
.explainBox{
	border: 1px solid #a4b9cb;
	font-size:11px;
	line-height:16px;
	padding-bottom:5px;
}
/* 凡例title */
.explainBox h6{
	width: 100%;
	height: 17px;
	font-size: 13px;
	text-align: center;
	line-height:17px;
	background: #e5eaee;
}

.explainBox.graph div.ctg{
	clear:both;
}

/* 凡例*/
.explainBox.graph{
	margin:15px 0 0 10px;
	width: 590px;
	height:auto;
}
.explainBox.graph p{
	min-width:52px;
	float: left;
	margin-left:10px;
}

dl.graphLegend{
	width:100%;
	margin:4px 0 0 10px;
}
dl.graphLegend dt{
	display: inline-block;
	margin:4px 0 0 0;
}
dl.graphLegend dt img{
	vertical-align:middle;
	margin:-4px 0 0 0;/*dtで4px下げているため*/
}
dl.graphLegend dd{
	display: inline-block;
	margin:4px 10px 0 10px;
}
dl.graphLegend dt span{
	width: 6px;
	height: 11px;
	display: inline-block;
	margin-top:2px;
}
/*水位グラフ凡例（改行横のスペース）*/
.explainBox.bottomB dl dt.newline{
	margin-left:55px;
}

/*表無し画面の下部個別凡例（異常値凡例付）*/
/* ---------------------- 色凡例 */
dl.colorLegend{
	margin-left: 10px;
}
dl.colorLegend dt{
	height: 17px;
	float: left;
}
dl.colorLegend dt span{
	width: 6px;
	height: 11px;
	display: inline-block;
	margin-top:2px;
}
dl.colorLegend dd{
	min-width:75px;
	height: 17px;
	text-indent:3px;
}
/*グラフ凡例幅が大きいので文字部分を狭く*/
dl.colorLegend dd.gra{
	min-width:70px;
	height: 17px;
	text-indent:3px;
}

/* ---------------- 位置:下部個別 */
.explainBox.bottomB.rain{
	margin: 10px 0 0 0;
	padding-bottom:0px;
}
.explainBox.bottomB dl,
.explainBox.bottomB .example{
/*	margin: 5px 0 5px 5px;*/
	margin-top:5px;
}

.explainBox.bottomB dl dt,
.explainBox.graph dl dt{
	float: left;
}

/* 改行箇所を指定したい */
.explainBox.bottomB dl dt.break{
	clear:both;
}


/* 区切り線（右） */
.explainBox.bottomB .borderR{
	border-right: 1px solid #a4b9cb;
}
/* 区切り線（下） */
.explainBox hr{
	border-bottom: 1px solid #a4b9cb;
	border-top-width: 0;
}
/* ---------------- 位置:下部個別(ダム) */
.explainBox.bottomB.dam{
	margin: 60px 0 0 0;
	padding-bottom:5px;
}
/* ---------------- 位置:下部個別(潮位・風向風速) */
.explainBox.bottomB.sizeS{
	width:550px;
	margin: 10px 0 0 0;
}
/* ----------------------説明と例 */
/*値が超越した場合、背景色が変わります*/
.example{
	width: 120px;
/*	padding:0 0 3px 0;*/
}
.example p span{
	display: inline-block;
	width: 27px;
	height: 14px;
	text-align: center;
}
/* ------------------データ表現凡例*/
dl.dispLegend dt{
	width:55px;
	text-align: center;
	float: left;
}
/* Modified by DuyenHT1 20170206 start */
dl.dispLegend dd{
	min-width:100px;
	color: #000000;
}
/* Modified by DuyenHT1 20170206 end */


/*--------------------- 基準値水位凡例＋赤瀬ダム水位凡例 */
.ex-stageList,
.ex-damList{
	position: absolute;
	right : 0 ;
	top : 47px ;
	width: 80px;
	padding: 1px;
	border: 1px solid #a4b9cb;
	font-size:11px;
}
.ex-stageList dl,
.ex-damList dl{
	margin: 4px 4px 2px 4px;
}

/* データ項目名 */
.ex-stageList dl dt{
	padding: 0px;
	line-height:normal;
}

/* データ */
.ex-stageList dl dd,
.ex-damList dl dd{
	margin: 0 0 0 0px;
	text-align: right;
	line-height:normal;
}
/* 単位 */
.ex-stageList dl dd span.unit,
.ex-damList dl dd span.unit{
	display: inline-block;
	min-width: 30px;
	text-align:left;
	margin-left: 2px;
	padding-left:2px;
	color: #000;
}

/* 凡例アイコン */
.ex-stageList img{
	padding:0 4px 3px 0;
}

/*--------------------- 赤瀬ダム水位凡例 */

/* データ項目名 */
.ex-damList dl dt{
	margin-left:5px;
	line-height:normal;
}

/*------------------- 雨量グラフ 局切替 */
ul.pointSelect{
	position:absolute;
	top: 0;
	left:100px;
	font-size: 0;
}
ul.pointSelect li{
	display: inline-block;
	text-align: center;
	border-right:1px solid #a2bdd1;
	font-size: 12px;
	line-height: 20px;
	padding: 0 10px;
	min-height: 12px;
}
	ul.pointSelect li:first-child{
		border-left:1px solid #a2bdd1;
	}
ul.pointSelect li span,
ul.pointSelect li a {
	display: block;
	width: auto;
}
ul.pointSelect li.is-selected{
	padding: 0 5px;
}
ul.pointSelect li.is-selected span{
	color: #005c82;
	background: #d9e7ed;
	display: inline-block;
	padding: 0 5px;
	cursor: default;
}

/* Added by TuyenLA p1203 */
ul.pointSelect li.relationOnly span{
	background: none !important;
}
ul.pointSelect li.relationOnly {
    border: none !important;
}

/*------------- 水位グラフ 河川名・局名*/
dl.pointInfo{
	display:inline-block;
	width:auto;
	line-height:20px;
}
dl.pointInfo dd{
	display: inline-block;
}
dl.pointInfo dt{
	display: inline-block;
	padding-right:10px;
}
dl.pointInfo dd.spr{
	border-left:1px solid #a2bdd1;
	padding-left:10px;
}

/* Added by TuyenLA p1203 */
dl.pointInfo dt.spr{
	padding-left:40px;
}

/*===================================================
	グラフ関連位置補正
  ===================================================*/
.ex-stageList{
	top : 61px ;
}

/* 項目BOXの位置 */
.graph-item-box {
	font-size:11px;
	height : 14px;
	margin-top : 7px;
}
/* 項目BOXの中身 */
.graph-item-box div {
	position : absolute;
	display : inline-block;
}
/*--------------------- 水位グラフ */
/*--------------------- 洪水周知水位表(グラフ) */
/*--------------------- 水位予測グラフ */
/*-------------  関連雨量グラフ -------------*/
  .graph-stage-rain    .graph-item-left/*  項目位置(左)   */
, .graph-standard-rain .graph-item-left
, .graph-forecast-rain .graph-item-left
, .graph-forecast-dam-basin .graph-item-left
{
	margin-left : 2px;
}
  .graph-stage-rain    .graph-item-right/* 項目位置(右) */
, .graph-standard-rain .graph-item-right
, .graph-forecast-rain .graph-item-right
, .graph-forecast-dam-basin .graph-item-right
{
	margin-left : 453px;
}
  .graph-forecast-rain .graph-item-center/* 項目位置(中) *//* 水位予測グラフ用 */
{
	text-align : center;
	display : block;

	margin-left : 226px;
	top: 28px;
}
  .graph-forecast-dam-basin .graph-item-center/* 項目位置(中) *//* 水位予測グラフ用 */
{
	text-align : center;
	display : block;

	margin-left : 396px;
	top: 28px;
}
/*---------------  水位グラフ ---------------*/
  .graph-stage-stage    .graph-item-left/* 項目位置(左) */
, .graph-standard-stage .graph-item-left
, .graph-forecast-stage .graph-item-left
{
	margin-left : 2px;
}
  .graph-stage-stage    .graph-item-left/* 項目位置(右) */
, .graph-standard-stage .graph-item-left
, .graph-forecast-stage .graph-item-left
{
}
  .graph-forecast-stage .graph-item-center/*  項目位置(左)   *//* 水位予測グラフ用 */
{
	text-align : center;
	display : block;

	margin-left : 226px;
	top: 38px;
}

/*--------------------- 水位予測グラフ */
/*-------------- 凡例BOX --------------*/
.graph.explainBox.graph-forecast {
	width : 560px;
}

/*--------------------- 雨量グラフ */
/*--------------------- 潮位グラフ */
/*--------------------- ダム諸量グラフ(関連雨量グラフ */
/*-------------- 雨量/潮位グラフ --------------*/
  .graph-rain      .graph-item-left/*  項目位置(左)   */
, .graph-tide      .graph-item-left
, .graph-dam-rain  .graph-item-left
{
/* 	margin-left : 35px; */
	margin-left : 40px;
}
  .graph-rain      .graph-item-right/*  項目位置(右)   */
, .graph-tide      .graph-item-right
, .graph-dam-rain  .graph-item-right
{
/* 	margin-left : 520px; */
	margin-left : 660px;
}
/*--------------------- ダム諸量グラフ(ダムグラフ) */
/*--------------- ダムグラフ ---------------*/
  .graph-dam-dam   .graph-item-left,/*  項目位置(左)   */
  .graph-forecast-dam   .graph-item-left/*  項目位置(左)   */
{
/* 	margin-left : 2px; */
	margin-left : 55px;
}
  .graph-dam-dam   .graph-item-right/*  項目位置(右)   */
{
/* 	margin-left : 560px; */
	margin-left : 675px;
}
  .graph-forecast-dam   .graph-item-right/*  項目位置(右)   */
{
	margin-left : 445px;
}
/*--------------------- 風向風速グラフ */
  .graph-wind      .graph-item-box {
	height : 13px;
	margin-top : 4px;
}
  .graph-wind      .graph-item-left/*  項目位置(左)   */
{
	margin-left : 2px;
}
  .graph-wind      .graph-item-right/*  項目位置(右)   */
{
}

/*--------------------- 予測雨量表(の色替え変更) */
.odd-forecast {
/*	background:#fff	*/
	background:#eeffff;
}
.even-forecast {
/*	background:#eaedee	*/
	background:#cff3ee;
}