// 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.width-full {
  width: 100%;
}
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 */
.cover-background-image .cover-richtext-tile {
  background: @main-bg;
  outline: 10px solid @main-bg;
}

/* Contraste */
.contraste #header a,
.contraste nav,
.contraste nav ul,
.contraste .ministerios,
.contraste .cover-background-image .cover-richtext-tile {
    background: none repeat scroll 0 0 #000 !important;
    color: #fff !important;
}
.contraste .spacer-tile .hiddenStructure {
  height: auto;
  overflow: visible;
  padding: 1em;
  margin: 0;
  width: auto;
  font-weight: bold;
  font-size: 1.5em;
}
.contraste .cover-background-image .cover-richtext-tile {
  outline: 10px solid #000;
}

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

    .cover-background-image {
      background: @main-bg !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;
    }

}
