@keyframes bouge_bg {
	from { background-position: 0 155px; }
	to { background-position: 800px 155px; }
}

@media screen and (min-width: 1024px) {
	html, body {
		animation: bouge_bg 80s linear infinite;
	}
}

h1 {
	font-size: 1.3em;
	margin: 0;
}

h2 {
	font-family: arial, sans-serif;
	margin: 0;
}

h3 {
	font-size: 1em;
	border: 0;
}

p {
	line-height: 1.275em;
	margin: 0;
}

ol,ul, li { list-style:none; }

abbr, acronym{
	border-bottom: 1px dotted;
	cursor: help;
}

.center { text-align: center; }
.justify { text-align: justify; }
.left { text-align: left; }
input { border-radius: 3px; }

/* Menu principal
--------------------*/
.site-index #nav1, .site-knowledge #nav4, .site-downloads #nav5, .site-partners #nav6 {
	background: url("images/selecteur.png") no-repeat 50% 100%;
	height: 36px;
	position: relative;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	   only screen and (-o-min-device-pixel-ratio: 3/2),
	   only screen and (min--moz-device-pixel-ratio: 1.5),
	   only screen and (min-device-pixel-ratio: 1.5) {
	.site-index #nav1, .site-knowledge #nav4, .site-downloads #nav5, .site-partners #nav6 {
		background: url("./images/selecteur_@2x.png") no-repeat 50% 100%;
		background-size: 19px 12px;
	}
}

.website .wrap {
	font-size: 1.175em;
	background: none;
	margin-top: 0;
	padding: 0 10px;
	overflow: hidden;
}

.website #page-header, .website #page-footer .navbar {
	display: none;
}

.website #page-body {
	margin: 0;
}

/* Contenus
--------------------*/
.section {
	padding: 0 10px;
	overflow: hidden;
	clear: both;
}

.article, .aside {
	color: #fff;
	font-family: arial, sans-serif;
	background-color: rgba(0, 105, 184, 0.4);
	padding: 12px;
	border-left: 2px solid #99ccff;
	border-right: 2px solid #99ccff;
	border-bottom: 2px solid #99ccff;
	box-shadow: -1px 0px 4px #006699;
	margin-bottom:10px;
}

.article p {
	font-size: 1em;
}

/* Accueil
--------------------*/
.site-index .article {
	float: right;
	width: 28%;
}

.site-index .article h1 {
	font-variant : small-caps;
	font-weight: bold;
	font-family: arial, sans-serif;
}

.site-index .article p {
	padding: 2px 0;
}

#image-accueil {
	text-align: center;
	padding: 10px 0;
	width: 66%;
}

#image-accueil img {
	max-width: 600px;
	width: 100%;
}

.resume {
	color: #0c80c0;
	background-color: rgba(250, 250, 250, 0.5);
	margin-top: 0.5em;
	padding: 8px;
	text-align: right;
	border: solid 1px #fff;
	border-radius: 7px;
	letter-spacing: -0.5px;
}

.resume img {
	max-width: 74px;
}

img#reseau {
	float: left;
	margin-top:7px;
}

img#question {
	float: left;
	margin-top:12px;
}

.resume h2 {
	font-size: 1.3em;
	font-weight: bold;
	color: #0c80c0;
}

.resume h3 {
	text-transform: uppercase;
}

.resume ul {
	margin: 0.5em 0 0 0;
}

/* On affiche les blocs actifs sur les onglets haut et bas de l'accueil */
.tab_content.tab_content_active {
	display: block;
}

/* Onglets haut page Accueil (News et Documentation)
---------------------------------------------------*/
/* Les classes contenant des underscores sont des classes génériques utilisées par le JS et ne doivent pas être stylisées individuellement */
/*****************************
.truc-tab.tab_nav {} => Oui
.tab_nav {} => Non
 ****************************/

#newsetdocumentation {
	color: #838282;
	margin-bottom: 3px;
}

.top-tab-nav {
	color: #8e8e8e;
	background-color: #dadada;
	background-image: linear-gradient(to bottom, #f1f1f1 0%,#f3f3f3 5%,#d6d5d5 100%);
	display: inline-block;
	padding: 4px 10px;
	cursor: pointer;
	border-radius: 7px 7px 0 0;
	border: 1px solid #fff;
	border-bottom: 0;
}

.top-tab-nav:hover {
	color: #fdb900;
	transition: color 0.3s ease-in-out 0s;
}

.top-tab-nav.tab_nav_active {
	color: #5e5e5e;
	background-color: #f4f4f4;
	background-image: linear-gradient(to bottom, rgb(208, 208, 208) 0%, rgb(244, 244, 244) 100%);
	padding-bottom: 4px;
	font-weight: bold;
	cursor: default;
}

.top-tab-content {
	background-color: #f4f4f4;
	background-image: linear-gradient(to bottom, #f4f4f4 0%,#d6d5d5 99%,#d0d0d0 100%);
	border: 1px solid #fff;
	margin-top: -1px;
	padding: 10px 10px 3px;
	border-radius: 0 7px 7px 7px;
	display: none;
}

.top-tab-content li {
	overflow: hidden;
	padding: .15em 0;
}

.top-tab-content li a {
	color: #858484;
	float: left;
	clear: both;
}

.top-tab-content li span {
	float: right;
	font-size: 0.8em;
}

.top-tab-content li a:hover {
	color: #D31141;
}

.nojs .top-tab-nav:not(.tab_nav_active) {
	display: none;
}

.all-links {
	font-size: 0.75em;
	clear: both;
	text-align: center;
}

.all-links a {
	color: #626262;
}
.all-links a:hover {
	color: #e40001;
}

/* Onglets bas page Accueil
--------------------------------------*/

#bas-accueil {
	clear: both;
}

.bloc-onglets-bas {
	color:#858484;
	float: left;
	font-size: 0.9em;
	text-transform: uppercase;
	margin-left: 35px;
	width: 280px;
	height: 107px;
	margin-bottom: 8px;
}

.fixedtitle {
	text-align: left;
}

.titre-onglets {
    font-size: 1.05em;
    font-weight: bold;
    font-family: Verdana,Geneva,Arial,sans-serif;
    color: #fff;
    background-color: #0284d4;
    background-image: linear-gradient(#0069b7 0%, #0284d4 50%, #5fabe0 100%);
    display: inline-block;
    margin: 3px;
    padding: 3px 0;
    min-width: 180px;
    text-align: center;
    border-radius: 10px;
}

/* Les classes contenant des underscores sont des classes génériques utilisées par le JS et ne doivent pas être stylisées individuellement */
/*****************************
.truc-tab.tab_nav {} => Oui
.tab_nav {} => Non
 ****************************/
 
/* Onglets navigation */
.bottom-tab-nav {
	width: 20px;
	height: 80px;
	float: left;
	padding: 0 5px;
	cursor: pointer;
}

.bottom-tab-nav.tab_nav_active {
	display: none;
}

.tab-nav-1 {
	background: url("images/1.png") no-repeat;
	background-size: 60px 80px;
}

.tab-nav-2 {
	background: url("images/2.png") no-repeat 100% 0%;
	background-size: 60px 80px;
}

.tab-nav-3 {
	background: url("images/3.png") no-repeat 100% 0%;
	background-size: 60px 80px;
}

.tab-nav-1:not(.tab_nav_active)  ~ .tab-nav-2 {
	background-position: 0 0;
}

/* Onglets contenu */
.bottom-tab-content {
	width: 220px;
	height: 80px;
	float: left;
	display: none;
}

.tab-content-inner {
	color: #666;
	width: 220px;
	height: 80px;
	float: left;
	letter-spacing: -1px;
	font-size: 0.9em;
}

.tab-content-inner h3 {
	font-size: 1.2em;
	font-family: Verdana, Geneva, Arial, sans-serif;
	margin: 25px 0 0 0;
}

.tab-content-inner a {
	color: #000;
}

.tab-content-inner a:hover {
	color: #ff0000;
	text-decoration: none;
}

.img-down {
	width: 80px;
	height: 80px;
	float: left;
}

.zechiffre {
	font-size: 25px;
	font-weight: bold;
	font-family: Arial,sans-serif;
	color: grey;
	padding-left: 2px;
	letter-spacing: 0.2px;
}

.zeimage {
	position: relative;
	display: block;
	height: 50px;
	overflow: hidden;
}

.zeimage img {
	max-width:80px;
}

.spanmasque {
	position: absolute;
	left: 0;
	top: 0;
}

.masque {
	background: #F3F3F3;
	float: right;
	height: 80px;
	padding: 0 0 0 5px;
	width: 135px;
	position: relative;
}

/* Page Downloads
--------------------*/
.site-downloads .article {
	padding-top: 24px;
	overflow: hidden;
	width: 64%;
	float:left;
}

.site-downloads .aside {
	padding-top: 24px;
	width: 28%;
	float: right;
}

.site-downloads .aside p{
	text-align: justify;
	line-height: normal;
	text-shadow: 1px 1px rgba(7, 95, 176, .1);
}

.bloc {
    color: #858484;
    background-color: #f3f3f3;
    background-image: linear-gradient(to bottom, #f3f3f3 0%,#f3f3f3 50%,#d9d9d9 100%);
    width: 43.8%;
    padding: 5px 10px;
    margin: 12px 7px;
    border: 1px solid white;
    border-radius: 7px;
    text-align: center;
    float: left;
}

.site-downloads .bloc.dubas {
	width:  auto;
	text-align: justify;
	float: none;
}

.decobloc-version {
	float: right;
	background: none no-repeat;
	margin: 0 -20px;
	width: 100px;
	height: 100px;
}

.packcomplet .decobloc-version {
	background-image : url("images/packcomplet.png");
	background-size: 100px;
}

.packmaj .decobloc-version {
	background-image : url("images/packmaj.png");
	background-size: 100px;
}

.packfr .decobloc-version {
	background-image : url("images/packfr.png");
	background-size: 100px;
}

.packphpbb .decobloc-version {
	background-image : url("images/packphpbb.png");
	background-size: 100px;
}

.ongletcouleur {
    color: #fff;
    float: left;
    position: relative;
    margin-top: -12px;
    padding: 0 10px 1px;
}

.ongletcouleur span {
    font: bold 12px arial, sans-serif;
    text-transform: uppercase;
    border-radius: 10px 10px 0 0;
    padding: 4px 8px 2px;
    line-height: 18px;
    width: 100px;
    display: block;
}

.ongletcouleur::after {
    background: url("images/onglets.png") no-repeat 0 0%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
    height: 14px;
    margin-bottom: 1px;
    width: 135px;
}

.bloc div {
	float: left;
	font-size: 12px;
	padding: 8px 0;
	text-align: left;
	width: 68%;
	min-height: 8em;
}

.packfr {
	clear: both;
}

.h2tel {
	font-family: arial,sans-serif;
	font-size: 17px;
	font-weight : bold;
}

.sstitre {
	font-size: 1.275em;
	font-weight: bold;
	font-variant: small-caps;
	text-decoration: underline;
	margin: 8px 0;
}

.bloc h2 {
	color: #858484;
}

.numbers{
	font-size: 11px;
}

.bloc div h2 + p {
	margin-bottom: 8px;
}

.bloc hr {
	color: #ffffff;
	margin-bottom: 6px;
	clear: both;
}

.bloc hr + p {
	font-weight: bold;
	margin: 0 0 0.2em;
	clear: both;
	float: none;
	text-transform: uppercase;
}

.packcomplet .ongletcouleur  span {
	background: #1888ff;
}

.packmaj .ongletcouleur  span {
	background: #7eb301;
}

.packfr .ongletcouleur  span {
	background: #e40001;
}

.packphpbb .ongletcouleur  span {
	background: #7d0996;
}

.aside h2 {
	color: #FFF;
	font-variant: small-caps;
}

/* Onglets des versions phpBB sur la page download */
.sushi-onglets {
	padding: 0 0 0 10px;
}

.sushi-onglets:after {
	content: "";
	display: table;
	clear: both;
}

.sushi-onglets li {
	font-weight: bold;
	background-color: #dbdbdb;
	background-image: linear-gradient(to bottom, #f4f4f4 0%, #d0d0d0 100%);
	margin: 1px .25em -1px 0;
	padding-bottom: 1px;
	float: left;
	position: relative;
	border: 1px solid #fff;
	border-bottom: 0;
	border-radius: 6px 6px 0 0;
	background-clip: padding-box !important;
}

.sushi-onglets li.actif {
	background-color: #f4f4f4;
	background-image: linear-gradient(to bottom, #d0d0d0 0%, #f4f4f4 100%);
}

#master-version .sushi-onglets li a {
	text-decoration: none;
}

.sushi-onglets li a {
	color: #5e5e5e;
	float: left;
	padding: 0.5em 1em;
	text-decoration: none;
	text-shadow: 1px 1px 1px #fff;
}

.sushi-onglets li.actif a {
	cursor: default;
}

.sushi-onglets li:not(.actif) a:hover {
	color: #7eb301;
	transition: color 0.3s ease-in-out 0s;
}

.sushi-contenu {
	display: none;
	padding: 1em 0 0;
	overflow: hidden;
	border: 1px solid #7FBBDB;
	border-bottom: 0;
	border-radius: 5px;
	flex-flow: row wrap;
}

#versionrow-0 {
    display: flex;
}

.sushi-onglets li:not(.actif) a:not(:hover) {
	color: #a1a1a1;
}

.sushi-onglets li.actif .marqueur, .sushi-onglets li.actif .marqueur > span {
	position: absolute;
	width: 0;
	height: 0;
	border-bottom-width: 0;
	border-top: 8px solid transparent;
	border-left: 8px dashed transparent;
	border-right: 8px dashed transparent;
	-webkit-transform: rotate(360deg);
	display: block;
}

.sushi-onglets li.actif .marqueur > span {
	border-color: #f4f4f4 transparent;
}

.sushi-onglets li.actif .marqueur {
	left: 50%;
	margin-left: -16px;
	right: auto;
	top: 18px;
	z-index: 3;
}

.nojs #master-version > ul {
	display: none;
}

.nojs #master-version > div {
	display: block;
}

/* Page Statistiques
--------------------*/
.dl-stat-bloc {
	height: 400px;
}

.website .copyright {
	display: none;
}

/* Page Partenaires
----------------------*/
.site-partners .article {
	padding: 8px 12px;
}

.site-partners .article {
	zoom: 1;
}

.site-partners .article:after {
	content: "";
	display: table;
	clear: both;
}

.site-partners .bloc {
	background: rgba(250, 250, 250, 0.6);
	height: 190px;
	width: 270px;
	margin: 11px 9px;
	padding: 10px 10px 5px;
	position: relative;
}

.partner-img img {
	float: none;
	margin: 0;
	border-radius: 4px;
}

.counter {
	font-size: 9px !important;
	position: absolute;
	right: 10px;
	bottom: -1px;
}

.disclaimer {
	font-size: 9px;
	font-weight: bold;
	color: #115098;
	background-color: #e0eeff;
	text-align: center;
	margin: 20px 0 10px;
	padding: 5px;
	border: 1px solid #6b92bd;
	border-radius: 3px;
}

/* Responsive
------------------------------------*/
@media only screen and (max-width: 1220px), only screen and (max-device-width: 1220px) {
	.website .wrap {
		margin: 0 auto;
	}
}

@media screen and (max-width: 955px) {
	.site-downloads .bloc {
		width: 43%;
	}
	.article p {
		font-size: 1.05em;
	}
}

@media screen and (max-width: 850px) {
	.site-downloads .bloc {
		width: 42%;
	}
}

@media screen and (max-width: 820px) {
	#accueil .article {
		float: none;
		width: auto;
	}
	#image-accueil {
		display: none;
	}
	#bas-accueil {
		margin-top: 1em;
	}
	.bloc-onglets-bas {
		float: none;
		margin: 0 auto 8px;
	}
	.site-downloads .article, .site-downloads .aside {
		float: left;
		width: auto;
	}
	.site-downloads .bloc {
		text-align: center;
		width: 44%;
	}
	.site-downloads .aside {
		float: left;
		width: auto;
		margin-top: 10px;
	}
}

@media screen and (max-width: 700px) {
	.site-downloads .aside {
		display: none;
	}
	.article p {
		font-size: 1.05em;
	}
}

@media screen and (max-width: 649px) {
	.website .wrap {
		padding: 0;
	}
	.site-downloads .article {
		width: auto;
	}
	.site-downloads .bloc {
		width: 100%;
	}
	.decobloc-version {
		display: none;
	}
	.bloc div {
		clear: both;
		padding: 2px 0;
		min-height: auto;
	}
}

@media screen and (max-width: 340px) {
	.sushi-onglets li a {
		padding: 0.5em;
	}
}