@charset "utf-8";
/*
Title: materiajp
Revision: $Revision: 1.0 $
Author: K.Yamaguchi
Access: http://materia.jp/blog/
License: GPL
Comment: 

Copyright 2012 (C) K Yamaguchi
*/


/*
 *-------------------------------------
 * Structure
 */

#content {
    width: 96%;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

#header {
    margin: 8px 0;
}
#header:after {content: ""; display: block; clear: both;}

#header h1 {
    width: 49%;
    float: left;
    display: inline;
    
    /*H1要素をfloatさせるのに必要*/
    position: relative;
    clear: none;
}
#header h1:after {content: ""; display: block; clear: both;}

#main {
    width:100%;
    float: right;
    display: inline;
    margin-left: -200px;
}
#main div.day, #main hr.sep { /*IE6向けセレクタ*/
    margin-left: 208px;
}
#main > * {
    margin-left: 208px;
}
#main:after {content: ""; display: block; clear: both;}


#sidebar {
    width: 200px;
    float: right;
    display: inline;
}
#sidebar:after {content: ""; display: block; clear: both;}


#footer {
    width: 100%;
    clear: both;
}

#version {
    width: 98%;
    clear: both;

    padding: 1em 0;
    font-size: 90%;
    text-align: right;
    font-style: italic;
}


/*
 *-------------------------------------
 * Container parts
 */
/*サイドバー*/
#sidebar div.moduletitle {
    border-style: solid;
    border-color: #8fbc8f;

    border-width: 4px 0px 0px 0px;
    background-color: #EDF2E3;
    color: #255;

    padding : 0px 6px 5px;
}

#sidebar div.moduletitle a {
    color: #255;
    text-decoration: none;
}

#sidebar div.moduletitle a:hover{
    color: #255;
    text-decoration: none;
}

#sidebar div.module {
    background-color: #EDF2E3;
    padding: 0 5px 5px;
}
#sidebar div.module p {
    font-size: 83%;
}
#sidebar div.centering {
    text-align: center;
}

#sidebar table.calendar, #sidebar form {
    margin-left: auto;
    margin-right: auto;
}
#sidebar div.category {
    font-size: 80%;
    color: #AAA;
}

#sidebar ul.recent-list {
    font-size: 90%;
    padding: 0px 4px 0px;
}

#sidebar ul.recent-list li ol.recent-list-item {
    padding-bottom: 8px;
}

#sidebar ol.recent-trackback {
    font-size: 90%;
}

#sidebar ol.recent-trackback li{
}

#sidebar ol.recent-comment {
    font-size: 90%;
}
#sidebar ol.recent-comment li {
}

#sidebar div.category {
    text-align: left;
    padding-left: 6px;
    padding-right: 6px;
    padding-bottom: 6px;
    line-height: 1.3em;
    font-size: 90%;
}


/*メインコンテンツ*/
div.day {
    background-color: transparent;
    border-style: solid;
    border-color: #8fbc8f;
    border-width: 4px 0px 0px 0px;
}

/*カレンダー*/
div.day div.calendar {
    background-color: #EDF2E3;
    color: #777;
    padding-left: 4px;
    padding-bottom: 5px;
    font-size: small;
}
div.day div.calendar-month {
    padding-bottom: 0;
}
div.day div.calendar div.yaer {
}


div.day div.calendar-month span.calendar-prev-month {
}
div.day div.calendar-month span.calendar-current-month {
}
div.day div.calendar-month span.calendar-normal {
}
div.day div.calendar-month span.calendar-normal .calendar-weekday {
}
div.day div.calendar-month span.calendar-next-month {
}

div.day div.calendar-month span.calendar-prev-month a,
div.day div.calendar-month span.calendar-next-month a,
div.day div.calendar-month span.calendar-current-month a,
div.day div.calendar-month span.calendar-day a {
    font-size: 114%;
}
div.day div.calendar-month span.calendar-prev-month a:hover,
div.day div.calendar-month span.calendar-next-month a:hover,
div.day div.calendar-month span.calendar-current-month a:hover,
div.day div.calendar-month span.calendar-day a:hover {
}
div.day div.calendar-month span.calendar-normal a:hover {
    text-decoration: none;
}
div.day div.calendar-month span.calendar-normal a {
    font-size: 80%;
}

div.day div.calendar-month {
    background-color: #EDF2E3;
    color: #777;
    margin-bottom: 8px;
}

/*記事ヘッダ日付*/
div.day h2 span.date {
}
div.day h2 span.title {
}
div.day h2 span.title span.nyear {
}

div.day div.body {
}

/*記事*/
div.day div.body div.section {
    margin-top: 0.7em;
    margin-bottom: 1.5em;
}
div.day div.body div.section>* {
    margin: 0.5em 0em 0.7em 2em;
}
div.day div.body div.section p {/*IE6*/
    margin: 0.5em 0em 0.7em 2em;
}
div.day div.body div.section table {/*IE6*/
    margin: 0.5em 0em 0.7em 2em;
}
div.day div.body div.section p>a {
    text-decoration: underline;
}
/*group keyword */
div.day div.body div.section p>a.okeyword {
    text-decoration: none;
}
div.day div.body div.section p>a.okeyword:link {
}
div.day div.body div.section p>a.okeyword:hover {
    color: #000;
}
div.day div.body div.section p>a.okeyword:visited {
}
div.day div.body div.section h3 {
    margin: 0;
}
div.day div.body div.section h3 span.timestamp {
    font-size: 80%;
}
div.day div.body div.section h3 span.tags {
    font-size: 80%;
}
div.day div.body div.section ul, div.day div.body div.section ol {
    padding-left: 2em;
}
div.day div.body div.section blockquote ul,
div.day div.body div.section blockquote ol {
}

div.day div.body div.section div.tags {
    margin: 0;
    text-align: left;
    margin-bottom: 5px;
    padding-left: 15px;
    font-size: 100%;
}

div.day div.body span.footnote {/*本文中のfootnote*/
    vertical-align: super;
    font-size: 80%;
}
div.day div.body div.section blockquote span.footnote a {/*blockquote内に現れた時(滅多にないが)*/
    padding-left: 0px;
    background-image: none; 
}
div.day div.body div.footnote {/*欄外のfootnote*/
    font-size: 80%;
    border-style: solid;
    border-color: #8fbc8f;
    border-width: 1px 0px 0px 0px;
    margin-left: 0em;
    padding-left: 2em;
    padding-right: 2em;
}
div.day div.body p.footnote {
}

div.day div.body div.section ul {
    list-style: disc;
}


/*コメント表示欄*/
div.day div.comment {
    margin: 1em 0em 1em 0em;
}
div.day div.comment div.caption { /*位置指定*/
    padding-right: 2em;
}
div.day div.comment div.commentbody {
    font-size: 92%;
    margin: 0.5em;
}
div.day div.comment div.commentbody div.commentator {
}
div.day div.comment div.commentbody div.commentator span.commentator {
    font-weight: bold;
}
div.day div.comment div.commentbody div.commentator span.commenttime {
}
div.day div.comment div.commentbody div.highlight {
}
div.day div.comment div.commentbody div.highlight span.commentator {
    font-weight: bold;
}
div.day div.comment div.commentbody p {
    margin: 0em 0.5em 1em 2em;
}
div.day div.comment div.commentshort {
    font-size: 80%;
    margin-left: 0.5em;
}
div.day div.comment div.commentshort p {
    margin: 0.2em 0 0.2em 0;
}

div.caption { /*装飾指定*/
    font-size: 88%;;
    border-style: solid;
    border-color: #8fbc8f;
    border-width: 0px 0px 1px 0px;
}

/*コメントフォーム欄*/
div.day #comment-form-section {
    margin: 1em 0em 1em 0em;
}
div.day #comment-form-section div.form {
    color: #999999;
}
div.day #comment-form-section div.form div.caption {
    margin-bottom: 0.5em;
}
div.day #comment-form-section div.form form.comment {
    font-size: 80%;
    margin-left: 2em;
}
div.day #comment-form-section div.form form.comment div.field {/*name mailと併記されるclass*/
    display: inline;
}
div.day #comment-form-section div.form form.comment div.name {
}
div.day #comment-form-section div.form form.comment div.mail {
}
div.day #comment-form-section div.form form.comment div.textarea {
    display: block;
    vertical-align: top;
    margin: 0.5em 0em 0.5em 0em;
}
div.day #comment-form-section div.form form.comment textarea {/*divじゃないよ*/
    display: block;
    width: 30em;
    height: 5em;
    margin-left: 3em;
}

div.day #comment-form-section div.form form.comment input,
div.day #comment-form-section div.form form.comment textarea {/*ここは装飾*/
    background-color: #eef;
    color: #000;
}

div.day #comment-form-section div.form form.comment div.button {
    display: block;
    margin-left: 3em;
}

/*トラックバック表示欄
 *  コメント表示欄とclass共有されているので、トラックバック欄で適用したいが
 *  コメント欄には適用したくない指定だけが入る
 */
div.day div.trackbacks {
}
div.day div.trackbacks div.caption {
}
div.day div.trackbacks div.trackbackbody {
}
div.day div.trackbacks div.trackbackbody div.trackback {
}
div.day div.trackbacks div.trackbackbody div.trackback p {
}
div.day div.trackbacks div.trackbackbody div.trackback span.trackbackblog {
}
div.day div.trackbacks div.trackbackbody div.trackback span.trackbacktime {
}
div.day div.trackbacks div.trackbackbody div.highlight {
}
div.day div.trackbacks div.trackbackbody div.highlight p {
}
div.day div.trackbacks div.trackbackbody div.highlight span.trackbackblog {
}
div.day div.trackbacks div.trackbackbody div.highlight span.trackbacktime {
}



/*
 *-------------------------------------
 * parts
 */

/*操作メニュー*/
div.adminmenu {
    width: auto;
    height: 1.5em;
    float: right;
    display: inline;
    margin: 2px;
    padding-top: 3px;
}
div.adminmenu:after {content: ""; display: block; clear: both;}

span.adminmenu {
    background-color: #f5f5dc;
    border-style: solid;
    border-color: #eeeeff #999999 #999999 #eeeeee;
    border-width: 1px;
    margin: 1px;
    padding: 2px;
    display: inline;
}

/*
 *ASIN
 */
div.day div.body div.section div.hatena-asin-detail,
div.day div.body div.section div.materia-asin-detail {
    margin: 5px;
}
div.day div.body div.section div.hatena-asin-detail a,
div.day div.body div.section div.materia-asin-detail a {
    padding-left: 0px;
    background-image: none;
}
div.day div.body div.section div.hatena-asin-detail img.hatena-asin-detail-image,
div.day div.body div.section div.materia-asin-detail img.materia-asin-detail-image {
    border: none;
    float: left;
}
div.day div.body div.section div.hatena-asin-detail img.hatena-asin-detail-image:after,
div.day div.body div.section div.materia-asin-detail img.materia-asin-detail-image:after {
content: ""; display: block; clear: both;
}

div.day div.body div.section div.hatena-asin-detail div.hatena-asin-detail-info p,
div.day div.body div.section div.materia-asin-detail div.materia-asin-detail-info p {
    font-weight: bold;
    margin: 0.5em 0 0.7em 1em;
}

div.day div.body div.section div.hatena-asin-detail div.hatena-asin-detail-info,
div.day div.body div.section div.materia-asin-detail div.materia-asin-detail-info {
    line-height:150%;
    margin:0 0 0 0.5em;
    float:left;
}
div.day div.body div.section div.hatena-asin-detail div.hatena-asin-detail-info:after,
div.day div.body div.section div.materia-asin-detail div.materia-asin-detail-info:after {
content: ""; display: block; clear: both;
}
div.day div.body div.section div.hatena-asin-detail div.hatena-asin-detail-info ul,
div.day div.body div.section div.materia-asin-detail div.materia-asin-detail-info ul {
    list-style-type: none;
}
div.day div.body div.section div.hatena-asin-detail div.hatena-asin-detail-foot,
div.day div.body div.section div.materia-asin-detail div.materia-asin-detail-foot {
 clear: both;
}

/*
 *pre formatted text
 */
div.day div.body div.section pre {
    background: none repeat scroll 0 0 #3E3B38;
    border: 2px solid #000000;
    color: #F2ECE6;
    line-height: 1.4em;
    margin-left: 4em;
    margin-right: 1em;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px;
}

/*
 *blockquote
 */
div.day div.body div.section blockquote {
    border-style: solid;
    border-color: #ddf;
    border-width: 2px;
    margin: 2px 3em 2px 3em;
    padding: 4px 4px 4px 4px;
}
* html div.day div.body div.section blockquote {/*IE6*/
}
div.day div.body div.section blockquote p {
    margin: 5px 0 5px 0;
    vertical-align: bottom;
}
div.day div.body div.section p.source{
    margin-top: 0em;
    margin-right: 1.5em;
    text-align: right;
    font-size:90%;
}
/* anchor in blockquote */
div.day div.body div.section blockquote a {
    padding-left: 41px;
    background-image: url("link.png");
    background-repeat: no-repeat;
    border-bottom :solid 1px #222;
    text-decoration : none ;
}
div.day div.body div.section blockquote a.withpreview,
div.day div.body div.section blockquote a.snap_shots {
    background-image: url("link_preview.png");
}
div.day div.body div.section blockquote a:link {
    color: #003333;
    border-color: #555;
}

div.day div.body div.section blockquote a:visited {
    color: #003333;
    border-color: #CCC;
}
div.day div.body div.section blockquote a:hover {
    color: #009999;
/*    color: #f4a460;
    background-color: #CCC;
    border-color: #AAA; */
}


/*anchor without image*/
div.day div.body div.section blockquote a.noimage,
div.day div.body div.section blockquote a.hatena-fotolife {
    padding-left: 0px;
    background-image: none;
    text-decoration : none ;
    border-bottom :solid 1px #222 ;
}
div.day div.body div.section blockquote a.noimage:link,
div.day div.body div.section blockquote a.hatena-fotolife:link {
    color: #003333;
    border-color: #222;
}
div.day div.body div.section blockquote a.noimage:visited,
div.day div.body div.section blockquote a.hatena-fotolife:visited {
    color: #003300;
    border-color: #EEE;
}
div.day div.body div.section blockquote a.noimage:hover,
div.day div.body div.section blockquote a.hatena-fotolife:hover {
    color: #009999;
/*    color: #f4a460;
    background-color: #EEE;
    border-color: #EEE; */
}

/*keyword in blockquote */
div.day div.body div.section blockquote a.keyword {
    border-bottom : none ;
    padding-left: 0px;
    background-image: none;
}
div.day div.body div.section blockquote a.keyword:link {
    color: #003333;
    border-bottom :solid 2px #BBB ;
}
div.day div.body div.section blockquote a.keyword:hover {
    color: #009999;
/*    background-color: #EEE;
    color: #f4a460;
    border-bottom :solid 1px #888;
    text-decoration : none ; */
}
div.day div.body div.section blockquote a.keyword:visited {
    color: #003333;
    border-bottom :dashed 2px #BBB ;
}

/*group keyword in blockquote */
div.day div.body div.section blockquote a.okeyword {
    padding-left: 0px;
    background-image: none;
    background-color: transparent;
    color: #000000;
    text-decoration: none;
    border: none;
}
div.day div.body div.section blockquote a.okeyword:link {
    background-color: transparent;
    color: #000000;
    text-decoration: none;
    border: none;
}
div.day div.body div.section blockquote a.okeyword:hover {
    background-color: transparent;
    color: #000000;
    text-decoration: none;
    border: none;
}
div.day div.body div.section blockquote a.okeyword:visited {
    background-color: transparent;
    color: #000000;
    text-decoration: none;
    border: none;
}


/*
 *-------------------------------------
 * Decoration
 */
a:link {
    background-color: transparent;
    color: #000000;
    text-decoration: none;
}
a:visited {
    background-color: transparent;
    color: #000000;
    text-decoration: none;
}
a:hover {
    background-color: transparent;
    color: #009999;
    text-decoration: underline;
}

hr.sep {
    display: none;
}

h2 {
    background-color: #EDF2E3;
    margin-bottom: 1em;
    padding-left: 4px;
}
h2 span.date {
    font-size: 123%;
    margin-right: 0.5em;
}

h3 {
    font-size: 110%;
    font-weight: bold;
    border-left: double 6px #8fbc8f;
    margin-top: 1em;
    padding-left: 10px;
}
h3 a {
    border-bottom :solid 1px #CCC ;
}

h3 a:link {
}

h3 a:visited {
}

h3 a:hover {
}


h4 { /*設定画面で出てくる*/
    font-size: 110%;
    padding-left: 10px;
    margin-left: 10px;
}
/*
subsection
*/
h4 {
font-size: 110%;
margin: 0em;
border-left: solid 1px #8fbc8f;
border-bottom: solid 1px #8fbc8f;
padding-left: 10px;
margin-left: 10px;
}


img.hatena-fotolife {
    border: solid 1px #555;
}

/*
 *ルビ表示
 * based upon
 *  http://blog.livedoor.jp/dankogai/archives/51081230.html
 */
ruby {
  display:inline-table !important;
  text-align:center !important;
  white-space:nowrap !important;
  text-indent:0 !important;
  margin:0 !important;
  vertical-align:text-bottom !important;
  line-height:1 !important;
}

ruby>rb,ruby>rbc {
  display:table-row-group !important;
  line-height:1.0 !important;
}

ruby>rt,ruby>rbc+rtc {
  display:table-header-group !important;
  font-size:71% !important;
  line-height:1.0 !important;
  letter-spacing:0 !important;
}

ruby>rbc+rtc+rtc {
  display:table-footer-group !important;
  font-size:71% !important;
  line-height:1.0 !important;
  letter-spacing:0 !important;
}

rbc>rb,rtc>rt {
  display:table-cell !important;
  letter-spacing:0 !important;
}
rp {
  display:none !important;
}

/*
 *category page
 */
body>p,
div.conf {
    margin: 1em 5em;
}

/*
 *update form
 */
body>h1 {
    margin: 0 5em;
}
div.update {
    margin: 0 5em;
}
form.update {
    padding: 0.5em 5em;
}
form.update input,
form.update textarea,
form.commentstat input {
    background-color: #eef;
    color: #000;
}

form.update span.field {
    display: inline;
    margin-left: 0em;
    margin-right: 0.5em;
}

form.update div.field.title {
    display: block;
    margin-top: 1em;
}

form.update div.field.title input {
    margin-left: 0.5em;
}

form.update div.textarea {
    display: block;
    margin-top: 1em;
}
form.update textarea {
    display: block;
    margin-left: 3em;
    margin-bottom: 1em;
    width: 35em;
    height: 15em;
}

form.update span.checkbox.hidediary {
    margin-left: 1em;
}


@media print{ /* printer-friendly */
  #main { margin: 0; padding: 0; float: left; }
  #main div.day, #main hr.sep { /*IE6向けセレクタ*/
    margin: 0;
  }
  #main > * { margin: 0; }

  #sidebar, #amazonstore  { display: none; } 
  div.section blockquote a { padding-left: 1px; background-image: none; }
  div.day div.calendar { display: none; }
  div.adminmenu { display: none; }
  #comment-form-section { display: none; }

  div.caption { border-width: 0px; }
}

@media screen and (max-device-width: 640px) {
  /* iphoneなど480px以下のscreen対象(iPhone4S portraitも) */
  #main { margin: 0; padding: 0; float: none; }
  #main div.day, #main hr.sep { /*IE6向けセレクタ*/
    margin: 0;
  }
  #main > * { margin: 0; }

  #amazonstore  { display: none; } 
  #sidebar { float: none; width: auto; } 

  #header h1 { float: none; display: block; }
  div.adminmenu { float: none; display: block; height: auto; line-height: 1.7; }
  div.day div.calendar div.year { display: none; }
  
  textarea { font-size: 30%; }
  div.day #comment-form-section div.form form.comment div.textarea {
    margin: 0;
  }
  div.day #comment-form-section div.form form.comment textarea {/*divじゃないよ*/
    width: auto;
    margin-left: 0;
  }

  pre { white-space: pre-wrap; word-break: break-all; }
  blockquote a { word-break: break-all; }
}