/* Elementi HTML */

html {
  min-height: 100%;
  margin-bottom: 1px;
}

body {
  background-color: #eeeeee;
  background: radial-gradient(circle, #ddffe2, #faeaeb, #ddeeff, #feffdd);
  color: #000000;
  font-family: Arial, Geneva, Helvetica, sans-serif;
  margin: 2px auto;
  text-align: center;  /* centra in IE5, che nostalgia ;) */
  letter-spacing: 0.02em;
  line-height: 1.35em;
}

h1 {
  margin-top: 0;
  text-align: center;
}

h1, h2, h3 {
  text-shadow: 1px 1px #000;
}

#toc h2 {
  text-shadow: none;
}

#toc,
.riquadro,
ol.comment_list li,
#cuore,
#mainmenu li {
  box-shadow: 1px 1px 2px #aaa;
}

#content h2 {
  margin-top: 1.2em;
  margin-bottom: 0;
}

#content p {
  margin-top: 0;
}

#content h3 {
  margin-bottom: 0;
}

#content ul, #content ol, #toc ol {
  margin-left: 0;
  padding-left: 1.2em;
}

#content li {
  margin-bottom: 0.5em;
}

a {
  font-weight: bold;
  color: #0022ff;
}

img {
  border: 0;
}

code {
  text-align: left;
}

pre {
  text-align: left;
  background-color: #eee;
  padding: 4px 0 4px 0;
  overflow: hidden
}

pre.wide {
  overflow: scroll
}

table {
  border-collapse: collapse;
}

td, th {
  border: 1px solid #000000;
  padding: 4px;
}

blockquote {
  font-style: italic;
  margin-left: 1em;
}

dl, dd {
  margin-left: 1em;
}

dt {
  margin-top: 1em;
}

dl.history dt {
  font-weight: bold;
}

dl.history dd:first-letter {
  font-weight: bold;
}

#navigation li.trattino:after {
  content: " - ";
}

legend {
  color: #000000;
  font-weight: bold;
}

audio {
  display: block;
  width: 70%;
  padding: 0;
  margin: 1em auto;
}


/* Layout: contenuto */

#wrap {
  width: 99%;
  max-width: 1280px;
  margin: 0 auto;
}

#content {
  max-width: 90%;
  margin: 8px auto 4px auto;
  padding: 16px;
  text-align: left;
  background-color: #ffffff;
  color: #000000;
  box-shadow: 1px 1px 4px #aaa;
}

#content #pageheader {
  text-align: center;
  margin-top: 0;
  margin-bottom: 1em;
}

#content #pageheader h1 {
  color: #000000;
  border-bottom: 1px solid #000000;
  margin-top: 0;
  font-style: italic;
  line-height: 1em;
}

#content #pageheader h4 {
  margin-top: 0;
  margin-bottom: 0;
}

#content p,
#content li {
  font-size: 105%;
}

#content li ul li {
  font-size: 100%;
}


/* Layout: info (banner, ecc) */

.infobox {
  width: 80%;
  margin: 4px auto;
  text-align: center;
  padding: 16px;
  border: 2px solid #000000;
  background-color: #ffffff;
}

.infobox img {
  margin: 4px;
}

.infobox h1 {
  display: none;
}


/* Layout: main header and navigazione */

#header h1 {
  display: none;
}

#header a {
  border: 0;
}

#header img {
  width: 100%;
  max-width: 750px;
  height: auto;
  display: block;
  margin: 1px auto;
}

#header #logo-en {
  display: block;
  border: 0;
  width: 750px;
  height: 153px;
  margin: 8px auto;
  background: transparent url(/img/logo-en.png) no-repeat center top;
}

#navigation {
  width: 80%;
  margin: 4px auto 8px auto;
  padding: 2px 16px 2px 16px;
  line-height: 130%;
  text-align: center;
  background-color: #ffffff;
  color: #000000;
  box-shadow: 1px 1px 4px #aaa;
}

#navigation h2 {
  display: none;
}

#navigation ul, .infobox ul {
  display: inline;
  list-style: none;
  margin: 0;
  padding: 0;
}

#navigation li, .infobox li {
  display: inline;
  margin: 0;
  padding: 0;
}

#navigation li:after {
  content: " - ";
}

#navigation li:last-child:after {
  content: "";
}

#navigation a:visited {
  color: #0022ff;
}

#navigation form {
  margin-top: 8px;
  margin-bottom: 0;
}

#navigation fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}


/* Layout: footer */

#footer {
  max-width: 80%;
  margin: 8px auto 8px auto;
  padding: 2px 16px 2px 16px;
  text-align: center;
  font-size: smaller;
  background-color: #ffffff;
  color: #000000;
  box-shadow: 1px 1px 4px #aaa;
}

#footer fieldset {
  border: 0;
}

#footer legend {
  width: auto;
  margin-left: auto;
  margin-right: auto;
  text-align: center !important;
}

#footer h1 {
  display: inline;
  font-size: 100%;
}


/* Classi di uso generale */

#toc {
  width: 45%;
  padding: 1em;
  border: 1px solid black;
  font-size: smaller;
  text-align: left;
  line-height: 150%;
}

#toc h2 {
  color: #000000;
  margin: 0 0 0.5em 0;
}

#toc ol {
  margin-top: 0;
  margin-bottom: 0;
}

#toc li {
  margin-bottom: 0;
}

.linktoc {
  text-align: right;
  font-size: smaller;
}

.disclaimer {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  padding: 1em;
  text-align: justify;
  font-size: smaller;
}

.disclaimer h2 {
  margin-top: 0;
  color: #000000;
}

.dedica {
  width: 10em;
  margin: 1em auto 1em auto;
  text-align: left;
}

.dedica h2 {
  text-align: center;
}

.riquadro {
  padding: 1em;
  width: 90%;
  margin: auto;
  border: 1px solid #000000;
}

.evidenziato {
  background-color: #eeeeee;
}

.newstitle {
  margin-top: 0;
}

textarea:focus, input.text:focus {
  background-color: #eee;
}

ul.menu li {
  margin-bottom: 1em;
}

ol.comment_list li {
  padding: 0 4px 0 4px;
}

.img-float-left {
  float: left;
  margin: 10px 10px 8px 0;
}

.img-float-right {
  float: right;
  margin: 10px 0 8px 10px;
}

.caption-left {
  float: left;
  width: 310px;
  padding: 4px 4px 4px 0;
  text-align: left;
  font-weight: bold;
  font-size: small;
}

.caption-right {
  float: right;
  width: 301px;
  padding: 4px 0 4px 4px;
  margin-left: 9px;
  text-align: left;
  font-weight: bold;
  font-size: small;
}

.caption-left br, .caption-right br {
  display: none;
}

.autore, .firma {
  font-style: normal;
  font-size: smaller;
  text-align: right;
  margin-top: 0;
  margin-right: 1.5em;
 }

.riquadro h2 {
  margin-top: 0 !important;
}

.riquadro p {
  font-style: normal;
  font-size: x-small;
  margin-bottom: 0.5em;
}

.ego { color: #ff2227 !important; }
.txt { color: #00dd27 !important; }
.dev { color: #0022ff !important; }
.misc { color: #ffb900 !important; }
.info { color: #000000; }

.defcolor { color: #000000; }
.float-left { float: left; }
.float-right { float: right; }
.inline { display: inline; }
.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
.nomargin { margin: 0; }
.nocss { display: none; }
.clear-both { clear: both; }
.img-center { display: block; margin-left: auto; margin-right: auto; }
.opt_selected { font-weight: bold; }

.center table {
  margin-left: auto;
  margin-right: auto;
}


/* Menu home */

#mainmenu ul {
  margin: 0;
  padding: 0;
  list-style: none inside;
  clear: both;
}

#mainmenu li {
  display: block;
  width: 50%;
  padding: 0.5em;
  margin: 1em auto;
  border: 2px solid;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  transform: scale(1);
  transition: transform 0.5s ease;
}

#mainmenu li:hover {
  z-index: 99;
  transform: scale(1.1);
  transition: transform 0.5s ease;
}

#mainmenu li.ego {
  background-color: #faeaeb;
  border-color: #ff2227 !important;
  color: #000000 !important;
}

#mainmenu li.txt {
  background-color: #ddffe2;
  border-color: #00dd27 !important;
  color: #000000 !important;
}

#mainmenu li.dev {
  background-color: #ddeeff;
  border-color: #0022ff !important;
  color: #000000 !important;
}

#mainmenu li.misc {
  background-color: #feffdd;
  border-color: #ffb900 !important;
  color: #000000 !important;
}

#mainmenu li.info {
  background-color: #eee;
  border-color: #000000;
  color: #000000 !important;
}

#cuore {
  text-align: center;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.5);
  border: 1px solid #ff2227;
  width: 50%;
  margin: 2em auto;
  padding: 0.5em;
}

#cuore ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#cuore li {
  margin-bottom: 1em;
}

#cuore h2 {
  margin-top: 0;
  margin-bottom: 1em;
  color: #ff2227 !important;
}

code.c64 {
  display: block;
  width: 40em;
  height: 8em;
  margin: 1em auto;
  font-family: "Fixedsys", "Courier New", "Courier", monospace;
  font-style: normal;
  line-height: 1.3em;
  letter-spacing: 0;
  background-color: #352879;
  color: #6c5eb5;
  border: 1em solid #6c5eb5;
}

.print {
  display: none;
}


/* SEZIONI */

/* EGO */

.ego #content {
  background: linear-gradient(135deg, #ffffff 0%, #faeaeb 100%);
}

.ego #content #pageheader h1 {
  border-bottom-color: #ff2227;
  color: #ff2227;
}

.ego #content h2,
.ego #content h3,
.ego #content legend {
  color: #ff2227;
}

.ego #toc {
  background-color: #faeaeb;
  border-color: #ff2227;
}

.ego tr,
.ego th,
.ego td {
  border-color: #ff2227;
}

.ego th,
.ego .highlightbg {
  background-color: #faeaeb;
}


/* DEV */

.dev #content {
  background: linear-gradient(135deg, #ffffff 0%, #ddeeff 100%);
}

.dev #content #pageheader h1 {
  border-bottom-color: #0022ff;
  color: #0022ff;
}

.dev #content h2,
.dev #content h3,
.dev #content legend {
  color: #0022ff;
}

.dev #toc {
  background-color: #ddeeff;
  border-color: #0022ff;
}

.dev tr,
.dev th,
.dev td {
  border-color: #0022ff;
}

.dev th,
.dev .highlightbg {
  background-color: #ddeeff;
}


/* MISC */

.misc #content {
  background: linear-gradient(135deg, #ffffff 0%, #ffffff 50%, #feffdd 100%);
}

.misc #content #pageheader h1 {
  border-bottom-color: #ffb900;
  color: #ffb900;
}

.misc #content h2,
.misc #content h3,
.misc #content legend {
  color: #ffb900;
}

.misc #toc {
  background-color: #feffdd;
  border-color: #ffb900;
}

.misc .riquadro {
  background-color: #fff2cf;
  color: #000000;
  border-color: #ffb900;
}

.misc tr,
.misc th,
.misc td {
  border-color: #ffb900;
}

.misc th, .highlightbg {
  background-color: #feffdd;
}

.misc #contagiorni {
  text-align: center;
}

.misc #contagiorni form {
  width: 60%;
  margin: 1em auto;
  border: 1px solid #ffb900;
  padding: 0.2em;
  box-shadow: 1px 1px #000;
  background-color: #feffdd;
}

.misc #contagiorni #ys,
.misc #contagiorni #ye {
  width: 6em;
}

.misc #contagiorni .op {
  margin-top: 0.5em;
}

.misc #contagiorni .date-header {
  margin-top: 0.5em;
  font-weight: bold;
}

.misc .contagiorni-data {
  text-align: center;
  line-height: 130%;
  color: #000;
  font-size: 150%;
}


/* TXT */

.txt #content {
  background: linear-gradient(135deg, #ffffff 0%, #ddffe2 100%);
}

.txt #content #pageheader h1 {
  border-bottom-color: #00dd27;
  color: #00dd27;
}

.txt #content h2,
.txt #content h3,
.txt #content legend {
  color: #00dd27;
}

.txt #toc {
  background-color: #ddffe2;
  border-color: #00dd27;
}

.txt ol.comment_list li {
  background-color: #ddffe2;
}

.txt tr,
.txt td,
.txt th {
  border-color: #00dd27;
}

.txt .riquadro {
  background-color: #ddffe2;
  color: #000000;
  border-color: #00dd27;
}

.txt .galleria_immagini {
  float: right;
  padding-left: 8px;
  padding-right: 8px;
  margin-left: 8px;
  border: 2px solid #00dd27;
  font-weight: bold;
  text-align: center;
}

.txt .galleria_immagini.small {
  width: 320px;
}

.txt .galleria_immagini img {
  margin-left: auto;
  margin-right: auto;
}

.txt th, .txt .highlightbg {
  background-color: #ddffe2;
}

.txt #logoeal {
  float: right;
  background-color: #fff;
}


/* INFO */

.info #content {
  background: linear-gradient(135deg, #ffffff 0%, #eeeeee 100%);
}

.info #content #pageheader h1 {
  border-bottom-color: #808080;
  color: #808080;
}

.info #content h2,
.info #content h3,
.info #content legend {
  color: #808080;
}

.info #toc {
  background-color: #eee;
  border-color: #808080;
}

.info .riquadro {
  background-color: #eee;
  color: #000000;
  border-color: #808080;
}

.info tr,
.info td,
.info th {
  border-color: #808080;
}

.info th,
.info .highlightbg {
  background-color: #eee;
}


/* DARK MODE: GENERAL */

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }

  body {
    background: #000;
  }

  a {
    color: #bbb;
  }

  a:hover {
    color: #eee !important;
  }

  #content form {
    background-color: #000 !important;
  }

  tr,
  th,
  .highlightbg {
    background-color: #000 !important;
  }

  td {
    background-color: #2a2a2a;
  }

  pre {
    background-color: #000;
    color: #eee;
    line-height: normal;
  }

  input, select, textarea {
    background-color: #38383d;
    color: #ddd;
  }

  textarea:focus, input.text:focus, select:focus {
    background-color: #38383d;
    border-color: green;
  }

  #content, #infobox {
    background-color: #2a2a2e;
    color: #ddd;
    box-shadow: none;
  }

  #content fieldset {
    background-color: #000;
  }

  #content #toc {
    box-shadow: none;
  }

  .riquadro {
    background-color: transparent !important;
    box-shadow: none;
  }

  .evidenziato {
    background-color: #000;
    color: #ddd !important;
  }

  #navigation, #footer {
    background-color: #2a2a2e;
    color: #ddd;
    box-shadow: none;
  }

  #navigation a,
  #navigation a:visited {
    color: #bbb;
  }

  #mainmenu li.ego {
    background-color: #000;
    border: 1px solid #ff2227;
    color: #ff2227 !important;
    box-shadow: none;
  }
  #mainmenu li.ego a:hover { color: #ff2227 !important; }

  #mainmenu li.txt {
    background-color: #000;
    border: 1px solid #00dd27;
    color: #00dd27 !important;
    box-shadow: none;
  }
  #mainmenu li.txt a:hover { color: #00dd27 !important; }

  #mainmenu li.dev {
    background-color: #000;
    border: 1px solid cyan !important;
    color: cyan !important;
    box-shadow: none;
  }
  #mainmenu li.dev a:hover { color: cyan !important; }

  #mainmenu li.misc {
    background-color: #000;
    border: 1px solid #ffb900 !important;
    color: #ffb900 !important;
    box-shadow: none;
  }
  #mainmenu li.misc a:hover { color: #ffb900 !important; }

  #mainmenu li.info {
    background-color: #000;
    border: 1px solid #fff !important;
    color: #fff !important;
    box-shadow: none;
  }
  #mainmenu li.info a:hover { color: #fff !important; }

  #mainmenu li.info a {
    color: #fff !important;
  }

  legend {
    color: #fff;
  }
}


/* DARK MODE: EGO */

@media (prefers-color-scheme: dark) {
  .ego #content {
    background: linear-gradient(135deg, #2a2a2a 0%, #330001 100%);
  }

  .ego #toc {
    background-color: #000;
    border-color: #ff2227;
  }

  .ego #toc h2 {
    color: #ff2227;
  }
}


/* DARK MODE: TXT */

@media (prefers-color-scheme: dark) {
  .txt #content {
    background: linear-gradient(135deg, #2a2a2a 0%, #003309 100%);
  }

  .txt ol.comment_list li {
    color: #ddffe2;
    background-color: #000;
    box-shadow: none;
  }

  .txt .riquadro {
    color: #ddffe2;
  }

  .txt #toc {
    background-color: #000;
    border-color: #00dd27;
  }

  .txt #toc h2 {
    color: #00dd27;
  }
}


/* DARK MODE: DEV */

@media (prefers-color-scheme: dark) {
  .dev #content {
    background: linear-gradient(135deg, #2a2a2a 0%, #001a33 100%);
  }

  .dev {
    color: cyan !important;
  }

  .dev .riquadro {
    color: cyan;
  }

  .dev #toc {
    background-color: #000;
    border-color: cyan;
  }

  .dev #toc h2 {
    color: cyan;
  }

  .dev #content #pageheader h1 {
    border-bottom-color: cyan;
    color: cyan;
  }

  .dev #content h2,
  .dev #content h3,
  .dev #content legend {
    color: cyan;
  }
}


/* DARK MODE: MISC */

@media (prefers-color-scheme: dark) {
  .misc #content {
    background: linear-gradient(135deg, #2a2a2a 0%, #332500 100%);
  }

  .misc .riquadro {
    color: #feffdd !important;
  }

  .misc #toc {
    background-color: #000;
    border-color: #ff2227;
  }

  .misc #toc h2 {
    color: #ff2227;
  }

  .misc .contagiorni-data {
    color: #fff;
  }

  .misc .contagiorni-data strong {
    color: cyan;
  }
}


/* DARK MODE: INFO */

@media (prefers-color-scheme: dark) {
  .info #content {
    background: linear-gradient(135deg, #2a2a2a 0%, #444 100%);
  }

  .info #toc {
    background-color: #000;
    border-color: #fff;
  }

  .info #toc h2 {
    color: #fff;
  }

  #cuore {
    background-color: #333;
    box-shadow: none;
  }
}