/*TODO: all of these hardcoded pixel values can't be good for various devices*/

/*colors*/
/*======*/
/* mustard */
/* color: #E8BF6A R: 232 G: 191 B: 106; */

/* slate blue */
/*color: #579BBD;*/

/* green */
/* color: #6CAA60; */

/* red */
/* color: R: 218 G: 73 B: 57 */

/* white */
/* color: #E6E1DC R: 230 G: 225 B: 220 */

body {
    background: #2B2B2B;
    color: #579BBD;
}

a:link {
    color: #579BBD;
}

a:visited {
    color: #579BBD;
}

a:hover {
    color: #E6E1DC;
}

a:active {
    color: #E6E1DC;
}

div {
    font-family: 'Permanent Marker', sans-serif;
}

#ui div {
    padding-left: 48px;
    padding-bottom: 4px;
    font-size: 2.0em;
    height: 48px;
    width: 246px;
    margin: auto;
}

#peopleCount {
    background: url(../img/left.permarker.png) no-repeat;
}

#endTime {
    background: url(../img/end.permarker.png) no-repeat;
}

#personRemaining {
    background: url(../img/per.permarker.png) no-repeat;
}

#data {
    float: left;
    width: 150px;
    text-align: center;
    vertical-align: middle;
}

#increment {
    width: 48px;
    height: 48px;
    background: url(../img/add.permarker.png) no-repeat;
    float: left;
}

#decrement {
    width: 48px;
    height: 48px;
    background: url(../img/remove.permarker.png) no-repeat;
    float: left;
}

#start {
    width: 48px;
    height: 48px;
    background: url(../img/play.permarker.png) no-repeat;
    float: left;
}

#stop {
    width: 48px;
    height: 48px;
    background: url(../img/pause.permarker.png) no-repeat;
    float: left;
}

#footer {
    padding-top: 100px;
    float: left;
    clear: left;
    text-align: center;
    width: 100%;
}