@charset "utf-8";
/* CSS Document */
/* Authentic stylesheet recovered from Wayback snapshot 20180104061756.
   Only changes: Wayback URL prefixes rewritten to relative paths, and
   the archive's appended trailer comments removed. */

body {
	margin:0; 
	padding:0; 
	font-family:Arial, Helvetica, sans-serif;
	color:#474b4d;
}
#mainFrame {
	width:942px; 
	height:100%; 
	padding:0; 
	margin:0 auto; 
	float:left;
}
.wrapper {
	width: 942px; 
	margin:auto;
}
.clear {
	clear:both;
}
#logoHolder {
	width:942px;
	text-align:left;
	float:left;
}
.ContentBoxL {
	/* width:445px; */
	width: 750px;
	height:100%;
	text-align:left;
	font-size:12px;
	font-family:Arial, Verdana, Geneva, sans-serif;
	padding-left:42px;
	float:left;
}
.ContentBoxL a, .inner-content a {
	text-decoration:none; 
	color:#0c7b5a;
}
.ContentBoxL a:hover, .inner-content a:hover {
	text-decoration:underline;
	color:#000;
}
.ContentBoxR {
	width:212px;
	height:240px;
	padding-top:180px;
	padding-left:25px;
	text-align:left;
	color:#FFF;
	background-image:url('../images/rtBanner.jpg');
	background-repeat:no-repeat;
	margin: 40px 0px 0px 10px;
	float:right;
}
.ContentBoxR a {
	text-decoration:none; 
	color:#FFF;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	line-height:25px;
}
.ContentBoxR a:hover {
	text-decoration:underline;
	color:#FFF;
}
#footer {
	width:800px;
	height:90px;
	text-align:center;
	font-size:12px;
	color:#666;
	margin-left: 18px;
}
#footer-inner {
	width:800px;
	height:90px;
	text-align:center;
	font-size:12px;
	color:#666;
	/* margin-top: 350px; */
	margin-left: 18px;
}

#footer a, #footer-inner a {
	padding-right:27px;
	text-decoration:none;
	color:#333;
	font-size:14px;
}
#footer a:hover, #footer-inner a:hover {
	text-decoration:underline;
}
.ContentTitle {
	width:100%;
	text-align:left;
	font-size:18px;
	font-weight:bold;
}
.Content {
	width:100%;
	text-align:left;
	font-size:13px;
}
blockquote {
	width:100%;
	height:180px;
	border-top: 2px solid #cccccc;
	border-bottom: 2px solid #cccccc;
	padding: 20px 0 20px 0;
	margin-left:35px;
	text-align:left;
	font-size:12px;
	margin-left: -1px;
}
.inner-content {
	width: 642px;
	/* height: 520px; */
	top: 215px;
	left: 39px;
	padding: 35px 55px;
	position: absolute;
	background-color: #FFF;
	
}

/* ==============================================================
   RESPONSIVE LAYER — added 2026, not part of the original site.

   Everything above this line is the recovered 2018 stylesheet and is
   untouched. Nothing below changes rendering at >=960px, so the desktop
   layout stays byte-for-byte what it was.
   ============================================================== */

/* ── inner page layout (products / solutions / contact / privacy) ──
   The original .inner-content used position:absolute (top:215px, left:39px),
   which takes it out of flow. The footer then appears right after the header
   with no knowledge of the card's height, causing overlap.

   Fix: switch to in-flow relative positioning. A negative top margin
   recreates the design intent of the card overlapping the banner's lower
   edge. The footer now follows content automatically at every height.

   This does not affect index.html, which uses .ContentBoxL, not .inner-content.
   ────────────────────────────────────────────────────────────────────────── */
.inner-content {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    max-width: 800px;           /* original content width; padding adds 110px */
    margin: 30px auto 40px;     /* start below banner with a clear gap */
}

/* push-* classes are now unused at all widths */
.push-40, .push-110,
.push-160, .push-590 { margin-top: 0 !important; }

/* ── centre the 942px frame at wide viewports (≥1200px) ─────────────────── */
/* white content background at all widths — prevents grey gutter bleeding
   through when body background changes at wide viewports */
#mainFrame { background: #fff; }

@media (min-width: 1200px) {
    body { background: #d6d6d6; }   /* side gutter colour */
    #mainFrame {
        float: none;
        margin: 0 auto;
        box-shadow: 0 0 40px rgba(0, 0, 0, .18);
    }
}

/* text nav, hidden until the image nav stops fitting */
.mobile-nav { display: none; }

@media (max-width: 959px) {

    /* release the fixed 942px frame */
    #mainFrame,
    .wrapper,
    #logoHolder {
        width: auto;
        max-width: 942px;
        float: none;
        margin: 0 auto;
    }

    #logoHolder img { max-width: 100%; height: auto; }

    /* the button strip is a row of fixed-width JPEGs and cannot reflow */
    .nav-images { display: none; }

    .mobile-nav {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        margin: 0;
        padding: 0;
        border-top: 1px solid #3b3b3b;
        border-bottom: 1px solid #393939;
        /* gradient sampled from the recovered but_Home_off.jpg */
        background: linear-gradient(to bottom,
            #bfbfbf 0%, #5c6063 45%, #454a4d 45%, #454a4d 100%);
    }
    .mobile-nav li { flex: 1 1 auto; text-align: center; }
    .mobile-nav a {
        display: block;
        padding: 13px 14px;
        font: bold 12px/1 Arial, Helvetica, sans-serif;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: #fff;
        text-decoration: none;
        white-space: nowrap;
    }
    .mobile-nav a:hover,
    .mobile-nav a.current {
        background: rgba(150, 187, 84, .92);   /* #96bb54, the brand green */
        color: #fff;
    }

    /* inner-content: tighten margins on small screens */
    .inner-content {
        margin: 12px 12px 30px;
        padding: 22px 20px;
        max-width: none;
        box-shadow: 0 1px 4px rgba(168, 168, 168, .6);
    }

    .ContentBoxL {
        width: auto;
        float: none;
        height: auto;
        padding: 0 16px;
    }

    .ContentBoxR {
        width: auto;
        height: auto;
        float: none;
        padding: 20px;
        margin: 20px 0 0 0;
        background-color: #454a4d;
        background-image: none;
    }

    /* fixed 180px clips text once it wraps */
    blockquote {
        height: auto;
        margin-left: 0;
        padding: 18px 0;
    }

    blockquote img { float: none; }
    .bulb-img { width: 54px; margin: 8px; }
}

@media (max-width: 600px) {
    .mobile-nav a { padding: 11px 9px; font-size: 11px; }
    .inner-content { margin: 12px 8px; padding: 18px 15px; }
    .ContentBoxL  { padding: 0 12px; font-size: 13px; }
    .Content       { font-size: 13px; }
    .ContentTitle  { font-size: 16px; }
    body { -webkit-text-size-adjust: 100%; }
}

/* ==============================================================
   REVISION 2 — footer redesign, hamburger nav, bulb SVG
   ============================================================== */

/* ── footer ─────────────────────────────────────────────────── */
/* Remove old id-based footer rules' width/height now that we use
   site-footer; the old ids are gone from markup. */
#footer, #footer-inner { display: none; }   /* belt + braces for any cached copy */

.site-footer {
    clear: both;
    width: 100%;
    background: linear-gradient(to bottom,
        #bfbfbf 0%, #5c6063 45%, #454a4d 45%, #454a4d 100%);
    border-top: 1px solid #3b3b3b;
    color: #ddd;
    font-size: 11px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    padding: 18px 20px 20px;
    box-sizing: border-box;
}

.footer-nav {
    margin-bottom: 10px;
}
.footer-nav a {
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 0 14px;
}
.footer-nav a:hover { text-decoration: underline; }

.footer-copy {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 24px;
    color: #ccc;
}
.footer-copy a {
    color: #ccc;
    text-decoration: none;
}
.footer-copy a:hover { color: #fff; text-decoration: underline; }

/* ── bulb image — two-column flex layout inside blockquote ───── */
blockquote {
    display: flex;
    align-items: flex-start;
    gap: 0;
}
.bulb-img {
    flex: 0 0 auto;
    width: 78px;
    height: auto;
    margin: 10px;
    float: none;        /* cancel any legacy float */
    padding: 0;
}
.bulb-text {
    flex: 1 1 auto;
}

@media (max-width: 959px) {
    .site-footer { font-size: 12px; }
    .push-40, .push-110, .push-160, .push-590 { margin-top: 0; }
}

/* ── hamburger nav ───────────────────────────────────────────── */
.hamburger {
    display: none;     /* hidden on desktop */
}

@media (max-width: 959px) {

    /* hide the old text-list nav */
    .mobile-nav { display: none !important; }

    /* hamburger button */
    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 36px;
        height: 26px;
        background: #454a4d;
        border: none;
        padding: 5px 6px;
        cursor: pointer;
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 100;
        border-radius: 3px;
    }
    .hamburger span {
        display: block;
        width: 100%;
        height: 3px;
        background: #fff;
        border-radius: 2px;
        transition: transform .25s, opacity .25s;
    }
    /* open state — X mark */
    .hamburger[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .hamburger[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
    }
    .hamburger[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* the logoHolder needs relative positioning for the button to sit in */
    #logoHolder { position: relative; }

    /* dropdown panel */
    .mobile-nav {
        display: block !important;  /* override the old rule */
        list-style: none;
        margin: 0;
        padding: 0;
        background: #454a4d;
        border-top: 2px solid #96bb54;
        box-shadow: 0 4px 8px rgba(0,0,0,.25);
    }
    .mobile-nav[hidden] { display: none !important; }

    .mobile-nav li { border-bottom: 1px solid #5c6063; }
    .mobile-nav a {
        display: block;
        padding: 14px 18px;
        font: bold 13px/1 Arial, Helvetica, sans-serif;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: #fff;
        text-decoration: none;
    }
    .mobile-nav a:hover,
    .mobile-nav a.current {
        background: #96bb54;
        color: #fff;
    }
}

@media (max-width: 600px) {
    .hamburger { top: 8px; right: 8px; }
    .mobile-nav a { padding: 13px 14px; font-size: 12px; }
    .bulb-img { width: 40px; margin: 6px; }
}