/*
 *  Colors of main Cassiopeia theme for Medieval Software website
 */
:root 
{
  --cassiopeia-color-primary: #678109;
  --cassiopeia-color-hover: #f3a738;
  --cassiopeia-color-link: blue;
  --header-opacity: 0.20;
  --medieval-os-icon-small: 24px;
  --medieval-os-icon-medium: 48px;
  --medieval-os-icon-large: 64px;
  --medieval-os-icon-fafw: 1.25em;
  --medieval-toolnfo-back: #EEF8FC;
  --medieval-toolnfo-fore: skyblue;
  --medieval-tooltip-back: #E6FFE1;
  --medieval-tooltip-fore: limegreen;  
  --page-title-margin: 1.75rem;
  --page-header-margin: 1.00rem;
  --hr-color: rgb(34, 38, 42, 0.25);  /* var(--body-color) == #22262A */
}


/*
 *  Hiding ugly globe font-awesome icon on weblinks...
 */
div.list-group-item span.icon-globe
{
  display: none !important;
}


/*
 *  Breadcrumbs...
 */
.breadcrumb-item + .breadcrumb-item::before
{
  --breadcrumb-divider: '>';
  font-weight: bold;
}
ol.breadcrumb > li:first-child
{
  display: none !important;
}
ol.breadcrumb > li:first-child + li.breadcrumb-item:not(.active):not(:nth-last-child(2)) > *,
ol.breadcrumb > li:first-child + li.breadcrumb-item.active:not(:last-child) > *
{
  font-size: 0;
  text-decoration: none !important;
}
ol.breadcrumb > li:first-child + li.breadcrumb-item > *::before
{
  font-family: 'Font Awesome 6 Free';
  content: '\f015';
  font-weight: bold;
  font-size: initial;
  display: inline-block;
  width: 1.25em;
}
@media (width <= 767.98px)
{
  ol.breadcrumb > li:first-child ~ li.breadcrumb-item.active:not(:nth-child(2))
  {
    display: none !important;
  }
}


/*
 *  Application extra link paragraph...
 */
.app-link-extra
{
  text-align: center;
  font-size: xx-large;
  font-weight: bold;
}
.app-link-extra i.fa
{
  margin-right: 0.25em;
}
@media (width <= 767.98px)
{
  .app-link-extra
  {
    font-size: x-large;
  }
}


/*
 *  3rd level menu on "main-top" position with current application sections...
 */
.appz-mod
{
  --highlight-color: lemonchiffon;
  --activated-color: gainsboro; 
  --header-bg-color: forestgreen;
  --header-fg-color: white;
  --header-hl-color: yellow;
  --card-border-color: dimgray;
  --card-border-width: 1px;
  --min-item-width: 7.5rem;

  border: none;
  border-radius: initial;
}
.appz-mod *
{  
  margin: 0 !important;
  padding: 0 !important;
}
.appz-mod > div.card-body > ul
{
  border-left: var(--card-border-width) solid var(--card-border-color);
  border-top: var(--card-border-width) solid var(--card-border-color);

  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  flex-flow: row wrap;
}
.appz-mod > div.card-body > ul > li
{
  flex-grow: 1;
  border-right: var(--card-border-width) solid var(--card-border-color);
  border-bottom: var(--card-border-width) solid var(--card-border-color);

  &.active
  {
    background-color: var(--activated-color);
  }
  &:hover
  {
    background-color: var(--highlight-color);
  }
}
.appz-mod > div.card-body > ul > li:first-child > a
{
  background-color: var(--header-bg-color);
  color: var(--header-fg-color);

  &:hover
  {
    color: var(--header-hl-color);
  }
}
.appz-mod > div.card-body > ul > li > *
{
  text-align: center;
  display: inline-block;
  padding: 1em !important;
  width: 100%;
  height: 100%;
  min-width: var(--min-item-width);
}
.appz-mod > div.card-body > ul > li span.fa
{
  margin-right: 0.25em !important;
}

@media (width <= 991.98px) 
{
  .appz-mod
  {
    font-size: smaller;
  }
}

@media (width <= 767.98px)
{
  .appz-mod
  {
    font-size: small;
  }
}


/*
 *  Search result icon + text styling...
 */
div.com-finder ul#search-result-list div.page-header
{
  display: flex;
  flex-flow: row nowrap;
}
div.com-finder ul#search-result-list div.page-header img
{
  align-self: center;
  margin-right: 0.50em !important;
}


/*
 * Main menu (top) - Complete restyling
 */
@media (width <= 991.98px) 
{
  header .container-nav nav ul
  {
	gap: 0.50rem;
  }
}

@media (width <= 767.98px) 
{
  header .container-nav .container-search
  {
	position: absolute;
	top: 0;
	right: 0;
    margin-top: 0.25rem !important;
	margin-right: 0.50rem !important;
  }
  header .container-nav .container-search button
  {
    font-size: 0;
  }
  header .container-nav .container-search button > span
  {
    font-size: initial;
  }
  header .container-nav .container-search input[type="text"]
  {
	width: 9em;
  }
  header .container-nav nav button
  {
    padding-top: 0.50rem;
    padding-bottom: 0.50rem;
	margin-top: 0.32rem;
	margin-bottom: 0.32rem;
  }
  header .container-nav nav ul
  {
    margin-top: 0.50rem !important;
  }
}

header .container-nav
{
  position: relative;
  margin-bottom: 0.50rem;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
header .container-nav nav
{
  padding: 0 !important;
  margin: 0 !important; 
}
header .container-nav nav ul > li
{
  margin-left: 0.50rem !important;
  margin-right: 0.50rem !important;

  padding: 0;
  border-radius: 10px; 
}
header .container-nav nav ul > li > a
{
  padding: 0.75rem;
  padding-left: 0.25rem;
  display: inline-block;
  width: 100%;
}
header .container-nav nav ul > li.active
{
  background-color: rgba(0,0,0,var(--header-opacity));
}
header .container-nav nav ul > li:hover
{
  background-color: rgba(255,255,0,var(--header-opacity));
}
header .container-nav nav ul > li.active:hover::after,
header .container-nav nav ul > li.active::after,
header .container-nav nav ul > li:hover::after,
header .container-nav nav ul > li::after
{
  display: none;
  margin: 0 !important;
  padding: 0 !important;
}


/*
 * List all tags
 */
div.com-tags-tag h3.com_content-category
{
  text-transform: uppercase;
}
div.com-tags-tag > h2
{
  margin-bottom: 1em;
}
div.com-tags-tag > h2::before,
div.com-tags ul.list-group li > h3::before
{
  font-family: 'Font Awesome 6 Free';
  content: '\f02b';
}
div.com-tags ul.list-group li
{
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end  
}
div.com-tags-tag div.page-header
{
  margin: 0.50em 0 !important;
}


/*
 *  Applications articles - Medieval custom top details...
 */
p.app-details
{
  gap: 0.50em;
  display: flex;
  flex-flow: row wrap;
}
p.app-details img
{
    margin-right: 0.25em;
}
p.app-details span
{
    cursor: default;
}
p.app-details i.fa
{
    margin-right: 0.25em;
    text-align: center;
    width: var(--medieval-os-icon-small);
}
@media (width <= 767.98px) 
{
  p.app-details
  {
    flex-flow: column nowrap;
  }
  p.app-details span.divider
  {
    display: none;
  }
}


/*
 *  Article info page header details and indentation...
 */
dl.article-info
{
  --dd-gap: 0.5em;
  margin: 0;
  padding: 0;
  font-family: monospace;
}
dl.article-info > dd:first-of-type
{
  border-top: 1px solid var(--hr-color);
}
dl.article-info > dd
{
  margin: 0;
  padding-top: var(--dd-gap);
}
dl.article-info > dd:last-of-type
{
  border-bottom: 1px solid var(--hr-color);
  padding-bottom: var(--dd-gap);
  margin-bottom: 1em;
}
@media (width <= 767.98px)
{
  dl.article-info
  {
    font-size: smaller !important;
  }
}


/*
 *  "Releases List" module on the left sidebar
 */
#changes-list
{
  margin: 0;
  padding: 0;
  list-style-type: none;  

  display: grid;
  grid-gap: 0.50em 0;
  justify-items: center;
  grid-template-columns: repeat(auto-fill, minmax(5em, auto));
}
.changes-tight
{ 
  grid-template-columns: repeat(auto-fill, minmax(4em, auto)) !important;
}
#changes-list a
{
  text-decoration: none;
}
#changes-list a:hover
{
  text-decoration: underline;
}


/*
 * Apps menu current/active entry hightlight
 */
.apps-mod li.active.current > a
{
  font-weight: bold;
}
.apps-mod li.active:not(.current) > a
{
  text-decoration-thickness: 0.10em;
}


/*
 * Styling the apps menu module...
 */
.apps-mod div.card-body,
.apps-mod ul.nav ul,
.apps-mod ul.nav li
{
  padding: 0;
  margin: 0;
}
.apps-mod ul.nav > li li li
{
  margin: 0.50em 0 0.50em 2em;
}
.apps-mod ul img
{
  margin-right: 3px;
}
/* 1st level and 2nd levels */
.apps-mod ul.nav > li > a,
.apps-mod ul.nav > li > ul > li > a
{
  background-color: var(--card-cap-bg);
  display: block;
  padding: 6px;
}
.apps-mod ul.nav > li > a
{
  background-color: #F8F8EE;
  text-align: center;
  font-size: small;
  text-transform: uppercase;
}
.apps-mod ul.nav > li > ul > li,
.apps-mod ul.nav > li:not(:first-of-type)
{
  border-top: 1px solid var(--card-border-color);
}
/* 3rd level */
.apps-mod ul.nav > li > ul > li > ul > li
{
  font-size: var(--body-font-size) !important;
}
/* 4th level */
.apps-mod ul.nav > li > ul > li > ul > li:not(:last-of-type) > ul
{
  margin-bottom: 1.00em;
}
@media (width <= 991.98px)
{
  .apps-mod
  {
    display: none !important;
  }
}


/*
 *  Small application menu module on top of the screen for mobile/tablet...
 */
.appx-mod
{
  --head-width: 7.0em;
  --icon-size: 21px;
}
.appx-mod ul
{
  font-size: medium;
}
.appx-mod div.card-body, 
.appx-mod ul,
.appx-mod li
{
  padding: 0 !important;
  margin: 0 !important;
}
.appx-mod ul.nav
{
  display: block;
}
.appx-mod ul.nav img
{
  width: var(--icon-size);
  height: var(--icon-size);
  margin-right: 0.25em;
}
.appx-mod ul.nav > li
{
  display: flex;
  flex-flow: row nowrap;
  
  &:not(:first-child)
  {  
    border-top: 1px solid var(--card-border-color);
  }
}
.appx-mod ul.nav > li > a
{
  flex: 0 0 var(--head-width);
  background-color: #F8F8EE;
  text-align: right;
  padding: 0.50em 0.50em 0.50em 0;
}
.appx-mod ul.nav > li > ul
{
  flex-basis: 100%;
  display: flex;
  flex-flow: row wrap;
}
.appx-mod ul.nav > li > ul > li > a
{
  padding: 0.50em;
  display: inline-block;
  align-content: center;
  height: 100%;
}

@media (width >= 992px)
{
  .appx-mod
  {
    display: none !important;
  }
}
@media (width <= 991.98px)
{
  .appx-mod
  {
    margin-bottom: -0.5em !important;
  }
}
@media (width <= 767.98px)
{
  .appx-mod
  {
    --icon-size: 18px;
  }
  .appx-mod ul
  {
    font-size: small;
  }
}


/*
 *  CUE Splitter Help multi-page article - Responsive image map
 */
.cue-splitter-win-help main .cue-imagemap
{
  margin: 2rem;
}
.cue-splitter-win-help main .cue-container
{
  position: relative;
}
.cue-splitter-win-help main .cue-overlay
{
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 1;
  opacity: 0.25;
  border-radius: 6px;
  background-color: red;
  border: 2px solid black;
  pointer-events: none;
}
.cue-splitter-win-help main #cue-tooltip
{
  background-color: var(--medieval-toolnfo-back);
  border: 2px solid var(--medieval-toolnfo-fore);
  padding: 0.35rem 0.50rem;
  border-right: 0;
  border-left: 0;
}


/*
 *  CUE Splitter Help multi-page article - Table of contest styling...
 */
.cue-splitter-win-help main div.article-index
{
  font-size: small;
  float: none !important;
  display: inline-block;
  border-color: silver;
  background-color: #f8f9fa;
}
.cue-splitter-win-help main div.article-index h3
{
  font-size: medium !important;
}
.cue-splitter-win-help main div.article-index ul
{
  list-style: inside;
}
.cue-splitter-win-help main div.article-index ul > li
{
  padding: 0 !important;
}
.cue-splitter-win-help main div.article-index ul > li > a:not(.active)
{
  text-decoration: none;
}


/*
 *  CUE Splitter Help multi-page article content styling...
 */
.cue-splitter-win-help main ul
{
  font-family: monospace;
}
.cue-splitter-win-help main div.pagenavcounter
{
  display: none;
}
.cue-splitter-win-help main figure:last-of-type
{
  margin: 0;
}


/*
 *  Home and Apps pages - Blog items borders
 */
.apps-page
{
  --card-border-color: dimgray;
  --card-border-radius: 1rem;
}
.home-page.apps-page div.blog-items > div.blog-item,
.home-page.apps-page div.blog-items
{
  margin-bottom: 0 !important;
}
.apps-page div.blog-items > div.blog-item
{
  border: 1px solid var(--card-border-color);
  border-radius: var(--card-border-radius);
  margin-bottom: 3rem;
  padding: 1rem 1rem 0 1rem;
}


/*
 *  Subcategories at bottom of Blog page for applications ("Apps" menu)
 */
.apps-page div.cat-children
{
  --button-width: 3.50rem;

  border: 1px solid var(--card-border-color);
  border-radius: var(--card-border-radius);
  margin: 3.00em 0;
  padding: 1rem;
}
.apps-page div.cat-children > h3
{
  padding-bottom: 1rem;
}
.apps-page div.cat-children div h3
{
  display: grid;
  align-items: center;
  grid-template-columns: 1fr auto 0;
}
.apps-page div.cat-children div h3 > a.btn
{
  display: none;
  opacity: 0;
}
.apps-page div.cat-children div.collapse
{
  margin-left: 1.50rem;
  display: block;
  opacity: 1;
}
.apps-page div.cat-children span.badge
{
  padding: 0.25em 0.50em;
  display: inline-flex;
  align-items: center;  
}
/*
@media (width <= 991.98px) 
{
  .apps-page div.cat-children *
  {
  }
}
*/
@media (width <= 767.98px)
{
  .apps-page div.cat-children *
  {
    font-size: medium !important;
  }
}


/*
 * Bottom margin on FAQ and BLOG pages...
 */
.blog-page div.items-more,
.faq-page div.items-more
{
  margin-bottom: 2.5rem;
}


/*
 *  Adjusting the smart search module for the whole website...
 */
form.mod-finder button,
form.mod-finder input
{
  font-size: small;
}


/*
 * Medieval Software logo with black semi-trasparent background...
 */
.navbar-brand
{
  background-color: rgba(0,0,0,var(--header-opacity));
  border-radius: 6px;
}
.navbar-brand a.brand-logo > img
{
  margin: 10px;
}


/*
 *  Styling the "Version History" page articles...
 */
div.changelog-page
{
  font-family: monospace;
}
div.changelog-page:first-child > p:first-of-type > img
{
  content:url('/images/stories/downloads.png');
}
div.changelog-page:first-child > p:first-of-type > span:first-of-type
{
  color: blue;
}
div.changelog-page:first-child > p:first-of-type > span:first-of-type::after
{
  content: ' 🔥LATEST';
}
div.changelog-page > p
{
  font-weight: bold;
  margin-bottom: 0.5rem !important;
}
div.changelog-page > p span.latest
{
  text-transform: uppercase;
  color: blue;  
}
div.changelog-page > p:first-of-type
{
  border-top: 2px dashed silver;
  padding-top: 1rem;
}
div.changelog-page > p > *
{
  vertical-align: middle;
}
div.changelog-page > p > img
{
  margin-right: 0.25rem;
}
div.changelog-page > p > a:not([href="#"])
{
  text-transform: uppercase;
  white-space: pre;
}
div.changelog-page > p > a > i.fa
{
  color: forestgreen;
}
div.changelog-page > ul
{
  border-bottom: 2px dashed silver;
  padding-bottom: 1rem;
  padding-left: 3.5rem;
  font-size: smaller;
  list-style: none;
}
div.changelog-page > ul > li.cl-new  { list-style-image: url('/images/stories/hi_sun.png');     }
div.changelog-page > ul > li.cl-add  { list-style-image: url('/images/stories/hi_add.png');     }
div.changelog-page > ul > li.cl-del  { list-style-image: url('/images/stories/hi_del.png');     }
div.changelog-page > ul > li.cl-chg,
div.changelog-page > ul > li.cl-mod  { list-style-image: url('/images/stories/hi_change.png');  }
div.changelog-page > ul > li.cl-upd,
div.changelog-page > ul > li.cl-upg  { list-style-image: url('/images/stories/hi_improve.png'); }
div.changelog-page > ul > li.cl-bug,
div.changelog-page > ul > li.cl-fix  { list-style-image: url('/images/stories/hi_bug.png');     }
div.changelog-page > ul > li.cl-obj  { list-style-image: url('/images/stories/hi_target.png');  }


/*
 * Styling the download table...
 */
table.downloads-table
{
  border: 1px solid darkgray;
  text-align: center;
  width: 100%;
}
table.downloads-table i
{
  margin-right: 0.20em;
}
table.downloads-table thead
{
  background-color: gainsboro;
  font-weight: bold;
  height: 2.5rem;
}
table.downloads-table thead > tr > td:not(:first-child)
{
  border-left: 1px solid dimgray;
}
table.downloads-table > thead > tr > td:nth-child(1),
table.downloads-table > thead > tr > td:nth-child(2)
{
  text-decoration: underline;
  color: var(--link-color);  
  cursor: pointer;

  &:hover
  {
    color: var(--link-hover-color);
  }
}
table.downloads-table td:first-child
{
  text-align: left;
  padding-left: 0.50em;
}
table.downloads-table > tbody tr
{
  height: 4rem;
  border-top: 1px solid #E5E5E5;
}


/*
 *  Adding Font Awesome Icons to H1 heading of Joomla pages
 */
.head-base h1::before
{
    font-family: 'Font Awesome 6 Free';
    display: inline-block;
    font-weight: bold;
}
.head-base.head-icon-key        h1::before  { content:'\f084'; }
.head-base.head-icon-book       h1::before  { content:'\f518'; }
.head-base.head-icon-cell       h1::before  { content:'\e527'; }
.head-base.head-icon-help       h1::before  { content:'\f0f9'; }
.head-base.head-icon-faqs       h1::before  { content:'\f059'; font-weight: normal; }
.head-base.head-icon-eula       h1::before  { content:'\f0a3'; }
.head-base.head-icon-changelog  h1::before  { content:'\f1da'; }


/*
 *  Adding Font Awesome icons to menu modules...
 */
.base-mod h3::before
{
    font-family: 'Font Awesome 6 Free';
    display: inline-block;
    font-weight: bold;
    width: 1.25em;
    text-align: center;
    margin-right: 0.5rem;
}
.base-mod.bookmarks-mod         h3::before  { content: '\e0bb'; }
.base-mod.popular-mod           h3::before  { content: '\e4b7'; }
.base-mod.search-mod            h3::before  { content: '\f002'; }
.base-mod.latest-mod            h3::before  { content: '\f1ea'; }
.base-mod.most-mod              h3::before  { content: '\e098'; }


/*
 *  Products articles - CSS compatible with intro class...
 */
.page-header *
{
  margin: 0 !important;
}
.page-header img,
.page-title.page-header i.fa  /* Menu "Apps" -> all categories title in blog view */
{
  margin-right: 0.20em !important
}
.page-header .page-header-flex
{
  display: flex;
  flex-flow: row nowrap;
}
.page-header .page-header-flex > *
{
  align-self: center;
}
.page-header
{
  margin-bottom: var(--page-header-margin) !important;
}
.page-title
{
  margin-bottom: var(--page-title-margin) !important;
}
.page-header + .page-header > h2
{
  padding-top: calc(var(--page-title-margin) - var(--page-header-margin)) !important;
}


/*
 *  H1 title with font-awesome icon of List all tags page
 */
.tags-page div.tag-category h1
{
  margin-bottom: var(--page-title-margin) !important;
}
.tags-page div.tag-category h1::before
{
  font-family: 'Font Awesome 6 Free';
  content: '\f02c';
}


/*
 * Classes used in the FAQ plugin of lomart
 */
.faq-root
{
  padding: 1px 1.5em;
}
.faq-root .faq-title
{
  color: unset !important;
  background-color: #EEEEEE !important;
  border: 1px solid black !important;
  margin-top: 1em !important;  
}
.faq-root .faq-content
{
  background-color: gainsboro !important;
  border: 1px solid black !important;
  border-top: none !important;
  padding-left: 2em;
}


/*
 *  Link "Back To Top" inside articles
 */
.link-backtotop
{
  float: right;
  font-size: small;
  text-decoration: none;
  font-weight: normal !important;
}
.link-backtotop:hover
{
  text-decoration: underline;  
}


/*
 *  Global applications article styling
 */
div.intro > p:first-of-type
{
  margin-bottom: 0.75em;
}
div.intro > p:not(:first-of-type),
strong.med-title
{
  font-size: larger;
}
@media (width <= 767.98px)
{
	div.intro > p:not(:first-of-type),
	strong.med-title
	{
	  font-size: medium;
	}
}


/*
 * The tag list at the top/bottom of articles
 */
div.page-header + ul.tags.list-inline
{
  padding-top: var(--page-header-margin);
  border-top: 1px solid var(--hr-color);
}
ul.tags.list-inline
{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 0.75rem;
}
ul.tags.list-inline > li
{
  padding: 0;
  margin: 0;
}
ul.tags.list-inline > li > a
{
  padding: 0.50rem 0.75em;
}
ul.tags.list-inline > li > a:hover
{
  background-color: var(--cassiopeia-color-hover);
}
ul.tags.list-inline > li > a::before
{
  font-family: 'Font Awesome 6 Free';
  content: '\f02b';
  margin-right: 0.15em;
}


/*
 *  External link menu item entry...
 */
.cue-splitter-win-help main a[target="_blank"]::after,
.menu-external::after
{
    font-family: 'Font Awesome 6 Free';
    content: '\f08e';
    margin-left: 0.35rem;
    font-weight: bold;  
}


/*
 *  Weblinks icon margin...
 */
.weblink-category figure.float-start
{
  margin-right: 0.25em;
}


/*
 *  Footer menu
 */
footer.container-footer > div
{
  padding: 1rem 0 !important;
}
.metismenu.mod-menu .metismenu-item
{
  font-size: smaller;
}
.metismenu.mod-menu .metismenu-item.active
{
  background-color: rgba(0,0,0,var(--header-opacity));
  border-radius: 6px;
}
.metismenu.mod-menu .metismenu-item span.fa.p-2
{
  padding: 0 !important;
  margin: 0 0.40em 0 0 !important;
}


/*
 *  Hide footer Joomla copyright message
 */
div.mod-footer
{
  text-align: right;
  cursor: default;
}
.footer2
{
  display: none !important;
}


/*
 *  "Most read" and "Latest News" modules with dots on <li> entries
 */
ul.mod-list.mostread,
ul.mod-list.latestnews
{
  list-style: inside !important;
}


/*
 * Bookmarks module - Font Awesome fixed p-2 class
 */
div.base-mod.bookmarks-mod li.nav-item .p-2
{
  padding: 0 !important;
  margin: 0.5em !important;
}


/*
 *  Sidebar-left module with app categories
 */
ul.mod-articlescategories ul
{
  margin-top: 0.25em;
}


/*
 *  Space between articles and "Latest news" and "Most read" modules...
 */
.container-bottom-b
{
  margin-top: 0.50rem;
}


/*
 *  LOMART image gallery - legend caption is using a small font
 */
.legend-small-font
{
  font-size: x-small !important;
}


/*
 * Article -> Products -> "Screenshots" section = Border aroud thumbnails
 */
div.screenshots figure.upgallery
{
  border: 1px solid black;
}


/*
 * Article -> Products -> "Awards" section = Make <ul> tag horizontal with auto-size flex columns
 */
div.awards ul
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style-type: none;
	gap: 5px;
}
/*
 *  Links/hover on "Reviews" and "App Stores"
 */
div.reviews ul a,
div.appstores ul a
{
  text-decoration: none;
}
div.reviews ul a:hover,
div.appstores ul a:hover
{
  text-decoration: underline;
}
/*
 * Article -> Products -> "Reviews" section = Bold font
 */
div.reviews ul
{
  list-style: circle;
}
div.reviews ul > li:not(:last-child)
{
  padding-bottom: 0.35em;
}
/*
 * Article -> Products -> "Translated Languages" section = Make <ul> tag horizontal with auto-size flex columns
 * Article -> Products -> "App Stores" section = Make <ul> tag horizontal with auto-size flex columns
 */
div.languages ul,
div.appstores ul
{ 
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9em, auto));
    grid-gap: 6px 0;
	list-style-type: none;
}
/*
 * Article -> Products -> "Miscellaneous" section
 */
div.misc ul > li
{
  margin-bottom: 0.75em;
}


/*
 * Used for the OS icons in category, articles and menu
 */
.medieval-icon-small
{
  object-fit: contain;
  width: var(--medieval-os-icon-small);
  height: var(--medieval-os-icon-small);
}
.medieval-icon-medium
{
  object-fit: contain;
  width: var(--medieval-os-icon-medium);
  height: var(--medieval-os-icon-medium);
}
.medieval-icon-large
{
  object-fit: contain;
  width: var(--medieval-os-icon-large);
  height: var(--medieval-os-icon-large);
}
.medieval-icon-fafw
{
  object-fit: contain;
  width: var(--medieval-os-icon-fafw);
  height: var(--medieval-os-icon-fafw);
  line-height: var(--medieval-os-icon-fafw);
  text-align: center;
}