/***********************************************************************************/
/* WWW.COM1CREA.COM                                                                */
/* FEUILLE DE STYLE LISTING                                                        */
/***********************************************************************************/

@charset "UTF-8";


/***********************************************************************************/
/* LISTING                                                                         */
/***********************************************************************************/

/***** VIGNETTES *****/
#listing {
	position: relative;
	float: left;
	width: 100%;
	}
	#listing ul {
		position: relative;
		float: left;
		list-style-type: none;
		margin: 20px 0 0 0;
		padding: 0;
		}
		#listing ul li {
			display: block;
			position: relative;
			float: left;
			width: 310px;
			height: 200px;
			background: #FFF;
			margin: 0 35px 35px 0;
			-moz-box-shadow: 0px 0px 7px #999; 
			-webkit-box-shadow: 0px 0px 7px #999; 
			box-shadow: 0px 0px 7px #999; 
			}
			#listing ul li:nth-child(3n) {margin-right: 0}
		#listing ul li img {
			position: absolute;
			left: 0;
			bottom: 0;
			}

/***** LEGENDES *****/			
.legende {
	position: absolute;
	top: 0;
	left: 0;
	width: 310px;
	height: 200px;
	opacity: 0;
	-webkit-transition-property: opacity;
	-webkit-transition-duration: 0.6s;
	-moz-transition-property: opacity;
	-moz-transition-duration: 0.6s;
	transition-property: opacity;
	transition-duration: 0.6s;
	}
	#listing ul li:hover .legende {opacity: 1}
	.legende .layout {
		position: absolute;
		top: 0;
		left: 0;
		width: 310px;
		height: 200px;
		background: black;
		opacity: 0.7;
		}
		.legende .layout a {
			display: block;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			margin: 0;
			}
	.legende a {
		position: absolute;
		display: block;
		width: 310px;
		margin-top: 80px;
		text-align: center;
		color: #FFF;
		}
.reference {
	text-transform: uppercase;
	font-weight: bold;
	font-size: 20px;
	margin-bottom: 10px;
	}

/***** PAGES *****/
#pages {
	position: relative;
	float: left;
	width: 1000px;
	text-align: center;
	margin-bottom: 35px;
	}
	#pages ul {
		list-style-type: none;
		margin: 0 0 0 -40px;
		}
	#pages li {display: inline-block}
		#pages li a {
			display: block;
			width: 25px;
			height: 25px;
			margin: 0 10px;
			background: url(../img/habillage/pages/grey.png) top left no-repeat;
			padding-top: 5px;
			font-weight: bold;
			color: #FFF;
			}
			body#identite #pages li a:hover,
			body#identite #pages li a.active {background: url(../img/habillage/pages/identite.png) top left no-repeat}
			body#print #pages li a:hover,
			body#print #pages li a.active {background: url(../img/habillage/pages/print.png) top left no-repeat}
			body#web #pages li a:hover,
			body#web #pages li a.active {background: url(../img/habillage/pages/web.png) top left no-repeat}
			#pages li.first a {
				background: url(../img/habillage/pages/first.png) top left no-repeat;
				margin: 0;
				}
				body#identite #pages li.first a:hover,
				body#identite #pages li.first a.active {background: url(../img/habillage/pages/first-identite.png) top left no-repeat}
				body#print #pages li.first a:hover,
				body#print #pages li.first a.active {background: url(../img/habillage/pages/first-print.png) top left no-repeat}
				body#web #pages li.first a:hover,
				body#web #pages li.first a.active {background: url(../img/habillage/pages/first-web.png) top left no-repeat}
			#pages li.prev a {background: url(../img/habillage/pages/prev.png) top left no-repeat}
				body#identite #pages li.prev a:hover,
				body#identite #pages li.prev a.active {background: url(../img/habillage/pages/prev-identite.png) top left no-repeat}
				body#print #pages li.prev a:hover,
				body#print #pages li.prev a.active {background: url(../img/habillage/pages/prev-print.png) top left no-repeat}
				body#web #pages li.prev a:hover,
				body#web #pages li.prev a.active {background: url(../img/habillage/pages/prev-web.png) top left no-repeat}
			#pages li.next a {background: url(../img/habillage/pages/next.png) top left no-repeat}
				body#identite #pages li.next a:hover,
				body#identite #pages li.next a.active {background: url(../img/habillage/pages/next-identite.png) top left no-repeat}
				body#print #pages li.next a:hover,
				body#print #pages li.next a.active {background: url(../img/habillage/pages/next-print.png) top left no-repeat}
				body#web #pages li.next a:hover,
				body#web #pages li.next a.active {background: url(../img/habillage/pages/next-web.png) top left no-repeat}
			#pages li.last a {
				background: url(../img/habillage/pages/last.png) top left no-repeat;
				margin: 0;
				}
				body#identite #pages li.last a:hover,
				body#identite #pages li.last a.active {background: url(../img/habillage/pages/last-identite.png) top left no-repeat}
				body#print #pages li.last a:hover,
				body#print #pages li.last a.active {background: url(../img/habillage/pages/last-print.png) top left no-repeat}
				body#web #pages li.last a:hover,
				body#web #pages li.last a.active {background: url(../img/habillage/pages/last-web.png) top left no-repeat}