@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Pathway+Gothic+One);
@import url(http://fonts.googleapis.com/css?family=Stint+Ultra+Expanded);

/* Layout */
#content {
    margin      : 0 auto;
    background  : transparent;
    position    : relative;
    text-align  : left;
    zoom        : 1;
    width       : 90%;
    max-width   : 1000px;
    font-size   : 100%;
    line-height : 1.5;
}
#content:after {
    display : block;
    content : "";
    clear   : both;
}
#main {
    margin-top : 30px;
    text-align : left;
    background : transparent;
    float      : left;
    width      : 70%;
}
aside#box2 {
    line-height : 1.5;
    width       : 220px;
    margin      : 30px auto auto -220px;
    float       : right;
    overflow    : hidden;
}
.entry-header {
    margin-top : -100px;
}
.entry-inner {
    margin-bottom : 200px;
}

/* Default */
body {
    margin           : 0;
    padding          : 0;
    color            : #000000;
    text-align       : center;
    background-image : url('http://img.f.hatena.ne.jp/images/fotolife/l/laysakura/20131019/20131019102550.jpg');
}
form {
    display: inline;
}
img {
    border: 0;
}
ul, ol {
    padding : 0;
}
a {
    color               : #d7523d;
    text-decoration     : none;
    border-bottom       : 1px solid #f8b4a8;
    transition-property : all;
    transition          : 0.2s linear;
}
a:visited {
    color: #c10020;
}
a:hover {
    background-color : #d7523d;
    color            : #ffffff;
    border-bottom    : none;
}
a:hover:visited {
    background-color: #c10020;
}
::selection {
    background-color: rgba(255, 0, 0, 0.3);
}
::-moz-selection {
    background-color: rgba(255, 0, 0, 0.3);
}

/* Title header */
#logo-img {
    position : relative;
    margin   : -80px 0 0 50px;
}
a#logo-link {
    color: transparent;
    border-bottom: none;
    transition-delay : 10000s;  /* do not transit to a:hover */
}
h1#title {
    color             : #000000;
    margin            : 0 auto;
    padding           : 1px 0 45px 550px;
    font-size         : 150%;
}
h1#title a {
    visibility : hidden;
}

/* Article header */
.entry-header, .entry-header-menu {
    height : 0;
}
.main div.calendar {
    visibility : hidden;
}
h1.entry-title {
    margin-bottom: 100px;
}
h1.entry-title a.entry-title-link {
    position         : absolute;
    width            : 600px;
    margin-left      : 100px;
    padding-top      : 60px;
    border-bottom    : 2px dotted #888888;
    transition-delay : 10000s;
}
.entry-content h3 {
    padding       : 1.0em 0 0 0.5em;
    border-bottom : 2px dotted #888;
}
.entry-content h4 {
    padding       : 0.5em 0 0 1.0em;
    border-bottom : 1px dotted rgba(128, 128, 128, 0.3);
}
.date {
    position            : absolute;
    padding-top         : 30px;
    background-color    : #d7523d;
    opacity             : 0.8;
    color               : #ffffff;
    border-radius       : 100%;
    font-size           : 12px;
    width               : 100px;
    height              : 70px;
    text-align          : center;
    line-height         : 2.0;
    transition-property : all;
    transition          : 0.2s linear;
}
.date:before {
    content     : "Posted on\A";
    white-space : pre;
}
.date a {
    color            : #fff;
    background-color : transparent;
    text-decoration  : none;
    border-bottom    : none;
}
.date:hover {
    background-color : rgba(255, 255, 255, 0.6);
    color            : #d7523d;
    border           : 2px solid #d7523d;
}
.date:hover a {
    color : #d7523d;
    transition-property: initial;
}
.entry-header-menu a {
    visibility : hidden;
}

/* Article components */
.entry-content {
    padding-top: 130px;
}
a.keyword {
    color            : #000000;
    text-decoration  : none;
    border-bottom    : 1px dotted #000000;
    transition-delay : 10000s;  /* do not transit to a:hover */
}
a.okeyword {
    color            : #000000;
    text-decoration  : none;
    border-bottom    : 1px dotted #000000;
    transition-delay : 10000s;  /* do not transit to a:hover */
}
pre.code {
    padding          : 0.5em;
    background-color : rgba(255, 255, 255, 0.5);
    border           : 1px dotted #000;
    font-family      : Courier, monospace, sans-serif;
}
.entry-content ul {
    padding-left: 10px;
}
.entry-content ul li {
    list-style-type : none;
    color           : #000;
}
.entry-content ul li:before {
    content : "● ";
    color   : #d7523d;
    opacity : 0.7;
}

/* Sidebar */
.hatena-module {
    margin-bottom  : 20px;
    padding-bottom : 20px;
    font-size      : 90%;
    border-bottom  : 1px dotted rgba(128, 128, 128, 0.3);
}
.hatena-module-title {
    font-family : 'Pathway Gothic One', sans-serif;
    font-size   : 180%;
}
.hatena-module-title a {
    color            : #000;
    border-bottom    : none;
    background-color : transparent;
}
.hatena-module-body li {
    list-style-type  : none;
}
.hatena-module-profile {
    text-align : center;
}
.profile-icon {
    border-radius       : 100%;
    transition-property : all;
    transition          : 0.2s linear;
}
.profile-icon:hover {
    border-radius : 10%;
}
.hatena-module-profile a {
    background-color : transparent;
    border-bottom    : none;
}
.profile-description p {
    margin : 0;
}
.hatena-module .hatena-follow-button-box {
    /*margin: 0.4em 0 -2em 65px;*/
}
.hatena-module-profile .socials {
    /*margin-top: -3em;*/
}
.hatena-module-profile .socials a {
    color       : #000;
    font-family : 'Stint Ultra Expanded', cursive;
    font-size   : 120%;
    font-weight : bold;
}
.hatena-module-profile .socials a:hover {
    color            : #fff;
    background-color : #555;
    border-radius    : 4px;
    padding          : 0.2em;
}
input[type=text] {
    width               : 150px;
    border-radius       : 2px;
    border              : #888 1px solid;
    box-shadow          : inset 0 0 5px rgba(0, 0, 0, 0.2),0 0 2px rgba(0,0,0,0.3);
    padding             : 0.3em;
    transition-property : all;
    transition          : 0.2s linear;
}
input[type=text]:focus {
    border     : solid 1px #d7523d;
    box-shadow : inset 0 0 5px rgba(255, 0, 0, 0.2),0 0 2px rgba(255,0,0,0.3);
}
input[type=submit] {
    background            : -moz-linear-gradient(top, #d7523d 0%, #c10020);
    background            : -webkit-gradient(linear, left top, left bottom, from(#d7523d), to(#c10020));
    border                : none;
    color                 : #ffffff;
    border-radius         : 4px;
    -moz-border-radius    : 4px;
    -webkit-border-radius : 4px;
    -moz-box-shadow       : 1px 1px 1px rgba(000,000,000,0.3);
    -webkit-box-shadow    : 1px 1px 1px rgba(000,000,000,0.3);
    text-shadow           : 0px 0px 3px rgba(0,0,0,0.5);
    width                 : 50px;
    padding               : 5px 0;
}
input[type=submit]:focus {
    background            : -moz-linear-gradient(top, #c10020 0%, #d7523d);
    background            : -webkit-gradient(linear, left top, left bottom, from(#c10020), to(#d7523d));
}
ul.hatena-urllist {
    margin-left : 0.5em;
    line-height : 1.2;
}
ul.hatena-urllist li {
    margin-bottom : 0.5em;
}