manual de aplicacao da barra centralizada - beta

thiago.silva
1 parent 70c02ae2
Showing 19 changed files with 1336 additions and 146 deletions Show diff stats
css/960.css
css/contraste.css
css/demo.css
css/reset.css
css/text.css
img/acessibilidade.png
img/altocontraste.png
img/beta.png
img/bg-acessibilidade.png
img/bg-footer.png
img/bg-links.png
img/contraste.png
img/govbr-epwg.png
img/i_pular.png
img/marca-governo-c.png
img/marca-governo.png
img/marcador.png
img/twitter.png
index.html
@@ -0,0 +1,653 @@
+/*
+  960 Grid System ~ Core CSS.
+  Learn more ~ http://960.gs/
+
+  Licensed under GPL and MIT.
+*/
+
+/*
+  Forces backgrounds to span full width,
+  even if there is horizontal scrolling.
+  Increase this if your layout is wider.
+
+  Note: IE6 works fine without this fix.
+*/
+
+body {
+  min-width: 960px;
+}
+
+/* `Container
+----------------------------------------------------------------------------------------------------*/
+
+.container_12,
+.container_16 {
+  margin-left: auto;
+  margin-right: auto;
+  width: 960px;
+}
+
+/* `Grid >> Global
+----------------------------------------------------------------------------------------------------*/
+
+.grid_1,
+.grid_2,
+.grid_3,
+.grid_4,
+.grid_5,
+.grid_6,
+.grid_7,
+.grid_8,
+.grid_9,
+.grid_10,
+.grid_11,
+.grid_12,
+.grid_13,
+.grid_14,
+.grid_15,
+.grid_16 {
+  display: inline;
+  float: left;
+  margin-left: 10px;
+  margin-right: 10px;  
+}
+
+.push_1, .pull_1,
+.push_2, .pull_2,
+.push_3, .pull_3,
+.push_4, .pull_4,
+.push_5, .pull_5,
+.push_6, .pull_6,
+.push_7, .pull_7,
+.push_8, .pull_8,
+.push_9, .pull_9,
+.push_10, .pull_10,
+.push_11, .pull_11,
+.push_12, .pull_12,
+.push_13, .pull_13,
+.push_14, .pull_14,
+.push_15, .pull_15 {
+  position: relative;
+}
+
+.container_12 .grid_3,
+.container_16 .grid_4 {
+  width: 220px;
+}
+
+.container_12 .grid_6,
+.container_16 .grid_8 {
+  width: 460px;
+}
+
+.container_12 .grid_9,
+.container_16 .grid_12 {
+  width: 700px;
+}
+
+.container_12 .grid_12,
+.container_16 .grid_16 {
+  width: 940px;
+}
+
+/* `Grid >> Children (Alpha ~ First, Omega ~ Last)
+----------------------------------------------------------------------------------------------------*/
+
+.alpha {
+  margin-left: 0;
+}
+
+.omega {
+  margin-right: 0;
+}
+
+/* `Grid >> 12 Columns
+----------------------------------------------------------------------------------------------------*/
+
+.container_12 .grid_1 {
+  width: 60px;
+}
+
+.container_12 .grid_2 {
+  width: 140px;
+}
+
+.container_12 .grid_4 {
+  width: 300px;
+}
+
+.container_12 .grid_5 {
+  width: 380px;
+}
+
+.container_12 .grid_7 {
+  width: 540px;
+}
+
+.container_12 .grid_8 {
+  width: 620px;
+}
+
+.container_12 .grid_10 {
+  width: 780px;
+}
+
+.container_12 .grid_11 {
+  width: 860px;
+}
+
+/* `Grid >> 16 Columns
+----------------------------------------------------------------------------------------------------*/
+
+.container_16 .grid_1 {
+  width: 40px;
+}
+
+.container_16 .grid_2 {
+  width: 100px;
+}
+
+.container_16 .grid_3 {
+  width: 160px;
+}
+
+.container_16 .grid_5 {
+  width: 280px;
+}
+
+.container_16 .grid_6 {
+  width: 340px;
+}
+
+.container_16 .grid_7 {
+  width: 400px;
+}
+
+.container_16 .grid_9 {
+  width: 520px;
+}
+
+.container_16 .grid_10 {
+  width: 580px;
+}
+
+.container_16 .grid_11 {
+  width: 640px;
+}
+
+.container_16 .grid_13 {
+  width: 760px;
+}
+
+.container_16 .grid_14 {
+  width: 820px;
+}
+
+.container_16 .grid_15 {
+  width: 880px;
+}
+
+/* `Prefix Extra Space >> Global
+----------------------------------------------------------------------------------------------------*/
+
+.container_12 .prefix_3,
+.container_16 .prefix_4 {
+  padding-left: 240px;
+}
+
+.container_12 .prefix_6,
+.container_16 .prefix_8 {
+  padding-left: 480px;
+}
+
+.container_12 .prefix_9,
+.container_16 .prefix_12 {
+  padding-left: 720px;
+}
+
+/* `Prefix Extra Space >> 12 Columns
+----------------------------------------------------------------------------------------------------*/
+
+.container_12 .prefix_1 {
+  padding-left: 80px;
+}
+
+.container_12 .prefix_2 {
+  padding-left: 160px;
+}
+
+.container_12 .prefix_4 {
+  padding-left: 320px;
+}
+
+.container_12 .prefix_5 {
+  padding-left: 400px;
+}
+
+.container_12 .prefix_7 {
+  padding-left: 560px;
+}
+
+.container_12 .prefix_8 {
+  padding-left: 640px;
+}
+
+.container_12 .prefix_10 {
+  padding-left: 800px;
+}
+
+.container_12 .prefix_11 {
+  padding-left: 880px;
+}
+
+/* `Prefix Extra Space >> 16 Columns
+----------------------------------------------------------------------------------------------------*/
+
+.container_16 .prefix_1 {
+  padding-left: 60px;
+}
+
+.container_16 .prefix_2 {
+  padding-left: 120px;
+}
+
+.container_16 .prefix_3 {
+  padding-left: 180px;
+}
+
+.container_16 .prefix_5 {
+  padding-left: 300px;
+}
+
+.container_16 .prefix_6 {
+  padding-left: 360px;
+}
+
+.container_16 .prefix_7 {
+  padding-left: 420px;
+}
+
+.container_16 .prefix_9 {
+  padding-left: 540px;
+}
+
+.container_16 .prefix_10 {
+  padding-left: 600px;
+}
+
+.container_16 .prefix_11 {
+  padding-left: 660px;
+}
+
+.container_16 .prefix_13 {
+  padding-left: 780px;
+}
+
+.container_16 .prefix_14 {
+  padding-left: 840px;
+}
+
+.container_16 .prefix_15 {
+  padding-left: 900px;
+}
+
+/* `Suffix Extra Space >> Global
+----------------------------------------------------------------------------------------------------*/
+
+.container_12 .suffix_3,
+.container_16 .suffix_4 {
+  padding-right: 240px;
+}
+
+.container_12 .suffix_6,
+.container_16 .suffix_8 {
+  padding-right: 480px;
+}
+
+.container_12 .suffix_9,
+.container_16 .suffix_12 {
+  padding-right: 720px;
+}
+
+/* `Suffix Extra Space >> 12 Columns
+----------------------------------------------------------------------------------------------------*/
+
+.container_12 .suffix_1 {
+  padding-right: 80px;
+}
+
+.container_12 .suffix_2 {
+  padding-right: 160px;
+}
+
+.container_12 .suffix_4 {
+  padding-right: 320px;
+}
+
+.container_12 .suffix_5 {
+  padding-right: 400px;
+}
+
+.container_12 .suffix_7 {
+  padding-right: 560px;
+}
+
+.container_12 .suffix_8 {
+  padding-right: 640px;
+}
+
+.container_12 .suffix_10 {
+  padding-right: 800px;
+}
+
+.container_12 .suffix_11 {
+  padding-right: 880px;
+}
+
+/* `Suffix Extra Space >> 16 Columns
+----------------------------------------------------------------------------------------------------*/
+
+.container_16 .suffix_1 {
+  padding-right: 60px;
+}
+
+.container_16 .suffix_2 {
+  padding-right: 120px;
+}
+
+.container_16 .suffix_3 {
+  padding-right: 180px;
+}
+
+.container_16 .suffix_5 {
+  padding-right: 300px;
+}
+
+.container_16 .suffix_6 {
+  padding-right: 360px;
+}
+
+.container_16 .suffix_7 {
+  padding-right: 420px;
+}
+
+.container_16 .suffix_9 {
+  padding-right: 540px;
+}
+
+.container_16 .suffix_10 {
+  padding-right: 600px;
+}
+
+.container_16 .suffix_11 {
+  padding-right: 660px;
+}
+
+.container_16 .suffix_13 {
+  padding-right: 780px;
+}
+
+.container_16 .suffix_14 {
+  padding-right: 840px;
+}
+
+.container_16 .suffix_15 {
+  padding-right: 900px;
+}
+
+/* `Push Space >> Global
+----------------------------------------------------------------------------------------------------*/
+
+.container_12 .push_3,
+.container_16 .push_4 {
+  left: 240px;
+}
+
+.container_12 .push_6,
+.container_16 .push_8 {
+  left: 480px;
+}
+
+.container_12 .push_9,
+.container_16 .push_12 {
+  left: 720px;
+}
+
+/* `Push Space >> 12 Columns
+----------------------------------------------------------------------------------------------------*/
+
+.container_12 .push_1 {
+  left: 80px;
+}
+
+.container_12 .push_2 {
+  left: 160px;
+}
+
+.container_12 .push_4 {
+  left: 320px;
+}
+
+.container_12 .push_5 {
+  left: 400px;
+}
+
+.container_12 .push_7 {
+  left: 560px;
+}
+
+.container_12 .push_8 {
+  left: 640px;
+}
+
+.container_12 .push_10 {
+  left: 800px;
+}
+
+.container_12 .push_11 {
+  left: 880px;
+}
+
+/* `Push Space >> 16 Columns
+----------------------------------------------------------------------------------------------------*/
+
+.container_16 .push_1 {
+  left: 60px;
+}
+
+.container_16 .push_2 {
+  left: 120px;
+}
+
+.container_16 .push_3 {
+  left: 180px;
+}
+
+.container_16 .push_5 {
+  left: 300px;
+}
+
+.container_16 .push_6 {
+  left: 360px;
+}
+
+.container_16 .push_7 {
+  left: 420px;
+}
+
+.container_16 .push_9 {
+  left: 540px;
+}
+
+.container_16 .push_10 {
+  left: 600px;
+}
+
+.container_16 .push_11 {
+  left: 660px;
+}
+
+.container_16 .push_13 {
+  left: 780px;
+}
+
+.container_16 .push_14 {
+  left: 840px;
+}
+
+.container_16 .push_15 {
+  left: 900px;
+}
+
+/* `Pull Space >> Global
+----------------------------------------------------------------------------------------------------*/
+
+.container_12 .pull_3,
+.container_16 .pull_4 {
+  left: -240px;
+}
+
+.container_12 .pull_6,
+.container_16 .pull_8 {
+  left: -480px;
+}
+
+.container_12 .pull_9,
+.container_16 .pull_12 {
+  left: -720px;
+}
+
+/* `Pull Space >> 12 Columns
+----------------------------------------------------------------------------------------------------*/
+
+.container_12 .pull_1 {
+  left: -80px;
+}
+
+.container_12 .pull_2 {
+  left: -160px;
+}
+
+.container_12 .pull_4 {
+  left: -320px;
+}
+
+.container_12 .pull_5 {
+  left: -400px;
+}
+
+.container_12 .pull_7 {
+  left: -560px;
+}
+
+.container_12 .pull_8 {
+  left: -640px;
+}
+
+.container_12 .pull_10 {
+  left: -800px;
+}
+
+.container_12 .pull_11 {
+  left: -880px;
+}
+
+/* `Pull Space >> 16 Columns
+----------------------------------------------------------------------------------------------------*/
+
+.container_16 .pull_1 {
+  left: -60px;
+}
+
+.container_16 .pull_2 {
+  left: -120px;
+}
+
+.container_16 .pull_3 {
+  left: -180px;
+}
+
+.container_16 .pull_5 {
+  left: -300px;
+}
+
+.container_16 .pull_6 {
+  left: -360px;
+}
+
+.container_16 .pull_7 {
+  left: -420px;
+}
+
+.container_16 .pull_9 {
+  left: -540px;
+}
+
+.container_16 .pull_10 {
+  left: -600px;
+}
+
+.container_16 .pull_11 {
+  left: -660px;
+}
+
+.container_16 .pull_13 {
+  left: -780px;
+}
+
+.container_16 .pull_14 {
+  left: -840px;
+}
+
+.container_16 .pull_15 {
+  left: -900px;
+}
+
+/* `Clear Floated Elements
+----------------------------------------------------------------------------------------------------*/
+
+/* http://sonspring.com/journal/clearing-floats */
+
+.clear {
+  clear: both;
+  display: block;
+  overflow: hidden;
+  visibility: hidden;
+  width: 0;
+  height: 0;
+}
+
+/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
+
+.clearfix:before,
+.clearfix:after,
+.container_12:before,
+.container_12:after,
+.container_16:before,
+.container_16:after {
+  content: '.';
+  display: block;
+  overflow: hidden;
+  visibility: hidden;
+  font-size: 0;
+  line-height: 0;
+  width: 0;
+  height: 0;
+}
+
+.clearfix:after,
+.container_12:after,
+.container_16:after {
+  clear: both;
+}
+
+/*
+  The following zoom:1 rule is specifically for IE6 + IE7.
+  Move to separate stylesheet if invalid CSS is a problem.
+*/
+
+.clearfix,
+.container_12,
+.container_16 {
+  zoom: 1;
+}
 \ No newline at end of file
@@ -0,0 +1,72 @@
+body {
+  background: #000;
+  color: #fff;  
+}
+
+a {
+  color: #ffcc00;
+}
+
+h1 {  
+  text-shadow: 0px 0px 0px #ccc;
+  color: #fff;
+}
+
+h2 {
+  background: #ffcc00;
+  color: #000;  
+  text-shadow: 0px 0px 0px #333;
+}
+
+.container_12 {
+  background-color: #000;
+}
+
+/* `Barra Acessibilidade
+----------------------------------------------------------------------------------------------------*/
+
+#acessibilidade a{
+	color: #004B82
+}
+
+/* `Content
+----------------------------------------------------------------------------------------------------*/
+
+code, pre {  
+  background: #000;
+  color: #fff;  
+}
+
+
+/* `Sidebar
+----------------------------------------------------------------------------------------------------*/
+
+.grid_3 h3 {
+  background: #ffcc00;
+  color: #000;
+  text-shadow: 0px 0px 0px #333;
+}
+
+#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;
+}
+
+
+/* `Footer
+----------------------------------------------------------------------------------------------------*/
+
+#footer {  
+  background: #000;  
+}
+
+
+#footer .container_12 {
+  background: #000;  
+}
+
+.marca-governo {
+  background: url(../img/marca-governo-c.png) no-repeat;
+}
 \ No newline at end of file
@@ -0,0 +1,196 @@
+body {
+  background: #fff;
+  color: #000;
+  font-size: 13px;
+  height: auto;
+}
+
+a {
+  color: #004B82;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+h1 {  
+  padding-top: 20px;
+  text-shadow: 0px 2px 0px #ccc;
+  letter-spacing: -1px;
+}
+
+h2 {
+  background: #004B82;
+  color: #FFFFFF;
+  margin-bottom: 20px;
+  padding: 20px 0 2px 3px;
+  text-shadow: 0px 1px 0px #333;
+}
+
+p {  
+  overflow: hidden;
+  padding: 5px 0 10px 0;
+  line-height: 1.6em;
+}
+
+.container {
+  margin-left: auto;
+  margin-right: auto;
+  width: 960px;
+}
+
+.container_12 {
+  background-color: #fff;
+  background-repeat: repeat-y;
+  margin-bottom: 20px;
+}
+
+/* `Barra Acessibilidade
+----------------------------------------------------------------------------------------------------*/
+
+#acessibilidade {  
+  background: url(../img/bg-acessibilidade.png) repeat-x;
+  padding: 8px 0;
+  margin-bottom: 20px;
+  font-size: 0.9em;
+}
+
+#acessibilidade .atalhos {
+  float: left;  
+}
+
+#acessibilidade .atalhos li{
+  display: inline;
+  padding: 0 0 0 0px;
+}
+
+#acessibilidade .links {
+  float: right;
+  background: url(../img/bg-links.png) no-repeat 165px 0 ;
+}
+
+#acessibilidade .links li{
+  display: inline;
+  padding: 6px 10px;
+}
+
+.ipular {background: url(../img/i_pular.png) no-repeat 0px 3px; width: 10px; height: 10px; padding-left: 18px}
+.ipular:hover {background: url(../img/i_pular.png) no-repeat 0px -10px; width: 10px; height: 10px; padding-left: 18px}
+
+.iacessibilidade {background: url(../img/contraste.png) no-repeat 2px 1px; width: 15px; height: 10px; padding-left: 20px}
+.iautocontraste {background: url(../img/altocontraste.png) no-repeat 2px 1px; width: 15px; height: 10px; padding-left: 20px}
+
+/* `Header
+----------------------------------------------------------------------------------------------------*/
+
+.logo-govbr {
+  background: url(../img/govbr-epwg.png) no-repeat;
+  display: block;
+  height: 85px;
+  text-indent: -99999em;
+  width: 220px;
+}
+
+#header .grid_8 {position: relative;}
+
+.beta {
+  position: absolute;
+  width: 55px;
+  height: 58px;
+  background: url(../img/beta.png) no-repeat 2px 4px;
+  text-indent: -99999px;
+  right: 80px;
+  top: -15px;  
+}
+
+/* `Content
+----------------------------------------------------------------------------------------------------*/
+
+code, pre {
+  border: 1px solid #ccc;
+  background: #F8F8F8;
+  color: #000000;
+  display: block;
+  font-family: 'Courier New',Courier,Fixed,monospace;
+  font-size: 100%;
+  
+  line-height: 17px;
+  margin: 1em 0;
+  overflow: auto;
+  padding: 5px 20px 5px 30px;
+  text-align: left;
+}
+
+
+/* `Sidebar
+----------------------------------------------------------------------------------------------------*/
+
+.grid_3 h3 {
+  background: #004B82;
+  color: #FFFFFF;
+  margin-bottom: 20px;
+  padding: 20px 0 2px 3px;
+  text-shadow: 0px 1px 0px #333;
+}
+
+.info {
+  display: block;
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+#cores li {
+  list-style: none;
+  display: inline-block;  
+  margin: 0;
+  padding: 0;
+}
+
+#cores li a{
+  display: block;
+  padding: 10px;
+  text-indent: -99999px;
+  width: 32px;
+}
+
+#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;}
+#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;}
+#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;}
+#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;}
+
+/* `Footer
+----------------------------------------------------------------------------------------------------*/
+
+#footer {
+  padding-top: 10px;
+  background: #ECECEC url(../img/bg-footer.png) repeat-x;
+  height: 80px;
+  margin: 0;
+}
+
+
+#footer .container_12 {
+  background: #ECECEC;  
+}
+
+.twitter {
+  position: relative;
+  left: 0px;
+  top: 30px;
+  display: block;
+  width: 100px;
+  height: 20px;
+  background: url(../img/twitter.png) no-repeat;
+  padding-left: 45px;
+  font-size: 1.2em;
+}
+
+.marca-governo {
+  display: block;
+  width: 300px;
+  height: 62px;
+  background: url(../img/marca-governo.png) no-repeat;
+  float: right;
+  text-indent: -1000em;
+}
 \ No newline at end of file
@@ -0,0 +1,211 @@
+/* `XHTML, HTML4, HTML5 Reset
+----------------------------------------------------------------------------------------------------*/
+
+a,
+abbr,
+acronym,
+address,
+applet,
+article,
+aside,
+audio,
+b,
+big,
+blockquote,
+body,
+canvas,
+caption,
+center,
+cite,
+code,
+dd,
+del,
+details,
+dfn,
+dialog,
+div,
+dl,
+dt,
+em,
+embed,
+fieldset,
+figcaption,
+figure,
+font,
+footer,
+form,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+header,
+hgroup,
+hr,
+html,
+i,
+iframe,
+img,
+ins,
+kbd,
+label,
+legend,
+li,
+mark,
+menu,
+meter,
+nav,
+object,
+ol,
+output,
+p,
+pre,
+progress,
+q,
+rp,
+rt,
+ruby,
+s,
+samp,
+section,
+small,
+span,
+strike,
+strong,
+sub,
+summary,
+sup,
+table,
+tbody,
+td,
+tfoot,
+th,
+thead,
+time,
+tr,
+tt,
+u,
+ul,
+var,
+video,
+xmp {
+  border: 0;
+  margin: 0;
+  padding: 0;
+  font-size: 100%;
+}
+
+html,
+body {
+  height: 100%;
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+/*
+  Override the default (display: inline) for
+  browsers that do not recognize HTML5 tags.
+
+  IE8 (and lower) requires a shiv:
+  http://ejohn.org/blog/html5-shiv
+*/
+  display: block;
+}
+
+b,
+strong {
+/*
+  Makes browsers agree.
+  IE + Opera = font-weight: bold.
+  Gecko + WebKit = font-weight: bolder.
+*/
+  font-weight: bold;
+}
+
+img {
+  color: transparent;
+  font-size: 0;
+  vertical-align: middle;
+/*
+  For IE.
+  http://css-tricks.com/ie-fix-bicubic-scaling-for-images
+*/
+  -ms-interpolation-mode: bicubic;
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+li {
+/*
+  For IE6 + IE7:
+
+  "display: list-item" keeps bullets from
+  disappearing if hasLayout is triggered.
+*/
+  display: list-item;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+th,
+td,
+caption {
+  font-weight: normal;
+  vertical-align: top;
+  text-align: left;
+}
+
+q {
+  quotes: none;
+}
+
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+
+sub,
+sup,
+small {
+  font-size: 75%;
+}
+
+sub,
+sup {
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+svg {
+/*
+  For IE9. Without, occasionally draws shapes
+  outside the boundaries of <svg> rectangle.
+*/
+  overflow: hidden;
+}
 \ No newline at end of file
@@ -0,0 +1,85 @@
+/*
+  960 Grid System ~ Text CSS.
+  Learn more ~ http://960.gs/
+
+  Licensed under GPL and MIT.
+*/
+
+/* `Basic HTML
+----------------------------------------------------------------------------------------------------*/
+
+body {
+  font: 13px/1.5 Arial, 'Liberation Sans', FreeSans, sans-serif;
+}
+
+pre,
+code {
+  font-family: 'DejaVu Sans Mono', Menlo, Consolas, monospace;
+}
+
+hr {
+  border: 0 #ccc solid;
+  border-top-width: 1px;
+  clear: both;
+  height: 0;
+}
+
+/* `Headings
+----------------------------------------------------------------------------------------------------*/
+
+h1 {
+  font-size: 26px;
+}
+
+h2 {
+  font-size: 23px;
+}
+
+h3 {
+  font-size: 23px;
+}
+
+h4 {
+  font-size: 19px;
+}
+
+h5 {
+  font-size: 17px;
+}
+
+h6 {
+  font-size: 15px;
+}
+
+/* `Spacing
+----------------------------------------------------------------------------------------------------*/
+
+ol {
+  list-style: decimal;
+}
+
+ul {
+  list-style: disc;
+}
+
+li {
+  margin-left: 20px;
+}
+
+dl,
+hr,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+ol,
+ul,
+pre,
+table,
+address,
+fieldset,
+figure {
+  margin-bottom: 20px;
+}
 \ No newline at end of file
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
-<html lang="pt-br">
-<head>
-	<title>Identidade Visual do Governo Federal na Internet</title>
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-
-	<link href="style.css" media="all" rel="stylesheet" type="text/css">	
-    <link rel="shortcut icon" type="image/x-icon" href="imagens/favicon.ico">
-    
-    <!--[if !IE 7]>
-    	<style type="text/css">
-	    	#wrap {display:table;height:100%}
-	    </style>
-    <![endif]-->	
-    
-	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
-    <script src="js/effects.js" type="text/javascript"></script>
-    <script type="text/javascript">
-        $(document).ready(function() {
-            $("#menu li a").click(function() {
-                $("link").attr("href",$(this).attr('rel'));
-                return false;
-            });
-        
-            $(".iautocontraste a").click(function() {
-                $("link").attr("href",$(this).attr('rel'));
-                $(this).attr('rel',($(this).attr('rel')=="autocontraste.css") ? "style.css" : "autocontraste.css");
-                return false;
-            });
-        });
-    </script>
-</head>
-
+<!DOCTYPE html>
+<html lang="pt-BR">
+    <head>
+        <meta charset="utf-8" />
+        <title>Identidade Visual do Governo Federal na Internet</title>
+        <link rel="shortcut icon" type="image/x-icon" href="imagens/favicon.ico">
+        <link rel="stylesheet" href="css/reset.css" />
+        <link rel="stylesheet" href="css/text.css" />
+        <link rel="stylesheet" href="css/960.css" />
+        <link rel="stylesheet" href="css/demo.css"/>
+        <link rel="alternate stylesheet" href="css/contraste.css" title="alto_contraste"/>        
+
+        <script type="text/javascript">
+            function change_bar(color) {                
+                var remove_js = document.getElementsByTagName('script')[1];
+                var r_js = remove_js.parentNode.removeChild(remove_js);
+                var remove_css = document.getElementsByTagName('style')[0];
+                var r_css = remove_css.parentNode.removeChild(remove_css);                
+                var headID = document.getElementsByTagName('body')[0];
+                var newScript = document.createElement('script');                
+                newScript.type = 'text/javascript';
+                newScript.src = 'http://barra.brasil.gov.br/barra.js?cor='+color;
+                headID.appendChild(newScript).reload();
+            }   
+
+            function alto_contraste(title) {
+                var i, a;
+                for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
+                    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
+                    a.disabled = true;
+                    if(a.getAttribute("title") == title) a.disabled = false;
+                    }
+                }
+            }
+        </script>
+    </head>
 <body>
  
-<div id="barra-brasil">   
-    <div class="barra">
-        <ul>
-            <li><a href="http://www.acessoainformacao.gov.br" class="ai" title="Acesso à informação">www.sic.gov.br</a></li>
-            <li><a href="http://www.brasil.gov.br" class="brasilgov" title="Portal de Estado do Brasil">www.brasil.gov.br</a></li>        
-        </ul>
-    </div>
-</div>
-
-<div id="wrap">
-
-    <div id="barra-auxiliar">
-        <div class="pular">
-            <a href="#principal" class="ipular" title="Pular para conteúdo">Pular para conteúdo</a>
-        </div>        
-        <div class="acessibilidade">
-	        <ul>
-	            <li class="iaumentar"><a class="aumentar" href="#" title="Aumentar fonte">Aumentar Fonte</a></li>
-	            <li class="inormal"><a class="normal" href="#" title="Tamanho normal da fonte">Tamanho Normal</a></li>
-	            <li class="idiminuir"><a class="diminuir" href="#" title="Diminuir fonte">Diminuir Fonte</a></li>
-                <li class="iautocontraste"><a class="autocontraste" href="#" rel="autocontraste.css" title="Auto Contraste">Auto Contraste</a></li>
-            </ul>
+    <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; ">Portal do Governo Brasileiro</a>
+    </div>    
+
+    <div id="acessibilidade">
+        
+        <div class="container">
+            
+                <ul class="atalhos">
+                    <li><a href="#content" accesskey="1" class="ipular">Ir para Conteúdo</a></li>                    
+                </ul>            
+            
+                <ul class="links">
+                    <li><a href="#" class="iacessibilidade" onclick="alto_contraste('','1')">Contraste Normal</a></li>
+                    <li><a href="#" class="iautocontraste" onclick="alto_contraste('alto_contraste','1')">Alto Contraste</a></li>
+                </ul>
+            
         </div>
-    </div><!-- #barra-auxiliar -->
+        <div class="clear"></div>
+        
+    </div>
  
-	<div id="header">
-	        <div class="h-esquerda">
+    <div id="header">
+        <div class="container_12">
+            <div class="grid_8 suffix_1">
                 <h1>Identidade Visual do Governo Federal na Internet</h1>
+                <span class="beta">Versão Beta</span>
                 <p>Sobre o uso e a aplicação da barra de identidade. Para maiores detalhes consulte o <a href="http://www.secom.gov.br/arquivos-de-manuais-e-marca/manual-de-identidade-visual-do-governo-federal-na-internet-">Manual de Identidade Visual do Governo Federal na Internet Regras de aplicação da Barra de Identidade</a>.</p>
-            </div>        
-            <div class="h-direita">
-        		<a href="http://www.governoeletronico.gov.br" title="Site do Programa de Governo Eletrônico Brasileiro" class="logo-govbr">Programa de Governo Eletrônico Brasileiro</a>
             </div>
-	</div><!-- #header -->
-	
-	<div id="principal">
-   	   
-        <div class="p-esquerda"> 
-            <h2>Sobre a barra</h2>
-            <p>A barra tem a função de identificar, padronizar e integrar sites e portais do Governo Federal. À sua direita, a marca do Governo Federal com link para o Portal de Estado do Brasil <a href="https://www.brasil.gov.br">www.brasil.gov.br.</a></p>
-            <p>Seu uso está normatizado por meio da Instrução Normativa nº 2, de 16 de dezembro de 2009, que pode ser encontrada no site da <a href="http://www.secom.gov.br/manuais-e-marca/internet">Secretaria de Comunicação Social da Presidência da República - Secom</a>.</p>
-            <p>A implementação apresentada traz melhorias no código dos exemplos disponibilizados como: redução da quantidade de código; conformidade e acessibilidade.</p>
-            <p>Faça o download das imagens e aplique os códigos abaixo.</p>
-            <div class="download"><a href="imagens.zip" class="l-download">Download das Imagens (12,5 KB, .zip)</a></div>
-
-<h2>Aplicando o HTML</h2>
+            <div class="grid_3">
+                <a href="http://www.governoeletronico.gov.br" title="Site do Programa de Governo Eletrônico Brasileiro" class="logo-govbr">Programa de Governo Eletrônico Brasileiro</a>
+            </div>
+            <div class="clear"></div>
+        </div>
+    </div>
+
+    <div id="content">
+        <div class="container_12">
+            <div class="grid_8 suffix_1">
+                <h2>Sobre a barra</h2>
+                
+                <p>A barra tem a função de identificar, padronizar e integrar sites e portais do Governo Federal. À sua direita constam as marcas do Governo Federal e da Lei de Acesso a Informação com links para acesso ao Portal de Estado do Brasil <a href="http://www.brasil.gov.br">www.brasil.gov.br</a> e o site oficial sobre a lei de acesso a informação da Controladoria Geral da União <a href="http://www.acessoainformacao.gov.br">www.acessoainformacao.gov.br</a>.</p>
+
+                <p>Seu uso está normatizado por meio da Instrução Normativa nº 2, de 16 de dezembro de 2009, que pode ser encontrada no site da <a href="http://www.secom.gov.br/manuais-e-marca/internet">Secretaria de Comunicação Social da Presidência da República - Secom</a>.</p>
+                
+                <p>Cada órgão é responsável pela implementação da barra em seus sítios e portais. Semelhantemente a atualização da barra é de responsabilidade do órgão. Com o objetivo de padronizar a codificação e garantir a aderência às normas da Adminstração Pública, a nova versão da barra utiliza uma arquitetura integrada e dinâmica.</p>
+
+                <p>A barra funciona de forma dinâmica. Todos os sítios e portais que utilizam esta versão apresentam o conteúdo da barra mais atual.</p>                
+
+                <h2>Instruções para o uso da barra</h2>                
+
+                <h3>Aplicando o Javascript</h3>
+
+                <p>Código responsável por fazer a seleção da barra. A cor é definida utilizando o parâmentro 'cor' com uma das opções: 'azul', 'preta', 'cinza' ou 'verde'. Para otimizar o carregamento recomenda-se colocar a tag &lt;script&gt; antes do fechamento do &lt;body&gt;.</p>
+
 <pre>
-&lt;div id="barra-brasil"&gt;
-    &lt;div class="barra"&gt;
-        &lt;ul&gt;
-            &lt;li&gt;&lt;a href="http://www.acessoainformacao.gov.br" class="ai" title="Acesso à informação">www.sic.gov.br&lt;/a&gt;&lt;/li&gt;
-            &lt;li&gt;&lt;a href="http://www.brasil.gov.br" class="brasilgov" title="Portal de Estado do Brasil">www.brasil.gov.br&lt;/a&gt;&lt;/li&gt;
-        &lt;/ul&gt;
-    &lt;/div&gt;
-&lt;/div&gt;
+&lt;script src="http://barra.brasil.gov.br/barra.js?cor=azul" type="text/javascript"&gt;&lt;/script&gt;
 </pre>
  
-<h2>Aplicando o CSS</h2>
-
-<p>Ao aplicar o CSS levar em consideração a técnica <a href="https://www.google.com/search?q=css+reset">CSS Reset</a> para uma melhor visualização e compatibilidade com outos navegadores. O exemplo abaixo é relativo a cor azul (hexadecimal: #004b82).</p>
+                <h3>Aplicando o Javascript</h3>
  
+                <p>Código responsável pelo carregamento do HTML da barra conforme parametrização indicada no javascript. Em casos que o javascript do browser não esteja habilitado, o código deste HTML é carregado, inserindo uma barra padrão para que o sítio ou portal não fique sem identificação.</p>
 <pre>
-#barra-brasil { 
-    position:relative;
-    overflow:hidden;
-    min-width:1000px;
-    background: #004b82 url(imagens/barra-brasil-v3-bgx.png) center bottom no-repeat;
-}
-
-#barra-brasil .barra {
-    display: block;
-    width: 960px;
-    height:28px;
-    margin: 0 auto;
-    background: url(imagens/barra-brasil-v3-bgx.gif) 0 bottom repeat-x;
-}
-
-#barra-brasil .barra ul {
-    float:right;
-    width: 319px;
-}
-
-#barra-brasil .barra ul li {
-    float: left;
-    padding-left: 25px;
-}
-
-#barra-brasil .ai {
-    display: block;
-    width: 161px;
-    height: 28px;
-    text-indent: -1000px;
-    background: #004b82 url(imagens/ai.png) no-repeat 0 4px;
-}
-
-#barra-brasil .brasilgov {
-    display: block;
-    width: 101px;
-    height: 28px;
-    text-indent: -1000px;
-    background: #004b82 url(imagens/brasil.png) no-repeat 0 4px;
-}
+&lt;div id="barra-brasil"&gt;
+    &lt;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; ">Portal do Governo Brasileiro&lt;/a&gt;
+&lt;/div&gt;
 </pre>
-        </div><!-- p-esquerda -->
-        
-        <div class="p-direita">
-            <h3>Cores Disponíveis</h3>
-            <ul id="menu">
-                <li><a href="#" rel="verde.css">Verde</a> <span class="hexa">Hexadecimal</span> <span class="verde">#00500F</span></li>
-                <li><a href="#" rel="cinza.css">Cinza</a> <span class="hexa">Hexadecimal</span> <span class="cinza">#7F7F7F</span></li>
-                <li><a href="#" rel="preto.css">Preto</a> <span class="hexa">Hexadecimal</span> <span class="preto">#000000</span></li>
-                <li><a href="#" rel="style.css">Azul</a> <span class="hexa">Hexadecimal</span> <span class="azul">#004B82</span></li>
-            </ul>
-
-        </div><!-- p-direita -->
-        
-	</div><!-- #principal -->
-		
-</div><!-- #wrap -->
  
-<div id="footer">
-    <a class="twitter" href="http://twitter.com/egovbr">Siga o Gov.br</a>    
-    <a class="marca-governo" href="http://www.planejamento.gov.br">Ministério do Planejamento, Orçamento e Gestão</a>
-</div><!-- #footer -->
+            </div>
+            <div class="grid_3">
+                <h3>Cores Disponíveis</h3>
+                <span class="info">Clique na paleta para visualizar</span>
+                <ul id="cores">
+                    <li><a href="#" id="verde" onclick="change_bar('verde')">verde</a></li>
+                    <li><a href="#" id="cinza" onclick="change_bar('cinza')">cinza</a></li>
+                    <li><a href="#" id="preta" onclick="change_bar('preta')">preta</a></li>
+                    <li><a href="#" id="azul" onclick="change_bar('azul')">azul</a></li>
+                </ul>
+            </div>
+            <div class="clear"></div>
+        </div>
+    </div>
  
+    <div id="footer">
+        <div class="container_12">
+            <div class="grid_6">
+                <a class="twitter" href="http://twitter.com/egovbr">Siga o Gov.br</a>
+            </div>
+            <div class="grid_6">
+                <a class="marca-governo" href="http://www.planejamento.gov.br">Ministério do Planejamento, Orçamento e Gestão</a>
+            </div>
+            <div class="clear"></div>
+        </div>
+    </div>
+    <script id="teste" src="http://barra.brasil.gov.br/barra.js?cor=azul" type="text/javascript"></script>    
 </body>
 -</html>
+</html>
 \ No newline at end of file
...	...	@@ -0,0 +1,653 @@
	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	+}
0	654	\ No newline at end of file
...	...
...	...	@@ -0,0 +1,72 @@
	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	+}
0	73	\ No newline at end of file
...	...
...	...	@@ -0,0 +1,196 @@
	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	+}
0	197	\ No newline at end of file
...	...
...	...	@@ -0,0 +1,211 @@
	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	+}
0	212	\ No newline at end of file
...	...
...	...	@@ -0,0 +1,85 @@
	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	+}
0	86	\ No newline at end of file
...	...
1		-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2		-<html lang="pt-br">
3		-<head>
4		- <title>Identidade Visual do Governo Federal na Internet</title>
5		- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
6		-
7		- <link href="style.css" media="all" rel="stylesheet" type="text/css">
8		- <link rel="shortcut icon" type="image/x-icon" href="imagens/favicon.ico">
9		-
10		- <!--[if !IE 7]>
11		- <style type="text/css">
12		- #wrap {display:table;height:100%}
13		- </style>
14		- <![endif]-->
15		-
16		- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
17		- <script src="js/effects.js" type="text/javascript"></script>
18		- <script type="text/javascript">
19		- $(document).ready(function() {
20		- $("#menu li a").click(function() {
21		- $("link").attr("href",$(this).attr('rel'));
22		- return false;
23		- });
24		-
25		- $(".iautocontraste a").click(function() {
26		- $("link").attr("href",$(this).attr('rel'));
27		- $(this).attr('rel',($(this).attr('rel')=="autocontraste.css") ? "style.css" : "autocontraste.css");
28		- return false;
29		- });
30		- });
31		- </script>
32		-</head>
33		-
	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	+
	13	+ <script type="text/javascript">
	14	+ function change_bar(color) {
	15	+ var remove_js = document.getElementsByTagName('script')[1];
	16	+ var r_js = remove_js.parentNode.removeChild(remove_js);
	17	+ var remove_css = document.getElementsByTagName('style')[0];
	18	+ var r_css = remove_css.parentNode.removeChild(remove_css);
	19	+ var headID = document.getElementsByTagName('body')[0];
	20	+ var newScript = document.createElement('script');
	21	+ newScript.type = 'text/javascript';
	22	+ newScript.src = 'http://barra.brasil.gov.br/barra.js?cor='+color;
	23	+ headID.appendChild(newScript).reload();
	24	+ }
	25	+
	26	+ function alto_contraste(title) {
	27	+ var i, a;
	28	+ for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
	29	+ if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
	30	+ a.disabled = true;
	31	+ if(a.getAttribute("title") == title) a.disabled = false;
	32	+ }
	33	+ }
	34	+ }
	35	+ </script>
	36	+ </head>
34	37	<body>
35	38
36		-<div id="barra-brasil">
37		- <div class="barra">
38		- <ul>
39		- <li><a href="http://www.acessoainformacao.gov.br" class="ai" title="Acesso à informação">www.sic.gov.br</a></li>
40		- <li><a href="http://www.brasil.gov.br" class="brasilgov" title="Portal de Estado do Brasil">www.brasil.gov.br</a></li>
41		- </ul>
42		- </div>
43		-</div>
44		-
45		-<div id="wrap">
46		-
47		- <div id="barra-auxiliar">
48		- <div class="pular">
49		- <a href="#principal" class="ipular" title="Pular para conteúdo">Pular para conteúdo</a>
50		- </div>
51		- <div class="acessibilidade">
52		- <ul>
53		- <li class="iaumentar"><a class="aumentar" href="#" title="Aumentar fonte">Aumentar Fonte</a></li>
54		- <li class="inormal"><a class="normal" href="#" title="Tamanho normal da fonte">Tamanho Normal</a></li>
55		- <li class="idiminuir"><a class="diminuir" href="#" title="Diminuir fonte">Diminuir Fonte</a></li>
56		- <li class="iautocontraste"><a class="autocontraste" href="#" rel="autocontraste.css" title="Auto Contraste">Auto Contraste</a></li>
57		- </ul>
	39	+ <div id="barra-brasil">
	40	+ <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; ">Portal do Governo Brasileiro</a>
	41	+ </div>
	42	+
	43	+ <div id="acessibilidade">
	44	+
	45	+ <div class="container">
	46	+
	47	+ <ul class="atalhos">
	48	+ <li><a href="#content" accesskey="1" class="ipular">Ir para Conteúdo</a></li>
	49	+ </ul>
	50	+
	51	+ <ul class="links">
	52	+ <li><a href="#" class="iacessibilidade" onclick="alto_contraste('','1')">Contraste Normal</a></li>
	53	+ <li><a href="#" class="iautocontraste" onclick="alto_contraste('alto_contraste','1')">Alto Contraste</a></li>
	54	+ </ul>
	55	+
58	56	</div>
59		- </div><!-- #barra-auxiliar -->
	57	+ <div class="clear"></div>
	58	+
	59	+ </div>
60	60
61		- <div id="header">
62		- <div class="h-esquerda">
	61	+ <div id="header">
	62	+ <div class="container_12">
	63	+ <div class="grid_8 suffix_1">
63	64	<h1>Identidade Visual do Governo Federal na Internet</h1>
	65	+ <span class="beta">Versão Beta</span>
64	66	<p>Sobre o uso e a aplicação da barra de identidade. Para maiores detalhes consulte o <a href="http://www.secom.gov.br/arquivos-de-manuais-e-marca/manual-de-identidade-visual-do-governo-federal-na-internet-">Manual de Identidade Visual do Governo Federal na Internet Regras de aplicação da Barra de Identidade</a>.</p>
65		- </div>
66		- <div class="h-direita">
67		- <a href="http://www.governoeletronico.gov.br" title="Site do Programa de Governo Eletrônico Brasileiro" class="logo-govbr">Programa de Governo Eletrônico Brasileiro</a>
68	67	</div>
69		- </div><!-- #header -->
70		-
71		- <div id="principal">
72		-
73		- <div class="p-esquerda">
74		- <h2>Sobre a barra</h2>
75		- <p>A barra tem a função de identificar, padronizar e integrar sites e portais do Governo Federal. À sua direita, a marca do Governo Federal com link para o Portal de Estado do Brasil <a href="https://www.brasil.gov.br">www.brasil.gov.br.</a></p>
76		- <p>Seu uso está normatizado por meio da Instrução Normativa nº 2, de 16 de dezembro de 2009, que pode ser encontrada no site da <a href="http://www.secom.gov.br/manuais-e-marca/internet">Secretaria de Comunicação Social da Presidência da República - Secom</a>.</p>
77		- <p>A implementação apresentada traz melhorias no código dos exemplos disponibilizados como: redução da quantidade de código; conformidade e acessibilidade.</p>
78		- <p>Faça o download das imagens e aplique os códigos abaixo.</p>
79		- <div class="download"><a href="imagens.zip" class="l-download">Download das Imagens (12,5 KB, .zip)</a></div>
80		-
81		-<h2>Aplicando o HTML</h2>
	68	+ <div class="grid_3">
	69	+ <a href="http://www.governoeletronico.gov.br" title="Site do Programa de Governo Eletrônico Brasileiro" class="logo-govbr">Programa de Governo Eletrônico Brasileiro</a>
	70	+ </div>
	71	+ <div class="clear"></div>
	72	+ </div>
	73	+ </div>
	74	+
	75	+ <div id="content">
	76	+ <div class="container_12">
	77	+ <div class="grid_8 suffix_1">
	78	+ <h2>Sobre a barra</h2>
	79	+
	80	+ <p>A barra tem a função de identificar, padronizar e integrar sites e portais do Governo Federal. À sua direita constam as marcas do Governo Federal e da Lei de Acesso a Informação com links para acesso ao Portal de Estado do Brasil <a href="http://www.brasil.gov.br">www.brasil.gov.br</a> e o site oficial sobre a lei de acesso a informação da Controladoria Geral da União <a href="http://www.acessoainformacao.gov.br">www.acessoainformacao.gov.br</a>.</p>
	81	+
	82	+ <p>Seu uso está normatizado por meio da Instrução Normativa nº 2, de 16 de dezembro de 2009, que pode ser encontrada no site da <a href="http://www.secom.gov.br/manuais-e-marca/internet">Secretaria de Comunicação Social da Presidência da República - Secom</a>.</p>
	83	+
	84	+ <p>Cada órgão é responsável pela implementação da barra em seus sítios e portais. Semelhantemente a atualização da barra é de responsabilidade do órgão. Com o objetivo de padronizar a codificação e garantir a aderência às normas da Adminstração Pública, a nova versão da barra utiliza uma arquitetura integrada e dinâmica.</p>
	85	+
	86	+ <p>A barra funciona de forma dinâmica. Todos os sítios e portais que utilizam esta versão apresentam o conteúdo da barra mais atual.</p>
	87	+
	88	+ <h2>Instruções para o uso da barra</h2>
	89	+
	90	+ <h3>Aplicando o Javascript</h3>
	91	+
	92	+ <p>Código responsável por fazer a seleção da barra. A cor é definida utilizando o parâmentro 'cor' com uma das opções: 'azul', 'preta', 'cinza' ou 'verde'. Para otimizar o carregamento recomenda-se colocar a tag <script> antes do fechamento do <body>.</p>
	93	+
82	94	<pre>
83		-<div id="barra-brasil">
84		- <div class="barra">
85		- <ul>
86		- <li><a href="http://www.acessoainformacao.gov.br" class="ai" title="Acesso à informação">www.sic.gov.br</a></li>
87		- <li><a href="http://www.brasil.gov.br" class="brasilgov" title="Portal de Estado do Brasil">www.brasil.gov.br</a></li>
88		- </ul>
89		- </div>
90		-</div>
	95	+<script src="http://barra.brasil.gov.br/barra.js?cor=azul" type="text/javascript"></script>
91	96	</pre>
92	97
93		-<h2>Aplicando o CSS</h2>
94		-
95		-<p>Ao aplicar o CSS levar em consideração a técnica <a href="https://www.google.com/search?q=css+reset">CSS Reset</a> para uma melhor visualização e compatibilidade com outos navegadores. O exemplo abaixo é relativo a cor azul (hexadecimal: #004b82).</p>
	98	+ <h3>Aplicando o Javascript</h3>
96	99
	100	+ <p>Código responsável pelo carregamento do HTML da barra conforme parametrização indicada no javascript. Em casos que o javascript do browser não esteja habilitado, o código deste HTML é carregado, inserindo uma barra padrão para que o sítio ou portal não fique sem identificação.</p>
97	101	<pre>
98		-#barra-brasil {
99		- position:relative;
100		- overflow:hidden;
101		- min-width:1000px;
102		- background: #004b82 url(imagens/barra-brasil-v3-bgx.png) center bottom no-repeat;
103		-}
104		-
105		-#barra-brasil .barra {
106		- display: block;
107		- width: 960px;
108		- height:28px;
109		- margin: 0 auto;
110		- background: url(imagens/barra-brasil-v3-bgx.gif) 0 bottom repeat-x;
111		-}
112		-
113		-#barra-brasil .barra ul {
114		- float:right;
115		- width: 319px;
116		-}
117		-
118		-#barra-brasil .barra ul li {
119		- float: left;
120		- padding-left: 25px;
121		-}
122		-
123		-#barra-brasil .ai {
124		- display: block;
125		- width: 161px;
126		- height: 28px;
127		- text-indent: -1000px;
128		- background: #004b82 url(imagens/ai.png) no-repeat 0 4px;
129		-}
130		-
131		-#barra-brasil .brasilgov {
132		- display: block;
133		- width: 101px;
134		- height: 28px;
135		- text-indent: -1000px;
136		- background: #004b82 url(imagens/brasil.png) no-repeat 0 4px;
137		-}
	102	+<div id="barra-brasil">
	103	+ <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; ">Portal do Governo Brasileiro</a>
	104	+</div>
138	105	</pre>
139		- </div><!-- p-esquerda -->
140		-
141		- <div class="p-direita">
142		- <h3>Cores Disponíveis</h3>
143		- <ul id="menu">
144		- <li><a href="#" rel="verde.css">Verde</a> <span class="hexa">Hexadecimal</span> <span class="verde">#00500F</span></li>
145		- <li><a href="#" rel="cinza.css">Cinza</a> <span class="hexa">Hexadecimal</span> <span class="cinza">#7F7F7F</span></li>
146		- <li><a href="#" rel="preto.css">Preto</a> <span class="hexa">Hexadecimal</span> <span class="preto">#000000</span></li>
147		- <li><a href="#" rel="style.css">Azul</a> <span class="hexa">Hexadecimal</span> <span class="azul">#004B82</span></li>
148		- </ul>
149		-
150		- </div><!-- p-direita -->
151		-
152		- </div><!-- #principal -->
153		-
154		-</div><!-- #wrap -->
155	106
156		-<div id="footer">
157		- <a class="twitter" href="http://twitter.com/egovbr">Siga o Gov.br</a>
158		- <a class="marca-governo" href="http://www.planejamento.gov.br">Ministério do Planejamento, Orçamento e Gestão</a>
159		-</div><!-- #footer -->
	107	+ </div>
	108	+ <div class="grid_3">
	109	+ <h3>Cores Disponíveis</h3>
	110	+ <span class="info">Clique na paleta para visualizar</span>
	111	+ <ul id="cores">
	112	+ <li><a href="#" id="verde" onclick="change_bar('verde')">verde</a></li>
	113	+ <li><a href="#" id="cinza" onclick="change_bar('cinza')">cinza</a></li>
	114	+ <li><a href="#" id="preta" onclick="change_bar('preta')">preta</a></li>
	115	+ <li><a href="#" id="azul" onclick="change_bar('azul')">azul</a></li>
	116	+ </ul>
	117	+ </div>
	118	+ <div class="clear"></div>
	119	+ </div>
	120	+ </div>
160	121
	122	+ <div id="footer">
	123	+ <div class="container_12">
	124	+ <div class="grid_6">
	125	+ <a class="twitter" href="http://twitter.com/egovbr">Siga o Gov.br</a>
	126	+ </div>
	127	+ <div class="grid_6">
	128	+ <a class="marca-governo" href="http://www.planejamento.gov.br">Ministério do Planejamento, Orçamento e Gestão</a>
	129	+ </div>
	130	+ <div class="clear"></div>
	131	+ </div>
	132	+ </div>
	133	+ <script id="teste" src="http://barra.brasil.gov.br/barra.js?cor=azul" type="text/javascript"></script>
161	134	</body>
162	135	-</html>
	136	+</html>
163	137	\ No newline at end of file
...	...