diff --git a/blog.py b/blog.py
index ace08e28..fb72867d 100644
--- a/blog.py
+++ b/blog.py
@@ -301,9 +301,9 @@ def htmlBlogPost(authorized: bool,
"""
blogStr = ''
- cssFilename = baseDir + '/epicyon-profile.css'
- if os.path.isfile(baseDir + '/epicyon.css'):
- cssFilename = baseDir + '/epicyon.css'
+ cssFilename = baseDir + '/epicyon-blog.css'
+ if os.path.isfile(baseDir + '/blog.css'):
+ cssFilename = baseDir + '/blog.css'
with open(cssFilename, 'r') as cssFile:
blogCSS = cssFile.read()
blogStr = htmlHeader(cssFilename, blogCSS)
diff --git a/epicyon-blog.css b/epicyon-blog.css
new file mode 100644
index 00000000..3329011a
--- /dev/null
+++ b/epicyon-blog.css
@@ -0,0 +1,1283 @@
+@charset "UTF-8";
+
+:root {
+ --main-bg-color: #282c37;
+ --dropdown-bg-color: #111;
+ --dropdown-bg-color-hover: #333;
+ --main-bg-color-reply: #212c37;
+ --main-bg-color-dm: #222;
+ --main-bg-color-report: #221c27;
+ --main-header-color-roles: #282237;
+ --main-fg-color: #dddddd;
+ --main-link-color: #999;
+ --main-visited-color: #888;
+ --border-color: #505050;
+ --font-size-header: 18px;
+ --font-color-header: #ccc;
+ --font-size-button-mobile: 34px;
+ --font-size: 30px;
+ --font-size2: 24px;
+ --font-size3: 38px;
+ --font-size4: 22px;
+ --font-size5: 20px;
+ --text-entry-foreground: #ccc;
+ --text-entry-background: #111;
+ --time-color: #aaa;
+ --button-text: #FFFFFF;
+ --button-background: #999;
+ --button-selected: #666;
+ --button-highlighted: green;
+ --button-selected-highlighted: darkgreen;
+ --button-approve: darkgreen;
+ --button-deny: darkred;
+ --button-height: 10px;
+ --button-height-padding-mobile: 20px;
+ --button-height-padding: 10px;
+ --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;
+}
+
+body, html {
+ background-color: var(--main-bg-color);
+ color: var(--main-fg-color);
+
+ height: 100%;
+ font-family: "Times New Roman", Times, serif;
+ max-width: 80%;
+ min-width: 950px;
+ margin: 0 auto;
+ font-size: var(--font-size);
+}
+
+a, u {
+ color: var(--main-fg-color);
+}
+
+a:visited{
+ color: var(--main-visited-color);
+ font-weight: bold;
+}
+
+a:link {
+ color: var(--main-link-color);
+ font-weight: bold;
+}
+
+.cwText {
+ display: none;
+}
+
+.timeline-banner {
+ background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("banner.png");
+ height: 10%;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: cover;
+ position: relative;
+}
+
+.hero-image {
+ background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("image.png");
+ height: 50%;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: cover;
+ position: relative;
+}
+
+.rssfeed img {
+ width: 5%;
+ float: right;
+}
+
+.ssbaddr {
+ font-size: var(--font-size5);
+}
+
+.about {
+ font-size: var(--font-size5);
+ float: right;
+}
+
+.blogreplies {
+ color: var(--button-highlighted);
+ font-size: var(--font-size2);
+ 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);
+}
+
+.hero-image img {
+ width: 50%;
+}
+
+.hero-text {
+ text-align: center;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ color: var(--font-color-header);
+ font-size: var(--font-size-header);
+}
+
+.new-post-text {
+ font-size: var(--font-size2);
+ padding: 4px 0;
+}
+
+.new-post-subtext {
+ font-size: var(--font-size-header);
+ 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);
+}
+
+.hero-text img.title {
+ border-radius: 1%;
+ width: 30%;
+ min-width: 200px;
+}
+
+.hero-text img.emoji {
+ width: 50px;
+ padding: 0 0;
+ margin: 0 0;
+ float: none;
+}
+
+.hero-text button {
+ border: none;
+ outline: 0;
+ display: inline-block;
+ padding: 10px 25px;
+ color: black;
+ background-color: #ddd;
+ text-align: center;
+ cursor: pointer;
+}
+
+.hero-text button:hover {
+ background-color: var(--button-background);
+ color: var(--button-text);
+}
+
+.timelineIcon {
+ width: 10%;
+}
+
+.followRequestHandle {
+ padding: 0px 20px;
+}
+
+.button span {
+ cursor: pointer;
+ display: inline-block;
+ position: relative;
+ transition: 0.5s;
+}
+
+.button span:after {
+ content: '\00bb';
+ position: absolute;
+ opacity: 0;
+ top: 0;
+ right: -20px;
+ transition: 0.5s;
+}
+
+.button:hover span {
+ padding-right: 25px;
+}
+
+.button:hover span:after {
+ opacity: 1;
+ right: 0;
+}
+
+.buttonselected span {
+ cursor: pointer;
+ display: inline-block;
+ position: relative;
+ transition: 0.5s;
+}
+
+.buttonselected span:after {
+ content: '\00bb';
+ position: absolute;
+ opacity: 0;
+ top: 0;
+ right: -20px;
+ transition: 0.5s;
+}
+
+.buttonselected:hover span {
+ padding-right: 25px;
+}
+
+.buttonselected:hover span:after {
+ opacity: 1;
+ right: 0;
+}
+
+.container {
+ border: 2px solid var(--border-color);
+ background-color: var(--main-bg-color);
+ border-radius: var(--timeline-border-radius);
+ padding: 20px;
+ margin: 10px;
+}
+
+.media {
+ width: 80%;
+ border-radius: 5px;
+ padding: 10px;
+ margin: 10px 0;
+}
+
+.message {
+ margin-left: 7%;
+ width: 90%;
+}
+
+.gitpatch {
+ width: 90%;
+ font-family: monospace;
+}
+
+.container p.administeredby {
+ font-size: var(--font-size-header);
+}
+
+.container::after {
+ content: "";
+ clear: both;
+ display: table;
+}
+
+.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;
+}
+
+.hero-text img.emojiprofile {
+ 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 0px;
+}
+
+.replyingto {
+ color: var(--main-fg-color);
+}
+
+.imText {
+ font-size: var(--font-size4);
+ color: var(--main-link-color);
+}
+
+.pgp {
+ font-size: var(--font-size5);
+ color: var(--main-link-color);
+ font-family: 'monospace';
+}
+
+.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: 120%;
+ margin-left: 5%;
+ width: 120%;
+ padding-bottom: 3%;
+}
+.container img.right {
+ float: right;
+ margin-left: 0px;
+ margin-right:0;
+ padding: 0 0;
+ margin: 0 0;
+}
+.containericons img.right {
+ float: right;
+ margin-left: 20px;
+ margin-right: 0;
+}
+
+.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-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);
+}
+
+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);
+}
+
+.labels {
+ font-size: var(--font-size);
+}
+
+.transparent {
+ color: rgba(0, 0, 0, 0.0);
+ font-size: 0px;
+ line-height: 0;
+}
+
+.labelsright {
+ float: right;
+ font-size: var(--font-size);
+}
+
+input[type=date] {
+ background-color: var(--main-bg-color-reply);
+ color: var(--main-fg-color);
+ font-size: var(--font-size);
+ border: none;
+}
+
+input[type=time] {
+ background-color: var(--main-bg-color-reply);
+ color: var(--main-fg-color);
+ font-size: var(--font-size);
+ 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);
+ width: 120px;
+}
+
+.loginButton {
+ background-color: #2965;
+ color: #000;
+ float: none;
+ margin: 0px 10px;
+ padding: 12px 40px;
+ border: none;
+ border-radius: var(--button-corner-radius);
+ cursor: pointer;
+ font-size: var(--font-size2);
+ opacity: 0.7;
+}
+
+input[type=submit]:hover {
+ background-color: var(--button-background);
+}
+
+.vertical-center {
+ max-width: 90%;
+ min-width: 600px;
+ margin: 0 auto;
+ padding: 5% 0px;
+}
+
+/* The container
- needed to position the dropdown content */
+.dropdown {
+ margin: 10px auto;
+ padding: 0px 14px;
+ position: relative;
+ display: inline-block;
+}
+
+.dropdown img {
+ opacity: 1.0;
+ width: 32px;
+ height: 32px;
+ padding: 0px 16px;
+ -ms-transform: translateY(-10%);
+ transform: translateY(-10%);
+}
+
+.timeline-avatar {
+ margin: 10px auto;
+ padding: 0px 0px;
+}
+
+.timeline-avatar-reply {
+ padding: 0px 0px;
+ width: 80%;
+}
+
+.search-result-text {
+ font-size: var(--font-size);
+}
+
+.search-result img {
+ width: 7%;
+ padding: 0px 30px;
+}
+
+/* Dropdown Content (Hidden by Default) */
+.dropdown-content {
+ display: none;
+ position: absolute;
+ background-color: var(--dropdown-bg-color);
+ min-width: 600px;
+ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+ z-index: 1;
+}
+
+/* Links inside the dropdown */
+.dropdown-content a {
+ color: var(--main-fg-color);
+ padding: 12px 16px;
+ text-decoration: none;
+ display: block;
+}
+
+.dropdown-content img {
+ width: 32px;
+ height: 32px;
+ padding: 0px 0px;
+}
+
+/* Change color of dropdown links on hover */
+.dropdown-content a:hover {background-color: var(--dropdown-bg-color-hover);}
+
+/* Show the dropdown menu on hover */
+.show {display: block;}
+
+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;
+}
+
+.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;
+}
+
+.gallerytext {
+ text-decoration: none;
+}
+
+@media screen and (min-width: 400px) {
+ body, html {
+ font-size: var(--font-size4);
+ }
+ .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);
+ }
+ div.gallery {
+ margin: 5px;
+ border: 1px solid var(--gallery-border);
+ float: left;
+ width: 100%;
+ 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: 10%;
+ }
+ .container img.emojisearch {
+ width: 10%;
+ float: right;
+ vertical-align: middle;
+ }
+ .container img.emojicalendar {
+ float: left;
+ max-width: 400px;
+ width: 8%;
+ -ms-transform: translateY(-25%);
+ transform: translateY(-25%);
+ }
+ .container img.timelineicon {
+ float: right;
+ margin-left: 0px;
+ margin-right:0;
+ padding: 0 0;
+ margin: 0 0;
+ width: 50px;
+ }
+ .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: right;
+ max-width: 200px;
+ width: 3%;
+ margin: 0px 1%;
+ 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%);
+ }
+ .cwButton {
+ border-radius: var(--button-corner-radius);
+ background-color: #554;
+ border: none;
+ color: #FFFFFE;
+ text-align: center;
+ font-size: var(--font-size5);
+ padding: 2px;
+ cursor: pointer;
+ margin: 5px;
+ }
+ .buttonevent {
+ border-radius: var(--button-corner-radius);
+ background-color: var(--button-highlighted);
+ border: none;
+ color: var(--button-text);
+ text-align: center;
+ font-size: var(--font-size-header);
+ padding: var(--button-height-padding);
+ transition: all 0.5s;
+ cursor: pointer;
+ margin: 5px;
+ }
+ .button {
+ 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);
+ padding: var(--button-height-padding);
+ width: 10%;
+ max-width: 100px;
+ min-width: 80px;
+ transition: all 0.5s;
+ cursor: pointer;
+ margin: 5px;
+ }
+ .buttonhighlighted {
+ border-radius: var(--button-corner-radius);
+ background-color: var(--button-highlighted);
+ border: none;
+ color: var(--button-text);
+ text-align: center;
+ font-size: var(--font-size-header);
+ padding: var(--button-height-padding);
+ width: 10%;
+ max-width: 100px;
+ min-width: 80px;
+ transition: all 0.5s;
+ cursor: pointer;
+ margin: 5px;
+ }
+ .buttonselected {
+ border-radius: var(--button-corner-radius);
+ background-color: var(--button-selected);
+ border: none;
+ color: var(--button-text);
+ text-align: center;
+ font-size: var(--font-size-header);
+ padding: var(--button-height-padding);
+ width: 10%;
+ max-width: 100px;
+ min-width: 80px;
+ transition: all 0.5s;
+ cursor: pointer;
+ margin: 5px;
+ }
+ .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);
+ padding: var(--button-height-padding);
+ width: 10%;
+ max-width: 100px;
+ min-width: 80px;
+ 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);
+ 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);
+ padding: var(--button-height-padding);
+ width: 20%;
+ max-width: 200px;
+ min-width: 80px;
+ cursor: pointer;
+ margin: 0 5px;
+ float: right;
+ }
+ .pageicon {
+ width: 4%;
+ }
+ .time-right {
+ float: right;
+ color: var(--time-color);
+ margin: 4px 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);
+ 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);
+ width: 20%;
+ }
+ .question {
+ font-size: var(--font-size);
+ }
+ .questionresult {
+ font-size: var(--font-size);
+ }
+ input[type=radio] {
+ font-size: var(--font-size);
+ 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);
+ 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);
+ 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);
+ width: 20%;
+ }
+ .scope-desc {
+ font-size: var(--font-size3);
+ }
+ .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);
+ 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);
+ opacity: 0.7;
+ }
+}
+
+@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 {
+ font-size: var(--font-size3);
+ }
+ div.gallerytext {
+ color: var(--gallery-text-color);
+ font-size: var(--gallery-font-size-mobile);
+ }
+ .galleryContainer {
+ display: grid;
+ grid-template-columns: auto;
+ background-color: var(--main-bg-color);
+ }
+ div.gallery {
+ margin: 5px;
+ border: 1px solid var(--gallery-border);
+ float: left;
+ width: 100%;
+ }
+ div.imagedesc {
+ padding: 35px;
+ text-align: center;
+ }
+ .container img {
+ float: left;
+ max-width: 400px;
+ width: 15%;
+ padding: 0px 7px;
+ margin-right: 20px;
+ border-radius: 10%;
+ }
+ .container img.emojisearch {
+ width: 12%;
+ float: right;
+ vertical-align: middle;
+ }
+ .container img.emojicalendar {
+ float: left;
+ max-width: 400px;
+ width: 12%;
+ -ms-transform: translateY(-25%);
+ transform: translateY(-25%);
+ }
+ .container img.timelineicon {
+ float: right;
+ margin-left: 0px;
+ margin-right:0;
+ padding: 0 0;
+ margin: 0 0;
+ width: 100px;
+ }
+ .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: right;
+ max-width: 200px;
+ width: 7%;
+ margin: 1% 3%;
+ border-radius: 0%;
+ }
+ .timeline-avatar img {
+ opacity: 1.0;
+ width: 15%;
+ height: 15%;
+ padding: 0px 0px;
+ -ms-transform: translateY(-10%);
+ transform: translateY(-10%);
+ }
+ .cwButton {
+ border-radius: var(--button-corner-radius);
+ background-color: #554;
+ border: none;
+ color: #FFFFFE;
+ text-align: center;
+ font-size: var(--font-size3);
+ padding: 2px;
+ cursor: pointer;
+ margin: 5px;
+ }
+ .buttonevent {
+ border-radius: var(--button-corner-radius);
+ background-color: var(--button-highlighted);
+ border: none;
+ color: var(--button-text);
+ text-align: center;
+ font-size: var(--font-size-button-mobile);
+ 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);
+ border: none;
+ color: var(--button-text);
+ text-align: center;
+ font-size: var(--font-size-button-mobile);
+ padding: var(--button-height-padding-mobile);
+ width: 20%;
+ max-width: 400px;
+ min-width: 80px;
+ transition: all 0.5s;
+ cursor: pointer;
+ margin: 15px;
+ }
+ .buttonhighlighted {
+ border-radius: var(--button-corner-radius);
+ background-color: var(--button-highlighted);
+ border: none;
+ color: var(--button-text);
+ text-align: center;
+ font-size: var(--font-size-button-mobile);
+ padding: var(--button-height-padding-mobile);
+ width: 20%;
+ max-width: 400px;
+ min-width: 80px;
+ transition: all 0.5s;
+ cursor: pointer;
+ margin: 15px;
+ }
+ .buttonselected {
+ border-radius: var(--button-corner-radius);
+ background-color: var(--button-selected);
+ border: none;
+ color: var(--button-text);
+ text-align: center;
+ font-size: var(--font-size-button-mobile);
+ padding: var(--button-height-padding-mobile);
+ width: 20%;
+ max-width: 400px;
+ min-width: 80px;
+ transition: all 0.5s;
+ cursor: pointer;
+ margin: 15px;
+ }
+ .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);
+ padding: var(--button-height-padding-mobile);
+ width: 20%;
+ max-width: 400px;
+ min-width: 80px;
+ 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);
+ 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);
+ padding: var(--button-height-padding-mobile);
+ width: 20%;
+ max-width: 400px;
+ min-width: 80px;
+ cursor: pointer;
+ margin: 0 15px;
+ float: right;
+ }
+ .pageicon {
+ width: 14%;
+ }
+ .time-right {
+ float: right;
+ color: var(--time-color);
+ margin: 25px 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);
+ 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);
+ width: 20%;
+ }
+ .question {
+ font-size: var(--font-size3);
+ }
+ .questionresult {
+ font-size: var(--font-size3);
+ }
+ input[type=radio] {
+ font-size: var(--font-size3);
+ 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);
+ 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);
+ 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);
+ width: 20%;
+ }
+ .scope-desc {
+ font-size: var(--font-size3);
+ }
+ .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);
+ 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);
+ opacity: 0.7;
+ }
+}