/* 
  feuille de style de toutes les pages du site sauf index.html et accueil.html
  
  This stylesheet builds up The "PAG-PIANO : pages" theme
  -------------------------------------------------------
  Copyright (c) 2006-2017 Pierre-André George - meant to be used on pag-piano.ch website only !
  -------------------------------------------------------
  "position: fixed" ne fonctionne pas dans internet explorer 6. hack CSS corrigeant ce bug par Stu Nicholls : http://www.stunicholls.myby.co.uk/
*/


/* Typographie & Couleurs */
/* les images de fond et les couleurs de fond des éléments: body, #entete, #pied : se règlent dans la page html */

body {
	font-size: 100%; /* resets 1em to 10px, pas touche */
	scrollbar-face-color: #fcf5e5;
	scrollbar-shadow-color: #999;
	scrollbar-highlight-color: #fcf5e5;
	scrollbar-3dlight-color: #999;
	scrollbar-darkshadow-color: #fcf5e5;
	scrollbar-track-color: #fcf5e5;
	scrollbar-arrow-color: #000; /* apparence de la scrollbar - internet explorer only */
	text-align: justify;

	}
* html #entete { 
	position: absolute; /* IE6 hack - Stu, pas touche */
} 
#entete1 {
	font-family: "Times New Roman", Times, serif; 
	font-size: 62.5%;
		}
#prof {
	color: #000000;
	font-size: 172%;
	font-family: "Gaze";
	text-align: right;
	}
  #prof2 {
      color: #000000;
      font-size: 130%;
      letter-spacing: 1.2px;
      font-family: "Gaze";
      text-align: right;
      }	
#page { 
	font-size: 200%;
	font-variant: small-caps;
	text-align: center;
	}	
#pagedesk { 
	font-size: 200%;
    font-family: "Gaze";
	}	
#contenu { /* styles du contenu (html: <div id="contenu"> ) */
	font-family: Arial, Helvetica, sans-serif; /* police de caractère */
	color: #000; /* couleur du texte */
	}

h3 { /* titres des rubriques du contenu */
	font-size: 1em; /* taille des caractères */
	font-weight: normal; /* sinon c'est en gras */
	}
h4 { /* sous-titres des rubriques du contenu */
	font-size: 1em; /* taille des caractères */
	font-weight: normal; /* sinon c'est en gras */
	color: #990000;
	}
#menugauche { /* styles du menu gauche (html: <div id="menugauche"> ) */
	font-family: Arial, Helvetica, sans-serif; /* police de caractère */
	font-size: 1.3em; /* taille des caractères */
	}
#nom2 {
	font-family: "Times New Roman", Times, serif; 
	font-size: 66%;
		}
#trait2 {text-align: left;}
#grpiano {text-align: center;
	}	
#pied { /* pied de page : menu et copyright (html: <div id="pied"> ) */
	font-family:  Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	color: #650019; /* couleur du texte */
	}

a {
	color: #650019;	/* couleur des liens (en fait pour le div "contenu") */
	}
a:hover {
	text-decoration: none; /* le soulignement des liens disparaît lors du survol de la souris (en fait pour le div "contenu") */
	}
#menugauche a, #pied a {
	text-decoration: none; /* les liens du menu gauche et du pied de page ne sont pas soulignés */
	}
#menugauche a:hover, #pied a:hover {
	color: #990000; /* #E51616; /* c03e00 couleur des liens du menu gauche et du pied de page lors du survol de la souris */
	}
#pied a {
	color: #650019; /* couleur des liens du pied de page */
	}
	
hr {
	color: #8f8f8f; /* couleur des lignes de séparation (utilisées dans le div "contenu") */
	}
	
/* end Typographie & Couleurs */

/* fonts */

@font-face {
    font-family: 'Gaze';
    src: url('fonts/gazen___-webfont.woff2') format('woff2'),
         url('fonts/gazen___-webfont.woff') format('woff');
    src: url('fonts/gazen___-webfont.eot');
    src: url('fonts/gazen___-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/gazen___-webfont.ttf') format('truetype'),
         url('fonts/gazen___-webfont.svg#Gaze') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* end fonts */

/*====================================================================================================================================================================*/
/*                                                                                        STRUCTURE*/
/*                                                                        STRUCTURE       STRUCTURE			STRUCTURE*/
/*                                                                        STRUCTURE       STRUCTURE			STRUCTURE*/
/*                                                                                        STRUCTURE*/
/*====================================================================================================================================================================*/


body {
	padding: 2px 0 -2px 0; /* marges : haut droite bas gauche */
	margin: 2px 0 0 0; /* idem */
	height: 100%; /* IE6 hack - Stu, pas touche */
	width: 100%;
	overflow-y: auto; /* IE6 hack - Stu, pas touche */
	overflow-x: hidden; /* IE6 hack - Stu, pas touche */

	}
* html #entete { 
	position: absolute; /* IE6 hack - Stu, pas touche */
}
#image2 {
top: 0;
left: 0;
width: 100%;
height: 116px;
z-index: 30;
position: fixed;
border-bottom: #8f8f8f 1px solid;
}
#entete1 { /* styles du contenu (html: <div id="entete"> ) */
	position: fixed;/* l'entete reste visible au même endroit lorsqu'on fait défiler la page */
	width: 90%; /*limite titre et trait et prof à droite*/	
	top: 20px; /* positionnement relatif au bord supérieur de la page */
	left: 30px; /* positionnement relatif au bord gauche de la page */
	z-index: 100; /* l'entete par-dessus le contenu */
	}
#nom {
	top: 20px; /* positionnement relatif au bord supérieur de la page */
	left: 30px; /* positionnement relatif au bord gauche de la page */
	z-index: 100;
	}
#nom2 {
	position: fixed;
	top: 11px; /* positionnement relatif au bord supérieur de la page */
	left: 18px; /* positionnement relatif au bord gauche de la page */
	z-index: 100;
	}
#trait {
	margin-top: -6px; /* positionnement relatif au bord supérieur de la page */
	left: 30px; /* positionnement relatif au bord gauche de la page */
	padding: 0;
	z-index: 100; /* l'entete par-dessus le contenu */
	max-width: 90%;
	margin-right: 17%;
	}
#trait2 {
	position: fixed;/* l'entete reste visible au même endroit lorsqu'on fait défiler la page */
	top: 29px; /* positionnement relatif au bord supérieur de la page */
	margin-left: 12.5px; /* positionnement relatif au bord gauche de la page */
	z-index: 50; /* l'entete par-dessus le contenu */
	width: 300px;
	}
#prof {
	margin-top: -14px;
	z-index: 100;
	}
#prof2 {
	position: fixed;/* l'entete reste visible au même endroit lorsqu'on fait défiler la page */
	top: 22px; /* positionnement relatif au bord supérieur de la page */
	margin-left: -2px;
	width: 308px; /* positionnement relatif au bord gauche de la page */
	z-index: 50; /* l'entete par-dessus le contenu */
	}
#page { /* pied de page : menu et copyright (html: <div id="pied"> ) */
	position: fixed;
	top: 70px; /* positionnement relatif au bord supérieur de la page */
	left: 0px;
	width: 100%; /* positionnement relatif au bord gauche de la page */
	z-index: 50; /* l'entete par-dessus le contenu */
	}	
#pagedesk {
	top: 108px;
	left: 30px;
	width: 319px;
	position: fixed;
}
#grpiano { /* pied de page : menu et copyright (html: <div id="pied"> ) */
	position: fixed;/* l'entete reste visible au même endroit lorsqu'on fait défiler la page */
	padding-top: 0;
	top: 76px; /* positionnement relatif au bord supérieur de la page */
	left: 0px;
	height: 8px;
	width: 100%; /* positionnement relatif au bord gauche de la page */
	z-index: 30; /* l'entete par-dessus le contenu */
	}	

#contenu { /* styles du contenu (html: <div id="contenu"> ) */
	width: 90%;
	padding: 8px 8px 8px 8px; /* marges: haut droite bas gauche */
	margin-top: 80px; /* positionnement relatif au haut de la page */
	margin-bottom: 66px; /* place pour le menu de bas de page de la page */
	margin-left: 0; /* positionnement relatif au bord gauche de la page */
	z-index: 0; /* ok */
	}
	
.center {
	text-align: center; /* html: ajouter class="center" à une balise permet de centrer les éléments s'y trouvant */
	}

.mobile {
width: 281px;
z-index: 50;
top: 110px;
height: 23px;
}

h1, h2 {
	display: none; /* les titres du site et des pages en texte n'apparaissent pas vu qu'ils se trouvent dans l'image de fond */
	}

h3 { /* titres des rubriques du contenu */
	border-bottom: double #000; /* style et couleur de la bordure inférieure */
	padding: 1em 0 1em 0; /* marges */
	text-align: left; /* toujours aligné à gauche même quand le reste du contenu est centré */
	}

h4 { /* sous-titres des rubriques du contenu */
	border-bottom: 1px #000; /* style et couleur de la bordure inférieure */
	padding: 1em 0 1em 0; /* marges */
	text-align: center; /* toujours aligné à gauche même quand le reste du contenu est centré */
	}

* html #menugauche { 
	position: absolute; /* IE6 hack - Stu, pas touche */
} 

* html #menudroite { 
	position: absolute; /* IE6 hack - Stu, pas touche */
} 	
#menugauche { /* styles du menu gauche (html: <div id="menugauche"> ) */
	position: fixed; /* le menu reste visible au même endroit lorsqu'on fait défiler la page */
	top: 0;
	left: 0; /* positionnement relatif au bord gauche */
	width: 319px; /* largeur */
	height: 100%;
	text-align: left; /* les éléments sont alignés à droite */
	z-index: 444;
	}
#menugauche ul, #menugauche li { /* liste du menu gauche */
	padding: 0; /* marges */
	margin: 0 20px 0.3em 75px; /* marges: haut droite bas gauche - définit en fait la hauteur de ligne */
	list-style-type: none; /* liste sans puces */
	}
	
#img_menu { /* image du menu gauche */
	border: 1px solid #990000; /* bordure: épaisseur, style, couleur */
	width: 100px; /* largeur */
	height: 69px; /* hauteur */
	margin-top: 1.7em; /* marge supérieure */
	margin-right: 160px;
}

* html #pied { 
	position: absolute; /* IE6 hack - Stu, pas touche */
} 

#pied { /* pied de page : menu et copyright (html: <div id="pied"> ) */
	position: fixed; /* le menu reste visible au même endroit lorsqu'on fait défiler la page */
	bottom: -1px; /* positionnement relatif au bas de la page - IE6 : -1px */
	left: 0px;
	text-align: center; /* les éléments sont centrés */
	width: 100%; /* largeur */
	line-height: 20px; /* hauteur de ligne */
	z-index: 666; /* pied de page par-dessus le contenu */
	padding: 14px 0px 4px 0; /* marges: haut droite bas gauche */
	}
	
#pied ul, #pied li { /* liste (menu) du pied de page */
	padding: 0; /* marges */
	margin: 0; /* idem */
	list-style-type: none; /* liste sans puces */
	display: inline; /* pas de saut de ligne entre les éléments de la liste (html: <li>), la liste s'affiche sur une ligne*/
	}
	
hr { /* lignes de séparation (utilisées dans le div "contenu") */
	width: 50%; /* largeur */
	text-align: center; /* alignée au centre */
	}

img {
	border: 0; /* par défaut les images n'ont pas de bordure */
	}
	
/*end Structure*/	



/*====================================================================================================================================================================*/
/*                                                                                        	  MEDIA QUERIES*/
/*                                                                        MEDIA QUERIES       MEDIA QUERIES			MEDIA QUERIES*/
/*                                                                        MEDIA QUERIES       MEDIA QUERIES			MEDIA QUERIES*/
/*                                                                                            MEDIA QUERIES*/
/*====================================================================================================================================================================*/

@media screen {
	body { background: #fcf5e5 }
	#menugauche {
	  background: url(images/fond_bande_gauche2.jpg) fixed no-repeat;
	  background-size: 370px;
	}
	#contenu {background-color: #fcf5e5;}
}

/*============================================================================================================================= Smarts ==============================*/

@media screen and (max-width: 800px){
    #menugauche, .desktop {display: none;}
    #pied, #entete1, #image2, #page {width: 100%;}
    #trait {margin-right: 17%;}
    #image2 {
      top: 0;
      left: 0;
      height: 104px;
      /*z-index: 80;*/
    }
    #pied, #contenu {
      margin-left: auto;
      margin-right: auto;
      }
    #contenu {
      padding: 8px 16px 8px 16px;
      width: 90%;
      line-height: 24px;
      margin-top: 10px;
    }
  #contfav2 {z-index: -10;}
    #pied {
      left: ;
      border: 1px solid;
      background:url(images/fondpied.jpg) no-repeat;
      padding: 4px 0px 4px 0;
      font-size: 80%;
      width: 100%;
      background-color: #fcf5e5;
    }
}

@media screen and (max-width: 330px) {
      #pied {
        font-size: 70%;
      }
      #trait {margin-right: 20%;}
}

@media screen and (max-width: 280px) {
      #contenu {font-size: 80%;}
      #entete1 {left: 20px;}
      #trait {margin-right: 18%;} 
      #prof {text-align: center;
            padding-left: 10px;
      }
      .test {width: 240px;
            text-align: center;
      }
      #pied {font-size: 60%;}
}

@media screen and (min-width: 415px) and (max-width: 640px) {
  body {margin-top: 0;
    width: 100%;
 }
 #page, #trait, #prof, #nom {
      position: absolute;
    }
    #entete1 {
      position: static;
      right: -2px;
    }
  #page, #entete1, #image2, #prof {
    width: 100%;
  }
  #trait {
    top: 44px;
    width: 90%;
    margin-right: 17%;}
  #prof {top: 6px;}
  #image2 {
      position: absolute;
      width: 100%;
      top: 0;
      left: 0;
      height: 104px;
      /*z-index: 80;*/
    }
  #contenu {
      padding: 8px;
      /*margin-left: 0;*/
      margin-top: 40px;
      width: 90%;
      line-height: 24px;
    }
  #contfav2 {z-index: 10;}
  #pied {
    position: static;
    background:url(images/fondpied.jpg) no-repeat;
    }
}

/*============================================================================================================================= desktop ==============================*/


@media screen and (min-width: 800px) {
    body {font-size: 62.5%;}
    #page, #entete1, #trait, #prof, .mobile {display: none;} 
    #image, #image2 {display: none;}     
    #contenu {
      font-size: 1.3em;
      display: block;
      margin-top: 10px;
      padding: 8px 27px 8px 8px;
      width: 70%;
      margin-left: 360px;
      }
    #pied { /* pied de page : menu et copyright (html: <div id="pied"> ) */
      position: fixed; /* le menu reste visible au même endroit lorsqu'on fait défiler la page */
      background:url();
      bottom: -1px; /* positionnement relatif au bas de la page - IE6 : -1px */
      left: 0px;
      width: 320px; /* largeur */
      z-index: 666; /* pied de page par-dessus le contenu */
      padding: 14px 120px 4px 0; /* marges: haut droite bas gauche */
      }
}

@media screen and (min-width: 800px) and (max-width: 900px) {
    #contenu {width: 50%;}
}

@media screen and (min-width: 900px) and (max-width: 1000px) {
	#contenu {width: 55%;}
}

@media screen and (min-width: 1000px) and (max-width: 1100px) {
    #contenu {width: 60%;}
}

@media screen and (min-width: 1100px) and (max-width: 1280px) {
    #contenu {width: 65%;}
}





/*====================================================================================================================================================================*/
/*                                                                                        	  IMPRESSION*/
/*                                                                       IMPRESSION
/*                                                                      											 IMPRESSION
/*                                                                                            IMPRESSION
/*====================================================================================================================================================================*/

@media print {

#entete {left: 0;}

#contenu {
	text-align: center;
	width: 100%; /* le contenu s'imprime sur toute la largeur du papier */
	height: 700px;
	left: 0;
	margin-left: 0;
	}
#pied {text-align: center;
	width: 100%;
	left: -60px;
	margin-left: 0;}

#menugauche, #pied ul {
	 display: none; width: 100%;/* les images, les menus à gauche et du pied de page ne s'impriment pas (le copyright du pied de page oui) */
	}
	

h1, h2 {
	display: block; font-size: 2em; margin-left: 0;/* les titres du site et des pages en texte s'impriment vu que l'image de fond ne s'imprime pas */
	}


}

/*end Impression*/