@charset "UTF-8";

body {
	background: url('/media/layout/img/portfolio_background.png') repeat-x #efede7;
}

/* HEADER */
div#header {
	position: relative;
	width: 835px;
	height: 272px;
	margin: 0 auto;
	background: url('/media/layout/img/portfolio_header.jpg') no-repeat 0 45px;
}
	
	/* Navigation */
	ul#nav a.portfolio { width: 60px; background-position: -74px -134px; }
	ul#nav a.blog { width: 50px; background-position: -150px -134px; }
	ul#nav a.blog:hover { background-position: -208px -134px; }


	/* Presentation */
	div#presentation {
		position: relative;
		height: 227px;
		padding: 30px 0 0 65px;
		/*background: url('/media/layout/img/portfolio_presentation.png') no-repeat 65px 48px;*/
	}
  
    div#presentation p {
      width: 504px;
      color: #e2f0f8;
      font-size: 1.2em;
      line-height: 1.35em;
      text-shadow: #2c698c 1px 1px 0px;
    }
    
    div#presentation a { color: #fff; font-weight: bold; text-decoration: none; }
    
		/*
		div#presentation a.img {
			display: block;
			position: absolute;
			outline: none;
		}
		*/
		
		/*
		div#presentation a.presentation_name { top: 81px; left: 163px; width: 132px; height: 15px; }
		div#presentation a.presentation_age { top: 81px; left: 328px; width: 50px; height: 15px; }	
		div#presentation a.presentation_dev { top: 81px; left: 438px; width: 132px; height: 15px; }
		div#presentation a.presentation_job { top: 102px; left: 195px; width: 170px; height: 15px; }
		div#presentation a.presentation_folio { top: 132px; left: 64px; width: 148px; height: 15px; }
		div#presentation a.presentation_contact { top: 154px; left: 257px; width: 100px; height: 15px; }
		*/
		
		
/* CONTENT */
	div#content h2#portfolio {
		height: 30px;
		margin: 0;
		padding: 0;
		text-indent: -3000px;
		font-size: 1.2em;
		font-weight: bold;
		background: url('/media/layout/img/portfolio_title.png') no-repeat 0 0;
	}
	
	/* Portfolio thumbs */
	ul#portfolio-list {
		margin: 0;
		padding: 0;
	}
	
	ul#portfolio-list li {
		display: block;
		float: left;
		margin: 10px 0 0 10px;
		padding: 0;
	}
	ul#portfolio-list li.nomargin { margin-left: 0; }
	
	ul#portfolio-list a {
		display: block;
		position: relative;
		padding: 3px;
		background: #000;
		line-height: 0;
		text-decoration: none;
		outline: none;
	}
	ul#portfolio-list a img { border: 0; }
	
	ul#portfolio-list span.desc {
		display: none;
		position: absolute;
		top: 0;
		left: 0;
		width: 201px;
		height: 67px;
		padding: 10px 5px 20px 15px;
		color: #fff;
		text-align: left;
		line-height: 1.2em;
		font-weight: normal;
		font-size: 0.95em;
		background: #000;
		cursor: pointer;
		/* Opacity */
		filter: alpha(opacity=85);
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
		-moz-opacity: 0.85;
		-khtml-opacity: 0.85;
		opacity: 0.85;
	}
	
	
	/* Portfolio detail */
	div#content div.wrapper {
		position: relative;
		padding: 0 5px 0 5px;
	}
	
		div#content h3 {
			margin: 15px 0 15px 0;
			padding: 0;
			font-family: Georgia, serif;
			font-size: 1.5em;
			font-weight: bold;
			font-style: italic;
		}
		
		/* Visuel */
		div#visuel {
			float: left;
			width: 326px;
			text-align: right;
		}
		
		div#visuel img { border: 3px solid #000; }
		div#visuel a { text-decoration: none; outline: none; }
		div#visuel a span {
			padding-right: 18px;
			color: #000;
			text-decoration: none;
			font-size: 0.8em;
			background: url('/media/layout/img/global_sprites2.png') no-repeat -72px -140px;
			/* Opacity */
			filter: alpha(opacity=65);
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
			-moz-opacity: 0.65;
			-khtml-opacity: 0.65;
			opacity: 0.65;
		}
		
		div#visuel a:hover span {
			/* Opacity */
			filter: alpha(opacity=100);
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
			-moz-opacity: 1;
			-khtml-opacity: 1;
			opacity: 1;
		}
		
		/* Meta */
		div#meta {
			float: right;
			width: 325px;
		}
		
		div#meta div { padding-bottom: 15px; }
		
		div#meta h4 {
			margin: 0;
			padding: 0;
			font-family: Georgia, serif;
			font-size: 1.1em;
			font-style: italic;
		}
		
		div#meta p {
			margin: 5px 0 0 0;
			color: #333;
		}	
		
		div#meta ul {
			margin: 5px 0 0 0;
			padding: 0;
			list-style-type: none;
			color: #333;
		}
		
		div#meta li {
			padding: 2px 0 2px 25px;
			background: url('/media/layout/img/global_sprites2.png') no-repeat -115px -158px;
		}
		
		div#meta h4.year,
		div#meta p.year  { display: block; float: left; }
		div#meta h4.year { margin-right: 8px; }
		div#meta p.year { margin: 2px 0 0 0; }
        
	/* Navigation portfolio (item page) */
	ul#folio_nav {
		position: absolute;
		top: -10px;
		right: 5px;
		margin: 0;
		padding: 0;
		list-style-type: none; 
	}

		ul#folio_nav li {
			display: block;
			float: left;
			width: 11px;
			height: 11px;
			margin: 0 0 0 2px;
			padding: 0;
		}
		
		ul#folio_nav a {
			display: block;
			height: 11px;
			text-decoration: none;
			outline: none;
			background: url('/media/layout/img/global_sprites2.png') no-repeat 0 -159px;
		}
		
		ul#folio_nav a:hover,
		ul#folio_nav a.current { background-position: 0 -146px; }
		
		ul#folio_nav a span {
			display: none;
			position: absolute;
			top:25px;
			right: -3px;
			width: 200px;
			color: #000;
			text-align: right;
			font-size: 0.8em;
		}
		
/* Nyro Modal */
div#nyroModalFull {
	font-size: 12px;
	color: #777;
}
div#nyroModalLoading {
	border: 4px solid #000;
	width: 90px;
	height: 90px;
	text-indent: -9999em;
	background: #000 url('/media/layout/img/portfolio_loader.gif') no-repeat;
	background-position: center;
}
div#nyroModalLoading.error {
	border: 4px solid #000;
	line-height: 20px;
	padding: 20px;
	width: 300px;
	height: 100px;
	text-indent: 0;
	background: #000;
}
div#nyroModalWrapper {
	background: #000;
	border: 6px solid #000;
}
a#closeBut {
	position: absolute;
	display: block;
	top: -15px;
	left: -15px;
	width: 30px;
	height: 30px;
	text-indent: -9999em;
	background: url('/media/layout/img/portfolio_close.png') no-repeat;
	outline: 0;
	z-index: 1000;
}

div.wrapper div#nyroModalContent {
	padding: 5px;
}
div.wrapperImg div#nyroModalContent {
	position: relative;
	overflow: hidden;
	text-align: center;
}
div.wrapperImg img {
	vertical-align: baseline;
}