body {
    color: #777;
}

.pure-img-responsive {
    max-width: 100%;
    height: auto;
}

/*
Add transition to containers so they can push in and out.
 */
    #layout,
    #menu,
    .menu-link {
        -webkit-transition: all 0.2s ease-out;
        -moz-transition: all 0.2s ease-out;
        -ms-transition: all 0.2s ease-out;
        -o-transition: all 0.2s ease-out;
        transition: all 0.2s ease-out;
    }

    /*
    This is the parent `<div>` that contains the menu and the content area.
     */
    #layout {
        position: relative;
        padding-left: 0;
    }
    #layout.active {
        position: relative;
        left: 210px;
    }
    #layout.active #menu {
        left: 210px;
        width: 210px;
    }

    #layout.active .menu-link {
        left: 210px;
    }
    /*
    The content `<div>` is where all your content goes.
     */
    .content {
        margin: 0 auto;
        padding: 0 2em;
        max-width: 800px;
        /*margin-bottom: 50px;*/ /*helena*/
        line-height: 1.6em;
    }

    .header {
        margin: 0;
        color: #333;
        text-align: center;
        padding: 2.5em 2em 0;
        border-bottom: 1px solid #eee;
    }
    .header h1 {
        margin: 0.2em 0;
        font-size: 1.7em;
        font-weight: 300;
    }
    .header h2 {
        font-weight: 300;
        color: #ccc;
        padding: 0;
        margin-top: 0;
    }

    .content-subhead {
        margin: 50px 0 20px 0;
        font-weight: 300;
        color: #888;
    }



    /*
    The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
    appears on the left side of the page.
     */

    #menu {
        margin-left: -210px; /* "#menu" width */
        width: 210px;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1000; /* so the menu or its navicon stays above all content */
        background: #191818;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    /*
    All anchors inside the menu should be styled like this.
     */
    #menu a {
        color: #999;
        border: none;
        padding: 0.6em 0 0.6em 0.6em;
    }

    /*
    Remove all background/borders, since we are applying them to #menu.
     */
    #menu .pure-menu,
    #menu .pure-menu ul {
        border: none;
        background: transparent;
    }

    /*
    Add that light border to separate items into groups.
     */
    #menu .pure-menu ul,
    #menu .pure-menu .menu-item-divided {
        border-top: 1px solid #333;
    }
    /*
    Change color of the anchor links on hover/focus.
     */
    #menu .pure-menu li a:hover,
    #menu .pure-menu li a:focus {
        background: #81a9d1;
        color: black;
        text-decoration: none;
    }

    /*
    This styles the selected menu item `<li>`.
     */
    #menu .pure-menu-selected,
    #menu .pure-menu-heading {
        /*background: #1f8dd6;*/
        background: #81a9d1;
    }
    /*
    This styles a link within a selected menu item `<li>`.
     */
    #menu .pure-menu-selected a {
        color: #fff;
    }

    /*
    This styles the menu heading.
     */
    #menu .pure-menu-heading {
        font-size: 110%;
        color: #fff;
        margin: 0;
    }

    /* -- Dynamic Button For Responsive Menu -------------------------------------*/

    /*
    The button to open/close the Menu is custom-made and not part of Pure. Here's
    how it works:
     */

    /*
    `.menu-link` represents the responsive menu toggle that shows/hides on
    small screens.
     */
    .menu-link {
        position: fixed;
        display: block; /* show this only on small screens */
        top: 0;
        left: 0; /* "#menu width" */
        background: #000;
        background: rgba(0,0,0,0.7);
        font-size: 10px; /* change this value to increase/decrease button size */
        z-index: 10;
        width: 2em;
        height: auto;
        padding: 2.1em 1.6em;
    }

    .menu-link:hover,
    .menu-link:focus {
        background: #000;
    }

    .menu-link span {
        position: relative;
        display: block;
    }

    .menu-link span,
    .menu-link span:before,
    .menu-link span:after {
        background-color: #fff;
        width: 100%;
        height: 0.2em;
    }

    .menu-link span:before,
    .menu-link span:after {
        position: absolute;
        margin-top: -0.6em;
        content: " ";
    }

    .menu-link span:after {
        margin-top: 0.6em;
    }


    /* -- Responsive Styles (Media Queries) ------------------------------------- */

    /*
    Hides the menu at `48em`, but modify this based on your app's needs.
     */
    @media (min-width: 48em) {

        .header,
        .content {
            padding-left: 2em;
            padding-right: 2em;
        }

        #layout {
            padding-left: 210px; /* left col width "#menu" */
            left: 0;
        }
        #menu {
            left: 210px;
        }

        .menu-link {
            position: fixed;
            left: 210px;
            display: none;
        }

        #layout.active .menu-link {
            left: 210px;
        }
        .header h1 { /*helena: font-size groter op volledig scherm, kleiner op phone */
        font-size: 3em;
    }


    }

    @font-face {
        font-family: "nevis";
        src: url("nevis.woff") format('woff');
    }



    /* typeahead */
    .tt-input, 
    .tt-hint {
        /*width: 396px;
        height: 30px;
        padding: 8px 12px;
        font-size: 24px;
        line-height: 30px;*/
        border: 2px solid #ccc;
        border-radius: 8px;
        outline: none;
        width: 100%;
    }
    .twitter-typeahead {
        width: 100%;
        }

    .tt-input{
    }

    .tt-hint {
        color: #999
    }

    .tt-dropdown-menu {
        width: 422px;
        margin-top: 12px;
        padding: 8px 0;
        background-color: #fff;
        border: 1px solid #ccc;
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 8px;
        box-shadow: 0 5px 10px rgba(0,0,0,.2);
        max-height: 240px;
        overflow-y: auto;
    }
    @media screen and (max-width:567px) {
        .tt-dropdown-menu { max-height: 180px;}
    }

    .tt-suggestion {
        padding: 3px 20px;
        font-size: 18px;
        line-height: 24px;
    }

    .tt-suggestion.tt-cursor { /* UPDATE: newer versions use .tt-suggestion.tt-cursor */
        color: #fff;
        background-color: #0097cf;

    }

    .tt-suggestion p {
        margin: 0;
    }
    

.button-calorieblue {background:#81A9D1; color:white; }

a ,a:visited {color: #81A9D1}
a:hover {color: #F7941D}

/*pure-hidden-xs */
@media screen and (max-width:567px) {
    .pure-visible-sm{display:none}
    .pure-visible-md{display:none}
    .pure-visible-lg{display:none}
    .pure-visible-xl{display:none}
    .pure-hidden-xs{display:none}
}
/* pure-hidden-sm */
@media screen and (min-width:568px) and (max-width:767px) {
    .pure-visible-xs{display:none}
    .pure-visible-md{display:none}
    .pure-visible-lg{display:none}
    .pure-visible-xl{display:none}
    .pure-hidden-sm{display:none}
}
/* pure-hidden-md */
@media screen and (min-width:768px) and (max-width:1023px) {
    .pure-visible-xs{display:none}
    .pure-visible-sm{display:none}
    .pure-visible-lg{display:none}
    .pure-visible-xl{display:none}
    .pure-hidden-md{display:none}
}
/* pure-hidden-lg */
@media screen and (min-width:1024px) and (max-width:1279px) {
    .pure-visible-xs{display:none}
    .pure-visible-sm{display:none}
    .pure-visible-md{display:none}
    .pure-visible-xl{display:none}
    .pure-hidden-lg{display:none}
}
/* pure-hidden-xl */
@media screen and (min-width:1280px) {
    .pure-visible-xs{display:none}
    .pure-visible-sm{display:none}
    .pure-visible-md{display:none}
    .pure-visible-lg{display:none}
    .pure-hidden-xl{display:none}
}


html, body {height: 100%;}
#layout {min-height: 100%}
#main {overflow:auto; padding-bottom: 40px;}
#footer {position:relative;
    margin-top: -40px;
    margin-left: 20px;
    height: 40px;
    clear: both;
    font-size: small;
    }
    
@media (min-width:568px) { #footer { margin-left: 240px; } }
@media (max-width:567px) { #footer { margin-top: 20px; } }

.pure-form button {
    margin: 0.7em 0 0!important;
} 

.pure-menu-link {white-space: normal!important;}

h1 {font-size: 2em; line-height:1em;}

#results {padding: 5px;}

.menu-subheading {
    padding-top: 20px;
    border: none;
    padding: 2em 0 0.6em 0.6em;
}/*padding-left: 0.6em;}*/

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
    -moz-appearance:textfield;
}