*{margin:0; padding:0; border:0; user-select:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; -o-user-select:none; }
body {background-color:#000; height:100%;}
html 	{height:100%;}
div	{background-repeat:no-repeat;}

#contPlayer {position:absolute; width:1px; height:1px; top:0; left:0; overflow:hidden;}
#tudo { display:table; width:1024px; height:768px; background: url('../imagens/bg.jpg') #00b9d9; margin:0; position:relative; overflow:hidden;}

.pagina {display:none; width:1024px; height:768px; position:absolute; top:0px; left:0;}

.topo{ float:left; width:1024px; height:193px; }
.topo .tituloTopo{ float:left; width:576px; height:193px; }
.topo .tituloTopo .logo{ float:left; width:1024px; height:193px; background:url('../imagens/logo.png') no-repeat center center;}

.btHome{ float:left; width:55px; height:54px; background:url('../imagens/bt_home.png') no-repeat;  cursor:pointer; display:none; position:absolute; top:20px; left:auto; right:20px; z-index:100;}

.btsPrincipais {float:left; width:1024px; clear:both; margin-top:97px; position:relative;}

.btsPrincipais .botao {width:201px; height:218px; background: no-repeat left center ; cursor:pointer; position:absolute; z-index:5; }
.btsPrincipais .botao.actividades {background-image:url('../imagens/icon_home_actividades.png');  top:0; left:40px;}
.btsPrincipais .botao.juegos {background-image:url('../imagens/icon_home_juegos.png'); top:84px; left:226px;}
.btsPrincipais .botao.videos {background-image:url('../imagens/icon_home_videos.png'); top:0; left:411px;}
.btsPrincipais .botao.karaoke {background-image:url('../imagens/icon_home_karaoke.png'); top:84px; left:596px;}
.btsPrincipais .botao.audios {background-image:url('../imagens/icon_home_audios.png'); top:0; left:783px;}
.btsPrincipais .botao .bgHover { display:none; z-index:1; background-image:url('../imagens/bg_bts_home.png'); position:absolute; top:; left:0; width:286px; height:285px; }
.btsPrincipais .botao:hover .bgHover { display:block;}
.btsPrincipais .botao .text {float:left; width:154px; height:34px; line-height:34px; color:#f58220; margin:181px 0 0 23px; text-align:center; font-family:VAGRoundedStd-Bold; z-index:10; font-size:16px; letter-spacing:1px;}

.btsPrincipais .bgActividades	{ position:absolute; background-image:url('../imagens/bg_bts_home.png'); width:286px; height:285px; display:none; top: -40px; left: 00px; }
.btsPrincipais .bgJuegos 		{ position:absolute; background-image:url('../imagens/bg_bts_home.png'); width:286px; height:285px; display:none; top: 44px; left: 186px; }
.btsPrincipais .bgVideos 		{ position:absolute; background-image:url('../imagens/bg_bts_home.png'); width:286px; height:285px; display:none; top: -40px; left: 371px; }
.btsPrincipais .bgKaraoke 		{ position:absolute; background-image:url('../imagens/bg_bts_home.png'); width:286px; height:285px; display:none; top: 44px; left: 556px; }
.btsPrincipais .bgAudios		{ position:absolute; background-image:url('../imagens/bg_bts_home.png'); width:286px; height:285px; display:none; top: -40px; left: 743px; }

.btCredito {position:absolute; top:auto; bottom:20px; left:auto; right:20px; width:47px; height:46px; background-image:url('../imagens/bt_cred.png'); cursor:pointer;}
.logoSantillana {position:absolute; top:auto; bottom:20px; left:0; right:0; width:175px; height:62px; background-image:url('../imagens/logo_santinalla.png'); margin:0 auto;}


/*////////INTERNAS///////*/
.titInterno {position:absolute; top:0; left:0; right:0; margin:0 auto; width:350px; height:232px; background:url('../imagens/logo_interno.png') no-repeat center 0 ;}
.titInterno .text {position:absolute; top:151px; left:0; width:350px; height:81px; background:no-repeat center 0 ; line-height:83px; color:#f58220; font-size:31px; font-family:VAGRoundedStd-Bold; }
#actividades .titInterno .text {background-image:url('../imagens/actividades_titulos.png') ; text-indent:115px;}
#juegos .titInterno .text {background-image:url('../imagens/juegos_titulos.png') ; text-indent:165px;}
#videos .titInterno .text {background-image:url('../imagens/videos_titulos.png') ;text-indent:165px;}
#karaoke .titInterno .text {background-image:url('../imagens/karaoke_titulos.png') ;text-indent:145px;}
#audios .titInterno .text {background-image:url('../imagens/audios_titulos.png') ;text-indent:155px;}

/*////////ACTIVITIES///////*/
.contAtvs {float:left; margin:241px 0 0 85px; text-align:center; width:870px;}
.contAtvs .unidad {display:inline-table; width:165px; height:221px; margin-right:10px; margin-top:0; vertical-align:top;}
.contAtvs .unidad  .titUnidad{float:left; width:203px; height:51px; background-image:url('../imagens/bg_actividades.png'); text-align:center; line-height:51px; color:#fff; font-family:VAGRoundedStd-Bold; font-size:23px; margin-bottom:3px;}
.contAtvs .unidad  .btAtv{float:left; width:203px; height:28px; background-color:#FFF; text-align:center; line-height:30px; color:#fff; font-family:VAGRoundedStd-Bold; font-size:13px; color:#f58220; margin:0 0 2px; border-radius:17px; cursor:pointer;  letter-spacing:0.05em;}
.contAtvs .unidad  .btAtv:hover{background-color:#f58220; color:#FFF;}

/*////////GAMES///////*/
.btJuego		{z-index:10; position:relative;}
.btJogo1	{float:left; width:236px; height:279px; cursor:pointer; background-image:url('../imagens/img_juego1.png'); margin:345px 0 0 25px;}
.btJogo2	{float:left; width:236px; height:279px; cursor:pointer; background-image:url('../imagens/img_juego2.png'); margin:278px 0 0 0px;}
.btJogo3		{float:left; width:236px; height:279px; cursor:pointer; background-image:url('../imagens/img_juego3.png'); margin:278px 0 0 25px;}
.btJogo4	{float:left; width:236px; height:279px; cursor:pointer; background-image:url('../imagens/img_juego4.png'); margin:345px 0 0 0px;}

.btJuego img		{bottom:67px; display:none; left:0; margin:auto; position:absolute; right:0; top:0;}
.bgJogo1	{z-index:0; position:absolute; background-image:url('../imagens/bg_bts_home.png'); width:286px; height:285px; display:none; top: 300px; left: 0px; }
.bgJogo2	{z-index:0; position:absolute; background-image:url('../imagens/bg_bts_home.png'); width:286px; height:285px; display:none; top: 240px; left: 230px; }
.bgJogo3	{z-index:0; position:absolute; background-image:url('../imagens/bg_bts_home.png'); width:286px; height:285px; display:none; top: 240px; left: 495px; }
.bgJogo4	{z-index:0; position:absolute; background-image:url('../imagens/bg_bts_home.png'); width:286px; height:285px; display:none; top: 300px; left: 735px; }




/*////////VIDEOS///////*/
#videos .hover{position:absolute; display:none; width:105px; height:105px; background-image:url('../imagens/bt_play_video.png'); top:55px; left:0; right:0; margin:0 auto;}
#videos .imgTitulo:hover .hover{display:block;}
#videos .imgTitulo .titulo{float:left; width:241px; text-align:center; color:#f58220; font-family:VAGRoundedStd-Bold; font-size:18px; text-transform:uppercase; margin-top:224px;  letter-spacing:1px;}
#videos .btAtv{float:left; width:137px; text-align:center; color:#f58220; font-family:VAGRoundedStd-Bold; font-size:15px; text-transform:uppercase; cursor:pointer; background-color:#FFF; border-radius:17px; height:32px; line-height:36px; margin:1px 52px;  letter-spacing:1px;}
#videos .btAtv:hover{background-color:#f58220; color:#FFF;}
.contVideo1 {float:left; margin:232px 0 0 210px; width:241px; position:relative;}
.contVideo1 .imgTitulo {float:left; width:241px; height:280px; background-image:url('../imagens/img_video1.png'); position:relative; cursor:pointer;  position:relative;}
.contVideo1 .imgTitulo .titulo{line-height:46px;}
.contVideo2 {float:left; margin:232px 0 0 126px; width:241px; position:relative;}
.contVideo2 .imgTitulo {float:left; width:241px; height:280px; background-image:url('../imagens/img_video2.png'); position:relative; cursor:pointer; position:relative;}
.bgBtVideo	{z-index:0; position:absolute; background-image:url('../imagens/bg_bts_home.png'); width:286px; height:285px; display:none; top: -35px; left: -20px; }


/*////////AUDIOS///////*/
.player{  float:left; width:566px; height:94px; text-align:center; background-image:url('../imagens/bg_player.png'); margin:251px 0 0 100px;}
.player .contPlayer{display:table; width:520px; margin:20px auto 0;}
.player .contPlayer .btVoltar{float:left; background-image:url('../imagens/bt_voltar_audio.png'); width:21px; height:21px; margin-right:15px; cursor:pointer;}
.player .contPlayer .btPlay{float:left; background:url('../imagens/bt_play_audio.png') left top; width:18px; height:20px; margin-right:15px; cursor:pointer;}
.player .contPlayer .btPlay.pause{background-position:right top;}
.player .contPlayer .progress{float:left; width:315px; height:3px; background-color:#FFF; margin-top:8px; margin-right:15px; position:relative; cursor:pointer;}
.player .contPlayer .progress .barProgress{position:absolute; width:0px; height:3px; background-color:#760028;}
.player .contPlayer .time{float:left; margin-right:20px; font-size:16px; font-family:VAGRoundedStd-Light; color:#fff; width:50px; text-align:left;}
.player .contPlayer .volume{float:left; cursor:pointer;}
.player .contPlayer .volume .barVolume{float:left; width:5px; height:20px; background-color:#fff; margin-right:4px;}
.player .contPlayer .volume .barVolume.ativo{ background-color:#933a1a;}

#audios .contAudios {float:left; width:677px; padding-left:13px; height:356px; background-color:#FFF; border:2px solid #f58220; border-radius:15px; margin:-37px 0 0 35px; position:relative; z-index:10;}
#audios .col {float:left; width:130px; margin:10px 0px 0 4px;}
#audios .btAudio {float:left; width:130px; height:26px; line-height:25px; font-family:VAGRoundedStd-Bold; text-indent:15px; font-size:19px; color:#f58220; margin-bottom:2px; cursor:pointer; background:url('../imagens/icon_audio.png') no-repeat 104px center; border-radius:15px;  letter-spacing:1px;}
#audios .btAudio.ativo {background-color:#f58220; color:#fff;}
#audios .btAudio:hover {background-color:#f58220; color:#fff;}

#audios .imgDir{background-color:#f58220; float:left; width:282px; border-radius:10px;  margin:-193px 0 0 -25px; position:relative; z-index:5; overflow:hidden;}
#audios .imgDir .titulo{font-size:19px; font-family:VAGRoundedStd-Bold; color:#fff; text-align:center; float:left; width:282px; margin:11px 0 3px 0px; text-transform:uppercase; letter-spacing:1px; height:50px;}
#audios .imgDir .imgAudio{margin:-13px 0 -26px -28px;}
#audios .imgDir .colunas{float:left; width:250px; margin:2px; background-color:#FFF;  border-radius:10px; padding:13px 0px 21px 28px; height:414px; overflow:hidden}
#audios .imgDir .colunas .col{width:111px; margin:38px -16px 0 15px;}
#audios .imgDir .btAudio {width:110px; background-position:86px center;}

#audios .imgDir .botoes {float:left; margin-top:-4px; padding:10px 8px 8px;}
#audios .imgDir .btImgDir {width:133px; height:30px; background-color:#d67100; float:left; text-align:center; font-family:VAGRoundedStd-Bold; color:#af5c00; line-height:30px; font-size:14px; letter-spacing:1px; cursor:pointer}
#audios .imgDir .btImgDir:hover {background-color:#af5c00; color:#fff;}
#audios .imgDir .btImgDir img{display:none; margin-top:-13px}

#audios .imgDir .bdAtivo {background-color:#af5c00; color:#fff;}
#audios .imgDir .bdAtivo  img{display:block; margin-top:-13px}




/*
#audios .col2 {float:left; width:111px; margin:38px -16px 0 15px;}

#audios .contAudios .col{float:left; margin:10px 0px 0 2px; width:113px; }

#audios .btAudio .imgDir {height:30px;}

*/


/*////////READING///////*/
.chat {float:left; width:459px; margin-right:6px; overflow:hidden;}
.blog {float:left; width:459px; margin-right:0; overflow:hidden;}
#reading .tit{float:left; width:459px; height:58px; line-height:58px; color:#7f755d; font-family:VAGRoundedStd; font-size:17px; text-indent:13px; background-color:rgba(255,255,255,.7); margin-bottom:5px;}
#reading .imgChat{ float:left; width:459px; height:194px; background-image:url('../imagens/img_readinggenres_chat.jpg');}
#reading .imgBlog{ float:left; width:459px; height:194px; background-image:url('../imagens/img_readinggenres_blog.jpg');}
#reading .btsSubtitles{ float:left; width:465px; margin-right:-5px;}
#reading .btSub{ float:left; width:230px; margin-right:1px; background:url('../imagens/bt_play_reading_genres.png') no-repeat 10px center rgba(0,0,0,.4); font-family:VAGRoundedStd-Light; color:#fff; font-size:1em; height:33px; line-height:33px; text-indent:35px; cursor:pointer; }
#reading .btAtivity{ float:left; width:459px; background:url('../imagens/icon_check.png') no-repeat 10px center rgba(0,0,0,.4); font-family:VAGRoundedStd-Light; color:#fff; font-size:1.05em; height:33px; line-height:33px; text-indent:35px; cursor:pointer; margin-top:8px;}

#tudo .btAtivo {background-color:rgba(0,0,0,.7) ;}
#tudo .btAtivoClick {background-color:rgba(0,0,0,.7);}
 
#lightbox {position:absolute; width:100%; height:100%; background-color:rgba(0,0,0,.85); z-index:1000; display:none;}
#lightbox>div{display:none;}
#lightbox .ativities .btFechar	{position:absolute; display:block; width:42px; height:39px; background-image:url('../imagens/bt_fechar.png'); top:111px; left:auto; right:0; cursor:pointer;}
#lightbox .ativities .contAtv 	{position:absolute; display:block; width:1024px; height:600px; top:150px;  left:0; background-color:#dce8b0; }
#lightbox .ativities .contAtv iframe {display:block; overflow:hidden; width:1024px; height:600px;}
#lightbox .creditos  .btFechar	{position:absolute; display:block; width:42px; height:39px; background-image:url('../imagens/bt_fechar_creditos.png'); top:0; left:auto; right:0; cursor:pointer; z-index:3;}
#lightbox .creditos .contCredito{position:absolute; display:block; width:1024px; height:786px; background: url('../imagens/creditos.jpg') no-repeat; }
#lightbox .video  .btFechar		{position:absolute; display:block; width:42px; height:39px; background-image:url('../imagens/bt_fechar.png'); top:46px; left:auto; right:110px; cursor:pointer; z-index:3;}
#lightbox .video .contVideo 	{position:absolute; display:block; width:800px; height:600px; top:84px;  left:112px; background-color:#000; border:1px solid #df8e4b;  z-index:5; overflow:hidden;}
#lightbox .video .contVideo video {position:absolute; top:0; left:0; width:800px; height:600px; z-index:5;}
#lightbox .video .contVideo .controls {position:absolute; display:block; width:800px; height:60px; background-color:rgba(223,142,75,.9); top:auto; left:0; bottom:-60px; z-index:10;}
#lightbox .video .contVideo .controls .btVoltar {float:left; width:21px; height:21px; background-image:url('../imagens/bt_voltar_audio.png'); margin:20px 0 0 16px; cursor:pointer;}
#lightbox .video .contVideo .controls .btPlay {float:left; width:18px; height:20px; background-image:url('../imagens/bt_play_audio.png'); margin:20px 0 0 10px; background-position:left top; cursor:pointer;}
#lightbox .video .contVideo .controls .btPlay.pause {background-position:right top;}
#lightbox .video .contVideo .controls .progress {float:left; width:570px; height:3px; background-color:#FFF; margin:30px 0 0 15px; position:relative; cursor:pointer;}
#lightbox .video .contVideo .controls .progress .barProgress {display:block; position:absolute; top:0; left:0; width:0px; height:3px; background-color:#933a1a; }
#lightbox .video .contVideo .controls .volume{float:left; cursor:pointer; margin:20px 0 0 20px;}
#lightbox .video .contVideo .controls .volume .barVolume{float:left; width:5px; height:20px; background-color:#fff; margin-right:4px;}
#lightbox .video .contVideo .controls .volume .barVolume.ativo{ background-color:#933a1a;}
#lightbox .video .contVideo .controls .btAmpliar{float:left; width:35px; height:22px; background-image:url('../imagens/bt_full_view.png'); margin:20px 0 0 30px; cursor:pointer;}
#lightbox .games .contGames { position:absolute; width:800px; height:600px; top:120px;  left:112px; background-color:#fff; border:1px solid #ffffff;  z-index:5; overflow:hidden;}
#lightbox .games .btFechar  { position:absolute; display:block; width:42px; height:39px; background-image:url('../imagens/bt_fechar.png'); top:82px; left:auto; right:110px; cursor:pointer; z-index:3;}
#lightbox #msgmIe {position:absolute; display:block; width:1024px; color:#ff0; font-family:Arial; font-size:40px; line-height:50px; height:206px; top:0; left:0; bottom:0; margin:auto; text-align:center; font-weight:bold;}
#lightbox #msgmIe  img{margin:auto; cursor:pointer}


/*////////KARAOKE///////*/
#karaoke  .contAtvs {float:left; margin:310px 0 0 50px; text-align:center; width:936px;}
#karaoke .contAtvs .unidad {display:inline-table; width:187px; height:192px; margin-right:6px; margin-top:0; vertical-align:top;}
#karaoke .contAtvs .unidad  .titUnidad{float:left; width:225px; height:58px; background-image:url('../imagens/bg_actividade_karaoke.png'); text-align:center; line-height:58px; color:#fff; font-family:VAGRoundedStd-Bold; font-size:20px; margin-bottom:3px;}
#karaoke .contAtvs .unidad  .btAtv{float:left; width:225px; height:31px; background-color:#FFF; text-align:center; line-height:34px; color:#fff; font-family:VAGRoundedStd-Bold; font-size:13px; color:#f58220; margin:0 -2px 2px; border-radius:20px; cursor:pointer;  letter-spacing:1px;}
#karaoke .contAtvs .unidad  .btAtv:hover{background-color:#f58220; color:#FFF;}





@font-face {
	font-family: 'VAGRoundedStd-Black';
	src: url("fontes/VAGRoundedStd-Black.woff") format("woff");
}

@font-face {
	font-family: 'VAGRoundedStd-Bold';
	src: url("fontes/VAGRoundedStd-Bold.woff") format("woff");
}
@font-face {
	font-family: 'VAGRoundedStd-Light';
	src: url("fontes/VAGRoundedStd-Light.woff") format("woff");
}
@font-face {
	font-family: 'VAGRoundedStd-Thin';
	src: url("fontes/VAGRoundedStd-Thin.woff") format("woff");
}