body.backstretch {background:transparent}
body.backstretch .logo {background:url(../images/ui/designwerk_logo_white.png) no-repeat;}
body.backstretch .youtube, body.backstretch .twitter, body.backstretch .linkedin {background-position:bottom;}
body.backstretch .nav a {color:#FFF;}
body.backstretch .nav a {border-bottom:2px solid #FFF;}
body.backstretch .intro p {color:#FFF; padding-top:40px; margin-bottom:20px;}
body.backstretch .home_intro p {color:#FFF; font-family: 'akzidenz-grotesk_bqregular'; line-height:18px; text-transform:uppercase; font-size:15px; padding-top:20px;  border-top:2px solid #FFF;}
body.backstretch .bg_caption {color:#FFF; width:470px; height:60px; position:absolute; top:310px; left:150px;}
body.backstretch .bg_caption h1 {font-family: 'akzidenz-grotesk_bq_condensMd'; font-size:34px; height:34px; line-height:34px; margin:0}
body.backstretch .bg_caption h1 span {font-family: 'akzidenz-grotesk_bq_light_eRg';}
body.backstretch .bg_caption h2 {font-family: 'akzidenz-grotesk_bqregular'; font-size:13px; height:13px; line-height:13px; margin:0; border-bottom:2px solid #FFF; padding-bottom:3px;}
body.backstretch .bg_caption h2 span {float:right; font-family:'akzidenz-grotesk_bqbold';}
body.backstretch .bg_caption h2 span a {color:#FFF;}
body.backstretch .bg_caption h3 {font-family: 'akzidenz-grotesk_bqregular'; font-size:7px; height:13px; line-height:13px; margin:0; padding-top:3px;}
body.backstretch .bg_caption h3 span {float:right; font-family:'akzidenz-grotesk_bqbold'; font-size:13px;}
body.backstretch .bg_caption a {color:#FFF;}

body.backstretch .footer {margin-top:115px;}
body.backstretch .footer .fix_height {height:170px;}
body.backstretch .footer img {padding-bottom:20px}
body.backstretch .footer tr.border {border-bottom:2px solid #FFF;}
body.backstretch .footer a {font-family: 'akzidenz-grotesk_bqregular'; font-size:12px; height:32px; line-height:32px; color:#FFF}
body.backstretch .footer p.slogan {margin:0; font-family: 'bell_mtitalic'; font-size:18px; line-height:32px; color:#FFF}
body.backstretch .footer p.copyright {margin:0; font-family: 'akzidenz-grotesk_bqbold'; font-size:8px; line-height:13px; margin:0; padding-top:3px; color:#FFF}
body.backstretch .footer p.links {margin:0; font-family: 'akzidenz-grotesk_bqregular'; font-size:10px; line-height:13px; margin:0; padding-top:3px; color:#FFF}

/* TAGS */
html, html body {background-color:#EEE;}
html body {overflow: scroll; overflow-x: auto; }
html body br.clear {clear:both; width:0.1em; height:0.1em; border:none; background:none;}
html body strong {font-weight:bold;}
html body em {font-family: 'akzidenz-grotesk_bqitalic'}
html body li {font-family: 'akzidenz-grotesk_bqregular'; color:#9EA0A0; font-size:14px; line-height:18px;}

/* A TAGS (links) */
a {color:#000; cursor:pointer; text-decoration:none;}
a:hover {text-decoration:none;}
.nav a, .subnav a {color:#9EA0A0;}
.nav .selected, .subnav .selected, .nav a:hover, .subnav a:hover{color:#000;}
.nav a, .project_nav a {border-bottom:2px solid #000;}

.contact_offices a.small {font-size:11px; line-height:12px;}
.contact_offices a.selected {text-decoration:underline;}

/* TEXT - paragraphs and lists */
html body p {font-family: 'akzidenz-grotesk_bqregular'; font-size:14px; color:#9EA0A0;}
.intro p {font-family: 'bell_mtitalic'; font-size:47px; line-height:52px; margin-bottom:30px;}
.content p {line-height:20px;  margin-bottom:20px;}
.content p.highlight {font-family: 'bell_mtitalic'; font-size:16px;}
span.reduced { letter-spacing: -3pt; }

/* COMMON */
.left {float:left} .right {float:right} .center {margin:0 auto}
.margin-top {margin-top: 50px;} .margin-top-20 {margin-top: 20px;} .margin-top-25 {margin-top: 25px;}
.center_text {text-align:center}
span.hylight {color:#000}
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

/* STRUCTURE */
.header_container {width:100%; margin-bottom:10px;}
.header {width:478px; height:60px; margin:0 auto; position:relative;}
.logo {width:199px; height:44px; position:absolute; left:0; top:16px; background:url(../images/ui/designwerk_logo.gif) no-repeat;}
.youtube {Width:24px; height:16px; position:absolute; right:54px; top:26px; background:url(../images/ui/icon_youtube.png) no-repeat;}
.twitter {Width:20px; height:16px; position:absolute; right:26px; top:26px; background:url(../images/ui/icon_twitter.png) no-repeat;}
.linkedin {Width:18px; height:16px; position:absolute; right:0; top:26px; background:url(../images/ui/icon_linkedin.png) no-repeat;}

.nav_container, .subnav_container, .intro_container,
.content_container {width:100%;}
.nav, .subnav, .intro, .content {margin:0 auto;}

.nav {width:484px;}
.subnav {width:484px; padding-bottom:20px;}
.nav a, .subnav a {width:115px; height:22px; float:left; margin:0 3px; font-family: 'bell_mtitalic'; font-size:18px; line-height:22px; text-align:center;}
.intro {width:812px; }
.content {width:812px; padding-bottom:20px; position:relative;}
.box {width:390px; border-top:2px solid #000; padding-top:10px; padding-right:13px;}

/* ABOUT > CLIENTS section */
.about_clients .box {border-bottom:2px solid #000; height:295px;}
.about_clients .logos img {margin:2px; display:block; float:left;}

/* ABOUT > NEWS section */
.about_news {width:714px;}
.about_news .news_item { float: left; margin: 0 1px; width: 236px; height: 255px; }
.about_news p { margin-bottom: 0; }
.about_news p img {display: block;}
.about_news .news_item h2 { font-family: 'akzidenz-grotesk_bqregular';  color:#000;font-size: 14px; margin: 4px 0px 2px 0px;}
.about_news .news_item p { font-size:13px; line-height:1.4; }
.about_news .separator { margin: 8px 0; height: 2px; background-color: #000000; clear: both; }
.about_news h1.more_news {float: left; text-transform: uppercase; font-family: 'akzidenz-grotesk_bqregular'; font-size:14px; margin-top:18px; margin-bottom:8px; text-decoration:none; border-bottom: 2px solid #000; }
.about_news .more_news_list { clear: both; }

.about_news_show { padding: 0 2px;}
.about_news_show h1 {margin-bottom: 0; font-family: 'akzidenz-grotesk_bqregular'; font-size: 16px; color:#000;}
.about_news_show h2,
.about_news_show h3 {font-weight: normal; margin-bottom: 0; font-family: 'akzidenz-grotesk_bqregular'; font-size: 16px; color:#9EA0A0;}	
.about_news_show h3 { float: right; }
.about_news_show .news_content { margin-top: 6px; width: 460px; color: #9EA0A0; float: left; }
.about_news_show .news_content p { font-size:15px; margin-bottom: 20px; }
.about_news_show .news_content .social_icons { height: 30px; padding: 8px 0; }
.st_twitter_hcount,
.st_fblike_hcount { line-height: 30px; }

.about_news_show .news_secondary_content { margin-top: 6px; }
.about_news_show .news_secondary_content { float: right; }

/* ABOUT > AWARDS section */
.about_awards { border-top:2px solid #000; border-bottom:2px solid #000; padding-bottom:0; }
.about_awards .box {border:none}
.about_awards p.news_source {font-size:12px; line-height:14px; margin-bottom:10px;}
.the_awards {border-top:none; border-bottom:2px solid #000;}
.the_awards .box {border:none; padding-top:0;}
.the_awards h1 {font-family: 'akzidenz-grotesk_bqbold'; color:#9EA0A0; font-size:16px; line-height:16px; margin-top:15px;}
.the_awards h2 {font-family: 'akzidenz-grotesk_bqbold'; color:#000000; font-size:14px; line-height:14px; margin-top:10px;}
.the_awards a {font-family: 'akzidenz-grotesk_bqregular'; color:#000000; font-size:13px; display:block; margin-top:10px; cursor:default;}
.the_awards a span {display:block; color:#9EA0A0;}

.about_awards .swap_image {width:250px; height:160px; background:url(../images/about_awards/sample.jpg); background-position:0 0;}
.about_awards .transform_1 .no_image {background-position:0 0px;}
.about_awards .transform_1 .swap_image {background-position:0 -160px;}
.about_awards .transform_2 .swap_image {background-position:0 -320px;}
.about_awards .transform_3 .swap_image {background-position:0 -480px;}
.about_awards .adesign_1 .swap_image {background-position:0 -640px;}
.about_awards .adesign_2 .swap_image {background-position:0 -800px;}
.about_awards .adesign_3 .swap_image {background-position:0 -1120px;}
.about_awards .hermes_1 .swap_image {background-position:0 -1120px;}
.about_awards .hermes_2 .swap_image {background-position:0 -320px;}
.about_awards .hermes_3 .swap_image {background-position:0 -800px;}
.about_awards .hermes_4 .swap_image {background-position:0 -160px;}
.about_awards .marcom_1 .swap_image {background-position:0 -960px;}
.about_awards .marcom_2 .swap_image {background-position:0 -1120px;}
.about_awards .marcom_3 .swap_image {background-position:0 -1280px;}
.about_awards .icc_1 .swap_image {background-position:0 -1440px;}
.about_awards .id_1 .swap_image {background-position:0 -1600px;}
.about_awards .id_2 .swap_image {background-position:0 -1760px;}
.about_awards .spark_1 .swap_image {background-position:0 -1920px;}
.about_awards .spark_2 .swap_image {background-position:0 -2080px;}
.about_awards .se_1 .swap_image {background-position:0 -2240px;}
.about_awards .isem_1 .swap_image {background-position:0 -2400px;}

/* SERVICES > ALL sections */
.services .border_top_bottom {width:403px; border-bottom:2px solid #000; padding-bottom:10px; padding-right:0; margin-bottom:10px; margin-top:10px;}
.services .no_top_padding {padding-top:0}
.services p.title {color:#000; margin-bottom:0}
.services img {display:block}

/* CONTACT > OFFICES section */
.contact_offices .left {width:154px;}
.contact_offices .right {width:639px; padding-right:0;}
.contact_offices #location_maps, .contact_offices #transport_links {margin-top:20px}

.contact_offices h2 {font-family: 'akzidenz-grotesk_bqregular'; font-size:12px; height:14px; line-height:14px; float:left; padding-right:5px;}

.contact_offices .main {position:relative; overflow:hidden; width:639px; height:330px; float:right;}
.contact_offices .pages {position:absolute; width:20000em; border-top:2px solid #000; padding-top:5px;}
.contact_offices .page {height: 330px; width:639px; float:left}
.contact_offices .scrollable {position:relative; overflow:hidden; width: 634px; height: 450px;}

.contact_offices .main_navi {float:left; padding:0px !important; margin:0px !important; height:14px;}
.contact_offices .main_navi li {cursor:pointer; float:left; margin-right:10px; font-size:12px; height:14px; line-height:14px;}
.contact_offices .main_navi li:hover, .content .main_navi li.active {color:#000000;}

/* CONTACT > CAREERS section */
.contact_careers .table_container {width:812px; padding:0;}
.contact_careers .table_container h1 {font-family: 'akzidenz-grotesk_bqregular'; font-size:13px; height:40px; line-height:40px;}
.contact_careers .table_container table {
  border-collapse: collapse; border-color: #9EA0A0; border-spacing: 2px; border-style: outset; border-width: 1px;
  font-family: 'akzidenz-grotesk_bqregular'; color:#9EA0A0; font-size:12px;}
.contact_careers .table_container table tr {border-color: #9EA0A0; border-style: inset; border-width: 1px; padding: 20px;}
.contact_careers .table_container table td {border-color: #9EA0A0; border-style: inset; border-width: 1px; padding: 20px;}
.contact_careers .table_container table tr.header {font-family: 'akzidenz-grotesk_bqregular'; font-size:12px; color:#000;}

/* CONTACT > CLIENT LOGIN section */
.login {
  width:445px; padding:15px; margin:0 auto; background-color:#D7D7D7;
  font-family: 'akzidenz-grotesk_bqregular'; font-size:13px; color:#9EA0A0;
  -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
.login label {float:left; width:85px; line-height:26px; height:26px;}
.login input {float:left; width:260px; line-height:26px; height:26px; border:none; background-color:#FFF; }
.login .fix_button {padding-top:9px; width:345px; float:left;}
.login input.submit {
  float:right; width:80px; line-height:35px; height:35px; background-color:#9EA0A0; color:#FFF;
  -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
p.confirm {width:445px; padding:15px; margin:0 auto; color:#C00; text-align:center}

/* CONTACT > ENQUIRIES section */
.contact_enquiries ul {width:185px; padding-right:8px; float:left;}
.contact_enquiries .full_box {border-top:2px solid #000; padding-top:10px;}
.contact_enquiries .office {float:left; margin-right:70px;}

/* WORK section */
#main.projects {margin: 0 auto; position: relative; display:none;}
.projects ul li {display: block; float: left; margin: 1px; }
.projects ul li hr {width: 242px; height: 3px; margin: 3px 0 3px; background-color: #000; border: none; }
.projects ul li a {display: block; color:#9EA0A0; font-family: arial; font-weight: normal}
.projects ul li a.project-thumbs {background: #000; width: 242px; height: 154px; }
.projects ul li a.disabled-thumb {cursor: default; }
.projects ul li a h2 {font-size: 11px; height:13px; line-height:13px; margin-bottom: 0px; font-family: 'akzidenz-grotesk_bqregular'; color:#000;}
.projects ul li a img {display: block; border: none;}
.projects ul li h3 {font-size: 11px; margin-bottom: 12px; font-family: 'akzidenz-grotesk_bqregular';}


.projects ul li {position:relative;}
.projects ul li span {display:none; padding: 0 35px; width:172px; height:84px; position:absolute; left:0; top:70px; display:none; font-family: 'bell_mtitalic'; font-size:18px; text-align:center; color:#FFF;}
.projects ul li span.dw-title-highlight {position: relative; display:inline; background:none; left: 0; top: 0; width: 0; height: 0; text-align: left; padding: 0; }

#single-project {width:960px; margin:0 auto; position:relative;}
.project_header {width:100%; height:510px; padding-top:65px; background-repeat:no-repeat; background-position:center top;}
.project_slogan {width:478px;margin:0 auto; background:url(../images/ui/tint_white_95.png);}
.project_slogan h1 {width:230px; margin:0 auto; border-bottom:2px solid #9EA0A0; display:inline; padding:0 15px;
									 font-family: 'bell_mtitalic'; font-size:30px; line-height:40px; height:40px; text-align:center; color:#9EA0A0;}
.project_slogan h2 {font-family: 'akzidenz-grotesk_bqregular'; font-size:12px; line-height:35px; height:35px; text-align:center; color:#000;}
.info {width:478px; margin:3px auto; background:url(../images/ui/tint_white_95.png); padding-top:35px;}
.info p {font-family: 'akzidenz-grotesk_bqregular'; font-size:14px; line-height:16px; color:#9EA0A0; padding:7px;}
.group-header {height:30px;}
.group-header a {
	width:115px; height:24px; border-bottom: 2px solid #000000; margin:0 3px;
	font-family: 'bell_mtitalic'; line-height:24px; font-size:18px; text-align:center; color:#9EA0A0;}
.group-header a:hover {color:#000;}
.group-header .back_top { float:left; width: 185px;}
.group-header .back_top .title {border:none; background:url(../images/ui/arrow_top.gif) no-repeat top left; width:85px; padding-left:15px; margin:0;}
.group-header .back_top .title:hover {background:url(../images/ui/arrow_top.gif) no-repeat bottom left; }
.group-header .next-project {float:right; width: 185px; color: #9EA0A0; }
.group-header .next-project a { border: none; }
.group-header .next-project a.to-next-project {background:url(../images/ui/arrow_next.gif) no-repeat top right; padding:1px 15px 1px 0; margin:0;}
.group-header .next-project a.to-next-project:hover {background:url(../images/ui/arrow_next.gif) no-repeat bottom right; }
.group-header .bottom-next a {padding-left:90px;}
.group-header .group-nav {float:left; width:590px;}
.group-header .group-nav li {display:inline;}
.group-header .group-nav li a {padding:0px 10px; margin:0 3px; }
.group-header .group-nav li a.first {background: none; padding-left: 0; }
.group-header .group-nav li a.selected{color:#000;}
#single-project ul.project-asset li {margin-top: 15px; text-align: center;}
#single-project ul.project-asset li img.hidden {display: none}
#single-project ul.project-asset .video-wrapper {width: 960px; height: 540px;}
#single-project ul.project-asset p.project-asset-description { margin-bottom: 7px; text-align: left; width: auto }
#single-project .social_icons {padding-bottom:5px; text-align:right; position:absolute; right:0; top:-32px;}