[{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. LOGO STYLING */
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. THE "TOTAL DARKNESS" FIX (Specifically for Issue 3) */
/* This targets the HTML floor, the body, and every possible container name used in JSPWiki */
html, body, #wrap, #wikibody, .main, .container, .row, .page, #pagecontent, .footer, .footer-wrapper {
    background-color: #1a1a1a !important;
    color: #f0f0f0 !important;
    border: none !important;
    color-scheme: dark !important;
}

/* 3. THE SIDEBAR GHOST FIX */
/* This targets the sidebar specifically and any 'Wells' or 'Columns' that might be white */
.sidebar, .sidebar-wrapper, .left-menu, #leftmenu, .well, [class*="col-"] {
    background-color: #1a1a1a !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* 4. THE "J" (DROPCAPS) AND TITLE FIX */
.dropcaps, .dropcap {
    color: #87ceeb !important; 
    display: inline-block !important;
    opacity: 1 !important;
}
.lead {
    color: #f0f0f0 !important;
}

/* 5. FONTS */
@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); }

/* 6. TABLES & ZEBRA STRIPES */
table, .table, tr, td, th {
    background-color: #1a1a1a !important;
    color: #f0f0f0 !important;
    border-color: #333 !important;
}
.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;
}

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

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

/* 9. IMAGE STYLING */
#owls-logo img, img[src*='guitarBibleLgr'] {
    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.