/* Gheneralaj formatoj */

body {
  margin:0px;
  padding:0px;
  color:#000000;
  font-family:verdana,arial,helvetica;
  font-size:10pt;
}

h2 {
  margin:0px;
  font-size:16pt;
  font-family:verdana,arial,helvetica;
}

h3 {
  margin:0px;
  font-size:10pt;
  font-family:verdana,arial,helvetica;
}

select {
  background-color:#f5f5f5;
  color:#333333;
  font-family:verdana,arial,helvetica;
  font-size:8pt;
}

input,textarea {
  background-color:#f5f5f5;
  color:#333333;
  font-family:verdana,arial,helvetica;
  font-size:8pt;
}

input.radio {
  background-color:#fcedda;
}

ul li {
  list-style-type:square;
}

div.teksto,td,p {
  color:#333333;
  font-family:verdana,arial,helvetica;
  font-size:10pt;
}

td {
  vertical-align:top;
}

img.titolo {
  margin-left:10px;
  margin-top:10px;
}

a:hover {
  color:#ea8a15;
  text-decoration:underline;
}

.ghisdatigo {
  color:#333333;
  background-color:#dcdcdc;
  font-family:verdana,arial,helvetica;
  font-size:8pt;
}

/* La menulinio */

div.menuo {
  color:#dcdcdc;
  font-family:verdana,arial,helvetica;
  font-size:10pt;
}

div.menuo p,div.menuo form {
  color:#dcdcdc;
  font-family:verdana,arial,helvetica;
  font-size:10pt;
  margin-top:0pt;
  margin-bottom:3pt;
  margin-left:2pt;
}

div.menuo a {
  color:#dcdcdc;
}

div.menuo a:hover {
  color:#ffffff;
  text-decoration:underline;
}

div.menuo a:visited  {
  color:#ffffff;
  text-decoration:underline;
}

/* ==================================================
   AŬTOMATA ADAPTO POR POŜTELEFONOJ (Responsive CSS)
   ================================================== */

@media screen and (max-width: 768px) {

  /* 1. Ebligi libere fluantan larĝon */
  body, table, td, div, p {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 2. Unuigi la paĝan larĝon kaj forigi fiksajn pikselojn */
  body {
    width: 100% !important;
    margin: 0 !important;
    padding: 10px !important;
    font-size: 110% !important; /* Pli facile legebla sur telefono */
  }

  /* 3. Transformi tabelajn aranĝojn al vertikala fluo */
  table {
    width: 100% !important;
    display: block !important;
  }

  /* 4. Ebligi horizontalan ruliĝon por grandaj kotiz-tabeloj */
  .tabelo-rulo, table {
    overflow-x: auto;
  }

  /* 5. Bildoj ne superfluu la ekranon */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* 6. Pli granda tuŝspaco por ligiloj kaj menuoj */
  a {
    padding: 3px 0;
    display: inline-block;
  }
}