#mainHolder{
	
	background: url(../img/fables.png), repeat;
	
width:100%;
	margin:0;
}

html,button,input,select,textarea {
color:#222;

}
html {
font-size:1em;
line-height:1.4;
}

#btRetour {
	position:absolute;
	top:15px;
	left:5px;
	max-width:5%;
	height:auto;
}
#numero {
	font-family: "Verdana", "sans-serif" ;
	position:absolute;
	top:15px;
	left:40%;
	color:white;
	font-size:1.5em;
	text-align:center;
	
}
#theme {
	font-family: "Verdana", "sans-serif" ;
	position:absolute;
	display:block;
	top:80%;
left: 50%; /* à 50%/50% du parent référent */
  transform: translate(-50%, -50%);
	width:auto;
	color:#c6b8d1;
	font-size:2em;
	text-align:center;
}
#nbBonnesReponses{
	font-family: "Verdana", "sans-serif" ;
	position:absolute;
	top:90px;
	text-align:center;
	left: 0;
    right: 0;
    margin: auto;
	color:brown;
	font-size:1.5em;
	display:none;
	}
#bravo{
	position:absolute;
	top:100px;
left: 50%; /* à 50%/50% du parent référent */
  transform: translate(-50%, -50%);
	display:none;
}
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}

hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}

audio,canvas,img,video {
vertical-align:middle;
}
/*
 * Remove default fieldset styles.
 */
fieldset {
border:0;
margin:0;
padding:0;
}

textarea {
resize:vertical;
}

   
@font-face {
	font-family: 'multicolore';
    src: url('fonts/multicolore-webfont.eot');
    src: url('fonts/multicolore-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/multicolore-webfont.woff2') format('woff2'),
         url('fonts/multicolore-webfont.woff') format('woff'),
         url('fonts/multicolore-webfont.ttf') format('truetype'),
         url('fonts/multicolore-webfont.svg#multicolore_regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: 'rimouski';
    src: url('fonts/rimouski_sb-webfont.eot');
    src: url('fonts/rimouski_sb-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/rimouski_sb-webfont.woff2') format('woff2'),
         url('fonts/rimouski_sb-webfont.woff') format('woff'),
         url('fonts/rimouski_sb-webfont.ttf') format('truetype'),
         url('fonts/rimouski_sb-webfont.svg#rimouskisemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}

html{-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-user-select: none;-webkit-touch-callout:none; background:#000;}

/*-- Percent Loader -- */
#mainLoader{position:absolute;z-index:5; display:none; font-size:50px; line-height:50px; color:#FFF; text-align:center; width:100%; font-family:'multicolore';}

/*-- Content Wrapper -- */
#mainHolder{position:absolute; width:100%;height:100%;}

/*-- Browser Not Support -- */
#notSupportHolder{ width:90%; margin:5% auto; position:relative; color:#FFF; text-align:center; font-size:25px; font-family:'multicolore'; display:none;}
.notSupport{margin-top:200px;}

/*-- Mobile Rotate Instruction -- */
#rotateHolder{position:absolute;width:100%;height:100%;background-color:#794f99;z-index:1000; display:none;}
.mobileRotate{width:200px;height:auto;position:absolute;text-align:center;}
.rotateDesc{color:#fff; font-size:15px; line-height:15px; font-family:'multicolore';}

/*-- Canvas Wrapper -- */
#canvasHolder{ display:none; width:100%; max-width:1024px; height:100%; margin:auto; position:relative;}
#gameCanvas, #box2dCanvas{ position:absolute;}


@-ms-viewport{width:device-width}
@viewport{width:device-width}

.ir {
background-color: transparent;
border: 0;
overflow: hidden;
/* IE 6/7 fallback */
*text-indent: -9999px;
}

.ir:before {
content: "";
display: block;
width: 0;
height: 150%;
}


.hidden {
display: none !important;
visibility: hidden;
}


.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}

.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */
.invisible {
visibility: hidden;
}


.clearfix:before,.clearfix:after{
content: " "; /* 1 */
display: table; /* 2 */
}

.clearfix:after{
clear: both;
}


.clearfix{
*zoom: 1;
}


@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}


@media print{
* {
background:transparent!important;
color:#000!important;
box-shadow:none!important;
text-shadow:none!important;
}

a,a:visited {
text-decoration:underline;
}

a[href]:after {
content:" (" attr(href) ")";
}

abbr[title]:after {
content:" (" attr(title) ")";
}

.ir a:after,a[href^="javascript:"]:after,a[href^="#"]:after {
content:"";
}

pre,blockquote {
border:1px solid #999;
page-break-inside:avoid;
}

thead {
display:table-header-group;
}

tr,img {
page-break-inside:avoid;
}

img {
max-width:100%!important;
}

@page {
margin:.5cm;
}

p,h2,h3 {
orphans:3;
widows:3;
}

h2,h3 {
page-break-after:avoid;
}
}