/* Eléments principaux de la page */
body
{
	background-color: #3C2001;
	font-family: Comic Sans MS, Arial, Georgia, Verdana, sans-serif;
	color: black;
	font-weight: normal;
}

#bloc_page
{
	width: 1024px;
	margin: auto;
}

/* en-tête */
header
{
	background-image: url("http://www.collegecuallacci.com/musique/educmusique/images/header.jpg");
	width: 1024px;
	height: 292px;	
}

/* navigation */
#marron
{
	background-image: url("http://www.collegecuallacci.com/musique/educmusique/images/menumarron.jpg");
	width: 1024px;
	height: 200px;
}

#rouge
{
	background-image: url("http://www.collegecuallacci.com/musique/educmusique/images/menurouge.jpg");
	width: 1024px;
	height: 200px;
}

#orange
{
	background-image: url("http://www.collegecuallacci.com/musique/educmusique/images/menuorange.jpg");
	width: 1024px;
	height: 200px;
}

#jaune
{
	background-image: url("http://www.collegecuallacci.com/musique/educmusique/images/menujaune.jpg");
	width: 1024px;
	height: 200px;
}

#vert
{
	background-image: url("http://www.collegecuallacci.com/musique/educmusique/images/menuvert.jpg");
	width: 1024px;
	height: 200px;
}

#violet
{
	background-image: url("http://www.collegecuallacci.com/musique/educmusique/images/menuviolet.jpg");
	width: 1024px;
	height: 200px;
}


		/* zones cliquables */
.zone1 /* accueil */
{
	float: left;
	width: 90px;
	height: 30px;
	margin-left: 85px;
	margin-top: 25px;

}
.zone2 /* sixième */
{
	float: left;
	width: 110px;
	height: 30px;
	margin-left: 8px;
	margin-top: 25px;

}
.zone3 /* cinquième */
{
	float: left;
	width: 110px;
	height: 30px;
	margin-left: 15px;
	margin-top: 25px;
	
}
.zone4 /* quatrième */
{
	float: left;
	width: 120px;
	height: 30px;
	margin-left: 15px;
	margin-top: 25px;

}
.zone5 /* troisième */
{
	float: left;
	width: 110px;
	height: 30px;
	margin-left: 10px;
	margin-top: 25px;
	
}
.zone6 /* chorale */
{
	float: left;
	width: 115px;
	height: 30px;
	margin-left: 10px;
	margin-top: 25px;
	
}
.zone7 /* atelier */
{
	float: left;
	width: 110px;
	height: 30px;
	margin-left: 15px;
	margin-top: 25px;

}
/*---------------------------Diaporama Délégués-------------------------*/
#slideshow {
	position: relative;
	width: 231px;
	height: 310px;
	padding: 15px;
	border: 1px solid #ddd;
	margin: 0 auto 2em;
	background: #FFF;
	background: -webkit-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	background: -moz-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	background: -ms-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	background: -o-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	background: linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	
	-webkit-border-radius: 2px 2px 2px 2px;
	-moz-border-radius: 2px 2px 2px 2px;
	border-radius: 2px 2px 2px 2px;
	
	-webkit-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
	-moz-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
	box-shadow: 0 0 3px rgba(0,0,0, 0.2);
}

/* avanced box-shadow : ombre-avancees-avec-css3-et-box-shadow */
#slideshow:before,
#slideshow:after {
	position: absolute;
	display:block;
	bottom:16px;
	width: 50%;
	height: 20px;
	content: " ";
	background: rgba(0,0,0,0.1);
	
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	
	-webkit-box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
	-moz-box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
	box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
	
	z-index: -10;
}
#slideshow:before {
	left:0;
	-webkit-transform: rotate(-4deg);
	-moz-transform: rotate(-4deg);
	-ms-transform: rotate(-4deg);
	-o-transform: rotate(-4deg);
}
#slideshow:after {
	right:0;
	-webkit-transform: rotate(4deg);
	-moz-transform: rotate(4deg);
	-ms-transform: rotate(4deg);
	-o-transform: rotate(4deg);
}


#slideshow .container {
	position:relative;
	width: 231px;
	height: 310px;
	overflow: hidden;
}
/* timeline base */
#slideshow .container:after {
	position:absolute;
	bottom: 0; left:0;
	content: " ";
	background: #999;
	width: 100%;
	height: 1px;
}

@-webkit-keyframes slider {
	0%, 20%, 100%	{ left: 0 }
	25%, 45%		{ left: -100% }
	50%, 70%		{ left: -200% }
	75%, 95%		{ left: -300% }
}
@-moz-keyframes slider {
	0%, 20%, 100%	{ left: 0 }
	25%, 45%		{ left: -100% }
	50%, 70%		{ left: -200% }
	75%, 95%		{ left: -300% }
}
@keyframes slider {
	0%, 20%, 100%	{ left: 0 }
	25%, 45%		{ left: -100% }
	50%, 70%		{ left: -200% }
	75%, 95%		{ left: -300% }
}

#slideshow .slider {
	position: absolute;
	left:0; top:0;
	width: 400%;
	height: 310px;
	
	-webkit-animation: slider 32s infinite;
	-moz-animation: slider 32s infinite;
	animation: slider 32s infinite;
}

#slideshow .c_slider {
	position: absolute;
	left:0; top:0;
	width: 400%;
	height: 310px;
	background: url(http://www.collegecuallacci.com/musique/educmusique/styles/images/slide/delegues/morgane.jpg) 0 0 no-repeat, url(http://www.collegecuallacci.com/musique/educmusique/styles/images/slide/delegues/gabriel.jpg) 640px 0 no-repeat, url(http://www.collegecuallacci.com/musique/educmusique/styles/img/dummy-640x310-3.jpg) 1280px 0 no-repeat, url(http://www.collegecuallacci.com/musique/educmusique/styles/img/dummy-640x310-4.jpg) 1920px 0 no-repeat;
}
#slideshow figure {
	position:relative;
	display:inline-block; 
	padding:0; margin:0;
}

@-webkit-keyframes figurer {
	0%, 25%, 50%, 75%, 100%						{ -webkit-box-shadow: 0 0 65px rgba(0,0,0, 0) inset; box-shadow: 0 0 65px rgba(0,0,0, 0) inset;	}
	5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%		{ -webkit-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;	box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; }
}
@-moz-keyframes figurer {
	0%, 25%, 50%, 75%, 100%						{ -moz-box-shadow: 0 0 65px rgba(0,0,0, 0) inset; box-shadow: 0 0 65px rgba(0,0,0, 0) inset;	}
	5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%		{ -moz-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;	box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; }
}
@keyframes figurer {
	0%, 25%, 50%, 75%, 100%						{ -moz-box-shadow: 0 0 65px rgba(0,0,0, 0) inset; box-shadow: 0 0 65px rgba(0,0,0, 0) inset;	}
	5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%		{ -moz-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;	box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; }
}
#slideshow figure:after {
	position: absolute;
	display:block;
	content: " ";
	top:0; left:0;
	width: 100%; height: 100%;
	-webkit-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
	-moz-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
	box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
	
	-webkit-animation: figurer 32s infinite;
	-moz-animation: figurer 32s infinite;
	animation: figurer 32s infinite;
}

@-webkit-keyframes figcaptionner {
	0%, 25%, 50%, 75%, 100%						{ bottom: -55px;	}
	5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%		{ bottom: 5px;		}
}
@-moz-keyframes figcaptionner {
	0%, 25%, 50%, 75%, 100%						{ bottom: -55px;	}
	5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%		{ bottom: 5px;		}
}
@keyframes figcaptionner {
	0%, 25%, 50%, 75%, 100%						{ bottom: -55px;	}
	5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%		{ bottom: 5px;		}
}

#slideshow figcaption {
	position:absolute;
	padding: 20px 20px; margin:0;
	left:0; right:0; bottom: 5px;
	text-align:center;
	letter-spacing: 0.05em;
	word-spacing: 0.05em;
	font-family: Georgia, Times, serif;
	background: #000;
	background: rgba(255,255,255,0.7);
	border-top: 1px solid rgb(225,225,225);
	color: #555;
	text-shadow: -1px -1px 0 rgba(255,255,255,0.3);
	
	-webkit-animation: figcaptionner 32s infinite;
	-moz-animation: figcaptionner 32s infinite;
	animation: figcaptionner 32s infinite;
}

@-webkit-keyframes timeliner {
	0%, 25%, 50%, 75%, 100%	{ width: 0;		}
	20%, 45%, 70%, 90%		{ width: 231px;	}
}
@-moz-keyframes timeliner {
	0%, 25%, 50%, 75%, 100%	{ width: 0;		}
	20%, 45%, 70%, 90%		{ width: 231px;	}
}
@keyframes timeliner {
	0%, 25%, 50%, 75%, 100%	{ width: 0;		}
	20%, 45%, 70%, 90%		{ width: 231px;	}
}

#timeline {
	position: absolute;
	background: #999;
	bottom: 15px;
	left: 15px;
	height: 1px;
	background: rgb(214,98,13);
	background: rgba(214,98,13,.8);
	width: 0;
	
	-webkit-animation: timeliner 32s infinite;
	-moz-animation: timeliner 32s infinite;
	animation: timeliner 32s infinite;
}

/* Section, corps de page */

section
{
	background-image: url("http://www.collegecuallacci.com/musique/educmusique/images/corps.jpg");
	background-repeat: repeat-y;
	width: 1024px;
	padding-top: 0px;
	padding-bottom: 5px;
	padding-right: 50px;
	padding-left: 50px;
	margin-top: -23px;
	margin-bottom: -27px;
}

/* ARTICLE */
article, aside
{
   	display: inline-block;
	vertical-align: top;
	text-align: justify;
}

/*BOUTON Accès Page des 5C*/
input.modif {
background: url("http://www.collegecuallacci.com/musique/educmusique/images/button5c.png");
width: 136px;
height: 48px;
font-size: large;
}

.textfield
{
font-family: "Segoe Print", Veran, Arial;
height: 30px;
}

article
{
	width: 59%;
	border: 5px inset black;
	margin: 5px;
	border-radius: 5px;
	padding: 5px;
	margin-bottom: 20px;
}

		/* formatage du texte ARTICLE */
.imageflottante
{
	float: left;
}

.ombre
{
box-shadow:0px 0px 15px 5px grey;
width: 90px;
margin-right: 10px;
}

article h1
{
	font-size: 130%;
	color: #80007c;
	text-align: center;
	font-family: Arial, sans-serif;
}

article h2
{
	font-size: 120%;
	color: #79291e;
	text-align: center;
}  

article h3
{
	font-size: 110%;
	color: #70a402;
}

article p
{
	font-size: 100%;
	text-align: justify;
}

article p a
{
	font-size: 100%;
	color: black;
	padding-bottom: 3px;
	text-decoration: none;
}

article p a:hover
{
	color: #4c8129;
	text-decoration: underline white;
}

.confere
{
	color: #5ba9ab;
	font-style: italic;
}

.lecteur_flottant
{
		float: left;
		margin-right: 10px;
}

article #vocabulaire
{
	background-color : #e39d9d;
	border : 3px dashed red;
	padding : 5px;
	border-radius: 5px;
}


/* ASIDE */
aside
{
	width: 27%;
	margin-top: 5px;
	margin-bottom: 5px;
	margin-right: 10px;
	background-color: #706b64;
	box-shadow: 0px 2px 5px #1c1a19;
	border-radius: 5px;
	color: white;
	font-size: medium;
	padding: 5px;
}



		/*Formatage du texte ASIDE */
aside h1
{
	font-size: 110%;
	color: #5ba9ab;
	text-align: center;
}

aside h2
{
	font-size: 100%;
	color: #E9967A;
	text-align: center;
}

aside h3
{
 font-size: 80%;
 color: #EEE8AA;
 texte-align: center;
}
aside p
{
	font-size: 90%;
}
aside p a
{
	font-size: 90%;
	color: black;
	padding-bottom: 3px;
	text-decoration: none;
}

aside p a:hover
{
	color: white;
	text-decoration: underline white;
}

.paroles
{
	text-align : center;
}

/* bas de page */
footer
{
	background-image: url("http://www.collegecuallacci.com/musique/educmusique/images/footer.jpg");
	background-repeat: no-repeat;
	width: 1024px;
	height: 171px;
	padding-top: 30px;
}
footer p
{
	margin-top: 20px;
	margin-left: 30px;
	font-size: 0.8em;
}

footer h1
{
	font-size: 1.1em;
	margin-left: 30px;
}




/* Correctifs pour les vieilles versions d'Internet Explorer */

/* Pour activer un positionnement type inline-block sur les vieilles versions d'IE */

.old_ie header h1, .old_ie article, .old_ie aside
{
    display: inline;
    zoom: 1;
}

/* Quelques ajustements pour les vieilles versions d'IE 

.old_ie section h1, .ie8 section h1
{
    font-size: 1.1em;
}*/

.old_ie footer div, .ie8 footer div
{
    margin-top: 30px;
}

.old_ie footer h1
{
	padding-top: 20px;
}

.old_ie section
{
	margin-top: 0px;
	margin-bottom: 0px;
}