/* ==============================================================
    SIMPLE FLEX BOX SHORTCUTS  
    *** NOTE *** See below for "SCROLLING FLEXBOX"
    best explanation here:  http://the-echoplex.net/flexyboxes
    page here:  https://css-tricks.com/snippets/css/a-guide-to-flexbox/
    ============================================================== */

  /* ------------------------------------------------
     CONTAINER DIV :: PART 1 :: MAKE IT A CONTAINER
     ------------------------------------------------ */
    .flexDisplay, #switches {  
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
    }

  /* ------------------------------------------------
     CONTAINER DIV :: PART 2 :: WHICH DIRECTION ?
     ------------------------------------------------ */
    
    .flexDirectionCol, #switches  {
        -webkit-box-direction: normal;
        -moz-box-direction: normal;
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;                
    } /* one div stacked on another */

    .flexDirectionRow {
        -webkit-box-direction: normal;
        -moz-box-direction: normal;
        -webkit-box-orient: horizontal;
        -moz-box-orient: horizontal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;                
    } /* divs along side each other */

    .flexNoWrap {
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    } /*no-wrap = single line, options: wrap / wrap-reverse*/

  /* ------------------------------------------------
     CONTAINER DIV :: PART 3 :: HORIZONTAL JUSTIFY CONTENT
     ------------------------------------------------ */
    .flexJustifyCenter {
        -webkit-box-pack: center;
        -moz-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
    
    .flexJustifyRight {
        -webkit-box-pack: right;
        -moz-box-pack: right;
        -webkit-justify-content: right;
        -ms-flex-pack: right;
        justify-content: right;
    }    
    
    /* Works on Vertical as well !!! */
    .flexJustifySpaceBetween {
        -webkit-box-pack: justify;
        -moz-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;                
    } /* to left and right edges, and space between */

    .flexJustifySpaceAround, #switches {
        -webkit-box-pack: justify;
        -moz-box-pack: justify;
        -webkit-justify-content: space-around;
        -ms-flex-pack: distribute;
        justify-content: space-around;                
    } /* space on edges as well */

  /* ------------------------------------------------
     CONTAINER DIV :: PART 4 :: VERTICAL ALIGNMENT OF ITEMS
     ------------------------------------------------ */
  
    /*See above for flexJustifySpaceBetween ... as a way of stretching */
    .flexAlignContentStretch { /* Default */
        -webkit-align-content: stretch;
        -ms-flex-line-pack: stretch;
        align-content: stretch;      
     }
  
    .flexAlignItemsStart {
        -webkit-box-align: start;
        -moz-box-align: start;
        -webkit-align-items: flex-start;
        -ms-flex-align: start;
        align-items: flex-start;                
    }

    .flexAlignItemsEnd {
        -webkit-box-align: end;
        -moz-box-align: end;
        -webkit-align-items: flex-end;
        -ms-flex-align: end;
        align-items: flex-end;                
    }

    .flexAlignItemsCenter {
        -webkit-box-align: center;
        -moz-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;         
    }

  /* ------------------------------------------------
     CHILD BOXES
     ------------------------------------------------ */
    .flex00, .flex00a {
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
    } /* 3 things: flex-grow flex-shrink flex-basis */
    /* flex-grow = ability to grow, and proportion */
    /* flex-shrink = ability to shrink, and proportion */
    /* flex-basis = either a default size, or auto, or 0 */
    
    /* flex: 1 0 auto */
    .flex10a {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        -webkit-flex: 1 0 auto;
        -ms-flex: 1 0 auto;
        flex: 1 0 auto;
    } /* can grow, cannot shrink */
    
    /* flex: 1 1 auto */
    .flex11a, #switches {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        -webkit-flex: 1 1 auto;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto; 
    }

    .flex22a {
        -webkit-box-flex: 2;
        -moz-box-flex: 2;
        -webkit-flex: 2 2 auto;
        -ms-flex: 2 2 auto;
        flex: 2;             
    }    

    .flex33a {
        -webkit-box-flex: 3;
        -moz-box-flex: 3;
        -webkit-flex: 3 3 auto;
        -ms-flex: 3 3 auto;
        flex: 3;             
    }         

    .flex44a {
        -webkit-box-flex: 4;
        -moz-box-flex: 4;
        -webkit-flex: 4 4 auto;
        -ms-flex: 4 4 auto;
        flex: 4;             
    }     
    .flexAAa {
        -webkit-box-flex: 10;
        -moz-box-flex: 10;
        -webkit-flex: 10 10 auto;
        -ms-flex: 10 10 auto;
        flex: 10;             
    }        /* A=10 */
    .flexFFa {
        -webkit-box-flex: 15;
        -moz-box-flex: 15;
        -webkit-flex: 15 15 auto;
        -ms-flex: 15 15 auto;
        flex: 15;             
    }        /* F=15 */
    
    
 /* ==============================================================
    SCROLLING CHILD FLEX BOXES  (eg headers etc)
    __ how to __
 
       To get flex working correctly with scrolling,
       must set the overall container with an absolute position
       see here:  http://codepen.io/JosephSilber/pen/HqgAz
       Safari says it works:  http://caniuse.com/#feat=intrinsic-width

        <div class="flexScrollTopContainer flexDisplay flexDirectionCol">
            <div class="flex00">
                example fixed heading here
            </div>        
            <div class="flex11a flexDisplay flexColOverflowParent scrollNoBounce">
                <div class="flexColOverflowChild flexDisplay">
                     Stuff here that overflows
                </div>
            </div>
        </div>
    ============================================================== */
    .flexScrollTopContainer {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;    
    }

    
        .flexColOverflowParent, .flexRowOverflowParent {
            overflow: auto;    
        }
        
            .flexColOverflowChild, .flexRowOverflowChild {
                min-height: -webkit-min-content;
            }    
    
        /* Prevent the "main form" from bouncing on scrolling */
        .scrollNoBounce {
            -webkit-overflow-scrolling: touch;
        }