/* _/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
 Typhoon RT

_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/ */
/* body   *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* */
body {
  font-family:'Lucida Grande',
   'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',
   Meiryo, メイリオ, sans-serif;
  background-color  : white;
  margin            : 0px auto;
  padding           : 0px 0px;
  background-image  : url(http://sharaku.eorc.jaxa.jp/TYPHOON_RT/img/background.gif);
  background-repeat : repeat;
  color             : #000000;
  font-size         : 10pt;
  line-height       : 1.2em;
}

div.headercontainer {
  width              : 100%;
  height             : auto;
  position           : relative;
  top                : 0px;
  left               : 0px;
}

div.header {
  width   : 100%;
  height  : 100px;
  margin  : 0px auto;
  position: relative;
  top     : 0px;
  left    : 0px;
  border-left:#00756d 1px solid;
  border-right:#00756d 1px solid;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.6);
}

div.topmenu {
  width           : 100%;
  height          : 25px;
  margin          : 0px auto;
  padding: 0px 10px;
  position        : relative;
  background-color: white;
  border-left     : #00756d 1px solid;
  border-right    : #00756d 1px solid;
  box-shadow      : 2px 2px 4px rgba(0,0,0,0.6);
  z-index : 2;
}

/* Main *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* */
div.mbodycontainer {
  width           : 100%;
  height          : auto;
  position        : relative;
  padding         : 0px 0px;
  top             : 0px;
  left            : 0px;
}

div.mbody {
  width           : 100%;
  height          : auto;
  margin          : 0px auto;
  padding         : 0px 10px;
  position        : relative;
  background-color: white;
  border-left     : #00756d 1px solid;
  border-right    : #00756d 1px solid;
  box-shadow      : 2px 2px 4px rgba(0,0,0,0.6);
  z-index : 3;
}

div.mbody >div#pankuzu{
  position: absolute;
  top     : 0px;
  left    : 5px;
}
div.mbody >div#top_menu{
  position: absolute;
  top     : 0px;
  right   : 110px;
}
div.mbody >div#langchg{
  position: absolute;
  top     : 0px;
  right   : 0px;
}

div.label {
  position:relative;
  width           : 100%;
  height          : 20px;
  padding         : 0px 0px;
  margin          : 0px 0px 10px 0px;
  background-color: #00756d;
  color           : white;
  font-weight     : bold;
  font-size       : 10pt;
  vertical-align  : middle;
  border-bottom:1px solid darkslategray;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
  border-radius: 10px;
  box-shadow:2px 2px 4px rgba(0,0,0,0.3);

}
  div.label >div {
    padding:2px 0px 0px 10px;
  }

div.subdocs{
  padding: 0px 10px;
}

/* Main > Upperarea *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* */
div.mbody >div#margin{
  position: relative;
  top     : 0px;
  left    : 0px;
  width   : 100%;
  height  : 5px;
}

div.mbody >div#upperarea{
  position: relative;
  top     : 25px;
  left    : 0px;
  width   : 100%;
  height  : 215px;
}
div.mbody >div#upperarea > div{
  width  : 335px;
  height : 180px;
  padding: 0px 0px;
  border : 0px solid red;
}

  div.mbody >div#upperarea > div#info {
    position: relative;
    top     : 0px;
    left    : 0px;
    background-color:#f2f2f2;
    padding-bottom:1px;
    height  : auto;
  }

  div.mbody >div#upperarea > div#link {
    position: absolute;
    top     : 0px;
    right   : 0px;
  }
    div#link img.banner{
      vertical-align:top;
      float:right;
      padding:0px 0px 0px 0px;
      margin-left: 3px;
    }

    div.mbody >div#upperarea > div#link > div.subdocs> div#link_title {
      font-weight  : bold;
      margin       : 0px 0px 5px 0px;
      padding      : 0px;
      line-height  : 1.0em;
      border-bottom: 1px dotted black;
    }

/* Main > listarea  *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* */
div.mbody >div#listarea{
  position: relative;
  top     : 0px;
  left    : 0px;
  width   : 100%;
  height  : auto;
}

  div.mbody >div#listarea > div {
    width  : 220px;
    height : 100%;
    padding: 0px 0px;
    border : 0px solid red;
  }
    div.mbody >div#listarea > div > img{
      margin-left:10px;
      box-shadow: 2px 2px 6px rgba(0,0,0,0.6);
    
    }
    div.mbody >div#listarea > div#asiaarea{
        position: relative;
        top     : 0px;
        left    : 5px;
    }
    div.mbody >div#listarea > div#americaarea{
        position: absolute;
        top     : 0px;
        left   : 229px;
        border-left: 1px dotted black;
        border-right: 1px dotted black;
    }
    div.mbody >div#listarea > div#oceaniaarea{
        position: absolute;
        top     : 0px;
        left    : 451px;
    }

    div#listarea  ul.show_all {
      list-style-image:url("http://sharaku.eorc.jaxa.jp/TYPHOON_RT/img/arrow_g.gif");
      padding: 0px 0px 0px 30px;
    }
    div#listarea  ul.act_typ{
      list-style-image:url("http://sharaku.eorc.jaxa.jp/TYPHOON_RT/img/arrow_o.gif");
      padding: 5px 0px 5px 20px;
    }

/* Main > latestarea  *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* */
div.mbody >div#latestarea{
  position: relative;
  top     : 0px;
  left    : 0px;
  width   : 100%;
}

/* Main > typhoonarea *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* */
table.latesttable {

}

table.latesttable th{
  border-bottom:1px dotted black;
  text-align: left;
  font-size:11pt;
  height: 30px;
  vertical-align: bottom;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

table.latesttable tr:first-child>th{
  height: auto;
}

table.latesttable td{
  vertical-align: middle;
  text-align: center;
}
  table.latesttable td>img{
    border:1px solid #336699;
    width : 140px;
    height: 140px;
    box-shadow: 2px 2px 3px rgba(0,0,0,0.4);
    cursor: pointer;
  }

  table.latesttable td>img.arealabel{
    border:0px solid #336699;
    width : 75px;
    height: 15px;
    box-shadow: 0px 0px 0px rgba(0,0,0,0.4);
    cursor: default;
  }


table.latesttable td:last-child{
  vertical-align: top;
  text-align: left;
}
table.latesttable td>ul{
  padding: 0px;
  margin: 0px;
}

table.typinfo {
  border-spacing: 0px 0px;
}
table.typinfo th{
  font-size:9pt;
  height: auto;
  text-shadow: 0px 0px 0px rgba(0,0,0,0.2);
}
table.typinfo td{
  font-size:8pt;
  text-align: left;
  padding-left:10px;
}

/* エリア別台風リスト表示 *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* */
table.arealist {
  width: 400px;
  margin: 0px auto;
  border-spacing: 0 0;
}
  table.arealist th {
    text-align: center;
    background-color:#4682B4;
    color : white;
    font-size: 8pt;
  }
  table.arealist td {
    text-align: center;
    border-bottom: 1px solid silver;
    height: 30px;
  }
  table.arealist tr:nth-child(2n+1) {
    background: #f1f6fc;
  }

/* Footer *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* */
div.footercontainer {
  width     : 100%;
  height    : 100%;
  border-top: 0px solid black;
  position  : relative;
  top: 0px;
  left: 0px;
}

div.footer {
  clear     : both;
  width     : 700px;
  font-size : 10pt;
  margin    : 0px auto;
  padding   : 5px 0px 2px 0px;
  clear     : all;
  border-left:#00756d 1px solid;
  border-right:#00756d 1px solid;
  border-bottom:#00756d 1px solid;
  border-top:#00756d 1px solid;
  position  : relative;
  top: 0px;
  left: 0px;
  text-align:center;
  background-image:url(http://sharaku.eorc.jaxa.jp/TYPHOON_RT/img/footer_background.jpg);
  box-shadow: 2px 2px 4px rgba(0,0,0,0.6);
}

  div#copy{
    color     : navy;
    text-align: left;
    margin-top: 10px;
    padding   : 0px;
  }

  div#footmenu {
    float : right;
    margin: 0px 0px;
  }
    div#footmenu ul{
      list-style-type: none;
      padding        : 0px 0px;
      margin         : 0px 0px;
    }
    div#footmenu li{
      float       : left;
      text-align  : center;
      font-size   : 8pt;
      margin      : 0px 3px;
    }
  div.footer img#logob {
     position: absolute;
     top     : 15px;
     left    : 900px;
  }


/* 見出し *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* */
h1 {
  margin       : 0px 0px 10px 0px;
  padding      : 0px 0px 0px 10px;
  position     : relative;
  top          : 0px;
  left         : 5px;
  text-shadow  : 2px 2px 4px rgba(0,0,0,0.5);
  font-size    : 24pt;
  width        : 960px;
  border-radius: 6px;
  text-shadow  :
       1px  0px 1px rgba(50,50,50,1.0),
       0px -1px 1px rgba(50,50,50,1.0),
      -1px  0px 1px rgba(50,50,50,1.0),
      -1px -1px 1px rgba(50,50,50,1.0),
       1px -1px 1px rgba(50,50,50,1.0),
      -1px  1px 1px rgba(50,50,50,1.0),
       1px  1px 1px rgba(50,50,50,1.0),
       0px  1px 1px rgba(50,50,50,1.0),
       2px  2px 3px rgba(0,0,0,0.6)
  ;
  background-color: #B0C4DE;
  box-shadow      :
    2px 2px 4px rgba(0,0,0,0.5),
    0px 1px 1px rgba(255,255,255,0.4) inset,
    0px -2px 1px rgba(0,0,0,0.4) inset
  ;
  color: white;
}

h2 {
  margin     : 0px 0px 10px 0px;
  padding    : 0px 0px 0px 5px;
  position   : relative;
  top        : 0px;
  left       : 10px;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
  font-size  : 18pt;
  width      : 950px;
  height     : auto;
  border-bottom: 2px solid skyblue;
  border-left: 4px solid skyblue;
  box-shadow : 0px 2px 2px rgba(0,0,200,0.5);
}

h3 {
  margin     : 0px 0px 10px 0px;
  padding    : 0px;
  position   : relative;
  top        : 0px;
  left       : 10px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  font-size  : 14pt;
  width      : 950px;
}

h4 {
  margin     : 0px 0px 10px 0px;
  padding    : 0px 0px 0px 5px;
  position   : relative;
  top        : 0px;
  left       : 10px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  font-size  : 12pt;
  width      : 945px;
  background-color: #B0C4DE;
  box-shadow : 2px 2px 1px rgba(0,0,0,0.5);
}

h5 {
  margin     : 0px 0px 5px 0px;
  padding    : 0px 0px 0px 18px;
  position   : relative;
  top        : 0px;
  left       : 20px;
  font-weight: bold;
  font-size  : 12pt;
  background-image: url(../images/icon_check.png);
  background-repeat: no-repeat;
  background-position: 0px 3px;
  width      : 900px;
}

a:link{
  color:#336699;
}
a:visited{
  color:#336699;
}
a:hover{
  color:#daa520;
}
a{
  text-decoration:none;
}

div#allitems {
  position  : absolute;
  top       : 0px;
  left      : 0px;
  border    : 1px solid gray;
  border-radius   : 5px;
  background-color: white;
  width     : 300px;
  min-height: 20px;
  height    : auto;
  box-shadow: 4px 4px 5px rgba(0,0,0,0.3);
  padding   : 10px;
  font-size : 9pt;
  line-height:1.5em;
  display   : none;
  z-index   : 11;
}

div#allarea {
  position  : absolute;
  top       : 0px;
  left      : 0px;
  width     : 100%;
  height    : 1030px;
  display   : none;
  background-color: rgba(0,0,0,0.3);
  z-index   : 10;
}

div.exp {
  color: #336699;
  cursor:pointer;
  text-decoration:underline;
}

div.exp:hover {
  color: #daa520;
}