*         { box-sizing: border-box; }

body      { background-color: #efebe2; }

@media only screen and (min-width: 768px) 
{
    body      { background-image: url(TLWHbg.jpg);
                background-repeat: repeat-y;
                margin-left: 155px; }
}

h1        { color: #993300;
            font: 1.8em sans-serif; }
h2,h3,h4,h5,h6
          { color: #993300;
            font: 1.4em sans-serif; }
p, ul     { font: 1.1em sans-serif;
            color: #cc9966; }
p         { line-height: 1.5; }
.mid      { text-align: center; }
.main     { border-style: none;
            padding: 2em; }
.hlt      { color: #993300;
            font-weight: 600; }
.note     { font: 0.9em sans-serif; }
.title    { font: 1.2em sans-serif;
            color: #993300;
            letter-spacing: 2px; }
.sec      { margin-top: 50px; }
hr        { border: thin ridge #e8c09d;
            width: 75%;
            margin-top: 50px;
            margin-bottom: 50px; }
img       { max-width: 100%; 
            height: auto;
            border: none; 
            vertical-align: text-top; }
a:link    { color: #cc9966; }
a:visited { color: #cc9966; }
a:active  { color: #cc9966; }


.hide     { color: #efebe2; }
.new      { color: #990000; }
.future   { color: #999999; }
.inner    { border: thin ridge; padding: 2em; }

td        { font: 0.8em sans-serif;
            color: #cc9966;
            padding: 0.8em; }
caption   { font: 1em sans-serif; color: #cc9966; }

/* containers for reminder page sections and timeline spoiler space */
.remind   { padding-top: 20px;
            margin-top: 20px;
            margin-bottom: 1000px; }

/* navigation bar */
.hdr ul   { list-style-type: none;                       /* the menu */
            margin: 0; 
            padding: 0; 
            min-height: 40px; }
.hdr li   { float: left;                                 /* menu items */ 
            color: #cc9966; 
            padding: 10px;
            background-color: #f2ddca; }                 /* beige */
.btn, li a                                               /* .btn for non-links */
          { display: inline-block;
            color: #cc9966; 
            text-decoration: none; }
li a:hover, .drop:hover, .btn:hover                      /* mouse over menus */
          { background-color: #993300; }                 /* 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: #f2ddca;
            min-width: 250px;
            margin-top: 5px;
            margin-left: -10px; }
.drcn a   { color: #cc9966;                              /* links within drcn */
            display: block;
            padding: 10px; }
.drcn a:hover                                            /* mouse over drcn */
          { background-color: #993300;
            color: white; }
.drop:hover .drcn                                        /* make it visible */
          { display: block; }

/* link buttons */
.lnk      { text-decoration: none;
            background-color: #f2ddca; 
            border: medium solid #cc9966;
            border-radius: 10px;
            padding: 1px 12px; }
.lnk:hover 
          { background-color: #993300;
            color: white;
            border: medium solid #cc9966; }
.sp       { display: inline-block;
            padding: 0 5px; }
.clr      { clear: both;
            margin: -5px 0; }