/*
	Theme Name: flab
	Theme URI: http://colorawesomeness.com/themes/pinbin
	Description: Pinbin WordPress theme is a fully responsive theme that looks great on any devices including iPad, iPhone or any other mobile device. This theme is inspired by Pinterest grid system that puts images first.  Pinbin is a perfect fit for photographers, web designers and anyone who likes to show off their photos, mockups, infographics and any other images.  Some other great features are sticky (fixed) navigation, translation ready, responsive layout, simplicity and minimalism.
	Author: Color Awesomeness
	Author URI: http://colorawesomeness.com/themes
	Version: 1.4.7
	License: GNU General Public License v2 or later
	License URI: http://www.gnu.org/licenses/gpl-2.0.html
	Tags: light, white, brown, gray, black, photoblogging, one-column, flexible-width, custom-background, custom-menu, featured-images, full-width-template, microformats, theme-options
*/

/* colour styles : reset
-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  border: 0;
  font-size: 100%;
  padding: 0;
  margin: 0;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

body  {
  font-size:12px;
  line-height:20px;
  /*font-family: Helvetica, sans-serif;*/
  /*font-family:"游ゴシック","YuGothic","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ ゴシック",sans-serif;*/
  font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic ProN', Meiryo, 'MS PGothic', Sans-serif;
  font-weight:normal;
  word-wrap: break-word;
  margin: 0;
  padding: 10px 0 0;
}

#wrap {
  margin-left: 311px;
}

/* Typohraphy
--------------------------------------------------------------*/
/* Fonts
--------------------------------------------------------------*/
h1,h2,h3,h4,h5 {
  color: #111;
}
h1 {
  font-size: 30px;
  line-height: 42px;
  padding-bottom: 5px;
  padding-top: 5px;
}
h2 {
  font-size: 22px;
  line-height: 32px;
  margin-bottom: 1em;
}
h2 a.front-link {
  text-decoration: none;
}
h3 {
  font-size: 18px;
  line-height: 28px;
}
h4 {
  font-size: 16px;
  line-height: 28px;
}
h5 {
  font-size: 14px;
  line-height: 26px;
  font-weight: normal;
}
h6 {
  font-size: 13px;
  line-height: 24px;
  color: #858585;
}
p {
  font-size: 13px;
  color: #454545;
  line-height: 24px;
  padding-top: 8px;
  padding-bottom: 8px;
}
/* Lists -bullet points
--------------------------------------------------------------*/
ul li {
  font-size: 12px;
  color: #858585;
  padding-left: 10px;
}
ol {
  margin-left: 25px;
}
ol li {
  font-size: 12px;
  color: #858585;
  padding-left: 10px;
  margin-bottom: 7px;
}
ul,ol {
  margin: 0 0 1.5em 3em;
}
ul {
  list-style: disc;
  margin-left: 20px;
}
ol {
  list-style: decimal;
}
ol li ol {
  list-style-type: lower-alpha;
}
ol li ol li ol {
  list-style-type: lower-roman;
}
ul ul,ol ol,ul ol,ol ul {
  margin-bottom: 0;
  margin-left: 1.5em;
}
hr {
  border:  0;
  border-top: 1px dotted #ddd;
  outline: 0;
  clear: both;
  height: 0px;
}
b,strong {
  font-weight: bold;
}
/* Text link style
--------------------------------------------------------------*/
a:link {
  color: #444444;
  text-decoration: underline;
}
a:visited {
  color: #111;
  text-decoration: underline;
}
a:hover {
  color: #111;
  text-decoration: none;
}
a:active {
  color: #444444;
  text-decoration: none;
}
a:focus {
  outline-style: none;
}
/* Main Navigation
--------------------------------------------------------------*/
#main-nav-wrapper {
  min-height: 42px;
  max-height: 86px;
  z-index: 2;
}
.main-nav {
  display: block;
  position: fixed;
  width:  300px;
  z-index: 3;
}
.main-nav ul {
  padding: 5px 0px;
  position: relative;
  margin-top: -1px;
}
.main-nav ul li {
  padding: 8px 8px 8px 0;
  position: relative;
  list-style: none;
}
.main-nav ul li a {
  display: block;
  color: #999;
  font-size: 13px;
  width: 100%;
  text-decoration: none;
}
.main-nav ul li a:hover {
  background: #fff;
}
.main-nav ul li:hover a,.main-nav li.current-menu-item a,.main-nav li.current-post-parent a {
  color: #111;
}
.main-nav ul li ul {
  display: none;
  z-index: 9999;
}
.main-nav ul ul li a:hover {
  color: #111 !important;
}
.main-nav ul li:hover ul {
  background: #fff;
  -webkit-box-shadow: 0 3px 7px -2px #333;
  box-shadow: 0 3px 7px -2px #333;
  display: block;
  margin-top: 5px;
  padding: 5px;
  position: absolute;
  left: 0px;
  top: 33px;
  width: 150px;
}
.main-nav ul li:hover ul li {
  padding: 4px;
  position: relative;
  width: 97%;
}
.main-nav ul ul li a {
  color: #999 !important;
  height: auto;
  display: block;
}
.main-nav ul .sub-menu li,.main-nav ul .children li {
  background: none;
  border-bottom: 1px dotted #e8e8e8;
  width: 100%;
}
.main-nav ul li:hover ul li ul {
  display: none;
}
.main-nav ul li:hover ul li:hover ul {
  border: none;
  display: block;
  margin: 0;
  position: absolute;
  left: 155px;
  top: 0;
  width: 150px;
}
#header {
  padding-bottom: 5px;
}
#header p {
  color: #999;
  line-height: 1.4;
}
/* Logo
--------------------------------------------------------------*/
#logo img {
  padding: 0 0 0 3%;
  width: 100%;
  max-width: 300px;
}
#logo img:hover,.pinbin-image img:hover {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);
  opacity: 0.8;
}
#logo img,.pinbin-image img {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  -webkit-transition: opacity 0.3s linear;
  -moz-transition: opacity 0.3s linear;
  -o-transition: opacity 0.3s linear;
  -ms-transition: opacity 0.3s linear;
  transition: opacity 0.3s linear;
}
/* Footer
--------------------------------------------------------------*/
#footer-area {
  width: 100%;
  display: inline;
  float: left;
  padding-top: 10px;
  margin-top: 20px;
  clear: both;
  border-top: 2px solid #fff;
}
#footer-area .widget {
  width: 310px;
  margin-right: 10px;
  padding-top: 15px;
  display: inline;
  float: left;
  font-size: 12px;
  color: #454545;
  line-height: 18px;
}
#footer-area .widget h3 {
  color: #858585;
  background: #fff;
  padding-left: 10px;
  margin-bottom: 10px;
}
#footer-area .widget p {
  color: #111;
}
#footer-area .widget ul {
  margin-left: 0px;
}
#footer-area .widget li {
  color: #858585;
}
#footer-area .widget a {
  color: #444444;
}
#footer-area .widget a:hover {
  color: #111;
}
#footer-area .widget-copy {
  width: 280px;
  overflow: hidden;
  display: inline;
  float: left;
  margin-left: 10px;
}
#footer-area .widget-copy a {
  text-decoration: none;
}
.widget img {
  max-width: 100%;
  height: auto;
}
#footer-area .wp-caption {
  border: 1px solid #999;
}
#searchsubmit,button,.comment-submit,input[type="submit"] {
  clear: both;
  width: auto;
  height: auto;
  line-height: 18px;
  background: url(./images/button-back.gif) bottom left repeat-x !important;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  text-shadow: 0 1px 0 rgba( 255, 255, 255, 0.45 ) !important;
  min-width: 0;
}
#searchsubmit:hover,.comment-submit:hover {
  background: #fff url(./images/button-back-over.gif) bottom left repeat-x;
  border: 1px solid #959595;
}
/* Footer copyright
--------------------------------------------------------------*/
#copyright {
  clear: both;
  width: 100%;
  border-top: 2px solid #fff;
  display: inline;
  float: left;
  margin-top: 20px;
  padding-top: 10px;
  margin-bottom: 20px;
}
#copyright p {
  padding-top: 15px;
  color: #4f5356;
  font-size: 12px;
}
#copyright a {
  color: #858585;
  text-decoration: none;
}
#copyright a:hover {
  color: #111;
  text-decoration: underline;
}
/* Post and page style
--------------------------------------------------------------*/
.type-post, .type-page {
  /*-webkit-box-shadow: 0 4px 8px -5px #555;*/
  /*box-shadow: 0 4px 8px -5px #555;*/
  box-shadow: 0 2px 3px #aaa, 0 0 40px #eee inset;
}
.type-post,.type-page,.type-attachment,#post-area .post {
  /*border-right: 1px solid #dbdbdb;*/
  /*border-bottom: 1px solid #dbdbdb;*/
}
.type-post,.type-page,.type-attachment {
  width: 930px;
  background: #fff;
  margin-right: 10px;
  margin-top: 15px;
  float: left;
}
.search .type-post,.search .type-page,.search .type-attachment {
  float: none;
}
.type-post {
  position: relative;
}
.single .pinbin-image, .page .pinbin-image {
  max-height: 524px;
  overflow: hidden;
}
.pinbin-image img {
  /*z-index: 5;*/
  width: 100%;
  height: auto;
  }
.single .pinbin-image img,
.page .pinbin-image img {
/*  position: relative;
  top: 50%;
  -webkit-transform: translateY(-30%);
  -ms-transform: translateY(-30%);
  -moz-transform: translateY(-30%);
  transform: translateY(-30%);*/
}
.pinbin-category {
  position: absolute;
  width: auto;
  background: #000;
  zoom: 1;
  filter: alpha(opacity=70);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  filter: alpha(opacity=70);
  opacity: 0.7;
  margin-top: -36px;
  z-index: 1;
  height: 30px;
  overflow: hidden;
  left: 0;
}
.pinbin-category p {
  margin: 0;
  padding: 0;
  line-height: 30px;
  padding-left: 20px;
  padding-right: 40px;
  color: #fff;
  font-style: italic;
}
.pinbin-category a {
  color: #fff;
  font-style: italic;
  text-decoration: none;
}
.pinbin-category a:hover {
  color: #777;
  text-decoration: none;
}
.pinbin-copy {
  padding: 20px 8%;
}
.pinbin-copy img{
  max-width: 100%;
  height: auto;
}
.pinbin-copy img.wide-img {
 margin: 60px 0 40px -9%;
 width: 118%;
 max-width: none;
}
.pinbin-meta {
  width: 100%;
  display: inline-block;
  color: #8e8e8e;
  font-size: 11px;
  margin-bottom: 10px;
  padding-bottom: 0px;
  border-bottom: 1px dotted #cccccc;
}
.size-full {
  max-width: 100%;
  height: inherit;
}
/* new badge & pick up badge の表示
--------------------------------------------------------------*/
#post-area .new_badge:after, #post-area .sticky .pinbin-image:after{
  z-index: 100;
  display: block;
  height: 20px;
  font-weight: bold;
  padding: 10px 10px;
  position: absolute;
  top: -12px;
  left: -12px;
  box-shadow: 0px 2px 3px rgba(0,0,0,0.5);
  border-radius: 30px;
  border: 6px solid ;
}
#post-area .new_badge:after{
  content: "new!!";
  background: #fff;
  color: rgb(153, 76, 82);
  border-color: rgb(153, 76, 82);
}
#post-area .sticky {
  box-sizing:border-box;
  border: 4px solid rgb(153, 76, 82) !important;
}
#post-area .sticky .pinbin-image:after{
  content: "Pick Up!";
  background: rgb(153, 76, 82);
  color: #fff;
  border-color: #fff;
}
#post-area .sticky .new_badge:after{
  content: "";
  display: none;/* newかつpickupのとき、newを表示しない */
}
/* badge ここまで*/

/* Post style on frontpage
--------------------------------------------------------------*/
#post-area .post {
  width: 300px;
  background: #FFF;
  margin-right: 20px;
  margin-top: 20px;
}
#post-area .post .pinbin-copy {
  padding-top: 10px;
  padding-bottom: 10px;
  overflow: hidden;
  clear: both;
  width: 250px;
}
#post-area .post .pinbin-date {
  width: 115px;
  color: #8e8e8e;
  font-size: 11px;
  border-bottom: 1px dotted #cccccc;
  padding-bottom: 0;
  padding-top: 0;
}
#post-area .post .pinbin-link a {
  text-decoration: none;
  background: #444;
  padding: 5px 10px;
  color: #fafafa;
  font-size: 12px;
  float: right;
  cursor: pointer;
  position: absolute;
  margin-left: 245px;
  margin-top: -15px;
}
#post-area .post .pinbin-link a:hover {
  background: #777;
}
#post-area .post .pinbin-link a,.post-next a,.post-prev a,.post-next a,.post-prev a {
  -webkit-transition: background 0.3s linear;
  -moz-transition: background 0.3s linear;
  -o-transition: background 0.3s linear;
  -ms-transition: background 0.3s linear;
  transition: background 0.3s linear;
}
/* Single post navigation
--------------------------------------------------------------*/
.post-nav {
/*  display: inline;
  float: left;
  margin-left: 10px;
  margin-top: 15px;*/
  margin: 20px 0;
}
.post-next a {
  float: right;
}
.post-prev a {
  float: left;
}
.posttags {
  font-color: #8e8e8e;
  font-size: 11px;
  float: right;
}
.view-next {
  float: right;
}
.view-previous {
  float: left;
}
.view-previous,.view-next {
  /*margin: 20px;*/
}
.post-next a,.post-prev a,.view-previous a,.view-next a{
  transition: 0.3s;
  display: block;
  font-weight: bold;
  color: #666;
  height: 20px;
  margin: 20px;
  padding: 15px 15px;
  box-shadow: 0px 2px 5px rgba(0,0,0,0.5) inset;
  border-radius: 35px;
  border: 1px solid #fff;
}
.post-next a:hover,.post-prev a:hover,.view-previous a:hover,.view-next a:hover{
  background: rgba(0, 0, 0, 0.1);
  box-shadow: 0px 5px 8px rgba(0,0,0,0.5) inset;
}
/* Comments
--------------------------------------------------------------*/
.comments-area ol {
  padding: 0;
}
.comments-area li {
  width: 100%;
  clear: both;
  float: left;
  margin-bottom: 10px;
}
.comments-area {
  margin-left: -10px;
}
.comment {
  border-bottom: 1px solid #8e8e8e;
  width: 630px;
  margin-left: -15px;
}
.avatar {
  display: none;
}
.reply {
  display: none;
}
.comment-meta a {
  text-decoration: none;
}
.comment-author {
  font-size: 14px;
  font-weight: bold;
  font-family: sans-serif;
}
#comment {
  width: 97%;
  height: 180px;
}
.comment-form-author,.comment-form-email,.comment-form-url {
  padding: 0;
}
label {
  display: inline-block;
}
.text-input,#s,input[type=text],input[type=password],textarea {
  clear: both;
  border: 1px solid #ccc;
  margin-bottom: 5px;
  padding: 7px;
  color: #555;
  font-size: 12px;
}
#s {
  width: auto;
  margin-top: 3px;
}
.comment-input {
  clear: both;
  border: 1px solid #ccc;
  margin-bottom: 5px;
  width: 96%;
  padding: 7px;
  color: #555;
  font-size: 12px;
}
.bypostauthor {
}
/* Other
--------------------------------------------------------------*/
.clear {
  clear: both;
}
.aligncenter {
  display: block;
  margin: 0 auto;
}
.alignleft {
  float: left;
  margin: 10px 10px 20px 0;
}
.alignright {
  float: right;
  margin: 10px 0 20px 0;
}
.wp-caption {
  text-align: left;
  margin-top: 5px;
  margin-bottom: 5px;
}
.wp-caption-text {
  margin-top: 2px;
  text-align: left;
  font-style: italic;
  font-size: 11px;
  color: #999;
}
.wp-caption {
  border: 1px solid #ccc;
  max-width: 99%;
}
.wp-caption.aligncenter,.wp-caption.alignleft,.wp-caption.alignright {
  margin-bottom: 1.5em;
}
.wp-caption img {
  display: block;
  margin: 1.2% auto 0;
  max-width: 98%;
}
.wp-caption-text {
  text-align: center;
  font-size: 80%;
}
.wp-caption .wp-caption-text,.gallery-caption {
  margin: 0;
}
.pagelink {
  border-top: 1px dotted #cccccc;
  margin: 20px 0 20px;
  display: block;
  position: relative;
  clear: both;
}
blockquote {
  font-size: 2em;
  line-height: 23px;
  color: #111;
  margin-left: 20px;
  border-left: 1px dotted #999;
  padding-left: 25px;
  margin-top: 15px;
  margin-bottom: 15px;
}
/* Table
--------------------------------------------------------------*/
table {
  margin: 0 0 1.5em;
  width: 100%;
}
td,th {
  padding: 5px;
  border: 1px solid #eaeaea;
}
td:hover {
  background: #eaeaea;
}
tr.alternate {
  background-color: #efefef;
}
th {
  font-weight: bold;
  background: #999;
  color: #fff;
  text-align: center;
}
pre {
  background: #efefef;
  font-size: 13px;
  line-height: 1.2;
  margin-bottom: 1.6em;
  padding: 1.6em;
  overflow: auto;
  max-width: 100%;
}
dt {
  font-weight: bold;
}
dd {
  margin: 0 1.5em 1.5em;
}
.attachment-full {
  width: 100%;
  height: 100%;
}
select {
  width: 100%;
}
.main-nav select {
  display: none;
}
/* mobile styles
-----------------------------------------------*/

/* For devices with screen size lower than 660px */
@media only screen and (max-width: 660px) {
  #wrap {
  width: auto;
  margin: 0 auto;
}
  .type-post, .type-page, .type-attachment {
    width: 95%;
  }
  h1 {
  font-size: 24px;
  line-height: 31px;
}
h2 {
  font-size: 18px;
  line-height: 25px;
}
}
/* For devices with screen size lower than 1240px */
@media only screen and (max-width: 1240px) {
  /* Navigation */
.main-nav {
  position: relative;
  width: 100%;
}
.main-nav ul {
  display: none;
}
.main-nav select {
  display: inline;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: url('images/mobile-menu-icon.png') no-repeat scroll right center #FFF;
  appearance: none;
  padding: 8px 10px;
  margin: 8px 3%;
  border: 1px solid #eaeaea;
  border-radius: 5px;
  width: 40%;
  min-width: 300px;
}
#main-nav-wrapper {
  height: 42px;
  display: inline;
  float: none;
}
#wrap {
  margin-left: 3%;
}
}