/* menu et réglage divers */
	
/*menu de gauche*/

    @font-face {
	    font-family: 'icomoon';
	    src:url('fonts/icomoon.eot');
	    src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
		    url('fonts/icomoon.woff') format('woff'),
		    url('fonts/icomoon.ttf') format('truetype'),
		    url('fonts/icomoon.svg#icomoon') format('svg');
    }
	
	body {
		background:	#E6E7BE;
		font-size:	62.5%;
		font-family:verdana, helvetica, arial, sans-serif;
	}
		
	#container {
		width:		1538px;
		position:	relative;
		margin:		auto;
		height:1030px;
		border:		2px solid #cfcfcf;
		background: #fefefe ;
		box-shadow: 0px 0px 4px #ccc;
	}
	
	#titre
	{
		margin-top:50px;
		width:720px;
		left:65px;
		font-style:oblique;
		color: #343434;
	}
	
	#menu-gauche, #menu-droit {
	    position:absolute;
	    background-color:White;
	}
	
	#menu-gauche {    	    	
        position:absolute;
        width:195;
        top:0;
        left:0;
	}

    #menu-droit {    	    	
        position:absolute;
        width:220;
        height: 1003px;
        top:0;
        right:0;
	}
		
	ul#nav {
		position: absolute;
		float:	left;
		top:0;
		margin:	0 0 0 0;
		padding:0;
	}
		
	ul#nav li {
		position: relative;
		margin:	1px 0px;
		padding: 20px 40px 20px 90px;
		list-style:	none;
		width:		194px;
		background:	#fcfcfc;
		border: 1px solid #C4C4C4;	
		box-shadow: 0px 0px 4px #ccc;
		-webkit-transition: all 0.15s linear;
		-ms-transition: all 0.15s linear;
		-moz-transition: all 0.15s linear;
		transition: all 0.15s linear;
		overflow:	hidden;
	}
		
	ul#nav .icon {
		font-family: 'icomoon',cursive;
		font-size:	 2.8em;
		position:	absolute;
		left:		40px;
		top:		30px;
		text-shadow: 0px 2px 1px #999;
		-webkit-transition: all 0.4s linear;
		-ms-transition: all 0.4s linear;
		-moz-transition: all 0.4s linear;
		transition: all 0.4s linear;
	}

	ul#nav li:hover {
		background:			#ECECEC	;
		-webkit-transform: translateY(-3px) scale(1.05);
		-ms-transform: translateY(-3px) scale(1.05);
		-moz-transform: translateY(-3px) scale(1.05);		
		box-shadow: 0px 2px 7px #999;
		z-index:	1000;
	}
		
	ul#nav li:hover .icon {
		-webkit-transform: scale(1.5);
		-ms-transform: scale(1.5);
		-moz-transform: scale(1.5);
		transform: scale(1.5);
		color:			#b7480c;
	}
		
	ul#nav li a {
		display:			block;
		text-decoration: 	none;
		color:				#343434;
		text-transform:		capitalize;
		font-size:			1.1em;
		-webkit-transition: all 0.3s linear;
		-ms-transition: all 0.3s linear;
		-moz-transition: all 0.3s linear;
		transition: all 0.3s linear;
	}
		
	ul#nav li:hover a {
		color:			#26697f;
	}
		
	ul#nav li a h3 {
		margin:		0;
		padding:	0;
		font-size:	2em;
		display:	block;
		text-transform:capitalize;
		font-weight:normal;
	}
		
	ul#nav li:hover a h3 {
		-webkit-animation: slideFromTop 300ms ease-in-out;
		-moz-animation: slideFromTop 300ms ease-in-out;
		-ms-animation: slideFromTop 300ms ease-in-out;
		animation: slideFromTop 300ms ease-in-out;
	}
		
	ul#nav li a span {
		display:	block;
		color: Black;
	}
		
	ul#nav li:hover a span {
		-webkit-animation: slideFromRight 300ms ease-in-out;
		-moz-animation: slideFromRight 300ms ease-in-out;
		-ms-animation: slideFromRight 300ms ease-in-out;
		animation: slideFromRight 300ms ease-in-out;
	}
		
	@-webkit-keyframes slideFromTop {
			from {
			opacity: 0;
			-webkit-transform: translateY(-200%);
		}
		to {
			opacity: 1;
			-webkit-transform: translateY(0%);
		}
	}
	
	@-keyframes slideFromTop {
			from {
			opacity: 0;
			transform: translateY(-200%);
		}
		to {
			opacity: 1;
			transform: translateY(0%);
		}
	}
	
	@-moz-keyframes slideFromTop {
			from {
			opacity: 0;
			-moz-transform: translateY(-200%);
		}
		to {
			opacity: 1;
			-moz-transform: translateY(0%);
		}
	}
	
	@-ms-keyframes slideFromTop {
			from {
			opacity: 0;
			-ms-transform: translateY(-200%);
		}
		to {
			opacity: 1;
			-ms-transform: translateY(0%);
		}
	}
		
	@-webkit-keyframes slideFromRight {
			from {
			opacity: 0;
			-webkit-transform: translateX(200%);
		}
		to {
			opacity: 1;
			-webkit-transform: translateX(0%);
		}
	}
		
	@-keyframes slideFromRight {
			from {
			opacity: 0;
			transform: translateX(200%);
		}
		to {
			opacity: 1;
			transform: translateX(0%);
		}
	}
	
	@-moz-keyframes slideFromRight {
			from {
			opacity: 0;
			-moz-transform: translateX(200%);
		}
		to {
			opacity: 1;
			-moz-transform: translateX(0%);
		}
	}
		
	@-ms-keyframes slideFromRight {
		from {
		opacity: 0;
		-ms-transform: translateX(200%);
	}
	to {
		opacity: 1;
		-ms-transform: translateX(0%);
	    }
	}
		
/*menu du centre*/
		
	#panel 
	{
	    margin-left: 328px;
		width:		calc(100% - (328px+220px));
		width:	    -webkit-calc(100% - (328px+220px));
		width:		-moz-calc(100% - (328px+220px));


	}
		
		
	ul#notice {
		position: relative;
		margin: 1px 0px 0px 0px;
		padding:0;
	}
		
	ul#notice li {
		position: relative;
		display:inline-block;
		width:154px;
		margin:	0px 0px 0px 0px;
		padding: 20px 12px 20px 66px;
		list-style:	none;
		background:	#fcfcfc;
		border: 1px solid #C4C4C4;	
		box-shadow: 0px 0px 4px #ccc;
		-webkit-transition: all 0.15s linear;
		-ms-transition: all 0.15s linear;
		-moz-transition: all 0.15s linear;
		transition: all 0.15s linear;
		overflow:	hidden;
	}
		
	ul#notice .icon {
		font-family: 'icomoon',cursive;
		font-size:	 3em;
		position:	absolute;
		left:		20px;
		top:		20px;
		text-shadow: 0px 2px 1px #999;
		-webkit-transition: all 0.4s linear;
		-ms-transition: all 0.4s linear;
		-moz-transition: all 0.4s linear;
		transition: all 0.4s linear;
	}

	ul#notice li:hover {
		background:			#ECECEC	;
		-webkit-transform: translateY(-3px) scale(1.05);
		-ms-transform: translateY(-3px) scale(1.05);
		-moz-transform: translateY(-3px) scale(1.05);
		transform: translateY(-3px) scale(1.05);		
		box-shadow: 0px 2px 7px #999;
		z-index:	1000;
	}
		
	ul#notice li:hover .icon {
		-webkit-transform: scale(1.5);
		-ms-transform: scale(1.5);
		-moz-transform: scale(1.5);
		transform: scale(1.5);
		color:			#b7480c;
	}
		
	ul#notice li a {
		display:			block;
		text-decoration: 	none;
		color:				#343434;
		text-transform:		capitalize;
		font-size:			1.1em;
		-webkit-transition: all 0.3s linear;
		-ms-transition: all 0.3s linear;
		-moz-transition: all 0.3s linear;
		transition: all 0.3s linear;
	}
		
	ul#notice li:hover a {
		color:			#26697f;
	}
		
	ul#notice li a h3 {
		margin:		0;
		padding:	0;
		font-size:	2em;
		display: block;
		text-transform:capitalize;
		font-weight:normal;
	}
		
	ul#notice li:hover a h3 {
		-webkit-animation: slideFromTop 300ms ease-in-out;
		-moz-animation: slideFromTop 300ms ease-in-out;
		-ms-animation: slideFromTop 300ms ease-in-out;
		animation: slideFromTop 300ms ease-in-out;
	}
		
	ul#notice li a span {
		display:	block;
		color:  White;
	}
		
	ul#notice li:hover a span {
		 color:  Black;
		-webkit-animation: slideFromRight 300ms ease-in-out;
		-moz-animation: slideFromRight 300ms ease-in-out;
		-ms-animation: slideFromRight 300ms ease-in-out;
		animation: slideFromRight 300ms ease-in-out;
	}
	
/*menu de droite*/
		
	#date {
		position: relative;
		top:-10px;
	    border:2px solid #C4C4C4;
		width: 220px;
		height:69px;
	    padding-top:10px;
	    
		background:	#fcfcfc;
		box-shadow: 0px 0px 3px #ccc;		
	}
	
	#date li
	{
	    position:relative;
	    margin: 6px 10px 6px 20px;
	    top:10px;
	    float: left;
	    list-style:none;
	}	
	ul#date li h3 {
		margin:		0;
		padding:	0;
		font-size:	1.8em;
		text-transform:capitalize;
		font-weight:normal;
		text-align: center;
	}
	
	#date li span {
		display: block;
		color: Black;
		text-align: center;
	}
	

				
    #news 
	{
	    position:relative;
	    border:2px solid #C4C4C4;
	    top : -20px;
	    width: 220px;
	    height:200px;
		box-shadow: 0px 0px 3px #ccc;
	}
	
	ul#news li
	{
	    position:relative;
	    top: 10px;
	    list-style:	none;
	} 
	
	#news li h2 {
	    position:relative;
	    margin-left:-10px;
	    font-family: arial, helvetica, Sans-Serif;
	    list-style:	none;
	    text-decoration: underline;
	    color:	#343434;
	    font-size:2.0em;
	    top: 5px;
	}
	
	#news li h3 {
	    position:relative;
	    margin-left:-10px;
	    margin-right:10px;	    
	    font-family: arial, helvetica, Sans-Serif;
	    list-style:	none;
	    color:	#343434;
	    font-size:1.2em;
	    top: 5px;
	} 
	
	#info-legal {
	    position:absolute;
	    border:2px solid #C4C4C4;
	    bottom: 0px;
	    width: 220px;
	    height:60px;
		box-shadow: 0px 0px 3px #ccc;
	}
	
	#info-legal li {
		position: relative;
		width:220px;
		left: -40px;
		margin:	0px 0px 0px 0px;
		padding: 20px 19px 17px 20px;
		list-style:	none;
		background:	#fcfcfc;
		border: 1px solid #C4C4C4;	
		box-shadow: 0px 0px 4px #ccc;
		-webkit-transition: all 0.15s linear;
		-ms-transition: all 0.15s linear;
		-moz-transition: all 0.15s linear;
		transition: all 0.15s linear;
		overflow:	hidden;
	}
	#info-legal:hover{

		-webkit-transform: translateY(-3px) scale(1.05) ;
		-ms-transform: translateY(-3px) scale(1.05);
		-moz-transform: translateY(-3px) scale(1.05);
		transform: translateY(-3px) scale(1.05);		
		box-shadow: 0px 2px 7px #999;
		z-index:	1000;
		-webkit-transition: all 0.2s linear;
		-ms-transition: all 0.2s linear;
		-moz-transition: all 0.2s linear;
		transition: all 0.2s linear;
		
	}
	#info-legal li:hover
	{
	background:			#ECECEC	;
	list-style: none;
	}
	
	#info-legal li a 
	{
	    position:relative;
	    text-decoration: none;
	    color:#343434;
	}
	
	ul#info-legal li h3 
	{
		font-style:oblique;
		margin: 0;
		padding:0;
		float:left;
		font-size:	1.8em;
		text-transform:capitalize;
		font-weight:normal;
		text-align: center;
	}
/*entête de page attelage-astuce.com*/


		
	#logo {
	    position:	relative;
	    margin:		auto;
	    width:		1538px;
	    height:		300px;
	    background: linear-gradient(to right, rgb(216,245,005), rgb(228,224,133));
	    box-shadow: 0px 0px 0px #ccc;
		
		}
	
	#attelage {
	    position:relative;
	    left : 630px;
	    top: -40px;
	}
	

	#entete {
	    position:relative;
	    left : 150px;
	    top:100px;
		margin:	0px 0px 0px 0px;
		padding: 2px 19px 17px 15px;
	    box-shadow: #aaa 2px 2px 20px 5px; 
        border-radius: 20px;
        width:247px;
          
   	}
	
	#entete a {
	    text-decoration: 	none;
	}
	
	#entete h1 {
	    padding-left: 20px;
	    font-family:Ebrima;
	    color:	#343434;
	    font-size:2.3em;
	    text-transform:capitalize;
	    font-style:oblique;	    
	}
	
	#entete span {
	    position:relative;
	    top:15px;
	    left:-40px;
	    font-family:Ebrima;
	    color:	#343434;
	    font-style:oblique;
	    font-size:0.7em;	    
	}
	
	#entete a:link {
	    
	    text-decoration: none;
	    border-bottom: solid 1px;
	}
	
	#entete a:before {
	    content: "";
	    position: absolute;
	    border-top: 20px solid rgb(128,255,000);
	    border-left: 30px solid transparent;
	    border-right: 30px solid transparent;
	    display: none;
	    top: -18px;
	    left: -26px;
	}
	
	#entete a:after {
	    content: attr(data-tooltip);
	    position: absolute;
	    font-family:Ebrima;
	    color:	#343434;
	    font-size:1.8em;
	    text-transform:capitalize;
	    font-style:oblique;	    
	    top: -50px;
	    left: -26px;
	    background: #eaff00;
	    padding: 5px 15px;
	    box-shadow: #c3ffe7 1px 1px 25px 8px;
	    border-radius: 15px;
	    white-space: nowrap;
	    display: none;
		
	}
	
	#entete a:hover:after, a:hover:before {
        display:block;
	}
	
	/* style des identification php*/

	#sessions {
	    position:	relative;
	    width:		1518px;
		padding-right:20px;
	    height:		20px;
	    background: linear-gradient(to right, rgb(216,245,005), rgb(228,224,133));
		font-style:oblique;
		font-size:	1.8em;
		text-transform:capitalize;
		text-align:right;
		z-index:1000;
	}
	
	#logo1 {
		position: relative;
		margin:		auto;
		width: 1538px;
	    border:	2px solid #cfcfcf;
	}