Download as
Browse Code »

Commit 16a5ac45cec3d6fbaef212bcb555c596f3f05c81

Authored by Carlos Vieira
1 parent de24166b
Exists in master

Adiciona primeira versão no estilo RTD

Showing 23 changed files with 2 additions and 1499 deletions   Show diff stats
.gitignore
  Diff comments   View file @16a5ac4
1 1 *.*~
  2 +.doctrees
  3 +_build/
... ...
.hgignore
View file @de24166
... ... @@ -1,3 +0,0 @@
1   -syntax: glob
2   -
3   -*~
atualize.html
View file @de24166
... ... @@ -1,92 +0,0 @@
1   -<!DOCTYPE html>
2   -<html lang="pt-BR">
3   - <head>
4   - <meta charset="utf-8" />
5   - <title>Identidade Visual do Governo Federal na Internet</title>
6   - <link rel="shortcut icon" type="image/x-icon" href="imagens/favicon.ico">
7   - <link rel="stylesheet" href="css/reset.css" />
8   - <link rel="stylesheet" href="css/text.css" />
9   - <link rel="stylesheet" href="css/960.css" />
10   - <link rel="stylesheet" href="css/demo.css"/>
11   - <link rel="alternate stylesheet" href="css/contraste.css" title="alto_contraste"/>
12   - <style type="text/css">
13   - #footer-brasil {
14   - background: none repeat scroll 0% 0% #00420c;
15   - padding: 1em 0px;
16   - max-width: 100%;
17   - }
18   - </style>
19   - <script type="text/javascript">
20   - function alto_contraste(title) {
21   - var i, a;
22   - for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
23   - if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
24   - a.disabled = true;
25   - if(a.getAttribute("title") == title) a.disabled = false;
26   - }
27   - }
28   - }
29   - </script>
30   - </head>
31   -<body>
32   -<a href="#content" style="text-indent: -999em;position: absolute; left: -999em;">Ir para Conteúdo</a>
33   -<div id="barra-brasil" style="background:#7F7F7F; height: 20px; padding:4px 0 4px 10px;display:block;">
34   - <ul id="menu-barra-temp" style="list-style:none;">
35   - <li style="display:inline; float:left;padding-right:10px; margin-right:10px; border-right:1px solid #EDEDED"><a href="http://brasil.gov.br" style="font-family:sans,sans-serif; text-decoration:none; color:white;">Portal do Governo Brasileiro</a><br/></li>
36   - <li><a style="font-family:sans,sans-serif; text-decoration:none; color:white;" href="http://epwg.governoeletronico.gov.br/barra/atualize.html">Atualize sua Barra de Governo</a></li>
37   - </ul>
38   -</div>
39   -
40   - <div id="acessibilidade">
41   -
42   - <div class="container">
43   -
44   - <ul class="atalhos">
45   - <li><a href="#content" accesskey="1" class="ipular">Ir para Conteúdo</a></li>
46   - </ul>
47   -
48   - <ul class="links">
49   - <li><a href="#" class="iacessibilidade" onclick="alto_contraste('','1')">Contraste Normal</a></li>
50   - <li><a href="#" class="iautocontraste" onclick="alto_contraste('alto_contraste','1')">Alto Contraste</a></li>
51   - </ul>
52   -
53   - </div>
54   - <div class="clear"></div>
55   -
56   - </div>
57   -
58   - <div id="header">
59   - <div class="container_12">
60   - <div class="grid_8 suffix_1">
61   - <h1>Identidade Visual do Governo Federal na Internet</h1>
62   - <p>Sobre o uso e a aplicação da barra de identidade. Para maiores detalhes consulte o <a href="http://www.secom.gov.br/orientacoes-gerais/comunicacao-digital/nova-barra-de-identidade-do-governo-federal.pdf">Manual de Identidade Visual do Governo Federal na Internet Regras de aplicação da Barra de Identidade</a>.</p>
63   - </div>
64   - <div class="grid_3">
65   - <a href="http://www.governoeletronico.gov.br" title="Sítio do Programa de Governo Eletrônico Brasileiro" class="logo-govbr">Programa de Governo Eletrônico Brasileiro</a>
66   - </div>
67   - <div class="clear"></div>
68   - </div>
69   - </div>
70   -
71   - <div id="content">
72   - <div class="container_12">
73   - <div class="grid_12 suffix_1">
74   - <h2>Atualização</h2>
75   - <p>Para atualizar a barra é necessário alguns passos: </p>
76   - <ol>
77   - <li>Acessar o link da <a href="https://barra.brasil.gov.br">barra de governo</a>;</li>
78   - <li>Aceitar o certificado conforme imagem abaixo. O certificado do ICP-Brasil é o certificado indicado pelo governo federal mas o mesmo não está instalado por padrão nos navegadores atuais; <br/><br/>
79   - <img src="img/certificado.png" alt="Certificado Digital Barra Brasil" title="Certificado Digital Barra Brasil"><br/>
80   - &rarr; Seu navegador pode exibir uma tela para aceitação do certificado diferente da imagem acima.</li>
81   - <li>Voltar para a página do governo e recarregar a página para aparecer a nova barra.</li>
82   - </ol>
83   - </div>
84   - <div class="clear"></div>
85   - </div>
86   - </div>
87   -
88   - <div id="footer-brasil">
89   - </div>
90   - <script defer="defer" src="//barra.brasil.gov.br/barra.js?cor=azul" type="text/javascript"></script>
91   -</body>
92   -</html>
css/960.css
View file @de24166
... ... @@ -1,653 +0,0 @@
1   -/*
2   - 960 Grid System ~ Core CSS.
3   - Learn more ~ http://960.gs/
4   -
5   - Licensed under GPL and MIT.
6   -*/
7   -
8   -/*
9   - Forces backgrounds to span full width,
10   - even if there is horizontal scrolling.
11   - Increase this if your layout is wider.
12   -
13   - Note: IE6 works fine without this fix.
14   -*/
15   -
16   -body {
17   - min-width: 960px;
18   -}
19   -
20   -/* `Container
21   -----------------------------------------------------------------------------------------------------*/
22   -
23   -.container_12,
24   -.container_16 {
25   - margin-left: auto;
26   - margin-right: auto;
27   - width: 960px;
28   -}
29   -
30   -/* `Grid >> Global
31   -----------------------------------------------------------------------------------------------------*/
32   -
33   -.grid_1,
34   -.grid_2,
35   -.grid_3,
36   -.grid_4,
37   -.grid_5,
38   -.grid_6,
39   -.grid_7,
40   -.grid_8,
41   -.grid_9,
42   -.grid_10,
43   -.grid_11,
44   -.grid_12,
45   -.grid_13,
46   -.grid_14,
47   -.grid_15,
48   -.grid_16 {
49   - display: inline;
50   - float: left;
51   - margin-left: 10px;
52   - margin-right: 10px;
53   -}
54   -
55   -.push_1, .pull_1,
56   -.push_2, .pull_2,
57   -.push_3, .pull_3,
58   -.push_4, .pull_4,
59   -.push_5, .pull_5,
60   -.push_6, .pull_6,
61   -.push_7, .pull_7,
62   -.push_8, .pull_8,
63   -.push_9, .pull_9,
64   -.push_10, .pull_10,
65   -.push_11, .pull_11,
66   -.push_12, .pull_12,
67   -.push_13, .pull_13,
68   -.push_14, .pull_14,
69   -.push_15, .pull_15 {
70   - position: relative;
71   -}
72   -
73   -.container_12 .grid_3,
74   -.container_16 .grid_4 {
75   - width: 220px;
76   -}
77   -
78   -.container_12 .grid_6,
79   -.container_16 .grid_8 {
80   - width: 460px;
81   -}
82   -
83   -.container_12 .grid_9,
84   -.container_16 .grid_12 {
85   - width: 700px;
86   -}
87   -
88   -.container_12 .grid_12,
89   -.container_16 .grid_16 {
90   - width: 940px;
91   -}
92   -
93   -/* `Grid >> Children (Alpha ~ First, Omega ~ Last)
94   -----------------------------------------------------------------------------------------------------*/
95   -
96   -.alpha {
97   - margin-left: 0;
98   -}
99   -
100   -.omega {
101   - margin-right: 0;
102   -}
103   -
104   -/* `Grid >> 12 Columns
105   -----------------------------------------------------------------------------------------------------*/
106   -
107   -.container_12 .grid_1 {
108   - width: 60px;
109   -}
110   -
111   -.container_12 .grid_2 {
112   - width: 140px;
113   -}
114   -
115   -.container_12 .grid_4 {
116   - width: 300px;
117   -}
118   -
119   -.container_12 .grid_5 {
120   - width: 380px;
121   -}
122   -
123   -.container_12 .grid_7 {
124   - width: 540px;
125   -}
126   -
127   -.container_12 .grid_8 {
128   - width: 620px;
129   -}
130   -
131   -.container_12 .grid_10 {
132   - width: 780px;
133   -}
134   -
135   -.container_12 .grid_11 {
136   - width: 860px;
137   -}
138   -
139   -/* `Grid >> 16 Columns
140   -----------------------------------------------------------------------------------------------------*/
141   -
142   -.container_16 .grid_1 {
143   - width: 40px;
144   -}
145   -
146   -.container_16 .grid_2 {
147   - width: 100px;
148   -}
149   -
150   -.container_16 .grid_3 {
151   - width: 160px;
152   -}
153   -
154   -.container_16 .grid_5 {
155   - width: 280px;
156   -}
157   -
158   -.container_16 .grid_6 {
159   - width: 340px;
160   -}
161   -
162   -.container_16 .grid_7 {
163   - width: 400px;
164   -}
165   -
166   -.container_16 .grid_9 {
167   - width: 520px;
168   -}
169   -
170   -.container_16 .grid_10 {
171   - width: 580px;
172   -}
173   -
174   -.container_16 .grid_11 {
175   - width: 640px;
176   -}
177   -
178   -.container_16 .grid_13 {
179   - width: 760px;
180   -}
181   -
182   -.container_16 .grid_14 {
183   - width: 820px;
184   -}
185   -
186   -.container_16 .grid_15 {
187   - width: 880px;
188   -}
189   -
190   -/* `Prefix Extra Space >> Global
191   -----------------------------------------------------------------------------------------------------*/
192   -
193   -.container_12 .prefix_3,
194   -.container_16 .prefix_4 {
195   - padding-left: 240px;
196   -}
197   -
198   -.container_12 .prefix_6,
199   -.container_16 .prefix_8 {
200   - padding-left: 480px;
201   -}
202   -
203   -.container_12 .prefix_9,
204   -.container_16 .prefix_12 {
205   - padding-left: 720px;
206   -}
207   -
208   -/* `Prefix Extra Space >> 12 Columns
209   -----------------------------------------------------------------------------------------------------*/
210   -
211   -.container_12 .prefix_1 {
212   - padding-left: 80px;
213   -}
214   -
215   -.container_12 .prefix_2 {
216   - padding-left: 160px;
217   -}
218   -
219   -.container_12 .prefix_4 {
220   - padding-left: 320px;
221   -}
222   -
223   -.container_12 .prefix_5 {
224   - padding-left: 400px;
225   -}
226   -
227   -.container_12 .prefix_7 {
228   - padding-left: 560px;
229   -}
230   -
231   -.container_12 .prefix_8 {
232   - padding-left: 640px;
233   -}
234   -
235   -.container_12 .prefix_10 {
236   - padding-left: 800px;
237   -}
238   -
239   -.container_12 .prefix_11 {
240   - padding-left: 880px;
241   -}
242   -
243   -/* `Prefix Extra Space >> 16 Columns
244   -----------------------------------------------------------------------------------------------------*/
245   -
246   -.container_16 .prefix_1 {
247   - padding-left: 60px;
248   -}
249   -
250   -.container_16 .prefix_2 {
251   - padding-left: 120px;
252   -}
253   -
254   -.container_16 .prefix_3 {
255   - padding-left: 180px;
256   -}
257   -
258   -.container_16 .prefix_5 {
259   - padding-left: 300px;
260   -}
261   -
262   -.container_16 .prefix_6 {
263   - padding-left: 360px;
264   -}
265   -
266   -.container_16 .prefix_7 {
267   - padding-left: 420px;
268   -}
269   -
270   -.container_16 .prefix_9 {
271   - padding-left: 540px;
272   -}
273   -
274   -.container_16 .prefix_10 {
275   - padding-left: 600px;
276   -}
277   -
278   -.container_16 .prefix_11 {
279   - padding-left: 660px;
280   -}
281   -
282   -.container_16 .prefix_13 {
283   - padding-left: 780px;
284   -}
285   -
286   -.container_16 .prefix_14 {
287   - padding-left: 840px;
288   -}
289   -
290   -.container_16 .prefix_15 {
291   - padding-left: 900px;
292   -}
293   -
294   -/* `Suffix Extra Space >> Global
295   -----------------------------------------------------------------------------------------------------*/
296   -
297   -.container_12 .suffix_3,
298   -.container_16 .suffix_4 {
299   - padding-right: 240px;
300   -}
301   -
302   -.container_12 .suffix_6,
303   -.container_16 .suffix_8 {
304   - padding-right: 480px;
305   -}
306   -
307   -.container_12 .suffix_9,
308   -.container_16 .suffix_12 {
309   - padding-right: 720px;
310   -}
311   -
312   -/* `Suffix Extra Space >> 12 Columns
313   -----------------------------------------------------------------------------------------------------*/
314   -
315   -.container_12 .suffix_1 {
316   - padding-right: 80px;
317   -}
318   -
319   -.container_12 .suffix_2 {
320   - padding-right: 160px;
321   -}
322   -
323   -.container_12 .suffix_4 {
324   - padding-right: 320px;
325   -}
326   -
327   -.container_12 .suffix_5 {
328   - padding-right: 400px;
329   -}
330   -
331   -.container_12 .suffix_7 {
332   - padding-right: 560px;
333   -}
334   -
335   -.container_12 .suffix_8 {
336   - padding-right: 640px;
337   -}
338   -
339   -.container_12 .suffix_10 {
340   - padding-right: 800px;
341   -}
342   -
343   -.container_12 .suffix_11 {
344   - padding-right: 880px;
345   -}
346   -
347   -/* `Suffix Extra Space >> 16 Columns
348   -----------------------------------------------------------------------------------------------------*/
349   -
350   -.container_16 .suffix_1 {
351   - padding-right: 60px;
352   -}
353   -
354   -.container_16 .suffix_2 {
355   - padding-right: 120px;
356   -}
357   -
358   -.container_16 .suffix_3 {
359   - padding-right: 180px;
360   -}
361   -
362   -.container_16 .suffix_5 {
363   - padding-right: 300px;
364   -}
365   -
366   -.container_16 .suffix_6 {
367   - padding-right: 360px;
368   -}
369   -
370   -.container_16 .suffix_7 {
371   - padding-right: 420px;
372   -}
373   -
374   -.container_16 .suffix_9 {
375   - padding-right: 540px;
376   -}
377   -
378   -.container_16 .suffix_10 {
379   - padding-right: 600px;
380   -}
381   -
382   -.container_16 .suffix_11 {
383   - padding-right: 660px;
384   -}
385   -
386   -.container_16 .suffix_13 {
387   - padding-right: 780px;
388   -}
389   -
390   -.container_16 .suffix_14 {
391   - padding-right: 840px;
392   -}
393   -
394   -.container_16 .suffix_15 {
395   - padding-right: 900px;
396   -}
397   -
398   -/* `Push Space >> Global
399   -----------------------------------------------------------------------------------------------------*/
400   -
401   -.container_12 .push_3,
402   -.container_16 .push_4 {
403   - left: 240px;
404   -}
405   -
406   -.container_12 .push_6,
407   -.container_16 .push_8 {
408   - left: 480px;
409   -}
410   -
411   -.container_12 .push_9,
412   -.container_16 .push_12 {
413   - left: 720px;
414   -}
415   -
416   -/* `Push Space >> 12 Columns
417   -----------------------------------------------------------------------------------------------------*/
418   -
419   -.container_12 .push_1 {
420   - left: 80px;
421   -}
422   -
423   -.container_12 .push_2 {
424   - left: 160px;
425   -}
426   -
427   -.container_12 .push_4 {
428   - left: 320px;
429   -}
430   -
431   -.container_12 .push_5 {
432   - left: 400px;
433   -}
434   -
435   -.container_12 .push_7 {
436   - left: 560px;
437   -}
438   -
439   -.container_12 .push_8 {
440   - left: 640px;
441   -}
442   -
443   -.container_12 .push_10 {
444   - left: 800px;
445   -}
446   -
447   -.container_12 .push_11 {
448   - left: 880px;
449   -}
450   -
451   -/* `Push Space >> 16 Columns
452   -----------------------------------------------------------------------------------------------------*/
453   -
454   -.container_16 .push_1 {
455   - left: 60px;
456   -}
457   -
458   -.container_16 .push_2 {
459   - left: 120px;
460   -}
461   -
462   -.container_16 .push_3 {
463   - left: 180px;
464   -}
465   -
466   -.container_16 .push_5 {
467   - left: 300px;
468   -}
469   -
470   -.container_16 .push_6 {
471   - left: 360px;
472   -}
473   -
474   -.container_16 .push_7 {
475   - left: 420px;
476   -}
477   -
478   -.container_16 .push_9 {
479   - left: 540px;
480   -}
481   -
482   -.container_16 .push_10 {
483   - left: 600px;
484   -}
485   -
486   -.container_16 .push_11 {
487   - left: 660px;
488   -}
489   -
490   -.container_16 .push_13 {
491   - left: 780px;
492   -}
493   -
494   -.container_16 .push_14 {
495   - left: 840px;
496   -}
497   -
498   -.container_16 .push_15 {
499   - left: 900px;
500   -}
501   -
502   -/* `Pull Space >> Global
503   -----------------------------------------------------------------------------------------------------*/
504   -
505   -.container_12 .pull_3,
506   -.container_16 .pull_4 {
507   - left: -240px;
508   -}
509   -
510   -.container_12 .pull_6,
511   -.container_16 .pull_8 {
512   - left: -480px;
513   -}
514   -
515   -.container_12 .pull_9,
516   -.container_16 .pull_12 {
517   - left: -720px;
518   -}
519   -
520   -/* `Pull Space >> 12 Columns
521   -----------------------------------------------------------------------------------------------------*/
522   -
523   -.container_12 .pull_1 {
524   - left: -80px;
525   -}
526   -
527   -.container_12 .pull_2 {
528   - left: -160px;
529   -}
530   -
531   -.container_12 .pull_4 {
532   - left: -320px;
533   -}
534   -
535   -.container_12 .pull_5 {
536   - left: -400px;
537   -}
538   -
539   -.container_12 .pull_7 {
540   - left: -560px;
541   -}
542   -
543   -.container_12 .pull_8 {
544   - left: -640px;
545   -}
546   -
547   -.container_12 .pull_10 {
548   - left: -800px;
549   -}
550   -
551   -.container_12 .pull_11 {
552   - left: -880px;
553   -}
554   -
555   -/* `Pull Space >> 16 Columns
556   -----------------------------------------------------------------------------------------------------*/
557   -
558   -.container_16 .pull_1 {
559   - left: -60px;
560   -}
561   -
562   -.container_16 .pull_2 {
563   - left: -120px;
564   -}
565   -
566   -.container_16 .pull_3 {
567   - left: -180px;
568   -}
569   -
570   -.container_16 .pull_5 {
571   - left: -300px;
572   -}
573   -
574   -.container_16 .pull_6 {
575   - left: -360px;
576   -}
577   -
578   -.container_16 .pull_7 {
579   - left: -420px;
580   -}
581   -
582   -.container_16 .pull_9 {
583   - left: -540px;
584   -}
585   -
586   -.container_16 .pull_10 {
587   - left: -600px;
588   -}
589   -
590   -.container_16 .pull_11 {
591   - left: -660px;
592   -}
593   -
594   -.container_16 .pull_13 {
595   - left: -780px;
596   -}
597   -
598   -.container_16 .pull_14 {
599   - left: -840px;
600   -}
601   -
602   -.container_16 .pull_15 {
603   - left: -900px;
604   -}
605   -
606   -/* `Clear Floated Elements
607   -----------------------------------------------------------------------------------------------------*/
608   -
609   -/* http://sonspring.com/journal/clearing-floats */
610   -
611   -.clear {
612   - clear: both;
613   - display: block;
614   - overflow: hidden;
615   - visibility: hidden;
616   - width: 0;
617   - height: 0;
618   -}
619   -
620   -/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
621   -
622   -.clearfix:before,
623   -.clearfix:after,
624   -.container_12:before,
625   -.container_12:after,
626   -.container_16:before,
627   -.container_16:after {
628   - content: '.';
629   - display: block;
630   - overflow: hidden;
631   - visibility: hidden;
632   - font-size: 0;
633   - line-height: 0;
634   - width: 0;
635   - height: 0;
636   -}
637   -
638   -.clearfix:after,
639   -.container_12:after,
640   -.container_16:after {
641   - clear: both;
642   -}
643   -
644   -/*
645   - The following zoom:1 rule is specifically for IE6 + IE7.
646   - Move to separate stylesheet if invalid CSS is a problem.
647   -*/
648   -
649   -.clearfix,
650   -.container_12,
651   -.container_16 {
652   - zoom: 1;
653   -}
654 0 \ No newline at end of file
css/contraste.css
View file @de24166
... ... @@ -1,72 +0,0 @@
1   -body {
2   - background: #000;
3   - color: #fff;
4   -}
5   -
6   -a {
7   - color: #ffcc00;
8   -}
9   -
10   -h1 {
11   - text-shadow: 0px 0px 0px #ccc;
12   - color: #fff;
13   -}
14   -
15   -h2 {
16   - background: #ffcc00;
17   - color: #000;
18   - text-shadow: 0px 0px 0px #333;
19   -}
20   -
21   -.container_12 {
22   - background-color: #000;
23   -}
24   -
25   -/* `Barra Acessibilidade
26   -----------------------------------------------------------------------------------------------------*/
27   -
28   -#acessibilidade a{
29   - color: #004B82
30   -}
31   -
32   -/* `Content
33   -----------------------------------------------------------------------------------------------------*/
34   -
35   -code, pre {
36   - background: #000;
37   - color: #fff;
38   -}
39   -
40   -
41   -/* `Sidebar
42   -----------------------------------------------------------------------------------------------------*/
43   -
44   -.grid_3 h3 {
45   - background: #ffcc00;
46   - color: #000;
47   - text-shadow: 0px 0px 0px #333;
48   -}
49   -
50   -#preta {
51   - background: #000000
52   - -moz-box-shadow: inset 0 0 10px #fff;
53   - -webkit-box-shadow: inset 0 0 10px #fff;
54   - box-shadow: inset 0 0 10px #fff;
55   -}
56   -
57   -
58   -/* `Footer
59   -----------------------------------------------------------------------------------------------------*/
60   -
61   -#footer {
62   - background: #000;
63   -}
64   -
65   -
66   -#footer .container_12 {
67   - background: #000;
68   -}
69   -
70   -.marca-governo {
71   - background: url(../img/marca-governo-c.png) no-repeat;
72   -}
73 0 \ No newline at end of file
css/demo.css
View file @de24166
... ... @@ -1,196 +0,0 @@
1   -body {
2   - background: #fff;
3   - color: #000;
4   - font-size: 13px;
5   - height: auto;
6   -}
7   -
8   -a {
9   - color: #004B82;
10   - text-decoration: none;
11   -}
12   -
13   -a:hover {
14   - text-decoration: underline;
15   -}
16   -
17   -h1 {
18   - padding-top: 20px;
19   - text-shadow: 0px 2px 0px #ccc;
20   - letter-spacing: -1px;
21   -}
22   -
23   -h2 {
24   - background: #004B82;
25   - color: #FFFFFF;
26   - margin-bottom: 20px;
27   - padding: 20px 0 2px 3px;
28   - text-shadow: 0px 1px 0px #333;
29   -}
30   -
31   -p {
32   - overflow: hidden;
33   - padding: 5px 0 10px 0;
34   - line-height: 1.6em;
35   -}
36   -
37   -.container {
38   - margin-left: auto;
39   - margin-right: auto;
40   - width: 960px;
41   -}
42   -
43   -.container_12 {
44   - background-color: #fff;
45   - background-repeat: repeat-y;
46   - margin-bottom: 20px;
47   -}
48   -
49   -/* `Barra Acessibilidade
50   -----------------------------------------------------------------------------------------------------*/
51   -
52   -#acessibilidade {
53   - background: url(../img/bg-acessibilidade.png) repeat-x;
54   - padding: 8px 0;
55   - margin-bottom: 20px;
56   - font-size: 0.9em;
57   -}
58   -
59   -#acessibilidade .atalhos {
60   - float: left;
61   -}
62   -
63   -#acessibilidade .atalhos li{
64   - display: inline;
65   - padding: 0 0 0 0px;
66   -}
67   -
68   -#acessibilidade .links {
69   - float: right;
70   - background: url(../img/bg-links.png) no-repeat 165px 0 ;
71   -}
72   -
73   -#acessibilidade .links li{
74   - display: inline;
75   - padding: 6px 10px;
76   -}
77   -
78   -.ipular {background: url(../img/i_pular.png) no-repeat 0px 3px; width: 10px; height: 10px; padding-left: 18px}
79   -.ipular:hover {background: url(../img/i_pular.png) no-repeat 0px -10px; width: 10px; height: 10px; padding-left: 18px}
80   -
81   -.iacessibilidade {background: url(../img/contraste.png) no-repeat 2px 1px; width: 15px; height: 10px; padding-left: 20px}
82   -.iautocontraste {background: url(../img/altocontraste.png) no-repeat 2px 1px; width: 15px; height: 10px; padding-left: 20px}
83   -
84   -/* `Header
85   -----------------------------------------------------------------------------------------------------*/
86   -
87   -.logo-govbr {
88   - background: url(../img/govbr-epwg.png) no-repeat;
89   - display: block;
90   - height: 85px;
91   - text-indent: -99999em;
92   - width: 220px;
93   -}
94   -
95   -#header .grid_8 {position: relative;}
96   -
97   -.beta {
98   - position: absolute;
99   - width: 55px;
100   - height: 58px;
101   - background: url(../img/beta.png) no-repeat 2px 4px;
102   - text-indent: -99999px;
103   - right: 80px;
104   - top: -15px;
105   -}
106   -
107   -/* `Content
108   -----------------------------------------------------------------------------------------------------*/
109   -
110   -code, pre {
111   - border: 1px solid #ccc;
112   - background: #F8F8F8;
113   - color: #000000;
114   - display: block;
115   - font-family: 'Courier New',Courier,Fixed,monospace;
116   - font-size: 100%;
117   -
118   - line-height: 17px;
119   - margin: 1em 0;
120   - overflow: auto;
121   - padding: 5px 20px 5px 30px;
122   - text-align: left;
123   -}
124   -
125   -
126   -/* `Sidebar
127   -----------------------------------------------------------------------------------------------------*/
128   -
129   -.grid_3 h3 {
130   - background: #004B82;
131   - color: #FFFFFF;
132   - margin-bottom: 20px;
133   - padding: 20px 0 2px 3px;
134   - text-shadow: 0px 1px 0px #333;
135   -}
136   -
137   -.info {
138   - display: block;
139   - margin-bottom: 20px;
140   - text-align: center;
141   -}
142   -
143   -#cores li {
144   - list-style: none;
145   - display: inline-block;
146   - margin: 0;
147   - padding: 0;
148   -}
149   -
150   -#cores li a{
151   - display: block;
152   - padding: 10px;
153   - text-indent: -99999px;
154   - width: 32px;
155   -}
156   -
157   -#verde {background: #00500F; -moz-box-shadow: inset 0 0 10px #fff; -webkit-box-shadow: inset 0 0 10px #fff; box-shadow: inset 0 0 10px #fff;}
158   -#cinza {background: #7F7F7F ; -moz-box-shadow: inset 0 0 10px #fff; -webkit-box-shadow: inset 0 0 10px #fff; box-shadow: inset 0 0 10px #fff;}
159   -#preta {background: #000000; -moz-box-shadow: inset 0 0 10px #fff; -webkit-box-shadow: inset 0 0 10px #fff; box-shadow: inset 0 0 10px #fff;}
160   -#azul {background: #004B82; -moz-box-shadow: inset 0 0 10px #fff; -webkit-box-shadow: inset 0 0 10px #fff; box-shadow: inset 0 0 10px #fff;}
161   -
162   -/* `Footer
163   -----------------------------------------------------------------------------------------------------*/
164   -
165   -#footer {
166   - padding-top: 10px;
167   - background: #ECECEC url(../img/bg-footer.png) repeat-x;
168   - height: 80px;
169   - margin: 0;
170   -}
171   -
172   -
173   -#footer .container_12 {
174   - background: #ECECEC;
175   -}
176   -
177   -.twitter {
178   - position: relative;
179   - left: 0px;
180   - top: 30px;
181   - display: block;
182   - width: 100px;
183   - height: 20px;
184   - background: url(../img/twitter.png) no-repeat;
185   - padding-left: 45px;
186   - font-size: 1.2em;
187   -}
188   -
189   -.marca-governo {
190   - display: block;
191   - width: 300px;
192   - height: 62px;
193   - background: url(../img/marca-governo.png) no-repeat;
194   - float: right;
195   - text-indent: -1000em;
196   -}
197 0 \ No newline at end of file
css/reset.css
View file @de24166
... ... @@ -1,211 +0,0 @@
1   -/* `XHTML, HTML4, HTML5 Reset
2   -----------------------------------------------------------------------------------------------------*/
3   -
4   -a,
5   -abbr,
6   -acronym,
7   -address,
8   -applet,
9   -article,
10   -aside,
11   -audio,
12   -b,
13   -big,
14   -blockquote,
15   -body,
16   -canvas,
17   -caption,
18   -center,
19   -cite,
20   -code,
21   -dd,
22   -del,
23   -details,
24   -dfn,
25   -dialog,
26   -div,
27   -dl,
28   -dt,
29   -em,
30   -embed,
31   -fieldset,
32   -figcaption,
33   -figure,
34   -font,
35   -footer,
36   -form,
37   -h1,
38   -h2,
39   -h3,
40   -h4,
41   -h5,
42   -h6,
43   -header,
44   -hgroup,
45   -hr,
46   -html,
47   -i,
48   -iframe,
49   -img,
50   -ins,
51   -kbd,
52   -label,
53   -legend,
54   -li,
55   -mark,
56   -menu,
57   -meter,
58   -nav,
59   -object,
60   -ol,
61   -output,
62   -p,
63   -pre,
64   -progress,
65   -q,
66   -rp,
67   -rt,
68   -ruby,
69   -s,
70   -samp,
71   -section,
72   -small,
73   -span,
74   -strike,
75   -strong,
76   -sub,
77   -summary,
78   -sup,
79   -table,
80   -tbody,
81   -td,
82   -tfoot,
83   -th,
84   -thead,
85   -time,
86   -tr,
87   -tt,
88   -u,
89   -ul,
90   -var,
91   -video,
92   -xmp {
93   - border: 0;
94   - margin: 0;
95   - padding: 0;
96   - font-size: 100%;
97   -}
98   -
99   -html,
100   -body {
101   - height: 100%;
102   -}
103   -
104   -article,
105   -aside,
106   -details,
107   -figcaption,
108   -figure,
109   -footer,
110   -header,
111   -hgroup,
112   -menu,
113   -nav,
114   -section {
115   -/*
116   - Override the default (display: inline) for
117   - browsers that do not recognize HTML5 tags.
118   -
119   - IE8 (and lower) requires a shiv:
120   - http://ejohn.org/blog/html5-shiv
121   -*/
122   - display: block;
123   -}
124   -
125   -b,
126   -strong {
127   -/*
128   - Makes browsers agree.
129   - IE + Opera = font-weight: bold.
130   - Gecko + WebKit = font-weight: bolder.
131   -*/
132   - font-weight: bold;
133   -}
134   -
135   -img {
136   - color: transparent;
137   - font-size: 0;
138   - vertical-align: middle;
139   -/*
140   - For IE.
141   - http://css-tricks.com/ie-fix-bicubic-scaling-for-images
142   -*/
143   - -ms-interpolation-mode: bicubic;
144   -}
145   -
146   -ol,
147   -ul {
148   - list-style: none;
149   -}
150   -
151   -li {
152   -/*
153   - For IE6 + IE7:
154   -
155   - "display: list-item" keeps bullets from
156   - disappearing if hasLayout is triggered.
157   -*/
158   - display: list-item;
159   -}
160   -
161   -table {
162   - border-collapse: collapse;
163   - border-spacing: 0;
164   -}
165   -
166   -th,
167   -td,
168   -caption {
169   - font-weight: normal;
170   - vertical-align: top;
171   - text-align: left;
172   -}
173   -
174   -q {
175   - quotes: none;
176   -}
177   -
178   -q:before,
179   -q:after {
180   - content: '';
181   - content: none;
182   -}
183   -
184   -sub,
185   -sup,
186   -small {
187   - font-size: 75%;
188   -}
189   -
190   -sub,
191   -sup {
192   - line-height: 0;
193   - position: relative;
194   - vertical-align: baseline;
195   -}
196   -
197   -sub {
198   - bottom: -0.25em;
199   -}
200   -
201   -sup {
202   - top: -0.5em;
203   -}
204   -
205   -svg {
206   -/*
207   - For IE9. Without, occasionally draws shapes
208   - outside the boundaries of <svg> rectangle.
209   -*/
210   - overflow: hidden;
211   -}
212 0 \ No newline at end of file
css/text.css
View file @de24166
... ... @@ -1,85 +0,0 @@
1   -/*
2   - 960 Grid System ~ Text CSS.
3   - Learn more ~ http://960.gs/
4   -
5   - Licensed under GPL and MIT.
6   -*/
7   -
8   -/* `Basic HTML
9   -----------------------------------------------------------------------------------------------------*/
10   -
11   -body {
12   - font: 13px/1.5 Arial, 'Liberation Sans', FreeSans, sans-serif;
13   -}
14   -
15   -pre,
16   -code {
17   - font-family: 'DejaVu Sans Mono', Menlo, Consolas, monospace;
18   -}
19   -
20   -hr {
21   - border: 0 #ccc solid;
22   - border-top-width: 1px;
23   - clear: both;
24   - height: 0;
25   -}
26   -
27   -/* `Headings
28   -----------------------------------------------------------------------------------------------------*/
29   -
30   -h1 {
31   - font-size: 26px;
32   -}
33   -
34   -h2 {
35   - font-size: 23px;
36   -}
37   -
38   -h3 {
39   - font-size: 23px;
40   -}
41   -
42   -h4 {
43   - font-size: 19px;
44   -}
45   -
46   -h5 {
47   - font-size: 17px;
48   -}
49   -
50   -h6 {
51   - font-size: 15px;
52   -}
53   -
54   -/* `Spacing
55   -----------------------------------------------------------------------------------------------------*/
56   -
57   -ol {
58   - list-style: decimal;
59   -}
60   -
61   -ul {
62   - list-style: disc;
63   -}
64   -
65   -li {
66   - margin-left: 20px;
67   -}
68   -
69   -dl,
70   -hr,
71   -h1,
72   -h2,
73   -h3,
74   -h4,
75   -h5,
76   -h6,
77   -ol,
78   -ul,
79   -pre,
80   -table,
81   -address,
82   -fieldset,
83   -figure {
84   - margin-bottom: 20px;
85   -}
86 0 \ No newline at end of file
img/acessibilidade.png
View file @de24166

458 Bytes
img/altocontraste.png
View file @de24166

286 Bytes
img/beta.png
View file @de24166

5.04 KB
img/bg-acessibilidade.png
View file @de24166

182 Bytes
img/bg-footer.png
View file @de24166

156 Bytes
img/bg-links.png
View file @de24166

154 Bytes
img/certificado.png
View file @de24166

58.5 KB
img/contraste.png
View file @de24166

438 Bytes
img/govbr-epwg.png
View file @de24166

11.9 KB
img/i_pular.png
View file @de24166

457 Bytes
img/marca-governo-c.png
View file @de24166

12.8 KB
img/marca-governo.png
View file @de24166

11.8 KB
img/marcador.png
View file @de24166

208 Bytes
img/twitter.png
View file @de24166

1.17 KB
index.html
View file @de24166
... ... @@ -1,187 +0,0 @@
1   -<!DOCTYPE html>
2   -<html lang="pt-BR">
3   - <head>
4   - <meta charset="utf-8" />
5   - <title>Identidade Visual do Governo Federal na Internet</title>
6   - <link rel="shortcut icon" type="image/x-icon" href="imagens/favicon.ico">
7   - <link rel="stylesheet" href="css/reset.css" />
8   - <link rel="stylesheet" href="css/text.css" />
9   - <link rel="stylesheet" href="css/960.css" />
10   - <link rel="stylesheet" href="css/demo.css"/>
11   - <link rel="alternate stylesheet" href="css/contraste.css" title="alto_contraste"/>
12   - <style type="text/css">
13   - #footer-brasil {
14   - background: none repeat scroll 0% 0% #00420c;
15   - padding: 1em 0px;
16   - max-width: 100%;
17   - }
18   - </style>
19   - <script type="text/javascript">
20   - function alto_contraste(title) {
21   - var i, a;
22   - for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
23   - if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
24   - a.disabled = true;
25   - if(a.getAttribute("title") == title) a.disabled = false;
26   - }
27   - }
28   - }
29   - </script>
30   - </head>
31   -<body>
32   - <a href="#content" style="text-indent: -999em;position: absolute; left: -999em;">Ir para Conteúdo</a>
33   - <div id="barra-brasil" style="background:#7F7F7F; height: 20px; padding:4px 0 4px 10px;display:block;">
34   - <ul id="menu-barra-temp" style="list-style:none;">
35   - <li style="display:inline; float:left;padding-right:10px; margin-right:10px; border-right:1px solid #EDEDED"><a href="http://brasil.gov.br" style="font-family:sans,sans-serif; text-decoration:none; color:white;">Portal do Governo Brasileiro</a><br/></li>
36   - <li><a style="font-family:sans,sans-serif; text-decoration:none; color:white;" href="http://epwg.governoeletronico.gov.br/barra/atualize.html">Atualize sua Barra de Governo</a></li>
37   - </ul>
38   - </div>
39   -
40   - <div id="acessibilidade">
41   -
42   - <div class="container">
43   -
44   - <ul class="atalhos">
45   - <li><a href="#content" accesskey="1" class="ipular">Ir para Conteúdo</a></li>
46   - </ul>
47   -
48   - <ul class="links">
49   - <li><a href="#" class="iacessibilidade" onclick="alto_contraste('','1')">Contraste Normal</a></li>
50   - <li><a href="#" class="iautocontraste" onclick="alto_contraste('alto_contraste','1')">Alto Contraste</a></li>
51   - </ul>
52   -
53   - </div>
54   - <div class="clear"></div>
55   -
56   - </div>
57   -
58   - <div id="header">
59   - <div class="container_12">
60   - <div class="grid_8 suffix_1">
61   - <h1>Identidade Visual do Governo Federal na Internet</h1>
62   - <p>Sobre o uso e a aplicação da barra de identidade. Para maiores detalhes consulte o <a href="http://www.secom.gov.br/orientacoes-gerais/comunicacao-digital/nova-barra-de-identidade-do-governo-federal.pdf">Manual de Identidade Visual do Governo Federal na Internet Regras de aplicação da Barra de Identidade</a>.</p>
63   - </div>
64   - <div class="grid_3">
65   - <a href="http://www.governoeletronico.gov.br" title="Sítio do Programa de Governo Eletrônico Brasileiro" class="logo-govbr">Programa de Governo Eletrônico Brasileiro</a>
66   - </div>
67   - <div class="clear"></div>
68   - </div>
69   - </div>
70   -
71   - <div id="content">
72   - <div class="container_12">
73   - <div class="grid_12 suffix_1">
74   - <h2>Sobre a barra</h2>
75   -
76   - <p>A barra de Identidade Visual do Governo Federal na Internet tem a função de identificar, padronizar e integrar sítios e portais do Governo Federal. A barra também tem a função de proporcionar acesso direto ao Portal Brasil - <a href="http://brasil.gov.br">brasil.gov.br</a>, às informações públicas de acordo com a Lei de acesso à informação, aos canais de participação social, ao portal de serviços prestados pelos diversos órgãos - <a href="http://servicos.gov.br/">servicos.gov.br/</a>, página com toda a legislação brasileira - <a href="http://planalto.gov.br/legislacao/">planalto.gov.br/legislacao/</a> e link para os canais de comunicação do Governo Federal.</p>
77   -
78   - <p>Seu uso está normatizado por meio da Instrução Normativa nº 8, de 19 de dezembro de 2014, que pode ser encontrada no sítio da <a href="http://www.secom.gov.br/acesso-a-informacao/institucional/legislacao/arquivos-de-instrucoes-normativas/2014in08-comunicacao-digital.pdf">Secretaria de Comunicação Social da Presidência da República - Secom</a>.</p>
79   -
80   - <p>Com o objetivo de padronizar a codificação e garantir a aderência às normas da Administração Pública, a nova versão da barra utiliza uma arquitetura integrada e dinâmica, não precisa ser desenvolvida, pois sua funcionalidade encontra-se corretamente configurada e pronta para uso.</p>
81   -
82   - <p>A publicação da barra pelos órgãos deverá ser feita de maneira dinâmica por meio da inclusão do código publicado no item Instruções para Uso da Barra no HTML do sítio ou portal.</p>
83   -
84   - <p>Após esta primeira publicação, as demais atualizações serão automáticas.</p>
85   -
86   - <p>A barra funciona de maneira unificada. Todos os sítios e portais que utilizam esta versão apresentam os conteúdos uniformizados.</p>
87   -
88   - <h2>Instruções para o uso da barra</h2>
89   -
90   - <h3>Aplicando os Scripts</h3>
91   -<ol>
92   -<li><h4>Habilitando a barra na página</h4>
93   - <p>Cole este código após a abertura da tag &lt;body&gt;.</p>
94   -
95   -<pre>
96   -&lt;div id="barra-brasil" style="background:#7F7F7F; height: 20px; padding:0 0 0 10px;display:block;"&gt;
97   - &lt;ul id="menu-barra-temp" style="list-style:none;"&gt;
98   - &lt;li style="display:inline; float:left;padding-right:10px; margin-right:10px; border-right:1px solid #EDEDED"&gt;&lt;a href="http://brasil.gov.br" style="font-family:sans,sans-serif; text-decoration:none; color:white;"&gt;Portal do Governo Brasileiro&lt;/a&gt;&lt;/li&gt;
99   - &lt;li&gt;&lt;a style="font-family:sans,sans-serif; text-decoration:none; color:white;" href="http://epwg.governoeletronico.gov.br/barra/atualize.html"&gt;Atualize sua Barra de Governo&lt;/a&gt;&lt;/li&gt;
100   - &lt;/ul&gt;
101   -&lt;/div&gt;
102   -</pre>
103   -
104   -<p> Atenção! A página deve implementar a <a href="http://emag.governoeletronico.gov.br/#s3.1"> recomendação da eMAG 1.5 de fornecer âncoras para ir direto a um bloco de conteúdo.</a> O primeiro link da página deve ser o de ir para o conteúdo</p>. Veja um <a href="https://github.com/plonegovbr/brasil.gov.temas/commit/8033373ec152d9caa3026107dd999d149a4ba7cf#diff-b7977cf34206f8facf114ac5d6795021L22">exemplo de implementação da barra com o uso do primeiro link para ir para o conteúdo.</a>
105   -
106   -<p>Cole este código ao final antes do fechamento da tag &lt;body&gt;. A boa prática orienta que códigos JavaScript que modificam a página no momento do carregamento devem ser declarados ao final do elemento &lt;body&gt;.</p>
107   -
108   -<pre>
109   -&lt;script defer="defer" src="//barra.brasil.gov.br/barra.js" type="text/javascript"&gt;&lt;/script&gt;
110   -</pre>
111   -
112   -<p>Se utilizar em XHTML não é permitido a minificar os atributos. Se for em HTML é possível utilizar somente 'defer' conforme <a href="http://www.w3schools.com/tags/tag_script.asp">exemplo feito pelo W3Schools para a tag script</a>.</p>
113   -</li>
114   -
115   -<li><h4>Mantendo o contexto do órgão no Portal de Serviços ao clicar no link 'Serviços' da barra</h4>
116   -
117   -<p>Para habilitar o parâmentro 'orgao' no link de 'Serviços' cole este código na tag &lt;head&gt;.</p>
118   -
119   -<pre>
120   -&lt;meta property="creator.productor" content="http://estruturaorganizacional.dados.gov.br/id/unidade-organizacional/<strong>NUMERO</strong>"&gt;
121   -</pre>
122   -
123   -<p>Atenção: Troque o <strong>NUMERO</strong> pelo número correto do órgão no SIORG. <a href="http://siorg.planejamento.gov.br">Acesse o SIORG e procure pelo seu órgão.</a></p>
124   -
125   -</li>
126   -
127   -<li>
128   -<h4>Habilitando o footer dinâmico na barra</h4>
129   -
130   -<p>Para o footer dinâmico coloque este código no local do footer e aplique um dos css abaixo conforme seu tema</p>
131   -
132   -<pre>
133   - &lt;div id="footer-brasil"&gt;&lt;/div&gt;
134   -</pre>
135   -
136   -<p>Coloque esse código css se o seu tema for o verde</p>
137   -<pre>
138   -#footer-brasil {
139   - background: none repeat scroll 0% 0% #00420c;
140   - padding: 1em 0px;
141   - max-width: 100%;
142   -}
143   -</pre>
144   -
145   -<p>Coloque esse código css se o seu tema for o amarelo</p>
146   -<pre>
147   -#footer-brasil {
148   - background: none repeat scroll 0% 0% #2c66ce;
149   - padding: 1em 0px;
150   - max-width: 100%;
151   -}
152   -</pre>
153   -
154   -<p>Coloque esse código css se o seu tema for o branco ou o azul</p>
155   -<pre>
156   -#footer-brasil {
157   - background: none repeat scroll 0% 0% #0042b1;
158   - padding: 1em 0px;
159   - max-width: 100%;
160   -}
161   -</pre>
162   -</li>
163   -<li>
164   -<h4>Para habilitar/desabilitar o alto contraste na barra</h4>
165   -
166   -<p>Para habilitar o alto contraste da barra e do rodapé habilite a classe 'contraste' no body:</p>
167   -<pre>
168   -&lt;body class="contraste"&gt;
169   -</pre>
170   -
171   -<p>Para desabilitar o alto contraste da barra e do rodapé desabilite a classe 'contraste' no body:</p>
172   -<pre>
173   -&lt;body class=""&gt;
174   -</pre>
175   -</li>
176   -</ol>
177   -
178   - </div>
179   - <div class="clear"></div>
180   - </div>
181   - </div>
182   -
183   - <div id="footer-brasil"></div>
184   - <script defer="defer" src="//barra.brasil.gov.br/barra.js" type="text/javascript"></script>
185   -
186   -</body>
187   -</html>