/* ==============================================
   FEUILLE DE STYLES DES GABARITS HTML/CSS
   © Elephorm & Alsacreations.com
      Adaptation ClaudeL
   ============================================== */
/* 2016-07-29 CL - ajouté boutons "submit"  */

/* --- STYLES DE BASE POUR LE TEXTE ET LES PRINCIPAUX ÉLÉMENTS --- */

/* Page */
html {
	font-size: 100%; /* Voir -> Note 1 à la fin de la feuille de styles. */
	/*
    1.	Ce "font-size: 100%" est normalement inutile. On l'utilise uniquement
	pour éviter un bug de redimensionnement du texte dans Internet Explorer.  */
}

/*
2.	Par défaut, les navigateurs ont un padding (ou, pour certains, un
	margin) de 6px pour l'élément BODY. C'est ce qui évite que le texte
	ne soit complètement collé aux bords de la zone de visualisation du
	navigateur lorsqu'on affiche une page «brute», sans mise en forme.
	Mais ce retrait de 6px est un peu faiblard: on le renforce donc.
	Notez bien que les feuilles de styles des gabarits pourront augmenter
	ce retrait, ou bien l'annuler.
	*/
body {
	margin: 0;
	padding: 5px 10px; /* Note -> 2 padding: 20px 5px; */
	font-family: Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif; /* 3 */
	font-size: .8em; /* -> 4 */
	line-height: 1.25; /* -> 5 */
	/* color: black;
	background: white; */
	/* color: #F0E39E;   */
	 background: #6D90AD; 
	 /*background: #2C2F22; */
}

/* Définition du conteneur général */
#global {
	width: 1024px;       /* largeur totale de la zone d'affichage */
	margin-left: auto;   /* pour centrer automatiquement le conteneur sur l'écran */
	margin-right: auto;  /* pour centrer automatiquement le conteneur sur l'écran */
}

/* En-tête */
l#entete {
	padding: 0; /* était à 20px */
	height:100px;
	background-image: url("Bandeau_j2mcl_1.jpg");
}
.bandeauj2mcl {  /* bandeau des pages avec barre de menus */   
	padding: 0; /* était à 20px */
	height:100px;
	width:1024px;
	background-image: url("Bandeau_j2mcl_1.jpg");
}

#entete h1 {
	margin: 0;
}
#entete h1 img {
	float: left;
	margin: 0;    /* margin: 7px 20px 10px 0; */
}
#entete .sous-titre {
	margin: 4px 0 15px 0;
}

/* Titres */
h1, h2 {
	margin: 1em 0 .5em 0; /* -> 6 */
}
h1, h2 {
	font-family: Georgia, "Bitstream Vera Serif", Norasi, serif;
	font-weight: normal; /* -> 7 */
}
h1 {
	font-size: 3em; /* -> 8 */
	font-style: italic;
}

h2 { margin: .25em 0 .5em 0; /* -> 6 */
	font-size: 1.2em;
	text-align:center;
	background: green;
	}	
h3 { margin: .25em 0 .5em 0; /* -> 6 */
	font-size: 1.2em;
	text-align:center;
	background: yellow;
	}	
h4 { margin: 1em 0 .5em 0; /* -> 6 */
	font-size: 1em;  /* titres des articles de la page accueil */
    font-weight:bold;
	color: green;
   }
h5 { margin: .25em 0 .5em 0; /* -> 6 */
	font-size: 1.2em;  /* titres des articles des pages gestionnaire */
	text-align:center;
	background: lightgreen;
	}
/*	
h6  {
	margin : 0;  
	font-style:italic; font-weight:normal; font-size:14px; font-family:"Times New Roman", Times, serif;
}
*/
h6 { margin: .25em 0 .5em 0; /* -> 6 */
	font-size: 1.2em;
	text-align:center;
	background: orange;
	}	

/* Listes */
ol {
	margin: .75em 0 .75em 24px;
	padding: 0; /* -> 9 */
}
ul {
	margin: .75em 0 .75em 7em;
	list-style: square;  /* puce affichée devant les items d'une liste */
}

/* puce affichée devant les maquettes */
.li_maquettes {
	margin: 0;
	padding: 0;
	border: 0;
	margin-left:150px;
	list-style-image:url(../planeurs-styles/pucer1.gif);
}
.ul_plankit {    /* puce affichée devant les plans-kits */
	margin: 0;
	padding: 0;
	border: 0;
	margin-left:5px;
	list-style-image:url(../planeurs-styles/clic.gif);
}

lh {
	margin: 0 0 0 4em;
	padding: 0;
}
li {
	margin: 0 0 0 9em;
	padding: 0;
}

/* bouton submit pour formulaire caché - listes planeurs */
.submitlst {
	border:none;
	background-color: transparent;
	cursor: pointer;
}
.submitlst:hover {
	background-color: #C9D1DC;
}

/* bouton submit pour formulaire caché - planeurs existants */
.submitexi {
	border:none;
	background: transparent url('clic.gif') no-repeat top left;
	width: 15px;
	height: 15px;
	/* cursor: pointer; */
}
.submitexi:hover {
	/* background-position: 0 -128px;  */
	width: 15px;
	height: 15px;
	background: transparent url('clic_rouge.gif') no-repeat top left;
	cursor: pointer;
}

/* bouton submit pour formulaire caché - Icône fiche biblio */
.submitfiche {
	border:none;
	background: transparent url('fiche.gif') no-repeat top left;
	width: 17px;
	height: 17px;
}
.submitfiche:hover {
	width: 17px;
	height: 17px;
	background: transparent url('fiche_rouge.gif') no-repeat top left;
	cursor: pointer;
}

/* bouton submit pour formulaire caché - sans limite de longueur */
/* utilisé dans page homme_fiche_0int.php                        */   
.submitlong {
	color: blue;
	border:none;
	background-color: transparent;
	cursor: pointer;
}
.submitlong:hover {
	color: red;
	background-color: transparent;
}

/* bouton submit pour formulaire caché - largeur 190 px */
/* utilisé dans page planeurs-selec_0int.php            */   
.submit170 {
	width: 170px;
	overflow: hidden;
	overflow-wrap: break-word;
	text-align: left;
	text-overflow: ellipsis;
	color: blue;
	border:none;
	background-color: transparent;
	cursor: pointer;
}
.submit170:hover {
	color: red;
	background-color: #EAEAEA;
}

/* bouton submit pour formulaire caché - largeur 190 px */
/* utilisé dans page planeurs-selec_0int.php            */   
.submit190 {
	width: 190px;
	overflow: hidden;
	overflow-wrap: break-word;
	text-align: left;
	text-overflow: ellipsis;
	color: blue;
	border:none;
	background-color: transparent;
	cursor: pointer;
}
.submit190:hover {
	color: red;
	background-color: #EAEAEA;
}

/* bouton submit pour formulaire caché - largeur 340 px */
/* utilisé dans page biblio-selec_0int.php              */   
.submit340 {
	width: 340px;
	overflow: hidden;
	overflow-wrap: break-word;
	text-align: left;
	text-overflow: ellipsis;
	color: blue;
	border:none;
	background-color: transparent;
	cursor: pointer;
}
.submit340:hover {
	color: red;
	background-color: #EAEAEA;
}

/* Paragraphes */
p {
	/* margin: .75em 0; */
}
#p_accueil {
	margin: 40px 0; /* paragraphes de la page d'accueil */
}
lblockquote p {
	margin: .5em 0;
}

/* Citations */
blockquote, q {
	font-size: 1.1em;
	font-style: italic;
	font-family: Georgia, "Bitstream Vera Serif", Norasi, serif;
}
blockquote {
	margin: .75em 0 .75em 24px;
}
cite {
	font-style: italic;
}

/* Liens */
a {
	color: mediumblue;
	text-decoration: none; 
}
a:hover, a:focus {
	color: crimson;
	/* font-weight: bold; 
	font-size:10pt;  */
}
a:visited {
	color:green;
} 
a img {
	border: none; /* -> 10 */
}

/* Divers éléments de type en-ligne */
em {
	font-style: italic;
}
strong {
	font-weight: bold;
	color: dimgray;
}
/* Police pour les textes références */
.Txt_ref {font-style:italic; font-size:14px; font-family:"Times New Roman", Times, serif}


/* --- STYLES POUR CERTAINS CONTENUS DES GABARITS --- */
pre, code {
	font-size: 100%;
	font-family: "Bitstream Vera Mono", "Lucida Console", "Courier New", monospace;
}
pre {
	width: 90%;
	overflow: auto;
	overflow-y: hidden;
	margin: .75em 0;
	padding: 12px;
	background: #eee;
	color: #555;
}
pre strong {
	font-weight: normal;
	color: black;
}

/* Table en-tête pour fiches biblio et hommes  */
.table_entete_fiche {
	/* <table align="center" style="text-align: left; width: 900px;" border="0" cellpadding="0" cellspacing="0"> */
	margin-left: auto;  /* centrage par rapport au conteneur */
	margin-right: auto;
	width: 900px;
	border: 0;
	padding-left:8px;
	background: #EAEAEA; 
}

/* Table affichage listes hommes ou planeurs  */
.table_listes {
	/* <table align="center" style="text-align: left; width: 900px;" border="0" cellpadding="0" cellspacing="0"> */
	margin-left: auto;  /* centrage par rapport au conteneur */
	margin-right: auto;
	width: 900px;
	border: 0;
	padding-left:8px;
	background: #EAEAEA; 
}	

/* fiche planeur, table affichage photo et plan 3 vues */
.table_photos {
	margin-left: auto;  /* centrage par rapport au conteneur */
	margin-right: auto;
	width: 530px;   /* le conteneur fait 540 pixels de large */
	border: 0;
	padding:0;
	
}	

/* Menu de navigation ; bloc vertical à gauche */
/* Navigation */
#navigation {
	float: left;
	width: 180px;
	background: #181A12; 
	-moz-border-radius: 20px; 
}
#navigation a {
	color: #FF6533;
}
#navigation a:hover, #navigation a:focus {
	background: #000000;
}
#navigation ul {
	margin: 0;
	padding: 20px 10px 20px 10px;
	list-style: none;
}
#navigation a {
	display: block;
	height: 1%;
	padding: 6px 10px 6px 10px;
	line-height: 1.5;
	font-size: .9em;
	text-decoration: none;
}

/* Menu de navigation ; bloc vertical à gauche */
#bloc_menu {
   background : white;
}

/* Bloc central 0 
NON UTILISEE POUR LE MOMENT */
#bloc_central_0 {
    margin-top : 5px;
	margin-left: 185px;  /* retrait gauche par rapport au conteneur */
	margin-right: 215px; /* retrait droit par rapport au conteneur */
	margin-bottom:5px;
	background-image: url(rayures.gif);  /* il ne faut pas de couleur de fond si on place une image de fond de bloc */
	-moz-border-radius: 10px; /* arrondis des bords du bloc */
	padding:  22px 10px;   
	/* background: white; */
}

/* occupe toute la largeur du conteneur - avec fond rayé */
#bloc_central_large {
    margin-top : 5px;
	/* margin-left: 185px;  /* retrait gauche par rapport au conteneur */
	/* margin-right: 215px; /* retrait droit par rapport au conteneur */
	margin-bottom:5px;
	background-image: url(rayures.gif);  /* il ne faut pas de couleur de fond si on place une image de fond de bloc */
	-moz-border-radius: 10px; /* arrondis des bords du bloc */
	padding:  22px 10px;   
	/* background: white; */
}

/* occupe toute la largeur du conteneur - sans fond rayé */
#bloc_central_large2 {
    margin-top : 5px;
	/* margin-left: 185px;  /* retrait gauche par rapport au conteneur */
	/* margin-right: 215px; /* retrait droit par rapport au conteneur */
	margin-bottom:5px;
	/* background-image: url(rayures.gif);  /* il ne faut pas de couleur de fond si on place une image de fond de bloc */
	-moz-border-radius: 10px; /* arrondis des bords du bloc */
	padding:  22px 10px;   
	background: white;
}

/* Bloc central */
#bloc_central {
    margin-top : 5px;
	margin-left: 0;  /* pas de retrait gauche par rapport au conteneur */
	margin-right: 275px; /* retrait droit par rapport au conteneur */
	margin-bottom:0;
	background-image: url(rayures.gif);  /* il ne faut pas de couleur de fond si on place une image de fond de bloc */
	-moz-border-radius: 10px; /* arrondis des bords du bloc */
	padding:  10px 10px;   
	/* background: white; */
}

/* Zone photo et 3 vues gauche dans fiche planeur */
#bloc_images_gauche {
    margin-top : 5px;
	height: 845px;
	margin-left: 0;  /* pas de retrait gauche par rapport au conteneur */
	margin-right: 484px; /* retrait droit par rapport au conteneur (1024 - 540 pour avoir largeur de 530 px */
	margin-bottom:0;
	background-image: url(rayures.gif);  /* il ne faut pas de couleur de fond si on place une image de fond de bloc */
	-moz-border-radius: 10px; /* arrondis des bords du bloc */
	padding:  10px 10px;   
	/* background: white; */
}

/* Zone infos et specs1 droite dans fiche planeur */
#bloc_info_specs1_droite {
	float: right;    /* position flottante à droite  */
	width: 455px;
	height: 845px;
    margin-top : 1px;
	/* margin-left: 540px;  /* pas de retrait gauche par rapport au conteneur */
	/* margin-right: 0; /* retrait droit par rapport au conteneur */
	margin-bottom:0;
	background-image: url(rayures.gif);  /* il ne faut pas de couleur de fond si on place une image de fond de bloc */
	-moz-border-radius: 10px; /* arrondis des bords du bloc */
	padding:  10px 10px;   
	/* background: white; */
}

/* Bloc conteneur boîte de droite
utilisé dans page accueil */
#boite-droite {
    float: right;    /* position flottante à droite  */
	width: 270px;
	margin-top : 5px;
    /* margin-left: 900px;  si position relative,  retrait gauche par rapport au conteneur */
	/* margin-right: 20px;  retrait droit par rapport au conteneur */
	/* -moz-border-radius: 20px; /* arrondis des bords du bloc */
    padding:  0 ;    
	/*background: #181A12;  */   /* #181A12; */
}

/* Zone d'infos dans bloc conteneur de droite */
#secondaire {
    /* float: right;    /* position flottante   */
	/*width: 200px;    pas besoin, c'est le conteneur qui donne la largeur */ 
	margin-bottom:5px;
    /* margin-left: 900px;  si position relative,  retrait gauche par rapport au conteneur */
	/* margin-right: 20px;  retrait droit par rapport au conteneur */
	-moz-border-radius: 10px; /* arrondis des bords du bloc */
	padding: 10px 10px;    
	background: lightgrey;     /* #181A12; */
}
#secondaire_news {
    /* float: right;    /* position flottante   */
	height: 272px;      /* Ajusté à la hauteur des blocs de gauche dans la page d'accueil */
	/*width: 200px;    pas besoin, c'est le conteneur qui donne la largeur */ 
	margin-bottom:5px;
    /* margin-left: 900px;  si position relative,  retrait gauche par rapport au conteneur */
	/* margin-right: 20px;  retrait droit par rapport au conteneur */
	-moz-border-radius: 10px; /* arrondis des bords du bloc */
	padding: 10px 10px;    
	background: lightgrey;     /* #181A12; */
}

/* Pied de page */
/*
body:after {
	margin-left: auto; 
	margin-right: auto; 
	text-align: center;
	font-size: .8em;
	color: black;
	content: "Team J2MCL © 2003 - 2009 Pages optimisées pour Mozilla Firefox 3.x";
}
*/
#pied {
	margin-left: 0;  /* retrait gauche par rapport au conteneur */
	margin-right: 0; /* retrait droit par rapport au conteneur */
	padding: 15px 20px 10px 0;
	font-size: .85em;
	text-align: center;
	background: #181A12;     /* #181A12; */
}

/* Mention de copyright */
#copyright {
	margin-left: 0;  /* retrait gauche par rapport au conteneur */
	margin-right: 0; /* retrait droit par rapport au conteneur */
	text-align: center;
	font-size: .8em;
	color: black;   /* #848F63; */
}
#copyright a {
	color: #848F63;
	text-decoration: none;
}
#copyright a:hover, #copyright a:focus {
	text-decoration: underline;
}

/* --- NOTES --- */
/*
3.	Voici quelques exemples de collections cohérentes de fontes (propriété
	CSS "font-family"):
	font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-family: Georgia, "Bitstream Vera Serif", Norasi, serif;
	font-family: "Times New Roman", Times, "Nimbus Roman No9 L", serif;
		
4.	Taille du texte de base de la page. Dépend de la taille du texte par
	défaut du navigateur (souvent 16px), et des réglages de l'utilisateur.
	À adapter en fonction de la fonte choisie, et du rendu souhaité.
	En général, on utilisera une valeur de base entre .65em et 1em
	(ou 65% et 100%).

5.	Hauteur de ligne. À adapter en fonction de la fonte choisie, et des
	besoins particuliers (lignes de texte longues ou courtes, titre ou
	corps de texte...).

6.	En général, les styles par défaut des navigateurs font que les marges
	en haut et en bas des titres sont équivalentes. Ici, en diminuant la
	marge du bas, on cherche à rapprocher le titre du contenu qu'il introduit.

7.	Les styles par défaut des navigateurs mettent les titres en gras.
	Si on souhaite passer à des caractères «normaux», on doit utiliser
	font-size: normal.

8.	Pour un élément en "font-size: 3em", la taille du texte sera le triple de
	la taille du texte de l'élément parent.
	À noter: on aurait pu écrire "font-size: 300%" pour le même résultat.

9.	Par défaut, les listes UL et OL ont un retrait à gauche qui peut être,
	suivant les navigateurs:
	- un padding-left de 40px;
	- ou bien un margin-left de 40px.
	On met tout le monde d'accord avec une marge à gauche de 24px, et pas
	de padding.

10.	Les navigateurs donnent souvent aux images placées dans des liens
	une bordure disgracieuse. On annule ce style souvent gênant en appliquant
	un "border: none" aux images qui se trouvent à l'intérieur d'un lien.

*/