@charset "UTF-8";

/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}
body {
	line-height: 1;
}
h1, h2, h3, h4, h5, h6 {
	clear: both;
	font-weight: normal;
}
ol, ul {
	list-style: none;
}
blockquote {
	quotes: none;
}
blockquote:before, blockquote:after {
	content: '';
	content: none;
}
del {
	text-decoration: line-through;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a img {
	border: none;
}





.hiddenItems {
	display:none;
}




/* telephone numbers */
a[href*="tel:"] {
	white-space:nowrap;
	cursor:default;
	color:inherit !important;
}



html, body {
	height: 100%;
	-webkit-font-smoothing: pixel-antialiased;
}
body {
	margin:0;
	padding:0; 
	color:#3c3538;
	
	font-family: "pragmatica-web-n3","pragmatica-web","Helvetica Neue", Helvetica,sans-serif;
	font-style: normal;
	font-weight: 300;
	
	text-align:center;
	font-size:62.5%;
	line-height:1;
	
	background: #ffffff;

	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iNzUlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2NjY2NjYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9yYWRpYWxHcmFkaWVudD4KICA8cmVjdCB4PSItNTAiIHk9Ii01MCIgd2lkdGg9IjEwMSIgaGVpZ2h0PSIxMDEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
	background: -moz-radial-gradient(center, ellipse cover,  #ffffff 75%, #cccccc 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(75%,#ffffff), color-stop(100%,#cccccc));
	background: -webkit-radial-gradient(center, ellipse cover,  #ffffff 75%,#cccccc 100%);
	background: -o-radial-gradient(center, ellipse cover,  #ffffff 75%,#cccccc 100%);
	background: -ms-radial-gradient(center, ellipse cover,  #ffffff 75%,#cccccc 100%);
	background: radial-gradient(ellipse at center,  #ffffff 75%,#cccccc 100%);
	background-attachment:fixed;
	
}
.images { 
	height: 370px;
	width: 960px; 
	margin: auto; 
	background:#3c3538; 
	position:relative; 
	overflow:hidden;
	z-index:100;
}
#logo-overlay { 
	height: 300px;
	width: 960px; 
	margin: auto; 
/*	background: orange url(../images/logo-mid.png) top left no-repeat;*/
	position:absolute; 
	z-index:150; 
	top:260px; 
	left:0;
}
body#home #logo-overlay { 
	display:none;
}
body#clients #logo-overlay,
body#contact #logo-overlay,
body#work #logo-overlay, 
body#blog #logo-overlay, 
body#site #logo-overlay { 
	background: transparent url(../images/logo-sml.png) top left no-repeat;
	top:auto;
	left:auto;
	height:78px;
	width:960px;
	position:relative;
	border-bottom:2px solid #c4c4c4;
	display:block;
	clear:both;
	margin-bottom:20px
}
#logo-overlay h1, 
#logo-overlay h1 a {
	display:block;
	height:78px;
	width:250px;
}
#contentarea iframe {
	max-width:920px;
	width:100%;
	max-height:518px;
	background:#000;
	margin:0 auto !important;
	display:block;
}

#contentarea .videoframe {
	max-width:720px;
	width:100%;

	position:relative;
	height:auto;
	display:block;
	margin:0 auto;
	line-height:1;
}
#contentarea .videoframe img {width:100%; position:relative; height:auto; display:block; }
.sharing a {
	color:#3c3538;
	opacity:0.7;
	text-decoration:none;
	background:none;
	text-align:right !important;
	clear:both;
	position:relative;
	right:0;
	line-height:1;
	margin:2px 0 !important;
	-webkit-transition: opacity 0.25s linear;
	-moz-transition: opacity 0.25s linear;  
	-o-transition: opacity 0.25s linear; 
	-ms-transition: opacity 0.25s linear;
	transition: opacity 0.25s linear;  
}
.sharing a span {
	display:none;
}
.sharing a:hover {
	color:#e50647;
	text-decoration:none;
	opacity:1;
}
.at300b {
	float:right !important;
	padding:0 !important;
}


/* fix the ADDTHIS pop-over position! */
#at20mc {
	top:10px;
	left:52%;
	position:absolute !important;
}
#at16pt h4, #at16pt a {
	font-weight:normal;
}
/* end fix */





/*/////////////////////////////////// GENERIC LINKS ///////////////////////////////////*/
a {
	color:#e50647;
	text-decoration:none;
	outline:none;
}
a:hover {
	color:#000;
	text-decoration:none;
	outline:none;
}
a:active {
	color:#000;
	text-decoration:none;
	outline:none;
}


#contentarea a {
	
	font-family: "pragmatica-web-n4","pragmatica-web",sans-serif;
	font-style: normal;
	font-weight: 400;
	width:75px;
}


a.more {
	background-image:url(../images/more-arrow.gif);
	background-repeat:no-repeat;
	background-position: right 0;
	padding-right:10px;
}
a.more:hover {
	background-position: right -30px;
}
a.more:active {
	background-position: right -60px;
}





a.ext, a.back {
	background-image:url(../images/back-arrow.gif);
	background-repeat:no-repeat;
	background-position: left 0;
	padding-left:10px;
}
a.ext {
	background-image:url(../images/more-arrow.gif);
}
a.ext:hover, a.back:hover {
	background-position: left -30px;
}
a.ext:active, a.back:active {
	background-position: left -60px;
}





#wrapper {
	margin:0 auto -200px;
	width:960px;
	padding:0 10px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	position: relative;
	z-index:1;
	clear:both;
}


.push {
	height: 200px; 
}
body#work #wrapper, 
body#blog #wrapper, 
body#site #wrapper {
	background:transparent;
	box-shadow: none;
	border-radius: 0;
}
#workwrapper {
	width:960px;
	position: relative;
	z-index:50;
	clear:both;
}
#contentarea {
	width:960px;
	margin:30px auto 0;
	clear:both;
	position:relative; 
	z-index:200;
	padding-bottom:80px;
	text-align:left;
}
body#work #contentarea {
	width:900px;
}
body#work #contentarea,
body#blog #contentarea, 
body#site #contentarea  {
	margin-top:0;
}






.slideshow img { 
	width:960px;
	height:370px;
	
}
img.pixRight {
	margin:0 0 10px 10px;
	float:right;
}
img.pixLeft {
	margin:0 10px 10px 0;
	float:left;
}
.colours { 
	position:fixed;
	top:0;
	left:0;
	z-index:0;
	width:100%;
	min-height:100%; 
	height:100%; 
	background:#000; 
}
.colours div { 
	position:fixed;
	min-width:100%;
	min-height:100% !important; 
	height:100% !important; 
	z-index:1;
	top:0;
	left:0;
	display:block;
}






/* menu */
#nav {
	position:absolute; 
	top:-1px; 
	right:40px; 
	z-index:2000;
	text-align:left;
}
.tab {
	padding:12px 40px 12px 12px;
	color:#3c3538;
	background:#fff url(../images/nav-open.gif) 100% 11px no-repeat;
	box-shadow: 0px 3px 10px rgba(0,0,0,0.5);
	text-decoration:none;
	font-family: "pragmatica-web-n4","pragmatica-web",sans-serif;
	font-style: normal;
	position:relative;
	text-transform:uppercase;
	font-weight: 400;
	font-size:1.5em;
	letter-spacing:0.3mm;
	line-height:1; 
	cursor:pointer;
}
.sub {
	padding:12px 10px 12px 10px; 
	color:#666; 
	background:#fff url(../images/nav-open.gif) 100% 11px no-repeat;
	position:absolute;
	top:0;
	right:0; 
	box-shadow: 0px 3px 10px rgba(0,0,0,0.5);
	display:none; 
	width:150px;
	min-height:100px;
}
.sub ul {
	list-style:none;
	clear:both; 
	position:relative;
	margin:-6px 10px 0;
}
.sub ul li {
	line-height:1; 
	clear:both;
	width:100%;
}
.sub ul li a {
	font-size:1.5em;
	color:#3c3538; 
	font-family: "pragmatica-web-n4","pragmatica-web",sans-serif;
	font-style: normal;
	font-weight: 400;
	padding:.4em 0;
	text-decoration:none;
	letter-spacing:0.3mm;
	display:block; 
	text-transform:uppercase;
	-webkit-transition: color 0.25s linear;
	-moz-transition: color 0.25s linear;  
	-o-transition: color 0.25s linear; 
	-ms-transition: color 0.25s linear;
	transition: color 0.25s linear; 
}
.sub ul li a:hover {
	color:#e50647; 
	text-decoration:none; 
}
.sub ul li.selected a, 
.sub ul li.selected ul li.selected a, 
.sub ul li.selected ul li.selected a:hover {
	color:#ccc; 
	cursor:default;
}
.sub ul li ul { 
	margin-left:10px;
	margin-bottom:0;
	margin-top:-0.1em;
}
.sub ul li ul li a {
	font-size:1.4em; 
	color:#666; 
	font-family: "pragmatica-web-n4","pragmatica-web",sans-serif;
	font-style: normal;
	font-weight: 400;
	text-transform:none;
	text-decoration:none; 
}
.sub ul li:last-of-type {
	padding-bottom:0;
}






.sub ul li.selected ul li a {
	color:#666;
}
.sub ul li.selected ul li a:hover {
	color:#000;
	cursor:pointer;
}


.entry {
	clear:both;
	position:relative;
	padding-top:26px;
	margin-top:-1px;
	margin-bottom:22px;
	border-top:2px solid #e50647;
}
.entry:first-of-type {
	border:none;	
}



.textcol {
	margin:0 20px;
	float:left;
}
body#home .textcol {
	width:416px;

}





/* typo */
h1 {	
	text-indent:-9999px;
}
h2 {
	font-family: "pragmatica-web-n4","pragmatica-web",sans-serif;
	font-style: normal;
	font-weight: 400;
	text-transform:uppercase;
	color:#e50647;
	font-size:2.5em;
	line-height:120%;
	margin-bottom:.8em;
	letter-spacing:0.5mm;
}
h3 {
	margin-bottom:.8em;
	font-size:2.5em;
	line-height:1.35em;
	color:#5d5d5c;
	letter-spacing:-.3mm;
	font-family: "pragmatica-web-n3","pragmatica-web",sans-serif;
	font-style: normal;
	font-weight: 300;
}
#home h3 {
	text-align:center;
}
#home h3 .red {
	font-family: "pragmatica-web-n4","pragmatica-web",sans-serif;
	font-style: normal;
	font-weight: 400;
	color:#e50647
}
#home h3 a {
	font-family: "pragmatica-web-n7","pragmatica-web",sans-serif;
	font-style: normal;
	font-weight: 700;
}

h4 {
	font-family: "pragmatica-web-n4","pragmatica-web",sans-serif;
	font-style: normal;
	font-weight: 400;
	margin-bottom:0.5em;
	font-size:2.2em;
	text-transform:uppercase;
	color:#e50647;
	letter-spacing:0.3mm;
}
h5 {
	margin-bottom:.75em;
	font-size:1.7em;
	font-family: "pragmatica-web-n4","pragmatica-web",sans-serif;
	font-style: normal;
	font-weight: 400;
}
h6 {	
	font-size:1.5em;
	font-family: "pragmatica-web-n7","pragmatica-web",sans-serif;
	font-style: normal;
	font-weight: 700;
	text-transform:uppercase;
	margin-bottom:0;
	line-height:135%;
}
#contentarea p {
	font-size:1.4em;
	margin-bottom:1.5em;
	line-height:135%;
}
#contentarea p .note{
	font-size:1.1em;
	margin-bottom:1.5em;
	line-height:135%;
}
#contentarea p em {
	font-family: "pragmatica-web-i3","pragmatica-web",sans-serif;
	font-style: italic;
	font-weight: 300;
}
#contentarea p strong {
	font-family: "pragmatica-web-n4","pragmatica-web",sans-serif;
	font-style: normal;
	font-weight: 400;
}
#contentarea p strong em,
#contentarea p em strong {
	font-family: "pragmatica-web-i4","pragmatica-web",sans-serif;
	font-style: italic;
	font-weight: 400;
}
#contentarea p:last-of-type, .promo p {
	margin:0;
}
#contentarea td {font-size:1.25em;}
#contentarea li {font-size:1.25em; margin-bottom:.33em;}
#contentarea li li {
	font-size:1em;
}



/* people lists */
ul.clientlist {
	width:25%;
	float:left;
	text-transform:uppercase;
	line-height:180%;
}





/* footer */
#footer {	
	width: 100%;
	min-width:980px;
	position:relative;
	background: #3c3538;
	color:#fff;
	height: 200px;
	z-index:1;
	display:block;
	letter-spacing:.15mm;
	font:1em;
	margin:0 auto
}
#footer #fnav {
	position:relative;
	margin:0 auto !important;
	padding: 40px 0 0 0;
	width:96%;
	max-width:960px;
}
#footer #sox a {opacity:0.75;}
#footer #sox a img { width:23px; height:23px;}
#footer #sox a:hover {opacity:1;}
#footer ul {
	display:block; 
	position:relative;
	width:100%;
	text-align:center;
	margin:0 auto 30px;
	padding:0 !important;
	list-style:none
}
#footer ul li {
	font-size:1.1em;
	line-height:165%;
	text-transform:uppercase;
	margin: 0 0 4px;
	padding:0;
	width:16.25%;
	vertical-align:top;
	display:inline-block;
}
#footer p {
	font-size:1.1em;
	text-align:center;
	margin:0 auto;
	line-height:1;
}
#footer ul li.left {
	text-align:left;
}
#footer ul li a {
	text-transform:none;
	color:#fff;
	white-space:nowrap;
	text-decoration:none;
}
#footer ul li a:hover {
	color:#e50647;
	text-decoration:none;
}
#footer ul li strong {
	font-family: "pragmatica-web-n7","pragmatica-web",sans-serif;
	font-style: normal;
	font-weight: 700;
	line-height:1;
	clear:both;
}





/* map */
#map_canvas {
	width:630px;
	height:250px;
	padding:0;
	overflow:hidden;
}




/* client logos list */
#contentarea ul#clientlist {
	display:block;
	list-style:none;
	padding:0;
	margin:0 auto 30px;
	clear:both;
	text-align:center;
	width:100%
}
#contentarea ul#clientlist li {
	display:inline-block;
	text-align:center;
	margin:.5%;
	width:11%; 
}
#contentarea ul#clientlist li img {width:100%; height:auto;max-width:130px; margin:0 auto;}
/* end */





/* blog */
body#blog iframe, 
body#blog img, 
body#blog object, 
body#blog embed {
	margin-bottom:15px;
}
body#blog img.inline {
	float:left;
	margin:0 10px 0 0;
}
body#blog iframe {
	width:620px;
	height:350px;
	display:block;
	position:relative;
	float:left;
	margin:0 0 20px 0;	
}



/* multi-columns */
.aside {
	width:310px;
	text-transform:uppercase;
	line-height:150%;
	color:#e50647;
}
.aside.right {
	font-size:1.3em;
	font-family: "pragmatica-web-n4","pragmatica-web",sans-serif;
	font-style: normal;
	font-weight: 400;
}
.related {
	position:absolute;
	width: 310px;
	text-transform: uppercase;
	line-height: 150%;
	left:655px;font-size:1.3em;
	bottom:0px;
	font-family: "pragmatica-web-n4","pragmatica-web",sans-serif;
	font-style: normal;
	font-weight: 400;
}
.threecol {
	width:300px;
}
.twocol {
	width:390px;
}
.onecol {
	width:620px;
}
.sharing {
	width:120px;
	text-transform:uppercase;
	line-height:150%;
	float:right;
	text-align:right;
}
.overview {
	width:480px;
	float:left;
}




.multicol {
	-moz-column-count: 2;
	-moz-column-gap: 30px;
	-webkit-column-count: 2;
	-webkit-column-gap: 30px;
	column-count: 2;
	font-size:90%;
	column-gap: 30px;
	margin:0 auto 30px;
	width:100%;
}




/* general */
.center { 
	text-align:center;
}
.right { 
	float:right; 
}
.left { 
	float:left; 
}
.space {
	height:30px;
	clear:both;
	width:100%
}
.vspace {
	height:280px;
	clear:both;
	width:100%
}
.midcol {
	margin:0 30px;
}
.clearfix:after {
	content:".";
	clear:both;
	width:100%;
	display:block;
	height:0;
	font-size:0;
	text-indent:-9999em;
}





/* carousel */
.jCarouselLite  {
	width:890px;
	height:743px;
	display:block;
	overflow: hidden;
	background: transparent;
	margin:0;
	clear:both;
	margin-left:5px;
	margin-bottom:5px;
	
	/* Needed for rendering without flicker */
	position: relative;
	z-index:10;
	visibility: hidden;
	left: -5000px;
}
.prev, .next {
	display: block;
	text-indent:-9999px;
	width: 20px;
	height: 195px;
	position:absolute;
	top:274px;
	left:-22px;
	z-index:11;
	border:none;
	margin:0;
	text-decoration: none;
	background-position: 0 0;
	background:transparent;
	opacity:1;
	-webkit-transition: opacity 0.25s linear;
	-moz-transition: opacity 0.25s linear;  
	-o-transition: opacity 0.25s linear; 
	-ms-transition: opacity 0.25s linear;
	transition: opacity 0.25s linear; 
}
.next {
	left:902px;
	background-image:url(../images/carousel-next.png);
}
.prev {
	background-image:url(../images/carousel-prev.png);
}
.next:hover, .prev:hover {
	cursor: pointer;
	opacity:.5;
}
.next:active, .prev:active {
	cursor: pointer;
	opacity:.5;
	outline:none;
}
#maskL {
	position:absolute;
	width:20px;
	height:743px;
	display:block;
	z-index:20;
	top:0;
	left:-5px;
}
#maskR {
	position:absolute;
	width:20px;
	height:743px;
	display:block;
	z-index:20;
	top:0;
	left:885px;
}
.jCarouselLite ul {
	list-style:none;
	margin:0;
	padding:0;
	height:743px;
	width:890px;
	display:block;
	overflow:hidden;
	position:relative;
}
.jCarouselLite ul li {
	width:890px !important;
	height: 743px;
	text-align:left;
	background:transparent;
	padding: 0;
	line-height:100%;
	margin:0 !important;
	padding:0 !important;
	font-size:1em;
	display:block;
	overflow:hidden;
	position:relative;
}
.jCarouselLite div {
	line-height:1;
	font-size:10px;
	text-align:center;
	color:#3c3538;
	position:absolute;
	display:block;
	margin:0;
	text-transform:uppercase;
}
.jCarouselLite div img {
	margin: 0 0 4px 0;
	background:#000;
}
.sml {
	width: 220px;
	height: 130px;
}
.mid {
	width: 220px;
	height: 240px;
}
.big {
	width: 390px;
	height: 240px;
}
.portrait {
	width: 220px;
	height: 350px;
}
.pos1 {
	top: 20px;
	left: 10px;
}
.pos2 {
	top: 20px;
	left: 250px;
}
.pos3 {
	top: 20px;
	left: 490px;
}
.pos4 {
	top: 150px;
	left: 10px;
}
.pos5 {
	top: 260px;
	left: 250px;
}
.pos6 {
	top: 260px;
	left:660px;
}
.pos7 {
	top: 500px;
	left: 10px;
}
.pos8 {
	top: 500px;
	left: 420px;
}
.pos9 {
	top: 610px;
	left:660px;
}
/*.deathtrap {
	background: url(../images/work/thumb/deathtrap-th.jpg) top left no-repeat;
}
.bodyguard {
	background: url(../images/work/thumb/bodyguard-th.jpg) top left no-repeat;
}
.virginatlantic {
	background: url(../images/work/thumb/theatre-guide-th.jpg) top left no-repeat;
}
*/
	
	
#site #contentarea {font-size:95%;}
#site #contentarea ul {list-style:disc; margin-left:2em; margin-bottom:2em}
#site #contentarea ol {list-style:upper-alpha; margin-left:2em; margin-bottom:2em}
#site #contentarea li {font-size:1.4em; margin-bottom:.5em; line-height:130%;}
	
@media screen and (max-width: 980px) {
}


table.cookies {margin:20px auto; clear:both; width:100%;}
table.cookies tr {border-bottom:1px solid grey}
table.cookies td { font-size:10px; line-height:130%; padding: 5px; text-align:left; vertical-align:top;}
table.cookies tr.hdr { background:grey; color:#fff;}
table.cookies tr.hdr td { font-weight:bold !important; margin:0; text-transform: uppercase !important}
table.cookies td:first-of-type { width:20%; }
table.cookies td:last-of-type { width:30%; }