@charset "utf-8";
/* -------------------------------------------------------------------------------------------------------------------------
A CSS3 presentation demonstrating how to take advantage of modern browsers while still allowing the content to be easily
accessible in older, less capable browsers.
Inspired by http://playground.deaxon.com/css/lightbox by http://twitter.com/deaxon 
---------------------------------------------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------------------------------------------
Grid of images
---------------------------------------------------------------------------------------------------------------------------- */
#grid{margin:35px 0;}
/*
Add the transition affect to the images in the grid. Any changes to the element will be transtioned from it's current state, for example on :hover */
#grid li{float:left;list-style:none;margin:0 25px 25px 0;position:relative;width:31%;overflow:hidden;border-top:1px solid rgba(255, 255, 255, 0.25);
	-webkit-box-shadow:0 0 1px rgba(0, 0, 0, 0.4);
	-moz-box-shadow:0 0 4px rgba(0, 0, 0, 0.2);
	box-shadow:0 0 4px rgba(0, 0, 0, 0.2);
	-webkit-transition:all 0.15s ease-in;
	-moz-transition:all 0.15s ease-in;
	-ms-transition:all 0.15s ease-in;
	transition:all 0.15s ease-in;
}
#grid li.end{margin-right:0;}
#grid li:nth-child(3n){margin-right:0;}
#grid li:hover{z-index:2;
	-webkit-transform:scale(1.2) translateY(-40px);	
	-moz-transform:scale(1.2) translateY(-40px);	
	-ms-transform:scale(1.2) translateY(-40px);	
	transform:scale(1.2) translateY(-40px);	
	-webkit-box-shadow:0 15px 35px rgba(0, 0, 0, 0.3);
	-moz-box-shadow:0 15px 35px rgba(0, 0, 0, 0.3);
	box-shadow:0 15px 35px rgba(0, 0, 0, 0.3);
}
/*
Rotate left hand column to the left upon hover */
#grid li:nth-child(3n-2):hover {
	-webkit-transform:scale(1.2) translate3d(0, -30px, 0) rotate(-2.5deg);
	-moz-transform:scale(1.2) translateY(-30px) rotate(-2.5deg);
	-ms-transform:scale(1.2) translateY(-30px) rotate(-2.5deg);
	transform:scale(1.2) translateY(-30px) rotate(-2.5deg);
}
/*
Rotate every third li with :nth-child(3n) (right hand column in this demo) to the right upon hover */
#grid li:nth-child(3n):hover {
	-webkit-transform:scale(1.2) translate3d(0, -30px, 0) rotate(2.5deg);	
	-moz-transform:scale(1.2) translateY(-30px) rotate(2.5deg);	
	-ms-transform:scale(1.2) translateY(-30px) rotate(2.5deg);	
	transform:scale(1.2) translateY(-30px) rotate(2.5deg);	
}

#grid img, li[id]:target div, #grid li, .backface {
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
}

#grid .details{position:absolute;bottom:0;background:#fff;background:rgba(255, 255, 255, 0.87);border-top:1px solid #fff;width:270px;border-bottom:1px solid rgba(0, 0, 0, 0.25);padding:10px;
	-webkit-border-radius: 0 0 5px 5px;
	-moz-border-radius:0 0 5px 5px;
	border-radius:0 0 5px 5px;
	-webkit-box-shadow:0 -2px 4px rgba(0, 0, 0, 0.35);
	-moz-box-shadow:0 -2px 4px rgba(0, 0, 0, 0.35);
	box-shadow:0 -2px 4px rgba(0, 0, 0, 0.35);
}
#grid .details h3{margin-bottom:0px;letter-spacing:-1px; font-family:"微软雅黑";}
#grid .details a.more{position:absolute;right:10px;top:5px;font-size:12px;padding:6px 10px;background-color:rgba(0, 0, 0, 0.03);
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:15px;
	-webkit-box-shadow:inset 0 0 3px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.6);
	-moz-box-shadow:inset 0 0 3px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.6);
	box-shadow:inset 0 0 3px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.6);
	-webkit-transition:all 0.15s ease-in;
}

#grid .details a.more:hover{background-color:#0090e2;color:#fff;}