@charset "utf-8";
/* CSS Document */
#wrapper {
    width: 640px;
    margin-left: auto;
    margin-right: auto
    }
#intro {
    text-align: center
    }
#links ul {
    list-style-type: none
    }
#oldlinks {
    text-align: center
    }
#oldlinks ul {
    list-style-type: none;
    padding: 0;
    margin: 0
    }
/*  SECTIONS  ============================================================================= */
.section {
    clear: both;
    padding: 0;
    margin: 0
    }
/*  GROUPING  ============================================================================= */
.group:before, .group:after {
    content: "";
    display: table
    }
.group:after {
    clear: both
    }
.group {
    zoom: 1;
    /* For IE 6/7 (trigger hasLayout) */
    }
/*  GRID COLUMN SETUP   ==================================================================== */
.col {
    display: block;
    float: left;
    margin: 1% 0 1% 1%
    }
.col:first-child {
    margin-left: 0
    }
/* all browsers except IE6 and lower */
/*  REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */
/*  GRID OF TWO   ============================================================================= */
.span_2_of_2 {
    width: 100%
    }
.span_1_of_2 {
    width: 49.2%
    }
/*  GRID OF FOUR   ============================================================================= */
.span_4_of_4 {
    width: 100%
    }
.span_3_of_4 {
    width: 74.6%
    }
.span_2_of_4 {
    width: 49.2%
    }
.span_1_of_4 {
    width: 23.8%
    }
@media only screen and (max-width: 480px) {
    .col {
        margin: 1% 0 1% 0%
        }
    }
@media only screen and (max-width: 480px) {
    .span_2_of_2 {
        width: 100%
        }
    .span_1_of_2 {
        width: 100%
        }
    }
/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
@media only screen and (max-width: 480px) {
    .span_4_of_4 {
        width: 100%
        }
    .span_3_of_4 {
        width: 100%
        }
    .span_2_of_4 {
        width: 100%
        }
    .span_1_of_4 {
        width: 100%
        }
    }