/* _/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
 Sea-Ice monitor
   海氷面積値ページスタイルシート

_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/ */
/* import common style */
@import url("NIPR_seaice_monitor_common.css");

/* -- Extent value area ------------------------------------------ */
div#sicinfo{
  margin       : 0px auto;
  text-align   : center;
  border       : 3px solid dodgerblue;
  border-radius: 5px;
  box-shadow   : 3px 3px 5px rgba(0,0,0,0.8);
  background-color: white;
  width        : 700px;
  height       : auto;
  font-size    : 16pt;
  font-weight  : normal;
  text-shadow  : 1px 1px 2px rgba(0,0,0,0.5);
  position     : relative;
  top          : 10px;
  left         : 0px;
}

/* -- Graph Image area ------------------------------------------- */
div.imagearea{
  text-align      : center;
  border          : 0px solid dodgerblue;
  border-radius   : 5px;
  box-shadow      : 3px 3px 5px rgba(0,0,0,0.8);
  background-color: white;
  width           : 980px;
  position        : relative;
  top             : 0px;
  left            : 0px;
}

img#graph {
  margin : 10px auto;
  width  : 720px;
  height : 450px;
}

div#imagetitle{
  margin     : 0px auto;
  font-weight: bold;
  font-size  : 12pt;
  clear      : both;
  text-shadow  : 1px 1px 2px rgba(0,0,0,0.5);
}

div#comment {
  margin: 0px auto;
  font-size: 9pt;
  width      : 700px;
  text-align : center;
}


input.graphitem {
  width : 450px;
  height          : 25px;
  border          : 0px solid navy;
  background-color: dimgray;
  box-shadow      : 1px 2px 5px rgba(0,0,0,0.9);
  text-shadow     : 2px 2px 2px rgba(0,0,0,0.4);
  color           : white;
  font-weight     : bold;
  font-size       : 10pt;
  margin-top      : 5px;
  cursor          : pointer;
  position        : relative;
  top             : 0px;
  left            : 0px;
}

input.graphitem:active {
  top       : 2px;
  left      : 2px;
  box-shadow: 0px 0px 1px rgba(0,0,0,0.4);
}
  input#ga {
    border-radius: 5px 5px 0px 0px;
  }
  input#gb {
    border-radius: 0px;
  }
  input#gc {
    border-radius: 0px 0px 5px 5px;
  }

div#monitoricon {
  font-size  : 9pt;
  width      : 130px;
  text-align : center;
  text-shadow: 1px 1px 2px rgba(0,0,200,0.4);
  position   : absolute;
  top        : 420px;
  left       : 830px;
}
  div#monitoricon img{
    box-shadow   : 2px 2px 3px rgba(0,0,0,0.8);
    border-radius: 5px;
    border       : 1px solid blue;
    width        : 100px;
    position     : relative;
    top          : 0px;
    left         : 0px;
  }
    div#monitoricon img:hover{
      border: 1px solid hotpink;
      box-shadow   : 2px 2px 3px rgba(200,0,0,0.8);
    }
    div#monitoricon img:active{
      box-shadow   : 0px 0px 4px rgba(200,0,0,0.8);
      top : 2px;
      left: 2px;
    }

#graphImageButton {
  position   : absolute;
  top        : 350px;
  left       : 820px;
}
#selectarea {
  position   : absolute;
  top        : 550px;
  left       : 850px;
}
#selectarea input {
  width           : 100px;
  height          : 25px;
  border          : 0px solid navy;
  background-color: dimgray;
  box-shadow      : 1px 2px 5px rgba(0,0,0,0.9);
  text-shadow     : 2px 2px 2px rgba(0,0,0,0.4);
  color           : white;
  font-weight     : bold;
  font-size       : 10pt;
  margin-top      : 5px;
  cursor          : pointer;
  position        : relative;
  top             : 0px;
  left            : 0px;
  border-radius   : 5px;
}

#selectarea input:active {
  top       : 2px;
  left      : 2px;
  box-shadow: 0px 0px 1px rgba(0,0,0,0.4);
}

div.update{
  text-align : right;
  font-style : italic;
  font-size  : 9pt;
  position   : relative;
  top        : 0px;
  left       : -10px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}

/* -- Document area ---------------------------------------------- */
div.documentarea{
  width    : 980px;
  border   : 0px solid dodgerblue;
  font-size: 10pt;
  position : relative;
  top      : 0px;
  left     : 0px;
}

div.itemlabel {
  background-image   : url(../images/icon_circle.png);
  background-repeat  : no-repeat;
  background-position: 5px 3px;
  background-color   : #3398cd;
  border-radius      : 6px 6px 0px 0px;
  box-shadow         : 1px 1px 4px rgba(0,0,0,0.6);
  padding            : 0px 0px 0px 23px;
  font-size          : 11pt;
  font-weight        : bold;
  color              : white;
  text-shadow        : 2px 2px 2px rgba(0,0,0,0.4);
  position           : relative;
  top                : 0px;
  left               : 0px;
  margin-top         : 10px;
}

div.itemarea {
  background-color: white;
  border-radius   : 0px 0px 6px 6px;
  box-shadow      : 1px 1px 4px rgba(0,0,0,0.6);
  position        : relative;
  padding         : 5px 0px;
  top             : 0px;
  left            : 0px;
  margin-top      : 2px;
}
  div.itemarea ul {
    margin : 0px auto;
  }
  div.itemarea li {
    width : 920px;
  }

  div#dldata {
    height          : 50px;
    margin-bottom   : 5px;
    position        : relative;
    text-align      : center;
  }
    a#csvlink {
      text-decoration : none;
      border          : 1px solid blue;
      border-radius   : 40px;
      background-color: ghostwhite;
      box-shadow      : 1px 2px 5px rgba(0,0,0,0.9);
      text-align      : center;
      text-shadow     : 2px 2px 2px rgba(0,0,0,0.4);
      font-weight     : bold;
      font-size       : 12pt;
      position        : absolute;
      padding         : 10px 20px;
      top             : 50%;
      right           : 50%;
      -webkit-transform : translateY(-50%) translateX(50%);
      -ms-transform     : translateY(-50%) translateX(50%);
      transform         : translateY(-50%) translateX(50%)
    }

    a#csvlink:hover {
      border          : 2px solid hotpink;
      top             : 42%;
      right           : 50%;
      -webkit-transform : translateY(-50%) translateX(50%);
      -ms-transform     : translateY(-50%) translateX(50%);
      transform         : translateY(-50%) translateX(50%)
    }
    a#csvlink:active {
      background-color: hotpink;
      box-shadow      : 0px 0px 4px rgba(0,0,0,0.9);
      color           : white;
      top             : 50%;
      right           : 50%;
      -webkit-transform : translateY(-50%) translateX(50%);
      -ms-transform     : translateY(-50%) translateX(50%);
      transform         : translateY(-50%) translateX(50%)
    }

table#acknowledgment {
  margin: 0px auto;

}
  table#acknowledgment td{
    vertical-align: top;
  }
  table#acknowledgment td.c1{
    width         : 80px;
    font-weight   : bold;
  }
  table#acknowledgment td.c2{
    width: 750px;
  }