/**************************************
*	Fichier	:	stytle.css
*	Auteur	:	Varoujan PAPAZIAN (varoujhay@free.fr)
*	Thème	:	Alan Portfolio
*	Site		:	http://www.alanrenault.com/
*	Date		:	18/09/08
*	Modifé	:	12/03/09
**************************************/

/*************************************************** GENERAL (Début) ***************************************************/
* {
	margin : 0;
	padding : 0;
	border : 0;
	outline : 0;
}

a {color : #000000; text-decoration : none;}
a:hover {color : #ED6A00; text-decoration : underline;}

body {
	/*width : 900px;*/
	height : 100%;
	margin : 0 auto;
	color : #676767;
	font : 1em  Arial, sans-serif;
	background : #09090b url(../images/fond.jpg) repeat-x 0 0;
}

/****** GLOBAL ******/
#global {
	width : 760px;
	margin : 0 auto;
	padding : 0 61px 0 79px;
	position : relative;
	background : url(../images/global.jpg) no-repeat left top;
}
/*************************************************** GENERAL (Fin) ***************************************************/

/****** HEADER ******/
h1#header {
	float : left;
	width : 760px;
	height : 209px;
	background : url(../images/citation.jpg) no-repeat 418px 29px;
}
h1#header span {
	display : none;
}


/****** MENU ******/
ul#menu {
	clear : both;
	margin-left : 400px;
	width : 340px;
	height : 32px;
	color : #ffffff;
	list-style : none;
	text-align : center;
	font : italic 0.7em Arial;
}
ul#menu li {
	float : left;
	display : inline;
	width : 85px;
	z-index:1;
	list-style : none;
	position : relative;
}
ul#menu li a {
	display : block;
	width : 85px;
	height : 32px;
	line-height : 30px;
	color : #5C5B5B;
	background : url(../images/onglet.gif) no-repeat 0 0;
}
ul#menu li a#last {
	background-position : 0 -64px;
}
ul#menu li a:hover, ul#menu li.actif a {
	color : #ffffff;
	text-decoration : none;
	background-position : 0 -32px;
}
ul#menu li a#last:hover, ul#menu li.actif a#last {
	position : absolute;
	height : 40px;
	left : 0;
	top : 0;
	z-index:1;
	background-position : 0 -96px;
}
/****** CORPS ******/
#corps {
	float : left;
	clear : both;
	width : 741px;
	height : 352px;
	position : relative;
	background : url(../images/corps.jpg) no-repeat 0 0;
}

/****** CONTENU ******/
#corps #contenu {
	float : left;
	/*width : 741px;
	height : 352px;*/
	overflow : hidden;
}
#corps .accueil, #corps .profil, #corps .contact{
	padding : 27px 26px 27px 40px;
	width : 675px;
	height : 298px;
	overflow : hidden;
}
#corps .portfolio {
	padding : 27px 14px 27px 11px;
	width : 716px;
	height : 298px;
	overflow : hidden;
}
#corps #contenu h2, #corps .accueil #presentation h3, #corps ul#fleches a span, #corps .portfolio .creation span.loupe b{
	display : none;
}
#corps #contenu h3 {
	margin-top : 15px;
	font-size : 0.8em;
}
#corps .accueil #presentation {
	float : left;
	padding : 67px 23px 60px 23px;
	width : 254px;
	height : 173px;
	font-size : 0.7em;
	overflow : hidden;
	background : url(../images/accueil.jpg) no-repeat 0 0;
}
#corps .accueil #presentation p {
	margin-bottom : 10px;
}
#corps ul#fleches {
	width : 25px;
	height : 77px;
	overflow : hidden;
	position : absolute;
	/*right : 1px;*/
	left : 715px;
	top : 113px;
	z-index : 1;
	list-style : none;
}
#corps ul#fleches li {
	float : right;
}
#corps ul#fleches li a {
	display : block;
	width : 25px;
	font-size : 0;
}
#corps ul#fleches li a#remonter {
	height : 23px;
	background : url(../images/fleches.gif) no-repeat 0 0;
}
#corps ul#fleches li a#descendre {
	height : 22px;
	background : url(../images/fleches.gif) no-repeat 0 -23px;
}
#corps ul#fleches li a#voir_cat {
	margin-top : 7px;
	height : 25px;
	background : url(../images/fleches.gif) no-repeat 0 -45px;
}
#corps .accueil .news {
	float : left;
	padding-bottom : 15px;
	width : 257px;
	display : none;
}

#corps .profil {
	background : url(../images/identite.jpg) no-repeat 40px 27px;
}
#corps .portfolio .creation {
	float : left;
	/*margin : 0 29px;*/
	/*display : inline;*/
	/*padding : 31px 26px 0 18px;*/
	padding : 31px 55px 0 47px;
	width : 256px;
	height : 269px;
	font-size : 0.7em;
	overflow : hidden;
	position : relative;
	background : url(../images/folio.png) no-repeat center top;
}
#corps .portfolio .creation {
	display : none;
}
#corps .accueil .first {
	display : block;
}
#corps .portfolio .first {
	/*display : inline;*/
	display : block;
}
#corps .portfolio .creation .loupe {
	position : absolute;
	top : 247px;
	left : 152px;/*123px*/
	display : block;
	width : 26px;
	height : 20px;
	cursor : pointer;
}
#corps .portfolio .creation .loupe  img {
	width : 26px;
	height : 20px;
}
#corps .portfolio .creation h3 {
	display : none;
}
#corps .contact form {
	float : left;
	padding : 67px 39px 0 25px;
	width : 236px;
	height : 233px;
	background : url(../images/contact.jpg) no-repeat 0 0;
}
#corps .contact form p.l1, #corps .contact form p.l2 {
	padding-bottom : 8px;
	width : 236px;
	height : 21px;
}
#corps .contact form p.l3 {
	width : 236px;
	height : 84px;
	padding-top : 24px;
}
#corps .contact form p.l4 {
	width : 45px;
	height : 27px;
	padding : 17px 0 0 9px;
}
#corps .contact form p.l1 input {
	margin-left : 37px;
	width : 199px;
	height : 15px;
	background : none;
}
#corps .contact form p.l2 input {
	margin-left : 44px;
	width : 192px;
	height : 15px;
	background : none;
}
#corps .contact form p.l4 input {
	width : 45px;
	height : 27px;
	cursor : pointer;
	background : none;
}
#corps .contact form textarea {
	width : 236px;
	height : 84px;
	line-height : 28px;
	background : none;
}

#corps #texte, #corps #news {
	float : right;
	padding-left : 38px;
	width : 307px;
}
#corps #texte p {
	margin-bottom : 0px;
	font-size : 0.7em;
}
#corps #news p {
	margin-bottom : 0;
	font-size : 0.7em;
}
#corps #news p.infos {
	padding-left : 10px;
	float : right;
	font-weight : bold;
	background : url(../images/puce.gif) no-repeat left center;
}
#corps .contact #texte ol {
	float : left;
	width : 125px;
	font-size : 0.7em;
	list-style : none;
}
#corps .contact #texte ol#adresse {
	text-align : right;
}

/*************************************************** HAUT DE LA PAGE (Fin) ***************************************************/

/*************************************************** BAS DE LA PAGE (Début) ***************************************************/
/****** FOOTER ******/
#footer {
	clear : both;
	float : left;
	padding : 13px 30px 15px 0;
	width : 791px;
	height : 62px;
	color : #ffffff;
	font-size : 0.7em;
	background : url(../images/footer.jpg) no-repeat left top;
}
#footer ul#logos {
	float : left;
	display : inline;
	margin-left : 30px;
	width : 188px;
	height : 34px;
	background : url(../images/logos.jpg) no-repeat left top;	
}
#footer ul#logos li {
	display : inline;
	float : left;
}
#footer ul#logos li.decoupe a {
	width : 49px;
	height : 34px;
}
#footer ul#logos li.deviantart a {
	margin : 6px 0 0 18px;
	width : 46px;
	height : 20px;
}
#footer ul#logos li.flickr a {
	margin : 5px 0 0 15px;
	width : 60px;
	height : 18px;
}
#footer ul#logos li a, #footer ul#logos li a:hover {
	display : block;
}
#footer ul#logos li a span{
	display : none;
}
#footer ul#logos li.decoupe a:hover {
	background : url(../images/logos.jpg) no-repeat left bottom;	
}
#footer ul#logos li.deviantart a:hover {
	background : url(../images/logos.jpg) no-repeat -67px -40px;	
}
#footer ul#logos li.flickr a:hover {
	background : url(../images/logos.jpg) no-repeat -128px -39px;	
}
#footer a {
	color : #ffffff;
	font-weight : bold;
}
#footer p#twitter {
	float : left;
	display : inline;
	margin : 10px 0 0 220px;
	width : 245px;
	height : 15px;
	color : #5A676D;
	font-size : 0.8em;
	overflow: hidden;
}
#footer p#twitter a {
	color : #5A676D;
	text-decoration : none;
}
#footer p#copyright {
	float : left;
	clear : both;
	padding-top : 10px;
	width : 500px;
	text-indent : 5px;
	color : #242425;
	font : italic 1.1em "Times New Roman", Arial;
}

/*************************************************** BAS DE LA PAGE (Fin) ***************************************************/


/********************
	Tips (infobulle)
********************/
#tooltip {
	width : 139px;
	color : #F7E7A2;
	text-align : center;
	z-index : 13000;
	position: absolute;
}
#tooltip h3 {
	margin : 0;
	padding : 8px 8px 4px;
	color : #6D9D28;
	font-size : 11px;
	font-weight : bold;
	background : transparent url(../images/bubble.png) repeat scroll left top;
}
#tooltip .body {
	padding : 4px 8px 8px;
	font-size : 11px;
	background : transparent url(../images/bubble.png) repeat scroll right bottom;
}


/*****
 * jQuery lightBox plugin
* ****/
#lightbox{
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	}

#lightbox a img{ border: none; }

#outerImageContainer{
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
	}

#imageContainer{
	padding: 10px;
	}

#loading{
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
	}
#hoverNav{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
	}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
	width: 49%;
	height: 100%;
	background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;
	}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prev.gif) left 50% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/next.gif) right 50% no-repeat; }

/*** START : next / previous text links ***/
#nextLinkText, #prevLinkText{
color: #FF9834;
font-weight:bold;
text-decoration: none;
}
#nextLinkText{
padding-left: 20px;
}
#prevLinkText{
padding-right: 20px;
}
/*** END : next / previous text links ***/
/*** START : added padding when navbar is on top ***/

.ontop #imageData {
    padding-top: 5px;
}

/*** END : added padding when navbar is on top ***/

#imageDataContainer{
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	}

#imageData{
	padding:0 10px;
	}
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}
#imageData #helpDisplay {clear: left; float: left; display: block; }

#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
	filter:alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
	display: none;
	}
	

.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
	}

* html>body .clearfix {
	display: inline-block; 
	width: 100%;
	}

* html .clearfix {
	/* Hides from IE-mac \*/
	height: 1%;
	/* End hide from IE-mac */
	}	


#masque{
	display:none;
	z-index : 90;
	position : absolute;
	left : 0;
	top : 0;
	background-color : #000000;
	filter : alpha(opacity=90);
	-moz-opacity : 0.9;
	opacity : 0.9;
}

#contenant {
	z-index : 999;
	display : none;
	padding-top : 82px;
	width : 729px;
	height : 249px;
	position : absolute;
	bottom : 1px;
	left : 1px;
	left : 50%; 
	margin-top : 241px;
	margin-left: -370px;
	visibility : visible;
	font : italic 1em "Times New Roman";
	overflow : hidden;
	list-style : none;
}
#contenant li {
	height : 35px;
}
#contenant li.l1 {
	margin-left : 363px;
	font-size : 0.8em;
}
#contenant li.l2 {
	margin-left: 120px;
	font-size : 1.6em;
}
#contenant li.l3 {
	margin-left : 390px;
	font-size : 1.6em;
}
#contenant li.l4 {
	margin : 34px 0 0 220px;
	font-size : 1.6em;
}
#contenant li#retour {
	margin : 50px 0 0 710px;
	width : 21px;
	height : 22px;
}
#contenant li.l1 a {
	color : #D1D1D1;
}
#contenant li.l2 a {
	color : #9B9F9A;
}
#contenant li.l3 a {
	color : #5C5C5C;
}
#contenant li.l4 a {
	color : #CDCFCC;
}
#contenant li a:hover {
	letter-spacing : 1px;
}