@charset "UTF-8";
/**
 * 広島県河川情報
 * ダム貯水率 CSS
 */
.mapArea{
	width:700px;
	height:520px;
	margin-bottom: 50px;
}
img.suikeiLayer{
	position:absolute;
	top: 0;
	left:0;
}
.dam-cup-graph{
	position:absolute;
	width:132px;
	height:90px;
	border:none;
/*	border:solid 1px black;*/
	top:0px;
	left:0px;
	overflow:hidden;
	text-align:center;
}

.graph-pos-1 {top:100px;	left:5px;}
.graph-pos-2 {top:5px;		left:5px;}
.graph-pos-3 {top:5px;		left:145px;}
.graph-pos-4 {top:5px;		left:285px;}
.graph-pos-5 {top:5px;		left:425px;}
.graph-pos-6 {top:140px;	left:565px;}
.graph-pos-7 {top:235px;	left:565px;}
.graph-pos-8 {top:330px;	left:565px;}
.graph-pos-9 {top:425px;	left:565px;}
.graph-pos-10 {top:425px;	left:425px;}
.graph-pos-11{top:425px;	left:285px;}
.graph-pos-12{top:425px;	left:145px;}
.graph-pos-13{top:425px;	left:5px;}

.dam-cup-graph-hidden{
	display:none;
}

.dam-cup-graph-title{
	margin:0px auto;
	width:120px;
	height:14px;
	padding:2px 0px;
	background:#808080;
	color:#fff;
	text-align:center;
	line-height:16px;
	border-top-left-radius: 5px !important;
	border-top-right-radius: 5px !important;
}

.dam-cup-graph-area{
	position:relative;
	margin:0px auto 0px;
	padding:1px;
	width:120px;
	height:70px;
	overflow:hidden;
	background:url(../images/graph/dam_cup_base70.png) no-repeat transparent;
}
img.dam-cup-frame{
	position:absolute;
	width:122px;
	height:72px;
	overflow:hidden;
	top: 0;
	left:0;
}


.dam-cup-graph-box{
	position:absolute;
	top:auto;
	bottom:1px;
	width:60px;
	height:70px;
	overflow:hidden;
}

.dam-cup-graph-box.left{
	left:3px;
	width:58px;
}

.dam-cup-graph-box.right{
	left:60px;
}

.dam-cup-graph-box .cup {
	position:absolute;
	top:auto;
	bottom:0;
	left:0;
	width:60px;
	height:70px;
	overflow:hidden;
}


.dam-cup-graph-box.left .cup{
	left:auto;
	right:0;
	background:url(../images/graph/dam_cup_left70.png) no-repeat transparent;
	background-position:0px top;
	border-top:solid 1px #808080;
	border-right:solid 1px #808080;
}

.dam-cup-graph-box.right .cup{
	left:0;
	background:url(../images/graph/dam_cup_right70.png) no-repeat transparent;
	background-position:right top;
	border-top:solid 1px #808080;
	border-left:solid 1px #808080;
}
.dam-cup-graph-box.right .cup.nodata{
	background:url(../images/graph/dam_cup_right70_nodata.png) no-repeat transparent;
}

.dam-cup-graph-num{
	position:absolute;
	width:50%;
	/*text-align:center;*/
	top:2px;
	font-size:12px;
}

.dam-cup-graph-num.left{
	left:0;
	text-align:right;
}
.dam-cup-graph-num.right{
	left:50%;
	text-align:left;
}

.dam-cup-graph-num.left span{
	margin-right:5px;
}
.dam-cup-graph-num.right span{
	margin-left:10px;
}
.dam-cup-graph-num.right.nodata span{
	margin-left:5px;
	font-size:10px;
}

.dam-cup-graph-line{
	position:absolute;
	top:auto;
	bottom:0;
	left:0;
	width:100%;
	height:1px;
	font-size:0px;
	border-bottom:solid 2px red;
}

.dam-cup-graph-line.nodata{
	display:none;
}

/* 凡例 */
.graph-leg{
	top:5px;
	left:558px;
	background:#efefef;
	height:117px;
	border:solid 2px #9f9f9f;
	border-radius: 15px !important;
}
.graph-leg .dam-cup-graph-title{
	background:transparent;
	border:none;
	padding:2px 0px;
	color:#000;
}
.graph-leg .dam-cup-graph-title span{
	letter-spacing:2em;
	margin-right:-2em;
}
.graph-leg .dam-cup-graph-num{
	top:50%;
}
.graph-leg .dam-cup-graph-num.left span{
	margin-right:10px;
}
.graph-leg .dam-cup-graph-num.right span{
	margin-left:10px;
}
.graph-leg .dam-cup-graph-notice{
	margin-top:2px;
	line-height:1.0em;
}
.graph-leg .dam-cup-graph-notice span.linezRed{
	width: 13px;
	height: 4px;
	display: inline-block;
	border-top: 2px solid red;
	margin: 5px 2px 0 0;
}


/*=======================
	グラフ凡例
  =======================*/
.graphBoxR .graph-item-box dl.graphLegend{
	width:auto;	/* size reset */
}
.graph-item-box dl dt span{
	width: 1px;
	display: block;
	border-left-width:14px;
	border-left-style:solid;
	margin-left:4px;
}

dl.graphLegend.damG{
	font-size:11px;
}
dl.graphLegend.rainM{
	font-size:11px;
}

dl.graphLegend.damG dt span{
	height: 3px;	/*border*/
	margin-top:3px;
}
dl.graphLegend.rainM dt span{
	height:10px;	/*block*/
	margin-top:0;
}

/* 線グラフ色 */
dl dt span.ex-damLine-thisYear,
dl dt span.ex-rainBlk-thisYear{
	border-color: #FF00FF;
}
dl dt span.ex-damLine-lastYear,
dl dt span.ex-rainBlk-lastYear{
	border-color: #0000ff;
}
dl dt span.ex-damLine-H6,
dl dt span.ex-rainBlk-H6{
	border-color: #00FFFF;
}
dl dt span.ex-damLine-ave,
dl dt span.ex-rainBlk-ave{
	border-color: #00FF00;
}
dl dt span.ex-damLine-risui{
	border-color: #ffcc00;
}
.graph-item-box dl.graphLegend dd{	/*moji*/
	min-width:0;
	text-indent:1px;
}
.graph-item-box .right-item-damG{
	margin-left:25px;
}
.graph-item-box .right-item-rainM{
	margin-left:75px;
}
/* スピナー */
div#spinner{
	position: absolute;
	top:0px;
	left:0px;
	width: 100%;
	height:540px;
	background-color: rgba( 255, 255, 255, 0.45 );
	z-index: 255;
	display: none;/*初期表示は非表示*/
	background-color: pink;
	opacity:0.7;
}
div#spinner img{
	position: relative;
	top:50%;
	left:50%;
	margin: -16px 0 0 -16px;
}