#input {
	float: left;
	width: 30%;
}

#input input,
#input select {
	width: 100%;
	margin-bottom: 10px;
	box-sizing: border-box;
}

#input textarea {
	width: 100%;
	height: 400px;
	resize: vertical;
	box-sizing: border-box;
}

#output {
	width: 70%;
}

@media(min-width: 641px) {
	#output {
		box-sizing: border-box;
		padding-left: 10px;
	}
}

input.not_tab_only {
	display: inline-block;
}

input.tab_only {
	display: none;
}

@media(max-width: 640px) {
	input.not_tab_only {
		display: none;
	}

	input.tab_only {
		display: inline-block;
	}
}

#output li {
	width: 50%;
	float: left;
}

#outputnames {
	overflow: auto;
}

#outputhelp {
	display: none;
}

#outputnames:empty + #outputhelp {
	display: block;
}

.namecount {
	padding: 2px;
	background-color: #DDDDDD;
	border-radius: 2px;
	font-size: 0.5em;
	vertical-align: middle;
}

.namecount:empty::after {
	content: "new";
	background-color: #44FF44;
}


/* Tabs */
.tab {
	float: left;
}

.tab_control {
	display: none;
}

.tab_control_label {
	display: none;
	width: 50%;
	float: left;
	margin: -10px 0px 10px 0px;
	padding: 10px 0px 10px 10px;
	background-color: #888888;
}

.tab_control_label:first-of-type {
	margin-left: -10px;
}

.tab_control_label:last-of-type {
	margin-right: -10px;
}

.tab_control:checked + .tab_control_label {
	background-color: #EEEEEE;
}

@media (max-width: 640px) {
	.tab_control_label {
		display: block;
	}

	.tab {
		display: none;
		width: 100% !important;
	}
	
	.tab_control1:checked ~ .tab1,
	.tab_control2:checked ~ .tab2 {
		display: block;
	}
}