/* ============================ *
 * ## Flighttracking PC menu ##
 * ============================ */

/* transition-durations */
.flighttracking-menu,
.flighttracking-menu .menu-container,
.flighttracking-menu .button-containers .expand-container,
.flighttracking-menu .menu-button .icon,
.flighttracking-menu .menu-button .label-container,
.flighttracking-menu .menu-button .label-container .label,
.flighttracking-menu .menu-button .overlay-container,
.flighttracking-menu .menu-button .overlay .background-container,
.flighttracking-menu .menu-button .overlay .background-container .background  {
   transition-duration: .33s;
   -webkit-transition-duration: .33s;
}

.flighttracking-menu > .content-container,
.flighttracking-menu .gradient-container {
   float: left;
   height: 100%;
   position: relative;
   width: 100%;
}
.flighttracking-menu > .content-container,
.flighttracking-menu .gradient-container {
   overflow: hidden;
}

.flighttracking-menu .gradient-container .gradient {
   height: 100vh;
   left: 0;
   position: absolute;
   width: 100%;
}

.flighttracking-menu .menu-container,
.flighttracking-menu .version-container,
.flighttracking-menu .visual-container {
   left: 0;
   position: absolute;
   width: 100%;
}

.flighttracking-menu .menu-container,
.flighttracking-menu .version-container {
   z-index: 1;
}

.flighttracking-menu .menu-container,
.flighttracking-menu .visual-container {
   height: 100%;
   top: 0;
}

.flighttracking-menu .version-container {
   border-style: solid;
   border-width: 0;
   bottom: 0px;
   font-size: 12px;
   height: 21px;
   line-height: 20px;
   max-width: 56px;
   text-align: center;
}

.flighttracking-menu .menu-container {
   overflow: hidden;
   padding-bottom: 20px;
}

.flighttracking-menu > .content-container > .gradient-container {
   opacity: .9;
   padding-bottom: 20px;
   z-index: 0;
}

.flighttracking-menu > .content-container > .gradient-container > .gradient { bottom: 0; }

.flighttracking-menu > .content-container .gradient-container.menu { z-index: 1; }
.flighttracking-menu > .content-container .gradient-container.menu > .gradient {
   bottom: -20px;
   opacity: .75;
}

.flighttracking-menu .visual-container {
   pointer-events: none;
   z-index: 2;
}

.flighttracking-menu .visual-container .visual {
   height: 100vh;
   position: absolute;
   width: 100vw;
   z-index: 0;
}

.flighttracking-menu .visual-container .visual #shapes { opacity: .04; }
.flighttracking-menu .visual-container .visual #lines {
   opacity: .15;
   stroke-width: 1px;
   vector-effect: non-scaling-stroke;
}

.br-edge .flighttracking-menu .visual-container .visual #lines,
.br-ie .flighttracking-menu .visual-container .visual #lines { stroke-width: 0px; }

.flighttracking-menu .visual-container .visual #lines > path { vector-effect: inherit; }



/* ==================== *
 * ## Menu Container ##
 * ==================== */

.flighttracking-menu .menu-container {
   pointer-events: all;
   top: 0;

   transition-property: padding-right;
   -webkit-transition-property: padding-right;
}

.flighttracking-menu .menu-container .menu {
   float: left;
   height: 100%;
   padding-bottom: 10px;
   padding-right: 2px;
   position: relative;
   width: 100%;
}

.flighttracking-menu .menu-container .menu .borders {
   //border-bottom: 1px solid rgba(30,94,134,.33);
   //border-top: 1px solid rgba(255,255,255,.15);
   height: 100%;
   left: 0;
   pointer-events: none;
   position: absolute;
   top: 0;
   width: 100%;
   z-index: 0;
}


/* ======================= *
 * ## Buttons Container ##
 * ======================= */

.flighttracking-menu .menu-container .button-containers {
   float: left;
   height: 100%;
   overflow: hidden;
   position: relative;
   width: 100%;
   z-index: 1;
}

.flighttracking-menu .button-containers .button-container {
   float: left;
   margin-top: 5px;
   position: relative;
   width: 100%;
}

.flighttracking-menu .button-containers .expand-container {
   float: right;
   margin-right: 1px;
   max-width: 50px;

   transition-property: max-width;
   -webkit-transition-property: max-width;
}

.flighttracking-menu .button-containers .locations {
   //border-bottom: 1px solid rgba(255,255,255,.15);
   //border-top: 1px solid rgba(0,0,0,.15);
}

.flighttracking-menu .button-containers .utilities {
   //border-top: 1px solid rgba(0,0,0,.15);
   bottom: 0;
   position: absolute;
}

.flighttracking-menu .button-containers .button-container #runway-use .visual-container .icon {
   padding: 6px;
   stroke-width: 0;
}

 
/* ============== *
 * ## GUI Menu ##
 * ============== */

.flighttracking-menu.gui-menu {
   height: 100%;
   padding-top: 52px;
   position: absolute;
   top: 0px;
   width: 56px;
}

.gui-menu .menu-button {
   cursor: pointer;
   float: left;
   height: 48px;
   padding: 3px 6px;
   position: relative;
   width: 100%;
}

.gui-menu .menu-button.disabled,
.gui-menu .menu-button.inactive { 
   cursor: default;
}

.gui-menu .menu-button .visual-container {
   float: left;
   height: 100%;
   position: relative;
   width: 100%;
}

.gui-menu .menu-button .visual-container .icon,
.gui-menu .menu-button .visual-container .label {
   position: absolute;
   top: 0;
}

.gui-menu .menu-button .visual-container .icon {
   height: 100%;
   left: 0;
   padding: 10px;
   position: absolute;
   width: 42px;
   z-index: 2;

   transition-property: opacity;
   -webkit-transition-property: opacity;
}

.gui-menu .menu-button .label-container {
   min-width: 180px;
   position: absolute;
   top: 50%;
   width: 100%;
   z-index: 1;

   transform: translate( 56px,-50%) translateZ(0);
   transition-property: transform;

   -webkit-transform: translate( 56px,-50%) translateZ(0);
   -webkit-transition-property: -webkit-transform;
}

.gui-menu .menu-button .label-container .label {
   font-size: 10px;
   float: left;
   opacity: 0;
   position: relative;
   text-transform: uppercase;

   transition-property: opacity;
   -webkit-transition-property: opacity;
}

.gui-menu .menu-button .visual-container .overlay {
   border-radius: 21px;
   float: left;
   height: 100%;
   overflow: hidden;
   position: relative;
   width: 100%;
   z-index: 0;
}

.gui-menu .menu-button .overlay .background-container {
   height: 100vh;
   position: absolute;
   width: 200px;
}

.gui-menu .menu-button .overlay .background-container .background {
   height: 100%;
   opacity: 0;
   position: absolute;
   top: 0;
   width: 100%;

   transition-property: opacity;
   -webkit-transition-property: opacity;
}

/* button state disabled */
.gui-menu .menu-button.disabled .overlay .background-container .disabled { opacity: .66 }
.gui-menu .menu-button.disabled .icon,
.gui-menu .menu-button.disabled .label-container {
   opacity: 1;
}

/* button state highlight */
.gui-menu .menu-button.highlight .overlay .background-container .selected { opacity: .5; }

/* button state inactive */
.gui-menu .menu-button.inactive .visual-container .icon,
.flighttracking-menu.menu-expanded .menu-button.inactive .label-container .label {
   opacity: .5;
}

/* button state picked */
.gui-menu .menu-button.picked .overlay .background-container .selected { opacity: .75; }
.gui-menu .menu-button.picked.highlight .overlay .background-container .selected { opacity: 1; }
.gui-menu .menu-button.picked .visual-container .icon { stroke-width: 2px; }


/* =============== *
 * ## Main Menu ##
 * =============== */


/* ==================== *
 * ## Main Menu Buttons ##
 * ==================== */

.flighttracking-menu.main-menu { left: 0; }

.main-menu .visual-container .visual {
   bottom: 0;
   left: 0;
}


/* ====================== *
 * ## expanded (focus) ##
 * ====================== */

.flighttracking-menu.menu-expanded { width: 200px; }
.flighttracking-menu.menu-expanded .logo-container .logo .flighttracking {
   left: 64px;
   opacity: 1;
}
.flighttracking-menu.menu-expanded > .content-container .label-container {
   transform: translate( 48px,-50%) translateZ(0);
   -webkit-transform: translate( 48px,-50%) translateZ(0);
}
.flighttracking-menu.menu-expanded > .content-container .label-container .label { opacity: 1; }

.flighttracking-menu.menu-expanded + .gui-component { padding-left: 202px; }
.flighttracking-menu.menu-expanded + .gui-component .role-header .background-container { padding-left: 202px; }

.flighttracking-menu.menu-expanded .expand-container { max-width: 75px; }

.flighttracking-menu.menu-expanded .arrow { right: 20px; }
.flighttracking-menu.menu-expanded .arrow .point { right: -3px; }
.flighttracking-menu.menu-expanded .arrow .point .top { top: 6px; }
.flighttracking-menu.menu-expanded .arrow .point .bottom { right: 6px; }
.flighttracking-menu.menu-expanded .arrow .shaft { left: 50%; }

.flighttracking-menu.menu-expanded + .gui-component .role-display .display-container > .background-container .background { left: -202px; }


/* ================= *
 * ## Expand Icon ##
 * ================= */


.expand-container,
.expand-container .expand-icon {
   float: left;
   position: relative;
   width: 100%;
}

.expand-container {
   cursor: pointer;
   padding: 10px 5px;
}

.expand-container .expand-icon {
   height: 100%;
   opacity: .75;
   pointer-events: none;

   transition: opacity .25s;
   -webkit-transition: opacity .25s;
}

.expand-container:hover .expand-icon { opacity: 1; }


/* ==================== *
 * ## Line Container ##
 * ==================== */

.expand-icon .line-container {
   padding-left: 5px;
   position: relative;
   float: left;
   width: 100%;
   height: 100%;
}

/* transition duration */
.expand-icon .line-container .arrow,
.expand-icon .line-container .arrow .point,
.expand-icon .line-container .arrow .point .bottom
.expand-icon .line-container .arrow .point .top
.expand-icon .line-container .arrow .shaft {
   transition-duration: .25s;
   -webkit-transition-duration: .25s;
}

.expand-icon .line-container .top,
.expand-icon .line-container .middle,
.expand-icon .line-container .bottom {
   border-style: solid;
   float: left;
   clear: both;
   opacity: .85;
   position: relative;
}

.expand-icon .line-container .top, .expand-icon .line-container .bottom, .expand-icon .line-container .middle { width: 100%; }
.expand-icon .line-container .top, .expand-icon .line-container .bottom { height: 6px; }

.expand-icon .line-container .top {
   border-radius: 3px 3px 0 0;
   border-width: 1px 1px 0 1px;
}

.expand-icon .line-container .bottom {
   border-radius: 0 0 3px 3px;
   border-width: 0 1px 1px 1px;
}

.expand-icon .line-container .middle {
   border-width: 0 1px 0 0;
   height: 8px;
}

.arrow,
.arrow .point {
   position: absolute;
   top: 50%;

   transition-property: right;
   -webkit-transition-property: right;
}

.arrow {
   height: 20px;
   right: 25px;
   width: 16px;
  
   transform: translate(0,-50%);
   -webkit-transform: translate(0,-50%);
}

.arrow .point {
   height: 8px;
   right: 0;
   width: 8px;
  
   transform-origin: top right;
   transform: rotate(45deg);
  
   -webkit-transform-origin: top right;
   -webkit-transform: rotate(45deg);
}

.arrow .point .bottom,
.arrow .point .top,
.arrow .shaft {
   position: absolute;
}

.arrow .point .bottom,
.arrow .point .top {
   top: 0;
}

.arrow .point .top {
   left: 0;
   height: 2px;
   width: 100%;

   transition-property: top;
   -webkit-transition-property: top;
}

.arrow .point .bottom {
   right: 0;
   width: 2px;
   height: 100%;

   transition-property: right;
   -webkit-transition-property: right;
}

.arrow .shaft {
   height: 2px;
   left: 0px;
   top: 9px;
   width: 100%;

   transition-property: left;
   -webkit-transition-property: left;
}


/* ================ *
 * ## Utils Menu ##
 * ================ */

.flighttracking-menu.utils-menu { right: 0px; }

.utils-menu .visual-container .visual {
   bottom: 0;
   right: 0;
}


/* ==================== *
 * ## Responsive CSS ##
 * ==================== */

@media (max-height: 600px)
{
   .gui-menu .menu-button {
      height: 40px;
      padding: 0px 6px;
   }
}