@charset "UTF-8";

body {
	font-family: "Meiryo", "Meiryo UI","qMmpS Pro W3","Hiragino Kaku Gothic Pro","lr oSVbN","Osaka",
	sans-serif;
	font-size: 14px;
	line-height: 1.5em;
	min-height: 100%;
}

#wrapper{
	width:1232px;
	display: block;
	/*overflow: hidden;*/
	margin:0 auto;

}

/* ==========================
Header
========================== */
#header{
	display: block;
	overflow: hidden;
	width:100%;
	height:40px;
	background-color:#c97510;
	position:relative;
	letter-spacing: -.4em;
}

#header input[type='button']{
	width:70px;
}

#header > h1{
	display:inline-block;
	width:270px;
	float:left;
	margin-top:8px;
	padding-left: 10px;
}

#header > h1 > span{
	display:none;
}

#header > h2{
	display:inline-block;
	width: 630px;
	height: 28px;
	position:relative;
	margin-top:6px;
	background-color: #FFFFFF;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	padding: 0 15px;

	/*letter-spacing: -0.4em;*/
	float: right;
}

#header > h2 > p{
	display: block;
	overflow:hidden;
	font-size:14px;
	font-weight: bold;
	color:#666600;
	line-height: 28px;
	margin-right:80px;
	white-space: nowrap;
	letter-spacing: normal;
}

#header > h2 > a{
	position:absolute;
	top:5px;
	right:10px;
}


#header > .exBTns{
	display:inline-block;
	overflow:hidden;
	float:right;
	letter-spacing: -0.4em;
	margin:10px 10px 0 0;
}


#header > .exBTns > a{
	margin-left:7px;
}

.grayBtn{
	display:inline-block;
	overflow:hidden;
	font-size:12px;
	text-align:center;
	color:#000000;
	text-decoration:none;
	height:20px;
	line-height:20px;
	letter-spacing: normal;
	padding:0 1em;
	border:1px solid #707070;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#eeeeee+0,cccccc+100;Gren+3D */
	background: #eeeeee; /* Old browsers */
	background: -moz-linear-gradient(top,  #eeeeee 0%, #cccccc 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #eeeeee 0%,#cccccc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */

}

.grayBtn:active{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cccccc+0,eeeeee+100 */
	background: #cccccc; /* Old browsers */
	background: -moz-linear-gradient(top,  #cccccc 0%, #eeeeee 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #cccccc 0%,#eeeeee 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #cccccc 0%,#eeeeee 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
}


/* ==========================
Pull Down Menu
========================== */
#chartList{
	display: block;
	width:1077px;
	float:right;
	background: #8a9b0f;
}

ul#gNAvi{
	display: block;
	width:100%;
}

ul#gNAvi >li{
	display:block;
	float:left;
	width:10%;
}

#gNAvi li ul{
  display: none;
}
#gNAvi li:hover ul{
  display: block;
}

.datasList a.current{
	color:#FF00FF;
}

/* ============= */

.dropmenu{
  *zoom: 1;
  list-style-type: none;
  padding: 0;
}
.dropmenu:before, .dropmenu:after{
  content: "";
  display: table;
}
.dropmenu:after{
  clear: both;
}
.dropmenu li{
  position: relative;
  width: 20%;
  float: left;
  margin: 0;
  padding: 0;
  text-align: center;
}
.dropmenu li a{
  display: block;
  margin: 0;
  padding: 10px 0 10px;
  background: #8a9b0f;
  color: #fff;
  font-size: 12px;
  line-height: 1.25em;
  text-decoration: none;
}
.dropmenu li ul{
  list-style: none;
  position: absolute;
  z-index: 9999;
  top: 100%;
  left: 0;
  margin: 0;
  padding: 0;
	width:400px;
	white-space: nowrap;
}

.dropmenu li:nth-child(8) ul,
.dropmenu li:nth-child(9) ul,
.dropmenu li:nth-child(10) ul{
	left:auto;
	right: 0;
}

.dropmenu li ul li{
  width: 100%;
}
.dropmenu li ul li a{
  padding: 6px 10px;
  border-top: 1px solid #7c8c0e;
  background: #6e7c0c;
  text-align: left;
}
.dropmenu li:hover > a{
  background: #6e7c0c;
}
.dropmenu li a:hover{
  background: #616d0b;
}

.dropmenu li ul li.nodata a{
	pointer-events:none;
	color:#333333;
}

/* ==========================
Side Menu
========================== */
#sideMenu{
	display: block;
	overflow: hidden;
	width:153px;
	height:auto;
	min-height:800px;
	padding:0 0 0;
	background-color:#bdccd4;
	float:left;
	font-size: 12px;
}

#sideMenu > p{
	display:block;
	overflow: hidden;
	padding:5px 0;
	text-align:center;
}

#sideMenu > p:nth-child(2){
 background-color:#faeee4;
 padding:5px 0;
}

#sideMenu > p:nth-child(4){
 border-top:3px solid #FFFFFF;
}

#sideMenu input[type='button']{
	width:90px;
}

.twinBtns > input[type='button']{
	width:45%!important;
}

.nameIndex{
	display:block;
	overflow:hidden;
	padding:2px 0;
}

.nameIndex h3{
	display:none;
}

#contryList{
	background-color:#f5ddc9;
}
 
#groupList{
	background-color:#f6c6ba;
}

#exList{
	background-color:#d0d0d0;
}

.nameIndex > label{
	display:block;
	margin:0 5px;
	line-height: 100%;
	cursor:pointer;
}


/* ==========================
Main Content
========================== */
#mainContent{
	display: block;
	position:relative;
	width:1077px;
	overflow: hidden;
	float:right;
}

/*#chartWinds,*/
#svgMap{
	display: block;
	overflow: hidden;
	width:1077px;
	height:774px;
}
#chartWinds{
	position:absolute;
	top:0;
	left:0;
}


#update {
    display: block;
    overflow: hidden;
    width: 100%;
    font-size: 90%;
    color: #777777;
    background-color: #ffffff;
    text-align: right;
    padding: 5px 5px 0px 0px;
}

/* ==========================
Fotter
========================== */
#footer{
	display: block;
	overflow: hidden;
	width:100%;
	height:75px;
	clear: both;
	background-color:#ffffff;
}

#footer > p{
	display: block;
	overflow: hidden;
	color:#777777;
	text-align:center;
	padding: 5px 0px 10px 0px;
}


/* ==========================
Loading Layer
========================== */
#loadingPanel{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	background-color:rgba(255,255,255,0.75);
	display:none;
}

#loadingPanel h3{
	text-align: center;
	font-size: 2em;
	padding:25%;
}


/* ============= */

#hideBox{
	display:none;
}

#chartBox,#printChart{
	display:block;
	overflow: hidden;
	width:1000px;
	height:500px;
	margin:0 auto;
	border:1px solid #CCCCCC;
}

#cboxOverlay {
  background: #000000!important;
}

#printBox{
	width:100%;
	display:none;
}