/*  Web Designer Magazine
		---------------------
		Ultimate HTML5 Footer
		---------------------
	*/
	
	
	@font-face{
			font-family: 'ChalkDuster';
			src: url('fonts/chalkduster-webfont.eot');
			src: url('fonts/chalkduster-webfont.eot?#iefix') format('embedded-opentype'),
				url('fonts/chalkduster-webfont.woff') format('woff'),
				url('fonts/chalkduster-webfont.ttf') format('truetype'),
				url('fonts/chalkduster-webfont.svg#webfont') format('svg');
			font-weight: normal;
		    font-style: normal;
				}
	@font-face {
    font-family: 'DroidSerifRegular';
    src: url('fonts/DroidSerif-Regular-webfont.eot');
    src: url('fonts/DroidSerif-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/DroidSerif-Regular-webfont.woff') format('woff'),
         url('fonts/DroidSerif-Regular-webfont.ttf') format('truetype'),
         url('fonts/DroidSerif-Regular-webfont.svg#DroidSerifRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'DroidSerifItalic';
    src: url('fonts/DroidSerif-Italic-webfont.eot');
    src: url('fonts/DroidSerif-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/DroidSerif-Italic-webfont.woff') format('woff'),
         url('fonts/DroidSerif-Italic-webfont.ttf') format('truetype'),
         url('fonts/DroidSerif-Italic-webfont.svg#DroidSerifItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
		    font-family: 'DesyrelRegular';
		    src: url('fonts/desyrel-webfont.eot');
		    src: url('fonts/desyrel-webfont.eot?#iefix') format('embedded-opentype'),
		         url('fonts/desyrel-webfont.woff') format('woff'),
		         url('fonts/desyrel-webfont.ttf') format('truetype'),
		         url('fonts/desyrel-webfont.svg#DesyrelRegular') format('svg');
		    font-weight: normal;
		    font-style: normal;
		}
	body {
	margin:			0;
	padding:		0;
	background-color: #534741;
	background-image: url(images/fondbois34.jpg);
	font-weight: 400;
	font-family: "Comic Sans MS", sans-serif;
	}
	
	header {
	display:		block;
	position:		relative;
	width:			920px;
	color:			#333;
	height:			160px;
	margin-bottom:	2px;
	-moz-box-shadow:	0px 0px 5px rgba(0,0,0,0.5);
	-webkit-box-shadow:	0px 0px 5px rgba(0,0,0,0.5);
	box-shadow:			0px 0px 5px rgba(0,0,0,0.5);
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
	background-color: #FAF9F5;
	padding-top: 10px;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	}
body article h3 {
	font-size: 20px;
	text-shadow: 2px 2px 2px #C93;
	font-family: "Comic Sans MS", sans-serif;
	color: #C00;
}
body article h4 {
	font-size: 18px;
}
body header h2 {
	font-size: 28px;
	letter-spacing: 0.1em;
	font-weight: 400;
	font-family: 'DroidSerifRegular', sans-serif;
}
body header h1 {
	font-size: 34px;
	font-family: ChalkDuster, Helvetica, sans-serif;
	font-weight: 300;
	text-align: center;
	width: auto;
	text-shadow: 4px 4px 4px #aaa;
}
header img {
	float: left;
	padding-top: 15px;
}

	article {
	display:		block;
	position:		relative;
	width:			920px;
	height:			auto;
	margin-bottom:	2px;
	-moz-box-shadow:	0px 0px 5px rgba(0,0,0,0.5);
	-webkit-box-shadow:	0px 0px 5px rgba(0,0,0,0.5);
	box-shadow:			0px 0px 5px rgba(0,0,0,0.5);
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
	padding-top: 2px;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	background-color: #FFEF93;
	}
blockquote {
			background: #918F94 url('images/bg-notepad.jpg') left 10px;
			color: #333;
			float: right;
			font-family:'DesyrelRegular', cursive;
			font-size: 18px;
			line-height: 23px;
			margin: 0 -24px 1em 1em;
			padding: 10px 15px;
			text-shadow: -1px -1px rgba(0,0,0,.15);
			width: 300px;
			-webkit-box-shadow: 2px 2px white;
			-moz-box-shadow: 3px 3px 3px rgba(0,0,0,.35);
		}
		
		blockquote p {margin: 0;}
		blockquote p:first-of-type {text-indent: 0;}	
	footer {
	display:		block;
	position:		relative;
	margin:			0 auto;
	width:			920px;
	height:			100px;
	margin-bottom:	2px;
	padding:		20px;
	margin-bottom:	150px;
	background: 	#9B3913 url(images/footerbg.png) repeat top left;
	-moz-box-shadow:	0px 0px 5px rgba(0,0,0,0.5);
	-webkit-box-shadow:	0px 0px 5px rgba(0,0,0,0.5);
	box-shadow:			0px 0px 5px rgba(0,0,0,0.5);
	border-top:		2px solid #222;
	border-bottom:		2px solid #222;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 62.5%;
	}

	footer section {
		position:		relative;
		width:			200px;
		float:			left;
		margin-right:	20px;
		height:			100px;
		background: #050002; /* Old browsers */
		background: -moz-linear-gradient(top, #050002 0%, #a90329 50%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#050002), color-stop(50%,#a90329)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #050002 0%,#a90329 50%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #050002 0%,#a90329 50%); /* Opera11.10+ */
		background: -ms-linear-gradient(top, #050002 0%,#a90329 50%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#050002', endColorstr='#a90329',GradientType=0 ); /* IE6-9 */
		background: linear-gradient(top, #050002 0%,#a90329 50%); /* W3C */
		-moz-border-radius: 2px/20px;	
		-webkit-border-radius: 2px/20px;
		border-radius: 5px/20px;
		-webkit-transition:all 0.5s;
		-moz-transition:all 0.5s;
		transition:		all 0.5s;
	}

	footer section:hover {
		width:			210px;
		margin-left:	-5px;	
		margin-right:	15px;
	}

	footer section .handle{
		position:		absolute;
		top:			0;
		left:			0;
		width:			200px;
		height:			100px;
		background: 	#9B3913 url(images/drawerbg.png) no-repeat center center;
		-moz-box-shadow:	0px 3px 5px rgba(0,0,0,0.3);
		-webkit-box-shadow:	0px 3px 5px rgba(0,0,0,0.3);
		box-shadow:			0px 3px 5px rgba(0,0,0,0.3);
		-webkit-transition:all 0.5s;
		-moz-transition:all 0.5s;
		transition:		all 0.5s;
	}
	
	footer section .contents {
		position:		absolute;
		top:			0;
		left:			5px;
		background:		#89e5e4;
		padding:		5px;
		-moz-border-radius:5px;
		-webkit-border-radius:5px;
		border-radius: 5px;
		width:		180px;
		height:		80px;
		margin:		5px;
		font-size:	1.2em;
		text-align:		center;
		-webkit-transition:all 0.5s;
		-moz-transition:all 0.5s;
		transition:		all 0.5s;
	}
	
	.contents ul {
		text-align:		left;
	}
	
	footer section:hover .handle {
		top:			20px;
		left:			0px;
		width:			210px;
		height:			100px;
		margin-right:	10px;
		-moz-box-shadow:	0px 5px 8px rgba(0,0,0,0.7);
		-webkit-box-shadow:	0px 5px 8px rgba(0,0,0,0.7);
		box-shadow:			0px 5px 8px rgba(0,0,0,0.7);
	}

	footer section:hover .contents {
		top:			-50px;
		left:				0px;
		-webkit-transform: rotate(-10deg);
		-moz-transform: rotate(-10deg);
		transform: rotate(-10deg);
		-moz-box-shadow:	0px 0px 5px rgba(0,0,0,0.5);
		-webkit-box-shadow:	0px 0px 5px rgba(0,0,0,0.5);
		box-shadow:			0px 0px 5px rgba(0,0,0,0.5);
	}
	
	footer section .meta {
		background:			#89e589;
	}
	
	footer section .legal {
		background:			#e5cc89;
	}
	
	footer section .social {
	background-color: #F96;
	}
	
	footer section:hover .meta {
		left:				5px !important;
		-webkit-transform: rotate(5deg) !important;
		-moz-transform: rotate(5deg) !important;
		transform: rotate(5deg) !important;
	}
	
	footer section:hover .legal {
		left:				4px !important;
		-webkit-transform: rotate(-2deg) !important;
		-moz-transform: rotate(-2deg) !important;
		transform: rotate(-2deg) !important;
	}
	
	footer section:hover .social {
		left:				5px !important;
		-webkit-transform: rotate(0deg) !important;
		-moz-transform: rotate(0deg) !important;
		transform: rotate(0deg) !important;
	}
article a {
	color: #666;
	text-decoration: underline;
}
article a:hover {
	color: #999;
	text-decoration: none;
}
footer ul li a {
	color: #960;
	text-decoration: none;
}
footer ul li a:hover {
	color: #000;
	text-decoration: underline;
}
article pre {
	background-color: #FAF9F5;
	border-left:5px solid #efece2;
	font-size:110%;
	overflow:auto;
	word-wrap:break-word;
	color: #060;
	margin-top: 0em;
	margin-right: 0;
	margin-bottom: 1em;
	margin-left: 0;
	padding-top: 1em;
	padding-right: 1em;
	padding-bottom: 1em;
	padding-left: 1em;
}
#img_d {
	float: right;
	padding-left: 5px;
}
.lettrine {
	font-size: 32px;
	float: left;
	padding-right: 10px;
}
#equation {
	font-size: 2em;
	padding-bottom: 20px;
}
.rouge {
	color: #F00;
}
table {
	border: 1px solid #000;
	border-collapse:collapse
}
td {
	border: 1px solid #000;
	vertical-align:central;
	height: 50px;
	padding: 3px;
}
.times {
	font-family: "Times New Roman", Times, serif;
	font-size: 18px;
}
.gras {
	font-weight: bold;
}
.arial {
	font-family: Arial, Helvetica, sans-serif;
}
a:hover img {
	opacity: 0.8;
}
#img_g {
	float: left;
	padding-right: 5px;
}