/* Tio ĉi estas reverkita stilfolio por artikolo (kun faldebloj ktp.), se ĝi prezentiĝas ekster la 
kadro, de referencita el la HTML-dosiero de artikolo. Ene de la kadro ni uzas artikoloj.css, kiu jam
iom plu evoluiĝis. Por renovigi la apartan CSS ni devus rekompili ĉiujn artikoloj per XSL por uzi alian
eldonon ol 1b! - tio provizore ne necesas, sed eble iam estos farenda */

/* piktogramoj */

.i_kash_ch {
    background: 
      url('../smb/i_kash_ch.png')
      no-repeat;	
    background-size: contain;
}
.i_kash {
    background: 
    url('../smb/i_kash.png')
    no-repeat;	
    background-size: contain;
}
.i_mkash_ch {
    background: 
    url('../smb/i_mkash_ch.png')
    no-repeat;	
    background-size: contain;
}
.i_mkash {
    background: 
    url('../smb/i_mkash.png')
    no-repeat;	
    background-size: contain;
}


/* HTML-elementoj */

BODY {
    background: #F5F5D5; 
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 
    BODY { font-size: 112.5% }
}

H1 {color: #000000; font-size: large}
H2 {color: #000000; 
    font-size: 110%; 
    background: #eab530;
    border: 1px solid darkgoldenrod;
    border-top-left-radius: .7em;
    padding-left: 1ex;
    padding-top: 0.5ex;
    padding-bottom: 0.5ex;
    margin-top: 2ex;
}

H3 {font-size: 90%; border-top-width: 2px; border-top-style: solid; 
  border-top-color: #E0E0A0; padding-top: 0.5ex}

  /* ni limigu tion al larĝaj ekranoj,
  por pli malvastaj la spacoj inter la vortoj tro kreskus... */
DD {text-align: justify}

HR {border-style: dotted; border-color: black; 
  border-top-width: 2px;
  border-bottom-width: 0px;
  margin-top: 4ex}
DT.subart { 
    border-top-style: dotted; 
    border-width: 2px; 
    padding: 1ex;
    margin-top: 2ex; 
    margin-bottom: 1ex; 
    font-weight: bold; 
}

header, footer, article section {
    padding-right: 2.2em;
}

section.drv {
    width: 100%;
}

/* ni provas ordigi difinojn ktp. flank-al-falnke kun la listo de tradukoj */
section.drv>div, section.subart>div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 1em;
}

div.drv-enh, div.subart-enh, dl.tradukoj {
    max-width: 50em;
}

div.drv-enh dl, div.subart-enh dl {
    display: grid;
    grid-template-columns: 2em auto;
    grid-gap: 0.5em;
    margin-block-start: 0;
    margin-block-end: 0;
}

div.drv-enh dt, div.subart-enh dt {
    grid-column-start: 1;
}
  
div.drv-enh dd, div.subart-enh dd {
    grid-column-start: 2;
    margin-left: 0.5em;
}

div.drv-enh dl span, div.subart-enh dl span {
    grid-column: 1 / span 2;
}

div.fontoj {
    margin: 1em 3em;
    border-top: 1px solid #E0E0A0; 
}

section.admin {
    margin-top: 1em;
}

section.tradukoj {
    margin-top: 0.5em;
    margin-left: 2em;
    margin-right: 4em;

    display: flex;
    justify-content: flex-end;
}

dl.tradukoj {
    height: fit-content;
    height: -moz-fit-content;
    height: -webkit-fit-content;
    width: fit-content;
    width: -moz-fit-content;
    width: -webkit-fit-content;
    /*
    display: grid;    
    grid-template-columns: auto auto;
    */

    padding-left: 0.5em; 
    padding-right: 0.5em; 
    border-left: 2px solid #E0E0A0; 
    border-right: 2px solid #E0E0A0; 
}  

dl.tradukoj {
    display: grid;
    grid-template-columns: max-content auto;
    margin-block-start: 0;
    margin-block-end: 0;
}
  
dl.tradukoj dt {
    grid-column-start: 1;
}
  
dl.tradukoj dd {
    grid-column-start: 2;
}


dl.tradukoj span[lang='bo']
{
    font-size: 150%;
    line-height: 120%;
    vertical-align: text-top;
}

dl.tradukoj span[lang='sgn'] svg {
    border: 1px solid #cccccc; 
    border-radius: 3px;
    background: lightgoldenrodyellow;
    padding: .2em;
    margin-left: 0.1em;    
}

dl.tradukoj span[lang='zh'], 
dl.tradukoj span[lang='ja'] {
    font-size: 120%;
    /*line-height: 120%;
    vertical-align: text-top; */
}

dl.tradukoj span[lang='zh'] .pr 
{   /* Pinjino en normala grandeco: 83.33 * 120 = 100 */
    font-size: 83.33%;
}

dl.tradukoj .lng {
    color: gray;     
}

/*A {text-decoration: none}*/
A:link {color: blue}
A:visited {color: blue}
A:hover {color: red; background-color: #d5d5a5}
SUP {font-size: 75%}

/* ekzemploj */
.ekz {color: #303030}
.rimekz {font-style: italic}
A.ekz:link {text-decoration: underline; color: #303030}
A.ekz:visited {text-decoration: underline; color: #303030}
A.ekz:active {text-decoration: underline; color: silver}

/* difinoj */
.drvdif {color: black}
.sncgrpdif {color: black}
.dif {color: black}
A.dif:link {text-decoration: underline; color: black}
A.dif:visited {text-decoration: underline; color: black}
A.dif:active {text-decoration: underline; color: gray}

/* rimarkoj */
.rim {color: #000060}
A.rim:link {text-decoration: underline; color: #000060}
A.rim:visited {text-decoration: underline; color: #000060}
A.rim:active {text-decoration: underline; color: blue}

/* referencoj */
.ref {color: #600000}
A.ref:link {text-decoration: underline; color: #600000}
A.ref:visited {text-decoration: underline; color: #600000}
A.ref:active {text-decoration: underline; color: red}

/* bildoj */
A.bld:link {text-decoration: underline; color: black}
A.bld:visited {text-decoration: underline; color: black}
A.bld:active {text-decoration: underline; color: gray}

/* klarigo */
.klr {font-style: normal}
A.klr:link {text-decoration: underline; color: #775533}
A.klr:visited {text-decoration: underline; color: #775533}
A.klr:active {text-decoration: underline; color: #775533}

/*tradukoj*/
.trd_ref {color: #666666}
p.trd_ref {text-align: right}
A.trd_ref:link {text-decoration: underline; color: #666666}
A.trd_ref:visited {text-decoration: underline; color: #666666}
A.trd_ref:active {text-decoration: underline; color: black}
.trd {color: #104040}
.rimtrd {font-style: italic}
.diftrd {font-style: italic}
.trdeo {color: black; font-weight: bold}
.trdnac {color: #104040}
A.trdeo:link {text-decoration: underline; font-weight: bold; color: black}
A.trdeo:visited {text-decoration: underline; font-weight: bold; color:
black}
A.trdeo:active {text-decoration: underline; font-weight: bold; color: gray}


/* fontindikoj en la teksto */
.fnt {font-style: normal}
A.fnt:link {text-decoration: underline; color: #303030}
A.fnt:visited {text-decoration: underline; color: #303030}
A.fnt:active {text-decoration: underline; color: green}

.fntref {font-size: small; font-style: normal; vertical-align: text-top; font-stretch: extra-condensed}
A.fntref:link {text-decoration: underline; color: #303030}
A.fntref:visited {text-decoration: underline; color: #303030}
A.fntref:active {text-decoration: underline; color: green}

sup.ofc { margin-right: 0.7ex; }

/* fontindikaj piednotoj */
.fontoj {color: 303030; font-size: small}
.notoj {color: 303030; font-size: small}
/* notoj pri mankoj */
.mankoj {font-family: monospace; font-size: small}
.mankoj A:link {text-decoration: underline; color: #303030}
.mankoj A:visited {text-decoration: underline; color: #303030}
.mankoj A:active {text-decoration: underline; color: green}

/* redaktolinio malsupre de la artikolo */
.redakto {color: #104040}
A.redakto:link {text-decoration: underline; color: black}
A.redakto:visited {text-decoration: underline; color: black}
A.redakto:active {text-decoration: underline; color: gray}

.flago { border-color: #cccccc; border-width: 1px;  border-style: outset}
.center { text-align: center; }

EMBED.svg { border-color: #cccccc; border-width: 1px; background: #ffffee; border-style: solid; padding: 2px; margin: 0.5em} 
OBJECT.svg { border-color: #cccccc; border-width: 1px; background: #ffffee; border-style: solid; padding: 2px; margin: 0.5em} 
IMG.svg { border-color: #cccccc; border-width: 1px; background: #ffffee; border-style: solid; padding: 2px; margin: 0.5em} 
IMG.bld { border-color: #cccccc; border-width: 1px; background: #E0E0A0; border-style: solid; padding: 2px; margin: 0.5em} 
IMG.fak { height: 1.5em; vertical-align: bottom; }

IMG.tez { height: 1.2em; padding: 1px; vertical-align: bottom;
	  border-radius: 20%; border: 2px outset transparent}
A IMG.tez:focus {background-color:  #c0c090; border: 2px outset gray}
A IMG.tez:hover {background-color:  #c0c090; border: 2px outset gray}
A IMG.tez:active {background-color:  #a0a070; border: 2px inset gray}

/*
A.tez-ref { text-decoration: none; baseline-shift: super; color: darkgreen; font-weight: normal; padding: 0.1em; border-radius: 40%}
A.tez-ref:visited { background-color: transparent; color: darkgreen}
A.tez-ref:focus {background-color:  #c0c090; color: brown}
A.tez-ref:hover {background-color:  #c0c090; color: brown}
A.tez-ref:active {background-color:  #a0a070; color: coral}

IMG.viki { height: 1.2em; vertical-align: bottom;
	   border-radius: 20%; border: 2px outset transparent}
A IMG.viki:focus {background-color:  #c0c090; border: 2px outset gray}
A IMG.viki:hover {background-color:  #c0c090; border: 2px outset gray}
A IMG.viki:active {background-color:  #a0a070; border: 2px inset gray}
*/

a.tez-ref {
    /* kaŝu malnovajn tezaŭro-ligilojn */
    display: none;
}

h2 a[href^="http://eo.wikipedia.org"] {
    /* kaŝu malnovajn Vikipedio-ligilojn */
    display: none;
}

.piedlinio {color: #104040; text-align: center}
.kuketoaverto { position: fixed; bottom: 0px; left: 5%; width: 90%; min-height:7em;
		background-color: #c0c090; margin: 0; display: none;
		border-radius: 5px 5px 0 0; border: 1px solid #303030; border-bottom: none
	      }
.kuketoaverto P { text-align:center }
.kuketoaverto FORM { text-align:center }

/* formuloj */
.frm { font-style: normal }
.frm_am { font-size: 90% }

.nom, .nac {
    letter-spacing: .05em;
}

.bld_atrib { font-size: 80%; color: gray }
.bld_atrib:link { font-size: 80%; color: gray }
.bld_atrib:visited { font-size: 80%; color: gray }
.bld_atrib:focus { font-size: 80%; color: gray }
.bld_atrib:hover { font-size: 80%; color: gray }
.bld_atrib:active { font-size: 80%; color: gray }


/* tildoj en ekzemploj */
.ekztld { font-weight: bold } /*text-decoration: underline solid #775533} */

.kashilo, .etendilo, .pref {
    border: 1px solid #E0E0A0;
    box-shadow: none;
}
.kashilo:hover, .etendilo:hover, .pref:hover {
    background: #FFEEAA;
    border: 1px solid #775533;
}    
.kashilo:active, .etendilo:active, .pref:active {
    background: #E8C888;
    border: 1px solid #775533;
}

.kasxita { display: none !important; }

i.ekz { display: block; margin-left: 1.6em; text-indent: -1.2em; text-align: left }
i.ekz::before, span.ekztrd::before { content: "\00a0•\00a0" }


.overlay {
    position: absolute;
    z-index: 100;
    max-width: 90%;     
    overflow-x: auto;
    right: 0.5em;
    top: 2.5em;
    font-weight: normal;
    font-size: 1rem;
    background-color: #F5F5D5;

    padding: 0.5em;
    border: 2px dotted green;
    box-shadow: 5px 5px 10px;
}

.preferoj {
    display: grid;
    grid-template-columns: auto auto;
    gap: 0.2em 0.2em;
    width: fit-content;
    width: -moz-fit-content;
    width: -webkit-fit-content;
}
.preferoj H3 {
    margin-bottom: 0;
}
.ix_literoj {
    grid-column-start: 1;
    grid-column-end: 3;
}

.ix_literoj span {
    padding: 0 .3em;
    border-left: 2px solid #E0E0A0;
}
.ix_literoj > label {
    font-weight: bold;
    text-align: right;
    padding: .1em;
}
.ix_literoj > label::after {
    content: ":\00a0"
} 
.ix_literoj input {
    display: none;
} 
.ix_literoj input:checked + label {
    border-radius: 2px;
    padding: .1em;
    background: goldenrod;
} 

#pref_lng {
    font-weight: bold;
    list-style: none; /* Remove list bullets */
    padding-left: 0;
}

#alia_lng {
    list-style: none; /* Remove list bullets */
    padding-left: 0;
}

#pref_lng li, #alia_lng li {
    background: #E0E0A0;
    margin: .1em;
    padding: .1em .5em;
    border-radius: 2px;
}

#pref_lng li:before {
    content: "\2296"; /* Insert content that looks like bullets */
    padding-right: .5em;
}   

#alia_lng li:before {
    content: "\2295"; /* Insert content that looks like bullets */
    padding-right: .5em;
}                           

#pref_lng li:hover, #alia_lng li:hover {
    background-color: #FFEEAA;
}              

#pref_lng li:active, #alia_lng li:active {
    background-color: #E8C888;
    ;
}    

#kash_btn {
    position: absolute;
    right: .75em;
    /*bottom: 50%;
    margin-bottom: -1rem;*/
    top: 80vh;
    display: flex;
    flex-direction: column;
}

#kash_btn BUTTON {
    height: 2rem;
    width: 1.5rem;
    margin: .3em .2em;
    background-size: 80%;
    background-position: center; 

    /*border: 1px solid gray;*/
    box-shadow: 1px 1px 3px gray;
    background-color: khaki;

    /* border: none; */
    border: 1px solid darkgoldenrod;
    border-radius: .4em;
}

article BUTTON {
    height: 1.5rem;
    margin: .1em .2em;
    /*border: 1px solid gray;*/
    box-shadow: 1px 1px 3px gray;
    background-color: #E0E0A0;

    /* border: none; */
    border: 1px solid #E0E0A0;
    border-radius: .5em;
}


article BUTTON:hover, #kash_btn BUTTON:hover {
    background-color: #FFEEAA;
    border: 1px solid #775533;
}    
article BUTTON:active,#kash_btn BUTTON:active {
    background-color: #E8C888;
    border: 1px solid #775533;
}

.icon_btn {
    height: 1.2rem;
    width: 1.2rem;
    /*display: inline-block;*/
    float: right;
    color: darkgreen;
    /* padding: 1rem 2rem; */
    padding: .2em;
    margin: .2em;
    text-decoration: none;

    /*box-shadow: 1px 1px 2px;*/
    box-shadow: none;
    /*font: inherit;*/
    font-size: 1rem;
    /*font-family: sans-serif;
    font-size: 1rem; */
    cursor: pointer;
    text-align: center;
    transition: background 250ms ease-in-out, 
                transform 150ms ease;
    -webkit-appearance: none;
    -moz-appearance: none;
}

H2 .icon_btn {
    float: right; 
    border: none;
    height: 1rem;
    width: 1rem;
    margin-bottom: -.06rem;
}

H2 .icon_btn:hover, H2 .icon_btn:active, H2 .icon_btn:focus {
    border: none;
}


dt.pli, .ekz.pli, a.pli {
    font-style: normal;
    color: #104040;
    border: none;
}

.pref, a.pref {
    font-style: oblique;
    color: #104040;
    border: none;
}

.square_min {
    background-color: black;
    font-size: 0.2em;
    height: 0.2em;
}
.square_mid {
    background-color: black;
    font-size: 0.6em;
    height: 0.6em;
}
.square_max {
    background-color: black;
    font-size: 1em;
    height: 1em;
}


.art-hist td:first-child {
    /*font-family: "Lucida Console", Monaco, monospace; */
    white-space: nowrap;
    padding-right: .5em;
}

.art-hist td:nth-child(2) {
    /*font-family: "Lucida Console", Monaco, monospace;*/
    font-family: monospace;
    white-space: nowrap;
    padding-right: .5em;
}

.art-hist td:nth-child(3) {
    font-style: italic
}