html, body {
 margin: 0px;
 padding: 0px;
 }

* {
 box-sizing: border-box;
}

body {
 background-color: #F5F5F5; 
 font-family: Verdana, sans-serif; 
 font-size:3.5vw;
 text-align:center;
 }

h1 {
 color: #555; 
 }

.chap_container div div h3 {
 display: block;
 font-size: 4vw; 
 }

a {
 text-decoration:none;
 }
 
 a:visited {
 color:#444;
 }


#pagecontainer {
width:94%;
margin-left:2%;
 }

.info_top {
	color: #005252;
	width:70%;
margin-left:15%;
}

.info_top li {
	text-align:left;
	width:70%;
margin-left:15%;
margin-bottom:1.4em;
}

.chap_container {
 width:100%;
 }
	
.chap_container div {
 display: block;
 height: 58vw;
 width:100%;
 margin: 5px;
 background-color:#fff;
 box-shadow: 2px 2px 4px #999;
 text-align: left;
 word-wrap: break-word;
 }




/* la div  contenat les liens et la description :       */
/* pour ajouter de l'espace indépendamment du contenu ! */
.chap_container div div {
 display:block; 
 position:relative;
 overflow:hidden;
 background-color:transparent;
 box-shadow:none;
 top:-72.5vw; left: 44.5vw; height:57.5vw; width: 44.5vw; 
 }
 /* "Overflow:hidden verhindert" die Vergrösserung der div bei mehr Text */

 


.chap_container h2 {
 display: block;
 position:relative;
 width : 15vw;
 line-height: 15vw;
 text-align: center;
 vertical-align: top;
 font-size: 5vw;
 color: #ffcc00;
 text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px, 2px 2px 3px black;
 z-index:3;
 }
 
 
/* toutes les images */
.chap_container img{
	height: 33vw;
	vertical-align: top;
	}

/* vignette  */
.chap_container h2 +img{
 display: block;
 position:relative;
	border: solid 1px grey;
	height: 33vw;
	top:-19.5vw;
	}

/* QR-code */
.chap_container img +img{
	display: block;
	position:relative;
	height: 20vw;
	top:-17vw;
	left: 11vw;
 }
 
 
 
/*------------------------   classes pour type de raccourci   ---------------------------*/
 
 div.video div{
background-color: #70C2E2;
 }
 div.video div h4{
color: #000066;
 }
 
 
 div.internet div{
background-color: #BCF3CF;
 }
 div.internet div h4{
color: #11575E;
 }
 
 
  div.fprod div{
background-color: #FFEFB0;
 }
 div.fprod div h4{
color: #045343;
 }
 
 
 div.autre div{
background-color: #FFDBB3;
 }
 div.autre div h4{
color: #990000;
 }
 
 
 div.notice div{
background-color: #E1DBDB;
 }
 div.notice div h4{
color: #813A29;
 }
 
 





 
/*---------------------------------------------------------------------------------------*/
/*------------------------      styles selon résolution PC       ---------------------------*/
/*---------------------------------------------------------------------------------------*/



@media only screen and (min-width: 800px) {
    body {
    font-size:12px
    }

/* toutes les images */
	.chap_container img{
	height: 120px;
    }


/* vignette  */
.chap_container h2 +img{
	display: inline-block;
	border: solid 1px darkgrey;
	height: 120px;
	top:0px;
	}

	
/* QR-code */
.chap_container img +img{
	display: inline-block;
	height: 112px;
	margin: 4px;
	top:0px;
	left:0px;
 }
 
    #pagecontainer {
    width:100%;
    margin:0px;
    }


    .chap_container h2 {
	margin:0px;                    /*  ne devrait pas être nécessaire - ??? */
	display: inline-block;
    color: lightgrey;
    background-color: #003366;
    font-size: 52px;
	width:120px;
    line-height: 120px;
    }



    .chap_container div {
    display: inline-block;
    width:400px;
    height: 270px;
    max-height: 270px;
    }



    .chap_container div div {display:block; top: 0px; left: 0px; height:140px; width: 390px;}

    .chap_container div div h3 {
	font-size: 18px;
    display: inline; 
    }

}