@charset "utf-8";
/* Code Xhtml et CSS par Thibz, http://thibz.com
Si vous avez des difficultés au niveau du code, n'hésitez pas à supprimer la partie que vous ne comprenez pas pour voir l'effet produit sur la mise en page. C'est ce que je fais toujours quand je ne comprend pas l'intérêt de la propriété. 
Si vous voulez en apprendre plus sur une propriété CSS, visitez
http://www.siteduzero.com/tutoriel-3-13639-liste-des-proprietes-css.html
*/


/* Remise à zéro des marges internes et externes pour supprimer les valeurs par défauts des navigateurs */
*  {
	margin: 0;
	padding: 0;
	border: 0;
}



	
/* Propriétés globales */
img {padding: 5px; background-color: #ededed; border: 1px solid #dcdcdc;}
h1, h2, h3, h4, h5, h6 {
	margin: 0.1em 0 .4em 0;
	color: #4674c2;
}
h1, h2 {
	font-weight: normal; 
}
h1 {
	font-size: 2em;
}
h2 {
	font-size: 1.5em;
}
h3 {
	font-size: 1.1em;
}
h4 {font-size: 1em;}
ul {
padding: 8px 0 8px 25px;
}
a {
	font-weight: bold;
	color: #4674c2;
	text-decoration: none;
}
a:hover {
	color: #6487c4;
	text-decoration: underline;
}
p {
	margin: 0.4em 0 0.4em 0;
}
/* Classes générales utilisées un peu partout sur le site */
.floatright {float: right;}
.rouge {
	color: #c80028;
}
.date {
	color: #C66;
}
.clear {clear: both;}
.align_textegauche {text-align: left;}
.align_textedroit {text-align: right;}
.centrer {
	text-align: center;
}

.floatleft { 
	float: left;
	margin-right: 10px;
}
.floatright { /* Classe de flottement à gauche, l'image de la page d'accueil utilise cette classe */
	float: right;
	margin-left: 10px;
}


/********** CONTENEURS *********/
body {
	background: #cccccc; /* couleur d'arrière plan du site */
	padding: 0;
	text-align: center; /* ce paramétrage centre le conteneur dans les navigateurs IE 5.x. Le texte est ensuite aligné à  gauche (valeur par défaut) dans le sélecteur #container */
	/* Propriétés générales pour le texte du site */
	color: #646464;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 15px;
	/* + le script permettant d'afficher le menu vertical sur IE 6 */
	behavior: url("csshover.htc");
    }
#container {
	width: 95%;  /* paramétrage de la largeur à 95% de la fenêtre du navigateur, structure fluide qui permet l'adaptation selon la résolution de l'utilisateur */
	background: #FFFFFF;
	margin: 0 auto; /* Permet de centrer le conteneur, les marges gauches et droites sont placé en "Automatique", elles s'étendent donc jusqu'au bord de l'élément parent (ici body) */
	text-align: left; /* ce paramétrage annule le paramêtre text-align: center; de l'élément body. */
    }
	
	
/* Partie haute */
    #header {
	background-color: #ededed;
	background-image: url(images/23.jpg); /* image logo LCDG */
	background-repeat: no-repeat;
	background-position: 95% 12px; /* placée à 95% de la largeur du header (donc à droite) et à 12 pixels du haut de #header */
    }
#banniere-liens {
	background-image: url(images/header.jpg); /* image du titre placé au centre du #header */
	background-repeat: no-repeat;
	background-position: center;
	height: 88px; /* Petite subtilité: le padding (marge interne) vient s'ajouter à la largeur, ici la largeur totale de #banniere-liens est 88 + 12 pixels soit 100 pixels */
	padding-top: 12px;
}

/* Style permettant de mettre des liens en bas à droite de la bannière, non utilisé ici 
#banniere-liens a {
	color: #9b9b9b;
	font-size: 11px;
	display: block;
	float: right;
	width: 65px;
	text-align: center;
	background-image: url(images/puce.png);
	background-repeat: no-repeat;
	background-position: left;
	text-decoration: none;
}
*/
#banniere-liens a:hover {
	text-decoration: none;
	color: #3bd8c1;
}
#banniere-liens #academie-amiens { /* ici on donne un style au lien car il doit recouvrir l'image d'arrière plan du div */
	width: 70px;
	height: 80px;
	display: block; /* Ces trois propriétés permettent d'avoir un lien de largeur 70 pixels, hauteur 80 pixels, cliquable. Sans la transformation du lien en type "block" on ne peut pas lui donner de dimensions */
	margin: 0 0 0 5%; /* On positionne le lien avec une marge à gauche de 5%, cette manière d'écrire margin est une manière économique car on peut définir les 4 marges de la manière suivante [   margin: 10px (Haut) 15px (Droite) 30px (Bas) 50px (Gauche)  ] */
	background-image: url(images/logo-amiens.jpg);
	background-repeat: no-repeat;
}



#menu {
	text-align: center;
	width: 900px;
	margin: auto; /* Permet de centrer le menu dans la barre grise */
}
#menu li {
	list-style-type: none;
	width: 16%; /* Largeur de chaque élément, attention ceci n'est pas la largeur du lien, seulement de l'élément de liste le contenant */
	float: left;
}
#menu ul {
	padding: 0;
}

#menu li a {
	display: block;
	width: 120px; /* Largeur du lien qui est aussi la largeur de l'image fond_lienmenu.png */
	height: 16px;
	font-size: 12px;
	font-weight: normal;
	color: #FFFFFF;
	margin: 12px 5px 0 5px; /* On place les liens proprement */
	text-decoration: none;
	background-image: url(images/fond_lienmenu.png);
	background-repeat: no-repeat;
}
#menu li a:hover { /* Style appliqué lors du survol du lien par la souris */
	color: #eeeeee;
	text-decoration: none;
	/* Bordure haute et basse */
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #eeeeee;
	border-bottom-color: #eeeeee;
	}

.barregrise { /* Style des deux barres grises, menu horizontal et footer */
	height: 40px;
	background-image: url(images/divgris_repeat.png);
	background-repeat: repeat-x; /* Répétition de l'arrière plan sur l'axe des X (plan horizontal) */

}
.barregrise .barregauche { /* Style pour le coin gauche de la barre grise */
	height: 40px;
	width: 5px;
	background-image: url(images/divgris_left.png);
	background-repeat: no-repeat;
	float: left;
}

.barregrise .barrecontenu { /* div contenant le menu horizontal, centré dans .barregrise */
	height: 40px;
	margin: auto;
	float: left;
	width: 99%;
}
.barregrise .barredroite {  /* Style pour le coin droit de la barre grise */
	height: 40px;
	float: right;
	width: 5px;
	background-image: url(images/divgris_right.png); /* L'image remplit exactement le div, elle fait 40 pixels de hauteur et 5 pixels de largeur */
	background-repeat: no-repeat;
}

/* Mise en page du centre avec 4 coins et 4 repeat pour permettre une mise en page extensible */
/* Premier arrière plan */
#page {
	background-color: #ececec;
	background-image: url(images/container_gauche_repeat.jpg);
	background-repeat: repeat-y;
	background-position: left;
    }
/* Deuxieme arrière plan, placé à droite */
#page-background2 {
	background-image: url(images/container_droit_repeat.jpg);
	background-repeat: repeat-y;
	background-position: right;
}


#page_top { /* Div contenant les images nécessaire pour le haut de la page */
	background-image: url(images/container_haut_repeat.jpg); /* Bordure haute en répétition horizontale */
	background-repeat: repeat-x;
	height: 16px;
}
/* Mêmes techniques de positionnement que pour les coins du menu horizontal */
#page_top #coin-gauche {
	background-image: url(images/container_haut_gauche.jpg);
	background-repeat: no-repeat;
	width: 8px;
	height: 16px;
	float: left;
}
#page_top #coin-droit {
	background-image: url(images/container_haut_droit.jpg);
	background-repeat: no-repeat;
	width: 8px;
	height: 16px;
	float: right;
}
/* Div contenant les images nécessaire pour le bas de la page */
#page_bottom {
	background-image: url(images/container_bas_repeat.jpg);
	background-repeat: repeat-x;
	height: 24px;
}
#page_bottom #coin-gauche-bas {
	background-image: url(images/container_bas_gauche.jpg);
	background-repeat: no-repeat;
	width: 8px;
	height: 24px;
	float: left;
}
#page_bottom #coin-droit-bas {
	background-image: url(images/container_bas_droit.jpg);
	background-repeat: no-repeat;
	width: 8px;
	height: 24px;
	float: right;
}
/* Conteneur qui contient le menu et le contenu de la page */
#contenu {
	padding-left: 10px;
	padding-top: 5px;
	padding-right: 10px;
}
/* Contient la page (titre, actualités, tableaux, bref toutes les informations */
.grosbloc {
	width: auto; /* Largeur automatique calculé par rapport à la largeur de la page (extensible) */
	background-color: #f7f7f7;
	border: 1px solid #e2e2e2;
	padding: 15px;
	margin-left: 212px; /* Subtilité: Ici on applique une marge gauche de la taille du menu gauche (voir plus) car il est en flottement à gauche, donc il n'intéragit pas avec ce bloc */
}
#colonnegauche { /* conteneur du menu */
	width: 181px;
	padding: 10px; /* marge interne sur tout les côtés */
	background-color: #f7f7f7;
	border: 1px solid #e2e2e2;
	float: left;
}
#colonnegauche ul {
	width:180px;
	padding:0;
	margin:0;
}

#colonnegauche li a {
	display:block; /* Cette propriété permet au lien de devenir un élément de type "block", on peut donc lui assigner une hauteur et une largeur; cela permet aussi que la couleur du fond appliquée lors du survol fasse toute la taille du lien */
	height:22px;
	text-decoration:none; /* éviter le style de lien souligné appliqué par défaut */
	color:#496183;
	background-color:#f7f7f7;
	padding-left: 8px;
	padding-top: 4px; /* Pour centrer le texte du lien verticalement */
}
#colonnegauche li a:hover, #colonnegauche ul li.extend:hover a, #colonnegauche ul li.extend:hover ul li:hover a { /* Arrière plan lors du survol du lien */
	background-color: #e7e7e7;
   }
#colonnegauche ul li.extend:hover ul li a { /* Couleurs des liens de la deuxieme liste */
	background-color: #ecf0f5;
	color: #990000;
   }
#colonnegauche ul li {
	width:auto;
	height: 26px; /* Même largeur que les liens qui comprennent une marge interne (22 + 4) */
	list-style-type: none; /* On enlève la puce par défaut de l'élément de liste */
}
#colonnegauche ul li ul {
	display:none; /* On empêche l'affichage de la liste de niveau 2, elle ne doit s'afficher que lors du survol */
	list-style-type: none;
}
#colonnegauche ul li:hover ul {
	display:block; /* Affichage de la liste de niveau 2 */
	position:relative; /* Place l'élément en haut à droite de l'élément le content */
	left:180px; /* On le positionne à droite de notre menu */
	top: -26px; /* à la même hauteur que notre lien survolé de largeur 26px, donc sur l'axe des Y on doit le placer 26px plus haut */
	width: 190px;
}

#colonnegauche ul li.extend a { /* Classe pour affiché le niveau 2 */
	background:#f7f7f7 url("images/suite.gif") right no-repeat; /* Flèche noir indiquant la présence du sous menu */
}
#colonnegauche ul li.extend ul li a {
	background-image:none; /* On empêche que le sous menu hérite de la flèche noir */
}
#colonnegauche ul li.extend:hover { /* Correction du bug IE 6 qui décale l'intérieur du menu */
	width:180px;
	height:26px;
	overflow:hidden;
}
html > body #colonnegauche ul li.extend:hover {
  overflow:visible; /* Permet d'afficher tout le contenu même si cela provoque un agrandissement de l'élément */
}

#actu a.liennews { /* Flèche situé à gauche du lien de news */
	background-image: url(http://etablissements.ac-amiens.fr/0601863z/Images/triangle.gif);
	background-repeat: no-repeat;
	background-position: left;
	padding-left: 20px;
} 

/* Bas de page */
#footer {
	background:#DDDDDD;
}
#footer_contenu { 
	width: 600px;
	height: 28px;
	color: #c4c4c4;
	padding-top: 10px;
	margin: auto;
	font-size: 11px;

}

#footer_contenu span  {
	float: right;
	text-align: center;
	background-image: url(images/puceverte_menu.png);
	background-repeat: no-repeat;
	background-position: left;
	padding-left: 10px;
	padding-right: 10px;
}

/* Non utilisé */
#footer_contenu a { color: #c4c4c4; font-weight: normal;}
#footer_contenu a:hover { text-decoration: underline;  }


/* Hack css Safari et Chrome pour le menu horizontal */
body:nth-of-type(1) #menu { padding-left: 40px; }
body:nth-of-type(1) #menu li a{ margin: 13px 10px 0 5px; }