html
{
}

body
{
	background-color: #CCF;
	color: #225;
	font-family: verdana, "Century Gothic", helvetica, arial, sans-serif;
	line-height: normal; /*1.5; /* adapt to your design */
}

h1
{
  text-align: center;
  margin-bottom: 0;
}

h2
{
  /*background-color: #AAF;*/ 
  background: linear-gradient(to bottom, #BBF, #CCF);
  text-align: center;
  /*border-bottom: 1px solid #99C;*/
  border-top: 1px solid #AAC;
}

span.acc
{
  position:relative;
  display: inline-block;
  height: 2.5em;
  /*float: left;*/
  text-align: center;
}
.acc>div
{
  display:block;
}
.acc>div
{
  text-align: center;
  border:none;
  border-collapse: separate;
  border-spacing: 0 0;
  /*empty-cells: hide;*/
  border: 1px;
  height:5px;
  top:40%;
  position:absolute;
}
.acc>div:nth-of-type(1)
{ 
  width: 40%;
  left:0% ;
  border-style: none none solid solid;
  border-bottom-left-radius: 4px
}
.acc>div:nth-of-type(2)
{
  margin-top: 5px;
  width: 10%;
  left:40% ;
  border-style: solid solid none none;
  border-top-right-radius: 4px
}
.acc>div:nth-of-type(3)
{
  margin-top: 5px;
  width: 10%;
  left:50% ;
  border-style: solid none none solid;
  border-top-left-radius: 4px
}
.acc>div:nth-of-type(4)
{
  width: 40%;
  left: 60%;
  border-style:none solid solid none;
  border-bottom-right-radius: 4px ;
}
.acc>div:nth-of-type(5)
{
  width: 100%;
  left:0% ;
  top: 70%;
  text-align:center;
  font-size:small;
  border-style:none;
  height:auto;
}

table.std
{
  margin:  auto auto 10px auto; /*10 px for shadow*/
  min-width: 360px;  
  max-width: 1000px;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 0;
  /*empty-cells: hide;*/
}


table.std tr.sep
{
  height: 8px;
}
  table.std tr th, table.std tr td
  {
    padding: 10px 15px; 
    margin-bottom: 10px;
    /*border: none; */
    border: 1px solid #eed;/* debug */
    background: #ffe;
	  color: #552;
    box-shadow: 5px 5px 5px rgba( 0, 0, 0, 0.25);
 }
 table.std tr.fact td
  {
    background: #ff8;
    border: 1px solid #ee7;/* debug */
    color: #554;
    /*box-shadow: 5px 5px 5px rgba( 0, 0, 0, 0.25);*/
  }
  table.std tr.warn td
  {
    background: #f88;
    border: 1px solid #e77;/* debug */
    color: #544;
    /*box-shadow: 5px 5px 5px rgba( 0, 0, 0, 0.25);*/
  }
  

table.std tr.outlined th
{
  background: #eeb;
  border: 1px solid #dda; 
}



div.grey table.std td 
{
  background: #ddd;
  border: 1px solid #ccc;/* debug */
  color: #555;
}
    
  table.std tr:first-child td:first-child, table.std tr:first-child th:first-child
  {
    border-top-left-radius: 8px; 
  }
  table.std tr:first-child td:last-child, table.std tr:first-child th:last-child
  {
    border-top-right-radius: 8px; 
  }
  
  table.std tr:last-child td:last-child, table.std tr:last-child th:last-child
  {
    border-bottom-right-radius: 8px; 
  }
  table.std tr:last-child td:first-child, table.std tr:last-child th:first-child
  {
    border-bottom-left-radius: 8px; 
  }

table.nav-l, table.nav-lf, table.nav-r
{
  table-layout: fixed;
  text-align: center;
  padding: 10px 15px;
}
table.nav-l, table.nav-lf
{
  margin: 0px 0px auto 0px
}
table.nav-lf
{
  float:left;
}
table.nav-r
{
  margin: 0px 0px 0px auto
}
table.nav-l td, table.nav-lf td
{
  /*border: 1px solid #eed;/* debug */
  width: 25%;
  min-width: 75px;
}

h2
{
  margin: 5px auto 5px auto;
}

h2.show:after, h2.hide:after
{
  content: '\0394'; /*delta*/ /*'\25B6'; triangle*/ 
  font-family: "monospace";
  /*content: '\039b'; /* lambda */  
  /*content: '\2191'; /* fleche vers le haut*/
  font-size: 1.5rem;
  margin-left: 1rem;
  margin-right: 1rem;
  display: inline-block;
  transition: transform 0.75s;
}

h2.hide:after
{
/*  transform: rotate(0deg);*/
  transform: rotate(90deg);
}

h2.show:after
{
 /* transform: rotate(90deg);*/
  transform: rotate(180deg);
}


h2.hide + div
{
  position: relative;
  transition: max-height 0.75s;
  max-height:0;
  overflow-y:hidden;
}
h2.show + div
{
  position: relative;
  transition: max-height 0.75s;
  max-height:1000px; /*pas terrible, mais bon...*/
  overflow-y:hidden;
}

.tag
{
  background: #F84; 
  background: linear-gradient(to right bottom, #FA6, #D84); /* Orange */
  border-width: 1px;
  border-style: solid;
  border-color: #E73;
  border-radius: 16px;
  color: #530;
  padding: 5px 10px;
  text-decoration: none;
  display: inline-block;
  margin: 2px;
  outline:none; /* no outline if focus */
  position: relative;
}
div.grey table.std td .tag
{
  background: linear-gradient(to right bottom, #BBB, #999); /* Orange */
  border: 1px solid #ccc;/* debug */
  color: #555;
}
.hidden_tip
{
  visibility: hidden; 
  opacity: 0
}
.visible_tip
{
  visibility: visible; 
  opacity: 1;
}

 .tag .visible_tip, .tag .hidden_tip {
  width: 100px;
  background-color: #225;
  color: #ccf;
  text-align: center;
  border-radius: 5px;
  padding: 5px 10px;
  
  position: absolute;
  z-index: 1;
  bottom: 130%;
  margin-left: -60px;
  left: 50%; //try to center to the tag
}

.visible_tip::after, .hidden_tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%; //half of the tip text
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #225 transparent transparent transparent;
}
/*
.tag:hover .hidden_tip
{
  visibility: visible; 
  opacity: 1;
}
*
div.grey span.tag
{
  background: #999; 
  background: linear-gradient(to right bottom, #999, #777); /* Orange */
  color: #333;
  border-color: #888;
}
div#ChatWindow {
  background-color: #FCC;
  color: #F44;
}

input[type] {
  background: #FFFFFF; /* White */
  border-width: 0px;
  border-style: solid;
  border-color: #000000;
  border-radius: 8px;
  color: #000000; /* Black */;
  padding: 5px 10px;
  text-decoration: none;
  display: inline-block;
  margin: 2px;
  font-size:inherit;
  outline:none; /* no outline if focus */
}

input[type=button] {
  background: linear-gradient(to right bottom, #3D3, #0A0); /* Green */
  border-color: #005006;
  color: #050; /* Very Dark Green */;
  text-align: center;
  text-decoration: none;
  box-shadow: 2px 2px 2px rgba( 0, 0, 0, 0.5); 
}
input[type=button]:active, input[type=button].pushed {
  background: linear-gradient(to right bottom, #5F5, #2C2); /* Light Green */
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 2px rgba( 0, 0, 0, 0.5);   
}
input[type=button]:active {
  background: linear-gradient(to right bottom, #5F5, #2C2); /* Light Green */
}

input[type=button].red {
  background: linear-gradient(to right bottom, #D33, #A00); /* Red */
  color:#500;
}

input[type=button].red:active {
  background: linear-gradient(to right bottom, #F55, #C22); /* Light Red */
}
input[type=button]:disabled {
  background: linear-gradient(to right bottom, #999, #666); /* Grey */
  border-color: #333333;
  color: #333333; /* Very Dark Green */;
}
input[type=text] {
  border-color: #444400;
  background: linear-gradient(to right bottom, #ED3, #FE8);
  color: #444400;
  box-shadow: inset 2px 2px 2px rgba( 0, 0, 0, 0.5); 
}
input[type=text]:focus {
  background: linear-gradient(to right bottom, #FE8, #FFD);
  color: #444400;
}

img.round
{
  border-radius: 50%;
}