/**
 * @version		1.00
 * @package		CN Gallery
 * @author		Caleb Nance http://demo.calebnance.com
 * @copyright	Copyright © 2009 - 2011 Caleb Nance
 * @license		GNU/GPL license: http://www.gnu.org/copyleft/gpl.html
 */

.clr { clear: both; }
#albums { width: 100%; }
#albums .album-item-none-0,
#albums .album-item-border-0,
#albums .album-item-none-1,
#albums .album-item-border-1 { display: block; float: left; text-align: center; }

#albums .album-item-none-0 { height: 30px; }
#albums .album-item-none-1 { height: 130px; }
#albums .album-item-border-0 { height: 30px; }
#albums .album-item-border-1 { height: 150px; }

#albums .col_1 { width: 100%; }
#albums .col_2 { width: 50%; }
#albums .col_3 { width: 33%; }
#albums .col_4 { width: 25%; }
#albums .col_5 { width: 20%; }

#albums .album-name { font-size: 14px; font-weight: bold; height: 26px; line-height: 24px; margin: 0 0 5px 0; overflow: hidden; text-align: center; }
#albums .album-thumb { display: inline-block; position: relative; vertical-align: top; height: 100px; width: 100px; z-index: 5;}
#albums .album-thumb img { height: 100px; left: 0; position: absolute; top: 0; width:100px; }
#albums .album-thumb .border { border: 5px solid #f3f3f3; box-shadow: 1px 1px 2px #666; -moz-box-shadow: 1px 1px 2px #666; -webkit-box-shadow: 1px 1px 2px #666; }

.photo1 { z-index: 4; position:relative; }
.photo2 { z-index: 3; position:relative; }
.photo3 { z-index: 2; position:relative; }

.album-thumb:hover .photo1, .album-thumb:focus .photo1 {
	-webkit-animation-name: image1;
	-webkit-animation-duration: .2s;
	-webkit-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1);
			
	-moz-animation-name: image1; /* moz */
	-moz-animation-duration: .2s;
	-moz-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1);
			
	-o-animation-name: image1;
	-o-animation-duration: .2s;
	-o-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1);
			
	-ms-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1);
}
		
.album-thumb:hover .photo2, .album-thumb:focus .photo2 {
	-webkit-animation-name: image2;
	-webkit-animation-duration: .2s;
	-webkit-transform: rotate(0deg) translate(0, -3px) scale(1.1);
			
	-moz-animation-name: image2; /* moz */
	-moz-animation-duration: .2s;
	-moz-transform: rotate(0deg) translate(0, -3px) scale(1.1);
			
	-o-animation-name: image2;
	-o-animation-duration: .2s;
	-o-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1);
			
	-ms-transform: rotate(0deg) translate(0, -3px) scale(1.1);
}
		
.album-thumb:hover .photo3, .album-thumb:focus .photo3 {
	-webkit-animation-name: image3;
	-webkit-animation-duration: .2s;
	-webkit-transform: rotate(6deg) translate(100px, -3px) scale(1.1);
	
	-moz-animation-name: image3; /* moz */
	-moz-animation-duration: .2s;
	-moz-transform: rotate(6deg) translate(100px, -3px) scale(1.1);
	
	-o-animation-name: image3;
	-o-animation-duration: .2s;
	-o-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1);
			
	-ms-transform: rotate(6deg) translate(100px, -3px) scale(1.1);
}

@-webkit-keyframes image1 {
	0% { -webkit-transform: rotate(0deg) translate(0, 0) scale(1.0); }
	100% { -webkit-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1); }
}		
@-moz-keyframes image1 {
	0% { -moz-transform: rotate(0deg) translate(0, 0) scale(1.0); }
	100% { -moz-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1); }
}		
@-o-keyframes image1 {
	0% { -o-transform: rotate(0deg) translate(0, 0) scale(1.0); }
	100% { -o-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1); }
}	
@-webkit-keyframes image2 {
	0% { -webkit-transform: rotate(0deg) translate(0, 0) scale(1.0); }
	100% { -webkit-transform: rotate(0deg) translate(0, -3px) scale(1.1); }
}		
@-moz-keyframes image2 {
	0% { -moz-transform: rotate(0deg) translate(0, 0) scale(1.0); }
	100% { -moz-transform: rotate(0deg) translate(0, -3px) scale(1.1); }
}		
@-o-keyframes image2 {
	0% { -o-transform: rotate(0deg) translate(0, 0) scale(1.0); }
	100% { -o-transform: rotate(0deg) translate(0, -3px) scale(1.1); }
}		
@-webkit-keyframes image3 {
	0% { -webkit-transform: rotate(0deg) translate(0, 0) scale(1.0); }
	100% { -webkit-transform: rotate(6deg) translate(100px, -3px) scale(1.1); }
}		
@-moz-keyframes image3 {
	0% { -moz-transform: rotate(0deg) translate(0, 0) scale(1.0); }
	100% { -moz-transform: rotate(6deg) translate(100px, -3px) scale(1.1); }
}		
@-o-keyframes image3 {
	0% { -o-transform: rotate(0deg) translate(0, 0) scale(1.0); }
	100% { -o-transform: rotate(6deg) translate(100px, -3px) scale(1.1); }
}