@charset "UTF-8";
/* CSS Document */

* { margin: 0; padding: 0; outline: none; }
html {
	min-height: 100%;jquerymobile
}
body {
	width: 100%;
	height: 100%;
}



article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
.group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }

.ui-body-a,
.ui-overlay-a {
	border: 1px solid 		#000 /*{a-body-border}*/;
	background: 			#111 /*{a-body-background-color}*/;
	color: 					#fff /*{a-body-color}*/;
	text-shadow: 0 /*{a-body-shadow-x}*/ 1px /*{a-body-shadow-y}*/ 1px /*{a-body-shadow-radius}*/ #111 /*{a-body-shadow-color}*/;
	font-weight: normal;
	background-image: -webkit-gradient(linear, left top, left bottom, from( #222 /*{a-body-background-start}*/), to( #000 /*{a-body-background-end}*/)); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient( #222 /*{a-body-background-start}*/, #000 /*{a-body-background-end}*/); /* Chrome 10+, Saf5.1+ */
	background-image:    -moz-linear-gradient( #222 /*{a-body-background-start}*/, #000 /*{a-body-background-end}*/); /* FF3.6 */
	background-image:     -ms-linear-gradient( #222 /*{a-body-background-start}*/, #000 /*{a-body-background-end}*/); /* IE10 */
	background-image:      -o-linear-gradient( #222 /*{a-body-background-start}*/, #000 /*{a-body-background-end}*/); /* Opera 11.10+ */
	background-image:         linear-gradient( #222 /*{a-body-background-start}*/, #000 /*{a-body-background-end}*/);	
}


div.container {
	position: relative;
	width: 100%;
	height: 100%;
}

.map, .exterieur {
	width:100%;
}

a.room {
	position: absolute;
	display: block;
}

	a#lien-grelos {
		width: 13%;
		height: 28%;
		top: 19.5%;
		left: 8.5%;
	}
	a#lien-meubles {
		width: 31%;
		height: 28%;
		top: 19.5%;
		left: 21.5%;
	}
	a#lien-portraits1 {
		width: 10%;
		height: 31%;
		top: 28%;
		left: 17%;
	}
	a#lien-portraits2 {
		width: 12%;
		height: 14%;
		top: 45%;
		left: 27%;
	}
	a#lien-portraits3 {
		width: 32%;
		height: 31%;
		top: 28%;
		left: 39%;
	}
	a#lien-chambre {
		width: 21%;
		height: 31%;
		top: 28%;
		left: 71%;
	}
	a#lien-cuisine {
		width: 21%;
		height: 22%;
		top: 59%;
		left: 71%;
	}
	a#lien-vestibule {
		width: 11%;
		height: 22%;
		top: 59%;
		left: 60%;
	}
	a#lien-vestibule {
		width: 11%;
		height: 22%;
		top: 59%;
		left: 60%;
	}
	a#lien-accueil {
		width: 6%;
		height: 22%;
		top: 59%;
		left: 54%;
	}


a.over {
	z-index: 999;
	width: 4%;
	height: 8%;
}

	a#lien-cheminee {
		top: 49%;
		left: 87.3%;
	}
	a#lien-tresors {
		top: 49%;
		left: 66%;
	}
	a#lien-secrets {
		top: 20.5%;
		left: 33%;
	}
	a#lien-intrus {
		top: 38.5%;
		left: 12.8%;
	}
	a#lien-baleines {
		top: 62.5%;
		left: 60.3%;
	}
	a#lien-marmite {
		top: 70%;
		left: 87.3%;
	}
	
/* Homepage 
****************************************************/

div#intro {
	position: absolute;
	z-index: 1;
	width: 100%;
	top: 10%;
	left: 0;
}

div#links {
	position: absolute;
	display: block;
	top: 70%;
	left: 0;
	text-align: center;
	width: 100%;
	z-index: 2;
	/* Fallback for web browsers that doesn't support RGBa */
	background: rgb(50, 50, 50);
	/* RGBa with 0.6 opacity */
	background: rgba(153, 153, 153, 0.4);
}

div#links img {
	width: 10%;
	padding: 2% 4%;
}

/* Modal boxes */
/* Z-index of #mask must lower than #boxes .window */
#mask {
	position:absolute;
	z-index:9000;
	background-color:#000;
	display:none;
	top: 0;
	left: 0;
}

/* ROOMS
*************************************************************************************/
   
.button-home {
	position: absolute;
	top: 1%;
	left: 1%;
}
.button-language {
	position: absolute;
	top: 1%;
	right: 1%;
}

.window {
	position:absolute;
	top: 10%;
	left: 0;
}

.window img.room {
	max-height: 80%;
	max-width: 90%;
	margin-left: 5%;
}

.mycontent {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.mycontent img {
	position: relative;
	max-width: 100%;
	max-height: 100%;
}

.buttons {
	position: absolute;
	width: 50px;
}

	.buttons img {
		width: 100%;
	}
	
	#chambre-plus {
		bottom: 8%;
		right: 10%;
	}
	
	#portraits-plus {
		bottom: 8%;
		right: 8%;
	}
	
	#meubles-plus {
		top: 8%;
		left: 8%;
	}
	
	#vestibule-plus {
		bottom: 8%;
		left: 12%;
	}
	
	#cuisine-plus {
		bottom: 8%;
		right: 10%;
	}
	
	#grelos-plus {
		bottom: 8%;
		right: 28%;
	}

.mascotte {
	position: absolute;
}

#masc-peintre-pos {
	top: 10%;
	left: 25%;
	width: 16.5%;
}

#masc-cuistot-pos {
	top: 10%;
	left: 5%;
	width: 30%;
}

#masc-paul-pos {
	top: 20%;
	left: 2%;
	width: 85%;
}

#masc-marin-pos {
	top: 15%;
	left: 20%;
	width: 45%;
}

#masc-mousquetaire-pos {
	top: 30%;
	left: 20%;
	width: 30%;
}

#masc-precepteur-pos {
	top: 10%;
	left: 7%;
	width: 100%;
}

#masc-marchand-pos {
	top: 6%;
	left: 65%;
	width: 30%;
}


/***************************************************/

/* @group player */

.player {
	position: absolute;
	width: 100% !important;
	bottom: 10px;
	left: 0px;
	z-index: 1000;
}

.audiojs{
	width: 90%!important;
	left: 5%;
	position: absolute !important;
	bottom: -30px;
}

#page-grelos .audiojs {
	width: 70% !important;
}

#page-chambre .audiojs {
	left: 10% !important;
	width: 85% !important;
}

.audiojs .scrubber {
	width: 80% !important;
}
.audiojs .time {
	display: none !important;
}

/* @end */

p {
	padding-bottom: 5px;
}

.legend {
	font-style: italic;
	font-weight: bold;
	text-align: right;
	padding-top: 10px;
}

/* Marmite
*****************************************************************/

#game-elements {
	position: absolute;
	right: 5%;
	width: 26%;
	height: 100%;
}
.elements { width: 20%; float: left; padding-left: 5%; padding-bottom: 5%;}
.chicken {
	width: 50%;
}
.poireau, .courgette {
	width: 10%;
}
.carotte {
	width: 8%;
}
.sel,.riz {
	clear: left;
}
.onion {
	width: 20%;
}
.elements img { width: 100%;}
#chaudron { width: 17%; height: 20%; position: absolute; top: 75%; left: 40%;}

#bravo, #bravo2, #bravo3 {
	position: absolute;
	display: none;
	-moz-border-radius: 10%;
	border-radius: 10%;
	top: 50%;
	left: 36%;
	text-align: center;
	width: 20%;
	padding: 3%;
	background: rgb(50, 255, 50);
	/* RGBa with 0.6 opacity */
	background: rgba(50, 255, 50, 0.4);
}
#myLink {
	display: none;
}

.correct {
	/*background-color: #00ff00;
	opacity: 0.5;*/
	position: absolute;
}
#harmonica {
	left: 68%;
	top: 80%;
	width: 6%;
	height: 7%;
}
#guitare {
	left: 43%;
	top: 75%;
	width: 20%;
	height: 17%;
}
#guitare2 {
	-ms-transform:rotate(30deg);
	-o-transform:rotate(30deg);
	-webkit-transform:rotate(30deg);
	-moz-transform:rotate(30deg);
	left: 70%;
	top: 30%;
	width: 3%;
	height: 45%;
}
#guitare3 {
	left: 68%;
	top: 72%;
	width: 4%;
	height: 4%;
}
#guitare4 {
	left: 50%;
	top: 63%;
	width: 10%;
	height: 10%;
}
#saxophone {
	left: 40%;
	top: 58%;
	width: 6%;
	height: 14%;
}
#saxophone2 {
	left: 52%;
	top: 40%;
	width: 10%;
	height: 0.5%;
}
#saxophone3 {
	left: 50%;
	top: 44%;
	width: 4%;
	height: 15%;
}

#eprouvettes {
	left: 33%;
	top: 38%;
	width: 6%;
	height: 7%;
}

#lampe {
	left: 12%;
	top: 38%;
	width: 8%;
	height: 7%;
}

#telegraphe {
	left: 15%;
	top: 75%;
	width: 17%;
	height: 15%;
}

/* Language links */
.ui-icon-myapp-french {
	background-image: url("images/app-icon-french.png");
}

.ui-icon-myapp-english {
	background-image: url("images/app-icon-english.png");
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	.ui-icon-myapp-french {
		background-image: url("images/app-icon-french-highres.png");
		background-size: 18px 18px;
	}
	.ui-icon-myapp-english {
		background-image: url("images/app-icon-english-highres.png");
		background-size: 18px 18px;
	}
}