/* 
    Document   : flickr montage
    Created on : Nov 16, 2007, 4:50:28 PM
    Author     : okavanagh - http://www.olliekav.com
	Visual design copyright 2007. All Rights Reserved. 
	XHTML/CSS released under a Creative Commons Attribution 2.5 licence.
*/

/* First we'll set up the resets we need, we are only using a list so only a small amount needed */

ul, li, img {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	list-style: none;
}

/*= The base layout ----------------------------------------------------------- */

body, html {
	overflow:hidden; /* We hide any overflow so you do not get scrollbars */
	margin:0;
	padding:0;
}

/*= So lets set the layout of the pictures ------------------------------------ */

#gallery li {
	position:relative;
}
#gallery img.animate {
	-webkit-transition: all 1s ease-in-out;
	-webkit-transform: rotate(20deg);
	border:5px solid #fff;
	position:absolute;
	width:300px;
	z-index:1;
}
#gallery img.animate:hover {
	-webkit-transform: rotate(10deg) scale(2);
	border:5px solid #ccc;
	z-index:100;
}
#gallery img.number0 {
	-webkit-transform: rotate(5deg);
	top:-40px;
	left:-30px;
}
#gallery img.number1 {
	-webkit-transform: rotate(-5deg);
	top:-40px;
	left:160px;
	width:300px;
}
#gallery img.number2 {
	-webkit-transform: rotate(5deg);
	top:-30px;
	left:400px;
	width:400px;
}
#gallery img.number3 {
	-webkit-transform: rotate(-5deg);
	top:-20px;
	left:650px;
	width:400px;
}
#gallery img.number4 {
	-webkit-transform: rotate(5deg);
	top:-30;
	left:950px;
	width:400px;
}
#gallery img.number5 {
	-webkit-transform: rotate(-5deg);
	top:-20px;
	left:1200px;
}
#gallery img.number6 {
	-webkit-transform: rotate(-5deg);
	top:150px;
	left:-40px;
	width:250px;
}
#gallery img.number7 {
	-webkit-transform: rotate(5deg);
	top:170px;
	left:160px;
	width:250px;
}
#gallery img.number8 {
	-webkit-transform: rotate(-5deg);
	top:200px;
	left:340px;
	width:250px;
}
#gallery img.number9 {
	-webkit-transform: rotate(5deg);
	top:250px;
	left:580px;
	width:400px;
}
#gallery img.number10 {
	-webkit-transform: rotate(-5deg);
	top:180px;
	left:850px;
	width:400px;
}
#gallery img.number11 {
	-webkit-transform: rotate(5deg);
	top:210px;
	left:1100px;
	width:400px;
}
#gallery img.number12 {
	-webkit-transform: rotate(-5deg);
	top:530px;
	left:700px;
	width:450px;
}
#gallery img.number13 {
	-webkit-transform: rotate(-5deg);
	top:450px;
	left:-10px;
	width:400px;
}
#gallery img.number14 {
	-webkit-transform: rotate(5deg);
	top:500px;
	left:350px;
	width:350px;
}
#gallery img.number15 {
	-webkit-transform: rotate(-5deg);
	top:500px;
	left:800px;
}
#gallery img.number16 {
	-webkit-transform: rotate(5deg);
	top:500px;
	left:1100px;
}
#gallery img.number17 {
	-webkit-transform: rotate(-5deg);
	top:560px;
	left:800px;
}