/* === CSS RESET === */
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, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 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;
}
* {
	box-sizing:border-box;
    -moz-box-sizing: border-box;
}
body {
	line-height: 1;
	background-color: #F8E8CD;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* === End of CSS RESET === */


/* ==== Colors == */
/*Orange communication : R215 G131 B45 #D7832D
Mauve print : R183 G156 B195 #B79CC3
Vert web : R72 G153 B129 #489981
Vert web light : R178 G206 B183 #B2CEB7
Rouge photo : R196 G42 B44 #C42A2C
Beige background : R244 G235 B209 #F8E8CD
Bleu texte : R103 G106 B121 #676A79*/
/* ==== End Colors == */

body {
	/*background: url(../assets/classy_fabric.png);*/
	background-color: #F8E8CD;
	color: #676A79;
	font-size: 20px;
	font-family: "Terminal Dosis", sans-serif;
	/*text-shadow: 
		1px 1px 0 transparent,
		2px 2px 0 #101010;*/
	/*overflow: hidden;*/
}
h1 {
	font-size: 45px;
	font-weight: bold;
	line-height: 1em;
	margin-bottom: 0.5em;
	margin-top: 0;
	/*text-shadow: 
		2px 2px 0 transparent,
		4px 4px 0 #101010;*/
}

.signerica {
	font-family: 'signerica_fatregular';
	line-height:1.5em;
	}
	
.signericabig {
	font-family: 'signerica_fatregular';
	font-size: 2em;
	line-height:2.5em;
	}
	
.orange {
	color: #D7832D;
}

.mauve {
	color: #B79CC3;
}

.vert {
	color: #489981;
}

.lightvert {
	color: #B2CEB7;
}

.rouge {
	color: #C42A2C;
}
	
.bio {
text-align: left;
font-size: 0.7em;
width: 80%;
margin:auto;
margin-top: 0.5em;
line-height:1.3em;
}

a, a:visited {
	color: #B2B2B2;
	text-decoration: none;
	border-bottom: 2px dotted;
	transition: color 0.2s;
}

a:hover {
	color: white;
}

a:active {
	color: #B2CEB7;
}

.big {
	display: block;
	font-size: 45px;
	font-weight: bold;
	line-height: 1.3em;
	margin-bottom: 10px;
	/*text-shadow: 
		2px 2px 0 transparent,
		4px 4px 0 #101010;*/
}
#wrapper {
	margin: 0 auto;
	width:80%;
	max-width:800px;
}
/*---------------------------------- Style nav ------------------*/
nav {
	position: fixed;
	z-index: 99999;
	font-family: "Terminal Dosis", sans-serif;
	font-weight: normal;
	font-size: 20px;
	bottom:0;
}
nav {
	left: 0;
	background-color: #676A79;
}
nav li {
	float: left;
	background-color: #676A79;
}
nav a {
	display: block;
	height: 40px;
	line-height: 40px;
	border: none;
	text-align: center;
	transition: 0.25s;
	margin-right: 0.8em;
	color: #F8E8CD;
}
nav li:first-child a { margin-left: 1em; }
nav a:hover { background: rgba(103,106,121, 0.5); }



#start,
#description,
#syntax,
#scrollbar,
#formation,
#lignetemps,
#source,
#follow { min-height:1000px; }

#start {
	margin-top: 300px;
	font-size: 30px;
	text-align: center;
	font-weight: bold;
}
#start img {
	border: solid white 8px;
	border-radius: 50%;
	margin-bottom: 10px;
}
.arrow {
	position: relative;
	display: inline-block;
}
#start .arrow {
	font-size: 20px;
	animation: point-down 0.5s alternate infinite;
}
#description {
	margin-top:100px;
}
#donutchart {
	margin-left: -150px;
}
#syntax {
	padding-top: 250px;
}
#scrollbar {
	padding-top: 100px;
	margin-bottom:30px;
}
#scrollbar h2 { margin-bottom: .3em; }

#formation {
	text-align:left;
	padding-top: 250px;
}

#formation img {
	margin-top: 30px;
}

#lignetemps {

}

#lignetemps ul {
}

#lignetemps ul li {
	float:left;
}

#lignetemps ul li:first-child {
	margin-right:5px;
}

#lignetemps ul li:nth-child(2) {
	margin-right:210px;
}

#lignetemps ul li:nth-child(3) {
	margin-right:165px;
}
#lignetemps ul li:nth-child(4) {
	margin-right:100px;
}

#lignetemps ul li:nth-child(5) {
	margin-right:100px;
}

#source {
	text-align:center;
	padding-top: 250px;
}

#source p {
text-align:left;
margin-bottom: 20px;}

#follow {

	/*background: #bada66;*/
	padding-top: 100px;
	margin-bottom : 100px;
}

#follow .big {
	font-size: 30px;
}

#follow p {
	line-height: 2em;
}

.highlight {
	animation: highlight 0.2s alternate 6 ;
}

@keyframes point-down {
	from {
		top: 0;
	}
	to {
		top: 5px;
	}
}

@keyframes highlight {
	to {
		background: lightblue;
	}
}


/*---------------------------------- Webfont signerica------------------*/

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

}


/*---------------------------------- Style accordion------------------*/

/* get rid of those system borders being generated for A tags */
#accordion a:active {
    outline:none;
}

:focus {
    -moz-outline-style:none;
}


/* root element for accordion. decorated with rounded borders and gradient background image */
#accordioncompetence {
width: 100%;
}

#accordion {
    background:#F8E8CD;
    width: 90%;
    margin: 0 auto;
    margin-top: 30px;
}

/* accordion header */
#accordion h3 {
    line-height: 20px;
    margin:0;
    padding:5px 15px;
    font-size:18px;
    font-weight:bolder;
    cursor:pointer;
    color:#F8E8CD;
}

/* currently active header */
#accordion h3.orange {
    cursor:default;
    background-color:#D7832D;
}

#accordion h3.vert {
    cursor:default;
    background-color:#489981;
}

#accordion h3.mauve {
    cursor:default;
    background-color:#B79CC3;
}

#accordion h3.vertlight {
    cursor:default;
    background-color:#B2CEB7;
}

#accordion h3.rouge {
    cursor:default;
    background-color:#C42A2C;
}

/* accordion pane */
#accordion p {
    padding:15px;
    color:#676A79;
    font-size:15px;
    line-height: 1.2em;
}

/*--------------------------------------------------------------------*/

/*---------------------------------- section outils ------------------*/

.outils {
	padding: 5px;
	width: 600px;
}
.outils h3 {
	font-size: 0.8em;
	margin-bottom: 5px;
}
.listeoutils {
	width: 200px;
	float: left;
}
.listeoutils li {
	background: url(../images/csg-522360241ae46.png) no-repeat top left;
	height: 26px;
	list-style-type: none;
	font: 0/0 a;
	color: transparent;
}
/*techniques web*/
.outils div:nth-of-type(1) { margin-right: 60px; }
.outils div:nth-of-type(1) li:nth-of-type(1) { background-position: 0 -1216px; width: 200px; height: 26px; }
.outils div:nth-of-type(1) li:nth-of-type(2) { background-position: 0 -760px; width: 200px; height: 26px; }
.outils div:nth-of-type(1) li:nth-of-type(3) { background-position: 0 -532px; width: 200px; height: 26px; }
.outils div:nth-of-type(1) li:nth-of-type(4) { background-position: 0 -836px; width: 200px; height: 26px; }
.outils div:nth-of-type(1) li:nth-of-type(5) { background-position: 0 -912px; width: 200px; height: 26px; }
.outils div:nth-of-type(1) li:nth-of-type(6) { background-position: 0 -1292px; width: 200px; height: 26px; }
.outils div:nth-of-type(1) li:nth-of-type(7) { background-position: 0 -684px; width: 200px; height: 26px; }
/*techniques print*/
.outils div:nth-of-type(2) li:nth-of-type(1) { background-position: 0 -380px; width: 200px; height: 26px; }
.outils div:nth-of-type(2) li:nth-of-type(2) { background-position: 0 -456px; width: 200px; height: 26px; }
/*photographie*/
.outils div:nth-of-type(3) li:nth-of-type(1) { background-position: 0 -1140px; width: 200px; height: 26px; }
.outils div:nth-of-type(3) li:nth-of-type(2) { background-position: 0 -608px; width: 200px; height: 26px; }
/*bureautique*/
.outils div:nth-of-type(4) li:nth-of-type(1) { background-position: 0 -988px; width: 200px; height: 26px; }
.outils div:nth-of-type(4) li:nth-of-type(2) { background-position: 0 -1064px; width: 200px; height: 26px; }
/*langues*/
.outils div:nth-of-type(5) li { background-position: 100px -76px; width: 200px; height: 26px; }
.outils div:nth-of-type(5) li:nth-of-type(3) { margin-bottom: 15px; }

/*langues et legende*/
.langues {
	clear:both;
	width:400px;
	margin-top: 5px;
}
.langues li {
	color: #676A79;
	font-family: "Terminal Dosis", sans-serif;
	font-size: 0.8em;
	line-height: 1.35em;
	height: 26px;
	width: 200px;
}
/* changement */
#frans {
	background: url(../images/5croix.png) no-repeat top left;
	background-position: 103px 0;
	width: 203px;
}
#legendelangues {
	clear:both;
	width:640px;
}
#legendelangues p {
	font-size: 0.6em;
	float:left;
}
#legendelangues img {
	float:left;
	margin:-5px 10px 0 0;
}



/*--------------------------tabs------------------------*/


/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
	display: none;
}
.ui-helper-hidden-accessible {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
#scrollbar .ui-helper-reset {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	line-height: 1.3;
	text-decoration: none;
	font-size: 90%;
	list-style: none;
	font-family: "Terminal Dosis", sans-serif;
	background-color:#676A79;
}
.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
	content: "";
	display: table;
	border-collapse: collapse;
}
.ui-helper-clearfix:after {
	clear: both;
}
.ui-helper-clearfix {
	min-height: 0; /* support: IE7 */
}
.ui-helper-zfix {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	opacity: 0;
	filter:Alpha(Opacity=0);
}

.ui-front {
	z-index: 100;
}

.ui-tabs {
	position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
	padding: .2em;
}
.ui-tabs .ui-tabs-nav {
	margin: 0;
	padding: .2em .2em 0;
}
.ui-tabs .ui-tabs-nav li {
	list-style: none;
	float: left;
	position: relative;
	top: 0;
	margin: 1px .2em 0 0;
	border-bottom-width: 0;
	padding: 0;
	white-space: nowrap;
}
.ui-tabs .ui-tabs-nav li a {
	float: left;
	padding: .5em 1em;
	text-decoration: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
	margin-bottom: -1px;
	padding-bottom: 1px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active a,
.ui-tabs .ui-tabs-nav li.ui-state-disabled a,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading a {
	cursor: text;
}
.ui-tabs .ui-tabs-nav li a, /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a {
	cursor: pointer;
}
.ui-tabs .ui-tabs-panel {
	display: block;
	border-width: 0;
	padding: 1em 1.4em;
	background: none;
}


/*----------------------css tooltips------------------------------------------*/
/*----------------------------------------------------------------------------*/

.ui-tooltip {
	padding: 8px;
	position: absolute;
	z-index: 9999;
	max-width: 300px;
	-webkit-box-shadow: 0 0 5px #aaa;
	box-shadow: 0 0 5px #aaa;
}
body .ui-tooltip {
	border-width: 2px;
	background-color: white;
}


/*----------------------section expériences professionnelles------------------*/
/*----------------------------------------------------------------------------*/


.expcom {
width: 120px;
height:10px;
background-color: #D7832D;
float:left;
margin:15px 0 10px 0;
}

.expprint {
width: 120px;
height:10px;
background-color: #B79CC3;
float:left;
margin:15px 0 10px 0;
}

.expweb {
width: 120px;
height:10px;
background-color: #489981;
float:left;
margin:15px 0 10px 0;
}

.expseo {
width: 120px;
height:10px;
background-color: #B2CEB7;
float:left;
margin:15px 0 10px 0;
}

.expphoto {
width: 120px;
height:10px;
background-color: #C42A2C;
float:left;
margin:15px 0 10px 0;
}


#scrollbar .clear {
clear:both;
}

#scrollbar h3 {
font-size: 1.2em;
margin-bottom: 10px;
}

#scrollbar p {
font-size: .9em;
line-height: 1.2em;
color:#676A79;}

.lientabs {
color: #489981;
border: none;}


/*-------------------------------------------------------------*/

iframe {
width:100%;
height:350px;
border:solid white 20px;
margin: 20px 0 10px 0;
}

iframe a {
text-align: left;
color:#489981;
margin-bottom: 10px;
}

/*-------------------sprites sociaux---------------------------*/
/*-------------------------------------------------------------*/
#navsociaux {
	height: 60px;
	margin:auto;
	width:40%;
}

#navsociaux li {
	display:inline;
    margin-right:10px;
    background: url(../images/csg-5226ef185bd10.png) no-repeat top left;
    float:left;
}

#navsociaux li:nth-child(1) {
	background-position: 0 0; 
	width: 55px; 
	height: 56px;
}

#navsociaux li:hover:nth-child(1) {
background-position: 0 -106px; width: 55px; height: 56px;
}

#navsociaux li:nth-child(2) {
	background-position: 0 -632px; width: 55px; height: 55px;
}

#navsociaux li:hover:nth-child(2) {
	background-position: 0 -737px; width: 55px; height: 55px;
}

#navsociaux li:nth-child(3) {
	background-position: 0 -212px; width: 55px; height: 55px;
}

#navsociaux li:hover:nth-child(3) {
	background-position: 0 -317px; width: 55px; height: 55px;
}

#navsociaux li:nth-child(4) {
	background-position: 0 -422px; width: 55px; height: 55px;
}

#navsociaux li:hover:nth-child(4) {
	background-position: 0 -527px; width: 55px; height: 55px;
}



/*.sprite-facebook-bleu{ background-position: 0 0; width: 55px; height: 56px; } 
.sprite-facebook-gris{ background-position: 0 -106px; width: 55px; height: 56px; } 
.sprite-flickr-bleu{ background-position: 0 -212px; width: 55px; height: 55px; } 
.sprite-flickr-gris{ background-position: 0 -317px; width: 55px; height: 55px; } 
.sprite-linkedin-bleu{ background-position: 0 -422px; width: 55px; height: 55px; } 
.sprite-linkedin-gris{ background-position: 0 -527px; width: 55px; height: 55px; } 
.sprite-twitter-bleu{ background-position: 0 -632px; width: 55px; height: 55px; } 
.sprite-twitter-gris{ background-position: 0 -737px; width: 55px; height: 55px; } */


#navsociaux li a {
	color:transparent;
}


@media screen and (max-width: 815px) {
	/* mettre la navigation en vertical */

	nav {
		font-size: 0.6em;
		width:100%;	
	}

	nav li:first-child a { margin-left: 0; }

	#start,
	#description,
	#syntax,
	#scrollbar,
	#formation,
	#lignetemps,
	#source,
	#follow { margin-top:0; padding-top:0;}
	
	.listeoutils {
		float: none;
		margin-top:0.3em;
	}
	#accordion {width: 100%;}

	#formation { 
		position: relative;
	}
	#formation #lignetemps {
		min-height: 1000px;
	}
	#formation #lignetemps ul {
		float: none;
		position: absolute;
		left:70px;
		top:135px;
	}
	#formation #lignetemps ul li {
		float: none;
	}
	#formation img {
		position: absolute;
		top: 450px;
		left: -360px;
		transform:rotate(90deg);
		-ms-transform:rotate(90deg);
		-webkit-transform:rotate(90deg);
	}
	#lignetemps ul li:nth-child(2) {margin-top:20px;}
	#lignetemps ul li:nth-child(3) {margin-top:225px;}
	#lignetemps ul li:nth-child(4) {margin-top:190px;}
	#lignetemps ul li:nth-child(5) {margin-top:110px;}

}/*fin @media screen*/