add some more custom config and put every thing in comment in the custom.yaml template
/* Syles for font alternatives */
#textcontainer {
font-size: 14px;
line-height: 20px;
padding-left: 30px;
}
#textcontainer.modern {
font-family: Lora, Georgia, serif;
}
#textcontainer.classic {
font-family: arial, helvetica, clean, sans-serif;
}
#textcontainer.code {
font-family: courier;
}
#textcontainer h1 {
font-size: 22px;
line-height: 24px;
}
#textcontainer h2 {
font-size: 16px;
line-height: 18px;
}
#textcontainer h3 {
font-size:14px;
line-height: 16px;
}
#textcontainer.modern h1,
#textcontainer.modern h2,
#textcontainer.modern h3,
#textcontainer.modern h4,
#textcontainer.modern h5,
#textcontainer.modern h6 {
font-family: 'PT Sans', Verdana, sans-serif;
}
/* Styles for footnotes using Drupal module 'footnotes' */
#textcontainer .footnotes {
clear: both;
margin-top: 4em;
margin-bottom: 2em;
border-top: 1px solid #000000;
font-size: 0.9em;
}
#textcontainer .see-footnote {
vertical-align: top;
position: relative;
top: -0.25em;
font-size: 0.9em;
text-decoration: none;
}
#textcontainer ul.footnotes {
list-style-type: none;
margin-left: 0;
padding-left: 0;
}
#textcontainer ul.footnotes li {
margin-left: 2.5em;
list-style-type: none;
background: none;
}
#textcontainer ul.footnotes {
position: relative;
}
#textcontainer .footnotes .footnote-label {
position: absolute;
left: 0px;
z-index: 2;
text-decoration: none;
}
#textcontainer .see-footnote:target,
.footnotes .footnote:target {
background-color: #eeeeee;
}
#textcontainer .see-footnote:target {
border: solid 1px #aaaaaa;
}
#textcontainer .footnotes .footnote-multi {
vertical-align: top;
position: relative;
top: -0.25em;
font-size: 0.75em;
}
.cat1 {
box-shadow: -12px 0 0 0 white, -14px 0 0 0 #1523f4;
}
.cat2 {
box-shadow: -15px 0 0 0 white, -17px 0 0 0 #f4154f;
}
.cat3 {
box-shadow: -18px 0 0 0 white, -20px 0 0 0 #09ff09;
}
.cat4 {
box-shadow: -21px 0 0 0 white, -23px 0 0 0 #bc39cf;
}
.cat5 {
box-shadow: -24px 0 0 0 white, -26px 0 0 0 #ffbd08;
}
.cat1.cat2 {
box-shadow: -12px 0 0 0 white, -14px 0 0 0 #1523f4, -15px 0 0 0 white, -17px 0 0 0 #f4154f;
}
.cat1.cat3 {
box-shadow: -12px 0 0 0 white, -14px 0 0 0 #1523f4, -18px 0 0 0 white, -20px 0 0 0 #09ff09;
}
.cat1.cat4 {
box-shadow: -12px 0 0 0 white, -14px 0 0 0 #1523f4, -21px 0 0 0 white, -23px 0 0 0 #bc39cf;
}
.cat1.cat5 {
box-shadow: -12px 0 0 0 white, -14px 0 0 0 #1523f4, -24px 0 0 0 white, -26px 0 0 0 #ffbd08;
}
.cat2.cat3 {
box-shadow: -15px 0 0 0 white, -17px 0 0 0 #f4154f, -18px 0 0 0 white, -20px 0 0 0 #09ff09;
}
.cat2.cat4 {
box-shadow: -15px 0 0 0 white, -17px 0 0 0 #f4154f, -21px 0 0 0 white, -23px 0 0 0 #bc39cf;
}
.cat2.cat5 {
box-shadow: -15px 0 0 0 white, -17px 0 0 0 #f4154f, -24px 0 0 0 white, -26px 0 0 0 #ffbd08;
}
.cat3.cat4 {
box-shadow: -18px 0 0 0 white, -20px 0 0 0 #09ff09, -21px 0 0 0 white, -23px 0 0 0 #bc39cf;
}
.cat3.cat5 {
box-shadow: -18px 0 0 0 white, -20px 0 0 0 #09ff09, -24px 0 0 0 white, -26px 0 0 0 #ffbd08;
}
.cat4.cat5 {
box-shadow: -21px 0 0 0 white, -23px 0 0 0 #bc39cf, -24px 0 0 0 white, -26px 0 0 0 #ffbd08;
}
.cat1.cat2.cat3 {
box-shadow: -12px 0 0 0 white, -14px 0 0 0 #1523f4, -15px 0 0 0 white, -17px 0 0 0 #f4154f, -18px 0 0 0 white, -20px 0 0 0 #09ff09;
}
.cat1.cat2.cat4 {
box-shadow: -12px 0 0 0 white, -14px 0 0 0 #1523f4, -15px 0 0 0 white, -17px 0 0 0 #f4154f, -21px 0 0 0 white, -23px 0 0 0 #bc39cf;
}
.cat1.cat2.cat5 {
box-shadow: -12px 0 0 0 white, -14px 0 0 0 #1523f4, -15px 0 0 0 white, -17px 0 0 0 #f4154f, -24px 0 0 0 white, -26px 0 0 0 #ffbd08;
}
.cat1.cat3.cat4 {
box-shadow: -12px 0 0 0 white, -14px 0 0 0 #1523f4, -18px 0 0 0 white, -20px 0 0 0 #09ff09, -21px 0 0 0 white, -23px 0 0 0 #bc39cf;
}
.cat1.cat3.cat5 {
box-shadow: -12px 0 0 0 white, -14px 0 0 0 #1523f4, -18px 0 0 0 white, -20px 0 0 0 #09ff09, -24px 0 0 0 white, -26px 0 0 0 #ffbd08;
}
.cat1.cat4.cat5 {
box-shadow: -12px 0 0 0 white, -14px 0 0 0 #1523f4, -21px 0 0 0 white, -23px 0 0 0 #bc39cf, -24px 0 0 0 white, -26px 0 0 0 #ffbd08;
}
.cat2.cat3.cat4 {
box-shadow: -15px 0 0 0 white, -17px 0 0 0 #f4154f, -18px 0 0 0 white, -20px 0 0 0 #09ff09, -21px 0 0 0 white, -23px 0 0 0 #bc39cf;
}
.cat2.cat3.cat5 {
box-shadow: -15px 0 0 0 white, -17px 0 0 0 #f4154f, -18px 0 0 0 white, -20px 0 0 0 #09ff09, -24px 0 0 0 white, -26px 0 0 0 #ffbd08;
}
.cat2.cat4.cat5 {
box-shadow: -15px 0 0 0 white, -17px 0 0 0 #f4154f, -21px 0 0 0 white, -23px 0 0 0 #bc39cf, -24px 0 0 0 white, -26px 0 0 0 #ffbd08;
}
.cat3.cat4.cat5 {
box-shadow: -18px 0 0 0 white, -20px 0 0 0 #09ff09, -21px 0 0 0 white, -23px 0 0 0 #bc39cf, -24px 0 0 0 white, -26px 0 0 0 #ffbd08;
}
.cat1.cat2.cat3.cat4 {
box-shadow: -12px 0 0 0 white, -14px 0 0 0 #1523f4, -15px 0 0 0 white, -17px 0 0 0 #f4154f, -18px 0 0 0 white, -20px 0 0 0 #09ff09, -21px 0 0 0 white, -23px 0 0 0 #bc39cf;
}
.cat1.cat2.cat3.cat5 {
box-shadow: -12px 0 0 0 white, -14px 0 0 0 #1523f4, -15px 0 0 0 white, -17px 0 0 0 #f4154f, -18px 0 0 0 white, -20px 0 0 0 #09ff09, -24px 0 0 0 white, -26px 0 0 0 #ffbd08;
}
.cat1.cat2.cat4.cat5 {
box-shadow: -12px 0 0 0 white, -14px 0 0 0 #1523f4, -15px 0 0 0 white, -17px 0 0 0 #f4154f, -21px 0 0 0 white, -23px 0 0 0 #bc39cf, -24px 0 0 0 white, -26px 0 0 0 #ffbd08;
}
.cat1.cat3.cat4.cat5 {
box-shadow: -12px 0 0 0 white, -14px 0 0 0 #1523f4, -18px 0 0 0 white, -20px 0 0 0 #09ff09, -21px 0 0 0 white, -23px 0 0 0 #bc39cf, -24px 0 0 0 white, -26px 0 0 0 #ffbd08;
}
.cat2.cat3.cat4.cat5 {
box-shadow: -15px 0 0 0 white, -17px 0 0 0 #f4154f, -18px 0 0 0 white, -20px 0 0 0 #09ff09, -21px 0 0 0 white, -23px 0 0 0 #bc39cf, -24px 0 0 0 white, -26px 0 0 0 #ffbd08;
}
.cat1.cat2.cat3.cat4.cat5 {
box-shadow: -12px 0 0 0 white, -14px 0 0 0 #1523f4, -15px 0 0 0 white, -17px 0 0 0 #f4154f, -18px 0 0 0 white, -20px 0 0 0 #09ff09, -21px 0 0 0 white, -23px 0 0 0 #bc39cf, -24px 0 0 0 white, -26px 0 0 0 #ffbd08;
}