/* ------------------------------------------
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:0; right:32px; padding-left:20px; font-size:0.6875em; line-height:1.5em; background:url(../images/icnRSS.gif) no-repeat left center;} 

#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 {position:absolute; left:-9999px;}

#contentArticle h1, #jobsDetail 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;}

#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%;}


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

#listingPage {list-style:none; padding:0; margin:1em 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;}
.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;}

/* 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;}

#jobsList, #jobsDetail {width:100%; margin:0 0 2.5em 0; padding:0 0 1em; border-bottom:1px solid #d3d3d3;}

/* Office locations */
.locationWrapper {clear:both; float:left;width:100%;}
.locationContainer {float:left; width:32%; 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;} */


/* 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; 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);}

.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;}