// Place all the styles related to the Asciicasts controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

$color1: #00A0B0;
$color2: #6A4A3C;
$color3: #CC333F;
$color4: #EB6841;
$color5: #EDC951;

.asciicasts {
  list-style: none;

  .asciicast-preview {
    h3 {
      font-size: 16px;

      a {
        color: $color1;
      }
    }

    margin-bottom: 30px;
  }
}

.asciicast {
  // width: 100%;
  // background-color: #222;

  .player {
    /* border: 1px solid #777;*/
    /* background-color: #333;*/
    float: left;
    display: block;
    padding: 0px;
    // margin: 0px 0px 30px 20px;
    position: relative;

    .terminal {
      padding: 2px;
      margin: 0px;
      display: block;
      font-family: 'Droid Sans Mono', Monospace;
      white-space: pre;
      background-color: black;
      // line-height: 1.2em;
      color: #ccc;
      overflow: auto;
      overflow-x: hidden;
      cursor: pointer;

      .line {
        font-size: 12px;
        /* background-color: black;*/
        /* padding: 0;*/
        /* margin: 0;*/
      }

      &.cursor-on {
        .line {
          .cursor.visible {
            background-color: #D3D7CF;
          }
        }
      }
    }

    .hud {
      background-color: #333;
      opacity: 0;
      position: absolute;
      left: 0px;
      right: 0px;
      bottom: 0px;
      height: 30px;
      color: white;
      font-weight: bold;
      font-family: monospace;

      -webkit-transition: opacity 0.3s ease-in-out;

      .toggle {
        background-color: $color1;
        width: 30px;
        height: 100%;
        float: left;
        cursor: pointer;

        &.paused {
          background-color: $color4;
        }
      }

      .progress {
        background-color: $color2;
        width: 60%;
        height: 100%;
        float: left;
        // cursor: pointer;

        .gutter {
          background-color: $color5;
          width: 0px;
          height: 100%;
        }
      }

      .time {
        background-color: $color3;
        width: 30%;
        height: 100%;
        float: left;
        text-align: center;
      }
    }

    &:hover .hud {
      opacity: 1.0;
    }

  }

  .bright { font-weight: bold }
  .underline { text-decoration: underline }
  .italic { font-style: italic }

  /* Foregrounds: */

  /* ansi colors */

    .fg0 { color: #000000 }
    .fg1 { color: #CC0000 }
    .fg2 { color: #4E9A06 }
    .fg3 { color: #C4A000 }
    .fg4 { color: #3465A4 }
    .fg5 { color: #75507B }
    .fg6 { color: #06989A }
    .fg7 { color: #D3D7CF }
    .fg8 { color: #555753; font-weight: bold }
    .fg9 { color: #EF2929; font-weight: bold }
  .fg10 { color: #8AE234; font-weight: bold }
  .fg11 { color: #FCE94F; font-weight: bold }
  .fg12 { color: #729FCF; font-weight: bold }
  .fg13 { color: #AD7FA8; font-weight: bold }
  .fg14 { color: #34E2E2; font-weight: bold }
  .fg15 { color: #EEEEEC; font-weight: bold }

  /* 216 rgb colors */

  .fg16 { color: #000000 }
  .fg17 { color: #00005f }
  .fg18 { color: #000087 }
  .fg19 { color: #0000af }
  .fg20 { color: #0000d7 }
  .fg21 { color: #0000ff }
  .fg22 { color: #005f00 }
  .fg23 { color: #005f5f }
  .fg24 { color: #005f87 }
  .fg25 { color: #005faf }
  .fg26 { color: #005fd7 }
  .fg27 { color: #005fff }
  .fg28 { color: #008700 }
  .fg29 { color: #00875f }
  .fg30 { color: #008787 }
  .fg31 { color: #0087af }
  .fg32 { color: #0087d7 }
  .fg33 { color: #0087ff }
  .fg34 { color: #00af00 }
  .fg35 { color: #00af5f }
  .fg36 { color: #00af87 }
  .fg37 { color: #00afaf }
  .fg38 { color: #00afd7 }
  .fg39 { color: #00afff }
  .fg40 { color: #00d700 }
  .fg41 { color: #00d75f }
  .fg42 { color: #00d787 }
  .fg43 { color: #00d7af }
  .fg44 { color: #00d7d7 }
  .fg45 { color: #00d7ff }
  .fg46 { color: #00ff00 }
  .fg47 { color: #00ff5f }
  .fg48 { color: #00ff87 }
  .fg49 { color: #00ffaf }
  .fg50 { color: #00ffd7 }
  .fg51 { color: #00ffff }
  .fg52 { color: #5f0000 }
  .fg53 { color: #5f005f }
  .fg54 { color: #5f0087 }
  .fg55 { color: #5f00af }
  .fg56 { color: #5f00d7 }
  .fg57 { color: #5f00ff }
  .fg58 { color: #5f5f00 }
  .fg59 { color: #5f5f5f }
  .fg60 { color: #5f5f87 }
  .fg61 { color: #5f5faf }
  .fg62 { color: #5f5fd7 }
  .fg63 { color: #5f5fff }
  .fg64 { color: #5f8700 }
  .fg65 { color: #5f875f }
  .fg66 { color: #5f8787 }
  .fg67 { color: #5f87af }
  .fg68 { color: #5f87d7 }
  .fg69 { color: #5f87ff }
  .fg70 { color: #5faf00 }
  .fg71 { color: #5faf5f }
  .fg72 { color: #5faf87 }
  .fg73 { color: #5fafaf }
  .fg74 { color: #5fafd7 }
  .fg75 { color: #5fafff }
  .fg76 { color: #5fd700 }
  .fg77 { color: #5fd75f }
  .fg78 { color: #5fd787 }
  .fg79 { color: #5fd7af }
  .fg80 { color: #5fd7d7 }
  .fg81 { color: #5fd7ff }
  .fg82 { color: #5fff00 }
  .fg83 { color: #5fff5f }
  .fg84 { color: #5fff87 }
  .fg85 { color: #5fffaf }
  .fg86 { color: #5fffd7 }
  .fg87 { color: #5fffff }
  .fg88 { color: #870000 }
  .fg89 { color: #87005f }
  .fg90 { color: #870087 }
  .fg91 { color: #8700af }
  .fg92 { color: #8700d7 }
  .fg93 { color: #8700ff }
  .fg94 { color: #875f00 }
  .fg95 { color: #875f5f }
  .fg96 { color: #875f87 }
  .fg97 { color: #875faf }
  .fg98 { color: #875fd7 }
  .fg99 { color: #875fff }
  .fg100 { color: #878700 }
  .fg101 { color: #87875f }
  .fg102 { color: #878787 }
  .fg103 { color: #8787af }
  .fg104 { color: #8787d7 }
  .fg105 { color: #8787ff }
  .fg106 { color: #87af00 }
  .fg107 { color: #87af5f }
  .fg108 { color: #87af87 }
  .fg109 { color: #87afaf }
  .fg110 { color: #87afd7 }
  .fg111 { color: #87afff }
  .fg112 { color: #87d700 }
  .fg113 { color: #87d75f }
  .fg114 { color: #87d787 }
  .fg115 { color: #87d7af }
  .fg116 { color: #87d7d7 }
  .fg117 { color: #87d7ff }
  .fg118 { color: #87ff00 }
  .fg119 { color: #87ff5f }
  .fg120 { color: #87ff87 }
  .fg121 { color: #87ffaf }
  .fg122 { color: #87ffd7 }
  .fg123 { color: #87ffff }
  .fg124 { color: #af0000 }
  .fg125 { color: #af005f }
  .fg126 { color: #af0087 }
  .fg127 { color: #af00af }
  .fg128 { color: #af00d7 }
  .fg129 { color: #af00ff }
  .fg130 { color: #af5f00 }
  .fg131 { color: #af5f5f }
  .fg132 { color: #af5f87 }
  .fg133 { color: #af5faf }
  .fg134 { color: #af5fd7 }
  .fg135 { color: #af5fff }
  .fg136 { color: #af8700 }
  .fg137 { color: #af875f }
  .fg138 { color: #af8787 }
  .fg139 { color: #af87af }
  .fg140 { color: #af87d7 }
  .fg141 { color: #af87ff }
  .fg142 { color: #afaf00 }
  .fg143 { color: #afaf5f }
  .fg144 { color: #afaf87 }
  .fg145 { color: #afafaf }
  .fg146 { color: #afafd7 }
  .fg147 { color: #afafff }
  .fg148 { color: #afd700 }
  .fg149 { color: #afd75f }
  .fg150 { color: #afd787 }
  .fg151 { color: #afd7af }
  .fg152 { color: #afd7d7 }
  .fg153 { color: #afd7ff }
  .fg154 { color: #afff00 }
  .fg155 { color: #afff5f }
  .fg156 { color: #afff87 }
  .fg157 { color: #afffaf }
  .fg158 { color: #afffd7 }
  .fg159 { color: #afffff }
  .fg160 { color: #d70000 }
  .fg161 { color: #d7005f }
  .fg162 { color: #d70087 }
  .fg163 { color: #d700af }
  .fg164 { color: #d700d7 }
  .fg165 { color: #d700ff }
  .fg166 { color: #d75f00 }
  .fg167 { color: #d75f5f }
  .fg168 { color: #d75f87 }
  .fg169 { color: #d75faf }
  .fg170 { color: #d75fd7 }
  .fg171 { color: #d75fff }
  .fg172 { color: #d78700 }
  .fg173 { color: #d7875f }
  .fg174 { color: #d78787 }
  .fg175 { color: #d787af }
  .fg176 { color: #d787d7 }
  .fg177 { color: #d787ff }
  .fg178 { color: #d7af00 }
  .fg179 { color: #d7af5f }
  .fg180 { color: #d7af87 }
  .fg181 { color: #d7afaf }
  .fg182 { color: #d7afd7 }
  .fg183 { color: #d7afff }
  .fg184 { color: #d7d700 }
  .fg185 { color: #d7d75f }
  .fg186 { color: #d7d787 }
  .fg187 { color: #d7d7af }
  .fg188 { color: #d7d7d7 }
  .fg189 { color: #d7d7ff }
  .fg190 { color: #d7ff00 }
  .fg191 { color: #d7ff5f }
  .fg192 { color: #d7ff87 }
  .fg193 { color: #d7ffaf }
  .fg194 { color: #d7ffd7 }
  .fg195 { color: #d7ffff }
  .fg196 { color: #ff0000 }
  .fg197 { color: #ff005f }
  .fg198 { color: #ff0087 }
  .fg199 { color: #ff00af }
  .fg200 { color: #ff00d7 }
  .fg201 { color: #ff00ff }
  .fg202 { color: #ff5f00 }
  .fg203 { color: #ff5f5f }
  .fg204 { color: #ff5f87 }
  .fg205 { color: #ff5faf }
  .fg206 { color: #ff5fd7 }
  .fg207 { color: #ff5fff }
  .fg208 { color: #ff8700 }
  .fg209 { color: #ff875f }
  .fg210 { color: #ff8787 }
  .fg211 { color: #ff87af }
  .fg212 { color: #ff87d7 }
  .fg213 { color: #ff87ff }
  .fg214 { color: #ffaf00 }
  .fg215 { color: #ffaf5f }
  .fg216 { color: #ffaf87 }
  .fg217 { color: #ffafaf }
  .fg218 { color: #ffafd7 }
  .fg219 { color: #ffafff }
  .fg220 { color: #ffd700 }
  .fg221 { color: #ffd75f }
  .fg222 { color: #ffd787 }
  .fg223 { color: #ffd7af }
  .fg224 { color: #ffd7d7 }
  .fg225 { color: #ffd7ff }
  .fg226 { color: #ffff00 }
  .fg227 { color: #ffff5f }
  .fg228 { color: #ffff87 }
  .fg229 { color: #ffffaf }
  .fg230 { color: #ffffd7 }
  .fg231 { color: #ffffff }

  /* 24 shades of grey */

  .fg232 { color: #080808 }
  .fg233 { color: #121212 }
  .fg234 { color: #1c1c1c }
  .fg235 { color: #262626 }
  .fg236 { color: #303030 }
  .fg237 { color: #3a3a3a }
  .fg238 { color: #444444 }
  .fg239 { color: #4e4e4e }
  .fg240 { color: #585858 }
  .fg241 { color: #626262 }
  .fg242 { color: #6c6c6c }
  .fg243 { color: #767676 }
  .fg244 { color: #808080 }
  .fg245 { color: #8a8a8a }
  .fg246 { color: #949494 }
  .fg247 { color: #9e9e9e }
  .fg248 { color: #a8a8a8 }
  .fg249 { color: #b2b2b2 }
  .fg250 { color: #bcbcbc }
  .fg251 { color: #c6c6c6 }
  .fg252 { color: #d0d0d0 }
  .fg253 { color: #dadada }
  .fg254 { color: #e4e4e4 }
  .fg255 { color: #eeeeee }

  /* Backgrounds: */

  /* ansi colors */

    .bg0 { background-color: #000000 }
    .bg1 { background-color: #CC0000 }
    .bg2 { background-color: #4E9A06 }
    .bg3 { background-color: #C4A000 }
    .bg4 { background-color: #3465A4 }
    .bg5 { background-color: #75507B }
    .bg6 { background-color: #06989A }
    .bg7 { background-color: #D3D7CF }
    .bg8 { background-color: #555753 }
    .bg9 { background-color: #EF2929 }
  .bg10 { background-color: #8AE234 }
  .bg11 { background-color: #FCE94F }
  .bg12 { background-color: #729FCF }
  .bg13 { background-color: #AD7FA8 }
  .bg14 { background-color: #34E2E2 }
  .bg15 { background-color: #EEEEEC }

  /* 216 rgb colors */

  .bg16 { background-color: #000000 }
  .bg17 { background-color: #00005f }
  .bg18 { background-color: #000087 }
  .bg19 { background-color: #0000af }
  .bg20 { background-color: #0000d7 }
  .bg21 { background-color: #0000ff }
  .bg22 { background-color: #005f00 }
  .bg23 { background-color: #005f5f }
  .bg24 { background-color: #005f87 }
  .bg25 { background-color: #005faf }
  .bg26 { background-color: #005fd7 }
  .bg27 { background-color: #005fff }
  .bg28 { background-color: #008700 }
  .bg29 { background-color: #00875f }
  .bg30 { background-color: #008787 }
  .bg31 { background-color: #0087af }
  .bg32 { background-color: #0087d7 }
  .bg33 { background-color: #0087ff }
  .bg34 { background-color: #00af00 }
  .bg35 { background-color: #00af5f }
  .bg36 { background-color: #00af87 }
  .bg37 { background-color: #00afaf }
  .bg38 { background-color: #00afd7 }
  .bg39 { background-color: #00afff }
  .bg40 { background-color: #00d700 }
  .bg41 { background-color: #00d75f }
  .bg42 { background-color: #00d787 }
  .bg43 { background-color: #00d7af }
  .bg44 { background-color: #00d7d7 }
  .bg45 { background-color: #00d7ff }
  .bg46 { background-color: #00ff00 }
  .bg47 { background-color: #00ff5f }
  .bg48 { background-color: #00ff87 }
  .bg49 { background-color: #00ffaf }
  .bg50 { background-color: #00ffd7 }
  .bg51 { background-color: #00ffff }
  .bg52 { background-color: #5f0000 }
  .bg53 { background-color: #5f005f }
  .bg54 { background-color: #5f0087 }
  .bg55 { background-color: #5f00af }
  .bg56 { background-color: #5f00d7 }
  .bg57 { background-color: #5f00ff }
  .bg58 { background-color: #5f5f00 }
  .bg59 { background-color: #5f5f5f }
  .bg60 { background-color: #5f5f87 }
  .bg61 { background-color: #5f5faf }
  .bg62 { background-color: #5f5fd7 }
  .bg63 { background-color: #5f5fff }
  .bg64 { background-color: #5f8700 }
  .bg65 { background-color: #5f875f }
  .bg66 { background-color: #5f8787 }
  .bg67 { background-color: #5f87af }
  .bg68 { background-color: #5f87d7 }
  .bg69 { background-color: #5f87ff }
  .bg70 { background-color: #5faf00 }
  .bg71 { background-color: #5faf5f }
  .bg72 { background-color: #5faf87 }
  .bg73 { background-color: #5fafaf }
  .bg74 { background-color: #5fafd7 }
  .bg75 { background-color: #5fafff }
  .bg76 { background-color: #5fd700 }
  .bg77 { background-color: #5fd75f }
  .bg78 { background-color: #5fd787 }
  .bg79 { background-color: #5fd7af }
  .bg80 { background-color: #5fd7d7 }
  .bg81 { background-color: #5fd7ff }
  .bg82 { background-color: #5fff00 }
  .bg83 { background-color: #5fff5f }
  .bg84 { background-color: #5fff87 }
  .bg85 { background-color: #5fffaf }
  .bg86 { background-color: #5fffd7 }
  .bg87 { background-color: #5fffff }
  .bg88 { background-color: #870000 }
  .bg89 { background-color: #87005f }
  .bg90 { background-color: #870087 }
  .bg91 { background-color: #8700af }
  .bg92 { background-color: #8700d7 }
  .bg93 { background-color: #8700ff }
  .bg94 { background-color: #875f00 }
  .bg95 { background-color: #875f5f }
  .bg96 { background-color: #875f87 }
  .bg97 { background-color: #875faf }
  .bg98 { background-color: #875fd7 }
  .bg99 { background-color: #875fff }
  .bg100 { background-color: #878700 }
  .bg101 { background-color: #87875f }
  .bg102 { background-color: #878787 }
  .bg103 { background-color: #8787af }
  .bg104 { background-color: #8787d7 }
  .bg105 { background-color: #8787ff }
  .bg106 { background-color: #87af00 }
  .bg107 { background-color: #87af5f }
  .bg108 { background-color: #87af87 }
  .bg109 { background-color: #87afaf }
  .bg110 { background-color: #87afd7 }
  .bg111 { background-color: #87afff }
  .bg112 { background-color: #87d700 }
  .bg113 { background-color: #87d75f }
  .bg114 { background-color: #87d787 }
  .bg115 { background-color: #87d7af }
  .bg116 { background-color: #87d7d7 }
  .bg117 { background-color: #87d7ff }
  .bg118 { background-color: #87ff00 }
  .bg119 { background-color: #87ff5f }
  .bg120 { background-color: #87ff87 }
  .bg121 { background-color: #87ffaf }
  .bg122 { background-color: #87ffd7 }
  .bg123 { background-color: #87ffff }
  .bg124 { background-color: #af0000 }
  .bg125 { background-color: #af005f }
  .bg126 { background-color: #af0087 }
  .bg127 { background-color: #af00af }
  .bg128 { background-color: #af00d7 }
  .bg129 { background-color: #af00ff }
  .bg130 { background-color: #af5f00 }
  .bg131 { background-color: #af5f5f }
  .bg132 { background-color: #af5f87 }
  .bg133 { background-color: #af5faf }
  .bg134 { background-color: #af5fd7 }
  .bg135 { background-color: #af5fff }
  .bg136 { background-color: #af8700 }
  .bg137 { background-color: #af875f }
  .bg138 { background-color: #af8787 }
  .bg139 { background-color: #af87af }
  .bg140 { background-color: #af87d7 }
  .bg141 { background-color: #af87ff }
  .bg142 { background-color: #afaf00 }
  .bg143 { background-color: #afaf5f }
  .bg144 { background-color: #afaf87 }
  .bg145 { background-color: #afafaf }
  .bg146 { background-color: #afafd7 }
  .bg147 { background-color: #afafff }
  .bg148 { background-color: #afd700 }
  .bg149 { background-color: #afd75f }
  .bg150 { background-color: #afd787 }
  .bg151 { background-color: #afd7af }
  .bg152 { background-color: #afd7d7 }
  .bg153 { background-color: #afd7ff }
  .bg154 { background-color: #afff00 }
  .bg155 { background-color: #afff5f }
  .bg156 { background-color: #afff87 }
  .bg157 { background-color: #afffaf }
  .bg158 { background-color: #afffd7 }
  .bg159 { background-color: #afffff }
  .bg160 { background-color: #d70000 }
  .bg161 { background-color: #d7005f }
  .bg162 { background-color: #d70087 }
  .bg163 { background-color: #d700af }
  .bg164 { background-color: #d700d7 }
  .bg165 { background-color: #d700ff }
  .bg166 { background-color: #d75f00 }
  .bg167 { background-color: #d75f5f }
  .bg168 { background-color: #d75f87 }
  .bg169 { background-color: #d75faf }
  .bg170 { background-color: #d75fd7 }
  .bg171 { background-color: #d75fff }
  .bg172 { background-color: #d78700 }
  .bg173 { background-color: #d7875f }
  .bg174 { background-color: #d78787 }
  .bg175 { background-color: #d787af }
  .bg176 { background-color: #d787d7 }
  .bg177 { background-color: #d787ff }
  .bg178 { background-color: #d7af00 }
  .bg179 { background-color: #d7af5f }
  .bg180 { background-color: #d7af87 }
  .bg181 { background-color: #d7afaf }
  .bg182 { background-color: #d7afd7 }
  .bg183 { background-color: #d7afff }
  .bg184 { background-color: #d7d700 }
  .bg185 { background-color: #d7d75f }
  .bg186 { background-color: #d7d787 }
  .bg187 { background-color: #d7d7af }
  .bg188 { background-color: #d7d7d7 }
  .bg189 { background-color: #d7d7ff }
  .bg190 { background-color: #d7ff00 }
  .bg191 { background-color: #d7ff5f }
  .bg192 { background-color: #d7ff87 }
  .bg193 { background-color: #d7ffaf }
  .bg194 { background-color: #d7ffd7 }
  .bg195 { background-color: #d7ffff }
  .bg196 { background-color: #ff0000 }
  .bg197 { background-color: #ff005f }
  .bg198 { background-color: #ff0087 }
  .bg199 { background-color: #ff00af }
  .bg200 { background-color: #ff00d7 }
  .bg201 { background-color: #ff00ff }
  .bg202 { background-color: #ff5f00 }
  .bg203 { background-color: #ff5f5f }
  .bg204 { background-color: #ff5f87 }
  .bg205 { background-color: #ff5faf }
  .bg206 { background-color: #ff5fd7 }
  .bg207 { background-color: #ff5fff }
  .bg208 { background-color: #ff8700 }
  .bg209 { background-color: #ff875f }
  .bg210 { background-color: #ff8787 }
  .bg211 { background-color: #ff87af }
  .bg212 { background-color: #ff87d7 }
  .bg213 { background-color: #ff87ff }
  .bg214 { background-color: #ffaf00 }
  .bg215 { background-color: #ffaf5f }
  .bg216 { background-color: #ffaf87 }
  .bg217 { background-color: #ffafaf }
  .bg218 { background-color: #ffafd7 }
  .bg219 { background-color: #ffafff }
  .bg220 { background-color: #ffd700 }
  .bg221 { background-color: #ffd75f }
  .bg222 { background-color: #ffd787 }
  .bg223 { background-color: #ffd7af }
  .bg224 { background-color: #ffd7d7 }
  .bg225 { background-color: #ffd7ff }
  .bg226 { background-color: #ffff00 }
  .bg227 { background-color: #ffff5f }
  .bg228 { background-color: #ffff87 }
  .bg229 { background-color: #ffffaf }
  .bg230 { background-color: #ffffd7 }
  .bg231 { background-color: #ffffff }

  /* 24 shades of grey */

  .bg232 { background-color: #080808 }
  .bg233 { background-color: #121212 }
  .bg234 { background-color: #1c1c1c }
  .bg235 { background-color: #262626 }
  .bg236 { background-color: #303030 }
  .bg237 { background-color: #3a3a3a }
  .bg238 { background-color: #444444 }
  .bg239 { background-color: #4e4e4e }
  .bg240 { background-color: #585858 }
  .bg241 { background-color: #626262 }
  .bg242 { background-color: #6c6c6c }
  .bg243 { background-color: #767676 }
  .bg244 { background-color: #808080 }
  .bg245 { background-color: #8a8a8a }
  .bg246 { background-color: #949494 }
  .bg247 { background-color: #9e9e9e }
  .bg248 { background-color: #a8a8a8 }
  .bg249 { background-color: #b2b2b2 }
  .bg250 { background-color: #bcbcbc }
  .bg251 { background-color: #c6c6c6 }
  .bg252 { background-color: #d0d0d0 }
  .bg253 { background-color: #dadada }
  .bg254 { background-color: #e4e4e4 }
  .bg255 { background-color: #eeeeee }

  .meta {
    .avatar {
      width: 24px;
      padding: 1px;
      background-color: white;
      border: 1px solid #ccc;
    }
  }

  .description {
    color: #3e3e3e;
    font-family: arial, helvetica;
    font-size: 18px;
    margin: 20px 0;
  }
}