body {
    margin: 0;
    padding: 2em;
    background-color: #68889f;
    color: #aaa;
    color: white;
    font-size: 133%;
    font-synthesis: none;
}
.hide {
    display: none;
}
.hide-hu [lang = "hu"] {
    display: none;
}
.hide-hu .inline[lang = "hu"],
.hide-hu .inline
{
    display: inline;
}
.hide-hu [lang = "hu"] + br {
    display: none;
}
.hide-hu .show {
    display: inherit;
}

/*
#de, #en, #hu {
    margin-top: 3em;
}
#de {
    border-top: 1px solid #f4dc82;
}
#en {
    border-top: 1px solid #a6d4f4;
}
#hu {
    border-top: 1px solid #a6f4a4;
}
*/

em {
    font-weight: normal;
    font-style: normal;
}

.asl {
    color: #f48e82;
}

.speech {
    font-style: italic;
}

h1, h3 { 
    font-weight: 700;
}

h1 {
    margin-top: 0;
    margin-bottom: 0;
}

.withSC {
    font-weight: 400;
    font-style: normal;
}

h1, h2, p, ul {
    /*border: 1px dotted orange;*/
}

h2 {
    margin-top: 1.33em;
    margin-bottom: 0;
    font-weight: 700;
}

.newSec {
    margin-top: 3em;
}

aside + h2 {
    margin-top: 0.5em;
}

p, blockquote, ul, .para {
    margin-top: 0.5em;
}

p, ul, .para {
    font-size: 110%;
}

.para {
    margin-bottom: 2em;
}

.text, dl {
    /*line-height: 1.6;*/
    max-width: 40em;
}

span.text {
    display: block;
}

.max1200px {
    max-width: 1200px;
}
.max600px {
    max-width: 600px;
}

.langJumps {
}
a {
    text-decoration: none;
    color: white;
    border-bottom: 1px solid #ccc;
}
a.more {
    font-style: normal;
    font-size: 90%;
    font-weight: 700;
    border-bottom: none;
}
a::before, a::after {
    color: ivory;
}
a::before {
    content: "→ ";
}
a.plain::before {
    content: "";
}
.new::before, 
a.soon::before, 
.pros::before, 
.cons::before, 
.tip::before, 
.noch a::before, .auch a::before, .eher a::before, .weiter a::before, .ebenda a::before,
dt::before, dd::before,
[data-prefix]::before,
.prefix
{
    font-style: normal !important;
    font-variant-caps: small-caps;
    font-weight: 600;
    font-size: 90%;
    color: white !important;
}
[data-prefix]::before {
    content: attr(data-prefix);
    padding-right: 0.2em;
}

[lang=de] .new::before {
    content: "neu ";
}
[lang=en] .new::before {
    content: "new ";
}
[lang=hu] .new::before {
    content: "új ";
}
[lang=de] a.new::before {
    content: "neu → ";
}
[lang=de] a.new.plain::before {
    content: "neu ";
}
[lang=en] a.new::before {
    content: "new → ";
}
[lang=en] a.new.plain::before {
    content: "new ";
}
[lang=hu] a.new::before {
    content: "új → ";
}
[lang=hu] a.new.plain::before {
    content: "új ";
}

[lang=de] a.soon::before {
    content: "bald → ";
}
[lang=en] a.soon::before {
    content: "soon → ";
}
[lang=hu] a.soon::before {
    content: "nemsokára → ";
}

dd {
    margin-left: 0;
}
dd::before {
    content: "• ";
}
[lang=de] .pros::before {
    content: "Warum wir es mögen: ";
}
[lang=en] .pros::before {
    content: "Why we love it: ";
}
[lang=hu] .pros::before {
    content: "";
}
[lang=de] .cons::before {
    content: "Nicht so toll: ";
}
[lang=en] .cons::before {
    content: "Not so hot: ";
}
[lang=hu] .cons::before {
    content: "";
}

.noch a[lang]::before {
    content: "";
}

.noch a[lang]:first-child::before, 
.auch a[lang]::before, 
.weiter a[lang]::before,
.eher a[lang]::before,
.ebenda a[lang]::before {
    display: inline-block;
    text-align: right;
    padding-right: 0.3em;
    width: 5em;
}

.noch a[lang=de]:first-child::before {
    content: "noch:";
}
.noch a[lang=en]:first-child::before {
    content: "more:";
}
.noch a[lang=hu]:first-child::before {
    content: "még:";
}

.auch a[lang=de]::before {
    content: "siehe auch:";
}
.auch a[lang=en]::before {
    content: "also see:";
}
.auch a[lang=hu]::before {
    content: "";
}

.weiter a[lang=de]::before {
    content: "weiter:";
}
.weiter a[lang=en]::before {
    content: "next:";
}
.weiter a[lang=hu]::before {
    content: "tovább:";
}

.eher a[lang=de]::before {
    content: "davor:";
}
.eher a[lang=en]::before {
    content: "earlier:";
}
.eher a[lang=hu]::before {
    content: "ezelőtt:";
}

.ebenda a[lang=de]::before {
    content: "ebenda:";
}
.ebenda a[lang=en]::before {
    content: "also there:";
}
.ebenda a[lang=hu]::before {
    content: "";
}

.next a::after, .prev a::before
{
    font-style: normal !important;
    font-weight: 700;
    font-size: 90%;
    color: white !important;
}
.next a::before {
    content: "";
}
.next a::after {
    content: " →";
}
.prev a::before {
    content: "← ";
}

a.ext::before {
    content: "↗ ";
}
a.mail::before {
    /*content: "↘ ";*/
    /*
    font-family: "FontAwesome";
    content: "\f003 ";
    */
    content: "📩️ ";
    content: "📨️ ";
    content: "✉️ ";
    color: white;
    font-weight: normal;
    font-style: normal;
}
a.more::before {
    content: "↓ ";
}
a.more::after {
    /*content: " ↓";*/
    content: " ";
}
a:visited {
    border-bottom-color: #999;
}
[lang = "en"] a:link {
    border-bottom-color: #85a9c3;
}
[lang = "en"] a:visited {
    border-bottom-color: #7191a7;
}
[lang = "de"] a:link {
    border-bottom-color: #cfc290;
}
[lang = "de"] a:visited {
    border-bottom-color: #a19d8f;
}

a:hover, a.more:hover {
    border-bottom: 1px solid ivory !important;
}
[lang = "de"], [lang = "de"] a {
    color: #f4dc82;
}
[lang = "en"], [lang = "en"] a {
    color: #a6d4f4;
}
[lang = "hu"], [lang = "hu"] a {
    color: #a6f4a4;
}
[lang = "zxx"], [lang = "zxx"] a {
    color: white;
}
.de, .de a, a.de, a[lang=de] {
    color: #f4dc82;
}
.en, .en a, a.en, a[lang=en] {
    color: #a6d4f4;
}
.hu, .hu a, a.hu, a[lang=hu] {
    color: #a6f4a4;
}
a.img {
    border-bottom: none !important;
}
a.img::before {
    content: none;
}

.hilite {
    font-weight: 700;
}

blockquote {
    margin: 0;
    background-color: ivory;
    border-color:#ccc;
    float: right;
    color: #222;
}

blockquote p {
    padding-left: 1em;
    padding-right: 1em;
}

.ipa {
    font-family: sans-serif;
    font-weight: normal;
    font-size: 80%;
}

ol.footnotes {
    font-size: 80%;
    font-style: normal;
    padding-left: 1.4rem;
}
ol.footnotes::before {
    display: block;
    width: 10rem;
    border-bottom: 1px solid #85a9c3;
    content: " ";
    margin-left: -1.4rem;
}

ul {
    list-style: none;
    padding: 0;
}

li {
    margin-bottom: 0.3em;
}

.known {
    visibility: hidden;
}

figure {
    padding: 0;
    margin: 2em 0;
    display: inline;
}

.gallery figure {
    margin: 0;
    display: inline;
}

img {
    max-width: 100%;
    margin: 0;
    padding: 0;
}
img.max50 {
    max-width: 50%;
}
img.max40 {
    max-width: 40%;
}
img.max40_9 {
    max-width: 40.9%;
}
img.max33 {
    max-width: 33.33%;
}
img.max25 {
    max-width: 25%;
}
img.max20 {
    max-width: 20%;
}
img.max18_2 {
    max-width: 18.2%;
}

figure.katicas::before {
    display: block;
    background-color: snow;
    content: "Mein Foto · my photo · az én képem";
    padding-left: 1em;
    padding-bottom: 0.2em;
    color: #68889f;
    font-style: italic;
    box-sizing: border-box;
    font-weight: 600;
}
figure.katicas img {
    border-left: 1em solid snow;
    border-right: 1em solid snow;
    border-bottom: 1em solid snow;
    box-sizing: border-box;
    position: relative;
}

.clear {
    clear: both;
}

.left {
    float: left;
    margin-right: 2em;
}

.right {
    float: right;
    margin-left: 2em;
}
.rightMost {
    float: right;
    margin-left: 2em;
    clear: right;
}
.padDown {
    padding-bottom: 0.5em;
}
.captionBlock {
    clear: both;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0.5em;
}

.rightAlign {
    display: block;
    text-align: right;
}

.photo {
    border: 5px solid white;
    box-shadow: 10px 10px 5px #666;
}

.polaroid {
    background-color: white;
    color: #333;
    font-size: 90%;
    border: 10px solid white;
    box-shadow: 20px 20px 10px #666;
    padding: 0;
    margin-bottom: 2em;
}

.port300, .port300 img {
    width: 300px;
}

.port266, .port266 img {
    width: 266px;
}

.port200, .port200 img {
    width: 200px;
}

.translated, .hovertext .def {
    border-bottom: 1px dashed white;
}
.translated:hover {
    border-bottom: 1px dotted white;
    border-bottom: none;
}
.translated .hov, .hovertext .hov {
    display: none;
}
.translated:hover .hov, .hovertext:hover .hov {
    display: inline;
}
.translated:hover .def, .hovertext:hover .def {
    display: none;
}

.tip, .msg {
    font-size: 90%;
}
.tip::before {
    content: "U ";
    font-family: "HappyDayDingbats";
    font-size: 200%;
    font-weight: normal;
}
[lang = "de"] .tip::before {
    content: "U ";
}
[lang = "en"] .tip::before {
    content: "U ";
}

.icon::before {
    font-family: "HappyDayDingbats";
}
.love::before {
    content: "B";
}

.center {
    text-align: center;
}

.c640 {
    max-width: 640px;
    margin: auto;
    padding: 3rem 0;
}

footer {
    margin-top: 3em;
    margin-bottom: 5em;
}

footer a {
    border-bottom: none;
}
footer a::before {
    content: "";
}
/*
.showOnHover {
    visibility: hidden;
}
a:hover .showOnHover {
    visibility: visible;
}
*/
.showOnHover, .showOnPrintHover {
    display: none;
}
a:hover .showOnHover,
.emojiChooser:hover  .showOnHover {
    display: block;
    position: fixed;
    bottom: 0;
    right: 0;
    background-color: #354d5e;
    background-color: rgba(53, 77, 94, 0.5);
    padding: 0.1em 0.6em 0.3em;
    font-size: 90%;
    border-top-left-radius: 0.5em;
}

.emoji {
    font-style: normal;
    font-weight: normal;
}

.onHover {
    display: none;
}

h1:hover .onHover {
    display: block;
}

.mini {
    font-size: 40%;
}

h2 .mini {
    font-size: 50%;
}

.red {
    color: red;
}

.US::after {
    content: " 🇺🇸";
}
.DK::after {
    content: " 🇩🇰";
}
.DE::after {
    content: " 🇩🇪";
}
.GB::after {
    content: " 🇬‍🇧";
}
.HU::after {
    /*content: " 🇭🇺";*/
}
.DE-HU::after {
    content: " 🇩🇪 🇭🇺";
}
.US::after,
.DK::after,
.DE::after,
.GB::after,
.HU::after,
.DE-HU::after {
    font-style: normal;
    /*color: #68889f;*/
}

.up, .speech .up {
    font-style: normal;
}

.ccSymbol {
    font-size: 80%;
    font-weight: 700;
    display: inline-block;
    color: #ddd;
    border: 2px solid #ddd;
    border-radius: 0.3em;
    padding: 0 0.2em 0.1em 0.15em;
    /*text-decoration: line-through;*/
}

.fail {
    background: repeating-linear-gradient(135deg, ivory, ivory 10px, tomato 10px, tomato 20px); 
    padding: 3rem;
}

.fail > div, .fail > p {
    padding: 1rem;
    background: #68889f;
}

.newSaying h2:first-child {
    margin-top: 0.6em;
}

.newSaying h2::before {
    content: "🗨 ";
    font-weight: normal;
}


#de::before, #en::before, #hu::before {
    display: block;
    font-size: 70%;
    text-overflow: clip;
    white-space: nowrap;
    overflow: hidden;
}
#de::before {
    content: "deutsch german német deutsch german német deutsch german német deutsch german német deutsch german német deutsch german német deutsch german német deutsch german német deutsch german német deutsch german német deutsch german német";
}
#en::before {
    content: "english englisch angol english englisch angol english englisch angol english englisch angol english englisch angol english englisch angol english englisch angol english englisch angol english englisch angol english englisch angol english englisch angol";
}
#hu::before {
    content: "magyar ungarisch hungarian magyar ungarisch hungarian magyar ungarisch hungarian magyar ungarisch hungarian magyar ungarisch hungarian magyar ungarisch hungarian magyar ungarisch hungarian magyar ungarisch hungarian magyar ungarisch hungarian magyar ungarisch hungarian magyar ungarisch hungarian";
}

/*********************** gallery ************************/
#overlay, #prevArrow, #nextArrow {
    display: none;
}
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    color: #ddd;
    /*
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.985;
    */
    padding: 0;
    z-index: 101;
    text-align: center;
}
#overlay h3 {
    margin: 0;
    padding: 0;
}
#overlay .caption {
    display: inline-block;
    padding: 1em 0;
}
#overlay .close {
    display: inline-block;
    float: right;
    /*
    padding: 0.2em 0.5em;
    margin-right: 1em;
    border-radius: 1em;
    background-color: #222;
    */
    padding: 0;
    margin: 0 0.5em 0;
    font-weight: 900;
    cursor: pointer;
    font-size: 300%;
    opacity: 0.5;
}
#overlay .image {
    width: 100%;
    height: 85%;
    //border-top: 1px solid #111;
    cursor: pointer;
}
#overlay .image img {
    max-height: 100%;
    max-width: 100%;
}
#prevArrow, #nextArrow {
    cursor: pointer;
    font-weight: 700;
    font-size: 400%;
    opacity: 0.5;
    z-index: 102;
    position: fixed;
    top: 50%;
    transform: translate(0, -50%);
}
#prevArrow {
    left: 0.5em;
}
#nextArrow {
    right: 0.5em;
}
/********************* END gallery **************************/

@media print {
    body {
	font-size: 50% !important;
    }
    footer {
	display: none !important;
    }
}

@media (max-width: 700px) {
    body {
	padding-left: 0.5em;
	padding-right: 0.5em;
    }
}