/*      
        
     -o-
    -ms-
   -moz-
 -khtml-
-webkit-
*/
//@import 'default.less';
@import 'fonctions.less';

@font-face {
    font-family: 'SegoeUINormal';
    src: url('fonts/segoeui-webfont.eot');
    src: url('fonts/segoeui-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/segoeui-webfont.woff') format('woff'),
         url('fonts/segoeui-webfont.ttf') format('truetype'),
         url('fonts/segoeui-webfont.svg#SegoeUINormal') format('svg');
    font-weight: normal;
    font-style: normal;
}

html.loading, html.loading *{
	cursor:progress;
}
html
{
	background:#444;
	color:white;
	font-size:11px;
	font-family:arial,sans-serif;
}
html,body
{
	margin:0;
	padding:0;
	width:100%;
	height:100%;
	overflow:hidden;
}
img
{
	border:none;
}
#tunnel
{
	.position();
	background-color:black;
	z-index:3;
	text-align:center;
	>div
	{
		.position(50%,0,auto,0);
		
		>div
		{
			height:200px;
			>#tunnel_cadre
			{
				width:600px;
				height:100%;
				position:relative;
				top:-50%;
				margin:0 auto;
				
				opacity:0;
				
				
				
				
				.transition(all,5s,cubic-bezier(0.25,1,0.25,1),1s);
				&.active
				{
					opacity:1;
				}
				>#tunnel_cadre_in
				{
					.transform(scale(1) rotate(0deg));
					.position;
				}
				&.closed>#tunnel_cadre_in
				{
					
					.transition(all,2s,cubic-bezier(0.1,0,0.1,0),0s);
					pointer-events:none;
				}
				.logo
				{
				}
				#entree
				{
					text-transform:uppercase;
					font-size:13px;
					margin-top:20px;
					cursor:pointer;
				}
			}
		}
	}
	&.closed
	{
		opacity:0;
		visibility:hidden;
		.transition(all,1s,ease-out,1s);
		pointer-events:none;
	}
}
footer
{
	.offset(10px,10px,4);
	z-index:2;
	a
	{
		font-size:11px;
		text-decoration:none;
		color:white;
	}
	img
	{
		vertical-align:middle;
	}
}
#fond
{
	image-rendering: -moz-crisp-edges;
	.position;
	background-color:black;
	>.images
	{
		.position;
		>div
		{
			.position;
			background-position:50% 50%;
			background-repeat:no-repeat;
		}
	}
}
h1
{
	display:none;
}

#bars
{
	//variables
	@menu_margin:10px;
	@menu_height:30px;
	@line_height:20px;
	@marge_texte:15px;
	@bar_height:@menu_height+@marge_texte*2+(@line_height*7)+3;
	@bar_width:200px;
	@bar_left:150px;
	@corps_left:@bar_left+@bar_width;
	@logo_height:120px;
	@top:@bar_height+120px;
	@content_margin:50px;
	.position(@logo_height,0,@bar_height,0);
	z-index:1;
	//overflow:hidden;
	#bar_h
	{
		.position(-@logo_height,auto,-@bar_height,@bar_left);
		z-index:1;
		width:@bar_width;
		.background-color(rgba(0,0,0,0.7));
	}
	#bar_v
	{
		position:absolute;
		z-index:2;
		width:100%;
		/*bottom:-@top;
		bottom:50%;
		bottom:0;*/
		top:0;
		height:@bar_height;
		.background-color(rgba(0,0,0,.7));
		>#logo
		{
			.offset(@bar_left,0);
			width:@bar_width;
			>div
			{
				.position(auto,0,10px,0);
				text-align:center;
				
			}
		}
		>#rosace
		{
			.position(@menu_height,auto,0,@bar_left);
			width:@bar_width;
			background:~`"url(styles/images/rosace.png?"+parseInt("@{bar_width}")*1.5+"/"+parseInt("@{bar_height}")*1.5+"/r)"`;
			background-image:url("images/rosace.png?300/300/r");
			background-position:0% 0%;
			background-repeat:no-repeat;
		}
		>#corps
		{
			>#menu
			{
				white-space:nowrap;
				.position(0,0,auto,0);
				padding-left:@corps_left - @menu_margin + @content_margin;
				height:@menu_height;
				line-height:@menu_height;
				background:black;
				ul,li
				{
					padding:0;
					margin:0;
				}
				ul
				{
					list-style:none;
				}
				li
				{
					position:relative;
					.inline-block;
					margin:0 @menu_margin;
					&:after
					{
						display:block;
						position:absolute;
						content:"+";
						left:-@menu_margin;
						margin-left:-4px;
						top:0;
					}
					&:first-child:after
					{
						display:none;
					}
				}
				a
				{
					text-decoration:none;
					text-transform:uppercase;
					font-size:13px;
					color:#919191;
					&.active
					{
						color:white;
					}
				}
			}
			>#page_wrap
			{
				.position(@menu_height,auto,0px,@corps_left);
				width:575px;
				padding-left:@content_margin;
				font-family:SegoeUINormal;
				//overflow-y:auto;
				padding-right:20px;
				color:#ccc;
				article
				{
					display:block;
					font-size:13px;
					line-height:@line_height;
					margin:@marge_texte 0;
					text-align:justify;
				}
				.col>article
				{
					.inline-block;
					width:50%;
					vertical-align:middle;
				}
				a
				{
					color:#919191;
					text-decoration:none;
					&:hover
					{
						border-bottom:1px dotted #919191;
					}
					&.doc
					{
						text-transform:uppercase;
						color:white;
					}
				}
			}
		}
	}
}