/* @override 
	http://web.mamp.xyz/maku/css/global.css?* */
	
/* Global CSS — Applies to the entire site
	Version: 0.1 */

/* @group Structure */

.centered, .contained { margin-right: auto; margin-left: auto; }

.contained { max-width: var(--max-width); }

.block, .brick, .box, .row, .sub-row { display: block; overflow: hidden; }

.brick { float: left; width: 100%; }

.houdini { display: none; }

.nowrap { white-space: nowrap; overflow: hidden; }

.row, .sub-row { width: 100%; clear: both; }

.screen-reader-only {
	position: absolute;
	height: 1px;
	width: 1px;
	clip: rect(1px 1px 1px 1px); /* IE 6 and 7 */
	clip: rect(1px,1px,1px,1px);
	clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
	-webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
	overflow: hidden !important;
}

/* @end */

/* @group Global Padding */

.padded { padding: var(--base); }
.pdd-v, .pdd-t { padding-top: var(--base); }
.pdd-v, .pdd-b { padding-bottom: var(--base); }
.pdd-h, .pdd-l { padding-left: var(--base); }
.pdd-h, .pDd-r { padding-right: var(--base); }

.padded-tiny { padding: var(--base-tiny); } 
.pdd-v-tiny, .pdd-t-tiny { padding-top: var(--base-tiny);}
.pdd-v-tiny, .pdd-b-tiny { padding-bottom: var(--base-tiny); }
.pdd-h-tiny, .pdd-l-tiny { padding-left: var(--base-tiny); }
.pdd-h-tiny, .pdd-r-tiny { padding-right: var(--base-tiny); }

.padded-xtra { padding: var(--base-xtra); } 
.pdd-v-xtra, .pdd-t-xtra { padding-top: var(--base-xtra);}
.pdd-v-xtra, .pdd-b-xtra { padding-bottom: var(--base-xtra); }
.pdd-h-xtra, .pdd-l-xtra { padding-left: var(--base-xtra); }
.pdd-h-xtra, .pdd-r-xtra { padding-right: var(--base-xtra); }

/* @end */

/* @group Global Spacing */

.spaced { margin: var(--base); }
.spd-v, .spd-t { margin-top: var(--base); }
.spd-v, .spd-b { margin-bottom: var(--base); }
.spd-h, .spd-l { margin-left: var(--base); }
.spd-h, .spd-r { margin-right: 24px; }

.spaced-tiny {  margin: var(--base-tiny); }
.spd-v-tiny, .spd-t-tiny { margin-top: var(--base-tiny); }
.spd-v-tiny, .spd-b-tiny { margin-bottom: var(--base-tiny); }
.spd-h-tiny, .spd-l-tiny { margin-left: var(--base-tiny); }
.spd-h-tiny, .spd-r-tiny { margin-right: var(--base-tiny); }

.spaced-xtra {  margin: var(--base-xtra); }
.spd-v-xtra, .spd-t-xtra { margin-top: var(--base-xtra); }
.spd-v-xtra, .spd-b-xtra { margin-bottom: var(--base-xtra); }
.spd-h-xtra, .spd-l-xtra { margin-left: var(--base-xtra); }
.spd-h-xtra, .spd-r-xtra { margin-right: var(--base-xtra); }

/* @end */

/* @group Global Rounding */

.rounded { border-radius: var(--radius); }
.rnd-t, .rnd-tl, .rnd-dl { border-top-left-radius: var(--radius); }
.rnd-t, .rnd-tr, .rnd-dr { border-top-right-radius: var(--radius); }
.rnd-b, .rnd-bl, .rnd-dr { border-bottom-left-radius: var(--radius); }
.rnd-b, .rnd-br, .rnd-dl { border-bottom-right-radius: var(--radius); }

.rounded-tiny { border-radius: var(--radius-tiny); }
.rnd-t-tiny, .rnd-tl-tiny, .rnd-dl-tiny { border-top-left-radius: var(--radius-tiny); }
.rnd-t-tiny, .rnd-tr-tiny, .rnd-dr-tiny { border-top-right-radius: var(--radius-tiny); }
.rnd-b-tiny, .rnd-bl-tiny, .rnd-dr-tiny { border-bottom-left-radius: var(--radius-tiny); }
.rnd-b-tiny, .rnd-br-tiny, .rnd-dl-tiny { border-bottom-right-radius: var(--radius-tiny); }

.rounded-xtra { border-radius: var(--radius-xtra); }
.rnd-t-xtra, .rnd-tl-xtra, .rnd-dl-xtra { border-top-left-radius: var(--radius-xtra); }
.rnd-t-xtra, .rnd-tr-xtra, .rnd-dr-xtra { border-top-right-radius: var(--radius-xtra); }
.rnd-b-xtra, .rnd-bl-xtra, .rnd-dr-xtra { border-bottom-left-radius: var(--radius-xtra); }
.rnd-b-xtra, .rnd-br-xtra, .rnd-dl-xtra { border-bottom-right-radius: var(--radius-xtra); }

/* @end */

/* @group Global Classes */

.left { display: block; float: left; }
.right { display: block; float: right;  }

.nobr { white-space: nowrap; }
.clear { clear: both; }

/* @end */

/* @group Zero Space */

.zero { margin: 0 !important; }
.zr-v, .zr-t { margin-top: 0 !important; }
.zr-v, .zr-b { margin-bottom: 0 !important; }
.zr-h, .zr-l { margin-left: 0 !important; }
.zr-h, .zr-r { margin-right: 0 !important; }

/* @end */

/* @group Forms */

form, fieldset { margin: 0; padding: 0; }

form, button, fieldset, input, legend  { box-sizing: border-box; }

form .row { font-size: 0; }

label {
	background-color: rgba(0, 0, 255, 0.25);
	display: inline-block;
	height: var(--input-height);
	line-height: var(--form-base-height);
	font-size: var(--form-font-size);
}

input {
	background-color: rgb(255, 255, 255);
}

input:not([type='checkbox']):not([type='radio']), button, select:not([multiple]) {
	-webkit-appearance: none;
	width: 16px;
	min-width: var(--form-base-width);
	height: var(--form-base-height);
	margin: 0;
	padding: 0 ;
	vertical-align: top;
	font-size: var(--form-font-size);
	border: 1px solid rgb(128, 128, 128);
	border-radius: var(--form-base-radius);
}

select:not([multiple]) {
	background-color: rgb(240, 240, 240);
	padding-left: 8px;
	padding-right: var(--form-base-height);
	background-image: url(../pix/bg-select.svg);
	background-repeat: no-repeat;
	background-position-y: top;
	background-position-x: right;
}

button {
	background-color: rgb(224, 224, 224);
}

/* @end */