sid/css/global.css

.no-select{
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
}

.hidden{ display: none !important; }

.center{ text-align: center; }

/* liens basiques */
a{ color: #2dcc70; }

/* @hover */
a:hover{ color: #8a8a8a; }

/* .unstressed */
span.unstressed{ color: #aaa; }
body.trHoverActivated tr:hover > td > span.unstressed{ color: #ddd; }

span.stressed{ font-weight: bold; }

thead.normal > tr > th{ font-weight: normal; }


/* input dans import/export */
div.p.center input{
	margin: .2em;
	padding: .8em;
	border-radius: 3px;
	border: 1px solid #989898;
}


.nomargin{  margin:  0 !important; }
.nopadding{ padding: 0 !important; }

input{ font-family: inherit; } /* même police pour les input */

/*************************/
/*** TITLE PERSONALISÉ ***/
/*************************/
#CONTAINER [data-info]:after{
	content: attr(data-info);
	/* position */
	/*display: block;*/ display: none;
	position: absolute;
		margin-left: 4em;
	padding: .3em;

	/* border */
	border-radius: 3px;

	/* background */
	background-color: #233342;

	/* foreground */
	color: #fff;
}

/* INFO SURVOL */
#CONTAINER [data-info]:hover:after{ display: block; }



/**********************/
/*** TABLEAU .BASIC ***/
/**********************/

/* STYLE "BASIC" DES TABLEAUX */
table.basic{
	/* position */
	width: 100%;
	margin-bottom: 0;

	/* border */
	border-radius: 5px;
	border-spacing: 0; 
	/*box-shadow: 0 0 4px #e3e3e3;*/
}

table.basic.margin{ margin-bottom: 1em; }

table.basic tr td,
table.basic tr th,
#DRAGNDROP td,
#DRAGNDROP th{
	/* position */
	padding: 1.5em 1.5em;

	width: 25%;

	/* border */
	/*border-width: 1px 0 0 0;*/
	/*border-style: solid;*/
	/*border-color: #e0e1e3;*/
	
	/* backgroud */
	background-color: #fff;

	/* foreground */
	color: #4e4e4e;

	/* animation */
	transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;

	/* extra */
	cursor: default;
}

/* définition de la répartition des éléments en fonction du nombre de colonnes */
table.basic.col1 tr td, table.basic.col1 tr th{ width: 100%; }
table.basic.col2 tr td, table.basic.col2 tr th{ width: 50%; }
table.basic.col3 tr td, table.basic.col3 tr th{ width: 33%; }
table.basic.col4 tr td, table.basic.col4 tr th{ width: 25%; }
table.basic.col5 tr td, table.basic.col5 tr th{ width: 20%; }
table.basic.col5 tr td, table.basic.col6 tr th{ width: 16%; }


/* titre aligné à gauche */
table.basic th{ text-align: left; }

/* <thead> sans background */
table.basic thead tr th{ background-color: transparent; }

table.basic:nth-child(4n+0) tr > td:first-child { border-left: 10px solid #e63c54; }
table.basic:nth-child(4n+1) tr > td:first-child { border-left: 10px solid #3c73e6; }
table.basic:nth-child(4n+2) tr > td:first-child { border-left: 10px solid #e6983c; }
table.basic:nth-child(4n+3) tr > td:first-child { border-left: 10px solid #2dcc70; }

table.basic table.basic tr > td:first-child     { border-left: 10px solid #9e9e9e; }



/* @hover */
body.trHoverActivated table.basic tr:hover > td{ color: #fff; }

body.trHoverActivated table.basic:nth-child(4n+0) tr:hover > td { background-color: #e63c54;  }
body.trHoverActivated table.basic:nth-child(4n+1) tr:hover > td { background-color: #3c73e6; }
body.trHoverActivated table.basic:nth-child(4n+2) tr:hover > td { background-color: #e6983c; }
body.trHoverActivated table.basic:nth-child(4n+3) tr:hover > td { background-color: #2dcc70; }

body.trHoverActivated table.basic table.basic tr:hover > td     { background-color: #9e9e9e; }

/* .noborder */
table.basic tr.noborder > td:first-child{ border-left: 1px solid transparent; }
body.trHoverActivated table.basic tr:hover td{ background-color: #fff; }

/* .transparentbg */
table.basic tr.transparentbg > td{ background-color: transparent; }
table.basic tr.transparentbg:hover > td{ background-color: transparent; }
table.basic tr.transparentbg > td{ color: inherit; }


/******************/
/*** PARAGRAPHS ***/
/******************/
#CONTAINER section > p,
#CONTAINER section div.p{
	/* position */
	padding: 1em;
	margin: 1em;
	
	/* border */	
	border-radius: 3px;
	border: 1px solid #ddd;

	/* background */
	background-color: #fff;
}

#CONTAINER section > p:hover{
	box-shadow: 1px 1px 3px #ddd;
}


/*********************/
/*** LIENS BOUTONS ***/
/*********************/
span.link{
	/* position */
	padding: .3em .8em;

	/* border */
	border-radius: 5px;
	border: 1px solid #ddd;
	box-shadow: inset 0 0 1px #f5f5f5;

	/* background */
	background: #fff;

	/* foreground */
	color: #333;
}

/* désactivation du curseur pointer pour les liens sans destination */
span.link:not(.inactive){
	/* extra */
	cursor: pointer;
}
span.link:hover:not(.inactive){ color: #000; }

table.basic td > span.link{ background: #eee; }


/*********************/
/*** SELECT/OPTION ***/
/*********************/
select{
	/* position */
	margin: 2em;
	padding: 0 1em;
	padding-right: 2em;

	/* border */
	border-radius: 5px;
	border: 1px solid #2dcc70;

	/* background */
	background: #fff url(../src/expand.svg) center right 1em no-repeat;
	background-size: auto .5em;

	/* foreground */
	color: #2dcc70;
	line-height: 1em; /* for -webkit */
	font-family: inherit;

	/* select */
	-webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
}

/* select grisé => selection modules existants par exemple */
tr.grayscale select,
select.grayscale{
	border-color: #bdbdbd;
	background-image: url(../src/expand@grayscale.svg);
	color: #4e4e4e;
}

/* pour déplacement d'élève */
td select{ margin: -1em; padding: .5em; padding-right: 2em; }

select > option{
	/* position */
	padding: 1em 0;

	/* background */
	background-color: #fff;

	/* foreground */
	color: #555;
	text-indent: 1em;
}

/* pour déplacement d'élève */
td select > option{ padding: 0; }


/* correction padding du <select> dans les pages import/export */
div.p.center select{
	line-height: 3em; /* for -webkit */
}












.del{
	color: #f55b55;
	cursor: pointer;

	/* animation */
	transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
}

/* hover */
.del:hover{ font-weight: bold; }




.confirm{
	/* position */
	/*display: inline-block;*/ display: none;
	position: absolute;
		margin-left: 2em;
		margin-top: -.2em;
		height: 1.5em;
	padding: 0 .7em 0 1.3em;


	/* border */
	border-radius: 3px;
	border: 1px solid #2dcc70;

	/* background */
	background: transparent center left .2em no-repeat;
	background-size: 1em auto;
	
	/* foreground */
	color: #2dcc70;
	line-height: 1.5em;

	/* extra */
	cursor: pointer;

	/* scroll */
	overflow: hidden;
}



.confirm [type=file]{
	/* position */
	display: block;
	position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

	/* extra */
	opacity: 0;
	cursor: pointer;
}



/* @all */
.confirm.all,
tr.grayscale .confirm{ margin-top: -.7em; }



/* @active */
input.active + .confirm,
select.active + .confirm,
.confirm.active{
	display: inline-block;
	background-image: url(../src/validate.svg);
}
.confirm.loading{
	background-image: url(../src/loader.gif);
}

.confirm.center{
	position: relative;
	margin: 1em;

}

/* .pamp */
.confirm.pamp{
	border-color: #f55b55;
	color: #f55b55;
	background-image: url(../src/validate@pamp.svg) !important;
}

@-webkit-keyframes bounce_err{
	0%{
		transform: translateX(5px);
		-moz-transform: translateX(5px);
		-webkit-transform: translateX(5px);
		-ms-transform: translateX(5px);
		-o-transform: translateX(5px);
	}


	25%{
		transform: translateX(-5px);
		-moz-transform: translateX(-5px);
		-webkit-transform: translateX(-5px);
		-ms-transform: translateX(-5px);
		-o-transform: translateX(-5px);
	}

	50%{
		transform: translateX(5px);
		-moz-transform: translateX(5px);
		-webkit-transform: translateX(5px);
		-ms-transform: translateX(5px);
		-o-transform: translateX(5px);
	}

	100%{
		transform: translateX(0);
		-moz-transform: translateX(0);
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		-o-transform: translateX(0);
	}
}

@-moz-keyframes bounce_err{
	0%{
		transform: translateX(5px);
		-moz-transform: translateX(5px);
		-webkit-transform: translateX(5px);
		-ms-transform: translateX(5px);
		-o-transform: translateX(5px);
	}


	25%{
		transform: translateX(-5px);
		-moz-transform: translateX(-5px);
		-webkit-transform: translateX(-5px);
		-ms-transform: translateX(-5px);
		-o-transform: translateX(-5px);
	}

	50%{
		transform: translateX(5px);
		-moz-transform: translateX(5px);
		-webkit-transform: translateX(5px);
		-ms-transform: translateX(5px);
		-o-transform: translateX(5px);
	}

	100%{
		transform: translateX(0);
		-moz-transform: translateX(0);
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		-o-transform: translateX(0);
	}
}

@-o-keyframes bounce_err{
	0%{
		transform: translateX(5px);
		-moz-transform: translateX(5px);
		-webkit-transform: translateX(5px);
		-ms-transform: translateX(5px);
		-o-transform: translateX(5px);
	}


	25%{
		transform: translateX(-5px);
		-moz-transform: translateX(-5px);
		-webkit-transform: translateX(-5px);
		-ms-transform: translateX(-5px);
		-o-transform: translateX(-5px);
	}

	50%{
		transform: translateX(5px);
		-moz-transform: translateX(5px);
		-webkit-transform: translateX(5px);
		-ms-transform: translateX(5px);
		-o-transform: translateX(5px);
	}

	100%{
		transform: translateX(0);
		-moz-transform: translateX(0);
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		-o-transform: translateX(0);
	}
}

@keyframes bounce_err{
	0%{
		transform: translateX(5px);
		-moz-transform: translateX(5px);
		-webkit-transform: translateX(5px);
		-ms-transform: translateX(5px);
		-o-transform: translateX(5px);
	}


	25%{
		transform: translateX(-5px);
		-moz-transform: translateX(-5px);
		-webkit-transform: translateX(-5px);
		-ms-transform: translateX(-5px);
		-o-transform: translateX(-5px);
	}

	50%{
		transform: translateX(5px);
		-moz-transform: translateX(5px);
		-webkit-transform: translateX(5px);
		-ms-transform: translateX(5px);
		-o-transform: translateX(5px);
	}

	100%{
		transform: translateX(0);
		-moz-transform: translateX(0);
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		-o-transform: translateX(0);
	}
}

/* bounce animation */
.confirm.bounce_error{
	animation: bounce_err .8s ease-in; 
	-moz-animation: bounce_err .8s ease-in; 
	-webkit-animation: bounce_err .8s ease-in; 
	-ms-animation: bounce_err .8s ease-in; 
	-o-animation: bounce_err .8s ease-in; 
}


/* tr@hover */
body.trHoverActivated tr:hover td select.active + .confirm,
body.trHoverActivated tr:hover td input.active + .confirm,
body.trHoverActivated tr:hover td .confirm.active{
	border-color: #fff;
	background-image: url(../src/validate@hover.svg);
	color: #fff;
}

/* saisie note */
.saisie_note,
tr.grayscale input{
	/* position */
	margin: -.5em;
	width: 4em;
	padding: .5em 1em;


	/* border */
	border-radius: 3px;
	border: 1px solid #bdbdbd;
}

/* @focus */
.saisie_note:focus,
tr.grayscale input:focus{
	border-color: #999;
}

/* .active */
.saisie_note.active,
tr.grayscale input.active{
	border-color: #2dcc70;
	color: #2dcc70;
}




/******************************/
/*** SELECTIONS DES PARTIES ***/
/******************************/
#CONTAINER > section > .partlist{
	/* position */
	display: table;
	margin: 2em;

	/* border */
	border-spacing: 0;
}

#CONTAINER > section div.partlist{
	/* position */
	display: inline;
	margin: 2em;
}

#CONTAINER > section > .partlist td,
#CONTAINER > section div.partlist > span{
	/* position */
	padding: .7em 2em;

	/* border */
	border: 1px solid #2dcc70;
	border-right: 0;
	
	/* background */
	background-color: #fff;

	/* foreground */
	color: #2dcc70;
	
	/* extra */
	cursor: pointer;

	/* animation */
	transition: .2s ease-in-out;
	-moz-transition: .2s ease-in-out;
	-webkit-transition: .2s ease-in-out;
	-ms-transition: .2s ease-in-out;
	-o-transition: .2s ease-in-out;
}

#CONTAINER > section div.partlist > span{ padding: .7em; line-height: 3em; }

/* @radius */
#CONTAINER > section > .partlist td:first-child,
#CONTAINER > section div.partlist > span:first-child{
	border-top-left-radius:    5px;
	border-bottom-left-radius: 5px;
}

/* @border + @radius */
#CONTAINER > section > .partlist td:last-child,
#CONTAINER > section div.partlist > span:last-child{
	border-top-right-radius:    5px;
	border-bottom-right-radius: 5px;
	border-right: 1px solid #2dcc70;
}


#CONTAINER > section > .partlist td.active,
#CONTAINER > section div.partlist > span.active{
	background-color: #2dcc70;
	color: #fff;
}


/* CHECKBOXES (HACK) */
td input[type=checkbox]{
	display: none;
}

td input[type=checkbox] + label{
	/* position */
	display: inline-block;
	position: relative;
		width: 1em;
		height: 1em;
		margin-bottom: -.25em;

	/* border */
	border-radius: 3px;
	border: 1px solid #7c7c7c;

	/* background */
	background: transparent none center center no-repeat;
	background-size: auto 100%;

	/* animation */
	transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	
	/* extra */
	cursor: pointer;
	
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;

}

/* @checked */
td input[type=checkbox]:checked + label{
	border-color: #2dcc70;
	background-image: url(../src/validate.svg);
}







/* PAGE D'ACCUEIL -> tutoriel */
#CONTAINER > section[name=presentation] > p > img{
	/* position */
		width: 2em;
		height: 2em;
		margin: .5em;
		padding: .5em;

	/* border */
	border-radius: 3px;
	border: 1px solid transparent;

	/* foreground */
	vertical-align:middle;

	/* animation */
	transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;

	/* extra */
	cursor: pointer;
} 

/* @hover */
#CONTAINER > section[name=presentation] > p > img:hover{
	border-color: #2dcc70;
}





/* astérisque */
span._{
	color: #2dcc70;
}


/* STYLE DES NOTES EN FONCTION DE LA VALEUR */
span.link.low{ /* Ne peut pas compenser */
	border-color: #f55b55;
}

span.link.med{ /* Peut pas compenser */
	border-color: #f59555;
}

span.link.hig{ /* A la moyenne */
	border-color: #2dcc70;
}