@charset "UTF-8";

/*
 * Colours to Use
 *
 * #161616 (Charcoal Grey) - to be used as background for main navigation and footer
 * #121212 (Dark Charcoal Grey) - to be used as background highlights when main navigation and footer links are hovered over
 * #bbb (Grey) - to be as used the colour to use for text over a dark background
 * #fff (White) - to be used as the background colour for sections
 * #e6e6e6 (Light Grey) - to be used as the background color for zebra striping of alternate sections
 * #870fof (Red) - to be used as the highlight/jumbotron background colour
 *
 * NOTE:
 * The names in brackets are mine. They may not (probably will not) correspond with standard CSS color names in most cases.
 *
 */

@import url(http://fonts.googleapis.com/css?family=Ubuntu:400,300);

body {
    font-family: 'Ubuntu', sans-serif;
    font-size: 16px;

    /*
     * min-width should be 320px
     * we've set the default font size to 16px
     * we want to express the min-width relative to the font size
     *
     * min-width = 320px / 16px
     * min-width = 20em;
     */
    min-width: 20em;
}

.section {
    padding: 3em 1em;
}

.group:after {
    clear: both;
    content: "";
    display: table;
}

.inside {
    max-width: 978px;
    margin: 0 auto;
}

.col {
    margin: 1% 0 1% 0%;
}

.span_3_of_3,
.span_2_of_3,
.span_1_of_3 {
    width: 100%;
}

.header  {
    padding: 1em;
}

.header > header {
    width: 100%;
}

.header,
.footer {
    background-color: #161616;
    color: #bbb;
}

.header a,
.footer a {
    color: #bbb;
}

.jumbotron {
    background-color: #870f0f;
    color: #fff;
}

.content > .section {
    background-color: #fff;
}

.content > .section:nth-child(2n) {
    background-color: #e6e6e6;
}

#logo {
    float: left;
    height: 3em;
    width: 3em;
}

#site-name {
    float: left;
    margin-left: 0.75em;
}

#site-name > h1 {
    margin: 0;
    text-transform: uppercase;
}

#site-name > h1,
#main-menu-icon {
    /*
     * the logo is 3em, and the font-size is 1.3em.
     * we arrive at a line-height of 2.31em by dividing
     * the former by the latter and rounding to 2dp.
     *
     * 3 / 1.3 = 2.307692307692308
     *
     */
    font-size: 1.3em;
    line-height: 2.31em;
}

#main-menu-icon {
    float: right;
    text-decoration: none;
    display: block;
    padding: 0 1em;
}

.navigation ul {
    list-style-type: none;
    padding: 0;
}

.navigation a {
    text-decoration: none;
    padding: 1em;
    display: block;
}

.navigation a:hover,
.navigation a:active,
.navigation a:focus {
    background-color: #121212;
    color: #fff;
}

.hidden {
    display: none;
}

.skills {
    list-style-type: none;
    padding: 0;
}

.skill {
    color: #fff;
    margin: 0.75em 0.75em 0.75em 0;
    padding: 0.5em;
    display: inline-block;
}

.hot {
    background-color: #870f0f;
}

.warm {
    background-color: #ff6600;
}

.mild {
    background-color: #ffcc00;
}

.uni-module {
    background-color: #00b147;
}

img {
    max-width: 100%;
}

/*
 * FORM STYLING (below)
 *
 * Derived from My First HTML Form (MDN)
 * https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form
 *
 */
form {
    /* To see the outline of the form */
    padding: 1em;
    border: 1px solid #e6e6e6;
    /* border radius: some old browsers require prefixes (https://developer.mozilla.org/en/docs/Web/CSS/border-radius) */
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
    border-radius: 1em;
    max-width: 35em;
}

form div + div {
    /* add a top margin to all immediate div children of 'form divs'. */
    margin-top: 1em;
}

label {
    display: inline-block;
    margin-bottom: 0.2em;
}

button, input, textarea {
    padding: 0.5em;
}

input, textarea {
    /* make all text input as wide as it's containg element */
    width: 100%;

    /* https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Styling_HTML_forms */
    -webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
    -moz-box-sizing: border-box; /* For legacy (Firefox <29) Gecko based browsers */
    box-sizing: border-box;

    /* To harmonize the look & feel of text field border */
    border: 1px solid #999;
}

input:focus, textarea:focus {
    /* To give a little highlight on active elements */
    border-color: #161616 /* #000 */;
}

#msg {
    height: 7em;
}

#footer .navigation img{
    width: 2em;
    vertical-align: middle; /* http://stackoverflow.com/a/489394 */
}

#footer .navigation ul li a span {
    margin-left: 0.5em;
}

.copyright{
    font-size: 0.75em;
}

@media screen and (min-width: 320px) {
    .navigation > ul > li {
        display: inline-block;
        width: 49%;
    }
}

@media (min-width: 400px) {
    .jumbotron {
        font-size: 1.1em;
    }
}

@media screen and (min-width: 500px) {
    .navigation > ul > li {
        display: inline-block;
        width: 32%;
    }
}

@media (min-width: 550px) {
    .jumbotron {
        font-size: 1.25em;
    }
}

@media (min-width: 660px) {
    .jumbotron {
        font-size: 1.5em;
    }

    .grid {
        clear: both;
        padding: 0px;
        margin: 0px;
    }

    .col {
        display: block;
        float:left;
        margin: 1% 0 1% 1.6%;
    }

    .col:first-child {
        margin-left: 0;
    }

    .span_1_of_3 {
        width: 32.26%;
    }

    .col.span_1_of_3:nth-child(3n+1) {
        clear:both;
        margin-left: 0;
    }
}

@media screen and (min-width: 850px) {
    header {
        float: left;
        width: 27.5%;
    }

    .navigation > ul > li {
        display: inline-block;
        width: auto;
    }

    #main-menu.hidden {
        display: block;
        height: auto;
    }

    #main-menu-icon {
        display: none;
        visibility: hidden;
    }
}

@media screen and (min-width: 978px) {
    .jumbotron {
        font-size: 2em;
    }
}