/* The controls a page without JavaScript uses. app.js's inline starter puts
   the class "js" on <html>, and then they're hidden: the checkboxes,
   double-click and blur take over, exactly as in TodoMVC. */
.js .nojs {
	display: none !important;
}

/* Forms that only wrap a control take no part in layout. */
form.inline {
	display: contents;
}

/* Without JavaScript, a submit button lies exactly over each checkbox, so
   the page looks the same either way. */
.todo-list li .view > button[data-action="toggle"] {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 40px;
	height: 40px;
	margin: auto 0;
	font-size: 0;
	cursor: pointer;
	z-index: 1;
}

.main button[data-action="toggle-all"] {
	position: absolute;
	top: -65px;
	left: 0;
	width: 45px;
	height: 65px;
	font-size: 0;
	cursor: pointer;
	z-index: 1;
}

/* Without JavaScript there's no double-click, so each item has an edit link
   beside the delete button. */
.todo-list li .view > a[data-action="edit"] {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 55px;
	height: 40px;
	margin: auto 0;
	font-size: 20px;
	line-height: 40px;
	color: #949494;
	text-decoration: none;
}

.todo-list li .view > a[data-action="edit"]:hover,
.todo-list li .view > a[data-action="edit"]:focus {
	color: #484848;
}

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