/*
 * Table around all program info (left column)
/*/

#x-info {
    float:              left;
    padding:            0px;
    width:              45em;
    margin:             10px 0px 10px 10px;
    background-color:   #101a29;
    color:              #E0E0FF;
    border:             1px solid #9090B0;
}

/*
 * This div contains the program overview:
 * channel/title/subtitle/time/description
/*/

.x-channel {
    width:              8em;
    padding:            0 !important;
    vertical-align:     middle;
    background-color:   #202a49;
    white-space:        nowrap;
    border-right:       1px solid #9090B0;
    border-bottom:      1px solid #9090B0;
}
.x-channel img {
    position:           relative;
    top:                -4px;
    vertical-align:     middle;
    max-width:          90px;
    max-height:         50px;
}
.x-channel a {
    display:            block;
    text-align:         center;
    padding:            5px;
}
.x-channel .x-preferred {
    margin-left:        5px;
    font-size:          200%;
}

#x-title {
    padding:            .2em .5em;
    border-bottom:      1px solid #9090B0;
}
#x-title a {
    font-size:      175% !important;
    font-weight:    bold;
}

#x-time {
    margin-top:     .2em;
    color:          #E0E0FF;
    white-space:    nowrap;
}
#x-description {
    padding:        .5em;
    border-bottom:  1px solid #9090B0;
}
#x-progflags td {
    padding:        .5em;
    border-bottom:  1px solid #9090B0;
}
#x-progflags img {
    margin-right:   .3em;
}
#x-progflags a img {
    border:         1px solid transparent;
}
#x-progflags a:hover img {
    border:         1px solid #F0F000;
}

#x-status {
    background-color:   #102923;
}


#x-status th {
    vertical-align:     top;
    font-weight:        normal;
    text-align:         right;
    padding:            .25em;
    white-space:        nowrap;
    border-top:         1px solid #9090B0;
}
#x-status td {
    padding:            .25em;
    border-top:         1px solid #9090B0;
}
#x-status td a {
    float:              left;
    margin-right:       .5em;
    font-weight:        bold;
    border:             1px solid #7b8;
    padding:            .15em .5em;
    background-color:   #263;
}
#x-status td a:hover {
    border:             1px solid #9da;
    background-color:   #485;
}

#x-info .x-extras {
}
#x-info .x-extras th {
    vertical-align: top;
    font-weight:    normal;
    text-align:     right;
    padding:        .25em;
    white-space:    nowrap;
    border-top:      1px solid #202933;
}
#x-info .x-extras td {
    padding:        .25em;
    border-top:      1px solid #202933;
}

#x-conflicts th {
    vertical-align:     top;
    font-weight:        normal;
    text-align:         right;
    white-space:        nowrap;
    padding:            .5em .25em;
    border-top:         1px solid #9090B0;
}
#x-conflicts td {
    padding:            .25em;
    padding-bottom:     0;
    border-top:         1px solid #9090B0;
}
#x-conflicts td a {
    display:            block;
    padding:            .15em .25em;
    margin-bottom:      .25em;
}
#x-conflicts {
}

#x-info .x-links th {
    vertical-align:     top;
    font-weight:        normal;
    text-align:         right;
    white-space:        nowrap;
    padding:            .4em .25em;
    border-top:         1px solid #9090B0;
}
#x-info .x-links td {
    padding:            .25em;
    padding-bottom:     0;
    border-top:         1px solid #9090B0;
}
#x-info .x-links td a {
    display:            block;
    padding:            .15em .25em;
    margin-bottom:      .25em;
}

#x-downloads {
    float:              left;
    padding:            0px;
    min-width:          350px;
    max-width:          500px;
    margin:             10px 0px 10px 10px;
    background-color:   #101a29;
    color:              #E0E0FF;
    border:             1px solid #9090B0;
}
#x-downloads img {
    margin-right:       .3em;
}
#x-downloads a img {
    border:             1px solid transparent;
}
#x-downloads a {
    border:             1px solid transparent;
}
#x-downloads a:hover img {
    border:             1px solid #F0F000;
}
#x-downloads div.x-pixmap {
    padding:            1em 1em 0em 1em;
    background-color:   black;
    text-align:         center;
}
#x-downloads div.x-pixmap a.x-pixmap {
    margin:             .25em auto;
}

#x-downloads div.x-links {
    padding:            .5em;
    background-color:   black;
    text-align:         center;
}

#x-downloads div.x-links a {
    position:           relative;
    top:                -10px;
    margin:             0px 1.5em;
    padding:            .75em;
}
#x-downloads div.x-links a img {
    position:           relative;
    top:                10px;
}
#x-downloads div.x-links a:hover img {
    border:             1px solid transparent;
}
#x-downloads div.x-links a:hover {
    background-color:   #121;
    border:             1px solid #F0F000;
    text-decoration:    none;
}
#x-downloads div.x-jobs {
    border-top:         1px solid #9090B0;
    padding:            .5em;
}

#x-downloads div.x-jobs a {
    margin-right:       .5em;
    font-weight:        bold;
    border:             1px solid #7b8;
    padding:            .15em .5em;
    background-color:   #263;
}
#x-downloads div.x-jobs a:hover {
    border:             1px solid #9da;
    background-color:   #485;
}

#x-downloads div.x-jobs ul {
    padding:            0px 0px 0px 1.5em;
}
#x-downloads div.x-jobs li {
    padding-bottom:     .25em;
}

#x-downloads div.x-jobs ul.x-queue li {
    padding-bottom:     .75em;
}

#x-downloads div.x-frontends {
    padding:            0.5em;
}

#x-downloads div.x-frontends ul {
    padding:            0px 0px 0px 1.5em;
}
#x-downloads div.x-frontends li {
    padding-bottom:     .25em;
}

#x-downloads div.x-frontends ul li {
    padding-bottom:     .75em;
}

#x-downloads div.x-frontends ul li a {
    background-color:   #226633;
    border:             1px solid #77BB88;
    font-weight:        bold;
    margin-right:       0.5em;
    padding:            0.15em 0.5em;
}

#x-downloads div.x-frontends ul li a:hover {
    color:              #F0F000;
    text-decoration:    underline;
}

#metadata-home-page {
    margin-left:        20px;
}

#feelings div {
    float: right;
    height: 24px;
    width: 24px;
    margin-right: 1em;
}

#feelings .like {
    background-image: url('img/feelings/like-inactive.png');
}

#feelings .like.active, #feelings .like:hover {
    background-image: url('img/feelings/like-active.png');
}

#feelings .meh {
    background-image: url('img/feelings/meh-inactive.png');
}

#feelings .meh.active, #feelings .meh:hover {
    background-image: url('img/feelings/meh-active.png');
}

#feelings .dislike {
    background-image: url('img/feelings/dislike-inactive.png');
}

#feelings .dislike.active, #feelings .dislike:hover {
    background-image: url('img/feelings/dislike-active.png');
}