FreeSkinCSS

• Definição do CSS (Folha de Estilo em Cascata) para a web TWikiBar

Como está sendo incluído agora

%STARTINCLUDE%\
<style type="text/css" media="all">

/* elementos HTML básicos */

html body {
  line-height:1.55em;
  font-family: "Bitstream Vera Sans", "Lucida Grande", verdana, lucida, helvetica, sans-serif;
  background-color: #f8f8f8;
  margin:0;
  padding:0;
  font-size:x-small;
  voice-family:"\"}\""; 
  voice-family:inherit;
  font-size:small;
}

html>body {
  font-size:small;   
}

/* be kind to netscape 4 that doesn't understand inheritance */
body, p, li, ul, ol, dl, dt, dd, acronym, h1, h2, h3, h4, h5, h6 {
   background-color:transparent;
}
p {
   margin:1em 0 0 0;
}
table {
   border-collapse: separate;
   background-color: #000000;
}

table.destaque {
   border-collapse: separate;
   background-color: #ffffcc !important;
}

#SearchResultsTable table,
#SearchResultsTable tr,
#SearchResultsTable td{
   background-color: #ffffff !important;
}

strong, b {
   font-weight:bold;
}
hr {
   color:#9E9E70;
   background-color:#9E9E70;
   height:1px;
   border:none;
}
pre, code, tt {
   font-size:100%;
   line-height:1.4em;
   color:#7A4707;
}
pre {
   margin-top:1em;
   margin-bottom:1em;
}

/* Text */

h1, h2, h3, h4, h5, h6 {
   font-family:"Lucida Grande", helvetica, lucida, verdana, sans-serif;
   line-height:104%;
   padding:0;
   margin:1em 0 0.1em 0;
}
h1 {
   font-size:210%;
   color:#e24628;
   margin:0 0 0.1em 0;
}
h2 {
   font-size:145%;
   display:block;
   background-color:#F3EDE7;
   color:#900;
   padding:0.2em 0.7em;
   margin:1em 0.7em 0.15em 0.7em;
   height:auto;
}
h3 { font-size:140%; color:#900;}
h4 { font-size:125%; color:#900;}
h5 { font-size:110%; color:#900;}
h6 { font-size:95%; color:#900;}

/* Links */

:link:focus,
:visited:focus,
:link,
:visited,
:link:active,
:visited:active {
   text-decoration:none;
   color:#1e5bbd;
   background-color:transparent;
}
:link:hover,
:visited:hover {
   text-decoration:underline;
   background-color:#b4d5ff;
   color:#1559B3;
}
a:link img,
a:visited img,
a:hover img,
a:active img {
   background-color:transparent;
}
th a:link,
th a:visited {
   font-weight:bold;
}

/* ----------------------------------------
   Referências à Menu de Contexto
   Fonte: http://br.mozdev.org/thunderbird/vocesabia/?privacidade 
          http://br.mozdev.org/images/html/br.css
---------------------------------------- */

kbd {
  padding: 0px 1px 0px 1px !important;
  border-width: 1px 2px 2px 1px !important;
  border-style: solid !important;
  background: #faf6f6  !important;
  color: #000  !important;
  border-color:  #edd #baa #baa #eed  !important;
}

/* ----------------------------------------
   Estilo para tooltip em links
   Fonte: http://loadaveragezero.com/vnav/labs/CSS/tooltips.php
---------------------------------------- */

span.tool {
  position: relative;   /* this is key */
  cursor: help;
}
 
span.tool span.tip {
  display: none;        /* so is this */
}

/* tooltip will display on :hover event */

span.tool:hover span.tip {
  display: block;
  z-index: 100;
  position: absolute;
  top: 2.5em;
  left: 0;
  width: auto;
  line-height: 1.2em;
  padding: 3px 7px 4px 6px;
  border: 1px solid #336;
  background-color: #f7f7ee;
  font-size: 12px;
  font-weight: normal;
  color: #000;
  text-align: left;
}

#content span.tool:after {
  padding-left: 2px;            /* eye candy */
  content: url(%PUBURL%/TWiki/TWikiDocGraphics/bubble.gif);
}

/* ----------------------------------------
   Estilo para caixa div de código code-box 
   Fonte: http://loadaveragezero.com/vnav/labs/CSS/code.php
---------------------------------------- */

.code-box {
  font-family: 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Monaco, Courier, monospace;
  width: 100%;
  border: 1px dashed #aaa8a8;
  padding: 0.5em 0 0.3em 0.5em;
  color: #000;
  overflow: auto;
  background: #fff url(%PUBURL%/TWiki/TWikiDocGraphics/hand.gif) no-repeat top right;
}

/* ----------------------------------------
   Estilos das Divisões
---------------------------------------- */

.geral {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.cabecalho { }

.padraogoverno {
  border:1px solid #FFCC00;
  background-color: #FFCC00;
  text-align: center;
}

.padraocabecalho {
  border:1px solid #669966; /* verde pálido */
/*  text-align: center; */
  background: #FFF url(%PUBURL%/%BASEWEB%/FreeSkinImagens/6aEdicao.PNG) right top no-repeat;
  color: #FFF;
  min-height: 105px; /* tamanho da logo */
}

.corpo {
  position: relative;
  top:0;
  left:0;
}

.lateral {
  position: absolute;
  background-color: #FFFAFF; /* rosa claríssimo */

  width: 12.5em; /* 0.5em à mais do menuL */

  z-index:1; /* forçar estar acima dos demais */
}

.barranavegacao {
  background-color: #CDCE9C;
}

.topico {
  position: relative;
  padding-left:1em;
  padding-bottom:1em;
  margin-left: 13.1em; /* deslocado 1em à direita do menuL */
  min-height: 20em;

/*  overflow: auto; */

  border:1px solid #000;
  background-color: #FFF;
}

.localizacao {
  margin-left: 13.1em; /* deslocado 1em à direita do menuL */
  padding-left:1em;

  border:1px solid #E6E6E6; /* cinza claro */
  background-color: #E6E6E6;
}

.edicao {
  margin-left: 13.1em; /* deslocado 1em à direita do menuL */
  padding-left:1em;

  border:1px solid #EEF6FF;
  background-color: #EEF6FF; /* azul claríssimo */
}

.rodape {
  margin-left: 13.1em; /* deslocado 1em à direita do menuL */
  padding-left:1em;

  text-align: center;

  border:1px solid #FFFAFF;
  background-color: #FFFAFF; /* rosa claríssimo */
}

/* ----------------------------------------
   Barra de Navegacao através de listas.
   http://www.maujor.com/tutorial/cssmenu.php
---------------------------------------- */
#menuH ul {
  border:none;
  margin: 0;
  padding: 0;
  text-align:left;
}

#menuH ul li {
  list-style: none;
  margin: 0;
  display: inline;
}

#menuH ul li a {
  height:1px; /* IE5.0 bug */
/*  padding: 3px 1px; */
  margin:0;
/*  border: 1px solid #f00; */
/*  background: #999; */
  text-decoration: none;
}

#menuH ul li a:link, #menuH ul li a:visited {
/*  color: #fff; */
}

#menuH ul li a:hover {
/*  background: #ccc; */
  color: #F00;
/* border-color: #000; */
}

/* ----------------------------------------
   Menu Construído através de listas. Baseado em:
   http://www.maujor.com/tutorial/tecmenu.php e
   http://www.tanfa.co.uk/css/examples/css-dropdown-menus.asp
---------------------------------------- */

/* Tamanho, Fonte, Cor, Borda do MenuL */
#menuL {
  width: 12em;
  background: #999;
  font-size: 11px/16px;
  font-weight: bold;
}

/* Caixa do Menu OL */
#menuL ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Caixa dos Itens do Menu UL - Fica dentro da caixa OL */
#menuL ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Titulo do Menu OL - ordenado */
#menuL ol li {
  color: #fff;
  background: #000;
  text-transform: uppercase;
  text-align: center;
}

/* Items dentro do Menu OL */
#menuL ol li li {
  color: #fff;
  background: #000;
  text-transform: none;
  text-align: left;
}

/* Links dos Menus */
#menuL ol li li a {
  display: block;
  border-width: 1px;
  border-style: solid;
  border-color: #ccc #888 #555 #bbb;
  margin: 0;
  padding: 2px 3px;
}

/* Itens do Menu OL - Links */
#menuL a {
  color: #000;
  background: #efefef;
  text-decoration: none;
}

/* Itens do Menu OL - Links com o mouse em cima */
#menuL a:hover {
  color: #a00;
  background: #fff;
}

/* Posicionamento dos Itens - "Mágica" */
#menuL li {
  position: relative;
}

#menuL ol ul ul {
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
}

/* Magia CSS */
div#menuL ol ul ul,
div#menuL ol ul ul ul,
div#menuL ol ul li:hover ul ul,
div#menuL ol ul ul li:hover ul ul
{display: none;}

/* Magia CSS */
div#menuL ol ul li:hover ul,
div#menuL ol ul ul li:hover ul,
div#menuL ol ul ul ul li:hover ul
{display: block;}

/* Corrige o espaço deixado pelos parágrafos */
div#menuL p {display:inline;}
</style>

<!-- Internet Explorer CSS Fixes -->
<!--[if IE]>
  <style type="text/css" media="screen">
    body {  behavior: url(%PUBURL%/%BASEWEB%/FreeSkinCSS/csshover.htc); font-size: 100%;} 
    #menuL ol li { float: left; width: 100%; }
    #menuL ol li a { height: 1%; }
  </style>
<![endif]-->

%STOPINCLUDE%

O que deverá incluído deste tópico

Atenção: Variáveis do TWiki não poderão ser utilizadas aqui com o CSS via include.

OBS.: Isso porque ainda não estou criando os arquivos css separados. Dessa forma fica mais fácil alterar seus conteúdos pois estes estão "embutidos" dentro desse tópico. Depois de testado e aprovado o css devemos separar por tipo de mídia (print, screen, etc), layout e conteúdo.

Utilizando @import o download fica na cache do browser, diminiundo o tempo de resposta. Isso torna o acesso ao site mais rápido, pois serão menos arquivos a serem baixados pelo browser.

STARTINCLUDE%
<style type="text/css" media="print">
   @import url("%PUBURL%/%BASEWEB%/FreeSkinCSS/print.css");
</style>

<style type="text/css" media="screen">
   @import url("%PUBURL%/%BASEWEB%/FreeSkinCSS/layout.css");
   @import url("%PUBURL%/%BASEWEB%/FreeSkinCSS/content.css");
</style>

<style type="text/css" media="all">
/* Dentro desse código CSS pode-se colocar variáveis TWiki */
</style>
STOPINCLUDE%

-- JarbasJunior - 07 Oct 2005