﻿/* ©2022 Aivosto Oy */

/* Font family */
body, input, button, textarea, select, .bodyfont, PRE.license, nav.crumbs { 
   /* Base font */
   font-family: Verdana,Arial,Helvetica,sans-serif;
   font-size-adjust: 0.545; /* Verdana */
   line-height: 1.6;
}
h1,h2,h3,h4,h5,caption, .titlefont, span.dropcap { 
   /* Title font */
   font-family: Georgia,"Times New Roman",serif;
   font-size-adjust: 0.48; /* Georgia */
}

code, pre, kbd, samp, .monospace {
   font-family: Consolas,'Lucida Console',monospace;
   font-size-adjust: 0.49;
}
pre { text-align: left; }


html {
   overflow-y: scroll;
}

/* Page main structure */
body { 
   max-width: 68em; /*1024px; 960px; */
   margin: 10px auto 0 auto;
   box-shadow: 0 5px 20px 10px #eee; 
   width: 100%;
   color: #111;
}

html { background: linear-gradient(to bottom, #E0E9FF  9px, white  47px ); background-repeat: no-repeat }
body { background: linear-gradient(to bottom, #E0E9FF 96px, white 143px ); background-repeat: no-repeat }

header, main, footer { display: block; } /* IE fix */ 

main, nav.crumbs, footer {
   padding: 0 1.5em; 
}
body {
    /* Basic font size */
   /*font-size: 0.875em; /* 14 px */
   font-size: 0.9375em; /* 15px */
}

/* Paragraph margins */
p, pre { margin: 1.6em 0; }
td > p:first-child, td > pre:first-child { margin-top: 0; }
td > p:last-child, td > pre:last-child { margin-bottom: 0; }

table {
   text-align: left;
   /* Firefox & IE5 require this to inherit font size and line height to tables */
   font-size: 100%; 
   line-height: inherit;
}
th { font-weight: bold; }

ul, ol {
   margin-top: 0;
   margin-bottom: 1.6em; /* same as p */ 
   list-style-position: outside;
}
ol ul {
   list-style-type: disc;
}
ul ul, ul ol, ol ol, ol ul { margin-bottom: 0; }

/* List inside table cell */
TD > OL, TD > UL, TD > DD {
    margin-left: 1em;  /* IE6 */
    padding-left: 1em; /* Firefox 1.0 */
}

UL.simple {
   list-style-type: none;
   list-style-position: outside;
   margin-left: 0;  /* IE6 */
   padding-left: 0; /* Firefox 1.0 */
}
UL.simple > LI {
   list-style-type: none;
   list-style-position: outside;
}
ul.source li a { word-wrap: break-word; overflow-wrap: break-word; }

h1 {
   font-size: 180%;
   font-weight: normal;  
   margin-top: 0; /*0.5em;*/
   margin-bottom: 0.89em; /* Same as P */
   line-height: 1.25;
}
h1 img { float: right; margin-bottom:4px; margin-left:4px }

h2, h3, h4, h5 { 
   line-height: 1.2;
   margin: 1.6em 0 0.8em 0; 
   font-weight: bold;
}

h2 {
   font-size: 145%;
}

h3 {
   font-size: 122%;
}

h4, caption { 
   font-size: 1.06667em; /*1.0714em;*/
}
h4 { 
   font-style: italic;
}
h5 {
   font-size: 100%;
}
caption { 
    font-weight: bold; font-style: normal; padding-bottom: 0.25em; 
}


a:link, a:link code       { color: #00d; }
a:visited, a:visited code { color: #000080; }
a:link:hover, a:visited:hover,
a:link:hover code, a:visited:hover code { color: #f60; }
a:link:active, a:visited:active { color: #f30; }

a:link img, a:visited img { 
  border-color: black;
  border-width: 0; /* IE10 */ 
}
main a:link:hover img, main a:visited:hover img { 
  filter: drop-shadow(0 0 6px rgba(0,0,0,0.6));
}

.filetype { font-weight: normal; font-size: 90%; color: #b52; /* Dark orange */ }

/* Popup link */
a[target]:not([target=_self]):not(.nopopupicon) { background-image: url(popup.svg); background-position: center right; background-repeat: no-repeat; background-size: 0.8em; padding-right: 1.1em;}

img.boxshot { width: 100px; height: 100px; float: right; margin: 0 0 0.5em 1em }
img.boxshot, img[src="regexpr-box.jpg"] { border-radius: 16px }

/* index, visustin */
img.screenshot, img.visustinshot { filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.3)) }


img.border { border: 1px solid currentcolor; background-color: currentcolor }
img.e-addr { 
  height:1em;
  margin-bottom:-0.2em !important;
  vertical-align:baseline;
}
a img.e-addr { filter: brightness(1.7266) }
/*a:link:hover img.e-addr { background-color: #b52; filter: grayscale(0.5) brightness(2); box-shadow: 0 0 0 3px #b52; }*/

.arrow { padding-left: 0.3ex; padding-right: 0.3ex; }
pre .arrow { padding-right: 0; }

img.rss { 
   border-width: 0; 
   vertical-align: bottom; 
   width: 16px; height: 16px;
}


img[align=right], table[align=right] { 
   margin-left: 1em; 
}
IMG.picright, TABLE.picright, FIGURE.picright, ASIDE.picright { 
   float: right; 
   clear: right;
   margin-left: 1em;
   margin-right: 0;
}
IMG.picright { margin-bottom: 1em }

FIGURE, FIGCAPTION { display: block }
FIGURE { text-align: center; }
FIGURE.left { text-align: left; margin-left: 0; }
FIGURE.picright { margin: 0 0 1em 1em }

/* Blue box with thin black border */
p.emphasize, div.bluebox, td.bluebox {
   border: 1px solid black;
   background-color: hsl(223, 90%, 95%); /* Light blue */
}

p.emphasize { padding: 0.7em 1em; }
div.bluebox, td.bluebox { padding: 1em; }
div.bluebox P { margin-bottom: 0; }
div.bluebox H2, div.bluebox H3 { margin-top: 0; }

/* Gray box with thin gray border */
div.graybox { border: 1px solid gray; padding: 1em; background-color: #f8f8f8; margin-bottom: 1em; }
div.graybox > *:first-child { margin-top: 0 }
div.graybox > *:last-child { margin-bottom: 0 }

/* Simple colorless box for text */
div.simplebox { border: 1px solid currentcolor; padding: 1em; margin-bottom: 1em; }
div.simplebox > *:first-child { margin-top: 0 }
div.simplebox > *:last-child { margin-bottom: 0 }

/* PA, visustin, visustin-whatsnew, vbwatch */
aside.othertool { clear: both; border: 1px solid gray; padding: 0.75em 1em; font-size: 90%; background-color: #f8f8f8; border-radius: 1ex; margin-top: 3em; }
aside.othertool h2, aside.othertool p, aside.othertool ul { margin-top: 0; margin-bottom: 0; }
.othertool ~ .othertool { margin-top: 1em }

blockquote, .indent { margin-left: 3em; margin-right: 3em; }
table.indent { margin-right: 0; }

pre.code { margin-left: 2em; }
pre.code, code { color: #007; }
td pre.code { margin-left: 0; } /* vbtips */
H1 code, H2 code, H3 code, H4 code, strong code, caption code, code.bodyfont { color: inherit; font-family: inherit; font-size-adjust: inherit }
strong dfn { font-style: inherit }

pre.code .comment {
   color: #006600; /* Dark green */
}

.nobr { white-space:nowrap; }

hr {
  border: 0;
  border-bottom: 1px solid #999;
}

small, .small { font-size: 90%; }
td.small p, td.small h4 { margin-top: 0; margin-bottom: 1.566em; }




/* Stylish orange table  */
table.stylish, table.stylish-nocompress { 
  border: 2px solid black;
  border-collapse: collapse;
  background: none;
}
table.stylish td, table.stylish th,
table.stylish-nocompress td, table.stylish-nocompress th {
  padding: 0.5ex 1ex;
  border-left: 1px solid black;
  border-top: 1px solid black;
}
table.stylish th, table.stylish-nocompress th { 
   background: hsl(40, 90%, 90%); /* Stylish orange */
}
/* datatypes.html */
table.stylish td.na { background: rgba(192,192,192,0.25); /*background: #eee;*/ }
/* restructuring.html, stringopt2.html */
table.stylish th code { color: inherit; font-family: inherit; font-size-adjust: inherit; }

/* Grid table */
table.grid { 
  border: 2px solid black;
  border-collapse: collapse;
}
table.grid td, table.grid th {
  padding: 0.5ex 1ex;
  border-left: 1px solid black;
  border-top: 1px solid black;
}
table.stylish td h3:first-child, table.stylish td h4:first-child { margin-top: 1ex; } /* vbwatch.html */

table.normal { border-collapse: collapse; }
table.normal th, table.normal td, table.numbers th {
  text-align: left;
  vertical-align: top;
  padding: 0 0 0.3ex 1ex;
}
table.normal th:first-child, table.normal td:first-child, table.numbers th:first-child { padding-left: 0; }

table.normal caption, table.tabs caption { text-align: left; } 

.red { color: red; }
.green { color: green; }
.blue { color: blue; }

table.tabs { border-collapse: collapse; }
table.tabs th, table.tabs td {
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  vertical-align: top;
}
table.tabs tr th+th, table.tabs tr td+td, table.tabs tr th+td {
  padding-left: 0.4em !important;
}
table.tabs th:first-child, table.tabs td:first-child {
  white-space: nowrap;
}

h2.bodytext, h3.bodytext { 
  font-style: normal; 
  font-weight: bold; 
  font-size: 100%; 
  margin-bottom: 0; 
  font-family: inherit; 
  font-size-adjust: inherit; 
  line-height: inherit;
}

aside.ordernow {
  border: 2px solid rgba(0,0,128,0.5); 
  padding: 1em;
  margin: 0 0 1em 1em;
  text-align: center;
  border-radius: 1em;
  float: right;
  clear: right; 
  width: 6em;
}
aside.ordernow > p { margin: 0; font-weight: bold; }
aside.ordernow a { white-space: nowrap; font-weight: normal; }

div.stayupdated {
  border-radius: 1ex;
  float:right; 
  margin: 0 0 1ex 1em; 
}
div.stayupdated * { margin: 0; text-align: center }
div.stayupdated li.selected { background: rgb(128,128,128,0.25); }


ul.tablefooter, p.tablefooter { margin-top: 0.5em; font-size: 90%; }



PRE.license { padding: 1.6em 0; }
PRE.license, DIV.license {
   margin: 1.6em 0;
   border-top: 3px dotted #aaa;
   border-bottom: 3px dotted #aaa;
}

/* faq.html etc. */
.FAQ H2 {
   border-top: 1px solid rgba(128,128,128,0.5);
   padding-top: 1em; margin-top: 1em; 
}
.FAQ H3 { font-size: 100%; margin-bottom: 0; line-height: inherit; font-style: normal; font-family: inherit; font-size-adjust: inherit; }
.FAQ H3 + P { margin-top: 0; }

.linkline A { margin-right: 1em; clear: left; white-space: nowrap }

.editions {
   color: #b52; /* Dark orange */
   font-size: 90%;
   font-style: normal;
   font-weight: normal;
   white-space: nowrap; 
}

/* PA editions.html, VBW editions (visustin.html) */
TABLE#editions TD.no { color: #999; }
TABLE#editions TD.yes { font-weight:bold; }

/* about, contact */
img.svgflag { 
    height: 1.3em !important; width:auto; margin: 3px 4px 0 1px; vertical-align: baseline;
    box-shadow: 0 0 10px #777;
}

input, button, textarea, select { 
    line-height: 1.3;
    padding: 0.15em;
    font-size: 100%; 
}
input[type=text], input[type=email], input:not([type]), select { width: 24em; /*max-width: 24em;*/ max-width: 98%; }
input[type=submit], input[type=reset], button { min-width: 8em; padding-left: 1ex; padding-right: 1ex; }
textarea { width: 98%; }

select.lang { 
  float:right;
  clear:right; 
  margin-left:1em;
  visibility:hidden; /* Show with JS */
  width:auto;
}

.narrow { display: none; }

footer { 
  background: hsl(223, 40%, 90%); 
  border-top: 1px solid hsl(223, 50%, 85%);
  clear: both;
  margin-top: 4em;
  line-height: 1.5em;
  padding-top: 1.5em;
  padding-bottom: 1.5em;
}
footer a { text-decoration: none; white-space: nowrap; }
footer a:link, footer a:visited { color: inherit }

footer ul {
  list-style-type: none;
  list-style-position: outside;
  padding-left: 0; /* Firefox 1.0 */
  margin: 0;
}
footer li {
  list-style-type: none;
  list-style-position: outside;
}
footer hr { display: none }

footer>div.footlinks {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around; /* IE11 fallback */
  justify-content: space-evenly; 
  align-content: stretch;
  gap: 0 2em;
  margin-bottom: 1.5em;
  min-height: 7.5em; 
}
@media (any-pointer:coarse) {
  footer { line-height: 2em }
  footer>div.footlinks { min-height: 10em }
}

footer>div.copyright {
  display: block;
  text-align: center;
  color: #444;
  font-size: 95%;
}
footer>div.footlinks>ul:first-child { width: 10em }
footer>div.footlinks>ul:last-child { width: 7em }

@keyframes fadeInAnimation {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

footer>div {
  animation: fadeInAnimation ease-in 0.2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}



.guarantee { 
    border: 3px solid currentcolor;
    border-radius: 0.5ex; 
    color: currentcolor;
    clear: right;
    display: block;
    float: right;
    font-size: 1.1em;
    font-weight: bold;
    line-height: 1.1em;
    margin-left: 1em;
    margin-right: 0.2em;
    margin-bottom:0.5em;
    padding: 0.1em 0.5em;
    page-break-inside: avoid;
    text-align: center;
    text-transform: uppercase;
    transform: rotate(10deg);
    width: auto;
}
a .guarantee { 
    border-color: #900;
    color: #900; 
}
.guarantee div { display: block }
.guarantee div:nth-child(2) { font-size: 1.1em }
h1 + .guarantee, h1 + a > .guarantee { margin-top: 0.5em; }


header.topmenu { 
    background: url(top.jpg); 
    background-size: 100%;
    background-repeat: no-repeat;
    border-radius: 5px 5px 0 0;
    border-top: 0 !important;
    padding-top: 48px;
    min-height: 48px;
}

nav.topmenu { 
    width: 100%; 
    min-height: 48px; 
    background: #447AFF; /* Fallback IE9 */
    background: linear-gradient(to bottom, #6691ff, #447AFF 14px, #6691ff 35px, #80a4ff 47px);
    display: block !important;
}
nav.topmenu ul {
    list-style:none; margin-left:0; padding-left:0; margin-bottom: 0;
}
nav.topmenu > ul { 
    position: relative;
    min-height:48px;
    margin-left: 140px;
    line-height: 1.1; /* IE11 */
}
nav ul.dropdown-content > li { color: #444; display: block; position: relative; line-height: 1.6 }
nav ul.dropdown-content > li:first-child { border-bottom: 1px dashed rgba(0,0,0,0.2); color: #000 }
nav ul.dropdown-content > li.onlinehelp  { border-top:    1px dashed rgba(0,0,0,0.2); color: #000080 }
nav ul.dropdown-content > li:first-child + li.onlinehelp { border-top: none; }

/* Main menu buttons */
nav li.dropdown > a {
    background: none;
    color: white;
    border: none;
    cursor: pointer;
    display: inline-block;
    font-family: Georgia,"Times New Roman",serif;
    font-size: 16px; 
    font-size-adjust: 0.48; /* Georgia */
    line-height: 1.5;     /* Firefox 73.0 */
    min-height: 24px;
    padding: 12px;
}
nav ul a { 
    padding: 12px;
    text-decoration: none;
    font-weight: normal; 
}
/* Submenu */
nav .dropdown-content .dropdown-content li+li a {
    padding-top: 8px; padding-bottom: 8px;
}

nav li.aivologo { 
    display: inline-block; 
    height: 48px;
    position: absolute; left: -138px; top: 0;
    
}
li.aivologo { 
    list-style-type: none; /* IE8*/
}
nav li.aivologo a {
    background-color: white; 
    border-radius: 50px;
    color: #447AFF;
    display: block;
    height: 32px;
    margin: 4px 10px 4px 4px;
    padding: 4px 8px;
    text-align: center;
}
nav li.aivologo a img { display: block; padding: 0 2px 0 0; width: 110px; height: 32px; }


/* Main menu on hover */
nav li.dropdown > a:hover { 
    color: white;
    background-color: #A0A9E0;
}

/* The container <div> - needed to position the dropdown content */
nav.topmenu > ul > li.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown content */
nav ul.dropdown-content {
    display: none; /* Hidden by default */
    position: absolute;
    left: -2px; 
    background-color: #f8f8f8;
    min-width: 13em; /*15em*/
    border: 1px solid #ddd;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.3);
    border-radius: 5px;
    z-index: 5;
}
/* Show the dropdown menu */
nav ul.dropdown-content.show { display:block }

nav ul.dropdown-content-right { left: auto; right: -2px; }

/* Links inside the dropdown */
nav .dropdown-content a {
    color: inherit;
    display: block;
    white-space: nowrap;
}

/* Dropdown menus on hover */
nav .dropdown-content li:hover { background-color: #eee; color: #f60; }

nav a.menuopen:not(.burger) { background-color: #A0A9E0  }
nav .dropdown-content a.menuopen { background-color: #eee }

/* Main menu dropdown items */
nav li.dropdown > a:after { 
    content: "\a0"; /* Empty */
    font-family: 'Courier New',monospace; font-size-adjust: 0.423; font-size: inherit;
    display: block;
    position:relative;
    text-align: center; height: 0; line-height: 0;
    top: 0.3em;
}
nav li.dropdown > a.hassubmenu:after { content: "ˇ" }

nav .dropdown-content a.hassubmenu:before { 
    content: "›"; float:right; font-weight: bold;
}
nav .dropdown-content a.hassubmenu:after { content: '' }
nav li.dropdown a .symbol { float:right; opacity: 0.75; }

/* Submenu */
nav ul.dropdown-content ul.dropdown-content {
    position:absolute;
    top: 0;
    left: 13em; /*15em;*/
    z-index: 2;
}
/* Fit submenus on narrow screen */
@media only screen and (max-width:42em) {
    nav ul.dropdown-content ul.dropdown-content {
        left: 10em; /* 13em Fit sub-menus */
    }
}
@media only screen and (max-width:34em) {
    nav ul.dropdown-content ul.dropdown-content {
        left: 6em; /* 13em Fit sub-menus */
    }
}


nav.topmenu li.burger { display: none }

nav.crumbs { position: static; margin: 0.5em 0 1em 0; opacity: 0.7; display: block }
nav.crumbs a { text-decoration: none }
nav.crumbs ol { display: inline; margin-left: 0; padding-left: 0; }
nav.crumbs li { display: inline-block; margin-right:0.7ex; }
nav.crumbs li+li:not(:empty):before { content: '›'; margin-right:0.7ex; }
nav.crumbs li:last-child { margin-right:0 }
nav.crumbs:empty:after { content: '\a0' }



@media screen {
    :target:not(section):not(table):not(img):not(div.graybox), table:target caption { 
        background-color: rgba(255,255,48,0.2); padding-top: 0.5em; padding-bottom: 0.5em;
    }
    main { min-height: calc(70vh - 96px - 20px - 15em); }
}



@media only screen and (max-width: 1024px) {
    body { 
        margin-top: 0;
        font-size: 0.875em; /* 14 px */
        max-width: 1024px;
    }
    header.topmenu /*, footer*/ { border-radius: 0 }
    /* Force maximum image width on all standard images (non-table) */
    main > img, main > P > img, main > A > img, main > P > A > img, section > P > A > img, figure > img { height: auto; max-width: 100%; }
    
    img.e-addr { 
        height:1.07142857em;
        margin-bottom:-0.2142857em !important;
    }
}

@media only screen and (max-width: 720px) {
    /* Landscape phone, narrow desktop browser */
   
    /*body { font-size: 0.8125em; }*/
    main, nav.crumbs, footer { padding-left: 0.8em; padding-right: 0.8em; }
    
    /* Restore floating tables */
    table[align=right] { float:none; margin-left: 0; margin-bottom: 1em; }
    table.picright, aside.picright { float: none; margin: 1em auto 1em 0; }

    /* Compress tables */
    table.grid, table.stylish, table.stylish-nocompress { border-width:1px; }

    /* Allow wrap */
    pre { white-space: pre-wrap; }

    /* Compress indentation */
    .indent, blockquote { margin-left: 1em; margin-right: 0; }
    pre.code { margin-left: 0; }
  
    /* Compress lists */
    OL, UL, DD {
        margin-left: 1em;  /* IE6 */
        padding-left: 1em; /* Firefox 1.0 */
    }
}



@media only screen and (max-width: 480px) {
    /* Mobile phone portrait */
    
    /* Compress indentation */
    .indent, blockquote { margin-left: 0.8ex; }
    .nobr { white-space:normal; }

    /* Remove indentation from table */
    table.indent { margin-left: 0 }

    /* Restore floating images */
    img[align=right] { float:none; display: block; margin-left: 0; margin-right: 0; }
    IMG.picright:not(.wide), FIGURE.picright { float: none; display: block; margin: 1ex auto }

    /* Compress tables further */
    table.grid, table.stylish, table.compress { 
        font-family: Arial,sans-serif; 
        font-size-adjust: 0.519;
        font-size: 11px;
        letter-spacing: -0.2px;
    }
    table.grid tr > *, table.stylish tr > *, table.compress tr > * {
        padding-left: 0; 
        padding-right: 0;
        font-weight: normal;
    }
    


    /* Compress further */
    DD { margin-left: 0.7em; padding-left: 0.7em; }

    .narrow { display: block; }
    .wide { display: none; }
 
    select.lang { float:none; margin-left: auto; margin-right:0; }
    
    footer>div.footlinks { justify-content: center; }
    footer>div.footlinks>ul:first-child { width: auto; }
    footer>div.footlinks>ul:last-child { width: auto; }
}


@media only screen and (max-width: 720px),
       only screen and (max-height: 480px) and (min-width: 721px) {
    /* Narrower window */
    /* Low but wide window */

    body { background: linear-gradient(to bottom, #E0E9FF 57px, #FFF 96px ); background-repeat: no-repeat; margin-top: 0; }

    /* Remove image from top of menu */
    header.topmenu { background: none; padding-top: 0; margin-left: 0 }

    /*footer { border-radius: 0 }*/
}


@media only screen and (max-width: 720px) { 
    h1 { font-size: 169%; }

    nav.topmenu > ul { margin-left: 0 }
    nav li.aivologo { left: 2px }

    nav ul.dropdown-content ul.dropdown-content { left: 0; }
    nav.topmenu > ul { height: auto; }
    nav li.dropdown { margin-left: 0; }

    nav ul.dropdown-content { font-size: 0.875rem; }

    /* Main menu buttons: convert to dropdown menu */
    nav.topmenu > ul > li.dropdown {
        background-color: #eee;
        border-bottom: 1px solid #ccc;
        height: auto;
        line-height: initial;
        width: auto;
        position: relative;
        display: none;
    }
    nav li.dropdown:last-child {
        border-bottom: 3px solid #ccc;
    }
    nav li.dropdown > a { 
        font-size: 1rem; 
        height: auto; 
        min-height: initial; 
        padding: 8px 0; 
        text-indent: 12px; 
    }

    nav.topmenu > ul > li.dropdown.show { display: block; clear:both }
    nav li.dropdown > a, nav li.dropdown-content > a { width:100%; color: black; }
    nav ul.dropdown-content a { padding: 8px; padding-left: 20px; }
    /* Submenu */
    nav ul.dropdown-content, nav ul.dropdown-content ul.dropdown-content {
        position: relative;
        box-shadow: none;
        border-radius: 0;
    }
    nav li.dropdown > ul.dropdown-content { 
        width: 100%; 
        border-left: none;
        border-right: none;
        border-top: 1px solid rgba(0,0,0,0.07); /* #eee;*/
        border-bottom: 1px solid rgba(0,0,0,0.07); /* #eee;*/
    }
    nav ul.dropdown-content ul.dropdown-content { margin-left: 2em; margin-right: 2em; 
        border: none;
        border-left: 5px solid #ddd; 
    }
    
    nav ul.dropdown-content > li { background: white; color: black; border-bottom: 1px solid rgba(0,0,0,0.07); /* #eee;*/ }
    nav ul.dropdown-content > li:first-child { border-bottom: 1px solid rgba(0,0,0,0.07) /*#eee;*/ }
    nav ul.dropdown-content > li:last-child { border-bottom-width: 0 }
    nav ul.dropdown-content ul.dropdown-content > li:last-child { margin-bottom: 5px; border-bottom-width: 5px; border-bottom-color: #ddd; }
    nav ul.dropdown-content ul.dropdown-content ul.dropdown-content > li:first-child { border-top: 5px solid #ddd; margin-top: 5px; }
    
    nav a.menuopen:not(.burger), nav ul.dropdown-content a.menuopen { background-color: #ddd }
    nav a.menu.menuopen { background-color: initial }    
    nav ul.dropdown-content li a.menuopen { background-color: #ddd }
    nav ul.dropdown-content ul.dropdown-content li.dropdown { background-color: #ddd }
    
    nav .dropdown-content a.hassubmenu:before { 
        content: ""; 
    }
    nav li.dropdown > a:after { content: "" }
    nav li.dropdown > a.hassubmenu:after, nav .dropdown-content a.hassubmenu:after { 
        display: inline; line-height: initial; top: initial;
        margin-left: 1em; content: "▼"; float:none;
        font-family: Arial,sans-serif; 
        font-size: 70%;
        font-size-adjust: 0.518;
        color: rgba(0,0,0,.35);
    }
    nav li.dropdown a.hassubmenu.menuopen:after { 
        content: "▲";
    }
    /*nav li.aivologo a.hassubmenu:after, */ 
    nav.topmenu a.burger.menuopen:after { content: "" !important }
    nav ul.dropdown-content > li.onlinehelp { border-top: none; }
    nav li.dropdown > a:hover { background-color: #d8d8d8; color: #f60; }
    nav ul.dropdown-content li:hover, nav ul.dropdown-content a:hover { background-color: initial; }

    /* Hamburger button */
    nav.topmenu > ul > li.burger { 
        display: inline-block;
        font-size: 36px;
        font-family: Verdana,sans-serif; 
        font-size-adjust: 0.545; /* Verdana */
        font-weight: normal; 
        
        line-height: 48px;
        margin: 0 6px 0 0;
        width: 1em; 
        z-index: 10;
    }
    nav.topmenu a.burger { 
        display:block; 
        padding:0;
        text-align: center; 
    }
    nav.topmenu a.burger, nav.topmenu a.burger:hover { color: white }

    nav > ul { text-align: right }       /* Hamburger */
    nav li.dropdown { text-align: left } /* Other menus */
}
@media only screen and (max-width: 480px) {
    h1 { font-size: 158%; }
    h2 { font-size: 139%; }
    .guarantee { display: none }
}
@media only screen and (max-width: 320px) { 
    body { font-size: 0.75em; } 
    img.e-addr { 
        height:1em;
        margin-bottom:-0.2em !important;
    }
}
/* Low window */
@media only screen and (max-height: 480px) {
    nav ul.dropdown-content li a, nav .dropdown-content .dropdown-content li+li a { padding-top: 6px; padding-bottom: 6px;}
    nav ul.dropdown-content { /*font-size: 13px;*/ font-size: 0.8rem; }
}
/* Low and narrow window */
@media only screen and (max-height: 480px) and (max-width: 720px) {
    nav li.dropdown > a { padding-top: 6px; padding-bottom: 6px; }
}

/* Dark mode */
@media screen { :root { color-scheme: light dark; } }
@media only screen and (prefers-color-scheme: dark) {
    html { background: #000 }
    body { background: #121212; color: #ccc; box-shadow: none }
    
    nav.topmenu { background: linear-gradient(to bottom, hsl(223, 60%, 35%), hsl(223, 60%, 30%) 35px, hsl(223, 60%, 25%) 47px); }
    nav li.aivologo a { background-color: hsl(223, 10%, 90%); }
    nav.topmenu a.burger, nav.topmenu a.burger:hover { color: hsl(223, 10%, 90%) }
    nav ul.dropdown-content > li { color: black; background: #f8f8f8 }
    nav ul.dropdown-content { background: #eee }

    nav.crumbs { opacity: 1 }

    footer { background: hsl(223, 40%, 15%); border-top: 2px solid hsl(223, 10%, 15%); }
    footer>div.copyright { color: #aaa }
    
    .blue, a:link, a:link code { color: #bbf; }
    a:visited, a:visited code { color: #ddf; }
    pre.code { color: #ccccf8; } code { color: inherit }
    pre.code .comment { color: #bdb; }
    
    h1, h2, h3, h4, h5, caption, th, strong { font-weight: normal; color: white }
    h2, h3, h4, h5 { font-style: italic }
    h2.bodytext, h3.bodytext { color: #eee /* (is bold) */ }
    
    table.stylish>*>tr:not(.subtitle)>th,
    table.stylish-nocompress>*>tr:not(.subtitle)>th,
    table.downloads>*>tr>th
    {
        background-color: hsl(223, 20%, 30%);
    }
    
    table.stylish, table.stylish-nocompress, table.grid { background-color: #2f2f2f; }


    p.emphasize, div.bluebox, td.bluebox,
    div.graybox, aside.othertool, div.discontinued
        { background-color: #2f2f2f; border-color: #666; }
    aside.ordernow { border-color: currentcolor }

    img,
    img.screenshot, img.visustinshot { filter: brightness(0.9) contrast(1.11); /* Removes any drop-shadow */ }
    img.e-addr   { filter: invert(40%) brightness(1.9) grayscale(1) }
    a img.e-addr, a:link:hover img.e-addr { filter: invert(40%) brightness(1.9) }

    img.svgflag { box-shadow: 0 0 10px #555; }
    img[src*=aivologo], img[src="vbscene.gif"] { background: white; border: 10px solid white; forced-color-adjust: none }
    img[src="windpower.svg"], img[src="visustin-service.png"] { filter: invert(0.8) }

    a[target]:not([target=_self]):not(.nopopupicon):after { filter: invert(100%) }

    .guarantee { font-weight: normal; }
    a .guarantee { border-color: #bbf; color: #bbf; }

    .red { color: #e99 }
    .red strong { color: inherit }
    .green { color: #9e9 }
    .editions, .filetype { color: hsl(20, 29%, 63%); }
}


@media only screen and (forced-colors: active) {
    /* High contrast or other forced colors */
    /* Remove image from top of menu */
    header.topmenu { background: none; padding-top: 0; margin-left: 0 }

    nav li.aivologo a { background: white; forced-color-adjust: none }
    nav.crumbs { border-top: 1px solid CanvasText; padding-top: 1em; opacity: initial }
    footer { border-top: 1px solid CanvasText }
}


@page { margin-left: 2cm; margin-right: 2cm; }

@media print {
   .noprint { display: none !important; }

   html, body, footer, header.topmenu, nav.topmenu { background: none }
   body { margin-top: 10px; box-shadow: none; color: black; font-size: 10pt; max-width: initial }

   /* Page breaks */
   H1,H2,H3,H4,H5 { page-break-after: avoid; }
   TABLE[class] { page-break-inside: avoid; }
   TABLE CAPTION { page-break-after: avoid; }

   
   IMG, .emphasize, .bluebox, div.graybox, div.simplebox { page-break-inside: avoid; } /* Avoid breaking framed content */
   .guarantee { transform: none }
   
   header.topmenu { padding-top: 0; min-height: initial }
   nav.topmenu { min-height: initial }
   nav.topmenu > ul { margin-left: 1.5em; min-height: initial }
   nav.topmenu > ul > li:not(.aivologo) { display: none; }
   nav li.aivologo { position: static; height: auto; }
   nav li.aivologo a { margin: 0; padding: 0 }
   nav.crumbs { margin-top: 5px; opacity: initial }
   
   footer { min-height: initial; border-top: none }
   footer>div.footlinks { display:none }
   footer>div.copyright { color: inherit }
   footer>div.copyright:after { content: " — www.aivosto.com" }

   a:link { text-decoration: none; }
}
