:root {--main-color: #544; --grid-color: #800000;}
/* STRUCTURE */
html { font-family: Sans-Serif; line-height: 1.8em; height: 100%; }
body { margin: 0px; color: var(--main-color);  height: 100%; }
#banner { position: fixed; z-index: 10; top: 0; width: 100%; height: 100px; font-size: .75em; background-color: green;  vertical-align: middle;}
#tabs { height: 60px; width: 900px; margin: auto; }
#tabs a { font-weight: normal; margin-right: 0px; }
#wrapper { width: 900px; margin: auto; min-height: 600px; padding-top: 60px;}
#main { padding: 40px 0px; font: 16pt; font-size: 1.1em; min-height: 600px; width: 600px; }
#main ul, #main ol { margin: 0px 0px 15px 20px; line-height: 1.8em; }
#main li { margin-bottom: 0px; }
#main h1 { font-size: 240%; font-weight: normal; margin-bottom: 5px; font-family: 'Alegreya Sans SC';}
#main h1 a { color: black; font-weight: normal; color: black; }
#main h2 { font-size: 120%; margin-bottom: 0px; font-weight: bold; }
#main h2 a { font-weight: bold; color: black; }
#main h3 { margin-bottom: 0px; color: black;}
#side { padding: 45px 0px; float: right; width: 250px; min-height: 600px;}
#side h1 { margin-bottom: 4px; font-family: 'Alegreya Sans SC'; color: black; font-size: 200%; }
#side h1 a { font-weight: normal; color: black; }
#side a { font-weight: normal; color: #444; }
#bottom { margin: auto; font: 16pt; line-height: 200%; background-color: green; color: white; }
#bottom a, #bottom p { color: white; font-weight: normal; }
#bottom h2 { color: white; font-weight: normal; }
#bottom2 { margin: 0px auto; width: 900px; padding: 30px 0px; color: white; }

/* HTML ELEMENTS */
* { margin: 0px; padding 0px; }
p { margin: 0px 0px 25px 0px; color: #fff; }
a { font-weight: bold; color: white; text-decoration: undrline; }
a:hover, a:active { color: green; text-decoration: underline overline; }
a img { border: 0px; }
img { border-spacing: 0px; }
h1, h2, h3 { font-weight: normal; color: white; }
blockquote { margin: 0px 25px; font-style: italic; line-height: 2em; }
ins { text-decoration: none; color: #466b85; }
del { color: #555; }
hr { border-top: 1px dotted #777; height: 0px; margin: 30px 0px 10px 0px; }
table { border-collapse: collapse; }
th { text-align: left; }
ol, ol li { margin: 0px; padding: 0px; }
ul, ul li { margin: 0px; padding: 0px; }
ul { list-style: square; }

/* BUTTONS */
.button, #side .button { padding: 7px 9px; color: white; text-decoration: none; background-color: black; font-size: 1.2em; text-transform: uppercase; border: black 1px solid; }
.button:hover, #side .button:hover { background-color: #777; color: white; border: black 2px solid; padding: 6px 8px; }
.bigbutton { color: white; background-color: black; width: 200px; padding: 9px 1px; text-align:center; border: 1px solid black; font-size: 1.2em; text-transform: uppercase; font-weight: bold; }
.bigbutton:hover { background-color: #777; border: 2px solid black; padding: 8px 0px; }
.bigbutton a { color: white; font-size: 1.25em; border: 0px; }

/* FORMS */
input, textarea, select { background: #white; font-family: inherit; font-size: 1em; } /* font-size: inherit; */
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; }
input[type=button], input[type=submit], input[type=reset] { padding: 7px 9px 8px 9px; font: Arial,san-serif 1.2em; font-weight: 600; text-transform: uppercase; color: white; background-color: black; border: 1px solid black; }
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover { padding: 6px 8px 7px 8px; border: 2px solid black; background-color: #555; }
input[type=text], input[type=password] { height: 33px; border: 1px #444 solid; padding:3px 5px; margin: 0px; }
input[type=text]:hover, input[type=password]:hover, textarea:hover { border: 2px #444 solid; padding: 2px 4px; margin: 0px; }
textarea { border: 1px #444 solid; padding: 2px 5px; margin: 1px 0px; }
select { margin: 0px; height: 37px; border: black solid 1px; }

/* BOLTWIRE CLASSES */
.fancy { font-family: 'Alegreya Sans SC'; color: black; }
.hide { display: none; margin-top: -25px; }
.right { float: right; padding: 0px 0px 15px 15px; }
.large { font-size: 115%; }
.highlight { background-color:yellow; padding: 2px 4px; } 
.marks { font-size: 80%; color: red; }
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.small-caps { font-variant: small-caps; }
.black { font-weight: normal; color: #444; }
.hotlinks a, .hotlinks a:link, .hotlinks a:visited { color: #444; border-bottom: 1px dotted #cecece;}
.hotlinks a:hover { background-color: #f7f7f7; text-decoration: none; border-bottom: 1px dotted #007700;}
.box { background-color: {box_color}; padding: 10px; border: 1px solid #444; }
.box ul { margin: 0px; }
.box li { margin-left: 18px; }
.code { background-color: {box_color}; padding: 7px; border: 1px solid; }
.code ul { margin: 0px 0px 0px 20px;}  
.message { font-style: italic; color: black; background-color: white; margin-bottom: 30px; }
.preview { border: 2px dotted #82B0BF; padding:.5em; margin: 1em 0; } 
.diff { color: green; font-size:75%; background-color: #f7f7f7; padding: 2px 5px 2px 5px; line-height: 2.5em;}
table.stripe { margin-left: 0px; } 
table.stripe th, table.stripe td {padding: 5px;}
tr.striperow { background-color: #f7f7f7; padding: 7px; }
table.rss { padding: 0px; border-spacing: 0px; border-collapse: collapse; }
table.rss th { padding: 10px; border: 1px solid #999; background-color: #f7f7f7; padding-right: 25px; text-align: left; }
table.rss td { padding: 7px; border: 1px solid #999; background-color: #ffffff; padding-right: 25px; }
table.box, table.box td { border-color: #999; border-width: 1px; border-style: solid; }
table.fmt, table.fmt th, table.fmt td { padding: 0px; }
table.forum {border: #222 1px solid; border-spacing: 0px; width: 100%; }
table.forum tr th { margin: 5px; padding: 5px; border: #222 1px solid; background-color: #eeeebb; }
table.forum tr td { margin: 5px; padding: 5px; border: #222 1px solid; background-color: white; }
table.sortable, table.sortable tr th, table.sortable tr td { border: #222 1px solid; border-spacing: 0px; }
table.sortable th { background-color: #eeeebb; margin: 5px; padding: 5px; }
table.sortable td { margin: 5px; padding: 5px; }

/*** Grid container ***/
.grid-container {

  display: grid;
  grid-template-columns: 1.2fr 0.8fr 1fr 1fr 0.8fr 01.2fr;
  grid-template-rows: 8vw 0.0fr 0.1fr 3.9fr 0.7fr;
  gap: 5px 0px;
  grid-template-areas:
    "top top top top top top" 
    "dropdown dropdown dropdown dropdown dropdown dropdown"
    "menu menu menu menu menu menu"
    "sinistra main main main main side"
    "bottom bottom bottom bottom bottom bottom";
     border-radius: 15px; padding:5px;
}

.grid-item {background-color: var(--grid-color); color:white;     border-radius: 15px; padding:5px;}

.top { grid-area: top; }

.dropdown { grid-area: dropdown;}

.menu { grid-area: menu; }

.sinistra { grid-area: sinistra; border-radius: 15px; color: white; margin: 8px;}

.main { grid-area: main; border-radius: 15px; margin: 5px;}

.side { grid-area: side; border-radius: 15px;color: white; margin: 8px;}

.footer { grid-area: footer; }

.bottom { grid-area: bottom;}

.zebra tr:nth-child(even) {background-color: silver;}
.zebra tr:nth-child(odd)   {background-color: white;}
.kalender td:nth-child(1) {width: 50px;}
.kalender td:nth-child(2) {width: 30px;}
.kalender td:nth-child(3) {width: 500px;}

.pag td:nth-child(1) {width: 50px;}
.pag td:nth-child(2) {width: 30px;}
.pag td:nth-child(3) {width: 500px;}

.pag-gialle td:nth-child(1) {width: 150px;}
.pag-gialle td:nth-child(2) {width: 200px;}
.pag-gialle td:nth-child(3) {width: 200px;}
.pag-gialle td:nth-child(4) {width: 50px;}
.pag-gialle td:nth-child(5) {width: 50px;}

.action-calendario td:nth-child(1) {width: 10px;}
.action-calendario td:nth-child(2) {width: 150px;}

.text-shadow {padding-left: 8px; text-shadow: 2px 2px black; color: white;}

.flexbox {display: flex; flex-direction: column; justify-content: flex-start;}
.text3d1 {
line-height:1em;
font-family: Garamond, serif;
color:#fff9d6;
font-weight:bold;
font-size:10vw;
text-shadow:0px 0px 0 rgb(210,210,210),-1px -1px 0 rgb(176,176,176),-2px -2px 0 rgb(141,141,141),-3px -3px 0 rgb(106,106,106), -4px -4px 0 rgb(71,71,71),-5px -5px 4px rgba(0,0,0,0.8),-5px -5px 1px rgba(0,0,0,0.5),0px 0px 4px rgba(0,0,0,.2);}


.w0-yellow {background-color: yellow;}
.w0-green {background-color: #008000; color: white;}