/******************************************************************************/
/** LAYOUT ********************************************************************/
/******************************************************************************/
.battlemap-left-panel
{
   flex-grow: 1;
   min-width: 70%;
   display: flex;
   flex-direction: column;
}

.battlemap-right-panel
{
   height: inherit;
   max-width: 30%;

   display: flex;
}

/** Left Panel ****************************************************************/
.battlemap-container
{
   flex-grow: 1;
   min-height: 70%;

   overflow: auto;
   width: inherit;
}

.battlemap-footer
{
   max-height: 30%;

   overflow-y: auto;
   width: inherit;
   word-wrap: break-word;
   padding-bottom: 1em;
}

/*** Main View ****************************************************************/
.battlemap-actual
{
   display: inline-block;
   transform-origin: top left;
}

/******************************************************************************/
/** RIGHT PANEL ***************************************************************/
/******************************************************************************/
.battlemap-side-bar
{
   flex-grow: 1;
   overflow-y: auto;
   width: inherit;
   height: inherit;
   word-wrap: break-word;
   display: flex;
   flex-direction: column;
}

.battlemap-tabmenu
{
   flex-grow: 1;
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   width: inherit;
}

/** Tab Menu Specifics ********************************************************/
.battlemap-tabmenu-selector
{
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-between;
}

.battlemap-tabmenu-selector button
{
   flex: 1;
}

.battlemap-tabmenu-content
{
   flex: 1;
}

/** General *******************************************************************/
.battlemap-side-bar-targets
{
   flex-grow: 1;
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   width: inherit;
}

.battlemap-float-left { float: left; }
.battlemap-float-right { float: right; }

.battlemap-manual-controls
{
   max-height: 30%;
   width: inherit;
   flex: initial;

   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
}

/** Tabs **********************************************************************/

/**** Characters Tab */
.battlemap-tabmenu-characters-tab
{
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
}

.battlemap-character-portrait,
.battlemap-timeline-portrait
{
   margin: 0.5em;
   box-sizing: border-box;
   border: 2px solid rgba(0,0,0,0.5);
   border-radius: 25px 25px 0 25px;
   width: 100px;
   height: 100px;
}

.battlemap-timeline-element,
.battlemap-characters-element
{
   border-radius: 6px;
   padding: 1em;
   margin: 0.5em 0.5em 0 0.5em;
   text-align: center;
   box-shadow:
      1px 0px 2px #888,
      -1px 0px 2px #888,
      0px 1px 2px #888,
      0px -1px 2px #888;
   background-color: #EEE;
}

.battlemap-tabmenu-timeline-tab,
.battlemap-tabmenu-characters-tab
{
   background-color: #AAA;
}

.battlemap-tabmenu-characters-tab .battlemap-character-portrait
{
   width: 64px;
   height: 64px;
   float: left;
}

.battlemap-timeline-portrait
{
   display: inline-block;
   vertical-align: middle;
   width: 36px;
   height: 36px;
}
/******************************************************************************/
/** Main View Elements ********************************************************/
/******************************************************************************/
.battlemap-tiled
{
   height: 32px;
   width: 32px;
   /** Fixes odd behavior of table cell being resized. **/
   min-width: 32px;
   max-width: 32px;
}

.battlemap-tile-icon       {z-index: 0; display: table-cell;}
.battlemap-marker-icon     {z-index: 1;}
.battlemap-character-icon  {z-index: 2;}
.battlemap-path-icon       {z-index: 3; color: white;}

.battlemap-marker-icon,
.battlemap-character-icon,
.battlemap-path-icon
{
   position: absolute;
}
.battlemap-tiles-layer
{
   display: table;
}

.battlemap-tiles-layer-row
{
   display: table-row;
}

.battlemap-character-icon
{
   box-sizing: border-box;
   border: 2px solid rgba(0,0,0,0.5);
   border-radius: 25px;
}

.battlemap-marker-icon
{
   box-sizing: border-box;
   min-width: 24px;
   max-width: 24px;
   margin: 4px 0 0 4px;
   height: 24px;
   border-radius: 4px;
   border: none;
   box-shadow:
      1px 0px 2px #333,
      -1px 0px 2px #333,
      0px 1px 2px #333,
      0px -1px 2px #333;
}

.battlemap-can-go-to-marker
{
   background-color: #FFF;
   opacity: 0.3;
}

.battlemap-can-go-to-marker:hover
{
   background-color: rgba(255, 255, 255, 0.9);
   opacity: 1;
}

.battlemap-can-attack-marker
{
   background-color:rgba(0,0,0,0.7);
   min-width: 28px;
   max-width: 28px;
   height: 28px;
   margin: 2px 0 0 2px;
   border-radius: 0;
}

.battlemap-cant-defend-marker
{
   background:
      repeating-linear-gradient(
        -55deg,
        rgba(0,0,0,0),
        rgba(0,0,0,0) 3px,
        rgba(0,0,0,0.7) 3px,
        rgba(0,0,0,0.7) 7px
      );
}

.battlemap-character-icon-disabled
{
   opacity: 0.4;
   filter: grayscale(50%);
   border: 2px dotted rgba(0,0,0,0.7);
}

/**** Path Icons **************************************************************/
.battlemap-path-icon-NR:before,
.battlemap-path-icon-LR:before,
.battlemap-path-icon-RR:before,
.battlemap-path-icon-UR:before,
.battlemap-path-icon-DR:before
{
   content: "}";
}

.battlemap-path-icon-NL:before,
.battlemap-path-icon-LL:before,
.battlemap-path-icon-RL:before,
.battlemap-path-icon-UL:before,
.battlemap-path-icon-DL:before
{
   content: "{";
}

.battlemap-path-icon-NU:before,
.battlemap-path-icon-LU:before,
.battlemap-path-icon-RU:before,
.battlemap-path-icon-UU:before,
.battlemap-path-icon-DU:before
{
   content: "^";
}

.battlemap-path-icon-ND:before,
.battlemap-path-icon-LD:before,
.battlemap-path-icon-RD:before,
.battlemap-path-icon-UD:before,
.battlemap-path-icon-DD:before
{
   content: "v";
}

.battlemap-path-icon-markN:before,
.battlemap-path-icon-markL:before,
.battlemap-path-icon-markU:before,
.battlemap-path-icon-markD:before,
.battlemap-path-icon-markR:before
{
   content: "x";
}