body {
	background-image  : url(egami/fond.png);
	background-color  : black;
	color             : white;
	font-size         : 16px;
	padding           : 0;
	margin            : 0 auto;
  text-align        : center;
}

img {
  border            : 0;
}

a {
  text-decoration   : none;
}

p {
  line-height       : 22px;
  padding           : 10px;
}

div#header {
  margin-top        : 30px;
}

div#menu {
  padding           : 40px 20px;
  text-align        : center;
} div#menu a {
  color             : rgb(254, 255, 241);
  padding           : 5px 10px;
  font-size         : 28px;
  margin            : 5px;
} div#menu a:hover {
  color             : rgb(255, 50, 50);
	filter            : alpha(opacity:100);
	-khtml-opacity    : 1;
	-moz-opacity      : 1;
	opacity           : 1;
}

div#accueil {
	margin            : 0 auto;
  padding           : 20px 50px;
} div#accueil a {

}

/***************************************************************/
/******************** module d'aide aux énigmes *******************/
/***************************************************************/
div.navi {
	position: absolute;
	top: 261px;
	left: 5px;
	width: 110px;
	height: 297px;
	border: solid 0px #333333;
	opacity: 0.75;
	filter: alpha(opacity:75);
	-khtml-opacity: 0.75;
	-moz-opacity: 0.75;
	}

div.vignette {
	position: relative;
	float: left;
	left: 5px;
	top: 5px;
	width: 100px;
	height: 100px;
	border: solid 1px #333333;
	}

div.explication {
	position: relative;
	float: left;
	top: 5px;
	left: 10px;
	width: 430px;
	height: 287px;
	border: solid 1px #333333;
	overflow: auto;
	}

div.boff {
	position: absolute;
	top: 261px;
	left: 682px;
	width: 110px;
	height: 297px;
	border: solid 1px #333333;
	background: #222222;
	opacity: 0.75;
	filter: alpha(opacity:75);
	-khtml-opacity: 0.75;
	-moz-opacity: 0.75;
	}

div.compteur {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	top: 60px;
	width: 800px;
	text-align: center;
	}
/***************************************************************/
/************************** identification ************************/
/***************************************************************/
div.acces {
	position: relative;
	margin: 0 auto;
	padding: 10px 20px;
	top: 0px;
	height: 135px;
	border: solid 1px #333333;
	text-align: center;
	overflow: hidden;
}

div.login{
	position: relative;
	top: 10px;
	}

div.pass{
	position: relative;
	top: 20px;
	}

div.synchro{
	position: relative;
	top: 25px;
	}

div.click{
	position: relative;
	top: 35px;
	}

div.inscription{
	position: relative;
	top: 5px;
	}

div.Erreur{
	position: relative;
	color: #FF0000;
	font-size: 14px;
	top : 40px;
	}

/***************************************************************/
/**************************** couleurs ***************************/
/***************************************************************/
.bleu {
	color: #0099FF;
	}

.vert {
	text-decoration: none;
	color: #22DD55;
	}

.jaune {
	text-decoration: none;
	color: #DDDD22;
	}

.rouge {
	text-decoration: none;
	color:#FF0000;
	}

/***************************************************************/
/***************************************************************/
/***************************************************************/
hr {
	margin: 10px;
	border: 0px;
	border-top: solid 1px #333333;
	}

select {
	height: 299px;
	}
.enigme {
	text-align: center;
	font-size: 13px;
	font-weight: bold;
	}

/* Block display */
.hide    { display: none; }
.show    { display: ; }
.block   { display: block; }
.inline  { display: inline-block; }
.nowrap  { white-space: nowrap; }

/* Text alignment */
.left    { text-align: left; }
.left_20 { text-align: left; padding-left: 20px; }
.left_40 { text-align: left; padding-left: 40px; }
.right   { text-align: right; }
.center  { text-align: center; }
.top     { vertical-align: top; }
.top_20  { padding-top: 20px; }
.middle  { vertical-align: middle; }
.bottom  { vertical-align: bottom; }
.fleft   { float: left; }
.fright  { float: right; }

/* Width */
.w_10p   { width:    10%; }
.w_20p   { width:    20%; }
.w_30p   { width:    30%; }
.w_40p   { width:    40%; }
.w_45p   { width:    45%; }
.w_50p   { width:    50%; }
.w_60p   { width:    60%; }
.w_70p   { width:    70%; }
.w_80p   { width:    80%; }
.w_90p   { width:    90%; }
.w_95p   { width:    95%; }
.w_100p  { width:   100%; }

/* Size */
.size_10 { font-size: 10px; }
.size_12 { font-size: 12px; }
.size_14 { font-size: 14px; }
.size_16 { font-size: 16px; }
.size_18 { font-size: 18px; }
.size_20 { font-size: 20px; }
.size_22 { font-size: 22px; }
.size_24 { font-size: 24px; }
.size_26 { font-size: 26px; }
.size_28 { font-size: 28px; }
.size_30 { font-size: 30px; }

/* Button */
.btn    {
  padding: 2px 6px;
  font-size: 10px;
  cursor: pointer;
}
.btn_12 {
  padding: 2px 7px;
  font-size: 12px;
  cursor: pointer;
}
.btn_14 {
  padding: 3px 8px;
  font-size: 14px;
  cursor: pointer;
}
.btn_16 {
  padding: 3px 9px;
  font-size: 16px;
  cursor: pointer;
}
.btn_18 {
  padding: 3px 10px;
  font-size: 18px;
  cursor: pointer;
}
.btn_20 {
  padding: 4px 11px;
  font-size: 20px;
  cursor: pointer;
  border: 0;
}
.btn_24 {
  padding: 4px 11px;
  font-size: 24px;
  cursor: pointer;
}
.btn_30 {
  padding: 5px 15px;
  font-size: 30px;
  cursor: pointer;
}

/* Transition */
.transition_01 {
  -webkit-transition: 0.1s ease-in-out;
  -moz-transition: 0.1s ease-in-out;
  -o-transition: 0.1s ease-in-out;
  transition: 0.1s ease-in-out;
}
.transition_02 {
  -webkit-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}
.transition_05 {
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}
.transition_10 {
  -webkit-transition: 1.0s ease-in-out;
  -moz-transition: 1.0s ease-in-out;
  -o-transition: 1.0s ease-in-out;
  transition: 1.0s ease-in-out;
}
.transition_20 {
  -webkit-transition: 2.0s ease-in-out;
  -moz-transition: 2.0s ease-in-out;
  -o-transition: 2.0s ease-in-out;
  transition: 2.0s ease-in-out;
}

/* Border Radius */
.radius_0  {
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
}
.radius_2  {
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}
.radius_4  {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.radius_6  {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
.radius_8  {
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}
.radius_10 {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
.radius_20 {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}

.radius_40 {
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  border-radius: 40px;
}

/* Effects */
.shadow   {
  -webkit-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.6);
  box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.6);
}
.light    {
  background: white;
  -webkit-box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);
  -moz-box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 5px 3px rgba(255, 255, 255, 1);
}
.hl_black {
	background: black;
  -webkit-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.6);
  box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.6);
}

/* Opacity */
.opacity_10  {
  -moz-opacity: 0.1;
  -khtml-opacity: 0.1;
  -ms-filter:"alpha(opacity=10)";
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=10);
  filter:alpha(opacity=10);
  opacity:0.1;
}
.opacity_25  {
  -moz-opacity: 0.25;
  -khtml-opacity: 0.25;
  -ms-filter: "alpha(opacity=25)";
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=25);
  filter: alpha(opacity=25);
  opacity: 0.25;
}
.opacity_40  {
  -moz-opacity: 0.40;
  -khtml-opacity: 0.40;
  -ms-filter: "alpha(opacity=40)";
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
  filter: alpha(opacity=40);
  opacity: 0.40;
}
.opacity_50  {
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  -ms-filter: "alpha(opacity=50)";
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
  filter: alpha(opacity=50);
  opacity: 0.5;
}
.opacity_75  {
  -moz-opacity: 0.75;
  -khtml-opacity: 0.75;
  -ms-filter: "alpha(opacity=75)";
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=75);
  filter: alpha(opacity=75);
  opacity: 0.75;
}
.opacity_100 {
  -moz-opacity: 1;
  -khtml-opacity: 1;
  -ms-filter: "alpha(opacity=100)";
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
  filter: alpha(opacity=100);
  opacity: 1;
}

/* Border color */
.border_white       { border: solid 1px white;       }
.border_grey        { border: solid 1px grey;        }
.border_lightgrey   { border: solid 1px lightgrey;   }
.border_dark        { border: solid 1px #111111;     }
.border_black       { border: solid 1px black;       }
.border_blue        { border: solid 1px #188fde;     }
.border_cyan        { border: solid 1px #4690B2;     }
.border_green       { border: solid 1px #18de8f;     }
.border_purple      { border: solid 1px purple;      }
.border_red         { border: solid 1px #d92929;     }
.border_yellowgreen { border: solid 1px yellowgreen; }

/* Text color */
.white        { color: white;       }
.grey         { color: grey;        }
.lightgrey    { color: white;       }
.dark         { color: #111111;     }
.black        { color: black;       }
.blue         { color: #188fde;     }
.cyan         { color: #4690B2;     }
.green        { color: #18de8f;     }
.purple       { color: purple;      }
/* .red          { color: #d92929;     } */
.red          { color: red;         }
.yellowgreen  { color: yellowgreen; }

/* Background color */
.back_white       { background: white;       color: black; }
.back_mortvif   { background: rgb(22, 28, 29); color: white; }
.back_darkwhite   { background: #cacac8;     color: black; }
.back_grey        { background: grey;        color: white; }
.back_lightgrey   { background: #4a4a48;     color: lightgrey; }
.back_dark        { background: #000;        color: #cecfd0; }
.back_black       { background: #454545;     color: white; }
.back_blue        { background: #2a3e94;     color: white; }
.back_cyan        { background: #4690B2;     color: white; }
.back_green       { background: #18de8f;     color: white; }
.back_purple      { background: purple;      color: white; }
.back_red         { background: #d92929;     color: white; }
.back_yellowgreen { background: yellowgreen; color: white; }
.back_facebook    { background: #3A5899;     color: white; }

/* with gradient */
.gradient_back_yellow_green     {
  color: white;
  background: green;

  background: -webkit-linear-gradient(green, yellowgreen 50%, yellow);
  background:    -moz-linear-gradient(green, yellowgreen 50%, yellow);
  background:     -ms-linear-gradient(green, yellowgreen 50%, yellow);
  background:      -o-linear-gradient(green, yellowgreen 50%, yellow);
  background:         linear-gradient(green, yellowgreen 50%, yellow);
}
.gradient_back_blue             {
  color: white;
  background: #188fde;

  background: -webkit-linear-gradient(#188fde, #05131c);
  background:    -moz-linear-gradient(#188fde, #05131c);
  background:     -ms-linear-gradient(#188fde, #05131c);
  background:      -o-linear-gradient(#188fde, #05131c);
  background:         linear-gradient(#188fde, #05131c);
} .gradient_back_blue:hover {
  color: white;
  background: #67bbeb;

  background: -webkit-linear-gradient(#67bbeb, #2774a8);
  background:    -moz-linear-gradient(#67bbeb, #2774a8);
  background:     -ms-linear-gradient(#67bbeb, #2774a8);
  background:      -o-linear-gradient(#67bbeb, #2774a8);
  background:         linear-gradient(#67bbeb, #2774a8);
}
.gradient_back_green            {
  color: white;
  background: #18de8f;

  background: -webkit-linear-gradient(#18de8f, #051c13);
  background:    -moz-linear-gradient(#18de8f, #051c13);
  background:     -ms-linear-gradient(#18de8f, #051c13);
  background:      -o-linear-gradient(#18de8f, #051c13);
  background:         linear-gradient(#18de8f, #051c13);
} .gradient_back_green:hover {
  color: white;
  background: #67ebbb;

  background: -webkit-linear-gradient(#67ebbb, #27a874);
  background:    -moz-linear-gradient(#67ebbb, #27a874);
  background:     -ms-linear-gradient(#67ebbb, #27a874);
  background:      -o-linear-gradient(#67ebbb, #27a874);
  background:         linear-gradient(#67ebbb, #27a874);
}
.gradient_back_red              {
  color: white;
  background: #d92929;

  background: -webkit-linear-gradient(#d92929, #570f0f);
  background:    -moz-linear-gradient(#d92929, #570f0f);
  background:     -ms-linear-gradient(#d92929, #570f0f);
  background:      -o-linear-gradient(#d92929, #570f0f);
  background:         linear-gradient(#d92929, #570f0f);
} .gradient_back_red:hover {
  color: white;
  background: #fc3c3c;

  background: -webkit-linear-gradient(#fc3c3c, #ad2323);
  background:    -moz-linear-gradient(#fc3c3c, #ad2323);
  background:     -ms-linear-gradient(#fc3c3c, #ad2323);
  background:      -o-linear-gradient(#fc3c3c, #ad2323);
  background:         linear-gradient(#fc3c3c, #ad2323);
}
.gradient_back_facebook         {
  color: white;
  background: #3A5899;

  background: -webkit-linear-gradient(#3A5899, #1A3879);
  background:    -moz-linear-gradient(#3A5899, #1A3879);
  background:     -ms-linear-gradient(#3A5899, #1A3879);
  background:      -o-linear-gradient(#3A5899, #1A3879);
  background:         linear-gradient(#3A5899, #1A3879);
}
.gradient_back_black            {
  color: white;
  background: #454545;

  background: -webkit-linear-gradient(#454545, #000000);
  background:    -moz-linear-gradient(#454545, #000000);
  background:     -ms-linear-gradient(#454545, #000000);
  background:      -o-linear-gradient(#454545, #000000);
  background:         linear-gradient(#454545, #000000);
} .gradient_back_black:hover {
  color: white;
  background: #808080;

  background: -webkit-linear-gradient(#808080, #232323);
  background:    -moz-linear-gradient(#808080, #232323);
  background:     -ms-linear-gradient(#808080, #232323);
  background:      -o-linear-gradient(#808080, #232323);
  background:         linear-gradient(#808080, #232323);
}
.gradient_back_white            {
  color: white;
  background: #808080;

  background: -webkit-linear-gradient(#232323, #808080);
  background:    -moz-linear-gradient(#232323, #808080);
  background:     -ms-linear-gradient(#232323, #808080);
  background:      -o-linear-gradient(#232323, #808080);
  background:         linear-gradient(#232323, #808080);
} .gradient_back_white:hover  {
  color: black;
  background: #454545;

  background: -webkit-linear-gradient(#ffffff, #454545);
  background:    -moz-linear-gradient(#ffffff, #454545);
  background:     -ms-linear-gradient(#ffffff, #454545);
  background:      -o-linear-gradient(#ffffff, #454545);
  background:         linear-gradient(#ffffff, #454545);
}
.gradient_back_dark             {
  color           :   white;
  background      :   #111111;

  background      :   -webkit-linear-gradient(#111111, #666666);
  background      :      -moz-linear-gradient(#111111, #666666);
  background      :       -ms-linear-gradient(#111111, #666666);
  background      :        -o-linear-gradient(#111111, #666666);
  background      :           linear-gradient(#111111, #666666);
} .gradient_back_dark:hover {
  color           :   white;
  background      :   #5b5b5b;

  background      :   -webkit-linear-gradient(#5b5b5b, #898989);
  background      :      -moz-linear-gradient(#5b5b5b, #898989);
  background      :       -ms-linear-gradient(#5b5b5b, #898989);
  background      :        -o-linear-gradient(#5b5b5b, #898989);
  background      :           linear-gradient(#5b5b5b, #898989);
}
.gradient_back_grey             {
  color: white;
  background: #767676;

  background: -webkit-linear-gradient(#434343, #767676);
  background:    -moz-linear-gradient(#434343, #767676);
  background:     -ms-linear-gradient(#434343, #767676);
  background:      -o-linear-gradient(#434343, #767676);
  background:         linear-gradient(#434343, #767676);
} .gradient_back_white:hover  {
  color: black;
  background: #454545;

  background: -webkit-linear-gradient(#ffffff, #454545);
  background:    -moz-linear-gradient(#ffffff, #454545);
  background:     -ms-linear-gradient(#ffffff, #454545);
  background:      -o-linear-gradient(#ffffff, #454545);
  background:         linear-gradient(#ffffff, #454545);
}

/* Icons */
.icon_16  {
  display         :   inline-block;
  margin          :   2px 5px;
  height          :   16px;
  width           :   16px;
  vertical-align  :   middle;
}
.icon_24  {
  display         :   inline-block;
  margin          :   2px 5px;
  height          :   24px;
  width           :   24px;
  vertical-align  :   middle;
}
.icon_32  {
  display         :   inline-block;
  margin          :   5px 10px;
  height          :   32px;
  width           :   32px;
  vertical-align  :   middle;
}
.icon_48  {
  display         :   inline-block;
  margin          :   5px 10px;
  height          :   48px;
  width           :   48px;
  vertical-align  :   middle;
}
.icon_64  {
  display         :   inline-block;
  margin          :   5px 10px;
  height          :   64px;
  width           :   64px;
  vertical-align  :   middle;
}
.icon_80  {
  display         :   inline-block;
  margin          :   5px 10px;
  height          :   80px;
  width           :   80px;
  vertical-align  :   middle;
}
.icon_96  {
  display         :   inline-block;
  margin          :   5px 10px;
  height          :   96px;
  width           :   96px;
  vertical-align  :   middle;
}
.icon_112 {
  display         :   inline-block;
  margin          :   5px 10px;
  height          :   112px;
  width           :   112px;
  vertical-align  :   middle;
}
.icon_128 {
  display         :   inline-block;
  margin          :   5px 10px;
  height          :   128px;
  width           :   128px;
  vertical-align  :   middle;
}

.square_48  {
  height          :   48px;
  width           :   48px;
} .square_48 img {
  max-height      :   48px;
  max-width       :   48px;
}
.square_64  {
  height          :   64px;
  width           :   64px;
} .square_64 img {
  max-height      :   64px;
  max-width       :   64px;
}
.square_80  {
  height          :   80px;
  width           :   80px;
} .square_80 img {
  max-height      :   80px;
  max-width       :   80px;
}
.square_90  {
  height          :   90px;
  width           :   90px;
} .square_90 img {
  max-height      :   90px;
  max-width       :   90px;
}
.square_100 {
  height          :   100px;
  width           :   100px;
} .square_100 img {
  max-height      :   100px;
  max-width       :   100px;
}
.square_110 {
  height          :   110px;
  width           :   110px;
} .square_110 img {
  max-height      :   110px;
  max-width       :   110px;
}
.square_120 {
  height          :   120px;
  width           :   120px;
} .square_120 img {
  max-height      :   120px;
  max-width       :   120px;
}

.preview_32 {
  padding         : 1px;
  max-height      : 32px;
  max-width       : 16px;
}
.preview_48 {
  padding         : 2px;
  max-height      : 48px;
  max-width       : 32px;
}
.preview_60 {
  padding         : 2px;
  max-height      : 60px;
  max-width       : 48px;
}
.preview_100 {
  padding         : 3px;
  max-height      : 100px;
  min-width       : 50px;
}
.preview_150 {
  padding         : 5px;
  min-width       : 100px;
  max-height      : 150px;
  max-width       : 340px;
}
.preview_200 {
  padding         : 5px;
  max-height      : 200px;
  min-width       : 150px;
  max-width       : 340px;
}
.preview_250 {
  padding         : 5px;
  max-height      : 250px;
  min-width       : 200px;
  max-width       : 340px;
}
.preview_300 {
  padding         : 5px;
  max-height      : 300px;
  min-width       : 250px;
  max-width       : 340px;
}