/* ============================================================
   World Of The Strange — style.css
   Consolidates default.css + custom.css; adds responsive layout
   ============================================================ */

/* --- Reset / Base ------------------------------------------ */
*, *::before, *::after {
    box-sizing: border-box;
}

body, table, tr, th {
    font-size: 15px;
    line-height: 1.65;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #FFFFFF;
    background-image: url('../images/SiteBackground.gif');
    margin: 0;
    padding: 0;
}

hr {
    color: #69fc7d;
    border-color: #69fc7d;
}

/* --- Site Container ---------------------------------------- */
.site-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Header ----------------------------------------------- */
.site-header {
    text-align: center;
    padding: 10px 0 0;
}

.site-header img {
    max-width: 100%;
    height: auto;
}

/* --- Navigation ------------------------------------------- */
.site-nav {
    padding: 4px 0 8px;
}

/* --- Content ---------------------------------------------- */
#idcontent {
    padding: 10px 15px 5px 10px;
}

#innerdiv {
    padding: 10px 5px 5px 10px;
}

/* --- Footer ----------------------------------------------- */
.site-footer {
    margin-top: 20px;
}

.site-footer img {
    max-width: 100%;
    height: auto;
}

/* --- Typography ------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    color: #FFFFFF;
}

h1 { text-align: center; }

/* --- Links ------------------------------------------------ */
a                       { color: #63f883; text-decoration: none; }
a:visited               { color: #63ee63; }
a:hover                 { color: #E4641C; text-decoration: underline; }

a.weblink               { color: #63f883; text-decoration: underline; }
a.weblink:visited       { color: #63ee63; }
a.weblink:hover         { color: #E4641C; }

a.popuplink             { color: #FF0000; text-decoration: none; }
a.popuplink:visited     { color: #FF0000; }
a.popuplink:hover       { color: #FF0000; text-decoration: underline; }

a.filelink              { color: #04BC14; text-decoration: none; }
a.filelink:visited      { color: #04BC14; }
a.filelink:hover        { color: #04BC14; text-decoration: underline; }

a.inline-toggle {
    color: Green;
    text-decoration: none;
    font-weight: bold;
    font-family: "Times New Roman", serif;
}
a.inline-toggle:visited { color: Green; }
a.inline-toggle:hover   { text-decoration: underline; }

/* --- Utility ---------------------------------------------- */
.center   { margin-left: auto; margin-right: auto; }
.centered { text-align: center; }
.imgrc    { max-width: 100%; height: auto; display: block; margin-left: auto; margin-right: auto; }

/* --- Paragraph styles ------------------------------------- */
p {
    text-align: left;
    text-indent: 0;
    padding: 0;
    margin: 0 0 0.65em;
}

.p_CenterDiv    { text-align: center; }
.p_CodeExample  { white-space: nowrap; }
.p_ImageCaption { text-align: center; }
.p_More         { margin: 0 0 0 24px; }
.p_ParaJust     { text-align: justify; }
.p_PJHanging    { text-align: justify; text-indent: -48px; margin: 0 0 0 48px; }

/* --- Span styles ------------------------------------------ */
span.f_CenterDiv    { font-size: 16pt; color: #003300; letter-spacing: 5px; }
span.f_CodeExample  { font-size: 8pt; font-family: 'Courier New'; }
span.f_CourierFixed { font-size: 9pt; font-family: 'Courier New'; }
span.f_Define       { font-size: 12pt; font-weight: bold; }
span.f_Heading      { font-size: 14pt; font-weight: bold; color: #008000; text-decoration: underline; }
span.f_Heading1     { font-size: 14pt; font-weight: bold; color: #ffffff; }
span.f_ImageCaption { font-size: 8pt; font-weight: bold; }
span.f_More         { font-family: 'Arial Black'; font-weight: bold; }
span.f_ParaJust     { font-size: 12pt; }
span.f_PJHanging    { font-size: 12pt; }

/* --- Component classes ------------------------------------ */
.fsmall {
    font-size: 10px;
    font-family: Verdana, Helvetica, sans-serif;
    text-align: center;
    margin: 10px 0 0;
}

.crumbs             { font-size: 8pt; margin-bottom: 3px; margin-top: 0; color: #FFFFFF; }
.crumbs a           { text-decoration: underline; color: #FFFFFF; }
.crumbs a:visited   { text-decoration: underline; color: #FFFFFF; }
.crumbs a:hover     { color: #F4BC5C; }

.expander {
    text-align: right;
    padding: 0;
    width: 100%;
    font-family: Verdana, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: bold;
    border-bottom: 2px solid grey;
    margin-bottom: 1px;
}

.topichead { padding: 5px; }

.navlinks           { font-size: 10pt; }
.navlinks a         { text-decoration: none; color: blue; }
.navlinks a:visited { text-decoration: none; color: blue; }
.navlinks a:hover   { text-decoration: underline; color: blue; }

/* --- Scroll lock (used by popups/overlays) ---------------- */
html.nonscroll  { overflow: hidden; }
body.nonscroll  { overflow: hidden; height: 100%; }
div.nonscroll   { overflow: auto; }

/* --- Responsive ------------------------------------------- */
@media (max-width: 768px) {
    .site-wrapper {
        padding: 0 12px;
    }

    body, table, tr, th {
        font-size: 14px;
    }

    #idcontent {
        padding: 8px 10px 5px 8px;
    }
}

@media (max-width: 480px) {
    body, table, tr, th {
        font-size: 13px;
    }

    .site-nav {
        line-height: 2;
    }
}