<?php
  /* Responsive Web Design for small viewports; see lcars-responsive.css */
  use de\pointedears\css\least\Mixins;
?>/* 0.5 to 0.5225s */
  #connectors {
    opacity: 0;
    <?php
      Mixins::transition('', 'opacity 0s 0.5s linear');
    ?>
  }

  #bow-bottom {
    bottom: 2.6em;
    height: 0em;
    opacity: 0;
    <?php
      Mixins::transition('',
          'bottom   0.0225s 0.5s    linear,'
        . ' height  0.0225s 0.5s    linear,'
        . ' opacity 0s      0.5225s linear');
    ?>
  }
  
  #bow #bottom {
    visibility: hidden;
    <?php
      Mixins::transition('',
          'visibility 0s      0.5225s linear');
    ?>
  }

  .menu-container
  {
    top: 11em;
    width: 5em;
    bottom: 0;
    z-index: 1;
    background-color: #fc6;
    <?php
      Mixins::transition('',
          'top               0.5s 0.5s linear,'
        . ' width            0.5s 0.5s linear,'
        . ' bottom           0.5s 0.5s linear,'
        . ' background-color 0s   1s   linear'
      );
    ?>
  }
  
  .menu {
    height: 21.8em;
    <?php
      Mixins::transition('', 'height 0.5s 0.5s linear');
    ?>
  }
  
  .menu ul:first-child {
    padding-top: 0;
    <?php
      Mixins::transition('', 'padding-top 0.5s 0.5s linear');
    ?>
  }
    
  .menu .button
  {
    width: 5em;
    <?php
      Mixins::transition('', 'width 0.5s 0.5s linear');
    ?>
  }

  /* 0.5225s to 0.6475s */
  #bow-top-left {
    height: 0;
    <?php
      Mixins::transition('', 'height 0.125s 0.5225s linear');
    ?>  
  }

  /* at 0.6475s */
  #bow-top .text {
    opacity: 0;
    <?php
      Mixins::transition('-property', 'opacity');
      Mixins::transition('-delay', '0.6475s');
      Mixins::transition('-timing-function', 'linear');
    ?>
  }
  
  .empty #bow-top .text {
    opacity: 1;
  }
  
  /* 0.6475s to 1.1475s */
  #bow-top {
    left: 100%;
    min-width: auto;
    border-top-left-radius: 0;    
    border-bottom-left-radius: 0;
    border-top-right-radius: 1.2em;
    border-bottom-right-radius: 1.2em;
    opacity: 0;
    <?php
      Mixins::transition('',
          'left                        0.5s 0.6475s linear,'
        . ' min-width                  0s   0.6475s linear,'
        . ' border-top-left-radius     0.5s 0.6475s linear,'
        . ' border-top-right-radius    0.5s 0.6475s linear,'
        . ' border-bottom-right-radius 0.5s 0.6475s linear,'
        . ' opacity                    0s   1.1475s linear');
    ?>
  }

  .empty #bow-top {
    left: 0%;
    min-width: 10em;
    border-top-left-radius: 1.2em;
    border-bottom-left-radius: 1.2em;
    border-top-right-radius: 1.2em;
    border-bottom-right-radius: 1.2em;
    opacity: 1;
  }

  .multi-display,
  #content.fixed
  {
    <?php
      Mixins::transition('',
          'top    0.25s 1.1475s linear,'
        . ' left  0.25s 1.3975s linear');      
    ?>
  }
  
  .multi-display
  {
    top: 0.2em;
    left: 0.2em;
  }
  
  #content.fixed {
    left: 6.4em;
    top:  9.6em;
  }  

  .menu .bow
  {
    background-color: #fc6;
    <?php
      Mixins::transition('',
        'width 0.5s 0.5s linear,'
        . 'background-color 0s 1.6475s linear'
      );
    ?>
  }
  
  .multi-display .lower .bg
  {
    top: 11em;
    <?php
      Mixins::transition('', 'top 0.25s 1.1475s linear');
    ?>
  }
  
  body {
    margin-top: 9.6em;
    margin-left: 6.4em;
    <?php
      Mixins::transition('',
          'margin-top   0.25s 1.1475s linear,'
        . ' margin-left 0.25s 1.3975s linear');
    ?>
  }

  .multi-display .upper .content #cmd2,
  .multi-display .upper .content #cmd3
  {
    display: none;
  }
  
  .multi-display .upper .content #cmd1,
  .multi-display .upper .content #cmd4
  {
    right: 0;
  }  
  
  .multi-display .upper .content .analysis
  {
    right: 5.2em;
  }
  
  .multi-display .upper .content .commands
  {
    width: 5.2em;
  }