/* CSS Document */

#collage {
	position: relative;
	min-height: 400px;
}
#collage img {
	position: absolute;
	border: #CCC solid 1px;
	background-color: #F0F0F0;
	padding: 8px;
}
#collage img:nth-child(1) {
	box-shadow: 4px 2px 12px #333;
	z-index: 10;
	right: 10px;
	top: 0;
	-moz-transform: rotate(4deg);
	-o-transform: rotate(4deg);
	-webkit-transform: rotate(4deg);
	transform: rotate(4deg);
<![if IE]> 	/* IE8+ - must be on one line, unfortunately */
	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9975640502598243, M12=-0.06975647374412476, M21=0.06975647374412476, M22=0.9975640502598243, SizingMethod='auto expand')";
	/* IE6 and 7 */    
	filter: progid:DXImageTransform.Microsoft.Matrix(  M11=0.9975640502598243,  M12=-0.06975647374412476,  M21=0.06975647374412476,  M22=0.9975640502598243,  SizingMethod='auto expand');
<![endif]>
}
#collage img:nth-child(2) {
	box-shadow: -3px 2px 12px #333;
	z-index: 11;
	top: 10px;
	left: 10px;
	-moz-transform: rotate(-8deg);
	-o-transform: rotate(-8deg);
	-webkit-transform: rotate(-8deg);
	transform: rotate(-8deg);
<![if IE]> 	 /* IE8+ - must be on one line, unfortunately */
	 -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9902680687415705, M12=0.13917310096006452, M21=-0.13917310096006452, M22=0.9902680687415705, SizingMethod='auto expand')";
	 /* IE6 and 7 */
	 filter: progid:DXImageTransform.Microsoft.Matrix(  M11=0.9902680687415705,  M12=0.13917310096006452,  M21=-0.13917310096006452,  M22=0.9902680687415705,  SizingMethod='auto expand');
<![endif]>
}
#collage img:nth-child(3) {
	box-shadow: 4px 2px 12px #333;
	z-index: 12;
	right: 20%;
	top: 10px;
	-moz-transform: rotate(6deg);
	-o-transform: rotate(6deg);
	-webkit-transform: rotate(6deg);
	transform: rotate(6deg);
<![if IE]> 	/* IE8+ - must be on one line, unfortunately */
	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9945218953682733, M12=-0.10452846326765341, M21=0.10452846326765341, M22=0.9945218953682733, SizingMethod='auto expand')";
	/* IE6 and 7 */
	filter: progid:DXImageTransform.Microsoft.Matrix(  M11=0.9945218953682733,  M12=-0.10452846326765341,  M21=0.10452846326765341,  M22=0.9945218953682733,  SizingMethod='auto expand');
<![endif]>
}
#collage img:nth-child(4) {
	box-shadow: -3px 2px 12px #333;
	z-index: 13;
	left: 20%;
	top: 0px;
	-moz-transform: rotate(-4deg);
	-o-transform: rotate(-4deg);
	-webkit-transform: rotate(-4deg);
	transform: rotate(-4deg);
<![if IE]> 	/* IE8+ - must be on one line, unfortunately */
	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9975640502598243, M12=0.06975647374412515, M21=-0.06975647374412515, M22=0.9975640502598243, SizingMethod='auto expand')";
	/* IE6 and 7 */
	filter: progid:DXImageTransform.Microsoft.Matrix(  M11=0.9975640502598243,  M12=0.06975647374412515,  M21=-0.06975647374412515,  M22=0.9975640502598243,  SizingMethod='auto expand');
<![endif]>
}
#collage img:hover {
	z-index: 200;
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	transition: all ease .5s 1s;
	-moz-transition: all ease .5s 1s;
	-ms-transition: all ease .5s 1s;
	-o-transition: all ease .5s 1s;
	-webkit-transition: all ease .5s 1s;
	box-shadow: 0px 8px 12px #333;
}