@charset "UTF-8";
/* CSS Document */
/*
.app{
    height: 1280px;
    width: 800px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
}*/

.app{
    height: 797px;
    width: 603px;
    margin-left:0;
    margin-right:0;
}

body
{
    overflow-x:hidden;
    overflow-y:hidden;
    height: 100%;
    width: 100%;
    
}

/* Top Nav */
#topnav_container 
{
    float: left;
    top: 0%;
    margin-left: 0%;
    width: 100%;
    height: 80px;
    background-color: #F5F5F5;
    z-index: 100;
}

/* Nav Drawer*/
#NavPanel
{
    float: left;
    width: 400px;
    height:712.5px;
    background-color:#F5F5F5;
    position: absolute;
    top:80px;
    left:0;
    z-index: 106;
}

#drawerbar
{
    position: fixed;
    top: 70%;
    width: 25px;
    height: 400px;
    margin-left: 0%;
    z-index: 200;
}
#navicons li
{
    display: inline;
    list-style-type: none;
    padding-right: 20px;
}


#logo
{
    float: left;
    top: 0px;
    margin-left: 0px;
    width: 13.25%;
    height: 80px;
    z-index: 600;
    
}

/*Add button */
#addbutton
{
    float: left;
    top: 0%;
    margin-left: 55%;
    width: 13.25%;
    height: 80px;
    background-color: #F5F5F5;
    z-index: 101;
}
/*Search button */
#searchbutton
{
    float: left;
    top: 0%;
    margin-left: 0%;
   width: 13.25%;
    height: 80px;
    background-color: #F5F5F5;
    z-index: 101;
}

/*sliding panels for top nav item*/
#AddPanel
{
   display:none;
    width:100%;
    height:710px;
    background-color:#F5F5F5;

    position:absolute;
    top:78px;
    z-index: 120;

}



#SearchPanel
{
   display:none;
    width:100%;
    height:140px;
    background-color:#F5F5F5;
    position:absolute;
    top:78px;
    z-index: 120;

}

#filterdown
{
    width: 50%;
    height: 125px;
    
}


#leftsector
{
    float: left;
    top: 0%;
    margin-left: 0%;
    width: 50%;
    height: 712.5px;
    z-index: 101;
}

/*Expiry Container */
#expiry_container
{
    float: left;
    top: 9.5%;
    width: 99%;
    height: 50%;
    margin-left: 0%;
    background-color: #EDEDED;
    border-right: 8px solid #ED5A24;
    z-index: 101;
    overflow: hidden;
    
}

#expiryFilter
{
   display:none;
    width:50%;
    height:40px;
    background-color:#F5F5F5;
    
    position:absolute;
    top:135px;
    left:0;
    z-index: 103;

}

#e_options{
    margin-top:10px;
}


#e_options a{
    color: #ED5A24;
}
.e_filterOptions{
    font-family: 'trade_gothic_lt_stdregular';
    font-size:13px;
    padding:10px;
    border-right:1px solid white;
}






/*Inventory Container */
#inventory_container
{
    float: left;
    width: 99%;
    height: 51%;
    margin-left: 0%;
    background-color: #EEEEEE;
    border-right: 8px solid #83D1DD;
     z-index: 101;
}

/*Recipie Container */
#recipie_container
{
    float: left;
    top: 9.5%;
    width: 50%;
       height: 657px;
    margin-left: 0%;
    background-color: #F5F5F5;
    z-index: 101;
}

#recipeFilter
{
   display:none;
    width:50%;
    height:40px;
    background-color:#F5F5F5;
    
    position:absolute;
    top:135px;
    right:0;
    z-index: 103;

}

#r_options{
    margin-top:10px;
}


#r_options a{
    color: #00A599;
}
.r_filterOptions{
     font-family: 'trade_gothic_lt_stdregular';
    font-size:13px;
    padding:10px;
    border-right:1px solid white;
}




.current{
    background-color:#EEE;
}



#recipiescroll
{
    position: absolute;
    left: 50%;
    top: 9.%;
    width: 50.5%;
      height: 657px;
    background-color: #F5F5F5;
    overflow-y: scroll;
    z-index: 102;
}

.recipeTitle
{
    position:absolute;
    top: 205px;
    left: 10px;
    width: 100%;
    padding-bottom: 0 px;
    font-family: 'trade_gothic_lt_stdCnno.18';
    font-size:30px;
    color: #FFF;
    float: left;
    z-index: 108;
}

.recipeTime
{
    position:absolute;
    top:230px;
    left: 10px;
    font-family: 'trade_gothic_lt_stdCnno.18';
    font-size:24px;
    color: #FFF;
    z-index: 108;
}

#recipie1
{
    width: 100%;
    height: 340.6px;
    background-color: #D5962B;
}
#recipie2
{
    width: 100%;
    height: 340.6px;
      background-color: #063D5A;
}
#recipie3
{
       width: 100%;
    height: 340.6px;
      background-color: #AF4F00;
}

#recipie4
{
     width: 100%;
      height: 340.6px;
      background-color: #F89D75;
}
    
.noscroll
{
    overflow-x: hidden;
}

#name{
    position: absolute;
    left: 70px;
    top: 20px;
    width: 300px;
    font-family: 'trade_gothic_lt_stdCnno.18';
    font-size: 32px;
    z-index: 900;
    color: #329298;
}