/*

CSS for the layout/style of Lulo.
This includes colours, fonts, etc.

Style
Size
Color

*/


/* Main page */

.lulo-container-body {
    width: 100%;
    display: flex;
    align-items: space-evenly;
}

.lulo-navbar-vertical {
    width: 12%;
    min-height: 100px;
    background-color: #888;
}

.lulo-container-content {
    width: 88%;
    min-height: 100;
}

/* Vertical nav bar */

.lulo-navbar-vertical ul{
    list-style-type: none;
    width: auto;
    margin: 0 0 0 20px;    
}

.lulo-navbar-vertical a{
    display: block;
    margin: 0;
    padding: 10px;
    text-align: left;
    text-decoration: none;
    color: #fff;
    background-color: #999;
}

.lulo-navbar-vertical a:hover{
    background-color: #aaa;
    transition: background-color 0.2s;
}

/* Horizontal nav bar */
.lulo-navbar-horizontal {
    width:100%;
    background-color: #555;
    display: flex;
    justify-content: space-between;
    padding: 0px;
}

.lulo-navbar-horizontal-left {
    background-color: #ddd;
    margin: 0 0 0 20px;
}

.lulo-navbar-right {
    background-color: #dd0;
    width: 10%;
}

.lulo-navbar-horizontal ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

.lulo-navbar-horizontal li{
    float: left;      
}

.lulo-navbar-horizontal a{
    display: block;
    position: relative;
    margin: 0;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background-color: #666;
}

.lulo-navbar-horizontal a:hover{
    background-color: #777;
    transition: background-color 0.2s;
}