* {  margin:0;  padding:0; 
		font-family: "Open Sans", sans-serif;
	}

	body {
		color:#3a3a3a;
		background-color:#f6f8fa;
		user-select: none;
	}
	
	h1 {
		font-size: 2em;
		padding-top: 0.3em;
		padding-bottom: 0.5em;
	}
	

	header { 
		color: white;
		height:170px;
		text-align:center;
		background: linear-gradient(#4fa0eb, #9656d9);
	}
	header a {
		color: white;
		font-weight:bold;
		margin-right:14px;
	}
	header iframe {  vertical-align:middle;  }
	
	.foot {
		background-repeat: repeat-x;
		background-position: center bottom;
		background-size: 200px 50px;
		padding: 0.5em 0 1.1em 0;
	}
	
	footer { 
		font-size:1.5em;
		height:50px;
		width:660px;
		padding: 0.3em 1em 0 1em;
		background-color:#f6f8fa;
		box-shadow: 0px 3px 9px rgba(0,0,0,0.55);
		border-radius:1em;
		margin: 0 auto;
	}
	
	canvas {
		float:left;
		position:absolute;
	}
	
	button {
		font-size: 1em;
		background-color: #9656d9;
		color: white;
		border: none;
		padding: 0.2em 0.7em;
		margin-left: 1em;
		font-weight:bold;
		cursor:pointer;
		border-radius: 0.3em;
	}

	#main { 
		margin:0 auto;
		overflow-x:visible;
	}
	
	#lcont {
		width: 500px;
		float:left;
	}
	#list {
		overflow-y:scroll;
	}
	#list::-webkit-scrollbar {
	  width: 10px;
	  background: rgba(0,0,0,0);
	}
	#list::-webkit-scrollbar-thumb {
		background: rgba(0,0,0, 0.2 ); 
		margin:2px;
	}
	
	.item {
		padding: 0.5em;
		cursor:pointer;
	}
	
	.active {
		background-color: rgba(0,100,190,0.15);
	}
	
	.item .fname {
		display:inline-block;
		width:8.5em;
	}
	.item span {
		display:inline-block;
		width:4.5em;
		text-align:right;
	}
	
	#bunny {
		transition: transform .2s ease-out;
		filter:     drop-shadow(5px 7px 5px rgba(0,0,0,0.4)); 
		
		position: absolute; width:94px; top:20px; margin-left:500px; cursor:pointer;
	}
	#bunny:hover {
		transform: translate(0, -10px);
	}