/* =====================================================================	
	 	global.css
========================================================================		
   	Author: Ben Browning
   	Date:	Nov 2009
------------------------------------------------------------------------
	Comments
	
	Namein Convetions: all selectors are to use camelCase naming
	E.g. rightPanel, mainContent, pageWrapper etc...
	
	By defining the font-size as 100% on the body, we can then use EMs 
	to define font-size/heights/widths on elements. This is because the 
	default font-size in all browsers is 16px.
	
	(desired font-size / 16 = value in EMs)
	
	0.625em		=	10px
	0.6875em	=	11px
	0.75em 		=	12px
	0.875em		=	14px
	1em 		= 	16px
	
------------------------------------------------------------------------ */

/* =====================================================================
 	Reset
	Eric Meyers reset reloaded - http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
----------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	/*vertical-align: baseline;*/
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}



/* =====================================================================
	General
	styles that will always apply to elements
	throughout the website.
	E.g. ul, li, a, p, blockquote etc...
----------------------------------------------------------------------*/

/* @group Body Styles */
body {
	font-family:  Arial, helvetica, tahoma, sans-serif;
	font-size: 75%;			/* ~12px base font size */
	line-height: 1.33em; 
	color: #767676;
	background: #008ad1;
	text-align: center;
}
p {
	margin: 0 0 1em 0;
	
}
a {
	text-decoration: none;
	color: #008ad1;
	font-weight: bold;
}
#container a:hover {
	color:#000;
}
a:visited {
	color: #008ad1;
}

a:active {
	color: #008ad1;
}
a:focus {
	outline: 1px dotted #ccc;
}
/* @end */

/* @group Font Sizes */
p, ul, ol, dl  {
	font-size: 1em; /*  = 12(px) */
}
p.intro {
	font-size: 1.1em;	/* ~ 13px */
	font-weight: bold;
	line-height: 1.5em;
}
p.intro strong{
	color:#008ad1;
}
p.breadcrumb {
	margin-bottom:20px;
	font-weight: bold;
	font-size: 0.91em;
	text-transform: lowercase;
}
p.breadcrumb span {
	color:#ccc;
}

strong {
	/* color:#000; */
	font-weight: bold;
}

h1 {
	font-size: 2em; /* 2 x 12 = 24(px) */
}
h2 {
	font-size: 1.1em; /* 1.5 x 12 = 18(px) */
}
h3 {
	font-size: 1.1em; /* 1.33 x 12 = 16(px) */
}
h4, h5, h6 {
	font-size: 1em; /* 1.16 x 12 = 14(px) */
}
/* @end */

/* @group Lists Styles */

/* @end */

/* @group Heading Styles */
h1, h2, h3
{
	line-height: 1.2em;
	font-weight: bold;
	color: #000;
}
h1 {
	margin: 0 0 1em 0;
	color: #008ad1;
}
h1.tight {
	margin-bottom: 0.2em;
}
h2,h3 {
	margin: 1em 0 0.2em 0;
}
/* h3 {
	margin: 0 0 0.5em 0;
} */
h4, h5, h6 {
	font-weight: bold;
	padding: 0;
	color: #000; /* change according to website */
}

a.cmsedit {
	float:right;
	background:#DF967D;
	border: 1px solid #D13600;
	padding: 0.2em 0.5em;
	color:#fff !important; 
}
a.cmsedit:hover {
	background:#D13600;
}

ul.sectionPanels a.cmsedit{
	float:none;
	display:block;
	margin: 0.5em 0;
	width: 4.5em;
	text-align: center;
}
/* @end */

/* CMS content styles */
div.cms {
	clear: left;
	height:1%;
}
div.cms ul li {
	padding: 0 0 0 12px;
	background: url(/img/structure/bullet_normal.gif) left 0.4em no-repeat;
	margin: 0 0 0.2em 0;
}
div.cms ul li p {
	margin:0;
}
div.cms ul {
	margin-bottom: 1em;
}
/* @end */

/* =====================================================================
	Helpers
	styles that apply to elements, usually using a single
	class name throughout the site. 
	E.g. div.error, p.message etc...
----------------------------------------------------------------------*/
/* Clearing */
.clearLeft {
	clear:left;
}
/* @end */

/* @group Message Styles */
.error {
	background: #F8E8E8 url(../img/structure/icon_error.png) left 3px no-repeat;
	border: 1px solid #E69494;
	color: rgb(173, 0, 0);
	padding: 0.5em;
}
.warning {
	background: #FEEFB3;
	border: 1px solid #DDA233;
	color: #9F6000;
}
.success {
	background: #DFF2BF;
	border: 1px solid #4F8A10;
	color: #59911C;
}
/* @end */

/* Quotes */
blockquote {
	margin: 1em 0 0.5em 0;
	padding-left: 30px;
	font-weight: bold;
	background: url(../img/structure/quote_open.gif) 20px top no-repeat;
}
blockquote img {
	padding-bottom: 5px;
}
blockquote p {
	margin:0; display:inline;
}
/* @end */

/* Promo Links (displayed on right hand column of all pages) */
ul.promoLinks li {
	border-top: 1px solid #c9caca;
	background: url(../img/structure/bullet_promo_link.gif) 0 14px no-repeat;
	padding: 12px 0 12px 30px;
	font-weight: bold;
}
ul.promoLinks h3 {
	font-size: 1.1em;
	font-weight: bold;
	margin: 0 0 0.2em 0;
}
ul.promoLinks h3 a,ul.promoLinks h3 a:visited {
	color:#000;
}
ul.promoLinks h3 span {
	color:#8F9090
}
/* @end */

/* Links Panels (displayed on home page and intro pages) */
ul.linkPanels {
	margin: 1em 0 0 0;
	overflow: hidden;
	clear:both;
}
ul.linkPanels li{
	width: 200px;
	min-height: 210px;	/* rediefined as height in ie6.css */
	float:left;
	margin:15px 15px 15px 0;
	padding-right: 14px;
	border-right: 1px solid #c9caca;
}

ul.client_wall li{
	border-right: none;
	min-height:0;	/* rediefined as height in ie6.css */
}

ul.linkPanels li.last{
	margin-right:0;
	padding-right:0;
	border-right:0;
}
ul.linkPanels li.seperator {
	width: 100%;
	min-height:1px; 
	height:1px;
	font-size: 1px;
	line-height: 1px;
	background: url(../img/structure/seperator_linkPanels.gif) top left no-repeat;
	margin:0;
}

ul.linkPanels h2 {
	font-size: 1em;
	float:left;
	font-weight: bold;
	background: #7D549C url(../img/structure/sections/solutions_linkbg_left.gif) top left no-repeat;
	padding: 0 0 0 10px;
	margin-bottom: 0.8em;
}
ul.linkPanels h2 a {
	color:#fff !important;
	height: 21px;
	line-height: 21px;
	display:block;
	padding: 0 22px 0 0;
	background: url(../img/structure/sections/solutions_linkbg_right.gif) top right no-repeat;
}
ul.linkPanels div.inner {
	clear:left;
	margin: 0 0 0.2em 0;
}
ul.linkPanels p {
	margin:0;
}
ul.linkPanels div.logo {
	text-align: center;
	padding: 0.5em 0;
	border:1px solid #eee;
	margin: 0.5em 0;
}
/* @end */

/* cufon helper styles */
h1.lozenge {
	font-size: 14px;
	color:#fff !important;
	margin-bottom: 20px; 
	float:left;
	background: url(../img/structure/sections/headbg_left.gif) top left no-repeat;
}
h1.lozenge span{
	display:block;
	padding:7px 12px 5px 12px;
	margin:0;
	background: url(../img/structure/sections/headbg_right.gif) top right no-repeat;
}
h2.after{
	height:1%;
	margin-top:0;
	clear:left;
}


/* =====================================================================
	Colour schemes
	Different sections have different colour schemes
---------------------------------------------------------------------- */
/* Solutions --------------------------------------------------------- */
a.solutions,
body.solutions a, 
body.solutions blockquote,
body.solutions h1 {
	color: #7d549c;
}

body.solutions h1.lozenge {
	background: url(../img/structure/sections/solutions_headbg_left.gif) top left no-repeat;
}
body.solutions h1.lozenge span{
	background: url(../img/structure/sections/solutions_headbg_right.gif) top right no-repeat;
}
body.solutions div.cms ul li {
	background-image: url(/img/structure/sections/bullet_solutions.gif);
}

body.solutions ul.linkPanels li .logo {
	height:50px;
	clear:both;	
}

ul.linkPanels li .innerContainer {
	min-height:120px;
	width:100%;
	float:left;
}


/* Services --------------------------------------------------------- */
a.services,
body.services a, 
body.services blockquote,
body.services h1 {
	color: #4F988D;
}
body.services h1.lozenge {
	background: url(../img/structure/sections/services_headbg_left.gif) top left no-repeat;
}
body.services h1.lozenge span{
	background: url(../img/structure/sections/services_headbg_right.gif) top right no-repeat;
}
body.services ul.linkPanels h2 {
	background: #4F988D url(../img/structure/sections/services_linkbg_left.gif) top left no-repeat;
}
body.services ul.linkPanels h2 a {
	background: url(../img/structure/sections/services_linkbg_right.gif) top right no-repeat;
}
body.services div.cms ul li {
	background-image: url(/img/structure/sections/bullet_services.gif);
}

/* Consultancy --------------------------------------------------------- */
a.consultancy,
body.consultancy a, 
body.consultancy blockquote,
body.consultancy h1 {
	color: #B45E55;
}
body.consultancy h1.lozenge {
	background: url(../img/structure/sections/consultancy_headbg_left.gif) top left no-repeat;
}
body.consultancy h1.lozenge span{
	background: url(../img/structure/sections/consultancy_headbg_right.gif) top right no-repeat;
}
body.consultancy ul.linkPanels h2 {
	background: #B45E55 url(../img/structure/sections/consultancy_linkbg_left.gif) top left no-repeat;
}
body.consultancy ul.linkPanels h2 a {
	background: url(../img/structure/sections/consultancy_linkbg_right.gif) top right no-repeat;
}
body.consultancy div.cms ul li {
	background-image: url(/img/structure/sections/bullet_consultancy.gif);
}


/* About --------------------------------------------------------- */
/*
a.about,
body.about a, 
body.about blockquote,
body.about h1 {
	color: #B45E55;
}
*/
body.about h1.lozenge {
/*
	background: url(../img/structure/sections/about_headbg_left.gif) top left no-repeat;
*/
}
body.about h1.lozenge span{
/*
	background: url(../img/structure/sections/about_headbg_right.gif) top right no-repeat;
*/
}
body.about ul.linkPanels h2 {
	background: #B45E55 url(../img/structure/sections/about_linkbg_left.gif) top left no-repeat;
}
body.about ul.linkPanels h2 a {
	background: url(../img/structure/sections/about_linkbg_right.gif) top right no-repeat;
}
body.about div.cms ul li {
	background-image: url(/img/structure/bullet_normal.gif);
}


/* Courses --------------------------------------------------------- */
/*
a.about,
body.about a, 
body.about blockquote,
body.about h1 {
	color: #B45E55;
}
*/
body.courses h1.lozenge {
/*
	background: url(../img/structure/sections/about_headbg_left.gif) top left no-repeat;
*/
}
body.courses h1.lozenge span{
/*
	background: url(../img/structure/sections/about_headbg_right.gif) top right no-repeat;
*/
}
body.courses ul.linkPanels h2 {
	background: #B45E55 url(../img/structure/sections/about_linkbg_left.gif) top left no-repeat;
}
body.courses ul.linkPanels h2 a {
	background: url(../img/structure/sections/about_linkbg_right.gif) top right no-repeat;
}
body.courses div.cms ul li {
	background-image: url(/img/structure/sections/bullet_about.gif);
}


/* Academy --------------------------------------------------------- */
/*
a.about,
body.about a, 
body.about blockquote,
body.about h1 {
	color: #B45E55;
}
*/
body.academy h1.lozenge {
/*
	background: url(../img/structure/sections/about_headbg_left.gif) top left no-repeat;
*/
}
body.academy h1.lozenge span{
/*
	background: url(../img/structure/sections/about_headbg_right.gif) top right no-repeat;
*/
}
body.academy ul.linkPanels h2 {
	background: #B45E55 url(../img/structure/sections/about_linkbg_left.gif) top left no-repeat;
}
body.academy ul.linkPanels h2 a {
	background: url(../img/structure/sections/about_linkbg_right.gif) top right no-repeat;
}
body.academy div.cms ul li {
	background-image: url(/img/structure/bullet_normal.gif);
}


/* =====================================================================
	Page Structure
	styles for the layout of page furniture
	E.g. div#header, div#footer, div#leftPanel etc...
---------------------------------------------------------------------- */

div#pageWrapper{
	width: 926px;
	margin: 2em auto;
	text-align: left;
	background: #fff url(../img/structure/bg_page_top.gif) top left no-repeat;
}

/* @group Header */
div#header {	
	padding:18px 0;
	margin: 0 18px;
	border-bottom: 1px solid #c9caca;
	overflow: hidden;
	height:73px;
	position:relative;
}
div#header img.logo{
	float:left;
}
div#header img.contact{
	float:right;
	margin-bottom:16px
}
div#header div.navWrapper {
	float:right;
	clear:right;
	overflow:hidden;
	position:absolute;
	top:52px;
	right:0px;
}

div#header ul.nav, div#header .auth {
	float:right; clear:right;
	height:1%; 
	font-size: 1.1em;	/* ~ 13px */
}

div#header ul.nav.secondary, div#header .auth {
	font-size: 0.9em;	/* ~ 13px */
	margin-top:14px;
}

div#header ul.secondary, div#header .auth {
	padding:2px 0;
	position:relative;
	top:-2px;
}

ul.nav li{
	float:left;
	line-height:1.1em;
}
ul.nav li a {
	display:block;
	padding: 0 0.7em;
	border-right: 1px solid #008ad1;
	color:#8f9090;
}
ul.nav li a:visited {
	color:#8f9090;
} 
ul.nav li.last a{
	border:0;
	padding-right:0;
}
ul.nav li a:hover,
ul.nav li a.current{
	color: #008ad1;
}

/* @end */

/* @group Main Content */
div#container {
	background: #fff url(../img/structure/bg_faux_container.gif) top right repeat-y;
	margin:12px 0 0 0;
	padding: 0 18px; 
	overflow: hidden;
	height:1%;
}
div#container.wide {
	background: #fff;
}

div#leftCol {
	width: 660px;
	float:left;
}
div#rightCol {
	width: 187px;
	float:right;
	padding-left:18px;
}

div.sideCol {
	width: 230px;
	float:right;
	margin-bottom: 2em;
}

div.clearingHolder {
	clear:both;
	height: 1%;
	width: 100%;
}
/* @end */



/* @group Footer */
div#footer {
	background: url(../img/structure/bg_page_bottom.gif) bottom left no-repeat;
	padding: 20px 18px 16px 18px;
	overflow: hidden;
}
div#footer div.inner {
	border-top: 1px solid #c9caca;
	padding-top: 18px;
	height: 42px;
}
div#footer img.linkedIn {
	float:left;
	margin-right:20px
}

div#footer img.ilm {
	float:right;
	position: relative;
	top:-4px;
}

div#footer ul.nav {
	float:left;
	font-size: 0.9em;	/* 11px */
	line-height:1em;
	padding:6px 12px 0 0;
}
div#footer ul.nav a {
	font-weight: normal;
	color: #747474;
	padding: 0 0.6em;
}
ul.deepLinks {
	clear:both;
	border-top: 1px solid #c9caca;
	padding: 1em 0;
	font-size: 0.833em; /* ~ 10px */
	line-height:1em;
}
ul.deepLinks li{
	float:left;
}
ul.deepLinks li a{
	display: block;
	padding: 0 0.7em;
	border-right: 1px solid #c9caca;
	color: #8f9090;
	font-weight: normal;
}
ul.deepLinks li a:visited {
	color: #aaaaaa;
}
div#footer ul.nav a:hover,
div#footer ul.nav a.current,
ul.deepLinks li a:hover {
	color: #008ad1
}
ul.deepLinks li.first a {
	padding-left:0;
}
ul.deepLinks li.last a {
	padding-right:0;
	border:0;
	
}

/* @end */


/* @group Contact page */
	
#contactForm {

}
	
#contact_info {

}

/* @end */


/* =====================================================================
	Page components
	styles for the components that make up each webpage. (Most of the
	CSS will go in here)
	E.g. div#header img.logo, div#leftPanel ul li a etc...
----------------------------------------------------------------------*/

/* @group Homepage Styles */

#home div#container{
	margin-top:18px;
}

#home p.intro {
	margin-bottom: 17px;
}

ul.sectionPanels {
	margin: 2em 0 0 0;
	overflow: hidden;
}
ul.sectionPanels h2 {
	margin: 0 0 0.9em 0;
	background: url(/img/structure/bg_solutions_link.gif) top left no-repeat;
	color:#fff;
	padding: 9px 0 0 10px;
	height:18px;
	font-size: 14px;
}
ul.sectionPanels h2.services{
	background-image:url(/img/structure/bg_services_link.gif) 
}
ul.sectionPanels h2.consultancy{
	background-image:url(/img/structure/bg_consultancy_link.gif) 
}
ul.sectionPanels h2 a {
	color:#fff;
	display:block;
}
ul.sectionPanels li{
	width: 200px;
	float:left;
	font-weight: bold;
	margin-right:30px;
}

ul.sectionPanels li.last{
	margin-right:0;
}

ul.sectionPanels li div.inner {
	padding: 0 10px;
}
#rightCol div.quote {
	border-top: 1px solid #c9caca
}
#rightCol img.client {
	margin: 18px 0 0 30px;
}
#rightCol blockquote {
	margin-bottom:0;
	background-image: url(../img/structure/quote_open_blue.gif);
}


/* @end */

/* @group Detail Page Styles */
h1.image {
	margin: 0 0 22px 0;
}
div.sideCol div.imageHolder {
	padding-left:30px;
}
div.sideCol div.logo {			/* in the case of a logo fix the height so the blockquote below aligns nicely. */
	height: 63px;
}
div.sideCol blockquote {
	margin-top:0;
}
div.sideCol div.source {
	padding-left:30px;
	margin-bottom: 1em;
}

div.sideCol img.itemImage {
	margin: 0 0 0 30px;
	border: 1px solid #c9caca;
}
/* @end */

/* Course page */
div.stats {
	margin: 1.5em 0;
	background: #eee url(../img/structure/bg_stats_top.gif) top left no-repeat;
}
div.stats div.inner {
	padding: 1.5em;
	background: url(../img/structure/bg_stats_bottom.gif) bottom left no-repeat;
}
div.stats h3 {
	margin-top:0;
}
div.stats ul {
	margin-bottom:0
}

div.related {
	margin-left:30px;
}
div.related p {
	margin:0;
}

/* end */

/* Search results styles */

h1.results {
	font-size: 1.33em;
	color: #8f9090;
}
h2.results {
	color: #8f9090;
	margin:0;
}
ul.searchResults {
	margin: 1.5em 0;
}

ul.searchResults li {
	border-top: 1px solid #c9caca;
	padding: 1.5em 0;
}
ul.searchResults li h2,
ul.searchResults li p {
	margin:0;
}

/* @end */

/* Google Map page */
#map_canvas {
	width: 658px;
	height: 310px;
	border:1px solid #c9caca;
	margin: 1.5em 0;
}
#map_canvas p {
	margin-bottom:0;
}
/* @end */

/* Consultant Biogs page */

div.biog {
	margin: 0 0 1em 0;
	background: #eee url(../img/structure/bg_stats_top.gif) top left no-repeat;
}
div.biog div.inner{
	padding: 1.5em;
	background: url(../img/structure/bg_stats_bottom.gif) bottom left no-repeat;
	height: 1%;
	overflow: hidden;
}

div.biog img {
	float:left;
	border: 1px solid #c9caca;
	margin-right: 1em;
}
div.biog a:hover img {
	border-color:#333;
}
div.biog h3 {
	margin-top:0;
}
div.biog p {
	margin:0;
}

/* end */

/* News page */
div.article {
	border-bottom: 1px solid #c9caca;
	padding-bottom: 1em;
	margin-bottom:1em;
	overflow: hidden;
	height: 1%;
}

div.article div.inner {
	padding-left: 90px;
}
div.article div.inner p {
	margin:0;
}
div.article img {
	float:left;
	margin-right:1em;
	border: 0;
}
div.article h2 {
	margin-top:0;
}
div.article span.date {
	float:right;
}

/* end */