Improve change mark in guidelines and rules

Rather than have a literal vertical bar (|) for lines that indicate a
change from the last contest, it is now a CSS class which has a solid
black left border of 4 pixels. This not only makes it easier to see but
it fixes some formatting issues too (see below for tests).

This means that if a change mark is needed one can do:

    <p class="leftbar">
    ...
    </p>

A tip for vim users: in the .vimrc file add the following line
(temporarily or otherwise):

    abbr leftbar <p class="leftbar">

Then you only need to type:

    leftbar

and it will automatically add the proper block.

As for testing how this looks I have checked it with Safari with:

- an iPhone 14 Pro Max
- an iPhone 8 Plus
- a MacBook Pro 16 inch (both at full width and smallest width)
- an iPad Pro 11 inch 4th generation in both portrait and landscape
orientations

An important point that one needs to remember when using this CSS class
in lists is that one cannot do:

    <p class="leftbar">
    * foo
    </p>
    <p class="leftbar">
    * bar
    </p>

but rather do:

    * <p class="leftbar">foo</p>
    * <p class="leftbar">bar</p>

ioccc.css

@@ -796,6 +796,13 @@ blockquote {
     color: DarkBlue;
 }
 
+/* Guidelines / Rules change bar ============================================================================ */
+
+.leftbar {
+    border-left: 4px solid black;
+}
+
+
 /* Footer  ======================================================================================== */
 
 /* Style footer */