/*	Most of following classes have two versions: small and medium,
		therefore the suffixes S & M.
	*/

	/*	Bottom padding, border and margin */
	.pb-s { padding-bottom: 0.5em; }
	.pb-m { padding-bottom: 1em; }
	.bb-s {  border-bottom: 1px solid #ddd; }
	.bb-m {  border-bottom: 1px solid #ccc; }
	.mb-s {  margin-bottom: 0.5em; }
	.mb-m {  margin-bottom: 1em; }

	.mb-xs { margin-bottom: 2px; }
	.mt-xs {    margin-top: 2px; }
	.mr-xs {  margin-right: 2px; }
	.ml-xs {   margin-left: 2px; }

	/*	Top padding, border and margin */
	.pt-s { padding-top: 0.5em; }
	.pt-m { padding-top: 1em; }
	.bt-s {  border-top: 1px solid #ddd; }
	.bt-m {  border-top: 1px solid #ccc; }
	.mt-s {  margin-top: 0.5em; }
	.mt-m {  margin-top: 1em; }

	/*	Right padding, border and margin */
	.pr-s { padding-right: 0.5em !important; }
	.pr-m { padding-right: 1em !important; }
	.br-s {  border-right: 1px solid #ddd; }
	.br-m {  border-right: 1px solid #ccc; }
	.mr-s {  margin-right: 0.5em; }
	.mr-m {  margin-right: 1em; }

	/*	Left padding, border and margin */
	.pl-s { padding-left: 0.5em; }
	.pl-m { padding-left: 1em; }
	.bl-s {  border-left: 1px solid #ddd; }
	.bl-m {  border-left: 1px solid #ccc; }
	.ml-s {  margin-left: 0.5em; }
	.ml-m {  margin-left: 1em; }

	/*	Text alignment */
	.a-l { text-align: left !important; }
	.a-r { text-align: right !important; }
	.a-c { text-align: center; }

	/*	Vertical alignment */
	.va-t { vertical-align: top !important; }
	.va-b { vertical-align: bottom !important; }
	.va-m { vertical-align: middle !important; }

	/* Floats */
	.f-l { float: left; }
	.f-r { float: right; }

	/*	Vertical (top and bottom) paddings for simulating thick borders */
	/*	Vertical (top and bottom) padding */
	.vbox-s
	{ padding-top: 0.5em; padding-bottom: 0.5em; }
	/*	Vertical (top and bottom) padding */
	.vbox-m
	{ padding-top: 1em; padding-bottom: 1em; }

	/*	Horizontal (left and right) padding */
	.hbox-s
	{ padding-left: 0.5em !important; padding-right: 0.5em !important; }
	/*	Horizontal (left and right) padding */
	.hbox-m
	{ padding-left: 1em; padding-right: 1em }

	/*	Padding for thick-borders */
	.pb-b { padding-bottom: 3px; }
	.pt-b {    padding-top: 3px; }
	.pr-b {  padding-right: 3px; }
	.pl-b {   padding-left: 3px; }

	.mb-b {  margin-bottom: 3px; }
	.mt-b {     margin-top: 3px; }
	.mr-b {   margin-right: 3px; }
	.ml-b {    margin-left: 3px; }

	.hbox-b
	{ padding-left: 3px !important; padding-right: 3px !important; }
	.vbox-b
	{ padding-top: 3px !important; padding-bottom: 3px !important; }

	.small { font-size: 11px; }
	.bold { font-weight: bold; }
	.bold-off { font-weight: normal !important; }

	/*	Percentual widths */
	.w-100pc { width: 100%; }
	.w-99pc  { width: 99%; }
	.w-90pc  { width: 90%; }
	.w-70pc  { width: 70%; }
	.w-60pc  { width: 60%; }
	.w-50pc  { width: 50%; }
	.w-40pc  { width: 40%; }
	.w-30pc  { width: 30%; }
	.w-20pc  { width: 20%; }

	/*	EM based widths */
	.w-1em   { width: 1em; }
	.w-2em   { width: 2em; }
	.w-3em   { width: 3em; }
	.w-4em   { width: 4em; }
	.w-5em   { width: 5em; }
	.w-6em   { width: 6em; }
	.w-7em   { width: 7em; }
	.w-10em  { width: 10em; }
	.w-15em  { width: 15em; }
	.w-20em  { width: 15em; }

	/*	Width optimal for cca 66 characters per line */
	.w-text
	{ width: 44em; }

	/*	Layout widths are intended to be used with 2 or 3-column layouts.
		All 4 classes can be combined:
		w-c3-s | w
	*/

	/*	3-column layout small bar */
	.w-c3-s
	{ width: 19%; }
	/*	3-column layout main bar */
	.w-c3-m
	{ width: 62%; }

	/*	2-column layout small bar */
	.w-c2-s
	{ width: 19%; }
	/*	2-column layout small bar */
	.w-c2-m
	{ width: 81%; }

	/*	2-column golden-section layout small bar */
	.w-c2g-s
	{ width: 38%; }
	/*	2-column golden-section layout small bar */
	.w-c2g-m
	{ width: 62%; }

	/*	Minimal width usable in TABLE.grid style tables. */
	.w-min
	{ width: 1em; white-space: nowrap; }

	/*	EM-based heights */
	.h-3em
	{ height: 3em; }
	.h-5em
	{ height: 5em; }
	.h-10em
	{ height: 10em; }
	.h-20em
	{ height: 20em; }

	.d-block
	{ display: block; }
	.d-image
	{ display: inline-block; }