html,
		body {
			height: 100%;
		}

		/* body min-width is 992px because it's 960px grid + extra 16px from each side of the header */

		
		

		html,
		body,
		div,
		span,
		object,
		iframe,
		h1,
		h2,
		h3,
		h4,
		h5,
		h6,
		p,
		blockquote,
		pre,
		abbr,
		address,
		cite,
		code,
		del,
		dfn,
		em,
		img,
		ins,
		kbd,
		q,
		samp,
		small,
		strong,
		sub,
		sup,
		var,
		b,
		i,
		dl,
		dt,
		dd,
		ol,
		ul,
		li,
		 
		form,
		label,
	 
		table,
		caption,
		tbody,
		tfoot,
		thead,
		tr,
		th,
		td,
		article,
		aside,
		canvas,
		details,
		figcaption,
		figure,
		footer,
		header,
		hgroup,
		menu,
		nav,
		section,
		summary,
		time,
		mark,
		audio,
		video {
			margin: 0;
			padding: 0;
			border: 0;
			vertical-align: baseline;
		}

		small {
			font-size: 0.9em;
		}

		article,
		aside,
		details,
		figcaption,
		figure,
		footer,
		header,
		hgroup,
		menu,
		nav,
		section {
			display: block;
		}

		h1 {
			font-size: 2em;
			margin: 0 0 50px 0;
		}

		button {
			cursor: pointer;
		}

		p {
			padding: 5px 0;
		}

		a {
			text-decoration: none;
		}

		.btn {
			margin: 5px;
			font-size: 1.3em;
			font-weight: bold;
			border: 2px solid rgba(0, 0, 0, 0.2);
			display: inline-block;
			box-shadow: 0 -30px 30px -15px #00329B inset, 0 1px 0 rgba(255, 255, 255, 0.3) inset;
			background: #0088CC;
			background-repeat: repeat-x;
			color: #FFF;
			text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
			border-radius: 7px;
			padding: 10px 20px;
			-webkit-transition: 0.15s;
			transition: 0.15s;
		}

		.btn:hover {
			background: #0068BA;
		}

		.btn:active {
			box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3), 0 -30px 30px -15px #00329B inset, 0 0 6px #00243F inset;
		}

		.btn.github {
			float: right;
		}

		#wrap {
			padding: 50px;
			width: 860px;
			background-color: #FFF;
			margin: 20px auto;
			border: 1px dashed #AAA;
			position: relative;
		}

		.options {
			position: absolute;
			top: -1px;
			right: -1px;
			background-color: #F1F1F1;
			padding: 4px 0;
			border-left: 1px dashed #AAA;
			border-bottom: 1px dashed #AAA;
		}

		.options label {
			cursor: pointer;
			margin: 0 10px;
		}

		input,
		textarea {
			border: 1px solid #D1D1D1;
		}

		input,
		select {
			font-size: inherit;
			margin: 0;
		}

		input:focus,
		textarea:focus {
			border-color: #AAA;
		}

		input[type=number]::-webkit-inner-spin-button,
		input[type=number]::-webkit-outer-spin-button {
			-webkit-appearance: none;
			margin: 0;
		}

		input[type=checkbox] {
			width: auto;
			border: none;
			bottom: -1px;
			cursor: pointer;
			margin: 2px 8px 0 0;
			position: relative;
			transform: scale(1.2);
		}

		button {
			font-size: 1.1em;
			padding: 5px 25px;
		}

		/* Tooltips helpers */

		.field .tooltip {
			float: left;
			top: 2px;
			left: 7px;
			position: relative;
			z-index: 2;
		}

		.field .tooltip:hover {
			z-index: 3;
		}

		.field .tooltip>span {
			display: inline-block;
			width: 15px;
			height: 15px;
			line-height: 15px;
			font-size: 0.9em;
			font-weight: bold;
			text-align: center;
			color: #FFF;
			cursor: help;
			background-color: #00AEEF;
			position: relative;
			border-radius: 10px;
		}

		.field .tooltip .content {
			opacity: 0;
			width: 200px;
			background-color: #333;
			color: #FFF;
			font-size: 0.9em;
			position: absolute;
			top: 0;
			left: 20px;
			padding: 8px;
			border-radius: 6px;
			pointer-events: none;
			transition: 0.2s cubic-bezier(0.1, 0.1, 0.25, 2);
			-webkit-transition: 0.3s cubic-bezier(0.1, 0.2, 0.5, 2.2);
			-moz-transition: 0.3s cubic-bezier(0.1, 0.2, 0.5, 2.2);
		}

		.field .tooltip p {
			padding: 0;
		}

		.field .tooltip.down .content {
			left: auto;
			right: 0;
			top: 30px;
		}

		.field .tooltip:hover .content {
			opacity: 1;
			left: 36px;
		}

		.field .tooltip .content b {
			height: 0;
			width: 0;
			border-color: #333 #333 transparent transparent;
			border-style: solid;
			border-width: 9px 7px;
			position: absolute;
			left: -14px;
			top: 8px;
		}

		.field .tooltip.down .content b {
			left: auto;
			right: 6px;
			top: -10px;
			border-width: 5px;
			border-color: transparent #333 #333 transparent;
		}

		/* alerts (when validation fails) */

		.field .alert {
			float: left;
			margin: -2px 0 0 20px;
			padding: 3px 10px;
			color: #FFF;
			border-radius: 3px 4px 4px 3px;
			background-color: #CE5454;
			max-width: 170px;
			white-space: pre;
			position: relative;
			left: -15px;
			top: 9px;
			opacity: 0;
			z-index: 1;
			transition: 0.15s ease-out;
		}

		.field .alert::after {
			content: '';
			display: block;
			height: 0;
			width: 0;
			border-color: transparent #CE5454 transparent transparent;
			border-style: solid;
			border-width: 11px 7px;
			position: absolute;
			left: -13px;
			top: 1px;
		}

		.field.bad .alert {
			left: 0;
			opacity: 1;
		}


		@keyframes shake {
			15% {
				transform: translateX(-5px);
			}
			30% {
				transform: translateX(5px);
			}
			45% {
				transform: translateX(-3px);
			}
			60% {
				transform: translateX(3px);
			}
			75% {
				transform: translateX(2px);
			}
			100% {
				transform: none;
			}
		}

		@-webkit-keyframes shake {
			25% {
				-webkit-transform: translateX(-6px);
			}
			75% {
				-webkit-transform: translateX(6px);
			}
		}

		form fieldset {
			clear: both;
			margin: 0 0 10px 0;
		}

		form .field {
			padding: 5px 0;
			position: relative;
			/* height: 2em; */
		}

		form .field.fields {
			height: auto;
		}

		.field label,
		.field .label {
			cursor: pointer;
		}

		.field label>span:first-child,
		.field .label {
			float: left;
			width: 160px;
			text-transform: capitalize;
			line-height: 2em;
		}

		/* .field input,
		.field textarea {
			float: left;
			padding: 3px 4px;
			width: 210px;
			-webkit-transition: 0.2s;
			-moz-transition: 0.2s;
			transition: 0.2s;
		} */

		.field input[type=checkbox] {
			width: auto;
		}

		.label~label {
			vertical-align: middle;
			margin: 0.3em 1.2em 0 0;
		}

		.field input.short {
			width: 90px;
		}

		.field input:focus:not([type="checkbox"]),
		.field textarea:focus {
			box-shadow: 0 0 4px #00AEEF;
			border: 1px solid #00AEEF;
		}
 

		.field select {
			float: left;
			width: 220px;
			padding: 2px 0;
			margin: 0;
			border: 1px solid #CCC;
			text-transform: capitalize;
		}

		.field select option {
			padding: 1px;
		}

		.field>.extra {
			float: left;
			font-size: 0.9em;
			color: #999;
			line-height: 2em;
			margin-left: 13px;
		}

		.field.multi .input {
			float: left;
		}

		.field.multi input {
			float: left;
			margin-right: 5px;
			width: 35px;
			text-align: center;
		}

		form .field.multi input:nth-last-child(-n+2) {
			margin: 0;
		}

		.field.fields input {
			border-top: 5px solid #E1E1E1;
			margin: 0 0 0 160px;
		}

		.bad input,
		.bad select,
		.bad textarea {
			border: 1px solid #CE5454;
			box-shadow: 0 0 4px -2px #CE5454;
			position: relative;
			left: 0;
			animation: .4s 1 shake ease;
			-moz-animation: .4s 1 shake ease;
			-webkit-animation: 0.4s 1 shake ease;
		}


		/* mode2 - where the label's text is above the field and not next to it
--------------------------------------------------------------------------- */

		.mode2 .field {
			float: left;
			clear: left;
			margin-bottom: 30px;
			height: auto;
			padding: 0;
			zoom: 1;
		}

		.mode2 .field.bad {
			margin-bottom: 8px;
		}

		.mode2 .field::before,
		.mode2 .field::after {
			content: '';
			display: table;
		}

		.mode2 .field::after {
			clear: both;
		}

		.mode2 .field label span {
			float: none;
			display: block;
			line-height: inherit;
		}

		.mode2 .field input:not(type="checkbox"),
		.field textarea {
			width: 250px;
			margin: 0;
		}

		.mode2 .field textarea {
			width: 350px;
			margin: 0;
		}

		.mode2 .field select {
			width: 260px;
			float: none;
		}

		.mode2 .field.multi label {
			float: none;
		}

		.mode2 .field.multi input {
			float: left;
			margin-right: 5px;
			width: 35px;
			text-align: center;
		}

		.mode2 .field .tooltip {
			left: auto;
			position: absolute;
			right: -22px;
			top: 19px;
		}

		.mode2 .field .alert::after {
			display: none;
		}

		.mode2 .field .alert {
			float: none;
			clear: left;
			margin: 0;
			padding: 0 5px;
			border-radius: 0 0 3px 3px;
			max-width: 100%;
			height: 22px;
			line-height: 1.8em;
		}

		.mode2 .field>.extra {
			position: absolute;
			right: 0;
		}