/***********************************************************************
 * Titre :		Feuille de style site GSPM
 * Auteur :		Marc Hauser / Fauvette
 * Revision :	09.07.2010
 * ---------------------------------------------------------------------
 * TABLE DES MATIERES
 * 0. Grid system (extension à Baseline)
 * 
 * 1. Balises html courantes
 * 	1.1 Titres
 * 	1.2 Barre horizontale
 * 	1.3 Tableaux
 * 	1.4 Auteurs
 * 	1.5 Liens
 * 	1.6 Listes
 * 	1.7 Paragraphes
 * 	1.8 Formulaires
 * 
 * 2. Éléments de mise en page du site
 * 	2.1 Bannière
 * 	2.2 Barre horizontale
 * 	2.3 Sous-menu
 * 	2.4 Container contenu
 * 	2.5 Footer
 * 
 * 3. Classes particulières valables sur tout le site
 * 	3.1 Boites latérales
 * 	3.2 Boîtes pour les dossiers
 * 	3.3 Listes de liens
 * 	3.4 Images de taille standard commentées
 * 	3.5 Infobulles
 * 	3.6 Liens RSS
 * 	3.7 Lightbox images
 * 
 * 4. Classes spécifiques à certaines pages
 * 	4.1 Organigramme du groupe
 * 	4.2 Carte de présentation des responsables (page responsables)
 * 	4.3 Page de présentation des unités
 * 	4.4 Articles du journal de bord programmés sur le site 2.0
 * 	4.5 Cours de formation
 * 	4.6 Particularités de la page d'accueil
 *  4.7 Menu des dossiers
 " ********************************************************************/

/***********************************************************************
 *
 * Partie 0 :
 * Grid system (extension à Baseline)
 * 
 * ********************************************************************/

#page					{ margin: 0 auto 36px auto; z-index: 0; font-family: helvetica; }
.layout-grid			{ background: url(css/background-grid/images/baseline+column.png) repeat 0 1px; border-bottom: solid 1px #b3e2f0; }


/***********************************************************************
 *
 * Partie 1 :
 * Balises html courantes
 * 
 * ********************************************************************/

/*
 * 1. Titres
 */
h1, h2, h3, h4, h5, h6 	{ position: relative; clear: both; line-height: 18px; }
h1, h2					{ margin-bottom: 9px; margin-top: 18px; }
h3, h4, h5, h6			{ margin-bottom: 0px; margin-top: 0;}
h1						{ font-size: 22px; top: 1px; }
h2						{ font-size: 18px; top: 2px; color: #052036; margin-bottom: 5px; padding-bottom: 4px; }
h3						{ font-size: 14px; top: 4px; }
h4						{ font-size: 13px; top: 5px; }
h5						{ font-size: 12px; top: 5px; font-weight: normal; text-transform: uppercase; margin-bottom: 9px; }
h6						{ font-size: 12px; top: 5px; font-weight: bold; margin-bottom: 0px;}

/*
 * 2. Barre horizontale
 */
hr						{ position: relative; height: 1px; margin: 18px 0 -1px 0; }

/*
 * 3. Tableaux
 */
table					{ border-top: none; position: relative; top: 0px; margin-top: 18px; padding-bottom: 18px; clear: left;}
th, td					{ border-top: none; line-height: 18px; padding: 9px 18px 9px 0; position: relative; }
th:first-child, td:first-child { padding-left: 5px; }
th:last-child, td:last-child { padding-right: 5px; }
tr:nth-child(even) td 	{ }
tr:nth-child(odd) td 	{ background: #f6f6f6; }
caption					{ top: 8px; margin-bottom: 18px; }

/*
 * 4. Auteurs
 */
au						{ font-family:inherit; font-size:100%; font-weight:inherit; font-style:inherit; vertical-align:baseline; white-space:normal; text-align:left; margin:0; padding:0; border:0; outline:0; background:transparent }
au						{ font-size: 13px; line-height: 18px; position: relative; clear: both; display: block; top: 5px; font-style: italic; margin-bottom: 9px; }

/*
 * 5. Liens
 */
a						{ color: #0b4476; text-decoration: none; }
a:hover					{ text-decoration: underline; }

/*
 * 6. Listes
 */
ul, ol, dl, dialog		{ margin-top: 9px; margin-bottom: 9px; }
ul						{ margin-left: 0; padding-left: 0; list-style-type: none;}
ol						{  }
ul li					{ margin-left:0; padding-left: 24px; background-image: url('img/bullet.png'); background-repeat: no-repeat; background-position: 0 0; }

/*
 * 7. Paragraphes
 */
p						{ margin-bottom: 9px; }

/*
 * 8. Formulaires
 */
input.first				{ margin-left: 0px; }


/***********************************************************************
 *
 * Partie 2 :
 * Éléments de mise en page du site
 * 
 * ********************************************************************/

/*
 * 1. Bannière
 */ 
#banniere				{ height: 138px; margin-top:9px; margin-bottom: -18px; padding-bottom: 0; text-align: right;}

/*
 * 2. Menu
 */ 
#topMenu 				{ display: block; float: left; padding: 0; height: 27px; border-bottom: 1px solid #d2d2d2; width: 100%; }
#topMenu ul				{ overflow: hidden; padding: 0; margin: 0; top: 0px; font-size: 1.1667em; list-style: none; font-variant: small-caps; }
#topMenu li				{ float: left; padding-left: 0; margin-right: 9px; background: none; }
#topMenu a				{ background: #f6f6f6; border: 1px solid #d2d2d2; text-decoration:none; height: 26px; line-height: 26px; display: block; float: left; padding: 0 9px 0 9px; }
#topMenu a:hover,
#topMenu a.selected		{ color: #D00000; text-decoration: none; }
#topMenu a.selected		{ background: none; border-bottom: 1px solid #ffffff; }

/*
 * 3. Sous-menu
 */ 
#subMenu				{ padding: 0; border-bottom: 1px solid #d2d2d2; margin-bottom: 18px; height: 26px; }
#subMenu ul				{ padding: 0 0 0 10px; margin: 0; top: 0px; font-size: 1em; }
#subMenu li				{ display: inline; background: url("img/subMenuSeparator.png") no-repeat 0 0; margin-top: 0px; padding: 0px 10px 0px 10px; }
#subMenu li.firstItem 	{ background-image: none; padding-left: 0; }
#subMenu li.lastItem 	{ padding-right: 0;}
#subMenu li.right-item 	{ float: right; background-position: 0 5px; }
#subMenu a				{ text-decoration: none; height: 25px; line-height: 25px; }
#subMenu .subMenuLinkActive,
#subMenu a:hover		{ color:#D00000; text-decoration:none; }

/*
 * 4. Container contenu
 */
#content				{ overflow: visible; z-index: 10; }

/*
 * 5. Footer
 */
div.footer				{ border-top: 1px solid #D2D2D2; }
div.footer p			{ margin-top: -1px; text-align: right; color: #7F7F7F; font-size: 12px; }

/***********************************************************************
 *
 * Partie 3 :
 * Classes particulières valables sur tout le site
 * 
 * ********************************************************************/

/*
 * 1. Boites latérales
 */
div.boxRight			{ background-color: #E7E7E7; margin-bottom: 18px; }
div.boxRight h5,
div.boxRight p,
div.boxRight address	{ padding: 0 5px 0 5px; z-index: 0; }
div.boxRight ul			{ margin-left: 0; padding-left: 5px; padding-right: 5px; }
div.boxRight ul li		{ margin-left: 0; padding-left: 24px; }
div.boxRight ol			{ padding-left: 5px; padding-right: 5px; }
div.boxRight ol li		{ padding-left: 4px; }

/*
 * 2. Boîtes pour les dossiers
 */

div.dossiersBoxesRight { border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; }
div.dossiersBoxesRight p { margin-bottom: 0; }
div.dossiersBoxes a,
div.dossiersBoxesRight a,
div.dossiersBoxes a:hover,
div.dossiersBoxesRight a:hover { color: #000000; text-decoration: none; }
div.dossierBox1,
div.dossierBox2,
div.dossierBox3			{ height: 117px; color: #FFFFFF; font-size: 25px; line-height: 36px; padding: 18px 10px 0 10px; border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; }
div.dossiersBoxes		{ margin-top: 9px; padding-bottom: 0; height: 243px; overflow: hidden; }

div.titreRight,
div.footerRight 		{ padding-bottom: 10px; margin-bottom: 17px; }
div.footerRight			{ margin-top: -9px; }
div.titreRight h5		{ padding: 0 5px 0 5px; margin-bottom: 0;}
div.titreRight			{ background-color: #E7E7E7; }

/*
 * 3. Listes de liens
 */
ul.linkListe a			{ color: #000000; text-decoration: none; }
ul.linkListe a:hover 	{ color: #0b4476; text-decoration: none; }
li p.linkDescription 	{ color: #333333; }
ul.linkListe li	 		{ background-image: url('img/bullet_quickListe.png'); }
li.doc					{ background-image: url(img/icons/doc.png); }
li.odt					{ background-image: url(img/icons/odt.png); }
li.xls 					{ background-image: url(img/icons/xls.png); }
li.ods					{ background-image: url(img/icons/ods.png); }
li.pps					{ background-image: url(img/icons/pps.gif); }
li.pdf 					{ background-image: url(img/icons/pdf.gif); }
li.txt					{ background-image: url(img/icons/txt.png); }
li.link					{ background-image: url(img/icons/link.gif); }
li.img					{ background-image: url(img/icons/img.gif); }
li.zip					{ background-image: url(img/icons/zip.png); }

/*
 * 4. Images de taille standard commentées
 */
div.img_486, div.img_234 { background-color: #f2f2f2; padding-bottom: 9px; margin-top: 9px; margin-bottom: 9px; }	
div.img_234				{ margin-right: 18px; float: left;}
div.img_486 p,
div.img_234 p			{ padding-left: 5px; padding-right: 5px; font-size: 12px; top: 3px; margin-bottom: 0;}

/*
 * 5. Infobulles
 */
a.infoBox				{ float: right; border: 1px solid transparent; text-decoration: none; }
a:hover span.infobulle 	{ margin-left: 0em; margin-top: 1em; text-decoration: none; }
span.infobulle			{ border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; border: 1px solid #86ABD9; background: #E7F3FD; color: black; position: absolute; padding: 2px; width: 300px; margin-top: 1em; margin-left: -999em; z-index: 99; text-decoration: none; }

/*
 * 6. Liens RSS
 */
div.rssLink				{ float: right;	margin-bottom: -20px; margin-top: -10px; }
li.rss					{ list-style-image: url(img/icons/rss.gif); }
img.rssImg				{ float: right; }
img.rssImg-left			{ margin-right: 5px; }
h1 img.rssImg-left		{ margin-bottom: -1px; }
h2 img.rssImg-left		{ margin-bottom: -1px; }
h5 img.rssImg-left		{ margin-bottom: -3px; }
p img.rssImg-left		{ margin-bottom: -2px; }

/*
 * 7. Lightbox images
 */
#lightbox, #lightbox *,
#lightboxDetails,
#lightboxCaption,
#keyboardMsg,
#overlay, #overlay *,
#closeButton			{ margin: 0; padding: 0; border: 0;	outline: 0;	font-size: 100%; vertical-align: baseline; background: transparent; }

#lightbox				{ background-color:#fff; padding: 10px; }
#lightboxDetails		{ font-size: 0.8em;	padding-top: 0.4em;	}	
#lightboxCaption		{ float: left; }
#keyboardMsg			{ float: right; }
#closeButton			{ top: 5px; right: 5px; }

#lightbox img			{ border: none; } 
#overlay img			{ border: none; }
#overlay				{ background-image: url(css/overlay.png); }

* html #overlay			{ background-color: #000; back\ground-color: transparent; background-image: url(blank.gif);	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="css/overlay.png", sizingMethod="scale"); }

/***********************************************************************
 *
 * Partie 4 :
 * Classes spécifiques à certaines pages
 * 
 * ********************************************************************/

/*
 * 1. Organigramme du groupe
 */
.responsablesOrganiGroupe,
.responsablesOrganiUnite 	{ border: 1px solid #B2B2B2; margin: -1px auto -1px auto; padding-bottom: 9px; }
.responsablesOrganiGroupe:hover,
.responsablesOrganiUnite:hover { border: 1px solid #D00000; text-decoration: none; }
.lienOrganigramme:hover			{ text-decoration: none; }
.noLink:hover				{ border: 1px solid #B2B2B2; }
a:hover .responsablesOrganiGroupe p,
a:hover .responsablesOrganiUnite p { text-decoration: none; }
.responsablesOrganiGroupe p,
.responsablesOrganiUnite p 	{ font-size: 14px; top: 4px; line-height: 18px; text-indent: none; text-align: center; color: #B2B2B2; margin-bottom: 0; padding-left: 5px; padding-right: 5px; z-index: 0; }
.responsablesOrganiGroupe 	{ float: left; margin-left: 176px; clear: both; width: 132px; }
.responsablesInnenBoxTop 	{ background: #F0F0F0; margin-bottom: 0; padding-bottom: 9px;}
.responsablesInnenBoxTop p 	{ font-size: 16px; top: 3px; margin-bottom: 0; }
.responsablesOrganiLine1 	{ margin: 0 auto 0 auto; padding: 0; height: 18px; width: 1px; background: #B2B2B2; clear: both; }
.responsablesOrganiLine2 	{ margin: 0; height: 18px; padding: 0; width: 56px; border-right: 1px solid #B2B2B2; float: left; }
.responsablesOrganiLine3,
.responsablesOrganiLine4 	{ margin: 0; padding: 0; height: 17px; width: 123px; border-right: 1px solid #B2B2B2; border-top: 1px solid #B2B2B2; float: left; }
.responsablesOrganiLine5	{ margin: 0; padding: 0; height: 17px; width: 123px; border-right: 1px solid #B2B2B2; border-top: 1px solid #B2B2B2; float: left; clear: right;}
.responsablesOrganiUnite	{ float: left; margin-right: 18px; width: 106px; }
.responsablesOrganiUniteFirst { clear: left; }
.responsablesOrganiUniteLast { margin-right: 0; margin-bottom: 17px; clear: right;}

/*
 * 2. Carte de présentation des responsables (page responsables)
 */
.responsableCard		{ background-color: #E7E7E7; width: 224px; padding: 0 5px 0 5px; margin-top: -1px; margin-bottom: 18px;}
.responsableCard p		{ z-index: 0; }
.responsableCardResponsabilites	{  }
.responsableCardPhoto	{ margin: 0 0 0 5px; padding: 0; }
.responsableCardTotem	{ font-size: 20px; top: 2px; margin-bottom: -9px; }
.responsableCardEmail	{ top: 7px; margin-bottom: 3px; }

/*
 * 3. Page de présentation des unités
 */
.indexUnites_box img	{ width: 234px; height: 144px; margin-bottom: 9px; }
.responsableCardEmail img { width: auto; height: auto; }
.page_responsables img	{ margin-bottom: 0px; }
.indexUnites_box p,
.indexUnites_box address { padding-left: 5px; padding-right: 5px; z-index: 0; }
.indexUnites_header		{ margin: 0 0 18px 0; padding: 5px 5px 13px 5px; }
.indexUnites_header h2	{ color: #FFFFFF; margin-bottom:0; padding-bottom: 0; border-bottom: none;}
.indexUnites_meute 		{ background: #d2e8eb; }
.indexUnites_meute .indexUnites_header,
.responsables_header_meute { background: #86deeb; }
.indexUnites_troupe		{ background: #eee5c6; }
.indexUnites_troupe .indexUnites_header,
.responsables_header_troupe	{ background: #e0c887; }
.indexUnites_raiders	{ background: #f2d4c7; }
.indexUnites_raiders .indexUnites_header,
.responsables_header_raiders { background: #c94945; }
.indexUnites_responsables { background: #deeecf; }
.indexUnites_responsables .indexUnites_header,
.responsables_header_responsables { background: #55870f; }
.indexUnites_responsables,
.indexUnites_raiders,
.indexUnites_troupe,
.indexUnites_meute 		{ margin-bottom: 18px; }

.page_responsables .indexUnites_responsables,
.page_responsables .indexUnites_raiders,
.page_responsables .indexUnites_troupe,
.page_responsables .indexUnites_meute { padding-top: 9px; }

.linkUnite, .linkUnite:hover { color: #000000; text-decoration: none; }

/*
 * 4. Articles du journal de bord programmés sur le site 2.0
 */

.articleJDB				{ padding:0; margin: 0; }
.articleJDB img			{ max-width: 486px; }
img.right, img.left		{ max-width: 234px; }
img.center				{ max-width: 486px; }
.old-article-image-486	{ display: block; clear: both; padding: 0; }
.old-article-image-234	{ float: left; display: block; margin: 9px 18px 0 0; padding: 0; }

a.link_articleJDB		{ padding-left: 18px; }
p.deutsch				{ color: #006666; font-style: italic; }

/*
 * 5. Cours de formation
 */
.formation-echelles-ages,
.formation-echelles-ages-last	{ border-color: #000000; border-width: 1px 0 1px 0; border-style: solid; padding: 0px; width: 102px; margin-right: 9px; float:left; text-align: center; }
.formation-echelles-ages-last	{ margin-right: 0px; }
.formation-tableau				{ height: 546px; }
.cours_box						{ position: absolute; padding: 0 5px 0 5px; }
.msds							{ background: #00a650; }
.js								{ background: #ed1b24; }
.js-msds						{ background: url('img/formation/rouge-vert.png'); }
a.infoBoxFormation				{ float: right; margin-top: 5px;}
h5								{ display: inline; }
span.infobulleFormation			{ width: 400px; padding: 9px; }
a:hover span.infobulleFormationLeft	{ margin-left: -400px; }



/*
 * 6. Particularités de la page d'accueil
 */
h2.h2_index						{ margin-bottom: 18px; }
.colonne_accueil				{ background: #f6f6f6; padding-top: 9px; }
.colonne_accueil p,
.colonne_accueil address,
.colonne_accueil ul,
.colonne_accueil table,
.colonne_accueil h2,
.colonne_accueil h3,
.colonne_accueil h4				{ padding: 0 5px 0 5px; }
.colonne_accueil tr:nth-child(even) td	{ background: #f6f6f6; }
.colonne_accueil tr:nth-child(odd) td { background: #ffffff; }
.colonne_accueil .table-unit td	 { width: 103px; }
.colonne_accueil ul				{ margin-top: 0px }



/*
 * 7. Menu des dossiers
 */
.menu_dans_dossier li			{ margin-bottom: 9px; border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; padding: 18px; list-style: none; }
.menu_dans_dossier a,
.menu_dans_dossier a,
.menu_dans_dossier a:hover,
.menu_dans_dossier a:hover 		{ color: #ffffff; text-decoration: none; font-size: 25px; line-height: 27px; }
.menu_dans_dossier span			{ color: #ffffff; text-decoration: none; }