@charset "utf-8";
/* CSS Document */


	/* Index Card Styling */
	
	ul#index_cards {
		margin-top:10px;
		text-align:center;
	}
	
		ul#index_cards li {
			background-color: #ffffff;
			width: 180px;
			display:block;
			border:1px solid #eeeeee;
			padding: 20px 10px;
/*			position:relative; */
			-moz-border-radius: 10px;
			-webkit-border-radius: 10px;
			-moz-box-shadow: 2px 2px 10px #cccccc;
			-webkit-box-shadow: 2px 2px 10px #cccccc;
			-moz-transition: all 0.5s ease-in-out;
			-webkit-transition: all 0.5s ease-in-out;
			color: #333333;
			font-size: 14px;
		}
		
	#card-1 {
		-webkit-transform: rotate(-20deg);
		-moz-transform: rotate(-20deg);
		z-index:1;
		top:0px;
		left: 20px;
	}
	
	#card-2 {
		-webkit-transform: rotate(-10deg);
		-moz-transform: rotate(-10deg);
		z-index:2;
		top:0px;
	}
	
	#card-3 {
		background-color:#69732B;
		z-index:3;
		top:0px;
		left: -20px;
	}
	
	#card-4 {
		-webkit-transform: rotate(10deg);
		-moz-transform: rotate(10deg);
		z-index:2;
		top:0px;
		left: -20px;
	}
	
	#card-5 {
		-webkit-transform: rotate(20deg);
		-moz-transform: rotate(20deg);
		z-index:1;
		top: 10px;
		left: -20px;
	}

	/* Hover States */
	
	ul#index_cards li:hover {
		z-index:4;
	}
	
	#card-1:hover {
		-moz-transform: scale(1.1) rotate(-18deg);
   	 	-webkit-transform: scale(1.1) rotate(-18deg); 
	}
		
	#card-2:hover {
		-moz-transform: scale(1.1) rotate(-8deg);
   	 	-webkit-transform: scale(1.1) rotate(-8deg); 
	}
	
	#card-3:hover {
		-moz-transform: scale(1.1) rotate(2deg);
   	 	-webkit-transform: scale(1.1) rotate(2deg); 
	}
	
	#card-4:hover {
		-moz-transform: scale(1.1) rotate(12deg);
   	 	-webkit-transform: scale(1.1) rotate(12deg); 
	}
	
	#card-5:hover {
		-moz-transform: scale(1.1) rotate(22deg);
   	 	-webkit-transform: scale(1.1) rotate(22deg); 
	}
	
	/* Content Styling */
	
			ul#index_cards li img {
				margin-top:7px;
				background:#eeeeee;
			}
			
			ul#index_cards li p {
				display: block;
				margin-top: 4px;
				text-align:left;
				line-height:28px;	
			}
			
			ul#index_cards li a, a:visited, a:hover {
				display: block;
				margin-top: 4px;
				text-align: left;
				text-decoration: none;
				color: #333333;	
				line-height: 28px;				
			}
			
			ul#index_cards li a:hover {
				color: #666666;
			}
			
			ul#index_cards li .logocard {
				font-family: 'Evilz'; 
				font-size: 42px; 
				text-align: center; 
			}
			
			ul#index_cards li .titlecard {
				font-family: 'Stencil';	
				font-size: 18px;
				font-style: normal;
				text-align: center; 
			}

			.drawn {
				background:url(drawn.png) repeat; 
				background-color: #cccccc;
				color: #ffffff;
					}