body {color: #1e90c1; margin:0; padding:0; font-family: exobold;}
h1 {display: inline-block;}
h2 {display: inline-block;}
img {-moz-user-select: none; -webkit-user-drag: none;}

span.large-num span:not(:last-child) { margin-right: 5px; }

div#container {width: 1024px; height: 768px; position: relative; 
    background-image: url('../imgs/img_bg.jpg'); overflow: hidden;

}
div#container > div.full {width: 100%; height: 100%; position: absolute;}

.hide {display: none;}
.clearfix {clear: both}
img.close:hover {cursor: pointer; }
img.btn { cursor: pointer; z-index: 10; position:relative; z-index: 10}

/* apresentação */
div.apresentacao {text-align: center; z-index: 30; background-color: white; z-index: 50}
div.apresentacao img.bg {margin-top: 120px;}
div.apresentacao img.btn {position: relative; top: -150px;}

/* cabeçalho */
div.header img.logo {margin-right: 50px; top: -37px; position: relative; right: 14px; 
    visibility: hidden; width: 150px; height: 134px}
div.header img.btn {margin: 0 10px; top: -60px;}

/* páginas */
div.page img.g-m {margin: 0 auto; display: block; top: -45px; z-index: 20; }
div.grafico { top: 100px; position: absolute; }
div.grafico p.primeiro {width: 890px; height:192px; color: #34ade1; font-size: 25px; position: relative; padding-left: 60px; font-family: exomedium;}
div.grafico p.segundo {width: 490px; height: 352px; color: #34ade1; font-size: 20px; position: relative; padding-left: 60px; font-family: exomedium; padding-top: 30px;}
img.img-grafico {left: 592px; position: absolute; top: 290px;} 
ul.values {list-style-type: none; font-size: 15px; left: 762px; top: 320px; font-family: exomedium; position: absolute; padding: 0px; line-height: 20px; width: 250px;}
ul span {color: #db4747;}

/* mapa */
div.mapa div.img-mapa {background-image: url('../imgs/img_mapa_brasil_v4.png'); height: 620px; width: 746px; top: -50px; position: relative; right: 1px;}
div.mapa p.clique-icone {
	width: 350px;
	top: 107px;
	left: 670px;
	position: absolute;
	font-size: 20px;
}
div.mapa div.img-mapa img {position: absolute; cursor: pointer;}
div.mapa div.img-mapa img.norte {top: 125px; left: 224px; }
div.mapa div.img-mapa img.nordeste {top: 199px; left: 475px; }
div.mapa div.img-mapa img.sulsudeste {top: 338px; left: 328px; }

div.mapa div.regionais {width: 960px; height:660px; z-index: 30; position: absolute; bottom: 0; left: 32px;}
div.mapa div.regionais > img {position: absolute; z-index: 40;}
div.mapa div.regionais > img.active {pointer-events: none;}
div.mapa div.mapa-regional {} 
div.mapa div.info-regional {width: 430px; float: right;} 
div.mapa div.info-regional img.close {position: absolute; margin: 5px 5px 0 0; left: 885px;}
div.mapa div.clique {font-size: 22px; top: 22px; position: absolute;}
div.mapa div.capacidade {color: #f47c20; font-size: 20px; top: 140px; position: absolute;}
div.mapa div.usina-nome {font-size: 20px; top: 167px; position: absolute;}
div.mapa div.usina-desc {font-family: exomedium; font-size: 20px; top: 220px; position: absolute; width: 390px;}
div.mapa img.legenda {top: 590px; left: -524px; position: relative;}
div.mapa p.txt-leg {top: 573px; left: 70px; position: absolute; color: #e93400; font-size: 22px; text-transform: uppercase; width: 150px;}
div.mapa img.bt-gr {top: 611px; left: 363px; position: absolute;}

/*hidrelétrica*/
div.hidreletrica > div {position:absolute;}
div.hidreletrica div.ilustracao {background-image:url('../imgs/ilu_funcionamento_base.png'); height:619px; width: 1024px; z-index: 50; top: 150px;}
div.hidreletrica div.bg {background-image: url('../imgs/ilu_funcionamento_agua.png'); height:479px; width: 1024px; top: 270px;}
div.hidreletrica div.raios {background-image: url('../imgs/ilu_funcionamento_eraio.png'); 
    height: 70px; width: 183px; position: absolute; top: 162px; right: 320px;}

div.hidreletrica div.turbina {background-image: url('../imgs/ilu_funcionamento_turbina.png'); 
    height: 18px; width: 82px; position: absolute; top: 439px; right: 372px;}

div.hidreletrica div.espuma {background-image: url('../imgs/ilu_funcionamento_bolhas.png'); 
    height: 70px; width: 136px; position: absolute; top: 438px; right: 62px;}

div.hidreletrica div.setas { position: absolute; }
div.hidreletrica div.setas img { position: absolute; }
div.hidreletrica div.setas img:not(:last-child) { -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); transform: rotate(30deg); }

div.hidreletrica div.info-labels > div {cursor: pointer; position:absolute; width: 120px; margin: 0 0 0 15px; }
/*div.hidreletrica div.info-labels > div:hover {font-size: 120%}*/
div.hidreletrica div.nome {font-size: 22px; top: 12px; position: absolute; right: 0; width: 220px;}
div.hidreletrica div.desc {font-family: exomedium; font-size: 19px;  top: 61px; position: absolute; right: 0; width: 220px;}
div.info-labels [componente= represa] {color: white;}
div.info-labels [componente= conduto] {color: white;}
div.info-labels [componente= turbina] {color: white;}

/* puzzle */
div.puzzle div.pros-cons {text-align: center}
div.puzzle div.pros-cons > div {width: 352px; height:421px; display: inline-block; margin:0 40px;}
div.puzzle div.pros-cons div.pros {background-image: url('../imgs/img_exercicio_pros_v2.png');}
div.puzzle div.pros-cons div.cons {background-image: url('../imgs/img_exercicio_contras_v2.png');}
div.puzzle div.pros-cons > div > div {margin: 88px 0 0 -10px}
div.puzzle div.test {height: 45px; margin-bottom: 23px;}
div.puzzle div.test > div {display: inline-block; /*background-color: black; opacity: 0.5*/}
div.puzzle div.answer {margin-right: 12px; width: 45px; height: 45px;}
div.puzzle div.droppable {width:255px; height: 45px;}
div.puzzle h1 {font-family: 'exomedium'; margin: -30px 100px 20px; text-align: left; 
    font-size: 18px
}
div.puzzle div.fake-bg {width: 1024px; height: 149px; 
    background-image: url('../imgs/fake-bg.jpg'); position: absolute; bottom:0; 
    left: 0
}
div.puzzle img.fake-bg {position: absolute; bottom: 0px; left: 0px; z-index: 20}

div.puzzle div.items-wrapper {width: 786px; margin: 40px auto 0;}
div.puzzle div.items {color: #dd5c32; height: 120px; max-width: 1310px; min-width: 786px;
    font-size:20px; text-align: center; font-family: 'exomedium';
}
div.puzzle div.item { background-color: white; border-radius: 3px;
    font-size: 15px; color: red; width:252px; height: 45px; cursor: move; float: left; 
    padding:0; font-family: 'exomedium'; text-align: center; line-height: 15px; margin:5px;
}
div.puzzle div.item > div {height:41px; width: 241px; display: table-cell; 
    vertical-align: middle; padding: 3px 5px 0;
}


div.puzzle div.item[item="5"] {font-size: 13px; line-height: 18px}
div.puzzle img.conferir,
div.puzzle img.refazer {margin: 0 auto; /*display: block;*/ top: -60px; left: 395px;}

/* fontes */
@font-face {
    font-family: 'exobold';
    src: url('../fonts/exo-bold-webfont.eot');
    src: url('../fonts/exo-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/exo-bold-webfont.woff') format('woff'),
         url('../fonts/exo-bold-webfont.ttf') format('truetype'),
         url('../fonts/exo-bold-webfont.svg#exobold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'exomedium';
    src: url('../fonts/exo-medium-webfont.eot');
    src: url('../fonts/exo-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/exo-medium-webfont.woff') format('woff'),
         url('../fonts/exo-medium-webfont.ttf') format('truetype'),
         url('../fonts/exo-medium-webfont.svg#exomedium') format('svg');
    font-weight: normal;
    font-style: normal;
}