html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

header {
position: relative; 
clear: both;
}

.header {
text-align: center;
background: #8CE7DE;
padding-top: 0.3em;
padding-bottom: 0.1em;
padding-left: 0.5em;
padding-right: 1em;
border-bottom: 0px solid #FF0000;
}

#top-banner-center {
border: 0px solid  #ccc;
margin: .5em;
bac1kground-color: #FFCC66;
text-align: center;
line-height: 190%;
font-size: 15pt;
font-family: 'PT Sans', Arial, sans-serif;
}

#top-anuncio-left {
margin: .5em;
padding-left: 1.45em;
line-height: 1.3;
text-align: left;
padding-top: 5px;
font-size: 14px;
color: #808080;
font-family: 'PT Sans', Arial, sans-serif;
}

#anuncio-topo {
border-bottom: 1px solid  #DADADA;
padding-top: 12px;
padding-bottom: 20px;
}

#imagem-fixed {
color: #808080;
position: fixed;
bottom: 10px;
right: 5px;
}

body {
margin: 0 auto;
}

.left-column {
border: 0px solid  #ccc;
padding-left: 1.25em;
padding-right: 1.25em;
padding-bottom: 0.25em;
margin: .5em;
background: #ffffff;
}

.right-column {
border-left: 0px solid  #ccc;
padding-left: 0.3em;
margin: .5em;
}

.footer {
position: relative; 
clear: both;
padding-top: 1em;
padding-bottom: 0em;
padding-left: 0.6em;
padding-right: 0.6em;
}

.menu-rodape-orange {
font-size: 1.35em;
font-family: 'PT Sans', Arial, sans-serif;
line-height: 1.5em;
text-align: left;
background-color: #CCFF99;
padding-left: 1px;
padding-right: 1px;
border-left: 0px solid #008000;
}

.menu-rodape-orange li {
display: block;
border-bottom: 1px solid #808080;
}

.menu-rodape-orange a {
display: block;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
text-decoration: none;
}

.menu-rodape-orange a:hover {
text-decoration: underline;
}

.menu-rodape-orange a:visited {
color: #0000FF;
}

.menu-rodape-orange li:hover {
background-color: #99FF33;
}

.nav {
list-style: none;
font-size: 1.4em;
font-family: 'PT Sans', Arial, sans-serif;
line-height: 2.2;
list-style-type: none;
margin-left: 0;
margin-bottom: 0;
padding-left: 0;
}

.nav > li,
.nav > li > a {
display: inline-block;
*display: inline;
zoom: 1;
}

.inline-items {
margin-top: 0;
}

.inline-items li {
margin-left: 0;
border-left: 1px solid #C0C0C0;
padding-left: 10px;
padding-right: 10px;
}

.inline-items li:first-child {
margin-left: 0;
border: none;
padding-left: 0;
padding-right: 10px;
}

.inline-items li:last-child {
padding-right: 0;
}

p {
font-size: 1.3em;
font-family: 'PT Sans', Arial, sans-serif;
line-height: 1.6;
}

p.links{
font-size: 1.3em;
font-family: 'PT Sans', Arial, sans-serif;
line-height: 2.1;
}

p.medio{
font-size: 1.8em;
font-family: 'PT Sans', Arial, sans-serif;
line-height: 0.5;
}

p.big{
font-size: 2.3em;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
line-height: 2.1;
}

p.destaque{
font-size: 2.3em;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
line-height: 1.3;
}

p.contar{
font-size: 1.3em;
font-family: 'PT Sans', Arial, sans-serif;
line-height: 3.8;
}

p.junto{
line-height: 1.1;
}

p.regra-tres{
font-size: 1.4em;
font-family: 'PT Sans', Arial, sans-serif;
line-height: 1.6;
}

h4{
font-size: 1.3em;
font-family: 'PT Sans', Arial, sans-serif;
line-height: 1;
}

h3{
font-size: 1.5em;
font-family: 'PT Sans', Arial, sans-serif;
line-height: 1.8;
}

h2{
font-size: 1.9em;
font-family: 'PT Sans', Arial, sans-serif;
line-height: 1.5;
}

h1{
font-size: 2.1em;
font-family: 'PT Sans', Arial, sans-serif;
line-height: 1.5;
}

ul {
font-size: 1.3em;
font-family: 'PT Sans', Arial, sans-serif;
line-height: 2.3;
list-style-type: none;
}

ul.lateral {
font-size: 1.3em;
font-family: 'PT Sans', Arial, sans-serif;
line-height: 2.3;
list-style-type: square;
background-color: #ECECEC;
border-top: 5px solid #ECECEC;
border-bottom: 17px solid #ECECEC;
border-right: 1px solid #ECECEC;
}

.inline {
font-size: 1.35em;
line-height: 1.1em;
padding-left: 0;
margin-left: -5px;
list-style: ntryrtytrone;
}

.inline > li {
display: inline-block;
text-align: center;
padding-right: 5px;
padding-left: 5px;
padding-top: 10px;
padding-bottom: 10px;
}

.artigo-meio {
float: center;
border-left: 0px solid  #DADADA;
border-bottom: 0px solid  #DADADA;
padding-top: 35px;
padding-bottom: 15px;
}

#artigo-abaixo {
float: center;
border-left: 0px solid  #DADADA;
border-bottom: 0px solid  #DADADA;
padding-top: 15px;
padding-bottom: 35px;
font-size: 14px;
font-family: 'PT Sans', Arial, sans-serif;
line-height: 1.8;
color: #808080;
}

.anuncio-meio {
font-size: 14px;
color: #808080;
padding-top: 5px;
padding-bottom: 16px;
}

.lateral-abaixo {
float: center;
border-left: 0px solid  #DADADA;
border-bottom: 0px solid  #DADADA;
padding-top: 10px;
padding-bottom: 30px;
}

.float-l {
float: left;
}

.img-left {
float: left;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
}

input {
font-size: 1.1em;
font-family: arial, sans-serif;
}

button {
background-color: #FFCC00;
border: 7px solid #ffffff;
color: #000000;
padding: 20px;
text-align: center;
font-size: 20px;
font-family: "Arial", Georgia, Serif;
}

.contas {
width: 48px;
height:48px;
position: relative;
overflow: hidden;
background: #FFFF00;
}

.calculo-horas {
width: 52px;
height:45px;
border: 1px solid #C0C0C0;
text-align: center;
font-size: 1.2em;
font-family: arial, sans-serif;
font-weight: bold;
position: relative;
overflow: hidden;
background: #FFFF00;
}

.calculo-horas-brc {
width: 52px;
height:45px;
border: 1px solid #ffffff;
text-align: center;
font-size: 1.2em;
font-family: arial, sans-serif;
position: relative;
overflow: hidden;
background: #ffffff;
}

.numeros-arabicos {
width: 100px;
height: 60px;
position: relative;
overflow: hidden;
background: #FFCC66;
}

.numeros-romanos {
width: 170px;
height: 60px;
position: relative;
overflow: hidden;
background: #FFCC66;
}

.contas-maior {
width: 55px;
height:60px;
position: relative;
overflow: hidden;
background: #FFFF00;
}

.contas-sinais {
width: 30px;
height:40px;
position: relative;
overflow: hidden;
background: #FFFF00;
}

.continhas {
line-height: 5px;
}

.contas-dividir {
font-size: 1.6em;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
line-height: 1.6;
}

.regra-tres-input {
width: 90px;
height: 50px;
text-align: center;
font-size: 28px;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
background-color: #CCFF66;
}

.regra-tres-passo {
width: 110px;
height: 50px;
text-align: center;
font-size: 28px;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
background-color: #CCFF66;
}

.err-quiz {
font-size: 1.2em;
font-family: arial, sans-serif;
background-color: #FF6666;
}

/* Radio Buttons */

#pergunta {
clear: both;
padding: 1px;
margin: 0 10px;  
}

#resposta {
font-size: 1.3em;
font-family: 'PT Sans', Arial, sans-serif;
line-height: 1;
clear: both;
padding: 8px;
margin: 10 10px;
border: 1px solid #E4E4E4;
}

#solucao {
clear: both;
margin: 0 10px;
border-bottom: 20px solid #ffffff;
}

input[type=radio].css-checkbox {
position:absolute; z-index:-1000; 
left:-1000px; 
overflow: hidden; 
clip: rect(0 0 0 0); 
height:1px; 
width:1px; 
margin:-1px; 
padding:0; 
border:0;
}

input[type=radio].css-checkbox + label.css-label {
padding-left:55px;
height:50px; 
display:inline-block;
background-repeat:no-repeat;
background-position: 0 0;
font-size: 1.0em;
line-height: 1.3;
vertical-align:middle;
cursor:pointer;
background-color: #F5F5F5;
}

input[type=radio].css-checkbox:checked + label.css-label {
background-position: 0 -50px;
}

label.css-label {
background-image:url(../images/quiz-marca.png);
width: 100%;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

/******************** Palavras Escondidas *********************/ 

.palvr-digitada {
background-color:#FFFF00;
text-align:center;
width: 266px;
height:60px;
font-weight:bold;
font-size:30px;
padding:0px;
}

span.acerto{
font-weight:bold;
background-color:#CCFF66;
border-top: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
}

/******************** Caça Palavras ********************/

.caca-palavras {
margin: 10px 0 20px 0;
clear: both;
}
.caca-palavras #game-options {
  margin: 0 0 20px 0;
  }
.caca-palavras #game-options .navbar-inner {
  min-height: 5px;
}
.caca-palavras #game-options .navbar-inner #points {
  display: none;
}
.caca-palavras #game-options .navbar-inner .navbar-form #restart,
.caca-palavras #game-options .navbar-inner .navbar-form div,
.caca-palavras #game-options .navbar-inner .navbar-form select {
  margin-right: 0px;
  font-size: 100px;
}
.caca-palavras #game-options .navbar-inner #clock {
  font-size: 1px;
  line-height: 25px;
  display: none;
}
.caca-palavras #formato-palavras {
  position: relative;
  width: 100%;
  height: 100%;
}
.caca-palavras #word-search {
  z-index: 0;
  position: relative;
  padding: 0;
  top: 0;
}
.caca-palavras canvas {
  border: 1px solid #D4D4D4;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
}
.caca-palavras canvas#grid {
  z-index: 10;
}
.caca-palavras canvas#lines {
  z-index: 100;
}
.caca-palavras canvas#layer {
  z-index: 200;
}
.caca-palavras #soup-word-list {
  float: right;
  border: 0px solid #D4D4D4;
  position: relative;
  margin-top: 0px;
  margin-right: 50px;
  z-index: 500;
  width: 200px;
  overflow: auto;
  list-style-type: none;
  font-size: 20px;
  text-transform: uppercase;
}
.caca-palavras #soup-word-list li {
  margin: 0px 0px;
  padding-left: 0px;
}
.caca-palavras #soup-word-list li a {
  display: none;
}
.caca-palavras .crossed {
  text-decoration: line-through;
}
.caca-palavras .bad-crossed {
  text-decoration: line-through;
}

/******************** Sudoku ********************/

.sudoku-board-cell {
display: inline-block;
position: relative;
border: 1px solid #ddd;
background: white;
max-width: 11.11111%;
}
		
[data-board-size="9"].sudoku-board .sudoku-board-cell:nth-of-type(9n+1){
border-left-width: 2px;
border-left-color: #808080;
}

[data-board-size="9"].sudoku-board .sudoku-board-cell:nth-of-type(n):nth-of-type(-n+9){
border-top-width: 2px;
border-top-color: #808080;
}
		
[data-board-size="9"].sudoku-board .sudoku-board-cell:nth-of-type(3n){
border-right-width: 2px;
border-right-color: #808080;
}
		
[data-board-size="9"].sudoku-board .sudoku-board-cell:nth-of-type(n+19):nth-of-type(-n+27),
[data-board-size="9"].sudoku-board .sudoku-board-cell:nth-of-type(n+46):nth-of-type(-n+54),
[data-board-size="9"].sudoku-board .sudoku-board-cell:nth-of-type(n+73):nth-of-type(-n+81){
border-bottom-width: 2px;
border-bottom-color: #808080;
}

.sudoku-board-cell input {
background: none;
font-size: 19.2px;
font-size: 1.2rem;
text-align: center;
width: 2em;
max-width: 100%;
height: 2em;
border: 0;
position: relative;
z-index: 1; /*on top of candidates*/
}
			
.sudoku-board-cell .highlight-val {
color: #00d;
}			

.sudoku-board-cell .board-cell--error {
background: #d00;
color: #eee;
}
		
.sudoku-board-cell .candidates {
display: none; /*hidden by default*/
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
text-align: center;
font-size: .75em; /*1/3 /1.13 out of the 2*1.2em cell height*/
letter-spacing: -.5px;
font-family: monospace, sans-serif;
/*use as justify grid*/
line-height: 0;
text-align: justify;
}

.sudoku-board .candidates:after {
content: "";
display: inline-block;
width: 100%;
}
		
@media(max-width: 23em){
.sudoku-board 
.candidates {
letter-spacing: -2px;
}
}

.showCandidates .candidates {
display: block;
}

.sudoku-board .candidates div {
display: inline-block;
width: 20%;
line-height: 1.13;
vertical-align: top;
*display: inline;
*zoom: 1;
}

.candidate--highlight {
background-color: yellow;
}
				
.candidate--to-remove {
background-color: red;
color: white;
}

/* MEDIA QUERIES Tela Grande*/

@media screen and (min-width: 47.5em ) {

.container { 
float: left;
}

.container-rodape { 
float: left;
padding-left: 1.5em;
}

.left-column { 
margin-right: 23em;
float: left;
background: #ffffff;
}

.right-column { 
width: 22.75em;
margin-left: -23.3em;
float: left;
border-left: 1px solid  #ccc;
}

}

@media screen and (max-width: 820px) {

#top-anuncio-left {
width: 96%;
margin: .1em;
padding-left: 0.45em;
line-height: 1.3;
text-align: left;
padding-top: 5px;
font-size: 14px;
color: #808080;
font-family: 'PT Sans', Arial, sans-serif;
}

.lateral-acima-invisible {
display: none;
}

}

@media screen and (max-width: 610px) {

#imagem-fixed {
display: none;
}

}

@media screen and (min-width: 420px) {

#artigo-abaixo {
dispklay: none;
}

}