/* Copyright (C) JC 2026. 100% fatto a mano seguendo scrupolosamente https://www.soft-land.org/documenti/pessimo */

body {
    font-family: "Liberation Serif", "Times New Roman", serif;
    background-color: #fffff7;
}

.principale {
    max-width: 1100px;
    margin-left: auto !important;
    margin-right: auto !important;
}

/*barra superiore (headerbar)*/

.barra-menu-link {
    position:absolute;
    bottom: -24px;
}

.barra-menu-link a, .barra-menu-link a:visited {
    color:black;
    text-decoration: underline;
    text-decoration-style: dotted;
}

.barra-menu-link a:hover {
    color:red;
}

.barra-titolo {
    width:100%;
    display:table;
    padding-bottom:10px
}

.logo {
    float:left;
}

@media (max-width:600px) {
    .menu {
        margin-left: 0px !important;
    }
}

.menu {
    height:77px;
    border-top: 1px solid #ffcc00;
    border-bottom: 30px solid #ffcc00;
    padding-top:20px;
    padding-left:20px;
    margin-left:150px;
}

.triangoli {
    background-image: url('/assets/images/structure/triangoli.svg');
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    background-attachment: scroll;
    position:relative;
}

.titolo-sito {
    background-color: black;
    color:white;
    width:fit-content;
    padding:10px;
    display:block;
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

/*breadcrumb fa troppo vibecodato, i fratelli Grimm si rivoltano nella tomba*/
.briciole {
    font-size: 10px;
    width:100%;
    background-color: #ffcc00;
}

.briciole-int {
    padding:2px;
}

.piedipagina {
    margin-top: 20px;
    border-top: 20px solid #ffcc00;
    font-size:10px;
    text-align:center;
}

.piedipagina a, .piedipagina a:visited {
    color: crimson;
    text-decoration: underline;
    text-decoration-style: dotted;
}

.piedipagina a:hover {
    background-color: crimson;
    color:white;
}

.contenuto { /*questo serve per "abbassare" il piedipagina */
    min-height: 80vh;
    min-height: -webkit-calc(100vh - 266px);
    min-height: -moz-calc(100vh - 266px);
    min-height: calc(100vh - 266px);
}

/* layout */

.ly-row:after,
.ly-row:before,
.ly-row-padding:after,
.ly-row-padding:before {
    content: "";
    display: table;
    clear: both
}
.ly-half,
.ly-third,
.ly-twothird,
.ly-threequarter,
.ly-quarter {
    float: left;
    width: 100%
}

.ly-row-padding,
.ly-row-padding>.ly-half,
.ly-row-padding>.ly-third,
.ly-row-padding>.ly-twothird,
.ly-row-padding>.ly-threequarter,
.ly-row-padding>.ly-quarter {
    padding: 0 8px
}

@media (min-width:601px) {
    .ly-quarter {
        width: 24.99999%
    }
    .ly-third {
        width: 33.33333%
    }
    .ly-half {
        width: 49.99999%
    }
    .ly-twothird {
        width: 66.66666%
    }
    .ly-threequarter {
        width: 74.99999%
    }
    .ly-rightborder-notsmall {
        border-right: 1px dotted gray;
    }
}

.ly-padding {
    padding: 8px 16px!important
}

.ly-padding-large {
    padding: 12px 24px!important
}


/* stili di pagina */

.hr {
    border-top: 1px dotted gray;
}

.contenuto a, .contenuto a:visited {
    color: crimson;
    text-decoration: underline;
    text-decoration-style: dotted;
}

.contenuto a:hover {
    background-color: crimson;
    color:white;
}

.contenuto code {
    border: 1px dotted #ffcc00;
    background-color: #ffeca1;
    color: black !important;
    font-style: normal !important;
}

.contenuto pre {
    border: 1px dotted #ffcc00;
    border-left-width: 1px;
    border-left-style: dotted;
    border-left-color: #ffcc00;
    border-left: 10px solid #ffcc00;
    background-color: #ffeca1;
    padding: 10px;
    margin: 40px;
}

.contenuto pre code {
    border: none;
}

.contenuto blockquote {
    font-family: serif;
    border: 1px dotted #ffcc00;
    border-left-width: 1px;
    border-left-style: dotted;
    border-left-color: #ffcc00;
    border-left: 10px solid #ffcc00;
    background-color: #ffeca1;
    padding: 10px;
    /*font-style: italic;*/
}

.contenuto h1 {
    text-align:center;
    padding-bottom: 10px;
    border-bottom: 2px dotted #b5b3a9;
}

.contenuto h1, .contenuto h2, .contenuto h3, .contenuto h4, .contenuto h5, .contenuto h6 {
    /*border-bottom: 1px dotted #b5b3a9;*/
    color: #222;
    font-weight: bold;
    /*margin: 0 0 10px;
    padding: 0 0 0 25px;*/
}

.contenuto img {
    max-width: 100%;
    height:auto;
}

/*tabelle */

.contenuto table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    display: table;
}

.contenuto table {
    border: 1px solid #d3d3d3
}

.contenuto table th {
    background-color: #ffeca1;
    text-align:center !important;
}

.contenuto table tr {
    border: 1px dotted gray;
}

.contenuto table tr:nth-child(odd) {
    background-color: #f1f1f1
}

.contenuto table tr:nth-child(even) {
    background-color: white
}

.contenuto table td,
.contenuto table th {
    padding: 8px 8px;
    display: table-cell;
    text-align: left;
    vertical-align: top;
    border: 1px dotted gray;
}

.contenuto table th:first-child,
.contenuto table td:first-child {
    padding-left: 16px
}


/* calcolatori */

.frame-calcolatore {
    width:100%;
    border: 1px solid #d3d3d3;
    background-color: #fffbed;
}

.titolo-calcolatore {
    background-color: #ffcc00;
    font-weight: bold;
    padding: 5px;
}

.contenuto-calcolatore {
    padding: 10px;
    padding-bottom: 5px;
}

.input-calcolatore {
    padding: 2px;
    display: block;
    width: 99%
}



/* marcatori di formattazione */

.fmt-monoquote {
    font-family: monospace;
    border: 1px dotted #ffcc00;
    border-left-width: 1px;
    border-left-style: dotted;
    border-left-color: #ffcc00;
    border-left: 10px solid #ffcc00;
    background-color: #ffeca1;
    padding: 10px;
    margin: 40px;
    white-space: pre-line;
}

.fmt-centra {
    text-align: center;
}

.fmt-sx {
    text-align: left;
}

.fmt-dx {
    text-align: right;
}

.fmt-giustifica {
    text-align:justify;
}

/* QUESTO È UN ESTRATTO DI W3.CSS PER FINI DI COMPATIBILITÀ */

/* responsività tabella (compat W3) */

.responsivo {
    display: block;
    overflow-x: auto
}

@media (max-width:600px) {
    .ly-hide-small {
        display: none!important
    }
}

@media (min-width:993px) {
    .ly-hide-large {
        display: none!important
    }
}

@media (max-width:992px) and (min-width:601px) {
    .ly-hide-medium {
        display: none!important
    }
}