p     {line-height:1.3em}
img.ic  {position:absolute;right:0;top:20px;width:64px}  /* web links icon */

.gi a {display:inline-block;margin:2px 0}
.gl > a {display:block;clear:both;margin:10px 0 2px}
.gi a,
.gl > a {padding:2px 0;width:calc(100% / 26);text-align:center;font-size:1.1em}
.gi a.nl {color:#C0C0C0;cursor:default}
.gi a.nl:hover {background-color:RGBA(0,0,0,0)}

.gl p {clear:both;margin:0 0 12px 20%;font-size:.9em}
.gl p.bm {position:relative;margin:0}
.gl p.bm span {position:absolute;top:-20px;margin:0;box-shadow:none;-webkit-box-shadow:none;-moz-box-shadow:none;z-index:-1}  /* so the bookmarks are 20px from the top of the page */
.gl p.le {margin:24px 0 2px;font-size:1.1em;border-top:1px solid RGBA(0,0,0,.1)}
/*  p.li > span:first-child = first <span> that is a direct descendant (child) of a <p class="li">  https://www.w3schools.com/css/css_combinators.asp */
.gl p.li > span:first-child {float:left;margin:0 10px 0 -25%;padding:1px 2px;text-align:center;font-weight:bold;outline:none;bor_der:1px solid RGBA(0,0,0,.1);border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;box-shadow:1px 1px 3px RGBA(0,0,0,0.4);-webkit-box-shadow:1px 1px 3px RGBA(0,0,0,0.4);-moz-box-shadow:1px 1px 3px RGBA(0,0,0,0.4)}
.gl p.li > span:first-child img,  /* title img */
.gl p a img {position:relative;float:left;top:1px;padding-right:4px;width:16px}  /* img in the text */
.gl p a {white-space:nowrap}
.gl span.AF,  /* Afinity, Southfields & Willenhall inline logos */
.gl span.SF,
.gl span.WP {position:relative;display:inline-block;margin:0 0 0 6px;padding:0;width:16px}
.gl span.AF::after,
.gl span.SF::after,
.gl span.WP::after {position:absolute;bottom:-3px;left:0px;display:inline-block;content:"";width:16px;height:16px;background-size:16px 16px}
.gl span.AF::after {background-image:url('./imgs/icons/Affinity.png')}
.gl span.SF::after {background-image:url('./imgs/icons/Southfields.png')}
.gl span.WP::after {background-image:url('./imgs/icons/Willenhall.png')}

label {cursor:auto}
p.tg {position:relative}
p.tg img {position:relative;top:2px;width:16px}
p.tg .bx1,  /* box contents */
p.tg .bx2,
p.tg .bx3,
p.tg .bx4,
p.tg .bx5,
p.tg .bx6,
p.tg .bx7,
p.tg .bx8,
p.tg .bx9,
#tg1,       /* check box toggle */
#tg2,
#tg3,
#tg4,
#tg5,
#tg6,
#tg7,
#tg8,
#tg9 {display:none}
#tg1:checked ~ .bg1,  /* box background when checked*/
#tg2:checked ~ .bg2,
#tg3:checked ~ .bg3,
#tg4:checked ~ .bg4,
#tg5:checked ~ .bg5,
#tg6:checked ~ .bg6,
#tg7:checked ~ .bg7,
#tg8:checked ~ .bg8,
#tg9:checked ~ .bg9 {position:fixed;display:block;left:0;top:0;width:100vw;height:100vh;background-color:rgba(0,0,0,0);z-index:9;cursor:auto}
#tg1:checked ~ .bx1,  /* box when checked */
#tg2:checked ~ .bx2,
#tg3:checked ~ .bx3,
#tg4:checked ~ .bx4,
#tg5:checked ~ .bx5,
#tg6:checked ~ .bx6,
#tg7:checked ~ .bx7,
#tg8:checked ~ .bx8,
#tg9:checked ~ .bx9 {position:absolute;display:block;padding:4px;top:-1px;right:0;line-height:.85em;font-weight:normal;background-color:#DEDEDE;width:auto;height:auto;z-index:999;pointer-events:auto;border-radius:3px}
#tg4:checked ~ .bx4,
#tg5:checked ~ .bx5,
#tg6:checked ~ .bx6,
#tg7:checked ~ .bx7 {background-color:#F0F0F0}

/* screens <= 720px */
@media only screen AND (max-width:720px){
  .gi a,
  .gl > a {width:calc(100% / 13);text-align:left;text-indent:4px}
}