gapless.css

/*
 * Copyright 2014 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */

@import url(http://fonts.googleapis.com/css?family=PT+Serif|PT+Serif:b|PT+Serif:i|PT+Sans|PT+Sans:b);

body {
  background-color: #eee;
}

code, pre, textarea {
  white-space: pre; white-space: pre-wrap; word-wrap: break-word;
  font-family: "Menlo", monospace;
  font-size: 13px;
}

h1, h2, h5 {
  text-rendering: optimizeLegibility;
}

h1, h2 {
  font-weight: 300;
  line-height: 1.1em;
}

h1, h5 {
  text-align: center;
}

h1 {
  font-size: 32px;
}

h2 {
  font-size: 24px;
}

h5 {
  margin: 0;
  padding: 0;
  font-weight: 450;
}

pre {
  margin: 1em auto;
  padding: 1em;
  line-height: 1.35em;
}

/* Pretty printing styles. Used with prettify.js. */
/* Vim sunburst theme by David Leibovic */

pre .str, code .str { color: #65B042; } /* string  - green */
pre .kwd, code .kwd { color: #E28964; } /* keyword - dark pink */
pre .com, code .com { color: #AEAEAE; font-style: italic; } /* comment - gray */
pre .typ, code .typ { color: #89bdff; } /* type - light blue */
pre .lit, code .lit { color: #3387CC; } /* literal - blue */
pre .pun, code .pun { color: #fff; } /* punctuation - white */
pre .pln, code .pln { color: #fff; } /* plaintext - white */
pre .tag, code .tag { color: #89bdff; } /* html/xml tag    - light blue */
pre .atn, code .atn { color: #bdb76b; } /* html/xml attribute name  - khaki */
pre .atv, code .atv { color: #65B042; } /* html/xml attribute value - green */
pre .dec, code .dec { color: #3387CC; } /* decimal - blue */

pre, code.prettyprint {
  color: white;
  background-color: #444;
  border-radius: 8px;
}

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

#main {
  background: #fff;
  border: none;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
  color: #333;
  font-family: "PT Serif", serif;
  line-height: 1.5em;
  margin: auto;
  max-width: 800px;
  padding: 1%;
}

.header {
  font-size: 12px;
}

.play-overlay, .waveform, .waveform-container {
  min-height: 300px;
  margin: auto;
  width: 750px;
}

.play-overlay {
  background: url(yt_play.png);
  background-size: 80px 60px;
  background-repeat: no-repeat;
  background-position:center;
  background-color: #eee;
  opacity: .3;
  z-index: 10;
  position: absolute;
}

.play-overlay:hover {
  opacity: .6;
  cursor: pointer;
}