body {
    font:15px/21px "Helvetica";
}

*.announcement {
  background:#cccccc;
  padding:.1px;
  margin:5px;
}

*.answer {
  color:blue;
}

h1 {
    font-size: 1.5em;
    font-weight: bold;
}
h2 {
    margin-top: 25px;
    font-size: 1.2em;    
}
h3 {
    font-size: 1em;
    margin: 12px 0 3px;
}

td {
  padding: 0 10px 0 10px;
  vertical-align: top;
}

ol.table-of-contents {
    list-style: upper-roman;
    padding-inline-start: 20px;
    text-indent: 0;
}
ol.table-of-contents li {
    margin: 0 0 4px 0;
}
.contents-sublist {
    list-style: lower-alpha;
}


div.image {
    width: 600px;
    margin: 0 auto;
    text-align: center;
}
img {
    width: 600px;
    border: solid 1px #000;
}


liXXXXX {
    margin-bottom: 20px;
}
.dense li, .dense li p {
    margin-bottom: 0px;
}

code, pre {
    background-color: #ccf;
}

code { padding: 1px 5px; }
pre { padding: 15px; }

code.cli, pre.cli {
    background-color: #000;
    color: #fff;
}
pre.cli {
    border-radius: 5px;
    border-top: solid 5px #999;
}
pre.code-page {
    background-color: #fff;
    font: 13px/17px monospace;
}
code.css, pre.css, span.css {
    background-color: #cfc;
    border-radius: 10px;
}
/* jagged border thanks to this: https://medium.com/coding-design/saw-tooth-banners-with-css-95c31e91c196 */
pre.snippet {
     background-image:
        /* Top jagged */
        linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%),
        linear-gradient(-135deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%),
        /* Bottom jagged */
        linear-gradient(45deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%),
        linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%),
        /* Top and bottom fade  */
        linear-gradient(to bottom, rgba(204,204,255,0.5) 0%, rgba(204,204,255,0.5) 100%),
        linear-gradient(to top, rgba(204,204,255,0.5) 0%, rgba(204,204,255,0.5) 100%);
    background-position:
        /* Top jagged */
        top center, top center,
        /* Bottom jagged */
        bottom center, bottom center,
        /* Top fade */
        top center,
        /* Bottom fade */
        bottom center;
    background-size:
        /* Top + bottom jagged */
        0.75rem 0.75rem, 0.75rem 0.75rem, 0.75rem 0.75rem, 0.75rem 0.75rem,
        /* Top + bottom fade */
        100% 1rem, 100% 1rem;
    background-repeat: repeat-x;
}
pre.css-snippet {
     background-image:
        /* Top jagged */
        linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%),
        linear-gradient(-135deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%),
        /* Bottom jagged */
        linear-gradient(45deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%),
        linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%),
        /* Top and bottom fade  */
        linear-gradient(to bottom, rgba(255,204,204,0.5) 0%, rgba(255,204,204,0.5) 100%),
        linear-gradient(to top, rgba(255,204,204,0.5) 0%, rgba(255,204,204,0.5) 100%);
    background-position:
        /* Top jagged */
        top center, top center,
        /* Bottom jagged */
        bottom center, bottom center,
        /* Top fade */
        top center,
        /* Bottom fade */
        bottom center;
    background-size:
        /* Top + bottom jagged */
        0.75rem 0.75rem, 0.75rem 0.75rem, 0.75rem 0.75rem, 0.75rem 0.75rem,
        /* Top + bottom fade */
        100% 1rem, 100% 1rem;
    background-repeat: repeat-x;
}

.main-image {
    width: 100%; text-align: center;
    margin: 12px 0;
}

.figure {
    margin-bottom: -16px;
    font-style: oblique;
    font-size: .9em;
}

blockquote {
    border-left: solid 5px #DDD;
    padding-left: 12px;
}

em, i {
    font-family: serif;
    font-size: 1.1em;
}

.wait {
    background-image: url(../images/peace.png);
    background-repeat: no-repeat;
    background-size: 30px 30px;
    padding-left: 25px;
    border: solid 1px #ccf;
    background-position: 6px 14px;
    margin: 0 0 15px;
    padding: 0 36px 5px;
    text-align: justify;
    border-radius: 7px;
}


.new-changed {
    margin-top: 8px;
    text-align:right;
}
.new {
    color: #33f;
    border-bottom: 3px dotted;
    padding-bottom: 0px;
}
.changed {
    color: #f50;
    border-bottom: 1px dashed;
}
.highlight {
    background-color: #ff6;
}
.pseudocode {
    background-color: #bbb;
    border: 3px #000;
    border-style: none double;
}

.answer {
    color: #fff; background-color: #fff;
}
.answer::-moz-selection { /* Code for Firefox */ 
    color: #000; 
    background-color: #ccf;
}
.answer::selection {
    color: #000;
    background-color: #ccf;
}

.please-note {
    background-color: yellow;
    display: inline-block;
    font-weight: bold;
    padding: 5px 10px;
    margin: 0 5px;
    border-radius: 10px;
    
    animation-name: please-note-rotate;
    animation-duration: 1.5s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes please-note-rotate {
  0%   {transform: rotate(10deg);}
  10%  {transform: rotate(-10deg);}
  20%  {transform: rotate(10deg);}
  30%  {transform: rotate(0);}
}













pre.code {
    white-space: pre-wrap;
}
pre.code:before {
    counter-reset: listing;
    display: inline-block;
}
pre.code code {
    counter-increment: listing;
    padding-left: 10px;
}
pre.code code:before {
    content: counter(listing);
    width: 8em;         /* doesn't work */
    margin-left: -45px;
    margin-right: 25px;
    text-align: right;  /* doesn't work */
    font-weight: lighter;
    color: #aaa;
    font-size: .8em;
}