@import url('fonts/dogesans.css');

body{
    padding:0; margin:0;
    background-color:#FFE;
    font-family:'Doge Sans', 'Comic Sans MS', Arial, Verdana;
    font-size:2vmax;
    color:#564433;
    line-height: 125%;
}

h1{
    font-size:4vmax; 
}

*.center{
    text-align: center;
}

div{
    position: relative;
    box-sizing: border-box;
}

#bg{
	left:0; right:0; bottom:0; top:0;
    position: fixed;
    background: radial-gradient(ellipse at center, #f7d5b5 57%,#f1c195 87%,#ebab6f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

#wrap{
    z-index:10;
	display:flex;
	justify-content: center;
	width:100%;
}

#content{
	margin-top: 5vmax;
    width:98%;
    min-height:75%;  
    margin-bottom:10vmax; 
    z-index:15;
}

#overlay > div.content{
    position: absolute;
    text-align: center;
}


/* Pagination */
    div.jasmop_pagination{
        text-align: center;
        margin-top:0.5vmax;

    }
    div.jasmop_pagination a{
        background:rgba(255,255,255,.5);
        box-shadow:0.25vmax 0.25vmax 1vmax rgba(0,0,0,.25);
        border:0.2vmax solid #FFF;
        border-radius:1vmax;
        padding:0.5vmax;
        min-width:2vmax;
        display:inline-block;
        transition: transform 0.25s ease-out;
        margin:0.1vmax;
    }
    div.jasmop_pagination a.cur{
        border:0.2vmax solid #000;
        transform: scale(1.05,1.05);
    }
    div.jasmop_pagination a:hover{
        transition: none;
        transform: scale(1.05,1.05);
    }


/* Links */
    a{
        color:#885729;
        font-weight: bold;
        cursor:pointer;
        text-decoration: none;
    }
    a:hover{
        color:#bb8857;
    }

    #wrap #content p.subtitle.permalink{
        margin:0;
        font-size:1.25vmax;
        line-height: 100%;
        cursor:copy;
    }


/* Forms */
    input[type=text], input[type=number], input[type=email], textarea{
        font-size:3vmax;
        padding:0.5vmax;
        text-align: center;
        border-radius:1vmax;
        border:0.25vmax solid #FFF;
        background:rgba(255,255,255,.5);
        box-sizing:border-box;
        outline:none;
    }
    input[type=checkbox]{
        width:2vmax;
        height:2vmax;
        border-radius:1vmax;
        border:0.25vmax solid #FFF;
    }
    input.largeMargin{
        margin-bottom:2vmax;
    }
    input[type=submit], input[type=button], div.genericHelpButton{
        cursor:pointer;
        border:0.25vmax solid #FFF;
        font-size:2vmax;
        padding:1vmax;
        text-align: center;
        border-radius:1vmax;
        background: linear-gradient(rgba(255,255,255,1) 1%, rgba(230,230,230,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        transition:transform 0.25s ease-out;
        color:#000;
        text-shadow:0 0 0.25vmax #FFF;
        vertical-align: bottom;
    } 
    div.genericHelpButton{
        display:inline-block;
        padding:2.169vmax; 
        vertical-align: middle;
    }
    div.genericHelpButton > div{
        background-image:url(/media/img/help_black.svg);
        background-size: 100% 100%;
        width:100%; height:100%;
        position: absolute;
        left:0; top:0;
    }

    .button{
        cursor:pointer;
        transition:transform 0.25s ease-out;
    }
    input[type=submit]:active, input[type=button]:active, .button:active, div.genericHelpButton:active{
        transform:scale(0.95);
    }
    input[type=submit]:hover, input[type=button]:hover, .button:hover, div.genericHelpButton:hover{
        transition:none;
        transform:scale(1.05);
    }
    input, textarea, select, div.genericHelpButton{
        box-shadow:0.25vmax 0.25vmax 0.5vmax rgba(0,0,0,.25);
        outline:none;
    }




/* Menu */
    #menu{
        position: fixed;
        top:0px; left:0; right:0;
        text-align: center;
        background: linear-gradient(rgba(255,255,255,.5) 1%, rgba(200,200,200,.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        border-bottom:0.25vmax #FFF solid; 
        box-shadow:0 0.25vmax 1vmax rgba(0,0,0,.5); 
        display:block;
        z-index:100;
    }
    #menu div.button{
        display:none;
    }
    #menu a img{
        max-height:80%;
        margin-bottom:-15%;
    }
    #menu a{
        display:inline-block;
        padding:0.5vmax;
        font-weight: bold;
        color:#FFF;
        text-shadow:0 0 1vmax #FFF;
        text-decoration: none;
        cursor:pointer;
        transition:transform 0.25s ease-out;
        vertical-align: middle; 
        height:2.75vmax;
        background:rgba(255,255,255,.25);
    }
    #menu a.green{background:rgba(200,255,200,0.5); color:#355;}
    #menu a.yellow{background:rgba(255,240,200,0.5); color:#765;}
    #menu a.red{background:rgba(255,200,200,0.5); color:#755;}  
    #menu a.logout{background:none; color:#755; font-size:1.5vmax;}  
    #menu a.blue{background:rgba(200,200,255,0.5); color:#557;}  

    #menu a:hover{
        transition:none;
        transform:scale(1.05);
        background:rgba(255,255,255,.75);
    }
    #menu a:active{
        transform:scale(0.95);
    }

/* sign in */

    #overlay div.loginProvider img{
        height:5vmax;
        width:5vmax;
        display:block;
        position: absolute;
        left:0.5vmax;
        top:0.5vmax;
    }

    #overlay div.loginProvider p{
        margin:0;
        display:block;
        position: absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        font-size:3.5vmax;
    }

    #overlay div.loginProvider{
        background:#FFF;
        padding:0.5vmax;
        margin:0.5vmax;
        color:#000;
        font-weight: bold;
        height:6vmax;
        cursor:pointer;
        border-radius:1vmax;
        border:0.2vmax solid rgba(255,255,255,.25);
    }

    #overlay div.loginProvider:hover{
        border:0.2vmax solid #FFF;
    }

    #overlay div.text > div.loginProvider:nth-child(2){ 
        background: linear-gradient(to bottom, #d9d9d9 1%,#c4c4c4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        color:#666;
    }
    #overlay div.text > div.loginProvider:nth-child(3){
        background: linear-gradient(to bottom, #efcac3 1%,#e6ada2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        color:#633;
    } 




/* Error handler */
    @keyframes errors{
        from{border-color:#FEE;}
        to{border-color:#ECC;}
    }
    @keyframes notices{
        from{border-color:#EFE;}
        to{border-color:#CEC;}
    }
    @keyframes animateIn{
        from{transform:scale(0);}
        to{transform:scale(1);}
    }
    @keyframes animateOut{
        from{transform:scale(1);}
        to{transform:scale(0);}
    }


    #errors{
        z-index:100000;
        position: fixed;
        top:2%;
        left:50%;
        transform:translateX(-50%);
    }
    #errors div{
        cursor:pointer;
        border:0.25vmax solid #FEE;
        font-size:2vmax;
        padding:1vmax;
        text-align: center;
        border-radius:1vmax;
        color:#622;
        background: linear-gradient(to bottom, #efc3c3 1%,#e6a2a2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        margin:0.5vmax;
        box-shadow:0.5vmax 0.5vmax 2vmax rgba(0,0,0,.25);
        animation:
            animateIn cubic-bezier(.49,1.65,.63,.78) 0.25s,
            errors ease-in-out alternate infinite 1s;
    }
    #errors div.notice{
        color:#262;
        border:0.25vmax solid #EFE;
        background: linear-gradient(to bottom, #c3efc4 1%,#a2e6a4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        animation:notices ease-in-out alternate infinite 1s;
    }
    #errors div:hover{
        border-color:#FFF;
    }
    #errors div.hidden{
        animation:animateOut cubic-bezier(.49,1.65,.63,.78) 0.25s;
        transform:scale(0);
    }





/* Overlay */
    #overlay{
        position: fixed;
        left:0; right:0; bottom:0; top:0;
        background:rgba(255,255,255,.5);
        z-index:1000;
    }
    #overlay.hidden{
        display:none;
    }
    #overlay > div.content{
        min-width:50%;
        max-width:80%;
        margin-left:auto; margin-right:auto;
        left:0; right:0;
        top:50%;
        transform:translateY(-50%);
        position: absolute;
        
    }
    #overlay > div.content > div.text{
        background:rgba(0,0,0,.9);
        border:0.25vmax solid #FFF;
        border-radius:3vmax;
        padding:2vmax;
        color:#FFF;
        box-shadow:0.5vmax 0.5vmax 2vmax rgba(0,0,0,.25);
        overflow:auto;
        max-height:95%;
        padding-bottom:4vmax;
    }
    #overlay > div.content > div.buttons{
        position: absolute;
        bottom:0; left:50%;
        transform: translate(-50%, 50%);
    }




/* COLORS */
    #wrap div.green, #wrap .green, #overlay .green{background-color:rgba(200,255,200,0.5) !important;}
    #wrap div.red, #wrap .red, #overlay .red{background-color:rgba(255,200,200,0.5) !important;}
    #wrap div.blue, #wrap .blue, #overlay .blue{background-color:rgba(200,200,255,0.5) !important;}
    #wrap div.yellow, #wrap .yellow, #overlay .yellow{background-color:rgba(255,255,200,0.5) !important;}
    #wrap div.cyan, #wrap .cyan, #overlay .cyan{background-color:rgba(200,255,255,0.5) !important;}
    



/* Generic templates */
    .hidden{display:none !important;}

    div.flex{
        display:flex;
    }

    #wrap div.border,
    #overlay div.border,
    #wrap .border,
    #overlay .border,
    #wrap div.genRecipeListing.gallery.main div.embed
    {
        background:rgba(255,255,255,.5);
        box-shadow:0.5vmax 0.5vmax 2vmax rgba(0,0,0,.25);
        border:0.2vmax solid #FFF;
        border-radius:2vmax;
        padding:2vmax;
        
    }

    @keyframes flashAnim{
        from{background:rgba(200,255,200,1);}
        to{background:rgba(255,255,255,0);}
    }
    #wrap .flashAnim{
        animation:flashAnim 1s ease-in-out;
    }

    @keyframes flashAnimRed{
        from{background:rgba(255,150,150,1);}
        to{background:rgba(255,150,150,0.5);}
    }
    #wrap .flashAnimRed{
        animation:flashAnimRed 1s ease-in-out alternate 5;
    }

    div.button.generic{
        cursor:pointer;
        border:0.25vmax solid #FFF;
        font-size:2vmax;
        padding:1vmax;
        text-align: center;
        border-radius:1vmax;
        background: linear-gradient(rgba(255,255,255,1) 1%, rgba(230,230,230,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        transition:transform 0.25s ease-out;
        color:#000; 
        text-shadow:0 0 0.25vmax #FFF;
        user-select: none;
    }


    #mediaUploader{
        display:flex;
        width:75%;
        left:50%;
        transform:translateX(-50%); 
    }
    #mediaUploader div.type{ 
        width:50%;
        margin:1vmax;
        background:rgba(255,255,255,.25);
        border-radius:1vmax;
        padding:1vmax;
    }
    #mediaUploader div.type:hover{
        cursor:pointer;
        background:rgba(255,255,255,.5);
    }
    #mediaUploader div.type img{
        max-width:100%;
        max-height:100%;
    }
    #mediaUploader div.type span{
        font-size:1.5vmax;
    }

    #mediaUploader #dropImages{
        border:0.25vmax dashed #FFF;
        background:rgba(255,255,255,.25);
        margin-bottom:1vmax;
        padding:1vmax;
    }
    #mediaUploader #dropImages.hover{
        background:rgba(255,255,255,.5);
    }

    #mediaUploader.uploader{
        display:block;
    }

    #mediaUploader #dropImages img{
        max-width:15vmax;
    }

    


/* Recipe/Collection thumbnails */
    #wrap div.genRecipeListing{
        width:15vmax;
        height:15vmax;
        display:inline-block;
        overflow:visible;
        padding:0;
        margin:0.5vmax;
        vertical-align: top;
        cursor:pointer;
        transition: transform 0.2s ease-out;
    }
    
    #wrap div.genRecipeListing.gallery{
        width:8vmax;
        height:8vmax; 
    }

    #wrap div.genRecipeListing.gallery.main:after{
        padding-top: 56.25%;
        /* 16:9 ratio */
        display: block;
        content: '';
    }

    #wrap div.genRecipeListing.gallery.main:hover{
        transform:none;
    }

    #wrap div.genRecipeListing.gallery.main{
        width:auto; 
        display:block;
        box-sizing: border-box;
        height:auto;
    } 

    #wrap div.genRecipeListing.gallery.main div.embed{
        position: absolute;
        width:100%; height:100%;
        left:0; right:0;
        padding:0;
        overflow:hidden;
    }

    #wrap div.genRecipeListing:hover{
        transform:scale(1.05);
        transition:none;
    }
    #wrap div.genRecipeListing div.img{
        position: absolute;
        top:0; right:0; bottom:0; left:0;
        overflow:hidden;
        background-size:cover;
        padding:0;
        overflow:hidden;
        margin:0;
    }

    #wrap div.genRecipeListing img.recipeCollectionIcon{
        position: absolute;
        right:0; bottom:0;
        width:6vmax; height:6vmax;
        transform:translate(10%,10%);
    }

    #wrap div.genRecipeListing span.subtitle{
        font-size:1.75vmax;
        font-style: italic; 
    }

    #wrap div.genRecipeListing div.recipeName{
        text-align: center;
        padding:0.25vmax;
        position: absolute;
        display: block;
        left:0; right:0;
        top:50%;
        transform: translateY(-50%);
        background: rgba(255,255,255,.75);
        max-height:70%; 
        overflow:hidden;
    }

    #wrap div.genRecipeListing.private div.recipeName{
        background: rgba(150,150,255,.75);
        color:#FFF;
    }
    #wrap div.genRecipeListing.private div.img{
        border:0.2vmax solid #DDF; 
    }

    
    

/* TIPPING */
    #overlay div.suchnom_generic_tip_selector{
        padding:1vmax;
        margin:0.5vmax;
    }
    #overlay div.suchnom_generic_tip_selector > a{
        padding:0.5vmax 1vmax;
        display:inline-block;
        font-size:1.5vmax;
        margin:0.5vmax;
        border:#FFF 0.2vmax solid;
        color:#000;
        border-radius:1vmax;
        cursor:pointer;
        background: linear-gradient(rgba(255,255,255,1) 1%, rgba(230,230,230,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        transition:transform 0.2s ease-out;
    }

    #overlay div.suchnom_generic_tip_selector > a:hover{
        transform: scale(1.05,1.05);
        transition:none;
    }
    #overlay div.suchnom_generic_tip_selector > a img{
        height:2.5vmax;
        width:2.5vmax;
        vertical-align: top;
    }

    #overlay div.suchnom_generic_tip_selector > p{
        margin: 0; padding:0;
    }
    
/* Search suggest */
    #searchSuggest{
        position:absolute;
        left:0;
        top:100%;
        width:100%;
        box-sizing: border-box;
		z-index:20000;
    }
	#searchSuggest > div{
		width: 100%;
		border-radius:1vmax;
		font-size:1.25vmax;
		font-family:Arial, Helvetica, sans-serif;
		background-color: rgba(255,255,255,.75);
		backdrop-filter: blur(3px);
		padding:0.25vmax;
		cursor:pointer;
		border: 0.25vmax solid #FFF;
	}
	#searchSuggest > div:hover, #searchSuggest > div.selected{
		background-color: rgba(255,255,255,.9);
		border: 0.25vmax solid #AFA;
	}
	#searchSuggest > div > div.tag{ 
		display: flex;
		justify-content: space-between;
	}

/* Tag coloring */
	div.tag.default,
	div.tag.default a{
        color:#35A;
        font-weight: normal;
    }
    div.tag.ingredient,
	div.tag.ingredient a{
        color:#3A3;
        font-weight: normal;
    }
	div.tag.name,
	div.tag.name a{
        color:#A33;
        font-weight: normal;
    }

/* Gallery */
    #gallery{
        position: fixed;
        left:0; right:0; bottom:0; top:0;
        background:rgba(255,255,255,.5);
        text-align: center;
        line-height: 100%;
        z-index:10000;
    }
    #gallery.hidden{
        display:none;
    }

    

    #gallery > div.content{
        display:inline-block;
        top:50%;
        transform:translateY(-50%);
        max-height:95%;
        max-width:95%; 
    }
    #gallery > div.content > div.image{
        background:rgba(0,0,0,.75);
        border:0.25vmax solid #FFF;
        border-radius:3vmax;
        box-shadow:0.5vmax 0.5vmax 2vmax rgba(0,0,0,.25);
        overflow:hidden;
    }

    #gallery > div.content > div.image > div.embed{
        width:90vw; 
        padding-bottom:56.25%;
    }

    #gallery > div.content > div.image img{
        max-width:100%;
        max-height:100%;
        display:block;
    }
    #gallery > div.content > div.subs{
        position: absolute;
        bottom:-0.5vmax; left:50%;
        font-style:italic;
        transform: translate(-50%, 100%);
        width:100%;
        min-width:50vw;
    }

    #gallery > div.content > div.subs div.sub{
        display:inline-block;
        overflow:hidden;
        box-shadow:0.5vmax 0.5vmax 2vmax rgba(0,0,0,.25);
        border:0.25vmax solid #FFF; 
        border-radius:1.5vmax;
        background-size:cover;
        width:8vmax;
        height:8vmax;
        margin:0.2vmax;
        transition:transform 0.2s ease-out;
    }
    #gallery > div.content > div.subs div.sub.selected{
        border-color: #AFA;
        transform:scale(1.05,1.05);
    }
    #gallery > div.content > div.subs div.sub:hover{
        cursor:pointer;
        transition:none;
        transform:scale(1.05,1.05);
    }

/* Cook helper */
    #cookHelper{
        position: fixed;
        left:0; right:0; bottom:0; top:0;
        /*background: linear-gradient(rgba(100,100,100,.9) 0%, rgba(0,0,0,.9) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        background:rgba(0,0,0,.25);
        text-align: center;
        line-height: 100%;
        z-index:500;
    }

    #cookHelper > div.center{
        position: absolute;
        top:9vmax;
        width:80%; 
        left:50%;
        max-height:80%;
        transform:translateX(-50%);
    }

    #cookHelper > div.center > div.content{
        /*background: linear-gradient(to bottom, #e8e8e8 1%,#d1d1d1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        /*border:0.25vmax solid #FFF;*/
        /*border-radius:3vmax; */
        /*box-shadow:0.5vmax 0.5vmax 2vmax rgba(0,0,0,.5);*/
        overflow:auto;
        padding-bottom:4vmax;
        color:#000;
        line-height: 130%;
        cursor:pointer;
        background:rgba(0,0,0,.85);
        box-shadow:0.5vmax 0.5vmax 1vmax rgba(0,0,0,.5);
    }

    #cookHelper > div.center > div.content h1{
        font-weight: normal;
        font-size:3vmax;  
        line-height: 125%;
        color:#444; 
        margin:0.5vmax 0;
    }
    #cookHelper > div.center > div.content span.black{
        color:#000;
        font-weight:bold;
    }

    @keyframes cookHelper{
        from{box-shadow:0 0 3vmax rgba(220,255,220,0.5);}
        to{box-shadow:0 0 3vmax rgba(220,255,220,1);}
    }
    

    #cookHelper > div.center > div.content > div.centerer{
        width:100%;
        padding:0 3vmax;
        display:flex;
        justify-content: space-between;
    }

    #cookHelper > div.center > div.content p.bottom{
        font-size:1.5vmax;
        font-style:italic;
        text-align: center;
        display: block;
        margin:0;
    }
 

    #cookHelper > div.center > div.content > div.nav{
        margin:1vmax;
        color:#EEE;
        user-select: none;
    }

    #cookHelper > div.center > div.content > div.nav h3{
        margin:0; padding:0;
    }

    #cookHelper > div.center > div.content > div.nav span{
        width:2vmax; height:2vmax; display:inline-block;
    }

    #cookHelper > div.center > div.content div.left div.ingredients{
        display:flex;
        flex-wrap: wrap;
        justify-content: center;
        box-shadow:0.5vmax 0.5vmax 1vmax rgba(0,0,0,.5);
    }



    #cookHelper > div.center > div.content div.right div.ingredients > div.ingredient
    {
        margin:0.2vmax;
        background:rgba(255,255,255,.75);
        border:#444 dotted 0.2vmax; 
        padding:0.5vmax 1vmax;
        border-radius:0.5vmax;
        display:inline-block;
        box-shadow:0.25vmax 0.25vmax 0.5vmax rgba(0,0,0,.25);
    }
    #cookHelper > div.center > div.content div.right div.ingredients > div.ingredient > p{
        margin:0;
        text-transform: capitalize;
        font-weight: bold;
        font-size:2.5vmax;
    }
    #cookHelper > div.center > div.content div.right div.ingredients > div.ingredient > p.quant{
        font-size:1.5vmax;
        font-style: italic;
        font-weight: normal;
    }


    #cookHelper > div.header{
        top:1vmax; right:0; left:0;
        text-align: center;
        position: absolute;
        user-select: none;
    }

    #cookHelper > div.header div.close{
        background: linear-gradient(to bottom, #ffffff 1%,#f1dbdb 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    }

    #cookHelper > div.header div{
        text-align: center;
        padding:2vmax;
        background: linear-gradient(to bottom, #ffffff 1%,#def1db 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        display: inline-block;
        width:20vmax; 
        font-size: 3vmax;
        font-weight: bold;
        border:0.5vmax solid #FFF;
        box-shadow:0.5vmax 0.5vmax 1vmax rgba(0,0,0,.5);
        border-radius:1vmax;
        margin:0.2vmax;
        cursor:pointer;
    }
    #cookHelper > div.header div:hover{
        box-shadow:0.25vmax 0.25vmax .5vmax rgba(0,0,0,.5);
    }




    #cookHelper > div.ingredientRolloutButton,
    #cookHelper > div.ingredientRollout
    {  
        display:none;
    }
    

    
    
    #cookHelper div.left div.ingredientRollout > div.ingredients > div.ingredient{
        padding:1vmax;
    }

    #cookHelper div.ingredientRollout > div.ingredients > div.ingredient{
        display:flex;
        justify-content: space-between;
        width:100%;
        background:rgb(255,255,255);
        padding:2vmax 1vmax;
        font-size:2.5vmax;
        line-height: 100%;
        overflow:auto;
        cursor:pointer;
    }
    #cookHelper div.ingredientRollout > div.ingredients > div.ingredient:nth-child(even){
        background:rgb(220,220,220);
    }
 
    #cookHelper div.ingredientRollout > div.ingredients > div.ingredient:hover{
        background:rgb(200,255,200);
    }
    #cookHelper div.ingredientRollout > div.ingredients > div.ingredient.acquired{
        background:rgb(100,200,100);
        color:#DFD;
    }

    #cookHelper div.ingredientRollout > div.ingredients > div.ingredient > div{
        width:60%;
        text-align: right;
    }
    #cookHelper div.ingredientRollout > div.ingredients > div.ingredient > div.right{
        text-align: left;
        width:38%;
    }


    #cookHelper > div.center > div.content > div.centerer > div.right{
        width:55%;
        padding:2vmax;
        box-shadow:0.5vmax 0.5vmax 1vmax rgba(0,0,0,.5);
        background: rgba(255,255,255,.8); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        background: linear-gradient(to bottom, #ffffff 1%,#eff2e4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    }

    #cookHelper > div.center > div.content > div.centerer > div.left.ingredientRollout{
        display:block !important;
        width:45%; 
        margin-right:1vmax;
    }
    
    #cookHelper > div.center > div.content > div.centerer > div.left.ingredientRollout > div.ingredients > div.ingredient{
        font-size:1.5vmax;
        padding:1vmax;
    }




    @keyframes jasdogeTalk{
        from{background-position: 0%;}
        to{background-position:-200%;}    
    }
    #cookHelper > div.center > #jasdoge{
        position:absolute;
        bottom:0; right:0;
        transform:translateY(50%) scale(0);
        transition:none;
    }

    #cookHelper > div.center > #jasdoge.pop{
        transform:translateY(50%) scale(1);
        transition:transform 0.25s cubic-bezier(.81,1.68,.18,.86);
    }
    #cookHelper > div.center > #jasdoge div.icon{
        background:rgba(0,0,0,.5);
        width:10vmax;
        height:10vmax;
        background-image: url('/media/img/jasdoge_mp.png'); 
        image-rendering: -moz-crisp-edges;         /* Firefox */
        image-rendering:   -o-crisp-edges;         /* Opera */
        image-rendering: pixelated;/* Webkit (non-standard naming) */
        image-rendering: crisp-edges;

        background-size: 200% 100%;
        animation: jasdogeTalk 1s steps(2) infinite;
        border-radius:5vmax;
        border: 0.25vmax solid #FFF;
        box-shadow:0.25vmax 0.25vmax 0.5vmax rgba(0,0,0,.5);
        position:absolute; 
        right:0;
        transform:translate(50%, -50%);
        top:50%;
    }

    #cookHelper > div.center > #jasdoge div.content{
        background:rgba(0,0,0,.75);
        max-height:9vmax;
        min-height:5vmax;
        padding:2vmax;
        border-radius:1vmax;
        border: 0.25vmax solid #FFF;
        box-shadow:0.25vmax 0.25vmax 0.5vmax rgba(0,0,0,.5);
        color:#FFF;
        padding-right: 8vmax; 
        font-style: italic;
        font-size:2vmax;
        display:inline-block;
    }

    

/* Cook helper end */
/* Collections */
    
    #collectionSelector #newCollection{
        display:flex;
    }
    
    #collectionSelector #newCollection input.name{
        font-size:2vmax;
        width:60%;
        padding:0.5vmax;
        color:#000;
        background:rgba(255,255,255,.75);
    }
    #collectionSelector #newCollection input[type=submit]{
        font-size:2vmax;
        width:40%;
        margin-left:0.25vmax;
        padding:0.5vmax;
    }

    #overlay div.suchnom_collection_generic{
        background: rgba(255,255,255,.75); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        color:#000;
        padding:0.5vmax;
        margin-top:0.5vmax;
        cursor:pointer;
        transition: transform 0.2s ease-out;
        border-radius:1vmax;
    }

    

    #overlay div.suchnom_collection_generic.selected{
        background:rgba(200,255,200,.75);
    }

    #overlay div.suchnom_collection_generic:hover{
        background:#FFF;
    }

    #overlay div.suchnom_collection_generic input[type=checkbox]{
        display:block;
        position: absolute;
        top:50%;
        left:1vmax;
        transform:translateY(-50%);
        box-shadow: none;
        margin:0;
        transition: transform 0.2s ease-out;
    }

/*Collections end*/

/* Push */
    #push{
        z-index:101000;
        position: fixed;
        bottom:4vmax;
        right:4vmax;
        min-width:20%;
        max-width:50%;
        
    }

    @keyframes pushPopup{
        from{transform:scale(0.01,0.01);}
        to{transform:scale(1,1);}
    }
    @keyframes pushGlow{
        from{box-shadow:0 0 2vmax rgba(0,0,0,1);}
        to{box-shadow:0 0 2vmax rgba(0,0,0,.5);}
    }

    #push div.notification{
        background-size:cover;
        background-color:#000;
        border:0.25vmax solid rgba(255,255,255,.5);
        margin:0.25vmax;
        cursor:pointer;
        user-select: none;
        animation:pushPopup 0.25s ease-in-out, pushGlow 1s ease-in-out alternate infinite;
        width:100%;
        border-radius:1vmax;
        line-height: 110%;
    }

    #push div.notification > div.close{
        position: absolute;
        border-radius:2vmax;
        padding:0.5vmax 1vmax;
        top:0; right:0;
        transform: translate(50%, -50%);
        background:#FEE;
        border:0.2vmax rgba(255,255,255,1) solid;
    }

    #push div.notification:hover{
        border-color: rgba(255,255,255,1);
    }

    #push div.notification div.content{
        padding:0.5vmax;
        background:rgba(255,255,255,.75);
        margin:2vmax 0;
        padding:1vmax;
        color:#000;
    }

    #push div.notification div.content strong{
        display:block;
        font-size:1.75vmax;
    }
    #push div.notification div.content em{
        font-size:1.5vmax;
    }
    

/**/

/* Tag inspector */
    #overlay #tagInspector{
        text-align: left;
    }

    #overlay #tagInspector h3:first-child{
        margin:0;
    }
    #overlay #tagInspector textarea{
        width:100%;
        font-size:1.75vmax;
        text-align: left;
        color:#FFF;
        min-height:40vh;
    }
    #overlay #tagInspector p.edit{
        font-size:1.5vmax;
        margin:0;
        font-style:italic;
        cursor:pointer;
        color:#DDD;
        display:inline-block;
    }

/* */
/* Tutorials */
    #tutorial{
        position:absolute;
        left:50%;
        top:50%;
        transform: translateX(-50%);
        z-index:250;
        height:8vmax;
        overflow:visible;
        width:40%; 
        text-align: right;
    }

    #tutorial > div.main > div.arrow{
        left:50%;
        position: absolute;
        overflow:hidden;
        width:4vmax; height:2vmax;
        transform:translateX(-50%);
        top:-2.05vmax;
    }
    #tutorial > div.main > div.arrow > div.point{
        border: 0.25vmax solid #FFF;
        box-shadow:0.25vmax 0.25vmax 0.5vmax rgba(0,0,0,.5);
        color:#FFF;
        width:2vmax;
        height:2vmax;
        position: absolute;
        background:rgba(0,0,0,.75);
        bottom:0;
        transform:rotate(45deg) translate(90%,15%);  
        transform-origin: middle;
    }
    

    #tutorial > div.center > #jasdoge.pop{
        transform:translateY(50%) scale(1);
        transition:transform 0.25s cubic-bezier(.81,1.68,.18,.86);
    }
    #tutorial > div.main > div.icon{
        background:rgba(0,0,0,.5);
        width:10vmax;
        height:10vmax;
        background-image: url('/media/img/jasdoge_mp.png'); 
        image-rendering: -moz-crisp-edges;         /* Firefox */
        image-rendering:   -o-crisp-edges;         /* Opera */
        image-rendering: pixelated;/* Webkit (non-standard naming) */
        image-rendering: crisp-edges;

        background-size: 200% 100%;
        animation: jasdogeTalk 1s steps(2) infinite;
        border-radius:5vmax;
        border: 0.25vmax solid #FFF;
        box-shadow:0.25vmax 0.25vmax 0.5vmax rgba(0,0,0,.5);
        position:absolute; 
        right:0;
        transform:translate(50%, -50%);
        top:50%;
    }

    #tutorial > div.main{
        background:rgba(0,0,0,.75); 
        height:8vmax;
        padding:0.5vmax;
        border-radius:1vmax;
        border: 0.25vmax solid #FFF;
        box-shadow:0.25vmax 0.25vmax 0.5vmax rgba(0,0,0,.5);
        color:#FFF;
        padding-right: 6vmax;
        font-style: italic;
        font-size:2vmax;
        display:inline-block;
        font-size:1.5vmax;
        overflow: visible;
        text-align: left;
        width:100%;
    }
    #tutorial > div.main > div.content{
        top:50%;
        transform:translateY(-50%);
    }

    #tutorial > div.option
    {
        background:rgba(255,255,255,.9);
        width:75%;
        padding:0.5vmax 1vmax;
        border-radius:1vmax;
        border: 0.25vmax solid #000;
        box-shadow:0.25vmax 0.25vmax 0.5vmax rgba(0,0,0,.5);
        color:#000;
        font-weight: bold;
        font-size:1.5vmax;
        margin-top:0.25vmax;
        cursor:pointer;
        display:inline-block;
        transition:margin 0.25s ease-out, width 0.25s ease-out;
        text-align: left;
        margin-right:5%;
    }

    #tutorial > div.option.next{
        background:rgba(220,255,220,.9);
        width:80%;
    }
    #tutorial > div.option.prev{
        background:rgba(255,255,220,.9);
    }
    #tutorial > div.option.close{
        background:rgba(255,220,220,.9);
    }
    


    #tutorial > div.option:hover{
        margin-left:-2%;
        width:80%;
    }
    #tutorial > div.option.next:hover{
        width:85%;
    }

/* */