/**
 * http://paletton.com/#uid=13A0u0kmuvOcIMPi8DgrvtKtUnq
 */


/* ********************************************************************************** */
/*                         DISPOSITION DE PARTIES PRINCIPALES                         */
/* ********************************************************************************** */


html, body {

	font-family: sans-serif;
	margin: 0;
	padding: 0;

}

#mw-wrapper {

	max-width: 70em;
	margin: 0 auto;

	position: relative;

}


/* ********************************************************************************** */
/*                           BARRES DE NAVIGATION LATERALES                           */
/* ********************************************************************************** */


/* Positions respectives */

.left-navigation {

	position: absolute;
	left: -300px;

}

.right-navigation {

	position: absolute;
	right: -150px;

}

/* Emplacement vertical fixe (cf. classe 'header') */

#mw-navigation > div {

	position: fixed;

	top: 160px;

}

/* Affichage / retrait des listes */

#mw-navigation ul {

	text-align: left;
	margin: 0;
	margin-top: 50px;
	border: 1px solid transparent;

	padding-left: 4px;
	padding-top: 8px;
	padding-right: 4px;
	padding-bottom: 8px;

}

#mw-navigation ul:hover {

	background-color: #fff;
	border-color: #ccc;
	border-radius: 2px;
	box-shadow: 2px 2px 2px #999;

}

#mw-navigation ul li {

	padding: 0px;
	padding-top: 2px;
	padding-bottom: 2px;

	margin: 0px;
	list-style: none;
	font-size: 0.875em;

	opacity: 0.4;

	/* Les images ne doivent pas être tronquées verticalement */
	line-height: 32px;

}

#mw-navigation ul:hover li {

	opacity: 0.8;

}

#mw-navigation ul li a {

	display: block;

	/* Fait de la place pour les images */
	padding-left: 40px;

	background-position: left center;
	background-repeat: no-repeat;

	white-space: nowrap;

}

#mw-navigation ul span {

	visibility: hidden;

}

#mw-navigation ul:hover span {

	visibility: visible;

}

/* Images associées par défaut */

#pt-userpage a {

	/**
	 * "User" par Philip Gwynne
	 * https://thenounproject.com/term/user/14219/
	 */
	background-image: url('identity.png');

}

#pt-mytalk a {

	/**
	 * "Chat" par Jaclyne Ooi
	 * https://thenounproject.com/term/chat/26692/
	 */
	background-image: url('chat.png');

}

#pt-preferences a {

	/**
	 * "Configure" par Gonzalo Bravo
	 * https://thenounproject.com/term/configure/63054/
	 */
	background-image: url('preferences.png');

}

#pt-watchlist a {

	/**
	 * "Eye" par Casper Jensen
	 * https://thenounproject.com/term/eye/104152/
	 */
	background-image: url('watchlist.png');

}

#pt-mycontris a {

	/**
	 * "Share" par P.J. Onori
	 * https://thenounproject.com/term/share/2886/
	 */
	background-image: url('contribs.png');

}

#pt-logout a {

	/**
	 * "Power" par Michela Tannoia
	 * https://thenounproject.com/term/power/25339/
	 */
	background-image: url('logout.png');

}

#ca-edit a {

	/**
	 * "Document" par Cody Lawson
	 * https://thenounproject.com/term/document/4502/
	 */
	background-image: url('page.png');

}

#ca-history a {

	/**
	 * "History" par Joe Mortell
	 * https://thenounproject.com/term/history/18126/
	 */
	background-image: url('history.png');

}


#ca-delete a {

	/**
	 * "Trash Can" par Dima Kolchan
	 * https://thenounproject.com/term/trash-can/8119/
	 */
	background-image: url('delete.png');

}

#ca-move a {

	/**
	 * "Rename" par Icons8
	 * https://thenounproject.com/term/rename/61456/
	 */
	background-image: url('rename.png');

}

#ca-protect a {

	/**
	 * "Shield" par Charlene Chen
	 * https://thenounproject.com/term/shield/7005/
	 */
	background-image: url('protect.png');

}


/* ********************************************************************************** */
/*                             BARRE SUPERIEURE DES PAGES                             */
/* ********************************************************************************** */


/* Barre supérieure rétractable */

header {

	background: rgb(58,110,165);

	width: 100%;
	min-width: 1650px;
	height: 170px;

	/**
	  * Pour une image de taille 200px, si on a header.height à 170px,
	  * il reste ~30px à compenser.
	  *
	  * On laisse beaucoup de marge pour que le texte du contenu de la
	  * ne colle pas l'image de trop près.
	  *
	  * La taille totale doit être reportée dans 'mw-wrapper'.
	  */

	margin-bottom: 60px;

}

header.sticky {

	position: fixed;
	top: 0px;

	height: 50px;

	margin-bottom: 0px;

	z-index: 8000;

}


header ~ div.extender {

	display: none;

}

header.sticky ~ div.extender {

	display: block;

	/**
	 * On doit compenser les hauteurs ici.
	 *
	 * Par exemple : (170 + 60) = (50 + x)
	 *						180 = x
	 */

	height: 180px;

}

header a, header a:hover, header a:focus {

	text-deoration: none;
	color: black;
	opacity: 0.8;

}


/* ********************************************************************************** */
/*                                LOGO EN HAUT DU SITE                                */
/* ********************************************************************************** */


#p-logo {

	float: left;
	text-align: right;

	margin-left: 20px;

	width: 620px;

	position: relative;
	top: 111px;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);

	opacity: 1.0;

}

header #p-logo {

	top: 111px;

}

header #p-logo img.big {

	display: initial;

}

header #p-logo img.small {

	display: none;

}

header.sticky #p-logo {

	top: 26px;

}

header.sticky #p-logo img.big {

	display: none;

}

header.sticky #p-logo img.small {

	display: initial;

	height: 47px;

}


/* ********************************************************************************** */
/*                           BARRE DE NAVIGATION SUPERIEURE                           */
/* ********************************************************************************** */


/* Barre supérieure de menu */
#p-navigation {

	display:inline-block;

	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);

}

#p-navigation ul {

	list-style-type: none;
	margin: 0;

}

#p-navigation ul li {

	display: inline-block;
	margin-left: 1em;
	margin-right: 2em;

	text-align: center;

}

#p-navigation a {

	color: white;
	opacity: 0.7;

	font-weight: bold;

	text-decoration: none;

}

#p-navigation a:hover, #p-navigation a:focus {

	opacity: 1.0;

}


/* On cache certains en-têtes */
#mw-navigation h2, #p-navigation h3, #p-search h3 {

	display: none;

}


/* Conteneur final */

.link_icon span {

	white-space: nowrap;

}

header .link_icon {

	visibility: visible;

	padding-top: 70px;

	background-position: center top;
	background-repeat: no-repeat;

}

header.sticky .link_icon {

	padding-top: 0px;

	background-image: none;

}


/* Eléments du menu de navigation supérieur */

header:not([class~=sticky]) #n-screenshots-desc .link_icon {

	/**
	 * "Camera" par Haitham Almayman
	 * https://thenounproject.com/term/camera/76991/
	 */
	background-image: url('screenshots.png');

}

header:not([class~=sticky]) #n-documentation-desc .link_icon {

	/**
	 * "Books" par Les vieux garçons
	 * https://thenounproject.com/term/books/51607/
	 */
	background-image: url('documentation.png');

}

header:not([class~=sticky]) #n-download-desc .link_icon {

	/**
	 * "Download" par Alexander Bickov
	 * https://thenounproject.com/term/download/29328/
	 */
	background-image: url('download.png');

}

header:not([class~=sticky]) #n-activity-desc .link_icon {

	/**
	 * "Write" par Lemon Liu
	 * https://thenounproject.com/term/write/21211/
	 */
	background-image: url('blog.png');

}

header:not([class~=sticky]) #n-contact-desc .link_icon {

	/**
	 * "Contact" par Icons8
	 * https://thenounproject.com/term/contact/50339/
	 */
	background-image: url('contact.png');

}


/* ********************************************************************************** */
/*                         SOUS-MENUS DE LA PARTIE SUPERIEURE                         */
/* ********************************************************************************** */


#myMenu {

	z-index: 100000;

	position: fixed;

	text-align: left;
	padding: 8px;

	padding-left: 20px;
	padding-right: 20px;

}

#myMenu a {

	display: block;

	color: #205c9a;
	opacity: 0.9;

	font-weight: bold;

	text-decoration: none;

	line-height: 160%;

}

#myMenu a:hover {

	color: white;
	opacity: 1.0;

}


/* Cf. http://www.cssarrowplease.com/ */

.menu_arrow_box {

	background: #88afd8;
	border: 1px solid #fff;

	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;

}

.menu_arrow_box:after, .menu_arrow_box:before {

	bottom: 100%;
	left: 50%;

	border: solid transparent;

	content: " ";

	height: 0;
	width: 0;

	position: absolute;
	pointer-events: none;

}

.menu_arrow_box:after {

	border-color: rgba(0, 0, 0, 0);
	border-bottom-color: #88afd8;

	border-width: 13px;
	margin-left: -13px;

}

.menu_arrow_box:before {

	border-color: rgba(0, 0, 0, 0);
	border-bottom-color: #fff;

	border-width: 15px;
	margin-left: -15px;

}


/* ********************************************************************************** */
/*                                    PIED DE PAGE                                    */
/* ********************************************************************************** */


#mw-footer {

	margin-top: 23px;
	padding: 0.6em;
	padding-bottom: 0.4em;

	border: 1px solid rgb(32, 92, 154);
	border-top-left-radius: 25px;
	border-top-right-radius: 25px;

	background-color: rgb(58,110,165);

	display:table;
	width: 100%;

	position:absolute;
	bottom:0;

}

#mw-footer ul {

	list-style-type: none;
	margin: 0;

}

#mw-footer ul li {

	display: inline-block;
	margin-right: 1em;

}

#mw-footer ul#poweredby {

	display:table-cell;
	vertical-align: middle;
	text-align: left;

}

#mw-footer ul#lastmod {

	display:table-cell;
	vertical-align: middle;
	text-align: center;

	color: white;
	opacity: 0.7;

}

#mw-footer ul#links {

	display:table-cell;
	vertical-align: middle;
	text-align: right;

}

/* On colle le pied de page toujours en bas */

html, body {

	height: 100%;

}

#mw-wrapper {

	/* 230px = header[.sticky].height + div.extender.height */
	min-height: calc(100% - 230px);

}

#mw-footer {

	position:absolute;
	bottom:0;

}

.mw-body {

	/**
	  * On reste un espace pour le pied de page, avec marge :
	  *
	  * 69px + 2em ~= #mw-footer.height + marge
	  */
	padding-bottom: calc(69px + 2em);

}


/* ********************************************************************************** */
/*                                  PARTIES COMMUNES                                  */
/* ********************************************************************************** */


/* Sommaire */

.toc {

	/*background: #88afd8;*/
	border: 2px solid #3a6ea5;
	border: 2px solid #88afd8;
	border-radius: 8px;

	margin: 20px;

	padding-left: 25px;
	padding-right: 25px;
	padding-bottom: 8px;

	float: right;
	display: table;

}

.toctoggle {

	display: none;

}

.toclevel-1 {

	margin-top: 10px;

	list-style-type: square;

}

body:not(.main_page) *:not(#toctitle):not(.h2) > h2 {

	position: relative;
	left: -30px;

	padding-left: 30px;
	padding-right: 30px;

	border-bottom: 2px solid rgb(58, 110, 165);

	display: inline-block;
	margin: 0px;
	margin-top: 20px;

	clear: both;

}

pre {

	border: 2px dashed;
	border-left: 8px solid;
	border-color: rgb(58, 110, 165);

	padding: 10px;
	padding-right: 50px;

	margin-left: 40px;

	font-size: 120%;

	display: table;
	white-space: pre-wrap;

}

a {

	text-decoration: none;

}


/**
 * Par défaut, une image centrée reste à gauche...
 * On force donc un comportement correct.
 *
 * Le code permettant de valider le résultat attendu est du	 genre :
 *
 *	  [[File:XXX.png|center]]
 *
 */
div.center {

	text-align: center;

}