/*
 * 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: 'Lucida Grande', Tahoma, Verdana, Arial, Sans-serif;
    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;
    border: 1px solid rgba(255, 255, 255, 0.1);
}


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

button {
    background: rgba(10, 10, 10, 0.4);
    border: 1px solid rgba(100, 100, 100, 0.5);
    color: white;
    font-family: inherit;

    padding: 3px 6px;
    cursor: pointer;
}

button[disabled] {
    color: #666666;    
    cursor: default;
}

button:hover:not([disabled]) {
    background: rgba(80, 80, 80, 0.4);
}


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


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

    color:       #FFFFFF;
    font-weight: bold;

    pointer-events: none;
}

#station_bar {
    float:      left;
    text-align: left;
}

#info_bar {
    position: absolute;
    text-align: center;
    width: 100%;
}

#info_bar button {
    background: rgba(26, 62, 80, 0.9);
    border: 1px solid rgba(100, 100, 100, 0.8);
    font-weight: bold;
    padding: 10px 20px;
    margin-top: 20px;
    font-size: inherit;
    pointer-events: auto;
}

#info_bar button:hover {
    background: rgba(80, 80, 80, 0.9);
}

#lifetime_bar {
    float:      right;
    text-align: right;
}

#lifetime_bar table {
    float: right;
    font-size: 15px;
}

#lifetime_bar table .resource-rej {
    font-style: italic;
}

#lifetime_bar table .resource {
    padding-left: 5px;
}

/******************************************************************************/
/*  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.5) url("../images/bg.png");
}


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


#login {
    width:  700px;
}

#login_box {
    box-sizing:      border-box;
    -moz-box-sizing: border-box;
    width:  700px;
    height: 270px;
}

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;
}

.right_login {
    margin-top: 60px;
}

.right_login form {
    margin-top: 5px;
}

.right_login input {
    margin-bottom: 5px;
}


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

#login_warning {
    box-sizing:      border-box;
    -moz-box-sizing: border-box;
    width: 700px;
    display: none;
    color: yellow;
    padding: 5px;
    height: 80px;

    margin-bottom: 10px;
}

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

.warning_text {
    margin-top: 10px;
}

.warning_head {
    font-size: 20px;
}

.warning_help {
    font-size: 12px;
}


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


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


.alive_only,
.dead_only,
.new_only {
    display: none;
}

.center_message {
    text-align: center;
    margin-top: 200px;
}

.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;
}

#tab_story,
#tab_tutorial {
    height: 530px;
    width:  100%;
    overflow-x: none;
    overflow-y: auto;
}

#tab_story img {
    width: 300px;
}

.left_float {
    float: left;
    margin-right: 20px;
}

.right_float {
    float: right;
    margin-left: 20px;
}


/******************************************************************************/
/*  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(80, 80, 80, 0.4);
    /*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 {

}

#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;
}


/******************************************************************************/
/*  Trade
/******************************************************************************/

#trade, #trade_table {
    border-spacing: 4px;
    width: 816px;
}

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

#trade input, #trade_table input {
    width: 60px;
    text-align: center;
}

#trade button, #trade_table button {
    width: 140px;
}

span.buy {
	color: blue;
}

span.sell {
	color: red;
}

span.resourceName {
	color: #ffa500;
}

a.navigate{
	color: #FFA500;
}

input.trade {
	text-align: center;
	width: 50px;
}

div.trade {
  overflow-x: hidden;
  overflow-y: auto;
	word-wrap: break-word;
}

button.offer {
	height: 21px;
}

#select_src, #select_src option, #select_dst, #select_dst option {
  background: rgba(50, 50, 50, 0.9);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1); 
  padding: 3px;
}

::-webkit-scrollbar {
    width: 15px;
}
 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(255,255,255,0.15); 
    border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(255,255,255,0.5);
    background: rgba(255, 255, 255, 0.1);
}

#tab_chat_messages::-webkit-scrollbar-track,
#chat *::-webkit-scrollbar-track {
    border-radius: 0px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}