@charset "UTF-8";
/**
 * 広島県河川情報
 * グラフ CSS
 * ===== 2021年度リプレース版
 * [A-01] 2022.01.08 水位グラフの左岸／右岸ラベル位置を調整
 * [A-02] 2022.03.22 洪水予測グラフの水位グラフの左岸／右岸ラベル位置を調整
 */
/*=======================
	レイアウト
  =======================*/
.graphBoxL{
	position: relative;
	top:5px;
	left:0;
	width:785px;
	min-height:450px;
}
.sideTblBoxR{
	position: absolute;
	top:5px;
	width: 360px;
	min-height:450px;
	margin:0 0 0 800px;
}

/*=======================
	グラフ
  =======================*/
ul.graph{
	width: 780px;
	margin:0 auto 10px;
}
ul.graph li{
	display:block;
	position:relative;
	margin:0 0 1px 0;
}
/* 局諸元表位置 */
ul.graph li table{
	margin-left:60px;	/* グラフ左に合わせる*/
	margin-bottom:15px;
}
/*=======================
	表
  =======================*/
.sideTblBoxR table{
	width : auto;
	margin:0 auto;
}

/*=======================
	グラフ横:定数凡例BOX
  =======================*/
.ex-grp-sideList{
	position: absolute;
	right : 0 ;
	top: 10px;
	width: 93px;
	border: 1px solid #a4b9cb;
	font-size:11px;
}
.ex-grp-sideList dl{
	margin:0 3px 3px;
	line-height:17px;
}
.ex-grp-sideList dl dt{
	border-top:1px solid #c3d0db;
	padding:6px 0 2px;
	/*height: 17px;*/
}
.ex-grp-sideList dl dt:first-child{
	border:none;
}
.ex-grp-sideList dl dd.empty{
	height:15px;
}
/* 凡例画像 */
.legendBox.graph dl dt span,	/*水位予測:概況図凡例に入れる*/
.ex-grp-sideList dl dt span{
	width: 16px;	/*画像入るから*/
	height: 17px;	/*空だから*/
	display: inline-block;
	float: left;
	margin-right: 2px;
	background-position:50% 50%;
}
/* 折り返しが必要な長い名称はコチラで囲む */
.ex-grp-sideList dl dt span.box{
	display:inline-block;
	vertical-align:top;
	width:67px;
	height:auto;
	margin:0 0 4px;
	line-height:14px;
}
/* データ */
.ex-grp-sideList dl dd{
	text-align: right;
}
/* 単位 */
.ex-grp-sideList dl dd span.unit{
	display: inline-block;
	min-width: 15px;
	margin-left: 5px;
	text-align: left;
}

/*=======================
	グラフ凡例
	凡例と実グラフ上 で共通
  =======================*/
/*------------------------ 共通 */
dl.graphLegend{
	margin-left:3px;
}
dl.graphLegend dt{
	text-align:center;
}
dl.graphLegend dt span{
	width: 14px;	/*画像入るから*/
	height: 11px;	/*空だから*/
	display: inline-block;
	background-position:left 50%;
}

dl.graphLegend dd{
	min-width:84px;
	text-indent:5px;
	margin-right:5px;
}
/* 長いダム定数名に対応 */
dl.graphLegend dd.wideLv2{
	min-width:160px;
}
dl.graphLegend dd.wideLv3{
	min-width:130px;
}

/*------------------ グラフ上の項目(単位)の凡例 */
.graph-item-box {
	font-size:11px;
	margin-top : 7px;
	margin-bottom : 3px;
	min-height:14px;
	position:relative;
}
.graph-item-box dl dt,
.graph-item-box dl dd{
	float: left;
}
/* 折り返し */
.graph-item-box dl dt.break{
	clear:both;
}
/* 位置補正 */
.graph-item-box dl.graphLegend{
	width:785px;	/* グラフレイアウトと同じsize */
}
.graph-item-box .left-item{	/* 項目位置(左)*/
	margin-left:10px;
}
.graph-item-box .right-item{	/* 項目位置(右) */
	margin-left:510px;
}
/* グラフの下位置に置くタイプの凡例は左右で分ける */
.graph-item-box dl.graphLegend.leftPosB{
	width:180px;
	position:absolute;
	top: -5px;
	left: 10px;
}
.graph-item-box dl.graphLegend.rightPosB{
	width:140px;
	position:absolute;
	top: -5px;
	right: 20px;
}
/** COLOR **
 紫 pur: 8131ac
 赤 red: e91e00
 橙 org: fa9f00
 黄 yel: ffd200
 青  blu: 1172ee
 水色 lbl: 71d7ea
 寒青 sbl: 0e83b7
 緑     grn: 009933
 黄緑 ygr: 72D436
ターコイズ tur: 20B2AA

 雨量棒graph-blue: 4092bc
 雨量棒graph-green: a5df52
*/
/*------------------------ 共通:グラフ凡例画像 */
/* 10/60分雨量 ----- block */
dl.graphLegend span.ex-grp-rainfall{
	width: 7px;
	background-color:#4092bc;
}
/* 10/60分雨量 ----- block */
dl.graphLegend span.ex-grp-rainfall-forecast{
	width: 7px;
	background-color:#a5df52;
	color:#0F92BC;
	color:#0e83b7;
}

/* 春日池個別定数　凡例*/
/* ------------------------------------ */
dl.graphLegend span.ex-kasugaAlmLv1{
	width: 6px;
	background: #c0504d;  /* 余水吐高 */
	margin-left: 6px;
}
dl.graphLegend span.ex-kasugaAlmLv2{
	width: 6px;
	background: #7030a0;  /* 放流口高(上) */
	margin-left: 8px;
}
dl.graphLegend span.ex-kasugaAlmLv3{
	width: 6px;
	background: #00b050;  /* 放流口高(下) */
	margin-left: 9px;
}

/* 累加雨量 */
span.ex-grp-rainSum{
	background: url(../images/icon/ex_gline_blk.png) no-repeat;
}
/* 累加雨量（予測） */
span.ex-grp-rainSum-forecast{
	background: url(../images/icon/ex_gline_grn.png) no-repeat;
}

/* 河川水位 */
span.ex-grp-stage{
	background: url(../images/icon/ex_gline_sbl.png) no-repeat;
}
/* 河川水位（予測） */
span.ex-grp-stage-forecast{
	background: url(../images/icon/ex_gline_tur.png) no-repeat;
}

/* 定数:はん濫危険 */
span.ex-grp-stageLv4{
	background: url(../images/icon/ex_dotted_red.png) no-repeat;
}
/* 定数:避難判断 */
span.ex-grp-stageLv3{
	background: url(../images/icon/ex_dotted_org.png) no-repeat;
}
/* 定数:はん濫注意 */
span.ex-grp-stageLv2{
	background: url(../images/icon/ex_dotted_yel.png) no-repeat;
}
/* 定数:水防団待機 */
span.ex-grp-stageLv1{
	background: url(../images/icon/ex_dotted_sbl.png) no-repeat;
}

/* 潮位 */
span.ex-grp-tide{
	background: url(../images/icon/ex_gline_nbl.png) no-repeat;
}
/* 天文潮位 */
span.ex-grp-tideAstro{
	background: url(../images/icon/ex_gline_org.png) no-repeat;
}
/* 定数:警戒潮位----- border */
span.ex-grp-tideLv2{
	background: url(../images/icon/ex_border_red.png) no-repeat;
}
/* 定数:注意潮位----- border */
span.ex-grp-tideLv1{
	background: url(../images/icon/ex_border_yel.png) no-repeat;
}

/* ダム貯水位 */
span.ex-grp-reserve{
	background: url(../images/icon/ex_gline_nbl.png) no-repeat;
}
/* ダム流入量 */
span.ex-grp-inflow{
	background: url(../images/icon/ex_inflow.png) no-repeat;
}
/* ダム放流量 */
span.ex-grp-outflow{
	background: url(../images/icon/ex_outflow.png) no-repeat;
}
/* ダム洪水量 */
span.ex-grp-kouzui{
	background: url(../images/icon/ex_dotted_blk.png) no-repeat;
}
/* 定数:サーチャージ水位 */
span.ex-grp-damLv3{
	background: url(../images/icon/ex_dotted_red.png) no-repeat;
}
/* 定数:ただし書き水位 */
span.ex-grp-damLv2{
	background: url(../images/icon/ex_dotted_org.png) no-repeat;
}
/* 定数:常時満水位 */
span.ex-grp-damLv1{
	background: url(../images/icon/ex_dotted_blu.png) no-repeat;
}
/* 定数:制限水位 */
span.ex-grp-damSeigen{
	background: url(../images/icon/ex_dotted_grn.png) no-repeat;
}
/* 定数:最低水位 */
span.ex-grp-damLWL{
	background: url(../images/icon/ex_dotted_yel.png) no-repeat;
}

/* 定数:サーチャージ水位----- border */
span.ex-grpBdr-damLv3{
	background: url(../images/icon/ex_border_red.png) no-repeat;
}
/* 定数:ただし書き水位----- border */
span.ex-grpBdr-damLv2{
	background: url(../images/icon/ex_border_org.png) no-repeat;
}
/* 定数:常時満水位----- border */
span.ex-grpBdr-damLv1{
	background: url(../images/icon/ex_border_blu.png) no-repeat;
}

/*------------------------ 個別:警報発令判定グラフの凡例 */
table.damInfoTbl{
	width: 681px;
	margin:5px 0 5px 2px;
}
.damInfoTbl th,
.damInfoTbl td{
	line-height: 1.2em;
	padding:2px 0;
	border-style: none;
}
.damInfoTbl td span{
	width: 15px;	/*画像size*/
	height: 15px;
	display: inline-block;
	float: left;
	margin:auto 5px;
}
/* [◯]現在 */
.damInfoTbl td span.ex-almdam-now{
	background: url(../images/icon/ex_dam_now.png) no-repeat;
	background-position:50% 50%;
}
/* [△]30分前 */
.damInfoTbl td span.ex-almdam-bf30min{
	background: url(../images/icon/ex_dam_bf30min.png) no-repeat;
	background-position:50% 50%;
}
/* [◇]1時間前 */
.damInfoTbl td span.ex-almdam-bf1h{
	background: url(../images/icon/ex_dam_bf1h.png) no-repeat;
	background-position:50% 50%;
}
/* [□]非常用洪水吐き,ただし書き操作水位 */
.damInfoTbl td span.ex-almdam-area2{
	width: 18px;
	height: 8px;
	border:solid 2px #8131ac;
}
/* [□]常用洪水吐き */
.damInfoTbl td span.ex-almdam-area1{
	width: 18px;
	height: 8px;
	border:solid 2px #009933;
}
/*=======================
	水位グラフ
	左岸／右岸ラベル表示
  =======================*/
div.sagan{
	position: absolute;
	top: 20px;
	left: 50px;/*[A-01]*/
}
div.ugan{
	position: absolute;
	top: 20px;
	left: 587px;/*[A-01]*/
}
p.gan{
	min-width: 40px;
	min-height: 15px;
	line-height: normal;
	font-size: 12px;
	color: white;
	border-radius: 5px !important;
	background-color: gray;
	border:1px solid #99a6b3 !important;
	margin:0;
	opacity:1 !important;
	filter: alpha(opacity=100) !important;
	text-align: center;
	vertical-align: middle;
}

/*=======================
	左地図・右グラフレイアウト
  =======================*/
.graphBoxR .graph-item-box dl.graphLegend{
	width:435px;
}
.graphBoxR .graph-item-box .left-item{
	margin-left:0;
}
.graphBoxR .graph-item-box .right-item{
	margin-left:220px;
}
.graphBoxL.kozui ul.graph{
	width:830px;
}
.graphBoxL.kozui div.sagan{
	left: 70px;/*[A-02]*/
}
.graphBoxL.kozui div.ugan{
	left: 640px;/*[A-02]*/
}
.sideTblBoxR.kozui{
	width: 325px;
	margin-left: 840px;
}
/* title */
.graphBoxR h3{
	padding: 0 0 0 9px;
	height: 20px;
	font-size: 17px;
	line-height: 21px;
	letter-spacing: 1px;
	border-left: 6px solid #0086bd;
	border-bottom:2px solid #006cb1;
}
/* 局名 */
.graphBoxR h4{
	width:100%;
	margin: 10px 0 0;
}