/* PLC - le 12/05/2009*/
/* rouge :#DF3F3F;
vert : #584900;
beige :#F3F2ED;
*/
html, body {
margin:auto;
padding:0;
}
body {
	margin: 10px 0 ;
	padding: 0 ;
	/*text-align: center ;*/
	font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
	 /*background: #dea ;*/ 
	background-image: url("../Images/fond42.jpg");
background-repeat:no-repeat;
    background-size:cover;
/*text-align:center;
font:0.9em "trebuchet ms", helvetica, arial, sans-serif;
background-color: #F0BD6D;
word-wrap: break-word;*/
}
@font-face {
    font-family: 'Comic sans ms';
    font-weight: normal;
    font-style: normal;
}


#page {
/*background-color: #E4AA8A; */
/*background-image:url("Images/bg.jpg");*/
margin:auto;
padding:0;
min-width:900px;
/*text-align:center;*/
}
h1 {
max-width:960px;
margin:auto;
font-variant:small-caps;
padding:10px 0 15px 0;
}
h2, h3, h4, h5, h6 {
font-family:SansationBold, 'Arial', helvetica, arial, sans-serif;
}
h2 {
font-size:160%;
font-variant:small-caps;
letter-spacing:0.06em;
color:#7E3002;
text-align:center;
}
h3 {
font-size:130%;
color:#7E3002;
text-align:center;
}
h3 a {
color:#584900;
text-decoration:none;
font-size:100%;
}
h3 a:visited {
color:#584900;
}
h3 a:hover, 
h3 a:active, 
h3 a:focus {
opacity:0.7;
}
h4 {
font-size:100%;
color:#7E3002;
}
h5 {
font-size:90%;
color:#000000;
}
h6 {
font-size:115%;
text-align:center;
}
a  {
color:#DF3F3F
}
a.twitter-follow-button, 
a.twitter-share-button  {
color:#DF3F3F !important;
text-decoration:underline !important
}
a:visited {
color:#DF3F3F;
}
a:hover, 
a:active, 
a:focus {
text-decoration:underline overline;


font-weight:bold;
}
a[hreflang]:after {
content: " (" attr(hreflang) ")"; 
}
p {
line-height:1.4em
}
abbr {
}
code {
font:1.05em 'courier new', monospace bold;
color:#DF3F3F;
}
h2 code {
font-size:1.2em
}
h3 code {
font-size:1.2em
}
pre {
font:1em/1.35em 'courier new', monospace;
padding:5px 10px;
margin:30px 0;
overflow:auto;
color:#000000;
background-color:#FFF3F3;
border-left:3px ridge #DF3F3F;
}
pre span {
font-style:italic;
color:#696969;
}
pre span.r {
color:red;
}
input {
padding:1px;
background-color:#F3F2ED
}
input:focus {
background-color:white;
}
input[type=submit], 
input[type=reset] {
border:solid #AD1D1D;
border-width:1px 2px 2px 1px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
padding:5px;
font-weight:bold;
background-color:#DF3F3F;
color:white;
-moz-box-shadow:1px 1px 3px gray;
-webkit-box-shadow:1px 1px 3px gray;
box-shadow:1px 1px 3px gray;
}
input[type=submit]:hover, 
input[type=reset]:hover { 
cursor:pointer;
}
input[type=submit]:active, 
input[type=reset]:active, 
input[type=submit]:focus, 
input[type=reset]:focus { 
-moz-box-shadow:1px 1px 1px gray inset;
-webkit-box-shadow:1px 1px 1px gray inset;
box-shadow:1px 1px 1px gray inset;
color:whitesmoke;
}
img,
img a {
border:0
}
hr {
height:1px;
color:white;
border:1px solid white;
}
blockquote {
background:white url(images/quote.png) no-repeat;
margin-left:0;
padding-left:60px;
color:#545454;
}  

/*--------- header ------------------------------header------------------------------------*/
#accueil #header, 
#header {
margin-bottom:10px;
margin:auto;
text-align:center;
background: #EF994C;
/*background-image: url("../Images/guirlande.jpg");*/
background-repeat:no-repeat;
/*background-size:cover;*/

/*css3*/
-moz-box-shadow:-6px 2px 6px 0 #A9A9A9;
-webkit-box-shadow:-6px 2px 6px #A9A9A9;
box-shadow:-6px 2px 6px 0 #A9A9A9;
}
#header h1 a {
text-decoration:none;
}
#header h1 span.diese {
font-family:SansationBold, "Arial", gadget, arial, sans-serif; 
color: #FFFFFF;
    font-weight: normal;
    font-style: normal;
font-size:0,5em;
text-align:center;
}
#header h1 span.debutant {
font-family:"courier new", courier, serif; 
color: #FFFFFF;
text-align:center;
font-size:1.2em
}
#header h1 abbr {
border:none;
}
#header ul {
max-width:950px;
min-width:800px;
margin:auto;
height:20px;
list-style-type:none;
text-align:center;
padding:5px 0 35px 0;
}
#header li {
font:1em 'Arial', helvetica, arial, sans-serif ;
    font-weight: normal;
    font-style: normal;
letter-spacing:0.06em;
float:left;
padding:0;
margin:0 10px 0 0;
/*--background-color:#908E8D;*/
-moz-box-shadow:-6px 2px 6px 0 #A9A9A9;
-webkit-box-shadow:-6px 2px 6px #A9A9A9;
box-shadow:-6px 2px 6px 0 #000000;
-moz-border-radius:5px;
-webkit-border-radius:5px; 
border-radius:5px;
border:2px solid #FFFFFF;
}
#header li.der {
border-right:1px solid transparent;
}
#header li a {
display:block;
width:170px;
text-decoration:none;
padding:6px 0;
/*color:#7E3002;*/
color:#FFFFFF;
opacity:0.9;
font-weight:bold; 
}
#premiers #header li.premiers a,
#tutoriels #header li.tutoriels a,
#outils #header li.outils a,
#livre #header li.livre a,
#css3 #header li.css3  a,
#accueil #header li.livre a { 
opacity:0.9;
}
#header li a:hover, 
#header li a:active, 
#header li a:focus {	
color:white;
opacity:1;
}
#premiers #header li.premiers,
#tutoriels #header li.tutoriels,
#outils #header li.outils,
#livre #header li.livre,
#css3 #header li.css3,
#accueil #header li.livre {
background-color:#E97878;
background:rgba(223,63,63,0.7);
}
#header li:hover ,
#premiers #header li.premiers:hover,
#tutoriels #header li.tutoriels:hover,
#outils #header li.outils:hover,
#livre #header li.livre:hover,
#css3 #header li.css3:hover,
#accueil #header li.livre:hover {
background-color:#DF3F3F;
background-color:rgba(223,63,63,1);
-moz-transition:background-color 0.5s linear;
-webkit-transition:background-color 0.5s linear;
-o-transition:background-color 0.5s linear;
-ms-transition:background-color 0.5s linear;
transition:background-color 0.5s linear;
}
#header p {
color:#232916;
font-size:90%;
margin:0;
}
#header p a {
color:#232916;
}
#header p a:hover {
color:white
}
#header p a:active, 
#header p a:focus {
color:#DF3F3F;
}
#brouette {
background:url(images/brouette.png) no-repeat right bottom;
}
/*-----------home---------------*/
#main {
position:relative;
text-align:center;
max-width:960px;
margin:auto;
}
#accueil #home h2 a {
color:#DF3F3F !important;
text-decoration:none;
}
#accueil #home h2 a:hover, 
#accueil #home h2 a:active, 
#accueil #home h2 a:focus {
}
#accueil #home .table {
display:table;
table-layout:fixed;
background:#F3F2ED; 
border:solid #D7D3C4;
border-width:1px 0;
margin:40px 0 30px 0;
}
#accueil #home .cell {
display:table-cell;
width:25%;
padding:10px 12px;
}
#accueil #home .cell:hover {
background:#EFECDE; 
-moz-transition:background 0.75s linear;
-webkit-transition:background 0.75s linear;
-o-transition:background 0.75s linear;
transition:background 0.75s linear;
}
#accueil #home .table2 {
display:table;
table-layout:fixed;
}
#accueil #home .cell2 {
display:table-cell;
width:1%;
padding:10px 12px;
vertical-align:top;
}
#accueil #home p {
text-align:justify;
}
#accueil #apropos {
padding:10px 12px;
}
#accueil #footer {
min-width:960px;
}
aside {
font-size:1.1em;
padding:5px;
border:1px solid #EFECDE;
border-radius:5px;
background-image:-moz-linear-gradient(#EFECDE, white);
background-image:-webkit-linear-gradient(#EFECDE, white);
background-image:-o-linear-gradient(#EFECDE, white);
background-image:linear-gradient(#EFECDE, white);
background-color:#EFECDE;
}
/* ---------- edito ----------- */
#edito {
text-align:left;
width:900px;
background-image:url("../Images/fond42.jpg");
margin:auto;
}
#edito h2 {
margin-top:0;
}
#accueil #home h2:first-letter, 
#edito h2:first-letter {
font-size:150%;
text-shadow:1px 1px 1px #A9A9A9;
}
#edito li, 
#home li {
margin-bottom:3px;
line-height:1.4em;
}
#edito ul li, 
#home ul li {
list-style-image:url(images/puce-verte.gif);
} 
#edito .objet {
background:#F3F2ED; 
border:1px solid #E0DFDA;
padding:10px;
}
#edito .objet li {
font-family:"courier new", monospace;
text-align:left;
margin-left:-15px;
list-style-image:url(images/puce-rouge.gif);
margin-bottom:0px;
}
#edito .objet p {
font-weight:bold;
padding-top:0;
margin-top:0;
}
/* ----- chapeau -----*/
#chapo {
background:#F3F2ED; 
border:4px double white;
padding:0 10px;
/* ---margin:30px 0 30px 0;--*/
margin:auto;
width:900px;
min-height:125px;
/*css3*/
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow:3px 3px 6px 2px #A9A9A9;
-moz-box-shadow:3px 3px 6px 2px #A9A9A9;
-webkit-box-shadow:3px 3px 6px #A9A9A9;
}
#chapo p {
line-height:1.5em; 
text-align:center;
}
#chapo p strong {
font-size:120%
}
#chapo p + p strong, 
#chapo p.normal strong {
font-size:100%
}
#chapo p:before, 
#accueil #home .table p:before {
/*content:url(images/main3.png) " ";*/
}
#chapo p + p:before, 
#chapo p.normal:before, 
#accueil #home .table p + p:before {
content:"";
}
/*--------- menu -----------*/
#menu {
position:absolute;
top:35px;
right:0;
text-align:left;
font-size:90%;
color:black;
max-width:240px;
}
#menu a {
text-decoration:none;
color:black;
display:block;
}
#menu li a {
padding-left:5px;
}
#menu li a:hover, 
#menu li a:active, 
#menu li a:focus {
background-color:#F3F2ED;
}
#menu ul {
list-style:none; 
list-style-image:none; 
padding-left:0; 
}
#menu li {
line-height:2.2em;
border-top:1px dotted #CAC7BC;
border-bottom:1px dotted #CAC7BC;
}
#menu li:hover, 
#menu li:active, 
#menu li:focus {
background-color:#F3F2ED;
}
#menu li + li {
border-bottom:1px dotted #CAC7BC;
border-top:none
}
#menu h2 {
font-size:1.2em;
background-color:#DF3F3F;
text-align:center;
border:1px solid #DF3F3F;
padding:2px;

/*css3*/
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
#menu h2 a {
color:white;
}
#menu h2 a:hover, 
#menu h2 a:active, 
#menu h2 a:focus {
}
#navig {
padding:0 4%;
}
#w3c {
padding-top:15px;
}
#w3c p {
text-align:center;
}
#w3c p.share a {
color:#DF3F3F;
text-decoration:underline;
display:inline;
}
#w3c p.share a:hover, 
#w3c p.share a:active {
text-decoration:none;
}  
#menu iframe {max-width:75% !important; margin:auto}
/* -------------recherche----------- */
/*#search fieldset {
width:180px;
background-color:#F3F2ED;
border:1px solid white;
padding:10px 0 0 10px;
position:absolute;
top:160px;
right:3%;
}*/
#search fieldset {
width:180px;
border:none;
margin:0 auto /*50px*/ 5px auto
}
#search input[type=text] {
float:left;
background:url(images/search-input.png) top left no-repeat;
width:133px;
height:25px;
padding:7px 0 0 10px;
border:none;
color:#808080;
}
#search input[type=submit]{
float:left;
background:url(images/search-input.png) top right no-repeat;
width:29px;
height:30px;
cursor:pointer;
border:0;
color:white;
padding:0 0 0 2px
}
#search input:focus {
color:black;
}
#search p {
text-align:center;
}

/*--------- footer ----------*/
#footer {
clear:both;
text-align:center;
font-size:90%; 
line-height:1.5em;
margin:0;
padding:20px 0 50px 0;
background:url(images/pelouse2.png) repeat-x right bottom;
}
#footer p {
color:#404F23 !important;
padding-bottom:20px
}
#footer a {
color:#404F23;
}
#footer a:hover {
text-decoration:none;
}
#footer section {
display:inline-block; 
vertical-align:top;
text-align:left; 
width:220px; 
padding-left:80px
}
#footer section h2 {
text-align:left;
font-size:140%;
text-shadow:0 1px 0 white;
}
#footer section li {
color:#404F23;
list-style-type:none;
margin-left:-40px;
}
#footer section dd,
#footer section dt {
color:#404F23;
}
#footer section dd {
margin-left:0;
margin-bottom:1.5em;
}

#footer abbr.update, 
#footer abbr.published {
border:none;
}
.pelouse {
border-top:3px double #CAC7BC;
background:url(images/beche2.png) no-repeat right bottom, 
-moz-linear-gradient(#CAC7BC, white);
background:url(images/beche2.png) no-repeat right bottom, 
-webkit-linear-gradient(#CAC7BC, white);
background:url(images/beche2.png) no-repeat right bottom, 
-o-linear-gradient(#CAC7BC, white);
background:url(images/beche2.png) no-repeat right bottom, 
-ms-linear-gradient(#CAC7BC, white);
background:url(images/beche2.png) no-repeat right bottom, 
linear-gradient(#CAC7BC, white);
background-color:#CAC7BC;
}

/* --------- divers / vrac --------*/
#suite {
text-align:right;
}
.suite:before {
content:url(/images/main2.png) " ";
}
.none {
display:none;
}
.visu {
background:#F5F5F5 url(images/visu.png) no-repeat 10px 15px;
border:1px solid #C0C0C0;
color:#404040;
padding:0 10px 10px 100px;
margin:50px 0;
/*css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-moz-box-shadow:3px 3px 6px 0 #A9A9A9;
-webkit-box-shadow:3px 3px 6px #A9A9A9;
box-shadow:3px 3px 6px 0 #A9A9A9;
}
.visu h2, 
.visu h3, 
.visu h4 {
font-size:110%;
color:#696969;
font-style:normal
}
.visu li {
list-style-image:none !important;
margin-bottom:0 !important;
}
.haut, .top {
text-align:right;
font-size:90%;
}
p.haut:after, 
p.top:after {
content:" " url(images/haut.gif);
}
.astuce:before {
content:url(images/light_bulb__exclamation.png) " ";
}
.warning:before {
content:url(images/warning_16.png) " ";
}
.voir:before, 
.test:before {
content:url(images/voir.png) " ";
}
.chemin {
text-align:left;
padding:1px 0;
background-color:white;
color:#DF3F3F;
font-size:80%;
margin:0 0 15px 0;
}
.chemin a {
color:#DF3F3F;
}
.centre {
text-align:center;
}
.clear {
clear:both
}

#copy {
padding:20px 0 5px 0;
font-size:90%;
color:#696969;
border-top:1px solid #D7D3C4;
text-align:center;
}
#copy p {
text-align:center !important; 
}
#copy em {
font-family:serif;
font-size:105%
}
#copy .share img:hover {
-moz-transform:rotate(-25deg);
-webkit-transform:rotate(-25deg);
-o-transform:rotate(-25deg);
-ms-transform:rotate(-25deg);
transform:rotate(-25deg);
-moz-transition:all 0.5s linear;
-webkit-transition:all 0.5s linear;
-o-transition:all 0.5s linear;
-ms-transition:all 0.5s linear;
transition:all 0.5s linear;
}
#copy .share .gplus iframe {
margin-left:20%;
}
#copy .share .twitter iframe {
margin-left:10px;
}

/*---------- IE6 warning  ---------- */
#ie6msg {
width:50%;
border:2px solid #DF3F3F;
background-color:#F5F5F5;
margin:5px auto;
padding:5px;
} 
/*---------- media-queries  ---------- */
@media only screen and (max-width:960px) { 
h1 {
padding-left:0;
}
.chemin {
padding:0 0 5px 20px;
}
#edito, 
#accueil #home, 
#header h1, 
#header ul {
width:95%;
padding:20px;
}
#menu {
display:none;
}
#header ul li.der {
display:none
}
#accueil #home .table {
width:100%;
}
#footer section {
width:25%;
padding-left:5%;
}
}
@media only screen and (max-device-width:960px) {
body {
text-align:left;
}
#header li {
font-size:1.3em;
}
#header li a {
width:140px;
}
#edito, 
#accueil #home, 
#footer {
font-size:1.5em
}
#edito h2, 
#accueil #home h2 {
font-size:1.3em
}
#accueil .table div.cell p {
text-align:left !important;
}
#page {
width:960px;
}
#accueil #footer {
min-width:100%;
}
#footer section {
}
pre {
overflow:visible;
word-wrap:break-word;
}
.chemin {
font-size:1.3em;
}
}
@media only screen and (max-device-width:980px) and (orientation:portrait) {
#edito, 
#accueil #home, 
#footer {
font-size:1.8em
}
#edito h2, #accueil #home h2 {
font-size:1.3em
}
}