/* "Inspiration" par Graphiques-Kits.com 
Sous licence Creative Commons 2.0 
http://www.graphiques-kits.com/conditions */

*{
	margin: 0;
	padding: 0;
}

p {
	margin: 15px 0 15px 0;
	padding: 0 0 0 0;
	text-align: center;
}

a {
	text-decoration: none;
	color: #669a26;
}

a:hover { color: #107cab; }

.invisible {
	display: block;
	visibility: hidden;
}

.clear {
	margin: 0 auto;
	font-size: 1px;
	clear: both;
}

body {
	background: #eee url(images/bg-contenu.jpg) repeat-y center;
	text-align: center;
	font: normal 80% "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	color: #515151;
}

#main {
	background: url(images/bg.jpg) no-repeat center top;	
}

#site {
	width: 1000px;
	margin: 0 auto;
	text-align: left;
	position: relative;
}

#top {
	width: 1000px;
	height: 30px;
	font: 11px Verdana, Arial, Helvetica, sans-serif;
}

#navigation {
	height: 30px;
	padding-left: 40px;
	overflow: hidden;
}

#navigation li {
	list-style-type: none;
	width: 90px;
	height: 30px;
	background: url(images/navigation-separation.jpg) no-repeat right top;
	padding-right: 2px;
	text-align: center;
	float: left;
}

#navigation li a {
	width: 90px;
	height: 24px;
	display: block;
	color: #baceda;
	padding-top: 6px;
	text-decoration: none;
}

#navigation li a:hover {
	color: #fff;
}

#login {
	position: absolute;
	right: 40px;
	top: 0px;
	color: #9db2bf;
	background: url(images/user.gif) no-repeat right top;
	padding: 6px 32px 0 0;
	min-height: 30px;
}

#login a { color: #9db2bf; }
#login a:hover { color: #9db2bf; }

#header {
	width: 1000px;
	height: 140px;
}

#header h1 {
	width: 450px;
	height: 140px;
	line-height: 140px;
	text-indent: -9999px;
	padding-left: 60px;
}

#header h1 a {
	width: 450px;
	height: 140px;
	display: block;
	background: url(images/logo.png) no-repeat 0 0;
}

#rss {
	width: 1000px;
	height: 75px;
}

#rss .rss {
	width: 175px;
	height: 65px;
	display: block;
	background: url(images/rss.png) no-repeat 0 0;
	float: right;
	margin-right: 60px;
}

/* Container */
/* --------- */

#container {
	width: 895px;
	margin: 15px 0 0 50px;
}

/* Gauche */

#content {
	width: 610px;
	float: left;
}

#content h3 {
	margin: 1.4em 0 0.9em 0;
	font-weight: normal;
	font-size: 1.2em;
	color: #000;
}

.bloc {
	background: url(images/bg-bloc.jpg) right bottom no-repeat;
	padding: 0 40px 20px 0;
	margin: 0 0 30px 0;
}

.bloc h2 {
	margin: 0 0 0em 0;
	font-weight: bold;
	font-size: 1.6em;
	color: #333399
}

.post-date {
	color: #5e5e5e;
	margin: 0 0 1.6em 0;
}

h2 {
	margin: 1.6em 0 0.9em 0;
	font-weight: bold;
	font-size: 1.6em;
	color: #7cae39;
}

.content-p {
	padding: 0 20px 20px 0;
	margin: 0 0 30px 0;
}

.bleu {
	color: #10729c;
}

.annonce {
	float: right;
	width: 175px;
	margin: 0;
	padding: 0 0 10px 20px
}

.annonce img {
	border: #d1e1e7 solid 5px;
}

.code {
	display: block;
	width: 490px;
	background: #f2f5f6 url(images/bg-code.gif) right top no-repeat;
	margin-left: 23px;
	padding: 10px 15px 10px 18px;
	border-left: #b5de14 solid 6px;
}

.bottom {
	display: block;
	width: 594px;
	background: #edf3f5 url(images/bg-bottom.gif) left top no-repeat;
	padding: 4px 10px 4px 10px;
	margin-bottom: 30px;
}

.bottom a {
	color: #074456;
}

.bottom a:hover {
	color: #000;
}

.comments {
	background: url(images/quote.gif) no-repeat 0 4px;
	padding-left: 24px;
	float: left;
	width: 300px;
}

.sociaux {
	float: right;
	width: 250px;
}

/* Droite */

#sidebar {
	width: 250px;
	float: left;
	padding-left: 20px;
}

#sidebar a {
	color: #515151;
}

#sidebar a:hover {
	font-weight: bold;
	color: #7cae39;
}

#sidebar a img { border: 0 none; }

h3 {
	margin: 1.4em 0 0.9em 0;
	font-weight: bold;
	font-size: 1.3em;
	color: #10729c;
}

.puce-1 ul {
	list-style: url(images/puce-1.gif);
	padding: 0px;
	margin: 0 0 0 30px;
}

.puce-1 li {
	margin-bottom: 2px;
}

.puce-2 ul {
	list-style: url(images/puce-2.gif);
	padding: 0px;
	margin: 0 0 0 30px;
}

.puce-2 li {
	margin-bottom: 2px;
}

/*  FOOTER  */
/* ---------*/

#footer {
	background: #086783 url(images/bg-footer.jpg) repeat-x;
	height: 150px;
	margin-top: 30px;
}

#footer-inner {
	margin:0 auto;
	width: 1000px;
	height: 60px;
	padding: 30px 0 0 20px;
	color: #FFF;
	text-align: center;
	background: url(images/footer.jpg) 0 2px no-repeat;
}

#footer-inner h2 {
	margin: 0 0 0.8em 0;
	font-weight: bold;
	font-size: 2.0em;
	color: #b5de14;
}

#footer-left {
	float: left;
	width: 580px;
	padding-left: 50px;
	padding-right: 30px;
}

#footer-left ul {
	list-style: none;
	padding: 0px;
}

#footer-left li {
	margin-bottom: 2px;
}

#footer-left a {
	color: #FFF;
}

#w3c {
	margin: 0 0 0 50px;
}

#w3c ul {
	padding: 0px;
}

#w3c ul li {
	float: left;
	list-style: url(images/valide.gif);
	margin: 25px 80px 0 0;
}

#w3c li a {
	color: #17a2e2;
	font-weight: bold;
}

#footer-right {
	float: center;
	width: auto;
}

#footer-right a {
	color: #FFF;
}

#footer-right a:hover {
	font-weight: bold;
	color: #b5de14;
}

#twitter {
	font-weight: bold;
	background: url(images/twitter.png) top left no-repeat;
	min-height: 73px;
}

#twitter p { padding: 15px 0 0 80px; }
div.arrondi {
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

/*  bloc  */

/* CSS for the box starts here
================================================*/
/* Default styling. Used when JavaScript is unsupported */
.cbb {
	padding:0 10px;
	margin:1em 0;
	background:#fff;
	border:1px solid #666;
	}
.cbb h1 {
	margin:0 -10px;
	padding:0.3em 10px;
	background:#efece6;
	font:bold 1.2em/1 Arial, Helvetica, sans-serif;
	}
/* Insert the custom corners and borders for browsers with sufficient JavaScript support */

/* Two of the boxes are floated just for this demo. Adjust to your needs. */
.cb {
	margin:0.5em 0;
	}
.two {
	width:45%;
	float:right;
	}
.three {
	width:45%;
	float:right;
	}
/* Rules for the top corners and border */
.bt {
	background:url(box.png) no-repeat 100% 0;
	margin:0 0 0 18px;
	height:17px;
	}
.bt div {
	height:17px;
	width:18px;
	position:relative;
	left:-18px;
	background:url(box.png) no-repeat 0 0;
	}

/* Rules for the bottom corners and border */
.bb {
	background:url(box.png) no-repeat 100% 100%;
	margin:0 0 0 12px;
	height:14px;
	}
.bb div {
	height:14px;
	width:12px;
	position:relative;
	left:-12px;
	background:url(box.png) no-repeat 0 100%;
	}

/* Insert the left border */
.i1 {
	padding:0 0 0 12px;
	background:url(borders.png) repeat-y 0 0;
	}
/* Insert the right border */
.i2 {
	padding:0 12px 0 0;
	background:url(borders.png) repeat-y 100% 0;
	}
/* Wrapper for the content. Use it to set the background colour and insert some padding between the borders and the content. */
.i3 {
	background:#fff;
	border:1px solid #fff;
	border-width:1px 0;
	padding:0 10px;
	}
/* CSS for the box ends here */

/* You can use different borders for different boxes on the same page. Just adjust the CSS. The following is an example that uses the GIF images instead of the PNG images. Note that you can also adjust borders, heights and paddings this way. Remember to adjust the IE CSS as well. */
.three .i1,
.three .i2 {
	background-image:url(borders.gif);
	}
.three .bt,
.three .bt div,
.three .bb,
.three .bb div {
	background-image:url(box.gif);
	}

/* Just a bit of styling for this example. Adjust as you wish. */
.cb h1 {
	margin:0 -10px;
	padding:0.3em 10px;
	background:#efece6;
	font:bold 1.2em/1 Arial, Helvetica, sans-serif;
	
/* CSS for slider */	
/* -- IMAGES -- */

#main .photoblock {			/* Basic block, inline, w/caption fonts. */
  font-size: 11px;
  color: #888888;
  margin-right: 10px;
  display: inline-block;
}

#main .photoblock-left {		/* A photo block on the left */
  margin: 0 10px 10px -4px;
  font-size: 10px;
  color: #888888;
  float: left;
}
#main .post-body .photoblock-left a {
  color: #555555;
  background-image: none;
  text-decoration: underline;
}

#main .photoblock-right {		/* Photo block on the.. gasp.. right */
  margin: 0px 0px 10px 10px;
  font-size: 11px;
  color: #888888;
  float: right;
  text-align: right;
}
#main .post-body .photoblock-right a {
  color: #555555;
  background-image: none;
  text-decoration: underline;
}

#main .photoborder {           /* Apply to an image to give it a border */
  border: 1px solid #ccc;
  padding: 1px;
}
#main a:hover .photoborder {
   border: 1px solid #888;
}

#main .photoblock-many {		/* A general full-width photo block (that clears), for many thumbnails */
   margin: 0 10px 10px -4px;
   clear: both;
   width: 100%;
   text-align: center;
   font-size: 10px;
   color: #888888;
}
#main .photoblock-many a {		/* (Need clear links in the photo block) */
   background: white;
}

#main .photoborder-right {		/* A photo with a border on the right */
   border: 1px solid #ccc;
   padding: 1px;
   margin: 0px 0px 10px 10px;
   float: right;
}

#main .photo {			/* A normal photo */
  padding: 3px;
  vertical-align: middle;
}

.post-footer img {
   vertical-align: -20%;
   /* border: 1px black solid; */
}

/*SLIDESHOW */
.slideshow{display:block;position:relative;z-index:0;}
.slideshow-images{display:block;overflow:hidden;position:relative;}
.slideshow-images img{display:block;position:absolute;z-index:1;}
.slideshow-thumbnails{overflow:hidden;}
.slideshow-images{height:300px;width:400px;}
.slideshow-images-visible{opacity:1;}
.slideshow-images-prev{opacity:0;}
.slideshow-images-next{opacity:0;}
.slideshow-images img{float:left;left:0;top:0;}
.slideshow{height:300px;margin:0 auto;width:400px;}
.slideshow a img{border:0;}
.slideshow-captions{background:#000;bottom:0;color:#FFF;font:normal 12px/22px Arial,sans-serif;left:0;overflow:hidden;position:absolute;text-indent:10px;width:100%;z-index:10000;}
.slideshow-captions-hidden{height:0;opacity:0;}
.slideshow-captions-visible{height:22px;opacity:.7;}
.slideshow-controller{background:url(controller.png) no-repeat;height:42px;left:50%;margin:-21px 0 0 -119px;overflow:hidden;position:absolute;top:50%;width:238px;z-index:10000;}
.slideshow-controller *{margin:0;padding:0;}
.slideshow-controller-hidden{opacity:0;}
.slideshow-controller-visible{opacity:1;}
.slideshow-controller a{cursor:pointer;display:block;height:18px;overflow:hidden;position:absolute;top:12px;}
.slideshow-controller a.active{background-position:0 18px;}
.slideshow-controller li{list-style:none;}
.slideshow-controller li.first a{background-image:url(controller-first.gif);left:33px;width:19px;}
.slideshow-controller li.last a{background-image:url(controller-last.gif);left:186px;width:19px;}
.slideshow-controller li.next a{background-image:url(controller-next.gif);left:145px;width:28px;}
.slideshow-controller li.pause a{background-image:url(controller-pause.gif);left:109px;width:20px;}
.slideshow-controller li.play a{background-position:20px 0;}
.slideshow-controller li.play a.active{background-position:20px 18px;}
.slideshow-controller li.prev a{background-image:url(controller-prev.gif);left:65px;width:28px;}
.slideshow-loader{height:28px;right:0;position:absolute;top:0;width:28px;z-index:10001;}
.slideshow-loader-hidden{opacity:0;}
.slideshow-loader-visible{opacity:1;}
.slideshow-thumbnails{bottom:-65px;height:65px;left:0;position:absolute;width:100%;}
.slideshow-thumbnails *{margin:0;padding:0;}
.slideshow-thumbnails ul{height:65px;left:0;position:absolute;top:0;width:10000px;}
.slideshow-thumbnails li{float:left;list-style:none;margin:5px 5px 5px 0;position:relative;}
.slideshow-thumbnails a{display:block;float:left;padding:5px;position:relative;}
.slideshow-thumbnails a:hover{background-color:#FF9!important;opacity:1!important;}
.slideshow-thumbnails img{display:block;}.slideshow-thumbnails-active{background-color:#9FF;opacity:1;}
.slideshow-thumbnails-inactive{background-color:#FFF;opacity:.5;}