@import url("common.css");
@import url(http://fonts.googleapis.com/css?family=Mrs+Sheppards);

/* Candy Stripe Template
 * (C) Kakei.R
 * update 2016/04/21
 */

/* body
 */

body {
  margin: 0;
  background-color: #ffffcc;
  text-align: center;
}

/* 罫線
 */

hr {
  display: none;
}

/* 装飾 共通部分
 */

#header, #main, #menu {
  margin: 0 auto;
  max-width: 900px;
  text-align: left;
}

#site_title, #main h2, .page_link, .entry_title, .entry_responses a, #responses, #menu {
  background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255,255,255,.6)), color-stop(.25, rgba(255,255,255,0)), color-stop(.5, rgba(255,255,255,0)), color-stop(.5, rgba(255,255,255,.6)), color-stop(.75, rgba(255,255,255,.6)), color-stop(.75, rgba(255,255,255,0)),to(rgba(255,255,255,0)));
  background-image: -webkit-linear-gradient(-45deg, rgba(255,249,255,.8) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%, rgba(255,249,255,.8) 50%, rgba(255,249,255,.8) 75%, rgba(255,255,255,0) 75%, rgba(255,255,255,0));
  background-image: linear-gradient(-45deg, rgba(255,249,255,.8) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%, rgba(255,249,255,.8) 50%, rgba(255,249,255,.8) 75%, rgba(255,255,255,0) 75%, rgba(255,255,255,0));
}

.page_link, .entry_title, .entry_responses a, #menu, .link_title, .link_text {
  -webkit-box-shadow: .3em .3em .3em rgba(255,254,255,.5) inset, -0.3em -0.3em .3em rgba(0,0,0,.15) inset, .1em .1em 3px hsl(60,50%,55%), .1em .3em 1px hsl(60,50%,40%), 0 .5em 5px rgba(0,0,0,.2);
  box-shadow: .3em .3em .3em rgba(255,254,255,.5) inset, -0.3em -0.3em .3em rgba(0,0,0,.15) inset, .1em .1em 3px hsl(60,50%,55%), .1em .3em 1px hsl(60,50%,40%), 0 .5em 5px rgba(0,0,0,.2);
}

#main h2, #archive_yearlist dt, .entry_title, .entry_body, .entry_responses a, #menu, .link_title, .link_text {
  -webkit-border-radius: .5em;
  border-radius: .5em;
}

#main h2, #archive_yearlist dt, .page_link, .entry_title, .entry_responses a, .link_title {
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, 1px 1px 0 #fff, -1px 1px 0 #fff, .18em .18em .15em rgba(0,0,0,.2);
}

.entry_title, .entry_responses a, #responses, #menu {
  background-color: rgb(255,255,102);
  -webkit-background-size: 20px 20px;
  background-size: 20px 20px;
}

#site_title, #main h2, .page_link {
  -webkit-background-size: 10px 10px;
  background-size: 10px 10px;
}

/* header
 */

#site_title {
  margin: 0;
  padding: .1em .1em .3em;
  background-color: #faf600;
  -webkit-background-clip: text;
  background-clip: text;
  color: #96820d;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #96820d;
  font: normal 3.2em/1.1 'Mrs Sheppards', cursive;
}

#site_info {
  padding-left: 10px;
}

#back_link {
  margin: 0;
}

#back_link li {
  display: inline-block;
  list-style-type: none;
}

/* main
 */

#main {
  padding: 5px 0;
}

/* main - より新しい記事へ より古い記事へ
 */

.page_link {
  margin: .6em;
  padding: .4em 0;
  -webkit-border-radius: 1em;
  border-radius: 1em;
  background-color: #dbedff;
  text-align: center;
}

.page_link a span {
  padding: .4em;
}

.page_link a:first-child span:after {
  content: attr(title);
}

.page_link a:last-child span:before {
  content: attr(title);
}

/* main - 月別ページ「XXXX年XX月の記事」
 * main - 年別ページ「XXXX年の記事」 */

#main h2 {
  position: relative;
  display: block;
  margin-left: 10px;
  padding: .6em .4em .6em 10px;
  border: 1px solid #e6e600;
  background-color: #ffff99;
  text-align: left;
}

#main h2:before, #main h2:after {
  position: absolute;
  top: 100%;
  width: 0;
  height: 0;
  border-bottom-width: 0;
  content: "";
}

#main h2:before {
  left: 120px;
  border: 10px solid transparent;
  border-top-color: #e6e600;
}

#main h2:after {
  left: 122px;
  border: 8px solid transparent;
  border-top-color: #ffff99;
}

#archive_yearlist dl {
  margin: 0 0 0 20px;
}

/* main - 年別ページ「XXXX年XX月」
 */

#archive_yearlist dt {
  padding: .4em .4em .4em 10px;
  border: 1px solid #e6e600;
  background-color: #ffffcc;
  font-weight: bold;
}

#archive_yearlist dd {
  color: #999900;
  line-height: 1.6;
}

#archive_yearlist dd li {
  list-style-type: circle;
}

#archive_yearlist dd li:hover {
  list-style-type: disc;
}

#archive_yearlist dd li .time {
  color: #666666;
}

#archive_yearlist dd li:hover .time {
  color: #ff6666;
}

#archive_yearlist dd li a {
  line-height: 1.6;
}

#archive_yearlist .time {
  font-size: .9em;
}

/* main - .entry
 */

.entry {
  position: relative;
  margin: 0 0 2em;
  padding: 0;
  width: 100%;
}

.entry_date, .entry_info {
  padding: .6em .2em .2em;
  color: #96820d;
  font: normal 1.2em/1.1 'Mrs Sheppards', cursive;
}

.entry_title {
  z-index: 9;
}

.entry_title a {
  display: block;
  padding: .6em .4em .6em .5em;
  font-weight: bold;
  font-size: 1.2em;
  line-height: 1.2;
}

.entry_title a:link, .entry_title a:visited {
  text-decoration: none;
}

.entry_info {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 5;
  display: block;
  text-align: right;
}

.entry_info a:link, .entry_info a:visited {
  color: #96820d;
  text-decoration: none;
}

.entry_body {
  z-index: 9;
  margin-top: 10px;
  padding-left: 10px;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255,255,255,.9)), color-stop(100%, rgba(255,255,255,.4)));
  background-image: -webkit-linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,.4));
  background-image: linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,.4));
  word-wrap: break-word;
  word-break: break-strict;
  line-height: 1.8;
}

.entry_body img {
  max-width: 100%;
  height: auto;
}

.entry_body p {
  line-height: 1.8;
}

/* main - entry - コメント()
 */

.entry_responses {
  position: relative;
  z-index: 9;
  margin: 0;
  padding-right: 1em;
  border-top: 1px solid #e6bf00;
  text-align: right;
}

.entry_responses a {
  display: inline-block;
  padding: .4em;
  font-weight: bold;
}

.entry_responses a:hover,.entry_responses a:active {
  -webkit-transform: translateY(2px);
  -ms-transform: translateY(2px);
  transform: translateY(2px);
}
/* main - コメント */

#responses {
}

.comment_title {
  display: block;
}

#comments {
  display: block;
  padding: 5px;
  border-top: 2px solid #e6bf00;
  border-bottom: 2px solid #e6bf00;
}

#responses form {
  margin: 0;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.2)), to(rgba(255,255,255,.9)));
  background-image: -webkit-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,.9));
  background-image: linear-gradient(to bottom, rgba(255,255,255,.2), rgba(255,255,255,.9));
}

.comment_form {
  padding: 10px 10px 0 0;
  border-bottom: 2px solid #e6bf00;
  vertical-align: baseline;
  text-align: right;
}

.comment_form input[type="text"] {
  min-height: 2em;
  border: 2px inset #ccc;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  background-color: rgba(255,255,255,0.9);
  -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,.2) inset, 0 0 3px #ccc;
  box-shadow: 3px 3px 3px rgba(0,0,0,.2) inset, 0 0 2px #ccc;
}

#poster_name, #comment_field {
  display: block;
  padding-left: .3em;
  width: 100%;
  text-align: left;
}

#poster_name {
  padding-left: 2.3em;
}

#poster_name input {
  width: 200px;
}

#comment_field input {
  width: 86%;
}

.comment_element {
  margin: 3px 0;
  border-top: 2px solid #e6bf00;
  border-bottom: 2px solid #e6bf00;
  background-color: #ffffe5;
  background-color: rgba(255,255,255,.9);
  color: #4080bf;
  line-height: 160%;
}

.comment_element:before {
  content: "\25b6";
}

.comment_body {
  color: #333333;
}

/* main - これ以前の記事へ
 */

.link_older {
  display: block;
  text-align: right;
}

.link_older a {
  display: inline-block;
  margin: .5em;
  padding: 9px;
  border: 3px solid #fff;
  -webkit-border-radius: 1em;
  border-radius: 1em;
  background-color: #06c;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(191,127,255,.5)), color-stop(50%,rgba(255,255,255,.5)), color-stop(51%,rgba(255,255,255,.3)), color-stop(100%,rgba(191,127,255,.6)));
  background-image: -webkit-linear-gradient(top, rgba(191,127,255,.5) 0%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.3) 51%,rgba(191,127,255,.6) 100%);
  background-image: linear-gradient(to bottom, rgba(191,127,255,.1) 0%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.3) 51%,rgba(191,127,255,.3) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7f7fff', endColorstr='#bf7fff',GradientType=0 );
  color: #fff;
  -webkit-box-shadow: inset rgba(255,255,255,.6) 0 0.3em .3em, inset rgba(0,0,0,.2) 0 -0.1em .3em, rgba(0,0,0,.4) 0 .1em 1px, rgba(0,0,0,0.2) 0 .2em 6px;
  box-shadow: inset rgba(255,255,255,.6) 0 0.3em .3em, inset rgba(0,0,0,.2) 0 -0.1em .3em, rgba(0,0,0,.4) 0 .1em 1px, rgba(0,0,0,0.2) 0 .2em 6px;
  text-decoration: none;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, 1px 1px 0 #000, -1px 1px 0 #000, -2px -2px 2px #000, 2px -2px 2px #000, 2px 2px 2px #000, -2px 2px 2px #000;
  font-weight: bold;
}

.link_older a:after {
  content: "\20\226b";
}

.link_older a:hover, .link_older a:active {
  padding: 7px;
  border-width: 5px;
}

.link_older a:hover {
  background-color: #ff0;
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7f7f', endColorstr='#bf7fff',GradientType=0 );
}

.link_older a:active {
  background-color: #ffd500;
}
.link_older a:not(:target){filter: none\9;} /* IE9 */

/* menu
 */

#menu {
  position: relative;
  height: 2em;
}

.link {
  behavior: expression(this.style.behavior || (this.onmouseover=new Function("this.className='onlink'"), this.onmouseout=new Function("this.className='link'")));
}

.link, .onlink {
  margin: 0 10px;
  padding: 0;
  color: #999900;
}

.link_title {
  position: absolute;
  top: 0;
  z-index: 10;
  margin: 0;
  padding: .3em 0;
  width: 225px;
  color: #191970;
  text-align: center;
  font-weight: bold;
  font-size: 1em;
  cursor: pointer;
  -webkit-touch-callout: none;
}

.link_title:before {
  content: "\25bc";
}

.onlink .link_title, .link_title:hover, .link:hover .link_title {
  z-index: 20;
  background-color: #ffffff;
  background-color: rgba(255,255,255,.8);
}

.link_text {
  position: absolute;
  top: 1em;
  z-index: 20;
  overflow: visible;
  margin: 0;
  padding: .1em .4em .5em 1.6em;
  background-color: rgba(255,255,204,.3);
  list-style-position: outside;
  list-style-type: circle;
  font-size: 0.99em;
}

.link .link_text {
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all .5s ease-out;
  transition: all .5s ease-out;
}

.onlink .link_text, .link:hover .link_text {
  top: 1.8em;
  visibility: visible !important;
  background-color: #ffffff;
  background-color: rgba(255,255,255,.96);
  opacity: 1;
}

.link_text li {
  padding-top: .4em;
}

/* menu - 最新の記事 前後の記事
 */

#latest_articles .link_title, #neighbors .link_title {
  left: 0;
}

#latest_articles .link_text, #neighbors .link_text {
  left: 0;
  width: 675px;
}

#link_here a {
  text-decoration: none;
}

/* menu - 最新のコメント
 */

#latest_comments .link_title {
  left: 225px;
}

#latest_comments .link_text {
  left: 225px;
  width: 675px;
}

/* menu - Archives
 */

#archives .link_title {
  left: 450px;
}

#archives .link_text {
  left: 450px;
  width: 450px;
}

.link_year {
  background-color: rgba(255,255,255,.6);
}

.link_year:after {
  content: "\005e74\a";
  white-space: pre;
}

.link_month:after {
  content: "\006708";
}

/* menu - Category
 */

#categories .link_title {
  left: 675px;
}

#categories .link_text {
  left: 675px;
  width: 225px;
}

/*  640 < screens < 900
 */

@media only screen and (min-width:640px) and (max-width:900px) {
.link_title { width: 160px;}
#latest_articles .link_text, #neighbors .link_text { width: 480px;}
#latest_comments .link_title { left: 160px;}
#latest_comments .link_text { left: 160px; width: 480px;}
#archives .link_title { left: 320px;}
#archives .link_text { left: 320px; width: 320px;}
#categories .link_title { left: 480px;}
#categories .link_text { left: 480px; width: 160px;}
}

/* 480 < screens < 640
 */

@media only screen and (min-width:480px) and (max-width:640px) {
#comment_field input { width: 80%;}
#menu{font-size:small;}
.link_title { width: 120px;}
#latest_articles .link_text, #neighbors .link_text { width: 360px;}
#latest_comments .link_title { left: 120px;}
#latest_comments .link_text { left: 120px; width: 360px;}
#archives .link_title { left: 240px;}
#archives .link_text { left: 240px; width: 240px;}
#categories .link_title { left: 360px;}
#categories .link_text { left: 360px; width: 120px;}
}

/* screens < 480
 */

@media only screen and (max-width:480px) {
.entry_date, .entry_info { font-size: small;}
#poster_name input { width: 100px;}
#comment_field input { width: 80%;}
#menu { height: auto;}
.link { margin: .3em 0;}
.link_title { position: static; width: auto;}
.link .link_text { position: static; visibility: visible; opacity: 1; max-height: 9em; overflow: hidden;}
#latest_articles .link_text, #neighbors .link_text, #latest_comments .link_text, #archives .link_text, #categories .link_text { width: auto;}
.link:hover .link_text { max-height: 100%; overflow: visible;}
.link_text li { width: 99%; white-space: nowrap; overflow: hidden; -webkit-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis;}
}

/* Candy Stripe Template End */