* { margin: 0; padding: 0; list-style-type: none; }
@font-face { font-family: 'sunshine'; src: url('inc/sunshine.ttf') format('truetype'); }
@font-face { font-family: 'bradley'; src: url('inc/bradley.ttf') format('truetype'); }
@font-face { font-family: 'defaut'; src: url('inc/ShortStack.otf') format('truetype'); }
a { text-decoration: none; color: inherit; }
h1, .h1 {
	margin: -50px 0 0 10px; 
	font-family: "sunshine", Arial, Helvetica, sans-serif; color: #FFF; font-size: 40px; letter-spacing: 2px; text-shadow:#FFF -1px -1px 0px, #FFF 1px -1px 0px, #000 2px 2px 4px, #000 -2px 2px 4px, #000 -2px -2px 4px, #000 2px -2px 4px;}

.h1index {
	position: absolute; display: table-cell; margin: 0 10px 0 0; top: 30px; margin-left: 550px; 
	font-size: 18px;  color: #b3c875; letter-spacing: 0; font-family:"defaut", Arial, Helvetica, sans-serif; text-shadow: none; }

h2 { 
	margin: 40px 0 5px -15px; clear: left;
	color: #68a631; font-family: "sunshine", Arial, Helvetica, sans-serif; font-size: 40px; font-weight: bold; text-shadow:#6a831e -1px -1px 0px, #6a831e 1px -1px 0px, #333 2px 2px 1px; letter-spacing: 2px;}
h3 { 
	margin: 15px 0 4px 0;
	font-size: 20px; }
strong { text-decoration: underline; }
p { padding: 4px 0 2px 10px; }
ul  { padding: 4px 0 1px 20px; }
fieldset { margin:  0; background: rgba(197,203,180,.7); border: 0; padding-bottom: 20px; }
legend { font-size: 20px; font-weight: bold; }
.rouge { color: #631; }
.spacer { clear: both; }
.important { 
	margin-top: 15px; 
	font-size: 20px; text-align: center; color: rgba(143,38,129,1.00); }
.center { text-align: center; margin: 0 auto; display: block; }

.intro {
	position: relative; padding: 25px 25px 15px 25px; width: 80%; left: 10%; margin-top: -30px; margin-left: -30px;
	vertical-align: top; background: linear-gradient(to top, rgba(189,212,127, 1), rgba(189,212,127, 1) 30px, rgba(158,185,56, .5) 60px); border-radius: 30px; box-shadow: 0 0 30px #b1c564 inset, 0 0 30px #b1c564 inset; }
.intro:after, .intro:before { 
	position: absolute; width: 200px; height: 0px; z-index: -10;
	content: " "; }
.intro:before { 
	bottom: 13px; left: 10px; transform: rotate(-5deg); 
	box-shadow: 24px 6px 20px 13px #333; }
.intro:after { 
	bottom: 13px; right: 10px; transform: rotate(5deg); 
	box-shadow: -24px 6px 20px 13px #333; }
.intro p { 
	margin: 15px 15px 10px 15px; 
	font-size: 18px; font-weight: bold; color: #2d3616;  }
.intro h1+p:first-letter { 
	font-size: 40px; color: #536800; 
	float:left; vertical-align: text-bottom; }
body { background: #909586; font-family:"defaut", Arial, Helvetica, sans-serif; font-size: 16px; }
#fond { 
	margin: 0 auto; max-width: 1220px; min-width: 960px; min-height: 800px; position: relative; 
	background:url(images/wallpaper.jpg) no-repeat fixed center top; }
#fond:before { 
	min-height: 800px; width: 100%; margin: 0 auto; position: absolute;
	content:""; background:url(images/wallpaper1.jpg) no-repeat;  animation: wallpaper1 40s infinite; }
#fond:after { 
	min-height: 800px; width: 100%; margin: 0 auto; position: absolute;
	content:""; background:url(images/wallpaper2.jpg) no-repeat;  animation: wallpaper2 40s infinite; }

@keyframes wallpaper1 { 0%{opacity:0;} 30%{ opacity:0;} 36%{opacity:1; z-index: 0;} 63%{opacity:1; z-index: 0;} 70%{opacity:0;} 100%{opacity:0;} }
@keyframes wallpaper2 { 0%{opacity:0;} 63%{opacity:0;} 70%{opacity:1; z-index: 0;} 97%{opacity:1; z-index: 0;} 100%{opacity:0;} }

#conteneur { 
	position: relative; max-width: 1220px; width: 100%; min-height: 800px; position: absolute; z-index: 1; margin: 0 auto 20px auto;
	background:linear-gradient(rgba(90,95,80,0) 300px, rgba(90,95,80,1) 800px); }
#fixed {  position: fixed; z-index:1000; left: 0; right: 0; }

/* Spécifique smartphones
@media only screen
and (max-device-width : 480px) {
 #fixed {  position: absolute; }
 #fond { background:url(images/wallpaper.jpg) no-repeat scroll center top; }
} */

#header { max-width: 1220px; min-width: 960px; max-width: 1220px; margin: 0 auto; height: 170px; position: relative; background:linear-gradient(rgba(36,44,47,.9) 70px,rgba(36,44,47,.7) 105px, rgba(217,226,210,0) 170px);  behavior: url(/scripts/pie/PIE.htc); }
#titre { margin-left: 10px; }

#citation { 
	width: 40%; position: absolute; margin: 10px 10px 0 0; height: 60px; top: 0; right: 0; z-index: 1; 
	color: #84b1ad; }
#citation #slideshow { 
display: inline-block; *zoom:1; *display: inline; width: 100%; height: 100%; position: relative; overflow: hidden; z-index: 100;
vertical-align: middle; line-height: 16px; }
#citation #slider { width: 500%; position: absolute; animation: slider 40s infinite; }
#citation blockquote { font-size: 12px; display: inline-block; *zoom:1; *display: inline; vertical-align: top; width: 20%; line-height: 12px; }
#citation cite { display: block; text-align: right; color: #858b75; margin-right: 30px; }
@keyframes slider {
	0%, 19%, 100%	{ left: 0 }
	21%, 39%		{ left: -100% }
	41%, 59%		{ left: -200% }
	61%, 79%		{ left: -300% }
	81%, 99%		{ left: -400% }
}
#citation:before { content:'\201C'; color: #858b75; font-weight: bold; font-size: 52px; position: absolute; left: -30px; top: -10px; font-family: Georgia, "Times New Roman", Times, serif; }
#menu { clear: both; position: relative; width: 100%; min-width: 980px; top: -40px; }
#menu li { display: inline-block; *zoom:1; *display: inline; position: relative; margin:10px 0 0 0; padding-left: 0px; width: 24%; background: url(images/feuille.png) no-repeat; }
#menu li a { position: relative; display: block; z-index: 1; color: #FFF; text-shadow: 2px 2px 4px #4a4a4a, 2px -2px 4px #4a4a4a, -2px 2px 4px #4a4a4a, 2px -2px 4px #4a4a4a; font-family: "bradley" ,Arial, Helvetica, sans-serif; font-size: 40px; padding: 0 20px 0 40px; }
#menu li a:hover { color: #83a81e; }
#menu li ul { z-index: 0; position: absolute; max-height: 0px; margin: 0 0 0 0; padding: 20px 0 10px 0;  width: 86%; margin: 0 0 0 7%;; text-align: left; visibility: hidden; background: linear-gradient(rgba(188,221,91, .9) 0%, rgba(123,154,33, .5) 100%); border-radius: 0 0 30px 30px; behavior: url(/scripts/pie/PIE.htc); transition: 0.5s max-height 0.1s; overflow:hidden; box-shadow: #111 0px 3px 10px; }
#menu li ul li { display: inherit; color: #FFF; border: 0; width: 100%; background: none; line-height: 30px; margin: 10px 0 10px 10px; }
#menu li a:target { color: #83a81e; box-shadow: #000 0 6px 5px -5px; }
#menu li a:target + ul { max-height:400px; visibility: visible; }
#menu li ul li a { padding: 0; font-family: "defaut", Arial, Helvetica, sans-serif; font-weight: bolder; font-size: 26px; line-height: 20px; font-variant: small-caps; letter-spacing:0px; color: #FFF; border: none; background-image: none; text-shadow: 2px 2px 1px #000;  }
#menu li ul li a:hover { text-decoration: underline; color: #F1FF8A; }

#gauche { float: right; width: 200px; }

#content { position: relative; z-index:0; margin: 0 auto; padding: 100px 40px 0px 40px; margin-top: 25%; min-width: 800px; min-height: 395px; background:linear-gradient(rgba(255,255,255,0) 30px, rgba(255,255,255,.75) 160px, rgba(255,255,255,.75) 350px, rgba(255,255,255,1) 500px); behavior: url(/scripts/pie/PIE.htc); color: #3b3e32; line-height: 26px;  }
#content a { color:#399890; text-decoration: underline; }
#content a:hover { color: #00887d; }
#content img { margin: 0 auto; }
#content ul { margin-left: 10px; }
#content li { margin-bottom: 0px; }
#content .espaceli { margin-bottom: 7px; } 
#content li:before { content:"-"; margin-left: -10px; }
#content p { }

#actu { float: right; width: 500px; margin: -20px 0 0 0; left: 0; padding: 25px 10px 10px 10px; }
#actu h2 { color: #FFF; margin: -47px 0 0 10px; letter-spacing: 2px; text-shadow:#FFF -1px -1px 0px, #FFF 1px -1px 0px, #000 2px 2px 4px, #000 -2px 2px 4px, #000 -2px -2px 4px, #000 2px -2px 4px; }
#actu h3 { margin: -5px 0 0 10px; color: #3e481d; font-size: 24px; }
#actu #bloglink { font-size: 16px; color: #FFF; text-shadow: 1px 1px 3px #000; display: block; text-align: right; margin: 0 5px 10px 0; }

.intro+img { margin: 0 auto;display: block; }

#content img.mini { margin: 15px; width: 200px; border: 7px solid #FFF; box-shadow: 0px 0px 5px #888; behavior: url(/scripts/pie/PIE.htc); }
#content img.micro { margin: 15px; width: 150px; border: 7px solid #FFF; box-shadow: 0px 0px 5px #888; behavior: url(/scripts/pie/PIE.htc); }
.rotateR { transform: rotate(4deg); float: left; }
.rotateL { transform: rotate(-4deg); float: right; }

#bas { background-color: #83a81e; line-height: 20px; margin: 0 -40px; padding: 10px; text-align: center; }
#bas a { color: #FFF; font-size: 20px; }

#diapo img { vertical-align: absmiddle; float: left; margin: 5px; max-height: 200px; }
#diapo img.main {  max-height: 410px; clear: both; }

/* corps de page Blog */
.blog h1 { 
	clear: none; margin: 50px 0 0 0;
	color: #68a631; font-family: "sunshine", Arial, Helvetica, sans-serif; font-size: 40px; font-weight: bold; text-shadow:#6a831e -1px -1px 0px, #6a831e 1px -1px 0px, #333 2px 2px 1px; letter-spacing: 2px;}

























#articles { text-align: left; margin: 10px; }
#articles a.titre { font-size: 18px; font-weight: bold; display: block; clear: both; }
#articles .infos { color: #666; font-size: 11px; }
#articles li { list-style-type: none; height: 120px; }
#articles img { width: 80px; height: 60px; float: left; }
#articles p { margin-left: 90px; display: block; margin-right: 5px; }
#articles .commentaires { clear: both; float: right; margin-right: 10px; }
#articles .commentaires a { color: #069; }
#articles li:before { content:""; margin-left: -10px; }
#datcat { color: #666; font-size: 11px; } 
#imgarticle { float: left; width: 120px; height: 90px; }
#commentaires { margin: 20px; padding: 20px; border-radius: 30px; }
#commentaires div { padding: 5px 0 5px 5px; margin: 5px 15px; border-radius: 10px; }
#commentaires div .nom { font-size: 13px; font-weight: bold; color: #036; }
#commentaires div .date { font-size: 11px; color: #333; }
#commentaires div p { margin: 0; padding: 0 5px 10px 5px; margin: 0 15px; }
#commentaires .titre { color: #00887d; font-size: 18px; display: block; font-weight: bold; line-height: 20px; margin-left: 10px; padding-top:5px; }
#commentaires textarea { width: 550px; height: 100px; margin-left: 25px; }
#commentaires label { margin: 10px 0 5px 25px; display: block; }
#commentaires .img { max-width: 500px; }
#gauche {float: left; width: 200px; }
#centre { margin-left: 250px; }
.nextprev { font-size: 22px; text-align: center; }
.nextprev span { font-size: 40px; vertical-align: middle; }