@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;
}

.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;
}

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;
}