html, body {
    background-color: #ffffff;
}

.white-bg {
    background-color: #ffffff;
    font-weight: bold;
}

.uppercase {
    text-transform: uppercase;
}

#header {
    background-color: #000000;
    color: #fff;
}

.header-title, .header-separator, .header-subtitle {
    color: #fff;
    text-transform: uppercase;
}

.header-title {
    font-weight: bold;
}

.header-separator, .header-subtitle {
    font-weight: normal;
}

#activity_area {
    background-color: #333333;
}

#workspace_container {
    background-color: #ECECEC;
}

.card {
    cursor: pointer;
    border-color: #000099; /* #000099; */
    background-color: #ffffff;
}

    .zoomable {
        /* available cursors: http://www.w3schools.com/cssref/pr_class_cursor.asp */
        cursor: url(../img/magnify.cur), pointer;
    }

.zoom-button {
    background-color: #000000;
    color: #ffffff;
}

.arrow {
    cursor: pointer;
}

#controls_container, #controls, #arrow_container {
    background-color: #ccffff;
}

/* fonts */
body {
    font-family: Helvetica, Arial, Sans-Serif;
}

h1, h2, h3 {
    font-weight: bold;
}