/* stylesheet for WAIE - 2026-10 Talespinner µ
================================================================================*/

/* variables 
----------------------------------------------------------------------------------------------------------------------*/
:root {
    /* colour */
    --red:		#aa3b3c;
    --redMid:           #d28484;
    --redPale:          #f1d9d9;
}

/* global
---------------------------------------------------------------------------------------------------------------------*/
body { margin: 25px 25px 0 25px; background-color: white; font-family: Verdana, Geneva, Arial, 
    Helvetica, sans-serif; font-size: 16px; }           /* base font size in px; all others relative */
h1 img { float: left; width: 294px; height: 56px; max-width: 100%; }
h2 { font-weight: normal; font-size: 140%; padding-bottom: 0.5ex; border-bottom: 1px solid var(--red); }
p { line-height: 1.4; }
a { color: var(--red); text-decoration: none; }
a:hover { text-decoration: underline; }
figure { margin: 1em 0; }
figcaption { font-size: 85%; font-style: italic; color: var(--redMid); }
table { border-collapse: collapse; }
input:focus { outline: none; }
input::placeholder { color: var(--redMid); }

/* template - default
---------------------------------------------------------------------------------------------------------------------*/
#wrap { width: 840px; margin: auto; }
#navBase { float: right; }
#navBase p { margin: 1ex 0; text-align: right; }
#navBase p:first-child { font-weight: bold; } 

#srchMain { clear: both; padding: 1.5em 0; }
#srchUnit { position: relative; width: fit-content; }
#srchBox { width: 360px; font-size: 100%; padding: 2px; }
#srchClear { display: none; position: absolute; z-index: 10; top: 50%; transform: translateY(-50%); 
    right: 20px; width: 20px; height: 20px; background: url( "/images/btnClear.png" ); cursor: pointer; }
nav#local { clear: both; margin-bottom: 1em; }
#srchTypeCue { margin: 0; }
#srchType { clear: left; margin-top: 0; margin-bottom: 1ex; padding: 4px; background: var(--redPale ); }
#srchType li { float: left; margin: 1em 1ex; list-style-type: none; font-size: 80%; }
#srchType li a { background: var(--red); padding: 0.5ex 1em; border: 2px solid var(--red); 
    border-radius: 32px; color: white; }
#srchType::after { content: ""; clear: both; display: block; }
#local input { margin-right: 1ex; }

footer { clear: both; font-size: 85%; border-top: 1px solid gray; }
#farm { display: none; }

/* template - mobile
---------------------------------------------------------------------------------------------------------------------*/
#ham, #hamClose	{ position: absolute; top: 68px; right: 26px; cursor: pointer; }
#ham { display: none; z-index: 20; }
#navMob { display: none; z-index: 20; position: absolute; max-width: 100%; top: 0; right: 0; bottom: 0; 
    left: 0; background: white; padding: 40px; font-size: 120%;}
#navMob ul { margin-top: 120px; }
#navMob li { margin-bottom: 1em; }

/* objects
---------------------------------------------------------------------------------------------------------------------*/
/* home page */
#definition, #contxt { margin-bottom: 1em; }
#definition { float: right; width: 500px; }
#definition p.small { margin: 1ex 0; }
#contxt { float: left; width: 300px; margin-right: 40px; }
#resCue { display: none; text-align: center; font-style: italic; }
#contxt h3 { font-size: 100%; font-style: italic; }
#contxt ul { padding-left: 1em; }
#contxt li { margin-bottom: 1ex; padding-left: 1ex; }

/* cuisines page */
#cuisines a { font-weight: bold; }

/* search help page */
#contentSearch img { width: 75px; height: 60px; float: left; margin: 1ex 20px 20px 0; } 
#contentSearch h3, #contentSearch p { margin: 0; }
#contentSearch h3 { font-size: 100%; margin-top: -0.5ex;}
#contentSearch p { margin-bottom: 2em; }

/* languages page */
#tabLang { width: 100%; }
#tabLang tr:hover { background: var(--redPale); }
#tabLang tr td:nth-child(2) { text-align: right; }
#tabLang td { padding: 4px 1ex; border-bottom: 1px solid var(--redPale); }

/* about page */
#contentAbout h3 { margin: 2em 0 1ex 0; } 
#contentAbout li { margin-bottom: 1ex; }
#completionTab { width: 180px; margin-left: 20px; }
#completionList { width: 100%; margin-left: 20px; }
#completionList p { margin: 2px 0;}

/* advanced search page */
#contentAdvanced_search h3 { font-size: 100%; margin-top: 2em; }

/* open
---------------------------------------------------------------------------------------------------------------------*/
.floatR { float: right; }
.mT2 { margin-top: 2em; }
.right { text-align: right; }
.s70 { font-size: 70%; }
.small { font-size: 90%; }
.small p { margin: 0.8ex 0; line-height: 1.1; }
.big { font-size: 140%; }
.slim { width: 640px; margin: auto; }
.picture { border: 1px solid black; }
.paging { margin: 2em 0; }
.paging a { border: 1px solid var(--red); padding: 1ex 1em; border-radius: 32px; }

/* responsive
---------------------------------------------------------------------------------------------------------------------*/
@media( max-width: 840px ) {
    /* global */
    body { font-size: 18px; }
    
    /* template nav */
    #ham { display: block; }
    
    /* template: search */
    nav#local { padding: 0; }
    #navBase { display: none; }
    #srchMain { /*padding: 0; */}
    #srchUnit, #srchBox { margin: 5px 0; width: calc( 100% - 8px ); font-size: 120%; }
    #srchUnit { display: block; } 
    #srchBox { padding: 4px; }
    #srchClear { right: 6px; }
    #srchGo { font-size: 120%; }
    #srchTypeCue { /*margin-top: 1.5em; margin-bottom: 0.5em;*/ }
    #srchType { margin-top: 0; margin-bottom: 0.5em; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; }
    #srchType a span { display: none; }
    
    /* template: content */
    #resCue { display: block; }
    #wrap, #definition, #contxt, section.slim { width: 100%; }
    #definition, #contxt { float: left; margin: 0; }
    #definition { margin-bottom: 2em; }
    #contxt { clear: both; }
    .picture { max-width: 100%; }
}