/* IMFP style sheet ©2005 Charles Houghton-Webb */
* {margin:0; padding:0; font:12px Trebuchet,Verdana,Arial,Helvetica,sans-serif;}

html, body { height: 100%; margin: 0; padding: 0; }
body {background-color: #000;color: #FFF; margin-left: 0px;margin-top: 0px; background-image:url(images/bg.jpg)}

header { padding: 5px 0px; position: fixed; background: #000; width: 100%; color: #fff; top: 0; left: 0; right: 0; z-index: 10; }

img{ width: 100%; max-width:340px; height:auto; }

* html a:hover { visibility:visible; }
a {text-decoration:none;font-weight:bold; }
a:link {color:#66F;}
a:visited {color:#66F;}
a:active {color:#0F0;}
a:hover {color:#F33;}

.wrapper { width: 100%; height: 100%; }

.border_audioplayer {margin:0 auto; max-width:580px; background-color:#DD0000; padding:2px; border:1px solid black;}

.inner { height: 100%; overflow: auto; }
.title { text-align: center; width: 100%; padding: 0px 0; }

.Header {font-size: 18px; font-weight: bold; color: #FFF;line-height: 1.4; }
.HeaderBlack {font-size: 18px; font-weight: bold; color: #000;line-height: 1.4; }

.BigHeader { font-size: 24px; font-weight: bold; color: #FFF; }
.MedHeader { font-size: 20px; font-weight: bold; color: #FFF; }
.NormWhite { font-weight: bold; color: #FFF;}
.NormBlue { font-weight: bold; color: #C9F;}

.logoheader{ margin: 10px; width: 70%; height: auto; overflow: hidden; display: block; }

.acc_container {text-align:center; width:100%; margin:0 auto 0px; max-width:100%; }
#acc {width:50em; list-style:none; color:#fff; margin:0 auto 0px; max-width:100%;}
#acc h3 {border:1px solid #000; padding:6px 6px 8px; font-weight:bold; margin-top:5px; cursor:pointer; background: #888; background: -webkit-linear-gradient(#888, #333, #111); background: -o-linear-gradient(#888, #333, #111); background: -moz-linear-gradient(#888, #333, #111); background: linear-gradient(#888, #333, #111); }

#acc h3:hover { background: #333; background: -webkit-linear-gradient(#333, #666, #999); background: -o-linear-gradient(#333, #666, #999); background: -moz-linear-gradient(#333, #666, #999); background: linear-gradient(#333, #666, #999);}

/*#acc ul { list-style-position: outside; list-style-image: url(arrow.gif); list-style-type: none; text-decoration: none; text-indent:inherit; padding: 0px; margin-left:5px; }*/
#acc .acc-section { background:#000; overflow:auto; max-width:100%; }
#acc .acc-content { padding:0px; border:1px solid #000; border-top:none; background:#000; max-width:100%; overflow:hidden; }
#acc .acc-students { text-align: left; padding: 5px; }

ol { padding: 0 0 0 10px; margin: 0px; list-style: none; color: #ccc; width: 95%; border-top: 1px solid #ccc; font-size: 0.9em; }
ol li { position: relative; margin: 0px; padding: 9px 2px 10px; border-bottom: 1px solid #ccc; cursor: pointer; }
ol li a { display: block; text-indent: -3.3ex; padding: 0px 0px 0px 20px; }
li.playing { color: #aaa; text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3); }
li.playing a { color: #9f9; }
li.playing:before { content: '♬'; width: 14px; height: 14px; padding: 3px; line-height: 14px; margin: 0px; position: absolute; left: -24px; top: 9px; color: #000; font-size: 13px; text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2); }

/* Audio Player stuff */
p { clear: both; text-align:center;}

.audiojs {margin:0 auto; height: 24px; width: 580px; background: #404040; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #444), color-stop(0.5, #555), color-stop(0.51, #444), color-stop(1, #444)); background-image: -moz-linear-gradient(center top, #444 0%, #555 50%, #444 51%, #444 100%); -webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); -moz-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); -o-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); }
.audiojs .play-pause { width: 15px; height: 20px; padding: 0px 8px 0px 0px; }
.audiojs p { width: 25px; height: 20px; margin: -3px 0px 0px -1px; }
.audiojs .scrubber { background: #5a5a5a; width: 100%; height: 10px; margin: 5px; }
.audiojs .progress { height: 10px; width: 0px; background: #ccc; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ccc), color-stop(0.5, #ddd), color-stop(0.51, #ccc), color-stop(1, #ccF)); background-image: -moz-linear-gradient(center top, #ccc 0%, #ddd 50%, #ccc 51%, #ccc 100%); }
.audiojs .loaded { height: 10px; background: #000; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #222), color-stop(0.5, #333), color-stop(0.51, #222), color-stop(1, #222)); background-image: -moz-linear-gradient(center top, #222 0%, #333 50%, #222 51%, #222 100%); }
.audiojs .time { float: left; height: 25px; line-height: 25px; }
.audiojs .error-message { height: 24px; line-height: 24px; }
/*
.track-details { clear: both; height: 20px; width: 448px; padding: 1px 6px; background: #eee; color: #222; font-family: monospace; font-size: 11px; line-height: 20px;
  -webkit-box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.15); -moz-box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.15); }
.track-details:before { content: '♬ '; }
.track-details em { font-style: normal; color: #999; }
.track_inf, .track_inf_bol { clear: both; height: 20px; width: 80%; padding: 1px 0px; background: #000; color: #66F; font-size: 11px; line-height: 20px;
-webkit-box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.15); -moz-box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.15); }
.track_inf:before { content: '♬ '; }
.track_inf_bol { font-weight: bold; }*/
/* end Audio Player stuff */

.content { padding: 170px 0 0 0; }

/*------------------------------------*\
         Smartphones (portrait)
\*------------------------------------*/
@media only screen and (max-width : 479px){

.time{ display:none; }
.content { padding: 165px 0 0 0; }
.audiojs .scrubber { width: 90%; }

}
/*---------------------------------------------------*\
     Phablettes (portrait et paysage)
\*---------------------------------------------------*/
@media only screen and (min-width: 480px){

.content { padding: 190px 0 0 0; }
.audiojs .scrubber { width: 70%; }

}

/*---------------------------------------------------*\
           Tablettes (portrait et paysage)
\*---------------------------------------------------*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/*@media only screen and (min-device-width : 800px) {*/

.content { padding: 190px 0 0 0; }
.audiojs .scrubber { width: 85%; }
}

/*---------------------------------------------------*\
          Ordinateurs de bureau et portables
\*---------------------------------------------------*/
@media only screen and (min-width : 1224px) {

.content { padding: 190px 0 0 0; }
.audiojs .scrubber { width: 85%; }
}


.maintenance{
	font-family: 'system-ui', Arial, 'sans-serif';
	background-color: #CC0004;
	text-align: center;
	padding: 30px;
	max-width: 700px;
	margin :0 auto;
	border: 5px solid #444;
	border-radius: 15px;
}
.sorry {color:#FFFFFF; font-size:3em;}
.sorry2 {color:#FFFFFF; font-size:1.2em;}

.bouton{
	display:block;
	background-color: #444;
	margin: 0 auto;
	padding:10px;
	width: 200px;
	text-align: center;
}

.bouton:hover{
	background-color: #505050;
	box-shadow: 1px 2px 4px #333;
}