body{background:#000;}

	#page{
		margin: 0 0 -1400px;
		background:url(../images/stade.jpg) no-repeat scroll 50% 0 transparent;
		height: 940px;
		margin: 0;
		min-width: 1024px;
		position: absolute;
		width: 100%;
		z-index:0;
	}

	#headback{
		background:url(../images/960-grid.png) repeat-x;
		height:140px;
		width:100%;
		min-width:1024px;
		position:absolute;
		opacity:0.7;
		border-bottom: 2px solid #be9c00;
	}
	#header{
		width:960px;
		height:120px;
		position:relative;
		margin: 0 auto;
		padding: 10px 0 10px 0;
	}
	#logo{
		width:180px;
		height:141px;
		background:url(../images/LogoAdidas.png) no-repeat;
		text-indent:-9999px;
		margin:0 0 0 30px;
	}
		#logo a{display:block; height:120px;}
		
	#threeband{
		background:url(../images/borderwhite.png) repeat-y; 
		width:91px; 
		display:block; 
		float:left; 
		overflow:hidden; 
		height:158px;
		left:-136px; 
		top:-19px; 
		position:absolute; 
		opacity: 0.8;
	}
	/*#threeband2{background:url(../border.png) repeat-y; width:91px; display:block; float:left; overflow:hidden; height:720px;left:-136px; top:-30px; position:absolute; opacity: 0.8;}*/
	
	
	#nav{
		font-family: 'TeXGyreAdventorRegular', Arial, sans-serif;
		font-size:18px;
		position:absolute;
		right:0; top:100px;float: left;
		list-style: none;
		margin: 0;
		padding: 0;
		z-index:20;
	}
	
		#nav li{float:left; margin-left:30px;}
		
			#nav li a{
				display: block;
				color: #999;
				text-decoration: none;
				text-transform: uppercase; 
				padding:8px 10px;
			}
				#nav li a:hover{
					color: #fff;
				}
	#nav ul{
		width:0px;
		height:50px;
		overflow:hidden;
		opacity:0;
		list-style: none;
		float: left;
		margin: 0;
		position:absolute;
		-webkit-transition:all .7s linear;
		   -moz-transition:all .7s linear;
			-ms-transition:all .7s linear;
			 -o-transition:all .7s linear;
				transition:all .7s linear;
	}
		#nav li:hover ul{opacity:1; width:100%;}
		
		
	#nav ul li{
		clear: none;
		margin: 0;
		padding: 10px 10px 10px 0;
		width: auto;
		height: auto;
		color: #999;
	}
	#nav ul li:last-child{padding-right:0;}
	#nav li:hover ul li a, #nav ul li a{
		display: inline;
		float: none;
		font-size:17px;
		text-transform:lowercase;
		color: #999;
	}
	
	#nav li:hover ul li a:hover, #nav ul li a:hover, #nav li a.selected{
		background: none;
		color: white;
	}
	
	
	
	
	#container{
		position:relative;
		width:960px;
		margin:0 auto;
		margin-bottom:30px;
		/*
		border-width: 0px 0px 0px 86px;
		-moz-border-image: url(../border.png) 0 0 0 100 repeat;
		-webkit-border-image: url(../border.png) 0 0 0 100 repeat;
		-o-border-image: url(../border.png) 0 0 0 100 repeat;
		border-image: url(../border.png) 0 0 0 100 repeat;*/
	}
		
		
	
	#slideshow{
		overflow:hidden; 
		margin-bottom:30px;
		margin-top: 30px; 
		background:#000; 
		z-index:10;
	}
	
	#content{overflow:hidden;}
	
			/*.article{
				float:left;
				width:300px;
				height:180px;
				margin-left:30px;
				color:white;
				opacity: 0.8;
				overflow:hidden;
				display:block;
				-webkit-transition: all .2s ease-in-out;
				   -moz-transition: all .2s ease-in-out;
					 -o-transition: all .2s ease-in-out;
					-ms-transition: all .2s ease-in-out;
						transition: all .2s ease-in-out;
			}
			.article:hover{ opacity: 1;
			}
				.article:hover h2{ -webkit-transform: translate(0px, 30px);
									  -moz-transform: translate(0px, 30px);
									    -o-transform: translate(0px, 30px);
									       transform: translate(0px, 30px);
			}
				.article h2{
					font-family: 'Open Sans Bold', sans-serif;
					font-size:28px;
					display:block;
					width:300px;
					text-align:center;
					margin-top:-30px;
					background:black;
					-webkit-transition: all .1s ease-in-out;
				   -moz-transition: all .1s ease-in-out;
					 -o-transition: all .1s ease-in-out;
					-ms-transition: all .1s ease-in-out;
						transition: all .1s ease-in-out;
				}
				
				
			.article:first-child{
				margin-left:0px;
			}
				.chaussures{
				background:url(../images/chaussures.jpg);}
				.vetements{
				background:url(../images/vetements.jpg);}
				.accessoires{
				background:url(../images/accessoires.jpg);}
				
			*/
			
			#content{list-style:none; position:relative;}
			
			#content .article{
				float:left;
				width:300px;
				height:180px;
				margin-left:30px;
				color:white;
				opacity: 0.9;
				-webkit-transition: all .2s ease-in-out;
				   -moz-transition: all .2s ease-in-out;
					 -o-transition: all .2s ease-in-out;
					-ms-transition: all .2s ease-in-out;
						transition: all .2s ease-in-out;
			}
			#content .article:first-child{
				margin-left:0px;
			}
				#content .article:hover{ opacity: 1;}
				
			
			#content a{
				display:block;
				height:180px;
				margin-top:0px;
				color:white; 
				text-decoration:none;}
			
			#content span{
				font-family: 'TeXGyreAdventorBold', Arial, sans-serif;
				font-size:18px;
				font-weight:bold;
				width:300px;
				color:white;
				background:#999;
				position:absolute;
				text-align:center;
				top:-38px;
				padding:5px 0;
				text-transform:uppercase;
				-webkit-transition: all .1s ease-in-out;
				   -moz-transition: all .1s ease-in-out;
					 -o-transition: all .1s ease-in-out;
					-ms-transition: all .1s ease-in-out;
						transition: all .1s ease-in-out;
			}
			#content .article:hover span{ 
				-webkit-transform: translate(0px, 38px);
				   -moz-transform: translate(0px, 38px);
					 -o-transform: translate(0px, 38px);
						transform: translate(0px, 38px);
			}
			
			#chaussures{
				background:url(../images/chaussures.jpg);}
			#vetements{
				background:url(../images/vetements.jpg);}
			#accessoires{
				background:url(../images/accessoires.jpg);}
				
				
		#footer{
			position:relative;
			margin: 0 auto;
			width:960px;
			color:white;
			padding-bottom:10px;/*
			border-width: 0px 0px 0px 86px;
			-moz-border-image: url(../borderwhite.png) 0 0 0 100 repeat;
			-webkit-border-image: url(../borderwhite.png) 0 0 0 100 repeat;
			-o-border-image: url(../borderwhite.png) 0 0 0 100 repeat;
			border-image: url(../borderwhite.png) 0 0 0 100 repeat;*/
		}
		#footback{
			background:url(../images/960-grid2.png) repeat-x;
			height:80px;
			width:100%;
			min-width:1024px;
			position:absolute;
			opacity:.9;
			border-top: 2px solid #be9c00;
		}
			/*.foot{
				float:left;
				width:300px;
				height:70px;
				margin-left:30px;
				margin-top:30px;
				background:url(../1192258_87864835.jpg);
			}
			.foot:nth-child(2){
				margin-left:0px;
			}*/
			
		#footer .foot{
				float:left;
				width:300px;
				height:70px;
				margin-left:30px;
				margin-top:30px;
				color:white;	
				overflow:hidden;
				position:relative;
			}
			#footer .foot:nth-child(2){margin-left:0px;}
			
			
			#footer a{
				display:block;
				height:70px;
				text-align:center; 
				color:white; 
				text-decoration:none;
			}
			
			#footer .spantitle{
				font-family: 'TeXGyreAdventorBold', Arial, sans-serif;
				font-size:18px;
				font-weight:bold;
				width:300px;
				top:-38px;
				color:white;
				background:#999;
				position:absolute;
				padding:5px 0;
				display:block;
				text-transform:uppercase;
				-webkit-transition: all .1s ease-in-out;
				   -moz-transition: all .1s ease-in-out;
					 -o-transition: all .1s ease-in-out;
					-ms-transition: all .1s ease-in-out;
						transition: all .1s ease-in-out;
			}
			
			#original{
				background:url(../images/original.jpg);background-position:0 -70px; opacity:.6;
				-webkit-transition: opacity .3s ease-in-out;
				   -moz-transition: opacity .3s ease-in-out;
					 -o-transition: opacity .3s ease-in-out;
					-ms-transition: opacity .3s ease-in-out;
						transition: opacity .3s ease-in-out;}
				#original:hover{
					background-position:0 0px; opacity:1;}
					#original:hover .spantitle{
						-webkit-transform: translate(0px, 38px);
				   		   -moz-transform: translate(0px, 38px);
					 		 -o-transform: translate(0px, 38px);
								transform: translate(0px, 38px);
					}
			#style{
				background:url(../images/style.jpg);background-position:0 -70px;opacity:.6;
				-webkit-transition: opacity .3s ease-in-out;
				   -moz-transition: opacity .3s ease-in-out;
					 -o-transition: opacity .3s ease-in-out;
					-ms-transition: opacity .3s ease-in-out;
						transition: opacity .3s ease-in-out;}
				#style:hover{
					background-position:0 0px; opacity:1;}
					#style:hover .spantitle{
						-webkit-transform: translate(0px, 38px);
						   -moz-transform: translate(0px, 38px);
							 -o-transform: translate(0px, 38px);
								transform: translate(0px, 38px);
					}
			#newsletter{
				background:url(../images/newsletter.jpg);background-position:0 -70px;opacity:.6;
				-webkit-transition: opacity .3s ease-in-out;
				   -moz-transition: opacity .3s ease-in-out;
					 -o-transition: opacity .3s ease-in-out;
					-ms-transition: opacity .3s ease-in-out;
						transition: opacity .3s ease-in-out;}
				#newsletter:hover{
					background-position:0 0px; opacity:1;}
					#newsletter:hover .spantitle{
						-webkit-transform: translate(0px, 38px);
						   -moz-transform: translate(0px, 38px);
							 -o-transform: translate(0px, 38px);
								transform: translate(0px, 38px);
					}
			
			#threeband2{background:url(../images/borderwhite.png) repeat-y; width:91px; display:block; float:left; overflow:hidden; height:120px;left:-136px;position:absolute; opacity: 0.8;}
			
			
			
/* COLLECTION
-------------------------------------------------------*/

.demo{
	height:580px;
	overflow:auto;
	background: rgba(0,0,0, .5);
}

.image-grid {
  font-family: 'TeXGyreAdventorRegular', Arial, sans-serif;
  padding-left: 45px;
  width: 840px;
}

.image-grid:after {
  content: "";
  display: block;
  height: 0;
  overflow: hidden;
  clear: both;
}

.image-grid li {
  width: 128px;
  margin: 20px 0 0 35px;
  float: left;
  line-height: 20px;
  text-align:center;
  color: #686f74;
  height: 177px;
  overflow: hidden;
}

	.image-grid li a {
  		color: #fff;
  		text-decoration:none;
	}
	
	.image-grid li strong {
	  color: #fff;
	}
		.image-grid li:hover strong {
  		color:#be9c00;
	}




.splitter {
  margin: 60px 0 15px;
  text-align: center;
  background: rgba(0,0,0, .8);
  border-bottom: 1px solid #1d1f21;
  padding: 6px 40px 5px;
  font-size: 16px;
  font-family: 'TeXGyreAdventorRegular', Arial, sans-serif;
  overflow:hidden;
}


.splitter ul {
  margin-right: 0;
  margin-top: 0;
  position:relative;
}
.splitter li{
	color:#fff;
	float:left;
}
.splitter li a:hover{color:#be9c00;}



.splitter ul li {
  width:150px;
  margin-left: 25px;
  background: rgba(102, 102, 102, .5);
  font-family: 'TeXGyreAdventorBold', Arial, sans-serif;
}
	.splitter ul li:first-child {
		background:none;
		font-family: 'TeXGyreAdventorRegular', Arial, sans-serif;
  		margin-left: 0px;
		line-height:24px;
	}

.splitter ul li a {
  display:block;
  padding: 5px 8px 6px;
  color: #ccc;
  text-decoration: none;
}




.splitter ul li.segment-0,
.splitter ul li.segment-2 {
  background-position: -3px -92px;
}

.splitter ul li.segment-1 {
  background-position: 0 -92px;
}

.splitter ul li.segment-0 a,
.splitter ul li.segment-1 a {
  background-position: 0 -161px;
}

.splitter ul li.segment-2 a {
  background-position: 100% -115px;
}

.splitter ul li.selected-0 a,
.splitter ul li.selected-1 a,
.splitter ul li.selected-2 a {
  color: #be9c00;
}

.splitter ul li.selected-0,
.splitter ul li.selected-2 {
  background-position: 0 -23px;
}

.splitter ul li.selected-0 a,
.splitter ul li.selected-1 a {
  background-position: 100% -46px;
}

.splitter ul li.selected-1 {
  background-position: 0 0;
}

.splitter ul li.selected-2 a {
  background-position: 100% -69px;
}


/*FORMULAIRE
----------------------------*/

#formulaire form{
	font-family: 'TeXGyreAdventorRegular', Arial, sans-serif;
	margin:50px auto;
	padding:20px;
	background: rgba(0,0,0,.8);
}
	#formulaire fieldset{
		border-top:2px solid rgba(255, 255, 255, .6);
		border-right:1px solid rgba(255, 255,255, .6);
		border-left:1px solid rgba(255, 255, 255, .6);
		border-bottom:2px solid rgba(255, 255, 255, .6);
		margin-bottom:20px;
	}
			
		#formulaire legend{
			color:#be9c00;
			font-size: 18px;
			margin-left:40px;
			padding:0 30px;
		}
			#formulaire label{float:left;
			color:white;
			}
			#formulaire div{margin:20px 0;}
			
			
			#formulaire input{
				font-size:14px;
				color:black;
				height:auto;
				display:block;
				margin-left:250px;
				width: 250px;
				padding: 5px 10px;
			}
			/* input[type="text"], input[type="password"] */
			
			#formulaire #submit{
			font-family: 'TeXGyreAdventorBold', Arial, sans-serif;
			font-size:16px;
			text-decoration:none;
			display:inline-block;
			position:relative;
			width:auto;
			margin-left:370px;
			background-color:rgba(190, 156, 0, .8);
			text-shadow: 0px 1px 1px #f8e071;
				
				color:rgba(0, 0, 0, 1);
				-webkit-box-shadow:0px 1px 8px rgba(248,224,113,0.9) inset, 1px 1px 9px rgba(248,224,113,0.2);
				   -moz-box-shadow:0px 1px 8px rgba(248,224,113,0.9) inset, 1px 1px 9px rgba(248,224,113,0.2);
						box-shadow:0px 1px 8px rgba(248,224,113,0.9) inset, 1px 1px 9px rgba(248,224,113,0.2);
				
				-webkit-border-radius:4px;
				   -moz-border-radius:4px;
						border-radius:4px;
				border:none;
				
				-webkit-transition:box-shadow 0.2s ease-in;
				   -moz-transition:box-shadow 0.2s ease-in;
					 -o-transition:box-shadow 0.2s ease-in;
						transition:box-shadow 0.2s ease-in;
			
			clear:both;
			overflow:hidden;
			cursor:pointer;
			
			
		}
			#formulaire #submit:hover{
				color:rgba(190, 156, 0, 1);
				background:black;
				text-shadow:none;
				border:none;
				
				box-shadow: 0px 0px .1px rgba(190, 156, 0, 1), 0px 0px 10.0px rgba(190, 156, 0, 1);
				-webkit-border-radius:4px;
				   -moz-border-radius:4px;
						border-radius:4px;
			}
			
			
			
			
			
			#formulaire #prenom, #formulaire #nom, #formulaire #password, #formulaire #préfixe {
				padding:5px 10px;
				width:235px;
			}
			#formulaire .connexion, .info, #date, #pays{
				padding:0 20px;
				width:330px;
				text-align:right;}
				
			#formulaire #prenom:focus, #formulaire #nom:focus, #formulaire #password:focus, #formulaire #email:focus, #formulaire #motdepasse:focus, #formulaire #confirmation:focus{
				border-color:rgba(190, 156, 0, 1);
				-webkit-box-shadow:0px 1px 8px rgba(248,224,113,0.9) inset, 1px 1px 9px rgba(248,224,113,0.2);
				-webkit-box-shadow:0px 1px 8px rgba(248,224,113,0.9), 1px 1px 9px rgba(248,224,113,0.2);
			}
			
			/*input[type="submit"]*/
			/*#formulaire #submit {
				margin:20px 0 0 220px;
				color:#ff920d;
				border: 1px solid #ff920d;
				font-size:18px;
				background-color:#fff;
				cursor:pointer;
			}*/

			#formulaire .date{margin-right:35px;}
			select{border:0px; padding:0; margin:0;}