@media screen
{
  /* use full screen */
  html {
    height: 100%;
  }
  
  body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
  }


    /* general page layout */
    header {
      flex-grow: 0;
      flex-shrink: 1;
      flex-basis: auto;
      height: auto;
      background-color: orange;
      /* layout within header: */
    }

    .bodycenter {
      flex-grow: 1;
      flex-shrink: 0;
      flex-basis: auto;
      height: 1px;  /* anything less than 100% */
      /* layout within .bodycenter: */
      display: -webkit-flex;
      display: flex;
      flex-direction: column;
      padding: 0;
      margin-top: 0;
      margin-left: 0;
    }

    body > footer {
      flex-grow: 0;
      flex-shrink: 1;
      flex-basis: auto;
      padding-left: 1em;
    }


    /* mobile first */

    .bodycenter > main {
      flex: 1 0;
      height: 95%;
      overflow-y: scroll;
      /* padding prevents the margin of descendants from
       * collapsing with the margin of .menubar above */
      padding-top: 1px;
      padding-left: 1em;
      padding-right: 1em;
    }
    
    .bodycenter > aside {
      flex: 0 1;
      height: 100%
      overflow-y: auto;
    }

    footer
    {
        margin-top: 10px;
    }


    /* menu and navigation */
    .menubar
    {
        display: -webkit-flex;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start; /* space-between; */
        overflow: hidden;
        padding-top: 0;
        padding-left: 20px;
        padding-right: 20px;
        margin-left: 0;
        margin-right: 0;
        margin-top: 0;
        margin-bottom: 0;
    }
	
	.menubar > h1 {
		margin-top: 5px;
		margin-bottom: 5px;
	}
	
	.menubar > span {
        flex-grow: 0;
        flex-shrink: 0;
	}

    .menubar > .filler
    {
        flex-grow: 1;
        flex-shrink: 0;
        flex-basis: 1em;
        visibility: hidden;
    }

    .sidenav {
      position: absolute;
      margin: 0;
      left: auto;
      top: auto;
      width: 0; /* 0 width - change this with JavaScript */
      z-index: 1; /* Stay on top */
      height: 80%;
      overflow-y: scroll;
      overflow-x: hidden; /* Disable horizontal scroll */
      padding-top: 0; /*0.1em;*/
      transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
    }
    
    .sidenav>ul {
      background-color: orange;
      margin-top: 0;
      padding-left: 0;
      margin: 0;
    }
    
    .sidenav a {
      color: Black;
      text-decoration: none;
      cursor: pointer;
    }

    .sidenav details > summary {
      cursor: pointer;
    }
    
    .sidenav details > summary:focus {
      outline: none;
    }
    
    /* chrome */
    /*
    .sidenav details > summary::-webkit-details-marker,	
    .sidenav details > summary::marker {
      display:none;
    }
    */
    
    .sidenav .navitem {
      display: block;
      border-top-style: solid;
      border-top-width: 1px;
      border-left-width: 0;
      border-right-width: 0;
      border-bottom-width: 0;
      color: Black;
      text-decoration: none;
      padding: 7px 13px 7px 10px;
    }

    .sidenav .navitem ul {
      padding-top: 3px;
      padding-left: 15px;
    }
	
	.sidenav ul {
      padding-left: 0em;
      margin-top: 0em;
	}

    .sidenav ul li {
      width: auto;
      list-style: none;
      padding-top: 3px;
      padding-bottom: 3px;
    }

    summary > h2 {
        display: inline;
    }

    aside
    {
        padding: 0;
        flex-grow: 1;
        flex-shrink: 0;
        margin: 0;
    }

    aside article
    {
        background-color: LightSkyBlue;
        padding-left: 1em;
        padding-right: 1em;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    aside .tabbedbar
    {
    	flex-grow
        margin-top: 5px;
        text-align: right;
        color: black;
        background-color: LightGrey;
        padding: 5px 20px 4px 20px;
        border-bottom: 1px solid #8c8c8c;
    }

    aside > .tabbedbar ul
    {
        margin: 5px 0 0 0;
    }

    aside > .tabbedbar ul li
    {
        display: inline;
        list-style-type: none;
        margin: 0;
        color: black;
        background-color: Grey;
        padding: 4px 8px;
        border: 2px solid #8c8c8c;
        border-radius: 8px 8px 0 0;
    }

    aside .tabbedbar ul li a
    {
        color: black;
        text-decoration: none;
    }

    aside .tabbedbar ul li.othertab
    {
        display: inline;
        list-style-type: none;
        margin: 0;
        color: black;
        padding: 4px 8px;
        border: 2px solid #8c8c8c;
        border-radius: 8px 8px 0 0;
        background-color: Grey;
    }

    aside .tabbedbar ul li.currenttab
    {
        display: inline;
        list-style-type: none;
        margin: 0;
        color: black;
        padding: 4px 8px;
        border: 2px solid #8c8c8c;
        border-radius: 8px 8px 0 0;
        background-color: LightSkyBlue;
        border-bottom-color: LightSkyBlue;
    }

    .asideheaderbar
    {
        display: none;
    }

    #ID_ASIDEDETAIL_0 {
        display: none;
    }
	
	#ukraine-flag {
		display: none;
	}
}

/* desktop */
@media screen and (min-width: 880px)
{
    header > #id_togglesidenav {
      display: none;
    }
    
    .bodycenter
    {
        display: -webkit-flex;
        display: flex;
        flex-flow: row wrap;
        padding: 0;
        margin-top: 0;
        margin-left: 0;
    }

    .sidenav {
      position: static; /* deactivate the position: absolute */
      -webkit-flex: 0 0 12em;
      flex: 0 0 12em;
      width: 12em;
      background-color: transparent;
      margin-top: 0;
      padding-top: 0;
      margin-left: 0;
      margin-right: 0em;
      height: 90%;
      overflow-y: scroll;
    }

    .bodycenter > main
    {
        -webkit-flex: 1 1 20em;
        flex: 2 1 20em;
        padding-top: 1px;
        padding-left: 1em;
        padding-right: 1em;
    }

    .bodycenter > aside
    {
        -webkit-flex: 1 1 12em;
        flex: 1 1 12em;
        padding-top: 0px;
        padding-left: 1em;
        padding-right: 0px;
    }

    aside .tabbedbar
    {
        display: none;
    }

    .asideheaderbar
    {
        background-color: DeepSkyBlue;
        margin: 0;
        padding-top: 5px;
        padding-left: 1em;
        padding-right: 1em;
        padding-bottom: 5px;
        border-bottom: 1px solid LightSkyBlue;
        display: block;
    }

    .asideheaderbar > a
    {
        color: black;
        text-decoration: none;
   }

    #ID_ASIDEINFORMATION article
    {
        border-bottom: 1px solid Black;
    }
	
    #ID_ASIDEDETAIL_0 {
        display: block;
		background-color: unset;
    }
	
	#ukraine-flag {
		display: block;
	}
}