/* ELEMENTS */

body
{
    background: url('img/background.png') #000000 repeat-x fixed;
    padding-top: 20px;
    position: relative;
}

h1
{
    margin-bottom: 30px;
}

hr
{
    border-color: #000;
}

td
{
    border-color: #000 !important;
    vertical-align: middle !important;
}

textarea
{
    resize: none;
}

/* CUSTOMIZED BOOTSTRAP */

nav
{
    border-bottom-left-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
    margin: auto;
    max-width: 1170px;
}

.alert
{
    box-shadow: 0 0 6px 3px #000;
}

select.bootstrap-multiselect, select.bootstrap-multiselect + div.btn-group, select.bootstrap-multiselect + div.btn-group button.multiselect, select.bootstrap-multiselect + div.btn-group.open .multiselect-container
{
    width: 100% !important;
}

.btn-bootstrap-multiselect
{
    height: 100%;
    text-align: left;
}

.btn-bootstrap-multiselect b
{
    float: right;
    margin-top: 8px;
}

.btn-inverse
{
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #363636;
    background-image: -moz-linear-gradient(top, #444444, #222222);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#444444), to(#222222));
    background-image: -webkit-linear-gradient(top, #444444, #222222);
    background-image: -o-linear-gradient(top, #444444, #222222);
    background-image: linear-gradient(to bottom, #444444, #222222);
    background-repeat: repeat-x;
    border-color: #222222 #222222 #000000;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff444444', endColorstr='#ff222222', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

.btn.btn-inverse:hover, .btn.btn-inverse:focus
{
    color: #ff0000;
}

.checkbox
{
    margin: 10px 14px;
}

.col-centered
{
    display: inline-block;
    float: none;
    margin-right: -4px;
}

.col-xs-5ths, .col-sm-5ths, .col-md-5ths, .col-lg-5ths
{
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.col-xs-5ths
{
    width: 18%;
    float: left;
}

.col-5ths-first
{
    margin-left: 5%;
}

.glyphicon-white
{
    color: #fff;
}

.input-group
{
    border: 1px solid #000;
}

.modal-header, .modal-footer
{
    border: none;
}

.multiselect-container.dropdown-menu
{
    position: relative;
}

.navbar .row .btn-lg
{
    border-color: #000;
    border-radius: 0;
}

.row.affix
{
    max-width: 970px;
}

.table-hover tr:hover:not(.rankings-spacer) > td
{
    background-color: #aaa !important;
    cursor: pointer;
}

.well
{
    background-color: lightgray;
    box-shadow: 0 0 10px 5px #222;
    color: #000;
    opacity: 0.90;
}

.well-hover:hover
{
    background-color: lightblue;
    cursor: pointer;
}

.well.disabled 
{
    opacity: 0.7;
}

/* ORIGINAL HEADERS (alphabetical order) */

.disclaimer li
{
    margin: 20px 0;
}

#footer
{
    font-weight: bold;
    margin-bottom: 85px;
    padding: 20px;
    text-align: center;
}

#footer span
{
    color: #fff;
    cursor: pointer;
}

#game_title
{
    margin-top: 20px;
    width: 300px;
}

#login_modal
{
    position: relative;
}

#role_reveal, #finale_reveal
{
    height: auto;
    max-width: 210px;
    width: 100%;
}

#search_form
{
    position: relative;
    z-index: 1;
}

#sidescroller .nav > li a:hover
{
    background-color: #337ab7;
    color: #fff;
}

#sortable
{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#sortable li
{
    margin: 0 3px 3px 3px;
    padding: 0.4em;
    padding-left: 1.5em;
}

#sortable li span
{
    position: absolute;
    margin-left: -1.3em;
}

/* ORIGINAL CLASSES */

.allegiance-0
{
    background-color: brown;
    color: black;
}

.allegiance-0 h1, .allegiance-0 h4, .allegiance-1 h1, .allegiance-1 h4
{
    text-transform: uppercase;
}

.jumbotron.allegiance-0 p, .jumbotron.allegiance-1 p
{
    font-size: 12px;
}

.alert-inverse
{
    background-color: #444;
    color: #fff;
}

.alert-magic
{
    background-color: #bf5eee;
    color: purple;
}

.allegiance-1
{
    background-color: #337ab7;
    color: white;
}

.avatar-join, .role-card
{
    display: inline-block;
    margin-bottom: 20px;
    max-height: 250px;
}

.avatar-link:hover
{
    text-decoration: none;
}

.avatar-rank
{
    max-height: 55px;
}

.black-box
{
    box-shadow: 0 0 10px 5px #000;
}

.box-date
{
    border: 5px dashed #000 !important;
}

.btn-icon
{
    border-radius: 15px;
    padding: 4px;
    width: 30px;
}

.btn-toggle
{
    margin: 7px;
    max-width: 150px;
    width: 40%;
}

.bubble
{
    border-radius: 30px;
    cursor: pointer;
    display: inline-block;
    font-weight: bolder;
    margin: 0 10px 10px 0;
    text-align: center;
}

.bubble:hover
{
    background-color: lightblue;
    border-color: #000;
}

.bubble-dark
{
    background-color: aliceblue;
    border-color: #000;
    margin-top: 10px 10px 0 0;
}

.bubble-dark:hover
{
    background-color: #f2dede;
}

.bubble-mini
{
    background-color: cornflowerblue;
    border-radius: 15px;
    color: #FFF;
    cursor: pointer;
    padding: 7px;
    text-align: center;
}

.bubble-mini:hover
{
    background-color: lightgreen;
    color: #000;
}

tr.error .bubble-mini
{
    background-color: lightcoral;
}

tr.error .bubble-mini:hover
{
    background-color: indianred;
}

.cursor
{
    cursor: pointer;
}

.danger-bubble
{
    box-shadow: 0 0 3px 3px #d9534f;
}

.error
{
    color: #ff0000;
}

.error-container
{
    height: 52px;
}

.error-form
{
    border-radius: 5px;
    box-shadow: 0 0 3px 3px #ff0000;
}

.favorite-label
{
    height: 26px;
    overflow: hidden;
}

.favorite-label-xs
{
    font-size: 3vw;
    height: 3vw;
    overflow: hidden;
}

.hero-glow
{
    box-shadow: 0 0 6px 3px blue !important;
}

.hero-selected
{
    box-shadow: 0 0 10px 5px blue;
    opacity: 1 !important;
}

.hero-toggle, .neutral-toggle, .villain-toggle
{
    opacity: 0.7;
}

.hero-toggle:hover, .neutral-toggle:hover, .villain-toggle:hover
{
    opacity: 1;
}

.info-bubble
{
    box-shadow: 0 0 3px 3px #5bc0de;
}

.invalid
{
    color: #b94a48;
}

.menu-host
{
    box-shadow: 10px 0px 5px -2px yellow;
}

.menu-option
{
    width: 50%;
}

.menu-text
{
    font-size: 3vw;
}

.mini
{
    font-size: 11px;
}

.my-rank
{
    background-color: #333 !important;
    color: #fff;
}

.neutral-glow, .avatar-rank.black-box:hover, .avatar-join:hover
{
    box-shadow: 0 0 6px 3px yellow !important;
}

.neutral-selected
{
    box-shadow: 0 0 10px 5px yellow;
    opacity: 1 !important;
}

.new-banner
{
    position: relative;
    left: -22px;
    top: -22px;
}

.player-card
{
    background-size: 100% 100%;
    border: 2.5px solid #000;
    cursor: pointer;
    display: inline-block;
    margin-bottom: 20px;
    padding-bottom: 155%;
    position: relative;
    width: 100%;
}

.player-card:hover
{
    text-decoration: none;
}

.player-count
{
    color: white;
    font-size: 0.8em;
    position: absolute;
    right: 20px;
    top: -12px;
}

.player-label
{
    background-color: #000;
    border: 2.5px solid #000;
    border-left: none;
    border-right: none;
    color: #fff;
    font-size: 1em;
    font-weight: bold;
    height: 30px;
    left: -2px;
    line-height: 2;
    opacity: 0.8;
    overflow: hidden;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    top: 60%;
    width: 102%;
    z-index: 1;
}

.player-label img
{
    margin-right: 5px;
    width: 25px;
}

.player-lady
{
    bottom: 1%;
    height: 17%;
    opacity: 0.3;
    position: absolute;
    right: 15%;
    width: 20%;
}

.player-lady.active
{
    box-shadow: 0 0 6px 3px yellow;
    opacity: 1;
}

.player-leader
{
    bottom: 1%;
    left: 15%;
    opacity: 0.5;
    position: absolute;
    width: 20%;
}

.player-leader.active
{
    box-shadow: 0 0 6px 3px orange;
    opacity: 1;
}

.player-score
{
    background-color: rgba(0, 0, 0, 0.8);
    bottom: 3%;
    color: yellow;
    font-size: .8em;
    font-weight: bolder;
    position: absolute;
    width: 100%;
    z-index: 1;
}

.player-score img
{
    height: 15px;
}

.player-track
{
    position: absolute;
}

.player-track img
{
    border-radius: 100%;
    box-shadow: 0 0 4px 2px #000;
    margin: 4px 1px;
    width: 15%;
}

.points-icon
{
    width: 25px;
}

.rankings-dot
{
    background-color: #666;
    border-radius: 50%;
    display: inline-block;
    height: 14px;
    margin: 12px 8px 10px;
    width: 14px;
}

.search-form, input.search-form, select.search-form
{
    border-radius: 5px;
    box-shadow: 0 0 3px 3px #0000FF;
    z-index: 10;
}

.selected-date a
{
    background: steelblue !important;
    color: #fff !important;
}

.bottom-border td
{
    border-bottom: 1px solid #000;
}

.side-border
{
    border-left: 1px solid #000;
    border-right: 1px solid #000;
}

.smaller
{
    font-size: 12px;
    margin-bottom: 30px;
}

.stamp
{
    left: 0px;
    position: absolute;
    width: 275px;
}

.success-bubble
{
    box-shadow: 0 0 3px 3px #5cb85c;
}

.tableu
{
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border: none;
    margin: 0 auto 20px;
    padding-bottom: 23%;
    position: relative;
    width: 95%;
}

.tableu-quest
{
    bottom: 8%;
    position: absolute;
    width: 100%;
}

.tableu-quest img
{
    border-radius: 100%;
    margin-left: 11%;
    width: 7%;
}

.tableu-quest img:first-child
{
    margin-left: 6%;
}

.ui-state-highlight
{
    box-shadow: 0 0 4px 2px yellow;
    height: 35px;
    line-height: 1.2em;
}

.valid
{
    color: #468847;
}

.villain-glow
{
    box-shadow: 0 0 6px 3px red !important;
}

.villain-selected
{
    box-shadow: 0 0 10px 5px red;
    opacity: 1 !important;
}

.vote-track
{
    color: white;
    font-size: 0.8em;
    position: absolute;
    top: -12px;
}

.warning-bubble
{
    box-shadow: 0 0 3px 3px #f0ad4e;
}

/* RESPONSIVE */

@media (min-width: 325px)
{
    .tableu-quest img:first-child
    {
        margin-left: 6.5%;
    }
}

@media (min-width: 340px)
{
    .player-score
    {
        font-size: 1em;
    }
    
    .player-score img
    {
        height: 20px;
    }
}

@media (min-width: 350px)
{
    .tableu-quest img:first-child
    {
        margin-left: 7%;
    }
}

@media (min-width: 375px)
{
    .tableu
    {
        width: 96%;
    }
    
    .tableu-quest img:first-child
    {
        margin-left: 7.5%;
    }
    
    .vote-track, .player-count
    {
        font-size: 1em;
        top: -17px;
    }
}

@media (min-width: 385px)
{
    .tableu-quest
    {
        bottom: 7%;
    }
}

@media (min-width: 400px)
{
    .tableu-quest img:first-child
    {
        margin-left: 8%;
    }
}

@media (min-width: 425px)
{
    .player-leader, .player-lady
    {
        bottom: 3%;
        width: 25%;
    }
    
    .tableu-quest img:first-child
    {
        margin-left: 8.5%;
    }
}

@media (min-width: 440px)
{
    .player-score
    {
        font-size: 1.5em;
    }
    
    .player-score img
    {
        height: 30px;
    }
}

@media (min-width: 450px)
{
    .tableu
    {
        width: 97%;
    }
    
    .tableu-quest img:first-child
    {
        margin-left: 9%;
    }
}

@media (min-width: 470px)
{
    .tableu-quest
    {
        bottom: 6%;
    }
    
    .tableu-quest img:first-child
    {
        margin-left: 9.5%;
    }
}

@media (min-width: 500px)
{
    .tableu-quest img:first-child
    {
        margin-left: 10%;
    }
}

@media (min-width: 525px)
{
    .tableu-quest img:first-child
    {
        margin-left: 10.5%;
    }
}

@media (min-width: 550px)
{
    .menu-text
    {
        font-size: 18px;
    }
}

@media (min-width: 560px)
{
    .tableu
    {
        width: 98%;
    }
    
    .tableu-quest
    {
        bottom: 5%;
    }
    
    .tableu-quest img
    {
        margin-left: 11.5%;
    }
    
    .tableu-quest img:first-child
    {
        margin-left: 11%;
    }
}

@media (min-width: 700px)
{
    .tableu-quest img
    {
        margin-left: 11.5%;
    }
    
    .tableu-quest img:first-child
    {
        margin-left: 12%;
    }
}

@media (min-width: 768px)
{
    .col-sm-5ths
    {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px)
{
    .col-md-5ths
    {
        width: 20%;
        float: left;
    }
    
    .tableu
    {
        width: 100%;
    }
    
    .tableu-quest img:first-child
    {
        margin-left: 12.5%;
    }
}

@media (min-width: 1200px)
{
    .col-lg-5ths
    {
        width: 20%;
        float: left;
    }
    
    .row.affix
    {
        max-width: 1170px;
    }
    
    .tableu-quest img:first-child
    {
        margin-left: 13%;
    }
}