/* hlvticons.ch */

html, body, 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, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
article, aside, figure, footer, header, hgroup, nav, section {display: block;}
ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before,
blockquote:after,
q:before,
q:after {content: ''; content: none;}
a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
del {text-decoration: line-through;}
abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}
table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}
hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}
input, select {vertical-align: middle;}
pre {
  white-space: pre;
  white-space: pre-wrap;
  white-space: pre-line;
  word-wrap: break-word;
}
input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom; *vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}
select, input, textarea {font: 99% sans-serif;}
table {font-size: inherit; font: 100%;}
a:hover, a:active {outline: none;}
small {font-size: 85%;}
strong, th {font-weight: bold;}
td, td img {vertical-align: top;}
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}
pre, code, kbd, samp {font-family: 'Menlo', monospace, sans-serif;}
label, input[type=button], input[type=submit], button {cursor: pointer;}
button, input, select, textarea {margin: 0;}
button {width: auto; overflow: visible;}
.ie7 img {-ms-interpolation-mode: bicubic;}
html.ie6 {filter: expression(document.execCommand("BackgroundImageCache", false, true));}

/*---------------------------------------------------------------------------*/

body {
  font: 12px/1 Helvetica, sans-serif;
  background: #c8c8c8 url(../img/gradient.png) repeat-x;
  overflow-x: hidden;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

body.ios {
  min-width: 1300px;
}

body, select, input, textarea, a {
  color: #2f313b;
}

#container {
  overflow-x: visible;
  margin: 0 auto;
  width: 1038px;
  position: relative;
}

#poster {
  position: relative;
  background: url(../img/poster.png);
  width: 1314px;
  height: 1734px;
  padding-top: 1px; /* break top margin */
  margin-left: -149px;
  margin-top: -45px;
  z-index: 110;
  transition: top 0.7s cubic-bezier(0.860, 0.000, 0.070, 1.000);
  -webkit-transition: top 0.7s cubic-bezier(0.860, 0.000, 0.070, 1.000);
  -moz-transition: top 0.7s cubic-bezier(0.860, 0.000, 0.070, 1.000);
  -ms-transition: top 0.7s cubic-bezier(0.860, 0.000, 0.070, 1.000);
  -o-transition: top 0.7s cubic-bezier(0.860, 0.000, 0.070, 1.000);
}

#poster.up {
  top: -1559px;
}

#poster .inner {
  margin: 85px 128px 0 148px;
  position: relative;
  height: 1734px;
  background: rgba(0, 0, 0, 0);
}

#poster header {
  display: none;
}

#back {
  position: absolute;
  display: none;
  top: 120px;
  left: 45px;
  width: 950px;
  z-index: 100;
}

#back header h1,
#back .info {
  float: left;
  border-bottom: 1px solid #a7a7a7;
  padding-bottom: 12px;
}

#back header h1 {
  background-image: url(../img/helveticons-ch.png);
  background-repeat: no-repeat;
  width: 624px;
  height: 82px;
  overflow: hidden;
  text-indent: -999px;
}

#back .info {
  width: 300px;
  height: 62px;
  padding-top: 20px;
  padding-left: 10px;
  margin-left: 15px;
}

#back .info h2 {
  margin-bottom: 10px;
}

#back .info p {
  color: #8d8b8b;
}

#back .preview {
  clear: both;
  padding-top: 50px;
}

#back.visible {
  display: block;
}

.poster-block {
  background: rgba(0, 0, 0, 0);
  position: absolute;
}

.close-button {
  position: absolute;
  top: -36px; left: 0;
  width: 36px; height: 36px;
  z-index: 101;
  background: url(../img/close.png);
  opacity: 0;
  transition: opacity .3s linear;
  -webkit-transition: opacity .3s linear;
  -moz-transition: opacity .3s linear;
  -ms-transition: opacity .3s linear;
  -o-transition: opacity .3s linear;
}

.close-button.visible {
  opacity: 1;
  cursor: url(../img/blank.cur);
}

footer {
  text-align: center;
  font-size: 11px;
  margin-top: -31px;
  margin-bottom: 40px;
  position: relative;
  z-index: 120;
}

video {
  background-color: red;
  border: 1px solid green;
}

footer p, footer a {
  color: #a5a5a5;
}

.poster-block h2,
.poster-block h3,
.poster-block p {
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
}

.poster-block#preview {
  top: 203px;
  left: 551px;
}

.poster-block#preview h2 {
  font-size: 30px;
}

.poster-block#preview .packs li {
  display: block;
  float: left;
  width: 70px;
  padding: 10px;
}

.poster-block#preview .packs li:hover h3 {
  color: #f0f0f0;
}

.poster-block#preview .packs li.additional {
  width: 103px;
}

.poster-block#preview .packs li.complete {
  width: 103px;
}


.poster-block#preview .packs h3 {
  margin-bottom: 12px;
}

.poster-block#preview .packs p {
  margin-bottom: 20px;
  margin-left: 3px;
}

.poster-block#preview #license {
  clear: both;
  padding-top: 20px;
}

.poster-block#possibilities {
  left: 680px;
  top: 564px;
  width: 270px;
}

.poster-block#usability {
  left: 685px;
  top: 759px;
  width: 265px;
}

.poster-block#formats {
  left: 227px;
  top: 1090px;
  width: 230px;
}

.poster-block#twitter {
  left: 74px;
  top: 714px;
  width: 410px;
}

.poster-block#royalty-free {
  left: 270px;
  top: 600px;
  width: 180px;
}

.poster-block#size-chart {
  left: 553px;
  top: 906px;
  width: 415px;
}

.poster-block#inspiration {
  left: 554px;
  top: 1286px;
  width: 410px;
}

.poster-block#goodies {
  left: 72px;
  top: 1299px;
  width: 250px;
}

.poster-block#goodies a {
  font-size: 26px;
}

.poster-block#goodies a:after {
  content: ' ';
  position: absolute;
  width: 100px;
  height: 100px;
  left: 308px;
  top: 8px;
  opacity: 0.2;
}

.poster-block#goodbyehorses {
  top: 1442px;
  left: 489px;
}

.poster-block#goodbyehorses a {
  display: block;
  width: 61px;
  height: 60px;
  overflow: hidden;
  text-indent: -999px;
}

#twitter-update {
  margin-top: 47px;
  opacity: 0;
  transition: opacity .3s linear;
  -webkit-transition: opacity .3s linear;
  -moz-transition: opacity .3s linear;
  -ms-transition: opacity .3s linear;
  -o-transition: opacity .3s linear;
}

#twitter-update.visible {
  opacity: 1;
}

h2, h3 {
  font-size: 17px;
  margin-bottom: 20px;
}

p {
  font-size: 13px;
  line-height: 1.3;
  color: #828229;
}

a {
  text-decoration: none;
  font-weight: bold;
}

a:hover {
  text-decoration: underline;
}

::-moz-selection{background: #23252d; color: #fff; text-shadow: none;}
::selection {
  background: transparent;
  color: #f1f1f1;
  text-shadow: none;
}

ins {background-color: #23252d; color: #000; text-decoration: none;}
mark {background-color: #23252d; color: #000; font-style: italic; font-weight: bold;}