@import url("piktogram-1b.css");

/* 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 .lng {
    color: gray; 
    /* margin-right: 0.5em;*/
}
/*
.trd h3 { 
    display: inline;
    border-style: none;
    font-weight: normal;
    color: gray; padding-right: 0.7em; 
}
.trd h3::after { content: ": " }
div.trd_lng_2 { display: inline; line-height: 135%;  }
*/

/*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;
}


a.pli, a.pref {
    font-style: oblique;
    text-decoration: none;
    color: darkgreen;
    background: khaki;
    border-color: darkgoldenrod;
    border-radius: .5em;
    padding: .1em .3em;
    margin-bottom: .1em;
}

.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
}