/*!
Theme Name: Espace Vivant
Description: Thème pour le site espacevivant.ch
Author: Matthieu Bovel <matthieu@bovel.net>
Version: 1.1
*/

/* @group General Typography */
/*
    Green: #390
    DarkGreen: #130
    Beige: #F2F0E7
    Grey: #333
    LightGray: #888
*/

body {
    font-family: 'Lato', sans-serif;
    color: #333;
    font-size: 1.3em;
    line-height: 1.4;
    font-weight: 300;
    background: url("images/bg.jpg") no-repeat fixed #121;
    background-size: cover;
}

h1 {
    font-weight: 300;
    font-size: 2.4em;
}

h2 {
    font-weight: 300;
    font-size: 1.5em;
}

h3 {
    font-weight: 300;
    font-size: 1.2em;
}

p {
    text-align: justify;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    text-decoration: none;
    color: #333;
}

h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
    color: #333;
}

a {
    color: #390;
}

a:visited {
    color: #4f5300;
}
/* @end */

/* @group Layout */
#container, .mce-content-body {
	background-color: #F2F0E7;
	max-width: 40rem;
	margin: 4rem auto 10rem;
	padding: 4em 12em;
}

.mce-content-body {
	background-image: none;
}

#logo {
    height: 10em;
    vertical-align: middle;
    margin: 0 auto;
    display: block;
}

header, footer{
    text-align: center;
}

nav {
	font-size: 0.9em;
}

footer {
    font-size: 0.8em;
    margin-top: 9em;
    margin-bottom: 1em;
}

footer p {
    text-align: center;
}
/* @end */

/* @group Blog page */
.blog-post-title {
    margin-bottom: 0;
}

.blog-post-metas {
    margin-top: 0;
    color: #888;
	font-style: italic;
}
/* @end */

/* @group Map page */
.map-link, .map-link:visited {
    color: #888;
    font-family: sans-serif;
    font-size: 0.92em;
    vertical-align: top;
}

.map-link:hover {
    color: #000;
}
/* @end */

/* @group Wordpress Audio */
.mejs-controls .mejs-time-rail .mejs-time-current {
    background-color: #390 !important;
}

.mejs-controls .mejs-time-rail .mejs-time-loaded, .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
    background-color: #F2F0E7 !important;
}

.mejs-container {
    margin: 1em 0;
}

.mejs-container, .mejs-container * {
    font-family: inherit !important;
}
/* @end */

/* @group Images and Galleries */
img {
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
}

figure {
    margin: 0;
}

.wp-caption {
    max-width: 100%;
}

.wp-caption .wp-caption-text {
    margin: 0 auto;
    width: 80%;
    display: block;
}

.wp-caption-text {
    margin: 0 auto;
    font-size: 0.8em;
    font-style: italic;
    text-align: center;
    -moz-hyphens: none;
    -webkit-hyphens: none;
    hyphens: none;
}

.gallery {
    margin: 1em -0.3em;
}

.gallery-item {
    display: inline-block;
    text-align: center;
    vertical-align: top;
    box-sizing: border-box;
    padding: 0.3em;
}

.gallery-columns-2 .gallery-item {
    width: 50%;
}

.gallery-columns-3 .gallery-item {
    width: 33.33333%;
}

.gallery-item img {
    width: 100%;
}

.alignleft {
	float: left;
	margin: 0.5em 1em 0.5em 0;
	max-width: 45%;
}

.aligncenter {
	display: block;
	margin: 0.5em auto;
	max-width: 100%;
}

.alignright {
	float: right;
	margin: 0.5em 0 0.5em 1em;
	max-width: 45%;
}
/* @end */

/* @group Navigations (Nav and Footer) */
nav {
    text-transform: uppercase;
    font-weight: 300;
    display: inline-block;
}

nav ul,
footer ul {
    list-style: none;
    display: inline-block;
    padding: 0;
    vertical-align: top;
}

nav li,
footer li {
    display: inline-block;
    padding: 0 0.9rem;
    vertical-align: top;
}

nav,
footer {
    color: #888;
}

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

nav a:visited,
footer a:visited {
    color: inherit;
}

nav a[title="Accueil"] {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    background-size: 100% 100%;
    height: 1em;
    width: 1.6em;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSItMjYuMyAxMDEuNSA2MTIgNTQ0LjkiICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCI+PHBvbHlnb24gZmlsbD0iIzU1NSIgcG9pbnRzPSIyNzkuNiwxMDEuNSAtMjYuMywzNTYuMyA4NywzNTYuMyA4Nyw2NDYuNSAyMzUsNjQ2LjUgMjM1LDQ2MSAzMjQuMyw0NjEgMzI0LjMsNjQ2LjUgNDcyLjMsNjQ2LjUgNDcyLjMsMzU2LjMgNTg1LjcsMzU2LjMgIi8+PC9zdmc+DQo=);
}

nav a[title="Accueil"]:hover {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSItMjYuMyAxMDEuNSA2MTIgNTQ0LjkiICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCI+PHBvbHlnb24gZmlsbD0iIzAwMCIgcG9pbnRzPSIyNzkuNiwxMDEuNSAtMjYuMywzNTYuMyA4NywzNTYuMyA4Nyw2NDYuNSAyMzUsNjQ2LjUgMjM1LDQ2MSAzMjQuMyw0NjEgMzI0LjMsNjQ2LjUgNDcyLjMsNjQ2LjUgNDcyLjMsMzU2LjMgNTg1LjcsMzU2LjMgIi8+PC9zdmc+DQo=);;
}

nav li.current-menu-item a[title="Accueil"] {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSItMjYuMyAxMDEuNSA2MTIgNTQ0LjkiICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCI+PHBvbHlnb24gZmlsbD0iIzM5MCIgcG9pbnRzPSIyNzkuNiwxMDEuNSAtMjYuMywzNTYuMyA4NywzNTYuMyA4Nyw2NDYuNSAyMzUsNjQ2LjUgMjM1LDQ2MSAzMjQuMyw0NjEgMzI0LjMsNjQ2LjUgNDcyLjMsNjQ2LjUgNDcyLjMsMzU2LjMgNTg1LjcsMzU2LjMgIi8+PC9zdmc+DQo=);
}

nav a:hover,
footer a:hover {
    color: black;
}

nav li.current-menu-item a,
footer li.current-menu-item a {
    color: #390;
}
/* @end */

/* @group Print */
@media print {
	body {
		font-size: 1.1em;
	}

    header, footer {
        display: none;
    }

    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    #container {
        padding: 0;
        margin: 0;
    }

	.mejs-container {
		display: none;
	}

    a,
    a:visited {
        text-decoration: none;
    }

    @page {
        margin: 2.5cm 2.5cm 5cm;
    }
}
/* @end */

/* @group Responsiveness */
@media screen and (max-width: 85em) {
    body {
        font-size: 1.15em;
    }

    #container {
        padding: 4em 8em;
    }
}

@media screen and (max-width: 58em) {
    body {
        background-image: none;
        background-color: #F2F0E7;
		font-size: 1em;
    }

    #container {
        margin: 0 auto;
    }
}

@media screen and (max-width: 40em) {
    #container {
        padding: 2em;
    }

    .gallery-columns-3 .gallery-item {
        width: 50%;
    }
}
/* @end */