/*------------------------------------------------
author: webmaster@cmpp.ch
date:16.04.2025
version: 1.1
-------------------------------------------*/
body{
background-image: url(http://www.cmpp.ch/bleu.jpg);
  font-family:  Arial, sans-serif;
font-size: 18px;
 margin: 20px 40px 40px 40px;
  overflow: scroll;
text-align: justify;
display: block;
color: white;
background-color:#FFCC99;
}
hr{
 height: 1px; 
width:800px;
max-width: 100%;
background: white;
margin: 0 ;
}
.info p{
font-size:18px;
padding:20px;
}
/*---------------------------
typography
-------------------------------*/
  th{
      color: #00FFFF;
        background-color:#0033FF;
        text-align:center;
       font-weight: bold;
        font-size:24px;
margin: 40px 0;
padding:10px 0;
height:40px;
      }
h1{
font-family: Comic Sans MS;
font-size: 48px;
text-align: center;
padding:0 0 5px 0;
margin:0;
}
h2{
text-align: center;
font-size: 26px;
padding: 0;
color:#000066;
}
h3{
color:white;
font-size:26px;
text-align:center;
}
a{
color: #FF6666;

}
.f6{
font-size:40px;
 font-weight:bold;
}
.f4{
font-size:12px;
}
/*----------------------
class
---------------------------*/
header{ 
margin-bottom: 20px ;
 display:flex;
        flex-direction:column;
        flex-wrap:nowrap;
        justify-content:center;
        align-items:center;
         margin-left: auto;
    margin-right: auto;
      flex:  0 1 auto;
max-width:100%;
width:800px;
}

header hr{
width:800px;
max-width:100%;
 }

main{
background-image:url(http://www.cmpp.ch/fond4.jpg); 

width:800px;
display:flex;
        flex-direction:column;
        flex-wrap:nowrap;
        justify-content:center;
        align-items:center;
         margin-left: auto;
    margin-right: auto;
      flex:  0 1 auto;
max-width:100%;
}

article{
margin: 50px 0 60px 0;
display:flex;
        flex-direction:column;
        flex-wrap:nowrap;
        justify-content:center;
        align-items:center;
         margin-left: auto;
    margin-right: auto;
      flex:  0 1 auto;
max-width:100%;
}

footer{
margin:40px 0;
display:flex;
        flex-direction:column;
        flex-wrap:nowrap;
        justify-content:center;
        align-items:center;
         margin-left: auto;
    margin-right: auto;
      flex:  0 1 auto;
max-width:100%;

}
footer .hr2{
margin-bottom: 60px;
 }
footer table{
height:200px; 
width:600px; 
border:4px solid blue;
max-width:100%;
}
footer th{
padding:5px;
height:25px;
}
/*-------------------------------
pseudo class
-----------------------------*/
.bb{
background-color: #0000CC;
border:hidden;
border-spacing:0;
 height:6px;
}
.info{
background-image:url(http://www.cmpp.ch/fond4.jpg); 
padding: 20px 30px; 
text-align:justify; 
color:#000066;
}
.hr2{
margin:30px 0; 
width:800px;
max-width:100%;
}
.hr3{
margin:0 0 10px 0; 
width:800px;
max-width:100%;
}
.td2{
background-color: #FFFFDF;
text-align:center;
padding: 10px;
}
.td2:hover{
background:#FBC882;
}
.th3{
background-color:#FCD8A7;
color:#000066;
text-align:center;
padding: 5px;
}
.vec{
padding: 30px 60px;
text-align:center;
}

.th2{
text-align:center; 
color:#000066; 
background-color:#FBC882;
padding:10px;
font-size:18px;
}
.tn{
margin: 0 0 5px 0;
}
.head{
 display:flex;
        flex-direction:column;
        flex-wrap:nowrap;
        justify-content:center;
        align-items:center;
         margin-left: auto;
    margin-right: auto;
      flex:  0 1 auto;
max-width:100%;
width:800px;

}
/*---------------------------
tableaux
--------------------------*/
td{
padding:0 10px;
}
  .td1:hover{
      background: #0033FF;
      }
 .td1{
      background-color: #000099;
        color:black;
        text-align:center;
       font-weight: bold;
padding:5px;
height:38px;
width:300px;
      }
table{
background-image:url(http://www.cmpp.ch/bleu.jpg);
border:hidden;
text-align:left;
}
article table{
width:800px; 
text-align:center;
max-width:100%;
}
.rows1{
height:20px;
width:160px;
padding:5px 5px 5px 0;
text-align:left;
border:0 hidden;
border-spacing:0;
}
.rows2{
height:20px;
width:460px;
padding: 5px 5px 5px 0;
text-align:left;
border:0 hidden;
border-spacing:0;

}
.rows3{
height:20px;
width:160px;
text-align:left;
padding: 5px 5px 5px 0;
border: 0 hidden;
border-spacing:0;
}
.tabint{
width:540px; 
border:1px solid yellow; 
text-align:center;
max-width:100%;
margin:20px 0; 
}
.tdint{
text-align:center; 
color:#000066; 
background-color:#FBC882; 

font-size:20px;
max-width:100%;
height:40px;
padding:5px;
}
.flex{
display:flex;
        flex-direction:column;
        flex-wrap:nowrap;
        justify-content:center;
        align-items:center;
         margin-left: auto;
    margin-right: auto;
      flex:  0 1 auto;
max-width:100%;
}
.maintab{
width:800px; 
border:0 hidden;
max-width:100%;
}
/*--------------------------------
navigation
---------------------------------*/
::-webkit-scrollbar {
  width: 20px;
color:white;
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 3px #87CEFA; 
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background:  #D7CCB5; 
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: #176F99; 
}