/*<style type="text/css">*/
body {
	margin:0; 
    padding:0;
    margin-top:0; 
}


.img-thumbnail {
 padding: 0;   
 max-width: 5%;
}


/*
.container {
	padding:0px; 
	width:100%;
	margin-top:0; 
	font-family:arial, helvetica, sans-serif; 
	text-align:left;
    border-radius:15px;
    background:#FFF;
	opacity:0.1;
}

.container:hover {
	opacity:1;
}*/

.popup {
	width:640px;
}

a:link, a:visited {
	color:#3366CC; 
	text-decoration:none;
} 
a:hover {
	color:#FF66CC; 
	text-decoration:underline;
}
a:active {
	color:#9999FF;
	text-decoration:none;
}


/*BOX & 2 COLUMN LAYOUT*/
.noimage_window {}
.window_error {border:1px dotted #FF0000; margin-right:5px; margin-bottom:8px;}
#error_box, #error_box2 {margin-right:5px; margin-bottom:8px;}

.window {
	margin:2px 5px 13px 5px;  
	border:1px solid #FFF; 
	border-bottom:1px solid #3366CC;
	background:linear-gradient(0deg, rgba(255, 255, 255, 0.8), rgba(51, 51, 51, 0.3));
    border-radius: 10px;
}

.window:hover {
	background:#FFF; 
	border:1px solid #3366CC;
	opacity:1;
}

#error_box .window, #error_box2 .window {
	padding-bottom:5px; 
	background:#FFCCCC;
	border-bottom:1px solid #FF0000;
}

.band  {width:412px; float:left; margin-right:5px; 
   background:linear-gradient(0deg, rgba(255, 255, 255, 0.8), rgba(51, 102, 204, 0.3));
    border-radius: 10px;}
/* begin hide from IE5-Mac \*/
* html .band {height: 1%; line-height:12px; display: inline;}
/* end hide */

.band2 {width:254px; float:right; margin-right:4px; }
/* begin hide from IE5-Mac \*/
* html .band2 {height: 1%; line-height:12px; display: inline;}
/* end hide */

.band3 {width:176px; float:left; margin-right:4px; }
/* begin hide from IE5-Mac \*/
* html .band3 {height: 1%; line-height:12px; display: inline;}
/* end hide */

.window_gleft 	{margin-left:420px;}
.window_gleft2	 {margin-right:262px;}
.window_gleft3	 {margin-left:184px;}


/*CLEAR*/
.clearband {background:#FFF; clear:both; margin-bottom:2px;}

/*FOOTER*/
.footer {margin:0px; padding:2px; border:1px dotted #FF99FF;}

/*IMAGE*/
img {border:0 none;}
img.pic1 {border:3px double #336699; margin:2px;}

img.lfloat {float:left;}
img.rfloat {float:right;}
img.notfix {border:3px double #666; margin:0px 4px 0px 0px;}

/*TABLE*/
table {border:0 none; border-collapse:collapse;}
table.full {width:99%;}

tr.tbCel1 	{background-color:#FFFFCC;}
tr.top_bd 	{border-top:1px solid #99CCFF; padding-bottom:1px;}
tr.bot_bd 	{border-bottom:1px solid #99CCFF; padding-bottom:1px;}
tr.bot_bd2 	{border-bottom:1px solid #99CCFF; padding-bottom:3px; padding-top:2px;}

td.top_bd 	{border-top:1px solid #99CCFF; padding-bottom:1px;}
td.bot_bd 	{border-bottom:1px solid #99CCFF; padding-bottom:1px;}
td.bot_bd2 	{border-bottom:1px solid #99CCFF; padding-bottom:3px; padding-top:2px;}
td.right_bd {border-right:1px solid #99CCFF; padding-right:1px;}

td.black {border:1px solid #000; padding:2px;}


/*BREAK*/
hr {width:98%; color:#CCCCCC; background-color:#CCCCCC; height:2px; border:0 none; margin:2px; margin-left:4px;}
hr.small 	{height:1px;}
hr.small2 	{height:1px; color:#f3b443; background-color:#f3b443;}
hr.clear 	{display:block; height:1px; clear:left;}
hr.clear2 	{display:block; height:1px; clear:left; visibility:hidden; margin-bottom:5px;}
hr.clearfix {display:block; height:1px; clear:left; visibility:hidden; margin:0px;}
.floatfix	{width:100%; float:left;} 


/*DIV*/
.gleft {float:left; width:110px; margin:2px; margin-right:4px; margin-bottom:0px;}
/* begin hide from IE5-Mac \*/
* html .gleft {height: 1%; line-height:12px;}
/* end hide */

.gleft2 {float:left; width:250px; margin:2px; margin-right:4px; margin-bottom:0px;}
/* begin hide from IE5-Mac \*/
* html .gleft2 {height: 1%; line-height:12px;}
/* end hide */

.gleft3 {float:left; width:100px; margin:2px; margin-right:4px; margin-bottom:0px;}
/* begin hide from IE5-Mac \*/
* html .gleft3 {height: 1%; line-height:12px;}
/* end hide */

.gright {margin-left:104px; padding-right:2px;} 
.gright2 {margin-left:270px; padding-right:2px;} 

/* DEFAULT PARAGRAPH - UL - FORM */
p, ul, form, textarea {
	color:#000; 
	font-size:13px; 
	font-family:arial,sans-serif; 
	padding:0px 3px 0px 3px;
	margin:0px;
}

p.nopad, form.nopad {
	padding:0px;
}

/* FORM CLASSES */
input[type=text], input[type=password], input[type=file], select, textarea {
	font-size:13px; 
	padding:1px 0px 1px 2px;
	border:1px solid #999999; 
	color:#777;
	}
input[type=text]:focus, input[type=password]:focus, input[type=file]:focus, select:focus, textarea:focus {
	font-size:13px; 
	padding:1px 0px 1px 2px;
	border:1px solid #999999; 
	background:#C4E1FF;
	color:#000;
	border-top:1px solid #3366CC;
	border-left:1px solid #3366CC;
	}
	
input.error, textarea.error, select.error {
	color:#FF0000; 
	background:#FFCCCC; 
	border:1px solid #FF0000; 
}

input.butt {
	font-size:9px; 
	color:#3366CC;
	margin:2px;  
	border:2px outset #999999;
	background:#FFF;
	text-transform:uppercase;
}

input.butt:hover {
	font-size:9px; 
	color:#3366CC;
	margin:2px;  
	border:2px outset #3366CC;
	background:#DDDDDD;
	text-transform:uppercase;
}


/* CAPTION */
.caption, form.caption {
	margin:1px 2px 1px 2px; 
	padding:4px;
	background:linear-gradient(0deg, rgba(255, 255, 255, 0.8), rgba(51, 102, 204, 0.3));
    border-radius: 10px;
	background-position: left bottom;
}

#logbar p.caption {
	margin:1px 2px 1px 2px; 
	border-bottom:1px dotted #3366CC;
	background:#FFF;
}

.caption:hover, form.caption:hover {
	margin:1px 2px 1px 2px; 
	padding:4px;
	background:#F0F0F0;
	opacity:1;
}




/* TAB_TITLE */
p.tab_title, form.tab_title {
	font-family:"Trebuchet MS", arial, sans-serif; 
	font-size:16px;
	font-weight:bold; 
	letter-spacing:-0.04em; 
	color:#3366CC; 
	margin:0px 0px 1px 0px;
	border-bottom:1px dotted #3366CC;
    background:linear-gradient(0deg, rgba(255, 255, 255, 0.8), rgba(51, 102, 204, 0.3));
    border-radius: 10px;
}
/* begin hide from IE5-Mac \*/
* html p.tab_title, * html form.tab_title {line-height:22px;}
/* end hide */

span.up {
	float:left;
	width:20px;
	height:14px;
	background:url('images/up1.gif') no-repeat 5px 2px;
}

p.tab_title a:link, p.tab_title a:visited {
	color:#3366CC; 
	text-decoration:none;
}
p.tab_title a:hover	{
	color:#FF66CC; 
	letter-spacing:0.08em; 
	text-decoration:none;
}
p.tab_title a:active {
	color:#3366CC; 
	text-decoration:underline;
}

#logbar p.tab_title {
	margin:0px 2px 1px 2px;
	background:linear-gradient(0deg, rgba(255, 255, 255, 0.3), rgba(55, 55, 55, 0.3));
    background-size: 55%;
}


p.tab_title:hover, form.tab_title:hover {
	background:#FFF;
}

p.tab_title::first-letter {
 	padding-top:1px;
	font-size:150%; 
	font-style:italic;
    font-weight:bold; 
	float:left;
}

p.tab_subtitle 	{color:#FFF; font-family:arial, sans-serif; font-size:10px; margin:4px; border:1px solid #000;}
p.tab_subtitle a:link, p.tab_subtitle a:visited 	{color:#FFCCFF;}
p.tab_subtitle a:hover  							{color:#FF9900;}
p.tab_subtitle a:active 							{color:#FFCCFF;}

p.tab_subtitle2 	{color:#990000; font-family:arial, sans-serif; font-size:12px; margin:4px; margin-top:0px; border:1px solid #000; border-top:0px; }
p.tab_subtitle2 a:link, p.tab_subtitle a:visited 	{color:#FFCCFF;}
p.tab_subtitle2 a:hover  							{color:#FF9900;}
p.tab_subtitle2 a:active 							{color:#FFCCFF;}

.dTc 		{color:#CC3300; font-size:14px; font-family:arial, sans-serif; margin:0;}
.dTc a:link, .dTc a:visited	{color:#CC3300; text-decoration:underline;}
.dTc a:hover 				{color:#FF3300;}
.dTc a:active 				{color:#CC3300;}

.note {font-size:11px;}
.footer .note {color:#669900;}
.footer .note a {color:#CC33CC;}
.footer .note a:hover {color:#CC3366;}
.footer .note a:active {color:#CC33CC;}

.error, .error a:link, .error a:visited, .error a:hover, .error a:active {color:#FF0000;}

.ext, a:link.ext , a:visited.ext , a:hover.ext , a:active.ext  {font-size:10px; color:#00CC66; background:#FFF; padding:0px 2px 0px 2px; text-decoration:none;}

.spamwar, a:link.spamwar, a:visited.spamwar, a:hover.spamwar, a:active.spamwar {font-size:11px; color:#99CC00; padding:0px; text-decoration:none; cursor:pointer;}

/* LIST ELEMENT */
OL 	{font-family:arial, sans-serif; margin:0; font-size:13px; list-style-position:inside;
	color:#000; padding:6px; padding-top:0px; padding-bottom:0px; }

OL.geo 		{list-style-type:decimal; padding-left:20px; margin:0; margin-bottom:10px;}
OL.let 		{list-style-type:upper-alpha; padding-left:32px;}
OL.wild 	{list-style-type:square;}
OL.wild2 	{list-style-type:circle;}
OL.none 	{list-style-type:none;}

/* SPAN */
.xcont			{background:#FFF; }
.xcont1			{background:#FFF; border:1px solid #3366CC;}
.xcont2			{background:#FFF;}
.xcont3			{background:#FFF;}
.xcont4			{background:#FFF;}
.xcont4:hover	{background:#FFFFCC;}
.xcont5			{background:#F0F0F0;}
.xcont6			{background:#FFF;}
.xcont7			{background:#FFF;}
.xcont8			{background:#FFF;}

.bcont  {border:4px solid #FF9900;}
.bcont1 {border:4px solid #336699;}

.fcont, a.fcont		{color:#FF66CC;}
.fcont1, a.fcont1	{color:#333333;} 
.fcont2, a.fcont2	{color:#3366CC;} 
.fcont3, a.fcont3	{color:#003366;} 
.fcont4, a.fcont4	{color:#330066;}
.fcont5, a.fcont5	{color:#663300;}
.fcont6, a.fcont6	{color:#660099;}
.fcont7	{color:#3366FF;}
.fcont8, a.fcont8	{color:#CC0000;}
.fcont9, a.fcont9	{color:#339900;}

.wider {letter-spacing:-0.04em;}

.xxl {font-size:20px;}
.xl {font-size:17px;}
.supnormal {font-size:14px;}
.normal {font-size:13px;}
.subnormal {font-size:11px;}
.ssl {font-size:10px;}
.xtiny {font-size:9px;}
.tiny {font-size:9px; font-family:times, sans-serif;}

.marg5 {margin-left:5px; }
.marg10 {margin-left:10px; }
.marg15 {margin-left:15px; }
.marg20 {margin-left:20px;}
.marg30 {margin-left:30px;}
.marg40 {margin-left:40px;}
.marg50 {margin-left:50px;}
.marg60 {margin-left:60px;}

.right {text-align:right;}
.cent {text-align:center;}
.smallcaps {font-variant:small-caps;}
.upper {text-transform:uppercase;}

/* DHTML window
----------------------------------------------------------------*/

.dhtmlwindow{
position: absolute;
border: 1px solid black;
visibility: hidden;
background-color: white;
}

.drag-handle{ /*CSS for Drag Handle*/
padding: 1px;
font: bold 14px Arial;
background-color: #EBEBEB;
text-align:left;
color: #3366CC;
cursor: move;
overflow: hidden;
width: auto;
}

.drag-handle .drag-controls{ /*CSS for controls (min, close etc) within Drag Handle*/
position: absolute;
left: 1px;
top: 2px;
cursor: pointer;
}

.drag-contentarea{ /*CSS for Content Display Area div*/
border-top: 1px solid gray;
background-color: white;
text-align:left;
color: black;
height: 150px;
padding: 2px;
overflow: auto;
}

.drag-statusarea{ /*CSS for Status Bar div (includes resizearea)*/
border-top: 1px solid gray;
background-color: #EBEBEB;
height: 13px; /*height of resize image*/
}


.drag-resizearea{ /*CSS for Resize Area itself*/
float: right;
width: 13px; /*width of resize image*/
height: 13px; /*height of resize image*/
cursor: nw-resize;
font-size: 0;
}


body {
/*  height: 100vh; */
  /* display: grid;*/
  /* place-items: center;*/
}

.slider {
  width: 100%;
  max-width: 800px;
  height: 350px;
  position: relative;
  overflow: hidden; /* <===  */
  border-radius: 15px;
  margin: 0 auto 0 auto;
}

.slide {
  width: 100%;
  max-width: 800px;
  height: 350px;
  position: absolute;
  transition: all 0.5s;
}

.slide img {
  width: 100%;
  /*height: 100%;*/
  /*object-fit: cover;*/
}
.slide img:hover {
  cursor: pointer;
}

.btn {
  position: absolute;
  width: 40px;
  height: 40px;
  padding: 10px;
  border: none;
  border-radius: 50%;
  z-index: 10px;
  cursor: pointer;
  background-color: #fff;
  font-size: 18px;
}
.btn:active {
  transform: scale(1.1);
}
.btn-prev {
  top: 45%;
  left: 2%;
}

.btn-next {
  top: 45%;
  right: 2%;
}

.rounded-circle {
  border-radius: 10%;
  opacity:1;
}


/*TETRIS*/
input {background-color:#e6e6e6; width:135px;}
.caseTB {background-color:#FFF; border:1px #f8cc8b inset; width:15px; height:15px; font-size:6px;}
.inpText {background-color:#CCC; width:70px; border:0px; border:0px; border-bottom:1px black solid; text-align:right;}
#aide {/*width:360px; height:400px; overflow:auto;*/ font-family:arial; font-size:11px; /*position:absolute;*/ display:none;}
#scoreboard {/*width:380px; height:400px; overflow:auto;*/ font-family:arial; font-size:11px; /*position:absolute;*/}
p.para {font-size:11px;}
p.para:first-letter {font-weight:bold;}

/* MUSIC PLAYER */
#music, #audio-player {width:10%; padding:0; margin:0; text-align:left; font-size:0.8em; }
#music {background-position: center; 
  background-repeat: no-repeat; background-size: contain; }
#audio-player {position:absolute; right:1%; bottom:1%;}
#music ul, #audio-player ul {margin:0px; padding:0px; color:#666; text-align:right; list-style-type:none;}
#music ul li, #audio-player ul li {display:inline;}
#music ul li a, #audio-player ul li a {background: none repeat scroll 0 0 #EBEBEB; border: 4px double #000000; border-radius:30%; color:#666666; font-size:130%; padding:1%; text-align: center; text-decoration: none;}
#music ul li a {padding:3%;}
#music ul li a:hover, #audio-player ul li a:hover {border:1% double #bbb; color:#aaa; text-decoration:none;background:#40777D;}
#music li a {color:green;}
#music li a {color:red;}