/* CSS ARPALINE */

/*************************************************************************/
/*--------------------------- STYLE EXTERNES ----------------------------*/
/*************************************************************************/
/*--vignette--*/
@import url(vignette.css);
/*--menutop et menuleft--*/
@import url(menu/menu.css);
/*--menutop et menuleft--*/
@import url(colonne-menuleft.css);
/*--contact--*/
@import url(contact.css);
/*--pagination--*/
@import url(pagination.css);

/*************************************************************************/
/*--------------------------- STYLE GLOBAL ------------------------------*/
/*************************************************************************/
html, body{
	font-size:70%;
	height:100%;
}

/*************************************************************************/
/*---------------------------STYLE CHARTE -------------------------------*/
/*************************************************************************/
body{
	background:#FFF url(../images/charte/bg-site-arpaline.jpg) center top no-repeat;
} 
#conteneur{
	width:990px;
	margin:0 auto;
	text-align:left;
	min-height:100%;
	position:relative;
}
/*---------------------------HEADER------------------------------*/
#haut{
	height:267px;
	width:990px;
	position:relative;
	background:url(../images/charte/bg-header.jpg) no-repeat;
}
#flashlogo{
	width:180px;
	height:200px;
	position:absolute;
	left:30px;
	top:0;
}
#haut #accesPro{
	width:209px;
	height:78px;
	float:right;
	padding:28px 0 0 10px;
	margin:30px 0 0 0;
	background:url(../images/charte/bg-accespro.jpg) bottom center no-repeat;
}
#haut #accesPro .loginchamp{
	width:186px;
	height:20px;
	float:left;
	margin:1px 0 2px 0;
	padding-left:4px;
	background:none;
	color:#666;
}
#haut #accesPro .btOk{
	height:19px;
	width:56px;
	cursor:pointer;
	text-indent: -9999px;
	background:url(../images/charte/bt-ok-accespro.jpg) no-repeat;
}
#haut #accesPro label{
	color:#333;
}

/***********accesPro 2 *********/

#haut #accesPro2{
	width:209px;
	height:106px;
	float:right;
	padding:30px 0 0 10px;
	margin:0;
	background:url(../images/charte/bg-accespro-large.jpg)
}
#haut #accesPro2 #welcomeText{
	width:190px;
	height:60px;
	margin:10px 0 0 0;
	float:left;
}
#haut #accesPro2 #accesPro2-deco{
	width:76px;
	height:19px;
	display:block;
	clear:both;
	cursor:pointer;
	outline:none;
	background:url(../images/charte/bt-decon-accespro.jpg) no-repeat;
}
#haut #suiviClient{
	width:181px;
	height:52px;
	display:block;
	position:absolute;
	right:20px;
	top:215px;
	background:url(../images/charte/bt-suivi-client.jpg) no-repeat;
}
#haut #suiviClient span{
	display:none;
}

/*---------------------------CONTENU------------------------------*/
#gauche{
	width:259px;
	float:left;
	position:relative;
	min-height:100%;
}
#carteAgences{
	width:259px;
	height:227px;
	display:block;
	float:left;
	position:relative;
	background:url(../images/charte/carte-agence-vide.jpg) no-repeat;
}

#carteAgences .point{
	position:absolute;
}

#carteAgences .point a{
	width:10px;
	height:15px;
	background:url(../images/charte/pointeur-carte-agence.gif) no-repeat;
	display:block;
	position:absolute;
}

#texte{
	/*background:url(../images/charte/contenu.jpg) no-repeat;*/
	width:650px; 	/* soustraire les padding à la largeur normal de la div */
	height:auto;
	min-height:300px;
	position:relative;
	float:right;
	padding: 0px 20px 20px 20px;
}
#livreflash {
	width:620px;
	height:530px;
	float:left;
	margin:12px 0 0 -78px;
}
#bg-livre{
	width:649px;
	height:611px;
	float:left;	
	position:relative;
	background:url(../images/livreflash/bg-pageflip.jpg) no-repeat;
}
#menuLivre{
	width:649px;
	height:29px;
	background:url(../images/livreflash/bg-menu.jpg) no-repeat;
	float:left;
	padding:12px 0 0 0;
	margin:0 0 40px 0;
}
#menuLivre li{
	float:left;
}
#menuLivre li a{
	color:#333;
	text-decoration:none;
	margin:0 10px 0 10px;
}
/*---------------------------BAS DE PAGE ------------------------------*/
#global_bas{
	margin:-217px 0 0 0;/*----rajouter en marge négative la hauteur de #bas---------*/
	background:#000;
	position:relative;
	clear:both;
	width:100%;
}
#bas{
	height:217px;/*----rajouter en marge négative la hauteur dans #global_bas---------*/
	position:relative;
	width:990px;
	margin:0 auto;
	background:url(../images/charte/bg-footer.gif) no-repeat;
}
#bas h2{
	color:#F90;
	font-size:1.7em;
}
#bas #menuFooter{
	width:260px;
	height:70px;
	float:left;
	padding:15px;
	margin:45px 0 0 0;
	background:url(../images/charte/bg-quickmenu-footer.jpg) no-repeat;
}
#bas #menuFooter li{
	float:left;
}
#bas #menuFooter a{
	text-decoration:none;
	color:#999;
	width:105px;
	height:21px;
	display:block;
	padding:7px 0 0 5px;
	margin:0 7px 0 7px;
	background:url(../images/charte/bullet-grey.gif) 0 12px no-repeat;
}
#bas #menuFooter a:hover{
	color:#F90;
	background:url(../images/charte/bullet-orange.gif) 0 12px no-repeat;
}
#bas #coords{
	font-size: 0.8em;
	color: #666666;
	clear:both;
	float:left;
	width:250px;
	margin:15px 0 0 20px;
}
#basLeft{
	width:280px;
	float:left;
}
#basContact{
	width:650px;
	height:205px;
	float:right;
	margin:0px 0 0 0;
}
#basContact input{
	font-size:1.5em;
	color:#999;
	width:259px;
	height:30px;
	margin:4px 0 4px 0;
	background:url(../images/charte/bg-input-contact-bas.gif) no-repeat;
}
#basContact textarea{
	font-size:1.5em;
	color:#999;
	width:283px;
	height:112px;
	float:right;
	background:url(../images/charte/bg-txtarea-contact-bas.gif) no-repeat;
}
#basContact .validform{
	width:58px;
	height:18px;
	display:block;
	cursor:pointer;
	float:right;
	margin:10px 0 0 0;
	background:url(../images/charte/bg-bt-contact-bas.gif) no-repeat;
}
.border{
	border-bottom:1px solid #333;	
}
/*************************************************************************/
/*--------------------------- STYLE TEXTE -------------------------------*/
/*************************************************************************/
body, table, div, p, select, textarea, span, .texte {
	font: 1em Arial, Verdana, Helvetica, sans-serif;
}
#texte p{
	margin: 10px 0;
	font:1.2em Arial, Helvetica, sans-serif;
	color:#333;
}
.petit_texte {
	font-size: 0.8em;
	color: #666666;
}
h1{
	font: bold 2em Arial, Verdana, Helvetica, sans-serif;
	margin:10px 0;
 }
.titrePage{
	width:100%;
	border-bottom:1px dotted #CCC;
	text-transform:uppercase;
}
.titrePage-small{
	color:#ff8f05;
	font-size:0.8em;
	text-transform:lowercase;
}
.titreAgence{
	padding:0 20px 0 0;
	margin:5px 20px 5px 0;
	color:#CCC;
	height:20px;
	width:100%;
	cursor:pointer;
	background:#000 url(../images/charte/bg-titreagence-span.jpg) right top no-repeat;
}
.titreAgence span{
	float:left;
	height:20px;
	padding:0 0 0 25px;
	background:url(../images/charte/bg-titreagence.jpg) left top no-repeat;
}
.titreAgence .bullet{
	width:16px;
	height:20px;
	float:left;
	background:url(../images/charte/arrow-right.png) center left no-repeat;
}

.titreRegion{
	margin:0px 0 15px 5px;	
}
h2{
	font: bold 1.4em Arial, Verdana, Helvetica, sans-serif;
	margin:10px 0;
}
h3{
	font: bold 1.2em Arial, Verdana, Helvetica, sans-serif;
	margin:10px 0;
}
#texte a:link, a:visited{                           
	color:#F90;
	/*text-decoration:underline;*/
}
#texte a:hover, a:active{                             
	color:#666;
	text-decoration:underline;
}
.avertissement {
	color: #CC0000;
}

.avertissement2 {
	color:#FF0606;
	font-weight:bold;
	text-decoration:underline;
}

#texte .titrepresentation{
	color:#F90;
	padding:0 0 0 15px;
	background:url(../images/charte/arrow-right.png) 0 2px no-repeat;
	width:266px;
}
#texte .miniliste{
	padding:0 0 0 7px;
	font-size:1.2em;
	color:#333;
	background:url(../images/charte/bullet-grey.gif) 0 6px no-repeat;
}
/*************************************************************************/
/*---------------------------- PAGE NEWS --------------------------------*/
/*************************************************************************/
.text-wrapper{
	text-align:justify;
	padding:0 0 10px 0;
	font:0.9em Arial, Helvetica, sans-serif;
	margin-bottom:10px;
}
#texte .imageNews{
	padding:5px;
	border:1px solid #CCC;
}
#texte .text-wrapper h3{
	color:#F90;
	font-style:italic;
	font-size:1.4em;
	float:left;
}
#texte .text-wrapper .etat{
	float:right;
	color:#666;
	margin:10px 35px 0 0;
}
#texte .text-wrapper .orange{
	color:#F90;
	font-weight:bold;
}
#texte .text-wrapper .date{
	color:#666;
	font-size:0.8em;
	font-style:italic;
}
/**** icones des commandes page news ****/
.actions{
	width:290px;
	height:30px;
	margin:0 0 10px 0;
	padding:10px 0 0 0;
}
#texte .actions a{
	text-decoration:none;
	margin:0 2px 0 2px;
}
.bt-edit{
	padding:2px 0 10px 25px;
	background:url(../images/news/ico-edit.jpg) 0 0 no-repeat;
}
.addItem{
	padding:2px 0 10px 25px;
	position:absolute;
	right:15px;
	top:0px;
	background:#FFF url(../images/news/ico-add.jpg) 0 0 no-repeat;
}
.bt-archive{
	padding:2px 0 10px 25px;
	background:url(../images/news/ico-archive.jpg) 0 0 no-repeat;
}
.bt-delete{
	padding:2px 0 10px 25px;
	background:url(../images/news/ico-delete.jpg) 0 0 no-repeat;
}

#div-image{
	float:left;
	width:160px;
}

#div-description{
	float:left;
	width:450px;
	margin-left:10px;
}

#div-description p{
	margin:0 0;
}

#div-pdf{
	margin-left:158px;
}

/*************************************************************************/
/*-------------------------- PAGE RECRUTEMENT ---------------------------*/
/*************************************************************************/
.btPostuler{
	width:82px;
	height:49px;
	display:block;
	float:left;
	background:url(../images/recrutement/bg-postuler.jpg) no-repeat;
}
#texte .nb-offre-recru{
	float:left;
	margin:0 0 10px 48px;
	font-weight:bold;
}
.nb-offre-recru .leNumero{
	color:#F90;
	font-weight:bold;
}

/*************************************************************************/
/*------------------------ PAGE PRODUIT DU MOIS -------------------------*/
/*************************************************************************/
#proMois{
	width:665px;
	position:relative;
	min-height:350px;
	padding:20px 0 0 0;
	margin:20px 0 0 0;
	background:url(../images/pro-mois/bg-fiche.jpg) left top no-repeat;
}
#proMois h1{
	color:#F90;
	margin:0 0 0 0;
}
#proMois h3{
	color:#333;
	margin:0 0 0 0;
}
#ficheContent{
	width:645px;
	float:left;
	margin:0 0 20px 10px;
}
#ficheContent p{
	padding:0 0 10px 0;
	border-bottom:1px solid #f0f0f0;
}
#fiche-bottom{
	width:665px;
	height:77px;
	background:url(../images/pro-mois/fiche-bottom.jpg) no-repeat;
	position:absolute;
	bottom:0;
	left:0;
	z-index:444;
}
#voirpro{
	width:111px;
	height:48px;
	float:left;
	display:block;
	cursor:pointer;
	margin:0 0 0 40px;
	background:url(../images/pro-mois/bt-envoiami.jpg) no-repeat;
}
#envoiami{
	width:111px;
	height:48px;
	float:left;
	display:block;
	cursor:pointer;
	margin:0 0 0 30px;
	background:url(../images/pro-mois/bt-voir-pro.jpg) no-repeat;
}
#fiche-img-zoom{
	width:54px;
	height:33px;
	display:block;
	background:url(../images/pro-mois/bt-zoom.jpg) no-repeat;
	position:absolute;
	right:140px;
	top:300px;
	z-index:555;
}

/*************************************************************************/
/*----------------------- STYLES LISTE FLUX RSS -------------------------*/
/*************************************************************************/
.picto-rss{
	background:url(../images/rss/picto-rss-small.jpg) 0 2px no-repeat;
	padding:0 0 0 20px;
}

dl#listeFluxrss { 
	width:300px;
	float:left; 
}
dl,dd { 
	margin: 0; 
}
dt { 
	padding: 5px 5px 10px 5px; 
	margin: 2px;
	font-weight:bold;
	text-transform:lowercase;
}
dt a { 
	color: #FFF; 
}
dd a { 
	color: #000; 
}

/*************************************************************************/
/*--------------------------MENTIONS LEGALES ----------------------------*/
/*************************************************************************/
.tabMentions{
	width:400px;
	height:15px;
	margin:3px 0 3px 0;
	padding:0 4px 0 4px;
	color:#F60;
	background:#e8e6e2;
}
.tabMentions span{
	float:right;
	color:#333;
}
.listeMentions li{
	margin:5px 0 5px 10px;
}
/*************************************************************************/
/*--------------------------------DIVERS --------------------------------*/
/*************************************************************************/
.clearer{
	clear:both;
}
.medclearer{
	clear:both;
	height:20px;
}
.bigclearer{
	clear:both;
	height:40px;
}
.bordure{
	width:100%;
	height:1px;
	border-bottom:1px solid #CCC;
}
.ligne1{
	background:#fff;
	color:#333;
}
.ligne2{
	background:#ebebeb;
	color:#333;
}
.left{
	float:left;
}
.right{
	float:right;
}
.white{
	color:#FFF;	
}
.rss{
	float:right;
	margin:5px 10px 0 10px;
}
.png-cgv{
	float:right;
	margin:12px 10px 0 10px;
}
.infoIco{
	width:26px;
	height:28px;
	display:block;
	float:left;
	margin:12px 10px 0 0;
	background:url(../images/charte/ico-info.png) no-repeat;
}	
#texte .readmore{
	padding:0 7px 0 0;
	text-decoration:none;
	margin:0 0 0 10px;
	background:url(../images/charte/bullet-orange.gif) right 5px no-repeat;
}
/*************************************************************************/
/*--------------------------------PERSO---------------------------------*/
/*************************************************************************/
form#login {
  position:relative;
}

div#username,
div#password {
  position:relative;
  float:left;
  margin-right:3px;
}

input#username-field, input#password-field {
  width:10em;
}

.btValid{
	float:left;
	text-indent:-8000px;
	font-size:0;
	border:0;
	outline:none;
	width:58px;
	height:18px;
	display:block;
	background:url(../images/charte/bt-valid.jpg) no-repeat;
	cursor:pointer;
	margin:0 0 0 5px;
}



.actif{
	width:17px;
	height:15px;
	display:block;
	background:url(../images/thickbox/actif.jpg) top left no-repeat;
	float:left;
	margin:10px 10px 10px 0;
}

.actif2{
	width:12px;
	height:11px;
	display:block;
	background:url(../images/vignettes/actif.jpg) no-repeat;
	float:right;
}

.inactif{
	width:17px;
	height:15px;
	display:block;
	background:url(../images/thickbox/inactif.jpg) top left no-repeat;	
	float:left;
	margin:10px 10px 10px 0;
}

.inactif2{
	width:12px;
	height:11px;
	display:block;
	background:url(../images/vignettes/inactif.jpg) no-repeat;
	float:right;
}

/* css pour la tooltip normal */
#tooltip{
	position:absolute;
	border:1px solid #333;
	background:#f7f5d1;
	padding:2px 5px;
	color:#333;
	display:none;
	z-index:200000;
}

.lienAfficherSiteMois{
	position:absolute;
	top:5px;
	right:20px;
}

/*************************************************************************/
/*----------------------- STYLES PAGE LISTE MODULE ----------------------*/
/*************************************************************************/
#list-modules li, #list-modules2 li{
	padding:0 0 0 6px;
	margin:0 0 5px 0;
	background:url(../images/charte/bullet.gif) 0 5px no-repeat;
}

/*************************************************************************/
/*----------------------- STYLES PAGE ORGANIGRAMME ----------------------*/
/*************************************************************************/
/*
#list-agence
#nom-agence

#list-employes
#employe
#photo_employe
#nom-employe
#fonction_employe
*/

#introduction-organigramme{
	width:100%;
}

#list-agence{
	width:570px;
	text-align:center;
	padding-left:80px;
}

#list-agence #nom-agence{
	float:left;
	width:171px;
	height:31px;
	padding-top:7px;
	margin-right:5px;
	margin-bottom:15px;
	background:url(../images/organigramme/bg-nom-agence.png) no-repeat;
}

#list-agence #nom-agence a{
	color:#FFF;
	font-size:14px;
	font-weight:bold;
}

#list-employes{
	width:100%;
	text-align:center;
}

#employe{
	float:left;
	width:125px;
	margin:10px 10px 10px 10px;
}

/*************************************************************************/
/*----------------------- STYLES PAGE LISTE MODULE ----------------------*/
/*************************************************************************/
#contenu{
	width:650px;
	border:1px solid #CCC;
}

#texte #image-aide, #texte #texte-aide{
	float:left;
	width:430px;
	padding:10px 5px 10px 5px;
}

#texte #image-aide{
	width:200px;
}

/*************************************************************************/
/*----------------------- STYLES PAGE GESTION DOC -----------------------*/
/*************************************************************************/