@charset "utf-8";
/* ==========================================================================
   Greyport Cargo - folha de estilo do site
   Criada em março de 2014. Última alteração: agosto de 2016 (menu e rodapé).
   ========================================================================== */

* { margin: 0; padding: 0; }
html { background: #c4c9cd; }
body {
  font-family: Verdana, Tahoma, Geneva, sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: #333;
  background: #c4c9cd;
  background: linear-gradient(to bottom, #8f979d 0, #c4c9cd 360px);
  padding-bottom: 24px;
}
a { color: #a11a21; }
a:hover { color: #d2232a; text-decoration: none; }
img { border: 0; }
.limpa { clear: both; height: 0; overflow: hidden; }
.direita { text-align: right; }
.centro { text-align: center; }

/* ----- a moldura da página: largura fixa de 960 px ----- */
#tudo {
  width: 960px;
  margin: 0 auto;
  background: #fff;
  border-left: 1px solid #7d848a;
  border-right: 1px solid #7d848a;
  border-bottom: 1px solid #7d848a;
  box-shadow: 0 0 14px rgba(0, 0, 0, .35);
}

/* ----- a faixa escura do alto ----- */
#barra { height: 26px; line-height: 26px; padding: 0 16px; background: #2b2b2b; color: #bdbdbd; font-size: 11px; }
#barra .links { float: right; }
#barra a { color: #fff; text-decoration: none; }
#barra a:hover { text-decoration: underline; }

/* ----- o topo, com o degradê ----- */
#topo {
  position: relative;
  height: 104px;
  background: #a01c22;
  background: linear-gradient(to bottom, #cd373d 0%, #ab1e24 49%, #96151a 50%, #7c0d12 100%);
  border-bottom: 1px solid #5a070b;
}
#logo { position: absolute; left: 18px; top: 18px; }
#marca { position: absolute; left: 100px; top: 24px; color: #fff; }
#marca .nome {
  display: block;
  font: bold 30px/1 Tahoma, Verdana, sans-serif;
  letter-spacing: 1px;
  text-shadow: 0 2px 2px rgba(0, 0, 0, .45);
}
#marca .nome span { color: #ffd34d; }
#marca .lema { display: block; margin-top: 9px; font-size: 11px; font-style: italic; color: #f6d9da; }
#central { position: absolute; right: 18px; top: 20px; text-align: right; font-size: 11px; color: #f6d9da; }
#central strong {
  display: block;
  font: bold 22px/1.35 Tahoma, Verdana, sans-serif;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

/* ----- o menu em abas ----- */
#menu {
  list-style: none;
  height: 33px;
  padding: 9px 14px 0;
  background: #dedede;
  background: linear-gradient(to bottom, #f4f4f4, #d0d0d0);
  border-bottom: 1px solid #999;
}
#menu li { float: left; margin-right: 4px; }
#menu a {
  display: block;
  height: 32px;
  line-height: 32px;
  padding: 0 18px;
  font-size: 12px;
  font-weight: bold;
  color: #444;
  text-decoration: none;
  text-shadow: 0 1px 0 #fff;
  background: #e9e9e9;
  background: linear-gradient(to bottom, #fdfdfd, #dadada);
  border: 1px solid #999;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
}
#menu a:hover { background: #fff; color: #a11a21; }
#menu a.atual {
  position: relative;
  top: 1px;
  background: #fff;
  color: #a11a21;
  box-shadow: inset 0 3px 0 #a11a21;
}

/* ----- a foto do alto (só na página inicial) ----- */
#banner { position: relative; height: 220px; border-bottom: 4px solid #a11a21; }
#banner img { display: block; }
#banner .chamada {
  position: absolute;
  left: 26px;
  top: 30px;
  width: 330px;
  padding: 18px 20px 20px;
  color: #fff;
  background: #2b2b2b;
  background: rgba(34, 34, 34, .78);
  border-radius: 6px;
}
#banner .chamada strong { display: block; font: bold 22px/1.3 Tahoma, Verdana, sans-serif; text-shadow: 0 1px 2px #000; }
#banner .chamada span { display: block; margin: 8px 0 14px; font-size: 12px; color: #e0e0e0; }

/* ----- o miolo: uma tabela de duas colunas ----- */
#miolo { width: 960px; border-collapse: collapse; }
#conteudo { padding: 24px 26px 30px 28px; vertical-align: top; }
#lateral { width: 250px; padding: 24px 20px 30px 0; vertical-align: top; }

h1 {
  font: bold 22px/1.3 Tahoma, Verdana, sans-serif;
  color: #a11a21;
  padding-bottom: 8px;
  margin-bottom: 14px;
  border-bottom: 1px dotted #b0b0b0;
}
h2 {
  font: bold 16px/1.3 Tahoma, Verdana, sans-serif;
  color: #444;
  margin: 24px 0 10px;
  padding-left: 10px;
  border-left: 4px solid #a11a21;
}
h3 { font: bold 13px/1.4 Tahoma, Verdana, sans-serif; color: #a11a21; margin-bottom: 4px; }
p { margin-bottom: 12px; }
#conteudo ul, #conteudo ol { margin: 0 0 12px 24px; }
#conteudo li { margin-bottom: 4px; }

/* ----- os três serviços da página inicial ----- */
table.tres { width: 100%; border-collapse: collapse; margin-bottom: 6px; }
table.tres td { width: 33%; padding: 14px 14px 10px; vertical-align: top; background: #f6f6f6; border: 1px solid #d6d6d6; }
table.tres td.meio { border-left: 0; border-right: 0; }
table.tres img { display: block; margin-bottom: 8px; }
table.tres p { font-size: 12px; margin-bottom: 4px; }

/* ----- tabelas de dados ----- */
table.dados { width: 100%; border-collapse: collapse; margin: 6px 0 16px; border: 1px solid #cfcfcf; }
table.dados th {
  padding: 7px 10px;
  text-align: left;
  font-size: 12px;
  color: #fff;
  background: #4c4c4c;
  background: linear-gradient(to bottom, #6a6a6a, #3d3d3d);
  text-shadow: 0 -1px 0 #222;
}
table.dados td { padding: 8px 10px; vertical-align: top; border-top: 1px solid #dcdcdc; }
table.dados tr.par td { background: #f3f3f3; }
table.dados td.ano, table.dados td.rotulo { width: 60px; font-weight: bold; color: #a11a21; white-space: nowrap; }
.novo {
  display: inline-block;
  padding: 0 6px;
  font: bold 10px/16px Verdana, sans-serif;
  color: #5a3d00;
  background: #ffd34d;
  border: 1px solid #c79a12;
  border-radius: 3px;
  text-transform: uppercase;
  text-shadow: none;
  vertical-align: middle;
}

/* ----- as notícias ----- */
table.ultimas { width: 100%; border-collapse: collapse; }
table.ultimas td { padding: 8px 0; vertical-align: top; border-bottom: 1px dotted #b0b0b0; }
table.ultimas td.quando { width: 86px; font-size: 11px; font-weight: bold; color: #777; padding-top: 10px; }
table.ultimas a { font-weight: bold; }
table.ultimas span { font-size: 12px; color: #555; }
.noticia { padding-bottom: 6px; margin-bottom: 18px; border-bottom: 1px dotted #b0b0b0; }
.noticia h2 { margin-top: 6px; }
.noticia .quando {
  display: inline-block;
  padding: 1px 9px;
  font-size: 11px;
  font-weight: bold;
  color: #fff;
  background: #a11a21;
  border-radius: 3px;
}

/* ----- missão, visão e valores ----- */
table.mvv { width: 100%; border-collapse: separate; border-spacing: 0; margin: 6px 0 16px; }
table.mvv td { width: 33%; padding: 12px 14px; vertical-align: top; font-size: 12px; background: #f6f6f6; border: 1px solid #d6d6d6; border-top: 3px solid #a11a21; }
table.mvv td.meio { border-left: 0; border-right: 0; }

/* ----- as caixas da coluna da direita ----- */
.caixa { margin-bottom: 16px; background: #f7f7f7; border: 1px solid #c8c8c8; border-radius: 4px; }
.caixa h3 {
  padding: 0 10px;
  font: bold 11px/28px Tahoma, Verdana, sans-serif;
  color: #fff;
  letter-spacing: .5px;
  text-transform: uppercase;
  text-shadow: 0 -1px 0 #222;
  background: #4c4c4c;
  background: linear-gradient(to bottom, #6a6a6a, #3d3d3d);
  border-radius: 3px 3px 0 0;
  margin: 0;
}
.caixa .dentro { padding: 10px 12px 4px; font-size: 12px; word-wrap: break-word; }
.caixa .correio { font-size: 11px; }
.caixa .fone { font: bold 18px/1.3 Tahoma, Verdana, sans-serif; color: #a11a21; margin-bottom: 6px; }
.contador { text-align: center; }
.contador .digitos span {
  display: inline-block;
  width: 18px;
  height: 26px;
  margin: 0 1px;
  font: bold 16px/26px "Courier New", Courier, monospace;
  color: #fff;
  background: #111;
  background: linear-gradient(to bottom, #555 0%, #1c1c1c 49%, #000 50%, #2e2e2e 100%);
  border: 1px solid #000;
  border-radius: 2px;
}
.contador .desde { font-size: 10px; color: #777; }

/* ----- botões ----- */
.botao {
  display: inline-block;
  padding: 7px 16px;
  font: bold 12px/1.4 Verdana, Tahoma, sans-serif;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 -1px 0 #5a070b;
  background: #a81d23;
  background: linear-gradient(to bottom, #d2383e 0%, #ab1e24 49%, #96151a 50%, #8a1218 100%);
  border: 1px solid #6d0c11;
  border-radius: 4px;
  cursor: pointer;
}
a.botao:hover { color: #fff; background: #c0272d; }

/* ----- o formulário de contato ----- */
table.formulario { border-collapse: collapse; margin: 6px 0 10px; }
table.formulario td { padding: 5px 0; vertical-align: top; }
table.formulario td.rotulo { width: 90px; padding-top: 9px; font-weight: bold; color: #555; }
.campo {
  width: 380px;
  padding: 5px 6px;
  font: 12px Verdana, Tahoma, sans-serif;
  color: #333;
  background: #fff;
  border: 1px solid #a9a9a9;
  border-radius: 3px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .12);
}
.campo.curto { width: 180px; }
select.campo { width: 394px; }
.obs { font-size: 11px; color: #777; margin-left: 8px; }

/* ----- o rodapé ----- */
#rodape {
  padding: 14px 18px 16px;
  font-size: 11px;
  color: #bdbdbd;
  background: #333;
  background: linear-gradient(to bottom, #4a4a4a, #2a2a2a);
  border-top: 3px solid #a11a21;
}
#rodape strong { color: #fff; }
#rodape .esquerda { float: left; }
#rodape .direita { float: right; }