// Tema Cinza para o Página de Destaque

// VARIAVEIS ####################################################################
// Altere as cores principais para criar um novo tema

// Basic Colors
@main-bg: #fff;
@main-text: #111111;
@main-color: #f2f2f2;

// Header
@header: @main-color;
@header2: darken(@header, 10%);
@header-text: #2d66cf;
@header-link: @header-text;
.header-border {border-top: 2px solid #dfdfdf;}

// Navegacao
@nav: #d5d6d8;
@nav-link: @header-text;
.nav-border {border-right:1px solid #98999b;}

// Footer
@footer: #0042b2;

// colunas
@main-width: 960px;
@max-width: 100%;
@coluna1: 20%;
@coluna2: 30%;

// ESTILOS PRE DFINIDOS #########################################################
// Não é necessário alterar apartir desta linha

// Aditional styles
.gradient {
	background: -webkit-linear-gradient(@header, @header2); /* For Safari */
	background: -o-linear-gradient(@header, @header2); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(@header, @header2); /* For Firefox 3.6 to 15 */
	background: linear-gradient(@header, @header2); /* Standard syntax (must be last) */
}
.gradient-nav {
	background: -webkit-linear-gradient(@nav, darken(@nav, 10%)); /* For Safari */
	background: -o-linear-gradient(@nav, darken(@nav, 10%)); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(@nav, darken(@nav, 10%)); /* For Firefox 3.6 to 15 */
	background: linear-gradient(@nav, darken(@nav, 10%)); /* Standard syntax (must be last) */
}
.wrapper-size {
	margin: 0 auto;
	width: @main-width;
	max-width: @max-width;
}

// Basic styles
body {
  background-color: @main-bg;
  color: @main-text;
}
#header {
  color: @header-text;
  padding: 14px 0 0 0;
  .header-border;
  .gradient;
}
#accessibility {
  font-size: 0.78em;
}
#accessibility a {
  color: @header-link;
}
#accessibility a span {
  background: lighten(@header-text, 10%);
  color: @header;
}
#portal-siteactions {
  border-bottom: 1px dotted @header-text;
}
#portal-siteactions a,
#portal-siteactions a:hover,
#portal-language a,
#portal-language a:hover { color: @header-text !important; }
#header h1,
#header a {
  color: @header-link !important;
}
#logo a, #logo #portal-title {
  color: @header-link !important;
}
#portal-title {
  margin-bottom: 25px;
}
nav {
  .gradient-nav
}
#portal-globalnav {
  clear: both;
  font-size: 1em;
  background: transparent;
  margin: auto;
}
#portal-globalnav li a {
  display: inline;
  padding: 0;
  background: transparent;
  border-right: 0;
}
#portal-globalnav .selected a,
#portal-globalnav a:hover,
#portal-globalnav .selected a:hover {
    background: transparent;
}
nav ul {
  line-height: 20px;
  padding: 5px 0;
  min-height: 18px;
  .wrapper-size;
}
nav li {
  margin-right: 10px;
  padding-right: 10px;
  .nav-border;
}
nav li.last-item {
  border-right: none;
}
#main {
  .wrapper-size;
  background: @main-bg;
}
div.position-0 {
  margin-left: -100%;
}
div.position-5 {
  margin-left: -65.61%;
}
div.position-10 {
  margin-left: -31.2%;
}
div.width-full {
  width: 100%;
}
div.width-5 {
  width: 31.2%;
}
div.width-10 {
  width: 65.61%;
}
div.width-16 {
  width: 100%;
}
.ministerios {
  background: @header;
}
.ministerios ul {
  margin: 0 auto;
  max-width: @main-width;
  width: @max-width;
}
.ministerios li {
  width: 21%;
  float: left;
  margin: 2%;
  text-align: center;
}
.ministerios a {
  color: @footer;
}
.ministerios a span:last-child {
  display: block;
  font-weight: bold;
}
#footer {
  padding: 0 0 20px 0 !important;
}
#footer .footer-logos {
  background: @footer;
}

/* tiles */
.tile a {
  color: #162937 !important;
}
.cover-background-image .cover-richtext-tile {
  background: @main-bg;
  padding: 10px;
}
.cover-background-image .laranja .tile-content,
.cover-background-image .azul-petroleo .tile-content,
.cover-background-image .dourado .tile-content,
.cover-background-image .roxo .tile-content,
.cover-background-image .marrom-claro .tile-content,
.cover-background-image .verde-escuro .tile-content,
.cover-background-image .verde .tile-content,
.cover-background-image .azul .tile-content,
.cover-background-image .marrom .tile-content,
.cover-background-image .verde-claro .tile-content,
.cover-background-image .azul-claro .tile-content,
.cover-background-image .azul-escuro .tile-content,
.cover-background-image .azul-turquesa .tile-content,
.cover-background-image .bege .tile-content {
  background: @main-bg;
  padding: 15px 5px;
  margin-top:  -23px;
  margin-bottom: -24px;
}

/* Contraste */
.contraste .ministerios,
.contraste .cover-background-image .cover-richtext-tile {
  background: #000 !important;
  color: #fff !important;
}
.contraste #header a {
  color: #fff !important;
}
.contraste nav,
.contraste nav ul,
.contraste #header nav ul a {
  background: #333 !important;
  color: #fff !important;
}
.contraste .laranja .tile-content,
.contraste .azul-petroleo .tile-content,
.contraste .dourado .tile-content,
.contraste .roxo .tile-content,
.contraste .marrom-claro .tile-content,
.contraste .verde-escuro .tile-content,
.contraste .verde .tile-content,
.contraste .azul .tile-content,
.contraste .marrom .tile-content,
.contraste .verde-claro .tile-content,
.contraste .azul-claro .tile-content,
.contraste .azul-escuro .tile-content,
.contraste .azul-turquesa .tile-content,
.contraste .bege .tile-content {
  background: #000;
}

/* Responsivo */
@media only screen and (min-width : 320px) and (max-width : 768px) {

    .cover-background-image {
      background: @main-bg !important;
    }
    .contraste .cover-background-image {
      background: #000 !important;
    }
    .spacer-tile {
      height: auto !important;
    }

    .ministerios li {
      width: 46%;
      margin: 2%;
    }

    .menuTrigger {
      background: @header2 url("img/bg-menu-mobile.png") top right no-repeat;
    }

    nav ul {
      display: none;
    }

    nav.ativo ul {
      display: block;
    }

    nav ul li {
      display: block;
      padding: 1em;
      font-weight: bold;
      font-size: 1.5em;
      border: none;
    }

    .spacer-tile .hiddenStructure {
      height: auto;
      overflow: visible;
      padding: 1em;
      margin: 0;
      width: auto;
      font-weight: bold;
      font-size: 1.5em;
    }

}
