/* The controls that work without JavaScript, laid over TodoMVC's own. With
   JavaScript on (html.js) they're hidden and the page is the reference. */

form.inline {
	display: contents;
}

.toggle-button,
.toggle-all-button {
	position: absolute;
	z-index: 1;
	padding: 0;
	border: 0;
	background: none;
	font-size: 0;
	cursor: pointer;
}

.todo-list li .toggle-button {
	top: 0;
	bottom: 0;
	left: 0;
	width: 40px;
	height: 40px;
	margin: auto 0;
}

.toggle-all-button {
	top: -65px;
	left: 0;
	width: 45px;
	height: 65px;
}

.todo-list li .edit-link {
	position: absolute;
	top: 0;
	right: 54px;
	bottom: 0;
	height: 20px;
	margin: auto 0;
	font-size: 14px;
	line-height: 20px;
	color: #949494;
	text-decoration: none;
}

.todo-list li .edit-link:hover,
.todo-list li .edit-link:focus {
	color: #484848;
	text-decoration: underline;
}

html:not(.js) .todo-list li label {
	padding-right: 90px;
}

.js .toggle-button,
.js .toggle-all-button,
.js .edit-link {
	display: none;
}