body, html { margin:0; padding:0; color:#000055; font-family: Verdana, Geneva, sans-serif; font-size: 0.9em; }
body {background: #eeeeee;}
#corpo {margin:auto; max-width: 85%; background: #eeeeee;}

/* Area do topo */
#topo {margin:0; padding:0; }
.barra_topo {margin: 4.0817% 0 2.0409%; }
.logo {width: 100%;  float: left; margin-bottom: 10px; }
.logo img{display: block; max-width: 100%; height: auto;}

.botao_menu {display: none; position:absolute; right: 0px; top: 0px;}
.barra_small_menu {display: none; position:relative; float:none; z-index: 1;}
.small_menu li {padding: 1.0em; border-style: dashed none; border-width: 1px; border-color: #ddd; color: #aaf; background: rgba(60, 60, 60, 0.9); }
.small_menu a, .small_menu a:visited {margin-left: 10px; text-decoration: none; color: #fff; background: rgba(60, 60, 60, 1.0); }

.barra_menu {clear: both; margin-bottom: 10px; padding: 1.1em 0; background: rgba(255, 255, 255, 0.9); box-shadow: 0 1px 2px rgba(200,200,200,0.9); }
.menu {display: inline-block; list-style: none; margin: 0; padding: 0; position: relative; width: 100%;}
.opc_menu {display: inline-block; list-style: none; padding: 0.4em 1.1em 0.4em 1.1em; right: 0;}
.opc_menu a, .opc_menu a:visited {padding: 0.4em 1.1em 0.4em 1.1em; color: #009; background: #fff; text-decoration: none; font-size: 1em; }
.sub_menu {display: none; position: absolute; margin:0; padding:0; background-color: #fff; list-style: none; box-shadow: 0 1px 2px rgba(200,200,200,0.9); min-width: 10em; z-index: 2;}
.sub_menu li {padding: 1.0em; border-style: dashed none; border-width: 1px; border-color: #ddd; }
.opc_menu:hover .sub_menu {display: block; }
.opc_menu a:hover {color: #fff; background-color: #4b0082ff; text-decoration: none; }
.sub_menu a:hover {color: #888; background-color: #fff; text-decoration: none; }

/* Area do meio */
#meio {overflow: hidden; position: relative; clear: both; background-color: #4b0082;}
.coluna_principal {float: left; width: 60%; margin: 1%; padding: 6px; background-color: darkorange; opacity: 95% }
.artigo { margin: 2%; margin-bottom: 15px; padding: 1.5%; box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); overflow: hidden; background-color: #fff; border: 1px solid #999; }
.artigo img {margin: 0.8%; max-width: 97.5%; }
.grelha { float: left; padding: 1%; overflow: hidden;}

table { font-size: 1.0em; color: blue; background-color:#f1f1f1; }
table td { padding: 0.3em; }
table tr:nth-child(odd) { background-color: #f1f1f1; }
table tr:nth-child(even) { background-color: #e1e1e1; }
.t_datas { width: 97%;}

table a {text-decoration: underline; color: #blue; cursor: pointer;}
table a:hover {text-decoration: underline; background-color: #fff; }
#hide1 { background-color: #fff; display: none; } 
#hide2 { background-color: #fff; display: none; }
#hide3 { background-color: #fff; display: none; }
#hide4 { background-color: #fff; display: none; }
#hide5 { background-color: #fff; display: none; }

.coluna_secundaria {float: left; width: 32%; margin: 1%; padding: 10px; background-color: #ff8c00; opacity: 1.0; }
.caixa_destaque { margin: 0.5%; margin-bottom: 10px; padding: 1%; color:#000000; }
.coluna_secundaria a, .coluna_secundaria a:visited {text-decoration: underline; color:#000000; background-color: #ff8c00; }
.coluna_secundaria a:hover {text-decoration: underline; color:#0000cc; background-color: #ddf; }

/* Area do fundo */
#base { clear: both; padding: 1% 2%; color: #fff; background-color: #4b0082; }

ul {list-style: none; }
a, a:visited {text-decoration: underline; color: #0000cc; background-color: #ddccee; }
a:hover {text-decoration: underline; background-color: #ddf; }

.g_cal {width: 97%; margin: 0.7%; padding:0.8%; }

@media screen and (max-width: 1024px) and (min-width: 769px){
#corpo {max-width: 90%;}
.coluna_principal {width: 97%; margin: 0.7%; padding:0.8%; }
.coluna_secundaria {width: 97%; margin: 0.7%; padding:0.8%; }
}
@media screen and (max-width: 768px) {
body {background-size: contain;}
#corpo {max-width: 98%;}
.barra_menu {display: none;}
.botao_menu {display: block;}
.botao_menu:hover .barra_small_menu {display: inline-block; }

.coluna_principal {width: 97%; margin: 0.8%; padding:0.8%; }
.coluna_secundaria {width: 97%; margin: 0.8%; padding:0.8%; }
}