/* GERAL */
body {color:mediumblue; background-color: mediumpurple;}
.section group {background-color: aqua}
header {width: 69%; margin: auto}
#date-time {color: blue}
nav {width: 50%; margin:auto; color: white; background-color: cornflowerblue;}
form {width: 33%; margin:auto; color: mediumpurple; background-color: yellow;}
h1 {color: rgb(255,20,147); text-align: center; background-color: skyblue;}
h2 {color: rgb(128,20,255);text-align: center;background-color: pink;}
h3 {color: rgb(0,0,255);text-align: center;background-color: ghostwhite;}
section {width: 90%; margin:auto; color: white; background-color: mediumvioletred;}
a:link {color: deeppink;text-decoration:none;padding-left: 13.5px;}
a:visited {color: red;text-decoration:none;}
a:hover {color: yellow;text-decoration:none;}
footer {width: 33%; color: white; background-color: cornflowerblue}
/*  SECTIONS  */
.section {clear:both;padding:0px;margin:0px;text-align: center}
/*  COLUMN SETUP  */
.col {display: block;float:left;margin: 1% 0 1% 1.6%;}
.col:first-child { margin-left: 0; }
/*  GROUPING  */
.group:before,
.group:after {content:""; display:table;}
.group:after { clear:both;}
.group {zoom:1; /* For IE 6/7 */}
/*  GRID OF FOUR  */
.span_4_of_4 {width: 100%; background-color:lightsteelblue}
.span_3_of_4 {width: 74.6%; background-color: lightsteelblue}
.span_2_of_4 {width: 49.2%; background-color: lightsteelblue}
.span_1_of_4 {width: 23.8%; color: red; background-color: lightsteelblue}
/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {.col {margin: 1% 0 1% 0%;}.span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 {width: 100%;}}