#loading {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
    background-color: #111;
    background: url('<?php echo $this->baseurl . '/templates/' . $this->template . '/images/ajax-loader.gif'; ?>') no-repeat center center #111;
    opacity: 0.6;
    -webkit-transition: opacity .15s linear; 
    -o-transition: opacity .15s linear;
    -moz-transition: opacity .15s linear; 
    transition: opacity .15s linear;
}

.header, .panel-header {
    display: inline; 
    /*height: 50px; */
    line-height: 50px; 
    vertical-align: middle !important;
    text-align: center;
}

.btn-trans {
  background: transparent; 
  border: none;
}

.btn-trans:focus {
   outline:0;
}

.nav.menu li a {
  border-bottom: 1px #999 solid; 
}

#login-form {
  margin: 20px; 
}

#leftpanel, #rightpanel {
   background: #333; 
   color: #ccc; 
}

#leftpanel a,  #rightpanel a {
   color: #ccc; 
}

#leftpanel a:hover,  #rightpanel a:hover  {
   color: #333; 
}

.ui-panel {
    width: 17em;
    min-height: 100%;
    max-height: none;
    border-width: 0;
    position: fixed;
    top: 0; 
    display: block;
    z-index: 2;
    /*margin-left: -17em;*/
}

.ui-panel-position-left {
    left: 0;
    box-shadow: inset -5px 0 5px rgba(0,0,0,.15);
}

.ui-panel-position-right {
    right: 0;
    box-shadow: inset -5px 0 5px rgba(0,0,0,.15);
}

#content, #leftpanel, #rightpanel {
    transition: margin 300ms ease;
    overflow: hidden; 
}

#content.panel-left-open {
    margin-left: 17em; margin-right: -17em;
}

#content.panel-right-open {
    margin-left: -17em; margin-right: 17em;
}



.ui-panel-position-left.panel-open {
    margin-left: 0px;
}

.ui-panel-position-left.panel-closed {
    margin-left: -17em;
}

.ui-panel-position-right.panel-open {
    margin-right: 0px;
}

.ui-panel-position-right.panel-closed {
    margin-right: -17em;
}

@media (min-width: 1024px) {
    #content.panel-left-open {
        margin-left: 17em; margin-right: 0em;
    }

    #content.panel-right-open {
        margin-left: 0em; margin-right: 17em;
    }  
}

.ui-panel h3 {
  margin: 0;
  padding: 5px;
  background: #444;
  color: #999;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 16px;
}



/* NAVBAR
--------------------------------------------------------*/ 

.navbar {
  margin-bottom: 0; 
}
.navbar-fixed-top {
  max-width: 100%; 
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  height: 50px; 
}
.navbar-btn-left {
  float: left;
  margin-left: 0; 
  margin-top: 7px; 
  margin-bottom: 7px; 

}
.navbar-btn-right {
  float: right; 
  margin-right: 0; 
  margin-top: 7px; 
  margin-bottom: 7px; 
}
.navbar-heading {
  margin: 0 auto; 
  padding-left: 20px; 
  display: inline-block; 
  font-size: 1.5em; 
  line-height: 50px; 
  text-align: center;
  max-width: 100%; 
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.navbar-inverse .navbar-heading {
  color: #eee; 
}

header {
  background-color: #6FB43F;   
  color: #fff;
}
.ui-header {
  /*background-color: #006AC1;*/
  background-color: #6FB43F;   
  color: #fff;
  /*border-color: #005fad;*/
  border: none; 
}

.ui-header .ui-btn {
  color: #fff;
}

.filter-block {
    background: #eee; 
    padding: 5px; 
}



/* COM_LOGIN
--------------------------------------------------------*/ 
.login {
  width: 400px;
  margin: 0 auto; 
}

.login-description {  
  text-align: center; 
}

.login-image {
  max-width: 50%; 
  text-align:center;
}



/* RECIPE
--------------------------------------------------------*/ 
/** AJAX IMAGE UPLOAD STYLES **/
.progressBar {    
    max-width: 100%; 
    width: 400px;
    height: 22px;
    border: 1px solid #ddd;
    border-radius: 5px; 
    overflow: hidden;
    display:inline-block;
    margin:0px 10px 5px 5px;
    vertical-align:top;
} 
.progressBar div {
    height: 100%;
    color: #fff;
    text-align: center;
    line-height: 22px; /* same as #progressBar height if we want text middle aligned */
    width: 0;
    background-color: #0ba1b5; border-radius: 3px; 
}
.statusbar {
    border-top:1px solid #A9CCD1;
    min-height:25px;
    width:100%;
    padding:10px 10px 0px 10px;
    vertical-align:top;
    text-align: center; 
}
.statusbar:nth-child(odd){
    background:#EBEFF0;
}
.filename {
display:inline-block;
vertical-align:top;
min-width:250px;
}
.filesize {
display:inline-block;
vertical-align:top;
color:#30693D;
width:100px;
margin-left:10px;
margin-right:5px;
}
.abort {
    background-color:#A8352F;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;display:inline-block;
    color:#fff;
    font-family:arial;font-size:13px;font-weight:normal;
    padding:4px 15px;
    cursor:pointer;
    vertical-align:top
    }
  #upload-status {
    text-align: center;
    width: 100%; 
  }

input#dragandrophandler {
  display: inline-block;
  width: 100%;
  padding: 220px 0 0 0;
  height: 200px;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 0; 
  background-image: url('http://archisnapper.com/cloud.png');
  background-position: center center; 
  background-repeat: no-repeat; 
  background-color: #ededed;
  background-size: 150px 100px;
  border: 4px #aaa dashed;
}

h2.sub-heading {
  background: #eee;
  width: 100%; 
  padding: 0.6em; 
  font-size: 1.2em;
  text-transform: uppercase; 
  margin-top: 0; 
}

.recipe-ingredients, 
.recipe-method {
  padding-left: 15px; 
  padding-right: 15px; 
}

.recipe-info-image-wrapper, 
.recipe-ingredient-method-wrapper {
  position: relative;
  min-height: 1px;
  float:left;
  padding-left: 0; 
  padding-right: 0; 
  width: 100%; 
}

@media (min-width: 768px) {
.recipe-info-image-wrapper {        
    padding-left: 15px; 
    width: 50%; 
    float:right;
  }

  .recipe-ingredient-method-wrapper {       
    padding-right: 15px; 
    width: 50%; 
    
  }
  
  input#dragandrophandler { 
    padding: 420px 0 0 0;
    height: 400px;
  }

  .navbar-fixed-top .container {
     padding-left: 0; 
     padding-right: 0;     
  }
}

@media (min-width: 790px) {
.recipe-ingredients, .recipe-method {
    padding-left: 0; 
    padding-right: 0; 
  }
}

.recipe-info table {
    width: 100% !important;
    border: none;
    margin-bottom: 0; 
}

/*
div.recipe-info-image-wrapper > table {
  width: 100%; 
  border: none;
}
*/
.recipe-info table td {
    background: none repeat scroll 0 0 #F2F2F2;
    border: 0;
    border-right: 2px solid #FFFFFF;
    padding: 2px;
    text-align: center;
    width: 25%; 
}

.recipe-info table td + td + td + td  {
    border: none; 
}

.info-row em {
    font-size: 14px;
    font-weight: 600;
}
.info-row p {
    margin: 2px; 
}

.recipe-ingredients ul {
  list-style:none;
  margin-left:0;
  -webkit-padding-start: 0;
}


/* RECIPES
--------------------------------------------------------*/ 
.recipes-search {
  width: 100%;
  background: #efefef;
}

.recipes-search .form-group {
  margin: 0 auto; 
  width: 350px; 
  display: block; 
}

  .tile-wrapper {
    margin: 0;
  }
  
  
  .jumbotile {
    height: 250px; 
    float: left;  
    padding: 0; 
    margin: 0;     
    width: 100%;  
    position: relative;   
    background-color: #fff;
    background-position: center center;   
    background-size:cover;
    background-repeat: no-repeat;  
  }
  


  
  .tile {      
    height: 250px; 
    float: left;  
    padding: 0; 
    margin: 0;             
    width: 100%;  
    position: relative;   
    background-color: #fff;
    background-position: center top;   
    background-size:cover;
    background-repeat: no-repeat;
    -webkit-transition: all 0.5s ease;
       -moz-transition: all 0.5s ease;
         -o-transition: all 0.5s ease;
            transition: all 0.5s ease;
}

  .tile.brand, 
  .tile.recipe.default {
    background-size:contain !important;
  }    
  
  .tile h2 span, 
  .jumbotile h2 span { 
    position: absolute;     
    top: 0;
    left: 0; 
    background: rgba(11,11,11,0.5); 
    padding: .5em;
    color: #fff; 
    max-width: 100%; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;    
    font-size: .6em;     
    -webkit-transition: all 0.5s ease;
       -moz-transition: all 0.5s ease;
         -o-transition: all 0.5s ease;
            transition: all 0.5s ease;    
  }  
  
  .jumbotile .item-state {
    position: absolute;     
    top: 0;
    right: 0; 
    background: rgba(11,11,11,0.1); 
    padding: .5em;
    
  }

  .jumbotile .item-state a {
    color: #fff; 
  }


  .tile.cuisine h2 span,
  .tile.mealtypes h2 span {        
    font-size: 1em;     
  } 
    

  .tile-info, .recipes-info {
    position: absolute; 
    bottom: 0;
    right: 0; 
    background: rgb(11,11,11);
    background: rgba(11,11,11,0.5); 
    color: #fff; 
    padding: .5em;
    -webkit-transition: all 0.5s ease;
       -moz-transition: all 0.5s ease;
         -o-transition: all 0.5s ease;
            transition: all 0.5s ease;      
  }
  
  /* Zoom image on hover and make text backgroun opaque */
  /*
  .tile:hover  {  
  z-index: 99; 
  border: 5px #111 solid;  
  padding:-7px;
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
     -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
          box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);  
    -webkit-transform:scale(1.10); 
     -moz-transform:scale(1.10); 
       -o-transform:scale(1.10); 
          transform:scale(1.10);         
  }
  */
  .tile:hover h2 span,
  .tile:hover .recipes-info,
  .tile:hover .tile-info  {    
    background: rgb(11,11,11); 
    background: rgba(11,11,11,1); 
  }
  
  
  @media (min-width: 40em) {
    .tile { 
      width: 50%;   
      height: 550px; 
    }
  }
  
  @media (min-width: 60em) {
    .tile { 
      width: 33.33333333%;  
    }
  }  
  
  @media (min-width: 120em) {
    .tile { 
      width: 25%;  
    }
  }    
  
  @media (min-width: 160em) {
    .tile { 
      width: 20%;  
    }
  }    
  
  @media (min-width: 200em) {
    .tile { 
      width: 16.666666666666666%;  
    }
  }   
  
  .tile.product {
    height: 250px; 
    width: 250px !important;
    border-bottom: 1px #ccc solid; 
    border-right: 1px #ccc solid; 
  }
  
  .tile.product.category {
    width: 100% !important;
    border-top: 1px #ccc solid; 
    margin-top: 5px;
  }
  

/*
  .tile.product h2 span {    
    
    white-space: wrap;
    overflow: hidden;
    text-overflow: ellipsis;    
  }

*/



/*

/* MEALS LIST 
--------------------------------------------------------*/ 


.meal-item {
    /*font-family: 'Helvetica Neue', 'Helvetica';*/
    font-weight: 100 !important; 
    padding: 5px; 
    border-bottom: 1px #ddd solid; 
}

.meal-item h2 {
    font-size: 22px; 
    margin-top: 0; 
    margin-bottom: 5px; 
font-weight: 200 !important; 
}

.meal-item h3 {
    margin: 4px 0; 
    font-size: 16px; 
    font-weight: 300 !important; 
}

/* SHOPPING LIST 
--------------------------------------------------------*/ 

.item-trashed, 
.item-unpublished, 
.item-archived {  
  color: #FFFFFF;
  /*opacity: 0.4;*/
  /*filter: alpha(opacity=40); *//* msie */
  font-style: italic;
}

.item-trashed a, 
.item-unpublished a, 
.item-archived a {  
  color: #FFFFFF;  
}

.item-trashed {
  background: #FF3B30 !important;
}
.item-unpublished {
  background: #FFCC00 !important;
}
.item-archived {
  background: #007AFF !important;
}






.product_purchased {
    opacity: 0.4;
    filter: alpha(opacity=40); /* msie */
}

.shoppinglist_qty {
  border: 1px #aaa solid; 
  background: #efefef; 
  line-height: 30px;
  width: 35px; 
  text-align: center; 
  display: inline-block; 
  border-radius: 0; 
  -webkit-appearance: none;
}

.shoppinglist-qty {
   cursor: pointer; 
   padding: 0.2em; 
}


  header {    
    background: #111;
    color: #fff;    
    overflow: hidden;
  }
  
  header h1 {
    text-align: center;
    font-size: 1.5em; 
    padding: .1em 1em;
  }
  



  ul.ui-listview {
    margin: 0; 
    padding: 0;
    -webkit-padding-start: 0;
  }

  .ui-listview > li {
   /* padding: .7em 1em .7em 0;*/
    border-bottom: 1px #ddd solid;
    margin: 0;
    display: block;
    position: relative;
    text-align: left;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    list-style: none;
    /*padding-right: 40px; */
    background: #fff;
  }
  
  .ui-listview > li.listheader {
    background: #C7C7CC !important; 
    text-align: center;
    padding: .3em 1em .3em 0;
    font-weight: bold;
    border: 0;
    
  }

  .autocomplete {
    width: 100%;     
    background: #eee; 
    padding: .7em 1em;
  }
  
  .autocomplete input {    
    /*padding-left: 1em; */
    /*height: 2em;*/
    /*width: 100%; */
  }

.autocomplete li {
  cursor: pointer;
}

.shopping {
  -webkit-transition: -webkit-transform 250ms ease;
     -moz-transition: -moz-transform 250ms ease;
       -o-transition: -o-transform 250ms ease;
          transition: transform 250ms ease;
}
.unswiped {
  -webkit-transition: -webkit-transform 250ms ease;
     -moz-transition: -moz-transform 250ms ease;
       -o-transition: -o-transform 250ms ease;
          transition: transform 250ms ease;
-webkit-transform: translateX(0px);
	   -moz-transform: translateX(0px);
	     -o-transform: translateX(0px);
		transform: translateX(0px);
}

	.swipeleft {
  -webkit-transition: -webkit-transform 250ms ease;
     -moz-transition: -moz-transform 250ms ease;
       -o-transition: -o-transform 250ms ease;
          transition: transform 250ms ease;

	-webkit-transform: translateX(-80px);
	   -moz-transform: translateX(-80px);
	     -o-transform: translateX(-80px);
		transform: translateX(-80px);
		border-top-width: 0; /* We switch to border bottom on previous list item */
		border-right-width: 1px;
	}
	

	.swiperight {
  -webkit-transition: -webkit-transform 1000ms ease;
     -moz-transition: -moz-transform 1000ms ease;
       -o-transition: -o-transform 1000ms ease;
          transition: transform 1000ms ease;
	-webkit-transform: translateX(100%);
	   -moz-transform: translateX(100%);
	     -o-transform: translateX(100%);
		transform: translateX(100%);
		border-top-width: 0; /* We switch to border bottom on previous list item */
		border-left-width: 1px;
	}

	
	
/* Left transition */
		li.ui-li.left {
			-webkit-transition: -webkit-transform 250ms ease;
			-webkit-transform: translateX(-100%);
			-moz-transition: -moz-transform 250ms ease;
			-moz-transform: translateX(-100%);
			-o-transition: -o-transform 250ms ease;
			-o-transform: translateX(-100%);
			transition: transform 250ms ease;
			transform: translateX(-100%);
			border-top-width: 0; /* We switch to border bottom on previous list item */
			border-right-width: 1px;
		}
		/* Right transition */
		li.ui-li.right {
			-webkit-transition: -webkit-transform 250ms ease;
			-webkit-transform: translateX(100%);
			-moz-transition: -moz-transform 250ms ease;
			-moz-transform: translateX(100%);
			-o-transition: -o-transform 250ms ease;
			-o-transform: translateX(100%);
			transition: transform 250ms ease;
			transform: translateX(100%);
			border-top-width: 0; /* We switch to border bottom on previous list item */
			border-left-width: 1px;
		}




/* PAGEINATION */


.pagination {
  width: 100%; 
  background: #eee;
}
ul.pagination-list {

}

.pagination-list li {
  display: inline-block; 
  float: left; 
  width: 50px; 
  height: 40px; 
}

/* Bootstrap Overrides */
.modal-sm {
  width: 300px !important; 
  margin: 10px auto !important; 
}


/*.pantry-form*/

/*
.form-horizontal input {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;

-webkit-box-flex: 0;
  -webkit-flex: 0 0 75%;
      -ms-flex: 0 0 75%;
          flex: 0 0 75%;
  max-width: 75%;
  float: left; 
}

.form-horizontal label {
  float: left; 
  
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 16.666667%;
      -ms-flex: 0 0 16.666667%;
          flex: 0 0 16.666667%;
  max-width: 16.666667%;

  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  text-align: right; 

}
*/

/* MOD_LOGIN */ 
.unstyled {
  list-style: none;
  -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 0;

}
#login-form {
  background: #000;   
  margin: 0; 
  padding: 0.6em; 
}


.logout-box  {
    
    font-size: 1em;
    height: 40px; 
    line-height: 40px; 

    display: block;    
    
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    outline: 0 !important;

}

.login-greeting {
  float: left; 
  }
.logout-button {
  float: right; 
 
}

footer {
  background: #333; 
  color: #ccc; 
}