/*
	Theme Name: Guilou
	Theme URI: http://blog.guilou.fr
	Author: Guillaume de Brion
	Author URI: http://www.guilou.fr
	Description: Thème 2014 du blog de Guilou.
	Version: 1.0
	License: GNU General Public License v2 or later
	License URI: http://www.gnu.org/licenses/gpl-2.0.html
	Tags: green, responsive
	Text Domain: guilou
*/

body {
    margin: 0;
    padding: 0;
}

header {
	height: 20em;
	line-height: 20em;
}

    header div {
        width: 70em;
        margin: 0 auto;
		text-align: center;
    }


nav {
    padding: 0;
    width: 100%;
	position: fixed;
    border-bottom: 0.5em #7dc692 solid;
    top: 0;
    z-index:999;
}

    nav ul {
        margin: 0 auto;
        width: 70em;
        height: 2.5em;
    }

    nav ul li {
        display: block;
        line-height: 2.5em;
        float: left;
        text-align: center;
        margin: 0 1em;
    }

    nav ul li a {
        display: block;
        width: 100%;
        padding: 0 0.5em;
    }

    nav ul .label {
		margin-left: 1em;
    }

section {
    width: 55em;
    min-height: 43em;
    float: left;
    border-right: 1px #CCC solid;
    padding: 0 2em;
    box-sizing: border-box;
}

	section p {
		-moz-hyphens: auto;
		-webkit-hyphens: auto;
		-ms-hyphens: auto;
		hyphens: auto;
		text-align: justify;
		margin: 1.2em 0;
		word-wrap: break-word;

	}

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

	section table {
		border-collapse: collapse;
		border: 1px #7dc692 solid;
	}

	section th {
		background: #7dc692;
		padding: 0.5em 1em;
	}

	section tr:nth-child(odd) {
		background: #F5F5F5;
	}

	section td {
		padding: 0 0.5em;
		border-left: 1px #7dc692 solid;
	}

	section blockquote {
		margin: 0;
		padding: 1em 3em;
		background: #F5F5F5;
		border-left: 0.5em #7dc692 solid;
		font-style: italic;
		position: relative;
	}

		section blockquote em {
			font-style: normal;
		}

		section blockquote > * {
			position: relative;
		}

	#tag-line, #search-line, #archive-line {
		margin-top: 1em;
		padding: 1em;
		background: #F5F5F5;
		border-left: 0.5em #7dc692 solid;
		text-indent: none;
	}

	section pre {
		margin: 0;
		padding: 0.25em 3em;
		background: #F5F5F5;
		border-left: 0.5em #ecb624 solid;
		position:relative;
		overflow: auto;
		white-space: pre-wrap;
		-moz-tab-size: 4; /* Firefox 3.7 */
		-o-tab-size: 4; /* Opera 10.5, 10.5+next? */
	}

	section dt {
		margin: 0.5em 0 0 0;
		font-weight: bold;
	}

	section article {
		margin-bottom: 5em;

	}

	section .toplink {
		text-align: center;
		display: block;
	}

main {
    margin: 0 auto;
    border-left: 1px #CCC solid;
    width: 70em;
    box-sizing: border-box;
    background: #F5F5F5;
}

main .legend,
main .wp-caption-text {
    font-style: italic;
    text-align: center;
    margin: 0;
}

main .post-title {
    border-left: 0.3em #ecb624 solid;
    padding: 0 0 0 1em;
}

main .post-title h1 {
    margin-bottom: 0;
}

main .post-title a {
	text-decoration: none;
}

main .post-details {
    font-style: italic;
    margin: 0.5em 0 0 0;
    text-indent: 0;
    list-style: none;
    padding: 0;
}

	main .post-details li {
		float: left;
		margin: 0 2.5em 0 0;
	}

main img,
main .wp-caption,
aside img,
main iframe
{
    max-width: 100%;
    height: auto;
}



.attachment-search-thumb {
	float: left;
	margin: 1.2em 1em 1em 0;
}

.comment {
	margin: 0 0 2em 0;
	padding: 1em;
	background: #F5F5F5;
	border-left: 0.5em solid #7DC692;
	position: relative;
}

	.comment.bypostauthor {
		border-left: 0.5em solid #ecb624;
	}

	.comment.depth-2 {
		background: #CCC;
	}

	.comment.depth-3 {
		background: #F5F5F5;
	}

	.comment.depth-4 {
		background: #CCC;
	}

	.comment.depth-5 {
		background: #F5F5F5;
	}

	.comment-meta {
		margin: 0 0 2em 0;
	}

	.comment .avatar {
		float: left;
		margin: 0 1em 0 0;
	}

	.comment-body p {
		margin: 1em 1em 0 6em;
	}

	.comment-pagination {
		text-align: center;
	}

#commentform {

}
	#commentform p.comment-form-author,
	#commentform p.comment-form-email,
	#contactform p.contact-form-author,
	#contactform p.contact-form-email {
		float: left;
		width: 50%;
		box-sizing: border-box;
	}

	#commentform p.comment-form-author,
	#contactform p.contact-form-author {
		padding-right: 1em;
	}

	#commentform p.comment-form-email,
	#contactform p.contact-form-email {
		padding-left: 1em;
	}

	#commentform input,
	#commentform textarea,
	#contactform input,
	#contactform textarea {
		font-size: 1.1em;
		width: 100%;
		padding: 0.25em;
		border-radius: 5px;
	}

	#commentform input,
	#contactform input {
		height: 1.5em;
	}

	#commentform p.comment-form-url {
		width: 100%;
	}

	#commentform label,
	#contactform label {
		display: block;
	}

	#commentform p.form-submit,
	#contactform p.form-submit {
		text-align: right;
	}

	#commentform #comment-submit,
	#contactform #contact-submit {
		width: auto;
		padding: 1em;
		height: auto;
	}

#searchform {

}

	#searchform input {
		font-size: 1.1em;
		width: 100%;
		padding: 0.25em;
		border-radius: 5px;
		height: 1.5em;
	}

	#searchform #searchsubmit {
		width: auto;
		padding: 1em;
		height: auto;
		float: right;
		margin: 1em 0 0 0;
		border-radius: 5px;
	}

	#searchform .screen-reader-text {
		display: none;
	}

#menu {
    float: left;
    width: 15em;
    padding: 1em;
    margin-left: -1px;
    border-left: 1px #CCC solid;
    box-sizing: border-box;
}

    #menu .bloc {
        margin-bottom: 3em;

    }

    #menu p.title {
        margin: 0 0 1em 0;
        font-weight: bold;
    }


footer {
    clear: both;
    padding: 1em 0;
}

    footer p {
        text-align: center;
    }

.clear, .clearer {
    clear: both;
}

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

/* Font */
header a {
    font-size: 3em;
    text-decoration: none;
    font-family: sans-serif;
    font-weight: 200;
}

body {
    font-family: sans-serif;
    line-height:150%;

}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Liberation Sans', Georgia, Arial, serif;
}

nav a, footer a {
    text-decoration: none;
}

section h1 {
	font-size: 150%;
}

section h2 {
	font-size: 130%;
}

section h3 {
	font-size: 120%;
}

section h4 {
	font-size: 110%;
}

section h5 {
	font-size: 90%;
}

section h6 {
	font-size: 80%;
}

section pre {
	font-family: monospace;
	line-height: 100%;

}

section blockquote:before,
section pre:before {
	font-family: FontAwesome;
	display: inline-block;
	text-decoration: inherit;
	color: #CCC;
	font-size: 5em;
	right: 0.5em;
	top: 0.5em;
	position: absolute;
	opacity: .5;
}

section blockquote:before {
	content: '\f075';
}

section pre:before {
	content: '\f121';
}

aside > * {
    font-size: 0.9em;
}

main .legend,
main .wp-caption-text {
    font-size: 0.9em;
}

.post-details li {
    font-size: 0.8em;
}

#commentform label,
#contactform label {
	font-weight: 800;
}

footer {
    font-size: 0.9em;
}

	footer p {
		text-indent: 0;
	}


/* Colors */

html {
    background: #F5F5F5;
}

main {
	/*background: #FFF; */
}

#menu {
	background: #F5F5F5;
}

a, #tag-line, #search-line, #archive-line {
    color: #508b61 ;
}

a:hover {
    color: #7dc692;
}


header, footer {
    background: #7dc692;
}

nav  {
    background: #508b61;
}

header a, nav a, footer li, footer li a {
    color: #fff;
}

header a:hover {
	color: #fff;
}

nav ul li a:hover {
	color: #fff;
	background: #7dc692;
	transition: all 0.2s ease-in;
}

.post-details {
	color: #7dc692;
}

header, h1, h2, h3, h4, h5, h6, p.title, h1 a, h1 a:hover, h2 a, h2 a:hover, h3 a, h3 a:hover {
    color: #ecb624;
}

section {
    background: #FFF;
}

#commentform input,
#commentform textarea,
#searchform input,
#contactform input,
#contactform textarea {
	background: #F5F5F5;
	border: 1px #508b61 solid;
	color: #508b61;
}

#commentform input:focus,
#commentform textarea:focus,
#searchform #s:focus,
#contactform input:focus,
#contactform textarea:focus {
	border: 1px #ecb624 solid;
}

#commentform #comment-submit,
#contactform #contact-submit,
#searchform #searchsubmit {
	color: #fff;
	background: #508b61;
}

@media screen and (max-width:1120px) {
	header,
	header div,
	nav,
	nav ul,
	footer {
		width: 100%;
	}

	main {
		margin: 0;
		width: 100%;
	}

	section {
		width: 70%;
		padding: 3%;
	}

	#menu {
		width: 30%;
	}

	nav ul {
		margin: 0;
		padding: 0;
	}

	nav ul li {
		margin: 0 1%;

	}
}

@media screen and (max-width:766px) {
	header {
		height: 12em;
		line-height: 12em;
	}

	#menu {
		float: none;
		clear: left;
		width: 90%;
	}

	section {
		width: 100%;
		padding: 3%;
		border: 0;
	}

	nav ul {
		margin: 0 auto;
		width: 100%;
	}

	nav ul li {
		margin: 0;
		padding: 0;
		width: 20%;
	}

	nav .label {
		display: none;
		margin: 0 5% 0 0;
	}

	.no-mobile {
		display: none;
	}

	section ul,
	section ol {
		margin-left: 1em;
	}

	main .post-details li {
		margin: 0.5em 1em 0 0;
	}
}

:focus {outline:none;}
::-moz-focus-inner {border:0;}