<!--/*
    Document   : shahjar.css
    Created on : May 17, 2017, 11:22:04 AM
    Description:
        Purpose of the stylesheet follows.
*/


html
{-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}

.centrage {text-align: center;}
.flex
   {
      /* style basique */
      width: 350px;
      height: 200px;
      border: 1px solid #555;
      font: 1em Arial;

      /* instaure la flexbox */
      display: -webkit-flex;
      -webkit-flex-direction: row;

      display: flex;
      flex-direction: row;
   }

.flex > div
   {
      -webkit-flex: 1 1 auto;
      flex: 1 1 auto;

      width: 30px; /* Pour faire fonctionner correctement la transition. (Les transitions vers "width:auto" sont buggées dans Gecko et Webkit, au moins. Voir https://bugzil.la/731886 pour plus d’informations.) */

      -webkit-transition: width 0.7s ease-out;
      transition: width 0.7s ease-out;
   }

   /* colors */
   .flex > div:nth-child(1){ background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 255, 0.1); }
   .flex > div:nth-child(2){ background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 255, 0.2); }
   .flex > div:nth-child(3){ background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 255, 0.3); }

   .flex > div:hover
   {
        width: 200px;
   }

.Judofusion1HeaderSub
{
     font-family: Arial, Helvetica, Geneva, sans-serif;
     font-size: 24pt;
     color: #336699;
}
.Judofusion2HeaderSub
{
     font-family: Arial, Helvetica, Geneva, sans-serif;
     font-size: 16pt;
     color: #336699;
}
.Judofusion3HeaderSub
{
     font-family: Arial, Helvetica, Geneva, sans-serif;
     font-size: 16pt;
     color: #336699;
}

.OraHeaderSub
{
     font-family: Arial, Helvetica, Geneva, sans-serif;
     font-size: 26pt;
     color: #199959;
}
.OraInstructionText
{
     font-family: Arial, Helvetica, Geneva, sans-serif;
     font-size: 15pt;
     color: #18198c;
}
.OraErrorHeader
{
     font-family: Arial, Helvetica, Geneva, sans-serif;
     font-size: 11pt;
     color: #CC0000;
     font-weight: bold ;
}
.OraErrorText
{
     font-family: Arial, Helvetica, Geneva, sans-serif;
     font-size: 10pt;
     color: #000000;
}
.OraFieldText
{
     font-family: Arial, Helvetica, Geneva, sans-serif;
     font-size: 10pt;
     color: #1c8b93;
     font-weight: normal;
}
.OraCopyright
{
     font-family: Arial, Helvetica, Geneva, sans-serif;
     font-size: 5pt;
     color: #000000;
}
.OraHintText
{
     font-family: Arial, Helvetica, Geneva, sans-serif;
     font-size: 9pt;
     color: #000000;
}
.OraValueText
{
     font-family: Arial, Helvetica, Geneva, sans-serif;
     font-size: 10pt;
     color: #000000;
     font-weight: bold;
}
.InscriptionHeaderSub
{
     font-family: Arial, Helvetica, Geneva, sans-serif;
     font-size: 16pt;
     color: #993333;
}
.InscriptionInstructionText
{
     font-family: Arial, Helvetica, Geneva, sans-serif;
     font-size: 10pt;
     color: #000000;
}
.InscriptionErrorHeader
{
     font-family: Arial, Helvetica, Geneva, sans-serif;
     font-size: 11pt;
     color: #CC0000;
     font-weight: bold ;
}
.InscriptionErrorText
{
     font-family: Arial, Helvetica, Geneva, sans-serif;
     font-size: 10pt;
     color: #18198c;
}
.InscriptionFieldText
{
     font-family: Arial, Helvetica, Geneva, sans-serif;
     font-size: 10pt;
     color: #1c8b93;
     font-weight: normal;
}
.InscriptionCopyright
{
     font-family: Arial, Helvetica, Geneva, sans-serif;
     font-size: 8pt;
     color: #18198c;
}
.InscriptionHintText
{
     font-family: Arial, Helvetica, Geneva, sans-serif;
     font-size: 9pt;
     color: #18198c;
}
.InscriptionValueText
{
     font-family: Arial, Helvetica, Geneva, sans-serif;
     font-size: 10pt;
     color: #18198c;
     font-weight: bold;
}
.square {
  width: 1072px;
  height: 804px;
  background-image: url(IMG/DSCN4342deb_compress565kio.png);
  border: solid 2px;
  text-shadow: white 0px 0px 2px;
  font-size: 16px;
  background-size: 150px;
}
/* Layout */

* {
  box-sizing: border-box; /* pour maîtriser width et flex-basis */
}

html {
  display: flex; flex-direction: column; /* correction bug IE de min-height non appliqué à body */
}

body {
  display: flex; /* crée un contexte flex pour ses enfants */
  flex-direction: column; /* affichage vertical */
  min-height: 100vh; /* toute la hauteur du viewport */
  padding: 1em;
}

.wrapper {
  /* flex: 1 1 auto; /* occupe la hauteur restante */
  /* display: flex; /* crée un contexte flex pour ses enfants */
  display: grid;
    grid: "hd hd hd hd   hd   hd   hd   hd   hd" minmax(100px, auto)
    "sd sd sd main main main main main main" minmax(100px, auto)
    "ft ft ft ft   ft   ft   ft   ft   ft" minmax(100px, auto)
    / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;    
}

nav,
section,
aside {
  width: 40em;
}

article {
  flex: 1; /* occupe la largeur restante */
}

nav {
  order: -1; /* nav s'affiche en premier */
}
section {
  order: -1; /* nav s'affiche en premier */
}


/* Responsive (fenêtres de moins de 800px) */

@media (max-width: 800px) {
  .wrapper {
    flex-direction: column; /* affichage vertical */
  }
  nav,
  section,
  aside {
    width: auto; /* pour écraser la valeur 10em */
  }
  nav,
  section,
  aside,
  article {
    flex-basis: auto; /* pour écraser la valeur 0, due au flex: 1 */
  }
  nav {
    order: 0; /* nav reprend sa place */
  }
  section {
    order: 0; /* nav reprend sa place */
  }
}

/* Decorationbackground-size: 100% 100%; */

body {
  margin: 0;
  background: url(../IMG/DSCN4342deb_compress565kio.png);
  background: opacity:0.75;
  background-repeat: no-repeat;
  background-position: 50%50%; 
  background-attachment: fixed;
  color: #18198c;
  font-family: arial, sans-serif;
}
header,
nav,
section,
aside,
article,
footer {
  margin: 0.1em;
  padding: 0.7em;
  border-radius: 1000px;
}
header {
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 255, 0);
}
nav {
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 255, 0.1);
}

section {
  background-color: rgb(0, 0, 0);
  background-color: rgba(221, 215, 110, 0.1);
}
aside {
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 255, 0.1);
}
article {
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 255, 0.1);
}
footer {
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 255, 0);
}


.island img {
  max-width: 100%;
  *width: 100%;
}

.island * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/*
 * These rules will display DTs/DDs as columns.
 * Constructs must follow a key/value pair pattern.
 * The three last declarations are meant to kill white space between DTs/DDs
 * (result of inline-block styling)
 */

dl.island-inline-metadata {
  margin: 0 auto;
  letter-spacing: -0.31em;
  *letter-spacing:normal;
  word-spacing: -0.43em;
}

.island-inline-metadata dt {
  margin-right: -1px;
  width: 20.625%;
  font-weight: bold;
  padding-right: 0;
  word-wrap: normal;
}

.island-inline-metadata dd {
  width: 79.375%;
  padding-left: 40px;
}

dl.island-metadata-fields {
    width:100%;
}

.island-metadata dt,
.island-metadata dd {
    border-top:1px solid #e5e5e5;
}

.island-metadata dt.first,
.island-metadata dd.first {
    border-top:0;
}
/*
 * In this rule, we reset the white-space (see hack above)
 */
.island-inline-metadata dt,
.island-inline-metadata dd {
  display: inline-block;
  *display: inline;
  zoom: 1;
  letter-spacing: normal;
  word-spacing: normal;
  vertical-align: top;
  padding-top: 6px;
  padding-bottom: 4px;
  margin: 0;
}


.myForm{position: relative; width:calc(100% - 40px); margin: 20px; display: inline-block;}
.myForm input{display: none;}
.myForm label{float: left; line-height: 1.4}
.myForm label::before{
  width: 20px; 
  height: 20px; 
  border: 1px solid #2196F3;
  content: '';
  border-radius: 10px;
  float: left;
  margin:0 10px;
  cursor: pointer;
}
.myForm input[type=checkbox]:checked + label::after{display: block;}
.myForm label::after{
  display: none;
  top: 6px;
  left: 16px;
  content: '';
  color: #2196F3;
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #2196F3;
  border-radius: 5px;
  cursor: pointer;
}


.myForm1{position: relative; width:calc(100% - 40px); margin: 20px; display: inline-block;}
.myForm1 input{display: none;}
.myForm1 label{float: left; line-height: 1.4}
.myForm1 label::before{
  width: 20px; 
  height: 20px; 
  border: 1px solid #F44336;
  background-color: #F44336;
  content: '';
  float: left;
  margin:0 10px;
  cursor: pointer;
}
.myForm1 input[type=checkbox]:checked + label::after{display: block;}
.myForm1 label::after{
  display: none;
  top: 1px;
  left: 15px;
  content: '✔';
  color: #fff;
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  cursor: pointer;
}


.myForm2{position: relative; width:calc(100% - 40px); margin: 20px; display: inline-block;}
.myForm2 input{display: none;}
.myForm2 label{float: left; line-height: 1.4}
.myForm2 label::before{
  width: 20px; 
  height: 20px; 
  border: 1px solid #4CAF50;
  background-color: #4CAF50;
  border-radius: 2px;
  content: '';
  float: left;
  margin:0 10px;
  cursor: pointer;
}
.myForm2 input[type=checkbox]:checked + label::after{display: block;}
.myForm2 label::after{
  display: none;
  top: 0px;
  left: 17px;
  content: 'x';
  color: #fff;
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  cursor: pointer;
}


.myForm3{position: relative; width:calc(100% - 40px); margin: 20px; display: inline-block;}
.myForm3 input{display: none;}
.myForm3 label{float: left; line-height: 1.4}
.myForm3 label::before{
  width: 20px; 
  height: 20px; 
  border: 1px solid #9C27B0;
  background-color: #9C27B0;
  border-radius: 10px;
  content: '';
  float: left;
  margin:0 10px;
  cursor: pointer;
}
.myForm3 input[type=checkbox]:checked + label::after{display: block;}
.myForm3 label::after{
  display: none;
  top: 0px;
  left: 15px;
  content: '✔';
  color: #fff;
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  cursor: pointer;
}

.myForm4 input[type=checkbox]:checked + label::after{display: block;}
.myForm4 label::after{
  display: none;
  top: 0px;
  left: 15px;
  content: '✔';
  color: #fff;
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  cursor: pointer;
}