/**
* Layout classes
*
* @date 	26/04/2013
* @author splitfire - http://splitfire.fr
* @version 1.0
*
*/

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

html {height:100%;font-size:100%}
body 
{
	height:100%;	
	font-size: $fontSize;
	font-family:$defaultFont 
}

/* Wrapper global du Header
-----------------------------------*/
.header_wrapper
{
	width: 100%;
	height: $headerHeight;
	background-color: $headerColor;
	position: fixed;
	//z-index: 19;
	z-index: 1001;
	box-shadow : 0 3px 3px rgba(0, 0, 0, 0.1);
	@include mq($to:phone) 
	{
		//Postionnement par defaut du header en mobile
		margin:0 0 0 0;	
		padding:0 0 0 0;
		//postionnement du header lorsque le mneu est ouvert
		.menu-open &
		{
			margin:0 0 0 ($menuOpen - 10px);	
			padding:0 0 0 10px;
		}		
	}
}
.header
{
	//height: $headerHeight;
	@include after();
	
	
	//@test
	//color:white;
	
	
	/* logo
	--------*/
	& .header_logo
	{
		float: left;
		margin:0 0 0 1%;
		line-height: $headerHeight;
		font-size: 1.8em;
		text-transform: uppercase;
		text-decoration: none;
		@include mq($to:phone) {display:inline-block}
	
	}
	& .logo
	{
		display: block;
		text-decoration: none;
		color: #000;
		outline: none;
		@include mq($to:phone) {display:inline-block}

	}
	& .icon-menu 
	{
		vertical-align: middle;
	}
	/* Chaque El du Menu, dans le cas présent chaque li
	-----------------------------------------------------*/
	& .header_item
	{
		float: right;
		display: block;
		
		/* El activé
		-------------*/
		&.active
		{
			background-color:#FDFDFD;
			color:#5A5A5A;
		}
	}
	/* Uniquement pour le header front  des btn connexion/inscription
	-----------------------------------------------------------------*/
	& .header_btn
	{
		float: right;
		line-height: $headerHeight;
	}

		
	/* Chaque El item du menu 
	--------------------------*/
	& .header_item--el
	{
		display: block;
		position: relative;
		line-height:$headerHeight;
		padding:0 8px;
		color: #fff;
		text-decoration: none;
		&.active
		{
			color:#5A5A5A;
		}
		& > img
		{
			vertical-align: middle;
		}
	}
	
	/* Fil de couleur au dessus des items
	-----------------------------------------*/
	/*& .header_loading
	{
		display: inline-block;
		width: 100%;
		position: absolute;
		top:0;
		left:0;
		height: 3px;
		
		&.features
		{
			background-color:#dd4b39;
		}
		&.offer
		{
			background-color:#4D90FE;
		}
		&.try_free
		{
			background-color:#64B549;
		}
		&.logo
		{
			background-color:#D3D3D3;
		}
		&.connexion
		{
			background-color:#5A5A5A;
		}
	}*/
	
	/* Formulaire de connexion en mode dropdown
	--------------------------------------------*/
	/*& .header_form
	{
		background-color:#FAFAFA;
		padding: 40px 20px 20px;
		@include mq(phone)
		{
			@include box-sizing(border-box);
			padding:40px 5px 20px;
		}
	}*/
	
	/* Style du dropdown
	----------------------*/
	& .dropdown--target
	{
		background-color: #fff;
		
		& a
		{
			text-decoration: none;
			
			&:hover
			{
				text-decoration: underline;
			}
		}
	}
	
	/* Dropdwon du menu dans la partie App
	--------------------------------------------------*/
	& .app--dropdown
	{
		position:relative;
		@include mq($to:phone){position:static};
		border-left: 1px solid transparent;
		& .dropdown-item
		{
			//padding: 0 17px;
		}
		
		& .app--dropdown_target
		{
			border-left: 1px solid #C1C1C1;
			border-bottom: 1px solid #C1C1C1;
			right: 0;
			min-width:100%;
			
		}
		& .dropdown-link
		{
			display: block;
			padding:14.5px;
			position: relative;
			color: #5A5A5A;
			text-align: center;
			white-space: nowrap;
			&:hover:before,
			&.active:before
			{
				display: block;
			    width: 6px;
			    height: 100%;
			    position: absolute;
			    background-color: $toolbarActionColor;
			    content: "";
			    left: 0;
			    top: 0;
			}
			&:hover
			{
				text-decoration: none;
			}			
		}
		
		/* Partie "dropdwon" active
		------------------------------*/
		&.active
		{
			border-left: 1px solid #C1C1C1;
			//Surcharge de la couleur de base de l'icon du header pour le dropdown
			& [class*="icon-"]
			{
				color:$darkColor;
			}
		}
	}
	
	/* Gestion des elements de navigation hors connexion en rwd 
	------------------------------------------------------------*/
	& .navigation--dropdown
	{
		width: 100%;
		background-color: #fff;
		right: 0;
		top: 45px;
	}
}

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

.container
{
	position: relative;
	width: 100%;
	padding:45px 0 0 0;
}
.container_child
{
	height: 100%;
}
// container principale	
.container_wrapper
{
	width: $widthContainer;
	margin: 0 auto;
	@include mq($to:desktop){ width: 100%}
}

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

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