/* Définition des polices personnalisées */  

/* 
@font-face
{    
  font-family: 'BallparkWeiner';    
  src: url('../Polices/ballpark.eot');    
  src: url('../Polices/ballpark.eot?#iefix') format('embedded-opentype'),         
    url('../Polices/ballpark.woff') format('woff'),         
    url('../Polices/ballpark.ttf') format('truetype'),         
    url('../Polices/ballpark.svg#BallparkWeiner') format('svg');    
  font-weight: normal;    
  font-style: normal;
} 
*/

@font-face
{    
  font-family: 'Dayrom';    
  src: url('../Polices/dayrom.eot');  /* pour IE */    
  src: url('../Polices/dayrom.eot?#iefix') format('embedded-opentype'), /* pour IE */
    url('../Polices/dayrom.woff') format('woff'), /* pour Firefox, Chrome*/
    url('../Polices/dayrom.ttf') format('truetype'), /* pour Safari et Opéra*/
    url('../Polices/dayrom.svg#Dayrom') format('svg'); /* pour iPhone, iPad */   
  font-weight: normal;   
  font-style: normal;
}

/* Eléments principaux de la page */ 

body
{    
  font-family: "Trebuchet MS", Arial, sans-serif; /* Mettre entre guillemets les polices dont le nom contient des espaces */
  /* background: url('../Images/fond_gris.png'); */ /* Image de fond d'écran */
  /* background-color: #CCCCCC; */ /* Fond gris */
  /* background-image: url("../Images/fondgristraitrouge.png"); */
  /* background-attachment: fixed; */ /* fixed : l'image de fond reste fixe ; scroll : l'image de fond défile avec le texte (par défaut). */
  /* background-repeat: repeat-x; */ /* Précise la façon dont l'image sera affichée, en mosaique ou non */
  /* background: #CCCCCC url("../Images/fondgristraitrouge.png") fixed repeat-x center; */ /* Les propriétés peuvent être écrites sur une seule ligne */
  background: url("../Images/Cours/tux.png") fixed no-repeat center right, url("../Images/Cours/fondgristraitrouge.png") fixed repeat-x center; /* 2 images combinées */
  background-color: #CCCCCC; /* Fond gris */
  opacity: 0.97; /* Transparence : valeurs possibles de 0 à 1 */
  color: #181818; /* Couleur du texte noire */
}

#bloc_page
{
  width: 900px; /* Largeur de la page */    
  margin: auto; /* Marges intérieures automatiques */
}

section h1, footer h1, nav a
{
  font-family: /* Dayrom,*/ Georgia, Verdana, Arial, sans-serif;    
  font-weight: normal;    
  text-transform: uppercase; /* Impose le majuscule - minuscule = lowercase */
}

h5, em
{    
	color: #2DBD47; /* Couleur verte exprimée en valeur hexadécimal, 
                     #2DBD47 = nuance de vert */
}

code
{
  font-family: "Trebuchet MS";
  font-size: 1em; 
} 
                       
/* Header */ 

header
{    
  border-bottom: 3px solid #760001; /* Trait continu en bordure basse */
}

.titre_principal
{
  color: #FAFAFA; /* Couleur des titres h1 et h2 de la bannière */
  padding-top: 10px; /* Marge extérieure haute */
  padding-left: 30px; /* Marge extérieure gauche */
}

#logo, header h1 
{    
  display: inline-block; /* Impose l'alignement horizontal des éléments blocs 
                        Logo et Titre h1 */   
  margin-bottom: 0px; /* Marge extérieure basse */
  vertical-align: top; /* Alignement vertical haut des Logo et Titre h1 */
}

header h1 /* Titre interne à la bannière */
{    
  font-family: Georgia, serif;    
  font-size: 2.5em;    
  font-weight: normal;
}

header h2 /* Sous-titre interne à la bannière */
{
    font-family: Dayrom, serif;    
    font-size: 1.1em;    
    font-weight: normal;
    margin-top: 0px; /* Marge extérieure haute */
}

/* Bannière */ 

#banniere_image  /* Image de 950x200 */
{    
  margin-top: 15px; /* Marge extérieure haute */   
  height: 180px; /* Hauteur de la bannière */   
  border-radius: 5px; /* bords de l'élément arrondis */   
  background: url('../Images/Cours/banniere1.png') no-repeat;
  position: relative; /* Valeurs possible relative - fixed - absolute 
                Ref utilisée pour le positionnement de bannière_description */   
  box-shadow: 0px 4px 4px #1c1a19; /* Ombre noire projetée par la bordure */   
  margin-bottom: 2px; /* Marge extérieure basse */
}

#banniere_description  /* Création zone de texte */
{    
  position: absolute;    
  bottom: 0;    
  border-radius: 0px 0px 5px 5px;    
  width: 99.5%;    
  height: 33px; /* hauteur de la bande noire */   
  padding-top: 15px; /* Marge intérieure haute */   
  padding-left: 4px; /* Marge intérieure gauche */   
  background-color: rgb(24,24,24); /* Pour les anciens navigateurs */    
  background-color: rgba(24,24,24,0.8); /* Fond noir */   
  color: white; /* Couleur du texte */  
  font-size: 0.8em; /* Hauteur du texte */
}

/* Navigation */ 

nav
{    
  display: inline-block; /* Impose l'alignement horizontal des blocs de la
                        liste à puces constituant le menu de navigation */   
  width: 740px;    
  margin-bottom: 2px; /* Marge extérieure basse */
  text-align: right;  /* Alignement du texte à droite */
} 

nav ul
{    
  list-style-type: none; /* retire l'image ronde servant de puce à la liste  */
}

nav li
{    
  display: inline-block;    
  margin-right: 15px;
} 

nav a
{    
  font-size: 1.3em;    
  color: #181818; /* Nuance de noir */   
  padding-bottom: 3px;    
  text-decoration: none;
} 

nav a:hover /* Affichage de la bordure basse du bloc lors du survol d'un lien  
            avec la souris */
{    
  color: #760001; /* Nuance de rouge bordeau */   
  border-bottom: 3px solid #760001;
}

.en-cours
{
  color: #FFFF00; /* Titre du menu courant de couleur jaune */
}

/* Corps */ 

.ico_categorie
{    
  vertical-align: middle;    
  margin-right: 8px;
}

article, aside
{    
  margin-top: 5px; /* Marge extérieure haute */
  display: inline-block;  
  vertical-align: top;    
  border-radius: 10px; /* bords de l'élément arrondis */
  text-align: justify;
  margin-bottom: 5px; /* Marge extérieure basse */
}

article
{    
  width: 725px; /* Largeur du bloc article */   
  background-color: #FFFFDC; /* Fond en Nuance de blanc */
  margin-right: 5px; /* Marge extérieure droite */
}

#article_large
{    
  width: 900px; /* Largeur du bloc article */   
  margin-right: 15px; /* Marge extérieure droite */
  position: relative; /* Ref utilisée pour le positionnement du bouton rouge */
}

#article_large .introduction       /* l'appel d'un attribut class commence par
                        un point, celui d'un attribut id commence par un # */
{    
	color: rgb(183,26,194); /* Une couleur peut s'exprimer au format rgb, 
                             rgb(183,26,194)= nuance de violet */
  width: 750px; /* Largeur du bloc paragraphe 750 pixels */
  height: 45px; /* Hauteur du bloc paragraphe 45 pixels */
  overflow: auto; /* Affichage à droite de l'ascenseur à l'initiative du navigateur, la hauteur du paragraphe dépassant 45 pixels */
  word-wrap: break-word; /* Les mots éventuellement trop larges seront coupés 
                          et contenus à l'intérieur du bloc paragraphe */                     
}

#article_large .code /* code HTML */
{    
	color: navy;
}

#article_large .css/* code CSS */
{    
	color: blue;
}

#article_large .resultat, #article_large li 
{    
	color: black; /* Couleur noire pour les résultats afficchés du code HTML */
}

#article_large .commentaire /* commentaires CSS */
{    
	color: gray;
}

.orange
{    
	color: #FFA500; /* Couleur orange exprimée en valeur hexadécimal, 
                     #FFA500 = nuance d'orange */
}

.imageflottante
{
  float: left;
}

.dessous
{
  clear: both; /* Pour écrire le texte en dessous d'un paragraphe incluant la propriété float */
}

article p, #article_large p
{    
  /* font-size: medium; */
  font-size: 0.8em; /* Une taille de 0.8em sera appliquée sur les paragraphes de la page */
  color: maroon;   /* Valeurs possibles, white - silver - gray - black - red -
                   maroon - lime - green - yellow - olive - blue - navy -
                   fuchsia - purple - aqua - teal */
  padding-left: 30px; /* Marge intérieure gauche */
  padding-right: 30px; /* Marge intérieure droite */
}

article a:hover /* Apparence au survol des liens, hover peut être utilisé avec n'importe quelle balise */
{
  text-decoration: none;   
  color: #F0761E; /* Couleur du texte, Nuance d'orange */
}

article a:active /* Quand le visiteur clique sur le lien */
{
  background-color: black; /* le fond du lien deviendra noir au moment du clic */  
}

article a:visited
{
 color: #9A2499;  /* Appliquer une couleur violette */
} 

article h1
{    
	color: #2DBD47; /* Couleur verte exprimée en valeur hexadécimal, 
                     #2DBD47 = nuance de vert */
  text-align: center;
  padding-top: 15px; /* Marge intérieure hautee */
}

article h2
{
  font-style: italic; /* Commentaire : Les choix possibles sont italic, oblique, 
                         normal */
  font-weight: normal;   /* Valeurs possibles : bold, normal */                       
  border: 3px blue dashed; /* Bordure générale 4 côtés, d'une largeur de 3 pixels, de couleur bleue et en pointillé */
  border-left: 2px solid black; /* 2 pixels au lieu de 3 sont attribués à la bordure de gauche, le pointillé est remplacé par du continu */
  border-right: 2px solid black; /* 2 pixels au lieu de 3 sont attribués à la bordure de droite, le pointillé est remplacé par du continu */
  border-radius: 10px; /* Bordure arrondie */
  box-shadow: 6px 6px 6px black; /* Ombre noire projetée par la bordure du titre */
  text-shadow: 1px 1px 2px blue; /* Ombre bleue projetée par le texte du titre - Reconnue à partir d'IE10 pour Microsoft */
  margin-left: 15px; /* Marge extérieure gauche */
  margin-right: 15px; /* Marge extérieure droite */
  padding-left: 30px; /* Marge intérieure gauche */
}

article h3
{    
	text-align: center;
  padding-bottom: 10px;
}

article h4
{    
	padding-left: 15px;
}

article h5
{    
	padding-left: 15px;
}

aside  /* Elément informations complémentaires */
{    
  position: relative;    
  width: 135px;    
  background-color: #FFFA32; /* Fond en nuance de jaune foncé */   
  box-shadow: 0px 2px 5px #1c1a19; /* Ombre noire projetée par la bordure */    
  border-radius: 5px; /* bords de l'élément arrondis */   
  padding: 10px; /* Marge intérieur */    
  color: #800000; /* Couleur du texte, nuance de marron */    
  font-size: 0.9em;
}

#fleche_bulle
{    
  position: absolute;    
  top: 100px;    
  left: -12px;
}

#photo_prof
{    
  text-align: center;
}

aside img
{    
  margin-right: 5px;
}

.bouton_rouge
{    
  display: inline-block;    
  height: 25px;    
  position: absolute;    
  right: 5px;    
  bottom: 5px;    
  background: url('../Images/Cours/fond_degraderouge.png') repeat-x;    
  border: 1px solid #760001;    border-radius: 5px;    
  font-size: 1.2em;    
  text-align: center;    
  padding: 3px 8px 0px 8px;    
  color: white;    
  text-decoration: none;
}

.bouton_rouge img
{    
  border: 0;
}

a.bouton_rouge:hover, a.bouton_rouge:active, a.bouton_rouge:visited
{
  color: white;
}

/* Footer */ 

footer
{    
  background-color: #808080;
  padding-top: 10px;
}

footer p, footer ul
{    
  font-size: 0.8em;
}

footer h1
{
  font-size: 1.1em;
}

#validation, #mes_liens
{    
  display: inline-block;    
  vertical-align: top;
}

#validation
{    
  width: 50%;
  padding-left: 30px;
  text-decoration: none;
}

#mes_liens
{    
  width: 31%;
}

#mes_liens ul
{    
  display: inline-block;    
  vertical-align: top;    
  margin-top: 0;    
  width: 48%;    
  list-style-image: url('../Images/Cours/ico_liensexterne.png');    
  padding-left: 2px;
}

#mes_liens a
{    
  text-decoration: none;    
  color: #760001;
} 

/* Les tableaux */
#table1
{
  margin-left: 30px;  /* Marge extérieure gauche des tableaux */
}

td,th    /* Toutes les cellules des tableaux... */
{  
  border: 1px solid black;   /* auront une bordure de 1px */
  text-align: center; /* et leur texte centré */
} 

.table2
{
  margin-left: 30px;  /* Marge extérieure gauche des tableaux */
  margin-right: 30px; /* Marge extérieure droite des tableaux */
  border-collapse: collapse;   /* Collage des bordures de cellules, valeurs possibles : collapse ou separate */
  caption-side: bottom;   /* Titre placé en bas, valeurs possibles : top ou bottom */
}

.colspan, .rowspan
 {
 background-color: #FFFA32;   /* Fond jaune foncé */
 } 

/* Les formulaires */
form
{
 margin-left: 30px; /* Marge extérieure gauche */
 margin-right: 200px; /* Marge extérieure droite */
}

/* Le multimédia */
audio, video
{
 margin-left: 30px; /* Marge extérieure gauche */
}

/* Gestion des media queries */
@media all and (max-width: 1024px)
{
   #bloc_page
   {
   width: auto;
   }
} 
 
@media all and (max-width: 1024px)
{
  nav
  {
  width: auto;
  text-align: left;
  }
  nav li
  {
  display: block;
  padding-left: 4px;
  }
  nav a
  {
  font-size: 1.1em;
  }
  nav a:hover
  {
  border-bottom: 0;
  }
} 

@media all and (max-width: 1024px)
{
   #banniere_image
   {
   display: none;
   }
 }