html,body {
    background-image: url("write008.gif");
    height: 100%;
}

#page {
    background-color: white;
    border-color: gray;
    border-width: 1px;
    border-style: solid;
    width: 90%;
    /*height: 90%;*/
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.8em;
    padding: 0.5em;
    box-shadow: 10px 10px 5px #888888;
}

#content {
    height: 80%;
}

#header, #footer {
    height: 10%;
}

.overlay {
    position: absolute;
    top: 1em;
    left: 1em;
    height: 90%;
    z-index: 10;
}

hr {
    border-top: solid darkgrey 2px;
    border-bottom: solid grey 4px;
    border-left: transparent;
    border-right: transparent;
    height: 3px;
}

nav a {
	position: relative;
	display: inline-block;
	outline: none;
	color: #fff;
	text-decoration: none;
	letter-spacing: 1px;
	font-weight: 300;
	text-shadow: 0 0 1px rgba(255,255,255,0.3);
	font-size: 1em;
}

nav a:hover,
nav a:focus {
	outline: none;
}

/* Effect 7: second border slides up */
.cl-effect-7 a {
	padding: 4px 10px 2px;
	color: #566473;
	text-shadow: none;
	font-weight: 700;
}

.cl-effect-7 a::before,
.cl-effect-7 a::after {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 3px;
	background: #566473;
	content: '';
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
	-webkit-transform: scale(0.85);
	-moz-transform: scale(0.85);
	transform: scale(0.85);
}

.cl-effect-7 a::after {
	opacity: 0;
	-webkit-transition: top 0.3s, opacity 0.3s, -webkit-transform 0.3s;
	-moz-transition: top 0.3s, opacity 0.3s, -moz-transform 0.3s;
	transition: top 0.3s, opacity 0.3s, transform 0.3s;
}

.cl-effect-7 a:hover::before,
.cl-effect-7 a:hover::after,
.cl-effect-7 a:focus::before,
.cl-effect-7 a:focus::after {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	transform: scale(1);
}

.cl-effect-7 a:hover::after,
.cl-effect-7 a:focus::after {
	top: 0%;
	opacity: 1;
}

/*  SECTIONS  */
.section {
    clear: both;
    padding: 0px;
    margin: 0px;
}

/*  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 SIX  */
.span_6_of_6 {
    width: 100%;
}

.span_5_of_6 {
    width: 83.06%;
}

.span_4_of_6 {
    width: 66.13%;
}

.span_3_of_6 {
    width: 49.2%;
}

.span_2_of_6 {
    width: 32.26%;
}

.span_1_of_6 {
    width: 15.33%;
}


@media only screen and (max-width: 920px) {
    .col {
        margin: 1% 0 1% 0%;
    }

    .span_1_of_6 {
        width: 32.26%;
    }
}

@media only screen and (max-width: 720px) {
    .col {
        margin: 1% 0 1% 0%;
    }

    .span_1_of_6 {
        width: 49.2%;
    }
}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
    .col {
        margin: 1% 0 1% 0%;
    }

    .span_1_of_6, .span_2_of_6, .span_3_of_6, .span_4_of_6, .span_5_of_6, .span_6_of_6 {
        width: 100%;
    }
}

.date {
    position: absolute;
    font-size: 0.8em;
    margin: 1% 0 0 0;
}