body{font-family: Arial, Helvetica, sans-serif; font-size:16px; overflow:hidden;}

.level{font-size:110%; height:29px; border-color:lightgrey;}
#image{width:90%; height:50vh; background-image:url(../img/book.jpg); background-size:cover; margin-top:20px;}

#paper{border:1px solid lightgrey; padding:8vh 5vh 5vh 5vh; margin:2vh auto; width:60vw; height:80vh; overflow:auto; overflow:auto;
  -webkit-box-shadow: 3px 3px 9px -1px rgba(125,125,125,1);
  -moz-box-shadow: 3px 3px 9px -1px rgba(125,125,125,1);
  box-shadow: 3px 3px 9px -1px rgba(125,125,125,1);}

.divTable{display:table; border-collapse:collapse; margin:auto; width:50vw;}
.divTableHeading{display:table-header-group; font-weight:bold;}
.divTableRow{display:table-row;}
.divTableCell{border:1px solid lightgrey; display:table-cell; padding:1px 10px;}
.divTableBody{display:table-row-group;}
.divTableFoot{display:table-footer-group; font-weight:bold;}

.divTableHeading .divTableCell{padding:22px;}
.divTableFoot .divTableCell{padding:18px;}
.col1{width:30%;}
.col2{width:70%;}

.button{border:none; border-radius:4px; color:white; padding:6px 18px 8px 18px; text-align:center; text-decoration:none; 
  display:inline-block; font-size:16px; margin:4px; border:1px solid #696969;}
.button1{background-color:#009fe3;}
.button2{background-color:#FFFFFF; color:#FF0000;} /* invisable red */

#coversheetA{width:36vw; height:476px; background-image:url(../img/sheet.jpg); background-size:cover; position:relative; margin:-536px 0 0 32.5%; mix-blend-mode:darken; display:block;}
.coversheet {transition:all 1s;}
.coversheet.hide {visibility:hidden; height:0; padding:0; margin:0;}
#coversheetA.hide {opacity:0;}
.next, .answers{border:1px solid lightgrey; border-radius:4px; font-size:16px; margin-left:4px; padding:4px; background-color:white; color:black; font-weight:normal; cursor:pointer;}
.answers{width:120px; float:left;}
.niveau{margin:4px 0 -4px 20px;}
.niveau a{font-weight:normal; font-style:normal; text-decoration:none; color:black; margin-left:50px;}
.stars{font-weight:normal; font-style:normal;}
.pagenr{border:none; font-size:14px; font-weight:bold; font-style:italic; margin-top:-20px; max-width:30px; float:left;}

/* Breakpoints /*

/* Tablet landscape */
@media only screen and (orientation:landscape) and (max-width:1024px){
.css-only{background-color:red;}
#paper{padding:3vh 2vh 2vh 2vh; margin:2vh auto; width:65vw; height:85vh;}
#coversheetA{height:490px; margin:-554px 0 0 32.5%;}
}

/* Tablet portrait */
@media only screen and (orientation:portrait) and (max-width:1024px){
.css-only{background-color:yellow;}
#paper{width:90vw; height:80vh;}
.divTable{width:80vw;}
.pagenr{margin-left:-10px;}
#coversheetA{width:58vw; height:500px; margin:-565px 0 0 31%;}
}

/* Mobile landscape */
@media only screen and (orientation:landscape) and (max-width:999px){
.css-only{background-color:orange;}
body{font-size:12px;}
.divTableHeading .divTableCell{padding:4px;}
.button{padding:0 9px 1px 9px;font-size:16px;}
.divTableFoot .divTableCell{padding:4px;}
.col1, .col2, .next, .answers{font-size:12px; padding:2px;}
.pagenr{margin-left:0;}
#coversheetA{width:58vw; height:350px; margin:-380px 0 0 31%;}
}

/* Match words */
.switch{font-weight:500;}
.switch a{text-decoration:none; color:black;}
.switch a:hover{color:green;}
#image_match{width:90%; height:50vh; background-image:url(../img/match.png); background-size:cover; margin-top:20px;}
.button2{pointer-events:none; color:black; opacity:0.5;}
hr{border-top: 0px solid lightgrey; margin:0 0 -1pt 0;}
.tbcstart input[type="submit"]{margin-top:6px; margin-bottom:5px;}