@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');

   body{
    background: url(//files.makington.net/h/i/bh-background-1.png);
    margin: 0px;
    font-family: 'Open Sans';
   }

   #nav{
    height: 48px;
    width: calc(100% - 6px);
    margin: 0px 2px;
    border: 1px solid #1865AB;
    border-radius: 5px;
    background: linear-gradient(#6B6EC1, #374E8E);
    font-size: 12pt;
   }
   #nav a{
    padding: 0px 20px;
    color: #DDDDDD;
    display: inline-block;
    line-height: 44px;
    height: 48px;
    text-decoration: none;
    text-shadow: 1px 1px 2px #228;
    transition: all 0.3s;
    overflow: hidden;
    border-right: 1px solid rgba(235, 235, 235, 0.4);
    border-left: 1px solid rgba(100, 100, 100, 0.9);
   }
   #nav a:hover{
    background-color: #3A3DAF;
   // box-shadow: 0px 30px 50px -20px #151879;
   }
   #nav a:first-child{
    border-left: none;
    border-top-left-radius: inherit;
    border-bottom-left-radius: inherit;
   }
   #nav .cPage{
    box-shadow: inset 0px -8px 8px -4px rgba(47, 140, 224, 0.6)
   }

   #container{
    background-color: rgba(210, 245, 255, 0.4);
    padding: 8px;
    min-height: 95vh;
    margin-right: 15%;
    margin-left: 15%;
   }

   #footer{
    border-top: 1px solid #1865AB;
    border-bottom: 1px solid #263D7D;
    padding-left: 10%;
    padding-right: 10%;
    background: linear-gradient(#374E8E, #263D7D);
   }

 .noscroll{
  overflow: hidden;
 }

 #big-top{
  width: 100%;
  font-family: pixely-one;
  font-size: 6vw;
  text-align: center;
  font-weight: normal;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-bottom: 10px;
  color: #73551e;
  text-shadow: 1px 1px 6px #223199, -1px -1px 6px #223199;
  transition: text-size 0.2s;
 }
 #big-top.startout{
  opacity: 0;
  margin-top: 50vh;
  transform: translate(0, -50%);
 }
 #big-top.step1{
  opacity: 1;
  margin-top: 50vh;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  transform: translate(0, -50%);
  animation: bhfade 2.5s linear;
 }
 #big-top.step2{
  animation: titleslide 1.2s;
  margin-bottom: -11vw;
 }
 #behind-bh{
  background: url(https://apod.nasa.gov/apod/image/1709/Veil_Hubble_6000.jpg);
  background-size: cover;
  background-position: 0px -240px;
  height: 11vw;
  margin-bottom: -11vw;
  transition: background-position 1.3s;
 }
 #behind-bh.startout{
  background-position: 0px 0px;
  opacity: 0;
  height: 100vh;
  margin-bottom: -100vh;
 }
 #behind-bh.step1{
  background-position: 0px 0px;
  height: 100vh;
  margin-bottom: -100vh;
  animation: bhfade 1s;
 }
 #behind-bh.step2{
  -webkit-animation: bkgslide 1.2s;
  animation: bkgslide 1.2s;
 }
 #fluff-bg{
  background: radial-gradient(rgba(255, 240, 220, 0.7), rgba(255, 255, 255, 0));
  transition: opacity  1s;
  height: 11vw;
  margin-bottom: -11vw;
 }
 #fluff-bg.startout{
  height: 100vh;
  margin-bottom: -100vh;
  opacity: 0;
 }
 #fluff-bg.step1{
  height: 100vh;
  margin-bottom: -100vh;
  opacity: 0.5;
 }
 #fluff-bg.step2{
  animation: flufpress 1.2s;
 }
 #blk-bg{
  background-color: black;
  height: 11vw;
 }
 #blk-bg.startout{
  height: 100vh;
 }
 #blk-bg.step1{
  height: 11vw;
  transition: height 1.2s;
 }

 //---ANIMATIONS!!------------

 /*@keyframes bhcompress{
  from {height: 100vh;}
  to {height: 11vw;}
 }*/
 @keyframes titleslide{
  from {margin-top: 50vh; transform: translate(0, -50%);}
  to {margin-top: 0; transform: translate(0, 0);}
 }
 @keyframes bhfade{
  from {opacity: 0;}
  to {opacity: 1;}
 }	
 @keyframes bkgslide{
  from {/*background-position: 0px 0px;*/ height: 100vh; margin-bottom: -100vh;}
  to {/*background-position: 0px -240px;*/ height: 11vw; margin-bottom: -11vw;}
 }
 @keyframes flufpress{
  from {height: 100vh; margin-bottom: -100vh;}
  to {height: 11vw; margin-bottom: -11vw;}
 }

 //---WEBKIT-ANIMATIONS!------
 @-webkit-keyframes bhcompress{
  from {height: 100vh;}
  to {height: 11vw;}
 }
 @-webkit-keyframes titleslide{
  from {margin-top: 50vh; -webkit-transform: translate(0, -50%);}
  to {margin-top: 0; -webkit-transform: translate(0, 0);}
 }
 @-webkit-keyframes bhfade{
  from {opacity: 0;}
  to {opacity: 1;}
 }	
 @-webkit-keyframes bkgslide{
  from {background-position: 0px 0px; height: 100vh; margin-bottom: -100vh;}
  to {background-position: 0px -240px; height: 11vw; margin-bottom: -11vw;}
 }
 @-webkit-keyframes flufpress{
  from {height: 100vh; margin-bottom: -100vh;}
  to {height: 11vw; margin-bottom: -11vw;}
 }
 //---END-WEBKIT-ANIMS---------

 #container{
  margin-right: 15%;
  margin-left: 15%;
 }
 @media only screen and (orientation: landscape) and (max-width: 768px) {
  #container{
   margin-right: 10% !important;
   margin-left: 10% !important;
  }
 }
 @media only screen and (max-width: 768px) {
  #footer{
   font-size: 80%;
  }
 }
 @media only screen and (orientation: portrait) {
  #nav{
   font-size: 80%;
  }
  #nav a{
   padding: 0px 12px;
  }
  #container{
   margin-right: 4%;
   margin-left: 4%;
  }
 }


/*---------------LOGIN---STUFF-----------------*/
   #login{
    float: right;
   }
   #login a{
    color: #335388;
   }
   #login a:active{
    color: orange;
   }

/* Full-width input fields */
input.log[type=text], input.log[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* Set a style for all buttons */
button.log {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}

button.log:hover {
    opacity: 0.8;
}

/* Extra styles for the cancel button */
.cancelbtn {
    width: auto !important;
    padding: 10px 18px !important;
    background-color: #f44336 !important;
}

/* Center the image and position the close button */
.imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
    position: relative;
}

img.avatar {
    width: 40%;
    //border-radius: 50%;
}

.login .container {
    padding: 16px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    //background-color: rgba(128,55,255,0.1);
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
   // margin: 2% 10% 15% auto; /* 5% from the top, 15% from the bottom and centered */
    border: 1px solid #888;
    width: 340px;
    box-shadow: 0px 0px 20px 1px #555;
    position: fixed;
    right: 20px;
    bottom: 20px;
    max-height: calc(100% - 30px);
    overflow: auto;
}

/* The Close Button (x) */
.close {
    position: absolute;
    right: 25px;
    top: 0;
    color: #000;
    font-size: 35px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: red;
    cursor: pointer;
}

/* Add Zoom Animation */
.animate {
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s
}
.depart {
    -webkit-animation: zoomout 0.5s;
    animation: zoomout 0.5s
}

@-webkit-keyframes animatezoom {
    from {-webkit-transform: scale(0); opacity: 0} 
    to {-webkit-transform: scale(1); opacity: 1}
}
    
@keyframes animatezoom {
    from {transform: scale(0); opacity: 0} 
    to {transform: scale(1); opacity: 1}
}

@-webkit-keyframes zoomout {
    from {-webkit-transform: scale(1); opacity: 1} 
    to {-webkit-transform: scale(0); opacity: 0}
}

@keyframes zoomout {
    from {transform: scale(1); opacity: 1} 
    to {transform: scale(0); opacity: 0}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100% !important;
    }
}
/*------------END---LOGIN---STUFF--------------*/

#songlist{
 border: 1px solid rgba(50,125,211, 0.6);
 border-collapse: collapse;
 box-shadow: 0px 3px 5px 0px rgba(0, 10, 50, 0.1);
}
#songlist td{
 border-bottom: 1px solid black;
 border-right: 1px solid navy;
 padding: 5px;
}
#songlist th{
 border-right: 1px solid navy;
 border-bottom: 1px solid navy;
 padding: 5px;
}
#songlist td:last-child, #songlist th:last-child{
  border-right: none;
}

#m-listlink{
 float: right;
 border: 1px solid #8C5C15;
 background-color: rgba(12, 60, 170, 0.3);
}

.cc-icons span{
 display: inline-block;
 width: 13px;
 height: 13px;
 margin-left: 1px;
 //margin-right: 1px;
 margin-bottom: -2px;
 opacity: 0.7;
}
.cc-icons .by{
 background: url(https://s4.bcbits.com/img/CCstrip.png) no-repeat;
}
.cc-icons .nc{
 background: url(https://s4.bcbits.com/img/CCstrip.png) -13px 0 no-repeat;
}

#facebanner{
 height: 100%;
 background: url(http://files.makington.net/h/i/sylfaces.png);
 background-position: 60% 47%;
 background-size: 115%;
 -webkit-mask-image: -webkit-linear-gradient(top, transparent, black, transparent);
 mask-image: -moz-linear-gradient(top, transparent, black, transparent);
 mask-image: linear-gradient(top, transparent, black, transparent);
}
#fbg{
 width: 19em;
 height: 90px;
 max-width: calc(92% - 16px);
 -webkit-mask-image: -webkit-linear-gradient(left, black 80%, transparent);
 mask-image: -moz-linear-gradient(left, black 80%, transparent);
 mask-image: linear-gradient(left, black 80%, transparent);
 position: absolute;
 z-index: -1;
}

#ttos-chars-right{
 width: 100%;
 text-align: center;
 background-color: rgba(255, 255, 255, 0.2);
 border: 1px solid rgba(55, 55, 100, 0.3);
 padding: 1.3em 2px 5px;
 position: relative;
}
@media only screen and (min-width: 768px) {
 #ttos-chars-right{
  float: right;
  width: 50%;
  margin-top: -7em;
 }
}


#eplist{
 margin: 0;
 padding-right: 0;
 list-style-type: none;
}
#eplist li{
 counter-increment: step-counter;
 margin-bottom: 4px;
 margin-left: -1em;
}
#eplist li::before{
 content: "Ep" counter(step-counter) ":";
 margin-right: 8px;
 padding: 1px 3px;
 border-radius: 3px;
 background-color: rgba(255, 220, 210, 0.2);
 display: inline-block;
 width: 5ex;
 text-align: right;
}
#ep-oc{
 display: inline-block;
 width: 20px;
 height: 20px;
 background-image: url(//goo.gl/p4W98o);
 background-size: 20px 20px;
 border-radius: 50px;
 transform: rotate(90deg);
 transition: transform 0.2s;
 cursor: pointer;
}
#c2e{
 font-weight: normal;
 font-family: serif;
 font-style: italic;
 color: #404040;
 font-size: 70%;
 margin-left: 10px;
 opacity: 0.75;
 transition: opacity 0.4s;
 cursor: pointer;
}
#c2e.op1{
 opacity: 0;
}
#c2e.op2{
 opacity: 0.5;
}

#c2e.op0 .hide{
 opacity: 0;
}
#c2e.op1 .hide{
 opacity: 1;
}
#c2e.op1 .show{
 opacity: 0;
}
#c2e.op2 .hide{
 opacity: 0;
}
#c2e.op2 .show{
 opacity: 1;
}

.expandable-panel-heading:hover #c2e{
 opacity: 1;
}
#c2e span{
 transition: opacity 0.5s;
}

hr.faderight{
 border: 0;
 height: 2px;
 background-image: -webkit-linear-gradient(left, rgba(134, 92, 60, 0.7) 60%, rgba(134, 92, 60, 0));
 background-image: -moz-linear-gradient(left, rgba(134, 92, 60, 0.7) 60%, transparent);
 background-image: -o-linear-gradient(left, rgba(134, 92, 60, 0.7) 60%, transparent);
 background-image: linear-gradient(left, rgba(134, 92, 60, 0.7) 60%, transparent);
 margin-top: 0;
}

/* ===============================================
 * Scrolling shadows by @kizmarh and @leaverou
 * Only works in browsers supporting background-attachment: local; & CSS gradients
 * Degrades gracefully
 * Original code http://lea.verou.me/2012/04/background-attachment-local/
 * ===============================================
 */
.scrlshdw {
    overflow: auto;
   
    background:
        /* Shadow covers */
        linear-gradient(white 30%, rgba(255,255,255,0)),
        linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
         
        /* Shadows */
        radial-gradient(50% 0, farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)),
        radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
    background:
        /* Shadow covers */
        linear-gradient(white 30%, rgba(255,255,255,0)),
        linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
         
        /* Shadows */
        radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
        radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
    background-repeat: no-repeat;
    background-color: white;
    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
     
    /* Opera doesn't support this in the shorthand */
    background-attachment: local, local, scroll, scroll;
}