/*---------------------------------

version: 0.1
author: Jamie Knight
contact: jamie@jkg3.com

Please feel free to learn from this code. Do not copy this code in whole, if you wish for a copy of this code, or any explanation plese contact me at the above adress. 
----------------------------------*/


/* =General
-----------------------------------------------------------------------------*/


/* Remove padding and margin */
* {
  margin: 0;
	padding: 0;
}

/* Put it back on certain elements */
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, fieldset, table, ul {
  margin: 1em 0;
}

h6 {
	font-size:14px;
	color: #999;
	line-height:18px;
	padding-bottom:5px;
	font-weight:100;
}

/* Class for clearing floats */
.clear {
	clear:both;
}


/* Remove border around linked images */
img {
	border: 0;
}

a { outline:none; }



/* Basics
-----------------------------------------------*/

body {
	
	background: #FFFFFF; /* important to set for accsesbility */
	font-size: 0.75em; /* using ems to allow for font scaling in IE6 etc */
	font-family: Arial, Helvetica, sans-serif;

}


/* wrapper for styling purposes, i feel dirty...... */ 

#wrapper {

	width: 930px;
	margin:0 auto;

}

a:focus {

	text-decoration: underline;
	color: #000000;

}

/* Main Navigation
-----------------------------------------------*/

#navigation li, #nations li  {

	display: inline;
	border-left: 2px #cccccc solid;
	padding: 0px 5px;
	font-size: 1.17em;

}


#navigation .first, #nations .first {

	border: none;
	
}

#navigation a, #nations a  {

	text-decoration: none;
	color: #a2a2a2;
	 
	 /* Add the transition properties! */
    -webkit-transition-property:  color;
    -webkit-transition-duration: 200ms;
    /* you can control the acceleration curve here */
    -webkit-transition-timing-function: ease-in-out; 

}

#navigation a:hover, #nations a:hover  {


	color: #666666;

}

/* Branding
-----------------------------------------------*/

#branding {

	border-bottom: 1px solid #999999;

}

#branding h1 {

	background: url(../images/branding.jpg) top left no-repeat;
	text-indent: -500000px;
	height: 95px;

}

/* nations
-----------------------------------------------*/

#nations  {

	text-align: right;

	
}

/* mast
-----------------------------------------------*/

#mast {

	margin-top: 10px;
} 

#mast-main, #proskillsINTRO {

	width: 640px;
	float: left;
	display:inline;
}

#mast-sub {

	width: 280px;
	float: right;
	display: inline;
}

#mast-sub img {

	margin-bottom: 2px;
	
}

#subContent {

	clear: both; //just to stop a little layout breakage

}

/* layout
-----------------------------------------------*/

#subContent {

	float:left;
	width: 330px;
	margin: 0px;
	padding: 0px;

}

#mainContent {

	float: right;
	width: 575px;
	border-left: dotted 2px #CCCCCC;
	padding-left: 10px;


}


#home-news, #home-events {

	width: 280px;
	float: right;

}

#home-events {

	margin-right: 10px;


}

/* basic section styling
-----------------------------------------------*/

#sections li , #home-news li, #home-events li {

	list-style: none;


}

#home-news li, #home-events li {

	height: 86px;


}


#home-events h2, #home-news h2 {

	background: #0000aa;

}

#sections li {

	display: block;
	background: #0000cc;
	padding: 14px 13px 1px 8px;
	margin-top: 12px;
	height: 90px;

}

#sections h2 {

	margin-bottom: 0px;
	padding-bottom: 2px;
	font-weight: 100;
	font-size: 1.50em;
	//position: relative;
	

}

#sections p {

	margin-top: 0px;
	padding-top: 0px;
	width: 200px;
}

#sections a {

	color: #FFFFFF;
	text-decoration: none;

}

#mainContent ol {

	padding-left: 0px;
	margin-left: 0px;
	clear: both;
	width: 100%;
	
}


#sections a:hover {

	color: #000000;

}

li#stakeholder-section img, li#employers-section img, li#careers-section img  {

	float: right;


}

li#stakeholder-section {

	background: #222266;
	color: #FFFFFF;

}

li#employers-section {

	background: #005C9D;
	color: #FFFFFF;

}

li#careers-section {

	background: #5C335C ;
	color: #FFFFFF;

}


/* events & news styling
-----------------------------------------------*/



#home-events h2, #home-news h2 {

	color: #FFFFFF;
	font-weight: 100;
	padding-top: 10px;
	margin-top: 13px;
	padding-left:4px;
	
}

#home-events h2 {

	background: #ff9900;

}


#home-news h2 {

	background: #338533;

}

#home-events h3, #home-news h3 {

	font-size: 1.00em;
	margin-bottom: 0px;
	padding-bottom: 0px;
	
}

#home-events p, #home-news p {

	padding-top: 2px;
	margin-top: 0px;
	color: #646464;
	
}

#home-events li, #home-news li {

	border-bottom: 2px dotted #CCCCCC;

}

#home-events .additional, #home-news .additional {

	text-align: right;
	padding-bottom: 0px;
	margin-bottom: 1px;
	padding-top: -2px;

}

#home-events .additional a, #home-news .additional a {

	color: #8AB0C5;
	text-decoration: none;

}

/* footer
-----------------------------------------------*/


#footer {

	clear: both;
	border-top: 1px solid #999999;
	color: #646464;
	margin-top: 20px;

}

#footer p {

	width: 370px;

}

/* search
-----------------------------------------------*/

#search {

	text-align: right;
	margin-top: -70px;
}


#search legend, #search label {

	display: none; //I feel dirty

}

#search fieldset {

	border: none;

	
}

#home-news li , #home-events li  {

	//height: 85px;

}

#home-news h3 a, #home-events h3 a {

	text-decoration: none;
	color: #666666;
}

#SEO {
	 	width: 250px;
		height: auto;
		margin-left: 310px;
		margin-top: -100px;
		margin-bottom: 50px;
		text-align: center;
}

#SEO p {
		color: #777777;
		font-size:14px;
}