body{
	background-color: #fafafa;
	margin: 0;}

img{
	height: 100px;
	margin: 1%;}

header, img{
	display: inline-block;
	vertical-align: middle;
	min-height: 100px;}

header{
	color: red;
	background-color: lightblue;
	margin: 1%;
	border: grey solid 3px;
	width: 91%;
	text-align: center;
	border-radius: 5px;
	font-variant: small-caps;}

section.h3{
	display: inline-block;
	margin: 1%;
	vertical-align: top;
	padding: 1%;
	width: 95%;}

#infojoueur, #tableaux{
	display: inline-block;
	vertical-align: top;
	border-box: box-sizing;
	margin: 1%;}

#infojoueur{
	width: 25%;}

#tableaux {
	width: 60%;
	overflow-x: auto;}
	
#tabconfirm {
	margin-top: 10px;
	margin-bottom: 10px;
	width: 90%;}
	
#infotableaux {
	color: #e67300;
	font-weight: bold;}

@media (max-width: 800px){
	#infojoueur, #tableaux {
		width: 98%;
		box-sizing: border-box;
		margin-right: 1%;
		margin-left: 1%;
		margin-top: 0;
	}
	header{
		width: 100%;
		box-sizing: border-box;
		margin: 0;
	}
	img{
		display: block;
		margin: 0.5% auto;
	}
	input{
		min-height: 2em;
	}
	
	input[type=checkbox] {
		width: 24px!important;
		height: 24px!important;
	}
	form.accueil input[type=submit]{
	font-size: 1.5rem;
	}
}

form.accueil input[type=submit]{
	margin-top: 3px;
	width: 60%;
	font-size: 1.1em;}


form.accueil input {
	display: block;
	margin: auto;
	width: 90%;}
	
form.accueil select {
	display: block;
	margin: auto;
	width: 90%;}
	
select {
	margin-top: 7px;
}

form.accueil #infojoueur{
	text-align: center;}
	
body.confirm {
	margin-left: 1%;}

section{
	display: inline-block;
	border: grey solid 1px;
	border-radius: 2px;
	padding: 1%;}


table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
	margin-bottom: 50px;}

th{
	font-weight: bold;}

td, th {
    border: 0.5px solid;
	text-align: center;
    padding: 8px;}

tr:nth-child(even) {
    background-color: #e6e6e6;}

footer {
	background-color: #fafafa;
	width: 100%;
	padding: 0.3em 0.5em;
	text-align: center;}