/*
Theme Name: Non au harcèlement
Theme URI: http://www.education.gouv.fr/nonauharcelement/
Author: Jonathan Debauve
Version: 2
*/


html {margin: 0; padding: 0;}

body {
	color: #333;
	font-family: Roboto, Arial, sans-serif; 
	font-size: 15px;
	line-height: 1.5em;
	margin: 0;
	padding: 0;
	width: 100%;
}

h1 {color: #008d86; font-size: 32px; margin: 24px 0 18px 0; padding: 0; line-height: 1em;}
h2 {color: #008d86; font-size: 24px; margin: 24px 0 12px 0; padding: 0; line-height: 1em;}
h3 {color: #666; font-size: 20px; margin: 24px 0 12px 0; padding: 0; line-height: 1em;}
p {margin: 12px 0 18px 0; text-align: justify;}

a {color: #008d86; text-decoration: underline;}
a:hover {color: #93004f; text-decoration: underline;}

img {border: 0; height: auto; max-width: 100%;}
.alignright {float: right; margin: 10px 0 10px 10px;}
.alignleft {float: left; margin: 10px 10px 10px 0;}

hr {border: 1px solid #eee; margin: 20px 0;}

@media all and (max-width: 560px) {
	h1 {font-size: 22px; margin: 18px 0 12px 0; padding: 0; line-height: 1em;}
	h2 {font-size: 16px; margin: 18px 0 6px 0; padding: 0; line-height: 1em;}
	h3 {font-size: 14px; margin: 18px 0 6px 0; padding: 0; line-height: 1em;}
	body {font-size: 12px; line-height: 1.3em;}
	p {margin: 8px 0 12px 0; text-align: justify;}
}


#header {
	background: url('img/fd_blanc.png');
	display: block;
	margin: 0 auto;
	overflow: hidden;
	padding: 23px 0 17px 0;
	position: absolute;
	text-align: center;
	top: 0;
	height: 48px;
	width: 100%;
}

#logo-menesr {float: left; margin: -2px 0 0 20px;}
#logo-nah {margin: 0 0 0 -181px;}
#logo-nah-mobile {display: none;}


@media all and (max-width: 1100px) {
	#logo-nah {margin: 0;}
	#logo-menesr {display: none;}
}

@media all and (max-width: 768px) {
	#header {padding: 10px 0 6px 0; height: 72px;}
	#logo-nah {margin: 0; display: none}
	#logo-nah-mobile {display: block; margin: 0 auto;}
	#logo-menesr {display: none;}
}

@media all and (max-width: 560px) {
	#logo-nah-mobile {display: block; width: 100%; max-width: 368px;}
}



/* Menu */

#menu {
	color: #fff;
	display: block;
	font-weight: 900;
	margin: 0; 
	padding: 0px;
	position: absolute;
	text-align: center;
	top: 88px;
	width: 100%;
}

#menu li {
	display: inline;
}

#menu li a {
	color: #fff;
	display: inline-block;
	font-size: 36px; 
	font-weight: 900;
	line-height: 1.1em;
	height: 43px;
	padding: 16px 0 10px 0; 
	text-decoration: none;
	text-transform: uppercase;
    transition: background 0.5s;
	vertical-align: top; 	
	width: 50%;
}

#menu li.quefaire a {background: url('img/fd_menu.png');}
#menu li.ressources a {background: url('img/fd_menu2.png');}

#menu li a:hover {
	background: url('img/fd_menu3.png');
    transition: background 0.5s;
}

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

	#menu li a {
		font-size: 26px; 
		height: 38px;
		padding: 12px 0 0 0; 
	}

}

@media all and (max-width: 560px) {
	#menu li a {
		display: block; 
		font-size: 20px;
		height: 28px;
		padding: 6px 0 0 0;
		width: 100%;
	}
}

.sousmenu {display: block; list-style: none; margin: 0; padding: 30px 0;}
.sousmenu li {display: block; margin: 0 0 12px 0;}
.sousmenu li a {background: #008d86; color: #fff; font-size: 20px; font-weight: bold; margin: 0; padding: 5px 10px; text-decoration: none;}
.sousmenu li a:hover {background: #93004f;}


/* Une */

#une {
	background-repeat: no-repeat;
	background-position: top center;  
	background-size: auto;
	display: table;
	height: 650px;
	overflow: hidden;
	margin: 0;
	padding: 0 0 0 0 ;
	text-align: center;
	width: 100%;
}

#une h1 {
	font-size: 60px;
	line-height: 0.9em;
	display: table-cell;
	text-align: center;
	text-transform: uppercase;	
	vertical-align: bottom;	
}

#une h1 a {
	background: url('img/fd_une.png') repeat-x bottom;
	background-size: contain;
	color: #fff;
	display: table-cell;
	height: 475px;
	padding: 0 5% 50px 5%;
	text-align: center;
	text-decoration: none;
	vertical-align: bottom;
	width: 90%;
}

@media all and (max-width: 1000px) {
	#une h1 {font-size: 50px;}
}

@media all and (max-width: 768px) {
	#une {height: 350px; background-position: center -50px;}
	#une h1 {font-size: 40px; line-height: 1em;}
	#une h1 a {background-position-y: 160px; padding: 0 5% 30px 5%;}
}

@media all and (max-width: 560px) {
	#une {height: 250px; background-position: center 0; background-size: cover;}
	#une h1 {font-size: 30px;}
	#une h1 a {height: 400px; padding: 0 5% 20px 5%;}
}


/* Home ---------------------------------------------------------------------------------- */

.box {background: #fff; padding: 50px 0; overflow: hidden; text-align: center;}
.box2 {background: #008d86;}

.box h1.home {
	color: #008d86;
	font-size: 40px;
	margin: 0 0 50px 0;
	padding: 0;
	text-align: center;
	text-transform: uppercase;
}

.box .articles {display: inline; padding: 0;}

.box article {
	background: #efefef;
	display: inline-block;
	margin: 0 1% 60px 1%;
	padding: 0;
	text-align: center;
	vertical-align: top;
	width: 22%;
}

.archive .box article {height: auto;}

.box2 article {background: #fff;}

.box article h1 {font-size: 1.6vw; margin: 0; padding: 0;}

.box article h1 a {
	color: #222;
	display: block;
	font-weight: 300;
	padding: 0 0 15px 0;
	text-decoration: none;
	transition: 0.5s;	
	width: 100%;
}
	
.box article img {height: auto; width: 100%;}

.box article h1 img {margin: 0 0 12px 0;}

.box article h1 a:hover {color: #008d86; transition: 0.5s;}
.box2 h1.home {color: #fff;}

p.ensavoirplus {margin: 0; padding: 0; text-align: center;}

p.ensavoirplus a {
	border: 2px solid #008d86;
	color: #008d86;
	font-size: 18px;
	padding: 10px 20px;
	text-decoration: none;
    transition: 0.5s;	
}

p.ensavoirplus a:hover {
	background: #008d86;
	color: #fff;
    transition: 0.5s;	
}

.box2 p.ensavoirplus a {border: 2px solid #fff; color: #fff;}
.box2 p.ensavoirplus a:hover {background: #fff; color: #008d86;}


@media all and (max-width: 768px) {
	
	.box {padding: 40px 0;}
	.box h1.home {
		font-size: 30px;
		margin: 0 0 30px 0;
	}
	
	.box article {
		margin: 0 1% 20px 1%;
		padding: 0;
		width: 44%;
	}
	
	.box article h1 {font-size: 2.7vw; margin: 0; padding: 0;}
	
	p.ensavoirplus {
		margin: 15px 0 0 0;
	}

	p.ensavoirplus a {
		font-size: 14px;
		padding: 6px 10px;
	}
	
}

@media all and (max-width: 560px) {
	
	.box {padding: 30px 0;}
	
	.box article {
		background: #efefef;
		display: inline-block;
		margin: 0 1% 15px 1%;
		padding: 0 3% 0 0;
		width: 85%;
		vertical-align: middle;
	}	

	.box article h1 img {float: left; margin: 0;}

	.box article img {
		height: 85px;
		padding: 0 3% 0 0;
		float: left;
		width: auto;
	}
	
	.box article h1 {font-size: 3.8vw; margin: 0; padding: 0;}
	
	.box article h1 a {
		color: #222;
		display: block;
		font-weight: 300;
		padding: 0 0 15px 0;
		text-decoration: none;
		transition: 0.5s;	
		width: 100%;
	}
	
	.archive .box article {height: 85px;}

}




/* Partenaires */

.partenaires {
	display: block;
	list-style: none;
	text-align: center;
}

.partenaires ul {margin: 0; padding: 0; display: inline;}

.partenaires li {
	display: inline-block;
	margin: 0 25px;
	height: 60px;
	padding: 0;
	text-align: center;
	vertical-align: top;	
	width: auto;
}

.partenaires li.soutiens {
	padding: 0;
}

.partenaires li.soutiens a {
	background: url('img/ico/plus.png') no-repeat left center;
	color: #666;
	display: inline-block;
	font-size: 16px;
	height: 27px;
	margin: 0;
	padding: 15px 30px 8px 40px;
	text-decoration: none;
}

.partenaires li.soutiens a:hover {text-decoration: underline;}


@media all and (min-width: 778px) and (max-width: 1028px) {
	.partenaires {padding: 30px 0 10px 0;}
}

@media all and (max-width: 560px) {
	.partenaires li {margin: 0 15px 15px 15px; height: 60px}
	.partenaires li img {height: 60px;}
	.partenaires li.soutiens a {height: 36px; padding: 24px 0 0px 40px; font-size: 13px;}
}


/* Recherche */

.search {background: #efefef; clear: both; padding: 15px 0;}

.search .searchBarre{
	margin: 0 auto;
	width: 300px;
}

.search #searchInput{
	background: #fff;
	border: none;
	border-bottom-left-radius: 10px;
	border-top-left-radius: 10px;
	color: #999;
	float: left;
	font-size: 12px;
	height: 40px;
	padding: 0 10px;
	width: 240px !important;
}

.search #searchSubmit{
	background: #ffffff url("img/ico/search.png") center center no-repeat;
	border: none;
	border-bottom-right-radius: 10px;
	border-top-right-radius: 10px;
	display: block;
	float: right;
	height: 40px;
	width: 40px;
	margin: 0;
	cursor: pointer;
}


.pubRow {padding: 0; background: #efefef; text-align: center;}
.pubTitle {font-size: 11px; margin: 10px 0 3px 0; text-align: center;}
.encartPub {margin: 0 0 12px 0;}

@media all and (max-width: 730px) {
	.pubRow {display: none;}
}


/* Footer */

.footer {padding: 20px 10px; text-align: center;}

.footer ul {display: inline; margin: 0 0 0 30px; padding: 0;}
.footer ul li {display: inline; margin: 0; padding: 0;}
.footer ul li a {
	color: #fff;
	display: inline-block;
	height: 5px;
	padding: 16px 4px;
	text-decoration: none;
	vertical-align: top;
}

.footer ul li a:hover {text-decoration: underline;}


/* Réseaux sociaux */

ul.reseauxsociaux {
	display: inline;
	list-style: none;
	margin: 0 0 0 30px;
	padding: 0;	
}

 ul.reseauxsociaux li a {
	display: inline-block;
	height: 40px;
	margin: 3px 0 0 0;
	padding: 0;
	width: 40px;
}

ul.reseauxsociaux li a span {position: absolute; left: -9999em;}

.respectzone a {background: url('img/ico/reseauxsociaux.png') 0 0;}
.respectzone a:hover {background: url('img/ico/reseauxsociaux.png') 0 -40px;}

.facebook a {background: url('img/ico/reseauxsociaux.png') -40px 0;}
.facebook a:hover {background: url('img/ico/reseauxsociaux.png') -40px -40px;}

.dailymotion a {background: url('img/ico/reseauxsociaux.png') -80px 0;}
.dailymotion a:hover {background: url('img/ico/reseauxsociaux.png') -80px -40px;}


@media all and (max-width: 1071px) {
ul.reseauxsociaux {display: block;}
}

@media all and (max-width: 768px) {
	.footer ul {
		display: block;
		margin: 12px 0 8px 0;
	}

	.footer ul li a {margin: 0 4px; padding: 0; height: auto;}

	ul.reseauxsociaux {margin: 0;}
	
	ul.reseauxsociaux li a {
	height: 40px;
	margin: 3px 0 0 0;
	padding: 0;
	width: 40px;
	}

}

@media all and (max-width: 560px) {
}




/* ARCHIVES 
--------------------------------------------------------------------------------------- */

#content {
	display: block;
}

.page-title {
	color: #008d86;
	font-size: 40px;
	height: auto;
	margin: 0 0 50px 0;
	padding: 190px 0 30px 0;
	text-align: center;
	text-transform: uppercase;
}

.search .page-title {
	border-bottom: 50px solid #fff; 
	color: #008d86;
	font-size: 40px;
	height: 40px;
	margin: 0 0 0 0;
	padding: 178px 0 28px 0;
	text-align: center;
	text-transform: uppercase;
}

.category-5  .page-title {margin: 0;}

@media all and (max-width: 768px) {
	.page-title {
	font-size: 30px;
	padding: 170px 0 30px 0;
	}
}

@media all and (max-width: 560px) {
	.page-title {
	font-size: 30px;
	padding: 190px 0 30px 0;	
	}
}

.page-title {
	background: url('img/fd_categorie.png');
	background-size: cover;
}

.page-title a  {
	text-decoration: none;
}

.contraste {background: #efefef;}
.contraste article {background: #fff;}

.box-categorie  {
	margin: 0;
	padding: 20px 0 0 0;
}

.box-categorie header {padding: 15px 0 20px 0;}
.box-categorie h2 {color: #333; display: inline; vertical-align: bottom;}

.box-categorie .acces-categorie {
	display: inline; 
	font-weight: bold;
	margin: 0;
	vertical-align: bottom;
}

.box-categorie  .acces-categorie a {
	background: #008d86;
	border-radius: 4px;
	color: #fff;
	font-size: 11px;
	margin: 0 0 0 10px;
	padding: 2px 4px;
	text-decoration: none;
	text-transform: uppercase;
	transition: 0.5s;
}

.box-categorie  .acces-categorie a:hover {
	background: #93004f; transition: 0.5s;
}

@media all and (max-width: 560px) {
	
	.box-categorie h2 {display: block; margin: 0 0 4px 0; padding: 0;}
	
}

/* ARTICLE 
--------------------------------------------------------------------------------------- */

.filariane {
	font-size: 10px;
	line-height: 1em;
	text-align: left;
	text-transform: uppercase;
}

.filariane a {text-decoration: none;}
.filariane a:hover {text-decoration: underline;}

.page-content, .hentry  {
	display: block;
	margin: 0 auto; 
	max-width: 800px;
	padding: 0 0 60px 0;
	width: 96%;
}

.hentry img.attachment-post-thumbnail {
	border: 1px solid #aaa;
	float: right; 
	height: auto;
	margin: 0 0 20px 20px;
	padding: 10px;
	max-width: 400px;
	width: 50%;
}

@media all and (max-width: 560px) {
	.hentry img.attachment-post-thumbnail {
	float: none; 
	height: auto;
	margin: 0;
	padding: 5px;
	width: 95%;
	}
}

.single-format-video .hentry iframe {
	height: 450px;
	max-width: 800px;
	width: 100%;
}

.entry-title {color: #008d86; font-size: 36px;}

.numerosverts {background: #e0f1f0; margin: 20px 0 40px 0; padding: 40px 40px 30px 40px;}
.pdf {background: #e0f1f0 url('http://www.nonauharcelement.education.gouv.fr/wp-content/uploads/2015/10/telechargement.png') no-repeat 20px center; display: block; font-weight: bold; line-height: 1.1em; margin: 20px 0 20px 0; padding: 35px 40px 30px 110px; text-align: left;}

.issuuembed {width: 100%; height: 500px;}
 
@media all and (max-width: 768px) {
	.issuuembed {width: 100%; height: 450px;}
}

@media all and (max-width: 560px) {

	.single-format-video .hentry iframe {
		height: 200px;
		width: 100%;	
	}

	.issuuembed {width: 100%; height: 300px;}

	.entry-title {color: #008d86; font-size: 26px;}

}

.logos-soutiens td {padding: 0 30px 30px 0;}

.postid-1850 .entry-content img {border: 1px solid #aaa; margin: 0 0 5px 0; padding: 2px;}

#ie {background: #ed872e; color: #fff; display: block; font-weight: bold; font-size: 20px; padding: 50px; position: fixed; bottom: 0; width: 100%; z-index: 20;} 
#ie a {color: #fff;}