/* ALLGEMEIN */ @import url('https://fonts.googleapis.com/css?family=Kalam'); @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"); body { background: #090909 !important; color: #999 !important; margin: 0; padding: 0 !important; display: flex; flex-direction: column; align-items: center; min-height: 100vh; } html, body { width: 100%; max-width: 100%; /* max-width auf body könnte die Zentrierung beeinflussen, wenn es kleiner als 100% ist */ } /* LOGINBOX NEU */ .container-md { max-width: 1000px !important; padding: 0; } .boxed { border: 1px solid #191919; background-color: #111; border-radius: 4px; color: #999 !important; } #box_main { padding: 10px; max-width: 1000px; width: 100%; border: 1px solid #191919; background-color: #111; margin-top: auto; margin-bottom: auto;} #box_planet .menuframe { position: absolute; z-index: 4; left: 50%; margin: -124px 0 0 -100px; background: url('../../img/buttons/menuframe.png'); width: 200px; height: 154px; z-index: 7; } #box_planet .menuframe .button { position: absolute; width: 50px; height: 27px; } #box_planet .menuframe .minibutton { position: absolute; background: #111; border: 2px solid #525252; border-radius: 100%; cursor: pointer; color: #666; text-align: center; font-size: 1em; padding: 0.2em; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; } #box_planet .menuframe .minibutton:hover { background: #0D1D2D; border: 2px solid #0FADDC; color: #0FADDC; } #box_planet .menuframe .minibutton.active { background: #0D1D2D ; border: 1px solid #0FADDC; color: #0FADDC; } #box_planet .menuframe .btn_1 { margin: 8px 0 0 56px; } #box_planet .menuframe .btn_2 { margin: 1px 0 0 84px; } #box_planet .menuframe .btn_3 { margin: 8px 0 0 112px; } #box_planet .menuframe .btn_4 { margin: 38px 0 0 525px; padding: 5px 0; width: 60px; border-radius: 5px; border: 1px solid #090909;} #box_planet .menuframe .btn_5 { margin: 75px 0 0 525px; padding: 5px 0; width: 60px; border-radius: 5px; border: 1px solid #090909; } #box_planet .menuframe .btn_4:hover, #box_planet .menuframe .btn_5:hover { border-width: 1px !important; color: #0FADDC !important; } .btn_chat_anzahl, .btn_chat_anzahl_nw { position: absolute; background: #0FADDC; color: #FFF; font-size: 10px; } .btn_chat_anzahl { display: none; left: -12px; } .btn_chat_anzahl_nw { display: none; right: -12px; } .btn_chat_anzahl.active { display: block; } .btn_chat_anzahl_nw.active { display: block; } .nav-item .btn_chat_anzahl, .btn_chat_anzahl_nw { position: inherit; background: inherit; color: inherit; font-size: 13.2px; } .nav-item .btn_chat_anzahl { display: none; left: -12px; } .nav-item .btn_chat_anzahl_nw { display: none; right: -12px; } .nav-item .btn_chat_anzahl.active { display: block; } .nav-item .btn_chat_anzahl_nw.active { display: block; } #box_planet .menuframe .button:hover .anzahl { color: #FFF; } #box_planet .menuframe a.button.map { margin: 34px 0 0 0; } #box_planet .menuframe a.button.map:hover { background: url(../../img/buttons/button_map_hover.png) no-repeat; } #box_planet .menuframe a.button.corp { margin: 62px 0 0 0; } #box_planet .menuframe a.button.corp:hover { background: url(../../img/buttons/button_corp_hover.png) no-repeat; } #box_planet .menuframe .button.nachrichten { margin: 34px 0 0 150px; } #box_planet .menuframe .button.nachrichten:hover { background: url(../../img/buttons/button_nachrichten_hover.png) no-repeat; cursor: pointer;} #box_planet .menuframe .button.berichte { margin: 62px 0 0 150px; } #box_planet .menuframe .button.berichte:hover { background: url(../../img/buttons/button_berichte_hover.png) no-repeat; cursor: pointer; } #box_planet .menuframe .button .anzahl { position: absolute; width: 18px !important; height: 18px; margin: 6px 0 0 24px; padding: 0px; overflow: visible; width: 15px; font-weight: bold; font-size: 12px !important; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; text-align: center; border-radius: 100%; } #box_planet .menuframe .button .anzahl.ungelesen { background: #0FC3F8; color: #FFF; font-size: 10px !important; margin-top: 5px; padding-top: 1px; } #box_planet .menuframe a.head_planet { position: absolute; width: 89px; height: 89px; margin: 33px 0 0 55px; border: 3px solid #525252; border-radius: 100%; background-size: 87px 87px !important; } #box_planet .menuframe a.head_planet { transform: rotate(0deg) scale(1); transition: border-color 0.8s ease, filter 0.8s ease, transform 3.9s ease; -webkit-transition: border-color 0.8s ease, filter 0.8s ease, transform 3.9s ease; } /* Keyframes für die unendliche Rotation und Skalierung auf 95% */ @-webkit-keyframes rotateAndScalePlanet { from { -webkit-transform: rotate(0deg) scale(0.95); } to { -webkit-transform: rotate(360deg) scale(0.95); } } @keyframes rotateAndScalePlanet { from { transform: rotate(0deg) scale(0.95); } to { transform: rotate(360deg) scale(0.95); } } #box_planet .menuframe a.head_planet:hover { border-color: #0FC3F8; filter: brightness(1.3); -webkit-animation: rotateAndScalePlanet 10s linear infinite; animation: rotateAndScalePlanet 10s linear infinite; } #box_planet .menuframe .selektor_single { background: url(../../img/buttons/selektor_clear.png) no-repeat; position: absolute; width: 190px; height: 25px; margin: 95px 0 0 8px; padding: 3px 0 0 10px; } #box_planet .menuframe .selektor_single .koloniename { width: 80%; text-align: center; } #box_planet .menuframe .selektor_multi { position: absolute; cursor: pointer; background: url(../../img/buttons/selektor_button.png) no-repeat; width: 138px; height: 24px; margin: 95px 0 0 8px; padding: 3px 0 0 15px; } #box_planet .menuframe .selektor_multi:hover { background: url(../../img/buttons/selektor_button_hover.png) no-repeat; } #box_planet .menuframe .selektor_multi_weiter { position: absolute; cursor: pointer; background: url(../../img/buttons/selektor_button_next.png) no-repeat; width: 44px; height: 24px; margin: 95px 0 0 145px; } #box_planet .menuframe .selektor_multi_weiter:hover { background: url(../../img/buttons/selektor_button_next_hover.png); } #box_planet .menuframe .selektor_multi .koloniename { width: 100%; text-align: center; margin: -2px 0 0 10px; font-size: 14px; } #box_planet .menuframe .selektor_multi .koloniename .planet_head { float: left; width: 130px; padding: 4px 0 0 10px; background: #222; margin: 5px 0; } #box_planet .menuframe .selektor_multi .koloniename .planet_head img { float: left; width: 28px; margin: -5px 5px 0 -5px; } #box_planet .menuframe .selektor_multi .koloniename span { max-height: 425px; text-align: left; float: left; width: 170px; margin: 23px 0 0 -20px; padding: 6px 0px; line-height: 130%; background: #111; border: 2px solid #333; z-index: 8; } #box_planet .menuframe .selektor_multi .koloniename span a { float: left; width: 149px; padding: 2px 0 4px 10px; border-top: 3px solid #111; } #box_planet .menuframe .selektor_multi .koloniename span a:hover { background: #0D1D2D; } #box_planet .menuframe .selektor_multi .koloniename span a.aktive_kolonie { background: #0D1D2D; border: 2px solid #333; border-left: none; } #box_planet .menuframe .planet_name { position: absolute; z-index: 0 !important; margin: 120px 0 0 0; width: 100%; font-size: 10px; text-align: center; } #box_planet .menuframe .planet_name small { background: #111; padding: 2px 5px; } #box_planet .planet { width: 62px; float: left; margin-right: 5px; cursor: pointer; } .nav { float: left; } .nav img { cursor: pointer; } .kolonieselektor { padding: 1%; text-align: center; font-weight: bold; overflow: hidden; width: 95%; } .logout { float: left; padding: 3px 0px; margin: 3px 0 5px 0; text-align: right; width: 125px; overflow: hidden; } #logout { float: right; background: url('../../img/buttons/button_logout.png'); width: 15px; height: 16px; margin: 0 0 0 5px; padding: 5px 12px 11px 5px !important; border: none; } #logout:hover { background-position: 0px 16px; } #box_header { position: absolute; width: 1000px; left: 50%; margin: -85px 0 0 -500px; z-index: 2; } #box_header .header_rohstoffe { font-size: 15px; } #box_header .header_rohstoffe div { float: left; text-align: center; width: 95px; } #box_header .header_rohstoffe div img { width: 26px; vertical-align: middle; margin-top: -4px; } #box_header .header_rohstoffe div strong { color: #555; padding: 0 5px; } #box_header .header_rohstoffe div small { color: #4DA6FF; padding: 0; font-size: 11px; margin: 0 !important; line-height: 120% !important; text-align: center; } #box_header .head_extraktor { float: left; padding: 1px 0 0 0 !important; width: 100% !important; line-height: normal !important; text-align: left !important; } #box_header .head_extraktor i { margin-bottom: 2px !important; } #box_header .head_extraktor img { float: left; margin: 0px 4px 0 9px !important; vertical-align: middle; width: 24px !important; } .auflager { padding: 0 5px; } /* ANZEIGE IM HEADER */ #box_header .wetter { float: left; margin: 9px 0 0 240px; padding: 2px 0; width: 280px !important; text-align: left !important; background:#161616; } #box_header .wetter .wetter_zustand small, #box_header .wetter .wetter_zustand small b, #box_header .wetter .wetter_windrad small { color: #999 !important; } #box_header .wetter .wetter_zustand { width: 180px !important; padding: 0 0 0 30px; text-align: left !important; line-height: normal; } #box_header .wetter .wetter_zustand img { width: 38px !important; position: absolute; margin: -6px 0 0 -40px !important; } .wetter .wetter_windrad { float: right !important; width: 85px !important; padding: 0 0 0 30px; text-align: left !important; line-height: normal; } .wetter .wetter_windrad img { position: absolute; margin: -3px 0 0 -36px !important; width: 31px !important; } /* ANZEIGE IM HQ */ #wetter_hq .wetter { float: left; margin: 5px 0 0 0; padding: 5px 0 9px 0; width: 100%; border: none !important; background:#161616; } #wetter_hq .wetter_zustand img { margin: 0px 0 0 -17px !important; width: 35px; } #wetter_hq .wetter_windrad img { margin: 0px 0 0 -22px !important; width: 35px; } /* ANIMATIONEN WIND */ .wetter_zustand .zustand_1 { -webkit-animation: spin 120s infinite linear; } .wetter_windrad .wind_1 { -webkit-animation: spin 90s infinite linear; } .wetter_windrad .wind_2 { -webkit-animation: spin 6s infinite linear; } .wetter_windrad .wind_3 { -webkit-animation: spin 3s infinite linear; } .wetter_windrad .wind_4 { -webkit-animation: spin 1s infinite linear; } .wetter_windrad .wind_5 { -webkit-animation: spin 0.3s infinite linear; } @keyframes spin { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg); }} #box_header .mission { float: left; margin: -130px 0 0 350px; padding: 4px 5px; width: 245px !important; text-align: left !important; border: 2px solid #FC0; background:#161616; } #box_content { clear: both; background: #090909; padding: 10px; margin: 0 0 0 0; width: 980px; height: 520px; border-radius: 5px; } #meldung { padding: 10px; width: 1000px; margin: 0 auto 15px auto; text-align: center; border: 1px solid #191919; background-color: #111; } .box_erfolg { display: block; background: #111 !important; margin: 0.5% 0; padding: 2% 3% 2% 3%; cursor: pointer; border-radius: 4px; border: 2px solid #555; font-weight: bold; font-size: 14px; } .box_erfolg:hover { opacity: 0.8; } .box_erfolg .erfolg_desc { padding: 2% 0; background: none !important; color: #555; line-height: 175%; } .erfolg_inaktiv { color: #333; border-color: #333; } .erfolg_bronze { color: #C60; border-color: #444; } .erfolg_silber { color: #CCC; border-color: #555; } .erfolg_gold { color: #FC0; border-color: #666; } .erfolg_platin { color: #00AA72; border-color: #777; } .erfolg_diamond {color: #CCFEFF; border-color: #CCFEFF; } .box_erfolg i { margin-right: 8px; font-size: 18px; vertical-align: middle; } /* KOLONIE INFOBOXES + ZEILEN */ .header_infoboxzeile { position: absolute; z-index: 1; height: 10px; width: 940px; margin: 10px; } .header_infoboxzeile .stationierte_truppen_slider { padding: 2px 6px; background: #111; border: 2px solid #000; max-height: 472px; overflow-x: hidden; overflow-y: auto; } .header_infoboxzeile .stationierte_truppen_slider:hover { background: #000; } .header_infoboxzeile.zeile_unten { margin-top: 465px; } .header_infoboxzeile .stationierte_truppen_slider .truppenbox { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 12px; padding: 2px; margin: 2px 2px 2px 0; float: left; border: 1px solid #132A40; text-align: center; } .header_infoboxzeile .stationierte_truppen_slider .truppenbox:hover { cursor: help; border: 1px solid #333; } .header_infoboxzeile .stationierte_truppen_slider .truppenbox img { width: 24px; } .header_infoboxzeile .stationierte_truppen_slider .npc_truppenbox { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 14px; margin: 2px 2px 2px 0; float: left; border: 1px solid #132A40; text-align: center; } .header_infoboxzeile .stationierte_truppen_slider .npc_truppenbox:hover { cursor: help; border: 1px solid #333; } .header_infoboxzeile .stationierte_truppen_slider .npc_truppenbox img { width: 56px; } .header_infoboxzeile .stationierte_truppen_slider .zeile { margin: 2px 0 10px 0; } .header_infoboxzeile .stationierte_truppen_slider .box_angriffswert { background: #420002; margin: 1px 0 3px 0; padding: 4px 0 2px 0; text-align: center; } .header_infoboxzeile .stationierte_truppen_slider .box_angriffswert:hover { background: #2D0001; } .header_infoboxzeile .stationierte_truppen_slider .box_angriffswert b { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 14px; } .header_infoboxzeile .stationierte_truppen_slider .box_angriffswert i { font-size: 14px; margin: 2px 0; } .header_infoboxzeile .stationierte_truppen_slider .box_verteidigungswert { background: #002142; margin: 1px 0 3px 0; padding: 4px 0 2px 0; text-align: center; } .header_infoboxzeile .stationierte_truppen_slider .box_verteidigungswert:hover { background: #00152B; } .header_infoboxzeile .stationierte_truppen_slider .box_verteidigungswert b { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 14px; } .header_infoboxzeile .stationierte_truppen_slider .box_verteidigungswert i { font-size: 14px; margin: 2px 0; } .header_infoboxzeile .slider_kommandos .rk_zieltyp { width: 30px; margin: -5px 0 0 0; } .box_a_wert { float: left; width: 97%; background: #420002 !important; margin: 4px 0; padding: 7px 0 5px 0; text-align: center; font-size: 14px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; } .box_v_wert { float: left; width: 97%; background: #002142 !important; margin: 4px 0; padding: 7px 0 5px 0; text-align: center; font-size: 14px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; } /* INFOBUTTONS + BOX */ .wrap_infobtn_l { position: absolute; margin-left: -40px; margin-top: 20px; z-index: 7; } .wrap_infobtn_r { position: absolute; margin-left: 938px; margin-top: 20px; z-index: 7; } .infobtn { display: none; position: relative; width: 60px; border-radius: 8px; padding: 9px 0 4px 0; font-size: 2em; background: #111; color: #333; margin: 0 0 20px 0; text-align: center !important; } .infobtn span { font-size: 16px; font-weight: bold; } #infobtn_truppen { margin-bottom: 20px; } .infobtn_truppen { display: none; width: 60px; padding: 9px 0 4px 0; font-size: 2em; background: #111; color: #333; margin: 0 0 20px 0; text-align: center !important; } .infobtn_truppen i { font-size: 12px; } .infobtn_truppen span { font-size: 12px; font-weight: bold; } .infobtn_truppen_a { margin-bottom: 0; border-bottom-width: 1px !important; border-top-right-radius: 8px; border-top-left-radius: 8px; } .infobtn_truppen_v { border-top-width: 1px !important; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px;} .box_angriffswert { background: #420002; padding: 0.4em 0.8em; color: #C00; } .box_verteidigungswert { background: #002142; padding: 0.4em 0.8em; color: #4DA6FF; } .infobtn.red, .infobtn_truppen.red { background: #1b0000; color: #C00; border: 4px solid #570000; } .infobtn.red:hover, .infobtn_truppen.red:hover { background: #2e0000; border-color: #C00; } .infobtn.blue, .infobtn_truppen.blue { background: #002142; color: #4DA6FF; border: 4px solid #27588a; } .infobtn.blue:hover, .infobtn_truppen.blue:hover { background: #003264; border-color: #4DA6FF; } .infobtn.greyblue, .infobtn_truppen.greyblue { background: #090909; color: #4DA6FF; border: 4px solid #111111; } .infobtn.greyblue:hover, .infobtn_truppen.greyblue:hover { background: #111; border-color: #4DA6FF; } .infobtn.grey, .infobtn_truppen.grey { background: #090909; color: #333; border: 4px solid #111111; } .infobtn.grey:hover, .infobtn_truppen.grey:hover { background: #111; border-color: #333; } .row .angriff { background: #250404; color: #C00; } .row .angriff_npc { background: #311d05; color: #ff9900; } .row .rakete { background: #250404; color: #C00; } .row .rueckkehr { background: #0E2506; color: #0C0; } .row .transport { background: #132A40; color: #4DA6FF; } .row .unterstuetzung { background: #132A40; color: #4DA6FF; } .row .kommando { background: #132A40; color: #4DA6FF; } /* Übergang für Infobuttons hinzufügen */ .infobtn { transition: background-color 0.3s ease; transition: border-color 0.6s ease; } .infobtn_truppen { transition: background-color 0.3s ease; transition: border-color 0.6s ease; } .box_fehler { background: #804040 !important; color: #FFF; text-align: center; padding: 7px 5px; margin-top: 10px; border-radius: 5px; display: none; width: 100%; cursor: pointer; } .box_ok { background: #00805C !important; color: #FFF; text-align: center; padding: 7px 5px; margin-top: 10px; border-radius: 5px; display: none; width: 100%; cursor: pointer; } .box_fehler:hover, .box_ok:hover { opacity: 0.8; } #box_header .header_rohstoffe .prozentbalken { margin: 4px 0 7px 5px; width: 85px; } .prozentbalken { float: left; background: #0D1D2D; width: 20%; height: 7px; border: none !important; overflow: hidden; border-radius: 0.25em; } .prozentbalken:hover { border-color: #A6FFFF; } .prozentbalken div { float: left; background: #4DA6FF; height: 100% !important; border-right: 1px solid #A6FFFF; line-height: 130%; font-size: 0.7em; color: #EFEFEF; text-align: center; } .prozentbalken div.plus { background: #0F6 !important; border: none !important; } /* NEWS */ .box_news_kommentare { background: #111 !important; } .box_news_kommentare .einzelkommentar { float: left; width: 95%; padding: 5px 10px; margin: 5px 0; background: #090909 !important; } .box_news_kommentare b.pointer:hover { background: #1A1A1A !important; } /* CHAT */ .chat_content { width: 100%; } .chat_content div { display: block; } .chat_content div span { color: #444; } .chat_content div b { color: #4DA6FF; } .chat_content div img { width: 20px; margin: 0 3px 0 0; } .chat_anzahl { position: absolute; width: 17px; height: 17px; margin: -5px 0 0 0; padding: 0px; background: #0FC3F8; color: #FFF; overflow: visible; font-size: 10px !important; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; text-align: center; border-radius: 100%; } /* CORP */ #box_corp { display: block; width: 960px; height: 500px; } .corp_box { background: #101010 !important; border: 1px solid #121212; } .corp_box h1 { margin: 0 0 10px 0; } .corp_box .mitglieder_details_content .truppenbox { width: auto !important; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; padding: 2px; margin: 0 0 0 2px; float: left; border: 1px solid #132A40; text-align: center !important;} .corp_box .mitglieder_details_content .truppenbox img { width: 30px !important; float: none; width: auto; margin: 5px; } .corp_box .mitglieder_details_content .truppenbox img.truppe { width: 34px; } .corp_box .mitglieder_details_content .infopfeil { padding: 22px 1px 24px 2px; margin: 0 5px; font-size: 18px; background: #111; } .corp_box .bewohnter_planet { float: left; width: 93%; padding: 3px 5px; margin: 0 0 5px 0; border: 2px solid #090909; cursor: pointer; } .corp_box .bewohnter_planet img.planet { float: left; width: 32px; margin: 1px 5px 0 0; vertical-align: middle; } .corp_box .bewohnter_planet .einfluss { float: right; width: 32px; height: 24px; margin: 1px 0 0 0; padding-top: 8px; border-radius: 100%; text-align: center; background: #111; } .corp_box .mission_bauteil { float: left; width: 49%; padding: 0.5%; margin: 0.5%; cursor: help; border: 2px solid #111; color: #111 !important; } .corp_box .mission_bauteil .txt_blau { color: #555; } .corp_box .mission_bauteil img.planet { float: left; width: 60px; margin: 1px 8px 0 0; vertical-align: middle; filter: grayscale(100%); } .corp_box .mission_bauteil .titel { display: block; margin-top: 5px; } .corp_box .bauteil_fertig { border: 2px solid #0C0; } .corp_box .bauteil_fertig .txt_blau { color: #4DA6FF; } .corp_box .bauteil_fertig img.planet { filter: grayscale(0%) !important; } .corp_box .box_planetdetails { float: left; width: 95%; padding: 5px 10px; margin: 0 0 10px 0; } .corp_box .box_planetdetails img.planet { float: right; width: 100px; margin: 10px; vertical-align: middle; } .corp_box .box_niederlassung { float: left; width: 95%; padding: 5px 10px; } .corp_box .box_niederlassung img.niederlassung { float: right; margin: 16px 50px 0 0; vertical-align: middle; } .corp_box .box_niederlassung .ausbau_timer { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; padding: 5px 0; float: left; width: 40%; text-align: center; font-size: 26px; font-weight: bold; color: #CCC; } .corp_box .box_niederlassung .timer { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; padding: 5px 0; float: left; text-align: center; font-size: 26px; font-weight: bold; color: #CCC; } .corp_box .box_niederlassung .rohstoffspalte { float: left; width: 36px; margin: 0 5px 0 0; text-align: center; } .corp_box .box_niederlassung .rohstoffspalte img { width: 80%; } .corp_box .box_niederlassung .prozentbalken_box_vertikal { width: 20px; margin: 0 0 0 18px; transform: rotate(180deg); } .corp_box .box_niederlassung .prozentbalken_vertikal { float: left; margin: 5px 0 5px 9px; background: #222; width: 100%; height: 100px; border: 1px solid #555; overflow: hidden; } .corp_box .box_niederlassung .prozentbalken_vertikal:hover { border-color: #A6FFFF; } .corp_box .box_niederlassung .prozentbalken_vertikal div { display: block; background: #4DA6FF; width: 100%; border-bottom: 2px solid #A6FFFF; } .corp_box .box_niederlassung .infopfeil { float: right; padding: 80px 1px 82px 2px; margin: 2px 15px 0 0; font-size: 18px; background: #111; } .corp_box_chat_head { float: left; width: 100%; padding: 10px 10px 0px 10px; border-bottom: none; } .corp_box_chat { float: left; width: 100%; height: 390px; max-height: 357px; padding-top: 0px !important; border-top: none; border-bottom: none; } .corp_box_chat_schreiben { float: left; width: 100%; padding: 15px 10px 5px 10px; border-top: none; } .corp_box_chat_schreiben input[type=text] { float: left; width: 370px; border-bottom-right-radius: 0px !important; border-top-right-radius: 0px !important; margin-right: 0px !important; } .corp_box_chat_schreiben input[type=button] { float: left; border-bottom-left-radius: 0px !important; border-top-left-radius: 0px !important; margin-left: 0px !important; margin-top: 0px !important; } .scroll { overflow-y: auto; overflow-x: hidden; } .corp_box_bauteilgesamtprozent { padding: 10px; float: right !important; border-radius: 4px; font-size: 20px; cursor: help; margin: 3px 8px 0 0; } /* POPUPS */ .popup { box-shadow: 0px 4px 8px 0px #000; position: absolute; /* Wichtig: Nimmt das Popup aus dem normalen Fluss */ z-index: 3; /* Stellt sicher, dass das Popup über anderen Elementen liegt */ text-align: left; left: 50%; margin-top: 100px; /* Dein gewünschter Abstand von oben */ width: auto; /* Oder eine spezifische Breite, falls gewünscht, z.B. 500px */ /* --- Methode mit Pseudo-Element für den Rahmen --- */ padding: 2px; /* Dies ist die Dicke deines Farbverlauf-Rahmens */ background: #090909; /* Hintergrundfarbe des Popup-Inhaltsbereichs (innerhalb des Rahmens) */ border-radius: 5px !important; /* Deine gewünschte Rundung für das Popup */ /* position: relative; <-- Das war der Übeltäter, wird durch position: absolute oben ersetzt */ overflow: hidden; /* Verhindert, dass das Pseudo-Element unerwünscht übersteht */ } .popup::before { content: ""; /* Erforderlich für Pseudo-Elemente */ position: absolute; /* Positioniert sich relativ zum .popup */ top: 0; left: 0; right: 0; bottom: 0; z-index: -1; /* Legt das Pseudo-Element hinter den Inhalt und den direkten Hintergrund des .popup */ /* Der Farbverlauf für den Rahmen */ background: #090909; /* Wichtig: Dieselbe Rundung wie das Elternelement .popup */ border-radius: inherit; /* Übernimmt border-radius vom .popup (also 7px) */ } .popup:hover::before { /* Farbverlauf für den Rahmen im Hover-Zustand */ /* Die Rahmendicke wird durch das padding von .popup bestimmt (hier 2px) */ --border-thickness: 7px; --corner-color: #4DA6FF; /* Farbe für Ecken und Enden der Kanten */ --edge-middle-color: #090909; /* Farbe für die Mitte der Kanten */ background: /* Obere Kante: Blau -> Dunkel -> Blau (horizontal) */ linear-gradient(to right, var(--corner-color), var(--edge-middle-color) 13%, var(--edge-middle-color) 87%, var(--corner-color)) top left / 100% var(--border-thickness) no-repeat, /* Untere Kante: Blau -> Dunkel -> Blau (horizontal) */ linear-gradient(to right, var(--corner-color), var(--edge-middle-color) 13%, var(--edge-middle-color) 87%, var(--corner-color)) bottom left / 100% var(--border-thickness) no-repeat, /* Linke Kante: Blau -> Dunkel -> Blau (vertikal) */ linear-gradient(to bottom, var(--corner-color), var(--edge-middle-color) 13%, var(--edge-middle-color) 87%, var(--corner-color)) top left / var(--border-thickness) 100% no-repeat, /* Rechte Kante: Blau -> Dunkel -> Blau (vertikal) */ linear-gradient(to bottom, var(--corner-color), var(--edge-middle-color) 13%, var(--edge-middle-color) 87%, var(--corner-color)) top right / var(--border-thickness) 100% no-repeat; } .popup .header { padding: 2px 0px 5px 7px; border-top-left-radius: 5px; border-top-right-radius: 5px; background: #090909; cursor: move; font-weight: bold; color: #888; } .popup .header i { margin: 0 3px 0 0; color: #999; } .popup .header div { float: right; text-align: center; cursor: pointer; background: none; margin: 0 0 0 3px; padding: 5px 1px 4px 5px; font-size: 16px; border-radius: 4px; } .popup .header div i { color: #555 !important; } .popup .header div:hover, .popup .header div:hover i { color: #00bfff !important; } .popup .content { padding: 0px; background: #111; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .popup .content div.desc { padding: 10px; margin: 0 10px 10px 0; max-height: 350px; overflow-y: scroll; } .popup .footer { padding: 3px; background: #090909; cursor: move; } .popup .footer:hover { background: #020202; } .popup .overlay { display: none; z-index: 4; background: url(../../img/icons/loading.GIF) center no-repeat #000; position: absolute; filter: alpha(opacity=80); opacity: 0.8; } .popup_ebene_1 { z-index: 99 !important; } .popup_ebene_2 { z-index: 100 !important;} .tooltip small { color: #999; } /* KOLONIE */ #box_kolonie { float: left; overflow: hidden; width: 960px; height: 500px; } #box_kolonie .feld { cursor: pointer; position: absolute; overflow: hidden; width: 89px; height: 56px; background: url(../../img/icons/icon_buildhere.png) no-repeat top; /* Hintergrundbild oben ausgerichtet */ opacity: 0.75; /* Ausgangstransparenz */ /* Transition für width, height, transform, opacity und filter (filter auf 0.25s angepasst) */ -webkit-transition: width 0.3s ease, height 0.5s ease, transform 0.25s ease, opacity 0.3s ease, filter 0.25s ease; -moz-transition: width 0.3s ease, height 0.5s ease, transform 0.25s ease, opacity 0.3s ease, filter 0.25s ease; -o-transition: width 0.3s ease, height 0.5s ease, transform 0.25s ease, opacity 0.3s ease, filter 0.25s ease; -ms-transition: width 0.3s ease, height 0.5s ease, transform 0.25s ease, opacity 0.3s ease, filter 0.25s ease; transition: width 0.3s ease, height 0.5s ease, transform 0.25s ease, opacity 0.3s ease, filter 0.25s ease; } #box_kolonie .feld:hover { opacity: 1; filter: contrast(2); transform: translateY(5px); } #box_kolonie .bauplatz { position: absolute; width: 80px; height: 40px; } #box_kolonie .bauplatz .gebaeude { width: 150px; height:150px; margin: -55px 0 0 -45px; background-image: url(../../img/bg_transparent_50.png); border: none; background-repeat: no-repeat; background-position: center center; background-size: 100% auto; position: absolute !important; } #box_kolonie .bauplatz .btn { position: absolute; border: none; background: none; z-index: 99; border-radius: 100%; width: 130px; height: 130px; margin: -45px 0 0 -35px; cursor: pointer; } #box_kolonie .bauplatz .btn:hover + .gebaeude { filter: brightness(135%); } #box_kolonie .bauplatz .btn:focus, #box_kolonie .bauplatz .btn:active { outline: none; border: none;} #box_kolonie .bauplatz .info_icons { position: absolute; z-index: 1; margin-top: 65%; width: 135px; text-align: center; } #box_kolonie .bauplatz .info_icons img { width: 25px; margin: 0 5px; } #box_kolonie .bauplatz .timer { padding: 3px 8px 3px 8px; position: absolute; color: #FFF; font-weight: bold; font-size: 14px; text-align: center; width: 100px; background-color: rgba(0, 0, 0, 0.65); border-radius: 5px; margin: 60px 0 0 17px; z-index: 2; filter: brightness(1) !important; } #box_kolonie .gebaeude.imbau { animation: pulseBrightness 0.75s ease-in-out infinite; filter: hue-rotate(90deg); } @keyframes pulseBrightness { 0%, 100% { filter: brightness(0.85); } 50% { filter: brightness(1.35); } } #box_kolonie .colormap { position: absolute; z-index: 0; width: 150px; margin: -10px; } #box_kolonie .gebaeude .colormap.typ_1 { display: none; } #box_kolonie .gebaeude .colormap.typ_2 { filter: hue-rotate(25deg); } #box_kolonie .gebaeude .colormap.typ_3 { filter: hue-rotate(200deg); } #box_kolonie .gebaeude .colormap.typ_4 { filter: hue-rotate(50deg); } @keyframes colormap_typ5_hue_pulse { 0%, 100% {filter: hue-rotate(300deg);} 50% {filter: hue-rotate(250deg);} } #box_kolonie .gebaeude .colormap.typ_5 { filter: hue-rotate(300deg); animation-name: colormap_typ5_hue_pulse; animation-duration: 5s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } #box_kolonie .kol_ex { position: absolute; width: 50px; height: auto; z-index: 3; margin: 8px 0 0 55px; animation-name: subtleWiggle; animation-duration: 1.4s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; } #box_kolonie .kol_ks_tr { position: absolute; width: 35px; height: auto; z-index: 3; margin: 8px 0 0 -9px; transform: scaleX(-1); animation-name: vibrateAndFlip; animation-duration: 6.4s; /* Still(1) Vibrate(1) Still(1) Flip(0.2) Still(1) Vibrate(1) Still(1) Flip(0.2) */ animation-timing-function: linear; /* Wichtig für gleichmäßige Phasen */ animation-iteration-count: infinite; animation-direction: normal; } #box_kolonie .kol_hq_b { position: absolute; width: 75px; height: auto; z-index: 3; margin: 0px 0 0 -40px; animation-name: subtleWiggle; animation-duration: 4.4s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; } #box_kolonie .kol_lg_t { position: absolute; width: 40px; height: auto; z-index: 3; animation-name: subtleWiggle; animation-duration: 3.0s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; } .kol_lg_t_1 { margin: -35px 0 0 -45px; } .kol_lg_t_2 { margin: 0px 0 0 -40px; } .kol_lg_t_3 { margin: 25px 0 0 -50px; } .kol_lg_t_4 { margin: -25px 0 0 62px; } .kol_lg_t_5 { margin: 0px 0 0 70px; } .kol_lg_t_6 { margin: 35px 0 0 55px; } /* Individuelle Animationsverzögerungen für .kol_lg_t 1-3 (nutzen subtleWiggle von .kol_lg_t) */ #box_kolonie .kol_lg_t_1 { animation-delay: 0s; /* Standardstart, oder leicht variieren z.B. -0.1s */ } #box_kolonie .kol_lg_t_2 { animation-delay: -0.4s; } #box_kolonie .kol_lg_t_3 { animation-delay: -0.8s; } @keyframes subtleWiggleLgTMirrored { 0% { transform: scaleX(-1) translateY(4px); } 100% { transform: scaleX(-1) translateY(-4px); } } /* Individuelle Animationen (gespiegelt) und Verzögerungen für .kol_lg_t 4-6 */ #box_kolonie .kol_lg_t_4 { animation-name: subtleWiggleLgTMirrored; animation-duration: 2.2s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; animation-delay: -1.2s; /* Sorgt für Asynchronität zu 1-3 und den anderen 4-6 */ } #box_kolonie .kol_lg_t_5 { animation-name: subtleWiggleLgTMirrored; animation-duration: 2.2s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; animation-delay: -1.6s; } #box_kolonie .kol_lg_t_6 { animation-name: subtleWiggleLgTMirrored; animation-duration: 2.2s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; animation-delay: -2.0s; } /* TRUPPEN DARSTELLUNG IN KOLONIE LINKS / RECHTS */ @keyframes vibrateAndFlip { 0%, 15.625% { transform: translateY(0px) scaleX(1); filter: brightness(1); } 16.250%, 17.500%, 18.750%, 20.000%, 21.250%, 22.500%, 23.750%, 25.000%, 26.250%, 27.500%, 28.750%, 30.000% { transform: translateY(-0.5px) scaleX(1); filter: brightness(1.2); } 16.875%, 18.125%, 19.375%, 20.625%, 21.875%, 23.125%, 24.375%, 25.625%, 26.875%, 28.125%, 29.375%, 30.625% { transform: translateY(0.5px) scaleX(1); filter: brightness(1.1); } 31.25%, 46.875% { transform: translateY(0px) scaleX(1); filter: brightness(1); } 50%, 65.625% { transform: translateY(0px) scaleX(-1); filter: brightness(1); } 66.250%, 67.500%, 68.750%, 70.000%, 71.250%, 72.500%, 73.750%, 75.000%, 76.250%, 77.500%, 78.750%, 80.000% { transform: translateY(-0.5px) scaleX(-1); filter: brightness(1.2); } 66.875%, 68.125%, 69.375%, 70.625%, 71.875%, 73.125%, 74.375%, 75.625%, 76.875%, 78.125%, 79.375%, 80.625% { transform: translateY(0.5px) scaleX(-1); filter: brightness(1.1); } 81.25%, 96.875% { transform: translateY(0px) scaleX(-1); filter: brightness(1); } 100% { transform: translateY(0px) scaleX(1); filter: brightness(1); } } .kol_ks_tr_container { position: relative; overflow: visible; } .kol_ks_tr_container::after { content: ''; position: absolute; top: 50%; left: 50%; width: 2px; height: 2px; transform: translate(-50%, -50%); pointer-events: none; opacity: 0; animation: anex-sparks 2s infinite; border-radius: 50%; } @keyframes anex-sparks { 0% { opacity: 1; box-shadow: 0 0 3px 1px rgba(255, 165, 0, 0.8), 5px -5px 2px 0px rgba(255, 165, 0, 0.7), -4px 6px 2px 0px rgba(255, 165, 0, 0.7), 7px 7px 2px 0px rgba(255, 165, 0, 0.7), -6px -4px 2px 0px rgba(255, 165, 0, 0.7), 3px -7px 2px 0px rgba(255, 165, 0, 0.7), -7px 3px 2px 0px rgba(255, 165, 0, 0.7), 6px 3px 2px 0px rgba(255, 165, 0, 0.7), -2px -6px 2px 0px rgba(255, 165, 0, 0.7); transform: translate(-50%, -50%) scale(1); } 25% { opacity: 0; box-shadow: 0 0 3px 1px rgba(255, 165, 0, 0.8), 10px -10px 2px 0px rgba(255, 165, 0, 0), -8px 12px 2px 0px rgba(255, 165, 0, 0), 14px 14px 2px 0px rgba(255, 165, 0, 0), -12px -8px 2px 0px rgba(255, 165, 0, 0), 6px -14px 2px 0px rgba(255, 165, 0, 0), -14px 6px 2px 0px rgba(255, 165, 0, 0), 12px 6px 2px 0px rgba(255, 165, 0, 0), -4px -12px 2px 0px rgba(255, 165, 0, 0); transform: translate(-50%, -50%) scale(1.5); } 25.01%, 100% { opacity: 0; box-shadow: none; transform: translate(-50%, -50%) scale(0); } } /* Die subtleWiggle Animation wird hier beibehalten, falls sie noch für andere Elemente genutzt wird. Wenn nicht, kann sie entfernt werden. */ @keyframes subtleWiggle { 0% { transform: translateY(4px); } 100% { transform: translateY(-4px); } } /* Basis-Styling für alle Truppenbilder in der Kolonieansicht */ #box_kolonie .kol_truppe { position: absolute; width: 30px; height: auto; z-index: 1; cursor: pointer; transition: filter 0.2s ease-in-out; /* Für sanften Übergang des Hover-Effekts */ } /* Spiegelung für Truppen 2, 4, 6 */ #box_kolonie .kol_truppe_2, #box_kolonie .kol_truppe_4, #box_kolonie .kol_truppe_6 { transform: scaleX(-1); } /* --- Positionen für Truppeninstanzen --- */ /* Linke Seite: Truppen 1, 3, 5 */ /* Truppe 1 (links, zentraler) */ #box_kolonie .kol_truppe_1 { top: 110px; left: 150px; z-index: 3; } #box_kolonie .kol_truppe_1.inst-2 { top: 90px; left: 200px; } #box_kolonie .kol_truppe_1.inst-3 { top: 130px; left: 205px; } #box_kolonie .kol_truppe_1.inst-4 { top: 75px; left: 240px; } #box_kolonie .kol_truppe_1.inst-5 { top: 115px; left: 250px; } #box_kolonie .kol_truppe_1.inst-6 { top: 95px; left: 260px; } #box_kolonie .kol_truppe_1.inst-7 { top: 135px; left: 270px; } #box_kolonie .kol_truppe_1.inst-8 { top: 60px; left: 275px; } #box_kolonie .kol_truppe_1.inst-9 { top: 100px; left: 290px; } #box_kolonie .kol_truppe_1.inst-10 { top: 140px; left: 300px; } #box_kolonie .kol_truppe_1.inst-11 { top: 75px; left: 289px; } #box_kolonie .kol_truppe_1.inst-12 { top: 110px; left: 320px; } #box_kolonie .kol_truppe_1.inst-13 { top: 150px; left: 330px; } #box_kolonie .kol_truppe_1.inst-14 { top: 155px; left: 240px; } #box_kolonie .kol_truppe_1.inst-15 { top: 125px; left: 350px; } #box_kolonie .kol_truppe_1.inst-16 { top: 50px; left: 290px; } #box_kolonie .kol_truppe_1.inst-17 { top: 160px; left: 280px; } #box_kolonie .kol_truppe_1.inst-18 { top: 80px; left: 160px; } #box_kolonie .kol_truppe_1.inst-19 { top: 120px; left: 170px; } #box_kolonie .kol_truppe_1.inst-20 { top: 100px; left: 220px; } /* Truppe 3 (links, neben Typ 1) */ #box_kolonie .kol_truppe_3 { top: 180px; left: 90px; } /* Die folgenden 5 Instanzen bleiben unten */ #box_kolonie .kol_truppe_3.inst-2 { top: 235px; left: 35px; } #box_kolonie .kol_truppe_3.inst-3 { top: 230px; left: 90px; } #box_kolonie .kol_truppe_3.inst-5 { top: 240px; left: 130px; } #box_kolonie .kol_truppe_3.inst-13 { top: 245px; left: 10px; } #box_kolonie .kol_truppe_3.inst-16 { top: 250px; left: 10px; } /* Organisch verteilte Instanzen für Truppe 3 (oberer Cluster) */ #box_kolonie .kol_truppe_3.inst-4 { top: 152px; left: 25px; } #box_kolonie .kol_truppe_3.inst-6 { top: 158px; left: 55px; } #box_kolonie .kol_truppe_3.inst-7 { top: 150px; left: 85px; } #box_kolonie .kol_truppe_3.inst-8 { top: 156px; left: 115px; } #box_kolonie .kol_truppe_3.inst-9 { top: 153px; left: 145px; } #box_kolonie .kol_truppe_3.inst-10 { top: 178px; left: 28px; } #box_kolonie .kol_truppe_3.inst-11 { top: 183px; left: 58px; } #box_kolonie .kol_truppe_3.inst-12 { top: 177px; left: 122px; } #box_kolonie .kol_truppe_3.inst-14 { top: 184px; left: 152px; } #box_kolonie .kol_truppe_3.inst-15 { top: 202px; left: 32px; } #box_kolonie .kol_truppe_3.inst-17 { top: 208px; left: 62px; } #box_kolonie .kol_truppe_3.inst-18 { top: 200px; left: 92px; } /* Nahe Basis-X */ #box_kolonie .kol_truppe_3.inst-19 { top: 206px; left: 125px; } #box_kolonie .kol_truppe_3.inst-20 { top: 203px; left: 155px; } /* Truppe 5 (links, weiter außen) */ #box_kolonie .kol_truppe_5 { top: 10px; left: 30px; } #box_kolonie .kol_truppe_5.inst-2 { top: 17px; left: 115px; } #box_kolonie .kol_truppe_5.inst-3 { top: 60px; left: 95px; } #box_kolonie .kol_truppe_5.inst-4 { top: 5px; left: 190px; } #box_kolonie .kol_truppe_5.inst-5 { top: 75px; left: 18px; } #box_kolonie .kol_truppe_5.inst-6 { top: 28px; left: 53px; } #box_kolonie .kol_truppe_5.inst-7 { top: 43px; left: 133px; } #box_kolonie .kol_truppe_5.inst-8 { top: 2px; left: 58px; } /* Korrigiert: top war -2px */ #box_kolonie .kol_truppe_5.inst-9 { top: 78px; left: 38px; } #box_kolonie .kol_truppe_5.inst-10 { top: 23px; left: 213px; } #box_kolonie .kol_truppe_5.inst-11 { top: 48px; left: 2px; } /* Korrigiert: left war -7px */ #box_kolonie .kol_truppe_5.inst-12 { top: 88px; left: 63px; } #box_kolonie .kol_truppe_5.inst-13 { top: 2px; left: 133px; } /* Korrigiert: top war -7px */ #box_kolonie .kol_truppe_5.inst-14 { top: 63px; left: 163px; } #box_kolonie .kol_truppe_5.inst-15 { top: 33px; left: 233px; } #box_kolonie .kol_truppe_5.inst-16 { top: 98px; left: 2px; } /* Korrigiert: left war -7px */ #box_kolonie .kol_truppe_5.inst-17 { top: 2px; left: 73px; } /* Korrigiert: top war -12px */ #box_kolonie .kol_truppe_5.inst-18 { top: 83px; left: 138px; } #box_kolonie .kol_truppe_5.inst-19 { top: 18px; left: 2px; } /* Korrigiert: left war -7px */ #box_kolonie .kol_truppe_5.inst-20 { top: 68px; left: 213px; } /* Rechte Seite: Truppen 2, 4, 6 (gespiegelt) */ /* Truppe 2 (rechts, zentraler) */ #box_kolonie .kol_truppe_2 { top: 100px; right: 150px; z-index: 3; } #box_kolonie .kol_truppe_2.inst-2 { top: 80px; right: 200px; } #box_kolonie .kol_truppe_2.inst-3 { top: 120px; right: 205px; } #box_kolonie .kol_truppe_2.inst-4 { top: 60px; right: 240px; } #box_kolonie .kol_truppe_2.inst-5 { top: 105px; right: 250px; } #box_kolonie .kol_truppe_2.inst-6 { top: 95px; right: 260px; } #box_kolonie .kol_truppe_2.inst-7 { top: 135px; right: 270px; } #box_kolonie .kol_truppe_2.inst-8 { top: 60px; right: 275px; } #box_kolonie .kol_truppe_2.inst-9 { top: 100px; right: 290px; } #box_kolonie .kol_truppe_2.inst-10 { top: 140px; right: 300px; } #box_kolonie .kol_truppe_2.inst-11 { top: 70px; right: 310px; } #box_kolonie .kol_truppe_2.inst-12 { top: 110px; right: 320px; } #box_kolonie .kol_truppe_2.inst-13 { top: 150px; right: 330px; } #box_kolonie .kol_truppe_2.inst-14 { top: 85px; right: 340px; } #box_kolonie .kol_truppe_2.inst-15 { top: 125px; right: 350px; } #box_kolonie .kol_truppe_2.inst-16 { top: 50px; right: 290px; } #box_kolonie .kol_truppe_2.inst-17 { top: 160px; right: 280px; } #box_kolonie .kol_truppe_2.inst-18 { top: 80px; right: 160px; } #box_kolonie .kol_truppe_2.inst-19 { top: 120px; right: 170px; } #box_kolonie .kol_truppe_2.inst-20 { top: 100px; right: 220px; } /* Truppe 4 (rechts, neben Typ 2) */ #box_kolonie .kol_truppe_4 { top: 180px; right: 100px; } /* Die folgenden 5 Instanzen bleiben unten */ #box_kolonie .kol_truppe_4.inst-2 { top: 235px; right: 65px; } #box_kolonie .kol_truppe_4.inst-3 { top: 230px; right: 100px; } #box_kolonie .kol_truppe_4.inst-5 { top: 240px; right: 140px; } #box_kolonie .kol_truppe_4.inst-13 { top: 245px; right: 10px; } #box_kolonie .kol_truppe_4.inst-16 { top: 250px; right: 20px; } /* Organisch verteilte Instanzen für Truppe 4 (oberer Cluster) */ #box_kolonie .kol_truppe_4.inst-4 { top: 152px; right: 25px; } #box_kolonie .kol_truppe_4.inst-6 { top: 158px; right: 55px; } #box_kolonie .kol_truppe_4.inst-7 { top: 150px; right: 85px; } #box_kolonie .kol_truppe_4.inst-8 { top: 156px; right: 115px; } #box_kolonie .kol_truppe_4.inst-9 { top: 153px; right: 145px; } #box_kolonie .kol_truppe_4.inst-10 { top: 178px; right: 28px; } #box_kolonie .kol_truppe_4.inst-11 { top: 183px; right: 58px; } #box_kolonie .kol_truppe_4.inst-12 { top: 177px; right: 122px; } #box_kolonie .kol_truppe_4.inst-14 { top: 184px; right: 152px; } #box_kolonie .kol_truppe_4.inst-15 { top: 202px; right: 32px; } #box_kolonie .kol_truppe_4.inst-17 { top: 208px; right: 62px; } #box_kolonie .kol_truppe_4.inst-18 { top: 200px; right: 92px; } /* Nahe Basis-X */ #box_kolonie .kol_truppe_4.inst-19 { top: 206px; right: 125px; } #box_kolonie .kol_truppe_4.inst-20 { top: 203px; right: 155px; } /* Truppe 6 (rechts, weiter außen) */ #box_kolonie .kol_truppe_6 { top: 10px; right: 30px; } #box_kolonie .kol_truppe_6.inst-2 { top: 17px; right: 115px; } #box_kolonie .kol_truppe_6.inst-3 { top: 60px; right: 95px; } #box_kolonie .kol_truppe_6.inst-4 { top: 5px; right: 190px; } #box_kolonie .kol_truppe_6.inst-5 { top: 75px; right: 18px; } #box_kolonie .kol_truppe_6.inst-6 { top: 28px; right: 53px; } #box_kolonie .kol_truppe_6.inst-7 { top: 43px; right: 133px; } #box_kolonie .kol_truppe_6.inst-8 { top: 2px; right: 58px; } /* Korrigiert: top war -2px */ #box_kolonie .kol_truppe_6.inst-9 { top: 78px; right: 38px; } #box_kolonie .kol_truppe_6.inst-10 { top: 23px; right: 213px; } #box_kolonie .kol_truppe_6.inst-11 { top: 48px; right: 2px; } /* Korrigiert: right war -7px */ #box_kolonie .kol_truppe_6.inst-12 { top: 88px; right: 63px; } #box_kolonie .kol_truppe_6.inst-13 { top: 2px; right: 133px; } /* Korrigiert: top war -7px */ #box_kolonie .kol_truppe_6.inst-14 { top: 63px; right: 163px; } #box_kolonie .kol_truppe_6.inst-15 { top: 33px; right: 233px; } #box_kolonie .kol_truppe_6.inst-16 { top: 98px; right: 2px; } /* Korrigiert: right war -7px */ #box_kolonie .kol_truppe_6.inst-17 { top: 2px; right: 73px; } /* Korrigiert: top war -12px */ #box_kolonie .kol_truppe_6.inst-18 { top: 83px; right: 138px; } #box_kolonie .kol_truppe_6.inst-19 { top: 18px; right: 2px; } /* Korrigiert: right war -7px */ #box_kolonie .kol_truppe_6.inst-20 { top: 68px; right: 213px; } /* --- Animationen & Hover-Effekte --- */ /* Hover-Effekt: Alle Bilder des gleichen Typs aufhellen */ #box_kolonie:has(.kol_truppe_1:hover) .kol_truppe_1, #box_kolonie:has(.kol_truppe_2:hover) .kol_truppe_2, #box_kolonie:has(.kol_truppe_3:hover) .kol_truppe_3, #box_kolonie:has(.kol_truppe_4:hover) .kol_truppe_4, #box_kolonie:has(.kol_truppe_5:hover) .kol_truppe_5, #box_kolonie:has(.kol_truppe_6:hover) .kol_truppe_6 { filter: brightness(1.1); } /* Animation für Truppentyp 1 und 2 (Soldaten-Idle) - ENTFERNT */ /* @keyframes soldierIdle { ... } @keyframes soldierIdleMirrored { ... } */ /* Zuweisung der Animation zu Truppentyp 1 - ENTFERNT */ /* #box_kolonie .kol_truppe_1, ... { animation-name: soldierIdle; ... } #box_kolonie .kol_truppe_1.inst-2 { animation-delay: -0.4s; } ... */ /* Animation für Truppentyp 5 und 6 (Drohnen/Flugzeuge - Wippen) */ @keyframes subtleWiggle { 0% { transform: translateY(4px); } 100% { transform: translateY(-4px); } } @keyframes subtleWiggleMirrored { 0% { transform: scaleX(-1) translateY(3px); } 100% { transform: scaleX(-1) translateY(-3px); } } /* Zuweisung der Animation zu Truppentyp 5 */ #box_kolonie .kol_truppe_5, #box_kolonie .kol_truppe_5.inst-2, #box_kolonie .kol_truppe_5.inst-3, #box_kolonie .kol_truppe_5.inst-4, #box_kolonie .kol_truppe_5.inst-5 { /* Behalte Animation für die ersten 5 Instanzen */ animation-name: subtleWiggle; animation-duration: 1.8s; /* Langsame, subtile Bewegung */ animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; } /* Leichte Verzögerungen für asynchrones Wippen - Truppentyp 5 */ #box_kolonie .kol_truppe_5.inst-2 { animation-delay: -0.3s; } #box_kolonie .kol_truppe_5.inst-3 { animation-delay: -0.7s; } #box_kolonie .kol_truppe_5.inst-4 { animation-delay: -1.1s; } #box_kolonie .kol_truppe_5.inst-5 { animation-delay: -1.5s; } /* Animation und Delays für weitere Instanzen von Typ 5, falls benötigt */ #box_kolonie .kol_truppe_5.inst-6, #box_kolonie .kol_truppe_5.inst-7, #box_kolonie .kol_truppe_5.inst-8, #box_kolonie .kol_truppe_5.inst-9, #box_kolonie .kol_truppe_5.inst-10, #box_kolonie .kol_truppe_5.inst-11, #box_kolonie .kol_truppe_5.inst-12, #box_kolonie .kol_truppe_5.inst-13, #box_kolonie .kol_truppe_5.inst-14, #box_kolonie .kol_truppe_5.inst-15, #box_kolonie .kol_truppe_5.inst-16, #box_kolonie .kol_truppe_5.inst-17, #box_kolonie .kol_truppe_5.inst-18, #box_kolonie .kol_truppe_5.inst-19, #box_kolonie .kol_truppe_5.inst-20 { animation: subtleWiggle 1.8s ease-in-out infinite alternate; } /* Zuweisung der Animation zu Truppentyp 2 - ENTFERNT */ /* #box_kolonie .kol_truppe_2, ... { animation-name: soldierIdleMirrored; ... } #box_kolonie .kol_truppe_2.inst-2 { animation-delay: -0.5s; } ... */ /* Zuweisung der Animation zu Truppentyp 6 */ #box_kolonie .kol_truppe_6, #box_kolonie .kol_truppe_6.inst-2, #box_kolonie .kol_truppe_6.inst-3, #box_kolonie .kol_truppe_6.inst-4, #box_kolonie .kol_truppe_6.inst-5 { /* Behalte Animation für die ersten 5 Instanzen */ animation-name: subtleWiggleMirrored; animation-duration: 1.8s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; } /* Animation und Delays für weitere Instanzen von Typ 6, falls benötigt */ #box_kolonie .kol_truppe_6.inst-6, #box_kolonie .kol_truppe_6.inst-7, #box_kolonie .kol_truppe_6.inst-8, #box_kolonie .kol_truppe_6.inst-9, #box_kolonie .kol_truppe_6.inst-10, #box_kolonie .kol_truppe_6.inst-11, #box_kolonie .kol_truppe_6.inst-12, #box_kolonie .kol_truppe_6.inst-13, #box_kolonie .kol_truppe_6.inst-14, #box_kolonie .kol_truppe_6.inst-15, #box_kolonie .kol_truppe_6.inst-16, #box_kolonie .kol_truppe_6.inst-17, #box_kolonie .kol_truppe_6.inst-18, #box_kolonie .kol_truppe_6.inst-19, #box_kolonie .kol_truppe_6.inst-20 { animation: subtleWiggleMirrored 1.8s ease-in-out infinite alternate; } /* Leichte Verzögerungen für asynchrones Wippen - Truppentyp 6 */ #box_kolonie .kol_truppe_6.inst-2 { animation-delay: -0.2s; } #box_kolonie .kol_truppe_6.inst-3 { animation-delay: -0.6s; } #box_kolonie .kol_truppe_6.inst-4 { animation-delay: -1.0s; } #box_kolonie .kol_truppe_6.inst-5 { animation-delay: -1.4s; } .ani_fadein_fadeout { animation-name: fadein_fadeout; animation-duration: 1s; animation-fill-mode: both; webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } @keyframes fadein_fadeout { 0% { opacity: 1; } 50% { opacity: 0.15; } 100% { opacity: 1; } } .ani_fadein_fadeout2 { animation-name: fadein_fadeout2; animation-duration: 1s; animation-fill-mode: both; webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } @keyframes fadein_fadeout2 { 0% { opacity: 1; } 50% { opacity: 0.60; } 100% { opacity: 1; } } /* KOLONIE - BAUPLäTZE */ #bauplatz_1 { margin: 375px 0 0 100px; z-index: 5; } #bauplatz_2 { margin: 375px 0 0 275px; z-index: 5; } #bauplatz_3 { margin: 375px 0 0 450px; z-index: 5; } #bauplatz_4 { margin: 375px 0 0 625px; z-index: 5; } #bauplatz_5 { margin: 375px 0 0 800px; z-index: 5; } #bauplatz_6 { margin: 275px 0 0 180px; z-index: 4; } #bauplatz_7 { margin: 275px 0 0 360px; z-index: 4; } #bauplatz_8 { margin: 275px 0 0 540px; z-index: 4; } #bauplatz_9 { margin: 275px 0 0 710px; z-index: 4; } #bauplatz_10 { margin: 175px 0 0 275px; z-index: 3; } #bauplatz_11 { margin: 175px 0 0 450px; z-index: 3; } #bauplatz_12 { margin: 175px 0 0 625px; z-index: 3; } #bauplatz_13 { margin: 75px 0 0 360px; z-index: 2; } #bauplatz_14 { margin: 75px 0 0 540px; z-index: 2; } /* POPUP BAUEN */ .gebaeude { border-bottom: 1px solid #111; padding: 10px; } .gebaeude .beschreibung { width: 370px; } .gebaeude .beschreibung span { font-size: 11px; } .gebaeude .beschreibung .titel { font-size: 16px; } .content .nicht_verfuegbar { padding: 5px 8px; background: #090909; margin: 0 0 10px 0; } .gebaeude .kosten span { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; } .gebaeude .kosten img { width: 20px; vertical-align: middle; margin: 2px 0 3px 5px; } .gebaeude .kosten input { } .gebaeude .gebaeude_thumb { float: left; width: 100px; margin: 7px 15px 5px 0; max-height: 130px; } .gebaeude .kosten_weitere_stufen { padding: 8px 5px; } .gebaeude .kosten_weitere_stufen .stufen_selektor select { padding: 12px 20px 12px 24px; margin: 0 10px 0 0; font-weight: bold; } .gebaeude .kosten_weitere_stufen .wertebox hr { margin: 0; } /* POPUP RANGLISTE */ .rangliste_dunkel { background: #090909; border: none !important; } .rangliste_dunkel span { font-size: 10px; } .rangliste_dunkel input { padding: 4px 14px 6px 14px !important; margin-top: 1px !important; } .rangliste_dunkel .footer_anzeige { float: left; width: 277px; text-align: center; margin-top: 4px !important; } .rangliste_zeile { border-bottom: 1px solid #132A40; padding: 6px 0 6px 0; } .rangliste_zeile span { float: left; } .rangliste_zeile .rang { width: 10%; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; text-align: center; } .rangliste_zeile .gold { color: #FC0; } .rangliste_zeile .silber { color: #CCC; } .rangliste_zeile .bronze { color: #C60; } .rangliste_zeile .name { width: 60%; } .rangliste_zeile .kolonien { width: 15%; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; text-align: center; } .rangliste_zeile .punkte { width: 15%; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; text-align: center; } .rangliste_zeile .planet { width: 15%; } .rangliste_zeile input.rechts { margin: 0 5px 0 0; } .rangliste_zeile input.links { margin: 0 0 0 5px; } .rangliste_seiten { } #rangliste_corps { max-height: 368px; overflow-x: hidden; overflow-y: scroll; } /* POPUP QUESTS */ #quests .questimage { width: 100%; } #quests div.content .truppenbox { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 16px; padding: 2px; margin: 0px 2px 0 0; float: left; border: 1px solid #132A40; text-align: center; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;} #quests div.content .truppenbox img { float: none; width: auto; margin: 0 5px 5px 5px; } #quests div.content .truppenbox img.truppe { width: 34px; } #quests div.content b img { width: 21px; vertical-align: middle; margin: 0 10px 0 0; } #quests div.content hr { margin: 10px 0; } #quests input { padding: 14px 0; } /* POPUP EINSTELLUNGEN */ .einstellungen_liste { float: left; } .einstellungen_liste div { float: left; } .einstellungen_liste div input { float: left; width: 155px; margin: 3px 0; } .einstellungen_liste div b { float: left; margin: 8px 0 0 0; width: 130px; } .einstellungen_liste label { padding: 3px 0; cursor: pointer; } .einstellungen_liste label:hover { background: #0A1520; } .einstellungen_liste label input[type=checkbox] { width: 20px; } /* ISO-MAP */ #box_isomap { width: 100%; height: 100%; background: #000; width: 100%; overflow: hidden; border-radius: 5px; } #isomap_planetmenu { position: absolute; width: 170px; height: 170px; margin: 454px 0 0 402px; z-index: 7; padding: 0.7em; } #isomap_planetmenu .dropdown button { width: 120px; } #isomap_planetmenu .dropdown a:hover { background: #0D1D2D; } .offcanvas-map { max-width: 90% !important; margin: auto; font-size: 1.2em; height: auto; } .offcanvas-map .offcanvas-body .row div:nth-child(2), .isomap_tooltip .row div:nth-child(2) { padding: 10px 12px 10px 12px; } .offcanvas-map .offcanvas-body .row div:nth-child(2) i, .isomap_tooltip .row div:nth-child(2) i { color: #4DA6FF; } .offcanvas-map .offcanvas-body .row div:last-child, .isomap_tooltip .row div:last-child { padding: 10px 10px 10px 10px; } .offcanvas-map .offcanvas-body .row div:first-child, .isomap_tooltip .row div:first-child { background-color: #090909; border-top-left-radius: 5px; border-top-right-radius: 5px; text-align: center; padding: 5px 0 10px 0; line-height: 130%; } #isomap_tooltip { border-color: #090909; z-index: 4; width: 270px; margin: 255px 0 0 -470px !important; } #isomap_tooltip_header i { color: #4DA6FF; } #isomap_tooltip #tile-info-content .row div:first-child { background: none; border-bottom: 2px solid #090909; } .btn-offcanvas-close { padding: 3px; position: absolute; margin-left: 40%; font-size: 1em; } .isomap_btn { position: absolute; margin: 510px 0 0 250px; } .isomap_btn button { margin-right: 6px; } .isomap_btn button:nth-child(3) { margin-right: 180px;} /* STARMAP */ #box_starmap { width: 100%; height: 100%; width: 100%; overflow: hidden; border-radius: 5px; background: url('../../img/systeme/03.jpg') 100% #000000 no-repeat !important; } /* NACHRICHTEN - BERICHTE */ #berichte .col-11, #nachrichten .col-11 { border-left: 5px solid #4DA6FF; border-bottom-left-radius: 5px; border-top-left-radius: 5px; } .tabs.nachrichten .msg_tab_badge { background: #FFF; font-size: 12px; padding: 1px 4px 2px 4px; margin-top: 2px; border-radius: 4px; margin-left: 0.5em; float: right; } .nachrichten .container-md .row, .nachrichten .container-md .row .p-0 { background: none; } .nachrichten .container-md .row:hover { background: #0A1520; } .nachrichten .container-md .row .col-10 { font-size: 1.3em; } .nachrichten #nachrichten { width: 100%; } .nachrichten #berichte { width: 100%; overflow-x: hidden; } .nachrichten .nachrichten_zeilen_box, .nachrichten .berichte_zeilen_box { max-height: 500px; overflow-y: scroll; } .nachrichten #berichte .truppenbox { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 12px; padding: 2px; margin: 0px 2px 0 0; float: left; border: 1px solid #132A40; text-align: center; } .nachrichten #berichte .truppenbox:hover { cursor: help; border: 1px solid #333; } .nachrichten #berichte .truppenbox img { width: 30px; } .nachrichten #berichte .prozentbalken_raketen { float: left; margin: 5px 5px 0 0; background: #222; width: 160px !important; height: 15px; border: 1px solid #555; overflow: hidden; } .nachrichten #berichte .prozentbalken_raketen:hover { border-color: #A6FFFF; } .nachrichten #berichte .prozentbalken_raketen div { background: #4DA6FF; height: 15px; border-right: 1px solid #A6FFFF; } .nachrichten #berichte .prozentbalken_raketen div.minus { background: #C00 !important; border: none !important; } /* INTERFACE ALLGEMEIN */ .interface_verbrauch .prozentbalken { float: left; background: #222; width: 100%; height: 15px; border: 1px solid #555; overflow: hidden; } .interface_verbrauch .prozentbalken:hover { border-color: #A6FFFF; } .interface_verbrauch .prozentbalken div { background: #4DA6FF; border-right: none; border-radius: 0 !important; max-width: 100%; cursor: help; } /* INTERFACE HAUPTQUARTIER */ .hq_icon { float: left; margin: 0 18px 0 0; } .hq_icon img { width: 28px; margin: 2px 3px 2px 0; } .hq_titel { float: left; padding: 6px 0 0 0; margin: 0 10px 0 0; } .hq_werte { float: left; text-align: center; font-size: 16px; margin: 8px 0 0 0; } .hq_werte img { float: right; width: 25px; margin: -4px 0 0 10px; vertical-align: central; } .hq_uebersicht_liste { max-height: 260px; } .hq_uebersicht { float: left; width: 510px !important; padding: 3px 0 5px 0; border-bottom: 1px solid #111; margin: 0 0 4px 0; } .hq_uebersicht img.planet_icon { float: left; width: 32px; margin: 0 8px 0 0; } .hq_uebersicht img.planet_icon:hover { opacity: 0.5; } .hq_uebersicht img.kolonie_icon { position: absolute; width: 24px; margin: 4px 0 0 4px; } .hq_uebersicht .planet_titel { float: left; width: 100px; overflow: hidden; } .hq_uebersicht .planet_titel b { float: left; overflow: hidden; height: 16px !important; } .hq_uebersicht .ubersicht_rohstoffe { float: left; width: 144px;} .hq_uebersicht .ubersicht_rohstoffe div { float: left; width: 36px; text-align: center; } .hq_uebersicht .ubersicht_rohstoffe div img { width: 15px; margin: 0 0 2px 0; } .hq_uebersicht .box_hinweis { float: left; margin: 1px 5px; } .hq_uebersicht .box_hinweis img { width: 28px; } .reparaturen_zeile { width: 100%; border: 2px solid #111; cursor: pointer; } .reparaturen_zeile:hover { background: #0D1D2D !important; border: 2px solid #4DA6FF; } .reparaturen_zeile:has(input[type="radio"]:checked) { border: 2px solid #4DA6FF; background: #0D1D2D !important; } .reparaturen_zeile input[type=radio] { float: left; width: 20px; margin: 8px 0 0 0; } .reparaturen_zeile .reparaturen_titel { background: none !important; float: left; width: 95px; padding: 6px 0 0 0; margin: 0 10px 0 5px; } .reparaturen_zeile .prozentbalken { float: left; height: 15px; overflow: hidden; } .reparaturen_zeile .prozentbalken div.plus { background: #0F6 !important; border: none !important; } .reparaturen_zeile .reparaturen_werte { background: none !important; font-family: Verdana, Geneva, sans-serif; float: left; margin: 4px 5px 0 0; width: 85px; font-weight: normal; } .reparaturen_zeile .reparaturen_werte strong { color: #555; margin: 0; } .reparaturen_zeile .reparaturen_werte b { color: #4DA6FF; margin: 0; } .reparatur_box label { float: left; width: 90px; } .reparatur_box label input[type=text] { float: left; width: 30px; margin: -5px 5px 0 15px; } .reparatur_box input[type=button] { float: left !important; width: 100% !important; margin: 5px 0 0 0; } /* INTERFACE KRAFTWERK */ .energie_zeile .energie_icon { float: left; margin: 0 15px 0 0; } .energie_zeile .energie_icon img { width: 25px; margin: 3px 0 0 0; } .energie_zeile .energie_titel { float: left; width: 65px; padding: 6px 0 0 0; margin: 0 10px 0 0; } .energie_zeile .energie_werte { font-family: Verdana, Geneva, sans-serif; float: left; text-align: center; margin: 4px 0 0 0; width: 135px; font-weight: normal; } .energie_zeile .energie_werte strong { color: #555 } .energie_zeile .energie_werte b { color: #4DA6FF } .energie_zeile .energie_werte img { float: right; width: 25px; margin: -4px 0 0 0; } /* INTERFACE LAGER */ #transport_lg .truppenbox { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; width: 44px; overflow: hidden; font-size: 14px; margin: 2px 2px 2px 0; float: left; border: 1px solid #132A40; text-align: center; } #transport_lg .truppenbox:hover { border: 1px solid #333; } #transport_lg .truppenbox img { margin: 5px; } #transport_lg .truppenbox input { padding: 2px; margin: 2px 0; width: 34px; text-align: center; } #transport_lg .truppenbox_kl { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; width: 40px; overflow: hidden; margin: 2px 2px 2px 0; float: left; border: 1px solid #132A40; text-align: center; } #transport_lg .truppenbox_kl:hover { border: 1px solid #333; } #transport_lg .truppenbox_kl img { width: 25px; margin: 2px; } #transport_lg .infopfeil { float: left; padding: 35px 1px 37px 2px; margin: 2px 14px 0 12px; font-size: 18px; background: #111; } /* INTERFACE ROHSTOFFFABRIK */ .rohstoff_zeile { width: 100%; font-weight: bold; padding: 2px 0 0 0; border-bottom: 1px solid #111; } .rohstoff_zeile input { width: 50px; font-size: 17px; font-weight: bold; color: #4DA6FF; padding: 4px 0 2px 0; } .rohstoff_zeile input.verteilte_harvester { width: 70px; margin: 4px 0 0 6px; background: #111; border: none; } .rohstoff_zeile input.harvester_wert { width: 46px; color: #999; padding: 5px 0 5px 0; font-weight: normal; font-size: 12px; margin-top: 4px; border-radius: 0; border-color: #4DA6FF; border-right: none; border-left: none; } .rohstoff_zeile .rohstoff_icon { float: left; margin: 0 15px 0 0; } .rohstoff_zeile .rohstoff_icon img { width: 25px; margin: 3px 0 0 0; } .rohstoff_zeile .rohstoff_titel { float: left; width: 70px; padding: 6px 0 0 0; margin: 0 5px 0 0; } .rohstoff_zeile .rohstoff_produktion { float: left; padding: 6px 0 0 0; } .rohstoff_zeile .rohstoff_produktion img { float: left; width: 25px; margin: -5px 0 0 5px; vertical-align: middle; } .rohstoff_zeile .rohstoff_produktion span { float: left; width: 40px; text-align: right; font-weight: bold; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; } .rohstoff_zeile .rohstoff_produktion small { float: left; color: #333; } .rohstoff_zeile .rohstoff_produktion strong { float: left; padding: 0 10px; margin: -3px 0 0 0; font-size: 18px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; color: #555; } .rohstoff_zeile .rohstoff_produktion b { float: left; width: 40px; text-align: center; font-weight: bold; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; color: #4DA6FF; } .rohstoff_zeile input { float: right; text-align: center; } .rohstoff_zeile input[type=button] {padding: 4px 4px; font-size: 14px; width: 34px; font-weight: bold; margin: 4px 0 6px 0; border-radius: 0; } .rohstoff_zeile input.plus { border-radius: 0; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-left: none; } .rohstoff_zeile input.minus { border-radius: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px; border-right: none; } #popup_rf_fehler { width: 100%; text-align: center !important; padding: 4px 0px; } .prozentbalken_extraktor { float: left; margin: 7px 5px 0 5px; background: #222; width: 50%; height: 5px; border: 1px solid #555; overflow: hidden; } .prozentbalken_extraktor:hover { border-color: #A6FFFF; } .prozentbalken_extraktor div { background: #4DA6FF !important; height: 5px; border-right: 1px solid #A6FFFF; } /* SLIDER */ .form-range { border: none; padding: 0.5em; background: none; } .form-range:hover { border: none; background: none; } .form-range:active { border: none; background: none; } .form-range:focus { border: none; box-shadow: none; background: none; } .form-range::-webkit-slider-runnable-track { height: 14px; background-color: #0D1D2D; border-radius: 4px; } .form-range::-moz-range-track { height: 14px; background-color: #0D1D2D; border-radius: 4px; border: none; } .form-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 27px; background: #4DA6FF; border-radius: 25%; cursor: pointer; margin-top: -7px; border: 2px solid #0D1D2D; } .form-range::-moz-range-thumb { width: 22px; height: 22px; background: #4DA6FF; border-radius: 25%; cursor: pointer; border: 2px solid #0D1D2D; } /* INTERFACE WAFFENFABRIK */ .waffen_zeile { width: 100%; font-weight: bold; padding: 2px 0 0 0; } .waffen_zeile .waffen_icon { float: left; margin: 0 15px 0 0; } .waffen_zeile .waffen_icon img { width: 25px; margin: 3px 0 0 0; } .waffen_zeile .waffen_titel { float: left; width: 115px; padding: 6px 0 0 0; margin: 0 10px 0 0; } .waffen_zeile .prozentbalken { float: left; margin: 5px 0 0 0; background: #222; width: 47% !important; height: 15px; border: 1px solid #555; overflow: hidden; } .waffen_zeile .prozentbalken:hover { border-color: #A6FFFF; } .waffen_zeile .prozentbalken div { background: #4DA6FF; height: 15px; border-right: 2px solid #A6FFFF; } .waffen_zeile .waffen_werte { font-family: Verdana, Geneva, sans-serif; float: left; text-align: center; margin: 4px 0 0 0; width: 100px; font-weight: normal; } .waffen_zeile .waffen_werte strong { color: #555 } .waffen_zeile .waffen_werte b { color: #4DA6FF } .waffen_zeile .waffen_werte img { float: right; width: 25px; margin: -4px 0 0 0; } #waffen_bauteil_wf .kosten_inaktiv { color: #111 !important; } #waffen_bauteil_wf .kosten_inaktiv img { filter: grayscale(100%); opacity: 0.75; } /* INTERFACE KASERNE */ #truppen_ks .gebaeude { padding: 0 0 8px 0; } .kaserne_ausbildung_zeile { width: 100%; font-weight: bold; padding: 0; } .kaserne_ausbildung_zeile img { float: left; width: 100px; margin: 3px 5px 3px 5px; } .kaserne_ausbildung_zeile .truppe_titel { width: 355px; margin: 0; padding: 0; } .kaserne_ausbildung_zeile .truppe_titel img { float: left; width: 20px; margin: 3px 3px 0 0; } .kaserne_ausbildung_zeile .truppe_titel span { font-size: 12px; float: left; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; margin: 5px 6px 0 0; } .kaserne_ausbildung_zeile .truppe_titel b { float: left; margin: 3px 6px 0 5px; } .kaserne_ausbildung_zeile .truppe_titel strong { font-size: 14px; } .kaserne_ausbildung_zeile .truppe_titel input[type=button] { margin: 29px 3px 0 0; } .kaserne_ausbildung_zeile .truppe_titel input[type=text] { width: 25px; margin: 29px 3px 0 0; text-align: center; } .kaserne_ausbildung_zeile .prev_button { float: left; width: 3.5%; } .kaserne_ausbildung_zeile .mitte_content { float: left; width: 93%; } .kaserne_ausbildung_zeile .truppen_content { float: left; margin: 0; padding: 0; } .kaserne_ausbildung_zeile .next_button { float: left; width: 3.5%; } .kaserne_ausbildung_zeile .truppenwerte_box { line-height: 100%; text-align: center; margin: 3px 3px 0 0; border: 1px solid #222; padding: 3px 2px 0 2px; font-weight: normal !important; width: 30px;} .kaserne_ausbildung_zeile .truppenwerte_box span { width: 100%; text-align: center; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: bold; } .kaserne_ausbildung_zeile .truppenwerte_box_v2 { line-height: 100%; text-align: center; margin: 10px 5px 0 0; border: 1px solid #111; padding: 5px 3px 3px 3px; font-weight: bold !important; width: 30px;} .kaserne_ausbildung_zeile .truppenwerte_box_v2 i { font-size: 16px; margin-bottom: 3px; } .kaserne_ausbildung_zeile .truppenwerte_box_v2 span { width: 100%; text-align: center; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: bold; } .truppen_im_ausbau_zeile { width: 100%; float: left; margin: 1px 0 !important; padding: 1px 0 !important; } .truppen_im_ausbau_zeile img { float: left; vertical-align: middle; margin: 0 5px 0 0; width: 20px; } .stationierte_truppen_zeile .namenssuche_koloniedropdown { float: left; width: 139px; } .stationierte_truppen_zeile .truppenbox { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 12px; padding: 2px; margin: 0 2px 0 0; float: left; border: 1px solid #132A40; text-align: center; } .stationierte_truppen_zeile .truppenbox:hover { cursor: pointer; opacity: 0.7; border: 1px solid #333; } .stationierte_truppen_zeile .truppenbox img { width: 30px; } .stationierte_truppen_zeile .truppenbox input { padding: 2px; width: 23px; text-align: center; } .stationierte_truppen_zeile .infopfeil { padding: 24px 1px 24px 2px; margin: 6px 4px 0 0; font-size: 18px; background: #111; } .beutebox { height: 1px; font-family: Verdana, Geneva, sans-serif; } .beutebox img { vertical-align: middle; width: 16px; } #popup_ks_truppenbewegungen { max-height: 500px; overflow-x: hidden; } #popup_ks_truppenbewegungen .row .rounded-start, #popup_ks_truppenbewegungen .row .rounded-end { text-align: center; } #popup_ks_truppenbewegungen .row .angriff { background: #250404; color: #C00; } #popup_ks_truppenbewegungen .row .rueckkehr { background: #0E2506; color: #0C0; } #popup_ks_truppenbewegungen .row .unterstuetzung { background: #132A40; color: #4DA6FF; } .truppen_im_ausbau_block { max-height: 200px; } .ks_truppen_bau_img { border: 2px solid #090909; filter: grayscale(0.75); transition: filter 0.5s ease, border 0.5s ease, background 0.5s ease;} .ks_truppen_bau_img.active {border-color: #4DA6FF;background: #132A40 !important;filter: grayscale(0);} .ks_truppen_bau_img:hover { background: #132A40 !important; filter: grayscale(0); } .ks_truppen_kat div div { border-radius: 3px; text-align: center; font-size: 0.6em; } .ks_truppen_kat > div:nth-child(1) > div { background-color: #a0171723; color: #772626; } .ks_truppen_kat > div:nth-child(2) > div { background-color: #1737a023; color: #264277; } .ks_truppen_kat > div:nth-child(3) > div { background-color: #a09e1723; color: #777626; } /* INTERFACE RAKETENSILO */ .rotate-90 { transform: rotateZ(90deg) !important; } .konstruktion_box { float: left; width: 40%; } .konstruktion_info_box { float: left; width: 54%; padding: 10px 0 0 10px; } .konstruktion_info_box .kosten { width: 100%; line-height: 160%; margin: 3px 0 0 0; } .konstruktion_info_box .kosten span { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; } .konstruktion_info_box .kosten img { width: 20px; vertical-align: middle; margin: 2px 0 3px 5px; } #raketenbau_rk .infopfeil { padding: 80px 1px 80px 2px; margin: 10px 4px 0 0; font-size: 18px; background: #111; } .konstruktion_zeile { width: 100%; } .raketen_im_ausbau_zeile { width: 100%; float: left; padding: 3px 0; margin: 3px 0; } .raketen_im_ausbau_zeile img { float: left; vertical-align: middle; margin: -1px -6px 5px 0px; width: 26px; transform: rotateZ(90deg); } .gelagerte_raketen_zeile { line-height: 160% !important; } .gelagerte_raketen_zeile .truppenbox { float: left; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; padding: 5px 1px 1px 1px !important; width: 24px; font-size: 12px; margin: 0 6px 0 0; border: 1px solid #132A40; } .gelagerte_raketen_zeile .truppenbox:hover { cursor: pointer; border: 1px solid #333; } .gelagerte_raketen_zeile .truppenbox img { cursor: help; width: 24px; } .gelagerte_raketen_zeile .truppenbox input[type=radio] { display: block; margin: 3px 0 0 6px; } input[type=radio]:checked > label {background: #FFF !important; } .gelagerte_raketen_zeile .infopfeil { padding: 42px 1px 41px 2px; margin: 0px 4px 0 0; font-size: 18px; background: #111; } .gelagerte_raketen_zeile select { padding: 4px 5px; margin: 1px 0 1px 1px; } .gelagerte_raketen_zeile input[type=button] { width: 99%; } .gelagerte_raketen_zeile input[type=text] { padding: 5px; margin: 1px; width: 100px; } .gelagerte_raketen_zeile .namenssuche_koloniedropdown { float: left; width: 139px; } .gelagerte_raketen_zeile .ajax_namensbox { margin-top: 31px; } .gelagerte_raketen_zeile #popup_rk_silo_treibstoffverbrauch img { width: 18px; margin: -2px 0 0 0; vertical-align: middle; } .gelagerte_raketen_zeile .halbe_spalte img.rk_zieltyp { width: 35px; margin: 5px 10px 0 0;} /* INTERFACE VERTEIDIGUNGSANLAGE */ #verteidigung_va .box_passivanzeige { background: #002142; margin: 5px 5px 5px 0; padding: 10px 0 7px 0; text-align: center; float: left; width: 49%; cursor: help; } #verteidigung_va .box_passivanzeige:hover { background: #00152B; } #verteidigung_va .box_passivanzeige b { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 24px; margin: 1px 0 0 0; } #verteidigung_va .box_passivanzeige span img { width: 20px; margin: 0 5px; vertical-align: middle; } #verteidigung_va .box_besatzung_versetzen { float: left; width: 99%; text-align: center; margin: 5px 0 0 0; } #verteidigung_va .box_besatzung_versetzen .timer_besatzung_versetzen { float: none; font-size: 20px; margin: 5px 0 0 0; } #verteidigung_va .box_besatzung_versetzen img { float: left; width: 30px !important; vertical-align: middle; margin: 0 5px 0 0; } #verteidigung_va .box_besatzung_versetzen .box_versetzung { width: 75px; text-align: center; background: #111111; padding: 1px 5px 4px 5px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } #verteidigung_va .box_besatzung_versetzen .box_versetzung small { color: #555; } #verteidigung_va .box_besatzung_versetzen .box_versetzung span { font-size: 18px !important; } #verteidigung_va .box_besatzung_versetzen .pfeil { font-size: 28px; margin: 8px 5px; color: #4DA6FF; } /* INTERFACE TIEFENBOHRER */ #tiefenbohrer_tb .infopfeil { padding: 40px 1px 40px 2px; float: right; border-radius: 4px; margin: 0 10px 0 0; font-size: 18px; background: #111; } #tiefenbohrer_tb .select_rohstoffauswahl { padding: 25px 8px;font-size: 18px; margin: 5px 5px 0 0;} #tiefenbohrer_tb .verdampfen_rohstoff_menge { padding: 25px 5px 25px 5px; text-align: center; float: left; margin: 5px 0 0 0; } #tiefenbohrer_tb .truppenbox { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; padding: 0 5px 5px 5px; overflow: hidden; font-size: 14px; margin: 5px 2px 2px 0; float: left; border: 1px solid #132A40; text-align: center; } #tiefenbohrer_tb .truppenbox:hover { border: 1px solid #333; } #tiefenbohrer_tb .truppenbox img { margin: 5px 5px 10px 5px; } #tiefenbohrer_tb .verdampfen_dauer { margin: 32px 12px 0 0; } /* TABS */ .tabs { float: left; width: 100%; } .tabs ul { margin: 0; padding: 0; } .tabs ul li { float: left; background: #181818; list-style-type: none; margin: 0; } .tabs ul li a { float: left; color: #666; padding: 10px 12px; font-size: 1.4em; text-align: center !important; transition: color 0.4s ease;} .tabs ul li a:hover { color: #CCCCCC; } .tabs ul li a i { vertical-align: middle; margin-top: 1px; } .tabs ul li a small { font-size: 0.5em; vertical-align: middle; } .ui-tabs-active { background: #090909 !important; color: #4DA6FF !important; } .ui-tabs-active a { color: #4DA6FF !important; } .tabs_content { background: #090909; padding: 10px; width: 100% !important; overflow: hidden; } .tabs_content_niederlassungen { padding: 10px; width: 98% !important; height: 186px; background: #CCC; } .reiter_rechts { float: right !important; padding: 5px 10px; margin-right: 1px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 10px; } .reiter_rechts img { width: 17px; vertical-align: middle; margin: -2px 5px 0 0; } /* TABS NEU - Bootstrap */ .nav-tabs { width: 100%; border-color: #191919 !important; } .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { color: #4DA6FF !important; background-color: #090909 !important; border: none !important; border-bottom-color: #191919 !important; } .round_o.ui-tabs-tab { border-top-left-radius: 0px !important; border-top-right-radius: 0px !important; } .nav-tabs .nav-link:hover { background-color: #151515; } .nav-tabs .nav-link { background: none; margin-right: 0.2em; } .nav-tabs .nav-link.ms-auto { margin-right: 0 !important; } /* ÜBERSCHRIFTEN */ h1 { font-size: 20px; margin: 5px 0px; padding: 0px; } h2 { font-size: 16px; margin: 5px 0px; padding: 0px; } h3 { font-size: 14px; margin: 0px; padding: 0px; } h4 { font-size: 12px; margin: 0px; padding: 0px; } h1.bg { padding: 8px 10px; margin-top: 7px; margin-bottom: 10px; background: #111; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } /* TEXT ALLGEMEIN */ a { font-weight: bold; color: #4DA6FF; text-decoration: none !important; outline: none !important; } a:hover { color: #4DD2FF; } a:active { border: none; } input, button, submit, select, option { outline: none !important; } .txt_klein { font-size: 0.8em; } .txt_gross { font-size: 18px; } .txt_gross2 { font-size: 16px; } .txt_gross3 { font-size: 14px; } .txt_gruen { color: #0C0; } .txt_blau { color: #4DA6FF; } .txt_rot { color: #C00 !important; } .txt_orange { color: #F90 !important; } .txt_gelb { color: #FC0 !important; } .txt_grau { color: #999 !important; } .txt_mitte { text-align: center; } .txt_dunkelgrau { color: #555 !important; } .txt_weiss { color: #FFF; } .txt_rechts { text-align: right; } .txt_news { font-size: 15px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; line-height: 150%; } .pointer { cursor: pointer !important; } .help { cursor: help; } .border_red { border-color: #804040 !important; } /* BREITEN */ .width_30 { width: 30px; } .width_50 { width: 50px; } .width_80 { width: 80px; } .width_100 { width: 100px; } .width_120 { width: 120px; } .width_150 { width: 150px; } .width_200 { width: 200px; } .width_250 { width: 250px; } .width_300 { width: 300px; } .width_350 { width: 350px; } .width_400 { width: 400px; } .width_450 { width: 450px; } .width_500 { width: 500px; } .width_550 { width: 550px; } .width_600 { width: 600px; } .width_650 { width: 650px; } .width_700 { width: 700px; } .width_20p { width: 20%; } .width_25p { width: 25%; } .width_30p { width: 30%; } .width_35p { width: 35%; } .width_40p { width: 40%; } .width_44p { width: 44%; } .width_45p { width: 45%; } .width_46p { width: 46%; } .width_48p { width: 48%; } .width_49p { width: 49%; } .width_50p { width: 50%; } .width_60p { width: 60%; } .width_65p { width: 65%; } .width_70p { width: 70%; } .width_80p { width: 80%; } .width_90p { width: 90%; } .width_93p { width: 93%; } .width_95p { width: 95%; } .width_98p { width: 98%; } .width_99p { width: 99%; } .width_100p { width: 100%; } /* ABSTÄNDE */ .nomargin { margin: 0 !important; } .margin3 { margin: 3px; } .margin1o { margin: 1px 0 0 0; } .margin2o { margin: 2px 0 0 0; } .margin3o { margin: 3px 0 0 0; } .margin5 { margin: 5px; } .margin5o { margin: 5px 0 0 0; } .margin6o { margin: 6px 0 0 0; } .margin7o { margin: 7px 0 0 0; } .margin5r { margin: 0 5px 0 0; } .margin5u { margin: 0 0 5px 0; } .margin10 { margin: 10px; } .margin10l { margin: 0 0 0 10px; } .margin10r { margin: 0 10px 0 0; } .margin10o { margin: 10px 0 0 0; } .margin10u { margin: 0 0 10px 0; } .margin12o { margin: 12px 0 0 0; } .margin15 { margin: 15px; } .margin15o { margin: 15px 0 0 0; } .margin20o { margin: 20px 0 0 0; } .margin20r { margin: 0 20px 0 0; } .margin20 { margin: 20px; } .margin20u { margin-bottom: 20px; } .margin20o { margin-top: 20px; } /* MAX HEIGHTS */ .maxh100 { max-height: 100px !important; } .maxh150 { max-height: 150px !important; } .maxh200 { max-height: 200px !important; } .maxh250 { max-height: 250px !important; } .maxh300 { max-height: 300px !important; } .maxh350 { max-height: 350px !important; } .maxh400 { max-height: 400px !important; } .maxh450 { max-height: 450px !important; } .maxh500 { max-height: 500px !important; } .maxh550 { max-height: 550px !important; } .maxh600 { max-height: 600px !important; } .l { margin: 0 0 0 20px; } .padding2 { padding: 2px; } .padding3 { padding: 3px; } .padding5 { padding: 5px; } .padding5o { padding: 5px 0 0 0; } .padding5u { padding: 0 0 5px 0; } .padding10 { padding: 10px; } .padding10u { padding: 0 0 10px 0; } .padding115 { padding: 15px; } .padding5r { padding-right: 5px; } .lh-2 { line-height: 1.1; } .lh-3 { line-height: 1.2; } .lh-4 { line-height: 1.3; } .lh-5 { line-height: 1.4; } .lh-6 { line-height: 1.5; } /* STANDARDS */ .links { float: left !important; } .rechts { float: right !important; } .border { border: 1px solid #000; } .border2 { border: 2px solid #0F0F0F; } td { padding: 3px 8px; } .hidden { display: none; } .show { display: inline; } .hand { cursor: move; } .overlay_komplett { z-index: 99999; position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: .5; filter: Alpha(Opacity=50); } .overlay { z-index: 99999; background: url(../../img/icons/loading.GIF) center no-repeat #000; position: absolute; filter: alpha(opacity=80); opacity: 0.8; } b.head { float: left; margin: 0 0 5px 0; } b.head2 { float: left; margin: 5px 0; } .viertel_spalte { float: left; width: 25%; } .halbe_spalte { float: left; width: 50%; } .dreiviertel_spalte { float: left; width: 75%; } .ajax_namensbox { position: absolute; margin: 36px 0 0 1px; z-index: 1; width: 100%; background: #090909; padding: 5px 10px; border-right: 1px solid #132A40; border-left: 1px solid #132A40; border-bottom: 1px solid #132A40; } .ajax_namensbox a { float: left; width: 100%; padding: 5px; } .ajax_namensbox a:hover { background-color: #0A1520; border-radius: 5px; } .rahmen_rot { border-color: #800000 !important; } .rahmen_blau { border-color: #00729D !important; } .rahmen_gelb { border-color: #FC0 !important; } .rahmen_orange { border-color: #F90 !important; } hr { border: none; border-top: 1px solid #111; margin: 3px 0; padding: 0; } hr.grau { border-color: #111; } hr.divider { border-color: #333; } .zahlen { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; } .timer_center { margin-left: 150px; } .btn_plus_kl { float: left; font-weight: bold; background: #0A1520; color: #4DA6FF; padding: 1px 6px; margin: -1px 5px 0 0; border-radius: 5px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; } .btn_plus_kl:hover { background: #132A40; } .btn_plus_mi { float: left; font-weight: bold; background: #0A1520; color: #4DA6FF; font-size: 16px; padding: 7px 12px; margin: -1px 5px 0 0; border-radius: 5px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; } .btn_plus_mi:hover { background: #132A40; } .btn_plus_gr { float: left; font-weight: bold; background: #0A1520; color: #4DA6FF; font-size: 22px; padding: 12px 16px; margin: -1px 5px 0 0; border-radius: 5px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; } .btn_plus_gr:hover { background: #132A40; } .btn_loeschen { background: #222; color: #444; width: 12px; height: 10px; margin: 0 5px 2px 0; padding: 0px 8px 9px 8px; text-align: center; } .btn_loeschen:hover { color: #F00; background: #620000; } .btn_ok { background: #031C00; color: #444; width: auto; height: 10px; margin: 0 5px 2px 0; padding: 0px 8px 9px 8px; text-align: center; } .btn_ok:hover { color: #0F0; background: #0B6F00; } .fett { font-weight: bold; } .hoverme:hover { opacity: 0.7; } .clb { clear: both; } .badge-dark { width: auto; text-align: center; background: #111111; padding: 5px; border-radius: 4px; } .btn_trash { background: #180E0E; padding: 6px; border: 1px solid #800000 ; border-radius: 3px; color: #800000; cursor: pointer; } .btn_trash:hover { background: #111; border-color: #FF0000; } .btn_i { cursor: pointer; } .btn_i:hover { color: #4DA6FF !important; } /* Formulare - NEU - 31.03.2025 */ .form-control, .input-group-text, .form-select { background-color: #090909 !important; border: 1px solid #0D1D2D !important; color: #EFEFEF !important; } .input-group-prepend .input-group-text { background-color: #141414 !important; border-bottom-right-radius: 0 !important; border-top-right-radius: 0 !important; } .input-group-text { color: #4DA6FF !important; } .form-control:focus, .input-group-text:focus { background-color: #090909 !important; border-color: #4DA6FF !important; color: #EFEFEF !important; } .custom-select:focus, .form-select:focus { background-color: #090909 !important; border-color: #4DA6FF !important; color: #EFEFEF !important; } .form-floating>.form-control-plaintext~label::after, .form-floating>.form-control:focus~label::after, .form-floating>.form-control:not(:placeholder-shown)~label::after, .form-floating>.form-select~label::after { background: none !important; color: #4DA6FF !important; } /* FORM SIWTCHES */ .form-check-input { clear: left; background-color: #111; border: 2px solid #333; transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-position 0.2s ease-in-out; -webkit-appearance: none; -moz-appearance: none; appearance: none; print-color-adjust: exact; vertical-align: top; } .form-switch .form-check-input { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23555555'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: left center; background-size: contain; width: 2em; height: 1em; border-radius: 2em; margin-left: -2.5em; } .form-check-input:checked { background-color: #4DA6FF; border-color: #4DA6FF; } .form-switch .form-check-input:checked { background-position: right center; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23FFFFFF'/%3e%3c/svg%3e"); } .form-check-input:hover:not(:disabled) { border-color: #4DA6FF; } .form-check-input:focus { border-color: #4DA6FF; outline: 0; box-shadow: 0 0 0 0.25rem rgba(77, 166, 255, 0.35); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23555555'/%3e%3c/svg%3e"); } .form-switch .form-check-input:focus { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23555555'/%3e%3c/svg%3e"); } .form-switch .form-check-input:focus:checked { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23FFFFFF'/%3e%3c/svg%3e"); } .form-check-input:disabled { pointer-events: none; filter: none; opacity: 0.5; background-color: #333; border-color: #444; } .form-switch .form-check-input:disabled { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23888888'/%3e%3c/svg%3e"); } .form-switch.form-switch-sm .form-check-input { height: 1rem; width: calc(1rem + 0.75rem); border-radius: 2rem; } .form-switch.form-switch-md .form-check-input { height: 1.5rem; width: calc(2rem + 0.75rem); border-radius: 3rem; } .form-switch.form-switch-lg .form-check-input { height: 2rem; width: calc(3rem + 0.75rem); border-radius: 4rem; } .form-switch.form-switch-xl .form-check-input { height: 2.5rem; width: calc(4rem + 0.75rem); border-radius: 5rem; } /* AUTOFILL KORREKTUREN */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-text-fill-color: #EFEFEF !important; color: #EFEFEF !important; box-shadow: 0 0 0 1000px #090909 inset !important; transition: background-color 5000s ease-in-out 0s; } input.form-control, input[type=text], input[type=password], input[type=email] { color: #EFEFEF !important; background-color: #090909 !important; } /* Formulare */ /* label { float: left; width: 100%; padding: 0px; } label span { float: left; width: 30%; min-width: 30%; padding: 6px 0 0 0; font-weight: bold; } label input, label select { float: left; width: 60%; }*/ input, textarea, select { background: #090909; border: 1px solid #132A40; color: #999; padding: 5px 10px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } input:hover, input:focus { background: #111; border: 1px solid #4DA6FF; } input[type=submit], input[type=button] { margin: 2px; width: auto; cursor: pointer; color: #4DA6FF; font-weight: bold; padding: 5px 15px; background: #132A40; font-size: 12px; border: 1px solid #4DA6FF;} input[type=submit]:hover, input[type=button]:hover { background: #4DA6FF; color: #FFF; } select { } select:focus { border-color: #4DA6FF; } input.off { border-color: #900; background: #180E0E; color: #666; } input.off:hover { background: #111; color: #444; border-color: #C00; } input.prev, input.next { float: left; padding: 0 3px; height: 100px; } option[disabled=disabled] { color: #333; } option:disabled { font-weight: bold; background: #111; color: #4DA6FF; padding: 5px 0; } /* SPECIALS */ .round_a { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .round_r { -webkit-border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 4px; -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .round_l { -webkit-border-top-left-radius: 4px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-topleft: 4px; -moz-border-radius-bottomleft: 4px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .round_u { -webkit-border-bottom-left-radius: 4px; -moz-border-radius-bottomleft: 4px; border-bottom-left-radius: 4px; -webkit-border-bottom-right-radius: 4px; -moz-border-radius-bottomright: 4px; border-bottom-right-radius: 4px;} .round_o { -webkit-border-top-left-radius: 4px; -moz-border-radius-topleft: 4px; border-top-left-radius: 4px; -webkit-border-top-right-radius: 4px; -moz-border-radius-topright: 4px; border-top-right-radius: 4px;} .round_none { border-radius: 0 !important; } .schatten { box-shadow: 0px 3px 8px 0px #000; } .txt_schatten {text-shadow: #000 3px 3px 5px;} .transparent10 { filter: alpha(opacity=10) !important; opacity: 0.1 !important; } .transparent30 { filter: alpha(opacity=30) !important; opacity: 0.3 !important; } .transparent50 { filter: alpha(opacity=50) !important; opacity: 0.5 !important; } .transparent80 { filter: alpha(opacity=80) !important; opacity: 0.8 !important; } .transparent_none { filter: alpha(opacity=100) !important; opacity: 1 !important; } /* SCROLLBAR */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background-color: #222; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } ::-webkit-scrollbar-thumb { background-color: #4DD2FF; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background-color: #4DD2FF; } /* SLIDER */ .ui-slider {position: relative; text-align: left;width: 98.5%;background: #1C3E5F !important;margin: 10px 0;-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;} .ui-slider .ui-slider-handle {background: #4DA6FF;position: absolute;z-index: 2;width: 1.5em;height: 1.5em;border:1px solid #FFF; cursor: pointer;-ms-touch-action: none;touch-action: none;-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;} .ui-slider .ui-slider-range {background: #132A40;position: absolute;z-index: 1;font-size: .7em;display: block;border: 0;background-position: 0 0;-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;} /* support: IE8 - See #6727 */ .ui-slider.ui-state-disabled .ui-slider-handle, .ui-slider.ui-state-disabled .ui-slider-range { filter: inherit; } .ui-slider-horizontal { height: .8em; } .ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; } .ui-slider-horizontal .ui-slider-range {top: 0;height: 100%;} .ui-slider-horizontal .ui-slider-range-min {left: 0;} .ui-slider-horizontal .ui-slider-range-max {right: 0;} .ui-slider-vertical {width: .8em;height: 100px;} .ui-slider-vertical .ui-slider-handle { left: -.3em;margin-left: 0;margin-bottom: -.6em;} .ui-slider-vertical .ui-slider-range {left: 0;width: 100%;} .ui-slider-vertical .ui-slider-range-min { bottom: 0;} .ui-slider-vertical .ui-slider-range-max { top: 0; } /* WETTER EFFEKTE */ /* main element */ .weather { position: relative; } /* pseudo elements: positioning and setup */ .weather:before, .weather:after { content: ""; position: absolute; left: -50%; top: -50%; right: -50%; bottom: -50%; z-index: 6; pointer-events: none; background: transparent repeat; background-size: 256px 1024px; -ms-interpolation-mode: nearest-neighbor; image-rendering: -webkit-optimize-contrast; image-rendering: -webkit-crisp-edges; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: pixelated; opacity: 0.7; -webkit-animation-name: weather; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-name: weather; animation-timing-function: linear; animation-iteration-count: infinite; } .weather:after { opacity: 0.8; -webkit-animation-name: weather2; animation-name: weather2; } .wind_neigung_2:before, .wind_neigung_2:after { -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg); transform: rotate(10deg); } .wind_neigung_3:before, .wind_neigung_3:after { -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -ms-transform: rotate(20deg); -o-transform: rotate(20deg); transform: rotate(20deg); } .wind_neigung_4:before, .wind_neigung_4:after { -webkit-transform: rotate(40deg); -moz-transform: rotate(40deg); -ms-transform: rotate(40deg); -o-transform: rotate(40deg); transform: rotate(40deg); } .wind_neigung_5:before, .wind_neigung_5:after { -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg); } /* REGEN LEICHT + EFFEKT */ .weather.regen_1_1:before, .weather.regen_1_1:after { opacity: 0.5; background: url(../../img/planeten/wetter/regen_1.png); -webkit-animation-duration: 2s; animation-duration: 2s; } .weather.regen_1_1:after { opacity: 0.4; -webkit-animation-duration: 4s; animation-duration: 4s; } .weather.regen_1_2:before, .weather.regen_1_2:after { opacity: 0.5; background: url(../../img/planeten/wetter/regen_2.png); -webkit-animation-duration: 2s; animation-duration: 2s; } .weather.regen_1_2:after { opacity: 0.4; -webkit-animation-duration: 4s; animation-duration: 4s; } .weather.regen_1_3:before, .weather.regen_1_3:after { opacity: 0.5; background: url(../../img/planeten/wetter/regen_3.png); -webkit-animation-duration: 2s; animation-duration: 2s; } .weather.regen_1_3:after { opacity: 0.4; -webkit-animation-duration: 4s; animation-duration: 4s; } /* REGEN STARK + EFFEKT */ .weather.regen_2_1:before, .weather.regen_2_1:after { opacity: 0.8; background: url(../../img/planeten/wetter/regen_1.png); -webkit-animation-duration: 1s; animation-duration: 1s; } .weather.regen_2_1:after { opacity: 0.6; -webkit-animation-duration: 2s; animation-duration: 2s; } .weather.regen_2_2:before, .weather.regen_2_2:after { opacity: 0.8; background: url(../../img/planeten/wetter/regen_2.png); -webkit-animation-duration: 1s; animation-duration: 1s; } .weather.regen_2_2:after { opacity: 0.6; -webkit-animation-duration: 2s; animation-duration: 2s; } .weather.regen_2_3:before, .weather.regen_2_3:after { opacity: 0.8; background: url(../../img/planeten/wetter/regen_3.png); -webkit-animation-duration: 1s; animation-duration: 1s; } .weather.regen_2_3:after { opacity: 0.6; -webkit-animation-duration: 2s; animation-duration: 2s; } /* SCHNEE leicht + EFFEKT */ .weather.schnee_1_1:before, .weather.schnee_1_1:after { opacity: 0.5; background: url(../../img/planeten/wetter/schnee_1.png); -webkit-animation-duration: 6s; animation-duration: 6s; } .weather.schnee_1_1:after { opacity: 0.4; -webkit-animation-duration: 8s; animation-duration: 8s; } .weather.schnee_1_2:before, .weather.schnee_1_2:after { opacity: 0.5; background: url(../../img/planeten/wetter/schnee_2.png); -webkit-animation-duration: 6s; animation-duration: 6s; } .weather.schnee_1_2:after { opacity: 0.4; -webkit-animation-duration: 8s; animation-duration: 8s; } .weather.schnee_1_3:before, .weather.schnee_1_3:after { opacity: 0.5; background: url(../../img/planeten/wetter/schnee_3.png); -webkit-animation-duration: 6s; animation-duration: 6s; } .weather.schnee_1_3:after { opacity: 0.4; -webkit-animation-duration: 8s; animation-duration: 8s; } /* SCHNEE stark + EFFEKT */ .weather.schnee_2_1:before, .weather.schnee_2_1:after { opacity: 0.8; background: url(../../img/planeten/wetter/schnee_1.png); -webkit-animation-duration: 3s; animation-duration: 3s; } .weather.schnee_2_1:after { opacity: 0.6; -webkit-animation-duration: 4s; animation-duration: 4s; } .weather.schnee_2_2:before, .weather.schnee_2_2:after { opacity: 0.8; background: url(../../img/planeten/wetter/schnee_2.png); -webkit-animation-duration: 3s; animation-duration: 3s; } .weather.schnee_2_2:after { opacity: 0.6; -webkit-animation-duration: 4s; animation-duration: 4s; } .weather.schnee_2_3:before, .weather.schnee_2_3:after { opacity: 0.8; background: url(../../img/planeten/wetter/schnee_3.png); -webkit-animation-duration: 3s; animation-duration: 3s; } .weather.schnee_2_3:after { opacity: 0.6; -webkit-animation-duration: 4s; animation-duration: 4s; } /* animation keyframes */ @-webkit-keyframes weather { from { background-position: 0 0px; } to { background-position: 0 1024px; } } @keyframes weather { from { background-position: 0 0px; } to { background-position: 0 1024px; } } @-webkit-keyframes weather2 { from { background-position: 64px 64px; } to { background-position: 64px 1088px; } } @keyframes weather2 { from { background-position: 64px 64px; } to { background-position: 64px 1088px; } } .gewitter { animation-name: gewitter; animation-duration: 15s; animation-delay: 5s; animation-iteration-count: infinite; } @keyframes gewitter { 0.5% {filter: brightness(1);} 1% {filter: brightness(1.3);} 1.5% {filter: brightness(1.1);} 2% {filter: brightness(1.5);} 2.5% {filter: brightness(1);} 100% {filter: brightness(1);} } /* Beispiel für ein Popover, das OBEN am Element erscheint (Pfeil zeigt nach unten) */ .popover { background: none; } .popover-body { padding: 0.5em !important; background: #132A40; border-radius: 4px; text-align: center; color: #999999; } .bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after, .bs-popover-top>.popover-arrow::after { border-top-color: #132A40; } .bs-popover-auto[data-popper-placement^=left]>.popover-arrow::after, .bs-popover-start>.popover-arrow::after { border-left-color: #132A40; } /* MOBILE - NEU - MäRZ 2025 */ /* BS STYLES */ .text-normal { color: #999999 !important; } .text-primary { color: #4DA6FF !important; } .text-secondary { color: #555555 !important; } .text-danger { color: #dc3545 !important; } .bg-primary0 { background: #0D1D2D !important; } .bg-primary { background: #4DA6FF !important; } .bg-primary { background: #1a5188 !important; } .bg-dark0 { background: #090909 !important; } .bg-dark { background: #111111 !important; } .bg-dark2{ background: #222222 !important; } .bg-danger0 { background: #361B1B !important; } .bg-danger { background: #8d3535 !important; } .bg-danger2 { background: #ff5b5b !important; } .bg-red0 { background: #420002 !important; } .bg-red { background: #CC0000 !important; } .bg-red2 { background: #FF6D72 !important; } /* BUTTONS */ .btn-primary { background-color: #143452; color: #6cb5ff; border-color: #6cb5ff; } .btn-primary:hover { background-color: #4DA6FF; color: #FFF; border-color: #75baff; } .btn-primary:disabled { background-color: #0a1d2e; color: #2b5681; border-color: #0a1d2e; } .btn-danger { background-color: #dc3545; } .btn-danger { background-color: #7e2a2a; color: #ffd4d9; border-color: #dc3545; } .btn-danger:hover { background-color: #dc3545; color: #FFF; border-color: #dc3545; } .btn-danger:disabled { background-color: #420002; color: #8d3535; border-color: #420002; } .btn-dark { color: #4DA6FF !important; background: #111111 !important; } .btn-link { color: #4DA6FF !important; } .border-primary0 { border-color: #0D1D2D !important; } .border-primary { border-color: #4DA6FF !important; } .border-primary2 { border-color: #0D1D2D !important; } .border-dark0 { border-color: #090909 !important; } .fs-7 { font-size: 0.8em; } .fs-8 { font-size: 0.7em; } .fs-9 { font-size: 0.6em; } .fs-10 { font-size: 0.5em; } /* MOBILE */ .box_rohstoffe_mobile .prozentbalken, .navbar .prozentbalken { float: none; height: 5px; border: none; margin-bottom: 2px; } .anzahl_berichte, .anzahl_nachrichten { background: #111 !important; color: #666; } .anzahl_berichte.ungelesen, .anzahl_nachrichten.ungelesen { background: #4DA6FF !important; color: #FFFFFF; } .navbar .badge { position: absolute; font-size: 8px; color: #FFF !important; text-align: center; display: none; font-weight: normal !important; } .navbar .badge.ungelesen { display: block; } .navbar .badge_1 { right: 32px; top: 3px; background-color: #2c6196 !important; } /* NACHRICHTEN */ .navbar .badge_2 { right: 3px; top: 3px; background-color:#865100 !important; } /* BERICHTE */ .navbar .badge_3 { right: 32px; top: 37px; background-color: #2c6196; } /* CHAT */ .navbar .badge_4 { right: 3px; top: 37px; background-color:#865100; } /* NETZWERK CHAT */ /* OFFCANVAS */ .offcanvas { max-width: 75%; background-color: #191919; height: 100%; display: flex !important; flex-direction: column !important; } .offcanvas-header { background: #111; color: #999; padding: 0.6em; } .offcanvas .navbar-nav li a { color: #999; font-size: 1.1em; } .offcanvas .navbar-nav li a i { color: #4DA6FF; margin-right: 0.6em; } .offcanvas .navbar-nav li.active, .offcanvas .navbar-nav li.active a { background: #0D1D2D; color: #4DA6FF !important; } .offcanvas .navbar-nav .nav-item a { padding: 0.4em 0;} .offcanvas .navbar-nav .nav-item .anzahl_nachrichten.ungelesen, .offcanvas .navbar-nav .nav-item .anzahl_berichte.ungelesen, .offcanvas .navbar-nav .nav-item .btn_chat_anzahl.active, .offcanvas .navbar-nav .nav-item .btn_chat_anzahl_nw.active { background: #4DA6FF !important; color: #111 !important; } .offcanvas .navbar-nav .nav-item .anzahl_nachrichten, .offcanvas .navbar-nav .nav-item .anzahl_berichte { background: #111 !important; color: #666; } .offcanvas-bottom { height: auto !important;} /* ACCORDION */ .accordion .accordion-item { background: none !important; border: none; } .accordion .accordion-body { padding: 0.5em; color: #999; } .accordion .accordion-button.collapsed { padding: 0.4em; box-shadow: none; border-color: #333; background: none !important; } .accordion .accordion-button { padding: 0.4em; box-shadow: none; border-color: #333; background: #0A1520 !important; border-radius: 5px !important; } /* LIST GROUP */ .list-group .list-group-item { background: none; border: none; color: #999; border-color: #333; } .list-group .list-group-item b { color: #4DA6FF; } .progress { background: #111111; } .progress-bar { background: #4DA6FF; border-right: 1px solid #FFF; color: #EFEFEF; } /* MD */ @media (max-width: 1000px) { body { font-size: 1em !important; overflow-x: hidden !important; } h1 { font-size: 1.4em !important; } h2 { font-size: 1.4em !important; } h3 { font-size: 1.4em !important; } h4 { font-size: 1.4em !important; } #box_main { overflow-x: scroll; padding: 0; border-radius: 0; border: none; margin: 2px 0 0 0; } #box_content { padding: 0; border-radius: 0 !important; width: auto; border: none; margin: 0; } #box_kolonie, #box_isomap, #box_isomap { border-radius: 0; } #box_corp { border-radius: 0; padding: 1em; width: auto; margin: 0; height: auto; } #quests .questimage { width: 60%; } #header_mobile { height: 140px; padding: 0; flex-shrink: 0;} #box_isomap, #box_starmap { border-radius: 0; width: 100%;height: 100%;margin: 0;} /* POPUP */ .popup { width: 100% !important; margin: auto !important; border-radius: 0 !important; border: none; left: auto; margin-top: 0; } .popup .header { border-radius: 0; font-size: 1.2em; } .popup:hover::before { background: #090909; border-radius: 0 !important; } .popup .header { padding: 1px 12px 5px 12px; } .popup .header div { margin-top: 2px; } .content .tabs ul li a { text-align: center; font-size: 2em; } .content .tabs ul li a span { display: none; } .content .tabs ul li a i { font-size: 0.75em; } .content .tabs .ui-tabs-anchor { padding: 0.4em 0.6em; } /* ISOMAP */ #box_isomap { width: 100%; height: calc(100vh - 140px); margin: 0; } #box_starmap { width: 100%; height: calc(100vh - 140px); margin: 0; } .isomap_btn { width: auto; margin: 0; left: 87%; top: 220px; z-index: 7; text-align: left; padding-right: 10px; } .isomap_btn button { margin-bottom: 12px; margin-right: 20px; } .isomap_btn button:nth-child(3) { margin-right: 6px;} /* Infoboxes */ .wrap_infobtn_l { position: absolute; margin: 0; padding: 5px; } .wrap_infobtn_r { width: 50%; margin: 0 0 0 50%; padding: 5px; } .wrap_infobtn_r .infobtn { float: right; margin: 0 0 0 5px; } .infobtn { float: left; margin: 0 5px 0 0; font-size: 1.2em; width: auto; padding: 8px 12px 3px 12px; border-width: 3px !important; } .infobtn span { font-size: 14px; } }