html {
  height:100%;
  background: url('images/herringbone.png'), linear-gradient(to top, RGBa(0,0,0,.6) 0%,RGBa(0,0,0,.9) 80%);
}
body {
  color:#FFF;
  margin:0;
  height: 100%;
  padding: 0 0 20px;
  overflow: hidden;
  overflow-y: auto;
  display:block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
}
header {
  background-color:#FFF;
  background-image:url('images/fcbg.jpg');
  border-bottom: solid 2px #efefef;
  padding: 0 15px;
  width:100%;
  display:block!important;
}
main {
  padding: 10px;
  height:100%;
}
iframe {
  border: none;
}
iframe body {
  background-color:#000;
}
h1 {
  color: transparent;
}
h1 {
  font-family: 'Bangers', cursive;
  text-shadow: 0px 0px 28px #FFF;
  font-size:48px;
  position: relative;
  margin:0;
  left: 30px;
  top: -35px;
}
h1.active {
  -webkit-transition:all 2s ease-in;
  -moz-transition:all 2s ease-in;
  -o-transition:all 2s ease-in;
  -ms-transition:all 2s ease-in;
  transition:all 2s ease-in;
  text-shadow: 0px 0px 0px #FFF;
}
a:link, a:visited, a:hover, a:focus, a:active {
  color:#efefef;
}
.fight, h2 {
  text-align:center;
  margin-top:0;
  font-family: 'Rock Salt', cursive;
  text-shadow: 2px 2px 5px #000;
  font-size:14px;
  clear:both;
}
.fight a:link {
  text-decoration: none;
}
.fight a:hover, .fight a:focus {
  text-decoration: underline;
  outline:none;
  color:#FFF;
  text-shadow: 0px 0px 20px #FFF;
}
#formbox {
  display:block;
  width: 30em;
  height: auto;
  padding: 20px;
  margin-left:auto;
  margin-right:auto;
  border:solid 1px #FFF;
  background-color:rgba(0,0,0,.5);
  box-shadow: 0px 0px 15px #000;
}
#submit, #submit_btn{
  display:block;
  margin-left:auto;
  margin-right:auto;
  padding:10px;
  background: linear-gradient(to bottom, #da549e 60%, #ecaacf 100%);
  border-radius: 5px;
  font-family: 'Rock Salt', cursive;
  font-size:14px;
  text-color:#000;
}
#submit:hover, #submit:focus, #submit_btn:hover, #submit_btn:focus {
  background: linear-gradient(to bottom, #ecaacf 0%, #da549e 60%);
}

#logout {
  float:right;
  margin-right:15px;
  margin-top:10px;
}
#submit_btn {
  font-size:12px;
  padding:5px;
  box-shadow: 2px 2px 5px #000;

}

/*VIDEO BUTTONS STYLING*/
#vid_buttons {
  margin-top:35px;
  clear:both;
}
#vid_buttons button {
  color: #FFF;
  text-shadow: 0px 0px 2px #000;
  background-color: rgba(0,0,0,.3);
  background-position-y: 0px;
  background-repeat: no-repeat;
  background-size: 175px;
  border: solid 1px #666;
  height: 96px;
  width: 175px;
  float:left;
  margin: 5px;
  overflow:hidden;
}
#vid_buttons button:focus, #vid_buttons button:hover {
  color: #000;
  background-image: url('images/play-icon.png')!important;
  background-position: center -40px;
  text-shadow: 0px 0px 2px #FFF;
  background-color: rgba(220,220,220,.6);
  border: solid 1px #FFF;
  outline:none;
}
/*VIDEO DIALOG STYLING*/
#overlay {
  width:150%;
  height:150%;
  display:none;
  background-color:transparent;
}
#overlay.visible {
  transition:all 2s ease-in;
  display:block;
  background-color:rgba(0,0,0,.7);
  position:absolute;
  top:0px;
  z-index: 800;
}
#window {
  display: none;
  background-color:#000;
  width: 726px;
  height: auto;
  border:solid 2px #efefef;
  margin:auto;
  z-index: 900;
  position: absolute;
  top: 15%;
  left: 15%;
  box-shadow: 10px 10px 20px #000;
}
video {
  background-repeat: no-repeat;
  background-size: 720px 420px;
  background-position-y: 0;
  background-color: transparent;
}
#close_btn, #footer_tgl {
  float:right;
  margin: 10px 20px;
  background-color: transparent;
  color: #FFF;
  font-size: 20px;
  border: none;
}
#close_btn:focus, #close_btn:hover, #footer_tgl:focus, #footer_tgl:hover {
  outline:1px dotted #FFF;
}
#footer_tgl {
  position:fixed;
  bottom:0;
  right:0;
  z-index:100;
}
#dialog_title {
  font-family: 'Rock Salt', cursive;
  font-size:18px;
  text-align:center;
  position:initial;
  text-shadow: 2px 2px 5px #000;
  color: #FFF;
}
#vid_pres {
}
#play_btn {
}
#video_frame {
  margin: auto;
  float: none;
  text-align: center;
}
video:focus {
  outline:none;
}
footer {
  background-color:#333;
  color:#bbb;
  text-shadow: 1px 1px 0px #000;
  border-top: solid 2px #FFF;
  padding: 10px;
  font-size:9px;
  width:100%;
  height:auto;
  position:fixed;
  bottom:0;
  overflow:hidden;
}
footer.close{
  -webkit-transition:all 2s ease-in;
  -moz-transition:all 2s ease-in;
  -o-transition:all 2s ease-in;
  -ms-transition:all 2s ease-in;
  transition:all 2s ease-in;
  height:0px;
}

@media only screen and (max-width:580px){
html {
  background-image: none;
  background-color: #666;
  height:auto;
}
h1 {
  font-size:24px;
}
#vid_buttons button {
  background-size: 350px;
  height: 192px;
  width: 350px;
}
// footer {
//  position: initial;
//  bottom: auto;
}}