File: /home/nlrb7/domains/rb7.nl/public_html/wp-content/themes/saga/style.css
/**
* Theme Name: Saga
* Theme URI: http://themehybrid.com/themes/saga
* Description: A tailor-made theme for writers by a published author and professional theme designer. Words are important to all writers. Getting those words to display beautifully on the screen can be a daunting task. Saga was created so that you could simply tell your story without worrying about the technical details. Aside from impeccable typography and attention to detail, the theme provides several easy-to-use customization options so you can personalize your site's design. It also integrates with the Literary plugin.
* Version: 1.0.2
* Author: Justin Tadlock
* Author URI: http://themehybrid.com
* Tags: one-column, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, post-formats, responsive-layout, rtl-language-support, theme-options, threaded-comments, translation-ready
* Text Domain: saga
* License: GNU General Public License v2.0 or later
* License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
/********************************************************************************************************
* Please do not make edits directly to this file. You will lose all modifications when the theme is
* next updated if you do so. Please use a child theme. This theme's styles will automatically be
* loaded for you. You can then overwrite specific style rules in your child theme's `style.css` file.
*
* This file is only loaded if `SCRIPT_DEBUG` is set to `TRUE` in your `wp-config.php` file. Otherwise,
* the `style.min.css` file is loaded.
*
* TABLE OF CONTENTS:
* 1 - Danger Zone (things to not modify in your child theme)
* 1.1 - Font Face
* 1.2 - Layout
* 1.3 - Defaults
* 1.4 - Icons
* 1.5 - Header and Footer
* 1.6 - Main and Content
* 1.7 - Media
* 1.8 - Sidebars and Widgets
* 1.9 - Comments Template
* 1.10 - Menus
* 1.11 - Plugins
* 2 - Fun Zone (things you can modify in your child theme)
* 2.1 - Font Family Definitions
* 2.2 - Color Definitions
********************************************************************************************************/
/********************************************************************************************************
* 1 - Danger Zone
*
* This section of the CSS is something I wouldn't recommend overwriting. It can and most likely will
* be changed in the future as the theme receives updates. Overwriting the below in your child theme
* is what I consider dangerous territory and might leave you with some broken styles in a future update.
* Basically, do it if you must. Just be aware of the consequences.
*
* The items you'll most likely want to modify (those things dealing with more stylistic elements like
* fonts and colors) are located at the bottom of this file.
********************************************************************************************************/
/********************************************************************************************************
* 1.1 - Font Face
*
* This section loads additional fonts needed by the theme.
********************************************************************************************************/
/* See: css/font-awesome.css */
/********************************************************************************************************
* ====== End Font Face ======
********************************************************************************************************/
/********************************************************************************************************
* 1.2 - Layout
*
* This section of the stylesheet defines the overall layout of the theme's major structural elements. It
* is essentially the foundation for the entire design.
********************************************************************************************************/
body { overflow-x: hidden; }
#container > .wrap,
#header,
#footer,
#main {
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}
#branding,
#menu-primary {
line-height: 2.5rem;
padding: 0.5rem 0;
}
#branding { padding-top: 0.75rem; }
.header-image {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto 2.25rem;
}
.singular .entry,
.error-404 .entry { position: relative; }
.singular .entry > .wrap,
.error-404 .entry > .wrap { padding-top: 1.5rem; }
.singular .entry > .wrap,
.error-404 .entry > .wrap,
#comments-template {
max-width: 650px;
margin-left: auto;
margin-right: auto;
padding-left: 100px;
padding-right: 100px;
}
.singular .format-video .featured-media,
.singular .format-audio .featured-media,
.singular .format-image .featured-media,
.attachment-image .featured-media,
.attachment-video .featured-media,
.attachment-audio .featured-media {
margin: 0;
}
.singular .format-quote > .wrap { max-width: 850px; }
@media only screen and ( min-width: 900px ) {
.singular .entry .featured-media + .wrap {
position: relative;
margin-top: -15rem;
padding-top: 3rem;
}
.singular .format-video .featured-media + .wrap,
.singular .format-audio .featured-media + .wrap,
.singular .format-image .featured-media + .wrap,
.attachment-image .entry .featured-media + .wrap,
.attachment-video .entry .featured-media + .wrap,
.attachment-audio .entry .featured-media + .wrap {
margin-top: 0;
}
}
@media only screen and ( min-width: 850px ) {
.ltr #branding,
.display-header-text.rtl #menu-primary { float: left; }
.rtl #branding,
.display-header-text.ltr #menu-primary { float: right; }
#branding,
.display-header-text #menu-primary { max-width: 50%; }
}
@media only screen and ( min-width: 900px ) {
.plural .entry > .wrap {
max-width: 750px;
margin: 0 auto;
}
.plural .format-quote > .wrap { max-width: 950px; }
.plural .featured-media { width: 100%; }
.plural .featured-media + .wrap {
position: absolute;
top: 20%;
min-width: 500px;
max-width: 50%;
}
.plural .format-audio .featured-media + .wrap,
.plural .format-video .featured-media + .wrap {
position: initial;
top: 0;
max-width: 750px;
}
}
@media only screen and ( max-width: 1100px ) {
#header,
#main,
#footer { margin-left: 1.5rem; margin-right: 1.5rem; }
.header-image { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media only screen and ( max-width: 850px ) {
#header { text-align: center; }
.singular .entry > .wrap,
#comments-template { padding-left: 1.5rem; padding-right: 1.5rem; }
.singular-post .entry > img + .entry-header {
margin-top: 0;
}
}
@media only screen and ( max-width: 480px ) {
#main { margin-left: 0; margin-right: 0; }
.header-image { padding-left: 0; padding-right: 0; }
.entry > .wrap,
#comments-template { padding-left: 0.75rem; padding-right: 0.75rem; }
}
@media only screen and ( min-width: 480px ) {
.plural .entry > .wrap {
padding-left: 3rem;
padding-right: 3rem;
}
.plural .format-status .entry-content,
.singular .format-status .entry-content { padding: 0; }
}
.singular .format-status { padding-top: 1.5rem; }
.format-status .entry-content { overflow: hidden; }
.singular .entry-content { padding-top: 1.5rem; }
.plural .entry { margin-bottom: 2.25rem; }
.plural .entry > .wrap {
box-sizing: border-box;
padding-top: 1.5rem;
}
.entry-byline,
.entry-meta,
.entry-footer { margin-bottom: 1.5rem; }
.mce-content-body, /* tinymce editor */
.entry-content,
.entry-summary,
.comment-content {
font-size: 1.25rem;
line-height: 1.6;
}
/********************************************************************************************************
* ====== End Layout ======
********************************************************************************************************/
/********************************************************************************************************
* 1.3 - Defaults
*
* This section handles the default style rules for the majority of possible HTML elements and other
* WordPress-specific classes.
********************************************************************************************************/
html { font-size: 16px; }
/* ====== Paragraphs ====== */
/* Port to one-five.css. */
p:empty {
margin: 0;
padding: 0;
line-height: 0;
}
/* ====== Links ====== */
a,
.entry-subtitle,
label {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
a:hover,
a:focus {
text-decoration: underline;
}
.entry-content a,
.entry-summary a,
.comment-content a {
border-bottom: 1px solid;
}
.entry-content a:hover,
.entry-content a:focus,
.entry-summary a:hover,
.entry-summary a:focus,
.comment-content a:hover,
.comment-content a:focus {
text-decoration: none;
}
a:focus,
.featured-media a:focus img { outline: 1px dashed; }
a:focus img { border: 1px dashed; }
a.img-hyperlink { border: none; }
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
}
blockquote {
margin: 0 1.5rem;
}
blockquote.alignright,
blockquote.alignleft,
blockquote.aligncenter {
width: 100%;
text-align: center;
font-size: 1.325rem;
border-bottom: 3px solid;
}
@media only screen and ( min-width: 650px ) {
blockquote.alignright,
blockquote.alignleft,
blockquote.aligncenter { width: 50%; }
blockquote.alignright,
blockquote.alignleft { margin-bottom: 0.75rem; }
blockquote.alignright p:last-child,
blockquote.alignleft p:last-child { margin-bottom: 0.75rem; }
}
blockquote.alignright { margin-right: 0; }
blockquote.alignleft { margin-left: 0; }
blockquote cite {
font-variant: small-caps;
font-size: 0.875em;
font-style: normal;
}
blockquote .has-cite-only { text-align: center; }
.line-through {
text-decoration: line-through;
}
.line-through del,
.line-through strike,
.line-through s {
opacity: 0.5;
text-decoration: none;
}
ins,
u {
border-bottom: 1px solid;
text-decoration: none;
}
/* ====== Lists ====== */
dt {
font-size: 1rem;
}
dd {
font-size: 1.125rem;
}
/* === <hr> tag === */
hr {
height: 3px;
border-bottom: 1px solid;
border-top: 1px solid;
}
/* ====== Code ====== */
code {
display: inline-block;
padding: 2px;
font-size: 1rem;
font-weight: 400;
border: 1px solid;
}
pre,
.form-allowed-tags code {
padding: 1.875rem 1.5rem;
font-size: 1.125rem;
line-height: 1.875rem;
border: 1px solid;
-webkit-background-size: 3.75rem 3.75rem;
-moz-background-size: 3.75rem 3.75rem;
background-size: 3.75rem 3.75rem;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.form-allowed-tags { margin-top: -0.75rem; }
.form-allowed-tags code {
margin-top: 0.375rem;
padding-top: 0;
padding-bottom: 0;
font-size: 1rem;
}
pre code {
padding: 0;
font-size: 1em; /* relative to parent */
border: none;
}
/* ====== Tables ====== */
table {
width: 100%;
border-collapse: collapse;
font-size: 1.125rem;
}
caption {
margin: 0 0 5px;
font-variant: small-caps;
}
tr,
thead { border-bottom: 1px solid; }
tr:last-child { border: none; }
tfoot { border-top: 1px solid; }
th,
td {
padding: 10px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
th {
font-size: 0.8125rem;
font-weight: 700;
text-transform: uppercase;
}
.ltr th { text-align: left; }
.rtl th { text-align: right; }
td { border: 1px solid; }
th:empty,
td:empty,
th.pad,
td.pad { opacity: 0; }
/* wp-calendar <table> */
.wp-calendar th { font-size: 0.75rem; }
.wp-calendar td,
.wp-calendar th {
padding: 5px 2%;
vertical-align: middle;
text-align: center;
}
.wp-calendar th { padding: 10px 2%; }
/* .has-posts added via jQuery. */
.wp-calendar tbody td.has-posts {
padding: 0;
}
.wp-calendar td.has-posts a {
display: block;
padding: 5px 2%;
font-weight: 700;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* === Forms === */
fieldset {
margin: 0 0 1.5rem;
padding: 1.5rem 1.5rem 0;
border: 1px solid;
}
legend {
padding: 0.375rem 1.5rem;
border: 1px solid;
font-size: 1rem;
font-weight: 600;
}
label {
font-size: 0.9375rem;
font-weight: 400;
cursor: pointer;
}
.label-checkbox,
.label-radio { font-size: 1.125rem; }
input { display: block; }
input[type="checkbox"],
input[type="radio"] { display: inline-block; }
input[type="number"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
textarea,
select {
padding: 10px 1.5rem;
font-size: 1.125rem;
border: 1px solid;
opacity: 0.75;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
textarea,
select { width: 100%; }
input[name="post_password"] { margin-bottom: 25px; }
input[type="date"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="email"]:focus,
input[type="month"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
input[type="week"]:focus,
textarea:focus,
select:focus {
opacity: 1;
}
input[type="submit"],
input[type="reset"],
input[type="button"],
button {
display: inline-block;
padding: 0.75rem 1rem;
font-size: 0.9375rem;
font-weight: 400;
border: none;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
input[type="submit"]:focus,
input[type="submit"]:hover,
input[type="reset"]:focus,
input[type="reset"]:hover,
input[type="button"]:focus,
input[type="button"]:hover,
button:focus,
button:hover,
.menu-toggle button:hover,
.media-info-toggle:hover {
text-decoration: underline;
}
select {
font-size: 1rem;
padding: 7px;
}
textarea {
min-height: 300px;
padding: 1.5rem;
}
/* ====== Alignment ====== */
@media only screen and ( max-width: 650px ) {
.alignleft,
.alignright,
img.alignleft,
img.alignright {
float: none;
display: block;
margin: 0 auto 1.5rem;
}
}
/* ====== Images ====== */
img {
max-width: 100%;
height: auto;
box-sizing: border-box;
}
a img {
opacity: 0.85;
padding: 1rem;
border: 1px solid;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
a:hover img,
a:focus img { opacity: 1; }
.entry-content a img.alignright { margin-right: -1rem; }
.entry-content a img.alignleft { margin-left: -1rem; }
.featured-media img {
padding: 0;
border: none;
}
/* Captions */
.wp-caption .wp-caption-text {
text-align: center;
font-size: 1rem;
}
/* Galleries */
.gallery {
margin-bottom: 1rem;
}
.gallery .gallery-item { margin-bottom: 0.5rem; }
.gallery-icon a img { padding: 0.625rem; }
.gallery-caption { font-size: 1rem; }
@media only screen and ( max-width: 481px ) {
.gallery .gallery-row .gallery-item { float: none; width: 100%; }
.gallery .gallery-icon img { max-width: 100%; }
}
/* Avatars */
a .avatar { border: none; padding: 0; }
.avatar {
width: 60px;
height: 60px;
border-radius: 50%;
}
.ltr .avatar { float: left; margin: 0 1.5rem 0.75rem 0; }
.rtl .avatar { float: right; margin: 0 0 0.75rem 1.5rem; }
/* ====== Embeds ====== */
.twitter-tweet { width: 100% !important; }
.embed-wrap {
position: relative;
margin-bottom: 1.5rem;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
@media only screen and ( min-width: 850px ) {
.plural .format-video .embed-wrap { margin-bottom: -1px; }
}
.embed-wrap iframe,
.embed-wrap object,
.embed-wrap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
max-width: 100%;
height: 100%;
}
/* === Playlists === */
.wp-playlist {
font-size: 1rem;
border: 1px solid;
}
.wp-audio-playlist { box-sizing: border-box; }
.wp-playlist a { border: none; }
.wp-playlist a:hover,
.wp-playlist a:focus { text-decoration: underline; }
.wp-playlist-current-item { overflow: hidden; }
.wp-playlist-current-item img { margin-bottom: 0.75rem; }
.wp-playlist-current-item .wp-playlist-caption { margin-bottom: 1.5rem; }
.wp-playlist-tracks .wp-playlist-item {
margin-bottom: 0.5rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid;
}
.wp-playlist-tracks .wp-playlist-item:last-of-type {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
/**
* WordPress media player.
*
* This overwrites various elements of the media player styles included. For the full media player styles,
* see the `css/mediaelement/medialement.css` stylesheet.
*/
.mejs-container { margin-bottom: 1.5rem; }
.featured-media .mejs-container,
.featured-media .wp-playlist,
.featured-media .embed-wrap,
.featured-media .wp-caption,
.featured-media img { margin-bottom: 0; }
.wp-audio-shortcode.mejs-container { min-height: 100px !important; }
.mejs-controls {
width: 100%;
height: 50px;
padding: 0 10px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.wp-video-shortcode .mejs-controls {
border-top: 1px solid;
border-bottom: 1px solid;
opacity: 0.8;
}
.wp-audio-shortcode .mejs-controls { top: 25px; }
.mejs-controls > div { margin-top: 10px; }
/* Fix for last item dropping below the controls. */
.mejs-controls > div:last-of-type {
position: relative;
clear: both;
float: right;
top: -41px;
}
.wp-audio-shortcode .mejs-mediaelement {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.mejs-overlay-loading span {
background: transparent url( 'css/mediaelement/images/loading.gif' ) 50% 50% no-repeat;
}
.mejs-button button {
height: 16px;
width: 16px;
background: transparent url( 'css/mediaelement/images/controls.png' ) no-repeat;
}
.mejs-fullscreen-button button,
.mejs-playpause-button button,
.mejs-volume-button button { background: none; }
.mejs-button button:focus { outline: 1px solid; }
.mejs-time .mejs-currenttime,
.mejs-time .mejs-duration { font-size: 0.875rem; }
.mejs-volume-button .mejs-volume-slider {
width: 40px;
margin-left: -10px;
}
.mejs-volume-button .mejs-volume-slider .mejs-volume-total,
.mejs-volume-button .mejs-volume-slider .mejs-volume-current {
top: 10px;
left: 50%;
width: 4px;
margin: 0 0 0 -2px;
}
.mejs-volume-button .mejs-volume-slider .mejs-volume-handle {
left: 50%;
width: 20px;
height: 4px;
margin: 0 0 0 -10px;
}
.mejs-overlay-button {
width: 112px;
height: 112px;
margin: -56px 0 0 -56px;
}
.mejs-overlay-play .mejs-overlay-button::after {
content: '\f452';
padding: 18px;
font-size: 64px;
line-height: 64px;
border-radius: 50%;
opacity: 0.85;
}
.mejs-time-rail .mejs-time-float {
top: -38px;
height: 27px;
width: 50px;
margin-left: -25px;
border: 1px solid;
}
.mejs-time-rail .mejs-time-float-current {
width: 100%;
margin: 8px 0;
font-size: 0.75rem;
box-sizing: border-box;
}
.mejs-time-rail .mejs-time-float-corner {
top: 28px;
left: 20px;
}
/* Wrapper added when the audio player has an accompanying image. */
.audio-shortcode-wrap {
position: relative;
max-height: 136px;
overflow: hidden;
margin-bottom: 1.5rem;
}
.audio-image {
position: relative;
border: none;
margin: 0;
padding: 8px 0 0;
max-width: 20%;
max-height: 131px;
height: auto;
}
.ltr .audio-image { left: 0; padding-left: 8px; }
.rtl .audio-image { right: 0; padding-right: 8px; }
.audio-shortcode-wrap .wp-audio-shortcode {
position: absolute !important;
top: 50%;
margin-top: -1.5rem;
clear: none;
width: 79% !important;
}
.audio-shortcode-wrap .wp-audio-shortcode .mejs-controls { top: 0; }
.ltr .audio-shortcode-wrap .wp-audio-shortcode { left: 20%; }
.rtl .audio-shortcode-wrap .wp-audio-shortcode { left: 0; }
/*************************************/
h1::after,
h2::after,
h3::after,
h4::after,
h5::after,
h6::after,
.singular-literature .entry-meta::after {
content: "";
display: block;
height: 2px;
width: 50%;
margin: 1.5rem auto;
}
#site-title::after,
#site-description::after,
.menu-toggle::after,
.loop-meta .loop-title::after,
.plural .entry-title::after,
.singular-literature .entry-title::after {
display: none;
}
.singular .entry-title::after { margin-top: 3rem; }
.singular-post .entry-title::after { margin-top: 1.5rem; }
h1,
h2,
h3,
h4,
h5,
h6 { text-align: center; }
h1 { font-size: 2.375rem; }
h2 { font-size: 2.125rem; }
h3 { font-size: 1.875rem; }
h4 { font-size: 1.625rem; }
h5 { font-size: 1.5rem; }
h6 { font-size: 1.25rem; }
@media only screen and ( min-width: 850px ) {
.singular .main .entry-title { font-size: 3.1rem; }
}
.main .entry-title { text-align: center; }
.main .entry-subtitle {
display: block;
font-size: 0.667em;
font-weight: 300;
}
.plural .featured-media img { margin-bottom: -6px; }
.entry > .wrap { overflow: hidden; }
.plural .entry { position: relative; }
.entry-byline .entry-author a {
font-style: italic;
font-size: 1.25rem;
}
.entry-header,
.entry-footer { text-align: center; }
strong, b { font-weight: 900; }
/* === Clearing Floats === */
.clearfix::after,
#header::after,
.entry::after,
.comment-list::after,
.plural .entry-header::after,
.entry-content::after,
.entry-summary::after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/********************************************************************************************************
* ====== End Defaults ======
********************************************************************************************************/
/********************************************************************************************************
* 1.4 - Icons
*
* This section defines the CSS rules for handling Genericons, the icon font used in this theme.
********************************************************************************************************/
/* Menus */
.menu-toggle button::before,
.menu li a::after,
#menu-primary li li a::before,
/* Posts */
.label-password::before,
.chat-author cite::before,
/* Respond */
#respond label[for="author"]::before,
#respond label[for="email"]::before,
#respond label[for="url"]::before,
#respond label[for="comment"]::before,
/* Media player */
.mejs-controls .mejs-button button::after,
.mejs-overlay-button::after,
.media-info-toggle::after,
/* Playlists */
.wp-playlist-playing .wp-playlist-caption::before,
.wp-playlist-item-meta::before {
display: inline-block;
font-family: FontAwesome;
font-size: 16px;
font-style: normal;
font-weight: normal;
font-variant: normal;
line-height: 1;
vertical-align: middle;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#site-title::before {
vertical-align: middle;
font-size: 24px;
}
.ltr #site-title::before { padding: 0 8px 5px 0; }
.rtl #site-title::before { padding: 0 0 5px 8px; }
/* Menu Primary */
.menu-toggle button::before {
content: '\f0c9';
padding: 0 0.375rem 4px;
font-size: 21px;
}
.menu-toggle button.active::before { content: '\f00d'; }
.ltr .menu-toggle button.active::before { content: '\f00d'; padding-left: 0.4375rem; }
.rtl .menu-toggle button.active::before { content: '\f00d'; padding-right: 0.4375rem; }
#menu-primary li li a::before {
content: '\f068';
padding: 0 0 2px;
font-size: 8px;
}
.ltr #menu-primary li li a::before { padding-right: 0.5rem; }
.rtl #menu-primary li li a::before { padding-left: 0.5rem; }
#menu-primary li a { position: relative; }
#menu-primary li a::after {
position: absolute;
top: 1rem;
opacity: 0.95;
width: 20px;
text-align: center;
}
.ltr #menu-primary li a::after { right: 1.5rem; }
.rtl #menu-primary li a::after { left: 1.5rem; }
#menu-primary li a:hover::after,
#menu-primary li a:focus::after { opacity: 1; }
.menu li a[href*="codepen.io"]::after { content: '\f1cb'; }
.menu li a[href*="digg.com"]::after { content: '\f1a6'; }
.menu li a[href*="dribbble.com"]::after { content: '\f17d'; }
.menu li a[href*="dropbox.com"]::after { content: '\f16b'; }
.menu li a[href*="facebook.com"]::after { content: '\f09a'; }
.menu li a[href*="flickr.com"]::after { content: '\f16e'; }
.menu li a[href*="plus.google.com"]::after { content: '\f0d5'; }
.menu li a[href*="github.com"]::after { content: '\f09b'; }
.menu li a[href*="instagram.com"]::after { content: '\f16d'; }
.menu li a[href*="linkedin.com"]::after { content: '\f0e1'; }
.menu li a[href*="pinterest.com"]::after { content: '\f0d2'; }
.menu li a[href*="reddit.com"]::after { content: '\f1a1'; }
.menu li a[href*="skype.com"]::after,
.menu li a[href*="skype:"]::after { content: '\f17e'; }
.menu li a[href*="stumbleupon.com"]::after { content: '\f1a4'; }
.menu li a[href*="tumblr.com"]::after { content: '\f173'; }
.menu li a[href*="twitter.com"]::after { content: '\f099'; }
.menu li a[href*="vimeo.com"]::after { content: '\f194'; }
.menu li a[href*="wordpress.org"]::after,
.menu li a[href*="wordpress.com"]::after { content: '\f19a'; }
.menu li a[href*="youtube.com"]::after { content: '\f16a'; }
/* Media player */
.mejs-overlay-button { margin: -64px 0 0 -64px !important; }
.mejs-overlay-play .mejs-overlay-button::after {
content: '\f01d';
padding: 0;
font-size: 128px;
line-height: 128px;
}
.mejs-fullscreen-button button::after { content: '\f065'; }
.mejs-play button::after { content: '\f04b'; }
.mejs-pause button::after { content: '\f04c'; }
.mejs-volume-button button::after { content: '\f028'; }
.mejs-unmute button::after { content: '\f026'; }
/* Media playlist */
.wp-playlist-playing .wp-playlist-caption::before { content: '\f04b'; }
.wp-playlist-current-item .wp-playlist-item-title::before { content: '\f001'; }
.wp-playlist-current-item .wp-playlist-item-album::before { content: '\f07c'; }
.wp-playlist-current-item .wp-playlist-item-artist::before { content: '\f007'; }
.wp-playlist-playing .wp-playlist-caption::before,
.wp-playlist-item-meta::before { padding-bottom: 2px; }
.ltr .wp-playlist-playing .wp-playlist-caption::before { padding-right: 7px; }
.rtl .wp-playlist-playing .wp-playlist-caption::before { padding-left: 7px; }
.ltr .wp-playlist-item-meta::before { padding-right: 10px; }
.rtl .wp-playlist-item-meta::before { padding-left: 10px; }
/* Posts */
.chat-author cite::before { content: '\f007'; padding: 0 0 4px; }
.ltr .chat-author cite::before { padding-right: 8px; }
.rtl .chat-author cite::before { padding-left: 8px; }
/* Comments */
.label-password::before,
.comment-respond label[for="author"]::before,
.comment-respond label[for="email"]::before,
.comment-respond label[for="url"]::before,
.comment-respond label[for="comment"]::before {
margin-bottom: 3px;
padding: 0 8px;
}
.label-password::before { content: '\f023'; }
.comment-respond label[for="author"]::before { content: '\f007'; }
.comment-respond label[for="email"]::before { content: '\f0e0'; }
.comment-respond label[for="url"]::before { content: '\f015'; }
.comment-respond label[for="comment"]::before { content: '\f075'; }
/********************************************************************************************************
* ====== End Genericons ======
********************************************************************************************************/
/********************************************************************************************************
* 1.5 - Header and Footer
*
* Handles the output of the main site header and footer content.
********************************************************************************************************/
/* ====== Header ====== */
#header {
margin-top: 1rem;
margin-bottom: 1rem;
line-height: 2.5rem;
}
#site-title,
#site-description {
display: inline-block;
margin: 0;
vertical-align: middle;
}
#site-title {
text-transform: uppercase;
font-weight: 900;
font-size: 1.5rem;
}
#site-description {
font-style: italic;
font-weight: 400;
font-size: 1.125rem;
}
.ltr #site-description { margin-left: 0.75rem; }
.rtl #site-description { margin-right: 0.75rem; }
/* ====== Footer ====== */
#footer { margin-top: 1.5rem; }
#footer .credit { text-align: center; }
@media only screen and ( min-width: 850px ) {
.loop-pagination + .credit { padding-top: 0.75rem; }
.ltr .loop-pagination,
.rtl .loop-pagination + .credit { float: left; text-align: left; }
.rtl .loop-pagination,
.ltr .loop-pagination + .credit { float: right; text-align: right; }
}
/********************************************************************************************************
* ====== End Header and Footer ======
********************************************************************************************************/
/********************************************************************************************************
* 1.6 - Main and Content
*
* This section deals with the #main section of the site, which wraps the content and primary sidebar.
* Sidebars have their own section in this stylesheet.
********************************************************************************************************/
/* ====== Main ====== */
.main {
word-wrap: break-word;
word-break: normal;
}
/* ====== Content ======= */
.singular .content { padding-bottom: 1.5rem; }
/* ====== Posts ====== */
@media only screen and ( min-width: 850px ) {
.plural .entry-byline { margin: -0.375rem 0 1.125rem; }
}
/* More Link */
.more-link-wrap {
margin-top: -0.375rem;
font-size: 1.125rem;
text-align: center;
}
.more-link { text-transform: capitalize; }
/* Header and Footer */
.entry-footer { clear: both; }
.singular .entry-footer { margin-top: 1.5rem; }
.entry-byline .sep,
.entry-meta .sep,
.entry-footer .sep,
.comment-meta .sep { margin: 0 0.375rem; }
/* Remove separator if it's the first item shown. */
.entry-byline > .sep:first-child { display: none; }
/* === Aside Format === */
.plural .format-aside { padding: 1.5rem 0 0; }
/* === Chat Format === */
.ltr .format-chat .chat-text { margin-left: 1.3125rem; }
.rtl .format-chat .chat-text { margin-right: 1.3125rem; }
.format-chat .chat-author {
margin-top: -12px;
padding-top: 12px;
border-top: 1px dashed;
}
.format-chat .chat-row:first-child .chat-author {
margin: 0;
padding: 0;
border: none;
}
.chat-author cite {
font-style: normal;
font-weight: 700;
font-size: 1.0625rem;
}
/* === Gallery Format === */
.format-gallery .featured-media { position: relative; }
.format-gallery .gallery-count,
.featured-media .wp-caption-text {
position: absolute;
top: 0;
padding: 0.375rem 0.75rem;
text-transform: capitalize;
}
.ltr .format-gallery .gallery-count,
.ltr .featured-media .wp-caption-text { right: 0; }
.rtl .format-gallery .gallery-count,
.rtl .featured-media .wp-caption-text { left: 0; }
/* === Quote Format === */
.plural .format-quote { padding: 1.5rem 0 0; }
.format-quote blockquote {
position: relative;
margin: 0;
padding: 18px 47px 18px 60px;
font-size: 1.5rem;
}
.format-quote blockquote::before,
.format-quote blockquote::after {
content: '\201C';
height: 36px;
font-size: 135px;
font-style: italic;
font-weight: 400;
line-height: 98px;
position: absolute;
vertical-align: middle;
}
.format-quote blockquote::before {
top: 0.375rem;
left: 0;
text-indent: -13px;
}
.format-quote blockquote::after {
content: '\201D';
bottom: 2.25rem;
right: 0;
}
@media only screen and ( max-width: 480px ) {
.format-quote blockquote {
padding: 9px 20px 9px 30px;
font-size: 1.25rem;
}
.format-quote blockquote::before,
.format-quote blockquote::after {
height: 20px;
font-size: 75px;
line-height: 54px;
}
}
@media only screen and ( max-width: 850px ) {
.format-quote blockquote { font-size: 1.375rem; }
}
/* === Status Format === */
.plural .format-status { padding: 1.5rem 0 0; }
/* ====== Loop Meta ====== */
/**/
.loop-meta { overflow: hidden;
text-align: center; }
.loop-meta .loop-title {
font-size: 1.125rem;
text-transform: uppercase;
font-family: Lato;
font-weight: 900;
}
.loop-description {
margin-top: -0.75rem;
}/**/
/* ====== Attachment Meta ====== */
.attachment-meta {
max-width: 650px;
margin: 0 auto 1.5rem;
padding: 0 1.5rem;
}
.attachment-meta .media-info,
.attachment-meta .image-gallery { padding-top: 1.5rem; }
.media-info .media-meta {
list-style: none;
margin: 0 0 1.5rem;
}
.media-meta li {
overflow: hidden;
clear: both;
padding: 0.375rem 0.75rem;
text-align: center;
border-bottom: 1px dashed;
}
.media-meta li:first-child { padding-top: 0; }
.media-meta li:last-child { padding-bottom: 0; border: none; }
.media-meta .prep {
display: block;
text-transform: uppercase;
font-size: 0.8375rem;
font-weight: 700;
}
.media-meta .data { display: block; }
@media only screen and ( min-width: 480px ) {
.media-meta .prep { padding-top: 3px; }
.ltr .media-meta .prep,
.rtl .media-meta .data { float: left; }
.ltr .media-meta .data,
.rtl .media-meta .prep { float: right; }
}
.attachment-meta .gallery-caption { position: absolute; top: -9999em; }
.ltr .attachment-meta .gallery-caption { left: -9999em; }
.rtl .attachment-meta .gallery-caption { right: -9999em; }
/* ====== Pagination ====== */
/* === Archive pages === */
.loop-pagination { text-align: center; margin: 0 0 0.75rem; }
.loop-pagination .current { text-decoration: underline; }
.loop-pagination .page-numbers {
padding: 0.375rem;
padding: 12px 18px;
margin: 0 -2px 0.75rem;
display: inline-block;
}
.loop-pagination .page-numbers:first-child { margin-left: 0; }
.loop-pagination .page-numbers:last-child { margin-right: 0; }
/* === Single pages === */
.page-links {
clear: both;
font-size: 1.125rem;
text-align: center;
}
.page-links .page-numbers,
.page-links a {
margin: 0 3px;
padding: 3px 11px;
border: 1px solid;
}
.page-links a:hover,
.page-links a:focus { text-decoration: underline; }
/********************************************************************************************************
* ====== End Main ======
********************************************************************************************************/
/********************************************************************************************************
* 1.7 - Media
*
* This section deals with handling media and the output of media-related elements.
********************************************************************************************************/
/********************************************************************************************************
* ====== End Media ======
********************************************************************************************************/
/********************************************************************************************************
* 1.8 - Sidebars and Widgets
*
* This section handles the output of sidebars and widgets. Note that the layout of sidebars is handled
* in the layout section. There's also a few style rules for non-sidebar elements that have the same
* design.
********************************************************************************************************/
/********************************************************************************************************
* ====== End Sidebars and Widgets ======
********************************************************************************************************/
/********************************************************************************************************
* 1.9 - Comments Template
*
* This section handles the output of the comments template. In particular, it styles the output of the
* comments section (comments list) and the respond section (comment form).
********************************************************************************************************/
#comments { padding-top: 1.5rem; }
.comments-closed {
text-align: center;
font-size: 1.25rem;
}
#comments-number,
#reply-title { margin-bottom: 3rem; }
.comment-list,
.comment-list .children { list-style: none; }
.ltr .comment-list { margin-left: 0; }
.rtl .comment-list { margin-right: 0; }
.ltr .comment-list .children { margin-left: 1rem; }
.rtl .comment-list .children { margin-right: 1rem; }
@media only screen and ( min-width: 480px ) {
.ltr .comment-list .children { margin-left: 1.5rem; }
.rtl .comment-list .children { margin-right: 1.5rem; }
}
@media only screen and ( min-width: 650px ) {
.ltr .comment-list .children { margin-left: 3rem; }
.rtl .comment-list .children { margin-right: 3rem; }
}
/* === Individual comments */
li.comment,
li.ping { clear: both;}
/* === Avatars === */
.ltr li.ping .avatar { float: right; margin-left: 1.5rem; }
.rtl li.ping .avatar { float: left; margin-right: 1.5rem; }
/* === Meta === */
.comment-meta {
padding: 5px 0 0;
font-size: 1rem;
}
.has-avatar.comment .comment-author { margin-top: 8px; }
.comment-author {
display: inline-block;
font-size: 1rem;
font-weight: 700;
font-style: normal;
}
/* === Comment text/content === */
li.ping,
.comment-content {
clear: both;
margin: 0 0 1.5rem;
padding: 1.5rem 1.5rem 0;
border: 1px solid;
}
li.ping { padding-bottom: 1.5rem; }
.comment-content { font-size: 1.25rem; }
/* === Reply link === */
.comment-reply-link,
.comment-reply-login {
position: relative;
display: inline-block;
top: -1.5rem;
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 400;
border: none;
}
.ltr .comment-reply-link,
.ltr .comment-reply-login { float: right; margin-right: 0.75rem; }
.rtl .comment-reply-link,
.rtl .comment-reply-login { float: left; margin-left: 0.75rem; }
.comments-closed { margin: -1.5rem 0 3rem; }
/* comments nav */
.comments-nav {
text-align: center;
margin-bottom: 1.5rem;
font-size: 1.125rem;
}
.comments-nav .page-numbers { padding: 0 0.75rem; }
/* ====== Respond ======= */
.comment-respond {
padding-bottom: 1.5rem;
padding-top: 1.5rem;
}
#cancel-comment-reply-link {
display: inline-block;
vertical-align: middle;
font-size: 1rem;
}
.ltr #cancel-comment-reply-link { margin-left: 0.375rem; }
.rtl #cancel-comment-reply-link { margin-right: 0.375rem; }
.comment-respond p { clear: both; }
@media only screen and ( min-width: 850px ) {
.comment-respond .comment-form-author,
.comment-respond .comment-form-email {
clear: none;
width: 47.5%;
}
.ltr .comment-form-author,
.rtl .comment-form-email { float: left; }
.rtl .comment-form-author,
.ltr .comment-form-email { float: right; }
}
/********************************************************************************************************
* ====== End Comments Template ======
********************************************************************************************************/
/********************************************************************************************************
* 1.10 - Menus
*
* This section of the CSS is for handling the design of the various menus used within the theme.
********************************************************************************************************/
.menu-toggle { margin: 0; text-align: center; }
#menu-primary {
position: relative;
z-index: 99;
}
.menu-toggle button {
font-size: 1rem;
margin: 0;
}
#menu-primary > .wrap {
display: none;
position: absolute;
left: 50%;
margin-left: -175px;
width: 350px;
}
.ltr #menu-primary > .wrap { text-align: left; }
.rtl #menu-primary > .wrap { text-align: right; }
@media only screen and ( min-width: 850px ) {
.display-header-text #menu-primary > .wrap { margin-left: 0; }
.display-header-text.ltr #menu-primary > .wrap { left: auto; right: 0; }
.display-header-text.rtl #menu-primary > .wrap { right: auto; left: 0; }
}
#menu-primary ul {
list-style: none;
margin: 0;
}
#menu-primary li a {
display: block;
padding: 0.125rem 1.5rem;
border-top: 1px dashed;
border-bottom: 1px dashed
}
.ltr #menu-primary li li a { padding-left: 1.75rem; }
.ltr #menu-primary li li li a { padding-left: 3rem; }
.ltr #menu-primary li li li li a { padding-left: 4.25rem; }
.ltr #menu-primary li li li li li a { padding-left: 5.5rem; }
.rtl #menu-primary li li a { padding-right: 1.75rem; }
.rtl #menu-primary li li li a { padding-right: 3rem; }
.rtl #menu-primary li li li li a { padding-right: 4.25rem; }
.rtl #menu-primary li li li li li a { padding-right: 5.5rem; }
/********************************************************************************************************
* ====== End Menus ======
********************************************************************************************************/
/********************************************************************************************************
* 1.11 - Plugins
*
* This section handles the output of specific plugins that the theme supports. The theme isn't limited
* to these plugins. It merely gives some extra love to these plugins.
********************************************************************************************************/
/********************************************************************************************************
* ====== End Plugins ======
********************************************************************************************************/
/********************************************************************************************************
* 2 - Fun Zone
*
* This section of the stylesheet is what I call the fun area. For the most part, you should feel free
* to overwrite the following in your child theme's `style.css` file if your design calls for it.
* Specifically, this deals with fonts and colors. Those things are really the things that give your
* child theme its uniqueness. Have fun with it. Go wild!
********************************************************************************************************/
/**
* 2.1 - Font Family Definitions
*
* This theme operates with three dinstinct font rules. The "primary" font is used for the majority of
* text throughout the theme. The "secondary" font is used for handling secondary use cases. The
* "headlines" font is specific to h1-h6 headers (with the exception of #site-description).
*
* If building a child theme for public release with custom fonts, the child theme should define only the
* font rules it needs. Copy the specific section below that you want to overwrite into the child theme.
* Make sure to include the `.font-*` class as this will maintain forward compatibility with future
* changes in the parent theme.
*/
/* ====== Primary Font ====== */
body,
#site-title,
.main .entry-subtitle,
button,
.font-primary {
font-family: 'Lato', sans-serif;
}
/* ====== Secondary Font ====== */
blockquote,
dt,
.entry-byline .entry-author a,
var,
.font-secondary {
font-family: 'Playfair Display', Georgia, serif;
}
/* ====== Headlines Font ====== */
h1, h2, h3, h4, h5, h6,
.font-headlines {
font-family: 'Playfair Display', Georgia, serif;
}
/* ====== Code Font ====== */
body pre,
body code {
font-family: Monaco, Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
}
/**
* 2.2 - Color Definitions
*
* The following are all of the colors defined by the theme. The only other colors are part of the theme
* customizer options and should not be overwritten. If needed, copy the specific sections below into
* your child theme and make the necessary changes there.
*/
/*
* Fun Zone: The colors below are safe to overwrite depending on what you need to do. Have at it!
*/
/**********************************/
/* === background rgb( 119, 119, 119 ) === */
h1::after,
h2::after,
h3::after,
h4::after,
h5::after,
h6::after,
.singular .entry-header::after,
.singular-post .main .entry-title::after,
.singular-literature .entry-meta::after,
.singular-attachment .main .entry-title::after {
background: rgba( 119, 119, 119, 0.1 );
}
/* === background rgb( 255, 255, 255 ) === */
@media only screen and ( min-width: 850px ) {
.plural .entry > .wrap { background: rgba( 255, 255, 255, 0.9 ); }
}
/* === color #d5d5d5 === */
.mejs-unmute,
.mejs-unmute button { color: #d5d5d5; }
/* === color #b5b5b5 === */
.entry-header,
.entry-footer,
.media-meta .data,
.comments-closed,
.comment-meta,
label,
.logged-in-as,
.form-allowed-tags,
.comment-notes,
.comments-nav .page-numbers {
color: #b5b5b5;
}
/* === color #959595 === */
blockquote,
.gallery-caption {
color: #959595;
}
/* === color #858585 === */
.wp-caption .wp-caption-text,
.page-links,
dd,
.wp-playlist-item-meta,
.wp-playlist-item-length { color: #858585; }
/* === color #757575 === */
pre,
blockquote cite {
color: #757575;
}
/* === color #555 === */
.line-through del,
.line-through strike,
.line-through s,
.entry-content,
.entry-summary,
.media-meta .prep,
.comment-content {
color: #555;
}
/* === color #454545 === */
h1,
h2,
h3,
h4,
h5,
h6,
.entry-byline .entry-author a {
color: #454545;
}
/* === color #353535 === */
.entry-subtitle {
color: #353535;
}
/* === color #252525 === */
.main .entry-title,
.entry-title a {
color: #252525;
}
/* === border color rgb( 119, 119, 119 ) === */
.wp-playlist,
.page-links .page-numbers,
.page-links a {
border-color: rgba( 119, 119, 119, 0.1 );
}
li.ping,
.comment-content {
border-color: rgba( 119, 119, 119, 0.15 );
}
.wp-playlist-tracks .wp-playlist-item,
.media-meta li {
border-bottom-color: rgba( 119, 119, 119, 0.1 );
}
/* === background #fff === */
.entry > .wrap,
.plural .entry,
.singular .main,
.error-404 .main {
background-color: #fff;
}
/* === background transparent === */
pre code,
hr {
background: transparent;
}
a img {
background: #fafafa;
border-color: #e5f5f5;
}
/* === gallery count / caption text colors === */
.format-gallery .gallery-count,
.featured-media .wp-caption-text {
background: rgba( 0, 0, 0, 0.5 );
color: rgba( 255, 255, 255, 0.95 );
}
/* === image colors === */
a.img-hyperlink:focus { outline: initial; }
.featured-media a:focus img { border: none; }
/* === menu-primary colors === */
#menu-primary > .wrap { background: #151515; }
#menu-primary li a {
border-top-color: rgba( 255, 255, 255, 0.1 );
border-bottom-color: transparent;
}
#menu-primary .menu-items > li:first-of-type > a {
border-top-color: transparent;
}
#menu-primary .menu-items > li:first-of-type > a:focus,
#menu-primary li a:focus {
outline: initial;
border-color: #fff;
}
/* === text-shadow ( 0, 0, 0, 0.2 ) === */
.menu-toggle button,
.loop-pagination .page-numbers,
#menu-primary li a { text-shadow: 2px 2px 0 rgba( 0, 0, 0, 0.2 ); }
/* === border-color #f1f1f1 === */
pre,
.form-allowed-tags code,
code,
thead,
tfoot
tr,
td { border-color: #f1f1f1; }
/* === form colors === */
input[type="number"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
textarea,
select {
background: #f5f5f5;
border-color: #e5e5e5;
}
hr, fieldset { border-color: #e5e5e5; }
input[type="date"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="email"]:focus,
input[type="month"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
input[type="week"]:focus,
textarea:focus,
select:focus {
color: #555;
background: #f0f0f0;
border-color: #e0e0e0;
}
/* === media player colors === */
.wp-audio-shortcode.mejs-container,
.mejs-controls,
.mejs-volume-button .mejs-volume-slider,
.mejs-time-rail .mejs-time-float,
.wp-playlist-dark {
background: #252525;
}
.wp-playlist-dark .mejs-controls { background: #151515; }
.wp-playlist-dark .wp-playlist-tracks a { color: rgba( 255, 255, 255, 0.75 ); }
.mejs-container,
.mejs-embed,
.mejs-embed body,
.mejs-overlay-button,
.mejs-controls > .mejs-button button:hover,
.mejs-controls > .mejs-button button:focus {
background: transparent;
}
.mejs-time-rail .mejs-time-float { border-color: #454545; }
.mejs-time-rail .mejs-time-float-corner { border-top-color: #fff; }
.mejs-time-rail .mejs-time-total,
.mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
.mejs-volume-button .mejs-volume-slider .mejs-volume-total {
background: #454545;
}
.mejs-time-rail .mejs-time-current { background: rgba( 255, 255, 255, 0.35 ); }
.mejs-overlay-play .mejs-overlay-button::after { text-shadow: 1px 1px 2px #151515; }
.mejs-button button:focus { outline-color: #555; }
/* === Chat speaker colors === */
.format-chat .chat-speaker-1 .chat-author,
.format-chat .chat-speaker-11 .chat-author { color: #3498db; }
.format-chat .chat-speaker-2 .chat-author,
.format-chat .chat-speaker-12 .chat-author { color: #f1c40f; }
.format-chat .chat-speaker-3 .chat-author,
.format-chat .chat-speaker-13 .chat-author { color: #e74c3c; }
.format-chat .chat-speaker-4 .chat-author,
.format-chat .chat-speaker-14 .chat-author { color: #2ecc71; }
.format-chat .chat-speaker-5 .chat-author,
.format-chat .chat-speaker-15 .chat-author { color: #f39c12; }
.format-chat .chat-speaker-6 .chat-author,
.format-chat .chat-speaker-16 .chat-author { color: #9b59b6; }
.format-chat .chat-speaker-7 .chat-author,
.format-chat .chat-speaker-17 .chat-author { color: #95a5a6; }
.format-chat .chat-speaker-8 .chat-author,
.format-chat .chat-speaker-18 .chat-author { color: #16a085; }
.format-chat .chat-speaker-9 .chat-author,
.format-chat .chat-speaker-19 .chat-author { color: #e67e22; }
.format-chat .chat-speaker-10 .chat-author,
.format-chat .chat-speaker-20 .chat-author { color: #1abc9c; }
/* =/=/=/=/=/= End fun zone. =/=/=/=/=/= */
/*
* Colors Danger Zone: The white color is used in contrast to the 'primary' and 'menu' theme colors.
* It's not recommended to overwrite this specific color section. If overwriting, it should be a very
* light color.
*/
/* === color #fff === */
::selection {
color: #fff; /* Don't combine with other elements. Breaks Firefox. */
}
.mejs-button,
.mejs-button button,
.menu-toggle button,
.page-links a,
.page-links a:hover,
.page-links a:focus,
.loop-pagination .page-numbers,
#menu-primary li a,
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.comment-reply-link,
.comment-reply-link:hover,
.comment-reply-link:focus,
.wp-playlist-dark .wp-playlist-tracks .wp-playlist-playing a,
.wp-playlist-dark .wp-playlist-tracks a:hover,
.wp-playlist-dark .wp-playlist-tracks a:focus,
.mejs-time .mejs-currenttime,
.mejs-time .mejs-duration,
.mejs-volume-button .mejs-volume-slider .mejs-volume-current,
.mejs-volume-button .mejs-volume-slider .mejs-volume-handle,
.mejs-time-rail .mejs-time-float,
.wp-playlist-dark .wp-playlist-playing,
.wp-playlist-dark .wp-playlist-caption:hover,
.wp-playlist-dark .wp-playlist-caption:focus,
.wp-playlist-dark .wp-playlist-item:hover
.wp-playlist-dark .wp-playlist-item:focus {
color: #fff;
}
pre,
.form-allowed-tags code {
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, 0.5)), color-stop(.5, transparent), to(transparent));
background-image: -webkit-linear-gradient( rgba( 255, 255, 255, 0.5 ) 50%, transparent 50%, transparent );
background-image: -moz-linear-gradient( rgba( 255, 255, 255, 0.5 ) 50%, transparent 50%, transparent );
background-image: -o-linear-gradient( rgba( 255, 255, 255, 0.5 ) 50%, transparent 50%, transparent );
background-image: linear-gradient( rgba( 255, 255, 255, 0.5 ) 50%, transparent 50%, transparent );
}
/* =/=/=/=/=/= End colors danger zone. =/=/=/=/=/= */
/********************************************************************************************************
* This concludes the fun area for making your child theme unique.
********************************************************************************************************/