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: black;}
.coluna_principal {float: left; width: 97%; margin: 1%; padding: 6px; background-color: #eee; opacity: 0.95; }
.artigo { margin: 2%; margin-bottom: 15px; padding: 1.5%; box-shadow: 1px 4px 2px 0 rgba(100,100,100,0.9); overflow: hidden; background-color: #fff; }
.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%;}

.coluna_secundaria {float: left; width: 32%; margin: 1%; padding: 10px; background-color: #552266; opacity: 1.0; }
.caixa_destaque { margin: 0.5%; margin-bottom: 10px; padding: 1%; color:#ffffff; }
.coluna_secundaria a, .coluna_secundaria a:visited {text-decoration: underline; color:#ffffff; background-color: #552266; }
.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: #552266; }

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

@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%; }
}