body {
    background-color: #000;
    color: #FFF;
}

#levels {
    position: absolute;
    width: 232;
    bottom: 0;
    left: 50%;
    margin-left: -116;
    border-style:solid;
    border-width:1px 1px 0px 1px;
    padding: 0 10px;
    opacity: 0;
    -webkit-transition:opacity 1s linear;
    transition:opacity 1s linear;
}

.controlPanel {
    position: absolute;
    width: 402px;
    top: -1px;
    left: 50%;
    margin-left: -201px;
    border-style:solid;
    border-width:1px;
    padding: 0 10px;
}

.time {
    z-index: 1;
    text-align:right;
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -300px;
    height: 600px;
    width: 300px;
    background-image:url('torch.png');
    background-repeat:no-repeat;
    background-position:top;
    -webkit-transition:height 1s linear;
    transition:height 1s linear;
} 

.hunger {
    z-index: 1;
    position: absolute;
    top: 50%;
    left: 10px;
    margin-top: -300px;
    height: 600px;
    width: 300px;
    background-image:url('ham.png');
    background-repeat:no-repeat;
    background-position:right top;
    -webkit-transition:height 1s linear;
    transition:height 1s linear;
}

.timeBackground {
    z-index: 0;
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -300px;
    height: 600px;
    width: 300px;
    background-image:url('torch2.png');
    background-repeat:no-repeat;
    background-position:top;
    -webkit-transition:height 1s linear;
    transition:height 1s linear;
} 

.hungerBackground {
    z-index: 0;
    position: absolute;
    top: 50%;
    left: 10px;
    margin-top: -300px;
    height: 600px;
    width: 300px;
    background-image:url('ham2.png');
    background-repeat:no-repeat;
    background-position:right top;
}

.gameMap {
    width: 1px;
    height: 1px;
    position: absolute;
    left: 50%;
    top: 50%;
    border-width: 0px;
    background-color: #000;
    transition:width 1s, height 1s;
	z-index: 100;
}

.gameMap > div {
    position: absolute;
    width: 35px;
    height: 35px;
    border-width: 0px;
    text-align: center;
    display: block;
}

.gameCharacter  {
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 0px;
    transition:top 1s linear, left 1s linear;
}

.hiddenCard {
    top: 0px;
    left: 0px;
    background-color: #000;
    opacity:0;
    -webkit-transition:top 1s, left 1s, opacity 1s, background-color 1s, -webkit-transform 1s;
    transition:top 1s, left 1s, opacity 1s, background-color 1s, transform 1s;
}

.card {
    background-color: #FFF;
    opacity:1;
    -webkit-transform:rotateY(180deg);
    transform:rotateY(180deg);
    -webkit-transition:top 1s, left 1s, opacity 1s, background-color 1s, -webkit-transform 1s;
    transition:top 1s, left 1s, opacity 1s, background-color 1s, transform 1s;
}

.hiddenCard > img {
    opacity:0;
    position: relative;
    top: 50%;
    margin-top: -10px;
    height: 20px;
    transition:opacity 1s;
}

.card > img {
    opacity:1;
    position: relative;
    top: 50%;
    margin-top: -10px;
    height: 20px;
    transition:opacity 0.5s ease 0.5s;
}

#arrow {
	margin-top: 0.3em;
    position: absolute;
	text-align: center;
    width: 100%;
}