* {
	margin: 0;
	padding: 0;
}

html {
	height: 100%;
}

body {
	background: #eee;
	height: 100%;
	min-height: 100%;
	width:100%;
	color: #222;
	font-size: 16px;
	line-height: 24px;
	font-family: 'Lato', sans-serif;
}

a, a:link, a:active {
	text-decoration: none;
	color: #222;
}

a:hover {
	text-decoration: underline;
}

p {
	margin: 1em 0;
}

textarea {
	width: 40%;
	height: 250px;
	float: left;
}

input[type="submit"] {
	border: none;
	background: #95a5a6;
	padding: 10px;
	margin: 5px 0;
	cursor: pointer;
	font-size: 20px;
	width: 90%;
}

input[type="submit"]:hover {
	background: #34495e;
	color: #fff;
}

input[type="file"] {
	border: none;
	background: #95a5a6;
	padding: 10px;

}

.canvas_container {
	max-width: 70%;
	max-height: 500px;
	overflow: auto;
}

.content {
	display: none;
	float: left;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding-left: 230px;
	padding-top: 20px;
}

#download_encoded, #encode_image, #decode_image {
	display: none;
	text-align: center;
	width: 90%;
	margin: 10px 0 0;
	line-height: 32px;
	font-size: 24px;
	background: #A8B0B1;
	padding: 5px 0;
}

#decode_text {
	display: none;
	width: 80%;
}

#encode_text {
	width: 50%;
	height: 50%;
	margin: 1px;
	float: left;
}

#decode_submit {
	margin-top: 10px;
  width: 80%;
}

#encode_file {
	width: 93%;
}

#decode_file {
	float: left;
	width: 40%;
	height: 100%;
	min-height: 225px;
}

#imageholder {
	width: 40%;
	max-height: 250px;
	float: left;
	text-align: center;
}

#imageholder .thumbnail {
	width: 96%;
	height: 96%;
	margin: 2%;
}

.thumbnail {
	width: 100%;
	height: 100%;
}

.thumbnail img {
	max-width: 100%;
	max-height: 100%;
}

#decode_thumbnail {
	width: 40%;
	height: 100%;
	float: left;
	text-align: center;
	display: table-cell;
	vertical-align: middle;
}

#decodebox {
	width: 90%;
	min-height: 225px;
	height: 40%;
}