/* the css i guess (yeah, it's a bit messy... but it works i guess :) ) */

@font-face {
    font-family: 'gotham_boldregular';
    src: url("/website/fonts/Gotham-Bold-webfont.eot");
    src: url("/website/fonts/Gotham-Bold-webfont.eot#iefix") format("embedded-opentype"),url("/website/fonts/Gotham-Bold-webfont.woff2") format("woff2"),url("/website/fonts/Gotham-Bold-webfont.woff") format("woff"),url("/website/bundle/res/fonts/Gotham-Bold-webfont.ttf") format("truetype"),url("/website/fonts/Gotham-Bold-webfont.svg#gotham_bookregular") format("svg");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'gotham_bookregular';
    src: url("/website/fonts/Gotham-Book-webfont.eot");
    src: url("/website/fonts/Gotham-Book-webfont.eot#iefix") format("embedded-opentype"),url("/website/fonts/Gotham-Book-webfont.woff2") format("woff2"),url("/website/fonts/Gotham-Book-webfont.woff") format("woff"),url("/website/fonts/Gotham-Book-webfont.ttf") format("truetype"),url("/website/fonts/Gotham-Book-webfont.svg#gotham_bookregular") format("svg");
    font-weight: normal;
    font-style: normal
}


body {
    background-image: url("/website/assets/img/picture-blue.svg");
    background-size: cover;
}

h1 {
    font-family: gotham_boldregular,monospace;
    color: #ffffff;
    font-size: 50px;
    text-align: center;
}

p {
    font-family: gotham_bookregular,monospace;
    color: #ffffff;
    font-size: 20px;
    text-align: center;
}

a {
    text-decoration: none;
    color: #ffffff;
}

a.hyperlink {
    color: #ffffff;
    font-weight: bold;
    font-family: gotham_boldregular,monospace;
    font-size: 20px;
    text-decoration: underline;
}

/* scrapped button */

/*.bbciplayer-button-wii {
    background-image: url("/website/assets/img/wiiplayerButton.svg");
    width: 500px;
    height: 100px;
    border: none;
    margin: 10px 130px;

}

.bbciplayer-button-wii:hover {
    background-image: url("/website/assets/img/wiiplayerButtonSel.svg");
    width: 500px;
    height: 100px;
    border: none;
}

*/

.bbciplayer-button-wii {
    background-color: rgb(187, 0, 140);
    border: 2px solid transparent;
    border-radius: 0;
    color: #000000;
    cursor: pointer;
    min-height: 1px;
    padding: 10px;
    text-transform: lowercase;
    color: #ffffff;
    font-weight: bold;
    font-family: gotham_boldregular,monospace;
    font-size: 19px;
    box-shadow: 0 3px 5px rgba(0,0,0,0.473);
    text-transform: uppercase;
}

.bbciplayer-button-wii:hover {
    border-color: #610051;
}

.bbciplayer-button-wii:active {
    -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.473);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.473);
}

.kar-button {
    background-color: rgb(0, 159, 187);
    border: 2px solid transparent;
    border-radius: 0;
    color: #000000;
    cursor: pointer;
    min-height: 1px;
    padding: 10px;
    text-transform: lowercase;
    color: #ffffff;
    font-weight: bold;
    font-family: gotham_boldregular,monospace;
    font-size: 19px;
    box-shadow: 0 3px 5px rgba(0,0,0,0.473);
    text-transform: uppercase;
    justify-content: center;
}

.kar-button-disabled {
    opacity: 0.5;
    background-color: rgb(0, 97, 114);
    border: 2px solid transparent;
    border-radius: 0;
    cursor: pointer;
    min-height: 1px;
    padding: 10px;
    text-transform: lowercase;
    color: #ffffff;
    font-weight: bold;
    font-family: gotham_boldregular,monospace;
    font-size: 19px;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.473);
    text-transform: uppercase;
    justify-content: center;
}

.kar-button:hover {
    border-color: #005e61;
}

.kar-button:active {
    -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.473);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.473);
}

.button-header {
    background-color: #ffffff23;
    color: #ffffff;
    list-style-type: none;
    margin: 10px auto;
    padding: 5px;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.404);
    max-width: 570px;
}

.announcement-header {
    background-color: #d43838;
    color: #ffffff;
    list-style-type: none;
    margin: 10px auto;
    padding: 5px;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.562);
}

.announcement {
    font-family: gotham_boldregular, monospace;
    font-size: 12px;
    color: #ffffff;
    text-align: center;
}

.heading {
    background-color: #ffffff23;
    color: #ffffff;
    list-style-type: none;
    margin: 10px auto;
    padding: 5px;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.404);
    max-width: 800px;
}

.heading-img {
    background-color: #ffffff23;
    color: #ffffff;
    list-style-type: none;
    margin: 10px auto;
    padding: 5px;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.404);
}

.WiiPlayerImage {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.karstore {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
}

.karlogo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 20%;
}
/* specific buttons */
/* selected means the user is already on that section. */

/* GREEN */
.button-green-selected {
    box-shadow: inset 0 3px 5px rgba(0,0,0,0.473);
    background-color: rgb(125, 179, 0);
    border: 2px solid transparent;
    border-radius: 0;
    color: #000000;
    cursor: pointer;
    min-height: 1px;
    padding: 10px;
    text-transform: lowercase;
    color: #ffffff;
    font-weight: bold;
    font-family: gotham_boldregular,monospace;
    font-size: 19px;
}
.button-green {
    background-color: rgb(131, 187, 0);
    border: 2px solid transparent;
    border-radius: 0;
    color: #000000;
    cursor: pointer;
    min-height: 1px;
    padding: 10px;
    text-transform: lowercase;
    color: #ffffff;
    font-weight: bold;
    font-family: gotham_boldregular,monospace;
    font-size: 19px;
    box-shadow: 0 3px 5px rgba(0,0,0,0.473);
}

.button-green:active {
    -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.473);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.473);
}

.button-green:hover {
    border-color: #376100;
}


/* BLUE */

.button-blue {
    background-color: rgb(0, 59, 187);
    border: 2px solid transparent;
    border-radius: 0;
    color: #000000;
    cursor: pointer;
    min-height: 1px;
    padding: 10px;
    text-transform: lowercase;
    color: #ffffff;
    font-weight: bold;
    font-family: gotham_boldregular,monospace;
    font-size: 19px;
    box-shadow: 0 3px 5px rgba(0,0,0,0.473);
}

.button-blue-selected {
    background-color: rgb(0, 59, 187);
    border: 2px solid transparent;
    border-radius: 0;
    color: #000000;
    cursor: pointer;
    min-height: 1px;
    padding: 10px;
    text-transform: lowercase;
    color: #ffffff;
    font-weight: bold;
    font-family: gotham_boldregular,monospace;
    font-size: 19px;
    box-shadow: inset 0 3px 5px rgba(0,0,0,0.473);
}

.button-blue:active {
    -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.473);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.473);
}

.button-blue:hover {
    border-color: #001a61;
}

/* RED */

.button-red {
    background-color: rgb(187, 0, 0);
    border: 2px solid transparent;
    border-radius: 0;
    color: #000000;
    cursor: pointer;
    min-height: 1px;
    padding: 10px;
    text-transform: lowercase;
    color: #ffffff;
    font-weight: bold;
    font-family: gotham_boldregular,monospace;
    font-size: 19px;
    box-shadow: 0 3px 5px rgba(0,0,0,0.473);
}

.button-red:active {
    -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.473);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.473);
}

.button-red:hover {
    border-color: #610000;
}

/* ORANGE */

.button-orange {
    background-color: rgb(187, 84, 0);
    border: 2px solid transparent;
    border-radius: 0;
    color: #000000;
    cursor: pointer;
    min-height: 1px;
    padding: 10px;
    text-transform: lowercase;
    color: #ffffff;
    font-weight: bold;
    font-family: gotham_boldregular,monospace;
    font-size: 19px;
    box-shadow: 0 3px 5px rgba(0,0,0,0.473);
}

.button-orange:active {
    -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.473);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.473);
}

.button-orange:hover {
    border-color: #612f00;
}