/*
Theme Name: 	Starkers
Theme URI: 		http://viewportindustries.com/products/starkers
Description: 	The totally nude Wordpress theme!
Version: 		4.0
Author: 		Elliot Jay Stocks & Keir Whitaker
Author URI: 	http://viewportindustries.com
Tags: 			starkers, naked, clean, basic
*/

/*
===========================
CONTENTS:

01 Sensible defaults
02 Typography
03 Media queries 
===========================
*/

/* ---------------------------------------------------------------------------------------------------------- 
01 Sensible defaults ----------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

@import "css/reset.css";

div,
article,
section,
header,
footer,
nav,
li					{ position:relative; /* For absolutely positioning elements within containers (add more to the list if need be) */ }
.group:after 		{ display:block; height:0; clear:both; content:"."; visibility:hidden; /* For clearing */ }
body 				{ background:#fff; /* Don't forget to style your body to avoid user overrides */ }
::-moz-selection 	{ background:#ff0; color:#333; }
::selection 		{ background:#ff0; color:#333; }

/* ---------------------------------------------------------------------------------------------------------- 
02 Typography -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
/*

14 / 16	= 		0.875em 		(14px equivalent)
16 / 16	= 		1em 			(16px equivalent)
18 / 16 = 		1.125em 		(18px equivalent)
21 / 16 = 		1.3125em 		(21px equivalent)
24 / 16 = 		1.5em 			(24px equivalent)
30 / 16 = 		1.875em 		(30px equivalent)

*/

body,
input,
textarea 			{ /* We strongly recommend you declare font-weight using numerical values, but check to see which weights you're exporting first */ }

.clearFix {clear: both;}


img.alignleft {
	float: left;
	margin: 0 10px 10px 0;
}

body {
 	font-family:Arial, Helvetica, sans-serif;
	background: url(img/body-bg.png) 0 0 #f3f3f3;
 	line-height:1.5;
	font-size:0.875em;
	color:#777;
  	margin:0;
	padding:0;
}

/* Links */
a { color: #317cc8; text-decoration:none; }
a:hover { color:#0867c7; text-decoration:underline;}
a:focus { outline: none; }
a:hover, a:active { outline: none; }

p { margin: 0 0 15px; padding: 0; }


h1, 
h2, 
h3, 
h4, 
h5, 
h6 					{ font-weight:bold; /* This helps to identify headings at the initial build stage, but you should write something more precise later on */ }

/* ---------------------------------------------------------------------------------------------------------- 
03 Media queries (using a mobile-first approach) ------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

/* 400 and up */
@media screen and (min-width:400px) {

					{ /* Place your styles here for all widths greater than 400px */ }

}

/* Retina Display */
@media screen and (-webkit-min-device-pixel-ratio:2) {

					{ /* Place your styles here for all 'Retina' screens */ }

}


/* ---------------------------------------------------------------------------------------------------------- 
04 Page Structure (Desktop) ------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

#page-wrapper {
	width:100%;
	padding: 30px 0;
	
}


#content-wrapper {
	width:960px;
	background: #fff;
	margin: 0 auto;
	-moz-box-shadow: 0 0 5px rgba(0,0,0,.1); /* drop shadow */
	-webkit-box-shadow: 0 0 5px rgba(0,0,0,.1); /* drop shadow */
	box-shadow: 0 0 5px rgba(0,0,0,.1); /* drop shadow */
	
}


.content .lhs-col {
	margin-top: 20px;
	width: 30%;
	float: left;
}


.content .lhs-col h2 {
	padding-bottom: 5px;
	margin-bottom: 10px;
}

.content .lhs-col ul li a {
	display: block;
	padding: 3px 5px 10px 0;
	color:#fff;
}

.content .lhs-col ul li a:hover {
	text-decoration: none;
	color: #00afca;
}

.content .lhs-col ul li {
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px; /* border radius */
	background: #00afca;
	margin-bottom: 5px;
	padding: 7px 5px 3px 5px;
	text-align: center;
	
}

.content .lhs-col ul li:hover {
	background: #e9ef46;
	
}


.content .rhs-col {
	width:65%;
	float: left;
	margin-left: 5%;
}

h1 {
	text-indent: -9999px;
	background: url(img/fusion-training-logo.jpg) 30px 30px no-repeat;
	width: 300px;
	height: 85px;
	display: block;
	padding: 20px;
	margin-bottom: 20px;
}


h2 {
	font-size: 2em;
	font-weight: lighter;
	color: #6a6a6a;
	

}

#menu-primary {
	width: 100%;
	border-top:1px solid #eee;
	border-bottom:1px solid #eee;
	float: left;
	background: #00afca;
}


#menu-primary li.current-menu-item a {
	color: #fff;
}


#menu-primary li a {
	color: #e9ef46;
	padding: 15px 25px;
	display: block;
	float: left;
	text-transform: uppercase;
}



#menu-primary li a:hover {
	text-decoration: none;
	color: #fff;
}




.page-intro {
	background: rgba(5, 169, 197, 0.9);
	color: #fff;
	padding: 20px;
	font-size: 1.5em; 
	border-top:1px solid #fff;
}


.page-intro h3 {
	font-weight: lighter;
}



.content {
	padding: 20px;

}

header {
	
}


/* ---------------------------------------------------------------------------------------------------------- 
05 Homepage Styles (Desktop) ------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
.courses-container .feature:nth-child(2), .courses-container .feature:nth-child(5), .publications-container .feature:nth-child(2), .publications-container .feature:nth-child(5) {
	padding: 0 25px;
}



.feature {
	float: left;
	margin: 20px 0 40px 0;
	width: 290px;
	text-align: center;

}


.feature img{
	/* border: 1px solid #ccc; */
}

.feature h3 a{
	height: 80px;
	font-size: 1.25em;
	line-height: 1.25em;
	color: #fff;
	font-weight: normal;
	background: #00b0cb;
	padding: 8px;
	display: block;
}

.feature h3 a {
	color: #fff;
	text-decoration: none;
}

.feature h3 a:hover {
	color: #000;
	background: #e9ef46;
}







#slider {
	width: 100%;
	
}




#slider .first-dot:active, .second-dot:active, .third-dot:active {
	background: #00b0cb;
}


#slider .first-dot, .second-dot, .third-dot {
	display: block;
	background: #fff;
	width: 15px;
	height: 15px;
	border-radius: 10px;
	float: left;
	margin-right: 10px;
	cursor: pointer;
}

#slider h2 {
	display: block;
	font-size: 2.125em;
	padding: 20px;
	background: rgba(255, 255, 255, 0.9);
	color: #6a6a6a;
	font-weight: lighter;
	width: 380px;
	float:left;
	position:relative;
	margin-top: 272px;
	margin-left: 0;
}


#slider .first {
	width: 100%;
	min-height: 340px;
	background: url(img/slider/001.jpg) 0 0 no-repeat;
	z-index: 5;
}

#slider .second {
	width: 100%;
	display: none;
	min-height: 340px;
	z-index: 6;
}

#slider .third {
	width: 100%;
	display: none;
	min-height: 340px;
	z-index: 7;
}


/*
body.about-us .content{
	background: url(img/about-us.jpg) 0 0 no-repeat;
	width: 960px;
	padding-top: 438px;
}
*/

img.size-large, img.size-full {
margin: 20px 0;
}

footer {
width: 100%;
text-align: center;
padding: 20px;
}


article ul li {
	list-style-type: circle;
	margin-left: 40px;
}

article a {
	color: #00afca;
}

article p {
	margin: 0 0 10px 0;
}

article h2 {
	font-size: 1.75em;
	color: #6a6a6a;
	margin: 20px 0 15px 0;
}

article h4 {
	font-size: 1.25em;
	color: #00afca;
	margin: 20px 0 7px 0;
	font-weight: normal;
}