/* The single object which holds one right column and one left column */
.dual-column
  {
  }
/* Left column is for text */
.left-column
  {
    width: 50%;
    float: left;
    margin-left: 5px;
    margin-right: 5px;
  }
/* Right column is for the control panel */
.right-column
  {
    float: left;
    margin-left: 10%;
  }

@media screen and (min-width: 1200px)
  {
    #banner                                                         /* Contains the crest and the name. */
      {
        display: block;
        width: auto;
        z-index: 1;
        position: absolute;
      }
    #bannercrest
      {
        display: block;
        width: 120px;
      }
    #bannertitle
      {
        display: block;
        width: 421px;
      }
    #languageMenu                                                   /* Language buttons */
      {
        display: block;
        position: absolute;
        top: 10px;
        right: 10px;
        width: auto;
        text-align: right;
        padding: 0;
        margin: 0;
        z-index: 2;
      }
    hud                                                             /* Not all games have a HUD; those that do should only show it when the screen is large enough.
                                                                       Otherwise the HUD contents appear in the DOCKED HUD. */
      {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        background: rgba(0, 0, 0, 0.5);
        border: 2px solid rgba(0, 158, 158, 1);
        border-radius: 4px; padding: 8px;
        z-index: 1;
      }
    #dockedhud
      {
        display: none;
      }
    .popped-panel                                                   /* When the central panel is opened, it should cover 80% of the screen. */
      {
        height: 80%;
      }
  }
@media screen and (max-width: 1200px) and (min-width: 600px)
  {
    #banner                                                         /* Contains the crest and the name. */
      {
        display: block;
        width: auto;
        z-index: 1;
        position: absolute;
      }
    #bannercrest
      {
        display: block;
        width: 60px;
      }
    #bannertitle
      {
        display: block;
        width: 210px;
      }
    #languageMenu                                                   /* Language buttons */
      {
        display: none;
      }
    hud                                                             /* Not all games have a HUD; those that do should only show it when the screen is large enough.
                                                                       Otherwise the HUD contents appear in the DOCKED HUD. */
      {
        display: none;
      }
    #dockedhud
      {
        display: inline;
      }
    .popped-panel                                                   /* When the central panel is opened, it should cover 80% of the screen. */
      {
        height: 80%;
      }
  }
@media screen and (max-width: 600px)
  {
    #banner                                                         /* Pull the crest and the name. */
      {
        display: none;
      }
    #bannercrest
      {
        display: none;
      }
    #bannertitle
      {
        display: none;
      }
    #languageMenu                                                   /* Pull language buttons. */
      {
        display: none;
      }
    hud                                                             /* Not all games have a HUD; those that do should only show it when the screen is large enough.
                                                                       Otherwise the HUD contents appear in the DOCKED HUD. */
      {
        display: none;
      }
    #dockedhud
      {
        display: inline;
      }
    .popped-panel                                                   /* When the central panel is opened on a small screen, it should cover 95% of the screen. */
      {
        height: 95%;
      }
  }

#flowfield
  {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: -2;
  }
#loadingbanner
  {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 3;
    color: rgb(255,255,255);
    text-align: center;
  }
#container
  {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: -1;
  }
#centralpanel
  {
    position: absolute;
    color: rgb(255,255,255);
    background-color: rgba(0,0,0,0.5);
    width: 100%;
    bottom: 0px;
    text-align: left;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    overflow-y: hidden;
  }
#panel-content
  {
    overflow-y: auto;
    height: 90%;
  }
                                                                    /* Applies to panel-content, to hide it when the central panel has been collapsed. */
.collapsed-panel
  {
    display: none;
  }
#control-panel
  {
    border-radius: 15px;
    background-color: rgba(0,0,0,0.75);
    padding: 10px;
    text-align: center;
    width: auto;
  }

                                                                    /* Not all games have buttons. Use these as needed. */
.gamepiecebutton
  {
    width:40px;
    height:52px;
    border: solid 1px transparent;
  }
.gamesettingbutton
  {
    width:40px;
    height:40px;
    border: solid 1px transparent;
  }
.gameprocessbutton
  {
    width:80px;
    height:40px;
    border: solid 1px transparent;
  }
.gametilebutton
  {
    width:40px;
    height:40px;
    border: solid 1px transparent;
  }