@charset "UTF-8";
/**
 * 石川県河川情報
 * カメラ情報 CSS
 *
 */
#main.js-cameraMap .dataBox{
	padding: 0px;
	margin-top: -5px;
}
#main.js-cameraMap .mapBox.p1500{
	position:relative;
	float: left;
	margin-bottom: 10px;
	width:557px;
}
#main.js-cameraMap .mapArea{
	height: auto;
	width: auto;
}
#main.js-cameraMap .infoBox{
	width: 443px;
}
/* シンボル画像 */
#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 #cameraScroll{
	overflow-y:auto;
	height: 490px;
	width: 450px;
	margin-left: -7px;
	position: relative;
}
#main.js-cameraMap .cameraBox{
	width: 205px;
	height: 198px;
	border: 1px solid #c3d0db;
	margin:0 0 10px 5px;
	padding: 1px;
	overflow:hidden;
	display: inline-block;
	position: relative;
}
#main.js-cameraMap .cameraBox a{
	vertical-align: bottom;
}
/* 画像 */
#main.js-cameraMap .cameraBox .pict img{
	width: 205px;
	height: 137px;
}
#main.js-cameraMap .cameraBox .pict.is-selected img{
	border: 3px solid #00b3fc;
	width: 199px;
	height: 131px;
}
/* カメラ局名 */
#main.js-cameraMap .cameraBox .camera-info{
	margin: 5px 0 0 0;
	background: url(../images/common/dotLine.png) repeat-x left bottom;
	height: 25px;
	vertical-align: top;
}
#main.js-cameraMap .cameraBox .camera-info a{
	line-height:17px;
	padding: 0 0 0 38px;
	background: url(../images/icon/iconMap_camera.png) no-repeat 8px 0;
}
/* 関連水位局 */
#main.js-cameraMap .cameraBox .stage-info{
	background: #f6f8fa url(../images/common/icon_stage.png) no-repeat 7px 4px;
	padding: 10px 0 0 35px;
	height: 20px;
	vertical-align: middle;
}
#main.js-cameraMap .cameraBox .stage-info a img{
	vertical-align: middle;
	margin-right:5px;
}
#main.js-cameraMap .cameraBox span.hiddenDt{
	display: none;
}
/*凡例************************/
#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;
}


/* ======================
	popup
 ========================*/
/*-----カメラ詳細 ポップアップ */
#cameraPopup{
	width: 960px;
	height: 615px;
}
#cameraPopup .popupContents{
	position: relative;
	margin: 0;
	padding:0 20px;
}

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

/*-------------------------*/
.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:47px;
	height:20px;
	background: #c3d0db;
	margin: 0 1px;
}
div.motionBar.is-selected{
	background: #0086BD;
}

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

/* ---------------- 平常時の様子 */
.normal-pictBox{
	position: absolute;
	top: 16px;
	left: 525px;
	width: 183px;
	height: 145px;
	padding: 2px;
	border: 4px solid #a4b9cb;
}
.normal-pictBox p{
	color: #1f4d77;
/*	line-height: 23px;*/
	margin:5px 0 0 5px;
	height:18px;
}
.normal-pictBox img{
	width: 183px;
	height: 122px;
}
/*-----------------水位表 */
.tblBox{
	position:absolute;
	top: 16px;
	right:20px;
}
#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:185px;
	right:20px;
	width:415px;
	height:200px;
}
/*--------------- 下部 movie 時系列並び*/
div.movieListBox{
	background: #c3cdd8;
	width: 100%;
	height: 113px;
	margin: 15px 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: 80px;
}
ul.movieList li{
	width: 120px;
	margin: 0 10px;
	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 #00b3fc;
	margin: -3px 0 -3px -3px;
	overflow: hidden;
}

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

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