@import url('https://fonts.googleapis.com/css?family=Arimo:400,700');
@font-face {
  font-family: 'ExistenceLight';
  src: url('res/font/ExistenceLight.ttf') format('truetype'); /*TODO need .woof2 // woff type*/
}
@-ms-viewport {
    width: device-width;
}

* {
    margin:0;
    padding:0;
    box-sizing: border-box;
}
html,
body {
    height:100%;
    font-family: 'Arimo', sans-serif;
}
html, .background_circles {
    font-size: 100%;
    background-image: url("res/image/layout/bg_circle.jpg");
    background-color: #cccccc;
    background-repeat: repeat;
    background-size: 42px; /* original is 102 x 102 */
    background-attachment: fixed;
}
body {
}
#container {
    width:100%;
    min-height:100%;
    position:relative;
}
.content_width {
    min-width:400px;
    max-width:600px;
    width:80%;
    margin:auto;
    /*background-color: rgba(0, 100, 244, 0.1);/**/
}
.background_food {
    background-image: url("res/image/layout/BannerP2.jpg");
    background-repeat: no-repeat;
    background-size: 1920px;
    background-position:center;
}
.background_stripe {
    width:100%;
    background-image: url("res/image/layout/menubar.png");
    background-repeat: no-repeat;
    background-size: 1920px;
    background-position:center;
}
.activePage {
    color: rgba(255, 144, 0, 1);
}

#header {
    width: 100%;
    padding-top:20px;
    position:relative;
}
    #content_header {
    }
    #content_header > div {
        margin:auto;
        width: 80%;
    }
    #content_header img {
        width: 100%;
    }
    #title_sub {
        margin-bottom: 8px;
        font-family: ExistenceLight, Fallback, sans-serif;
        font-size: 2em;
    }


#body {
    padding-bottom:80px;   /* Height of the footer */
    position:relative;
}
    #menubar {
            display:flex;
            flex-direction:row;
            justify-content: space-around;
            align-items: center;
            padding:16px 0px;
            margin-top:16px;
            margin-bottom: 20px;
    }
        .link, #menubar > div, #mobile_menubar > div {
            cursor: pointer;
            font-weight: bold;
        }
    #body > #body_container{
        padding:8px;
    }

#footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:80px;   /* Height of the footer */
    font-size: 0.6em;
}
    #footer > #bg_footer {
        height:42px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    #footer > #bg_footer > div {
        display:flex;
        flex-direction:row;
        justify-content: space-between;
        padding:10px 4px;
    }


#mobile_header {
    display: flex;
    flex-direction: row;
    display:none;
}
    #mobile_header > div {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    #mobile_header img {
        width:100%;
    }
    #mobile_menubar {
        padding: 0.2em 2em;
    }
    #mobile_menubar > div {
        padding: 0.1em;
        margin: 0.2em;
    }

@media (max-width: 450px) {
    html {
    }
    .content_width {
        min-width: initial;
        width: 100%;
    }
    #header, #menubar {
        display:none;
    }
    #mobile_header {
        display: flex;
    }
}
@media (max-width: 300px) {
    #mobile_header {
        flex-direction: column;
    }
}