/* -- 
Generated by RSEPaw
RSEPaw is a Web applications and web site generator
Product of RSEInfo 2008-
 -- */

@charset "UTF-8";
@font-face {
	font-family: mv_boliregular;
	src: url('font/mvboli.ttf'),
		url('font/mvboli.eot'),
		url('font/mvboli.eot#iefix'),
		url('font/mvboli.svg'),
		url('font/mvboli.woff');
}
@font-face {
	font-family: FontAwesome;
	src: url('font/fontawesome-webfont.ttf?v=4.7.0'),
		url('font/fontawesome-webfont.eot?v=4.7.0'),
		url('font/fontawesome-webfont.eot?v=4.7.0#iefix'),
		url('font/fontawesome-webfont.svg?v=4.7.0'),
		url('font/fontawesome-webfont.woff?v=4.7.0');
}
@font-face {
	font-family: duality;
	src: url('font/duality.ttf');
}
@font-face {
	font-family: Forte;
	src: url('font/Forte.ttf');
}
@font-face {
	font-family: Gabriola;
	src: url('font/Gabriola.ttf');
}
@font-face {
	font-family: Elephant;
	src: url('font/elephnt.ttf');
}
@font-face {
	font-family: sego_print;
	src: url('font/segoepr.ttf');
}
:not(.list) {box-sizing: border-box;}
.list, .list * { box-sizing : content-box;}
/*<main>*/
:root {
	--font-v : Verdana, Arial, Helvetica, sans-serif;
	--font-tbct :"Trebuchet MS", Tahoma, Arial, Helvetica, sans-serif;
	--font-focus:Tahoma, Verdana, Arial;
	--font-header : mv_boliregular, duality, Tahoma, Verdana;
	--font-hlty1 : duality, mv_boliregular, Arial;
	--t-shadow : 1px 1px #888888;
	--b-shadow : 4px 4px 5px #808080;
	--radius : 10px;
	--specif-color:#e5e5cd;
	--body-color:white;
	--shadow-short:3px 2px 1px #9a9a9a9a;
	--border-shadow-short: 1px solid #efdfef;
}
body {
	margin:0;
	background:var(--body-color);
	height:100%;
}
#page {
	max-width: 100%;
	margin: 0 auto;
}
header {
	background-image: linear-gradient(#fff,#f9a506ad);
}
header #row1 {
   min-height:100px;
   display:flex;
}
header .logo img {
	width : 200px;
	height: 110px;
}
header .logo a, header .logo a:hover {
	font-size: 3em;
	font-family: mv_boliregular;
	font-weight: bold;
	text-shadow: 5px 3px black;
	color: aliceblue;
	font-style:normal;
}
header .logo, header .else {
	display:inline-block;
	vertical-align:top;
}
header .row .else {
	align-content:center;
	margin:0 auto;
}
header .else #htitle {
	font-family: mv_boliregular,"Trebuchet MS", Tahoma, Arial, Helvetica, sans-serif;
	display:inline-block;
	color: rgb(24, 125, 24);
	text-shadow: rgb(189, 222, 67) 2px 2px;
	width:max-content;
	padding:5px;
	font-size:2em;
}
header .else #htitle span {
	font-size: .85em;
	display: inline-block;
	position: relative;
	transform: rotate(-10Deg);
}
#center-home {
	align-content: center;
	display: inline-block;
	font-size: 5em;
	height: 50vh;
	font-family: var(--font-hlty1);
}
#home-title {
	text-shadow: brown 5px 3px 3px;
	color: darkgrey;
}
#home-title + div {
	font-size: .55em;
	display: inline-block;
	position: relative;
	transform: rotate(-5Deg);
	color: brown;
	text-shadow: yellow 3px 2px 2px;
	left:15ch;
}
#home-nav{
	position: relative;
	font-size: 2em;
	font-family: var(--font-v);
	font-weight:bold;
	display: inline-block;
	right: 15ch;
	top: 30vh;
	& div {
		display:inline-block;
		box-shadow: gray 10px 7px 7px;
		border-radius: 30pt;
		padding: .5em;
		cursor:pointer;
		&:hover {
			right:14.9ch;
			border:thin solid black;
		}
	}
	& #example {
		background: linear-gradient(20deg,red,aliceblue);
		font-size:.7em;
	}
}
#enter {
	background: linear-gradient(20deg,blue,aliceblue);
}
#admin {
	position: absolute;
	font-size: 1em;
	font-family: var(--font-v);
	box-shadow: gray 5px 3px 4px;
	border-radius: 30pt;
	background: linear-gradient(20deg,red,aliceblue);
	padding: .3em;
	font-weight:bold;
	cursor:pointer;
	top:4.5em;
	right:.7em;
	&:hover {
		right:.6em;
		border:thin solid black;
	}
}
#settings {
	position: absolute;
	cursor:pointer;
	top:4.5em;
	right:.7em;
	& span:hover {
		right:.6em;
		top:4.6em;
	}
}
.field-getdate{
	display:inline-block;
	width:max-content;
}
center > div {
	text-align:left;
}
.formfields-row {
	margin:0;
	padding:0;
	width:100%;
}
.formfields-title {
	font-weight:bold;
	font-size:1.1em;
	font-family:Tahoma;
	color:#888888;
	padding-top:25px;
	text-shadow : black 1px 1px;
	display:block;
}
.formfields-label {
	color :green;
	font-weight:bold;
	font-size:.9em;
	font-family:Verdana;
}
.formfields-value .field-stopdate {
	display:block;
}
.form-explain {
	font-size:13pt;
	font-weight:bold;
	text-shadow:1px 1px orange;
	text-shadow:1px 1px #555;
	color: orange;
	font-family:Arial;
}
.explain {
	font-size:0.9em;
	font-weight:bold;
	font-family:Verdana;
	color:#666;
}
.loading::before {
	content: url('../img/loading.gif');
}
.error::before {
	content: url('../img/error.gif');
}
.getimage {
	max-width : 300px;
}
.getimage-msg {
	background:indianred;
	color:white;
	padding:5px;
	margin-top:1px;
}
#chrono-global{
	font-size:1.2em;
	background:#eceaea;
	font-family:var(--font-v);
	font-weight:bold;
	padding : .3em .5em;
	border-radius:15px;
	box-shadow:5px 3px 3px black;
	display:inline;
	& #chrono-label {
	}
	& .chrono {
		font-size:1.1em;
		color:blueviolet;
	}
}
ul.menu-app {
	list-style-type:none;
	padding:0px;
	margin:0px;
	font-family:var(--font-header);
	font-size:1.3em;
	& li {
		display: inline-block;
		padding:10px 0px;
		margin:0 0 0 3em;
		color:rgb(149,200,255);
		font-weight:bold;
		font-style:normal;
		& a {
		text-decoration:none;
		font-style:normal;
		font-weight:bold;
			&[active] {
			padding:10px 10px;
			font-size:1em;
			color:inherit;
			background-color:inherit;
			font-weight:bold;
			font-style:inherit;
			}
			&:not([active]) {
				margin:0;
			   font-size:1em;
				padding:10px 10px;
				transition:all 0.8s;
				transition-timing-function:ease;
				color:cadetblue;
				background-color :#ffa54d;
				display:block;
				border-radius:var(--radius);
				box-shadow : 3px 2px 3px;
				&:hover, &:focus{
					text-decoration:none;
					font-style:normal;
					font-weight:bold;
					background-color:maroon;
					color:rgb(149,200,255);
				}
			}
		}
	}
}
#pconfig {
	max-width: 70%;
	display: inline-block;
	margin: 0 0 0 10em;
	& #times {
		font-size:1.2em;
		font-weight:bold;
		& #computedtime{
			color:blue;
		}
		& #availabletime{
			color:red;
		}
		& #transitiontime {
			color:chocolate;
		}
		& #computedtime div, & #availabletime div, & #transitiontime div {
			display:inline-block;
			font-size:1.1em;
			margin:.2em .5em;
			background:#dfdfdf;
			border-radius:15px;
			padding:.2em .4em;
		}  
	}
}
#game-play {
	&.exo > div {
		width:90%;
		margin:0 auto;
		& .whoami {
			position:relative;
			width:60%;
		}
		& .truefalse {
			& .exo-item {
				width:70%;
			}
			& .states3 > div label[for$="-on"]{
				right:-80px;
			}
		}
	}
	& > .users-set {
		display:grid;
		grid-template-columns:3fr 1fr;
		& > div.set-users {
			display:inline-block;
			margin:2em auto 0 auto;
			max-width:50%;
			& #setusers, & #setduration, & #settheme,.paramfield {
				font-family:Verdana;
				font-weight:bold;
				font-size:1.3em;
			}
			& input:not([class~='tglbox']) {
				font-size:1.5em;
				text-align:center;
				border-radius:15px;
			}
			& div[id='homecountry'] {
				font-size:1.2em;
			}
		}
		& #enter {
			font-size: 1.5em;
			font-family: var(--font-v);
			font-weight:bold;
			box-shadow: gray 10px 7px 7px;
			border-radius: 30pt;
			padding: .5em;
			cursor:pointer;
			width:max-content;
			margin: 4em auto;
			&:hover {
				margin:4.1em auto;
				border:thin solid black;
			}
		}
	}
	& #waiting-game, & .waiting-game {
		font-size : 2em;
		font-weight:bold;
		text-align:center;
		padding:3em;
		& #waiting-game, & .waiting-game {
			padding:0px;
			font-size:smaller;
			font-family:mv_boliregular;
		}
	} 
	& #waiting-game {
		color:red;
		& div{
			position:relative;
			&:not([data-start]) {
				opacity:0;
				left:75ch;
			}
			&[data-start]{
				opacity:1;
				left:2em;
				&:first-child {
					transition: opacity 2s ease 1s,left 2s ease 1s;
				}
				&:nth-child(2) {
					transition: opacity 2s ease 1.5s,left 2s ease 1.5s;
				}
				&:nth-child(3) {
					transition: opacity 2s ease 2s,left 2s ease 2s;
				}
			}
		}
	}
	& .waiting-game {
		color:blue;
	}
	& h1{
		&.setresult,&.tempresult,&.finalresult {
			text-align:center;
			margin-bottom:1.3em;
		}
		&.finalresult {
			color:#878cc9;
			font-family:var(--font-hlty1);
		}
	}
	& .game-result {
		font-size:2em;
		font-family:Arial;
		margin: 0 auto;
		border-spacing: 2em .3em;
		& tr {
			padding:.3em 0;
			position:relative;
			& td {
				padding: 0.2em .3em; 
			}
			&:nth-child(even) {
				background:#DDFFDD;
			}
			&:nth-child(odd) {
				background:#EEDDEE;
			}
			&.game-winner {
				background:gold;
				&::after {
					content:url("../img/winner1.png");
					display:inline-block;
					position:absolute;
					transform:scale(.15);
					width:40px;
					height:30px;
					top:-0.5em;
				}
			}
		}
	}
	& .set-result {
		font-size:2em;
		font-family:Arial;
		margin: 0 auto;
		border-spacing: 2em .3em;
		& tr {
			padding:.3em 0;
			position:relative;
			& td {
				padding: 0.2em .3em; 
			}
			&:nth-child(even) {
				background:lightgrey;
			}
			&:nth-child(odd) {
				background:#F8D5D5;
			}
			&.game-winner {
				background:#9f9fe0;
			}
		}
	}
	& .p-font-size {
		font-size:unset;
	}
	& .select-level {
		font-size:.8em;
	}
}
#pconfig {
	& .game-row {
		color:blueviolet;
		font-size:1.5em;
		font-family:Arial;
	}
	& .exo {
		font-size:.8em;
		& .exo-quiz{
			&.wordlinks {
				width:unset;
			}
		}
	}
}
#pexample #example0 {
	& div {
		position:relative;
		font-size:1.5em;
		font-family:Arial;
		padding:.5em;
		border-radius:7px;
		background:lightgrey;
		box-shadow: 2px 1px 1px gray;
		margin:.3em 0;			
		width:max-content;
		transition: opacity 1s ease, left 1s ease;
		&:not([data-start]) {
			opacity:0;
			left:75ch;
		}
		&[data-start]{
			left:2em;
			opacity : 1;
		}
		&:nth-child(3) {
			background:lightgreen;	
		}
		&:nth-child(4) {
			background:orange;	
		}
		&[data-start]:nth-child(5) {
			background:red;
		}
		/*
		&[data-start]:first-child {
		}
		*/
		& img {
			max-width:150px;
		}
		&#chronoexample {
			color:red;
			font-weight:bold;
			margin:.3em auto;
			left:unset;
			opacity:1;
		}
	}
	& img {
		position:relative;
		left:20ch;
		transition: opacity 1.5s ease;
		&:not([data-start]) {
			opacity:0;
			border : unset;
		}
		&[data-start]{
			display:inline;
			opacity : 1;
		}
	}
}
#pjoin #useranswer {
	& > div.answer {
		display:inline-block;
		margin:2em auto 0 auto;
		max-width:80%;
		& input {
			font-size:1.5em;
			text-align:center;
			border-radius:15px;
		}
	}
	& #enter {
		font-size: 1.5em;
		font-family: var(--font-v);
		font-weight:bold;
		box-shadow: gray 10px 7px 7px;
		border-radius: 30pt;
		padding: .5em;
		cursor:pointer;
		width:max-content;
		margin: 4em auto;
		&:hover {
			margin:4.1em auto;
			border:thin solid black;
		}
	}
}

@keyframes slidein{
	0%{
		opacity:0;
		left:75ch;
	}
	0%{
		opacity:.5;
	}
	50% {
		opacity:1;
	}
	75% {
		font-size:larger;
	}
	100% {
		left:2em;
		font-size:unset;
	}
}

.firework,
.firework::before,
.firework::after
{
  --initialSize: 0.8vmin;
  --finalSize: 45vmin;
  --particleSize: 0.5vmin;
  --color1: yellow;
  --color2: khaki;
  --color3: white;
  --color4: lime;
  --color5: gold;
  --color6: mediumseagreen;
  --y: -15vmin;
  --x: -50%;
  --initialY: 60vmin;
  content: "";
  animation: firework 2s infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, var(--y));
  width: var(--initialSize);
  aspect-ratio: 1;
  background: 
    /*
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 0% 0%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 100% 0%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 100% 100%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 0% 100%,
    */
    
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 50% 0%,
    radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 100% 50%,
    radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 50% 100%,
    radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 0% 50%,
    
    /* bottom right */
    radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 80% 90%,
    radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 95% 90%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 90% 70%,
    radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 100% 60%,
    radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 55% 80%,
    radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 70% 77%,
    
    /* bottom left */
    radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 22% 90%,
    radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 45% 90%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 33% 70%,
    radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 10% 60%,
    radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 31% 80%,
    radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 28% 77%,
    radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 13% 72%,
    
    /* top left */
    radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 80% 10%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 95% 14%,
    radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 90% 23%,
    radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 100% 43%,
    radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 85% 27%,
    radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 77% 37%,
    radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 60% 7%,
    
    /* top right */
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 22% 14%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 45% 20%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 33% 34%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 10% 29%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 31% 37%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 28% 7%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 13% 42%
	;
  background-size: var(--initialSize) var(--initialSize);
  background-repeat: no-repeat;
}
.firework {
	&::before {
	  --x: -50%;
	  --y: -50%;
	  --initialY: -50%;
	/*   transform: translate(-20vmin, -2vmin) rotate(40deg) scale(1.3) rotateY(40deg); */
	  transform: translate(-50%, -50%) rotate(40deg) scale(1.3) rotateY(40deg);
	/*   animation: fireworkPseudo 2s infinite; */
	}
	&::after {
	  --x: -50%;
	  --y: -50%;
	  --initialY: -50%;
	/*   transform: translate(44vmin, -50%) rotate(170deg) scale(1.15) rotateY(-30deg); */
	  transform: translate(-50%, -50%) rotate(170deg) scale(1.15) rotateY(-30deg);
	/*   animation: fireworkPseudo 2s infinite; */
	}
	&:nth-child(2) {
  		--x: 30vmin;
		&::before,
		&::after {
		  --color1: pink;
		  --color2: violet;
		  --color3: fuchsia;
		  --color4: orchid;
		  --color5: plum;
		  --color6: lavender;  
		  --finalSize: 40vmin;
		  left: 30%;
		  top: 60%;
		  animation-delay: -0.25s;
		}
	}
	&:nth-child(3) {
		--x: -30vmin;
		--y: -50vmin;
		&::before,
		&::after {
		  --color1: cyan;
		  --color2: lightcyan;
		  --color3: lightblue;
		  --color4: PaleTurquoise;
		  --color5: SkyBlue;
		  --color6: lavender;
		  --finalSize: 35vmin;
		  left: 70%;
		  top: 60%;
		  animation-delay: -0.4s;
		}
	}
}
@keyframes firework {
  0% { transform: translate(var(--x), var(--initialY)); width: var(--initialSize); opacity: 1; }
  50% { width: 1vmin; opacity: 1; }
  100% { width: var(--finalSize); opacity: 0; }
}
input.pseudo {
	font-size:1.5em;
	margin:5px;
	size:15;
}
.exo .exo-quiz.memory .exo-row {
	font-size:.8em;
}
.msg {
	font-size:1.2em;
}
.msg-title {
	font-size:1.4em;
	display:inline-block;
	margin:20px;
	font-weight:bold;
	text-align:center;
}
content {
	display:block;
	tmargin:20px 5px;
	& [id^='row'].row {
		display: block;
		margin-left:0px;
		& .col{
			margin-left:0px;
		}
	}
	& table, & tr, & td {
		display:inline-block;
	}
	& [data-preserve='1'] table, table[data-preserve='1'] {
		display:table;
		& tr{
			display:table-row;
			& td{
				display:table-cell;
			}
		}
	}
	& .formfields-value {
		float:right;
	}
	& .formfields-label #freq{
		color:red;
	}
}
/*</main>*/
/*<min-width:600px>*/
@media (min-width:600px) {

content {
	& table, & .row form table {
		display:table;
		& tr{
			display:table-row;
			& td {
				display:table-cell;
			}
		}
		& .formfields-value {
			float:none;
		}
	}
}
}
/*</min-width:600px>*/