/*----------------------------------------------------------------------------//
// Feuille de styles du client -----------------------------------------------//
//----------------------------------------------------------------------------//
// Client : Collins
// Note   : Les font-size doivent ëtres en em, même les styles provenant de 
			stylesforeditor.css.
// Date   : 21 janvier 2008
//----------------------------------------------------------------------------*/
@import url(reset.css);/* Mise à zéro de tous les padding / margin par défaut */

/*- Général -------------------------------------------------------------------*/
body {
	font-family:			Arial, Verdana, Helvetica, Sans-serif;
	font-size:				62.6%; /* 10px par défaut */
	color:					#928e8e;
	background:				#000000;
	margin-bottom:			20px;
}
p {
	font-size:				1.1em;
	margin:					0 0 12px 0;
}
a {
	color:					#000000;
	text-decoration:		underline;
}
a:hover {
	text-decoration:		none;
}
sup {
	font-size:				80%;
	line-height:			100%;
	vertical-align:			text-top;
	padding-bottom:	 	    5px;
}
.clearer {
	clear:					both;
	font-size:				1px;
	height:					1px;
}

/*- Styles communs à toutes les pages -----------------------------------------*/
#wrapper {
	margin:					0 auto;
	width: 					930px;
	text-align: 			left;
	position:				relative;
}
#header, #header-home {
	height:					1%;
	background:				url(../images/Bg_Oblique.gif) repeat-x;
	position:				relative;
}
#header .logo, #header-home .logo {
	float:					left;	
	width:					150px;
	height:					62px;
	background-color:		#000000;
}
#header .logo img, #header-home .logo img {
	margin:					10px 0 0 8px;
}
#header .img-header {
	width:					930px;
	height:					186px;
	background-repeat:		no-repeat;
}

#main-menu {
	width:					775px;
	float:					left;	
	margin-top:				39px;
	height:					13px;
}
#main-menu li {
	float:					left;	
	margin-right:			18px;
}
#main-menu li.langue {
	float:					right;
	margin-right:			0;
}
#main-menu a {
	/*text-indent:            -9999px;
	overflow:				hidden;
	display:				block;
	height:					13px;
	background-position:	0 0;
	background-repeat:		no-repeat;*/
	
	font-size:1.1em;
	color:#9e9a9a;
	text-transform:uppercase;
	text-decoration:none;
}
#main-menu a:hover, #main-menu li.on a, #main-menu li.on a:hover {
	/*background-position:	0 -13px;*/
	color:#FFFFFF;
}

/* Item de menu FR par default */
/*#main-menu li.accueil a {
	width:					45px;
	background-image:		url(../images/Menu_Accueil_FR.gif);
}
#main-menu li.catalogue a {
	width:					61px;
	background-image:		url(../images/Menu_Catalogue_FR.gif);
}
#main-menu li.magasins a {
	width:					54px;
	background-image:		url(../images/Menu_Magasins_FR.gif);
}
#main-menu li.unites a {
	width:					86px;
	background-image:		url(../images/Menu_UnitesMobiles_FR.gif);
}
#main-menu li.quniforme a {
	width:					164px;
	background-image:		url(../images/Menu_Quniforme_FR.gif);
}
#main-menu li.apropos a {
	width:					101px;
	background-image:		url(../images/Menu_Apropos_FR.gif);
}
#main-menu li.contact a {
	width:					94px;
	background-image:		url(../images/Menu_Contact_FR.gif);
}
#main-menu li.langue a {
	width:					13px;
	background-image:		url(../images/Menu_Langue_FR.gif);
}*/

/* Footer */
#footer {
	height:					76px;
	background:				url(../images/Bg_Oblique.gif) repeat-x 0 36px;
	position:				relative;
}
#footer .logo {
	width:					150px;
	height:					76px;
	background-color:		#000000;
}
#footer .logo img {
	margin:					24px 0 0 28px;
}
#footer .link {
	position:				absolute;
	bottom:					0;
	right:					0;
	font-size:				1.0em;
	color:					#737373;
	margin-top:				3px;
}
#footer .link span, #footer .link a {
	padding:                0 8px;
}
#footer .link a {
	color:					#b7b7b7;
	text-decoration:		none;
}
#footer .link a:hover {
	text-decoration:		underline;
}

/*- Styles spéciaux pour page d'accueil ---------------------------------------*/
#header-home { 
	height:					62px;
}
/* Image accueil FR par default */
h1#slogan {
	width: 					930px;
	height:					327px;
	background-repeat:		no-repeat;
	text-indent:            -9999px;
	overflow:				hidden;
	background-image:		url(../images/Bg_Slogan_FR.jpg);
	background-position:	top right;
}
#content-home .container {
	float:					left;
	width:					300px;/*352px*/
	margin:					25px 0 0 0;
	padding:                0 26px;
	font-size:				1.1em;
	line-height:			1.6em;
	overflow:				hidden;
}
#content-home a {
	color:					#f58426;
	text-decoration:		none;
}
#content-home a:hover {
	text-decoration:		underline;
}
#product-menu {
	width: 					570px;
	position: 				relative;
	float:					right;
}
#product-menu ul {
	border:           		1px solid #464646;
	overflow:				hidden;
	background:				#323232 url(../images/Bg_BoxProduitsAcc.gif) repeat-x;
	height:					127px;       
}
#product-menu li {
	float: 					left;
	width: 					101px;
	height: 				127px;
	border-right:           1px solid #464646;
	cursor:					pointer;
	background-repeat:		no-repeat;
	background-position:	5px center;
	position:				relative;
	overflow:				hidden;
}
#product-menu li.one { background-image: url(../images/Img_AccChausTravail.png); width:255px; }
#product-menu li.two { background-image: url(../images/Img_AccVetTravail.png); }
#product-menu li.three { background-image: url(../images/Img_AccAccessoires.png); }
#product-menu li.four { background-image: url(../images/Img_AccSecurite.png); border-right: 0; }

/* Hidden content */
#product-menu li div {
	width: 					130px;
	height: 				85px;
	position:				absolute;
	left:					110px;
	top:					25px;
	overflow:				hidden;
}
#product-menu li.one div {
	left:					120px;
}
#product-menu li div span {
	font-size:				1.1em;
	line-height:			1.3em;
	color:					#928e8e;
}
#product-menu li div h2 {
	text-transform:			uppercase;
	font-size:				1.6em;
	font-weight:			bold;
	color:					#ffffff;
}

/*- Styles spéciaux pour pages intérieures ------------------------------------*/
h1#title-bar {
	width: 					930px;
	height:					40px;
	background-color:		#515151;
	background-position:	23px center;
	background-repeat:		no-repeat;
	text-indent:            -9999px;
	overflow:				hidden;
}
/* Titre des sections par defaut en francais */
h1.index-catalogue {
	background-image:		url(../images/Ti_IndexCatalogue_FR.gif);
}
h1.catalogue {
	background-image:		url(../images/Ti_Catalogue_FR.gif);
}
h1.magasins {
	background-image:		url(../images/Ti_Magasins_FR.gif);
}
h1.unites {
	background-image:		url(../images/Ti_Unites_FR.gif);
}
h1.quniforme {
	background-image:		url(../images/Ti_Quniforme_FR.gif);
}
h1.apropos {
	background-image:		url(../images/Ti_Apropos_FR.gif);
}
h1.contact {
	background-image:		url(../images/Ti_Contact_FR.gif);
}
h1.plandusite {
	background-image:		url(../images/Ti_PlanDuSite_FR.gif);
}
h1.politique {
	background-image:		url(../images/Ti_PolitiqueConf_FR.gif);
}
h1.services {
	background-image:		url(../images/Ti_Services_FR.gif);
}

#content, #content-index, #content-galerie, #content-full {
	background-color:		#FFFFFF;
	min-height:             300px;
	height:                 auto !important;
	height:                 300px;
	padding:                50px 0 25px 0;
}
.left-column {
	float:					left;
	width:					260px;
}
.main-column, .catalog-column {
	float:					left;
	width:					610px;/*670px*/
	padding:          	    0 30px;
}
#content-full .main-column {
	width:					840px;
	float:					none;
}
#content-galerie .main-column {
	width:					515px;/*570px*/
}
#content-galerie .galerie-column {
	color:					#000000;
	width:					325px;
	padding-top:            55px;
	float:					left;
}
#content-galerie .galerie-column img {
	margin:					0 0 15px 0;
}
#content-galerie .galerie-column p {
	margin:					0 0 20px 0;
}
#content-galerie .galerie-column hr {
	margin:					0 0 30px 0;
}

/* Styles pour le contenu */
.main-column h2, .catalog-column h2 {
	color:					#343334;
	font-size:				2.3em;
	font-weight:			bold;
	text-transform:			uppercase;
	margin-bottom:			30px;
}
.main-column h3 {
	color:					#000000;
	font-size:				1.4em;
	font-weight:			bold;
	text-transform:			uppercase;
	margin-bottom:			5px;
}
.main-column h4 {
	color:					#000000;
	font-size:				1.2em;
	font-weight:			bold;
	margin-bottom:			5px;
}
.main-column p {
	color:					#000000;
	font-size:				1.2em;
	line-height:			2.0em;
	margin-bottom:			25px;
}
.main-column hr, .galerie-column hr {
	border:					0;
	color:					#cccccc;
	background-color:		#cccccc;
	height:					1px;
	width:					98%;
	margin-bottom:			20px;
}
.main-column ul {
	margin: 				0 0 30px 15px;
	padding:				0;
	color:					#000000;
	font-size:				1.2em;
	line-height:			2.0em;
}
.main-column ul li {
	list-style:				disc outside url(../images/Puce_Liste.gif);
	padding:				0 0 5px 0;
	padding:				0;
}
.main-column ol {
	margin: 				0 0 30px 24px;
	padding:				0;
	color:					#000000;
	font-size:				1.2em;
	line-height:			2.0em;
}
.main-column ol li {
	list-style:				decimal outside;
	padding:				0 0 5px 0;
	padding:				0;
}
.main-column p p, .main-column p h4,
.main-column ol li ol li, .main-column ul li ul li {
	font-size:				1em;
}
#BtDownload {
	margin:0 auto;
	display:block;
	width:210px;
	height:45px;
	background:url(../images/Bt_TelechargerCat_FR.gif) no-repeat;
	text-indent:-9999px;
	overflow:hidden;
}

/* Sous-Menu */
ul#submenu {
	width:					210px;
	color:					#515151;
	margin:					0 auto;
}
ul#submenu li { margin-bottom:25px; }
ul#submenu li a {
	font-size:				1.3em;
	font-weight:			bold;
	color:					#5e5e5e;
	text-transform:			uppercase;
	padding:                2px 0;
	border-bottom:			4px solid #5e5e5e;
	text-decoration:		none;
	
	display:				block;
	width:					210px;
}
ul#submenu li ul { margin-top:15px; }
ul#submenu li ul li { margin-bottom:5px; }
ul#submenu li ul li a {
	font-size:				1.1em;
	font-weight:			normal;
	text-transform:			none;
	text-decoration:		none;
	border-bottom-width:	0;
	padding:                0;
}
ul#submenu li ul li a.on {
	border-bottom-width:	1px;
}
ul#submenu li a.on, ul#submenu li ul li a.on,
ul#submenu li a:hover, ul#submenu li ul li a:hover {
	color:					#000000;
	border-bottom-color:	#000000;
	text-decoration:		none;
}


/*- Page index du catalogue ----------------------------------------------------*/
#content-index {
	background:				#FFF url(../images/Bg_IndexCatalogue.gif) repeat-y;
	min-height:             350px;
	height:                 auto !important;
	height:                 350px;
}
#content-index .index-column {
	float:					left;
	width:					232px;
}
#content-index .index-column div {
	width:					165px;
	margin: 				0 auto;
}
#content-index .index-column img {
	width:					145px;
	height:					140px;
	margin-bottom:			40px;
}
#content-index .index-column p, #content-index .index-column a {
	font-size:				1.1em;
	line-height:			1.3em;
	color:					#000000;
}
#content-index .index-column h2 {
	padding-bottom:			20px;
	min-height:             40px;
	height:                 auto !important;
	height:                 40px;
}
#content-index .index-column h2 a {
	text-transform:			uppercase;
	font-size:				1.6em;
	font-weight:			bold;
	text-decoration:		none;
}
#content-index .index-column a {
	text-decoration:		underline;
}
#content-index .index-column a:hover {
	text-decoration:		none;
}


/*- Page du catalogue ----------------------------------------------------------*/
.catalog-column h2 {
	float:					left;
	width:					380px;
	margin-right:          	10px;
	margin-bottom:			0;
}
.catalog-column div.pager {
	width:					210px;
	color:					#8a8a8a;
	font-size:				1.1em;
	float:					right;
	text-align:				right;
	line-height:			2.3em;
}
.catalog-column div.pager a {
	padding:                0 10px;
	text-decoration:		none;
	color:					#8a8a8a;
}
.catalog-column div.pager a:hover {
	text-decoration:		underline;
}
.catalog-column div.pager a.on {
	font-weight:			bold;
	color:					#000000;
	text-decoration:		none;
}

.product-list {
	clear:					both;
	padding-top:			30px;
}
.product-list div {
	width:					155px;
	min-height:             300px;
	height:                 auto !important;
	height:                 300px;
	margin:                 0 72px 20px 0;
	
	float:					left;
	color:					#000000;
}
.product-list h3 {
	font-size:				1.3em;
	font-weight:			bold;
	margin:					15px 0 3px 0;
}
.product-list p {
	line-height:			1.6em;
}
.product-list span.marquage {
	display:				block;
	background-color:		#c2c2c2;
	height:					21px;
	margin:					15px 0;
}
.product-list span.marquage a {
	float:					left;
	margin:					2px 0 0 6px;
}
.product-list span.marquage img {
	display:				inline-block;
	vertical-align:			top;
}
.product-list span.marquage img.logo {
	margin:					0;
	vertical-align:			top;
	float:					right;
	width:					41px;
	height:					21px;
}
.product-list div.last {
	margin-right:          	0px;
}

/* Tooltips */
.tool-title, #tool-tip-group {
	display:				none;
}
.tool-tip {
	background:				#FFFFFF url(../images/Bg_Tooltip.gif) repeat-y top left;
	border:					2px solid #000000;
	width:					475px;
	position:				absolute;
	visibility:				hidden;
	z-index: 				13000;
}
.tool-tip div.container {
	width:					345px;/*385px*/
	float:					left;
	margin-top:				25px;
	padding:                0 20px;
	color:					#000000;
}
.tool-tip div.container p {
	font-size:				1em;
	line-height:			1.6em;
	margin-bottom:			20px;
}	
.tool-tip div.container h4 {
	font-size:				1.1em;
	font-weight:			bold;
	text-transform:			uppercase;
	margin-bottom:			5px;
}
.tool-tip img.logo {
	margin:					25px 10px;
	width:					64px;
	height:					56px;
	float:					left;
}
.tool-tip img.pointer {
	position:				absolute;
	bottom:					-8px;
	left:					233px;/* calcul = width-(pointer/2) */
}

/* Styles pour la plan du site ----------------------------------------------*/
.TableauPlanSite {
	width:					100%;
	border-top:				2px solid #d4d4d4;
	vertical-align:			top;
}
.TableauPlanSite ul {
	margin-bottom:			20px;
}
.TableauPlanSite ul li a {
	font-size:1em;
}
.TableauPlanSite p {
	margin-bottom:5px;
}
.TableauPlanSite p a {
	text-transform:uppercase;
	font-size:1em;
	line-height:1.4em;
	text-decoration:none;
}
.TableauPlanSite p a:hover {
	text-decoration:underline;
}
.TableauPlanSite td {
	vertical-align:			top;
	padding:                12px 0;
}
.TableauPlanSite .CellPremierNiveau {
	width:					25%;
}
.TableauPlanSite .CellPremierNiveau a {
	font-size:1.4em;
	text-decoration:none;
	text-transform:uppercase;
	font-weight:bold;
	color:#343334;
}
.TableauPlanSite .CellPremierNiveau a:hover {
	text-decoration:underline;
}

.TableauPlanSite td table {
	width:					100%;
}
.TableauPlanSite td table td {
	width:					33%;
	padding:                0 10px 0 0;
}

/*- Styles de traduction -------------------------------------------------------*/
#lang-EN h1#slogan {
	background-image:		url(../images/Bg_Slogan_EN.jpg)
}
#lang-EN a#BtDownload {
	background-image:		url(../images/Bt_TelechargerCat_EN.gif);
}

/* Titres */
#lang-EN h1.index-catalogue {
	background-image:		url(../images/Ti_IndexCatalogue_EN.gif);
}
#lang-EN h1.catalogue {
	background-image:		url(../images/Ti_Catalogue_EN.gif);
}
#lang-EN h1.magasins {
	background-image:		url(../images/Ti_Magasins_EN.gif);
}
#lang-EN h1.unites {
	background-image:		url(../images/Ti_Unites_EN.gif);
}
#lang-EN h1.quniforme {
	background-image:		url(../images/Ti_Quniforme_EN.gif);
}
#lang-EN h1.apropos {
	background-image:		url(../images/Ti_Apropos_EN.gif);
}
#lang-EN h1.contact {
	background-image:		url(../images/Ti_Contact_EN.gif);
}
#lang-EN h1.plandusite {
	background-image:		url(../images/Ti_PlanDuSite_EN.gif);
}
#lang-EN h1.politique {
	background-image:		url(../images/Ti_PolitiqueConf_EN.gif);
}
#lang-EN h1.services {
	background-image:		url(../images/Ti_Services_EN.gif);
}

/*- Styles pour formulaires ----------------------------------------------------*/
div.form {
	margin-bottom:			30px;
}
div.form div, div.form hr {
	clear:					left;
}
div.form div p {
	float:					left;
	width:					265px;
}
div.form p label {
	display:				block;
	font-weight:			bold;
}
div.form span.error {
	color:					#FF0000;
	margin-left:			5px;
	font-weight:			normal;
	font-size:				0.9em;
}
div.form p input, div.form p textarea {
	font-size:				1.1em;
	border:					1px solid #000;
	padding:                2px;
}
input, textarea {
	font-family:			Arial, Verdana, Helvetica, Sans-serif;
}
input.button {
	font-size:				1.2em;
	font-weight:			bold;
	text-transform:			uppercase;
	color:					#FFFFFF;
	background-color:		#000000;
	border:					0;
	padding:				1px 8px;
	overflow:				visible;
}

/*- Styles de l'éditeur ----------------------------------------------------*/

/*- Classes pour les images -----------------------------------------*/
img.ImageContour {
	border:					1px solid #cccccc;
}
img.ImageGauche {
	border:					1px solid #cccccc;
	margin:					0  20px 10px 0;
}
img.ImageDroite {
	border:					1px solid #cccccc;
	margin:					0  0 10px 20px;
}

/*- Classes pour les tableaux ---------------------------------------*/
.main-column table.Tableau {
	width:					100%;
	margin:					12px 0;
	border-collapse:		collapse;
	border-spacing:	        0;
}
.main-column table.Tableau td.CelluleTitre {
	color:					#FFFFFF;
	font-weight:			bold;
	text-transform:			uppercase;
	background:				#515151;
	padding:				6px 12px;
	border-bottom:			1px solid #FFF;
	vertical-align:			top;
}
.main-column table.Tableau td.CelluleSousTitre {
	color:					#FFFFFF;
	font-weight:			normal;
	text-transform:			uppercase;
	background:				#8F8F8F;
	padding:				3px 12px;
	border-bottom:			1px solid #FFF;
	vertical-align:			top;
}
.main-column table.Tableau td {
	font-size:				1.1em;
	padding:				4px 12px;
	border-bottom:			1px solid #CCC;
	vertical-align:			top;
	color:					#000;
}