html {
  background: #fff;
  height: 100%; }

body {
  min-height: 100%;
  background: url('/_images/bg/absurdidad.png') top left repeat; }

.container-narrow {
  margin: 0 auto;
  max-width: 700px; }

.masthead {
  border-bottom: 1px solid #eeeeee;
  padding: 25px 0 25px;
  background: #fff; }
  .masthead .nav {
    margin-top: 5px;
    margin-bottom: 0; }

#logo {
  float: left;
  position: relative; }
  #logo span {
    font-family: "Lobster", cursive;
    font-size: 16px;
    color: #231f20;
    position: absolute;
    bottom: -4px;
    right: -6px;
    line-height: 1; }

.jumbotron {
  position: relative;
  color: #fff;
  border-bottom: 1px solid #e9e9e9;
  margin: 0;
  padding: 0;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzIxMjEyMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNiM2IzYiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #212121), color-stop(100%, #3b3b3b));
  background-image: -webkit-linear-gradient(#212121, #3b3b3b);
  background-image: -moz-linear-gradient(#212121, #3b3b3b);
  background-image: -o-linear-gradient(#212121, #3b3b3b);
  background-image: linear-gradient(#212121, #3b3b3b); }
  .jumbotron:before {
    content: '';
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 10px;
    z-index: 2;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiYSgwLCAwLCAwLCAwKSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiYSgwLCAwLCAwLCAwLjMpIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.3)));
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
    background-image: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)); }
  .jumbotron .container-narrow {
    padding: 25px 0 150px;
    background: url('/_images/bg/header-fade.png') bottom center no-repeat; }
  .jumbotron h1 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 55px;
    line-height: 1;
    font-weight: normal;
    font-family: "Lobster", cursive; }
  .jumbotron .sub {
    font-family: "Droid Sans", sans-serif;
    font-size: 18px;
    color: #b3b3b3;
    font-style: italic;
    margin: 0 0 0 -5px; }
  .jumbotron .lead {
    font-weight: normal;
    margin: 0; }
  .jumbotron .header-nugget {
    position: absolute;
    bottom: -140px;
    left: 50%;
    margin: 0 0 0 -109px;
    height: 259px;
    width: 218px;
    z-index: 1;
    background: url('/_images/bg/header-nugget.png') top left no-repeat;
    -webkit-transition: all 500ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
    -webkit-transition-delay: 0ms;
    -moz-transition: all 500ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 0ms;
    -o-transition: all 500ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 0ms;
    transition: all 500ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 0ms; }
    .jumbotron .header-nugget:hover {
      bottom: -115px;
      -webkit-transform: rotate(-8deg);
      -moz-transform: rotate(-8deg);
      -ms-transform: rotate(-8deg);
      -o-transform: rotate(-8deg);
      transform: rotate(-8deg); }

.addNugget {
  padding: 25px 0 0 0; }
  .addNugget form {
    margin: 0; }
  .addNugget .control-group {
    position: relative; }
  .addNugget input[type="text"] {
    height: 60px;
    padding: 5px 10px; }
  .addNugget textarea {
    padding: 8px 10px; }
  .addNugget .form-actions {
    background: none;
    border: 0;
    padding: 0;
    text-align: right; }
    .addNugget .form-actions button {
      margin-left: 10px; }

.nuggetList {
  position: relative; }
  .nuggetList .call-out {
    top: 60px; }

.nuggets {
  background: url('/_images/bg/hr.png') top center no-repeat;
  margin: 25px 0 0 0;
  padding: 80px 0 10px 0;
  list-style: none outside; }

.nugget {
  margin: 0 0 25px 0;
  border: 1px solid #cccccc;
  border-radius: 5px;
  background: #fff;
  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1); }
  .nugget .hd {
    border-radius: 4px 4px 0 0;
    padding: 8px 15px;
    border-bottom: 1px solid #cccccc;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2VlZWVlZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #eeeeee));
    background-image: -webkit-linear-gradient(#ffffff, #eeeeee);
    background-image: -moz-linear-gradient(#ffffff, #eeeeee);
    background-image: -o-linear-gradient(#ffffff, #eeeeee);
    background-image: linear-gradient(#ffffff, #eeeeee); }
  .nugget h1 {
    font-size: 18px;
    margin: 0; }
  .nugget .description {
    padding: 15px;
    line-height: 22px;
    color: #595959; }
  .nugget .meta {
    border-top: 1px solid #eeeeee;
    background: #fbfbfb;
    border-radius: 0 0 4px 4px;
    padding: 8px 15px; }
    .nugget .meta .created {
      margin: 0;
      font-size: 12px;
      color: #4d4d4d; }

.call-out {
  font-family: "Lobster", cursive;
  font-size: 20px;
  white-space: nowrap;
  position: absolute;
  right: 100%;
  top: 12px;
  margin: 0 20px 0 0;
  padding: 8px 10px 8px 8px;
  border-radius: 5px;
  border: 1px solid #edbd1d;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  -webkit-backface-visibility: hidden;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y2ZGQ4OSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2VlYzEyYiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f6dd89), color-stop(100%, #eec12b));
  background-image: -webkit-linear-gradient(#f6dd89, #eec12b);
  background-image: -moz-linear-gradient(#f6dd89, #eec12b);
  background-image: -o-linear-gradient(#f6dd89, #eec12b);
  background-image: linear-gradient(#f6dd89, #eec12b);
  -webkit-transform: rotate(-2deg);
  -moz-transform: rotate(-2deg);
  -ms-transform: rotate(-2deg);
  -o-transform: rotate(-2deg);
  transform: rotate(-2deg);
  -webkit-box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.4);
  box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.4); }
  .call-out.pull-right {
    float: none;
    right: auto;
    left: 100%;
    padding-left: 10px;
    padding-right: 8px;
    margin: 0 0 0 20px;
    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    -ms-transform: rotate(2deg);
    -o-transform: rotate(2deg);
    transform: rotate(2deg); }

.footer {
  font-size: 12px;
  border-top: 1px solid #eeeeee;
  margin: 20px 0 0 0;
  padding: 20px 0;
  color: #737373; }
  .footer p {
    margin: 0;
    float: right; }
  .footer p:first-child {
    float: left; }
  .footer .key {
    border: 1px solid #cccccc;
    font-weight: bold;
    border-radius: 3px;
    padding: 0 5px;
    background: #fff;
    -webkit-box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.1);
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: middle;
    *vertical-align: auto;
    zoom: 1;
    *display: inline;
    vertical-align: middle; }

/* ==========================================================================
   Helper classes
   ========================================================================== */
/*
 * Image replacement
 */
.ir {
  background-color: transparent;
  border: 0;
  overflow: hidden;
  /* IE 6/7 fallback */
  *text-indent: -9999px; }

.ir:before {
  content: "";
  display: block;
  width: 0;
  height: 100%; }

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */
.hidden {
  display: none !important;
  visibility: hidden; }

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */
.visuallyhidden, .addNugget label {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */
.visuallyhidden.focusable:active, .addNugget label.focusable:active,
.visuallyhidden.focusable:focus,
.addNugget label.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto; }

/*
 * Hide visually and from screenreaders, but maintain layout
 */
.invisible {
  visibility: hidden; }

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clearfix:before, .masthead:before, .footer:before,
.clearfix:after,
.masthead:after,
.footer:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */ }

.clearfix:after, .masthead:after, .footer:after {
  clear: both; }

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.clearfix, .masthead, .footer {
  *zoom: 1; }