/*
--- OPTIMATION
--- Typography Stylesheet
--- By James Barnsley of PlasticStudio
--- May 2013
*/

/* -- SECTION COLOURS
 dark blue:	04003e
 blue: 		00b8f1
 orange:	f58025
 red: 		d71920
 green:		5fbb46
 purple:	9251a0
*/

	

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,300,400,700,800,600);

html, 
body {
	/*font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; */
	font-family: 'Open Sans', Helvetica, Arial;
	font-weight: 400;
	font-size: 13px;
}




/* ============================================================================================================== */
/* ================================================================================ STANDARD ELEMENTS =========== */
/* ============================================================================================================== */


	
/* --- EMAIL STAFF MEMBER --- */

.staff-email .icon.email {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-right: 8px;
	background: url('../images/icons-small.png') -58px -10px no-repeat;
	opacity: 0.3;}
	
.staff-email a:hover .icon.email {
	opacity: 1;}
	

	
/* --- SEARCH RESULTS --- */

.typography .gsc-webResult.gsc-result, 
.typography .gsc-results .gsc-imageResult {
	padding: 0 0 25px 0;
	margin: 0 0 20px 0;
	border: none !important;
	border-bottom: 2px solid #CCCCCC !important;}

.typography .gsc-result .gs-title {
	height: auto;}

.typography .gs-result .gs-title, 
.typography .gs-result .gs-title *	{
	text-decoration: none;}
	
.typography .gs-webResult.gs-result a.gs-title:link, 
.typography .gs-webResult.gs-result a.gs-title:link b, 
.typography .gs-imageResult a.gs-title:link, 
.typography .gs-imageResult a.gs-title:link b {
	font-family: 'Open Sans', Helvetica, Arial;
	font-size: 18px;
	color: #04003E;
	text-decoration: none;}
	
.typography .gs-webResult.gs-result a.gs-title:hover, 
.typography .gs-imageResult a.gs-title:hover {
	color: #00B8F1;}
	
.typography .gs-webResult div.gs-visibleUrl, 
.typography .gs-imageResult div.gs-visibleUrl {
	color: #AAAAAA;}
	


/* ========================================= IMAGES === */

#main .left.panel img.shrink-image-to-fit {
	width: 100%;
	height: auto;}
	
	

	
	

/* ========================================= SECTION COLOURS === */
 
.typography .blue {		color: #00b8f1; }
.typography .dark-blue {	color: #04003e; }
.typography .orange {	color: #f58025; }
.typography .red {		color: #d71920; }
.typography .green {		color: #5fbb46; }
.typography .purple {	color: #9251a0; }
.typography .yellow {	color: #ffd828; }
.typography .grey {		color: #83a3b3; }

.typography .tag-blue { 		background-color: #00b8f1; }
.typography .tag-dark-blue {	background-color: #04003e; }
.typography .tag-orange {	background-color: #f58025; }
.typography .tag-red {		background-color: #d71920; }
.typography .tag-green {		background-color: #5fbb46; }
.typography .tag-purple {	background-color: #9251a0; }
.typography .tag-yellow {	background-color: #ffd828; }
.typography .tag-grey {		background-color: #83a3b3; }

.typography .tag-blue,
.typography .tag-dark-blue,
.typography .tag-orange,
.typography .tag-red,
.typography .tag-green,
.typography .tag-purple,
.typography .tag-yellow,
.typography .tag-grey {
	font-size: 1.1em;
	color: #fff; 
	text-transform: uppercase;
	display: inline-block; 
	padding: 5px 14px !important; 
	margin: 0 0 10px; }

.white-text {
	color:#fff;
}

.grey-text {
	color: #99998f;
}

.typography .panel-title {
	margin-bottom: 20px;
}

/* 
.typography .blue-section-colour-me {		color: #00b8f1; }
.typography .dark-blue-section-colour-me {	color: #022b50; }
.typography .orange-section-colour-me {		color: #f58025; }
.typography .red-section-colour-me {			color: #d71920; }
.typography .green-section-colour-me {		color: #5fbb46; }
.typography .purple-section-colour-me {		color: #9251a0; }
.typography .yellow-section-colour-me {		color: #ffd828; }
.typography .grey-section-colour-me {		color: #83a3b3; } 

.blue .section-background-colour-me {			background-color: #00b8f1; }
.dark-blue .section-background-colour-me {		background-color: #04003e; }
.orange .section-background-colour-me {			background-color: #f58025; }
.red .section-background-colour-me {			background-color: #d71920; }
.green .section-background-colour-me {			background-color: #5fbb46; }
.purple .section-background-colour-me {			background-color: #9251a0; }
.yellow .section-background-colour-me {			background-color: #ffd828; }
.grey .section-background-colour-me {			background-color: #83a3b3; } 
*/


	

/* ============================================================================================================== */
/* ========================================================================================= HEADINGS =========== */
/* ============================================================================================================== */




/* ============================= HEADINGS === */

.typography h1 {
	font-size: 2.4em;
	font-weight: 400;
	padding-top: 3px;
	padding-bottom: 10px;
	color: #999999;
}

.typography h2 {
	font-size: 1.8em;
	font-weight: 400;
	color: #494949;
	padding-top: 15px;
	padding-bottom: 20px;
}

.typography h3 {
	font-size: 1.5em;
	font-weight: 400;
	color: #494949;
	padding-top: 10px;
	padding-bottom: 5px;
}
	
.typography h4 {
	font-size: 1.2em;
	font-weight: 600;
	color: #00b8f1;
	padding-top: 6px;
	padding-bottom: 5px;
}
	
.typography h5 {
	font-size: 1em;
	font-weight: 600;
	color: #494949;
	padding-bottom: 5px;
}
	
.typography .no-padding {
	padding: 0;
}

	

/* ========================================= BODY COPY === */

.typography p,
.typography li {
	color: #555555;
	padding: 5px 0; }
	
.typography li {
	margin-left: 15px; }
	
.typography ul li ul {
	padding-left: 15px; }

.typography .left ul,
.typography .full-width ul {
	margin-left: 20px;}

.typography .left ul li,
.typography .full-width ul li {
	padding-left: 5px;}

.typography ul.arrow-list li {
	background: url('../images/list-item-blue-arrow.gif') no-repeat 0 8px;
	list-style-type: none; 
	padding-left: 20px; }


/* ========================================= PULLQUOTES === */

.typography blockquote {
	padding: 5px 17px 35px;
	background: #EEEEEE;
	width: 28%;
	float: left;
	margin: 10px 20px 10px 0;
	border-top: 1px solid #00B8F1;
	font-size: 1.1em;
	line-height: 1.4em;
	font-style: italic;}

.typography blockquote.right {
	float: right;
	margin: 10px 0px 10px 20px;}
	



/* ========================================= LINKS === */

a,
.obfuscation,
.staff-obfuscation {
	color: #00b8f1;
	text-decoration: none;}

a:hover,
.obfuscation:hover {
	color: #f57f3b;}	
	
table.grey-cells .readmore {
	bottom: 0;
	right: 0;
	background: url('../images/icon-readmore.png') 0 -36px no-repeat;
	width: 36px;
	height: 36px;
	display: block;
	position: relative;}
	
table.grey-cells .readmore:hover {
	width: auto;}
	
table.grey-cells .readmore .icon {
	background: url('../images/icon-readmore.png') 0px 0px no-repeat;
	width: 36px;
	height: 36px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;}
	
table.grey-cells .readmore .liner {
	display: block;
	height: 36px;
	position: absolute;
	top: 0;
	left: 18px;
	width: 0;
	padding: 0;
	background: url('../images/icon-readmore.png') right -72px no-repeat;}
	
table.grey-cells .readmore .liner .text {
	padding: 0;
	display: none;}
	
table.grey-cells .readmore:hover .liner .text {
	padding: 8px 15px 0 20px;
	display: inline-block;}
	
table.grey-cells .readmore:hover .liner {
	width: auto;}
	


/* ========================================= BUTTONS === */

.blue-button {
	padding: 0.3em 0.6em;
	background: #04003E;
	color: #FFFFFF;
}

.blue-button:hover {
	background: #00B8F1;
	color: #FFFFFF;
}

.readmore {
	color: #00b8f1;
	border: 2px solid #00b8f1;
	text-transform: uppercase;
	font-weight: 700;
	display: inline-block;
	padding: 6px 14px;
}

.blue .readmore { border: 2px solid #00b8f1; }
/* 
.dark-blue .readmore.section-colour-me { border: 2px solid #022b50; }
.orange .readmore.section-colour-me { border: 2px solid #f58025; }
.red .readmore.section-colour-me { border: 2px solid #d71920; }
.green .readmore.section-colour-me { border: 2px solid #5fbb46; }
.purple .readmore.section-colour-me { border: 2px solid #9251a0; }
.yellow .readmore.section-colour-me { border: 2px solid #ffd828; }
.grey .readmore.section-colour-me { border: 2px solid #83a3b3; } */

.readmore:hover {
	color: #f57f3b;
	border-color: #f57f3b !important;
	cursor: hand;
	cursor: pointer;
}


	

/* ========================================= CUSTOMISE === */

#background-panel .content h1 {
	font-size: 2.4em;
	font-weight: 700;
	text-transform: uppercase;
	color: #FFFFFF;
	line-height: 1em;}
	
#background-panel .content h2 {
	font-size: 1.5em;
	font-weight: 700;
	text-transform: uppercase;
	color: #FFFFFF;
	padding-bottom: 3px;}

	
table.grey-cells h2 {
	padding-top: 0;}

#foot h4 {
	color: #FFFFFF;
	font-weight: 600;
	text-transform: uppercase;
	padding-bottom: 4px;
	font-size: 1.1em;}

	

/* ============================================================================================================== */
/* =========================================================================================== TABLES =========== */
/* ============================================================================================================== */
	
table td {
	vertical-align: top;}
	
table.grey-cells td {
	border-style: solid;
	border-color: #FFFFFF;
	border-width: 10px;
	padding: 20px;
	background: #EEEEEE;}
	
table.grey-cells td .cell-wrapper {
	position: relative;}
	
table.grey-cells tr td:first-child {
	border-left: 0;}
	
table.grey-cells tr td:last-child {
	border-right: 0;}