body, html
{
    margin: auto;
    background-color: #000000;
    background-size: cover;
    color: #FFFFFF;
    font-family: Verdana;
    font-size: 8pt;
    overflow: hidden;
    transform: translate3d(0,0,0); 
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transition: 0.15s background-image;
    animation: moveIt 60s linear infinite;
}

@keyframes moveIt {
  from { background-position: bottom right; }
  to { background-position: top left; }
}

#game
{
    outline: none;
    cursor: crosshair;
    transform: translate3d(0,0,0); 
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
}

/* General GUI */

#gui
{
	visibility: hidden;
}

#gui #portrait,
#gui #sidebar,
#gui #weaponInfo,
#gui #chat_window,
#gui #chat_div,
#gui #chat_emoticons,
/*#gui .minimap_button,*/
#gui #infobox,
#gui #tooltip,
#gui #topbar
{
	zoom: 1.5;
}

/********************/
/*     Portrait     */
/********************/

#portrait
{
    position: absolute;
    left: 5px;
    top: 5px;
    background: linear-gradient(#1f2938 0%, #0d121a 100%);
    border-radius: 37px;
    border: 1px solid #08080c;
    box-shadow: 0px 0px 3px black;
    cursor: pointer;
    padding: 5px;
}

#portrait div
{
    background: url('images/spr_portrait.png') center, black;
    background-size: 64px;
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 64px;
}

#portrait div:after
{
    content: "";
    position: absolute;
    left: 2px;
    top: 2px;
    background: linear-gradient(rgba(255, 255, 255, 0.75), transparent, transparent, transparent);
    width: 60px;
    height: 60px;
    border-radius: 62px;
    display: inline-block;
}

#portrait:hover { background: linear-gradient(#2d3c52 0%, #1a2333 100%); }

#portrait:active { background: linear-gradient(#0d121a 0%, #1f2938 100%); }

/********************/
/*     Infobox      */
/********************/

/* Left infobox (always showing the player's data) */
#infobox
{
    position: absolute;
    left: 87px;
    top: 18px;
    color: #ddddff;
    font-size: 10px;
    background: linear-gradient(#1f2938 0%, #0d121a 100%);
    border: 1px solid #08080c;
    border-radius: 5px;
    box-shadow: 0px 0px 3px black;
    opacity: 0.9;
    pointer-events: none;
    padding: 0px 2px 2px 2px;
}

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

.hull, .shield, .generator { font-weight: bold; text-align: center; }

.speed { text-align: right; }

.name { max-width: 10px; font-weight: bold; overflow: hidden; }

.shield { color: RoyalBlue; }
.hull { color: LightGreen; }
.generator { color: Gold; }

.bar_shield_bg,
.bar_hull_bg,
.bar_generator_bg
{
    width: 161px;
    height: 4px;
}

.bar_shield_bg
{
    background: url(images/spr_bars.png);
    background-position: 0px 28px;
}

.bar_hull_bg
{
    background: url(images/spr_bars.png);
    background-position: 0px 20px;
}

.bar_generator_bg
{
    background: url(images/spr_bars.png);
    background-position: 0px 12px;
}

.bar_shield, .bar_hull, .bar_generator
{
    background: url(images/spr_bars.png);
    height: 4px;
}

.bar_shield { background-position: 0px 0px; }
.bar_hull { background-position: 0px 24px; }
.bar_generator { background-position: 0px 16px; }

/********************/
/*     Sidebar      */
/********************/

#sidebar
{
    position: absolute;
    top: 0px;
    right: 316px;
    padding: 4px;
}

.sidebar_button
{
    background: linear-gradient(#1f2938 0%, #0d121a 100%);
    border: 1px solid #08080c;
    border-radius: 24px;
    box-shadow: 0px 0px 3px black;
    margin-left: 4px;
    cursor: pointer;
    float: left;
}

.sidebar_button:hover { background: linear-gradient(#2d3c52 0%, #1a2333 100%); }

.sidebar_button:active { background: linear-gradient(#0d121a 0%, #1f2938 100%); }

.sidebar_button div
{
    background: url('images/spr_gui_sidebar.png');
    width: 24px;
    height: 24px;
    opacity: 0.67;
    transition: 0.15s opacity;
}

.sidebar_button div:hover { opacity: 1; }

#sidebar_pilot, #sidebar_pilot div { top: 80px; background-position: 0 0; }

#sidebar_mission, #sidebar_mission div { top: 120px; background-position: 0 -24px; }

#sidebar_ship, #sidebar_ship div { top: 160px; background-position: 0 -48px; }

#sidebar_cargo, #sidebar_cargo div { top: 200px; background-position: 0 -72px; }

#sidebar_sector, #sidebar_sector div { top: 240px; background-position: 0 -96px; }

#sidebar_galaxy, #sidebar_galaxy div { top: 280px; background-position: 0 -120px; }

#sidebar_settings, #sidebar_settings div { bottom: 140px; background-position: 0 -144px; }

#sidebar_logout, #sidebar_logout div { top: 320px; background-position: 0 -168px; }

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

#topbar
{
    background: linear-gradient(#1f2938 0%, #0d121a 100%);
    position: absolute;
    right: 0px;
    top: 0px;
    font-size: 9px;
    border-bottom-left-radius: 10px;
    border-bottom: 1px solid #08080c;
    border-left: 1px solid #08080c;
    boax-shadow: 0px 0px 5px black;
    padding-right: 3px;
}

#topbar div
{
    background: #111111;
    padding: 1px;
    padding-left: 4px;
    padding-right: 6px;
    margin: 3px 0px 3px 3px;
    float: left;
    line-height: 14px;
    border-radius: 100px;
    box-shadow: inset 1px 1px 3px black;
    cursor: default;
    transition: 0.15s background;
}

#topbar div:hover { background: #222222; }

#topbar img
{
    height: 14px;
    vertical-align: top;
}

/********************/
/*       Chat       */
/********************/

#chat_window
{
    background: rgba(8, 8, 12, 0.33);
    width: 380px;
    height: 100px;
    position: absolute;
    left: 0px;
    bottom: 0px;
    padding: 5px;
    font-size: 11px;
	font-family: Arial, Verdana;
    overflow-y: auto;
    border-top: 1px #08080c solid;
    border-right: 1px #08080c solid;
    border-top-right-radius: 6px;
    box-shadow: inset 0px 6px 6px -6px rgba(8, 8, 12, 0.6), inset 0px -75px 100px -75px rgba(8, 8, 12, 0.8);
    -webkit-user-select: text;
       -moz-user-select: text;
        -ms-user-select: text;
         -o-user-select: text;
            user-select: text;
    transition: 0.15s bottom, background 0.15s;
	display: none;
}

#chat_window:hover { background: rgba(8, 8, 12, 0.67); }

#chat_div
{
    background: linear-gradient(#1b1c29 0%, #2f3145 50%, #08080c 100%);
    width: 382px;
    height: 22px;
    position: absolute;
    left: 0px;
    bottom: 0px;
    border-right: 1px #111111 solid;
    visibility: hidden;
}

#channel_select
{
    background: #000000;
    color: white;
    width: 80;
    height: 18px;
    position: absolute;
    left: 0px;
    bottom: 2px;
    border: none;
    outline: none;
    padding-left: 5px;
    padding-right: 3px;
    transition: 0.2s background;
    visibility: hidden;
}

#channel_select:hover { background: #090909; }

/* Emoticons */
#chat_emoticons_activator
{
    background: black url('images/spr_credits.png') center;
    position: absolute;
    left: 81px;
    bottom: 2px;
    width: 18px;
    height: 18px;
    visibility: hidden;
}

#chat_emoticons
{
    background: black;
    position: absolute;
    left: 81px;
    bottom: 22px;
    height: 18px;
    padding: 2px;
    border-radius: 3px;
    visibility: hidden;
}

#chat_emoticons img, #chat_window img
{
    height: 18px;
    vertical-align: middle;
}

#chat_emoticons_activator:hover { background: #111111 url('images/spr_credits.png') center; }

#chat_emoticons img:hover { margin: -1px; border: 1px solid #999999; }


#chat_input
{
    background: #000000;
    width: 273px;
    color: white;
    height: 16px;
    position: absolute;
    left: 101px;
    bottom: 2px;
    border: none;
    outline: none;
    padding-left: 4px;
    padding-right: 3px;
    transition: 0.2s background;
}

#chat_input:hover { background: #090909; }

/********************/
/*      Weapons     */
/********************/

#weaponInfo
{
    position: absolute;
    left: 1px;
    bottom: 112px;
    width: 100px;
    opacity: 0.9;
    transition: 0.15s bottom;
}

#weaponInfo .box
{
    position: relative;
    background: linear-gradient(#1f2938 0%, #0d121a 100%);
    width: 82px;
    padding: 2px;
    margin: 2px;
    border-radius: 4px;
    border: 1px solid #08080c;
    box-shadow: 0px 0px 3px black;
    float: left;
}

#weaponInfo .box:hover { background: linear-gradient(#2d3c52 0%, #1a2333 100%); }
#weaponInfo .box:active { background: linear-gradient(#0d121a 0%, #1f2938 100%); }

#weaponInfo .icon
{
    background-repeat: no-repeat;
    background-position: -10px center;
    width: 24px;
    height: 14px;
    float: left;
}

#weaponInfo font
{
    position: absolute;
    top: 1px;
    right: 2px;
    font-size: 8px;
    opacity: 0.75;
}

#weaponInfo .bar_bg
{
    position: absolute;
    bottom: 2px;
    right: 2px;
    background: url(images/spr_bars.png) no-repeat;
    background-position: 0px -28px;
    width: 56px;
    height: 4px;
    float: right;
}

#weaponInfo .bar
{
    background: url(images/spr_bars.png) no-repeat;
    background-position: 0px -24px;
    width: 100%;
    height: 4px;
}

/********************/
/*     Minimap      */
/********************/

.minimap_button
{
    position: absolute;
    right: 264px;
    cursor: pointer;
}

.minimap_button:hover { background: linear-gradient(#2d3c52 0%, #1a2333 100%); }

.minimap_button:active { background: linear-gradient(#0d121a 0%, #1f2938 100%); }

.minimap_button div
{
    background-image: url('images/spr_gui_minimap_buttons.png'), linear-gradient(#1f2938 0%, #0d121a 100%);
    background-size: 34px;
    width: 34px;
    height: 34px;
    opacity: 0.67;
    overflow: hidden;
    background-repeat: no-repeat;
}

.minimap_button div:hover { opacity: 1; }

#minimap_ships, #minimap_ships div { background-position: 0 0px; bottom: 137px; }

#minimap_stations, #minimap_stations div { background-position: 0 -20px; bottom: 95px; }

#minimap_asteroids, #minimap_asteroids div { background-position: 0 -40px; bottom: 51px; }

#minimap_items, #minimap_items div { background-position: 0 -60px; bottom: 9px; }

/* inGame tooltips */

#tooltip
{
    background: black;
    max-width: 150px;
    position: absolute;
    font-family: Arial, Verdana;
    padding: 5px;
    border-radius: 5px;
    opacity: 0;
    transition: 0.15s opacity;
    pointer-events: none;
    z-index: 1000;
}

font.tooltip
{
    font-size: 12px;
    font-weight: bold;
    color: white;
}

font.tooltip_desc
{
    font-size: 10px;
    color: #CCCCCC;
}

/* HTML based dialog screens */
.dialog
{
    position: absolute;
    left: 50%;
    top: 50%;
    min-width: 180px;
    max-width: 1000px;
    border: 1px solid #08080c;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.75);
    color: #f2f5ff;
    font-family: Arial, Verdana;
    line-height: 14px;
    text-shadow: 1px 1px 2px black;
    opacity: 0.98;
}

.dialog_title
{
    background: linear-gradient(#0d121a 0%, #414d68 15%, #0d121a 40%, #1f2938 80%);
    padding-left: 3px;
    height: 20px;
    color: #d0d0d0;
    font-size: 14px;
    border-bottom: 1px solid #0d121a;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    text-shadow: 1px 1px 0px black;
    line-height: 21px;
}

.dialog_title button
{
    width: 22px;
    height: 14px;
    margin-right: 3px;
    line-height: 12px;
}

.dialog_content
{
    background: linear-gradient(#1f2938 0%, #0d121a 100%);
    max-height: 400px;
    padding: 4px;
    overflow-y: auto;
}

.dialog_box_title
{
    background: linear-gradient(#586078 0%, #0e1020 50%, #0e1020 100%);
    padding: 3px;
    padding-left: 4px;
    border: 1px solid black;
    border-radius: 3px;
    max-height: 14px;
    text-align: left;
}

.dialog_box_title table, .dialog_box_content table { width: 100%; }

.dialog_box_content
{
    background: #0b0f18;
    padding: 4px;
    margin-top: 3px;
    border: 1px solid black;
    border-radius: 3px;
    text-align: left;
}

.dialog_box_content.reward { text-align: right; }

.dialog_box_content img
{
    max-height: 16px;
    vertical-align: middle;
}

.dialog_bottom
{
    background: #0d121a;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    text-align: right;
    padding: 5px;
}

.dialog_content button, .dialog_bottom button
{
    font-size: 12px;
    padding: 5px 10px 5px 10px;
}

.dialog button
{
    background: linear-gradient(#11141b 0%, #22252c 50%, #000000 50%, #11141b 100%);
    color: white;
    border-radius: 4px;
    border: 1px solid black;
    outline: none;
    cursor: pointer;
}

.dialog button:hover
{
    background: linear-gradient(#22252c 0%, #33363d 50%, #11141b 50%, #22252c 100%);
}

.dialog button:active
{
    background: linear-gradient(#000000 0%, #11141b 50%, #000000 50%, #000000 100%);
    background-position: 1px 1px;
}

.dialog a:hover
{
    color: red;
    cursor: pointer;
}

.unselectable
{
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
         -o-user-select: none;
            user-select: none;
}

.dialog #pilot { width: 150px; text-align: center; }

.dialog #pilot
{
    width: 200px;
}

.dialog #pilot img
{
    background: #0b0f18;
    border: 1px solid black;
    border-radius: 3px;
}

.dialog #pilot textarea
{
    width: 194px;
    height: 100px;
    border: 1px solid black;
    border-radius: 3px;
    margin-top: 3px;
    resize: none;
    outline: none;
}

.dialog #pilot_data
{
    margin-left: 5px;
    width: 200px;
}

.dialog #pilot, .dialog #pilot_data,
.dialog #ship, .dialog #ship_data
{
    float: left;
}

/* Cargo hold */
.dialog .cargo_box
{
    background: #0b0f18;
    width: 32px;
    height: 32px;
    border: 1px solid black;
    border-radius: 3px;
    float: left;
    margin: 1px;
    position: relative;
}

.dialog .cargo_box:hover
{
    background: #1f2938;
    cursor: pointer;
}

.dialog .cargo_box .content
{
    background-size: 32px 32px;
    width: 100%;
    height: 100%;
    font-size: 9px;
}

.dialog .cargo_box font
{
    position: absolute;
    bottom: -3px;
    right: 0px;
}


.dialog #sectormap
{
    background: linear-gradient(transparent 24%, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.05) 75%, rgba(255, 255, 255, 0.05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.05) 75%, rgba(255, 255, 255, 0.05) 76%, transparent 77%, transparent), #090909;
    background-size: 50px 50px;
    width: 400px;
    height: 400px;
    float: left;
}

.dialog #sectormap_buttons
{
    width: 310px;
    height: 20px;
    text-align: right;
    float: left;
}

.dialog #sectormap_list
{
    width: 300px;
    height: 380px;
    padding-left: 4px;
    padding-right: 4px;
    float: left;
    overflow-y: auto;
}

.dialog #sectormap_list div.icon
{
    height: 13px;
}

.dialog #sectormap_list table { width: 100%; border-spacing: 0px; }

.dialog #sectormap_list table .icon { width: 20px; }
.dialog #sectormap_list table .name { width: 140px; }
.dialog #sectormap_list table .id   { width: 60px; }
.dialog #sectormap_list table .hull { width: 30px; }

.dialog #sectormap_list .you     { color: green; }
.dialog #sectormap_list .enemies { color: red; }

.dialog #galaxy_map td
{
    background: #0b0f18;
    position: relative;
    width: 64px;
    height: 64px;
    padding-right: 5px;
    border: 1px solid black;
    border-radius: 3px;
    font-size: 9px;
    text-align: right;
    vertical-align: bottom;
}

.dialog #galaxy_map td:hover
{
    background: #1f2938;
    cursor: pointer;
}

.dialog #galaxy_map td#you { border: 1px solid yellow; }

.dialog #galaxy_map .gate
{
    background: rgba(0, 255, 159, 0.25);
    position: absolute;
    width: 12px;
    height: 12px;
    color: orange;
    font-size: 10px;
    text-align: center;
    line-height: 12px;
    border-radius: 5px;
}

.dialog #galaxy_map .gate_o { top: 27px; right: 0px; }
.dialog #galaxy_map .gate_s { bottom: 0px; left: 27px; }
.dialog #galaxy_map .gate_w { top: 27px; left: 0px; }
.dialog #galaxy_map .gate_n { top: 0px; left: 27px; }

.dialog #galaxy_map .gate_o:after { content: "O"; }
.dialog #galaxy_map .gate_s:after { content: "S"; }
.dialog #galaxy_map .gate_w:after { content: "W"; }
.dialog #galaxy_map .gate_n:after { content: "N"; }

.shipEquipment
{
    position: absolute;
    left: 200px;
    top: 200px;
    width: 400px;
    background: #222233;
    color: #ffffff;
    padding: 5px;
}

.shipEquipment table
{
    width: 100%;
}

.shipEquipment button
{
    min-width: 50px;
}

.sectorMap
{
    position: absolute;
    left: 200px;
    top: 200px;
    width: 500px;
    background: #222233;
    color: #ffffff;
    padding: 5px;
    font-size: 13px;
}

.sectorMap table
{
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.5);
}

.sectorMap table tr:hover
{
    background: rgba(255, 255, 255, 0.25);
    cursor: pointer;
}

.sectorMap table td.icon
{
    width: 14px;
    transform: rotate(-90deg);
}

.sectorMap table td.id
{
    width: 72px;
}

.sectorMap table td .alliance
{
    color: #999999;
}