/*
 *******************************************************************
 * Style sheet for Mick's Synoniemenboek - (c) 2024 Michael Janus *
 *******************************************************************
 last update: 29 oct 2024
 */


/* === TAGS === */

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

html { scroll-behavior: smooth; }

body { border-collapse: collapse; color: #204080; background-color: #FDFDFD; 
      font: normal 100% Verdana, Arial, Times, sans-serif; overflow: hidden; }

/* h1 is used for page titles */
h1 { margin-top: 0; font-size: 1.1em; text-align: left; font-weight: normal; color: #9090B0}
h2 { margin: 2em 0 0.2em 0; font-size: 1.0em; color: #9090B0; font-weight: normal; }
h3 { margin-top: 0; margin-left:0px; margin-bottom: 0.5em; font-size: 1em; font-weight: normal; text-decoration: none; font-style: italic;}
td h3, ol h3 { font-size: 0.9em; text-decoration: underline;}
h4, h5 { font-size: 0.9em; font-weight: normal; }
h6  { font-size: 0.9em; display: inline }

a, li a, ol li a { color: #2020E0; font-weight: 500; text-decoration: none;}
a:hover, li a:hover, ol li a:hover { color: #0000FF; text-decoration: underline;}

/* the lists and columns are mostly used on info and links pate */
p  { font-size: 0.9em; }
td  { font-size: 0.9em; }
ul { list-style-position: inside;  padding-left:0; font-size: 0.9em; }      
ol { list-style-position: inside;  padding-left:0; font-size: 0.9em;}      


ol ul li  { font-weight: normal; text-decoration: none; }

      
/* === COLORS === */

.mbluedrk-txt { color: #204080; }
.mblue-txt { color: #2070E0; }
.mred-txt { color: #E02020; }
.mgreen-txt { color: #208020; }
.mgray-txt { color: #A0A0C0; }
.mblue-bg { background-color: #4070E0; } 
.mbluedrk-bg { background-color: #203060; } 
.mgray-bg { background-color: #AABBBB; } 
.mgraydrk-bg { background-color: #202030; } 
.mwhite-bg { background-color: #FDFDFD; }
.mwhite-txt { color: #FDFDFD; }

:root {
    --mcol-bluedrk: #204080;
    --mcol-offwhite: #f8f8f8;
    --mcol-white: #ffffff;
    --mcol-yellow: #fff080;
    --mcol-yellowlt: #ffffe0;
    --mcol-gray: #809090;
    --mcol-graylt: #f0f0f8;
    
    --mbox-radius: 5px;     
    --mbox-minwidth: 300px;
    --mbox-maxwidth: 800px;
    
}

section {
    background-color: var(--mcol-white);     
    border: 1px solid var(--mcol-gray);
    border-radius: var(--mbox-radius);
    padding: 0.5em;
    min-width: var(--mbox-minwidth);
    max-width: var(--mbox-maxwidth);
    width: 100%;
}

/* == MAIN TITLE BAR AND SIDE BAR COLORS == */
.sidebars-bg { 
    background-color: #99AAAA; 
    /*background: linear-gradient(to bottom, #778888, #889999 1em, #99AAAA 2em, #667777); /* #fdfdfd 4.2em); */ */
} 
.page-head-bg {    
    background-color: #206080 /* #889999;
    background: linear-gradient(to bottom, #778888, #889999 1em, #99AAAA 2em);     */
}
.page-panel-bg {    
    background-color: #99AAAA;
    /* background: linear-gradient(to bottom, #99AAAA, #667777); */
}
.page-cont-bg {
    /* background-color: var(--mcol-graylt); /* var(--mcol-offwhite); */ 
    background-color: var(--mcol-offwhite); 
    
}
.page-cont-txt {    
    color: var(--mcol-bluedrk);
}


/* === FX === */
.popu-cont { font-size: 1em; }
.popu-cont.resp { font-size: 1em; }


/* === MAIN LAY-OUT ============================ */

.page-head { position: absolute; margin: 0; padding: 0; top: 0; left: 0; width: 100%;  }
.page-panel { position: absolute; margin: 0; padding: 0; left: 0; z-index:5; border: solid 1px #506060; }
.page-cont { position: absolute; margin: 0; padding: 0.5em 0.5em 0 0.5em ; right: 0; bottom: 0; overflow-y: scroll; overflow-x: hidden;}
.page-footer { position: relative; margin: 0px -10px -10px -20px ; padding: 0; bottom: 0; border: solid 1px #506060; z-index:2;}

.page-cont.fx {                
    border-left: 1px solid #506060;
    border-right: 1px solid #506060;
}

.page-head.resp {  height: 3.2em; }
.page-panel.resp { top: 3.2em; left: 0px; width: 100%; height:1.8em; display: block; }
.page-cont.resp {  top: 5em;  left: 0px; padding-left: 1em; min-height: calc(100vh - 5em); min-height: calc(100dvh - 5em); display: flex; flex-direction: column; padding-bottom: 0;} 
.page-cont-container { flex: 1  }
.page-footer.resp { font-size: 1em; height:auto; display: flex; flex-direction: row; justify-content: space-between; padding: 0; margin-bottom: 0; margin-top: 1em; }

.titl-txt {    top: 40%; width: auto; transform: translateY(-40%); white-space: nowrap; overflow: hidden; padding:0.2em; }
.titl-txt.fx { font-family: Arial; color: rgba(255,255,255,1); text-shadow: 0.1em 0.1em 0.2em #202020; }
.titl-txt.resp { font-size: 1.8em; position: absolute; left: 0.6em; } 


/* === MENUS ============================ */

.hambo { position: absolute; top: 2px; right: 0.5em; cursor: pointer; background-color: transparent; border: 0 none;}
.hambo.resp { display: none; padding: 4px; }
.hambo .bar { background-color: #f8f8f8; width: 30px; height: 5px; margin: 5px 0; }
.hambo.open { }
.hambo.open .bar:nth-child(1) { transform: scale(1) translate(-1px, 10px) rotate(45deg) ; }
.hambo.open .bar:nth-child(2) { opacity: 0; /* Hide the middle bar */ }
.hambo.open .bar:nth-child(3) { transform: scale(1) translate(-1px, -10px) rotate(-45deg); }

.menu { font-family: Verdana, Arial, Times, Serif; }        
.menu.resp { display:flex; flex-direction: row; justify-content: flex-start;  width: auto ; padding: 0 1em; }
.menu-item { display: block; margin: 2px 10px 2px 5px; padding: 5px 5px 5px 5px; }
.menu-item.resp { font-size: 0.8em;  min-height: 0.4em; }
.menu-item-spacer { display: block; }
.menu-item-spacer.resp { width: 2em; }
a.menu-item { font-family: Verdana, Arial, Times, Serif; text-decoration: none; text-transform: uppercase; }
a.menu-item         { color: var(--mcol-offwhite); }
a.menu-item:link    { color: var(--mcol-offwhite); }
a.menu-item:visited { color: var(--mcol-offwhite); }
a.menu-item:hover   { color: #ffffd0; }
a.menu-item:active  { color: var(--mcol-offwhite); }
a.menu-item.resp.active { color: #206080; background-color: var(--mcol-offwhite); border-radius: 5px; margin-bottom: -5px; }


.menu2 { font-family: Verdana, Arial, Times, Serif; }        
.menu2.resp { flex: 0 1 auto; display:flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; margin: 0 0 0 0;}
.menu2-item { }
.menu2-item.resp { font-size: 0.8em;  min-height: 0.4em; margin: auto 2em; flex: 1 0 auto; }
a.menu2-item { font-family: Verdana, Arial, Times, Serif; text-decoration: none;  }
a.menu2-item         { color: #FFFFFF; }
a.menu2-item:link    { color: #FFFFFF; }
a.menu2-item:visited { color: #FFFFFF; }
a.menu2-item:active  { color: #FFFF00; }
a.menu2-item:hover   { color: #FFFF66; }

.copyright { font-family: Verdana, Arial, Times, Serif; }
.copyright.resp { position: absolute; top: -2.5em; left: 3.5em; font-size: 0.5em;  }

.info { font-family: Verdana, Arial, Times, Serif; }        
.info.resp { flex: 0 0 auto; font-size:0.5em; margin: auto 1em;}

.icons {  }
.icons.resp { flex: 0 0 auto; margin: 0.2em 1em;}
a.icon { text-decoration: none; opacity: 0.8;}
a.icon:link    { color: #FFFFFF; }
a.icon:visited { color: #FFFFFF; }
a.icon:active  { color: #FFFF00; }
a.icon:hover   { color: #FFFF66; }


/* === CONTENT GENERAL ======================== */

#content { display: flex; flex-direction: row; }
#content-main { flex: 1 1 auto; }
#content-ads-right{ max-width: 316px; min-width: 100px; width:auto; display: block; visibility: visible; padding: 0 0 2em 1em; }
#content-ads-bottom { display: flex; justify-content: center; width: 100%; max-width: var(--mbox-maxwidth); }
#content-ads-inline { display: flex; justify-content: center; }
#content-ads-inline1 { display: flex; justify-content: center; }
#content-ads-inline2 { display: flex; justify-content: center; }
#content-ads-inline3 { display: flex; justify-content: center; }
#content-ads-wide { width: 100%; display: flex; justify-content: center; }
#content-lastupdate { text-align:right; font-size: 0.8em; font-style: italic; margin-top: 1em; padding-right:0.5em;}
#consentui { visibility: visible; }
.content-ads-noflicker-leaderboard { min-height: 92px; }
.content-ads-noflicker-leaderboard-mobile { min-height: 102px; }

.synoRegularPageContainer {  /* i.e. not in a section */
    padding: 0.5em;
    min-width: var(--mbox-minwidth);
    max-width: var(--mbox-maxwidth);
    width: 100%;
}
.synoRegularPageText {
    padding: 0.5em;
}
h1.synoRegularPageHeader {    
    margin-left: 0.5em;
    margin-top: 0.5em;
}

/* === SYNO ENGINE ========================== */
.synoInputContainer {
    display: flex;
    flex-direction: column;
    align-items:center;
    /* margin-bottom: 1em; */
}
#synoInputForm {
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;    
}
#synoInputLabel {
    font-variant: small-caps;    
    padding-top: 0.2em;
}
#synoInputField {
    flex: 1 1 auto;
    min-width: 1em;
    max-width: 12em;    
    font-weight: bold;    
}
#synoSubmitSyno {
    margin-left: 0.2em;
}
#synoInputLabel { font-size: 0.8em;}
#synoInputField { font-size: 0.8em; }
#synoSubmitSyno { font-size: 0.8em; }
#synoSource { font-size: 0.6em; }
 
.synoWelcomeContainer {
    margin-top: 1em;
    padding: 0 0.5em;
    max-width: var(--mbox-maxwidth);   
}    
 .synoWelcomeText{
    color: #406080;    
    display: inline-block;    
}    
.synoInstructions {    
    color: #406080;    
    display: inline-block;
    padding-top: 2em;
    padding-left: 0.5em;
    font-style: italic;
    max-width: var(--mbox-maxwidth);
    margin-bottom: 1em;
}   
h1.synoResults {    
    font-size: 0.5em;
    color: var(--mcol-offwhite);
    font-variant: small-caps;            
    margin:0;
}
.synoResultsNoWords {
    margin-top: 2em;
    margin-bottom: 2em;
    padding-left: 0.5em;    
    font-style: italic;
}
.synoResultsRelationContainer {
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;    
    margin-top: 0.5em;
    margin-bottom: 0.5em;
} 
h2.synoResultsRelationLabel { 
    color: #204060;
    font-weight: 600;
    font-size: 0.8em;
    font-variant: small-caps;            
    /* text-transform: uppercase; */    
    margin-top: -3px;
    margin-bottom: 0.5em;
}
.synoResultsTagContainer {    
    margin-top: 0.5em;
    margin-bottom: 1em;
}
h3.synoResultsTagLabel {    
    font-size: 0.8em;
    color: #204060;
}
/* add margin to words container when there is h3 */
h3.synoResultsTagLabel ~ .synoResultsSenseContainer {      
    padding-left: 0.5em;
}
.synoResultsSenseContainer {    
    margin-bottom: 0.7em;
}
.synoResultsSenseLabel {    
    
}
.synoResultsWordsContainer {  
}
.synoResultsWordItem {
    color: #406080;
}

.syno-tags { /* i.e. container */    
    margin-bottom: 1em;
}
.syno-tags h2 {
    color: #204060;
    font-variant: small-caps;
    font-size: 0.8em;
    padding: 0;
    margin-right: 1em;
    display: inline; 
}
.syno-tags ul {
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
    display: inline; 
}
.syno-tags li {
    margin: 0 0.5em 0 0.5em ; 
    font-variant: small-caps;
    font-size: 0.8em;
    padding: 0;
    display: inline;
}


/* === RESPONSIVE ELEMENT OVERRIDES ========================== */
@media (max-width: 400px) {
    .page-head.resp {  height: 2.6em; }
    .page-panel.resp { top: 2.6em; right: 0; left:auto; width: auto; display: none; bottom: auto; height: auto; z-index: 10; opacity: 0.9;    }
    .page-cont.resp {     top: 2.6em;  left: 0px; padding-left:0.5em; min-height: calc(100vh - 2.6em); }
    .titl-txt.resp  { font-size: 1.4em; left: 0.2em; }         
    .titl-txt :first-child  { display: none; }   /* hide mick */
    .theme-img.resp { max-width: 50%; height: auto; }        
    .menu.resp { display:flex; flex-direction: column; width: auto; padding: 0 0.5em;}     
    .menu-item.resp { font-size: 1.2em;  min-height: 1.4em; padding: 0.5em 0;}
    .menu-item-spacer.resp { height: 0.5em; }
    a.menu-item.resp.active { color: #ffffff; background-color: inherit; border-radius: 0px; margin-bottom: 0px; }
    .hambo.resp { display: block; padding: 2px; }
    .info.resp  { display: none; }
    .icons.resp { }    
    .popu-cont.resp { font-size: 0.6em; }    
    #synoInputLabel { font-size: 1.2em;}
    #synoInputField { font-size: 1.2em; max-width: 9em;}
    #synoSubmitSyno { font-size: 1.2em; }
    h2.synoResultsRelationLabel { font-size: 0.9em; }
    #content-ads-right { float: none; display: none; visibility: hidden; }
    .content-ads-noflicker-leaderboard { min-height: 92px; }
    .content-ads-noflicker-leaderboard-mobile { min-height: 102px; }
    #consentui { visibility: hidden; }
}
@media (min-width: 400px) and (max-width: 480px) {
    .page-head.resp {  height: 2.6em; }
    .page-panel.resp { top: 2.6em; right: 0; left:auto; width: auto; display: none; bottom: auto; height: auto; z-index: 10; opacity: 0.9;    }
    .page-cont.resp {     top: 2.6em;  left: 0px; padding-left:0.5em; min-height: calc(100vh - 2.6em);min-height: calc(100dvh - 2.6em); }
    .titl-txt.resp  { font-size: 1.4em; left: 0.2em; }         
    .theme-img.resp { max-width: 50%; height: auto; }        
    .menu.resp { display:flex; flex-direction: column; width: auto; padding: 0 0.5em;} 
    .menu-item.resp { font-size: 1.2em;  min-height: 1.4em; padding: 0.5em 0;}    
    .menu-item-spacer.resp { height: 1em; }
    a.menu-item.resp.active { color: #ffffff; background-color: inherit; border-radius: 0px; margin-bottom: 0px; }
    .hambo.resp { display: block; padding: 2px; }
    .info.resp  { display: none; }
    .icons.resp { }    
    .popu-cont.resp { font-size: 0.5em; }   
    #synoInputLabel { font-size: 1.2em;}
    #synoInputField { font-size: 1.2em; max-width:10em; }
    #synoSubmitSyno { font-size: 1.2em; }  
    h2.synoResultsRelationLabel { font-size: 0.9em; }
    #content-ads-right { float: none; display: none; visibility: hidden; }
    .content-ads-noflicker-leaderboard { min-height: 92px; }
    .content-ads-noflicker-leaderboard-mobile { min-height: 102px; }
    #consentui { visibility: hidden; }
}
@media (min-width: 480px) and (max-width: 600px) {
    .page-head.resp {  height: 2.6em; }
    .page-panel.resp { top: 2.6em; right: 0; left:auto; width: auto; display: none; bottom: auto; height: auto; z-index: 10; opacity: 0.9;    }
    .page-cont.resp {     top: 2.6em;  left: 0px; padding-left:0.5em; min-height: calc(100vh - 2.6em); min-height: calc(100dvh - 2.6em); }
    .titl-txt.resp  { font-size: 1.6em; left: 0.6em; }         
    .theme-img.resp { max-width: 50%; height: auto; }        
    .menu.resp { display:flex; flex-direction: column; width: auto; padding: 0 0.5em;} 
    .menu-item.resp { font-size: 1.2em;  min-height: 1.4em; padding: 0.5em 0;}    
    .menu-item-spacer.resp { height: 1em; }
    a.menu-item.resp.active { color: #ffffff; background-color: inherit; border-radius: 0px; margin-bottom: 0px; }
    .hambo.resp { display: block; padding: 2px; }
    .info.resp  { display: none; }
    .icons.resp { }    
    .popu-cont.resp { font-size: 0.5em; }    
    #content-ads-right { float: none; display: none; visibility: hidden; }
    .content-ads-noflicker-leaderboard { min-height: 92px; }
    .content-ads-noflicker-leaderboard-mobile { min-height: 102px; }
}
@media (min-width: 600px) and (max-width:900px) {
    .page-head.resp {  height: 3em; }
    .page-panel.resp {     top: 3em; right: 0; left:auto; width: auto; display: none; bottom: auto; height: auto; z-index: 10; opacity: 0.9; }        
    .page-cont.resp {     top: 3em;  left: 0; padding-left:0.5em; min-height: calc(100vh - 3em);min-height: calc(100dvh - 3em); }
    .titl-txt.resp  { font-size: 1.6em; left: 0.6em; }     
    .theme-img.resp { max-width: 75%; height: auto; }    
    .menu.resp { display:flex; flex-direction: column; width: auto; padding: 0 0.5em;} 
    .menu-item.resp { font-size: 1em;  min-height: 1.2em; padding: 0.5em 0;}    
    .menu-item-spacer.resp { height: 1em; }
    .hambo.resp { display: block; padding: 4px; } 
    .info.resp  { display: none; }
    .icons.resp { }        
    .popu-cont.resp { font-size: 0.6em; }        
    .content-ads-noflicker-leaderboard { min-height: 92px; }
    .content-ads-noflicker-leaderboard-mobile { min-height: 102px; }
}
@media (min-width: 900px) and (max-width:1200px) {
    .page-head.resp {  height: 3.2em; }
    .page-panel.resp {     top: 3.2em; left: 0; height:1.8em; width: 100%; display: block!important; }
    .page-cont.resp {     top: 5em;  left: 0; padding-left:1em; min-height: calc(100vh - 5em); min-height: calc(100dvh - 5em); }
    .titl-txt.resp  { font-size: 1.8em; left: 0.6em; }
    .theme-img.resp { max-width: 100%; height: auto; }  
    .menu.resp { display:flex; flex-direction: row; width: auto ; padding: 0 1em; }    
    .hambo.resp { display: none; } 
    .info.resp  { display: block; }
    .icons.resp {  }    
    .popu-cont.resp { font-size: 0.8em; }        
    .content-ads-noflicker-leaderboard { min-height: 92px; }
    .content-ads-noflicker-leaderboard-mobile { min-height: 102px; }
}
@media (min-width: 1200px) {
    .page-head.resp {  height: 3.6em; }
    .page-panel.resp {     top: 3.6em; left: 0px; height: 2em; width: 100%; display: block!important;}
    .page-cont.resp {     top: 5.6em;  left: 0px; padding-left:1em; min-height: calc(100vh - 5.6em); min-height: calc(100dvh - 5.6em);}
    .titl-txt.resp  { font-size: 2.4em; left: 0.6em; }
    .theme-img.resp { max-width: 125%; height: auto; }
    .menu.resp { display:flex; flex-direction: row; width: auto ; padding: 0 1.5em; }
    .hambo.resp { display: none; } 
    .info.resp  { display: block; }
    .icons.resp {  }    
    .popu-cont.resp { font-size: 1em; }    
    .content-ads-noflicker-leaderboard { min-height: 92px; }
    .content-ads-noflicker-leaderboard-mobile { min-height: 102px; }
}
@media (min-width: 1600px) {  /* wallpaper size */
    .page-head.resp {  height: 3.6em; }
    .page-panel.resp {     top: 3.6em; left: 0px; height: 2em; width: 100%; display: block!important;}
    .page-cont.resp {     top: 5.6em;  left: 0px; padding-left:1.5em; min-height: calc(100vh - 5.6em); min-height: calc(100dvh - 5.6em); }
    .titl-txt.resp  { font-size: 2.4em; left: 0.6em; }
    .theme-img.resp { max-width: 125%; height: auto; }                
    .menu.resp { display:flex; flex-direction: row; width: auto ; padding: 0 1.5em; }    
    .hambo.resp { display: none; } 
    .info.resp  { display: block; }
    .icons.resp {  }    
    .popu-cont.resp { font-size: 1em; }    
    .content-ads-noflicker-leaderboard { min-height: 92px; }
    .content-ads-noflicker-leaderboard-mobile { min-height: 102px; }

    /* only real large screens get bigger containers */
    section { max-width: 1000px; }
    .synoWelcomeContainer { max-width: 1000px;}
    .synoInstructions { max-width: 1000px;}
    .synoRegularPageContainer { max-width: 1000px;}
    #content-ads-bottom { max-width: 1000px; }    
}




/* === RESPONSIVE ADS STYLING ========================== */

.adsgoogle-resp-wide { display: block; width: 728px; }
@media (max-width: 599px)  { .adsgoogle-resp-wide { width: 320px; } }
@media (min-width: 600px)  { .adsgoogle-resp-wide { width: 468px; } }
@media (min-width: 900px)  { .adsgoogle-resp-wide { width: 728px; } }
@media (min-width: 1200px) { .adsgoogle-resp-wide { width: 970px; } }

/* no google skyscrapers on small ui: */
.adsgoogle-resp-right { display: block; width: 120px; }
@media (max-width: 599px)  { .adsgoogle-resp-right { display: none; width: 100px; } }
@media (min-width: 600px)  { .adsgoogle-resp-right { display: block; width: 120px; } }
@media (min-width: 900px)  { .adsgoogle-resp-right { display: block; width: 120px; } }
@media (min-width: 1200px) { .adsgoogle-resp-right { display: block; width: 160px; } }

/* no BOL skyscrapers on small ui: */
.bol-resp-right { display: block:  }
@media (max-width: 599px)  { .bol-resp-right { display: none; } }