body{background-image:url(../img/backgrounds/clouds.jpg);background-size:cover; overflow:auto ; background-repeat:no-repeat ;}


@font-face {font-family: plume; src: url('PlumNAE.ttf'); }
@font-face {font-family: littledays; src: url('littledays.ttf'); }
@font-face {font-family: ubuntu; src: url('Ubuntu-L.ttf'); }
@font-face {font-family: petita; src: url('PetitaMedium.ttf'); }
@font-face {font-family: carton6; src: url('Carton_Six.ttf'); }
@font-face {font-family: martilo; src: url('martilo.ttf'); }
@font-face {font-family: seyes; src: url('SeyesBDE.ttf'); }

body {text-align:center;font-family:petita; }

fieldset {
    border: 1px groove #ddd !important;
    padding: 0 1.4em 1.4em 1.4em !important;
    margin: 0 0 1.5em 0 !important;
    -webkit-box-shadow:  0px 0px 0px 0px #000;
            box-shadow:  0px 0px 0px 0px #000;
}

legend {
    font-size: 1.2em !important;
    font-weight: bold !important;
    text-align: left !important;
    width:auto;
    padding:0 10px;
    border-bottom:none;
}


.menu-btn {max-height:35px; overflow:hidden; padding-top: 3px;}

#home { width:100%;}

.home-button {padding-top:0px !important; margin-top: 0px !important;}


#button-topbar {position:fixed; top:10px; left:10px; z-index:100;}
.bt-bar {font-size:1.6em !important; margin-left: 5px;}

.pane {overflow:auto ; background-repeat:no-repeat ; background-size:cover; background-image: url("../img/backgrounds/clouds.jpg");}
			
.lettre{
	background-color:white;
	font-family:petita;
	color:black;
	padding:5px;
	padding-top:5px;
	min-width:100px;
	min-height:auto;
	border : solid 1px black;
	border-radius: 15px;
	display: inline-block;
	vertical-align: top;
	*display: inline;
	*zoom: 1;
	margin:3px;
	margin-bottom:5px;
	cursor:pointer;	
	overflow:hidden;
	box-shadow:2px 2px 3px 0px rgba(50, 50, 50, 0.75);
	font-size: 3em; 
	text-shadow: #fff 2px 2px, #fff -2px 2px, #fff -2px -2px, #fff 2px -2px;
}

.big-letter {	
	min-width:60px;
	min-height:auto;
	font-size: 5em; 
}

.small-letter {	
	min-width:60px;
	min-height:auto;
	font-size: 2em; 
}

.tiny-letter {	
	min-width:40px;
	min-height:auto;
	font-size: 1.5em; 
}

#resultbox {
	font-family:littledays;
	font-size: 4em;
	border:0px;
	line-height: 1.8em;
	text-indent: 0.2em;
	width:500px !important;
	background-color: #fff;

}

.theme-label {
	margin-right: 6px;
}


.homepage-title {
	min-width:100px;
	min-height:auto;
	font-size: 4em; 	
}

.gallery>.ng-scope {display: inline-block;}

.listen {color:#3C9BBA !important; font-size: 115%;}
.validate {color:#D60F0F !important; font-size: 115%;}


.rotate {-webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); -o-transform: rotate(-2deg); -webkit-transition: -webkit-transform .15s linear; -moz-transition: -moz-transform .15s linear; -o-transition: -o-transform .15s linear;}
.rotate:nth-child(even) {-webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); -o-transform: rotate(2deg); } 
.rotate:nth-child(3n) {-webkit-transform: none; position: relative; top: -5px; -moz-transform: none; -o-transform: none; } 
.rotate:nth-child(5n) {-webkit-transform: rotate(5deg); position: relative; right: 5px; -moz-transform: rotate(5deg); -o-transform: rotate(5deg); } 
.rotate:nth-child(8n) {position: relative; right: 5px; top: 8px; } 
.rotate:nth-child(11n) {position: relative; left: -5px; top: 3px; }
.zoom:hover {-webkit-transform: scale(1.25); -moz-transform: scale(1.25); -o-transform: scale(1.25); position:relative; z-index:5; text-decoration:none; color:#fff; /*box-shadow:4px 4px 6px 0px rgba(50, 50, 50, 0.75);*/}



/*ul.gallery li:hover { box-shadow:inset 2px 2px 8px 0px rgba(50, 50, 50, 0.75); }*/

.minilettre {font-size: 3em; margin:2px !important; padding:0 !important; min-width:10vw !important;} 
.minichiffre {font-size: 3em; margin:2px !important; padding:0 !important; min-width:10vw !important; min-height:10vw !important;} 
.son {font-size: 5em;}
.mot {font-size: 5em;}


.cursive { font-family: plume !important; padding: 12px;}
.minuscules { text-transform:lowercase !important; }
.majuscules { text-transform:uppercase !important; }
.capitales { text-transform:capitalize !important; }
.adjust {padding:5px;  font-family: seyes !important; }

.plume {font-family: plume !important;}

.level1 {background-color:#A2FF8D !important;}
.level2 {background-color:#7FC0FF !important;}
.level3 {background-color:#FFF455 !important;}
.paired {background-color:#FFF900 !important;}
.fr {background-color:#EB5B0E !important; color:white; text-shadow: #000 2px 2px, #000 -2px 2px, #000 -2px -2px, #000 2px -2px;}

.red {background-color:#F23535 !important;}
.green {background-color:#93F235 !important;}
.blue {background-color:#3587F2 !important;}
.yellow {background-color:#F2EF35 !important;}
.orange {background-color:#F29A35 !important;}
.purple {background-color:#C335F2 !important;}
.pink {background-color:#FA57DC !important;}
.grey {background-color:#BABABA !important;}

.title-icon {height:20px;}
.bouton-son {height:90px;background-image:url(../img/son.png); background-position: center 0%; background-size:contain;background-repeat:no-repeat;}
.bouton-go {background-image:url(../img/go.png); background-position: center 50%; background-size:contain;background-repeat:no-repeat;}
.bouton-gomme {background-image:url(../img/gomme.png); background-position: center 50%; background-size:contain;background-repeat:no-repeat;}
/*.bouton-replay {background-image:url(../img/replay.png); background-position: center 50%; background-size:contain; background-repeat:no-repeat; height:100px; margin:10px;}
.bouton-quit {background-image:url(../img/stop.png); background-position: center 50%; background-size:contain; background-repeat:no-repeat; height:100px; margin:10px;}
*/
.dictee-input {font-size:40px; width:100px; text-align:center;padding:1px;}


.smiley-pic {background-repeat:no-repeat; width:100%; height:100%; position:fixed; background-position: center 0%; background-size:contain; z-index:9999;top:0;}

.score, .smiley {background-repeat:no-repeat; width:100%; height:100%; position:fixed; display:none; background-position: center 0%; background-size:contain; z-index:9997;top:0;}
.fond-score {width:100%; height:100%; position:fixed; z-index:9998;top:0; background-color:black; opacity:0.5;}
.score-stars {background-repeat:no-repeat; width:100%; height:100%; position:fixed; background-position: center 0%; background-size:contain; z-index:9999;top:0;}
.score_star {width:200px; height:200px; border:solid 1px black; border-radius: 15px; padding:15px; background-color:#fff; color:#FFE11F !important; font-size:12em; text-shadow: #000 2px 2px, #000 -2px 2px, #000 -2px -2px, #000 2px -2px;}
.score_replay {width:140px; height:140px; border:solid 1px black; border-radius: 15px; padding:15px; background-color:#fff; color:#0CB346 !important; font-size:8em; text-shadow: #000 2px 2px, #000 -2px 2px, #000 -2px -2px, #000 2px -2px; cursor:pointer;}
.score_quit {width:140px; height:140px; border:solid 1px black; border-radius: 15px; padding:15px; background-color:#fff; color:#D60F0F !important; font-size:8em; text-shadow: #000 2px 2px, #000 -2px 2px, #000 -2px -2px, #000 2px -2px; cursor:pointer;}

.score-result {position:absolute; top:5px; right:20px;}

.params { 
	padding: 10px;
	display:none;
	background-color:#E2E2E2; 
	z-index:996;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
}


/* SLIDERS */
.param-label {font-size: 1.4em; text-align: left; margin-left: 5%;}
.params-options {text-align:left;}
.param-slider { margin-left: 5%; margin-right: 5%; margin-top:20px; width:80% !important;}
/*.param-slider .ui-slider-range { background: #729fcf; }
.param-slider .ui-slider-handle { border-color: #729fcf; width:30px; height:30px; border-radius: 50%; margin-top:-5px; box-shadow:2px 2px 3px 0px rgba(50, 50, 50, 0.75);}*/
.param-value {display:none;}


.niveau {width:auto;}

.hide {display:none;}


#liste_mot_a_lire span{display:none; font-family:petita;color:black; text-shadow: #fff 2px 2px, #fff -2px 2px, #fff -2px -2px, #fff 2px -2px;}
#liste_mot_a_lire {width:100%; height:75%;}
.mot_a_lire {background-color:white; box-shadow:4px 4px 6px 0px rgba(50, 50, 50, 0.75); border-radius:10px; padding:5px;}

.cadre {max-width:80%;}

#bt-previous {position:fixed; left:0; top:50%;}
#bt-next{position:fixed; right:0; top:50%;}

.estime { width:90%; height:90%; border:1px solid grey; border-collapse:collapse; margin-right:auto;margin-left:auto; margin-top:10px;}
.estime tr { background-color:#fff;}
.estime td { }
#curseur {width:100%; }
.reponse-table {background-color:#fff; font-size:1.2em;}

#text div {text-align: left !important;}
#texte_titre {font-size:6vw; font-weight: bolder;}
#texte_auteur {font-size:4vw; margin-bottom: 15px;}
#texte_txt {font-size:4vw;text-align: justify; padding-left:20px; width:auto;}
.word {cursor:pointer;}



#canvas { border:1px solid #999; margin:0 auto 20px auto; display:block; background:#fff; cursor:crosshair; }
#couleurs { list-style:none; margin:0 0 20px 0; padding:0;}
#couleurs li { display:inline-block;}
#couleurs a { display:inline-block; width:30px; height:30px; margin-right:10px; text-indent:-4000px; overflow:hidden; border-radius:50%; border:1px solid grey;}
#couleurs a.actif {	border:2px solid #000; width:26px; height:26px; }


.carton6 {font-family:carton6 !important;}
.text-stroke { -webkit-text-stroke: 1px black; color: white; text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; line-height:100%;}
.big-font {font-size: 2em;}


.footer {
	position:fixed;
	padding: 2px 10px 2px 10px;
	bottom:0;
	width:100%;
	height:auto;
	max-height: 100px;
	background-color: #DBDBDB;
	border-top: 1px solid grey;
	font-size:2em;
}

.footer a {
	text-decoration: none;
	float:left;
}

.spacer {
	height:70px;
}

.dropzone {border:2px dashed grey; padding:25px; margin:25px; width: 75%; margin-left: auto; margin-right: auto;}

.counter { position:absolute; top:10px; right:10px;}
.sign { font-size: 4em; }
.myresult {font-size: 4em; width:90px; background-color:rgba(255, 255, 255, 0.5); overflow:none; outline:none;}


#results-tab {margin-bottom: 300px;}
#results-tab>#score { font-size: 1.5em;}

.cells-wrapper {width:90%; margin-right: auto; margin-left: auto; margin-top: 50px;}
.results-cell { float:left; width:40px; margin:1px;}

.good_result {background-image:url(../img/smile.png);background-size:cover; overflow:auto ; background-repeat:no-repeat; width:40px;}
.bad_result {background-image:url(../img/cry.png);background-size:cover; overflow:auto ; background-repeat:no-repeat; width:40px;}
.result {background-size:cover; overflow:auto ; background-repeat:no-repeat; width:40px;}


.as-sortable-item,
.as-sortable-placeholder {
    display: inline-block;
    width: 124px;
    height: 110px;
    float: left;
}

#sortable-container {
    display: inline-block;
}


/* slider response (for some games) */
.response-slider {width:70%;}
.response-slider .limits {float:top;}
.limits .limitMin {float:left;}
.limits .limitMax {float:right;}
.response-slider input {float: top;}


.chart {
	clear:both;
	margin-top: 200px;

}






/* The starting CSS styles for the enter animation */
.fade.ng-enter {
  transition:0.5s linear all;
  opacity:0;
}

/* The finishing CSS styles for the enter animation */
.fade.ng-enter.ng-enter-active {
  opacity:1;
}