First commit

css/barrabrasil.css

+    #barra-brasil div,#barra-brasil a,#barra-brasil ul,#barra-brasil li{
+	    margin:0;
+	    padding:0;
+	    border:0;
+	    font-size:100%;
+	    font-family:inherit;
+	    vertical-align:baseline;
+    }
+
+    #barra-brasil ul{
+	    list-style:none
+    }
+
+    #barra-brasil{
+	    height:32px;
+	    background:#f1f1f1;
+	    font-weight:bold;
+	    font-size:12px;
+	    line-height:32px;
+	    font-family:"Open Sans",Arial,Helvetica,sans-serif;
+	    border-bottom:1px solid #dfdfdf;
+	    position: relative;
+    }
+
+    #barra-brasil a{
+	    text-decoration:none;
+	    font-family: "Open Sans",Arial,Helvetica,sans-serif; 
+    }
+
+    div#wrapper-barra-brasil{
+	    position:relative;
+	    overflow:hidden;
+	    margin:0 auto;
+	    width:100%;
+	    height:100%
+    }
+    
+    #wrapper-barra-brasil span {
+        padding: 0;
+    }
+
+    #barra-brasil li {
+        line-height: inherit;
+    }
+
+    #barra-brasil .brasil-flag{
+	    float:left;
+	    padding:7px 0 6px;
+	    width:115px;
+	    height:19px;
+	    border-right:2px solid #dfdfdf
+    }
+
+    #barra-brasil .brasil-flag .link-barra{
+	    display:block;
+	    padding-left:42px;
+	    width:43px;
+	    background:url("../img/brasil_flag.png") 8px center no-repeat;
+	    text-transform:uppercase;
+	    line-height:19px
+    }
+
+    #barra-brasil .acesso-info{
+	    position:absolute;
+	    left:130px
+    }
+
+    #barra-brasil .list-brasil .first{
+	    border-left:2px solid #dfdfdf;
+	    padding-left: 13px;
+    }
+
+    #barra-brasil .list-item{
+	    display:inline-block;
+	    padding:0 15px 0 10px;
+	    height:32px;
+	    border-right:2px solid #dfdfdf
+    }
+
+    #barra-brasil .link-barra{
+	    color:#606060
+    }

css/estilo.css

+
+
+/*
+* This is a manifest file that'll be compiled into application.css, which will include all the files
+* listed below.
+*
+* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
+*
+* You're free to add application-wide styles to this file and they'll appear at the top of the
+* compiled file, but it's generally better to create a new file per style scope.
+*
+*= require_self
+*= require jquery.ui.datepicker
+*= require tamanho_fonte.css.scss
+*= require typeahead.css.scss
+*/
+
+
+div#wrapper-barra-brasil{
+  max-width:960px;
+}
+
+.list-brasil{
+    position:absolute;
+    top:0;
+    right:0;
+}
+
+/* CONTEÚDO */
+
+/* Limite interior do conteúdo */
+
+.conteudo-limit {
+  width:960px;
+  margin: 0 auto;
+}
+
+/* ACESSIBILIDADE */
+
+#acessibilidade {
+  float:right;
+}
+#acessibilidade-box {
+    height:28px;
+}
+
+/* primeiro item da lista */
+
+.ac-font-size {
+  padding-left:5px;
+}
+
+/* DESCRIÇÃO E LOGIN */
+
+/* descrição */
+
+/* texto da pagina inicial */
+
+#descricao-home {
+  width:539px;
+  float:left;
+  text-align: justify;
+  line-height:20px;
+}
+
+#descricao-home img{
+  max-width:539px;
+  max-height:166px;
+}
+
+#infografico {
+  padding-top:20px;
+  width:539px;
+  height:166px;
+}
+
+/* tamanho do infografico (caso seja imagem) */
+
+#infografico img{
+  max-width:539px;
+  max-height:166px;
+}
+
+/* formulario de login */
+
+#login-home {
+  width:337px;
+  float:right;
+}
+
+/* RODAPÉ */
+
+#rodape-list li{
+  line-height:40px;
+  display: inline-block;
+  padding-left: 90px;
+}
+
+.rodape-color {
+    height:40px;
+}
+
+#footer-images {
+  text-align: center;
+}
+#footer-images ul li{
+  display: inline-block;
+  padding-left:10px;
+  padding-right:10px;
+}
+
+/* POS LOGIN */
+
+#header-logo {
+  line-height:25px;
+  width:358px;
+  float:left;
+}
+#header-logo img {
+  height:76px;
+  margin:5px;
+  margin-top: 9px;
+  margin-left: 0px;
+}
+
+#header-content {
+  float:right;
+}
+
+.header-color {
+    height: 93px;
+}
+
+#agendador-texts {
+  vertical-align:top;
+  display:inline-block;
+  margin-top:22px;
+  max-width: 270px;
+}
+
+#header-content-in {
+  display:inline-block;
+}
+#header-menu {
+  float: left;
+}
+.menu-list-item{
+  display:inline-block;
+  margin-right:-6px;
+}
+
+.menu-list-item:hover{
+  background-color:#F0F0F0;
+}
+.separador {
+	border-style: solid;
+	border-top-color: #92BF23;
+	border-top-width: 3px;
+}
+
+.menu-list-a {
+  padding-top: 23px;
+  padding-bottom: 55px;
+  text-decoration: none;
+  display: inline-block;
+  height: 15px;
+  line-height: 15px;
+  vertical-align: middle;
+}
+
+.submenu-contraste {
+    background-color: #000;
+    border-left: 1px solid #FF0 ;
+    border-right: 1px solid #FF0 ;
+    border-bottom: 1px solid #FF0 ;
+}
+
+.submenu-contraste a:hover{
+  background-color:black;
+}
+
+
+.special-border{
+  border-left: 2px solid #E2E7EA;
+  /*padding-left: 15px;
+  padding-right: 15px;*/
+  padding:15px;
+}
+
+.perfil div {
+  max-width: 105px;
+  max-height: 63px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+#header-user{
+  display: inline-block;
+  height:86px;
+  width:86px;
+}
+
+#header-user img{
+  margin:10px;
+  border: 5px solid #3c3c3b;
+  height:56px;
+  width:56px;
+}
+.notifications {
+  display:inline-block;
+  float:right;
+  position:absolute;
+  right:0px;
+  bottom:-8px;
+  height:16px;
+  width:16px;
+  vertical-align:middle;
+  text-align: center;
+  font-weight:bold;
+  color:white;
+  font-size:16px;
+  padding:10px;
+}
+
+.submenu, .submenuExpand {
+  position: absolute;
+  background-color: #FFF;
+  visibility:hidden;
+  opacity: 0;
+  border-left:1px solid #92BF23;
+  border-right:1px solid #92BF23;
+  border-bottom:1px solid #92BF23;
+}
+
+.submenu li, .submenuExpand li {
+  display:block;
+  line-height:0px;
+  margin:0;
+}
+.submenu a, .submenuExpand a{
+  padding:15px;
+  border-left: none;
+  line-height:16px;
+  display:block;
+  width:calc(100% - 29px);
+}
+
+.submenu li:hover{
+  background-color:#F0F0F0;
+}
+
+#menu-list li:hover ul, submenu {
+  display:block;
+  visibility:visible;
+  opacity: 1;
+}
+
+.menu-icon {
+  display:none;
+}
+.header-content-menu {
+    float:right;
+}
+.header-content-user {
+    float:right;
+}
+
+.photo-optional{
+  display:none;
+}
+
+.header-contraste .special-border{
+  border-left:2px solid yellow;
+}
+#header-menu-contraste ul {
+  background-color: #000;
+  border-left: 1px solid #FF0;
+  border-right: 1px solid #FF0;
+  border-bottom: 1px solid #FF0;
+}
+#header-menu-contraste ul li a:hover, #header-menu-contraste ul li:hover{
+  background-color: #111;
+}
+
+#notifications {
+  display:inline-block;
+  float:right;
+}
+#notificacoes-bg {
+  margin-left: -480px; /* - metade do width */
+}
+.termo_compromisso {
+  width: 75%;
+}
+
+.agreement-actions {
+    width:75%;
+
+}
+#selecionar_horarios {
+    width:675px;
+}
+#selecionar_horarios #continuar {
+    float:right;
+    margin-right: 54px;
+}
+
+.img-prefeitura {
+    max-width:960px;
+    max-height:92px;
+}
+#agendador-name {
+    font-size:16px;
+}
+
+.prefeitura-name {
+    font-size:15px;
+}
+
+#desc-login-box {
+    display:table;
+}
+
+.tabela thead tr th{
+    text-align: left;
+}
+
+.tabela td{
+    text-align:left;
+}
+
+
+.edit {
+    width:30px;
+}
+
+#dias_atendimento {
+    margin-top: 5px;
+    margin-left:8px;
+}
+
+.balloon {
+    width: 200px;
+}
+
+.balloon .arrow {
+    border-color: transparent #000 transparent transparent;
+    border-style: solid;
+    border-width: 10px;
+    display: block;
+    height: 0;
+    left: -20px;
+    position: absolute;
+    top: 50px;
+    width: 0;
+}
+#calendario_agendamento td {
+  padding: 12px;
+}
+#calendario_agendamento table {
+    width:350px;
+}
+
+#agree {
+    float:right;
+}
+.fixed-width select{
+  width:100%;
+}
+.content-user {
+    position:relative;
+    height:93px;
+}
+#separador-contraste{
+  border-top: 3px solid yellow;
+}
+.field-h, .field-h select {
+  width:210px;
+  display:inline-block;
+  margin-right:10px;
+}
+#actions-history {
+  width:240px;
+}
+.first-collum, .second-collum {
+  width: 350px;
+  display:inline-block;
+}
+.first-collum {
+  float:left;
+  margin-right:100px;
+  margin-bottom: 20px;
+}
+.first-collum select, .second-collum select {
+  width: 100%;
+}
+.first-collum textarea, .second-collum textarea {
+  max-width: 326px;
+  min-width: 326px;
+  width:326px;
+  height:90px;
+}
+.first-collum input, .second-collum input{
+  max-width:326px;
+  width:326px;
+}
+.first-collum input[type="checkbox"], .second-collum input[type="checkbox"]{
+  width:auto;
+}
+.second-collum input[type="submit"]{
+  width:auto;
+}
+.first-collum #cidadao_foto {
+  margin-bottom:20px;
+}
+.second-collum .actions {
+  float:right;
+}
+.second-collum #reset_btn {
+  margin-right:10px;
+}
+.second-line {
+  clear: both;
+}

css/estilo2.css

+/*
+* This is a manifest file that'll be compiled into application.css, which will include all the files
+* listed below.
+*
+* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
+*
+* You're free to add application-wide styles to this file and they'll appear at the top of the
+* compiled file, but it's generally better to create a new file per style scope.
+*
+*= require_self
+*= require jquery.ui.datepicker
+*= require tamanho_fonte.css.scss
+*= require typeahead.css.scss
+*/
+
+div#wrapper-barra-brasil{
+max-width:740px;
+}
+
+.list-brasil{
+    position:absolute;
+    top:0;
+    right:0;
+}
+
+/* CONTEÚDO */
+
+/* Limite interior do conteúdo */
+
+.conteudo-limit {
+    width:740px;
+    margin: 0 auto;
+}
+
+/* ACESSIBILIDADE */
+
+#acessibilidade {
+    float:right;
+}
+
+#acessibilidade-box {
+    height:28px;
+}
+
+/* primeiro item da lista */
+
+.ac-font-size {
+    padding-left:5px;
+}
+
+/* DESCRIÇÃO E LOGIN */
+
+/* descrição */
+
+/* texto da pagina inicial */
+
+#descricao-home {
+    width:100%;
+    text-align: justify;
+    line-height:20px;
+    margin-top:10px;
+}
+
+#descricao-home img{
+    max-width:740px;
+}
+
+#infografico {
+    padding-top:20px;
+    width:100%;
+    text-align:center;
+}
+
+/* tamanho do infografico (caso seja imagem) */
+
+#infografico img{
+    max-width:740px;
+}
+
+/* formulario de login */
+
+#login-home {
+    width:740px;
+    margin: 0 auto;
+}
+
+/* RODAPÉ */
+
+#rodape-list li{
+    line-height:40px;
+    display: inline-block;
+    padding-left: 50px;
+}
+
+.rodape-color {
+    height:40px;
+}
+
+#footer-images ul li{
+    display: inline-block;
+    padding-left:10px;
+    padding-right:10px;
+}
+
+/* POS LOGIN */
+
+.header-color {
+    height: 104px;
+}
+
+#header-logo {
+    line-height:25px;
+    width:278px;
+    float:left;
+}
+#header-logo img {
+    height:65px;
+    margin:5px;
+    margin-top: 20px;
+}
+
+#header-content {
+
+    float:right;
+}
+
+.content-menu{
+    width:376px;
+}
+
+#agendador-texts {
+    vertical-align:top;
+    display:inline-block;
+    margin-top:18px;
+    width: 199px;
+}
+
+#header-content-in {
+    float:right;
+    display:inline-block;
+    /*margin-top: 12px;*/
+}
+#header-menu {
+    float: left;
+}
+.menu-list-item{
+    display:inline-block;
+    margin-right:-5px;
+}
+
+.menu-list-item:hover, .submenuExpand li :hover{
+  background-color:#F0F0F0;
+}
+
+.menu-list-a {
+    padding-top: 27px;