/*  CSS Reset
--------------------------------------------------- */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

/*  HTML 5 Elements
--------------------------------------------------- */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

/*  HTML & Body
--------------------------------------------------- */
html { overflow: -moz-scrollbars-vertical; overflow-y: scroll; }

html, body { height: 100%; }

body { background: #e4e4e4; color: #000; font: normal 12px/1 "proxima-nova", "Helvetica Neue", "HelveticaNeue", sans-serif; text-transform: uppercase; }

/*  Headings
--------------------------------------------------- */
h1 { color: #f36a00; font: normal 600 28px/1 "proxima-nova", "Helvetica Neue", "HelveticaNeue", sans-serif; letter-spacing: 2px; }

h2 { color: #aaa; font: normal 400 22px/1 "proxima-nova", "Helvetica Neue", "HelveticaNeue", sans-serif; letter-spacing: 1px; }

h3 { color: #444; font: normal 600 17px/1 "proxima-nova", "Helvetica Neue", "HelveticaNeue", sans-serif; letter-spacing: 1px; }

h4 { color: #777; font: normal 600 13px/1 "proxima-nova", "Helvetica Neue", "HelveticaNeue", sans-serif; letter-spacing: 1px; }

h5, h6 { color: #444; font: normal 600 11px/1 "proxima-nova", "Helvetica Neue", "HelveticaNeue", sans-serif; letter-spacing: 1px; }

/*  Paragraphs
--------------------------------------------------- */
p { margin: 5px 0 10px; line-height: 1.8; }

/*  Images
--------------------------------------------------- */
img { display: block; border: none; }

.inlineImg { display: inline; }

.icon { display: inline; vertical-align: middle; }

.ie7 img { -ms-interpolation-mode: bicubic; }

/*  Links
--------------------------------------------------- */
a:link, a:visited { color: #000; text-decoration: none; }

a:link { -webkit-tap-highlight-color: #f36a00; }

a:hover, a:active, .active a { color: #f36a00; outline: none; }

/*  Lists
--------------------------------------------------- */
ul { margin: 10px 0; padding: 0 0 0 25px; list-style: disc outside; }
ul li { margin: 0 0 5px; }
ul ul { list-style: circle outside; }
ul ul ul { list-style: square outside; }

.credit-list { margin: 0; padding: 0; list-style: none; }
.credit-list li { display: inline; line-height: 1.8; }
.credit-list li:after { content: ", "; }
.credit-list li:last-child:after { content: "."; }

nav ul, nav li { margin: 0; padding: 0; list-style: none; list-style-image: none; }

ol { margin: 10px 0; padding: 0 0 0 25px; list-style: decimal outside; }
ol li { margin: 0 0 5px; }
ol ol { list-style: decimal outside; }
ol ol ol { list-style: lower-alpha outside; }

/*  Tables Basic table structure: table thead (optional) tfoot (optional) tbody (required)  *  Tables can contain multiple tbody elements.
--------------------------------------------------- */
table { width: 100%; border: none; border-collapse: collapse; }

th { text-align: left; }

td { vertical-align: top; }

/*  Forms
--------------------------------------------------- */
fieldset { border: none; }

.ie6 legend, .ie7 legend { margin-left: -7px; }

label { cursor: pointer; }

input { margin: 0; font-size: 99%; vertical-align: middle; }

.ie6 input { vertical-align: text-bottom; }

input[type="radio"] { vertical-align: text-bottom; }

input[type="checkbox"] { vertical-align: bottom; }

.ie7 input[type="checkbox"] { vertical-align: baseline; }

textarea { margin: 0; font-size: 99%; overflow: auto; }

input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; }

select { margin: 0; font-size: 99%; }

button, input[type="submit"] { width: auto; margin: 0; font-size: 99%; overflow: visible; }

input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }

/*  Other Elements & Global Classes
--------------------------------------------------- */
blockquote, q { quotes: none; }

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

ins { background-color: #ff9; color: #000; text-decoration: none; }

mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }

pre, code, kbd, samp { font-family: monospace, sans-serif; }

sub, sup { font-size: 75%; line-height: 0; position: relative; }

sup { top: -0.5em; }

sub { bottom: -0.25em; }

pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; padding: 15px; }

::-moz-selection { background: #f36a00; color: #fff; text-shadow: none; }

::selection { background: #f36a00; color: #fff; text-shadow: none; }

hr { display: none; }

.skipLink, .hide { display: none; visibility: hidden; }

.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }

.clearfix:after { clear: both; }

.clearfix { zoom: 1; }

/*  Layout
--------------------------------------------------- */
#page { width: 780px; margin: 0 auto; padding: 45px 0 0; }

/*  Header
--------------------------------------------------- */
#site-header { text-align: center; }
#site-header hgroup h2 { margin: 7px 0 0; color: #000; font-size: 28px; font-weight: 700; letter-spacing: 4px; }

#site-nav { padding: 30px 0 15px; font-size: 11px; font-weight: 700; letter-spacing: 1px; }
#site-nav li { display: inline-block; margin: 0 0 0 50px; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4); }
#site-nav li:first-child { margin: 0; }

/*  Content
--------------------------------------------------- */
#hero { padding: 0 0 26px; background: transparent url(/images/bg_content.png) no-repeat bottom; }

/*  Video Content - commercials - cars - music videos - narratives & tv - archive
--------------------------------------------------- */
#spot { position: relative; overflow: hidden; height: 405px; padding: 30px; background: #fff url(/images/loader_horizontal.gif) no-repeat center; }

#stills-page #spot { height: auto; }

#slideshow { height: 405px; background: white; }

#credits { height: 50px; margin: 0; padding: 0; color: #000; text-align: center; }
#credits h3, #credits h4 { display: inline; padding: 0 0 0 5px; color: #444; font-size: 11px; font-weight: 400; }
#credits dt, #credits dd { display: inline; color: #444; }
#credits #more-link { display: inline-block; width: 70px; text-align: left; }
#credits #more-link a { margin: 0 0 0 5px; }
#credits dd { padding: 0 5px 0 0; }
#credits dt:before { content: " / "; }
#credits dt:first-child:before { content: ""; }
#credits dt:first-child h3 { padding: 0 5px 0 0; color: #000; }
#credits dt:first-child:after { content: " / "; }
#credits ul { margin: 0; padding: 0; list-style: none; color: #777; letter-spacing: 1px; }
#credits ul li { display: inline; padding: 0 10px; }
#credits ul strong { color: #000; }
#credits ul strong, #credits ul a { padding-left: 5px; font-weight: 600; }
#credits #more-credits { margin: 5px 0 0; }
#credits #more-credits dt:first-child:after { content: ""; }

#spots, #thumbs ul { overflow: hidden; zoom: 1; margin: 0; padding: 0 29px; list-style: none; }
#spots li, #thumbs ul li { float: left; width: 176px; margin: 0 6px 0 0; padding: 0 0 16px; text-align: center; }
#spots li:nth-child(4n+0), #thumbs ul li:nth-child(4n+0) { margin: 0; }
#spots li:nth-child(4n+1), #thumbs ul li:nth-child(4n+1) { clear: left; }
#spots li img, #thumbs ul li img { width: 176px; height: 100px; background: rgba(0, 0, 0, 0.1); }
#spots li .timg, #thumbs ul li .timg { background: black; }
#spots li h3, #thumbs ul li h3 { margin: 10px 0 0; font-size: 11px; font-weight: 400; letter-spacing: 1px; }
#spots li h4, #thumbs ul li h4 { margin: 3px 0 0; font-size: 10px; font-weight: 400; letter-spacing: 1px; }
#spots a:hover h3, #spots .active a h3, #thumbs ul a:hover h3, #thumbs ul .active a h3 { color: #000; }
#spots a:hover h4, #spots .active a h4, #thumbs ul a:hover h4, #thumbs ul .active a h4 { color: #f36a00; }

/*  Stills
--------------------------------------------------- */
#stills-nav { height: 40px; margin: 0; padding: 0; color: #000; text-align: center; }
#stills-nav ul { text-align: center; }
#stills-nav ul li { display: inline; }
#stills-nav ul li:last-child:before { content: " / "; }
#stills-nav ul li a { padding: 0 10px; }
#stills-nav .disabled a { color: #aaa; cursor: default; }

#thumbs ul li { padding: 0 0 6px; }

/*  Info
--------------------------------------------------- */
section { padding: 20px 0; border-top: 1px dashed #777; text-align: justify; text-transform: none; }
section h2 { float: left; margin: 0 10px 0 0; color: #000; font-size: 12px; font-weight: 700; letter-spacing: 1px; line-height: 1.8; text-transform: uppercase; }
section h2:after { content: ": "; }
section p { margin: 0 0 15px; }

#credits { padding-bottom: 10px; }
#credits ul { margin: 0 0 15px; }

/*  Footer
--------------------------------------------------- */
#site-footer { clear: both; margin: 30px 0 0; padding: 0 0 20px; color: #444; font-size: 10px; letter-spacing: 1px; text-align: center; }
#site-footer a { color: #444; }
#site-footer a:hover { color: #f36a00; }

/*  Mobile Devices
--------------------------------------------------- */
/* Smartphones (landscape) ------ */
@media only screen and (min-width: 321px) and (max-width: 480px) { #thumbs li { width: 150px; height: 62px; margin: 5px 5px 0 0; }
  #thumbs li img { width: 150px; height: 62px; }
  #thumbs .n-plus-6 { margin: 5px 0 0; } }
/* Smartphones (portrait) ------ */
@media only screen and (max-width: 320px) { body { padding: 0 30px; } }
/* iPads (landscape) ----------- */
@media only screen and (min-device-width: 600px) and (max-device-width: 1024px) and (orientation: landscape) { body { padding: 0 20px; } }
/* iPads (portrait) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { body { padding: 0 30px; } }
/* iPhone 4 (portrait) ----------- */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { #thumbs li { width: 150px; height: 62px; margin: 5px 5px 0 0; }
  #thumbs li img { width: 150px; height: 62px; }
  #thumbs .n-plus-6 { margin: 5px 0 0; } }
/* nook (portrait) ----------- */
@media only screen and (min-device-width: 600px) and (max-device-width: 1024px) and (orientation: portrait) { body { padding: 0 30px; } }

/*# sourceMappingURL=style.css.map */