/* 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;
	}
	
	#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;
	}



/*contenu de la page éclairage dans le div centrale*/
 
.inner-prise a
{
    text-decoration:none;
    border-style:none;
    
}
header#header h1 
{
    display:block;
	font-family: 'Droid Sans', sans-serif;
	font-size: 15px;
	background:  linear-gradient(to right, #E6E7BE, rgb(228,224,133));
	padding: 30px;
	border-radius: 10px;
	box-shadow: #aaa 1px 1px 10px 3px;
		
}


.inner-prise, .prise{
    position: relative;
    top:80px;
    width: 800px;
    margin-left: 50px;
}


.inner-prise:before,
.inner-prise:after {
    content:"";
    display:table;
}

.inner-prise:after {
    clear:both;
}


.inner-prise article{
    display: block;
	width: 350px;
	height: 220px;
	background: #fff;
	cursor: pointer;
	float: left;
	border: 10px solid #fff;
	text-align: left;
	text-transform: none;
	text-decoration:none;
	margin: 15px;
	z-index: 1;
	-webkit-backface-visibility: hidden;
	box-shadow: 
		0px 0px 0px 10px rgba(255,255,255,1), 
		1px 1px 3px 10px rgba(0,0,0,0.2);
	-webkit-transition: 
		opacity 0.4s linear, 
		-webkit-transform 0.4s ease-in-out, 
		box-shadow 0.4s ease-in-out;
	-moz-transition: 
		opacity 0.4s linear, 
		-moz-transform 0.4s ease-in-out, 
		box-shadow 0.4s ease-in-out;
	-o-transition: 
		opacity 0.4s linear, 
		-o-transform 0.4s ease-in-out, 
		box-shadow 0.4s ease-in-out;
	-ms-transition: 
		opacity 0.4s linear, 
		-ms-transform 0.4s ease-in-out, 
		box-shadow 0.4s ease-in-out;
	transition: 
		opacity 0.4s linear, 
		transform 0.4s ease-in-out, 
		box-shadow 0.4s ease-in-out;

}


.inner-prise h3 {
	font-family: 'Droid Sans', sans-serif;
    font-size: 14px;
	margin-bottom: 20px;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    text-shadow: 0px 0px 0px #000;
    opacity: 0.8;
	text-decoration:none;
	border-style:none;
}

.inner-prise article p{
    font-family: Verdana, sans-serif;
    font-size: 11px;
    line-height: 18px;
    color: #333;
    text-shadow: 0px 0px 0px #000;
    opacity: 0.8;
	text-decoration:none;
	border-style:none;
}

.inner-container h3,
.inner-container article p{
    transition:
        opacity 0.2s linear,
        text-shadow 0.5s ease-in-out,
        color 0.5s ease-in-out;
	-webkit-transition: 
		opacity 0.2s linear, 
		text-shadow 0.5s ease-in-out, 
		color 0.5s ease-in-out;
	-moz-transition: 
		opacity 0.2s linear, 
		text-shadow 0.5s ease-in-out, 
		color 0.5s ease-in-out;
	-o-transition: 
		opacity 0.2s linear, 
		text-shadow 0.5s ease-in-out, 
		color 0.5s ease-in-out;
	-ms-transition: 
		opacity 0.2s linear, 
		text-shadow 0.5s ease-in-out, 
		color 0.5s ease-in-out;
		
}


.inner-prise article.blur{
    box-shadow: 0px 0px 20px 10px #ddd;
    -webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	-o-transform: scale(0.8);
	-ms-transform: scale(0.8);;
	transform: scale(0.8);
    opacity: 0.7;
}

.inner-prise article.blur h3 {
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.9);
    color: rgba(0, 0, 0, 0);
    opacity: 0.5;
}

.inner-prise article.blur  p{
    text-shadow: 0px 0px 10px rgba(51, 51, 51, 0.9);
    color: rgba(51, 51, 51, 0);
    opacity: 0.5;
}



.inner-prise article.active{
   -webkit-transform: scale(1.50);
	-moz-transform: scale(1.50);
	-o-transform: scale(1.50);
	-ms-transform: scale(1.50);
	transform: scale(1.50);
    box-shadow:
        0px 0px 0px 10px rgba(255,255,255,1),
        1px 11px 15px 10px rgba(0,0,0,0.4);
    z-index: 100;
    opacity: 1;
}

.inner-prise article.active h3,
.inner-prise article.active p{
    opacity; 1;
}

article p.client-name {
	float: left;
	color: #008000;
	font-size: 12px;
	font-style: italic;
	margin-top: 10px;	
}

article p.img 
{
    margin-left:40px;
    border-style:none;
    text-decoration:none;
	border-style:none;
}