@fg-color: hsl(207, 21%, 21%);
@bg-color: #fff;
@link-color: hsl(207, 35%, 42%);
//@btn-bg-color: hsl(177, 52%, 50%);
@btn-bg-color: hsl(199, 100%, 45%);
@btn-fg-color: #fff;

@control-fg-color: @fg-color;
@control-bg-color: #fff;
@control-border-color: fade(@fg-color, 30%);
@control-border: 1px solid @control-border-color;
@control-focus-color: fade(@fg-color, 60%);
@control-disabled-bg-color: @control-border-color;

@button-fg-color: @bg-color;
@button-bg-color: @link-color;

@selecting-bg-color: fade(@fg-color, 20%);



html, body { width: 100%; height: 100%; }



body {
  color: @fg-color;
  background: @bg-color;
  font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
}

a {
  color: @link-color;
  text-decoration: none;
  outline: 0;
}

a:hover,
a:focus {
  //background: @selecting-bg-color;
  text-decoration: none;
  outline: 0;
}






.navbar-default {
  color: @fg-color;
  background-color: @bg-color;
  border: 1px solid transparent;
}

.nav>li>a:hover,
.nav>li>a:focus {
  color: @button-fg-color;
  background: @button-bg-color;
  text-decoration: none;
  outline: 0;
}



.list-group { margin-bottom: 10px; }

.list-group-item {
  color: @control-fg-color;
  background-color: @control-bg-color;
  border-color: @control-border-color;
}

a.list-group-item:hover,
a.list-group-item:focus {
  background-color: @selecting-bg-color;
}

.list-group-item.disabled,
.list-group-item.disabled:hover,
.list-group-item.disabled:focus {
  color: @control-disabled-bg-color;
  background-color: @control-bg-color;
}





h1, .h1, h2, .h2, h3, .h3 {}
h3, .h3 { margin-top: 40px; font-weight: bold; font-size: 21px; }
h1.form, .h1.form { margin-bottom: 40px; }
h3.form, .h3.form { margin-bottom: 15px; }

.form-control {
  color: @control-fg-color;
  background-color: @control-bg-color;
  border: @control-border;
  border-radius: 4px;
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
}

.form-control:focus {
  border-color: @control-focus-color;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  border: 0;
  background-color: @control-disabled-bg-color;
}



@import '/btn.less';
@import '/field.less';





.mind-thread {

  &.list-group-item .title { margin-bottom: 10px; font-size: 21px; }

  .mind-post {

    &:before, &:after { display: table; content: " "; }
    &:after { clear: both; }

    & > * { overflow: hidden; }

    &.mind-reply { margin-top: 20px; }

    .form-group { margin-top: 8px; margin-bottom: 8px; }
    .member-icon { float: left; line-height: 0; padding-right: 8px; }
    .member-name {}
    textarea { resize: none; }

    ul { padding-left: 0; margin: 0; }
    ul.files { padding-left: 0; }
    ul.files li {}
    ul.form-group { padding-left: 0; }

  }
}



.reply { margin-top: 15px; }
.date { color: #aaa; font-size: smaller; }
.deleted { color: #aaa; }







.fa-mind { margin-right: 0.5em; }
.fa-mind-account { margin-right: 0.5em; }
.fa-mind-icon { margin-right: 0.2em; }

body { font-size: 14px; }
.ml8 { margin-left: 8px; }
.ml2em { margin-left: 2em; }

@base-font-size: 14px;
@base-color: hsl(0, 0%, 20%); // 文字色

.mind-header-border {
  width: 100%;

  div:nth-of-type(1) {
    width: 100%;
    height: 5px;
    background-color: #4C301E;
  }
  div:nth-of-type(2) {
    width: 100%;
    height: 3px;
    //background-color: mix(#40210f, #fff, 50%);
    background-color: #A38B77;
  }
  //background-color: mix(#40210f, #fff, 50%);
  //background: linear-gradient(#40210f, #fff);
}

.mind-section {
  .mind-header-section {
    font-size: @base-font-size * 1.5;
    font-weight: bold;
    padding-bottom: 5px;
    border-bottom: 1px solid mix(@base-color, #fff, 25%);
    margin-bottom: 20px;
    margin-top: 40px;

    &.mind-header-section-no-border {
      padding-bottom: 0;
      border-bottom: none;
      margin-bottom: 10px;
    }
  }
}



.mind-menu {
  display: block;
  width: 100%;
  background-color: hsl(0, 0%, 90%);
  font-weight: bold;
  font-size: @base-font-size * 0.9;

  .mind-menu-item {
    display: inline-block;
    text-align: center;
    width: 50%;
    padding: 10px 15px;

    &.active {
      background-color: hsl(0, 0%, 85%);
    }

    .fa {
      font-size: inherit;
    }
  }
}
@media (min-width: 768px) {
  .mind-menu {
    text-align: center;

    .mind-menu-item {
      width: auto;
    }
  }
}

.mind-footer {
  text-align: center;
  padding-top: 30px;
  padding-bottom: 30px;

  a {
    color: @fg-color;
  }
}



@balloon-border-radius: 10px;

.mind-post {
  /*
  &::before,
  &::after {
    display: table;
    content: " ";
  }
  &::after {
    clear: both;
  }
  */
  & + .mind-post {
    margin-top: 5px;
  }
  &.mind-post-time {
    margin-top: 15px;
    margin-bottom: 15px;
  }
  .mind-comment {
    display: table;
    max-width: 80%;
    margin-left: 0;
    margin-right: auto;
    //float: left;
    .mind-comment-member-icon {
      display: block;
      width: 32px;
      height: 32px;
      border-radius: 3.2px;
      float: left;
    }
    .mind-comment-info {

    }
    .mind-comment-balloon {
      display: inline-block;
      border: none;
      padding: 10px 10px;
      border-radius: @balloon-border-radius;
      color: hsl(0, 0%, 25%);
      //background-color: hsl(0, 0%, 90%);
      background-color: mix(#A38B77, #ffffff, 30%);
      word-break: break-all;
      a {
        color: hsl(0, 0%, 25%);
        text-decoration: underline;
      }
    }
    .mind-comment-member-icon-cell {
      display: table-cell;
      vertical-align: top;
      width: 37px;
    }
    .mind-comment-content-cell {
      display: table-cell;
      vertical-align: bottom;
    }

    &.mind-comment-me {
      margin-left: auto;
      margin-right: 0;
      //float: right;
      .mind-comment-member-icon {
        float: right;
      }
      .mind-comment-balloon {
        display: block;
        color: hsl(0, 0%, 100%);
        //background-color: hsl(118, 45%, 55%);
        background-color: #3CA0E9;
        a {
          color: #fff;
          text-decoration: underline;
        }
      }
    }

    &.mind-comment-form {
      //display: block;
      width: 100%;
      width: 80%;
      textarea {
        color: #000;
        width: 100%;
        border-radius: 5px;
        padding: 5px;
        border: none;
      }
      textarea:focus {
        -webkit-appearance: none;
        outline: none;
      }
      ul {
        list-style: none;
      }
      button {
        display: block;
        width: 100%;
        //background-color: hsl(208, 100%, 50%);
        background-color: #F9C733;
      }
      .mind-comment-balloon {
        //background-color: hsl(118, 45%, 55%);
        background-color: #3CA0E9;
      }
    }
  }
}
.mind-comment-form input[type=file] {
  display: none;
}
.mind-comment-form label[for=files] {
  cursor: pointer;
}
.mind-comment-form .mind-comment-files {
  display: none;
}
.mind-comment-form .mind-comment-file {
  text-decoration: underline;
}







@import '/index.less';
@import '/oops.less';
@import '/group.less';
@import '/contact.less';