/* _ _ _ _ _ _ _ _ 
  | | | | | | | | |
   \_/|___|___|\_/ */
body {
    background-color:blanchedalmond;
    text-align: center;
}
h1 {
    font-size:50pt;
    font-family:'Lucida Sans', 'Lucida Sans Regular';
    color:rgb(96, 52, 20);
}
h2 {
  font-family:'Lucida Sans', 'Lucida Sans Regular';
  color:rgb(131, 76, 36);
}
ul {
    list-style-type: none;
}
li {
    display: inline;
}
    li a:link {
        text-decoration: none; 
    }
    li a:hover {
        background-color:gold;
    }
    li a:active {
        background-color:gold;
        color:rgb(131, 76, 36);
    }
.current-page {
    background-color:rgb(131, 76, 36);
    color:white;
}
#nav {
    font-size:20pt
}

header#canvas {
    width:59.119vw;
    height:40vw;
    margin: 5vw auto 0 auto;
}
section,article {
    float:left;
    margin-bottom:2%
}
article#column1 {
    margin-left:.1%;
    width:16.8%;
    height:100%;
}
    section.red {
        width:98%;
        height:12.1%;
    }
    section.orange1 {
        width:48%;
        height:24.6%;
    }
    section.half-orange1 {
        width:48%;
        height:12%;
    }
    section.purple1 {
        margin-left:2%;
        width:48%;
        height: 24.6%;
    }
    section.half-purple1 {
        margin-left:2%;
        width:48%;
        height:12%;
    }
article#column2 {
    width:16.5%;
    height:100%;
}
    section.purple2 {
        width:48%;
        height:24.6%;
    }
    section.half-purple2 {
        width:48%;
        height:12.1%;
    }
    section.orange2 {
        margin-left:2%;
        width:48%;
        height:24.6%;
    }
    section.half-orange2 {
        margin-left:2%;
        width:48%;
        height:12.1%;
    }
    section.cyan {
        width:98%;
        height:12.1%;
    }
article#column3 {
    width:16.3%;
    height:100%;
}
    section.purple3 {
        width:50%;
        height:24.4%;
    }
    section.half-purple3 {
        width:50%;
        height:12.2%;
    }
    section.orange3 {
        margin-left:2%;
        width:48%;
        height:24.4%;
    }
    section.half-orange3 {
        margin-left:2%;
        width:48%;
        height:12.2%;
    }
    section.cyan1 {
        width:100%;
        height:12.2%;
    }

/*CSS COLOR CLASSES*/
.white {
    background-color:lightgray;
}
.red {
    background-color:rgb(185, 79, 61);
}
.red:hover {
    background-color:palevioletred;
}
.orange1,.orange2,.orange3,.half-orange1,.half-orange2,.half-orange3 {
    background-color:rgb(196, 104, 29);
}
.orange1:hover {
    background-color:peachpuff;
}
.orange2:hover {
    background-color:peachpuff;
}
.orange3:hover {
    background-color:peachpuff;
}
.half-orange1:hover {
    background-color:peachpuff;
}
.half-orange2:hover {
    background-color:peachpuff;
}
.half-orange3:hover {
    background-color:peachpuff;
}
.purple1,.purple2,.purple3,.half-purple1,.half-purple2,.half-purple3 {
    background-color:rgb(139, 88, 189);
}
.purple1:hover {
    background-color:plum;
}
.purple2:hover {
    background-color:plum;
}
.purple3:hover {
    background-color:plum;
}
.half-purple1:hover {
    background-color:plum;
}
.half-purple2:hover {
    background-color:plum;
}
.half-purple3:hover {
    background-color:plum;
}
.cyan,.cyan1 {
    background-color:rgb(82, 155, 155);
}
.cyan:hover {
    background-color:rgb(143, 245, 235);
}
.cyan1:hover {
    background-color:rgb(143, 245, 235);
}