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


%%text-primary 
%%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}]

!!!TEN3 Colors

Blue - 243, 87, 85, 38, 29, 217

Red - 0, 87, 85, 217, 29, 29

!!! Site Logo
[{Image src='TEN3.png'}]
{{{
%%add-css
/* hide the default jspwiki logo */
a.logo { background:transparent; border:none; text-indent:-99em; }
a.logo b:before { content:""; }
/%
}}}
%%add-css
/* hide the default jspwiki logo */
a.logo { background:transparent; border:none; text-indent:-99em; }
a.logo b:before { content:""; }
/%

{{{
%%add-css
/* put the clean-blue logo, attached to this page */
a.logo {
    background: url([TEN3.png]);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 60px;
    width: 120px; 
}
/%
}}}
%%add-css
/* put the clean-blue logo, attached to this page */
a.logo {
    background: url([TEN3.png]);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 60px;
    width: 120px; 
}
/%

!!! Roll Box Left - {{{%%rollboxleft}}}
%%rollboxleft
%%center
%%lead __Rock N Roll /%
/%
/%
{{{
%%add-css
/* add a new %~%rollboxleft style */
.rollboxleft { display:block; background: #5c95e0aa; width:50%; padding:1em; transition: all .2s ease-in-out; } 
.rollboxleft:hover { transform: scale(1.5) rotate(-30deg); }
/* change existing style of header & footer */
.header, .footer { background-image:url([Textures/dotted-dark-pink-canvas-1200x1093.jpg]); }
/%
}}}

%%add-css
/* add a new %~%rollboxleft style */
.rollboxleft { display:block; background: #5c95e0aa; width:50%; padding:1em; transition: all .2s ease-in-out; } 
.rollboxleft:hover { transform: scale(1.5) rotate(-30deg); }
/* change existing style of header & footer */
.header, .footer { background-image:url([Textures/dotted-dark-pink-canvas-1200x1093.jpg]); }
/%

!!! Roll Box Right - {{{%%rollboxright}}}

%%error
Error: This rollboxright does not work on other pages. We need to look into this so we can learn the CSS better. 
/%

%%rollboxright
%%center
__Roll Right
/%
/%
{{{
%%add-css
/* add a new %~%rollboxright style */
.rollboxright { display:block; background: lightgreen; width:50%; padding:1em; transition: all .2s ease-in-out; } 
.rollboxright:hover { transform: scale(2) rotate(30deg); }
/* change existing style of header & footer */
.header, .footer { background-image:url([Textures/dotted-dark-pink-canvas-1200x1093.jpg]); }
/%
}}}

%%add-css
/* add a new %~%rollboxright style */
.rollboxright { display:block; background: lightgreen; width:50%; padding:1em; transition: all .2s ease-in-out; } 
.rollboxright:hover { transform: scale(2) rotate(30deg); }
/* change existing style of header & footer */
.header, .footer { background-image:url([Textures/dotted-dark-pink-canvas-1200x1093.jpg]); }
/%



----
[#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.