body{
	margin:0px;
	padding:0px;
	background-image: url("image/background.png");
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

@font-face{
	src: url("font/mario.ttf");
	font-family: mario;
}

#logo{
	width: 620px;
	height: 250px;
	background-image: url("image/logo.png");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	position: absolute;
	top: -210px;
	left: 50%;
	margin-left: -310px;
	z-index: 99;
	-moz-transition: all 15.5s linear;
    -o-transition: all 15.5s linear;
    transition: all 15.5s linear;
   	cursor: pointer;
}

#logo:hover{
	top:-50px;
	-moz-transition: all 0.8s linear;
    -o-transition: all 0.8s linear;
    transition: all 0.8s linear;
    display: block;
  }

#tabuleiro{
	width: 870px;
	height: 580px;
	background-image: url("image/tab.png");
	position: absolute;
	background-size: 100% 100%;
	left: 50%;
	margin-left: -435px;
	top: 50%;
	margin-top: -290px;
	border-radius: 50px;
	border: 2px solid #000000;
}

/* BARRA LATERAL - Cogumelos */

#lateralesquerda{
	width: 100px;
	height: 100%;
	position: fixed;
	left: 0px;
}

#jogadores{
	width: 200px;
	height: 70px;
	background-image: url("image/jogadores.png");
	background-size: 100% 100%;
	top: 60px;  
	position: absolute;
	z-index: 98;
}

#planta1{
	width: 200px;
	height: 80px;
	background-image: url("image/plantadir.png");
	background-size: 100% 100%;
	top: 57px;  
	left: 25px;
	position: absolute;
	z-index: 97;
	cursor: pointer;
	-moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

#planta1:hover{
	left: 175px;
	cursor: pointer;
	-moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

#cog1{
	width: 70px;
	height: 70px;
	border-radius: 35px;
	background-color: #ffffff;
	border: 2px solid #321321;
	background-image: url("image/1.png");
	background-position: -1px center;
	background-repeat: no-repeat;
	position: relative;
	left: 15px;
	cursor: pointer;
	top: 160px;  
	-moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

#cog1:hover{
	width: 300px;
	-moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

#cog2{
	width: 70px;
	height: 70px;
	border-radius: 35px;
	background-color: #ffffff;
	border: 2px solid #321321;
	background-image: url("image/2.png");
	background-position: -1 center;
	background-repeat: no-repeat;
	position: relative;
	left: 15px;
	cursor: pointer;
	top: 170px;  
	-moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

#cog2:hover{
	width: 300px;
	-moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

#cog3{
	width: 70px;
	height: 70px;
	border-radius: 35px;
	background-color: #ffffff;
	border: 2px solid #321321;
	background-image: url("image/3.png");
	background-position: -1px center;
	background-repeat: no-repeat;
	position: relative;
	left: 15px;
	cursor: pointer;
	top: 180px;  
	-moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

#cog3:hover{
	width: 300px;
	-moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

#cog4{
	width: 70px;
	height: 70px;
	border-radius: 35px;
	background-color: #ffffff;
	border: 2px solid #321321;
	background-image: url("image/4.png");
	background-position: -1px center;
	background-repeat: no-repeat;
	position: relative;
	left: 15px;
	cursor: pointer;
	top: 190px;  
	-moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

#cog4:hover{
	width: 300px;
	-moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}


#cog5{
	width: 70px;
	height: 70px;
	border-radius: 35px;
	background-color: #ffffff;
	border: 2px solid #321321;
	background-image: url("image/5.png");
	background-position: -1px center;
	background-repeat: no-repeat;
	position: relative;
	left: 15px;
	cursor: pointer;
	top: 200px;  
	-moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

#cog5:hover{
	width: 300px;
	-moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

#cog6{
	width: 70px;
	height: 70px;
	border-radius: 35px;
	background-color: #ffffff;
	border: 2px solid #321321;
	background-image: url("image/6.png");
	background-position: -1px center;
	background-repeat: no-repeat;
	position: relative;
	left: 15px;
	cursor: pointer;
	top: 210px;  
	-moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

#cog6:hover{
	width: 300px;
	-moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

#cog7{
	width: 70px;
	height: 70px;
	border-radius: 35px;
	background-color: #ffffff;
	border: 2px solid #321321;
	background-image: url("image/7.png");
	background-position: -1px center;
	background-repeat: no-repeat;
	position: relative;
	left: 15px;
	cursor: pointer;
	top: 220px;  
	-moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

#cog7:hover{
	width: 300px;
	-moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

#cog8{
	width: 70px;
	height: 70px;
	border-radius: 35px;
	background-color: #ffffff;
	border: 2px solid #321321;
	background-image: url("image/8.png");
	background-position: -1px center;
	background-repeat: no-repeat;
	position: relative;
	left: 15px;
	cursor: pointer;
	top: 230px;  
}

#cog8:hover{
	width: 300px;
	-moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}


/* Barra inferior - Canos e Personagens*/

#inferior{
	width: 930px;
	height: 150px;
	/*background-color: #a1b2c3;*/
	position: absolute;
	bottom: 0px;
	left: 50%;
	margin-left: -465px;
}

#pipe1{
	height: 100px;
	width: 100px;
	background-image: url("image/pipe.png");
	background-position: center center;
	background-size: 100%;
	position: absolute;
	bottom: 0px;
	left: 15px;
	z-index: 99;
}

#pipe2{
	height: 150px;
	width: 100px;
	background-image: url("image/pipeh.png");
	background-position: center center;
	background-size: 100%;
	position: absolute;
	bottom: 0px;
	left: 130px;
	z-index: 99;
}

#pipe3{
	height: 130px;
	width: 100px;
	background-image: url("image/pipem.png");
	background-position: center center;
	background-size: 100%;
	position: absolute;
	bottom: 0px;
	left: 245px;
	z-index: 99;
}

#pipe4{
	height: 100px;
	width: 100px;
	background-image: url("image/pipe.png");
	background-position: center center;
	background-size: 100%;
	position: absolute;
	bottom: 0px;
	left: 360px;
	z-index: 99;
}

#pipe5{
	height: 150px;
	width: 100px;
	background-image: url("image/pipeh.png");
	background-position: center center;
	background-size: 100%;
	position: absolute;
	bottom: 0px;
	left: 475px;
	z-index: 99;
}

#pipe6{
	height: 130px;
	width: 100px;
	background-image: url("image/pipem.png");
	background-position: center center;
	background-size: 100%;
	position: absolute;
	bottom: 0px;
	left: 590px;
	z-index: 99;
}

#pipe7{
	height: 150px;
	width: 100px;
	background-image: url("image/pipeh.png");
	background-position: center center;
	background-size: 100%;
	position: absolute;
	bottom: 0px;
	left: 705px;
	z-index: 99;
}

#pipe8{
	height: 130px;
	width: 100px;
	background-image: url("image/pipem.png");
	background-position: center center;
	background-size: 100%;
	position: absolute;
	bottom: 0px;
	left: 820px;
	z-index: 99;
}

#per1{
	height: 120px;
	width: 100px;
	background-image: url("image/per6.png");
	background-size: 100%;
	position: absolute;
	bottom: 5px;
	left: 15px;
	cursor: pointer;
	z-index: 98;
	background-repeat: no-repeat;
	-moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
	
}

#per1:hover{
	bottom:75px;	
	-moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

#per2{
	height: 150px;
	width: 100px;
	background-image: url("image/per8.png");
	background-size: 100%;
	position: absolute;
	bottom: 30px;
	left: 130px;
	cursor: pointer;
	z-index: 98;
	background-repeat: no-repeat;
	-moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

#per2:hover{
	bottom:95px;	
	-moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

#per3{
	height: 130px;
	width: 100px;
	background-image: url("image/per4.png");
	background-size: 100%;
	position: absolute;
	bottom: 25px;
	left: 245px;
	cursor: pointer;
	z-index: 98;
	background-repeat: no-repeat;
	-moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

#per3:hover{
	bottom:90px;	
	-moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

#per4{
	height: 100px;
	width: 100px;
	background-image: url("image/per7.png");
	background-size: 100%;
	position: absolute;
	bottom: 30px;
	left: 360px;
	cursor: pointer;
	z-index: 98;
	background-repeat: no-repeat;
	-moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

#per4:hover{
	bottom:95px;	
	-moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

#per5{
	height: 150px;
	width: 100px;
	background-image: url("image/per1.png");
	background-size: 100%;
	position: absolute;
	bottom: 30px;
	left: 475px;
	cursor: pointer;
	z-index: 98;
	background-repeat: no-repeat;
	-moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

#per5:hover{
	bottom:95px;	
	-moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

#per6{
	height: 130px;
	width: 100px;
	background-image: url("image/per5.png");
	background-size: 100%;
	position: absolute;
	bottom: 32px;
	left: 590px;
	cursor: pointer;
	z-index: 98;
	background-repeat: no-repeat;
	-moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

#per6:hover{
	bottom:95px;	
	-moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

#per7{
	height: 150px;
	width: 100px;
	background-image: url("image/per2.png");
	background-size: 100%;
	position: absolute;
	bottom: 30px;
	left: 705px;
	cursor: pointer;
	z-index: 98;
	background-repeat: no-repeat;
	-moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

#per7:hover{
	bottom:95px;	
	-moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

#per8{
	height: 130px;
	width: 100px;
	background-image: url("image/per3.png");
	background-size: 100%;
	position: absolute;
	bottom: 30px;
	left: 820px;
	cursor: pointer;
	z-index: 98;
	background-repeat: no-repeat;
	-moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

#per8:hover{
	bottom:95px;	
	-moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

/* Caixinha da Estrela */

#boxstar{
	width: 80px;
	height: 80px;
	position: absolute;
	background-image: url("image/box1.png");
	left: 350px;
	bottom:200px;
	background-size: 100%;
	cursor: pointer;
	z-index: 98;
}

#star{
	width: 80px;
	height: 80px;
	position: absolute;
	background-image: url("image/card5.jpg");
	background-size: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	z-index: 99;
	left: 350px;
	bottom:280px;
	display: none;
	-moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
    border-radius: 10px;
}


#theme{
	left: -200px;
	position: absolute;
	bottom: 0px;
	z-index: 99;
}

/* Caixinha com o nome do grupo */
#boxteam1{
	width: 80px;
	height: 80px;
	position: absolute;
	background-image: url("image/box2.png");
	right: 350px;
	bottom:200px;
	background-size: 100%;
	cursor: pointer;
	z-index: 98;

}

#boxteam1null{
	width: 80px;
	height: 80px;
	position: absolute;
	background-image: url("image/box2null.png");
	right: 350px;
	bottom:200px;
	background-size: 100%;
	cursor: pointer;
	z-index: 99;
	display: none;
}

#boxteam2{
	width: 80px;
	height: 80px;
	position: absolute;
	background-image: url("image/box2.png");
	right: 278px;
	bottom:200px;
	background-size: 100%;
	cursor: pointer;
	z-index: 98;
}


#grupo{
	width: 250px;
	height: 324px;
	position: absolute;
	background-image: url("image/grupo.png");
	right: 190px;
	bottom:300px;
	background-size: 100%;
	z-index: 98;
	display:none;
}
/* Lateral das cartas */

#cartas{
	width: 200px;
	height: 70px;
	background-image: url("image/cartas.png");
	background-size: 100% 100%;
	top: 60px;  
	right: -10px;
	position: fixed;
	z-index: 99;
}

#planta2{
	width: 200px;
	height: 80px;
	background-image: url("image/plantaesq.png");
	background-size: 100% 100%;
	top: 57px;  
	right: 15px;
	position: absolute;
	z-index: 97;
	cursor: pointer;
	-moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

#planta2:hover{
	right: 175px;
	cursor: pointer;
	-moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}



#card1{
	width: 250px;
	height: 125px;
	position: fixed;
	background-image: url("image/card1.jpg");
	background-position: left;
	background-repeat: no-repeat;
	background-size: 35% 100%;
	background-color:#ffffff;
	border-radius: 10px;
	border: 2px solid #000000;
	right: -168px;
	top:150px;
	cursor: pointer;
	-moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
    font-family: mario;
    font-size: 24px;
    text-indent:  105px;
    padding-top: 5px;
}

#card1:hover{
	right: -10px;
	-moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

#card2{
	width: 250px;
	height: 125px;
	position: fixed;
	background-image: url("image/card2.jpg");
	background-position: left;
	background-repeat: no-repeat;
	background-size: 35% 100%;
	background-color:#ffffff;
	border-radius: 10px;
	border: 2px solid #000000;
	right: -168px;
	top:660px;
	cursor: pointer;
	-moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
     font-family: mario;
    font-size: 24px;
    text-indent:  90px;
    padding-top: 5px;
}

#card2:hover{
	right: -10px;
	-moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

#card3{
	width: 250px;
	height: 125px;
	position: fixed;
	background-image: url("image/card3.jpg");
	background-position: left;
	background-repeat: no-repeat;
	background-size: 35% 100%;
	background-color:#ffffff;
	border-radius: 10px;
	border: 2px solid #000000;
	right: -168px;
	top: 320px;
	cursor: pointer;
	-moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
     font-family: mario;
    font-size: 24px;
    text-indent:  100px;
    padding-top: 5px;
}

#card3:hover{
	right: -10px;
	-moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

#card4{
	width: 250px;
	height: 125px;
	position: fixed;
	background-image: url("image/card4.jpg");
	background-position: left;
	background-repeat: no-repeat;
	background-size: 35% 100%;
	background-color:#ffffff;
	border-radius: 10px;
	border: 2px solid #000000;
	right: -168px;
	top: 490px;
	cursor: pointer;
	-moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
     font-family: mario;
    font-size: 24px;
    text-indent:  95px;
    padding-top: 5px;
}

#card4:hover{
	right: -10px;
	-moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}
.numero{
	padding-top: 10px;
	font-size: 60px;
	text-indent: 110px;
}

.unidades{
	padding-top: 5px;
	font-size: 16px;
	text-indent: 105px;
}