@charset "UTF-8"; :root { --timeline-icon-width: 50px; --timeline-icon-width-mobile: 100px; --header-bg-color: #282c37; --main-bg-color: #282c37; --post-bg-color: #282c37; --column-left-color: #282c37; --link-bg-color: #282c37; --dropdown-fg-color: #dddddd; --dropdown-bg-color: #111; --dropdown-bg-color-hover: #333; --dropdown-fg-color-hover: #dddddd; --main-bg-color-reply: #212c37; --main-bg-color-dm: #222; --main-bg-color-report: #221c27; --main-header-color-roles: #282237; --main-fg-color: #dddddd; --column-left-fg-color: #dddddd; --column-right-fg-color: yellow; --column-right-fg-color-voted-on: red; --main-link-color: #999; --main-link-color-hover: #bbb; --main-visited-color: #888; --border-color: #505050; --border-width: 2px; --border-width-header: 2px; --font-size-header: 18px; --font-size-header-mobile: 32px; --font-color-header: #ccc; --font-size-button-mobile: 34px; --font-size-links: 18px; --font-size-publish-button: 18px; --font-size-newswire: 18px; --font-size-newswire-mobile: 38px; --font-size-dropdown-header: 40px; --font-size-mobile: 50px; --font-size: 30px; --font-size2: 24px; --font-size3: 38px; --font-size4: 22px; --font-size5: 20px; --font-size-likes: 20px; --font-size-likes-mobile: 32px; --font-size-pgp-key: 16px; --font-size-pgp-key2: 18px; --font-size-tox: 16px; --font-size-tox2: 18px; --time-color: #aaa; --time-vertical-align: 4px; --time-vertical-align-mobile: 25px; --publish-button-text: #FFFFFF; --button-margin: 5px; --button-left-margin: none; --button-text: #FFFFFF; --button-selected-text: #FFFFFF; --publish-button-background: #999; --button-background: #999; --button-background-hover: #777; --button-text-hover: white; --button-selected: #666; --button-highlighted: green; --button-fg-highlighted: #FFFFFF; --button-selected-highlighted: darkgreen; --button-approve: darkgreen; --button-deny: darkred; --button-width-chars: 10ch; --button-height: 10px; --button-height-padding-mobile: 20px; --button-height-padding: 10px; --image-corners: 10%; --gallery-border: #ccc; --gallery-hover: #777; --gallery-text-color: #ccc; --gallery-font-size: 22px; --gallery-font-size-mobile: 35px; --button-corner-radius: 15px; --timeline-border-radius: 30px; --timeline-posts-background-color: #282c37; --icons-side: right; --title-color: #999; --focus-color: white; --quote-right-margin: 0.1em; --quote-font-weight: normal; --quote-font-size: 120%; --line-spacing: 130%; --line-spacing-newswire: 120%; --newswire-item-moderated-color: white; --newswire-date-moderated-color: white; --column-left-width: 10vw; --column-center-width: 80vw; --column-right-width: 10vw; --column-left-mobile-margin: 2%; --column-left-top-margin: 0; --column-left-header-style: uppercase; --column-left-header-background: #555; --column-left-header-color: #fff; --column-left-header-size: 20px; --column-left-header-size-mobile: 50px; --column-left-border-width: 0; --column-left-icons-margin: 0; --column-right-border-width: 0; --column-left-border-color: black; --column-left-icon-size: 20%; --column-left-icon-size-mobile: 10%; --column-left-image-width-mobile: 40vw; --column-right-image-width-mobile: 100vw; --column-right-icon-size: 20%; --column-right-icon-size-mobile: 10%; --newswire-date-color: white; --newswire-voted-background-color: black; --login-button-color: #2965; --login-button-fg-color: black; --button-event-corner-radius: 60px; --button-event-background-color: green; --button-event-fg-color: white; --hashtag-background-color: black; --hashtag-fg-color: white; --tab-border-width: 0px; --tab-border-color: grey; --icon-brightness-change: 150%; --container-button-padding: 20px; --header-button-padding: 20px; --container-padding: 2%; --container-padding-bottom: 1%; --container-padding-bottom-mobile: 0%; --vertical-between-posts: 10px; --vertical-between-posts-header: 10px; --containericons-horizontal-spacing: 1%; --containericons-horizontal-spacing-mobile: 3%; --containericons-horizontal-offset: -1%; --likes-count-offset: 5px; --likes-count-offset-mobile: 10px; --publish-button-vertical-offset: 10px; --publish-button-bottom-offset: 10px; --banner-height: 15vh; --banner-height-mobile: 10vh; --post-separator-margin-top: 0; --post-separator-margin-bottom: 0; --post-separator-width: 95%; --separator-width-left: 95%; --separator-width-right: 95%; --post-separator-height: 1px; --header-vertical-offset: 0; --profile-background-height: 25vw; --profile-text-align: left; --verticals-width: 0; --italic-font-style: italic; --header-font: 'Arial, Helvetica, sans-serif'; --button-bottom-margin: 10px; } @font-face { font-family: 'Bedstead'; font-style: var(--italic-font-style); font-weight: normal; font-display: block; src: url('./fonts/bedstead.otf') format('opentype'); } @font-face { font-family: 'Bedstead'; font-style: normal; font-weight: normal; font-display: block; src: url('./fonts/bedstead.otf') format('opentype'); } body, html { background-color: var(--main-bg-color); color: var(--main-fg-color); height: 100%; font-family: Arial, Helvetica, sans-serif; min-width: 950px; font-size: var(--font-size); line-height: var(--line-spacing); } .leftColIcons { width: 100%; background-color: var(--column-left-color); float: right; display: block; padding-bottom: var(--column-left-icons-margin); } .postSeparatorImage img { background-color: transparent; padding-top: var(--post-separator-margin-top); padding-bottom: var(--post-separator-margin-bottom); width: var(--post-separator-width); height: var(--post-separator-height); display: block; } .postSeparatorImageLeft img { background-color: transparent; padding-top: var(--post-separator-margin-top); padding-bottom: var(--post-separator-margin-bottom); width: var(--separator-width-left); height: var(--post-separator-height); display: block; } .postSeparatorImageRight img { background-color: transparent; padding-top: var(--post-separator-margin-top); padding-bottom: var(--post-separator-margin-bottom); width: var(--separator-width-right); height: var(--post-separator-height); display: block; } .headericons { display: inline-block; float: right; } blockquote { border-left: 10px; margin: 1.5em 10px; padding: 0.5em 10px; font-weight: var(--quote-font-weight); font-style: italic; font-size: var(--quote-font-size); quotes: "\201C""\201D""\2018""\2019"; } blockquote:before { content: open-quote; font-size: 2em; line-height: 0.1em; margin-right: 0.25em; vertical-align: -0.4em; } blockquote:after { content: close-quote; font-size: 2em; line-height: 0.1em; margin-left: var(--quote-right-margin); vertical-align: -0.4em; } blockquote p { display: inline; } .voteicon { width: 1.1vw; margin: -4px 5px; } .imageAnchor { font-family: var(--header-font); } .imageAnchor:focus img{ border: 2px solid var(--focus-color); } a, u { color: var(--main-fg-color); } a:visited { color: var(--main-visited-color); background: var(--link-bg-color); font-weight: normal; text-decoration: none; } a:link { color: var(--main-link-color); background: var(--link-bg-color); font-weight: normal; text-decoration: none; } a:link:hover { color: var(--main-link-color-hover); } a:visited:hover { color: var(--main-link-color-hover); } .buttonevent:hover { filter: brightness(var(--icon-brightness-change)); } a:focus { border: 2px solid var(--focus-color); } .profileHeader { font-family: Arial, Helvetica, sans-serif; position: relative; overflow: hidden; margin: 10px; width: 100%; color: #ffffff; text-align: var(--profile-text-align); line-height: 1.4em; background-color: #141414; } .profileHeader .title { border-radius: 50%; position: absolute; bottom: 100%; left: 25px; z-index: 1; max-width: 20%; opacity: 1; box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); } .profileHeader * { -webkit-box-sizing: border-box; box-sizing: border-box; } .profileHeader img.profileBackground { object-fit: cover; max-height: var(--profile-background-height); width: 100%; vertical-align: top; } .profileHeader figcaption { width: 100%; background-color: var(--main-bg-color); color: var(--main-fg-color); padding: 25px; position: relative; } .profileHeader figcaption:before { position: absolute; content: ''; bottom: 100%; left: 0; width: 0; height: 0; border-style: solid; border-width: 55px 0 0 400px; border-color: transparent transparent transparent var(--main-bg-color); } .rssfeed img { width: 5%; float: right; } .about { font-size: var(--font-size5); font-family: Arial, Helvetica, sans-serif; float: right; } .blogreplies { color: var(--button-highlighted); font-size: var(--font-size2); font-family: Arial, Helvetica, sans-serif; float: right; } .buttonprev { float: left; width: 10%; -ms-transform: translateY(30%); transform: translateY(30%); } .buttonnext { float: right; width: 10%; -ms-transform: translateY(30%) scaleX(-1); transform: translateY(30%) scaleX(-1); } .new-post-text { font-size: var(--font-size2); font-family: Arial, Helvetica, sans-serif; padding: 4px 0; } .new-post-subtext { font-size: var(--font-size-header); font-family: Arial, Helvetica, sans-serif; padding: 4px 0; } .highlight { width: 2%; } .roles { text-align: center; left: 35%; background-color: var(--main-header-color-roles); } .roles-inner { padding: 10px 25px; background-color: var(--main-bg-color); } .timelineIcon { width: 10%; } .timeline-posts { background-color: var(--timeline-posts-background-color); } .container img.timelineicon:hover { filter: brightness(var(--icon-brightness-change)); } .containerHeader img.timelineicon:hover { filter: brightness(var(--icon-brightness-change)); } .buttonunfollow:hover { background-color: var(--button-background-hover); color: var(--button-text-hover); } .followRequestHandle { padding: 0px 20px; } .button span { font-family: var(--header-font); cursor: pointer; display: inline-block; position: relative; transition: 1.0s; } .button:hover { background-color: var(--button-background-hover); color: var(--button-text-hover); } .donateButton:hover { background-color: var(--button-background-hover); color: var(--button-text-hover); } .buttonselected span { font-family: var(--header-font); cursor: pointer; display: inline-block; position: relative; transition: 1.0s; } .buttonselected:hover { background-color: var(--button-background-hover); color: var(--button-text-hover); } .containerNewPost { border: var(--border-width) solid var(--border-color); border-radius: var(--timeline-border-radius); background-color: var(--main-bg-color); margin: var(--vertical-between-posts); } .containerSubmitNewPost { border: 0; background-color: var(--main-bg-color); margin: var(--vertical-between-posts); } .media { width: 80%; border-radius: 5px; padding: 10px; margin: 10px 0; } .message { margin-left: 0%; margin-right: 0%; width: 100%; } .addedHashtag:link { background-color: var(--hashtag-background-color); color: var(--hashtag-fg-color); } .addedHashtag:visited { background-color: var(--hashtag-background-color); color: var(--hashtag-fg-color); } .message:focus{ border: 2px solid var(--focus-color); } .message:focus img{ border: 2px solid var(--focus-color); } .gitpatch { width: 90%; font-family: 'monospace'; } .searchEmoji { vertical-align: middle; float: none; width: 80px; margin: 0px 10px; padding: 0px 0px; border-radius: 0px; } .container img.emoji { float: none; width: 50px; margin-left: 0px; margin-right: 0px; padding-right: 0px; border-radius: 0px; vertical-align: middle; } .containericons { padding: 0px 0px; margin: 0px var(--containericons-horizontal-offset); } .replyingto { color: var(--main-fg-color); } .imText { font-size: var(--font-size4); font-family: Arial, Helvetica, sans-serif; color: var(--main-link-color); background: var(--link-bg-color); } .announceOrReply { font-family: var(--header-font); } .container img.announceOrReply { float: none; width: 30px; margin: 0 0; padding: 0 0; border-radius: 0; vertical-align: middle; } .container img.DMicon { float: none; width: 40px; margin: 0 0; padding: 0 0; border-radius: 0; vertical-align: middle; } .darker { background-color: var(--main-bg-color-reply); } .dm { background-color: var(--main-bg-color-dm); } .report { border-color: #255; background-color: var(--main-bg-color-report); } .container img.attachment { max-width: 140%; margin-left: -2%; margin-right: 2%; width: 125%; padding-bottom: 3%; } .container img.right { float: var(--icons-side); margin-left: 0px; margin-right:0; padding: 0 0; margin: 0 0; } .containerHeader img.right { float: var(--icons-side); margin-left: 0px; margin-right:0; padding: 0 0; margin: 0 0; } .containericons img.right { float: var(--icons-side); margin-left: 20px; margin-right: 0; } .containericons img:hover { filter: brightness(var(--icon-brightness-change)); } .post-title { margin-top: 0px; color: #444; } .share-title { margin-top: 0px; color: var(--main-fg-color); } .skill-title { margin-left: 25%; text-align: left; font-size: var(--font-size2); font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: var(--button-selected); line-height: 40px; } #myProgress { float: left; width: 70%; background-color: #f1f1f1; } #myBar { float: left; width: 10%; height: 30px; background-color: var(--button-background); font-family: Arial, Helvetica, sans-serif; } input[type=number] { width: 10%; padding: 12px; border: 1px solid #ccc; border-radius: var(--button-corner-radius); box-sizing: border-box; margin-top: 6px; margin-bottom: 16px; resize: vertical; font-size: var(--font-size-header); font-family: Arial, Helvetica, sans-serif; } .labels { font-size: var(--font-size); font-family: Arial, Helvetica, sans-serif; } .transparent { color: transparent; background: transparent; font-size: 0px; line-height: 0px; height: 0px; } .labelsright { float: right; font-size: var(--font-size); font-family: Arial, Helvetica, sans-serif; } input[type=date] { background-color: var(--main-bg-color-reply); color: var(--main-fg-color); font-size: var(--font-size); font-family: Arial, Helvetica, sans-serif; border: none; } input[type=time] { background-color: var(--main-bg-color-reply); color: var(--main-fg-color); font-size: var(--font-size); font-family: Arial, Helvetica, sans-serif; border: none; } input[type=submit] { background-color: var(--button-background); color: var(--button-text); margin: 10px 10px; padding: 12px 10px; border: none; border-radius: var(--button-corner-radius); cursor: pointer; font-size: var(--font-size-header); font-family: Arial, Helvetica, sans-serif; width: 120px; } .loginButton { background-color: var(--login-button-color); color: var(--login-button-fg-color); float: none; margin: 0px 10px; padding: 12px 40px; border: none; border-radius: var(--button-corner-radius); cursor: pointer; font-size: var(--font-size2); font-family: Arial, Helvetica, sans-serif; opacity: 0.7; } input[type=submit]:hover { background-color: var(--button-background); } .vertical-center { max-width: 90%; min-width: 600px; margin: 0 auto; } .timeline-avatar { margin: 10px auto; padding: 0px 0px; } .timeline-avatar:hover { filter: brightness(120%); } .timeline-avatar-reply { padding: 0px 0px; width: 80%; } .search-result-text { font-size: var(--font-size); font-family: Arial, Helvetica, sans-serif; } .search-result img { width: 7%; padding: 0px 30px; } /* new post dropdown */ .newPostDropdown { position: relative; } .newPostDropdown img { width: var(--font-size-dropdown-header); } .newPostDropdown > input[type="checkbox"] { position: absolute; left: -100vw; } .newPostDropdown > label, .newPostDropdown > a[role="button"] { display: inline-block; padding: 6px 0px; color: var(--dropdown-fg-color); font-size: var(--font-size-dropdown-header); font-family: var(--header-font); line-height: 1.5em; text-decoration: none; border: 0; cursor: pointer; } .newPostDropdown > label:hover, .newPostDropdown > a[role="button"]:hover, .newPostDropdown > a[role="button"]:focus { border-color: var(--dropdown-fg-color-hover); } .newPostDropdown > label:after, .newPostDropdown > a[role="button"]:after { content: ""; font-family: 'Bedstead'; display: inline-block; margin-left: 6px; } .newPostDropdown > ul { position: absolute; z-index: 999; display: block; left: -100vw; top: calc(1.5em + 14px); border: 0; background: var(--dropdown-bg-color); padding: 6px 0; margin: 0; list-style: none; width: 100%; } .newPostDropdown > ul a { display: block; padding: 6px 15px; text-decoration: none; color: var(--dropdown-fg-color); } .newPostDropdown > ul a:hover, .newPostDropdown > ul a:focus { color: var(--dropdown-fg-color-hover); background: var(--dropdown-bg-color-hover); } .newPostDropdown > input[type="checkbox"]:checked ~ ul, .newPostDropdown > ul:target { left: 0; } .newPostDropdown > [type="checkbox"]:checked + label:after, .newPostDropdown > ul:target ~ a:after { content: "↴"; } .newPostDropdown a.close { display: none; } .newPostDropdown > ul:target ~ a.close { display: block; position: absolute; left: 0; top: 0; height: 100%; width: 100%; text-indent: -100vw; z-index: 1000; } .newPostDropdown + h2 { margin-top: 60px; } .slider { -webkit-appearance: none; width: 57%; height: 25px; background: #d3d3d3; outline: none; opacity: 0.7; -webkit-transition: .2s; transition: opacity .2s; float: right; margin: 5px 0; padding: 12px 0; } .slider:hover { opacity: 1; } .slider::-moz-range-thumb { width: 25px; height: 25px; background: var(--main-bg-color); cursor: pointer; } .dropbtn { margin: 3%; padding: 0px 14px; position: relative; display: inline-block; border: none; cursor: pointer; } .dropbtn img { opacity: 1.0; width: 3%; height: 3%; min-width: 40px; -ms-transform: translateY(10%); transform: translateY(10%); } div.gallery:hover { border: 1px solid var(--gallery-hover); } div.gallery img { width: 100%; height: auto; } .invisible { color: transparent; font-size: 0; font-family: Arial, Helvetica, sans-serif; } .gallerytext { text-decoration: none; } li { list-style:none;} /***********BUTTON CODE ******************************************************/ .btn { margin: -3px 0 0 0; } div.containerHeader { overflow: auto; } div.container { overflow: hidden; } .accountInfoDomains { margin: 0 20%; } @media screen and (min-width: 400px) { body, html { background-color: var(--main-bg-color); color: var(--main-fg-color); height: 100%; font-family: Arial, Helvetica, sans-serif; min-width: 950px; font-size: var(--font-size); line-height: var(--line-spacing); } h1 { font-family: var(--header-font); font-size: var(--font-size); color: var(--title-color); } .containerHeader { border: var(--border-width-header) solid var(--border-color); background-color: var(--header-bg-color); border-radius: var(--timeline-border-radius); padding: var(--header-button-padding); margin: var(--vertical-between-posts-header); transform: translateY(var(--header-vertical-offset)); margin-bottom: var(--button-bottom-margin); } .container { border: var(--border-width) solid var(--border-color); background-color: var(--post-bg-color); border-radius: var(--timeline-border-radius); padding-left: var(--container-padding); padding-right: var(--container-padding); padding-top: var(--container-padding); padding-bottom: var(--container-padding-bottom); margin: var(--vertical-between-posts); } h3.linksHeader { background-color: var(--column-left-header-background); color: var(--column-left-header-color); font-family: var(--header-font); font-size: var(--column-left-header-size); text-transform: var(--column-left-header-style); border: none; } .newswireItem { padding-top: 0; margin-top: 0; font-size: var(--font-size-newswire); color: var(--column-right-fg-color); line-height: var(--line-spacing-newswire); } .newswireItemModerated { font-size: var(--font-size-newswire); color: var(--newswire-item-moderated-color); line-height: var(--line-spacing-newswire); } .newswireDateModerated { font-size: var(--font-size-newswire); font-weight: bold; color: var(--newswire-date-moderated-color); float: right; } .newswireItemVotedOn a:link { background: var(--newswire-voted-background-color); } .newswireItemVotedOn { font-size: var(--font-size-newswire); font-weight: bold; color: var(--column-right-fg-color-voted-on); line-height: var(--line-spacing-newswire); } .newswireDate { font-size: var(--font-size-newswire); color: var(--newswire-date-color); float: right; } .newswireDateVotedOn { font-size: var(--font-size-newswire); font-weight: bold; color: var(--column-right-fg-color-voted-on); float: right; } .imageAnchorMobile img { display: none; } .timeline-banner { vertical-align: top; object-fit: cover; width: 100%; max-height: var(--banner-height); } .timeline { border: 0; width: 100%; } .col-left a:link { background: var(--column-left-color); } .col-left a:visited { background: var(--column-left-color); } .column-left { background-color: var(--column-left-color); width: var(--column-left-width); } .col-left { margin-top: var(--column-left-top-margin); border: var(--column-left-border-width) solid var(--column-left-border-color); color: var(--column-left-fg-color); font-size: var(--font-size-links); float: left; width: var(--column-left-width); } .col-left img.leftColEditImage:hover { filter: brightness(var(--icon-brightness-change)); } .col-left img.leftColEdit { background: var(--column-left-color); width: var(--column-left-icon-size); } .col-left img.leftColEditImage { width: var(--column-left-icon-size); float: right; } .col-left img.leftColImg { background: var(--column-left-color); width: 100%; margin: 0 0; padding: 0 0; } .column-center { width: var(--column-center-width); } .col-center { width: var(--column-center-width); background-color: var(--main-bg-color); border-bottom: none; border-top: none; border-left: var(--verticals-width) solid var(--tab-border-color); border-right: var(--verticals-width) solid var(--tab-border-color); } .col-right a:link { background: var(--column-left-color); } .col-right a:visited { background: var(--column-left-color); } .column-right { background-color: var(--column-left-color); width: var(--column-right-width); overflow: hidden; } .col-right { border: var(--column-right-border-width) solid var(--column-left-border-color); background-color: var(--column-left-color); color: var(--column-left-fg-color); font-size: var(--font-size-links); width: var(--column-right-width); overflow: hidden; } .col-right img.rightColEditImage:hover { filter: brightness(var(--icon-brightness-change)); } .col-right img.rightColEdit { background: transparent; width: var(--column-right-icon-size); } .col-right img.rightColEditImage { background: transparent; width: var(--column-right-icon-size); float: right; } .col-right img.rightColImg { background: var(--column-left-color); width: 100%; margin: 0 0; padding: 0 0; } .likesCount { font-size: var(--font-size-likes); font-family: Arial, Helvetica, sans-serif; float: right; padding: 10px 0; transform: translateX(var(--likes-count-offset)); font-weight: bold; } .container p.administeredby { font-size: var(--font-size-header); font-family: Arial, Helvetica, sans-serif; } .toxaddr { font-size: var(--font-size-tox); font-family: Arial, Helvetica, sans-serif; } .ssbaddr { font-size: var(--font-size-pgp-key); font-family: Arial, Helvetica, sans-serif; } .pgp { font-size: var(--font-size-pgp-key); color: var(--main-link-color); background: var(--link-bg-color); font-family: 'monospace'; } body, html { font-size: var(--font-size4); font-family: Arial, Helvetica, sans-serif; } .galleryContainer { display: grid; grid-template-columns: 50% 50%; grid-column-gap: 5px; background-color: var(--main-bg-color); } div.gallerytext { color: var(--gallery-text-color); font-size: var(--gallery-font-size); font-family: Arial, Helvetica, sans-serif; } div.gallery { margin: 5px 1.5%; border: 1px solid var(--gallery-border); float: left; width: 95%; object-fit: scale-down; } div.imagedesc { padding: 22px; text-align: center; } .container img { float: left; max-width: 400px; width: 5%; padding: 0px 7px; margin-right: 20px; border-radius: var(--image-corners); } .containerHeader img { float: left; max-width: 400px; width: 5%; padding: 0px 7px; margin-right: 20px; border-radius: var(--image-corners); } .container img.emojisearch { width: 15%; float: right; } .container img.emojicalendar { float: left; max-width: 400px; width: 8%; -ms-transform: translateY(-25%); transform: translateY(-25%); } .container img.timelineicon { float: var(--icons-side); margin-left: 0px; margin-right: 0px; padding: 0px 0px; margin: 0px 0px; width: var(--timeline-icon-width); } .containerHeader img.timelineicon { float: var(--icons-side); margin-left: 0px; margin-right:0; padding: 0 0; margin: 0 0; width: var(--timeline-icon-width); } .container img.emojiheader { float: none; width: 25px; margin-left: 0px; margin-right: 0px; padding-right: 0px; border-radius: 0px; vertical-align: middle; } .containericons img { float: var(--icons-side); max-width: 200px; width: 3%; margin: 0px var(--containericons-horizontal-spacing); margin-right: 0px; border-radius: 0%; } div.mediaicons img { float: right; max-width: 200px; width: 6%; margin: 0px 1%; border-radius: 0%; } div.mediaavatar img { float: left; max-width: 200px; width: 5%; margin: 0px 1%; border-radius: 0%; } .timeline-avatar img { opacity: 1.0; width: 8%; height: 8%; padding: 0px 0px; -ms-transform: translateY(-10%); transform: translateY(-10%); } .buttonevent { border-radius: var(--button-event-corner-radius); background-color: var(--button-event-background-color); border: none; color: var(--button-event-fg-color); text-align: center; font-size: var(--font-size-header); font-family: Arial, Helvetica, sans-serif; padding: var(--button-height-padding); transition: all 0.5s; cursor: pointer; margin: 5px; } .frontPageMobileButtons{ display: none; } .buttonMobile { background: transparent; border: none !important; font-size: 0; padding-left: 0; padding-right: 0; border-left-width: 0; border-right-width: 0; white-space: nowrap; overflow: hidden; } .button { border-radius: var(--button-corner-radius); background-color: var(--button-background); color: var(--button-text); text-align: center; font-size: var(--font-size-header); font-family: var(--header-font); padding: var(--button-height-padding); width: 10%; margin: var(--button-margin); min-width: var(--button-width-chars); transition: all 0.5s; cursor: pointer; border-top: var(--tab-border-width) solid var(--tab-border-color); border-bottom: none; border-left: var(--tab-border-width) solid var(--tab-border-color); border-right: var(--tab-border-width) solid var(--tab-border-color); margin-bottom: var(--button-bottom-margin); margin-left: var(--button-left-margin); } .buttonDesktop { border-radius: var(--button-corner-radius); background-color: var(--button-background); color: var(--button-text); text-align: center; font-size: var(--font-size-header); font-family: var(--header-font); padding: var(--button-height-padding); width: 10%; margin: 5px; min-width: var(--button-width-chars); transition: all 0.5s; cursor: pointer; border-top: var(--tab-border-width) solid var(--tab-border-color); border-bottom: none; border-left: var(--tab-border-width) solid var(--tab-border-color); border-right: var(--tab-border-width) solid var(--tab-border-color); margin-bottom: var(--button-bottom-margin); margin-left: var(--button-left-margin); } .publishbtn { border-radius: var(--button-corner-radius); background-color: var(--publish-button-background); border: none; color: var(--publish-button-text); text-align: center; font-size: var(--font-size-publish-button); font-family: Arial, Helvetica, sans-serif; padding: var(--button-height-padding); width: 10%; max-width: 200px; min-width: var(--button-width-chars); transition: all 0.5s; cursor: pointer; margin: 0 0px; margin-top: var(--publish-button-vertical-offset); margin-bottom: var(--publish-button-bottom-offset); } .buttonhighlighted { border-radius: var(--button-corner-radius); background-color: var(--button-highlighted); border: none; color: var(--button-fg-highlighted); text-align: center; font-size: var(--font-size-header); font-family: Arial, Helvetica, sans-serif; padding: var(--button-height-padding); width: 10%; max-width: 100px; min-width: var(--button-width-chars); transition: all 0.5s; cursor: pointer; margin: 5px; } .buttonselected { border-radius: var(--button-corner-radius); background-color: var(--button-selected); color: var(--button-selected-text); text-align: center; font-size: var(--font-size-header); font-family: var(--header-font); padding: var(--button-height-padding); width: 10%; margin: var(--button-margin); min-width: var(--button-width-chars); transition: all 0.5s; cursor: pointer; border-top: var(--tab-border-width) solid var(--tab-border-color); border-bottom: none; border-left: var(--tab-border-width) solid var(--tab-border-color); border-right: var(--tab-border-width) solid var(--tab-border-color); margin-bottom: var(--button-bottom-margin); margin-left: var(--button-left-margin); } .buttonselectedhighlighted { border-radius: var(--button-corner-radius); background-color: var(--button-selected-highlighted); border: none; color: var(--button-text); text-align: center; font-size: var(--font-size-header); font-family: var(--header-font); padding: var(--button-height-padding); width: 10%; max-width: 100px; min-width: var(--button-width-chars); transition: all 0.5s; cursor: pointer; margin: 5px; } .followApprove { border-radius: var(--button-corner-radius); background-color: var(--button-approve); border: none; color: #FFFFFF; text-align: center; font-size: var(--font-size-header); font-family: Arial, Helvetica, sans-serif; padding: var(--button-height-padding); width: 20%; max-width: 200px; min-width: 80px; cursor: pointer; margin: 0 5px; float: right; } .followDeny { border-radius: var(--button-corner-radius); background-color: var(--button-deny); border: none; color: #FFFFFF; text-align: center; font-size: var(--font-size-header); font-family: Arial, Helvetica, sans-serif; padding: var(--button-height-padding); width: 20%; max-width: 200px; min-width: 80px; cursor: pointer; margin: 0 5px; float: right; } .pageicon { width: 4%; background-color: var(--post-bg-color); } .time-right { float: var(--icons-side); color: var(--time-color); margin: var(--time-vertical-align) 20px; } input[type=text], select, textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: var(--button-corner-radius); box-sizing: border-box; margin-top: 6px; margin-bottom: 16px; resize: vertical; font-size: var(--font-size2); font-family: Arial, Helvetica, sans-serif; background-color: var(--main-bg-color-reply); color: var(--main-fg-color); } input[type=button], input[type=submit] { background-color: var(--button-background); color: var(--button-text); padding: var(--button-height-padding); display: inline-block; margin: 15px; border: none; border-radius: var(--button-corner-radius); cursor: pointer; font-size: var(--font-size); font-family: Arial, Helvetica, sans-serif; width: 20%; } .question { font-size: var(--font-size); font-family: Arial, Helvetica, sans-serif; } .questionresult { font-size: var(--font-size); font-family: Arial, Helvetica, sans-serif; } input[type=radio] { font-size: var(--font-size); font-family: Arial, Helvetica, sans-serif; width: 32px; vertical-align: middle; margin-right: 20px; } input.vote[type=submit] { background-color: var(--button-background); color: var(--button-text); float: left; padding: var(--button-height-padding); margin: 15px; border: none; border-radius: var(--button-corner-radius); cursor: pointer; font-size: var(--font-size); font-family: Arial, Helvetica, sans-serif; width: 20%; } input[type=file] { background-color: var(--button-background); color: var(--button-text); padding: 20px; margin: 0px; border: none; border-radius: var(--button-corner-radius); cursor: pointer; font-size: var(--font-size); font-family: Arial, Helvetica, sans-serif; width: 96%; } .cancelbtn { background-color: var(--button-background); color: var(--button-text); padding: var(--button-height-padding); margin: 15px; border: none; display: inline-block; border-radius: var(--button-corner-radius); cursor: pointer; font-size: var(--font-size); font-family: Arial, Helvetica, sans-serif; width: 20%; } .scope-desc { font-size: var(--font-size3); font-family: Arial, Helvetica, sans-serif; } .buttonunfollow { border-radius: var(--button-corner-radius); background-color: var(--button-background); border: none; color: var(--button-text); text-align: center; font-size: var(--font-size-header); font-family: Arial, Helvetica, sans-serif; padding: var(--button-height-padding); width: 20%; max-width: 200px; min-width: 100px; transition: all 0.5s; cursor: pointer; margin: 5px; float: right; } .license { float: right; margin: 0% 1%; width: 10%; } .donateButton { background-color: var(--button-background); color: var(--button-text); float: none; margin: 0px 10px; padding: 12px 40px; border: none; border-radius: var(--button-corner-radius); cursor: pointer; font-size: var(--font-size2); font-family: Arial, Helvetica, sans-serif; opacity: 0.7; } input[type=checkbox] { -ms-transform: scale(2); -moz-transform: scale(2); -webkit-transform: scale(2); -o-transform: scale(2); transform: scale(2); padding: 10px; margin: 20px 30px; } input[type=radio] { -ms-transform: scale(2); -moz-transform: scale(2); -webkit-transform: scale(2); -o-transform: scale(2); transform: scale(2); padding: 10px; margin: 20px 30px; } input[type=number] { -ms-transform: scale(2); -moz-transform: scale(2); -webkit-transform: scale(2); -o-transform: scale(2); transform: scale(2); padding: 10px; margin: 20px 60px; } .columnIcons img { float: right; } } @media screen and (min-width: 2200px) { .galleryContainer { display: grid; grid-template-columns: 33% 33% 33%; grid-column-gap: 5px; background-color: var(--main-bg-color); } } @media screen and (max-width: 1000px) { body, html { background-color: var(--main-bg-color); color: var(--main-fg-color); height: 100%; font-family: Arial, Helvetica, sans-serif; min-width: 950px; margin-left: 0; font-size: var(--font-size); line-height: var(--line-spacing); } h1 { font-family: var(--header-font); font-size: var(--font-size-mobile); color: var(--title-color); } .containerHeader { border: var(--border-width-header) solid var(--border-color); background-color: var(--header-bg-color); border-radius: var(--timeline-border-radius); padding: var(--header-button-padding); margin: var(--vertical-between-posts-header); transform: translateY(0%); margin-bottom: var(--button-bottom-margin); } .container { border: var(--border-width) solid var(--border-color); background-color: var(--post-bg-color); border-radius: var(--timeline-border-radius); padding-left: var(--container-padding); padding-right: var(--container-padding); padding-top: var(--container-padding); padding-bottom: var(--container-padding-bottom-mobile); margin: var(--vertical-between-posts); } h3.linksHeader { background-color: var(--column-left-header-background); color: var(--column-left-header-color); font-family: var(--header-font); font-size: var(--column-left-header-size-mobile); text-transform: var(--column-left-header-style); border: none; } .leftColEditImage { background: var(--main-bg-color); width: var(--column-left-icon-size-mobile); float: right; margin: 20px 0px; } .leftColImg { background: var(--main-bg-color); width: var(--column-left-image-width-mobile); float: right; margin: 0 0; padding: 0 0; } .rightColEditImage { background: var(--main-bg-color); width: var(--column-right-icon-size-mobile); float: right; margin: 20px 0px; } .rightColImg { background: var(--main-bg-color); width: var(--column-right-image-width-mobile); float: right; margin: 0 0; padding: 0 0; } .newswireItem { padding-top: 0; margin-top: 0; font-size: var(--font-size-newswire-mobile); color: var(--column-right-fg-color); line-height: var(--line-spacing-newswire); } .newswireItemModerated { font-size: var(--font-size-newswire-mobile); color: var(--newswire-item-moderated-color); line-height: var(--line-spacing-newswire); } .newswireDateModerated { font-size: var(--font-size-newswire-mobile); font-weight: bold; color: var(--newswire-date-moderated-color); float: right; } .newswireItemVotedOn a:link { background: var(--newswire-voted-background-color); } .newswireItemVotedOn { font-size: var(--font-size-newswire-mobile); font-weight: bold; color: var(--column-right-fg-color-voted-on); line-height: var(--line-spacing-newswire); } .newswireDate { font-size: var(--font-size-newswire-mobile); color: var(--newswire-date-color); float: right; } .newswireDateVotedOn { font-size: var(--font-size-newswire-mobile); font-weight: bold; color: var(--column-right-fg-color-voted-on); float: right; } .imageAnchorMobile img { display: inline; } .timeline-banner { vertical-align: top; object-fit: cover; width: 98vw; max-height: var(--banner-height-mobile); } .timeline { border: 0; width: 100vw; table-layout: fixed; overflow: hidden; } .column-left { display: none; width: 0%; } .col-left-mobile { margin-left: var(--column-left-mobile-margin); } .col-left { float: left; width: 0%; display: none; } .col-center { width: 100vw; } .col-right-mobile { margin-left: var(--column-left-mobile-margin); margin-right: var(--column-left-mobile-margin); } .col-right { float: right; width: 0%; display: none; } .column-right { display: none; width: 0%; } .column-center { width: 100%; } .likesCount { font-size: var(--font-size-likes-mobile); font-family: Arial, Helvetica, sans-serif; float: right; padding: 32px 0; transform: translateX(var(--likes-count-offset-mobile)); font-weight: bold; } .container p.administeredby { font-size: var(--font-size-tox2); font-family: Arial, Helvetica, sans-serif; } .toxaddr { font-size: var(--font-size-tox2); font-family: Arial, Helvetica, sans-serif; } .ssbaddr { font-size: var(--font-size-pgp-key2); font-family: Arial, Helvetica, sans-serif; } .pgp { font-size: var(--font-size-pgp-key2); color: var(--main-link-color); background: var(--link-bg-color); font-family: 'monospace'; } body, html { font-size: var(--font-size3); font-family: Arial, Helvetica, sans-serif; } div.gallerytext { color: var(--gallery-text-color); font-size: var(--gallery-font-size-mobile); font-family: Arial, Helvetica, sans-serif; } .galleryContainer { display: grid; grid-template-columns: auto; background-color: var(--main-bg-color); } div.gallery { margin: 5px 1.5%; border: 1px solid var(--gallery-border); float: left; width: 98%; } div.imagedesc { padding: 35px; text-align: center; } .container img { float: left; max-width: 400px; width: 15%; padding: 0px 7px; margin-right: 20px; border-radius: var(--image-corners); } .containerHeader img { float: left; max-width: 400px; width: 15%; padding: 0px 7px; margin-right: 20px; border-radius: var(--image-corners); } .container img.emojisearch { width: 25%; float: right; } .container img.emojicalendar { float: left; max-width: 400px; width: 12%; -ms-transform: translateY(-25%); transform: translateY(-25%); } .container img.timelineicon { float: var(--icons-side); margin-left: 0px; margin-right: 0px; padding: 0px 0px; margin: 0px 0px; width: var(--timeline-icon-width-mobile); } .containerHeader img.timelineicon { float: var(--icons-side); margin-left: 0px; margin-right:0; padding: 0 0; margin: 0 0; width: var(--timeline-icon-width-mobile); } .container img.emojiheader { float: none; width: 45px; margin-left: 0px; margin-right: 0px; padding-right: 0px; border-radius: 0px; vertical-align: middle; } div.mediaavatar img { float: left; max-width: 200px; width: 8%; margin: 0px 1%; border-radius: 0%; } div.mediaicons img { float: right; max-width: 200px; width: 10%; margin: 0px 1%; border-radius: 0%; } .containericons img { float: var(--icons-side); max-width: 200px; width: 7%; margin: 1% var(--containericons-horizontal-spacing-mobile); margin-right: 0px; border-radius: 0%; } .timeline-avatar img { opacity: 1.0; width: 15%; height: 15%; padding: 0px 0px; -ms-transform: translateY(-10%); transform: translateY(-10%); } .buttonevent { border-radius: var(--button-event-corner-radius); background-color: var(--button-event-background-color); border: none; color: var(--button-event-fg-color); text-align: center; font-size: var(--font-size-button-mobile); font-family: Arial, Helvetica, sans-serif; padding: var(--button-height-padding-mobile); transition: all 0.5s; cursor: pointer; margin: 15px; } .button { border-radius: var(--button-corner-radius); background-color: var(--button-background); color: var(--button-text); text-align: center; font-size: var(--font-size-button-mobile); font-family: var(--header-font); padding: var(--button-height-padding-mobile); width: 20%; min-width: var(--button-width-chars); transition: all 0.5s; cursor: pointer; margin: var(--button-margin); border-top: var(--tab-border-width) solid var(--tab-border-color); border-bottom: none; border-left: var(--tab-border-width) solid var(--tab-border-color); border-right: var(--tab-border-width) solid var(--tab-border-color); margin-bottom: var(--button-bottom-margin); } .frontPageMobileButtons{ display: block; border: var(--border-width-header) solid var(--border-color); background-color: var(--main-bg-color); border-radius: var(--timeline-border-radius); padding: var(--container-button-padding); margin: var(--vertical-between-posts-header); } .frontPageMobileButtons img { float: right; max-width: 400px; width: 10%; padding: 0px 7px; margin-right: 20px; } .buttonMobile { border-radius: var(--button-corner-radius); background-color: var(--button-background); color: var(--button-text); text-align: center; font-size: var(--font-size-button-mobile); font-family: Arial, Helvetica, sans-serif; padding: var(--button-height-padding-mobile); width: 20%; min-width: var(--button-width-chars); transition: all 0.5s; cursor: pointer; margin: var(--button-margin); border-top: var(--tab-border-width) solid var(--tab-border-color); border-bottom: none; border-left: var(--tab-border-width) solid var(--tab-border-color); border-right: var(--tab-border-width) solid var(--tab-border-color); margin-bottom: var(--button-bottom-margin); } .buttonDesktop { background: transparent; border: none !important; font-size: 0; padding-left: 0; padding-right: 0; border-left-width: 0; border-right-width: 0; white-space: nowrap; overflow: hidden; } .publishbtn { border-radius: var(--button-corner-radius); background-color: var(--publish-button-background); border: none; color: var(--publish-button-text); text-align: center; font-size: var(--font-size-newswire-mobile); font-family: Arial, Helvetica, sans-serif; padding: var(--button-height-padding-mobile); width: 20%; max-width: 400px; min-width: var(--button-width-chars); transition: all 0.5s; cursor: pointer; margin: 15px 0px; } .buttonhighlighted { border-radius: var(--button-corner-radius); background-color: var(--button-highlighted); border: none; color: var(--button-fg-highlighted); text-align: center; font-size: var(--font-size-button-mobile); font-family: Arial, Helvetica, sans-serif; padding: var(--button-height-padding-mobile); width: 20%; max-width: 400px; min-width: var(--button-width-chars); transition: all 0.5s; cursor: pointer; margin: 15px; } .buttonselected { border-radius: var(--button-corner-radius); background-color: var(--button-selected); color: var(--button-selected-text); text-align: center; font-size: var(--font-size-button-mobile); font-family: var(--header-font); padding: var(--button-height-padding-mobile); width: 20%; min-width: var(--button-width-chars); transition: all 0.5s; cursor: pointer; margin: var(--button-margin); border-top: var(--tab-border-width) solid var(--tab-border-color); border-bottom: none; border-left: var(--tab-border-width) solid var(--tab-border-color); border-right: var(--tab-border-width) solid var(--tab-border-color); margin-bottom: var(--button-bottom-margin); } .buttonselectedhighlighted { border-radius: var(--button-corner-radius); background-color: var(--button-selected-highlighted); border: none; color: var(--button-text); text-align: center; font-size: var(--font-size-button-mobile); font-family: var(--header-font); padding: var(--button-height-padding-mobile); width: 20%; max-width: 400px; min-width: var(--button-width-chars); transition: all 0.5s; cursor: pointer; margin: 15px; } .followApprove { border-radius: var(--button-corner-radius); background-color: var(--button-approve); border: none; color: #FFFFFF; text-align: center; font-size: var(--font-size3); font-family: Arial, Helvetica, sans-serif; padding: var(--button-height-padding-mobile); width: 20%; max-width: 400px; min-width: 80px; cursor: pointer; margin: 0 15px; float: right; } .followDeny { border-radius: var(--button-corner-radius); background-color: var(--button-deny); border: none; color: #FFFFFF; text-align: center; font-size: var(--font-size3); font-family: Arial, Helvetica, sans-serif; padding: var(--button-height-padding-mobile); width: 20%; max-width: 400px; min-width: 80px; cursor: pointer; margin: 0 15px; float: right; } .pageicon { width: 14%; background-color: var(--post-bg-color); } .time-right { float: var(--icons-side); color: var(--time-color); margin: var(--time-vertical-align-mobile) 20px; } input[type=text], select, textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: var(--button-corner-radius); box-sizing: border-box; margin-top: 6px; margin-bottom: 16px; resize: vertical; font-size: var(--font-size3); font-family: Arial, Helvetica, sans-serif; background-color: var(--main-bg-color-reply); color: var(--main-fg-color); } input[type=button], input[type=submit] { background-color: var(--button-background); color: var(--button-text); display: inline-block; padding: var(--button-height-padding-mobile); margin: 15px; border: none; border-radius: var(--button-corner-radius); cursor: pointer; font-size: var(--font-size3); font-family: Arial, Helvetica, sans-serif; width: 20%; } .question { font-size: var(--font-size3); font-family: Arial, Helvetica, sans-serif; } .questionresult { font-size: var(--font-size3); font-family: Arial, Helvetica, sans-serif; } input[type=radio] { font-size: var(--font-size3); font-family: Arial, Helvetica, sans-serif; height: 90px; vertical-align: middle; margin-right: 20px; } input.vote[type=submit] { background-color: var(--button-background); color: var(--button-text); float: left; padding: var(--button-height-padding-mobile); margin: 15px; border: none; border-radius: var(--button-corner-radius); cursor: pointer; font-size: var(--font-size3); font-family: Arial, Helvetica, sans-serif; width: 20%; } input[type=file] { background-color: var(--button-background); color: var(--button-text); padding: 20px; margin: 0px; border: none; border-radius: var(--button-corner-radius); cursor: pointer; font-size: var(--font-size3); font-family: Arial, Helvetica, sans-serif; width: 95.4%; } .cancelbtn { background-color: var(--button-background); color: var(--button-text); display: inline-block; padding: var(--button-height-padding-mobile); margin: 15px; border: none; border-radius: var(--button-corner-radius); cursor: pointer; font-size: var(--font-size3); font-family: Arial, Helvetica, sans-serif; width: 20%; } .scope-desc { font-size: var(--font-size3); font-family: Arial, Helvetica, sans-serif; } .buttonunfollow { border-radius: var(--button-corner-radius); background-color: var(--button-background); border: none; color: var(--button-text); text-align: center; font-size: var(--font-size-button-mobile); font-family: Arial, Helvetica, sans-serif; padding: var(--button-height-padding-mobile); width: 20%; max-width: 200px; min-width: 100px; transition: all 0.5s; cursor: pointer; margin: 5px; float: right; } .license { float: right; margin: 0% 1%; width: 20%; } .donateButton { background-color: var(--button-background); color: var(--button-text); float: none; margin: 0px 10px; padding: 12px 40px; border: none; border-radius: var(--button-corner-radius); cursor: pointer; font-size: var(--font-size3); font-family: Arial, Helvetica, sans-serif; opacity: 0.7; } input[type=checkbox] { -ms-transform: scale(4); -moz-transform: scale(4); -webkit-transform: scale(4); -o-transform: scale(4); transform: scale(4); padding: 20px; margin: 30px 40px; } input[type=radio] { -ms-transform: scale(2); -moz-transform: scale(2); -webkit-transform: scale(2); -o-transform: scale(2); transform: scale(2); padding: 20px; margin: 30px 40px; } input[type=number] { -ms-transform: scale(2); -moz-transform: scale(2); -webkit-transform: scale(2); -o-transform: scale(2); transform: scale(2); padding: 10px; margin: 40px 80px; } .columnIcons img { width: 10%; float: right; margin-right: 1vw; } }