/*---------------------------------------------------------------------------*/
/*                           For  OpenBSD.org.ru                             */
/*---------------------------------------------------------------------------*/
*, *:before, *:after
{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

@font-face
{
    font-family: 'ChicagoFLF';
    src: url('fonts/ChicagoFLF.ttf') format('truetype'); /* Safari, Android, iOS */
}

:root
{
    --button-box-shadow:
    inset -1px -1px 0px 0px #777,
    inset -2px -2px 0px 0px #aaa,
    inset 1px 1px 0px 0px #ddd,
    inset 2px 2px 0px 0px #fff;
    --button-hover-bezel:
    0 0 0 1px #aaa,
    0 0 0 2px #ddd,
    0 0 0 3px #000;
}

@supports (scrollbar-color: auto)
{
  .black-scrollbar
  {
     scrollbar-color: black white;
  }
}

@supports (scrollbar-width: auto)
{
  .black-scrollbar
  {
      scrollbar-width: auto;
  }
}

@supports selector(::-webkit-scrollbar)
{

  .old-scrollbar ::-webkit-scrollbar
  {
    background: url("img/controls/scrollbar-background.png");
  }
  .old-scrollbar ::-webkit-scrollbar-thumb
  {
    background: url("img/controls/scrollbar.png");
  }

}
/*---------------------------------------------------------------------------*/
html, body
{
    -moz-user-select: none;
    -webkit-user-select: none;
    background-image: url("img/patterns/p4.png");
    background-repeat: repeat;
    margin: 0;
    height: 100%;
    font-family: 'ChicagoFLF', 'Times New Roman', 'Georgia', serif;
    font-size: 12px;
    font-weight: normal;
    overflow: hidden;
}

button
{
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

a
{
    color: #000;
}
:focus {outline:none;}
::-moz-focus-inner {border:0;}
/*---------------------------------------------------------------------------*/
.draggable
{
    /*Helper class for js*/
}
/*---------------------------------------------------------------------------*/
.content
{
    top: 200px;
    left: 800px;
    z-index: 2;
    position: absolute;
    font-size: 12px;
    font-weight: normal;
    width: 260px;
    min-width:  64px;
    min-height: 64px;

    border-image-slice:  40 40 40 40;
    border-image-width:  40px 40px 40px 40px;
    border-image-outset: 3px 4px 4px 3px;
    border-image-repeat: repeat round;
    border-style: solid;
    border-image-source: url("img/border/border-image-nobar.png");
    background-color: #ddd;

    resize: both;
    overflow:auto;
    overflow-y: hidden;

    @supports selector(::-webkit-scrollbar)
    {
      border-image-outset: 4px 4px 4px 4px;
    }
}
/*---------------------------------------------------------------------------*/
.win-blue.content
{
    border-image-source: url("img/border/border-image-nobar-blue.png");
}

.win-red.content
{
    border-image-source: url("img/border/border-image-nobar.png");
}
/*---------------------------------------------------------------------------*/
.content .panel
{
    top:0.25px;
    @supports selector(::-webkit-scrollbar)
    {
      top:0px;
    }

    size:100% 19px;
    position: sticky;
    padding-bottom:2px;
    background-size: 100% 100%;
    background-image: url("img/bar/bar.png");
    background-repeat: no-repeat;
    background-position:top top;
}
/*---------------------------------------------------------------------------*/
.win-blue .panel
{
    background-image: url("img/bar/bar-blue.png");
}

.win-red .panel
{
    background-image: url("img/bar/bar.png");
}

/*---------------------------------------------------------------------------*/
.content .inner
{
    overflow-y: auto;
    background-color: #ddd;
    padding: 5px;
    height:100%;
    width:100%;
}

.title
{
    color:#bebebe;
    width: 100%;
    text-align: center;
    font-size: inherit;
    font-weight: inherit;
    padding: 1px 0;
    margin: 0 0 0 0;
}

.content .icon
{
    text-align: center;
    margin: 1px 0;
}

.content ul
{
    list-style-type: none;
    margin: 2px 0 1.5em 0;
    padding: 0 0 0 2em;
    font-size: 12px;
}

.footer
{
    width: 400px;
    text-align: center;
    margin: 2em auto 0;
    font-size: 12px;
}
/*---------------------------------------------------------------------------*/
.control-box
{
    position: absolute;
    padding: 1px;
}
/*---------------------------------------------------------------------------*/
.icon-box.control-box
{
    height:18px;
    width: 26px;
    background-image: url("img/controls/icon-control-button.png");
}

.icon-box.control-box:active
{
    background-image: url("img/controls/icon-control-button-pressed.png");
}

.icon-box.inner
{
  /*For compability*/
}
/*---------------------------------------------------------------------------*/
.win-blue .icon-box.control-box
{
    background-image: url("img/controls/icon-control-button-blue.png");
}
.win-red .icon-box.control-box
{
    background-image: url("img/controls/icon-control-button.png");
}
.win-blue .icon-box.control-box:active
{
    background-image: url("img/controls/icon-control-button-blue-pressed.png");
}
.win-red .icon-box.control-box:active
{
    background-image: url("img/controls/icon-control-button-pressed.png");
}
/*---------------------------------------------------------------------------*/
.control-box-inner:active
{
    box-shadow: none;
}

.control-box-inner
{
  /*For compability*/
}
/*---------------------------------------------------------------------------*/
.close-box.control-box
{

    height:18px;
    width: 24px;
    background-image: url("img/controls/close-control-button.png");
    right: 20px;
}

.close-box.control-box:active
{
    background-image: url("img/controls/close-control-button-pressed.png");
}

.close-box-inner
{
  /*For compability*/
}
/*---------------------------------------------------------------------------*/
.win-blue *.close-box.control-box
{
    background-image: url("img/controls/close-control-button-blue.png");
}
.win-red *.close-box.control-box
{
    background-image: url("img/controls/close-control-button.png");
}
.win-blue *.close-box.control-box:active
{
    background-image: url("img/controls/close-control-button-blue-pressed.png");
}
.win-red *.close-box.control-box:active
{
    background-image: url("img/controls/close-control-button-pressed.png");
}
/*---------------------------------------------------------------------------*/
.maximize-box.control-box
{
    right: 0px;
    height:18px;
    width: 20px;
    background-image: url("img/controls/maximize-control-button.png");
}

.maximize-box.control-box:active
{
    background-image: url("img/controls/maximize-control-button-pressed.png");
}

.maximize-box-inner
{
  /*For compability*/
}
/*---------------------------------------------------------------------------*/
.win-blue *.maximize-box.control-box
{
    background-image: url("img/controls/maximize-control-button-blue.png");
}
.win-red *.maximize-box.control-box
{
    background-image: url("img/controls/maximize-control-button.png");
}
.win-blue *.maximize-box.control-box:active
{
    background-image: url("img/controls/maximize-control-button-blue-pressed.png");
}
.win-red *.maximize-box.control-box:active
{
    background-image: url("img/controls/maximize-control-button-pressed.png");
}
/*---------------------------------------------------------------------------*/
.content .command_button
{
    height: 22px;
    background-color: #dedede;
    display: inline-block;
    margin-bottom: 7px;
    margin-left: 14px;
    border-radius: 3px;
    border: 1px solid #000;
    box-shadow: var(--button-box-shadow);
}

.content .command_button:hover
{
    box-shadow:
    var(--button-box-shadow),
    var(--button-hover-bezel);
}

.content .command_button:active
{
    color: #fff;
    background-color: #666;
    box-shadow:
    var(--button-hover-bezel),
    inset -1px -1px 0px 0px #888,
    inset -2px -2px 0px 0px #777,
    inset 1px 1px 0px 0px #444,
    inset 2px 2px 0px 0px #555;
}
/*---------------------------------------------------------------------------*/
/*Hide only visually, but have it available for screenreaders & for SEO purps*/
/*---------------------------------------------------------------------------*/
.visuallyhidden
{
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.clearfix:before, .clearfix:after
{
    content: " ";
    display: table;
}

.clearfix:after
{
    clear: both;
}
/*---------------------------------------------------------------------------*/