body
{
	font-family: "DejaVu Sans Mono", "Courier New", Courier, monospace;
	font-size:  12pt;
	padding:    0;
	background: #fff;
	background-image: none;
	color:      #000;
	line-height:    1.2; /*small spaces between lines*/
	white-space:    normal; /*line breaks at page width and at <br/>*/
}

div {
	color: #501;
	font-size: 10pt;
}

div.main {
	max-width: 80em;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	height: 100%;
}

table, form, div.path {
	font-size: 10pt;
	word-wrap: break-word;
}

input, textarea, button, select {
	font-family: inherit;
	font-size: 10pt;
}

button {
	padding-left: 2px;
	padding-right: 2px;
}

table,th,td {
	border-spacing: 0px;
	border-width: 3px;
	border-collapse: collapse;
	padding: 0px;
}

th {
	color: #eee;
	background-color:   #555;
}

tr.odd {
	background-color:   inherit;
}

tr.even {
	background-color:   #bbb;
}

tr:hover, .faded {
	color:  #556;
}

.clickable-header {
	font-weight: bold;
	cursor: hand;
	cursor: pointer;
}

/* flex-box elements */
.flexi {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-content: stretch;
}

.brick {
	font-size:  12pt;
	padding: 0.35em;
	margin: 2px;
	border-radius: 0.4em;
	flex-grow: 1;
	max-width: 35em;
	color: #eee;
	background: #555;
	font-weight: bold;
	box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.75);
    cursor: pointer;
    transition: 0.3s;
	border: none;
	outline: none;
}

/* light theme, to be used with brick */
.hbrick {
	flex-grow: 0;
	background: #eee;
	color: #777;
}

.brick:hover, .brick:focus {
	background-color: #238;
}