/* Orchestre de Paris CSS */
/* Author: H.T. */

html, body { height: 100%; width: 100%; margin: 0;}

a { text-decoration: none; color: #FFF; }

img{ border: none; padding:0; margin: 0; }

/* #menu { background: #42474A; width: 60px; z-index:2; position: absolute; min-height: 100%; } */
#menu {
	position: fixed;
	background: none repeat scroll 0% 0% #42474A;
	top: 0px;
	bottom: 0px;
	height: 100%;
	width: 60px;
	left: 0px;
	z-index: 2;
	/*display: none;*/
}

#menu ul { 
	padding:0; 
	margin: 0;
	}



#menu ul li a.menuLink {
    position: absolute;
    display: block;
    width: 60px;
    height: 60px;
}
#menu #instrument{
	margin-top:10px;
	margin-left:10px;	
	}
/*instrument*/

#menu .menuText { height: 260px; width: 380px; margin:0 auto; margin-left: 60px; }
#menu .menuText img { vertical-align:middle; }

/* effet de transition */
#menu ul .menu { width:60px; height: 60px; overflow:hidden; background: #42474A; }
#menu ul .menu { width:60px; height: 60px; overflow:hidden; transition: width 0.3s ease-in-out; }
#menu ul .menu:hover { width: 270px; color: #FFF; z-index:50; background: #272C2F; }
#menu ul li :hover  { background: #272C2F; }



.line { width: 60px; height: 1px; background: #FFF; }
.lineWhite { display: block; background: #FFF; width: 60px; height: 1px; }


#orchestreDeParisLogo { }
#orchestreDeParisLogo { padding:0; margin: 0; list-style-type: none; }
#orchestreDeParisLogo li { display: block; width: 60px; height: 60px; }

#orchestreDeParisLogo a { background: url('../img/picto/menu/orchestre1.png'); display: block; width: 60px; height: 60px; }
#orchestreDeParisLogo a:hover { background: url('../img/picto/menu/orchestre2.png'); }
@media screen and (max-width: 1024px) {
	#orchestreDeParisLogo a { background: url('../img/picto/menu/orchestre1.png'); display: block; width: 60px; height: 60px; }
	#orchestreDeParisLogo a:hover { background: url('../img/picto/menu/orchestre1.png'); }
	/* effet de transition */
	#menu ul .menu { width:60px; height: 60px; overflow:hidden; background: #42474A; }
	#menu ul .menu { width:60px; height: 60px; overflow:hidden; transition: width 0.3s ease-in-out; }
	#menu ul .menu:hover {  width:60px; height: 60px; overflow:hidden; background: #42474A; }
	#menu ul li :hover  { background: #42474A; }
}

#content { 
		   display: block; 
		   margin: 0 0 0 60px; 
		   overflow: hidden;
		   height: 100%;
		   }


/* Élément générique*/
.center { text-align: center; }
.maxWidth { width: 100%; }