h1 {
	margin: 0;
	font: bold 20px Verdana, Geneva, sans-serif;
	text-align: center;
}

form {
	width: 780px;
	margin: 10px auto 0;
	border: 1px solid #ccc;
	border-radius: 10px;
}

	form p {
		position: relative;
		margin: 0;
		padding: 15px 10px;
		font: normal 12px Verdana, Geneva, sans-serif;
		border-bottom: 1px solid #ccc;
	}

	form label {
		display: inline-block;
		float: center;
		width: 150px;
		margin-top: 3px;
		padding: 2px 0;
	}

	form input[type=radio] + label, form input[type=checkbox] + label {
		display: inline;
		float: none;
		width: auto;
		margin: 0 20px 0 0;
		padding: 0;
		cursor: pointer;
	}
	
	form input[type=radio], form input[type=checkbox] {
		cursor: pointer;
	}
		
	form input, form textarea, form button {
		outline: none;
		
		-webkit-transition: width .2s ease-in-out;
		   -moz-transition: width .2s ease-in-out;
			 -o-transition: width .2s ease-in-out;
				transition: width .2s ease-in-out;
	}
	
		input::-webkit-input-placeholder {
			color: #145aa4;
			font-style: italic;
		}
		input:-moz-placeholder, input::-moz-placeholder {
			color: #145aa4;
			font-style: italic;
		}
		input:-ms-input-placeholder {
			color: #145aa4;
			font-style: italic;
		}

	form input[type=text], form input[type=email], form input[type=url], form input[type=tel], form textarea {
		width: 250px;		
		height: 20px;
		padding: 2px 24px 2px 4px;
		
		border: 1px solid #ccc;
		box-shadow: 0 0 3px #ccc, inset 0 -10px 20px #eee;
		border-radius: 3px;
	}
	
		form textarea {
			width: 300px;
			height: 10em;
		}
		
	form input:required, form textarea:required {
		background: url(../images/star.png) no-repeat 99% 50%;
	}
	
		form span.req {
			display: inline-block;
			width: 16px;
			height: 16px;
			background: url(../images/star.png) no-repeat 0 0;
			vertical-align: bottom;
		}

	form input[type=text]:focus, form input[type=email]:focus, form input[type=url]:focus, form input[type=tel]:focus, form textarea:focus {
		width: 300px;
		border: 1px solid #197de7;
		box-shadow: 0 0 3px #197de7;
	}

		form textarea:focus {
			width: 400px;
		}

		form input:focus:invalid, form textarea:focus:invalid,
		form input:not(:required):invalid, form textarea:not(:required):invalid {
			background: url(../images/exclamation.png) no-repeat 99% 50%;
		}

		form input:required:valid, form textarea:required:valid,
		form input:focus:not(:required):valid, form textarea:focus:not(:required):invalid {
			background: url(../images/accept.png) no-repeat 99% 50%;
		}
	
	form input + span.help {
		position: relative;
		margin-left: 30px;
		padding: 8px;
		opacity: 0;
		color: white;
		background: #478ad1;
		border-radius: 3px;
		z-index: 999;
		-webkit-transition: all .5s ease-in-out; 
		   -moz-transition: all .5s ease-in-out; 
			 -o-transition: all .5s ease-in-out; 
				transition: all .5s ease-in-out;
	}
	
		form input + span.help::before {
			content: "\25C0";
			position: absolute;
			top: 3px;
			left: -8px;
			font-size: 150%;
			color: #478ad1;
		}

		form input:focus + span.help {
			margin-left: 15px;
			opacity: 1;
		}
		
	form input[type=radio], form input[type=checkbox] {
		visibility: hidden;
	}

		form input[type=radio] + label, form input[type=checkbox] + label {
			position: relative;
			padding-left: 2px;
		}
	
			form input[type=radio] + label::before, form input[type=checkbox] + label::before {
				content: "";
				position: absolute;
				display: block;
				top: -1px;
				left: -20px;
				width: 16px;
				height: 16px;
				background: #999;
				box-shadow: 0px 1px 2px rgba(0,0,0,0.5);
			}
		
			form input[type=radio] + label::after, form input[type=checkbox] + label::after {
				content: "";
				position: absolute;
				display: block;
				top: 2px;
				left: -17px;
				width: 8px;
				height: 4px;
				border-left: 3px solid #eee;
				border-bottom: 3px solid #eee;
				box-shadow: 0px 1px 2px rgba(0,0,0,0.5);
				opacity: 0;
				
				-webkit-transform: rotate(-45deg);
				   -moz-transform: rotate(-45deg);
					 -o-transform: rotate(-45deg);
						transform: rotate(-45deg);
				
				-webkit-transition: all .2s ease-in-out;
				   -moz-transition: all .2s ease-in-out;
					 -o-transition: all .2s ease-in-out;
						transition: all .2s ease-in-out;
			}

			form input[type=radio] + label::before {
				border-radius: 50%;
			}

				form input[type=radio]:hover + label::after, form input[type=checkbox]:hover + label::after {
					opacity: .3;
				}

				form input[type=radio]:checked + label::after, form input[type=checkbox]:checked + label::after {
					opacity: 1;
			}

	form button {
		display: inline-block;
		margin: 10px 266px;
		padding: 6px 20px;
		font-weight: bold;
		text-align: center;
		color: #fff;
		text-shadow: 1px 1px 0 #143a64;
		background: #017cff;
		border: 1px solid #114e8f;
		border-radius: 5px;
		box-shadow: inset 0 -15px 5px rgba(0,0,0,.3), inset 0 1px 1px rgba(255,255,255,.7);
		cursor: pointer;
	}
	
		form button:hover {
			box-shadow: inset 0 -15px 10px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,255,255,.7);
		}
		
		form button:active {
			box-shadow: inset 0 15px 10px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,255,255,.7);
		}
		
		form button:focus {
			opacity: .8;
		}