@import url('_Color.css');

.__FrameItem
{
	max-width: 800px;
	width: 100%;
	padding-bottom: 10px;
}

.__FrameItem div > input,
.__FrameItem div > textarea
{
/* basic elements which appear within a FrameItem row */
	width: 100%;
}

.__FrameItem div > select
{
	width: calc(100% - 70px);
	display: inline;
	float: left;
}

.__FrameCatalogue
{
	max-width: 800px;
	width: 100%;
}

.FrameElementItem
{
	padding-bottom: 10px;

	display: block;
	float: left;
	width: 100%;
  }

.FrameListItem
{
	padding-bottom: 10px;
	display: flex;
	width: 100%;
}

.FrameListItemCaption
{
	float: left;
	border: 1px solid var(--color-dark-pale);
	border-radius: 4px;
	padding-left: 8px;
	background-color: var(--color-light-pale);
	font-style: italic;
	width: 33%;
}

.FrameListItemValue
{
	border: 1px solid var(--color-dark-pale);
	border-radius: 4px;
	padding-left: 8px;
	margin-left: 4px;
	font-weight: bold;
	flex-grow: 1;
}

/* ------ Header ------  */

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

.FrameHeadText {
	font-size: 24px;
	text-align: right;
	background-color: var(--color-header-background);
	
	padding: 12px;
	margin-bottom: 20px;
	border: 1px solid var(--color-header-border);
	color:var(--color-header-text);
	box-shadow: 3px 3px 5px var(--color-very-dark-transparent);
}

/* ------ Footer ------  */

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


.FrameFootText {
	text-align: right;
}



.FrameNavigationbar {
	float: left;
	width: 100%;
	padding-top: 3px;

	padding-bottom: 3px;
}


.FrameInlay {
	display: table;
	table-layout: fixed;
	width: 100%;
}