@CHARSET "UTF-8";

.scrollable {
    position: relative;
    overflow-y: scroll;
}

ul.collection.menu {
    margin-top: 10px;
}

.collection { margin-bottom: 20px; }

.collection > li {
    margin-bottom: 20px;
}

.collection > *:not(.right) {
    float: left;
    margin-right: 20px;
}

.collection > *:not(.right):last-child {
    margin-right: 0px;
}

.collection > .right {
    margin-left: 20px;
    float: right;
}

.collection > li > * {
    vertical-align: top;
}

span.valign > span {
    vertical-align: top;
    height: 20px;
    line-height: 20px;
    margin-bottom: 5px;
}

span.valign > span + span {
    margin-left: 10px;
}

span.valign > span.icon {
    width: 20px;
}

.collection > li.bubble {
    margin-right: 10px;
    margin-bottom: 10px;
}

.collection.right > * {
    float: right;
    margin-left: 20px;
    margin-right: 0px;
}


#footer p + p {
    margin-top: 5px;
}

#mainbody > .header {
    position: fixed;
    z-index: 10;
    padding: 10px 0px;
    height: 40px;
    left: 0px; top: 0px; width: 100%;
    margin-bottom: 0px;
    background-color: var(--headercolor);
    color: var(--headertextcolor);
}

#mainbody > .header span.icon {
    -webkit-filter: invert(100%); filter: invert(100%);
}

#mainbody > .header > *:first-of-type {
    margin: 0 30px;
    width: calc(100% - 60px);
}

#mainbody > .header ~ section:not(.hidden) {
    margin-top: 100px;
}

#mainbody > .header ~ section.player:not(.hidden) + section {
    margin-top: -30px;
}

#mainbody > .header ~ section:not(.player) > * > *:first-of-type {
    padding-top: 0px;
}

.collection:after { content: "."; display:block; clear:both; height:0; visibility:hidden; }

.button { 
    padding: 12px 20px; 
    background-color: #f0f0f0; 
    color: #000; 
    border-radius: 4px; 
    border: 2px solid var(--bordercolor);
}

.button > span {
    line-height: inherit;
    margin-right: 10px;
    vertical-align: top;
}

.button.cancel,
.button.red { color: #fff; background-color: #f00;}

.button.ok,
.button.green { color: #fff; background-color: #40c840;}

.button.blue { color: #fff; background-color: #2697cf;}

.button:hover { 
    background-color: #000; 
    color: #fff; 
    border-radius: 4px; 
}

.button:hover > span {
    -webkit-filter: invert(100%); filter: invert(100%);
}

.articles > li > pre {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5; /* number of lines to show */
            line-clamp: 5; 
    -webkit-box-orient: vertical;
    word-break: normal;
}

.articles > li > pre > a,
.articles > li > pre > img,
.articles > li > pre > br,
.articles > li > pre > iframe,
.articles > li > pre > div,
.articles > li > pre > em {
    position: relative !important;
    display: none !important;
}

.articles > * > span.image {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 5px;
    overflow: hidden;
    background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
    background-color: var(--imageback);
}


header > .selectable > *.selected {
    font-family: 'ptrootbold',Arial,Helvetica,freesans,sans-serif; 
}

.articles > * > span.image > span {
    position: absolute;
    bottom: 10px;
    left: 15px;
    color: var(--textcolor);
    font-size: 12px;
    text-transform: uppercase;
    font-family: 'ptrootbold',Arial,Helvetica,freesans,sans-serif;
}