html, body {
	padding: 0;
	margin: 0;
	background-color: #000000;
	
	font-family: "Courier New", Courier, monospace;

}

#uiContainer {
	display: flex;
	x-justify-content: space-around;
	x-align-items: stretch;
	padding: 0;
	margin: 0;
}

.col {
	flex-direction: column;
	max-width: 100%;
}

.col.left {
	width: 80px;
	flex: 0 0 80px;
	padding: 0;
	margin: 0;
	height: calc(100vh);
	max-height: calc(100vh);
	overflow-y: scroll;
	border-right: 1px #000000 solid;
}

/*
@media only screen and (min-width: 720px) {
    .col.left {
		width: 152px;
		flex: 0 0 152px;
    }
}

@media only screen and (min-width: 1080px) {
    .col.left {
		width: 224px;
		flex: 0 0 224px;
    }
}
*/



.col.right {
	flex: 1 1 auto;
	border-left: 1px solid #eee;
	background-color: #000000;
	padding: 0;
	margin: 0;
	border: 0;
	height: calc(100vh);
	max-height: calc(100vh);
	overflow: scroll;
}

.pixels-btn-clear {
	height: calc(2vh);
	display: block;
}

a {
	color: #FFFFFF;
}

.pixels-zoom-buttons {
	text-align: center;	
}

a.ZoomIn,
a.ZoomOut {
	display: inline-block;
	padding: 0 3px;
	margin: 2px;
	line-height: 30px;
	font-size: 20px;
	text-align:center;
	vertical-align: central;
	background-color: #000000;
	color: #FFFFFF;
	cursor: pointer;
	font-weight: bold;
	text-transform: uppercase;
	
	-webkit-user-select: none; /* Chrome/Safari */ 
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+ */
	-o-user-select: none;
	user-select: none;
}

.login-buttons {
	text-align: center;
	margin-top: 25px;
}

.login-buttons span {
	color: #FFFFFF;
	text-align: center;
	margin: 25px auto;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 14px;
}

.login-buttons a {
	display: block;
	margin: 25px auto;
	padding: 5%;
	width: 50%;
	
	background-color: transparent;
	border: 0;
}

.login-buttons a img {
	width: 100%;
	height:	auto;
}

#realCanvas {
	display: none;
	background-color: #FFFFFF;
	image-rendering: -moz-crisp-edges; /* Firefox */
	image-rendering: -o-crisp-edges; /* Opera */
	image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
	image-rendering: crisp-edges;
	image-rendering: pixelated;
	-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}

#userCanvas {
	display: block;
	cursor: crosshair;
	background-color: #FFFFFF;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	image-rendering: -moz-crisp-edges; /* Firefox */
	image-rendering: -o-crisp-edges; /* Opera */
	image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
	image-rendering: crisp-edges;
	image-rendering: pixelated;
	-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}


#userCanvas.visitor {
	cursor: default;
}

#pixelsCanvas {
	position: relative;
}

#pixelCursor {
	position: absolute;
	left: 0;
	top: 0;
	pointer-events: none;
	width: 5px; height: 5px;
	background-color: transparent;
	border: 1px #000000 solid;
	box-shadow: inset 0 0 1px #000000, 0 0 1px #000000;
}

.customColour {
	margin: 10px auto;
}
.pixels-colour-buttons {
	margin: 10px auto;
	width: 90%;
}

.pixels-logout-button a {
	display: block;
	color: #FFFFFF;
	text-align: center;
	margin: 25px auto;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 14px;
	cursor: pointer;
}




.pixels-colour-buttons button {
	border-radius: 50%;
	outline: none;
	cursor: pointer;
	border: 1px #FFFFFF solid;
	width: 21px;
	height: 21px;
	display: inline-block;
	margin: 3px 1px;
	padding: 0;
	box-sizing: border-box;
	box-shadow: inset 0 0 1px #000000;
	line-height: 20px;
}

input#customColour {
	border-radius:0;
	outline: none;
	cursor: pointer;
	border: 1px #FFFFFF solid;
	width: 90%;
	height: 20px;
	display: block;
	margin: 3px auto;
	padding: 0;
	box-sizing: border-box;
	box-shadow: inset 0 0 1px #000000;
	line-height: 20px;
}


.infoBox {
	/* display: none; */
	position: fixed;
	top: 0;
	right: 0;
	
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.8);
	max-height: 90%;
	max-width: 90%;
	width: 350px;
	color: #FFFFFF;
	
	margin: 1% 2%;
}

.infoBox .infoBoxContent {
	padding: 10px;
}

.infoBox .infoBoxContent table {
	width: 100%;
	max-width: 100%;
}

.infoBox .infoBoxContent table th,
.infoBox .infoBoxContent table td {
	padding: 5px;
	vertical-align: top;
	text-align: left;
}

.infoBox .infoBoxContent table th {
	font-weight: bold;
	
}

#downloadImag {
	padding: 5px;
}

.infoBox .infoBoxContent table td {
	overflow-wrap: anywhere;
}

.infoBox .infoBoxContent table td#infoPixelBy img {
	display: block;
	width: 64px;
	max-width: 100%;
	height: auto;
	margin-top: 5px;
}

.infoBox .infoBoxClose {
	color: #FFFFFF;
	float: right;
	font-size: 28px;
	font-weight: bold;
	padding: 5px;
}

.infoBox .infoBoxClose:hover,
.infoBox .infoBoxClose:focus {
	color: #FFFF00;
	text-decoration: none;
	cursor: pointer;
}

.discordBox {
	/* display: none; */
	position: fixed;
	top: 0;
	right: 0;
	
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.8);
	max-height: 90%;
	max-width: 90%;
	width: 350px;
	color: #FFFFFF;
	
	margin: 1% 2%;
}

.discordBox .discordBoxContent {
	padding: 10px;
}