/*
Theme Name: Guopeng Liang Design
Theme URI: http://www.guopengliang.com
Description: Guopeng Liang Design official theme
Version: 1.0
Author: Guopeng Liang
Author URI: http://www.guopengliang.com
Tags: portfolio, pictures, images, simple, clean
*/



/* Reset (http://meyerweb.com/eric/tools/css/reset/) | v2.0 | 20110126
------------------------------------------------------------------------------------------ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote,
a, img, strong, 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;
}
#content address { padding: 0 0 20px 0; }
#content abbr, acronym { border-bottom: .1em dotted; }
#content pre, code, tt { font-size: 1.1em; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }
ol, ul { list-style:none; }
blockquote:before, blockquote:after { content:''; content:none; }
table { border-collapse:collapse; border-spacing:0; }



/* General
------------------------------------------------------------------------------------------ */

a { color:#272727; text-decoration:none; }
a:hover, a:active { color:#272727; }
#thepost a:hover, footer a:hover { text-decoration:underline; }

.clearer { clear:both; }
.clearer.line { margin:0 auto; width:920px; border-top:1px solid #ccc; }
.clearer.line2 { margin:0 auto; width:920px; border-top:1px dashed #ccc; }

.aligncenter { display:block; margin-left:auto; margin-right:auto; }
.alignleft { float:left; }
.alignright { float:right; }

.right { position:absolute; right:0; }



/* Page Structure
------------------------------------------------------------------------------------------ */

body { font:10px/18px "Lucida Grande", Tahoma, "Trebuchet MS"; color:#272727; background:#eee; }

#page { margin:0 auto; min-width:1000px; background:url("img/sprites.png") 50% -48px no-repeat; }

header { position:relative; margin:0 auto; padding:10px 0 0; width:920px; height:50px; border-bottom:1px solid #ccc; }

#hero { position:relative; margin:10px auto 0; width:920px; }

hgroup { position:relative; margin:0 auto; width:920px; border-bottom:1px solid #ccc; }

#content { margin:0 auto; width:920px; font-size:1.2em; }
/* #content.portfolio, #content.archive, #content.search { width:960px; left:-20px; } */

#narrow-column { float:left; width:720px; }

#sidebar { float:right; padding:10px 0; width:180px; color:#666; }

footer { position:relative; margin:0 auto; padding:10px 0 20px; width:920px; line-height:1.2em; color:#999; border-top:1px solid #ccc; background:#eee; z-index:1; }



/* Header
------------------------------------------------------------------------------------------ */

#sitelogo { overflow:hidden; position:absolute; left:-40px; bottom:0; width:416px; height:48px; font-size:3em; font-weight:normal; text-transform:uppercase; background:url("img/sprites.png") 0 0 no-repeat; text-indent:-999em; }
#sitelogo a { display:block; width:100%; height:100%; }

#sitenav { position:absolute; bottom:0; right:0; font-size:12px; text-transform:uppercase; color:#888; }
#sitenav li { display:inline-block; padding:0 0 0 16px; }
#sitenav li a { padding:13px 0; line-height:40px; color:#888; border-bottom:1px solid transparent; }
#sitenav li a:hover { color:#369; border-bottom:1px solid #369; }
#sitenav .current_page_item a, #sitenav .current_page_item a:hover {
	padding-bottom:12px;
	color:#369;
	font-weight:bold;
	border-bottom:2px solid #369;
}



/* Subnav
------------------------------------------------------------------------------------------ */

#subnav {
	margin:0 0 10px;
	text-align:center;
	text-transform:uppercase;
	color:#888;
	line-height:36px;
	background:#eee;
	z-index:10;
}
/* #subnav.sticky { left:auto !important; margin-left:-40px !important; padding:0 40px; width:920px; } */
#subnav.sticky { left:0 !important; right:0; }
#subnav.sticky ul { margin:0 auto; max-width:920px; }

#subnav ul { padding:10px 0; border-bottom:1px solid #c6c6c6; }
#subnav li { display:inline; }
#subnav li a { padding:10px 20px; color:#888; }
#subnav li a:hover { color:#369; background-color:#e8e8e8; }
#subnav .current_page_item a, #subnav a.current, #subnav a.selected { color:#369; font-weight:bold; background-color:#e3e3e3; }



/* Hero Images
------------------------------------------------------------------------------------------ */

.hero-image-wrap {
	cursor: pointer;
	position:relative;
	margin:0 auto;

	width:920px;
	height:540px;

	background-color:#f8f8f8;
	background-position:50% 0;
	background-repeat:no-repeat;

	box-shadow:0 1px 2px rgba(0,0,0,0.5);
	-moz-box-shadow:0 1px 2px rgba(0,0,0,0.5);
	-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.5);
}
.hero-image-wrap.small { height:300px; }

.hero-image {
	width:100%;
	height:100%;

	background-position:50% 0;
	background-repeat:no-repeat;
}

.hero-control { cursor:pointer; position:absolute; display:block; width:40px; height:100%; }
.hero-control a { display:block; width:100%; height:100%; }
.hero-control:after { content:""; position:absolute; top:50%; margin-top:-20px; display:block; width:40px; height:40px; background-image:url("img/sprites.png"); background-repeat:no-repeat; }

.hero-control.prev { left:-40px; }
.hero-control.prev:after { background-position:-456px 0; }
.hero-control.prev:hover:after { background-position:-416px 0; }

.hero-control.next { right:-40px; }
.hero-control.next:after { background-position:-496px 0; }
.hero-control.next:hover:after { background-position:-536px 0; }

.hero-meta {
	padding:16px 20px;
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	font-size:1.2em;

	text-shadow:0 1px 0 rgba(255,255,255,0.2);
	color:rgba(0,0,0,0.8);
	background:rgba(255,255,255,0.2);
	z-index:100;
}
.hero-meta a { display:block; font-size:2em; color:rgba(0,0,0,0.8); }
.hero-meta a:hover { color:rgba(0,0,0,0.9); }

.hero-meta.dark { text-shadow:0 1px 2px rgba(0,0,0,0.2); color:rgba(255,255,255,0.8); background:rgba(0,0,0,0.2); }
.hero-meta.dark a { color:rgba(255,255,255,0.8); }
.hero-meta.dark a:hover { color:rgba(255,255,255,0.9); }

.hero-meta ul   { font-size:0.6em; }
.hero-meta li   { margin-top:10px; padding:10px 0 0; border-top:1px solid rgba(0,0,0,0.2); }
.hero-meta li a { margin:0; }



/* Content
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

hgroup h1 { padding:10px 0; font-size:32px; line-height:40px; text-shadow:0 1px 1px #fff; }
hgroup h1 a { color:#333; }
hgroup h1 a:hover { color:#111; }

#heading .meta { position:absolute; top:22px; right:0; font-size:12px; color:#888; }

#content em, #content label {
	font-size:0.8em;
	font-weight:bold;
	font-style:normal;
	text-transform:uppercase;
	color:#bbb;
	text-shadow:0 1px 1px #fff;
}
#content label { font-weight:normal; }
#content label em { font-size:1em; }

#content input, #content textarea, #content select {
	padding:5px;
	font-family:"Lucida Grande", Tahoma, "Trebuchet MS";
	font-size:1em;
	background-color:#f6f6f6;
	border:1px solid #c6c6c6;
}
#content select { padding:4px; }
#content option { margin:7px; }
#content #submit {
	font-size:0.8em;
	font-weight:bold;
	text-transform:uppercase;
	color:#888;
}
#content #submit:hover {
	color:#efefef;
	background-color:#888;
	border:1px solid #888;
}

h2 {
	padding:10px 0;
	color:#bbb;
	font-size:1.5em;
	font-weight:normal;
	text-transform:uppercase;
	text-shadow:0 1px 1px #fff;
}
h2 a { color:#888 !important; }
.portfolio h2, .archive h2, .search h2 {
	margin:25px 20px 10px;
	padding:0;
}
.portfolio h2 span, .archive h2 span, .search h2 span {
	display:block;
	font-size:0.667em;
	text-transform:none;
}



/* Narrow Column, The Post, Post Meta & Sociable
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

#thepost { margin:16px 0; }
#thepost h2 { font-size:20px; color:#333; text-transform:none; }
#thepost a { color:#369; }
#thepost p, #thepost ol, #thepost ul { margin-bottom:20px; font-size:14px; line-height:24px; color:#555; }
#thepost ol { padding-left:32px; list-style:decimal; }
#thepost ul { padding-left:32px; list-style:disc; }

.postmetadata, .sociable { margin-top:10px; }
.sociable ul li { display:inline; margin-right:5px; }
.sociable img { width:16px; height:16px; }
.sociable-hovers {
	opacity:.6;
	-moz-opacity:.6;
	filter:alpha(opacity=60);
}
.sociable-hovers:hover {
	opacity:1;
	-moz-opacity:1;
	filter:alpha(opacity=100);
}



/* Comment
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

#thecomments { padding:10px 0; border-top:1px solid #ccc; }
#thecomments p a { color:#369; }

#commentlist { margin-bottom:10px; }
#commentlist li { position:relative; padding:15px 0 10px; border-bottom:1px dashed #ccc; }

#commentlist .children { margin:10px 0 0 43px; }
#commentlist .children li { padding-bottom:0; border-top:1px dashed #ccc; border-bottom:none; }

#commentlist .comment-author .fn { font-weight:bold; font-style:normal; }
#commentlist .avatar { float:left; margin-right:7px; padding:3px; }

#commentlist .comment-meta { position:absolute; top:15px; right:50px; font-size:0.9em; color:#888; }
#commentlist .comment-meta a { color:#888; }
#commentlist a:hover, #commentlist a:hover em { color:#369; }

#commentlist .reply { position:absolute; top:15px; right:0; }

#commentlist p { padding:5px 0 0 45px; }

#respond { position:relative; }
#respond p { padding:0 0 10px; }
#respond .author { width:20%; }
#respond .email, #respond .url { padding-left:10px; width:40%; }
#respond .author, #respond .email, #respond .url { box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }
#comment, #author, #email, #url { width:100%; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }
#respond .submit { margin-top:-10px; }
#commentlist #respond { margin:10px 0 0 45px; padding-top:10px; border-top:1px dashed #ccc; }
#cancel-comment-reply { position:absolute; top:15px; right:0; }



/* Sidebar #
------------------------------------------------------------------------------------------ */

#sidebar a { display:block; color:#666; }
#sidebar a:hover { color:#369; background:rgba(255,255,255,.8); }
.widget { margin-bottom:10px; padding:0 0 20px 0; border-bottom:1px solid #ccc; }

#projectinfo { padding:0 0 10px 0; color:#222; }
#projectinfo li { margin:0 0 10px 0; line-height:1.25em; }
#projectinfo h2, #projectinfo em { color:rgba(51,102,153,.75); }

#projects-nav { overflow:hidden; }
#projects-nav ul { line-height:0; }
#projects-nav li { float:left; margin:10px 0 0; }
#projects-nav li.next { float:right; }

.nothumb {
	cursor:default;
	padding:22px 0 0;
	width:80px;
	height:58px;
	font-size:10px;
	line-height:12px;
	color:#999;
	text-align:center;
	text-shadow:0 1px 1px #fff;
	background:#e3e3e3;
}



/* Footer
------------------------------------------------------------------------------------------ */

footer a { color:#999; }
footer a:hover { color:#666; }



/* Portfolio
------------------------------------------------------------------------------------------ */

#portfolio-pool { margin-left:-20px; width:960px; }

.project-thumb { float:left; margin:10px 20px; width:200px; height:230px; }
.project-thumb .metadata {
	padding-top:5px;
	width:200px;
	height:25px;
	line-height:15px;
}
.project-thumb a { color:#666; text-shadow:0 1px 1px #fff; }
.project-thumb a:hover { color:#333; }
.project-thumb span { float:right; font-weight:normal; }
.project-thumb img {
	box-shadow:0 1px 2px rgba(0,0,0,0.5);
	-moz-box-shadow:0 1px 2px rgba(0,0,0,0.5);
	-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.5);
}
.project-thumb a:hover img {
	box-shadow:0 1px 6px rgba(60,120,180,0.75);
	-moz-box-shadow:0 1px 6px rgba(60,120,180,0.75);
	-webkit-box-shadow:0 1px 6px rgba(60,120,180,0.75);
}
.project-thumb a:active img {
	box-shadow:0 1px 2px rgba(0,0,0,0.5);
	-moz-box-shadow:0 1px 2px rgba(0,0,0,0.5);
	-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.5);
}



/* Resume #
------------------------------------------------------------------------------------------ */

.resume strong { font-weight:bold; }
.resume h2 { margin:10px 0 0; }
.resume h3 { margin:20px 0 0 150px; font-size:1.2em; }
.resume #thepost { position:relative; }
.resume #thepost ul { margin:5px 0 15px 168px; list-style:disc; }
.resume #thepost span.time { position:absolute; left:0; font-size:12px; }
.resume #thepost span.title { color:#369; }



/* Contact #
------------------------------------------------------------------------------------------ */

.contact .author { width:24%; }
.contact .email, .contact .url { width:38%; }
.contact .purpose { width:24%; }
.contact .subject { width:76%; }
.contact .email, .contact .url, .contact .subject { padding-left:10px; }
.contact .author, .contact .email, .contact .url, .contact .purpose, .contact .subject, .contact .message { box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }
.contact #author, .contact #email, .contact #url, .contact #purpose, .contact #subject, .contact #message { box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; width:100%; }
.contact textarea { height:300px; }
.contact #submit { margin-top:-10px; }



/* Calendar
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

#wp-calendar {
	width:100%;
	background:#ebebeb;
	border:1px solid #ccc;
	margin:0;
	font-size:12px;
	text-align:center;
}
#wp-calendar caption {
	text-align:left;
	margin:10px 0;
	padding-top:10px;
	border-top:1px solid #c6c6c6;
	font-size:18px;
	font-weight:normal;
	text-transform:uppercase;
	color:#ccc;
}
#wp-calendar #today { background:#ccc; }
#wp-calendar a {
	display:block;
	width:100%;
	height:100%;
	border:none;
	padding:0;
}
#wp-calendar a:hover { background:#ccc; }



/* Isotope
------------------------------------------------------------------------------------------ */

.isotope,
.isotope-item {
	-webkit-transition-duration:0.5s;
	-moz-transition-duration:0.5s;
	transition-duration:0.5s;
}
.isotope { -webkit-transition-property:height,width; -moz-transition-property:height,width; transition-property:height,width; }
.isotope-item { -webkit-transition-property:-webkit-transform,opacity; -moz-transition-property:-moz-transform,opacity; transition-property:transform,opacity; z-index:2; }
.isotope-hidden.isotope-item { pointer-events:none; z-index:1; }



/* Retina */

@media only screen and (-webkit-min-device-pixel-ratio:1.5) {

	#page, #sitelogo, .hero-control:after { background-image:url("img/sprites@2x.png"); background-size:1400px 88px; }

}

/* ==|== media queries ======================================================
   EXAMPLE Media Query for Responsive Design.
   This example overrides the primary ('mobile first') styles
   Modify as content requires.
   ========================================================================== */

@media only screen and (max-width: 768px) {

	#page { width:100%; min-width:auto; }

	header { margin:0 12px; width:auto; height:80px; }

		#sitelogo { left:-10px; top:0; }

		#sitenav { left:14px; }

	#hero.single { width:100%; }
	
		.hero-image-wrap { width:100%; height:200px; }


	#heading { margin:0 12px; width:auto; height:auto; }

	#content { margin:0 12px; width:auto; }

		#thepost img { width:100%; height:auto; }
	
		#thepost p { font-size:1.4em; }
	
		#narrow-column { width:100%; }

		#sidebar { float:left; }


	footer { margin:0 12px; width:auto; }

}

@media only screen and (min-width:768px) and (max-width:768px) {
    
    #date-nav a {
        padding:0 20px;
        font-size:15px;  
    }
}