a:link, a:visited {color: blue;}
body {font-family: 'Open Sans',arial,helvetica,sans-serif;}
div.vertcent {display: flex; flex-direction:column; align-items: center;}
label {font-style: italic;}
.info {text-decoration: underline dashed green;}
.seitentitel {font-weight: bold; font-size: large;}
.top {vertical-align:top;}
.untertitel {font-weight: bold; font-size: medium;}
.message {background-color: pink;}
.weekend {font-weight: bold;}

table.fullscreen
{
	border: none;
	height: 100%;
}
td.fullscreen
{
	height: 100%;
}

input[type='number']
{
	text-align:right;
}

/* menu */
.menu .right
{
	float:right;
}

div.menuSeparator
{
	display:inline; 
	height:100%; 
	width:1px; 
	border:1px inset; 
	margin-left:1px; 
	margin-right:5px; 
}

/* help */
fieldset#help-panel
{
	margin-bottom:1em;
}
.visible
{
	display:block;
}
.hidden
{
	display:none;
}
dt
{
	font-size: large;
	font-weight: normal;
}

/* simple table with thin borders */
table.standard, table.standard th, table.standard td
{
	border: gray solid thin;
	border-collapse: collapse;
	padding:0.20em;
}
table.standard td
{
	border-style: dotted;
}
table.standard tr.group
{
	border-top: gray solid thin;
}
table.standard th {font-style:italic;font-weight:normal}
table.standard .zahl {text-align:right;}
table.standard .total {font-weight:bold}

table.append input[type='text']{border-style:none}


/* Data Display
**
** That's the basic data ouput vertical table (labels = first column, data = second column) 
**
*/
div.verticaltable 
{
	display: grid;
	grid-template-columns: [vlabels] max-content [vdata] auto;
	grid-auto-flow: row;
	grid-gap: .5em;
}
div.verticaltable >  label
{
	grid-column: vlabels;
	justify-self: start;
}
div.verticaltable >  data
{
	grid-column: vdata;
}

/* Data Entry
**
** That's the basic data entry form
** bf_-classes are meant to be nested within form.basicform
** 
*/
.basicform 
{
	display: grid;
	grid-template-columns: [labels] max-content [controls] auto;
	grid-auto-flow: row;
}
/* bf_button in 1 row */
.bf_button
{
	display: grid;
	grid-auto-flow: column;
	justify-self: end;
}
/* checkboxes and radiobuttons have their labels to the right */
.bf_check
{
	display: grid;
	grid-template-columns: [checkcontrols] max-content [checklabels] auto;
	grid-auto-flow: row;
}
.bf_check > input[type='radiobutton']
,.bf_check > input[type='checkbox']
{
	grid-column: checkcontrols;
	justify-self: start;
}
.bf_check > label
{
	grid-column: checklabels;
}
/* 1st column for labels*/
.basicform > label
{
	grid-column: labels;
	justify-self: start;
	grid-row: auto;
}
/* 2nd column for controls*/
.basicform > input
,.basicform > select
,.basicform > textarea
,.basicform > .bf_button
,.basicform > .bf_check
,.basicform > .bf_input
{
	grid-column: controls;
	justify-self: start;
	grid-row: auto;
}
.basicform
,.bf_button
,.bf_check
{
	grid-gap: .5em;
}

/* 
** Barcharts 
**
*/
table.chart
{
	width:75%;
}
table.chart th, table.chart td
{
	white-space: nowrap;
} 
table.chart th:last-child, table.chart td:last-child
{
	width: 99%;
}
table.chart div.bar 
{
	background:#3CB371; height:0.75em;
}


/* 
** Media Specifics
**
*/
@media screen
{
	.printonly {display: none !important}
}
@media print
{
	.menu {display: none !important}
	.pagebreak {page-break-after: always;}
}