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

/*  Container  */

#flex-container {
    margin:                  0;
    width:                   100%;
    max-width:               35em;

    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:              55px;
    height:                  9%;

    -webkit-flex:            1;
    flex:                    1;
}

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

    margin:                  3px;
    padding:                 .5em;

    width:                   150px;
}

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

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

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

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

    margin:                  1px;
    padding:                 .5em;
    min-height:              25em; 
    height:                  70%;
    max-height:              70%;

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

    overflow:                auto;
}

#footer {
    background-color:        #666633;
    color:                   #FFFFFF;

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

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

    overflow:                auto;
}

#action1, #action2 {
    background-color:        #666633;
    color:                   #FFFFFF;

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

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

    overflow:                auto;
}

/*  Class Modifiers  */

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

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