/* models.html and model pages */

/*
body {
    background-image: url("v2000bg8.jpg");
    background-color: #FFFFCC;
}
*/

/* welcome text */

.welcome {
    margin: 8px;
}

.welcome p {
    /* font-weight: bold; */
    font-family: Arial, Helvetica;
    font-size: 1.2em;
}

.small {
    font-size: 0.7em;
}

/* Make link colours */

.philips a { color: #00f; }
.grundig a { color: #f00; }
.bando, .bando a { color: #000; }
.itt a { color: #fff; }
.marantz a { color: #383; }

/* Feature tags */

.dns:before, .stereo:before, .xp:before
{
    position: relative;
    top: 0px;
    padding: 2px;
    margin: 0px 8px 2px 0px;
    font: 0.8em bold Arial, Helvetica;
    border: 1px solid #000;
    border-radius: 3px;
    box-shadow: 3px 3px 2px rgba(0,0,0,0.2);
    white-space: nowrap;
}

.dns:before {content: "DNS"; color: #000; background: #ccc;}
.stereo:before {content: "STEREO"; color: #fff; background: #f00;}
.xp:before {content: "XP"; color: #000; background: #ff8000;}

/* 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: 64px;
}

/* Grid layout */

.model {
  display: grid;
  grid-template-columns: 20% 30% auto;
  background-color: #fff;
  border: 4px solid #fff;
  margin: 8px 8px 0px 8px;
}

.model > div {
  background-color: #DDDDBB;
  color: #fff;
  padding: 15px;
  margin: 2px;
}
                                              
.model div a:hover {
    text-decoration: underline;
}

.model div p {
    margin: 6px 0px 12px 0px;
}

.model div a {
    text-decoration: none;
}

.model div:nth-child(3n+1) {
    text-align: center; 
    border: 1px solid #ddddbb;
}

.model div:nth-child(3n+2) {
    text-align: center; 
    border: 1px solid #cccccc; 
    font-size: 1.5em; 
    background-color: #cccccc;
}

.model div:nth-child(3n+3) {
    color: #000; 
    background-color: #ffffff; 
    border: 1px solid #ddd;
}


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

    .model {
        grid-template-columns: 40% auto;
        grid-auto-flow: dense;  /* This moves the text col up */
    }

    .model div:nth-child(3n+1) {
        grid-column: 1;
    }
    
    .model div:nth-child(3n+2) {
        grid-column: 1;
    }
    
    .model div:nth-child(3n+3) {
        grid-row: span 2;
        grid-column: 2;
    }
}

@media (max-width:350px){
    /* Collapse all into a single column */
    .model {
        grid-template-columns: auto;
        grid-auto-flow: unset;
    }

    .model div:nth-child(1n) {
        grid-column: 1;
    }
}