body {
  font: 10px sans-serif;

}

html { height: 100%; }

#main
{
	/* "full screen" */
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	text-align: center;
	overflow: auto;
}

.header .logo
{
	background-image: url("img/logo.png");
	background-repeat:repeat-x;
	background-size:180px auto;
	width: 100%;
	height: 100px;
	margin: 0 auto;
	animation:fish_move 15s infinite;
	/*Safari and Chrome:*/
	-webkit-animation:fish_move 5s infinite;
}

/* marche pas ??? */
div:-webkit-full-screen
{
	border: 5px solid red;
}

.home
{
	background: -webkit-linear-gradient(rgb(99, 175, 208), rgb(143, 178, 186));
	background: linear-gradient(rgb(99, 175, 208), rgb(143, 178, 186));
	background-repeat: no-repeat;
	background-attachment: fixed;
}

@keyframes fish_move
{
	from {background-position:0px 10px;}
	to {background-position:-180px 10px;}
}

/*Safari and Chrome:*/
@-webkit-keyframes fish_move
{
	from {background-position:0px 10px;}
	to {background-position:-180px 10px;}
}

.game-block
{
	width: 200px;
	height: 200px;
	display: inline-block;
	background-size: 100% 100%;
	margin: 20px;
}

.section1 .game-block
{
	width: 100px;
	height: 100px;
}

.section-block
{
	width: 300px;
	height: 300px;
	display: inline-block;
	background-size: 100% 100%;
	margin: 20px;
}

.game-block:hover
{
	border: 6px solid black;
	margin: 14px;
}

.section-block:hover
{
	border: 6px solid black;
	margin: 14px;
}

.back_home
{
	position: absolute;
	left: 0px;
	top: 0px;
}

.fullscreen
{
	position: absolute;
	left: 60px;
	top: 0px;
}

.back_home img
{

	width: 40px;
	height: 40px;
	
}

/* les svg débordent en bas */
.game0,
.game1,
.game2,
.game9
{
	overflow: hidden;
}

.letters_game .letter
{
	width: 1.5em;
	height: 1.5em;
	display: inline-block;
	font-size: 9em;
	text-align: center;
	vertical-align: middle;
	padding: 30px;
}

.letters_game .letter a
{
	border: 1px solid blue;
	line-height: 1.5em;
	display: block;
	width: 100%;
	margin: 10px;
}

.letters_game  a:link, .letters_game a:visited, .letters_game a:hover, .letters_game a:active
{
	text-decoration: none;
}

.letters_game a:hover
{
	border-color: black !important;
}

/* RTL pour arabe */
.letters_game-ar-AL 
{
	direction: rtl;
}

.numbers #main
{
	background-color: #6E86D6;
}
.numbers #content {width: 100%; height:300px; /* margin-top:-150px;  negative half of the height */}

.numbers .chiffre, .numbers .plus, .numbers .moins
{
	width: 1em;
	height: 1.5em;
	display: inline-block;
	margin: 20px;
	font-size: 6em;
	text-align: center;
	vertical-align: middle;
	line-height: 1.5em;
}

.numbers .chiffre {width: 1em; }

.numbers  a:link, .numbers a:visited, .numbers a:hover, .numbers a:active
{
	text-decoration: none;
	color: #A0000F; 
}


.calcul .chiffre {width: 1em;}

.calcul .grid 
{
	vertical-align: middle;
	text-align: center;
	width: 100%;
	margin: auto;
}
.calcul .grid .n
{
	width: 1.5em;
	height: 1.5em;
	display: inline-block;
	margin: 2px;
	font-size: 5em;
	text-align: center;
	vertical-align: middle;
	line-height: 1.5em;
	background-color: white;
}

.calcul a:link, .calcul a:visited, .calcul a:hover, .calcul a:active
{
	color: #000ca0; 
}

.calcul .items
{
	margin-bottom: 50px;
}

.game5 .letter
{
	width: 1.5em;
	height: 1.5em;
	display: inline-block;
	margin: 20px;
	font-size: 5em;
	text-align: center;
	border: 4px solid blue;
	vertical-align: middle;
	line-height: 1.5em;
}
.game5 .letter_word
{
	border-color: #660066;
	color: yellow;
	background-color: #CC66CC;
	font-size: 8em;
}

.game5 .letter_word_active
{
	border-color: blue;
}

.game5 .letter_word_hover
{
	border-color: green;
}

.game5  a:link, .game5 a:visited, .game5 a:hover, .game5 a:active
{
	text-decoration: none;
}

.game5 a:hover
{
	border-color: black !important;
}

.game5 .word_highlight 
{
	background-color: yellow;
}
.memory_game
{
}
.memory_game .memory_card img
{
	width: 100%;
	height: auto;
	border-radius: 14px;
}

.memory_game div.memory_card
{
	display: inline-block;
	margin: 30px;
	width: 200px;
	position: relative;
}
.memory_game .memory_card .back
{
	border-radius: 14px;
	border: 5px solid gray;
	background-color: #B3E2F8;
}
.memory_game .memory_card .face
{
	position: absolute;
	top: 0;
	left: 0;
	
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
	
	-webkit-transform: rotatey(-180deg);
	-moz-transform: rotatey(-180deg);
	-o-transform: rotatey(-180deg);
	transform: rotatey(-180deg);
}
.memory_game .memory_card_clicked .face
{
	-webkit-transform: rotatey(0deg);
	-moz-transform: rotatey(0deg);
	-o-transform: rotatey(0deg);
	transform: rotatey(0deg);
	
	-webkit-transition: all ease-in-out 0.5s;
	-moz-transition: all ease-in-out 0.5s;
	-o-transition: all ease-in-out 0.5s;
	transition: all ease-in-out 0.5s;
}

.memory_game .memory_card_clicked .back
{
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
	
	-webkit-transition: all ease-in-out 0.5s;
	-moz-transition: all ease-in-out 0.5s;
	-o-transition: all ease-in-out 0.5s;
	transition: all ease-in-out 0.5s;
	
	-webkit-transform: rotatey(-180deg);
	-moz-transform: rotatey(-180deg);
	-o-transform: rotatey(-180deg);
	transform: rotatey(-180deg);
}

.memory_game_pincel div.memory_card
{
	width: 169px;
}

.memory_game_chess  .memory_card .back 
{	
	background-color:#0502b0;
}

.memory_game_chess
{
    background-image: url(img/memory/chess/background.png);
    background-size: 100% auto;
    background-position-x: center;
}

.memory_game_paul .memory_card .back 
{
	background-color: #195483;
	border : 3px solid #195483
}

.memory_game_paul
{
	background-color: white;
}


.memory_game_paul div.memory_card
{
	width: 189px;
}

#memory_main 
{
	margin-top: 50px;
}

.hover_game
{
	padding-top: 50px;
	background-color: #A0A0A0;
}
.hover_card
{
	display: inline-block;
	background-size: 100% 100%;
	margin: 20px;
}

.hover_card img
{
	width: 350px;
	height: 350px;
	display: block;

}

.hover_card:hover
{
	border: 6px solid black;
	margin: 14px;
}

.bells
{
	padding-top: 200px;
	background-color: #772c7e;
}

.bells .bell-label
{
	font-size: 130px;
}

.bell-c .bell-label{color: #439058; }
.bell-d .bell-label{color: #1679b4; }
.bell-e .bell-label{color: #1c3e95; }
.bell-f .bell-label{color: #762c81; }
.bell-g .bell-label{color: #c2c4c1; }
.bell-a .bell-label{color: #a31700; }
.bell-b .bell-label{color: #bb481c; }
.bell-c1 .bell-label{color: #d4be2c; }



.bell-c {background-color: #a31700; }
.bell-d {background-color: #bb481c; }
.bell-e {background-color: #d4be2c; }
.bell-f {background-color: #439058; }
.bell-g {background-color: #1679b4; }
.bell-a {background-color: #1c3e95; }
.bell-b {background-color: #762c81; }
.bell-c1 {background-color: #c2c4c1; }


.lata_hover
{
	border: blue 2px solid;
}
.lata_nb
{
	width: 1em;
	height: 1.5em;
	display: inline-block;
	margin: 20px;
	font-size: 19em;
	text-align: center;
	vertical-align: middle;
	line-height: 1.5em;
}

.noel
{
	background: -webkit-linear-gradient(rgb(99, 175, 208), rgb(143, 178, 186));
	background: linear-gradient(rgb(99, 175, 208), rgb(143, 178, 186));
	background-repeat: no-repeat;
	background-attachment: fixed;
}