@import url(http://fonts.googleapis.com/css?family=Droid+Sans);

body {
	margin-top: 6em;
	line-height: 2em;
	font-family: "Droid Sans";
	color: #333;
	text-align: center;
	background: #e3e3e1 url('images/background.png');
}

h2 {
	font-size: 28px;
	text-align: center;
}

h4 { margin: 0; }

p { margin: 2.5em; }

#container {
	display: block;
	margin: 0 auto;
	width: 800px;
	text-align: left;
}
	
	.blank-space {
		display: inline-block;
		margin-right: 2em;
	}

	/* Button */
	.button {
		display: inline-block;
		background: #fafafa;
		background: -moz-linear-gradient(top,  #fafafa 0%, #f4f4f4 40%, #e5e5e5 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fafafa), color-stop(40%,#f4f4f4), color-stop(100%,#e5e5e5));
		background: -webkit-linear-gradient(top,  #fafafa 0%,#f4f4f4 40%,#e5e5e5 100%);
		background: -o-linear-gradient(top,  #fafafa 0%,#f4f4f4 40%,#e5e5e5 100%); 
		background: -ms-linear-gradient(top,  #fafafa 0%,#f4f4f4 40%,#e5e5e5 100%);
		background: linear-gradient(to bottom,  #fafafa 0%,#f4f4f4 40%,#e5e5e5 100%); 
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#e5e5e5',GradientType=0 );
		border: 1px solid #aaa;
		padding: 5px 14px;
		color: #444;
		font-family: Helvetica, sans-serif;
		font-size: 12px;
		border-radius: 3px;
		box-shadow: 0 1px 3px #ddd;
		-webkit-transition: 0.2s linear;
		-moz-transition: 0.2s linear;
		-ms-transition: 0.2s linear;
		-o-transition: 0.2s linear;
		transition: 0.2s linear;
	}
	
	.button-disabled {
		background: #fafafa;
		background: -moz-linear-gradient(top,  #fafafa 0%, #f4f4f4 40%, #e5e5e5 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fafafa), color-stop(40%,#f4f4f4), color-stop(100%,#e5e5e5));
		background: -webkit-linear-gradient(top,  #fafafa 0%,#f4f4f4 40%,#e5e5e5 100%);
		background: -o-linear-gradient(top,  #fafafa 0%,#f4f4f4 40%,#e5e5e5 100%); 
		background: -ms-linear-gradient(top,  #fafafa 0%,#f4f4f4 40%,#e5e5e5 100%);
		background: linear-gradient(to bottom,  #fafafa 0%,#f4f4f4 40%,#e5e5e5 100%); 
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#e5e5e5',GradientType=0 );
		border-color: #aaa;
		color: #999;
		box-shadow: none;
	}
	
	.button:not(.button-disabled):hover {
		background: #fefefe;
		background: -moz-linear-gradient(top,  #fefefe 0%, #f8f8f8 40%, #e9e9e9 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefefe), color-stop(40%,#f8f8f8), color-stop(100%,#e9e9e9));
		background: -webkit-linear-gradient(top,  #fefefe 0%,#f8f8f8 40%,#e9e9e9 100%);
		background: -o-linear-gradient(top,  #fefefe 0%,#f8f8f8 40%,#e9e9e9 100%);
		background: -ms-linear-gradient(top,  #fefefe 0%,#f8f8f8 40%,#e9e9e9 100%);
		background: linear-gradient(to bottom,  #fefefe 0%,#f8f8f8 40%,#e9e9e9 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#e9e9e9',GradientType=0 );
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
		border: 1px solid #aaa;
	}
	
	.button:not(.button-disabled):active {
		background: #f4f4f4;
		background: -moz-linear-gradient(top,  #f4f4f4 0%, #efefef 40%, #dcdcdc 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(40%,#efefef), color-stop(100%,#dcdcdc));
		background: -webkit-linear-gradient(top,  #f4f4f4 0%,#efefef 40%,#dcdcdc 100%);
		background: -o-linear-gradient(top,  #f4f4f4 0%,#efefef 40%,#dcdcdc 100%);
		background: -ms-linear-gradient(top,  #f4f4f4 0%,#efefef 40%,#dcdcdc 100%);
		background: linear-gradient(to bottom,  #f4f4f4 0%,#efefef 40%,#dcdcdc 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#dcdcdc',GradientType=0 );
		box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
	}
	
	/* Radio Button & Checkbox */
	.radio, .checkbox {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		top: .5em;
		display: inline-block;
		background: #fafafa;
		background: -moz-linear-gradient(top,  #fafafa 0%, #dcdcdc 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fafafa), color-stop(100%,#dcdcdc));
		background: -webkit-linear-gradient(top,  #fafafa 0%,#dcdcdc 100%);
		background: -o-linear-gradient(top,  #fafafa 0%,#dcdcdc 100%);
		background: -ms-linear-gradient(top,  #fafafa 0%,#dcdcdc 100%);
		background: linear-gradient(to bottom,  #fafafa 0%,#dcdcdc 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#dcdcdc',GradientType=0 );
		position: relative;
		width: 15px;
		height: 15px;
		border-radius: 15px;
		border: 1px solid #aaa;
		box-shadow: inset 0 1px 2px #fff, 
						0 1px 2px #bbb;
		-webkit-transition: .1s linear;
		-moz-transition: .1s linear;
		-ms-transition: .1s linear;
		-o-transition: .1s linear;
		transition: .1s linear;
	}
	
	.checkbox {
		border-radius: 3px;
	}
	
	.radio:checked:after{
		content: '';
		display: inline-block;
		position: absolute;
		height: 5px;
		width: 5px;
		border-radius: 5px;
		background: #777;
		margin-left: .4em;
		margin-top: .4em;
		box-shadow: 0 1px 1px #fff;
	}
	
	.checkbox:checked:after{
		content: 'ν';
		display: inline-block;
		position: absolute;
		margin-left: 0.21em;
		margin-top: -0.25em;
		color: #444;
		font-weight: bolder ;
		font-size: 14px;
		text-shadow:  0 1px 1px #fff;
	}
	
	.radio:not(:disabled):active,
	.checkbox:not(:disabled):active {
  		background: #f0f0f0;
		background: -moz-linear-gradient(top,  #f0f0f0 0%, #bebebe 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f0f0), color-stop(100%,#bebebe));
		background: -webkit-linear-gradient(top,  #f0f0f0 0%,#bebebe 100%);
		background: -o-linear-gradient(top,  #f0f0f0 0%,#bebebe 100%);
		background: -ms-linear-gradient(top,  #f0f0f0 0%,#bebebe 100%);
		background: linear-gradient(to bottom,  #f0f0f0 0%,#bebebe 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#bebebe',GradientType=0 );
		box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
  		text-shadow: 0 1px 0 rgba(255,255,255,0.25);
	}

	.radio:not(:disabled):hover, 
	.checkbox:not(:disabled):hover {
		background: #ffffff;
		background: -moz-linear-gradient(top,  #ffffff 0%, #e6e6e6 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e6e6e6));
		background: -webkit-linear-gradient(top,  #ffffff 0%,#e6e6e6 100%);
		background: -o-linear-gradient(top,  #ffffff 0%,#e6e6e6 100%);
		background: -ms-linear-gradient(top,  #ffffff 0%,#e6e6e6 100%);
		background: linear-gradient(to bottom,  #ffffff 0%,#e6e6e6 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e6e6e6',GradientType=0 );
	}
	
	.radio:disabled, 
	.checkbox:disabled {
		border: 1px solid #bbb;
	}
	
	/* Select Box */
	.select {
		-webkit-appearance: button;
		-moz-appearance: button;
		appearance: button;
		display: inline-block;
		background: #fafafa;
		background: -moz-linear-gradient(top,  #fafafa 0%, #f4f4f4 40%, #e5e5e5 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fafafa), color-stop(40%,#f4f4f4), color-stop(100%,#e5e5e5));
		background: -webkit-linear-gradient(top,  #fafafa 0%,#f4f4f4 40%,#e5e5e5 100%);
		background: -o-linear-gradient(top,  #fafafa 0%,#f4f4f4 40%,#e5e5e5 100%);
		background: -ms-linear-gradient(top,  #fafafa 0%,#f4f4f4 40%,#e5e5e5 100%);
		background: linear-gradient(to bottom,  #fafafa 0%,#f4f4f4 40%,#e5e5e5 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#e5e5e5',GradientType=0 );
		padding: 6px 30px 6px 15px;
		border-radius: 3px;
		border: 1px solid #aaa;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
		color: #444;
	}
	
		.select:focus {
			outline: none;
		}
	
	.select-arrow { 
		display: inline-block;
		position: absolute;
		margin: .9em 0 0 -1.2em;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 5px solid #777;
	}
	
	/* Input Text */
	.input-text {
		padding: 7px;
		border: 1px solid #aaa;
		border-radius: 3px;
		box-shadow: inset 0 1px 7px rgba(0, 0, 0, 0.1);
	}
	
	.input-text:focus {
		outline: none;
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3);
	}