/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Oct 22, 2015, Oct 22, 2015 3:05:20 PM
    Author     : joeyre
*/


body {
    font-family: 'Lato', sans-serif;
    background:#000;
}

h1, h2 {
    font-family: 'VT323';
}

a:link { 
    -webkit-tap-highlight-color:#FFC926;
    }
a {
    text-decoration: none;
    color:#FFC926;
    -webkit-tap-highlight-color:#FFC926;
}

a:hover {
    text-decoration: none;
    color:#FF2626;
}

header#home {
    background-image:url(../images/background1.jpg);
    background-size: cover;
    background-attachment: fixed;
}

#logo {
    margin:0 auto;
    text-align: center;
    margin-top:90px;
}

header#home h1 {
    font-family: 'Lato', sans-serif;
    font-size:24px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color:#FFF;
    font-weight:300;
    margin:30px 0;
}

#home-intro h2 {
    color:#FFC926;
    margin:20px 0 40px;
}

#home-intro {
    background:#111;
    padding:50px 0 60px;
}

#home-intro p {
    font-family: 'VT323';
    font-size:21px;
    color:#FFF;
    font-weight: 100;
    width:60%;
    margin:0 auto;
}

#contact {
    padding:50px 0;
    color:#FFF;
}

#contact h2 {
    font-size:40px;
    text-transform: uppercase;
}

#contact h3 {
    font-size:20px;
    font-weight: bold;
}

#contact p {
    font-size:18px;
}

footer {
    padding:50px 0;
    border-top:1px solid #333;
    color:#FFF;
    font-size:16px;
    font-weight: 300;
    margin-top:50px;
}

/* Booking System */

header#book h2 {
    font-family: 'Lato', sans-serif;
    font-size:20px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color:#ccc;
    font-weight:300;
    margin:30px 0;
}

#stages {
    background-color:#222;
    padding:20px 0 5px;
}
#stages {
    font-family: 'press_start_2pregular';
    font-size:15px;
    text-transform: uppercase;
    color:#BCBCBC;
}

#stages p {
    width:92%;
}

#stages p a {
    color:#FFF;
    display: block;
}

#stages p a:hover {
    color:yellow;
}

#stages .active {
    color:#FFF;
}

#stages .number {
    font-size: 20px;
    padding: 8px;
    display: block;
    float: left;
    margin-right: 17px;
    background-color:#666;
    margin-left:45px;
}

#stages .active .number {
    background-color: #FF4000;
}

#calendar h1, #timeslot h1, #your-details h1 {
    color:#FFF;
    margin:50px 0 30px;
    text-transform: uppercase;
}

.table {
    margin-bottom: 50px;
}

.table > tbody > tr > td {
    border-top:none;
    padding:10px 20px;
}

.table > tbody > tr > td:hover {
    background-color:#000;
    color:#FFF;
    cursor: pointer;
}

.table > tbody > tr > td.inactive, .time.inactive, .time.inactive:hover {
    background-color:#AAAAAA;
    color:#555;
    cursor: not-allowed;
}

.table > tbody > tr > td.select {
    background-color:#BFFF00;
    color:#000;
}

td {
    background-color:#FFF;
    color:#000;
    font-size:16px;
    border:5px solid #000;
    border-top:none;
}

td .number {
    display: block;
    font-size:25px;
}

td.empty, .table > tbody > tr > td.empty:hover {
    background-color:#222;
    cursor:not-allowed;
}

h3.month {
    color:#fff;
    text-transform: uppercase;
    margin:15px 0 20px;
}

.next {
    background-image: url(../images/arrow-right-small.png);
    background-repeat: no-repeat;
    background-position: right;
    text-transform: uppercase;
    padding-right:20px;
    margin-top:20px;
    display: block;
    position: relative;
    z-index:9999;
}

.prev {
    background-image: url(../images/arrow-left-small.png);
    background-repeat: no-repeat;
    background-position: left;
    text-transform: uppercase;
    padding-left:20px;
    margin-top:20px;
    display: block;
    position: relative;
    z-index:9999;
}

.big-button.next-stage {
    margin:0 0 100px;
    cursor: pointer;
}

.big-button.next-stage:hover {
    background-color:#000;
    color:#D93601;
}

#players {
    background-color:#222;
    width:60%;
    margin:0 auto;
    font-family: 'VT323';
    color:#FFF;
    text-transform: uppercase;
    font-size:40px;
}

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   background-color:transparent;
   border:0;
   background-image:url(../images/red-arrow-down.png);
   background-repeat:no-repeat;
   background-position:right;
   padding:0 20px;
   color:#FFC926;
   font-size:40px;
}

option {
    font-size:16px;
}

#timeslot h2, #your-details h2 {
    color:#FFF;
    margin:50px 0 30px;
    text-transform: uppercase;
}

.time {
    background-color:#fff;
    color:#000;
    font-size:29px;
    padding:10px;
    cursor: pointer;
    margin-bottom:30px;
}

.small {
    color:#FFF;
    font-size:14px;
    margin-bottom:30px;
}

.time.select {
    background-color:#BFFF00;
}


#timeslot .table {
    text-align: center;
    font-size:24px;
}

#timeslot .table > tbody > tr > td {
     font-size:29px;
}

#timeslot .slots {
    display: block;
    font-size:16px;
}

#timeslot .cost {
    font-size:30px;
    color:#BFFF00;
}

#details {
    width:70%;
    margin:0 auto;  
}

#details label {
    width:30%;
    text-align: right;
    float:left;
    padding:10px 20px 0 0;
    font-family: 'VT323';
    color:#FFF;
    text-transform:uppercase;
    font-size:30px;
}

#details input {
    width:54%;
    float:left;
    background:#000;
    background-image:url(../images/border-bottom.png);
    background-repeat:repeat-x;
    background-position:bottom;
    padding:10px;
    border:0;
    font-family: 'VT323';
    font-size:25px;
    color:#FFF;
    text-transform: uppercase;
}

#details .clear {
    height:20px;
    clear:both;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

.thankyou {
    font-size:20px;
    color:#FFF;
}


.booking {
    font-size: 23px;
    color: #FFF;
    width: 33%;
    margin: 0 auto;
    text-align: left;
    padding: 20px 36px;
    background: #222;
    margin-bottom:50px;
}
.booking .first {
    width:100px;
    display: inline-block;
    padding: 0 30px 0 0;
    
}

.spadeinvaders {
    margin-bottom:100px;
    overflow: hidden;
}

ul.errorlist {
    list-style-type: none;
    color: red;
    text-align: left;
    margin: 0 0 -10px 50px;
}

/* Blinking Button */

.big-button {
    background-color:#000;
    font-family: 'press_start_2pregular';
    color:#FFF;
    text-transform: uppercase;
    font-size:22px;
    padding:20px;
    margin:230px 0 260px;
    display: inline-block;
    line-height:2em;
}

.big-button:hover {
    background-color:#fff;
    color:#000;
}

.blink {
      animation: blink 1s steps(5, start) infinite;
      -webkit-animation: blink 1s steps(5, start) infinite;
      display: block;
      margin:-4px 20px 0 5px;
      float:left;
    }
    @keyframes blink {
      to {
        visibility: hidden;
      }
    }
    @-webkit-keyframes blink {
      to {
        visibility: hidden;
      }
    }
    
    
@font-face {
    font-family: 'press_start_2pregular';
    src: url('../fonts/pressstart2p-webfont.eot');
    src: url('../fonts/pressstart2p-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/pressstart2p-webfont.woff2') format('woff2'),
         url('../fonts/pressstart2p-webfont.woff') format('woff'),
         url('../fonts/pressstart2p-webfont.ttf') format('truetype'),
         url('../fonts/pressstart2p-webfont.svg#press_start_2pregular') format('svg');
    font-weight: normal;
    font-style: normal;

}