/*
 * Global Fire Training and Consultancy
 * Main Stylesheet
 *
 * Author:		Paul Stanton
 * Author URI:	http://coffeepowered.co.uk
 *
 * Please feel free to use any of this stylesheet for your own educational
 * purposes however please use common courtesy and not copy the design verbatim.
 */

@import url("reset.css");

/* FONTS -------------------------------------------------------------------- */

@font-face {
	font-family:'LeagueGothicRegular';
	src:url('../fonts/league_gothic-webfont.eot');
	src:local('☺'), url('../fonts/league_gothic-webfont.woff') format('woff'), 
	url('../fonts/league_gothic-webfont.ttf') format('truetype'), 
	url('../fonts/league_gothic-webfont.svg#webfontPgkb7mf7') format('svg'); 
	font-weight:normal;
	font-style:normal; }
	
header.branding h2 {
	font-family:LeagueGothicRegular, impact;
	text-transform:uppercase; }

/* LAYOUT ------------------------------------------------------------------- */

html {
	background-color:#000;
	background-image:url(../img/firefighters.jpg);
	background-position:top left;
	background-repeat:no-repeat;
	color:#fff;
	font-size:12px;
	height:100%;
	overflow:auto; }

body {
	/*background-image:url(../img/grid.png);*/
	background-position:top left;
	background-repeat:repeat-y;
	font:100%/1.5 helvetica, arial, sans-serif;
	height:100%;
	padding:42px 0 0 40px; /* TODO:change this to margin once grid is removed */ }

.container-main {
	float:left;
	overflow:auto; }
	
/* HEADINGS ----------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
	font-weight:normal; }
	
h1 {
	font-size:24px;
	line-height:21px;
	margin-bottom:15px; }

h2 {
	font-size:18px;
	line-height:21px;
	margin-bottom:14px; }

h3 {
	font-size:16px;
	line-height:21px;
	margin-bottom:15px; }

h4 {
	font-size:14px;
	margin-bottom:16px; }

h5 {
	font-size:12px;
	font-weight:bold;
	margin-bottom:15px; }

h6 {
	font-size:16px;
	font-weight:bold; }

/* CONTENT ------------------------------------------------------------------ */

p, ul, ol {
	margin-bottom:17px; }

ul, ol {
	list-style-position:inside; }
	
ul {
	list-style-type:disc; }
	
ol {
	list-style-type:decimal; }
	

/* LINKS -------------------------------------------------------------------- */
	
a,
a:active,
a:hover,
a:link,
a:visited {
	border-bottom:1px dashed #fff;
	color:#fff;
	text-decoration:none; }
	
/* HEADER ------------------------------------------------------------------- */

.branding {
	background-image:url(../img/logo.png);
	background-position:top left;
	background-repeat:no-repeat;
	display:block;
	height:95px;
	padding:0 0 0 110px;
	vertical-align:middle; }
	
.branding h2 {
	font-size:48px;
	font-weight:normal;
	position:relative;
	text-transform:uppercase;
	text-shadow:0 0 10px rgba(0,0,0,.7);
	top:32px; }

/* NAVIGATION --------------------------------------------------------------- */

nav.main {
	left:146px;
	position:absolute;
	top:105px; }
	
nav.main li {
	display:inline;
	margin:0 0 0 5px;
	position:relative; }

nav.main li a,
nav.main li a:active,
nav.main li a:hover,
nav.main li a:link,
nav.main li a:visited {
	border-bottom:0; }
	
nav.main li a {
	font-size:15px;
	padding:3px;
	text-transform:uppercase;
	text-shadow:0 0 10px rgba(0,0,0,.7); }

nav.main li:not(:last-child):after {
	content:'•';
	font-size:18px;
	margin-left:10px; }

nav.main li a:hover,
nav.main li a.selected {
	background-color:#fff;
	-o-border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	-o-box-shadow:0px 0px 10px #000;
	-moz-box-shadow:0px 0px 10px #000;
	-webkit-box-shadow:0px 0px 10px #000;
	box-shadow:0px 0px 10px #000;
	border-radius:4px;
	color:#000;
	text-shadow:none;
	-webkit-transition-property:background-color, box-shadow, color;
	-webkit-transition-duration:0.2s;
	-webkit-transition-timing-function:ease-out; }
	
nav.main li a.selected {
	font-weight:bold; }
	
nav.main li a.selected:after {
	border-width:10px 10px;
	border-style:solid;
	border-color:#fff transparent transparent;
	content:'\00a0';
	display:block;
	margin:0 auto;
	position:absolute;
	top:1em;
	height:0;
	width:0; }

nav.main li a[href='/'].selected:after 		{ left:16px; }
nav.main li a[href='/services'].selected:after 		{ left:30px; }
nav.main li a[href='/clients'].selected:after 		{ left:25px; }
nav.main li a[href='/testimonials'].selected:after 	{ left:50px; }
nav.main li a[href='/contact'].selected:after 		{ left:30px; }

/* CONTENT CONTAINERS ------------------------------------------------------- */

.content-main {
	background-color:#000;
	background-color:rgba(0,0,0,.65);
	color:#efefef;
	margin:24px 0 18px 160px;
	overflow:auto;
	padding:18px 20px 1px 20px;
	width:420px; }

.content-main h1 {
	line-height:40px;
	background-image:
		-moz-linear-gradient(30% 0% 0deg,rgba(0,0,0,.5), rgba(0,0,0,0)),
		-webkit-gradient(linear, 0% 30%, 0% 0%, from(rgba(0,0,0,.5)), to(rgba(0,0,0,0)))
	; }
	
.content-main + .content-main {
	margin-top:0; }

.content-sub {
	margin-top:0; }
	
/* ASIDE -------------------------------------------------------------------- */

aside {
	float:left;
	margin:24px 0 0 20px; }
	
aside dl.images a {
	border:0; }

aside dl.images dt {
	background-color:#000;
	background-color:rgba(0,0,0,.5);
	margin-bottom:-10px;
	padding:18px 18px 14px 18px; }
	
aside dl.images dd {
	font-size:18px;
	left:25px;
	position:relative;
	top:-38px;
	text-transform:uppercase; }

/* PAGE SPECIFIC STYLES ----------------------------------------------------- */
	
/* INDEX PAGE */

#homepage .content-sub h2 {
	display:none;
	visibility:hidden; }

.standards {
	float:right; }
	
.standards li {
	display:inline-block; }

.standards a {
	background-position:top left;
	background-repeat:no-repeat;
	border:0;
	display:block;
	height:36px;
	margin-left:10px;
	text-indent:-9999px; }

.standards a[title='NVQ'] { 
	background-image:url(../img/logo_nvq.png);
	width:44px; }
	
.standards a[title='NFPA'] {
	background-image:url(../img/logo_nfpa.png);
	background-position:top right;
	width:40px; }

.standards a[title='OPITO'] {
	background-image:url(../img/logo_opito.png);
	width:37px; }

/* CLIENTS */

#clients .client {
	display:block; }

#clients .client:not(:last-child) {
	margin-bottom:36px; }
	
#clients ul.meta {
	background-color:rgba(0,0,0,.4);
	color:#ccc;
	float:left;
	font-weight:bold;
	letter-spacing:1px;
	line-height:26px;
	list-style-type:none;
	margin:0 8px 0 0;
	text-indent:5px;
	text-transform:uppercase;
	width:100px; }

#clients ul.meta li:last-child {
	border-bottom:0; }

#clients .images {
	margin-bottom:12px; }

#clients .images li {
	display:inline-block;
	height:90px;
	margin-right:16px;
	width:90px; }

#clients .images li:last-child {
	margin-right:0; }
	
#clients .images a {
	border:0; }
	
#clients .client .images img:hover {
	-moz-transform:scale(1.1);
	-moz-transition:all 0.2s ease-out;
	-webkit-transform:scale(1.1);
	-webkit-transition:all 0.2s ease-out; }
	
/* SERVICES */

#services .content-main h3 {
	color:#c96; }
	
/* CONTACT */

label {
	display:block;
	font-weight:bold;
	line-height:36px;
	width:100%; }

label span {
	color:#999;
	font-weight:normal; }
	
label.error {
	background-color:rgba(255,0,0,.7);;
	text-indent:5px; }
	
label.error span {
	background-color:yellow;
	color:#000;
	margin-left:10px;
	padding:2px;
	-o-border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px; }
	
input,
textarea {
	background-color:rgba(255,255,255,.3);
	border:0;
	color:#fff;
	padding:5px; }
	
input[type="text"] {
	width:270px; }
	
textarea {
	width:410px; }

.success {
	background-color:green;
	padding:3px; }

#contact form {
	margin-bottom:19px;
	overflow:hidden;
	position:relative;
	left:-20px;
	width:440px; }

#contact form ol {
	list-style-type:none; }

#contact form button {
	margin:10px 0 18px 0; }

#contact form label,
#contact form button,
#contact form input,
#contact form textarea {
	margin-left:20px; }

#contact .vcard ul {
	margin-bottom:20px; }
	
#contact .adr {
	float:left;
	margin-bottom:18px;
	width:200px; }

#contact .adr + .adr {
	margin-left:20px; }

/* FOOTER ------------------------------------------------------------------- */

.content-info {
	border-top:1px solid #fff;
	clear:left;
	color:#ccc;
	float:left;
	height:54px;
	margin-top:73px;
	width:95%; }

.content-info nav li {
	display:inline;
	margin-right:30px; }
	
/* END ---------------------------------------------------------------------- */