@import "../bower_components/normalize-css/normalize.css";
@import "../bower_components/semantic-grid/stylesheets/less/grid.less";
@import "./color.less";
@import "./fonts.less";

@total-width   : 100%;
@center-width  : 960px;
@footer-height : 64px;
@break-point   : 782px;
@gutter-width  : 48px;

// Pass @break-point to JS.
// ```
// $('<div id="less-break-point">').appendTo(document.body).width()
// ```
#less-break-point { display: none; width: @break-point; }


html {
  height: 100%;
}

body {
  position: relative;
  margin: 0;
  min-height: 100%;
  color: @color-black;
  background: @color-ja-pink-lighter;
}

a { color: inherit; }

.center {
  overflow: hidden;
  margin: 0 auto;
  width: 93.75%!important;
  max-width: @center-width;
}

header {
  .center {
    background: @color-white;
    border-top: 6px solid @color-ja-pink-darker;
    border-bottom: 1px solid @color-silver;
  }

  overflow: hidden;
  line-height: 96px;

  h1 {
    .column(8);
    .font-size(24);
  }

  nav {
    .column(4);
    text-align: right;
    a {
      padding: 0.8em;
      font-weight: bold;
      text-decoration: none;
      color: @color-white;
      background: @color-ja-pink-darker;
    }
  }

  @media only screen and (max-width: @break-point) {
    h1 {
      .column(12);
      .font-size(18);
      text-align: center;
    }
    nav {
      display: none;
    }
  }
}

footer {
  overlow: hidden;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: @footer-height;
  line-height: @footer-height;
  color: @color-white;
  background: @color-ja-pink-darker;

  p {
    margin: 0;
  }

  .copyright {
    .column(6);
    white-space: nowrap;
  }

  .provided {
    .column(6);
    text-align: right;
    white-space: nowrap;
  }

  @media only screen and (max-width: @break-point) {
    .copyright {
      .column(12);
      text-align: center;
    }
    .provided {
      display: none;
    }
  }
}

main {
  padding-bottom: @footer-height + 32px;

  .center {
    background: @color-white;
  }

  h1 {
    .font-size(24);
    border-bottom: 3px solid @color-ja-pink-darker;

    @media screen and(max-width: @break-point) {
      & { .font-size(18); }
    }
  }

  #latestData {
    margin-top: 1em;

    h1 {
      .column(12)
    }

    ul {
      .column(12);
      margin-top: 1em;
      margin-left: 0;
    }

    #taiaki, #totsurazawa {
      .column(6);

      table {
        .font-family(monospace);

        margin-top: 1em;
        width: 100%;
        border-spacing: 0;
        border-collapse: collapse;
        border-top: 1px solid @color-silver;
        border-left: 1px solid @color-silver;

        caption {
          .font-size(18);
          padding: 0.5em;
          font-weight: bold;
          background: @color-cloud;
          border: solid @color-silver;
          border-width: 1px 1px 0 1px;
        }

        th {
          padding: 8px;
          text-align: left;
          background: @color-cloud;
          border-right: 1px solid @color-silver;
          border-bottom: 1px solid @color-silver;
        }

        td {
          padding: 8px;
          border-right: 1px solid @color-silver;
          border-bottom: 1px solid @color-silver;

          img {
            width: 100%;
            height: auto;
          }
        }

        a {
          color: #1111bb;
        }
      }

      @media screen and(max-width: @break-point) {
        & { .column(12); }
      }
    }
  }

  #description {
    .column(12);
    margin-top: 2em;

    .article-base {
      overflow: hidden;
      padding: 0 1em;
      background: @color-white;
      border: solid @color-silver;
      border-width: 0 1px 1px 1px;
    }

    p {
      margin-bottom: 2em;
      text-indent: 0.5em;
      line-height: 1.5;
    }

    figure {
      margin: 0 0 1em 2em;
      padding: 0.5em;
      text-align: center;
      background: @color-cloud;
      border: 1px solid @color-silver;
    }

    img {
      max-width: 240px;
      height: auto;
    }

    .pict {
      float: right;
    }

    @media only screen and (max-width: @break-point) {
      .text { display: table-header-group; }
      .pict { float: none; display: table-row-group; text-align: center; }
      figure { display: inline-block; margin: 1em; }
    }
  }

  #scrollup {
    .column(12);
    margin-top: 2em;
    text-align: right;

    a {
      color: #1111bb;
    }

    @media only screen and (max-width: @break-point) {
      & { text-align: center; }
    }
  }
}