/********************************************************
********************************************************
******************* SPRITE IMAGES **********************
********************************************************
********************************************************/
.sprite_before::before, .sprite_after::after, .sprite {
    background-image: url('/img/sprites/7a9861be0c38bf7de05a57c56d73cf.jpg');
}

/********************************************************
 ************** *  SIZES AND MODES  * *******************
 ********************************************************/
.sprite_before.sprite_large::before, .sprite_after.sprite_large::after, .sprite.sprite_large {
    width: 200px;
    height: 200px;
    /*background-size: 4000px 6000px;*/
}

.sprite_before.sprite_medium::before, .sprite_after.sprite_medium::after, .sprite.sprite_medium {
    width: 100px;
    height: 100px;
    background-size: 2000px 3000px;
}

.sprite_before.sprite_small::before, .sprite_after.sprite_small::after, .sprite.sprite_small {
    width: 80px;
    height: 80px;
    background-size: 1600px 2400px;
}

.sprite_before.sprite_tiny::before, .sprite_after.sprite_tiny::after, .sprite.sprite_tiny {
    width: 28px;
    height: 28px;
    background-size: 550px 840px;
}

/* ~~~~~ BUILDINGS ~~~~~ */
.sprite_before.metalMine::before, .sprite_after.metalMine::after, .sprite.metalMine {
    background-position: 0 0;
}

.sprite_before.crystalMine::before, .sprite_after.crystalMine::after, .sprite.crystalMine {
    background-position: 5.25% 0;
}

.sprite_before.deuteriumSynthesizer::before, .sprite_after.deuteriumSynthesizer::after, .sprite.deuteriumSynthesizer {
    background-position: 10.52% 0;
}

.sprite_before.solarPlant::before, .sprite_after.solarPlant::after, .sprite.solarPlant {
    background-position: 15.78% 0;
}

.sprite_before.fusionPlant::before, .sprite_after.fusionPlant::after, .sprite.fusionPlant {
    background-position: 21.05% 0;
}

.sprite_before.roboticsFactory::before, .sprite_after.roboticsFactory::after, .sprite.roboticsFactory {
    background-position: 0 17.24%;
}

.sprite_before.naniteFactory::before, .sprite_after.naniteFactory::after, .sprite.naniteFactory {
    background-position: 26.31% 17.24%;
}

.sprite_before.shipyard::before, .sprite_after.shipyard::after, .sprite.shipyard {
    background-position: 5.25% 17.24%;
}

.sprite_before.metalStorage::before, .sprite_after.metalStorage::after, .sprite.metalStorage {
    background-position: 31.57% 0;
}

.sprite_before.crystalStorage::before, .sprite_after.crystalStorage::after, .sprite.crystalStorage {
    background-position: 36.84% 0;
}

.sprite_before.deuteriumStorage::before, .sprite_after.deuteriumStorage::after, .sprite.deuteriumStorage {
    background-position: 42.1% 0;
}

.sprite_before.researchLaboratory::before, .sprite_after.researchLaboratory::after, .sprite.researchLaboratory {
    background-position: 10.52% 17.24%;
}

.sprite_before.terraformer::before, .sprite_after.terraformer::after, .sprite.terraformer {
    background-position: 31.57% 17.24%;
}

.sprite_before.allianceDepot::before, .sprite_after.allianceDepot::after, .sprite.allianceDepot {
    background-position: 15.78% 17.24%;
}

.sprite_before.moonbase::before, .sprite_after.moonbase::after, .sprite.moonbase {
    background-position: 36.84% 17.24%;
}

.sprite_before.sensorPhalanx::before, .sprite_after.sensorPhalanx::after, .sprite.sensorPhalanx {
    background-position: 42.1% 17.24%;
}

.sprite_before.jumpGate::before, .sprite_after.jumpGate::after, .sprite.jumpGate {
    background-position: 47.36% 17.24%;
}

.sprite_before.missileSilo::before, .sprite_after.missileSilo::after, .sprite.missileSilo {
    background-position: 21.05% 17.24%;
}

.sprite_before.repairDock::before, .sprite_after.repairDock::after, .sprite.repairDock {
    background-position: 52.62% 17.24%;
}

/* ~~~~~ RESEARCHES ~~~~~ */
/* ~~ BASICS ~~ */
.sprite_before.energyTechnology::before, .sprite_after.energyTechnology::after, .sprite.energyTechnology {
    background-position: 0 68.96%;
}

.sprite_before.laserTechnology::before, .sprite_after.laserTechnology::after, .sprite.laserTechnology {
    background-position: 5.25% 68.96%;
}

.sprite_before.ionTechnology::before, .sprite_after.ionTechnology::after, .sprite.ionTechnology {
    background-position: 10.52% 68.96%;
}

.sprite_before.hyperspaceTechnology::before, .sprite_after.hyperspaceTechnology::after, .sprite.hyperspaceTechnology {
    background-position: 15.78% 68.96%;
}

.sprite_before.plasmaTechnology::before, .sprite_after.plasmaTechnology::after, .sprite.plasmaTechnology {
    background-position: 21.05% 68.96%;
}

/* ~~ DRIVES ~~ */
.sprite_before.combustionDriveTechnology::before, .sprite_after.combustionDriveTechnology::after, .sprite.combustionDriveTechnology {
    background-position: 26.31% 68.96%;
}

.sprite_before.impulseDriveTechnology::before, .sprite_after.impulseDriveTechnology::after, .sprite.impulseDriveTechnology {
    background-position: 31.57% 68.96%;
}

.sprite_before.hyperspaceDriveTechnology::before, .sprite_after.hyperspaceDriveTechnology::after, .sprite.hyperspaceDriveTechnology {
    background-position: 36.84% 68.96%;
}

/* ~~ ADVANCED~~ */
.sprite_before.espionageTechnology::before, .sprite_after.espionageTechnology::after, .sprite.espionageTechnology {
    background-position: 42.1% 68.96%;
}

.sprite_before.computerTechnology::before, .sprite_after.computerTechnology::after, .sprite.computerTechnology {
    background-position: 47.36% 68.96%;
}

.sprite_before.astrophysicsTechnology::before, .sprite_after.astrophysicsTechnology::after, .sprite.astrophysicsTechnology {
    background-position: 52.62% 68.96%;
}

.sprite_before.researchNetworkTechnology::before, .sprite_after.researchNetworkTechnology::after, .sprite.researchNetworkTechnology {
    background-position: 57.88% 68.96%;
}

.sprite_before.gravitonTechnology::before, .sprite_after.gravitonTechnology::after, .sprite.gravitonTechnology {
    background-position: 63.15% 68.96%;
}

/* ~~ COMBAT ~~ */
.sprite_before.weaponsTechnology::before, .sprite_after.weaponsTechnology::after, .sprite.weaponsTechnology {
    background-position: 73.68% 68.96%;
}

.sprite_before.shieldingTechnology::before, .sprite_after.shieldingTechnology::after, .sprite.shieldingTechnology {
    background-position: 78.94% 68.96%;
}

.sprite_before.armorTechnology::before, .sprite_after.armorTechnology::after, .sprite.armorTechnology {
    background-position: 68.42% 68.96%;
}

/* ~~~~~ SHIPS ~~~~~ */
/* ~~ CIVIL ~~ */
.sprite_before.transporterSmall::before, .sprite_after.transporterSmall::after, .sprite.transporterSmall {
    background-position: 42.1% 51.72%;
}

.sprite_before.transporterLarge::before, .sprite_after.transporterLarge::after, .sprite.transporterLarge {
    background-position: 47.36% 51.72%;
}

.sprite_before.colonyShip::before, .sprite_after.colonyShip::after, .sprite.colonyShip {
    background-position: 52.62% 51.72%;
}

.sprite_before.recycler::before, .sprite_after.recycler::after, .sprite.recycler {
    background-position: 57.89% 51.72%;
}

.sprite_before.espionageProbe::before, .sprite_after.espionageProbe::after, .sprite.espionageProbe {
    background-position: 63.15% 51.72%;
}

.sprite_before.solarSatellite::before, .sprite_after.solarSatellite::after, .sprite.solarSatellite {
    background-position: 26.31% 0;
}

.sprite_before.resbuggy::before, .sprite_after.resbuggy::after, .sprite.resbuggy {
    background-position: 84.20% 51.72%;
}

.sprite_before.explorer::before, .sprite_after.explorer::after, .sprite.explorer {
    background-position: 78.94% 51.72%;
}

.sprite_before.reaper::before, .sprite_after.reaper::after, .sprite.reaper {
    background-position: 73.68% 51.72%;
}

/* ~~ MILITARY ~~ */
.sprite_before.fighterLight::before, .sprite_after.fighterLight::after, .sprite.fighterLight {
    background-position: 0 51.72%;
}

.sprite_before.fighterHeavy::before, .sprite_after.fighterHeavy::after, .sprite.fighterHeavy {
    background-position: 5.25% 51.72%;
}

.sprite_before.cruiser::before, .sprite_after.cruiser::after, .sprite.cruiser {
    background-position: 10.53% 51.72%;
}

.sprite_before.battleship::before, .sprite_after.battleship::after, .sprite.battleship {
    background-position: 15.78% 51.72%;
}

.sprite_before.interceptor::before, .sprite_after.interceptor::after, .sprite.interceptor {
    background-position: 21.05% 51.72%;
}

.sprite_before.bomber::before, .sprite_after.bomber::after, .sprite.bomber {
    background-position: 26.31% 51.72%;
}

.sprite_before.destroyer::before, .sprite_after.destroyer::after, .sprite.destroyer {
    background-position: 31.57% 51.72%;
}

.sprite_before.deathstar::before, .sprite_after.deathstar::after, .sprite.deathstar {
    background-position: 36.84% 51.72%;
}

/* ~~~~~ DEFENSES ~~~~~ */
.sprite_before.rocketLauncher::before, .sprite_after.rocketLauncher::after, .sprite.rocketLauncher {
    background-position: 0 34.48%;
}

.sprite_before.laserCannonLight::before, .sprite_after.laserCannonLight::after, .sprite.laserCannonLight {
    background-position: 5.25% 34.48%;
}

.sprite_before.laserCannonHeavy::before, .sprite_after.laserCannonHeavy::after, .sprite.laserCannonHeavy {
    background-position: 10.52% 34.48%;
}

.sprite_before.gaussCannon::before, .sprite_after.gaussCannon::after, .sprite.gaussCannon {
    background-position: 15.78% 34.48%;
}

.sprite_before.ionCannon::before, .sprite_after.ionCannon::after, .sprite.ionCannon {
    background-position: 21.05% 34.48%;
}

.sprite_before.plasmaCannon::before, .sprite_after.plasmaCannon::after, .sprite.plasmaCannon {
    background-position: 26.31% 34.48%;
}

.sprite_before.shieldDomeSmall::before, .sprite_after.shieldDomeSmall::after, .sprite.shieldDomeSmall {
    background-position: 31.57% 34.48%;
}

.sprite_before.shieldDomeLarge::before, .sprite_after.shieldDomeLarge::after, .sprite.shieldDomeLarge {
    background-position: 36.84% 34.48%;
}

/* ~~~~~ MISSILES ~~~~~ */
.sprite_before.missileInterceptor::before, .sprite_after.missileInterceptor::after, .sprite.missileInterceptor {
    background-position: 42.1% 34.48%;
}

.sprite_before.missileInterplanetary::before, .sprite_after.missileInterplanetary::after, .sprite.missileInterplanetary {
    background-position: 47.36% 34.48%;
}

/********************************************************
 ********************************************************
 **************** END SPRITE IMAGES *********************
 ********************************************************
 ********************************************************/
.technology .icon, .technology .upgrade, .technology .acceleration, .technology .targetlevel, .technology .targetamount, .technology .countdown, .technology .level, .technology .amount {
    cursor: pointer;
}

.technology, .technology .icon {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
}

.technology.interactive {
    margin-bottom: 30px;
}

.technology .icon {
    background-clip: padding-box;
    border: 2px solid #0d1014;
    overflow: hidden;
}

.technology .icon:hover, .technology.showsDetails .icon {
    border: 2px solid #ff9600;
}

.technology .icon.large {
    width: 200px;
    height: 200px;
    border-radius: 6px;
}

.technology .icon.medium {
    width: 100px;
    height: 100px;
    border-radius: 6px;
}

.technology .icon.small {
    width: 80px;
    height: 80px;
    border-radius: 6px;
}

.technology .icon.tiny {
    width: 28px;
    height: 28px;
    border-radius: 2px;
}

.technology[data-status="active"] .icon::after, .technology[data-status="disabled"] .icon::after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
}

.technology[data-status="disabled"] .icon::after {
    background: repeating-linear-gradient(-45deg, rgba(255, 150, 0, .33), rgba(255, 150, 0, .33) 2px, transparent 3px, transparent 7px);
}

.technology[data-status="off"] .icon {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.technology[data-status="off"] .icon::after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    content: "";
}

.technology .icon .upgrade {
    position: absolute;
    left: 0;
    top: 0;
    padding: 0;
    width: 22px;
    height: 14px;
    border-bottom-right-radius: 4px;
    background: linear-gradient(#53a423, #2f6c04);
    color: #2b6303;
    text-align: center;
    z-index: 2;
}

.technology .icon .buildmulti {
    position: absolute;
    left: 0;
    top: 16px !important;
    padding: 0;
    width: 22px;
    height: 14px;
    border-bottom-right-radius: 4px;
    background: linear-gradient(#53a423, #2f6c04);
    color: #102a02;
    text-align: center;
    font-size: 10px;
    z-index: 2;
}

.technology .icon .upgrade::after {
    position: absolute;
    left: 4px;
    top: 3px;
    width: 0;
    height: 0;
    border-style: solid;
    font-weight: bold;
    border-width: 0 7px 7px 7px;
    border-color: transparent transparent #2b6303 transparent;
    content: "";
}

.technology .icon .buildmulti:hover, .technology .icon .upgrade:hover {
    background: linear-gradient(#93e438, #54ad08);
    color: #4fa008;
}

.technology .icon .buildmulti:hover::after, .technology .icon .upgrade:hover::after {
    border-color: transparent transparent #4fa008 transparent;
}

.technology .icon .acceleration {
    display: inline-block;
    position: absolute;
    right: -20px;
    top: 10px;
    box-sizing: border-box;
    width: 79px;
    border: 1px solid #2b6303;
    background: linear-gradient(#93e438, #54ad08);
    color: #fff;
    font-size: 11px;
    line-height: 15px;
    text-align: center;
    transform: rotate(45deg);
    z-index: 2;
}

.technology .icon .level, .technology .icon .targetlevel, .technology .icon .amount, .technology .icon .targetamount {
    display: inline-block;
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    padding: 0 5px;
    text-align: right;
    font-size: 11px;
    line-height: 15px;
    z-index: 2;
}

.technology .icon .targetlevel, .technology .icon .targetamount {
    right: 0;
    top: 0;
    width: 50%;
    border-bottom-left-radius: 7px;
    background: linear-gradient(#1b222d, #0e1117);
    color: #9c0;
    padding: 0px;
}

.technology .icon .level, .technology .icon .amount {
    right: 0;
    bottom: 0;
    border-top-left-radius: 15px;
    background: linear-gradient(#0e1117, #1b222d);
    color: #ff9600;
}

.technology .icon .level .bonus, .technology .icon .amount .bonus {
    color: #9c0;
}

.technology .icon time {
    position: absolute;
    display: inline-block;
    width: 100%;
    background: #0d1014;
    color: #fff;
    font-size: 10px;
    line-height: 18px;
    text-align: center;
    font-weight: bold;
    z-index: 2;
}

.technology .icon.medium time {
    top: 39px;
}

.technology .icon.small time {
    top: 29px;
}

.technology .icon.tiny[data-acceleration]::before, .technology .icon.tiny .upgrade, .technology .icon.tiny .targetlevel, .technology .icon.tiny time, .technology .icon.tiny .level {
    display: none;
}

.technology input:disabled {
    cursor: not-allowed;
}

.technology input[type="number"], .technology input[type="text"] {
    position: absolute;
    bottom: -23px;
    left: 5%;
    box-sizing: border-box;
    width: 90%;
    height: 25px;
    background: #b3c3cb;
    border: 1px solid #668599;
    border-bottom-color: #d3d9de;
    border-radius: 3px;
    box-shadow: inset 0 1px 3px 0 #454f54;
    color: #000;
    text-align: center;
    line-height: 18px;
    z-index: 2;
    -moz-appearance: textfield;
    padding: 2px 5px;
    font-size: 12px;
}

.technology input[type="number"]:focus, .technology input[type="text"]:focus {
    background: #fff;
}

.technology input[type="number"][disabled], .technology input[type="text"][disabled] {
    background-color: #424548;
    border: 1px solid #44484B;
    border-bottom-color: #575C60;
    box-shadow: inset 0 1px 3px 0 #27292B;
}

.technology input[type="number"]::-webkit-inner-spin-button, .technology input[type="number"]::-webkit-outer-spin-button, .technology input[type="text"]::-webkit-inner-spin-button, .technology input[type="text"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

#technologydetails_wrapper {
    position: absolute;
    top: 0;
    left: 8px;
    width: 654px;
    height: 300px;
    display: none;
    overflow: hidden;
}

#technologydetails_content {
    position: absolute;
    top: 300px;
    width: 654px;
    height: 300px;
    display: none;
    background-image: url(/img/icons/dab435e02e060b479363268ca63b0e.gif);
}

#technologydetails_wrapper.slide-up {
    display: block;
}

#technologydetails_wrapper.slide-down {
    display: block;
}

#technologydetails_wrapper.slide-up #technologydetails_content {
    display: block;
    animation-name: anim-techdetails-slide-up;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

@keyframes anim-techdetails-slide-up {
    from {
        top: 300px;
    }

    to {
        top: 0;
    }
}

#technologydetails_wrapper.slide-down #technologydetails_content {
    display: block;
    animation-name: anim-techdetails-slide-down;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

@keyframes anim-techdetails-slide-down {
    from {
        top: 0;
    }

    to {
        top: 300px;
    }
}

#technologydetails {
    position: absolute;
    left: 0;
    top: 0;
    box-sizing: border-box;
    width: 654px;
    height: 100%;
    /* @TODO-merge this was 250px in 6.7.2 */
    border: 1px solid #000;
    color: #848484;
    font-size: 11px;
    line-height: 13px;
}

#technologydetails input, #technologydetails button {
    font: 11px Verdana,Arial,Helvetica,sans-serif;
}

#technologydetails input:disabled {
    cursor: not-allowed !important;
}

#technologydetails input[type="number"] {
    -moz-appearance: textfield;
}

#technologydetails input[type="number"]::-webkit-inner-spin-button, #technologydetails input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

#technologydetails button {
    padding: 0;
    margin: 0;
    cursor: pointer;
    background-color: transparent;
}

#technologydetails button.recomission:disabled span, #technologydetails button[disabled].recomission span {
    color: #444444;
}

#technologydetails button:disabled {
    -webkit-filter: grayscale(100%) !important;
    filter: grayscale(100%) !important;
    cursor: not-allowed !important;
}

#technologydetails > .lifeformsprite, #technologydetails > .sprite {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 200px;
    height: 200px;
    border: 2px solid #000;
    border-top-width: 1px;
    border-left-width: 1px;
    background-repeat: no-repeat;
    content: "";
}

#technologydetails.metalMine::before {
    background-image: url("/img/icons/740dcd4d63f5ebf243d4ebc063f9c8.jpg");
}

#technologydetails.crystalMine::before {
    background-image: url("/img/icons/88fe97653b1f67865158d625f1547a.jpg");
}

#technologydetails.deuteriumSynthesizer::before {
    background-image: url("/img/icons/371d3e9fd872e7e48cc3ac36083808.jpg");
}

#technologydetails.solarPlant::before {
    background-image: url("/img/icons/1fb8ae6deba22d236ff0e097cccf24.jpg");
}

#technologydetails.fusionPlant::before {
    background-image: url("/img/icons/4e0956ffc1ccc50e50f9705dbb135f.jpg");
}

#technologydetails.solarSatellite::before {
    background-image: url("/img/icons/8b8ffde4647780addf9d5c9ed7242d.jpg");
}

#technologydetails.metalStorage::before {
    background-image: url("/img/icons/14bda77ea32ae4ec81bd48bc1193aa.jpg");
}

#technologydetails.crystalStorage::before {
    background-image: url("/img/icons/65f5a22c411f0f92cb9c61bc091272.jpg");
}

#technologydetails.deuteriumStorage::before {
    background-image: url("/img/icons/87a9fdcc304c142a0979868bd9f2fe.jpg");
}

#technologydetails.roboticsFactory::before {
    background-image: url("/img/icons/ab1ee5c67764e116c0a8ac6ac56ad0.jpg");
}

#technologydetails.shipyard::before {
    background-image: url("/img/icons/f38d81197757d93a5cc1f93c6caf1e.jpg");
}

#technologydetails.researchLaboratory::before {
    background-image: url("/img/icons/4711ec76906e2499c5f04faab8c91c.jpg");
}

#technologydetails.allianceDepot::before {
    background-image: url("/img/icons/89f728d3c0a8a6c04632b9a7da41ff.jpg");
}

#technologydetails.missileSilo::before {
    background-image: url("/img/icons/9a4f1294c1177982baf7f3491eb367.jpg");
}

#technologydetails.naniteFactory::before {
    background-image: url("/img/icons/0b00af8c6af73442d898967ba3d75c.jpg");
}

#technologydetails.terraformer::before {
    background-image: url("/img/icons/c70b53a6ef5e805bb4f76752508755.jpg");
}

#technologydetails.repairDock::before {
    background-image: url("/img/icons/f9adbc97f5e23c06171b7c0d442dad.jpg");
}

#technologydetails.gaussCannon::before {
    background-image: url("/img/icons/6c5ab712012b75988af441953b00cc.jpg");
}

#technologydetails.ionCannon::before {
    background-image: url("/img/icons/a51f976ad3c56c646a7147fef901fb.jpg");
}

#technologydetails.laserCannonHeavy::before {
    background-image: url("/img/icons/6a33ded8d6350d64ad6c99a649cbc2.jpg");
}

#technologydetails.laserCannonLight::before {
    background-image: url("/img/icons/a0e8947f32c547bbd5b84ee6689431.jpg");
}

#technologydetails.plasmaCannon::before {
    background-image: url("/img/icons/c51bdcc4e5e7d0a3f2957e1b8c7da9.jpg");
}

#technologydetails.rocketLauncher::before {
    background-image: url("/img/icons/e5fd7e6938872929193515fbe886c9.jpg");
}

#technologydetails.shieldDomeLarge::before {
    background-image: url("/img/icons/d07822241bdac0f3a7ea39ecb20f5e.jpg");
}

#technologydetails.shieldDomeSmall::before {
    background-image: url("/img/icons/cd9c59194ad5a8efa9ba19bebb7687.jpg");
}

#technologydetails.missileInterceptor::before {
    background-image: url("/img/icons/d25551203ee00b0ad92f511af220a3.jpg");
}

#technologydetails.missileInterplanetary::before {
    background-image: url("/img/icons/19a87421615f8535f19c8c67041c27.jpg");
}

#technologydetails.battleship::before {
    background-image: url("/img/icons/ce8156b25e7fd980aa6a6cd93f1bdd.jpg");
}

#technologydetails.bomber::before {
    background-image: url("/img/icons/708c8feb89852e5cc4f2c8d2c26355.jpg");
}

#technologydetails.colonyShip::before {
    background-image: url("/img/icons/b0c7dc5cc62762d6c1bd953e71b6a8.jpg");
}

#technologydetails.cruiser::before {
    background-image: url("/img/icons/3bac05cfa42a9592f813cf1efda41e.jpg");
}

#technologydetails.deathstar::before {
    background-image: url("/img/icons/38ef392ed92bdba8902e1916796f22.jpg");
}

#technologydetails.destroyer::before {
    background-image: url("/img/icons/eecd440a67e0a7289067ae5988159d.jpg");
}

#technologydetails.espionageProbe::before {
    background-image: url("/img/icons/a8071800b0edd310e8841abd3aa0e3.jpg");
}

#technologydetails.fighterHeavy::before {
    background-image: url("/img/icons/70d5d5e12df1afaf691438e28edefc.jpg");
}

#technologydetails.fighterLight::before {
    background-image: url("/img/icons/c083fda984f5a6b64793c4ff164d5e.jpg");
}

#technologydetails.interceptor::before {
    background-image: url("/img/icons/72ec975641a9a2e7bc8388bf085b70.jpg");
}

#technologydetails.recycler::before {
    background-image: url("/img/icons/bfc738a6c1cd3dab0b74f80114e810.jpg");
}

#technologydetails.transporterLarge::before {
    background-image: url("/img/icons/b4dcc8521732e3f6da8b725ccb4f6f.jpg");
}

#technologydetails.transporterSmall::before {
    background-image: url("/img/icons/dec0f3dcde9c58ee64451af93ae084.jpg");
}

#technologydetails.armorTechnology::before {
    background-image: url("/img/icons/836b5a2aa4285748c76be9592a581d.jpg");
}

#technologydetails.astrophysicsTechnology::before {
    background-image: url("/img/icons/98c2ca2074ddc7c25f0192ae556d6e.jpg");
}

#technologydetails.combustionDriveTechnology::before {
    background-image: url("/img/icons/b95f638b8c2e0c64ea2a5b42967f20.jpg");
}

#technologydetails.computerTechnology::before {
    background-image: url("/img/icons/cb903f6fdf754cf21cb29bcc0a5ee2.jpg");
}

#technologydetails.energyTechnology::before {
    background-image: url("/img/icons/992bbdde9fa00d9415b02131fcec93.jpg");
}

#technologydetails.espionageTechnology::before {
    background-image: url("/img/icons/d8bebba92042aa1599d72fdb126545.jpg");
}

#technologydetails.gravitonTechnology::before {
    background-image: url("/img/icons/6d51b8ebfbd3eb30bdbd37947120fb.jpg");
}

#technologydetails.hyperspaceDriveTechnology::before {
    background-image: url("/img/icons/2fb0a1fd7e1f6ae370213e7d880363.jpg");
}

#technologydetails.hyperspaceTechnology::before {
    background-image: url("/img/icons/d914ac6359daf1a75375e9d91ed5bd.jpg");
}

#technologydetails.impulseDriveTechnology::before {
    background-image: url("/img/icons/0cae6a535b333ca9e84413fc33a3d1.jpg");
}

#technologydetails.ionTechnology::before {
    background-image: url("/img/icons/256ee84678fca3de44e596cd28c45f.jpg");
}

#technologydetails.laserTechnology::before {
    background-image: url("/img/icons/a92f70fc0d06f0d712f8432929f365.jpg");
}

#technologydetails.plasmaTechnology::before {
    background-image: url("/img/icons/b2158b5962495aaad279831d4cc4f1.jpg");
}

#technologydetails.researchNetworkTechnology::before {
    background-image: url("/img/icons/7bb36201c75d01fe605e800ca05ef3.jpg");
}

#technologydetails.shieldingTechnology::before {
    background-image: url("/img/icons/36203bf6cc07b1592b41178b8a7d5e.jpg");
}

#technologydetails.weaponsTechnology::before {
    background-image: url("/img/icons/27e8861e7be3dc8bf6810219be0ce2.jpg");
}

#technologydetails .content {
    position: absolute;
    left: 208px;
    right: 0;
    height: 200px;
    overflow: hidden;
}

#technologydetails .close {
    position: absolute;
    right: 5px;
    top: 6px;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 1px solid black;
    background: #395281;
    color: #fff;
    font-size: 14px;
    line-height: 14px;
    z-index: 2;
}

#technologydetails .level, #technologydetails .amount {
    position: absolute;
    right: 26px;
    top: 0;
    color: #ff9600;
    line-height: 27px;
}

#technologydetails h3 {
    position: absolute;
    right: 0;
    top: 0;
    width: 450px;
    background: url("/img/icons/a4e7913209228ebaf2297429aeb87b.png");
    color: #ff9600;
    font: bold 12px/27px Verdana,Arial,Helvetica,sans-serif;
    text-indent: 26px;
}

#technologydetails h3::before {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 26px;
    height: 27px;
    background: url("/img/icons/127bd495b9325216af08a588ecc540.png");
    content: "";
}

#technologydetails .information {
    box-sizing: border-box;
    padding: 5px;
    line-height: 14px;
    margin-top: 26px;
}

#technologydetails .information > ul {
    display: flex;
    flex-flow: column;
}

#technologydetails .information > ul.narrow {
    width: 235px;
}

#technologydetails .information > ul li {
    margin-bottom: 11px;
}

#technologydetails .value {
    color: #fff;
    font-weight: bold;
}

#technologydetails .bonus {
    color: #9c0;
}

#technologydetails .costs {
    position: absolute;
    top: 130px;
}

#technologydetails .costs p {
    margin-bottom: 5px;
}

#fleet2 #resources {
    float:left;
    height:150px;
    width:305px;
    margin: 0;
    padding: 0;
    display:inline;
    position: relative;
}

#fleet2 #resources.lifeforms-enabled {
    height: 215px;
}

#fleetdispatchcomponent #sendfleet #information {
    float:left;
    margin-left:25px;
    display:inline;
}

#fleet2 #sendfleet #resources {
    margin-left:18px;
    position:relative;
}

#fleetdispatchcomponent #sendfleet #options .content,
#fleetdispatchcomponent #sendfleet #information .content {
    padding:25px 0 0 33px;
    line-height:15px;
}

#fleetdispatchcomponent #planet .content span.value,
#fleetdispatchcomponent #planet .content span.order,
#fleetdispatchcomponent #planet .content span.destination,
#fleet2 #planet span.value,
#fleetdispatchcomponent #planet span.value {color:#fff;}

#fleet2 #resources .res_wrap {
    background: #0d151b url("/img/icons/5fbbb1876fcff20a8a265c06862495.png") 0 -60px repeat-x; /* Old browsers */
    background: -moz-linear-gradient(top,  #0d151b 0%, #1f2a35 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0d151b), color-stop(100%,#1f2a35)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #0d151b 0%,#1f2a35 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #0d151b 0%,#1f2a35 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #0d151b 0%,#1f2a35 100%); /* IE10+ */
    background: linear-gradient(top,  #0d151b 0%,#1f2a35 100%); /* W3C */
    border: 1px solid #252f3a;
    height: 32px;
    margin:5px 0 8px 0;
    padding: 2px;
    width: 152px;
}

#fleet2 #resources .fleet_dispatch_toggle_wrap {
    display: flex;
    align-items: center;
    height: 25px;
    margin:5px 0 0 0;
    padding: 2px;
    min-width: 152px;
    box-sizing: border-box;
}

#fleet2 .res input {
    height: 17px;
    margin: 1px 0;
    width: 76px;
    font-size: 11px;
    padding: 0 2px;
}

#fleet2 .res_img {
    margin: 1px 0 0;
    position: absolute;
}
#fleet2 .res {
    margin: 0 0 0 50px;
    width: 82px;
}

#fleet2 #resources.lifeforms-enabled .res_wrap {
    width: 146px;
}
#fleet2 .lifeforms-enabled .res {
    width: 95px;
}
#fleet2 .lifeforms-enabled .res input {
    width: 89px;
}

#loadAllResources {
    background: url("/img/icons/fcc481845b0bec05eef8bdc2d22309.png") no-repeat;
    text-align: center;
    position: absolute;
    top: 5px;
    left: 160px;
    font-size: 11px;
    width: 139px;
    height: 103px;
    z-index: 0;
}

#fleet2 #sendfleet #resources a.max,
#fleet2 #sendfleet #resources a.min { }
#fleet2 #sendfleet #resources a.max {	margin-left:48px;  }

#fleet2 #resources .allResourcesWrap {
    height: 32px;
    width: 32px;
    margin: 10px auto;
}
#fleet2 a#allresources {
    display:block;
    background: url("/img/icons/f5f81e8302aaad56c958c033677fb8.png") -374px -162px no-repeat;
    height: 32px;
    width: 32px;
}

.no-touch #fleet2 #resources a#allresources:hover { background-position: -374px -194px; }

#loadRoom {
    font-size: 11px;
    left: 161px;
    position: absolute;
    text-align: center;
    top: 92px;
    z-index: 0;
}

#fleet2 .bar_container {
    margin: 3px 5px;
    width: 130px;
}

#fleet2 #sendfleet #summary {margin-top:50px;}

#fleet2 #sendfleet #summary img {
    vertical-align:middle;
    padding-bottom:5px;
}

#fleet2 #sendfleet #summary .order,
#fleet2 #sendfleet #summary .destination {	color:#fff;	}

#fleet2 a.start:link,
#fleet2 a.start:visited,
.no-touch #fleet2 a.start:hover,
#fleet2 a.start:active {
    display:block;
    float:right;
    cursor:pointer;
    width: 276px;
    height: 56px;
    background:url("/img/icons/d5c8b4d6c6b63467b8392874a373b7.jpg") no-repeat 0 -56px;
    color:#fff;
    text-decoration:none;
    font-weight:bold;
    margin:0 auto 0;
}

.no-touch #fleet2 a.start:hover {	background:url("/img/icons/d5c8b4d6c6b63467b8392874a373b7.jpg") no-repeat;		}

#fleet2 a.start.off:link,
#fleet2 a.start.off:visited,
.no-touch #fleet2 a.start.off:hover,
#fleet2 a.start.off:active {	background:url("/img/icons/d5c8b4d6c6b63467b8392874a373b7.jpg") 0 -112px no-repeat;		}

#fleet1 a.continue:active,
#fleet1 a.continue:link,
#fleet1 a.continue:visited,
#fleet2 a.continue:link,
#fleet2 a.continue:visited,
#fleet2 a.back:active,
#fleet2 a.back:link,
#fleet2 a.back:visited
{
    display:block;
    width:104px;
    height:38px;
    background:transparent url("/img/icons/f5f81e8302aaad56c958c033677fb8.png") 0 -240px;
    margin: 0 10px 0 10px;
    float:right;
    overflow:hidden;
    padding:0;
    text-decoration:none;
}

#naviActions {
    padding: 10px 20px;
    position: relative;
    z-index: 2;
}

#fleet1 a.continue:active,
#fleet2 a.continue:active,
.no-touch #fleet1 a.continue:hover,
.no-touch #fleet2 a.continue:hover,
.no-touch #station #jumpgate a#continue:hover,
.no-touch #station-moon #jumpgate a#continue:hover {
    background-position:-104px -240px;
    cursor:pointer;
    text-decoration:none;
}

#fleet2 a.back:link,
#fleet2 a.back:visited,
#fleet2 a.back:active,

.no-touch #fleet2 a.back:hover {
    background-position: -104px -278px;
    cursor:pointer;
    text-decoration:none;
}

#fleet1 a.continue.off:link,
#fleet1 a.continue.off:visited,
#fleet2 a.continue.off:link,
#fleet2 a.continue.off:visited

#fleet1 a.continue.off:active,
#fleet2 a.continue.off:active,
.no-touch #fleet1 a.continue.off:hover,
.no-touch #fleet2 a.continue.off:hover
{ background-position: -206px -240px;}

#fleet1 a.continue span,
#fleet2 a.continue span,
#fleet2 a.start span,
#fleet2 a.back span,
#fleet1 a.continue.on:link span,
#fleet1 a.continue.off:link span,
#fleet2 a.continue.on:link span,
#fleet2 a.continue.off:link span {
    display:block;
    color:#fff;
    text-align:center;
    height:38px;
    line-height:38px;
    overflow:hidden;
    font-weight:bold;
    text-transform:uppercase;
    font-size:12px;
}

#fleet2 a.start span { padding-top:20px; }

#fleet2 .briefing_overlay {
    background: rgba(12, 16, 20, 0.95);
    color: #848484;
    min-height: calc(100% - 30px);
    padding: 12px;
    position: absolute;
    text-align: left;
    width: 100%;
    z-index: 3;
    box-sizing: border-box;
    margin-top: 30px;
}

#fleetdispatchcomponent #planet #movements,
#fleetdispatchcomponent #planet #slots {
    height:25px;
    width:231px;
    position:absolute;
    right:3px;
    bottom:36px;
    text-align:center;
    font-size:11px;
}

#fleetdispatchcomponent #planet #movements a:link,
#fleetdispatchcomponent #planet #movements a:visited,
.no-touch #fleetdispatchcomponent #planet #movements a:hover,
#fleetdispatchcomponent #planet #movements a:active {text-decoration:none;}

#fleetdispatchcomponent #planet #slots {
    background: url("/img/icons/f5f81e8302aaad56c958c033677fb8.png") -143px -162px no-repeat;
    bottom:9px;
    height:19px;
    font-size:11px;
    width:217px;
    padding:6px 7px 0 7px;
}

#movement #planet #slots {
    position:absolute;
    right:3px;
    bottom:9px;
}

#fleetdispatchcomponent #planet #movements img {
    vertical-align:middle;
    margin-right:5px;
}



#fleet2 #buttonz ul#missions a:active,
.no-touch #fleet2 #buttonz ul#missions a:hover,
#fleet2 #buttonz ul#missions  a.selected { color:#F1F1F1; }

#fleetdispatchcomponent #planet div a:link,
#fleetdispatchcomponent #planet div a:visited,
#fleetdispatchcomponent #planet div a:active,
#fleetdispatchcomponent #planet div {
    color:#848484;
    text-decoration:none;
}

.no-touch #fleetdispatchcomponent #planet div a:hover {	text-decoration:underline;	}

#fleetdispatchcomponent #warning,
#fleet2 #warning,
#movement #warning {
    height:150px;
    width:670px;
    background:url("/img/icons/77c5d0b60f22b387b9dc90e2c4a30e.gif") no-repeat;
    margin:1px auto;
}

#fleetdispatchcomponent #warning h3,
#fleet2 #warning h3,
#movement #warning h3 { padding:7px 0;}

#fleetdispatchcomponent #warning p,
#fleet2 #warning p,
#movement #warning p { padding:15px;}

#fleetdispatchcomponent #warning p,
#fleet2 #warning p,
#fleetdispatchcomponent #warning h3,
#fleet2 #warning h3,
#movement #warning p,
#movement #warning h3 {
    text-align:center;
    font-weight:700;
    color:#B00000;
}

#fleetdispatchcomponent #warning p img,
#fleet2 #warning p img,
#movement #warning p img {
    vertical-align:top;
    padding-right:5px;
}

#fleetdispatchcomponent .icon_warning { margin: 0 0 -3px 0; }

#fleet2 #buttonz ul {
    list-style-type:square;
    color:#848484;
    float:left;
    display:inline; /* IE6 fix */
    text-align:left;
}

#fleet2 #buttonz ul li {
    color:#6F9FC8;
    font: 700 11px/15px Verdana, Arial, Helvetica, sans-serif;
}

#fleet2 #buttonz ul li span {
    color:#6F9FC8;
    font-weight:100;
}
#fleet2 #buttonz ul li span.tooltip {
    color: #fff;
    cursor: help;
    font-weight: 600;
    margin-bottom: 4px;
}
#fleet2 #buttonz ul li#fightAfterRetreat {
    margin-bottom: 6px;
}

#fleet1 a.continue.on:link,
#fleet1 a.continue.off:link {
    margin: 0;
    padding:0;
    height:38px;
    width:104px;
    float:right;
    position:static;
    display:inline;
}

#fleet2 #holdtimeline select, #fleet2 #expeditiontimeline select {
    width: 45px;
}

/*******************************
STANDARTFLOTTEN
*******************************/
#fleetTemplatesEdit .fleet_tpl_name {
    display: inline-block;
    min-height: 30px;
    padding: 5px;
    text-align: right;
    width: 205px;
}

#fleetTemplates.list {
    background: transparent url("/img/icons/6ed70123ac0cf419b30c31d99ae208.png") repeat;
    background: rgba(0,0,0,0.6);
    margin: 0 0 10px 0;
}
#fleetTemplates td {height:35px;}

#fleetTemplates td.textCenter {text-align:center;}

#fleetTemplates td.fleetDesc .fleetDescCont {
    width:185px;
    overflow:hidden;
}

#sftcontainer th.label {padding:5px 3px 10px 3px;}
#sftcontainer th {padding:3px 0;}
#fleetTemplates td { padding:2px 0;}

#sftcontainer th {text-align:center;}

#sftcontainer tr.separator th {border-bottom:1px dotted #848484;}

#sftcontainer th.fleet_id {width:30px;}
#sftcontainer th.fleet_name {width:200px;}
#sftcontainer th.fleet_actions {width:90px;}

#sftcontainer td a:link,
#sftcontainer td a:visited,
.no-touch #sftcontainer td a:hover,
#sftcontainer td a:active,
#jumpgate a:link,
#jumpgate a:visited,
#jumpgate a:active {
    text-decoration:none;
}
.no-touch #jumpgate a:hover {	text-decoration:underline;}

#sftcontainer td input.textinput {
    color:#848484;
    font-size:11px;
    border:1px solid #141a1e;
    background-color:#274650;
    padding:2px 5px;
}

#sftcontainer td input.textinput { height:13px; line-height:13px; padding:1px 3px;margin:0;}

#fleetdispatchcomponent #sftcontainer a.close {
    float:right;
    display:inline;
    margin-right:10px;
}

#fleet2 #missionNameWrapper {
    color:#A26D00;
    font-size:12px;
    font-weight:bold;
    text-align:left;
    position: relative;
    z-index: 2;
    padding: 18px;
}
#fleet2 #missionNameWrapper.off {
    color:#848484;
}

#fleet2 .mission_description { font-weight: 100; }

#fleetdispatchcomponent #planet #slots img {
    float:left;
    margin: -3px 0 0 2px;
    display:inline;
}

#fleet2 #remainingresources {
    float:none;
    margin:0 5px 0 0;
    text-align:center;
    width:100%;
}

#fleetdispatchcomponent a#sendall:link,
#fleetdispatchcomponent a#sendall:visited,
.no-touch #fleetdispatchcomponent a#sendall:hover,
#fleetdispatchcomponent a#sendall:active { text-decoration:none;}

#sftcontainer a.close_details {margin: -1px 8px 0 0
}

#sftcontainer #fleetTemplatesEdit .shipDesc{ padding:4px 5px;}
#sftcontainer #fleetTemplatesEdit .shipDesc img { float:left;margin:1px 10px 2px 0;}
#sftcontainer .fleetDesc a:link,
#sftcontainer .fleetDesc a:visited,
.no-touch #sftcontainer .fleetDesc a:hover,
#sftcontainer .fleetDesc a:active { display:block;}
#sftcontainer .fleetDesc-hover { background-color:#212933}


/* *****************************************************************************
   FILL LEVEL BAR FOR STORAGE ROOMS AND CARGO SPACE
***************************************************************************** */
.bar_container,
.filllevel_bar,
.filllevel_undermark,
.filllevel_middlemark,
.filllevel_overmark,
.premium_bar {
    background-image: url(/img/icons/fbe2638880f7c292a43439c0f328ad.png);
    background-repeat: repeat-x;
}

.bar_container {
    background-position: 0 -24px;
    height: 8px;
    width: 290px;
    border: 1px solid black;
    border-radius: 3px;
    box-shadow: 0 0 3px #000;
}

.filllevel_bar {
    border-radius: 3px;
    box-shadow: inset 0 0 1px #000;
    height: 100%;
    float: left;
    width: 0;
}
.premium_bar {
    background-position: 0 -32px;
    height: 100%;
    float: left;
    width: 0;
}
.filllevel_undermark { background-position: 0 -16px; }
.filllevel_middlemark { background-position: 0 -8px; }
.filllevel_overmark { background-position: 0 0; }



/* **************************
AJAX LOADING INDICATOR
************************** */

.ajax_loading {
    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:100%;

    box-sizing: border-box;

    padding:5px 10px;

    z-index:10;

    display:none;
}

.ajax_loading > .ajax_loading_overlay {
    position:relative;

    width:100%;
    height:100%;

    background-color:rgba(0,0,0,0.7);

    box-shadow: 0 0 20px #000;
}
.ajax_loading > .ajax_loading_overlay > .ajax_loading_indicator {
    position:absolute;

    left:50%;
    top:50%;

    width:128px;
    height:128px;

    margin-left:-64px;
    margin-top:-64px;

    background:url(/img/icons/6e0f46d7504242302bc8055ad9c8c2.gif);
}

#fleetRetreatSquareCheckbox {
    height: 16px;
    width: 16px;
}

#fleetRetreatSquareCheckbox > label {
    width: 12px;
    height: 12px;
}

#fleetRetreatSquareCheckbox > label::after {
    width: 8px;
    height: 8px;
}


/*
 * FLEET STATUS BOX
 */
.fleetStatus {
    background: transparent url("/img/icons/8b1b8753656d41d90d32e41a2000af.gif") no-repeat;
    color: #7c8e9a;
    font: normal 10px Verdana, Arial, Helvetica, sans-serif;
    height: 28px;
    line-height:28px;
    margin:0 auto;
    overflow: hidden;
    position:relative;
    width:658px;
}


.fleetStatus span a img {
    margin-right:7px;
    vertical-align:middle;
}

.fleetStatus span a,
.fleetStatus span a:link { text-decoration:none;}

.no-touch .fleetStatus span a:hover span{
    color:#6F9FC8;
    text-decoration:underline;
}

.fleetStatus .icon_reload { margin: 0 0 -4px; }

.fleetStatus span.current,
.fleetStatus span.all { color:#fff;}

.fleetStatus .fleetSlots,
.fleetStatus .expSlots { margin-left:108px;}

.fleetStatus .closeAll,
.fleetStatus .newWindow {
    line-height:normal;
    right:-1px;
    position:absolute;
    top:3px;
}

.fleetStatus .closeAll a {
    background: url("/img/icons/d55059f8c9bab5ebf9e8a3563f26d1.gif") no-repeat 0 0;
    height: 22px;
    width: 22px;
    display: block;
}
.fleetStatus .closeAll .all_closed { background-position: 0 0; }
.fleetStatus .closeAll .all_open { background-position: 0 -22px; }

.fleetStatus .newWindow { top:6px; right:35px; }
.fleetStatus .newWindow a img { margin:0;}