/*

	Site:	TBWA Manchester
	File:	/_assets/style/screen.css
	Version: 2010-07-01
	
*/


/*	Common
----------------------------------------------- */

* { margin: 0; padding: 0; }
body { background: #ccc; color: #FFF; font: 62.5%/1.4 Arial, Helvetica, Geneva, sans-serif; overflow:hidden; }
html>body { font-size: 10px; }
html, body { background: #000000}
p { font-size: 1.2em; margin-bottom: 1em; }
a, a:link, a:visited { color: #FFF; text-decoration: none; }
a:hover, a:active { text-decoration: underline; }
a:focus { outline: none; }

h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }

img { vertical-align: bottom; }
button, input, textarea, select { font-size: 100%; font-family: Arial, Helvetica, Geneva, sans-serif; }
iframe, a img { border: none; }
fieldset, form { border: 0 solid #FFFFFF; }
ul, li, li a { vertical-align: bottom; }
table { border-collapse: collapse; border: 0; border-spacing: 0; font-size: 100%; }
caption, td, th { text-align: left; font-size: 100%; font-weight: normal; }
ol, ul { margin-bottom: 0em; }
ul, ol, dl, li, dt, dd { list-style-type: none; }
ol li, ul li { font-size: 1.2em; margin-bottom: 0em; }

.accessibility { left: -9999em; position: absolute; top: -9999em; }
.hide { display: none; }
.clearfix:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; }
.cleaner { clear: both; height: 1px; margin-top: -1px; overflow: hidden; }
.clearit { clear: both; }

.c { float: left; }
object{outline:none;}
/*	Page load
----------------------------------------------- */

.js-loading .loading { background: #000 url('../images/global/spinner.gif') no-repeat 50% 50%; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 9; }
.js-loading .nav-sub,
.js-loading #ProjectInformation { z-index: 0!important; }

/*	Structure
----------------------------------------------- */

/*.header { background: transparent url('../images/global/header-bg.png') repeat-x; display: block; height: 28px; position: absolute; top: 0; width: 100%; z-index: 10; }*/
.header { background: transparent url('../images/global/header-bg.png') repeat-x; display: block; height: 28px; position: absolute; top: 0; width: 100%; z-index: 11; }
.header .inner { margin: 0 auto; width: 870px; }
.header .logo { float: left; height: 28px; width: 173px; }
.header .logo a { background: transparent url('../images/global/logo-bg.png') no-repeat scroll 0 0; display: block; height: 100%; outline: none; text-indent: -9999em; width: 100%; }
.header .nav-primary { float: left; }
.header .nav-primary ul li { float: left; margin: 0 2px; position: relative; }
.header .nav-primary ul li a { background: transparent url('../images/global/nav-pri-sprite.png') no-repeat 0 0; display: block; height: 23px; text-indent: -9999em; text-transform: uppercase; width: 74px; }
.header .nav-primary ul li.home a { background-position: 18px 0; }
.header .nav-primary ul li.home a:hover,
.header .nav-primary ul li.home a.current { background-position: 18px 100%; }
.header .nav-primary ul li.about a { background-position: -58px 0; }
.header .nav-primary ul li.about a:hover,
.header .nav-primary ul li.about a.current { background-position: -58px 100%; }
.header .nav-primary ul li.work a { background-position: -135px 0; }
.header .nav-primary ul li.work a:hover,
.header .nav-primary ul li.work a.current { background-position: -135px 100%; }
.header .nav-primary ul li.clients a { background-position: -213px 0; }
.header .nav-primary ul li.clients a:hover,
.header .nav-primary ul li.clients a.current { background-position: -213px 100%; }
.header .nav-primary ul li.news a { background-position: -293px 0; }
.header .nav-primary ul li.news a:hover,
.header .nav-primary ul li.news a.current { background-position: -293px 100%; }
.header .nav-primary ul li.contact a { background-position: -377px 0; }
.header .nav-primary ul li.contact a:hover,
.header .nav-primary ul li.contact a.current { background-position: -377px 100%; }
.header .nav-primary ul li:hover ul.nav-secondary { display: block; }
.header ul.nav-secondary { display: none; position: absolute; }
.header ul.nav-secondary li { float: none; margin: 1px 0 0; }
.header ul.nav-secondary li a { background: transparent url('../images/global/nav-sec-sprite.png') no-repeat 0 0; height: 20px; width: 100px; }
.header ul.nav-secondary li.about-us a { background-position: 0 0; }
.header ul.nav-secondary li.about-us a:hover,
.header ul.nav-secondary li.about-us a.current { background-position: 100% 0; }
.header ul.nav-secondary li.disruption a { background-position: 0 -21px; }
.header ul.nav-secondary li.disruption a:hover,
.header ul.nav-secondary li.disruption a.current { background-position: 100% -21px; }
.header ul.nav-secondary li.media-arts a { background-position: 0 -42px; }
.header ul.nav-secondary li.media-arts a:hover,
.header ul.nav-secondary li.media-arts a.current { background-position: 100% -42px; }

.header .social-links { float: right; }
.header .social-links ul li { float: left; margin-right: 3px; }
.header .social-links ul li.last { margin-right: 0px; }
.header .social-links ul li a { background: transparent url('../images/global/social-media-sprite.png') no-repeat 0 0; display: block; height: 22px; text-indent: -9999em; width: 22px; }
.header .social-links ul li em { background: transparent url('../images/global/social-media-sprite.png') no-repeat 0 2px; display: block; text-indent: -9999em; width: 60px; }
.header .social-links ul li.twitter a { background-position: -62px 0; }
.header .social-links ul li.twitter a:hover { background-position: -62px 100%; }
.header .social-links ul li.facebook a { background-position: -88px 0; }
.header .social-links ul li.facebook a:hover { background-position: -88px 100%; }
.header .social-links ul li.rss a { background-position: -113px 0; }
.header .social-links ul li.rss a:hover { background-position: -113px 100%; }
.header .social-links ul li.flickr a { background-position: -138px 0; }
.header .social-links ul li.flickr a:hover { background-position: -138px 100%; }
.header .social-links ul li.vimeo a { background-position: -163px 0; }
.header .social-links ul li.vimeo a:hover { background-position: -163px 100%; }

.nav-sub { background: url('../images/content/work/nav-drop-shadow.png') repeat-x 0 100%; padding-bottom: 20px; position: absolute; top: 23px; width: 100%; z-index: 10; }
.nav-sub .inner { background: #FFF; height: 110px; padding: 14px 0; width: 100%; }
.nav-sub ul,
.nav-sub ul li { float: left; }
.nav-sub ul { margin-right: 9px; }
.nav-sub ul ul { margin-right: 0px; }
.nav-sub ul ul li { margin-left: 9px; }
.nav-sub a,
.nav-sub h3 { color: #FFF; display: block; float: left; height: 111px; text-align: center; text-transform: uppercase; width: 111px; }
.nav-sub a { background: #828282; }
.nav-sub h3 { background: #e2383f url('../images/content/work/nav-h3.png') no-repeat 0 0; border-right: 9px solid #FFF; font-size: 1.4em; }

.nav-sub .scrollable { display: block; float: left; height: 111px; overflow: hidden; position: relative; }
.nav-sub .browse { background: #7b7b7b url('../images/content/work/nav-browse-btn.png') no-repeat 0 0; border-left: 9px solid #FFF; border-right: 9px solid #FFF; display: block; float: left; margin: 0; text-indent: -9999em; }
.nav-sub .prev { background-position: 0 0; }
.nav-sub .prev:hover { background-position: 0 100%; }
.nav-sub .next { background-position: 100% 0; }
.nav-sub .next:hover { background-position: 100% 100%; }
.nav-sub .items { position: absolute; width: 10000px; }
.nav-sub .items .t1 { overflow: hidden; }
.nav-sub .items .t1 a { background: #4f4f4f url('../images/content/work/nav-t1.png') no-repeat 0 0; font-size: 1.1em;}
.nav-sub .items .t1 a:hover { text-decoration: none; }
.nav-sub .items .activeT1 a { background-position: 0 100%; }
.nav-sub .items .t1 span,
.nav-sub .items .t1.active span { cursor: pointer; display: block; height: 111px; position: relative; width: 111px; }
.nav-sub .items .t1 span span,
.nav-sub .items .t1.active span span { border: 3px solid #F00; cursor: pointer; display: block; height: 105px; width: 105px; }
.nav-sub .items .t1 span span span,
.nav-sub .items .t1.active span span span { background: url(../images/global/nav-overlay-bg.png) repeat-y 0 0; border: none!important; color: #FFF; border: none; bottom: 0px; cursor: pointer; height: auto; left: 0; padding: 5px 0px; position: absolute; } 
.nav-sub .items .t2 a { background: #828282; font-size: 0.9em; }
.nav-sub .items .t2 a:hover span { background-position: 0 100%!important; }

.content { display: block; height: 100%; width: 100%; }
.container { display: block; height: 100%; position: absolute; width: 100%; z-index: 1; }
.slides { display: block; height: 100%; overflow: hidden; width: 100%; z-index: 0; }

/*	Home
----------------------------------------------- */

#Home .project-information { bottom: 0px; height: 140px; left: 0px; position: absolute; text-align: center; width: 100%; z-index: 20; }
#Home .project-information .background { background: transparent url('../images/content/home/project-info-bg.png') repeat 0 0; height: 100%; left: 0px; position: absolute; top: 0px; width: 100%; z-index: 21; }
#Home .project-information .inner { height: 100%; left: 0px; position: absolute; top: 0px; width: 100%; z-index: 22; }
#Home .project-information a.p-button { background: transparent url('../images/content/home/info-sprite.png') no-repeat 0 100%; display: block; height: 41px; margin: 20px auto; text-indent: -9999em; width: 41px; }
#Home .project-information p.p-description { color: #CCC; font-weight: bold; margin-bottom: 0.5em; }
#Home .project-information p.p-more a,
#Home .project-information p.p-more a:visited { color: #CCC; font-size: 0.9em; text-decoration: underline; text-transform: uppercase; }
#Home .container { z-index: 3; }
#Home .container h1 { margin: 150px auto 0; text-align: center; width: 870px; }

/*	About
----------------------------------------------- */

.copy-container { background: transparent url('../images/global/common-page-bg.png') no-repeat 0 0; display: block; height: 570px; margin: 50px auto 0; position: relative; width: 570px; }
.copy-container .inner { padding-top: 70px; margin: 0 auto; font-weight: bold; height: 460px; text-align: center; text-transform: uppercase; width: 440px; }
.copy-container h1 { font-size: 60px; line-height: 100%; margin-bottom: 45px; font-weight: bold; text-transform: uppercase; }
.copy-container .copy { height: 300px; }
.copy-container p { line-height: 1.8em; }
.copy-container .pagination { margin: 0 auto; width: 140px; }
.copy-container .pagination a { background: transparent url('../images/content/about/pagination.png') no-repeat 0 0; height: 53px; display: block; text-indent: -9999em; width: 30px; }
.copy-container .pagination .prev { float: left; }
.copy-container .pagination .prev a { background-position: 0 100%; }
.copy-container .pagination .prev a:hover { background-position: 0 0; }
.copy-container .pagination .next { float: right; }
.copy-container .pagination .next a { background-position: 100% 100%; }
.copy-container .pagination .next a:hover { background-position: 100% 0; }

/*	View (Work & Clients)
----------------------------------------------- */

.project { background: #000000; margin: 0 auto; position: relative; top: 170px; width: 862px; z-index: 5; }
.project p { color: #CBCBCB; }
.project p.intro { font-weight: bold; }
.project a,
.project a:link,
.project a:visited { color: #CBCBCB; text-decoration: underline; }
.project a:hover,
.project a:active { color: #FFFFFF; }
.project .content { padding-bottom:10px; }
.project .content .media { display: block; float: left; width: 544px; }
.project .content .copy { float: right; padding-right: 10px; width: 308px; }
.project .content .copy h1 { color: #FFFFFF; font-size: 24px; line-height: 100%; margin-bottom: 15px; }
.project .content .copy h1 span { text-transform: lowercase; }
.project .content .copy h1 a { color: #FFFFFF; display: block; text-decoration: none; }
.project .content .copy h1 a:hover { text-decoration: underline; }
.project .actions { width: 100%;  border-top: 1px solid #CBCBCB; position:absolute; bottom:0; padding:10px 0; }
.project .actions .pagination{float:left;}
.project .actions .pagination li{ float:left; clear:none;}
.project .actions .pagination li a { border-right: 1px solid #CBCBCB; display: block; padding: 0 7px; text-decoration: none; }
.project .actions .pagination li a:hover { text-decoration: underline; }
.project .actions .pagination li.current a { text-decoration: underline; }
.project .actions .pagination li.button a { background: transparent url('../images/content/work/pagination-prev-next.png') no-repeat 0 0; display: block; text-indent: -9999em; width: 3px; }
.project .actions .pagination li.previous a { background-position: 0 50%; }
.project .actions .pagination li.next a { background-position: 100% 50%; border: none; }
.project .actions .close { float: right; line-height: 100%; margin: 0; }

.static-project { border: 10px solid #000; }
.static-project .content .media { position: relative; height:auto; float:left; }
.static-project .content .media img { border: 3px solid #CCCCCC; left: 0; position: absolute; top: 0;}
.js .static-project { background: none; border: none; display: none; margin: 0; padding-bottom: 20px; height:380px; position:relative; z-index:9; }

.video-project { height: 316px; }
.video-project .content .media { width: 592px; height:auto; float:left; }
.video-project .content .copy { padding-top: 20px; width: 260px; height:auto; float:left; }

#Work .project-information,
#Client .project-information { bottom: 0px; display: none; height: 90px; left: 0px; position: absolute; text-align: center; width: 100%; z-index: 2; }
#Work .project-information .inner,
#Client .project-information .inner { height: 100%; width: 100%; z-index: 6; }
#Work .project-information a.p-button,
#Client .project-information a.p-button { background: transparent url('../images/content/home/info-sprite.png') no-repeat 0 100%; display: block; height: 41px; margin: 20px auto; text-indent: -9999em; width: 41px; }
#Work.js .project-information,
#Client.js .project-information { display: block; }

.nav-secondary ul { /*font-size: 0; height:0; line-height: 0; overflow: hidden;*/  }
.nav-secondary ul { z-index:1000;  }
.nav-secondary ul li a { z-index:1000; background: transparent url('../images/content/work/work-prev-next.png') no-repeat 0 0; color: #FFF; cursor: pointer; display: block; font-size: 0.9em; height: 190px; line-height: 12px; padding-right: 10px; position: absolute; text-transform: uppercase; top: 45%; width: 130px; }
.nav-secondary ul li a.previous { background-position: 0 100%; left: 0; }
.nav-secondary ul li a.previous:hover { background-position: 0 0; }
.nav-secondary ul li a.next { background-position: 100% 100%; right: 0; }
.nav-secondary ul li a.next:hover { background-position: 100% 0; }
.nav-secondary ul li a:hover { text-decoration: none; }
.nav-secondary ul li a span { display: block; margin-top: 88px;  }
.nav-secondary ul li a.previous span { margin-left: 40px; }
.nav-secondary ul li a.next span { text-align: right; margin-right: 20px; }
.nav-secondary ul li a span span { margin: 0!important; }
.nav-secondary ul li a.next span span { margin-right: 5px; }

#Client ul.client-list { width: 200px; }
#Client ul.l { float: left; }
#Client ul.r { float: right; }
#Client ul.client-list li { font-size: 1.6em; }

.work-index .inner { width: 510px; }
.work-index .work-list { height: 280px; }
.work-index .work-list li { float: left; }
.work-index .work-list li a { float: left; margin: 0 8px 17px 8px; }
.work-index .link-img-container { cursor: pointer; display: block; height: 111px; width: 111px;  }
.work-index .work-item:hover .link-img-container:hover { background-position: 0 100%!important; }
.work-index .link-img-container span { border: 3px solid #F00; cursor: pointer; display: block; height: 105px; position: relative; width: 105px; }
.work-index .link-img-container span span { background: url(../images/global/nav-overlay-bg.png) repeat-y 0 0; border: none!important; color: #FFF; border: none; bottom: 0px; cursor: pointer; height: auto; left: 0; padding: 5px 0px; position: absolute; } 


/*	Contact
----------------------------------------------- */

.contact-details { position: relative; }
.contact-details .inner { padding-top: 70px; margin: 0 auto; font-weight: normal; height: 460px; text-align: left; text-transform: none; width: 440px; }
.contact-details h1 { margin-bottom: 25px; font-weight: bold; text-align: center; text-transform: uppercase; }
.contact-details .copy { height: 300px; }
.contact-details .vcard { color: #CCC; font-size: 1.2em; margin-bottom: 10px; }
.contact-details .vcard a,
.contact-details .vcard a:link,
.contact-details .vcard a:visited { color: #CCC; text-decoration: underline; }
.contact-details .vcard a:hover { color: #FFF; }
.contact-details .vcard .org,
.contact-details .vcard h3 { color: #FFF; font-size: 1.8em; font-weight: bold; text-transform: uppercase; }
.contact-details .vcard .adr div,
.contact-details .vcard .adr span { display: inline; }
.contact-details .vcard .n { clear: both; display: block; font-weight: bold; }
.contact-details .vcard .type { display: none; }
.contact-details .vcard .family-name em {font-weight:normal}
.contact-details .vcard .tel, 
.contact-details .vcard .fax,
.contact-details .vcard .e { display: inline; }
.contact-details .vcard .email { margin-right: 10px; }
.contact-details .vcard .fax { margin-left: 10px; }
.contact-details .details { margin-top:20px; font-size:0.9em; color:#999 }
.contact-details .details span{ padding-right:20px; }
.contact-details .contact-details .view-map img { margin-bottom: 20px; }
.contact-details .gmap { background: #000; border: 2px solid #464646; bottom: 33px; height: 285px; left: 33px; position: absolute; width: 500px ; }
.contact-details .gmap .close { background: #FFFFFF none repeat scroll 0 0; border-left: 1px solid #CCCCCC; border-top: 1px solid #CCCCCC; bottom: 0; color: #E93D3C; font-size: 1.1em; font-weight: bold; padding: 8px 15px; position: absolute; right: 0; text-decoration: underline; }
.contact-details .gmap .close em { font-style: normal; }

#flashcontent { height: 316px; width: 565px; }

#henshaws-overlay							{width:100%; height:100%; position:absolute; z-index:99999; margin:0px auto; background: url('../images/henshaws/nav-bg.gif') repeat-x center top; display:none}

#hensshaws-bg								{position:relative; left:0; display: block; height: 100%; overflow: hidden; width: 100%; z-index: -100;}

#henshaws-nav								{width:870px; margin:0px auto 0px auto; background:url('') repeat-x;}
#henshaws-nav a.logo						{width:173px; height:33px; display:block; float:left; background:url('/_assets/images/henshaws/tbwa-logo.png') no-repeat center -4px}
#henshaws-nav div							{float:left}

#henshaws-nav div ul.primary-nav			{height:28px;}
#henshaws-nav div ul.primary-nav li			{margin:0 2px; float:left;}
#henshaws-nav div ul.primary-nav li a		{display:block; width:74px; height:23px; text-align:center; background-repeat:no-repeat; background-image:url("../images/henshaws/navsprite.png"); text-indent:-9999px;}

#henshaws-nav div ul.primary-nav li a.home			{background-position:2px 0;}
#henshaws-nav div ul.primary-nav li a.home:hover	{background-position:2px -23px;}

#henshaws-nav div ul.primary-nav li a.about			{background-position:-74px 0;}
#henshaws-nav div ul.primary-nav li a.about:hover	{background-position:-74px -23px;}

#henshaws-nav div ul.primary-nav li a.work			{background-position:-151px 0;}
#henshaws-nav div ul.primary-nav li a.work:hover	{background-position:-151px -23px;}

#henshaws-nav div ul.primary-nav li a.clients		{background-position:-229px 0;}
#henshaws-nav div ul.primary-nav li a.clients:hover	{background-position:-229px -23px;}

#henshaws-nav div ul.primary-nav li a.news			{background-position:-309px 0;}
#henshaws-nav div ul.primary-nav li a.news:hover	{background-position:-309px -23px;}

#henshaws-nav div ul.primary-nav li a.contact		{background-position:-393px 0;}
#henshaws-nav div ul.primary-nav li a.contact:hover	{background-position:-393px -23px;}

#henshaws-modal								{width:450px; height:200px; z-index:99999; margin:0px auto; background: url('/_assets/images/henshaws/modal-bg.gif') no-repeat;}