/*
 * MIND THE GAP
 * Stylesheet
 *
 * (c) May-June 2012
 * Cosmin Badea, Petr Cermak, Victor Cheng, Andrew Jack
 */


body {
    overflow: hidden;
    padding: 0;
    margin: 0;

    font-family: Verdana, Arial, FreeSans, sans;
    background-color: #000000;
    color: #FFFFFF;
}

a {
    color: #888888;
    text-decoration: none;
}

input[type="text"], input[type="password"] {
    padding:    3px;
    margin:     0px;
    box-sizing: border-box;

    border:     none;
    background: rgba(50, 50, 50, 0.9);
    color:      #FFFFFF;
}


input[type="text"]:focus, input[type="password"]:focus {
    background: rgba(70, 70, 70, 0.9);
    outline: none;
}


/******************************************************************************/
/*  Top bar
/******************************************************************************/


#bar {
    position: absolute;
    left:     0px;
    top:      0px;
    z-index:  10;

    color:       #FFFFFF;
    font-size:   15pt;
    font-weight: bold;
}

#station_bar {
    width:      40%;
    float:      left;
    text-align: left;
}

#info_bar {
    text-align: center;
}

#lifetime_bar {
    width:      40%;
    float:      right;
    text-align: right;
}


/******************************************************************************/
/*  Container
/******************************************************************************/


#container {
    position: absolute;
    left:     0px;
    top:      0px;
    width:    5000px;
    height:   5000px; /* TODO */
    z-index:  5;
}

.box {
    border: 1px solid rgba(100, 100, 100, 0.5);
    background: rgba(30, 30, 30, 0.9);
}


/******************************************************************************/
/*  Login
/******************************************************************************/


#login {
    width:  700px;
    height: 300px;
}

h1 {
    padding: 10px;
    margin:  0px;
    clear:   both;

    font-size:    25px;
    font-weight:  bold;
    font-variant: small-caps;
}

#login label {
    display:    inline-block;
    width:      100px;

    font-size:  12px;
    text-align: right;
}

.left_column,
.right_column {
    width: 50%;
    box-sizing:      border-box;
    -moz-box-sizing: border-box;
}

.left_column {
    float: left;
}

.right_column {
    float: right;
}

#login .left_column,
#login .right_column {
    padding:         10px;
}

#login_warning {
    display: none;
    color: yellow;
    background: rgba(255, 255, 0, 0.05);
    border: solid 1px rgba(255, 255, 0, 0.8);
    padding: 5px;
    margin: 0px 10px;
    min-height: 67px;
}

#login_warning img {
    float: left;
    margin-right: 10px;
}


/******************************************************************************/
/*  Station
/******************************************************************************/


#station {
    width:  900px;
    height: 600px;
}


.alive_only,
.dead_only {
    display: none;
}

.player_data_caption {
    font-weight: bold;
    margin-top: 30px;
}

.player_data {
    margin: 5px 30px;
}

.player_data table {
    border-spacing: 0px;
    margin-bottom: 10px;
}

.player_data_table td {
    padding: 4px;
    width: 120px;
}

.player_data table tr:nth-child(2n + 1),
#highscores tr:nth-child(2n + 1),
#trade tr:nth-child(2n + 1) {
    background: rgba(70, 70, 70, 0.4);
}

#highscores {
    width: 100%;
    border-spacing: 0px;
}

#highscores td {
    padding: 4px;
}

#highscores .td_position {
    width: 30px;
    text-align: right;

}

#highscores .td_name {

}

#highscores .td_score {
    width: 100px;
    text-align: right;
}


/******************************************************************************/
/*  Tabs
/******************************************************************************/


#tab_buttons {
    list-style: none;
    margin:     0px;
    padding:    0px;
}

#tab_buttons::after {
    display: block;
    content: "";
    clear: both;
}

#tab_buttons > li {
    float: left;
}

#tab_buttons > li > a {
    display:    inline-block;
    padding:    10px;
    background: rgba(10, 10, 10, 0.4);

    color:           #666666;
    font-size:       20px;
    font-weight:     bold;
    text-decoration: none;
}

#tab_buttons > li > a:hover {
    background: rgba(10, 10, 10, 0.9);
}

#tab_buttons > li > a.active {
    color: #FFFFFF;
}

.padded_pane {
    margin: 10px;
}

.tab_pane {
    display: none;
}

.tab_pane :first-child {
    margin-top: 0px;
}


/******************************************************************************/
/*  Maps
/******************************************************************************/


#map_background {
    position: absolute;
    left:     0px;
    top:      0px;
    z-index:  0;
}

#map_foreground {
    position: absolute;
    left:     0px;
    top:      0px;
    z-index:  1;
}

a.map_station {
    border: solid rgba(0, 0, 0, 0);
    -webkit-transition: 0.5s ease;
    -moz-transition:    0.5s ease;
    -ms-transition:     0.5s ease;
    -o-transition:      0.5s ease;
    transition:         0.5s ease;
}

a.map_station:hover {
    border-color: #6AACCD;
    cursor:       pointer;
}


/******************************************************************************/
/*  Maps
/******************************************************************************/

#trade {
    border-spacing: 0px;
}

#trade td {
    padding: 4px 8px;
    text-align: center;
}

#trade input {
    width: 60px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#trade button {
    width: 50px;
}