@charset "utf-8";
/* CSS Document */

#jug1, #jug2, #jug3, #jug4, #jug5, #jug6, #jug7, #jug8{
	position:absolute;
	border: solid 3px #000000;
	border-radius: 10px;
	width: 220px;
	height: 30px;
	}

#jug1, #jug2, #jug3, #jug4 {	margin-top: 20px;	}
#jug5, #jug6, #jug7, #jug8 {	margin-top: 70px;	}

#jug1, #jug5{	margin-left: 20px;	}

#jug2, #jug6{	margin-left: 280px;	}

#jug3, #jug7{	margin-left: 540px;	}

#jug4, #jug8{	margin-left: 800px;	}

#prov{
	position:absolute;
	border-right: solid 1px #000000;
	width: 40px;
	height: 30px;
	margin-left: 0px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #00FF00;
	font: oblique bold 100% cursive;
}

#nomb{
	position:absolute;
	//border: solid 1px #000000;
	width: 140px;
	height: 30px;
	margin-left: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	font: oblique bold 100% cursive;
}

#acum{
	position:absolute;
	border-left: solid 1px #000000;
	width: 40px;
	height: 30px;
	margin-left: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #FF0000;
	font: oblique bold 100% cursive;
}

#jug1 > #nomb{	color: #ff0000;	}
#jug2 > #nomb{	color: #0cf3f3;	}
#jug3 > #nomb{	color: #13df79;	}
#jug4 > #nomb{	color: #f0ad1e;	}
#jug5 > #nomb{	color: #f362db;	}
#jug6 > #nomb{	color: #000000;	}
#jug7 > #nomb{	color: #b5bdbd;	}
#jug8 > #nomb{	color: #1b86bc; }


#bote{
	position:absolute;
	border: solid 3px #000000;
	border-radius: 10px;
	width: 200px;
	height: 30px;
	margin-left: 160px;
	margin-top: 140px;
	}

#botex{
	position:absolute;
	width: 150px;
	height: 30px;
	margin-left: 0px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #000;
	color: #FFFFFF;
}

#botet{
	position:absolute;
	border-left: solid 1px #FFFFFF;
	width: 50px;
	height: 30px;
	margin-left: 150px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #000;
	color: #5fe313;
	font: oblique bold 100% cursive;
}

#sigo{
	position:absolute;
	margin-left: 620px;
	margin-top: 140px;
	width:150px;
	height:40px;
	font: 20px "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
	border-radius: 15px;
	display:none;
}

#abandono{
	position:absolute;
	margin-left: 800px;
	margin-top: 140px;
	width:150px;
	height:40px;
	font: 20px "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
	border-radius: 15px;
	display:none;
}

#sig_ronda{
	position:absolute;
	margin-left: 620px;
	margin-top: 140px;
	width:330px;
	height:40px;
	font: 20px "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
	border-radius: 15px;
	background:url(60.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	display:none;
}

#nivel{
	position: absolute;
	width:350px;
	height:200px;
	margin-left: 350px;
	margin-top: 230px;
	//z-index:2;
	border: solid 8px #000000;
	border-radius: 10px;
	background:url(60.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	font: 18px "Trebuchet MS", Arial, Helvetica, sans-serif;
	//display:none;
}

#niveln{
	display:table-cell;
	font: 40px "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: bolder;
	text-align:center;
	vertical-align: middle;
}

#comenzar{
	width:150px;
	height:50px;
	font: bold 18px "Trebuchet MS", Arial, Helvetica, sans-serif;
}

#p10 { 
	position:absolute;
	background-image:url(losetabase.png);
	background-repeat: no-repeat;
	background-size: cover;
	width: 120px;
	height: 120px;
}

#p11, #p12, #p13, #p14, #p15, #p16, #p17, #p18, #p19, #p20, #p21, #p22, #p23, #p24, #p25, #p26, #p27, #p28, #p29, #p30, #p31, #p32, #p33, #p34, #p35, #p36{ 
	position:absolute;
	//background-image:url(loseta19.png);
	background-repeat: no-repeat;
	background-size: cover;
	width: 120px;
	height: 120px;
	display: none;
}



#p10{ 	margin-left: 20px;		margin-top: 220px;	 }
#p11{ 	margin-left: 140px;		margin-top: 220px;	 }
#p12{ 	margin-left: 260px;		margin-top: 220px;	 }
#p13{ 	margin-left: 380px;		margin-top: 220px;	 }
#p14{ 	margin-left: 500px;		margin-top: 220px;	 }
#p15{ 	margin-left: 620px;		margin-top: 220px;	 }
#p16{ 	margin-left: 740px;		margin-top: 220px;	 }
#p17{ 	margin-left: 860px;		margin-top: 220px;	 }
#p18{ 	margin-left: 980px;		margin-top: 220px;	 }
#p19{ 	margin-left: 20px;		margin-top: 380px;	 }
#p20{ 	margin-left: 140px;		margin-top: 380px;	 }
#p21{ 	margin-left: 260px;		margin-top: 380px;	 }
#p22{ 	margin-left: 380px;		margin-top: 380px;	 }
#p23{ 	margin-left: 500px;		margin-top: 380px;	 }
#p24{ 	margin-left: 620px;		margin-top: 380px;	 }
#p25{ 	margin-left: 740px;		margin-top: 380px;	 }
#p26{ 	margin-left: 860px;		margin-top: 380px;	 }
#p27{ 	margin-left: 980px;		margin-top: 380px;	 }
#p28{ 	margin-left: 20px;		margin-top: 540px;	 }
#p29{ 	margin-left: 140px;		margin-top: 540px;	 }
#p30{ 	margin-left: 260px;		margin-top: 540px;	 }
#p31{ 	margin-left: 380px;		margin-top: 540px;	 }
#p32{ 	margin-left: 500px;		margin-top: 540px;	 }
#p33{ 	margin-left: 620px;		margin-top: 540px;	 }
#p34{ 	margin-left: 740px;		margin-top: 540px;	 }
#p35{ 	margin-left: 860px;		margin-top: 540px;	 }
#p36{ 	margin-left: 980px;		margin-top: 540px;	 }

#ficha1, #ficha2, #ficha3, #ficha4, #ficha5, #ficha6, #ficha7, #ficha8{
	position: absolute;
	width: 15px;
	height: 15px; 
}

#ficha6{	margin-left: 70px;		margin-top: 242px;	}
#ficha7{	margin-left: 70px;		margin-top: 272px;	}
#ficha8{	margin-left: 70px;		margin-top: 302px;	}
#ficha4{	margin-left: 95px;		margin-top: 257px;	}
#ficha5{	margin-left: 95px;		margin-top: 287px;	}
#ficha1{	margin-left: 120px;		margin-top: 242px;	}
#ficha2{	margin-left: 120px;		margin-top: 272px;	}
#ficha3{	margin-left: 120px;		margin-top: 302px;	}
