@font-face {
  font-family: 'Erasdust';
  src: url('../fonts/erasdust.eot');
  src: url('../fonts/erasdust.ttf');
}
@font-face {
  font-family: 'Eraser';
  src: url('../fonts/Eraser.eot');
  src: url('../fonts/Eraser.ttf');
}

#interface{ z-index:10; }

#stage .credito{ width: 400px; top: 220px; right: -18.2%; }

.telas{ width:800px; height:600px;}

#intro{ background: url(img/bg_intro.png) no-repeat 0 0;}
#intro blockquote, #intro a, #parabens blockquote, #parabens a{ 
	position:absolute;
	color:#112F5B;
	font-family:'Erasdust';
	font-size:28px;
	line-height:28px;
}
#intro blockquote p, #parabens blockquote p{ padding:5px 0; }
#intro #txt1{ 
	top:20px;
	left:95px;
	width:345px;
}
#intro #txt2{ 
	top:390px;
	left:270px;
	width:165px;
}
#intro a, #parabens a{ 
	font-size:30px;	
	top: 464px;
	left: 481px;
	width: 123px;
	height: 114px;
	color: #FD0D18;
	line-height: 100px;
	text-decoration: none;
	text-align: center;
}

#interatividade, #escolha, #atividade1, #atividade2, #atividade3{ background: url(img/bg.png) no-repeat 0 0;}
#escolha h3, #atividade1 h3, #parabens h3, #atividade2 h3, #atividade3 h3{	 
	position:absolute;
	top:30px;
	left:250px;
	color:#fff;
	font-family:'Erasdust';
	font-size:34px;
	font-weight:normal;
}
#escolha .ops, #atividade1 .personagem, #atividade2 .personagem, #atividade3 .personagem{	 
	position:absolute;
	top:145px;
	left:250px;
	width:130px;
	height:351px;
	cursor:pointer;
}
#escolha .ops img, #escolha .ops span{ position:absolute; }
#escolha .ops img{ top:0; left:0; }
#escolha .ops span{ 
	bottom:-80px; 
	left:20px;
	width:80px;
	height:70px;
	background: url(img/selecao.png) no-repeat 0 0;
}
#escolha .op0{ left:235px; }
#escolha .op1{ left:470px; }

#atividade1 h3{	 
	left:155px;
	color:#fff;
}
#atividade1 .personagem, #atividade2.personagem, #atividade3 .personagem{	 
	position:absolute;
	top:145px;
	left:250px;
	width:130px;
	height:351px;
	cursor:auto;
}
#atividade1 .personagem[data-prs=p0]{ background: url(img/menina/menina.png) no-repeat 0 0; left:235px; }
#atividade1 .personagem[data-prs=p1]{ background: url(img/menino/menino.png) no-repeat 0 0; left:470px; }
#atividade1 .drop{ position:absolute; width:130px; left:0; }

#atividade1 .personagem[data-prs=p0] #dp0{ top:65px; height:108px;}
#atividade1 .personagem[data-prs=p0] #dp1{ top:138px; height:120px;}
#atividade1 .personagem[data-prs=p0] #dp2{ top:258px; height:92px;}
#atividade1 .personagem[data-prs=p0] #dp3{ top:309px; height:42px;}

#atividade1 .personagem[data-prs=p1] #dp0{ top:65px; height:108px;}
#atividade1 .personagem[data-prs=p1] #dp1{ top:138px; height:120px;}
#atividade1 .personagem[data-prs=p1] #dp2{ top:258px; height:92px;}
#atividade1 .personagem[data-prs=p1] #dp3{ top:309px; height:42px;}

#atividade1 .dragarea, #atividade2 .dragarea{	 
	position:absolute;
	top:135px;
	left:230px;
	width:571px;
	height:455px;
	background: url(img/bg_drag.png) no-repeat 0 0;
}

#atividade1 .dragarea .drag, #atividade1 .personagem .drop .drag{ position:absolute; text-indent:-5000px; cursor:pointer;}
#atividade1 .dragarea .drag{ z-index:5;}
#atividade1 .dragarea #dg0{ left:111px; top:73px;}
#atividade1 .dragarea #dg1{ left:253px; top:35px;}
#atividade1 .dragarea #dg2{ left:373px; top:90px;}
#atividade1 .dragarea #dg3{ left:253px; top:155px;}
#atividade1 .dragarea #dg4{ left:154px; top:253px;}
#atividade1 .dragarea #dg5{ left:348px; top:242px;}
#atividade1 .dragarea #dg6{ left:139px; top:332px;}
#atividade1 .dragarea #dg7{ left:321px; top:304px;}
#atividade1 .dragarea[data-prs=p0] #dg0, #atividade1 .personagem[data-prs=p0] .drop #dg0{ width:122px; height:155px; background: url(img/menina/saia_off.png) no-repeat 0 0;}
#atividade1 .dragarea[data-prs=p0] #dg0[data-status=up], #atividade1 .personagem[data-prs=p0] .drop #dg0[data-status=up]{ background: url(img/menina/saia.png) no-repeat 0 0;}
#atividade1 .dragarea[data-prs=p0] #dg1, #atividade1 .personagem[data-prs=p0] .drop #dg1{ width:106px; height:99px; background: url(img/menina/meiao_off.png) no-repeat 0 0;}
#atividade1 .dragarea[data-prs=p0] #dg1[data-status=up], #atividade1 .personagem[data-prs=p0] .drop #dg1[data-status=up]{background: url(img/menina/meiao.png) no-repeat 0 0;}
#atividade1 .dragarea[data-prs=p0] #dg2, #atividade1 .personagem[data-prs=p0] .drop #dg2{ width:118px; height:128px; background: url(img/menina/blusa_off.png) no-repeat 0 0;}
#atividade1 .dragarea[data-prs=p0] #dg2[data-status=up], #atividade1 .personagem[data-prs=p0] .drop #dg2[data-status=up]{ background: url(img/menina/blusa.png) no-repeat 0 0;}
#atividade1 .dragarea[data-prs=p0] #dg3, #atividade1 .personagem[data-prs=p0] .drop #dg3{ width:77px; height:78px; background: url(img/menina/bermuda_off.png) no-repeat 0 0;}
#atividade1 .dragarea[data-prs=p0] #dg3[data-status=up], #atividade1 .personagem[data-prs=p0] .drop #dg3[data-status=up]{ background: url(img/menina/bermuda.png) no-repeat 0 0;}
#atividade1 .dragarea[data-prs=p0] #dg4, #atividade1 .personagem[data-prs=p0] .drop #dg4{ width:110px; height:65px; background: url(img/menina/sapatilha_off.png) no-repeat 0 0;}
#atividade1 .dragarea[data-prs=p0] #dg4[data-status=up], #atividade1 .personagem[data-prs=p0] .drop #dg4[data-status=up]{ background: url(img/menina/sapatilha.png) no-repeat 0 0;}
#atividade1 .dragarea[data-prs=p0] #dg5, #atividade1 .personagem[data-prs=p0] .drop #dg5{ width:112px; height:42px; background: url(img/menina/tennis_off.png) no-repeat 0 0;}
#atividade1 .dragarea[data-prs=p0] #dg5[data-status=up], #atividade1 .personagem[data-prs=p0] .drop #dg5[data-status=up]{ background: url(img/menina/tennis.png) no-repeat 0 0;}
#atividade1 .dragarea[data-prs=p0] #dg6, #atividade1 .personagem[data-prs=p0] .drop #dg6{ width:106px; height:56px; background: url(img/menina/meia_off.png) no-repeat 0 0;}
#atividade1 .dragarea[data-prs=p0] #dg6[data-status=up], #atividade1 .personagem[data-prs=p0] .drop #dg6[data-status=up]{ background: url(img/menina/meia.png) no-repeat 0 0;}
#atividade1 .dragarea[data-prs=p0] #dg7, #atividade1 .personagem[data-prs=p0] .drop #dg7{ width:97px; height:120px; background: url(img/menina/camiseta_off.png) no-repeat 0 0;}
#atividade1 .dragarea[data-prs=p0] #dg7[data-status=up], #atividade1 .personagem[data-prs=p0] .drop #dg7[data-status=up]{ background: url(img/menina/camiseta.png) no-repeat 0 0;}

#atividade1 .dragarea[data-prs=p1] #dg0, #atividade1 .personagem[data-prs=p1] .drop #dg0{ width:102px; height:140px; background: url(img/menino/calca_off.png) no-repeat 0 0;}
#atividade1 .dragarea[data-prs=p1] #dg0[data-status=up], #atividade1 .personagem[data-prs=p1] .drop #dg0[data-status=up]{ background: url(img/menino/calca.png) no-repeat 0 0;}
#atividade1 .dragarea[data-prs=p1] #dg1, #atividade1 .personagem[data-prs=p1] .drop #dg1{ width:100px; height:78px; background: url(img/menino/meiao_off.png) no-repeat 0 0;}
#atividade1 .dragarea[data-prs=p1] #dg1[data-status=up], #atividade1 .personagem[data-prs=p1] .drop #dg1[data-status=up]{background: url(img/menino/meiao.png) no-repeat 0 0;}
#atividade1 .dragarea[data-prs=p1] #dg2, #atividade1 .personagem[data-prs=p1] .drop #dg2{ width:113px; height:146px; background: url(img/menino/blusa_off.png) no-repeat 0 0;}
#atividade1 .dragarea[data-prs=p1] #dg2[data-status=up], #atividade1 .personagem[data-prs=p1] .drop #dg2[data-status=up]{ background: url(img/menino/blusa.png) no-repeat 0 0;}
#atividade1 .dragarea[data-prs=p1] #dg3, #atividade1 .personagem[data-prs=p1] .drop #dg3{ width:80px; height:106px; background: url(img/menino/bermuda_off.png) no-repeat 0 0;}
#atividade1 .dragarea[data-prs=p1] #dg3[data-status=up], #atividade1 .personagem[data-prs=p1] .drop #dg3[data-status=up]{ background: url(img/menino/bermuda.png) no-repeat 0 0;}
#atividade1 .dragarea[data-prs=p1] #dg4, #atividade1 .personagem[data-prs=p1] .drop #dg4{ width:105px; height:62px; background: url(img/menino/sapato.png) no-repeat 0 0;}
#atividade1 .dragarea[data-prs=p1] #dg4[data-status=up], #atividade1 .personagem[data-prs=p1] .drop #dg4[data-status=up]{ background: url(img/menino/sapato.png) no-repeat 0 0;}
#atividade1 .dragarea[data-prs=p1] #dg5, #atividade1 .personagem[data-prs=p1] .drop #dg5{ width:106px; height:54px; background: url(img/menino/tennis_off.png) no-repeat 0 0;}
#atividade1 .dragarea[data-prs=p1] #dg5[data-status=up], #atividade1 .personagem[data-prs=p1] .drop #dg5[data-status=up]{ background: url(img/menino/tennis.png) no-repeat 0 0;}
#atividade1 .dragarea[data-prs=p1] #dg6, #atividade1 .personagem[data-prs=p1] .drop #dg6{ width:98px; height:64px; background: url(img/menino/meia_off.png) no-repeat 0 0;}
#atividade1 .dragarea[data-prs=p1] #dg6[data-status=up], #atividade1 .personagem[data-prs=p1] .drop #dg6[data-status=up]{ background: url(img/menino/meia.png) no-repeat 0 0;}
#atividade1 .dragarea[data-prs=p1] #dg7, #atividade1 .personagem[data-prs=p1] .drop #dg7{ width:111px; height:117px; background: url(img/menino/camiseta_off.png) no-repeat 0 0;}
#atividade1 .dragarea[data-prs=p1] #dg7[data-status=up], #atividade1 .personagem[data-prs=p1] .drop #dg7[data-status=up]{ background: url(img/menino/camiseta.png) no-repeat 0 0;}

#atividade1 .personagem[data-prs=p0] .drop #dg0{ left:6px; top:-10px;}
#atividade1 .personagem[data-prs=p0] .drop #dg1{ left:22px; top:-4px;}
#atividade1 .personagem[data-prs=p0] .drop #dg2{ left:14px; top:-10px;}
#atividade1 .personagem[data-prs=p0] .drop #dg3{ left:36px; top:5px;}
#atividade1 .personagem[data-prs=p0] .drop #dg4{ left:20px; top:-20px;}
#atividade1 .personagem[data-prs=p0] .drop #dg5{ left:18px; top:1px;}
#atividade1 .personagem[data-prs=p0] .drop #dg6{ left:21px; top:37px;}
#atividade1 .personagem[data-prs=p0] .drop #dg7{ left:19px; top:-3px;}

#atividade1 .personagem[data-prs=p1] .drop #dg0{ left:10px; top:-5px;}
#atividade1 .personagem[data-prs=p1] .drop #dg1{ left:25px; top:20px;}
#atividade1 .personagem[data-prs=p1] .drop #dg2{ left:8px; top:-12px;}
#atividade1 .personagem[data-prs=p1] .drop #dg3{ left:30px; top:5px;}
#atividade1 .personagem[data-prs=p1] .drop #dg4{ left:24px; top:-11px;}
#atividade1 .personagem[data-prs=p1] .drop #dg5{ left:25px; top:-3px;}
#atividade1 .personagem[data-prs=p1] .drop #dg6{ left:28px; top:32px;}
#atividade1 .personagem[data-prs=p1] .drop #dg7{ left:10px; top:-5px;}

#parabens{ background: url(img/bg_parabens.png) no-repeat 0 0;}
#parabens h3{	 
	top:93px;
	left:290px;
	color:#FF8A1E;
	font-size:55px;
}
#parabens blockquote{ 
	font-size:30px;
	line-height:30px;
	top:165px;
	left:210px;
	width:400px;
	text-align:center;
}
#parabens blockquote p{ padding:5px 0; }
#parabens a{
	top: 312px;
	left: 356px;
	width:120px;
	color:#112F5B;
}
#atividade2 .personagem, #atividade3 .personagem{ 
	width:177px;
	height:365px;
	top:170px;
	left:40px;
}
#atividade2 .personagem[data-prs=p0][data-tempo=o]{ background: url(img/menina/menina_o.png) no-repeat 0 0; }
#atividade2 .personagem[data-prs=p0][data-tempo=h]{ background: url(img/menina/menina_h.png) no-repeat 0 0; }
#atividade2 .personagem[data-prs=p1][data-tempo=o]{ background: url(img/menino/menino_o.png) no-repeat 0 0; }
#atividade2 .personagem[data-prs=p1][data-tempo=h]{ background: url(img/menino/menino_h.png) no-repeat 0 0; }

#atividade2 .dragarea .drag, #atividade2 .personagem .drag{ position:absolute; text-indent:-5000px; cursor:pointer;}
#atividade2 .personagem .drag{ left:150px; transform: scale(.5,.5);}
#atividade2 .dragarea .drag{ z-index:4;}
#atividade2 .dragarea #dg2_0, #atividade2 .personagem #dg2_0{ width:181px; height:94px; left:138px; top:31px; background: url(img/caneta_h.png) no-repeat 0 0;}
#atividade2 .dragarea #dg2_1, #atividade2 .personagem #dg2_1{ width:136px; height:127px; left:344px; top:-14px; background: url(img/bolsa_o.png) no-repeat 0 0;}
#atividade2 .dragarea #dg2_2, #atividade2 .personagem #dg2_2{ width:171px; height:81px; left:66px; top:110px; background: url(img/caderno_h.png) no-repeat 0 0;}
#atividade2 .dragarea #dg2_3, #atividade2 .personagem #dg2_3{ width:192px; height:183px; left:230px; top:155px; background: url(img/bolsa_h.png) no-repeat 0 0;}
#atividade2 .dragarea #dg2_4, #atividade2 .personagem #dg2_4{ width:134px; height:118px; left:407px; top:190px; background: url(img/caneta_o.png) no-repeat 0 0;}
#atividade2 .dragarea #dg2_5, #atividade2 .personagem #dg2_5{ width:187px; height:92px; left:86px; top:307px; background: url(img/caderno_o.png) no-repeat 0 0;}

#atividade2 .personagem #dg2_0{ left:100px; top:31px;}
#atividade2 .personagem #dg2_1{ left:100px; top:256px;}
#atividade2 .personagem #dg2_2{ left:100px; top:160px;}
#atividade2 .personagem #dg2_3{ left:87px; top:215px;}
#atividade2 .personagem #dg2_4{ left:100px; top:20px;}
#atividade2 .personagem #dg2_5{ left:80px; top:147px;}

#atividade3 h3{	 
	left:120px;
	width:590px;
}
#atividade3 .personagem[data-prs=p0][data-tempo=o]{ background: url(img/menina/menina_o_fim.png) no-repeat 0 0; }
#atividade3 .personagem[data-prs=p0][data-tempo=h]{ background: url(img/menina/menina_h_fim.png) no-repeat 0 0; }
#atividade3 .personagem[data-prs=p1][data-tempo=o]{ background: url(img/menino/menino_o_fim.png) no-repeat 0 0; }
#atividade3 .personagem[data-prs=p1][data-tempo=h]{ background: url(img/menino/menino_h_fim.png) no-repeat 0 0; }

#atividade3 .droparea{
	position:absolute;
	top:105px;
	left:225px;
	width:560px;
	height:435px;
}
#atividade3 .droparea figure{
	position:absolute;
	width:286px;
	height:228px;
}
#atividade3 .droparea #dp3_0{ top:0px; left:0px; }
#atividade3 .droparea #dp3_1{ top:5px; left:280px; }
#atividade3 .droparea #dp3_2{ top:220px; left:145px; }

#atividade3 .droparea figure img{
	position:absolute;
	top: 21px;
	left: 17px;
	/*transform: scale(.31,.31);
	transform-origin: 16px 16px;*/
}
#atividade3 .droparea figure span{
	position:absolute;
	top:0;
	left:0;
	width:286px;
	height:228px;
	z-index:2;
}
#atividade3 .droparea #dp3_0 img{ top: 13px; left: 20px; }
#atividade3 .droparea #dp3_1 img{ top: 21px; left: 17px; }
#atividade3 .droparea #dp3_2 img{ top: 21px; left: 17px; }
#atividade3 .droparea #dp3_0 span{ background: url(img/moldura1.png) no-repeat 0 0; }
#atividade3 .droparea #dp3_1 span{ background: url(img/moldura2.png) no-repeat 0 0; }
#atividade3 .droparea #dp3_2 span{ background: url(img/moldura3.png) no-repeat 0 0; }

#atividade3 .credito{ z-index:3; }
#atividade3 #crd3_2{ z-index:4; }
#atividade3 #btRestart{
	background: url(img/post-it.png) no-repeat 0 0; 
	position:absolute;
	top: 450px;
	right: 30px;
	width:127px;
	height:119px;
	z-index:4;
	color:#112F5B;
	font-family:'Erasdust';
	font-size:28px;
	line-height:119px;
	text-align: center;
	text-decoration: none;
}