\section{Página inicial do Portal de Participação do governo}
\label{Att:PaginaInicial}

\begin{figure}[h]
\center
\includegraphics[scale=0.16]{pagina-inicial.png}
\caption{Página inicial do Portal de Participação}
\label{fig:pagina-inicial}
\end{figure}

\newpage
\section{Cabeçalho do Portal de Participação do governo}
\label{Att:CabecalhoPortal}

{\tiny
  \begin{verbatim}
  <div id="barra-brasil">
  </div>
  <div class="header-content">
    <div role="banner" id="header">
      <div>
        <ul id="accessibility">
          <li>
            <a id="link-conteudo" href="#content" accesskey="1">
              Ir para o conteúdo
              <span>1</span>
            </a>
          </li>
          <li>
            <a id="link-navegacao" href="#barra-psocial"
  accesskey="2">
              Ir para o menu
              <span>2</span>
            </a>
          </li>
          <li>
            <a id="link-buscar" href="#portal-searchbox"
  accesskey="3">
              Ir para a Busca
              <span>3</span>
            </a>
          </li>
          <li>
            <a id="link-rodape" href="#theme-footer"
  accesskey="4">
              Ir para o rodapé
              <span>4</span>
            </a>
          </li>
        </ul>
        <ul id="portal-siteactions">
          <li>
            <a href="#">Acessibilidade</a>
          </li>
          <li>
            <a href="#">Alto Contraste</a>
          </li>
          <li>
            <a href="#">Mapa do Site</a>
          </li>
        </ul>
  
        <div id="logo">
          <a title="Participa.br" href="/">
            <span id="portal-title">Participa.br</span>
          </a>
        </div>
  
        <div role="search" id="portal-searchbox">
          <form>
            <input type="text" autocomplete="off"
  name="SearchableText" size="18" title="Buscar no Site"
  placeholder="Buscar no Site" accesskey="3"
  class="searchField" id="searchGadget">
            <input type="submit" class="searchButton"
  value="Buscar"></form>
        </div>
  
        <div id="social-icons">
          <ul>
            <li>
              <a id="sb_face" title="Facebook"
  href="http://www.facebook.com/participa"><span>Facebook</span></a>
            </li>
            <li>
              <a id="sb_tweet" title="Twitter"
  href="http://twitter.com/participa"><span>Twitter</span></a>
            </li>
            <li>
              <a id="sb_youtb" title="Youtube"
  href="http://youtube.com/user/participa"><span>Youtube</span></a>
            </li>
            <li>
              <a id="sb_flickr" title="Flickr"
  href="#"><span>Flickr</span></a>
            </li>
          </ul>
        </div>
      </div>
  
      <div id="sobre">
        <ul>
          <li id="link-faq">
            <a href="/portal/faq">Perguntas frequentes</a>
          </li>
          <li id="link-contact">
            <a href="/contact/portal/new">Contato</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  
  <div id="barra-psocial">
    <div id="categories_menu">
      <%= render :file => 'categories.rhtml' %>
    </div>
  </div>
  \end{verbatim}
}

\newpage
\section{Código html para gerar as categorias e bolas da página
inicial}
\label{Att:CategoriasBolas}

{\tiny
  \begin{verbatim}
  <div id="destaque-temas">
    <div id="notice-contribua">CONTRIBUA PARA OS GRANDES TEMAS</div>
    <div id="circles">
      <a href="http://participa.gov.br/cat/areas-tematicas/saude"
      class="circle c1" style="top:50px;"><span>Saúde</span></a>
      <a href="#" class="circle c1" style="top:30px;left:270px;"><span
      class="twowords">Reforma Política</span></a>
      <a href="#" class="circle c1" style="top:230px;left:156px;"><span
      class="twowords">Soberania Digital</span></a>
      <a href="#" class="circle c1" style="top:25px;left:600px;"><span
      class="twowords">Mobilidade Urbana</span></a>
      <a href="#" class="circle c1"
      style="top:255px;left:487px;"><span>Reciclagem</span></a>
      <a href="#" class="circle c1"
      style="top:185px;left:762px;"><span>Educação</span></a>
      
      <a href="#" class="circle c2"
      style="top:230px;left:50px;"><span>Finanças</span></a>
      <a href="#" class="circle c2"
      style="top:209px;left:326px;"><span>Gestao</span></a>
      <a href="#" class="circle c2"
      style="top:346px;left:388px;"><span>Cultura</span></a>
      <a href="#" class="circle c2"
      style="top:145px;left:518px;"><span>Esporte</span></a>
      <a href="#" class="circle c2"
      style="left:446px;"><span>Política</span></a>
      
      <a href="#" class="circle c3"
      style="top:88px;left:187px;"><span>Ciencia</span></a>
      <a href="#" class="circle c3"
      style="top:112px;left:856px;"><span>Pecuária</span></a>
      <a href="#" class="circle c3"
      style="top:348px;left:877px;"><span>Pesca</span></a>
      <a href="#" class="circle c3"
      style="top:110px;left:776px;"><span>Engenharia</span></a>
      <a href="#" class="circle c3"
      style="top:335px;left:664px;"><span>Comunicação</span></a>
      <a href="#" class="circle c3"
      style="top:200px;left:687px;"><span>Política</span></a>
      
      <a href="#" class="circle c4"
      style="top:166px;left:172px;"><span>Gestão</span></a>
      <a href="#" class="circle c4"
      style="top:342px;left:744px;"><span>Indígena</span></a>
      <a href="#" class="circle c4"
      style="top:209px;left:617px;"><span>Assistencia</span></a>
      
      <a href="#" class="circle c4"
      style="top:317px;left:332px;"><span>Tecnologia</span></a>
      <a href="#" class="circle c4"
      style="top:277px;left:422px;"><span>Turismo</span></a>
    </div>
  </div>
  \end{verbatim}
}

\newpage
\section{Folha de Estilo - CSS}
\label{Att:CSS}

{\tiny
  \begin{verbatim}
  @import url(../profile-base/style.css);
  
  /* Main style page */
  body {
      background: #FFF;
  }
  
  #link-go-content {
      display: none;
  }
  
  #wrap-1 {
      width: 100%;
      margin: 0px;
  }
  
  #theme-header {
      font-size: 12px;
  }
  
  #wrap-2 {
      max-width: 960px;
      margin: auto;
      border: 0px;
      margin-top: 160px;
  }
  
  #main-content-wrapper-1,
  #main-content-wrapper-2,
  #main-content-wrapper-3,
  #main-content-wrapper-4,
  #main-content-wrapper-5,
  #main-content-wrapper-6,
  #main-content-wrapper-7,
  #main-content-wrapper-8 {
      background-image: none;
      background: none;
  }
  
  /* Overwriting Brasil gov style */
  
  body {
    font-size: 12px;
  }
  
  label {
    font-weight: normal;
  }
  
  #portal-siteactions {
     padding-bottom: 5px;
     margin-top: -10px;
  }
  
  /* Bar Psocial Style */
  
  #user {
     top: -30px;
     font-size: 12px;
  }
  
  #user form {
      display:none;
  }
  
  #barra-brasil {
      box-shadow: 0px 0px 10px #DFDFDF inset;
      z-index: 9999;
      position: relative;
      width: 100%;
  }
  
  #barra-psocial {
      position: relative;
      height: 40px;
      margin: auto;
      background: url(images/barra-psocial-bg.png) repeat-x;
  }
  
  #barra-psocial li {
    float: left;
  }
  
  #assets-menu {
      background: #E8E8E8;
      top: 35px;
      left: 80px;
      min-width: 132px;
  }
  #assets-menu a {
      border: 1px solid #E8E8E8;
  }
  
  #search-header {
      position: relative;
      width: 960px;
      margin: auto;
  }
  #search-header .search-field {
      width: 200px;
      position: absolute;
      top: 100px;
      right: 20px;
      z-index: 999;
  }
  #search-header input.button.with-text {
      width: 22px;
      text-indent: -1000px;
      float: right;
      height: 30px;
      max-height: 30px;
      border: none;
      background-color: transparent;
  }
  #search-header #q {
      width: 170px;
      height: 25px;
      border-radius: 5px;
  }
  
  #categories_menu {
      max-width: 960px;
      margin: auto;
  }
  
  #cat_menu {
      background: url(images/logo-PS-barra.png) no-repeat center
  left;
      height: 40px;
      padding-left: 60px;
  }
  
  #cat_menu li {
      list-style: none;
      font-size: 12px;
      font-weight: bold;
      padding: 15px 20px;
      text-transform: uppercase;
  }
  
  #cat_menu li#category1 {
      color: #ba4a00
  }
  #cat_menu li#category2 {
      color: #3b7390
  }
  #cat_menu li#category3 {
      color: #643c67
  }
  #cat_menu li#category4 {
      color: #826938
  }
  #cat_menu li#category5 {
      color: #1D571F
  }
  #cat_menu li#category6 {
      color: #017b16
  }
  #cat_menu li#category7 {
      color: #1a55dd
  }
  #cat_menu li#category8 {
      color: #753900
  }
  #cat_menu li#category9 {
      color: #56762b
  }
  #cat_menu li#category10 {
      color: #3867b7
  }
  #cat_menu li#category11 {
      color: #00439e
  }
  #cat_menu li#category12 {
      color: #00A0DB
  }
  #cat_menu li#category13 {
      color: #AD6500
  }
  #cat_menu li#category14 {
      color: #DE9200
  }
  
  /* Search Button */
  #search-button a {
      display: inline-block;
      width: 29px;
      height: 25px;
      margin-right: 3px;
      margin-top: 10px;
  }
  
  #search-button a:hover {
      opacity: 0.6;
  }
  
  #search-button #sb_search {
  background-image: url(images/search.png);
  background-size: 100% 100%;
  }
  
  #search-button span { display: none; }
  
  /* Social Buttons */
  #social-buttons a {
      width: 18px;
      height: 20px;
      margin-right: 3px;
      margin-top: 10px;
  }
  
  #social-icons a {
      width: 19px;
      height: 19px;
      display: inline-block;
      background-repeat: no-repeat;
  }
  
  #social-icons a:hover {
      opacity: 0.6;
  }
  
  #social-icons #sb_face {
  background-image: url(images/icone-facebook.png);
  }
  
  #social-icons #sb_tweet {
  background-image: url(images/icone-twitter.png);
  }
  
  #social-icons #sb_youtb {
  background-image: url(images/icone-youtube.png);
  }
  
  #social-icons #sb_flickr {
  background-image: url(images/icone-flickr.png);
  }
  
  #social-icons span { display: none; }
  
  /* Top links */
  #top-links {
    padding-bottom: 3px;
  }
  
  #top-links a {
      display: inline-block;
      font-size: 10px;
      margin-right: 3px;
      margin-top: 15px;
      color: #E7F1E9;
      text-decoration: none;
      text-transform:uppercase;
  }
  
  #top-links a:hover {
      opacity: 0.6;
  }
  
  #top-links #link-faq {
      border-right: 1px solid #E7F1E9;
      padding-right:5px;
  }
  
  /* Title Header */
  
  #content .main-block h1,
  #content .main-block h2,
  #content .main-block h3,
  #content .main-block h4 {
      font-family:  'Open Sans', Arial, Helvetica, sans-serif;
  }
  
  #content .main-block h1,
  #not-found h1,
  #access-denied h1 {
      color: #2C67CD;
      font-size: 1.7em;
      padding: 7px 0;
      margin-left: 0 !important;
      padding-left: 0.3em;
      border-bottom: 1px solid #CCCCCC;
      border-top: 2px solid #172838;
  }
  
  #content .title {
      font-weight: normal; !important;
      padding-right: 70px;
  }
  
  #content .main-block h1 {
      font-size: 2.3em !important;
      font-weight: bold !important;
  }
  
  #content .main-block h2 {
      font-size: 1.8em !important;
      min-height: 48px;
  }
  
  #content .main-block h3 {
      font-size: 1.5em !important;
      min-height: 48px;
  }
  
  #content .main-block h4 {
      font-size: 1.3em !important;
      min-height: 48px;
  }
  
  div#article-parent {
      position: absolute;
      right: 0px;
      top: 0px;
  }
  
  /* Menu List left */
  
  #content .box-2 .block-title {
      font-size: 12px;
      text-align: left;
      border-top: 4px solid #757575;
      background: #eeefff;
      border-bottom: none;
      color: #757575;
      padding: 8px 8px 24px 10px;
      text-transform: uppercase;
      margin: 0;
  }
  
  #content .box-2 .link-list-block li a.link-this-page {
      width: auto;
      border-right: none;
      font-weight: bold;
      color: #436976 !important;
      border-top: 2px solid #64946e !important;
      border-bottom: 2px solid #64946e !important;
      background-color: #eeefff;
      border-radius: 0px;
  }
  
  #content .box-2 .link-list-block li a {
      font-size: 14px;
      line-height: 1em;
      color: #436976;
      background-color: #FFF;
      border-radius: none;
      padding: 0.6em 1.5em;
  }
  
  #content .box-2 .link-list-block li a:hover {
      background-color: #FFF;
      color: #000;
  }
  
  #content .box-2 .link-list-block li {
      border-bottom: 1px solid #ddd;
      border-top: none;
      padding: 0;
      margin: 0;
  }
  
  /* Blocks main on home */
  
  .action-home-index .main-block {
      display: none;
  }
  
  .action-home-index .box-2 {
      display: none;
  }
  
  .action-home-index .box-1 {
      margin-left: 0px;
  }
  
  /* Blocks main style */
  
  .action-home-index #content .box-1 .block-title {
      padding: 0.6em 1.5em;
      color: #444;
      text-transform: uppercase;
      font-variant: normal;
  }
  
  .action-home-index #content .box-1 .main-block {
      background: #FFF;
      width: 100%;
      clear: both;
  }
  
  .action-home-index #content .box-1 .article-block {
      background: none;
  }
  
  #content .blog-post .title {
      text-align: left;
  }
  
  /* Box styles */
  .box-1 {
      Xmargin: 0 0 0 170px;
  }
  
  .action-home-index .box-2 {
      width: 160px;
  }
  
  .action-home-index #content .box-3 .block {
      width: 210px;
      margin: 0px 0px 0px 30px;
      float: left;
  }
  
  /* Editorial Area */
  
  #content .box-1 .news-area {
      width: 32%;
      margin-right: 10px;
  }
  
  #content .box-1 a {
      text-decoration: none;
  }
  
  #content .box-1 .news-area h3 {
      background: #DFDFDF;
      text-decoration: none;
      line-height: 40px;
      height: 40px;
      min-height: 40px;
      border-top: 8px solid #545454;
      padding-left: 10px;
      text-transform: uppercase;
      font-weight: normal;
      font-size: 20px;
  }
  
  #content .box-1 .news-area a.news-see-more {
      position: relative;
      border-top: 3px solid #545454;
      background-color: #DFDFDF;
      width: auto;
      display: block;
      text-align: right;
      padding: 5px 15px;
  }
  
  #content .box-1 .news-area ul {
      background: #FFF;
      border: none;
      background-image: none;
  }
  
  .blog-post {
      background: none !important;
      margin: 0px;
  }
  
  /* Block Display Content style */
  
  .box-1 .display-content-block {
      font-size: 14px;
  }
  
  .box-1 .display-content-block h2 {
      font-size: 24px;
      font-weight: bold;
  }
  
  /* Block Article style */
  
  .action-home-index #content .box-1 .article-block {
      width: 100%;
      font-size: 14px;
  }
  
  .action-home-index #content .box-1 .article-block .block-title {
      display: none;
  }
  
  .action-home-index #content .box-1 .article-block h2 {
      font-size: 34px;
      font-weight: bold;
  }
  
  .action-home-index #content .box-1 .article-block .read-more {
      float: right;
  }
  
  .action-home-index #content .box-1 .article-block .read-more a {
      display: block;
      height: 39px;
      width: 161px;
      text-align: center;
      padding: 7px;
      background: url(images/button-read-more2.png) no-repeat;
  }
  
  .action-home-index #content .box-1 .article-block .read-more a,
  .action-home-index #content .box-1 .article-block .read-more a:hover {
     color: transparent !important;
  }
  
  .action-home-index #content .box-1 .article-block .read-more
  a:first-child {
      display: none;
  }
  
  /* Block My Network style */
  
  .action-home-index #content .my-network-block {
      background: #eeefff;
  }
  
  .action-home-index #content .my-network-block .block-title {
      background: #757575;
      padding: 0.6em 1.5em;
      color: #FFF;
  }
  
  .action-home-index #content .my-network-block ul {
      padding: 10px 0px 10px 20px;
  }
  
  .action-home-index #content .my-network-block .my-network-actions
  a.button {
      width: 100px;
      display: block;
      margin-bottom: 5px;
  }
  
  /* Blocks profiles and enterprises */
  .recent-documents-block ul {
      padding: 0px 0px 0px 30px;
  }
  
  .box-1 .menu-submenu {
      bottom: 80px;
      right: -40px;
  }
  
  .box-1 .common-profile-list-block .vcard {
      border-radius: 0px;
      -moz-border-radius: 0px;
  }
  
  .box-1 .common-profile-list-block .profile_link {
      width: 65px;
      height: 80px;
  }
  
  .box-1 .common-profile-list-block span {
   width: auto;
  }
  
  .box-1 .common-profile-list-block .profile-image {
      display: block;
      height: auto;
      width: auto;
      text-align: center;
      margin: 0px;
      padding: 0px;
      padding-bottom: 5px;
  }
  
  .box-1 .common-profile-list-block {
      margin-left: 15px;
  }
  
  .action-home-index #content .communities-block .block-title,
  .action-home-index #content .display-people-block .block-title {
      display: none;
  }
  
  #content .display-people-block .banner-span {
      background-color: #f15921;
      color: #FFF;
      font-size: 24px;
      font-weight: normal;
  }
  
  .box-1 .display-people-block .banner-span,
  .common-profile-list-block .vcard a {
      width: 108px;
      height: 57px;
  }
  
  #content .display-people-block .vcard a.profile_link {
      height: 52px;
      margin: 0;
      width: 52px;
  }
  
  .box-1 .block-footer-content {
      clear: both;
      text-align: right;
      font-size: 11px;
      color: #000;
      position: relative;
      padding: 5px;
  }
  
  #content .box-1 .block-footer-content a {
      position: relative;
  }
  
  /* Blocks tags */
  .action-home-index #theme-footer .block.tags-block {
      background: #034811;
      min-height: 50px;
      padding: 20px 0;
      width: 100%;
      margin-bottom: 0px;
      background-image: url(images/bg-fundo-verde-tags.png);
  }
  
  .action-home-index #theme-footer .block.tags-block .block-inner-1 {
      max-width: 960px;
      margin: auto;
  }
  .action-home-index #theme-footer .block.tags-block .block-title {
      display: none;
  }
  
  .action-home-index #theme-footer .tags-block .block-footer-content a {
      color: #FFFFFF;
  }
  
  .action-home-index #theme-footer .block.tags-block a,
  .action-home-index #theme-footer .block.tags-block a:visited,
  .action-home-index #theme-footer .block.tags-block a:hover {
      color: #E7F1E9;
  }
  
  .action-home-index #theme-footer .block.tags-block a:hover {
      text-decoration: underline;
  }
  
  /* Menu List footer */
  
  #content .box-3 .block-title {
      font-size: 12px;
      text-align: left;
      border-top: none;
      background: #FFF;
      border-bottom: none;
      color: #757575;
      padding: 5px;
      text-transform: uppercase;
      margin: 0;
  }
  
  #content .box-3 .link-list-block li a.link-this-page {
      width: auto;
      border-right: none;
      font-weight: bold;
      background-color: #eeefff;
      border-radius: 0px;
  }
  
  #content .box-3 .link-list-block li a {
      font-size: 14px;
      line-height: 1em;
      color: #545454;
      background-color: #FFF;
      border-radius: none;
      padding: 0.6em 1.5em;
  }
  
  #content .box-3 .link-list-block li a:hover {
      background-color: #FFF;
      color: #436976;
  }
  
  #content .box-3 .link-list-block li {
      border-bottom: none;
      border-top: none;
      padding: 0;
      margin: 0;
  }
  
  .agenda-item a {
    color: black;
  }
  .agenda-item a:visited {
    color: black;
    font-weight: normal;
  }
  .agenda-item a:hover {
    color: black;
    text-decoration: underline !important;
  }
  
  #box-organizer .block-target { clear: both; }
  
  /* Custom Icons */
  
  .box-2 .link-list-block ul li .icon-ok,
  .box-2 .link-list-block ul li .icon-eyes,
  .box-2 .link-list-block ul li .icon-edit,
  .box-2 .link-list-block ul li .icon-photos {
      background-position: 0px -325px !important;
      height: 27px;
      padding: 13px 0px 0px 45px !important;
      margin-top: 5px;
      margin-bottom: 5px;
  }
  
  .box-2 .link-list-block ul li .icon-ok {
      background-position: 0px -165px !important;
  }
  .box-2 .link-list-block ul li .icon-eyes {
      background-position: 0px -125px !important;
  }
  .box-2 .link-list-block ul li .icon-edit {
      background-position: 0px -245px !important;
  }
  
  /* Footer */
  
  #theme-footer {
      width: 100%;
  }
  
  #footer-logos {
      background: #00420C;
      max-width: 100%;
      padding: 2em 0;
      height: 49px;
  }
  
  #footer-logos div,
  #footer-license {
      max-width: 960px;
      margin: 0 auto;
  }
  
  #footer-logos a {
    display: block;
    height: 49px;
    float: left;
  }
  
  #footer-logos span {
    display: none;
  }
  
  #footer-logos .logo-acesso {
    background: transparent url(images/acesso-a-informacao.png) center
  center no-repeat;
    width: 107px;
  }
  
  #footer-logos .logo-brasil {
    background: transparent url(images/brasil.png) center center
  no-repeat;
    width: 153px;
  }
  
  #footer-logos .logo-sgpr {
    background: transparent url(images/sgpr.png) center center no-repeat;
    width: 187px;
    margin-right: 30px;
  }
  
  #footer-logos .institucionais {
    float: right;
  }
  
  #footer-license {
    text-align: left;
  }
  
  /* padrao da barra verde - estatistica */
  .action-home-index #content .box-1 .statistics-block {
     width: 100%;
     display: inline-block;
     margin: 0px;
     padding: 28px 0px 15px 0px;
  }
  
  .action-home-index .statistics-block .block-title {
     display: none;
  }
  
  .action-home-index .statistics-block-data ul{
          list-style:none;
  }
  
  .action-home-index .statistics-block-data ul li{
          float:left;
          width:146px;
          margin:0 20px 20px 0px;
          text-align:center;
          color:#fff;
  }
  
  .action-home-index .statistics-block-data ul li .amount{
          font-size:40px !important;
          font-weight:bold;
          width:136px;
  }
  
  .action-home-index .statistics-block-data ul li .label{
          font-size:14px !important;
          clear:both;
          float:left;
          width:136px;
          color:#98baa5;
  }
  
  #header input.searchButton {
    background-image: url(images/search-button.gif);
  }
  
  /* HOME */
  
  .action-home-index #wrap-2 {
    max-width: none;
    padding: 0px;
  }
  
  .action-home-index #boxes {
    margin-top: 0px;
  }
  
  .action-home-index #content {
    margin: 0px;
  }
  
  .action-home-index .home-blocks-inner {
    max-width: 960px;
    margin: auto;
  }
  
  .action-home-index #content-blocks {
    margin-top: 30px;
    clear: both;
  }
  
  .action-home-index #content-blocks .home-blocks-inner {
    text-align: center;
  }
  
  .action-home-index #content .box-1 .display-content-block {
      width: 300px;
      display: inline-block;
      text-align: left;
  }
  
  .action-home-index #content #content-blocks-inner {
      max-width: 960px;
  }
  
  #content .box-1 #content .statistics-block li,
  #content .box-1 #content .display-content-block li {
      list-style: none;
      margin: 0px;
  }
  
  .action-home-index #content .communities-block,
  .action-home-index #content .display-people-block {
      display: inline-block;
      width: 50%;
      vertical-align: top;
      margin-top: 30px;
  }
  
  .action-home-index #content .box-1 .block {
      margin-right: 0px;
  }
  
  .action-home-index #statistics-blocks {
          background:#0c763e;
  }
  
  .action-home-index .statistics-block {
          padding:10px 0 25px 0;
  }
  
  .action-home-index #circles-blocks {
      width: 100%;
      background: url(images/bg-palacio-do-planalto.jpg);
      padding-top: 20px;
  }
  
  .action-home-index #block.track-list-blocks {
      width: 100%;
      background: url(images/bg-pessoas.jpg);
  }
  
  .action-home-index #profile-blocks {
      background: url(images/bg-linhas-cinza.png);
  }
  
  \end{verbatim}
}
