/* ------------------------------------
 * Program Name:    layout.css
 * Written By:      Michele Dijkstra
 * Last Modified:   08-24-2015
 * ------------------------------------ */

/*  Container  */

#flex-container {
    margin:                  0px;
    width:                   100%;

    display:                 -webkit-flex; 
    display:                 flex; 

    -webkit-flex-flow:       row wrap;
    flex-flow:               row wrap;
} 


/*  Areas  */

#header1 {
    background:              -webkit-linear-gradient(top, rgba(252,234,187,1) 0%,rgba(251,223,147,1) 100%);
    background:              -moz-linear-gradient(top, rgba(252,234,187,1) 0%,rgba(251,223,147,1) 100%);
    color:                   #000000;

    margin:                  1px;
    padding:                 .5em;
    min-height:              60px;
    height:                  9%;

    -webkit-flex:            1;
    flex:                    1;

    -webkit-order:           -1;
    order:                   -1;
}

#navmenu {
    background-color:        #252525;
    color:                   #FFFFFF;

    margin:                  3px;
    padding:                 .5em;

    width:                   150px;

    -webkit-flex-basis:      100%;
    flex-basis:              100%;

    -webkit-order:           0;
    order:                   0;
}

#header2{
    background-color:        #663333;
    color:                   #FFFFFF; 

    margin:                  1px;
    padding:                 .5em;
    min-height:              5px; 

    -webkit-flex-basis:      100%;
    flex-basis:              100%;

    -webkit-order:           1;
    order:                   1;
}

#content {
    background-color:        #FFFFFF;
    color:                   #000000;

    margin:                  1px;
    padding:                 .5em;
    min-height:              5%;
    height:                  75%;

    -webkit-flex-basis:      100%;
    flex-basis:              100%;

    -webkit-order:           2;
    order:                   2;

    overflow:                auto;
}

#footer {
    background-color:        #666633;   /* #999966 */
    color:                   #FFFFFF;

    margin:                  1px;
    padding:                 .5em;
    min-height:              5px;
    height:                  20px;

    -webkit-flex:            1;
    flex:                    1;
    
    -webkit-order:           6;
    order:                   6;

    overflow:                auto;
}

#action1 {
    background-color:        #999966;  /* #666633; */
    color:                   #FFFFFF;

    margin:                  1px;
    padding:                 .5em;
    min-height:              75%;
    height:                  75%;
    min-width:		     15%;
    width:		     15%;

    -webkit-flex:            1;
    flex:                    1;
    
    -webkit-order:           3;
    order:                   3;

    overflow:                auto;
}

#action2 {
    background-color:        #FFFFFF;
    color:                   #000000;

    margin:                  1px;
    padding:                 .5em;
    min-height:              80px;
    height:                  100%;
    width:		     15%;

    -webkit-flex:            1;
    flex:                    1;
    
    -webkit-order:           6;
    order:                   6;

    overflow:                auto;
}

/*  Class Modifiers  */

.header-name {
    padding-top:             6px;
    font-size:               4em;
    font-family:             Tangerine;
    margin-bottom:           0px;
}

.header-title {
    padding-top:             6px;
    font-size:               2.5em;
    font-family:             Arial;
    margin-bottom:           0px;
}

.header-subtitle {
    font-size:               1em;
    font-family:             Arial;
}