/* ******************************************************************************* */
/* Fichier : styles_base.css                                                       */
/* Réalisé par P. ARNOULD / Créé le 17/04/2009 / Modifié par A.L. le 06/05/2011    */
/* ******************************************************************************* */
/* ---         STYLES DE BASE POUR LE TEXTE ET LES PRINCIPAUX ÉLÉMENTS         --- */
/* ==================================================================================
Cette feuille de style a été créée à partir de la feuille proposée par
le site Alsacreations :
FEUILLE DE STYLES DES GABARITS HTML/CSS
© Elephorm & Alsacreations.com
  Conditions d'utilisation:
  http://creativecommons.org/licenses/by/2.0/fr/
================================================================================== */
/* ******************************************************************************* */
/* Rappel de syntaxe CSS :                                                         */
/* Regroupement des 4 valeurs dans une même propriétés :                           */
/*                                                                                 */
/*  margin: 1px 3px   1px   2px; On doit spécifier l'unité mais si 0, pas d'unité  */
/*           ^   ^      ^     ^                                                    */
/*         top  right bottom left                                                  */
/*                                                                                 */
/*  #toto : Elément dont l'ID est toto... (unique)                                 */
/*  .toto : Elément de CLASS toto... (multiple)                                    */
/*                                                                                 */
/* RAPPEL : pour éviter des problèmes de compatibilité entre Firefox et MSIE, il   */
/* faut privilégier les margins et éviter de toucher aux paddings.                 */
/*                                                                                 */
/* ******************************************************************************* */
/* Page */
html {
  font-size: 100%; /* Voir -> Note 1 à la fin de la feuille de styles. */
}
/* ******************************************************************************************* */
/* Définitions générales, en particulier pour le texte                                         */
/* ******************************************************************************************* */

body {
  margin: 0;
  padding: 10px 10px; /* Note -> 2 */
	background: #192233;  /* Bleu nuit gris foncé */
  font-family: Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif; /* 3 */
  font-size: .8em; /* -> 4 */
  line-height: 1.25; /* -> 5 */
  /* color: #FF6533;  */
  color: #363B29;
}
/* ******************************************************************************************* */
/* Titres                                                                                      */
/* ******************************************************************************************* */
h1, h2, h3, h4, h5, h6 {
  margin: 0.5em 0 0.25em 0; /* -> 6 */
}
h1, h2 {
  font-family: Georgia, "Bitstream Vera Serif", Norasi, serif;
  font-weight: normal; /* -> 7 */
}
h1 {
  font-size: 2.0em; /* -> 8 */
  font-style: italic;
  font-weight: bold;
  color: #FF3433;
}
h2 {font-size: 1.8em;}
h3 {font-size: 1.2em;
    background: #7A89A5;} /* Bleu gris comme les boutons du menu de gauche */
h4 {font-size: 1em;}
h5 {text-decoration: underline;}  /*Le texte entre les balises <h5> sera souligné*/

/*champ1 : texte souligné et gras. Exemple dans la page "infos lycée" avec les champs "Adresse", "Téléphone", ... */

.champ1 {
  /*text-decoration: underline;*/
  font-weight: bold;
}
/* ******************************************************************************************* */
/* Paragraphes et textes */
/* ******************************************************************************************* */
p {
  margin: .75em 0;
}
li p, blockquote p {
  margin: .5em 0;
}
strong {
  font-weight: bold;
  /* color: #181A12; */
}
em {
  font-style: italic;
}
/* 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;
}
/* Pour écrire sur un fond de couleur. */
/* Cette classe peut être appliquée à une balise de type bloc ou en ligne */
/* (par exemple <p> <span> ou <strong>...). */
.fond_couleur01 {
  background-color: #7A89A5;
}
/* Pour écrire en couleur. */
/* Cette classe peut être appliquée à une balise de type bloc ou en ligne */
/* (par exemple <p> <span> ou <strong>...). */
.encre_couleur01 {
  color: #FF3433;
}
/* Affichage du code source */
pre, code {
  font-size: 100%;
  font-family: "Bitstream Vera Mono", "Lucida Console", "Courier New", monospace;
}
pre {
  width: 90%;
  overflow: auto;
  /* overflow-y: hidden; A VOIR ! Propriété non valide en CSS2  */
  margin: .75em 0;
  padding: 12px;
  background: #eee;
  color: #555;
}
pre strong {
  font-weight: normal;
  color: black;
}
/* Textes particuliers (vérifier si utilisé...) :                                                                                    */
.text_align_gauche {
  float:left;
  margin-right : 6px;
  text-align: left;
  }
.text_align_droit {
  float: right;
  text-align: right;
}
.text_align_centre { text-align: center; }
.text_forcer_en_dessous { clear: both; }
/* ******************************************************************************************* */
/* Liens                                                                                       */
/* ******************************************************************************************* */
a {
  color: #332510;
  text-decoration: underline;
}
a:hover, a:focus {
  color: #6E5122;
}
a img {
  border: none; /* -> 10 */
}
/* ******************************************************************************************* */
/* Listes */
/* ******************************************************************************************* */
ul, ol {
  margin: .75em 0 .75em 24px;
  padding: 0; /* -> 9 */
}
ul {
  list-style: square;
}
ul.rond {
  list-style: circle;
}
li {
  margin: 0;
  padding: 0;
}
/* Listes spéciales*/
.liste1 {
  list-style: none;
  list-style-image: url(../images/fleche02.png);    /*affiche l'image de l'url à la place de la puce */
}
.liste2 {
  list-style: none;
  list-style-image: url(../images/point01.png);    /*affiche l'image de l'url à la place de la puce */
}
/* Listes qui s'empilent de gauche à droite avec retour à la ligne à chaque changement de liste.  */
/* Voir : css/modeles_styles.php  */
/* Attention : à la suite de cette liste, il faut placer un div de même classe ""  */
ul.dossiers_empil_horizontal, div.blocs_empil_horizontal {
  float: left;
  width:100%;
  margin: 0;
  padding: 0;
  border: 0;
}
ul.dossiers_empil_horizontal li, div.bloc_empil_horizontal {
  float: left;
  width:160px;
  height:80px;
  margin: 5px;
  border: 0;
  list-style: none;
  text-align: center;
  font-weight: bold;
}
ul.dossiers_empil_horizontal li {
  padding: 12px 0 0 60px;
  background: url(../images/webmaster/dossier-icone-6872-64.png) no-repeat left top;
}
/* ******************************************************************************************* */
/* Retour à la ligne pour les autres cas                                                       */
/* ******************************************************************************************* */
hr.alaligne { clear: both; width:100%; margin-top: 5px; padding: 0; visibility: hidden; }
/* ******************************************************************************************* */
/* Images :                                                                                    */
/* ******************************************************************************************* */
.image_vignette_aligne_droite{
/*Image de 120x90 pour illustrer le menu des tutos solidworks*/
 border:none;
 width:120px;
 height:90px;
float:right;
}
.image_grande_icone{
/*Image de 120x90 pour illustrer le menu de def_micro*/
border:none;
width:100px;
height:80px;
}
.image_illustration_tutoriel{
/*Image centré pour les tutoriels solidworks*/
 border:1px solid black;
 width:300px;
 height:220px;
}
.impression_ecran_solidworks{
}

.icone_solidworks{
/*Icones des boutons du logiciles solidworks*/
border:1px solid black;
width:24px;
height:24px;
}
.image_encadree { border: 1px solid; border-color: black; }
.image_01 {
  /* Image calée à gauche SANS bordure et une marge */
  float:left;
  border: 0px;
  margin: 5px 5px 5px 5px;
}
img.img_en_travaux        { border: 0 none; width: 40px; height: 40px; vertical-align: middle; }
img.img_fleche_arriere    { border: 0 none; width: 30px; height: 20px; vertical-align: middle; }
img.img_avec_bordure      { border: 1px solid; border-color: black; }
.img_border1_margpad0     { margin: 0; padding: 0; border: 1px solid; border-color: black; }
.img_border1_marglat_pad0 { margin: 0 5px 0 5px; padding: 0;
                            border: 1px solid; border-color: black; } /* Marges latérales */
.img_border0_marglat_pad0 { margin: 0 5px 0 5px; padding: 0; border: none; } /* Marges latérales */
/* ******************************************************************************************* */
/* --- STYLES POUR CERTAINS CONTENUS DES GABARITS --- */
/* ******************************************************************************************* */
#copyright {
  margin: 10px 0 5px 0;
  text-align: right;
  font-size: .8em;
  color: #848F63;
}
#copyright a {
  color: #848F63;
  text-decoration: none;
}
#copyright a:hover, #copyright a:focus {
  text-decoration: underline;
}
/* ******************************************************************************************* */
/* Cadre pour passer une info particulière dans un cadre normal de largeur fixe */
/* ******************************************************************************************* */
.infos_flash_normal {
  color: black;
  background-color: transparent;
  width: 150px;
  margin: 5px 0px 0px 5px;
  padding: 3px 3px 3px 3px;
  border: 2px solid;
  border-color: navy;
}
/* Cadre pour passer une info particulière dans un cadre fluo de largeur fixe */
.infos_flash_fluo {
  color: black;
  background: rgb(0,204,0);
  width: 150px;
  margin: 5px 0px 0px 5px;
  padding: 3px 3px 3px 3px;
  border: 2px solid;
  border-color: red;
}
/* ******************************************************************************* */
/* ******************************************************************************* */
/* Tableaux :                                                                      */
/* ******************************************************************************* */
/* ******************************************************************************* */
/* --------------------------------------------------------------- */
/* Définitions générales à tous les tableaux
   On utilise le principe des feuilles de style en cascade...
   On définit tout d'abord ce qui est commun à tous les tableaux
   ou ce qui est le plus courant (pour ne pas avoir à répéter les
   propriétés correspondantes dans les styles de chaque tableau)
   puis on spécifie pour chaque style_tableau_xx les particularités
   de chacun. */
/* --------------------------------------------------------------- */
/* Voir http://www.lyceedupaysdesoule.fr/css/modeles_styles.php    */
/* --------------------------------------------------------------- */
/* Il s'agit donc ici en fait du tableau par défaut... */
table {
  background-color: transparent;    /* Pas de fond, fond transparent */
  border-collapse: collapse;        /* Pas d'espaces entre les bordures */
  border: 1px solid black;          /* Bordures 1 pixel noir */
} /* Pas de largeur spécifiée, elle s'adapte aux données */
tr {
  background-color: transparent;
  border: 1px solid black;
}
th {
  background-color: #7A89A5;        /* Fond pour les titres */
  border: 1px solid black;
  vertical-align: middle;           /* Titre centré verticalement */
  text-align: center;               /* Titre calé à gauche */
  font-weight: bold;                /* Titre en gras */
}
td {
  background-color: transparent;
  border: 1px solid black;
  vertical-align: top;              /* Texte dans les cellules calé en haut */
  text-align: left;                 /* Texte calé à gauche */
}
td img {
  float: left;
  margin: 0px 3px 0px 3px;
}
td p {  /* Le paragraphe permet de mettre en retrait le texte */
  margin : 0 1em 0 1em;
  padding: 0;                       /* Texte calé à gauche */
  text-align: left;
}
/* --------------------------------------------------------------- */
/* Notation utilisée pour nommer les tableaux :
   On va modifier :
   - les bordures  (0 pas de bordure ; 1 bordure 1 pixel noir)
   - la largeur du tableau (0 largeur variable ; 1 : 100%)
   - le centrage vertical   du texte dans les cellules (0 en haut ; 1 milieu)
   - le centrage horizontal du texte dans les cellules (0 à gauche ; 1 centré)
   Le tableau est nommé avec les 4 chiffres.
   Le tableau par défaut est donc : 1000
 */
/* --------------------------------------------------------------- */
/* STYLE TABLEAU 0000 */
/* --------------------------------------------------------------- */
                           /* Particularité de ce style : */
.style_tableau_0000 {
  border: 0;               /* Pas de bordures */
}
.style_tableau_0000 tr {
  border: 0;
}
.style_tableau_0000 th {
  border: 0;
}
.style_tableau_0000 td {
  border: 0;
}
/* --------------------------------------------------------------- */
/* STYLE TABLEAU 0100 */
/* --------------------------------------------------------------- */
                           /* Particularité de ce style : */
.style_tableau_0100 {
  border: 0;               /* Pas de bordures */
  width: 100%;             /* Le tableau prend toute la largeur du contenu de la page */
}
.style_tableau_0100 tr {
  border: 0;
}
.style_tableau_0100 th {
  border: 0;
}
.style_tableau_0100 td {
  border: 0;
}
/* --------------------------------------------------------------- */
/* STYLE TABLEAU 0111 */
/* --------------------------------------------------------------- */
                           /* Particularité de ce style : */
.style_tableau_0111 {
  border: 0;               /* Pas de bordures */
  width: 100%;             /* Le tableau prend toute la largeur du contenu de la page */
}
.style_tableau_0111 tr {
  border: 0;
}
.style_tableau_0111 th {
  border: 0;
}
.style_tableau_0111 td {
  border: 0;
  vertical-align: middle;  /* Texte centré verticalement */
  text-align: center;      /* Texte centré horizontalement */
}
/* --------------------------------------------------------------- */
/* STYLE TABLEAU 03 */
/* --------------------------------------------------------------- */
.style_tableau_1100 {
  width: 100%;             /* Le tableau prend toute la largeur du contenu de la page */
}
/* --------------------------------------------------------------- */
/* STYLE TABLEAU 04 */
/* --------------------------------------------------------------- */
                           /* Particularité de ce style : */
.style_tableau_1011 td {
  vertical-align: middle;  /* Texte centré verticalement */
  text-align: center;      /* Texte centré horizontalement */
}
.style_tableau_1011 td p {
  text-align: center;      /* Texte centré horizontalement */
}
/* --------------------------------------------------------------- */
/* STYLE TABLEAU 05 */
/* --------------------------------------------------------------- */
                           /* Particularité de ce style : */
.style_tableau_1111 {
  width: 100%;             /* Le tableau prend toute la largeur du contenu de la page */
}
.style_tableau_1111 td {
  vertical-align: middle;  /* Texte centré verticalement */
  text-align: center;      /* Texte centré horizontalement */
}
.style_tableau_1111 td p {
  text-align: center;      /* Texte centré horizontalement */
}
/* --------------------------------------------------------------- */
/*Contenu dans une gallerie : pour que les images soient bordées et que
  quand on passe dessus la bordure change de couleur */
/*  CONTENU ARTICLES
    Styles à utiliser lorsqu'on veut une mise en page du type "blog", suite
    d'articles placés les uns en dessous des autres.
    On place donc l'ensemble dans un <div class="contenu_articles">.
    Chaque article (par exemple pour la semaine, l'année + la cellule ; pour
    la revue de presse, l'image et la description...) doit être inclus dans
    un <div> (sans nom).
    On fait suivre ce div d'un :
    <img class="separation_horizontale" src="../images/pixel_transparent.png" alt="separation horizontale" />
    pour obtenir le retour à la ligne.
    Chaque titre d'article est à formatter avec un <h3>.
    Si derrière ce titre, on place un lien <a href...>, ce qui suivra ce lien
    va "s'empiler" à droite ("inline"). Par exemple, pour la semaine, on veut
    une suite de cellules dans la même année (placée dans le <h3>), on doit
    donc placer cette cellule dans le lien, fermer le lien et placer à la suivante
    dans un lien, etc... (boucle do-while).
*/
.separation_horizontale { margin: 0px; width: 100%; height: 1px;}
.contenu_articles {
  margin: 0px;
  padding: 0px;
}
.contenu_articles div {
 float:left;
 margin: 0px;
}
.contenu_articles div a {
 float:left;
 margin-right : 5px;
}
.contenu_articles a img{
	border:solid 5px #d8d8d8;
}
.contenu_articles a:hover img{
	border:solid 5px #ffcc99;
}
/*Style de chaque "cellule" */
.contenu_articles a:hover {
  font-weight : bold;
}
/*Bouton */
a.bouton_console {
  display: block;
  padding: 2px;
  float:left;
  margin: 2px;
  text-decoration: none;
  text-align: center;
  background-color: #CCCCFF;
  color: black;
  border-style: solid;
  border-width: 1px 2px 2px 1px;
  border-color: black black black black;
}
a.bouton_console:hover {
  background-color: #FFCC66;         /* #FFCC33 : orange           */
  color: black;
  border-style: solid;
  border-width: 2px 1px 1px 2px;
  border-color: black black black black;
}
/* ******************************************************************************************* */
/* Visite du lycée :                                                                           */
/* ******************************************************************************************* */
/* Liste pour la visite du lycée : liens et photos sous la photo principale :                  */
/* div.div_liens_photos_secondaires { border: 1px solid red; } */
ul.ul_liens_photos_secondaires { list-style-type: none; }
.ul_liens_photos_secondaires li { float: left; }
li.li_liens_retours
           { margin: 0 10px 0 0; font-size: 0.7em; font-weight: bold;
             line-height: 18px; width: 110px; text-align: center; color: white;}
li.li_liens_retours a
           { display: block; margin: 2px 0; text-decoration: none;
             background-color: #7A89A5; color: white;
             border-style: solid; border-width: 1px 2px 2px 1px;
             border-color: #28282A; }
li.li_liens_retours a:hover
           { background-color: #3D4C69; color: white;
             border-style: solid; border-width: 2px 1px 1px 2px;
             border-color: #28282A; }
#span_commentaire_area { background-color: #3D4C69; padding: 0px 5px 0px 5px; height: 1.2em;
                         border: 1px solid; border-color: #53ACF4;
                         font-size: 0.9em; font-weight: bold; color: white;}
/* ******************************************************************************************* */
/* ******************************************************************************************* */
/* --- NOTES ---

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.

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.

*/
/* ******************************************************************************* */