$container_width: 900px;
$sidebar_width: 260px;

/* Base Color */
/*cool*/
$base_cool0: #A90019;
$base_cool1: #007E86;
$base_cool2: #00C6D4;
/*warm*/
$base_warm1: rgb(204,37,37);
$base_warm1_a: rgb(204,37,37);
$base_warm2: rgb(222,119,93);
$base_warm2_a: rgb(222,119,93);
/*mono*/
$base_mono1: #787878;
$base_mono2: #878787;
$base_mono3: white;

$gradient_color1_a: rgb(100,100,100);
$gradient_color1_b: rgb(175,175,175);

$gradient_color2_a: rgb(5, 108, 242) ;
$gradient_color2_b: rgb(29, 195, 242);

$gradient_color3_a: rgb(169,0,25) ;
$gradient_color3_b: rgb(209,0,71);

//@import "compass/utilities";
//@import "compass/css3";

/* gradation pattern */
@mixin gradient{
          background-color: $gradient_color1_b;
          background-image: linear-gradient(bottom,$gradient_color1_a  32%, $gradient_color1_b 76%);
          background-image: -o-linear-gradient(bottom,$gradient_color1_a  32%, $gradient_color1_b 76%);
          background-image: -moz-linear-gradient(bottom,$gradient_color1_a  32%, $gradient_color1_b 76%);
          background-image: -webkit-linear-gradient(bottom,$gradient_color1_a  32%, $gradient_color1_b 76%);
          background-image: -ms-linear-gradient(bottom,$gradient_color1_a  32%, $gradient_color1_b 76%);
          
          background-image: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0.32, $gradient_color1_a),
            color-stop(0.76, $gradient_color1_b)
          );

}

@mixin gradient1{
          background-color: $gradient_color2_b;
          background-image: linear-gradient(bottom, $gradient_color2_a 32%, $gradient_color2_b 76%);
          background-image: -o-linear-gradient(bottom, $gradient_color2_a 32%, $gradient_color2_b 76%);
          background-image: -moz-linear-gradient(bottom, $gradient_color2_a 32%, $gradient_color2_b 76%);
          background-image: -webkit-linear-gradient(bottom, $gradient_color2_a 32%, $gradient_color2_b 76%);
          background-image: -ms-linear-gradient(bottom, $gradient_color2_a 32%, $gradient_color2_b 76%);
          
          background-image: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0.32, $gradient_color2_a),
            color-stop(0.76, $gradient_color2_b)
          );

}

@mixin gradient2{
          background-color: $gradient_color2_b;
          background-image: linear-gradient(bottom, $gradient_color3_a 32%, $gradient_color3_b 76%);
          background-image: -o-linear-gradient(bottom, $gradient_color3_a 32%, $gradient_color3_b 76%);
          background-image: -moz-linear-gradient(bottom,  $gradient_color3_a 32%, $gradient_color3_b 76%);
          background-image: -webkit-linear-gradient(bottom, $gradient_color3_a 32%, $gradient_color3_b 76%);
          background-image: -ms-linear-gradient(bottom, $gradient_color3_a 32%, $gradient_color3_b 76%);
          
          background-image: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0.32, rgb(156,12,12)),
            color-stop(0.76, rgb(209,99,71))
          );

}

/* Round Button */

@mixin round_btn1{

  color: white;
  text-align: center;
  text-shadow: 1px 1px 3px #000; 
  text-decoration: none;
  font-size: 120%;
  border: 1px solid brown;
  display: block;
  background-color: $base_warm2;
  border-radius: 5px;
  background-image: linear-gradient(bottom, $base_warm1 32%, $base_warm2 76%);
  background-image: -o-linear-gradient(bottom, $base_warm1 32%, $base_warm2 76%);
  background-image: -moz-linear-gradient(bottom, $base_warm1 32%, $base_warm2 76%);
  background-image: -webkit-linear-gradient(bottom, $base_warm1 32%, $base_warm2 76%);
  background-image: -ms-linear-gradient(bottom, $base_warm1 32%, $base_warm2 76%);
  
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.32, $base_warm1 ),
    color-stop(0.76, $base_warm2)
  );
}

@mixin round_btn1_hover{
    border: 1px outset $base_warm1; color: white; 
}

@mixin round_btn2{

  color: white;
  text-align: center;
  text-shadow: 1px 1px 3px #000; 
  text-decoration: none;
  font-size: 120%;
  border: 1px solid navy;
  display: block;
  background-color: $base_warm2;
  border-radius: 5px;
  background-image: linear-gradient(bottom, $base_cool1 32%, $base_cool2 76%);
  background-image: -o-linear-gradient(bottom, $base_cool1 32%, $base_cool2 76%);
  background-image: -moz-linear-gradient(bottom, $base_cool1 32%, $base_cool2 76%);
  background-image: -webkit-linear-gradient(bottom, $base_cool1 32%, $base_cool2 76%);
  background-image: -ms-linear-gradient(bottom, $base_cool1 32%, $base_cool2 76%);
  
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.32, $base_cool1 ),
    color-stop(0.76, $base_cool1)
  );
}

@mixin round_btn2_hover{
    border: 1px outset $base_cool1; color: white; 
}

/* 全体の枠 */
div#container {
  margin: 15px auto;
  padding: 15px;
  border-right:1px solid gray;
  border-bottom: 2px solid darkgray;
  border-radius: 5px;
  width: $container_width;
  

  background-color:white;

}

/* 左の枠（コンテンツを入れる） */
div#content {
  float: left;
  width: $container_width - $sidebar_width - 20px;
  padding: 0px 10px 10px 0;
}

/* 右の枠（サイドバーを入れる） */
div#sidebar {
  float: left;
  width: $sidebar_width;
  background-color: $base_mono3;
  padding: 0 5px;
  font-size: 75%;
}

/* ヘッダー */
div#header {
  border-bottom: 4px solid $base_cool0;
  background-color: white;
  box-shadow: 0px 10px 50px rgba(0,0,0,0.4);
  
  div#header_bar {
    margin: auto;
    width: $container_width;
    height: 100px;
    img {float:left;margin-right: 2em;}
    
    #lang {
      font-size: 80%; float:right; color:$base_cool0;padding:5px;margin:0px;line-height:2em;text-align:right;
      
      span {padding:2px;color:white;border:1px solid $base_cool0;
        a{color:$base_cool0;text-decoration:none;}
        
      }
      span.on {color:white;text-decoration:none;background-color:$base_cool0;
        a{color:white;}
      }
    }
    
    /* メニューバー */
    div.menubar {
      margin-bottom: 0px;
      margin-top: 0em;
      padding: 2px;
      background-color: #000;
      color: #ccc;
      font-size: 80%;
      padding: 8px 16px;
      float:right;
      width: 450px;
      a { text-decoration: none; }
      a:link { color: #ccc; }
      a:visited { color: #ecc; }
      a:hover {
        color: #f88;
        text-decoration: underline;
      }
      span {
        color: #ff8;
        font-weight: bold;
      }
    }
    div#admin_menubar {
      background-color: #3F0303;
    }

  }
}

/* フッター */
div#footer {
  clear: both;
  font: 11px Verdana;
  color: white;
  padding: 8px 0;
  box-shadow: 0px -10px 50px rgba(0,0,0,0.4);
  background-color:gray;
  text-align: center;
}


/* メインコンテンツ */
div#content {
  h1 {
    
    font-weight: bold;
    font-size: 120%;
    padding:5px;
    border-left: 10px solid $base_warm2;
    border-bottom: 2px solid $base_warm2;
    margin-top: 5px;
    margin-bottom: 0.5em;
    @include gradient2;
    background-color:red;
    color:white;
    text-indent: 1em;
  }
  h1.own {
    border-left: 10px solid $base_cool1;
    border-bottom: 2px solid $base_cool1;
    @include gradient1;
    background-color:$base_cool1;
    

  }
  h1.admin {
    border-left: 10px solid $base_mono1;
    border-bottom: 2px solid $base_mono1;
    @include gradient;
    background-color:$base_mono1;

  }
  h2 {
    color: $base_mono1;
    font-weight: bold;
    font-size: 100%;
    margin-bottom: 0.5em;
    border-bottom: 1px solid #ccf;

  }
  h2.artcl {
    color: $base_mono1;
    font-weight: bold;
    font-size: 100%;
    margin-bottom: 0.5em;
    box-shadow: 5px 5px 5px gray;
  }
  p, ul {
    font-size: 90%;
    line-height: 1.5;
  }
  
/* link button */
 a.link_btn{
   border-radius: 5px;
   background-color:#293070;
   padding:5px 15px;
   color:white;
   text-decoration:none;
   font-size: 0.9em;
   margin:2px 15px;
   box-shadow:2px 2px 3px gray;} 
 a.link_btn:hover{background-color:#AB001A;} 
 
      /*画像サムネイル*/
  div.image_rect {
    width:31%;
    background-color:white;
    float:left;
    padding:4px;
    border: 1px solid gainsboro;
    margin: 2px 1px;
    font-size: 80%;
    box-shadow: 0px 5px 15px rgba(0,0,0,0.3);
    a {
      img {
        border: 1px solid gray;
      }
    }
    .fname {color:red;}
    .detail{padding:0px 0px 5px 3px; float:right;font-size:0.9em;}
    p.image_title{
      font-size:1.1em;
      color: navy;
      overflow:hidden;
      width:96%;
      margin:0px;padding:2px;
      height:1.5em;
    }
    p.image_footer {
      width:100%;
      height:2em;
//      border-top: 1px #ccf dashed;
      padding-top: 4px;
      line-height: 1.2em;
      margin: 0 0;
      
      a { 
        width: 40%;
        padding: 4px;
        margin: 2%;
        background-color:$base_cool1;
        display:block;
        text-align:center;
        color: white;
        float: left;
        border-radius: 2px;
        @include gradient1;
      }
      a:hover{background-color:$base_cool0;@include gradient2;}
    }
  }

  /* Round_btn */
  a.round_btn{ @include round_btn1;
    padding:10px;
    margin: 0px auto 10px auto;
    width: 70%;
  }
  a.round_btn:link{ color:white;}
  a.round_btn:visited {color:gainsboro;}
  a.round_btn:hover { @include round_btn1_hover }

  /* 退会者*/
 .secede {text-decoration: line-through;background-color:pink;}
 .tmp {background-color:lightgray;}
}

/* サイドバー */
div#sidebar {
  div.profile_area{
    height: 125px;
    
  }
  h2 {
    color: $base_mono2;
    font-weight: bold;
    border-bottom: 1px dotted #080;
    margin-bottom: 0.5em;
    font-size: 100%;
  }
  ul {
    padding-left: 1em;
    list-style-type: none;
  }
  li {
    margin-bottom: 0.3em;
  }
  table#login_form {
    width: 90%;
    td { font-size: 12px; }
    
    .login_submit {
      @include gradient1;
      color:white;
      border-width:0px;
      padding:3px 15px;
      text-shadow:1px 1px 3px #000000;
      border-radius:5px;
      font-size:0.9em;
    }
  }
  p.alert {
    color: red;
    font-size: 12px;
    margin-bottom: 0;
  }
  
  a.logout_btn {
    @include round_btn1;
    padding:5px;
    margin: 0px 10px 10px auto;
    width: 40%;
    float:right;
    font-size:0.9em;
    position: relative;
    top:1.5em;
  }
  a.logout_btn:link { color: white}
  a.logout_btn:hover {
    @include round_btn1_hover
  }
  
/* 会員ボタン*/
  a.enroll_btn {
    @include round_btn1;
    padding:10px;
    margin: 0px auto 10px auto;
    width: 70%;    
  }
  a.enroll_btn:link { color: white}
  a.enroll_btn:visited { color: white;}
  a.enroll_btn:hover {
    @include round_btn1_hover
  }
  /* */
  a.icon {
    img {margin-top:5px;}
  }
  a.icon:hover {
    img {box-shadow: 5px 5px 5px $gradient_color1_b;}
  }
  /* お知らせ一覧*/

  table.articles {
      font-size:100%;
      margin:5px auto;
      width:95%;
      background-color:white;
      border: 1px solid gainsboro;
      box-shadow: 0 5px 15px rgba(0,0,0,0.3);

      th{
          
          @include gradient;
          color:white;
          padding:5px;
          font-weight: normal;
          border-radius: 3px;
          text-align:center;
      }
      th.login{
          
          @include gradient1;
          color:white;
          padding:5px;
          font-weight: normal;
          border-radius: 3px;
          text-align:center;
      }          
      td{
        h2{margin:5px 0px;}
      }
      tfoot{
        
        td {text-align:right;padding: 5px 5px;}
      }
  }
}

div.article_detail {;margin:auto;}

input[type="submit"].commit {@include round_btn1;margin:auto;padding:5px;width:50%;}
input[type="submit"].commit:hover {@include round_btn1;margin:auto;padding:5px;width:50%;border:1px outset white;color:gainsboro;}

/* 表：一覧表示、詳細表示 */
@mixin data-table {
  font-size: 90%;
  width: 100%;
  
  th {
    background-color: #E0E0E0;
    color: gray;
    font-weight: normal;

  }
  td, th {
    padding: 4px;
    word-wrap:break-word;
  }
  td {
    background-color: none;

  }
}

table.list {
  @include data-table;
  border-collapse:separate;
  border-spacing:1px;
  th { text-align: center; }
}

table.attr {
  @include data-table;
  border-collapse:separate;
  border-spacing:1px;
  th { text-align: right}
  box-shadow: 0px 5px 15px gray;
}

/* フラッシュ */
p.notice {
  border: 1px solid blue;
  padding: 3px;
  background-color: #ccf;
}

/* エラー表示 */
div#errors {
  background-color: #fee;
  border: 1px solid #ecc;
  padding: 3px 6px;
  margin: 0 0 1em;
  
  h2 {
    font-size: 90%;
    color: red;
    margin: 0 0 4px;
    border: none;
  }
  ul {
    margin: 0;
    padding-left: 1.5em;
  }
}

div.field_with_errors {
  background-color: #fcc;
  padding: 2px;
}



/* ページネーション*/
div.pagination {
  font-size: 75%;
  padding: 4px 8px;
  border: 1px solid #707070;
  border-width: 2px 0px 2px 0px;
  word-spacing: 1px;
  margin: 5px 0px;
  
}
.pagination {
  padding: 3px;
  margin: 3px;
}
.pagination a {
  padding: 2px 5px 2px 5px;
  margin: 2px;
  border: 1px solid #aaaadd;
  text-decoration: none;
  color: #000099;
}
.pagination a:hover, .pagination a:active {
  border: 1px solid #000099;
  color: #000;
}
.pagination em.current {
  padding: 2px 5px 2px 5px;
  margin: 2px;
  border: 1px solid #000099;
  font-weight: bold;
  background-color: #000099;
  color: #FFF;
}
.pagination span.disabled {
  padding: 2px 5px 2px 5px;
  margin: 2px;
  border: 1px solid #999;
  color: #999;
}

/* 投票 */
span.vote, p.vote {
  color: #88c;
  
  a.button {
    border: 1px solid #ccf;
    padding: 0 3px;
    color: #88c;
    background-color: #eef;
    text-decoration: none;
  }
}

/* errors ページ*/
div#errors_page{
  height: 400px;
  h1 {
    padding:5px;
    margin: 10px 0px;
    font-size: 2em;
    font-weight: 700;
    background-color: gray;
    color: white; 
  }
}

/* search box */
div.search_box {
  background-color: gray;
  font-size:90%;
  margin-bottom:10px;
  color: gainsboro;}
  
/* about style */
.about {
  padding:10px;
  
  p {margin:10px;}
  span {color:red;}
  ol {font-size: 0.8em;background-color:gainsboro;margin:2.5em;
    li {margin:0.5em;padding:0.5em;}
  }
}