/*台風/天気図PC用*/
div.imglayer{
  /* 背景の余白（top, right, bottom, left） */
	padding: 10px 0 0;
	background:#fff;
}

.imglayer .realcontents{
	width: auto;
	max-width: 500px;
	position: relative;
	margin: auto;
}

.imglayer .weeklycontents{
	width: auto;
	max-width: 500px;
	position: relative;
	margin: auto;
}

div.image_part{
  width:100%;
  /*display:table-cell;*/
  margin:0;
  padding:0;
}

img#WeatherImage{
  max-width:100%;
  width: 100%;
}

table.typhoon_figure{
  width:600px;
  display:none;
  margin-left:auto;
  margin-right:auto;
  padding: 15px;
}

tr.typhoon_image{
  width:100%;
}

tr.typhoon_image td{
  width:100%;
}

tr.typhoon_image td div{
/*
  width:100%;
  margin:0;
  padding:0;
*/
}

tr.typhoon_image td div img{
	max-width:100%;
	width: 100%;
}

tr.typhoon_type{
  border-collapse: collapse;
}

tr.typhoon_type td{
  width:100%;
  display:table;
  table-layout: fixed;
}

tr.typhoon_type td div{
  display:table-cell;
  cursor:pointer;
  text-align:center;
  border:2px solid #808080;
  background-color:#C0C0C0;
  color: #000000;
  font-size:0.8em;
}

tr.typhoon_state{
  width:100%;
  display:table;
  table-layout: fixed;
  border-collapse: collapse;
}

tr.typhoon_state td div{
  width:100%;
  background-color: #C0C0C0;
  color: #000000;
  border:2px solid #808080;
}

table.none_type{
  width:90%;
  margin-left:auto;
  margin-right:auto;
}

table.none_type tbody tr td div{
  width:100%;
  margin:100px;
  text-align:center;
}

#img-box{
  width: auto;
  max-width: 500px;
  position: relative;
  margin: 0 auto;
}
#img-box-mini{
	position: absolute;
	top: 0px;
	left: 10px;
	color: #fff;
	display: none;
 }
#img-box-text{
  max-width:40%;
  text-align: center;
  color:#000000;
  background-color: #ffffff;
  margin-top: 15px;
  font-size:0.8em;
  border:solid 1px #000000;
  line-height:12pt;
  padding-top:5px;
  padding-bottom:5px;
}

.typhoonandweatherfigure_header{
  width: 100%;
	margin: 0;
	color: #000000;
	background: #FFFFFF;

	font-size: 14px;
	font-weight: bold;
	font-style: normal;

	text-align: center;
	vertical-align: middle;

	/* 背景の余白（top, right, bottom, left） */
	padding: 2px 0px 2px 0px;
	background: #ffffff;
}

/*上タブ*/
ul.upperTabs{
    margin:0;
    padding:10px 0px 5px 0px;
    text-align: center;
}

ul.upperTabs li{
	font-size:12px;
  margin:-1px;
  padding:4px 0px;
  list-style:none;
  display: -moz-inline-box;
  display: inline-block;
  background-color: #F5F5F5;
  border: 1px solid #B7B7B7;
  color: #A9A9A9;
  width:31%;
  cursor:pointer;
}

ul.upperTabs li.upperTab-left {
  border-top-left-radius:22px;
  border-bottom-left-radius:22px;
}

ul.upperTabs li.upperTab-right {
  border-top-right-radius:22px;
  border-bottom-right-radius:22px;
}

ul.upperTabs li.upperTab-active{
    background:#006ECB;
    border: 1px solid #4690FF;
    color : #fff;
    position:relative;
}

/*実況/予想天気図上タブ*/
.real-tabs {
	width: 100%;
	table-layout: fixed; 	/* 中身の幅を均一で */
	height: 10px;		/* この２つの値を揃えないと、 */
	line-height: 10px;	/* テキストが中央に表示されない */

	color: #000000;
	text-align: center;
	font-size: 12px;
	font-weight: bold;

	border-collapse: collapse;	/* 境界線を重ねて表示 */
	background: #efefef;
}

.real-tabs .tab-header {
	/* 背景グラデーション表示 */
	background: #7C94B2;	/* IEはグラデーションなし */
	filter: progid:DXImageTransform.Microsoft.Gradient
		(Enabled='1', GradientType='0', StartColorStr='#819CBC', EndColorStr='#758AA4'); /* IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#819CBC), to(#758AA4)); /* Chrome,Safari */
}

.real-tabs td {
	/* コンテンツ間の余白（top, right, bottom, left） */
	margin: 5px 5px 0px 5px;

	vertical-align: middle;
	border-top:solid 6px #efefef;		/* セルの枠線 */
	border-left:solid 8px #efefef;		/* セルの枠線 */
	border-right:solid 8px #efefef;		/* セルの枠線 */
	border-radius: 16px 16px 0px 0px;	/* 角丸 */

	background: #d5d5d5;
}

.real-tabs .cell {
	padding: 7px;		/* 上下の余白 */
  color: #fff; 			/* 文字の色 */	
  font-size: 14px;
  cursor:pointer;
}

/* アクティブなタブだけ色が異なる */
.real-tabs .active {
	background: #ffffff;
	color:#000;
}

.real-tabs .active .cell{
	color:#000;
}

/*週間予報天気図上タブ*/
.weekly-tabs {
	width: 100%;
	table-layout: fixed; 	/* 中身の幅を均一で */
	height: 10px;		/* この２つの値を揃えないと、 */
	line-height: 10px;	/* テキストが中央に表示されない */

	color: #000000;
	text-align: center;
	font-size: 12px;
	font-weight: bold;

	border-collapse: collapse;	/* 境界線を重ねて表示 */
	background: #efefef;
}

.weekly-tabs .tab-header {
	/* 背景グラデーション表示 */
	background: #7C94B2;	/* IEはグラデーションなし */
	filter: progid:DXImageTransform.Microsoft.Gradient
		(Enabled='1', GradientType='0', StartColorStr='#819CBC', EndColorStr='#758AA4'); /* IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#819CBC), to(#758AA4)); /* Chrome,Safari */
}

.weekly-tabs td {
	/* コンテンツ間の余白（top, right, bottom, left） */
	margin: 5px 5px 0px 5px;

	vertical-align: middle;
	border-top:solid 6px #efefef;		/* セルの枠線 */
	border-left:solid 8px #efefef;		/* セルの枠線 */
	border-right:solid 8px #efefef;		/* セルの枠線 */
	border-radius: 16px 16px 0px 0px;	/* 角丸 */

	background: #d5d5d5;
}

.weekly-tabs .cell {
	padding: 7px;		/* 上下の余白 */
  color: #fff; 			/* 文字の色 */
  font-size: 10px;
  cursor:pointer;
}

/* アクティブなタブだけ色が異なる */
.weekly-tabs .active {
	background: #ffffff;
}

.weekly-tabs .active .cell{
	color: #000000;
}

/*台風進路図上タブ*/
.typhoon-tabs {
	width: 100%;
	table-layout: fixed; 	/* 中身の幅を均一で */
	height: 10px;		/* この２つの値を揃えないと、 */
	line-height: 10px;	/* テキストが中央に表示されない */

	color: #000000;
	text-align: center;
	font-size: 12px;
	font-weight: bold;

	border-collapse: collapse;	/* 境界線を重ねて表示 */
	background: #393939;
}

.typhoon-tabs .tab-header {
	/* 背景グラデーション表示 */
	background: #7C94B2;	/* IEはグラデーションなし */
	filter: progid:DXImageTransform.Microsoft.Gradient
		(Enabled='1', GradientType='0', StartColorStr='#819CBC', EndColorStr='#758AA4'); /* IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#819CBC), to(#758AA4)); /* Chrome,Safari */
}

.typhoon-tabs td {
	/* コンテンツ間の余白（top, right, bottom, left） */
	margin: 5px 5px 0px 5px;

	vertical-align: middle;
	border-top:solid 6px #393939;		/* セルの枠線 */
	border-left:solid 8px #393939;		/* セルの枠線 */
	border-right:solid 8px #393939;		/* セルの枠線 */
	border-radius: 16px 16px 0px 0px;	/* 角丸 */
}

.typhoon-tabs .cell {
	padding: 7px;		/* 上下の余白 */
  color: #000000; 			/* 文字の色 */
  font-size: 14px;
  cursor:pointer;
}

/* アクティブなタブだけ色が異なる */
.typhoon-tabs .active {
	background: #ffffff;
}