/*********** Import des feuilles de mise en forme générales **********/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic);
@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:300,400);
@import url(http://fonts.googleapis.com/css?family=Lobster);
@import url("mep.css");
@import url("ours.css");
@import url("menu.css");

/****** BASICS *********/
html {
	width:100%; height:100%;
}
body {
	margin:0px;
	padding:0px;
	width:100%; height:100%;
	position:relative; top:0px; left:0px;
	background-color:#5aa0d1;
	font-family:'Open Sans', Helvetica, Tahoma, sans-serif;
	font-size:15px;
}
/* 698cb1 - 1b3b5e */
a {
	color:#3a99d2;
	transition:all 0.1s;
	text-decoration:none;
}
a:hover {
	color:#223244;
}
ul.sans li {
	list-style-type:none;
}

ul.liste-nomar {
	margin:0; padding:0;
}
ul.liste-nomar li {
	padding-left:10px;
}
ul.liste-nopuce li {
	list-style-type:none;
}
ul.liste-pbot li {
	padding-bottom:10px;
}

.titre{
	font-size:20px; text-transform:uppercase;
}
.stitre {
	font-size:17px; text-transform:uppercase; color:#016fba;
}
.note {
	font-size:12px; font-style:italic; color:#555555;
}

#fantome {
	display:none; position:absolute; z-index:600;
}

.cool-btn, .cool-btn-wide {
	display:inline-block;
	padding:8px 20px;
	background-color:#107bb4; color:white;
	font-size:18px; transition:all 0.2s;
}

.cool-btn-wide {
	display:block; text-align:center; margin-top:10px;
}
.cool-btn:hover, .cool-btn-wide:hover {
	background-color:black;
	color:white;
}

.ctn {
	width:1100px; margin:0px auto;
}

.skroll-bg {
	background:transparent url(../../images/layout/bg-scroll.png) repeat center top; background-attachment:fixed;
}


/***** SQUELETTE ******/
#header {
	position:relative; top:0px; left:0px; margin:0px; padding:0px;
	background:transparent url(../../images/layout/entete.png) center bottom repeat-x;
}
.header-wrap {
	position:relative;
	margin:0px auto;
	width:1100px;
}
#entete {
	padding-top:30px;
	font-family: 'Yanone Kaffeesatz', Helvetica, sans-serif; font-weight:400;
	letter-spacing:1px;
	text-align:center;
}
#entete a {
	color:white; transition:all 0.2s;
}
#entete a:hover {
	color:#83b4ce; letter-spacing:5px;
}
.entete-titre1 {
	text-transform:uppercase; font-size:55px;
}
.entete-titre2 {
	text-transform:uppercase; font-size:20px;
}

#menu {
	padding-top:30px; padding-bottom:20px;
}
#menu ul {
	margin:0px; padding:0px; text-align:center;
}
#menu ul li {
	display:inline-block; padding:0px 5px; text-align:center;
}
#menu li a {
	background:transparent url(../../images/pictos/footer-shig.png) top left no-repeat;
	background-size:contain;
	display:inline-block; color:white; text-transform:uppercase;
	padding:8px 10px; padding-left:40px;
	font-size:16px; border-radius:20px;
	transition:all 0.2s;
}
#menu li a.menu-cv { background-image:url(../../images/pictos/footer-shig.png); }
#menu li a.menu-realisations { background-image:url(../../images/pictos/footer-skills.png); }
#menu li a.menu-contact { background-image:url(../../images/pictos/footer-contact.png); }
#menu li a.menu-admin { background-image:url(../../images/pictos/footer-loisir.png); }
#menu li a.menu-accueil { background-image:url(../../images/pictos/footer-shig.png); }
#menu li a.menu-technos { background-image:url(../../images/pictos/footer-loisir.png); }

#menu li a:hover, #menu li a.menu-select {
	background-color:white; color:black;
}
#menu li a.menu-cv:hover, #menu li a.menu-cv-select { background-image:url(../../images/pictos/icon-shig.png); }
#menu li a.menu-realisations:hover, #menu li a.menu-realisations-select { background-image:url(../../images/pictos/icon-skills.png); }
#menu li a.menu-contact:hover, #menu li a.menu-contact-select { background-image:url(../../images/pictos/icon-contact.png); }
#menu li a.menu-admin:hover, #menu li a.menu-admin-select { background-image:url(../../images/pictos/icon-loisir.png); }
#menu li a.menu-accueil:hover, #menu li a.menu-accueil-select { background-image:url(../../images/pictos/icon-shig.png); }
#menu li a.menu-technos:hover, #menu li a.menu-technos-select { background-image:url(../../images/pictos/icon-loisir.png); }

#content {
	position:relative; top:0px; left:0px;
	margin:30px auto;
	width:1100px;
}

#footer {
	background:transparent url(../../images/layout/footer.png) top center repeat-x;
	width:100%; padding:50px 0px 20px 0px; text-align:center;
	font-size:12px; color:white;
	margin:0px auto;
}
#footer ul, #footer ul li {
	margin:0px; padding:0px; text-align:center;
}
#footer ul { padding-top:15px; }
#footer ul li { display:inline-block; padding:0px 7px; }
.footer-cv, .footer-realisations, .footer-contact {
	display:inline-block; padding:5px; padding-top:130px; text-align:center; width:150px;
	background:transparent url(../../images/pictos/footer-shig.png) top center no-repeat;
	background-size:130px auto;
	color:white; font-size:20px; text-transform:uppercase;
	font-family: 'Yanone Kaffeesatz', Helvetica, sans-serif; font-weight:300;
}
.footer-realisations { background-image:url(../../images/pictos/footer-skills.png); }
.footer-contact { background-image:url(../../images/pictos/footer-contact.png); }
.footer-cv:hover, .footer-realisations:hover, .footer-contact:hover {
	color:#549de1;
}
.footer-titre, .footer-titre2 {
	font-family: 'Yanone Kaffeesatz', Helvetica, sans-serif; font-weight:300;
	font-size:25px; text-transform:uppercase;
}
.footer-copy {
	padding-top:15px;
}

#ariane {
	padding:10px;
	background-color:#3f6289;
	margin-bottom:20px; color:white;
	border-radius:5px;
}
#ariane a {
	color:white; display:inline-block; padding:0px 5px;
}
#ariane a:hover {
	color:#9c011f;
}

.msg {
	margin:10px; padding:10px;
	border:1px dashed #990000;
	color:#990000;
}

.bloc-blanc {
	width:100%;
	margin-bottom:30px;
	background-color:white;
}


/****** IDENTIFICATION ******/
.pagelog-field, .pagelog-submit {
	padding:8px; font-size:15px; border-radius:5px;
	color:#1b3b5e; border:1px solid #1b3b5e;
}
.pagelog-submit {
	background-color:#1b3b5e; color:white; cursor:pointer;
	transition:all 0.2s;
}
.pagelog-submit:hover {
	background-color:#e87301;
}


/******* PAGE D'ACCUEIL ******/
.bg-d {
	padding:30px 0px; padding-top:50px;
	background:white url(../../images/layout/dents/dents-bg.png) top center repeat-x;
	color:black;
	font-size:20px;
}
.tr-index-left, .tr-index-center, .tr-index-right {
	font-family: 'Lobster', cursive; font-size:45px; margin-bottom:15px; text-align:left;
	color:black;
	opacity:0.5;
}
.tr-index-center {
	text-align:center;
}
.tr-index-right {
	text-align:right;
}
.ind-btn {
	display:inline-block;
	padding:8px 15px; font-size:25px; color:white; border:1px solid white; text-transform:uppercase;
	transition:all 0.4s;
	background-color:#0f5fb4;
	box-shadow:0px 0px 8px #333333;
	font-family: 'Yanone Kaffeesatz', Helvetica, sans-serif; font-weight:300;
}
.ind-btn:hover {
	color:white;
	background-color:#3ba120;
	box-shadow:0px 0px 8px #999999;
}
/* 0f5fb4 - 3ba120 - 37672a */

/******* CV *********/
#bloc-experience, #bloc-formation, #bloc-competences, #bloc-loisirs, #bloc-perso {
	margin-bottom:35px;
}
.perso-nom {
	font-size:35px; color:white;
}
.perso-details {
	font-size:20px;
}

.titre-experience, .titre-formation, .titre-competences, .titre-loisirs, .titre-contact {
	background:transparent url(../../images/pictos/icon-taff.png) left center no-repeat;
	padding:20px 0px 20px 80px;
	background-size:70px 70px; margin-bottom:15px;
}
.titre-formation { background-image:url(../../images/pictos/icon-formation.png); }
.titre-competences { background-image:url(../../images/pictos/icon-skills.png); }
.titre-loisirs { background-image:url(../../images/pictos/icon-loisir.png); }
.titre-contact { background-image:url(../../images/pictos/icon-contact.png); }

.titre-section {
	font-size:30px; text-transform:uppercase;
}
.item-section {
	background-color:#1b3b5e; color:white; font-size:23px; text-transform:uppercase; font-style:italic;
	padding:10px;
}
.item-societe {
	padding:10px;
	background-color:#e87301; color:white; font-size:20px;
}
.item-date {
	padding:10px; background-color:#aabbcc; color:black; font-size:17px;
}
.item-details {
	background-color:white; padding:20px;
}
.item-details li {
	margin-bottom:10px;
}


.skills {
	float:left; padding-left:80px; width:calc(50% - 80px - 20px);
	margin-bottom:30px; margin-right:20px;
}
#sk-web, #sk-video, #sk-graph, #sk-divers {
	background:transparent url(../../images/pictos/skills-dev.png) top left no-repeat;
	background-size:80px auto;
}
#sk-video { background-image:url(../../images/pictos/skills-video.png); }
#sk-graph { background-image:url(../../images/pictos/skills-graph.png); }
#sk-divers { background-image:url(../../images/pictos/skills-plus.png); }



/****** RECHERCHE *********/
.recherche-site {
	margin:25px; text-align:center; font-size:16px;
}
.rch-field {
	border-radius:5px; border:1px solid #999999; background-color:#FAFAFA; color:#666666; padding:5px; font-size:16px; width:320px;
}
.rch-select {
	font-size:16px;border:1px solid #999999; background-color:#FAFAFA; color:#666666; padding:5px;border-radius:5px;
}
.rch-lien-submit, .rch-submit {
	display:inline-block; background-color:#e87301; padding:5px 25px; cursor:pointer; border:0;
	font-size:16px; transition:all 0.2s;
}
.rch-lien-submit:hover, .rch-submit:hover {
	background-color:black; color:white;
}


/******* FORMULAIRES *********/
.tab-contact {
	width:100%;
}
.t-l {
	text-align:right; padding-left:10px;  width:200px; padding-top:10px;
}
.tab-contact-field, .tab-contact-text  {
	border:1px solid #999999; border-radius:5px; padding:5px; font-size:13px; width:500px;
}
.tab-contact-text {
	height:250px;
	font-family:Helvetica, Tahoma, sans-serif;
}
.tab-contact-submit {
	border:0px; display:inline-block; margin:15px; padding:10px 25px; cursor:pointer;
	background-color:#e87301; color:white; font-size:14px;
}
.tab-contact-submit:hover {
	background-color:black;
}
.tab-contact-msg, .tab-contact-erreur {
	color:#0a630a; border:1px dashed #0a630a;
	margin:20px 60px; text-align:center;
	background-color:#e3ebe3; padding:10px;
}
.tab-contact-erreur {
	background-color:#fff0f0; border:1px dashed #af1111; color:#af1111;
}
.tab-contact-select {
	padding:8px; border:1px solid #888888; background-color:white; border-radius:5px; font-size:13px;
}


/******* REALISATIONS *******/
.real-liste {
	float:left; width:45%; margin:15px 2%;
}
.real-lien {
	display:block; width:100%; height:250px; position:relative;
	background:transparent url(../../images/soon.png) top center no-repeat;
	background-size:cover;
	border:1px solid #1b3b5e;
	color:white;
}
.real-nom {
	position:absolute; left:0px; right:0px; bottom:0px; display:inline-block;
	background:transparent url(../../images/layout/entete.png) top center repeat-x; color:white;
	padding:15px; transition:all 0.2s;
}
.real-titre {
	font-size:25px; text-transform:uppercase;
}
.real-date {
	font-size:18px;
}
.real-lien:hover .real-nom {
	background-color:black;
}

.frl-titre {
	font-size:40px; color:white; text-transform:uppercase;
}
.frl-date {
	font-size:20px; font-style:italic; color:#134879;
}
#frl-tags {
	margin-top:5px;
}
.frl-tag {
	display:inline-block; padding:4px 8px; background-color:#CFCFCF; color:white; margin:0px 2px 2px 0px;
	font-family: 'Yanone Kaffeesatz', Helvetica, sans-serif; font-weight:300;
	font-size:17px;
	border-radius:3px;
}
.frl-tag:hover {
	opacity:1.0; color:white;
}
.frl-descri {
	text-align:justify;
}
.img-article, .img-article-big {
	position:relative;
	display:block; margin:10px auto;
	max-height:300px; max-width:400px;
	padding:1px; border:1px solid black;
	cursor:pointer;
	transition:all 0.5s;
}
.img-article-big {
	max-height:700px; max-width:800px;
}

/******* RESPONSIVE ******/
@media all AND (max-width:1099px) {
	#content, .ctn {
		width:95%;
	}
	.header-wrap {
		width:95%;
	}
	#footer {
		width:100%;
	}
	.bloc-blanc {
		width:95%;
	}
}
@media all AND (orientation:portrait), screen AND (max-width:800px), print {
	#content, .header-wrap, .ctn{
		width:95%;
	}
	#entete, .entete-titre1, .entete-titre2 {
		text-align:center;
	}
	#footer {
		width:100%;
	}
	.footer-cv, .footer-realisations, .footer-contact {
		display:inline-block; padding:0px; background-image:none; width:auto;
	}
	.skills {
		width:calc(100% - 80px);
		margin-right:0px;
	}
	.titre-experience, .titre-formation, .titre-competences, .titre-loisirs, .titre-contact {
		background-position:top center;
		padding:80px 10px 10px 10px;
		text-align:center;
		margin-bottom:15px;
	}
	.real-liste {
		width:100%; margin:15px 0px;
	}
	.t-l {
		width:25%;
	}
	.tab-contact-field, .tab-contact-text {
		width:100%;
	}
	.tr-index-left, .tr-index-center, .tr-index-right {
		text-align:center;
	}
	.img-article, .img-article-big {
		max-height:300px; max-width:100%;
	}
	.img-article-big {
		max-height:600px;
	}
}
@media print {
	#header, #footer {
		display:none;
	}
}