html, body {
	margin:0;
	padding:0;
	width: 100%;
	height:100%;
	background: url(../images/fond.png) no-repeat center fixed;
	-webkit-background-size: cover; /* pour anciens Chrome et Safari */
	background-size: cover;
	font-family:Arial, Helvetica, sans-serif;
}/* version standardisée */
html {
	height: 100%;
}
#centrer {
	text-align: center;
	margin-bottom:3em;
	user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
}
.image {
	position:relative;
	text-align: center !important;
	vertical-align:middle!important;
}
.groupe {
	position:relative;
	display:inline-block;
	text-align:center;
	vertical-align:bottom;
	width:8em;
	margin-bottom:5em;
	user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
	margin-left:1.5em;
}
#fond1, #fond2, #fond3, #fond4, #fond5, #fond6, #fond7, #fond8, #fond9, #fond10, #fond11, #fond12 {
	margin-top:0.8em;
	height:20px;
	user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;/*vertical-align:middle;*/
	/*width:100%;*/
}
.random1 {
	float:left;/*vertical-align:middle;*/
}
h3 {
	user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
	margin-top:0px;
	padding:0px;
	float:left;
}
/*indispensable pour les étiquettes*/
#main {
	border: none;
	text-align:center;
	width:1000px;
	/*vertical-align:middle;*/
	margin-left:auto;
	margin-right:auto;
}
#eltsDraggable {
	/*display:block;*/
	float:left;
}
#btRetour {
	margin-top:10px;
	margin-left:10px;
	width:50px;
	height:50px;
	z-index:10;
}
.clear {
	clear: both;
}
.hidden {
	display: none;
}
.left_side1 {
	position:relative;
	font-size:1.1em;
	width:8em;
	background-color: #fff;
	color: #000;
	cursor: pointer;
	text-align: center !important;
	/*margin: 0px 5px 5px 10px;*/
	padding-right: 1px;
	padding-left: 1px;
	border-radius: 5px;
	/* 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;
	border-width: medium;
	border-color:#CCC;
	border-style: ridge;
	vertical-align:middle!important;
	margin:0 auto;
}
.image {
	position:relative;
	margin-left:auto;
	margin-right:auto;
}
h4 {
	font-size:1.1em;
	font-weight:normal;
	-webkit-touch-callout: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
	padding:2px;
	margin:2px;
}
#dragcenter {
	float:left;
	padding:8px;
	/*margin-left:3em;
	margin-right:3em;*/
	margin-top:20px;
	background:#dcc5ad;
	margin-bottom:3em;
}

.nomPierre {
	position: relative;
	font-size:1.1em;
	width:8em;
	/*border:  1px solid #336600;
	border-radius: 5px;*/
	text-align: center !important;
	vertical-align:middle;
	/*margin: 0px 5px 5px 10px;*/
	padding-top:4px;
	padding-bottom:4px;
	padding-right: 1px;
	padding-left: 1px;
	height: auto;
	background-color:rgb(255, 255, 255, 0.5);
	/* 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;/
	
	
}
#etiq1, #etiq2, #etiq3, #etiq4, #etiq5, #etiq6, #etiq7, #etiq8, #etiq9, #etiq10, #etiq11, #etiq12 {
	position: relative;
	display:none;
	font-size:1.1em;
	width:8em;
	background-color: #fff;
    cursor: pointer;
	text-align: center;
	margin: 0px 5px 5px 10px;
	padding-right: 1px;
	padding-left: 1px;
	border-radius: 5px;
	/* 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;
	border-width: medium;
	border-color:#CCC;
	border-style: ridge;
	vertical-align:middle;
}
#logo {
	float: left;
	margin-left:8em;
	margin-right:2em;
}
#coller {
	padding: 0px;
	margin: 0px;
	margin-bottom:10px;
	 -webkit-touch-callout: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}


#feedback {
	border: 0px solid #ff0000;
	float:left;
	background-color: transparent;
	color: #000;
	width:auto;
	margin-left:50px;
	padding:0px 0px 0px 0px;
}
#compteur {
	float:left;
	width: auto;
	padding:0px 0px 0px 0px;
	margin-top: 0px;
	margin-left: 20px;
	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:15em;
	margin-right:5em;
}
img {
	max-width: 100%;
	height: auto;
}
#bravo {
	display:none;
	margin-top:2em;
	margin-left:30%;
}
 @media all and (max-width: 1199px) and (min-width: 800px) {
img {
width:50%;
height:50%;
}
 h4 {
 font-size:12px;
 margin:0px;
 padding-top:2px;
 padding-bottom:2px;
}
/*.left_side1 {
 width:5em;
}
 #etiq1, #etiq2, #etiq3, #etiq4, #etiq5, #etiq6, #etiq7, #etiq8, #etiq9, #etiq10, #etiq11, #etiq12{

 width:5em;
}*/
#centrer {
 position:absolute;
 top:5px;
 left:50px;
 margin-bottom:0.2em;
}
}
 @media all and (max-width: 799px) and (min-width: 300px) {
/*.left_side1 {
 width:7em;
}
 #etiq1, #etiq2, #etiq3, #etiq4, #etiq5, #etiq6, #etiq7, #etiq8, #etiq9, #etiq10, #etiq11, #etiq12
  {

  width:7em;
}*/
#centrer {
 margin-bottom:0.5em;
}
}
 @media all and (max-width: 2500px) and (min-width: 1801px)) {
#main {
 width: 1800px;
}
 @media all and (max-width: 1800px) and (min-width: 1501px)) {
#main {
 width: 1500px;
}
#fond1, #fond2, #fond3, #fond4, #fond5, #fond6, #fond7, #fond8, #fond9, #fond10, #fond11, #fond12 {
 height:10px;
}
}
@media all and (max-width: 1500px) and (min-width: 1281px)) {
#main {
 width: 1280px;
}
}
@media all and (max-width: 1280px) and (min-width:1001px)) {
#main {
 width: 1000px;
}
#fond1, #fond2, #fond3, #fond4, #fond5, #fond6, #fond7, #fond8, #fond9, #fond10, #fond11, #fond12 {
 height:10px;
}
}
@media all and (max-width: 1000px) and (min-width:801px)) {
#main {
 width: 800px;
}
#fond1, #fond2, #fond3, #fond4, #fond5, #fond6, #fond7, #fond8, #fond9, #fond10, #fond11, #fond12 {
 height:10px;
}
}
@media all and (max-width: 800px) and (min-width:300px)) {
#main {
 width: 300px;
}
#fond1, #fond2, #fond3, #fond4, #fond5, #fond6, #fond7, #fond8, #fond9, #fond10, #fond11, #fond12 {
 height:10px;
}
}