/* --------------------------------------------------- */
/*                      MAIN                           */
/* --------------------------------------------------- */


.right { float: right; } 

.left { float: left; } 

.center-text { text-align: center; }


.title { font-size: 22px;
	width: 100%; padding: 0 0 5px 0; margin: 8px 0 11px 0; border-bottom: 6px solid #bcbbb7; }

.container { margin: auto; width: 80%;} /* border : 1px solid black; */

.active { border-bottom: 5px solid #1E90FF!important; }


.margin-top-10 { margin-top: 10px; }
.margin-top-25 { margin-top: 25px; } 

/* --------------------------------------------------- */
/*                      HEADER                         */
/* --------------------------------------------------- */
header { 
	height: 80px; 
	width: 100%; 
	}
	
header .up { 
	height: 80px; 
	width: 100%;
	background-color: #414352;
	border-bottom: 5px solid #333; 
}

header h1 { 
	font-size: 20px;
	text-transform: uppercase; 
	font-weight: bold; 
	color: white; 
	line-height: 80px; 
	display: inline-block; 
	}
header p { 
    font-size: 20px; 
	text-transform: uppercase; 
	font-weight: normal; 
	color: white; 
    padding: 10px 20px 10px 20px; margin-top: 15px;
}
header a {
    color:rgb(220,220,220);
}
header a:hover {
    color:rgb(190,190,190);
}

/* --------------------------------------------------- */
/*                      BANNER                         */
/* --------------------------------------------------- */
.banner { 
    height: 250px; 
	width: 100%; 
	background: url("../images/banner.png") center no-repeat;  /* Affiche l'image du lycée*/
	background-size: cover; 
    overflow: hidden; 
	position: relative; 

}

h1 {font-size : 1.5em;}			/* nouveau */
h2 {font-size : 1em;}			/* nouveau */
ul {text-align: left;}
/* --------------------------------------------------- */
/*                      Body                         */
/* --------------------------------------------------- */

a:hover{
	text-shadow:0px 0px 1px gray;
}	

.menu { height: 60px; width: 100%; background-color: #484847; border-top: 5px solid #333; } 
.menu .box { width: auto; height: 55px; padding-right: 20px; padding-left: 20px; background-color: #484847; cursor: pointer; border-bottom: 5px solid #484847; list-style-type: none; text-align: center;}

.menu .box a:hover { color : red!important; text-transform: uppercase;}
.menu .box img { float: left; height: 25px; width: 25px; margin-right: 10px; margin-top: 12px; }
.menu .box a { line-height: 50px; color: white; font-size: 15px; font-weight: bold; list-style-type: none; } 


/* Partie menus en accordéons */
/* Les accordéons fonctionnent grâce aux checkbox qui affichent le contenu lorsque le label est cliqué*/




/*Cache la case*/
input[type="checkbox"] {  
display: none;
}

/*Contenu affiché*/
.accordeon{
	border:white 2px solid;
	width:60%;
	height:0px;
	overflow:hidden;
	border: transparent 2px solid;
	color:white;
	margin:auto;
	transition: height 1s ease-in-out;
}

/*Affichage du contenu lorsque le label est cliqué*/
input[id="accordeon"]:checked + .accordeon{
	height:500px;
	border:gray 2px solid;
	padding:5px;
}
.accordeon1{
    border:white 2px solid;
	width:60%;
	height:0px;
	overflow:hidden;
	border: transparent 2px solid;
	color:white;
	margin:auto;
	transition: height 1s ease-in-out;
}

input[id="accordeon1"]:checked + .accordeon1{
	height:500px;
	border:gray 2px solid;
	padding:5px;
} 

.accordeon2{
	border:white 2px solid;
	width:60%;
	height:0px;
	overflow:hidden;
	border: transparent 2px solid;
	color:white;
	margin:auto;
	transition: height 1s ease-in-out;
}

input[id="accordeon2"]:checked + .accordeon2{
	height:500px;
	border:gray 2px solid;
	padding:5px;
}  

.accordeon3{
	border:white 2px solid;
	width:60%;
	height:0px;
	overflow:hidden;
	border: transparent 2px solid;
	color:white;
	margin:auto;
	transition: height 1s ease-in-out;
}

input[id="accordeon3"]:checked + .accordeon3{
	height:500px;
	border:gray 2px solid;
	padding:5px;
}  

.accordeon4{
	border:white 2px solid;
	width:60%;
	height:0px;
	overflow:hidden;
	border: transparent 2px solid;
	color:white;
	margin:auto;
	transition: height 1s ease-in-out;
}

input[id="accordeon4"]:checked + .accordeon4{
	height:500px;
	border:gray 2px solid;
	padding:5px;
}

.accordeon5{
	border:white 2px solid;
	width:60%;
	height:0px;
	overflow:hidden;
	border: transparent 2px solid;
	color:white;
	margin:auto;
	transition: height 1s ease-in-out;
}

input[id="accordeon5"]:checked + .accordeon5{
	height:500px;
	border:gray 2px solid;
	padding:5px;
}

.accordeon6{
	border:white 2px solid;
	width:60%;
	height:0px;
	overflow:hidden;
	border: transparent 2px solid;
	color:white;
	margin:auto;
	transition: height 1s ease-in-out;
}

input[id="accordeon6"]:checked + .accordeon6{
	height:500px;
	border:gray 2px solid;
	padding:5px;
}


/*Mise en forme du label*/

label{
	padding: 10px;
	color: black;
	cursor: pointer;  
	width:50%;
	display: block;
	border: solid gray 2px;
	margin:auto;
	margin-top:5px;          
	margin-bottom:5px;
	color:#0E0E0E;
	font-size:20px;
	background-color:rgb(220,220,220);
	
}

/* --------------------------------------------------- */
/*                       ARTICLE                       */
/* --------------------------------------------------- */

.box-article { height: 400px; list-style-image: url("../images/puce.png"); }

.article-images { width: 700px; height: 400px; overflow: hidden; background-color: white;  position: relative; }
.article-images img { width: auto; height: 100%; }

.more-article { 
    position: absolute; top: 10px; right: 10px; width: 100px; height: 50px; background-color: #3498db; 
    line-height: 50px; color: white; text-transform: uppercase; font-size: 20px; text-align: center; 
}

.article-list { height: 400px; width: 500px; background-color: #f5f4f3; }

#line { width: 100%; height: 80px; line-height: 80px; padding: 0 20px 0 20px; cursor: pointer; }
#line a { font-size: 18px; letter-spacing: -1px; color: #404040; }
#line p { font-size: 14px; letter-spacing: -1px; color: #404040; }
#line:hover { background-color: #EBEBEB; }

.line-active { background-color: #EBEBEB; }



/* --------------------------------------------------- */
/*                      FOOTER                         */
/* --------------------------------------------------- */

footer { height: 80px; width: 100%; background-color: #8f8d93; border-bottom: 5px solid #333; }

footer p { font-size: 15px; font-weight: bold; color: white; line-height: 80px; }

.footer { height: 80px; width: 100%; background-color: #8f8d93; border-bottom: 5px solid #333; }

iframe{
    border: solid 2px #8f8d93;
}

.index_link{
    display: inline-block;
	margin:2%;
	margin-top:0%;
	margin-bottom:5%;
}

.displaynone_a{
	display:none;
	
}