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: #fff;

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

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







/*****************/
/*** 2. HEADER ***/
/*****************/
#HEADER{
	/* position */
	display: flex;
	position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 48px;

	/* flex (as container) */
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;

	/* background */
	background: #1d1d1d;

	/* foreground */
	font-size: 12px;
}





/***************/
/*** 3. MENU ***/
/***************/
#HEADER #MENU{
	/* position */
	display: flex;
	height: 100%;

	/* flex (as container) */
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;

}



/***************/
/*** 4. AUTH ***/
/***************/
#AUTH_FILTER{
	/* position */
	/*display: block;*/ display: none;
	position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

	/* background */
	background: rgba(0,0,0,.2);

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

#AUTH_FILTER.active{ display: block; }

#AUTH{
	/* position */
	/*display: block;*/ display: none;
	position: fixed;
		top: 30%;
		left: calc( 50% - 500px/2 );
		width: 500px;

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

#AUTH_FILTER.active + #AUTH{ display: block; }

/* tout les INPUT */
#AUTH input{
	/* position */
	display: block;
	position: relative;
		top: 0;
		left: 25%;
		width: calc( 50% - 2*.8em );
	margin-bottom: 2em;
	padding: .8em;

	/* border */
	border-radius: 5px;
	border: 1px solid #A1A1A1; 

	/* foreground */
	font-family: inherit;

	transition: .2s ease-in-out;
	-moz-transition: .2s ease-in-out;
	-webkit-transition: .2s ease-in-out;
	-ms-transition: .2s ease-in-out;
	-o-transition: .2s ease-in-out;
}

/* INPUT text/password */
#AUTH input[type=text]:focus,
#AUTH input[type=password]:focus{
	border-color: #21a4a8;
	box-shadow: 0 0 3px #2bccd4;
}

/* SUBMIT */
#AUTH input[type=submit]{
	/* position */
	width: 50%;

	/* foreground */
	color: #fff;
	font-weight: bold;

	/* background */
	background-color: #279cea;

	/* xTra */
	cursor: pointer;
}

#AUTH input[type=submit]:hover{
	background-color: #2494de;
}



/********************/
/*** 5. CONTAINER ***/
/********************/
#CONTAINER{
}


/*****************/
/*** 6. MSGBOX ***/
/*****************/
#MSGBOX{
}