diff --git a/cabecalho-azul-theme.css b/cabecalho-azul-theme.css index 9333db5..5c527bf 100644 --- a/cabecalho-azul-theme.css +++ b/cabecalho-azul-theme.css @@ -2,32 +2,21 @@ /*(amarelo-escuro=#096A95)*/ /****************** cabecalho ******************/ -#theme-header{} +#theme-header { + background: url('images/header-bg.jpg') center 0 no-repeat; +} #header { - padding: 13px 0 0 0; -background-color: #0C96D4;/*(amarelo-claro)*/ - /* Old browsers */ - background-color: #096A95; /*(amarelo-escuro)*/ - background-image: -moz-radial-gradient(center, ellipse cover, #0C96D4 1%, #096A95 100%); /*(amarelo-claro)(amarelo-escuro)*/ - /* FF3.6+ */ - background-image: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,#0C96D4), color-stop(100%,#096A95)); - /* Chrome,Safari4+ */ - background-image: -webkit-radial-gradient(center, ellipse cover, #0C96D4 1%,#096A95 100%); - /* Chrome10+,Safari5.1+ */ - background-image: -o-radial-gradient(center, ellipse cover, #0C96D4 1%,#096A95 100%); - /* Opera 12+ */ - background-image: -ms-radial-gradient(center, ellipse cover, #0C96D4 1%,#096A95 100%); - /* IE10+ */ - background-image: radial-gradient(ellipse at center, #0C96D4 1%,#096A95 100%); - /* W3C */ -/* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0C96D4', endColorstr='#096A95',GradientType=1 );*/ - /* IE6-9 fallback on horizontal gradient */ + height: 465px; + padding: 15px 0 0 0; color: #fff !important; + background: url('images/header-border.png') center 0 repeat-x; + -webkit-background-size: 100% auto; + background-size: 100% auto; } #header>div { - max-width: 960px; + max-width: 1024px; margin: 0 auto; } @@ -55,7 +44,7 @@ background-color: #0C96D4;/*(amarelo-claro)*/ } #accessibility a { - color: #FFF; /* #00500f; */ + color: #444; /* #00500f; */ margin-right: 8px; } @@ -64,14 +53,86 @@ background-color: #0C96D4;/*(amarelo-claro)*/ color: #FFFFFF; padding: 0 4px; } +#accessibility a:hover { + color: #b62221; +} - +#votacao { + float: right; + display: block; + width: 260px; + padding: 20px 40px 0 0; + line-height: 44px; +} +#votacao span { + font-family: 'Open Sans Bold'; + color: #000; + font-size: 40px; +} +#votacao span strong { + font-weight: normal; + font-family: 'Open Sans Light'; +} +#votacao .bt-votar { + display: block; + width: 165px; + height: 57px; + margin: 20px 0 0; + line-height: 57px; + border-radius: 5px; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + color: #fff; + text-align: center; + font-family: 'Open Sans Bold'; + font-weight: bold; + font-size: 18px; + background: #89ba3f; +} +#votacao .bt-votar:hover { + background: #b62221; +} + +#menu { + clear: both; + width: 100%; + padding: 10px 0 0 0; +} +#menu ul { + display: block; + height: 50px; + margin: 0; +} +#menu li {} +#menu li a { + float: left; + display: block; + width: 21%; + padding: 15px 0; + font-family: 'Open Sans Bold'; + font-size: 12px; color: #fff; + font-weight: normal; + text-decoration: none; + text-align: center; + text-transform: capitalize; +} +#menu li:last-child a { + width: 37%; +} +#menu li .link-sobre { background-color: #0083cb; } +#menu li .link-participacao { background-color: #088ed7; } +#menu li .link-eixos { background-color: #1197e1; } +#menu li .link-sistema { background-color: #1aa2ec; } +#menu li a:hover { + background-color: #b62221; +} /* logo */ #logo { padding: 0; float: left; - width: 70%; + width: 30%; + margin: -30px 0 0; } #logo span { @@ -107,7 +168,31 @@ background-color: #0C96D4;/*(amarelo-claro)*/ #logo #portal-description { font-size: 1.2em; - text-transform: uppercase; + text-transform: capitalize; +} + +#links { + float: left; + padding: 10px 0 0 65px; +} +#links ul {} +#links ul li {} +#links ul li a { + float: left; + display: block; + height: 23px; + line-height: 23px; + padding: 5px 15px; + margin: 0 5px; + border: 1px solid #fff; + border-radius: 5px; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + text-transform: capitalize; + color: #444; +} +#links ul li a:hover { + background-color: #fff; } /* Site Actions */ @@ -115,7 +200,7 @@ background-color: #0C96D4;/*(amarelo-claro)*/ display: block; float: right; clear: left; - border-bottom: 1px dotted #FFF; /* #00500f; */ + border-bottom: 1px dotted #00500f; padding-bottom: 2px; margin-top: -15px; font-size: 10px; @@ -123,15 +208,15 @@ background-color: #0C96D4;/*(amarelo-claro)*/ } #portal-siteactions a { - color: #FFF; /* #00500f; */ + color: #00500f; text-decoration: none; padding: 4px 0 4px 10px; - text-transform: uppercase; - font-family: 'Open Sans', Arial, Helvetica, sans-serif; + text-transform: capitalize; + font-family: 'Open Sans', Arial, Helvetica, sans-serif; } #portal-siteactions a:hover { - color: #03316f; + color: #b62221; } #portal-siteactions li { @@ -139,7 +224,7 @@ background-color: #0C96D4;/*(amarelo-claro)*/ } #portal-siteactions li a:hover { -color: #75ad0a +color: #b62221; } #portal-siteactions li a { padding: 4px 0px; @@ -178,11 +263,15 @@ color: #75ad0a #theme-header .header-content #link-contact a { padding-left: 10px; } +#theme-header .header-content #link-contact a:hover, +#theme-header .header-content #link-faq a:hover { + color: #b62221; +} #theme-header #sobre { line-height: 20px; font-size: 12px; -} +} /* */ /* Sobre o brasil */ @@ -190,12 +279,11 @@ color: #75ad0a clear: both; max-width: 100% !important; margin: 0; - background: #0c96d4; /*#f8c300;/*amarelo-mais-escuro*/ padding: 5px 0; } #sobre ul { - max-width: 960px; + max-width: 1024px; margin: 0 auto; text-align: right; } @@ -223,29 +311,29 @@ color: #75ad0a } input.searchField { - -moz-appearance: none; + -moz-appearance: none !important; } #portal-searchbox { clear: right; float: right; font-size: 80%; - margin: 30px 0 14px; - /*margin: 3.12em 0px 3px 0px;*/ + margin: 10px 0 15px; text-align: right; - border-radius: 5px; - -moz-border-radius: 5px; - -webkit-border-radius: 5px; - border: 1px solid #CCCCCC; + border-radius: 0; + -moz-border-radius: 0; + -webkit-border-radius: 0; + border: none; background: #fff; padding: 2px; } #portal-searchbox .searchField { - padding: 0.45em; + padding: 10px; border-right: none; - border: none; - width: 170px; + border: none; + width: 160px; + height: 10px; } #portal-searchbox form { @@ -271,9 +359,6 @@ width: 13em; #content input.searchField { margin-bottom: 1em; } -input.searchField { --moz-appearance: searchfield; -} #header input.searchButton { background-image: url("images/search-button.gif"); @@ -334,31 +419,31 @@ background-size: 100% 100%; } #social-icons #sb_face { -background-image: url(images/icone-branco-facebook.png); + background: url(images/icone-branco-facebook.png) 0 0; } #social-icons #sb_face:hover { -background: url(images/icone-branco-facebook.png) 0 20px; + background: url(images/icone-branco-facebook.png) 0 20px; } #social-icons #sb_tweet { -background-image: url(images/icone-branco-twitter.png); + background: url(images/icone-branco-twitter.png) 0 0; } #social-icons #sb_tweet:hover { -background: url(images/icone-branco-twitter.png) 0 20px; + background: url(images/icone-branco-twitter.png) 0 20px; } #social-icons #sb_youtb { -background-image: url(images/icone-branco-youtube.png); + background: url(images/icone-branco-youtube.png) 0 0; } #social-icons #sb_youtb:hover { -background: url(images/icone-branco-youtube.png) 0 20px; + background: url(images/icone-branco-youtube.png) 0 20px; } #social-icons #sb_flickr { -background-image: url(images/icone-branco-flickr.png); + background: url(images/icone-branco-flickr.png) 0 0; } #social-icons #sb_flickr:hover { -background: url(images/icone-branco-flickr.png) 0 20px; + background: url(images/icone-branco-flickr.png) 0 20px; } #social-icons span { display: none; } @@ -369,6 +454,7 @@ background: url(images/icone-branco-flickr.png) 0 20px; /************* Bar Psocial Style - Menu Horizontal**************/ #user{ + display: none; padding: 0px 2em; top: -30px; font-size: 12px; @@ -418,10 +504,11 @@ background: url(images/icone-branco-flickr.png) 0 20px; } #barra-psocial { - position: relative; - height: 40px; - margin: auto; - background: url(images/barra-psocial-bg.png) repeat-x; + display: none; + position: relative; + height: 40px; + margin: auto; + background: url(images/barra-psocial-bg.png) repeat-x; } #barra-psocial li { @@ -458,7 +545,7 @@ background: url(images/icone-branco-flickr.png) 0 20px; font-weight: bold; padding: 0px 20px; height: 100%; - text-transform: uppercase; + text-transform: capitalize; } #cat_menu li:hover { @@ -475,65 +562,177 @@ background: url(images/icone-branco-flickr.png) 0 20px; /******************Footer - Rodapé**********************************/ +#footer { + height: 254px; + background: url('images/footer-bg.png') center bottom repeat-x; +} + #theme-footer { - width: 100%; + width: 100%; } #footer-content { - background: #fff; + position: relative; + width: 1024px; + margin: 0 auto; + text-align: left; } -#footer-logos { - background: #ffb800; - max-width: 100%; - padding: 2em 0; - height: 49px; +#footer-content .institucional { + height: 115px; + padding: 40px 0 0 0; } -#footer-logos div { - max-width: 960px; - margin: 0 auto; +#footer-content .institucional .logo-sistema { + float: left; + display: block; + width: 195px; + height: 33px; + margin: 0; + background: url('images/logo-sistema.png') 0 0 no-repeat; + text-indent: -9999px; + overflow: hidden; } -#footer-logos a { +#footer-content .institucional address { + clear: both; + width: 220px; display: block; - height: 49px; - float: left; + font-size: 10px; + font-style: normal; + color: #282828; } -#footer-logos span { - display: none; +#footer-content .institucional .parcerias { + position: absolute; + right: 0; + top: 30px; + width: 480px; } -#footer-logos .logo-acesso { - background: transparent url(images/acesso-a-informacao.png) center center no-repeat; - width: 107px; +#footer-content .institucional .parcerias span { + display: block; + padding: 0 0 0 40px; + color: #282828; +} +#footer-content .institucional .parcerias ul { + list-style: none; + padding: 0; + margin: 0; } -#footer-logos .logo-brasil { - background: transparent url(images/brasil.png) center center no-repeat; +#footer-content .institucional .parcerias ul li { + margin: 0; +} + +#footer-content .institucional .logo-seplan { + float: right; + display: block; + width: 229px; + height: 65px; + margin: 0 50px 0 0; + background: url('images/logo-seplan.png') 0 0 no-repeat; + text-indent: -9999px; + overflow: hidden; +} + +#footer-content .institucional .logo-brasil { + float: right; + display: block; width: 153px; + height: 49px; + margin: 10px 0 0; + background: url('images/logo-brasil.png') 0 0 no-repeat; + text-indent: -9999px; + overflow: hidden; +} + + +#footer-content .institucional .coordenacao { + position: absolute; + right: 500px; + top: 30px; + width: 250px; +} + +#footer-content .institucional .coordenacao span { + display: block; + padding: 0; + color: #282828; +} + +#footer-content .institucional .coordenacao ul { + list-style: none; + padding: 0; + margin: 0; } -#footer-logos .logo-sedihpop { - background: transparent url(images/logo-sedihpop.png) center center no-repeat; - width: 202px; +#footer-content .institucional .coordenacao ul li { + margin: 0; } -#footer-logos .institucionais { +#footer-content .institucional .logo-secretaria { float: right; + display: block; + width: 262px; + height: 65px; + margin: 0; + background: url('images/logo-secretaria.png') 0 0 no-repeat; + text-indent: -9999px; + overflow: hidden; } -#footer-license { - max-width: 960px; - margin: 0 auto; - text-align: left; - padding: 19px; +#footer-content .institucional .logo-governo { + float: left; + display: block; + width: 121px; + height: 66px; + background: url('images/logo-governo.png') 0 0 no-repeat; + text-indent: -9999px; + overflow: hidden; } -#footer-license p { - color: #F28F00; - text-align: left; +#footer-content .links-uteis { + height: 85px; + padding: 15px 0 0 0; } +#footer-content .links-uteis span { + float: left; + display: block; + width: 158px; + padding: 20px 0 0 0; +} +#footer-content .links-uteis .logo-transparencia { + float: left; + display: block; + width: 199px; + height: 59px; + margin: 0; + background: url('images/logo-transparencia.png') 0 0 no-repeat; + text-indent: -9999px; + overflow: hidden; +} + +#footer-content .links-uteis .logo-acesso-a-informacao { + float: left; + display: block; + width: 192px; + height: 62px; + margin: 0 0 0 95px; + background: url('images/logo-acesso-a-informacao.png') 0 0 no-repeat; + text-indent: -9999px; + overflow: hidden; +} + +#footer-content .links-uteis .logo-biblioteca { + float: left; + display: block; + width: 135px; + height: 46px; + margin: 0 0 0 128px; + background: url('images/logo-biblioteca.png') 0 0 no-repeat; + text-indent: -9999px; + overflow: hidden; +} diff --git a/footer.html.erb b/footer.html.erb index 3f3063a..82fdd82 100644 --- a/footer.html.erb +++ b/footer.html.erb @@ -1,18 +1,32 @@