/*
Theme Name: DIY blog
Author: Yasuaki Nojiri
Description: style.css
Version: 1.0
*/
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

* {
    margin: 0;
    padding: 0;
}

html {
    font-size: 14px;
}

body {
    margin: 0px 0;
    background: #FFFFFF url(images/img01_c.jpg) repeat-x left top;
    text-align: justify;
    font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','游ゴシック','Yu Gothic','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif,'Trebuchet MS', "Times New Roman", Times, serif;
    font-size: 1.0rem;
    color: #666666;
}

form {
}

form br {
}

input, textarea {
    padding: 5px;
    font: bold 1em 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','游ゴシック','Yu Gothic','メイリオ',Meiryo,'ＭＳ Ｐゴシック',Georgia, "Times New Roman", Times, serif;
    color: #333333;
    background: #F9F3DF;
    border-top: 1px solid #CB960F;
    border-right: 1px solid #CCCC99;
    border-bottom: 1px solid #CCCC99;
    border-left: 1px solid #CB960F;
}

h1, h2, h3 {
    padding-bottom: 10px;
    margin-bottom: 15px;
    text-transform: uppercase;
    font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','游ゴシック','Yu Gothic','メイリオ',Meiryo,'ＭＳ Ｐゴシック',Arial, Helvetica, sans-serif;
}

h1 {
    font-size: 1.4rem;
}

h2 {
    font-size: 1.4rem;
}

h3 {
    font-size: 1.0rem;
}

p, ul, ol {
    margin-top: 1.5rem;
}

ul, ol {
    margin-left: 3em;
}

blockquote {
    margin-left: 3em;
    margin-right: 3em;
    font-style: italic;
}

a {
  text-decoration: none;
  color: #1188AA;
}

a:hover {
  border: none;
  color: #1188AA;
}

pre {
    overflow: auto;
}

pre.console {
    background: none repeat scroll 0 0 #e7f1ed;
    font-size: 90%;
    padding: 5px;
}

/* Header */

#header {
    width: 860px;
    height: 192px;
    margin: 0 auto;
    background: #000000 url(images/headback.png) left top;
}

#logo {
    float: left;
    height: 40px;
}

#logo h1, #logo h2 {
    float: left;
    margin-top: 20px;
    text-transform: lowercase;
    font-weight: normal;
}

#logo h1 {
  padding: 0px 0 0 15px;
  font-size: 2.0rem;
}

#logo h2 {
    padding: 17px 0 0 6px;
    font-size: 1.2rem;
}

#logo a {
  border: none;
  text-decoration: none;
  color: #222222;
}

#menu {
    float: right;
    height: 40px;
}

#menu ul {
    margin: 0;
    padding: 20px 0px 0 0;
    list-style: none;
}

#menu li {
    float: left;
}

#menu a {
  display: block;
  float: left;
  border-left: 2px solid #1188aa;
  margin-right: 3px;
  padding: 5px 18px 5px 18px;
  text-transform: lowercase;
  text-decoration: none;
  font-size: 1.0rem;
  color: #222222;
}

#menu a:hover {
    text-decoration: underline;
    color: #FFFFFF;
}

#menu a.menu-flw {
    margin: 0;
}

#menu a.menu-navi {
    margin: 0;
    font-weight: bold;
    display: none;
}

/* Page */

#page {
    width: 860px;
    margin: 0 auto;
    padding: 30px 0 0 0;
}

/* Content */

#content {
    float: left;
    width: 610px;
    padding: 0 0 0 30px;
}

.post {
}

.post .title {
    margin: 0;
    background: url(images/img03.jpg) repeat-x left bottom;
}

.post .title h1, .post .title h2 {
    margin: 0;
    padding: 0;
}

.post .title a {
    border: none;
    color: #666666;
}

.post .meta {
    margin: 0;
    padding: 3px 0 0 0;
    font: bold 10px Arial, Helvetica, sans-serif;
    color: #CCCCCC;
}

.post .entry {
    margin-top: 1.5em;
    padding-bottom: 20px;
}

.post .entry p, .post .entry ol, .post .entry ul {
    line-height: 180%;
}

.post .tags {
    margin: 0;
    padding: 10px;
    border-top: 1px solid #DEDEDE;
    font-size: smaller;
    text-align: center;
}

.post .tags a {
    margin-left: 10px;
}

.post .links {
    text-align: center;
    margin: 0 0 30px 0;
    padding: 5px 10px;
    border: 1px solid #DEDEDE;
    font-size: smaller;
    text-transform: uppercase;
}

.post .links a {
    font-weight: bold;
}

.post ul {
    padding-bottom: 25px;
}

.post h2, .post h3 {
    padding-top: 20px;
}

.post img.large-width {
    width: calc( 860px - 220px - 30px );
}

#recent-posts {
}

#recent-posts h3 {
    margin: 0;
    padding: 20px 0 0 0;
    border-bottom: 1px solid #DEDEDE;
}

#recent-posts ul {
    margin: 0;
    padding: 0;
}

#recent-posts li {
    margin: 0;
    padding: 0;
}


/* Sidebars */

.sidebar {
    float: left;
}

.sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar li {
    padding-bottom: 20px;
}

.sidebar li ul {
}

.sidebar li li {
    padding: 5px 0;
}

.sidebar h2 {
    background: url(images/img03.jpg) repeat-x left bottom;
    letter-spacing: -1px;
    color: #666666;
}

/* Sidebar1 */

#sidebar1 {
    width: 220px;
}

#sidebar1 li li {
    background: url(images/img05.gif) no-repeat left 50%;
    margin-left: 10px;
    padding-left: 10px;
}

#sidebar1 h2 {
}

#sidebar1 img {
    display:block;
    margin:0 0 3px 0;
}

/* Sidebar2 */

#sidebar2 {
    width: 240px;
}

/* Calendar */

#calendar {
}

#calendar_wrap {
    padding: 0;
}

#calendar caption {
    padding-bottom: 5px;
    font-size: 1.2rem;
    font-weight: bold;
}

#calendar table {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
    border: 1px solid #DEDEDE;
}

#calendar thead th {
  padding: 5px 0;
  background: #F9F3DF;
  border-bottom: 1px solid #DEDEDE;
  color: #1188AA;
}

#calendar tbody td {
    padding: 5px 0;
    border-right: 1px dotted #DEDEDE;
    border-bottom: 1px dotted #DEDEDE;
}

#calendar tfoot td {
    padding: 5px;
    border-top: 1px solid #DEDEDE;
}

#calendar tfoot a {
    border: none;
    font-weight: bold;
}

#calendar #next {
    text-align: right;
}

#calendar #prev {
    text-align: left;
}

/* Footer */

#footer {
    clear: both;
    width: 860px;
    height: 40px;
    margin: 0 auto;
    background: url(images/img02.jpg) repeat-x left top;
}

#footer p {
    margin: 0;
    padding: 15px 0px;
    font-size: 0.85rem;
}

#footer .legal {
    float: left;
    height: 40px;
    padding-left:5px;
}

#footer .credit {
    float: right;
    height: 40px;
    padding-right:5px;
}

/* Nucleus CMS stuff. Edited and modified by Suvoroff (http://nucleus.com.ru) */

.nocomments {
    margin: 1.5em 0 2em 0;
}

.commentbody {
    margin-top: 0.5em;
    padding-bottom: 16px;
}

.commentcast {
    margin: 0;
    padding: 8px 0 0 0;
    font: bold 10px Arial, Helvetica, sans-serif;
    color: #CCCCCC;
}

#search {
}

#search form {
    margin: 0;
    padding: 0;
}

.search {
    margin-top:15px;
}

.searchform br {
    display: none;
}

.searchform .formfield {
    width: 94%;
    border: 1px #DEDEDE solid;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.85rem;
    font-weight: normal;
}

.formbutton {
    padding: 3px 10px;
    margin: 5px 0 0 0;
    background: url(images/img04.jpg) repeat-x left top; 
    border: none;
    text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.77rem;
    font-weight: normal;
    color: #FFFFFF;
}

.formfield {
    border: 1px #DEDEDE solid;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.85rem;
    font-weight: normal;
}

.login {
    padding:5px 0;
}

.loginform .formfield {
    display:block;
    width: 94%;
    border: 1px #DEDEDE solid;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.85rem;
    font-weight: normal;
}

#nucleus_cf_remember, #nucleus_lf_shared {
    border: 1px #DEDEDE solid;
    padding:3px;
    margin:4px 2px 2px 0;
}

*:first-child+html #nucleus_cf_remember, *:first-child+html #nucleus_lf_shared {
    margin:0 2px 0 -4px;
    padding:0;
    border:0;
    background:#fff;
} *html #nucleus_cf_remember, *html #nucleus_lf_shared {
    margin:0 2px 0 -4px;
    padding:0;
    border:0;
    background:#fff;
}

#nucleus_cf_body {
    width:450px;
}

#nucleus_cf_name, #nucleus_cf_mail, #nucleus_cf_email, #nucleus_cf_verif, #nucleus_mmf_frommail {
    width: 450px;
    height:20px;
}

.commentform .formfield, .commentform .formbutton, .loginform .formbutton, .mailform .formfield {
    display: block;
}

.commentform textarea, .commentform .formfield, .mailform textarea, .mailform .formfield {
    width: 450px;
    margin-right: 105px;
    margin-bottom:3px;
}

.error {
    color: red;
    font-weight: bold;
}

.pageswitch {
    text-align:center;
    padding:0 20px 10px 20px;
    margin:0 0 10px 0;
}

.itemswitch {
    text-align:center;
    padding:20px 20px 0 100px;
    margin:0 0 2rem 0;
}

.padding {
    padding:8px 10px;
}

.counters {
    padding:10px 15px 5px 10px;
}

.leftbox {
    float: left;
    margin: 5px 15px 0 0;
}

.rightbox {
    float: right;
    margin: 5px 0 0 15px;
}

br.endbox {
    height: 0;
    clear : both;
}

dev.attention {
    margin: 5px 0 10px 0;
    font-size: smaller;
    text-align: left;
    background:#FFCCCC;
}

pre.sourcecode {
    margin: 5px;
    padding:5px;
    font-size: 0.85rem; 
    line-height: 8px;
    text-align: left;
    border-style: solid;
    border-width: 1px 1px 1px 5px;
    border-color: #1188aa #1188aa #1188aa #1188aa;
    background:#e9fcff;
}

pre.sourcecode_scroll {
    margin: 5px;
    padding:5px 5px;
    font-size: 0.85rem; 
    line-height: 8px;
    text-align: left;
    word-wrap: normal;
    overflow: auto;
    width: auto;
    max-height: 600px;
    border-style: solid;
    border-width: 1px 1px 1px 5px;
    border-color: #1188aa #1188aa #1188aa #1188aa;
    background:#e9fcff;
}

pre.sourcecode_scroll_s {
    margin: 5px;
    padding:5px 5px;
    font-size: 0.85rem; 
    line-height: 8px;
    text-align: left;
    word-wrap: normal;
    overflow: auto;
    width: auto;
    max-height: 5em;
    border-style: solid;
    border-width: 1px 1px 1px 5px;
    border-color: #1188aa #1188aa #1188aa #1188aa;
    background:#e9fcff;
}

div.rbox_sourcecode {
    margin: 5px 5px 5px 300px;
    padding:5px 5px;
    font-size: 0.85rem; 
    word-wrap: normal;
    border-style: solid;
    border-width: 1px 1px 1px 5px;
    border-color: #1188aa #1188aa #1188aa #1188aa;
    background:#e9fcff;
}

h5.blockheader {
    margin: 0 0 0 0;
    font-size: 1.0rem;
    font-weight: bold;
    text-align: left;
    background:#aadddd;
}
h7.blockheader {
    margin: 0 0 5px 0;
    font-size: 1.0rem;
    font-weight: bold;
    text-align: left;
    background:#eeccaa;
}
table.datatable {
    border="1";
    cellspacing="0";
    border: 1px #1188aa solid;
}
th.datatable {
    padding: 2px 5px 1px 5px;
    font-size: 1.0rem;
    font-weight: bold;
    text-align: center;
    background:#eeccaa;
}
td.datatable_text {
    padding: 2px 5px 1px 5px;
    font-size: 1.0rem;
    text-align: left;
    background:#e9fcff;
}
td.datatable_num {
    padding: 2px 5px 1px 5px;
    font-size: 1.0rem;
    text-align: right;
    background:#e9fcff;
}
/* 
 * for smart phone
 */
@media screen and (max-width:767px) {
  
  
  #content {
    padding: 0 5px 0 5px;
  }
  
  #header {
    width: 97%;
  }
  
  #menu li {
    background-color: rgba( 77, 130, 162, 0.25 );
  }
  
  #menu a {
      color: #ffffff;
      text-shadow:0px 0px 3px #222222;
  }
  
  #menu a:hover {
      color: #ffb776;
  }
  
  #menu a.menu-navi {
      display: block;
  }
  
  #page {
    
    width: 97%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    grid-template-areas:
      "grid-content"
      "grid-sidebar";
    grid-column-gap: 0;
    grid-row-gap: 2rem;
    
  }
  
  #sidebar1 {
    
    width: 97%;
    grid-area: grid-sidebar;
    
  }
  
  #content {
    
    width: 97%;
    grid-area: grid-content;
    
  }
  
  #footer {
    width: 94%;
  }
  
  .post img.large-width {
      width: 608px;
      height: auto;
  }
  
  .post pre {
      width: 608px;
  }
  
  #nucleus_cf_body {
    width: 97%;
  }
  
  #nucleus_cf_name, #nucleus_cf_mail,
  #nucleus_cf_email,#nucleus_cf_verif, #nucleus_mmf_frommail {
    width: 97%;
  }
  
  .searchform .formfield {
    width: 97%;
  }
  
  .commentform textarea, .commentform .formfield,
  .mailform textarea, .mailform .formfield {
    width: 97%;
  }
  
}

@media screen and (max-width:640px) {
  
  .post img.large-width {
      width: 381px;
      height: auto;
  }
  
  .post pre {
      width: 381px;
      overflow: auto;
  }
  
  div.rbox_sourcecode {
      margin:5px;
  }
  
  .entry .leftbox {
      margin-top: 1rem;
      margin-bottom: 0.5rem;
      float: none;
  }
  
  .entry .rightbox {
      float : none;
  }
  
}

@media screen and (max-width:413px) {
  
  #logo h1 {
    font-weight: bold;
    font-size: 1.7rem;
  }
  
  .post img.large-width {
      width: 328px;
      height: auto;
  }
  
  .post pre {
      width: 328px;
  }
  
}

@media screen and (max-width:359px) {
  
  #logo h1 {
    font-weight: bold;
    font-size: 1.4rem;
  }
  
  .post img.large-width {
      width: 280px;
      height: auto;
  }
  
  .post pre {
      width: 280px;
  }
  
}

/* end of file */