/*	Contact
	================================================ */

/*	General
	================================================ */

	form#contact {
		background-color: white;
		padding: 0;
		background-color: #f0f0f0;
		padding: 1em;
		background-image: linear-gradient(to bottom, #f8f8f8, #f0f0f0);
	}

	form#contact fieldset {
		border: none;
		margin: 0px;
	}

	form#contact>fieldset p {
		margin: 0;
		padding: 0;
	}

	form#contact label {
		display: block;
		padding: .5em 0em 0em 0em;
		line-height: 1.5;
		border: none;
		background-color: white;
		background-color: transparent;
		position: relative;
		font-weight: bold;
	}

	form#contact input[type="text"],
	form#contact input[type="email"],
	form#contact textarea {
		border: thin solid #ccc;
		font-family: "Source Code Pro", monospace;
		font-size: .9rem;
		padding: .5em .75em;
		width: calc(100% - 1.5em);
		margin-top: .25em;
		border: none;
	}
	form#contact input[type="text"][readonly],
	form#contact input[type="email"][readonly],
	form#contact textarea[readonly] {
		color: #999;
	}

/*	Common
	================================================ */

	form#contact textarea  {
		height:  4em;
	}

	form#contact span.button,
	form#contact button {
		width: 12em;
		font-size: 1em;
		padding: .25em;
		text-transform: uppercase;

		background-color: #7B9061;
		color: white;

		border: thin solid #999;
	}

	form#contact span.button {
		background-color: #C0DF96;
		padding: .25em .5em;
	}
	form#contact button[name="preview"] {
		margin-left: calc(100% - 12em);
	}
	form#contact button[name="review"] {
		margin-left: calc(100% - 25em);
	}
	form#contact button[name="send"] {
		margin-left: 1em;
	}

	form#contact button[type="submit"] {
		cursor: url("/css/send.png") 8 8, auto;
	}


	form#contact button+button{
		margin-left: 12px;
	}

/*	Validation
	================================================ */

	form#contact input[type="text"][required], form#contact textarea[required]  {
		border-color: #999;
	}

	form#contact :invalid {
		box-shadow: none;
	}

	form#contact textarea+span:before,
	form#contact input+span:before {
		font-size: .8em;
		font-weight: bold;
		display: block;
		position: absolute;
		right: 1em;
		top: .375em;
		padding: .25em .75em;
	}
	p>span.required {
		padding: .125em .5em;
	}
	form#contact :required:invalid+span:before {
		content: attr(data-error);
		content: "*";
	}
	form#contact :required:invalid:focus+span:before {
		content: attr(data-error);
	}
	p>span.required,
	form#contact :required:invalid+span:before {
		background-color: #fee;
		border: thin solid #fdd;		
	}
	p>span.required,
	form#contact :required:invalid:focus+span:before {
		background-color: #fee;
		border: thin solid #fdd;	
	}
	form#contact :required:valid+span:before {
		content: "✓";
		background-color: #efe;
		border: thin solid #dfd;
	}

	form#contact:invalid button[type="submit"] {
		opacity: .3;
		pointer-events: none;
		cursor: not-allowed;
	}