@charset "utf-8";
/* CSS Document */

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
background: url(../img/background-light.jpg) top center no-repeat #000;
margin: 0;
padding: 0;
text-align: left;
}

* { margin: 0; padding: 0 }

p { text-align: left; margin: 15px 0 }

p, ul { line-height: 1.4em } 

p a, li a { color: #39c; text-decoration: none }

p.intro { border-bottom: 1px solid #ccc; margin-bottom: 20px; padding: 20px 0 30px 0; text-align: center; width: 100% }

p#cross-links { text-align: center }

p#cross-links { border-bottom: 1px solid #ccc; margin-bottom: 30px; padding-bottom: 30px }

noscript p, noscript ol { color: #a00; font-size: 13px; line-height: 1.4em; text-align: left }
noscript a { color: #a00; text-decoration: underline }
noscript ol { margin-left: 25px; }

a { color:olive; text-decoration: none; }

a:focus { outline:none }

img { border: 0 }

h3 { border-bottom: 1px solid silver; margin-bottom: 5px; padding-bottom: 3px; text-align: left }


#global {
width: 950px;
margin: auto;
}

#header {
height: 240px;
width: 950px;
text-align: center;
}

*+html #header {
height: 250px;
}

* html #header {
height: 250px;
}

#header img {
margin: auto;
border: none;
margin-top: 10px;
height: 220px;
width: 950px;
}

#content {
width: 950px;
margin-bottom: 20px;
}

*html #content {
margin-left: 40px;
}

#slider-buttons h2 {
font-weight: normal;
font-size: 16px;
}

#contenu {
width: 910px;
background: url(../img/contenu-bg.gif) repeat-y center top #151515;
padding: 20px;
}

#miniboutique {
width: 550px;
height: 335px;
float: left;
clear: left;
}

#miniboutique a.titre {
float: left;
margin: 0;
}

#miniboutique #casques a {
margin: 0 15px 20px 15px;
float: left;
}

#miniboutique .legende {
width: 520px;
text-align: justify;
font-size: 12px;
float: left;
clear: left;
}

#miniboutique #casques {
width: 350px;
height: 280px;
float: left;
clear: left;
margin-top: 1px;
margin-left: 10px;
}

*+html #miniboutique #casques {
margin-left: 30px;
}

#actualiterecente {
width: 350px;
height: 335px;
float: left;
}

#actualiterecente .mininews {
width: 350px;
height: 85px;
overflow-y: hidden;
margin: 20px 0;
}

#actualiterecente .mininews img {
float: left;
width:180px;
height: 80px;
margin-right: 10px;
}

#actualiterecente .titre {
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
}

#actualiterecente .date {
font-size: 10px;
font-weight: bold;
color: #666666;
}

#actualiterecente .intro {
font-size: 10px;
color: #FFFFFF;
}

#contact {
width: 910px;
height: 192px;
background: url(../img/contact-bg.png) no-repeat center top;
padding: 20px;
}

#contacts {
}

#contacts fieldset {
border: none;
}

#content #menu {
width: 950px;
height: 27px;
padding-top: 14px;
margin-left: 50px;
}

*+ html #content #menu {
padding-top: 1px;
}

#content #menu li {
display: inline-block;
float: left;
margin-left: 15px;
}

*html #content #menu li {
margin-left: 14px;
}

#content #menu li.flag {
margin-left: 10px;
}

#btn-acceuil {
background: url(../img/btn-acceuil.png) no-repeat top center;
height: 19px;
width: 81px;
cursor: pointer;
}

#btn-acceuil:hover {
background: url(../img/btn-acceuil.png) no-repeat bottom center;
}

#btn-acceuil-it {
background: url(../img/btn-acceuil-it.png) no-repeat top center;
height: 19px;
width: 85px;
cursor: pointer;
}

#btn-acceuil-it:hover {
background: url(../img/btn-acceuil-it.png) no-repeat bottom center;
}

#btn-actualites {
background: url(../img/btn-actualites-it.png) no-repeat top center;
height: 19px;
width: 60px;
cursor: pointer;
}

#btn-actualites:hover {
background: url(../img/btn-actualites-it.png) no-repeat bottom center;
}

#btn-actualites-it {
background: url(../img/btn-actualites-it.png) no-repeat top center;
height: 19px;
width: 83px;
cursor: pointer;
}

#btn-actualites-it:hover {
background: url(../img/btn-actualites-it.png) no-repeat bottom center;
}

#btn-societe {
background: url(../img/btn-societe.png) no-repeat top center ;
height: 19px;
width: 83px;
cursor: pointer;
}

#btn-societe:hover {
background: url(../img/btn-societe.png) no-repeat bottom center;
}

#btn-societe-it {
background: url(../img/btn-societe-it.png) no-repeat top center;
height: 19px;
width: 141px;
cursor: pointer;
}

#btn-societe-it:hover {
background: url(../img/btn-societe-it.png) no-repeat bottom center;
}

#btn-realisations {
background: url(../img/btn-realisations.png) no-repeat top center;
height: 19px;
width: 140px;
cursor: pointer;
}

#btn-realisations:hover {
background: url(../img/btn-realisations.png) no-repeat bottom center;
}

#btn-realisations-it {
background: url(../img/btn-realisations-it.png) no-repeat top center;
height: 19px;
width: 114px;
cursor: pointer;
}

#btn-realisations-it:hover {
background: url(../img/btn-realisations-it.png) no-repeat bottom center;
}

#btn-boutique {
background: url(../img/btn-boutique.png) no-repeat top center;
height: 19px;
width: 100px;
cursor: pointer;
}

#btn-boutique:hover {
background: url(../img/btn-boutique.png) no-repeat bottom center;
}

#btn-boutique-it {
background: url(../img/btn-boutique-it.png) no-repeat top center;
height: 19px;
width: 85px;
cursor: pointer;
}

#btn-boutique-it:hover {
background: url(../img/btn-boutiquel-it.png) no-repeat bottom center;
}

#btn-partenaires {
background: url(../img/btn-partenaires.png) no-repeat top center;
height: 19px;
width: 135px;
cursor: pointer;
}

#btn-partenaires:hover {
background: url(../img/btn-partenaires.png) no-repeat bottom center;
}

#btn-partenaires-it {
background: url(../img/btn-partenaires-it.png) no-repeat top center;
height: 19px;
width: 126px;
cursor: pointer;
}

#btn-partenaires-it:hover {
background: url(../img/btn-partenaires-it.png) no-repeat bottom center;
}

#btn-contacts {
background: url(../img/btn-contacts.png) no-repeat top center;
height: 19px;
width: 108px;
cursor: pointer;
}

#btn-contacts:hover {
background: url(../img/btn-contacts.png) no-repeat bottom center;
}

#btn-contacts-it {
background: url(../img/btn-contacts-it.png) no-repeat top center;
height: 19px;
width: 121px;
cursor: pointer;
}

#btn-contacts-it:hover {
background: url(../img/btn-contacts-it.png) no-repeat bottom center;
}

.introduction {
margin-left: 60px;
width: 850px;
padding: 25px 15px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
font-weight: normal;
font-style: italic;
}

.introduction p {
width: 880px;
margin-left: -60px;
}

*+html #introduction {
height: 67px;
}

div.introduction {
	margin-left: 0;
}

#slidon {
background: url(../img/slider-bg.png) top center no-repeat;
width: 949px;
height: 524px;
margin: 0;
padding-top: 1px;
}

#multicasque {
margin: auto;
width: 900px;
}

,*html #multicasque, *+html #multicasque {
margin-top: -40px;
}

#stripNav0 {
position: relative;
top: -70px;
}

#stripNav1 {
display: none;
}

.stripViewer .panelContainer .panel ul {
	text-align: left;
	margin: 0 15px 0 30px;
}

.slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */
	margin: 20px 0;
	position: relative;
	width: 100%;
}

/* These 2 lines specify style applied while slider is loading */
.csw {
width: 100%;
height: 367px;
background: #000;
overflow: scroll;
	-moz-border-radius: 5px;
	-khtml-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}
#multicasque .csw {
height: 80px;
background: none;
}
.csw .loading {margin: 200px 0 300px 0; text-align: center}
#multicasque .csw .loading {margin: 80px 0 80px 0; text-align: center}

.stripViewer { /* This is the viewing window */
	position: relative;
	overflow: hidden; 
	border: none; /* this is the border. should have the same value for the links */
	margin: auto;
	width: 912px; /* Also specified in  .stripViewer .panelContainer .panel  below */
	height: 367px;
	clear: both;
	background: #202020;
}

#multicasque .stripViewer { /* This is the viewing window */
	position: relative;
	overflow: hidden; 
	border: none; /* this is the border. should have the same value for the links */
	margin: auto;
	width: 800px; /* Also specified in  .stripViewer .panelContainer .panel  below */
	height: 80px;
	background: none;
	clear: both;
}



.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
	position: relative;
	left: 0; top: 0;
	width: 100%;
	list-style-type: none;
	/* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */
}

.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
	float:left;
	height: 100%;
	position: relative;
	width: 912px; /* Also specified in  .stripViewer  above */
}

#multicasque .stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
	float:left;
	height: 100%;
	position: relative;
	width: 800px; /* Also specified in  .stripViewer  above */
}
.stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */
	padding: 0;
}

.stripNav { /* This is the div to hold your nav (the UL generated at run time) */
	margin: auto;
}

#slider .legende {
padding: 6px;
font-size: 12px;
}

.stripNav ul { /* The auto-generated set of links */
	list-style: none;
}

.stripNav ul li {
	float: left;
	margin-right: 2px; /* If you change this, be sure to adjust the initial value of navWidth in coda-slider.1.1.1.js */
}

.stripNav a { /* The nav links */
	font-size: 10px;
	font-weight: bold;
	text-align: center;
	background: #000;
	color: #fff;
	text-decoration: none;
	display: block;
	padding: 5px 10px;
}

.stripNav li.tab1 a { background: #000 }
.stripNav li.tab2 a { background: #000 }
.stripNav li.tab3 a { background: #000 }
.stripNav li.tab4 a { background: #000 }

.stripNav li a:hover {
	background: #333;
}

.stripNav li a.current {
	background: #333;
	color: #fff;
}

.stripNavL, .stripNavR { /* The left and right arrows */
	position: absolute;
	top: 30px;
	text-indent: -9000em;
}

.stripNavL a, .stripNavR a {
	/* display: block;
	height: 40px;
	width: 40px; */
	display: none;
}

#multicasque .stripNavL a {
	display: block;
	height: 20px;
	width: 20px;
}

#multicasque .stripNavR a {
	display: block;
	height: 20px;
	width: 20px;
}

.stripNavL {
	left: 0;
}

.stripNavR {
	right: 0;
}

.stripNavL {
	background: url("../img/arrow-left.gif") no-repeat center;
}

.stripNavR {
	background: url("../img/arrow-right.gif") no-repeat center;
}

#contact #left {
width: 200px;
height: 180px;
float: left;
margin-top: 10px;
}

#contact #center {
width: 420px;
height: 180px;
float: left;
margin-top: 10px;
}

#center #message {
width: 380px;
height: 100px;
background: url(../img/textearea-bg.png) repeat-x;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 1px solid #474747;
margin: 3px 0 3px 0;
color: #FFF;
padding: 5px;
font-weight: normal;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}

#contact #adresses {
width: 280px;
font-size: 11px;
height: 175px;
padding-top: 5px;
padding-left: 10px;
float: left;
margin-top: -15px;
}

label {
padding-left: 5px;
font-size: 12px;
}

input {
border: 1px solid #474747;
padding: 7px 0 5px 5px;
margin: 3px 0 10px 0;
color: #FFF;
background: url(../img/input-bg.png) repeat-x;
height: 16px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
height: 15px;
}

#contact .submit {
height: 29px;
padding: 3px;
cursor: pointer;
}

#contact .submit:hover {
color: #000;
background: url(../img/input-on-bg.png) repeat-x;
border: 1px solid #000;
}

#contact h2 {
font-size: 14px;
font-weight: normal;
}

#contact h3 {
font-size: 12px;
font-weight: normal;
border: none;
}

#contact .email {
background: url(../img/ico-email.png) no-repeat left;
padding: 2px 2px 2px 20px;
color: #999999;
}

#contact .tel {
background: url(../img/ico-telephone.png) no-repeat left;
padding: 2px 2px 2px 20px;
color: #999999;
}

#contact .email a {
color: #FF0000;
text-decoration: none;
}

#contact .tel span {
color: #FFF;
}

#slider2 a {
margin: 0;
}

*+html #slider2 {
margin: 40px 0 0 0;
}

#slider2 img {
margin: 0;
}

#slider2 a {
margin-left: 45px;
}

/* Easy Slider */
 
#slider{
	margin: 21px 10px 10px 18px ;
}	
#slider ul, #slider li, #slider2 ul, #slider2 li{
	margin:0;
	padding:0;
	list-style:none;
	}
#slider li{ 
	/* 
		define width and height of list item (slide)
		entire slider area will adjust according to the parameters provided here
	*/ 
	width:924px;
	height:324px;
	overflow:hidden;
	}
#slider2 li{ 
	/* 
		define width and height of list item (slide)
		entire slider area will adjust according to the parameters provided here
	*/ 
	width:850px;
	height:100px;
	overflow:hidden;
	margin-top: 10px;
	}		
	
p#controls, p#controls2{
	margin:0;
	position:relative;
	} 

#prevBtn, #nextBtn, #prevBtn2, #nextBtn2{ 
	display:block;
	margin:0;
	overflow:hidden;
	text-indent:-8000px;		
	width:30px;
	height:77px;
	position:absolute;
	left: 10px;
	top:-65px;
	}	
#nextBtn { 
	left:924px;
	}	
#nextBtn2{ 
	left:864px;
	}														
#prevBtn a, #nextBtn a {  
	display:block;
	width:30px;
	height:77px;	
	}	
#prevBtn2 a, #nextBtn2 a{  
	display:block;
	width:12px;
	height:20px;
	background:url(../img/btn_prev.png) no-repeat 0 0;	
	}	
#nextBtn2 a{ 
	background:url(../img/btn_next.png) no-repeat 0 0;	
	}														
#slider-buttons {
margin-left: 30px;
margin-top: 13px;
font-size: 12px;
height: 40px;
}
/* // Easy Slider */

.actualite {
width: 800px;
margin: 20px auto;
}

.actualite img {
float: left;
margin-right: 20px;
border: 1px solid white;
padding: 2px;
}

.actualite .titre {
font-size: 16px;
font-weight: bold;
color: #FFFFFF;
padding-bottom: 5px;
padding-top: 5px;
}

.actualite .date {
font-size: 12px;
font-weight: bold;
color: #666666;
padding-bottom: 5px;
}

.actualite .intro {
font-size: 14px;
line-height: 18px;
color: #FFFFFF;
}

.actualite .lirelasuite {
font-size: 14px;
line-height: 18px;
font-weight: bold;
color: #999999;
padding-top: 20px;
float: right;
}

.actualite h3 {
font-size: 14px;
font-weight: normal;
color: #FFFFFF;
clear: left;
line-height: 18px;
float: none;
padding: 40px 20px;
}

#adresse {
margin: 30px 0;
font-size: 16px;
}

#adresses .adresse {
	clear: left;
}

#adresse .adresse {
font-weight: normal;
}

#adresse .tel {
color: olive;
}

#adresse .email a {
color: #ff0000;
}

#plan {
width: 850px;
height: 370px;
margin: auto;
overflow: hidden;
}

#plan .adresse {
float: left;
width: 300px;
height: 100px;
margin-top: 240px;
background: #333333;
padding: 10px 0 0 10px;
color: #FFFFFF;
font-size: 14px;
	-moz-border-radius-topright: 5px;
	-ms-border-radius-topright: 5px;
	-khtml-border-radius-topright: 5px;
	-webkit-border-top-right-radius: 5px;
	border-radius: 5px;
}

#plan .adresse h3 {
border: none;
font-size: 16px;
}

#plan .adresse .email {
margin-top: 8px;
}

#Zoombox {
padding: 20px;
}

.partenaires {
height: 120px;
margin: 20px 0;
}

.partenaires img {
float: left;
margin-right: 20px;
}

.partenaires a h3.nom {
	font-size: 18px;
}

#footer {
padding: 25px;
font-size: 16px;
}

#footer a {
color: #FFFFFF;
font-weight: bold;
font-style: italic;
}

#footer ul {
width: 900px;
text-align:center;
}

#footer li {
display: inline-block;
float: left;
margin: 0 25px;
}

*html #footer li {
margin: 0 20px;
}

ul.boutique li {
	height: 240px;
	list-style: none;
	margin: 20px;
}

ul.boutique li img {
	height: 200px;
	margin: 20px;
	float: left;
}

ul.details {
	list-style: none;
	float: left;
	width: 600px;
	text-align: left;
	list-style: none;
}

ul.details li {
	height: auto;
	list-style: none;
}

ul.details li.nom {
	font-size: 24px;
	color: olive;
}

ul.details li.description {
	font-size: 14px;
}

ul.details li.poids, ul.details li.tailles {
	font-size: 16px;
}

ul.details li.prix {
	font-size: 20px;
	color: #39c;
}