@charset "UTF-8";
/* CSS Document */
@font-face {
	font-family: 'MyriadPro-Regular';
	src: url('http://vgclil.eu/font/MyriadPro-Regular.eot?#iefix') format('embedded-opentype'), url('http://vgclil.eu/font/MyriadPro-Regular.otf') format('opentype'), url('http://vgclil.eu/font/MyriadPro-Regular.woff') format('woff'), url('http://vgclil.eu/font/MyriadPro-Regular.ttf') format('truetype'), url('http://vgclil.eu/font/MyriadPro-Regular.svg#MyriadPro-Regular') format('svg');
}
body {
	background-color: #900640;
	color: #FFFFFF;
	font-family: 'MyriadPro-Regular', arial;
	margin: 0px;
	padding: 0px;
}
img {
	max-width: 100%;
}
/* bandeau + logos */
header {
	background: url(../images/header_bg.jpg) center 0 no-repeat fixed;
	background-size: cover;
}
header div {
	max-width: 1000px;
	margin-right: auto;
	margin-left: auto;
}
/* bulles go b2 c1 */
#sous_bandeau {
	background-color: #d11f61;
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #ff6808;
	padding-top: 20px;
	padding-bottom: 20px;
}
#sous_bandeau div {
	max-width: 1000px;
	margin-right: auto;
	margin-left: auto;
	text-align: right;
}
#sous_bandeau span {
	font-size: 1.3em;
	padding-right: 10px;
	padding-left: 70px;
}
.go {
	display: inline;
	text-align: center;
	width: 40px;
}
.go a {
	color: #ff6808;
	background-color: #FFFFFF;
	border-radius: 20px;
	height: 32px;
	width: 40px;
	text-transform: uppercase;
	font-size: 1.5em;
	font-weight: bold;
	transition: all;
	transition-duration: 0.5s;
	transition-timing-function: ease;
	display: inline-block;
	text-align: center;
	margin-right: 10px;
	padding-top: 6px;
}
.go a:hover {
	background-color: #ff6808;
	color: #FFFFFF;
}
.go a.facebook {
	margin-right:25px;
	background-image: url(../images/logo-facebook.png);
	color: rgba(214,214,214,0);
}
.go a.facebook:hover {
	background-image: url(../images/logo-facebook-orange.png);
}
.go a.accueil {
	background-image: url(../images/logo-accueil2.png);
	color: rgba(214,214,214,0);
}
.go a.accueil:hover {
	background-image: url(../images/logo-accueil.png);
	color: rgba(214,214,214,0);
}
.go a.twitter {
	background-image: url(../images/logo-twitter.png);
	color: rgba(214,214,214,0);
}
.go a.twitter:hover {
	background-image: url(../images/logo-twitter2.png);
	color: rgba(214,214,214,0);
}
.index{
	float:left;
}
/*   */
#content {
	max-width: 1000px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 30px;
	padding-bottom: 30px;
	z-index:0;
}
footer {
	text-align: center;
	font-size: 0.75em;
	padding-top: 40px;
	padding-bottom: 40px;
	background-color: #720130;
}
.separator {
	background-color: #720130;
	height: 30px;
}
h1 {
	font-weight: normal;
	font-style: italic;
	font-size: 1.5em;
}
h2 {
	font-weight: normal;
	font-style: italic;
	font-size: 1.35em;
}
a {
	color: #ec691d;
	text-decoration: none;
}
a:hover{
	color: #fff;
	transition: color;
	transition-duration: 0.5s;
	transition-timing-function: ease;

}
.puce li {
	background-image: url(../images/puce.png);
	background-repeat: no-repeat;
	list-style-type: none;
	padding-left: 40px;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	list-style-position: outside;
}



/* formulaire de contact */
#login_box {
	width: 280px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 50px;
}
#login_box div  {
	padding-top: 3px;
	font-size: 1em;
	padding-left: 3px;
	text-align:right;
}

#login_box div span {
	padding-top: 20px;
	font-size: 1.2em;
	padding-left: 3px;
	text-align: center;
	display: block;
}
#login_box div span strong {
	font-size: 1.55em;
	padding-left:10px;
}
fieldset {
	border: 0;
	padding: 0px;
	margin: 0px;
}
/*--------------------*/
#login_box #inputs {
	float: left;
}
#login_box #inputs input {
	background: #f1f1f1 url(../images/inputs.png) no-repeat;
	width: 150px;
	height: 28px;
	overflow: hidden;
	border: 0px;
	margin-bottom: 5px;
	padding-right: 15px;
	padding-left: 45px;
	font-size: 0.8em;
	font-style: italic;
	color: #666666;
	outline: none;
	display: block;
}
#login_box #username {
	background-position: 15px -10px !important;
}
#login_box #password {
	background-position: 15px -60px !important;
}
#login_box #inputs input:focus {
	background-color: #fff;
	border-color: #ff6808;
	outline: none;
	-moz-box-shadow: 0 0 0 1px #ff6808 inset;
	-webkit-box-shadow: 0 0 0 1px #ff6808 inset;
	box-shadow: 0 0 0 1px #ff6808 inset;
}
/*--------------------*/

#login_box #actions {
	float: left;
}
#login_box #submit {
	color: #900640;
	background-color: #aaa7a6;
	float: left;
	height: 65px;
	width: 65px;
	cursor: pointer;
	font-family: Arial, Helvetica;
	font-size: 15px;
	font-weight: bold;
	transition: all;
	transition-duration: 0.5s;
	transition-timing-function: ease;
	border: 0px;
	margin-left: 5px;
	outline: none;
}
#login_box #submit:hover, #submit:focus {
	color: #720130;
	background-color: #fc630e;
}
#login_box #submit:active {
	outline: none;
}
#login_box #submit::-moz-focus-inner {
 border: none;
}
.clear {
	clear: both;
}
/*  fin du formulaire  */


/*  Bouton profil   */
#separator_log {
	max-width: 1000px;
	margin: auto;
}
#separator_log li{
    padding-left: 0px;
    padding-bottom: 10px;
    text-align: left;
}
#separator_log ul{
	list-style: none;
	margin: 7px;
	margin-right:0px;
}
#separator_log ul li ul {
	display: none;
	padding-left: 10px;
    padding-top: 15px;
	background-color: #720130;
	margin: 0px;
}
#separator_log ul li:hover > ul {
	display: block;
}
#log_box_cont{
	position: absolute;
    text-align: right;
    min-width: 1000px;
    z-index: 1000;
	}
#log_box{
	float:right;	
	}
.fa-user {

	margin-right: 5px;
	margin-left: 5px;
	}
.fa-sign-out, .fa-file-text-o, .fa-address-card-o{
	margin-right: 10px;
}
#content{
		clear:both;	
}

/*  fin du bouton profil  */




#session {
	float: right;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
}

/*
.langues {
	width: 365px;
	height: 100px;
	margin-right: auto;
	margin-left: auto;
	background-image: url(../images/fleches_lg.png);
	background-repeat: no-repeat;
	background-position: 30px 15px !important;
	padding-left: 70px;
}
.langues a, .langue {
	color: #FFFFFF;
	background-color: #720130;
	min-width: 22px;
	margin: 9px;
	float: left;
	font-size: 1.2em;
	display: block;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 8px;
	padding-left: 10px;
	text-align: center;
	transition: all;
	transition-duration: 0.5s;
	transition-timing-function: ease;
}
 .langue {
	 float:none;
	 color: #ff6808;

	 }
.langues a:hover, .langue a:hover {
	background-color: #ff6808;
	color: #fff;
}
*/


.langue a {
	float: left;
	display: block;
	text-align: center;
	width: 30px;
	margin-right: 7px;
	margin-top: 3px;
	padding-top: 5px;
	
	padding-bottom: 2px;
	
	color: #FFFFFF;
	background-color: #720130;
	transition: all;
	transition-duration: 0.5s;
	transition-timing-function: ease;
}
.langue a:hover {
	background-color: #ff6808;
	color: #fff;
}


.box {
	background-color: #720130;
	padding:20px;
}


/*  PAGE index des exercices (b2.php)  */
.gob2 {       /* bulle b2 */
	height: 32px;
	width: 40px;
	border-radius: 20px;
	font-size: 1.5em;
	text-align: center;
	background-color: #ff6808;
	color: #FFFFFF;
	padding-top: 6px;
	position: absolute;
	left: 15px;
	top: 15px;
}
.module1, .module2, .module3, .module4 {
	background-color: #720130;
	padding-top: 25px;
	margin-bottom: 2px;
	height: 190px;
	background-image: url(../images/grand_rond.png);
	background-repeat: no-repeat;
	background-position: 25px -70px !important;
	position: relative;
}
.module2 {
	background-position: 100px 80px !important;
}
.module3 {
	background-position: -90px -90px !important;
}
.module4 {
	background-position: 100px -20px !important;
}
.div40 {   /* c'était normalement 40%, mais ça va devenir beaucoup moins vu qu'il y aura 3 colonnes */
	float: left;
	width: 24%;
	text-align: right;
}
.div60 {
	float: left;
	padding-left: 4%;
	width: 72%;
}
.div40 div {    /* style rose plus gros (compétences de recherche etc.) */
	color: #ad0b4f;
	margin-top: 10px;
	font-size: 2.2em;
	font-weight: bold;
}
.unit {
	position: relative;  /* pour pouvoir positionner la flèche avant */
	padding-right: 0px;
	padding-bottom: 15px;
	padding-left: 25px;
	font-size: 1.2em;
	margin-right: 30px;
}
.unit:before {
	content: "\25B6";
	color: #ff6808;
	position: absolute;
	top: -2px;
	left: 0;
}
.unit span {
	font-size: 0.8em;
	padding-left: 20px;
}
.fait {   /* les bulles oranges ou foncées. La classe se met dynamiquement dans <div unit> */
	background-image: url(../images/petits_ronds_fait.png);
	background-repeat: no-repeat;
	background-position: right 1px;
}
.pasfait {
	background-image: url(../images/petits_ronds.png);
	background-repeat: no-repeat;
	background-position: right 1px;
}
.unit div {     /* le texte en blanc qui se met à droite (audio, vidéo, texte) */
	font-size: 0.8em;
	display: inline-block;
	float: right;
	padding-right: 145px;
	margin-top: 3px;
}
@media (max-width: 1000px) {
	#log_box_cont {
		min-width:0;
		width:100%;
	}
	#log_box{
		margin-right: 20px;
	}
}

/*  fin de la PAGE index des exercices (b2.php)  */