Commit fa378d8afcb7444d80055321323b95c03b0ad6e9
1 parent
70c02ae2
Exists in
master
manual de aplicacao da barra centralizada - beta
Showing
19 changed files
with
1336 additions
and
146 deletions
Show diff stats
| @@ -0,0 +1,653 @@ | @@ -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 | \ No newline at end of file | 654 | \ No newline at end of file |
| @@ -0,0 +1,72 @@ | @@ -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 | \ No newline at end of file | 73 | \ No newline at end of file |
| @@ -0,0 +1,196 @@ | @@ -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 | \ No newline at end of file | 197 | \ No newline at end of file |
| @@ -0,0 +1,211 @@ | @@ -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 | \ No newline at end of file | 212 | \ No newline at end of file |
| @@ -0,0 +1,85 @@ | @@ -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 | \ No newline at end of file | 86 | \ No newline at end of file |
458 Bytes
286 Bytes
5.04 KB
182 Bytes
156 Bytes
154 Bytes
438 Bytes
11.9 KB
457 Bytes
12.8 KB
11.8 KB
208 Bytes
1.17 KB
| 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 | <body> | 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 | </div> | 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 | <h1>Identidade Visual do Governo Federal na Internet</h1> | 64 | <h1>Identidade Visual do Governo Federal na Internet</h1> |
| 65 | + <span class="beta">Versão Beta</span> | ||
| 64 | <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> | 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 | </div> | 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 | <pre> | 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 | </pre> | 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 | <pre> | 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 | </pre> | 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 | </body> | 134 | </body> |
| 162 | -</html> | 135 | -</html> |
| 136 | +</html> | ||
| 163 | \ No newline at end of file | 137 | \ No newline at end of file |