/*
Copyright (C) 2016 Cordon Denis (Bisou)
Copyright (C) 2016 Cambien Antoine (Nosti)
http://www.teacher-connect.fr

This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/
body {
font-family :"Trebuchet MS", "Times New Roman", Arial;
font-size : 13px;
margin : 0;
padding : 0;
background-color: #d0dce0;
}
/*pour les impression */
#impression{
  display : none;
}



/* Le Header ( tout les blocs jusque au com suivant )*/ 
#header {
height : 50px;
background-color: #4CAF50;
/*background-color:#000000;
background-image: url("../images/fond_header.png");
background-repeat: repeat-x;*/
}

h1,h4
{
   border: 2px solid white;
   text-align: center;
   border-radius: 10px;
   background: #4CAF50;
   padding: 15px 32px;
   color: white;
}
h2
{
     
    background-color: #4CAF50; /* Green */
    border: 1px solid white;
    margin-top: 25px;
    margin-bottom: 0px;
    color: white;
    padding: 5px 12px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
.titi
{
	width: 100%;
	height: 15%;
	padding: 15px 1px;
	display: inline-block;
	font-size: 16px;
	/*border-radius: 1px;*/
}
.too
{
    font-size: 13px;
  background-color:rgb(120,50,14);
  text-align: center;
   padding: 15px 32px;
   color: white;
}
.toto
{
	  background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
.tototo
{
      background-color: white ; /* Green */
    border: 2px solid #4CAF50;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

strong
{
	font-size: 20px;
	color: #4CAF50;

}
a{
text-decoration:none;
color:#000099;
}
a:hover{
text-decoration:underline;
}

a:focus{
background-color:#CCCCFF;
}

/* Le logo dans le Header ( tout les blocs jusque au com suivant )*/ 
#logo {
float : left;
margin-left : 5em;
margin-right : 30px;
background-repeat : no-repeat;
}

/* Les onglets  dans Header ( tout les blocs jusque au com suivant )*/ 
#navcontainer {
padding-top : 6em;
padding-right : 5em; /* Valeur d'espacement depuis le bord droit*/ ;
}

ul#navlist {
font : bold 11px Tahoma, "Trebuchet MS", "Times New Roman", Arial;
list-style-type : none;
padding-bottom : 24px;
border-bottom : 1px solid #fff;
margin : 0;
margin-right: 3em;

}
ul#navlist li {
float : right;
height : 21px;
width:100px;
background-color : #5c5a5a;
margin : 2px 2px 0px 2px;
border : 1px solid #5c5a5a;
}
ul#navlist li#active {
border-bottom : 1px solid #fff;
background-color : #fff;
}
li#active a {
color : #000;
}
#navlist a {
float : left;
display : block;
color : #000;
text-decoration : none;
padding-left : 4px;
padding-top : 4px;
padding-bottom : 4px;
padding : 4px;
}
#navlist a:hover {
background : #fff;
}
dt, dl, dd, ul, li {
list-style-type : none;
margin : 0 10px 0 0;
padding : 0;
}

/* Le Conteneur menu ( tout les blocs jusque au com suivant )*/ 
#menu {
height : 87px;
background-color: teal;
/*background-image : url(../images/fond_menu.png);*/
}

/* Le menu principal dans Menu ( tout les blocs jusque au com suivant ) */ 
#menus_principal {
padding-top : 17px;
margin-left : 5em;
font-size: 1em;
}
#menus_principal dl {
float : left;
}
#menus_principal li {
display : inline;
}
#menus_principal a {
text-decoration : none;
}
#smenu1, #smenu2, #smenu3, #smenu4, #smenu5,#smenu6 {
position : absolute;
left : 0;
font-size :11px;
height:5em;
width : 50em;
margin-left : 6em;
margin-right : 30em;
padding-top : 27px;

}
.couleur_sousmenu a{
margin:0px;
color : #000;
font-weight:bold
padding-left:20px;
padding-top:11px;
padding-bottom:8px;
padding-right:20px;
border-left:1px solid #666666;
}
.couleur_sousmenu2 a{
margin:0px;
color : #000;
/*font-weight:bold;*/
padding-left:20px;
padding-top:11px;
padding-bottom:8px;
padding-right:20px;
border-left:0px solid #666666;
border-right:0px solid #666666;
}

.couleur_sousmenu a:hover{
background-color:#b0dbf2;
color:#660066;
}
.couleur_sousmenu2 a:hover{
background-color:#b0dbf2;
color:#660066;
}

@media(max-width: 320px)
{
   .test a{
      flex-direction: column;
   }
}
.test a{
font-family :"verdana","Trebuchet MS", "Times New Roman", Arial;
/*font: bold 11px tahoma, verdana, arial, sans-serif;*/
flex-direction: column;
padding-left:15px;
padding-right:15px;
padding-top:9px;
padding-bottom:9px;
font-weight:bold;
/*color:#000000;*/
color: white;
height: 35px;
font-size: 12px;
background-color: #4CAF50;
margin: 2px 2px 0 2px;
/*border: 1px solid white;*/

}
.test a:hover{
color:#0066FF;
}
/* Le Corps ( tout les blocs jusque au Footer suivant ) */
.cadre {
/*padding-right : 5em;
padding-left : 5em;
padding-top : 2em;*/

	clear: both;
   position: relative;
   table-layout: fixed;
   display: table;
   text-align: center;
   width: 100%;
   background-color: transparent;
   background-image: none;
   border: px #CCCCCC solid;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

/* haut_1 pour definir image d'ombre*/
.haut_1 {
/*background : url("../images/skn_coin_HG.png") no-repeat bottom left;
padding-left : 20px;*/
}

/* haut_2 pour definir image d'ombre*/
.haut_2 {
/*background : url("../images/skn_coin_HD.png") no-repeat bottom right;
padding-right : 20px;*/
}

/* haut pour definir image d'ombre*/
.haut {
/*background : url("../images/skn_coin_HM.png") repeat-x bottom center;
width : 100%;
padding-top : 20px;*/
}

/* contenu_1_H pour definir image d'ombre*/
.contenu_1_H {
/*background : url("../images/skn_vert_ent_G.png") left 0%;
padding-left : 20px;*/
}

/* contenu_2_H pour definir image d'ombre*/ 
.contenu_2_H {
/*background : url("../images/skn_vert_ent_D.png") right 0%;
padding-right : 20px;
height : auto;*/
}

/* contenu_1_B pour definir image d'ombre*/ 
.contenu_1_B {
/*background : url("../images/skn_vert_cont_G.png") left 0%;
padding-left : 20px;
height : auto;*/
   clear: both;
   position: relative;
   table-layout: fixed;
   display: table;
   text-align: center;
   width: 100%;
   /*background-color: transparent;*/
   background-color: white;
   background-image: none;
   border: 0px #CCCCCC solid;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
      -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   padding: 0px 15px 0px 15px;
   margin-right: auto;
   margin-left: auto;
}
}
/* contenu_2_B pour definir image d'ombre*/ 
.contenu_2_B {
/*background : url("../images/skn_vert_cont_D.png") right 0%;
padding-right : 20px;
height : auto;*/
background-color: navy;
}

/*contenu_B Ici loge le contenu principale*/ 
.contenu_B {
width : 100%;
background-color : #ffffff;
padding-top: 10px;
padding-bottom: 10px;
   
}
}



}


/*contenu_B Ici loge le contenu footer */ 
.contenu_Bfooter {
width : 100%;
background-color : #ffffff;
padding-top: 10px;
padding-bottom: 10px;
border-top: 1px solid #CCCCCC;
}

/* contenu_1_B pour definir image d'ombre footer*/ 
.contenu_1_Bfooter {
/*background : url("../images/skn_vert_cont_G.png") left 0%;
padding-left : 20px;
height : auto;*/
}

/* contenu_2_B pour definir image d'ombre footer*/ 
.contenu_2_Bfooter {
/*background : url("../images/skn_vert_cont_D.png") right 0%;
padding-right : 20px;
height : auto;*/
}


/* bas 1 pour definir image d'ombre*/ 
.bas_1 {
/*background : url("../images/skn_coin_BG.png") no-repeat top left;
padding-left : 20px;*/
}

/* bas 2 pour definir image d'ombre*/ 
.bas_2 {
/*background : url("../images/skn_coin_BD.png") no-repeat top right;
padding-right : 20px;*/
}

/* bas pour definir image d'ombre*/ 
.bas {
/*background : url("../images/skn_coin_BM.png") repeat-x top center;
width : 100%;
padding-top : 20px;*/
} 

#wb_LayoutGrid3
{
   clear: both;
   position: relative;
   table-layout: fixed;
   display: table;
   text-align: center;
   width: 100%;
   /*background-color: transparent;*/
   background-color: white;
   background-image: none;
   border: 0px #CCCCCC solid;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
#LayoutGrid3
{
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   padding: 0px 15px 0px 15px;
   margin-right: auto;
   margin-left: auto;
}
#LayoutGrid3 .row
{
   margin-right: -15px;
   margin-left: -15px;
}
#LayoutGrid3 .col-1, #LayoutGrid3 .col-2
{
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   font-size: 0px;
   min-height: 1px;
   padding-right: 15px;
   padding-left: 15px;
   position: relative;
}
#LayoutGrid3
{
}
#LayoutGrid3 .col-1, #LayoutGrid3 .col-2
{
   float: left;
}
#LayoutGrid3 .col-1
{
   width: 50%;
   text-align: center;
}
#LayoutGrid3 .col-2
{
   width: 50%;
   text-align: center;
}
#LayoutGrid3:before,
#LayoutGrid3:after,
#LayoutGrid3 .row:before,
#LayoutGrid3 .row:after
{
   display: table;
   content: " ";
}
#LayoutGrid3:after,
#LayoutGrid3 .row:after
{
   clear: both;
}
@media (max-width: 768px)
{
#LayoutGrid3 .col-1, #LayoutGrid3 .col-2
{
   float: none;
   width: 100%;
}
}
#wb_Image2
{
   margin: 15px 0px 15px 0px;
   vertical-align: top;
}
#Image2
{
   border: 0px #000000 solid;
   padding: 0px 0px 0px 0px;
   display: block;
   width: 100%;
   height: auto;
   max-width: 600px;
   margin-left: auto;
   margin-right: auto;
   vertical-align: top;
}
#wb_Heading2
{
   background-color: transparent;
   background-image: none;
   border: 0px #FFFFFF solid;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   margin: 15px 0px 15px 0px;
   padding: 0px 0px 0px 0px;
}
#Heading2
{
   color: #454545;
   font-family: Arial;
   font-weight: bold;
   font-size: 32px;
   margin: 0;
   text-align: center;
}
#wb_Text2 
{
   background-color: transparent;
   background-image: none;
   border: 0px #000000 solid;
   padding: 0;
   margin: 0px 0px 15px 0px;
   text-align: justify;
}
#wb_Text2 div
{
   text-align: justify;
}

#wb_Text11 
{
   background-color: white;
   background-image: none;
   border: 0px #000000 solid;
   padding: 15px 0px 15px 0px;
   margin: 0;
   text-align: center;
}

/* Le Footer ( tout les blocs jusque au com suivant )*/ 
#footer {
height : 30px;
background-color : #5c5a5a;
margin-left : 8em;
margin-right : 8em;
margin-bottom : 5em;
}


/* onglets*/ 
ul#tabnav12 {
float: right;
font: bold 11px verdana ,tahoma , arial, sans-serif;
list-style-type: none;
margin-top: 58px;
margin-right: 8em;
   
}

ul#tabnav12 li {
float: left;
height: 35px;
font-size: 14px;
background-color: #4CAF50;
margin: 2px 2px 8 2px;
/*border: 1px solid white;*/

}

#tabnav12 a {
float: left;
display: block;
color: white;
text-decoration: none;
padding: 8px;
}

#tabnav12 a:hover {
height:20px;
/*background-color:#999999;*/
background-color: navy;
color:#FFFFFF;
}

@media(max-width: 700px)
{
   ul#tabnav12 li {
display: none;
}
}