/* Global styles shared by all PHP pages (replaces default.css + per-page inline styles) */

/* Base */

body {
    background-color: #FFF;
    background-image: url("/share/background.gif");
    background-repeat: repeat-x;
    background-position: right top;
    margin: 0;
    padding: 0;
}

a:active {  font-family: Arial, Verdana; font-size: 13px; color: #333333}
a:hover {  font-family: Arial, Verdana; font-size: 13px;  color: #FF0000}
a:link {  font-family: Arial, Verdana; font-size: 13px; color: #333333}
a:visited {  font-family: Arial, Verdana; font-size: 13px; color: #333333}

A.portfolio:link {TEXT-DECORATION: none; COLOR: #ffffff; FONT-SIZE: 13px}
A.portfolio:visited {TEXT-DECORATION: none; COLOR: #ffffff; FONT-SIZE: 13px}
A.portfolio:active {TEXT-DECORATION: none; COLOR: #ffffff; FONT-SIZE: 13px}
A.portfolio:hover {TEXT-DECORATION: none; COLOR: #ffffff; FONT-SIZE: 13px}

.title {  font-family: Arial, Verdana; font-size: 16px; font-weight: bold; color: #333333}
TD {font-family: Arial, Verdana; font-size: 13px; color: #333333}
H1 {  font-family: Arial, Verdana; font-size: 16px; font-weight: bold; color: #333333}

/* Header: logo bar + navigation bar */

.logo-bar {
    background-color: #000000;
    text-align: right;
    vertical-align: top;
}

.logo-bar img {
    border: 0;
}

.nav-bar {
    background-color: #666666;
    background-image: url("/share/fibreglass.png");
}

.header-gap {
    height: 1px;
    background-color: #FFFFFF;
}

/* Layout: grey band to the left of the 1200px page column */

.page-band {
    background-image: url("/share/background.png");
    background-repeat: repeat-x;
    background-position: right top;
}

.page-band-front {
    /*width: 50%;*/
}

/* Superfish menu overrides */

.sf-menu{
	height: 25px;
}

.sf-menu li, .sf-menu ul li, .sf-menu ul ul li{
	background: rgba(102, 102, 102, .96);
}

.sf-menu li:hover{
	background: rgba(120, 120, 120, .96);
}

.sf-menu a{
	color: #fff;
	border-left: none;
	border-top: none;
	font-size: 14px;

}

/* Footer */

.footer {
    color: #777777;
    border-top: 1px solid #cccccc;
    padding-top: 8px;
    font-weight: normal;
}

.footer a,
.footer a:visited {
    color: #777777;
    font-weight: normal;
}

.footer a:hover {
    color: #555555;
}

a.footerlink,
a.footerlink:visited {
    color: #777777;
    font-weight: normal;
}

a.footerlink:hover {
    color: #555555;
}

.bottom-bar-line {
    background-color: #000000;
}

.bottom-bar {
    background-color: #666666;
}

/* Mobile menu: hamburger button + slide-in panel (hidden on desktop) */

.menu-toggle,
.mobile-nav,
.mobile-nav-overlay {
    display: none;
}

/* Responsive layout */

/* Narrower than the 1200px page: let the page column shrink instead of scrolling sideways */
@media (max-width: 1199px) {
    .header-table,
    .layout-page,
    .layout-inner {
        width: 100% !important;
    }

    .page-band,
    .layout-right {
        display: none;
    }

    .nav-bar {
        background-position: right top;
    }

    .layout-main {
        width: 100%;
    }

    .layout-main table {
        width: 100% !important;
        max-width: 100%;
    }

    .layout-main td {
        width: auto !important;
    }

    .layout-main img,
    .layout-main iframe {
        max-width: 100%;
    }

    .layout-main img:not([src*="space"]) {
        height: auto;
    }
}

/* Mobile: hamburger menu, no sidebar, content stacked in a single column */
@media (max-width: 900px) {
    .layout-sidebar,
    .layout-gutter,
    .content-top-spacer {
        display: none;
    }

    .layout-main {
        padding: 20px 15px 0;
    }

    .content-table,
    .content-table > tbody,
    .content-table > tbody > tr,
    .content-table > tbody > tr > td {
        display: block;
    }

    .content-table > tbody > tr > td img[src*="space.gif"] {
        display: none;
    }

    .layout-main iframe {
        width: 100%;
        height: auto;
        aspect-ratio: 640 / 426;
    }

    .logo-bar img {
        max-width: 60%;
        height: auto;
    }

    /* Hamburger button in the navigation bar */

    .nav-bar .sf-menu {
        display: none;
    }

    .menu-toggle {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 15px;
        border: 0;
        background: none;
        color: #fff;
        font-family: Arial, Verdana;
        font-size: 16px;
        cursor: pointer;
    }

    .menu-toggle-bars {
        display: block;
        width: 22px;
        height: 2px;
        margin: 7px 0;
        background: #fff;
        box-shadow: 0 -7px 0 #fff, 0 7px 0 #fff;
    }

    /* Slide-in panel */

    .mobile-nav {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1000;
        width: 85%;
        max-width: 320px;
        overflow-y: auto;
        padding: 50px 0 30px;
        box-sizing: border-box;
        background: #000;
        font-family: Arial, Verdana;
        text-align: left;
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform .25s ease, visibility 0s linear .25s;
    }

    .mobile-nav-open .mobile-nav {
        transform: none;
        visibility: visible;
        transition: transform .25s ease;
    }

    .mobile-nav-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 999;
        background: rgba(0, 0, 0, .5);
    }

    .mobile-nav-overlay[hidden] {
        display: none;
    }

    .mobile-nav-open body {
        overflow: hidden;
    }

    .mobile-nav-close {
        position: absolute;
        top: 5px;
        right: 5px;
        width: 44px;
        height: 44px;
        border: 0;
        background: none;
        color: #fff;
        font-size: 30px;
        line-height: 1;
        cursor: pointer;
    }

    .mobile-nav-list,
    .mobile-nav-list ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .mobile-nav-list li {
        position: relative;
        border-top: 1px solid #444;
    }

    .mobile-nav a,
    .mobile-nav a:link,
    .mobile-nav a:visited,
    .mobile-nav a:active {
        display: block;
        padding: 12px 20px;
        color: #fff;
        font-size: 16px;
        text-decoration: none;
    }

    .mobile-nav a:hover {
        color: #fff;
        background: #444;
        font-size: 16px;
    }

    .mobile-nav-list ul {
        display: none;
        background: #222;
    }

    .mobile-nav-list ul a,
    .mobile-nav-list ul a:link,
    .mobile-nav-list ul a:visited {
        padding-left: 35px;
        font-size: 15px;
    }

    .mobile-nav-list ul ul a,
    .mobile-nav-list ul ul a:link,
    .mobile-nav-list ul ul a:visited {
        padding-left: 50px;
    }

    .mobile-nav-list li.is-expanded > ul {
        display: block;
    }

    .mobile-nav-list li.has-submenu > a {
        padding-right: 56px;
    }

    .mobile-nav-expand {
        position: absolute;
        top: 0;
        right: 0;
        width: 48px;
        height: 44px;
        border: 0;
        border-left: 1px solid #444;
        background: none;
        color: #fff;
        font-size: 22px;
        cursor: pointer;
    }

    .mobile-nav-expand::before {
        content: "+";
    }

    .is-expanded > .mobile-nav-expand::before {
        content: "\2212";
    }

    .mobile-nav-heading {
        margin: 25px 0 5px;
        padding: 0 20px;
        color: #aaa;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: .05em;
    }
}