/* @override http://tbwa.lab/assets/styles/tbwa.css */

/* -------------------------------------------------------------- 
   
   tbwa.css
   * Overrides rules set up in typography.css and grid.css
   * Adds further custom classes
  
   * typography.css and grid.css are part of the Blueprint CSS
     Framework
   * http://bjorkoy.com/blueprint 
  
   © 2007 Alex Torrance
   http://alextorrance.co.uk
  
-------------------------------------------------------------- */

/* Grid Overides
   Resized grid to 900px wide, 12 columns at 60px wide with 10px
   right hand margin.
-------------------------------------------------------------- */

body {
	text-align: left;
	margin: 30px 30px 36px 30px;
}

/* A container should group all your columns. */
#container {
	margin: 0;
	width: 840px; /* Total width */
}

#popup-container {
	margin: 0;
	width: 560px;
}

.column {
	margin: 0 10px 0 0;
}

/* Nested Columns */
/*.column .column {
	margin-bottom: 0;
}*/

/* The first and last elements in a multi-column 
   block needs one of these classes each. */
.first { margin-left: 0; }
.last { margin-right: 0; }

/* Use these classes to set how wide a column should be. */

.span-1 { width: 60px; }
.span-2 { width: 130px; }
.span-3 { width: 200px; }
.span-4 { width: 270px; }
.span-5 { width: 340px; }
.span-6 { width: 410px; }
.span-7 { width: 480px; }
.span-8 { width: 550px; }
.span-9 { width: 620px; }
.span-10 { width: 690px; }
.span-11 { width: 760px; }
.span-12 { width: 830px; margin-left: 0; margin-right: 0; }

/* Add these to a column to append empty cols. */
.append-1   { padding-right: 70px; }
.append-2   { padding-right: 140px; }
.append-3   { padding-right: 210px; }
.append-4   { padding-right: 280px; }
.append-5   { padding-right: 350px; }
.append-6   { padding-right: 420px; }
.append-7   { padding-right: 490px; }
.append-8   { padding-right: 560px; }
.append-9   { padding-right: 630px; }
.append-10  { padding-right: 700px; }
.append-11  { padding-right: 770px; }

/* Add these to a column to prepend empty cols. */
.prepend-1   { padding-left: 70px; } 
.prepend-2   { padding-left: 140px; }
.prepend-3   { padding-left: 210px; }
.prepend-4   { padding-left: 280px; }
.prepend-5   { padding-left: 350px; }
.prepend-6   { padding-left: 420px; }
.prepend-7   { padding-left: 490px; }
.prepend-8   { padding-left: 560px; }
.prepend-9   { padding-left: 630px; }
.prepend-10  { padding-left: 700px; }
.prepend-11  { padding-left: 770px; }

/* Typography Overides
-------------------------------------------------------------- */

body {
	font-family: "Lucida Grande", Verdana, Arial, sans-serif;
}

/* TBWA\ Header
-------------------------------------------------------------- */

#header {
	height: 72px;
	margin-bottom: 0;
}

#header h1 {
	font-size: 1px;
	line-height: 1px;
	height: 23px;
	background-image: url(/assets/images/logos/tbwa-logo-transparent.gif);
	background-repeat: no-repeat;
	background-color: #E13337;
	text-indent: -5000px;
	margin-bottom: 0;
	padding: 0;
}

#header h1 a {
	display: block;
	height: 100%;
	width: 100%;
}

#header h1 a:hover {
	background-image: url(/assets/images/logos/tbwa-logo.png);
	background-repeat: no-repeat;
}

#header p.contact {
	color: #999;
	font-family: Futura, Arial, Verdana, sans-serif;
	font-size: 10px;
	line-height: 12px;
	margin-bottom: 0;
}

#header p.contact a, #header p.contact a:hover {
	color: #999;
	background: none;
}

#header ul.menu, #header ul.menu-icons {
	list-style-type: none;
	border: 1px solid #999;
	border-width: 1px 0;
	margin: 1em 0;
}

#header ul.menu li {
	float: left;
	width: 140px;
}

#header ul.menu li.last {
	width: 130px;
}


#header ul.menu li a {
	display: block;
	height: 100%;
	width: 100%;
	color: #999;
	font-family: Futura, Arial, Verdana, sans-serif;
	line-height: 23px;
	text-transform: uppercase;
	letter-spacing: 2px;
}

#header ul.menu li a:hover, #header ul.menu li a.here {
	background: transparent;
	border-bottom: 2px solid #999;
	height: 21px;
	line-height: 21px;
}

#header ul.menu-icons {
	padding-left: 10px;
	/*width: 140px`;*/
}

#header ul.menu-icons li {
	line-height: 23px;
	width: 23px;
	float: right;
	overflow: hidden;
	margin-bottom: 0;
}

#header #colourway {
	float:right; 
	text-align:left;
	font-size: 10px;
	line-height: 12px;
	margin:0px;
	padding:0px;
	color: #999;
	font-family: Futura, Arial, Verdana, sans-serif;
	}
#header #colourway,
#header #colourway a,
#header #colourway a:hover,
#header #colourway a:visited
{
	text-decoration:none;
	background-color:transparent;
}


a#filter-button {
	display: block;
	width: 100%;
	height: 100%;
	background-image: url(/assets/images/logos/filter-button.png);
	background-repeat: no-repeat;
	text-indent: -5000px;
}

a#search-button {
	display: block;
	width: 100%;
	height: 100%;
	background-image: url(/assets/images/logos/search-button.png);
	background-repeat: no-repeat;
	text-indent: -5000px;
}

/* Sub Menu
-------------------------------------------------------------- */

ul.sub-menu {
	list-style-type: none;
	border: 1px solid #E13337;
	border-width: 1px 0;
	margin: 1em 0;
}

ul.sub-menu li a {
	display: block;
	height: 100%;
	width: 100%;
	font-family: Futura, Arial, Verdana, sans-serif;
	line-height: 23px;
	text-transform: uppercase;
	letter-spacing: 2px;
}

ul.sub-menu li a:hover, ul.sub-menu li a.here {
	background: transparent;
	border-bottom: 2px solid #E13337;
	/*height: 21px;*/
	line-height: 21px;
}


/* TBWA\ Footer
-------------------------------------------------------------- */

#footer {
	border-top: 1px solid #999;
	border-width: 1px 0;
	margin: 1em 0;
	line-height: 2em;
}

ul.footer-menu {
	list-style-type: none;
	padding: 0;
	margin: 0;
	font-size: 10px;
	line-height: 18px;
}

ul.footer-menu li {
	float: right;
	margin: 0 0 0 10px;
}

ul.footer-menu li a {
	display: block;
	height: 100%;
	width: 100%;
}

ul.footer-menu li a:hover {
	background: transparent;
}


/* Headings
-------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6 {
	font-family: Futura, Helvetica, Arial, "Lucida Grande", Verdana, sans-serif;
	font-weight: normal;
	clear: both;
}

h1 { font-size: 24px; line-height: 36px; }
h2 { font-size: 16px; line-height: 18px; margin: 0 0 18px 0; }
h2 a { /*padding: 0.2em 0.4em 0 0;*/ background-color: #E13337;	color: #FFF; }
h3 { font-size: 14px; line-height: 18px; margin: 0 0 18px 0; }
h3.date { line-height: 36px; margin: 0; text-transform: uppercase; letter-spacing: 2px;}
h4 { font-size: 14px; color: #000; }

.section-heading {
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-bottom: 0;
}

.section-divide { background: #BBB; }
.section-divide h2 { margin-bottom: 0; }

/*  Text elements
 -------------------------------------------------------------- */

p { margin: 0 0 18px 0; text-align: left; }
a { text-decoration: none; outline: none; }
a img, a:hover img { border: none; background-color: transparent; } 

/* Custom Classes
 -------------------------------------------------------------- */

.pullquote {
	margin: 0 0 27px 0;
}

.pullquote p {
	padding: 15px 15px 0 15px;
}

.pullquote p q {
	font-family: Constantia, "Palatino Linotype", Palatino, Georgia, "Times New Roman", Times, serif;
	font-size: 18px;
	font-style: italic;
	line-height: 27px;
}

.pullquote p cite {
	font-size: 14px;
	font-style: normal;
	margin: 0 0 1em 0;
	padding: 0 15px;
}

.date { font-weight: normal; }
.post-info { font-size: 10px; line-height: 18px; margin-bottom: 18px; }

/* Popularity Scale */

.popular-1, h2.popular-1 a { background: #E13337; }
.popular-2, h2.popular-2 a { background: #BE3337; }
.popular-3, h2.popular-3 a { background: #A13337; }
.popular-4, h2.popular-4 a { background: #823337; }
.popular-5, h2.popular-5 a { background: #643337; }

h2.popular-1, h2.popular-2, h2.popular-3, h2.popular-4, h2.popular-5 {
	display: inline;
	color: #FFF;
	/*font-weight: bold;*/
}

.popular-1 a, .popular-2 a, .popular-3 a, .popular-4 a, .popular-5 a {
	display: inline;
	color: #FFF;
}

.popular-1 a:hover,
.popular-2 a:hover,
.popular-3 a:hover,
.popular-4 a:hover,
.popular-5 a:hover {
	background: #E13337;
	color: #FFF;
}

.right { text-align: right; }

/* Case Study - Convention, Vision & Dispruption */

.convention, .vision, .disruption {
	background-repeat: no-repeat;
	background-position: top right;
	height: 162px;
}

/* Lists
-------------------------------------------------------------- */

/* Article Lists */

ul.article-list {
	list-style: none;
	padding: 0;
	margin: 0 0 18px 0;
}

ul.article-list li.popular-1,
ul.article-list li.popular-2,
ul.article-list li.popular-3,
ul.article-list li.popular-4,
ul.article-list li.popular-5, 
ul.article-list li.popular-1 a,
ul.article-list li.popular-2 a,
ul.article-list li.popular-3 a,
ul.article-list li.popular-4 a,
ul.article-list li.popular-5 a {
	background: transparent;
}

ul.article-list li.popular-1 a { color: #E13337; }
ul.article-list li.popular-2 a { color: #BE3337; }
ul.article-list li.popular-3 a { color: #A13337; }
ul.article-list li.popular-4 a { color: #823337; }
ul.article-list li.popular-5 a { color: #643337; }

ul.article-list li.popular-1 a:hover { color: #FFF; background: #E13337; }
ul.article-list li.popular-2 a:hover { color: #FFF; background: #BE3337; }
ul.article-list li.popular-3 a:hover { color: #FFF; background: #A13337; }
ul.article-list li.popular-4 a:hover { color: #FFF; background: #823337; }
ul.article-list li.popular-5 a:hover { color: #FFF; background: #643337; }
ul.article-list li a:hover span.date { color: #FFF; }

/* Tag Clouds / Charts */

ol.tag-list { list-style: none; padding: 0; margin: 0 0 18px 0; }
ol.tag-list li { display: inline; white-space: nowrap; }
ol.tag-list li a { padding-left: 5px; display: block; }
ol.tag-list li a.popular-1 { width: auto; }
ol.tag-list li a.popular-2 { width: 70%; }
ol.tag-list li a.popular-3 { width: 50%; }
ol.tag-list li a.popular-4 { width: 30%; }
ol.tag-list li a.popular-5 { width: 10%; }
ol.tag-list li a:hover { background: #E13337; }
ol.tag-cloud { list-style: none; padding: 0; margin: 0 0 18px 0; }
ol.tag-cloud li { display: inline; }
ol.tag-cloud li a { color: #FFF; margin-right: 5px; padding: 0;}

/* Post Info */

dl.post-info { display: block; }
dl.post-info dt { font-weight: normal; margin-right: 5px; clear: left; } /* float: left; } */
dl.post-info dd { margin-left: 0; margin-right: 5px; float: left; }
dl.post-info dd.last { clear: right; }
ul.post-info { float:left; list-style: none; margin: 0 0 18px 0; }

/* Notes */

.note p {
	margin: 9px 5px;
		font-family: Constantia, "Palatino Linotype", Palatino, Georgia, "Times New Roman", Times, serif;
	font-style: italic;
}
.note { margin-bottom: 36px; }

/* Gallery
-------------------------------------------------------------- */

/*
#gallery {
	display: none;
	position: absolute;
	background-color: #fff;
	text-align: left;
	padding: 1em 0;
	border: 1px solid #999;
	overflow: hidden;
	margin: 0 70px;
}

#gallery-container {
	margin: 0 70px;
}

#gallery-image-display {
	position: relative;
	display: block;
	width: 550px;
	height: 415px;
	clear: both;
	margin: 0 0 1.5em 0;
}

#gallery-movie-display {
	position: relative;
	display: block;
	width: 428px;
	height: 256px;
	clear: both;
	margin: 0 0 1.5em 0;
}

.gallery-image-holder {
	position: absolute;
	top: 0px;
	left: 0px;
	background-position: center;
	width: 100%;
	height: 100%;
}

ul.gallery-nav {
	text-align: right;
	float: right;
}

ul.gallery-nav li {
	float: left;
	margin-left: 1em;
}

#overlay {
	background-image: url(/assets/images/logos/overlay.png);
}

* html #overlay {
	background-color: #000;
	back\ground-color: transparent;
	background-image: url(/assets/images/logos/blank.gif);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/assets/images/logos/overlay.png", sizingMethod="scale");
}
*/

#lightbox{
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	}

#lightbox a img{ border: none; }

#outerImageContainer{
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
	}

#imageContainer{
	padding: 10px;
	}

#loading{
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
	}
#hoverNav{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
	}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
	width: 49%;
	height: 100%;
	background: transparent url(/assets/images/logos/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;
	}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(/assets/images/logos/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(/assets/images/logos/nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{
	background-color: #fff;
	margin: 0 auto;
	font-size: 12px;
	line-height: 18px;
	overflow: auto;
	width: 100%	
}

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{
	font-family: Futura, Helvetica, Arial, "Lucida Grande", Verdana, sans-serif;
	font-weight: normal;
	font-size: 16px;
	color: #E13337;
}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}	
		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
}

/* Clients
-------------------------------------------------------------- */

h3.client-logo {
	height: 144px;
	width: 130px;
	text-indent: -5000px;
	font-size: 1px;
	line-height: 1px;
}

h3.client-logo a {
	display: block;
	height: 100%;
	width: 100%;	
	background-repeat: no-repeat;
	background-color: transparent;
}

h3.client-logo a:hover {
	background-color: transparent;
	background-position: 0px -144px;
}

h3.client-logo.on a {
	background-color: transparent;
	background-position: 0px -144px;
}

/* Search & Filter Sheets
-------------------------------------------------------------- */

#search {
	/* Search Placeholder */
	overflow: hidden;
	/* Override header margins  */
	position: relative;
	top: -11px;
}

.search-sheet { background: #FFDD00; padding: 36px 70px; }
.search-sheet h1, .search-sheet h2 { color: #999; }
ul.checkbox-list { list-style: none; margin-bottom: 18px; }
.search-sheet label { font-weight: normal; color: #999; letter-spacing: 0; text-transform: none; }
.plus-minus { height: 16px; width: 16px; margin: 0 0 0 10px; vertical-align: middle; }

/* Search Bar
-------------------------------------------------------------- */

/* Default styles for Safari */

.search_box .sbox_l {}
.search_box .sbox_r {}
.search_box .sbox input {
	/*default styling*/
	width: 550px;
}

/* Alternative styles for non-Safari browsers */
.search_box_apple .sbox_l {
	background: url('/assets/images/logos/srch_l.png') no-repeat top left;
	float: left; width: 19px; height: 19px;
}

.search_box_apple .sbox_r {
	background: url('/assets/images/logos/srch_r.png') no-repeat top left;
	float: left; width: 19px; height: 19px;
}

.search_box_apple .sbox input {
	background: url('/assets/images/logos/srch_bg.png') repeat-x top left;
	float: left; border: 0; height: 19px; width: 502px; padding: 3px;
	font: 11px/13px Verdana, Helvetica, Arial, sans; color: #000;
}

/* Search Results */

h2.search-header {
	background: #999999;
	margin-bottom: 18px;
	padding: 9px 0 9px 5px;
	letter-spacing: 2px;
	font-weight: normal;
	text-transform: uppercase;
}

/* Relevance Scale */

.relevance-1 { background: #E13337; }
.relevance-2 { background: #BE3337; }
.relevance-3 { background: #A13337; }
.relevance-4 { background: #823337; }
.relevance-5 { background: #643337; }

p.relevance-1, p.relevance-2, p.relevance-3, p.relevance-4, p.relevance-5 {
	color: #FFFFFF;
	padding: 0 0 0 5px;
}

/* Contact Map
-------------------------------------------------------------- */
#map { height: 322px; margin-bottom: 18px; }

/* Classy Buttons
-------------------------------------------------------------- */
.dh_new_media {
	float: left;
	display: block;
	color: #777;
	text-decoration: none;
	background: url(/assets/images/logos/new_media_button.gif) no-repeat;
	margin: 0 12px 0 0;
}

.dh_new_media .tr { background: url(/assets/images/logos/new_media_button.gif) no-repeat top right; }
.dh_new_media .bl { background: url(/assets/images/logos/new_media_button.gif) no-repeat bottom left; }
.dh_new_media .br { background: url(/assets/images/logos/new_media_button.gif) no-repeat bottom right; }
.dh_new_media span { color: #333; font-size: 11px; font-weight: bold; display: block; padding: 3px 15px; text-shadow: white 0px 1px 1px; }
.dh_new_media:hover { background: url(/assets/images/logos/new_media_button.gif) no-repeat; }

.dh_new_media:active,
.dh_new_media:active .tr,
.dh_new_media:active .bl,
.dh_new_media:active .br {
	background-image: url(/assets/images/logos/new_media_button_active.gif);
}