/*
** CSS Portfolio Général - Print - Cédric Porcher
*/

body, div,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre, dl, dt, dd, ol, ul, li, hr,
fieldset, form, label, legend, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section,
summary, hgroup
{
	display: block;
	margin: 0; /*initialisation des marges extérieures à 0 */
	padding: 0; /*initialisation des marges intérieures à 0 */
}

body
{
	font-family: Verdana, Arial, serif;
	font-size: 14px;
}

/* Les liens */
a
{
   color: black;
   text-decoration: none;
   font-weight: bold;
   font-size: 14px;
}

a:hover
{
   color: #757575;
}

.section
{
	width: 95%;
	height: auto;
	margin: 3% auto 0 auto;
	font-size: 14px;
	text-align: justify;
}

/* Titre de la page courante */
.titre
{
	width: 100%;
	display: block;
	margin-top: 10%;
	font-size: 14px;
	font-family: Verdana, Arial, serif;
	text-align: left;
}

.titre a
{
	font-size: 14px;
}

/* Section de présentation des études actuelles et de la recherche de stage */
#presentation
{
	display: block;
	width: 92%;
	height: auto;
	font-size: 14px;
	text-align: center;
	margin-top: 2%;
	padding: 1% 2% 1% 1%;
}

/* Section de contact */
#contact
{
	width: 92%;
	margin-top: 1.3%; /* position du bloc section */
	margin-bottom: -0.3%;
	padding: 1% 2% 1% 1%;
}

/* Photo de profil dans le CV */
#img_profil
{
	max-width: 15%;
}

/* Section du pied de page */
#footer
{
	margin: auto;
}

#pied_de_page
{
	display: block;
	width: 93%;
	color: #686868;
	font-size: 14px;
	text-align: center;
	background-color: rgba(230, 230, 230, 0.6);
	padding: 1%;
	margin: 2% auto 2% auto;
	border-radius: 5px;
}


/*
** Bouton de téléchargement du CV
*/

#button_cv
{
	display: none;
}

/*
** Menu de navigation
*/

#cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a,#cssmenu #menu-button
{
	display: none;
}

#cssmenu #menu-button
{
	display: none;
}

/* Mon logo personnel sur la barre de menu */
#logo_portfolio img
{
	display: none;
}

/* Affichage de mon nom d'auteur en haut à gauche du site */
#auteur
{
	display: block;
	width: 50%;
	font-size: 20px;
	font-weight: bold;
	font-family: Verdana, Arial, serif;
	position: absolute;
	z-index: 201;
	margin-top: 2%;
	margin-left: 4%;
	color: white;
}

/*
** Section du Curiculum Vitae
*/

.petit_bloc,.grand_bloc
{
	display:inline;
	float: left;
	position: relative;
	margin:1%;
	text-align: justify;
}

/* Zone de présentation "à propos" */
.profil
{
	margin-left: 0%;
	padding-left: 0%;
}

.petit_bloc
{
	width:49%;
}

.grand_bloc
{
	width: 98%;
}

section[role=main] .profil h3
{
	padding: 0;
}

section[role=main]
{
	width: 92%;
	overflow: hidden;
	padding: 1% 2% 1% 1%;
	margin-top: 2%;
}

section[role=main] h3
{
	display: block;
	border-bottom: 1px solid #e1e1e1;
	padding: 0 0 1% 3%;
	position: relative;
}

section[role=main] .formations h3:after, .formations h3:before, .experiences h3:after, .experiences h3:before, .competences h3:after, .competences h3:before
{
	width: 30px;
	height: 30px;
	content: '';
	display: block;
	position: absolute;
	top: -8px;
	left: 0;
	background-color: #3DC4E6;
	border-radius: 40px;
}

/* Images des pictogrammes */
section[role=main] .profil h3:after
{
	display: none;
}

section[role=main] .formations h3:after
{
	display: none;
}

section[role=main] .experiences h3:after
{
	display: none;
}

section[role=main] .competences h3:after
{
	display: none;
}

.experiences ul, .formations ul
{
	margin-left: 4.5%;
}

.experiences ul, .formations li
{
	margin-bottom: 1%;
}

.experiences li:last-child, .formations li:last-child
{
	margin-bottom: 2%;
}

.experiences li p, .formations li p
{
	margin-left: 2.9%;
}


#a_propos:after, #a_propos:before
{
	display: none;
}
#a_propos:after
{
	display: none;
}

/* Minis pictogrammes */

.lieu
{
	background: url('../images/lieu.png') no-repeat;
	padding-left: 25px;
	margin: 0 10px 1px 10px;
	color: #999;
	display: none;
}

.dates
{
	background: url('../images/date.png') no-repeat;
	padding-left: 25px;
	margin: 0 10px 1px 10px;
	color: #999;
	display: none;
}

/* Tableau des compétences */
#tab_langages, #tab_logiciels, #tab_environnement
{
	width: 32%;
	height: auto;
	margin-top: 1%;
	border-collapse: collapse;
	display: inline-block;
	text-align: center;
	font-size: 14px;
	margin-right: 1%;
}

#tab_logiciels
{
	position: absolute;
}

#tab_environnement
{
	position: absolute;
	margin-left: 33%;
}

#tab_langages tr:nth-of-type(odd), #tab_logiciels tr:nth-of-type(odd), #tab_environnement tr:nth-of-type(odd)
{
	background: #eee;
}

#tab_langages th, #tab_logiciels th, #tab_environnement th
{
	color: white;
	font-weight: bold;
}

#tab_langages td, #tab_logiciels td, #tab_environnement td, #tab_langages th, #tab_logiciels th, #tab_environnement th
{
	padding: 4px;
	border: 1px solid #ccc;
	width: 75%;
}


/* Cercles colorés des compétences */
.moncercle
{
	display: inline-block;
	width:5px;
	height:5px;
	padding: 6px;
	margin-left: 1%;
	margin-top: 1%;
	background:#3DC4E6;
	border: 1px solid #ccc;
	text-align: left;
	border-radius:50%;
}

.moncercle2
{
	display: inline-block;
	margin-left: 1%;
	margin-top: 1%;
	background:#e9f8fc;
	border-radius:50%;
	width:5px;
	height:5px;
	padding: 6px;
	border: 1px solid #ccc;
	text-align: left;
}

/*
** Mes créations
*/

/* Section de présentation de mes créations */
#creations
{
	text-align: center;
	width: 92%;
	padding: 1% 2% 1% 1%;
	margin-top: 2%;
}

/* Section individuelle de chaque création */
.creations
{
	width: 92%;
	margin-top: 2%;
	font-size: 14px;
	padding: 1% 2% 1% 1%;
}

.descr_creations
{
	width: 92%;
	line-height: 1;
	padding: 1% 2% 1% 1%;
	font-size: 18px;
}

img
{
	display: block;
    margin-left: auto;
    margin-right: auto
}

ul
{
	list-style:none;
}


.album
{
	width: 100%;
}
.album li
{
	display: inline-block;
	margin: 25px;
}
.album li > a, .album li > a img
{
	display: block;
}

.album li > a
{
	width: 220px;
	height: 170px;
	position: relative;
	padding: 10px;
	background-color: #BDBDBD;
	box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
	border-radius: 4px;
}

.album li > a span
{
	width: 92%;
	height: 64%;
	top: 5%;
	left: 4%;
	display: block;
	position: absolute;
	text-align: center;
	padding-top: 22%;
	color: white;
	font-size: 22px;
	opacity: 0;
	background-color: rgba(168,168,168,255); /* couleur de fond de la vignette */
}

.album li > a:hover span
{
	opacity: 1;
}

/*
** Boutons réseaux sociaux
*/

.soc
{
    display: none;
}

/*
** Section des mentions légales
*/

#mentions_legales
{
	display: block;
	width: 93%;
	padding: 1% 2% 1% 1%;
}

#mentions_legales > p
{
	margin-bottom: 1%;
}