[{ALLOW view All}]
[{ALLOW edit Editors}]

%%hide
Sections of this page are used on other pages. We have commented the sections so you know which pages to fix if you change the sectioning on this page. 
/%

%%text-success 
%%dropcaps
C %%lead __ustomized CSS__
/% 
/%
__CSS we've added.__
/%
----
We have placed our CSS additions on this page rather than in [LeftMenu][1] and then have included it on the LeftMenu with:
{{{
%%add-css [CustomizedCSS] /%
}}}

This allows us to document what we have done. 
[{TableOfContents}]

!!!Owls' Colors
* #74b63d is owls' green

!!! Site Logo

[{Image id='owls-logo' src='owls.png' alt='Jesus Bible Songs'}]

%%add-css
/* 1. HIDE DEFAULT LOGO & SETUP CUSTOM LOGO */
a.logo { background:transparent; border:none; text-indent:-99em; }
a.logo b:before { content:""; }

a.logo {
    background: url([owls.png]);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 60px;
    width: 120px; 
    box-shadow: 0 0 .25em white;
    border-radius: 2em;
    background-color: rgba(255,255,255,0.15);
}

/* 2. FORCE DARK MODE & BACKGROUNDS */
:root, html, body {
    color-scheme: dark !important;
    background-color: #1a1a1a !important; 
}

body, .page, #pagecontent, .left-menu { 
    background-color: #1a1a1a !important; 
    color: #f0f0f0 !important; 
    border: none !important;
}

/* 3. FONTS & TITLES */
@import url(https://fonts.googleapis.com/css?family=Orbitron);
@import url(https://fonts.googleapis.com/css?family=Indie+Flower);
@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro);
@import url(https://fonts.googleapis.com/css?family=Great+Vibes);

pre, tt { font-family: "Source Code Pro"; font-size: 66%; }
.handwritten { font-family: "Indie Flower"; font-size: 110%; }
.pagename, h2 { font-family: "Orbitron"; }
h3, h4 { font-family: "Great Vibes"; color: rgb(232, 48, 79); }

/* Fix "J" Visibility and Page Titles */
h1.pagename, .h1.pagename, .dropcap, .h1.pagename span {
    color: #87ceeb !important;
}

/* 4. TABLES & ZEBRA STRIPES */
table, .table, tr, td, th {
    background-color: #1a1a1a !important;
    color: #f0f0f0 !important;
    border-color: #333 !important;
}

/* Light Grey Stripe for Mobile/Web */
.table-striped > tbody > tr:nth-of-type(odd) > td,
.table-striped > tbody > tr:nth-of-type(odd) > th,
tr.odd td, td.odd {
    background-color: #333333 !important;
}

/* 5. LINKS & INTERACTION */
a, a:link, a:visited { 
    color: #87ceeb !important; 
    text-decoration: none;
}

/* 6. INPUTS & SEARCH BOX */
input, .filter, #filter { 
    background-color: #333 !important; 
    color: #fff !important; 
    border: 1px solid #555 !important;
    padding: 5px;
}

/* 7. IMAGE STYLING */
#owls-logo img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 10px auto;
    border-radius: 8px;
}
/%

[{SET page-styles='prettify'}]
This is an example page, using alternative fonts loaded from [Google's fonts repository|https://www.google.com/fonts].

----

!!!Header in Orbitron font
!!Title
!Sub-Title

This is just some sample in the default template font.

%%quote
%%handwritten  
This is just some %%text-primary %~%handwritten /% "Indie Flower" font sample.
/%
/%

----
[#1] CSS that is put in the LeftMenu page are propagated to all the pages of your site. See [LeftPage on this JSPWiki Doc|https://jspwiki-wiki.apache.org/Wiki.jsp?page=Add%20CSS%20Style|target='_blank'] for more info.