@import url('https://fonts.googleapis.com/css?family=Roboto');

input.CLfield
{
	border: 1px solid hsla(0, 0%, 60%, .9);
	background: transparent;
	border-radius: 4px;
	padding: 2px 2%;
	font-family: 'Roboto', sans-serif;
	font-size: 10pt;
}

input.CLfield:hover
{
	background: hsla(50, 100%, 50%, .15);
}

input.CLfield:focus
{
	border-color: hsla(200,100%, 50%, .75);
	background: hsla(200, 100%, 90%, .75);
}

/*
.data input:disabled,
.data textarea:disabled, 
.data select:disabled,
.data input:read-only,
.data textarea:read-only,
.data textarea[readonly]{
	border: 1px dashed hsla(100, 0%, 0%, .2);
	color:	hsla( 0, 0%, 50%, 1);
}





.data input:read-only:focus,
.data textarea:read-only:focus,
.data select:read-only:focus
{
	border-color: red;
	background: hsla(50, 100%, 90%, .75);
}

.data input[type="button"], 
.data input[type="submit"],
.data button{
	box-shadow: 1px 1px 2px 1px hsla(0,0%, 0%, 0.25);
	max-width: 100%;
	margin: 0px;
	padding: 1px 2px;
}

.data input[type="button"]:hover, 
.data input[type="submit"]:hover,
.data button:hover{
	box-shadow: 1px 1px 2px 1px hsla(0,0%, 0%, 0.5);
	font-weight: bold;
	cursor: pointer;
}

.data input[type="button"]:disabled, 
.data input[type="submit"]:disabled,
.data button:disabled{
	box-shadow: none;
	font-weight: normal;
	cursor: default;
}

.data input::placeholder{
	color: hsla( 100, 30%, 60%, .5);
}




.commit{
	box-shadow: 0 0 4px 2px hsla( 100, 100%, 50%, .75);
}


.error{
	box-shadow: 0 0 4px 2px hsla( 360, 100%, 50%, .75);
}

.edit{
	box-shadow: none;
	transition: box-shadow 2s ease-in-out;
}
*/