body {
    margin : 0;
    background-color: #000000;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-text-size-adjust: none;
    -webkit-user-select : none;
}

/**
    GAME
*/
#game {
    font-family : "Lithos Regular";
    position : absolute;
    left : 0;
    top : 0;
    font-size : 64px;
    width : 8em;
    height : 12em;
    background-color : rgb(45,123,149);
    color : rgb(200,200,100);
}

.item-size {
    font-size : 64px;
}

#item-proto {
    position : absolute;
    width : 1em;
    height : 1em;
    left : -1000px;
}

#game .screen {
    position : absolute;
    width : 100%;
    height : 100%;
    display : none;
    z-index : 10;
}

#game .screen.active {
    display : block;
}


#splash-screen {
    text-align : center;
    padding-top : 2.5em;
}
#splash-screen .continue {
    cursor : pointer;
    margin-top: 2.5em;
    font-size : 0.5em;
    display : none;
}
.logo {
    font-family : "Lithos Black";
    font-size : 1.5em;
    line-height : 0.9em;
    margin : 0;
    text-align : center;
    color : rgb(255,204,0);
    text-shadow : 0.03em 0.03em 0.03em rgb(70, 70, 70),
                 -0.03em -0.03em 0.03em rgb(70, 70, 70),
                  0.00em 0.00em 0.3em rgb(255, 255, 255);
}
.no-textshadow .logo {
    filter : dropshadow(color=#000000,offX=3,offY=3);
}

/* Main menu styles */
#main-menu {
    padding-top : 0.6em;
}
#main-menu .logo{
    font-size : 1.3em;
}

ul.menu {
    text-align : center;
    margin : 0;
    padding : 0;
    list-style : none;
}

ul.menu li {
    margin : 0.6em 0;
}

ul.menu li button {
    font-family : "Lithos Regular";
    font-size : 0.6em;
    line-height: 1em;
    margin-bottom: 0.1em;
    cursor: pointer;
    color : rgb(200, 200, 100);
    width : 10em;
    height : 1.5em;
    background : rgb(41, 91, 117);
    border : 0.1em solid rgb(200, 200, 100);
    border-radius : 0.5em;
    -webkit-box-shadow : 0.2em 0.2em 0.3em rgb(0,0,0);
    -moz-box-shadow : 0.2em 0.2em 0.3em rgb(0,0,0);
    box-shadow : 0.2em 0.2em 0.3em rgb(0,0,0);
}

ul.menu li button:hover {
    background : rgb(36, 59, 83);
}

ul.menu li button:active {
    color : rgb(255,204,0);
    background : rgb(26, 34, 52);
}

/* Install screen for iOS devices */
#install-screen  {
    padding-top : 2em;
    text-align : center;
}
#install-screen div {
    margin-top: 1em;
}

#install-screen span {
    font-size: 0.6em;
    width: 12em;
    display: block;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0.5em;
}

#install-screen #metrics {
    font-style: normal;
}

/* Progress bar */
.progress {
    margin : 0 auto;
    width : 6em;
    height : 0.5em;
    border-radius : 0.5em;
    overflow : hidden;
    border : 1px solid rgb(200,200,100);
}

.progress .indicator {
    background-color : rgb(200,200,100);
    height : 100%;
    width : 0%;
}

.progress .indicator.alert {
    background-color : rgb(200, 0, 0);
    height : 100%;
    width : 0%;
}

/* Background */
#game .background {
    position : absolute;
    left : 0;
    top : 0;
    width : 100%;
    height : 100%;
    z-index : 0;
}

#game .background canvas {
    width : 100%;
    height : 100%;
}


/* Game screen */
#game-screen .game-board {
    position : relative;
    width : 8em;
    height : 8em;
}

#game-screen .game-board .board-bg,
#game-screen .game-board .board {
    position : absolute;
    width : 100%;
    height : 100%;
}

#game-screen .game-board .board {
    z-index : 10;
}

#game-screen .game-board .board-bg {
    z-index : 0;
}

/* Game screen - DOM */
#game-screen .game-board .dom-container {
    position : absolute;
    width : 100%;
    height : 100%;
    z-index: 10;
}

#game-screen .game-board .dom-container .item {
    position : absolute;
    width : 1em;
    height : 1em;
    overflow : hidden;
}

#game-screen .game-board .board-bg div {
    position : absolute;
    width : 1em;
    height : 1em;
    background-color : rgba(225,235,255,0.15);
}


/* Game screen - Game state */
#game-screen .game-info {
    width : 100%;
    float : left;
}

#game-screen .game-info label {
    display : inline-block;
    height : 1.5em;
    float : left;
    font-size : 0.6em;
    padding : 0.25em;
}

#game-screen .game-info .score {
    float : right;
}

#game-screen .time {
    height : 0.25em;
    border-radius : 0.5em;
}

#game-screen .time .indicator {
    width : 100%;
}

/* Game screen - Announcement */
#game-screen .announcement {
    position : absolute;
    left: 0;
    top : 50%;
    margin-top : -0.5em;
    width : 100%;
    font-size: 1.35em;

    color : rgb(255,204,0);
    text-shadow : 1px 1px 2px rgb(0, 0, 0),
    -1px -1px 2px rgb(0, 0, 0),
    5px 8px 8px rgb(34, 72, 96);

    /*color : rgb(150,150,75);
    text-shadow : 0.03em 0.03em 0.03em rgb(255,255,0),
    -0.03em -0.03em 0.03em rgb(255,255,0),
    0.1em 0.15em 0.15em rgb(0,0,0);*/
    text-align : center;
    white-space : nowrap;

    z-index : 20; /* in front of everything else */
    opacity : 0; /* start out transparent */
    cursor : default;
}

.no-textshadow  #game-screen .announcement {
    filter: glow(color=#ffff00,strength=1),
    dropshadow(color=#000000,offX=3,offY=3);
}

/* Announcement animation */
/* Keyframes for webkit */
@-webkit-keyframes fadeout {
    0% {
        opacity : 1;
        -webkit-transform : scale(0.5);
    }
    25% { /* stay at full opacity for a bit */
        opacity : 1;
    }
    100% { /* and then fade to 0 */
        opacity : 0;
        -webkit-transform : scale(1.5);
    }
}
/* Keyframes for webkit */
@-moz-keyframes fadeout {
    0% {
        opacity : 1;
        -moz-transform : scale(0.5);
    }
    25% { /* stay at full opacity for a bit */
        opacity : 1;
    }
    100% { /* and then fade to 0 */
        opacity : 0;
        -moz-transform : scale(1.5);
    }
}
/* zoom-fade animation class */
.fadeout {
    -webkit-animation-name : fadeout;
    -webkit-animation-duration : 2s;
    -moz-animation-name : fadeout;
    -moz-animation-duration : 2s;
}

/* Announcement animation */
/* Keyframes for webkit */
@-webkit-keyframes fadein {
    0% {
        opacity : 0;
        -webkit-transform : scale(0.5);
    }
    100% { /* and then fade to 0 */
        opacity : 1;
        -webkit-transform : scale(1);
    }
}
/* Keyframes for webkit */
@-moz-keyframes fadein {
    0% {
        opacity : 0;
        -moz-transform : scale(0.5);
    }
    100% {
        opacity : 1;
        -moz-transform : scale(1);
    }
}
/* zoom-fade animation class */
.fadein {
    -webkit-animation-name : fadein;
    -webkit-animation-duration : 0.5s;
    -moz-animation-name : fadein;
    -moz-animation-duration : 0.5s;
}

/* Fallback for browsers without CSS animations */
.no-cssanimations #game-screen .announcement {
    display : none;
}
#game-screen .announcement.active {
    opacity : 1;
    display : block;
}


/* Game screen footer */
#game-screen footer {
    display : block;
    position : absolute;
    bottom : 0;
    height : 1.25em;
    width : 100%;
}

.screen footer button {
    cursor: pointer;
    margin-left : 0.25em;
    font-family: "Lithos Regular";
    margin-left: 0.25em;
    padding: 0.2em 0.75em 0 0.75em;
    font-size: 0.4em;
    height: 1.4em;

    color : rgb(200, 200, 100);
    background : rgb(41, 91, 117);
    border : 1px solid rgb(200, 200, 100);
    border-radius : 0.2em;
}

/* Game screen pause overlay */
#game-screen .pause-overlay {
    display : none;
    position : absolute;
    left : 0;
    top : 0;
    width : 100%;
    height : 100%;
    z-index : 100;
    background : rgba(40,40,40,0.5);
}

#game-screen .alert-overlay {
    opacity : 0;
    position : absolute;
    left : 0;
    top : 0;
    width : 8em;
    height : 8em;
    z-index : 1;
    background : rgba(255, 0, 0, 0.5);
}
.active-alert {
    opacity : 1 !important;
}
.alert-fade {
    -webkit-animation-name : alert-fade;
    -webkit-animation-duration : 1.5s;
    -moz-animation-name : alert-fade;
    -moz-animation-duration : 1.5s;
}
@-webkit-keyframes alert-fade {
    0% {
        opacity : 0;
    }
    50% {
        opacity : 1;
    }
    100% {
        opacity : 0;
    }
}
@-moz-keyframes alert-fade {
    0% {
        opacity : 0;
    }
    50% {
        opacity : 1;
    }
    100% {
        opacity : 0;
    }
}

/* High score */
#hiscore h2 {
    margin-top : 0.6em;
    font-size : 1.2em;
}
#hiscore .difficulty {
    font-size : 0.7em;
    list-style-type: none;
    padding-left: 2em;
    margin: 0;
}
#hiscore li {
    float: left;
}
#hiscore .difficulty button {
    font-family: "Lithos Regular";
    margin-left: 0.25em;
    padding: 0.2em 0.75em 0 0.75em;;
    font-size: 0.5em;
    height: 1.4em;
    cursor: pointer;

    color : rgb(200, 200, 100);
    background : rgb(41, 91, 117);
    border : 1px solid rgb(200, 200, 100);
    border-radius : 0.2em;
}
#hiscore .difficulty .active.easy {
    color : rgb(41, 91, 117);
    background : rgb(155, 200, 102);
    border : 1px solid rgb(41, 91, 117);
    border-radius : 0.2em;
}
#hiscore .difficulty .active.normal {
    color : rgb(41, 91, 117);
    background : rgb(200, 200, 100);
    border : 1px solid rgb(41, 91, 117);
    border-radius : 0.2em;
}
#hiscore .difficulty .active.hard {
    color : rgb(41, 91, 117);
    background : rgb(200, 127, 129);
    border : 1px solid rgb(41, 91, 117);
    border-radius : 0.2em;
}
#hiscore ol.score-list {
    font-size : 0.55em;
    width : 75%;
    margin : 10% 10% 0 10%;
}

#hiscore ol.score-list li {
    width : 100%;
}

#hiscore ol.score-list li span:nth-child(1) {
    display : inline-block;
    width : 70%;
}
#hiscore ol.score-list li span:nth-child(2) {
    display : inline-block;
    width : 30%;
    text-align : right;
}


/* Settings */
#settings h2 {
    margin-top : 0.6em;
    font-size : 1.2em;
}
#settings ul {
    font-size : 0.7em;
    list-style-type: none;
    padding: 0.5em;
}
#settings li {
    position: relative;
}
#settings label {
    font-size : 0.75em;
}
#settings ul button {
    position: absolute;
    top: 0.5em;
    right: 0;

    font-family: "Lithos Regular";
    margin-left: 0.25em;
    padding: 0.2em 0.75em 0 0.75em;;
    font-size: 0.5em;
    height: 1.4em;
}
#settings .off {
    color : rgb(200, 200, 100);
    background : rgb(41, 91, 117);
    border : 1px solid rgb(200, 200, 100);
    border-radius : 0.2em;
}
#settings .on {
    color: rgb(41, 91, 117);
    background: rgb(200, 200, 100);
    border: 1px solid rgb(41, 91, 117);
    border-radius: 0.2em;
}
#settings .easy {
    color : rgb(41, 91, 117);
    background : rgb(155, 200, 102);
    border : 1px solid rgb(41, 91, 117);
    border-radius : 0.2em;
}
#settings .normal {
    color : rgb(41, 91, 117);
    background : rgb(200, 200, 100);
    border : 1px solid rgb(41, 91, 117);
    border-radius : 0.2em;
}
#settings .hard {
    color : rgb(41, 91, 117);
    background : rgb(200, 127, 129);
    border : 1px solid rgb(41, 91, 117);
    border-radius : 0.2em;
}

/** About */
#about h2 {
    margin-top : 0.6em;
    font-size : 1.2em;
}
#about div {
    font-size: 0.35em;
    width: 80%;
    margin: auto;
}