/*===================================== *
* Jcink.com Forum Hosting Stylesheet
* ====================================
* #EssieVersion: 1.0.0
* #ThornsVersion: 1.0.0
*==================================== */
/*=======================================
BASE SKIN CODED EXCLUSIVELY BY ESSI.
MODIFICATIONS MADE BY MUSE.
*==================================== */
//*** FONTS ******/
@font-face {
src:url('https://files.jcink.net/uploads/essicodes/2093b1ab-Pe_icon_7_stroke.ttf');
font-family:stroke;
}
@import url('https://fonts.googleapis.com/css2?family=Yeseva+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Unicase:wght@300;400;500;600;700&family=Kristi&family=Roboto:ital,wght@0,100;0,400;0,700;0,900;1,100;1,400;1,700;1,900&display=swap');
@import url('https://anaxasdiaries.com/fonts/SogiaRegular/SogiaRegular.css');
@font-face {
font-family: "SogiaRegular";
src: url('https://anaxasdiaries.com/fonts/SogiaRegular/SogiaRegular.woff2') format('woff2'), url('https://anaxasdiaries.com/fonts/SogiaRegular/SogiaRegular.woff') format('woff');
}
.yes { font-family: 'Yeseva One', serif;}
.sogiaregular { font-family: "SogiaRegular", serif;}
.cormorant {font-family: 'Cormorant Unicase', serif;}
.kristi {font-family: 'Kristi', cursive;}
.roboto {font-family: 'Roboto', sans-serif;} /*font-weight: 100, 400, 700, 900;*/
//*** BODY & VARIABLES ******/
html {
overflow-x: hidden;
overflow-y:auto;
scroll-behavior: smooth;
transition: color 300ms, background-color 300ms;
}
:root {
/** COLORS **/
--cream: #e8e4da;
--grey: #dbd4c9;
--dk-brown: /*#171715*/ #312729;
--golden: #a87800;
--rose: #cea38c;
--olive: #c2b187;
--wm-brown: #40341f;
--leaf-green: #879c8d;
--rust: #c84e25;
/** FONTS **/
--thorns-font: 'Yeseva One'; /*'SogiaRegular', serif;*/
--thorns-fancy: 'SogiaRegular';
--serif-title: 'Cormorant Unicase';
--serif-body: 'Cormorant Garamond';
--cursive: 'Kristi';
--sans-serif: 'Roboto';
/** MEMBERGROUPS **/
--admin: #C84E25;
--galdor: #D5AC6B;
--human: #BE9543;
--passive: #97AFB6;
--wick: #C6A2CC;
--raen: #a49f97;
--member:#c2b187;
--writer: #A3B4A1;
--retired: #606675;
--Galdor: #D5AC6B;
--Human: #BE9543;
--Passive: #97AFB6;
--Wick: #C6A2CC;
--Raen: #a49f97;
}
html, html[data-theme='light'] {
--background-color: #e8e4da;
--topbar-color: #dbd4c9;
--bottombar-color: #dbd4c9;
--footer-color:#a49f97;
--footer-link-color:#e8e4da;
--background-image: url('https://anaxasdiaries.com/storage/thorns-background-lightmode.png');
--text-color: #40341f;
--primary-link-color: #b09344;
--secondary-link-color: #171715;
--fa-primary-color: rgb(24, 23, 20);
--fa-secondary-color: rgb(24, 23, 20);
--fa-secondary-opacity: 0.4;
--icon-hover-color: var(--golden);
--border-color: #171715;
--ooc-label: #f2eee9 /*#dbd4c9*/;
--dossier-entry: #f2eee9 /*#dbd4c9*/;
--profile-progress: #dbd4c9;
--scroll-block:#dbd4c9 /*#f2eee9*/;
--header-background: url('https://anaxasdiaries.com/storage/thorns-header-lightmode.png');
--header-mobile: url('https://anaxasdiaries.com/storage/thorns-background-mobile.png');
--header-rose: url('https://anaxasdiaries.com/storage/thorns-roses-lightmode.png');
--footer-image: url('https://anaxasdiaries.com/storage/passive-rose-lightmode.png');
--passive-symbol:url('https://anaxasdiaries.com/storage/passive-symbol-40341F.svg');
--passive-symbol-hover:url('https://anaxasdiaries.com/storage/passive-symbol-b09344.svg');
--uprising: #e8e4da;
--parallax-01:url('https://anaxasdiaries.com/storage/thorns-header-lightmode-right.png');
--parallax-02:url('https://anaxasdiaries.com/storage/thorns-header-lightmode-left-lg.png');
--parallax-03:url('https://anaxasdiaries.com/storage/thorns-header-lightmode-base.png');
}
html[data-theme='dark'] {
--background-color: /*#40341f;*/ #312729;
--topbar-color: #251e1f;
--bottombar-color: #251e1f;
--footer-color:#1d1719;
--footer-link-color:#b09344;
--background-image: url('https://anaxasdiaries.com/storage/thorns-background-darkmode.png');
--text-color: #f2eee9;
--primary-link-color: #c2b187;
--secondary-link-color: #e8e4da;
--fa-primary-color: rgb(219, 212, 201);
--fa-secondary-color: rgba(219, 212, 201);
--fa-secondary-opacity: 0.4;
--icon-hover-color: var(--golden);
--border-color: #dbd4c9;
--ooc-label: #6f6869;
--dossier-entry: #6f6869;
--profile-progress: #6f6869;
--scroll-block: #251e1f /*#1d1719*/;
--header-background: url('https://anaxasdiaries.com/storage/thorns-header-darkmode.png');
--header-mobile: url('https://anaxasdiaries.com/storage/thorns-background-mobile-darkmode.png');
--header-rose: url('https://anaxasdiaries.com/storage/thorns-roses-darkmode.png');
--footer-image: url('https://anaxasdiaries.com/storage/passive-rose-darkmode.png');
--passive-symbol:url('https://anaxasdiaries.com/storage/passive-symbol-e8e4da.svg');
--passive-symbol-hover:url('https://anaxasdiaries.com/storage/passive-symbol-b09344.svg');
--uprising: #b09344;
--parallax-01:url('https://anaxasdiaries.com/storage/thorns-header-darkmode-right.png');
--parallax-02:url('https://anaxasdiaries.com/storage/thorns-header-darkmode-left-lg.png');
--parallax-03:url('https://anaxasdiaries.com/storage/thorns-header-darkmode-base.png');
}
.mcp-0, .acp-0 { display: none!important; }
.g-2 { display: inline-block !important; }
.m-4 {display: inline-block!important; }
.forimage {
display:none;
}
span.fordivide {
display:none;
}
#field-location, #field-interests, #field-website {display: none;}
.main-side-nav > .sidenav > ol.account-4, .main-side-nav > .sidenav > ol.account-3, .main-side-nav > .sidenav > ol.account-13, .main-side-nav > .sidenav > ol.account-14, .main-side-nav > .sidenav > ol.account-15, .main-side-nav > .sidenav > ol.account-16, .main-side-nav > .sidenav > ol.account-17, .main-side-nav > .sidenav > ol.account-18, .main-side-nav > .sidenav > ol.account-19 {
display:block !important;
}
.main-side-nav > .sidenav > ol.m-account-4, .main-side-nav > .sidenav > ol.m-account-4 li {
display:block !important;
}
.main-side-nav > .sidenav > ol.m-account-3 li::before, .main-side-nav > .sidenav > ol.m-account-13 li::before, .main-side-nav > .sidenav > ol.m-account-14 li::before, .main-side-nav > .sidenav > ol.m-account-15 li::before, .main-side-nav > .sidenav > ol.m-account-16 li::before, .main-side-nav > .sidenav > ol.m-account-17 li::before, .main-side-nav > .sidenav > ol.m-account-18 li::before, .main-side-nav > .sidenav > ol.m-account-19 li::before, .main-side-nav > .sidenav > ol.m-account-3 li, .main-side-nav > .sidenav > ol.m-account-13 li, .main-side-nav > .sidenav > ol.m-account-14 li, .main-side-nav > .sidenav > ol.m-account-15 li, .main-side-nav > .sidenav > ol.m-account-16 li, .main-side-nav > .sidenav > ol.m-account-17 li, .main-side-nav > .sidenav > ol.m-account-18 li, .main-side-nav > .sidenav > ol.m-account-19 li {
display:none;
}
body {
background: var(--background-color);
/*background-image: var(--background-image);
background-position:top center;
background-attachment:scroll;*/
color: var(--text-color);
font-family: var(--san-serif);
font-size:18px !important;
line-height:1.35em;
margin:0;
height:100%;
padding: 3em 0 1.85em 0;
background-attachment: fixed;
-webkit-transition: .3s;
-o-transition: .3s;
transition: .3s;
overflow-x: hidden;
}
//*** HIDE FIELDS FROM IC ACCOUNT ******/
body:not(.membergroup-4, .membergroup-18) #ucpcontent #field_19 {
display:none; }
body:not(.membergroup-4, .membergroup-18) #ucpcontent #field_20 {
display:none; }
body:not(.membergroup-4, .membergroup-18) #ucpcontent #field_21 {
display:none; }
body:not(.membergroup-4, .membergroup-18) #ucpcontent #field_22 {
display:none; }
/*body:not(.membergroup-4, .membergroup-18) #ucpcontent #field_23 {
display:none; }*/
body:not(.membergroup-4, .membergroup-18) #ucpcontent #field_25 {
display:none; }
body:not(.membergroup-4, .membergroup-18) #ucpcontent #field_26 {
display:none; }
body:not(.membergroup-4, .membergroup-18) #ucpcontent #field_27 {
display:none; }
body:not(.membergroup-4, .membergroup-18) #ucpcontent #field_28 {
display:none; }
body:not(.membergroup-4, .membergroup-18) #ucpcontent #field_36 {
display:none; }
//*** HIDE FIELDS FROM OOC ACCOUNT ******/
body:not(.membergroup-13, .membergroup-14, .membergroup-15, .membergroup-16, .membergroup-17, .membergroup-3) #ucpcontent #field_2 {
display:none; }
body:not(.membergroup-13, .membergroup-14, .membergroup-15, .membergroup-16, .membergroup-17, .membergroup-3) #ucpcontent #field_31 {
display:none; }
body:not(.membergroup-13, .membergroup-14, .membergroup-15, .membergroup-16, .membergroup-17, .membergroup-3) #ucpcontent #field_32 {
display:none; }
body:not(.membergroup-13, .membergroup-14, .membergroup-15, .membergroup-16, .membergroup-17, .membergroup-3) #ucpcontent #field_37 {
display:none; }
body:not(.membergroup-13, .membergroup-14, .membergroup-15, .membergroup-16, .membergroup-17, .membergroup-3) #ucpcontent #field_3 {
display:none; }
body:not(.membergroup-13, .membergroup-14, .membergroup-15, .membergroup-16, .membergroup-17, .membergroup-3) #ucpcontent #field_4 {
display:none; }
body:not(.membergroup-13, .membergroup-14, .membergroup-15, .membergroup-16, .membergroup-17, .membergroup-3) #ucpcontent #field_5 {
display:none; }
body:not(.membergroup-13, .membergroup-14, .membergroup-15, .membergroup-16, .membergroup-17, .membergroup-3) #ucpcontent #field_29 {
display:none; }
body:not(.membergroup-13, .membergroup-14, .membergroup-15, .membergroup-16, .membergroup-17, .membergroup-3) #ucpcontent #field_6 {
display:none; }
body:not(.membergroup-13, .membergroup-14, .membergroup-15, .membergroup-16, .membergroup-17, .membergroup-3) #ucpcontent #field_7 {
display:none; }
body:not(.membergroup-13, .membergroup-14, .membergroup-15, .membergroup-16, .membergroup-17, .membergroup-3) #ucpcontent #field_8 {
display:none; }
body:not(.membergroup-13, .membergroup-14, .membergroup-15, .membergroup-16, .membergroup-17, .membergroup-3) #ucpcontent #field_9 {
display:none; }
body:not(.membergroup-13, .membergroup-14, .membergroup-15, .membergroup-16, .membergroup-17, .membergroup-3) #ucpcontent #field_33 {
display:none; }
body:not(.membergroup-13, .membergroup-14, .membergroup-15, .membergroup-16, .membergroup-17, .membergroup-3) #ucpcontent #field_12 {
display:none; }
body:not(.membergroup-13, .membergroup-14, .membergroup-15, .membergroup-16, .membergroup-17, .membergroup-3) #ucpcontent #field_16 {
display:none; }
body:not(.membergroup-13, .membergroup-14, .membergroup-15, .membergroup-16, .membergroup-17, .membergroup-3) #ucpcontent #field_17 {
display:none; }
body:not(.membergroup-13, .membergroup-14, .membergroup-15, .membergroup-16, .membergroup-17, .membergroup-3) #ucpcontent #field_18 {
display:none; }
body:not(.membergroup-13, .membergroup-14, .membergroup-15, .membergroup-16, .membergroup-17, .membergroup-3) #ucpcontent #field_35 {
display:none; }
body:not(.membergroup-13, .membergroup-14, .membergroup-15, .membergroup-16, .membergroup-17, .membergroup-3) #ucpcontent #field_13 {
display:none; }
body:not(.membergroup-13, .membergroup-14, .membergroup-15, .membergroup-16, .membergroup-17, .membergroup-3) #ucpcontent #field_14 {
display:none; }
body:not(.membergroup-13, .membergroup-14, .membergroup-15, .membergroup-16, .membergroup-17, .membergroup-3) #ucpcontent #field_15 {
display:none; }
body:not(.membergroup-13, .membergroup-14, .membergroup-15, .membergroup-16, .membergroup-17, .membergroup-3) #ucpcontent #field_38 {
display:none; }
body:not(.membergroup-14, .membergroup-16) #ucpcontent #field_34 {
display:none; }
#car-hold:not(.tabs-Character) {
display:none; }
#bottom-links-1.profile-top-links:not(.links-Character) {
display:none;
}
#ooc-hold:not(.ooc-Author) {
display:none;
}
.active-threads:is(#active-Author) {
display:none;
}
.finished-threads:is(#finished-Author) {
display:none;
}
.membergroup-2 { /*guests*/
--member-color: #b09344;
}
.membergroup-4, #account-type-Admin { /*admin*/
--member-color: #c84e25;
}
.membergroup-13, #account-type-Galdor { /*galdor*/
--member-color: #D5AC6B;
}
.membergroup-15, #account-type-Human { /*human*/
--member-color: #BE9543;
}
.membergroup-14, #account-type-Passive { /*passive*/
--member-color: #97AFB6;
}
.membergroup-16, #account-type-Wick { /*wick*/
--member-color: #C6A2CC;
}
.membergroup-17, #account-type-Raen { /*raen*/
--member-color: #a49f97;
}
.membergroup-3 { /*registered-members*/
--member-color:#c2b187;
}
.membergroup-18, #account-type-Author { /*writers*/
--member-color:#A3B4A1;
}
.membergroup-19, #account-type-Retired { /*retired*/
--member-color:#606675;
}
.forum-container {
overflow: auto;
position: absolute;
top:3em;
left: 0;
right: 0;
bottom: 5em;
transition: .35s;
}
/******
redirect page box
******/
#redirect-screen td:first-child {
}
#redirect-screen td a {
}
/********
header
********/
/* NAVBARS */
.bottombar {
background-color: var(--bottombar-color);
font-family:var(--sans-serif);
color:var(--text-color);
border-top:2px double var(--border-color);
display:grid;
grid-template-columns:1.5fr .5fr;
position: fixed;
bottom: 0;
width: 100%;
height:2em;
font-weight:400;
font-size:.65em;
padding-left:5em;
padding-bottom:.75em;
line-height:3em;
z-index:9999;
}
.topbar {
background-color: var(--topbar-color);
font-family: var(--serif-title);
color: (--text-color);
border-bottom: 5px solid var(--border-color);
display: inline-grid;
/* grid-template-columns: 5em 1fr 1fr; */
grid-template-columns: repeat(2, 1.5em) auto 1em 13em;
grid-template-rows: auto;
column-gap: 0.5em;
overflow: hidden;
position: fixed;
top: 0;
width: 100vw;
height: 3em;
font-weight: 600;
font-size: 1em;
line-height: 3em;
z-index: 9999;
padding-left: 2em;
/* padding-right: 2em; */
margin: 0 auto;
}
.topbar > .topbar-title {
grid-column: 5;
text-align: right;
/* margin-left: 7em; */
display: block;
max-width: 8em;
margin-left: 0.5em;
}
.topbar > .topbar-title a:link, .topbar > .topbar-title a:visited {
text-decoration:none;
color:var(--text-color);
}
.topbar > .topbar-title a:hover, .topbar > .topbar-title a:active {
text-decoration:none;
color:var(--golden);
}
.topbar > .topbar-pass {
grid-column: 4;
text-align: right;
display: inline-block;
margin-left: 1em;
margin-top: 0.85em;
height: 1.35em;
width: 1.35em;
background-image: var(--passive-symbol);
transition: .8s;
}
.topbar > .topbar-pass:hover, .topbar > .topbar-pass a:hover, .topbar > .topbar-pass a:active {
text-decoration:none;
background-image:var(--passive-symbol-hover);
transition:.8s;
}
.topbar > .topbar-toggle {
grid-column: 1;
text-align: right;
margin-right: 0.35em;
cursor:pointer;
}
.topbar > .checkbox-toggle {
grid-column: 2;
text-align: left;
margin-right: 4em;
cursor:pointer;
}
.checkbox-toggle {
margin:0.25em auto;
}
input#theme-toggle {
display: none;
}
label.fas {
cursor: pointer;
font-size: 1.35em;
--fa-primary-color: var(--icon-primary-color) !important;
--fa-secondary-color: var(--icon-secondary-color, 1) !important;
transition:.8s;
}
label.fas:hover {
--fa-primary-color: var(--golden) !important;
--fa-secondary-color: var(--golden, 1) !important;
transition:.8s;
}
#theme-toggle + label::before {
/*content: "f186";*/
font-family:"Font Awesome 5 Pro";
}
#theme-toggle:checked + label::before {
/*content: "f185";*/
font-family:"Font Awesome 5 Pro";
}
.topbar-toggle#one > i, .topbar-toggle#two > i {
font-size: 1.35em;
transition:.8s;
}
.topbar-toggle#one > i:hover, .topbar-toggle#two > i:hover {
--fa-primary-color: var(--icon-hover-color);
--fa-secondary-color: var(--icon-hover-color);
transition:.8s;
}
.main-side-nav {
/*height:100vh;*/
width: 0;
top: 0;
left: 0;
bottom:0;
position: fixed;
z-index: 9999;
transition: 0.5s;
padding-top: 2.5em;
padding-bottom:3em;
overflow-y: auto;
overflow-x: hidden;
text-align:justify;
text-justify: inter-word;
background-color:var(--background-color);
/*border-right:1px solid var(--border-color)*/;
}
.avatar a > img.menu-avatar {
border:5px solid var(--member-color);
outline:1px solid var(--border-color);
margin:3em auto .5em;
width:10em;
display:block
}
/*.avatar > .image-aside {
display:block;
position:relative;
margin:10px 0;
}*/
.avatar > .image-aside {
font: bold .65em var(--serif-body);
letter-spacing:.025em;
font-weight:700;
color:var(--text-color);
line-height:1.25em;
padding:.25em;
transform:rotate(-90deg);
position:absolute;
top:10em;
left:3.5em;
}
.main-side-nav > p {
text-align:center;
margin:.25em auto;
display:block;
vertical-align:top;
font-family:var(--sans-serif);
font-size:.7em;
text-transform:uppercase;
line-height:1.25em;
}
.main-side-nav > p > span {
font-family:var(--serif-body);
text-transform:capitalize;
font-size:1.65em;
font-style:italic;
font-weight:700;
line-height:1.35em;
}
.main-side-nav > p > span a:link, .main-side-nav > p > span a:visited {
text-decoration:none;
color: var(--member-color);
transition:.8s;
}
.main-side-nav > p > span a:hover, .main-side-nav > p > span a:active {
text-decoration:none;
background-color: var(--member-color);
color:var(--cream);
}
.main-side-nav > .sidenav > ol {
list-style-type:none;
counter-reset:serif-counter;
font-family: var(--serif-body);
font-size:1em;
line-height:1.35em;
}
.main-side-nav > .sidenav > ol li {
counter-increment:serif-counter;
}
.main-side-nav > .sidenav > h3.sidenav-header {
font-family:var(--thorns-font);
font-size:1.2em;
letter-spacing:-.045em;
margin-bottom:.65em;
margin-left:1em;
padding-bottom:.25em;
display:block;
width:90%;
color:var(--text-color);
border-bottom:1px solid var(--border-color);
}
.main-side-nav > .sidenav > ol li::before {
/*content:"00" counter(serif-counter) ". ";
font-family:var(--serif-title);
font-weight:700;*/
color: var(--member-color);
content: "» ";
}
.main-side-nav > .sidenav > ol > li > a:link, .main-side-nav > .sidenav > ol > li > a:visited {
text-decoration:none;
color: var(--text-color);
transition:.8s;
}
.main-side-nav > .sidenav > ol > li > a:hover, .main-side-nav > .sidenav > ol > li > a:active {
text-decoration:none;
color:var(--cream);
background-color:var(--member-color);
}
.log-in::after {
content: " | ";
}
#forum-container {
transition: margin-left .5s;
}
/* HEADER */
#outerheader {
width:100vw;
margin:0 auto;
}
#outerheader.header-UserCP, #outerheader.header-Reg, #outerheader.header-Post, #outerheader.header-Stats, #outerheader.header-Search, #outerheader.header-Members, #outerheader.header-Msg, #outerheader.header-Pages, #outerheader.header-Profile, #outerheader.header-ST, #outerheader.header-SC, #outerheader.header-SF {
display:none;
}
.innerheader {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
position:relative;
align-items: start;
height:36rem;
width:100vw;
overflow-x: hidden;
overflow-y: auto;
margin:0px auto 2em;
background: var(--parallax-03);
background-size:cover;
background-attachment:scroll;
background-color:var(--background-color);
border-bottom:5px double var(--background-color);
}
.pos {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height:100%;
}
.text2 {
position: relative;
grid-column: 2 / span 1;
grid-row: 1;
z-index: 5;
margin-left: 0;
margin-top: .75em;
}
.text2 h3 {
font-size:1.15rem;
color:var(--text-color);
line-height:1.5rem;
font-weight:600;
text-transform:capitalize;
font-style:italic;
letter-spacing:0.035rem;
font-family:var(--serif-body);
text-align:right;
vertical-align:middle;
margin-top:18rem;
transform: scale3d(1.25, 1.25, 1.25);
opacity: 0.2;
animation: scaler 2.25s ease-out;
animation-fill-mode: forwards;
}
.text1 {
grid-column: 2 / span 1;
grid-row: 1 / span 2;
z-index: 208;
order: 2;
margin-top:9.25rem;
/*transform: scale3d(1.5, 1.5, 1.5);
opacity: 0.2;
animation: scaler 2.25s ease-out;
animation-fill-mode: forwards;*/
}
.text1 h1 {
font-size: 7rem;
color: var(--text-color);
font-family: var(--thorns-fancy);
font-weight:normal;
text-align: center;
margin-left: -1em;
transform: translate3d(0, -.35em, 0);
opacity: 0;
animation: moveDown 2.25s ease-out;
animation-fill-mode: forwards;
}
.text1 h2 {
font-size: 5rem;
color: var(--golden);
font-family: var(--serif-title);
text-align: center;
margin-top: -1.25rem;
margin-left: 4.25rem;
font-weight: 700;
text-shadow: 0px 0px 8px rgba(49, 39, 41, 0.85);
transform: translate3d(0, .5em, 0);
opacity: 0;
animation: moveUp 2.25s ease-out;
animation-fill-mode: forwards;
}
.rose1 {
grid-column: 1 / span 2;
grid-row: 1;
background-image: var(--parallax-01);
background-repeat: no-repeat;
background-position: right top;
background-size: contain;
transform: scale3d(1.25, 1.25, 1.25);
opacity: 0;
animation: scaler 2.85s ease-out;
animation-fill-mode: forwards;
}
.rose2 {
background:var(--parallax-02);
background-repeat:no-repeat;
background-position:-13em top;
background-size: 65%;
transform: scale3d(1.25, 1.25, 1.25);
opacity: 0;
animation: scaler 2.85s ease-out;
animation-fill-mode: forwards;
}
@keyframes moveUp {
100% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes moveDown {
100% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes scaler {
100% {
transform: scale3d(1, 1, 1);
opacity: 1;
}
}
/*****
TAGS STYLING
******/
.tag {
float: right;
display: inline-block;
font-variant: small-caps;
letter-spacing: 0.5px;
font-family: var(--sans-serif);
font-size: .65em;
text-transform: uppercase;
line-height: 1.65em;
background: var(--ooc-label);
padding-left: 0.25em;
padding-right: 0.25em;
font-weight: 500;
color: var(--text-color);
/* border: none; */
border-radius: 0;
margin-right: 0;
transition: .8s;
}
.tag:hover {
background: var(--golden);
color: var(--cream);
}
.tag.open {
border:1px solid var(--leaf-green);
}
.tag.open:hover {
background: var(--leaf-green);
color:var(--text-color);
}
.tag.closed {
border:1px solid var(--grey);
}
.tag.closed:hover {
background: var(--grey);
color: var(--text-color);
}
.tag.event {
border:1px solid var(--rose);
}
.tag.event:hover {
background: var(--rose);
color: var(--text-color);
}
.tag.tw {
border:1px solid var(--rust);
}
.tag.tw:hover {
background: var(--rust);
color: var(--text-color);
}
.tag.mature {
border:1px solid var(--rust);
}
.tag.mature:hover {
background: var(--rust);
color: var(--text-color);
}
.tag.npc {
}
.tag.hold {
}
/*****
header info
******/
.bottomuserinfo {
display: flex;
height: 120px;
padding: 10px;
background: var(--accent3);
}
.bottomuserinfo .aboutsite {
max-widtH: 240px;
height: 115px;
padding-right: 10px;
line-height: 19px;
}
.bottomuserinfo .aboutsite .locationtext {
display: flex;
justify-content: center;
align-items: center;
}
.aboutsitein {
overflow: auto;
height: 80px;
margin-top: 10px;
text-align: justify;
}
.aboutsitein li {
list-style: none;
line-height: 14px;
margin-bottom: 8px;
}
.aboutsitein li b {
}
.aboutsitein li b i {
}
.bottomuserinfo .locimg {
margin-left: 10px;
padding-right: 10px;
height: 115px;
}
.bottomuserinfo .locimg img {
widtH: 85px;
height: 115px;
}
.announcebox {
max-width: 270px;
text-align: justify;
padding: 0 10px;
border-right: var(--border);
height: 115px;
overflow: auto;
line-height: 20px;
}
.announcebox span {
font-style: italic;
}
.announcebox span b {
}
.stafflist {
display: flex;
align-items: center;
margin: 0 10px;
}
.stafflist img {
width: 45px;
height: 105px;
margin-left: 3px;
}
.stafflist a {
position: relative;
}
.headnav {
display: flex;
flex: 1;
overflow: auto;
flex-wrap: wrap;
align-content: space-evenly;
justify-content: space-evenly;
padding: 10px;
}
.headnav a {
margiN: 5px 10px;
padding: 5px 9px;
}
/***********
header navstrip & navigation
*****************/
.headernav {
overflow: hidden;
height: 30px;
padding: 0 20px;
}
#navstrip {
height: 30px;
display: flex;
align-items: center;
font-family: var(--thorns-serif);
text-transform: uppercase;
text-align: center;
}
#navstrip a {
margin: .15em 0 0;
}
/* USERLINKS */
.containeruserinfo {
/*bottom: 0;
height: 35px;
width: 100%;
display: flex;
flex-direction: column;
position: sticky;
top: 0px;
margin : auto;
z-index: 10000;*/
}
.topuserinfo {
/*margin-bottom: 10px;
display: flex;
height: 15px;
align-items: center;
background: var(--background-color);
display: flex;
align-items: center;
padding: 10px;
justify-content: space-between;*/
}
.topuserinfo img {
}
.topuserinfo .usernamedec {
/*font-family: var(--sans-serif);
font-size: 1em;
font-weight: 800;*/
}
.topuserinfo .usernamedec a {
/*font-size: 1em;*/
}
/* SCROLL UP BUTTON */
.scrollup {
opacity: 0;
color:var(--text-color);
text-decoration: none;
transition: opacity .5s ease-in;
font-size: 18px;
}
.scrollup.visible {
opacity: 1;
z-index: 10001;
float: right;
display: block;
position: fixed;
right: 3em;
bottom: .20em;
clear: both;
}
.scrollup > a:hover, .scrollup.visible > a:hover, .scrollup a:hover > i, .scrollup.visible a:hover > i {
background-color:transparent !important;
}
a.scrollup > i {
--fa-primary-color: --icon-primary-color;
--fa-secondary-color: --icon-secondary-color;
}
a.scrollup > i:hover {
--fa-primary-color: --icon-hover-color;
--fa-secondary-color: --icon-hover-color;
background-color:transparent !important;
}
.slidein {
margin-right: -5px !important;
opacity: 1 !important;
}
.linkinside {
/*display: flex;
align-items: center;
overflow: hidden;*/
}
.linkinside a {
/*flex-direction: row;
font-size: 10px;
letter-spacing: 2px;
text-transform: lowercase;
margin: 0 14px;*/
}
.subaccounts .forminput {
background: none;
outline: none;
border: none;
flex-direction: row;
font-size: .9em;
padding: 0;
margin-top: 2px;
cursor: pointer;
color: var(--text-color);
font-family:var(--thorns-serif) !important;
}
span#subaccounts_menu > form > select.forminput {
font-family: var(--serif-body);
background-color: var(--ooc-label);
border-bottom: 1px solid var(--text-color);
width: 95%;
padding: 0.35em 0;
}
/************
custom index
*************/
/* CATEGORY STYLES */
#innerwrapper {
padding: 0px;
width: 90vw;
margin: 0px auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap:.5rem;
flex-wrap: wrap;
}
#innerwrapper.inner-UserCP, #innerwrapper.inner-Msg, #innerwrapper.inner-store, #innerwrapper.inner-modcp {
padding: 0px;
width: 90vw;
margin: 0px auto;
display: block;
}
.category-wrapper-1 {
grid-column: 1 / span 2;
}
.category-wrapper-3 {
grid-column: 1 / span 2;
}
.category-wrapper-5, .category-wrapper-6 {
grid-column: auto;
/*margin-top:1.5em;*/
}
.category-wrapper-4, .board-stats-wrap {
grid-column: 1 / span 2;
/*margin-top:1.5em;*/
}
.category-section > h1 {
font-family:var(--thorns-font);
color:var(--text-color);
font-size:2rem;
line-height:1.5rem;
letter-spacing:-0.015em;
border-top:2px solid var(--border-color);
margin-top:.5em;
padding-top:.25em;
font-weight:normal;
}
.category-section > h1 a:link, .category-section > h1 a:visited {
text-decoration:none;
color:var(--text-color);
transition:.8s;
/*display:block;*/
}
.category-section > h1 a:hover, .category-section > h1 a:active {
text-decoration:none;
color:var(--cream);
background-color:var(--golden);
}
.category-section > h1.title-cat-1::before {
font-family:var(--sans-serif);
content: " 01 ";
font-weight:normal;
font-size:1rem;
/*display:inline-block;*/
display:none;
vertical-align:.5rem;
margin-right:.45em;
padding:.25em;
color:var(--cream);
background-color:var(--golden);
}
.category-section > h1.title-cat-3::before {
font-family:var(--sans-serif);
content: " 02 ";
font-weight:normal;
font-size:1rem;
/*display:inline-block;*/
display:none;
vertical-align:.5rem;
margin-right:.45em;
padding:.25em;
color:var(--cream);
background-color:var(--golden);
}
.category-section > h1.title-cat-4::before {
font-family:var(--sans-serif);
content: " 03 ";
font-weight:normal;
font-size:1rem;
/*display:inline-block;*/
display:none;
vertical-align:.5rem;
margin-right:.45em;
padding:.25em;
color:var(--cream);
background-color:var(--golden);
}
.category-section > h1.title-cat-5::before {
font-family:var(--sans-serif);
content: " 04 ";
font-weight:normal;
font-size:1rem;
/*display:inline-block;*/
display:none;
vertical-align:.5rem;
margin-right:.45em;
padding:.25em;
color:var(--cream);
background-color:var(--golden);
}
.category-section > h1.title-cat-6::before {
font-family:var(--sans-serif);
content: " 05 ";
font-weight:normal;
font-size:1rem;
/*display:inline-block;*/
display:none;
vertical-align:.5rem;
margin-right:.45em;
padding:.25em;
color:var(--cream);
background-color:var(--golden);
}
h1.profile-title {
font-family:var(--thorns-font);
color:var(--text-color);
font-size:1.65rem;
line-height:1.85rem;
letter-spacing:-0.015em;
border-top:2px solid var(--border-color);
margin-top:.25em;
padding-top:.35em;
font-weight:normal;
}
h1.profile-title.subaccounts {
font-family: var(--thorns-font);
color: var(--text-color);
font-size: 1.85rem;
line-height: 1.85rem;
letter-spacing: -0.015em;
border-top: 3px double var(--border-color);
margin-top: .25em;
padding-top: .35em;
font-weight: normal;
}
h1.profile-title.dossier::before {
font-family:var(--sans-serif);
content: " 01 ";
font-weight:normal;
font-size:1rem;
/*display:inline-block;*/
display:none;
vertical-align:.5rem;
margin-right:.45em;
padding:.25em;
color:var(--cream);
background-color:var(--member-color);
}
h1.profile-title.aptitudes::before {
font-family:var(--sans-serif);
content: " 02 ";
font-weight:normal;
font-size:1rem;
/*display:inline-block;*/
display:none;
vertical-align:.5rem;
margin-right:.45em;
padding:.25em;
color:var(--cream);
background-color:var(--member-color);
}
h1.profile-title.description::before {
font-family:var(--sans-serif);
content: " 03 ";
font-weight:normal;
font-size:1rem;
/*display:inline-block;*/
display:none;
vertical-align:.5rem;
margin-right:.45em;
padding:.25em;
color:var(--cream);
background-color:var(--member-color);
}
h1.profile-title.personality::before {
font-family:var(--sans-serif);
content: " 04 ";
font-weight:normal;
font-size:1rem;
/*display:inline-block;*/
display:none;
vertical-align:.5rem;
margin-right:.45em;
padding:.25em;
color:var(--cream);
background-color:var(--member-color);
}
h1.profile-title.freeform::before {
font-family:var(--sans-serif);
content: " 05 ";
font-weight:normal;
font-size:1rem;
/*display:inline-block;*/
display:none;
vertical-align:.5rem;
margin-right:.45em;
padding:.25em;
color:var(--cream);
background-color:var(--member-color);
}
h1.profile-title.active-threads::before {
font-family:var(--sans-serif);
content: " 06 ";
font-weight:normal;
font-size:1rem;
/*display:inline-block;*/
display:none;
vertical-align:.5rem;
margin-right:.45em;
padding:.25em;
color:var(--cream);
background-color:var(--member-color);
}
h1.profile-title.finished-threads::before {
font-family:var(--sans-serif);
content: " 07 ";
font-weight:normal;
font-size:1rem;
/*display:inline-block;*/
display:none;
vertical-align:.5rem;
margin-right:.45em;
padding:.25em;
color:var(--cream);
background-color:var(--member-color);
}
h1.profile-title.subaccounts::before {
font-family:var(--sans-serif);
content: " 08 ";
font-weight:normal;
font-size:1rem;
/*display:inline-block;*/
display:none;
vertical-align:.5rem;
margin-right:.45em;
padding:.25em;
color:var(--cream);
background-color:var(--member-color);
}
/* FORUM STYLES */
.forum-wrapper-grid-1, .forum-wrapper-grid-3 {
width: 100%;
margin: 0px auto;
padding: 3px;
display: inline-grid;
grid-template-columns: repeat(auto-fit, minmax(23%, 1fr));
grid-gap: .5rem;
}
.forum-wrapper-grid-5, .forum-wrapper-grid-6 {
width: 100%;
margin: 0px auto;
padding: 3px;
display: inline-grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: .5rem;
}
#innerwrapper.inner-SF {
}
#innerwrapper.inner-SF > #outer-24.outerforum {
grid-column: 1 / span 1;
}
#innerwrapper.inner-SF > #outer-24.outerforum {
grid-column: 2 / span 1;
}
#innerwrapper.inner-SF table {
grid-column: 4 / span 1;
}
#innerwrapper.inner-SF > form {
grid-column: 1 / span 4;
}
#outerfor {
padding: 0;
}
.outerforum ::-webkit-scrollbar {
display: none;
}
.outerforum {
margin: 0;
position: relative;
}
.forum-wrapper-grid-4 {
display:grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-auto-rows: minmax(185px, auto);
grid-gap: 1em;
}
#inner-grid-item #outer-4 {
width: inherit;
}
h2#subcat-7.sub-header {
color: var(--cream);
height: 200px;
background: url("https://anaxasdiaries.com/images/vienda-thumbnail.png") center / cover;
filter:none;
}
h2#subcat-8.sub-header {
color: var(--cream);
height: 200px;
background: url("https://anaxasdiaries.com/images/florne.png") center / cover;
filter:none;
}
h2#subcat-9.sub-header {
color: var(--cream);
height: 200px;
background: url("https://anaxasdiaries.com/images/gior-main-thumb.png") center / cover;
filter:none;
}
h2#subcat-10.sub-header {
color: var(--cream);
height: 200px;
background: url("https://anaxasdiaries.com/images/hesse-thumb.png") center / cover;
filter:none;
}
h2#subcat-11.sub-header {
color: var(--cream);
height: 200px;
background: url("https://anaxasdiaries.com/images/hox-main-thumb.png") center / cover;
filter:none;
}
h2#subcat-12.sub-header {
color: var(--cream);
height: 200px;
background: url("https://anaxasdiaries.com/images/mugroba-main-thumb.png") center / cover;
filter:none;
}
h2#subcat-15.sub-header {
color: var(--cream);
height: 200px;
background: url("https://anaxasdiaries.com/images/central-anaxas-thumbnail.png") center / cover;
filter:none;
}
h2#subcat-14.sub-header {
color: var(--cream);
height: 200px;
background: url("https://anaxasdiaries.com/images/lost-kingdoms-thumb.png") center / cover;
filter:none;
}
h2#subcat-13.sub-header {
color: var(--cream);
height: 200px;
background: url("https://anaxasdiaries.com/images/forum-character-correspondences.png") center / cover;
filter:none;
}
h2#subcat-7.sub-header > span#name-7, h2#subcat-8.sub-header > span#name-8, h2#subcat-9.sub-header > span#name-9, h2#subcat-10.sub-header > span#name-10, h2#subcat-11.sub-header > span#name-11, h2#subcat-12.sub-header > span#name-12, h2#subcat-14.sub-header > span#name-14, h2#subcat-15.sub-header > span#name-15 {
display: block;
width: 7em;
/*top: 3.75em;
right: -4.75em;*/
top:4.5rem;
position: relative;
font-family: var(--thorns-font);
font-size: 2rem;
letter-spacing: -0.015em;
padding-right: .5em;
color: var(--cream);
text-align: center;
line-height: .85em;
margin:0px auto;
}
h2#subcat-13.sub-header > span#name-13 {
font-family: var(--thorns-font);
display:block;
width: 9em;
top:5rem;
/*top: 3.75em;
right: -2.75em;*/
position: relative;
font-size: 2rem;
letter-spacing: -0.015em;
padding-right: .5em;
color: var(--cream);
text-align: right;
margin:0px auto;
}
span#name-7 > a:link, span#name-8 > a:link, span#name-9 > a:link, span#name-10 > a:link, span#name-11 > a:link, span#name-12 > a:link, span#name-13 > a:link, span#name-14 > a:link, span#name-15 > a:link,
span#name-7 > a:visited, span#name-8 > a:visited, span#name-9 > a:visited, span#name-10 > a:visited, span#name-11 > a:visited, span#name-12 > a:visited, span#name-13 > a:visited, span#name-14 > a:visited, span#name-15 > a:visited {
color:var(--cream);
text-decoration:none;
transition:.8s;
}
span#name-7 > a:hover, span#name-8 > a:hover, span#name-9 > a:hover, span#name-10 > a:hover, span#name-11 > a:hover, span#name-12 > a:hover, span#name-13 > a:hover, span#name-14 > a:hover, span#name-15 > a:hover,
span#name-7 > a:active, span#name-8 > a:active, span#name-9 > a:active, span#name-10 > a:active, span#name-11 > a:active, span#name-12 > a:active, span#name-13 > a:active, span#name-14 > a:active, span#name-15 > a:active{
color:var(--golden);
text-decoration:none;
background:transparent !important;
}
h2#subcat-7.sub-header:hover, h2#subcat-8.sub-header:hover, h2#subcat-9.sub-header:hover, h2#subcat-10.sub-header:hover,
h2#subcat-11.sub-header:hover, h2#subcat-12.sub-header:hover,
h2#subcat-13.sub-header:hover, h2#subcat-14.sub-header:hover,
h2#subcat-15.sub-header:hover {
filter: grayscale(80%);
transition:1.2s;
}
p.#stat-7.statsfor, p.#stat-8.statsfor, p.#stat-9.statsfor, p.#stat-10.statsfor, p.#stat-11.statsfor, p.#stat-12.statsfor, p.#stat-13.statsfor, p.#stat-14.statsfor, p.#stat-15.statsfor {
font-family:var(--sans-serif);
font-size:.7rem;
font-weight:400;
text-transform:uppercase;
letter-spacing:0.035em;
color:var(--cream);
transform:rotate(-90deg);
transform-origin:0 0;
margin-top:-5em;
margin-left:.5em;
}
span.play_status {
text-align:center;
display:block;
padding:.5em 0;
width:100%;
margin:0px auto;
/*border-bottom:1px solid var(--wm-brown);*/
border-bottom:1px solid #dbd4c9;
color:var(--leaf-green);
font-family:var(--sans-serif);
text-transform:uppercase;
font-size:.85em;
}
span.play_status.closed {
color: var(--rust);
}
span.key_locations {
font-family: var(--serif-body);
font-weight: 200;
font-size: .95em;
padding: 0;
margin: -.75em auto .5em;
text-align: center !important;
display: block;
}
span.key_locations a:link, span.key_locations a:visited {
text-decoration:none;
color: var(--text-color);
transition:.8s;
}
span.key_locations a:hover, span.key_locations a:active {
text-decoration:none;
color:var(--cream);
background-color:var(--golden);
}
span.key_locations b, span.key_locations strong {
font-weight:600;
text-align:center;
}
.innerforum {
}
.innerforum > .inner-grid-item {
padding:0 .25em;
}
.fornum > p.fornumin {
margin-top:0px;
font-family:var(--sans-serif);
font-size:.7rem;
font-weight:400;
text-transform:uppercase;
letter-spacing:0.025em;
display:block;
width:100%;
border-bottom:1px solid var(--border-color);
}
p#stat-5, p#stat-6, p#stat-18, p#stat-19, p#stat-21, p#stat-20, p#stat-22, p#stat-23 {
margin-top:0px;
font-family:var(--sans-serif);
font-size:.7rem;
font-weight:400;
text-transform:uppercase;
letter-spacing:0.025em;
display:block;
width:100%;
border-bottom:1px solid var(--border-color);
}
p#stat-7, p#stat-8, p#stat-9, p#stat-10, p#stat-11, p#stat-12, p#stat-13, p#stat-14, p#stat-15 {
font-family:var(--sans-serif);
font-size:.7rem;
font-weight:400;
text-transform:uppercase;
letter-spacing:0.035em;
color:var(--cream);
transform:rotate(-90deg);
transform-origin:0 0;
margin-top:-2em;
margin-left:.5em;
}
.fordescin > ol,
#desc-1 > ol,
#desc-3 > ol,
#desc-5 > ol,
#desc-6 > ol {
list-style-type:none;
margin-top:0;
}
.fordescin > ol > li {
font-family:var(--serif-body);
font-weight:400;
font-size:1.2rem;
line-height:1.35em;
margin-left:-1.85rem;
}
#desc-1 > ol > li,
#desc-3 > ol > li,
#desc-5 > ol > li,
#desc-6 > ol > li {
font-family:var(--serif-body);
font-weight:400;
font-size:1.2rem;
line-height:1.35em;
margin-left:-1.85rem;
}
#desc-1 > ol > li a:link,
#desc-3 > ol > li a:link,
#desc-5 > ol > li a:link,
#desc-6 > ol > li a:link,
#desc-1 > ol > li a:visited,
#desc-3 > ol > li a:visited,
#desc-5 > ol > li a:visited,
#desc-6 > ol > li a:visited {
text-decoration:none;
color: var(--text-color);
transition:.8s;
}
.fordescin > ol > li a:link,
.fordescin > ol > li a:visited {
text-decoration:none;
color: var(--text-color);
transition:.8s;
}
.fordescin > ol > li a:hover,
.fordescin > ol > li a:active {
text-decoration:none;
color:var(--cream);
background-color:var(--olive);
}
#desc-1 > ol > li a:hover, #desc-3 > ol > li a:hover, #desc-5 > ol > li a:hover, #desc-6 > ol > li a:hover, #desc-1 > ol > li a:active, #desc-3 > ol > li a:active, #desc-5 > ol > li a:active, #desc-6 > ol > li a:active {
text-decoration:none;
color:var(--cream);
background-color:var(--golden);
}
.fordescin > ol > li::before, #desc-1 > ol > li::before, #desc-3 > ol > li::before, #desc-5 > ol > li::before, #desc-6 > ol > li::before {
content: "» ";
color:var(--golden);
}
h2.sub-header {
font-family: var(--thorns-font);
font-size:1em;
letter-spacing:-.045em;
margin:0px;
}
h2.sub-header a:link, h2.sub-header a:visited {
text-decoration:none;
color:var(--text-color);
transition:.8s;
}
h2.sub-header a:hover, h2.sub-header a:active {
text-decoration:none;
color:var(--cream);
background-color:var(--golden);
}
.title {
display: flex;
padding: 0 0px;
flex-direction: column;
align-items: flex-start;
flex: 2;
margin-left: 20px;
margin-right: 40px;
}
.title a {
font-size: 40px;
color:var(--accent3)!important;
display: block;
text-transform: uppercase;
}
.descin {
/* line-height: 23px;
font-size: 10px;
max-height: 100px;
max-width: 300px;
overflow: auto;
text-align: justify;
font-size: 11px;*/
}
.postfor {
list-style: none;
font-weight: 100;
display: flex;
padding: 10px;
flex: 1;
align-items: center;
justify-content: space-between;
background: var(--backingaccent2);
}
.postfor ul {
list-style: none;
display: flex;
align-items: center;
}
.postfor li {
margin-right: 5px;
}
.postfor a {
}
.insubforums {
display: flex;
flex: 1;
justify-content: flex-end;
font-size: 0;
line-height: 13px;
align-items: center;
margin-top: 6px;
}
.insubforums a {
font-sizE: 11px;
margin: 0 8px;
text-transform: lowercase;
font-weight: 500;
}
a.subforums-macro {
display: none;
}
/***************************
custom topic view
****************************/
.outerforumtopic {
display: flex;
flex-direction: column;
padding: 20px;
margin: 20px 0;
position: relative;
background: var(--accent3);
}
.innerforum2 {
display: flex;
justify-content: space-between;
align-items: center;
padding: 35px 25px;
flex-wrap:wrap;
}
.outerforumtopic .topictitle {
display: block;
positioN: relative;
z-index: 2;
}
.outerforumtopic .topictitle a {
font-size: 30px;
display: block;
margin-bottom: 5px;
text-transform: uppercase;
}
.topicdesc1 {
margin-right: 12px;
line-height: 10px;
margin-top: -5px;
padding-top: 0;
margin-left: 3px;
height: 10px;
font-style: normal;
align-content: flex-end;
}
.topicaboutinf {
display: flex;
flex-direction: column;
height: 40px;
justify-content: space-between;
}
.outerforumtopic .abouttopic {
display: flex;
flex-direction: column;
align-items: flex-start;
positioN: relative;
z-index: 2;
}
.outerforumtopic .abouttopic .topicdesc {
margin-bottoM: 10px;
display: flex;
align-items: center;
}
.topicabout {
display: flex;
flex-wrap: wrap;
margin-top: 10px;
}
.topicabout .topicdesc {
margin-right: 25px;
display: inline-flex;
}
.topicdesc .topicic {
font-family: stroke;
width: 15px;
height: 15px;
padding: 2px;
line-height: 16px;
text-aligN: center;
letter-spacing: 0;
margin-right: 13px;
}
.topicdesc a {
margin: 0 7px;
font-weight: 700;
padding-bottom: 2px;
}
.announcetitle {
padding: 6px 10px;
margin: 15px 0;
}
.mcheck {
position: absolute;
right: 30px;
top: 0;
bottom: 0;
height: 18px;
margin: auto;
opacity: 0;
transitioN: 0.3s;
}
.outerforumtopic:hover .mcheck {
opacity: 1;
}
/***************
custom stats
****************/
#recent-topics-container {
grid-column: 2 / span 1;
display: block;
margin-top: -2em;
margin-bottom: 1em;
}
#recent-topics-container.recent-UserCP, #recent-topics-container.recent-SF, #recent-topics-container.recent-Profile, #recent-topics-container.recent-Reg, #recent-topics-container.recent-Post, #recent-topics-container.recent-Stats, #recent-topics-container.recent-Search, #recent-topics-container.recent-Members, #recent-topics-container.recent-Msg, #recent-topics-container.recent-Pages, #recent-topics-container.recent-ST, #recent-topics-container.recent-SC {
display:none;
}
.recent-topics-date {
display:block !important;
}
.board-stats {
width:90vw;
margin:0 auto 0;
padding:2em 0;
border-top:4px double var(--border-color);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1em;
}
.stats-grid > .stats-right {
font-family: var(--serif-body);
margin: 0px;
padding: 0;
grid-column: 1 / span 2;
}
.stats-right > .member-stats > h2, h2.affiliates, b.newest-member > h2, h2.current-stats {
font-family:var(--serif-title);
color:var(--text-color);
font-size:1.25em;
line-height:1.5rem;
letter-spacing:0.015em;
margin-top:.5em;
text-transform:lowercase;
font-weight:bold;
}
b.newest-member a:link, b.newest-member a:visited {
}
b.newest-member a:hover, b.newest-member a:hover {
border-bottom:1px solid var(--text-color);
transition:0s;
}
.affiliates {
display: block;
/*border-bottom: 1px solid var(--border-color);
padding-bottom: .25em;*/
}
ul.affiliates-buttons {
list-style-type: none;
display: flex;
margin: 0px auto;
padding: 0;
flex-direction: row;
flex-wrap: wrap;
}
.stats-right > .member-stats > h2 a:link, .stats-right > .member-stats > h2 a:visited, p.members-online > h2 a:link, p.members-online > h2 a:visited {
text-decoration:none;
color:var(--text-color);
transition:.8s;
}
.stats-right > .member-stats > h2 a:hover, .stats-right > .member-stats > h2 a:active, p.members-online > h2 a:hover, p.members-online > h2 a:active {
background-color:var(--golden);
color:var(--cream);
}
.stats-grid > .stats-left {
font-family:var(--serif-body);
margin:0px;
padding:0;
align-items: flex-start;
}
p.member-info, p.online-today, p.view-active-topics, p.affiliates-link, p.season-info {
margin-top: -1.5em;
font-family:var(--sans-serif);
font-size:.7rem;
font-weight:400;
text-transform:uppercase;
letter-spacing:0.025em;
display:block;
width:100%;
border-bottom:1px solid var(--border-color);
}
p.member-toggle {
margin:0px;
font-family:var(--sans-serif);
font-size:.7rem;
font-weight:400;
text-transform:uppercase;
letter-spacing:0.025em;
display:block;
width:100%;
border-bottom:1px solid var(--border-color);
}
p.member-info a:link, p.online-today a:link, p.member-toggle a:link, p.view-active-topics a:link, p.member-info a:visited, p.online-today a:visited, p.member-toggle a:visited, p.view-active-topics a:visited, p.season-info a:link, p.season-info a:visited {
text-decoration:none;
color:var(--golden);
transition:.8s;
}
p.member-info a:hover, p.online-today a:hover, p.member-toggle a:hover, p.view-active-topics a:hover, p.member-info a:active, p.online-today a:active, p.member-toggle a:active, p.view-active-topics a:active, p.season-info a:hover, p.season-info a:active {
text-decoration:none;
color:var(--cream);
background-color:var(--golden);
}
#current-weather-container {
grid-column: 1 / span 1;
/*margin-top: -2em;*/
}
#current-weather-container.weather-UserCP, #current-weather-container.weather-SF, #current-weather-container.weather-Profile, #current-weather-container.weather-Reg, #current-weather-container.weather-Post, #current-weather-container.weather-Stats, #current-weather-container.weather-Search, #current-weather-container.weather-Members, #current-weather-container.weather-Msg, #current-weather-container.weather-Pages, #current-weather-container.weather-ST, #current-weather-container.weather-SC {
display:none;
}
.season-blurb > .season-box {
border-bottom: 3px double var(--border-color);
height: 14em;
overflow-y: auto;
}
.season-blurb > .season-box > p {
font-family: var(--serif-body);
font-size: 1em;
}
.season-blurb > .season-box > p:first-child {
margin-top: 0.25em;
}
div.season-blurb > h2 > span.weather-announcement {
font-family: var(--sans-serif);
color: var(--text-color);
font-weight: normal;
text-transform: uppercase;
letter-spacing: .025em;
background-color: var(--ooc-label);
padding: 0.25em 0.5em;
vertical-align: top;
font-size:.45em;
}
img.weather-gif {
float:right;
clear:both; margin:0 .5em;
max-height: 13.5em;
border: 5px solid var(--background-color);
outline: 1px solid var(--border-color);
}
p.members-online {
font-family:var(--sans-serif);
font-size:.9em;
font-weight:400;
}
span.recent-title {
font-family:var(--serif-body);
}
span.recent-title a:link, span.recent-title a:visited {
text-decoration:none;
color:var(--text-color);
transition:.8s;
}
span.recent-title a:hover, span.recent-title a:active {
background-color:var(--olive);
color:var(--cream);
transition:.8s;
}
a.author:link, a.author:visited {
text-decoration:none;
font-family:var(--sans-serif);
font-size:.6em;
text-transform:uppercase;
color:var(--golden);
transition:.8s;
}
a.author:hover, a.author:active {
background-color:var(--rose);
color:var(--cream);
}
#recent-topics {
display: none;
}
#outerstats {
positioN: relative;
margin: auto;
background: var(--backingaccent2);
}
.innerstats {
display: flex;
flex-direction: column;
}
.subtitletext {
background: var(--accent3);
display: flex;
list-style: none;
padding: 0;
}
.subtitletext li {
flex: 1;
padding: 10px 0;
text-align: center;
}
.subtitletext li b {
font-weight: 100;
}
.topinstats {
display: flex;
}
.activelist {
padding: 20px;
max-height: 200px;
flex: 2;
}
.todayactivelist {
flex: 1;
padding: 20px;
max-height: 200px;
}
.recenttopics {
position: relative;
font-family:var(--serif-body);
}
div#recents.recent-idx {
/*max-height: 10em;*/
max-height:13.5em;
overflow-x: hidden;
overflow-y: auto;
counter-reset: topics;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
border-bottom: 3px double var(--border-color);
padding-bottom: .5em;
grid-gap:.5em;
}
.recent-posts > h2, .season-blurb > h2 {
font-family: var(--thorns-font);
color: var(--text-color);
font-size: 2rem;
line-height: 1.5rem;
letter-spacing: -0.015em;
border-top: 2px solid var(--border-color);
margin-top: 2em;
padding-top: .25em;
}
div#recents.recent-idx > .holdrec {
text-align: left;
padding: .25em 0px;
position: relative;
font-family: var(--sans-serif) !important;
text-transform: uppercase;
color: var(--text-color);
margin-bottom: .6rem;
font-weight: normal;
letter-spacing: .025em;
border-bottom:1px solid #dbd4c9;
}
div#recents.recent-idx > .holdrec {
text-align: left;
color: var(--text-color);
margin-bottom: .65rem;
}
div#recents.recent-idx > .holdrec::before {
content: "» ";
color:var(--golden);
}
div#recents.recent-idx::-webkit-scrollbar, .main-side-nav::-webkit-scrollbar, div.season-box::-webkit-scrollbar {
height: auto;
width: 0.5em;
}
div#recents.recent-idx::-webkit-scrollbar-track, .main-side-nav::-webkit-scrollbar-track, div.season-box::-webkit-scrollbar-track {
background-color:#dbd4c9;
width:1em;
}
div#recents.recent-idx::-webkit-scrollbar-thumb, .main-side-nav::-webkit-scrollbar-thumb, div.season-box::-webkit-scrollbar-thumb {
display: inline-block;
background-color:var(--golden);
height:2em;
}
div#recents.recent-idx::-webkit-scrollbar-track-piece, .main-side-nav::-webkit-scrollbar-track-piece, div.season-box::-webkit-scrollbar-track-piece {
background-color:#dbd4c9;
width:1em;
}
.rec-title {
font-size: .75em;
line-height: 1.35em;
display:inline-block;
margin-right:.5em;
}
.rec-title a strong {
display: inline-block;
font-family: var(--thorns-font) !important;
font-weight: normal;
text-transform: Capitalize;
font-size: 1.35em;
padding: .25em 0;
letter-spacing: -0.015rem;
}
.rec-title > a:link strong, .rec-title > a:visited strong {
text-decoration: none;
color: var(--text-color);
transition: .8s;
}
.rec-title > a:hover strong, .rec-title a:active strong {
background-color:var(--golden);
color:var(--cream);
transition: .8s;
}
/*.rec-title > a:hover, .rec-title > a:active {
color:var(--golden);
}*/
.rec-date {
display: inline-block;
font-size:.8em;
}
.bottomstatlinks {
display: flex;
flex: 1;
justify-content: space-around;
padding: 10px 0;
background: var(--accent3);
}
.bottomstatlinks a {
}
.bottomstatlinks li {
list-style: none;
}
#s-m-t-tooltip {
position: absolute;
z-index: 1;
left: 840px;
top: 2670px;
opacity: 0;
font-family: var(--sans-serif);
color:var(--golden);
background-color: var(--cream) !important;
padding: .25em .5em;
font-size: .65em;
text-transform: uppercase;
}
/****************************
custom post view
*****************************/
#outerpost {
display: flex;
flex-direction: column;
margin-bottom: 30px;
}
.topic-title-space {
display: none;
}
.topic-title {
margin-bottom: 5px;
display: block;
}
.topic-desc {
display: block;
margin-left: 2px;
}
.toppostarea {
background: var(--backingaccent2);
align-items: flex-start;
display: flex;
align-items: stretch;
}
.lefttopim {
margin-left: 35px;
display: flex;
align-items: center;
positioN: relative;
}
.postareasmallim {
}
.postareasmallim img {
width: 50px;
height: 50px;
}
.posttopname {
display: flex;
padding: 30px 35px;
align-items: flex-start;
flex-direction: column;
flex: 1;
}
.posttopname h1 {
margin: 0;
font-size: 35px;
}
.posttopname h1 a {
}
.posttopname h2 {
display: flex;
margin-top: 0;
list-style: none;
font-weight: 500;
font-size: 12px;
}
.posttopname h2 li {
margin-right: 23px;
}
.posttopname h2 {
align-items: center;
}
.posttopname h2 li b {
margin-right: 3px;
}
.bottompostarea {
display: flex;
background: var(--accent3);
}
.avatarpostarea {
display: flex;
positioN: relative;
}
.inpostarea img {
width: 200px;
height: 400px;
}
.postlinksav {
background: var(--backingaccent2);
display: flex;
height: 14px;
padding: 10px 20px;
justify-content: space-evenly;
}
.postlinksav a {
}
.leftpostarea {
flex: 1;
position: relative;
}
.postaboutarea {
top: 55px;
padding: 5px 0;
z-index: 10;
display: flex;
flex: 1;
background: var(--backingaccent3);
justify-content: space-between;
}
.postaboutarea li {
list-style: none;
}
.postaboutarea .button-small {
min-width: 50px;
max-width: 80px;
padding: 5px 15px;
line-height: 10px;
list-style: none;
positioN: relative;
top: -1px;
font-weight: 100;
margiN: 0 10px;
min-width: 0;
color: var(--link);
display: inline-flex;
}
.postaboutarea li i {
padding: 5px 15px;
line-height: 10px;
list-style: none;
positioN: relative;
top: -1px;
font-weight: 100;
margiN: 0 10px;
background-size: cover;
display: inline-flex;
font-style: normal;
}
.postaboutarea li i a {
margin-left: 3px;
}
.postareain {
padding: 30px;
}
/****************************
custom profile view
*****************************/
#outerprofile {
grid-column:1 / span 2;
}
.innerprofile {
display: grid;
width: 90vw;
margin:0 auto;
grid-template-columns: repeat(4, 1fr);
grid-template-rows:auto;
margin-top:1em;
grid-auto-flow:row;
grid-gap:1em;
align-items:center;
}
/***
MAIN PROFILE WRITER TABS
***/
#ooc-hold {
grid-column: 1 / span 3;
width: 97%;
/*height: 30em;*/
display:block;
margin: .5em auto 2em;
}
p.mature-choice {
display:block;
margin:0 auto;
width:90%;
padding:.25em .5em;
background: var(--member-color);
color:var(--text-color);
font-family:var(--serif-body);
font-size:1.0em;
line-height:1.5em;
border-bottom:1px solid var(--border-color);
}
p.mature-label {
display: block;
width: 92.75%;
margin-bottom: 0;
font-family: var(--sans-serif);
font-size: .75em;
text-align: right;
text-transform: uppercase;
letter-spacing: .015em;
margin-top: -.2em;
}
/* This wraps around the tabs, keeping them all in one area */
.tab-container {
display: flex;
flex-wrap: wrap;
width: 97%;
margin: 1em 0;
}
/* Hide the checkbox, do not use display:none as it prevents keyboard users navigating through the tabs */
.tab-container input[type="radio"] {
width: 0;
height: 0;
margin: 0;
opacity: 0;
padding: 0;
border: none;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
/* The label of the input, this is what you see and click on instead of an ugly radio button */
.tab-container label {
order: 1;
cursor: pointer;
color: var(--text-color);
padding: 5px 15px;
transition: all ease-out 0.2s 0.1s;
background-color:var(--footer-color);
}
.tab-container label:hover {
background-color:var(--member-color);
transition:.8s;
color:var(--cream);
}
/* The label "tab" when clicked */
.tab-container input[type="radio"]:checked + label {
/*border-bottom: 2px solid var(--border-color);*/
color: var(--cream);
cursor: default;
background-color:var(--member-color);
}
.tab-container input[type="radio"]:checked + label:hover {
background-color:var(--ooc-label);
transition:.8s;
}
/* How the label appears to keyboard users when it is focused on */
.tab-container input[type="radio"]:focus + label {
outline: 1px solid var(--border-color);
}
/* Panel styles */
.panel {
order: 99;
flex-grow: 0;
flex-basis: 0;
width: 0;
height: 0;
position: fixed;
top: 0;
left: 0;
z-index: -1;
opacity: 0;
visibility: hidden;
}
.panel > div#scroll-block {
max-height: 25em;
overflow-x: hidden;
overflow-y: auto;
padding: 0;
font-family: var(--serif-body);
font-size: 1.05em;
line-height: 1.35em;
}
/* Show panel when corresponding label is clicked
* This is where your tab panel styles like height, padding, backgrounds and fonts go */
.tab-container input[type="radio"]:checked + label + .panel {
position: relative;
visibility: visible;
z-index: 1;
opacity: 1;
transition: opacity ease-out 0.2s 0.1s;
flex-basis: 100%;
height: 23em;
padding: 1em .5em;
overflow: auto;
}
/* Vertical ID tabs will be vertical instead */
#vertical.tab-container {
flex-direction: column;
height:100%;
}
#vertical.tab-container label {
/*width: 20%;*/
flex-basis: unset;
flex-grow: 0;
margin: .25em 0;
font-family: var(--sans-serif);
text-transform: uppercase;
font-size: .8em;
letter-spacing: 0.025em;
text-align:center;
}
#vertical.tab-container label > span.number {
text-align:center;
font-family:var(--serif-title);
font-size:3.5em;
display:block;
font-weight:600;
margin:.35em auto;
}
#vertical.tab-container input[type="radio"]:checked + label + .panel {
width: 80%;
/*height:23em;*/
top: 0;
bottom:2em;
overflow:hidden;
}
/***
MAIN PROFILE CHARACTER CAROUSEL
html+css carousel base by essi.
https://sourced.jcink.net
***/
/***
this is your outermost container. whatever size you make this container will be the size of your carousel
***/
#car-hold {
grid-column: 1 / span 3;
width: 97%;
height: 30em;
margin: 0 auto;
position: relative;
/*background:#333;*/
}
#car-hold input {
display: none;
}
/****
this is the container of your left labels and right labels. these can be moved and positioned freely
****/
.left-tabs, .right-tabs {
position: absolute;
width: 1.5em;
height: 6.5em;
background: var(--member-color);
color:var(--text-color);
top: 0;
bottom: 0;
margin: auto;
z-index: 2;
transition:.8s;
}
.left-tabs:hover, .right-tabs:hover {
background: var(--ooc-label);
}
.left-tabs {
left: -1.5em;
}
.right-tabs {
right:-1.5em;
}
/****
these are your right and left labels. these need to stay absolutely positioned within their containers in order to display correctly
****/
.left-tabs label, .right-tabs label {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
#hold-carousel {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
/***
if you are adding or removing slides, make sure that you change the 500% to the correct ## of slides that you will have. 500% = 5 slides. 600% = 6 slides. 300% = 3 slides
***/
.carousel {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
width: 500%;
transition: .8s;
}
.tab {
display: block;
width: 100%;
/*height: 100%;*/
overflow-y: hidden;
overflow-x: hidden;
margin:0px auto;
padding:0 1.5em;
}
/***
if you are adding or removing slides, be sure to add or remove the following declarations as necessary.
-----
for the left labels:
if you are REMOVING a slide, you would remove:
#car5:checked ~ .left-tabs label:nth-child(4) for example.
if you are ADDING a slide you, you would add:
#car6:checked ~ .left-tabs label:nth-child(5)
***/
#car1:checked ~ .left-tabs label:last-child, #car2:checked ~ .left-tabs label:first-child, #car3:checked ~ .left-tabs label:nth-child(2), #car4:checked ~ .left-tabs label:nth-child(3), #car5:checked ~ .left-tabs label:nth-child(4) {
z-index: 3;
}
/***
for the right labels:
if you are REMOVING a slide, you would remove:
#car3:checked ~ .right-tabs label:nth-child(4) for example.
if you are ADDING a slide you, you would add:
#car4:checked ~ .right-tabs label:nth-child(5)
***/
#car4:checked ~ .right-tabs label:last-child, #car5:checked ~ .right-tabs label:first-child, #car1:checked ~ .right-tabs label:nth-child(2), #car2:checked ~ .right-tabs label:nth-child(3), #car3:checked ~ .right-tabs label:nth-child(4) {
z-index: 3;
}
/***
if you are adding or removing slides, be sure to add or remove extra of the following classes.
the slide either needs to be added or removed and must have a number attached to it's second class. if adding a slide, it should look like: <div class="tab"></div> in the html for example.
to make the carousel scroll properly, an extra class must be added that would look like this:
#car6:checked ~ #hold-carousel .carousel {
margin-left: calc(-100% * 5);
}
***/
#car1:checked ~ #hold-carousel .carousel {
margin-left: 0%;
}
#car2:checked ~ #hold-carousel .carousel {
margin-left: -100%;
}
#car3:checked ~ #hold-carousel .carousel {
margin-left: calc(-100% * 2);
}
#car4:checked ~ #hold-carousel .carousel {
margin-left: calc(-100% * 3);
}
#car5:checked ~ #hold-carousel .carousel {
margin-left: calc(-100% * 4);
}
/* END CAROUSEL */
.profile-top-links {
display: grid;
grid-column:1 / span 4;
margin: 0 0;
grid-gap: 1em;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.profile-top-item {
/*border-top:1px solid var(--border-color);*/
border-bottom:1px solid var(--border-color);
padding:.5em 0px;
padding: .5em 0px;
margin: -1.5em 0px 1em;
}
.profile-bottom-item {
border-top:1px solid var(--border-color);
/*border-bottom:1px solid var(--border-color);*/
padding:.25em 0px;
}
.profile-bottom-item-2 {
border-top:1px solid var(--border-color);
/*border-bottom:1px solid var(--border-color);*/
padding:0px 0px .25em 0px;
margin:0px;
}
.profile-top-item > span.profile-icon:hover, .profile-bottom-item > span.profile-icon::hover, profile-bottom-item-2 > span.profile-icon:hover {
color:var(--golden);
}
span.profile-icon > i {
float:left;
display:inline-block;
margin:0 1em 0 1em;
padding:.1em 0;
}
span.profile-link {
float:right;
font-family:var(--sans-serif);
font-size:.75em;
text-transform:uppercase;
}
span.profile-link > a, span.profile-link > a:visited {
display: block;
padding: .1em .25em;
color: var(--golden);
transition:.8s;
}
span.profile-link > a:hover, span.profile-link > a:active {
display: block;
padding: .1em .25em;
color: var(--cream);
background-color: var(--golden);
}
span.profile-link > a, span.profile-link > a:visted {
color:var(--golden);
transition: .8s;
background-color:transparent;
}
span.profile-link > a:hover + span.profile-icon:hover, span.profile-link > a:active {
color:var(--cream);
background-color:var(--member-color);
transition: .8s;
}
span.ooc-label {
font-family: var(--sans-serif);
font-size: .65em;
text-transform: uppercase;
display: inline-block;
line-height: 2.5em;
background: var(--ooc-label);
padding-left: .25em;
padding-right: .25em;
font-weight: 500;
}
span.ooc-info {
font-size:1.25em;
font-family: var(--serif-body);
font-weight:400;
text-transform:lowercase;
line-height:1.35em;
}
span.ooc-info a, span.ooc-info a:visited {
color:var(--member-color);
font-weight:600;
transition:.8s;
}
span.ooc-info a:hover, span.ooc-info a:active {
color:var(--cream);
background-color:var(--member-color);
transition:.8s;
}
.profile-user-name {
grid-column:1 / span 3;
font-family: var(--thorns-font);
font-size:3em;
text-align:left;
margin-top:.5em;
margin-bottom:.25em;
color:var(--text-color);
}
.profile-membergroup {
grid-column: 4 / span 1;
display: block;
width: 100%;
font-family: var(--serif-title);
font-weight: 600;
text-align: right;
font-size: 2em;
margin: .5em 0 0 0;
border-bottom: 4px solid var(--member-color);
padding: .25em 0 .25em 0;
line-height: 1em;
text-transform: lowercase;
}
.dossier {
grid-column: 1 / span 2;
grid-row: 3;
}
.profile-avatar {
grid-column: 4 / span 1;
grid-row: 3;
display: block;
}
.profile-avatar > img {
border: 6px solid var(--member-color);
outline: 2px solid var(--border-color);
/*width:100%;*/
height: 500px;
}
/*.aptitudes {
grid-column: 3 / span 1;
grid-row: 3;
}*/
#scroll-block {
/*display:grid;
grid-template-columns:auto;*/
max-height: 25em;
overflow-x: hidden;
overflow-y: auto;
padding:0 .5em;
font-family: var(--serif-body);
font-size: 1.05em;
line-height: 1.35em;
}
.dossier-block#scroll-block {
display:grid;
grid-template-columns:repeat(auto-fill, minmax(45%, 1fr));
grid-gap:1em;
}
p.dossier-entry {
font-family: var(--serif-body);
margin-bottom: -.75em;
font-size: 1.0em;
color: var(--text-color);
background: var(--dossier-entry);
padding-top: .5em;
padding-left: .5em;
padding-bottom: .25em;
margin-top: .25em;
}
p.dossier-label {
display:block;
/*width:100%; */
border-top:1px solid var(--border-color);
margin-bottom:0;
font-family:var(--sans-serif);
font-size:.75em;
text-align:right;
text-transform:uppercase;
letter-spacing:.015em;
}
.aptitudes > .profile-aptitudes {
padding:0 .25em 0 .25em;
margin-top: 2em;
}
.tab:is(#tab-Passive) {
width: 100%;
overflow-y: auto;
overflow-x: hidden;
margin: 0px auto;
padding: 0 1.5em;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap:.5em;
}
.aptitudes:is(#aptitude-Passive) {
grid-column: 1 / span 1;
grid-row: 1;
}
.profile-diablerie:is(#diablerie-Passive) {
grid-column: 2 / span 2;
grid-row: 1;
}
.profile-diablerie:not(#diablerie-Passive) {
display:none;
}
.profile-progress {
overflow: hidden;
height: .5em;
background-color: var(--profile-progress);
border-radius: 4px;
margin: 1.5em auto;
}
.profile-progress-bar {
width: 0;
height: 100%;
}
.profile-progress-bar.None {
width: 0%;
background-color:var(--member-color);
}
.profile-progress-bar.Poor, .profile-progress-bar.Untrained {
width: 20%;
background-color:var(--member-color);
}
.profile-progress-bar.Average, .profile-progress-bar.Novice {
width: 40%;
background-color:var(--member-color);
}
.profile-progress-bar.Good, .profile-progress-bar.Intermediate {
width: 60%;
background-color:var(--member-color);
}
.profile-progress-bar.Expert {
width: 80%;
background-color:var(--member-color);
}
.profile-progress-bar.Master {
width: 100%;
background-color:var(--member-color);
}
.member-progress {
overflow: hidden;
height: 0.5em;
background-color: var(--profile-progress);
border-radius: 4px;
margin: 0.5em auto;
}
.member-progress:first-child {
margin:1em auto 0.5em;
}
.member-label {
display:block;
width:100%;
font-family:var(--sans-serif);
font-size:.75em;
color:var(--text-color);
text-align:right;
text-transform:uppercase;
position:relative; top:-1.95em;
border-bottom:1px solid var(--text-color);
z-index:304;
}
.aptitude-label {
display:block;
width:100%;
margin:-1.5em 0 2.5em 0;
font-family:var(--sans-serif);
font-size:.75em;
color:var(--text-color);
text-align:right;
text-transform:uppercase;
}
.description {
grid-column: 1 / span 2;
}
.personality {
grid-column: 3 / span 2;
}
.break {
grid-column:1 / span 4;
margin:.5em 0;
}
.freeform {
grid-column: 1 / span 2;
}
.active-threads {
grid-column: 1 / span 2;
}
.finished-threads {
grid-column: 3 / span 2;
}
#scroll-block::-webkit-scrollbar, .tab::-webkit-scrollbar, #todos::-webkit-scrollbar {
height: auto;
width: 0.5em;
}
#scroll-block::-webkit-scrollbar-track, .tab::-webkit-scrollbar-track, #todos::-webkit-scrollbar-track {
background-color:var(--grey);
width:1em;
}
#scroll-block::-webkit-scrollbar-thumb, .tab::-webkit-scrollbar-thumb, #todos::-webkit-scrollbar-thumb {
display: inline-block;
background-color:var(--member-color);
height:2em;
}
#scroll-block::-webkit-scrollbar-track-piece, .tab::-webkit-scrollbar-track-piece, #todos::-webkit-scrollbar-track-piece {
background-color:var(--grey);
width:1em;
}
.ooc-sub-display {
grid-column: 1 / span 4;
width:100%;
/*margin-top:2em;*/
margin-bottom:.25em;
padding:1em 0;
}
h1#display-3.profile-title.subaccounts, h1#display-13.profile-title.subaccounts,
h1#display-14.profile-title.subaccounts, h1#display-15.profile-title.subaccounts,
h1#display-16.profile-title.subaccounts, h1#display-17.profile-title.subaccounts,
h1#display-19.profile-title.subaccounts {
display:none !important;
}
span#prof-subs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
grid-gap: 1em;
}
.prof-subWrap {
display: block;
padding: 1em 0 0 0;
grid-gap: 1em;
grid-auto-flow: row;
background-color: var(--footer-color);
}
.prof-subImg {
display: block;
background-size: cover;
background-position: center;
height: 150px;
width: 150px;
outline: 1px solid var(--border-color);
border: 4px solid var(--member-color);
padding: 0;
margin: 0 auto;
}
.prof-subWrap > b {
text-align: center;
display: block;
font-family: var(--serif-body);
font-weight: normal;
font-size: 1.15em;
padding: .5em 0 .15em 0;
color: var(--text-color);
line-height: 1.25em;
height:3em;
}
.prof-subWrap > a, .prof-subWrap a:visited {
display: block;
width: 100%;
margin: 0px auto;
text-align: center;
background: var(--member-color);
color: var(--wm-brown);
padding: .15em 0 0 0;
font-family: var(--sans-serif);
font-size: .75em;
text-transform: uppercase;
transition: .8s;
grid-column: 1 / span 3;
grid-row: auto;
height: 2em;
letter-spacing: 0.025em;
}
.prof-subWrap > a:hover, .prof-subWrap > a:active {
background-color:var(--golden);
color:var(--cream);
transition:.8s;
}
/*************************************
To-Do List
*************************************/
.to-do-list form {
width: 100%;
margin: 0px auto 10px;
}
.to-do-list .small-title {
height: 20px;
display: inline-block;
float: left;
font: 400 8px/20px var(--sans);
text-transform: uppercase;
letter-spacing: 2px;
background: var(--black);
color: var(--gold);
padding: 0px 10px; }
.to-do-list .input {
display: inline-block;
border: none;
width: 100%;
background: var(--ooc-label);
color: var(--text-color);
font-family: var(--serif-body);
font-size: 1em;
padding-top: .5em;
margin-top: .25em;
padding-left: .5em;
padding-bottom: 0.65em;
line-height: 1.35em;
margin-bottom: -1em;
}
.to-do-list .input::placeholder { color: var(--gray); }
.todos {
padding: 0;
margin: 0;
list-style-type: none;
width: 99%;
}
.todos ul { width: 100%; }
#todos {
height: 10em;
overflow-x: hidden;
overflow-y: auto;
padding-right: .5em ; }
.todos li {
display: inline-block;
background: transparent;
color: var(--gray);
cursor: pointer;
margin: 0px 5px 10px;
width: 90%;
font: 400 11px var(--sans);
vertical-align: top; }
/*.todos li:nth-of-type(odd) { display: inline-block; float: left; margin-left: 0px; }
.todos li:nth-of-type(even) { float: right ; display: inline-block; text-align: right; margin-right: 0px; }*/
.todos li:before {
content: '▢';
color: var(--text-color);
display: inline-block;
height: 1em;
width: 1em;
margin-right:.25em;
font-size: 1em;
line-height: 1.35em;
text-align: left;
}
.todos li.completed:before {
content: '✔';
color: var(--olive);
display: inline-block;
font-size: 1em;
}
.todos li.completed{
font-style: italic;
color: var(--olive);
}
/****************************************
Table Styles
*****************************************/
/*table, tbody, tr, td {
all: unset;
}*/
/*.inner-UserCP > table > tbody > tr, .inner-Msg > table > tbody > tr, .inner-store > table > tbody > tr, .inner-modcp > table > tbody > tr {
display: grid;
grid-gap: .5em;
grid-template-columns: 12em 0 auto;
}*/
/****************************************
Board Width
*****************************************/
/*#containboard {
max-width: 1200px;
margin: 60px auto;
border: var(--border);
background: var(--backingaccent);
position: relative;
min-width: 700px;
}*/
#wrapper {
text-align:left;
padding-bottom: 5px;
}
/****************************************
LINK COLORS
*****************************************/
a:link, a:visited {
text-decoration: none;
color: var(--text-color);
transition: .8s;
}
a:hover {
text-decoration:none;
color:var(--cream);
/*background-color:var(--golden);*/
}
/****************************************
Profile styles
*****************************************/
#profilename {
font-size:28px;
font-weight:bold;
}
#photowrap {
padding:6px;
}
#phototitle {
font-size:24px;
border-bottom:1px solid black;
}
#photoimg {
text-align:center; margin-top:15px;
}
/****************************************
UserCP/My Controls styles
*****************************************/
#ucpmenu {
line-height: 1em;
width: 25%;
color: var(--text-color);
}
#ucpmenu > div.pformstrip {
font-family: var(--thorns-font) !important;
font-size: 1em;
color: var(--text-color);
font-weight: 700;
display:block:
width:100%;
border-bottom:1px solid var(--border-color);
margin:.25em auto;
padding:30px;
}
#ucpmenu p {
padding:2px 5px 6px 9px;
margin:0px;
font-size:0px;
font-family:var(--serif-body);
}
#ucpmenu p > a::before {
content: "» ";
color: var(--member-color);
font-size: 18px !important;
}
#ucpmenu p > a, #ucpmenu p > a:visited {
text-transform: Capitalize;
font-size: 20px;
color: var(--text-color);
transition: .8s;
line-height: 150%;
}
#ucpmenu p > a:hover, #ucpmenu p > a:active {
text-decoration:none;
font-size: 20px;
background-color:var(--golden);
color:var(--cream);
}
#ucpcontent {
line-height:1em; width:auto;
}
#ucpcontent p {
padding:10px;
margin:0px;
}
/****************************************
Logo Strip
*****************************************/
#logostrip {
display: none;
}
#logo {
min-height: 60px;
text-align: left;
margin-top: 5px;
padding: 20px 20px 5px;
}
#logo a, #logo a:hover {
font-size: 36px;
text-decoration: none;
font-weight: bold;
color: #800000;
}
/****************************************
Search Bar
*****************************************/
#searchbar {
display: block;
float: right;
position: relative;
right: 10px;
top: 8px;
}
#searchbar .search-container {
background-color: #FFFFFF;
box-shadow: 0 1px 3px rgba(0,0,0,0.4) inset;
border: 1px solid #D8D8D8;
display: block;
height: 26px;
position: relative;
width: 200px;
}
#searchbar .search-input {
background: none repeat scroll 0 0 transparent;
border: 0;
color: #808080;
font-size: 12px;
width: 192px;
height: 26px;
font-family: Arial, sans-serif;
padding: 1px 0 0 8px;
}
#searchbar .search-input:focus {
color: #000000;
}
#searchbar .search-button {
background: #800000 url(https://files.jcink.net/themes/default/magnifying-glass.png) no-repeat 50% 50%;
border: 0;
bottom: 0;
margin: 0;
border-radius: 0;
display: block;
height: 26px;
padding: 0;
position: absolute;
right: 0;
text-indent: -3000em;
top: 0;
width: 26px;
cursor: pointer;
box-shadow: none;
}
/****************************************
Navigation Bar / Submenu
*****************************************/
#submenu {display: none;
font-size: 13px;
border: solid #555;
border-width: 1px 0;
background-color: #800000;
background-image: url(https://files.jcink.net/themes/default/red-gradient-glass.png);
background-position: center center;
margin-bottom: 3px;
}
#submenu img {
display: none;
}
#submenu a:link, #submenu a:visited, #submenu a:active {
text-decoration: none;
color: #fff !important;
padding: 7px 7px;
font-weight: bold;
}
#submenu a:hover {
color: #fff !important;
text-decoration: underline;
}
#navi br {
display: none;
}
/****************************************
Calendar styling
*****************************************/
.caldate {
text-align:right;
font-weight:bold;
font-size:11px;
color:#555;
background-color:#F2F2F2;
padding:4px; margin:0px;
}
#calendarname {
font-size:22px;
font-weight:bold;
}
#padandcenter {
margin-left:auto;
margin-right:auto;
text-align:center;
padding:14px 0px 14px 0px;
}
/**************************************************
User Links Menu (Messages / View new posts / etc )
***************************************************/
#userlinks { display: none;
border: 1px solid #545454;
background-color: #F2F2F2;
list-style: none;
width: 960px;
margin: 0 auto;
background-image:url(https://files.jcink.net/themes/default/white-gradient.png);
}
#userlinks td {
color: #333;
}
#userlinks a {
text-decoration: underline; padding: 1px;
}
#userlinks a:hover {
text-decoration: none;
}
/****************************************
Topic View styles
*****************************************/
.activeuserstrip {
font-size: 10px;
padding: 0 10px;
text-align: center;
font-weight: 700;
}
.activeuserstrip a {
}
.unreg {
font-size: 11px;
font-weight: bold;
color: #900;
}
.post1 {
}
.post2 {
}
.postdetails {
font-size: 10px;
}
.postcolor {
font-size: 12px; line-height: 160%;
}
.postlinksbar {
}
.postlinksbar a {
}
.signature {
display: none;
}
/*******************************
Pagination e.g. [1],2,3 ...
*******************************/
.pagination .pagination_current, .pagination a {
padding: 2px 5px;
background: var(--backingaccent3);
}
.pagination a:link, .pagination a:visited, .pagination a:active {
}
.pagination a:hover {
}
.pagination .pagination_current {
background: var(--accent3);
}
.pagination_first, .pagination_last, .pagination_page {
}
.pagination_pagetxt {
display:none;
}
/****************************************
Global general table/div row styles
*****************************************/
.row1,.row3,.row4,.row2 {
padding: 5px;
text-align: left;
font-family: var(--serif-body);
color: var(--text-color) !important;
font-size: 18px;
}
.row4 > strong {
font-weight:normal;
font-size:1.05em;
}
.footer > .tableborder > .row4 {
font-family:var(--san-serif) !important;
}
#boardstats .row2 {
text-align: center;
}
.row2 {
padding: 5px 10px;
text-align: center;
font-weight: 500;
}
.darkrow1 {
}
.darkrow2 {
padding: 0 10px;
text-align: center;
}
td.darkrow2 {
display: none;
}
.darkrow3 {
color: #000;
padding: 3px;
}
.hlight { background-color: #111; }
.dlight {
font-family:var(--serif-body);
color:var(--wm-brown);
font-size:1em;
}
.dlight:nth-child(even) { background-color: #dbd4c9; }
.dlight:nth-child(odd) { background-color: var(--cream); }
.dlight > th.titlemedium {
font-family:var(--thorns-font);
}
/****************************************
Bar directly below the maintitles
*****************************************/
.maintitle {
/*font-size: 1.5em;*/
font-family: var(--thorns-font);
color: var(--text-color);
border-top: 2px solid var(--border-color);
padding-top: .35em;
}
.maintitle a {
color: var(--text-color)!important;
}
span.collapse-button a:link, span.collapse-button a:visited, span.collapse-button a:hover, span.collapse-button a:active {
background:transparent;
}
.collapse-button {
display:inline-block;
width:1.15em !important;
}
/****************************************
Table & Div Borders
*****************************************/
.tableborder {
padding:0px; margin:0;
}
.tablefill {
padding:6px;
}
.tablepad {
padding:6px;
}
.tablebasic {
width:100%; padding:0; margin:0px; border:0px;
}
.plainborder {
}
/****************************************
QUOTE and CODE BBCode boxes
*****************************************/
#QUOTE {
white-space:normal;
font-family: open sans, sans-serif;
font-size: 11px;
color: #333;
background-color: #EFEFEF;
border: 0px;
padding:2px;
border:1px solid #555;
margin-top:2px;
}
#CODE {
white-space:normal;
font-family: Courier, Courier New, Verdana, Arial;
font-size: 11px;
color: #333;
background-color: #EFEFEF;
border: 0px;
padding:2px;
border:1px solid #555;
margin-top:2px;
}
/**********************************************
Input buttons, e.g. submit, text input, etc
***********************************************/
.button-large {
background: none;
padding: 7px 14px;
text-align:center;
margin:5px 5px 0px 5px;
background: var(--accent3);
font-weight: 700;
min-width: 75px;
font-size: 15px;
display: inline-block;
}
.post-buttons-top { margin-top: 3px; }
.button-large.closed {
color:#999!important;
}
.forminput, .codebuttons, .textinput, .radiobutton, .checkbox {
border-radius: 0px;
padding: 4px 8px;
vertical-align: middle;
outline: none;
background: var(--ooc-label);
border: 1px solid #ccc5b9;
color:var(--text-color);
font-family:var(--sans-serif);
font-size:.85em;
line-height:1.25em;
}
input[type=submit], input[type=button], input[type=reset] {
display:block:
margin:0px auto;
box-shadow: none;
text-decoration: none;
font-family: var(--sans-serif);
font-weight: 600;
text-transform:uppercase;
letter-spacing: 0.0125em;
border: none;
outline: none;
padding: 0.5em 1em;
background-color: var(--primary-link-color);
cursor:pointer;
text-align:left;
}
input[type=submit]:hover, input[type=button]:hover, input[type=reset]:hover {
display:block:
margin:0.25em 0;
box-shadow: none;
text-decoration: none;
font-family: var(--sans-serif);
font-weight: 600;
text-transform:uppercase;
letter-spacing: 0.0125em;
border: none;
outline: none;
padding: 0.5em 1em;
background-color: var(--member-color);
color: var(--cream);
cursor:pointer;
}
.codebuttons {
font-size: 10px;
}
#post-icon-options {
display: none;
}
/****************************************
Form table cell styles, left/right/top
*****************************************/
.pformstrip {
text-align: left;
padding: 1em 0 0 0;
line-height: 160%;
color:var(--text-color);
font-family: var(--thorns-font) !important;
font-size: 18px;
font-weight: bold;
margin-top: 2em;
}
.pformstrip-2 {
text-align: left;
color: var(--text-color);
/* padding: .5em 0; */
font-family: var(--sans-serif);
font-size: .8em;
line-height: 1.45em;
background: var(--ooc-label);
}
label[for=field_28_input], label[for=field_29_input], label[for=field_30_input] {
font-family: var(--thorns-font) !important;
font-size: 2em;
display: block;
width: 100%;
}
select#field_28_input, select#field_29_input, select#field_30_input {
margin-top:2em;
}
tr.pformstrip-2 > td {
padding: 1em .85em;
}
td.pformstrip {
border-bottom: 1px solid var(--border-color);
padding-bottom: .15em;
}
.pformleft {
padding: 6px;
margin-top: 1px;
width: 40%;
font-family: var(--sans-serif);
font-size: .75em;
line-height: 1.5em;
color: var(--text-color);
font-weight: 400;
}
.pformleft > label, td.pformleft b {
font-family:var(--thorns-font);
font-size:1em;
color:var(--text-color);
font-weight:700;
}
.pformleftw {
padding:6px;
margin-top:1px;width:40%;
}
.pformright {
padding:6px; margin-top:1px;
}
/****************************************
Tabs on the portal profiles + sections
*****************************************/
.opentab {
color: #FFF;
padding:8px;float: left; width: auto;
background-color: #800000;
background-image: url(https://files.jcink.net/themes/default/red-gradient.png);
margin-top:3px;
margin-right:2px;
font-size:11px;
border: #545454 1px solid;
}
.closedtab {
color: #FFF;
padding:7px;float: left;width: auto;
background-color: #800000;
background-image: url(https://files.jcink.net/themes/default/red-gradient.png);
margin-top:6px;
margin-right:2px;
font-size:11px;
border-top: #545454 1px solid;
border-right: #545454 1px solid;
border-left: #545454 1px solid;
}
.positiontab {
height: 34px; margin-left: 2px;
}
/****************************************
Delete all cookies / mark read
*****************************************/
#delcookiesrow, #mark-as-read-subto {
display:none;
}
#skin_selector {
display: none;
}
#board-cookies {
text-transform:uppercase;
font-size:1em !important;
}
/*******************************
Board Statistics Links
*******************************/
.toplinks a {
color: #ffffff;
font-size: 11px;
text-decoration: none;
}
.toplinks {
margin: 0 11px -37px 0;
text-align: right;
color: transparent;
}
/*******************************
Mini Profile Seperators
*******************************/
.postbit {
border-bottom: solid 1px #C0C0C0;
color: black;
background: #EFEFEF;
font-size: 11px;
padding: 6px 7px;
}
/* FOOTER */
.footer {
width:100vw;
display:grid;
margin:2em auto 0;
grid-gap:.5rem;
border-top:4px solid var(--border-color);
padding:1.5em 0 0;
font-family:var(--sans-serif);
font-size:.75rem;
font-weight:400;
text-align:center;
line-height:1.15rem;
background-color:var(--footer-color);
}
.footer a:link, .footer a:visited {
text-decoration:none;
color:var(--golden);
transition:.8s;
}
.footer a:hover, .footer a:active {
color:var(--cream);
background-color:var(--golden);
}
.footer-rose {
margin-top: 2em;
}
.footer-rose img {
margin:0px auto;
width:8em;
display:block
}
.footer-button > a:link, .footer-button a:visited {
display: block;
margin: 1.90em auto 0;
padding: .25em 0em;
text-align: left;
color: var(--text-color);
border-top: 1px solid var(--border-color);
text-decoration: none;
font-family: var(--serif-title);
font-size: 1.25em;
line-height: 1.5rem;
letter-spacing: 0.015em;
font-weight:bold;
}
.footer-button > a:hover, .footer-button a:hover {
color: var(--golden);
background-color: transparent;
transition:.8s;
}
.footer-button > a i {
background-color: transparent;
display:inline-block;
transition:.8s;
font-size:.8em;
--fa-primary-color: var(--fa-primary-color);
--fa-secondary-color: var(--fa-secondary-color);
}
.footer-button > a i:hover {
background-color: transparent;
--fa-primary-color: var(--icon-hover-color);
--fa-secondary-color: var(--icon-hover-color);
}
/********************************
Miscellaneous
********************************/
/* image tag styles */
img { vertical-align:middle; border:0px }
img.attach { border:2px outset #555;padding:2px }
/* Forum Descriptions */
.desc { font-size:11px; color: #000; }
/* Edited by text */
.edit { font-size: 9px }
/* Topic Macros */
.wrapmini { display: none;
float: left; }
/* Warning CSS */
.warngood { color:green }
.warnbad { color:red }
/* Skin selector dropdown */
#skin_selector {
margin: 10px 0;
}
/* Online users list row */
.thin {
padding:6px 0px 6px 0px;
line-height:140%;
margin:2px 0px 2px 0px;
border-top:1px solid #545454;
border-bottom:1px solid #545454;
}
/* Latest news area */
.newstext {
display: none;
background-color: #EFEFEF;
border: 1px solid #555;
padding: 6px 6px 2px 6px;
margin-bottom: 10px;
}
/* Highlighted text in search */
.searchlite {
color:#F00;
font-weight:bold;
background-color:#FF0;
}
/***SCROLL TO TOP***/
.scroll-up {
display: none;
position: fixed;
z-index: 501;
border: none;
outline: none;
cursor: pointer;
padding: 10px;
bottom: 20px;
right: 30px;
font-size: 1rem;
}
.scrollimg {
height: 15px;
width: 15px;
}
.scroll-up > i {
--fa-primary-color: rgb(24, 23, 20);
--fa-secondary-color: rgb(24, 23, 20);
}
.scroll-up > i:hover {
--fa-primary-color: rgb(176, 147, 68);
--fa-secondary-color: rgb(176, 147, 68);
}
a.scrollup:hover {
color:var(--golden);
background:transparent;
}
/***********************************
Copyright: Removal is against Terms
************************************/
.copyright {
position: relative;
top: 14px;
line-height: 12px;
text-transform: uppercase;
letter-spacing: 2px;
}
/****************************************
MEDIA QUERIES
*****************************************/
@media (prefers-color-scheme: dark) {
html {
content: "dark";
}
}
@media screen and (min-width:600px) {
.forum-wrapper-grid-5, .forum-wrapper-grid-6 {
grid-template-columns:repeat(auto-fit, minmax(48%, 1fr));
}
/*.inner-grid-item, .outerforum {
grid-column: auto;
}*/
}
/* iPads (portrait and landscape) */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
#innerwrapper {
grid-template-columns: repeat(auto-fit, min<!-- |field_27| -->max(48%, 1fr));
}
.category-wrapper-1, .category-wrapper-3,.category-wrapper-5, .category-wrapper-6 {
grid-column: 1 / span 2;
}
.tab-container {
display: flex;
flex-wrap: wrap;
width: 75%;
margin: 1em 0;
}
}
/* Tablet Devices, Desktop and Laptop Screens */
@media only screen and (max-width: 768px) {
.menu-avatar {
width:150px;
margin-top:0px;
}
.outerheader {
width:100vw;
}
.innerheader {
display: grid;
grid-template-columns: 1fr;
}
.forum-wrapper-grid-1, .forum-wrapper-grid-3 {
grid-template-columns:repeat(auto-fit, minmax(48%, 1fr));
}
#recent-topics-container, #current-weather-container {
grid-column: 1 / -1;
}
#recent-topics-container {
grid-row: 1;
margin-bottom:-1em;
}
#current-weather-container {
grid-row: 2;
margin-bottom:1.5em;
margin-top:0;
}
.text2 {
grid-column: 1 / span 4;
}
.text2 h3 {
text-align: center;
margin-top:20.5rem;
}
.text1 {
grid-column: 1 / span 4;
margin-top:12rem;
}
.text1 h1 {
margin-left: 0;
}
.text1 h2 {
margin-left: 0;
text-transform:lowercase;
letter-spacing:0.0125em;
}
.rose1 {
background-size: 48%;
background-position: right top;
}
.rose2 {
background-size: 100%;
background-position: -10em top;
}
.category-wrapper-1, .category-wrapper-3, .category-wrapper-5, .category-wrapper-6 {
grid-column: 1 / span 2;
}
.innerprofile {
display: grid;
width: 90vw;
margin: 0 auto;
margin-top: 1em;
align-items:center;
justify-items:stretch;
}
.profile-user-name {
grid-column:1 / span 4;
font-size:2em;
margin-bottom:-1.35em;
transition:linear .8s;
text-align:center;
grid-row: 2;
}
.profile-membergroup {
grid-column:1 / span 4;
margin-top:1em;
text-align:center;
grid-row: 3;
}
.profile-avatar {
grid-column: 1 / span 4;
grid-row:4 !important;
margin:0px auto;
text-align:center;
}
.profile-avatar > img {
/*max-width: 80%;*/
display:block;
max-height:650px;
border:6px solid var(--member-color);
outline:2px solid var(--border-color);
text-align:center;
margin:0px auto;
}
.active-threads {
grid-column: 1 / span 4;
grid-row: 6;
}
.finished-threads {
grid-column: 1 / span 4;
grid-row: 7;
}
.aptitudes:is(#aptitude-Passive) {
grid-column: 1 / span 3;
grid-row: 1;
}
.profile-diablerie:is(#diablerie-Passive) {
grid-column: 1 / span 3;
grid-row: 2;
}
#car-hold {
grid-column: 1 / span 4;
grid-row:5;
}
#top-links.profile-top-links {
grid-row:1;
}
#bottom-links-1.profile-top-links {
grid-row:9;
}
#bottom-links-2.profile-top-links {
grid-row:10;
}
.profile-top-item > .profile-link {
text-align:center;
float:none;
}
.profile-top-item > .profile-link a:link {
text-align:center;
}
.profile-bottom-item-2 {
border-top: 1px solid var(--border-color);
padding: .25em 0px .25em 0px;
margin: 0px;
}
span.profile-icon > i {
display: block;
margin: -1em 0 .25em;
padding: 0;
text-align: left;
font-size: 1.5em;
}
.dossier-block#scroll-block {
display: grid;
grid-template-columns: 1fr;
grid-gap: 1em;
}
#scroll-block {
overflow-x: hidden;
overflow-y: auto;
padding-bottom: .5em;
padding-right: 1em;
font-family: var(--serif-body);
font-size: 1.125em;
line-height: 1.45em;
background: transparent;
padding-left: 0;
}
.stats-grid {
grid-template-columns:1fr;
}
.stats-right {
grid-row: 2
}
.left-tabs, .right-tabs {
position: absolute;
width: 2.75em;
height: 10em;
background: var(--ooc-label);
top: 0;
bottom: 0;
margin: auto;
z-index: 2;
transition: .8s;
}
#ooc-hold {
grid-column: 1 / span 4;
grid-row:5;
height: auto;
}
.tab-container {
width: 100%;
}
.tab-container .panel,
.tab-container label {
order: initial;
}
.tab-container label {
width: 100%!important;
margin-right: 0;
margin-top: 0.2rem;
}
.tab-container input[type="radio"]:checked + label + .panel {
height: unset;
}
#vertical.tab-container {width: 100%; height: unset; flex-direction: row;}
#vertical.tab-container label {width: 100%;flex-basis: 100%;}
#vertical.tab-container input[type="radio"]:checked + label + .panel {width: 100%;}
}
}
@media screen and (min-device-width: 320px) and (max-device-width: 480px)
/*and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5)*/ {
body {
font-size:36px !important;
}
.topbar {
height: 5em;
}
.main-side-nav > .sidenav > ol {
font-size:1.85em;
line-height:1.25em;
}
#innerwrapper {
grid-template-columns: 1fr;
}
.category-wrapper-1, .category-wrapper-3, .category-wrapper-5, .category-wrapper-6 {
grid-column: 1 / span 2;
}
.inner-grid-item, .outerforum {
grid-column: 1 / span 2;
}
.forum-wrapper-grid-1, .forum-wrapper-grid-3, .forum-wrapper-grid-5,
.forum-wrapper-grid-6 {
grid-column: auto;
}
h2#subcat-7.sub-header > span#name-7, h2#subcat-8.sub-header > span#name-8,
h2#subcat-9.sub-header > span#name-9, h2#subcat-10.sub-header > span#name-10,
h2#subcat-11.sub-header > span#name-11, h2#subcat-12.sub-header > span#name-12,
h2#subcat-14.sub-header > span#name-14, h2#subcat-15.sub-header > span#name-15 {
font-size:3rem;
}
h2#subcat-13.sub-header > span#name-13 {
font-size:3rem;
}
.category-section > h1, .recent-posts > h2 {
font-size:5rem;
line-height:2.25em;
border-top:3px solid var(--border-color);
}
h2.sub-header {
font-size:3.5rem;
}
.recent-posts > h2::before, .category-section > h1.title-cat-1::before,
.category-section > h1.title-cat-3::before, .category-section > h1.title-cat-4::before,
.category-section > h1.title-cat-5::before, .category-section > h1.title-cat-6::before {
display:none;
}
.fordescin > ol > li, #desc-1 > ol > li, #desc-3 > ol > li, #desc-5 > ol > li,
#desc-6 > ol > li {
font-size: 4rem;
line-height: 1.35em;
}
.innerprofile {
display: grid;
width: 90vw;
margin: 0 auto;
margin-top: 1em;
}
.profile-user-name {
grid-column:1 / span 4;
font-size:2em;
margin-bottom:-1.35em;
transition:linear .8s;
text-align:center;
grid-row: 2;
}
.profile-membergroup {
grid-column:1 / span 4;
margin-top:1em;
text-align:center;
grid-row: 3;
}
.profile-avatar {
grid-column: 1 / span 4;
grid-row: 4 !important;
margin:0px auto;
text-align:center;
}
.profile-avatar > img {
display: block;
width: 90vw;
height:100%;
border: 6px solid var(--member-color);
outline: 2px solid var(--border-color);
text-align: center;
margin: 0px auto;
}
#car-hold {
grid-column: 1 / span 4;
grid-row:5;
}
h1.profile-title {
margin-top:1em;
font-size:3.5rem;
padding-top:.5em;
}
h1.profile-title.subaccounts {
margin-top:1em;
font-size:3.5rem;
padding-top:.5em;
}
h1.profile-title.dossier::before, h1.profile-title.aptitudes::before,
h1.profile-title.description::before, h1.profile-title.personality::before,
h1.profile-title.freeform::before, h1.profile-title.active-threads::before,
h1.profile-title.finished-threads::before, h1.profile-title.subaccounts::before {
display:none;
}
.profile-top-links {
display: grid;
grid-column: 1 / span 4;
margin: 0 0;
}
#top-links.profile-top-links {
grid-row:1;
margin-top:2em;
}
#bottom-links-1.profile-top-links {
grid-row:9;
}
#bottom-links-2.profile-top-links {
grid-row:10;
}
.profile-top-item > .profile-link {
text-align:center;
float:none;
}
.profile-top-item > .profile-link a:link {
text-align:center;
}
.aptitudes:is(#aptitude-Passive) {
grid-column: 1 / span 3;
grid-row: 1;
}
.profile-diablerie:is(#diablerie-Passive) {
grid-column: 1 / span 3;
grid-row: 2;
}
/*.description, .personality, .freeform {
grid-column: 1 / span 4;
}*/
.active-threads {
grid-column: auto / span 4;
grid-row:7;
}
.finished-threads {
grid-column: auto / span 4;
grid-row:8;
}
.profile-bottom-item-2 {
border-top: 1px solid var(--border-color);
/* border-bottom: 1px solid var(--border-color); */
padding: .25em 0px .25em 0px;
margin: 0px;
}
span.profile-icon > i {
display: block;
margin: -1em 0 .25em;
padding: 0;
text-align: left;
font-size: 1.5em;
}
.dossier-block#scroll-block {
display: grid;
grid-template-columns: 1fr;
grid-gap: 1em;
}
#scroll-block {
/*max-height: 20em;*/
overflow-x: hidden;
overflow-y: auto;
padding-bottom: .5em;
padding-right: 1em;
font-family: var(--serif-body);
font-size: 1.125em;
line-height: 1.35em;
background: transparent;
padding-left:0;
}
.stats-grid {
display:grid;
grid-template-columns:auto;
}
p#stat-7, p#stat-8, p#stat-9, p#stat-10, p#stat-11, p#stat-12,
p#stat-13, p#stat-14, p#stat-15 {
display:none;
}
.topbar-title {
display:none;
}
.topbar > .topbar-pass {
grid-column-start: .5;
text-align: left;
margin-left: 3em;
margin-top: .25em;
margin-right: 0.25em;
height: 2.35em;
width: 2.35em;
background-image: var(--passive-symbol);
transition: .8s;
}
.topbar-toggle#one > i, .topbar-toggle#two > i {
font-size: 2.35em;
transition: .8s;
margin-top: .075em;
}
label.fas {
cursor: pointer;
font-size: 2.35em;
--fa-primary-color: var(--icon-primary-color) !important;
--fa-secondary-color: var(--icon-secondary-color, 1) !important;
transition: .8s;
margin-top: .075em;
}
.innerheader {
width:100vw;
height:18em;
/*background: var(--header-mobile) no-repeat top center;
background-size:contain;
background-color:var(--background-color);*/
border-bottom:5px double var(--border-color);
}
.text2 {
grid-column: 1 / span 4;
}
.text2 h3 {
text-align: center;
margin-top:22rem;
font-size: 1.5em;
}
.text1 {
grid-column: 1 / span 4;
margin-top:7.5rem;
}
.text1 h1 {
margin-left: 0;
font-size:5em;
}
.text1 h2 {
margin-left: 0;
text-transform:lowercase;
letter-spacing:0.0125em;
font-size:4em;
}
.rose1 {
background-size: 48%;
background-position: right top;
}
.rose2 {
background-size: 100%;
background-position: -10em top;
}
.menu-avatar {
display:none;
}
div#recents.recent-idx {
max-height: 15em;
overflow: scroll !important;
}
.left-tabs, .right-tabs {
position: absolute;
width: 2.75em;
height: 10em;
background: var(--ooc-label);
top: 0;
bottom: 0;
margin: auto;
z-index: 2;
transition: .8s;
}
#ooc-hold {
grid-column: 1 / span 4;
grid-row:5;
height: auto;
}
.tab-container {
width: 100%;
}
.tab-container .panel,
.tab-container label {
order: initial;
}
.tab-container label {
width: 100%!important;
margin-right: 0;
margin-top: 0.2rem;
}
.tab-container input[type="radio"]:checked + label + .panel {
height: unset;
}
#vertical.tab-container {width: 100%; height: unset; flex-direction: row;}
#vertical.tab-container label {width: 100%;flex-basis: 100%;}
#vertical.tab-container input[type="radio"]:checked + label + .panel {width: 100%;}
}
}
/********************************
Media Queries for mobile screens
Basic mobile styling by Sage - https://sage-codes.tumblr.com
********************************/
@media only screen and (max-width: 568px) {
/* Registration page styling for mobile */
/* Posting page styling for mobile */
/* Moderating Team page styling for mobile */
/* Search page styling for mobile */
/* UCP styling for mobile -- you can take this out of the media query to use for desktop too */
/* Message Inbox styling for Mobile */
}
!
