/* _/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
 JAXA/EORC Typhoon DB CSS

_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/ */
div#container {
  margin:0px auto;
}

div#titlearea {
  width: 1200px;
  height: 400px;
  margin:0px auto 10px auto;
  position: relative;
  top: 0px;
  left:0px;
}

div#label {
  position: absolute;
  top: 0px;
  left:0px;
  font-size: 24pt;
  line-height: 1.2em;
  
}
div#track {
  position: absolute;
  top: 90px;
  left:0px;
}
div#track img{
  width: 300px;
  border: 1px solid blue;
  cursor: pointer;
}

ul#menu {
  position: absolute;
  top: 0px;
  right:0px;
  margin: 0px 0px 0px auto;
  list-style-type:none;
}
  ul#menu li{
    float: left;
    margin: 0px 10px;
  }



table.info {
  position: absolute;
  top: 90px;
  left:350px;
  width: 800px;
  border: 0px solid black;
  margin: 10px auto;
  border-collapse:collapse;
}
  table.info th{
    text-align:left;
    font-size: 11pt;
    border-bottom: 1px dotted gray;
    padding-top: 10px; 
  }
  table.info td{
    text-align: center;
    border-bottom: 1px dotted gray;
    padding-top: 10px; 
    font-size: 11pt;
  }
    table.info td>img{
      width: 300px;
    }

table.list {
  border: 0px solid black;
  margin: 10px auto;
  border-collapse: collapse;
}
  table.list th{
    font-size: 9pt;
    background-color:skyblue;
    border: 1px solid black;
  }
  table.list td{
    height: 160px;
    text-align:center;
    border-bottom: 1px solid gray;
  }
  table.list td:last-child{
    text-align:left;
  }
    table.list img{
      width: 120px;
      height: 120px;
      border: 1px solid blue;
      box-shadow: 2px 2px 3px rgba(0,0,0,0.6);
      cursor: pointer;
    }

    table.list img.nodata{
      width: 120px;
      height: 120px;
      border: 0px solid blue;
      box-shadow: 2px 2px 3px rgba(0,0,0,0);
      cursor: default;
    }

table.detail {
  margin: 0px auto;
  border-spacing: 0px 0px;
}
  table.detail td{
    font-size: 9.5pt;
    height: 20px;
    text-align:left;
    border-bottom: 0px solid gray;
    vertical-align: top;
  }
  table.detail td.c1 {
    width: 110px;
    text-decoration:underline;
    padding-left: 10px;
  }
  table.detail td.c2 {
    width: 230px;
  }

table#searchresult {
  width: 800px;
  margin: 0px auto;
  border-collapse: collapse;
}
  table#searchresult td.c0{
    vertical-align: middle;
    text-align:center;
    border-bottom: 1px dotted black;
    padding: 5px 0px;
  }

  table#searchresult img{
    margin: 5px auto;
  }
  table#searchresult h2{
    text-align:left;
    margin: 0px;
  }

table.detail2 {
  margin: 5px auto 10px 20px;
  border:0px solid gray;
  border-collapse: collapse;
}
  table.detail2 th.c1 {
    height: 20px;
    width: 250px;
    padding-left: 10px;
    font-size: 9pt;
    text-align:left;
    border: 1px solid gray;
    background-color:lavender;
  }

  table.detail2 td.c2 {
    height: 20px;
    text-align:center;
    width: 200px;
    font-size: 9pt;
    border: 1px solid gray;
  }

a.gsmap_link {
  border: 1px solid gray;
  border-radius: 4px;
  background-color: rgb(200,200,200);
  text-decoration: none;
  font-size: 9pt;
  padding: 5px 10px;
  display: block;
  text-align:center;
}
  a.gsmap_link:hover {
    background-color: rgb(220,220,220);
  }

div#toggle_cont {
  text-align: center;
}
  div#toggle_cont > button {
    width: 200px;
    margin: 0px 10px;
  }

  div#toggle_cont > button.on {
    background-color: lightgreen;
  }

/* color bar and button for satellite toggle */
tr.colorbar th {
    background-color: #fff;
    border: none;
    height: 45px;
    background-image: var(--bg-top, none), var(--bg-mid, none), var(--bg-btm, none);
    background-repeat: repeat-x, repeat-x, repeat-x;
    background-position-y: top, center, bottom;
    background-position-x: left;
    background-size: auto 15px;
}
/* ボタンがonではないとき（グレーバーを割り当て） */
tr.colorbar th.ecare { --bg-top: url(https://sharaku.eorc.jaxa.jp/TYP_DB/images/bar_earthcare_txt_gray.png); }
tr.colorbar th.gpm   { --bg-mid: url(https://sharaku.eorc.jaxa.jp/TYP_DB/images/bar_gpm_txt_gray.png); }
tr.colorbar th.amsr  { --bg-btm: url(https://sharaku.eorc.jaxa.jp/TYP_DB/images/bar_amsr_txt_gray.png); }

/* ボタンが on のときはカラーバー */
#toggle_cont:has(#ecarebtn.on) ~ table.list tr.colorbar th.ecare { 
  --bg-top: url(https://sharaku.eorc.jaxa.jp/TYP_DB/images/bar_earthcare_txt.png); 
}
#toggle_cont:has(#gpmbtn.on) ~ table.list tr.colorbar th.gpm { 
  --bg-mid: url(https://sharaku.eorc.jaxa.jp/TYP_DB/images/bar_gpm_txt.png); 
}
#toggle_cont:has(#amsrbtn.on) ~ table.list tr.colorbar th.amsr { 
  --bg-btm: url(https://sharaku.eorc.jaxa.jp/TYP_DB/images/bar_amsr_txt.png); 
}

div#toggle_cont > button {
    width: 250px;
    background: #aaa;
    border: none;
    padding: 0px 0 5px;
    border-radius: 3px;
    box-shadow: 2px 2px 2px #999;
    color: #fff
}

/*
div#toggle_cont > button span::after {
    content: "非表示中";
}
*/

div#toggle_cont > button.on {
    box-shadow: 2px 2px 2px #999;
}

/*
div#toggle_cont > button.on span::after {
    content: "表示中　";
}
*/

div#toggle_cont > button#ecarebtn.on {
  background: linear-gradient(to bottom, #02c2ad, #029483);
}

div#toggle_cont > button#gpmbtn.on {
  background: linear-gradient(to bottom, #e68a00, #c67000);
}

div#toggle_cont > button#amsrbtn.on {
  background: linear-gradient(to bottom, #0070c0, #005096);
}
div#toggle_cont > button#ecarebtn.on::before, div#toggle_cont > button#gpmbtn.on::before, div#toggle_cont > button#amsrbtn.on::before {
    content: ""
}
div#toggle_cont > button#ecarebtn::before {
    content: "■ ";
    color: #029483;
    font-size: x-large;
}
div#toggle_cont > button#gpmbtn::before {
    content: "■ ";
    color: #c67000;
    font-size: x-large;
}
div#toggle_cont > button#amsrbtn::before {
    content: "■ ";
    color: #005096;
    font-size: x-large;
}div#toggle_cont > button:hover {
box-shadow: 3px 3px 2px #999 !important;
transform: translate(-1px, -1px) !important;
}