/*
Theme Name: WP 16-07-2011
Theme URI: Url du thème
Description: WP THEME
Version: 0.3
Author: YROY
WP THEME by YROY || copyright 2011
*/

@import url('layout/menu.css');

/*RESET BROWSERS*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { display: block;}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }

@font-face {
    font-family: 'TazLight';
    src: url('fonts/taz_light-webfont.eot');
    src: url('fonts/taz_light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/taz_light-webfont.woff') format('woff'),
         url('fonts/taz_light-webfont.ttf') format('truetype'),
         url('fonts/taz_light-webfont.svg#TazLight') format('svg');
    font-weight: normal;
    font-style: normal;

}

a.twitter-share-button {
background-color: white;
    background: #ffffff; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkZWRlZGUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #ffffff 0%, #dedede 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#dedede)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#dedede 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#dedede 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#dedede 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffffff 0%,#dedede 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dedede',GradientType=0 ); /* IE6-8 */

    border: 1px solid #CCCCCC;
    border-radius: 3px 3px 3px 3px;
    color: #333333;
    display: block;
    font-size: 10px !important;
    font-weight: bold;
    height: 14px;
    outline: medium none;
    padding-left: 6px;
    padding-top: 4px;
    position: absolute;
    right: 20px;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    top: 17px;
    vertical-align: top;
    white-space: nowrap;
    width: 60px;
}

a.twitter-share-button i {
    background: url("images/b2_btn_icon.gif") no-repeat scroll 0 0 transparent;
    height: 16px;
    left: 1px;
    position: absolute;
    top: 1px;
    width: 16px;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

/*GENERAL SETTINGS*/
body {
	background:url(images/background_page.gif) repeat;
	font-family:Georgia, helvetica;
	color:#000;
	font-weight:lighter;
}

h1 {
	font-size:24px;
	color:#5a5a5a;
	font-weight:lighter;
}

h2 {
	font-size:15px;
	font-weight:lighter;	
}

a {
	text-decoration:none;
	color:#000;	
}

div.clear {
	clear:both;
	height:20px;
	width:880px;	
}

div.clear2 {
	clear:both;
	width:880px;	
}

/*AWARD*/
div#award {
	position:absolute;
	top:0px;
	left:0px;
	background:url(images/ribbon.png);
	width:63px;
	height:94px;	
}

/*LAYOUT*/
div#all {
	width:880px;	
	margin:0px auto;
}
header {
	width:880px;
	margin-top:26px;
	padding-bottom:13px;
	border-bottom:1px solid #cbcbcb;
	margin-bottom:22px;
}
header h1 {
	float:right;
}
section#slider {
	height:129px;
	width:880px;
	margin-bottom:23px;
	/*border-bottom:1px solid #cbcbcb;*/	
}

h2 {
	padding:13px 0px;
	border-bottom:5px solid #000;
	border-top:1px solid #cbcbcb;
}

/*AJAX LOADER*/
img#ajax {
	width:32px;
	height:32px;
	position:absolute;
	top:179px;
	left:420px;
	z-index:999;
}
img#ajax2 {
	width:32px;
	height:32px;
	position:absolute;
	top:75px;
	left:420px;
	z-index:999;
}

/*PROJECTS*/
section#contentWrap {
	width:880px;
	float:left;
	position:relative;	/* On older OS versions "position" and "z-index" must be defined, */
	z-index:1;			/* it seems that recent webkit is less picky and works anyway. */
	overflow:hidden;
}

section#contentWrap h2 {
	margin-bottom:20px;
}

/*section#contentWrap ul li a {
	width:280px;
	height:183px;
	float:left;
	border-bottom:1px solid #000;
	background: #ffffff;
	background: -moz-linear-gradient(top,  #ffffff 0%, #f2f2f2 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f2f2f2));
	background: -webkit-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%);
	background: -o-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%);
	background: -ms-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%);
	background: linear-gradient(top,  #ffffff 0%,#f2f2f2 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=0 );
	display:block;
	position:relative;
}*/

section#contentWrap ul li {
	width:275px;
	height:183px;
	float:left;
	border-bottom:1px solid #000;
	background: #ffffff;
	background: -moz-linear-gradient(top,  #ffffff 0%, #f2f2f2 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f2f2f2));
	background: -webkit-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%);
	background: -o-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%);
	background: -ms-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%);
	background: linear-gradient(top,  #ffffff 0%,#f2f2f2 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=0 );
	display:block;
	position:relative;
	overflow:hidden;
}

span.sub_title {
	/*color:#ccc;*/
	color:#fff;
	font-size:13px;
}
pre.show {
	position:absolute;
	right:30px;
	top:18px;	
}

/*THE HOVER EFFECT*/
.scroller p {
	position:absolute;
	top:0px;
	left:0px;
	z-index:1;	
}
.scroller ul li a {
	position:absolute;
	bottom:-54px;
	left:0px;
	width:100%;
	background-color: rgb(56,56,56); opacity: 0.4;
	/*background:url(images/bg_block.png) repeat-x;*/
	z-index:2;
	display:block;
	color:#fff;
	/*color:#333;*/
	font-size:13px;
	font-family:helvetica;
	padding:9px;
	line-height:18px;
	font-family: 'TazLight';
}

.scroller {
	width:10000px;
	height:100%;
	float:left;
	padding:0;
}

.scroller:hover {
	cursor: url(images/cursor.png) 4 12, auto;
}

.scroller ul {
	list-style:none;
	display:block;
	float:left;
	width:100%;
	height:100%;
	padding:0;
	margin:0;
	text-align:left;
}

.scroller li {
	display:block; float:left;
	width:275px;
	height:184px;
	margin-right:9px;
	margin-left:9px;
}

div#controls {
	clear:both;
	width:497px;
	height:50px;	
	border-bottom:1px solid #cbcbcb;
	padding-left:383px;
}

#nav {
	width:auto;
	float:left;
	margin-top:19px;
	display:block;
}

#prev, #next {
	float:left;
	font-weight:bold;
	font-size:14px;
	padding:0px;
	width:auto;
}

#prev, #next:hover {
	cursor:pointer;
}

#next {
	float:left;
	text-align:left;
}

#indicator, #indicator > li {
	display:block; float:left;
	list-style:none;
	padding:0; margin:0;
}

#indicator {
	width:auto;
	padding-top:3px;
	padding-left:20px;
	padding-right:20px;
}

#indicator > li {
	text-indent:-9999em;
	width:8px; height:8px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	-o-border-radius:4px;
	border-radius:4px;
	background:#ddd;
	overflow:hidden;
	margin-right:4px;
}

#indicator > li.active {
	background:#888;
}

#indicator > li:last-child {
	margin:0;
}





/*RESSOURCES*/
section#contentWrap2 {
	width:880px;
	float:left;
	position:relative;	/* On older OS versions "position" and "z-index" must be defined, */
	z-index:1;			/* it seems that recent webkit is less picky and works anyway. */
	overflow:hidden;
}

section#contentWrap2 h2 {
	margin-bottom:20px;
}

/*section#contentWrap ul li a {
	width:280px;
	height:183px;
	float:left;
	border-bottom:1px solid #000;
	background: #ffffff;
	background: -moz-linear-gradient(top,  #ffffff 0%, #f2f2f2 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f2f2f2));
	background: -webkit-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%);
	background: -o-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%);
	background: -ms-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%);
	background: linear-gradient(top,  #ffffff 0%,#f2f2f2 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=0 );
	display:block;
	position:relative;
}*/

section#contentWrap2 ul li {
	width:275px;
	height:183px;
	float:left;
	border-bottom:1px solid #000;
	background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(220,248,244,0.61) 24%, rgba(109,225,208,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(24%,rgba(220,248,244,0.61)), color-stop(100%,rgba(109,225,208,1)));
	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(220,248,244,0.61) 24%,rgba(109,225,208,1) 100%);
	background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(220,248,244,0.61) 24%,rgba(109,225,208,1) 100%);
	background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(220,248,244,0.61) 24%,rgba(109,225,208,1) 100%);
	background: linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(220,248,244,0.61) 24%,rgba(109,225,208,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#6de1d0',GradientType=0 );
	display:block;
	position:relative;
	overflow:hidden;
}

/*THE HOVER EFFECT*/
#scroller2 p {
	position:absolute;
	top:0px;
	left:0px;
	z-index:1;	
}
#scroller2 ul li a {
	position:absolute;
	bottom:-42px;
	left:0px;
	height:16px;
	width:100%;
	background:#000;
	z-index:2;
	display:block;
	color:#fff;
	font-size:15px;
	font-family:helvetica;
	padding:13px;
}

#scroller2 {
	width:10000px;
	height:100%;
	float:left;
	padding:0;
}

#scroller2:hover {
	cursor:move;
}

#scroller2 ul {
	list-style:none;
	display:block;
	float:left;
	width:100%;
	height:100%;
	padding:0;
	margin:0;
	text-align:left;
}

#scroller2 li {
	display:block; float:left;
	width:275px;
	height:184px;
	margin-right:9px;
	margin-left:9px;
}


div#controls2 {
	clear:both;
	width:497px;
	height:50px;	
	border-bottom:1px solid #cbcbcb;
	padding-left:383px;
}

#nav2 {
	width:auto;
	float:left;
	margin-top:19px;
	display:block;
}

#prev2, #next2 {
	float:left;
	font-weight:bold;
	font-size:14px;
	padding:0px;
	width:auto;
}

#prev2, #next2:hover {
	cursor:pointer;
}

#next2 {
	float:left;
	text-align:left;
}

#indicator2, #indicator2 > li {
	display:block; float:left;
	list-style:none;
	padding:0; margin:0;
}

#indicator2 {
	width:auto;
	padding-top:3px;
	padding-left:20px;
	padding-right:20px;
}

#indicator2 > li {
	text-indent:-9999em;
	width:8px; height:8px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	-o-border-radius:4px;
	border-radius:4px;
	background:#ddd;
	overflow:hidden;
	margin-right:4px;
}

#indicator2 > li.active {
	background:#888;
}

#indicator2 > li:last-child {
	margin:0;
}

/*FULLPROJECT AJAX*/
div.content {
	background:#ededed;
	width:880px;
}


/*STYLES FOR SINGLE*/

div.project_infos {
	background:#f1f1f1;
	height:40px;	
	padding:20px;
	position:relative;
}

div.project_infos h1 {
	color:#282d31;
	font-size:15px;
	padding-bottom:10px;
}

div.project_infos p {
	color:#282d31;
	font-size:13px;
	font-family: 'TazLight';
	width:500px;
}


div.project_infos a {
	font-size:13px;
}

div.project_infos a.view {
	top:43px;
	right:20px;
	position:absolute;
	font-family: 'TazLight';
	font-size:13px;
}

div.slideshow {
	position:relative;
	width:880px;	
	overflow:hidden;
}

div.move {
	position:relative;
	
}

div.move p {
	position:relative;
	overflow:hidden;
	display:block;
}

div.move p img {
	

}



ul#nav3 {
	position:absolute;
	z-index:999;	
	right:20px;
	bottom:20px;
}

ul#nav3 li {
	cursor:pointer;	
	float:left;
}

ul#nav3 li a {
	float:left;
	text-indent:-9999em;
	width:16px; height:16px;
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	-o-border-radius:8px;
	border-radius:8px;
	background:#ddd;
	overflow:hidden;
	margin-left:10px;
}

#nav3 li.activeSlide a { background: #333; }

pre.close {
	position:absolute;
	top:20px;
	right:20px;	
	width:31px; height:23px;
	-webkit-border-radius:16px;
	-moz-border-radius:16px;
	-o-border-radius:16px;
	border-radius:16px;
	background:#999;
	z-index:999;
	padding-top:9px;
	padding-left:0px;
	text-align:center;
	color:#ddd;
	font-family:Arial,verdana;
}

pre.close:hover {
	cursor:pointer;
	background:#666;
}


/*CONTACT PART*/
div#c_left {
	padding-top:10px;
	width:301px;
	float:left;	
	margin-bottom:40px;
}
div#c_mid {
	padding-top:10px;
	width:301px;
	float:left;	
	margin-bottom:40px;
}
div#c_left h3 {
	font-size:20px;
	color:#999;
	font-weight:lighter;
	line-height:25px;
}
div#c_mid h3 {
	font-size:20px;
	color:#999;
	font-weight:lighter;
	line-height:25px;
}
div#c_left a {
	font-size:20px;
	color:#999;
	font-weight:lighter;
}
div#c_right {
	padding-top:10px;
}
div#c_right a {
	font-size:20px;
	color:#999;
	font-weight:lighter;
	line-height:25px;
	padding-right:10px;
}


/*LETTERS ANIMATION*/

.letter-container{
	text-align: center;
	font-family: Georgia,arial;
}
.letter-container h2{
	text-align: center;
	position: relative;
	height: 129px;
	width: 880px;
	display: inline-block;
	border:0px !important;
	margin:0px !important;
	padding:0px !important;
}
.letter-container h2 a{
	text-align: center;
	text-transform: uppercase;
	font-size: 130px;
	position: absolute;
	width: 880px;
	height: 129px;
	top:0px;
	left: 50%;
	margin-left: -443px;
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	transition: all 0.3s linear;
	color:#fff;
}
.letter-container h2 a:nth-child(2){
	opacity: 0;
}
.letter-container h2 a span{
	display: inline-block;
	position: relative;
	width: 120px;
	margin: 0px;
	background: #333;
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	transition: all 0.3s linear;
	text-shadow: 
		2px 2px 2px rgba(0,0,0,0.6), 
		1px 1px 2px rgba(0,0,0,0.4), 
		0px 0px 2px rgba(255,255,255,0.9);
}
.letter-container h2 a span:nth-child(odd),
.letter-container h2 a span.char1{
	-webkit-transform: skewY(10deg);
	-moz-transform: skewY(10deg);
	-o-transform: skewY(10deg);
	-ms-transform: skewY(10deg);
	transform: skewY(10deg);
	background: #333;
	-webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.3);
	box-shadow: 0px 3px 5px rgba(0,0,0,0.3);
	z-index: 10;
}
.letter-container h2 a span:nth-child(even),
.letter-container h2 a span.char2{
	-webkit-transform: skewY(-10deg);
	-moz-transform: skewY(-10deg);
	-o-transform: skewY(-10deg);
	-ms-transform: skewY(-10deg);
	transform: skewY(-10deg);
	background: #666;
	-webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.3);
	box-shadow: 0px 3px 5px rgba(0,0,0,0.3);
	z-index: 10;
}
.letter-container h2:hover a:nth-child(1){
	opacity: 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=90);
	cursor:text;
}
.letter-container h2:hover a:nth-child(2){
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
	filter: alpha(opacity=90);
	cursor:text;
}
.letter-container h2:hover a span{
	-webkit-transform: skewY(0deg);
	-moz-transform: skewY(0deg);
	-o-transform: skewY(0deg);
	-ms-transform: skewY(0deg);
	transform: skewY(0deg);
	background: #680121;
	cursor:text;
}
.letter-container h2 a span:hover{
	color: #fff;
	cursor:text;
}

/*SKILLS*/
section#contentWrap3 {
	width:880px;
	float:left;
	position:relative;	/* On older OS versions "position" and "z-index" must be defined, */
	z-index:1;			/* it seems that recent webkit is less picky and works anyway. */
	overflow:hidden;
	border-bottom: 2px solid #CBCBCB;
	margin-bottom:10px;
}
ul#index_cards {
		margin-top:20px;
		text-align:center;
	}
	
		ul#index_cards li {
			font-family: 'TazLight';
			height:180px !important;
			width:150px !important;
			display:block !important;
			float:left !important;
			border:1px solid #ddd;
			border-bottom:0px !important;
			padding:10px 10px;
			position:relative;
			-webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.3);
	box-shadow: 0px 3px 5px rgba(0,0,0,0.3);
			-moz-transition: all 0.5s ease-in-out;
			-webkit-transition: all 0.5s ease-in-out;
			background: #ffffff;
			background: -moz-linear-gradient(top,  #ffffff 0%, #dddddd 100%) !important;
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#dddddd)) !important;
			background: -webkit-linear-gradient(top,  #ffffff 0%,#dddddd 100%) !important;
			background: -o-linear-gradient(top,  #ffffff 0%,#dddddd 100%) !important;
			background: -ms-linear-gradient(top,  #ffffff 0%,#dddddd 100%) !important;
			background: linear-gradient(top,  #ffffff 0%,#dddddd 100%) !important;
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#333333',GradientType=0 ) !important;
			color:#666 !important;
		}
#card-1 {
	-webkit-transform: rotate(-20deg);
	-moz-transform: rotate(-20deg);
	z-index:1;
	left:150px;
	top:40px;
}
#card-2 {
	-webkit-transform: rotate(-10deg);
	-moz-transform: rotate(-10deg);
	z-index:2;
	left:70px;
	top:10px;
}
#card-3 {
	background-color:#69732B;
	z-index:3;
}
#card-4 {
	-webkit-transform: rotate(10deg);
	-moz-transform: rotate(10deg);
	z-index:2;
	right:70px;
	top:10px;
}
#card-5 {
	-webkit-transform: rotate(20deg);
	-moz-transform: rotate(20deg);
	z-index:1;
	right:150px;
	top:40px;
}
/* Hover States */	
ul#index_cards li:hover {
	z-index:4;
}	
#card-1:hover {
	-moz-transform: scale(1.1) rotate(-18deg);
	-moz-transform: scale(1.1) rotate(-18deg);
	-webkit-transform: scale(1.1) rotate(-18deg); 
   	-moz-transform: translate(-70px, -30px);
   	-webkit-transform: translate(-70px, -30px);
}		
#card-2:hover {
	-moz-transform: scale(1.1) rotate(-8deg);
   	-webkit-transform: scale(1.1) rotate(-8deg); 
   	 -moz-transform: translate(-70px, 0px);
   	 -webkit-transform: translate(-70px, 0px);
}	
#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); 
   	-moz-transform: translate(70px, 0px);
   	-webkit-transform: translate(70px, 0px);
}	
#card-5:hover {
	-moz-transform: scale(1.1) rotate(22deg);
   	-webkit-transform: scale(1.1) rotate(22deg); 
   	 -moz-transform: translate(70px, -30px);
   	 -webkit-transform: translate(70px, -30px);
}	
/* Content Styling */	
ul#index_cards li img {
	margin-top:7px;
	background:#eee;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-box-shadow: 0px 0px 5px #aaa;
	-webkit-box-shadow: 0px 0px 5px #aaa;
}		
ul#index_cards li p {
	margin-top:4px;
	text-align:left;
	line-height:28px;	
}