/*
 * BAND LAYOUT
 */

[layout="band"] {
	display: table;
}

[layout="band"] label {
	font-weight: bold;
	width: 100px;
	text-align: right;
	padding-right: 10px;
}

[layout="band"] > div > * {
	display: table-cell;
	vertical-align: middle;
}

[layout="band"] > div {
	padding: 3px 0;
}


/*
 * FORM LAYOUT
 */

[layout="form"] > div {
	margin-bottom: 8px;
}

[layout="form"] > div > label {
	font-weight: bold;
/*	width: 100px;*/
	text-align: left;
	padding-left: 5px;
	display: block;
}





/*
 * BAR LAYOUT
 */

[layout="bar"] {
/*	display: table;
	width: 100%;*/
/*	padding: 3px;*/
}

[layout="bar"] > * {
	display: inline-block;
/*	margin: 0 3px;*/
	vertical-align: middle;
}

[layout="bar"] > .control {
	display: inline-table;
	vertical-align: middle;
}

[layout="bar"] > *:not(:last-child) {
	margin-right: 6px;	
}


[layout="bar"].align-left {
/*	float: left;*/
	text-align: left;
}

[layout="bar"].align-right {
/*	float: right;*/
	text-align: right;
}


[layout="bar"].align-center {
	text-align: center;
}




/*
 * HBOX LAYOUT
 */

[layout="hbox"] > * {
	display: inline-block;
	vertical-align: middle;
}

[layout="hbox"] > .control {
	display: inline-table;
	vertical-align: middle;
}

[layout="hbox"].align-left {
	text-align: left;
}

[layout="hbox"].align-right {
	text-align: right;
}


[layout="hbox"].align-center {
	text-align: center;
}



/*
 * ROW LAYOUT
 */

[layout="row"] {
	padding: 4px;
}

[layout="row"] > * {
	display: inline-block;
	vertical-align: middle;
	margin: 0 4px;
}

[layout="row"].left {
	text-align: left;
}

[layout="row"].right {
	text-align: right;
}


[layout="row"].center {
	text-align: center;
}





/*
 * VBOX LAYOUT
 */

[layout="vbox"] > * {
	display: block;
}

[layout="vbox"] > .control {
	display: table;
}



/*
 * STACK LAYOUT
 */

[layout="stack"] {
}

[layout="stack"] > * {
	display: block;
}

[layout="stack"] > .control {
	display: table;
}

[layout="stack"] > *:not(:last-child) {
	margin-bottom: 8px;
}




/*
 * COLUMN LAYOUT
 */

[layout="column"] {
	display: table;
}

[layout="column"] > * {
	display: table-cell;
	vertical-align: middle;
}


[layout="column"] > *.align-top {
	vertical-align: top;
}

[layout="column"] > *.align-middle {
	vertical-align: middle;
}

[layout="column"] > *.align-bottom {
	vertical-align: bottom;
}




/*
 * GRID LAYOUT
 */

[layout="grid"] {
	display: table;
	width: 100%;
}

[layout="grid"] > div {
	float: left;
}


.col-1 { width: 8.3333%; }
.col-2 { width: 16.6666%; }
.col-3 { width: 25%; }
.col-4 { width: 33.3333%; }
.col-5 { width: 41.6666%; }
.col-6 { width: 50%; }
.col-7 { width: 58.3333%; }
.col-8 { width: 66.6666%; }
.col-9 { width: 75%; }
.col-10 { width: 83.3333%; }
.col-11 { width: 91.6666%; }
.col-12 { width: 100%; }




/*
 * FLUID LAYOUT
 */

[layout="fluid"] > * {
	float: left;
}


[layout="fluid"].align-left > * {
	float: left;
}

[layout="fluid"].align-right > * {
	float: right;
}


[layout="fluid"] > .pull-left {
	float: left;
}

[layout="fluid"] > .pull-right {
	float: right;
}




/*
[layout="fluid"] > *:after {
	clear: both;
}
*/


/*
 * CENTER LAYOUT
 */

[layout="center"] {
	position: absolute;
	left: 50%;
	top: 50%;
}