/**
* Beta classes
*
* @author splitfire - http://splitfire.fr
* @version 1.0
*
*/

/* Body
-------*/

html {height:100%;font-size: 100%;}
body {height:100%;font-size: $fontSize; font-family:Helvetica,"Arial",sans-serif; }

/* Wrapper global du Header
-----------------------------------*/
.header_wrapper
{
	width: 100%;
	height: $headerHeight;
	position: fixed;
	background-color: #fafafa;
	//z-index: 19;
	z-index: 1001;
	@include box-shadow(0 3px 3px rgba(0, 0, 0, 0.1));
}


/* Wrapper global du Header
-----------------------------------*/
.header_wrapper
{
	width: 100%;
	height: $headerHeight;
	background-color: $headerColor;
	position: fixed;
	//z-index: 19;
	z-index: 1001;
	@include box-shadow(0 3px 3px rgba(0, 0, 0, 0.1));

}


.header
{
	height: $headerHeight;
	color: #666666;
	clear: both;
	@include after();
	
	
	//@test
	color:white;
	
	
	/* logo
	--------*/
	& .header_logo
	{
		float: left;
		height:	$headerHeight;
		margin:0 0 0 21px;
		line-height: $headerHeight;
		font-family: $logoFont;
		font-size: 1.8em;
		text-transform: uppercase;
		text-decoration: none;
		@include mq(phone){font-size: 1.4em; }
		@include mq(false, tablet){ margin:0 0 0 1%;}	
	
	}
	& .logo
	{
		display: block;
		text-decoration: none;
		color: black;
		outline: none;
	}
	/* Premiere partie du logo d'une couleur particuliere
	-----------------------------------------------------*/
	& .header_court
	{
		color:white;
	}
	/* Deuxieme partie du logo d'une couleur particuliere
	-----------------------------------------------------*/
	& .header_app
	{
		color:white;
	}
	/* Troisieme partie du logo d'une couleur particuliere
	-----------------------------------------------------*/
	& .header_beta
	{
		color: $betaColor;
	}
	& .header_btn
	{
		float: right;
		height:	$headerHeight;
		line-height: $headerHeight;
	}
	& .icon-profile
	{
		color: black;
	}
}

/* Container
-------------*/

.container
{
	position: relative;
	width: 100%;
	padding:45px 0 0 0;
}

.beta-landing
{
	height: 100%;
	background-image:image-url('beta/beta.jpg');
	background-size: cover;
	background-repeat: no-repeat;
}


/* Content
-----------*/

#content
{
	width: 100%;
	max-width: 100%;
	padding-bottom: 16px;
}


/* Box de connexion utilisé:
	- pour s'authentifier
	- mot de passe perdu
	- réinitialisation du mot de passe
---------------------------------------*/

.login
{
	display: table;
	table-layout: fixed;
	width: $widthContainer/3;
	height: 100%;
	margin:0 auto;
	vertical-align: middle;
}
	
.login_wrapper
{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
.login-lost
{
	@extend .login;
	width: $widthContainer;
	@include mq(false, tablet){width: 100%;}

}

.auth_login
{
	@include background-color-rgba (white,.8);
	padding:40px;
	border-radius:8px;
	& > h2
	{
		margin-top:0;
	}
}

/* Footer
------------*/
.footer
{
	background-color: #FAFAFA;
	@include box-shadow (0 -3px 3px rgba(0, 0, 0, 0.1));
	
	& .footer_wrapper
	{
		width:$widthContainer;
		height:70px;
		line-height: 70px;
		margin: 0 auto; 
		font-size:.9em;
		@include mq(false, tablet)
		{
			width: 100%;
			height: auto; 
			line-height: normal;
		} 
		@include after();
		& a
		{
			display:inline-block; 
			margin:0 0 0 15px;
			text-decoration: none;
			@include mq(false, tablet)
			{
				width: 49%;
				@include box-sizing(border-box);
				padding:10px;
				text-align: center;
				margin:0;
			}
			&:hover
			{
				text-decoration: underline;
			}
		}
	}
}