/*
*
*  Positionnement global et mise en page
*  -------------------------------------
*  1. Propriétés globales
*  2. MENU
*  3. CONTAINER
*  4. msgBox
*
*/








/******************************/
/*** 1. Propriétés globales ***/
/******************************/
*{ /* on supprime le margin/padding par défaut */
	margin : 0;
	padding: 0;
}


/* on initialise le body avec les valeurs par défaut [compatibilité] */
body{
	/* position */
	display: block;
	position: absolute;
		top   : 0;
		left  : 0;
		width : 100%;
		height: 100%;

	/* background */
	background: #fff;

	/* overflow */
	overflow-x: hidden;           /* empêche la barre horizontale de scroll [précaution] */

	/* foreground */
	font: 18px 'Open Sans', 'Helvetica', 'Arial', 'sans-serif';
	font-size: 16px;
}







/***************/
/*** 2. MENU ***/
/***************/
#MENU{
	/* position */
	display: flex;
	position: fixed;
		top   : 0;
		left  : 0;
		width : 5.5em;
		height: 100%;

	/* flex */
	flex-direction : column;
	justify-content: flex-start;
	flex-wrap: nowrap; /* default, une seule colonne */


	/* background */
	/*background: #424c54 url(https://www.iut-tlse3.fr/static/ui/v1/icons/iut/iut.png) bottom .9em center no-repeat;*/
	background: #424c54;

	/* foreground */
	/*font-size: 1.7vh;*/

	/* z axis */
	z-index: 2;

	/* list */
	list-style-type: none;
}





/********************/
/*** 3. CONTAINER ***/
/********************/
#CONTAINER{
	/* position */
	display: block;
	position: absolute;
		top       : 0;
		left      : 5.5em;
		width     : calc( 100% - 5.5em );
		min-height: 100%;

	/* background */
	background: #fff;

	/* foreground */
	/*font-size: 1.7vh;*/

	/* border < inherit < hgroup */
	border-color: #fff;

	/* z axis */
	z-index: 0;
}


/*****************/
/*** 4. MSGBOX ***/
/*****************/
#MSGBOX{
	/* position */
	display: block;
	position: fixed;
		top: calc( 100% - 2*1em - 1em - 1em ); /* 100% - padding - taille - marge */
		left: 30%;
		width: 40%;
		height: 1em;
	padding: 1em;

	/* border */
	border-radius: 3px;
	border: 1px solid transparent;

	/* background */
	background-color: #f64b2f;
	
	/* foreground */
	color: #fff;
	text-shadow: 1px 1px 1px #d33e27;
	line-height: 1em;

	transition: all 0s ease 0s, top .3s ease-in-out;
	-moz-transition: all 0s ease 0s, top .3s ease-in-out;
	-webkit-transition: all 0s ease 0s, top .3s ease-in-out;
	-ms-transition: all 0s ease 0s, top .3s ease-in-out;
	-o-transition: all 0s ease 0s, top .3s ease-in-out;
}

/* LES DIFFERENTES CLASSES */

/* validation ou réussite */
#MSGBOX.success{
	border-color: #689525;
	background-color: #7eb62e;
	text-shadow: 1px 1px 1px #689525;
}

/* information */
#MSGBOX.info{
	border-color: #278fd0;
	background-color: #2fa9f6;
	text-shadow: 1px 1px 1px #278fd0;
}

/* avertissement */
#MSGBOX.warning{
	border-color: #d87620;
	background-color: #f68725;
	text-shadow: 1px 1px 1px #d87620;
}

/* notice */
#MSGBOX.error{
	border-color: #d33e27;
	background-color: #f64b2f;
	text-shadow: 1px 1px 1px #d33e27;
}

/* LORSQUE PAS ACTIVE */
#MSGBOX:not( [class] ), /* si n'a pas de classe */
#MSGBOX[class='']{      /* ou qu'elle est vide */
	top: 100%;

	transition: all 0s ease .3s, top .3s ease-in-out;
	-moz-transition: all 0s ease .3s, top .3s ease-in-out;
	-webkit-transition: all 0s ease .3s, top .3s ease-in-out;
	-ms-transition: all 0s ease .3s, top .3s ease-in-out;
	-o-transition: all 0s ease .3s, top .3s ease-in-out;
}