/*
Theme Name: Bonyo
Theme URI: http://gato.intaa.net/net/bonyo/
Author: Gato
Author URI: http://gato.intaa.net/
Description: Bonyo is a simple and clean theme for WordPress.
Version: 0.9
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: two-columns, one-column, right-sidebar, microformats
Text Domain: bonyo

Bonyo (Bonnyou) means "mediocrity".
*/




/* ---------------------------------------------------- 
      I do not like customizing on the administration panel, so this theme uses CSS variables.
      If there are many visitors that use retro browsers that do not support CSS variables, 
      please delete the CSS variables and write values directly.

      CSS Variables             Change these values.
   ---------------------------------------------------- */
:root {
	--var-PageBgColor:          #fff;          /* Page background color */
	--var-PageBgImage:          url('/wp-content/themes/bonyo/images/bonyo-bg.png');  /* Background image */
	--var-SiteTitleColor:       #4888ff;       /* Site title color */
	--var-SiteTitleSize:        2.0em;         /* Site title size */
	--var-PageFontColor:        #333;          /* Page font color */
	--var-PageLinkColor:        #335;          /* Page link color (Link) */
	--var-PageLinkColorVisited: #335;          /* Page link color (Visited) */
	--var-PageLinkColorHover:   #335;          /* Page link color (Hover) */
	--var-PageLinkColorActive:  #335;          /* Page link color (Active) */
	--var-ArticleTitleColor:    #333;          /* Article title color */
	--var-HeadlineColor:        #333;          /* Headline Color */
	--var-LayerColor:           rgba(72, 136, 255, 0.1);  /* Parts background color */
	--var-NavBarLinkColor:      #333;          /* Navigation Bar link font color */
	--var-PaginationLinkColor:  #333;          /* Pagination item link color */
	--var-PaginationBgColor:    rgba(72, 136, 255, 0.1);  /* Pagination item background color */
	--var-WidgetLinkColor:      #333;          /* Widgets area Link color */
	--var-TagItemBgColor:       rgba(72, 136, 255, 0.1);  /* Tagcloud item background color */
	--var-BoxShadow:            1px 0 0 rgba(72, 136, 255, 0.2);  /* Some box shadow */
	--var-ButtonHoverBgColor:   rgba(72, 136, 255, 0.2);  /* The color when the pointer hovers over the button */
	--var-DispAuthor:           block;         /* Whether to display the author or not: "block;" or "none;". */
}




/* --------------------------------------------
   http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
   -------------------------------------------- */
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 {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	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;
}
/* --------------------------------------------- */




/* --------------
      HTML Tag 
   -------------- */

html {
    font-family: sans-serif;
    line-height: 1.15;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
	background-color: #fff;  /* for retro browser */
	background-color: var(--var-PageBgColor);
	background-image: url('/wp-content/themes/bonyo/images/bonyo-bg.png'); /* for retro browser */
	background-image: var(--var-PageBgImage);
	color: #333; /* for retro browser */
	color: var(--var-PageFontColor);
	background-repeat: repeat;
	line-height: 1.68em;
}


h1, h2, h3, h4, h5, h6 {
	clear: both;
	color: #333; /* for retro browser */
	color: var(--var-HeadlineColor);
	letter-spacing: 0;
	margin-top: 1.5em;
	margin-bottom: 1em;
}

h1 {
	font-size: 1.6em;
}
h2 {
	font-size: 1.75em;
}
h3 {
	font-size: 1.5em;
}
h4 {
	font-size: 1.25em;
}
h5 {
	font-size: 1.125em;
}
h6 {
	font-size: 1.063em;
}

code,
pre {
	font-family: monospace;
	font-size: 0.87em;
    border-bottom: solid 1px #333;
    border-top: solid 1px #333;
    line-height: 1.4em;
    max-width: 100%;
    padding: 1.4em 0;
    word-wrap: normal;
    overflow-x: scroll;
}



a {
	text-decoration: none;
	background-color: transparent;
}
a:link {
	color: #335; /* for retro browser */
	color: var(--var-PageLinkColor);
}
a:visited {
	color: #335; /* for retro browser */
	color: var(--var-PageLinkColorVisited);
}
a:hover {
	color: #335; /* for retro browser */
	color: var(--var-PageLinkColorHover);
}

a:active {
	color: #335; /* for retro browser */
	color: var(--var-PageLinkColorActive);
}


b,
strong {
	font-weight: bold;
}

small {
	font-size: 80%;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

img {
	border-style: none;
	max-width:100%;
	height: auto;
}

table {
	border-style: solid;
	border-width: 1px;
	border-color: #e6e6e6;
	font-size: 93.8%;
	margin: 0 0 1.6em;
	width: 100%;
}

ul,ol {
	padding-left:30px;
}

table th, table td {
	border-bottom: solid 1px #e6e6e6;
}

th {
	font-weight: bold;
	text-align: left;
}

hr {
	border-style: solid;
	border-width: 0.5px;
}


p {
	display: block;
	margin: 1em 0;
}

strong { font-weight: bold; }

em { font-style: italic; }

blockquote {
	display: block;
	-webkit-margin-before: 1em;
	-webkit-margin-after: 1em;
	-webkit-margin-start: 40px;
	-webkit-margin-end: 40px;
}

img[class*="wp-image-"],
img[class*="attachment-"] {
	max-width: 100%;
	height: auto;
}

/* ---------------
      WordPress
   --------------- */

.aligncenter {
	display: block;
	margin: 0 auto;
}

.alignleft { float: left; }
.alignright { float: right; }

.wp-caption,
.wp-caption-text {
	margin: 0.5em 0.5em;
	max-width: 100%;
}

.gallery-caption {
	display: none;
}

.sticky {
	background-color: rgba(72, 136, 255, 0.1); /* for retro browser */
	background-color: var(--var-LayerColor);
}

.bypostauthor {
	background-color: rgba(72, 136, 255, 0.1); /* for retro browser */
	background: var(--var-LayerColor);
}

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	width: 1px;
	overflow: hidden;
	position: absolute;
}

/* ----------- 
      Parts
   ----------- */

/* Page Title */

.site-title {
	margin-top: 3em;
	margin-bottom: 1.5em;
}

.site-title a:link,
.site-title a:visited,
.site-title a:hover,
.site-title a:active {
	font-size: 2.0em;  /* for retro browser */
	font-size: var(--var-SiteTitleSize);
	font-weight: bold;
	color: #4888ff;  /* for retro browser */
	color: var(--var-SiteTitleColor);
}

/* Goto Top button */
#page_top {
	width: 56px;
	height: 56px;
	position: fixed;
	right: 0;
	bottom: 0;
	background-color: rgba(72, 136, 255, 0.1); /* for retro browser */
	background-color: var(--var-LayerColor);
}

#page_top a:before {
	font-family: FontAwesome;
	content: '\f102';
	font-size: 25px;
	position: absolute;
	top: 16px;
	left: 20px;
}

#page_top a:hover {
	background-color: rgba(72, 136, 255, 0.2); /* for retro browser */
    background-color: var(--var-ButtonHoverBgColor);
    transition: 0.2s;
}

.page_top {
	display: block;
	width: 56px;
	height: 56px;
}

.metaauthor {
	display: block;  /* for retro browser */
	display: var(--var-DispAuthor);
}

.cat-links:before {
	font-family: FontAwesome;
	content: "\f07c";
}

.tags-links:before {
	font-family: FontAwesome;
	content: "\f02b";
}

.entry-title,
.entry-title a:link,
.entry-title a:visited,
.entry-title a:hover,
.entry-title a:active {
	color: #333; /* for retro browser */
	color: var(--var-ArticleTitleColor);
}

.post-thumbnail {
/*	margin-bottom: 2em; */
}



/* -------------- 
       Layout
   -------------- */

.bny-page {
	display: block;
	padding: 0 8px;
	margin-left: auto;
	margin-right: auto;
}

#bny-primary {
    margin-bottom: 3em;
}


article {
	background-color: rgba(72, 136, 255, 0.1); /* for retro browser */
	background-color: var(--var-LayerColor);
	padding: 8px 12px 24px 12px;
    margin-bottom: 16px;
}

.entry-header {
/*	padding: 10px 0; */
	-ms-word-wrap: break-word;
	word-wrap: break-word;
}
.entry-header h2,
.entry-header h3 {
	margin: 0;
}

.entry-footer {
	padding-top: 3em; 
	text-align: right;
}
#bny-footer {
	margin-bottom: 16px;
}
.footer-content {
	padding-right: 60px;
	text-align: right;
}

.archive-item {
	background-color: rgba(72, 136, 255, 0.1); /* for retro browser */
	background-color: var(--var-LayerColor);
	padding: 8px;
	margin-bottom: 16px;
}
.archive-item h2 {
	margin: 0 0 0.5em;
}
.arc-thumb {
	display: inline-block;
	width: 152px;
	margin-top: 20px;
}
.arc-excerpt {
	display: inline-block;
	width: calc(100% - 160px);
	vertical-align: top;
}

.read-more {
	width: 100%;
	text-align: right;
}
.more-button {
	display: inline-block;
	color: #fff;
	width: 10em;
	height: 1.4em;
	background-color: #4888ff;
	padding-bottom: 6px;
	overflow: visible;
	text-align: center;
}
.more-button:hover {
    background-color: #3777ee;
    box-shadow: 0 0 1px #aaf;
    transition: 0.2s;
}

/* for wide screen */
@media screen and (min-width: 1024px) {
	.bny-page {
		max-width: 1024px;
	}
	
	#bny-container {
		margin-left: auto;
		margin-right: auto;
		overflow: hidden;
		margin-bottom: 24px;
	}

	#bny-container:after {
		clear: both;
	}

	#bny-primary {
		float: left;
		width: 670px; /* 1024 - 338 - 16 */
		padding-left: 0px;
		padding-right: 16px;
	}

	#bny-secondary {
		float: left;
		width: 338px;
		padding: 0;
	}
}



/* ---------------------------
      Bar Navigation Toggle
   --------------------------- */

#bny-nav {
	display: none;
}
#bny-nav-toggle a.nav-close {
	display: none;
}
#bny-bar:target #bny-nav  {
	display: block;
}
#bny-bar:target #bny-nav-toggle a.nav-open {
	display: none; 
}
#bny-bar:target #bny-nav-toggle a.nav-close {
	display: block;
}


/* for narrow screen */
@media screen and (max-width: 768px){

	.open-icon:before {
		font-family: 'FontAwesome';
		content: "\f0c9";
	}
	.close-icon:before {
		font-family: 'FontAwesome';
		content: "\f00d";
	}
	.open-icon,
	.close-icon {
		position: absolute;
		right: 0;
		width: 56px;
		background-color: rgba(72, 136, 255, 0.1); /* for retro browser */
		background-color: var(--var-LayerColor);
		border-color: rgba(72, 136, 255, 0.1); /* for retro browser */
		border-color: var(--var-LayerColor);
		box-shadow: 1px 0 0 rgba(72, 136, 255, 0.2); /* for retro browser */
		box-shadow: var(--var-BoxShadow);
		text-align: center;
		z-index: 300;
	}

	#bny-bar {
		position: absolute;
		top: 0;
		right: 4px;
		width: calc(100vw - 16px);
		z-index:100;
		background-color: #f0f8ff;
	}
}

/* for widescreen */
@media screen and (min-width: 768px){
	#bny-bar {
		background-color: rgba(72, 136, 255, 0.1); /* for retro browser */
		background-color: var(--var-LayerColor);
	}
	#bny-nav-toggle {
		display: none;
	}
	#bny-nav {
		display: block;
	}
}



/* --------------------
      Bar Navigation
   -------------------- */

#bny-bar {
	line-height: 56px;
	margin-bottom: 24px;
}

#bny-nav ul {
	list-style: none;
	padding-left: 0;
}

#bny-nav a {
	display: block;
	height: 100%;
	color: #333; /* for retro browser */
	color: var(--var-NavBarLinkColor);
}

.menu-container:before {
	display: inline-block;
	content: '\f0c9';
	font-family: FontAwesome;
	-webkit-font-smoothing: antialiased;
	margin-right: 10px;
	position: relative;
	top: -1px;
	vertical-align: middle;
}

/* for narrow screen */
@media screen and (max-width: 768px){
	#bny-nav a {
		padding: 0 20px;
	}

	#bny-nav div > ul > li {
		background-color: rgba(40, 96, 144, 0.4);
		border-color: rgba(0, 0, 0, 0.7);
		box-shadow: 1px 0 0 rgba(72, 136, 255, 0.2); /* for retro browser */
		box-shadow: var(--var-BoxShadow);
	}
}

/* for wide screen*/
@media screen and (min-width: 768px){
	#bny-nav {
		margin-left: auto;
		margin-right: auto;
		padding: 0 45px;
	}

	#bny-nav div > ul > li {
		display: inline-block;
		letter-spacing: normal;
		white-space: nowrap;
		text-align: center;
		background-color: rgba(40, 96, 144, 0.1);
		border-style: solid;
		border-width: 1px;
		border-color: rgba(72, 136, 255, 0.2);
		
	}

	#bny-nav div > ul {
		letter-spacing: -0.4em;
	}
	#bny-nav a {
		padding: 0 8px;
	}
}



/* -----------------------------
      Bar Navigation sub menu
   ----------------------------- */

.menu-item-has-children > a:after {
	font-family: FontAwesome;
	font-weight: bold; 
	content: ' \f107';
}

/* for narrow screen  */
@media screen and (max-width: 767px){
	#bny-nav li {
		margin-bottom: 1px;
	}

	#bny-nav li li a:before {
		font-family: monospace;
		content: '\00a0\00a0';
	}

	#bny-nav li li li a:before {
		font-family: monospace;
		content: '\00a0\00a0\00a0\00a0';
    }

	.menu-item-has-children {
		position: relative;
	}

	/* hide */
	.menu-item-has-children > .sub-menu {
		max-height: 0;
		overflow: hidden;
		list-style: none;
		padding: 0;
		margin: 0;
		transform: scaleY(0);
		transform-origin: 50% 0%;
		transition: max-height 0.5s ease-in;
		animation: hideAnimation 0.5s ease-out;
	}

	.menu-item-has-children > input[type="checkbox"] {
		opacity: 0;
		display: block;
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		cursor: pointer;
	}

	/* dropdown */
	.menu-item-has-children > input[type="checkbox"]:checked ~ .sub-menu {
		max-height: 9999px;
		display: block;
		transform: scaleY(1);
		animation: showAnimation 0.5s ease-in-out;
		transition: max-height 0.5s ease-out;
	}

	#bny-nav li li {
		background-color: rgba(72, 136, 255, 0.1); /* for retro browser */
		background-color: var(--var-LayerColor);
	}
}

/* for wide screen */
@media screen and (min-width: 768px){

	#bny-nav li ul {
		list-style: none;
		position: absolute;
		z-index: 100;
	}

	#bny-nav li li {
		background-color: rgba(180, 220, 238, 0.6);
		overflow: hidden;
		width: 100%;
		height: 0;
		color: #fff;
	}

	#bny-nav li li a {
		display: block;
		width: 100%;
		height: 100%;
		border-color: #000;
		text-align: left;
		vertical-align: middle;
	}

	#bny-nav li:hover > ul > li {
		overflow: visible;
		height: 56px;
		margin-bottom: 1px;
	}

	/* sub sub menu  for wide screen */
	#bny-nav li li ul {
		z-index: 300;
		top: 0px;
		left: 100%;
	}

	#bny-nav li li li {
		background-color: rgba(160, 200, 218, 0.6);
	}

	.menu-toggle {
		display: none;
	}
}



/* -----------------
      Pagination
   ----------------- */

.pagination {
	margin: 0, auto;
}

.pagination a {
	color: #333; /* for retro browser */
	color: var(--var-PaginationLinkColor);
}

.pagination h2 {
	display: none;
}

.nav-links {
	text-align: center;
}

.nav-links .page-numbers {
	display: inline-block;
	padding: 0.5em 1em;
	background-color: rgba(72, 136, 255, 0.1); /* for retro browser */
	background-color: var(--var-PaginationBgColor);
}

.nav-links .page-numbers:hover {
	background-color: rgba(72, 136, 255, 0.2); /* for retro browser */
    background-color: var(--var-ButtonHoverBgColor);
    transition: 0.2s;
}

.pagination .current {
	font-weight: bold;
}

/* -------------
      Widgets
   ------------- */

.widget-title {
	font-size: 1.1em;
}
.widget-area section {
	margin-bottom: 2em;
}
.widget-area a {
	color: #333; /* for retro browser */
	color: var(--var-WidgetLinkColor);
}

/* Search widget */
.search-field {
	display: inline-block;
	width: calc(100% - 60px);
	height: 36px;;
	font-size: 1.2em;
	background-color: rgba(255, 255, 255, 0.6);
	vertical-align:middle;
}
.search-submit {
	display:inline-block;
	font-family: 'FontAwesome';
	color: #fff;
	width: 54px;
	height: 35px;
	background-color: #4888ff;
	border-color: transparent;
    box-shadow: 0 0 1px grey;
	overflow:visible;
	position: relative;
	right: 4px;
}	
.search-submit:hover {
    background-color: #3777ee;
    box-shadow: 0 0 1px #aaf;
    transition: 0.2s;
}

/* Recent entries widget
   Nav menu widget
   categories widget */   

.widget_recent_entries ul,
.widget_nav_menu ul,
.widget_categories ul {
	list-style: none;
	padding-left: 0;
}
.widget_recent_entries li,
.widget_nav_menu li,
.widget_categories li {
	display: block;
	line-height: 1.4em;
	margin-bottom: 1em;
	background-color: rgba(72, 136, 255, 0.1); /* for retro browser */
	background-color: var(--var-LayerColor);
	width: 100%;
}
.widget_recent_entries li a,
.widget_nav_menu li a,
.widget_categories li a {
	display: block;
	width: calc (100% - 8px);
	height: 100%;
	padding: 4px;
}
/* @media screen and (min-width: 960px) {
	.widget_recent_entries li a,
	.widget_nav_menu li a,
	.widget_categories li a {
		width: 100%;
	}
} */

/* Calendar widget */
#wp-calendar{
	max-width: 340px;
	border-collapse: collapse;
	border-spacing: 1px;
	background-color: rgba(72, 136, 255, 0.1); /* for retro browser */
	background-color: var(--var-LayerColor);
}
#wp-calendar thead tr, #wp-calendar tfoot tr {
	height: 1.6em;
}
#wp-calendar tbody tr {
    height: 2.4em;
}
#wp-calendar th,
#wp-calendar td {
	text-align: center;
	border: 1px solid #888;
}
#wp-calendar td a {
	font-weight: bold;
}
#wp-calendar caption {
	text-align: left;
}

/* Categories widget */
.widget_categories .children {
	margin-top:	8px;
	padding-left: 1em;
}

/* Tag cloud widget */
.tagcloud {
	line-height: 48px;
}

.tagcloud a {
	display: inline-block;
	background-color: rgba(72, 136, 255, 0.1); /* for retro browser */
	background-color: var(--var-TagItemBgColor);
	padding: 4px 8px;
	margin-right: 4px;
	margin-bottom: 8px;
	vertical-align: bottom;
}

.tagcloud a:hover {
	background-color: rgba(72, 136, 255, 0.2); /* for retro browser */
    background-color: var(--var-ButtonHoverBgColor);
    transition: 0.2s;
}

/* Nav Menu widget */
.widget_nav_menu {
	display: none;
}

/* --------------
      Comments
   -------------- */

.comments-title,
.comment-reply-title {
	font-size: 1.2em;
}

.comment-reply-link:before {
    content: '\f112';
    font-family: FontAwesome;
}

.comment-author img {
	width: 48px;
	height: 48px;
}

.comments-area ol {
	list-style: none;
	padding-left: 0;	
}

.comment-form-comment {
	font-size: 1.2em;
}

.comment-form-comment label {
	font-size: 0.83em;
}

.comment-form-comment textarea {
	font-family: inherit;
	font-size: 1.2em;
	display: block;
	width: calc(100% - 10px);
}

.comment-form-author input,
.comment-form-email input,
.comment-form-url input {
	width: calc(100% - 8px);
	height: 1.6em;
    font-size: 1.2em;
}

.form-submit {
	text-align: right;
}

.form-submit input {
    color: #fff;
    width: 160px;
    height: 35px;
    background-color: #4888ff;
	border-color: transparent;
    box-shadow: 0 0 1px grey;
	position: relative;
	right: 4px;
}

.form-submit input:hover {
	background-color: #3777ee;
	box-shadow: 0 0 1px #aaf;
	transition: 0.2s;
}