/* models.html */

#main {
    margin: 24px 8px 80px 8px;
}

#main ul {
    padding-left: 18px;
    list-style-type: square;
}

#main li {
    margin-bottom: 6px;
}

/* Welcome text */

.welcome {
    text-align: center;
    font-size: 1.2em;
}

/* Feature tags */

.sp:before, .nine:before, .nr:before, .rec:before, .dt:before
{
    position: relative;
    top: 0px;
    padding: 2px 4px 2px 4px;
    margin: 0px 6px 2px 0px;
    font-size: 0.8em;
    font-weight: bold;
    font-family: Arial, Helvetica;
    border: 1px solid #000;
    border-radius: 3px;
    box-shadow: 3px 3px 2px rgba(0,0,0,0.2);
    white-space: nowrap;
}

.sp:before {content: "SP"; color: #ed1c0e; background: #08deff;}
.nine:before {content: "9"; color: #ffffff; background: #0000ff;}
.nr:before {content: "NR"; color: #be7b00; background: #00ff00;}
.rec:before {content: "REC"; color: #00ff00; background: #ff105a;}
.dt:before {content: "DT"; color: #000000; background: #39ff18;}

/* Legend box */

.legend {
    margin: 8px;
    padding: 8px;
    background: #bbb;
    display: inline-block;
    border: 1px solid #666;
    font-size: 0.8em;
    line-height: 1.6em;
}

.legend span {
    display: inline-block;
    width: 70px;
}

/* Grid layout */

#models {
    display: grid;
    grid-template-columns: 20% 30% auto;
    background-color: #fff;
    margin: 8px auto 0px auto;
    padding: 2px;
    border: 3px double #000;
    max-width: 1024px;
}

#models a {
    text-decoration: none;
    color: #00f;
}

#models a:hover {
    text-decoration: underline;
}

#models > div {
    padding: 8px;
    border: 3px solid #fff;
}

#models > div:nth-child(3n+1) {
    background-color: #DDDDBB;
    display: inline-grid;
    align-items: center;
    justify-items: center;
}

#models > div:nth-child(3n+1) img {
    width: 80px;    /* most images 64px */
}

#models > div:nth-child(3n+1) a:hover img {
    filter: brightness(110%);
    border: 1px solid #000;
}

#models > div:nth-child(3n+2) {
    display: inline-grid;
    align-items: center;
    justify-items: center;
    background-color: #cccccc;
    font-size: 1.8em;
    font-weight: bold;
    text-align: center;
}

#models > div:nth-child(3n+3) {
    background-color: #fff;
    margin-bottom: 16px;
}


@media (max-width:730px) {
    /* Move 2nd column under 1st */

    #models {
        grid-template-columns: auto auto;
        grid-auto-flow: dense;  /* This moves the text col up */
    }

    #models > div:nth-child(3n+1) {
        grid-column: 1;
    }

    #models > div:nth-child(3n+2) {
        grid-column: 1;
        font-size: 1.5em;
    }

    #models > div:nth-child(3n+3) {
        grid-row: span 2;
        grid-column: 2;
    }
}

@media (max-width:300px) {
    /* Collapse all into a single column */
    
    #models {
        grid-template-columns: 1fr;
    }

    #models > div:nth-child(1n) {
        grid-column: 1;
        grid-row: unset;
    }
}


/* Overview pages xxxxovi.html */

#overview {
    width: 90%;
    margin: 24px auto 0px auto;
}

@media (max-width:730px) {
    /* Move 2nd column under 1st */

    #overview {
        width: 100%;
    }
}

/* Feature pages xxxxfeat.html */
/* 2 columns. 1 when small. */

#features {
    display: grid;
    grid-template-columns: auto auto;
    width: 90%;
    margin: 24px auto 0px auto;
}

#features div {
    padding: 8px;
}

#features ul {
    padding-left: 18px;
    list-style-type: square;
}

#features li {
    margin-bottom: 6px;
}

@media (max-width:730px) {
    /* Move 2nd column under 1st */

    #features {
        grid-template-columns: auto;
        width: 100%;
    }

    #features div {
        padding: 0px;
    }
}

/* Specifications pages xxxxspec.html */
/* 2 columns. 1 when small. */

#specifications {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 90%;
    margin: 24px auto 0px auto;
}

.page_type {
    text-align: center;
    font-weight: bold;
    font-size: 1.2em;
    margin: 24px 8px 8px 8px;
}

#specifications div {
    padding: 8px;
    margin: 8px;
    background-color: #eeeeee;
}

#specifications ul {
    padding-left: 18px;
    list-style-type: square;
}

#specifications li {
    margin-bottom: 6px;
}

@media (max-width:730px) {
    /* Move 2nd column under 1st */

    #specifications {
        grid-template-columns: auto;
        width: 100%;
    }

    #specifications div {
        padding: 0px;
        margin: 0px;
    }
}