/*

# ------------------ BEGIN LICENSE BLOCK ------------------

#

# This file is part of MowXml : https://www.mowxml.org

#

# Package:		theme.css

# Copyright (c) 2018, 2019 MowXml

# Authors		Daniel F., Cédric F.

#

# ------------------- END LICENSE BLOCK -------------------

*/



@font-face {

	font-family: 'open_sansregular';

	src: url('../fonts/OpenSans-Regular-webfont.eot');

	src: url('../fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),

	url('../fonts/OpenSans-Regular-webfont.woff') format('woff'),

	url('../fonts/OpenSans-Regular-webfont.ttf') format('truetype'),

	url('../fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');

	font-weight: normal;

	font-style: normal;



}



body {

	font-family: 'open_sansregular', sans-serif;

	font-size: 1.7em;

	line-height: 1.6em;

	color: #3A4145;

	background-color: #fff;

}



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



@media (min-width: 64rem) {

	.container {

		padding-left: 15rem;

		padding-right: 15rem;

	}

}



.header {

	background-color: #fff;

	border-bottom: 1px solid #ddd;

	padding-top: 1.3rem;

	height: 9rem;

	z-index: 2;

}



.header a {

	color: #222;

}



.header a:hover {

	text-decoration: none;

}



.logo {

	background: url("../../../data/medias/theme/logo.svg") top left no-repeat;

	height: 10rem;

	background-size: 8rem;

	background-position: 2rem 0;

	padding-left: 11rem;

}



.bg {

	background: url(../../../data/medias/theme/header/header-bg01.png) no-repeat top left;

	-webkit-background-size: cover;

	-moz-background-size: cover;

	-o-background-size: cover;

	background-size: cover;

	height: 250px;

}



@media (max-width: 463px) {

	.logo {

		display: none;

	}

	.bg {

		height: 100px;

	}

}



/* ----- Nav / Menu ----- */



.nav {

	text-align: right;

	padding-top: 1.7rem;

}



ul.menu {

	margin-right: 30px;

}



.menu>li.menu {

	padding: 5px 5px 2px 5px;

}



.menu>li.menu:hover {

	border-bottom: 3px solid #222;

}



.menu>li ul {

	display: none;

	position: absolute;

	padding: 0;

	line-height: 2.8rem;

	z-index: 10;

}



.menu>li:hover ul {

	display: block;

}



.menu ul li {

	display: block;

	margin: 0;

	padding: 0 1rem;

	background-color: #fff;

	text-align: left;

}



.menu span::before {

	content: '\25bc';

}



@media (max-width: 767px) {

	.nav {

		height: auto;

		max-height: 200px;

		overflow-y: auto;

		text-align: left;

		background-color: #fff;

		margin-top: 0;

		z-index: 10;

	}

	.nav>.container {

		padding: 0;

	}

	li.menu {

		padding: 5px 5px 2px 5px;

		background: #efefef;

	}

	li.menu:hover {

		border: none;

	}

	.responsive-menu label {

		background-color: transparent;

		color: #333;

		font-size: 3.5rem;

		margin: .75rem;

		text-align: right;

	}

	.responsive-menu label:before {

		content: '\2630';

	}

	.menu>li ul {

		position: relative !important;

	}

	.menu>li ul li:hover {

		background-color: #fff;

	}

	.menu>li ul li:hover a {

		text-decoration: underline;

	}

	.responsive-menu ul li.active a,

	.responsive-menu ul li.active:hover {

		background-color: #fff;

		color: #000;

	}

}





li.active a,

a.active {

	color: #000;

}



.static.group.active,

.static.menu.active a {

	color: #000;

	white-space: nowrap;

}



.static.group.noactive,

.static.menu.noactive a {

	color: #258fd6;

	white-space: nowrap;

}



/* ---------- Main ---------- */



.main {

	background-color: #fff;

	padding-top: 2rem;

}



.repertory {

	margin-top: 4rem;

}





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



.pagination {

	margin: 3rem 0 3rem 0;

}



.pagination a {

	background-color: #258fd6;

	border-radius: .3rem;

	color: #fff;

	padding: .9rem .7rem;

	transition-duration: .2s;

}



.pagination a:hover {

	background-color: #3a6c96;

	color: #fff;

	text-decoration: none;

}



.pagination span:first-letter,

.pagination a:first-letter {

	text-transform: uppercase;

}



.p_first,

.p_prev,

.p_current,

.p_next,

.p_last {

	display: inline-block;

}





/* ------- Article ------- */



.article header {

	margin-top: 2rem;

}



.article header div {

	margin: 0;

}



.article header h2,

.article header h2 a {

	color: #222;

	font-size: 3.2rem;

	line-height: 1.2em;

	letter-spacing: -1px;

	font-weight: bold;

	margin: 0;

}



.article header h2 a:hover {

	color: #111;

	text-decoration: none;

}



.article header small,

.comment small {

	color: #9EABB3;

}



.article header span:before,

.article header time:before,

.article footer span:before {

	padding-left: 1.5rem;

	padding-right: .3rem;

}



.article .art-date {

	font-size: 1.5rem;

	color: #9EABB3;

}



.article .written-by:after {

	content: '|';

	padding-left: 0;

}



.article .classified-in:after {

	content: '|';

	padding-left: 0;

}



.article img.art_thumbnail {

	padding: 30px 15px 15px 0;

	float: left;

}



.page.mode-article .article footer {

	border-top: 1px solid #dedede;

	border-bottom: 1px solid #dedede;

}



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



#form {

	border-top: 130px solid transparent;

	margin: -130px 0 0;

}



.comment {

	background-image: url('../img/user.png');

	background-repeat: no-repeat;

	margin-bottom: 2.5rem;

	padding-left: 6rem;

	border-top: 100px solid transparent;

	margin-top: -100px;

}



.comment blockquote {

	margin: 0;

	font-size: 1.3rem;

}



.type-admin {

	background-color: #F0F8FF;

	padding: .2rem .5rem;

}



.nbcom {

	background-color: #258fd6;

	border-radius: .3rem;

	color: #fff;

	padding: .4rem .6rem;

}



.nbcom:hover {

	background-color: #3a6c96;

	color: #fff;

	text-decoration: none;

}



.level-0 {

	margin-left: 0;

}



.level-1 {

	margin-left: 5rem;

}



.level-2 {

	margin-left: 10rem

}



.level-3 {

	margin-left: 15rem;

}



.level-4 {

	margin-left: 20rem;

}



.level-5,

.level-max {

	margin-left: 25rem;

}



@media (max-width: 768px) {

	.comment {

		background-image: none;

		padding-left: 0;

	}

	.level-1 {

		margin-left: 1rem;

	}

	.level-2 {

		margin-left: 2rem;

	}

	.level-3 {

		margin-left: 3rem;

	}

	.level-4 {

		margin-left: 4rem;

	}

	.level-5,

	.level-max {

		margin-left: 5rem;

	}

}



#id_answer {

	margin-bottom: 1.5rem;

	padding: 1.5rem;

	border: 1px solid #eee;

	width: 100%;

	background: #fafafa;

	display: none;

}



.capcha-letter,

.capcha-word {

	font-weight: bold;

}



.capcha-word {

	background-color: #ddd;

	border-radius: .3rem;

	letter-spacing: .5rem;

	padding: .9rem .7rem;

	transition-duration: .2s;

}



.capcha-word:hover {

	background-color: #666;

	color: #fff;

	transition-duration: .2s;

}



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



.aside {

	padding: 0 2rem 0 2rem;

}



.aside h3 {

	font-size: 1.5rem;

	font-weight: bold;

	margin-top: 5rem;

	text-transform: uppercase;

}



.aside ul {

	margin: 0;

}



@media (max-width: 768px) {

	.aside {

		padding-left: 1.5rem;

	}

}



/* tags */



.aside ul.tag-list {

	list-style-type: none;

	padding: 0;

}



.aside ul.tag-list li {

	display: inline-block;

}



.aside ul.tag-list li a {

	padding: 0 0.5rem 0 0;

}



.aside ul.tag-list li a.active {

	font-weight: bold;

	background-color: #68838b;

	color: #fff;

	padding: 0 0.5rem 0 0.5rem;

}



/* https://www.w3schools.com/colors/colors_trends.asp (The 10 Hottest Fall Colors for 2016) */



.tag-size-1 a {

	font-size: 1.0rem;

	/* Riverside  */

	color: #4C6A92;

}



.tag-size-2 a {

	font-size: 1.2rem;

	/* Airy Blue  */

	color: #92B6D5;

}



.tag-size-3 a {

	font-size: 1.4rem;

	/* Sharkskin  */

	color: #838487;

}



.tag-size-4 a {

	font-size: 1.6rem;

	/* Bodacious */

	color: #B76BA3;

}



.tag-size-5 a {

	color: #AF9483;

	/* Warm Taupe */

	font-size: 1.8rem;

}



.tag-size-6 a {

	color: #AD5D5D;

	/* Dusty Cedar */

	font-size: 2.0rem;

}



.tag-size-7 a {

	font-size: 2.2rem;

	/* Lush Meadow */

	color: #006E51;

}



.tag-size-8 a {

	font-size: 2.4rem;

	/* Spicy Mustard */

	color: #D8AE47;

}



.tag-size-9 a {

	font-size: 2.6rem;

	/* Potter's Clay */

	color: #9E4624;

}



.tag-size-10 a {

	font-size: 2.8rem;

	/* Aurora Red */

	color: #B93A32;

}



.tag-size-11 a {

	font-size: 3.0rem;

	/* Snorkel Blue */

	color: #034F84;

}



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



.footer {

	background: #fff;

	color: #666;

	padding: 6rem 0;

	text-align: center;

	font-size: 1.2rem;

}



.footer p {

	margin: 0;

}