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

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

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

#login-form {
  margin: 20px; 
}

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

#leftpanel a {
   color: #ccc; 
}

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

/* 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; 
}

.ui-header {
  background-color: #006AC1;
  color: #fff;
  border-color: #005fad;
}

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

/* 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;
  }
  
  .tile {      
    height: 150px; 
    float: left;  
    padding: 0; 
    margin: 0;             
    width: 100%;  
    position: relative;    
    background-position: center center;   
    background-size:cover;  
  }
  
  .tile 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;     
  }  

  .recipes-info {
    position: absolute; 
    bottom: 0;
    right: 0; 
    background: rgba(11,11,11,0.5); 
    color: #fff; 
    padding: .5em;
  }
  
  @media (min-width: 40em) {
    .tile { 
      width: 50%;   
      height: 300px; 
    }
  }
  
  @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%;  
    }
  }   

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



.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-width: 1px 0 0;
    border-style: 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;
  }
  
  .handle {
    margin-right: -30px;   
    cursor: move; 
    display: inline-block;
  }
  
  .autocomplete {
    width: 100%;     
    background: #eee; 
    padding: .7em 1em;
  }
  
  .autocomplete input {
    border-radius: 1em; 
    padding-left: 1em; 
    height: 2em;
    width: 100%; 
  }



.autocomplete li {
  cursor: pointer;
}



	.shopping-item {
		webkit-transform 250ms ease;			
		-moz-transition: -moz-transform 250ms ease;			
		-o-transition: -o-transform 250ms ease;			
		transition: transform 250ms ease;						
	}
	
	.swipeleft {
	background: #cc0000;
	-webkit-transition: -webkit-transform 250ms ease;
			-webkit-transform: translateX(-100px);
			-moz-transition: -moz-transform 250ms ease;
			-moz-transform: translateX(-100px);
			-o-transition: -o-transform 250ms ease;
			-o-transform: translateX(-100px);
			transition: transform 250ms ease;
			transform: translateX(-100px);
			border-top-width: 0; /* We switch to border bottom on previous list item */
			border-right-width: 1px;
	}
	

	.swiperight {
	background: #00cc00; 
	-webkit-transition: -webkit-transform 250ms ease;
			-webkit-transform: translateX(100px);
			-moz-transition: -moz-transform 250ms ease;
			-moz-transform: translateX(100px);
			-o-transition: -o-transform 250ms ease;
			-o-transform: translateX(100px);
			transition: transform 250ms ease;
			transform: translateX(100px);
			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; 
}