Updated header due to SECOM guidelines

Signed-off-by: Carlos Oliveira <carlospecter@gmail.com> Signed-off-by: Peter Lima <peterlima@gmail.com>

Updated header due to SECOM guidelines
Signed-off-by: Carlos Oliveira <carlospecter@gmail.com> Signed-off-by: Peter Lima <peterlima@gmail.com>
Carlos Coêlho
1 parent 382da68c
Showing 2 changed files with 429 additions and 253 deletions Show diff stats
static/css/header.css
templates/header.html
-#barra-brasil #wrapper-barra-brasil .brasil-flag{
-  height: auto;
+#header {
+	font-size: 62.5%;
+    font-family: "open_sansregular", Arial, Helvetica, sans-serif;
+	padding: 14px 0 0 0;
+    background-color: #EAEDF0;
+    color: #fff;
+    min-width: 960px;
 }
  
-#first-nav{
-  background-color:#f0f2f1;
-  background-color:#ecedf1;
-  background-image: -webkit-radial-gradient(center, ellipse cover, #f0f2f1 1%, #ecedf1 100%)
+#header * {
+    margin: 0;
+    padding: 0;
+    list-style: none;
 }
  
-/* Accessibility */
+
+#header a {
+    text-decoration: none;
+}
+
+#header > div {
+    position: relative;
+    margin: 0 auto;
+    max-width: 960px;
+    display: block;
+}
+
+#header * li {
+    display: inline;
+}
  
 #accessibility {
-  font-family: arial;
-  font-size: 10px;
+	/*font-size: 1.1em;*/
+    font-size: 1.3em;
+    font-family: Arial, Helvetica, sans-serif;
+    display: block;
+    float: left;
+    width: 50%;
+    margin-bottom: 18px;
+}
+
+#accessibility a {
+    color: #2C65CD;
+    margin-right: 9px;
+}
+
+#accessibility span {
+    padding: 0 3px;
+    background: #2C65CD;
+    color: #fff;
 }
  
-#accessibility a{
-  padding-left: 4px;
-  padding-right: 4px;
-  color: #2c66ce;
+#second-nav {
+    float: right;
 }
  
-#accessibility span{
-  background-color: #2c66ce;
+#portal-siteactions,
+#portal-language {
+    border-bottom: 1px dotted #2C65CD;
 }
  
-#colab-portal-siteactions{
-  font-size: 10px;
-  text-align: center;
+#portal-siteactions #siteaction-accessibility a {
+	padding-left: 0;
 }
  
-#colab-portal-siteactions li{
-  display: inline-block;
+#portal-siteactions {
+    display: block;
+    /*float: right;*/
+    float: left;
+    clear: none;
+    padding-bottom: 2px;
+    /*font-size: 1.1em;*/
+    font-size: 1.3em;
 }
  
-#colab-portal-siteactions a {
-  color:#2c66ce;
-  text-decoration: none;
-  text-transform: uppercase;
-  font-family: 'Open Sans Regular', Arial, Helvetica, sans-serif;
-  padding-right: 0;
-  padding-left: 10px;
+#portal-siteactions a {
+    padding: 4px 0 4px 17px;
 }
  
-#colab-portal-siteactions #colab-siteaction-mapadosite a{
-  padding-right: 0;
+#portal-siteactions a,
+#login-menu a {
+    text-decoration: none;
+    text-transform: uppercase;
 }
  
-#colab-portal-siteactions a:hover {
-  color: #03316f;
+#portal-siteactions a,
+#portal-siteactions a:hover,
+#portal-language a,
+#portal-language a:hover {
+    color: #2C65CD;
 }
  
-#colab-portal-siteactions span {
-  border-bottom: 1px dotted #2c66ce;
+#login-menu #user-menu a {
+    position: relative;
+    top: -6px;
 }
  
-/* User-bar */
+#login-menu #user-menu .user img {
+    width: 32px;
+    height: 32px;
+    border-radius: 90%;
+}
  
-#user-menu a.btn {
-  font-size: 13px;
-  padding: 10px;
-  background-color: #2c66ce;
-  border-color: #2c66ce;
-  color: #FFF;
+#login-menu #user-menu .user .carret {
+    vertical-align: middle;
 }
  
-#user-menu .dropdown-menu{
-  border-radius: 5px;
+#login-menu {
+    float:right;
+    display: block;
+    clear: none;
+    padding-bottom: 2px;
+    font-size: 1.3em;
+    padding-left: 17px;
 }
  
-#user-menu .dropdown-toggle img{
-  border-radius: 20px;
+#login-menu a {
+    padding: 4px 0 4px 6px;
+    font-weight: bold;
 }
  
-#user-menu .user .caret, #menu-spb a .caret {
-  border-left: 5px solid transparent;
-	border-right: 5px solid transparent;
-	border-top: 5px solid #2c66ce;
+#login-menu-box {
+    right: 0;
+    left: auto;
 }
  
-#user-menu a:hover .caret, #menu-spb a:hover .caret, #user-menu a:focus .caret, #menu-spb a:focus .caret{
-  border-left: 5px solid transparent;
-	border-right: 5px solid transparent;
-	border-top: 5px solid #03316f;
+#portal-searchbox {
+    border: 1px solid #CCC;
+    float: right;
+    clear: right;
+    margin: 18px 0 0 0;
+    padding: 2px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+    background: #fff;
+    text-align: right;
+    font-size: 1em;
+    color: #777;
+}
  
+#portal-searchbox form {
+    white-space: nowrap;
 }
  
-/* Brand and search */
+.LSBox {
+    margin: 0;
+    padding: 0;
+    border: none;
+}
  
-#spb-logo-search {
-  margin-top: 10px;
-  margin-bottom: 10px;
+fieldset, .editionComment {
+    line-height: 1.5em;
+    margin: 1em 0;
+    padding: 0 1em 1em;
+    width: auto;
 }
  
-#spb-logo-search  .logo-box{
-  padding-bottom: 20px;
+.hiddenStructure {
+    display: block;
+    background: transparent;
+    background-image: none;
+    border: none;
+    height: 0.1em;
+    overflow: hidden;
+    padding: 0;
+    margin: -0.1em 0 0 -0.1em;
+    width: 1px;
 }
  
-#portal-logo img{
-  max-height: 50px;
+#portal-searchbox label {
+    font-weight: normal;
+    cursor: default;
 }
  
-.box-search{
-  margin: auto;
-  margin-top: 10px;
+#portal-searchbox .searchField {
+    padding: 0.3em 0.35em;
+    width: 186px;
+    border: none;
+    border-right: none;
+    /*font-size: 1.2em;*/
+    font-size: 1.4em;
+    font-family: "open_sansregular", Arial, Helvetica, sans-serif;
 }
  
-#search-form .form-group{
-  float: left;
+#header input.searchButton {
+    /*background-position: 0px 2px;*/
+    background-position: 00 0;
+    /*padding: 4px 5px 4px 15px;*/
+    padding: 6px 5px 4px 15px;
+    border: none;
+    background-color: transparent;
+    text-indent: -2000px;
 }
  
-#search-form button.btn.btn-default{
-  float: left;
-  border-radius: 0px 5px 5px 0px;
-  border-left: none;
-  color: #2c66ce;
+#logo {
+    float: left;
+    padding: 0;
+    width: 70%;
+    min-height: 104px;
 }
  
-#search-form button.btn.btn-default:hover{
-  background: #fff;
-  border: 1px solid #cccccc;
-  border-left: none;
-  color: #03316f;
+#logo span {
+    position: absolute;
+    display: block;
+    /*line-height: 1em;*/
+    line-height: 1.1em;
 }
  
-#search-form #header-searchbox{
-  width: 100%;
-  border-radius: 5px 0px 0px 5px;
-  background: #fff;
+#logo a, #logo #portal-title {
+    color: #2C65CD;
 }
  
-/* Menu */
+#portal-title {
+	/*font-size: 4.0em;*/
+    font-size: 4.2em;
+	font-family: "open_sansextrabold", Arial, Helvetica, sans-serif;
+	margin-top: 9px;
+}
  
-#second-nav {
-  background-color:#CFD0D2;
-  min-height: 30px;
-  line-height: 30px;
-  font-size: 12px;
-  border-radius: 0;
-  margin-bottom: 0;
+#portal-title-1,
+#portal-description {
+	font-family: "open_sansregular", Arial, Helvetica, sans-serif;
+}
+
+#portal-title-1 {
+	/*font-size: 1.2em;*/
+    font-size: 1.4em;
 }
  
-#second-nav a {
-  color: #2c66ce;
-  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
+#portal-description {
+	/*font-size: 1.4em;*/
+    font-size: 1.6em;
 }
  
-#menu-spb > li > a{
-  padding: 5px 15px 5px 5px;
+#sobre {
+    background: #D9DBDE;
+    clear: both;
+    margin: 0;
+    padding: 7px 0;
+    max-width: 100% !important;
+    position: relative;
 }
  
-#menu-spb ul.dropdown-menu {
-  background: #CFD0D2;
-  border-color: #CFD0D2;
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
-  font-size: 12px;
+#sobre ul {
+    margin: 0 auto;
+    max-width: 960px;
+    text-align: right;
+}
+
+#sobre a {
+    color: #2C65CD;
+    /*font-size: 1.2em;*/
+    font-size: 1.4em;
+}
+
+#sobre .softwarepublico-item a {
+    padding: 0 8px;
+}
+
+#sobre .softwarepublico-item .dropdown-menu {
+    margin-top: 10px;
+}
+
+
+#sobre .softwarepublico-item .dropdown-menu:before {
+      position: absolute;
+      top: -7px;
+      left: 20px;
+      display: inline-block;
+      border-right: 7px solid transparent;
+      border-bottom: 7px solid #ccc;
+      border-left: 7px solid transparent;
+      border-bottom-color: rgba(0, 0, 0, 0.2);
+      content: '';
+}
+
+#sobre .softwarepublico-item .dropdown-menu:after {
+      position: absolute;
+      top: -6px;
+      left: 21px;
+      display: inline-block;
+      border-right: 6px solid transparent;
+      border-bottom: 6px solid #fff;
+      border-left: 6px solid transparent;
+      content: '';
+}
+
+#sobre .softwarepublico-item .dropdown-menu li {
+    font-size: 0.65em;
+    text-align: left;
+    border-right: none;
+}
+
+#sobre .softwarepublico-item .dropdown-menu li a {
+    border-bottom: 1px solid #EAEDF0;
+    padding: 8px;
+}
+
+
+#sobre .softwarepublico-item a {
+    border-right: 0;
+    padding: 0 8px;
 }
  
-#menu-spb ul.dropdown-menu a{
-  color: #03316f;
+#sobre .softwarepublico-item li a:hover {
+    background: #EAEDF0;
 }
  
-#menu-spb ul.dropdown-menu a:hover{
-  color:#2c66ce;
+#sobre .last-item a {
+    padding: 0 0 0 8px;
+    border-right: none;
 }
  
-#menu-spb .open > a,  #menu-spb .open > a:hover,  #menu-spb .open > a:focus{
-  background: none;
+#social-icons {
+    float: right;
+    clear: right;
+    margin: 13px 0 22px 0;
+    display: none;
 }
  
-#quick-links{
-  padding-right: 10px
+#social-icons a,
+#header input.searchButton {
+    background-image: url("../img/sprite.png");
 }
  
-#quick-links > li > a{
-  margin: 5px 0;
-  padding: 0 15px;
-  border-right: 1px solid #2c66ce;
+#social-icons a {
+    display: block;
+    overflow: hidden;
+    margin: 0 0 0 2px;
+    width: 20px;
+    height: 20px;
+    border: none;
+    text-indent: 100%;
+    white-space: nowrap;
+    opacity: .85;
+    filter: alpha(opacity=85);
+    border-radius: 4px;
 }
  
-#quick-links li:last-child > a{
-  padding-right: 5px;
-  border-right: none;
+#social-icons li {
+    display: inline-block;
 }
  
-#quick-links a:hover, #menu-spb a:focus , #menu-spb a:hover {
-  color: #03316f;
-  background: none;
+#portalredes-facebook a {
+    background-position: -80px -25px;
 }
  
-/* Menu collapsed elements */
-.navbar-toggle .icon-bar{
-  background-color: #2c66ce;
-  margin: auto;
+#portalredes-googleplus a {
+    background-position: -130px 0;
 }
  
-.navbar-header.logo .navbar-toggle{
-  float: left;
-  margin: 0;
+#portalredes-instagram a {
+    background-position: 69px -49px;
 }
  
-#quick-links-sm{
-  list-style: none;
-  float: right;
-  margin: 0;
+#portalredes-twitter a {
+    background-position: -155px -25px;
 }
  
-#quick-links-sm li{
-  display: inline-block;
+#portalredes-youtube a {
+    background-position: -130px -25px;
 }
  
-#quick-links-sm > li > a{
-  margin: 5px 0;
-  padding: 0 15px;
-  border-right: 1px solid #2c66ce;
-  text-decoration: none;
+#portalredes-soundcloud a {
+    background-position: 20px 0;
 }
  
-#quick-links-sm li:last-child > a{
-  padding-right: 5px;
-  border-right: none;
+#portalredes-slideshare a {
+    background-position: 45px 0;
 }
  
-#quick-links-sm a:hover{
-  color: #03316f;
-  background: none;
+#portalredes-rss a {
+    background-position: 145px -25px;
 }
@@ -2,135 +2,164 @@
 {% load static from staticfiles %}
  
 <header>
-<div class="navbar navbar-static-top">
-<!-- begin of barra-brasil -->
-<div id="barra-brasil">
-  <a href="https://brasil.gov.br" style="background:#7F7F7F; height: 20px; padding:4px 0 4px 10px; display: block; font-family:sans,sans-serif; text-decoration:none; color:white; ">Portal do Governo Brasileiro</a>
-</div>
-<script src="https://barra.brasil.gov.br/barra.js" type="text/javascript" defer async></script>
-<!-- end of barra-brasil -->
-  <div id="first-nav">
-    <div class="container">
-      <div class="row">
-        <div class="col-md-12">
-          <ul id="accessibility" class="nav navbar-nav hidden-xs hidden-sm">
-            <li>
-              <a id="link-conteudo" href="#main-content" accesskey="1">Ir para o conteúdo <span class="label label-primary">1</span></a>
-            </li>
-            <li>
-              <a id="link-navegacao" href="#menu-spb" accesskey="2">Ir para o menu <span class="label label-primary">2</span></a>
-            </li>
-            <li> <a id="link-buscar" accesskey="3" href="#header-searchbox" title="Go to search">Ir para a busca <span class="label label-primary">3</span></a>
-            </li>
-            <li>
-              <a id="link-rodape" href="#link-top" accesskey="4">Ir para o rodapé <span class="label label-primary">4</span></a>
-            </li>
-          </ul> <!-- end of accesskeys -->
-          <ul id="colab-portal-siteactions" class="nav navbar-nav navbar-right">
-            <li id="colab-siteaction-accessibility">
-              <a href="/software-publico-brasileiro/acessibilidade"><span>Acessibilidade</span></a>
-            </li>
-            <li id="colab-siteaction-contraste">
-              <a href="#"><span>Alto Contraste</span></a>
-            </li>
-            <li id="colab-siteaction-mapadosite">
-              <a href="/social/spb/mapa-do-site"><span>Mapa do site</span></a>
-            </li>
-            <!-- begin of user-menu -->
-            {% if not user.is_authenticated %}
-            <li class="dropdown hidden-xs hidden-lg">
-              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Acesso <b class="caret"></b></a>
-              <ul class="dropdown-menu">
-              {% trans 'Login' as login_text %}
-                <li><a href="{% url 'signup' %}">{% trans "Register" %}</a></li>
-                <li><a href="{% url 'login' %}">{% trans "Login" %}</a></li>
-              </ul>
-            </li>
+  <div id="barra-brasil">
+    <a href="http://brasil.gov.br" style="background:#7F7F7F; height: 20px; padding:4px 0 4px 10px; display: block; font-family:sans,sans-serif; text-decoration:none; color:white; ">Software Público Brasileiro</a>
+  </div>
+  <script src="http://barra.brasil.gov.br/barra.js" type="text/javascript" defer async></script>
+	<div id="header" role="banner">
+    <div>
+      <ul id="accessibility">
+        <li>
+          <a accesskey="1" href="#acontent" id="link-conteudo">
+            Ir para o conteúdo
+            <span>1</span>
+          </a>
+        </li>
+        <li>
+          <a accesskey="2" href="#anavigation" id="link-navegacao">
+            Ir para o menu
+            <span>2</span>
+          </a>
+        </li>
+        <li>
+          <a accesskey="3" href="#SearchableText" id="link-buscar">
+            Ir para a busca
+            <span>3</span>
+          </a>
+        </li>
+        <li class="last-item">
+          <a accesskey="4" href="#afooter" id="link-rodape">
+            Ir para o rodapé
+            <span>4</span>
+          </a>
+        </li>
+      </ul>
+      <!-- <ul id="language">
+        <li class="language-es">
+          <a href="#">Espa&#241;ol</a>
+        </li>
+        <li class="language-en">
+          <a href="#">English</a>
+        </li>
+      </ul>-->
+      <div id="second-nav">
+        <ul id="portal-siteactions">
+          <li id="siteaction-accessibility">
+            <a href="/software-publico-brasileiro/acessibilidade" title="Acessibilidade" accesskey="5">
+              Acessibilidade
+            </a>
+          </li>
+          <li id="siteaction-contraste">
+            <a href="#" title="Alto Contraste" accesskey="6">
+              Alto Contraste
+            </a>
+          </li>
+          <li id="siteaction-mapadosite">
+            <a href="/social/spb/mapa-do-site" title="Mapa do Site" accesskey="7">
+              Mapa do Site
+            </a>
+          </li>
+        </ul>
+        <ul id="login-menu">
+          {% if not user.is_authenticated %}
             {% trans 'Login' as login_text %}
-            <li class="visible-xs hidden-sm hidden-md"><a href="{% url 'signup' %}">{% trans "Register" %}</a></li>
-            <li class="visible-xs hidden-sm hidden-md"><a href="{% url 'login' %}">{% trans "Login" %}</a></li>
-            {% else %}
-            <li id="user-menu" class="dropdown">
-              <a href="#" class="dropdown-toggle user" data-toggle="dropdown">{% gravatar user.email 40 %} <b class="caret"></b>&nbsp;&nbsp;</a>
-              <ul class="dropdown-menu" role="menu">
-                <li>
+            <li class="login-item"><a href="{% url 'signup' %}">{% trans "Register" %}</a></li>
+            <li class="login item last-item"><a href="{% url 'login' %}">{% trans "Login" %}</a></li>
+          {% else %}
+            <li id="user-menu" class="login-item dropdown">
+              <a href="#" class="dropdown-toggle user" data-toggle="dropdown">{% gravatar user.email %} <b class="caret"></b>&nbsp;&nbsp;</a>
+              <ul id="login-menu-box" class="dropdown-menu" role="menu">
+                <li class="last-item">
                   <div class="wrapper">
-                    <div class="thumbnail">{% gravatar user.email 100 %}</div>
-                      <div class="user-info">
-                        <span><b>{{ user.get_full_name }}</b></span>
-                        <span class="quiet">{{ user.email }}</span>
-                      </div>
-                      <div>
-                        <a class="btn btn-info pull-left" href="{% url 'user_profile' user.username %}">{% trans "My Profile" %}</a>
-                        {% trans 'Logout' as logout_text %}
-                        <a class="btn btn-default pull-right" href="{% url 'logout' %}"> {% trans "Logout" %}</a>
+                    <div class="thumbnail">{% gravatar user.email %}</div>
+                    <div class="user-info">
+                      <span><b>{{ user.get_full_name }}</b></span>
+                      <span class="quiet">{{ user.email }}</span>
+                    </div>
+                    <div>
+                      <a class="btn btn-info pull-left" href="{% url 'user_profile' user.username %}">{% trans "My Profile" %}</a>
+                      {% trans 'Logout' as logout_text %}
+                      <a class="btn btn-default pull-right" href="{% url 'logout' %}"> {% trans "Logout" %}</a>
                     </div>
                   </div>
                 </li>
               </ul>
-            </li> <!-- end of user-menu -->
-            {% endif %}
-          </ul>
-        </div>
-      </div> <!-- end of access-menu -->
-      <div class="row" id="spb-logo-search">
-        <div class="col-md-6 logo-box">
-          <div id="logo">
-            <a href="/" id="portal-logo">
-                  <img class="img-responsive pull-left" src="{% static 'img/logo.svg' %}" />
-            </a>
-          </div>
-        </div>
-        <div class="col-md-6">
-          <div class="input-group box-search navbar-right">
-              <form action="{% url 'haystack_search' %}" method="GET" id="search-form" class="navbar-form" role="search">
-              <div class="form-group">
-                <label class="sr-only" for="header-searchbox">{% trans 'Search...' %}</label>
-                <input name="q" id="header-searchbox"
-                      class="form-control" value="{{ request.GET.q }}"
-                      type="search" placeholder="{% trans 'Search...' %}" />
-              </div>
-              <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
-              </form>
-            </div>
+            </li>
+          {% endif %}
+        </ul>
+      </div>
+      <div id="logo">
+        <a id="portal-logo" title="" href="/">
+          <span id="portal-title-1">Portal do</span>
+          <h1 id="portal-title" class="corto">Software Público Brasileiro</h1>
+          <span id="portal-description">MINISTÉRIO DO PLANEJAMENTO, ORÇAMENTO E GESTÃO</span>
+        </a>
+      </div>
+      <div id="portal-searchbox">
+    {% comment %}
+      <form action="{% url 'haystack_search' %}" method="GET" id="search-form" class="navbar-form navbar-right hidden-xs hidden-sm" role="search">
+        <div class="form-group">
+          <label class="sr-only" for="header-searchbox">{% trans 'Search here...' %}</label>
+          <input name="q" id="header-searchbox"
+                  class="form-control" value="{{ request.GET.q }}"
+                  type="search" placeholder="{% trans 'Search here...' %}" />
         </div>
+        <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
+      </form>
+    {% endcomment %}
+        <form id="nolivesearchGadget_form" action="/search/">
+          <fieldset class="LSBox"><legend class="hiddenStructure">Buscar no portal</legend>
+            <label class="hiddenStructure" for="nolivesearchGadget">Buscar no portal</label>
+            <input name="SearchableText" type="text" size="18" title="Buscar no portal" placeholder="Buscar no portal" class="searchField" id="nolivesearchGadget">
+            <input class="searchButton" type="submit" value="Buscar no portal">
+          </fieldset>
+        </form>
       </div>
-    </div>
-  </div><!-- end of first-nav -->
-  <div id="second-nav">
-    <div class="container">
-      <div class="row">
-        <ul id="quick-links-sm" class="hidden-md hidden-lg">
-          <li id="link-faq">
-            <a href="/social/spb/ajuda">FAQ</a>
+      <div id="social-icons">
+        <ul>
+          <li id="portalredes-facebook" class="portalredes-item">
+            <a href="#">Facebook</a>
           </li>
-          <li id="link-contact">
-            <a href="/social/spb/contato">Contato</a>
+          <li id="portalredes-googleplus" class="portalredes-item">
+            <a href="#">Google+</a>
           </li>
-        </ul>
-        <div class="navbar-header logo">
-          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-          </button>
-        </div>
-        <ul id="menu-spb" class="nav navbar-nav navbar-collapse collapse ">
-          <li>
-            <a href="{% url 'thread_list' %}">{% trans "Groups" %}</a>
+          <li id="portalredes-instagram" class="portalredes-item">
+            <a href="#">Instagram</a>
           </li>
-          {% plugins_menu %}
-        </ul>
-        <ul id="quick-links" class="nav navbar-nav navbar-right hidden-xs hidden-sm">
-          <li id="link-faq">
-            <a href="/social/spb/ajuda">Perguntas Frequentes</a>
+          <li id="portalredes-twitter" class="portalredes-item">
+            <a href="#">Twitter</a>
+          </li>
+          <li id="portalredes-youtube" class="portalredes-item">
+            <a href="#">YouTube</a>
           </li>
-          <li id="link-contact">
-            <a href="/social/spb/contato">Contato</a>
+          <li id="portalredes-soundcloud" class="portalredes-item">
+            <a href="#">SoundCloud</a>
+          </li>
+          <li id="portalredes-slideshare" class="portalredes-item">
+            <a href="#">Slideshare</a>
+          </li>
+          <li id="portalredes-rss" class="portalredes-item last-item">
+            <a href="#">RSS</a>
           </li>
         </ul>
       </div>
     </div>
+    <div id="sobre">
+      <ul>
+        <li id="softwarepublico-groups" class="softwarepublico-item">
+          <a href="https://portal.softwarepublico.gov.br/archives/thread/" title="Groups">Groups</a>
+        </li>
+        <li id="softwarepublico-perguntas-frequentes" class="softwarepublico-item">
+          <a href="/social/spb/ajuda" title="Perguntas frequentes">Perguntas frequentes</a>
+        </li>
+        <li id="softwarepublico-contato" class="softwarepublico-item">
+          <a href="/social/spb/contato" title="Contato">Contato</a>
+        </li>
+      </ul>
+    </div>
   </div>
-</div>
 </header>
+
+{% block main_content %}
+  <a name="acontent" id="acontent"></a>
+{% endblock %}
1		-#barra-brasil #wrapper-barra-brasil .brasil-flag{
2		- height: auto;
	1	+#header {
	2	+ font-size: 62.5%;
	3	+ font-family: "open_sansregular", Arial, Helvetica, sans-serif;
	4	+ padding: 14px 0 0 0;
	5	+ background-color: #EAEDF0;
	6	+ color: #fff;
	7	+ min-width: 960px;
3	8	}
4	9
5		-#first-nav{
6		- background-color:#f0f2f1;
7		- background-color:#ecedf1;
8		- background-image: -webkit-radial-gradient(center, ellipse cover, #f0f2f1 1%, #ecedf1 100%)
	10	+#header * {
	11	+ margin: 0;
	12	+ padding: 0;
	13	+ list-style: none;
9	14	}
10	15
11		-/* Accessibility */
	16	+
	17	+#header a {
	18	+ text-decoration: none;
	19	+}
	20	+
	21	+#header > div {
	22	+ position: relative;
	23	+ margin: 0 auto;
	24	+ max-width: 960px;
	25	+ display: block;
	26	+}
	27	+
	28	+#header * li {
	29	+ display: inline;
	30	+}
12	31
13	32	#accessibility {
14		- font-family: arial;
15		- font-size: 10px;
	33	+ /font-size: 1.1em;/
	34	+ font-size: 1.3em;
	35	+ font-family: Arial, Helvetica, sans-serif;
	36	+ display: block;
	37	+ float: left;
	38	+ width: 50%;
	39	+ margin-bottom: 18px;
	40	+}
	41	+
	42	+#accessibility a {
	43	+ color: #2C65CD;
	44	+ margin-right: 9px;
	45	+}
	46	+
	47	+#accessibility span {
	48	+ padding: 0 3px;
	49	+ background: #2C65CD;
	50	+ color: #fff;
16	51	}
17	52
18		-#accessibility a{
19		- padding-left: 4px;
20		- padding-right: 4px;
21		- color: #2c66ce;
	53	+#second-nav {
	54	+ float: right;
22	55	}
23	56
24		-#accessibility span{
25		- background-color: #2c66ce;
	57	+#portal-siteactions,
	58	+#portal-language {
	59	+ border-bottom: 1px dotted #2C65CD;
26	60	}
27	61
28		-#colab-portal-siteactions{
29		- font-size: 10px;
30		- text-align: center;
	62	+#portal-siteactions #siteaction-accessibility a {
	63	+ padding-left: 0;
31	64	}
32	65
33		-#colab-portal-siteactions li{
34		- display: inline-block;
	66	+#portal-siteactions {
	67	+ display: block;
	68	+ /float: right;/
	69	+ float: left;
	70	+ clear: none;
	71	+ padding-bottom: 2px;
	72	+ /font-size: 1.1em;/
	73	+ font-size: 1.3em;
35	74	}
36	75
37		-#colab-portal-siteactions a {
38		- color:#2c66ce;
39		- text-decoration: none;
40		- text-transform: uppercase;
41		- font-family: 'Open Sans Regular', Arial, Helvetica, sans-serif;
42		- padding-right: 0;
43		- padding-left: 10px;
	76	+#portal-siteactions a {
	77	+ padding: 4px 0 4px 17px;
44	78	}
45	79
46		-#colab-portal-siteactions #colab-siteaction-mapadosite a{
47		- padding-right: 0;
	80	+#portal-siteactions a,
	81	+#login-menu a {
	82	+ text-decoration: none;
	83	+ text-transform: uppercase;
48	84	}
49	85
50		-#colab-portal-siteactions a:hover {
51		- color: #03316f;
	86	+#portal-siteactions a,
	87	+#portal-siteactions a:hover,
	88	+#portal-language a,
	89	+#portal-language a:hover {
	90	+ color: #2C65CD;
52	91	}
53	92
54		-#colab-portal-siteactions span {
55		- border-bottom: 1px dotted #2c66ce;
	93	+#login-menu #user-menu a {
	94	+ position: relative;
	95	+ top: -6px;
56	96	}
57	97
58		-/* User-bar */
	98	+#login-menu #user-menu .user img {
	99	+ width: 32px;
	100	+ height: 32px;
	101	+ border-radius: 90%;
	102	+}
59	103
60		-#user-menu a.btn {
61		- font-size: 13px;
62		- padding: 10px;
63		- background-color: #2c66ce;
64		- border-color: #2c66ce;
65		- color: #FFF;
	104	+#login-menu #user-menu .user .carret {
	105	+ vertical-align: middle;
66	106	}
67	107
68		-#user-menu .dropdown-menu{
69		- border-radius: 5px;
	108	+#login-menu {
	109	+ float:right;
	110	+ display: block;
	111	+ clear: none;
	112	+ padding-bottom: 2px;
	113	+ font-size: 1.3em;
	114	+ padding-left: 17px;
70	115	}
71	116
72		-#user-menu .dropdown-toggle img{
73		- border-radius: 20px;
	117	+#login-menu a {
	118	+ padding: 4px 0 4px 6px;
	119	+ font-weight: bold;
74	120	}
75	121
76		-#user-menu .user .caret, #menu-spb a .caret {
77		- border-left: 5px solid transparent;
78		- border-right: 5px solid transparent;
79		- border-top: 5px solid #2c66ce;
	122	+#login-menu-box {
	123	+ right: 0;
	124	+ left: auto;
80	125	}
81	126
82		-#user-menu a:hover .caret, #menu-spb a:hover .caret, #user-menu a:focus .caret, #menu-spb a:focus .caret{
83		- border-left: 5px solid transparent;
84		- border-right: 5px solid transparent;
85		- border-top: 5px solid #03316f;
	127	+#portal-searchbox {
	128	+ border: 1px solid #CCC;
	129	+ float: right;
	130	+ clear: right;
	131	+ margin: 18px 0 0 0;
	132	+ padding: 2px;
	133	+ -webkit-border-radius: 5px;
	134	+ -moz-border-radius: 5px;
	135	+ border-radius: 5px;
	136	+ background: #fff;
	137	+ text-align: right;
	138	+ font-size: 1em;
	139	+ color: #777;
	140	+}
86	141
	142	+#portal-searchbox form {
	143	+ white-space: nowrap;
87	144	}
88	145
89		-/* Brand and search */
	146	+.LSBox {
	147	+ margin: 0;
	148	+ padding: 0;
	149	+ border: none;
	150	+}
90	151
91		-#spb-logo-search {
92		- margin-top: 10px;
93		- margin-bottom: 10px;
	152	+fieldset, .editionComment {
	153	+ line-height: 1.5em;
	154	+ margin: 1em 0;
	155	+ padding: 0 1em 1em;
	156	+ width: auto;
94	157	}
95	158
96		-#spb-logo-search .logo-box{
97		- padding-bottom: 20px;
	159	+.hiddenStructure {
	160	+ display: block;
	161	+ background: transparent;
	162	+ background-image: none;
	163	+ border: none;
	164	+ height: 0.1em;
	165	+ overflow: hidden;
	166	+ padding: 0;
	167	+ margin: -0.1em 0 0 -0.1em;
	168	+ width: 1px;
98	169	}
99	170
100		-#portal-logo img{
101		- max-height: 50px;
	171	+#portal-searchbox label {
	172	+ font-weight: normal;
	173	+ cursor: default;
102	174	}
103	175
104		-.box-search{
105		- margin: auto;
106		- margin-top: 10px;
	176	+#portal-searchbox .searchField {
	177	+ padding: 0.3em 0.35em;
	178	+ width: 186px;
	179	+ border: none;
	180	+ border-right: none;
	181	+ /font-size: 1.2em;/
	182	+ font-size: 1.4em;
	183	+ font-family: "open_sansregular", Arial, Helvetica, sans-serif;
107	184	}
108	185
109		-#search-form .form-group{
110		- float: left;
	186	+#header input.searchButton {
	187	+ /background-position: 0px 2px;/
	188	+ background-position: 00 0;
	189	+ /padding: 4px 5px 4px 15px;/
	190	+ padding: 6px 5px 4px 15px;
	191	+ border: none;
	192	+ background-color: transparent;
	193	+ text-indent: -2000px;
111	194	}
112	195
113		-#search-form button.btn.btn-default{
114		- float: left;
115		- border-radius: 0px 5px 5px 0px;
116		- border-left: none;
117		- color: #2c66ce;
	196	+#logo {
	197	+ float: left;
	198	+ padding: 0;
	199	+ width: 70%;
	200	+ min-height: 104px;
118	201	}
119	202
120		-#search-form button.btn.btn-default:hover{
121		- background: #fff;
122		- border: 1px solid #cccccc;
123		- border-left: none;
124		- color: #03316f;
	203	+#logo span {
	204	+ position: absolute;
	205	+ display: block;
	206	+ /line-height: 1em;/
	207	+ line-height: 1.1em;
125	208	}
126	209
127		-#search-form #header-searchbox{
128		- width: 100%;
129		- border-radius: 5px 0px 0px 5px;
130		- background: #fff;
	210	+#logo a, #logo #portal-title {
	211	+ color: #2C65CD;
131	212	}
132	213
133		-/* Menu */
	214	+#portal-title {
	215	+ /font-size: 4.0em;/
	216	+ font-size: 4.2em;
	217	+ font-family: "open_sansextrabold", Arial, Helvetica, sans-serif;
	218	+ margin-top: 9px;
	219	+}
134	220
135		-#second-nav {
136		- background-color:#CFD0D2;
137		- min-height: 30px;
138		- line-height: 30px;
139		- font-size: 12px;
140		- border-radius: 0;
141		- margin-bottom: 0;
	221	+#portal-title-1,
	222	+#portal-description {
	223	+ font-family: "open_sansregular", Arial, Helvetica, sans-serif;
	224	+}
	225	+
	226	+#portal-title-1 {
	227	+ /font-size: 1.2em;/
	228	+ font-size: 1.4em;
142	229	}
143	230
144		-#second-nav a {
145		- color: #2c66ce;
146		- font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	231	+#portal-description {
	232	+ /font-size: 1.4em;/
	233	+ font-size: 1.6em;
147	234	}
148	235
149		-#menu-spb > li > a{
150		- padding: 5px 15px 5px 5px;
	236	+#sobre {
	237	+ background: #D9DBDE;
	238	+ clear: both;
	239	+ margin: 0;
	240	+ padding: 7px 0;
	241	+ max-width: 100% !important;
	242	+ position: relative;
151	243	}
152	244
153		-#menu-spb ul.dropdown-menu {
154		- background: #CFD0D2;
155		- border-color: #CFD0D2;
156		- box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
157		- font-size: 12px;
	245	+#sobre ul {
	246	+ margin: 0 auto;
	247	+ max-width: 960px;
	248	+ text-align: right;
	249	+}
	250	+
	251	+#sobre a {
	252	+ color: #2C65CD;
	253	+ /font-size: 1.2em;/
	254	+ font-size: 1.4em;
	255	+}
	256	+
	257	+#sobre .softwarepublico-item a {
	258	+ padding: 0 8px;
	259	+}
	260	+
	261	+#sobre .softwarepublico-item .dropdown-menu {
	262	+ margin-top: 10px;
	263	+}
	264	+
	265	+
	266	+#sobre .softwarepublico-item .dropdown-menu:before {
	267	+ position: absolute;
	268	+ top: -7px;
	269	+ left: 20px;
	270	+ display: inline-block;
	271	+ border-right: 7px solid transparent;
	272	+ border-bottom: 7px solid #ccc;
	273	+ border-left: 7px solid transparent;
	274	+ border-bottom-color: rgba(0, 0, 0, 0.2);
	275	+ content: '';
	276	+}
	277	+
	278	+#sobre .softwarepublico-item .dropdown-menu:after {
	279	+ position: absolute;
	280	+ top: -6px;
	281	+ left: 21px;
	282	+ display: inline-block;
	283	+ border-right: 6px solid transparent;
	284	+ border-bottom: 6px solid #fff;
	285	+ border-left: 6px solid transparent;
	286	+ content: '';
	287	+}
	288	+
	289	+#sobre .softwarepublico-item .dropdown-menu li {
	290	+ font-size: 0.65em;
	291	+ text-align: left;
	292	+ border-right: none;
	293	+}
	294	+
	295	+#sobre .softwarepublico-item .dropdown-menu li a {
	296	+ border-bottom: 1px solid #EAEDF0;
	297	+ padding: 8px;
	298	+}
	299	+
	300	+
	301	+#sobre .softwarepublico-item a {
	302	+ border-right: 0;
	303	+ padding: 0 8px;
158	304	}
159	305
160		-#menu-spb ul.dropdown-menu a{
161		- color: #03316f;
	306	+#sobre .softwarepublico-item li a:hover {
	307	+ background: #EAEDF0;
162	308	}
163	309
164		-#menu-spb ul.dropdown-menu a:hover{
165		- color:#2c66ce;
	310	+#sobre .last-item a {
	311	+ padding: 0 0 0 8px;
	312	+ border-right: none;
166	313	}
167	314
168		-#menu-spb .open > a, #menu-spb .open > a:hover, #menu-spb .open > a:focus{
169		- background: none;
	315	+#social-icons {
	316	+ float: right;
	317	+ clear: right;
	318	+ margin: 13px 0 22px 0;
	319	+ display: none;
170	320	}
171	321
172		-#quick-links{
173		- padding-right: 10px
	322	+#social-icons a,
	323	+#header input.searchButton {
	324	+ background-image: url("../img/sprite.png");
174	325	}
175	326
176		-#quick-links > li > a{
177		- margin: 5px 0;
178		- padding: 0 15px;
179		- border-right: 1px solid #2c66ce;
	327	+#social-icons a {
	328	+ display: block;
	329	+ overflow: hidden;
	330	+ margin: 0 0 0 2px;
	331	+ width: 20px;
	332	+ height: 20px;
	333	+ border: none;
	334	+ text-indent: 100%;
	335	+ white-space: nowrap;
	336	+ opacity: .85;
	337	+ filter: alpha(opacity=85);
	338	+ border-radius: 4px;
180	339	}
181	340
182		-#quick-links li:last-child > a{
183		- padding-right: 5px;
184		- border-right: none;
	341	+#social-icons li {
	342	+ display: inline-block;
185	343	}
186	344
187		-#quick-links a:hover, #menu-spb a:focus , #menu-spb a:hover {
188		- color: #03316f;
189		- background: none;
	345	+#portalredes-facebook a {
	346	+ background-position: -80px -25px;
190	347	}
191	348
192		-/* Menu collapsed elements */
193		-.navbar-toggle .icon-bar{
194		- background-color: #2c66ce;
195		- margin: auto;
	349	+#portalredes-googleplus a {
	350	+ background-position: -130px 0;
196	351	}
197	352
198		-.navbar-header.logo .navbar-toggle{
199		- float: left;
200		- margin: 0;
	353	+#portalredes-instagram a {
	354	+ background-position: 69px -49px;
201	355	}
202	356
203		-#quick-links-sm{
204		- list-style: none;
205		- float: right;
206		- margin: 0;
	357	+#portalredes-twitter a {
	358	+ background-position: -155px -25px;
207	359	}
208	360
209		-#quick-links-sm li{
210		- display: inline-block;
	361	+#portalredes-youtube a {
	362	+ background-position: -130px -25px;
211	363	}
212	364
213		-#quick-links-sm > li > a{
214		- margin: 5px 0;
215		- padding: 0 15px;
216		- border-right: 1px solid #2c66ce;
217		- text-decoration: none;
	365	+#portalredes-soundcloud a {
	366	+ background-position: 20px 0;
218	367	}
219	368
220		-#quick-links-sm li:last-child > a{
221		- padding-right: 5px;
222		- border-right: none;
	369	+#portalredes-slideshare a {
	370	+ background-position: 45px 0;
223	371	}
224	372
225		-#quick-links-sm a:hover{
226		- color: #03316f;
227		- background: none;
	373	+#portalredes-rss a {
	374	+ background-position: 145px -25px;
228	375	}
...	...
...	...	@@ -2,135 +2,164 @@
2	2	{% load static from staticfiles %}
3	3
4	4	<header>
5		-<div class="navbar navbar-static-top">
6		-<!-- begin of barra-brasil -->
7		-<div id="barra-brasil">
8		- <a href="https://brasil.gov.br" style="background:#7F7F7F; height: 20px; padding:4px 0 4px 10px; display: block; font-family:sans,sans-serif; text-decoration:none; color:white; ">Portal do Governo Brasileiro</a>
9		-</div>
10		-<script src="https://barra.brasil.gov.br/barra.js" type="text/javascript" defer async></script>
11		-<!-- end of barra-brasil -->
12		- <div id="first-nav">
13		- <div class="container">
14		- <div class="row">
15		- <div class="col-md-12">
16		- <ul id="accessibility" class="nav navbar-nav hidden-xs hidden-sm">
17		- <li>
18		- <a id="link-conteudo" href="#main-content" accesskey="1">Ir para o conteúdo <span class="label label-primary">1</span></a>
19		- </li>
20		- <li>
21		- <a id="link-navegacao" href="#menu-spb" accesskey="2">Ir para o menu <span class="label label-primary">2</span></a>
22		- </li>
23		- <li> <a id="link-buscar" accesskey="3" href="#header-searchbox" title="Go to search">Ir para a busca <span class="label label-primary">3</span></a>
24		- </li>
25		- <li>
26		- <a id="link-rodape" href="#link-top" accesskey="4">Ir para o rodapé <span class="label label-primary">4</span></a>
27		- </li>
28		- </ul> <!-- end of accesskeys -->
29		- <ul id="colab-portal-siteactions" class="nav navbar-nav navbar-right">
30		- <li id="colab-siteaction-accessibility">
31		- <a href="/software-publico-brasileiro/acessibilidade"><span>Acessibilidade</span></a>
32		- </li>
33		- <li id="colab-siteaction-contraste">
34		- <a href="#"><span>Alto Contraste</span></a>
35		- </li>
36		- <li id="colab-siteaction-mapadosite">
37		- <a href="/social/spb/mapa-do-site"><span>Mapa do site</span></a>
38		- </li>
39		- <!-- begin of user-menu -->
40		- {% if not user.is_authenticated %}
41		- <li class="dropdown hidden-xs hidden-lg">
42		- <a href="#" class="dropdown-toggle" data-toggle="dropdown">Acesso <b class="caret"></b></a>
43		- <ul class="dropdown-menu">
44		- {% trans 'Login' as login_text %}
45		- <li><a href="{% url 'signup' %}">{% trans "Register" %}</a></li>
46		- <li><a href="{% url 'login' %}">{% trans "Login" %}</a></li>
47		- </ul>
48		- </li>
	5	+ <div id="barra-brasil">
	6	+ <a href="http://brasil.gov.br" style="background:#7F7F7F; height: 20px; padding:4px 0 4px 10px; display: block; font-family:sans,sans-serif; text-decoration:none; color:white; ">Software Público Brasileiro</a>
	7	+ </div>
	8	+ <script src="http://barra.brasil.gov.br/barra.js" type="text/javascript" defer async></script>
	9	+ <div id="header" role="banner">
	10	+ <div>
	11	+ <ul id="accessibility">
	12	+ <li>
	13	+ <a accesskey="1" href="#acontent" id="link-conteudo">
	14	+ Ir para o conteúdo
	15	+ <span>1</span>
	16	+ </a>
	17	+ </li>
	18	+ <li>
	19	+ <a accesskey="2" href="#anavigation" id="link-navegacao">
	20	+ Ir para o menu
	21	+ <span>2</span>
	22	+ </a>
	23	+ </li>
	24	+ <li>
	25	+ <a accesskey="3" href="#SearchableText" id="link-buscar">
	26	+ Ir para a busca
	27	+ <span>3</span>
	28	+ </a>
	29	+ </li>
	30	+ <li class="last-item">
	31	+ <a accesskey="4" href="#afooter" id="link-rodape">
	32	+ Ir para o rodapé
	33	+ <span>4</span>
	34	+ </a>
	35	+ </li>
	36	+ </ul>
	37	+ <!-- <ul id="language">
	38	+ <li class="language-es">
	39	+ <a href="#">Español</a>
	40	+ </li>
	41	+ <li class="language-en">
	42	+ <a href="#">English</a>
	43	+ </li>
	44	+ </ul>-->
	45	+ <div id="second-nav">
	46	+ <ul id="portal-siteactions">
	47	+ <li id="siteaction-accessibility">
	48	+ <a href="/software-publico-brasileiro/acessibilidade" title="Acessibilidade" accesskey="5">
	49	+ Acessibilidade
	50	+ </a>
	51	+ </li>
	52	+ <li id="siteaction-contraste">
	53	+ <a href="#" title="Alto Contraste" accesskey="6">
	54	+ Alto Contraste
	55	+ </a>
	56	+ </li>
	57	+ <li id="siteaction-mapadosite">
	58	+ <a href="/social/spb/mapa-do-site" title="Mapa do Site" accesskey="7">
	59	+ Mapa do Site
	60	+ </a>
	61	+ </li>
	62	+ </ul>
	63	+ <ul id="login-menu">
	64	+ {% if not user.is_authenticated %}
49	65	{% trans 'Login' as login_text %}
50		- <li class="visible-xs hidden-sm hidden-md"><a href="{% url 'signup' %}">{% trans "Register" %}</a></li>
51		- <li class="visible-xs hidden-sm hidden-md"><a href="{% url 'login' %}">{% trans "Login" %}</a></li>
52		- {% else %}
53		- <li id="user-menu" class="dropdown">
54		- <a href="#" class="dropdown-toggle user" data-toggle="dropdown">{% gravatar user.email 40 %} <b class="caret"></b>  </a>
55		- <ul class="dropdown-menu" role="menu">
56		- <li>
	66	+ <li class="login-item"><a href="{% url 'signup' %}">{% trans "Register" %}</a></li>
	67	+ <li class="login item last-item"><a href="{% url 'login' %}">{% trans "Login" %}</a></li>
	68	+ {% else %}
	69	+ <li id="user-menu" class="login-item dropdown">
	70	+ <a href="#" class="dropdown-toggle user" data-toggle="dropdown">{% gravatar user.email %} <b class="caret"></b>  </a>
	71	+ <ul id="login-menu-box" class="dropdown-menu" role="menu">
	72	+ <li class="last-item">
57	73	<div class="wrapper">
58		- <div class="thumbnail">{% gravatar user.email 100 %}</div>
59		- <div class="user-info">
60		- <span><b>{{ user.get_full_name }}</b></span>
61		- <span class="quiet">{{ user.email }}</span>
62		- </div>
63		- <div>
64		- <a class="btn btn-info pull-left" href="{% url 'user_profile' user.username %}">{% trans "My Profile" %}</a>
65		- {% trans 'Logout' as logout_text %}
66		- <a class="btn btn-default pull-right" href="{% url 'logout' %}"> {% trans "Logout" %}</a>
	74	+ <div class="thumbnail">{% gravatar user.email %}</div>
	75	+ <div class="user-info">
	76	+ <span><b>{{ user.get_full_name }}</b></span>
	77	+ <span class="quiet">{{ user.email }}</span>
	78	+ </div>
	79	+ <div>
	80	+ <a class="btn btn-info pull-left" href="{% url 'user_profile' user.username %}">{% trans "My Profile" %}</a>
	81	+ {% trans 'Logout' as logout_text %}
	82	+ <a class="btn btn-default pull-right" href="{% url 'logout' %}"> {% trans "Logout" %}</a>
67	83	</div>
68	84	</div>
69	85	</li>
70	86	</ul>
71		- </li> <!-- end of user-menu -->
72		- {% endif %}
73		- </ul>
74		- </div>
75		- </div> <!-- end of access-menu -->
76		- <div class="row" id="spb-logo-search">
77		- <div class="col-md-6 logo-box">
78		- <div id="logo">
79		- <a href="/" id="portal-logo">
80		- <img class="img-responsive pull-left" src="{% static 'img/logo.svg' %}" />
81		- </a>
82		- </div>
83		- </div>
84		- <div class="col-md-6">
85		- <div class="input-group box-search navbar-right">
86		- <form action="{% url 'haystack_search' %}" method="GET" id="search-form" class="navbar-form" role="search">
87		- <div class="form-group">
88		- <label class="sr-only" for="header-searchbox">{% trans 'Search...' %}</label>
89		- <input name="q" id="header-searchbox"
90		- class="form-control" value="{{ request.GET.q }}"
91		- type="search" placeholder="{% trans 'Search...' %}" />
92		- </div>
93		- <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
94		- </form>
95		- </div>
	87	+ </li>
	88	+ {% endif %}
	89	+ </ul>
	90	+ </div>
	91	+ <div id="logo">
	92	+ <a id="portal-logo" title="" href="/">
	93	+ <span id="portal-title-1">Portal do</span>
	94	+ <h1 id="portal-title" class="corto">Software Público Brasileiro</h1>
	95	+ <span id="portal-description">MINISTÉRIO DO PLANEJAMENTO, ORÇAMENTO E GESTÃO</span>
	96	+ </a>
	97	+ </div>
	98	+ <div id="portal-searchbox">
	99	+ {% comment %}
	100	+ <form action="{% url 'haystack_search' %}" method="GET" id="search-form" class="navbar-form navbar-right hidden-xs hidden-sm" role="search">
	101	+ <div class="form-group">
	102	+ <label class="sr-only" for="header-searchbox">{% trans 'Search here...' %}</label>
	103	+ <input name="q" id="header-searchbox"
	104	+ class="form-control" value="{{ request.GET.q }}"
	105	+ type="search" placeholder="{% trans 'Search here...' %}" />
96	106	</div>
	107	+ <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
	108	+ </form>
	109	+ {% endcomment %}
	110	+ <form id="nolivesearchGadget_form" action="/search/">
	111	+ <fieldset class="LSBox"><legend class="hiddenStructure">Buscar no portal</legend>
	112	+ <label class="hiddenStructure" for="nolivesearchGadget">Buscar no portal</label>
	113	+ <input name="SearchableText" type="text" size="18" title="Buscar no portal" placeholder="Buscar no portal" class="searchField" id="nolivesearchGadget">
	114	+ <input class="searchButton" type="submit" value="Buscar no portal">
	115	+ </fieldset>
	116	+ </form>
97	117	</div>
98		- </div>
99		- </div><!-- end of first-nav -->
100		- <div id="second-nav">
101		- <div class="container">
102		- <div class="row">
103		- <ul id="quick-links-sm" class="hidden-md hidden-lg">
104		- <li id="link-faq">
105		- <a href="/social/spb/ajuda">FAQ</a>
	118	+ <div id="social-icons">
	119	+ <ul>
	120	+ <li id="portalredes-facebook" class="portalredes-item">
	121	+ <a href="#">Facebook</a>
106	122	</li>
107		- <li id="link-contact">
108		- <a href="/social/spb/contato">Contato</a>
	123	+ <li id="portalredes-googleplus" class="portalredes-item">
	124	+ <a href="#">Google+</a>
109	125	</li>
110		- </ul>
111		- <div class="navbar-header logo">
112		- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
113		- <span class="icon-bar"></span>
114		- <span class="icon-bar"></span>
115		- <span class="icon-bar"></span>
116		- </button>
117		- </div>
118		- <ul id="menu-spb" class="nav navbar-nav navbar-collapse collapse ">
119		- <li>
120		- <a href="{% url 'thread_list' %}">{% trans "Groups" %}</a>
	126	+ <li id="portalredes-instagram" class="portalredes-item">
	127	+ <a href="#">Instagram</a>
121	128	</li>
122		- {% plugins_menu %}
123		- </ul>
124		- <ul id="quick-links" class="nav navbar-nav navbar-right hidden-xs hidden-sm">
125		- <li id="link-faq">
126		- <a href="/social/spb/ajuda">Perguntas Frequentes</a>
	129	+ <li id="portalredes-twitter" class="portalredes-item">
	130	+ <a href="#">Twitter</a>
	131	+ </li>
	132	+ <li id="portalredes-youtube" class="portalredes-item">
	133	+ <a href="#">YouTube</a>
127	134	</li>
128		- <li id="link-contact">
129		- <a href="/social/spb/contato">Contato</a>
	135	+ <li id="portalredes-soundcloud" class="portalredes-item">
	136	+ <a href="#">SoundCloud</a>
	137	+ </li>
	138	+ <li id="portalredes-slideshare" class="portalredes-item">
	139	+ <a href="#">Slideshare</a>
	140	+ </li>
	141	+ <li id="portalredes-rss" class="portalredes-item last-item">
	142	+ <a href="#">RSS</a>
130	143	</li>
131	144	</ul>
132	145	</div>
133	146	</div>
	147	+ <div id="sobre">
	148	+ <ul>
	149	+ <li id="softwarepublico-groups" class="softwarepublico-item">
	150	+ <a href="https://portal.softwarepublico.gov.br/archives/thread/" title="Groups">Groups</a>
	151	+ </li>
	152	+ <li id="softwarepublico-perguntas-frequentes" class="softwarepublico-item">
	153	+ <a href="/social/spb/ajuda" title="Perguntas frequentes">Perguntas frequentes</a>
	154	+ </li>
	155	+ <li id="softwarepublico-contato" class="softwarepublico-item">
	156	+ <a href="/social/spb/contato" title="Contato">Contato</a>
	157	+ </li>
	158	+ </ul>
	159	+ </div>
134	160	</div>
135		-</div>
136	161	</header>
	162	+
	163	+{% block main_content %}
	164	+ <a name="acontent" id="acontent"></a>
	165	+{% endblock %}
...	...