/***************************************************
 * Reset Browser's Internal Stylesheets, which normalizes the display between a variety of browsers.
 ***************************************************/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,select,textarea,p,blockquote,th,td { 
  margin: 0;
  padding: 0;
}

fieldset,img { 
  border: 0;
}

address,caption,cite,code,dfn,th,var {
  font-style: normal;
  font-weight: normal;
}

ol,ul {
  list-style: none;
}

caption,th {
  text-align: left;
}

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

q:before,q:after {
  content: '';
}

abbr,acronym { 
  border: 0;
}

div {
  vertical-align: top;
}

/***************************************************
 * Layout constructed to support a grid consisting of
 * 12 columns with a width of 84px
 * 12px gutters
 * Grid Width: 1008px
 *
 * font size is 11.0px
 * line-height is 14.0px;
 * Generated using the Typography System Plugin by Mark Daggett
 * http://www.locusfoc.us
 ***************************************************/

body {
  padding: 0;
  margin:0;
  font-size:68.75%; /* 11.0px */
  line-height:1.27272727272727; /* 14px */
  font-family: "Helvetica Neue", arial, helvetica, sans-serif;
}
 
html>body {
   font-size: 11.0px;
}

p, ol, ul, dl, blockquote {
  font-size: 1.2em;       /* 11px */
  line-height:1.06060606060606;        /* 14px */
  margin:0 0 1.06060606060606em 0;        /* 14px */
}

h6 {
  font-size: 1.2em;               /* 13px */
  margin: 0;
  padding:0;
}

h5, th {
  font-size: 1.2em;               /* 13px */
  margin: 0;
  padding:0;
  font-weight: bold;
}

h4 {
  font-size: 1.8em;
  margin: 0;
  padding:0;
}

h3, caption {
  font-size: 1.8em;
  margin: 0;
  padding:0;
}

h2, .tabular_data caption {
  font-size: 2.1em;
  line-height:1.0em;
  margin: 0;
  padding:0;
}

h1 {
  font-size: 2.4em;
  margin: 0;
  padding:0;
}

h1.title {
  font-size: 3.6em;
  margin: 0 0 1.06060606060606em 0;
  padding: 0;
}

/***************************************************
 * Forms
 ***************************************************/
input, textarea, select, .button {
  font-size: 1.0em;
  line-height: 0.909090909090909;
  padding: 0.379918588873813em;
  margin: 0 0 0.909090909090909em 0;
  border: 0.0909090909090909em solid #d6d3cb;
  color: #000;
  background: #fff;
}

/*
  Checkboxes and inputs do not accept padding or border, therefore we need
  to assign a style which will ensure maintain the same height as other inputs.
*/
.checkbox, .radio {
  height: 3.35em;;
}

select { 
  padding: 0.318189772926141em 0.318189772926141em;
}
option {
  margin:0;
}

textarea {
  height: 10.0em;
}

input:hover, textarea:hover {
  border: 0.0909090909090909em solid #999;
}

input:focus {
  border: 0.0909090909090909em solid #b7ac98;
}

textarea:focus {
  border: 0.0909090909090909em solid #d6d3cb;
  background-color: #fff;
}

/***************************************************
 * Lists
 ***************************************************/ 
ol li {
  list-style: decimal;
  list-style-position: inside;
}
 
dt {
  margin-top: 1.06060606060606em;
  font-weight: bolder;
}

.inline_list li {
  display: inline;
}

/***************************************************
 * Tables
 * Cellpadding and Cellspacing cannot be controller through CSS, therefore you
 * must set them to 0 (or some valid grid value) to ensure they do not knock off 
 * vertical rhythm.
 ***************************************************/
table {
  margin:0;
  line-height: 0.795454545454545;
}

caption {
  background-color:#efefef;
  padding:0 5px;
  white-space:nowrap;
}

th, td {
  font-size:1.2em;
  line-height: 1.06060606060606;
  padding: 0.53030303030303em;
  margin: 0;
}

/***************************************************
 * Graphic Design
 ***************************************************/
span.amp { 
 font-family: "Goudy Old Style", "Palatino", "Book Antiqua", serif; 
 font-style: italic; 
 line-height:0.636681977352312;
}
/***************************************************
 * Layout Columns
 ***************************************************/
 #wrap {
   width: 1028px;
   padding:0 10px;
   margin: 0 auto;
 }

 .divider {
   margin-bottom: 28px;
 }
 .slug {
   margin-bottom: 12px;
 }
.use1column, .use2columns, .use3columns, .use4columns, .use5columns, .use6columns, .use7columns, .use8columns, .use9columns, .use10columns, .use11columns, .use12columns {
   overflow: hidden;
   float: left;
   margin-left: 6px;
   margin-right: 6px;
 }
 .use1column { width: 72px; }
 .use2columns { width: 156px; }
 .use3columns { width: 240px; }
 .use4columns { width: 324px; }
 .use5columns { width: 408px; }
 .use6columns { width: 492px; }
 .use7columns { width: 576px; }
 .use8columns { width: 660px; }
 .use9columns { width: 744px; }
 .use10columns { width: 828px; }
 .use11columns { width: 912px; }
 .use12columns { width: 996px; }
 .allcolumns { width:  1068px; }
 /* use this class when nesting columns */
 .inner_left { margin-left: 0 !important; }
 .inner_right { margin-right: 0 !important; }
 
 br { clear: both; }

/***************************************************
* Add your custom CSS below this line.
***************************************************/
.clickable {
  cursor:pointer;
}
a.blockLink {
 display:inline-block;
 padding:2px 6px;
 color:#fff;
 background-color:#2669AA;
 text-decoration:none;
 text-transform:uppercase;
}
body {
  background-color:#fff;
}

#wrap {
  color:#333;
  font-family:'Gill Sans', sans-serif;
}
.button {
  display:inline-block;
}

.page_content {
   margin-top:2.0em;
   float:left;
}

h2, .jobsList dt {
  text-transform:uppercase;
  color:#003D7C;
  font-weight: lighter;
  margin-bottom:0.5em;
}

.job .description{
  font-size:1.0em;
}

.job li {
  margin-left:20px;
  list-style:disc outside none;
}

.job .description h6 {
  color:#666666;
  margin-left:12px;
  font-weight:bold;
}
a {
  outline:none !important;
  color:#F5500F;
  text-decoration:none;
}
a:hover, a:active {
  text-decoration: underline;
}

a.callout {
  background-color:#00559E;
  color:#fff;
  padding:2px;
}
a.callout:hover, a.callout:active {
  background-color:#F5500F;
  text-decoration:none;
}
.session_nav {
  float: right;
}
.session_nav li{
  padding-left:10px;
}
.session_nav a {
  color:#000;
}
.nav {
  background: #f5f5f5 url('/images/nav.png') 0px 0px;
  float:left;
  width:1008px;
}
.nav a {
  text-indent:-9999px;
  display:block;
  float:left;
  height:50px;
  width:85px;
}
.nav .home {
  width:169px;
  background: #f5f5f5 url('/images/nav.png') 0 0;
}
.nav .company, .nav .company_selected  {
  background: #f5f5f5 url('/images/nav.png') -169px 0;
}
.nav a.company:hover, .nav a.company:active, .nav a.company_selected {
  background-position: -169px 51px;
}
.nav .work, .nav .work_selected {
  background: #f5f5f5 url('/images/nav.png') -254px 0;
}
.nav a.work:hover, .nav a.work:active, .nav a.work_selected {
  background-position: -254px 51px;
}
.nav .news, .nav .news_selected {
  background: #f5f5f5 url('/images/nav.png') -339px 0;
}
.nav a.news:hover, .nav a.news:active, .nav a.news_selected {
  background-position: -339px 51px;
}
.nav .careers, .nav .careers_selected {
  background: #f5f5f5 url('/images/nav.png') -423px 0;
}
.nav a.careers:hover, .nav a.careers:active, .nav a.careers_selected {
  background-position: -423px 51px;
}

.sub_nav {
  text-transform:uppercase;
  font-size:10px;
  float:left;
  width:1008px;
  margin:6px 0 0 0;
}
.sub_nav a {
  font-size: 1.2em;
  display:block;
  float:left;
  padding:0.53030303030303em 0 0.53030303030303em 1.0em;
  line-height: 1.06060606060606;
  color:#000;
}
.sub_nav a:hover, .sub_nav a:active {
  color:#00559E;
  text-decoration:none;
}
.sub_nav a.selected {
  color:#00559E;
}

/*
  Flash & Errors
*/
.flash_notice, .flash_error, .flash_warning {
  font-size: 1.8em;
  line-height: 1.33333333333333;
  margin: 0.666666666666667em 0 0 0;
  padding: 0 0 0.666666666666667em 0;  
  background-color: #fff4c8;
  color: #000 !important;
  text-align: center;
  margin:2.0em 0;
}

.flash_error {
  background-color: #ffc8c8;  
}

.flash_notice {
  background-color: #c8ffcb;
}

.flash_notice a, .flash_error a, .flash_warning a {
  color: #01a163;
  border: none !important;
}

.warning {
  padding: 10px 30px 10px 10px;
  background-color: #efefef;
  border-left: 10px solid #ffafaf;
}

.errorExplanation {
  width:100%;
  border: 1px solid #eee;
  padding:0 10px;
  background-color: #ffefef;
  margin:20px 0 20px -10px;
}
.errorExplanation h2 {
  font-size: 120%;
  text-align: left;
}
.fieldWithErrors {
  font-size: 1.2em;
}
.fieldWithErrors input, .fieldWithErrors textarea {
  background-color: #ffefef;
}

/*
  Index
*/
.reel {
  background-color:#181818;
  padding:6px;
  color:#fff;
  font-weight:100;
}

.reel_title {
  margin-top:14px;
}

.featured_project h2 {
  color:#000;
}

/*
  Services
*/
#services {
  margin-top:2.0em;
}
.project_info {
  background-color:#00559E;
  color:#fff;
}

#prev_button, #next_button {
  cursor:pointer;
}

.project_info .date {
  padding:3px 12px;
  display:block;
}
.splashGallery {
  width: 1010px;
  height:500px;
}
.splashGallery .use3columns {
  width:252px;
}
.splashGallery .theatre {
  margin:6px 6px;
  background-color:#fff;
}
.gallery .item {
  width:72px;
  height:72px;
  margin:6px;
  float:left;
  background-color:#ccc;
}
.splashGallery .item {
  background-color:#fff;
}
.splashGallery .item .container {
  background-color:#f7f7f7;
  width:72px;
  height:72px;
  overflow:hidden;
}
.service_copy, .technology_copy {
  text-align: justify;
}

.services_title, .featured_projects dt, .technology_title {
  text-transform:uppercase;
  white-space:nowrap;
  margin: 10px 0 0 0;
  color:#003D7C;
}
.featured_projects h5 {
  text-transform:uppercase;
  color:#003D7C;
}

.services_slogan, .technology_slogan {
  text-align:right;
  margin: 0 12px 0 0;
  color:#000;
}
/*
  studio
*/
.page_content .studio {
  padding: 0 0 0 12px;
}

.page_content .studio .play_button {
  position:absolute;
  cursor:pointer;
}

.page_content .studio .still {
  background-color:#00559E;
  height:245px;
  overflow:hidden !important;
}
.page_content .studio .content {
  color:#000;
  width:492px;
}
.page_content .studio .content h2 {
  color:#fff;
}

.studio_audio, .studio_digital, .studio_facilities, .studio_x12_productions, .service_page {
  float:left;
}

.banner,
.studio_digital .banner,
.studio_facilities .banner,
.studio_x12_productions .banner {
  background: url('/images/studio_digital_banner.png') no-repeat 0 0;
  height:343px;
  width:510px;
}

.services_syndication .banner {
  background: url('/images/services_syndication_banner.jpg') no-repeat 0 0;
}

.services_promotion-marketing .banner {
  background: url('/images/services_promotion-marketing_banner.jpg') no-repeat 0 0;
}

.services_production .banner {
  background: url('/images/services_production_banner.jpg') no-repeat 0 0;
}

.services_post-production .banner {
  background: url('/images/services_post-production_banner.jpg') no-repeat 0 0;
}

.services_digital-packaging .banner {
  background: url('/images/services_digital-packaging_banner.jpg') no-repeat 0 0;
}

.services_design .banner {
  background: url('/images/services_design_banner.jpg') no-repeat 0 0;
}

.services_creative .banner {
  background: url('/images/services_creative_banner.jpg') no-repeat 0 0;
}

.services_strategy .banner {
  background: url('/images/services_strategy_banner.jpg') no-repeat 0 0;
}

.studio_facilities .banner {
  background: url('/images/studio_facilities_banner.png') no-repeat 0 0;
}

.studio_x12_productions .banner{
  background: url('/images/studio_x12_productions_banner.png') no-repeat 0 0;
}

.technology_blogcata .banner {
  background: url('/images/technology_blogcata_banner.jpg') no-repeat 0 0;
}

.technology_tech .banner {
  background: url('/images/technology_tech_banner.jpg') no-repeat 0 0;
}

.studio_audio .banner{
  background: url('/images/studio_audio_banner.png') no-repeat 0 0;
  height:343px;
  width:510px;
}

.banner h1 {
  font-size: 7.2em;
  color:#fff;
  line-height:0.9;
  margin-left:12px;
  text-transform:uppercase;
  padding-top:9px;
}
.banner h1.smaller {
  font-size: 6.5em;
}
.banner h2 {
  margin:12px;
  color:#000;
  text-transform:uppercase;
}
/*
  About
*/
.meta {
  background-color:#e0e0e0;
  color:#818B90;
}
.meta h2 {
  margin-top:12px;
}
.meta h2, .meta p {
  margin-left:12px;
}
.contactInfo .header {
  color:#003D7C;
  text-align:right;
  text-transform:uppercase;
}
.contactInfo {
  margin-top:24px;
  font-size:10px !important;
}
.contactInfo dt {
  margin-top:0;
}
/*
  caseStudies
*/
.caseStudies .blockTitle{
  height:156px;
}
.caseStudies .block{
  height:154px;
  width:154px;
  border:1px solid #eeeeee;
}
.caseStudies .block.creative {
  background-color:#0063A9;
}

.caseStudies .block.strategy {
  background-color:#F76412;
}

.caseStudies .block.innovation{
  background-color:#949CA2;
}
.caseStudy .copy {
  margin-left:24px;
}
.caseStudy .copy h1 {
  line-height:0.75;
  margin-bottom:24px;
}
.caseStudy .copy h1 a {
  color:#000;
}
.caseStudy .copy .subtitle {
  color:#0063A9;
  margin-bottom:12px;
}
.caseStudy .copy h6 {
  margin-bottom:12px;
}

.caseStudy dl, .caseStudies dl {
  color:#fff;
  margin:0 12px 0 12px;
}
.caseStudy dt, .caseStudy dd, .caseStudies dt, .caseStudies dd {
  font-weight:normal;
  padding-bottom:12px;
}
.caseStudy dd.title, .caseStudies dd.title {
  text-transform:uppercase;
}
.caseStudy dl a, .caseStudies dl a {
  text-decoration:none;
  color: #fff;
}
.caseStudy dl a:hover, .caseStudy dl a:active, .caseStudies dl a:hover, .caseStudies dl a:active {
  text-decoration:underline;
}

/*
About
*/
.leadership {
  font-size:1.1em;
}
.leadership .use4columns {
  width:396px;
}
/*
 Jobs
*/
.jobTitle {
  color:#000;
}
.job {
  color:#808080;
}
/*
News
*/
.newsStory, .newsStory a {
  color:#000;
}
.newsStory .selectedStory a{
  color:#2669AA;
}

.newsStory h6 {
  color:#A9AFB3;
}
.newsList dt{
  font-weight:normal;
}
.newsList dd, .sourceLink {
  color:#A9AFB3 !important;
}
/*
  Pagination Classes
*/
.pagination {
  margin-top: 1.0em;
  margin-bottom: 1.2em;
  height: 2.0em;
}

.pagination .ellipses {
  display: block;
  float: left;
  padding: 0 0.5em 0 0.5em;
}

.pagination a, .pagination .current, .disabled {
  display: block;
  padding: 0.2em 0.5em 0.2em 0.5em;
  height:16px;
  margin: 0 0.2em 0 0.2em;
  float:left;
  border: 1px solid #ccc;
}
.disabled {
  border: 1px solid #efefef;
}
.pagination .current {
  background-color: #efefef;
}

.pagination a:hover {
  background-color: #efefef;    
}

/*
  Project Pages
*/
.project h4 {
  color:#00559E;
}
.project .categories li {
  padding-left:10px;
}
.project .categories li.first{
  padding-left:0px;
}
.projectHeader {
  color:#00559E;
}
.projectHeader h1 {
  margin-top:0;
  margin-bottom:12px;
  line-height:0.75;
  color:#333;
}
.projectHeader .date{
  color:#333;
}

#thumbnails li {
  display: block;
  float: left;
  margin:6px;
  overflow: hidden;
  background-color: #efefef;
  margin-bottom:1.3333333333em;
}
#thumbnails li.leftSide {
  margin-left:0;
}

#thumbnails li.rightSide {
  margin-right:0;
}

#thumbnails .slide {
  cursor: pointer;
}
#thumbnails li a {
  display:block;
}

#thumbnails li.selected {
}

#thumbnails .thumbnail {
  background-color:#fff;
  overflow:hidden;
}

#thumbnails .thumbnail .image {
  background-color: #efefef;
}

#gallery {
  padding-left:24px;
}
.user_gallery img {
  
}
.user_gallery .users div {
  height:72px;
  width:72px;
  margin-bottom:12px;
  background-color:#f7f7f7;
}

.gallery_overlay, .galleryOverlay {
  position:absolute;
  z-index:500;
}
.galleryOverlay .featuredProject {
  margin-top:90px;
}
.galleryOverlay .featuredProject .title, 
.galleryOverlay .featuredProject .link {
  height:72px;
} 
.galleryOverlay .featuredProject .description {
  height:144px;
}
.galleryOverlay .featuredProject .link a {
  display:block;
  float:left;
  background-color:#2669AA;
  color:#fff;
  text-transform:uppercase;
  text-decoration:none;
  padding:3px 6px;
}
.galleryOverlay .featuredProject .link a:hover, 
.galleryOverlay .featuredProject .link a:active {
  background-color:#E86F36
}
.galleryOverlay .featuredProjectImage {
  height:156px;
  width:156px;
  overflow:hidden;
}
.user_gallery #user_name {
  margin-bottom: 6px;
  color:#000;
}

.thumbGallery .image {
  width: 72px;
  height:72px;
  background-color:#efefef;
  overflow:hidden;
  margin:0 6px 12px 6px;
  float:left;
}
.thumbGallery .image.first {
  margin-left:0;
}
.thumbGallery .image.last {
  margin-right:0;
}

.user_gallery #user_position {
  margin-bottom: 35px;
  color:#003D7C;
}
.scrim {
  position:absolute;
  background-color:#fff;
  /* for IE */
  filter:alpha(opacity=90);
  /* CSS3 standard */
  opacity:0.90;
}
.odd { background-color:#fafafa; }
.even { background-color:#fff; }