/*  body {*/
/*  font-family: sans-serif;*/
/*  margin: 0 auto; text-align: center;*/
/*  background-color: #104068;*/
/*}*/
/*!* This is to be able to center the content in the middle of the page; *!*/
/*.container{width: 250px; height: 38px; margin: 100px auto;}*/

div label input {
    margin-right: 100px;
}

.cat {
    margin: 0;
    /*background-color: #104068;*/
    border-radius: 4px;
    border: 1px solid #fff;
    overflow: hidden;
    float: left;
}

.cat label {
    /*float: left; line-height: 3.0em;*/
    /*width: 8.0em; height: 3.0em;*/
}

.cat label span {
    text-align: center;
    /*padding: 3px 0;*/
    display: block;
}

.cat label input {
    position: absolute;
    display: none;
    color: #fff !important;
}

/* selects all of the text within the input element and changes the color of the text */
/*.cat label input + span{color: #fff;}*/
.cat label input + span {
    color: #000000;
}


/* This will declare how a selected input will look giving generic properties */
.cat input:checked + span {
    /*color: #ffffff;*/
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.6);
    text-decoration: underline;
    text-underline-color: blue;
}

/*
This following statements selects each category individually that contains an input element that is a checkbox and is checked (or selected) and chabges the background color of the span element.
*/

.action input:checked + span {
    background-color: #F75A1B;
}

.comedy input:checked + span {
    background-color: #1BB8F7;
}

.crime input:checked + span {
    background-color: #D9D65D;
}

.history input:checked + span {
    background-color: #82D44E;
}

.reality input:checked + span {
    background-color: #F3A4CF;
}

.news input:checked + span {
    background-color: #8C1B1B;
}

.scifi input:checked + span {
    background-color: #AC9BD1;
}

.sports input:checked + span {
    background-color: #214A09;
}