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

#previa1,#previa2{
	position:absolute;
	border: solid 5px #000000;
	//border: solid 6px #FF0000;
	border-radius: 10px;
	width: 650px;
	height: 220px;
	margin-left: 0px;
	margin-top: 180px;
	}
	
#previa1{	display: block;	}
#previa2{	display: none;	}
	
.previainterna{
	display:table-cell;
	font: oblique bold 200% cursive;
	text-align:center;
	vertical-align: middle;
	
}

#op2, #op3, #op4, #op5, #op6{
	position:absolute;
	border: solid 2px #000000;
	//border: solid 6px #FF0000;
	border-radius: 25px;
	width: 50px;
	height: 50px;
	margin-top: 110px;
	display:table;
}

#op2{	margin-left: 70px;	}
#op3{	margin-left: 170px;	}
#op4{	margin-left: 270px;	}
#op5{	margin-left: 370px;	}
#op6{	margin-left: 470px;	}


#op7, #op8, #op9, #op10, #op11, #op12{
	position:absolute;
	border-radius: 25px;
	width: 50px;
	height: 50px;
	margin-top: 110px;
	display:table;
}

#op7{	margin-left: 70px;	}
#op8{	margin-left: 160px;	}
#op9{	margin-left: 250px;	}
#op10{	margin-left: 340px;	}
#op11{	margin-left: 430px;	}
#op12{	margin-left: 520px;	}

#texto2{
	position:absolute;
	margin-top: 30px;
	margin-left: 70px;
	font: oblique bold 200% cursive;
	display: table;
}

section{
	background-image:url(Mapa2.jpg);
	background-repeat: no-repeat;
	//background-attachment: fixed;
	//background-image: fixed;
	//background-image: center;
	background-size: cover;
	background-color: #66999;
	position:absolute;
	border: solid 1px #000000;
	width: 400px;
	height: 600px;
	display:none;
}

#reino1{	position: absolute;		margin-left: 6px;		margin-top: 18px;	display: block;}
#reino2{	position: absolute;		margin-left: 98px;		margin-top: 10px;	display: block;}
#reino3{	position: absolute;		margin-left: 282px;		margin-top: 58px;	display: block;}
#reino4{	position: absolute;		margin-left: 33px;		margin-top: 117px;	display: block;}
#reino5{	position: absolute;		margin-left: 175px;		margin-top: 81px;	display: block;}
#reino6{	position: absolute;		margin-left: 97px;		margin-top: 187px;	display: block;}
#reino7{	position: absolute;		margin-left: 167px;		margin-top: 131px;	display: block;}
#reino8{	position: absolute;		margin-left: 237px;		margin-top: 142px;	display: block;}
#reino9{	position: absolute;		margin-left: 91px;		margin-top: 230px;	display: block;}
#reino10{	position: absolute;		margin-left: 203px;		margin-top: 176px;	display: block;}
#reino11{	position: absolute;		margin-left: 186px;		margin-top: 240px;	display: block;}
#reino12{	position: absolute;		margin-left: 129px;		margin-top: 312px;	display: block;}
#reino13{	position: absolute;		margin-left: 282px;		margin-top: 282px;	display: block;}
#reino14{	position: absolute;		margin-left: 344px;		margin-top: 323px;	display: block;}
#reino15{	position: absolute;		margin-left: 244px;		margin-top: 361px;	display: block;}
#reino16{	position: absolute;		margin-left: 230px;		margin-top: 463px;	display: block;}
#reino17{	position: absolute;		margin-left: 347px;		margin-top: 566px;	display: block;}


#estacion{
	position:absolute;
	color:#F0F;
	margin-top: 570px;
	background-color:#000;
}

#condot1{
	position:absolute;
	margin-top: 530px;
	margin-left: 0px;
	font-weight:bold;
}

#condot2{
	position:absolute;
	margin-top: 525px;
	margin-left: 135px;
}


#jugador1,#jugador2,#jugador3,#jugador4,#jugador5,#jugador6{
	position:absolute;
	border: solid 2px #000000;
	//border: solid 6px #FF0000;
	border-radius: 10px;
	width: 450px;
	height: 60px;
	margin-left: 440px;
	display: none;
}

#jugador1{	margin-top: 0px;	}
#jugador2{	margin-top: 220px;	}
#jugador3{	margin-top: 300px;	}
#jugador4{	margin-top: 380px;	}
#jugador5{	margin-top: 460px;	}
#jugador6{	margin-top: 540px;	}

#logo{
	position:absolute;
	width: 50px;
	height: 50px;
	margin-top: 5px;
	margin-left: 2px;
	display: table;
	}

#puntos{
	position:absolute;
	//border: solid 1px #000000;
	border-radius: 10px;
	width: 50px;
	height: 50px;
	margin-top: 5px;
	margin-left: 60px;
	display: table;
	}
	
.puntosinterna{
	display:table-cell;
	font: oblique bold 200% cursive;
	//color:#FFFFFF;
	//letter-spacing: 4px;
	text-align:center;
	vertical-align: middle;
}

#carta1, #carta2, #carta3, #carta4, #carta5, #carta6, #carta7, #carta8, #carta9, #carta10{
	position:absolute;
	width: 30px;
	height: 30px;
	margin-top: 2px;
}

#carta1{	margin-left: 130px;	}
#carta2{	margin-left: 162px;	}
#carta3{	margin-left: 194px;	}
#carta4{	margin-left: 226px;	}
#carta5{	margin-left: 258px;	}
#carta6{	margin-left: 290px;	}
#carta7{	margin-left: 322px;	}
#carta8{	margin-left: 354px;	}
#carta9{	margin-left: 386px;	}
#carta10{	margin-left: 418px;	}

#texto{
	position:absolute;
	margin-top: 31px;
	margin-left: 130px;
	font: oblique bold 130% cursive;
}

#paso{
	position:absolute;
	margin-top: 31px;
	margin-left: 330px;
	font: oblique bold 130% cursive;
	color:#00F;
	display:none;
}

#pasar{
	position:absolute;
	margin-left: 625px;
	margin-top: 130px;
	width:100px;
	height:40px;
	font: 20px "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
	border-radius: 15px;
	display:none;
}

#miscartas{
		position:absolute;
	border: solid 2px #000000;
	//border: solid 6px #FF0000;
	border-radius: 10px;
	width: 450px;
	height: 40px;
	margin-left: 440px;
	margin-top: 80px;
	display: none;
}

#micarta1, #micarta2, #micarta3, #micarta4, #micarta5, #micarta6, #micarta7, #micarta8, #micarta9, #micarta10{
	position:absolute;
	border: solid 1px #000000;
	width: 30px;
	height: 30px;
	margin-top: 5px;
}

#micarta1{	margin-left: 30px;	}
#micarta2{	margin-left: 70px;	}
#micarta3{	margin-left: 110px;	}
#micarta4{	margin-left: 150px;	}
#micarta5{	margin-left: 190px;	}
#micarta6{	margin-left: 230px;	}
#micarta7{	margin-left: 270px;	}
#micarta8{	margin-left: 310px;	}
#micarta9{	margin-left: 350px;	}
#micarta10{	margin-left: 390px;	}


#siguiente{
	position:absolute;
	margin-left: 550px;
	margin-top: 150px;
	width:250px;
	height:40px;
	font: 20px "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
	border-radius: 15px;
	display:none;
}


.ganador{
	
	animation-name: parpadeo;
  	animation-duration: 1s;
 	animation-timing-function: linear;
  	animation-iteration-count: infinite;
}

@keyframes parpadeo2 {  
  0% { border: solid 2px #000000; }
  50% { border:dashed 8px #CC9966; }
  100% { border: solid 2px #000000; }
}

@keyframes parpadeo {  
  0% { opacity: 1.0; }
   50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}


footer{
	position:absolute;
	margin-top: 0px;
	margin-left: 950px;
}