sid/css/layout.css

/*
*
*  Positionnement global et mise en page
*  -------------------------------------
*  1. Propriétés globales
*  2. HEADER
*  3. MENU
*  4. AUTH(entification)
*  5. CONTAINER
*  6. msgBox
*
*/








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

a{ text-decoration: none; color: inherit; }

/* 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: #ecf0f1;
	background: url(../src/wallpaper.jpg) top left no-repeat;
	background-size: cover;

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

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



#WRAPPER{
	/* position */
	display: block;
	position: absolute;
		width: calc( 100% - 2*100px );
		min-height: calc( 100% - 2*100px );
	margin: 100px;

	box-shadow: 0 0 5px #777;
}



	#HEADER{
		/* position */
		display: block;
		position: absolute;
			top: 0;
			left: 11em;
			width: calc( 100% - 11em );
			height: 5em;

		/* border */
		border-bottom: 1px solid #e5e5e5;

		/* background */
		background-color: #fff;

		/* Z */
		z-index: 9;
	}


	#SUBHEADER{
		/* position */
		display: block;
		position: absolute;
			top: 5em;
			left: 11em;
			width: calc( 100% - 11em );
			height: 10em;

		/* background */
		background-color: #fff;

		/* Z */
		z-index: 8;
	}


	#MENU{
		/* position */
		display: flex;
		position: absolute;
			top: 0;
			left: 0;
			width: 11em;
			height: 100%;

		/* flex */
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;

		/* background */
		background-color: #34495e;
	
		/* Z */
		z-index: 10;

	}


	#CONTAINER{
		/* position */
		display: block;
		position: relative;
			margin-top: 5em;
			margin-left: 11em;
			width: calc( 100% - 11em );
			min-height: calc( 100% - 5em );

		/* background */
		background-color: #ecf0f1;

		/* Z */
		z-index: 7;
	}