source: main/trunk/model-interfaces-dev/wmtb/styles/gs-wmtb-custom.css@ 35281

/* DEFINING CSS VARIABLES - redefining them from weebly site (variables.less used in header.less)
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

BUT UNFORTUNATELY, we can't use css variables in media query declarations:
https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries
*/
:root {
    --height-header: 120px;
    --height-header-mobile: 93px;
    --bp-small: 1025px;
    --bp-small-max: 1024px; /* 1 less */
}

/* Within the page that loads in iframe, want a spacer (for now 120px high) that
will take up the space of the whakatohea navbar. Want the scrollbar shifted from
body element into (an) element that spatially immediately follows the vertical spacer.*/
body#top {
    overflow-y: hidden;
    margin: 0;
    border: none;    
}

div#spacer-for-nav
{
    height: var(--height-header); /*120px;*/
    width: auto;
}    /* margin-top:120px; Why did height not have any effect? Because of self-closing div. Need explicit closing div. But an empty opening + closing div is dangerous in GS3, try using gsf:div element (not sure if class attribute will work on it) if xml equivalent of nbsp entity inside empty op+closing div doesn't work.*/


/* https://www.w3schools.com/cssref/css_units.asp 
 https://css-tricks.com/a-complete-guide-to-calc-in-css/
 Need spaces around (arithmetic) operator in calc() equations
*/
.shifted-frame {
    overflow: auto;
    height: calc(100vh - var(--height-header)); /*calc(100vh - 120px);*/
    width: auto;

} /* Why does height calc(100% -120px) instead of using 100vh not work? */


/* Mobile settings
Hardcoded values copied from weebly site theme's variables.less file called in header.less */
@media screen and (max-width: 1024px) { /* bp-small-max */

    /*
      body { overflow: auto; }
   */
    
    div#spacer-for-nav {
    height: var(--height-header-mobile); /*93px;*/
    }

    .shifted-frame {
    height: calc(100vh - var(--height-header-mobile));  
    /*height: 100vh;*/ /*calc(100vh - 93px);*/
    /*overflow-y: auto;*//* scroll;*/
    }

    /* Maybe undo any changes made below for full-screen version so mobile unaffected*/
    /*
    div.crop-bg {
    height: 100px;
    background-position: center 20%;
    }

    .crop-bg div.container {
    padding: 100px 0;
    }
   */
}


/* Want to have the full size bg banner image on the main page listing the Pou-s,
but on each Pou landing page and each collection landing page, want a vertically
narrower banner img. Achieved by cropping same image.
  https://www.w3schools.com/cssref/pr_background-image.asp 
  and https://www.w3schools.com/cssref/pr_background-position.asp
*/
div.wsite-section-bg-image {
    /*Can't set background-image as url contains variable: interfaces/{$interface_name}/images/digital-library.jpg*/
    background-color: transparent;  /* Used if the image is unavailable. OR: grey */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
}

div.full-bg {
    height: auto;
    background-position: 50.00% 21.94%;
    /*background-size: 100%;*/
}

/* 
   Non-mobile settings.
 */
@media screen and (min-width: 1025px) { /* bp-small */
    div.crop-bg {
    height: 230px; /* You must set a specified height */
    background-position: center -100px; /* OR: center OR: center 20% */
    /*display: block;*/ /* div with bg image needs to change from display: table-cell
               to display: block when cropping bg image, as table-cell setting
               overrides height customisation */
    }
    /* Restyle .container *descendant* of .crop-bg:
       Padding can not be 100px as it is when .full-bg is in effect,
       and should be no greater than 95px for .crop-bg, else there
       appears a bottom border of sorts under the cropped image. */ 
    .crop-bg div.container {
    /* padding: 50px 0; */
    }

    /* Override: padding had made the login/search/browse nav buttons unavailable */
    .banner-wrap .crop-bg .container {
    padding: 0px;
    }

    #gs_content {
    max-width: 70vw;
    }
}

a, span#addNewMD, span#clearSaved {
    text-decoration: none;
    font-weight: normal;
    color: rgb(86, 154, 189); /* a light blue */
}

/* rgb(79, 79, 78);*/ /* a dark black/grey */

a:hover, span#addNewMD:hover, span#clearSaved:hover {
    color: rgb(250, 138, 0); /*orange*/ 
}

div.outer {
    line-height:1rem;
    padding-top:2rem; /*5vh;*/
}


div.img-and-desc {
    position: relative;
    width:100%;
    height:100%;
    display: block;
}

div.img-and-desc a img {
    border: none;
}

/*
.container {    
    clear: right;
    clear: left;
    padding-top: 0;
}
*/

#gs_content pre {
    white-space: pre-wrap;
}

#gs_content, #gs_content paragraph, #gs_content p {
    clear: both;
    line-height: 1.7rem !important; /*1.3rem*/
}

#gs_content a {
    line-height: 1.7rem;
}

/*
#gs_content a:visited {
    color:DarkGrey;
}*/

.wsite-content-title a {
    color: white;
    font-weight: bold;    
}
div#coll-name-link a {
    color: white;
}

/* overriding */
.wsite-image {
    position: relative;
}
/* overriding */
#wsite-content div.img-and-desc div.paragraph {
    position: absolute;
    top: 0.5rem;
    text-align: center;
    color: white !important;
    margin: 0.25rem 1.5rem 0.5rem 1.5rem;
    font-size: 10pt !important;
}

span.pou-group-title { /* if overriding: #wsite-content div.img-and-desc div.paragraph a {*/
    font-variant: small-caps;
    color: white;
    font-size:1.5rem;
}

div#wmtb-footer {
    text-align: right;
    margin: 0 2rem 2rem 2rem;
}

div#wmtb-footer a {
    text-decoration: none;
    font-weight: normal;
}

div#topline {
    line-height: 1rem; /*overriding*/
    padding-top: 0.5rem;
}

div#topline ul {
    text-align: right;
}

div#topline li, div#topnav li, .query-form-links li, #wizardBar li {
    display: inline;    
    /*text-transform: capitalize;*/ /* Will Titlecase all menus including Browsing Classifiers */
}

div#topline li, .query-form-links li, #wizardBar li {
    margin: 0 0.5rem;
}

/* Special case: div#topnav li stretches over multiple lines as it contains a nested ul
on its own separate line, since (the nested) ul is displayed as a block by default.
Adding a positive right margin to div#topnav li means that after the nested ul block
there's now a newline with margin space. We don't want this additional newline, so set
margin-RIGHT of this outer li to 0 to prevent it. */
div#topnav li {
    margin: 0 0 0 1rem;
}

/*
div#topnav li, .query-form-links li {
    line-height: 2rem;    
}
*/

div#wizardContainer {
    padding: 0rem 0 2rem 0;
}

/* To insert a | between nav menu links */
/*div#topnav li::after, .query-form-links li::after {
    content: " | ";
}*/

div#topnav {
    float: left;
}

div#search, div#quicksearcharea {
    float: right;
}
div.query-form-links ul, #advanced {
    clear: right;
    float: right;
}

div#coll-menus {
    text-align:center;
}

div#topbar {
    margin: 0 auto;
    line-height: 1rem;
}

hr.spacer {
    border: none; /*border-top: 1px solid black;*/
    clear: right;
    clear: left;
    padding-bottom: 1rem;
}


#quickSearchSubmitButton {
    width: 3rem;
}

#browse-search-bars {
    max-width: 100vw;
    /*padding: 1rem;*/
    /*height: 10vh;*/ /* useful for selecting div in dev tools */
    /* max-height: 10vh; */
    height: auto;
    padding: 0.5rem 0rem; /* have to set the rest to 0 */
    /*background-color: rgba(255, 255, 255, 0.9);*/ /* https://stackoverflow.com/questions/10422949/css-background-opacity */
    position: absolute; bottom: 0; left: 0; /* or: top: 60%; left: 0; */
    /*Or: margin-top: -6rem; */
    z-index:2;
    background-color: rgba(255, 255, 255, 0.7); /* https://stackoverflow.com/questions/10422949/css-background-opacity */
}

#browse-search-bars #topbar {
    line-height: 1rem;
    /*margin:auto;*/
    width: 90vw;
}

div.paramLabel, div.paramValue {
    display: inline;
    line-height: 2rem;
}

/* overriding main_style.css */
.main-wrap .wsite-section-wrap:first-child .container {
    padding-top: 0;
}

ul.drop-down-list {
    padding-top: 0.5rem;
}
#advanced {
    padding-top:0.2rem;
}