/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {
    display: block;
}
mark, rp, rt, ruby, summary, time {
    display: inline;
}

/* Site-wide properties ======================================================== */
body {
    font: normal normal 10px/10px Tahoma, Arial, Helvetica, Verdana, sans-serif;
    background-image: url("bg.png");
    padding: 2% 5%;
}

h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 22px;
    color: #999999;
    line-height: 1.5;
    text-align: center;
    margin-bottom: 5%;
}

h2 {
    color: #ffffff;
    font-size: 20px;
}

a:link,
a:visited,
a:hover,
a:active {
    color: #ffffff;
}

#maincontainer {
    width: 960px;
    margin: auto;
}

#logo {
    float: left;
}

#images {
    width: 960px;
    float: left;
}

#description {
    width: 960px;
    float: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #999999;
    line-height: 1.5;
    text-align: center;
}

p {
    margin-top: 15px;
    margin-bottom: 15px;
}

#footer {
    width: 960px;
    float: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #ffd145;
    line-height: 1.5;
    text-align: center;
}

/* Reusable classes ============================================================ */

/* Left & Right alignment */
.left { float: left; }
.right { float: right; }

/* The inside class provides consistent padding. To be used often! */
.inside { padding: 20px; }

/* The fraction classes are useful for column lists */
.half, .third, .quarter, .fifth, .sixth { width: 100%; }
.half li, .third li, .quarter li, .fifth li, .sixth li { float: left; }
.half li { padding-right: 5%; width: 45%; }
.third li { padding-right: 5%; width: 28.3%; }
.quarter li { padding-right: 5%; width: 20%; }
.fifth li { padding-right: 5%; width: 15%; }

/* For when a <br /> just ain't enough */
.separator {
    clear: both;
    float: left;
    height: 1px;
    width: 100%;
}

/* Basic Structure ============================================================= */
#wrap {
    margin: 0 auto;
    position: relative;
    width: 960px;
}

/* Header */
header {
    float: left;
    width: 100%;
}

/* Content */
article {
    float: left;
    width: 66.7%;
}

/* Sidebar */
aside {
    float: left;
    width: 33.3%;
}

/* Footer */
footer {
    float: left;
    width: 100%;
}

/* Project specifics =========================================================== */
/* Pour some CSS below ========================================================= */

/* MEDIA QUERIES */
@media (max-width: 768px) {
    h1 {
        font-size: 18px;
    }
    
    h2 {
        font-size: 16px;
    }
    
    /* Allow the container to shrink and center */
    #maincontainer {
        width: 100%;
        max-width: 960px;
        margin: 0 auto;

    }
    
    /* Remove floats and center the logo */
    #logo {
        width: 100%;
        float: none;
        margin: 0 auto;
        text-align: center;
    }
    
    /* Hide images section if needed */
    #images {
        display: none;
    }
    
    /* Remove floats from description and center its content */
    #description {
        width: 100%;
        float: none;
        margin: 0 auto;
        font-size: 16px;
        text-align: center;
    }
    
    /* Remove floats from footer and center its content */
    #footer {
        width: 100%;
        float: none;
        margin: 0 auto;
        font-size: 16px;
        text-align: center;
    }
}