/*
 * IMPORT FONTS
 *
 * load the Ubuntu font from google
 */
@import url(https://fonts.googleapis.com/css?family=Ubuntu:400,300);

/*
 * Element: BODY
 *
 * apply generic styles to the body
 */
body {
	/* set the base font and size for the whole page */
    font-family: 'Ubuntu', sans-serif;
	font-size: 16px;
    
    /* don't set a width, allowing the body to keep growing, but we don't 
     * want the width to decrease below 320px (i.e. iPhone 3GS) */
	min-width: 320px;
}

/* 
 * Element: IMG, OBJECT
 *
 * ensure that, by default, images and objects can not be wider than their
 * parent. bit of a reset/normalize technique really 
 */
img, object {
	max-width: 100%;
}

/*
 * Class: SECTION
 *
 * the section class represents a section of content i.e. the bands that
 * appear down the page
 */
.section {
    padding: 3em 1em;   
}

/*
 * all of our main content links are likely to reside within .section
 * classes so set them up at this level. set active/visited/hover/active
 * uniformly here then adust as necessary
 */
.section a:link, 
.section a:visited,
.section a:hover,
.section a:active {
	color: #000;
	text-decoration: none;
}

/*
 * underline hover/active links
 */
.section a:hover, 
.section a:active {
	text-decoration: underline;
}

/*
 * change the colour of active links
 */
.section a:active {
	color: #555;
}

/*
 * set the background colour of every EVEN div.section child of the body 
 * element 
 */
body div.section:nth-child(odd){
    background-color: #fff;   
}

/*
 * set the background colour of every ODD div.section child of the body
 * element 
 */
body div.section:nth-child(even){
    background-color: #e6e6e6;   
}

/*
 * Class: INSIDE
 *
 * the inside class is used to center the content on larger viewports. it
 * sets a maximum width and then auto left/right margins
 */
.inside {
    max-width: 978px;
	margin: 0 auto;
}

/*
 * Class: GROUP
 *
 * there is no css to apply directly to the group class, but we want to
 * ensure that floats are cleared after it so we use the :after 
 * pseudo-selector.
 *
 * see https://css-tricks.com/snippets/css/clear-fix/
 */
.group:after {
  content: "";
  display: table;
  clear: both;
}

/*
 * Class: RED
 *
 * set the background colour of all .red elements to red and the font colour
 * to white.
 *
 * NOTE: specifity rules suggest that div elements that are both .red and
 * .section need to be declared explicitly.
 */
.red,
body div.section.red {
    background-color: #870f0f;
    color: #fff;
}

/* 
 * set the .red links to white with no underline
 */
.red a:link,
.red a:visited,
.red a:hover,
.red a:active {
	color: #fff;
	text-decoration: none;
}

/* 
 * add an underline to .red links when hovered over
 */
.red a:hover{
	text-decoration: underline;
}

/*
 * Class: CHARCOAL
 *
 * set the background colour of all .charcoal elements to charcoal and the 
 * font colour to white.
 */
.charcoal {
	background-color: #161616;
    color: #fff;
}

/* 
 * set the .charcoal link text to grey with no underline
 */
.charcoal a:link, 
.charcoal a:visited,
.charcoal a:hover,
.charcoal a:active {
	color: #bbb;
	text-decoration: none;
}

/* 
 * change the background colour to dark charcoal and the font to white
 */
.charcoal a:hover{
	background-color: #121212;
	color: #fff;
}

/*
 * Class: GRID
 *
 * used to idicate that the element is the parent of columns, it clears 
 * floats and sets the padding and margins to 0.
 */
.grid {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*
 * Class: COL
 *
 * used to represent columns in the grid layout. sets the display:block - 
 * meaning that, when rendered, no other element will share the same line as
 * the element. then floats the element to the left and applies 1% top and 
 * bottom margins, 0 right and 1.6% left.
 */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}

/*
 * reset the left margin of the first column in the layout to 0 because we
 * want to line it up with the parent''s edge. this should work in all 
 * browsers except IE6 and lower
 */
.col:first-child { 
	margin-left: 0; 
}

/*
 * Class: SPAN_2_OF_2
 *
 * two column layout with the element spanning both columns. set the width
 * to 100%
 */
.span_2_of_2 {
	width: 100%;
}

/*
 * Class: SPAN_1_OF_2
 *
 * two column layout with the element spanning one column. set the width
 * to 49.2%
 */
.span_1_of_2 {
	width: 49.2%;
}

/*
 * Class: SPAN_3_OF_3
 *
 * three column layout with the element spanning all three columns. set the
 * width to 100%
 */
.span_3_of_3 {
	width: 100%; 
}

/*
 * Class: SPAN_2_OF_3
 *
 * three column layout with the element spanning two of the columns. set the
 * width to 66.13%
 */
.span_2_of_3 {
	width: 66.13%; 
}

/*
 * Class: SPAN_1_OF_3
 *
 * three column layout with the element spanning one of the columns. set the
 * width to 32.26%
 */
.span_1_of_3 {
	width: 32.26%; 
}

/*
 * RICKY CHANGE 
 *
 * Problem:     4th box was moving down a row, but was being displayed on 
 *				it's own and to the right
 * Solution:    using :nth-child i can get every 3n+1th child (1, 4, 7, 10
 *				etc) and clear both. As it is now the first box in a row, I
 *				need to remove the left margin as well.
 */
.col.span_1_of_3:nth-child(3n+1) { 
	clear:both; 
	margin-left: 0;
}

#header {
	padding: 0.5em;
}

.header-img {
	width: 49%;	
}

.main-nav ul,
.footer ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.main-nav ul li,
.footer ul li {
	float: left;
	text-transform: none;
}

.main-nav ul li,
.footer ul li { 
	width: 200px;
}

.main-nav ul li > a,
.footer ul li > a{
	display: block;
	padding: 16px;
}


.skills-category ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

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

.skill:last-child {
	margin-right: 0;
}

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

.warm {
	background-color: #ff6600;
	color: #fff;
}

.mild {
	background-color: #ffcc00;
	color: #fff;
}

.green {
	background-color: #00b147;
	color: #fff;
}

.copyright{
	font-size: 0.75em;
}

#footer img{
	width: 32px;
}

#footer ul li a span {
	visibility: hidden;
}

#footer ul li a span {
	display: none;
}

/* 
 * 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: 1em;
    max-width: 35em;
}

form div + div {
    margin-top: 1em;
}

label {
    /* To make sure that all label have the same size and are properly align */
    display: inline-block;
    width: 90px;
	
    /* text-align: right;  */
	text-align: left;
}

input, textarea {
    /* To make sure that all text fields have the same font settings
       By default, textareas have a monospace font */
    /* font: 1em sans-serif; */

    /* To give the same size to all text field */
    /* width: 300px; */
	
	/* 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 */;
}

label{
 	padding-bottom: 0.2em;   
}

/* https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Styling_HTML_forms */
button, input, select, textarea {
  	font-family : inherit;
  	font-size   : 100%;
    padding: 0.5em;
}


#msg {
	height: 7em;
}

form .subject {
	display: none;
}

#beta-notice {
  background-color: #bbb;
  color: #fff;
  display: block;
  padding: 0.66em;
  margin-bottom: 1em;
}

/*
 * make these links look like standard links
 */
.section a.standard-link:link, 
.section a.standard-link:visited,
.section a.standard-link:hover,
.section a.standard-link:active {
	color: #00F;
	text-decoration: underline;
}

/*
 * change the pointer for hover and active links
 */
.section a.standard-link:hover, 
.section a.standard-link:active {
        cursor: pointer;
}

/*
 * change the colour of visited links
 */
.section a.standard-link:visited {
        color: #800080;
}

/*
 * Media Query: MAX-WIDTH: 480px
 *
 * react to the viewport being smaller than 480px
 */
@media only screen and (max-width: 480px) {
	

}

/*
 * Media Query: MIN-WIDTH: 400px
 *
 * react to the viewport being larger than 400px
 */
@media (min-width: 400px) {  
    /*
	 * Class: RED
	 *
	 * increase the font size for .red text
	 */
	.red {
		font-size: 1.1em;
  	}
	
	.main-nav ul li {
		width: 50%;
  	}
	
  	.footer ul li {
		width: auto;
  	}
}

/*
 * Media Query: MAX-WIDTH: 400px
 *
 * react to the viewport being smaller than 400px
 */
@media (max-width: 400px) {  
	#footer ul li {
		width: 100%;
	}
	
	#footer ul li a span {
		visibility: visible;
	}

	#footer ul li a span {
		display: inline;
	}
}

/*
 * Media Query: MIN-WIDTH: 550px
 *
 * react to the viewport being larger than 550px
 */
@media (min-width: 550px) {  
    
	/*
	 * Class: RED
	 *
	 * increase the font size .red text
	 */
  	.red {
		font-size: 1.25em;
  	}
	
	.main-nav ul li{
		width: 33.3333%;
  	}
}

/*
 * Media Query: MAX-WIDTH: 660px
 *
 * react to the viewport being smaller than 660px
 */
@media (max-width: 660px) {
	/*
 	 * Class: COL
	 * 
	 * reset the margin-left value to 0 because the columns will be full
	 * width
	 */
	.col { 
		margin: 1% 0 1% 0%;
	}

	/*
 	 * Class: SPAN_X_OF_Y
	 * 
	 * reset the widths of all columns to 100%
	 */
    .span_2_of_2,
	.span_1_of_2,
	.span_3_of_3,
	.span_2_of_3,
	.span_1_of_3 {
		width: 100%; 
	}
	
	#main-nav {
		display: none;
	}
}

/*
 * Media Query: MIN-WIDTH: 660px
 *
 * react to the viewport being larger than 660px
 */
@media (min-width: 660px) {
  	/*
	 * Class: RED
	 *
	 * increase the font size for .red text
	 */
	.red {
		font-size: 1.5em;
  	}
	
	.main-nav{
		display: block;
  	}
  
  	.main-nav ul li {
		width: auto;
  	}
    
	.header-img {
		/* at this point we want to stop the logo from growing. We know that it 
		 * would otherwise be 49% of 660px e.g. 323.4px so we set it to that. I'm
		 * sure that this isn't the best method available so I will return to this
		 * later on, having had a chance to fully investigate responsive images. */
		max-width: 323px;	
	}
	
	#menu{
		display: none;
	}
}

/*
 * Media Query: MIN-WIDTH: 978px
 *
 * react to the viewport being larger than 978px
 */
@media (min-width: 978px) { 
	/*
	 * Class: RED
	 *
	 * increase the font size for .red text
	 */
	.red {
		font-size: 2em;
	}
}