@charset "utf-8";
/* CSS Document */

/* code du tutoriel ci-dessous */

		#volet {
			width: 250px;
			padding: 10px;
			background: #fff; color: #000;
			box-shadow: 1px 5px 10px #000; min-height: 400px
		}
		
		#volet a.ouvrir,
		#volet a.fermer {
			padding: 10px 25px;
			background: #F55D58;
			color: #fff;
			text-decoration: none;
		}

		#volet {
			position: absolute;
			left: -270px;  /* test fixed + scroll, on retire la position top */
			-webkit-transition: all .5s ease-in;
			-moz-transition: all .5s ease-in;
			transition: all .5s ease-in
		}
		#volet a.ouvrir {
			position: absolute;
			right: -130px;
			top: 110px;
			-webkit-transform: rotate(270deg);
			-moz-transform: rotate(270deg);
			-o-transform: rotate(270deg);
			-ms-transform: rotate(270deg);
			-moz-radius: 0 0 8px 8px;
			border-radius: 0 0 8px 8px;
		}




		#volet a.fermer {
			position: absolute;
			right: -83px;
			top: 110px;
			-webkit-transform: rotate(270deg);
			-moz-transform: rotate(270deg);
			-o-transform: rotate(270deg);
			-ms-transform: rotate(270deg);
			-moz-radius: 0 0 8px 8px;
			border-radius: 0 0 8px 8px;
		}



		#volet a.fermer {
			display: none;
		}
		#volet:target {
			left: 10px;
		}

		/* code pour la fermeture */

		#volet:target a.fermer {
			display: block;
		}
		#volet:target a.ouvrir {
			display: none;
		}
		#volet_clos:target #volet {
			left: -270px;
		}
		
		 /* test fixed + scroll */
		#volet_clos {
			position: fixed; 
			top: 255px; left: 0;z-index: 99999
		}