@charset "UTF-8";
/**
 * 【神奈川県河川】カメラ画面CSS
 * ------
 * 更新履歴
 * [00] 新規作成
 * [01] 2016.04.18 K.Fujimaki	注意書きのcssを追加
 * [02] 2024.05.24 K.Fujimaki	局名が長い場合に表示崩れが起こるので、カメラ一覧のcssを修正
 * ====2024年度リプレース
 * [A-01] 2025.02.19 K.Fujimaki	時刻切替・種別切替のjs対応、平常時画像対応のためcssを調整
 * 								   種別切替ボタンの非活性時に透明になるようcssを調整
 */
/*=========================
	カメラ一覧画面
  =========================*/
.cameraBox{
	float:left;
	width:185px;/*[02]*/
	height:auto;/*[02]*/
	margin: 0 0 10px 10px;/*[02]*/
}
/* 折り返し最初の一個めまわりこみを解除して
  　　長くなったcameraBoxが引っかかるのを防ぐ
 ------------------------------*/
 #dataBox div.cameraBox:nth-of-type(4n+1) {
	clear: both;/*[02]*/
}
.cameraBox a{
	display: block;
	width: 100%;
	text-align: center;
	line-height: 15px;
}
.cameraBox a img{
	width: 160px;
	height: 120px;
	border: solid 1px #005e92;
	display: block;
	margin-left:10px;/*[02]*/
}
.cameraBox a:HOVER img{
	opacity: 0.6;
	border-color: #66b6d7;
}
/*[01]注意書き*/
.cameraNotice{
	margin: 5px 0px 5px 20px;
	line-height: 14px;
}
/*=========================
	カメラ画像画面
  =========================*/
/*[A-01]ページ操作UIのサイズ調整*/
#dataHeaderBox{
	z-index: 100;
	width: 325px;
	margin: 0 0 0 auto;
}
div.cameraDataBox{
	position:relative;
	top:0;
	left:0;
	margin-top: -26px;
}
div.cameraDataBox table{
	width:457px;
	height: auto;
	margin-bottom: 7px;
}
ul.timeMode{
	left: 0;
}
div.cameraDataBox img{
	width: 640px;
	height: 480px;
	margin-top: 7px;
}
/*[01]注意書き*/
div.cameraDataBox .cameraNotice{
	margin-left: 0px;
	margin-bottom: -5px;
}
/*=========================
	カメラ画像画面＠スライダー
  =========================*/
#dataHeaderBox .timeSliderBox{
	display:block;
	width:auto;
	height: 25px;
	position:relative;
	top:0;
	right:0;
	overflow:hidden;
	text-align:right;
}
#dataHeaderBox ul.timeSlider{
	position: relative;
	top: 0;
	right:0;
	margin: 3px 0 0 auto;
	width: 300px;
	font-size: 0;
	z-index: 100;
}
/* バー */
#dataHeaderBox ul.timeSlider li.motionBar{
	display: inline-block;
	width:47px;
	height:20px;
	margin: 0 1px;
	vertical-align: top;
}
#dataHeaderBox ul.timeSlider li.motionBar a,
#dataHeaderBox ul.timeSlider li.motionBar span{
	display: block;
	width: 100%;
	font-size: 12px;
	line-height: 20px;
	text-align: center;
	background: #D9E7ED;
	color: #1C486F;
	cursor: default;
	text-decoration: none;
}
/* バー＠hover */
#dataHeaderBox ul.timeSlider li.motionBar a:HOVER{
	background: #E8F1F4;
	color: #7FA5BB;
	cursor: pointer;
}
/* バー＠選択中 */
#dataHeaderBox ul.timeSlider li.motionBar.is-selected a,/*[A-01]*/
#dataHeaderBox ul.timeSlider li.motionBar.is-selected span{
	background: #0B6BA4;
	color: #fff;
	cursor: default;
	pointer-events: none;/*[A-01]*/
}
/* スライダーボタン */
#dataHeaderBox ul.timeSlider li.sliderBtn{
	display: inline-block;
	margin: 0 3px;
}
#dataHeaderBox ul.timeSlider li.sliderBtn a{
	display: block;
	width: 25px;
	height: 21px;
	background: url(../images/button/btn_timeSlider.png) no-repeat left top;
}
/* スライダーボタン＠戻る */
#dataHeaderBox ul.timeSlider li.prevImg a{
	background-position: -95px top;
}
#dataHeaderBox ul.timeSlider li.prevImg a:HOVER{
	background-position: -95px -21px;
}
/* スライダーボタン＠進む */
#dataHeaderBox ul.timeSlider li.nextImg a{
	background-position: -120px top;
}
#dataHeaderBox ul.timeSlider li.nextImg a:HOVER{
	background-position: -120px -21px;
}
/* スライダーボタン＠最新 */
#dataHeaderBox ul.timeSlider li.latestImg{
	margin:0;
}
#dataHeaderBox ul.timeSlider li.latestImg a{
	background-position: -145px top;
}
#dataHeaderBox ul.timeSlider li.latestImg a:HOVER{
	background-position: -145px -21px;
}

/*=========================
	[A-01]カメラ画像画面＠種別・平常時画像切替
  =========================*/
.timeBox{
	font-size: 0;
}
ul.timeMode{
	width: auto;
	display: inline-block;
	top:0;
}
ul.timeMode + ul.timeMode{
	margin-left: 20px;
}
ul.timeMode li.is-selected a,
ul.timeMode li.is-selected span{
	color: #fff;
	text-decoration: none;
	cursor: default;
	pointer-events: none;
}
ul.timeMode li.is-selected{
	cursor: default;
	pointer-events: none;
}
ul.timeMode li.is-disabled a,
ul.timeMode li.is-disabled span{
	color: #cdcdcd;
	text-decoration: none;
	cursor: default;
	pointer-events: none;
}
ul.timeMode li.is-disabled{
	cursor: default;
	pointer-events: none;
	opacity: 0;
}