@charset "UTF-8";
/***
* My Special Styles
*
* Websites:
* 1. Tomes of Knowledge™: https://jcsesecuneta.com
* 2. gameshogun™: https://gameshogun.xyz
* 3. Clean Real Food™: https://realfood.space
* 4. techmagus™: https://techmagus.icu
* 5. One Way Faith™: https://yahananxie.com
* 6. Snoworld™: https://snoworld.one
* 7. YourOnly.One™: https://youronly.one
* 8. Verses.Space™: https://verses.space
*
* Contact: jcjohn.sesecuneta@gmail.com
***/
/***
* paninap-style.css Copyright © 2003-2018 Yukia Yahohanan Sese Cuneta
*
* License: Mozilla Public License Version 2.0 ("MPL 2.0")
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*
* License: GNU LESSER GENERAL PUBLIC LICENSE Version 3 ("LGPLv3")
* This program is free software: you can redistribute it and/or modify
* it under the terms of the Lesser GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* Lesser GNU General Public License for more details.
*
* You should have received a copy of the Lesser GNU General Public License
* along with this program. If not, see .
***/
/*************************
* BGN: Global Settings *
*************************/
/*
* 1. Set font-variant-numeric to how it should be.
* 2. Browser hyphenation algorithm is incorrect. Turn-off globally.
* 3. But keep word-wrap on, to allow wrapping of very long words.
*/
* {
/* font-variant-numeric: lining-nums tabular-nums ordinal slashed-zero;*/
font-variant-numeric: oldstyle-nums proportional-nums slashed-zero;
-webkit-hyphens: none;
-ms-hyphens: none;
hyphens: none;
word-wrap: break-word;
}
/*************************
* END: Global Settings *
*************************/
/************************
* BGN: COMMON CLASSES *
************************/
/* ADs */
.myads,
.my_ads {
margin-top: 8px;
margin-bottom: 8px;
}
ins.adsbygoogle {
background: transparent !important; /* Ensures no override */
margin-bottom: 8px;
}
/* Alignments */
.inline {
display: inline;
}
.block {
display: block;
}
.center { /* backwards compatibility; generic; remove this eventually */
margin: 0 auto;
text-align: center;
}
[class*="-percent"],
.block_center,
.inline_center {
margin: 0 auto;
}
.img_center {
display: block;
margin: 0 auto;
}
.txt_center {
text-align: center;
}
.txt_left {
text-align: left;
}
.txt_right {
text-align: right;
}
.txt_justify {
text-align: justify;
}
.txt_middle {
vertical-align: middle;
}
.float_left {
float: left;
}
.float_right {
float: right;
}
img.float_left {
margin: 0 10px 5px 0;
}
img.float_right {
margin: 0 0 5px 10px;
}
.float_clear_both,
.float_clear {
clear: both;
}
.float_left_clear {
clear: left;
}
.float_right_clear {
clear: right;
}
/* Font Styles */
[class*="nums-"] {
font-family: 'Source Sans Pro', sans-serif;
}
[class*="-mono"] {
font-family: 'Source Code Pro', monospace;
}
[class*="-serif"] {
font-family: 'Source Serif Pro', serif;
}
/* BGN: OpenType Stacked-Fractions (afrc) */
[class*="nums-fractions"] {
-webkit-font-kerning: normal;
font-kerning: normal;
-webkit-font-variant-ligatures: common-ligatures, discretionary-ligatures, historical-ligatures, contextual;
font-variant-ligatures: common-ligatures, discretionary-ligatures, historical-ligatures, contextual;
font-variant-numeric: oldstyle-nums, tabular-nums, stacked-fractions, slashed-zero;
-webkit-font-feature-settings: "kern", "locl", "ccmp", "mark", "mkmk", "rlig", "liga", "clig", "dlig", "hlig", "calt", "onum", "tnum", "afrc", "zero", "hist", "salt", "ss01", "cv01", "swsh", "cswh";
font-feature-settings: "kern", "locl", "ccmp", "mark", "mkmk", "rlig", "liga", "clig", "dlig", "hlig", "calt", "onum", "tnum", "afrc", "zero", "hist", "salt", "ss01", "cv01", "swsh", "cswh";
/* font-family: "none-found-yet"; */ /* OpenType fonts with Fractions support */
}
/* END: OpenType Stacked-Fractions (afrc) */
/* BGN: OpenType Ordinal (ordn) */
[class*="nums-ordinal"] {
-webkit-font-kerning: normal;
font-kerning: normal;
-webkit-font-variant-ligatures: common-ligatures, discretionary-ligatures, historical-ligatures, contextual;
font-variant-ligatures: common-ligatures, discretionary-ligatures, historical-ligatures, contextual;
font-variant-numeric: oldstyle-nums, tabular-nums, ordinal, slashed-zero;
-webkit-font-feature-settings: "kern", "locl", "ccmp", "mark", "mkmk", "rlig", "liga", "clig", "dlig", "hlig", "calt", "onum", "tnum", "ordn", "zero", "hist", "salt", "ss01", "cv01", "swsh", "cswh";
font-feature-settings: "kern", "locl", "ccmp", "mark", "mkmk", "rlig", "liga", "clig", "dlig", "hlig", "calt", "onum", "tnum", "ordn", "zero", "hist", "salt", "ss01", "cv01", "swsh", "cswh";
font-family: "Calibri"; /* OpenType fonts with Ordinal support */
}
/* END: OpenType Ordinal (ordn) */
/* BGN: OpenType Superscript (sups) */
.superscript {
-webkit-font-kerning: normal;
font-kerning: normal;
-webkit-font-variant-ligatures: common-ligatures, discretionary-ligatures, historical-ligatures, contextual;
font-variant-ligatures: common-ligatures, discretionary-ligatures, historical-ligatures, contextual;
font-variant-position: super;
font-variant-numeric: oldstyle-nums, tabular-nums, slashed-zero;
font-variant-alternates: historical-forms;
-webkit-font-feature-settings: "kern", "locl", "ccmp", "mark", "mkmk", "rlig", "liga", "clig", "dlig", "hlig", "calt", "sups", "onum", "tnum", "zero", "hist", "salt", "ss01", "cv01", "swsh", "cswh";
font-feature-settings: "kern", "locl", "ccmp", "mark", "mkmk", "rlig", "liga", "clig", "dlig", "hlig", "calt", "sups", "onum", "tnum", "zero", "hist", "salt", "ss01", "cv01", "swsh", "cswh";
}
/* END: OpenType Superscript (sups) */
/* BGN: OpenType Subscript (subs) */
.subscript {
-webkit-font-kerning: normal;
font-kerning: normal;
-webkit-font-variant-ligatures: common-ligatures, discretionary-ligatures, historical-ligatures, contextual;
font-variant-ligatures: common-ligatures, discretionary-ligatures, historical-ligatures, contextual;
font-variant-position: sub;
font-variant-numeric: oldstyle-nums, tabular-nums, slashed-zero;
font-variant-alternates: historical-forms;
-webkit-font-feature-settings: "kern", "locl", "ccmp", "mark", "mkmk", "rlig", "liga", "clig", "dlig", "hlig", "calt", "subs", "onum", "tnum", "zero", "hist", "salt", "ss01", "cv01", "swsh", "cswh";
font-feature-settings: "kern", "locl", "ccmp", "mark", "mkmk", "rlig", "liga", "clig", "dlig", "hlig", "calt", "subs", "onum", "tnum", "zero", "hist", "salt", "ss01", "cv01", "swsh", "cswh";
}
/* END: OpenType Subscript (subs) */
/* BGN: OpenType small-caps (smcp) */
.small-caps {
-webkit-font-kerning: normal;
font-kerning: normal;
-webkit-font-variant-ligatures: common-ligatures, discretionary-ligatures, historical-ligatures, contextual;
font-variant-ligatures: common-ligatures, discretionary-ligatures, historical-ligatures, contextual;
font-variant-caps: small-caps;
font-variant-numeric: oldstyle-nums, tabular-nums, slashed-zero;
font-variant-alternates: historical-forms;
-webkit-font-feature-settings: "kern", "locl", "ccmp", "mark", "mkmk", "rlig", "liga", "clig", "dlig", "hlig", "calt", "smcp", "onum", "tnum", "zero", "hist", "salt", "ss01", "cv01", "swsh", "cswh";
font-feature-settings: "kern", "locl", "ccmp", "mark", "mkmk", "rlig", "liga", "clig", "dlig", "hlig", "calt", "smcp", "onum", "tnum", "zero", "hist", "salt", "ss01", "cv01", "swsh", "cswh";
}
/* END: OpenType small-caps (smcp) */
/* BGN: OpenType all-small-caps (c2sc) */
.all-small-caps {
-webkit-font-kerning: normal;
font-kerning: normal;
-webkit-font-variant-ligatures: common-ligatures, discretionary-ligatures, historical-ligatures, contextual;
font-variant-ligatures: common-ligatures, discretionary-ligatures, historical-ligatures, contextual;
font-variant-caps: all-small-caps;
font-variant-numeric: oldstyle-nums, tabular-nums, slashed-zero;
font-variant-alternates: historical-forms;
-webkit-font-feature-settings: "kern", "locl", "ccmp", "mark", "mkmk", "rlig", "liga", "clig", "dlig", "hlig", "calt", "c2sc", "smcp", "onum", "tnum", "zero", "hist", "salt", "ss01", "cv01", "swsh", "cswh";
font-feature-settings: "kern", "locl", "ccmp", "mark", "mkmk", "rlig", "liga", "clig", "dlig", "hlig", "calt", "c2sc", "smcp", "onum", "tnum", "zero", "hist", "salt", "ss01", "cv01", "swsh", "cswh";
}
/* END: OpenType all-small-caps (c2sc) */
/* BGN: OpenType petite-caps (pcap) */
.petite-caps {
-webkit-font-kerning: normal;
font-kerning: normal;
-webkit-font-variant-ligatures: common-ligatures, discretionary-ligatures, historical-ligatures, contextual;
font-variant-ligatures: common-ligatures, discretionary-ligatures, historical-ligatures, contextual;
font-variant-caps: petite-caps;
font-variant-numeric: oldstyle-nums, tabular-nums, slashed-zero;
font-variant-alternates: historical-forms;
-webkit-font-feature-settings: "kern", "locl", "ccmp", "mark", "mkmk", "rlig", "liga", "clig", "dlig", "hlig", "calt", "pcap", "onum", "tnum", "zero", "hist", "salt", "ss01", "cv01", "swsh", "cswh";
font-feature-settings: "kern", "locl", "ccmp", "mark", "mkmk", "rlig", "liga", "clig", "dlig", "hlig", "calt", "pcap", "onum", "tnum", "zero", "hist", "salt", "ss01", "cv01", "swsh", "cswh";
}
/* END: OpenType petite-caps (pcap) */
/* BGN: OpenType all-petite-caps (c2pc, pcap) */
.all-petite-caps {
-webkit-font-kerning: normal;
font-kerning: normal;
-webkit-font-variant-ligatures: common-ligatures, discretionary-ligatures, historical-ligatures, contextual;
font-variant-ligatures: common-ligatures, discretionary-ligatures, historical-ligatures, contextual;
font-variant-caps: all-petite-caps;
font-variant-numeric: oldstyle-nums, tabular-nums, slashed-zero;
font-variant-alternates: historical-forms;
-webkit-font-feature-settings: "kern", "locl", "ccmp", "mark", "mkmk", "rlig", "liga", "clig", "dlig", "hlig", "calt", "c2pc", "pcap", "onum", "tnum", "zero", "hist", "salt", "ss01", "cv01", "swsh", "cswh";
font-feature-settings: "kern", "locl", "ccmp", "mark", "mkmk", "rlig", "liga", "clig", "dlig", "hlig", "calt", "c2pc", "pcap", "onum", "tnum", "zero", "hist", "salt", "ss01", "cv01", "swsh", "cswh";
}
/* END: OpenType all-petite-caps (c2pc, pcap) */
/* BGN: OpenType unicase (unic) */
.unicase {
-webkit-font-kerning: normal;
font-kerning: normal;
-webkit-font-variant-ligatures: common-ligatures, discretionary-ligatures, historical-ligatures, contextual;
font-variant-ligatures: common-ligatures, discretionary-ligatures, historical-ligatures, contextual;
font-variant-caps: unicase;
font-variant-numeric: oldstyle-nums, tabular-nums, slashed-zero;
font-variant-alternates: historical-forms;
-webkit-font-feature-settings: "kern", "locl", "ccmp", "mark", "mkmk", "rlig", "liga", "clig", "dlig", "hlig", "calt", "unic", "onum", "tnum", "zero", "hist", "salt", "ss01", "cv01", "swsh", "cswh";
font-feature-settings: "kern", "locl", "ccmp", "mark", "mkmk", "rlig", "liga", "clig", "dlig", "hlig", "calt", "unic", "onum", "tnum", "zero", "hist", "salt", "ss01", "cv01", "swsh", "cswh";
}
/* END: OpenType unicase (unic) */
/* BGN: OpenType titling-caps (titl) */
.titling-caps {
-webkit-font-kerning: normal;
font-kerning: normal;
-webkit-font-variant-ligatures: common-ligatures, discretionary-ligatures, historical-ligatures, contextual;
font-variant-ligatures: common-ligatures, discretionary-ligatures, historical-ligatures, contextual;
font-variant-caps: titling-caps;
font-variant-numeric: oldstyle-nums, tabular-nums, slashed-zero;
font-variant-alternates: historical-forms;
-webkit-font-feature-settings: "kern", "locl", "ccmp", "mark", "mkmk", "rlig", "liga", "clig", "dlig", "hlig", "calt", "titl", "onum", "tnum", "zero", "hist", "salt", "ss01", "cv01", "swsh", "cswh";
font-feature-settings: "kern", "locl", "ccmp", "mark", "mkmk", "rlig", "liga", "clig", "dlig", "hlig", "calt", "titl", "onum", "tnum", "zero", "hist", "salt", "ss01", "cv01", "swsh", "cswh";
}
/* END: OpenType titling-caps (titl) */
/* BGN: Table */
table {
border-color: rgba(0,0,0,1);
border-style: solid;
border-width: 1px;
}
th {
background-color: rgba(23,23,23,1);
color: rgba(255,255,255,1);
text-align: center;
vertical-align: center;
}
td {
vertical-align: center;
}
/* END: Table */
/* Broken and Removed Links */
/* Special, by plugin, don't change */
.broken_link {
text-decoration: line-through !important;
}
.removed_link {
text-decoration: line-through !important;
}
/* Overrides Pastacode WP plugin and Ridizain WP theme */
.line-highlight {
margin-top: initial;
}
/* CC-block plugin */
p.cc-block {
clear: both;
width: 90%;
margin: 8px auto;
padding: 4px;
text-align: center;
border: 1px solid #cccccc;
color: #000000;
background-color: #eef6e6;
}
p.cc-block a:link,
p.cc-block a:visited,
p.cc-block a:hover,
p.cc-block a:active {
text-decoration: underline;
color: #000000;
border: none;
}
.cc-button {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 6px;
margin-bottom: 6px;
border-width: 0;
}
/* Featured Image, Media License */
.cc-attached-featured-media-license a,
.cc-attached-featured-image-license a {
color: initial; /* revert to browser or theme default */
}
.wp-caption {
border: 0;
}
.wp-video,
.wp-audio-shortcode {
margin-bottom: 0.25em;
}
.widget_bccl_widget {
text-align: center;
}
/* Make sure these elements are intact */
address, cite, dfn, em, i, var {
font-style: italic;
}
b, strong {
font-weight: bolder;
}
th {
font-weight: bold;
}
/* Others */
li p {
margin-left: 2.3em;
margin-right: 1.7em;
text-align: justify;
}
/************************
* END: COMMON CLASSES *
************************/
/*******************
* BGN: CITATIONS *
*******************/
/* blockquote-footer-cite */
blockquote[cite] {
float: initial; /* revert to browser or theme default */
}
footer.cite {
background: initial; /* revert to browser or theme default */
margin: initial; /* revert to browser or theme default */
padding: initial; /* revert to browser or theme default */
text-align: right;
}
footer.cite::before {
content: initial; /* revert to browser or theme default */
}
footer.cite cite {
/* display: inline-block; */
font-style: italic !important; /* ensure this is rendered */
}
/* .entry-content blockquote cite::before, */
/* Also overrides CWP-YouIt theme */
footer.cite cite::before {
white-space: initial; /* revert to browser or theme default */
margin: initial; /* revert to browser or theme default */
padding: initial; /* revert to browser or theme default */
content: initial; /* revert to browser or theme default */
content: '\2015\20';
}
/*
* Blockquote Styles
*
* .style01
*/
/* blockquote.style01 */
blockquote.style01 {
background: silver;
color: #383838;
font-size: 18px;
line-height: 1.45;
margin: 0.25em 0;
padding: 0.25em 40px;
width: 500px;
position: relative;
}
blockquote.style01::before {
color: #7a7a7a;
content: "\201C";
display: block;
font-family: Georgia, serif;
font-size: 80px;
font-style: italic;
position: absolute;
top: -10px;
left: 0;
}
blockquote.style01::after {
color: #7a7a7a;
content: "\201D";
display: block;
font-family: Georgia, serif;
font-size: 80px;
font-style: italic;
position: absolute;
right: 10px;
bottom: -25px;
}
/* blockquote color: cgm */
blockquote.bq-cm,
blockquote.bq-gm,
blockquote.bq-cgm {
background-color: rgba(224,255,255,1);
border-color: rgba(127,128,255,1);
border-radius: 17px;
border-style: double;
padding: 0.35em;
}
/* inline quote */
q {
quotes: '\00AB' '\00BB' '\2039' '\203A';
}
q::before {
content: open-quote;
}
q::after {
content: close-quote;
}
/*******************
* END: CITATIONS *
*******************/
/*************************
* BGN: ruby/rubi stuff *
*************************/
/*
* Sample:
*
*
*
* Yukia
* Yahohanan
* Sese
* Cuneta
*
*
*
*
*
*
*/
ruby {
display: ruby;
ruby-align: center;
}
rb {
display: ruby-base;
white-space: nowrap;
}
rt {
display: ruby-text;
white-space: nowrap;
font-size: 100%; /* Override UA default recommended setting of 50% */
}
rbc {
display: ruby-base-container;
}
rtc {
display: ruby-text-container;
}
rtc.rtc_over {
ruby-position: over;
}
rtc.rtc_under {
ruby-position: under;
}
rtc.rtc_inter-character {
ruby-position: inter-character;
}
rtc.rtc_left {
ruby-position: left;
}
rtc.rtc_right {
ruby-position: right;
}
ruby, rb, rt, rbc, rtc {
unicode-bidi: -webkit-isolate;
unicode-bidi: isolate;
unicode-bidi: isolate-override;
}
rb, rt {
font-variant-east-asian: ruby full-width;
-webkit-text-emphasis: none;
text-emphasis: none;
}
/*************************
* END: ruby/rubi stuff *
*************************/
/*******************************
* BGN: embedresponsively.com *
*******************************/
/*
* .embed-container is too generic, causing conflicts elsewhere
* Changed to .rspnsv-embedframe
*
*
*/
.rspnsv-embedframe {
position: relative;
padding-bottom: 56.25%; /* YouTube, Vimeo, Dailymotion, Google Maps, Generic */
height: 0;
overflow: hidden;
max-width: 100%;
}
.rspnsv-embedframe.instagram {
padding-bottom: 120%; /* Instagram */
}
.rspnsv-embedframe.vine {
padding-bottom: 100%; /* Vine */
}
.rspnsv-embedframe.gettyimages {
padding-bottom: 79.96632996632997%; /* Getty Images */
}
.rspnsv-embedframe iframe,
.rspnsv-embedframe object,
.rspnsv-embedframe embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/*******************************
* END: embedresponsively.com *
*******************************/
/*******************
* BGN: Box Sizes *
*******************/
.onehundred-percent {
width: 100%;
}
.eighty-percent {
width: 80%;
}
.fifty-percent {
width: 50%;
}
/*******************
* END: Box Sizes *
*******************/
/**********************
* BGN: Custom Lists *
**********************/
/* Continuous Numbering */
ol.start {
counter-reset: listnumber;
}
ol.start > li, ol.continue > li {
list-style-type: none;
}
ol.start > li::before, ol.continue > li::before {
content: counter(listnumber) ". ";
counter-increment: listnumber;
}
/*
* CUL-LIST
*
* OL
* 1. circles-list
* 2. rounded-list list-bg-grey-light / list-bg-silver
* 3. rectangle-list list-bg-grey-light / list-bg-silver
*
* How to decrement / countdown:
* -
*
* UL
* 1. hyphen-bullet
* 2. omark-black
* 3. omark-white
* 4. checkmark
* 5. checkmark-heavy
* 6. xmark
* 7. xmark-heavy
*/
/* Global List Classes */
.cul-list > li {
list-style-type: none !important;
}
/* Custom OL */
ol.cul-list > li {
position: relative;
text-decoration: none;
transition: all .3s ease-out;
}
/*
* Circle Style
*
* By: http://codeitdown.com/ordered-list-css-styles/
* Updated by: https://techmagus.ninja
*/
ol.circles-list {
margin: 0;
margin-left: 2.3em;
padding: 0;
counter-reset: circles-list;
}
ol.circles-list > li {
padding-left: 1em;
min-height: 2.3em;
}
ol.circles-list > li:first-child {
margin-top: 1em;
}
ol.circles-list > li::before {
position: absolute;
top: -0.17em;
left: -1.33em;
width: 1.2em;
height: 1.2em;
padding: 0.27em;
line-height: 1.2em;
text-align: center;
color: #f5f5f5;
border: 3px solid #c5c5c5;
border-radius: 50%;
background-color: #464646;
content: counter(circles-list);
counter-increment: circles-list;
box-sizing: content-box;
}
ol.circles-decrement > li::before {
counter-increment: circles-list -1;
}
/*
* Rounded Style
*
* By: http://red-team-design.com/css3-ordered-list-styles/
* Updated by: https://techmagus.ninja
*/
ol.rounded-list {
counter-reset: rounded-list;
}
ol.rounded-list > li {
padding: .4em .4em .4em 2em;
margin: .5em 0;
color: #444;
border-radius: .3em;
}
ol.rounded-list > li:hover::before {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
ol.rounded-list > li::before {
content: counter(rounded-list);
counter-increment: rounded-list;
position: absolute;
left: -1.3em;
margin-top: -0.50em;
background: #87ceeb;
height: 2em;
width: 2em;
line-height: 2em;
border: .3em solid #fff;
text-align: center;
font-weight: bold;
border-radius: 2em;
transition: all .3s ease-out;
box-sizing: content-box;
}
ol.rounded-decrement > li::before {
counter-increment: rounded-list -1;
}
/*
* Rectangle Style
*
* By: http://red-team-design.com/css3-ordered-list-styles/
* Updated by: https://techmagus.ninja
*/
ol.rectangle-list {
counter-reset: rectangle-list;
}
ol.rectangle-list > li {
padding: .4em .4em .4em .8em;
margin: .5em 0 .5em 2.5em;
color: #444;
}
ol.rectangle-list > li::before {
content: counter(rectangle-list);
counter-increment: rectangle-list;
position: absolute;
left: -2.5em;
margin-top: -0.4em;
background: #fa8072;
height: 2em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
}
ol.rectangle-list > li::after {
position: absolute;
content: '';
border: .5em solid transparent;
top: 53%;
left: -1em;
margin-top: -.5em;
transition: all .3s ease-out;
}
ol.rectangle-list > li:hover::after {
left: -.5em;
border-left-color: #fa8072;
}
ol.rectangle-decrement > li::before {
counter-increment: rectangle-list -1;
}
/* Custom UL */
ul[class*="mark"] {
margin-left: 0;
padding-left: 0;
}
ul[class*="mark"] > li {
margin-left: 23px;
}
/*
* Optional:
* 1. Use only if ordinary UL lists inside custom UL lists are not positioning correctly
* 2. Do not forget to add class="ordfix" in the affected UL lists
*/
[class*="mark"] .ordfix {
margin-left: 40px;
}
/*
* Override order:
* hyphen-bullet < omark-black < omark-white < checkmark < checkmark-heavy < xmark < xmark-heavy
*/
[class~="hyphen-bullet"] > li::before,
li[class~="hyphen-bullet"]::before {
content: "\2043\20";
}
[class~="omark-black"] > li::before,
li[class~="omark-black"]::before {
content: "\25cf\20";
}
[class~="omark-white"] > li::before,
li[class~="omark-white"]::before {
content: "\25cb\20";
}
[class~="checkmark"] > li::before,
li[class~="checkmark"]::before {
content: "\2713\20";
}
[class~="checkmark-heavy"] > li::before,
li[class~="checkmark-heavy"]::before {
content: "\2714\20";
}
[class~="xmark"] > li::before,
li[class~="xmark"]::before {
content: "\2717\20";
}
[class~="xmark-heavy"] > li::before,
li[class~="xmark-heavy"]::before {
content: "\2718\20";
}
/**********************
* END: Custom Lists *
**********************/
/********************************
* BGN: Custom Popper (tooltip) *
********************************/
/*
* Source:
* http://designshack.net/articles/css/html5-css3-anchor-link-tooltips/
*
* How to use:
* I. Elements that can take pseudo-elements
*
*
* e.g. MMOG
*
* II. Elements that can not take pseudo-elements
* Enter some text!
*
* III. Defaults
* 1. popper: black
* 2. position: above
*/
/* base */
a.popper,
.popper {
position: relative;
display: inline;
}
a.popper::after,
.popper::after {
display: block;
visibility: hidden;
position: absolute;
bottom: 0;
left: 20%;
opacity: 0;
content: attr(data-popper);
height: auto;
min-width: 100px;
padding: 5px 8px;
z-index: 999;
color: rgba(255,255,255,1);
text-decoration: none;
text-align: center;
background: rgba(0,0,0,0.88);
border-radius: 5px;
}
a.popper::before,
.popper::before {
position: absolute;
visibility: hidden;
width: 0;
height: 0;
left: 50%;
bottom: 0;
opacity: 0;
content: "";
border-style: solid;
border-width: 6px 6px 0 6px;
border-color: rgba(0,0,0,0.88) transparent transparent transparent;
}
a.popper:hover::after,
.popper:hover::after {
visibility: visible;
opacity: 1;
bottom: 20px;
}
a.popper:hover::before,
.popper:hover::after {
visibility: visible;
opacity: 1;
bottom: 14px;
}
/* tooltip: downward */
a.popper.downward::after,
.popper.downward::after {
bottom: auto;
top: 0;
}
a.popper.downward:hover::after,
popper.downward:hover::after {
top: 28px;
}
a.popper.downward::before,
.popper.downward::before, {
border-width: 0 5px 8.7px 5px;
border-color: transparent transparent rgba(0,0,0,0.88) transparent;
top: 0px;
}
a.popper.downward:hover::before,
.popper.downward:hover::before {
top: 20px;
}
/* tooltip: rightside */
a.popper.rightside::after,
.popper.rightside::after {
left: 100%;
bottom: -45%;
}
a.popper.rightside:hover::after,
.popper.rightside:hover::after {
left: 110%;
bottom: -45%;
}
a.popper.rightside::before,
.popper.rightside::before {
border-width: 5px 10px 5px 0;
border-color: transparent rgba(0,0,0,0.88) transparent transparent;
left: 90%;
bottom: 2%;
}
a.popper.rightside:hover::before,
.popper.rightside:hover::before {
left: 100%;
bottom: 2%;
}
/* tooltip: leftside */
a.popper.leftside::after,
.popper.leftside::after {
left: auto;
right: 100%;
bottom: -45%;
}
a.popper.leftside:hover::after,
.popper.leftside:hover::after {
right: 110%;
bottom: -45%;
}
a.popper.leftside::before,
.popper.leftside::before {
border-width: 5px 0 5px 10px;
border-color: transparent transparent transparent rgba(0,0,0,0.88);
left: auto;
right: 90%;
bottom: 2%;
}
a.popper.leftside:hover::before,
.popper.leftside:hover::before {
right: 100%;
bottom: 2%;
}
/* COLOUR: popper-blue */
a.popper.popper-blue::after,
.popper.popper-blue::after {
background: rgba(95,135,194,1);
}
a.popper.popper-blue::before,
.popper.popper-blue::before {
border-color: rgba(95,135,194,1) transparent transparent transparent;
}
a.popper.downward.popper-blue::before,
.popper.downward.popper-blue::before {
border-color: transparent transparent rgba(95,135,194,1) transparent;
}
a.popper.rightside.popper-blue::before,
.popper.rightside.popper-blue::before {
border-color: transparent rgba(95,135,194,1) transparent transparent;
}
a.popper.leftside.popper-blue::before,
.popper.leftside.popper-blue::before {
border-color: transparent transparent transparent rgba(95,135,194,1);
}
/* COLOUR: popper-pink */
a.popper.popper-pink::after,
.popper.popper-pink::after {
background: rgba(255,192,203,1);
}
a.popper.popper-pink::before,
.popper.popper-pink::before {
border-color: rgba(255,192,203,1) transparent transparent transparent;
}
a.popper.downward.popper-pink::before,
.popper.downward.popper-pink::before {
border-color: transparent transparent rgba(255,192,203,1) transparent;
}
a.popper.rightside.popper-pink::before,
.popper-rightside.popper-pink::before {
border-color: transparent rgba(255,192,203,1) transparent transparent;
}
a.popper.leftside.popper-pink::before,
.popper.leftside.popper-pink::before {
border-color: transparent transparent transparent rgba(255,192,203,1);
}
/* popper animation */
a.popper.animate::after,
.popper.animate::after,
a.popper.animate::before,
.popper.animate::before {
transition: all 0.2s ease-in-out;
}
/* input field popper */
input + .fieldpopper {
visibility: hidden;
position: relative;
bottom: 0;
left: 15px;
opacity: 0;
content: attr(data-popper);
height: auto;
min-width: 100px;
padding: 5px 8px;
z-index: 9999;
color: rgba(255,255,255,1);
font-size: 1.2em;
font-weight: bold;
text-decoration: none;
text-align: center;
background: rgba(0,0,0,0.88);
border-radius: 5px;
transition: all 0.2s ease-in-out;
}
input + .fieldpopper::after {
display: block;
position: absolute;
visibility: hidden;
content:'';
width: 0;
height: 0;
top: 8px;
left: -8px;
border-style: solid;
border-width: 4px 8px 4px 0;
border-color: transparent rgba(0,0,0,0.77) transparent transparent;
transition: all 0.2s ease-in-out;
}
input:focus + .fieldpopper,
input.focus + .fieldpoper::after {
visibility: visible;
opacity: 1;
}
a.popper.underline,
.popper.underline,
a.popper,
.popper,
abbr.popper.underline,
abbr.popper,
abbr {
/* border-bottom: 1px dotted #000; */ /* old style doing things */
color: inherit;
border-bottom: initial; /* revert to browser or theme default */
cursor: help;
text-decoration: underline;
-webkit-text-decoration-line: underline;
text-decoration-line: underline;
-webkit-text-decoration-style: dotted;
text-decoration-style: dotted;
-webkit-text-decoration-color: rgba(255,0,255,1);
text-decoration-color: rgba(255,0,255,1);
-webkit-text-decoration: underline dotted rgba(255,0,255,1);
text-decoration: underline dotted rgba(255,0,255,1); /* Ignored in CSS1/CSS2 UAs */
}
/********************************
* END: Custom Popper (tooltip) *
********************************/
/***********************
* BGN: Infobox Styles *
***********************/
/*******************************************************************************
* How to use:
*
*
*
*
![]()
Photo by under
*
*
*
Botanical Name
*
*
Common Names
(EN)
*
*
*