@charset "UTF-8";

/*基本設定*/

* {
	margin: 0;
	padding: 0;
}
html {
	width: 100%;
}
body {
	font-family: "メイリオ", "ＭＳ Ｐゴシック", Osaka, sans-serif;
	width: 100%;
}
a {
	text-decoration: none;
	outline: 0;
}
img {
	vertical-align: bottom;
	border: 0;
}
li {
	list-style-type: none;
}

a {
}
a:hover {
}

p{
}


/* div
-----------------------------------------------------------*/

div#mapImg {
	width: 100%;
	text-align: center;
}

div#header,
div.cam_container,
div#footerContents {
}

div#header {
	width: 100%;
	height: 100px;
	background: url(../images/headerbg.jpg) repeat-x top left;
	position: relative;
}
div#header h1 {
	position: absolute;
	top: 0;
	left: 20px;
}

div#bg {
	width: 100%;
	background: url(../images/contents_bg.jpg) repeat-x top left;
	padding: 40px 0 40px 0;
	text-align: center;
}
div#contents {
	width: 100%;
}

div#footer {
	width: 100%;
	border-top: 5px solid #006699;
	text-align: center;
	margin-top: 40px;
}
div#footerContents {
	margin: 10px auto;
	text-align: left;
	width: 850px;
}


/* footer
-----------------------------------------------------------*/

dl.footerAddress {
}
dl.footerAddress dt {
	font-weight: bold;
}
dl.footerAddress dd {
	font-size: 85%;
	line-height: 160%;
}

/*リンク*/

ul.indexLink {
	width: 850px;
	margin: 20px auto 0 auto;
	text-align: left;
}

ul.indexLink li {
	font-size: 85%;
	line-height: 180%;
	background: url(../images/arrow01.gif) no-repeat center left;
	padding-left: 20px;
}

ul.indexLink li a {
	color: black;
	border-bottom: 1px dashed #CCC;
}


/* marquee
-----------------------------------------------------------*/

div#marquee {
	background: #FFCC00 url(../images/yellowbg.jpg) repeat-x bottom left;
	border: 1px solid #FF9900;
	position: absolute;
	top: 50px;
	left: 300px;
	padding: 5px;
}
div#marquee marquee {
	background-color: black;
	color: white;
	width: 600px;
	font-size: 100%;
}


/* カメラ画像関連
-----------------------------------------------------------*/

div#cameraContainer {
	width: 860px;
	margin: 0 auto;
	text-align: left;
}

div.camera {
	width: 160px;
	margin: 0 10px 0 0;
	float: left;
}

div.box {
	margin-bottom: 10px;
}

div.camera h2 {
	font-size: 83%;
	color: white;
	font-weight: normal;
	line-height: 160%;
	min-height: 50px;
	background: black url(../images/river-title-top.jpg) repeat-x top left;
	padding: 5px 10px 0 10px;
	border-left: 5px solid #0099CC;
}

* html body div.camera h2 {
	height: 50px;
}

div.camera h2 a {
	color: white;
	position: relative;
}
div.camera h2 a:hover {
	top: 1px;
	left: 1px;
}

div.camera dl {
	min-height: 40px;
	background: url(../images/img_suii.jpg) no-repeat center left;
	background-color: #EFEFEF;
}
div.camera dt {
	display: none;
}
div.camera dd {
	font-size: 83%;
	text-align: right;
	padding: 10px 10px;
	font-family: Verdana, sans-serif;
}
div.camera dd span.num {
	font-size: 120%;
	margin: 0 10px 0 0;
	font-weight: bold;
}


/* コンテンツページ
-----------------------------------------------------------*/

div#header h2 {
	position: absolute;
	top: 50px;
	left: 320px;
	background: url(../images/i_graph.jpg) no-repeat center left;
	padding-left: 50px;
	color: #CC0000;
}

div#container {
	margin: 0 20px 40px 20px;
}

* html div#container {
}

div#leftSideContents {
	width: 250px;
	margin: 0 0 50px 20px;
}

div#right {
}

div#rightContents {
}

/*左側メニュー*/

div#miniMap {
	margin: 20px 0;
}

h3.menuHeader {
	width: 250px;
	height: 40px;
	font-size: 100%;
	text-align: center;
	line-height: 250%;
	background: url(../images/menu_title_bg.jpg) bottom left no-repeat;
	color: white;
}

ul.menuList {
	border-top: 1px solid #CCC;
	border-left: 1px solid #CCC;
	border-right: 1px solid #CCC;
	margin-bottom: 20px;
}

ul.menuList li {
	background: #FFF url(../images/menu_bg.jpg) repeat-x bottom left;
	font-size: 85%;
	line-height: 180%;
	text-align: center;
}

ul.menuList li a {
	margin: 0 10px;
	color: black;
	position: relative;
}
ul.menuList li a:hover {
	color: black;
	top: 1px;
	left: 1px;
}


table.menuTable {
	border-collapse: collapse;
}
table.menuTable th,
table.menuTable td {
	padding: 5px;
	font-size: 83%;
}

table.menuTable th {
	border: 1px solid #CCC;
	background: #EEE url(../images/graybg2.jpg) repeat-x bottom left;
}

table.menuTable td {
	border: 1px solid #DDD;
	background-color: white;
}

/*レイアウト用テーブル*/

table#layoutTable {
}

table#layoutTable td {
	vertical-align: top;
}

table#layoutTable td#left {
	width: 320px;
}

table#layoutTable td#right {
}

/*データ用テーブル*/

table.dataTable {
	border-collapse: collapse;
	font-size: 100%;
}

table.dataTable th,
table.dataTable td {
	padding: 5px;
	font-size: 85%;
}

table.dataTable th {
	border: 1px solid #CCC;
}

table.dataTable td {
	border: 1px solid #CCC;
	text-align: center;
}

table.dataTable td.grayBg {
	background: white url(../images/gray_bg2.jpg) repeat-x bottom left;
	text-align: center;
}

tr.thBlue th {
	background: #0082BF url(../images/blue_bg.jpg) repeat-x bottom left;
	border: 1px solid #005782;
	color: white;
}

/*画像テーブル*/

table.picTable {
	border-collapse: collapse;
}

table.picTable th,
table.picTable td {
}

table.picTable th {
	background: #0082BF url(../images/blue_bg.jpg) repeat-x bottom left;
	color: white;
	border: 1px solid #0082BF;
	font-size: 85%;
	padding: 2px;
}

table.picTable td {
	font-size: 85%;
	padding: 0;
	margin: 0;
}

/*週画像テーブル*/

table.weekTable {
	border-collapse: collapse;
}

table.weekTable th,
table.weekTable td {
}

table.weekTable th {
	background: #0082BF url(../images/blue_bg.jpg) repeat-x bottom left;
	color: white;
	border: 1px solid #0082BF;
	font-size: 85%;
	padding: 2px;
}

table.weekTable td {
	font-size: 85%;
}

p.time {
	font-weight: bold;
}


/* 汎用スタイル
-----------------------------------------------------------*/

/* =common
-----------------------------------------------------------*/

/*Clear*/

div.hr {
	clear: both;
}

div.hr hr {
	display: none;
}


/*レイアウトテーブル*/

table.layout {
	border-collapse: collapse;
}
table.layout td {
	margin: 0;
	padding: 0;
}
table.layout td img {
	vertical-align: bottom;
}

/*ime-mode*/

.imeoff {
	ime-mode: disabled;
}

/*margin*/

.mb5 {margin-bottom: 5px;}
.mt5 {margin-top: 5px;}
.mlr5 {margin: 0 5px;}
.ml5 {margin-left: 5px;}
.mr5 {margin-right: 5px;}

.mb10 {margin-bottom: 10px;}
.mt10 {margin-top: 10px;}
.mlr10 {margin: 0 10px;}
.ml10 {margin-left: 10px;}
.mr10 {margin-right: 10px;}

.m20 {margin: 20px;}
.mb20 {margin-bottom: 20px;}
.mt20 {margin-top: 20px;}
.mlr20 {margin: 0 20px;}
.ml20 {margin-left: 20px;}
.mr20 {margin-right: 20px;}
.mtb20 {margin: 20px 0;}

.mt30 {margin-top:30px;}
.mb30 {margin-bottom:30px;}

.mt40 {margin-top:40px;}
.mb40 {margin-bottom:40px;}

.mt50 {margin-top:50px;}
.mb50 {margin-bottom:50px;}

/*float*/

.fl {float: left;}
.fr {float: right;}

.txt_l {text-align: left;}
.txt_r {text-align: right;}
.txt_c {text-align: center;}

.img_fl {float: left; margin: 0 10px 10px 0;}
.img_fr {float: right; margin: 0 0 10px 10px;}

/*背景色*/

.bg_white {background-color:white;}
.bg_black {background-color:black;}
.bg_yellow {background-color:#FFFFCC;}

/*文字色*/

.red01 {
	color: #CC0000;
}

/*Clear*/

div.hr {
	clear: both;
}

div.hr hr {
	display: none;
}

/*Clear Fix*/

.clear {
	clear: both;
}

div:after {   
    content: ".";   
    display: block;   
    visibility: hidden;   
    height: 0.1px;   
    font-size: 0.1em;   
    line-height: 0.1%;   
    clear: both;   
} 
div {   
    display: inline-block;   
}