/*
	About
	================
	Content.css defines the site's content styles - classes, modules and page specific.

	Info
	================
	Author(s): 	[E.g - Finbarr N, Ian H]
	For: 		[Client Name]
	URL: 		[E.g - eonenergy.com]
	
	Contents
	================
	Classes:	Generic styles for smaller details (e.g. different link styles, paragraph margins).
	Modules: 	Structural elements which make up the content of a page (e.g. comments block, product list).
	Pages:		Styles for specific pages. These should be avoided but sometimes can't be.
*/



/*
	Content structure standard definitions
	===============================================================================================================
*/

/* & Column widths dependant on class name on row which defines how many columns within */
.col-50-50 .col						{width:464px;}
.col-25 .col,
.col-25 .col .carousel li			{width:227px;}

.col-75-25 .col-1,
.col-75-25 .col-1 .carousel li		{width:701px;}
.col-75-25 .col-2					{width:227px;}

.col-100 .col,
.col-100 .col .carousel li			{width:938px;}

.col-25-50-25 .col-1				{width:227px;}
.col-25-50-25 .col-1 .carousel li	{width:207px;}
.col-25-50-25 .col-2,
.col-25-50-25 .col-2 .carousel li	{width:464px;}
.col-25-50-25 .col-3,
.col-25-50-25 .col-3 .carousel li	{width:227px;}

.row								{width:953px; padding-left:5px; clear:both; float:left; display:inline; position:relative;}
.col								{float:left; display:inline; padding:0 5px;}
.module								{background:#fff; margin:0 0 10px 0;}


/* & definition lists used for structural purposes on certain pages */
dl									{width:100%; overflow:auto; border-bottom:15px solid #fff;}
dt									{float:left; display:inline; width:207px; margin-right:10px; padding:10px 10px 0; font-size:1.8em; color:#000;}
dd									{float:left; display:inline; border-bottom:1px solid #ccc; padding:7px 0;}
	.project-list					{border-bottom:none;}
	.col-75-25 dd					{width:464px;}
	.col-100 dd						{width:701px;}
/*
	Classes
	===============================================================================================================
*/

.opacity							{background:rgb(000, 000, 000); /*solid fallback colour for unsupported browsers*/ background-color:transparent; background-color:rgba(000,000,000,0.7); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000)"; cursor:pointer;}
.support-text 						{padding:3px 10px; color:#fff; background:#000; clear:both; margin:0 !important; position:relative; line-height:1.2;}
#home .support-text					{float:none; position:static;}
.opacity a:hover, 
.opacity a:focus, 
.opacity a:active					{color:#fff;}

.module p, 
.module li							{margin:.2em 0;}

.video a							{width:100%; height:100%; line-height:350px; overflow:hidden; zoom:1; display:block; position:absolute; top:0; left:0; font-size:1.2em; background:url(../../_media/img/img_showreel.png) no-repeat center;}

/* & blockquote */
blockquote p						{font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-size:2.4em; line-height:1.4; margin:0;}
blockquote span						{color:#eb008b; display:block; font-size:2.2em; line-height:1; margin-bottom:-.6em; font-style:normal;}
blockquote span.close-quote			{text-align:right;}

/* & blockquote variation */

.tab blockquote p					{font-size:1.6em;}
.reposition .tab div				{height:400px; padding:0;}
.reposition .tab li img				{position:absolute; top:0; right:0;}
.reposition .tab blockquote			{position:relative; width:100%;}
.reposition .tab blockquote p		{color:#fff; padding:0 34px;}
.reposition .tab blockquote p span	{position:absolute; top:0; left:0; color:#fff; font-size:3.8em; margin-bottom:0;}
.reposition .tab blockquote p span.close-quote{top:auto; bottom:-1em; left:auto; right:0;}
.reposition							{margin-top:-120px; padding:10px 10px 0 10px; z-index:10; zoom:1; position:relative;/*reqd for ie6*/}

/* & decorative classes */
.decor-gradient-1					{width:100%; height:30px; float:left; background-image:-moz-linear-gradient(top, #fff, #f5f5f5); background:-webkit-gradient(linear, left top, left bottom, color-stop(0.0, #fff), color-stop(1.0, #f5f5f5)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#ffffff, endColorstr=#f5f5f5)"; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ffffff, endColorstr=#f5f5f5);}



/*
	Modules
	===============================================================================================================
*/

/* & leader - always at top of page */
.leader								{display:block; width:701px; /* overflow:auto; */ position:relative;}
.leader h2, 
.hero h2							{float:left; display:inline-block;}
.leader .block-title				{float:left; display:inline; padding-bottom:60px;}
.leader .block-title .support-text	{font-size:1.6em; float:left; display:inline;}
.module .focus-text					{clear:both; color:#000; font-size:2.4em; line-height:1.3; width:100%; margin-bottom:30px;}
.leader .focus-text					{float:left; display:inline; margin-bottom:0;}

.leader-image						{padding-left:237px; min-height:180px; height:auto !important; height:180px;}
.leader-image .block-title			{padding-bottom:10px;}
.leader-image .teaser				{position:absolute; top:0; left:0; margin-right:10px; width:227px; height:180px; overflow:hidden;}
.leader-image .focus-text			{color:#666; font-size:1.8em; line-height:1.2;}

#person .leader-image .teaser img	{margin-top:-120px;}

/* & definition list */
dd h3								{color:#000; font-size:1.1em; margin-top:.2em}
dd p								{padding:.5em 0 .9em;}
dd div								{margin:5px 0;}
dd blockquote p						{font-size:1.2em; font-style:normal;}
dd .support-text					{float:none; background:none; color:#000; padding:3px 0; font-size:.8em;}

dl.social-media						{background:#fffc00; border-top:0;}
dl.social-media dd					{border:0;}
dl.social-media dd p				{padding-right:10px;}
dl.social-media dd a				{color:#666;}
dl.social-media dd a:hover, 
dl.social-media dd a:active			{color:#000;}
dl.social-media dd span				{display:block; clear:both; padding:5px 0 20px;}
#work dl.social-media dd li			{margin-right:10px; border-bottom:1px solid #666;}
dl.social-media h2					{padding:0; margin-right:10px; background:#000 url(../img/logo_hubbub-yellow-on-black.png) no-repeat 10px center; text-indent:-9999px;}
dl.social-media h2 a				{width:100%; height:100%; display:block; background:url(../img/icon_arrow-hubbub.png) no-repeat 425px 10px; }
dl.social-media h2 a:hover			{background-position:425px -40px;}

dd .tout							{background:#00adee url(../img/icon_arrow-lrg.png) no-repeat 97% 50%; float:left; display:inline; min-height:70px; height:auto !important; height:70px; width:444px;}
dd .tout div						{float:left; display:inline; width:223px; padding:0 10px 0 0; position:relative; margin:0;}
dd .tout .block-title				{width:160px; margin:0; min-height:70px; height:auto !important; height:70px;}
dd .tout h3							{font-size:.857em; margin-bottom:.3em; text-transform:capitalize;}
dd .tout h4							{font-size:1.286em; color:#fff; text-transform:capitalize;}
dd .tout p							{font-size:.857em; padding:0; color:#333;}
dd .tout p.cta a					{position:absolute; top:0; right:0; width:50px; height:83px; background-position:50% 50%; background-color:#00adee;} 
dd .tout p a						{color:#fff;}
body.js dd .tout p a				{display:none;}

dd .tout:hover p.cta a, 
dd .tout:hover, 
dd .tout p.cta a:hover				{background-color:#000;} 
dd .tout:hover h3,
dd .tout:hover h5					{color:#00adee;}
dd .tout:hover p					{color:#fff;}

dl ol								{padding:0; background:none; margin:0;}
dl li								{border-bottom:1px solid #ddd; padding:10px 0;}

/* & tab module standard */
.tabs								{width:100%;}
body.js .tabs						{position:relative; height:400px;}
.tabs li							{font-size:1em; width:100%;}
body.js .tabs .tabs-content			{position:absolute; top:0; right:0; height:400px; width:100%;}
.tabs .tabs-content .tab			{height:400px; overflow:hidden; width:100%; position:relative; margin:0 0 10px 0;}
body.js .tab						{position:absolute; top:0; left:0; margin:0;}
.tab div							{height:200px; padding-top:80px; overflow:hidden; width:100%; position:absolute; top:0; left:0;}
#tab-1-1							{background-position:0 0;}
#tab-1-2							{background-position:-700px 0;}
#tab-1-3							{background-position:-900px 0;}
.tab div h2							{z-index:5; float:left; display:inline;}
h2 span								{font-size:.4em; display:block; color:#000; font-style:normal; font-family:"Trebuchet MS", Georgia, "Times New Roman", Times, serif;}
.tab div .support-text				{font-size:1.6em; float:left; display:inline; clear:both;}
.tab div .tab h3					{float:left; display:inline;}
#what-we-do #tab-1-2 h2				{background:#00adee; color:#fff; font-size:1.6em; font-style:normal;}
#what-we-do #tab-1-2 h2 span		{color:#000; font-size:.7em;}
#what-we-do #tab-1-2 .support-text	{color:#000; background:#fff; font-size:1.8em; line-height:1.4; font-style:italic;}

.tabs .tabs-nav 					{min-height:36px; height:auto !important; z-index:+1; height:36px; width:100%; background:url(../img/sprt_hero-tabs-nav.png) no-repeat 0 0;}
body.js .tabs .tabs-nav 			{position:absolute; bottom:-1px; left:0;}
.tabs .tabs-nav li					{min-height:28px; height:auto !important; height:28px; float:left; display:inline; width:33.33%; margin:0; font-size:1.4em;}
body.js .tabs .tabs-nav li			{padding-top:8px;}
.tabs .tabs-nav li a				{display:block; color:#333; padding:.3em 10px; background:#f0eeec;}
.tabs .tabs-nav li.active			{background:url(../img/icon_arrow.png) no-repeat 50% 0;}
.tabs .tabs-nav li a:hover, 
.tabs .tabs-nav li.active a			{background:#fff; color:#00adee;}
.tabs .tabs-nav li.active a, 
.tabs .tabs-nav li.active a:hover	{cursor:default; font-weight:bold;}

/* & carousel module standard */
.nav-carousel						{display:none;}
body.js .nav-carousel				{position:absolute; z-index:3; top:10px; left:5px; display:block;}
.nav-carousel li					{float:left; display:inline; line-height:1; margin:0; width:auto;}
.nav-carousel li a					{width:23px; height:23px; float:left; display:block; overflow:hidden; background:#dea; text-indent:-20000px; margin:0 2px; background:url(../img/sprt_nav-carousel.png) no-repeat 0 0;}
.nav-carousel li.prev a				{background-position:0 50%;}
.nav-carousel li.next a				{background-position:-30px 50%;}
.nav-carousel li.prev a.disabled 	{background-position:-60px 50%; cursor:default;}
.nav-carousel li.next a.disabled 	{background-position:-90px 50%; cursor:default;}

.carousel li						{margin:0; font-size:1em; float:left; display:inline; position:relative;}
.reposition .carousel li			{width:444px; height:400px;}


/* & teaser module standard */
.teaser, 
.teaser-alt							{position:relative; width:100%; height:auto;}
body.js .teaser, 
body.js .teaser-alt					{height:180px; overflow:hidden;}
.teaser .opacity, 
.teaser-alt .opacity				{position:absolute; bottom:0; left:0; width:100%; display:block;}
.teaser h2, 
.teaser-alt h2						{color:#00adee; font-size:1.8em; line-height:1.2; font-family:"Trebuchet MS", Georgia, "Times New Roman", Times, serif; background:none; font-style:normal;}
.teaser img, 
.teaser-alt img						{display:block;}
.teaser p, 
.teaser-alt p						{background:none; display:block; clear:both; float:none; padding:3px 10px;}
body.js .teaser p, 
body.js .teaser-alt p, 
body.js .teaser .cta,
body.js .teaser-alt .cta			{display:none;}
.teaser .cta,
.teaser-alt .cta					{display:block;}
body.js .teaser .cta,
body.js .teaser-alt .cta			{display:none; position:absolute; bottom:0; left:0; padding:30px 10px 8px 10px; }
.teaser .cta span					{display:none;}

.teaser:hover .opacity				{background-color:rgba(000,000,000,0.5); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000)";}
body.js .teaser.hover .support-text, 
body.js .teaser.hover .cta, 
body.js .teaser.hover p, 
body.js .teaser-alt.hover p			{display:block;}
.teaser.hover h3					{padding-bottom:0;}

.teaser .overlay					{width:100%; height:180px; position:absolute; left:0px; top:0px; background:url(../img/bg_list-circle-white.png) no-repeat center;}


/* & tout module standard */
.tout								{background:#f2f2f2; padding:10px;}
.tout h3							{margin-bottom:10px;}
.tout h4							{color:#000; font-weight:bold;}
.tout p, .tout li					{font-size:1.2em;}
.col-75-25 .col-2 .tout p			{margin-bottom:.5em;}
.tout ul							{padding:.3em 0; margin-left:14px;}
.tout li							{display:list-item; list-style:disc outside;}
.tout .block-title					{margin-bottom:15px;}

/* & tout variations */
.twitter							{background:url(../../_media/img/bg_tweet-deck.png) no-repeat -144px -94px; padding:0; min-height:180px; height:auto !important; height:180px; position:relative;}
.twitter .opacity					{position:absolute; bottom:0; left:0; width:207px; padding:5px 10px;}
.twitter h3							{color:#fff; margin-bottom:0;}
.twitter p							{color:#fff;}

.press p							{color:#000;}
.press div p						{color:#666;}

.web-activity						{padding:10px 0 0;}
.web-activity h3					{padding:0 10px;}
.web-activity ul					{margin:0; width:100%; overflow:auto; padding-bottom:0;}
.web-activity li					{display:inline; float:left; width:227px; margin:0; border-bottom:1px solid #ddd; border-top:1px solid #fff;}
.web-activity li.first				{border-top:0;}
.web-activity li a					{padding:5px 5px 5px 50px; float:left; display:inline; width:172px;}
.web-activity li a:hover			{background:#00adee; color:#fff;}

/* & block-detail */
.col-25-50-25 .col-2 .module		{padding:0 10px 10px;}
.col-25-50-25 .col-2 .focus-text	{font-size:2.4em; line-height:1.2; color:#000;} 
.col-25-50-25 .col-2 .module p		{margin-bottom:.8em;}

/* & block-mail */
.block-mail a						{background:#e5f7fd; padding:5px 8px; display:block; font-size:1.2em;}

/* & block-list */
.block-list ul						{width:100%; overflow:auto; padding-bottom:0;}
.block-list li						{width:100; margin:0; border-bottom:1px solid #ddd; border-top:1px solid #fff; padding:8px 0; line-height:1.3; font-size:1.2em;}
.block-list li.first				{border-top:0;}
.block-list li.last					{border-bottom:0;}

.col-1 .block-list ul				{background:#f2f2f2; margin:10px 0 0;}
.col-1 .block-list li				{width:207px; padding:8px 10px; float:left; display:inline;}
.col-1 .block-list li strong		{display:block; color:#000;}
.col-1 .block-list li a				{/*display:block;*/}

/* & block-detail - multi-usage */
dd .block-detail p					{line-height:1.3; padding:0;}
dd .block-detail					{float:left; display:inline; margin-right:10px; width:227px; position:relative; border-bottom:35px solid #fff;}
dd .last							{margin-right:0;}
dd .block-detail img				{display:block;}
dd .block-detail .opacity			{width:207px; padding:5px 10px; margin:-34px 0 0; position:relative;}
dd .block-detail h3					{color:#fff; font-weight:bold; margin:0;}
dd .block-detail .support-text		{background:#00adee; padding:5px 10px; float:none; display:block; border-top:1px solid #fff; color:#fff; font-size:1em;}
dd .block-detail blockquote			{padding:15px 0;}
dd .block-detail blockquote	p		{color:#000; font-size:1.4em;} 
dd .block-detail p					{font-size:.857em; padding:0 10px;}

/* & image list */
.image-list								{width:100%; float:left; display:inline;}
.image-list ul							{width:100%; padding-bottom:20px; float:left; display:inline; background:#f5f5f5;}
.image-list li							{width:227px; margin:0 0 50px 9px; float:left; display:inline; position:relative;}
.image-list li .img-container			{width:180px; height:180px; margin-left:23px; position:relative; overflow:hidden;}
.image-list li .img-container img		{position:absolute; left:-25px; top:-10px;}
.image-list li .overlay					{width:180px; height:180px; display:block; position:absolute; left:0px; top:0px; background:url(../img/bg_list-circle.png) no-repeat center;}
.image-list li .info					{width:227px; padding:17px 0 10px 0; background:url(../img/bg_list-info.png) center top; min-height:9em; height:auto !important; height:9em;}
body.js .image-list li .info			{display:none; position:absolute; left:0px; top:130px; z-index:+2000; min-height:inherit; height:auto; zoom:1;}
.image-list li .info h3					{padding:0 10px; font-size:1.4em;}
.image-list li .info p					{padding:0.3em 10px; font-size:1em; color:#ddd;}
.image-list-var-1 li .img-container 	{width:227px; margin-left:0;}
.image-list-var-1 li .img-container img, 
.image-list-var-1 li .img-container:hover img	{margin-top:-120px; position:relative; left:0; top:0;}
.image-list-var-2 li .img-container img			{position:absolute; left:0; top:0;}
.image-list-var-2 li .img-container:hover img	{top:auto; bottom:0;}

/* & shadowbox */
#sb-title-inner,
#sb-info-inner,
#sb-loading-inner,
div.sb-message							{color:#fff;}
#sb-container							{position:fixed; margin:0; padding:0; top:0; left:0; z-index:999; text-align:left; visibility:hidden; display:none;}
#sb-overlay								{position:relative; height:100%; width:100%;}
#sb-wrapper								{position:absolute; visibility:hidden; width:100px;}
#sb-wrapper-inner						{position:relative; overflow:hidden; height:100px;}
#sb-body								{position:relative; height:100%;}
#sb-body-inner							{position:absolute; height:100%; width:100%;}
#sb-player.html							{height:100%; overflow:auto;}
#sb-body img							{border:none;}
#sb-loading								{position:relative; height:100%;}
#sb-loading-inner						{position:absolute; font-size:14px; line-height:24px; height:24px; top:50%; margin-top:-12px; width:100%; text-align:center;}
#sb-loading-inner span					{background:url(../../js/jquery/third-party/shadowbox/loading.gif) no-repeat; padding-left:34px; display:inline-block;}
#sb-body,#sb-loading					{background-color:#060606;}
#sb-title,#sb-info						{margin:0; padding:0; overflow:hidden;}
#sb-title,#sb-title-inner				{height:26px; line-height:19px;}
#sb-title-inner							{font-size:16px; text-indent:30px;}
#sb-info,#sb-info-inner					{height:23px; line-height:23px; margin-top:5px;}
#sb-info-inner							{font-size:12px;}
#sb-nav									{float:right; height:23px; width:45%;}
#sb-nav a								{display:block; float:right; margin-left:3px; cursor:pointer; background-repeat:no-repeat;}
a#sb-nav-close							{width:23px; height:23px; position:absolute; left:-2px; top:-2px; background:url(../img/sprt_nav-carousel-light-close.png) no-repeat;}
a#sb-nav-next							{width:23px; height:23px; background:url(../img/sprt_nav-carousel-light-next.png) no-repeat;}
a#sb-nav-previous						{width:23px; height:23px; background:url(../img/sprt_nav-carousel-light-prev.png) no-repeat;}
a#sb-nav-play,
a#sb-nav-pause							{display:none;}
#sb-counter								{float:left; width:45%;}
#sb-counter a							{padding:0 4px 0 0; text-decoration:none; cursor:pointer; color:#fff;}
#sb-counter a.sb-counter-current		{text-decoration:underline;}
div.sb-message							{font-size:12px; padding:10px; text-align:center;}
div.sb-message a:link,div.sb-message a:visited{color:#fff; text-decoration:underline;}


/*
	Homepage modules
	===============================================================================================================
*/

/* required to position tweet-deck module under spotlight module on this page only */
#home .col-50-50					{position:relative; z-index:+5;}
#home .col-100						{position:relative; z-index:1;}


/* & tweet module */
.quote								{position:relative; padding-bottom:28px; height:352px; overflow-x:hidden; overflow-y:scroll; background:url(../../_media/img/bg_teaser-tweets.png) no-repeat 0 100%;}
body.js .quote						{height:272px; overflow:hidden;}
.quote .carousel					{padding:10px; width:207px; overflow:hidden;}
.quote .carousel li					{width:207px; margin-right:10px;}
.quote .support-text				{color:#000; background:none; font-weight:bold; padding:3px 0; float:none;}
body.js .quote .nav-carousel		{left:83px; bottom:8px; top:auto;}
.tweet blockquote p					{font-size:1.7em;}

/* & GUM module */
.hero-home							{height:380px;}
body.js .hero-home					{height:300px;}
body.js .hero-home img				{position:absolute; left:0;}

/* Spotlight-profile module */
/*body.js .spotlight-profile		{height:180px;}*/
.spotlight-profile img				{margin-top:-120px;}
.spotlight-profile h3				{display:none;}
.hover h3							{display:block;}

/* & Spotlight module */
.spotlight							{position:relative; overflow:hidden; height:370px; width:227px; margin-right:10px; cursor:pointer;}
.spotlight img						{position:absolute; bottom:0; right:0;}
.spotlight .support-text			{background:none; padding:3px 0;}
.spotlight .opacity					{z-index:1; position:absolute; bottom:0; left:0; padding:10px 0 30px 0; width:100%; height:177px;}
.spotlight .opacity p				{padding:0 10px; position:absolute; bottom:10px; left:0px;}
.spotlight .opacity blockquote p	{color:#fff; line-height:1.3; margin:0;  position:relative; bottom:auto; left:auto;}

/* & Client module */
.client								{float:right !important;}

/* & Project module */
body.js .project:hover .opacity		{height:60%; top:auto;}

/* & Tweet deck module */
.tweet-deck							{background:url(../../_media/img/bg_tweet-deck.png) no-repeat 0 10px; height:330px; width:701px; margin-top:-200px; position:relative;}
.tweet-deck	h2						{width:156px; height:156px; margin:0 0 64px 40px; background:none; font:normal 1.8em/1.3 "Trebuchet MS", Georgia, "Times New Roman", Times, serif; text-align:center; padding:33px 0 0;}
.tweet-deck	h2 a					{color:#fff; height:100%; line-height:156px; width:100%; display:block;}
.tweet-deck div						{width:207px; margin-right:10px; padding:6px 10px; float:left; display:inline; clear:left; background:rgb(255, 255, 255); /*solid fallback colour for unsupported browsers*/ background-color:transparent; background-color:rgba(255,255,255,0.7); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99ffffff,endColorstr=#99ffffff); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#99ffffff,endColorstr=#99ffffff)";}
.tweet-deck div.extra				{clear:none;}
.tweet-deck .last					{margin-right:0;}
.tweet-deck p						{font-size:1.2em; font-family:"Trebuchet MS", Georgia, "Times New Roman", Times, serif; font-style:normal; clear:both;}
.tweet-deck .support-text			{color:#000; background:none; padding:3px 0 0; color:#666;}
.tweet-deck blockquote				{min-height:5.4em; height:auto !important; height:5.4em;}

/* & maps */
body.js .maps .tabs					{height:435px;}
body.js .maps .tabs .tabs-nav		{width:702px; left:auto; right:0; bottom:auto; top:0;}
.maps .tabs .tabs-content			{height:auto;}
body.js .maps .tabs .tabs-content	{height:435px; width:701px;}
.maps .tabs .tabs-content .tab		{height:auto;}
body#contact.js .maps .tabs .tabs-content .tab {position:absolute; top:0; right:0;}
body.js .maps .tab					{height:435px; overflow:visible;}
.maps .tab .block-detail			{height:auto; width:227px; float:left; display:inline; padding:0; overflow:auto; background:#fff; z-index:+5;}
body.js .maps .tab .block-detail	{position:absolute; top:6em; left:-237px;}
.maps h3							{color:#000;}
.maps h4							{font-size:1.4em;}
.maps .tabs .tabs-nav li			{width:350px; line-height:1;}
	.maps .tabs-2 .tabs-nav li		{width:234px;}
	.maps .tabs-3 .tabs-nav li		{width:33.3%;}
	.maps .tabs-4 .tabs-nav li		{width:25%;}
	.maps .tabs-5 .tabs-nav li		{width:20%;}
/**/.maps .tabs .tabs-nav li.active {background:none;}
body.js .maps .tabs .tabs-nav li	{padding:0;}
.maps .tabs .tabs-nav li a			{padding:.7em 10px .5em; line-height:1; text-align:center; border-right:1px solid #fff;}
.maps .tabs .tabs-nav li.active a	{color:#fff; background:#00adef url("../img/icon_arrow-down.png") no-repeat scroll 50% 0;}
.maps .map-canvas					{height:auto; padding:0; float:right; display:inline; width:704px; position:relative; left:auto; top:auto;}
body.js .maps .map-canvas			{float:none; width:724px; height:435px;}
.maps .map-canvas iframe			{height:650px;}
body.js .maps .map-canvas iframe	{height:435px;}

/* & Reposition module - right col module on case study page and others */
.reposition .tab					{border-bottom:1px solid #ddd;}
.reposition .tab li					{margin:0;}
.reposition .tab div.opacity		{padding:10px; margin:181px auto 0 auto; width:424px; height:auto; background:rgb(000, 173, 238); /*solid fallback colour for unsupported browsers*/ background-color:transparent; background-color:rgba(000, 173, 238, 0.8); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#100adee,endColorstr=#9900adee); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#9900adee,endColorstr=#9900adee)";}
.reposition .tab .support-text		{background:none; float:none; padding:0 34px; color:#000; font-size:1.4em;}
/*.tab div img						{position:absolute; bottom:0; right:0;}*/
.reposition .tab .disclaimer		{font-size:1.2em; margin:0; line-height:1.2; color:#fff; padding:0 34px;}

/* & Case Study Carousel */
#case-study-carousel, 
#case-study-carousel div		{width:444px;}
#case-study-carousel li			{width:222px !important; overflow:hidden; height:250px;}
#case-study-carousel li			{height:400px;}
#case-study-carousel li img		{margin-top:-120px;}
#case-study-carousel li img		{margin-top:-60px;}
#case-study-carousel li div		{width:182px !important; display:block; padding:6px 10px; height:4.8em; position:absolute; left:10px; top:auto; bottom:10px; background:rgb(000, 000, 000); /*solid fallback colour for unsupported browsers*/ background-color:transparent; background-color:rgba(000,000,000,0.7); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000)";}
#case-study-carousel li div		{bottom:38px;}
#case-study-carousel li div p 	{font-size:1.4em; color:#fff;}
#case-study-nav-carousel		{left:20px; top:20px;}



/*
	Pages
	===============================================================================================================
*/

/* & home */
#home .col-50-50 .module			{float:left; display:inline; width:227px;}
body#home.js .col-25-50-25 .col-1	{position:absolute; left:5px; bottom:0;}
body#home.js .col-25-50-25 .col-2	{margin-left:237px;}
body#home.js .col-25-50-25 .col-3	{position:absolute; bottom:0; right:5px;}
#home .col-25-50-25 .col-2 .module	{padding:0;}


/* & culture home */
#culture .tweet-deck, 
#archive .tweet-deck				{width:227px; height:auto; margin-top:0; float:right; display:inline;}
#culture .tweet-deck div, 
#archive .tweet-deck div			{margin-right:0; padding:0 10px;}
#culture .tweet-deck div.extra, 
#archive .tweet-deck div.extra		{margin-top:10px;}
#culture .tweet-deck blockquote, 
#archive .tweet-deck blockquote		{min-height:inherit; height:auto;}
#culture .tweet-deck .support-text, 
#archive .tweet-deck .support-text	{padding:0 0 3px;}
p.twitter-date						{clear:both;}

body.js .clubs						{height:370px; position:relative;}
#culture .col-50-50 .col-1 h3 		{margin-top:0;}
.clubs img							{display:block; position:absolute; bottom:0; right:0;}
.clubs .carousel li					{width:464px; height:370px; display:block; position:relative; margin-bottom:10px;}
body.js .clubs .carousel li			{margin-bottom:0;}
.clubs .opacity						{z-index:1; position:absolute; bottom:0; left:0; padding:10px; height:197px; width:207px;}
.clubs h2							{background:none; position:absolute; top:98px; z-index:1000; color:#000 !important; font-size:1.4em; font-family:"Trebuchet MS", Georgia, "Times New Roman", Times, serif; font-style:normal; font-weight:bold;}
.clubs h3							{font-size:2.4em;}
.clubs .opacity blockquote p		{font-size:1.4em;}
.clubs .opacity p					{background:none; padding:0; margin:0; color:#fff; display:block;}
body.js .clubs .opacity p			{display:block;}
.clubs .opacity blockquote p		{color:#fff; line-height:1.3; position:relative; bottom:auto; left:auto;}

.clubs blockquote p span			{color:#fff; font-size:4em;}
body.js .clubs .nav-carousel		{top:120px;}
.clubs a:hover, 
.clubs a:focus, 
.clubs a:active						{color:#fff;}

#culture .spotlight					{float:left; display:inline;}
#culture .hero-culture				{height:360px;}
#culture .hero-culture .block-title	{position:absolute; bottom:0; left:0; color:#fff; font-size:2.8em; line-height:1.2; padding:10px; width:207px; display:block; height:100px; z-index:+1; margin:0; background:rgb(000, 173, 238); /*solid fallback colour for unsupported browsers*/ background-color:transparent; background-color:rgba(000, 173, 238,0.7); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#9900adee,endColorstr=#9900adee); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#9900adee,endColorstr=#9900adee)";}
#culture .hero-culture .set-height	{height:120px;}
#culture .hero-culture .opacity		{left:237px; width:464px;}
#culture .hero-culture .carousel li	{width:701px; height:360px; margin-bottom:10px;}
body#culture.js .hero-culture .carousel li {margin-bottom:0;}
#culture .col-25					{z-index:1;}
#culture .col-50-50					{z-index:2;}

.teaser-alt h2						{font-size:1.4em; width:207px; font-weight:bold; color:#fff;}
.teaser-alt h2 a					{float:right; display:inline;}
.teaser-alt h2 a:hover				{color:#fff;}
.teaser-alt blockquote p			{font-size:1.4em;}

#culture .quote						{height:180px; padding-bottom:0;}
.quote h2							{color:#000; margin-bottom:6px;}
body.js .quote p					{margin:0; display:block;}

.flickr								{width:227px; height:180px; padding-bottom:30px; float:left;}
.flickr h2							{width:130px;}
.flickr p							{position:absolute; bottom:2px; right:10px; z-index:+5; display:block; margin:0; padding:0;}
.flickr .opacity					{bottom:30px;}
.flickr .flickr-carousel			{width:100%; height:180px; background:url(../img/bg_ajax-loading.gif) no-repeat center;}
.flickr .flickr-carousel div		{height:180px;}
.flickr .carousel li				{width:227px;}
.flickr .carousel img				{width:270px;}
body.js .flickr .nav-carousel		{top:auto; bottom:0; left:0; width:207px; background:#fff; padding:5px 10px; height:20px; display:block;}

.tips								{height:1100px; overflow-y:scroll; overflow-x:hidden;}
body.js .tips						{height:360px;}
#culture .tips .opacity				{display:block; position:relative; padding:3px 0; margin:-28px 0 0;}
#culture .tips h3					{color:#000; padding:3px 10px 0; width:207px;}
#culture .tips h3 span				{display:block; color:#00adee; font-size:2em; position:relative; left:0;}
#culture .tips p					{padding:3px 10px; margin:0; font-size:1.2em; display:block;}
#culture .tips p a					{display:block;}
#culture .tips .carousel li			{width:227px; float:left; display:inline;}
#culture .tips .img-container		{height:180px; overflow:hidden;}
#culture .tips .img-container img	{margin-top:-120px;}


/* & work and approach */
.hero .block-title .support-text	{float:left; display:inline; clear:left; font-size:1.6em; max-width:80%; width:auto !important; max-width:80%;}

.hero .module						{height:360px; overflow:hidden; position:relative;}
.hero .module img					{display:block; position:absolute; top:0; left:0;}
.hero .block-title					{position:absolute; top:90px; left:0; width:100%;} /* Previous top:132px; */

#approach .col-50-50 .col-1, 
#graduates .col-50-50 .col-1, 
#case-study .col-50-50 .col-1		{border-right:1px solid #e1e1e1;}

.support-block p 					{margin-bottom:.8em;}


/* & case study */
#case-study .hero .module					{height:280px;}
#case-study .hero .block-title				{top:102px;}

#case-study .tabs .tabs-nav li				{width:50%;}

#case-study .tabs .tabs-content #tab-1-2	{height:auto;}
#case-study.js .tabs .tabs-content #tab-1-2	{height:400px;}
#case-study #tab-1-2 .support-text			{position:relative; z-index:+2; padding:5px 0; color:#666; background:#fff; margin:10px 0 10px 10px !important; float:left; display:inline; width:424px;}
#case-study.js #tab-1-2 .support-text		{padding-left:80px; width:344px;}

body.js .tabs-short					{height:280px;}
body.js .tabs-short .tabs-content	{height:280px;}
#work .tab h2						{z-index:+5;}
#work .tout h3						{font-size:1.4em; color:#000; font-weight:bold;}
.what-we-do							{background:#de2 url(../../_media/img/bg_tout-what-we-do.png) no-repeat 0 0; height:200px; overflow:hidden;}
#showreel-swf						{width:524px; height:333px; position:absolute; display:none;}
#work dd							{border-bottom:0;}
#work dd ul							{margin-top:.2em;}
#work dd li							{padding:4px 0;}


/* & case-studies */
#what-we-do .hero					{width:701px; position:relative; height:280px; overflow:hidden;}
#what-we-do .hero .block-title		{width:464px; top:45px; z-index:+1;}
#what-we-do .hero .block-summary	{position:absolute; bottom:0; left:0; background:#fff; width:444px; padding:7px 10px 0 10px; margin-bottom:0;}


/* & clients and people */
#clients .col-1-alt, 
#people .col-1-alt, 
#what-we-do .col-1-alt				{width:948px; padding:0;}
#people .image-list li .info		{min-height:14em; margin-top:5px;}
#people.js .image-list li .info		{min-height:inherit; height:auto; margin-top:0;}


/* & graduates */
#graduates .teaser2 p				{padding:3px 10px; margin:0; line-height:1.2; width:207px; display:block; position:absolute; bottom:0; left:0; background:rgb(000, 000, 000); /*solid fallback colour for unsupported browsers*/ background-color:transparent; background-color:rgba(000,000,000,0.7); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000)";}
#graduates .teaser2 h3				{color:#000; font-weight:normal; margin:30px 0 0 30px; width:auto; padding:0;}
#graduates .teaser2 h3 span			{float:none; width:auto; position:relative; top:auto; right:auto; padding:0; display:block; font-size:5em; color:#00adee; margin-bottom:10px; font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; line-height:.6;}
#graduates .teaser2 a				{color:#fff;}
#graduates .teaser2 a:hover			{color:#00adee;}
#graduates .teaser2:hover h3		{padding:0;}


/* & careers */
#careers .hero .block-title			{top:70px;}
#careers dd							{border:0;}
#careers dt							{padding-left:0; width:217px;}
#careers .hero .module .teaser4		{left:auto; top:auto; right:0; bottom:0; width:237px; height:120px; opacity:100;}
#careers .col-75-25 .col-1 h3		{margin-top:20px; font-size:2.2em;}
#careers .col-75-25 .col-1  dd .tout h3	{font-size:.857em; margin:0;}


/* & apply */
#apply dd							{border:0;}
#apply dd li						{float:left; display:inline; width:100%;}
#apply dd li span					{display:block; font-size:1.4em; font-weight:bold;}


/* & thinking */
#thinking .hero, 
#article .hero						{width:701px; position:relative; height:310px;}
#thinking .hero .block-title, 
#article .hero .block-title			{width:464px; top:60px; z-index:+1;}
.hero .block-title .support-text	{max-width:inherit; float:left; display:inline-block; clear:left;}
#thinking .hero .block-title .support-text	{width:auto; max-width:inherit; float:none; display:block; clear:left;}
#thinking .hero h2, 
#article .hero h2, 
#archive .hero h2					{background:#eb008b;}
#thinking .hero p.cta a:hover		{background-position:0 -800px;}
#thinking .hero .block-summary		{position:absolute; bottom:0; left:0; background:#fff; width:444px; padding:7px 10px 0 10px; margin-bottom:0;}
#thinking .col-1 .row				{width:701px; padding:0;}
#thinking .col-1 .reposition		{margin-top:0;}
#thinking .teaser					{width:227px; margin-right:10px; float:left; display:inline; height:200px;}
#thinking .teaser h2				{min-height:2.6em; height:auto !important; height:2.6em; font-size:1.4em; font-weight:bold; width:207px; color:#fff;}
#thinking .teaser p					{color:#fff;}
#thinking .teaser p.support-text	{font-size:1.2em; display:block; color:#00adee;}
#thinking .article					{background:url(/_media/img/img_hero-thinking.jpg) no-repeat center top;}
#thinking .article-2				{margin-right:0;}	
#thinking .article-3				{margin-right:0; float:right; z-index:200;}
#thinking .teaser:hover p			{display:block;}
#article.js .hero img				{visibility:hidden;}

#archive .hero						{position:relative; height:290px; overflow:hidden;}
#archive .hero .module				{height:280px;}
#archive .hero .teaser4				{position:absolute; right:0; bottom:0; width:247px; height:130px; background:#fff; display:block;}
#archive .hero .block-title			{top:110px; width:auto;}
#archive .hero .block-title .support-text 	{max-width:inherit;}
#archive dl							{border-bottom:1px solid #ddd; margin-bottom:20px;}
#archive dt							{clear:both; font-size:1.2em; text-align:right; padding:0 0 10px; width:227px}
#archive dt span.img-container		{height:180px; overflow:hidden; display:block; margin-bottom:5px;}
#archive dt span.img-container img	{margin-top:-130px;}
#archive dd p.cta a:hover			{background-position:0 -800px;}
#archive dd							{padding-top:0; border:0;}
#archive dd h3						{font-size:1.8em; color:#eb008b; margin:0 0 10px;}
#archive dd p.disclaimer			{font-size:.857em; padding:0;}
#archive .reposition				{margin-top:-120px; padding:0;}


/* & article */
#article .hero						{height:300px;}
#article .hero .block-title			{top:60px;}
#article .hero .author				{position:absolute; bottom:0; top:0; left:0; z-index:0; height:100%; background:#fff; width:237px; overflow:hidden;}
#article .hero .author img			{position:absolute; top:0; right:10px;}
#article .hero h2					{font-size:3.2em;}
#article .hero .block-title .support-text	{font-size:1.2em; width:207px !important;}
#article .col-2 .block-summary		{background:none;}
#article .col-2 .block-summary h3	{color:#000;}
#article .col-2 .block-summary p	{font-size:1.2em;}
#article #article-content p			{padding-bottom:0.5em;}

.blogroll h2						{padding:0; margin:0;}
.blogroll h2 a						{width:227px; height:274px; overflow:hidden; display:block;}
.blogroll h2 span					{width:100%; height:100%; position:absolute; top:0; left:0; background:url(../../_media/img/img_blogroll.png) no-repeat 0 0;}
.blogroll h3						{font:normal bold 1.4em/1.2 "Trebuchet MS", Georgia, "Times New Roman", Times, serif; text-align:center; background:#333; color:#fff; float:none; display:block; padding:5px 8px;}
.blogroll ul						{background:url(../img/icon_arrow-blk.png) no-repeat 50% 0; width:100%; overflow:auto; padding:10px 0 0 0;}
.blogroll li						{padding:0 10px; margin-bottom:20px; font-size:1em;}
.blogroll li .support-text			{background:none; color:#000; padding:2px 0 6px; width:100%; font-size:1.2em;}
.blogroll h4						{font-weight:bold; font-family:Georgia, "Times New Roman", Times, serif; font-size:1.4em;}
.blogroll a							{color:#eb008b;}
.blogroll p							{font-size:1.1em; clear:both;}
.blogroll p.blog-link				{padding:0 10px; font-size:1.2em;}


/* & what we do */
#work .hero .block-title			{top:84px;}
#work .hero .video					{height:180px;}
#work .quote						{height:auto; position:absolute; top:190px; right:10px;}
	 body#work.js .quote			{height:142px; position:relative; top:auto; right:auto;}
#work .col-75-25 .tout				{display:none;}
	body#work.js .col-75-25 .tout	{display:block;}
#work .quote blockquote p			{font-size:1.4em;}
#work .hero .block-summary			{position:absolute; bottom:0; left:0; background:#fff; width:444px; padding:7px 10px 0 10px; margin-bottom:0;}
#work .hero .block-summary p		{font-size:1.8em;}

/* & vacancies */
#vacancies dt, 
#vacancies dd						{padding-top:0;}
#vacancies dd .tout					{margin:0 0 10px 0;}

/* & vacancy spec */
#vacancy-spec .col-2 ul				{padding-left:14px; margin:.6em 0 1.2em;}
#vacancy-spec .col-2 ul li			{list-style:disc; line-height:1.2;}


/* & contact */
#contact .img-container				{width:227px; height:180px; overflow:hidden;}
#contact blockquote					{min-height:51px;}


/* & case study */
.gallery							{padding:0 10px; margin-top:60px; position:relative; min-height:180px; height:auto !important; height:180px;}
.gallery h3							{width:100px; position:absolute; top:10px; left:10px;}
.gallery .block-list				{border-top:1px dashed #d7d7d7; position:relative; height:200px;}
.gallery ul							{background:url(../img/bg_gallery.png) no-repeat 100% 0; position:absolute; top:-30px; left:0; min-height:210px; height:auto !important; height:210px;}
#case-study .block-list li			{border:0; padding:0; width:235px; height:147px; overflow:hidden; margin:12px 0 0 114px; text-align:center;}
#view-work							{width:25px; height:25px; position:absolute; right:3px; top:7px; text-indent:-9999px; background:url(../img/icon_magnify.png) no-repeat;}

.col-50-50 .col-1 .support-block  	{margin-right:10px;}
#case-study .col-2 p.cta a:hover	{background-position:0 -800px;}

.figures							{border-top:1px dashed #d7d7d7; margin-top:20px; width:444px; overflow:auto; padding:10px 10px 0 10px;}
.figures p							{float:left; display:inline; width:212px; margin-right:10px;}
.figures p span						{font-size:4.1em; display:block; color:#00adee; line-height:1; margin-top:10px;}

.hero .module .teaser				{width:227px; height:180px; background:#fff; overflow:hidden; position:absolute; top:0; left:0;} /* left:237px;*/
.hero .module .teaser:hover			{opacity:100;}
.hero .module .teaser1				{top:auto; bottom:0;}
.hero .module .teaser2				{left:474px; opacity:100;}
.hero .module .teaser3				{left:711px;}

#graduates .hero .module .teaser img, 
#careers .hero .module .teaser img	{margin-top:-120px;}
#careers .hero .module .teaser2 img	{margin-top:0;}

.teaser h3							{color:#fff; padding:3px 67px 3px 10px; font-size:1.4em; font-weight:bold; position:relative; width:150px;}
.teaser h3 span						{position:absolute; top:3px; right:10px; font-weight:normal;}

/* language variations - french */
html#lang-fr #footer 									{padding-bottom:16px;}
html#lang-fr #footer .col-75-25 .col-1 					{width:948px;}
html#lang-fr .reposition .tab div.opacity				{margin-top:165px;}
html#lang-fr body.js .clubs .nav-carousel				{top:25px;}
html#lang-fr .clubs .opacity							{height:290px;}
html#lang-fr .clubs h2									{top:0;}
html#lang-fr #culture .spotlight .opacity blockquote p 	{font-size:2em;}
html#lang-fr #vacancies .leader .focus-text, 
html#lang-fr #benefits .leader .focus-text, 
html#lang-fr #press .leader .focus-text					{margin-bottom:20px;}
html#lang-fr #contact dd .block-detail .support-text 	{min-height:20px; height:auto !important height:20px;}
html#lang-fr #culture .tweet-deck 						{position:absolute; top:-370px; right:10px;}
html#lang-fr #press dt, html#lang-fr #press dd 			{padding-top:0;}
html#lang-fr #press dd .tout							{margin:0 0 10px;}