/*
	Date de création : 25 aout 2009
	Description : Css pour une page de test en Html5 et Css3
	Version : 1
	Auteur : Hector Lim
*/

body { 
	background:#f2f2f2;
	font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
	font-size:62.5%;
}
header, section, footer, aside, nav, figure { display: block;width:800px;margin:0 auto; }
article { display: block;margin:0 auto; }

h2 {color:#3479b9;font:500 1.8em verdana;margin:0 0 10px;}
	h2 a {color:#3479b9;text-decoration:none;}
	h2 a:hover {text-shadow:0px 0px 2px #797979;}

#head {margin: 35px auto 10px; }
	#head h1 {margin:0 0 35px;}
	#head h1 #title {
		height:45px;
		font-size:4.0em;
		color:#e3dfda;
		text-decoration:none;
		position:relative;
		display:block;
	}
	#head h1 #title span {width:382px;position:absolute;top:0;left:0;}
	#head h1 #title img {position:absolute;top:0;left:0;}
	#head h1 #baseline {margin:0 15px;}
	#head h1 a:link#baseline, #head h1 a:visited#baseline {color:#000;font-size:1.5em;text-decoration:none;}
	#head h1 a:hover#baseline {text-shadow:1px 1px 1px rgba(0,0,0,0.5);}
	
	#head nav {border-bottom:1px solid #fff;}
	#head nav ul {border-bottom:1px solid #cdcdcd;height:25px;}
	#head nav li {display:block;float:left;height: 23px;padding: 2px 10px 0;font:500 1.5em verdana;}
	/*#head nav li+li {margin-left:20px;}*/
	#head nav li:hover {
		-moz-box-shadow:1px 1px 2px #000 inset;
		-webkit-box-shadow:1px 1px 2px #000 inset;
		box-shadow:1px 1px 2px #000 inset;
	}
	#head nav a {color: #000;text-decoration:none;}

aside#intro {
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	background: #fff;
	border: 1px solid #cdcdcd;
	margin: 20px auto;
	padding: 10px;
	width: 780px;
}
	#intro p {font-size:1.2em;}
	
section#body {
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	background: #fff;
	border: 1px solid #cdcdcd;
	margin: 20px auto;
	padding: 10px;
	width: 780px;
}
	#body article {position:relative;padding:20px 20px 20px 100px;}
	#body article header {width: 100%; }
	.extrait {font:500 1.2em verdana;padding:0 0 20px;border-bottom:1px solid #e3dfda;}
	
	.date {
		width: 50px;
		line-height:1;
		position:absolute;
		left:10px;
		top:20px;
		color:#e3dfda;
		/*text-shadow:1px 1px 1px rgba(120,120,120,1);*/
		text-shadow: -1px -1px #959595,0px -1px #ccc, 1px 1px #fff;
	}
	footer .day, footer .month {font:700 2.4em/0.9em verdana;float:left;}
	footer .year {font:700 1.2em verdana;float:left;}
	#txtttl {margin:0 10px 10px;}
	#txtcolumn {
		margin: 0 10px 10px;
		-webkit-column-count : 3;  
	    -webkit-column-gap : 20px;  
	    -moz-column-count : 3;  
	    -moz-column-gap : 20px;
	    font: 500 1.1em verdana;
	}
	
#footer section { float:left;width: 400px;color:#787878;}
	#footer section strong {font:500 1.5em verdana;display:block;margin:0 0 20px;text-shadow:1px 1px 4px rgba(120,120,120,1);}
	.pub {
		width:125px;
		height:125px;
		background: #777;
		float: left;
		-moz-box-shadow:1px 1px 1px #000 inset;
		-webkit-box-shadow:1px 1px 1px #000 inset;
		box-shadow:1px 1px 1px #000 inset;
		color: #fff;
		text-align: center;
	}
	.pub+.pub {margin-left:20px;}
		.pub p { margin:50px 0 0;}
	#social li {float:left;border-bottom:1px solid #fcfcfc;width:125px;margin:0 12px 0 0;}
	#social li:nth-child(3n) { margin:0; }
		#social li a {
			border-bottom:1px solid #e8e7e7;
			color:#787878;
			text-decoration:none;
			font:500 1.2em 'Trebuchet MS', Trebuchet;
			display: block;
			height: 25px;
			padding: 0 0 0 30px;
			line-height: 2;
			}
		#social li a[title*="delicious"] { background:url(img/delicious.png) no-repeat 5px center;}
		#social li a[title*="facebook"] { background:url(img/facebook.png) no-repeat 5px center;}
		#social li a[title*="rss"] { background:url(img/feed.png) no-repeat 5px center;}
		#social li a[title*="twitter"] { background:url(img/twitter.png) no-repeat 5px center;}
		#social li a[title*="digg"] { background:url(img/digg.png) no-repeat 5px center;}
		#social li a[title*="linkedin"] { background:url(img/linkedin.png) no-repeat 5px center;}
		#social li a[title*="myspace"] { background:url(img/myspace.png) no-repeat 5px center;}
		#social li a[title*="flickr"] { background:url(img/flickr.png) no-repeat 5px center;}
		#social li a[title*="technorati"] { background:url(img/technorati.png) no-repeat 5px center;}
		#social li:hover {background:#cdcdcd;}
		
	#copyright {clear:both;text-align:center;font: 500 1.1em verdana;margin:20px auto;}