<style>
h1, h2, h3, h4, h5, h6, p, ol, ul, li {font-family: verdana, arial, sans-serif, monospace, bitstream vera sans;
                                       padding: 5px;  margin:0; }
small { font-size: 9px; }

body  { font-size: 12px;  text-align: center;  color:#000000;  margin:10px 10px 10px 10px;
        font-family: verdana, arial, sans-serif, monospace, bitstream vera sans; }

body.simple { font-size: 12px; text-align: left;  color:#000000;  margin:10px 10px 10px 10px;
        font-family: verdana, arial, sans-serif, monospace, bitstream vera sans; background-color: #f0f0f0;}

body.menu { font-size: 10px;  text-align:center;  color:#000000;  margin:0px 0px 0px 0px;
            padding:0px 0px 0px 0px; }

.anotacao        { margin-bottom: 10px; text-align:left; }
.anotacao-titulo { cursor: pointer; font-weight: bold; text-decoration: underline; text-align:left; }
.anotacao-itens  { display: none; margin-left: 20px;  text-align:left; }

/*  *** Script para as classes acima (identação). ***
    <script>
        function toggleItens(id) {
            var itens = document.getElementById(id);
            itens.style.display = (itens.style.display === block) ? none : block;
        }
    </script>

    *** Exemplo das divs ***
    echo "<div class=anotacao>\n";
    echo "<div class=anotacao-titulo onclick=toggleItens($itemx)>$item</div>\n";
    echo "<div class=anotacao-itens id=$itemx>\n";
    ... lista os subitens ...  o id (no caso $itemx) fica no anotacao-itens
    echo "</div\n>";
*/

a, a:link, a:visited { color: blue; font-family: Verdana, Arial, Times New Roman, Sans Serif; font-weight: normal;
                       font-size: 14px; text-decoration: underline;  cursor: hand;  }

a.agreen,
a.agreen:link,
a.agreen:visited,
a.agreen:hover,
a.agreen:active { color: green; }

span   { color: #0000ff; font-weight: normal;      }

.divth { background-color:#f0f0f0;   text-align:center;  height:16px;
         border-width    :1px;       border-style:solid; border-color:black;
         border-collapse :collapse;  position:absolute;  padding:2px;      margin:0;  }

.divtd { background-color:#ffffdf;   text-align:left;    height:16px;
         border-width    :1px;       border-style:solid; border-color:black;
         border-collapse :collapse;  position:absolute;  padding:2px;      margin:0;  }

.divcenter { position:absolute;  border: 1px dashed #0000ff;  height:auto;
             margin:1px;         padding:1px 1px 1px 1px;       width:auto;    }

.divleft   { text-align:left;  position:absolute;       top:0px;    left:0px;
             margin:1px;       padding:1px 1px 1px 1px; width:auto;  }

.divright  { text-align:right; position:absolute;       top:0px;    right:0px;
             margin:1px;       padding:1px 1px 1px 1px; width:auto;  }

.divcmdvisible { text-align:center; height:auto; width:auto; padding:1px 1px 1px 1px;  }
.divcmdhide    { text-align:center; height:auto; width:auto; padding:1px 1px 1px 1px;  display:none;}

.div1 { position:absolute;  border: 1px dashed #0000ff;  height:auto;    text-align:center;
        margin:1px;         padding:1px 1px 1px 1px;       width:auto;  }
.div2 { position:absolute;  border: 1px dashed #0000ff;  height:auto;   text-align:left;
        margin:1px;         padding:1px 1px 1px 1px;       width:350px;   top:250px;  left:5px;
}
.div3 { position:absolute;  border: 1px dashed #0000ff;  height:auto;   text-align:left;
        margin:1px;         padding:1px 1px 1px 1px;       width:350px;   top:250px;  left:310px;
}
.div4 { position:absolute;  border: 1px dashed #0000ff;  height:auto;   text-align:left;
        margin:1px;         padding:1px 1px 1px 1px;       width:350px;   top:250px;  left:610px;    }


fieldset { border:1px dashed #0000ff;     height: auto;   width:  auto;
           margin:5px;                      padding:1px 1px 1px 1px;  }

table {  border:1px solid #000000; border-collapse:collapse; background-repeat:no-repeat; background-position:top left;
         font-size: 12px; background-color: #dddddd;    }

td {
  font-size: 12px;
  padding: 4px;
  color: #000000;
  border: 1px solid #000000;
  margin: 0;
}

th {
  font-size: 12px;
  padding: 4px;
  background-color: #E0E0E0;
  color: #000000;
  border: 1px solid #000000;
  margin: 0;
}

.tdstyle {
    font-size: 12px;
    background-color:#FFFFDF;
    padding:5px;
    color:#000000;
    border:1px solid #000000;
    border-collapse:collapse;
    margin:0;
}

.thstyle   {
    font-size: 12px;
    padding:   5px;
    background-color:#E0E0E0;
    color:#FFFFFF;
    border:1px solid #FFFFFF;
    border-collapse: collapse;
    margin:0;
}
textarea, input[type="text"] { width: 100%; box-sizing: border-box; }
 /* Ajustes específicos para telas pequenas (iPhone, etc.) */
@media (max-width: 768px) { 
    table { width: 100%; } 
    /* continua ocupando toda a largura */  
    input[type="text"], textarea {width: 100%; font-size: 16px;}
    /* ocupa toda a largura da célula, melhora a leitura em mobile */
}

pre      { font-size: 12px; border:0; padding:0; margin:0;    }
frame    { padding:0px 0px 0px 0px; border:1px solid #000000; margin:0px 0px 0px 0px;}
frameset { border: 0px 0px 0px 0px; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;}
img      { cursor:hand;                                  }
input[type="submit"]  { cursor:hand;width:80px; font-size: 12px; }
/*button          {cursor:hand;width:80px; font-size: 12px; background-color: #00bbbb; color: white; } */
button          {background: none; border: none; padding: 0; margin: 0; color: green;  text-decoration: underline;
                 font-size: inherit; font-family: inherit; cursor: pointer; font-weight: bold;}

button.small    {cursor:hand;width:32px; font-size: 12px; background-color: #00bbbb; color: white;}
.w20            {width :20px;  font-size: 12px;}
.w50            {width :50px;  font-size: 12px;}
.w80            {width :80px;  font-size: 12px;}
.w100           {width :100px; font-size: 12px;}
.w146           {width :146px; font-size: 12px;}
.w147           {width :147px; font-size: 12px;}
.w148           {width :148px; font-size: 12px;}
.w150           {width :150px; font-size: 12px;}
.w200           {width :200px; font-size: 12px;}
.w300           {width :300px; font-size: 12px;}

.botaosmall     {cursor:hand;width:32px; font-size: 12px; background-color: green; color: white; font-weight: bold;}
.botaolink      {background: none; border: none; padding: 0; margin: 0; color: blue; text-decoration: underline;
                 font-size: inherit; font-family: inherit; cursor: pointer;}
.botao          {background: none;   border: none; padding: 0; margin: 0; color: green;  text-decoration: underline;
                 font-size: inherit; font-family: inherit; cursor: pointer; font-weight: bold;}
.botaoexcluir   {background: none;   border: none; padding: 0; margin: 0; color: red;    text-decoration: underline;
                 font-size: inherit; font-family: inherit; cursor: pointer; font-weight: bold;}

}
.error          {color:#CC0000;        font-size: 12px;}
.monospace      {font-family: monospace; font-size: 12px;}
/**********************************************************/
.back3          {background-color:#999999;font-size: 12px;}
.back0          {background-color:#ffffdf;font-size: 12px;}
.back4          {background-color:#FFFFFF;font-size: 12px;}
.back5          {background-color:#eeeeee;font-size: 12px;}
.back9          {background-color:#c0c0c0;font-size: 12px;}
.back10         {background-color:#c0c0c0;font-size: 12px;}
.back12         {background-color:#c0c0c0;font-size: 12px;}
.backc          {background-color:#cccccc;font-size: 12px;}
.backd          {background-color:#dddddd;font-size: 12px;}
.backe          {background-color:#eeeeee;font-size: 12px;}

.foreb          {color:#000000;font-size: 12px;}
.fore1          {color:#800000;font-size: 12px;}
.fore2          {color:#CC0000;font-size: 12px;}
.fore6          {color:#FFFFFF;font-size: 12px;}
.fore7          {color:#000000;font-size: 12px;}
.fore8          {color:#000000;font-size: 12px;}
.fore11         {color:#A7C5F3;font-size: 12px;}
.fore15         {color:#788DD0;font-size: 12px;}

</style>
