/* @override
  http://localhost/adlibs/style.css */

/* HTML5 Boilerplate  */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, button, input, select, textarea { font-family: sans-serif; color: #222; }
body { margin: 0; font-size: 1em; line-height: 1.4; }

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

a { color: #08587c; }
a:visited { color: #08587c; }
a:hover { color: #ae2025; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }

label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
button[disabled], input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }

.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }


/* PBS NewsHour Ad Libs 2012 */

/*
Fonts:

minion-pro (serif; body)
Regular: 400
Italic: 400
Bold: 700
Bold Italic: 700

proxima-nova
Semibold: 600
Black: 900

bickham-script-pro (script)
Regular: 400
Bold: 700

ff-brokenscript-web (blackletter)
Bold: 700

*/

html,
body
{
  height: 100%;
  min-height: 100%;
}

body
{
  background: url(img/background-page.png) center center fixed no-repeat;
  -moz-background-size: cover;
  background-size: cover;
  font-family: 'minion-pro';
}

h1, h2, h3, h4, h5, p, li /* Fix Webkit/OS X font weight bug. */
{
  opacity: .99;
}

h1,
h2,
h3,
h4
{
  font-weight: normal;
  text-transform: uppercase;
}

hr
{
  background: transparent url(img/stars.png) center center no-repeat;
  border: 0;
  height: 26px;
  margin: 2em 0;
}

.container
{
  background: #c5c9cf url(img/background-content.png) left 224px repeat-x;
  margin: 0 auto;
  padding: 0 50px 30px 50px;
  width: 800px;
  overflow: hidden;
  position: relative;
  -webkit-box-shadow: 0 0 25px #000;
     -moz-box-shadow: 0 0 25px #000;
          box-shadow: 0 0 25px #000;
}

header h1
{
  background: url(img/header-banner.jpg) top center;
  display: block;
  margin: 0 0 0 -50px;
  padding: 0;
  width: 900px;
  height: 224px;
}

.tagline
{
  color: #153350;
  font-size: 23px;
  font-style: italic;
  line-height: 1.6;
  margin: 1em 0 1em;
  text-align: center;
  text-shadow: 1px 1px 0 #fff;
}

.tagline img
{
  display: block;
  margin: .25em auto;
}

#video_type_cycle
{
  color: #000;
  display: inline-block;
  margin: 0 .1em;
  padding: 0;
  vertical-align: -6px;
  width: 260px;
  height: 40px;
  overflow: hidden;
}

#video_type_cycle em
{
  background-image: url(img/video_type_cycle.jpg);
  background-repeat: no-repeat;
  display: block;
  left: 0;
  width: 260px;
  height: 40px;
  text-indent: -9999px;
}

#video_type_cycle em.biographical { background-position: left top; }
#video_type_cycle em.smalltown    { background-position: left -40px; }
#video_type_cycle em.metro        { background-position: left -80px; }
#video_type_cycle em.attack       { background-position: left -120px; }
#video_type_cycle em.credentials  { background-position: left -160px; }
#video_type_cycle em.character    { background-position: left -200px; }
#video_type_cycle em.zombie       { background-position: left -240px; }


/* Video container. */

#video-container
{
  margin: 2em 0 3.5em;
  position: relative;
}

/* Top-level elements. */
img.video-decor-crest,
img.video-decor-pin,
#video-controls
  { z-index: 3; }
#video-mask,
#video-frame
  { z-index: 2; }
#video
  { z-index: 1; }
  
  /* Child elements of #video-mask. */
  #video-intro
    { z-index: 5; }
  #video-chooser
    { z-index: 4; }
  #video-input_opportunity,
  #video-postroll
    { z-index: 3; }
  #video-contents
    { z-index: 2; }
  #video-loading
    { z-index: 1; }

    /*  Child elements of #video-contents */
    .output        { z-index: 1; }
    #video-overlay { z-index: 2; }
    .input         { z-index: 3; }   


img.video-decor-pin,
img.video-decor-crest
{
  position: absolute;
  -webkit-transition: all .5s ease-in-out;
     -moz-transition: all .5s ease-in-out;
      -ms-transition: all .5s ease-in-out;
       -o-transition: all .5s ease-in-out;
          transition: all .5s ease-in-out;
}

img.video-decor-pin        {    top: -115px; left: -55px;  }
img.video-decor-pin.gone   {    top: -800px; left: 300px; }
img.video-decor-crest      { bottom: -45px;  left: 308px;  }
img.video-decor-crest.gone { bottom: -800px; left: 500px;  }

#video-frame
{
  background: url(img/video-frame.gif) left top no-repeat;
  width: 800px;
  height: 450px;
  margin: 0;
  padding: 13px;
  position: absolute;
  left: -13px;
  top: -13px;
}

#video-mask
{
  background: url(img/video-preroll-logo_background.jpg);
  width: 800px;
  height: 450px;
  position: relative;
  left: 0;
  top: 0;
  overflow: hidden;
}

#video-mask.transparent
{
  background: none;
}

#video-intro,
#video-chooser,
#video-loading,
#video-contents,
#video
{
  position: absolute;
}

.slide
{
  background: url(img/video-preroll-background.jpg);
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  width: 800px;
  height: 450px;
  text-align: center;
  overflow: hidden;
  -webkit-box-shadow: 5px 0 10px #333;
     -moz-box-shadow: 5px 0 10px #333;
          box-shadow: 5px 0 10px #333;
  -webkit-transition: all .5s ease-in;
     -moz-transition: all .5s ease-in;
      -ms-transition: all .5s ease-in;
       -o-transition: all .5s ease-in;
          transition: all .5s ease-in;
}

.slide.active
{
  opacity: 1;
}

.slide.inactive
{
  left: -850px;
}

.slide h2
{
  color: #182a45;
  font-size: 69px;
  font-weight: 900;
  line-height: .9;
  margin: .5em 0 0;
}

.slide h2 strong
{
  display: block;
  font-size: 80px;
  font-weight: 900;
}

#video-intro h3
{
  color: #ae2025;
  font-family: 'proxima-nova';
  font-size: 36px;
  font-weight: 900;
  line-height: 1;
  margin: 0;
  padding: .8em 0 0 0 ;
  width: 800px;
  height: 50px;
  position: absolute;
  top: 165px;
  left: 800px;
  opacity: 0;
  whitespace: no-wrap;
  -webkit-transition: all .5s ease-in-out;
     -moz-transition: all .5s ease-in-out;
      -ms-transition: all .5s ease-in-out;
       -o-transition: all .5s ease-in-out;
          transition: all .5s ease-in-out;
}

#video-intro h3 .instructions
{
  height: 50px;
  overflow: hidden;
}

#video-intro h3 .fb-login-button
{
  margin-right: .25em;
  vertical-align: 3px;
  position: relative;
  z-index: 1;
}

#video-intro h3 img
{
  vertical-align: -13px;
}

#video-intro h3 #disclaimer
{
  background: url(img/video-intro-login-huh.png) right 3px no-repeat;
  border: 5px solid #333;
  color: #333;
  cursor: pointer;
  opacity: .3;
  overflow: hidden;
  text-align: left;
  text-transform: none;
  position: absolute;
  right: 140px;
  top: 8px;
  width: 27px;
  height: 27px;
  z-index: 2;
  -webkit-border-radius: 25px;
     -moz-border-radius: 25px;
          border-radius: 25px;
  -webkit-transition: all .25s ease-in-out;
     -moz-transition: all .25s ease-in-out;
      -ms-transition: all .25s ease-in-out;
       -o-transition: all .25s ease-in-out;
          transition: all .25s ease-in-out;
}

#video-intro h3 #disclaimer p
{
  color: #fff;
  font-size: 13px;
  font-style: normal;
  font-weight: 300;
  line-height: 1.4;
  margin: 0;
  opacity: 0;
  padding: 5px 11px;
  position: absolute;
  left: 0;
  top: 0;
  width: 140px;
}

#video-intro h3 #disclaimer:hover
{
  background-color: #333;
  background-position: -100px -100px;
  opacity: .95;
  right: 12px;
  width: 152px;
  height: 155px;
  -webkit-border-radius: 15px;
     -moz-border-radius: 15px;
          border-radius: 15px;
  -webkit-box-shadow: 0 0 10px #333;
     -moz-box-shadow: 0 0 10px #333;
          box-shadow: 0 0 10px #333;
  -webkit-transform: rotate(3deg);
     -moz-transform: rotate(3deg);
      -ms-transform: rotate(3deg);
       -o-transform: rotate(3deg);
          transform: rotate(3deg);
}

#video-intro h3 #disclaimer:hover p
{
  opacity: 1;
}

#video-intro h3.active
{
  left: 0;
  opacity: 1;
}

#video-intro h3.active.inactive,
#video-intro h3.inactive
{
  left: -800px;
  opacity: 0;
}

#video-intro h3#login-loading
{
  background: url(img/video-intro-login-loading.gif) center 40px no-repeat;
}

#video-intro h3#login-loading
{
  left: 0 !important;
}

#video-intro h3#login-logged_in
{
  cursor: pointer !important;
}

#video-intro p
{
  font-size: 21px;
  font-style: italic;
  line-height: 1.5;
  margin: 90px 75px;
}

#video-chooser h2
{
  margin-bottom: .25em;
}

#video-chooser ul
{
  list-style: none;
  margin: 0 auto;
  padding: 0;
  position: relative;
}

#video-chooser li,
#video-chooser h3
{
  line-height: 1;
  margin: 0;
  padding: 0;
}

#video-chooser .video_type_category h3,
#video-chooser .video_type
{
  background-repeat: no-repeat;
  cursor: pointer !important;
  display: block;
  width: 266px;
  height: 138px;
  opacity: .85;
  text-indent: -9999px;
  -webkit-transition: all .25s ease-in-out;
     -moz-transition: all .25s ease-in-out;
      -ms-transition: all .25s ease-in-out;
       -o-transition: all .25s ease-in-out;
          transition: all .25s ease-in-out;
}

#video-chooser .video_type_category h3
{
  margin: 0;
  padding: 0;
  opacity: .85;
  position: absolute;
  left: 0;
  top: 0;
}

#video-chooser .video_type
{
  width: 150px;
}

#video-chooser .video_type_category.video_type
{
  width: 0;
}

#video-chooser .video_type_category.not_chosen h3,
#video-chooser .video_type.not_chosen,
#video-chooser .video_type.not_chosen:hover
{
  opacity: .5;
  cursor: default;
}

#video-chooser .clickable.video_type_category:hover h3,
#video-chooser .clickable.video_type_category.not_chosen:hover h3,
#video-chooser .clickable.video_type_category.chosen h3,
#video-chooser .clickable.video_type:hover,
#video-chooser .clickable.video_type.not_chosen:hover,
#video-chooser .clickable.video_type.chosen,
#video-chooser .video_type.not_chosen.chosen
{
  opacity: 1;
}

#video-chooser .video_type_category.left h3   { left: 0; }
#video-chooser .video_type_category.middle h3 { left: 33%; }
#video-chooser .video_type_category.right h3  { left: 66%; }

#video-chooser .video_type_category div
{
  position: absolute;
  top: 150px;
  width: 800px;
  height: 200px;
  -webkit-transition: all .15s ease-in-out;
     -moz-transition: all .15s ease-in-out;
      -ms-transition: all .15s ease-in-out;
       -o-transition: all .15s ease-in-out;
          transition: all .15s ease-in-out;
}

#video-chooser .video_type_category div h4,
#video-chooser .video_type_category div p
{
  color: #fff;
  font-family: proxima-nova;
  text-align: left;
  width: 375px;
}

#video-chooser .video_type_category div h4
{
  font-size: 22px;
  font-weight: 900;
  margin: 18px 0 0;
  text-transform: none;
}

#video-chooser .video_type_category div p
{
  font-size: 16px;
  line-height: 1.2;
  top: 30px;
}

#video-chooser .video_type_category div ul
{
  margin-top: 3px;
}

#video-chooser #video_type-bio div
{
  background-image: url(img/video-type-banner-bio.png);
  left: -800px;
}

#video-chooser #video_type-bio div h4,
#video-chooser #video_type-bio div p
{
  position: absolute;
  left: 310px;
}

#video-chooser #video_type-bio.chosen div
{
  left: 0;
}

#video-chooser #video_type-attack div
{
  background-image: url(img/video-type-banner-attack.png);
  right: -800px;
}

#video-chooser #video_type-attack div h4,
#video-chooser #video_type-attack div p
{
  position: absolute;
  left: 120px;
}

#video-chooser #video_type-attack div p
{
  top: 50px;
}

#video-chooser #video_type-attack div ul
{
  margin-left: 485px;
}

#video-chooser #video_type-attack.chosen div
{
  right: 0;
}

#video-chooser .video_type_category li
{
  background-position: 8px top;
  cursor: pointer !important;
  float: left;
  margin: 0;
  padding: 0;
}

#video_type-bio h3      { background: url(img/video-type-category-bio.png) 125px top no-repeat; }
#video_type-zombie h3   { background: url(img/video-type-category-zombie.png) center top no-repeat; }
#video_type-attack h3   { background: url(img/video-type-category-attack.png) left top no-repeat; }

#video_type-smalltown   { background-image: url(img/video-type-button-smalltown.png); }
#video_type-metro       { background-image: url(img/video-type-button-metro.png); }
#video_type-credentials { background-image: url(img/video-type-button-credentials.png); }
#video_type-character   { background-image: url(img/video-type-button-character.png); }

#video-loading
{
  background: #000 url(img/video-preroll-loading_background.jpg) center no-repeat;
  color: #fff;
  display: table;
  position: absolute;
  left: 0;
  top: 0;
  width: 800px;
  height: 450px;
  text-shadow: 0 0 5px #000;
  -webkit-transition: all .15s ease-in-out;
     -moz-transition: all .15s ease-in-out;
      -ms-transition: all .15s ease-in-out;
       -o-transition: all .15s ease-in-out;
          transition: all .15s ease-in-out;
}

#video-loading.inactive
{
  opacity: 0;
}

#video-loading div
{
  display: table-cell;
  width: 100%;
  height: 100%;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  vertical-align: middle;
}

#video-loading strong
{
  display: block;
  font-family: 'proxima-nova';
  font-size: 74px;
  font-weight: 900;
  -webkit-animation: pulsate 15s ease-out;
  -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes pulsate {
  0%   { -webkit-transform: scale(0.7, 0.7); }
  50%  { -webkit-transform: scale(1.0, 1.0); }
  100% { -webkit-transform: scale(0.7, 0.7); }
}

#video-loading span
{
  display: block;
  font-size: 98px;
}

#video-loading span + span
{
  font-size: 114px;
}

#video-overlay
{
  background: url(img/video-overlay.png);
  position: absolute;
  left: 0;
  top: 0;
  width: 800px;
  height: 450px;
  opacity: 0;
  -webkit-transition: opacity .25s ease-in-out;
     -moz-transition: opacity .25s ease-in-out;
      -ms-transition: opacity .25s ease-in-out;
       -o-transition: opacity .25s ease-in-out;
          transition: opacity .25s ease-in-out;
}

#video-overlay.active
{
  opacity: 1;
}

#video-overlay.inactive
{
  z-index: -1;
}

#video-contents
{
  width: 800px;
  height: 450px;
  position: absolute;
  left: 0;
  top: 0;
}

#video-controls
{
  height: 50px;
  position: absolute;
  bottom: 6px;
  left: 10px;
}

#video-postroll
{
  position: absolute;
  left: 800px;
  top: 0;
  width: 800px;
  height: 450px;
  overflow: hidden;
}

#video-postroll #video-postroll-offer_to_email_bookmark { z-index: 1; }
#video-postroll ul                                      { z-index: 2; }

#video-postroll ul
{
  background: url(img/video-postroll-banner.png) right top no-repeat;
  margin: 0;
  padding: 0 0 0 195px;
  width: 605px;
  height: 200px;
  position: absolute;
  left: 800px;
  bottom: -10px;
  -webkit-transition: all .5s ease-in-out;
     -moz-transition: all .5s ease-in-out;
      -ms-transition: all .5s ease-in-out;
       -o-transition: all .5s ease-in-out;
          transition: all .5s ease-in-out;
}

#video-postroll.active,
#video-postroll.active ul
{
  left: 0;
}

#video-postroll li
{
  background-position: left 2px;
  background-repeat: no-repeat;
  float: left;
  list-style: none;
  margin: 0;
  padding: 0;
  opacity: .9;
  text-indent: -9999px;
  width: 175px;
  height: 143px;
  -webkit-transition: all .25s ease-in-out;
     -moz-transition: all .25s ease-in-out;
      -ms-transition: all .25s ease-in-out;
       -o-transition: all .25s ease-in-out;
          transition: all .25s ease-in-out;
}

#video-postroll li.active
{
  cursor: pointer !important;
}

#video-postroll li:hover
{
  opacity: 1;
}

#video-postroll li#restart        { background-image: url(img/video-postroll-button-restart.png); }
#video-postroll li#replay         { background-image: url(img/video-postroll-button-replay.png); }
#video-postroll li#share.active   { background-image: url(img/video-postroll-button-share-active.png); }
#video-postroll li#share.inactive { background-image: url(img/video-postroll-button-share-inactive.png); }
#video-postroll li#makeyourown    { background-image: url(img/video-postroll-button-make_your_own_ad.png); }


#video-postroll.create #makeyourown
{
  display: none;
}

#video-postroll.watch.active
{
  left: 200px;
}

#video-postroll.watch #restart,
#video-postroll.watch #share
{
  display: none;
}

#video-postroll #restart.inactive
{
  opacity: .25;
}

#video-postroll-offer_to_email_bookmark
{
  background: url(img/video-overlay.png) repeat;
  color: #fff;
  font-family: proxima-nova;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  padding: 50px 150px;
  width: 500px;
  height: 350px;
  -webkit-transition: opacity .25s ease-in-out;
     -moz-transition: opacity .25s ease-in-out;
       -o-transition: opacity .25s ease-in-out;
          transition: opacity .25s ease-in-out;
}

#video-postroll-offer_to_email_bookmark.active
{
  opacity: 1;
}

#video-postroll-offer_to_email_bookmark div
{
  opacity: 0;
  position: absolute;
  left: 150px;
  top: 50px;
  width: 500px;
  z-index: 1;
  -webkit-transition: opacity .25s ease-in-out;
     -moz-transition: opacity .25s ease-in-out;
       -o-transition: opacity .25s ease-in-out;
          transition: opacity .25s ease-in-out;
}

#video-postroll-offer_to_email_bookmark div.active
{
  opacity: 1;
  z-index: 2;
}

#video-postroll-offer_to_email_bookmark p
{
  font-size: 20px;
  text-align: center;
}

#video-postroll-offer_to_email_bookmark .form #user-email
{
  background: #fff url(img/form_field_background.gif) left top no-repeat;
  border: 1px solid #eee;
  float: left;
  font-family: proxima-nova;
  padding: 12px .5em;
  text-align: center;
  width: 50%;
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
}

#video-postroll-offer_to_email_bookmark .form #user-email.error
{
  background: #f7c;
  border: 1px solid #f00;
}

#video-postroll-offer_to_email_bookmark .form #email_bookmark_button
{
  background: #f1f1f1 url(img/video-postroll-offer_to_email_bookmark-button.png) 12px 6px no-repeat;
  border: 1px solid #888;
  -webkit-border-radius: 9px;
     -moz-border-radius: 9px;
          border-radius: 9px;
  color: #182945;
  cursor: pointer !important;
  display: block;
  float: left;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.1;
  margin: -1px 0 0 1em;
  padding: 7px 0 6px 30px;
  text-align: center;
  text-transform: uppercase;
  width: 180px;
}

#video-postroll-offer_to_email_bookmark .confirmation p
{
  font-size: 24px;
}

#video-input_opportunity
{
  background: url(img/video-button-customize.png) left top no-repeat;
  cursor: pointer !important;
  width: 148px;
  height: 148px;
  position: absolute;
  bottom: -148px;
  right: 20px;
  opacity: 0;
  -webkit-transition: all .1s;
     -moz-transition: all .1s;
      -ms-transition: all .1s;
       -o-transition: all .1s;
          transition: all .1s;
}

#video-input_opportunity.active
{
  opacity: 1;
  bottom: 20px;
}

#video-controls span
{
  cursor: pointer !important;
  display: block;
  float: left;
  margin: 0 1em 0 0;
  width: 49px;
  height: 49px;
  text-indent: -9999px;
  position: absolute;
  top: 0;
  opacity: .5;
  -webkit-transition: opacity .3s ease-in-out;
     -moz-transition: opacity .3s ease-in-out;
      -ms-transition: opacity .3s ease-in-out;
       -o-transition: opacity .3s ease-in-out;
          transition: opacity .3s ease-in-out;
  -webkit-user-select: none;
   -khtml-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-touch-callout: none;
}

#video-controls span:hover
{
  opacity: 1;
}

#video-controls #mute
{
  left: 50px;
}

#video-controls #play_pause         { background: url(img/video-buttons.png) 0 -48px; }
#video-controls #play_pause.playing { background-position: 0 0; }

#video-controls #mute       { background: url(img/video-buttons.png) 0 -144px; }
#video-controls #mute.muted { background-position: 0 -95px; }


/* Outputs */

.output.active
{
  opacity: 1 !important;
}


/* Inputs */

.video-io
{
  width: 800px;
  height: 450px;
  overflow: hidden;
}

.input
{
  background: url(img/video-input-banner-bottom.png) center top no-repeat;
  position: absolute;
  left: 0;
  top: -450px;
  padding: 0;
  width: 800px;
  height: 450px;
  overflow: hidden;
  -webkit-transition: all .25s ease-in-out;
     -moz-transition: all .25s ease-in-out;
      -ms-transition: all .25s ease-in-out;
       -o-transition: all .25s ease-in-out;
          transition: all .25s ease-in-out;
}

.input.inactive
{
  top: 450px;
}

.input.active
{
  top: 0;
}

.input .instructions,
.input .education,
.input .choices
.input .continue
{
  position: absolute;
}

.input .instructions   { z-index: 4; }
.input .education      { z-index: 3; }
.input .continue       { z-index: 2; }
.input .chosen_choices { z-index: 2; }
.input .choices        { z-index: 1; }

.input h2.instructions
{
  background: url(img/video-input-banner-top.png) center top no-repeat;
  color: #182a45;
  display: table;
  margin: 0;
  padding: 10px 70px 25px 70px;
  width: 660px;
  height: 90px;
  text-transform: none;
}

.input h2.instructions span
{
  display: table-cell;
  font-family: proxima-nova;
  font-size: 32px;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  vertical-align: middle;
}

.input .education,
.input .choices
{
  position: absolute;
  top: 98px;
  height: 352px;
  overflow: auto;
  padding: 15px;
}

.input .education
{
  background: #007faa;
  color: #fff;
  font-family: 'proxima-nova';
  left: 46px;
  width: 278px;
}

.input .education p
{
  font-size: 14px;
  line-height: 1.15;
  margin: 0 0 .75em 0;
}

.input .education p strong
{
  font-weight: 900;
}

.input .education div /* education video */
{
  box-sizing: border-box;
  width: 278px;
  height: 209px;
  padding: 0 12px 12px 0;
}

.input .education div object
{
  border: 6px solid #fff;
}

.input .choices
{
  background: #192a48 url(img/video-input-choices-background-blue.png) left repeat-y;
  left: 352px;
  width: 370px;
  padding-bottom: 17px;
  overflow: auto;
  position: relative;
}

.input.active .choices
{
  display: block;
}

.input .choices ul
{
  list-style: none;
  margin: 0 0 75px;
  padding: 0;
  overflow: hidden;
}

.input .choices li
{
  cursor: pointer !important;
}

.input .choices.photos ul
{
  margin: 2px 0 0 6px;
}

.input .choices.photos li
{
  background-color: #000;
  background-position: center center;
  background-repeat: no-repeat;
  border: 4px solid #fff;
  cursor: pointer !important;
  float: left;
  margin: 0 18px 18px 0;
  width: 95px;
  height: 95px;
  opacity: .9;
  -webkit-transition: opacity .1s ease-in-out, box-shadow .1s ease-in-out;
     -moz-transition: opacity .1s ease-in-out, box-shadow .1s ease-in-out;
      -ms-transition: opacity .1s ease-in-out, box-shadow .1s ease-in-out;
       -o-transition: opacity .1s ease-in-out, box-shadow .1s ease-in-out;
          transition: opacity .1s ease-in-out, box-shadow .1s ease-in-out;
  -webkit-box-shadow: 2px 2px 5px #000;
     -moz-box-shadow: 2px 2px 5px #000;
          box-shadow: 2px 2px 5px #000;
}

.input .choices.photos li:nth-child(3n+3)
{
  margin-right: 0;
}

.input .choices.photos li.unselected
{
  opacity: .5;
}

.input .choices.photos li:hover,
.input .choices.photos li.selected
{
  opacity: 1;
}

.input .choices.photos li.selected
{
  -webkit-box-shadow: 0 0 10px #fff;
     -moz-box-shadow: 0 0 10px #fff;
          box-shadow: 0 0 10px #fff;
}

.input .choices.text
{
  background: url(img/video-input-choices-background-paper.jpg);
  padding-top: 5px;
  width: 370px;
}

.input .choices.text li
{
  background: url(img/video-input-choices-bubbles.png) left 12px no-repeat;
  border-bottom: dotted 1px #aaa;
  color: #182A45;
  display: block;
  font-family: 'proxima-nova';
  font-size: 20px;
  line-height: 1.3;
  margin: 0;
  padding: .5em 0 .5em 45px;
  -webkit-transition: color .1s ease-in-out;
     -moz-transition: color .1s ease-in-out;
      -ms-transition: color .1s ease-in-out;
       -o-transition: color .1s ease-in-out;
          transition: color .1s ease-in-out;
}

.input .choices.text li:last-child
{
  border-bottom: 0;
}

.input .choices.text li:hover,
.input .choices.text li.selected
{
  background-position: left -968px;
  color: #0080a6;
}

.input .choices.text.large
{
  padding-top: 5px;
}

.input .choices.text.large li
{
  background-position: -955px 12px;
  font-size: 32px;
  padding: .2em 0 .2em 65px;
}

.input .choices.text.large li:hover,
.input .choices.text.large li.selected
{
  background-position: -955px -959px;
}

.input .choices.text.likes ul
{
  margin-top: 75px;
}

.input .chosen_choices
{
  background: transparent url(img/video-input-choices-chosen_choices-background.png) left bottom repeat-y;
  color: #fff;
  font-family: proxima-nova;
  padding: 8px 15px 15px;
  position: absolute;
  left: 354px;
  top: 100px;
  width: 368px;
  height: 80px;
}

.input .chosen_choices h4
{
  font-size: 18px;
  font-weight: 900;
  margin: 0;
  padding: 0;
}

.input .chosen_choices ul
{
  margin: 0;
  padding: 0;
}

.input .chosen_choices li
{
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
}

.input.no_education h2
{
  text-align: left;
}

.input.no_education .choices.text
{
  left: 50px;
  padding: 5px 20px;
  width: 660px;
}

.input.no_education .continue
{
  left: 50px;
  bottom: -100px;
  width: 625px;
}

.input .continue
{
  background: url(img/video-input-continue-background.png) left top no-repeat;
  cursor: pointer !important;
  color: #ddd;
  font-family: 'proxima-nova';
  font-size: 36px;
  font-weight: 900;
  line-height: 1;
  padding: 12px 0 12px 75px;
  text-transform: uppercase;
  position: absolute;
  bottom: -60px;
  left: 352px;
  width: 325px;
  height: 36px;
  -webkit-transition: bottom .25s ease-in-out;
     -moz-transition: bottom .25s ease-in-out;
      -ms-transition: bottom .25s ease-in-out;
       -o-transition: bottom .25s ease-in-out;
          transition: bottom .25s ease-in-out;
  -webkit-box-shadow: 0 -4px 4px rgba(0, 0, 0, .25);
     -moz-box-shadow: 0 -4px 4px rgba(0, 0, 0, .25);
          box-shadow: 0 -4px 4px rgba(0, 0, 0, .25);
}

.input .continue:hover
{
  background-position: left bottom;
  color: #fff;
}

.input .continue.active
{
  bottom: 0;
}

footer ul
{
  font-family: proxima-nova;
  font-size: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
}

footer li
{
  display: inline;
  margin: 0 2em;
  padding: 0;
}

footer li a:link,
footer li a:visited
{
  color: #888;
  text-decoration: none;
}

footer li a:hover
{
  color: #08587c;
}

#credits
{
  background: #fff;
  font-family: proxima-nova;
  font-size: 14px;
  line-height: 1.6;
  padding: 1.5em 2em;
  width: 700px;
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
}

#credits h2
{
  margin: 0 0 .5em;
}

#credits h3
{
  margin: 0;
}

#credits ul
{
  margin: 0;
  padding: 0 0 1.5em 1.75em;
}

#credits ul.stock_photos_credits
{
  font-size: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

#credits ul.stock_photos_credits li
{
  float: left;
  width: 33%;
}


/* Warning for unsupported browsers */

#ua-warning
{
  display: none;
  min-height: 40px;
  color: #fff;
  font-family: proxima-nova;
  font-size: 14px;
  line-height: 40px;
  position: relative;
  text-align: center;
  width: 100%;
  z-index: 999;
  background: red;
  background: -webkit-linear-gradient(top, #df1f28 0px, #6f080a 100%);
  background:        -webkit-gradient(linear, 0 0, 0 100%, from(#df1f28), to(#6f080a));
  background:    -moz-linear-gradient(top, #df1f28 0px, #6f080a 100%);
  background:     -ms-linear-gradient(top, #df1f28 0px, #6f080a 100%);
  background:      -o-linear-gradient(top, #df1f28 0px, #6f080a 100%);
  background:         linear-gradient(top, #df1f28 0px, #6f080a 100%);
  -webkit-box-shadow: 0px 5px 10px #000;
     -moz-box-shadow: 0px 5px 10px #000;
          box-shadow: 0px 5px 10px #000;
}

#ua-warning a
{
  color: #fff;
  text-transform: uppercase;
}



/* Mobile */

@media only screen and (min-width: 35em) {


}


/* HTML5 Boilerplate */

.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

@media print {
  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; }
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}

/* Hide elements of the page during development */
/*
body.dev,
.dev .container
{
  background: #fff;
}

.dev header,
.dev .tagline,
.dev hr,
.dev .video-decor-pin,
.dev .video-decor-crest
{
  display: none;
}

.dev .container
{
  padding-bottom: 0;
}

.dev #video-container
{
  margin-top: 15px;
  margin-bottom: 15px;
}*/