/*============================
css designed by J@eacute;r�mie Lochard
http://www.jilocube.fr
�2009
 =============================*/
 
/*============================
style de base + reset

index des couleurs :
fond : #DCDED4
gris : #585851
gris fonçé : #32322D
vert : #70A426

 =============================*/
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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
/*fieldset, form, label, legend,*/
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	/*color: black;
	background: white;*/
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

a {
	color: #32322D ;
	text-decoration: none ;
	}

a:hover {
	color: #32322D ;
	text-decoration: none ;
	}

strong {
	font-weight: bold;
	}

html {
 	background: url(../images/top-vert.jpg) #DCDED4 repeat-x 0 0 ;
	}
	
#body {
	margin: auto ;
	width: 1259px ;
	height: 840px ;
	font-family: Arial, Helvetica, sans-serif ;
 	background: url(../images/fond-site.jpg) no-repeat 0px 3px ;
	}
	
a img {
	text-decoration: none ;
	border: 0 ;
	}
	
.small {
	font-size: .85em ;
}
 
/*============================
header
 =============================*/

#header p {
	position: absolute;
	top: 25px ;
	left: 25px ;
	font-size: .6em ;
	letter-spacing: 8px ;
	color: #585851 ;
	}
	
#header-menu {
	background: url(../images/fond-menu.jpg) no-repeat 0px 0px ;
	width: 550px ;
	min-height: 133px ;
	margin: auto ;
	}
	
#header-menu ul li {
	float: left ;
	display: block ;
	height: 133px ;
	text-align: center;
	margin: 26px 0px 0px 0px ;
	}
	
/*============================
footer
 =============================*/

#footer {
	clear: both ;
	background: url(../images/jeremie-lochard-graphiste-f.png) no-repeat 50% 50% ;
	width: 630px ;
	margin: 130px auto 0px auto ;
	height: 70px ;
	border-top: solid thin #585851;
	}
	
#footer h1 {
	text-indent: -5000px ;
	text-align: center ;
	}
	
/*============================
content
 =============================*/

#navs {
	/*margin: 5px 0px 0px 50px ;*/
	}

/* ///// accueil : jérémie & graphiste // */
#jeremie {
	background: url(../images/jeremie-lochard-graphiste.png) no-repeat 0px 0px ;
	width: 550px ;
	min-height: 40px ;	
	margin: 270px auto 40px auto ;
	}
	
#jeremie h1 {
	display: block ;
	text-indent: -5000px ;
	text-align: center ;
	}
	
#graphiste {
	background: url(../images/jeremie-lochard-graphiste.png) no-repeat 0px -40px ;
	width: 550px ;
	min-height: 26px ;	
	margin: 60px auto 0px auto ;
	}
	
#graphiste ul li {
	display: block ;
	text-indent: -5000px ;
	text-align: center ;
	}	
	
/* ///// accueil // */
#accueil {
	background: url(../images/fond-menu.jpg) no-repeat 0px 0px ;
	width: 550px ;
	min-height: 133px ;
	margin: auto ;
	}
	
#accueil ul li {
	float: left ;
	display: block ;
	height: 133px ;
	text-align: center;
	margin: 26px 0px 0px 0px ;
	}
	
#menu-accueil a {
	background: url(../images/accueil.jpg) no-repeat 48px 0% ;
	display: block ;
	text-indent: -5000px ;
	width: 150px ;
	height: 78px ;
	}
	
#menu-accueil a:hover {
	background: url(../images/accueil.jpg) no-repeat 48px -78px ;
	display: block ;
	width: 150px ;
	height: 78px ;
	}
	
#menu-portfolio a {
	background: url(../images/portfolio.jpg) no-repeat 50% 0% ;
	display: block ;
	text-indent: -5000px ;
	width: 125px ;
	height: 78px ;
	}
	
#menu-portfolio a:hover {
	background: url(../images/portfolio.jpg) no-repeat 50% -78px ;
	display: block ;
	width: 125px ;
	height: 78px ;
	}
	
#menu-portfolio-ok {
	background: url(../images/portfolio.jpg) no-repeat 50% -78px ;
	display: block ;
	text-indent: -5000px ;
	width: 125px ;
	height: 78px ;
	}
	
#menu-contact a {
	background: url(../images/contact.jpg) no-repeat 50% 0% ;
	display: block ;
	text-indent: -5000px ;
	width: 125px ;
	height: 78px ;
	}
	
#menu-contact a:hover {
	background: url(../images/contact.jpg) no-repeat 50% -78px ;
	display: block ;
	width: 125px ;
	height: 78px ;
	}
	
#menu-contact-ok {
	background: url(../images/contact.jpg) no-repeat 50% -78px ;
	display: block ;
	text-indent: -5000px ;
	width: 125px ;
	height: 78px ;
	}
	
#menu-galeries a {
	background: url(../images/photos.jpg) no-repeat 20px 0% ;
	display: block ;
	text-indent: -5000px ;
	width: 150px ;
	height: 78px ;
	}
	
#menu-galeries a:hover {
	background: url(../images/photos.jpg) no-repeat 20px -78px ;
	display: block ;
	width: 150px ;
	height: 78px ;
	}
	
#menu-galeries-ok {
	background: url(../images/photos.jpg) no-repeat 20px -78px ;
	display: block ;
	text-indent: -5000px ;
	width: 150px ;
	height: 78px ;
	}
	

	
/* ///// video // */
#content-video {
	clear: both ;
	}
	
#video {
	margin: auto ;
	text-align: center ;
	width: 640px ;
	height: 498px ;
	}
	
#comment {
	margin: 20px 0px 40px 152px ;
	}
	
#comment h2 {
	font-size: 1.2em ;
	font-weight: bold ;
	margin: 0px 0px 10px 0px ;
	}
	
#comment p {
	font-size: .8em ;
	padding: 2px 0px ;
	}
	
#comment p span {
	font-weight: bold ;
	}



/* ///// contact */	
#contact {
	width: 550px ;
	margin: 80px auto ;
	font-size: .85em ;
	color: #32322D ;
	}
	
#contact h3 {
	margin: 50px 0px 20px 0px ;
	padding: 0px 0px 5px 0px ;
	letter-spacing: 8px ;
	color: #585851 ;
	border-bottom: thin solid #585851 ;
	}
	
#contact h4 {
	margin: 0px 0px 10px 0px ;
	}
	
#contact p {
	margin: 0px 0px 15px 0px ;
	}

#contact ul {
	margin: 20px 0px ;
	}	
	
#contact ul li {
	margin: 0px 0px 8px 0px ;
	padding: 0px 0px 0px 25px ;
	display: block ;
	line-height: 16px ;
	height: 16px ;
	}

.adresse {	
	background: url(../images/adresse.gif) no-repeat 0% 50% ;
	}
	
.telephone {
	background: url(../images/telephone.gif) no-repeat 0% 50% ;
	}
	
.mail {
	background: url(../images/mail.gif) no-repeat 0% 50% ;
	}
	
.facebook {
	background: url(../images/facebook.gif) no-repeat 0% 50% ;
	}
	
.viadeo {
	background: url(../images/viadeo.gif) no-repeat 0% 50% ;
	}
	
.skype {
	background: url(../images/skype.gif) no-repeat 0% 50% ;
	}
	
.cv {
	background: url(../images/cv.gif) no-repeat 0% 50% ;
	}
	
.vcard {
	background: url(../images/vcard.gif) no-repeat 0% 50% ;
	}
	
.respire {
	padding: 10px 0px 0px 0px ;
	}

#contact a:hover {
	color: #32322D ;
	text-decoration: underline ;
	}

fieldset {
	margin:1em 0;
	border:none;
	border-top:1px solid #ccc;
	}
	
legend {
	margin: 15px 0px 30px 0px ;
	padding:0 .5em ;
	color:#70A426;
	background:transparent;
	font-size:1.3em;
	font-weight:bold;
	}
	
label {
	font-size:.9em;
	float:left;
	width:170px;
	padding:0 1em;
	text-align:right;
	}
	
fieldset div {
	margin-bottom:.5em;
	padding:0;
	display:block;
	}
	
fieldset div input,fieldset div textarea {
	width:250px;
	border-top:1px solid #555;
	border-left:1px solid #555;
	border-bottom:1px solid #ccc;
	border-right:1px solid #ccc;
	padding:1px;
	color:#32322D;
	}
	
input:focus,textarea:focus {
	background:#efefef;
	color:#000;
	}

#submit {
	clear:both;
	padding-top:1em;
	margin: 0px 0px 0px 190px ;
	}
		
#submit input {
	border:1px solid #333;
	padding:2px 1em;
	background:#555;
	color:#fff;
	font-size:100%;
	}
	
.captcha_p {
	padding: 20px 0px 0px 0px ;
	font-size:.9em;
	}
	
.captcha_hum {
	padding: 0px 0px 0px 0px ;
	font-size:.9em;
	font-weight: bold ;
}
	
#mail_ok {
	font-size: .85em ;
	font-weight: bold ;
	color: #70A426 ;
	margin: 0px 0px 10px 0px ;
	}
	
#haut {
	margin: 50px 0px 0px 0px !important ;
	font-size: .75em ;
	}
	
	
/* ///// portfolio */	
#portfolio {
	width: 600px ;
	clear: both ;
	margin: 40px auto 0px auto ;
	overflow: hidden ;
	/*color: #32322D ;*/
	}
		
#portfolio h2 {
	margin: 20px 10px 20px 0px ;
	padding: 0px 0px 5px 0px ;
	letter-spacing: 8px ;
	font-size: 1.3em ;
	color: #585851 ;
	border-bottom: thin solid #585851 ;
	width: 500px ;
	float: left ;
	}
	
#portfolio_menu {
	margin: 20px 0px ;
	}
	
#portfolio_menu ul li {
	float: left ;
	margin: 0px 10px 0px 0px ;
	}
	
#portfolio_menu ul li a {
	display : block ;
	width: 28px ;
	height: 28px ;
	background: url(../images/bouton_portfolio.png) no-repeat 0% 0% ;
	text-align: center ;
	line-height: 28px ;
	font-weight: bold;
	color: #fff ;
	}
	
#portfolio_menu ul li a:hover {
	display : block ;
	width: 28px ;
	height: 28px ;
	background: url(../images/bouton_portfolio.png) no-repeat 0% 100% ;
	text-align: center ;
	line-height: 28px ;
	font-weight: bold;
	color: #fff ;
	}

/*#portfolio h3 {
	margin: 0 ;
	float: left ;
	background: url(../images/bouton_portfolio.png) no-repeat 0% 0% ;
	width: 28px ;
	height: 28px ;
	}
	
#portfolio h3 a {
	letter-spacing: 5px ;
	padding: 5px ;
	font-size: .75em ;
	color: #fff 8E8C88 !important ;
	text-align: center;
	}
	
#portfolio h3 a:hover {
	letter-spacing: 5px ;
	font-size: .75em ;
	color: #8E8C88 !important ;
	border-bottom: thin dotted #8E8C88 ;
	}*/
	
.portfolio_accueil {
	width: 500px ;
	padding: 0 ;
	margin: 160px auto 50px auto ;
	text-align: center ;
	}
	
ul.portfolio_accueil li {
	display: inline ;
	padding: 0px 50px ;
	}
	
ul.portfolio_accueil li a {
	text-align: center ;
	font-size: 10em ;
	font-weight: bold ;
	color: #585851 !important ;
	}
	
ul.portfolio_accueil li a:hover {
	text-align: center ;
	font-size: 10em ;
	font-weight: bold ;
	color: #70A426 !important ;
	}

.portfolio_contact {
	margin: 55px 0px 0px 0px ;
	font-size: .85em ;
	}
	
.portfolio_contact a {
	color: #8E8C88 !important ;
	}
	
.portfolio_contact a:hover {
	color: #8E8C88 !important ;
	border-bottom: thin dotted #8E8C88 ;
	}
	
	
		
/* ///// galeries // */

#galerie {
	clear: both ;
	margin: 70px auto 0px auto ;
	width: 600px ;
	overflow: hidden ;
	}
	
#galeries_detail {
	clear: both ;
	margin: 0px auto ;
	width: 600px ;
	overflow: hidden ;
	}	

	
#galerie h2 {
	margin: 50px 0px 20px 0px ;
	padding: 0px 0px 5px 0px ;
	letter-spacing: 8px ;
	color: #585851 ;
	border-bottom: thin solid #585851 ;
	}
	
#galerie ul {
	margin: 0px 0px 50px 0px ;
	overflow: auto;
	}
	
#galerie ul li {
	float: left ;
	text-align: center ;
	font-size: .75em ;
	text-transform:uppercase;
	margin: 0px 37px 37px 0px ;
	height: 130px ;
	background-color: rgb(88, 88, 81);
	}
	
/*#galerie ul li a {
	display: block ;
	background-color: rgb(88, 88, 81);
	background-color: rgba(88, 88, 81, 0.7);
	color: #fff ;
	width: 100px ;
	height: 130px ;
	}*/
	
/*.img_galeries {
	overflow: hidden ;
	width: 100px ;
	height: 100px ;
	}
	
#galerie ul li a img {
	position: relative ;
	top: 0px ;
	}*/
	
/*#galerie ul li a:hover {
	display: block ;
	background-color: rgb(88, 88, 81);
	background-color: rgba(88, 88, 81, 0.7);
	color: #fff ;
	width: 100px ;
	height: 130px ;
	}*/
	
/*#galerie ul li a:hover img {
	position: relative ;
	top: -100px ;
	}*/
	
#galerie ul li a span {
	position: relative ;
	top: 110px ;
	}
	
#galerie ul li a {
	display: block ;
	color: #fff ;
	width: 100px ;
	height: 100px ;
	}
	
#galerie ul li a:hover {
	display: block ;
	color: #fff ;
	width: 100px ;
	height: 100px ;
	}
	
.dakar a {
	background: url(../images/galerie/couv_dakar.jpg) no-repeat 0 0 ;
	}
	
.dakar a:hover {
	background: url(../images/galerie/couv_dakar.jpg) no-repeat 0 -100px ;
	}
	
.ziguinchor a {
	background: url(../images/galerie/couv_ziguinchor.jpg) no-repeat 0 0 ;
	}
	
.ziguinchor a:hover {
	background: url(../images/galerie/couv_ziguinchor.jpg) no-repeat 0 -100px ;
	}
	
.bounouc a {
	background: url(../images/galerie/couv_bounouc.jpg) no-repeat 0 0 ;
	}
	
.bounouc a:hover {
	background: url(../images/galerie/couv_bounouc.jpg) no-repeat 0 -100px ;
	}
	
.cap_skirring a {
	background: url(../images/galerie/couv_cap_skirring.jpg) no-repeat 0 0 ;
	}
	
.cap_skirring a:hover {
	background: url(../images/galerie/couv_cap_skirring.jpg) no-repeat 0 -100px ;
	}
	
.kassala a {
	background: url(../images/galerie/couv_kassala.jpg) no-repeat 0 0 ;
	}
	
.kassala a:hover {
	background: url(../images/galerie/couv_kassala.jpg) no-repeat 0 -100px ;
	}
	
.bolongs a {
	background: url(../images/galerie/couv_bolongs.jpg) no-repeat 0 0 ;
	}
	
.bolongs a:hover {
	background: url(../images/galerie/couv_bolongs.jpg) no-repeat 0 -100px ;
	}
	
.bristol a {
	background: url(../images/galerie/couv_dakar.jpg) no-repeat 0 0 ;
	}
	
.bristol a:hover {
	background: url(../images/galerie/couv_dakar.jpg) no-repeat 0 -100px ;
	}
	

	
/* ////////// galerie détail //////*/
#retour_sommaire {
	overflow: auto ;
	margin: 80px auto 0px auto ;
	width: 600px ;
	}

#retour_sommaire ul li {
	font-size: .7em ;
	letter-spacing: 3px ;
	}
	
#retour_sommaire ul li a {
	text-decoration: none ;
	color: #585851 ;
	}
	
#retour_galeries {
	float: left ;
	}
		
#retour_galeries li a {
	text-decoration: none ;
	color: #585851 ;
	}
	
#retour_galeries li a:hover {
	border-bottom: thin dotted #585851 ;
	padding: 0px 0px 2px 0px  ;
	color: #585851 ;
	}
	
#share {
	float: right ;
	}
	
#share li {
	float: left ;
	padding: 0px 0px 0px 5px ;
	}
	
a.stbar.chicklet img {
	border:0;
	height:16px;
	width:16px;
	margin-right:3px;
	vertical-align:middle;
	}
	
a.stbar.chicklet {
	height:16px;
	line-height:16px;
	}

/* ////////// galerie photo //////*/
.jqGSContainer{
	clear: both ;
	margin: 20px auto 0px auto ;
	width:600px;
	}
	
.jqGSContainer .jqGSImgContainer {
	}

.jqGSContainer .jqGSImgContainer ul {
	padding:0;
	margin:0;
	position:relative;
	list-style:none;
	}
	
.jqGSContainer .jqGSImgContainer ul li {
	padding:0;
	margin:0;
	position:relative;
	margin-top:0;
	margin-bottom:0px;
	float:left;
	}
	
.jqGSContainer .jqGSImgContainer ul li .jqGSLoader {
	width:100%;
	height:100%;
	position:absolute;
	}
	
.jqGSContainer .jqGSImgContainer ul li img {

	}
	
.jqGSContainer .jqGSImgContainer ul li .jqGSTitle {
	position:absolute;
	right:0px;
	top:450px;
	padding:10px 0px 3px 0px;
	color:#585851;
	width:600px;
	font-size: .85em ;
	text-align: center ;
	}

.jqGSContainer .jqGSPagination {
	position:relative;
	width:600px;
	height:20px;
	top:5px;
	padding: 5px 0 ;
	margin: 0px 0px 40px 0px ;
	clear: both ;
	}
	
.jqGSContainer .jqGSPagination ul {
	border-top: thin solid #585851 ;
	padding:15px 0px 0px 0px ;
	margin:10px 0px 0px 0px ;
	list-style:none;
	position:relative;
	}
	
.jqGSContainer .jqGSPagination ul li {
	padding:0 ;
	margin-right:5px;
	float:left;
	padding-right:1px;
	text-align:center;
	padding: 3px 0px 8px 0px ;
	}
	
.jqGSContainer .jqGSPagination ul li a {
	padding:2px 0px;
	background:#70A426;
	color: #000;
	text-decoration:none;
	display:block;
	width:20px;
	font:10px Verdana, Arial, Helvetica, sans-serif;
	}
	
.jqGSContainer .jqGSPagination ul li a.selected {
	padding:2px 0px;
	background:#585851;
	color:#000;
	}
	
.jqGSContainer .jqGSPagination ul li a:hover {
	padding:2px 0px;
	background:#999;
	color:#000;	}

.jqGSImgContainer {
	padding: 0px 0px 30px 0px ;
	}
	
	
/* ///////////// player audio ////////////// */
#player-mp3 {
	padding: 10px ;
	position: absolute ;
	top: 550px ;
	left: 30px ;
}

.player-mp3-fond {
	background: url(../images/fond-mp3.png) no-repeat 0 0 ;
	width: 220px ;
	height: 64px ;
	padding: 10px ;
	margin: 10px 0px 0px 0px ;
}

#player_hidden {
	display: none ;
}

#player-mp3 h3 {
	background: url(../images/musique_play.png) no-repeat 2% 50% ;
	height: 25px ;
	font-size: .7em ;
	letter-spacing: 2px ;
	line-height: 25px ;
	color: #585851 ;
	padding: 0px 0px 0px 35px ;
	}
	
#player-mp3 h3 a {
	color: #585851 ;
	}
	
#player-mp3 h3 a:hover {
	color: #585851 ;
	text-decoration: underline; ;
	}

#player-mp3 p {
	font-size: .6em ;
	letter-spacing: 2px ;
	color: #585851 ;
	padding: 5px 0px ;
}

/*////////////// help */
#help {
	padding: 10px ;
	position: absolute ;
	top: 500px ;
	left: 30px ;	
}

#help h3 {
	background: url(../images/help.png) no-repeat 2% 50% ;
	height: 25px ;
	font-size: .7em ;
	letter-spacing: 2px ;
	line-height: 25px ;
	color: #585851 ;
	padding: 0px 0px 0px 35px ;
	}
	
#help h3 a {
	color: #585851 ;
	}
	
#help h3 a:hover {
	color: #585851 ;
	text-decoration: underline; ;
	}

/*////////////// easytooltip */
#easyTooltip{
	padding:5px 10px;
 	background: url(../images/fond-tooltip.jpg) repeat-x 0 50% ;
	color:#fff;
	}