body {
font-family:Arial, Helvetica, sans-serif;

}

li {
	margin-bottom:3px;display:inline; margin-left: 2em;padding:3px;
}
.click{vertical-align: middle;margin-right: 10px;

}
.bleu {
background: #00ffff;
	
	}
.jaune {
background:#ffff00;
	}
.vert{
background:#00ff00;
	}
.mauve {
	background:#ff00ff;
}
#bleu,#jaune,#vert,#mauve {min-width:400px;cursor:pointer;}
#gauche, #droite {
		float: left;
}
#gauche {
	width: 45%;
	margin-right: 50px;
	
}
 #droite {
	width: 45%;
	border: thin solid #333;
	
}
#codeCouleur {
	border: thin solid #333;
}
#codeCouleurTitre {padding: 20px;background-color:#eee;font-size: 1em;}
#codeCouleurTitre1 {padding: 20px;background-color:#eee;font-size: 1em;}
#codeCouleurTitre::before { 
    margin-top:-35px;
    margin-left:125px;
    position:absolute;
    content: "Code couleurs";
    background-color:#eee;
    color: red;
    font-weight: bold;
}
#codeCouleurTitre1::before { 
    margin-top:-35px;
    margin-left:5px;
    position:absolute;
    content: "Glissez l'\0000E9tiquette avec le bon code couleur et placez-la sur l'\0000E9tiquette blanche correspondante.";
    background-color:#eee;
    color: red;
    font-weight: bold;
}
#dragcenter {
margin-top:5px;
padding:5px;
background-color:#FFF;
}
#question-description {
	margin-top:-45px;
	font-family:Arial, Helvetica, sans-serif;
	text-align:center;
	left: 10%;
	right: 10%;
}

h3 {
	user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
	margin-top:10px;
	padding:15px;
	font-size:1em;
	
}
#faux, #juste {display:none;width :80px; height:auto; margin-left:400px;}
#placezMots {
	text-align: left;
	margin-left:20px;
}

#titreVocabulaire {
	margin:0;
	padding:0;
	padding-bottom:30px;
	color:#FFF;
	font-family:"Comic Sans MS", cursive;
}
/*indispensable pour les étiquettes*/
#main {
	border: 0px ridge #333;
	text-align:center;
}
#eltsDraggable {
	display:block;
	margin-left:10px;
	border: medium solid #333;
	padding:10px;
	background-color:#eee;
	text-align: left;
}
#btRetour {
	margin-top:10px;
	margin-left:10px;
	width:50px;
	height:50px;
		border:none;
	background-color: transparent;
}
.clear {
	clear: both;
	}
.hidden {
	display: none;
}
.left_side1 {
	border:  1px solid #336600;
	/*margin: 0px 5px 5px 10px;*/
	display:inline-block;/*pour donner une valeur minimum au droppé*/
	padding-left:3px;
	padding-right:3px;
	background-color:#FFF;
	user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
	min-width:5em;
	min-height:1.2em;
	width:auto;
    margin-bottom:-5px;

}
.bleu, .vert,.jaune,.mauve {cursor: pointer;}
.ligne {
	margin-bottom:30px;
	font-weight: 400;
}
h4 {
	font-size:1em;
	margin:0;
	margin-bottom:40px; /*marge entre deux phrases*/
	-webkit-touch-callout: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}
#dragcenter {
	margin-top:5px;
	padding:5px;
	margin-left:10px;
	background-color:#FFF;
}
#bravo {
	position:fixed;
	top:100px;
	margin-left:70%;
	display:none;
}
#auteur {
	font-style: italic;
	font-size:.7em;
}
#etiq1,#etiq100,#etiq101,#etiq102,#etiq103,#etiq104,#etiq2,#etiq200,#etiq201,#etiq202,#etiq203,#etiq204,#etiq3,#etiq300,#etiq301,#etiq302,#etiq303,#etiq304,#etiq4,#etiq400,#etiq401,#etiq402,#etiq403,#etiq404,#etiq5,#etiq500,#etiq501,#etiq502,#etiq503,#etiq504,#etiq6,#etiq600,#etiq601,#etiq602,#etiq603,#etiq604,#etiq7,#etiq700,#etiq701,#etiq702,#etiq703,#etiq704,#etiq8,#etiq800,#etiq801,#etiq802,#etiq803,#etiq804,#etiq9,#etiq900,#etiq901,#etiq902,#etiq903,#etiq904,#etiq10,#etiq1000,#etiq1001,#etiq1002,#etiq1003,#etiq1004,#etiq11,#etiq1100,#etiq1101,#etiq1102,#etiq1103,#etiq1104,#etiq12,#etiq1200,#etiq1201,#etiq1202,#etiq1203,#etiq1204,#etiq13,#etiq1300,#etiq1301,#etiq1302,#etiq1303,#etiq1304,#etiq14,#etiq1400,#etiq1401,#etiq1402,#etiq1403,#etiq1404,#etiq15,#etiq1500,#etiq1501,#etiq1502,#etiq1503,#etiq1504,#etiq16,#etiq1600,#etiq1601,#etiq1602,#etiq1603,#etiq1604,#etiq17,#etiq1700,#etiq1701,#etiq1702,#etiq1703,#etiq1704,#etiq18,#etiq1800,#etiq1801,#etiq1802,#etiq1803,#etiq18024,#etiq19,#etiq1900,#etiq1901,#etiq1902,#etiq1903,#etiq1904,#etiq20,#etiq2000,#etiq2001,#etiq2002,#etiq2003,#etiq2004{

	display: inline-block;
	font-size:0.9em;
	color: #000;
	cursor: move;
	width:auto;
	height:auto;
	text-align: left;
	line-height: 1.5em;
	/*margin: 5px;*/
	padding-left: 3px;
	padding-right: 3px;
    margin-bottom: 3px;
	white-space: nowrap;
	/* Prevent text from being selectable */
    -webkit-touch-callout: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
	}

#logo {
	display:block;
	margin-left:8em;
	margin-right:2em;
}
#coller {
	padding: 0px;
	margin: 0px;
}
button {
	color: #F00;
	cursor:pointer;
	font-size: 20px;
	margin-right:2em;
	border-width: medium;
	border-color: #F00;
}
#rejouer {
	color: #000;
	cursor:pointer;
	font-size: 0.85em;
	margin-right:2em;
	border-width: medium;
	border-color: #CCC;
}
#feedback {
	border: 0px solid #ff0000;
	float:left;
	background-color: transparent;
	color: #000000;
	white-space: nowrap;
	width: 80%;
	margin:0px;
	padding:0px 0px 0px 0px;
}
#contenant {
	color:blue;
	position:absolute;
	top:5px;
	left:80px;
	width:450px;
	
}
#compteur {
	float:left;
	width: 40%;
	padding:0px 0px 0px 0px;
	margin-top: 0px;
	user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
}
#fin {
	float:left;
	display :none;
	margin-left:150%;
	white-space: nowrap;
}

img {
	max-width: 100%;
	height: auto;
}
 @media only screen and (max-width: 767px) {
img {
width:50%;
height:50%;
}
#eltsDraggable {
 margin-left:1%;
}
 h2, h4 {
 font-size:12px;
}
#etiq1,#etiq100,#etiq101,#etiq102,#etiq2,#etiq200,#etiq201,#etiq202,#etiq3,#etiq300,#etiq301,#etiq302,#etiq4,#etiq400,#etiq401,#etiq402,#etiq5,#etiq500,#etiq501,#etiq502,#etiq6,#etiq600,#etiq601,#etiq602,#etiq7,#etiq700,#etiq701,#etiq702,#etiq8,#etiq800,#etiq801,#etiq802,#etiq9,#etiq900,#etiq901,#etiq902,#etiq10,#etiq1000,#etiq1001,#etiq1002,#etiq11,#etiq1100,#etiq1101,#etiq1102,#etiq12,#etiq1200,#etiq1201,#etiq1202,#etiq13,#etiq1300,#etiq1301,#etiq1302,#etiq14,#etiq1400,#etiq1401,#etiq1402,#etiq15,#etiq1500,#etiq1501,#etiq1502,#etiq16,#etiq1600,#etiq1601,#etiq1602,#etiq17,#etiq1700,#etiq1701,#etiq1702,#etiq18,#etiq1800,#etiq1801,#etiq1802,#etiq19,#etiq1900,#etiq1901,#etiq1902,#etiq20,#etiq2000,#etiq2001,#etiq2002,#etiq21,#etiq2100,#etiq2101,#etiq2102,#etiq22,#etiq2200,#etiq2201,#etiq2202,#etiq23,#etiq2300,#etiq2301,#etiq2302,#etiq24,#etiq2400,#etiq2401,#etiq2402,#etiq25,#etiq2500,#etiq2501,#etiq2502,#etiq26,#etiq2600,#etiq2601,#etiq2602,#etiq27,#etiq2700,#etiq2701,#etiq2702,#etiq28,#etiq2800,#etiq2801,#etiq2802,#etiq29,#etiq2900,#etiq2901,#etiq2902,#etiq30,#etiq3000,#etiq3001,#etiq3002,#etiq31,#etiq3100,#etiq3101,#etiq3102,#etiq32,#etiq3200,#etiq3201,#etiq3202,#etiq33,#etiq3300,#etiq3301,#etiq3302,#etiq34,#etiq3400,#etiq3401,#etiq3402{
 margin: 1px;
}
}
 @media only screen and (max-device-width:980px) {
 #eltsDraggable {
 margin-left:5%;
}
#etiq1,#etiq100,#etiq101,#etiq102,#etiq2,#etiq200,#etiq201,#etiq202,#etiq3,#etiq300,#etiq301,#etiq302,#etiq4,#etiq400,#etiq401,#etiq402,#etiq5,#etiq500,#etiq501,#etiq502,#etiq6,#etiq600,#etiq601,#etiq602,#etiq7,#etiq700,#etiq701,#etiq702,#etiq8,#etiq800,#etiq801,#etiq802,#etiq9,#etiq900,#etiq901,#etiq902,#etiq10,#etiq1000,#etiq1001,#etiq1002,#etiq11,#etiq1100,#etiq1101,#etiq1102,#etiq12,#etiq1200,#etiq1201,#etiq1202,#etiq13,#etiq1300,#etiq1301,#etiq1302,#etiq14,#etiq1400,#etiq1401,#etiq1402,#etiq15,#etiq1500,#etiq1501,#etiq1502,#etiq16,#etiq1600,#etiq1601,#etiq1602,#etiq17,#etiq1700,#etiq1701,#etiq1702,#etiq18,#etiq1800,#etiq1801,#etiq1802,#etiq19,#etiq1900,#etiq1901,#etiq1902,#etiq20,#etiq2000,#etiq2001,#etiq2002,#etiq21,#etiq2100,#etiq2101,#etiq2102,#etiq22,#etiq2200,#etiq2201,#etiq2202,#etiq23,#etiq2300,#etiq2301,#etiq2302,#etiq24,#etiq2400,#etiq2401,#etiq2402,#etiq25,#etiq2500,#etiq2501,#etiq2502,#etiq26,#etiq2600,#etiq2601,#etiq2602,#etiq27,#etiq2700,#etiq2701,#etiq2702,#etiq28,#etiq2800,#etiq2801,#etiq2802,#etiq29,#etiq2900,#etiq2901,#etiq2902,#etiq30,#etiq3000,#etiq3001,#etiq3002,#etiq31,#etiq3100,#etiq3101,#etiq3102,#etiq32,#etiq3200,#etiq3201,#etiq3202,#etiq33,#etiq3300,#etiq3301,#etiq3302,#etiq34,#etiq3400,#etiq3401,#etiq3402 {
 margin: 1px;
}
}