/*****************************************************************************************
 * Copyright (c) 2013 Audrey boursier
 * All rights reserved.
 *
 * Contributors:
 *      Hugo marchadour - Initial API and implementation 
 *****************************************************************************************/
section#details {
	background-color: #f0f0f0;
	margin: 1% 0;
	overflow: hidden;
}
	section#details .wrapper {
		display: none;
		height: auto;
	}

	section#details article {
		margin: 1% 10%;
		position: relative;
	}		
			section#details figure.current {
				display: block;
			}	
			section#details figure {
				display: none;
			}

	section#details article figure {
		text-align: center;
		position: relative;
	}

	section#details article img {
		width: 100%;
		position: relative;
		transition: width 1s;
	}
	
	section#details article p {
		margin-top: 1em;
	}
	section#details article h2,
	section#details article p {
		margin-left: 3em;
		margin-right: 3em;
	}

	section#details button {
		margin: 0;
		padding: 0;
		width: 30px;
		height: 30px;
		cursor: pointer;
		position: absolute;
		background-repeat: no-repeat;
	}

	section#details button.prev {
		background:transparent url('img/left-arrow.png') no-repeat center center;
		margin-top: 30%;
		margin-left: -40px;
		
		margin-top: 20%;
		margin-left: -20%;
	}

	section#details button.close {
		background:transparent url('img/close.png') no-repeat center center;
		margin-left: 10px;
		width: 30px;
		height: 30px;
		
		margin-left: 105%;
	}

	section#details button.next {
		background:transparent url('img/right-arrow.png') no-repeat center center;
		margin-top: 30%;
		margin-left: 10px;
		margin-left: 48%;
		
		margin-top: 20%;
		margin-left: 115%;
	}

	section#details figure:first-child button.prev,
	section#details figure:last-child button.next {
		display: none;
	}