@charset "utf-8";
body {
	font:1em "Myriad Web Pro"; 
	background:url(img/fonds/motif.gif) repeat #000;
}
@font-face {
    font-family: 'stereofidelic';
    src: url('font/stereofidelic-webfont.eot');
    src: url('font/stereofidelic-webfont.eot?#iefix') format('embedded-opentype'),
	url('font/stereofidelic-webfont.woff') format('woff'),
	url('font/stereofidelic-webfont.ttf') format('truetype'),
    url('font/stereofidelic-webfont.svg#stereofidelic-webfont:') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*Main*/
main {
	width:960px;
	margin:auto;
	display:block;
}

/*Header*/
header {
	width:960px;
	height:228px;
	background:url(img/fonds/fondmenu.png) bottom repeat-X, url(img/fonds/fondheader.jpg) top repeat-x;
	margin:-10px 0px 10px;
}
header div.baseline1 {
	position:absolute;
	font:3em 'stereofidelic';
	letter-spacing:0.1em;
	top:60px;
	margin-left:120px;
	color:#262626;
}
header div.baseline2 {
	position:absolute;
	font:3em 'stereofidelic';
	letter-spacing:0.1em;
	top:60px;
	margin-left:595px;
	color:#262626;
}
	/*Logo slider*/
	header img {
		width:200px;
		margin-left:380px;
		display:inline;
		border:none;
	}
	header .Slides {
		height:227px;
		position:relative;
	}
	header .Slides a {
		
	}
	header .Slides img {
		position:absolute;
		z-index:0;
	}
	header .Slides img.active {
		z-index:2;
	}
	header .Slides img.last-active {
		z-index:1;
	}

/*Nav*/
nav {
	margin-top:-75px;
}

nav ul {
	width:960px;
	padding-left:10px;
}
nav ul li {
	margin:0px 20px 0px 0px;
	float:left;
	list-style-type:none;
}
.navlist {
	position:relative;
}
.navlist li {
	position:absolute;
}
.navlist li, .navlist a {
	height:54px;
	display:block;
}
.accueil {
	width:160px;
	left:10px; 
	background:url(img/boutons/menup/btnaccueil.gif);
}
.accueil:hover {
	background:url(img/boutons/menup/btnaccueilh.gif) #0a8cbf;
}
.magasin {
	width:160px;
	left:190px;
	margin-right:260px;
	background:url(img/boutons/menup/btnmagasin.gif);
}
.magasin:hover {
	background:url(img/boutons/menup/btnmagasinh.gif);
}
.apropos {
	width:160px;
	left:600px;
	background:url(img/boutons/menup/btnapropos.gif);
}
.apropos:hover {
	background:url(img/boutons/menup/btnaproposh.gif);
}
.contact {
	width:160px;
	left:790px;
	background:url(img/boutons/menup/btncontact.gif);
}
.contact:hover {
	background:url(img/boutons/menup/btncontacth.gif);
}

/*slider*/
slider {
	width:960px;
	height:260px;
	margin:12px auto 7px;
	background-color:#a1a1a1;
	position:relative;
}
slider .Slider {
	height:260px;
	position:relative;
}
slider .Slider img{
	position:absolute;
	-webkit-box-shadow:0px 0px 3px 3px rgba(242,242,242,0.165);/*l'opacité est à 16.5% car l'effet d'ombre est appliqué à chaque image, donc les effets s'accumulent*/
	-moz-box-shadow:0px 0px 3px 3px rgba(242,242,242,0.165);
	-o-box-shadow:0px 0px 3px 3px rgba(242,242,242,0.165);
	box-shadow:0px 0px 3px 3px rgba(242,242,242,0.165);
	z-index:0;
}
slider .Slider img.active {
	z-index:2;
}
slider .Slider img.last-active {
	z-index:1;
}

/*Aside*/
aside  {
	width:290px;
	margin-bottom:10px;
	margin-top:10px;
	padding:50px 0px;
	background-color:rgba(255,255,255,0.3);
	float:right;
	-webkit-border-radius:0px 0px 10px 0px;
	-moz-border-radius:0px 0px 10px 0px;
	-o-border-radius:0px 0px 10px 0px;
	border-radius:0px 0px 10px 0px;
	display:block;
	position:relative;
}
aside div#AsideContenu {
	width:160px;
	margin:auto;
}
aside div#AsideContenu h2 {
	color:#fff;
	font:2em 'stereofidelic';
	opacity:0.8;
}
aside div#AsideContenu h2.MessageJour {
	margin-top:50px;
}
aside div#AsideContenu p {
	text-align:center;
	color:#fff;
}

	/*Légende image*/
	aside div#AsideContenu figure {
		width:100%;
		margin:0px;
		text-align:center;
	}
	aside div#AsideContenu figcaption {
		color:#f2f2f2;
	}
	aside div#AsideContenu figcaption a {
		color:#f2f2f2; 
		-webkit-transition:color 0.3s ease 0s;
		-moz-transition:color 0.3s ease 0s;
		-o-transition:color 0.3s ease 0s;
		transition:color 0.3s ease 0s;
	}
	aside div#AsideContenu figcaption a:hover {
		color:#0a8cbf; 
		-webkit-transition:color 0.7s ease 0s;
		-moz-transition:color 0.7s ease 0s;
		-o-transition:color 0.7s ease 0s;
		transition:color 0.7s ease 0s;
	}
	
/*Section*/
section {
	width:650px;
	padding:60px 0px 75px;
	margin-top:10px;
	background:url(img/fonds/fondsection.png) repeat-y;
	display:block;
	position:relative;
}
section.boutique {
	padding:60px 0px 0px;
	background:url(img/fonds/fondbassection.png) bottom no-repeat, url(img/fonds/fondsection.png);
}
section h1 {
	margin:0px 0px 30px 50px;
	font:3em 'stereofidelic'; 
	-webkit-text-shadow:3px 3px 3px #262626;
	-moz-text-shadow:3px 3px 3px #262626;
	-o-text-shadow:3px 3px 3px #262626;
	text-shadow:3px 3px 3px #262626;
}
section article {
	padding:0px 50px 50px 50px;
	min-height:200px;
}
section article h2 {
	font:2em 'stereofidelic';
}
section article h3 {
	font:1.6em 'stereofidelic';
	margin:-20px 0px 10px 20px;
}
section article video {
	margin:20px 25px 0px;
}
section article p {
	margin:0px 0px 0px 10px;
	text-align:justify;
	line-height:1.3em;
}
section article img {
	margin:0px 20px 20px 0px;
	float:left;
}

	/*Contact*/
	section article div.FormColGauche {
		width:50%;
		float:left;
		display:inline;
	}
	section article div.FormColDroite {
		width:50%;
		float:right;
		display:inline;
	}
	section article p a {
		color:#0879a6; 
		-webkit-transition:color 0.3s ease 0s;
		-moz-transition:color 0.3s ease 0s;
		-o-transition:color 0.3s ease 0s;
		transition:color 0.3s ease 0s;
	}
	section article p a:hover {
		color:#262626;
		-webkit-transition:color 0.7s ease 0s;
		-moz-transition:color 0.7s ease 0s;
		-o-transition:color 0.7s ease 0s;
		transition:color 0.7s ease 0s;
	}

	/*Colonnes*/
	.txtcolonnes {
		margin-top:20px;
		-moz-columns:2;
		-webkit-columns:2;
		columns:2;
		-moz-columns-gap:1em;
		-webkit-column-gap:1em;
		column-gap:1em;
	}
	.txtcolonnes h3 {
		font:1.6em 'stereofidelic';
		margin-top:10px;
	}
	.txtcolonnes p {
		text-align:left;
	}

	/*Liste Articles*/
	div#ListeArticle {
		width:540px;
		margin:auto;
	}
	
		/* ItemMag Magasin */
		section div#ListeArticle div#ItemMag {
			width:160px;
			height:400px;
			float:left;
			margin:0px 10px;
			display:block;
		}
		section div#ListeArticle div#ItemMag h2 {
			font-family:"Myriad Web Pro";
			margin-bottom:0px;
		}	
		section div#ListeArticle div#ItemMag input.ChckBox {
			margin-left:0px;
		}
		section div#ListeArticle div#ItemMag div.Prix {
			width:80px;
			text-align:right;
			float:right;
			display:block;
		}
		section div#ListeArticle div#ItemMag div.QTE {
			margin-top:5px;
		}
		section div#ListeArticle div#ItemMag input.QTE {
			float:right;
		}
		section div#ListeArticle div#ItemMag p {
			text-align:center;
			line-height:1.5em;
		}
		
	/*Formulaire du magasin*/
	div#basform {
		width:650px;
		margin:auto;
		padding-top:50px;
		clear:both;
	}
	div.boutons {
		width:520px;
		margin:auto;
	}
	input.BtnEnvoyer {
		width:220px;
		height:50px;
		margin-right:76px;
		border:none;
		background:url(img/boutons/menup/commande.png) no-repeat;
		text-indent:-5000px;
		z-index:102;
	}
	input.BtnEnvoyer:hover {
		background:url(img/boutons/menup/commandeh.png) no-repeat;
	}
	input.BtnEffacer {
		width:220px;
		height:50px;
		border:none;
		background:url(img/boutons/menup/reset.png) no-repeat;
		text-indent:-5000px;
		z-index:102;
	}
	input.BtnEffacer:hover {
		background:url(img/boutons/menup/resetH.png) no-repeat;
	}
	
	/*Table*/
	section table {
		width:85%;
		margin:-150px auto 0px;
		border-collapse:collapse;
	}
	section table caption{
		font:3em 'stereofidelic';
		margin-bottom:20px;
	}
	section table thead {
		border:5px solid #0879a6;
		border-bottom:none;
	}
	section table thead th {
		width:25%;
		text-align:center;
		color:#262626;
		border-width:0px 2px 5px;
		border-style:none solid ridge;
		border-color:#0879a6;
		background-color:#0a8cbf;
	}
	section table td {
		text-align:center;
		color:#0879a6;
		border:1px dotted #262626;
		border-top:none;
		background-color:rgba(242,242,242,0.8);
	}
	section table tbody {
		border:5px solid #0879a6;
	}
	section table tbody img{
		margin:0px;
		padding:0px;
	}
	section table tfoot td.email, td.vide {
		border:5px solid #0879a6;
	}
	section table tfoot td.email a {
		color:#0879a6; 
		-webkit-transition:color 0.3s ease 0s;
		-moz-transition:color 0.3s ease 0s;
		-o-transition:color 0.3s ease 0s;
		transition:color 0.3s ease 0s;
	}
	section table tfoot td.email a:hover {
		color:#262626;
		-webkit-transition:color 0.7s ease 0s;
		-moz-transition:color 0.7s ease 0s;
		-o-transition:color 0.7s ease 0s;
		transition:color 0.7s ease 0s;
	}
	section table tfoot td.total {
		height:30px;
		font-weight:bold;
		border:5px solid #0879a6;
		border-bottom:2px solid #0879a6;
	}
	
/*Footer*/
footer {
	width:958px;
	margin:10px 0px -10px;
	border:1px solid #f2f2f2;
	background-color:#262626;
	display:block;
	position:relative;
	vertical-align:bottom;
}
footer div {
	width:320px;
	height:280px;
	padding-top:30px;
	margin-bottom:20px;
	border:none;
	float:left;
	display:block;
}
	/*Colonne des réseaux sociaux*/
	footer div.rsociaux {
		width:290px;
		padding-top:30px;
		padding-left:30px;
	}
	footer div.rsociaux a img {
		margin:30px;
		border:none;
	}
	footer div.rsociaux a img:hover {
		-webkit-box-shadow:0px 0px 5px 5px #f2f2f2, 0px 0px 0px 5px #f2f2f2 inset;
		-moz-box-shadow:0px 0px 5px 5px #f2f2f2, 0px 0px 0px 5px #f2f2f2 inset;
		-o-box-shadow:0px 0px 5px 5px #f2f2f2, 0px 0px 0px 5px #f2f2f2 inset;
		box-shadow:0px 0px 5px 5px #f2f2f2, 0px 0px 0px 5px #f2f2f2 inset;
	}
	/*Colonne des liens*/
	footer div.liens {
		width:315px;
		border-left:1px solid #f2f2f2;
		border-right:1px solid #f2f2f2;
	}
	footer div.liens p {
		font-size:1.3em;
		text-align:center;
		line-height:2em;
	}
	footer div.liens p a {
		color:#f2f2f2; 
		-webkit-transition:color 0.3s ease 0s;
		-moz-transition:color 0.3s ease 0s;
		-o-transition:color 0.3s ease 0s;
		transition:color 0.3s ease 0s;
	}
	footer div.liens p a:hover {
		color:#0a8cbf;
		-webkit-transition:color 0.7s ease 0s;
		-moz-transition:color 0.7s ease 0s;
		-o-transition:color 0.7s ease 0s; 
		transition:color 0.7s ease 0s;
	}
	/*Colonne des coordonnées*/
	footer div.coordonnees {
		padding-top:30px;
	}
	footer div.coordonnees img {
		margin-left:120px;
		margin-top:30px;
	}
	footer div.coordonnees h3 {
		text-align:center;
		color:#f2f2f2;
	}
	footer div.coordonnees p {
		text-align:center;
		color:#f2f2f2;
		line-height:1.6em;
	}
footer p.copyright {
	font-size:0.8em;
	text-align:center;
	color:#f2f2f2;
}