body {
	padding:0;
	margin:0;
	font-family:calibri, verdana, arial;
	background-image: url("bg4.png");
	background-size: 120%;
    background-repeat: repeat;
    background-attachment: fixed;
	}
	
#content a {
	text-decoration:none; 
	color:#333;
	}
	
#content a:hover {
	text-decoration:none; 
	color:#666;		
	}
#content {
	padding:0;
	text-align:left;
	}
	
h1 {
	color:#999;  margin:0; 
	}
	



.navi ul a{
	color:#fff;	
	text-decoration:none; 
}

.navi ul a:hover{
	color:#ccc;
}

.navi ul {
    position: fixed;
    top: 0;
    width: 100%;
	background-color: #333;
	color: #fff;
	list-style-type:none; 
	float:right; 
	margin:0;
	padding: 1%;
	}
	
.navi ul li {
	padding: 0 1%; 
	font-size: 1xem;
	display:inline; 
	}
	
	
.container { 
	color:#333; 
	padding:5% 5%;
	width: 60%;
	margin: 0 auto;
	}
	
.container ul {
	list-style-type:none; 
	display:flex; 
	width:50%; 
	float:right; 
	margin:0;
	}
	
.container ul li {
	padding: 0 1%; 
	font-size: 1xem;
	}
	
.login {
	width: 40%;
	margin: auto;
	padding: 5%;
	border:solid 1px #333;
	background: rgba(150, 150, 150, 0.5);
}

th {
	font-weight: normal;
	text-decoration: none;
	background: rgba(150, 150, 150, 0.5);
	top: 20px;
	}
	
.canvas1 {
	width: 50%;
	float: left; 
	text-align:left;
	}


table {
	width:100%;
	border-collapse: collapse;
	border: none;
	}
	
	
tr:hover {
	background: rgb(0,0,0,0.3);
}	
	
td {
	width:auto;
	padding: 5px;
	border: 1px solid #666;
	}

th {
  cursor: pointer;
}
	
@media only screen 
and (max-device-width: 700px)
{
.canvas1 {
	width: 100%; border:1px solid; float: left; text-align:left;}
}