@charset "UTF-8";
/**
 * 広島県河川情報
 * カメラ情報 CSS
 * ※一部はmap.cssにカメラ画面用定義書いてます。
 */
/* カメラ情報一覧エリア */
div.infoBox div.cameraScroll{
	overflow-y:auto;
	height: 560px;
	width: 450px;
	margin-left: -7px;
	position: relative;
}
div.infoBox div.cameraScroll .no_msg{
	margin-top: 6px;
	font-size: 17px;
	line-height: 21px;
	text-align: center;
}
div.infoBox div.cameraScroll h2{
	margin-left: 6px;
}
div.infoBox div.cameraScroll div.cameraBox{
	width: 205px;
	height: 195px /*178px*/;
	border: 1px solid #c3d0db;
	margin:0 0 10px 5px;
	padding: 1px;
	overflow:hidden;
	display: inline-block;
	position: relative;
}

div.infoBox div.cameraScroll div.cameraBox.MITI{
	width: 95%;
	height: 34px;
	display: block;

}

div.infoBox div.cameraScroll div.cameraBox a{
	vertical-align: bottom;
}
/* 画像 */
div.infoBox div.cameraScroll div.cameraBox .pict img{
	width: 205px;
	height: 115px;
}
div.infoBox div.cameraScroll div.cameraBox .pict.is-selected img{
	border: 3px solid #00b3fc;
	width: 199px;
	height: 109px;
}
/* カメラ局名 */
div.infoBox div.cameraScroll div.cameraBox .camera-info{
/* 	margin: 5px 0 0 0; */
	padding: 5px 0 0 0;
	background: url(../images/common/dotLine.png) repeat-x left bottom;
	height: 36px /*23px*/;
	vertical-align: top;
}
div.infoBox div.cameraScroll div.cameraBox .camera-info.MITI{
	background: none;
}

div.infoBox div.cameraScroll div.cameraBox .pict.camera-info.MITI.is-selected{
	border: 3px solid #00b3fc;
	height: 23px;
}


div.infoBox div.cameraScroll div.cameraBox .camera-info a{
	line-height:17px;
	padding: 0 0 0 38px;
	background: url(../images/icon/map/iconMap_camera.png) no-repeat 8px 0;
	display: inline-block;
}
div.infoBox div.cameraScroll div.cameraBox .camera-info a.pref{
	background: url(../images/icon/map/iconMap_camera_pref.png) no-repeat 8px 0;
}

/* 関連水位局 */
div.infoBox div.cameraScroll div.cameraBox .stage-info{
	background: #f6f8fa url(../images/common/icon_camera_stage.png) no-repeat 7px 4px;
	padding: 10px 0 0 35px;
	height: 22px;
	vertical-align: middle;
}
div.infoBox div.cameraScroll div.cameraBox .stage-info a img{
	vertical-align: middle;
	margin-right:5px;
}
div.infoBox div.cameraScroll div.cameraBox span.hiddenDt{
	display: none;
}



/* シンボル画像 */
#main.js-cameraMap div.mapArea a.cameraSymbol{
	position: absolute;
	display: block;
	background: url(../images/icon/iconMap_camera.png) no-repeat left top;
	width: 20px;
	height: 17px;
	z-index: 100;
}
#main.js-cameraMap div.mapArea a.cameraSymbol.is-selected{
	position: absolute;
	display: block;
	background-image: url("../images/icon/iconMap_camera_on.png");
	width: 31px;
	height: 26px;
	z-index: 101;
	margin-top: -4px;
	margin-left: -5px;
}




/*凡例************************/
#main.js-cameraMap .legendBox{
	height: auto;
}
#main.js-cameraMap dl.mapLegend dt{
	margin-left:0px;
	padding-left: 5px;
}
/*カメラ*/
#main.js-cameraMap .legendBox.cameraPoint dl.mapLegend{
	width: 216px;
}

/*水位*/
#main.js-cameraMap .legendBox.stage dl.mapLegend{
	width: 225px;
}
#main.js-cameraMap .stage dl.mapLegend dd{
	float: left;
	width: 90px;
}
#main.js-cameraMap .stage dt.borderT{
	clear:both;
	margin-left:0px;
	padding-left: 5px;
}
#main.js-cameraMap .stage .borderT ~ dt,
#main.js-cameraMap .stage .borderT ~ dd{
	border-top: 1px dashed #a4b9cb;
	padding-top: 3px;
}
#main.js-cameraMap .stage .borderT ~ dt{
	margin-left:0px;
	padding-left: 5px;
}
#main.js-cameraMap dl.camera dt{
	float: left;
	width: 20px;
	margin-left:5px;
}


/* ======================
	詳細サブウィンドウ
 ========================*/
/*-----カメラ詳細 */
.popupHeader,
.popupFooter{
	width: 960px;
	margin-bottom: 10px;
}
.popupHeader h4{
	font-size: 17px;
	margin: 10px 0 10px 10px;
	text-indent:10px;
	letter-spacing: 1px;
	border-left: 6px solid #3eb02c;
	line-height: 1em;
	background-image: none;
	display: inline-block;
}

.popupHeader button.reloadBtn{
	position: relative;
	/*top: 10px;*/
	/*left: 680px;*/
	/*width: 85px;*/
	/*height: 28px;*/
	/*background: url(../images/button/refresh.png) no-repeat 0 0;*/
	float: right;
	margin-top: 13px;
}
.popupContents{
	position: relative;
	margin: 0;
	padding:0 20px;
	width: 960px;
}

/* main movie area */
.movieBox{
	position: relative;
	width: 496px;
}
/* movie タイトル日時 */
.movieBox h5{
	font-size: 15px;
	line-height: 12px;
	text-indent: 6px;
	border-left:5px solid #aee19d;
}
/* movie 右上アイコン＋観測所情報 */
.movieBox p{
	position:absolute;
	top: -7px;
	right: 2px;
	width:auto;
	height:22px;
	background: url(../images/common/icon_camera_stage.png) no-repeat 0 0;
	padding-left: 25px;
	line-height: 24px;
}
.movieBox p img{
	vertical-align:middle;
}
.movieBox .movie{
	width: 488px;
	height: 274px;
	margin:5px auto 5px auto;
	padding: 3px;
	border: 1px solid #c3d0db;
}
.movie img{
	width: 488px;
	height: 274px;
}

/*-------------------------*/
.timeSliderBox{
	width: 494px;
	height:auto;
	background: #F1F5F7;
	border: 1px solid #c3d0db;
}

.timeSliderBox ul{
	position: relative;
	display: inline-block;
	height: 22px;
	margin: 4px 2px 0 2px;

}
ul.timeSlider li{
	float: left;
}
/* 再生／停止は微妙にカテゴライズ */
ul.timeSlider li.spr{
	margin-right:10px;
}

/* 見た目だけ実装 要変更 */
div.motionBar{
	width:40px;
	height:20px;
	background: #c3d0db;
	margin: 0 1px;
}
div.motionBar.is-selected{
	background: #3eb02c;
}

.timeSlider button{
	margin:0 3px 0 3px;
}

/* ---------------- 平常時の様子 */
.normal-pictBox{
	position: absolute;
	top: 16px;
	left: 525px;
	width: 183px;
	height: 125px;
	padding: 2px;
	border: 4px solid #aee19d;
}
.normal-pictBox p{
	color: #1f4d77;
/*	line-height: 23px;*/
	margin:5px 0 0 5px;
	height:18px;
}
.normal-pictBox img{
	width: 183px;
	height: 101px;
}
/*-----------------水位表 */
.tblBox{
	position:absolute;
	top: 16px;
	right:50px;
}
#cameraPopup .timelineTbl{
	width:210px;
}
#cameraPopup .timelineTbl td{
	height:19px;
}
/*-----------------グラフ */
.graphBox div.graphUnit span.ex-stage{/* 水位 */
	display:inline-block;
	width:14px;
	height:8px;
	background: url(../images/icon/ex_stage.png) no-repeat 0 0;
	margin-right: 3px;
}
.graphBox{
	position: absolute;
	top:163px;
	right:55px;
	width:415px;
	height:200px;
}

.graphBox h5 span.obsName{
	margin-left: 20px;
}

/*--------------- 下部 movie 時系列並び*/
div.movieListBox{
	background: #c3cdd8;
	width: 100%;
	height: 109px;
	margin: 38px 0 3px 0;
}
ul.movieList{
	width: 100%;
	list-style: none;
	margin:0 auto;
	padding: 7px 0 0 0;
	text-align: center;
}
ul.movieList img{
	width: 120px;
	height: 66px;
}
ul.movieList li{
	width: 120px;
	margin: 0 5px;
	text-align: center;
	display: inline-block;
}
/* 日時 */
ul.movieList li p{
	font-size: 12px;
	color: #1f4d77;
	margin:0 0 5px 0;
}

/* 選択中 */
ul.movieList li.is-selected img{
	border: 3px solid #3eb02c;
	margin: -3px 0 -3px -3px;
	overflow: hidden;
}

.graphBox h5{
	text-indent: 12px;
	background: url(../images/common/marker.png) no-repeat 0 2px;
	margin:0 0 5px 0;
}

.graphBox h5 a,
.timelineTbl th a{
	font-size: 12px;
	color: #005c82;
	text-decoration: underline;
	margin: 0 0 0 10px;
}