html {
    /* background: url(image/background.png) */
    background-color: #fffacd;
}
pre {
    margin-left: 50pt;
    font-size: 11pt;
    font-family: Courier New, Courier, monospace;
}
h1 {
    margin: 10px;
    text-align: center;
    page-break-after: avoid;
    font-size: 20.0pt;
    font-family: "Times New Roman";
}
h2 {
    margin: 10px;
    text-align: center;
    page-break-after: avoid;
    font-size: 18pt;
    font-family: "Times New Roman";
}
.ul {
    text-decoration: underline;
}
.byline {
    text-align: center;
    font-size: 16.0pt;
    font-family: "Times New Roman";
    font-weight: bold;
    margin: 10px;
}
.subtitle {
    margin: 10px;
    text-align: center;
    font-size: 12.0pt;
    font-family: "Times New Roman";
    font-weight: bold;
}
p {
    font-family: "Times New Roman";
    font-size: 12pt;
    text-indent: 36pt;
}
span.t 
{
    font-size: 10pt;
    text-transform:uppercase;
}
.tight {
    text-indent: 0pt;
}
div.signature {
    float: left;
    width: 200px;
    height: 60px;
    background-image: url('../image/Signature.png');
    background-size: 200px 60px;
}
div.rsignature {
    float: right;
    width: 200px;
    height: 60px;
    background-image: url('../image/Signature.png');
    background-size: 200px 60px;
}
div.logo {
    margin-left: auto;
    margin-right: auto;
    width: 1000px;
    height: 300px;
    background-size: 1000px 300px;
    display: block;
    background-image: url(../image/ArticleLogo.png);
}

ol { counter-reset: level1; }
ol > li { list-style: none; }
ol {
    font-family: "Times New Roman";
    font-size: 11pt;
    text-indent: 36pt;
}
ol li:before {
                content: counter(level1,decimal) "\2014";
                counter-increment: level1;
            }
ol.pnum li:before {
                content: "(" counter(level1,decimal) ") ";
                counter-increment: level1;
            }
ul.sols {
    list-style: none;
    font-size: 11pt;
    margin-left: 50px;
}
div.biga,div.bigb,div.bigc,div.bigd,div.bige,div.bigf,div.bigg,div.bigh,
div.bigi,div.bigj,div.bigk,div.bigl,div.bigm,div.bign,div.bigo,div.bigp,
div.bigq,div.bigr,div.bigs,div.bigt,div.bigu,div.bigv,div.bigw,div.bigx,div.bigy,div.bigz {
    clear: both;
    float: left;
    width: 100px;
    height: 100px;
    background-size: 100px 100px;
}
div.biga { background-image: url(../image/A-Letter.png);
}
div.bigb { background-image: url(../image/B-Letter.png);
}
div.bigc { background-image: url(../image/C-Letter.png);
}
div.bigd { background-image: url(../image/D-Letter.png);
}
div.bigf { background-image: url(../image/F-Letter.png);
}
div.bigg { background-image: url(../image/G-Letter.png);
}
div.bigh { background-image: url(../image/H-Letter.png);
}
div.bigi {background-image: url(../image/I-Letter.png);
}
div.bigm {background-image: url(../image/M-Letter.png);
}
div.bigo {background-image: url(../image/O-Letter.png);
}
div.bigr {background-image: url(../image/R-Letter.png);
}
div.bigs {background-image: url(../image/S-Letter.png);
}
div.bigt {background-image: url(../image/T-Letter.png);
}
div.bigw {background-image: url(../image/W-Letter.png);
}
div.pdf {
    float: right;
    width: 141px;
    height: 98px;
    background-size: 141px 98px;
    background-image: url(../image/PDF-Logo.png)
}
div.from {
    font-size: 18pt;
    font-family: "Arial";
}
span.biglet {
    font-size: 36pt;
    font-family: 'Times New Roman', Times, serif;
    float: left;
}
.clear {
    clear: both;
}
img.left {
    float: left;
    height: 125px;
}
img.cent {
    margin-left: auto;
    margin-right: auto;
    display: block;
}
p.scap,
p.s {
    font-size: 11pt;
    text-indent: 0pt;
    margin-left: 60px;
    margin-right: 60px;
}
.scap::first-letter {
    font-size: 14pt;
}
p.sig {
    text-indent: 150px;
}
p.ex {
    text-indent: 0pt;
    margin-left: 60px;
    margin-right: 60px;
}
.fleft {
    float: left;
}
.flright {
    float: right;
}
table.years {
    border: 2px solid gray;
    border-collapse: collapse;
}
table.years th {
    border: 1px solid gray;
    background-color: #007FFF;
}
table.years td {
    border: 1px solid gray;
    padding: 5px;
    vertical-align: top;
}
table.years ul {
    list-style: none;
    margin-left: 0px;
    text-indent: 0px;
    padding-left: 0px;
}
table.sp td
{
    padding-left: 10px;
    padding-right: 20px;
}
table.freq {
    border: none;
    font-family: Courier New, Courier, monospace;
    font-size: 14pt;
    margin-left: 50pt;
}
table.freq td.rnum {
    text-align: right;
}
table.freq img {
    margin-right: 5px;
}
table.vig td {
    padding: 4px;
}
table.vig thead th {
    padding-bottom: 20px;
}
table.vig tbody th 
{
    padding-right: 20px;
}
table.strips.wider td, 
table.keys.wider td 
{
    padding-left:20px;
    padding-right:20px;
}
table.boxkey {
    border-collapse: collapse;
    border: 2px solid black;
    font-size: 14pt;
    font-family: Courier New, Courier, monospace;
    width: 300px;
}
table.boxkey td {
    border: 1px solid grey;
    text-align: center;
    width: 15%;
}
table.boxkey th {
    border: 2px solid black;
    width: 15%;
}
th.side {
    -moz-transform: rotate(-90.0deg); /* FF3.5+ */
    -o-transform: rotate(-90.0deg);   /* Opera 10.5 */
    -webkit-transform: rotate(-90.0deg);  /* Saf3.1+, Chrome */
    filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=0.083);    /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";   /* IE8 */    
    white-space: nowrap;
    max-width: 20px;
}
.flip {

/* Safari */
-webkit-transform: rotate(180deg);

/* Firefox */
-moz-transform: rotate(180deg);

/* IE */
-ms-transform: rotate(180deg);

/* Opera */
-o-transform: rotate(180deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);

}
table.keys {
    margin-left: auto;
    margin-right: auto;
}
table.keys td {
    text-align: right;
    font-family: Courier New, Courier, monospace;
    padding-right: 5px;
    font-size: 11pt;
}
table.dfreq {
    border-collapse: collapse;
    border: 2px solid black;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
}
table.dfreq thead th {
    border: 2px solid black;
}
table.dfreq tbody td:nth-child(odd) {
    font-family: Courier New, Courier, monospace;
    border-left: 2px solid black;
    text-align: left;
    font-size: 11pt;
    padding-left: 10px;
}
table.dfreq tbody td:nth-child(even) {
    font-family: Courier New, Courier, monospace;
    border-right: 2px solid black;
    text-align: right;
    font-size: 11pt;
    padding-right: 10px;
    padding-left: 10px;
}
table.boxed {
    margin-left: auto;
    margin-right: auto;
    text-align: right;
    font-family: Courier New, Courier, monospace;
    padding-right: 5px;
    font-size: 12pt;
    font-style: italic;
    border-collapse: collapse;
    text-align: center;
}
table.boxed tbody td {
    border: 2px solid black;
}
table.boxed table td {
    border: none;
    font-weight: bold;
    font-style: italic;
    padding: 5px;
}
table.defs {
    margin-left: auto;
    margin-right: auto;
}
table.defs th {
    text-align: left;
}
table.defs td {
    text-align: left;
    font-style: italic;
}
td.wide {
    width: 100px;
 }
td.c {
    text-align: center;
}
td.t {
    border-top: 1px solid black;
}
td.b {
    border-bottom: 1px solid black;
}
td.l {
    border-left: 1px solid black;
}
td.r {
    border-right: 1px solid black;
}
table.tight {
    border-collapse: collapse;
}
p.fix {
    color: green;
    font-family: Arial;
}
pre .fix {
    color: green;
    font-weight: bold;
}
table.grille {
    border-collapse: collapse;
    border: 2px solid black;
    margin-left: auto;
    margin-right: auto;
}
table.lines td {
    border: 1px solid black;
}
table.grille td.top {
    vertical-align: top;
    font-size: 8pt;
}
table.grille td {
    width: 30px;
    height: 30px;
    max-height: 30px;
    max-width: 30px;
    text-align: center;
    vertical-align: middle;
    font-size: 16pt;
}
table.grille.box td 
{
    border:1px solid black;
}
table.strips {
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
}
table.strips td.top {
    border-top: 1px solid black;
}
table.strips td.n {
    text-align: right;
    padding-right: 4px;
}
table.strips td {
    font-family: Courier New, Courier, monospace;
    text-align: center;
    border-left: 1px solid black;
    border-right: 1px solid black;
    width: 24px;
}
table.strips th.r {
    border-right: 1px solid black;
    padding-right: 0px;
}
table.strips th {
    padding-right: 10px;
}
table.strips td.bottom {
    border-bottom: 1px solid black;
}
table.boxes, table.clean {
    border-collapse: collapse;
    margin-left: auto;
    margin-right: auto;
}
table.boxes td, table.boxes th {
    font-family: Courier New, Courier, monospace;
    text-align: center;
    border: 1px solid black;
    width: 30px;
}
table.tiny {
    display:inline;
    padding-left:1px;
    padding-right:1px;
    text-indent: 0px;
    margin-left:1px;
    margin-right:1px;
}
table.tiny td {
    font-size: 5pt;
    text-align: center;
} 
table.clean td 
{
    font-family: Courier New, Courier, monospace;
    text-align: center;
    padding-left:10px;
    padding-right:10px;
}
table.clean td.t {
    border-top: 1px solid black;
}
table.clean td.b {
    border-bottom: 1px solid black;
}
table.clean td.l {
    border-left: 1px solid black;
}
table.clean td.r {
    border-right: 1px solid black;
}
.slash {
    display: inline-block;
    position:relative;
}
.slash::before 
{
    content: '/';
    display:inline-block;
    /* position the slash on the character */
    position: absolute;
    bottom: 0;
    left: 0;

    /* center the dot horizontally */
    text-align: center;
    width: 100%;
}
.udot {
    display: inline-block;
    position: relative;
}
.udot::before {
    content: '.';
    display: inline-block;

    /* position the dot underneath the character */
    position: absolute;
    bottom: -0.3em;
    left: 0;

    /* center the dot horizontally */
    text-align: center;
    width: 100%;

    /* ... (style the dot to your liking) */
}