/* Home page CSS - index.html */

.hb1 {
    font-weight: bold;
    font-family: Arial, Helvetica;
    font-size: 3em;
    color: #fff;
}

body {
    background-color: #FFFFCC;
}

/* welcome text */

.welcome {
    margin: 8px;
}

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

.float-right {
    float: right;
}

.small {
    font-size: 0.7em;
}

/* Banner grid has 2 columns */
.grid-banner-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background-color: #000;
  border: 1px solid #fff;
}

/* Grid has 30 columns (LCM of 2 3 5) - this allows 2, 3 or 5 column span multiples */

#grid {
  display: grid;
  grid-template-columns: repeat(30, 1fr);
  background-color: #000;
  border: 1px solid #fff;
  margin: 0px 8px 0px 8px;
}

#grid a {
    color: #fff;
    font-weight: bold;
}

#grid > div {
  background-color: #00f;
  color: #fff;
  padding: 15px;
  font-family: Arial, Helvetica;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

#grid > div p {
    margin: 6px 0px 12px 0px;
}

/* 30/2 = 15 */
#grid > div:nth-child(1) {grid-column: 1 / span 15;}
#grid > div:nth-child(2) {grid-column: 16 / span 15;}

/* 30/5 = 6 */
#grid > div:nth-child(3) {grid-column: 1 / span 6; background-color: #999999; color: #000;}
#grid > div:nth-child(4) {grid-column: 7 / span 6; background-color: #999999; color: #000;}
#grid > div:nth-child(5) {grid-column: 13 / span 6; background-color: #999999; color: #000;}
#grid > div:nth-child(6) {grid-column: 19 / span 6; background-color: #999999; color: #000;}
#grid > div:nth-child(7) {grid-column: 25 / span 6; background-color: #999999; color: #000;}

/* 30/4 = 7.5 needs tweak 8 7 7 8 */
#grid > div:nth-child(8) {grid-column: 1 / span 8;}
#grid > div:nth-child(9) {grid-column: 9 / span 7;}
#grid > div:nth-child(10) {grid-column: 16 / span 7;}
#grid > div:nth-child(11) {grid-column: 23 / span 8;}

/* 30/3 = 10 bottom row */

#grid > div:nth-child(12) {grid-column: 1 / span 10; background-color: #000; color: #8888FF; align-self: center; }
#grid > div:nth-child(13) {grid-column: 11 / span 10; background-color: #000; text-align: center;}
#grid > div:nth-child(14) {grid-column: 21 / span 10; background-color: #000; color: #8888FF; align-self: center; text-align: right;}

#grid > div:nth-child(n+12) {border: none;}

@media (max-width:700px){
    /* Collapse 1st row into 1 col */
    #grid > div:nth-child(1) {grid-column: 1 / span 30;}
    #grid > div:nth-child(2) {grid-column: 1 / span 30;}

    /* Collapse 2nd row to row of 3 and row of 2 */
    #grid > div:nth-child(3) {grid-column: 1 / span 10;}
    #grid > div:nth-child(4) {grid-column: 11 / span 10;}
    #grid > div:nth-child(5) {grid-column: 21 / span 10;}

    #grid > div:nth-child(6) {grid-column: 1 / span 15;}
    #grid > div:nth-child(7) {grid-column: 16 / span 15;}

    /* Collapse 3rd row to two rows of 2 */
    #grid > div:nth-child(8) {grid-column: 1 / span 15;}
    #grid > div:nth-child(9) {grid-column: 16 / span 15;}
    #grid > div:nth-child(10) {grid-column: 1 / span 15;}
    #grid > div:nth-child(11) {grid-column: 16 / span 15;}

    /* Collapse bottom row into single column */
    #grid > div:nth-child(n+12) {grid-column: 1 / span 30; text-align: center; padding: 5px;}

    .hb1 {
        font-size: 2.2em;
    }
}

@media (max-width:350px){
    /* Collapse all into a single column */
    #grid > div:nth-child(1n) {grid-column: 1 / span 30;}
}