/*
Theme Name: v3
Theme URI: http://8164.org
Description: theme for 8164.org.
Version: 1.0
Author: Jin Yang
Author URI: http://8164.org/

*/
/* reset starts */
@charset "UTF-8";
/* CSS Document */
html, body, p, table, tbody, td, tr, section, figure, figcaption, hgroup, header, footer, nav, article, div, span, form, ul, ol, li, blockquote, img {
	margin: 0;
	padding: 0;
	border: none;
}

section, header, footer, nav, article, hgroup, figure, figcaption, aside { display: block; }
html { background-color: #444; }

body {
	color: #333;
	
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 95%;
	line-height: 1.4;
	vertical-align: baseline;
	background-attachment: fixed;
	background-repeat:no-repeat;	
	background-position: center center;
}

a {
	text-decoration: none;
	color: #d84839;
	padding: 0 0.1em;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;  
	transition: all 0.2s ease-in;
	text-decoration: none;	
}

a:visited { color: #ac1e0f; }

a:hover {
	background-color: #666;
	color: #fff;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;  
	transition: all 0.2s ease-in;			
}

header#main {
	background-color: #fff;	

	overflow: hidden;
}

.centerAlign {
	text-align: center;	
}

.intro { 
	padding-top: 25px!important;
	background: transparent url('images/line.png') repeat-x center 220px; 

}

.introImage { margin-bottom: 15px; float: left;}

h1.intro { margin-top: 100px;  margin-bottom: 45px;}
	
p {
	margin-bottom: 2em;
}


ul {
	margin-bottom: 1em; 
	list-style:disc;
}

ul li {
	margin: 0 0 1em 0;	

}

ul.archives {
	margin-bottom: 15px;
	padding: 0;
	width: 583px;
	list-style: none;
	list-style-position: outside;
}

ul.archives li {
	margin-bottom: 15px;
	margin-left: 0;
	background: transparent url('images/line.png') repeat-x center bottom;
	width: 100%;
	padding: 2px 0;
}

ul.archives li div.postedDate {
	float: left;
	font-size: 70%;
	padding-right: 10px;
	color: #aaa;
	font-style: italic;

}


ul.archives a.post-title, ul.archives a.post-title:visited {
	color: #f0f0f0;	
	background-color: #3c3d38;
	padding: 0.2em 0.5em;	
	font-size: 90%;

}

ul.archives a.post-title:hover {
	background-color: #666;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;  
	transition: all 0.2s ease-in;		
}

ul.archives h3.viewArchives a:hover {
	background-color:#888;
	color: #fff;
}

ul.archives .articleMeta {
	float: right;
	padding: 0 4px;
	font-size: 70%;
	font-style: italic;	
}

ul.archives .articleMeta  a {
	color: #888;
}

ul.archives .articleMeta  a:hover {
	color: #444;
	background: transparent!important;
}

ul.archives h3 a {
	color: #fff;
	padding: 2px 5px;
}

ul li ul li { 
	margin-left: 2em;
	list-style-type: circle;
}

ul li ul li:last-child { margin-bottom: 0; }

.fRight { float: right; display: block; }
.fLeft { float: left; display: block;}
.fMiddle { margin: 0 auto 30px auto; }

#page {
	height: 100%;
	box-shadow: 0 0 30px rgba(0,0,0,0.1) inset;
	background-color: #f3f4ef;		
	padding-bottom: 5em;
	min-height: 400px;
}


nav.topLinks {
	padding-top: 24px;
}

nav.topLinks a, footer a{
	text-decoration: none;
	color: #888;
	color: rgba(120, 120, 120, 0.8);
	background-color: transparent;
	font-size: 100%;
}

nav.topLinks a:hover{
	text-decoration: none;
	color: #000;
}

ul.mainNav {
	list-style: none;
	list-style-position:inside;
	margin-bottom: 10px;
	padding: 0;
	display: block;
	float: left;
	width: 70%!important;

}

ul.mainNav li{
	list-style: none;
	float: left;
	margin-top: 5px;
	line-height: 10px;	
	padding: 0;
	margin-right: 10px;
}

.lnkHome {
	display: block;
	width: 20px;
	height: 18px;
	margin-top: -4px;
	background: transparent url('images/trigram.png') no-repeat scroll top left;
	float: left;
	text-indent: -9999px;
	outline: none;
}

section.title {
	width: 100%;
	overflow: hidden;
	padding-top: 60px;
}

header.article {
	width: 801px;
	border-right: none;
	border-bottom: none;
	border-top: none;	
	overflow: auto;
	padding: 0;
}

section.wrapper {
	width: 800px;
	border-top: none;
	min-height: 400px;
	overflow: visible;
	margin-bottom: 20px;
	background-color: rgba(255,255,255,.99);		
}

div.meta {
	padding: 0px 0 3em 0;
	color: #b0b0b0;
}

div.meta span {
	font-size: 70%;
}

h1 {
	font-size: 280%;
	color: #222;
	margin: 15px 0;
	overflow: hidden;
}

h1.main {
	color: #222;	
	margin-bottom: 0;
	line-height: 1.2;
}

h2 {
	font-weight: bold;
	font-size: 150%;
	color: #222;
	margin-bottom: 1.5em;
}	

h3 {
	font-weight: bold;
	font-size: 120%;
	color: #222;
	margin-bottom: 1.5em;
}

h2.comments {
	color: #eee;
	margin-top: 5px;
	margin-bottom: 5px;	
	width: 150px;
	float: left;
}

h2.comments span.count {
	color: #b0b0b0;
	font-size: 20px;
	margin-right: 6px;
}

article.main {
	width: 740px;
	margin: 30px;
	text-align: justify;
	font-size: 14px;
	line-height: 20px;
}

blockquote {
	color: #111;
	font-size: 125%;
	text-align: left;
	margin-bottom: 1.5em;
	position: relative;
	border-bottom: 1px solid #f8da7e;
	padding-bottom: 1em;
}

blockquote:before {
	content: '“';
	font-size: 300%;
	font-family: Georgia, "Times New Roman", Times, serif;
	border-radius: 5em;
	background-color: #f8da7e;
	color: #fff;
	display: block;
	width: 0.75em;
	height: 0.75em;
	text-align: center;
	line-height: 1.25;
	position: absolute;
	left: -1.3em;
	top: 0.1em;
}

blockquote p:last-child {
	margin-bottom: 0;
}

div.col2 {
	column-count: 2;
	-moz-column-count: 2;
	-webkit-column-count: 2;

	column-width: 355px;
	-moz-column-width: 355px;
	-webkit-column-width: 355px;

	column-gap: 30px;
	-moz-column-gap: 30px;
	-webkit-column-gap: 30px;

	column-rule: 1px dotted #ccc;
	-moz-column-rule: 1px dotted #ccc;
	-webkit-column-rule: 1px dotted #ccc;
	margin-bottom: 30px;
}

div.col2 p { 
  break-before: column; 
  break-inside: avoid-column; 
  break-after: avoid-column;
}


div.half {
	width: 370px;	
}

section#commentContainer {
	background-color: #333;
	color: #ccc;
}

section#commentContainer a, section#commentContainer a:visited { color: #e8cf84; } 

footer a, footer a:visited { color: #868686; }

#commentWrapper {

}
section#comments header{
	border-bottom: 1px solid rgba(120,120,120,0.3);	
	overflow: auto;
	margin-bottom: 1em;
	padding: 1em 0;
}

section#comments div.msg{
	float: right;
	margin-right: 30px;
	font-size: 12px;
	line-height: 46px;
}


.commentEntries {
	border-bottom: 1px solid rgba(120, 120, 120, 0.3);
	padding-top: 1.5em;
	padding-bottom: 1.5em;

}

section#cmtForm {
	overflow: auto;
	margin-top: 20px;
	padding-top: 40px;
	width: 100%;

}
.commentMeta {
	float: left;
	width: 140px;	
	text-align: right;
	margin-right: 20px;
}

.commentSingle {
	margin: 0 0 0 0;
	font-size: 90%;
	overflow: auto;
	overflow-x: hidden;
}




.commentSingle p:last-child { margin-bottom: 0; }

.commentSingle blockquote {
	border-top: 1px solid #e9d094;
	border-bottom: 1px solid #e9d094;	
	padding: 1em 0;
	overflow: auto;
	color: #fff;
}

.commentSingle:first-child {
	margin-top: 15px;	
}

.commentSingle strong {
	text-transform:uppercase;
}

.commentSingle p {
	margin-bottom: 1em;

}


.commentMeta .commentDate {
	color: #aaa;
	display: block;
	margin-top: 5px;
	font-size: 70%;
	line-height: 1.3;
}

.commentAuthor .commentMeta {
	background-color: #000;
	width: 90px;
	padding-right: 10px;
	padding-bottom: 3px;
}

.commentWho { }

.commentAuthor .commentMeta a { color: #fff!important; }

.commentAuthor:first-child {
	margin-top: 15px;	
}

form.comment{
	overflow: hidden;
}

form.comment input, form.comment textarea {
	font-size: 14px;
	color: #888;
	border: none;
	padding: 4px;
	-webkit-appearance: none;	
}

form.comment input{
	margin: 0 0 30px 0;
	width: 175px;
	padding-left: 30px;
}

.formInputs {
	width: 332px;	
	text-align: right;
}

form.comment input.emailInput{
	background: #fff url(images/mail.png) no-repeat 6px center;
}

form.comment input.commenterName {
	background: #fff url(images/user.png) no-repeat 6px center;
}

form.comment input.commenterURL {
	background: #fff url(images/url.png) no-repeat 6px center;	
}

form.comment textarea{
	width: 522px;
	height: 128px;
	margin: 0 0 30px 0;
	overflow: auto;
}

form.comment .btnComment {

}

.siteMsg { color: #c0c0c0; }

footer {
	padding-top: 2em!important;
	overflow: hidden;
	color: #666;
	min-height: 80px;
}

.gallery-item {
	width: auto;
}


	
code {
	text-align: left!important;	
	margin-bottom: 1.5em;
}

pre {
	text-align: left!important;	
	display: block;
	margin-bottom: 1.5em;	
}

hr { margin-bottom: 1.5em; }

.footNotes { font-size: 70%; font-style: italic; }

table { float: right; margin-bottom: 2em;}

table th { text-align: left; }
/* layout */
.containerBig { width: 100%; overflow: auto; padding: 0 10px; -moz-box-sizing: border-box; box-sizing: border-box; overflow-x: hidden;}
.containerSmall { max-width: 880px; margin: 0 auto; overflow: auto; overflow-x: hidden;}
.containerSide { width: 350px; }

figure, .video, table { width: 100%; height: auto; overflow: auto; }
.containerContent, blockquote, ul, ol, p, hr, h1, h2, h3, pre, code, div.meta, .gallery , div.footNotes { width: 530px; float: right; display: block; }

blockquote img { width: 100%; height: auto; }

.containerComment {
	max-width: 690px;
	float: right;	
}
.btn {
	display: inline-block;
	background-color:#b41e1e;
	-webkit-appearance: none;
	color: #fff!important;
	padding: 4px 8px 6px 8px!important;
	font-size: 90%;
	width: auto!important;
	cursor: pointer;
}

.btn:hover { background-color: #e03333; }

.contactme { 
	font-size: 80%; 
	color: #b0b0b0; 
	float: right; 
	margin-top: 16px;
}

.mainContent {
	padding-top: 2.5em;	
}

.cat-header { font-weight: normal; color: #aaa; }

.containerLogo {
	width: 220px;
	height: 220px;
	border-radius: 20em;
	border: 2.2em solid rgba(255,255,255,0.6);
	font-size: 100%;
}

.containerLogoBG {
	width: 100%;
	height: 100%;	
	background: transparent url('images/jin-intro.jpg') no-repeat center center;	
	background-size: 100%;	
	border-radius: 20em;	
	position: relative;
}

.logoDot {
	width: 50%;
	height: 50%;
	border-radius: 20em;
	background-color: rgba(168,0,0,0.85) ;
	background-image: url('images/trigram-big.png') ;	
	background-color: rgba(168,0,0,0.85) ;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 35%;		
	position: absolute;
	left: 25%;
	top: 25%;
}

.video {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	margin-bottom: 2em;
}

.video iframe, .video object, .video embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

figure {
	margin-bottom: 2em;	

}

figure img {
	max-width: 100%;
	min-width: 530px;
	height: auto;
	display: block;
	float: right;
	margin-bottom: 10px;
}

figure p, figure br { margin: 0; }

figcaption {
	padding: 5px 0 7px 0;
	font-size: 80%;	
	border-bottom: 1px solid rgba(120, 120, 120, 0.2);
	width: 100%;
}
/* logo */

.trigramLogo {
	display: block;
	height: 30%;
	width: 30%;
	margin: 0 auto;
	top: 30%;
	background-color: transparent;	
	position: relative;
	
}

.trigramLogo div.lBar {
	width: 45%;
	height: 10%;
	float: left;	
	margin-bottom: 5%;
	background-color: #fff;
}

.trigramLogo div.rBar {
	width: 45%;
	height: 10%;
	float: right;	
	margin-bottom: 5%;	
	background-color: #fff;	
}

.trigramLogo div.fBar {
	width: 100%;
	height: 10%;
	margin-bottom: 5%;	
	background-color: #fff;	
	clear: both;
}

/* retina */


@media all and (-webkit-min-device-pixel-ratio: 2)  {
	.logoDot { 	background-image: url('images/trigram-big-ret.png') ; }
	.lnkHome {
		width: 40px;
		height: 36px;
		background: transparent url('images/trigram-ret.png') no-repeat scroll center center;
	}

}

/* smaller desktop */

@media only screen and (max-width : 660px) {
	
	.containerSmall { width: 100%; margin: 0 auto; overflow: auto;}
	.containerContent, blockquote, ul, ol, p, hr, h1, h2, h3, div.meta { width: 100%; display: block; float: none;}	
	.containerComment { width: 100%; }
	.commentMeta { float: left; text-align: left; margin-right: 10px; line-height: 1.3; margin-bottom: 1em; width: 200px!important;}		
	.commentWho  { float: left; line-height: 1.3;}
	h2.comments { width: 300px; }	
	h2.comments span.count { margin-left: 0; }
	.contactme { display: none; }
	figure img { min-width: 1px; }

	.formInputs { width: 100%; }
	form.comment input	{ width: 100%; }
	form.comment textarea	{ width: 100%; }
	
	blockquote:before {
		left: 50%;
		top: -25px;
	}	
	blockquote {
		border-bottom: 1px solid #f8da7e;	
		border-top: 1px solid #f8da7e;	
		padding: 1em 0;		
	}
	
	ul.archives {
		width: 100%;
	
	}
	
	ul.archives li { margin-bottom: 2em; display: block; }
	
	ul.archives a.post-title {
	
		padding: 0.3em 0.6em;
		display: block;
		clear: both;
	}


}

/* responsive mobile batman */

@media all 
and (min-device-width : 220px) 
and (max-device-width : 980px) {

html { font-size: 250%;} 
body { line-height: 1.3; }

ul.mainNav { float: left; display: block; }
.containerBig { width: 100%; overflow: auto; padding: 35px; box-sizing: border-box;}
.containerSmall { width: 100%; margin: 0 auto; overflow: auto;}
.containerSide { width: 350px; }

.containerContent, blockquote, ul, ol, p, hr, h1, h2, h3, div.meta { width: 100%; display: block; }

header#main {
	background-color: #fff;	

}

.containerLogo.fLeft { float: none; }
.containerLogo { margin: 20px auto 0;}

h1.intro { margin: 20px auto; text-align: center; font-size: 130%;}

h2 { font-size: 120%; }

ul.archives {
	width: 100%;
	font-size: 80%;	
}

ul.archives li { margin-bottom: 2em; display: block; }

ul.archives a.post-title {
	font-size: 110%;
	padding: 0.3em 0.6em;
	display: block;
	clear: both;
}

ul.archives .articleMeta a { font-size: 140%; }

ul.archives li div.postedDate { font-size: 90%; }


ul {
	margin-bottom: 1em;
	list-style-position: inside;
}

div.postedDate {  display: block; margin-left: 0.8em;}
 
span.articleMeta { display: block; float: left; }

p.introText { text-align: left; margin-bottom: 1em;}

blockquote img { width: 100%; height: auto; }

/* comments */
section#comments header { width: 100%; margin-bottom: 0;}

h2.comments { float: none; display: inline;}
h2.comments span.count { margin-left: 0; font-size: 100%; }

.contactme { display: none; }

.containerComment { min-width: 100%; float: none; overflow: auto; }

.commentMeta { width: 100%!important; float: left; text-align: left; margin-bottom: 1em; }
.commentWho { float: left; line-height: 1.3; padding-right: 10px;}
.commentDate { font-size: 100%; }
.commentSingle { font-size: 70%; }

.formInputs { width: 100%; text-align: left;}

form.comment input, form.comment textarea { width: 100%; font-size: 130%; }

form.comment textarea { height: 8em; }

nav.topLinks a, footer a { font-size: 100%; }

section.intro { background-image: none; }

figure, .video { width: 100%; }

figure img { width: 100%; }



footer { width: 100%; overflow: auto; padding: 35px; box-sizing: border-box; height: auto;}

}