/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ------------------------------ ORIENTATION PORTRAIT ------------------------------ */
/* __________________________________________________________________________________ */

@media (max-width: 800px) and (orientation:portrait) {

	/* div logo */
	#logo {
		width:80%;
		margin-bottom:12px;
	}

	/* formulaire */
	#login_form {
		width:80%;
	}


}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ------------------------------ ORIENTATION PAYSAGE ------------------------------- */
/* __________________________________________________________________________________ */

@media (max-width: 800px) and (orientation:landscape) {

	/* div logo */
	#logo {
		width:50%;
		margin-bottom:4px;
	}

	/* formulaire */
	#login_form {
		width:50%;
	}


}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ------------------------------------- GLOBAL ------------------------------------- */
/* __________________________________________________________________________________ */

@media (max-width: 800px) {

/* ------------------------------------- GENERAL */

	/* body */
	body {
		height:100%;
	}

	/* header */
	header {
		height:0;
		margin:0;
		padding:0;
	}

	/* section */
	section {
		height:100%;
		width:100%;
		display:table;
	}

	/* wrapper */
	#wrapper {
		display:table-cell;
		vertical-align:middle;
		text-align:center;
	}

/* ------------------------------------- LOGO */

	/* div logo */
	#logo {
		margin:auto;
		padding:0;
	}
	#logo img {
		margin:0;
		width:100%;
		height:auto;
	}

/* ------------------------------------- MESSAGE ERREUR */

	/* message erreur conexion */
	#login_fail {
		display:none;
		width: 335px;
		margin: auto;
	}

/* ------------------------------------- FORMULAIRE */

	/* formulaire */
	#login_form {
		margin:auto;
		padding:0;
		text-align:center;
	}

	/* labels en block */
	label {
		display:block;
		font-size:1.25em;
		margin:6px;
	}

	/* inputs */
	input[type="text"], 
	input[type="password"] {
		padding:10px;
		width:80%;
		border: 1px solid #DDDDDD;
		box-shadow: none;
		border-radius: 0;
	}

	/* bouton */
	#btn_login {
		display: block;
		padding: 10px 20px;
		margin: auto;
		margin-top: 12px;
		margin-bottom: 6px;
		border: 1px solid #336AB2;
		border-radius: 0;
		color: #336AB2;
		background: white;
		background-image: none;
	}

}