a,
.pseudoLink {
color: #49ccff;
text-decoration: none;
border: none;
}
a:hover,
.pseudoLink:hover {
color: #ea5800;
text-decoration: none;
}
table {
font-size: 12px;
color: #333333;
border-collapse: collapse;
width: 100%;
}
table td,
table tr {
border: none;
}
textarea {
font-size: 12px;
}
body {
text-align: center;
margin: 0;
padding: 0;
line-height: 1;
font-size: 12px;
color: #333333;
background: #e5e5e5;
padding-bottom: 50px;
}
.noselect {
-moz-user-select: none;
}
select {
font-family: "Roboto", "Arial Nova", sans-serif-light, "Open Sans", Arial, sans-serif;
font-size: 12px;
}
input {
font-family: "Roboto", "Arial Nova", sans-serif-light, "Open Sans", Arial, sans-serif;
font-size: 12px;
color: #333333;
}
h1,
h2,
h3,
h4,
h5 {
margin: 0;
padding: 0;
font-weight: normal;
font-size: 12px;
}
dl,
dt,
dd,
p {
margin: 0;
padding: 0;
}
em {
font-style: normal;
}
:hover,
:focus,
:active {
outline: 0;
}
img {
border: 0;
margin: 0;
padding: 0;
max-width: 100%;
height: auto;
box-sizing: border-box;
vertical-align: middle;
}
form {
margin: 0;
}
div {
padding: 0;
margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
.ovH {
overflow: hidden;
}
.fl {
float: left;
}
.fr {
float: right;
}
.cp {
cursor: pointer;
}
.ch {
cursor: help;
}
.cm {
cursor: move;
}
.dn {
display: none;
}
.db,
.db a {
display: block;
}
.di {
display: inline;
}
button {
margin: 0;
padding: 0;
}
body,
table,
textarea,
button {
font-family: "Roboto", "Arial Nova", sans-serif-light, "Open Sans", Arial, sans-serif;
}
.defaultList {
margin: 0;
padding: 0;
}
.defaultList dl,
.defaultList dt,
.defaultList dd {
margin: 0;
padding: 0;
}
.defaultList li {
list-style: none;
width: 90%;
margin: 0;
padding: 10px 10px;
border-bottom: 1px solid #d5d5d5;
font-size: 110%;
font-weight: 500;
}
.defaultList li a {
display: block;
}
.defaultTextBox {
line-height: 140%;
padding: 10px 0;
}
a.buttonDefault,
.buttonDefault {
color: #ffffff !important;
font-weight: 700;
background: #ffa225;
border: 1px solid #fa9e23;
border-radius: 25px;
padding: 10px 15px;
}
a:hover.buttonDefault {
background: #fa9e23;
}
.stampOnline {
background: #D0F099;
color: #000000;
border-radius: 3px;
padding: 1px;
}
.stampOffline {
color: #333333;
border-radius: 3px;
padding: 1px;
}
.stampAway {
background: #f3f3f3;
color: #999999;
}
.stampBlocked {
background: #dfdfdf;
color: #b2b2b2;
font-style: italic;
}
.stream .preStamp,
.mailConversation .preStamp,
.headerConversation .preStamp {
display: none;
}
.tsShortTimeAgo {
background: #dafffc;
border-radius: 4px;
color: #212121 !important;
}
.tsRecently {
background: #FFFDC0;
border-radius: 4px;
color: #565656 !important;
}
.tsBygone {
color: #939393;
}
h2 {
font-size: 120%;
font-weight: 700;
padding: 20px 10px;
}
h3 {
font-size: 150%;
font-weight: 400;
padding: 10px;
}
h4 {
font-size: 100%;
color: #999999;
text-align: center;
padding: 10px 10px;
font-weight: 300;
}
h5 {
font-size: 110%;
color: #a4a4a4;
font-weight: 400;
padding: 10px;
}
.defaultButton.inactive {
cursor: default;
}
* html input.defaultButton {
overflow: visible;
padding: 2px 5px 2px 5px;
}
.defaultButton {
color: #585858;
cursor: pointer;
font-size: 100%;
border-radius: 3px;
padding: 7px 13px;
margin: 0;
margin-right: 3px;
background: #ffffff;
border: 1px solid #cfcfcf;
}
.defaultButton img {
vertical-align: text-bottom;
}
a.defaultButton,
.defaultButton {
line-height: 17px;
text-decoration: none;
overflow: hidden;
padding: 5px 10px;
cursor: pointer;
}
input.defaultButton {
line-height: 17px;
margin: 0;
padding: 0;
font-size: 12px;
padding: 4px 6px 4px 6px !important;
text-align: center;
}
input:hover.defaultButton {
border: 1px solid #9dcbff;
color: #316a9b;
}
a:hover.defaultButton {
border: 1px solid #9dcbff;
color: #316a9b;
text-decoration: none;
}
/* Actionbar */
.actionSelector {
width: 100%;
padding: 10px 0;
font-size: 110%;
}
.actionSelector .button,
.actionSelector button,
.actionSelector input,
.buttonActionSelector {
float: left;
text-align: center;
display: block;
background: #ffffff;
border: 1px solid #e5e5e5;
color: #585858;
cursor: pointer;
font-size: 90%;
padding: 10px 15px;
margin: 0 3px 3px 0;
border-radius: 3px;
}
.actionSelector input {
padding: 10px 15px 8px 15px !important;
}
.actionSelector img,
.buttonActionSelector img {
vertical-align: text-bottom;
}
.actionSelector .button.blue,
.buttonActionSelector.blue {
color: #ffffff;
background: #3ca2fe;
border: 1px solid #3ca2fe;
cursor: pointer;
}
.actionSelector .button:hover,
.actionSelector button:hover,
.actionSelector input:hover,
.actionSelector a:hover,
.buttonActionSelector {
background: #ffedb0;
color: #333333;
}
.actionSelector .button.blue:hover,
.actionSelector input.blue:hover {
background: #64b5ff;
}
.actionSelector .button.orange {
background: #FF9933;
color: #ffffff;
border: 1px solid #f08f2d;
}
.actionSelector .button.clear {
background: none;
border: none;
}
.actionSelector .clear:hover {
border: none;
background: #ffffff;
}
.actionSelector .subOption {
float: left;
padding: 10px;
}
.actionSelector .bold {
color: #000000;
font-weight: bold;
}
.actionSelector .disabled {
color: #757575;
text-decoration: line-through;
}
.actionSelector .none {
float: left;
background: none;
color: #417bc4;
border: none;
}
.actionSelector .button.green {
background: #97c224;
color: #ffffff;
border: 1px solid #97c224;
}
.actionSelector.small {
font-size: 90%;
}
.actionSelector .button:first-child {
margin-left: 10px;
}
.singleAction {
width: 90%;
margin: 5px 5% 5px 5%;
}
.singleAction a,
.singleAction button {
width: 60%;
margin: auto;
text-transform: uppercase;
font-weight: 700;
text-align: center;
display: block;
padding: 15px;
background: #62b5ff;
color: #ffffff;
border: none;
border-radius: 3px;
}
.singleAction.floating {
position: fixed;
height: 50px;
bottom: 0;
left: 0;
background: #ffffff;
margin: 0;
padding-top: 5px;
border-top: 1px solid #dcdcdc;
padding-left: 5%;
padding-right: 5%;
}
.imageExtern {
max-width: 618px;
}
.imageBlacklisted {
color: #000;
font-size: 0.7em;
}
.bannerTop {
width: 100%;
}
.bannerTop .adslot.billboard90 {
display: none;
}
.bannerTop .adslot.billboard250 {
display: none;
}
.bannerTop .adslot.mobileBillboard {
display: block;
height: 50px;
}
.adSlot.inFeed {
margin-bottom: 10px;
}
/* Wenn Zeit noch raus */
.advertRight {
width: 0;
margin-top: 5px;
min-height: 400px;
}
/* Basisframes */
.jpy {
width: 100%;
text-align: left;
}
.jpyPopup {
width: 845px;
text-align: left;
background: #e5e5e5;
}
/* #header box-shadow:1px 1px 2px #c6c6c6 */
.header {
text-align: center;
background: #333333;
background: linear-gradient(90deg, #484848 0%, #333333 100%);
top: 0px;
left: 0px;
z-index: 1000000;
width: 100%;
max-height: 50px;
}
body.fixedAvailable .header {
position: fixed;
}
body.fixedAvailable #jappy {
padding-top: 50px;
}
/*
Kopfzeile als Grid mit benannten Bereichen (#1445). Die Bereiche entkoppeln Anordnung und
Quelltext-Reihenfolge: die Suche steht im Markup hinter den Aktionen, erscheint aber links von
ihnen - und kann mobil den ganzen Streifen einnehmen, ohne dass das Markup sich ändert.
Die Spalte der Suche ist die einzige flexible; Marke und Aktionen behalten ihre Eigenbreite.
*/
.header .wrapper {
width: 100%;
height: 50px;
margin: auto;
text-align: left;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-areas: "brand search actions";
align-items: center;
}
.header .logoFrame {
grid-area: brand;
height: 43px;
padding-top: 3px;
padding-bottom: 3px;
overflow: hidden;
text-align: left;
margin-left: 5px;
}
.header .logoFrame img {
margin-left: 0;
width: 130px;
}
.header .logoFrame.open img {
margin-left: 10px;
}
.header .logoFrame a {
border-radius: 20px;
display: block;
}
.header .logoFrame a:hover {
transition: 0.5s;
animation: intoFocusSoft 0.3s forwards;
cursor: pointer;
}
.header .logoFrame.burgerLogo img {
width: auto;
height: 40px;
margin-left: 10px;
}
.header .logoFrame.burgerLogo img.burgerIcon {
margin-left: 0;
display: none;
}
.header .logoFrame.burgerLogo img.burgerLogo {
margin-right: 10px;
}
.header .logoFrame.burgerLogo.open img.burgerLogo {
margin-left: 0px;
}
.header .logoFrame.burgerLogo.open img.burgerIcon {
margin-left: 10px;
}
/* Aktionsbereich: Benachrichtigungen und Nutzermenü, rechtsbündig in einer Reihe. */
.header .headActions {
grid-area: actions;
display: flex;
align-items: center;
justify-content: flex-end;
min-width: 0;
}
.header .headNotifications {
display: none;
}
.header .headNotifications a.bellFeed {
float: right;
display: block;
padding: 5px 10px 5px 10px;
margin-top: 5px;
margin-right: 10px;
}
.header .headNotifications a.bellFeed .counter {
position: absolute;
margin-top: -27px;
margin-left: 17px;
font-weight: bold;
border-radius: 5px;
text-align: center;
padding: 2px 4px;
background: #ffffff;
color: #000000;
font-size: 80%;
}
.header .headNotifications a:hover.bellFeed {
background: #484848;
border-radius: 5px;
}
.header .headNotifications a.bellFeed img {
width: 25px;
}
.header .headNotifications .headNotificationSection {
float: right;
display: block;
margin-top: 5px;
margin-right: 10px;
}
.header .headNotifications .headNotificationSection a {
display: block;
padding: 5px 10px 5px 10px;
}
.header .headNotifications .headNotificationSection a:hover {
background: #000000;
border-radius: 10px;
}
.header .headNotifications .headNotificationSection a .counter {
position: absolute;
margin-top: -27px;
margin-left: 17px;
font-weight: bold;
border-radius: 5px;
text-align: center;
padding: 2px 4px;
background: #ffffff;
color: #000000;
font-size: 80%;
}
.header .headNotifications .headNotificationSection a img {
height: 25px;
width: 25px;
}
.header .headNotifications .headNotificationSection a img.hasContent {
animation: wobble-horizontal 10s infinite;
}
.header .contextMenue {
float: right;
position: relative;
z-index: 2;
display: none;
cursor: pointer;
padding-top: 5px;
margin-right: 10px;
}
.header .contextMenue a {
display: block;
margin-left: 10px;
}
.header .contextMenue a:hover {
background: #000000;
border-radius: 5px;
}
/*
Schnellsuche (#1445). Zwei Erscheinungsformen im selben Markup: schmaler Auslöser-Knopf für enge
Streifen, dauerhaft sichtbares Feld ab Tablet-Breite. Der Wechsel ist reine Sichtbarkeit - es wird
nichts nachgeladen und nichts umgehängt.
*/
.header .headSearch {
grid-area: search;
display: flex;
align-items: center;
justify-content: flex-end;
min-width: 32px;
margin-right: 10px;
}
.header .headSearch .trigger {
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
padding: 5px;
margin: 0;
cursor: pointer;
border-radius: 5px;
}
.header .headSearch .trigger:hover {
background: #484848;
}
.header .headSearch .trigger img {
width: 22px;
height: 22px;
}
.header .headSearch .field {
display: none;
align-items: center;
position: relative;
min-width: 0;
flex: 0 1 auto;
}
.header .headSearch .close {
display: none;
position: absolute;
right: 6px;
background: none;
border: none;
padding: 4px;
margin: 0;
cursor: pointer;
}
.header .headSearch .close img {
width: 14px;
height: 14px;
}
/*
Höhe und Mittellinie sind an das Profilbild im Nutzermenü gebunden (25px, mittig im 50px-Streifen):
Suchfeld und Profilbild sollen oben wie unten auf derselben Kante sitzen. Deshalb feste Höhe mit
border-box statt Innenabstand nach oben/unten - sonst verschiebt jede Schriftgrößen-Änderung die Kante.
*/
.header .headSearch input {
box-sizing: border-box;
height: 25px;
background: #484848;
font-weight: 300;
border: 1px solid #484848;
width: 80px;
color: #9A9A9A;
padding: 0 12px;
font-size: 100%;
border-radius: 25px;
font-family: Roboto, Arial;
}
.header .headSearch input::-webkit-input-placeholder {
color: #9A9A9A;
font-weight: 300;
}
.header .headSearch input:focus {
background: #ffffff;
color: #333333;
}
.header .headSearch input:hover {
background: #ffcd46;
}
/*
Die Überblendung des Feldes ist bewusst sehr kurz (#1445 gibt höchstens 50ms vor) - sie soll den
Wechsel begleiten, nicht ihn abwarten lassen. Wie der aufgeklappte Zustand aussieht, hängt von der
Streifenbreite ab und steht deshalb in 901-Mobile.less.
*/
.header .headSearch .field {
transition: opacity 50ms linear;
}
/*
Grauer Layer über der Seite. Er nimmt die Vorschlagsliste auf und fängt jeden Klick daneben ab -
dadurch schließt die Suche auch dann, wenn danebengeklickt wird, ohne dass jedes andere
Bedienelement davon wissen muss.
*/
/* Lage und Höhe setzt das Modul beim Öffnen - es misst die Unterkante der Kopfzeile, statt sie anzunehmen. */
.quickSearchOverlay {
position: fixed;
left: 0;
width: 100%;
background: rgba(0, 0, 0, 0.45);
}
.quickSearchLayer {
position: fixed;
width: 280px;
max-width: calc(100vw - 20px);
}
.quickSearchResult {
background: #ffffff;
text-align: left;
border: 1px solid #cccccc;
box-shadow: 1px 1px 2px #9c9c9c;
padding: 10px;
border-radius: 15px;
max-height: calc(100vh - 70px);
overflow-y: auto;
}
.quickSearchResult .entry {
display: flex;
align-items: center;
gap: 10px;
padding: 5px;
cursor: pointer;
border-radius: 15px;
outline: none;
}
.quickSearchResult .entry:hover,
.quickSearchResult .entry.highlight {
background: #ffda69;
}
/*
Die Bildgröße erzwingt der **Container**, nicht das Bild. Ein ![]()
, dessen Quelle nicht lädt, rendert
in Chrome seinen alt-Text und verwirft dabei die eigene Breitenangabe - aus 40px wurden gemessene 78px,
und die Zeile verzog sich. Solche Bilder gibt es im Bestand tatsächlich (Profilbilder, deren Blob im
Store fehlt), das Layout darf daran nicht hängen. `overflow:hidden` deckelt den Fall, `font-size:0`
unterdrückt den alt-Text, und der graue Grund lässt einen Fehlschlag als neutralen Kreis erscheinen
statt als Loch.
*/
.quickSearchResult .entry .picture {
flex: 0 0 40px;
width: 40px;
height: 40px;
overflow: hidden;
border-radius: 50%;
background: #e9e9e9;
font-size: 0;
line-height: 0;
display: flex;
align-items: center;
justify-content: center;
}
.quickSearchResult .entry .picture img {
width: 100%;
height: 100%;
object-fit: cover;
border: none;
border-radius: 50%;
}
.quickSearchResult .entry .plain {
min-width: 0;
font-size: 110%;
font-weight: 600;
}
.quickSearchResult .entry .plain .name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.quickSearchResult .entry .plain .preStamp {
display: none;
}
.quickSearchResult .entry .plain a {
text-decoration: none;
}
.quickSearchResult .entry .realName {
color: #696969;
font-size: 85%;
font-weight: 400;
padding-top: 2px;
}
.quickSearchResult .entry.friend .picture img {
border-color: #9ed1ff;
}
.quickSearchResult .emptyState {
padding: 10px;
color: #696969;
font-style: italic;
}
.quickSearchResult .hint {
padding: 10px 5px 0 5px;
color: #696969;
font-size: 85%;
border-top: 1px solid #f1f1f1;
margin-top: 5px;
}
.header .tickerFrame {
float: right;
padding-top: 4px;
width: 230px;
}
.header .burger {
width: 25px;
}
.header .tickerStatusButton {
float: left;
margin-left: 10px;
padding-left: 20px;
margin-top: 2px;
border-left: 1px dashed #484848;
}
.header .tickerStatusButton a.createTicker {
display: block;
float: left;
background: #ffa225;
border: 1px solid #242424;
margin-right: 10px;
padding: 10px;
color: #ffffff;
font-size: 100%;
margin-top: 5px;
border-radius: 25px;
font-weight: 600;
}
.header .tickerStatusButton a:hover.createTicker {
background: #ffb756;
}
.header .tickerStatusButton .statusIcon {
float: left;
padding-top: 5px;
padding-bottom: 5px;
cursor: pointer;
}
.header .tickerStatusButton .statusIcon:hover {
background: #484848;
border-radius: 5px;
}
.header .tickerStatusButton .statusIcon img {
width: 35px;
}
.bellOn {
animation: wobble-horizontal 10s infinite;
}
/*
Das Nutzermenü ist gedeckelt (#1445). Ohne Obergrenze wächst es mit dem Nicknamen, und weil es in der
auto-Spalte des Grids sitzt, ging dieser Zuwachs zulasten der Suchspalte - bei einem 15-stelligen Namen
blieb von der Lupe ein 10px-Rest übrig. Der Deckel plus die Ellipsis am Nicknamen halten die Kopfzeile
stabil, egal wie lang der Name ist.
*/
.header .userAccount {
padding: 7px;
margin: 5px 5px 5px 10px;
min-width: 100px;
max-width: 220px;
display: flex;
}
.header .userAccount.active,
.header .userAccount:hover {
background: #000000;
border-radius: 10px;
}
.header .userAccount .image img {
width: 25px;
border-radius: 50%;
}
.header .userAccount .nickname {
padding: 5px 10px 5px 10px;
font-size: 120%;
font-weight: 600;
color: #ffffff;
min-width: 0;
max-width: 100px;
text-overflow: ellipsis;
display: block;
white-space: nowrap;
overflow: hidden;
}
.header .userAccount .down img {
width: 10px;
margin-top: 7px;
}
.userMenu {
border-radius: 10px;
border: 1px solid #333333;
z-index: 99999999;
background: #ffffff;
position: absolute;
right: 5px;
top: 55px;
width: 320px;
padding-top: 0;
box-shadow: 5px 5px 30px #868686;
max-height: calc(100vh - 65px);
overflow-y: auto;
}
.userMenu::-webkit-scrollbar {
width: 5px;
}
.userMenu::-webkit-scrollbar-track {
color: #333333;
background: #e1e1e1;
}
.userMenu::-webkit-scrollbar-button {
color: #333333;
}
.userMenu::-webkit-scrollbar-thumb {
color: #333333;
background: #d3d3d3;
}
.userMenu .theme {
text-align: center;
height: 130px;
}
.userMenu .theme .background {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
height: 130px;
background-size: 100%;
}
.userMenu .theme .background img {
width: 80px;
border-radius: 50%;
margin-top: 15px;
border-width: 3px;
}
.userMenu .theme:hover .background img {
border-color: #ffa225 !important;
}
.userMenu .settings {
display: block;
padding-bottom: 20px;
border-top: 1px solid #f1f1f1;
}
.userMenu .settings a.entry {
display: block;
padding: 7px;
}
.userMenu .settings a.entry:hover {
background: #f1f1f1;
}
.userMenu .settings a.entry .text {
text-transform: none;
float: left;
color: #474747;
padding: 7px 15px;
font-weight: 600;
}
.userMenu .settings a.entry .icon {
float: left;
width: 25px;
margin-left: 10px;
}
.userMenu .settings a.entry .icon img {
width: 100%;
}
.userMenu img.profileImageOnline {
border-width: 5px;
}
.userMenu .loginForm {
padding: 13px;
width: calc(100% - 26px);
text-align: center;
}
.userMenu .loginForm button,
.userMenu .loginForm a {
text-align: center;
width: auto;
}
.userMenu .loginForm input[type="text"],
.userMenu .loginForm input[type="password"] {
width: calc(100% - 30px);
}
.userMenu .about {
padding: 20px 20px;
text-align: center;
line-height: 140%;
font-size: 90%;
color: #9d9d9d;
margin-top: 20px;
font-weight: 300;
border-top: 1px solid #f1f1f1;
}
.userMenu .about a {
color: #9d9d9d;
}
.userMenu .about a:hover {
text-decoration: underline;
}
.userMenu .quickSettings {
position: absolute;
width: 100px;
top: 80px;
right: 5px;
}
.userMenu .quickSettings a {
float: right;
opacity: 0.7;
padding: 5px;
}
.userMenu .quickSettings a img {
width: 20px;
}
.userMenu .tooltip {
text-align: center;
min-width: 40px;
margin-top: 65px;
z-index: 10;
position: absolute;
padding: 5px 10px;
color: #333333;
font-weight: 800;
background: #f1f1f1;
border-radius: 15px;
}
.userMenu .textInfo {
color: #666666;
text-align: center;
width: 50px;
margin-top: 65px;
z-index: 10;
position: absolute;
padding: 5px;
font-weight: 300;
}
.userMenu .headerMenue:hover .tooltip {
display: block;
}
.userMenu .headerMenue:hover .textInfo {
color: #000000;
}
.userMenu .rankData .tooltip {
margin-top: 45px;
}
.userMenu .theme:hover .tooltip {
display: block !important;
}
.userMenu .theme .tooltip {
margin-top: -30px;
margin-left: 120px;
opacity: 0.8;
}
.userMenu .features {
padding-top: 10px;
padding-right: 10px;
padding-bottom: 40px;
}
.userMenu .creditsData {
float: right;
display: block;
padding: 5px;
border-radius: 10px;
margin-right: 5px;
}
.userMenu .creditsData .image {
float: left;
padding: 10px;
}
.userMenu .creditsData .image img {
width: 45px;
animation: overshotIn 0.5s ease-in forwards;
animation-delay: 0.1s;
}
.userMenu .creditsData .counter {
position: absolute;
margin-top: 48px;
width: 50px;
text-align: center;
color: #0a0a0a;
padding: 5px;
font-weight: 600;
font-size: 100%;
border-radius: 10px;
}
.userMenu .cardData {
float: right;
display: block;
padding: 5px;
border-radius: 10px;
margin-right: 5px;
}
.userMenu .cardData .image {
float: left;
padding: 5px;
}
.userMenu .cardData .image img {
width: 55px;
}
.userMenu .stickerData {
float: right;
display: block;
padding: 5px;
border-radius: 10px;
margin-right: 5px;
}
.userMenu .stickerData .image {
float: left;
padding: 10px;
}
.userMenu .stickerData .image img {
width: 45px;
animation: overshotInDelay 0.8s ease-in forwards;
animation-delay: 0.2s;
}
.userMenu .rankData {
float: right;
display: block;
padding: 10px;
border-radius: 10px;
height: 50px !important;
width: 50px !important;
margin-right: 5px;
}
.userMenu .rankData .image {
position: absolute;
z-index: 3;
padding: 7px 5px;
animation: overshotIn 0.5s ease-in forwards;
animation-delay: 0s;
}
.userMenu .rankData .progressBar {
position: absolute;
margin-top: 32px;
margin-left: 0px;
z-index: 5;
padding: 2px;
background: #e5e5e5;
border-radius: 10px;
opacity: 0.9;
width: 50px;
height: 12px;
animation: overshotIn 0.5s ease-in forwards;
animation-delay: 0s;
}
.userMenu .rankData .progressBar:hover {
opacity: 1;
}
.userMenu .rankData .progressInPercent {
background: #333333;
background: linear-gradient(60deg, #b6ff41 0%, #8dc700 100%);
height: 100%;
border-radius: 10px;
max-width: 100%;
}
.userMenu .rankData .image img {
width: 40px;
}
.userMenu .rankData .counter {
position: absolute;
animation: overshotIn 0.5s ease-in forwards;
animation-delay: 0.0s;
z-index: 4;
margin-top: 16px;
width: 50px;
text-align: center;
color: #ffffff;
font-weight: 900;
font-size: 100%;
border-radius: 10px;
}
.userMenu .rankData .textInfo {
margin-top: 60px;
}
.userMenu .inventory small {
position: absolute;
margin-top: 21px;
margin-left: -35px;
background: #ff9b22;
border: 1px solid #ff941f;
color: #ffffff;
padding: 5px;
font-weight: 500;
border-radius: 10px;
}
.userMenu .userStatusIcon {
float: right;
padding: 5px;
margin: 5px;
display: block;
max-width: 30px;
}
.userMenu .userStatusIcon img {
width: 25px;
}
.userMenu .headerMenue {
cursor: pointer;
height: 60px;
width: 60px;
text-align: center;
}
.userMenu .headerMenue:hover {
background: #f1f1f1;
}
/* linear-gradient(#14ffe9, #ffeb3b, #ff00e0); */
.userMenu .rankInfo {
width: 50px;
height: 50px;
border-radius: 50%;
position: absolute;
/* Hide half of the progress bar */
}
/* Set the sizes of the elements that make up the progress bar */
.rankCircle {
width: 40px;
height: 40px;
border: 5px solid #ffa225;
border-radius: 50%;
position: absolute;
clip: rect(0px, 25px, 50px, 0px);
}
.rankCircleColor11 {
border-color: #e80000;
}
.rankCircleColor10 {
border-color: #00d3e8;
}
.rankCircleColor9 {
border-color: #000000;
}
.rankCircleColor8 {
border-color: #545454;
}
.rankCircleColor7 {
border-color: #00499a;
}
.rankCircleColor5 {
border-color: #91cd00;
}
.rankCircleColor4 {
border-color: #26a7d4;
}
.rankCircleColor3 {
border-color: #fa4092;
}
.rankCircleColor2 {
border-color: #b30698;
}
.rankCircleColor1 {
border-color: #e1cf04;
}
.rankCircleColor0 {
border-color: #e5e5e5;
}
/* Using the data attributes for the animation selectors.
.userMenu div[data-anim~=base] { -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -webkit-animation-timing-function:linear;}
.rankInfo[data-anim~=rankInfo] { -webkit-animation-duration: 0.01s; -webkit-animation-delay: 0.02s; -webkit-animation-name: close-wrapper; }
.rankCircle[data-anim~=left] {-webkit-animation-duration: 0.05s; -webkit-animation-name: left-spin;-webkit-animation-delay: 0.02s}
.rankCircle[data-anim~=right] {-webkit-animation-duration: 0.02s; -webkit-animation-name: right-spin;}
*/
/* Profil ist noch nicht aktiviert */
.profileActivationNotice {
background: #ffe08d;
font-size: 100%;
width: 100%;
line-height: 150%;
text-align: center;
position: fixed;
top: 50px;
border-bottom: 1px solid #ffcf4f;
}
.profileActivationNotice a {
padding: 15px;
color: #333333;
display: block;
font-weight: 700;
}
.profileActivationNotice a:hover {
background: #ffd34e;
}
/*.floatingFoot {position: fixed; bottom: 0;left:0;right:0;height: 57px;z-index:1000000;display:none}
.floatingFoot .wrapper {text-align:center;padding:0px 0 5px 0;background:#181818;min-height:55px}
.floatingFoot .entry {float:left;padding-bottom:3px;width:20%;margin:0 0;text-align:center;padding-top:7px}
.floatingFoot .entry.active {}
.floatingFoot .counter {display:block;padding:3px 3px;font-weight:800;border-radius:5px;background:#ee000b;color:#ffffff;text-align:center;position:absolute;margin-left:40px;margin-top:15px;vertical-align: middle}
.floatingFoot .counter.bell {background:#ee000b}
.floatingFoot .counter.chat {background:#ee000b}
.floatingFoot .text {color:#f1f1f1;font-size:75%;font-weight:200;text-align:center;padding-top:3px}
.floatingFoot .entry.active .text {color:#ffffff;font-weight:600}
.floatingFoot img {width:30px}
.floatingFoot .entry.profile img {border-radius:50%;border:1px solid #000000 !important}
.floatingFoot .guestLogin {text-align:center}
@media (max-height: 300px) {
.floatingFoot {display:none}
}
*/
.floatingFoot2 {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 57px;
z-index: 1000000;
}
.floatingFoot2 .wrapper {
text-align: center;
padding: 0px 0 5px 0;
background: #181818;
min-height: 55px;
background: linear-gradient(270deg, #ff9933 0, #ffd237 100%);
border-top: 1px solid #ff7134;
}
.floatingFoot2 .entry {
float: left;
padding-bottom: 3px;
width: 33%;
margin: 0 0;
text-align: center;
padding-top: 10px;
}
.floatingFoot2 .counter {
display: block;
padding: 5px;
font-weight: 800;
border-radius: 10px;
background: #ff5200;
color: #ffffff;
text-align: center;
position: absolute;
margin-left: 40px;
margin-top: 15px;
vertical-align: middle;
}
.floatingFoot2 .counter.bell {
background: #ff5200;
}
.floatingFoot2 .counter.chat {
background: #ff5200;
}
.floatingFoot2 .text {
color: #f1f1f1;
font-size: 75%;
font-weight: 200;
text-align: center;
padding-top: 3px;
display: none;
}
.floatingFoot2 .entry.active .text {
color: #ffffff;
font-weight: 600;
}
.floatingFoot2 img {
width: 35px;
}
.floatingFoot2 .entry.profile img {
border-radius: 50%;
border: 1px solid #000000 !important;
}
.floatingFoot2 .guestLogin {
text-align: center;
}
/* Seite */
.site {
width: 100%;
text-align: left;
padding: 0;
}
.site .siteLeft {
display: none;
background: #ffffff;
min-height: 1000px;
}
.site .siteRight {
width: 100%;
overflow: hidden;
}
.site .third {
display: none;
}
.siteLeft .about,
.userSidebar .about {
padding: 20px 20px;
text-align: center;
line-height: 130%;
font-size: 90%;
color: #9d9d9d;
margin-top: 60px;
font-weight: 300;
}
.siteLeft .about a,
.userSidebar .about a {
color: #9d9d9d;
}
.siteLeft .about a:hover,
.userSidebar a:hover {
text-decoration: underline;
}
.userSidebar {
width: 300px;
background: #ffffff;
padding-left: 0px !important;
border-radius: 0;
animation: navigatorSlideIn 0.3s;
}
.userSidebarContent .spacer {
margin-bottom: 20px;
}
.navigationSection.collapsed .userSidebarContent {
display: none;
}
.userSidebarContent .navigationSectionPlainLink {
display: block;
color: #00b8fe;
padding: 3px 0 3px 0;
}
.userSidebarContent .navigationSectionPlainLink:last-child {
margin-bottom: 15px;
}
.userSidebarContent .navigationSectionPlainLink .icon {
float: left;
width: 30px;
margin-left: 20px;
padding-top: 3px;
}
.userSidebarContent .navigationSectionPlainLink .icon img {
width: 25px;
height: 25px;
}
.userSidebarContent .navigationSectionPlainLink .text {
float: left;
padding: 10px 5px 10px 10px;
text-align: left;
font-weight: 500;
}
.userSidebarContent .navigationSectionPlainLink:hover {
background: #ffedb0;
color: #000;
}
.userSidebarContent .navigationSectionPlainLink.active {
background: #efefef;
font-weight: 900;
color: #000;
}
.userSidebarContent .navigationSectionPlainLink .unreadCounter {
position: absolute;
margin-left: 10px;
}
.userSidebarEntry {
display: block;
padding-top: 5px;
padding-bottom: 5px;
border-left: 5px solid #ff9e33;
}
.userSidebarEntry .icon {
float: left;
width: 40px;
padding-left: 5px;
text-align: center;
margin-right: 10px;
height: 41px;
padding-top: 1px;
}
.userSidebarEntry .icon img {
width: 30px;
margin-top: 5px;
}
.userSidebarEntry .counter {
position: absolute;
background: #f60039;
background: linear-gradient(30deg, #ff8833 0%, #f60039 100%);
border: 1px solid #f71538;
font-weight: 900;
padding: 3px 5px;
border-radius: 10px;
color: #ffffff;
margin-top: -15px;
}
.userSidebarEntry .text {
float: left;
font-size: 100%;
font-weight: 800;
color: #666666;
padding-top: 15px;
}
.userSidebarEntry .sectionToggle {
float: right;
width: 30px;
padding-right: 7px;
text-align: center;
margin-left: 10px;
height: 31px;
padding-top: 7px;
}
.userSidebarEntry .sectionToggle span {
width: 15px;
height: 15px;
margin-top: 5px;
opacity: 0.3;
background-size: 15px 15px;
background-repeat: no-repeat;
display: inline-block;
}
.userSidebarEntry .sectionToggle.highlight {
background: #ffedb0;
border-radius: 10px;
animation: overshotIn 0.3s forwards;
width: 25px;
margin-right: 5px;
}
.userSidebarEntry .sectionToggle.highlight span {
opacity: 1;
}
.userSidebarEntry:hover .sectionToggle span {
opacity: 0.5;
}
.userSidebarEntry .sectionToggle span:hover {
opacity: 0.7;
}
.navigationSection.expanded .sectionToggle span {
background-image: url("//s.jappy.com/i/header/sidebarMinus.png");
}
.navigationSection.collapsed .sectionToggle span {
background-image: url("//s.jappy.com/i/header/sidebarPlus.png");
}
.userSidebarEntry.active .text {
color: #000000;
}
.userSidebarEntry:hover {
background: #ffedb0;
}
.navigationSectionBrick {
display: block;
padding-left: 10px;
padding-top: 3px;
height: 37px;
}
.navigationSectionBrick:hover {
background: #ffedb0;
}
.navigationSectionBrick .icon {
float: left;
width: 35px;
padding-left: 5px;
text-align: right;
margin-right: 10px;
height: 31px;
padding-top: 1px;
}
.navigationSectionBrick .icon.right {
float: right;
}
.navigationSectionBrick .icon img {
width: 25px;
margin-top: 5px;
}
.navigationSectionBrick .icon.right img {
margin-top: 0px;
}
.navigationSectionBrick .profileImage img {
border-radius: 50%;
}
.navigationSectionBrick .counter {
position: absolute;
background: #f60039;
background: linear-gradient(30deg, #ff8833 0%, #f60039 100%);
border: 1px solid #f71538;
font-weight: 900;
padding: 3px 5px;
border-radius: 10px;
color: #ffffff;
margin-top: -15px;
}
.navigationSectionBrick .text {
float: left;
font-size: 100%;
font-weight: 400;
color: #666666;
padding-top: 12px;
padding-bottom: 5px;
display: block;
min-width: 80px;
}
.navigationSectionBrick .text .title {
margin-top: 0px;
font-size: 110%;
font-weight: 500;
color: #00b8fe;
}
.navigationSectionBrick .text .subtitle {
font-size: 80%;
color: #a4a4a4;
font-weight: 300;
display: none;
}
.navigationSectionBrick:hover .text {
color: #000;
}
.navigationSectionBrick.active {
background: #f8f8f8;
}
.navigationSectionBrick.active .text {
font-weight: 900;
color: #000;
}
.userSidebar .headlineLeft a {
text-transform: none !important;
}
.userCenterHeader {
display: none;
}
.userCenterOff {
display: none !important;
}
.userCenter a.entry {
display: block;
padding-top: 5px;
padding-bottom: 5px;
}
.userCenter a.entry.additional {
display: none;
}
.userCenter .icon {
float: left;
width: 40px;
margin-left: 10px;
padding-left: 10px;
text-align: center;
margin-right: 10px;
height: 41px;
padding-top: 1px;
}
.userCenter .icon img {
width: 30px;
margin-top: 5px;
}
.userCenter a.entry.profile .icon img {
border-radius: 50%;
width: 37px;
border: none;
}
.userCenter a.entry .text {
float: left;
font-size: 100%;
font-weight: 800;
color: #ffffff;
text-transform: uppercase;
padding-top: 15px;
}
.userCenter a.entry.active .text {
color: #ffffff;
font-weight: 800;
}
.userCenter .changes {
float: right;
width: 20px;
margin-right: 9px;
margin-top: 10px;
}
.userCenter .newEntries {
width: 12px;
}
.userCenter a:hover {
background: #666666 !important;
}
.userCenter .mailboxPreview .conversation .sender .picture img {
width: 25px;
margin-left: 5px;
}
.userCenter .headlineLeft a {
color: #585858;
font-weight: 800;
}
.userCenter .showAdditional {
text-align: center;
cursor: pointer;
padding-top: 3px;
}
.userCenter .showAdditional:hover {
background: #FDD978;
}
.userCenter .showAdditional img {
height: 20px;
}
.noBuddiesOnline,
.noChats {
padding: 20px 20px;
text-align: center;
font-weight: 300;
color: #999999;
}
.userCenter.showAll .showAdditional {
display: none;
}
.userCenter.showAll .entry.additional {
display: block;
}
.userCenter a.entry small {
position: absolute;
margin-top: 3px;
font-weight: 900;
margin-left: -5px;
background: #ff890a;
border-radius: 5px;
color: #ffffff;
padding: 2px;
font-size: 80%;
}
.userCenter a.entry.shop small {
margin-left: 35px;
background: #ff890a;
color: #ffffff;
font-weight: 500;
}
.userCenter a.entry.home small {
padding: 3px 3px;
font-weight: 800;
border-radius: 5px;
background: #ffffff;
color: #333333;
text-align: center;
}
.userCenter a.entry.guestbookEntry small {
background: #9eca28;
color: #ffffff;
border: 1px solid #484848;
color: #000000;
}
.userCenterHeader a.entry {
display: none;
}
.userCenter a.entry {
float: left;
padding: 3px 20px 3px 5px;
}
.userCenter a.entry .icon {
padding-left: 0;
}
.userCenter a.entry .icon img {
width: 25px;
margin-top: 8px;
}
.userCenter a.entry:hover {
background: #484848;
text-decoration: none;
}
.userCenter a.entry.profile .icon img {
width: 25px;
}
.userCenter .icon {
margin-right: 5px;
}
.userCenter .changes {
position: absolute;
}
.userCenterHeader a.rank {
display: none;
}
.userCenter .settings {
display: block;
bottom: 70px;
position: absolute;
}
.userCenter .settings a.entry .text {
text-transform: none;
}
.userCenter .settings a.about {
padding: 5px;
text-indent: 10px;
font-size: 90%;
}
.userCenter .settings a.about .text {
padding: 0;
margin-top: 10px;
font-weight: 300;
}
/* Navigatior */
.navigatorBackground {
animation: backgroundFade 0.5s;
background: #484848;
opacity: 0.3;
width: 100%;
height: 100%;
margin-top: 50px;
}
.navigator {
width: 200px;
background: #484848 !important;
padding-left: 0px !important;
height: 100%;
border-radius: 0;
animation: navigatorSlideIn 0.3s;
}
.navigator .showAdditional {
display: none;
}
.navigator a.entry.additional {
display: block;
}
.navigator a.entry {
width: 160px;
}
.contactsOnline {
background: #ffffff;
}
.contactsOnline .entry {
width: 100%;
padding: 5px 0 5px 0;
height: 45px;
cursor: pointer;
display: block;
}
.contactsOnline .entry:first-child {
border-top: none !important;
}
.contactsOnline .entry:last-child {
padding-bottom: 7px;
}
.contactsOnline .entry:hover {
background: #ffedb0;
}
.contactsOnline .entry a.picture {
float: left;
width: 60px;
min-height: 45px;
text-align: center;
}
.contactsOnline .entry a.picture img {
width: 30px;
height: 30px;
border-radius: 50%;
}
.contactsOnline .entry.hover {
background: #ffedb0;
}
.contactsOnline .entry a.picture img:hover {
border: 1px solid #000000;
}
.contactsOnline .entry.fadeIn {
background: #e2fa97;
}
.contactsOnline .entry.fadeOut {
background: #f1f1f1;
}
.contactsOnline .entry a.plain {
float: left;
display: block;
width: 100px;
overflow: hidden;
padding-top: 7px;
min-height: 40px;
color: #333333;
font-size: 100%;
}
.contactsOnline .entry a.plain .realname {
color: #a4a4a4;
font-weight: 300;
width: 85px;
overflow: hidden;
padding-top: 2px;
}
.contactsOnline .entry a.plain .options {
padding-top: 1px;
padding-left: 1px;
position: relative;
z-index: 2;
margin-left: 20px;
}
.contactsOnline .entry a.plain a,
.contactsOnline .entry .plain .link {
text-decoration: none;
color: #333333;
font-weight: 500;
font-size: 110%;
}
.contactsOnline .entry .onlineStatus {
float: right;
width: 30px;
padding-top: 5px;
min-height: 17px;
}
.contactsOnline .entry .onlineStatus img {
width: 80%;
margin-right: 20%;
}
/* Mailvorschau */
.mailboxPreview {
width: 100%;
text-align: left;
background: #ffffff;
}
.mailboxPreview .conversation {
cursor: pointer;
}
.mailboxPreview .conversation:hover {
background: #ffedb0;
color: #333333;
}
.mailboxPreview .conversation.unread {
background: #ffd237;
}
.mailboxPreview .conversation.mention {
background: #49ccff;
}
.mailboxPreview .conversation.active {
background: #78C3FD;
}
.mailboxPreview .conversation .sender {
float: left;
width: 55px;
text-align: center;
}
.mailboxPreview .conversation .sender .picture img {
border-radius: 50%;
width: 25px;
border-width: 2px;
}
.mailboxPreview .conversation .sender .picture img.profileImageOffline {
border-color: #e5e5e5;
}
.mailboxPreview .conversation .subject {
float: left;
max-width: 130px;
width: 130px;
line-height: 130%;
}
.mailboxPreview .conversation a {
display: block;
padding-top: 10px;
padding-bottom: 10px;
border-left: 5px solid #ffffff;
}
.mailboxPreview .conversation a.pinned {
border-left: 5px solid #ffda69;
}
.mailboxPreview .conversation .messagePreview {
color: #a4a4a4;
font-weight: 300;
max-width: 95%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
padding-top: 5px;
}
.mailboxPreview .conversation.mention .messagePreview {
color: #000000;
font-weight: 700;
}
.mailboxPreview .conversation.unread .messagePreview {
color: #333333;
}
.mailboxPreview .conversation .unreadCounter {
position: absolute;
z-index: 2;
margin-top: 20px;
margin-left: 10px;
}
.mailboxPreview .messageTopic {
font-weight: 500;
color: #333333;
font-size: 110%;
max-width: 95%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.mailboxPreview .conversation .statusIconMail {
float: right;
width: 35px;
margin-right: 20px;
padding-top: 5px;
display: none;
}
.mailboxPreview .conversation .statusIconMail img {
width: 35px;
margin-top: 5px;
}
.openMailbox {
display: block;
text-indent: 55px;
font-size: 90%;
padding: 10px;
background: #e5e5e5;
}
.headlineLeft {
background: #ffffff;
margin-top: 0px;
}
.headlineLeft a {
display: block;
float: left;
padding: 10px 10px 8px 20px;
color: #585858;
font-weight: 800;
}
.headlineLeft a img {
width: 30px;
margin-right: 15px;
}
.headlineLeft a:hover {
text-decoration: underline;
}
.siteDouble {
width: 100%;
}
.siteDouble.startpage .left {
width: 100%;
}
.siteDouble.startpage .right {
display: none;
}
.siteDouble.shopDouble .left {
width: 360px;
}
.siteDouble.shopDouble .right {
width: 360px;
}
.generalRight {
font-size: 11px;
}
.generalRight img {
vertical-align: text-bottom;
}
.generalRight a.entry {
display: block;
padding: 12px 11px;
color: #333333;
border-bottom: 1px solid #ececec;
}
.generalRight a.subEntry {
text-indent: 15px;
font-size: 11px;
}
.generalRight a.entry:hover {
color: #ff9613;
}
.generalRight a.active {
font-weight: bold;
color: #ff9613;
}
.generalRight a.button.active {
background: #75c0ff;
}
.generalRight a.subEntry.active {
background: #71d0ff;
font-weight: normal;
}
.generalRight .headline {
padding: 10px 12px 11px 12px;
color: #333333;
margin-top: 15px;
line-height: 130%;
font-size: 120%;
color: #676767;
}
.generalRight .headline:first-child {
margin-top: 0;
}
.generalRight .options {
background: #A6E5FC;
border: 1px solid #A7D6FF;
}
.generalRight .options input.button {
border: none;
background: transparent;
}
.generalRight .options a.button,
.generalRight .options input.button {
color: #333333;
display: block;
cursor: pointer;
margin: 0;
border-bottom: 1px solid #a4d5ff;
padding: 12px 11px;
}
.generalRight .options input:hover {
text-decoration: underline;
}
.generalRight .options a.button:last-child {
border-bottom: none !important;
}
.generalRight .options a.button:hover {
color: #000000;
background: #c2ebff;
border-bottom: 1px solid #99d7ff;
}
.generalRight .options .small {
font-size: 95%;
padding-right: 2px;
}
.generalRight .label {
background: #b1e6ff;
border: 1px solid #8bc4e9;
}
.generalRight .searchBar {
background: #ffffff;
border: none;
padding: 0;
margin-top: 20px;
}
.generalRight .searchBar input {
margin-left: 0;
padding-left: 10px;
}
.generalRight .chat:hover {
background: #f1f1f1;
}
.generalRight .setOfOptions {
max-width: 300px;
}
.generalRight .setOfOptions .entry {
background: transparent;
border-bottom: 1px solid #dbdbdb;
}
.generalRight .importantOptions a.entry {
background: #FFF4AC;
color: #000;
}
.generalRight .info {
padding: 12px 11px;
color: #777777;
font-style: italic;
background: #ffffff;
}
.generalRight .msInfo {
margin-top: 10px;
}
.generalRight .subInfo {
padding: 12px 11px;
color: #777777;
font-style: italic;
}
.generalRight.settings a.entry.active {
background: #FF9933;
color: #ffffff;
}
.generalRight .options a.disabled {
text-decoration: line-through;
}
/* Footer */
#footer {
color: #6e6e6e;
padding-top: 20px;
width: 100%;
}
#footer a:hover {
text-decoration: underline;
color: #306cb8;
}
#footer a {
cursor: pointer;
}
#footer .mid {
color: #9d9d9d;
width: 100%;
line-height: 180%;
}
#footer .mid a {
margin: 0 7px 0 6px;
color: #aaaaaa;
}
#footer .mid a.fade {
color: #6e6e6e;
}
.userSearchLeft {
width: 220px;
margin-bottom: 10px;
float: left;
}
.userSearchLeft form {
padding-bottom: 15px;
display: block;
}
.userSearchLeft .text {
float: left;
display: block;
background: #ffffff;
text-indent: 5px;
border: 1px solid #c7c7c7;
width: 183px;
font-size: 11px;
padding: 3px;
height: 20px;
}
.userSearchLeft .send {
float: left;
display: block;
background: url(//s.jappy.com/i/icon/bg/userSearch.png) no-repeat 50% -2px #bcbdbd;
border: 1px solid #a9a9a9;
border-top: 1px solid #a9a9a9;
border-left: 1px solid #a9a9a9;
padding: 3px;
width: 29px;
}
/* Suche Gruppen, Result User Search.html */
.newEntries {
display: block;
background: #ec6449;
border: 1px solid #c7452b;
text-align: center;
border-radius: 50%;
height: 12px;
width: 12px;
font-size: 12px;
color: #ffffff !important;
padding: 3px;
font-weight: normal;
}
.draftLayer {
background: #424242;
border: 1px solid #333;
font-weight: 600;
border-radius: 15px;
box-shadow: 0 2px 2px #cacaca;
width: 270px;
}
.draftList dl,
.draftList dt,
.draftList dd {
margin: 0;
padding: 0;
}
.draftList dl {
padding: 10px;
}
.draftList dt {
padding: 10px;
cursor: pointer;
color: #ffffff;
}
.draftList dt:hover {
background: #494949;
border-radius: 10px;
transform: scale(1.1);
transition: 0.3s;
}
.draftList dd {
margin-left: 20px;
padding: 5px;
}
.draftList li {
list-style: none;
margin: 0;
padding: 5px;
}
/* Freundesliste erstellen */
.userSelector .entry {
width: 100%;
border-bottom: 1px solid #f1f1f1;
}
.userSelector .entry label {
display: block;
}
.userSelector .entry.user label {
height: 40px;
width: 140px;
}
.userSelector .entry:hover {
background: #e1e1e1;
}
.userSelector .entry .plain {
float: left;
width: 70%;
padding: 2px 1%;
}
.userSelector .entry .option {
float: left;
width: 20px;
padding: 2px 0;
margin-left: 15px;
}
.userSelector .headline {
padding: 5px 15px;
font-weight: bold;
}
.userSelector .entry.user {
width: 240px;
padding-top: 2px;
padding-bottom: 2px;
}
.userSelector .entry.user .plain {
width: 200px;
padding: 0;
}
.userSelector .entry .picture {
float: left;
width: 50px;
}
.userSelector .entry .picture img {
width: 40px;
}
.userSelector .entry .username {
float: left;
width: 150px;
}
#userSelection .entry .selection img,
#usSearchResult .entry .selection img {
display: none;
}
#userSelection .entry.selected .selection img,
#usSearchResult .entry.selected .selection img {
display: block;
}
#userSelection .entry.selected,
#usSearchResult .entry.selected {
opacity: 1;
}
img.no {
border-bottom: 3px solid #9cdc31;
}
img.ni {
border-bottom: 3px solid #f1f1f1;
}
img.na {
border-bottom: 3px solid #999999;
}
img.nx {
border-bottom: 3px solid #b2b2b2;
}
img.profileImageOnline {
border: 2px solid #90cc00;
}
img.profileImageOffline {
border: 1px solid #ffffff;
}
img.profileImageBlocked {
border: 1px solid #333333;
}
img.profileImagePush {
border: 1px solid #33b5e5;
}
/* Scrollbars Blättern*/
.nvG {
padding: 7px 0 4px 0;
margin-top: 10px;
width: 100%;
line-height: 120%;
}
.nvG select {
border: 1px solid #cecdce;
padding: 10px 7px;
line-height: 22px;
float: left;
margin: 0 5px 0 5px;
}
.nvG .numberOfEntries {
float: left;
display: none;
overflow: hidden;
text-indent: 42px;
width: 150px;
font-size: 12px;
color: #666666;
text-align: left;
text-indent: 15px;
padding: 0;
padding-top: 7px;
border: none;
}
.nvG .pages {
float: left;
width: auto;
}
.nvG .firstPage {
float: right;
width: 110px;
text-align: center;
font-size: 90%;
padding-top: 5px;
display: none;
}
.nvG .buttonDefault {
float: left;
}
.nvG.reduced .numberOfEntries,
.nvG.reduced .firstPage {
display: none;
}
.nvG.reduced .pages {
width: 100%;
text-align: center;
}
.nvG .spacer {
width: 68px;
float: left;
}
.hlG1,
.hlG3 {
font-size: 120%;
line-height: 130%;
margin-bottom: 8px;
padding: 10px 0 7px 15px;
color: #676767;
}
.hlG3 {
margin-left: 15px;
padding-bottom: 2px;
}
.hlG2 {
padding: 10px;
font-weight: bold;
padding-left: 0;
font-size: 120%;
}
.hlG4 {
padding: 5px;
padding-top: 10px;
padding-left: 0;
background: #dbdbdb;
font-size: 14px;
}
.hlM1 {
text-transform: uppercase;
font-size: 11px;
color: #555555;
padding: 10px 0 7px 0;
}
/* quote */
.defaultQuote {
width: 100%;
border-left: 3px solid #61a3ff;
}
.defaultQuote .quoteHeadline {
font-weight: 800;
color: #61a3ff;
padding: 5px 10px;
text-align: left;
}
.defaultQuote .quoteText {
padding: 15px 10px;
}
.fuQh {
width: 100%;
text-indent: 10px;
background: #3682c3;
color: #FFFFFF;
}
/* Einstellungen ...*/
.settingsFull {
padding: 15px;
background: #ffffff;
display: block;
box-shadow: 0 2px 2px #cacaca;
border-radius: 2px;
}
.settingsFull .headline {
font-size: 140%;
padding: 5px 0 6px 0;
color: #666666;
}
.settingsFull .headline.big {
font-size: 130%;
padding-top: 10px;
}
.settingsFull .inputFull,
.settingsFull select {
width: 90%;
border: 1px solid #e1e1e1;
border-top: 1px solid #bebebe;
border-left: 1px solid #bebebe;
padding: 3px 5px;
}
.textareaDefault {
width: 80%;
padding: 5px;
border: 1px solid #a3a3a3;
}
.settingsFull .line {
padding: 3px 0 12px 0;
margin-bottom: 10px;
}
.settingsFull .inputFull.blue {
border: 1px solid #1579ce;
}
.settingsFull .line.dark .inputFull {
border: 1px solid #333333;
border-top: 1px solid #000000;
border-left: 1px solid #000000;
}
.settingsFull .line.multi,
.settingsFull .headline.multi {
padding-bottom: 5px;
margin-bottom: 0;
}
.settingsFull .subtext {
padding-top: 5px;
font-size: 90%;
color: #666666;
margin-left: 3px;
}
.settingsFull .nvG select {
width: auto;
}
.settingsFull .password {
border: 1px dotted #ff8888;
width: 300px;
background: #FFFFFF;
}
.settingsFull.dark {
background: #CDCDCD;
margin-bottom: 9px;
padding-bottom: 3px;
padding-top: 4px;
border: 1px solid #A9A9A9;
}
.settingsFull.dark .inputFull {
width: 516px;
border: 1px solid #A9A9A9;
}
.settingsFull.dark .line,
.settingsFull.dark .headline {
padding-left: 10px;
}
.settingsFull.dark .button {
border: 1px solid #A9A9A9 !important;
}
.settingsFull.dark .actionSelector .button:first-child {
margin-left: 10px;
margin-right: 10px;
}
.settingsFull.dark .actionSelector .blue {
border: 1px solid #1a7bd7 !important;
}
/* Editor */
.editor {
padding-bottom: 5px;
}
.editor .features {
float: left;
}
.editor .features.additionalHidden a.additional {
display: none;
}
.editor .features a {
text-decoration: none;
padding: 1px 0 1px 5px;
cursor: pointer;
display: block;
float: left;
}
.editor .features a img {
max-width: 25px;
}
.editor .features a:hover {
background: #ffda69;
border-radius: 5px;
}
.editor .features a.active {
background: #ffffff;
border-radius: 5px;
}
.editor .settingsFull {
padding-top: 10px;
}
.editor .settingsFull .inputFull {
width: 450px;
border: 1px solid #A9A9A9;
}
.editor .settingsFull .headline {
padding-left: 10px;
font-size: 80%;
}
.editor .settingsFull .line {
padding-left: 10px;
padding-bottom: 2px;
margin: 0;
}
.editor .settingsFull .actionSelector {
padding-left: 10px;
width: 600px;
}
.editor .settingsFull .subtext {
padding-left: 10px;
text-align: right;
}
.editor .smilies .more {
float: left;
height: 27px;
width: 25px;
padding: 2px 0;
cursor: pointer;
text-align: center;
border-radius: 5px;
opacity: 0.7;
}
.editor .smilies .more:hover {
background: #ffffff;
opacity: 1.0;
transform: scale(1.1);
transition: 0.3s;
}
.editor .smilies .more img {
margin-top: 0px;
width: 22px;
opacity: 0.7;
}
.mailboxCompose .editor .smilies .more img {
margin-top: 3px;
}
.editor .smilies a:hover {
border-bottom: 2px solid #bfbfbf;
}
.textOptionsLedge {
display: block;
float: left;
padding: 5px;
}
.textOptionsLedge a {
padding: 7px 5px;
opacity: 0.3;
float: left;
border-radius: 5px;
text-align: center;
margin-right: 2px;
}
.textOptionsLedge a:hover {
background: #ffd237;
transition: 0.3s;
opacity: 1.0;
transform: scale(1.1);
}
.textOptionsLedge a img {
width: 22px;
height: 22px;
}
.smoothFadeIn {
display: block;
animation: overshotFadeIn 0.2s ease-in forwards;
}
.ledgeToggle {
float: left;
display: none;
padding: 2px;
margin: 3px;
margin-top: 5px;
border-radius: 10px;
margin-left: 10px;
opacity: 0.7;
background: #808080;
}
.ledgeToggle img {
width: 24px;
height: 24px;
}
.editorLayer {
text-align: left;
background: #6ad6ff;
border: 3px solid #52cdfc;
box-shadow: 1px 1px 2px #55cdfb;
line-height: normal;
border-radius: 5px;
padding: 3px;
}
.editorColorSelection {
width: 170px;
}
.editorColorSelection a {
display: block;
width: 20px;
height: 20px;
margin: 1px;
float: left;
border: 1px solid #ffffff;
border-radius: 50%;
}
.editorColorSelection a:hover {
border: 1px solid #52cdfc;
}
.editorLayer.list a {
display: block;
padding: 10px;
font-weight: 700;
border-radius: 5px;
margin-bottom: 3px;
text-decoration: none;
color: #ffffff;
background: #2095c1;
}
.editorLayer.list a:hover {
background: #ffda69;
color: #000000;
}
/* Message */
.msInfo,
.msInfoSmall {
margin: 0 0 15px 0;
max-width: 700px;
background: #ffe178;
border-top: 4px solid #ffc119;
color: #96770c;
line-height: 140%;
padding: 25px;
font-size: 110%;
}
.msInfo .headline {
color: #000000;
font-weight: 500;
font-size: 120%;
padding: 0 !important;
padding-bottom: 7px !important;
margin: 0 !important;
}
.msInfo hr {
color: #ffc119;
border: 0px;
background: #ffc119;
height: 1px;
}
.msInfo.white {
background: #ffffff;
border-top: none;
border-right: none;
color: #333333;
}
.msInfo .blockLink {
display: block;
padding: 6px 0;
}
.msInfo.first {
margin-top: 3px;
}
.msInfo.marginTop {
margin-top: 5px;
}
.msInfo a {
color: #00b1d0;
}
.msLayerInfo {
width: 100%;
bottom: 100px;
position: fixed;
z-index: 200;
margin: auto;
left: 0;
}
.msLayerInfo .wrapper {
background: #ffffff;
border-radius: 10px;
}
.selectionRadio {
border-radius: 5px;
margin-bottom: 10px;
padding-top: 5px;
line-height: 120%;
}
.selectionRadio div {
padding: 5px;
}
.selectionRadio input {
vertical-align: text-bottom;
}
.selectionRadio div:last-child {
border: none;
}
.selectionRadio label {
margin-left: 5px;
color: #686868;
font-weight: 300;
cursor: pointer !important;
}
.selectionRadio .subinfo {
font-size: 90%;
color: #666666;
}
table {
border-collapse: collapse;
width: 100%;
line-height: 140%;
}
table.boW1 {
margin-bottom: 10px;
}
table td {
padding: 10px 10px 10px 15px;
vertical-align: top;
}
table td {
border: none;
}
table th {
text-align: left;
color: #666666;
line-height: 30px;
padding: 10px 10px 10px 15px;
font-weight: 700;
text-transform: uppercase;
}
table.setting td {
padding: 14px 3px 12px 10px;
}
table.setting {
margin-top: 10px;
}
table caption {
text-align: left;
padding: 5px 0 5px 15px;
font-size: 14px;
color: #333333;
}
table tr {
border-bottom: none;
}
.boW1 tr:hover {
background: #f1f1f1;
}
/* Content melden*/
.pageFooterLinks {
padding: 15px;
padding-left: 0;
margin-top: 15px;
margin-left: 0px;
line-height: 130%;
padding-bottom: 70px;
}
.pageFooterLinks h1 {
color: #aaaaaa;
font-size: 100%;
}
.pageFooterLinks img {
vertical-align: middle;
margin-left: 0;
}
.pageFooterLinks a {
display: block;
padding-top: 6px;
padding-bottom: 5px;
font-size: 110%;
font-weight: 600;
color: #00b7cc;
}
/* Stream - pictureLayer */
.pictureLayer {
width: 100%;
height: 100%;
text-align: center;
}
.pictureLayer .picture {
margin-top: 60px;
}
.pictureLayerBackground {
background: #333333;
width: 100%;
}
/* Tickerbearbeiten, alte Mailbox, GB */
.composeMedium {
width: 360px;
}
.composeMedium .textareaCompose {
width: 340px;
height: 82px;
color: #000000;
border: 1px solid #28AADA;
padding: 10px 10px;
font-size: 110%;
}
.composeMedium .searchRecipient {
width: 538px;
height: 45px;
background: #cdcdcd;
padding: 15px 5px 5px 5px;
border: 1px solid #BCBCBC;
margin-bottom: 10px;
border-bottom: 1px solid #ACACAC;
border-right: 1px solid #ACACAC;
}
.composeMedium .searchRecipient .headline {
padding: 5px;
padding-top: 13px;
color: #5e5e5e;
text-align: right;
float: left;
width: 55px;
}
.composeMedium .searchRecipient .form {
padding: 5px;
float: left;
width: 458px;
height: 40px;
}
.composeMedium .searchRecipient .assume {
position: relative;
left: 300px;
top: -53px;
font-style: italic;
width: 100px;
color: #ababab;
font-size: 11px;
cursor: pointer;
}
.composeMedium .searchRecipient .inFake {
background: #ffffff;
width: 448px;
padding: 2px 5px;
height: 25px;
border: 1px solid #b8b8b8;
border-top: 1px solid #929292;
}
.composeMedium .editor {
border-bottom: none;
}
.composeMedium .wrapperEditor {
border-bottom: 1px solid #BCBCBC;
background: #cdcdcd;
}
.composeMedium .features {
display: none;
}
/* Gästebuch, ModTools, Mail melden */
.listOfActions {
padding: 5px 0 5px 15px;
}
.listOfActions .button,
.listOfActions button,
.listOfActions input {
float: right;
color: #585858;
cursor: pointer;
font-size: 100%;
padding: 7px 13px;
margin: 0;
border-radius: 3px;
margin-right: 3px;
display: block;
background: #f1f1f1;
border: 1px solid #cfcfcf;
border-right: 1px solid #c2c2c2;
border-bottom: 1px solid #c2c2c2;
}
.listOfActions img {
vertical-align: text-bottom;
}
.listOfActions .button.blue {
background: #b0dbff;
border: 1px solid #90c4f1;
color: #333;
font-weight: bold;
}
.listOfActions .button:hover,
.listOfStreamActions button:hover,
.listOfActions input:hover,
.listOfActions a:hover {
border: 1px solid #333333;
border-left: 1px solid #676767;
border-top: 1px solid #676767;
}
.listOfActions .icIcon {
margin: 0;
}
.listOfActions .button.side {
float: right;
border: none;
background: none;
padding: 7px 10px;
}
.listOfActions .button.details {
border: none;
background: none;
}
.listOfActions .button.side:hover,
.listOfActions .button.details:hover {
background: #CDCDCD;
}
.listOfActions .button.side img {
margin: 0;
width: 12px !important;
}
.listOfActions .button.buttonComment {
background: url(//s.jappy.com/i/bg/bgStreamBlue.png) repeat-x #4a95dd;
border: 1px solid #3373b0;
border-top: 1px solid #448cd1;
border-left: 1px solid #448cd1;
color: #ffffff;
padding: 8px 15px;
font-weight: bold;
font-size: 110%;
}
.listOfActions a.buttonComment:hover {
background: #55a1eb;
border: 1px solid #24639f;
}
.listOfActions .button.red {
background: #D64E4E;
border: 1px solid #D64E4E;
color: #f1f1f1;
float: right;
font-size: 11px;
padding-left: 9px;
box-shadow: 1px 1px 2px 0 #D0D0D0;
}
.listOfActions .disabled {
color: #757575;
text-decoration: line-through;
}
.listOfActions .button.red .icCheckbox {
background-position: -850px -650px;
}
.listOfActions .button.red:hover {
background: #ac3535;
border: 1px solid #333333;
border-left: 1px solid #676767;
border-top: 1px solid #676767;
}
.listOfActions .disabled {
color: #757575;
text-decoration: line-through;
}
/* Ticker Follower */
.listOfFollowers {
margin-left: 15px;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #e1e1e1;
}
.listOfFollowers .entry {
float: left;
width: 200px;
margin-top: 5px;
}
.listOfFollowers .entry .picture {
float: left;
width: 50px;
}
.listOfFollowers .entry .picture img {
width: 45px;
height: 45px;
vertical-align: text-bottom;
}
.listOfFollowers .entry .stamp {
float: left;
width: 150px;
padding-top: 10px;
}
/* Mainstream Kommentierung */
.commentToggle {
float: right;
}
.commentToggle img {
cursor: pointer;
}
/* locationDp */
.locationRegistrationDp,
.locationSettingsDp {
width: 248px;
background: #ffffff;
border-left: 1px solid #999999;
border-right: 1px solid #e1e1e1;
border-bottom: 1px solid #999999;
}
.locationRegistrationDp .entry,
.locationSettingsDp .entry {
padding: 5px;
border-bottom: 1px solid #ffffff;
}
.locationRegistrationDp .entry.hover,
.locationSettingsDp .entry.hover {
background: #444444;
color: #ffffff;
border-bottom: 1px solid #242424;
cursor: pointer;
}
.locationRegistrationDp {
width: 400px;
border-right: 1px solid #c1c1c1;
border-top: 1px solid #e1e1e1;
}
/* Regelverstoß melden */
.reportedContent {
margin: 0 0 10px 0;
background: #fffee0;
border: 1px solid #efefef;
padding: 10px;
}
.suggestFeatures {
float: right;
margin-right: 10px;
margin-top: 5px;
z-index: 2;
}
.suggestFeatures .feature {
float: left;
margin-left: 10px;
}
.suggestFeatures .feature img {
width: 35px;
filter: grayscale(100%);
opacity: 0.7;
cursor: pointer;
}
.suggestFeatures .feature:hover img {
filter: none;
opacity: 1;
transform: scale(1.05);
transition: 0.3s;
}
.staticIcon {
min-width: 15px;
min-height: 15px;
background-size: contain;
background-repeat: no-repeat;
margin-right: 5px;
}
.chatHeads {
text-align: center;
}
.chatHeads img {
width: 25px;
height: 25px;
border-radius: 50%;
}
.giftsSection .stream {
width: 100%;
}
.giftsSection .stream .entry {
float: left;
}
/* Layerhintergründe iE */
.defaultLayerBackground {
position: fixed;
top: 0;
left: 0;
background: #333333;
width: 100%;
opacity: 0.9;
-moz-opacity: 0.9;
-khtml-opacity: 0.9;
height: 100%;
}
.tickerLayerBackground {
position: fixed;
animation: zoomIn 0.5s forwards;
top: 0;
left: 0;
background: #4e4e4e;
width: 100%;
touch-action: none;
width: 100vw;
}
.emotionLayerBackground {
position: fixed;
top: 0;
left: 0;
background: #333333;
width: 100%;
opacity: 0.6;
-moz-opacity: 0.6;
-khtml-opacity: 0.6;
}
.comLayerBackground {
position: fixed;
top: 0;
left: 0;
background: #333333;
width: 100%;
opacity: 0.6;
-moz-opacity: 0.6;
-khtml-opacity: 0.6;
}
.imageViewerBackground {
position: fixed;
top: 0;
left: 0;
background: #333333;
width: 100%;
}
.teamNotice {
background: #ffa3a3;
}
.teamNotice .text {
padding: 10px;
}
/* AGBs */
.infosTerms {
padding: 15px;
font-size: 130%;
line-height: 160%;
text-align: justify;
font-weight: 300;
}
.infosTerms .headline {
font-size: 130%;
padding-top: 10px;
padding-bottom: 5px;
margin: 20px 0 10px 0;
font-weight: 700;
}
.infosTerms .subHeadline {
font-size: 110%;
padding-top: 20px;
padding-bottom: 5px;
margin: 20px 0 10px 0;
font-weight: 400;
}
.infosTerms .listOfCompanies .title {
font-size: 120%;
font-weight: 700;
}
.infosTerms .listOfCompanies .entry {
margin-bottom: 20px;
margin-top: 10px;
padding-bottom: 5px;
border-bottom: 1px solid #dddddd;
}
.layerEmoji {
position: fixed !important;
left: auto !important;
right: 10px !important;
bottom: 20px !important;
top: auto !important;
}
.emojiLayer {
background: #ffffff;
border: 2px solid #f9c925;
clear: both;
box-shadow: 0 5px 10px #cccccc;
width: 360px;
border-radius: 10px;
animation: overshotFadeIn 0.3s ease-in forwards;
}
.emojiLayer .categories {
text-align: center;
padding: 5px;
}
.emojiLayer .categories img {
width: 28px;
padding: 4px;
margin: 1px 3px;
border-bottom: 3px solid #e5e5e5;
}
.emojiLayer .categories img:hover {
background: #ffffff;
cursor: pointer;
border-radius: 5px;
}
.emojiLayer .categories img.active {
border-bottom: 3px solid #ffb756;
}
.emojiLayer .categoryTitle {
font-size: 120%;
font-weight: 700;
padding: 5px 0;
padding-top: 15px;
}
.emojiLayer .listOfEmojis {
background: #ffffff;
padding-left: 15px;
height: 230px;
overflow-y: scroll;
}
.emojiLayer .listOfEmojis .emoji {
padding: 2%;
height: 3em;
width: 3em;
cursor: pointer;
}
.emojiLayer .listOfEmojis .emoji:hover {
background: #ffedb0;
border-radius: 5px;
transition: 0.3s;
transform: scale(1.1);
}
.emojiLayer .search {
background: #ffffff;
padding: 5px 15px;
padding-bottom: 0;
}
.emojiLayer .search input {
width: 92%;
border-radius: 15px;
border: 1px solid #f1f1f1;
padding: 7px 10px;
}
.emojiLayer .toneSelector {
padding-top: 5px;
padding-bottom: 5px;
padding-left: 15px;
background: #333333;
display: none;
}
.emojiLayer .toneSelector .tone {
border-radius: 10px;
width: 3em;
height: 3em;
padding: 2%;
cursor: pointer;
display: inline-block;
}
.emojiLayer .toneSelector .tone:hover {
background: #ffffff;
}
.emojiLayer .toneSelector .tone span {
background: #ffcc4d;
width: calc(100% - 12px);
height: calc(100% - 12px);
margin: 6px;
border-radius: 5px;
border: none;
display: inline-block;
min-width: 20px;
}
.emojiLayer .toneSelector .tone span#st1f3fb {
background: #f7dece;
}
.emojiLayer .toneSelector .tone span#st1f3fc {
background: #f3d2a2;
}
.emojiLayer .toneSelector .tone span#st1f3fd {
background: #d5ab88;
}
.emojiLayer .toneSelector .tone span#st1f3fe {
background: #af7e57;
}
.emojiLayer .toneSelector .tone span#st1f3ff {
background: #7c533e;
}
.emojiLayer .emojiFooter {
width: 100%;
padding-bottom: 5px;
}
.emojiLayer .emojiFooter .actions {
float: left;
padding-left: 15px;
padding-bottom: 5px;
margin-top: 15px;
}
.emojiLayer .emojiFooter .actions img {
padding: 2%;
height: 3em;
width: 3em;
cursor: pointer;
}
.emojiLayer .emojiFooter .actions img:hover {
background: #a79387;
border-radius: 50%;
}
.emojiLayer .emojiFooter .close {
float: right;
margin-right: 15px;
margin-top: 20px;
cursor: pointer;
}
.emojiLayer .emojiFooter .close img {
width: 20px;
}
.emojiLayer .emojiFooter .close:hover {
transition: 0.3s;
transform: scale(1.1);
}
.emoji {
height: 1.5em;
line-height: 1.5em;
width: 1.5em;
margin-left: 1px;
margin-right: 1px;
}
.emojiSelector {
background: #e5e5e5;
border: 1px solid #a6a6a6;
clear: both;
box-shadow: 0 5px 10px #cccccc;
width: 360px;
border-radius: 10px;
}
.emojiSelector .emoji {
height: auto;
}
.emojiSelector.emojiOffset30 {
margin-top: 30px;
}
.emojiSelector .categorySelector {
height: 2em;
text-align: center;
}
.emojiSelector .categorySelector div {
display: inline-block;
text-align: center;
width: 35px !important;
overflow: hidden;
padding: 12px 0px;
font-weight: 300;
float: left;
}
.emojiSelector .categorySelector div:first-child {
margin-left: 10px;
}
.emojiSelector .categorySelector div:hover {
background: #FDD978;
cursor: pointer;
}
.emojiSelector .categorySelector div.active {
border-bottom: 3px solid #ffa225;
}
.emojiSelector .emojiPager {
clear: left;
background: #ffffff;
height: 15em;
font-size: 1.5em;
padding: 10px;
overflow-x: hidden;
overflow-y: scroll;
}
.emojiSelector .emojiPager .emojiPage {
display: none;
}
.emojiSelector .emojiPager .emojiPage.active {
display: block;
}
.emojiSelector .emojiSelect {
cursor: pointer;
text-align: center;
width: 20px;
height: 20px;
border: 1px solid #ffffff;
padding: 9px;
border-radius: 5px;
display: block;
float: left;
}
.emojiSelector .emojiSelect:hover {
background: #ffedb0;
border: 1px solid #fde9a7;
border-radius: 5px;
}
.emojiSelector .category {
width: 20px;
}
.emojiSelector .info .emojiTag {
float: right;
padding: 5px;
margin-right: 10px;
}
.emojiSelector .info .emojiTag .icon {
float: left;
padding: 0 10px;
min-height: 30px;
margin-top: 5px;
}
.emojiSelector .info .emojiTag .icon .emoji {
height: 35px;
width: 35px;
}
.emojiSelector .info .emojiTag .tag {
float: left;
padding: 15px 10px;
font-weight: 600;
color: #9a9a9a;
font-size: 110%;
}
.layerSmilies.layerEmojis {
margin-top: -402px;
}
.layerEmojis .emojiSelector {
margin-top: 0px;
}
.emojiSelect {
display: block;
float: left;
padding: 4px 2px;
}
.emojiSelect:hover {
background: #ffffff;
cursor: pointer;
border-radius: 5px;
transform: scale(1.1);
transition: 0.3s;
}
.emojiLayerBackground {
width: 100%;
height: 100%;
background: #000000;
opacity: 0.1;
}
.emojiSelectorLayer {
text-align: center;
}
.fixedAvailable .emojiSelectorLayer {
position: fixed !important;
left: auto !important;
top: auto !important;
right: 20px;
bottom: 50px;
}
/* #profile */
.profileMobileActions,
a.profileMobileActions {
display: block;
animation: showMobileActionButton 0.6s;
transition: 0.5s;
animation-timing-function: ease-in;
position: fixed;
z-index: 6000;
bottom: 70px;
right: 10px;
width: 35px;
height: 35px;
border-radius: 50%;
background: #ffa225;
text-align: center;
padding: 10px;
border: 1px solid #f59a20;
}
.profileMobileActions img {
width: 35px;
height: 35px;
vertical-align: text-bottom;
}
.profileBox {
width: 100%;
background: #333333;
}
.profileBox .profileImageBackground {
width: 100%;
float: left;
}
.profileImageFrame.female2 {
background: #ff6ed7;
}
.profileImageFrame.female2 .profileImageBackground {
background: #ff49ce;
}
.profileSubActions {
padding-left: 11px;
display: none;
}
.profileTopActions button {
background: transparent;
text-align: left;
font-size: 12px;
font-weight: 300;
line-height: 1em;
}
.profileMobileOptions .profileTopActions {
display: block;
animation: showMobileActions 0.5s;
position: fixed;
width: 100%;
margin-top: 100px;
background: transparent;
}
.profileMobileOptions .profileTopActions a .icon,
.profileMobileOptions .profileTopActions button .icon {
background: #ffa225;
padding: 5px;
width: 50px;
margin-left: 10px;
}
.profileMobileOptions .profileTopActions a .text,
.profileMobileOptions .profileTopActions button .text {
padding: 20px 0 15px 20px;
font-size: 150%;
font-weight: 600;
}
.profileMobileOptions .profileTopActions a,
.profileMobileOptions .profileTopActions button {
margin-top: 15px;
}
.profileSubActions a.entry,
.profileSubActions .entry {
display: block;
float: right;
margin-top: 20px;
padding: 2px;
border-radius: 50%;
cursor: pointer;
margin-left: 4px;
}
.profileSubActions a.entry.addGuestbookEntry {
background: #97c224;
}
.profileSubActions a:hover,
.profileSubActions .entry:hover {
background: #000000 !important;
}
.profileSubActions .statsFollower {
position: absolute;
font-size: 90%;
color: #ffffff;
background: #FF9613;
padding: 2px;
margin-left: 9px;
border-radius: 5px;
margin-top: -10px;
}
.profileActions {
float: left;
}
.profileImageRound {
text-align: center;
z-index: 2;
position: relative;
}
.profileImageRound img {
width: 150px;
height: 150px;
border-radius: 50%;
border: 4px solid #ffffff;
}
.profileImageRound img.protection {
border: none;
}
.profileImageRound.online img {
border-color: #90cc00;
}
.profileImageRound.appUser img {
border-color: #33b5e5;
}
.profileImageRound .imagePending {
position: absolute;
z-index: 11;
margin-left: 53px;
top: 120px;
color: #ffffff;
font-size: 70%;
}
.profileImageRound:hover img {
border-color: #e17c00 !important;
}
.profileStartFrame {
text-align: center;
width: 100%;
padding-top: 20px;
}
.profileStart {
margin: auto;
}
.profileStart .profileImageRound img {
width: 150px;
height: 150px;
border-radius: 50%;
border: 4px solid #ffffff;
}
.profileStart .profileImageRound img.protection {
border: none;
}
.profileStartFrame .profileImageRound img {
width: 150px;
height: 150px;
border-radius: 50%;
border: 4px solid #ffffff;
}
.profileStartFrame .profileImageRound img.protection {
border: none;
}
.profileStartpage {
display: grid;
grid-template-columns: 50% 50%;
grid-gap: 10px 30px;
max-width: 720px;
}
.profileTicker {
max-width: 750px;
margin-left: 20px;
}
.profileTickerEcho {
max-width: 750px;
margin-left: 20px;
}
.profileStartpage .pinArea {
grid-column: 1 / span 1;
grid-row: 1 / span 5;
}
.profileStartpage .giftPreview {
grid-column: 2 / span 1;
grid-row: 1 / span 1;
}
.profileStartpage .emotionPreview {
grid-column: 2 / span 1;
grid-row: 2 / span 1;
}
.profileStartpage .achievementPreview {
grid-column: 2 / span 1;
grid-row: 3 / span 1;
}
.profileStartpage.emptyPinBox .pinArea {
grid-column: 1 / span 1;
grid-row: 1 / span 1;
}
.profileStartpage.emptyPinBox .giftPreview {
grid-column: 2 / span 1;
grid-row: 1 / span 1;
}
.profileStartpage.emptyPinBox .emotionPreview {
grid-column: 1 / span 1;
grid-row: 2 / span 1;
}
.profileStartpage.emptyPinBox .achievementPreview {
grid-column: 2 / span 1;
grid-row: 2 / span 1;
}
@media screen and (max-width: 770px) {
.profileStartpage {
grid-template-columns: 100%;
}
.profileStartpage .pinArea {
grid-column: 1 / span 1;
grid-row: 1 / span 1;
}
.profileStartpage .giftPreview {
grid-column: 1 / span 1;
grid-row: 2 / span 1;
}
.profileStartpage .emotionPreview {
grid-column: 1 / span 1;
grid-row: 3 / span 1;
}
.profileStartpage .achievementPreview {
grid-column: 1 / span 1;
grid-row: 4 / span 1;
}
.profileStartpage.emptyPinBox {
grid-template-columns: 100%;
}
.profileStartpage.emptyPinBox .pinArea {
grid-column: 1 / span 1;
grid-row: 1 / span 1;
}
.profileStartpage.emptyPinBox .giftPreview {
grid-column: 1 / span 1;
grid-row: 2 / span 1;
}
.profileStartpage.emptyPinBox .emotionPreview {
grid-column: 1 / span 1;
grid-row: 3 / span 1;
}
.profileStartpage.emptyPinBox .achievementPreview {
grid-column: 1 / span 1;
grid-row: 4 / span 1;
}
}
.profileTopActions {
display: flex;
width: auto !important;
margin: 0 20px 0 20px;
background: linear-gradient(90deg, #3c3c3c 0%, #151515 100%) !important;
padding: 10px 0 10px 10px;
border-radius: 0 !important;
border-bottom-left-radius: 15px !important;
border-bottom-right-radius: 15px !important;
}
.profileTopActions .entry {
display: block;
color: #ffffff;
margin-left: 10px;
cursor: pointer;
}
.profileTopActions .entry .icon {
margin-top: 5px;
float: left;
width: 40px;
filter: grayscale(0%);
}
.profileTopActions .entry .icon img {
width: 60%;
margin: 20%;
}
.profileTopActions .entry .text {
padding: 10px 0 10px 5px;
font-weight: 400;
font-size: 105%;
float: left;
}
.profileTopActions .entry.mailTo {
background: #ffdb38;
border-radius: 15px;
border: 3px solid #eac840;
padding: 5px 15px 0 10px;
color: #000000;
}
.profileTopActions .entry.mailTo .text {
font-weight: 900;
font-size: 110%;
padding: 12px 5px 10px 10px;
}
.profileTopActions .entry.mailTo:hover {
border: 3px solid #cfaf30;
transition: 0.3s;
color: #000000;
}
.profileTopActions .entry.mailTo.disabled {
background: #3c3c3c;
border: 3px solid #505050;
color: #949494;
}
.profileTopActions .entry.button {
border: 3px solid #505050;
border-radius: 15px;
padding-right: 20px;
padding-left: 5px;
}
.profileTopActions .entry.button:hover {
border: 3px solid #d8c172;
transition: 0.3s;
}
.profileTopActions .entry .sub {
font-size: 80%;
color: #818181;
padding-top: 5px;
font-weight: 300;
}
.profileTopActions .entry.disabled {
border: 3px solid #1b1b1b;
opacity: 0.7;
}
.profileTopActions .entry.single .text {
padding: 17px 0 10px 5px;
}
.profileTopActions .entry.disabled:hover {
border: 3px solid #1b1b1b;
}
.profileTopActions .showMore {
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
}
.profileTopActions .showMeMore {
margin-left: 10px;
padding: 7px 10px 7px 10px;
border-radius: 15px;
cursor: pointer;
}
.profileTopActions .showMeMore.active {
background: #434343;
}
.profileTopActions .showMeMore:hover {
background: #000000;
transition: 0.3s;
}
.profileTopActions .showMeMore img {
width: 25px;
margin-top: 5px;
}
.profileTopActions .showMore img {
width: 25px;
}
.profileTopActions .justInMobile {
display: none;
}
.profileDropDownActions .justInMobile {
display: none;
}
.profileDropDownActions {
display: block;
position: absolute;
margin: 0 20px 0 20px;
width: 240px !important;
box-shadow: 0 2px 2px #171717;
background: linear-gradient(90deg, #202020 0%, #151515 100%) !important;
padding: 10px 10px 10px 10px;
border-radius: 15px;
}
.profileDropDownActions > * {
display: block;
color: #ffffff;
background: transparent;
border: none;
font-size: 12px;
cursor: pointer;
}
.profileDropDownActions .icon {
margin-top: 5px;
float: left;
width: 40px;
filter: grayscale(0%);
}
.profileDropDownActions .icon img {
width: 60%;
margin: 20%;
}
.profileDropDownActions .text {
padding: 20px 0 10px 5px;
font-weight: 400;
font-size: 105%;
float: left;
}
.profileDropDownActions > *:hover {
background: #434343;
border-radius: 15px;
}
@media screen and (max-width: 770px) {
.profileTopActions {
margin: 0 !important;
padding-left: 5px;
}
.profileTopActions .justInMobile,
.profileTopActions .justInMobile > * {
display: block !important;
}
.profileTopActions .noneMobile,
.profileTopActions .noneMobile > * {
display: none !important;
}
.profileTopActions .icon {
display: none;
}
.profileDropDownActions.justInMobile,
.profileDropDownActions .justInMobile {
display: block !important;
}
.profileTopActions .justImageIfNecessary {
padding: 0 10px 0 10px !important;
}
.profileTopActions .justImageIfNecessary .icon {
display: block !important;
}
.profileTopActions .justImageIfNecessary .text {
display: none !important;
}
#profileExtraOptions {
right: 280px;
left: auto !important;
}
}
.profileFrame .msInfo {
margin-left: 20px;
margin-bottom: 0;
}
.profileNumberOfImages {
text-align: right;
position: absolute;
margin-left: 260px;
padding-top: 5px;
}
a.profileOwnerNumberOfImages {
float: right;
display: block;
width: 45px;
vertical-align: text-top;
color: #fff;
font-size: 80%;
}
a.profileOwnerNumberOfImages img {
width: 20px;
height: 20px;
vertical-align: text-bottom;
margin-bottom: -4px;
margin-right: 2px;
}
.profileFollow {
background: #ffffff;
border-radius: 10px;
margin-right: 80px;
margin-left: 80px;
margin-top: 2px;
}
.profileFollow a {
color: #a4a4a4;
float: left;
padding: 12px 0;
display: block;
width: 75px;
text-align: right;
}
.profileFollow .numberOfFollowers {
float: right;
padding: 4px 5px;
margin: 8px 4px;
font-size: 100%;
border-radius: 5px;
background: #FF7B35;
color: #ffffff;
font-weight: bold;
}
.profileFollow:hover {
background: #FDD978;
}
.profileSummary {
width: 100%;
text-align: center;
z-index: 10;
position: relative;
z-index: 3;
margin-top: 7px;
}
.profileSummary .nickname {
font-size: 220%;
font-weight: 900;
}
.profileSummary .nickname .preStamp {
display: none;
}
.profileSummary .basicData {
color: #ffffff;
font-weight: 300;
padding-top: 5px;
padding-bottom: 5px;
line-height: 1.5;
}
.profileSummary .basicData a {
color: #ffffff;
}
.profileSummary .basicData a:hover {
text-decoration: underline;
}
.profileSummary .stampOnline {
color: #ffffff;
padding: 0;
background: none;
}
.profileSummary .stampOffline {
color: #ffffff;
}
.profileSummary .stampBlocked {
background: #dfdfdf;
color: #b2b2b2;
font-style: italic;
}
.profileSections {
text-align: center;
margin-left: 10px;
margin-top: 0px;
width: 350px;
overflow: scroll;
}
.profileSections .wrap {
width: 730px;
}
.profileSections a {
float: left;
display: block;
width: 70px;
height: 25px;
margin: 5px;
padding: 5px 0;
text-align: center;
}
.profileSections a.active {
border-bottom: 5px solid #54a8f3;
}
.profileSections a span {
font-weight: 400;
}
.profileSections img {
width: 30px;
}
.profileSections a .text {
font-size: 90%;
padding-top: 10px;
color: #ffffff;
font-weight: bold;
}
.profileSections a .rankInfo {
position: relative;
margin-top: -45px;
color: #ffffff;
width: 70px;
font-weight: 400;
text-align: center;
}
/* Theme */
.selectTheme {
margin: auto;
}
.selectTheme label {
float: left;
width: 220px;
display: block;
padding: 10px;
margin: 5px;
border-radius: 3px;
font-size: 110%;
font-weight: 700;
}
.selectTheme .preview .background {
width: 120px;
cursor: pointer;
padding: 20px;
height: 90px;
font-weight: 500;
float: left;
margin-right: 10px;
border-radius: 10px;
background-size: auto 100%;
margin-bottom: 10px;
font-size: 110%;
border: 2px solid #e5e5e5;
}
.selectTheme .preview .background .text {
padding: 10px;
opacity: 0.8;
border-radius: 5px;
color: #ffffff;
}
.selectTheme .preview .background:hover {
border: 2px solid #62b5ff;
}
.selectTheme .selected .background {
border: 2px solid #333333 !important;
}
.themePreviewLayer {
width: 100%;
}
.themePreviewLayer .wrapper {
width: 750px;
margin: auto;
background: #ffffff;
padding: 20px;
border-radius: 10px;
border: 1px solid #b6b6b6;
}
.themePreviewLayer .button {
background: #ffa225;
border: 1px solid #ffa225;
margin: auto;
padding: 10px;
border-radius: 10px;
color: #ffffff;
font-weight: 600;
cursor: pointer;
}
.themePreviewLayer .button:hover {
border: 1px solid #62b5ff;
}
.themePreviewLayer .activate {
padding-top: 10px;
text-align: center;
}
.sectionTabs {
text-align: center;
background: #62b5ff;
width: 100%;
overflow: scroll;
font-weight: 400;
padding-top: 5px;
}
.sectionTabs .icon img {
width: 25px;
}
.sectionTabs .wrap {
width: 700px;
}
.sectionTabs a:first-child {
margin-left: 15px;
}
.sectionTabs a {
float: left;
display: block;
width: 70px;
height: 55px;
margin: 5px;
border-bottom: none;
padding: 5px 0;
text-align: center;
}
.sectionTabs a:hover {
background: #54a8f3;
}
.sectionTabs .text {
font-size: 90%;
padding-top: 10px;
color: #ffffff;
max-width: 70px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sectionTabs .active {
border-bottom: 5px solid #54a8f3;
font-weight: 700;
}
.sectionTabs span {
font-weight: 400;
}
.themePreviewBackground {
animation: backgroundFade 0.5s;
position: fixed !important;
background: #333333;
opacity: 0.3;
width: 100%;
height: 100%;
}
.sectionTabs.contacts {
background: #ffcd4c;
}
.sectionTabs.contacts a .text {
color: #b0810a;
}
.sectionTabs.contacts a.active {
border-bottom: 5px solid #b0810a;
}
.sectionTabs.contacts a:hover {
background: #eebf45;
}
.sectionTabs.shop {
background: #ffa949;
}
.sectionTabs.shop a .text {
color: #ffffff;
}
.sectionTabs.shop a.active {
border-bottom: 5px solid #dd8f38;
}
.sectionTabs.shop a:hover {
background: #dd8f38;
}
.sectionTabs a.rightEntry {
float: left;
}
.sectionTabs.chat {
background: #9bc727;
}
.sectionTabs.chat a.active {
border-bottom: 5px solid #ffffff;
}
.sectionTabs.chat a:hover {
background: #b2db43;
}
.profileStartpage {
width: 100%;
}
.profileStartpage .right {
display: block;
width: 360px;
}
.profileStartpage .welcome {
background: #ffffff;
margin-top: 10px;
margin-bottom: 10px;
font-size: 100%;
overflow: hidden;
line-height: 1.3;
border-radius: 10px;
}
.profileStartpage .welcome .wrapper {
padding: 15px;
}
.profileStartpage .welcome img {
max-width: 330px;
}
.profileStartpage .welcome .options {
margin-left: 310px;
width: 30px;
position: absolute;
z-index: 2;
margin-top: -5px;
}
.profileStartpage .welcome .options a {
display: block;
width: 30px;
height: 30px;
text-align: center;
}
.profileStartpage .welcome .options a:hover {
background: #FDD978;
border-radius: 50%;
}
.profileStartpage .welcome .options img {
width: 20px;
height: 20px;
margin-top: 5px;
}
.profileStartpage .iconBox {
background: #ffffff;
margin-top: 10px;
overflow: hidden;
padding-bottom: 10px;
border-radius: 10px;
}
.profileStartpage .iconBox .headline {
font-size: 100%;
font-weight: 800;
color: #000000;
display: block;
padding: 20px 0 10px 15px;
}
.profileStartpage .iconBox .headline span {
font-weight: 300;
}
.profileStartpage .iconBox .iconEntry {
float: left;
margin-right: 2px;
margin-bottom: 2px;
}
.profileStartpage .iconBox .iconEntry.pinned img {
filter: drop-shadow(0 0 5px rgba(253, 217, 120, 0.5));
}
.profileStartpage .iconBox .iconEntry:hover {
animation: intoFocusLight 0.5s forwards;
transition: 0.7s;
border-radius: 10px;
}
.profileStartpage .iconBox .iconEntry img {
width: 65px;
height: 50px;
background-size: auto 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
}
.profileStartpage .iconBox .iconEntry.gift img {
background-size: auto 90%;
}
.profileStartpage .iconBox .moreEntries {
display: block;
border-radius: 5px;
padding: 18px 0 13px 0;
background: #e5e5e5;
font-weight: 700;
width: 65px;
height: 19px;
color: #888888;
text-align: center;
}
.profileStartpage .iconBox .wrapper,
.profileStartpage .iconBox a.wrapper {
display: block;
width: 340px;
overflow: hidden;
margin-left: 15px;
}
.profileStartpage .iconBox a.calendar {
display: block;
color: #49ccff;
padding: 3px 0;
}
.profileStartpage .iconBox a.calendar .icon {
float: left;
width: 30px;
margin-left: 20px;
padding-top: 3px;
}
.profileStartpage .iconBox a.calendar .text {
float: left;
padding: 10px 5px 10px 10px;
text-align: left;
font-weight: 500;
}
.profileStartpage .more {
padding: 0 40px 5px 15px;
text-align: right;
}
.profileStartpage .more a {
color: #62b5ff;
}
.profileDetails a.entry.todo {
background: #ffe08d;
color: #333333;
display: block;
}
.profileHeadline {
padding: 2% 3%;
font-weight: 500;
font-size: 110%;
margin-top: 10px;
color: #333333;
}
.startData .emptyState {
padding-top: 30px;
background: #ffffff;
border-radius: 10px;
margin-top: 5px;
}
.startData .infosRankProfile {
padding: 10px;
}
.profileDetails .entry {
background: #ffffff;
overflow: hidden;
border-radius: 3px;
width: 94%;
margin: 3% 3%;
}
.profileDetails .entry .headline {
font-size: 110%;
width: 80%;
font-weight: 600;
padding: 4% 3% 2% 3%;
}
.profileDetails .entry .text {
font-size: 100%;
width: 94%;
padding: 0 3% 4% 3%;
}
.profileDetails .entry .options {
right: 30px;
width: 20px;
position: absolute;
z-index: 2;
margin-top: -30px;
text-align: center;
}
.profileDetails .entry .options a {
display: block;
width: 30px;
height: 30px;
}
.profileDetails .entry .options a:hover {
background: #FDD978;
border-radius: 50%;
}
.profileDetails .entry .options img {
width: 20px;
height: 20px;
margin-top: 5px;
}
.teamIcon {
background: #C7C7C7;
margin-left: 15px;
margin-top: 10px;
border-radius: 3px;
}
.teamIcon a {
display: block;
padding: 10px;
font-size: 120%;
color: #ffffff;
font-weight: 300;
}
.teamIcon img {
border-radius: 50%;
width: 15px;
height: 15px;
vertical-align: text-bottom;
border: 1px solid #ffffff;
}
.teamIcon img.smaragd {
background: #34AC9F;
}
.teamIcon img.thistle {
background: #f0d7f0;
}
.teamIcon img.silver {
background: #EAEAEA;
}
.teamIcon.userMod {
background: #9bc123;
border: 1px solid #8DB01D;
}
.teamIcon.vjp {
background: #FF9613;
border: 1px solid #E3830A;
}
.teamIcon.youth {
background: #b544d3;
border: 1px solid #A129C0;
}
.teamIcon.games {
background: #df4c5e;
border: 1px solid #C93A4B;
}
.teamIcon .leader {
font-size: 80%;
}
.moderationInfoBox {
margin-top: 10px;
margin-right: 5px;
border: 1px solid #d3d3d3;
overflow: hidden;
border-bottom: 1px solid #cacaca;
line-height: 17px;
background: #ecf6ff;
border: 1px solid #a8c0d4;
margin-bottom: 5px;
box-shadow: 0 2px 2px #cacaca;
border-radius: 3px;
}
.moderationInfoBox .wrapper {
padding: 15px;
}
.moderationInfoBox .wrapper img {
max-width: 520px;
}
.fadeOutPlaceholder {
text-align: center;
}
.fadeOutPlaceholder div {
height: 2px;
background: #59ffee;
margin: auto;
border-radius: 3px;
width: 100%;
animation-duration: 1s;
animation-name: fadeOutBellFeed;
animation-fill-mode: forwards;
}
.entryFrame .function {
float: right;
width: 20px;
padding-top: 25px;
text-align: center;
}
.entryFrame .function img {
opacity: 0.7;
}
.entryFrame .function:hover img {
cursor: pointer;
opacity: 1;
}
.profileBookmark {
margin-bottom: 15px;
margin-right: 20px;
padding: 10px 0;
background: #ffe077;
background: linear-gradient(120deg, #ffe46a 0, #ffdb38 100%);
border-radius: 15px;
border: 3px solid #edcc33;
}
.profileBookmark .textareaBookmark {
margin-left: 10px;
}
.profileBookmark .textareaBookmark textarea {
padding: 10px;
height: 30px;
margin-right: 10px;
resize: vertical;
width: 90%;
border-radius: 15px;
}
.profileBookmark .button {
margin-left: 2px;
margin-right: 2px;
}
/* ?? */
.right .noEntries {
padding: 10px 20px;
text-align: center;
font-weight: 300;
color: #999999;
}
/* Sofortfunktionen Profil */
.layerAddThis {
width: 100%;
padding-top: 30px;
background: #ffffff;
}
.layerAddThis .head .text {
float: left;
padding: 20px 30px;
font-size: 180%;
font-weight: 300;
color: #333333;
}
.layerAddThis .head .close {
float: right;
padding-right: 30px;
}
.layerAddThis .head .close img {
cursor: pointer;
}
.layerAddThis .actionSelector {
margin-left: 30px;
}
/* Headline für Shops mit Credits */
.shopSelectorHeadline {
padding: 10px 0 10px 0;
}
.shopSelectorHeadline .text {
float: left;
font-size: 130%;
padding: 10px;
font-weight: 600;
color: #333333;
max-width: 240px;
}
.shopSelectorHeadline .userImage {
float: left;
}
.shopSelectorHeadline .userImage img {
width: 40px;
border-radius: 50%;
}
.shopSelectorHeadline .nickname {
float: left;
font-size: 130%;
font-weight: 500;
padding: 10px;
}
.shopSelectorHeadline .myAccount {
float: right;
font-size: 160%;
font-weight: 700;
color: #484848;
}
.shopSelectorHeadline .myAccount a {
color: #4ecdff;
}
.shopSelectorHeadline .myAccount img {
width: 40px;
vertical-align: middle;
margin-left: 5px;
}
.fixedAvailable .statusIconConfirm {
position: fixed !important;
top: 100px !important;
}
.confirmStatusIcon {
width: 340px;
background: #ffffff;
margin: auto;
border-radius: 10px;
padding: 10px;
margin-top: 5px;
text-align: left;
}
.confirmStatusIcon .headline {
padding: 10px;
font-weight: 800;
font-size: 120%;
}
.confirmStatusIcon .actions {
padding: 10px;
}
.confirmStatusIcon .actions .abort {
float: left;
padding: 10px;
color: #cccccc;
}
.confirmStatusIcon .actions .confirm {
float: left;
padding: 10px;
background: #ffa225;
color: #ffffff;
font-weight: 700;
margin-left: 5px;
border-radius: 10px;
cursor: pointer;
}
.confirmStatusIcon .actions .confirm:hover {
background: #ffb44f;
}
.confirmStatusIcon .echoIcon {
width: 15px;
}
.socketClosed,
.getUrlMessage {
padding: 20px;
line-height: 140%;
font-size: 120%;
background: #ffffff;
border: 5px solid #bcbcbc;
border-radius: 3px;
box-shadow: 5px 5px 10px #b3b3b3;
}
/* Systemmeldungen a4d944 animation:fadeNotificationOut 5.0s forwards ease-in-out*/
.notificationTop {
z-index: 9999999;
animation: fadeNotificationOut 5s forwards ease-in-out;
position: fixed;
bottom: 20px;
right: 10px;
width: 280px;
text-align: center;
font-size: 120%;
padding: 10px 15px;
font-weight: 800;
border-radius: 15px;
}
.notificationSuccess {
background: #90cc00;
color: #ffffff;
background: linear-gradient(30deg, #ffc336 0, #ff9933 100%);
line-height: 150%;
border: 3px solid #ffa828;
font-weight: 800;
}
.notificationSuccess:hover {
opacity: 0.9;
}
.notificationSuccess .text {
padding: 5px;
text-align: center;
}
.notificationError {
background: #90cc00;
color: #ffffff;
background: linear-gradient(30deg, #d9446c 0, #ff0044 100%);
line-height: 150%;
border: 3px solid #dd4e65;
font-weight: 800;
}
.notificationError {
background: #d9446c;
color: #ffffff;
}
.notificationError .text {
padding: 5px;
text-align: center;
}
/* Layer */
#ly {
text-align: left;
}
#ly .layerDragable.standard {
box-shadow: 5px 5px 10px #b3b3b3;
border-radius: 5px;
background: #d1d1d1;
text-align: left;
border: 1px solid #e1e1e1;
border-left: none;
width: 618px;
border-left: 1px solid #9e9e9e;
border-top: 1px solid #aeaeae;
border-bottom: 2px solid #adadad;
border-right: 2px solid #adadad;
padding: 5px;
}
#ly .layerDragable .dragHead {
background: url(//s.jappy.com/i/icon/fbg.gif) repeat-x #e2e2e2;
border-bottom: 1px solid #e2e2e2;
border-top: 1px solid #e1e2e3;
text-align: right;
padding: 5px 0;
cursor: move;
}
#ly .layerDragable .dragHead .title {
float: left;
padding: 0 3px 0 10px;
font-weight: bold;
}
#ly .layerDragable .dragHead .title .fwI {
font-weight: normal;
}
#ly .layerDragable .dragHead .close {
float: right;
}
#ly .layerDragable .dragHead .close img {
vertical-align: text-bottom;
}
#ly .layerDragable .dragHead .close .text {
margin-right: 10px;
font-size: 90%;
cursor: pointer;
}
#ly .layerDragable .dragHead .close:hover img {
background-position: -200px -500px;
}
s #ly .layerDragable .dragHead .close:hover {
color: #000000;
}
#ly .layerDragable .dragHead .close img {
height: 12px !important;
}
#ly .layerDragable .dragBox {
background: #ffffff;
}
#ly .loading {
background: #bcbdbd;
border-radius: 50%;
padding: 7px;
opacity: 0.8;
margin-top: 5px;
margin-left: 5px;
position: fixed;
}
#ly .loading img {
width: 23px;
}
#ly .browserPermission {
background: #ffed76;
color: #555555;
font-weight: bold;
padding: 6px 15px;
border: 1px solid #ffed76;
border-top: none;
border-left: 1px solid #d1d1d1;
font-size: 16px;
}
#ly .browserPermission.chrome:after {
content: "";
position: absolute;
top: -20px;
right: 40px;
border-bottom: 20px solid black;
border-bottom-color: inherit;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
#ly .browserPermission.firefox:after {
content: "";
position: absolute;
top: -1px;
left: -16px;
border-right: 16px solid black;
border-right-color: inherit;
border-top: 16px solid transparent;
border-bottom: 16px solid transparent;
}
/* Layer oben Rechts */
.headerOptions {
background: #ffffff;
width: 170px;
border: 1px solid #e1e1e1;
position: fixed !important;
box-shadow: 0 2px 2px #cacaca;
}
.headerOptions div {
display: block;
cursor: pointer;
padding: 15px 25px;
color: #009ee0;
}
.headerOptions div:hover {
background: #fdd978;
}
.layerConfirm {
background: rgba(0, 0, 0, 0.15);
top: 0 !important;
left: 0 !important;
position: fixed !important;
width: 100%;
height: 100%;
}
.layerConfirm .wrapper {
border: 1px solid #e2d759;
background: #fff473;
border-radius: 25px;
width: 320px;
margin: auto;
margin-top: 100px;
}
.layerConfirm .message {
padding: 20px 30px 10px 30px;
font-size: 120%;
font-weight: 900;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
}
.layerConfirm .actionSelector {
padding-left: 20px;
}
.layerConfirm .actionSelector .button {
border-radius: 25px;
padding: 15px 20px;
}
.layerConfirm .actionSelector .button.blue {
background: #00bee8;
border: 1px solid #00b6d4;
font-weight: 900;
margin-right: 5px;
}
.bringMeBack {
padding-bottom: 5px;
padding-top: 5px;
text-align: right;
}
.bringMeBack img {
width: 15px;
vertical-align: text-bottom;
}
.bringMeBack a {
padding: 7px 15px;
background: #e5e5e5;
margin: 10px;
font-weight: 600;
font-size: 120%;
border-radius: 10px;
}
/* Einstellungsübersicht */
.setup {
border: 1px solid #d1d1d1;
border-radius: 5px;
padding: 10px;
background: #ffffff;
margin-bottom: 20px;
margin-right: 20px;
}
.setup .profileImage {
text-align: center;
padding: 15px 0;
padding-top: 0px;
border-radius: 5px;
margin-bottom: 10px;
background-size: 100%;
background-position: 50% 50%;
}
.setup .profileImage .pic img {
width: 100px;
border-radius: 50%;
border: 2px solid #404040 !important;
}
.setup .profileImage .button {
padding: 7px 15px;
background: #404040;
border-radius: 15px;
font-weight: 500;
color: #ffffff;
margin-left: 5px;
font-size: 90%;
border: 2px solid #404040;
}
.setup .profileImage .button:hover {
background: #000000;
transition: 0.5s;
}
.setup .profileImage .button img {
width: 15px;
vertical-align: text-bottom;
}
.setup .profileImage .settings {
font-size: 120%;
padding: 10px;
margin-top: 5px;
}
/* Generische Schlüssel-Wert-Tabelle mit Icon, genutzt von Achievement-Detail, Inventar, Spielen, Settings etc. */
.dataTable {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-content: flex-start;
justify-content: center;
align-items: flex-start;
gap: 5px;
min-width: 360px;
max-width: 100vw;
}
.dataTable .dataLine {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: flex-start;
align-items: center;
gap: 3px;
min-width: 360px;
max-width: 100vw;
}
.dataTable .dataIcon {
padding: 2px;
width: 24px;
}
.dataTable .dataIcon img {
width: 17px;
height: 17px;
}
.dataTable .dataText {
padding: 5px;
width: 80px;
}
.dataTable .dataData {
padding: 5px 10px;
width: 220px;
}
.dataTable a {
color: #16beff;
font-weight: 600;
}
.setup .dataLine {
font-size: 120%;
border-bottom: 1px solid #f1f1f1;
display: flex;
padding: 10px;
}
.setup .dataLine:last-child {
border-bottom: none;
}
.setup .dataLine .title {
width: 200px;
font-weight: 300;
font-size: 90%;
}
.setup .dataLine .title.full {
padding: 13px 0;
}
.setup .dataLine .data {
font-weight: 600;
font-size: 110%;
line-height: 120%;
}
.setup .dataLine .data img {
width: 15px;
vertical-align: text-bottom;
}
.setup .dataLine .active {
color: #32d296;
padding: 5px 0;
font-size: 80%;
font-weight: 400;
}
.setup .dataLine .button {
padding: 5px 15px;
background: #e1e1e1;
border-radius: 15px;
font-weight: 300;
color: #333333;
margin-left: 5px;
font-size: 80%;
}
.setup .dataLine:hover {
background: #f1f1f1;
border-radius: 5px;
}
.setup .button.highlighted {
background: #ffc704;
color: #000000;
font-weight: 600;
background: linear-gradient(270deg, #ffc704 0, #ffd237 100%);
}
.setup .logout {
text-align: right;
padding-top: 15px;
}
.setup .logout a {
margin-right: 10px;
padding: 5px 10px;
background: #e1e1e1;
border-radius: 15px;
border: 2px solid #404040;
}
.setup .logout a:hover {
background: #ffffff;
}
.setup .logout img {
width: 15px;
}
.setup .headline {
font-size: 120%;
color: #000000;
font-weight: 700;
margin-left: 10px;
padding-bottom: 5px;
}
.setup .inputDefault {
padding: 7px 10px;
border-radius: 10px;
border: 2px solid #e5e5e5;
font-size: 120%;
}
.setup .inputDefault:focus {
border: 2px solid #ffa225;
}
.setup .actions {
padding: 10px 10px;
}
.setup .actions.small a.button {
font-size: 12px !important;
}
.setup input.button,
.setup button.button,
.setup a.button {
padding: 10px 15px;
font-size: 120%;
border: 1px solid #3a3a3a;
border-radius: 10px;
background: #ffc704;
color: #000000;
font-weight: 600;
background: linear-gradient(270deg, #ffc704 0, #ffd237 100%);
}
.setup input.button:hover,
.setup button.button:hover {
cursor: pointer;
background: #ffc704;
transition: 0.5s;
}
.setup input.button.confirm {
background: #9bfd75;
border: 1px solid #5dd62e;
color: #000000;
}
.setup hr {
border: none;
border-top: 1px solid #e1e1e1;
margin: 25px 50px;
}
@media screen and (max-width: 800px) {
.setup {
margin-right: 0;
}
.setup .dataLine {
display: block;
}
.setup .dataLine .title {
padding-bottom: 5px;
}
}
#settingsSection .top {
width: 100%;
margin-bottom: 15px;
}
#settingsSection .top .settings {
padding-bottom: 10px;
width: 100%;
background: #333333;
background: linear-gradient(90deg, #484848 0%, #333333 100%);
}
#settingsSection .top .settings .row {
width: 100%;
padding: 4px 0 4px 10px;
margin-top: 5px;
}
#settingsSection .top .settings .row .title {
width: 237px;
padding: 5px 10px;
color: #e6e6e6;
padding-top: 12px;
font-weight: 500;
}
#settingsSection .top .settings .row .value {
width: 90%;
}
#settingsSection .top .settings .row a {
display: block;
color: #333333;
background: #ffffff;
font-weight: 300;
border: 1px solid #000000;
border-radius: 5px;
padding: 5px 5px;
}
#settingsSection .top .settings .row a:hover {
background: #ffe8aa;
border: 1px solid #ff9200;
}
#settingsSection .top .settings .row a.withIcon span {
display: block;
float: left;
padding: 7px;
}
#settingsSection .top .settings .row a.withIcon img {
float: right;
width: 20px;
margin: 3px;
}
#settingsSection .top .settings .row .value.image img {
width: 50px;
border-radius: 50%;
}
#settingsSection img {
vertical-align: text-bottom;
}
#settingsSection .topic {
color: #78b1e3;
margin: 20px 15px 5px 15px;
padding-bottom: 5px;
border-bottom: 1px solid #78b1e3;
font-size: 140%;
}
#settingsSection .links {
padding-top: 5px;
}
#settingsSection .links .entry a {
display: block;
padding: 13px 0 8px 0;
padding-left: 15px;
color: #525252;
}
#settingsSection .links .entry .subinfo {
color: #999999;
padding-bottom: 5px;
font-size: 90%;
padding-left: 17px;
}
#settingsSection .links .entry a:hover {
background: #d5e9f1;
color: #417bc4;
}
#settingsSection .links .entry a:hover .info {
color: #000000;
}
.settingsBlock {
margin-bottom: 15px;
float: left;
background: #ffffff;
width: 100%;
padding-bottom: 5px;
margin-right: 15px;
}
.settingsBlock .headline {
width: 100%;
margin-bottom: 5px;
padding-top: 10px;
padding-bottom: 10px;
}
.settingsBlock .headline .icon {
float: left;
width: 20px;
margin-left: 20px;
height: 20px;
padding: 10px;
background: #333333;
border-radius: 50%;
}
.settingsBlock .headline .text {
float: left;
font-size: 130%;
font-weight: 300;
padding: 12px 15px;
padding-right: 0;
color: #727272;
}
.settingsBlock .options a {
display: block;
padding: 8px 15px;
font-size: 100%;
font-weight: 600;
color: #49ccff;
margin-left: 10px;
margin-right: 10px;
}
.settingsBlock .options a:hover {
background: #ffedb0;
color: #333333;
border-radius: 5px;
}
.profileImagePreview {
margin-top: 30px;
position: absolute;
right: 20px;
z-index: 999999999999;
}
.profileImagePreview .imageEntry canvas {
border: 1px solid #b9b9b9;
border-bottom: 1px solid #959595;
border-right: 1px solid #959595;
}
.profileImagePreview .headline {
background: #ffda69;
border: 1px solid #eac451;
border-right: 1px solid #d5b144;
border-bottom: none;
padding: 10px;
}
.profileImagePreview .large {
display: none;
}
.profileImagePreview .xsmall {
margin-top: -35px;
margin-left: 10px;
position: absolute;
z-index: 2;
}
/* #search */
#searchSection .actionSelector {
padding-top: 10px;
padding-bottom: 7px;
}
#searchSection {
width: 100%;
}
#searchSection .nvG {
margin-left: 20%;
}
#searchSection .rectangle {
display: block;
text-align: center;
padding-bottom: 5px;
}
#searchSection .half {
display: none;
}
.searchFilterActive {
width: 100%;
line-height: 20px;
margin-bottom: 5px;
}
.searchFilterActive .entry {
margin-left: 5px;
padding: 10px;
display: block;
float: left;
}
.searchFilterActive a {
margin-left: 10px;
}
.searchFilterActive .change,
.searchFilterActive .info {
display: block;
float: left;
padding: 10px;
}
.searchFilterActive .info {
font-weight: bold;
margin-left: 5px;
padding: 10px;
}
.searchFilterActive a.change {
color: #545454;
text-decoration: underline;
}
.setSearchOptions {
background: #f1f1f1;
border: 1px solid #a3a3a3;
border-right: 1px solid #bbbbbb;
border-left: 1px solid #a3a3a3;
}
.setSearchOptions .entry {
cursor: pointer;
padding: 5px 8px;
}
.setSearchOptions .entry span {
margin-right: 2px;
}
.setSearchOptions .entry:hover {
background: #d5e9f1;
color: #417bc4;
}
/* 840, 870, 970 */
.searchUserResults {
margin-left: -7px;
position: relative;
z-index: 2;
}
.searchUserResults a.entry {
display: block;
width: 160px;
background: #ffffff;
float: left;
cursor: pointer;
margin-left: 10px;
margin-bottom: 10px;
border-radius: 15px;
padding: 3px;
}
.searchUserResults a.entry .profileImage img {
width: 100%;
border: none;
border-radius: 15px;
}
.searchUserResults a.entry .zipcode {
padding: 7px;
background: #000000ba;
font-size: 90%;
color: #ffffff;
position: absolute;
z-index: 2;
margin-top: -30px;
border-radius: 10px;
margin-left: 6px;
}
.searchUserResults a.entry .stamp {
font-size: 11px;
margin-left: 5px;
text-align: center;
position: absolute;
margin-top: -150px;
font-weight: 700;
}
.searchUserResults a.entry .stamp span.stampOnline {
display: block;
border-radius: 10px;
background: #80cb00;
padding: 7px;
color: #ffffff;
}
.searchUserResults a.entry .stamp span.stampOffline {
display: block;
border-radius: 10px;
background: #ff9933;
padding: 7px;
color: #ffffff;
}
.searchUserResults a.entry .stamp span.stampBlocked {
display: block;
border-radius: 10px;
background: #333333;
padding: 7px;
text-decoration: line-through;
color: #ffffff;
}
.searchUserResults a:hover {
color: #333333;
}
.searchUserResults a.entry.highlight {
background: #d5e9f1;
border: 1px solid #8bcaff;
}
.searchUserResults a.entry:hover {
background: #ffa225;
}
.searchUserResults .searchLeaderboard {
padding-top: 5px;
padding-bottom: 10px;
margin-left: 5px;
}
.searchUserResults .stamp img {
vertical-align: text-bottom;
}
/* User Attached */
.userAttached {
width: 100%;
padding-top: 5px;
}
.userAttached a.userEntry {
display: block;
width: 150px;
padding: 15px;
height: 180px;
text-align: center;
background: #333333;
border-radius: 5px;
float: left;
cursor: pointer;
margin-left: 15px;
margin-bottom: 7px;
}
.userAttached a.userEntry .userProfileImage img {
width: 150px;
height: 150px;
border-radius: 50%;
}
.userAttached a.userEntry .stamp {
padding: 5px;
padding-top: 10px;
font-size: 11px;
margin-left: 5px;
}
.userAttached a.userEntry .stampOffline {
color: #ffffff;
}
.userAttached a.userEntry .stampOnline {
background: none;
color: #89C003;
}
/* searchSettings */
.searchSettings .side {
float: left;
width: 325px;
}
.searchSettings .container {
padding: 20px 3px 5px 15px;
width: 300px;
}
.searchSettings .container .selectionRadio {
margin-top: 5px;
margin-left: 0;
}
.searchSettings .category {
text-transform: uppercase;
color: #78b1e3;
margin: 20px 15px 5px 15px;
border-bottom: 1px solid #78b1e3;
font-size: 16px;
}
.searchSettings .type {
color: #525252;
font-size: 130%;
}
.searchSettings .selection {
padding: 10px 5px 5px 0;
}
.searchSettings input {
padding-left: 3px;
}
.searchSettings select {
width: 70%;
padding: 2px 5px;
border: 1px solid #e1e1e1;
border-top: 1px solid #bfbfbf;
border-left: 1px solid #bfbfbf;
}
.searchSettingsBar {
background: #fff4ac;
padding: 10px 3px 10px 10px;
}
.searchSettings .highlight {
background: #fff4ac;
border-top: 1px solid #EDECC6;
width: 250px;
margin-top: 5px;
padding: 10px;
}
.searchSettings .highlight input {
width: 90%;
}
.searchSettings .headline {
font-size: 110%;
padding-top: 6px;
padding-bottom: 3px;
}
.searchNavigation {
width: 100%;
}
.searchNavigation a.entry {
float: left;
width: 33%;
display: block;
}
.searchNavigation a.entry .wrapper {
padding: 5px 15px;
display: block;
height: 35px;
text-align: center;
border-bottom: 5px solid #c6c6c6;
}
.searchNavigation a.entry:hover .wrapper {
border-bottom: 5px solid #629400;
}
.searchNavigation a.entry.highlight .wrapper {
border-bottom: 5px solid #629400;
font-weight: bold;
}
.searchNavigation a.entry img {
float: left;
}
.searchNavigation a.entry .text {
font-size: 120%;
color: #555555;
float: left;
padding-top: 15px;
margin-left: 7px;
}
/* Allg. Sortierung */
.grading {
padding: 0;
width: 100%;
margin-left: 10px;
font-size: 90%;
font-weight: 300;
}
.grading .sortBy {
float: left;
padding: 10px 8px;
color: #999999;
}
.grading .active {
color: #f96700;
font-weight: 800;
}
.grading > * {
cursor: pointer;
}
.grading > *.sortBy:hover {
color: #ec6449;
}
.grading .headline {
float: left;
padding-top: 15px;
font-size: 120%;
}
.grading .breadCrumb {
float: left;
width: 300px;
}
.grading .inputSearch {
float: right;
margin: 5px 10px 2px 0;
border: 1px solid #e5e5e5;
color: #999999;
padding: 5px 10px;
border-bottom: 3px solid #ffaa34;
background: #e5e5e5;
font-size: 100%;
}
.grading .folder {
float: right;
cursor: pointer;
padding: 8px;
color: #999999;
}
.grading .folder:hover {
text-decoration: underline;
}
.grading .folder img {
vertical-align: text-bottom;
}
/* Allg. Brotkrümel */
.breadCrumb {
padding: 5px 5px 5px 0;
font-size: 90%;
line-height: 140%;
}
.breadCrumb .crumb,
.breadCrumb a.crumb {
background: url(//s.jappy.com/i/icon/pointer/crumb.png) 100% 50% no-repeat;
margin-right: 5px;
padding: 10px 15px;
display: block;
line-height: 140%;
color: #333333;
font-weight: 700;
cursor: pointer;
padding-right: 30px;
float: left;
}
.breadCrumb a.crumb:hover {
text-decoration: underline;
}
.breadCrumb .locationCrumb,
.breadCrumb a.locationCrumb {
display: block;
float: left;
font-size: 100%;
margin-left: 10px;
color: #676767;
margin-right: 5px;
padding: 10px 7px;
padding-left: 0;
}
.breadCrumb .locationCrumb .info {
color: #888888;
font-style: italic;
}
.breadCrumb.profile {
display: none;
}
.breadCrumb.profile .crumb {
padding: 10px 20px 10px 10px;
font-size: 120%;
font-weight: 500;
}
.breadCrumb.profile .crumb.profileImage {
padding: 7px 25px 7px 15px;
}
.breadCrumb.profile .crumb img {
width: 22px;
border-radius: 50%;
vertical-align: text-bottom;
margin-right: 5px;
}
.breadCrumb.profile .locationCrumb {
font-size: 120%;
font-weight: 300;
line-height: 140%;
}
.statusInfo {
font-family: "Roboto", sans-serif-light;
background: #ffffff;
border: 1px solid #d3d3d3;
border-bottom: 1px solid #cacaca;
border-right: 1px solid #cacaca;
box-shadow: 0 2px 2px #cacaca;
border-radius: 3px;
padding-bottom: 10px;
}
.statusInfo .icon {
float: left;
padding: 20px 10px;
width: 30%;
}
.statusInfo .info {
float: left;
padding: 20px 10px;
width: 55%;
}
.statusInfo .info .name {
font-size: 130%;
font-weight: bold;
padding-bottom: 4%;
}
.statusInfo .info .cost {
background: #ff9933;
color: #ffffff;
min-width: 55px;
max-width: 100px;
text-align: center;
padding: 3%;
border-radius: 2px;
font-weight: bold;
font-size: 90%;
}
.statusInfo a.button {
padding: 15px 20px;
font-size: 110%;
font-weight: 600;
border-radius: 5px;
display: block;
color: #ffffff;
background: #8ec200;
text-align: center;
}
.statusInfo a.button.blue {
background: #4983ec;
}
.statusInfo a.button:hover {
text-decoration: underline;
}
.statusInfo .actions {
padding: 3%;
}
.statusDependency {
font-family: "Roboto", sans-serif-light;
}
.statusDependency .entry,
.statusDependency a.entry {
display: block;
margin-bottom: 1%;
padding: 10px;
font-size: 110%;
font-weight: 300;
background: #ffffff;
border: 1px solid #d3d3d3;
border-bottom: 1px solid #cacaca;
border-right: 1px solid #cacaca;
box-shadow: 0 2px 2px #cacaca;
border-radius: 3px;
width: 50%;
}
.statusDependency .entry:hover {
background: #ffde78;
}
.statusDependency .text {
float: left;
padding: 1%;
color: #333333;
}
.statusDependency .icon {
float: left;
padding: 1px;
margin-right: 5px;
}
.statusDependency .icon img {
width: 20px;
height: 20px;
}
.statusDependency .available {
float: right;
}
.statusDependency .available img {
width: 15px;
height: 15px;
}
/* emptyState */
.emptyState {
line-height: 180%;
text-align: center;
}
.emptyState .wrapper {
width: 300px;
margin: auto;
padding: 10px;
}
.emptyState .text {
padding: 10px 15px 15px 15px;
font-size: 110%;
font-weight: 300;
}
.emptyState .icon img {
width: 150px;
}
.emptyState .headline {
font-size: 140%;
font-weight: bold;
}
.emptyState .button a,
.emptyState .button button {
padding: 15px 20px;
margin: auto;
border: none;
font-size: 100%;
font-weight: 800;
border-radius: 10px;
display: block;
color: #ffffff;
background: #ffa225;
text-align: center;
}
.emptyState .button a:hover,
.emptyState .button button:hover {
text-decoration: underline;
}
.emptyState .smallInfo {
padding: 15px;
color: #b2b2b2;
font-size: 90%;
}
.emptyState .smallInfo.highlighted {
font-size: 110%;
font-weight: 300;
color: #333333;
}
/* Freunde */
.friendSection .left {
width: 100%;
}
.friendSection .right {
display: none;
}
.listOfContacts .list {
margin-top: 5px;
}
.listOfContacts .list .entry {
display: block;
background: #ffffff;
border-bottom: 1px solid #cacaca;
padding: 0 0;
margin-bottom: 7px;
border-radius: 20px;
}
.listOfContacts .list .entry a.main {
float: left;
display: block;
width: 320px;
}
.listOfContacts .list .entry .profileImage {
display: block;
padding: 10px;
padding-left: 15px;
text-align: center;
float: left;
}
.listOfContacts .list .entry .profileImage img {
width: 50px;
border-radius: 50%;
}
.listOfContacts .list .entry .data {
float: left;
}
.listOfContacts .list .entry:hover {
background: #ffd767;
}
.listOfContacts .list .entry .stamp {
padding: 10px;
padding-top: 15px;
font-size: 130%;
padding-right: 0;
}
.listOfContacts .list .entry .stamp .preStamp {
display: none;
}
.listOfContacts .list .entry .stamp .zipcode {
font-size: 80%;
color: #999999;
font-weight: 250;
}
.listOfContacts .list .entry .loginInfo {
padding: 10px;
padding-top: 0;
font-size: 90%;
font-weight: 300;
color: #999999;
}
.listOfContacts .list .settings {
float: right;
text-align: right;
padding: 10px 20px;
margin-top: 10px;
}
.listOfContacts .list .settings img {
width: 35px;
}
.listOfContacts .list .settings > * {
display: block;
float: right;
margin-left: 10px;
padding: 3px;
filter: grayscale(100%);
opacity: 0.5;
border: none;
background: transparent;
cursor: pointer;
}
.listOfContacts .list .settings > *:hover {
filter: grayscale(0%);
opacity: 1;
}
.listOfContacts .list .checkbox {
float: left;
width: 50px;
display: block;
}
.listOfContacts .list .checkbox img {
width: 30px;
}
.listOfContacts .textareaFull {
padding: 5px;
height: 30px;
width: 440px;
}
.listOfContacts .list .option .sub {
margin-top: 5px;
}
.friendShipRequest {
margin-bottom: 10px;
background: #ffe178;
border-top: 4px solid #ffc119;
box-shadow: 0 2px 2px #cacaca;
}
.friendShipRequest .profileImage {
float: left;
width: 130px;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
.friendShipRequest .profileImage img {
border-radius: 50%;
width: 100px;
height: 100px;
}
.friendShipRequest .plain {
float: left;
padding: 15px;
}
.friendShipRequest .actionSelector a.button {
margin: 0;
}
.showFriendOnline {
display: none;
}
#listOfFolders {
display: none;
}
.listOfFolders {
background: #ffffff;
border: 1px solid #e1e1e1;
}
.listOfFolders a {
display: block;
padding: 10px 15px;
font-size: 110%;
font-weight: 300;
}
/* Abolist */
.aboList {
width: 100%;
background: #ffffff;
}
.aboList .entry {
display: block;
cursor: pointer;
border-bottom: 1px solid #f1f1f1;
padding: 5px 0;
}
.aboList .entry .profileImage {
display: block;
padding: 10px;
text-align: center;
float: left;
}
.aboList .entry .profileImage img {
width: 60px;
border-radius: 50%;
}
.aboList .entry .stamp {
font-size: 110%;
padding-right: 0;
float: left;
padding: 10px;
}
.aboList .entry .loginInfo {
padding: 10px;
padding-top: 0;
font-size: 90%;
font-weight: 300;
color: #999999;
}
.aboList .entry .zipcode {
margin-top: -20px;
position: absolute;
border-radius: 5px;
background: #000000;
opacity: 0.8;
padding: 4px;
color: #ffffff;
margin-left: 10px;
}
.aboList .entry .actions {
float: right;
padding: 15px;
}
.aboList .entry a.main {
float: left;
display: block;
}
/* Freundesliste erstellen und bearbeiten */
.userSelectionArea {
width: 100%;
height: 300px;
overflow-y: scroll;
margin-bottom: 10px;
}
.userSelectionArea .profileImage img {
display: block;
width: 100px !important;
height: 100px;
opacity: 0.8;
}
.userSelectionArea .entry {
cursor: pointer;
box-shadow: 1px 1px 2px #9c9c9c;
border-top: 4px solid #e5e5e5;
background: #ffffff;
width: 100px;
height: 125px;
overflow: hidden;
float: left;
margin: 4px 4px 0 0;
}
.userSelectionArea .entry .nickname {
padding: 10px;
font-size: 11px;
}
.userSelectionArea .entry.highlight {
border-top: 4px solid #3399ff;
background: #3399ff;
}
.userSelectionArea .entry:hover {
border-top: 4px solid #3399ff;
}
.userSelectionArea input {
visibility: hidden;
position: absolute;
}
.defaultImageLayer .imageFrame.imageFadeIn img {
animation-duration: 1s;
animation-name: imageFadeIn;
}
.defaultImageLayer .imageFrame.imageFadeOut img {
animation-duration: 1s;
animation-name: imageFadeOut;
animation-fill-mode: forwards;
}
.defaultImageLayer .title {
padding: 10px;
height: 30px;
overflow: hidden;
font-size: 200%;
color: #f1f1f1;
background: #333333;
}
/* emptyState no Profile Image animation-fill-mode: forwards */
.errorNoProfileImage {
padding: 10px;
line-height: 180%;
text-align: center;
font-family: "Roboto", sans-serif-light;
}
.errorNoProfileImage .wrapper {
width: 300px;
margin: auto;
}
.errorNoProfileImage .text {
padding: 10px;
font-size: 120%;
font-weight: 300;
}
.errorNoProfileImage .headline {
font-size: 160%;
font-weight: bold;
}
.errorNoProfileImage .button a {
padding: 15px 20px;
font-size: 110%;
display: block;
color: #ffffff;
background: #8ec200;
text-align: center;
}
.errorNoProfileImage .button a:hover {
text-decoration: underline;
}
a.tickerAboInfo {
display: block;
background: #33B5E5;
width: 450px;
padding: 10px 15px;
color: #ffffff;
font-weight: 300;
border-radius: 2px;
margin-bottom: 10px;
border: 1px solid #28AADA;
}
/* Tickereintrag erstellen */
.tickerCompose {
background: #e5e5e5;
padding-top: 3%;
}
.tickerCompose .editor {
border: none;
background: transparent;
padding-bottom: 0;
}
.tickerCompose .editor .features {
display: none;
}
.tickerCompose .editor .smilies .entries {
width: 250px;
}
.tickerCompose .textareaCompose {
padding: 18px 3%;
width: 88%;
margin: 0 3%;
border: 1px solid #cdcdcd;
border-radius: 3px;
max-height: 360px;
}
.tickerCompose .stream {
padding: 0 !important;
border-top: none !important;
border-bottom: none !important;
}
.tickerCompose .selectFile {
padding: 10px;
}
.tickerCompose .headline {
padding: 10px;
font-weight: 500;
}
.tickerCompose .line {
padding: 10px;
}
.tickerCompose .line input {
width: 320px;
padding: 5px;
}
.tickerCompose .editor .emoji {
width: 1.7em;
height: 1.7em;
}
.tickerCompose .editor .smilies {
width: 330px;
}
#tickerComposeStartpage.mask .masked {
display: none;
}
#tickerComposeStartpage.unmask .masked {
display: block;
}
#tickerComposeStartpage.mask .stream {
display: none;
}
#tickerComposeStartpage.unmask .stream {
display: block;
}
.tickerCompose .progress {
padding: 5px 10px;
}
.tickerCompose .progress .progressInfo {
padding: 5px 0;
font-weight: 500;
}
.imageToolbar .rotate {
padding: 5px;
margin-left: 10px;
cursor: pointer;
}
.imageToolbar .rotate:hover {
background: #ffffff;
border-radius: 10px;
}
/* Ticker Upload */
.progressUpload .status {
position: absolute;
margin-left: 10px;
margin-top: 7px;
font-weight: bold;
}
.progressUpload {
padding: 5px 10px;
height: 30px;
}
.progressUpload .progress {
background: #ff8b04;
height: 32px;
border-radius: 3px;
}
.uploadFile .button {
text-align: center;
font-weight: bold;
padding: 15px 10px;
color: #ffffff;
margin: 5px 10px;
border-radius: 15px;
margin-top: 0;
background: #3ca2fe;
max-width: 320px;
}
.uploadFile .button:hover {
text-decoration: underline;
cursor: pointer;
}
.imageUpload {
width: 330px;
padding: 15px;
background: #cacaca;
margin: auto;
border-radius: 25px;
}
.imageUpload .uploadSelector {
padding: 10px;
}
.imageUpload .placeholder {
width: 330px;
overflow: hidden;
height: 250px;
background: #ffffff;
border: 1px dotted #3ca2fe;
}
.imageUpload .placeholder:hover {
background: #ffedb0;
cursor: pointer;
}
.imageUpload .placeholder img {
width: 100%;
}
.imageUpload .placeholder .content {
background: url(//s.jappy.com/i/s.gif) no-repeat;
background-size: 100%;
background-position: 50% 50%;
height: 250px;
width: 360px;
}
.imageUpload .placeholder .content .text {
position: relative;
z-index: 2;
margin-top: -60px;
text-align: center;
font-weight: 800;
font-size: 110%;
}
.imageUpload .placeholder.disabled {
opacity: 0.5;
}
.imageUpload .description {
padding: 10px 0 10px 0;
margin-left: 10px;
}
.imageUpload .description input {
padding: 10px;
width: 90%;
border: 1px solid #c1c1c1;
border-radius: 10px;
}
.toolbarEditor {
padding: 5px 10px;
line-height: 12px;
}
.toolbarEditor a.toolbarEntry {
float: left;
width: 50px;
height: 50px;
display: block;
text-align: center;
margin-right: 5px;
}
.toolbarEditor a.toolbarEntry img {
width: 25px;
margin-top: 13px;
}
.toolbarEditor a.toolbarEntry:last-child {
border: none;
}
.toolbarEditor a.toolbarEntry:hover {
background: #ffda69;
}
.toolbarEditor a.toolbarEntry.active {
border-bottom: 4px solid #3ca2fe;
}
.toolbarEditor a.toolbarEntry.disabled {
opacity: 0.3;
cursor: not-allowed;
}
.tickerCompose .masked {
border-bottom: none;
padding-bottom: 20px;
}
.statusIconSelected {
position: absolute;
margin-top: -52px;
right: 15px;
}
.statusIconSelected .statusIcon {
border-radius: 50%;
height: 50px;
width: 50px;
text-align: center;
}
.statusIconSelected .statusIcon:hover {
background: #ffd237;
}
.statusIconSelected .statusIcon img {
width: 40px;
margin-top: 5px;
}
.statusIconSelected .statusName {
position: absolute;
margin-left: -85px;
margin-top: -20px;
background: #ffa225;
padding: 5px;
border-radius: 7px;
color: #ffffff;
font-weight: 500;
width: 80px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#tickerComposeStartpage.unmask .statusIconSelected .statusIcon {
background: #ffffff;
border: 1px solid #ffa225;
}
#tickerComposeStartpage.mask .statusName {
display: none;
}
#tickerComposeStartpage.unmask .statusIconSelected {
margin-top: 5px;
}
/* Startseite User */
.homepage {
width: 100%;
}
.homepage .discoverStream {
width: 100%;
}
.homepage .aboStream {
width: 100%;
display: none;
}
.homepage .attend {
width: 100%;
}
.homepage.showAbosEntries .aboStream {
display: block;
}
.homepage.showAbosEntries .discoverStream {
display: none;
}
.homepage .adslot {
margin-bottom: 10px;
padding: 0;
text-align: center;
}
.homepage .discoverStream .adslot {
display: block;
}
.homepage.showAbosEntries .discoverStream .adslot {
display: none;
}
.homepage .aboStream .adslot {
display: none;
}
.homepage.showAbosEntries .aboStream .adslot {
display: block;
}
.postSite {
display: none;
}
/* Adslot Profile Startpage */
.profileStartpage .stream .adslot {
text-align: center;
margin-bottom: 10px;
}
.profileStartpage .stream .adslot.mobile {
display: block;
}
.profileStartpage .stream .adslot.desktop {
display: none;
}
.homepage .top {
padding-top: 3%;
}
.streamFilter {
width: 100%;
height: 75px;
margin-bottom: 5px;
overflow: scroll;
}
.streamFilter .wrapper {
width: 800px;
}
.streamFilter a.entry {
display: block;
float: left;
width: 70px;
text-align: center;
background: #e5e5e5;
padding: 5px 5px;
padding-top: 10px;
}
.streamFilter a.entry.active {
border-bottom: 4px solid #3ca2fe;
}
.streamFilter a.entry .icon {
padding: 5px;
}
.streamFilter a.entry .icon img {
width: 30px;
}
.streamFilter a.entry .text {
text-align: center;
font-weight: 300;
font-size: 70%;
letter-spacing: 0;
color: #929292;
padding-bottom: 5px;
padding-top: 3px;
}
.streamFilter a:hover.entry {
background: #FDD978;
}
.homepage.showAbosEntries a.discover.active {
border-color: #e5e5e5;
}
.homepage.showAbosEntries a.aboLink.active {
border-color: #3ca2fe;
}
.headlineDiscover {
padding: 0 15px 10px 15px;
}
.headlineDiscover .icon {
float: left;
}
.headlineDiscover .icon img {
width: 30px;
}
.headlineDiscover .text {
float: left;
font-size: 130%;
padding: 7px 15px;
font-weight: 200;
}
/* #stream */
.stream {
width: 360px;
overflow: hidden;
}
.stream.detail {
background: #ffffff;
}
.stream .entry {
width: 100%;
max-width: 360px;
margin-bottom: 10px;
background: #ffffff;
border-bottom: 1px solid #dcdcdc;
border-top: 1px solid #cccccc;
}
.stream a.entry {
display: block;
}
.stream.detail .actionSelector .button:first-child {
margin-left: 0;
}
.stream.detail .entry {
border-bottom: none;
}
.stream .entry.entryGift {
width: 100%;
min-height: 350px;
}
.stream .entry.entryGift .name {
padding: 10px;
font-weight: 500;
max-height: 17px;
}
.stream .gift .text {
padding: 10px;
}
.stream .firstPage {
display: none;
}
.stream .entry.setReadRecently {
box-shadow: 0 2px 2px #9BE4FF;
}
.stream .timestamp {
color: #a4a4a4;
font-size: 85%;
}
.stream .timestamp em {
margin-right: 5px;
}
.stream .entry:hover .name {
display: block;
}
.stream .head .profileImage {
float: left;
width: 65px;
padding-top: 10px;
padding-bottom: 2px;
}
.stream .head .profileImage img {
border-radius: 50%;
width: 40px;
margin-left: 15px;
}
.stream .head .basics {
float: left;
padding-top: 15px;
}
.stream .head .basics .stamp {
font-size: 110%;
font-weight: 500;
padding-bottom: 5px;
}
.stream .head .status {
float: right;
padding: 5px;
margin-right: 5px;
padding-bottom: 2px;
}
.stream .head .status a {
display: block;
border-radius: 50%;
padding: 5px;
}
.stream .head .status a:hover {
background: #ffda69;
}
.stream .head .status img {
width: 35px;
margin: 2px;
}
.stream .emotion {
text-align: left;
background: #3ca2fe;
min-height: 128px;
}
.stream .emotion img {
width: 180px;
}
.stream .emotion .name {
position: absolute;
padding: 10px;
margin-top: -80px;
color: #ffffff;
font-weight: 400;
margin-left: 190px;
font-size: 120%;
z-index: 2;
}
.stream .emotion .playEmotion img {
width: 40px;
height: 40px;
position: absolute;
margin-top: -80px;
margin-left: 72px;
border-radius: 50%;
opacity: 0.8;
}
.playEmotionLayer {
text-align: center;
width: 100%;
}
.stream .actionsStream .button {
padding: 5px 10px;
font-size: 90%;
}
.closeIconLayer {
position: absolute;
right: 20px;
top: -50px;
width: 30px;
}
.stream .nvG .spacer,
.stream .nvG .buttonDefault:first-child {
margin-left: 60px;
}
.stream .changed {
font-style: italic;
padding: 10px 15px;
color: #afafaf;
}
.stream .defaultText {
padding: 0 15px 5px 15px;
font-size: 100%;
line-height: 18px;
}
.stream .defaultText .headline {
font-size: 120%;
font-weight: 300;
margin-top: 10px;
}
.stream .subtext.important {
padding: 10px;
font-size: 100%;
font-weight: 600;
text-align: center;
}
.stream .galleryImageEntry {
height: auto;
min-height: 220px;
overflow: hidden;
}
.stream .galleryImageEntry img {
width: 100%;
}
.stream .galleryImageEntry .multi a {
display: block;
width: 50%;
float: left;
height: 110px;
}
.stream .galleryImageEntry .foot {
position: absolute;
margin-top: -65px;
width: 340px;
}
.stream .galleryImageEntry .foot a.removeButton {
background: #ffffff;
}
.stream .galleryImageEntry a.title,
.stream .galleryImageEntry .title {
padding: 8px 15px;
background: #61b2fa;
color: #ffffff;
border-radius: 5px;
font-size: 120%;
opacity: 0.8;
z-index: 2;
float: left;
}
.stream .showMoreEntries a {
color: #ffffff;
background: #ffa225;
display: block;
border-radius: 3px;
cursor: pointer;
padding: 12px 3px;
margin-bottom: 20px;
font-size: 110%;
text-align: center;
min-height: 20px;
line-height: 20px;
}
.stream .foot {
padding-bottom: 10px;
padding-left: 15px;
padding-top: 5px;
}
.stream .foot .button {
float: left;
padding: 10px 20px;
color: #ffffff;
border: 1px solid #339eff;
border-radius: 25px;
background: #3ca2fe;
font-weight: 600;
}
.stream .foot .button.small {
padding: 8px 10px;
color: #333333;
background: #f1f1f1;
border: 1px solid #d3d3d3;
font-size: 100%;
}
.stream .foot .button:hover {
background: #FDD978;
color: #333333;
}
.stream .foot .removeButton {
float: right;
cursor: pointer;
width: 20px;
height: 20px;
padding: 4px;
border-radius: 50%;
opacity: 0.2;
margin-right: 10px;
margin-top: 5px;
}
.stream .foot .removeButton:hover {
opacity: 1;
background: #ffda69;
}
.stream .entry:hover .tickerFoot {
visibility: visible;
}
.stream .tickerFoot a.button,
.stream .tickerFoot div {
float: left;
display: block;
float: right;
cursor: pointer;
width: 20px;
height: 20px;
padding: 5px;
border-radius: 3px;
opacity: 0.2;
margin-right: 5px;
}
.stream .tickerFoot a.button img {
width: 20px;
height: 20px;
}
.stream .tickerFoot a:hover.button,
.stream .tickerFoot div:hover {
background: #ffda69;
}
.tickerFoot {
padding-bottom: 5px;
padding-right: 15px;
text-align: right;
}
.tickerFoot a {
display: block;
float: right;
}
.tickerFoot:hover div,
.tickerFoot:hover a.button {
opacity: 1;
}
.tickerFoot a.commentCounter {
display: block;
float: left;
font-weight: 500;
color: #c5c5c5;
font-size: 100%;
padding-top: 8px;
margin-left: 20px;
}
.tickerFoot a:hover.commentCounter {
color: #ea5800;
}
.stream .profileImageEntry {
overflow: hidden;
}
.stream .profileImageEntry img {
width: 100%;
}
.stream .profileImageEntry .foot {
position: absolute;
margin-top: -45px;
width: 340px;
}
.stream .profileImageEntry .foot a.removeButton {
background: #ffffff;
}
.stream .profileImageEntry .title {
padding: 8px 15px;
background: #333333;
color: #ffffff;
border-radius: 5px;
font-size: 120%;
opacity: 0.8;
z-index: 2;
float: left;
}
.stream .addEntry {
width: 220px;
float: left;
height: 210px;
border: 1px solid #e5e5e5;
}
.stream .addEntry a {
border-radius: 50%;
height: 150px;
width: 150px;
margin-left: 30px;
margin-top: 30px;
display: block;
background: #e96116;
text-align: center;
}
.stream .addEntry a img {
width: 60%;
margin-top: 40px;
}
.stream .addEntry a:hover {
background: #ff9613;
}
.stream .ticker {
padding: 0 15px 0 15px;
font-size: 110%;
line-height: 18px;
}
.stream .ticker img {
vertical-align: text-bottom;
margin-top: 3px;
}
.stream .ticker .tickerFull {
display: block;
}
.stream .ticker .tickerTruncated {
display: none;
}
.stream .ticker .text {
padding-bottom: 10px;
width: 100%;
word-wrap: break-word;
}
.stream.discover .ticker .text {
overflow: hidden;
}
.stream .ticker.truncated .tickerFull {
display: none !important;
}
.stream .ticker.truncated .tickerTruncated {
display: block !important;
}
.stream .comments {
width: 100%;
}
.stream .comments .commentEntry {
clear: both;
padding-bottom: 6px;
padding-top: 5px;
}
.stream .comments .commentEntry:last-child {
border: none;
}
.stream .comments .headline .options {
float: left;
color: #999999;
}
.stream .comments .picture {
float: left;
width: 75px;
padding-top: 5px;
text-align: right;
}
.stream .comments .picture img {
width: 35px;
margin-right: 18px;
min-height: 35px;
border-radius: 50%;
}
.stream .comments .plain {
float: left;
width: 260px;
}
.stream .comments .plain .text {
color: #000000;
padding-right: 5px;
padding-top: 5px;
line-height: 140%;
font-size: 100%;
width: 220px;
}
.stream .comments .plain img {
vertical-align: text-bottom;
}
.stream .comments .plain .headline {
padding-bottom: 0px;
font-size: 11px;
padding-top: 5px;
}
.stream .comments .plain .headline em {
margin-left: 4px;
}
.stream .suggestComment {
width: 240px;
padding: 5px 10px;
border-radius: 3px;
padding-top: 8px;
line-height: 130%;
height: 18px;
border: 1px solid #DCDCDC;
color: #888888;
font-size: 100%;
}
.stream .suggestComment:hover {
border: 1px solid #3ca2fe;
cursor: text;
}
.stream .atUser {
font-size: 120%;
padding: 0 5px;
color: #3CA2FE;
font-weight: 900;
cursor: pointer;
}
.stream .atUser:hover {
color: #ea5800;
}
.stream .commentBox {
width: 100%;
padding-top: 7px;
padding-bottom: 0;
}
.stream .commentBox .profileImage {
float: left;
width: 75px;
text-align: right;
}
.stream .commentBox .profileImage img {
width: 35px;
margin-right: 18px;
min-height: 35px;
border-radius: 50%;
}
.stream .commentBox .plain {
float: left;
}
.stream .commentBox .inputComment {
width: 240px;
padding: 5px 10px;
border-radius: 3px;
padding-top: 8px;
line-height: 140%;
min-height: 52px;
border: 1px solid #c8c8c8;
font-size: 100%;
}
.stream .commentBox .inputComment.small {
min-height: 20px;
}
.stream .commentBox .emojiSelector {
width: 275px;
}
.stream .commentBox .inputComment:focus {
color: #000000;
border: 1px solid #b6b6b6;
background: #ffffff;
}
.stream .commentBox .buttonSend:hover {
border: 1px solid #000000;
color: #000000;
}
.stream .commentBox .features {
position: absolute;
z-index: 2;
width: 150px;
padding-top: 3px;
height: 25px;
display: none;
}
.stream .commentBox .editor {
border: none;
background: transparent;
}
.stream .commentBox .editor .smilies .entry {
border-bottom: none;
}
.stream .commentBox .editor .smilies .entries {
border: none;
}
.stream .commentBox .resizeFrame {
background: none;
}
.stream .actionSelector {
padding: 0;
padding-top: 5px;
}
.stream .commentOptions {
position: absolute;
margin-top: -35px;
width: 70px;
right: 20px;
}
.stream .commentOptions a {
width: 16px;
height: 16px;
padding: 6px;
margin-left: 3px;
border-radius: 50%;
background: #efefef;
float: right;
}
.stream .commentOptions a:hover {
background: #ffda69;
}
.stream .orphan {
width: 233px;
height: 288px;
background: #33b5e5;
border: 1px solid #28aada;
text-align: center;
}
.stream .orphan a {
display: block;
padding: 70px 10px;
color: #ffffff;
}
.stream .orphan .headline {
padding: 15px;
font-size: 140%;
font-weight: 200;
}
.stream .orphan.green {
background: #97c224;
border-color: #89b020;
}
.stream .editor .smilies {
width: 270px;
}
.stream .editor .smilies .entries {
width: 245px;
}
.stream .emoji {
margin: 0px;
}
.stream .entryHeader {
padding: 10px;
text-align: center;
font-size: 110%;
}
.stream .entryHeader img {
width: 50px;
background: #ffffff;
padding: 5px;
border: 4px solid #d9d9d9;
border-radius: 50%;
}
.stream .entryHeader em {
margin-left: 5px;
color: #919191;
}
/* Metarecord */
a.metaRecord {
color: #333333;
}
a.metaRecord .domain,
.metaRecordCompact .domain {
text-transform: uppercase;
margin: 10px 15px;
font-size: 90%;
color: #b3b3b3;
}
a.metaRecord .metaBox,
.metaRecordCompact .metaBox {
border-left: #ffa225 solid 3px;
max-width: 360px;
}
a.metaRecord .metaTitle,
.metaRecordCompact .metaTitle {
margin: 10px 15px 0px 15px;
font-weight: 800;
font-size: 100%;
line-height: 130%;
color: #333333;
}
a.metaRecord .metaText {
margin: 10px 15px;
line-height: 130%;
font-weight: 300;
}
/* Gridview-Vorschau für Spiele unter game.jappy.com (link/gameGridview.inc.html):
Hero-Grafik als Kartenhintergrund, Grid mit links Icon, rechts Titel +
Kurzbeschreibung, darunter kleine URL. */
a.gameGridview {
position: relative;
display: grid;
grid-template-columns: auto 1fr;
grid-template-areas: "icon body" "url url";
gap: 4px 14px;
align-items: center;
max-width: 360px;
margin-bottom: 15px;
padding: 16px;
border-radius: 8px;
overflow: hidden;
background-color: #1a1330;
background-size: cover;
background-position: center;
color: #ffffff;
text-decoration: none;
}
a.gameGridview .gameGridview__scrim {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(180deg, rgba(15, 12, 30, 0.55) 0%, rgba(15, 12, 30, 0.78) 100%);
}
a.gameGridview .gameGridview__icon {
grid-area: icon;
position: relative;
}
a.gameGridview .gameGridview__icon img {
display: block;
width: 56px;
height: 56px;
border-radius: 12px;
object-fit: cover;
}
a.gameGridview .gameGridview__body {
grid-area: body;
position: relative;
min-width: 0;
}
a.gameGridview .gameGridview__title {
display: block;
font-weight: 800;
font-size: 15px;
line-height: 1.2;
color: #ffffff;
}
a.gameGridview .gameGridview__desc {
display: block;
margin-top: 3px;
font-size: 12px;
line-height: 1.35;
color: rgba(255, 255, 255, 0.85);
}
a.gameGridview .gameGridview__url {
grid-area: url;
position: relative;
margin-top: 6px;
font-size: 11px;
color: rgba(255, 255, 255, 0.6);
word-break: break-all;
}
a:hover.gameGridview .gameGridview__title {
text-decoration: underline;
}
/* Ohne Icon (Spiele in Entwicklung / Portal-Übersicht): Titel/Beschreibung volle Breite */
a.gameGridview--noicon .gameGridview__body {
grid-column: 1 / -1;
}
/*Tickerdetailansicht */
.tickerDetails .left {
float: left;
width: 360px;
}
.tickerDetails .right {
float: left;
width: 360px;
margin-left: 40px;
}
/* Streamüberarbeitung #stream*/
a.streamVideoPreview,
a.streamMusicPreview {
display: block;
width: 100%;
overflow: hidden;
margin: auto;
position: relative;
}
a.streamVideoPreview img {
width: 100%;
height: auto;
}
a.streamVideoPreview .playButton,
a.streamMusicPreview .playButton {
position: relative;
background: url(//s.jappy.com/i/icon/stream/videoStart.png) no-repeat 50% 50%;
z-index: 2;
height: 50px;
top: -200px;
opacity: 0.8;
width: 100%;
}
a:hover.streamVideoPreview .playButton,
a:hover.streamMusicPreview .playButton {
background: url(//s.jappy.com/i/icon/stream/videoStartHover.png) no-repeat 50% 50%;
opacity: 1;
}
a.streamVideoPreview,
a.streamMusicPreview img {
width: 100%;
}
a.streamGifPreview {
display: block;
width: 100%;
max-height: 250px;
min-height: 200px;
overflow: hidden;
}
a.streamGifPreview .playButton {
position: relative;
background: url(//s.jappy.com/i/icon/stream/gifStart.png) no-repeat;
z-index: 2;
height: 50px;
margin-left: 150px;
margin-top: -178px;
opacity: 0.8;
width: 70px;
}
a:hover.streamGifPreview .playButton {
background: url(//s.jappy.com/i/icon/stream/gifStartHover.png);
opacity: 1;
}
a.streamGifPreview.animated .playButton {
display: none;
}
a.streamGifPreview .loading {
display: none;
position: relative;
background: url(//s.jappy.com/i/icon/loadingTop.gif) no-repeat 20px 10px #bcbcbc;
z-index: 2;
height: 50px;
margin-left: 150px;
margin-top: -178px;
opacity: 0.8;
width: 70px;
}
a.streamGifPreview.loading .loading {
display: block;
border-radius: 5px;
}
a.streamGifPreview img {
width: 100%;
max-height: 250px;
min-height: 200px;
}
.videoPlayButton {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
img.videoPlayButton {
width: 70px !important;
border: 1px solid #333333;
border-radius: 10px;
background: #333333;
}
img:hover.videoPlayButton {
border: 1px solid #e5e5e5;
border-radius: 10px;
}
/* Kommentierung in der Ticker Detailansicht */
.addCommentLine {
width: 480px;
padding-bottom: 5px;
padding-top: 5px;
}
.addCommentLine .inputComment {
width: 450px;
padding: 5px 10px;
line-height: 130%;
min-height: 52px;
border: 1px solid #c8c8c8;
color: #555555;
border-radius: 3px;
}
.addCommentLine .inputComment:focus {
color: #000000;
border: 1px solid #3373b0;
background: #ffffff;
}
.addCommentLine .editor {
border: none;
}
.addCommentLine .editor .smilies .entry {
border-bottom: none;
}
.addCommentLine .resizeFrame {
background: none;
}
.addCommentLine .features {
position: absolute;
z-index: 2;
width: 150px;
padding-top: 3px;
height: 25px;
display: none;
}
.addCommentLine .editor {
border: none;
background: #e5e5e5;
}
.addCommentLine .editor .smilies .entry {
border-bottom: none;
}
.addCommentLine .editor .smilies .entries {
border: none;
}
.addCommentLine .actionSelector .button {
float: right;
}
/*Attachments - pictures */
.shareImageLayer {
background: #b0dbff;
border: 1px solid #90c4f1;
box-shadow: 1px 1px 2px #c6c6c6;
}
.shareImageLayer a.entry {
display: block;
color: #333333;
cursor: pointer;
border-bottom: 1px solid #a4d5ff;
padding: 12px 11px;
}
.shareImageLayer a:hover.entry {
color: #000000;
background: #c2ebff;
border-bottom: 1px solid #99d7ff;
}
.attachedUserLink:hover {
background: #f1f1f1;
}
.attachedUserLink .linkIcon {
float: left;
width: 20px;
text-align: left;
}
.attachedUserLink .linkIcon img {
vertical-align: text-bottom;
margin: 0;
}
.attachedUserLink .linkPicture {
float: left;
width: 45px;
padding-top: 3px;
padding-bottom: 2px;
}
.attachedUserLink .linkPicture img {
width: 35px;
min-height: 35px;
}
.attachedUserLink .linkNick {
float: left;
width: 250px;
padding-top: 5px;
padding-bottom: 2px;
}
.attachedUserLink .linkOption {
float: left;
width: 30px;
}
/* Links */
.attachmentLinkEntry {
font-size: 14px;
line-height: 130%;
min-height: 30px;
padding-bottom: 1px;
padding-top: 2px;
width: 100%;
}
.attachmentLinkEntry img {
vertical-align: text-bottom;
margin-right: 3px;
}
.attachmentLinkEntry .link {
float: left;
padding-top: 3px;
max-width: 350px;
text-indent: 15px;
}
.attachmentLinkEntry .link img {
margin: 0 !important;
}
.attachmentLinkEntry .options {
float: right;
margin-left: 5px;
margin-right: 10px;
max-height: 30px;
}
.attachmentLinkEntry .options a:hover {
background: #ff9613;
color: #000000;
opacity: 1;
}
.attachmentLinkEntry .numberOfShares {
margin-top: 3px;
color: #747474;
background: #e5e5e5;
padding: 2px;
border-radius: 3px;
margin-left: 10px;
float: left;
font-size: 11px;
position: relative;
margin-top: -3px;
}
.attachmentLinkEntry a.tickerStatusButton {
float: right;
display: block;
width: 16px;
height: 16px;
padding: 5px;
border-radius: 50%;
}
.attachmentLinkEntry a:hover.tickerStatusButton {
background: #ffda69;
}
.tickerCompose .stream .links {
background: #d9d9d9;
padding-top: 10px;
}
.tickerCompose .stream .links .option {
position: absolute;
margin-left: 328px;
margin-top: -25px;
}
.tickerCompose .stream .entry {
border: none;
}
/* Bild Ticker */
.imageAttachedDefault {
text-align: center;
}
.imageAttachedDefault img {
height: 200px;
width: 100%;
max-width: 330px;
margin: auto;
}
.videoSubbar {
width: 100%;
padding-bottom: 5px;
}
.videoSubbar a.tickerStatusButton {
float: right;
display: block;
width: 16px;
height: 16px;
padding: 5px;
border-radius: 50%;
}
.videoSubbar a.button {
float: right;
background: #ffffff;
border-radius: 3px;
padding: 5px;
color: #333333;
}
.videoSubbar a:hover.tickerStatusButton {
background: #ffda69;
}
.videoSubbar .typeInfo {
font-size: 110%;
font-weight: 500;
color: #616161;
padding: 10px 0;
float: left;
margin-left: 15px;
}
.videoSubbar .numberOfShares {
margin-top: 3px;
color: #747474;
background: #e5e5e5;
padding: 2px;
border-radius: 3px;
margin-left: 10px;
float: left;
font-size: 11px;
position: relative;
margin-top: -3px;
}
.videoSubbar:hover a.tickerStatusButton {
display: block;
}
.stream .headlineBlog {
font-size: 120%;
font-weight: 500;
display: block;
line-height: 120%;
padding-top: 12px;
padding-bottom: 5px;
}
.stream .textBlog {
padding-top: 10px;
padding-bottom: 10px;
font-size: 110%;
font-weight: 400;
}
/* #echo */
.echoActionbar {
padding-top: 5px;
margin-right: 23px;
padding-bottom: 3px;
}
.echoActionbar .setEcho {
float: right;
margin-left: 5px;
color: #ffffff;
background: #3ca2fe;
border-radius: 3px;
cursor: pointer;
padding: 6px 0;
width: 100px;
font-size: 110%;
text-align: center;
min-height: 25px;
line-height: 25px;
}
.echoActionbar .setEcho:hover {
background: #e5e5e5;
}
.echoActionbar .setEcho.set {
background: #ffffff;
border: 1px solid #e1e1e1;
opacity: 0.5;
width: 55px;
}
.echoActionbar .setEcho.suggested {
background: #ffffff;
border: 1px solid #e2e2e2;
opacity: 1;
margin-left: 5px;
padding: 5px 0;
width: 55px;
}
.echoActionbar .setEcho img {
margin-left: 16px;
margin-top: 3px;
}
.echoActionbar .setEcho.set:hover {
background: #e1e1e1;
}
.echoActionbar .setEcho.suggested:hover {
background: #e1e1e1;
}
.listOfEchos {
margin-left: 15px;
padding-top: 5px;
margin-right: 15px;
float: left;
}
.stream .listOfEchos:hover {
cursor: pointer;
background: #ffedb0;
}
.listOfEchos .echo {
float: left;
padding: 7px 8px;
}
.listOfEchos .echo.add:hover {
background: #ffedb0;
border-radius: 10px;
cursor: pointer;
}
.listOfEchos .echo.super img {
animation: twistSuper 2.5s infinite;
}
.listOfEchos .echo span {
color: #939393;
margin-left: 5px;
font-size: 80%;
}
.listOfEchos .echo.own {
background: #f1f1f1;
border-radius: 10px;
padding-left: 12px;
padding-right: 12px;
margin-right: 10px;
}
.listOfEchos .echo.own img {
width: 20px;
}
.listOfEchos .echo.suggest {
border: 1px solid #f0f0f0;
margin-right: 5px;
border-radius: 10px;
}
.listOfEchos .echo.suggest span {
color: #7d7d7d;
}
.listOfEchos .echo.suggest img {
filter: grayscale(100%) contrast(10%);
opacity: 0.8;
}
.listOfEchos .echo.suggest:hover {
background: #ffedb0;
border: 1px solid #ffedb0;
}
.listOfEchos .echo.suggest:hover img {
filter: grayscale(0%) contrast(100%);
opacity: 1;
}
.listOfEchos .echo.addEcho {
background: #ffd237;
border-radius: 10px;
padding-left: 12px;
padding-right: 12px;
margin-right: 10px;
}
.listOfEchos .echo.addEcho:hover {
background: #ffa225;
animation: hoverAddEcho 1.5s forwards;
}
.listOfEchos .echo.addEcho img {
width: 20px;
}
.listOfEchos .more {
float: left;
margin: 5px 2px;
margin-left: 5px;
padding: 3px;
border-radius: 50%;
}
.listOfEchos .more span {
color: #b5b5b5;
position: relative;
margin-left: 4px;
font-size: 80%;
}
.echoInfos .numberOfComments {
float: right;
padding: 7px 8px;
margin-right: 0px;
padding-top: 13px;
}
.echoInfos .numberOfComments img {
width: 20px;
}
.echoInfos .numberOfComments span {
color: #939393;
margin-left: 5px;
font-size: 80%;
position: relative;
top: -4px;
}
.echoSelection {
width: 360px;
padding: 15px 0;
min-height: 500px;
}
.echoSelection .echoPointer {
margin-left: 285px;
}
.echoSelectionMobile .echoPointer {
margin-left: 250px;
}
.echoSelection .echoList {
animation: growEchoBox 0.4s;
}
.echoSelection .echoList {
width: auto;
background: #ffffff;
border-radius: 15px;
border: 10px solid #ffd237;
}
.echoSelection .echoList .entry {
float: left;
width: 55px;
height: 50px;
margin: 6px;
padding: 0px;
border-radius: 15px;
}
.echoSelection .echoList .entry:hover {
cursor: pointer;
background: #fdd978;
font-weight: 500 !important;
}
.echoSelection .echoList .echoIcon {
width: 80%;
padding: 10%;
padding-bottom: 5%;
text-align: center;
}
.echoSelection .echoList .echoIcon img {
width: 70%;
}
.echoSelection .echoList .entry.disable img {
filter: grayscale(100%);
opacity: 0.3;
}
.echoSelection .echoList .echoTitle {
width: 100%;
text-align: center;
font-size: 80%;
font-weight: 500;
}
.echoSelection .echoList .entry a {
color: #038494;
}
.echoSelection .echoList .entry.disable a {
color: #cccccc;
}
.echoLayerBackground {
position: fixed;
top: 0;
left: 0;
background: #8b8b8b;
width: 100%;
opacity: 0.3;
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
}
.echoHeadline {
font-weight: bold;
padding: 10px;
}
.echoListEntryList {
width: 100%;
height: 200px;
overflow-y: scroll;
overflow-x: hidden;
}
.echoListEntryList .echoText {
float: left;
padding: 10px 0;
text-indent: 10px;
}
.echoListEntryList .echoTimestamp {
float: left;
width: 100px;
text-indent: 10px;
font-size: 90%;
font-weight: 300;
padding: 10px 0;
}
.echoListEntryList .echoText .echoName {
font-weight: 600;
}
.echoListEntryList .echoIcon {
float: left;
}
.echoListEntryList .echoIcon img {
width: 25px;
vertical-align: text-bottom;
}
/* Stream - Attachments - pictures */
.attachedPictures {
text-align: center;
margin: 0 15px;
}
.attachedPictures a.attachedPicture,
.attachedPictures .attachedPicture {
display: block;
color: #9e9e9e;
width: 160px;
height: 200px;
margin: 0 5px 5px 0;
box-shadow: 1px 1px 2px #9c9c9c;
background: #ffffff;
border: 1px solid #bbbbbb;
cursor: pointer;
overflow: hidden;
float: left;
}
.attachedPictures .attachedPicture img {
height: auto;
margin: 0;
width: 160px;
}
.attachedPictures a.shareImage {
display: none;
width: 100%;
position: relative;
z-index: 2;
float: left;
}
.attachedPictures a.shareImage div {
background: #000000;
color: #ffffff;
opacity: 0.7;
padding: 5px;
width: 60px;
text-align: center;
margin-top: -43px;
margin-left: 10px;
border-radius: 5px;
margin-bottom: 20px;
}
.attachedPictures a.shareImage:hover div {
opacity: 1.0;
background: #ff9613;
}
.attachedPictures .attachedPicture.highlight {
border: 1px solid #3b89cb;
}
.attachedPictures.large a.attachedPicture {
display: block;
color: #9e9e9e;
width: 480px;
height: 520px;
margin: 0 5px 5px 0;
box-shadow: 1px 1px 2px #9c9c9c;
background: #ffffff;
border: 1px solid #bbbbbb;
cursor: pointer;
overflow: hidden;
float: left;
}
.attachedPictures.large .attachedPicture img {
height: auto;
margin: 0;
width: 480px;
}
.attachedPictures a.attachedPictureDynamic {
display: block;
padding: 0;
max-height: 250px;
overflow: hidden;
}
.attachedPictures a.attachedPictureDynamic img {
margin: 0;
max-width: 360px;
}
.attachedPictures a.attachedImage {
display: block;
padding: 0;
max-height: 250px;
width: 100%;
}
.attachedPictures .info {
padding: 12px 15px 5px 15px;
text-align: left;
font-style: italic;
background: #ffffff;
color: #acacac;
}
.attachedPictures .info.commented {
color: #333333;
}
.attachedPictures .info.large {
padding-bottom: 15px;
font-size: 120%;
}
.attachedPictures a:hover {
color: #555555;
}
.attachedPictures .additionalText {
float: left;
display: block;
margin-top: 25px;
margin-left: 1px;
font-weight: bold;
text-align: center;
background: #bcbcbc;
color: #000000;
padding: 2px;
border-radius: 3px;
}
.attachedPictures .attachedPicture:hover {
border: 1px solid #5da7e0;
box-shadow: 1px 1px 2px #5da7e0;
}
.markAsRead {
overflow: hidden;
background: #ffa225;
padding: 15px;
text-align: center;
color: #ffffff;
font-weight: 600;
}
.fixedAvailable .markAsRead {
animation: fadeOut 2.0s 2.0s;
animation-fill-mode: forwards;
position: fixed;
width: 100%;
top: 0;
left: 0;
height: 20px;
z-index: 1000001;
}
/* Rangbereich */
.rankProfileImage {
position: absolute;
z-index: 3;
margin-top: 20px;
}
.rankProfileImage img {
width: 200px;
max-height: 200px;
border-radius: 100px;
margin-left: 250px;
box-shadow: inset 0 0 10px #000;
}
.rankCount {
position: absolute;
z-index: 5;
margin-top: 150px;
margin-left: 280px;
font-size: 300%;
color: #ff9933;
text-shadow: 0 0 2px #000;
}
.rankInfoLink {
position: absolute;
z-index: 5;
margin-top: 200px;
margin-left: 480px;
}
.rankInfoLink a {
display: block;
float: left;
padding: 10px 15px;
color: #ffffff;
background: #ff9933;
border-radius: 10px;
}
.rankInfoLink a:hover {
background: #ff7f00;
}
.rankHeadline {
color: #e77300;
font-size: 160%;
margin-top: 15px;
padding: 10px 10px;
text-indent: 15px;
border-bottom: 2px solid #ff9933;
}
.rankHeadline .wrapper img {
vertical-align: text-bottom;
}
.boxRankInfo {
line-height: 160%;
background: #ffffff;
border-radius: 10px;
}
.boxRankInfo .headline {
font-size: 120%;
font-weight: 600;
padding: 10px;
padding-top: 10px;
text-align: center;
}
.boxRankInfo .icon {
float: left;
padding: 10px;
width: 60px;
text-align: center;
}
.boxRankInfo .name {
float: left;
padding: 10px;
padding-top: 20px;
font-size: 140%;
font-weight: 400;
max-width: 150px;
}
.boxRankInfo .info {
font-size: 70%;
color: #666666;
margin-top: 3px;
font-weight: 300;
}
.boxRankInfo .info a {
color: #666666;
text-decoration: underline;
}
.textBoxRank {
background: #ffffff;
border-radius: 10px;
}
.textBoxRank .wrapper {
padding: 20px;
line-height: 140%;
}
.textBoxRank .headline {
font-weight: 600;
font-size: 120%;
margin-bottom: 10px;
}
.progressBarRank {
background: #ffffff;
border-radius: 10px;
}
.progressBarRank .wrapper {
padding: 20px;
}
.progressBarRank .headline {
padding: 10px 0;
font-size: 120%;
font-weight: 900;
}
.progressBarRank .progressBackground {
width: 100%;
background: #c5c5c5;
height: 30px;
border-radius: 15px;
}
/* linear-gradient(#b3ce5d, #c9e967) */
.progressBarRank .progress {
height: 28px;
background: #c9e967;
background: linear-gradient(90deg, #c3ff68 0%, #d8ff7a 100%);
border: 1px solid #9be226;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
.progressBarRank .moreInfos {
padding: 10px 0;
}
.progressBarRank .rankInPercent {
position: absolute;
color: #333333;
font-weight: 900;
margin-top: -20px;
margin-left: 20px;
}
.infosRankSection .floatingBox {
float: left;
width: 360px;
margin: 10px 20px 10px 0;
}
.infosRank {
width: 100%;
padding-top: 20px;
border: 2px solid #ffcd21;
padding-bottom: 20px;
background: #ffd237;
margin-bottom: 10px;
border-radius: 20px;
}
.infosRank a {
color: #e36100;
font-weight: 600;
}
.infosRank a:hover {
color: #333333;
}
.xpProgressInfo {
text-align: right;
padding: 10px;
font-size: 100%;
}
.xpProgressInfo img {
vertical-align: text-bottom;
}
.infoAccount {
padding-bottom: 5px;
text-indent: 20px;
}
.infoAccount .icon {
float: left;
width: 50px;
text-align: center;
margin-left: 10px;
}
.infoAccount .value {
float: left;
width: 110px;
padding-top: 10px;
font-weight: 900;
font-size: 110%;
}
.infoAccount .text {
float: left;
padding-top: 10px;
}
.lineRank {
padding: 15px;
margin-right: 20px;
line-height: 140%;
font-size: 100%;
}
.lineRank img {
vertical-align: text-bottom;
}
.profileImageSettingsList .image {
width: 44%;
margin: 3%;
float: left;
background: #ffffff;
border-bottom: 4px solid #cacaca;
box-shadow: 0 2px 2px #cacaca;
border-radius: 3px;
}
.profileImageSettingsList .image img {
width: 100%;
}
.profileImageSettingsList .imageOptions .left {
float: left;
padding: 7px 10px;
}
.profileImageSettingsList .imageOptions .left img {
width: 30px;
}
.profileImageSettingsList .imageOptions .right {
float: right;
padding: 7px 10px;
}
.profileImageSettingsList .imageOptions .right img {
width: 30px;
margin-left: 10px;
}
.profileImageSettingsList .image.default {
border-bottom: 1px solid #ff9510;
}
.profileImageSettingsList .image.inactive {
border-bottom: 1px solid #e03b2a;
opacity: 0.5;
}
.profileImageContainer .imageWrapper {
padding: 10px 23%;
background: #333333;
}
.profileImageContainer .left {
background: #ffffff;
}
.profileImageContainer .right {
display: none;
}
.profileImageContainer .imageFavorite {
text-align: center;
padding: 5px;
padding-top: 10px;
background: #333333;
color: #ffffff;
font-weight: 500;
font-size: 110%;
}
.profileImageContainer .imageFavorite img {
vertical-align: text-bottom;
width: 20px;
}
.profileImageHidden img {
border: 2px solid red !important;
opacity: .5;
}
.profileImageStatusPending {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB98HDg84Bojj8YoAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAtUlEQVRo3u2XMQ7EMAgEYf991T3cV0WyckmgSMFKwwNGlg2LJyPiG0WtFZ9oVGbNepunqQfr8jT5djs8TW+RiieHPn/iyWVY73hySpwrntxi88yTY/bvvFzLdwe0Ftn0l9Dk2219Jaa3SMWTQ58/8eQyrHc8OSXOFU9usXnmyTH7d55cF9jBy0op7ReZ/VcCJ8aJcWKcGCfGiXFinBgnxolxYpwYJ8aJcWKcGCfGiXFinPif9wMFU17SZ0WBPQAAAABJRU5ErkJggg==');
background-size: cover;
background-repeat: no-repeat;
opacity: .5;
}
a.imageHighlight-dropped img {
border: 2px solid #33b5e5 !important;
}
/* #icons */
.creditsIconSmall,
.xpIconSmall {
margin-right: 5px;
}
.icIcon {
background: url(//s.jappy.com/i/icJ2017.png) no-repeat;
width: 17px !important;
height: 16px !important;
padding: 0 !important;
margin-left: 1px;
margin-right: 1px;
vertical-align: text-bottom;
}
.icIcon.noMargin {
margin: 0;
}
.icSpacer {
background: url(//s.jappy.com/i/s.gif) no-repeat;
height: 16px;
width: 1px;
}
.icJpy {
background-position: 0 0;
}
.icComment {
background-position: 0 -100px;
}
.icWiki {
background-position: 0 -200px;
padding-left: 20px;
}
.icOk {
background-position: -50px 0;
}
.icAdd {
background-position: -50px -50px;
}
.icDelete {
background-position: -50px -100px;
}
.icReadme {
background-position: -50px -200px;
}
.icHelp {
background-position: -50px -250px;
}
.icXp {
background-position: -50px -300px;
}
.icCredit {
background-position: -50px -350px;
}
.icMod {
background-position: -100px 0;
}
.icOfficer {
background-position: -100px -50px;
}
.icBuddy {
background-position: -100px -100px;
}
.icBuddyDel {
background-position: -100px -150px;
}
.icMenuePale {
background-position: -150px -50px;
}
.icEdit {
background-position: -150px -150px;
}
.icQuote {
background-position: -150px -200px;
}
.icStarPale {
background-position: -150px -350px;
}
.icContentDown {
background-position: -150px -300px;
}
.icShare {
background-position: -150px -450px;
}
.icX {
background-position: -150px -600px;
}
.icPlus {
background-position: -150px -500px !important;
}
.icLinkTo {
background-position: -200px 0;
}
.icPoRi {
background-position: -200px -50px;
}
.icUp {
background-position: -200px -150px;
padding: 0 2px 0 13px;
}
.icDown {
background-position: -200px -200px;
padding: 0 2px 0 13px;
}
.icGoto {
background-position: -200px -250px;
}
.icClose {
background-position: -200px -450px;
}
.icCloseHover {
background-position: -200px -500px;
}
.icListArrowGrey {
background-position: -200px -550px;
}
.icListArrow {
background-position: -200px -600px;
}
.icChatRead {
background-position: -250px 0;
}
.icChatSent {
background-position: -250px -100px;
}
.icChatReceived {
background-position: -250px -50px;
}
.icCheckboxChecked {
background-position: -300px -400px;
}
.icCheckbox {
background-position: -300px -450px;
}
.icInteresting {
background-position: -300px -700px;
}
.icInterestingDisable {
background-position: -300px -750px;
}
.icUndo {
background-position: -350px 0;
}
.icFwd {
background-position: -350px -100px;
}
.icGrowth {
background-position: -350px -250px;
}
.icShrink {
background-position: -350px -300px;
}
.icPrivacy {
background-position: -400px 0px;
}
.icTopicClose,
.icClosed {
background-position: -400px -250px;
}
.icTopicOpen,
.icOpened {
background-position: -400px -300px;
}
.icDraft {
background-position: -450px 0;
}
.icPrint {
background-position: -450px -50px;
}
.icSave {
background-position: -450px -100px;
}
.icPic {
background-position: -450px -150px;
}
.icBold {
background-position: -450px -200px;
}
.icItalic {
background-position: -450px -250px;
}
.icUnderline {
background-position: -450px -300px;
}
.icTxtColor {
background-position: -450px -350px;
}
.icTxtBg {
background-position: -450px -400px;
}
.icTxtSize {
background-position: -450px -450px;
}
.icUrl {
background-position: -450px -500px;
}
.icTextMore {
background-position: -450px -550px;
}
.icTextRight {
background-position: -450px -600px;
}
.icTextCenter {
background-position: -450px -650px;
}
.icTextList {
background-position: -450px -700px;
}
.icLink {
background-position: -450px -750px;
}
.icFld {
background-position: -500px 0;
}
.icFldAdd {
background-position: -500px -50px;
}
.icFldDel {
background-position: -500px -100px;
}
.icFldEdit {
background-position: -500px -150px;
}
.icStar {
background-position: -500px -300px;
}
.icSearch,
.icFind {
background-position: -500px -350px;
}
.icNew {
background-position: -500px -400px;
}
.icGalPic {
background-position: -500px -550px;
}
.icGalComment {
background-position: -500px -600px;
}
.icBirthday {
background-position: -550px 0;
}
.icGift {
background-position: -550px -50px;
}
.icEmotion {
background-position: -550px -100px;
}
.icTicket {
background-position: -550px -150px;
}
.icTicketPale {
background-position: -550px -200px;
}
.icLove {
background-position: -550px -250px;
}
.icImage {
background-position: -550px -300px;
}
.icForumTopic {
background-position: -550px -350px;
}
.icEditPale {
background-position: -600px 0;
}
.icDeletePale {
background-position: -600px -50px;
}
.icChatPending {
background: url(//s.jappy.com/i/icV5M2.png) no-repeat;
width: 17px !important;
height: 16px !important;
padding: 0 !important;
margin-left: 5px;
margin-right: 5px;
vertical-align: text-bottom;
background-position: -150px -150px;
}
/* Toggle */
.swOn {
background: url(//s.jappy.com/i/icJ2017.png) no-repeat -250px -249px;
padding: 2px;
padding-left: 28px;
font-weight: bold;
cursor: pointer;
}
.swOff {
background: url(//s.jappy.com/i/icJ2017.png) no-repeat -250px -299px;
padding: 2px;
padding-left: 28px;
cursor: pointer;
color: #888888;
}
/* Hintergrundfarben für Mailmarkierungen */
.markBgGreen {
background: #66cc33;
}
.markBgRed {
background: #ff0000;
}
.markBgDarkRed {
background: #990000;
}
.markBgOrange {
background: #ff6600;
}
.markBgBlack {
background: #000000;
}
.markBgGray {
background: #999999;
}
.markBgPurple {
background: #990099;
}
.markBgPink {
background: #ff66cc;
}
.markBgBlue {
background: #3399ff;
}
.markBgBrown {
background: #663300;
}
/* Anker-Offsets */
.aComBlogComment {
top: -50px;
display: block;
visibility: hidden;
position: relative;
}
/* Echos */
img.echoIconSmall {
height: 20px;
float: left;
}
/* Clearfix */
.cf:before,
.cf:after {
content: "\002d 0";
display: block;
height: 0;
overflow: hidden;
}
.cf:after {
clear: both;
}
.cf {
zoom: 1;
}
/* OF */
.bookmarkList {
width: 100%;
}
.bookmarkList .entry {
display: block;
height: 225px;
cursor: pointer;
float: left;
background: #ffffff;
border: 1px solid #d3d3d3;
border-bottom: 1px solid #cacaca;
border-right: 1px solid #cacaca;
box-shadow: 0 2px 2px #cacaca;
border-radius: 3px;
width: 143px;
margin-right: 5px;
margin-bottom: 10px;
}
.bookmarkList .entry:hover {
background: #ffe7c9;
border: 1px solid #ff9613;
}
.bookmarkList .entry .profileImage {
display: block;
padding: 10px;
text-align: center;
}
.bookmarkList .entry .profileImage img {
width: 100%;
border-radius: 50%;
}
.bookmarkList .entry .stamp {
padding: 10px;
font-size: 110%;
padding-right: 0;
}
.bookmarkList .entry .loginInfo {
padding: 10px;
padding-top: 0;
font-size: 90%;
font-weight: 300;
color: #999999;
}
.bookmarkList .entry .zipcode {
margin-top: -20px;
position: absolute;
border-radius: 5px;
background: #000000;
opacity: 0.8;
padding: 4px;
color: #ffffff;
margin-left: 10px;
}
.bookmarkList .entry a.delete {
position: absolute;
margin-left: 110px;
margin-top: -15px;
display: block;
width: 10px;
height: 10px;
}
.bookmarkList .entry .actions {
margin-left: 5px;
font-size: 80%;
}
.headerGuestLogin {
display: none;
}
.tmpLayerBackground {
position: fixed;
top: 0;
left: 0;
background: #8b8b8b;
width: 100%;
opacity: 0.3;
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
}
/* #TickerLayer */
.tickerLayer .button:hover {
text-decoration: underline;
}
.tickerLayer {
width: 100%;
background: #ffffff;
min-height: 1300px;
padding-bottom: 50px;
text-align: left;
}
.tickerLayer.edit {
background: #4e4e4e;
}
.tickerLayer.edit .frame .media .image img {
width: 360px !important;
}
.tickerLayer .left {
float: left;
width: 340px;
padding-bottom: 10px;
padding-top: 0;
}
.tickerLayer .right {
float: right;
width: 360px;
max-width: 360px;
margin-right: 20px;
}
.tickerLayer .back {
padding-top: 5px;
}
.tickerLayer .statusIcon {
text-align: center;
float: left;
font-size: 100%;
padding-bottom: 10px;
padding-top: 10px;
color: #666666;
font-weight: 500;
display: block;
}
.tickerLayer .statusIcon .icon {
float: left;
margin-left: 40px;
}
.tickerLayer .statusIcon .name {
float: left;
padding-top: 10px;
padding-left: 5px;
}
.tickerLayer .statusIcon .icon img {
width: 30px;
margin-right: 7px;
vertical-align: text-bottom;
}
.tickerLayer .statusIcon .select {
float: left;
padding-top: 10px;
}
.tickerLayer .statusIcon .select img {
width: 15px;
margin-left: 10px;
vertical-align: text-bottom;
}
.tickerSuggestions .listOfEchos {
margin-left: 15px !important;
}
.tickerLayer .feed .editor .smilies .entries {
width: auto !important;
}
.tickerLayer .feed .editor .smilies {
width: auto !important;
}
.tickerLayer .textareaCompose {
height: 4em;
font-size: 110%;
border: 1px solid #e8e8e8;
width: calc(100% - 5px);
max-width: calc(100% - 5px);
padding: 17px 15px;
margin: 0;
border-radius: 15px;
}
.tickerLayer a.selectStatus {
border: 1px solid #e6e6e6;
background: #e5e5e5;
cursor: pointer;
padding-right: 20px;
padding-bottom: 10px !important;
border-radius: 10px;
margin-bottom: 5px;
}
.tickerLayer a:hover.selectStatus {
background: #ffedb0;
}
.tickerLayer .editor .features {
display: none;
}
.tickerLayer button.positive {
background: #ffa124;
border: 1px solid #ffa124;
font-weight: 600;
color: #ffffff;
}
.tickerLayer button {
padding: 15px 15px;
border-radius: 10px;
background: #ffffff;
color: #a5a5a5;
cursor: pointer;
border: 1px solid #e5e5e5;
margin: 5px 5px 0 0;
}
.tickerLayer button:hover {
border: 1px solid #dddddd;
}
.tickerLayer .media .image {
min-height: 200px;
text-align: center;
}
.tickerLayer .media .image img {
max-width: 340px;
max-height: 650px;
border: 1px solid #e5e5e5;
}
.tickerLayer .media .image img:hover {
border: 1px solid #d0ffff;
}
.tickerLayer .media .noImage {
padding: 20px;
padding-top: 50px;
font-size: 120%;
height: 50px;
font-weight: 300;
vertical-align: middle;
background: #cacaca;
margin: 20px;
margin-top: 35px;
border-radius: 20px;
}
.tickerLayer .left.full {
width: 100% !important;
text-align: center;
}
.tickerLayer .left.full .media .image img {
width: 100% !important;
max-height: none !important;
max-width: 100% !important;
}
.tickerLayer .right.hide {
display: none;
}
.tickerLayer .ticker {
padding: 0 20px 0 0;
font-size: 110%;
line-height: 18px;
}
.tickerLayer .ticker img {
vertical-align: text-bottom;
margin-top: 3px;
}
.tickerLayer .ticker .text {
padding-bottom: 7px;
color: #333333;
width: 100%;
word-wrap: break-word;
}
.tickerLayer .ticker .text {
font-size: 110%;
font-weight: 300;
line-height: 140%;
}
.tickerLayer.edit .ticker .text {
padding-left: 10px;
}
.tickerLayer .saveTicker {
text-align: center;
margin-top: 10px;
text-align: right;
margin-right: 10px;
}
.tickerLayer .saveTicker button {
color: #ffffff;
background: #ffa124;
border: 1px solid #ffa124;
font-weight: 700;
cursor: pointer;
text-align: center;
display: inline-block;
padding: 15px 15px;
margin: 0 3px 3px 0;
border-radius: 15px;
margin: auto;
}
.tickerLayer .saveTicker button.preview {
background-color: #ffffff;
border: 1px solid #eaeaea;
color: #c8c8c8;
margin-right: 5px;
}
.tickerLayer .saveTicker button[disabled] {
background: #ccc;
border: 1px solid #aaa;
}
.tickerLayer .addTickerHeadline {
text-align: center;
color: #ffffff;
font-weight: 800;
padding: 10px;
font-size: 150%;
position: relative;
margin-top: -40px;
}
.tickerLayer .statusSelector .top {
padding-bottom: 0;
}
.tickerLayer .explanation {
text-align: center;
color: #9b9b9b;
font-size: 120%;
font-weight: 600;
}
.tickerLayer .explanation img {
width: 100px;
}
.tickerLayer .startCamera {
padding: 20px 20px 0px 20px;
margin-top: 20px;
text-align: center;
}
.tickerLayer .startCamera a {
color: #999;
padding: 10px;
background: #f1f1f1;
border-radius: 10px;
}
.tickerLayer .startCamera a:hover {
background: #ffffff;
}
.tickerLayer .fileSelection .headline {
font-size: 150%;
font-weight: 300;
color: #555555;
text-align: center;
}
.tickerLayer .prepareImage {
animation: prepareImage 1.0s infinite;
width: 100px;
margin: auto;
}
.tickerLayer .imageUploadStatus {
padding: 0 20px;
text-align: center;
color: #999;
font-weight: bold;
}
.tickerLayer .imageUploadStatus .info {
font-weight: 300;
color: #999999;
margin-top: 20px;
}
.tickerLayer .removeImage {
text-align: center;
color: #999;
padding: 10px;
background: #e5e5e5;
margin-top: 10px;
width: 340px;
cursor: pointer;
border-radius: 10px;
}
.tickerLayer .imageUploadStatus .headline {
font-weight: 300;
padding: 20px;
font-size: 150%;
}
.tickerLayer .tickerUserHead .actionRight {
float: right;
padding-top: 10px;
}
.tickerLayer .tickerUserHead .actionRight .subscribe {
float: left;
}
.tickerLayer .tickerUserHead .actionEntry {
padding: 8px 15px;
font-weight: 600;
background: #4ecdff;
color: #ffffff;
border-radius: 20px;
opacity: 1.0;
}
.tickerLayer .tickerUserHead .actionEntry span {
font-weight: 400;
margin-left: 5px;
}
.tickerLayer .tickerUserHead .actionEntry.active {
background: #e4e4e4;
color: #717171;
}
.tickerLayer .tickerUserHead .actionEntry:hover {
background: #ffd237;
opacity: 1.0;
cursor: pointer;
border-radius: 20px;
transition: 0.5s;
}
.tickerLayer .tickerUserHead .actionEntry img {
width: 20px;
}
.tickerLayer .tickerUserHead .actionButton {
float: left;
padding: 8px 15px;
margin-left: 5px;
font-weight: 600;
background: #22d8d8;
color: #ffffff;
border-radius: 20px;
opacity: 1.0;
}
.tickerLayer .tickerUserHead .actionButton span {
font-weight: 400;
margin-left: 5px;
}
.tickerLayer .tickerUserHead .actionButton img {
width: 20px;
float: left;
}
.tickerLayer .tickerUserHead .actionButton .text {
float: left;
padding: 5px;
margin-left: 5px;
}
.tickerLayer .tickerUserHead .actionButton.boost {
background: #fd78a9;
}
.tickerLayer .tickerUserHead .actionButton.edit {
background: #acacac;
}
.tickerLayer .tickerUserHead .actionButton:hover {
background: #ffd237;
opacity: 1.0;
cursor: pointer;
border-radius: 20px;
}
.tickerLayer .zoom {
float: left;
margin-left: 15px;
padding: 5px;
padding-right: 10px;
margin-top: 15px;
color: #ffffff;
position: absolute;
border-radius: 20px;
background-color: rgba(0, 0, 0, 0.3);
text-align: center;
opacity: 0.8;
}
.tickerLayer .zoom img {
width: 25px;
float: left;
border: none;
margin-left: 5px;
}
.tickerLayer .zoom .text {
float: left;
display: none;
padding: 5px;
margin-left: 5px;
}
.tickerLayer .media:hover .zoom .text {
display: block;
}
.tickerLayer .zoom:hover {
opacity: 1;
cursor: pointer;
}
.tickerLayer .zoom:hover img {
border: none;
}
.tickerLayer .feed .editor .smilies {
padding: 0;
}
.tickerLayer .tickerTopic {
width: 100%;
margin-bottom: 10px;
}
.tickerLayer .tickerTopic .listOfOptions {
padding: 0 0 0 10px;
float: right;
}
.tickerLayer .tickerTopic .listOfOptions .badFeedback {
float: left;
}
.tickerLayer .tickerTopic .listOfOptions .share {
float: left;
}
.tickerLayer .tickerTopic .listOfOptions .stats {
float: left;
}
.tickerLayer .tickerTopic .listOfOptions img {
width: 25px;
}
.tickerLayer .tickerTopic .listOfOptions .option {
width: 25px;
height: 25px;
padding: 5px;
border-radius: 50px;
opacity: 0.5;
cursor: pointer;
}
.tickerLayer .tickerTopic .listOfOptions .option:hover {
background: #f5c934;
opacity: 1.0;
transition: 0.5s;
}
.tickerLayer .topicInfo {
float: left;
}
.tickerLayer .topicInfo .icon {
float: left;
}
.tickerLayer .topicInfo .icon img {
width: 30px;
}
.tickerLayer .topicInfo .name {
float: left;
padding: 10px;
}
.tickerLayer .topicInfo .infoTopicRemoved {
float: left;
padding: 14px 3px;
color: #9a9a9a;
}
.tickerLayer .topicInfo .infoTopicRemoved:hover {
text-decoration: underline;
color: #0078E8;
}
.tickerLayer .referenceUser {
float: left;
padding-bottom: 5px;
padding-top: 5px;
}
.tickerLayer .referenceUser .profileImage {
float: left;
width: 60px;
padding-top: 10px;
padding-bottom: 2px;
}
.tickerLayer .referenceUser .profileImage img {
border-radius: 50%;
width: 35px;
margin-left: 10px;
}
.tickerLayer .referenceUser .basics {
float: left;
padding-top: 10px;
}
.tickerLayer .referenceUser .basics .stamp {
font-size: 130%;
font-weight: 400;
padding-bottom: 3px;
}
.tickerLayer .referenceUser .basics .timestamp {
color: #939393;
padding-top: 5px;
}
.tickerLayer .statusAttachment {
font-size: 12px;
font-weight: 400;
margin-left: 5px;
}
.tickerLayer .statusAttachment img {
vertical-align: bottom;
}
.tickerLayer .editing .media {
margin-top: 20px;
}
.tickerLayer .editing .solutionText {
background-image: linear-gradient(to bottom, #f67a67 0, #ff998a 100%);
padding: 20px 15px;
text-align: center;
}
.tickerLayer .editing .solutionText input {
padding: 10px;
border-radius: 20px;
border: 1px solid #f88270;
width: 300px;
}
.tickerLayer .editing .solutionText .solutionInfo {
padding: 5px;
font-weight: 300;
font-size: 90%;
}
.tickerLayer .editing .solutionText .solutionHeadline {
padding: 5px;
font-weight: 800;
font-size: 120%;
}
.tickerLayer .editing .selectionRadio {
margin-bottom: 5px;
}
.tickerLayer .editing .typeOfSolution {
background: #f1f1f1;
border: 1px solid #ffffff;
padding: 10px;
}
.tickerLayer .send .button {
background: url('//s.jappy.com/i/icon/send.png') no-repeat 50% 50% #4ecdff;
width: 33px;
height: 33px;
background-size: 25px;
border-radius: 50%;
border: 1px solid #42bcec;
margin-left: 5px;
cursor: pointer;
}
.tickerLayer .send .button:hover {
border: 1px solid #00a7b7;
background: url("//s.jappy.com/i/icon/send.png") no-repeat 50% 50% #78d9ff;
background-size: 25px;
color: #ffffff;
transition: 0.5s;
}
.gameTerms {
background-image: linear-gradient(to bottom, #f67a67 0, #ff998a 100%);
padding: 20px 15px;
font-weight: 300;
line-height: 150%;
border-radius: 10px;
}
.gameTerms .title {
font-size: 110%;
}
.layerTickerDetails .tickerLayer .frame.editing.tickerTopics .editor {
display: none;
}
.tickerLayer .addons {
margin-bottom: 13px;
margin-top: 5px;
}
.tickerLayer .addons .addonEntry {
float: left;
cursor: pointer;
margin-right: 2px;
margin-bottom: 3px;
display: inline-block;
background: #cccccc;
border-radius: 5px;
color: #6e6e6e;
padding: 5px 12px 5px 5px;
font-weight: 400;
font-size: 100%;
}
.tickerLayer .addons .addonEntry img {
width: 30px;
vertical-align: middle;
margin-right: 3px;
}
.tickerLayer .addons .additional {
display: none;
}
.tickerLayer .addons.showAll .additional {
display: inline-block;
}
.tickerLayer .addons.showAll .more {
display: none;
}
.tickerLayer .addons .addonEntry:hover {
background: #ffedb0;
}
.tickerLayer .emojiButton img {
width: 25px;
margin-left: 320px;
position: absolute;
margin-top: -35px;
cursor: pointer;
}
.tickerLayer .emojiButton img:hover {
width: 27px;
margin-left: 319px;
}
.tickerLayer .clearForm {
margin: auto;
width: 360px;
padding: 10px;
font-size: 90%;
font-weight: 300;
}
.tickerLayer .clearForm img {
width: 20px;
}
.tickerLayer .clearForm a {
color: #dddddd;
cursor: pointer;
}
.tickerLayer .clearForm a:hover {
text-decoration: underline;
}
.tickerLayer .listOfEchos {
margin: 0;
}
.tickerLayer .feed .actions .icon {
float: left;
padding: 5px 0;
margin-left: 10px;
}
.tickerLayer .feed .actions .icon img {
width: 35px;
}
.tickerLayer .feed .actions .name {
float: left;
color: #dddddd;
font-weight: 300;
margin: 5px;
margin-left: 10px;
}
.hashTagLink {
color: #ec23cb;
}
.videoEditor {
width: 360px;
min-height: 250px;
position: relative;
}
.liveVideo {
padding-bottom: 10px;
position: relative;
}
.iconHelp {
width: 360px;
margin: auto;
margin-top: 50px;
}
.iconHelp .headline {
width: 100%;
text-align: center;
font-weight: 600;
color: #333333;
font-size: 120%;
padding: 10px 0;
}
.iconHelp .entry {
margin-bottom: 20px;
}
.iconHelp .icon {
float: left;
width: 70px;
height: 70px;
border-radius: 50%;
background: #dddddd;
text-align: center;
margin-left: 10px;
}
.iconHelp .icon img {
width: 50px;
margin: auto;
margin-top: 10px;
}
.iconHelp .text {
float: left;
font-weight: 300;
color: #cacaca;
font-size: 110%;
padding: 0;
margin-left: 30px;
margin-top: 5px;
line-height: 140%;
max-width: 240px;
}
.iconHelp .text a {
color: #ffffff;
text-decoration: underline;
}
.iconHelp.bright .text {
color: #676767;
}
.tickerLayer .tickerTop {
background: #ffffff;
padding-bottom: 5px;
width: 360px;
}
.tickerLayer.edit .tickerTop {
border: none;
}
/* background-image: linear-gradient(to bottom, #88c7ff 0%, #78bfff 50%) */
.tickerLayer .topbar {
width: calc(100% - 10px);
}
.tickerLayer .topbar .actions {
float: right;
padding: 5px 0;
}
.tickerLayer .topbar .actions .badFeedback {
float: left;
}
.tickerLayer .topbar .actions .share {
float: left;
}
.tickerLayer .topbar .actions .stats {
float: left;
}
.tickerLayer .topbar .actionEntry {
padding: 5px;
opacity: 0.4;
margin-right: 3px;
float: right;
color: #000000;
}
.tickerLayer .topbar .subscribe .actionEntry {
padding: 8px 15px;
font-weight: 600;
background: #62b5ff;
color: #ffffff;
border-radius: 20px;
opacity: 1.0;
}
.tickerLayer .topbar .subscribe .actionEntry span {
font-weight: 400;
margin-left: 5px;
}
.tickerLayer .topbar .badFeedback .actionEntry {
margin-right: 10px;
}
.tickerLayer .topbar .actionEntry:hover {
background: #ffd237;
opacity: 1.0;
cursor: pointer;
border-radius: 10px;
}
.tickerLayer .topbar .actionEntry.active {
background: none;
color: #898989;
}
.tickerLayer .topbar .actionEntry img {
width: 20px;
}
.tickerLayer .listOfEchos {
cursor: pointer;
}
.tickerLayer .topbar .numberOfSubscribers {
padding: 5px;
margin-right: 10px;
float: left;
color: #9a9a9a;
margin-top: 15px;
}
.tickerLayer .nonMobile {
display: none;
}
.tickerLayer .attachments {
width: calc(100% - 20px);
max-width: 500px;
}
.tickerLayer .info {
background: #fff;
border-radius: 15px;
padding: 10px 0px;
text-align: left;
}
.tickerLayer .info .headline {
padding: 15px;
font-weight: 900;
}
.tickerLayer .info .description {
padding: 0px 15px 15px 15px;
line-height: 1.3;
}
.fixedAvailable .layerTickerDetails {
position: fixed !important;
height: 100%;
width: 100%;
top: 40px !important;
overflow-y: scroll;
margin-top: 0 !important;
}
.layerTickerDetails .tickerLayer .frame.editing {
background: #ffffff;
}
.listOfSuperEchos {
margin-top: 5px;
}
.listOfSuperEchos a.superEcho {
display: block;
float: left;
padding: 8px 10px;
font-weight: 300;
border-radius: 20px;
margin-right: 3px;
margin-bottom: 3px;
background: #fff5d4;
color: #565656;
font-weight: 600;
font-size: 90%;
}
.listOfSuperEchos a:hover.superEcho {
background: #ffedaf;
cursor: pointer;
color: #000000;
}
.listOfSuperEchos a.superEcho img {
width: 15px;
margin-right: 5px;
vertical-align: text-bottom;
}
.listOfSuperEchos.showOnlySome .hidden {
display: none;
}
/* Ticker-Layer Editor */
.tickerLayer .twoPane {
width: 360px;
border-radius: 10px;
padding: 20px;
min-height: 480px;
text-align: left;
margin: auto;
}
.tickerLayer .twoPane .meta {
width: 100%;
}
.tickerLayer .twoPane .meta .headline {
padding: 20px 15px;
font-size: 120%;
font-weight: 600;
color: #333333;
}
.tickerLayer .twoPane .meta .description {
padding: 0px 15px;
margin-right: 20px;
color: #9a9a9a;
font-weight: 300;
line-height: 130%;
}
.tickerLayer .twoPane .meta .description div {
margin-bottom: 1.5em;
}
.tickerLayer .twoPane .content {
width: 100%;
}
.tickerLayer .twoPane .close {
float: right;
padding-right: 30px;
padding-top: 25px;
}
.tickerLayer .twoPane .close img {
cursor: pointer;
}
.tickerLayer .back img {
width: 35px;
padding: 5px;
margin-left: 10px;
cursor: pointer;
}
.tickerLayer .back img:hover {
border-radius: 50%;
background: #efefef;
}
/* Ticker-Layer - Themenauswahl */
.topicSelector .topicList {
padding-top: 15px;
}
.topicSelector .topic {
display: block;
min-height: 40px;
padding: 4px;
line-height: 120%;
border: 1px solid #fff;
border-radius: 10px;
margin-bottom: 3px;
}
.topicSelector .topic .icon {
float: left;
width: 40px;
}
.topicSelector .topic .icon img {
width: 30px;
height: 30px;
margin: 5px;
}
.topicSelector .topic .title {
margin-left: 40px;
display: block;
font-size: 110%;
font-weight: 600;
color: #333333;
padding: 3px 7px;
}
.topicSelector .topic .description {
margin-left: 40px;
font-size: 90%;
display: block;
color: #999999;
padding: 3px 7px;
padding-top: 0;
font-weight: 300;
}
.topicSelector .topic:hover {
background: #ffedb0;
border: 1px solid #ffd237;
}
.topicSelector .topic:active {
background: #efefef;
border: 1px solid #efefef;
}
.topicSelector .topic.active {
background: #efefef;
border: 1px solid #efefef;
}
/* Ticker-Layer - Ortsauswahl */
.locationSelector .search {
text-align: left;
}
.locationSelector .search input {
margin-left: 1px;
display: block;
width: 80%;
border-radius: 3px;
padding: 8px 15px;
border: 1px solid #efefef;
background: #f7f7f7;
font-size: 100%;
}
.locationSelector .locationList:first-child {
padding-top: 15px;
}
.locationSelector .location {
display: block;
padding: 5px;
border-radius: 5px;
border: 1px solid #fff;
margin-bottom: 3px;
}
.locationSelector .location strong {
display: block;
color: #333333;
padding: 3px;
font-weight: 700;
}
.locationSelector .location span {
display: block;
color: #555555;
padding: 3px;
font-weight: 300;
}
.locationSelector .location:hover {
background: #efefef;
border: 1px solid #c0c0c0;
}
/* #feed Entdecken und Abos */
.feed {
padding-top: 5px;
}
.streamLoading {
padding: 50px 20px;
text-align: center;
width: 100%;
}
.streamLoading img {
width: 150px;
}
.streamLoading .text {
font-size: 100%;
font-weight: 700;
color: #666666;
padding: 10px;
}
.feed .column {
float: left;
width: 360px;
}
.feed .column.two {
margin-left: 30px;
}
.feed a.statusIcon {
text-align: center;
font-size: 100%;
padding-bottom: 4px;
padding-top: 4px;
color: #666666;
font-weight: 500;
display: block;
cursor: pointer;
}
.tickerLayer .feed a.statusIcon {
padding-top: 10px;
}
.feed a.statusIcon .icon {
float: left;
margin-left: 20px;
}
.feed a.statusIcon .name {
float: left;
padding-top: 10px;
}
.feed a.statusIcon .name:hover {
text-decoration: underline;
}
.feed a.statusIcon img {
width: 30px;
margin-right: 7px;
vertical-align: text-bottom;
}
/* Bild Ticker ;transform: scale(0.99)*/
.feed .attachedImage {
text-align: center;
}
.feed .attachedImage img {
height: 360px;
width: 100%;
max-width: 360px;
margin: auto;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
.feed .entry.viewed .attachedImage img {
height: 100px;
border-bottom: 3px solid #ffa225;
}
.feed .fragment {
margin-bottom: 20px;
max-width: 360px;
}
.feed .hashtagList {
padding-left: 20px;
padding-top: 10px;
line-height: 140%;
}
.feed .hashtagList a {
margin-right: 5px;
}
.feed .entry {
cursor: pointer;
text-align: left;
max-width: 360px;
background: #ffffff;
color: #333333;
border: 1px solid #dcdcdc;
border-top: none;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.feed .fragment.hideTicker {
animation: hideTickerEntry 1s forwards;
}
.feed .fragment.updateTicker {
animation: updateTickerEntry 1.0s forwards;
animation-iteration-count: 1;
}
.feed .fragment:hover .entry {
animation: showBorder 1.0s;
border: 1px solid #85c4ff;
border-top: none;
}
.feed .fragment .actions {
border: 1px solid #e5e5e5;
border-bottom: none;
}
.feed .fragment:hover .actions {
background: #dadada;
animation: showBorder 1.0s;
border: 1px solid #85c4ff;
border-bottom: none;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.feed .entry {
display: block;
}
.feed.detail .actionSelector .button:first-child {
margin-left: 0;
}
.feed.detail .entry {
border-bottom: none;
}
.feed .hashtagAbo {
background: #ff39de;
color: #ffffff;
font-weight: 900;
padding: 0 3px;
border-radius: 3px;
margin-left: 3px;
}
.feed .firstPage {
display: none;
}
.feed .entry.setReadRecently {
box-shadow: 0 2px 2px #9BE4FF;
}
.feed .timestamp {
color: #a4a4a4;
font-size: 85%;
margin-top: 1px;
}
.feed .timestamp em {
margin-right: 5px;
}
.feed .timestamp a {
color: #cccccc;
}
.feed .head {
padding-bottom: 10px;
}
.feed .head .profileImage {
float: left;
width: 55px;
padding-top: 10px;
padding-bottom: 2px;
margin-left: 5px;
}
.feed .head .profileImage img {
border-radius: 50%;
width: 30px;
margin-left: 15px;
}
.feed .head .basics {
float: left;
padding-top: 12px;
}
.feed .head .basics .stamp {
font-size: 100%;
font-weight: 500;
padding-bottom: 5px;
}
.feed a.emotionIcon {
float: left;
}
.feed .actionText {
float: left;
padding: 15px 20px;
min-height: 10px;
color: #666666;
font-weight: 500;
}
.feed .emotion a.answer {
float: left;
display: block;
padding: 12px;
margin-left: 20px;
font-weight: 700;
margin-top: 40px;
color: #ffffff;
border-radius: 20px;
border: 1px solid #36daff;
width: 100px;
text-align: center;
background: #17c7ef;
}
.feed .emotion a:hover.answer {
border-color: #ffffff;
font-weight: 500;
transform: scale(1.05);
}
.feed .emotion {
text-align: left;
background: #17cdf6;
min-height: 128px;
}
.feed .emotion img {
width: 180px;
}
.feed .emotion .name {
position: absolute;
padding: 10px;
margin-top: -80px;
color: #ffffff;
font-weight: 400;
margin-left: 190px;
font-size: 120%;
z-index: 2;
}
.feed .emotion .playEmotion img {
width: 40px;
height: 40px;
position: absolute;
margin-top: -80px;
margin-left: 72px;
border-radius: 50%;
opacity: 0.8;
}
.playEmotionLayer {
text-align: center;
width: 100%;
}
.feed .actionsStream .button {
padding: 5px 10px;
font-size: 90%;
}
.closeIconLayer {
position: absolute;
right: 20px;
top: -50px;
width: 30px;
}
.feed .nvG .spacer,
.feed .nvG .buttonDefault:first-child {
margin-left: 60px;
}
.feed .changed {
font-style: italic;
padding: 10px 15px;
color: #afafaf;
}
.feed .defaultText {
padding: 0 15px 5px 15px;
font-size: 100%;
line-height: 18px;
}
.feed .defaultText .headline {
font-size: 120%;
font-weight: 300;
margin-top: 10px;
}
.feed .subtext.important {
padding: 10px;
font-size: 100%;
font-weight: 600;
text-align: center;
}
.feed .galleryImageEntry {
height: auto;
min-height: 220px;
overflow: hidden;
}
.feed .galleryImageEntry img {
width: 100%;
}
.feed .galleryImageEntry .multi a {
display: block;
width: 50%;
float: left;
height: 110px;
}
.feed .galleryImageEntry .foot {
position: absolute;
margin-top: -65px;
width: 340px;
}
.feed .galleryImageEntry .foot a.removeButton {
background: #ffffff;
}
.feed .galleryImageEntry a.title,
.feed .galleryImageEntry .title {
padding: 8px 15px;
background: #61b2fa;
color: #ffffff;
border-radius: 5px;
font-size: 120%;
opacity: 0.8;
z-index: 2;
float: left;
}
.feed .showMoreEntries a {
color: #ffffff;
background: #ffa225;
display: block;
border-radius: 3px;
cursor: pointer;
padding: 12px 3px;
margin-bottom: 20px;
font-size: 110%;
text-align: center;
min-height: 20px;
line-height: 20px;
}
.feed .profileImageEntry {
overflow: hidden;
}
.feed .profileImageEntry img {
width: 100%;
}
.feed .profileImageEntry .foot {
position: absolute;
margin-top: -45px;
width: 340px;
}
.feed .profileImageEntry .foot a.removeButton {
background: #ffffff;
}
.feed .profileImageEntry .title {
padding: 8px 15px;
background: #333333;
color: #ffffff;
border-radius: 5px;
font-size: 120%;
opacity: 0.8;
z-index: 2;
float: left;
}
.feed .ticker {
padding: 0 20px 0 20px;
font-size: 110%;
line-height: 18px;
}
.tickerLayer.edit .feed .ticker {
padding-left: 0;
}
.feed .ticker img {
vertical-align: text-bottom;
margin-top: 3px;
}
.feed .ticker .tickerFull {
display: block;
}
.feed .ticker .tickerTruncated {
display: none;
}
.feed .ticker .text {
padding-bottom: 7px;
color: #333333;
width: 100%;
font-size: 110%;
line-height: 140%;
padding-top: 10px;
word-wrap: break-word;
}
.feed.discover .ticker .text {
overflow: hidden;
}
.feed .ticker.truncated .tickerFull {
display: none !important;
}
.feed .ticker.truncated .tickerTruncated {
display: block !important;
}
/* Layoutvariante */
.feed .tickerEntry {
cursor: pointer;
text-align: left;
max-width: 360px;
background: #ffffff;
border-radius: 10px;
}
.feed .tickerEntry .picture {
float: left;
width: 120px;
padding: 10px;
}
.feed .tickerEntry .picture img {
width: 120px;
height: 120px;
border-radius: 10px;
}
.feed .tickerEntry .content {
float: left;
max-width: 210px;
padding: 10px;
padding-top: 0;
padding-left: 0px;
font-size: 110%;
line-height: 140%;
}
.feed .tickerEntry .content.wide {
float: none;
max-width: 100%;
padding-top: 10px;
padding-left: 20px;
}
.feed .tickerEntry .text {
padding-top: 10px;
}
.feed .tickerEntry .text2 {
background: #cccccc;
padding: 10px;
border-radius: 10px;
}
.feed .tickerHeader {
padding-bottom: 5px;
}
.feed .tickerHeader .channelLabel {
color: #ffffff;
border-radius: 10px;
padding: 2px 10px;
display: block;
float: left;
font-weight: 500;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
max-width: 100px;
}
.feed .tickerHeader .channelLabel img {
width: 20px;
height: 20px;
}
.feed .tickerHeader {
width: 100%;
}
.feed .tickerFooter {
padding-top: 5px;
}
.feed .tickerFooter .profileImage {
float: left;
width: 30px;
margin-left: 10px;
}
.feed .tickerFooter .profileImage img {
border-radius: 50%;
width: 20px;
}
.feed .tickerFooter .basics {
float: left;
padding-bottom: 5px;
padding-top: 5px;
}
.feed .tickerFooter .basics .stamp {
font-size: 100%;
font-weight: 500;
padding-bottom: 5px;
}
.feed .tickerFooter .basics .more {
font-size: 90%;
font-weight: 300;
color: #939393;
margin-left: 5px;
}
.feed .tickerHeader .list {
float: right;
margin-right: 10px;
display: none;
}
.feed .tickerHeader .list .action {
float: right;
border-radius: 50%;
padding: 3px;
cursor: pointer;
margin-left: 15px;
}
.feed .tickerHeader .list .action:hover {
transform: scale(1.2);
}
.feed .tickerHeader .list img {
width: 15px;
}
.feed .tickerEchos {
padding-bottom: 5px;
margin-left: 20px;
}
.feed .tickerEchos .echos {
padding-top: 5px;
float: left;
}
.feed .tickerEchos .echos img {
height: 20px;
}
.feed .tickerEchos .echos .echo {
float: left;
padding: 5px 8px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: 35px;
border: none;
border-radius: 10px;
margin-right: 3px;
}
.feed .tickerEchos .echos .echo.add {
border: none;
}
.feed .tickerEchos .echos .echo.add:hover {
background: #ffedb0;
border-radius: 10px;
cursor: pointer;
}
.feed .tickerEchos .echos .echo.super img {
animation: twistSuper 2.5s infinite;
}
.feed .tickerEchos .echos .echo span {
color: #939393;
font-size: 80%;
position: absolute;
margin-left: 5px;
}
.feed .tickerEchos .echos .echo.own {
background: #333333;
color: #ffffff !important;
}
.feed .tickerEchos .echos .echo.own img {
width: 20px;
}
.feed .tickerEchos .echos .echo.suggest {
border: 1px solid #f0f0f0;
}
.feed .tickerEchos .echos .echo.suggest span {
color: #7d7d7d;
}
.feed .tickerEchos .echos .echo.suggest img {
filter: grayscale(100%) contrast(10%);
opacity: 0.8;
}
.feed .tickerEchos .echos .echo.suggest:hover {
background: #ffedb0;
border: 1px solid #ffedb0;
}
.feed .tickerEchos .echos .echo.suggest:hover img {
filter: grayscale(0%) contrast(100%);
opacity: 1;
}
.feed .tickerEchos .echos .more {
float: left;
margin: 5px 2px;
padding: 3px;
border-radius: 50%;
}
.feed .tickerEchos .echos .more span {
color: #b5b5b5;
position: relative;
margin-left: 4px;
font-size: 80%;
}
.feed .tickerEchos img.echoIconSmall {
float: none;
}
.feed .tickerEchos .echos .echo.super {
background: #ffd237;
border: 1px solid #f7ca2e;
}
.feed .tickerEchos .echos .echo.super span {
color: #000000;
}
.feed .comments {
width: 100%;
padding-top: 10px;
}
.feed .comments .commentEntry {
clear: both;
padding-bottom: 5px;
border-bottom: 1px solid #f1f1f1;
margin-bottom: 5px;
width: calc(100% - 10px);
}
.feed .comments .commentEntry:last-child {
border: none;
}
.feed .comments .headline .options {
float: left;
color: #999999;
}
.feed .comments .headline a {
margin-right: 5px;
}
.feed .comments .commentEntry .actions {
visibility: hidden;
font-size: 90%;
}
.feed .comments .commentEntry:hover .actions {
visibility: visible;
}
.feed .comments .picture {
float: left;
width: 40px;
padding-top: 5px;
text-align: left;
}
.feed .comments .picture img {
width: 30px;
min-height: 30px;
border-radius: 50%;
}
.feed .comments .plain {
float: left;
padding-bottom: 5px;
max-width: 86%;
}
.feed .comments .plain .text {
color: #000000;
line-height: 140%;
font-size: 100%;
}
.feed .comments .plain .text .bubble {
float: left;
padding: 5px;
padding-top: 0;
font-weight: 400;
width: 100%;
word-wrap: break-word;
}
.feed .comments .plain .text .bubble .stamp {
font-weight: 700;
margin-right: 5px;
}
.feed .comments .plain img {
vertical-align: text-bottom;
}
.feed .comments .plain .headline {
font-size: 90%;
padding-left: 5px;
}
.feed .suggestComment {
width: 240px;
padding: 5px 10px;
border-radius: 3px;
padding-top: 8px;
line-height: 130%;
height: 18px;
border: 1px solid #DCDCDC;
color: #888888;
font-size: 100%;
}
.feed .suggestComment:hover {
border: 1px solid #3ca2fe;
cursor: text;
}
.feed .atUser {
font-size: 120%;
padding: 0 5px;
color: #49ccff;
font-weight: 900;
cursor: pointer;
}
.feed .atUser:hover {
color: #ffd237;
}
.feed .commentBox {
margin-left: 0px;
margin-top: 5px;
width: calc(100% - 10px);
padding-top: 10px;
padding-bottom: 5px;
}
.feed .commentBox .profileImage {
float: left;
width: 45px;
text-align: left;
}
.feed .commentBox .profileImage img {
width: 30px;
min-height: 30px;
border-radius: 50%;
border: none !important;
}
.feed .commentBox .plain {
float: left;
}
.feed .commentBox .inputComment {
width: 240px;
max-width: 240px;
font-weight: 400;
padding: 4px 10px;
border-radius: 5px;
padding-top: 8px;
line-height: 140%;
height: 20px;
border: 1px solid #e5e5e5;
background: #ffffff;
font-size: 100%;
}
.feed .commentBox .inputComment:hover {
background: #ffffff;
border: 1px solid #78d9ff;
transition: 0.5s;
}
.feed .commentBox .inputComment.small {
min-height: 20px;
}
.feed .commentBox .emojiSelector {
width: 275px;
}
.feed .commentBox .inputComment:focus {
color: #000000;
border: 1px solid #b6b6b6;
background: #ffffff;
}
.feed .commentBox .buttonSend:hover {
border: 1px solid #000000;
color: #000000;
}
.feed .commentBox .features {
position: absolute;
z-index: 2;
width: 150px;
padding-top: 3px;
height: 25px;
display: none;
}
.feed .commentBox .editor {
border: none;
background: transparent;
}
.feed .commentBox .editor .smilies .entry {
border-bottom: none;
}
.feed .commentBox .editor .smilies .entries {
border: none;
}
.feed .commentBox .resizeFrame {
background: none;
}
.feed .actionSelector {
padding: 0;
padding-top: 5px;
}
.tickerSuggestionsHeadline {
padding: 15px 30px;
color: #a5a5a5;
font-size: 140%;
font-weight: 600;
margin-top: 15px;
text-align: center;
}
.tickerSuggestions.feed {
width: 100%;
text-align: center;
}
.tickerSuggestions.feed .column {
float: left;
width: 400px;
min-height: 100px;
display: none;
}
.tickerSuggestions.feed .fragment {
width: 360px;
}
#suggestionColumn1 {
display: block;
}
.feed .loadMoreComments .button {
float: left;
cursor: pointer;
padding: 5px;
color: #49ccff;
font-weight: 700;
margin-left: 40px;
}
.feed .loadMoreComments .button:hover {
text-decoration: underline;
}
.feed .editor .smilies {
width: 270px;
padding: 5px 0;
}
.feed .editor .smilies .entries {
width: 245px;
}
.feed .emoji {
margin: 0px;
}
.feed .entryHeader {
padding: 10px;
padding-bottom: 0;
text-align: center;
font-size: 140%;
}
.feed .entryHeader img {
width: 40px;
padding: 5px;
}
.feed .entryHeader em {
margin-left: 5px;
color: #919191;
}
.feed .actions .statusIcon {
float: left;
}
.feed .actions .list {
float: right;
margin-right: 10px;
}
.feed .actions .list .action {
float: right;
border-radius: 50%;
padding: 3px;
margin-top: 10px;
cursor: pointer;
margin-left: 15px;
}
.feed .actions .list .action:hover {
transform: scale(1.2);
}
.feed .actions .list img {
width: 18px;
}
.feed .actions .topicInfo {
float: left;
padding: 5px 0;
}
.feed .actions .topicIcon {
float: left;
padding: 0;
margin-left: 20px;
}
.feed .actions .topicIcon img {
width: 30px;
}
.feed .actions .topicName {
float: left;
color: #c3c3c3;
font-weight: 400;
padding: 5px;
padding-top: 10px;
margin-left: 2px;
}
.feed a.statusAppendix {
margin-left: 10px;
}
.feed a.statusAppendix img {
margin-left: 3px;
vertical-align: text-bottom;
}
.feed .fragment:hover .list {
display: block;
}
.topicListHeader {
padding: 20px;
}
.topicListHeader .topicIcon {
float: left;
padding: 5px 0;
}
.topicListHeader .topicIcon img {
width: 30px;
}
.topicListHeader .topicName {
float: left;
color: #c3c3c3;
font-weight: 400;
padding: 5px;
padding-top: 10px;
margin-left: 2px;
}
.topicListHeader .description {
padding-top: 3px;
}
.dislikeTicker {
padding: 10px 15px;
background: #ffffff;
border: 1px solid #dcdcdc;
border-radius: 10px;
text-align: center;
}
.dislikeTicker .headline {
padding: 10px 15px;
}
.dislikeTicker .listOfOptions a.option {
display: block;
color: #959595;
font-weight: 300;
width: 40%;
min-height: 110px;
text-align: center;
float: left;
padding: 5%;
}
.dislikeTicker .listOfOptions img {
width: 80px;
}
.dislikeTicker .reported {
padding: 15px;
margin-bottom: 10px;
border-radius: 10px;
color: #ffffff;
font-weight: 600;
background: #acacac;
}
.subNavigation {
overflow: visible;
margin-left: 0;
padding-top: 0;
}
.subNavigation a.navigationEntry {
float: left;
font-size: 100%;
color: #6c6c6c;
font-weight: 300;
background: #dddddd;
display: block;
padding: 12px 25px 12px 25px;
margin-right: 5px;
border-radius: 20px;
text-align: center;
}
.subNavigation a.navigationEntry.active {
background: transparent;
font-weight: 600;
color: #000000;
}
.subNavigation a.navigationEntry:hover {
background: #d2d2d2;
}
.uiSectionNavi {
overflow: visible;
margin-left: 0;
padding-top: 0;
margin-bottom: 10px;
}
.uiSectionNavi a.section {
float: left;
font-size: 100%;
color: #555555;
background: #ffa031;
display: block;
padding: 0 10px 0 10px;
margin-right: 5px;
border-radius: 20px;
text-align: center;
background: #cecece;
border: 2px solid #cecece;
}
.uiSectionNavi a.section.highlight {
background: #f96700;
background: linear-gradient(30deg, #ffd237 0%, #ff9933 100%);
border: 2px solid #ff9933;
}
.uiSectionNavi a.section.highlight .text {
color: #ffffff;
font-weight: 800;
}
.uiSectionNavi a.section.active {
background: #9e9e9e;
border: 2px solid #949494;
}
.uiSectionNavi a.section.active .text {
color: #ffffff;
font-weight: 800;
}
.uiSectionNavi a.section:hover {
background: #000000;
background: linear-gradient(30deg, #ffd237 0%, #ff9933 100%);
border: 2px solid #ff9933;
transition: 0.7s;
}
.uiSectionNavi a.section .text {
float: left;
padding: 13px 10px;
}
.uiSectionNavi a.section .icon {
float: left;
padding: 7px;
padding-right: 0;
}
.uiSectionNavi a.section .icon img {
width: 25px;
}
.getMoreTickerEntries {
padding: 10px;
cursor: pointer;
text-transform: uppercase;
font-weight: 500;
text-align: center;
color: #999999;
}
.getMoreTickerEntries:hover {
text-decoration: underline;
}
.selectEcho {
width: calc(100% - 10px);
border: 2px solid #f5c934;
background: #ffd237;
margin-top: 10px;
border-radius: 10px;
}
.selectEcho .echoPointer {
margin-left: 25px;
}
.selectEcho .echoList {
margin: 8px;
margin-left: 2%;
min-height: 70px;
}
.selectEcho .echoList {
min-width: 360px;
}
.selectEcho .echoList .echoEntry {
float: left;
width: 60px;
height: 60px;
margin: 2px;
padding: 0px;
border-radius: 50%;
background: #ffffff;
border: 1px solid #f9c923;
}
.selectEcho .echoList .echoEntry:hover {
cursor: pointer;
animation: rotate 0.3s;
border: 1px solid #3ca2fe;
font-weight: 500 !important;
}
.selectEcho .echoList .echoEntry.checked {
background: #ffd237;
border: none;
}
.selectEcho .echoList .echoIcon {
width: 80%;
padding: 10%;
padding-bottom: 5%;
text-align: center;
}
.selectEcho .echoList .echoIcon img {
width: 70%;
}
.selectEcho .echoList .entry.disable img {
filter: grayscale(100%);
opacity: 0.3;
}
.selectEcho .echoList .echoTitle {
width: 100%;
text-align: center;
font-size: 70%;
font-weight: 500;
}
.selectEcho .echoList .echoEntry.disable {
opacity: 0.9;
background: #ffd237;
}
.selectEcho .echoList .echoEntry.disable a {
color: #666666;
}
.selectEcho .echoList .echoEntry.disable img {
filter: grayscale(40%);
}
.selectEcho .echoList .echoPrice {
position: absolute;
font-size: 80%;
margin-top: 4px;
}
.selectEcho .echoList .echoPrice span {
border-radius: 5px;
background: #ffa225;
color: #ffffff;
padding: 2px;
}
.selectEcho .echoSetInfo {
animation: fadeIn 1.0s;
float: left;
margin-top: 17px;
}
.selectEcho .echoSetInfo .infoText {
float: left;
padding: 10px;
color: #bd9715;
font-size: 100%;
font-weight: 500;
}
.selectEcho .echoSetInfo .infoIcon {
float: left;
margin-left: 15px;
}
.selectEcho .echoSetInfo .infoIcon .fakeButton {
padding: 11px 20px;
text-transform: uppercase;
font-weight: 800;
border-radius: 5px;
background: #d90077;
color: #ffffff;
}
.selectEcho .echoSetInfo .infoIcon img {
width: 30px;
}
.simpleLayer {
width: 100%;
}
.layerCloseIconBlack {
padding: 5px;
margin-left: 10px;
margin-top: 5px;
width: 30px;
height: 30px;
}
.layerCloseIconBlack img {
width: 30px;
}
.layerCloseIconBlack:hover {
opacity: 0.9;
animation: focusIcon 1s;
cursor: pointer;
}
.layerCloseIcon {
width: 40px;
margin-left: 20px;
margin-top: 5px;
}
.layerCloseIcon:hover {
opacity: 0.9;
animation: focusIcon 1s;
cursor: pointer;
}
.layer_NavigationBar {
width: 100%;
position: fixed;
height: 40px;
background: #333333;
}
.layer_NavigationBar:hover {
opacity: 0.9;
}
.fixedAvailable .layer_NavigationBar {
position: fixed !important;
top: 0;
margin-top: 0 !important;
}
.infoLayer {
background: #ffedb0;
padding: 20px;
line-height: 20px;
position: fixed !important;
top: 45px !important;
left: 0 !important;
text-align: left;
width: 100% !important;
}
.highlightSubscription {
animation: fadeIn 0.9s;
}
.wasRemoved {
padding: 10px;
border: 1px solid #f5c934;
background: #ffd237;
border-radius: 10px;
text-align: center;
margin-bottom: 20px;
color: #bd9715;
font-weight: 500;
}
.wasRemoved span {
text-decoration: underline;
color: #be9815;
cursor: pointer;
}
.updateInfo {
color: #999999;
font-weight: 300;
font-size: 120%;
}
.updateInfo .entry {
width: 100%;
}
.updateInfo .entry .icon {
float: left;
border-radius: 50%;
width: 100px;
height: 100px;
margin-left: 30px;
}
.updateInfo .entry .icon img {
width: 80%;
border-radius: 50%;
}
.updateInfo .entry .text {
float: left;
width: calc(100% - 170px);
padding: 20px;
line-height: 150%;
font-size: 100%;
}
.tickerLayerOptions {
background: #ffffff;
padding: 10px;
border: 1px solid #e1e1e1;
border-radius: 10px;
width: 300px;
}
.fixedAvailable .tickerLayerOptions {
position: fixed !important;
}
.tickerLayerOptions a {
display: block;
padding: 15px 20px;
font-size: 100%;
font-weight: 600;
cursor: pointer;
color: #00d2d2;
}
.tickerLayerOptions a:hover {
text-decoration: underline;
}
.tickerLayerOptions .shareHeadline {
padding: 15px 20px;
padding-bottom: 0;
font-size: 120%;
font-weight: 600;
}
.tickerLayerOptions .shareInput {
padding: 0 10px;
margin-left: 10px;
margin-bottom: 5px;
margin-top: 15px;
padding-top: 0;
font-size: 100%;
font-weight: 600;
}
.tickerLayerOptions .shareInput input {
min-width: 240px;
padding: 5px 10px;
border-radius: 20px;
border: 1px solid #d8d8d8;
}
.tickerLayerOptions .shareInput input:hover {
border: 1px solid #00ada9;
}
.reMsg .message {
color: #ffffff;
background: #444444;
border: 1px solid #242424;
width: 290px;
border-radius: 10px;
font-weight: 600;
line-height: 130%;
}
.reMsg .message .frame {
padding: 20px;
}
.reMsg .message .suggestions {
margin-top: 20px;
font-weight: 300;
}
.reMsg .message .headline {
padding: 5px 0;
font-size: 120%;
}
.reMsg .message .suggest {
padding: 5px;
margin-right: 3px;
margin-bottom: 3px;
border-radius: 10px;
color: #ffffff;
cursor: pointer;
color: #ffda69;
float: left;
background: #333333;
border: 1px solid #000000;
}
.reMsg .message .suggest:hover {
background: #000000;
}
.reMsg .pointer {
background: url(//s.jappy.com/i/icon/pointer/poToZ.gif) no-repeat;
width: 20px;
height: 11px;
position: absolute;
z-index: 2;
margin-top: -9px;
margin-left: 20px;
}
#reForm input.inputError {
background: #f7f384;
font-weight: bold;
}
#reForm input.inputOk {
background: #e6ffd5;
}
.tickerFeedAd {
width: 360px;
min-height: 250px;
margin-bottom: 10px;
text-align: center;
}
.overlay-enabled {
position: relative;
overflow: hidden;
height: 100%;
width: 100%;
}
.cookieNotice {
position: fixed;
bottom: 0px;
left: 0px;
right: 0;
font-size: 110%;
background: #333;
color: #f1f1f1;
text-align: center;
z-index: 9000;
}
.activationInfoLayer {
text-align: center;
width: 100%;
}
.fixedAvailable .activationInfoLayer {
position: fixed !important;
top: 100px !important;
}
.confirmSuperInfoLayer {
text-align: center;
width: 100%;
}
.fixedAvailable .confirmSuperInfoLayer {
position: fixed !important;
top: 100px !important;
}
.superConfirmation,
.boostConfirmation {
width: 360px;
margin: auto;
background: #ffffff;
border-radius: 20px;
}
.homepage .topicDropdown {
float: left;
margin-bottom: 7px;
max-width: 200px;
position: relative;
}
.homepage .topicDropdown .topicSelector {
width: 170px;
padding: 10px;
clear: both;
height: 2em;
background: #dddddd;
border: 1px solid #dddddd;
border-radius: 20px;
transition: 0.5s;
cursor: pointer;
}
.homepage .topicDropdown .topicSelector:hover {
border: 1px solid #000000;
transition: 0.5s;
}
.homepage .topicDropdown .topicSelector .icon {
float: left;
width: 2em;
margin-left: 15px;
}
.homepage .topicDropdown .topicSelector .name {
float: left;
height: 2em;
line-height: 2em;
margin-left: 13px;
color: #969696;
font-weight: 800;
}
.homepage .topicDropdown .topicSelector .dropdownButton {
float: right;
height: 1.2em;
width: 1.2em;
margin-right: 5px;
margin-top: 5px;
filter: alpha(opacity=50);
opacity: 0.5;
transition: 0.5s;
}
.homepage .topicDropdown .topicSelector:hover .dropdownButton {
filter: alpha(opacity=100);
opacity: 1;
transition: 0.5s;
}
.channelsHead {
margin-bottom: 7px;
}
.channelsHead a.entry {
display: block;
}
.channelsHead .entry {
margin-right: 5px;
padding: 7px 10px;
padding-right: 20px;
float: left;
background: #cecece;
border: 2px solid #cecece;
border-radius: 20px;
transition: 0.5s;
cursor: pointer;
}
.channelsHead .entry:hover {
border: 2px solid #fe9b37;
transition: 0.8s;
background: linear-gradient(30deg, #ffd237 0%, #ffa225 100%);
}
.channelsHead .entry.active {
background: #9e9e9e;
border: 2px solid #949494;
}
.channelsHead .entry .icon {
float: left;
width: 2em;
margin-left: 5px;
}
.channelsHead .entry .name {
float: left;
height: 2em;
line-height: 2em;
margin-left: 13px;
color: #333333;
font-weight: 400;
}
.channelsHead .entry.active .name {
color: #ffffff;
font-weight: 800;
}
.channelsHead .entry .dropdownButton {
float: right;
height: 1.2em;
width: 1.2em;
margin-top: 5px;
filter: alpha(opacity=50);
opacity: 0.5;
transition: 0.5s;
}
.channelsHead .entry:hover .dropdownButton {
filter: alpha(opacity=100);
opacity: 1;
transition: 0.5s;
}
.channelsHead .letsDoItButton {
margin-right: 5px;
padding: 7px 10px;
padding-right: 20px;
float: left;
background: #cecece;
background: linear-gradient(45deg, #ff9a33 0%, #ffc636 100%);
border: 2px solid #f49d2b;
border-radius: 20px;
transition: 0.5s;
cursor: pointer;
}
.channelsHead .letsDoItButton:hover {
border: 2px solid #fe9b37;
transition: 0.5s;
box-shadow: 2px 2px 3px #dcdcdc;
}
.channelsHead .letsDoItButton .icon {
float: left;
width: 2em;
margin-left: 5px;
}
.channelsHead .letsDoItButton .name {
float: left;
height: 2em;
line-height: 2em;
margin-left: 13px;
color: #ffffff;
font-weight: 800;
}
.channelsHead.profile {
margin-left: 10px;
padding: 10px;
}
.channelsHead .button {
margin-right: 5px;
padding: 12px 20px;
padding-right: 20px;
float: left;
background: #cccccc;
border: 2px solid #cacaca;
border-radius: 20px;
transition: 0.5s;
cursor: pointer;
color: #7b7b7b;
}
.channelsHead .button:hover {
border: 2px solid #B5B5B5;
transition: 0.5s;
box-shadow: 2px 2px 3px #dcdcdc;
background: #B5B5B5;
}
.homepageTopicList {
position: absolute;
max-height: 35em;
overflow-y: scroll;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
overflow-x: hidden;
z-index: 1020;
width: 360px;
background: #fff;
border: 1px solid #c3c3c3;
box-shadow: 2px 2px 3px #dcdcdc;
}
.homepageTopicList::-webkit-scrollbar {
width: 5px;
}
.homepageTopicList::-webkit-scrollbar-button {
color: #333333;
}
.homepageTopicList::-webkit-scrollbar-thumb {
color: #333333;
background: #d3d3d3;
}
.homepageTopicList::-webkit-scrollbar-track {
color: #333333;
background: #ffffff;
}
.homepageTopicList .topicListEntry {
clear: both;
height: 2em;
padding: 10px 5px;
cursor: pointer;
}
.homepageTopicList .topicListEntry.active {
background: #49ccff;
}
.homepageTopicList .topicListEntry .icon {
float: left;
width: 2em;
margin-left: 15px;
}
.homepageTopicList .topicListEntry .name {
float: left;
height: 2em;
line-height: 2em;
margin-left: 13px;
font-weight: 600;
}
.homepageTopicList .topicListEntry .settings {
float: right;
border-radius: 15px;
background: #ffffff;
height: 2em;
line-height: 2em;
padding: 1px;
}
.homepageTopicList .topicListEntry .settings a {
margin-left: 10px;
margin-right: 10px;
font-weight: 600;
color: #484848;
}
.homepageTopicList .topicListEntry.active .name {
color: #fff !important;
}
.homepageTopicList .topicListEntry:hover {
background: #ffedb0;
transition: 0.25s;
}
.homepage .toolbar {
clear: both;
line-height: 2em;
padding: 3px 8px;
max-width: 750px;
}
.homepage .toolbar a {
color: #909090;
line-height: 2em;
height: 2em;
}
.homepage .toolbar a img {
height: 1.5em;
}
.homepage .newTopicsHint {
background: #bcdca9;
display: none;
text-align: center;
color: #333;
padding: 7px;
margin-right: 5px;
margin-left: 5px;
border-radius: 7px;
font-weight: 600;
}
.homepage .refreshButton {
padding: 10px;
display: block;
margin: auto;
width: 200px;
background: #ffd237;
border-radius: 15px;
color: #333333;
font-weight: 800;
}
.homepage .refreshButton:hover {
text-decoration: underline;
background: #ffd237;
transition: 0.5s;
}
.homepage .toolbar .buttonList {
float: left;
}
.homepage .toolbar .buttonList a:hover {
text-decoration: underline;
}
.homepage .filters {
float: right;
position: relative;
text-align: right;
cursor: pointer;
margin-right: 25px;
padding-bottom: 5px;
}
.homepage .filters .filterOption {
float: left;
padding: 5px;
border-bottom: 3px solid #e5e5e5;
margin-left: 10px;
color: #9c9c9c;
font-weight: 500;
font-size: 90%;
}
.homepage .filters .filterOption.active {
border-bottom: 3px solid #ff9933;
color: #ff9933;
}
.homepage .filters.right {
float: none;
}
.homepage .filters.right .filterOption {
float: left;
}
.homepage .filter {
float: right;
position: relative;
text-align: right;
cursor: pointer;
margin-right: 25px;
}
.homepage .filter .filterOption {
float: left;
padding: 5px;
border-bottom: 3px solid #e5e5e5;
margin-left: 10px;
color: #9c9c9c;
font-weight: 300;
}
.homepage .filter .filterOption.active {
border-bottom: 3px solid #49ccff;
color: #49ccff;
}
.homepage .container {
min-height: 130px;
padding-bottom: 13px;
}
.homepage .container .headline {
line-height: 1.5;
font-size: 120%;
padding: 10px 0px;
color: #555555;
font-weight: 800;
margin-left: 10px;
}
.homepage .container .description {
line-height: 1.7;
color: #000;
padding: 10px;
max-width: 90%;
font-weight: 300;
background: #ffda69;
}
.homepage .container .bubble {
width: 120px;
height: 120px;
background: #fff;
border-radius: 50%;
text-align: center;
float: right;
margin-left: 20px;
margin-right: 30px;
}
.homepage .container .bubble img {
width: 90px;
margin: 10px;
}
.homepage .topicSetting {
clear: both;
margin-top: 7px;
padding: 7px;
height: 4.5em;
max-width: 700px;
border-bottom: 1px solid #dcdcdc;
}
.homepage .topicSetting:last-child {
border: 0px;
}
.homepage .topicSetting .icon {
float: left;
}
.homepage .topicSetting .icon img {
height: 3em;
}
.homepage .topicSetting .name {
float: left;
margin-left: 13px;
line-height: 1.5em;
max-width: 60%;
}
.homepage .topicSetting .name .title {
display: block;
font-weight: 700;
}
.homepage .topicSetting .name .subtitle {
display: block;
font-weight: 300;
}
.homepage .topicSetting .setting {
float: right;
}
.homepage .topicSetting .setting img {
height: 3em;
line-height: 3em;
padding: 5px;
border-radius: 50%;
background: #ffffff;
}
.homepage .topicSetting .setting .dislike,
.homepage .topicSetting .setting .like {
filter: grayscale(100%);
opacity: 0.3;
transition: 0.5s;
cursor: pointer;
}
.homepage .topicSetting .setting .dislike,
.homepage .topicSetting .setting .dislike {
background: #ffffff;
}
.homepage .topicSetting .setting .dislike.active,
.homepage .topicSetting .setting .like.active {
opacity: 1.0;
filter: none;
transition: 0.5s;
background: #ffda69;
}
.homepage .topicSetting .setting .dislike:hover,
.homepage .topicSetting .setting .like:hover {
filter: grayscale(100%);
opacity: 0.5;
transition: 0.5s;
}
/* bis eine like-Grafik existiert */
.homepage .topicSetting .setting .like {
transform: rotate(180deg);
}
.homepage .settingsFoot {
color: #96770c;
background: #ffda69;
border-top: 4px solid #ffd237;
padding: 15px;
}
.homepage .settingsFoot.fixed {
position: fixed;
bottom: 50px;
height: 100px;
width: 100%;
}
.homepage .settingsFoot .actionButton {
float: left;
padding: 15px;
background: #ffa225;
font-weight: 700;
border: none;
border-radius: 15px;
color: #ffffff;
cursor: pointer;
}
.homepage .settingsFoot .abortButton {
float: right;
padding: 5px;
margin-right: 10px;
}
.homepage .ageRange {
margin-bottom: 5px;
}
.invisible {
display: none !important;
}
.lyCancel {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: 1;
opacity: 0.1;
background: #555;
}
.feed .topicEntry {
border: 2px solid #D9D9D9;
border-radius: 13px;
margin-bottom: 7px;
cursor: pointer;
background: #fff;
transition: 0.5s;
box-shadow: 1px 1px 3px #ddd;
overflow: hidden;
}
.feed .topicEntry:hover {
border: 2px solid #3ca2fe;
transition: 0.5s;
}
.feed .topicEntry.active {
border: 2px solid #ffc119;
transition: 0.5s;
box-shadow: 1px 1px 7px #ffc119;
}
.feed .topicEntry .topicHeader {
text-align: left;
}
.feed .topicEntry .topicHeader .headline {
height: 2em;
clear: both;
padding: 7px;
}
.feed .topicEntry.active .headline {
background: #ffda69;
}
.feed .topicEntry .topicHeader .headline .icon {
float: left;
}
.feed .topicEntry .topicHeader .headline .icon img {
width: 2em;
}
.feed .topicEntry .topicHeader .headline .name {
float: left;
height: 2em;
line-height: 2em;
margin-left: 7px;
}
.feed .topicEntry .topicHeader .description {
padding: 7px 7px 10px 7px;
}
.feed .topicEntry .topicHeader .example {
padding: 7px 7px 10px 7px;
color: #ffffff;
background: #868686;
}
.feed .topicEntry .visibleIfActive {
display: inline-block;
float: right;
padding: 5px 10px;
font-weight: 700;
font-size: 110%;
border-radius: 15px;
background: #ffc119;
opacity: 0;
color: #333;
transition: 0.5s;
}
.feed .topicEntry.active .visibleIfActive {
display: inline-block;
opacity: 1;
transition: 0.5s;
}
.tickerStats {
width: 750px;
margin: auto;
}
.tickerStats .box {
padding: 10px;
border-radius: 5px;
padding-left: 20px;
background: #ffffff;
padding-bottom: 50px;
overflow-y: auto;
}
.tickerStats * {
box-sizing: border-box;
}
.tickerStats .graph {
height: 270px;
position: relative;
left: 50px;
width: 680px;
padding-top: 20px;
}
.tickerStats .bars {
padding: 0 5px;
height: 250px;
position: absolute;
width: 100%;
z-index: 10;
}
.tickerStats .bars .barSet {
display: block;
float: left;
height: 100%;
position: relative;
width: 40px;
margin-right: 6px;
}
.tickerStats .bars .barSet:hover {
background: #f1f1f1;
}
.tickerStats .bars .bar {
box-shadow: 1px 0 2px rgba(0, 0, 0, 0.15);
border-radius: 3px 3px 0 0;
bottom: 0;
cursor: pointer;
height: 0;
position: absolute;
text-align: center;
width: 18%;
margin-right: 2%;
animation-duration: 0.5s;
animation-name: statsFadeIn;
}
.tickerStats .bars .bar:hover {
opacity: 0.5;
}
.tickerStats .bars .numberOf {
display: none;
}
.tickerStats .y-axis {
position: absolute;
text-align: right;
width: 100%;
}
.tickerStats ul.y-axis {
list-style: none;
margin: 0;
padding: 0;
}
.tickerStats .y-axis li {
border-top: 1px solid #f1f1f1;
display: block;
height: 50px;
width: 95%;
}
.tickerStats .y-axis span {
display: block;
font-size: 11px;
margin: -10px 0 0 -60px;
padding: 0 10px;
width: 40px;
color: #adadad;
}
.tickerStats .date {
font-size: 90%;
color: #aaaaaa;
position: relative;
top: 260px;
}
.tickerStats table th {
text-align: left;
background: #72ebff;
color: #0d7e90;
line-height: 20px;
padding: 8px 3px 8px 15px;
font-weight: 700;
text-transform: uppercase;
}
.tickerStats .table tr {
border-bottom: 1px solid #dddddd;
}
.tickerStats table .title {
color: #888888;
}
.tickerStats ::-webkit-scrollbar {
width: 5px;
}
.tickerStats h4 {
text-align: left;
}
.tickerStats ::-webkit-scrollbar-track {
color: #333333;
background: #e1e1e1;
}
.tickerStats ::-webkit-scrollbar-button {
color: #333333;
}
.tickerStats ::-webkit-scrollbar-thumb {
color: #333333;
background: #d3d3d3;
}
.tickerStats .record {
color: #00b9b6;
font-weight: 900;
}
.tickerStats .views {
background-image: linear-gradient(to top, #dedede 0%, #cacaca 100%);
}
.tickerStats .clicks {
background-image: linear-gradient(to top, #3cfe42 0%, #20c3c3 100%);
}
.tickerStats .echoes {
background-image: linear-gradient(to top, #ffd950 0%, #ff9133 100%);
}
.tickerStats .comments {
background-image: linear-gradient(to top, #ec0083 0%, #ff64c6 100%);
}
.tickerStats .reach {
background-image: linear-gradient(to top, #72ffff 0%, #077abd 100%);
}
.getDailyBonus {
text-align: center;
padding: 25px 0px;
}
.getDailyBonus .button {
color: #fff;
font-weight: 700;
background: #2eadad;
border: 1px solid #219898;
border-radius: 25px;
padding: 15px 15px;
cursor: pointer;
}
.dailyBonusEntry .summary {
padding: 5px 15px;
}
.dailyBonusEntry .summary a {
display: block;
background: #f5f5f5;
color: #333;
padding: 5px 15px;
border: 1px solid #e5e5e5;
}
.dailyBonusEntry .summary.active a {
border-bottom: none;
}
.dailyBonusEntry .summary .factorList {
display: none;
}
.dailyBonusEntry .summary.active .factorList {
display: block;
}
/* background-image:linear-gradient(to top, #46ffff 0, #51dede 100%) */
.fixedAvailable .layerLoginBonusLayer {
position: fixed !important;
bottom: 0px !important;
overflow-y: scroll;
margin: 0 !important;
height: 100%;
}
.layerLoginBonusLayer {
padding: 0;
margin: 0px;
height: 100%;
}
.layerLoginBonusLayer {
background: rgba(0, 0, 0, 0.15);
}
.layerLoginBonusLayer .frame {
padding: 30px;
margin: auto;
margin-top: 100px;
line-height: 150%;
width: 290px;
background: #ffffff;
border-radius: 25px;
background: linear-gradient(120deg, #BCFFDB 0, #94f5ff 100%);
border: 5px solid #8ddcdc;
}
.layerLoginBonusLayer .frame:hover {
border: 5px solid #2cecec;
transition: 1s;
}
.layerLoginBonusLayer .bonusTitle {
color: #007582;
font-weight: 700;
font-size: 180%;
margin: 0px;
font-family: 'Luckiest Guy', cursive;
padding: 0 0 20px 0px;
text-align: center;
}
.layerLoginBonusLayer .icon {
text-align: center;
}
.layerLoginBonusLayer .icon img {
width: 150px;
}
.layerLoginBonusLayer .description {
line-height: 1.7;
margin: 0px 0px 15px 0px;
font-size: 90%;
color: #00363f;
margin-top: 10px;
font-weight: 300;
}
.layerLoginBonusLayer .startButton .button,
.layerLoginBonusLayer .closeButton .button {
font-weight: 700;
border-radius: 25px;
padding: 15px 15px;
cursor: pointer;
border: 5px solid #91e7eb;
}
.layerLoginBonusLayer .startButton,
.layerLoginBonusLayer .closeButton {
text-align: center;
margin-top: 25px;
height: 50px;
}
.layerLoginBonusLayer .startButton .button {
color: #262626;
background: #ffa225;
font-weight: 900;
font-size: 110%;
background: linear-gradient(230deg, #ffc51b 0%, #fee540 100%);
}
.layerLoginBonusLayer .startButton .button:hover {
background: #2cecec;
transition: 0.5s;
}
.layerLoginBonusLayer .closeButton .button {
color: #fff;
background: #24d2ca;
}
.layerLoginBonusLayer .loader {
text-align: center;
}
.layerLoginBonusLayer .loader img {
width: 100px;
height: 100px;
}
.layerLoginBonusLayer .loader .text {
margin-top: 7px;
}
.layerLoginBonusLayer .loaderHint {
text-align: center;
}
.layerLoginBonusLayer .loaderHint .text {
line-height: 1.5em;
margin-top: 1.5em;
}
.layerLoginBonusLayer .loaderHint .text strong {
color: #555;
}
.layerLoginBonusLayer .loaderHint .text a {
font-weight: 700;
border-radius: 25px;
padding: 10px 15px;
cursor: pointer;
color: #fff;
background: #ffa225;
border: 1px solid #fa9e23;
margin: 13px;
display: inline-block;
}
.layerLoginBonusLayer .alreadyReceived {
line-height: 1.5;
text-align: center;
font-weight: 900;
margin-bottom: 10px;
}
.layerLoginBonusLayer .factorList {
margin-bottom: 20px;
margin-top: 10px;
}
.layerLoginBonusLayer .factor {
margin-bottom: 10px;
}
.layerLoginBonusLayer .factor .reason {
float: left;
width: 160px;
}
.layerLoginBonusLayer .factor .reason .title {
font-weight: 700;
margin-bottom: 5px;
}
.layerLoginBonusLayer .factor .reason .description {
font-weight: 300;
font-size: 11px;
line-height: 1.5;
}
.layerLoginBonusLayer .factor .value {
float: right;
width: 100px;
text-align: right;
}
.layerLoginBonusLayer .factor .details {
text-decoration: underline;
font-weight: 300;
font-style: italic;
margin-left: 5px;
}
.layerLoginBonusLayer .factor .value .change {
font-weight: 900;
font-size: 120%;
}
.layerLoginBonusLayer .factor .value .change.positive {
color: #109a00;
}
.layerLoginBonusLayer .factor .value .change.negative {
color: #FF3A25;
}
.layerLoginBonusLayer .factor .value .intermediate {
font-weight: 300;
font-size: 11px;
color: #9a9a9a;
}
.layerLoginBonusLayer .icon {
animation: wobble-horizontal 5s infinite;
}
.layerLoginBonusLayer .summary {
text-align: left;
}
.layerLoginBonusLayer a.promote {
color: #007582;
font-weight: 300;
text-decoration: underline;
font-size: 90%;
}
.layerLoginBonusLayer .summary .headline {
font-family: 'Luckiest Guy', cursive;
color: #007582;
font-weight: 700;
font-size: 180%;
margin-bottom: 10px;
}
.layerLoginBonusLayer .summary .entry {
padding: 2px 0;
font-size: 140%;
font-weight: 900;
}
.layerLoginBonusLayer .frame .footer {
padding: 10px;
}
.layerLoginBonusLayer .frame .footer img {
width: 25px;
opacity: 0.6;
}
.layerLoginBonusLayer .frame .footer img:hover {
opacity: 1.0;
transform: scale(1.2);
transition: 0.3s;
cursor: pointer;
}
/* Ueberarbeitetes Bonus-Roulette (#1351): Sofort-Anzeige + ausklappbare Faktor-Tabelle */
.layerLoginBonusLayer .frame.modern {
max-height: 85vh;
overflow-y: auto;
}
.layerLoginBonusLayer .frame.modern .summary {
margin-top: 10px;
}
.layerLoginBonusLayer .frame.modern .summary .entry {
text-align: center;
}
.layerLoginBonusLayer .detailsToggle {
text-align: center;
margin-top: 15px;
}
.layerLoginBonusLayer .detailsToggle .button {
color: #007582;
font-weight: 700;
text-decoration: underline;
cursor: pointer;
font-size: 90%;
}
.layerLoginBonusLayer .factorDetails {
margin-top: 10px;
padding-top: 10px;
border-top: 2px solid #8ddcdc;
}
.layerLoginBonusLayer .factorDetails .factorList {
margin-bottom: 0;
}
.layerReport {
position: absolute;
top: 0px;
left: 0px;
z-index: 9000001;
margin: 0px;
width: 100%;
background: rgba(0, 0, 0, 0.15);
bottom: 0px;
right: 0px;
height: 100%;
}
.layerReport .frame {
padding: 30px;
margin: auto;
line-height: 150%;
width: 290px;
background: #ffffff;
border-radius: 25px;
border: 5px solid #FFA837;
background-image: linear-gradient(to top, #ffd237 0, #ffdb5d 30%);
overflow-y: auto;
max-height: 80vh;
}
.layerReport .frame::-webkit-scrollbar {
width: 5px;
}
.layerReport .frame::-webkit-scrollbar-button {
color: #333333;
}
.layerReport .frame::-webkit-scrollbar-thumb {
color: #333333;
background: #FFA837;
}
.layerReport .frame::-webkit-scrollbar-track {
color: #333333;
background: #FFAF46;
}
.layerReport .frame .title {
color: #583200;
font-weight: 700;
font-size: 180%;
margin: 0;
padding: 0 0 20px 0;
text-align: center;
}
.layerReport .frame p {
padding: 0 0 13px 0;
line-height: 1.5;
}
.layerReport .frame p:last-child {
padding: 0;
}
.layerReport .frame p.hint {
font-size: 90%;
}
.layerReport .frame .compose textarea {
background: #fff;
padding: 13px;
border-radius: 13px;
display: block;
width: calc(100% - 26px);
margin: 10px 0px;
border: 1px solid #FFA837;
min-height: 5em;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
line-height: 1.5;
}
.layerReport .frame .compose textarea:focus,
.layerReport .frame textarea:active {
box-shadow: #FFA837 0 0 0 0.2rem;
outline: 0;
}
.layerReport .frame .compose .editor {
display: none;
}
.layerReport .buttonBay {
text-align: center;
margin: 25px 0px;
height: 50px;
}
.layerReport .buttonBay .button {
display: inline-block;
font-weight: 700;
border-radius: 25px;
padding: 15px;
cursor: pointer;
border: 1px solid #FFA837;
margin-right: 7px;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background 0.15s ease-in-out;
font-family: "Roboto", "Arial Nova", sans-serif-light, "Open Sans", Arial, sans-serif;
}
.layerReport .buttonBay .button:last-child {
margin-right: 0px;
}
.layerReport .buttonBay .button.submit {
color: #ffffff;
background: #FFA225;
}
.layerReport .buttonBay .button.abort {
color: #ffffff;
background: #ffc600;
}
.layerReport .buttonBay .button.submit:hover {
color: #ffffff;
background: #FFAD40;
}
.layerReport .buttonBay .button.abort:hover {
color: #ffffff;
background: #ffdf70;
}
.layerReport .buttonBay .button:focus,
.layerReport .buttonBay .button:active {
box-shadow: #FFA837 0 0 0 0.2rem;
outline: 0;
}
.layerReport .buttonBay .button[disabled],
.layerReport .buttonBay .button[disabled]:hover,
.layerReport .buttonBay .button[disabled]:focus {
background: #F0BE7C;
color: #825D2C;
cursor: pointer;
}
.desktopOnly {
display: inline-block;
}
.mobileOnly {
display: none;
}
.clarification {
margin-top: 7px;
padding: 7px;
background: #f0f0f0;
font-size: 11px;
color: #030303;
line-height: 1.5;
}
.settingsHeader {
background: #333;
border-radius: 10px;
width: 550px;
}
.settingsHeader .headline {
font-size: 140%;
padding: 5px 0 6px 0;
color: #ccc;
padding: 13px;
text-align: center;
}
.settingsHeader .row {
display: block;
clear: both;
}
.settingsHeader .row .title {
display: inline-block;
float: left;
width: 140px;
color: #fff;
text-align: right;
padding: 5px 10px;
padding-top: 12px;
font-weight: 500;
}
.settingsHeader .row .value {
display: inline-block;
float: left;
width: 340px;
color: #333;
font-weight: 300;
border: 1px solid #000;
border-radius: 5px;
padding: 10px 10px;
background: #fff;
margin-bottom: 5px;
}
.settingsHeader .row .value small {
margin: 0px;
padding: 0px;
margin-top: 3px;
}
.settingsHeader .row .info {
text-align: center;
padding: 13px;
}
.settingsHeader .row .info a {
color: #ccc;
font-weight: 500;
}
.settingsHeader .row .info a:hover {
color: #fff;
}
.startpage .tickers {
cursor: pointer;
text-align: left;
max-width: 360px;
background: #ffffff;
color: #333333;
border: 1px solid #dcdcdc;
border-radius: 10px;
}
.startpage .tickers .picture {
float: left;
padding: 15px;
width: 120px;
margin-left: 5px;
}
.startpage .tickers .picture img {
width: 120px;
border-radius: 5px;
}
.startpage .tickers .content {
float: left;
width: 180px;
padding-top: 15px;
line-height: 140%;
font-size: 110%;
}
.startpage .tickers .userInfos {
padding-top: 5px;
font-size: 80%;
}
.startpage .tickers .profileImage {
border-radius: 50%;
width: 20px;
margin-right: 5px;
}
.startpage .listOfEchos {
margin-left: 0;
padding-top: 5px;
padding-bottom: 5px;
width: 100%;
}
.stream .listOfEchos:hover {
cursor: pointer;
background: #ffedb0;
}
.startpage .listOfEchos .echo {
float: left;
background: #f1f1f1;
padding: 5px 8px;
border-radius: 10px;
margin-right: 3px;
}
.startpage .listOfEchos .more {
margin: 0;
}
.tutorialWindow {
margin: 0 0 15px 0;
text-align: center;
font-weight: 600;
font-size: 110%;
}
.tutorialWindow .wrapper {
max-width: 300px;
margin: auto;
background: #333333;
background: linear-gradient(45deg, #524f4b 0%, #373533 100%);
border: 5px solid #333333;
border-radius: 25px;
color: #ffffff;
line-height: 160%;
padding: 15px;
}
.tutorialWindow .setAsRead {
color: #ffffff;
background: #ff870e;
padding: 10px;
border-radius: 25px;
display: block;
margin-top: 10px;
}
.tutorialWindow .setAsRead:hover {
background: #ffedb0;
color: #000000;
transition: 0.5s;
}
.tutorialWindow .headline {
font-size: 120%;
}
.tutorialWindow .text {
padding: 10px;
font-weight: 300;
padding-bottom: 0;
}
.tutorialWindow .pointerInfo {
display: none;
}
.tutorialWindow .desktop {
display: none;
}
.tutorialWindow .mobile {
display: none;
}
.tutorialWindow:hover .wrapper {
background: linear-gradient(45deg, #524f4b 50%, #373533 100%);
}
.imageReactionSettings .select a {
display: block;
padding: 20px;
text-align: center;
width: 180px;
color: #333333;
font-family: 'Luckiest Guy', cursive;
font-size: 130%;
float: left;
background: #ffffff;
border-radius: 20px;
margin: 20px;
height: 180px;
}
.imageReactionSettings .select a img {
width: 150px;
}
.imageReactionSettings .select a.inactive img {
filter: grayscale(100%);
}
.imageReactionSettings .button {
padding: 20px;
text-align: center;
margin-top: 40px;
}
.imageReactionSettings .button a {
padding: 10px;
color: #ffffff;
border-radius: 20px;
font-family: 'Luckiest Guy', cursive;
font-size: 130%;
background: linear-gradient(0deg, #ff9933 0%, #ffd237 100%);
border: 3px solid #ffb134;
box-shadow: 0 0 2px #ff7a17;
}
.genericBackendLayer {
overflow-y: auto;
min-height: 100vh;
max-height: 100vh;
margin-top: 0 !important;
position: fixed !important;
}
a.roundButtonPink,
.roundButtonPink {
color: #ffffff;
background: #d8489e;
background: linear-gradient(45deg, #fe559b 0%, #ff4c71 100%);
border: 2px solid #df1632;
border-radius: 20px;
font-weight: 900;
padding: 10px 15px;
}
#chatReferenceLayer {
right: 0px;
bottom: 0px;
background: rgba(0, 0, 0, 0.65);
width: 100%;
padding-top: 10px;
display: grid;
}
#chatReferenceLayer > .layerWrapper {
padding-bottom: 100px;
justify-self: center;
align-self: center;
}
#chatReferenceLayer .container {
max-width: 600px;
background: #fff;
min-width: 360px;
border-radius: 10px;
padding: 5px;
}
#chatReferenceLayer .head {
display: flex;
align-items: center;
color: #484848;
height: 3.5em;
max-width: 100%;
background: #fff;
}
#chatReferenceLayer .head .caption {
flex-grow: 1;
margin: .5em 1em;
font-weight: 700;
font-size: 1.3em;
text-overflow: ellipsis;
}
#chatReferenceLayer .head button {
border: 1px solid #c7c7c7;
background: #d5d5d5;
cursor: pointer;
border-radius: 15px;
color: #333333;
display: inline-block;
height: 2.5em;
margin: .5em;
line-height: 2em;
text-align: center;
font-weight: 300;
padding: 2px 10px;
}
.iconButtonList {
display: grid;
width: calc(100% - 20px;);
grid-gap: 3px;
grid-template-columns: 100%;
margin: 5px 10px;
}
.iconButtonList button {
display: grid;
grid-template-columns: 32px auto;
grid-gap: 7px;
align-items: center;
padding: 7px 10px;
transition: .3s;
cursor: pointer;
}
.iconButtonList button[disabled] {
opacity: .5;
cursor: default;
}
.iconButtonList button img {
width: 25px;
height: 25px;
justify-self: center;
}
.iconButtonList button span {
justify-self: left;
}
.iconButtonList button[disabled]:hover {
background: #fff;
}
.iconButtonList .gap {
border-bottom: 2px solid #f1f1f1;
margin-top: 7px;
margin-bottom: 7px;
}
.layerOptionArea {
display: grid;
grid-template-columns: 100%;
width: calc(100% - 30px);
margin: 15px;
}
.layerOptionArea.withLabel {
grid-template-columns: 100px auto;
}
.layerOptionArea.withLabel label {
text-overflow: ellipsis;
justify-self: left;
align-self: start;
padding: 7px;
grid-column: 1 / span 1;
}
.layerOptionArea > div {
padding: 10px;
justify-self: stretch;
align-self: stretch;
background: #fff;
min-height: 1em;
line-height: 1.5;
}
.layerTextArea {
display: grid;
grid-template-columns: 100%;
width: calc(100% - 30px);
margin: 15px;
}
.layerTextArea.withLabel {
grid-template-columns: 100px auto;
}
.layerTextArea.withLabel label {
text-overflow: ellipsis;
justify-self: left;
align-self: start;
padding: 7px;
grid-column: 1 / span 1;
}
.layerTextArea textarea {
border: 2px solid #f1f1f1;
border-radius: 15px;
padding: 10px;
justify-self: stretch;
align-self: stretch;
background: #fff;
min-height: 5em;
line-height: 1.5;
width: calc(100% - 20px);
}
.layerTextArea .features {
display: none;
}
.layerActionArea {
display: block;
text-align: right;
margin: 10px 5px;
}
.layerActionArea button {
border: 1px solid #c7c7c7;
background: #d5d5d5;
cursor: pointer;
border-radius: 15px;
color: #333333;
display: inline-block;
height: 3em;
margin: .5em;
line-height: 2em;
text-align: center;
padding: 5px 15px;
font-weight: bold;
}
.layerActionArea button.primary {
background: #1e87f0;
color: #fff;
}
.layerActionArea button.secondary {
background: #333;
color: #fff;
}
.buttonGeneral {
display: inline-block;
}
.buttonGeneral img {
height: 1.3em;
}
.buttonPink {
color: #ffffff;
cursor: pointer;
background: #d8489e;
background: linear-gradient(45deg, #fe559b 0%, #ff4c71 100%);
border: 2px solid #df1632;
border-radius: 20px;
font-weight: 900;
padding: 10px 15px;
margin-bottom: 5px;
}
.buttonPink:hover {
transition: 0.5s;
opacity: 0.8;
animation: intoFocusLight 0.5s forwards;
}
.buttonYellow,
a.buttonYellow {
color: #333333;
cursor: pointer;
background: #ff9933;
background: linear-gradient(45deg, #ffc51b 0%, #fee540 100%);
border: 2px solid #eec324;
border-radius: 20px;
font-weight: 900;
padding: 10px 15px;
margin-bottom: 5px;
}
.buttonYellow:hover {
transition: 0.5s;
opacity: 0.8;
animation: intoFocusLight 0.5s forwards;
}
.buttonBlue,
a.buttonBlue {
color: #333333;
cursor: pointer;
background: #00FFBF;
background: linear-gradient(145deg, #c0ffff 0, #6bffd6 100%);
border: 2px solid #0c4c41;
border-radius: 20px;
font-weight: 900;
padding: 10px 15px;
margin-bottom: 5px;
}
.buttonBlue:hover {
transition: 0.5s;
opacity: 0.8;
animation: intoFocusLight 0.5s forwards;
}
.buttonWhite {
color: #333333;
cursor: pointer;
background: #999999;
background: linear-gradient(45deg, #ffffff 0%, #f9f9f9 100%);
border: 2px solid #e1e1e1;
border-radius: 20px;
font-weight: 900;
padding: 10px 15px;
margin-bottom: 5px;
}
.buttonWhite:hover {
transition: 0.5s;
opacity: 0.8;
animation: intoFocusLight 0.5s forwards;
}
.effectIconList {
display: flex;
gap: 7px;
padding: 7px;
margin: 7px;
flex-direction: row;
}
.effectIconList .expander {
flex-grow: 1;
}
.effectIconList .info {
padding: 5px 15px;
background: #ffd237;
border-radius: 15px;
font-size: 110%;
font-weight: 300;
}
.effectIconList img {
max-height: 25px;
}
.logGrid {
background: #ffffff;
border-radius: 20px;
}
.logGrid .row {
display: grid;
grid-template-columns: 70% 12% 12%;
grid-gap: 10px;
line-height: 120%;
}
.logGrid .row:hover {
background: #ffda69;
}
.logGrid .row .first {
padding: 10px;
padding-left: 20px;
}
.logGrid .row .first .title {
font-size: 140%;
font-weight: 300;
padding-top: 10px;
}
.logGrid .row .first .title img {
width: 30px;
margin-right: 5px;
}
.logGrid .row .first .timestamp {
font-size: 85%;
}
.logGrid .row .number {
font-size: 120%;
font-weight: 300;
text-align: right;
padding-top: 15px;
}
.logGrid .row .number img {
height: 1.5em;
}
.settingsProfileImageUpload .actionArea {
padding: 10px 0;
font-size: 110%;
display: flex;
margin: 13px 0;
}
.settingsProfileImageUpload .actionArea .spacer {
flex-grow: 1;
}
.settingsProfileImageUpload .actionArea .bubble {
background: #fff;
color: #333;
padding: 13px;
display: inline-block;
border-radius: 13px;
}
.settingsProfileImageUpload .actionArea .button {
cursor: pointer;
text-align: center;
display: inline-block;
font-size: 90%;
padding: 10px 15px;
margin: 0 3px 3px 0;
border-radius: 3px;
}
.settingsProfileImageUpload .actionArea .button.blue {
color: #fff;
background: #3ca2fe;
border: 1px solid #3ca2fe;
}
.settingsProfileImageUpload #profileImageUploadContentArea {
border-radius: 13px;
background: #fff;
padding: 13px 13px 30px 13px;
margin: 0 0 20px;
}
.settingsProfileImageUpload .fileSelection .headline {
font-size: 150%;
font-weight: 300;
color: #555555;
text-align: center;
}
.settingsProfileImageUpload .prepareImage {
animation: prepareImage 1.0s infinite;
width: 100px;
margin: auto;
}
.settingsProfileImageUpload .imageUploadStatus {
padding: 0 20px;
text-align: center;
color: #999;
font-weight: bold;
}
.settingsProfileImageUpload .imageUploadStatus .info {
font-weight: 300;
color: #999999;
margin-top: 20px;
}
.settingsProfileImageUpload .removeImage {
text-align: center;
color: #999;
padding: 10px;
background: #e5e5e5;
margin-top: 10px;
width: 340px;
cursor: pointer;
border-radius: 10px;
}
.settingsProfileImageUpload .imageUploadStatus .headline {
font-weight: 300;
padding: 20px;
font-size: 150%;
}
.settingsProfileImageUpload .nonMobile {
display: none;
}
.settingsProfileImageUpload button {
background: #f0f0f0;
border: 1px solid #aaa;
padding: 13px;
border-radius: 7px;
cursor: pointer;
margin: 13px 5px;
color: #888;
display: inline-block;
}
.settingsProfileImageUpload button:hover {
background: #f8f8f8;
color: #000;
}
.settingsProfileImageUpload button[type="submit"] {
border-color: #ffa124;
color: #fff;
background: #ffa124;
}
.settingsProfileImageUpload button[type="submit"]:disabled {
border-color: #999;
color: #999;
background: #e5e5e5;
cursor: default;
opacity: .5;
}
.settingsProfileImageUpload .cameraButton {
background: #f0f0f0;
border: 1px solid #aaa;
padding: 8px;
border-radius: 7px;
cursor: pointer;
margin: 13px 5px;
color: #aaa;
display: inline-block;
}
.settingsProfileImageUpload .cameraButton:hover {
background: #f8f8f8;
}
.settingsProfileImageUpload .media .actionArea {
display: flex;
justify-items: center;
align-items: center;
justify-content: center;
}
.settingsProfileImageUpload .media .actionArea button {
background: #f0f0f0;
border: 1px solid #aaa;
padding: 13px;
border-radius: 7px;
cursor: pointer;
margin: 13px 5px;
color: #aaa;
display: inline-block;
}
.settingsProfileImageUpload .media .actionArea button:hover {
background: #f8f8f8;
color: #000;
}
.settingsProfileImageUpload .media .actionArea button.primary {
border: 1px solid #ffa124;
color: #fff;
background: #ffa124;
cursor: pointer;
}
.settingsProfileImageUpload .media .actionArea button.primary:hover {
background: #ffb134;
}
.settingsProfileImageUpload .media video {
width: 100%;
height: auto;
}
.settingsProfileImageUpload .profileImageRules {
border-radius: 15px;
padding: 15px;
background: #f0f0f0;
margin-bottom: 20px;
}
.settingsProfileImageUpload .profileImageRules ul {
line-height: 1.3;
}
.profileImageSettings {
text-align: center;
}
.profileImageSettings .profileImage {
border-radius: 13px;
}
.profileImageSettings .caption {
font-size: 140%;
line-height: 1.5;
color: #666;
margin: 20px 0 10px 0;
}
.profileImageSettings .actionArea {
display: flex;
flex-direction: row;
padding: 9px 13px;
gap: 13px;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
}
.profileImageSettings .actionArea button {
background: #f0f0f0;
border: 1px solid #aaa;
padding: 13px;
border-radius: 7px;
cursor: pointer;
margin: 13px 5px;
color: #aaa;
display: inline-block;
}
.profileImageSettings .actionArea button:hover {
background: #f8f8f8;
color: #000;
opacity: 1;
}
.profileImageSettings .actionArea button.primary {
border: 1px solid #ffa124;
color: #fff;
background: #ffa124;
cursor: pointer;
}
.profileImageSettings .actionArea button.primary:hover {
background: #ffb134;
}
.profileImageSettings .actionArea .spacer {
flex-grow: 1;
}
.settingsProfileImageList {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
}
.settingsProfileImageList .emptyState {
grid-column: 1 / span 3;
}
.settingsProfileImageList .image {
display: flex;
flex-direction: column;
box-shadow: 0 2px 10px #cacaca;
border-bottom: 4px solid #cacaca;
border-radius: 3px;
overflow: hidden;
}
.settingsProfileImageList .image.default {
border-bottom-color: #ff9510;
}
.settingsProfileImageList .image.inactive {
border-bottom-color: #e03b2a;
opacity: .4;
}
.settingsProfileImageList .image .actionArea {
display: flex;
flex-direction: row;
background: #fff;
padding: 9px 13px;
gap: 13px;
flex-wrap: nowrap;
align-items: center;
}
.settingsProfileImageList .image .actionArea .action {
display: inline-block;
max-width: 15%;
opacity: .7;
transition: .2s;
}
.settingsProfileImageList .image .actionArea .action:hover {
opacity: 1;
}
.settingsProfileImageList .image .actionArea .action:active img {
filter: sepia(100%) saturate(300%) hue-rotate(180deg);
}
.settingsProfileImageList .image .actionArea .action:focus img {
filter: sepia(100%) saturate(100%) hue-rotate(180deg);
}
.settingsProfileImageList .image .actionArea .spacer {
flex-grow: 1;
}
.profileImageQuickNavigation {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 7px;
justify-items: center;
align-items: center;
padding: 13px;
}
.profileImageQuickNavigation .profileImageQuickNavigationEntry {
border-radius: 50% 50%;
border: 4px solid #fff;
}
.profileImageQuickNavigation .profileImageQuickNavigationEntry.active {
border-color: #ff9510;
}
#profileImageLayer {
width: 100vw;
display: flex;
align-content: center;
justify-content: center;
background: rgba(33, 33, 33, 0.7);
align-items: center;
}
#profileImageLayer .profileImageLayerContainer {
background: #fff;
padding: 13px;
margin: 20px;
border-radius: 13px;
overflow-y: auto;
text-align: center;
}
#profileImageLayer .profileImage {
max-height: 60vh;
}
div.serviceInformation {
display: block;
margin: 7px 7px 13px 7px;
padding: 9px;
border-radius: 7px;
background: #e03b2a;
border: 2px solid #e03b2a;
color: #eee;
font-weight: 500;
font-size: 13px;
line-height: 1.4;
text-align: left;
max-width: 658px;
}
div.serviceInformation a,
.serviceInformation a:hover,
.serviceInformation a:active,
.serviceInformation a:focus {
color: #fff;
text-decoration: underline;
font-weight: 900;
}
@media screen and (max-width: 490px) {
.logGrid {
border-radius: 0;
width: 100%;
}
.logGrid .row .first {
grid-column-end: span 3;
}
.logGrid .row .two {
grid-row-start: 2;
grid-column: 2;
}
.logGrid .row .three {
grid-row-start: 2;
grid-column: 3;
}
.logGrid .row .three img {
margin-right: 10px;
}
.logGrid .row {
grid-template-columns: auto;
grid-gap: 0;
}
.logGrid .row .number {
padding-top: 0;
padding-bottom: 10px;
}
}
[data-trc-body],
.tickerModerated__body {
display: none;
}
[data-trc],
.tickerModeratedReveal {
cursor: pointer;
}
.tickerModerated--sensitive,
.tickerModerated__hint {
display: inline-block;
padding: 4px 10px;
border: 1px dashed #cfcfcf;
border-radius: 5px;
color: #9a9a9a;
font-style: italic;
cursor: pointer;
}
.tickerModerated--block {
display: block;
margin: 10px;
padding: 10px 14px;
text-align: center;
}
.tickerModeratedTombstone {
color: #9a9a9a;
font-style: italic;
padding: 10px;
}
.tickerModeratedTombstone--center {
display: block;
padding: 20px;
text-align: center;
}
.tickerModeratedOwnerNotice {
padding: 8px 10px;
margin: 4px 0;
border-left: 3px solid #e0b400;
background: #fbf7e6;
color: #7a6a00;
border-radius: 3px;
}
.tickerModeratedIndicator {
width: 16px;
height: 16px;
vertical-align: middle;
margin-left: 5px;
}
.loginInfo {
padding: 0 30px;
text-align: left;
line-height: 160%;
font-size: 100%;
font-weight: 300;
text-align: center;
color: #ffffff;
padding-bottom: 20px;
font-family: 'Source Sans Pro', sans-serif;
position: relative;
}
.loginInfo .info {
margin-bottom: 10px;
}
.loginInfo a.login {
display: block;
text-transform: uppercase;
font-weight: 600;
background: #ffa225;
color: #ffffff;
padding: 10px 15px;
border-radius: 3px;
}
.loginInfo a:hover.login {
text-decoration: underline;
background: #ffb551;
}
.loginInfo .wrapper {
padding: 5px;
background: linear-gradient(137deg, #f7ab2c, #f3d240, #9cf5ff);
max-width: 320px;
border-radius: 20px;
margin: auto;
animation: brandingColor 5s ease infinite;
}
.layerLogin {
animation: showLogin 0.2s;
background: #ffffff;
padding: 30px;
border-radius: 20px;
border: 1px solid #5f5f5f;
}
.loginForm {
padding-top: 0;
max-width: 320px;
margin: auto;
background: #212626;
background: linear-gradient(137deg, #363e3e, #212626);
border-radius: 20px;
padding-top: 20px;
padding-bottom: 10px;
}
.loginForm .title {
padding: 10px;
font-size: 150%;
color: #ffffff;
font-weight: 800;
}
.loginForm .input {
background: #ffffff;
border-radius: 20px;
font-size: 16px;
font-weight: 600;
text-indent: 10px;
padding: 15px 15px;
margin-bottom: 10px;
border: 2px solid #000000;
width: 240px;
}
.loginForm .input:focus,
.loginForm .input:hover {
border: 2px solid #3efff6;
transition: 0.3s;
}
.loginForm fieldset {
border: none;
margin: 5px 0 25px 0;
padding: 0;
line-height: 120%;
color: #ffffff;
}
.loginForm .new {
padding: 10px;
color: #ffffff;
}
.loginForm .new a {
font-weight: 600;
color: #a5f7ff;
}
.loginForm .button,
.requestPassword .button {
padding: 12px 15px;
text-align: left;
width: 270px;
margin-top: 10px;
text-align: center;
background: #ffa225;
background: linear-gradient(145deg, #c0ffff 0, #6bffd6 100%);
border: 2px solid #64f3db;
color: #000000;
border-radius: 20px;
font-weight: 800;
font-size: 16px;
cursor: pointer;
}
.loginForm .button:hover,
.requestPassword .button:hover {
box-shadow: 0 5px 15px #fcaf3b;
}
.loginForm .subline {
padding: 2px 10px;
text-align: right;
margin-bottom: 5px;
font-size: 90%;
}
.loginForm .autologin {
padding: 2px 10px;
text-align: left;
margin-bottom: 5px;
font-size: 100%;
text-indent: 20px;
}
.loginForm a.useful {
display: block;
font-weight: 600;
color: #ffffff;
padding: 10px 15px;
padding-right: 0;
text-align: left;
text-indent: 20px;
font-size: 110%;
}
.loginForm a:hover.useful {
text-decoration: underline;
}
.requestPassword {
text-align: center;
font-family: 'Source Sans Pro', sans-serif;
margin-top: 10px;
}
.requestPassword .legend {
padding: 10px 20px;
text-align: left;
font-weight: 800;
font-size: 140%;
line-height: 140%;
padding-bottom: 5px;
}
.requestPassword .info {
font-size: 13px;
padding: 10px 20px;
line-height: 16px;
text-align: left;
margin-bottom: 10px;
}
.requestPassword form {
width: 320px;
margin: auto;
text-align: center;
background: linear-gradient(137deg, #363e3e 0, #212626 100%);
border-radius: 20px;
padding-top: 20px;
padding-bottom: 20px;
color: #ffffff;
}
.requestPassword .wrapper {
padding: 5px;
background: linear-gradient(137deg, #f7e150 0, #9cf5ff 100%);
max-width: 320px;
border-radius: 20px;
margin: auto;
}
.requestPassword .input {
background: #ffffff !important;
border-radius: 15px;
font-size: 100%;
padding: 12px 15px;
text-indent: 5px;
margin-bottom: 10px;
border: 1px solid #c8c8c8;
width: 240px;
}
.header a.registration {
color: #f6feff;
display: block;
float: right;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 600;
padding: 9px 20px;
background: #101010;
border: 1px solid #000000;
border-radius: 15px;
font-size: 130%;
margin-top: 7px;
margin-right: 10px;
}
.header a:hover.registration {
animation: intoFocusLight 0.6s forwards;
transition: 0.8s;
}
.header a.loginLink {
color: #064031;
display: block;
float: right;
font-family: 'Source Sans Pro', sans-serif;
background: linear-gradient(145deg, #c0ffff 0, #6bffd6 100%);
letter-spacing: -1px;
border: 1px solid #0c4c41;
font-weight: 600;
padding: 9px 20px;
border-radius: 15px;
font-size: 130%;
margin-top: 7px;
margin-right: 10px;
}
.header a:hover.loginLink {
animation: intoFocusLight 0.6s forwards;
transition: 0.8s;
}
.registrationSite {
text-align: center;
}
.registrationSite .wrapper {
margin: 0 auto;
width: 700px;
padding-top: 20px;
}
.registrationSite .form {
width: 350px;
margin: auto;
text-align: left;
}
.registrationSite .button {
padding-top: 10px;
}
.registrationForm {
font-family: 'Source Sans Pro', sans-serif;
}
.registrationForm .input {
background: #ffffff !important;
border-radius: 15px;
font-size: 120%;
padding: 10px 10px;
border: 1px solid #c4c4c4 !important;
width: 270px;
text-indent: 5px;
}
.registrationForm .input:focus {
border: 1px solid #417bc4;
}
.registrationForm fieldset {
border: none;
margin: 15px 0 25px 0;
padding: 0;
width: 100%;
line-height: 120%;
}
.registrationForm .legends {
padding: 10px;
text-align: left;
font-weight: 800;
font-size: 160%;
line-height: 140%;
}
.registrationForm .line {
padding: 3px 0 5px 5px;
}
.registrationForm .line .title {
padding: 5px;
color: #8d8d8d;
font-weight: 400;
}
.registrationForm .termsOfUse {
padding: 3px;
margin-top: 5px;
width: 240px;
line-height: 130%;
}
.registrationForm .termsOfUse:hover {
background: #ffda1f;
}
.registrationForm .lawText {
font-size: 100%;
font-weight: 400;
color: #767676;
text-align: center;
padding: 10px;
width: 300px;
line-height: 140%;
}
.registrationForm .send .button {
padding: 12px 15px;
font-family: 'Source Sans Pro', sans-serif;
width: 290px;
background: #ffa225;
background: linear-gradient(139deg, #f7e150 0, #f7b92c 100%);
border: 2px solid #f7c133;
font-weight: 800;
color: #332506;
border-radius: 20px;
margin-left: 10px;
font-size: 140%;
cursor: pointer;
}
.registrationInfo {
max-width: 100%;
min-width: 90%;
background: #ffffff;
margin-bottom: 30px;
border: 1px solid #d7d7d7;
border-radius: 10px;
margin-top: 5px;
margin-bottom: 10px;
padding: 20px 40px;
}
/* Einladung / Registrierung 2024 */
.inviteRegistrationSite {
display: flex;
flex-direction: column;
padding: 7px;
line-height: 1.3;
align-content: center;
align-items: center;
}
.inviteRegistrationAssistant {
display: flex;
flex-direction: column;
gap: 7px;
height: calc(100vh - 70px);
max-width: 480px;
width: 100%;
background: #fff;
max-height: 720px;
}
.inviteRegistrationAssistant > .pagerHeader {
display: flex;
flex-direction: row;
justify-content: center;
align-content: center;
padding: 11px;
font-size: 1.5em;
font-weight: 900;
color: #555;
background: #f0f0f0;
}
.inviteRegistrationAssistant > .pagerContent {
flex-grow: 1;
padding: 7px;
overflow: hidden;
max-height: calc(100vh - 70px - 40px - 60px);
box-sizing: border-box;
}
.inviteRegistrationAssistant > .pagerContent > .pager {
position: relative;
width: auto;
height: 100%;
}
.inviteRegistrationAssistant > .pagerContent > .pager > .page {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
position: absolute;
transition: .3s;
transition-timing-function: ease;
top: 0;
left: 0;
max-width: min(calc(100vw - 28px), calc(480px - 28px));
width: min(calc(100vw - 28px), calc(480px - 28px));
box-sizing: border-box;
height: 100%;
overflow-y: auto;
opacity: 1.0;
}
.inviteRegistrationAssistant > .pagerContent > .pager > .page.previous {
left: -480px;
opacity: 0.0;
}
.inviteRegistrationAssistant > .pagerContent > .pager > .page.upcoming {
left: 480px;
opacity: 0.0;
}
.inviteRegistrationAssistant > .pagerContent > .pager > .page > .pageCaption {
display: none;
}
.inviteRegistrationAssistant > .pagerContent > .pager > .page > *:last-child {
margin-top: 17px;
}
.inviteRegistrationAssistant > .pagerContent > .pager > .page p {
padding: 0 13px 11px 13px;
line-height: 1.5;
font-size: 1.2em;
}
.inviteRegistrationAssistant > .pagerContent > .pager > .page p .username {
font-weight: 900;
}
.inviteRegistrationAssistant > .pagerContent .invitationForm {
display: grid;
grid-gap: 3px 7px;
margin-top: 13px;
}
.inviteRegistrationAssistant > .pagerContent .invitationForm label {
padding: 3px 13px;
font-weight: bold;
font-size: 0.9em;
color: #777;
line-height: 1.7;
}
.inviteRegistrationAssistant > .pagerContent .invitationForm input[type="text"],
.inviteRegistrationAssistant > .pagerContent .invitationForm input[type="email"],
.inviteRegistrationAssistant > .pagerContent .invitationForm input[type="password"],
.inviteRegistrationAssistant > .pagerContent .invitationForm input[type="number"],
.inviteRegistrationAssistant > .pagerContent .invitationForm select {
padding: 7px 13px;
font-size: 1.3em;
border: 1px solid #a0a0a0;
background: #fff;
border-radius: 7px;
box-sizing: border-box;
width: 100%;
line-height: 1.7;
}
.inviteRegistrationAssistant > .pagerContent .invitationFormInput {
grid-template-rows: auto auto auto;
grid-template-columns: 1fr;
}
.inviteRegistrationAssistant > .pagerContent .invitationFormInput label {
grid-row: 1 / span 1;
grid-column: 1 / span 1;
}
.inviteRegistrationAssistant > .pagerContent .invitationFormInput input {
grid-row: 2 / span 1;
grid-column: 1 / span 1;
}
.inviteRegistrationAssistant > .pagerContent .invitationFormInput .hintList {
grid-row: 3 / span 1;
grid-column: 1 / span 1;
}
.inviteRegistrationAssistant > .pagerContent .invitationFormOptionList {
grid-row: 2 / span 1;
grid-column: 1 / span 3;
display: flex;
justify-content: center;
flex-direction: row;
}
.inviteRegistrationAssistant > .pagerContent .invitationFormOptionList .optionList {
display: flex;
flex-direction: row;
flex-wrap: wrap;
border: 2px solid #a0a0a0;
background: #f0f0f0;
border-radius: 7px;
box-sizing: border-box;
justify-content: center;
align-content: flex-start;
align-items: flex-start;
gap: 1px;
overflow: hidden;
}
.inviteRegistrationAssistant > .pagerContent .invitationFormOptionList .optionList .optionEntry {
display: grid;
grid-template-columns: 64px;
grid-template-rows: auto 64px auto;
align-content: center;
justify-content: center;
align-items: center;
justify-items: center;
cursor: pointer;
grid-gap: 7px;
padding: 7px;
color: #555;
font-weight: bold;
box-sizing: border-box;
}
.inviteRegistrationAssistant > .pagerContent .invitationFormOptionList .optionList .optionEntry img {
width: 40px;
height: 40px;
grid-column: 1 / span 1;
grid-row: 2 / span 1;
}
.inviteRegistrationAssistant > .pagerContent .invitationFormOptionList .optionList .optionEntry.selected {
background: linear-gradient(45deg, #ff9a33 0%, #ffc636 100%);
color: #fff;
}
.inviteRegistrationAssistant > .pagerContent .invitationFormOptionList .optionList .optionEntry label.optionLabel {
text-align: center;
font-size: 0.8em;
grid-column: 1 / span 1;
grid-row: 3 / span 1;
}
.inviteRegistrationAssistant > .pagerContent .invitationFormDate {
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto auto;
}
.inviteRegistrationAssistant > .pagerContent .invitationFormDate #labelBirthday {
grid-column: 1 / span 1;
grid-row: 1 / span 1;
}
.inviteRegistrationAssistant > .pagerContent .invitationFormDate #inputBirthday {
grid-column: 1 / span 1;
grid-row: 2 / span 1;
}
.inviteRegistrationAssistant > .pagerContent .invitationFormDate #labelBirthmonth {
grid-column: 2 / span 1;
grid-row: 1 / span 1;
}
.inviteRegistrationAssistant > .pagerContent .invitationFormDate #inputBirthmonth {
grid-column: 2 / span 1;
grid-row: 2 / span 1;
}
.inviteRegistrationAssistant > .pagerContent .invitationFormDate #labelBirthyear {
grid-column: 3 / span 1;
grid-row: 1 / span 1;
}
.inviteRegistrationAssistant > .pagerContent .invitationFormDate #inputBirthyear {
grid-column: 3 / span 1;
grid-row: 2 / span 1;
}
.inviteRegistrationAssistant > .pagerContent .invitationFormDate .hintList {
grid-column: 1 / span 3;
grid-row: 3 / span 1;
}
.inviteRegistrationAssistant > .pagerContent .invitationFormCheckbox {
grid-template-columns: auto 1fr;
grid-template-rows: auto;
align-content: center;
justify-content: start;
align-items: center;
justify-items: start;
}
.inviteRegistrationAssistant > .pagerContent .invitationFormCheckbox input[type="checkbox"] {
grid-column: 1 / span 1;
grid-row: 1 / span 1;
}
.inviteRegistrationAssistant > .pagerContent .invitationFormCheckbox label {
grid-column: 2 / span 1;
grid-row: 1 / span 1;
padding-left: 0;
}
.inviteRegistrationAssistant > .pagerContent .hintList {
display: flex;
flex-direction: column;
padding: 7px;
gap: 11px;
margin: 17px 0 7px 0;
}
.inviteRegistrationAssistant > .pagerContent .hintList .hintEntry {
display: grid;
grid-template-rows: auto auto;
grid-template-columns: 32px auto;
grid-gap: 5px;
transition: .7s;
align-items: start;
justify-items: start;
align-content: start;
justify-content: start;
}
.inviteRegistrationAssistant > .pagerContent .hintList .hintEntry .hintIcon {
grid-row: 1 / span 2;
grid-column: 1 / span 1;
}
.inviteRegistrationAssistant > .pagerContent .hintList .hintEntry .hintIcon img {
max-width: 24px;
}
.inviteRegistrationAssistant > .pagerContent .hintList .hintEntry .hintCaption {
grid-row: 1 / span 1;
grid-column: 2 / span 1;
font-weight: bold;
}
.inviteRegistrationAssistant > .pagerContent .hintList .hintEntry .hintDescription {
grid-row: 2 / span 1;
grid-column: 2 / span 1;
}
.inviteRegistrationAssistant > .pagerContent .hintList .hintEntry.hintUnknown {
color: #555;
opacity: 0;
display: none;
}
.inviteRegistrationAssistant > .pagerContent .hintList .hintEntry.hintUnknown .hintCheck {
display: none;
}
.inviteRegistrationAssistant > .pagerContent .hintList .hintEntry.hintUnknown .hintTimes {
display: none;
}
.inviteRegistrationAssistant > .pagerContent .hintList .hintEntry.hintSuccess {
color: #84b000;
opacity: 0;
display: none;
}
.inviteRegistrationAssistant > .pagerContent .hintList .hintEntry.hintSuccess .hintCheck {
display: inline;
}
.inviteRegistrationAssistant > .pagerContent .hintList .hintEntry.hintSuccess .hintTimes {
display: none;
}
.inviteRegistrationAssistant > .pagerContent .hintList .hintEntry.hintFail {
color: #ca4b36;
}
.inviteRegistrationAssistant > .pagerContent .hintList .hintEntry.hintFail .hintCheck {
display: none;
}
.inviteRegistrationAssistant > .pagerContent .hintList .hintEntry.hintFail .hintTimes {
display: inline;
}
.inviteRegistrationAssistant > .pagerContent #pageRegistration {
align-content: center;
align-items: center;
}
.inviteRegistrationAssistant > .pagerContent #pageRegistration p {
text-align: center;
}
.inviteRegistrationAssistant > .pagerContent #pageRegistration img {
width: 140px;
height: 140px;
margin: 40px 0;
}
.inviteRegistrationAssistant > .pagerContent .terms {
max-height: 240px;
flex-grow: 1;
overflow-y: auto;
background: #fff;
border: 1px solid #a0a0a0;
border-radius: 7px;
grid-row: 2 / span 1;
grid-column: 1 / span 3;
font-size: 0.9em;
}
.inviteRegistrationAssistant > .pagerContent .terms .hlG1 {
padding: 7px !important;
}
.inviteRegistrationAssistant > .pagerContent .terms #infoSection {
margin: 0 !important;
}
.inviteRegistrationAssistant > .pagerContent .terms .infosTerms {
padding: 0 7px 0 7px;
font-size: 1.2em;
}
.inviteRegistrationAssistant > .pagerFooter {
display: flex;
flex-direction: row;
padding: 7px;
align-items: stretch;
align-content: center;
justify-content: space-around;
height: 96px;
}
.inviteRegistrationAssistant > .pagerFooter > .pagerNavigationButton {
display: flex;
flex-direction: column;
width: 80px;
padding: 7px;
box-sizing: border-box;
border: 2px solid;
border-radius: 7px;
justify-items: center;
align-items: center;
justify-content: center;
align-content: center;
gap: 13px;
font-size: 1.2em;
font-weight: 900;
cursor: pointer;
height: 96px;
transition: .7s;
overflow: hidden;
}
.inviteRegistrationAssistant > .pagerFooter > .pagerNavigationButton.pagerNavigationPrev {
background: #999999;
background: linear-gradient(45deg, #999999 0%, #c5c5c5 100%);
color: #ffffff;
border-color: #898989;
}
.inviteRegistrationAssistant > .pagerFooter > .pagerNavigationButton.pagerNavigationPrev[disabled] {
opacity: 0 !important;
}
.inviteRegistrationAssistant > .pagerFooter > .pagerNavigationButton.pagerNavigationPrev:hover {
background: #cccccc;
background: linear-gradient(45deg, #cccccc 0%, #f7f7f7 100%);
}
.inviteRegistrationAssistant > .pagerFooter > .pagerNavigationButton.pagerNavigationPrev:active {
background: #808080;
background: linear-gradient(45deg, #808080 0%, #a8a8a8 100%);
}
.inviteRegistrationAssistant > .pagerFooter > .pagerNavigationButton.pagerNavigationNext {
background: #00b8ff;
background: linear-gradient(30deg, #73d9ff 0, #01b8ff 100%);
color: #ffffff;
border-color: #47c6f8;
}
.inviteRegistrationAssistant > .pagerFooter > .pagerNavigationButton.pagerNavigationNext:hover {
background: #33c9ff;
background: linear-gradient(30deg, #33c9ff 0, #36c9ff 100%);
}
.inviteRegistrationAssistant > .pagerFooter > .pagerNavigationButton.pagerNavigationNext:active {
background: #0083b3;
background: linear-gradient(30deg, #0083b3 0, #0283b3 100%);
}
.inviteRegistrationAssistant > .pagerFooter > .pagerNavigationButton.pagerNavigationSubmit {
background: #cdff69;
background: linear-gradient(45deg, #cdff69 0%, #befc42 100%);
color: #96c223;
border-color: #abed26;
}
.inviteRegistrationAssistant > .pagerFooter > .pagerNavigationButton.pagerNavigationSubmit:hover {
background: #d8ff85;
background: linear-gradient(45deg, #d8ff85 0%, #c8fa5c 100%);
}
.inviteRegistrationAssistant > .pagerFooter > .pagerNavigationButton.pagerNavigationSubmit:active {
background: #98b35f;
background: linear-gradient(45deg, #98b35f 0%, #8dad40 100%);
}
.inviteRegistrationAssistant > .pagerFooter > .pagerNavigationButton[disabled] {
opacity: 0.5;
cursor: default;
}
.inviteRegistrationAssistant > .pagerFooter > .pagerNavigationButton > img {
width: 32px;
height: 32px;
}
.inviteRegistrationAssistant > .pagerFooter > .pagerNavigationButtonList {
display: flex;
flex-direction: row;
list-style: none;
margin: 0;
padding: 7px;
flex-grow: 1;
justify-content: center;
align-content: center;
justify-items: center;
align-items: center;
flex-wrap: wrap;
gap: 11px 3px;
}
.inviteRegistrationAssistant > .pagerFooter > .pagerNavigationButtonList > li {
margin: 0;
padding: 0;
}
.inviteRegistrationAssistant > .pagerFooter > .pagerNavigationButtonList > li > .pagerNavigationButton {
display: inline-block;
width: 20px;
height: 20px;
box-sizing: border-box;
background: none;
border: 0;
cursor: pointer;
transition: .5s;
}
.inviteRegistrationAssistant > .pagerFooter > .pagerNavigationButtonList > li > .pagerNavigationButton[disabled] {
opacity: 0.5;
cursor: default;
}
.inviteRegistrationAssistant > .pagerFooter > .pagerNavigationButtonList > li > .pagerNavigationButton > img {
width: 16px;
height: 16px;
}
.inviteRegistrationTemplateSection {
display: none;
}
.about {
padding: 10px;
font-size: 12px;
color: #878787;
line-height: 20px;
margin-top: 20px;
}
.about a {
margin: 5px;
color: #999999;
font-weight: 300;
}
.about a:hover {
text-decoration: underline;
color: #000000;
}
.guest .helpState {
width: auto;
}
.guest .siteRight {
width: 100% !important;
box-sizing: border-box;
}
.guest .site {
width: 100% !important;
}
.logoutAd {
text-align: center;
}
@media screen and (max-width: 600px) {
.loginInfo {
padding: 0 5px;
}
}
@font-face {
font-family: 'Luckiest Guy';
font-style: normal;
font-weight: 400;
src: local('Luckiest Guy'), url('/font/1/LuckiestGuy-Regular.ttf') format('truetype'), url('/font/1/LuckiestGuy-Regular.woff') format('woff'), url('/font/1/LuckiestGuy-Regular.woff2') format('woff2'), url('/font/1/LuckiestGuy-Regular.otf') format('opentype');
}
/* Roboto */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: local('Roboto'), url('/font/1/Roboto-Light.ttf') format('truetype'), url('/font/1/Roboto-Light.woff') format('woff'), url('/font/1/Roboto-Light.woff2') format('woff2'), url('/font/1/Roboto-Light.otf') format('opentype');
}
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 300;
src: local('Roboto'), url('/font/1/Roboto-LightItalic.ttf') format('truetype'), url('/font/1/Roboto-LightItalic.woff') format('woff'), url('/font/1/Roboto-LightItalic.woff2') format('woff2'), url('/font/1/Roboto-LightItalic.otf') format('opentype');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), url('/font/1/Roboto-Regular.ttf') format('truetype'), url('/font/1/Roboto-Regular.woff') format('woff'), url('/font/1/Roboto-Regular.woff2') format('woff2'), url('/font/1/Roboto-Regular.otf') format('opentype');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: local('Roboto'), url('/font/1/Roboto-Medium.ttf') format('truetype'), url('/font/1/Roboto-Medium.woff') format('woff'), url('/font/1/Roboto-Medium.woff2') format('woff2'), url('/font/1/Roboto-Medium.otf') format('opentype');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 500;
src: local('Roboto'), url('/font/1/Roboto-MediumItalic.ttf') format('truetype'), url('/font/1/Roboto-MediumItalic.woff') format('woff'), url('/font/1/Roboto-MediumItalic.woff2') format('woff2'), url('/font/1/Roboto-MediumItalic.otf') format('opentype');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: local('Roboto'), url('/font/1/Roboto-Bold.ttf') format('truetype'), url('/font/1/Roboto-Bold.woff') format('woff'), url('/font/1/Roboto-Bold.woff2') format('woff2'), url('/font/1/Roboto-Bold.otf') format('opentype');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 700;
src: local('Roboto'), url('/font/1/Roboto-BoldItalic.ttf') format('truetype'), url('/font/1/Roboto-BoldItalic.woff') format('woff'), url('/font/1/Roboto-BoldItalic.woff2') format('woff2'), url('/font/1/Roboto-BoldItalic.otf') format('opentype');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 900;
src: local('Roboto'), url('/font/1/Roboto-Black.ttf') format('truetype'), url('/font/1/Roboto-Black.woff') format('woff'), url('/font/1/Roboto-Black.woff2') format('woff2'), url('/font/1/Roboto-Black.otf') format('opentype');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 900;
src: local('Roboto'), url('/font/1/Roboto-BlackItalic.ttf') format('truetype'), url('/font/1/Roboto-BlackItalic.woff') format('woff'), url('/font/1/Roboto-BlackItalic.woff2') format('woff2'), url('/font/1/Roboto-BlackItalic.otf') format('opentype');
}
/* Source Sans Pro */
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 200;
src: local('Source Sans Pro'), url('/font/1/SourceSansPro-ExtraLight.ttf') format('truetype'), url('/font/1/SourceSansPro-ExtraLight.woff') format('woff'), url('/font/1/SourceSansPro-ExtraLight.woff2') format('woff2'), url('/font/1/SourceSansPro-ExtraLight.otf') format('opentype');
}
@font-face {
font-family: 'Source Sans Pro';
font-style: italic;
font-weight: 200;
src: local('Source Sans Pro'), url('/font/1/SourceSansPro-ExtraLightItalic') format('truetype'), url('/font/1/SourceSansPro-ExtraLightItalic.woff') format('woff'), url('/font/1/SourceSansPro-ExtraLightItalic.woff2') format('woff2'), url('/font/1/SourceSansPro-ExtraLightItalic.otf') format('opentype');
}
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 300;
src: local('Source Sans Pro'), url('/font/1/SourceSansPro-Light.ttf') format('truetype'), url('/font/1/SourceSansPro-Light.woff') format('woff'), url('/font/1/SourceSansPro-Light.woff2') format('woff2'), url('/font/1/SourceSansPro-Light.otf') format('opentype');
}
@font-face {
font-family: 'Source Sans Pro';
font-style: italic;
font-weight: 300;
src: local('Source Sans Pro'), url('/font/1/SourceSansPro-LightItalic.ttf') format('truetype'), url('/font/1/SourceSansPro-LightItalic.woff') format('woff'), url('/font/1/SourceSansPro-LightItalic.woff2') format('woff2'), url('/font/1/SourceSansPro-LightItalic.otf') format('opentype');
}
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
src: local('Source Sans Pro'), url('/font/1/SourceSansPro-Regular.ttf') format('truetype'), url('/font/1/SourceSansPro-Regular.woff') format('woff'), url('/font/1/SourceSansPro-Regular.woff2') format('woff2'), url('/font/1/SourceSansPro-Regular.otf') format('opentype');
}
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 600;
src: local('Source Sans Pro'), url('/font/1/SourceSansPro-SemiBold.ttf') format('truetype'), url('/font/1/SourceSansPro-SemiBold.woff') format('woff'), url('/font/1/SourceSansPro-SemiBold.woff2') format('woff2'), url('/font/1/SourceSansPro-SemiBold.otf') format('opentype');
}
@font-face {
font-family: 'Source Sans Pro';
font-style: italic;
font-weight: 600;
src: local('Source Sans Pro'), url('/font/1/SourceSansPro-SemiBoldItalic.ttf') format('truetype'), url('/font/1/SourceSansPro-SemiBoldItalic.woff') format('woff'), url('/font/1/SourceSansPro-SemiBoldItalic.woff2') format('woff2'), url('/font/1/SourceSansPro-SemiBoldItalic.otf') format('opentype');
}
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 700;
src: local('Source Sans Pro'), url('/font/1/SourceSansPro-Bold.ttf') format('truetype'), url('/font/1/SourceSansPro-Bold.woff') format('woff'), url('/font/1/SourceSansPro-Bold.woff2') format('woff2'), url('/font/1/SourceSansPro-Bold.otf') format('opentype');
}
@font-face {
font-family: 'Source Sans Pro';
font-style: italic;
font-weight: 700;
src: local('Source Sans Pro'), url('/font/1/SourceSansPro-BoldItalic.ttf') format('truetype'), url('/font/1/SourceSansPro-BoldItalic.woff') format('woff'), url('/font/1/SourceSansPro-BoldItalic.woff2') format('woff2'), url('/font/1/SourceSansPro-BoldItalic.otf') format('opentype');
}
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 900;
src: local('Source Sans Pro'), url('/font/1/SourceSansPro-Black.ttf') format('truetype'), url('/font/1/SourceSansPro-Black.woff') format('woff'), url('/font/1/SourceSansPro-Black.woff2') format('woff2'), url('/font/1/SourceSansPro-Black.otf') format('opentype');
}
@font-face {
font-family: 'Source Sans Pro';
font-style: italic;
font-weight: 900;
src: local('Source Sans Pro'), url('/font/1/SourceSansPro-BlackItalic.ttf') format('truetype'), url('/font/1/SourceSansPro-BlackItalic.woff') format('woff'), url('/font/1/SourceSansPro-BlackItalic.woff2') format('woff2'), url('/font/1/SourceSansPro-BlackItalic.otf') format('opentype');
}
/* Mailbox */
.inbox .left {
width: 100%;
}
.inbox .right {
display: none;
}
.mailboxSelectReceiver .title {
padding: 20px 15px 10px 15px;
font-weight: 700;
font-size: 120%;
}
.mailboxSelectReceiver .titleValue input {
margin-left: 15px;
padding: 15px;
border-radius: 5px;
width: 80%;
border: 1px solid #d5d5d5;
}
.mailboxSelectReceiver .row {
padding: 5px 5px;
}
.mailboxSelectReceiver .row .profileImage {
float: left;
}
.mailboxSelectReceiver .row .profileImage img {
border-radius: 50%;
width: 50px;
}
.mailboxSelectReceiver .row .nickname {
float: left;
padding: 15px 10px;
font-weight: 600;
font-size: 110%;
}
.mailboxSelectReceiver .row .nickname .preStamp {
display: none;
}
.mailboxSelectReceiver .row .checkbox {
float: left;
width: 20px;
padding: 15px 10px;
}
/* Kommt weg */
.mailboxNavigation {
overflow: visible;
margin-left: 0;
padding-top: 0;
}
.mailboxNavigation a.entry {
float: left;
width: 60px;
border-bottom: 4px solid #cccccc;
padding-top: 10px;
display: block;
}
.mailboxNavigation a.entry.active {
background: transparent;
border-bottom: 4px solid #a3d845;
font-weight: 600;
color: #000000;
}
.mailboxNavigation a.entry {
background: transparent;
padding: 12px 5px 11px 5px;
}
.mailboxNavigation a.entry {
margin-right: 15px;
}
.mailboxNavigation a.entry {
margin: 0;
width: 120px;
}
.mailboxNavigation a.entry.simple {
width: 30px;
}
.mailboxNavigation a.entry .icon {
float: left;
}
.mailboxNavigation a.entry .icon img {
width: 30px;
}
.mailboxNavigation a.entry .text {
float: left;
text-indent: 5px;
padding-top: 9px;
font-size: 100%;
color: #929292;
}
.mailboxNavigation a.entry.simple .text {
display: none;
}
.mailboxNavigation a.entry.active {
border-width: 4px;
}
.mailboxNavigation a.entry.aboLink {
display: none;
}
.subNavigation a.addChat {
display: block;
text-align: center;
float: right;
border-radius: 50px;
width: 35px;
height: 35px;
background: #f84538;
margin-right: 3%;
}
.subNavigation a.addChat .text {
display: none;
}
.subNavigation a.addChat .icon {
padding: 5px;
}
.subNavigation a.addChat .icon img {
width: 30px;
}
.subNavigation a.addGroup {
display: block;
text-align: center;
float: right;
border-radius: 50px;
height: 40px;
background: #ffa225;
margin-right: 3%;
}
.subNavigation a.addGroup .text {
float: left;
color: #ffffff;
padding: 15px 15px;
font-weight: 800;
display: block;
}
.conversationListActions {
display: none;
}
.conversationListActions .parent {
display: flex;
padding-bottom: 5px;
}
.conversationListActions .divider {
display: inline-block;
border-left: 1px solid #777;
margin: 5px;
margin-right: 10px;
}
.conversationListActions a {
display: inline-block;
padding: 12px 15px;
color: #fff;
border-radius: 25px;
background: #ffa225;
font-size: 100%;
margin-right: 5px;
}
.conversationListActions a:hover {
background: #555;
}
.conversationListActions a:active {
background: #555;
}
.conversationListActions a.danger {
background: #FF6C62;
}
.conversationListActions a.danger:hover {
background: #FF8A82;
}
.listOfSuggestedFriends {
margin-left: 10px;
}
.listOfConversations {
line-height: 130%;
background: #ffffff;
border-radius: 2px;
min-height: 300px;
}
.listOfConversations .conversation {
width: 100%;
border-top: 1px solid #f1f1f1;
padding-bottom: 5px;
}
.listOfConversations .conversation:first-child {
border-top: none;
padding-top: 5px;
}
.listOfConversations .conversation.unread {
background: #ffd237;
border-top: 1px solid #f1f1f1;
}
.listOfConversations .conversation.mention {
background: #7FB5FF;
}
.listOfConversations .conversation:hover {
background: #FDD978;
}
.listOfConversations .conversation.mention:hover {
background: #77AFFC;
}
.listOfConversations .conversation .checkbox {
float: left;
display: none;
width: 50px;
min-height: 30px;
padding-top: 25px;
cursor: pointer;
}
.listOfConversations .conversation .checkbox img {
margin-left: 20px;
}
.listOfConversations .conversation a.box {
float: left;
display: block;
width: 420px;
padding-top: 5px;
padding-bottom: 5px;
cursor: pointer;
clear: both;
}
.listOfConversations .conversation .sender {
float: left;
width: 55px;
padding-top: 13px;
margin-left: 3%;
}
.listOfConversations .conversation .sender .picture {
float: left;
width: 50px;
min-height: 35px;
padding-left: 5px;
}
.listOfConversations .conversation .sender .picture img {
width: 37px;
height: 37px;
border-radius: 50%;
vertical-align: text-bottom;
}
.listOfConversations .conversation .sender .userStamp {
float: left;
display: none;
width: 145px;
overflow: hidden;
font-size: 95%;
padding-top: 7px;
}
.listOfConversations .conversation .subject {
float: left;
line-height: 140%;
max-width: 200px;
padding-top: 15px;
padding-bottom: 10px;
font-size: 120%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.listOfConversations .conversation .subject.out {
color: #888888;
font-style: italic;
}
.listOfConversations .conversation .subject .bookmarkHint {
color: #888;
display: inline-block;
}
.listOfConversations .conversation .subject .bookmarkHint img {
height: 12px;
display: inline-block;
padding-left: 5px;
}
.listOfConversations .conversation .subject .bookmarkHint span {
font-size: 70%;
display: inline-block;
padding-left: 2px;
}
.listOfConversations .conversation .subject.out {
color: #888888;
font-style: italic;
}
.listOfConversations .conversation .subject .bookmarkHint {
color: #888;
display: inline-block;
}
.listOfConversations .conversation .subject .bookmarkHint img {
height: 12px;
display: inline-block;
padding-left: 5px;
}
.listOfConversations .conversation .subject .bookmarkHint span {
font-size: 70%;
display: inline-block;
padding-left: 2px;
}
.listOfConversations .conversation .subject .reminderHint {
color: #888;
display: inline-block;
}
.listOfConversations .conversation .subject .reminderHint img {
height: 12px;
display: inline-block;
padding-left: 5px;
}
.listOfConversations .conversation .timestamp {
float: right;
width: 100px;
padding-top: 17px;
font-size: 90%;
font-weight: 300;
color: #999999;
}
.listOfConversations .conversation .statusIconMail {
float: right;
width: 35px;
margin-right: 20px;
padding-top: 5px;
}
.listOfConversations .conversation .statusIconMail img {
width: 35px;
margin-top: 5px;
}
.listOfConversations .conversation .infos {
float: right;
width: 55px;
padding-top: 12px;
}
.listOfConversations .conversation.unread a .subject {
color: #333333;
font-weight: bold;
}
.listOfConversations .conversation .messagePreview {
color: #a4a4a4;
font-weight: 300;
font-size: 80%;
}
.listOfConversations .unreadCounter {
position: absolute;
z-index: 2;
margin-top: 20px;
margin-left: 10px;
}
.listOfConversations .more a {
display: block;
padding: 15px 20px;
text-align: center;
color: #ffffff;
background: #62b6ff;
border-top: 1px dashed #dcdcdc;
}
.listOfConversations .more a:hover {
background: #3fa6ff;
}
.mailboxListOfMedia {
background: #ffffff;
padding: 15px;
}
.mailboxListOfMedia .image {
width: 160px;
height: 160px;
margin: 5px;
}
.headerConversation {
border-bottom: 2px solid #c5c5c5;
background: #ffffff;
min-height: 55px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
align-content: center;
flex-wrap: nowrap;
max-width: 100vw;
}
.headerConversation .profileImage {
padding: 10px;
}
.headerConversation .profileImage img {
width: 50px;
border-radius: 50%;
}
.headerConversation .status {
padding: 10px 0 0 0;
display: inline-flex;
flex-direction: column;
flex-wrap: nowrap;
align-content: flex-start;
justify-content: flex-start;
align-items: flex-start;
flex-grow: 4;
height: 52px;
max-width: calc(100vw - 140px);
}
.headerConversation .status .onlineInfo {
font-size: 100%;
font-weight: 300;
padding-top: 5px;
color: #979797;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
max-width: 100%;
}
.headerConversation .status .title {
font-size: 110%;
font-weight: 500;
padding-top: 5px;
max-width: 100%;
}
.headerConversation .options {
display: inline-flex;
flex-direction: row;
align-content: center;
align-items: center;
justify-content: flex-start;
height: 52px;
padding: 0 10px;
}
.headerConversation .options img {
width: 25px;
}
.headerConversation .options .optionEntry {
display: block;
padding: 5px;
margin-left: 5px;
}
.headerConversation .options .optionEntry:hover {
background: #e5e5e5;
border-radius: 5px;
cursor: pointer;
}
.headerConversation .onlineInfo a {
margin-right: 5px;
}
.headerConversation .close {
display: inline-flex;
flex-direction: row;
align-content: center;
align-items: center;
justify-content: flex-start;
padding: 0 10px;
height: 52px;
}
.headerConversation .close img {
width: 25px;
}
.headerConversation .close img:hover {
opacity: 0.9;
animation: focusIcon 1s;
cursor: pointer;
}
/* ;max-height: 100vh;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column; min-width: 0;min-height: 0; -webkit-box-flex: 1;-ms-flex: 1 1 auto; flex: 1 1 auto;*/
.conversationSite {
position: fixed;
display: grid;
grid-template-rows: 52px max-content 90px;
background: #cacaca;
background: linear-gradient(90deg, #d4d4d4 0, #cecece 100%);
}
.conversationSite.conversationSiteHasLater {
grid-template-rows: 52px max-content 40px 90px;
}
.conversationSite.conversationSiteHasLater .conversationEditor {
grid-row: 4;
}
.headerConversation {
grid-row: 1;
z-index: 2;
}
.mailConversation {
grid-row: 2;
}
.conversationEditor {
grid-row: 3;
align-self: start;
justify-content: start;
}
.conversationEditor .wrapper {
display: block;
margin-bottom: 10px;
}
.conversationEditor {
padding-top: 5px;
}
.wrappedAnswerLaterButton {
display: flex;
grid-row: 3;
justify-content: center;
align-items: center;
flex-direction: row;
align-content: center;
flex-wrap: nowrap;
}
.wrappedAnswerLaterButton button {
line-height: 1.5;
background: #c0c0c0;
border: 1px solid #cdcdcd;
color: #777;
padding: 5px;
border-radius: 7px;
font-size: 80%;
font-weight: 400;
transition: .3s;
cursor: pointer;
}
.wrappedAnswerLaterButton button.active {
background: #c0ffc0;
border: 1px solid #cdffcd;
color: #64c864;
}
.mailboxTextarea {
resize: vertical;
margin-left: 10px;
height: 20px;
white-space: pre-wrap;
word-wrap: break-word;
max-height: 80%;
font-weight: 300;
color: #000000;
border: 1px solid #dcdcdc;
padding: 10px 15px;
padding-top: 12px;
font-size: 13px;
border-radius: 10px;
min-width: 250px;
min-width: calc(100% - 82px);
min-height: 20px;
max-height: 50vh;
}
.mailboxTextarea:active,
.mailboxTextarea:focus {
border: 1px solid #95cdff;
}
.hiddenTextareaForResize {
display: none;
white-space: pre-wrap;
word-wrap: break-word;
}
/*.hiddenTextareaForResize {position: fixed; top: 200px; z-index: 200;display: block;background:white}*/
.mailboxButtonSend {
margin-right: 2%;
}
.mailboxButtonSend button {
border-radius: 50%;
height: 42px;
width: 42px;
padding: 10px;
cursor: pointer;
border: 1px solid #009fdd;
color: #ffffff;
background: url(//s.jappy.com/i/icon/unity/send.png) no-repeat 50% 50% #00b8ff;
font-weight: 700;
}
.mailboxButtonSend button:hover {
background: url(//s.jappy.com/i/icon/unity/send.png) no-repeat 50% 50% #4ccbfc;
transform: scale(1.05);
transition: 0.3s;
}
.mailboxCompose .emoji {
height: 2em;
line-height: 2em;
width: 2em;
}
.mailboxCompose .editor .smilies {
float: left;
margin-left: 3px;
width: 280px;
}
.mailboxCompose .editor .smilies .entries {
width: 240px;
}
.mailboxCompose .editor .smilies .more {
margin-left: 5px;
}
.mailConversation.mailbox ::-webkit-scrollbar {
width: 5px;
}
.mailConversation.mailbox ::-webkit-scrollbar-track {
color: #333333;
background: #cacaca;
}
.mailConversation.mailbox ::-webkit-scrollbar-button {
color: #333333;
}
.mailConversation.mailbox ::-webkit-scrollbar-thumb {
color: #333333;
background: #a9a9a9;
border-radius: 5px;
}
.mailConversation.mailbox {
scrollbar-color: #a9a9a9 #cacaca;
scrollbar-width: thin;
}
.mailConversation .messageFrame {
overflow-y: scroll;
overflow-x: hidden;
padding-right: 10px;
padding-bottom: 0px;
}
.mailConversation .messageFrame hr {
padding: 0;
margin: 0;
border: 1px solid transparent;
}
.mailConversation {
width: 460px;
overflow-x: hidden;
overflow-y: scroll;
}
.mailConversation.mailbox {
width: 100%;
overflow: visible;
}
.noLayer .mailConversation {
width: 100%;
height: auto;
overflow: visible;
}
.settings .mailConversation .selected {
width: 118px;
border: 2px solid #417bc4;
}
.mailConversation .text .forward {
padding: 10px 0;
}
.mailConversation .date {
text-align: center;
color: #333333;
font-weight: bold;
font-size: 90%;
margin: 10px 0 5px 0;
padding-bottom: 5px;
}
.mailConversation .data span {
padding: 5px 0 5px;
}
.mailConversation .entry {
margin: 5px 0 5px 0;
width: 100%;
text-align: left;
line-height: 130%;
float: right;
}
.mailConversation .entry .text {
font-size: 13px;
line-height: 130%;
max-width: 370px;
overflow: hidden !important;
background: #ffe190;
background: linear-gradient(90deg, #ffe7a6 0, #ffe190 100%);
float: right;
z-index: 1;
position: relative;
border-radius: 15px;
color: #333333;
}
.mailConversation .entry .text .textMessage {
padding: 10px 15px 5px 15px;
}
.mailConversation .entry .text .image {
padding: 15px;
}
.mailConversation .entry .text .image img {
width: 160px;
height: 160px;
}
.mailConversation .entry .text img {
max-width: 100%;
}
.mailConversation.mailbox .entry .text {
max-width: 280px;
}
.mailConversation.mailbox .entry .tsBygone {
color: #333333;
}
.mailConversation .entry .text .emotion img {
max-width: 300px;
border: 4px solid #fe2e85;
border-radius: 10px;
min-height: 220px;
}
.mailConversation .entry .text .emotion .emotionTitle {
padding: 10px 15px 10px 15px;
font-weight: 900;
color: #333333;
font-size: 120%;
}
.mailConversation .entry .giftPre {
text-align: center;
padding: 5px;
font-size: 90%;
text-transform: uppercase;
padding-bottom: 0;
color: #999999;
}
.mailConversation .entry .giftName {
padding: 5px;
text-align: center;
color: #333333;
font-weight: 600;
}
.mailConversation .entry .giftIcon {
padding: 5px;
text-align: center;
}
.mailConversation .entry .giftShow {
padding: 10px;
text-align: center;
}
.mailConversation .entry .giftSubLink {
color: #999999;
padding: 20px;
}
.mailConversation .entry .giftShow span {
font-weight: 700;
border-radius: 25px;
padding: 15px 15px;
cursor: pointer;
margin-top: 10px;
margin-bottom: 15px;
border: 1px solid #47c6f8;
color: #fff;
background: #49ccff;
}
.mailConversation .entry .giftShow span:hover {
background: #ffa225;
border: 1px solid #ffa225;
transition: 0.5s;
}
.mailConversation .entry .messageFooter {
width: auto;
min-width: 150px;
opacity: 0.5;
padding-right: 5px;
}
.mailConversation .entry .time {
float: left;
font-size: 10px;
font-weight: 300;
padding: 0 10px 10px 8px;
color: #9c9c9c;
text-align: right;
line-height: 14px;
}
.mailConversation .entry .time img {
vertical-align: text-bottom;
opacity: 0.6;
margin-right: 5px;
margin-left: 5px;
width: 12px;
}
.mailConversation .entry .time img:hover {
transition: 0.3s;
transform: scale(1.2);
}
.mailConversation .entry .bookmarkHint {
float: left;
padding: 0 10px 10px 0;
line-height: 14px;
}
.mailConversation .entry .bookmarkHint img {
max-height: 14px;
padding: 0;
margin: 0;
transition: .7s;
filter: grayscale(1);
}
.mailConversation .entry .bookmarkHint img:hover {
filter: none;
}
.mailConversation .entry .responseSection {
float: left;
padding: 0 10px 10px 0;
line-height: 14px;
}
.mailConversation .entry .responseSection img {
max-height: 14px;
padding: 0;
margin: 0;
}
.mailConversation .entry:hover .messageFooter {
opacity: 1;
}
.mailConversation .entry .messageFooter .statusRead {
float: right;
}
.mailConversation .entry .messageFooter .statusRead img {
width: 20px;
opacity: 0.8;
}
.mailConversation .entry .pointerLeft {
position: relative;
z-index: 2;
margin-top: 13px;
width: 10px;
height: 19px;
float: left;
left: 1px;
}
.mailConversation .entry.foreign {
margin-left: 5px;
float: left;
}
.mailConversation .entry.foreign .text {
float: left;
background: #ffffff;
color: #000000;
border: 1px solid #d3d3d3;
font-weight: 400;
}
.mailConversation .entry.highlighted {
background: #cfcfcf;
}
.mailConversation .stamp {
padding: 10px 15px 0 15px;
font-size: 80%;
}
.mailConversation .stamp .icIcon {
margin-right: 0;
}
.mailConversation .profileImage {
width: 35px;
margin-left: 3px;
position: relative;
z-index: 2;
float: left;
margin-right: 3px;
}
.mailConversation .profileImage img {
width: 35px;
height: 35px;
border-radius: 50%;
}
.mailConversation .attachedPictures {
margin: 1%;
margin-bottom: 2px;
min-height: 160px;
}
.mailConversation .attachedPictures .headline {
font-size: 90%;
padding: 6px 0 3px 0;
}
.mailConversation .attachedPictures .image {
width: 120px;
height: 120px;
margin: 0;
float: right;
margin-right: 1%;
padding: 3px;
background: #ffffff;
border: 1px solid #e1e1e1;
cursor: pointer;
}
.mailConversation .attachedPictures .image:hover {
background: #e1e1e1;
}
.mailConversation .attachedPictures .image img {
width: 120px;
max-height: 120px;
}
.mailConversation .attachedPictures.foreign a.image {
float: left;
}
.mailConversation.mailbox .attachmentLinkEntry {
margin-left: 0;
margin-right: 10px;
}
.mailConversation.mailbox .attachmentLinkEntry .options {
display: none;
}
.mailConversation.mailbox .attachmentLinkEntry .numberOfShares {
background: none;
font-style: italic;
margin-top: 0;
}
.mailConversation .forward {
width: 95%;
text-align: left;
padding-bottom: 10px;
padding-top: 10px;
}
.mailConversation .forward .headline {
font-size: 100%;
padding: 5px;
text-align: center;
}
.mailConversemptyStateation .forward .headline {
color: #333333;
font-weight: bold;
border-top: 1px solid #e1e1e1;
font-size: 70%;
padding: 1%;
text-indent: 15%;
padding-top: 2%;
}
.mailConversation .forward .text {
margin-left: 50px;
font-size: 110%;
line-height: 120%;
box-shadow: 1px 1px 2px #dedede;
max-width: 90%;
overflow: hidden !important;
background: #fffee0;
background: #f6eeaf;
padding: 10px;
border-radius: 4px;
color: #333333;
border: 1px solid #bbb989;
}
.mailConversation .answer {
margin: 3% 5% 3% 3%;
width: 92%;
}
.mailConversation .answer .text {
box-shadow: 1px 1px 2px #dedede;
background: #FDD978;
border-radius: 2px;
max-width: 75%;
overflow: hidden !important;
padding: 7px 8px;
border-radius: 4px;
}
.mailConversation .answerlistOfUserWithImages.foreign .text {
background: #ffffff;
float: left;
border: 1px solid #999999;
color: #333333;
}
.mailConversation .answer.own .text {
background: #ebf3f6;
float: right;
border: 1px solid #aac9d8;
color: #333333;
}
.mailConversation .answer .headline {
color: #333333;
font-weight: bold;
border-top: 1px solid #e1e1e1;
text-align: center;
padding: 1%;
}
.mailConversation .answer .text img {
max-width: 320px !important;
}
.mailConversation .answer .time {
float: left;
font-size: 10px;
color: #bdbdbd;
padding: 2%;
width: 20%;
text-align: right;
}
.mailConversation .answer.own .time {
float: right;
text-align: left;
}
.mailConversation .attachedLinks {
margin: 15px 10px;
padding-bottom: 10px;
padding-top: 5px;
}
.mailConversation .attachedLinks .headline {
padding-bottom: 5px;
font-style: italic;
font-size: 90%;
text-align: left;
}
.mailConversation .attachedLinks a.link,
.attachedLinks .link {
width: 93%;
display: block;
padding: 0;
}
.mailConversation .attachedLinks a.link .text,
.attachedLinks .link .text {
float: left;
width: 75%;
overflow: hidden;
}
.mailConversation .attachedLinks a.link .title,
.attachedLinks .link .title {
font-size: 110%;
color: #78b1e3;
}
.mailConversation .attachedLinks .icon {
float: right;
width: 12%;
}
.mailConversation .attachedLinks .icon img {
width: 35px;
height: 35px;
}
.mailConversation .mailboxActions {
padding: 5px 5px 10px 5px;
margin-left: 55px;
font-size: 80%;
text-align: right;
}
.mailConversation .mailboxActions img {
width: 14px;
vertical-align: text-bottom;
}
.mailConversation .mailboxActions.own {
text-align: right;
}
.mailConversation .mailboxActions a.action {
margin-right: 10px;
width: 16px;
height: 16px;
display: block;
float: right;
background: #f1f1f1;
border-radius: 50%;
padding: 3px;
border: 1px solid #BCBCBC;
text-align: center;
}
.mailConversation .mailboxActions a.action:hover {
background: #ffda3d;
}
.mailConversation .attachmentAddFrame {
background: #fffee0;
border-top: 1px solid #e1e1e1;
}
.mailConversation .attachedLinks .stats {
font-size: 80%;
color: #888888;
margin-left: 3%;
}
.mailConversation .attachedLinks .video {
width: 93%;
}
.mailConversation .attachedLinks .video .content {
float: left;
width: 80%;
}
.mailConversation .attachments .stats {
margin: 5px;
}
.mailConversation .tsShortTimeAgo {
background: #a6e7ff;
border: 0;
color: #cacaca;
}
.mailConversation .tsRecently {
background: transparent;
border: 0;
color: #cacaca;
}
.mailConversation .giftImage {
width: 240px;
height: 192px;
}
.mailConversation .gift {
padding: 10px;
}
.mailConversation .more {
text-align: center;
margin: 10px;
}
.mailConversation .more a {
display: inline-block;
color: #8d8d8d;
cursor: pointer;
padding: 10px;
font-weight: 700;
text-align: center;
min-height: 20px;
line-height: 20px;
width: 100%;
border-bottom: 1px dashed #9e9e9e;
}
.mailConversation .reference {
background: #ddd;
padding: 7px 13px;
border-bottom: 1px solid #777;
border-radius: 10px;
margin: 5px;
}
.mailConversation .own .reference {
background: #fff;
border-bottom: 1px solid #ccc;
}
.mailConversation .reference .description {
font-size: 90%;
font-weight: 400;
}
.mailConversation .reference .icon img {
max-width: 128px;
}
.mailConversation .reference .referenceText {
font-weight: bold;
font-size: 0.9em;
align-self: center;
margin-top: 10px;
}
.mailConversation #conversationContainerInner {
padding-top: 20px;
padding-bottom: 20px;
}
.mailConversationImageTransfer {
border-radius: 13px;
background: #fff;
padding: 13px 13px 30px 13px;
margin: 13px;
}
.mailConversationImageTransfer .fileSelection .headline {
font-size: 150%;
font-weight: 300;
color: #555555;
text-align: center;
}
.mailConversationImageTransfer .prepareImage {
animation: prepareImage 1.0s infinite;
width: 100px;
margin: auto;
}
.mailConversationImageTransfer .imageUploadStatus {
padding: 0 20px;
text-align: center;
color: #999;
font-weight: bold;
}
.mailConversationImageTransfer .imageUploadStatus .info {
font-weight: 300;
color: #999999;
margin-top: 20px;
}
.mailConversationImageTransfer .removeImage {
text-align: center;
color: #999;
padding: 10px;
background: #e5e5e5;
margin-top: 10px;
width: 340px;
cursor: pointer;
border-radius: 10px;
}
.mailConversationImageTransfer .imageUploadStatus .headline {
font-weight: 300;
padding: 20px;
font-size: 150%;
}
.mailConversationImageTransfer .nonMobile {
display: none;
}
.mailConversationImageTransfer button {
background: #f0f0f0;
border: 1px solid #aaa;
padding: 13px;
border-radius: 7px;
cursor: pointer;
margin: 13px 5px;
color: #aaa;
display: inline-block;
}
.mailConversationImageTransfer button:hover {
background: #f8f8f8;
color: #000;
}
.mailConversationImageTransfer button[type="submit"] {
border-color: #ffa124;
color: #fff;
background: #ffa124;
}
.mailConversationImageTransfer button[type="submit"]:disabled {
border-color: #999;
color: #999;
background: #e5e5e5;
cursor: default;
}
.mailConversationImageTransfer .cameraButton {
background: #f0f0f0;
border: 1px solid #aaa;
padding: 8px;
border-radius: 7px;
cursor: pointer;
margin: 13px 5px;
color: #aaa;
display: inline-block;
}
.mailConversationImageTransfer .cameraButton:hover {
background: #f8f8f8;
}
.mailConversationImageTransfer .media .actionArea {
display: flex;
justify-items: center;
align-items: center;
justify-content: center;
}
.mailConversationImageTransfer .media .actionArea button {
background: #f0f0f0;
border: 1px solid #aaa;
padding: 13px;
border-radius: 7px;
cursor: pointer;
margin: 13px 5px;
color: #aaa;
display: inline-block;
}
.mailConversationImageTransfer .media .actionArea button:hover {
background: #f8f8f8;
color: #000;
}
.mailConversationImageTransfer .media .actionArea button.primary {
border: 1px solid #ffa124;
color: #fff;
background: #ffa124;
cursor: pointer;
}
.mailConversationImageTransfer .media .actionArea button.primary:hover {
background: #ffb134;
}
.mailConversationImageTransfer .media video {
width: 100%;
height: auto;
}
.conversationOptions {
animation: openMenue 0.3s;
width: 280px;
padding: 10px 0;
background: #424242;
border: 1px solid #333;
font-weight: 600;
border-radius: 15px;
box-shadow: 0 2px 2px #cacaca;
}
.conversationOptions .entry {
display: block;
padding: 10px 15px;
color: #ffffff;
font-weight: 600;
font-size: 100%;
}
.conversationOptions .entry:hover {
background: #5a5a5a;
cursor: pointer;
}
.conversationOptions .entry img {
width: 25px;
height: 25px;
}
.messageInfoLayer {
width: 100vw;
position: fixed;
bottom: 55px;
z-index: 99999999999999;
background: #ffda69;
color: #000000;
text-align: center;
padding: 15px;
left: 0;
font-weight: 600;
line-height: 1.3;
font-size: 110%;
}
.chatRequestSetting {
display: grid;
grid-template-columns: 40px auto;
grid-gap: 7px;
margin-bottom: 10px;
border-radius: 20px;
align-items: center;
padding: 15px;
color: #000;
line-height: 1.5;
cursor: pointer;
}
.chatRequestSetting.default {
opacity: .7;
background: #dddddd;
color: #848484;
font-weight: 300;
border: 3px solid #dadada;
}
.chatRequestSetting.restricted {
background: linear-gradient(45deg, #ffe567 0%, #ffe05a 100%);
border: 3px solid #f5d95c;
}
.chatRequestSetting.freeForAll {
background: linear-gradient(45deg, #c6f66b 0%, #bae95f 100%);
border: 3px solid #bdec62;
}
.chatRequestSetting.isolation {
background: linear-gradient(45deg, #8F4CEC 0%, #6E18E5 100%);
border: 3px solid #7F32E9;
color: #fff !important;
}
.chatRequestSetting:hover {
opacity: 1;
animation: intoFocusSoft .5s forwards;
border: 3px solid #fbb537;
color: #000;
}
.chatRequestSettingProfile {
display: grid;
border: 1px solid #d0b32c;
border-bottom: 0;
grid-template-columns: 40px auto;
grid-gap: 7px;
align-items: center;
padding: 15px;
color: #000;
line-height: 1.5;
background: linear-gradient(45deg, #ffe25c 0%, #ffd930 100%);
}
.chatRequestInfo {
display: block;
background: linear-gradient(270deg, #4ff0e4 0%, #a0fff8 100%);
border: 1px solid #7af2e9;
margin-bottom: 10px;
border-radius: 20px;
}
.chatRequestInfo .content {
padding: 7px;
margin-left: 10px;
}
.chatRequestInfo.low {
opacity: 0.7;
background: #dddddd;
color: #545454;
font-weight: 400;
font-style: italic;
border: 1px solid #dadada;
}
.chatRequestInfo.normal {
color: #393939;
font-weight: 900;
font-size: 110%;
}
.chatRequestInfo:hover {
opacity: 1.0;
animation: intoFocusSoft 0.5s forwards;
}
.chatRequest {
display: grid;
grid-template-columns: 60px auto;
grid-gap: 10px;
margin-bottom: 20px;
padding: 10px;
}
.chatRequest > .profileImage {
grid-column: 1;
grid-row: 1 / span 5;
align-self: start;
justify-self: start;
}
.chatRequest > .profileImage > a > img {
width: 60px;
height: 60px;
margin-right: 10px;
border-radius: 50%;
}
.chatRequest > .nickname {
font-size: 1.3em;
padding-top: 10px;
line-height: 20px;
align-self: start;
justify-self: start;
}
.chatRequest > .timestamp {
font-weight: 300;
align-self: start;
justify-self: start;
padding-bottom: 10px;
}
.chatRequest .badgeList {
padding-bottom: 10px;
}
.chatRequest .badgeList > img {
max-width: 40px;
}
.chatRequest .pinMatchList {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
padding: 10px;
}
.chatRequest .pinMatchList .pinMatch > div {
padding: 3px;
border-radius: 7px;
overflow: hidden;
box-shadow: 0px 0px 3px 2px #ffe178;
height: 40px;
width: 40px;
}
.chatRequest .pinMatchList .pinMatch > div > img {
width: 100%;
height: 100%;
}
.chatRequest .pinMatchList .pinMatch0 {
grid-column: 1;
}
.chatRequest .pinMatchList .pinMatch1 {
grid-column: 2;
}
.chatRequest .pinMatchList .pinMatch2 {
grid-column: 3;
}
.chatRequest .pinMatchList .pinMatch3 {
grid-column: 4;
}
.chatRequest .pinMatchList .pinMatch4 {
grid-column: 5;
}
.chatRequest .action {
color: #393939;
background: #ffffff;
border: 2px solid #69f5ea;
border-radius: 20px;
font-weight: 500;
padding: 10px 15px;
margin-right: 3px;
}
.chatRequest .action:hover {
animation: intoFocusSoft 0.3s forwards;
}
.chatRequest.prio {
background: linear-gradient(270deg, #4ff0e4 0, #a0fff8 100%);
border-left: 5px solid #71e5dc;
}
.chatRequest:hover {
opacity: 1.0;
animation: intoFocusSoft 0.5s forwards;
}
.chatRequest.prio .nickname img {
width: 55px;
height: 55px;
}
.chatRequest.prio .nickname {
font-weight: 600;
}
.chatRequest.low {
background: #ffffff;
border-left: 5px solid #dddddd;
}
.chatSearchQuery {
margin-bottom: 13px;
display: flex;
flex-flow: row wrap;
}
.chatSearchQuery .inputSection {
width: 660px;
}
.chatSearchQuery .inputSection input {
border: 1px solid #efefef;
background: #efefef;
padding: 10px;
padding-top: 11px;
width: 100%;
text-indent: 10px;
font-weight: 300;
border-radius: 15px 0px 0px 15px;
}
.chatSearchQuery .inputSection input:active,
.chatSearchQuery .inputSection input:hover {
border: 1px solid #64b5ff;
background: #ffffff;
}
.chatSearchQuery .submitSection {
width: 70px;
}
.chatSearchQuery .submitSection button {
border: 1px solid #ff9933;
padding: 10px;
width: 100%;
border-radius: 0px 15px 15px 0px;
color: #fff;
background: #ff9933;
font-weight: 600;
}
.chatSearchQuery .submitSection button:hover {
transition: 0.5s;
animation: intoFocusLight 0.5s forwards;
}
.chatBookmark .bookmarkHeader {
border: 2px solid #ff9e33;
border-radius: 7px;
padding: 5px;
background: #fff;
max-width: 736px;
color: #555;
font-weight: 700;
display: flex;
margin-bottom: 20px;
flex-direction: row;
align-content: center;
align-items: center;
justify-content: space-between;
margin-left: 7px;
margin-right: 7px;
gap: 13px;
line-height: 1.5;
}
.chatBookmark .bookmarkHeader span {
flex-grow: 2;
}
.chatBookmark .bookmarkHeader button {
flex-shrink: 1;
color: #ffffff;
cursor: pointer;
background: #d8489e;
background: linear-gradient(45deg, #fe559b 0%, #ff4c71 100%);
border: 2px solid #df1632;
border-radius: 20px;
font-weight: 900;
font-size: 90%;
padding: 10px 15px;
margin-bottom: 5px;
}
.messageMeta {
overflow: visible;
height: 1px;
line-height: 18px;
background: #bdbdbd;
display: block;
margin-bottom: 9px;
margin-top: 9px;
text-align: center;
color: #e1e1e1;
}
.messageMeta .content {
color: #a4a4a4;
display: inline-block;
background: #d9d9d9;
position: relative;
top: -9px;
padding: 3px 9px;
line-height: 18px;
font-size: 90%;
}
@media screen and (max-width: 1000px) {
.conversationEditor {
width: 100%;
}
.mailConversation .messageFrame {
padding-bottom: 0px;
}
}
@media screen and (min-width: 800px) and (max-width: 1000px) {
.conversationEditor {
width: 100%;
left: 0;
text-align: center;
}
.conversationEditor .wrapper {
width: 750px;
margin: auto;
text-align: left;
}
}
@media screen and (max-width: 800px) {
.mailboxButtonSend {
position: fixed;
right: 5px;
float: none;
}
.suggestFeatures {
position: fixed;
right: 60px;
}
.chatSearchQuery {
width: 100%;
}
.chatSearchQuery .inputSection {
width: 230px;
}
.mailboxTextarea {
min-width: calc(100% - 105px);
}
.mailConversation .entry .text {
font-size: 16px;
}
.mailboxCompose .editor .smilies {
float: left;
}
.conversationOptions {
top: 60px !important;
left: 10px !important;
position: fixed !important;
margin-top: 0 !important;
max-height: calc(80vh - 60px);
overflow-y: auto;
}
.listOfConversations .conversation .subject {
max-width: 160px;
}
.listOfConversations .conversation .timestamp {
width: 70px;
font-size: 75%;
}
.listOfConversations .conversation .statusIconMail {
width: 35px;
margin-right: 10px;
margin-left: 10px;
}
.headerConversation {
min-height: 50px;
width: 100%;
border-radius: 0;
}
.headerConversation .status .onlineInfo {
font-size: 85%;
}
.conversationSite {
top: 0;
z-index: 2000000;
width: 100%;
min-height: 100vH;
}
.mailConversation .entry .text .textMessage {
font-size: 15px;
line-height: 20px;
}
.mailboxTextarea {
font-size: 16px;
border-radius: 20px;
}
}
@media screen and (min-width: 800px) {
.conversationEditor {
background: #e5e5e5;
}
}
@media screen and (min-width: 360px) and (max-width: 600px) {
.mailboxCompose .emoji {
width: 2.1em;
height: 2.1em;
}
.mailboxCompose .editor .smilies .more img {
margin-top: 0;
}
.mailboxCompose .editor .smilies {
width: 300px;
}
.mailboxCompose .editor .smilies .entries {
width: 300px;
}
.mailboxCompose .editor .smilies .more {
width: 30px;
margin-top: 0;
}
.mailboxCompose .editor .smilies .more img {
width: 30px;
height: 30px;
}
}
@media screen and (min-width: 400px) and (max-width: 600px) {
.mailboxCompose .emoji {
width: 2.2em;
height: 2.2em;
}
.mailboxCompose .editor .smilies .more img {
margin-top: 0;
}
.mailboxCompose .editor .smilies {
width: 310px;
}
.mailboxCompose .editor .smilies .entries {
width: 310px;
}
.mailboxCompose .editor .smilies .more {
width: 30px;
margin-top: 0;
}
.mailboxCompose .editor .smilies .more img {
width: 30px;
height: 30px;
}
}
.conversation.conversationMailView {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-content: flex-start;
justify-content: flex-start;
align-items: stretch;
max-width: 100vw;
margin: 0 auto 50px auto;
}
.conversation.conversationMailView .topBar {
display: flex;
flex-direction: row;
align-content: center;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
margin: 5px 0;
}
.conversation.conversationMailView .topBar > .topBarSpanner {
flex-grow: 2;
}
.conversation.conversationMailView .topBar > .conversationOptionMenu {
display: inline-flex;
border: none;
box-sizing: border-box;
width: 34px;
height: 34px;
padding: 0 7px 0 0;
cursor: pointer;
background-color: unset;
}
.conversation.conversationMailView .topBar > .breadCrumbBar {
display: flex;
flex-direction: row;
min-height: 35px;
line-height: 35px;
justify-content: flex-start;
align-items: center;
align-content: center;
}
.conversation.conversationMailView .topBar > .breadCrumbBar > * {
display: inline-flex;
padding: 10px 15px;
}
.conversation.conversationMailView .topBar > .breadCrumbBar .crumb {
background: url('https://s.jappy.com/i/icon/pointer/crumb.png') right center no-repeat;
box-sizing: border-box;
color: #333333;
font-weight: 700;
cursor: pointer;
padding-right: 30px;
}
.conversation.conversationMailView .editorArea {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-content: flex-start;
justify-content: flex-start;
align-items: stretch;
}
.conversation.conversationMailView .conversationStream {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-content: center;
align-items: center;
justify-content: flex-start;
}
.conversation.conversationMailView .conversationStream .unseenMessageMarker {
flex-direction: column;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
gap: 7px;
margin: 7px;
background: #dedede;
border: 1px solid #d1d1d1;
color: #666666;
border-radius: 9px;
padding: 9px 21px;
display: inline-flex;
font-size: 12px;
font-weight: 700;
opacity: 0.7;
transition: .3s;
}
.conversation.conversationMailView .conversationStream .unseenMessageMarker button {
border: 1px solid #888;
color: #666;
background: #eee;
padding: 7px 14px;
font-size: 120%;
font-weight: 700;
border-radius: 13px;
cursor: pointer;
transition: .3s;
}
.conversation.conversationMailView .conversationStream .unseenMessageMarker button:hover {
background: #d9f4ff;
}
.conversation.conversationMailView .conversationStream .unreadMessageMarker {
flex-direction: column;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
gap: 7px;
margin: 7px;
background: #d9f4ff;
border: 1px solid #afc8d3;
color: #68767d;
border-radius: 9px;
padding: 9px 14px;
display: inline-flex;
font-size: 12px;
font-weight: 9=00;
opacity: 0.7;
transition: .3s;
box-shadow: 3px 3px 3px #ccc;
}
.conversation.conversationMailView .conversationStream .unreadMessageMarker:hover {
opacity: 0.7;
}
.conversation.conversationMailView .conversationStream .tsShortTimeAgo {
background: #a6e7ff;
border: 0;
color: #cacaca;
}
.conversation.conversationMailView .conversationStream .tsRecently {
background: transparent;
border: 0;
color: #cacaca;
}
.conversation.conversationMailView .conversationStream .stamp {
padding: 10px 15px 0 15px;
font-size: 80%;
}
.conversation.conversationMailView .conversationStream .stamp .icIcon {
margin-right: 0;
}
.conversation.conversationMailView .conversationStream .reference {
background: #ddd;
padding: 7px 13px;
border-bottom: 1px solid #777;
border-radius: 10px;
margin: 5px;
}
.conversation.conversationMailView .conversationStream .reference .referenceText {
font-weight: bold;
font-size: 0.9em;
align-self: center;
margin-top: 10px;
}
.conversation.conversationMailView .conversationStream .reference .icon img {
max-width: 128px;
}
.conversation.conversationMailView .conversationStream .reference .description {
font-size: 90%;
font-weight: 400;
}
.conversation.conversationMailView .conversationStream .profileImage {
width: 35px;
margin-left: 3px;
position: relative;
z-index: 2;
margin-right: 3px;
}
.conversation.conversationMailView .conversationStream .profileImage img {
width: 35px;
height: 35px;
border-radius: 50%;
margin-top: 3px;
}
.conversation.conversationMailView .conversationStream .own .reference {
background: #fff;
border-bottom: 1px solid #ccc;
}
.conversation.conversationMailView .conversationStream .more {
text-align: center;
margin: 10px;
}
.conversation.conversationMailView .conversationStream .more a {
display: inline-block;
color: #8d8d8d;
cursor: pointer;
padding: 10px;
font-weight: 700;
text-align: center;
min-height: 20px;
line-height: 20px;
width: 100%;
border-bottom: 1px dashed #9e9e9e;
}
.conversation.conversationMailView .conversationStream .mailboxActions {
padding: 5px 5px 10px 5px;
margin-left: 55px;
font-size: 80%;
}
.conversation.conversationMailView .conversationStream .mailboxActions img {
width: 14px;
vertical-align: text-bottom;
}
.conversation.conversationMailView .conversationStream .mailboxActions a.action:hover {
background: #ffda3d;
}
.conversation.conversationMailView .conversationStream .mailboxActions a.action {
margin-right: 10px;
width: 16px;
height: 16px;
display: block;
background: #f1f1f1;
border-radius: 50%;
padding: 3px;
border: 1px solid #BCBCBC;
text-align: center;
}
.conversation.conversationMailView .conversationStream .giftImage {
width: 240px;
height: 192px;
}
.conversation.conversationMailView .conversationStream .gift {
padding: 10px;
}
.conversation.conversationMailView .conversationStream .forward {
width: 95%;
text-align: left;
padding-bottom: 10px;
padding-top: 10px;
}
.conversation.conversationMailView .conversationStream .forward .text {
margin-left: 50px;
font-size: 110%;
line-height: 120%;
box-shadow: 1px 1px 2px #dedede;
max-width: 90%;
overflow: hidden !important;
background: #f6eeaf;
padding: 10px;
border-radius: 4px;
color: #333333;
border: 1px solid #bbb989;
}
.conversation.conversationMailView .conversationStream .forward .headline {
font-size: 100%;
padding: 5px;
text-align: center;
}
.conversation.conversationMailView .conversationStream .forward .headline {
color: #333333;
font-weight: bold;
border-top: 1px solid #e1e1e1;
font-size: 70%;
padding: 1%;
text-indent: 15%;
padding-top: 2%;
}
.conversation.conversationMailView .conversationStream .entry:hover .messageFooter {
opacity: 1;
}
.conversation.conversationMailView .conversationStream .entry.unseenMessage.foreign > .text {
background: #d9f4ff;
}
.conversation.conversationMailView .conversationStream .entry.own {
flex-direction: row-reverse;
}
.conversation.conversationMailView .conversationStream .entry.highlighted {
background: #cfcfcf;
}
.conversation.conversationMailView .conversationStream .entry.foreign {
margin-left: 5px;
}
.conversation.conversationMailView .conversationStream .entry.foreign .text {
background: #ffffff;
color: #000000;
border: 1px solid #d3d3d3;
font-weight: 400;
}
.conversation.conversationMailView .conversationStream .entry {
margin: 5px 0 5px 0;
width: 100%;
text-align: left;
line-height: 130%;
}
.conversation.conversationMailView .conversationStream .entry {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: flex-start;
justify-content: flex-start;
align-items: flex-start;
}
.conversation.conversationMailView .conversationStream .entry .tsBygone {
color: #333333;
}
.conversation.conversationMailView .conversationStream .entry .text {
font-size: 13px;
line-height: 130%;
max-width: 370px;
overflow: hidden !important;
background: #ffe190;
background: linear-gradient(90deg, #ffe7a6 0, #ffe190 100%);
z-index: 1;
position: relative;
border-radius: 15px;
color: #333333;
}
.conversation.conversationMailView .conversationStream .entry .text img {
max-width: 100%;
}
.conversation.conversationMailView .conversationStream .entry .text .textMessage {
padding: 10px 15px 5px 15px;
}
.conversation.conversationMailView .conversationStream .entry .text .textMessage .emojiHuge {
font-size: 300%;
}
.conversation.conversationMailView .conversationStream .entry .text .textMessage .emojiLarge {
font-size: 225%;
}
.conversation.conversationMailView .conversationStream .entry .text .textMessage .emojiBig {
font-size: 150%;
}
.conversation.conversationMailView .conversationStream .entry .text .image {
padding: 15px;
}
.conversation.conversationMailView .conversationStream .entry .text .image img {
width: 160px;
height: 160px;
}
.conversation.conversationMailView .conversationStream .entry .text .forward {
padding: 10px 0;
}
.conversation.conversationMailView .conversationStream .entry .text .emotion img {
max-width: 300px;
border: 4px solid #fe2e85;
border-radius: 10px;
min-height: 220px;
}
.conversation.conversationMailView .conversationStream .entry .text .emotion .emotionTitle {
padding: 10px 15px 10px 15px;
font-weight: 900;
color: #333333;
font-size: 120%;
}
.conversation.conversationMailView .conversationStream .entry.meta.system {
justify-content: center;
}
.conversation.conversationMailView .conversationStream .entry .responseSection {
padding: 0 10px 10px 0;
line-height: 14px;
}
.conversation.conversationMailView .conversationStream .entry .responseSection img {
max-height: 14px;
padding: 0;
margin: 0;
}
.conversation.conversationMailView .conversationStream .entry .pointerLeft {
position: relative;
z-index: 2;
margin-top: 13px;
width: 10px;
height: 19px;
left: 2px;
}
.conversation.conversationMailView .conversationStream .entry .messageFooter {
width: auto;
min-width: 150px;
opacity: 0.5;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: flex-start;
align-items: center;
min-height: 22px;
padding: 0 7px;
gap: 5px;
}
.conversation.conversationMailView .conversationStream .entry .messageFooter > button {
display: inline-flex;
align-content: center;
justify-content: center;
box-sizing: border-box;
border: none;
background-color: unset;
align-items: center;
width: 14px;
height: 14px;
padding: 4px;
}
.conversation.conversationMailView .conversationStream .entry .messageFooter > button:hover > img {
transform: scale(1.2);
opacity: 1;
}
.conversation.conversationMailView .conversationStream .entry .messageFooter > button > img {
width: 12px;
opacity: 0.6;
margin: 5px;
transition: .3s;
}
.conversation.conversationMailView .conversationStream .entry .messageFooter > .time {
display: inline-flex;
align-content: center;
justify-content: center;
box-sizing: border-box;
font-size: 10px;
font-weight: 300;
color: #9c9c9c;
line-height: 14px;
align-items: center;
}
.conversation.conversationMailView .conversationStream .entry .messageFooter > .messageTypeHint {
display: inline-flex;
align-content: center;
justify-content: center;
box-sizing: border-box;
font-size: 10px;
font-weight: 300;
color: #333333;
line-height: 14px;
align-items: center;
padding: 0 6px;
}
.conversation.conversationMailView .conversationStream .entry .messageFooter .bookmarkHint {
display: inline-flex;
width: 16px;
height: 16px;
opacity: 0.8;
}
.conversation.conversationMailView .conversationStream .entry .messageFooter .messageStatusHint {
display: inline-flex;
width: 16px;
height: 16px;
opacity: 0.8;
}
.conversation.conversationMailView .conversationStream .entry .giftSubLink {
color: #999999;
padding: 20px;
}
.conversation.conversationMailView .conversationStream .entry .giftShow {
padding: 10px;
text-align: center;
}
.conversation.conversationMailView .conversationStream .entry .giftShow span {
font-weight: 700;
border-radius: 25px;
padding: 15px 15px;
cursor: pointer;
margin-top: 10px;
margin-bottom: 15px;
border: 1px solid #47c6f8;
color: #fff;
background: #49ccff;
}
.conversation.conversationMailView .conversationStream .entry .giftShow span:hover {
background: #ffa225;
border: 1px solid #ffa225;
transition: 0.5s;
}
.conversation.conversationMailView .conversationStream .entry .giftPre {
text-align: center;
padding: 5px;
font-size: 90%;
text-transform: uppercase;
padding-bottom: 0;
color: #999999;
}
.conversation.conversationMailView .conversationStream .entry .giftName {
padding: 5px;
text-align: center;
color: #333333;
font-weight: 600;
}
.conversation.conversationMailView .conversationStream .entry .giftIcon {
padding: 5px;
text-align: center;
}
.conversation.conversationMailView .conversationStream .entry .date {
text-align: center;
color: #333333;
font-weight: bold;
font-size: 90%;
margin: 10px 0 5px 0;
padding-bottom: 5px;
}
.conversation.conversationMailView .conversationStream .entry .data span {
padding: 5px 0 5px;
}
.conversation.conversationMailView .conversationStream .entry .bookmarkHint {
padding: 0 10px 10px 0;
line-height: 14px;
}
.conversation.conversationMailView .conversationStream .entry .bookmarkHint img {
max-height: 14px;
padding: 0;
margin: 0;
transition: .7s;
filter: grayscale(1);
}
.conversation.conversationMailView .conversationStream .entry .bookmarkHint img:hover {
filter: none;
}
.conversation.conversationMailView .conversationStream .attachments .stats {
margin: 5px;
}
.conversation.conversationMailView .conversationStream .attachmentLinkEntry {
margin-left: 0;
margin-right: 10px;
}
.conversation.conversationMailView .conversationStream .attachmentLinkEntry .options {
display: none;
}
.conversation.conversationMailView .conversationStream .attachmentLinkEntry .numberOfShares {
background: none;
font-style: italic;
margin-top: 0;
}
.conversation.conversationMailView .conversationStream .attachmentAddFrame {
background: #fffee0;
border-top: 1px solid #e1e1e1;
}
.conversation.conversationMailView .conversationStream .attachedPictures {
margin: 1%;
margin-bottom: 2px;
min-height: 160px;
}
.conversation.conversationMailView .conversationStream .attachedPictures .image {
width: 120px;
height: 120px;
margin: 0;
margin-right: 1%;
padding: 3px;
background: #ffffff;
border: 1px solid #e1e1e1;
cursor: pointer;
}
.conversation.conversationMailView .conversationStream .attachedPictures .image:hover {
background: #e1e1e1;
}
.conversation.conversationMailView .conversationStream .attachedPictures .image img {
width: 120px;
max-height: 120px;
}
.conversation.conversationMailView .conversationStream .attachedPictures .headline {
font-size: 90%;
padding: 6px 0 3px 0;
}
.conversation.conversationMailView .conversationStream .attachedLinks {
margin: 15px 10px;
padding-bottom: 10px;
padding-top: 5px;
}
.conversation.conversationMailView .conversationStream .attachedLinks a.link,
.attachedLinks .link {
width: 93%;
display: block;
padding: 0;
}
.conversation.conversationMailView .conversationStream .attachedLinks a.link .title,
.attachedLinks .link .title {
font-size: 110%;
color: #78b1e3;
}
.conversation.conversationMailView .conversationStream .attachedLinks a.link .text,
.attachedLinks .link .text {
width: 75%;
overflow: hidden;
}
.conversation.conversationMailView .conversationStream .attachedLinks .video {
width: 93%;
}
.conversation.conversationMailView .conversationStream .attachedLinks .video .content {
width: 80%;
}
.conversation.conversationMailView .conversationStream .attachedLinks .stats {
font-size: 80%;
color: #888888;
margin-left: 3%;
}
.conversation.conversationMailView .conversationStream .attachedLinks .icon {
width: 12%;
}
.conversation.conversationMailView .conversationStream .attachedLinks .icon img {
width: 35px;
height: 35px;
}
.conversation.conversationMailView .conversationStream .attachedLinks .headline {
padding-bottom: 5px;
font-style: italic;
font-size: 90%;
text-align: left;
}
.conversation.conversationMailView .conversationStream .answerlistOfUserWithImages.foreign .text {
background: #ffffff;
border: 1px solid #999999;
color: #333333;
}
.conversation.conversationMailView .conversationStream .answer.own .time {
text-align: left;
}
.conversation.conversationMailView .conversationStream .answer.own .text {
background: #ebf3f6;
border: 1px solid #aac9d8;
color: #333333;
}
.conversation.conversationMailView .conversationStream .answer {
margin: 3% 5% 3% 3%;
width: 92%;
}
.conversation.conversationMailView .conversationStream .answer .time {
font-size: 10px;
color: #bdbdbd;
padding: 2%;
width: 20%;
}
.conversation.conversationMailView .conversationStream .answer .text {
box-shadow: 1px 1px 2px #dedede;
background: #FDD978;
max-width: 75%;
overflow: hidden !important;
padding: 7px 8px;
border-radius: 4px;
}
.conversation.conversationMailView .conversationStream .answer .text img {
max-width: 320px !important;
}
.conversation.conversationMailView .conversationStream .answer .headline {
color: #333333;
font-weight: bold;
border-top: 1px solid #e1e1e1;
text-align: center;
padding: 1%;
}
.conversation.conversationMailView .conversationComposeContainer {
min-height: 215px;
}
.conversation.conversationMailView .conversationComposeContainer textarea {
max-height: 50vh;
}
.conversation.conversationMailView .conversationComposeBar {
display: flex;
flex-direction: row-reverse;
flex-wrap: nowrap;
align-content: center;
justify-content: flex-start;
align-items: center;
gap: 3px;
padding: 3px 9px;
}
.conversation.conversationMailView .conversationComposeBar .messageSubmit[disabled],
.conversation.conversationMailView .conversationComposeStatus button.messageSubmit[disabled]:hover {
cursor: not-allowed;
background-color: #999;
border-color: #555;
width: 42px;
height: 42px;
opacity: 0.5;
}
.conversation.conversationMailView .conversationComposeBar .messageSubmit {
border: 1px solid #009fdd;
color: #ffffff;
background: url('//s.jappy.com/i/icon/unity/send.png') no-repeat center #00b8ff;
}
.conversation.conversationMailView .conversationComposeBar .messageSubmit:hover {
background-color: #4ccbfc;
width: 48px;
height: 48px;
padding: 12px;
}
.conversation.conversationMailView .conversationComposeBar .messageSubmit[disabled]:hover {
width: 42px;
height: 42px;
background-color: #999;
border-color: #555;
opacity: 0.5;
}
.conversation.conversationMailView .conversationComposeBar .conversationComposeFeedback {
min-width: 120px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
align-items: center;
justify-content: flex-start;
}
.conversation.conversationMailView .conversationComposeBar .conversationComposeFeedback img,
.conversation.conversationMailView .conversationComposeBar .conversationComposeFeedback .vsic {
height: 2em;
width: 2em;
}
.conversation.conversationMailView .conversationComposeBar .conversationComposeFeedback #composeFeedbackDescription {
padding: 3px 9px 3px 13px;
font-size: 80%;
color: #777;
font-weight: 400;
display: inline-flex;
align-content: center;
justify-content: center;
align-items: flex-start;
flex-wrap: nowrap;
flex-direction: column;
}
.conversation.conversationMailView .conversationComposeBar .conversationComposeFeedback #composeFeedbackDescription .timestampSpan {
background: none;
color: #666;
}
.conversation.conversationMailView .conversationComposeBar .buttonContainer {
width: 46px;
height: 46px;
display: inline-flex;
align-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
justify-content: flex-end;
}
.conversation.conversationMailView .conversationComposeBar .buttonContainer > * {
display: inline-block;
border-radius: 50%;
height: 42px;
width: 42px;
padding: 10px;
cursor: pointer;
background-size: cover;
font-weight: 700;
transition: 0.3s;
box-sizing: border-box;
}
.conversation.conversationMailView .attachmentContainer {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
flex-direction: row;
}
.conversation.conversationMailView .attachmentContainer > * {
display: inline-flex;
border-radius: 50%;
cursor: pointer;
background: #c0c0c0;
border: 1px solid #b0b0b0;
margin: 4px;
width: 37px;
height: 37px;
transition: .3s;
padding: 6px;
box-sizing: border-box;
justify-content: center;
align-items: center;
}
.conversation.conversationMailView .attachmentContainer > *:hover {
background: #D0D0D0;
margin: 2px;
width: 41px;
height: 41px;
}
.conversation.conversationMailView .attachmentContainer .vsic {
width: 100%;
height: 100%;
min-width: 22px;
min-height: 22px;
}
.conversation.conversationMailView #conversationComposeEditor {
box-sizing: border-box;
display: block;
width: 100%;
min-height: 12em;
margin: auto;
padding: 7px 9px;
line-height: 1.5;
font-size: 120%;
resize: vertical;
white-space: pre-wrap;
word-wrap: break-word;
font-weight: 300;
color: #000000;
border: 1px solid #dcdcdc;
border-radius: 10px;
max-height: 90vh;
}
.conversation.conversationMailView .chatRequestStatus {
display: grid;
grid-template-columns: 40px 1fr auto;
border-width: 3px;
border-style: solid;
box-sizing: border-box;
padding: 11px;
border-radius: 11px;
align-content: center;
justify-content: space-evenly;
align-items: stretch;
justify-items: stretch;
margin-bottom: 0.5em;
grid-gap: 0.7em;
}
.conversation.conversationMailView .chatRequestStatus .vsic {
grid-column: 1 / span 1;
display: inline-flex;
width: 40px;
height: 40px;
}
.conversation.conversationMailView .chatRequestStatus .description {
grid-column: 2 / span 1;
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
align-content: center;
justify-content: flex-start;
align-items: center;
font-size: 120%;
line-height: 1.5;
}
.conversation.conversationMailView .chatRequestStatus .action {
grid-column: 3 / span 1;
display: inline-flex;
}
.conversation.conversationMailView .chatRequestStatus .action > * {
display: inline-flex;
border: 2px solid #ccc;
background: #f0f0f0;
border-radius: 9px;
padding: 5px 13px;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
gap: 7px;
color: #000;
box-sizing: border-box;
cursor: pointer;
transition: .7s;
}
.conversation.conversationMailView .chatRequestStatus .action > *:hover {
background: #fff;
border-color: #fbb537;
}
.conversation.conversationMailView .chatRequestStatus .action > * > .vsic {
width: 20px;
height: 20px;
}
#conversationOptionLayer {
background: rgba(30, 30, 30, 0.1);
top: 0;
left: 0;
bottom: 0;
right: 0;
position: fixed;
z-index: 9000001;
padding-top: 60px;
}
.conversation.conversationMailView .chatRequestStatus.offer {
background: linear-gradient(270deg, #4ff0e4 0%, #a0fff8 100%);
border-color: #7af2e9;
font-weight: 700;
}
.conversation.conversationMailView .chatRequestStatus.expired {
background: linear-gradient(270deg, #8F4CEC 0%, #6E18E5 100%);
border-color: #7F32E9;
color: #fff;
}
.conversation.conversationMailView .chatRequestStatus.accepted {
background: linear-gradient(270deg, #c6f66b 0%, #bae95f 100%);
border-color: #bdec62;
color: #fff;
}
.conversation.conversationMailView .chatRequestStatus.declined {
background: linear-gradient(270deg, #f56c6c 0%, #e85f5f 100%);
border-color: #eb6363;
color: #fff;
}
.conversation.conversationMailView .chatRequestStatus.contactChatRequestSettingDefault {
border-color: #dadada;
background: #dddddd;
color: #848484;
font-weight: 300;
transition: .3s;
opacity: .9;
}
.conversation.conversationMailView .chatRequestStatus.contactChatRequestSettingRestricted {
border-color: #f5d95c;
background: linear-gradient(45deg, #ffe567 0%, #ffe05a 100%);
}
.conversation.conversationMailView .chatRequestStatus.contactChatRequestSettingFreeForAll {
border-color: #bdec62;
background: linear-gradient(45deg, #c6f66b 0%, #bae95f 100%);
}
.conversation.conversationMailView .chatRequestStatus.contactChatRequestSettingIsolation {
border-color: #7F32E9;
background: linear-gradient(45deg, #8F4CEC 0%, #6E18E5 100%);
color: #fff;
}
.conversation.conversationMailView .chatRequestStatus:hover {
border-color: #fbb537;
}
.conversation.conversationMailView .chatRequestStatus.contactChatRequestSettingDefault:hover {
color: #000;
opacity: 1;
}
.conversation.conversationMailView .noticeList {
margin: 13px;
border-radius: 11px;
padding: 7px;
border: 2px solid #f5d95c;
background: #fff6cc;
color: #806d19;
display: flex;
flex-direction: column;
gap: 7px;
align-content: flex-start;
justify-content: center;
align-items: flex-start;
}
.conversation.conversationMailView .noticeList .noticeEntry {
padding: 7px;
font-weight: 800;
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
align-content: center;
align-items: baseline;
justify-content: flex-start;
gap: 3px;
}
#conversationOptionLayer .conversationActionMenu {
max-width: 90vw;
display: flex;
flex-direction: column;
width: 280px;
background: #424242;
border: 1px solid #333;
font-weight: 600;
border-radius: 15px;
box-shadow: 0 2px 2px #cacaca;
position: absolute;
box-sizing: border-box;
overflow: hidden;
}
#conversationOptionLayer .conversationActionMenu > * {
display: flex;
padding: 10px 15px;
box-sizing: border-box;
gap: 10px;
align-content: center;
align-items: center;
justify-content: flex-start;
cursor: pointer;
transition: .3s;
}
#conversationOptionLayer .conversationActionMenu > *:hover {
background: #5a5a5a;
}
#conversationOptionLayer .conversationActionMenu > * > * {
display: inline-flex;
box-sizing: border-box;
}
#conversationOptionLayer .conversationActionMenu > * > .label {
color: #ffffff !important;
font-weight: 600;
font-size: 100%;
}
#conversationOptionLayer .conversationActionMenu > * > .vsic {
width: 25px;
height: 25px;
}
#messageOptionLayer {
background: rgba(30, 30, 30, 0.1);
top: 0;
left: 0;
bottom: 0;
right: 0;
position: fixed;
z-index: 9000001;
padding-top: 60px;
}
#messageOptionLayer .messageOptionMenu {
max-width: 90vw;
display: flex;
flex-direction: column;
width: 280px;
background: #424242;
border: 1px solid #333;
font-weight: 600;
border-radius: 15px;
box-shadow: 0 2px 2px #cacaca;
position: absolute;
box-sizing: border-box;
overflow: hidden;
}
#messageOptionLayer .messageOptionMenu > * {
display: flex;
padding: 10px 15px;
box-sizing: border-box;
gap: 10px;
align-content: center;
align-items: center;
justify-content: flex-start;
cursor: pointer;
transition: .3s;
}
#messageOptionLayer .messageOptionMenu > *:hover {
background: #5a5a5a;
}
#messageOptionLayer .messageOptionMenu > * > * {
display: inline-flex;
box-sizing: border-box;
}
#messageOptionLayer .messageOptionMenu > * > .label {
color: #ffffff !important;
font-weight: 600;
font-size: 100%;
}
#messageOptionLayer .messageOptionMenu > * > .vsic {
width: 25px;
height: 25px;
}
#messageDeleteConfirmLayer {
background: rgba(30, 30, 30, 0.1);
top: 0;
left: 0;
bottom: 0;
right: 0;
position: fixed;
z-index: 9000001;
padding-top: 60px;
display: flex;
justify-items: center;
align-items: center;
justify-content: center;
}
#messageDeleteConfirmLayer .messageDeleteConfirmDialog {
top: 60px !important;
position: fixed !important;
max-height: calc(20vh);
overflow-y: auto;
border: 1px solid #333;
background: #424242;
color: #eee;
display: flex;
flex-direction: column;
gap: 17px;
line-height: 1.5;
padding: 17px 23px;
border-radius: 23px;
font-size: 15px;
margin: 20px;
}
#messageDeleteConfirmLayer .messageDeleteConfirmDialog .caption {
color: #fff;
text-align: center;
font-size: 120%;
font-weight: 900;
}
#messageDeleteConfirmLayer .messageDeleteConfirmDialog .annotation {
color: #aaa;
text-align: center;
font-size: 90%;
font-weight: 400;
}
#messageDeleteConfirmLayer .messageDeleteConfirmDialog .actionArea {
gap: 13px;
}
@media screen and (max-width: 800px) {
#conversationOptionLayer .conversationActionMenu {
top: 60px !important;
left: 10px !important;
position: fixed !important;
margin-top: 0 !important;
max-height: calc(80vh - 60px);
overflow-y: auto;
}
#messageOptionLayer .messageOptionMenu {
top: 60px !important;
left: 10px !important;
position: fixed !important;
margin-top: 0 !important;
max-height: calc(20vh);
overflow-y: auto;
}
#messageDeleteConfirmLayer .messageDeleteConfirmDialog {
padding: 17px;
}
}
/* #1279 Moderativ ausgeblendete Nachrichten: zentrierte System-Notiz (Empfänger-Tombstone + Autor-Hinweis), bewusst keine Absender-Bubble */
.conversation.conversationMailView .conversationStream .entry.moderationEntry,
.mailConversation .entry.moderationEntry {
float: none;
width: 100%;
display: block;
margin: 8px 0;
text-align: left;
}
.entry.moderationEntry .moderationNotice {
display: flex;
align-items: flex-start;
gap: 8px;
box-sizing: border-box;
max-width: 440px;
margin: 0 auto;
background: #ffffff;
border: 1px solid #ecd9cc;
border-left: 4px solid #e8632a;
border-radius: 6px;
padding: 10px 13px;
font-size: 12px;
line-height: 145%;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.entry.moderationEntry .moderationIcon {
flex: 0 0 16px;
width: 16px;
height: 16px;
margin-top: 1px;
}
.entry.moderationEntry .moderationText {
flex: 1 1 auto;
min-width: 0;
overflow-wrap: break-word;
color: #4a4036;
}
.entry.moderationEntry .moderationText strong {
display: block;
font-weight: 700;
font-size: 13px;
color: #3f3a34;
margin-bottom: 3px;
}
.entry.moderationEntry .moderationNotice a {
color: #c0561d;
text-decoration: underline;
font-weight: 600;
}
/* Bell Feed */
.layerNotifications {
background: #e5e5e5;
color: #282828;
padding: 0;
width: 100%;
}
.layerNotifications .headline {
padding: 10px;
font-size: 120%;
}
.layerNotifications .pointer {
position: relative;
margin-top: -30px;
margin-left: 20px;
z-index: 2;
}
.layerNotifications .text {
max-height: 450px;
min-height: 450px;
overflow-y: scroll;
padding: 0;
padding-top: 5px;
}
.listOfNotifications {
background: #ffffff;
color: #333333;
padding: 3%;
width: 94%;
}
a.notificationEntry {
width: 300px;
display: block;
float: left;
padding-bottom: 4px;
padding-top: 4px;
border-radius: 15px;
margin-bottom: 4px;
}
a.notificationEntry:hover {
opacity: 1;
cursor: pointer;
background: #f1f1f1;
}
a.notificationEntry .preStamp {
display: none;
}
a.notificationEntry.old {
opacity: 0.9;
}
a.notificationEntry .userImage {
float: left;
width: 50px;
text-align: right;
padding-top: 7px;
}
a.notificationEntry .userImage .image img {
border-radius: 50%;
width: 40px;
}
a.notificationEntry .userImage .image img.attachedImage {
border-radius: 3px;
}
a.notificationEntry .echoResponse {
position: relative;
margin-left: 22px;
margin-top: -18px;
z-index: 2;
}
a.notificationEntry .whatHappend {
float: left;
padding-left: 10px;
padding-top: 12px;
font-size: 100%;
font-weight: 300;
max-width: 200px;
padding-bottom: 10px;
color: #323232;
line-height: 120%;
}
a.notificationEntry .reference {
float: right;
padding-right: 20px;
padding-left: 5px;
padding-top: 20px;
width: 20px;
}
a.notificationEntry .timestamp {
font-size: 80%;
color: #969696;
}
a.notificationEntry .timestamp .tsShortTimeAgo,
.notificationEntry .timestamp .tsRecently {
color: #969696 !important;
border: none;
background: none;
}
a.notificationEntry .attachedImageFull {
margin-left: 80px;
width: 250px;
padding-bottom: 10px;
}
a.notificationEntry .attachedImageFull img {
width: 100px;
}
a.notificationEntry .overlay {
margin-top: -60px;
z-index: 2;
position: relative;
padding-left: 20px;
display: none;
}
a.notificationEntry.notificationType27.active {
background: #6bffff;
}
a.notificationEntry.notificationType27.active .whatHappend {
font-weight: 700;
color: #000000;
}
a.notificationEntry.notificationType27.active:hover {
background: #8fffff;
}
a.notificationEntry.notificationType28 {
background: #fff473;
}
a.notificationEntry.notificationType28 .whatHappend {
color: #000000;
}
a.notificationEntry.notificationType28:hover {
background: #fffac0;
}
a.notificationEntry.notificationType11 {
background: #fff473;
}
a.notificationEntry.notificationType11 .whatHappend {
font-weight: 900;
color: #000000;
}
a.notificationEntry.notificationType11:hover {
background: #fffac0;
}
a.notificationEntry:hover .overlay {
display: block;
}
.notificationFooter {
padding: 12px 20px;
text-align: center;
}
.notificationFooter:hover {
background: #f1f1f1;
color: #417bc4;
cursor: pointer;
}
.entryFrame {
width: 100%;
}
.pinBox {
font-size: 100%;
line-height: 1.3;
border-radius: 10px;
}
.pinBox.styled {
background: #fff;
margin-top: 10px;
margin-bottom: 10px;
padding: 15px;
}
.pinBox .pinBoxIcon {
display: grid;
grid-template-columns: calc(20% - 5px) calc(20% - 5px) calc(20% - 5px) calc(20% - 5px) calc(20% - 5px);
align-items: center;
justify-items: center;
grid-gap: 5px;
}
.pinBox .pinBoxIcon button {
cursor: pointer;
}
.pinBox .pinBoxIcon .pin {
display: inline-block;
width: 60px;
height: 60px;
border: none;
border-radius: 15px;
padding: 10px;
box-sizing: border-box;
}
.pinBox .pinBoxIcon .priority {
width: 60px;
height: 60px;
}
.pinBox .pin.unset {
background: #ccc;
opacity: .7;
}
.pinBox .pinBoxList {
margin-top: 7px;
display: grid;
grid-template-columns: 100%;
grid-gap: 7px;
}
.pinBox .pinBoxList .pin {
display: grid;
grid-template-columns: 40px auto;
align-items: center;
justify-items: left;
padding: 3px 10px;
border: none;
grid-gap: 20px;
cursor: pointer;
border-radius: 15px;
}
.pinBox .pinBoxList .pin img,
.pinBox .pinBoxIconList .pin .content {
display: inline-block;
}
.pinBox .pinBoxList .pin img {
width: 40px;
height: 40px;
}
.pinBox .pinBoxList .pin .content {
align-self: center;
justify-self: start;
}
.pinBox .pinBoxList .pin:hover {
animation: intoFocusLight 0.5s forwards;
}
.pinBox .pinBoxList .pin:hover img {
animation: intoFocus 0.5s forwards;
animation-delay: 0.2s;
}
.pinBox .pinBoxIcon .active {
box-shadow: 0px 0px 5px 3px #ea5800;
}
.pinBox .pinBoxList .own {
display: grid;
grid-template-columns: auto 40px;
grid-template-rows: 50% 50%;
grid-gap: 2px;
}
.pinBox .pinBoxList .own .pin {
grid-column: 1 / span 1;
grid-row: 1 / span 2;
align-items: center;
justify-items: center;
cursor: pointer;
}
.pinBox .pinBoxList .own .pin.pinListUp {
grid-row: 1 / span 1;
}
.pinBox .pinBoxList .own .pin.pinListDown {
grid-row: 2 / span 1;
}
.pinBox .pinBoxList .own .pin.pinListUp,
.pinBox .pinBoxList .own .pin.pinListDown {
padding: 0;
align-items: center;
justify-items: center;
opacity: .7;
transition: .4s;
cursor: pointer;
grid-column: 2 / span 1;
}
.pinBox .pinBoxList .own .pin.pinListUp img,
.pinBox .pinBoxList .own .pin.pinListDown img {
height: 10px;
width: 10px;
}
.pinBox .pinBoxList .own .pin.pinListFlip:hover,
.pinBox .pinBoxList .own .pin.pinListUp:hover,
.pinBox .pinBoxList .own .pin.pinListDown:hover {
opacity: 1;
transition: .4s;
}
.pinBox .pinBoxList .own .pin.unset {
grid-column: 1 / span 4;
}
.pinBox .alert {
padding: 10px;
line-height: 140%;
font-size: 120%;
font-weight: 300;
}
.pinBox .match {
box-shadow: 0px 0px 5px 5px #ffe178;
}
.pinBox .pinBoxList.hasExpiration .pin {
grid-template-columns: 40px auto 40px;
}
.pinBox .pinBoxList.hasExpiration .pin .expiration img {
filter: brightness(0.7);
}
.selectPinCat {
padding: 10px 0 20px 10px;
}
.selectPinCat .entry {
width: 115px;
min-height: 115px;
float: left;
}
.selectPinCat .entry button {
border: 1px solid #efefef;
background: #f3f3f3;
cursor: pointer;
border-radius: 15px;
color: #555555;
display: inline-block;
line-height: 2em;
text-align: center;
font-weight: 300;
width: 110px;
min-height: 110px;
font-size: 1em;
}
.selectPinCat .entry img {
width: 80px;
}
.selectPinCat .entry button:hover {
animation: intoFocusLight 0.5s forwards;
}
.selectPinCatDyn {
display: flex;
justify-content: space-evenly;
align-content: stretch;
align-items: stretch;
flex-wrap: nowrap;
flex-direction: row;
}
.selectPinCatDyn button {
border: 1px solid #efefef;
background: #f3f3f3;
cursor: pointer;
border-radius: 15px;
padding: 7px;
color: #555555;
display: inline-block;
line-height: 2em;
text-align: center;
font-weight: 300;
width: 110px;
font-size: 1em;
}
#pinLayer {
right: 0px;
bottom: 0px;
background: rgba(0, 0, 0, 0.65);
width: 100%;
padding-top: 10px;
display: grid;
}
#pinLayer > .layerWrapper {
padding-bottom: 100px;
justify-self: center;
align-self: center;
}
#pinLayer .container {
max-width: 600px;
background: #fff;
min-width: 400px;
border-radius: 10px;
padding: 25px;
}
#pinLayer .pinBox {
border-radius: 0;
}
#pinLayer .head {
display: flex;
align-items: center;
color: #484848;
height: 3.5em;
max-width: 100%;
background: #fff;
}
#pinLayer .head .caption {
flex-grow: 1;
margin: .5em 1em;
font-weight: 700;
font-size: 1.3em;
text-overflow: ellipsis;
}
#pinLayer .head button {
border: 1px solid #c7c7c7;
background: #d5d5d5;
cursor: pointer;
border-radius: 15px;
color: #333333;
display: inline-block;
height: 2.5em;
margin: .5em;
line-height: 2em;
text-align: center;
font-weight: 300;
padding: 2px 10px;
}
#pinLayer .quicksearch input {
padding: 10px;
border-radius: 15px;
border: 1px solid #e1e1e1;
text-indent: 10px;
font-weight: 300;
}
#pinLayer .quicksearch {
padding: 10px 20px 0 10px;
}
#pinLayer .pinGrid {
display: grid;
grid-template-columns: calc(25% - 7px) calc(25% - 7px) calc(25% - 7px) calc(25% - 7px);
grid-gap: 7px;
margin-bottom: 21px;
}
#pinLayer .pinGrid .pin {
display: grid;
grid-template-columns: 100%;
border-radius: 15px;
align-items: center;
justify-items: center;
padding: 5px;
grid-gap: 7px;
border: none;
box-sizing: border-box;
}
#pinLayer .pinGrid .pin:hover {
animation: intoFocusLight 0.5s forwards;
}
#pinLayer .pinGrid .pin:hover img {
animation: intoFocus 0.5s forwards;
animation-delay: 0.2s;
}
#pinLayer .pinGrid .pin img {
max-width: 40%;
}
#pinLayer .pinGrid.pincatz9u08lb5 {
grid-template-columns: 50% 50%;
}
.pindcv9fk5ijc {
background: #ffffff;
border: 2px solid #f7f7f7 !important;
color: #7d7d7d;
font-weight: 400;
}
.pindcv9fk5ijc.special {
border: 2px solid #555555 !important;
color: #ffffff;
font-weight: 700;
}
/* pink */
.pindc6uihkh1g {
background: linear-gradient(120deg, #fb43cb 0%, #d651e6 100%);
border: 2px solid #fcaaff !important;
color: #ffffff;
font-weight: 600;
}
/* yellow/orange */
.pindc74hkopa3 {
background: linear-gradient(120deg, #ffec3a 0, #ffd237 100%);
border: 2px solid #ffd237 !important;
color: #333333;
font-weight: 400;
}
/* red */
.pindclgtisq2r {
background: linear-gradient(120deg, #fe2b81 0%, #ff5aa1 100%);
border: 2px solid #fe398a !important;
color: #ffffff;
font-weight: 600;
}
/* leucht-gruen */
.pindcc2a5eur6 {
background: linear-gradient(120deg, #e7fe2b 0, #84f0a5 100%);
border: 2px solid #bbf861 !important;
color: #555555;
font-weight: 600;
}
/* gruen */
.pindca1tinms5 {
background: linear-gradient(120deg, #aaff7e 0, #40dd52 100%);
border: 2px solid #72ed67 !important;
color: #0c5411;
font-weight: 600;
}
/* blau */
.pindc7zwnre2z {
background: linear-gradient(120deg, #6cd7ff 0, #2a9aff 100%);
border: 2px solid #4dbbff !important;
color: #ffffff;
}
/* gelb hell */
.pindcflgsri3f {
background: linear-gradient(120deg, #fffa6c 0, #fffa50 100%);
border: 2px solid #f7f256 !important;
color: #545454;
font-weight: 600;
}
/* special: rank */
.pindcz1vlt3xh {
background: url("//s.jappy.com/i/dashboard/backgroundRank.png") no-repeat;
background-position: center;
background-size: cover;
color: #fff;
font-weight: 600;
}
/* flieder */
.pindcmdui2m48 {
background: linear-gradient(120deg, #e0d7f7 0, #d8b1fc 100%);
border: 2px solid #e0c9ff !important;
color: #574667;
font-weight: 600;
}
/* mint-blau */
.pindc77l8zrlj {
background: linear-gradient(120deg, #BCFFDB 0, #9ae8f0 100%);
border: 2px solid #abf4e6 !important;
color: #304642;
font-weight: 500;
}
/* Türkis */
.pindc7yvegwss {
background: linear-gradient(120deg, #1ccad8 0, #15e6cd 100%);
border: 2px solid #19d7d3 !important;
color: #ffffff;
font-weight: 500;
}
/* Rosa */
.pindc52tjk4ri {
background: linear-gradient(120deg, #ffdcf3 0, #ffade2 100%);
border: 2px solid #ffcaec !important;
color: #751a55;
font-weight: 500;
}
.pincatz9u08lb5 {
grid-template-columns: none !important;
}
.pincatz9u08lb5 .quote {
font-weight: bold !important;
justify-self: start;
padding: 7px;
text-align: left;
grid-column: 1 / span 2;
}
.pincatz9u08lb5 .author {
font-size: .9em;
text-align: right;
justify-self: right;
grid-column: 1 / span 2;
}
.pincatnius2q5j {
grid-template-columns: none !important;
grid-gap: 5px !important;
padding: 11px !important;
}
.pincatnius2q5j .mottoText {
font-weight: 600;
justify-self: center;
}
.pincatnius2q5j .mottoSubtitle {
font-weight: 400;
font-size: .8em;
justify-self: center;
}
#pinLayer .pager {
display: grid;
grid-template-columns: calc(33% - 7px) calc(34% - 7px) calc(33% - 7px);
grid-gap: 7px;
justify-items: stretch;
align-items: center;
}
#pinLayer .pager button {
border: 1px solid #c7c7c7;
background: #d5d5d5;
cursor: pointer;
border-radius: 15px;
color: #333333;
display: inline-block;
height: 2.5em;
margin: .5em;
line-height: 2em;
text-align: center;
font-weight: 300;
padding: 2px 10px;
box-sizing: border-box;
}
#pinLayer .pager select {
border: 1px solid #c7c7c7;
background: #ffffff;
cursor: pointer;
border-radius: 15px;
color: #333333;
display: inline-block;
height: 2.5em;
margin: .5em;
line-height: 2em;
text-align: center;
font-weight: 300;
padding: 2px 10px;
box-sizing: border-box;
}
@media screen and (min-width: 370px) and (max-width: 490px) {
.pinBox {
max-width: 360px;
margin: auto;
margin-bottom: 10px;
}
#pinLayer .pinGrid {
display: grid;
grid-template-columns: calc(50% - 7px) calc(50% - 7px);
}
}
@media screen and (max-width: 490px) {
#pinLayer .container {
padding: 5px;
min-width: 360px;
}
}
#reportUserLayer {
right: 0px;
bottom: 0px;
background: rgba(0, 0, 0, 0.65);
width: 100%;
padding-top: 10px;
display: grid;
}
#reportUserLayer > .layerWrapper {
padding-bottom: 100px;
justify-self: center;
align-self: center;
}
#reportUserLayer .container {
max-width: 600px;
background: #fff;
min-width: 400px;
border-radius: 10px;
padding: 25px;
}
#reportUserLayer .head {
display: flex;
align-items: center;
color: #484848;
height: 3.5em;
max-width: 100%;
background: #fff;
}
#reportUserLayer .head .caption {
flex-grow: 1;
margin: .5em 1em;
font-weight: 700;
font-size: 1.3em;
text-overflow: ellipsis;
}
#reportUserLayer .head button {
border: 1px solid #c7c7c7;
background: #d5d5d5;
cursor: pointer;
border-radius: 15px;
color: #333333;
display: inline-block;
height: 2.5em;
margin: .5em;
line-height: 2em;
text-align: center;
font-weight: 300;
padding: 2px 10px;
}
.emotionConfirm {
width: 170px;
height: 212px;
background: #ffffff;
padding: 10px;
border-radius: 10px;
background: #ff2581;
border: 3px solid #da1669;
animation: emotionConfirm 0.3s;
}
.emotionConfirm img {
width: 170px;
border-radius: 10px;
border: 1px solid #ed1973;
max-height: 122px;
overflow: hidden;
}
.emotionConfirm .message {
margin-top: 90px;
text-align: center;
background: #ff2581;
opacity: 0.9;
position: absolute;
color: #ffffff;
padding: 10px;
min-width: 150px;
font-weight: 500;
}
.emotionConfirm .buttons {
margin-top: 12px;
}
.emotionConfirm .buttons > * {
display: block;
color: #ffffff;
padding: 10px 10px;
background: #da1669;
border: 1px solid #d01a66;
margin-left: 0 !important;
border-radius: 10px;
margin-bottom: 9px;
font-size: 110%;
text-align: center;
}
.emotionConfirm .buttons > .blue {
color: #666666;
font-weight: 900;
background: #ffffff;
border: 1px solid #da1669;
}
.emotionConfirm .buttons > *:hover {
border: 1px solid #96134a;
transition: 0.5s;
text-decoration: underline;
}
.emotionDetailLayer {
width: 100%;
text-align: center;
}
.emotionDetailLayer .emotion .icon {
border: 5px solid #ff2581;
border-radius: 10px;
max-width: 400px;
}
.emotionDetailLayer .foot {
margin: auto;
width: 400px;
}
.emotionDetailLayer .foot > * {
margin: auto;
display: block;
padding: 15px 10px;
margin-left: 0 !important;
background: #da1669;
color: #ffffff;
border: 1px solid #d01a66;
font-weight: 900;
border-radius: 10px;
margin-bottom: 5px;
font-size: 110%;
text-align: center;
}
.emotionDetailLayer .foot > *:hover {
border: 1px solid #000000;
transition: 0.5s;
}
.emotionDetailLayer .foot > *.simple {
background: #333333;
border: 1px solid #1d1d1d;
}
.emotionDetailLayer .foot > *:hover.simple {
border: 1px solid #ffffff;
}
.emotionDetailLayer .head {
width: 400px;
margin: auto;
padding-bottom: 10px;
}
.emotionDetailLayer .head > .stampOffline {
color: #ffffff;
}
.emotionDetailLayer .head .profileImage {
width: 30px;
float: left;
}
.emotionDetailLayer .head .profileImage img {
border-radius: 50%;
}
.emotionDetailLayer .head .text {
float: left;
padding: 7px 10px;
}
.emotionDetailLayer .head .text .privacy {
color: #ffffff;
margin-left: 10px;
}
.emotionDetailLayer .name {
width: 400px;
padding: 20px 10px;
color: #ffffff;
margin: auto;
font-size: 130%;
font-weight: 900;
}
/* Emotions Layer*/
.playingEmotion {
border: 5px solid #ff2581;
border-radius: 10px;
}
.emotionOverlay {
height: 120px;
width: 125px;
background: #fde694;
border-radius: 10px;
border: 3px solid #fee382;
}
.emotionOverlay .confirmButton {
padding: 12px;
border-radius: 20px;
background: #1adfdf;
border: 1px solid #18cccc;
text-align: center;
color: #ffffff;
font-weight: 900;
}
.emotionOverlay .confirmButton:hover {
cursor: pointer;
background: #24e6e6;
transition: 0.5s;
}
.emotionOverlay .actions {
margin: 0 15px;
}
.emotionOverlay .info {
padding: 15px;
text-align: center;
line-height: 140%;
font-weight: 700;
color: #000000;
}
.emotionSelection {
width: 100%;
padding-top: 10px;
background: #ffffff;
margin: auto;
}
.emotionSelection .shopSelectorHeadline {
margin: 5px 20px;
}
.emotionSelection .head .text {
float: left;
padding: 10px 30px 20px 30px;
font-size: 120%;
font-weight: 600;
max-width: 200px;
color: #333333;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.emotionSelection .search input {
margin-left: 30px;
width: 300px;
border-radius: 7px;
padding: 10px 15px;
border: 1px solid #efefef;
background: #f7f7f7;
font-size: 100%;
}
.emotionSelection .navigation {
width: 100%;
overflow: scroll;
}
.emotionSelection .navigation .wrapper {
width: 1000px;
margin-left: 30px;
}
.emotionSelection .navigation span {
display: inline-block;
text-align: center;
padding: 10px 10px;
color: #666666;
cursor: pointer;
font-size: 100%;
font-weight: 300;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.emotionSelection .navigation span:hover {
color: #ec6449;
}
.emotionSelection .navigation span.active {
color: #4ecdff;
font-weight: bold;
border-bottom: 4px solid #4ecdff;
}
.emotionSelection .selection {
margin-bottom: 20px;
margin-top: 5px;
}
.emotionSelection .topic {
font-size: 12px;
color: #333333;
padding: 0 10px 0 15px;
color: #666666;
width: 650px;
}
.emotionSelection .topicText {
font-size: 120%;
float: left;
padding-top: 10px;
}
.emotionSelection .infoPresentedToday {
margin-bottom: 10px;
color: #dddddd;
font-weight: 600;
padding: 0px 30px;
text-align: center;
}
.emotionSelection .infoNumberOfVouchers {
margin-bottom: 10px;
color: #9bd729;
font-weight: 600;
padding: 0px 30px;
text-align: center;
}
.emotionSelection .grading {
margin: 0;
}
.emotionSelection .grading > * {
float: right;
margin-right: 20px;
}
.emotionSelection .listing {
margin-left: 30px;
padding-top: 20px;
margin-bottom: 20px;
}
.emotionSelection .listing > .entry {
display: block;
float: left;
overflow: hidden;
height: 130px;
text-align: left;
margin: 0 20px 10px 0;
text-align: center !important;
border-radius: 5px;
color: #565656;
cursor: pointer;
}
.emotionSelection .listing > .entry.promoted {
font-weight: bold;
}
.emotionSelection .listing > .entry .name {
display: block;
font-size: 90%;
font-weight: 300;
color: #999999;
padding-top: 10px;
text-align: center;
}
.emotionSelection .listing > .entry .icon {
text-align: center;
border: 3px solid #e1e1e1;
border-radius: 10px;
}
.emotionSelection .listing > .entry .icon img {
border-radius: 5px;
height: 90px;
width: 125px;
}
.emotionSelection .listing > .entry:hover .icon {
border: 3px solid #ff2581;
}
.emotionSelection .listing > .entry:hover .name {
color: #000000;
font-weight: 500;
}
.emotionSelection .listing > .entry .name {
padding: 8px 0 0 15px;
color: #666666;
}
.emotionSelection .cost {
text-align: left;
}
.emotionSelection .cost span {
background: #ffb02c;
color: #ffffff;
font-weight: 600;
display: block;
position: absolute;
margin-top: -45px;
margin-left: 10px;
padding: 3px;
border-radius: 5px;
}
.emotionSelection .cost span img {
width: 15px;
height: 15px;
}
.emotionSelection .listing > .entry .emotion {
margin-left: 15px;
}
.emotionSelection .listing > .entry:hover .cost {
text-decoration: none;
}
.emotionSelection .price {
text-align: left;
}
.emotionSelection .price span {
background: #ff9933;
color: #ffffff;
font-weight: 300;
position: absolute;
margin-top: -110px;
padding: 3px;
border-radius: 3px;
}
.emotionSelection .head .search {
float: right;
padding-top: 15px;
margin-left: 5px;
margin-right: 30px;
}
.emotionSelection .head .search input {
border-radius: 7px;
padding: 10px 15px;
border: 1px solid #e1e1e1;
font-size: 130%;
width: 300px;
}
.emotionSelection .collectableStatus {
display: grid;
grid-template-columns: 60px auto 60px;
grid-template-rows: min-content min-content;
padding: 13px;
grid-gap: 3px 13px;
align-content: center;
justify-content: center;
align-items: center;
justify-items: start;
}
.emotionSelection .collectableStatus .icon {
grid-column: 1;
grid-row: 1 / span 2;
}
.emotionSelection .collectableStatus .description {
grid-column: 2;
grid-row: 1;
padding: 7px;
font-size: .9em;
font-weight: bold;
line-height: 1.5;
color: #09C619;
}
.emotionSelection .collectableStatus .description.problem {
color: #C64809;
}
.emotionSelection .collectableStatus .pinState {
grid-column: 2;
grid-row: 2;
padding: 7px;
font-size: .9em;
font-weight: 400;
line-height: 1.5;
color: #09C619;
}
.emotionSelection .collectableStatus .pinState.problem {
color: #a0a0a0;
}
.emotionSelection .collectableStatus .pinPreview {
grid-column: 3;
grid-row: 1 / span 2;
}
.emotionSelection .collectableStatus .pinPreview img {
border-radius: 50%;
width: 60px;
height: 60px;
border-style: solid;
border-width: 2px;
}
.emotionSelection .collectableStatus .pinPreview.difficultyHard img {
border-color: #f96c6c;
}
.emotionSelection .collectableStatus .pinPreview.difficultyMedium img {
border-color: #ffd932;
}
.emotionSelection .collectableStatus .pinPreview.difficultyEasy img {
border-color: #4adb5b;
}
.emotionSelection .collectableStatus .pinPreview.difficultyVeryHard img {
border-color: #00ffe7;
}
@keyframes scrollFormTop {
from {
top: -1000px;
}
to {
top: 50px;
}
}
@keyframes scrollToTop {
from {
top: 50px;
}
to {
top: -50px;
}
}
@keyframes growEchoBox {
from {
height: 0px;
overflow: hidden;
border: 10px solid #ffedb0;
}
to {
height: 320px;
overflow: hidden;
border: 10px solid #ffd237;
}
}
@keyframes showEchoBox {
from {
height: 0px;
overflow: hidden;
}
to {
height: 70;
overflow: hidden;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeElementOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes showLogin {
0% {
transform: translate(0, -400px);
}
25% {
transform: translate(0, -350px);
}
90% {
transform: translate(0, 10px);
}
100% {
transform: translate(0, 0);
}
}
@keyframes showMobileActionButton {
0% {
transform: translate(0, -400px);
}
80% {
transform: translate(0, 0);
opacity: 1.0;
}
90% {
transform: scale(1.2);
opacity: 0.7;
}
100% {
transform: scale(1);
opacity: 1.0;
}
}
@keyframes showMobileActions {
0% {
transform: translate(0, 400px);
}
100% {
transform: translate(0, 0);
}
}
@keyframes prepareImage {
0% {
transform: rotate(0);
}
50% {
transform: rotate(-10deg);
}
100% {
transform: rotate(0);
}
}
@keyframes hoverTopActions {
0% {
text-indent: 0px;
}
100% {
text-indent: 3px;
}
}
@keyframes updateTickerEntry {
0% {
transform: scale(1);
}
50% {
transform: scale(1.01);
}
100% {
transform: scale(1);
}
}
@keyframes highlightTickerEntry {
0% {
transform: scale(1);
background: none;
}
50% {
transform: scale(1.01);
background: #cacaca;
}
100% {
transform: scale(1);
background: none;
}
}
@keyframes zoomIn {
0% {
transform: scale(0.1);
background: none;
}
100% {
transform: scale(1);
background: #4e4e4e;
}
}
@keyframes focusIcon {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
@keyframes hideTickerEntry {
0% {
transform: scale(1);
}
80% {
transform: scale(0);
}
100% {
height: 0px;
overflow: hidden;
}
}
@keyframes rotate {
0% {
transform: rotate(0);
}
25% {
transform: rotate(-7deg);
}
75% {
transform: rotate(7deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes twistSuper {
0% {
transform: scale(1.2);
}
50% {
transform: scale(0.9);
}
100% {
transform: scale(1.2);
}
}
@keyframes showEffect {
0% {
display: block !important;
transform: scale(0.2);
}
50% {
transform: scale(1.3);
}
100% {
transform: scale(1);
}
}
@keyframes twistCard {
0% {
transform: scale(0.2);
}
50% {
transform: scale(1.2);
}
100% {
box-shadow: 0 0 15px #ffe000;
transform: scale(1);
}
}
@keyframes twistCard2 {
0% {
transform: scale(0);
}
30% {
transform: scale(0.2);
}
60% {
transform: scale(1.2);
}
100% {
box-shadow: 0 0 15px #ffe000;
transform: scale(1);
}
}
@keyframes twistCard3 {
0% {
transform: scale(0);
}
50% {
transform: scale(0.2);
}
80% {
transform: scale(1.2);
}
100% {
box-shadow: 0 0 15px #ffe000;
transform: scale(1);
}
}
@keyframes hoverAddEcho {
0% {
transform: scale(1);
border-radius: 10px;
}
100% {
transform: scale(1.05);
border-radius: 20px;
}
}
@keyframes hoverCard {
0% {
transform: scale(1);
}
100% {
transform: scale(1.07);
}
}
@keyframes openCard {
0% {
transform: scale(0.7);
}
80% {
transform: scale(1.07);
}
100% {
transform: scale(1);
}
}
@keyframes pulseDuration {
0% {
transform: scale(1);
opacity: 0.80;
}
50% {
transform: scale(1.2);
opacity: 1.0;
}
100% {
transform: scale(1);
opacity: 0.8;
}
}
@keyframes glowDuration {
0% {
transform: scale(1);
}
50% {
transform: scale(1.3);
}
100% {
transform: scale(1);
}
}
@keyframes showBorder {
from {
border-color: #e4e4e4;
}
to {
border-color: #85c4ff;
}
}
@keyframes showStreamEntry {
from {
opacity: 0.1;
}
to {
opacity: 1;
}
}
@keyframes growStatusIcons {
0% {
width: 0px;
}
25% {
width: 20px;
}
75% {
width: 75px;
}
100% {
width: 65px;
}
}
@keyframes openMenue {
0% {
height: 10px;
overflow: hidden;
}
100% {
height: auto;
overflow: hidden;
}
}
/* Wobble Horizontal */
@keyframes wobble-horizontal {
50% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
51% {
-webkit-transform: translateX(1px);
transform: translateX(1px);
transform: rotate(10deg);
}
52% {
-webkit-transform: translateX(-1px);
transform: translateX(-1px);
transform: rotate(-10deg);
}
53% {
-webkit-transform: translateX(1px);
transform: translateX(1px);
transform: rotate(15deg);
}
54% {
-webkit-transform: translateX(-1px);
transform: translateX(-1px);
transform: rotate(-15deg);
}
55% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes backgroundFade {
0% {
opacity: 0;
}
100% {
opacity: 0.3;
}
}
@keyframes navigatorSlideIn {
from {
margin-left: -100px;
}
to {
margin-left: 0;
}
}
@keyframes fadeNotificationOut {
0% {
transform: scale(0);
opacity: 0.0;
}
10% {
transform: scale(1.1);
opacity: 1.0;
}
12% {
transform: scale(1);
opacity: 1.0;
}
90% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0);
opacity: 0;
}
}
@keyframes fadeOut {
to {
height: 0px;
opacity: 0;
padding: 0;
}
}
@keyframes fadeOutBellFeed {
to {
height: 0px;
width: 0;
opacity: 0;
padding: 0;
display: none;
}
}
@keyframes imageFadeIn {
from {
transform: translateX(2000px);
display: block;
}
to {
transform: translateX(0);
}
}
@keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}
@keyframes emotionConfirm {
0% {
transform: scale(0.6);
transform: scale(1);
}
80% {
transform: scale(1);
transform: scale(1.5);
}
100% {
transform: scale(0.6);
transform: scale(1);
}
}
@keyframes movePointer {
0% {
padding-right: 0;
padding-top: 0;
}
100% {
padding-right: 10px;
padding-top: 10px;
}
}
/* Rotate the right side of the progress bar from 0 to 180 degrees */
@-webkit-keyframes right-spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(180deg);
}
}
/* Rotate the left side of the progress bar from 0 to 360 degrees */
@-webkit-keyframes left-spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
/* Set the wrapper clip to auto, effectively removing the clip */
@-webkit-keyframes close-wrapper {
to {
clip: rect(auto, auto, auto, auto);
}
}
@-webkit-keyframes overshotIn {
0% {
transform: scale(0.4);
}
40% {
transform: scale(0.4);
}
90% {
transform: scale(1.2);
}
100% {
ransform: scale(1);
}
}
@-webkit-keyframes overshotInDelay {
0% {
transform: scale(0);
}
30% {
transform: scale(0);
}
40% {
transform: scale(0.4);
}
90% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
@keyframes fadeAndScale {
0% {
opacity: 0;
transform: scale3d(0.75, 0.75, 1);
}
70% {
opacity: 0;
transform: scale3d(0.75, 0.75, 1);
}
100% {
opacity: 1;
transform: scale3d(1, 1, 1);
}
}
@-webkit-keyframes glowingText {
from {
text-shadow: 0 0 10px #fff;
background: #ff0052;
}
to {
text-shadow: 0 0 10px #ce007f;
background: #c1003e;
}
}
@keyframes overshotFadeIn {
0% {
transform: scale(0);
opacity: 0.0;
}
90% {
transform: scale(1.1);
opacity: 0.8;
}
100% {
transform: scale(1);
opacity: 1;
}
}
@keyframes redeem {
0% {
opacity: 1.0;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1.0;
}
}
@keyframes intoFocus {
0% {
transform: scale(0.95);
}
100% {
transform: scale(1.2);
}
}
@keyframes intoFocusLight {
0% {
transform: scale(0.95);
}
100% {
transform: scale(1.05);
}
}
@keyframes intoFocusSoft {
0% {
transform: scale(0.99);
}
100% {
transform: scale(1.01);
}
}
@keyframes opacityDelay {
0% {
opacity: 0;
}
100% {
opacity: 1.0;
}
}
@keyframes backgroundSlide {
0% {
background-position: 20%;
}
100% {
background-position: 40%;
}
}
@keyframes intoFocusAndBack {
0% {
transform: scale(1);
}
80% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
@keyframes scaleToZero {
0% {
transform: scale(1);
margin-top: 0px;
}
100% {
transform: scale(0);
margin-top: -72px;
}
}
@keyframes brandingColor {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/*Profile Themes blau */
.profileImageTheme0 {
background: #62b5ff;
}
.theme_0 .background {
background-color: #62b5ff;
}
.theme_0 .profileSections a.active {
border-bottom: 5px solid #54a8f3;
}
.theme_0 .profileSections a:hover {
border-bottom: 5px solid #54a8f3;
}
/*Profile Themes grün */
.profileImageTheme1 {
background: #b3d24c;
}
.theme_1 .background {
background-color: #b3d24c;
}
.theme_1 .profileSections a.active {
border-bottom: 5px solid #a5c246;
}
.theme_1 .profileSections a:hover {
border-bottom: 5px solid #a5c246;
}
/* Template Gelb */
.profileImageTheme2 {
background: #fdd021;
}
.theme_2 .background {
background-color: #fdd021;
}
.theme_2 .profileSections a.active {
border-bottom: 5px solid #de9602;
}
.theme_2 .profileSections a:hover {
border-bottom: 5px solid #de9602;
}
.theme_2 .profileSections a .text {
color: #de9602;
}
/* Dunkelblau */
.profileImageTheme3 {
background: #4580c9;
}
.theme_3 .background {
background-color: #4580c9;
}
/* H206 */
.theme_3 .profileSections a {
border-bottom: 5px solid #316ab2;
}
.theme_3 .profileSections a:hover {
border-bottom: 5px solid #316ab2;
}
/* Lila */
.profileImageTheme4 {
background: #a763e2;
}
.theme_4 .background {
background-color: #a763e2;
}
.theme_4 .profileSections a {
border-bottom: 5px solid #7c5288;
}
.theme_4 .profileSections a:hover {
border-bottom: 5px solid #7c5288;
}
/* Pink */
.profileImageTheme5 {
background: #ff6aaf;
}
.theme_5 .background {
background-color: #ff6aaf;
}
.theme_5 .profileSections a.active {
border-bottom: 5px solid #F3548E;
}
.theme_5 .profileSections a:hover {
border-bottom: 5px solid #F3548E;
}
/* Dreamland */
.profileImageTheme7 {
background: #fe6c6d;
}
.theme_7 .background {
background: url('//s.jappy.com/i/theme/dreamland/background.png') no-repeat 0 0 #fe6c6d;
}
.theme_7 .profileBox {
background-size: 100% 100%;
background-position: 50% 50%;
}
.theme_7 .profileSections a.active {
border-bottom: 5px solid #de5b73;
}
.theme_7 .profileSections a:hover {
border-bottom: 5px solid #de5b73;
}
/* Underwater */
.profileImageTheme8 {
background: #02cddb;
}
.theme_8 .background {
background: url('//s.jappy.com/i/theme/underwater/bg_profile.png') no-repeat 0 0 #3efffa;
}
.theme_8 .profileBox {
background-size: 110% auto;
background-position: 60% 100%;
}
.theme_8 .profileSections a.active {
border-bottom: 5px solid #5ff4f8;
}
.theme_8 .profileSections a:hover {
border-bottom: 5px solid #5ff4f8;
}
/* Oldschool */
.profileImageTheme9 {
background: #333333;
}
.theme_9 .background {
background: url('//s.jappy.com/i/theme/oldschool/bg_profile.png') #333333;
}
.theme_9 .profileSections a.active {
border-bottom: 5px solid #3fd9dd;
}
.theme_9 .profileSections a:hover {
border-bottom: 5px solid #3fd9dd;
}
/* Dessert */
.profileImageTheme10 {
background: #ca6e25;
}
.theme_10 .background {
background: url('//s.jappy.com/i/theme/dessert/bg_profile.png') no-repeat 0 0 #ca6e25;
}
.theme_10 .profileBox {
background-size: 100% auto;
background-position: 50% 50%;
}
.theme_10 .profileSections a.active {
border-bottom: 5px solid #ca6e25;
color: #333333;
}
.theme_10 .profileSections a:hover {
border-bottom: 5px solid #ca6e25;
}
.theme_10 .wrap a:hover .text {
color: #ffffff;
}
/* Lines */
.profileImageTheme11 {
background: #29749f;
}
.theme_11 .background {
background: url('//s.jappy.com/i/theme/lines/bg_profile.jpg') no-repeat 0 0 #29749f;
}
.theme_11 .profileBox {
background-size: 100% auto;
background-position: 50% 50%;
}
.theme_11 .profileSections a.active {
border-bottom: 5px solid #52cbc6;
}
.theme_11 .profileSections a:hover {
border-bottom: 5px solid #52cbc6;
}
/* space */
.profileImageTheme12 {
background: #009780;
}
.theme_12 .background {
background: url('//s.jappy.com/i/theme/space/bg_profile.png') no-repeat 0 0 #009780;
}
.theme_12 .profileBox {
background-size: 100% auto;
background-position: 50% 50%;
}
.theme_12 .profileSections a.active {
border-bottom: 5px solid #009780;
}
.theme_12 .profileSections a:hover {
border-bottom: 5px solid #009780;
}
/* Ostern */
.profileImageTheme13 {
background: #e69fa8;
}
.theme_13 .background {
background: url('//s.jappy.com/i/theme/easter/bg_profile.png') no-repeat 0 0 #ca6e25;
}
.theme_13 .profileBox {
background-size: 100% auto;
background-position: 50% 50%;
}
.theme_13 .profileSections a.active {
border-bottom: 5px solid #95555f;
}
.theme_13 .profileSections a .text {
color: #333333;
}
.theme_13 .profileSections a:hover {
border-bottom: 5px solid #95555f;
}
.theme_13 .profileSummary .basicData,
.theme_13 .profileSummary .basicData a {
color: #333333;
}
.theme_13 .profileSummary .stampOnline,
.theme_13 .profileSummary .stampOffline {
color: #333333;
}
/* Grassland */
.profileImageTheme14 {
background: #89d124;
}
.theme_14 .background {
background: url('//s.jappy.com/i/theme/grassland/bg_profile.png') no-repeat 0 0 #cdf875;
}
.theme_14 .profileBox {
background-size: 100% auto;
background-position: 50% 60%;
}
.theme_14 .profileSections a.active {
border-bottom: 5px solid #7bb81b;
}
.theme_14 .profileSections a .text {
color: #333333;
}
.theme_14 .profileSections a:hover {
border-bottom: 5px solid #7bb81b;
}
.theme_14 .profileSummary .basicData,
.theme_14 .profileSummary .basicData a {
color: #333333;
}
.theme_14 .profileSummary .stampOnline,
.theme_14 .profileSummary .stampOffline {
color: #333333;
}
/* Fussball */
.profileImageTheme15 {
background: #ca6e25;
}
.theme_15 .background {
background: url('//s.jappy.com/i/theme/soccer/bg_profile.png') no-repeat 0 0 #ca6e25;
}
.theme_15 .profileBox {
background-size: 100% auto;
background-position: 50% 50%;
}
.theme_15 .profileSections a.active {
border-bottom: 5px solid #f5edd9;
}
.theme_15 .profileSections a .text {
color: #ffffff;
}
.theme_15 .profileSections a:hover {
border-bottom: 5px solid #f5edd9;
}
.theme_15 .wrap a:hover .text {
color: #ffffff;
}
.theme_15 .profileSummary .stampOnline,
.theme_15 .profileSummary .stampOffline {
color: #ffffff;
text-shadow: 2px 2px #20190d;
}
/* Herbst */
.profileImageTheme16 {
background: #df272c;
}
.theme_16 .background {
background: url('//s.jappy.com/i/theme/fall/bg_profile.png') no-repeat 0 0 #ca6e25;
}
.theme_16 .profileBox {
background-size: 100% auto;
background-position: 50% 50%;
}
.theme_16 .profileSections a.active {
border-bottom: 5px solid #5c1517;
}
.theme_16 .profileSections a .text {
color: #ffffff;
}
.theme_16 .profileSections a:hover {
border-bottom: 5px solid #5c1517;
}
.theme_16 .profileSummary .stampOnline,
.theme_16 .profileSummary .stampOffline {
color: #fff;
}
/* Halloween */
.profileImageTheme17 {
background: #004d7b;
}
.theme_17 .background {
background: url('//s.jappy.com/i/theme/halloween/bg_profile.png') no-repeat 0 0 #ca6e25;
}
.theme_17 .profileBox {
background-size: 100% auto;
background-position: 50% 50%;
}
.theme_17 .profileSections a.active {
border-bottom: 5px solid #d0860d;
}
.theme_17 .profileSections a .text {
color: #ffffff;
}
.theme_17 .profileSections a:hover {
border-bottom: 5px solid #d0860d;
}
.theme_17 .profileSummary .stampOnline,
.theme_17 .profileSummary .stampOffline {
color: #fff;
}
/* XMas */
.profileImageTheme18 {
background: #322f28;
}
.theme_18 .background {
background: url('//s.jappy.com/i/theme/xmas/bg_profile.png') no-repeat 0 0 #322f28;
}
.theme_18 .profileBox {
background-size: 100% auto;
background-position: 50% 0;
}
.theme_18 .profileSections a.active {
border-bottom: 5px solid #da2222;
}
.theme_18 .profileSections a:hover {
border-bottom: 5px solid #da2222;
}
.theme_18 .wrap a:hover .text {
color: #ffffff;
}
/* Feuerwerk */
.profileImageTheme19 {
background: #322f28;
}
.theme_19 .background {
background: url('//s.jappy.com/i/theme/fireworks/bg_profile.png') no-repeat 0 0 #322f28;
}
.theme_19 .profileBox {
background-size: 100% auto;
background-position: 50% 0;
}
.theme_19 .profileSections a.active {
border-bottom: 5px solid #e3acd5;
}
.theme_19 .profileSections a:hover {
border-bottom: 5px solid #e3acd5;
}
.theme_19 .profileSummary .basicData,
.theme_19 .profileSummary .basicData a {
font-weight: 700;
}
.theme_19 .profileSummary .stampOnline,
.theme_19 .profileSummary .stampOffline {
color: #ffffff;
text-shadow: 2px 2px #106aac;
}
/* Winter */
.profileImageTheme20 {
background: #cccccc;
}
.theme_20 .background {
background: url('//s.jappy.com/i/theme/winter/bg_profile.png') no-repeat 0 0 #cccccc;
}
.theme_20 .profileBox {
background-size: 100% auto;
background-position: 50% -40px;
}
.theme_20 .profileSections a.active {
border-bottom: 5px solid #285262;
}
.theme_20 .profileSections a .text {
color: #285262;
}
.theme_20 .profileSections a {
background: rgba(255, 255, 255, 0.7);
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom: 5px solid #ffffff;
}
.theme_20 .profileSummary .stampOnline,
.theme_20 .profileSummary .stampOffline {
color: #285262;
}
.theme_20 .profileSections a:hover {
border-bottom: 5px solid #285262;
}
.theme_20 .profileSummary .basicData,
.theme_20 .profileSummary .basicData a {
color: #333333;
font-weight: 700;
}
/* Love */
.profileImageTheme21 {
background: #3cabbc;
}
.theme_21 .background {
background: url('//s.jappy.com/i/theme/love/bg_profile.png') no-repeat 0 0 #cccccc;
}
.theme_21 .profileBox {
background-size: 100% auto;
background-position: 50% 0;
}
.theme_21 .profileSections a.active {
border-bottom: 5px solid #ea5d6b;
}
.theme_21 .profileSections a .text {
color: #9b191e;
}
.theme_21 .profileSections a:hover {
border-bottom: 5px solid #ea5d6b;
}
.theme_21 .basicText {
background: #e65064;
opacity: 0.8;
font-weight: 600;
}
/* Party */
.profileImageTheme22 {
background: #eb572c;
}
.theme_22 .background {
background: url('//s.jappy.com/i/theme/carnival/bg_profile.png') no-repeat 0 0 #eb572c;
}
.theme_22 .profileBox {
background-size: 100% auto;
background-position: 50% 0;
}
.theme_22 .profileSections a.active {
border-bottom: 5px solid #ffdc95;
}
.theme_22 .profileSections a .text {
color: #000000;
font-weight: 900;
}
.theme_22 .profileSections a:hover {
border-bottom: 5px solid #ffdc95;
}
.theme_22 .basicData,
.theme_22 .basicData a {
color: #000000;
font-weight: 900;
}
.theme_22 .profileSummary .stampOnline {
color: #333333;
}
/* Lichtparty */
.profileImageTheme23 {
background: #610c3a;
}
.theme_23 .background {
background: url('//s.jappy.com/i/theme/lightparty/bg_profile.png') no-repeat 0 0 #eb572c;
}
.theme_23 .profileBox {
background-size: 100% auto;
background-position: 50% 0;
}
.theme_23 .profileSections a.active {
border-bottom: 5px solid #740e33;
}
.theme_23 .profileSections a .text {
color: #ffffff;
}
.theme_23 .profileSections a:hover {
border-bottom: 5px solid #740e33;
}
.theme_23 .basicData,
.theme_23 .basicData a {
font-weight: 600;
}
.theme_23 .profileSummary .stampOnline {
color: #fffabb;
}
/* Aufgeblüht */
.profileImageTheme24 {
background: #e12c53;
}
.theme_24 .background {
background: url('//s.jappy.com/i/theme/blooming/bg_profile.png') no-repeat 0 0 #e12c53;
}
.theme_24 .profileBox {
background-size: 100% auto;
background-position: 50% 0;
}
.theme_24 .profileSections a.active {
border-bottom: 5px solid #79988b;
}
.theme_24 .profileSections a .text {
color: #ffffff;
}
.theme_24 .profileSections a:hover {
border-bottom: 5px solid #79988b;
}
.theme_24 .basicData,
.theme_24 .basicData a {
font-weight: 600;
color: #293b34;
}
.theme_24 .profileSummary .stampOnline {
color: #1f2724;
}
.theme_24 .profileSections a {
background: rgba(255, 255, 255, 0.7);
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom: 5px solid #ffffff;
}
.theme_24 .profileSections a .text {
color: #002026;
}
/* Weihnachtlich */
.profileImageTheme25 {
background: #83430d;
}
.theme_25 .background {
background: url('//s.jappy.com/i/theme/xmas/bg_profile2.png') no-repeat 0 0 #83430d;
}
.theme_25 .profileBox {
background-size: 100% auto;
background-position: 50% 0;
}
.theme_25 .profileSections a.active {
border-bottom: 5px solid #959181;
}
.theme_25 .profileSections a:hover {
border-bottom: 5px solid #959181;
}
.theme_25 .profileSummary .basicData {
font-weight: 600;
}
.theme_25 .profileSummary .stampOnline {
color: #381c04;
font-weight: 800;
}
/* Frostig */
.profileImageTheme26 {
background: #9e9b8d;
}
.theme_26 .background {
background: url('//s.jappy.com/i/theme/winter/bg_profile2.png') no-repeat 0 0 #322f28;
}
.theme_26 .profileBox {
background-size: 100% auto;
background-position: 50% 0;
}
.theme_26 .profileSections a .text {
color: #232221;
}
.theme_26 .profileSections a.active {
border-bottom: 5px solid #959181;
}
.theme_26 .profileSections a:hover {
border-bottom: 5px solid #959181;
}
.theme_26 .profileSummary .basicData {
color: #232221;
}
.theme_26 .profileSummary .basicData a {
color: #403f3c;
}
.theme_26 .profileSummary .stampOnline {
color: #403f3c;
}
/* Gestrickt */
.profileImageTheme27 {
background: #64213c;
}
.theme_27 .background {
background: url('//s.jappy.com/i/theme/cuddle/bg_profile.png') no-repeat 0 0 #64213c;
}
.theme_27 .profileBox {
background-size: 100% auto;
background-position: 50% 0;
}
.theme_27 .profileSections a.active {
border-bottom: 5px solid #ffffff;
}
.theme_27 .profileSections a:hover {
border-bottom: 5px solid #ffffff;
}
.theme_27 .profileSections a .text {
color: #ffffff;
}
/* Pool Zeit */
.profileImageTheme28 {
background: #64213c;
}
.theme_28 .background {
background: url('//s.jappy.com/i/theme/poolTime.png') no-repeat 0 0 #64213c;
}
.theme_28 .profileBox {
background-size: 100% auto;
background-position: 50% 0;
}
.theme_28 .profileSections a.active {
border-bottom: 5px solid #f3d70d;
}
.theme_28 .profileSections a:hover {
border-bottom: 5px solid #ffffff;
}
.theme_28 .profileSections a {
background: rgba(255, 255, 255, 0.7);
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom: 5px solid #ffffff;
}
.theme_28 .profileSections a .text {
color: #002026;
}
.theme_28 .profileSummary .stampOnline,
.theme_28 .profileSummary .stampOffline {
color: #000000;
text-shadow: 2px 2px #f7dc0d;
}
.theme_28 .profileSummary .basicData {
font-weight: 600;
color: #040404 !important;
}
.theme_28 .profileSummary .basicData a {
color: #040404 !important;
}
/* Farbspritzer */
.profileImageTheme29 {
background: #f2a99a;
}
.theme_29 .background {
background: url('//s.jappy.com/i/theme/colorful.png') no-repeat 0 0 #f2a99a;
}
.theme_29 .profileBox {
background-size: 100% auto;
background-position: 50% 0;
}
.theme_29 .profileSections a.active {
border-bottom: 5px solid #f2a99a;
}
.theme_29 .profileSections a:hover {
border-bottom: 5px solid #f2a99a;
}
.theme_29 .profileSummary .basicData {
font-weight: 600;
color: #040404 !important;
}
.theme_29 .profileSummary .basicData a {
color: #040404 !important;
}
.theme_29 .profileSections a {
background: rgba(255, 255, 255, 0.7);
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom: 5px solid #ffffff;
}
.theme_29 .profileSummary .basicData {
font-weight: 600;
}
.theme_29 .profileSections a .text {
color: #002026;
}
.theme_29 .profileSummary .stampOnline,
.theme_29 .profileSummary .stampOffline {
color: #ffffff;
text-shadow: 2px 2px #6b5ca4;
}
/* Nacht Cocktail */
.profileImageTheme30 {
background: #ffb600;
}
.theme_30 .background {
background: url('//s.jappy.com/i/theme/nightCocktail.png') no-repeat 0 0 #060606;
}
.theme_30 .profileBox {
background-size: 100% auto;
background-position: 50% 0;
}
.theme_30 .profileSections a.active {
border-bottom: 5px solid #ffe938;
}
.theme_30 .profileSections a:hover {
border-bottom: 5px solid #ffe938;
}
.theme_30 .profileSections a {
background: rgba(255, 255, 255, 0.7);
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom: 5px solid #ffffff;
}
.theme_30 .profileSummary .basicData {
font-weight: 600;
}
.theme_30 .profileSections a .text {
color: #002026;
}
.theme_30 .profileSummary .stampOnline,
.theme_30 .profileSummary .stampOffline {
color: #ffffff;
text-shadow: 2px 2px #3d504d;
}
/* Fruchtig */
.profileImageTheme31 {
background: #69b920;
}
.theme_31 .background {
background: url('//s.jappy.com/i/theme/summerCocktail.png') no-repeat 0 0 #ffffff;
}
.theme_31 .profileBox {
background-size: 100% auto;
background-position: 50% 0;
}
.theme_31 .profileSections a.active {
border-bottom: 5px solid #ff225b;
}
.theme_31 .profileSections a:hover {
border-bottom: 5px solid #ffe938;
}
.theme_31 .profileSections a {
background: rgba(255, 255, 255, 0.7);
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom: 5px solid #ffffff;
}
.theme_31 .profileSections a .text {
color: #333333;
}
.theme_31 .profileSummary .basicData {
font-weight: 600;
color: #040404 !important;
}
.theme_31 .profileSummary .basicData a {
color: #040404 !important;
}
.theme_31 .profileSummary .stampOnline,
.theme_31 .profileSummary .stampOffline {
color: #000000;
text-shadow: 2px 2px #f0da2c;
}
/* Narzisse */
.profileImageTheme32 {
background: #2f647d;
}
.theme_32 .background {
background: url('//s.jappy.com/i/theme/narzisse.png') no-repeat 0 0 #ffffff;
}
.theme_32 .profileBox {
background-size: 100% auto;
background-position: 50% 0;
}
.theme_32 .profileSections a.active {
border-bottom: 5px solid #ffe938;
}
.theme_32 .profileSections a:hover {
border-bottom: 5px solid #ffe938;
}
.theme_32 .profileSections a {
background: rgba(255, 255, 255, 0.7);
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom: 5px solid #ffffff;
}
.theme_32 .profileSections a .text {
color: #333333;
}
.theme_32 .profileSummary .basicData {
font-weight: 600;
color: #ffffff;
}
.theme_32 .profileSummary .basicData a {
color: #ffffff;
}
.theme_32 .profileSummary .stampOnline,
.theme_32 .profileSummary .stampOffline {
color: #000000;
text-shadow: 2px 2px #f0da2c;
}
/* Palmen */
.profileImageTheme33 {
background: #ff225b;
}
.theme_33 .background {
background: url('//s.jappy.com/i/theme/vacationPalm.png') no-repeat 0 0 #ffffff;
}
.theme_33 .profileBox {
background-size: 100% auto;
background-position: 50% 0;
}
.theme_33 .profileSections a.active {
border-bottom: 5px solid #62075b;
}
.theme_33 .profileSections a:hover {
border-bottom: 5px solid #62075b;
}
.theme_33 .profileSections a {
background: rgba(255, 255, 255, 0.7);
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom: 5px solid #ffffff;
}
.theme_33 .profileSections a .text {
color: #333333;
}
.theme_33 .profileSummary .stampOnline,
.theme_33 .profileSummary .stampOffline {
color: #000000;
}
.helpCenter {
font-family: "Roboto", "Arial Nova", sans-serif-light, "Open Sans", Arial, sans-serif;
text-align: center;
font-size: 120%;
font-weight: 300;
line-height: 130%;
}
.helpCenter #header {
text-align: center;
padding: 20px;
margin-bottom: 15px;
}
.helpCenter #header h1 {
margin-bottom: 7px;
font-size: 120%;
font-weight: 700;
}
.helpCenter #header h1 a,
.helpCenter #header h1 a:hover,
.helpCenter #header h1 a:active,
.helpCenter #header h1 a:focus {
color: #ffffff !important;
}
.helpCenter .card h2 a,
.helpCenter .card h2 a:hover,
.helpCenter .card h2 a:active,
.helpCenter #header h2 a:focus {
color: #333333 !important;
}
.helpCenter #header input {
width: 250px;
background: #ffffff;
color: #333;
border: 1px solid #adadad;
padding: 12px 20px;
border-radius: 20px;
margin-right: 2px;
}
.helpCenter .card {
border-radius: 20px;
text-align: left;
background: #ffffff;
margin: auto;
margin-bottom: 15px;
padding: 20px;
width: 700px;
line-height: 160%;
}
.helpCenter .card h2 {
padding: 0px;
padding-bottom: 5px;
text-align: center;
text-transform: uppercase;
font-weight: 800;
font-size: 110%;
}
.helpCenter a {
color: #1ec0ff;
}
.helpCenter ul li {
margin: 0px 0px 7px 0px;
}
.helpCenter ul li ul {
margin: 7px 0px 0px 0px;
}
.helpCenter p {
line-height: 1.7;
margin-top: 0.5em;
margin-bottom: 0.75em;
}
.helpCenter p.hint {
background-color: #eee;
border-radius: 5px;
padding: 10px 15px;
line-height: 1.3;
}
.helpCenter strong {
color: #222;
font-weight: 700;
}
.helpCenter i {
color: #222;
font-weight: 700;
font-style: italic;
}
.helpCenter #contact textarea {
display: block;
margin-top: 2em;
border: 1px solid #eee;
background: #fff;
padding: 10px 15px;
width: calc(100% - 30px - 2px);
min-height: 9em;
border-radius: 5px;
}
.helpCenter .actionSelector .button:first-child {
margin-left: 0px;
}
.helpCenter button[disabled] {
opacity: 0.5;
}
.helpCenter button.searchButton {
border-radius: 50%;
height: 42px;
width: 42px;
padding: 10px;
cursor: pointer;
border: 1px solid #e87400;
color: #ffffff;
background: url(//s.jappy.com/i/icon/unity/send.png) no-repeat 50% 50% #ff7f00;
font-weight: 700;
}
.helpCenter button.searchButton:hover {
border: 1px solid #9d4e00;
transition: 0.5s;
}
.helpCenter .box {
padding: 1px;
margin: 7px 0px 21px 0px;
box-shadow: 1px 0 2px rgba(0, 0, 0, 0.15);
border-radius: 3px 3px 0 0;
}
.helpCenter .box .title,
.helpCenter .box .title a {
color: #fff;
font-weight: bold;
margin: 0px;
padding: 7px;
}
.helpCenter .box .title p {
margin: 0px;
padding: 0px;
}
.helpCenter .box .content {
background: #fff;
color: #000;
font-weight: 400;
margin: 0px;
padding: 7px;
}
.helpCenter .box .content p {
margin: 0px;
padding: 7px 0px 0px 0px;
}
.helpCenter .box .content p:first-child {
margin: 0px;
padding: 0px;
}
.helpCenter .box.grey {
background-image: linear-gradient(to top, #dedede 0, #cacaca 100%);
}
.helpCenter .box.grey .title,
.helpCenter .box.grey .title a {
color: #555;
}
.helpCenter .box.pink {
background-image: linear-gradient(to top, #ec0083 0, #ff64c6 100%);
}
.helpCenter .box.red {
background-image: linear-gradient(to top, #ED1400 0, #FF5858 100%);
}
.helpCenter .box.blue {
background-image: linear-gradient(to top, #72ffff 0, #077abd 100%);
}
.helpCenter .box.yellow {
background-image: linear-gradient(to top, #ffd950 0, #ff9133 100%);
}
.helpCenter .box.green {
background-image: linear-gradient(to top, #3cfe42 0, #20c3c3 100%);
}
.helpCenter .box.purple {
background-image: linear-gradient(to top, #AE6289 0, #DE5F9A 100%);
}
.helpCenter .textGrey {
color: #cacaca !important;
}
.helpCenter .textPink {
color: #ff64c6 !important;
}
.helpCenter .textRed {
color: #FF5858 !important;
}
.helpCenter .textBlue {
color: #077abd !important;
}
.helpCenter .textYellow {
color: #ff9133 !important;
}
.helpCenter .textGreen {
color: #3cfe42 !important;
}
.helpCenter .textPurple {
color: #DE5F9A !important;
}
.helpCenter .width-1-3 {
width: 90px;
padding: 7px;
float: left;
overflow: hidden;
}
.helpCenter .taC {
text-align: center;
}
.helpCenter .icon {
height: 1.5em;
}
.helpCenter .darkSilhouette {
filter: grayscale() brightness(-100%);
}
.helpCenter table {
border: 1px solid #eee;
border-collapse: collapse;
}
.helpCenter table thead th {
background-image: linear-gradient(to top, #dedede 0, #cacaca 100%);
color: #555;
line-height: 30px;
font-weight: 700;
text-transform: uppercase;
}
.helpCenter table tbody tr {
border-bottom: 1px solid #eee;
}
.helpCenter table tbody tr:nth-child(odd) {
background: #f8f8f8;
}
.helpCenter table tbody tr:hover {
background: #f4f4f4;
}
.helpCenter table tbody td {
padding: 8px 3px 8px 15px;
vertical-align: top;
}
.helpCenter table tbody th {
background: #dedede;
color: #555;
line-height: 30px;
font-weight: 500;
text-align: center;
}
.helpCenter span.fBox {
padding: 20px;
}
.helpCenter span.fBox.left {
float: left;
}
.helpCenter span.fBox.right {
float: right;
}
.helpCenter span.fBox img {
width: 70px;
}
.helpCenter .linkAsActionButton {
text-align: center;
padding: 20px 0px;
}
.helpCenter .linkAsActionButton a {
padding: 12px;
border-radius: 20px;
background: #1adfdf;
border: 1px solid #18cccc;
text-align: center;
color: #ffffff;
font-weight: 900;
}
.helpCenter .imageFootage {
width: 200px;
margin: auto;
}
.helpCenter .imageFootage img {
width: 200px;
}
.helpCenter .imageFootage .title {
padding: 5px 10px;
color: #999999;
}
.helpCenter .highlight {
background: #f1f1f1;
padding: 15px;
border-radius: 15px;
color: #00b8ff;
line-height: 200%;
}
/* emptyState */
.helpState {
line-height: 180%;
text-align: center;
width: 360px;
margin: auto;
margin-top: 20px;
}
.helpState .wrapper {
width: 300px;
margin: auto;
padding: 10px;
}
.helpState .text {
padding: 10px 15px 15px 15px;
font-size: 110%;
font-weight: 300;
}
.helpState .icon img {
width: 100px;
}
.helpState .headline {
font-size: 140%;
font-weight: bold;
margin-top: 10px;
}
.helpState .button a,
.helpState .button button,
.helpState .button input,
.helpState .button .confirm {
cursor: pointer;
border-radius: 5px;
padding: 15px 20px;
margin: auto;
border: none;
font-size: 100%;
font-weight: 600;
display: block;
color: #ffffff;
background: #ff9933;
text-align: center;
margin-bottom: 10px;
}
.helpState .button a:hover,
.helpState .button button:hover,
.helpState .button .confirm:hover {
text-decoration: underline;
}
.helpState .button button.simple {
background: none;
border: none;
color: #333333;
text-decoration: underline;
}
.helpState .info {
text-align: left;
margin-top: 20px;
background: #ffffff;
border: 2px solid #a3faf6;
border-radius: 20px;
max-width: 320px;
margin: auto;
margin-bottom: 5px;
}
.helpState .info .headline {
text-align: center;
}
.helpState .info .infoText {
padding: 20px;
font-size: 13px;
}
.helpState .info .infoText .problem {
padding: 12px 0;
font-weight: 400;
cursor: pointer;
}
.helpState .info .infoText .problem:hover {
text-decoration: underline;
}
.helpState .info .infoText .answer {
padding: 5px 0;
font-weight: 600;
font-style: italic;
}
.activationInfoLayer .helpState {
background: #ffffff;
border-radius: 20px;
}
@media screen and (max-width: 600px) {
.helpCenter {
width: 100%;
border-radius: 0;
}
.helpCenter .card {
width: 320px;
border-radius: 0;
}
.helpCenter #header input {
width: 200px;
}
}
/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */
/*
Styles for basic PhotoSwipe functionality (sliding area, open/close transitions)
*/
/* pswp = photoswipe */
.pswp {
display: none;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
overflow: hidden;
-ms-touch-action: none;
touch-action: none;
z-index: 2000000;
-webkit-text-size-adjust: 100%;
/* create separate layer, to avoid paint on window.onscroll in webkit/blink */
-webkit-backface-visibility: hidden;
outline: none;
}
.pswp * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.pswp img {
max-width: none;
}
/* style is added when JS option showHideOpacity is set to true */
.pswp--animate_opacity {
/* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
opacity: 0.001;
will-change: opacity;
/* for open/close transition */
-webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
}
.pswp--open {
display: block;
}
.pswp--zoom-allowed .pswp__img {
/* autoprefixer: off */
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;
}
.pswp--zoomed-in .pswp__img {
/* autoprefixer: off */
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: grab;
}
.pswp--dragging .pswp__img {
/* autoprefixer: off */
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
cursor: grabbing;
}
/*
Background is added as a separate element.
As animating opacity is much faster than animating rgba() background-color.
*/
.pswp__bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
will-change: opacity;
}
.pswp__scroll-wrap {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.pswp__container,
.pswp__zoom-wrap {
-ms-touch-action: none;
touch-action: none;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
/* Prevent selection and tap highlights */
.pswp__container,
.pswp__img {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
}
.pswp__zoom-wrap {
position: absolute;
width: 100%;
-webkit-transform-origin: left top;
-ms-transform-origin: left top;
transform-origin: left top;
/* for open/close transition */
-webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
}
.pswp__bg {
will-change: opacity;
/* for open/close transition */
-webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
}
.pswp--animated-in .pswp__bg,
.pswp--animated-in .pswp__zoom-wrap {
-webkit-transition: none;
transition: none;
}
.pswp__container,
.pswp__zoom-wrap {
-webkit-backface-visibility: hidden;
}
.pswp__item {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: hidden;
}
.pswp__img {
position: absolute;
width: auto;
height: auto;
top: 0;
left: 0;
}
/*
stretched thumbnail or div placeholder element (see below)
style is added to avoid flickering in webkit/blink when layers overlap
*/
.pswp__img--placeholder {
-webkit-backface-visibility: hidden;
}
/*
div element that matches size of large image
large image loads on top of it
*/
.pswp__img--placeholder--blank {
background: #222;
}
.pswp--ie .pswp__img {
width: 100% !important;
height: auto !important;
left: 0;
top: 0;
}
/*
Error message appears when image is not loaded
(JS option errorMsg controls markup)
*/
.pswp__error-msg {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
font-size: 14px;
line-height: 16px;
margin-top: -8px;
color: #CCC;
}
.pswp__error-msg a {
color: #CCC;
text-decoration: underline;
}
/*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */
/*
Contents:
1. Buttons
2. Share modal and links
3. Index indicator ("1 of X" counter)
4. Caption
5. Loading indicator
6. Additional styles (root element, top bar, idle state, hidden state, etc.)
*/
/*
1. Buttons
*/
/*