/* ------------------------------------------
READING ROOM
Stylesheet: Internal Styles
Author: Reading Room
Updated: 5 March 2009
------------------------------------------ */


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

#mainContent {clear:both; width:100%; min-height:15.625em; margin-top:55px; margin-bottom:1.7em;}
.cs #mainContent{margin-top:15px;}
#content {clear:both; width:100%; margin:0 0 2em 0;}
#contentWide {clear:both; width:100%; margin:0 0 2em 0;}
#contentArticle {clear:both; width:100%; margin:0 0 2em 0;}

#contentHeader {position:relative;}
	#contentHeader div.rssFeed {position:absolute; top:3px; right:32px; padding-left:20px; font-size:0.6875em; line-height:1.5em; background:url(../images/icnRSS.gif) no-repeat left center;} 
	#contentHeader div.twitter {position:absolute; top:3px; right:0px; padding-left:20px; font-size:0.6875em; line-height:1.5em; background:url(../images/icnTwitter.gif) no-repeat left center; z-index: 5;} 

#contentBody {clear:both; width:100%; padding:0;}

/* HEADINGS
------------------------------------------ */

.portfolio h1, .aboutUs h1, .about_services h1, .about_approach h1, .about_process h1, .about_structure h1, .about_OurPartners h1, .news h1, .workForUs h1, .contactUs h1, .theGallery h1, .theGallery_currentExhibition h1, .theGallery_upcomingExhibition h1, .theGallery_previousExhibitions h1 {position:absolute; left:-9999px;}

#contentArticle h1, #jobsDetail h1, #jobsApply h1 {position:static; left:0;}
#content h1, #contentWide h1 {margin-bottom:0.75em;}

#content h2, #contentWide h2 {margin-top:0;}
#contactUs #contentBody h2 {margin-bottom:1em;}

.about_OurPartners h2 {margin-top:2em;}

.cases h1 {position:static; left:auto;}

/* OTHER COMPONENTS
------------------------------------------ */

#intro {width:65%; margin-bottom:1.5em;}

#mainContent blockquote {clear:right; float:right; width:23%; /*margin:20px 35px 0 0;*/ margin:20px 15px 0 0; text-align:right;}
#mainContent #extra {clear:right; float:right; width:23%; margin:0 15px 0 0;}
#mainContent #extra .cta {margin-top:0;}

#content dt, #contentWide dt {font-weight:800;}
#content p.standFirst, #contentWide p.standFirst {font-size:0.9375em;}
#content img.right, #contentWide img.right, #contentArticle img.right {float:right; margin:0 0 20px 25px;}
#content img.left, #contentWide img.left, #contentArticle img.left {float:left; margin:0 25px 20px 0;}

#contentArticle a.launch {padding-right:8px; background:url(../images/btnArrowForward.gif) no-repeat right center;}

.case-study #contentArticle {width:65%;clear:none;}


/* ------------------------------------------------------------------------------------
-- LISTINGS
------------------------------------------------------------------------------------ */

#listingPage {list-style:none; padding:0; margin:0 0 0 0;}
	#listingPage li {width:100%; margin-bottom:1.5em;}
	#listingPage img {float:left; padding:4px 5px 6px; margin:0; background:url(../images/bgThumbFrame.gif) no-repeat top left;}

	#listingPage h3 {font-size:1.0909em; font-weight:800; margin:0;}
	#listingPage h3 a {text-decoration:none;}
	#listingPage h3 a:hover, #newsList dd.title a:focus, #newsList dd.title a:active   {text-decoration:underline;}

	#listingPage p {margin:0;}
	#listingPage p.date {margin-bottom:0; color:#333;}

	

/* ------------------------------------------------------------------------------------
-- NEWS & PORTFOLIO LIST
------------------------------------------------------------------------------------ */

#portfolioList {clear:both; width:100%; margin:1em 0 3em;}
#portfolioList.news .portfolioItem h3  {margin-bottom:0; line-height:1.3em;}
/* #portfolioList p.date {margin-bottom:0;} */

.portfolioRow {clear:both; width:100%; margin-bottom:2em;}

.portfolioItem {position:relative; float:left; clear:none; width:22%; min-height:6.25em; margin-left:4%;}
.portfolioItem:first-child {margin-left:0;}
.portfolioItem h3 {margin:0 5px 1em 5px; font-size:0.75em; font-weight:800; }
.portfolioItem p {margin:0 5px 5px;}
.portfolioItem p.date {margin:0.5em 5px;}
.portfolioItem p.readMore {position:absolute; bottom:0; left:0; border-bottom: 2px solid #d2d2d2;text-align: right;}
.portfolioImg {padding:2px; margin-bottom:0.5em; border:1px solid #ccc; overflow:hidden; /*background: url(../images/bgThumbFrameBig.gif) left top no-repeat;*/}
.portfolioImg a {display:block;}
.portfolioImg img {display:block; width:100%; height:auto;}

#newsList {clear:both; width:100%;}

.cases .portfolioRow {margin-bottom:1em;}
.cases .portfolioItem h3 {font-size:0.6875em; margin-bottom:0;}

body.portfolioDetail #mainContent {margin-top:75px;}

img.portfolio_aside {float:right;}

/* SHOWCASED ITEM
------------------------------------------ */

#portfolioShowcase {margin-bottom:2em; clear:both; width:100%;}
	#portfolioShowcase .portfolioItem {clear:both; float:none; width:100%; min-height:0; padding-right:0; margin:0 0 1em;}
	#portfolioShowcase .portfolioItem .portfolioImg {float:left; margin:0 4% 0 0;}
	#portfolioShowcase .portfolioItem .portfolioImg img {width:auto;}
	#portfolioShowcase .portfolioItem h3 {font-size:0.875em; margin:0 0 0.35em 26%;}
	#portfolioShowcase .portfolioItem p {margin-left:26%;}

/* News detail styles */
.newsblock {width:100%; margin-top:1.5em;}
.newsblock img {float:right; margin-left:20px;}

/* JS GENERATED PORTFOLIO
------------------------------------------ */

#portfolioSlider {position:relative; width:800px; margin:2em auto 0; background:#fff;}
/* .cases #filterOptions h3 {float:left; margin:0 5px 0;} */
#portfolioSlider #portfolioList {position:relative; width:720px; /*height:125px;*/ margin:0 auto 1em auto; overflow:hidden;}
#portfolioSlider .portfolioContainer {position:relative; width:6000px; left:0;}
#portfolioSlider .portfolioRow {clear:none; float:left; width:724px; height:120px; margin:0;}
#portfolioSlider .portfolioItem {width:176px; margin:0 5px 0 0; cursor:pointer;}
#portfolioSlider .portfolioImg {width:170px; height:70px;}
#portfolioSlider .selected .portfolioImg {padding:0; border:3px #1a7a80 solid;}

#portfolioSlider .scroll {position:absolute; top:0; left:0; width:30px; height:76px; overflow:hidden; font-size:0.8125em; cursor:pointer;}
#portfolioSlider .right {left:auto; right:0;}
#portfolioSlider .off {cursor:default;}
	#portfolioSlider .scroll img {display:block;}

	#portfolioSlider .portfolioRow {visibility:hidden;}
	#portfolioSlider .portShow {visibility:visible;}

.caseStudyContainer {width:800px; min-height:400px; margin:1em auto 0; background:#fff;}
	.caseStudy {min-height:370px; padding:15px; border:1px solid #555;}
	.caseStudy .column {float:left; width:30%; margin-left:5%;}
	.caseStudy .colFirst {margin:140px 0 0;}
	.caseStudy h3 {margin-top:0; font-size:0.8125em;}
	.caseStudy .visit {margin-top:2em;}

	.caseStudy .tools {clear:both; padding:1em 0 0; min-height:0;}
	.caseStudy .tools ul {text-align:right; list-style:none; padding:0; margin:0; text-transform:lowercase;}
	.caseStudy .tools li {display:inline; margin:0 0 0 10px;}

	#c-and-b {color:#fff; background:#970135 url(/images/case-studies/c-and-b-bg.png) no-repeat 0 0;}

	

/* ------------------------------------------------------------------------------------
-- CONTACT US
------------------------------------------------------------------------------------ */

#contactAddress {clear:both; width:100%; margin:0 0 2.5em 0; padding:0 0 1em; border-bottom:1px solid #d3d3d3;}
	#contactAddress img {float:left; margin:0 0 0.35em;}



/* Office locations */
.locationWrapper {clear: both; float: left; width: 100%;}

.locationContainer {float:left; width:23.5%; margin-left:2%; overflow:hidden;}
.locationContainer:first-child {margin-left:0;}
.locationContainer h2 {font-size:1.1875em;font-weight:800;margin:0;clear:left;}
.locationContainer ul {list-style:none; padding:0; margin:0 0 1em;}
.locationContainer ul li {padding:0; margin:0;}
.locationContainer ul li a {font-weight:normal;}
.locationContainer p.viewMap {}
.locationContainer p.viewMap a {font-weight:bold;}


/* Google map container */
.mapsContainer {clear:both; width:100%; height:260px; margin-bottom:1em; background:url(../images/bgMapFrameRight.gif) no-repeat right top;}
	#mapsInner {padding:4px 0 6px 5px; background:url(../images/bgMapFrameLeft.gif) no-repeat left top;overflow:hidden;}
	#mapsInner #map_canvas {height:250px;}
	#mapsInner #map_canvas img {float:none; display:block; margin:0 auto;}


	
/* ------------------------------------------------------------------------------------
-- CROSS-TEMPLATE ELEMENTS
------------------------------------------------------------------------------------ */

div.back {float:left; margin-top:1.25em;}
div.back p {padding-left:8px; margin-bottom:0; background:url(../images/btnArrowBack.gif) no-repeat left center;}

	
/* PAGINATION
------------------------------------------ */

.pagination {clear:both; padding-top:1em; border-top:1px solid #dcdcdc;}
.pagination p.pageNumber {float:left; margin-bottom:0; line-height:1.8em;}

.pageNav {text-align:right;}
.pageNav ul {display:inline; padding:0; margin:0 0 0 10px;}
	.pageNav p {display:inline; margin:0;}
	.pageNav li {display:inline; padding:0; margin:0 0.2em;}
	.pageNav li.prev {padding-left:10px; background:url(../images/btnArrowBack.gif) no-repeat left center;}
	.pageNav li.next {padding-right:10px; background:url(../images/btnArrowForward.gif) no-repeat right center;}


/* FILTER
------------------------------------------ */

#filterResults {position:relative; clear:both; width:100%; text-align:left;}
#filterLinksContainer {border:1px solid #ccc; /*border-bottom:1px solid #f4f4f4;*/ margin:0; background:#f4f4f4;}

/* Filter links */
.filterLinks {float:left; padding:1em;}
	.filterLinks h3 {margin:0 0 0.25em; font-size:0.875em; line-height:normal; font-weight:800;}
	.filterLinks ul {position:static; list-style:none; margin-bottom:0; margin-left:12px;}
		.filterLinks li {font-size:0.75em; margin-bottom:0.35em; padding-left:10px; background: url(../images/bltArrow.gif) left center no-repeat;}
		.filterLinks li a {font-weight:800;}
		.filterLinks li a.on {color:#1a7a80;}

/* Filter options tab */
#filterOptions {float:right; width:100%; border-top:2px solid #ccc; margin-top:-1px; text-align:right; /* background:url(../images/bgFilterLine.gif) top left repeat-x; */}
	#filterOptions h3 {float:right; padding:0; margin:0 32px 0 0; font-size:0.75em; background:#eee url(../images/bgFilterTabRight.gif) no-repeat bottom right;}
	#filterOptions a {display:block; padding:0; background:url(../images/bgFilterTabLeft.gif) no-repeat bottom left;}
	#filterOptions a span {display:block; padding:0.5em 1em 0.75em 1em; margin:0 8px; background:url(../images/bgFilterTabCentre.gif) repeat-x bottom left;}
	/* #filterResults hr {clear:both;} */
	.portfolio #filterOptions {display: none;}
	
/* Static Filter Links as tabs - EG 23.04.10 */
#jobsList #filterOptions{float:left; margin-bottom:20px;}
#jobsList #filterOptions h3{float:left; margin-right:4px;}
#jobsList #filterOptions a span{padding:0.5em 0.8em 0.75em 0.8em;}


/* ARTICLE TOOLS
------------------------------------------ */

#articleTools {clear:both; list-style:none; width:100%; padding:0; margin:0;}
#articleTools li {float:left; padding:0; margin:0 1.5em 0 0;}
li.printPage a {display:block; padding-left:20px; line-height:2em; background:url(../images/icnPrint.gif) left center no-repeat;}
li.clipArticle a {display:block; float:left; padding-left:20px; margin-right:0; line-height:2em; background: url(../images/icnClip.gif) left center no-repeat;}

li.clipArticle a.toolTip {position:relative; padding:0; text-decoration:none; background:none; }
	li.clipArticle a.toolTip img {vertical-align:middle; padding:0 0 0 3px; cursor:help;}
	li.clipArticle a.toolTip span {visibility:hidden; position:absolute; left:-9000em; bottom:2em; width:300px; padding:1em; border:2px solid #1a7a80; font-weight:800; line-height:1.4em; color:#000;}
	li.clipArticle a.toolTip span em {font-style:normal; font-weight:800;}
	li.clipArticle a.toolTip:hover span, li.clipArticle a.toolTip:focus span, li.clipArticle a.toolTip:active span {visibility:visible; left:0; background:#f1f1f1;}



/* ------------------------------------------------------------------------------------
-- ACCORDION
------------------------------------------------------------------------------------ */

#accordion {width:65%;}
.accordionInner {margin:0 0 0.5em; background:url(/images/bgAccordionBot2.gif) right bottom no-repeat;}

.accordionInner h2 {position:relative; height:29px; padding-left:30px; margin:0; overflow:hidden; background:url(/images/hdrAccordion.gif) no-repeat 100% 0;}
.accordionInner h2 span {position:absolute; top:0; left:0px; right:30px; display:block;  height:100%; background-repeat:no-repeat; background-position:0 0;}

/* when js is enabled */
.accordionInner h2.toggle {padding:0; background-position:100% -58px;}
.accordionInner h2 a {position:relative; display:block; height:29px; margin-left:30px; padding-right:30px; background:url(/images/hdrAccordion.gif) no-repeat 100% -58px;}
.accordionInner h2.toggle span {left:auto; right:30px; width:100%; cursor:pointer;}

/* about us - services */
h2.hdrStrategyRight span {background-image:url(/images/hdrStrategyRight.gif);}
h2.hdrStunningUserExperience span {background-image:url(/images/hdrStunningUserExperience.gif);}
h2.hdrDigComConversations span {background-image:url(/images/hdrDigComConversations.gif);}
h2.hdrTheTechnicalBit span {background-image:url(/images/hdrTheTechnicalBit.gif);}
h2.hdrSpecialistServices span {background-image:url(/images/hdrSpecialistServices.gif);}
h2.hdrGettingYourselfHeard span {background-image:url(/images/hdrGettingYourselfHeard.gif);}

/* about us - process */
h2.hdrTheRightTeamForYou span {background-image:url(/images/hdrTheRightTeamForYou.gif);}
h2.hdrKickingOff span {background-image:url(/images/hdrKickingOff.gif);}
h2.hdrTakingShape span {background-image:url(/images/hdrTakingShape.gif);}
h2.hdrTheReallyCleverBit span {background-image:url(/images/hdrTheReallyCleverBit.gif);}
h2.hdrActuallyTheEasyBit span {background-image:url(/images/hdrActuallyTheEasyBit.gif);}
h2.hdrFineTuning span {background-image:url(/images/hdrFineTuning.gif);}
h2.hdrALongTermRelationship span {background-image:url(/images/hdrALongTermRelationship.gif);}

/* about us - buying solutions */
h2.benefits span{ background-image:url(/images/headings/hdr_benefits.gif); }
h2.benefitsRR span{ background-image:url(/images/headings/hdr_benefits_rr.gif); }
h2.frameworkDetails span{ background-image:url(/images/headings/hdr_framework_details.gif); }
h2.services span{ background-image:url(/images/headings/hdr_services.gif); }
h2.contacts span{ background-image:url(/images/headings/hdr_contacts.gif); }


.accordionInner h2 a:hover, .accordionInner h2 a:focus, .accordionInner h2 a:active, .accordionInner h2 a.on {background-position:100% -87px;}
.accordionInner h2 a:hover span, .accordionInner h2 a:focus span, .accordionInner h2 a:active span, .accordionInner h2 a.on span {background-position:0 100%;}

.accordionItem {margin:0.5em 10px 0 0; padding:0 0 5px 10px; background: url(/images/bgAccordionBot.gif) left bottom no-repeat;}
.accordionItem h3 {padding:0.75em 0pt 0.5em; margin:0;}



/* ------------------------------------------------------------------------------------
-- SITEMAP
------------------------------------------------------------------------------------ */

#sitemap {margin-left:1.5em; list-style:none;}
#sitemap ul, #sitemap ul ul {margin-top:0.5em; list-style:none; margin-left:0;}
#sitemap li {font-weight:800; margin-bottom:0.5em;}
#sitemap li li, #sitemap li li li {font-weight:normal; margin-bottom:0.5em; font-size:1em; margin-left:1.5em; background:url(../images/bgGreyBullet.gif) no-repeat left center; padding-left:15px;}
#sitemap li li a, #sitemap li li li a {font-weight:normal;}

/* Gallery */
#mainContent .galleryCopy h2 { font-size: 22px; color: #333333; margin: 15px 0 0 0; padding: 0; }
#mainContent .galleryCopy h3 { font-size: 17px; color: #666666; margin: 0 0 20px 0; padding: 0;}

#mainContent #galleryThumbs {clear:right; float:right; width:32.3%; /*margin:20px 35px 0 0;*/ margin:20px 0 0 0; /*text-align:right;*/}
#mainContent #galleryThumbs h3 {clear:both;border-bottom: 1px solid #a7a7a7; color: #222222; text-transform: uppercase; margin:0; padding:0 0 5px 0; }
#mainContent #galleryThumbs ul { overflow:hidden;margin-bottom: 18px;list-style:none; /*display: inline;*/ margin:10px 0 40px 0; padding:0; /*border:1px solid red;*/ }
#mainContent #galleryThumbs li { display: inline; } /* IE 6,7 fix */
#mainContent #galleryThumbs li a img { display:block; float:left; margin:0 3px 3px 0; padding:0; /*border:1px dotted red;*/}

/* This has been implemented in global.css
#mainContent #gallerySignUp { clear: both; background-color: #e7e7e8; border: 1px solid #a7a7a7; }
#mainContent #gallerySignUp p { color: #222222; font-size:13px; font-weight: bold; padding: .5em;  }*/



/* ------------------------------------------------------------------------------------
-- Work For Us
------------------------------------------------------------------------------------ */

/*
#jobsList, #jobsDetail {width:100%; margin:0 0 2.5em 0; padding:0 0 1em; border-bottom:1px solid #d3d3d3;}
*/
#jobsList, #jobsDetail {width:65%; float:left; margin:0 0 2.5em 0; padding:0 0 1em; border-bottom:1px solid #d3d3d3;}
#jobsApply, .jobsApply  {width:100%; float:left; margin:0 0 2.5em 0; padding:0 0 1em; border-bottom:1px solid #d3d3d3;}
	#jobsList #intro{width:100%;}
	#jobsList #extra {width:auto; margin-bottom:20px; margin-right:0;}
	#jobsList #extra p.cta a{padding-right:10px;}
	#jobsList #contentHeader div.rssFeed {right:0;}
	
	#mainContent.workForUs #jobThumbs{margin-top:0;}
	
	ul.list li{list-style:circle;}
	ul.list li p{margin:0;}
	
	.extra_pad{margin-bottom:30px;}
	.extra_pad_top{margin-top:10px;}
	
/* Last FM List */
#mainContent #jobThumbs ul.listeningList{margin-bottom:0;}
ul.listeningList li{clear:left; float:left; width:100%; margin-bottom: 0.25em; }
ul.listeningList li p {float:left; padding-left: 4px;}
ul.listeningList li img{float:left; width: 32px; height: 32px;}
ul.listeningList li .artist{font-weight:bold; display:block;}

div.toolTip {
	display: block; 
	padding: 0 13px 0 0; 
	border-left: 1px solid #5e3e55;
	background: url(/images/tooltipPointer.gif) top right no-repeat; 
	position: absolute; 
	width: 222px; 
	font-weight: normal; 
	font-size: 1em; 
	z-index: 100;}
div.toolTip .inner {display: block; border-bottom: 1px solid #5e3e55;  border-top: 1px solid #5e3e55;}
div.toolTip .bg {margin: 2px; background: url(/images/tooltipBg.gif) repeat-x; display: block;  }
div.toolTip strong { font-size: 1.273em; display: block; padding: 10px 0 3px 10px; color: #222; text-transform: uppercase; font-weight: bold;}
div.toolTip em {font-style: normal; color:#1A7A80; display: block; padding: 0 0 0 10px; font-weight: bold;}
div.toolTip p { padding: 7px 10px 10px 10px; color: #666; margin-bottom: 0px;}


#mainContent #jobThumbs {clear:right; float:right; width:32.3%; margin: 0;}
#mainContent #jobThumbs h3 {clear:both;border-bottom: 1px solid #a7a7a7; color: #222222; text-transform: uppercase; margin:0; padding:0 0 5px 0; }
#mainContent #jobThumbs ul { margin-bottom: 18px;list-style:none; margin:10px 0 40px 0; padding:0; }
#mainContent #jobThumbs li { display: inline;} /* IE 6,7 fix */
#mainContent #jobThumbs li img { display:block; float:left; margin:0 3px 3px 0; padding:0; }

#mainContent #jobThumbs ul.thumbJobs { position: relative; height: 189px; list-style:none;  padding:0; margin: 0;}
#mainContent #jobThumbs .thumbJobs li { display: inline-block; float: left; position: relative; margin: 0 2px 2px 0; width: 60px; height: 60px;} /* IE 6,7 fix */
#mainContent #jobThumbs .thumbJobs li img { z-index: 50; position: relative; display:block; margin:0; padding:0; border:1px solid white; width: 60px; height: 60px;}

#jobThumbs .jobQuotes {position: relative; margin:10px 0 40px 0;}
#jobThumbs .jobQuotes .quote {display: none; position: absolute; z-index: 1030;}

#quote1 {top: -8px; right: 244px;}
#quote2 {top: -8px; right: 183px;}
#quote3 {top: -8px; right: 119px;}
#quote4 {top: -8px; right: 57px;}
#quote5 {top: 39px; right: 244px;}
#quote6 {top: 39px; right: 183px;}
#quote7 {top: 39px; right: 119px;}
#quote8 {top: 39px; right: 57px;}
#quote9 {top: 63px; right: 244px;}
#quote10 {top: 63px; right: 183px;}
#quote11 {top: 63px; right: 119px;}
#quote12 {top: 63px; right: 57px;}

#mainContent #jobThumbs .tweet-h3 {margin-top: 40px;}
#mainContent #jobThumbs #tweet li {display: block;}
#mainContent #jobThumbs #tweet li a.time {color: #666;}
#mainContent.proactive-usability blockquote p.largest { font-family: Arial Narrow; font-size: 1.1em;}
#mainContent.proactive-usability blockquote p.large {font-size: 0.9em;}