body
{
 color : #FFFF00;
 background-color : #000032;
 background-image : url("../pics/texture/stars02.jpg");
 background-attachment : fixed;
 background-repeat : repeat;
}

header
{
 background-color : rgba(0, 100, 0, 0.6);
 border : solid 1px #00FF00;
 top : 0px;
 left : 0px;
 width : 100%;
 height : 70px;
 position : fixed;
 margin : 0px;
 text-align : center;
 vertical-align : middle;
 z-index : 2;
 transition : height 5s 3s;
}

footer
{
 background-image : linear-gradient(to right, transparent 5%, rgba(0, 200, 150, 0.8), transparent 95%);
 bottom : 0px;
 color : #FFFFFF;
 font-size : 0.9em;
 left : 0px;
 margin : 0px;
 padding : 5px;
 position: fixed;
 text-align : center;
 width : 100%;
}

nav
{
 width : 170px;
 top : 75px;
 left : 0px;
 font-size : 12px;
 position : fixed;
 padding : 0px;
 z-index : 2;
 transition: left 5s 3s ease-out, border-color 3s 2s, background-color 2s 4s, top 5s 3s;
}

section
{
 background-color : rgba(0, 0, 128, 0.5);
 border : solid 1px rgba(200, 0, 0, 0.5);
 display : flex;
 flex-direction : row;
 flex-wrap : wrap;
 justify-content : space-between;
 margin-bottom : 10px;
 min-width : 480px;
 transition : margin-left 5s 3s, margin-top 5s 3s;
}

body section:first-of-type
{
 margin-top : 75px;
}

section.gauche
{
 margin-left : 180px;
}

section.avecImage
{
 flex-wrap : wrap-reverse;
 justify-content : space-around;
}

section article
{
 min-width : 460px;
 border : solid 1px rgba(200, 200, 0, 0.5);
 margin : 3px;
}

section table
{
 margin : 3px;
}

article:first-child
{
 width : 100%;
}

section article.semi
{
 width : 45%;
 min-width : 500px;
}

section article.artiFlex
{
 display : flex;
 flex-wrap : wrap;
 justify-content : space-around;
 flex : 1;
}

section article.artiFlex p, section article.artiFlex ul
{
 width : 100%;
}

p
{
 border : solid 1px #0000AA;
 margin-left : 4px;
}

section article p
{
 border : dotted 1px #0000FF;
 color : #FFFF00;
}

a
{
 transition : color 3s 2s, background-color 6s 12s;
}

a:link
{
 color : #00FF00;
}

a:visited
{
 color : #FF0000;
}

a:hover
{
 color : #FFFFFF;
 background-color : rgba(0, 0, 255, 0.6);
 transition : none;
}

a[href*="kipedi"]
{
 background-color : rgba(255, 255, 255, 0.3);
}

a[href*="tube"]
{
 background-color : rgba(0, 0, 0, 1);
}

table
{
 border : solid 1px #AAAA00;
 border-collapse : collapse;
 background-color : rgba(0, 22, 100, 0.6);
 border-spacing : 3px;
 animation-name : progressOpacity;
 animation-duration : 10s;
 min-width : 450px;
}

.tableOpaque
{
 opacity : 1;
}

table tr th
{
 border-width : 1px;
 border-style : dotted;
}

table tr td
{
 border : solid 1px #008080;
 vertical-align : top;
 padding : 10px;
}

table tr td#cadran:hover
{
 color : #00FF00;
 background-color : #00AAAA;
}

.tete
{ 
 border-width : 1px;
 border-style : solid;
 border-color : #FFFFFF;
 background-color : #003232;
 background-repeat : repeat-x;
 background-image : url('../pics/solLunaire02.jpg');
}

.noire
{ 
 border-width : 1px;
 border-style : dotted;
 border-color : #484848;
 background-color : rgba(0, 0, 0, 0.6);
 min-width : 10px;
 text-align : center;
 padding : 3px;
}

.blanche
{ 
 border-style : none;
 background-color : rgba(255, 255, 255, 0.6);
 min-width : 10px;
 padding : 3px;
}

.verte
{ 
 background-color : rgba(0, 100, 0, 0.6);
}

.rouge
{ 
 background-color : rgba(72, 0, 0, 0.6);
}

.alerte
{ 
 border-width : 1px;
 border-style : solid;
 border-radius : 0px;
 border-color : #FF0000;
 background-color : rgba(50, 0, 50, 0.6);
}

.discrete
{
 border-style : none;
 border-radius : 0px;
}

h1
{
 color : #FFFF00;
 text-align : center;
 text-shadow : 5px 5px 2px #008064;
}

h2
{
 color : #00FFAA;
}

h2:hover
{
 text-shadow : 4px 4px 2px #008064;
}

input
{
 transition : box-shadow 10s 5s linear, background-color 3s 7s;
}

input[type=range]:focus
{
 box-shadow : 4px 4px 6px #00AAFF;
 transition : none;
}

input[type=button]
{
 background-color : #CCCCCC;
 border-style : outset;
}

input[type=button]:hover
{
 background-color : #FFFFAA;
 box-shadow : 2px 2px 3px #00CCAA;
 transition : none;
}

.remarque
{
 color : #FFFFFF;
}

em
{
 color : #FFFFAA;
}

@keyframes progressOpacity
{
 from
 {
  opacity:0.1;
 }
 
 to
 {
  opacity:1;
 }
}

@media screen and (max-width : 1100px)
{
 header
 {
  height : 40px;
 }
 
 nav
 {
  background-color : rgba(0, 64, 192, 0.5);
  border : solid 1px #AAAAAA;
  box-shadow: 10px 10px 20px #000080;
  left : -150px;
		top : 45px;
 }
 
	body section:first-of-type
	{
		margin-top : 45px;
	}

 nav:hover
 {
  opacity : 1;
  left : 0px;
  background-color : rgba(0, 64, 64, 0.9);
  background-image : none;
  transition : left 1s, background-color 2s;
 }
 
 section.gauche
 {
  margin-left : 20px;
 }
 
 section article.noire img
 {
  max-width : 400px;
 }
 
 table
 {
  min-width : 320px;
 }
 
 table tr td
 {
  font-size : 0.7em;
 }
 
 table tr td img
 {
  max-width : 100px;
 }
 
 h1
 {
  font-size : 1em;
 }
 
 h2
 {
  font-size : 0.8em;
 }
 
 footer
 {
  font-size : 0.7em;
 }

 .noGsm
 {
  display : none;
 }
}