*         { box-sizing: border-box; }

body      { background-color: #000000;
            margin: 5% 15%; }
.idx      { margin: 10px; }
h1        { color: #575245;
            font: italic 1.6em monospace;
            text-align: center; }
h2,h3,h4,h5,h6
          { color: #575245;
            font: 1.4em monospace; }
p         { font: 1.2em serif; 
            color: #575245; }
.idx p    { font: 1.2em monospace; }
.down     { clear: both; }
div       { border-style: none; 
            width: 100%; 
            padding: 1em; }
.mid      { text-align: center; }
.sec      { margin-top: 50px; }
.button   { float: left; 
            border-style: none; 
            padding: 0em 1em 0em 0em; }
a:link    { color: #575245; }
a:visited { color: #42423c; }
a:active  { color: #92622d; }

/* navigation bar */
.hdr ul   { list-style-type: none;                       /* the menu */
            margin: 0; 
            padding: 0; 
            min-height: 40px; }
.hdr li   { float: left;                                 /* menu items */ 
            color: white; 
            padding: 10px;
            font: 1.2em monospace; 
            background-color: #111111; }                 /* dark grey */
.btn, li a                                               /* .btn for non-links */
          { display: inline-block;
            color: #575245; 
            text-decoration: none; }
li a:hover, .drop:hover, .btn:hover                      /* mouse over menus */
          { background-color: #331a00; }                 /* brown */
.drop     { position: relative;                          /* drop-down within menu */
            display: inline-block; 
            cursor: pointer; }
.drcn     { display: none;                               /* = drop-down content */
            position: absolute;
            z-index: 1;
            background-color: #999999;
            min-width: 250px;
            margin-top: 5px;
            margin-left: -10px; }
.drcn a   { color: black;                              /* links within drcn */
            display: block;
            padding: 10px; }
.drcn a:hover                                            /* mouse over drcn */
          { background-color: #331a00;
            color: white; }
.drop:hover .drcn                                        /* make it visible */
          { display: block; }

/* columns */
.left, .right
              { clear: both;
                width: 100%;                             /* no columns on phones */
 }
img           { max-width: 100%; }

@media only screen and (min-width: 768px) 
{   
    .left     { width: 35%; 
                text-align: center; }
    .right    { width: 65%; }
    .left, .right
              { float: left;
                padding-left: 10px;
                clear: none; }
    .row::after                                          /* stop stuff overlapping */
              { content: "";
                clear: both;
                display: table; }
    .sm       { display: none; }                         /* show only on small screens */
}