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

#container {
    width: 360px;
    margin: 0 auto 0 auto;
}

#field {
    position: relative;
    margin-top: 40px;
}

#volume-ctrl {
    margin-top: 20px;
    margin-bottom: 20px;
}

#entry, #show-past-matches {
    width: 160px;
    height: 40px;
    margin-right: 10px;
}

#player-name {
    width: 200px;
    height: 20px;
}

h1 {
    font-size: 20px;
    color: magenta;
    text-align: center;
}

.player-name {
    color: aqua;
    font-weight: bold;
}

.reason {
    color: yellow;
    font-weight: bold;
}

.result {
    color: magenta;
    font-weight: bold;
}

.my-turn {
    color: magenta;
    font-weight: bold;
}

.rival-turn {
    color: yellow;
    font-weight: bold;
}


#games-list-details, #past-matches-details {
    margin-bottom: 10px;
}

#past-matches, #games-list {
    height: 200px;
    margin-top: 10px;
    overflow-y: scroll;
}

.td-players {
    width: 240px;
    border: #fff solid 1px;
    padding: 5px 10px 5px 10px;
    text-align: center;
}

.td-button {
    width: 100px;
    border: #fff solid 1px;
    text-align: center;
}

.watch {
    width: 80px;
}

#past-match-controller {
    margin-bottom: 10px;
    display: none;
}

#prev, #next, #end {
    width: 60px;
    height: 40px;
    margin-right: 10px;
}
.color1 {
    color:yellow;
}
.color2 {
    color: magenta;
}
.color3 {
    color: aqua;
}

/*
.ctrl-buttons {
    position: absolute;
    width: 180px;
    height: 60px;
}
.main-link {
    margin-top: 0px;
    margin-bottom: 40px;
    line-height: 2;
}
.main-link-btn a:link,
.main-link-btn a:visited {
    font-size: 1em;
    font-weight: bold;
    border: solid 0px #000;
    box-shadow: 0 2px 4px rgba(000,000,000,0.5) inset;
    margin: 0 0px 5px;
    padding: 15px 30px 15px 30px;
    color: #fff !important;
    text-align: center;
    text-decoration: none !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.66);
    letter-spacing: 1px;
    line-height: 1.3;
    display: inline-block;
    border-radius: 5px;

    background-color:#555;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0 #555, 0 2px 3px rgba(0, 0, 0, 0.33);
}
.main-link-btn a:hover {
    background-color: lightgray;
}

#easy {
    top: 100px;
    left: 85px;
}
#start, #first, #medium {
    top: 180px;
    left: 85px;
}
#second, #hard {
    top: 260px;
    left: 85px;
}

#start, #first, #second, #easy, #medium, #hard {
    display: none;
}

*/