/*//////////////////////////////////////////////
///// PERSONALIZAÇÃO JOGO MONTAR HISTÓRIAS /////
//////////////////////////////////////////////*/

/*Font personalizada*/
@font-face {
  font-family: 'komika_axisregular';
  src: url('../fonts/KOMIKAX_-webfont.eot');
  src: url('../fonts/KOMIKAX_-webfont.eot?#iefix') format('embedded-opentype'),
  url('../fonts/KOMIKAX_-webfont.woff') format('woff'),
  url('../fonts/KOMIKAX_-webfont.ttf') format('truetype'),
  url('../fonts/KOMIKAX_-webfont.svg#komika_axisregular') format('svg');
  font-weight: normal;
  font-style: normal;
  box-shadow: 0 1px 0 0 rgba(255,255,255,.7) inset, 0 0 0 3px rgba(0,0,0,.2);
  border-radius: 10px;
  font-family: 'komika_axisregular';
}

/*Área do Jogo*/
#content {
  position: relative;
  display: block;
  width: 800px;
  height: 600px;
  background: url("../../img/MontarHistorias/background.jpg");
}

/*Topo*/
.topo-mh {
  display: block;
  width: 100%;
  height: 60px;
}

/*Ítens do Menu*/
.topo-mh-item {
  float: left;
  display: inline-block;
  width: 200px;
  height: 100%;
}
.topo-mh-item.b-personagem {
  border-top: 3px solid #417522;
  background: #6bc32e;
}
.topo-mh-item.b-baloes {
  border-top: 3px solid #642a02;
  background: #fe8920;
}
/*.topo-mh-item.b-textos {
  border-top: 3px solid #6f1e1d;
  background: #e31919;
}*/
.topo-mh-item.b-formato {
  border-top: 3px solid #1d5a77;
  background: #4dbcea;
}
.topo-mh-item.b-cenarios {
  border-top: 3px solid #7f6319;
  background: #ffd05a;
}

/*Figuras de cada menu*/
.topo-mh-item figure {
  width: 160px;
  height: 60px;
  margin: 0 auto;
}
.topo-mh-item figure.personagem {
  background: url("../../img/MontarHistorias/sprite.png") no-repeat;
}
.topo-mh-item figure.baloes {
  background: url("../../img/MontarHistorias/sprite.png") no-repeat 0 -60px;
}
/*.topo-mh-item figure.textos {
  background: url("../../img/MontarHistorias/sprite.png") no-repeat 0 -120px;
}*/
.topo-mh-item figure.formato {
  background: url("../../img/MontarHistorias/sprite.png") no-repeat 0 -180px;
}
.topo-mh-item figure.cenarios {
  background: url("../../img/MontarHistorias/sprite.png") no-repeat 0 -240px;
}

/*Ítens Sub-menu*/
.topo-mh-item .wharever {
  display: none;
}

/*.topo-mh-item:hover .wharever,*/
.topo-mh-item .wharever.active {
  position: absolute;
  float: left;
  display: block;
  width: 800px;
  height: 104px;
  top: 60px;
  left: 0;
  z-index: 9999;
}

/*Campo de ítem de cada menu*/
.b-formato .wharever-formato {
  border-bottom: 3px solid #1d5a77;
  background: #4dbcea;
}
.b-cenarios .wharever-cenarios {
  border-bottom: 3px solid #7f6319;
  background: #ffd05a;
}
.b-personagem .wharever-personagens {
  border-bottom: 3px solid #417522;
  background: #6bc32e;
}
/*
.b-textos:hover .wharever-textos {
  border-bottom: 3px solid #6f1e1d;
  background: #e31919;
}*/
.b-baloes .wharever-baloes {
  border-bottom: 3px solid #642a02;
  background: #fe8920;
}



/*////////////////////////////
////////// CAROUSEL //////////
////////////////////////////*/

.wharever {
  position: relative;
  display: block;
  width: 800px;
  height: 104px;
  overflow: hidden;
  margin: 0 auto 0;
}
.wharever .jcarousel-wrapper {
  float: left;
  width: 710px;
  margin: 10px 0;
}
.wharever .jcarousel-wrapper .jcarousel {
  position: relative;
  float: left;
  width: 100%;
  clear: both;
  overflow: hidden;
}
.wharever .jcarousel-wrapper .jcarousel .flexbox {
  position: relative;
  width: 20000em;
  margin: 0;
  padding: 0;
  list-style: outside none none;
}
.wharever .jcarousel-wrapper .jcarousel .flexbox .quadro {
  float: left;
  margin: 0 5px;
}
.wharever .jcarousel-wrapper .jcarousel .flexbox .quadro .img {
  display: block;
  height: 50px;
  margin: 0 auto 5px;
}
.wharever-baloes .jcarousel-wrapper .jcarousel .flexbox .quadro .img {
  margin: 0 auto 0;
}

/*Particularidades de tamanho do quadro*/
.wharever-formato .jcarousel-wrapper .jcarousel .flexbox .quadro,
.wharever-baloes .jcarousel-wrapper .jcarousel .flexbox .quadro {
  width: 226px;
}
.wharever-cenarios .jcarousel-wrapper .jcarousel .flexbox .quadro {
  width: 132px;
}
.wharever-personagens .jcarousel-wrapper .jcarousel .flexbox .quadro {
  width: 167px;
}

/*Particularidades de tamanho da imagem*/
.wharever-formato .jcarousel-wrapper .jcarousel .flexbox .quadro .img,
.wharever-baloes .jcarousel-wrapper .jcarousel .flexbox .quadro .img {
  width: 115px;
}
.wharever-baloes .jcarousel-wrapper .jcarousel .flexbox .quadro .img {
  height: 80px;
}
.wharever-cenarios .jcarousel-wrapper .jcarousel .flexbox .quadro .img,
.wharever-personagens .jcarousel-wrapper .jcarousel .flexbox .quadro .img {
  width: 75px;
}

/*Particularidades de texto*/
.wharever .jcarousel-wrapper .jcarousel .flexbox .quadro p {
  margin: 0;
  font-family: "komika_axisregular";
  font-size: 12px;
  line-height: 14px;
  text-align: center;
}
.wharever-formato .jcarousel-wrapper .jcarousel .flexbox .quadro p {
  color: #1d5a77;
}
.wharever-cenarios .jcarousel-wrapper .jcarousel .flexbox .quadro p {
  color: #7f6319;
}
.wharever-personagens .jcarousel-wrapper .jcarousel .flexbox .quadro p {
  color: #417522;
}
.wharever-baloes .jcarousel-wrapper .jcarousel .flexbox .quadro p {
  color: #642a02;
}

/*Setas de navegação carousel*/
.wharever .jcarousel-control-prev,
.wharever .jcarousel-control-next {
  display: block;
  width: 45px;
  height: 70px;
  margin: 16.5px 0;
  color: transparent;
  text-indent: -9999px;
  background: #999;
}
/*Navegação Setas Slider*/
.wharever .jcarousel-control-prev.inactive,
.wharever .jcarousel-control-next.inactive {
  opacity: .2;
}
.wharever .jcarousel-control-prev {
  float: left;
}
.wharever .jcarousel-control-next {
  float: right;
}
.wharever-cenarios .jcarousel-control-prev,
.wharever-baloes .jcarousel-control-prev {
  background: url("../../img/MontarHistorias/setas.png") no-repeat;
}
.wharever-cenarios .jcarousel-control-next,
.wharever-baloes .jcarousel-control-next {
  background: url("../../img/MontarHistorias/setas.png") no-repeat -47px 0;
}
.wharever-formato .jcarousel-control-next {
  background: url("../../img/MontarHistorias/setas.png") no-repeat -47px -140px;
}
.wharever-formato .jcarousel-control-prev {
  background: url("../../img/MontarHistorias/setas.png") no-repeat 0 -140px;
}
.wharever-personagens .jcarousel-control-next {
  background: url("../../img/MontarHistorias/setas.png") no-repeat -47px -70px;
}
.wharever-personagens .jcarousel-control-prev {
  background: url("../../img/MontarHistorias/setas.png") no-repeat 0 -70px;
}



/*///////////////////////////////
////////// PERSONAGENS //////////
///////////////////////////////*/

/*Escolha das posições do personagem*/
.escolher-personagem {
  display: none;
}
.escolher-personagem.active {
  position: absolute;
  display: block;
  width: 800px;
  left: 0;
  margin-top: 89px;
  margin-left: 0;
  background: #75ad46;
  z-index: 9999;
}
.escolher-personagem .jcarousel-control-prev,
.escolher-personagem .jcarousel-control-next {
  display: block;
  width: 45px;
  height: 50px;
  margin: 199px 0;
  color: transparent;
  text-indent: -9999px;
  background: #999;
}
.escolher-personagem .jcarousel-control-prev {
  float: left;
  background: url("../../img/MontarHistorias/setas.png") no-repeat 0 -80px;
}
.escolher-personagem .jcarousel-control-next {
  float: right;
  background: url("../../img/MontarHistorias/setas.png") no-repeat -45px -80px;
}
.escolher-personagem .jcarousel-wrapper {
  float: left;
  width: 710px;
  margin: 8px 0;
}
.escolher-personagem .jcarousel-wrapper .jcarousel {
  position: relative;
  float: left;
  width: 100%;
  clear: both;
  overflow: hidden;
}
.escolher-personagem .jcarousel-wrapper .jcarousel .flexbox {
  position: relative;
  width: 60em;
  margin: 0;
  padding: 0;
  list-style: outside none none;
}
.escolher-personagem .jcarousel-wrapper .jcarousel .flexbox .quadro {
  position: relative;
  float: left;
  display: inline-block;
  width: 167px;
  height: 206px;
  margin: 5px;
}
.escolher-personagem .jcarousel-wrapper .jcarousel .flexbox .quadro:hover::after {
  content: "Inserir";
  position: absolute;
  display: block;
  width: 167px;
  bottom: 0;
  overflow: visible;
  font-family: "komika_axisregular";
  font-size: 14px;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 0 #417522;
}
.escolher-personagem .jcarousel-wrapper .jcarousel .flexbox .quadro img {
  display: block;
  margin: 0 auto;
  width: 100%;
}



/*///////////////////////////////////
////////// ÁREA DA TIRINHA //////////
///////////////////////////////////*/

#corpo {
  position: relative;
  float: left;
  display: block;
  width: 100%;
  height: 385px;
  margin-top: 110px;
}

/*Título da Tirinha*/
#corpo input.titulo-historia {
  float: left;
  width: 95%;
  margin: 0 1% 10px;
  padding: 5px 10px;
  font-family: komika_axisregular;
  font-size: 18px;
  color: #333;
  text-transform: uppercase;
  border: 1px solid #333;
  background: #fff;
  text-align: center;
}

/*Tirinhas*/
#corpo .conteudo {
  position: relative;
  float: left;
  display: block;
  width: 100%;
  height: 325px;
  background: #f2f5d3;
}
#corpo .conteudo .objeto {
  position: absolute;
  z-index: 2;
}
#corpo .conteudo .objeto .texto_balao {
  position: absolute;
  display: block;
  width: 70%;
  height: 50%;
  max-height: 50%;
  top: 33%;
  left: 47%;
  overflow: hidden;
  margin: 5px;
  font-family: komika_axisregular;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  border: 0;
  resize: none;
  transition: all .1s linear 0s;
  transform: translate(-50%, -50%);
  background: transparent;
  z-index: 3;
}
#corpo .conteudo .li-tirinha {
  position: absolute;
  width: 100%;
  height: 325px;
  top: 0;
}



/*//////////////////////////
////////// BOTÕES //////////
//////////////////////////*/

/*Enviar e Imprimir*/
#enviar, 
#corpo .enviar,
#corpo .imprimir, 
#corpo .down {
  float: right;
  display: block;
  margin: 8px 10px;
  padding: 5px 15px 8px;
  font-family: komika_axisregular;
  font-size: 16px;
  color: #fff;
  line-height: 18px;
  text-transform: uppercase;
  border-top: 2px solid #fff;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 5px;
  text-decoration: none;
  letter-spacing: 1px;
}
#enviar:hover, 
#corpo .enviar:hover,
#corpo .imprimir:hover, 
#corpo .down:hover {
  cursor:pointer;
}
#enviar, 
#corpo .enviar {
  text-shadow: 2px 2px 0 #417522;
  box-shadow: 0 0 0 2px #417522;
  background-color: #6bc32e;
}
#enviar:hover, 
#corpo .enviar:hover {
  background-color: #519B1E;
}
#corpo .imprimir {
  text-shadow: 2px 2px 0 #642a02;
  box-shadow: 0 0 0 2px #642a02;
  background-color: #fe8920;
  height: 20px;
}
#corpo .imprimir:hover {
  background-color: #DA6A07;
}
#corpo .down {
  text-shadow: 2px 2px 0px #815D02;
  box-shadow: 0px 0px 0px 2px #815D02;
  background-color: #FFB600;
}
#corpo .down:hover {
  background-color: #E9A703;
}

/*Cancelar escolha dos personagens*/
.btn_back {
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 8px 10px;
  padding: 5px 5px 8px;
  font-family: komika_axisregular;
  font-size: 13px;
  color: #fff;
  line-height: 18px;
  text-shadow: 2px 2px 0 #417522;
  text-transform: uppercase;
  border-top: 2px solid #fff;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 5px;
  box-shadow: 0 0 0 2px #417522;
  background: #6bc32e;
}

/*Redimensionar personagem*/
.objeto .ui-icon-gripsmall-diagonal-se {
  display: none !important;
}
.objeto:hover .ui-icon-gripsmall-diagonal-se {
  display: block !important;
  width: 32px;
  height: 22px;
  background: url("../../img/MontarHistorias/botoes-edit.png");
  background-position: -128px 0;
}
.objeto .ui-resizable {
  display: none;
}
.objeto:hover .ui-resizable {
  display: block;
}

/*Botões deletar e flip*/
.objeto .btn_edit {
  position: absolute;
  display: none;
  //width: 32px;
  //top: 0;
  width: 100%;
  height: 100%;
  bottom: 0;
  right: 0;
  z-index: 3;
}
.objeto:hover .btn_edit {
  display: block;
}
.objeto .btn_edit .btn_delete,
.objeto .btn_edit .btn_flip {
  position: relative;
  float: left;
  display: block;
  width: 32px;
  height: 22px;
  left: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: url("../../img/MontarHistorias/botoes-edit.png");
  background-color: transparent;
  z-index: 3;
}
.objeto .btn_edit .btn_delete {
  background-position: 0 0;
  position: absolute;
  top: -10px;
  right: 0px;
  left: auto;
}
.objeto .btn_edit .btn_flip {
  background-position: -160px 0;
  position: absolute;
  bottom: 0;
}

/*Virar imagem*/
img.flip {
  -webkit-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1);
  -ms-filter: "FlipH";
  filter: FlipH;
}

/*Imprimir história*/
@media print {
  * {
    visibility:hidden;
  }
  #conteudo, #content, #corpo input, #img_formato, .resize {
    visibility:visible;
  }
}

/*Formulário de envio: Criar História*/
.window {
  position:absolute;
  display: none;
  width:300px;
  padding:10px;
  border: 2px solid #000;
  border-radius:10px;
  background:#fff;
  z-index:10900;
}
#mascara {
  position:absolute;
  display: none;
  top:0;
  left:0;
  opacity: .9 !important;
  background-color:#000;
  z-index:10000;
}
.fechar {
  float: right;
  display: block;
  width: 21px;
  height: 22px;
  color: transparent;
  text-indent: -9999px;
  background: url("../../img/MontarHistorias/botoes-edit.png");
  background-position: -198px 0;
}
#nome_crianca, #idade_crianca, #cidade_estado,
#email_crianca {
  width: 275px;
  margin: 10px 0 5px;
  padding: 10px;
  font-family: komika_axisregular;
  font-size: 13px;
  border: 1px solid #6bc32e;
  border-radius: 5px;
}
#enviar {
  margin: 8px 5px;
}