@import url('https://fonts.googleapis.com/css?family=Rambla:400,400i,700&subset=latin-ext');

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, input, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}

/*
 * END of CSS Reset
 */

body {
 background-color: rgba(191,191,191,1);
 color: rgba(62,62,62,1);
 font-family: 'Rambla', sans-serif;
 overflow-x: hidden;
}

#topbutton {
 position: fixed;
 bottom: 0;
 right: 0;
 text-align: center;
 width: 100%;
 z-index: 100;
 display: none;
 font-size: 2em;
 padding: 15px;
 color: rgba(221,221,221,1);
 background-color: rgba(62,62,62,1);
 cursor: pointer;
 transition: 0.5s 0s ease;
 transition: opacity 0.5s;
 opacity: 0.8;
}

#topbutton:hover {
 color: rgba(236,236,236,1);
 background-color: rgba(77,77,77,1);
 opacity: 1;
}

#outer {
 width: 100%;
 height: 100%;
 background-color: rgba(191,191,191,1);
 -webkit-box-shadow: inset 0px 0px 40px 0px rgba(221,221,221,0.5);
 -moz-box-shadow: inset 0px 0px 40px 0px rgba(221,221,221,0.5);
 box-shadow: inset 0px 0px 40px 0px rgba(221,221,221,0.5);
 overflow-x: hidden;
}

#inner {
 margin: 0 auto;
 max-width: 1200px;
 -webkit-box-shadow: 0px 0px 10px 0px rgba(221,221,221,0.5);
 -moz-box-shadow: 0px 0px 10px 0px rgba(221,221,221,0.5);
 box-shadow: 0px 0px 10px 0px rgba(221,221,221,0.5);
 padding-top: 20px;
}

#content {
 width: 90%;
 margin: 0 auto;
 padding-top: 20px;
}

#content p {
 font-size: 1.5em;
 background-color: rgba(221,221,221,1);
 color: rgba(51,51,51,1);
}

#footercontainer {
 background-color: rgba(221,221,221,1);
 margin-left: -3000px;
 padding-left: 3000px;
 margin-right: -3000px;
 padding-right: 3000px;
}

#footer {
 width: 100%;
 margin: 0 auto;
 background-color: rgba(221,221,221,1);
 color: rgba(191,191,191,1);;
 padding: 5px;
 padding-bottom: 4em;
}

#linkbutton {
text-align: center;
}

#linkbutton input {
 padding: 5px;
 font-size: 4em;
 display: inline-block;
 cursor: pointer;
 color: rgba(150,150,150,1);
 background-color: rgba(220,220,220,1);
 transition: color 1s 0s ease, background-color 1s 0s ease;
 -webkit-box-shadow: 5px 5px 10px 0px rgba(61,61,61,0.7);
 -moz-box-shadow: 5px 5px 10px 0px rgba(61,61,61,0.7);
 box-shadow: 5px 5px 10px 0px rgba(61,61,61,0.7);
}

.shadow {
 -webkit-box-shadow: -5px 5px 10px 0px rgba(61,61,61,0.7);
 -moz-box-shadow: -5px 5px 10px 0px rgba(61,61,61,0.7);
 box-shadow: -5px 5px 10px 0px rgba(61,61,61,0.7);
}

#linkbutton input:hover {
padding: 5px;
font-size: 4em;
display: inline-block;
color: rgba(221,221,221,1);
background-color: rgba(62,62,62,1);
cursor: pointer;
}

#linkbutton input:active {
 -ms-transform: translate(3px, 3px);
 -webkit-transform: translate(3px, 3px);
 transform: translate(3px, 3px);
 -webkit-box-shadow: 2px 2px 10px 0px rgba(61,61,61,0.7);
 -moz-box-shadow: 2px 2px 10px 0px rgba(61,61,61,0.7);
 box-shadow: 2px 2px 10px 0px rgba(61,61,61,0.7);
}

#pagetitle {
 background-color: rgba(221,221,221,1);
 display: inline-block;
}

h1, h2 {
 color: rgba(62,62,62,1);
 background-color: rgba(221,221,221,1);
 display: inline-block;
 padding: 5px;
 padding-right: 15px;
 margin-left: -3000px;
}

h1 {
 font-size: 5em;
 font-weight: bold;
 padding-left: 3015px;
 letter-spacing: 3px;
}

h2 {
 font-size: 3em;
 padding-left: 3015px;
}

p {
 padding: 5px;
 display: inline-block;
}

q {
 /*font-family: serif;
 font-style: italic;*/
}

.wrappercurrent, .wrapperpast {
 margin: 0 auto 20px auto;
 padding: 2px;
 background-color: rgba(210,210,210,1);
 width: 100%;
 text-align: center;
 border: 3px solid rgba(221,221,221,1);
}

.playerrow {
padding: 0;
margin 0;
cursor: default;
}

div.wrappercurrent span {
margin: 0px;
padding: 0px;
visibility: hidden;
display: none;
font-size: 0;
transition: 2s 0s ease;
color: rgba(221,221,221,1);
background-color: rgba(62,62,62,1);
margin-top: -4000;
}

div.wrappercurrent span.played {
margin: 3px;
padding: 3px;
visibility: visible;
font-size: 2em;
display: inline-block;
color: rgba(150,150,150,1);
background-color: rgba(220,220,220,1);
}

div.wrappercurrent span.playing {
margin: 3px;
padding: 3px;
visibility: visible;
font-size: 2em;
display: inline-block;
}

hr {
border: 0;
border-bottom: 2px solid rgba(62,62,62,1);
}

div.wrappercurrent span.rule {
margin: 3px;
padding: 3px;
visibility: hidden;
font-size: 0;
display: none;
color: rgba(62,62,62,1);
background-color: rgba(210,210,210,1);
width: 0;
}

div.wrappercurrent span.played.rule {
margin: 3px;
padding: 3px;
visibility: visible;
font-size: 1px;
display: inline-block;
width: 50%;
}

div.wrappercurrent span.played.rule > hr {
border-color: rgba(150,150,150,1);
}

div.wrappercurrent span.playing.rule {
margin: 3px;
padding: 3px;
visibility: visible;
font-size: 1px;
display: inline-block;
width: 80%;
}

div.wrapperpast span {
margin: 3px;
padding: 3px;
font-size: 2em;
display: inline-block;
color: rgba(150,150,150,1);
background-color: rgba(220,220,220,1);
transition: 2s 0s ease;
}

div.wrapperpast span.rule {
margin: 3px;
padding: 3px;
visibility: visible;
font-size: 1px;
display: inline-block;
color: rgba(62,62,62,1);
background-color: rgba(210,210,210,1);
width: 50%;
}

div.wrapperpast span.rule > hr {
border-color: rgba(150,150,150,1);
}

.returnlink {
 display: inline-block;
 padding: 3px;
 position: absolute;
 top: 0;
 right: 0;
 text-decoration: none;
 color: rgba(62,62,62,1);
 transition: 1s 0s ease;
}

.returnlink:visited {
 color: rgba(62,62,62,1);
}

.returnlink:hover {
 color: rgba(150,150,150,1);
 text-decoration: underline;
 transition: 1s 0s ease;
}

.returnlink:active {
 color: rgba(62,62,62,1);
}

#content a {
 text-decoration: underline;
 color: inherit;
}

#content a:visited {
 
}

#content a:hover {
 text-decoration: none;
 color: rgba(221,221,221,1);
 background-color: rgba(62,62,62,1);
 transition: 0.3s 0s ease;
}

#content a:active {
 text-decoration: none;
 color: rgba(221,221,221,1);
 background-color: rgba(62,62,62,1);
}

/* Not currently used

div.wrapperpast span:hover {
background-color: black;
color: white;
opacity: 1;
}

table.future li {
 display: inline-block;
 margin-left: 2px;
 margin-right: 2px;
 padding: 2px;
 border: 1px solid white;
 opacity: 1;
 transition: 0.5s;
}

table.current li.toplay {
 opacity: 1.0;
 color: rgb(119,136,153);
 background-color: black;
 border: black;
 font-size: 0.3em;
} */

.italic {
 font-style: italic;
}