@charset "utf-8";
/*****************************************************************************************/
/*---------------------------------- color pro DEBUT ---------------------------------------*/
/* margin : http://www.cssdebutant.com/les-padding-en-css.html  						 */
/* mise en forme texte : http://www.cssdebutant.com/les-texte-en-css.php    
/* CSS : http://css.mammouthland.net/image-de-fond-background-css.php                   */
/*****************************************************************************************/
/*------ Forcer a occuper 100% de la verticale -----------------------*/
html {
	height: 120%; /* accordeon pas */
}
body {
	min-height: 100%;
	margin: 0;
	padding: 0;
}
/*-----------------------------*/
body img {
	border: none;
}
.Act { /**** LORSQUE LE SOUS-MENU est ACTIF - typo3 *****/
	background-image: url(images/back_puce.jpg);
}
* a {
	color: #737376;
	text-decoration: underline;
}
* a:hover {
	color: #0095ae; /*turquoise*/
	text-decoration: underline;
}
* ul { /* attention aux conflits avec margin-bottom de side_titre */
	margin-top: 0em;
}
body {
	overflow: scroll; /* force la barre verticale*/
	background-color: #FFF;/* #e8ebef; gris*/
	background-repeat: repeat-x;
	background-attachment: fixed;
	/**************************** background en bas de page 
	background-position: bottom;
	background-image: url(images/back_creme.jpg);
	************************************************************/
	/*-------- bloc centré */
	margin: 0;
	text-align: center;
	font-family: 'Dosis', sans-serif; /************** GOOGLE FONT Dosis:200,300,400,500,600,700,800 ****/
	font-weight: 500;
	/*font-style:italic;*/
	font-size: 1.0em;
	color: #6f686a;
	text-align: right;
	line-height: 1em;
	/**** SQCROLL BAR ***/
	overflow-x: hidden;/*overflow-y:visible|hidden|scroll|auto */
	/**************************** PUCES *************************************/
	font-size: 1em;
	line-height: 1.3em;
	list-style-type: none;
	list-style-image: url(/fileadmin/images/puce_bleue.png);
	background-repeat: no-repeat;
	background-position: 0% 85%;
	padding-left: 0px;/***********************************************************************/
}
/*---------------------- TABS pour les produits - extension  multicolonne---------------------*/
.sudoControls ol li.current a { 	/* Selection courante */
	color: #FFF; 					/*couleur de fond des cases produits*/
	background: #1570A6;				/*bleu foncé*/
}
.sudoControls ol li a {
	color: #6f686a; 					/*couleur de texte au repos */
	background: #eddfe3;
}
.effectBoxInner { /*bloc texte de tous les plugins column Voir classement */
	text-align: justify;
	font-size: 1em;
	/* line-height: 1.4em;*/
	width: 700px;
	margin: .1em 0 0 0;
}
.effectBoxInner li { /* voir classement */
	text-align: left;
	list-style-type: none;
	list-style-image: url(../fileadmin/images/puce_bleue.png);
	background-repeat: no-repeat;
	background-position: 0% 85%;
}
/******************* Puces des produits PRODUITS ******************/
.columnItems { /*bloc texte des multicolonnes : voir l'usine */
	text-align: justify;
	font-size: 1em;
	line-height: 1.4em;
	width: 355px; /* largeur d'une colonne - item */
	margin: .1em 0 0 0;
}
.columnItems hr {
	text-align: left;
	border-width: 0;
	background-color: #c0c0c0;
	width: 98%;
	height: .5px;
	margin: 0.5em 0 -0.5em 0; /* haut droit bas gauche */ /* le bas rapproche le texte du dessous */
}

.columnItems li {
	text-align: left;
	list-style-type: none;
	/*list-style-image: url(/fileadmin/images/puce_bleue.gif);*/
	background-repeat: no-repeat;
	background-position: 0% 85%;
	padding-left: -2em;
}
#c50 { /* classement */
}
#c48 { /**/
}
/*------------------------ TABS CLASSEMENT ---------------------------------------*/

	

/*-----------------------------------------------------------------------------------*/
.multicolonne {
	font-size: 0.9em;
	text-align: justify;
}
#home_div {
	line-height: 1.35em;
	margin-top: -20px;
	padding-top: 9px;
}
#home_div a { /* meme que menu */
	font-weight: 700;
	color: #FFF;
	letter-spacing: 1px;
	text-decoration: none;
	display: block;
	cursor: pointer;
	font-size: 15px;/* border-left-width: 1px ;*/ /* barre entre les entrees de menu*//* border-left-style: solid; *//*border-left-color: #cccccc;*/
}
#home_div a:hover {
	color: #FFF;
	letter-spacing: 1px;
	text-decoration: none;
	background-image: url();
	background-color: #1570a6; /* bleu microsoft  */
}
/****************** Bloc texte et LETTERINE ******************************/
p {
	text-align: justify;
	font-size: 1em;
	line-height: 1.5em;
	width: 98%;
	margin: .9em 0 0 0;
}
/* Pas de lettrine

p:first-letter {
	float: left;
	font-size: 1.5em;
	line-height: 0.7em;
	margin: 0 0 -0.1em 0;
} 
*/
/***********************************************************/
.urgence {
	color: #C30;
	text-decoration: blink;
	text-align: center;
}
hr {
	text-align: left;
	border-width: 0;
	background-color: #c0c0c0;
	/*width: 100%;*/
	height: 1px;/*margin: 0.5em 0 -0.5em 0; *//* haut droit bas gauche */ /* le bas rapproche le texte du dessous */
}
hr:after { 	/*  content: "\273D \273D \273D"; 	  letter-spacing: 1em; 	  color: #aaa; */
}
hr:hover { /* background-color: #F00;*/
}
/****************** TABLEAUX **************************************/
#note {
	padding: 5px;
	border: thin #999 dotted;
	background-color: #F5F5F5;
}
#note h3 {
	margin-top: .2em;
	margin-bottom: 0.2em;
}
#tablo_usine table {
	/* border: thin solid #1570a6;*/ /*contours bleus */
	border-collapse: collapse; /* pas d'ecartement entre lignes */
	width: 720px;
	letter-spacing: .1em;
}
#XXXtablo_usine table p:first-letter {
	float: left;
	font-size: 1em;
	line-height: 1em;
	margin: 0.28em 0 0 0;
	letter-spacing: .1em;
}
#tablo_usine th {
	font-family: monospace;
	border: thin solid #6495ed;
	width: auto; /*50%*/
	padding: 5px;
	background-color: #D0E3FA;/* background-image: url(sky.jpg); */
	font-size: 1.2em;
}
#tablo_usine td {
	/* border: thin solid #6495ed; */
	width: auto;/*50%*/
	padding: 5px;
	vertical-align: top;
	/*	vertical-align: text-center; */
	/*vertical-align:center;*/
	text-align: left;
	background-color: #FFF;
}
#tablo_usine h2 {
	margin-top: -0.2em;
	margin-bottom: 0.3em;
}
#tablo_usine caption {
}
/*********************************** TITRAGE ********************************************/
h1 { /* entete de bloc */
	font-family: 'Dosis', sans-serif; /************** GOOGLE FONT Dosis:200,300,400,500,600,700,800 ****/
	font-variant: small-caps; /******** google font ****/
	color: #6f686a;/* couleur au repos*/
	font-weight: 800;
	letter-spacing: 0.2em;
	line-height: 0em; /* espace entre le titre et le texte */
	font-size: 1.3em;
	;
	font-variant: small-caps;
}
h2 {/* mise en relief rubrique question */
	font-weight: 600;
	font-size: 1.1em;
	color: #1570A6;/* margin-bottom:-0.3em; */
}
h3 { /* slogan publicitaire dans les gammes*/
	font-weight: 500;
/*	font-family: 'Aguafina Script', cursive; */
	font-family: 'Noto Sans', sans-serif;
	font-size: 1.4em;
	font-style:italic;
	color: #ed600d;  /*ea8f59 orange */
	margin-bottom: 0em;
	/*margin-top:-0.5em; */
	letter-spacing: 0.05em;
}
h4 {
	color: #5cb2c1;
}
.titreBleu { /* idem que H4 sans les balise p dans typo3*/
	color: #5cb2c1;
	font-weight: bold;
}
/**********************************************************************************/
#sv-container { /*div de simpleviewer*/
	margin-left: auto;
	margin-right: auto;/* border: thin dashed #bcbec2; */
}
#global {
	/*-------- bloc centré a l'aide de auto*/
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	/*-------- bloc centré */
	width: 100%; /* 940 */
	padding: 0;/*margin-top: 0px;
	margin-bottom: 0px;
	padding-bottom: opx; *//*----- decoration bas de page *//* background-color: #FFF; */
	/*----- DEBUG ---------*/
	/*------------- BARRE DE BAS DE PAGE  ------------------*/
	border-bottom: 3px solid #6F686A; /* 7 pix */
}
#telephone {
	color: #FFF;
	background-color: #000;
	overflow: hidden; /* TI empeche le contenu flotté de dépasser des limites*/
	width: 940px;
	height: 68px; /****** pousse la frise vers le bas ********************/
	margin-left: auto; /* centrage par auto */
	margin-right: auto; /* centrage *//*border: thin #F00 dotted;*/
}
#entete {
	height: 263px; /* hauteur de l entete ---> barre grise du haut */
	background: #000;
	background-position: bottom;
	background-image: url(images/back_entete_noir.jpg);
	background-repeat: repeat-x;
	margin: 0px; /* l'entete impose une marge autour d'elle - 10px tout autour*/
	padding: 0px;  /* simple securite */
	overflow: hidden; /* TI force les div frise et menu à rester à l'interieur de l'entete */
}
#titre_papeterie {
	font-size: 1.3em;
	letter-spacing: .2em;
	font-family: 'Dosis', sans-serif;
	color: #FFF;
}
#frise {
	overflow: hidden;
	/*background-image: url(images/back_entete.jpg);*/
	background-repeat: repeat-x;
	margin-left: auto;
	margin-right: auto;
	height: 190px; /*239*/
	width: 940px;/*margin: 5px;/*------ debug  -----*//* border: 1px solid #ff0000; *//*debug rouge */
}
#imageFrise { /* l'image de fise est une div - elle pousse le menu vers le bas */
	overflow: hidden; /* ne depasse pas de la div */
	width: 942px;
	height: 166px; /*213*/
}
#menu {
	overflow: hidden;
	width: 940px;
	height: 25px; /* 30 */
	margin-left: -2px;
	/*margin-left: auto;
	margin-right: auto;*/
	background-color: #000;
	background-repeat: repeat-x;
	border: 2px solid #000; /*00*/
}
/*************************************************************************************************/
/*************************************************************************************************/
#corps {
	overflow: hidden;
	background-color: #FFF;
	/*	overflow: hidden; /* TI empeche le contenu flotté de dépasser des limites*/
	width: 940px;
	/*height: 1000px; */
	/*margin-left: auto; /* centrage par auto */
	/*margin-right: auto; *//* centrage */
	margin: auto;
	margin-top : 5px;/*border: 1px solid #F00; */
}
#contenu { /* englobe colonne 2 et colonne 2 qui lui donnent sa largeur*/
	width: 730px;/*676*/
	margin-left: 195px; /* colonne1 flotte a sa gauche---> marge important */
	padding-bottom: 0px;
	margin-bottom: 0px;
	padding: 7px;
	padding-left: 20px; /* permet de decoller la ligne verticale du contenu*/
	border-left: thin dotted #666;
	/*	 border-left: thin solid #000*/; /* trait de séparation entre barre gauche et contenu*//* border-right: thin solid #cacaca; */
	height: 100%;
}
#footer {
	clear: both;
	height: 50px;
	background-color: #F90;
	/*	clear: left;*/
	width: 100%;
	margin: auto; /*centage*/
	/* padding: 15px 20px 10px 0;*/
	font-size: 0.85em;
	color: #000;
	text-align: center;/*jaune chaud*/
	border: 1px solid #F0F;
}
/*************************************************************************************************/
/*************************************************************************************************/
/*************************************************************************************************/
#colonne1 {
	float: left;
	/* flotte à gauche du suivant - casse le flux naturel de ligne en ligne pour ramener le suivant sur la meme ligne - il faut donner une marge 10+240+10  à contenu*/
	/* la colonne est flottée == la div contenu s'enroule autour d'elle */
    /* TI le footer est repouss vers le bas OK */	
	width: 170px; /*185*/
	/* height: 100%; */
	padding: 0px;
	color: #333;
	margin: 0px 0px 0px 0px; /* 0 5 5 5 *//*border: thin dotted #666; */
}
#colonne1 {
	font-size: 0.9em;/*	border-right-style: solid; 	border-right-width: 1px; 	border-right-color: #b5b5b5; */
}
#colonne1 a {
	color: #737376;
	text-decoration: none;
}
#colonne1 a:link {
	cursor: pointer;
}
div#colonne1 a:hover {
	color: #0095ae; /*turquoise*/
	text-decoration: underline;
}
#colonne1 ul { /* decalage des puces*/
	padding-left: 15px;
	margin-top:0;

	}
	

	
#colonne1 li { /* mettre des puces en images methode background*/
	font-size: 1.1em;
	line-height: 0.8em;
	list-style-type: none;
	list-style-image: url(../fileadmin/images/puce_bleue.png);
	background-repeat: no-repeat;
	background-position: 0% 85%;
	margin: 8px;
}
/*mettre espacement pour encadrer le sous menu */
#colonne1 a:before {
	content: '';
	padding-left:3px;
}
#colonne1 a:after {
	content: '';
	padding-right: 3px;
}
#footer a {
	color: #000;
}
#footer a:hover {
	color: #cacaca;
}
div#footer {
	clear: left;
	margin: auto;
	position: relative;
	/*margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px; */
	text-align: center;
	width: 940px;
	background-color: transparent;
	font-size: 0.8em;/* width:100%; *//* background-image: url(img/color_pro_allumette4.jpg);*//*background:#f2b013; *//*jaune chaud *//* height:240px; */
}
html>body div#footer {
	height: auto;
	min-height: 20px;
}
#footer hr {
	display: block;
	clear: both;
	height: 0;
	margin: 20px 0 20px;
	padding: 0;
	border: 0;
	font-family: arial;
	text-align: center;
	font-size: 20px;
	line-height: 1;
	/* IE */
	height: 1px;
	margin: 0.5em 0;
	padding: 0;
	color: #Fff;
	background-color: #Fff;
	border: 0;
}
}
#footer hr:after {
	content: "\263C \263C \263C \263C \263C \263C \263C \263C \263C \263C \263C \263C \263C \263C \263C \263C \263C \263C \263C \263C \263C \263C \263C \263C \263C ";
	height: 0;
	letter-spacing: 1em;
	color: #fff;
}
#footer p {
	color: #CCC;
}
#footer ul li {
	color: #FC0;
	list-style-type: none;
}
/********************************** SIDE BARRE ******************************************************/
div#side_barre {
	font-size: 1em;
}
div#side_barre a {
	color: #737376;
	text-decoration: none;
}
div#side_barre a:hover {
	color: #0095ae; /*turquoise*/
	text-decoration: underline;
}
#side_barre ul {
}
#side_barre li { /* mettre des puces en images methode background*/
	font-size: 0.9em;
	line-height: 1.3em;
	list-style-type: none;
	list-style-image: url(/fileadmin/images/puce_bleue.png);
	background-repeat: no-repeat;
	background-position: 0% 85%;
	padding-left: 0px;
}
.side_titre {
	/* margin-bottom: -.5em; /* remonte les puce vers le titre de la rubrique */
	text-align: left;
	font-size: 1.2em;
	color: #0095ae;
	/*font-weight: bold;*/
	
	border-top-width: 1px;
	border-top-color: #b5b5b5;
	border-top-style: dotted;
	border-bottom-width: 1px;
	border-bottom-color: #b5b5b5;
	border-bottom-style: dotted;
	padding: 0.2em;
	padding-left: 0.5em;/* background-image:url(accordeon/barre_off.jpg); */
	margin-bottom:-15px;
	margin-top:-20px;

}
/****************************** DEBUT FORMULAIRE *******************************************/
form {
	font-size: 0.9em;
	/*background-color: #e3e3e3; /* bleu b4d5f2*/
	padding: 5px;
	width: 700px;
	line-height: 0.7em;
}
fieldset {
	background-color: #e3e3e3;
	border: 1px solid #a7a7a7;
	padding: 5px;
	margin: 5px;
}
legend {
	/*font-weight:bold;*/
	color: #2eaadc;
}
label {
	padding : 5px;
	display: block;  /* permet d'afficher les champs avec des sauts de ligne */
}
label.en-ligne {
	display: inline;
}
label.question {
	color: #029DE0;
	font-weight: bold;
}
input {
	border: 1px solid #a7a7a7;
	background: #fff;
	color: #666;
}
input:focus {
	background : #1570A6;
	color: #FFF;
}
input[type=radio] {
	margin-right: 20px;
}
input.decolle-curseur {
	padding-left: 5px;
}
input[type=submit], input[type=reset] {
	letter-spacing: 0.2em;
	font-weight: 700;
	background: #1570A6;
	border: 1px solid #FFF;
	/* font-weight:bold;*/
	color: #FFF;
	cursor: pointer;
	margin: 5px;
	margin-left: 550px;
	padding: 5px;
}
input[type=submit]:hover, input[type=reset]:hover {
	background-color: #6f686a;
}
input[type=submit]:active, input[type=reset]:active {
	background-color: #000;
	color: white;
}
textarea {
	background : #FFF;
	border : 1px solid #a7a7a7;
	width : 95%;
	margin : .5em 0;
	padding : 4px;
	color: #666;
}
textarea:focus {
	background : #1570A6;
	color: #FFF;
}
option, select {
	background-color: #fff;
}
option, select:hover {
	background-color: #d9e6ff;
}
/********************************************************* FIN FORMULAIRE DE CONTACT **************************************************/