Journal CSS

[style]// For the overall post:
@border: #C09C6E; // The border around the post.
@title: #C09C6E; // The title under the banner.
@titleglow: #A31D0C; // The glow around the title.
@background: #3A2B26; // The overall background.
@link: #D6B284; // Links.
@linkh: #EA9998; // When hovering over a link.
@linka: #FFFFFF; // Active link.
@text: #f2DBD1; // Overall text colour.

// For boxes, tables and tooltips:
@border2: #C09C6E; // Borders.
@background2: #3A2B26; // Header backgrounds.
@background3: #574843; // Content backgrounds.
@link2: #C1DCE6; // Secondary link colour.
@linkh2: #FCC7B9; // Secondary hover link colour.
@linka2: #FFFFFF; // Secondary active link colour.
@title2: #C09C6E; // Header titles.
@titleh: #F2DBD1; // Header titles when hovering.
@text2: #F2DBD1; // Content text color.

// For the exp bars:
@expimage: url("");
@expimage2: url("");
@background4: #3A2B26;
@background5: #574843;
@border3: #C09C6E;

// For the bottom navigation links:
@link3: #C09C6E; // Nav link.
@linkh3: #EA9998; // Nav hover.
@nav: #C09C6E; // Nav text color.
@navglow: #A31D0C; // The glow.

// Background images:
@backimage: url("");
@backimage2: url("");
@backimage3: url("");

// Region flag:
@flag: url("https://pfq-static.com/img/dex/flags/all.svg/t=1576842644#pfq");

// This font is for the post title and the bottom navigation links.
@font-face {
        font-family: 'acme';
        src: url(https://fonts.gstatic.com/s/acme/v7/RrQfboBx-C5_XxrBaA.woff) format('woff');
        }

a { // URL BBCode.
        color: @link;
        text-decoration: none;
        }
        a:hover {
        color: @linkh;
        text-decoration: underline;
        }
        a:active {
        color: @linka;
        }

.border { // The border around the entire post.
        border: 5px solid @border;
        }

.banner { // The glowy text banner.
        color: @title;
        font-family: 'acme', Times New Roman;
        letter-spacing: 3px;
        line-height: 25px;
        padding: 2% 1% 2% 1%;
        text-shadow: 0 0 3px @titleglow, 0 0 5px @titleglow;
        text-transform: uppercase;
        }

.background {
        background-image: @backimage;
        background-repeat: repeat;
        background-attachment: fixed;
        background-color: @background;
        color: @text;
        font-family: 'calibri light', calibri;
        font-size: 15px;
        padding: 2% 5% 0% 5%;
        }

.flag { // The flags used on my dexing posts.
        background-image: @flag;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 50%;
        padding: 18%;
        }

.scarab_head { // My boy.
        position: absolute;
        right: 15px;
        width: 80px;
            span.bbcode_tooltip {
            border-bottom: 0px;
            }}

h1 {
        margin: 0;
        font-size: 25px;
        font-weight: normal;
        text-align: center;
        }

h2 {
        margin: 0;
        font-size: 20px;
        font-weight: normal;
        text-align: left;
        }

hr { // Horizontal rule, [hr].
        border: 2px solid @border;
        margin: 0;
        }

span.bbcode_tooltip { // Tool tip BBCode.
        border-bottom: 1px solid @border2;
        }
        .tooltip_content {
            background-color: @background2;
            background-image: @backimage2;
            background-repeat: repeat;
            border: 2px solid @border2;
            border-radius: 0;
            color: @text2;
            font-family: 'calibri light', calibri;
            font-size: 14px;
            padding: 10px;
            text-align: center;
            }

.tabbed_interface { // Tabs BBCode.
        border-radius: 0px;
        box-shadow: 0 0 0 transparent;
        ul {
            background-color: @background2;
            background-image: @backimage2;
            background-repeat: repeat;
            border-bottom: 0;
            border-radius: 0px;
            border-top: 2px solid @border2;
            box-shadow: 0 0 0 transparent;
            color: text2;
            }
        li {
            background-color: transparent;
            border: 2px solid @border2;
            border-top: 0;
            color: @title2;
            font-size: 20px;
            font-family: 'calibri light', calibri;
            font-weight: bold;
            padding: 3px;
            text-align: center;
            }
            li:before {
            display:none;
            }
            li:hover {
            color: @titleh;
            cursor: pointer;
            }
        li.tab-active {
            background-image: @backimage3;
            background-repeat: repeat;
            background-color: @background3;
            border-bottom: 0px;
            color: @text2;
            }
        .tab {
                background-image: @backimage3;
                background-repeat: repeat;
                background-color: @background3;
                border-radius: 0px;
                border: 2px solid @border2;
                border-top: 0px;
                box-shadow: 0 0 0 transparent;
                color: @text2;
                font-size: 15px;
                padding: 3%;
                    a { // URL BBCode inside tabs.
                    color: @link2;
                    }
                    a:hover {
                    color: @linkh2;
                    text-decoration: underline;
                    }
                    a:active {
                    color: @linka2;
                    }
                    }}

.panel { // Accordion, A-section, Display, Hide, Stackbox BBCode.
        border: 1px solid @border2;
        border-radius: 0px;
        box-shadow: 0 0 0 transparent;
            &>h3 {
            background-image: @backimage2;
            background-repeat: repeat;
            background-color: @background2;
            border-radius: 0px;
            border: 1px solid @border2;
            color: @title2;
            font-size: 20px;
            font-family: 'calibri light', calibri;
            font-weight: bold;
            padding: 3px;
            a {
                color: @title2!important;
                }
                a:hover {
                color: @titleh!important;
                text-decoration: none!important;
                }}
                &>div {
                background-color: @background3;
                background-image: @backimage3;
                background-repeat: repeat;
                border: 1px solid @border2;
                border-radius: 0px;
                border-top: 1px solid @border2;
                color: @text2;
                font-size: 15px;
                padding: 3%;
                    a { // Links inside panels.
                    color: @link2;
                    }
                    a:hover {
                    color: @linkh2;
                    text-decoration: underline;
                    }
                    a:active {
                    color: @linka2;
                    }
                    }}

table { // Table BBCode.
        border: 2px solid @border2;
        margin: 0px auto;
        }
        td { // Table cell.
            background-color: @background3;
            background-image: @backimage3;
            background-repeat: repeat;
            border: 2px solid @border2;
            color: @text2;
            padding: 1px 5px 1px 5px;
            text-align: left;
            }
        th { // Table heading.
            background-color: @background2;
            background-image: @backimage2;
            background-repeat: repeat;
            border: 2px solid @border2;
            color: @text2;
            padding: 1px 5px 1px 5px;
            text-align: center;
            text-transform: uppercase;
            }

.expbar { // The main part of an exp bar.
        background-color: @background4;
        background-image: @expimage;
        background-repeat: repeat;
        border: 2px solid @border3;
        border-radius: 0;
        color: #C1DCE6;
        margin: 1px;
        padding: 3px;
            &>div { // The part that fills in as you progress.
            background-color: @background5;
            background-image: @expimage2;
            background-repeat: repeat;
            border-right: 2px solid @border3;
            }
        }

ul { // Default list.
                    font-size: 15px;
                    list-style: none;
                    margin: 0;
                    padding: 0;
                    text-align: left;
                    }
                    ul li:before { // The arrow in front of a list.
                    content: '► ';
                    font-size: 10px;
                    font-weight: bold;
                    }

.list { // A custom list style for use inside the tab BBCode.
                    font-size: 15px;
                    list-style: none;
                    margin: 0;
                    padding: 0;
                    text-align: left;
                    }
                    .list:before { // The arrow in front of my custom list.
                    content: '► ';
                    font-size: 10px;
                    font-weight: bold;
                    }

.box { // A custom box. Looks like a Display box without the header bit.
        background-color: @background3;
        background-image: @backimage3;
        background-repeat: repeat;
        border: 2px solid @border2;
        border-radius: 0px;
        color: @text2;
        font-size: 15px;
        padding: 3%;
        }

.new { // The blinking news alert.
        animation: pulse 4s infinite;
        display: inline-block;
        border-radius: 50%;
        height: 10px;
        vertical-align: middle;
        width: 10px;
        }

.nav { // Navigation links at the bottom.
        color: @nav;
        font-family: 'acme', Times New Roman;
        font-size: 13px;
        letter-spacing: 3px;
        line-height: 25px;
        text-align: center;
        text-shadow: 0 0 3px @navglow, 0 0 5px @navglow;
        text-transform: uppercase;
        a {
        color: @link3;
        text-decoration: none;
        }
        a:hover {
        color: @linkh3;
        }}

.tabbed_interface::after { // Removes some weird spacing that happens on Firefox.
       display: none;
       }[/style]