MediaWiki:KevinWordBubbleGenII.css

@import url('https://fonts.googleapis.com/css?family=Roboto:300,700'); @import url('https://fonts.googleapis.com/css?family=Raleway:300,600');

.andromeda-ui { position: relative; width: 100%; border-radius: 3px; cursor: default; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; overflow: hidden; }

.andromeda-ui *::-webkit-scrollbar { width: 10px; }

.andromeda-ui *::-webkit-scrollbar-track { background-color: rgba(255, 255, 255, 0.25); border-radius: 10px; }

.andromeda-ui *::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.25); border-radius: 100px; }

.andromeda-ui *::-webkit-scrollbar-corner { background: transparent; }

.andromeda-ui ::selection { background-color: rgba(0, 0, 0, 0.35); text-shadow: none; }

.andromeda-ui ::-moz-selection { background-color: rgba(0, 0, 0, 0.35); text-shadow: none; }

.andromeda-ui .andromeda-ui-left-sector { width: 13%; height: 300px; overflow: hidden; }

.andromeda-ui .andromeda-ui-right-sector { position: absolute; top: 0; left: 13%; width: 87%; height: 300px; overflow: hidden; }

.andromeda-ui .andromeda-ui-left-sector .sector-container { z-index: 2; width: 769.23%; height: 300px; background-image: linear-gradient(rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%), url('https://i.imgur.com/jWh2WXw.jpg'); background-size: cover; border-radius: 2px; }

.andromeda-ui .andromeda-ui-right-sector .sector-container { position: relative; left: -15%; z-index: 2; width: 115%; height: 300px; background-image: linear-gradient(rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%), url('https://i.imgur.com/jWh2WXw.jpg'); background-size: cover; border-radius: 2px; }

.andromeda-ui .sector-border { margin: auto; position: relative; top: 25px; width: 90%; height: 250px; border: 2px solid rgba(255, 255, 255, 0.25); }

.andromeda-ui .top-left-corner { margin: auto; position: absolute; top: 6%; left: calc(4% - 2px); width: 35px; height: 35px; border-top: 2px solid rgba(255, 255, 255, 0.25); border-left: 2px solid rgba(255, 255, 255, 0.25); }

.andromeda-ui .bottom-right-corner { position: absolute; bottom: calc(4% - 19px); right: calc(-1% - 3px); width: 35px; height: 35px; border-bottom: 2px solid rgba(255, 255, 255, 0.25); border-right: 2px solid rgba(255, 255, 255, 0.25); }

.andromeda-ui .menu-interface-toggle { display: flex; position: absolute; z-index: 3; top: 10px; left: 10px; width: 20px; height: 20px; justify-content: space-around; align-content: space-between; flex-direction: column; }

.andromeda-ui .toggle-stripe { width: inherit; height: 3px; background-color: rgba(255, 255, 255, 0.25); }

.andromeda-ui .info-interface { display: none; position: relative; left: 28%; width: 72%; height: 250px; color: rgba(255, 255, 255, 0.25); font-family: century gothic; padding: 20px 0; box-sizing: border-box; }

.andromeda-ui .roleplay-interface { position: relative; left: 28%; width: 72%; color: rgba(255, 255, 255, 0.25); font-family: century gothic; padding: 20px 20px 20px 0; box-sizing: border-box; }

.andromeda-ui .infinity { float: left; margin-bottom: -5px; position: relative; top: -15px; width: auto; min-width: 178.23px; height: 100px; font-size: 100px; line-height: 90px; border-bottom: 3px solid rgba(255, 255, 255, 0.25); overflow: hidden; }

.andromeda-ui .infinity:after { content: '∞'; font-size: 250px; }

.andromeda-ui .infinity:not(.infinity-hidden):after { opacity: 1; transition-duration: 0.35s; }

.andromeda-ui .infinity-hidden:after { opacity: 0; transition-duration: 0.35s; }

.andromeda-ui .infinity-hidden > a { display: none; position: relative; z-index: 1; display: block; height: inherit; color: rgba(255, 255, 255, 0.25) !important; font-size: 100px; font-style: italic; line-height: 95px; text-decoration: none !important; }

.andromeda-ui .infinity span:first-of-type { font-size: 100px; }

.andromeda-ui .infinity span:nth-of-type(2) { font-size: 75px; }

.andromeda-ui .infinity span:nth-of-type(3) { font-size: 50px; }

.andromeda-ui .infinity span:nth-of-type(4) { font-size: 37.5px; }

.andromeda-ui .infinity span:nth-of-type(5) { font-size: 25px; }

.andromeda-ui .infinity span:nth-of-type(6) { font-size: 18.75px; }

.andromeda-ui .infinity span:nth-of-type(7) { font-size: 12.5px; }

.andromeda-ui .infinity span:nth-of-type(8) { font-size: 9.375px; }

.andromeda-ui .roleplay-text { margin-bottom: 10px; width: 100%; height: 100px; color: rgba(255, 255, 255, 0.5); font-size: 95%; text-shadow: 1px 1px 5px #000000; padding-right: 5px; box-sizing: border-box; overflow: auto; user-select: text; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; }

.andromeda-ui .roleplay-text::selection { background-color: rgba(0, 0, 0, 0.25); }

.andromeda-ui .roleplay-text::-moz-selection { background-color: rgba(0, 0, 0, 0.25); }

.andromeda-ui .roleplay-text-bottom-border { width: 75px; border-top: 3px solid rgba(255, 255, 255, 0.25); }

.andromeda-ui .image-interface { display: none; position: relative; left: 28%; width: 72%; height: 250px; color: rgba(255, 255, 255, 0.25); font-family: century gothic; padding: 20px 20px 20px 0; box-sizing: border-box; }

.andromeda-ui .image-interface-container { position: absolute; z-index: 1; top: calc(50% - 100px); right: 10px; width: 100%; height: 200px; }

.andromeda-ui .image-module { position: absolute; right: 5%; width: 90%; height: 200px; border-radius: 20px 4px; box-shadow: 10px 10px 25px 1px rgba(0, 0, 0, 0.5); overflow: hidden; }

.andromeda-ui .image-module-background { position: absolute; width: 100%; height: inherit; background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), url('http://f.fwallpapers.com/images/beautiful-space.jpg'); background-size: cover; transition: 3.5s ease-in-out; }

.andromeda-ui .image-module:hover > .image-module-background { height: 140%; background-position-x: 40%; }

.andromeda-ui .image-slideshow { position: absolute; left: calc(8% + 25px); width: 38%; }

.andromeda-ui .image-fade-out { opacity: 0; transition-duration: 0.5s; }

.andromeda-ui .image-slideshow img { display: block; margin: 0 auto; width: auto; height: 200px; transition: 1s ease-in-out; }

.andromeda-ui .image-zoom-first > img { width: auto; height: 275px; transition: 1s ease-in-out; }

.andromeda-ui .image-zoom-second > img { width: auto; height: 350px; transition: 1s ease-in-out; }

.andromeda-ui .image-module-side { position: absolute; left: 60%; width: 100%; height: inherit; background-color: rgba(0, 0, 0, 0.5); transform: skewX(-20deg); overflow: hidden; }

.andromeda-ui .slideshow-progress-bar { width: 5px; height: inherit; background-color: rgba(255, 255, 255, 0.15); }

.andromeda-ui .slideshow-progress { width: inherit; background-color: rgba(255, 255, 255, 0.4); }

.andromeda-ui .slideshow-progress-animation { animation: slideshow-progress 7.5s infinite linear; }

@keyframes slideshow-progress { 0% {       height: 0; }   100% {        height: 200px; } }

.andromeda-ui .previous-image { position: absolute; top: calc(50% - 10px); left: 4%; width: 20px; height: 20px; border: 2px solid rgba(255, 255, 255, 0.25); transform: rotate(45deg); box-sizing: border-box; }

.andromeda-ui .next-image { position: absolute; top: calc(50% - 10px); right: 4%; width: 20px; height: 20px; border: 2px solid rgba(255, 255, 255, 0.25); transform: rotate(45deg); box-sizing: border-box; }

.andromeda-ui .powers-interface { display: none; position: relative; left: 28%; width: 72%; color: rgba(255, 255, 255, 0.25); font-family: century gothic; padding: 20px 20px 20px 0; box-sizing: border-box; }

.andromeda-ui .menu-interface { position: absolute; z-index: 4; top: 0; left: -100%; width: 100%; height: 300px; background-color: rgba(0, 0, 0, 0.5); background-size: 700px; cursor: default; user-select: none; overflow: hidden; }

.andromeda-ui .menu-interface-sector { display: flex; width: 100%; height: inherit; }

.andromeda-ui .sector-one { position: relative; display: inline-block; width: 25%; height: inherit; background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), url('http://i.imgur.com/bzDiGhX.jpg'); background-size: auto 100%; background-position: center; }

.andromeda-ui .sector-two { position: relative; display: inline-block; width: 25%; height: inherit; background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), url('https://i.imgur.com/jWh2WXw.jpg'); background-size: auto 100%; background-position: center; }

.andromeda-ui .sector-three { position: relative; display: inline-block; width: 25%; height: inherit; background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), url('http://f.fwallpapers.com/images/beautiful-space.jpg'); background-size: auto 100%; background-position: center; }

.andromeda-ui .sector-four { position: relative; display: inline-block; width: 25%; height: inherit; background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), url('http://i.imgur.com/L2Gm2Yf.jpg'); background-size: auto 100%; background-position: center; }

.andromeda-ui .interface-toggle { position: absolute; top: calc(50% - 15px); left: 25%; width: 50%; height: 35px; border: 2px solid rgba(255, 255, 255, 0.25); background-color: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.5); font-family: century gothic; font-size: 90%; line-height: 31px; text-align: center; border-radius: 2px; box-sizing: border-box; }

.andromeda-ui .menu-interface-close { position: absolute; z-index: 3; top: 10px; right: 10px; width: 17px; height: 17px; border: 2px solid rgba(255, 255, 255, 0.25); background-color: transparent; color: transparent; font-family: century gothic; font-size: 0%; line-height: 17px; text-align: center; border-radius: 17px; box-sizing: border-box; transition-duration: 0.75s; }

.andromeda-ui .menu-interface-close:after { content: 'Close'; }

.andromeda-ui .menu-interface-close:hover { width: 50%; height: 35px; border: 2px solid rgba(255, 255, 255, 0.25); background-color: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.5); font-size: 100%; line-height: 31px; border-radius: 2px; transition-duration: 0.75s; }

.andromeda-ui .user-info-interface-toggle { position: absolute; z-index: 3; bottom: 10px; left: 10px; width: 17px; height: 17px; border: 2px solid rgba(255, 255, 255, 0.25); background-color: transparent; color: transparent; font-family: century gothic; font-size: 0%; line-height: 17px; text-align: center; border-radius: 17px; box-sizing: border-box; transition-duration: 0.75s; }

.andromeda-ui .user-info-interface-toggle:after { content: 'About'; }

.andromeda-ui .user-info-interface-toggle:hover { width: 50%; height: 35px; border: 2px solid rgba(255, 255, 255, 0.25); background-color: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.5); font-size: 100%; line-height: 31px; border-radius: 2px; transition-duration: 0.75s; }

.andromeda-ui .character-info:after { content: "Info"; }

.andromeda-ui .roleplay:after { content: "Roleplay"; }

.andromeda-ui .images:after { content: "Images"; }

.andromeda-ui .powers:after { content: "Powers"; }

.SpeechBubble .speech-bubble-message div { max-width: none !important; }

.andromeda-ui .info-interface-container { width: 100%; height: 200px; }

.andromeda-ui .capsule { position: absolute; z-index: 3; top: calc(50% - 100px); left: calc(50% - 100px); width: 200px; height: 200px; background-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.85) 100%), url('http://i.imgur.com/bzDiGhX.jpg'); background-size: auto 100%; border-radius: 100px; overflow: hidden; }

.andromeda-ui .capsule:not(.active-capsule) { display: none; opacity: 0; }

.andromeda-ui .capsule-text { position: absolute; top: 5%; width: 100%; height: 75px; color: rgba(255, 255, 255, 0.75); font-family: Roboto; font-weight: 300; font-size: 125%; line-height: 75px; text-align: center; text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.85); overflow: auto; }

.andromeda-ui .capsule-header { position: absolute; bottom: 0; width: 100%; height: 75px; background-color: rgba(255, 255, 255, 0.125); color: rgba(255, 255, 255, 0.75); font-weight: bold; font-size: 175%; line-height: 75px; text-align: center; text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.85); border-top-left-radius: 50% 35px; border-top-right-radius: 50% 35px; }

.andromeda-ui .capsule-left-arch-container { position: absolute; top: calc(50% - 120px); left: calc(47% - 100px); width: 65px; height: 240px; overflow: hidden; }

.andromeda-ui .capsule-left-arch { width: 240px; height: inherit; border-radius: 225px; border: 5px solid rgba(255, 255, 255, 0.25); box-sizing: border-box; }

.andromeda-ui .capsule-right-arch-container { position: absolute; top: calc(50% - 120px); right: calc(47% - 100px); width: 65px; height: 240px; overflow: hidden; transform: scaleX(-1); }

.andromeda-ui .capsule-right-arch { width: 240px; height: inherit; border: 5px solid rgba(255, 255, 255, 0.25); border-radius: 225px; }

.andromeda-ui .capsule-left-connector { position: absolute; top: calc(50% - 1.5px); left: calc(3% + 40px); width: 19%; height: 3px; background-color: rgba(255, 255, 255, 0.25); box-sizing: border-box; }

.andromeda-ui .capsule-right-connector { position: absolute; top: calc(50% - 1.5px); right: calc(3% + 40px); width: 19%; height: 3px; background-color: rgba(255, 255, 255, 0.25); }

.andromeda-ui .previous-capsule { position: absolute; z-index: 2; top: calc(50% - 20px); left: 3%; width: 40px; height: 40px; border: 3px solid rgba(255, 255, 255, 0.25); color: rgba(255, 255, 255, 0.25); border-radius: 40px; box-sizing: border-box; line-height: 35px; text-align: center; }

.andromeda-ui .previous-capsule:after { content: '◄'; position: relative; left: -1px; }

.andromeda-ui .next-capsule { position: absolute; z-index: 2; top: calc(50% - 20px); right: 3%; width: 40px; height: 40px; border: 3px solid rgba(255, 255, 255, 0.25); color: rgba(255, 255, 255, 0.25); border-radius: 40px; box-sizing: border-box; line-height: 35px; text-align: center; }

.andromeda-ui .next-capsule:after { content: '►'; position: relative; left: 2px; }

.andromeda-ui .capsule-indicator-container { display: flex; justify-content: space-around; align-content: space-between; flex-direction: row; position: absolute; left: calc(50% - 35px); width: 70px; height: 9px; }

.andromeda-ui .top { top: 4.5%; }

.andromeda-ui .bottom { bottom: 4.5%; }

.andromeda-ui .capsule-indicator { width: 9px; height: 9px; background-color: rgba(255, 255, 255, 0.25); border-radius: 15px; }

.andromeda-ui .active-capsule-indicator { position: relative; top: -1.5px; width: 12px; height: 12px; background-color: rgba(255, 255, 255, 0.4); }

.andromeda-ui .powers-interface-container { width: inherit; height: 200px; color: rgba(255, 255, 255, 0.65); text-shadow: 0 0 7px rgba(0, 0, 0, 0.85); text-align: center; }

.andromeda-ui .user-info-interface { position: absolute; top: 0; left: 100%; z-index: 3; width: 40%; height: 300px; background-image: linear-gradient(rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%), url('http://wallpapercave.com/wp/ZBPHEvc.jpg'); background-size: auto 100%; overflow: hidden; border-radius: 0 3px 3px 0; }

.andromeda-ui .user-avatar { position: absolute; top: calc(50% - 75px); left: calc(50% - 37px); width: 75px; height: 75px; background-color: rgba(255, 255, 255, 0.5); background-image: url('https://s-media-cache-ak0.pinimg.com/originals/6d/50/d7/6d50d72201617861f0ad31b37f66b164.jpg'); background-size: auto 100%; box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.85); border-radius: 75px; }

.andromeda-ui .username { position: absolute; bottom: 27%; width: 100%; color: #ffffff; font-family: century gothic; text-align: center; }

.andromeda-ui .username a { color: #ffffff !important; font-style: initial !important; font-weight: initial !important; }

.andromeda-ui .username span:first-of-type { font-size: 120%; }

.andromeda-ui .username span:last-of-type { font-size: 75%; }

.andromeda-ui .user-card-container { position: absolute; top: 91%; width: 100%; height: 300px; }

.andromeda-ui .user-card { position: relative; margin: 7px auto; width: 97%; height: 91px; background-color: #ffffff; font-family: Raleway; font-size: 90%; color: rgba(0, 0, 0, 0.75); padding: 10px; border-radius: 6px; box-sizing: border-box; }

.andromeda-ui .card-icon { position: absolute; top: calc(50% - 25px); width: 50px; height: 50px; background-color: rgba(0, 0, 0, 0.5); background-size: auto 300px; color: #ffffff; font-size: 175%; font-weight: 600; line-height: 50px; text-align: center; border-radius: 100%; }

.andromeda-ui .card-header { position: absolute; top: 20px; left: 80px; font-weight: 600; }

.andromeda-ui .card-text { position: absolute; bottom: 20px; left: 80px; width: calc(100% - 90px); font-weight: 300; line-height: 100%; }

.andromeda-ui .user-card:first-of-type > .card-icon:after { content: 'E'; }

.andromeda-ui .user-card:first-of-type > .card-header:after { content: 'Edit Count'; }

.andromeda-ui .user-card:nth-of-type(2) > .card-icon:after { content: 'M'; }

.andromeda-ui .user-card:nth-of-type(2) > .card-header:after { content: 'Member Since'; }

.andromeda-ui .user-card:last-of-type > .card-icon:after { content: 'U'; }

.andromeda-ui .user-card:last-of-type > .card-header:after { content: 'User Rights'; }

.andromeda-ui .card-toggle-container { position: absolute; top: calc(87% - 10px); left: calc(50% - 40px); width: 80px; height: 30px; }

.andromeda-ui .card-toggle { position: absolute; top: calc(50% - 2.5px); left: calc(50% - 20px); width: 40px; height: 5px; background-color: rgba(255, 255, 255, 0.5); border-radius: 40px; }

.andromeda-ui .powers-node-container { display: flex; flex-direction: row; justify-content: center; align-items: center; position: absolute; bottom: 2%; right: 0; width: 400px; height: 30px; font-size: 0; }

.andromeda-ui .powers-node-container div { display: inline-block; }

.andromeda-ui .pipe { position: relative; height: 2px; background-color: rgba(255, 255, 255, 0.25); }

.andromeda-ui .pipe:not(:last-of-type) { width: 10%; }

.andromeda-ui .pipe:last-of-type { width: 33%; }

.andromeda-ui .node { position: relative; border: 3px solid rgba(255, 255, 255, 0.25); border-radius: 100%; box-sizing: border-box; }

.andromeda-ui .large { width: 7%; }

.andromeda-ui .small { width: 5%; }

.andromeda-ui .end-node { position: relative; width: 1%; border: 3px solid rgba(255, 255, 255, 0.25); border-radius: 10px; }

.andromeda-ui .power-set { position: absolute; right: 2%; width: 90%; height: 175px; padding-right: 5px; overflow: auto; box-sizing: border-box; }

.andromeda-ui .power-set > div { font-size: 90%; line-height: 20px; }

.andromeda-ui .power-set ul { list-style: disc; }