/* ©2017-2021 Tuomas Salste 
   www.tuomas.salste.net */

HTML { 
    font-size: 0.9375em; /* 15px */
    background: url("left.jpg");
    background-repeat: no-repeat;
    background-position: top left;
    background-attachment: fixed;
    color: #222222;
}

BODY { 
    overflow-y: scroll;
    background: white;
    max-width: 780px;
    margin: 0 auto 0 auto;
    padding: 0 1em 0.2em 1em; 
}

HTML, .bodyfont, DIV.contents H3 {
   font-family: 'Palatino Linotype', Palatino, 'Zapf Calligraphic', 'Book Antiqua', 'Times New Roman', Times, serif;
}
TABLE {
   font-size: 100%; /* Firefox */
}
HTML, TABLE { line-height:  1.4; }
P, BLOCKQUOTE { 
    line-height: 1.4em; /* Force even line height, even when P contains EM */
    margin-top:  1.4em; 
    margin-bottom: 1.4em; 
}

/* Title font */
H1, H2, H3, H4, H5 {
   font-family: 'Palatino Linotype', Palatino, 'Zapf Calligraphic', 'Book Antiqua', 'Times New Roman', Times, serif;
}

/* Fixed width font */
PRE, TT, KBD, CODE { font-family: Consolas,'Courier New', monospace; font-size: 0.95em; }

/* Headings */
H1, H2, H3, H4, H5 { font-weight:bold; line-height: 1.25; }
H1 {
    font-size: 1.733333em; 
    color: #2D5C18; /* Dark green */
    border-bottom: 1px solid #2D5C18;
    margin: 0 0 0.3em 0;
    padding: 12px 0 3px 0;
}

H2    { font-size: 1.333333em; margin: 1.3em 0 0.65em 0; }

H3,
H2.h3 { font-size: 1.133333em; margin: 1.64706em 0 0.82353em 0; line-height: 1.2353em; font-style: italic; }

H4    { font-size: 1.06666667em; margin: 1.75em 0 0.875em 0; line-height: 1.3125em; }

H5    { font-size: 1em; font-style: italic }

H2 + P, H3 + P, H4 + P, H5 + P { margin-top: 0; }

/* Links */
A:link    { COLOR: #2D5C18; }
A:visited { COLOR: #864; }
A:hover, A:active { COLOR: #F60; }

/* Superscript link without underline */
SUP A:link, SUP A:visited { text-decoration: none; }
/* Superscript uneven line-height fix */
SUP { line-height: 0; }



P.contentslink { margin-top: 0; }
P.contentslink+H2 { margin-top: 0; }

nav.topnav ol { list-style-type: none; padding-left: 0; margin: 0 0 1.4em 0 }
nav.topnav ol li { display: inline-block; }
nav.topnav ol li+li::before { display: inline-block; content: '\a0\2013\a0'; }

P.addr { text-align:center; margin: 2em 0 1em 0; border-top: 1px solid #ccc; padding-top: 0.6em; clear: right; }
P.addr IMG { 
    height:20px; 
    width:auto; 
    filter: drop-shadow(1px 1px 2px #000);
    border-radius: 1px;
    
    text-align: center;
    margin: 0.6em auto 0;
    display:block; 
}

P.privacy, P.URN { font-size: smaller; text-align: right; margin: 1em 0 1em 1em; color: #666; clear: right; page-break-inside: avoid; }
P.privacy { text-align: center; margin: 2em 0 1em 0 }

P.caption { text-align: center; }
P.caption, p.selityksia, figcaption, .filetype { font-family: 'Trebuchet MS',sans-serif; font-size: 90%; }
P.caption, P.selityksia, figcaption { color: #333333; margin-bottom: 0; }
P.caption, P.selityksia { margin-top: 5px; }
TABLE+FIGCAPTION, TABLE+FIGCAPTION>P { margin-top: 0.4em }
FIGURE.picctr FIGCAPTION { text-align: center; }
TABLE.pic P.caption { margin-top: 4px; margin-bottom: 0px; } 

FIGURE, FIGCAPTION { display: block; }

/* Link filetype */
.filetype { color: #864; font-weight: normal; font-size: 85% }

.ipa { font-family: "Arial Unicode MS", Cambria, verdana,arial,helvetica,sans-serif; letter-spacing: 1px; }

.nobr { white-space:nowrap; }

HR { height: 1px; border: 0;  background: #000; }

IMG.shadow,
IMG.doc, div.contents span.doc { 
  box-shadow: 1px 1px 3px #666;
}
IMG.doc, div.contents span.doc { 
  border: 1px solid #ccc;
}

/* Table for IMG 
   pic (for images) goes smaller on narrow display
   pic2 (for text) doesn't */
TABLE.pic, TABLE.pic2 { border: outset 2px #ccc; background: #F2F0E8; margin-bottom: 1em; }
TABLE.pic TD, TABLE.pic2 TD { padding: 4px 4px 4px 4px; text-align: center; vertical-align: top; }
TABLE.pic IMG, TABLE.pic2 IMG { border: solid black 2px; display: block; margin-left: auto; margin-right: auto; }
TABLE[align=right] { margin-left: 1em; }

TABLE.picctr { margin-left: auto; margin-right:auto; max-width: 100%; clear: both; }
FIGURE.picctr { margin-left: auto; margin-right: auto; clear:both; }

IMG.picleft  { margin-right:1em; clear: left; float: left; }
TABLE.picright, IMG.picright, FIGURE.picright { margin-left: 1em; margin-right: 0; clear: right; float: right; }
FIGURE.picright { margin-top: 0 }

div.googleresponsive { margin: 1em auto }
div.googlemediumrect { float:right; clear:right; margin: 1em 0 1em 1ex; }

/* Indented text */
P.indent, blockquote, figure { margin-left: 3em; margin-right: 3em; }
dd.indent { padding-left: 3em; }
P.ingressi { font-weight: bold; margin-left: 1em; margin-right: 0; line-height: 1.8; }

caption { font-weight: bold; margin-bottom: 0.5ex; }

/* Normal table */
table.normal { border-collapse: collapse; }
table.normal th, table.normal td {
    text-align: left;
    vertical-align: top;
    padding: 0 0 0.3ex 1ex;
}
table.normal th:first-child, table.normal td:first-child { padding-left: 0; }
table.normal caption { text-align: left; }

/* Grid table */
table.grid { 
   border-color:black;
   border-style:solid;
   border-width:2px;  
   border-collapse: collapse;
}
table.grid td, table.grid th {
  border: 0;
  padding: 0.5ex 1ex 0.5ex 1ex;
  border-left: 1px solid black;
  border-top: 1px solid black;
  background: white;
}

/* Matkaoppaat */
TABLE.karttaoikea { float: right; margin-left: 1em; }
IMG.kartta, IFRAME.kartta, IMG.reunus { border: 2px solid black; }
IMG.kartta[align=right] { margin-left: 1em; margin-bottom: 1ex; }
TABLE.kuvapari IMG { max-width: 350px; height:auto; }

@media screen {
    p:target { 
        background-color: #ffd; padding-top: 0.5em; padding-bottom: 0.5em;
    }
    
}


/* Old PC or narrower */
@media only screen and (max-width: 1024px) {
    /* Left-justified page */
    BODY { margin-left: 103px; padding-left: 0; }
    
    /* Control maximum image and table width */
    IMG, TABLE IMG { max-width: 80vw; height: auto;} 
    TABLE[align=right] { max-width: 45vw; }
    IMG[align=right], TABLE[align=right] IMG { max-width: 45vw; height: auto; }
    
    /* sanmarino */
    TABLE.pic240x3 { float:right; margin-left: 1em; } 
    TABLE.pic240x3 TR TD { display: block;}

    /* Split image table */
    TABLE.kuvapari TR TD { display: block; margin-top: 1ex; }
}
 
/* Narrow desktop browser, mobile phone */
@media only screen and (max-width: 720px) {
    /* Remove decorated background */
    HTML { background: none; } 
    HTML { font-size: 0.875em; /* 14px */ }
    BODY { margin: 0 0.8em 0.5em 0.8em; padding-left: 0; padding-right: 0; } 
    IMG, TABLE IMG { max-width: 95vw; height: auto; }    
}

/* Mobile phone portrait mode */
@media only screen and (max-width: 480px) {
    /* Right-floating images and tables: Remove float. Go center. */
    TABLE[align=right], TABLE.karttaoikea, TABLE.pic240x3, 
    IMG[align=right],   IMG.picright , TABLE.picright, FIGURE.picright
        { float: none; margin: 1ex auto 1ex auto; }
    FIGURE.picright { text-align: center; }
    
    /* Inline image: Allow centering */
    BODY>IMG[align=right], DIV>IMG[align=right], P>IMG[align=right], P>IMG.picright { display: block; }
    /* Text table: Use automatic width instead of forced narrow width */
    TABLE.pic2[align=right] { width: auto; }

    /* Normal size restriction */
    IMG[align=right], TABLE[align=right] IMG { max-width: 95vw; height: auto; }
    TABLE[align=right] { max-width: none; }

    TABLE.pic TD P.caption { margin-bottom: 1ex; }

    /* Exception: Keep flag in H1 floating on the right */
    H1 IMG[align=right] { float:right; margin: 0 0 0 5px; }

    DIV.googlemediumrect { float:none; margin: 1em 0; }
}


/* Mobile phone portrait/landscape */
@media only screen and (max-height: 480px), only screen and (max-width: 480px)  {
    /* Remove/minimize decoration */
    TABLE.pic { border-collapse: collapse; border: none; background: none; } /* Keep pic2 */
    TABLE.pic TD { padding: 0; }
    IMG.kartta, TABLE.pic IMG, IFRAME.kartta, IMG.reunus { border: 1px solid black; }
}


/* Narrow view for text: Save space */
@media only screen and (max-width: 45em) { 
   /* Less indentation */
   P.indent, blockquote { margin-left: 0.8em; margin-right: 0; }
   figure { margin-left: 0; margin-right: 0 }
   dd.indent { padding-left: 0.8em; }
   P.ingressi { margin-left: 0; margin-right: 0; line-height: inherit; }
   
    /* Compress lists */
    OL, UL, DD {
        margin-left: 0.8em;  /* IE6 */
        padding-left: 0.8em; /* Firefox 1.0 */
    }
}
/* Narrowest view for text */
@media only screen and (max-width: 30em) { 
    /* get rid of images on the right */
    P.indent, P.ingressi, blockquote { clear: right; }

    /* Minimize grids */
    table.grid { border-width:1px; }
    table.grid td, table.grid th {
        padding-left: 0.4ex;
        padding-right: 0.3ex;
    }
    
    /* Decrease headers and vertical margins */
    H1 { font-size: 1.5em; padding-top: 4px;}
    H2 { font-size: 133%; }
    H3, H2.h3 { font-size: 125%; }
    H2, H3, H4 { margin: 1.5ex 0 1ex 0; }
    P { margin: 1ex 0; }
}


/* Content for print-outs only */
.print { display: none; }

/* Print-outs */
@page { margin: 1cm 1.5cm 1.5cm 2cm; size: portrait; }

@media print {
   .print { display: block; }
   .noprint { display: none; }

   /* Hide left side decoration from print-outs */
   HTML { background-image: none; color: black; font-size: 9.5pt; }
   BODY { margin-right: 0; margin-left: 0; max-width: none; padding: 0; }
   H1 { margin-top: 0; padding-top: 0; }


   /* Page breaks */
   H1,H2,H3,H4 { page-break-after: avoid; }
   TABLE CAPTION { page-break-after: avoid; }
   TR { page-break-inside: avoid; }
   
   /* Images and image captions */
   TABLE.pic { border: 0; background-color: white; /*margin-right: 0; .picctr problem */ page-break-inside: avoid; }
   TABLE.pic TD { background: none; }
   TABLE.pic IMG { margin-right: 0; margin-left: 0; }
   P.caption { color: black; font-style: italic; }
   
   ABBR { text-decoration: none; }

   A:link, A:visited { text-decoration: none; color: #2D5C18; }
   P.URN { text-align: left; color: black; font-style: italic; margin-left: 0; margin-bottom: 0; font-size: 100%; }
   P.URN + P.addr { margin-top: 0; border-top: none; padding-top: 0; }
   P.addr { font-style: italic; }
   P.addr A { color: black; }
   P.addr A:after { content: ' (www.tuomas.salste.net)'; }
   P.addr IMG { margin-bottom: 1em }

   /* External links visible on paper */
   A.extlink:after { content: " <" attr(href) ">"; color: black; font-style: italic; }
   
   /* Links in source listing visible on paper */
   ul.lahteet li A { text-decoration: none; color: inherit; font-style: italic; }
   ul.lahteet li A:after { content: " <" attr(href) ">"; }
   
   div.googleleaderboard, div.googlemediumrect, div.googleresponsive { display: none; }
}