/* ------------------------------------------ */
/* The structure */

form {
	display: table;
	width: 80%;
	margin: 10px auto;
	background: ThreeDFace;
}

control {
	display: table-row;
}

label,
output {
	display: table-cell;
	width: 150px;
	vertical-align: top;
}

label {
	text-align: right;
}

input[type="text"],
input[type="file"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="tel"],
select,
textarea {
	display: table-cell;
}

/*
	A suggested pseudo element for some type
	of inputs, like "file" and "color".
*/

input[type="file"]::button {
	icon: url(open.png);
	position: relative;
	end: 0;		/* instead of right */
	button-position: inside;
}

cl,
rl {
	display: table-cell;
}

li {
	display: list-item;
	list-style-type: none;
	width: 100%;
}

cl li,
rl li {
	margin-left: 21px;
}

cl li {
	list-style-image: url(checkbox.png);
}

cl li:checked {
	list-style-image: url(checkbox_checked.png);
}

rl li {
	list-style-image: url(radiobutton.png);
}

rl li:selected {
	list-style-image: url(radiobutton_selected.png);
}

cl li:unchecked li,
rl li:unselected li {
	disabled: disabled;
}

form control:last-child {
	text-align: center;
}

/* Placeholders should be disapeared in paged media */

@media print { 

input::placeholder {display:none;}

}


/* ------------------------------------------ */
/* Tricks to give a UI flavor, since
   APPEARANCE attribute still not affordable yet. */


input[type="text"],
input[type="file"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="tel"] {
	border: 2px inset Window;
	background: window;
}

select {
	border: 2px inset Window;
	background: window;
}

select li {
	height: 5px;
	overflow-y: scroll;
}

textarea {
	border: 2px inset Window;
	background: window;
	height: 120px;
}

input[type="file"] {
	background: window url(open.png) no-repeat;
	background-position: right;

}

input[type="submit"],
input[type="reset"] {
	-moz-appearance: button;
	appearance: button;
	cursor: pointer;
	border: 2px outset buttonface;
	background: buttonface;
}