/*
 * Author:		Ronan Sprake [ronan.sprake@digitaloverload.co.uk]
 * Agency:		Digital Overload Ltd.
 * Project: 	GSG
 * Comment:		Base stylesheet
 */

@import url("reset.css");


/****************************************************************************
	=standard tags altered and site-wide styles created
*****************************************************************************/

html {
	min-width:			900px;
}

body
{
	font-family:		Arial, Helvetica, sans-serif;
	font-size:			small;
	background:			#6A747B url(/media/images/bg-body-stripes.jpg) 50% 0 repeat-y;
	color:				#333;
	min-width:			900px;
}

a
{
	color:				#008FC5;
}

a:hover {
	color:				#727A7D;
	text-decoration:	none;
}


ol a:hover {
	color:				#008FC5;
}

img
{
	display:			block;
}

h1
{
	font-size:			120%;
	font-weight:		bold;
	margin-bottom:		75px;
	margin-top:			7px;
}

h3
{
	font-weight:		bold;
	margin-bottom:		2px;
}

p
{
	line-height:		1.359em;
	margin-bottom:		0.6em;
}

strong {
	color:				#008FC5;
	font-weight:		bold;
}


/*--------------------------------------------------------------------------
	= containers
	Container and content sections defined
----------------------------------------------------------------------------*/

.page-container
{
	position:			relative;
	width:				900px;
	margin:				0 auto;
	font-size:			90%;
}

.content
{
	margin:				0 210px 60px;
	min-height:			300px;
	padding-top:		211px;
	position:			relative;
}

.content.right-idea .panel h2,
.content.right-idea p strong
{
	color:				#E21A27;
}


/*--------------------------------------------------------------------------
	= base content styles
	content styles
----------------------------------------------------------------------------*/
.content ul {
	margin-bottom:		1em;
}

#flash {
	display:			none;
}

#flash *
{
	display:			block;
}

.editorial ul
{
	list-style:			disc;
	margin-left:		15px;
}

.editorial ul ul
{
	list-style:			circle;
	margin-top:			5px;
	margin-bottom:		5px
}

.editorial ul li
{
	display:			list-item;
}

/*--------------------------------------------------------------------------
	= home
	Home page styles
----------------------------------------------------------------------------*/

.home ul
{
	margin-right:		50px;
}

.home .panel p img
{
	margin-bottom:		7px;
}

.home li
{
	margin-bottom:		16px;
}

.home .author a {
	text-decoration:	none;
}	

.home h1
{
	margin-bottom:		6px;
}

.home h2
{
	margin-bottom:		15px;
	padding-top: 20px;
	border-top: 4px solid #008FC5;
}

.home .summary
{
	width:				350px;
	margin-bottom:		25px;
	line-height:		1.62em;
}

.home .panel
{
	float:				left;
	width:				175px;
	margin-right:		80px;
}

.home .panel .img
{
	height:				46px;
}

.home #thinking-second-article
{
	margin-right:		41px;
}

.home .listing
{
	border-bottom:		4px solid #008FC5;
}

.home .more
{
	text-align:			right;
	margin-bottom:		1em;
	margin-top:			0;
}


/*--------------------------------------------------------------------------
	= people
	People page styles
----------------------------------------------------------------------------*/

.people p
{
	width:				90px;
	margin-left:		20px;
}

.people h2
{
	margin-left:		20px;
	font-weight:		bold;
}

.people ul
{
	clear:				left;
}

.people li
{
	float:				left;
	width:				150px;
	display:			inline;
}

.people .supporting-content li {
	display:			block;
	float:				none;
	margin-bottom:		4px;
}


/*--------------------------------------------------------------------------
	= overview
	Overview listing page styles
----------------------------------------------------------------------------*/

.overview ul h2
{
	font-size:			152%;
	font-weight:		normal;
	margin-bottom:		22px;
	padding-right:		80px;
}

.overview .listing
{
	border-bottom:		4px solid #008FC5;
	clear:				right;
	margin-bottom:		0;
	width:				480px;
}

.overview .listing .rightidealogo img
{
	position:			absolute;
	bottom:				18px;
	right:				0px;
	left:				inherit;
	top:				18px;
}

.overview .listing li
{
	clear:				left;
	position:			relative;
	min-height:			110px;
	padding:			18px 0;
	border-top:			4px solid #008FC5;
}

.overview .listing li:after {
	content:			".";
	display:			block;
	clear:				both;
	height:				0;
	line-height:		0;
	visibility:			hidden;
}

.overview .listing li h2,
.overview .listing li p
{
	margin-left:		120px;
}

.overview .listing li a img
{
	float:				left;
}

.overview .listing p a
{
	line-height:		2.2em;
}

.supporting-content
{
	position:			absolute;
	width:				200px;
	top:				317px;
	right:				-265px;
	color:				#fff;
}

.supporting-content a
{
	font-size:			100%;
	line-height:		1.2em;
	text-decoration:	underline;
	color:				#fff;
}

.supporting-content li
{
	margin-bottom:		5px;
}


.supporting-content a:hover,
.supporting-content .selected a
{
	background:			#fff;
	color:				#0279A6;
}

.supporting-content h2
{
	margin-bottom:		0.7em;
	margin-top:			0;
	font-size:			110%;
	font-weight:		bold;
}

.supporting-content h3
{
	font-weight:		normal;
}

.supporting-content ul
{
	margin-bottom:		1.7em;
}

.overview .showreel
{
	position:			absolute;
	top:				0px;
	right:				250px;
}


/*--------------------------------------------------------------------------
	= ol
	List navigation style
----------------------------------------------------------------------------*/

ol
{
	float:				right;
	margin-right:		0;
	padding:			4px;
	border:				1px solid #78B4D0;
	border-bottom:		none;
}

ol.last
{
	float:				right;
	margin-right:		0;
	padding:			4px;
	border:				1px solid #78B4D0;
	border-style:		none solid solid;
}

ol li
{
	display:			inline;
	font-weight:		bold;
}

ol li em
{
	font-style:			normal;
	color:				#008FC5;
}

ol li a
{
	text-decoration:	none;
	color:				#333;
}


/*--------------------------------------------------------------------------
	= detail
	Detail page styles
----------------------------------------------------------------------------*/

.detail .panel
{
	clear:				right;
	width:				480px;
	padding-top:		12px;
	border-top:			4px solid #008FC5;
}

.detail .panel div p
{
	margin-top:			15px;
}

.detail .panel h2
{
	font-size:			152%;
	font-weight:		normal;
	margin:				5px 0 0;
	color:				#008FC5;
}

.detail .panel h3
{
	position:			relative;
	font-size:			110%;
	font-weight:		bold;
	margin:				5px 0 0;
	padding-bottom:		5px;
	background:			url(/media/images/bg-dotted.gif) bottom left repeat-x;
}

.detail .rightidealogo img
{
	float:				right;
	margin-top:			-34px;
	padding-right:		8px;
}

.gallery
{
	margin:				10px 0;
}

.gallery:after
{
	content:			".";
	display:			block;
	clear:				both;
	height:				0;
	line-height:		0;
	visibility:			hidden;
}

.gallery li
{
	float:				left;
	margin-right:		5px;
	min-width:			150px;
	min-height:			150px;
	margin-bottom:		10px;
	text-align:			center;
}

.gallery li *
{
	margin:				auto;
}

.detail .audio
{
	background:			url(/media/images/bg-audio.gif) 0 0 no-repeat;
	line-height:		23px;
	margin:				1.2em 0 1.4em;
	min-height:			23px;
	padding-left:		30px;
}

.detail .video
{
	background:			url(/media/images/bg-video.gif) 0 0 no-repeat;
	line-height:		23px;
	margin:				1.2em 0 1.4em;
	min-height:			23px;
	padding-left:		30px;
}

.content-share-link {
	float:				left;
}

/*--------------------------------------------------------------------------
	= advantage
	Compeititive Advantage page styles
----------------------------------------------------------------------------*/

.advantage .panel
{
	clear:				right;
	width:				480px;
	padding-top:		20px;
	border-top:			4px solid #008FC5;
}

.advantage .panel h1
{
	clear:				left;
	color:				#008FC5;
	font-size:			152%;
	font-weight:		normal;
	margin-bottom:		12px;
	padding-right:		80px;
}


/*--------------------------------------------------------------------------
	= staff-profile
	People Detail style
----------------------------------------------------------------------------*/

.staff-profile .panel {
	width:				480px;
	position:			relative;
}

.staff-profile .panel .photo {
	float:				right;
	padding-bottom:		20px;
}


/*--------------------------------------------------------------------------
	= editorial
	styles for generic plain content pages
----------------------------------------------------------------------------*/

.editorial h2 {
	margin-top:			1em;
	font-weight:		bold;
	margin-bottom:		0.5em;
	color:				#008FC5;
}


/****************************************************************************
	= Right idea styles created
*****************************************************************************/

.rightidea .listing li h2 a
{
	color:				#EF3941;
}

div.page-container div.rightidea *
{
	border-color:		#EF3941;
}

div.page-container div.rightidea a,
div.page-container div.rightidea em,
div.page-container div.rightidea strong,
div.page-container div.rightidea h1,
div.page-container div.rightidea h2,
div.page-container div.rightidea h3,
div.page-container div.rightidea h4,
div.page-container div.rightidea h5,
div.page-container div.rightidea h6
{
	color:				#EF3941;
}

div.page-container div.rightidea a:hover
{
	color:				#727A7D;
}

div.page-container div.rightidea ol a
{
	color:				#333;
}

div.page-container div.rightidea ol a:hover
{
	color:				#EF3941;
}

div.page-container div.rightidea h2,
div.page-container div.rightidea h1
{
	color:				#EF3941;
}


/*--------------------------------------------------------------------------
	= nav
	Navigation list
----------------------------------------------------------------------------*/

.nav-main
{
	position:			absolute;
	top:				65px;
	left:				-6px;
}

.nav-corp
{
	position:			absolute;
	top:				75px;
	right:				-63px;
}

li.nav-corp-reason {
  margin-bottom: 37px;
}

.nav-main li
{
	text-align:			right;
}

.nav-main li a,
.nav-corp li a
{
	display:			block;
	width:				150px;
	height:				32px;
	background-position:top right;
	background-repeat:	no-repeat;
}

.nav-main li a em,
.nav-corp li a em
{
	display:			block;
	width:				0;
	height:				0;
	overflow:			hidden;
	visibility:			hidden;
}

.nav-corp li a
{
	width:				208px;
	height:				32px;
	background-position:top left;
}

.nav-corp li a:hover,
.nav-corp li.selected a
{
	background-position:bottom left;
}

.nav-main li a:hover,
.nav-main li.selected a
{
	background-position:bottom right;
}

.nav-main-home a {
	background-image:	url(/media/images/nav-main-home.png);
}

.nav-main-thinking a {
	background-image:	url(/media/images/nav-main-thinking.png);
	height:				32px;
}

.nav-main-work a {
	background-image:	url(/media/images/nav-main-work.png);
}

.nav-main-people a {
	background-image:	url(/media/images/nav-main-people.png);
}

.nav-main-contact a {
	background-image:	url(/media/images/nav-main-contact.png);
}

.nav-corp-strategy a {
	background-image:	url(/media/images/nav-corp-strategy.png);
}

.nav-corp-brand a {
	background-image:	url(/media/images/nav-corp-brand.png);
}

.nav-corp-research a {
	background-image:	url(/media/images/nav-corp-research.png);
}

.nav-corp-advertising a {
	background-image:	url(/media/images/nav-corp-advertising.png);
}

.nav-main-share {
	display:			none;
	
}

.nav-main-share a 
{ 
	float:				right;
	margin-top:			10px;
}

li.nav-sub-effectiveness a,
li.nav-sub-brand-development a
{
	width:				180px;
	height:				19px;
	background-position:top left;
}

li.nav-corp-advertising a
{
	height:				32px;
}

.nav-sub-effectiveness a
{
	background-image:	url(/media/images/nav-sub-effectiveness.png);
}

.nav-sub-brand-development a
{
	background-image:	url(/media/images/nav-sub-brand-development.png);
}

li.last-subnav
{
	background:			url(/media/images/bg-last-subnav.gif) bottom left no-repeat;
	padding-bottom:		10px;
}


/*--------------------------------------------------------------------------
	= logo
	Company logo
----------------------------------------------------------------------------*/

#logo
{
	position:			absolute;
	top:				9px;
	left:				525px;
}

.rightidea #logo
{
	left:				505px;
}

.brand .panel h2
{
	font-weight:		bold;
}
/*
.rightidea .supporting-content ul
{
	list-style:			disc;
	margin-left:		12px;
}
*/
.brand .heading-link
{
	font-weight:		bold;
}

.brand .brand-defining-ideas
{
	padding-top:		10px;
}

/*--------------------------------------------------------------------------
	= footer
	Footer links and copyright note
----------------------------------------------------------------------------*/

.footer
{
	clear:				both;
	margin-left:		210px;
	padding-top:		20px;
	padding-bottom:		4px;
	font-size:			95%;
	font-weight:		bold;
	color:				#ccc;
}

.footer li,.footer ul,.footer p
{
	display:			inline;
}

.footer p
{
	float:				right;
	text-align:			right;
	margin-right:		200px;
}

.footer a
{
	color:				#ccc;
}

.footer a:hover,
.footer a.selected
{
	color:				#666;
	text-decoration:	none;
}

.footer ul
{
	padding-right:		20px;
}


/*--------------------------------------------------------------------------
	= sitemap
	Site Map
----------------------------------------------------------------------------*/

.sitemap ul
{
	margin-bottom:		5px;
}

.sitemap li
{
	margin:				5px 0;
}

.sitemap ul li a
{
	background:			transparent url(/media/images/bg-sitemap-li-a.gif) no-repeat scroll 4px center;
	padding-left:		14px;
}

.sitemap li ul li
{
	margin-left:		40px;
}


/*--------------------------------------------------------------------------
	= Front end CMS generated content styles
----------------------------------------------------------------------------*/

.content .content-display h1,
.content .content-display h2,
.content .content-display h3,
.content .content-display h4,
.content .content-display h5,
.content .content-display h6,
.content .content-display ul,
.content .content-display ol,
.content .content-display li {
	padding:			0;
	margin:				0;
	font-size:			100%;
	font-weight:		normal;
	border:				0;
	float:				none;
	position:			relative;
	top:				inherit;
	left:				inherit;
}

.content .content-display h1 {
	background:			url(/media/images/bg-dotted.gif) bottom left repeat-x;
}

.content .content-display h2,
.content .content-display h1
{
	font-size:			152%;
	font-weight:		normal;
	margin:				5px 0;
	color:				#008FC5;
}

.content .content-display p.sub-heading
{
	font-weight:		bold;
	color:				#008FC5;
}

.content .content-display h1
{
	color:				#333;
}

.content .content-display h3,
.content .content-display h4,
.content .content-display h5,
.content .content-display h6
{
	font-size:			110%;
	font-weight:		bold;
	margin:				5px 0 0;
	padding-bottom:		5px;
	background:			url(/media/images/bg-dotted.gif) bottom left repeat-x;
}

.content .content-display ul
{
	list-style:			disc;
	margin-left:		15px;
}

.content .content-display ol
{
	list-style:			decimal;
	margin-left:		18px;
}

.content .content-display li {
	display:			list-item;
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox specific link and font settings <<<------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_window {
	font: 				12px Arial, Helvetica, sans-serif;
	color: 				#333;
}

#TB_secondLine {
	font: 				10px Arial, Helvetica, sans-serif;
	color:				#666;
}

#TB_window a:link {		color: #666666;}
#TB_window a:visited {	color: #666666;}
#TB_window a:hover {	color: #333;}
#TB_window a:active {	color: #666666;}
#TB
_window a:focus{		color: #666666;}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox settings <<<-----------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

#TB_overlay {
	position: 			fixed;
	z-index:			120;
	top: 				0px;
	left: 				0px;
	height:				100%;
	width:				100%;
}

.TB_overlayMacFFBGHack {background: url(/media/images/macFFBgHack.png) repeat;}
.TB_overlayBG {
	background-color:	#333;
	filter:				alpha(opacity=75);
	-moz-opacity: 		0.75;
	opacity: 			0.75;
}

#TB_window {
	position: 			fixed;
	background: 		#ffffff;
	z-index: 			122;
	color:				#333;
	display:			none;
	border: 			4px solid #525252;
	text-align:			left;
	top:				50%;
	left:				50%;
}

#TB_window img#TB_Image {
	display:			block;
	margin: 			15px 0 0 15px;
	border-right: 		1px solid #ccc;
	border-bottom: 		1px solid #ccc;
	border-top:			1px solid #666;
	border-left: 		1px solid #666;
}

#TB_caption{
	height:				25px;
	padding:			7px 30px 10px 25px;
	float:				left;
}

#TB_closeWindow{
	height:				25px;
	padding:			11px 25px 10px 0;
	float:				right;
}

#TB_closeAjaxWindow{
	padding:			7px 10px 5px 0;
	margin-bottom:		1px;
	text-align:			right;
	float:				right;
}

#TB_ajaxWindowTitle{
	float:				left;
	padding:			7px 0 5px 10px;
	margin-bottom:		1px;
}

#TB_title{
	background-color:	#e8e8e8;
	height:				27px;
}

#TB_ajaxContent{
	clear:				both;
	padding:			2px 15px 15px 15px;
	overflow:			auto;
	text-align:			left;
	line-height:		1.4em;
}

#TB_ajaxContent.TB_modal{
	padding:			15px;
}

#TB_ajaxContent p{
	padding:			5px 0px 5px 0px;
}

#TB_load{
	position: 			fixed;
	display:			none;
	height:				13px;
	width:				208px;
	z-index:			123;
	top: 				50%;
	left: 				50%;
	margin: 			-6px 0 0 -104px; /* -height/2 0 0 -width/2 */
}

#TB_HideSelect{
	z-index:			108;
	position:			fixed;
	top: 				0;
	left: 				0;
	background-color:	#fff;
	border:				none;
	filter:				alpha(opacity=0);
	-moz-opacity: 		0;
	opacity: 			0;
	height:				100%;
	width:				100%;
}

#TB_iframeContent{
	clear:				both;
	border:				none;
	margin-bottom:		-1px;
	margin-top:			1px;
	_margin-bottom:		1px;
}

.inpage-image
{
	float:				left;
	margin:				0 10px 20px 0;
}

.questions
{
	clear:				left;
	padding-bottom:		0;
	padding-top:		20px;
	margin:				10px 0 4px;
}

.subheading
{
	color:				#008FC5;
	font-weight:		bold;
	margin:				0.8em 0 0.3em;
}

.home .competative-advantage
{
	float:				right;
}

h2.showreel-heading
{
	border-top:			4px solid #008FC5;
	font-size:			152%;
	margin-top:			14px;
	padding-top:		20px;
	padding-bottom:		10px;
}

h2.showreel-heading img
{
	float:				left;
	padding-right:		15px;
}

p.media-link
{
	margin-top:			14px;
	margin-bottom:		10px;
}

.lead
{
	padding-top:		10px;
	font-weight:		bold;
	margin-right:		100px;
}