/*  Breakpoints
    ---
*/
body:before {
	content: 'mobile-sm';
	display: none;
}

/* Mobile Small */
@media (min-width: 320px) {
	body:before {
		content: 'mobile-sm';
	}
}						

/* Mobile Wide */
@media (min-width: 360px) {
	body:before {
		content: 'mobile-lg';
	}
}					

/* Tablet Narrow */
@media (min-width: 768px) {
	body:before {
		content: 'tablet';
	}
}

/* Desktop */
@media (min-width: 1000px) {
	body:before {
		content: 'desktop';
	}
}


/*  Margins
    ---
*/

/* No Margin Classes */
.mtn {	margin-top: 0; 		}
.mbn {	margin-bottom: 0; 	}
.mrn {	margin-right: 0; 	}
.mln {	margin-left: 0; 	}
.man {	margin: 0;			}

/* Margin Tiny */
.mtt {	margin-top: 2px; 		}
.mbt {	margin-bottom: 2px; 	}
.mrt {	margin-right: 2px; 		}
.mlt {	margin-left: 2px; 		}

/* Small margins */
.mas { 	margin: 5px; 			}
.mts { 	margin-top: 5px; 		}
.mrs { 	margin-right: 5px; 		}
.mbs { 	margin-bottom: 5px; 	}
.mls { 	margin-left: 5px; 		}

/* Medium margins */
.mam { 	margin: 10px; 			}
.mtm { 	margin-top: 10px; 		}
.mrm { 	margin-right: 10px; 	}
.mbm { 	margin-bottom: 10px; 	}
.mlm { 	margin-left: 10px; 		}

/* Margin Large */
.mtl {	margin-top: 20px; 		}
.mbl {	margin-bottom: 20px; 	}
.mrl {	margin-right: 20px; 	}
.mll {	margin-left: 20px; 	}

/* Margin X-Large */
.mtx {	margin-top: 3em; 		}
.mbx {	margin-bottom: 3em; 	}
.mrx {	margin-right: 3em; 		}
.mlx {	margin-left: 3em; 		}

/* Padding Small */
.pas {	padding: 5px;			}
.pts { 	padding-top: 5px;		}
.pbs {	padding-bottom: 5px;	}
.prs {	padding-right: 5px;		}
.pls {	padding-left: 5px;		}

/* Padding Medium */
.pam {	padding: 10px;			}
.ptm {	padding-top: 10px;		}
.pbm {	padding-bottom: 10px;	}
.prm {	padding-right: 10px;	}
.plm {	padding-left: 10px;		}

/* Padding Large */
.pal {	padding: 20px;			}
.ptl {	padding-top: 20px;		}
.pbl {	padding-bottom: 20px;	}
.prl {	padding-right: 20px;	}
.pll {	padding-left: 20px;	}

/* Padding X-large */
.pax {	padding: 2.0em;			}
.ptx {  padding-top: 2.0em;     }
.pbx {  padding-bottom: 2.0em;  }
.prx {  padding-right: 2.0em;   }
.plx {  padding-left: 2.0em;    }

/**********************************/
/* Form Validation                */
/**********************************/

/*	Form Validation
	---
	validate.js classes.

	<label class="error">Form Label</label>
	<input class="required error" name="required-field" />
*/
	.required{}
		.required.error,
		.required.error:focus{
			border: 1px solid #ef8989;
		}
		.required.success,
		.required.success:focus{
			border: 1px solid #83b860;
		}

	label.error{
	  color: #B94A48;
	  background: none;
	}
	label.success{
	  color: #008000;
	  background: none;
	}

/* Utility Classes */
.text-disabled{ cursor: not-allowed; }
.help { cursor: help; }
.hide { display: none; }
.show { display: block; }
.nowrap { white-space: nowrap; }
.move-control { cursor: move; }

/* Avoid using these. */
.inline{ display: inline; }
.inline-block{ display: inline-block; }


/*  Typography
    ===
*/
.ellipsis {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}