body {
	background-color:#CFCECE;
}

.containerGlobal {
	margin-right: auto; /*z-index: 1;*/
	margin-left: auto;
	height: 720px; /*height: 100%; 682px*/
	width: 960px; /*width: 1024px;*/
	overflow: hidden;
	margin-top: 20px;
	box-shadow: 1px 1px 8px #555;
	background-image: url(images/Fond.jpg);
	/*background-image: url(images/modele.jpg);*/
}

.containerGlobal.int {
	background-image: url(images/Fond_Int.jpg);
	/*background-image: url(images/Modele.jpg);*/
}

.header {
	background-image: url(images/headerHopIn.png); /*z-index: 2;*/
	position: relative;
	width: 960px;
	height: 215px;
	background-size: cover;
	background-repeat: no-repeat;
	/*float:left;*/
	margin: 0px;
	padding: 0px;

}

.header_int {	position: relative;
	width: 960px;
	height: 140px;
		/*background-image: url(images/headerCM2_int.png);*/ /*z-index: 2;*/}



/* Boutons menu */


.boutons {
    width: 306px;
    height: 500px;
    left: 0px;
    float: left;
    position: relative;
    z-index: 30;
    top: 0px;
}
.boutons_pt {
    width: 306px;
    height: 510px;
    left: 0px;
    float: left;
    position: relative;
    z-index: 30;
    top:64px;
	
	
}
/*.boutons, .boutons_pt {position: relative; z-index: 30;}*/
.boutons #btn_01, .boutons #btn_02, .boutons #btn_03, .boutons #btn_04, .boutons #btn_05, .boutons #btn_06, .boutons #btn_materiel, .boutons #btn_corriges, .boutons_pt #btn_00_actif, .boutons_pt #btn_01_actif,  .boutons_pt #btn_02_actif, .boutons_pt #btn_03_actif, .boutons_pt #btn_04_actif,  .boutons_pt #btn_05_actif,  .boutons_pt #btn_06_actif {background-size: cover; position: absolute; /*width: 306px; height: 80px; */}


.boutons #btn_01:hover {background-image: url(images/btn_01_over.png);}
.boutons #btn_01 {
    background-image: url(images/btn_01.png);
    left: 0px;
    top: 12px;
    height: 100px;
    width: 233px;
}

.boutons #btn_02:hover {background-image: url(images/btn_02_over.png);}
.boutons #btn_02 {
    background-image: url(images/btn_02.png);
    left: 0px;
    top: 105px;
    height: 123px;
    width: 318px;
}

.boutons #btn_03:hover {background-image: url(images/btn_03_over.png);}
.boutons #btn_03 {
    background-image: url(images/btn_03.png);
    left: 0px;
    top: 217px;
    height: 100px;
    width: 266px;
}
/*.boutons #btn_04:hover {background-image: url(images/btn_04_over.png);}
.boutons #btn_04 {
	background-image: url(images/btn_04.png);
	left: 0px;
	top: 325px;
	height: 80px;
	width: 306px;
}

.boutons #btn_05:hover {background-image: url(images/btn_05_over.png);}
.boutons #btn_05 {
	background-image: url(images/btn_05.png);
	left: 0px;
	top: 415px;
	height: 80px;
	width: 306px;
}

.boutons #btn_06:hover {background-image: url(images/btn_06_over.png);}
.boutons #btn_06 {
	background-image: url(images/btn_06.png);
	left: 0px;
	top: 444px;
	height: 80px;
	width: 306px;
}*/


.boutons #btn_materiel:hover {background-image: url(images/btn_materiel_over.png);}
.boutons #btn_materiel {
	background-image: url(images/btn_materiel.png);
	left: 768px;
	top: 318px;
	height: 131px;
	width: 106px;
}

.boutons #btn_corriges:hover {background-image: url(images/btn_corriges_over.png);}
.boutons #btn_corriges {
    background-image: url(images/btn_corriges.png);
    left: 60px;
    top: 310px;
    height: 169px;
    width: 170px;
}




/* Boutons menu (dans chaque matière) */


.boutons_pt #btn_01, .boutons_pt #btn_02, .boutons_pt #btn_03, .boutons_pt #btn_04, .boutons_pt #btn_05, .boutons_pt #btn_06{
	background-size: cover;
	position: absolute;
	left: 0px;
}
/*.boutons_pt #btn_01:hover, .boutons_pt #btn_02:hover, .boutons_pt #btn_03:hover, .boutons_pt #btn_04:hover,.boutons_pt #btn_05:hover, .boutons_pt #btn_06:hover{width:342px; height:80px;}
.boutons_pt #btn_01_actif, .boutons_pt #btn_02_actif, .boutons_pt #btn_03_actif, .boutons_pt #btn_04_actif, .boutons_pt #btn_05_actif, .boutons_pt #btn_06_actif{width:342px; height:80px;}*/




.boutons_pt #btn_01:hover {background-image: url(images/btn_01_int_over.png);width: 409px;
	height: 100px;}
.boutons_pt #btn_01 {
    background-image: url(images/btn_01.png);
    top: 23px;
    width: 233px;
    height: 100px;
}

.boutons_pt #btn_01_actif {
    background-image: url(images/btn_01_int_over.png);
    top: 23px;
    width: 409px;
    height: 100px;
}

.boutons_pt #btn_02:hover {background-image: url(images/btn_02_int_over.png); width: 409px;
	height: 123px;}
.boutons_pt #btn_02 {
    background-image: url(images/btn_02.png);
    top: 116px;
    margin-bottom: 20px;
    width: 318px;
    height: 123px;
}
.boutons_pt #btn_02_actif {
    background-image: url(images/btn_02_int_over.png);
    top: 116px;
    width: 409px;
    height: 123px;
}


.boutons_pt #btn_03:hover {background-image: url(images/btn_03_int_over.png);width: 400px;
	height: 100px;}
.boutons_pt #btn_03 {
    background-image: url(images/btn_03.png);
    top: 228px;
    margin-bottom: 20px;
    width: 266px;
    height: 100px;
}
.boutons_pt #btn_03_actif {
    background-image: url(images/btn_03_int_over.png);
    top: 228px;
    width: 400px;
    height: 100px;
}

/*.boutons_pt #btn_04:hover {background-image: url(images/btn_04_petit_over.png);}
.boutons_pt #btn_04 {
	background-image: url(images/btn_04_petit.png);
	top: 264px;
}

.boutons_pt #btn_04_actif {
	background-image: url(images/btn_04_petit_over.png);
	top: 264px;
}

.boutons_pt #btn_05:hover {background-image: url(images/btn_05_petit_over.png);}
.boutons_pt #btn_05 {
	background-image: url(images/btn_05_petit.png);
	top: 349px;
}

.boutons_pt #btn_05_actif {
	background-image: url(images/btn_05_petit_over.png);
	top: 349px;
}

.boutons_pt #btn_06:hover {background-image: url(images/btn_06_petit_over.png);}
.boutons_pt #btn_06 {
	background-image: url(images/btn_06_petit.png);
	top: 389px;
}

.boutons_pt #btn_06_actif {
	background-image: url(images/btn_06_petit_over.png);
	top: 389px;
}*/

.boutons_pt #btn_materiel:hover {background-image: url(images/btn_materiel_petit_over.png);}
.boutons_pt #btn_materiel {
	background-image: url(images/btn_materiel_petit.png);
	top: 455px;
	background-size: cover;
	position: absolute;
	width: 74px;
	height: 90px;
	left: 192px;
}

.boutons_pt #btn_materiel_actif {
	background-image: url(images/btn_materiel_petit_over.png);
	top: 455px;
	background-size: cover;
	position: absolute;
	width: 74px;
	height: 90px;
	left: 192px;
}

.boutons_pt #btn_corriges:hover {background-image: url(images/btn_corriges_over.png);}
.boutons_pt #btn_corriges {
    background-image: url(images/btn_corriges.png);
    background-size: cover;
    position: absolute;
    left: 60px;
    top: 321px;
    height: 169px;
    width: 170px;
}

.boutons_pt #btn_corriges_actif {
    background-image: url(images/btn_corriges_over.png);
    background-size: cover;
    position: absolute;
    left: 60px;
    top: 321px;
    height: 169px;
    width: 170px;
}


#credits {
    font-family: Arial, sans-serif;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    left: 15px;
    position: relative;
    top: 470px;
    width: 300px;top:485px;
   /* font-weight: bold;*/
}

.logo_magnard {
	position: absolute;
	bottom : 22px;
	z-index: 30;
	width:107px;
	height:63px;
	right: 27px;
	background-image: url(images/logo_magnard.png);	 /*width: 1004px;*/
}

/* Pour le contenu de la page de chaque matière */
/*.CourbePage_Gram { width : 595px; height: 82px;	top: -82px;	position: absolute;	background-image: url(images/CourbePage_Gram.png);}
.CourbePage_Conj { width : 595px; height: 82px;	top: -82px;	position: absolute;	background-image: url(images/CourbePage_Conj.png);}
.CourbePage_Ortho { width : 595px; height: 82px;	top: -82px;	position: absolute;	background-image: url(images/CourbePage_Ortho.png);}
.CourbePage_Voca { width : 595px; height: 82px;	top: -82px;	position: absolute;	background-image: url(images/CourbePage_Voca.png);}
.CourbePage_Credits { width : 595px; height: 82px;	top: -82px;	position: absolute;	background-image: url(images/CourbePage_Credits.png);}*/

.contenuMat {
    z-index: 20;
    position: relative;
    right: 10px;
    top: 0px;
    width: 610px;
    height: 562px;
    background-position: right bottom;
    background-repeat: no-repeat;
    float: left;
    left: 50px;


/**width: 610px;*/
	*height: 515px;
    top: 15px;
}




.cont {
    z-index: 100;
    position: absolute;
    top : 0px;
    left: 50px;
    width: 553px;
    height: 546px;
    overflow: auto;
    padding-right: 2px;
}

.contcredits {
    z-index: 100;
    position: absolute;
    top : 0px;
    left: 50px;
    width: 542px;
    /*height: 562px;*/
    overflow: auto;
    padding-right: 2px;
}


.tobbleMenu_deplier {}
.SubMenu_deplier {}
.grosh_deplier {
	background: url(images/fleche_bleu02.png) no-repeat left center;
	background-size: 26px 24.64px;
	font-weight: bold;
	color: #7c066e;
	margin-bottom: 0px;
		padding-left: 35px;
	padding-top: 2px;
	width: 300px;
	font-family: Arial;
	font-weight: bold;
	font-size: 18pt;
	padding-bottom: 2px;
	margin-bottom: 0px;
	color: #2a64b0; /*color: #7c066e;*/
}

.grosh em, .grosh_selec em, .grosh_niv02 em, .grosh_niv02_selec em, .grosh_niv02Coul02 em, .grosh_niv02_selecCoul02 em {/*color:#CF1518;*/ font-style:italic;}


.grosh,  .grosh_selec {
	padding-left: 30px;
	padding-top: 0px;
	width: 300px;
	font-family: Arial;
	font-weight: bold;
	font-size: 20pt;
	padding-bottom: 0px;
	margin-bottom: 0px;
	color: #2a64b0; /*color: #7c066e;*/
}

.grosh_gris{padding-left: 30px;
	padding-top: 0px;
	width: 300px;
	font-family: Arial;
	font-weight: bold;
	font-size: 20pt;
	padding-bottom: 0px;
	margin-bottom: 0px;
	color: #6d6d6d;}
.grosh {
	background: url(images/fleche_bleu01.png) no-repeat left center; /*background: url(images/fleche_violette01.png) no-repeat left center;*/
	background-size: 26px 24.64px;

	margin: 0px;
		font-family: Arial;
	font-weight: bold;
	font-size: 20pt;
}

.grosh_gris {
	background: url(images/fleche_grise.png) no-repeat left center; /*background: url(images/fleche_violette01.png) no-repeat left center;*/
	background-size: 26px 24.64px;

	margin: 0px;
		font-family: Arial;
	font-weight: bold;
	font-size: 20pt;
}

.grosh_selec {
	background: url(images/fleche_bleu02.png) no-repeat left center; /*background: url(images/fleche_violette02.png) no-repeat left center;*/
	background-size: 26px 24.64px;
	font-weight: bold;
	color: #2a64b0; /*color: #7c066e;*/
	margin: 0px;
}

/* nouveaux syles pour couleurs eval, etiquettes, ect. */


/*.grosh_coul02 {
	background-size: 26px 24.64px;
	margin-bottom: 00px;
	display: block;
	background-color: #FFF;
	background: url(images/fleche_rose01.png) no-repeat left center;
	background-repeat: no-repeat;
	font-size: 20px;
	font-weight:bold;
	color: #7c066e;
}

.grosh_coul02_selec {
	background-size: 26px 24.64px;
	display: block;
	background-color: #FFF;
	background: url(images/fleche_rose02.png) no-repeat left center;
	background-repeat: no-repeat;
	background-position: left center;
	font-size: 20px;
	font-weight:bold;
	color: #7c066e;
}

.grosh_coul03 {
	background-size: 26px 24.64px;
	margin-bottom: 00px;
	display: block;
	background-color: #FFF;
	background: url(images/fleche_bleu01.png) no-repeat left center;
	background-repeat: no-repeat;
	font-size: 20px;
	font-weight:bold;
	color: #7c066e;
}

.grosh_coul03_selec {
	background-size: 26px 24.64px;
	display: block;
	background-color: #FFF;
	background: url(images/fleche_bleu02.png) no-repeat left center;
	background-repeat: no-repeat;
	background-position: left center;
	font-size: 20px;
	font-weight:bold;
	color: #7c066e;
}*/


/*-------------------------------------*/

.cont a span.pgrosh_niv02 {background-color: white;}
.cont a span.pgrosh_niv02_selec {
	background-color: #CD1F5E;
	background-image: url(images/SsMenu_BordArrondi.gif);
	background-repeat: no-repeat;
	background-position: right bottom;
}
.cont span.pgrosh_niv02:hover, .cont span.pgrosh_niv02_selec:hover {
	background-color: #CD1F5E;
	color: #E3254F;
}


/* Pour le bouton Home (en bas à droite) */
.btnHome {position: relative; z-index: 30;}
.btnHome #home {/*z-index: 1;*/background-size: cover; position: absolute; top: -100px; left: 970px; width: 42px; height: 42px;}
.btnHome #home:hover {background-image: url(images/home_over.png);}
.btnHome #home {background-image: url(images/home.png);}

/* Pour le défilement du texte */
#navigation li a {text-decoration: none; color: black; /*background-color: red;*/}
#navigation img {width: 26px; }
#navigation .fleche_bleue {width: 9px;}
#navigation .puce_violette {width: 9px;}
#navigation .puce_noire {width: 9px;}
#navigation .puce_tick {width: 25px;}
.cache .puce_noire {width: 9px;}
#navigation .puce_act_sup {width: 9px;}
.cache  {
}

.cache p {
	background-color: transparent;
	padding-left:22px;
	font-family: Arial;
	font-size: 9pt;
	padding-top: 10px;
	padding-right: 0px;
	padding-left:75px;
	padding-bottom:5px;
	margin-top: -10px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	line-height: 12pt;
}
/*.materiel {padding-top:15px;}
.materiel p {
	background-color: transparent;
	padding-left:22px;
	font-family: Arial;
	font-size: 9pt;
	padding-top:6px;
	padding-right: 0px;
	padding-bottom: 6px;
	margin-top: -10px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	line-height: 12pt;
}*/
.cache p:hover {background-color: transparent; color: black;}
/*.cache_niv02  {padding-top:0px; padding-bottom:10px;}

.cache_niv02 p {
	background-color: transparent;
	padding-left: 50px;
	font-family: Arial;
	font-size: 9pt;
	padding-top: 3px;
	padding-right: 0px;
	padding-bottom: 2px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 00px;
	margin-left: 0px;
	line-height: 12pt;
}*/
/*.deplier span  {
	padding-left: 0px;
}
.deplier .fleche_bleue {
	padding-left: 35px;
}


.cache_niv02 p:hover {background-color: transparent; color: black;}
.nocache  {
}

.nocache p {
	background-color: transparent;
	padding-left: 30px;
	font-family: Arial;
	font-size: 9pt;
	padding-top: 2px;
	padding-right: 0px;
	padding-bottom: 2px;
	margin-top: -10px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	line-height: 12pt;
}
.nocache p:hover {background-color: transparent; color: black;}*/
.couleur_eval {color:#7c066e;}


.ssMen1, .ssMen2 {

	font-size: 14px;
	padding: 0px;
	margin-top: 2px;
	margin-right: 0px;
	margin-bottom: 2px;
	margin-left: 0px;
}
.picto_pdf {vertical-align:middle;}
.picto_word {vertical-align:middle;}
.picto_mp4 {vertical-align:top;}
.picto_mp3 {vertical-align:top;top:3px;position:relative;}

.ssMen1.eval {color: #7c066e;}
.ssMen1.etiquette {color: #e00086;}
.ssMen1.act_sup {color: #2a64b0;}
.ssMen1 {
	color: #000;
	font-size: 21px;
line-height:25px;
font-style:normal;
	padding: 0px;
	margin-top:5px;
	margin-right: 0px;
	margin-bottom:5px;
	margin-left: 0px;
}
.ssMen2 {
	color: #0072BC;
	font-size: 14px;

	padding: 0px;
	margin-top: 2px;
	margin-right: 0px;
	margin-bottom: 2px;
	margin-left: 0px;
}
.ssMen2_espace{
	color: #0072BC;
	font-size: 13px;
	font-weight: bold;
	margin-top: 20px;
	margin-right: 0px;
	margin-bottom: 2px;
	margin-left: 0px;
	padding-top: 20px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}

li {
	clear: both;
	list-style-type: none;
	padding: 0px;
	margin: 0px  0px;
	font-size: 14px;
}

ul {
	padding: 0px;
	margin: 0px;
}

.containerGlobal #container #contenuMat #cont #navigation .toggleSubMenu .subMenu li .cache p span a img{
	vertical-align: text-bottom;
	}
	
.containerGlobal #container #contenuMat #cont #navigation .toggleSubMenu .subMenu li .cache p span a img {
	vertical-align: text-bottom;
	margin-top: 2px;
	margin-bottom: 2px;
	}	
.titre_credits {
	width: 460px;
	font-family: Arial;
	font-weight: bold;
	font-size: 12pt;

	color: #7c066e;
	margin: 0px;
	padding-top: 20px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 50px;
}
.img_credits{
	margin-right: 5px;
	float: left;
	margin-top:13px;
	position: absolute;
	margin-left: 0px;
	z-index: 102;
	left: 0px;
}



p.auteurs_credits {
	font-family: arial;
	font-size: 13pt;
	padding-left: 18px;
	margin: 0px;
	font-weight:bold;
	padding-top: 8px;
	padding-right: 0px;
	padding-bottom: 0px;
	color:#ec1f24;
	}
	
.fonction_credits {
	font-family: arial;
	font-size: 10pt;
	font-weight: normal;
	color: #000;
	padding-left: 18px;
	margin: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px; line-height:18px;
	}

.fonction_credits strong {
	font-family: arial;
	font-weight: bold;
	color:#14558B;

	}	
	
.fermer {
	height: 20px;
	width: 20px;
	position: absolute;
	top: 5px;
	right: 5px;
	}
sup {
	vertical-align: text-top;
}
.grosh_niv02 em {
	font-style: italic;
}
.titre_audio {
	font-family: arial;
	color: #06B2B6;
	font-weight: bold;
	font-size: 27px;
	margin-bottom: 5px;
}


.red_hat{width:27px; height:23px;background-image:url(images/red_hat.png); color:#fff; font-size:10px; display:inline-block; top:5px; margin-right:2px; left:-5px;position:relative; padding:6px 10px 10px 6px; text-align:center;}
.grey_hat{width:27px; height:23px;background-image:url(images/grey_hat.png); color:#fff; font-size:10px; display:inline-block; top:5px; margin-right:2px; left:-5px;position:relative; padding:6px 10px 10px 6px; text-align:center;}

.red_hat strong {font-size:13px;}

li.toggleSubMenu{padding:0px; margin:0px; }
li.sans_deplier{padding:0px; margin-top:10px;margin-bottom:15px; /*background-color:red;*/ cursor:default}