/*
 * Copyright (C) 2012-2016 InSeven Limited.
 *
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the GNU General Public License
 * as published by the Free Software Foundation; either version 2
 * of the License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program; if not, write to the Free Software
 * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 */

body {
    padding: 0;
    margin: 0;
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: #000;
    font-family: -apple-system, Helvetica, sans-serif;
    font-size: 15px;
    cursor: default;
}

#display {
    position: relative;
    margin: auto;
    width: 320px;
    height: 288px;
}

.display {
    position: absolute;
    top: 0;
    left: 0;
    width: 320px;
    height: 288px;
    background-color: #fff;
    background-size: 320px 288px;
}

#moulding {
    position: absolute;
    top: 42px;
    left: 0;
    display: -webkit-flex;
    width: 100%;
    height: 100%;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.16)));
}

#moulding-left {
    -webkit-flex-grow: 1;
    height: 100%;
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.04)));
}

#moulding-center {
    -webkit-flex-grow: 3;
    height: 100%;
}

#moulding-right {
    -webkit-flex-grow: 1;
    height: 100%;
    background-image: -webkit-gradient(linear, right top, left top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.04)));
}

.element-surround {
    position: absolute;
    top: 42px;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
}

.surround {
    background-color: #111;
    border: 1px solid #000;
    border-bottom: 1.5px solid #000;
    margin: 0 auto;
    height: 338px;
    box-shadow: 0 2px 2px rgba(255, 255, 255, 0.08), inset 0 -2px 3px rgba(255, 255, 255, 0.03);
    width: 370px;
    border-radius: 12px;
    border-bottom-left-radius: 100% 30px;
    border-bottom-right-radius: 100% 30px;
    position: relative;
    overflow: hidden;
}

.surround:before {
    content: "";
    position: absolute;
    height: 200%;
    width: 200%;
    background-color: rgba(255, 255, 255, 0.1);
    top: 40%;
    left: 0;
    -webkit-transform:rotate(-15deg);
}

#LCD {
    image-rendering: -webkit-optimize-contrast;
}

#LCD-dropshadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 320px;
    height: 288px;
    box-shadow:
        0 0.5px 0.5px rgba(0, 0, 0, 0.4),
        inset 0px 3px 10px rgba(0, 0, 0, 0.4);
}

#STATUS {
    display: none;
}

.button {
    width: 58px;
    height: 58px;
    cursor: pointer;
    border-radius: 31px;
    background-color: #4a4a4a;
    display: block;
    background-color: #f7f7f7;
    background-image: -webkit-linear-gradient(top, #262626, #000000);
    color: #000000;
    text-shadow: #313131 0px 1px;
    position: relative;
    text-align: center;
    font-size: 34px;
    box-shadow:
        0 3px 7px rgba(0, 0, 0, 0.35),
        inset 0 2px 0 #676767;
    border: 2px solid black;
    border-top: 1px solid black;
}

.button-option-group {
    width: 60px;
}

.left {
    position: absolute;
    left: 0;
}

.right {
    position: absolute;
    right: 0;
}

.top {
    position: absolute;
    top: 0;
}

.bottom {
    position: absolute;
    bottom: 0;
}

.button-option {
    margin: 0 auto;
    width: 40px;
    height: 16px;
    background: black;
    border-radius: 45%;
    box-shadow:
        0 -1px 3px #1b1b1b,
        inset 0 4px 8px rgba(103, 103, 103, 0.51);
    border: 2px solid black;
    border-top: 1px solid black;
}

.button-label {
    opacity: 0.3;
    text-shadow: 0 -1px #777;
    font-size: 14px;
    margin-top: 8px;
    text-transform: uppercase;
    margin: 4px auto;
    text-align: center;
}

#group-buttons {
    position: relative;
    height: 115px;
    width: 142px;
    background-size: 132px 115px;
    margin: auto;
}

#group-options {
    position: relative;
    width: 140px;
    height: 50px;
    margin: auto;
}

#control-a {
    position: absolute;
    top: 5px;
    right: 3px;
}

#control-b {
    position: absolute;
    bottom: 9px;
    left: 3px;
}

.control-text {
    position: absolute;
    bottom: 6px;
    left: 14px;
}

#control-dpad {
    width: 128px;
    height: 128px;
    background-size: 128px 128px;
    margin: auto;
}

.navigation-bar {
    position: absolute;
    height: 44px;
    display: flex;
    top: 0;
    left: 0;
    width: 100%;
}

.navigation-button {
    height: 44px;
    line-height: 44px;
    cursor: pointer;
    font-size: 16px;
    color: #d9d9d9;
    opacity: 0.6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    margin: 0 12px;
    flex-grow: 1;
}

.library-navigation-bar {
    position: fixed;
    border-radius: 12px 12px 0 0;
    background-color: rgba(39, 39, 39, 0.9);
}

.button-account, .button-back {
    text-align: left;
}

.button-right {
    text-align: right;
}

.button-library {
    opacity: 0.5;
    text-transform: uppercase;
    color: black;
}

.button-done {
    padding-right: 22px;
}

.button-done:after, .button-done:before {
    content: "";
    width: 16px;
    height: 3px;
    background-color: #d9d9d9;
    position: absolute;
    right: 0;
}

.button-done:after {
    -webkit-transform:rotate(45deg);
    top: 15.75px;
}

.button-done:before {
    -webkit-transform:rotate(-45deg);
    top: 25.25px;
}

.button-back {
    padding-left: 22px;
}

.button-back:after, .button-back:before {
    content: "";
    width: 16px;
    height: 3px;
    background-color: black;
    position: absolute;
    left: 0;
}

.button-back:after {
    -webkit-transform:rotate(-45deg);
    top: 15.75px;
}

.button-back:before {
    -webkit-transform:rotate(45deg);
    top: 25.25px;
}

#debug {
    height: 20px;
    width: 100px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: black;
    color: white;
    opacity: 0.7;
    padding: 20px 0;
    text-align: center;
    width: 568px;
}

#screen-console {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: 0;
    transition: left 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    border-radius: 12px;
    box-shadow: inset 0 0 4px rgba(255, 255, 2555, 0.2);
}

#screen-console.disable-animation {
    transition: 0;
}

#screen-console.hidden {
    left: 100%;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.8);
}

.grape {
    background-color: #27358B;
}

.cherry {
    background-color: #D81E57;
}

.teal {
    background-color: #007FA0;
}

.lime {
    background-color: #A0D02E;
}

.yellow {
    background-color: #FECF41;
}

#list-games {
    position: absolute;
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

#list-games-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#list-games-page-control {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 36px;
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: center;
}

.page {
    width: 6px;
    height: 6px;
    background-color: white;
    border-radius: 50%;
    opacity: 0.5;
    margin: 5px;
}

.page.active {
    opacity: 1.0;
}

.simple-button {
    border: 2px solid #fff;
    border-radius: 8px;
    padding: 10px;
    text-decoration: none;
    color: #fff;
    cursor: pointer;
    display: block;
    margin: 4px;
    display: inline-block;
    min-width: 100px;
    text-align: center;
    margin: 8px 0;
}

#screen-games {
    background-color: #272727;
    background-size: 233px 133px;
    border-radius: 12px;
}

.screen-games-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #272727;
    border-radius: 12px;
}

/* Settings dialog */

.settings {
    transition: background-color 150ms ease-in-out;
    background-color: rgba(0, 0, 0, 0.4);
}

.settings.hidden {
    transition: background-color 150ms ease-in-out;
    background-color: rgba(0, 0, 0, 0.0);
}

.dialog {
    transition: 150ms ease-in-out;
    width: 300px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

.settings.hidden .dialog {
    transition: 150ms ease-in-out;
    opacity: 0.0;
    transform: scale(1.1, 1.1);
}

.dialog-layout-container {
    display: flex;
    flex-direction: column;
}

.dialog-margin {
    flex-grow: 1;
}

.dialog-title, .dialog-button {
    text-align: center;
    padding: 12px;
}

.dialog-title, .dialog-row, .dialog-button {
    background-color: rgba(255, 255, 255, 0.95);
}

.dialog-title {
    font-weight: bold;
    border-radius: 16px 16px 0 0;
}

.dialog-body {
    overflow-y: scroll;
}

.dialog-button {
    color: #0076ff;
}

.dialog-button.default {
    font-weight: bold;
    border-radius: 0 0 16px 16px;
}

.dialog-button.pressed {
    background-color: rgba(144, 142, 144, 0.9);
}

.dialog-divider {
    height: 0.5px;
}

.dialog-row {
    display: flex;
    height: 42px;
    line-height: 42px;
}

.dialog-row-label, .dialog-row-detail-label {
    flex-grow: 1;
    padding: 0 12px;
}

.dialog-row-label {
    font-weight: bold;
}

.dialog-row-detail-label {
    text-align: right;
}

/* Color picker */

#console-color li, #console-color li:first-child, #console-color li:last-child {
    border-radius: 2px;
    margin: 2px 4px;
    border: 2px solid transparent;
    width: 20px;
    border: 0;
}

#console-color li:last-child {
    margin-right: 2px;
}

#console-color li:first-child {
    margin-left: 2px;
}

#console-color li.selected, #console-color li.pressed {
    border-radius: 4px;
    margin: 0 2px;
}

#console-color li.pressed {
    border: 2px solid #d8ecff;
}

#console-color li.selected {
    border: 2px solid #0076ff;
}

#console-color li:last-child.selected, #console-color li:last-child.pressed {
    margin-right: 0;
}

#console-color li:first-child.selected, #console-color li:first-child.pressed {
    margin-left: 0;
}

#console-color li.grape.selected, #console-color li.grape.pressed {
    background-color: #27358B;
}

#console-color li.cherry.selected, #console-color li.cherry.pressed {
    background-color: #D81E57;
}

#console-color li.teal.selected, #console-color li.teal.pressed {
    background-color: #007FA0;
}

#console-color li.lime.selected, #console-color li.lime.pressed {
    background-color: #A0D02E;
}

#console-color li.yellow.selected, #console-color li.yellow.pressed {
    background-color: #FECF41;
}

#screen-loading {
    width: 100%;
    height: 100%;
}

#screen-empty h1 {
    font-size: 20px;
}

#screen-empty em {
    color: #999;
    font-style: normal;
}

#screen-empty a {
    color: #fff;
}

.screen-splash, .screen-instructions {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
}

.screen-instructions {
    font-size: 22px;
    background-color: #222;
}

.appicon {
    width: 200px;
    height: 200px;
    margin-bottom: 12px;
    background-size: 200px 200px;
    border-radius: 40px;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
    display: inline-block;
    background-image: url(images/icon-large.png);
}

.apptitle {
    font-size: 1.6em;
    margin-top: 0;
}

.install-instructions {
    text-align: left;
}

.install-instructions > li {
    margin-bottom: 10px;
}

.placeholder, .placeholder-small {
    color: #d9d9d9;
    text-align: center;
    padding: 40px;
    margin: auto;
}

.placeholder-small {
    padding: 20px;
}

.screen-instructions .placeholder, .screen-instructions .placeholder-small {
    background-color: #222;
}

hr {
    border: 0;
    background-color: #888;
    height: 2px;
    width: 80%;
    border-radius: 2px;
    margin-bottom: 18px;
}

.sign-in-button {
    background-size: 24px 24px;
    background-image: url(images/drive.png);
    background-repeat: no-repeat;
    padding-left: 36px;
    background-position: 20px center;
}

.body-grey {
    background-color: #222;
}

.screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.title-button {
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#707070), to(#1C1C1C));
    border-radius: 4px;
    border: 1px solid black;
    height: 32px;
    width: 598px;
}

.title {
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4A4A4A), to(#000000));
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    color: white;
    z-index: 20;
}

.title h3 {
    margin-top: 11px;
}

#control-games-scroll {
    position: absolute;
    top: 44px;
    left: 0;
    height: 300px;
    width: 300px;
}

#control-games-list {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
}

.table {
    list-style: none;
    padding: 0;
    margin: 0;
}

.table li {
    height: 88px;
    border-bottom: 1px solid #ccc;
}

#instructions {
    color: white;
    padding: 40px;
    text-align: center;
}

#instructions a {
    color: #666;
    text-decoration: none;
}

.license {
    color: #666;
    text-decoration: none;
}

#update-button {
    position: absolute;
    background-color: rgb(64, 64, 189);
    color: white;
    border-radius: 4px;
    padding: 2px;
    text-align: center;
    width: 110px;
    height: 13px;
    left: 5px;
    bottom: 12px;
    text-transform: uppercase;
    font-size: 11px;
}

/* D-Pad */

.dpad-touch-target {
    width: 160px;
    height: 160px;
    position: relative;
}

.dpad {
    position: absolute;
    top: 18px;
    left: 18px;
    width: 124px;
    height: 124px;
}

.dpad > .element {
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: blue;
    border: 2px solid black;
    border-top: 1px solid black;
}

.dpad > .up {
    top: 0;
    left: 40px;
}

.dpad > .down {
    bottom: 0;
    left: 40px;
}

.dpad > .left {
    top: 40px;
    left: 0;
}

.dpad > .right {
    top: 40px;
    right: 0;
}

.dpad > .center {
    top: 33%;
    left: 40px;
}

/* GBC */

#screen-console.theme-gbc .dpad > .top {
    background-image: -webkit-linear-gradient(top, #2D2D2D, #1E1E1E);
}

#screen-console.theme-gbc .dpad > .middle {
    background-image: -webkit-linear-gradient(top, #1E1E1E, #0A0A0A);
}

#screen-console.theme-gbc .dpad > .bottom {
    background-image: -webkit-linear-gradient(top, #0A0A0A, #000000);
}

#screen-console.theme-gbc .dpad > .up {
    border-radius: 6px 6px 0 0;
    border-bottom: 0;
    box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.35), inset 0 2px #676767;
}

#screen-console.theme-gbc .dpad > .down {
    border-radius: 0 0 6px 6px;
    border-top: 0;
    box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.35);
}

#screen-console.theme-gbc .dpad > .left {
    border-radius: 12px 0 0 12px;
    border-right: 0;
    box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.35), inset 0 1px #676767;
}

#screen-console.theme-gbc .dpad > .right {
    border-radius: 0 12px 12px 0;
    border-left: 0;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.35), inset 0 1px #676767;
}

#screen-console.theme-gbc .dpad > .arrow:before {
    position: absolute;
    content:"";
    left: 0;
    top: 0;
    opacity: 0.2;
    text-shadow: 0 1px #777;
    color: #000;
    font-size: 20px;
    line-height: 44px;
    width: 100%;
    height: 100%;
    text-align: center;
}

#screen-console.theme-gbc .dpad > .up:before {
    content: "\25B2\FE0E";
}

#screen-console.theme-gbc .dpad > .down:before {
    content:"\25BC\FE0E";
}

#screen-console.theme-gbc .dpad > .left:before {
    content:"\25C0\FE0E";
}

#screen-console.theme-gbc .dpad > .right:before {
    content:"\25B6\FE0E";
}

#screen-console.theme-gbc .dpad > .center {
    border: 0;
    width: 42px;
    height: 42px;
}

#screen-console.theme-gbc .dpad > .center:before {
    position: absolute;
    height: 24px;
    width: 24px;
    content:"";
    border-radius: 100%;
    top: 8px;
    left: 8px;
    background-image: -webkit-linear-gradient(top, #000, #888);
    box-shadow: 0 2px 0 #ccc;
    opacity: 0.2;
}

#element-dpad {
    position: absolute;
    left: 8px;
    bottom: 100px;
}

#element-buttons {
    position: absolute;
    right: 20px;
    bottom: 120px;
}

#element-options {
    position: absolute;
    width: 100%;
    bottom: 10px;
    left: 0;
}

#element-screen {
    position: absolute;
    width: 100%;
    top: 62px;
    left: 0;
}

#screen-console-container {
    overflow: hidden;
    width: 375px;
}

.input-code {
    width: 80%;
    font-size: 30px;
    border: 3px solid #fff;
    background-color: #999;
    border-radius: 6px;
    margin: 8px 0;
    color: #fff;
    padding: 8px;
    border: 0;
    font-size: 20px;
    background-color: #666;
    margin: 8px 0;
    color: #fff;
    padding: 8px;
    border-radius: 6px;
    font-family: Courier, fixed;
    text-align: center;
    max-width: 300px;
}

.input-code:focus {
    outline: none;
    background-color: #888;
}

.authorization-code {
    font-size: 20px;
    background-color: #666;
    margin: 8px 0;
    color: #fff;
    padding: 8px;
    border-radius: 6px;
    font-family: Courier, fixed;
    text-align: center;
    word-wrap: break-word;
    cursor: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    -moz-user-select: text;
    user-select: text;
    border: 0;
    width: 200px;
}

.authorization-code:focus {
    outline: none;
}

/* Large screen customizations */
@media only screen and (min-width: 768px) {

    #display, .display, #LCD-dropshadow {
        width: 640px;
        height: 576px;
        background-size: 640px 576px;
    }

    #moulding {
        top: 0;
    }

    .surround {
        height: 624px;
        width: 678px;
    }

}