/*** Page wrappers ***/


div#AllElements {
    /* Centering the page: */
    margin: auto;

    max-width: 90rem;
    background: #101010;
}

div.BasicContent {
    clear: both;
}



/*** Regular styles ***/


a {
    color: #34b889; /* Green */

    /* Allow line break of long strings even without hyphen: */
    word-wrap: break-word;
}
a:hover {
    text-decoration: none;
}

/* These are both a heading and link in a page index */
a.GenericIndexHeading {
    color: inherit;
    text-decoration: none;
}
a.GenericIndexHeading:hover {
    text-decoration: underline;
}

html {
    font-size: 100%;
    margin: 0;
}
body {
    margin: 0;

    font-family: TruenoLight, sans-serif;
    color: #e0e0e0;
    background-image: url("images/pexels-karol-d-359971-edit-more-2.jpg");
    background-size: cover;
    background-attachment: fixed;
}

details {
    border: 2px solid #707070;
    margin-bottom: 1rem; /* Add space before following items */
    margin-top: 1.2rem;
    padding: 0.4rem;
    background-color: #222222;
}

summary {
    font-size: 1.25rem;
    font-weight: bold;
    padding: 0.2rem;
}

div.InDetails {
    margin: 0.4rem;
}

figcaption {
    font-style: italic;
}

/* Regular h1 heading */
h1 {
    margin-block-start: 1.8rem;
    margin-block-end: 1.8rem;

    font-family: TruenoLight, sans-serif;
    font-size: 1.6rem;
}

h2 {
    margin-block-start: 1.8rem;
    margin-block-end: 1.8rem;
    
    font-family: TruenoLight, sans-serif;
    font-size: 1.375rem;
}

h3 {
    margin-block-start: 1.8rem;
    margin-block-end: 1.8rem;
    
    font-family: TruenoLight, sans-serif;
    font-style: italic;
}

h4 {
    margin-block-start: 1.4rem;
    margin-block-end: 1.4rem;
    
    font-family: TruenoLight, sans-serif;
}

h5 {
    font-family: TruenoLight, sans-serif;
}

img {
    max-width: 100%;
}
img.SquareDecoration {
    /* Class for images that decorate the page */

    float: right;

    max-width: 23rem;
    margin-left: 3rem;
    margin-right: 5rem;
}
div.ImgBackgroundColorDefault {
    background-color: #ffffff;
    padding: 0.5rem;
}

input {
    padding: 0.3rem 0.5rem 0.3rem 0.5rem;
    
    font-size: 1rem;
    background-color: #222222;
    color: #f0f0f0;
    border: 0.1rem solid #34b889;
    text-decoration: none;
    white-space: nowrap;
}

select {
    font-size: 1rem;
}

p {
    /* The default seems to be 1rem (16px). More space brings more readability with a dark background? */
    margin-block-start: 1.8rem;
    margin-block-end: 1.8rem;
}

/* Preformatted, appears in blog at least */
code,pre {
    font-size: 105%;
    background-color: #222222;
    white-space: pre-wrap;
    
}
pre {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    padding: 0.5rem;
    
    border: 2px solid #707070;
    
    /* Automatically use scroll bars if overflow would occur */
    overflow: auto;
}

span.Label {
    display: inline-block; /* Required for "nowrap" to work as wanted */
    background-color: #222222;
    border: 0.1rem solid #707070;
    color: #ffffff;
    font-size: 90%;
    font-weight: normal;
    margin-right: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.2rem 0.4rem 0.2rem 0.4rem;
    white-space: nowrap;
}

td
{
    padding-left: 0.2em;
    padding-right: 0.2em;
}

th
{
    font-weight: bold;
    padding-right: 0.3rem;
}

ul.ButtonLinksList
{
    display: inline-block;
    list-style-type: none;
    padding-left: 0.5rem;
    margin-block-start: 0.2rem; /* Eliminate margin above */
    margin-block-end: 0.2rem; /* Eliminate margin below */
}
ul.ButtonLinksList > li
{
    display: inline-block;
    margin: 0px;
    padding: 0.2rem;
}



/*** Main menu ***/


ul.MenuList
{
    list-style-type: none;
    margin-block-start: 0em; /* Eliminate margin above */
    margin-block-end: 0em; /* Eliminate margin below */
    padding-left: 0px;
}
li.MenuItemHor {
    /* Horizontal menu item */
    display: inline-block;

    line-height: 3rem;
}
a.MenuItem {
    /* Common to all menu items */

    padding: 0.2rem 0.5rem 0.2rem 0.5rem;

    color: #f0f0f0;
    font-size: 1rem;
    text-decoration: none;
    white-space: nowrap;
}
a.MenuItem:hover {
    color: #5895bd; /* Nice bright blue */
    border-top: 0.12rem solid #5895bd; /* Nice bright blue */
    border-bottom: 0.12rem solid #5895bd; /* Nice bright blue */
}
a.MenuItemActive {
    
    padding: 0.2rem 0.5rem 0.2rem 0.5rem;
    
    color: #5895bd; /* Nice bright blue */
    border-top: 0.12rem solid #5895bd; /* Nice bright blue */
    border-bottom: 0.12rem solid #5895bd; /* Nice bright blue */
    text-decoration: none;
    white-space: nowrap;
}



/*** Footer menu ***/


ul.FooterMenuList
{
    list-style-type: none;
    padding-left: 0px;
}
li.FooterMenuItem
{
    display: inline-block;
}
li.FooterMenuItem:before
{
    /* 0020: space; 2014: em dash; 00a0: non-breaking space */
    content: "\0020\2014\00a0";
}



/*** Structural elements within body ***/


div.StatusMsg {
    border: 0.2rem dashed #00b000;
    margin: 1rem;
    padding: 0.7rem;
}

/* This is for the navigation buttons in each item page */
nav.NavDeepContext {
    padding-top: 1.5rem;
}

/* This is the main navigation menu */
nav#NavMainHor {
    padding-bottom: 1.3rem;
    padding-top: 1.2rem;
    line-height: 2.5rem;
}

/* Navigation items in page footer */
nav#NavFooter {
    padding-bottom: 0.5rem;
}

/* This wraps the main header */
header#Main {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    overflow: auto; /* Take the height of children (seems not to affect width) */
    width: 100%;
    padding: 3rem 3rem 2rem 2rem;
    box-sizing: border-box; /* Prevent padding + 100% width from causing overflow to right */

    background-color: #222222;
    background-image: url("images/crane-green-20perc.png");
    background-position: 2rem 3.95rem; /* left top */
    background-repeat: no-repeat;
    background-size: auto 40px;
    border-bottom: 0.14rem solid #5895bd; /* Nice bright blue */
}

/* Page header text (not any actual heading) */
h1#MainHeaderWebsiteName {
    margin-left: 0.4rem;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 3.1rem;
    padding-right: 1rem;
    padding-top: 0.9rem;

    font-family: TruenoLight, sans-serif;
    font-size: 2.2rem;
    font-weight: bold;
    color: #5895bd;
}
h1#MainHeaderWebsiteName:before {
    content: "";
}
h1#MainHeaderWebsiteName:after {
    content: "";
}

a#MainHeaderWebsiteLink {
    color: inherit;
    text-decoration: inherit;
}

/* This wraps the actual content of each page */
main {
    clear: both; /* Force this element to be below any left or right floats */
    display: block;
    overflow: auto; /* Take the height of children -> enable control over margin-bottom */

    margin: 1.5rem 2rem 1.5rem 2rem;
    padding: 1rem;
}

/* Header texts shown before the page heading */
p.PageHeader {
    border: 0.1rem dashed #f0f0f0;
    font-style: italic;
    padding: 0.6rem;
}

/* This wraps the page footer */
footer {
    display: block;
    clear: both;

    /* padding-bottom: Large enough to ensure "top" button can be scrolled below this */
    padding: 0 0 4rem 0;

    background-color: #101010;
    color: #f0f0f0;
    border-top: 0.14rem solid #5895bd; /* Nice bright blue */
    
    font-size: 90%;
}
div.FooterPart {
    display: block;
    padding: 0.7rem 1rem 0.7rem 1rem;
    border-bottom: 0.14rem solid #707070;
}

div.FooterSubpartContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 0.7rem;
    align-items: center;
}



/*** Content cards ***/


.ContentCardContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.ContentCard {
    margin-right: 2rem;
    max-width: 40rem;
}
h2.ContentCardHeading {
    border-bottom: 0.05rem solid;
}



/*** Index cards ***/


.IndexCardContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;

    clear: both;
    overflow: auto; /* Take the height of children -> enable control over margin-bottom */

    padding-top: 0.6rem;
    padding-left: 0px; /* Was 40px for <ul> by default */
    margin-bottom: 2rem;
}

.IndexCard {
    display: inline;
    list-style-type: none;
    overflow: auto; /* Take the height (and width?) of children -> enable control over margin-bottom */
    
    margin: 0.5rem;
}

.IndexCard a {
    display: block; /* Required for text to go nicely */
    
    /*height: 70%;*/ /* Was otherwise too high with scrollbars */
    min-height: 9rem;

    width: 9rem;
    padding: 1rem 1rem 1rem 4.2rem;
    margin: 0;
    
    color: #f0f0f0;
    border: 0.14rem solid #5895bd;
    text-decoration: none;

    background-color: #222222;
    background-repeat: no-repeat;
    background-size: auto 40px;
    background-position: 0.7rem 1rem;
}
.IndexCard:hover a {
    color: #000000;
    background-color: #5895bd;
}

/* Icons for front page */
#IndexCard-About {
    background-image: url('images/indexcard_other/page_about.png');
}
#IndexCard-Pubs {
    background-image: url('images/indexcard_other/page_pubs.png');
}
#IndexCard-Blog {
    background-image: url('images/indexcard_other/page_blog.png');
}
#IndexCard-Software {
    background-image: url('images/indexcard_other/page_software.png');
}
#IndexCard-Projects {
    background-image: url('images/indexcard_other/page_projects.png');
}
#IndexCard-Legacy {
    background-image: url('images/indexcard_other/page_legacy.png');
}

/* Icons for software and projects */
#IndexCard-proctwin {
    background-image: url('images/indexcard_other/proctwin.png');
}
#IndexCard-steamdry {
    background-image: url('images/indexcard_other/steamdry.png');
}
#IndexCard-alchimia {
    background-image: url('images/indexcard_other/alchimia.png');
}
#IndexCard-cocop,#IndexCard-cocoptoolkit {
    background-image: url('images/indexcard_other/cocop_150.png');
}
#IndexCard-discografia {
    background-image: url('images/indexcard_other/bpmn_message.png');
}
#IndexCard-industrialprocess {
    background-image: url('images/indexcard_other/json.png');
}
#IndexCard-simces {
    background-image: url('images/indexcard_other/ev.png');
}
#IndexCard-sxaipi {
    background-image: url('images/indexcard_other/sxaipi_150.png');
}
#IndexCard-d2i,#IndexCard-femma {
    background-image: url('images/indexcard_other/machine.png');
}
#IndexCard-codes,#IndexCard-colma,#IndexCard-nic {
    background-image: url('images/indexcard_other/factory.png');
}
#IndexCard-procemplus,#IndexCard-disma,#IndexCard-inga {
    background-image: url('images/indexcard_other/lightning.png');
}

/* Icons for legacy */
#IndexCard-generally {
    background-image: url('images/indexcard_other/generally.png');
}
#IndexCard-slicks {
    background-image: url('images/indexcard_other/slicks.png');
}
#IndexCard-tk {
    background-image: url('images/indexcard_other/tk.png');
}
#IndexCard-wings {
    background-image: url('images/indexcard_other/wings.png');
}
#IndexCard-aelio,#IndexCard-backupmeister {
    background-image: url('images/indexcard_other/page_software_selfmade.png');
}


.IndexCard a h2 {
    margin-block-start: 0rem;
    margin-block-end: 0.7rem;

    font-size: 1.15rem;
}

.IndexCard:hover a h2 {
    color: #000000;
}



/*** Links to external sites ***/


div.ExtSiteContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

div.ExtSiteItem {
    display: flex;
    flex-direction: row;
    padding: 0.4rem;
    align-items: center;
}

div.ExtSiteItemIconWrapper {
    padding: 0.2rem;
    margin-right: 0.25rem;
}

div.BackgroundCircle { /* Needed for another background color for some icons */
    background-color: #404040;
    border-radius: 50%;
}

img.ExtSiteItemIcon {
    height: auto;
    width: 24px;
}



/*** Buttons and related ***/


/* Link to top of the page */
a.TopButton {
    position: fixed;
    bottom: 0.5rem;
    left: calc(50% + 42rem);
    
    background-color: #222222;
    border: 0.2rem solid #5895bd; /* Nice bright blue */
    color: #f0f0f0;
    font-weight: bold;
    padding: 0.5rem;
    text-decoration: none;
}
a.TopButton:hover {
    background-color: #5895bd; /* Nice bright blue */
    color: #000000;
}
/* Absolute positioning at right edge when narrow window */
@media (max-width: 92rem) {
    a.TopButton {
        left: auto; /* Override explicit "left" with the default */
        right: 1.2rem;
    }
}

/* Shows a "button" with a border */
.UiButtonBase {
    display: inline-block;
    
    background-color: #222222;
    color: #f0f0f0;
    padding: 0.3rem 0.5rem 0.3rem 0.5rem;
    margin-bottom: 0.4rem;
    text-decoration: none;
    white-space: nowrap;
    
    border: 0.1rem solid;
}
.UiButtonEnabled {
    border-color: #34b889;
}
.UiButtonEnabled:hover {
    color: #000000;
    background-color: #34b889;
    border-color: #34b889;
}
.UiButtonDisabled {
    color: #f0f0f0;
    border-color: #707070;
}
.UiButtonNavi {
    border-width: 0.14rem;
}
.UiButtonNaviBack:before {
    content: "\003C\003C\00A0"; /* << + &nbsp; */
}
.UiButtonNaviForward:after {
    content: "\00A0\003E\003E"; /* &nbsp; + >> */
}
.UiButtonNaviPrevious:before {
    content: "\003C\00A0"; /* < + &nbsp; */
}
.UiButtonNaviNext:after {
    content: "\00A0\003E"; /* &nbsp; + > */
}

/* Container of UiButtons */
ul.UiMultiButtonList
{
    list-style-type: none;
    margin-block-start: 0.2rem; /* Eliminate margin above */
    margin-block-end: 0.2rem; /* Eliminate margin below */
    padding-left: 0.5rem;
}
li.UiMultiButtonListItem
{
    display: inline-block;
    padding: 0.2rem;
}

.ButtonDownload:before
{
    content: "\21D3\00A0"; /* &dArr; + &nbsp; (double arrow down) */
}

.ButtonRemote:before
{
    content: "\1F30D\00A0"; /* Earth + &nbsp; */
}

.ButtonView:before
{
    content: "\1F441\00A0"; /* eye + &nbsp; */
}



/*** Table of contents ***/


h2.TocHeading
{
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}
h2.TocHeading:after
{
    content: ":";
}
div.TocItem
{
    padding: 0.2rem;
}



/*** Custom fonts ***/


@font-face {
    font-family: TruenoLight;
    src: url(TruenoLight-E2pg.otf);
}



/*** Filtering ***/


#FilterControlsDetailsElement
{
    display: none; /* Shown if the filters JS file is available */
}

div.FilterControl
{
    float: left;
    padding: 0.3rem 1rem 0.3rem 1rem;
    
    border: 0.15rem solid #222222;
    background-color: #222222;
}

div.FilterControlActive
{
    border: 0.15rem dashed #34b889;
}

#FilterableItemCountDisplay
{
    clear: left;
}



/*** Adaptation to narrow screen ***/


/* Semi-narrow */
/* Adapt decoration width; reduce margins */
@media (max-width: 57rem) {

    header#Main {
        padding: 1.2rem;

        background-position: 1.3rem 2rem; /* left top */
    }

    h1#MainHeaderWebsiteName {
        padding-top: 0.7rem;
    }
    
    nav#NavMainHor {
        padding-bottom: 0.2rem;
        padding-top: 0.8rem;
    }
    
    main {
        margin: 1rem;
        padding: 0.5rem;
    }

    img.SquareDecoration {

        display: block;
        float: unset;

        max-width: 50%;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Narrow */
/* Reduce sizes in main header */
/* The website has been tried with a 320px screen width */
@media (max-width: 38rem) {

    header#Main {
        display: block;
        justify-content: unset;        

        background-position: 1rem 2rem; /* left top */
        background-size: auto 32px;
    }

    h1#MainHeaderWebsiteName {
        padding-left: 2.2rem;
        font-size: 1.6rem;
    }

    a.MenuItem, a.MenuItemActive {
        font-size: 90%;
    }

    img.SquareDecoration {
        max-width: 65%;
    }
    
    .HideWhenNarrow
    {
        display: none;
    }
}