//    filename    : style.less
//    description : the stylesheet for well-being.link
//    author      : Yuta Sato (a.k.a usatox)
//    modified    : 2015.06.30


// Dependencies
// ------------
@import "../bower_components/preboot/less/normalize.less";
@import "../bower_components/preboot/less/preboot.less";


// Shared variables
// ----------------

// Define the color palette.
@red          : #f44336;
@pink         : #e91e63;
@purple       : #9c27b0;
@deep-purple  : #673ab7;
@indigo       : #3f51b5;
@blue         : #2196f3;
@light-blue   : #03a9f4;
@cyan         : #00bcd4;
@teal         : #009688;
@green        : #4caf50;
@light-green  : #8bc34a;
@lime         : #cddc39;
@yellow       : #ffeb3b;
@amber        : #ffc107;
@orange       : #ff9800;
@deep-orange  : #ff5722;
@brown        : #795548;
@grey         : #9e9e9e;
@blue-grey    : #607d8b;
@black        : #000000;
@white        : #ffffff;

// Setup the preboot variables.
@brand-primary: @teal;
@brand-success: @green;
@brand-warning: @amber;
@brand-danger: @red;
@brand-info: @light-blue;

@body-background: darken(@white, 10);
@text-color: lighten(@black, 25);

@link-color: @brand-primary;
@link-color-hover: @link-color;

@font-size-base: 16px;
@font-family-sans-serif: 'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
@font-family-serif: 'Hiragino Mincho Pro','MS PMincho',serif;
@font-family-base: @font-family-sans-serif;

@grid-float-break-point: 768px;
@grid-column-padding: 0;
@grid-columns: 12;

// Define the other shared variables.
@content-width: 978px;
@mobile-width: @grid-float-break-point;

@button-background: @blue;
@button-text-color: @white;
@button-shadow-color: @grey;
@button-background-disabled: lighten(@button-background, 20);
@button-text-color-disabled: lighten(@button-text-color, 20);

@border-color: @black-30;


// Base rules
// ----------
* {
  .box-sizing(border-box);
}

html {
  height: 100%;
}

body {
  margin: 0;
  display: table;
  width:100%;
  height: 100%;
  font-size: @font-size-base;
  font-family: @font-family-base;
  color: @text-color;
  background: @body-background;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

input[type="submit"], input[type="button"], button {
  // See `.button` class in module rules.
}

input[type="text"], input[type="search"], input[type="tel"], input[type="url"],
input[type="email"], input[type="password"], input[type="datetime"], input[type="date"],
input[type="month"], input[type="week"], input[type="time"], input[type="datetime-local"],
input[type="number"], input[type="range"], input[type=""], input[type="file"],
textarea, select {
  border: 1px solid @border-color;
}


a {
  color: @link-color;
  text-decoration: none;

  &:hover {
    color: @link-color-hover;
    text-decoration: underline;
  }
}

ul, ol {
  padding: 0;
  list-style-type: none;
  list-style-position: inside;
}

blockquote {
  margin-left: 0;
  padding: 8px 16px;
  background: @white;
  border: 1px solid @border-color;
}

// Layout rules
// ------------
.header {
  display: table-row;
  height: 240px;
  background: @white url(../images/header-background.jpg) no-repeat center center;
  background-size: cover;

  .content {
    height: 240px;
  }

  .header-title-wrapper {
    .make-column(7);
    display: table;
    height: 100%;
  }
  
  .header-title {
    display: table-cell;
    vertical-align: middle;
  }

  .header-title-link {
    text-shadow: 0px 0px 3px @black;
    text-decoration: none;
  }

  .header-title-main {
    color: @white;
    font-size: @font-size-large * 1.5;
  }

  .header-title-sub {
    color: @white;
    font-size: @font-size-small * 1.35;
  }

  .header-searchform {
    .make-column(4);
    .make-column-offset(1);
    padding: 1em 0;
  }

  @media (max-width: @mobile-width) {
    .content {
      height: auto;
    }

    .header-title-wrapper {
      display: block;
    }
    
    .header-title {
      display: block;
      text-align: center;
    }

    .header-searchform {
      margin: 0 auto;
      max-width: 320px;
    }
  }
}

.navmenu {
  display: table-row;
  color: white;
  background: @brand-primary;

  .navmenu-toggle, .navmenu-toggle-label {
    display: none;
  }

  ul {
    display: table;
    table-layout: fixed;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  li {
    display: table-cell;
    text-align: center;
  }

  a {
    display: block;
    padding: 16px;
    color: inherit;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-decoration: none;
    .transition(all .5s ease);

    &:hover {
      background-color: lighten(@brand-primary, 10);
    }
  }

  @media (max-width: @mobile-width) {
    .content {
      width: 100%;
    }

    .navmenu-toggle-label {
      display: block;
      padding: 8px 0;
      text-align: center;
      cursor: pointer;

      &:after {
        position: absolute;
        right: 0;
        padding: 0 16px;
        content: '\002228';
        font-size: @font-size-small;
      }
    }

    ul {
      display: block;
      overflow: hidden;
      max-height: 0;
      // .transition(max-height .5s ease);
    }

    li {
      display: list-item;
      margin: 0;
      padding-right: 0;
    }

    .navmenu-toggle:checked {
      & ~ label {
        color: darken(@white, 20);
        background-color: darken(@brand-primary, 20);
        
        &:after {
          content: '\002227';
        }
      }

      & ~ label ~ ul {
        max-height: 1000px;
        .transition(max-height .5s ease);
      }
    }

  } // @media
}

.main {
  display: table-row;
  height: 100%;
}

.footer {
  display: table-row;
}

// `.content` indicates the inner content area
// that centered in the parent container,
// And it uses as follows:
// ```
// <header><div class="content">...</div></header>
// <main><div class="content">...</div></main>
// <footer><div class="content">...</div></footer>
// ```
.content {
  .clearfix();
  position: relative;
  margin: 0 auto;
  width: 93.75%;
  max-width: @content-width;
}


// Module rules
// ------------
.eyecatch {
  position: relative;

  img {
    width: 100%;
  }

  
}

.primary {
  .make-column(9);
  padding: 1.5em 0;
}

.sidebar {
  .make-column-offset(1);
  .make-column(2);
  padding: 1.5em 0;

  .pickup-menu {
    border-left: 4px solid @brand-primary;
    
    p {
      margin: 0 0 1em 0;
      padding: 0;
    }
    
    a {
      display: block;
      padding: 1em;
      color: @brand-primary;
      font-weight: bold;
      .transition(all .5s ease);
      
      &:hover {
        text-decoration: none;
        background: @white;
      }
    }
  }
}

.searchform {
  label {
    display: none;
    white-space: nowrap;
  }

  input[name="s"] {
    width: 100%;
  }

  table {
    width: 100%;
  }

  td {
    vertical-align: middle;
  }

  td:last-child {
    padding-left: 8px;
  }
}

.wellcome-message {
  padding: 1em;
  color: @white;
  background: @blue-grey;
}

.button {
  display: inline-block;
  padding: 0 1em;
  height: 32px;
  line-height: 32px;
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  font-weight: bold;
  font-size: @font-size-small;
  color: @button-text-color!important;
  background-color: @button-background;

  .box-sizing(content-box);
//  .box-shadow(0px 1px 2px @button-shadow-color);
  .transition(all .5s ease);

  &.hover {
    text-decoration: none!important;
  }
  
  &.disabled {
    color: @button-text-color-disabled;
    background-color: @button-background-disabled;
  }

  &.red {
    background-color: @red;
  }

  &.blue {
    background-color: @blue;
  }

  &.brown {
    background-color: @brown;
  }

  &.yellow {
    background-color: @amber;
  }

  &.orange {
    background-color: @orange;
  }

  &.green {
    background-color: @green;
  }

  &.pink {
    background-color: @pink;
  }
}

// **Unify button styles**.
a.button, input[type="submit"], input[type="button"], button {
  .button;
  &:hover { .button.hover; }
  &:disabled { .button.disabled; }
}

.back-to-top {
  z-index: 9999;
  position: fixed;
  bottom: 16px;
  right: 16px;
  .button;
}

.page .primary {
  h2 {
    margin-top: 0;
    font-size: @font-size-large * 1.5;
    border-bottom: 4px solid @brand-primary;
  }

  h3 {
    font-size: @font-size-large;;
    border-bottom: 1px dotted @brand-primary;
  }

  table {
    min-width: 75%;
    border-spacing: 0;
    border-collapse: collapse;
    // border-top: 1px solid @white;
    // border-left: 1px solid @white;
    color: @white;
  }

  th {
    padding: .5em 1em;
    text-align: left;
    background: darken(@teal, 10%);
    border-right: 1px solid @body-background;
    border-bottom: 1px solid @body-background;
  }

  td {
    padding: .5em 1em;
    background: @teal;
    border-right: 1px solid @body-background;
    border-bottom: 1px solid @body-background;
  }
}

/* -- post classes -- */
.post {
  h1 {
    
  }
  h2 {
    
  }

  .pager {
    display: table;
    table-layout: fixed;
    width: 100%;
    margin: 16px 0;
    border-top: 1px solid @border-color;

    a {
      display: table-cell;
      text-align: center;
      padding: 16px;
    }
  }
}

.post-header {
  padding-left: 16px;
  border-left: 4px solid @brand-primary;
}
.post-header-title {
  font-size: @font-size-large;

  a {
    color: @text-color;
  }
}
.post-header-meta {
  color: @black-70;
  font-size: @font-size-small;
}
.post-header-meta-author {
  display: none;
}
.post-body {
  margin-top: 1em;
  border-top: 1px solid @border-color;
}
.post-footer {
  border-top: 1px dotted @border-color;
}


/* -- wp classes -- */
.alignright {
  display: inline;
  float: right;
  margin: 0 0 16px 16px;

  @media (max-width: @mobile-width) {
    & {
      display: block;
      float: none;
      margin: 16px auto;
    }
  }
}
.alignleft {
  display: inline;
  float: left;
  margin: 0 16px 16px 0;

  @media (max-width: @mobile-width) {
    & {
      display: block;
      float: none;
      margin: 16px auto;
    }
  }
}
.aligncenter {
  display: block;
  margin-right: auto;
  margin-left: auto;
}
.wp-caption {
  padding: 8px;
//  background-color: lighten(@color-silver, 20);
//  border: 1px solid @color-silver;
}
.wp-caption-text {
  font-size: @font-size-small;
}
.sticky {

}
.gallery-caption {

}
.bypostauthor {

}