jbenden/hls-streamer

@font-face {
  font-family: 'MuseoSlab';
  src: url("../webfonts/Museo_Slab_500-webfont.eot");
  src: url("../webfonts/Museo_Slab_500-webfont.eot?#iefix") format('embedded-opentype');
  src: local('☺');
  src: url("../webfonts/Museo_Slab_500-webfont.woff") format('woff'), url("../webfonts/Museo_Slab_500-webfont.ttf") format('truetype'), url("../webfonts/Museo_Slab_500-webfont.svg#MuseoSlab") format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'MuseoSlabItalic';
  src: url("../webfonts/Museo_Slab_500italic-webfont.eot");
  src: url("../webfonts/Museo_Slab_500italic-webfont.eot?#iefix") format('embedded-opentype');
  src: local('☺');
  src: url("../webfonts/Museo_Slab_500italic-webfont.woff") format('woff'), url("../webfonts/Museo_Slab_500italic-webfont.ttf") format('truetype'), url("../webfonts/Museo_Slab_500italic-webfont.svg#MuseoSlabItalic") format('svg');
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: 'MuseoSlab';
  src: url("../webfonts/Museo_Slab_500-webfont.eot");
  src: url("../webfonts/Museo_Slab_500-webfont.eot?#iefix") format('embedded-opentype');
  src: local('☺');
  src: url("../webfonts/Museo_Slab_500-webfont.woff") format('woff'), url("../webfonts/Museo_Slab_500-webfont.ttf") format('truetype'), url("../webfonts/Museo_Slab_500-webfont.svg#MuseoSlab") format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'MuseoSlabItalic';
  src: url("../webfonts/Museo_Slab_500italic-webfont.eot");
  src: url("../webfonts/Museo_Slab_500italic-webfont.eot?#iefix") format('embedded-opentype');
  src: local('☺');
  src: url("../webfonts/Museo_Slab_500italic-webfont.woff") format('woff'), url("../webfonts/Museo_Slab_500italic-webfont.ttf") format('truetype'), url("../webfonts/Museo_Slab_500italic-webfont.svg#MuseoSlabItalic") format('svg');
  font-weight: normal;
  font-style: italic;
}
body {
  margin: 0;
  padding: 0;
}
body h1 {
  margin: 0.4em 0 0 -2em;
  text-align: center;
}
body p {
  padding: 1em;
}
body #header {
  background: url("../images/logo-pie.png") 1.4375em 1.4375em no-repeat;
  height: 6.25em;
  padding: 1.4375em;
  padding-left: 7.6875em;
}
body p.flash {
  margin: 0 auto;
  font-size: 1.5em;
  -webkit-transition: opacity 1s ease-out;
}
body p.flash.error {
  background-color: #ed5a02;
  border-top: 1px solid #f28b00;
  border-bottom: 1px solid #f28b00;
  color: #fff;
}
body p.flash.error:before {
  font-family: 'MuseoSlabItalic', 'Clarendon', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-style: italic;
  content: 'Whoops! ';
}
body p.flash.info {
  background-color: #fff;
  border-top: 1px solid #8d8d8d;
  border-bottom: 1px solid #8d8d8d;
  color: #010101;
}
body p.flash.info:before {
  font-family: 'MuseoSlabItalic', 'Clarendon', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-style: italic;
  content: 'Hurray! ';
}
body p.thanks {
  line-height: 1.5em;
}
@font-face {
  font-family: 'MuseoSlab';
  src: url("../webfonts/Museo_Slab_500-webfont.eot");
  src: url("../webfonts/Museo_Slab_500-webfont.eot?#iefix") format('embedded-opentype');
  src: local('☺');
  src: url("../webfonts/Museo_Slab_500-webfont.woff") format('woff'), url("../webfonts/Museo_Slab_500-webfont.ttf") format('truetype'), url("../webfonts/Museo_Slab_500-webfont.svg#MuseoSlab") format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'MuseoSlabItalic';
  src: url("../webfonts/Museo_Slab_500italic-webfont.eot");
  src: url("../webfonts/Museo_Slab_500italic-webfont.eot?#iefix") format('embedded-opentype');
  src: local('☺');
  src: url("../webfonts/Museo_Slab_500italic-webfont.woff") format('woff'), url("../webfonts/Museo_Slab_500italic-webfont.ttf") format('truetype'), url("../webfonts/Museo_Slab_500italic-webfont.svg#MuseoSlabItalic") format('svg');
  font-weight: normal;
  font-style: italic;
}
body {
  background-color: #bbb;
  color: #717171;
  font: 16px 'MuseoSlab', 'Clarendon', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  text-align: center;
}
body a {
  text-decoration: none;
  border-bottom: 0.0625em dotted #024a7f;
}
body a:link {
  color: #024a7f;
}
body a:visited,
body a:hover {
  color: #393939;
}
body a:hover {
  color: #0072bc;
}
body h1 {
  font-size: 3em;
  font-weight: normal;
  letter-spacing: 0.041666666666666664em;
  text-transform: uppercase;
}
body p span.title {
  font-weight: bold;
}
body ul {
  margin: 0;
  padding: 0;
}
body li {
  margin: 0;
  padding: 0.6944444444444444em;
  padding-left: 3.3333333333333335em;
  text-align: left;
}
body h1 {
  text-shadow: 0 1px 0 #024a7f;
}
body #header {
  background-color: #0072bc;
  border-top: 1px solid #3eb3ff;
  border-bottom: 3px solid #024a7f;
  color: #fff;
}
body ul li {
  font-size: 2.25em;
  font-weight: normal;
  letter-spacing: 0.027777777777777776em;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
body ul li.not-ready {
  background-color: #adadad;
  border-top: 1px solid #cecece;
  border-bottom: 1px solid #686868;
  color: #8d8d8d;
  text-shadow: 0px 1px 0px #d6d6d6;
}
body ul li.not-ready span.status {
  color: #7c7c7c;
}
body ul li.almost-ready {
  background-color: #cbcbcb;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #7a7a7a;
  color: #8d8d8d;
  text-shadow: 0px 1px 0px #ebebeb;
}
body ul li.almost-ready span.status {
  color: #7c7c7c;
}
body ul li.pipin-hot {
  background-color: #ed5a02;
  border-top: 1px solid #fe9a5e;
  border-bottom: 1px solid #ef0000;
  color: #010101;
  text-shadow: 0 1px 0 #ef0000;
}
body ul li.pipin-hot span.status {
  color: #a10101;
}
body ul li.hot {
  background-color: #ed7102;
  border-top: 1px solid #fea95e;
  border-bottom: 1px solid #ed3f02;
  color: #fff;
  text-shadow: 0 1px 0 #ed3f02;
}
body ul li.hot span.status {
  color: #d6d6d6;
}
body ul li.warm {
  background-color: #f28b00;
  border-top: 1px solid #ffbb5e;
  border-bottom: 1px solid #d56602;
  color: #fff;
  text-shadow: 0 1px 0 #d56602;
}
body ul li.warm span.status {
  color: #e6e6e6;
}
body span.status {
  font-size: 0.7222222222222222em;
  text-transform: none;
}
body ul li {
  background-position: 0.2777777777777778em 0.1388888888888889em;
  background-repeat: no-repeat;
  background-size: 2.2222222222222223em 2.2222222222222223em;
}
body ul li.tarragonchicken {
  background-image: url("../images/pie-tarragonchicken.jpg");
}
body ul li.cherry {
  background-image: url("../images/pie-apple.jpg");
}
body ul li.raspberry {
  background-image: url("../images/pie-apple.jpg");
}
body ul li.chickenpot {
  background-image: url("../images/pie-tarragonchicken.jpg");
}
body ul li.strawberry {
  background-image: url("../images/pie-pecan.jpg");
}
body ul li.sweet {
  background-image: url("../images/icon-sweet.png");
}
body ul li.savory {
  background-image: url("../images/icon-savory.png");
}