/* Hop on va chercher la webfont Coustard chez Google */
@import url(http://fonts.googleapis.com/css?family=Coustard);

/* On charge la font d'icones, dans tous les formats possibles */
@font-face
{
	font-family:'websymbols';
	src:url('websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'), url('websymbols-regular-webfont.woff') format('woff'), url('websymbols-regular-webfont.ttf') format('truetype'), url('websymbols-regular-webfont.svg#webfont') format('svg')
}

.collapsible
{
	height:0;
	left:-9999px;
	opacity:0;
	overflow:hidden;
	padding-top:15px
}

/* une méthode de masquage purement visuel (l'élément reste accessible pour les navigateurs non-visuels) */
.hidden-accessible
{
	left:-9999px;
	position:absolute
}

.icon:active,address span a:active
{
	color:blue
}

.icon:hover,address span a:hover
{
	color:#30a9e7
}

.linkedin
{
	color:#78cef6
}

/* pour afficher les liens de profil en toutes lettres */
.printonly 
{
	display:none
}

.twitter
{
	color:#429CC4
}

address
{
	font-style:normal;
	left:100%;
	margin:0 0 0 -55px;
	position:fixed;
	width:370px;
	z-index:1
}

address span
{
	background:#fff;
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(1, #f5f5f5), color-stop(0.5, #ddd), color-stop(0.5, #eee), color-stop(0, #ccc) );
	border-bottom:#999 1px solid;
	border-radius:317px;
	border-right:#999 1px solid;
	color:#333;
	display:block;
	padding:5px;
	text-shadow:0 1px 0 #fff
}

address span a
{
	color:inherit
}

address span.long:hover
{
	margin-left:-320px
}

address span:before,.icon
{
	content:attr(data-icontype);
	display:inline-block;
	font-family:websymbols;
	font-size:150%;
	font-style:normal;
	font-weight:400;
	padding:5px 10px 5px 0;
	text-align:center;
	text-decoration:none;
	width:50px
}

address span:hover
{
	color:blue;
	margin-left:-160px;
	opacity:1
}

body
{
	font-family:'Coustard', sans-serif;
	margin:auto;
	width:960px
}

div.container:hover section
{
	opacity:0.3
}

/* Le CV tient en entier dans l'écran grâce aux accordéons
 donc on positionne le footer en absolu au pied de la page */
footer
{
	font-size:75%;
	margin-top:-1.5em;
	position:absolute;
	text-align:center;
	text-shadow:0 1px 0 #fff;
	top:100%;
	width:960px
}

footer a
{
	text-decoration:none
}

header
{
	-moz-transform:rotate(-90deg);
	-ms-transform:rotate(-90deg);
	-o-transform:rotate(-90deg);
	-webkit-transform:rotate(-90deg);
	color:gray;
	display:block;
	height:380px;
	left:35px;
	position:fixed;
	text-align:right;
	top:40px;
	z-index:-1
}

header h1
{
	margin:0
}

html
{
	background-color:#b4b4b4;
	background-image: linear-gradient(bottom, rgb(180,180,180) 0%, rgb(214,204,255) 52%, rgb(240,235,255) 100%);
	background-image: -o-linear-gradient(bottom, rgb(180,180,180) 0%, rgb(214,204,255) 52%, rgb(240,235,255) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(180,180,180) 0%, rgb(214,204,255) 52%, rgb(240,235,255) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(180,180,180) 0%, rgb(214,204,255) 52%, rgb(240,235,255) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(180,180,180) 0%, rgb(214,204,255) 52%, rgb(240,235,255) 100%);
	background-repeat:no-repeat;
	height:100%
}

section h1:before
{
	content:")";
	display:inline-block;
	font-family:websymbols;
	font-style:normal;
	font-weight:400;
	padding:8px;
	text-align:right;
	width:20px
}

section,.collapsible,address span
{
	-moz-transition:all 0.5s ease-in-out;
	-ms-transition:all 0.5s ease-in-out;
	-o-transition:all 0.5s ease-in-out;
	-webkit-transition:all 0.5s ease-in-out;
	transition:all 0.5s ease-in-out
}

section,p
{
	margin:0;
	padding:0
}

section:hover
{
	opacity:1 !important
}

section:hover .collapsible
{
	height:100px;
	left:0;
	opacity:1
}

section:hover .large
{
	height:150px
}

section:hover .small
{
	height:50px
}

section:hover h1
{
	-moz-transition:all 0.2s ease-out;
	-ms-transition:all 0.2s ease-out;
	-o-transition:all 0.2s ease-out;
	-webkit-transition:all 0.2s ease-out;
	margin-left:10px;
	transition:all 0.2s ease-out
}

section:hover h1:before
{
	content:";"
}

/* Et maintenant un peu de "responsiveness" : 
 on révèle tous les éléments cachés pour les périphériques
 mobiles et les imprimantes en surchargeant les classes et
 propriétés qui vont bien */
@media print  {
	a.icon
	{
		width:220px
	}

	a.icon:after
	{
		color:#000;
		content:attr(href);
		font-family:'Coustard', sans-serif;
		font-size:66%;
		margin-left:5px;
		text-align:center
	}

address
	{
		font-size:80%
	}

	address span,address span:hover,footer
	{
		background-image:none;
		border:none;
		color:#000;
		padding:0;
		text-align:left;
		text-shadow:none
	}

	address span:before
	{
		display:none
	}
}

/* Section réservée aux périphériques mobiles (identifiés par 
leur largeur max de 1125px, un peu arbitraire, j'avoue) */
@media print,only screen and (max-width:1125px)  {
	.collapsible,.small,.large
	{
		height:auto !important;
		left:0;
		opacity:1
	}

	address
	{
		left:auto;
		margin:20px;
		position:relative;
		width:auto;
		z-index:1
	}

	address span,address span:hover,address span.long:hover
	{
		margin-left:0;
		text-align:left
	}

	body
	{
		width:90%
	}

	div.container:hover section
	{
		opacity:1
	}

	footer
	{
		font-size:100%;
		margin-top:20px;
		position:relative;
		width:auto
	}

	header
	{
		-moz-transform:rotate(0deg);
		-ms-transform:rotate(0deg);
		-o-transform:rotate(0deg);
		-webkit-transform:rotate(0deg);
		height:auto;
		left:0;
		position:relative;
		text-align:center;
		top:10px
	}

	section h1
	{
		margin-left:10px
	}
	
	/* on "déplie" la petite icone de section : V au lieu de > */
	section h1:before
	{
		content:";"
	}
}