@import url("/data/includes/css/common.css");

@media screen and (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

html, body { min-height: 100vh; font-size: 1em; color: var(--darkestgrey); }

/*span.printables { color: var(--printables); }
span.downloads { color: var(--downloads); }
span.tutorials { color: var(--tutorials); }*/

#banner {
    width: 100%; height: 150px;
    background-color: var(--darkestgrey);
    }
        
    #bannerimgleft {
        position: absolute; top: 0; left: 0;
        width: 400px; height: 150px;
        background-image: url("/data/media/layout/bannerimgleft-a.png"); background-size: cover;
        }
        
    #logo {
        position: relative; top: 25px; left: 0;
        width: 100%; height: 100px;
        z-index: 9999;
        text-shadow: 3px 3px 2px var(--darkestgrey), -3px 3px 2px var(--darkestgrey), -3px -3px 0 var(--darkestgrey), 3px -3px 0 var(--darkestgrey);
        }
        #logo a { color: white; text-decoration: none; }
        #logo h1 { font-size: 4em; font-family: "Love Ya Like A Sister", serif!important; font-weight: 500/*semi-bold*/; letter-spacing: 2px; color: white; text-align: center; margin: -10px 0; }
        #logo h2 { font-size: 2em; font-family: "Caveat", cursive; letter-spacing: 2px; color: white; text-align: center; margin: -10px 0 0 0; }
        
    #bannerimgright {
        position: absolute; top: 0; right: 0;
        width: 400px; height: 150px;
        background-image: url("/data/media/layout/bannerimgright-a.png"); background-size: cover;
        }
        
    #menu {
        width: 100%; height: 60px; line-height: 50px;
        position: sticky; top: 0; z-index: 9999;
        background-color: var(--accentred);
        border-bottom: 10px solid var(--mediumdarkgrey);    
        text-align: center;
        }
        #menu a:link, #menu a:visited, #menu a:active {
            width: 100%; display: inline-block;
            color: var(--mediumlightgrey);
            text-decoration: none;
            }
        #menu a:hover { background-color: var(--darkestgrey); }
    
        #menu ul {
            list-style: none;
            position: relative;
            z-index: 9999;
            }
        #menu ul li {
            display: inline-block;
            background-color: var(--accentred);
            width: 164px;
            font-size: 120%;
            }
        #menu ul ul {
            position: absolute; top: 50px;
            height: 0; line-height: 40px;
            overflow: hidden;
            }
            #menu ul li:hover > ul { display: block; height: 40px; overflow: visible; transition: height 400ms; }
        #menu ul ul li {
            display: list-item;
            position: relative; left: 0;
            width: 164px;
            font-size: 85%;
            transition: height 400ms;
            }
        #menu ul ul ul li {
            display: list-item;
            position: relative; top: -50px; left: 164px;
            width: 250px;
            font-size: 85%;
            }
            #menu li:hover a, #menu li:hover ul a:hover { background: var(--darkestgrey); } /* keep category link grey when sub-item is hovered over */
            #menu li:hover ul a, #menu li li:hover ul a { background: var(--accentred); } /* non-selected items are red */
            #menu li li:hover a { background: var(--darkestgrey); } /* override above line and keep sub-item link grey when sub-sub item is hovered */
            #menu li > a:after { content:  " ▾"; }
            #menu li > a:only-child:after { content: ""; } /* remove arrows from links without subcategories */
            #menu li ul li > a:after { content:  " ▸"; }
            #menu li ul li > a:only-child:after { content: ""; } /* remove arrows from links without subcategories */
            
        #menu .menu-button-container { 
            display: none;
            height: 100%; width: 100%;
            cursor: pointer;
            flex-direction: column; justify-content: center; align-items: center;
            }
            
        #menu #menu-button { display: none; } /* hidden checkbox that displays menu items on small screens when checked */
            
        #menu .menu-button-icon, #menu .menu-button-icon::before, #menu .menu-button-icon::after {
            display: block; width: 30px; height: 4px;
            position: absolute;
            background-color: #fff;
            border-radius: 2px;   
            transition: transform 400ms;
            }
            #menu .menu-button-icon::before { content: ''; margin-top: -8px; }
            #menu .menu-button-icon::after { content: ''; margin-top: 8px; }

        #menu-button:checked + .menu-button-container .menu-button-icon { background-color: rgba(255, 255, 255, 0); } /* adds transparency to middle bar only */
        #menu-button:checked + .menu-button-container .menu-button-icon::before { margin-top: 0; transform: rotate(45deg); }
        #menu-button:checked + .menu-button-container .menu-button-icon::after { margin-top: 0; transform: rotate(-45deg); }
            
    #container { 
        display: flex; flex-direction: column;
        position: relative;
        min-height: calc(100vh - 200px/*150px #banner + 50px #menu*/);
        width: 100%; margin: auto;
        } 
        #container * { scroll-margin-top: 65px/*50px menu height + additional 15px for extra space*/; }
        
        .divider1 {
            width: 100%; height: 100px;
            border-bottom: 10px solid var(--mediumdarkgrey);
            background-image: linear-gradient(white, transparent), url("/data/media/layout/tilingbg.png"); background-size: 100%;
            }
            
        .divider2 {
            width: 100%; height: 100px;
            border-top: 10px solid var(--mediumdarkgrey);
            background-image: linear-gradient(transparent, white), url("/data/media/layout/tilingbg.png"); background-size: 100%;
            margin-bottom: -50px;
            }
            
        .divider3 {
            width: 100%; height: 25px;
            background-color: var(--darkestgrey);
            border-bottom: 5px solid var(--accentred);
            }
        
        #featured-container {
            display: flex; justify-content: right;
            width: 100%;
            padding: 50px;
            background-image: url("/data/media/layout/intro-bg.png"); background-repeat: no-repeat; background-position: center; background-size: cover;
            border-bottom: 10px solid var(--mediumdarkgrey);
            }
        
            #featured {
                width: 100%; max-width: 650px;
                font-size: 1em; line-height: 1.5em;
                padding: 20px 20px 30px 20px;
                /*background: rgba(225, 225, 225, 0.9);*/
                background-image: url("/data/media/layout/80pctrans.png"); /* rgba above showing as grey instead of white?? image used as temporary solution */ background-repeat: repeat;
                border-radius: 15px;
                }
                #featured p { margin: 0 0 20px 0; text-align: justify; }
                #featured a {
                    background-color: var(--accentred);
                    color: var(--lightestgrey);
                    text-decoration: none;
                    margin: 10px 10px 10px 30px; padding: 10px;
                    border: 2px solid #8c434d; border-top: none; border-left: none; border-radius: 10px;
                    }
                    #featured a:hover { background-color: #8c434d; border-color: var(--accentred); }
                    #featured a:active { background-color: var(--darkestgrey); color: var(--accentred); }
                
        #about-container, #notice-container {
            width: 100%;
            padding-top: 50px;
            background-image: url("/data/media/layout/tilingbg.png"); background-repeat: repeat; background-position: center; background-size: 100%;
            }
        #about-container { border-bottom: 10px solid var(--mediumdarkgrey); }
        #notice-container { flex: 1; border-bottom: 1px solid transparent; } /* background image below #notice div won't display unless a border is specified? */
        
            #about, #notice {
                width: 90%; max-width: 1200px;
                margin: 0 auto 50px; padding: 20px;
                color: var(--darkestgrey);
                background-color: rgb(255,255,255, 0.8);
                border-radius: 15px;
                }
            #about { text-align: justify; }
            #notice { display: flex; vertical-align: top; text-align: center; }
                #about img { position: relative; float: left; max-width: 25%; max-height: 190px; padding-right: 20px; }
                #notice .textleft, #notice .textright { width: 70%; display: inline-block; }
                #notice .imgleft, #notice .imgright { width: 30%; display: inline-block; }
                #notice .textright, #notice .imgright { margin-left: auto; } /* because float:right doesn't work in display:flex */
                #notice img { width: 90%; }
                #about h1, #notice h1, #featured h1 { font-size: 2em; font-family: "Love Ya Like A Sister", serif; letter-spacing: 2px; }
                #about h2, #notice h2, #featured h2 { font-size: 1.8em; font-family: "Caveat", cursive; letter-spacing: 1px; margin-bottom: 10px;  }
                    #about h2:before, #featured h2:before { content: "\a0\a0\a0\a0\a0"; } /* indent slogan using blank spaces (padding doesn't work here) */
                #about p, #notice p { font-size: 1.2em; }
                #notice p { margin-top: 15px; }
                #about a:link, #about a:visited, #about a:active, #notice a:link, #notice a:visited, #notice a:active { color: var(--accentred); text-decoration: none; }  /* identical link styling to #content */
                #about a:hover, #notice a:hover { color: var(--darkestgrey); text-decoration: underline 3px var(--accentred); } /* identical link:hover styling to #content */
                #notice ul { /* identical ul styling to #content */
                margin: 0 0 1em 3em; padding: 0;
                list-style: inside url("/data/media/layout/bullet.png");
                text-indent: -2em;
                }
                #notice ul ul { margin: 0 0 0 1.5em; } /* removes space after sub-item and lessen indent | identical ul ul styling to #content */
            
        #biglinks-container {
            display: flex; vertical-align: top; justify-content: center; text-align: center;
            width: 100%; max-width: 1200px;
            margin: 0 auto;
            }
            #biglinks-container h1 { font-size: 2.5em; font-family: "Love Ya Like A Sister", serif; letter-spacing: 2px; text-shadow: 2px 2px var(--mediumlightgrey); }
            #biglinks-container p { margin-top: 5px; }
        
            #biglinks1, #biglinks2, #biglinks3 {
                display: inline-block;
                text-align: center;
                width: 30%; margin: 3%;
                }
                #biglinks1 h1, #biglinks2 h1, #biglinks3 h1 { letter-spacing: 4px; color: var(--accentred); }
            
                #biglinks1 a.img, #biglinks2 a.img, #biglinks3 a.img {
                    display: block;
                    width: 100%;
                    padding-bottom: 50%;
                    border-radius: 10px;
                    background-repeat: no-repeat; background-position: center; background-size: 100%;
                    filter: grayscale(0.6) opacity(0.8); transition: 0.8s;
                    }
                    #biglinks1 a.img { background-image: url("/data/media/layout/biglink1.png"); }
                    #biglinks2 a.img { background-image: url("/data/media/layout/biglink2.png"); }
                    #biglinks3 a.img { background-image: url("/data/media/layout/biglink3.png"); }
                    #biglinks1 a.img:hover, #biglinks2 a.img:hover, #biglinks3 a.img:hover { filter: grayscale(0) opacity(1); background-size: 120%; }
                    
        #content {
            flex: 1;
            width: 90%; max-width: 1500px;
            margin: 0 auto; padding: 20px;
            font-size: 1em;
            position: relative;
            /*scroll-padding-top: 60px;*/
            }
            #content h1, #content h2 {
                width: 100%;
                font-family: "Love Ya Like A Sister", serif; letter-spacing: 2px; font-weight: bold;
                background-color: var(--mediumlightgrey);
                }
            #content h1 { 
                font-size: 1.5em; text-align: center;
                height: 40px; line-height: 40px;
                margin-bottom: 0.8em;
                border-radius: 10px;
                }
            #content h2 {
                font-size: 1.2em;
                height: 25px; line-height: 25px; padding-left: 15px;
                margin: 0.5em 0 0.3em 0;
                border-radius: 7px;
                }
            
            #content p { text-align: justify; }
                #content p.listhead { margin-bottom: 0; }
                #content p.updateinfo { text-align: right; }
            #content a:link, #content a:visited, #content a:active { color: var(--accentred); text-decoration: none; } /* identical link styling to #about and #notice */
            #content a:hover { color: var(--darkestgrey);   text-decoration: underline 3px var(--accentred); } /* identical link:hover styling to #about and #notice */
            #content ul { /* identical ul styling to #notice */
                margin: 0 0 1em 3em; padding: 0;
                list-style: inside url("/data/media/layout/bullet.png");
                text-indent: -2em;
                }
                #content ul ul { margin: 0 0 0 1.5em; } /* removes space after sub-item and lessen indent | identical ul ul styling to #notice */
            #content hr {
                display: block; height: 9px;
                background-image: url("/data/media/layout/hr.png"); background-repeat: no-repeat; background-position: top left;
                margin-bottom: 8px;
            }
            #content blockquote { display: inline-block; font-style: italic; margin: 0 0 1em 2em; padding: 0.5em; background-color: #f2f2f2; border-radius: 7px; }
                #content blockquote ul { margin: 0 0 0 1.5em; text-indent: -1.5em; }
            #content table, #content th, #content tr, #content td {
            width: 100%;
            font-size: 1em; vertical-align: baseline;
            margin-bottom: 20px;
            }
            #content sup, #content sub { vertical-align: baseline; position: relative; font-size: 0.8em; }
                #content sup { top: -0.4em; }
                #content sub { top: 0.4em; }
        
        #content #sitemap-map { width: 50%; display: inline-block; }
        #content #sitemap-aff { width: calc(50% - 20px/*gives 20px buffer between divs*/); display: inline-block; float: right; text-align: center; }
            #content #sitemap-aff h2 { font-size: 1.1em; font-weight: bold; background-color: transparent; margin: 0; }
            #content #sitemap-aff img { box-sizing: content-box; width: 88px; height: 31px; padding-bottom: 1px; margin-bottom: -1px; border-bottom: 3px solid transparent; }
            #content #sitemap-aff img:hover { border-color: var(--accentred); }
            #content #sitemap-aff span { display: none; }
            #content #sitemap-aff p, #content #sitemap-aff ul { font-size: 0.9em; }
            #content #sitemap-aff p { text-align: center; margin: 0 0 10px 0; }
            #content #sitemap-aff ul { list-style: none; }
            
        #content ul#sitemap { margin: 0 0 1em 0; }
        #content ul#sitemap, #content ul#sitemap li { list-style: none; text-indent: 0; }
        #content ul#sitemap ul { border-left: 1px solid var(--darkestgrey); }
        /*#content ul#sitemap:last-child ul li { border: 0; } attempt to end the border after "Site"*/ 
        #content ul#sitemap ul li:before { content: "—"; }
        
        #footer-container { margin-top: auto; } /* forces footer to sit at the bottom of the page, below all other content without any overlap */
        
            #footer {
                display: flex; width: 100%; vertical-align: top;
                background-color: var(--darkestgrey); color: var(--mediumlightgrey);
                border-top: 10px solid var(--mediumdarkgrey);
                padding: 20px 0 10px;
                }
                #footer h1 { font-size: 1.3em; font-family: "Love Ya Like A Sister", serif; letter-spacing: 2px; width: 100%; }
                #footer p { font-size: 0.8em; margin: 0; }
                #footer a { white-space: nowrap/*prevents website names from breaking across two lines*/; }
                    /*#footer p.newsletter-success { width: 100%; text-align: center; color: #b7d088; margin-top: 5px; }
                    #footer p.newsletter-error { width: 100%; text-align: center; color: var(--accentred); margin-top: 5px; }*/
                /*#footer label { font-size: 0.8em; }*/
    
                #dyk { width: 35%; padding: 10px 25px; }
                    #dyk p { text-align: justify; text-indent: 20px; }
            
                #ntw { width: 20%; padding: 10px 25px; }
                    #ntw p { margin-bottom: 15px; }
                    #ntw a:link, #ntw a:visited, #ntw a:active { color: var(--lightestgrey); text-decoration: none; border-bottom: 2px solid var(--lightestgrey); }
                    #ntw a:hover { border-color: var(--accentred); }
                    /*#ntw input[type=email] {
                        width: calc(100% - 52px);
                        background-color: var(--lightestgrey);
                        filter: opacity(0.6);
                        padding: 12px;
                        margin-right: 1px;
                        border-radius: 4px;
                        }  
                    #ntw input[type=email]:focus { outline: none; filter: opacity(1); }
                    #ntw input[type=submit] {
                        width: 50px;
                        background-color: var(--accentred);
                        color: white;
                        padding: 12px 0;
                        margin-left: 1px;
                        border-radius: 4px;
                        cursor: pointer;
                        text-transform: uppercase;
                        }
                    #ntw input[type=submit]:hover { background-color: #8c434d; }*/
            
                #aff { width: 45%; text-align: right; padding: 10px 25px; }
                    #aff img { box-sizing: content-box; width: 88px; height: 31px; padding: 2px 0 2px; margin: -2px 2px -2px; border-bottom: 3px solid transparent; }
                        #aff img:hover { border-color: var(--lightestgrey); }
                    #aff span { display: none; }
    
                #disclaimer {
                    width: 100%; padding: 15px 15px 20px/*little bit extra at the bottom as a buffer*/;
                    background-color: var(--accentred);
                    font-size: 0.8em; color: var(--lightestgrey); text-align: center;
                    }
                    #disclaimer p { margin: 0; }
        
                    #disclaimer a:link, #disclaimer a:visited, #disclaimer a:active { color: var(--lightestgrey); text-decoration: none; border-bottom: 2px solid var(--lightestgrey); }
                    #disclaimer a:hover { color: var(--darkestgrey); }

/**** START RESPONSIVE MOBILE LAYOUT DESIGN ****/
@media (max-width:840px) {
    
    br.hidden { display: none; }
    
    #banner {
        width: calc(100% - 75px); height: 85px;
        float: left; position: sticky; top: 0; z-index: 9999;
        border-bottom: 10px solid var(--mediumdarkgrey);
        }
    
        #bannerimgleft, #bannerimgright { width: 200px; height: 75px; }
        
        #logo { width: 100%; height: 65px; top: 10px; }
            #logo h1 { font-size: 3em; margin: auto; }
            #logo h2 { display: none ; }
        
    #menu { width: 75px; height: 85px; line-height: 75px; float: right; }
        #menu ul { position: absolute; top: 75px; right: 0; width: 100vw; }
        #menu ul li { display: block; width: 100%; height: 50px; line-height: 50px; }
        #menu ul li:last-child { box-sizing: content-box; border-bottom: 10px solid var(--mediumdarkgrey); }
        #menu li > a:after { content:  ""; } /* hide arrows */
        #menu ul ul li, #menu ul ul ul li, #menu ul li:hover > ul { display: none } /* hide subcategory links on mobile menu until I figure out a way to optimise them */
        #menu a:link, #menu a:visited, #menu a:active { display: block; width: 100%; min-width: 0; height: 50px; line-height: 50px;  }
    
        #menu .menu-button-container { display: flex; }
    
        #menu-button ~ #menu-dropdown li { overflow: hidden; height: 0; transition: height 100ms; }
        #menu-button:checked ~ #menu-dropdown li { height: 50px; transition: height 400ms; }
        
    #container { min-height: calc(100vh - 85px); }
            
        #featured-container { clear: both; width: 100%; padding: 50px 20px; }
        
        #about-container, #notice-container { clear: both; } 
        
            #about, #notice { width: 90%; flex-direction: column; }
                #about img { position: relative; display: block; top: -50px; margin: auto; margin-bottom: -50px; float: none; max-width: 50%; }
                #about h1, #notice h1 { text-align: center; }
                #about h2 { text-align: center; }
                #about h2:before { content:  ""; } /* remove blank spaces that acted like padding */
                #notice .textleft, #notice .textright { width: 100%; display: block; order: 1; margin: auto; }
                #notice .imgleft, #notice .imgright { width: 100%; display: block; order: 2; }
                #notice img { width: 50%; }
    
        #biglinks-container { display: block; padding: 20px 0; }
            #biglinks-container img { margin-top: 5px; max-width: 75%; }
                #biglinks1, #biglinks2, #biglinks3 {
                    display: block; width: 90%; margin: auto;
                    text-align: center;
                    }
            
        #content { clear: both; scroll-padding-top: 85px; }
            #content > * { scroll-margin-top: 85px; }
            #content #sitemap-map { display: block; width: 100%; padding: 0; }
            #content #sitemap-aff { display: block; position: static; left: 0; width: 100%; padding: 0; }
        
        #footer { display: block } 
            #dyk, #ntw, #aff { display: block; width: 100%; padding: 10px 15px; }
            #dyk {  text-align: justify; }
                #dyk p { text-indent: 0; padding: 0 15px; }
            #ntw, #aff { text-align: center; }
                #dyk h1, #ntw h1, #aff h1 { text-align: center; }
                #aff img { display: none; }
                #aff span { display: inline; font-size: 0.8em; }
                #aff a:link, #aff a:visited, #aff a:active { color: var(--lightestgrey); text-decoration: none; border-bottom: 2px solid var(--lightestgrey); }
                #aff a:hover { border-color: var(--accentred); }
}

@media (max-width:400px) /* the following (hopefully) forces headings and subheadings to not exceed one line on narrow screens */ {
    #featured h1, #about h1, #notice h1 { font-size: 6.5vw; text-align: center; }
    #featured h2, #about h2 { font-size: 5.5vw; text-align: center; }
    #featured a { display: block; margin: 0 auto; text-align: center; }
    #featured h2:before, #about h2:before { content:  ""; }
    #content h1 { font-size: 5vw; }
    #content h2 { font-size: 4.5vw; }
}
/**** END RESPONSIVE MOBILE LAYOUT DESIGN ****/