/* gallery */
.ace-thumbnails {
  list-style:none;
  margin:0; padding:0;

  > li {
	float:left;
	display:block;
	position:relative;
	overflow:hidden;

	margin:2px;
	border:2px solid #333;
	
	> :first-child {
		display:block;
		position:relative;
	}
	
	.tags {
		display:inline-block;
		position:absolute;
		bottom:0; right:0; left:0; overflow:visible;
 
		.opacity(90);
		direction:rtl;
		
		//set these so that it's not confused with tags plugin
		padding:0; margin:0;
		height:auto; width:auto;
		background-color:transparent;
		border:none;
		vertical-align:inherit;
		
		> .label {
			display:table;
			margin:1px 1px 0 0;

			direction:ltr;
			text-align:left;
		}
	}


	> .tools {
		 position:absolute;
		 top:0; bottom:0;
		 left:-30px;
		 width:24px;
		 
		 background-color:rgba(0,0,0,0.55);

		 text-align:center; 
		 vertical-align:middle;
		 
		.transition(~"all 0.2s ease");
		
		&.tools-right {
			left:auto; right:-30px;
		}
		&.tools-bottom {
			width:auto; height:28px;
			left:0; right:0; top:auto;
			bottom:-30px;
		}
		&.tools-top {
			width:auto; height:28px;
			left:0; right:0; top:-30px;
			bottom:auto;
		}
	}
	&:hover {
		> .tools { left:0; }
		> .tools.tools-bottom { top:auto; bottom:0; }
		> .tools.tools-top { bottom:auto; top:0; }
		> .tools.tools-right { left:auto; right:0; }
	}

	> .tools > a , > :first-child .inner a {
		display:inline-block;
		color:#FFF;
		font-size:18px; font-weight:normal;
		padding:4px;
		
		&:hover {
			text-decoration:none;
			color:#C9E2EA;
		}		
	}
	.tools.tools-bottom > a , .tools.tools-top > a {
		display:inline-block;
	}
  
  
  /* the custom text on hover */
	> :first-child > .text {
		position:absolute;
		right:0; left:0; bottom:0; top:0;

		text-align:center;
		color:#FFF;
		background-color:rgba(0,0,0,0.55);

		.opacity(0);
		.transition(~"all 0.2s ease");
		
		&:before {/* makes the inner text become vertically centered*/
			content: '';
			display: inline-block;
			height: 100%;
			vertical-align: middle;
			margin-right: 0; /* Adjusts for spacing */
		}
		
		> .inner {
			 padding:4px 0;
			 margin:0;

			 display: inline-block;
			 vertical-align: middle;
			 max-width: 90%;
		}
	}
	&:hover > :first-child  > .text{
		.opacity(100);
	}
	
  }//li
}