@charset "UTF-8";

/**
 * hail2u.net/styles/default.css v5.1.2
 *
 * Copyright (c) 2011 Kyo Nagashima <kyo@hail2u.net>
 * This stylesheet is licensed under MIT license:
 * http://opensource.org/licenses/mit-license.php
 */

// Variables
//----------------------------------------------------------------------

// Color
$white:        rgb(255, 255, 255);
$black:        rgb(  0,   0,   0);
$darkestblue:  rgb( 39, 135, 231);
$darkblue:     rgb(135, 183, 231);
$blue:         rgb(183, 207, 231);
$lightblue:    rgb(207, 219, 231);
$lightestblue: rgb(219, 231, 255);

// Font Family
$sans-serif: "Lucida Grande", "Lucida Sans Unicode", sans-serif;
$monospace:  "Menlo", "Consolas", monospace;


// Mixins
// ---------------------------------------------------------------------

@mixin top-level-container {
  margin: 0 16px;
  width: auto;
}

@mixin clearfix {
  zoom: 1;

  &:before,
  &:after {
    display: block; 
    height: 0; 
    visibility: hidden; 
    content: "\0020"; 
  }

  &:after {

    clear: both;
  }
}

@mixin logo-transition {
  -moz-transition: background 0.1s linear;
  -webkit-transition: background 0.1s linear;
  -o-transition: background 0.1s linear;
  transition: background 0.1s linear;
}

@mixin navigation-star {
  margin: 0 4px;
  float: left;
  content: "\2605";
}

@mixin white-emboss {
  text-shadow: 1px 1px rgba(255, 255, 255, 0.5);
}

@mixin black-emboss {
  text-shadow: -1px -1px rgba(0, 0, 0, 0.5);
}

@mixin footer-icon-transition {
  -moz-transition: margin .2s linear;
  -webkit-transition: margin .2s linear;
  -o-transition: margin .2s linear;
  transition: margin .2s linear;
}


// Import Reset CSS
// ---------------------------------------------------------------------

@import "reset";


// Core
body {
  margin: 64px 0 0 0;
  color: $black;
  background-color: $white;
  background-image: url("../images/bg-body.png");
  background-repeat: repeat-x;
  background-attachment: fixed;
  font: 16px/1.5 $sans-serif;
}

pre {
  line-height: 1.25;
  font-family: $monospace;
}

select, input, button, textarea {
  font: 100% $sans-serif;
}

table {
  font-size: inherit;
}

a {
  color: $darkestblue;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  font-weight: bold;
}

strong {
  color: $white;
  background-color: $black;
}

code, kbd, samp, tt {
  font-family: $monospace;
}

abbr, acronym {
  border-bottom: 1px dotted $black;
  cursor: help;
}

q:before {
  content: "\201C";
}

q:after {
  content: "\201D";
}

ins {
  text-decoration: underline;
}

del {
  text-decoration: line-through;
}

img {
  max-width: 100%;
  vertical-align: text-bottom;
}

.hidden {
  display: none;
}


// Header
#header {
  @include top-level-container;
  @include clearfix;

  margin: 0 16px;
  width: auto;
  color: $blue;

  #logo {
    float: left;

    a {
      @include logo-transition;

      display: block;
      float: left;
      width: 193px;
      height: 34px;
      line-height: 34px;
      background-image: url("../images/logo.png");
      background-repeat: no-repeat;
      background-position: right bottom;
      text-indent: -10000px;

      &:hover,
      &:active {
        @include logo-transition;

        background-position: left top;
      }  
    }
  }

  #navigation {
    margin: 8px 0 9px 0;
    float: right;

    &:after, li:before {
      @include navigation-star;
      @include white-emboss;
    }

    li {
      display: block;
      float: left;

      &.active a {
        color: $darkestblue;
      }

      a {
        @include white-emboss;

        display: block;
        float: left;
        height: 24px;
        line-height: 24px;
        color: $darkblue;
        text-decoration: none;

        &:hover {
          color: $darkestblue;
        }
      }
    }
  }
}


// Contents
#contents {
  @include clearfix;

  margin: 0 16px;
  width: auto;

  h1 {
    @include white-emboss;

    margin: 64px 0 0 0;
    font-weight: bold;
    font-size: 200%;
    letter-spacing: -1px;
  }

  #tagline {
    margin: 64px 0 0 0;
  }

  .section {
    @include clearfix;

    h2, h3, h4, h5, h6 {
      @include white-emboss;

      margin: 64px 0 32px 0;
      clear: both;
      font-weight: bold;
      font-size: 100%;
    }

    h2 {
      font-size: 150%;
      letter-spacing: -1px;
    }

    h3 {
      font-size: 125%;
    }

    p {
      margin: 32px 0;
    }

    .meta, .seemore {
      font-size: 80%;
    }

    .image {
      overflow: hidden;
    }

    .lefted {
      margin: 0 16px 0 0;
      float: left;
      clear: left;
    }

    .centered {
      text-align: center;
    }

    .righted {
      margin: 0 0 16px 16px;
      float: right;
      clear: right;
    }

    blockquote {
      margin: 32px 0;
      padding: 0 0 0 64px;
      clear: both;
      min-height: 48px;
      background-image: url("../images/bg-quote.png");
      background-repeat: no-repeat;
    }

    pre {
      margin: 32px 0;
      clear: both;
      white-space: pre-wrap;
      word-wrap: break-word;
    }

    dl {
      margin: 32px 0 32px 40px;
      clear: both;

      dt {
        margin: 32px 0;
        color: rgb(51, 51, 51);
        font-weight: bold;
      }

      dd {
        margin: 32px 0;
      }
    }

    ul, ol {
      margin: 32px 0;
      clear: both;
      line-height: 1.75;

      li {
        margin: 0 0 0 40px;
        list-style-type: inherit;
      }

      ul, ol {
        margin: 0;
      }
    }

    table {
      margin: 32px 0;
      border-top: 1px solid $black;
      border-left: 1px solid $black;
      clear: both;

      th {
        padding: 8px;
        border-right: 1px solid $black;
        border-bottom: 1px solid $black;
        vertical-align: top;
        background-color: $lightestblue;
      }

      td {
        padding: 8px;
        border-right: 1px solid $black;
        border-bottom: 1px solid $black;
        vertical-align: top;
      }
    }

    hr {
      margin: 32px auto;
      border-top: 1px solid $lightblue;
      border-right: 0;
      border-bottom: 1px solid $lightblue;
      border-left: 0;
      clear: both;
      width: 50%;
      height: 1px;
      background-color: transparent;
    }
  }

  .half {
    width: 50%;
    float: left;
  }
}

// Footer
#footer {
  @include clearfix;

  margin: 0 16px;
  border-top: 1px solid $lightblue;
  width: auto;
  background-image: url("../images/icons/favicon.png");
  background-repeat: no-repeat;
  background-position: left center;

  #copyright {
    margin: 16px 0 0 32px;
    float: left;
  }

  #elsewhere {
    margin: 16px 0;
    float: right;

    li {
      display: block;
      float: left;

      a {
        @include footer-icon-transition;
        margin: 0 0 0 8px;
        display: block;
        float: left;
        width: 24px;
        height: 24px;
        background-repeat: no-repeat;
        text-indent: -10000px;

        &:hover {
          @include footer-icon-transition;
          margin-top: -4px;
        }
      }
    }

    .twitter a {
      background-image: url("../images/icons/twitter.png");
    }

    .posterous a {
      background-image: url("../images/icons/posterous.png");
    }

    .hatenag a {
      background-image: url("../images/icons/hatenag.png");
    }

    .github a {
      background-image: url("../images/icons/github.png");
    }

    .flickr a {
      background-image: url("../images/icons/flickr.png");
    }

    .lastfm a {
      background-image: url("../images/icons/lastfm.png");
    }

    .delicious a {
      background-image: url("../images/icons/delicious.png");
    }

    .hatenab a {
      background-image: url("../images/icons/hatenab.png");
    }

    .feed a {
      background-image: url("../images/icons/feed.png");
    }
  }
}

// Widgets
// ---------------------------------------------------------------------

// Highlight search terms
#contents .section .highlight {
  color: rgb(0, 0, 0);
  background-color: rgb(255, 255, 0);
  font-weight: normal;
}


// faviconize.js
#fuw {
  margin: 0 !important;
}

#fuw li {
  margin: 0 !important;
  list-style-type: none !important;
}


// paging
#contents .paging {
  text-align: center;
}

#contents .paging ul {
  line-height: 1;
}

#contents .paging ul li {
  margin: 0;
  display: inline;
}

#contents .paging ul li a {
  margin: 0 16px;
  font-size: 400%;
  font-weight: bold;
  text-decoration: none;
}


// Google Code Prettify
.prettyprint .pln {
  color: inherit;
}

.prettyprint .str {
  color: #090;
}

.prettyprint .lit {
  color: #099;
}

.prettyprint .kwd {
  color: #00c;
}

.prettyprint .com {
  color: #999;
}

.prettyprint .typ {
  color: #909;
}

.prettyprint .pun {
  color: inherit;
}

.prettyprint .opn {
  color: inherit;
}

.prettyprint .clo {
  color: inherit;
}

.prettyprint .dec {
  color: #999;
}

.prettyprint .tag {
  color: #00c;
}

.prettyprint .atn {
  color: #909;
}

.prettyprint .atv {
  color: #090;
}


// Google AdSense
#contents .section .adsense {
  margin: 32px 0;
  width: auto;
  overflow: hidden;
}


// Asamashi09
#contents .section .asamashi {
  margin: 32px 8px;
  padding: 16px;
  overflow: hidden;
  background-color: rgb(255, 255, 255);
  -moz-border-radius: 8px;
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}

#contents .section .asamashi .image {
  margin: 0 16px 16px 0;
  float: left;
  width: 160px;
}

@media screen and (max-width: 768px) {
  #contents .section .asamashi .image {
    margin: 0 auto 16px auto;
    float: none;
  }
}

#contents .section .asamashi .detail {
  overflow: hidden;
}

#contents .section .asamashi .detail .title {
  margin: 0 0 16px 0;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

#contents .section .asamashi .detail ul {
  margin: 16px 0;
}

#contents .section .asamashi .detail .powered {
  margin: 16px 0 0 0;
  text-align: right;
}


// Google Site Search
#search {
  margin: 32px 0;
}

#search .button {
  padding: 2px 6px;
}


// Facebook Like Button
#contents .section .like {
  margin: 32px 0;
  width: auto;
  overflow: hidden;
}


// Hatena Star
#contents .star h2 span {
  margin: 0 0 0 6px !important;
}

#contents .star h2 span img {
  margin: 0 !important;
  vertical-align: baseline !important;
}

#contents .star h2 span img.hatena-star-add-button {
  margin-right: 3px !important;
}

.hatena-star-star-image {
  background-image: url("../images/hatena-stars/normal.png");
}

.hatena-star-green-star-image {
  background-image: url("../images/hatena-stars/green.png");
}

.hatena-star-red-star-image {
  background-image: url("../images/hatena-stars/red.png"); 
}

.hatena-star-blue-star-image {
  background-image: url("../images/hatena-stars/blue.png");
}

.hatena-star-temp-star-image {
  background-image: url("../images/hatena-stars/normal.png");
}


// Hatena Bookmark Comments
#bookmark-comments {
  border-bottom: 1px solid rgba(39, 135, 231, 0.2);
}

#bookmark-comments .add-comment-button a {
  margin: 0 auto;
  padding: 8px 0;
  border: 1px solid rgb(85, 102, 136);
  display: block;
  width: 20em;
  line-height: 1;
  color: rgb(255, 255, 255);
  background-color: rgb(51, 102, 204);
  background-image: -webkit-gradient(linear, center top, center bottom, color-stop(0, rgba(255, 255, 255, 0.2)), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.5, rgba(255, 255, 255, 0.05)), color-stop(1, rgba(255, 255, 255, 0)));
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0) 100%);
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0) 100%);
  background-image: linear-gradient(top, rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0) 100%);
  text-align: center;
  text-decoration: none;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

#bookmark-comments .icons {
  line-height: 1;
}

#bookmark-comments .section {
  margin: 0;
  padding: 32px 0;
  border-top: 1px solid rgba(39, 135, 231, 0.2);
}

#bookmark-comments .section .date {
  margin: 0;
  float: right;
}

#bookmark-comments .section .user {
  margin: 0;
  clear: none;
  height: 64px;
  line-height: 64px;
  background-repeat: no-repeat;
  background-position: left center;
  font-size: inherit;
  text-align: left;
}

#bookmark-comments .section .user a {
  padding: 0 0 0 80px;
}

#bookmark-comments .section .comment {
  margin: 12px 0 0 0;
}


// Responsive
// ---------------------------------------------------------------------

// width >= 961px
@media screen and (min-width: 961px) {
  #header, #contents, #footer {
    margin: 0 auto;
    width: 928px;
  }
}

// width <= 768px
@media screen and (max-width: 768px) {
  body {
    margin: 32px 0 0 0;
  }

  #header {
    #logo {
      margin: 32px 0 16px 0;
      float: none;
      text-align: center;

      a {
        display: inline-block;
        float: none;
      }
    }

    #navigation {
      margin: 0;
      float: none;
      text-align: center;

      &:after, li:before {
        margin: 0;
        float: none;
      }

      li {
        display: inline;
        float: none;

        a {
          margin: 0 0 0 4px;
          display: inline;
          float: none;
          height: auto;
          line-height: 1;
        }
      }
    }
  }

  #contents {
    h1, #tagline {
      text-align: center;
    }

    .section {
      h2, h3, h4, h5, h6 {
        text-align: center;
      }

      * {
        h2, h3, h4, h5, h6 {
          text-align: left;
        }
      }
    }
  }

  #footer {
    padding: 40px 0 0 0;
    background-position: center 16px;

    #copyright {
      margin: 16px 0;
      float: none;
      line-height: 1;
      text-align: center;
    }

    #elsewhere {
      margin: 16px auto;
      float: none;
      display: table;

      li {
        display: table-cell;
        float: none;
      }

      li a {
        margin: 0 4px;
      }
    }
  }
}

// width <= 480px
@media screen and (max-width: 480px) {
  body {
    font-size: 13px;
  }

  #header {
    margin: 0 8px;

    #logo {
      margin: 16px 0 8px 0;
    }

    #navigation li a {
      font-weight: normal;
      font-size: 85%;
    }
  }

  #contents {
    margin: 0 8px;

    h1 {
      margin: 32px 0;
      font-size: 150%;
    }

    #tagline {
      margin: 32px 0;
    }

    .section {
      h2, h3, h4, h5, h6 {
        margin: 32px 0;
        font-size: 100%;
      }

      .lefted, .righted {
        margin: 0;
        float: none;
        clear: none;
        text-align: center;
      }
    }
  }

  #footer {
    margin: 0 8px;
    padding: 32px 0 0 0;
    background-position: center 8px;

    #copyright {
      margin: 8px 0;
    }
    
    #elsewhere {
      margin: 8px auto;
    }
  }
}