/**
 * @author Paul Veenstra
 * @copyright 2022
 */

/* Style for page component */
div.main-menu-top {
	position:absolute;
	overflow:hidden;	
	top:0px;
	left:0px;
	width:170px;
	height:100px;
	background: Tan;
}

div.main-menu-top img {	
	top:100px;
}

div.main-content-top {
	position:absolute;
	overflow:hidden;
	top:0px;
	left:170px;
	width:calc(100vw - 170px);
	height:100px;
	padding-left:0px;
	background: Beige;
}
div.main-menu {
	position:absolute;
	overflow:hidden;
	top:100px;
	left:0px;
	width:calc(170px);
	height:calc(100vh - 100px);
	padding-left:20px;
	background: Tan;
}

div.main-content {
	overflow-x: hidden;
	overflow-y : auto;
	position:absolute;
	top:100px;
	left:170px;
	width:calc(100vw - 170px);
	height: calc(100vh - 100px);
	/*padding-left:10px;*/
	/*padding-right:15px;*/
	background: Beige;
	font-size: 9pt;
}

/* Menu properties */
div.main-menu tr {
	background: OliveDrab;
}

div.main-menu td {
	font-family: verdana;
	font-size: 10pt;
	font-weight: bold;	
	text-align: center;
	padding-top: 4px;
	width: 120px;
	height: 25px;
}

div.main-menu A:link, div.main-menu A:visited, div.main-menu A:Active, div.main-menu A:Hover {
   color: white;
   text-decoration:none;
}

div.main-menu tr:Hover {
	background: LimeGreen;
	cursor: pointer;	
}

table.beamtop{
	background-color: ForestGreen;
	border-top: white 1px solid;
	border-bottom: white 1px solid;
	width: 100%vw;}

td.beamtop {
	font-size: 18pt;
	font-weight: bold;
	color: white;
	text-overflow: clip;
	white-space: nowrap;}
/*
	Table data with scroll area
*/
.data {
	margin-right: auto;					/* set margin auto so this is centerd on page */
	width: 1240px;						/* make sure the width is allway bigger than the sum */
	table-layout: fixed;
	border-collapse: collapse;
	padding-left: 10px; 
}  
.data tbody {
	width: 100%;
	display: block;
	overflow-y: scroll;
	overflow-x: hidden;
	height: 500px;
	
}
.data thead tr {
	display: block;
}
.data th,
.data td {
	padding: 5px;
	text-align: left;
	border-bottom: 1px solid #DDD;
	vertical-align: top;
    white-space: nowrap;
}
.data tr:hover {
	background-color: lightblue;
	cursor: pointer;
}
th {
	background: #ABDD93;
}

/* data column widths total with: 1110 */
.data th:first-child { width: 50px; min-width: 50px; max-width: 50px;} /* id */
.data th:first-child + th { width: 120px; min-width: 120px; max-width: 120px; } /* naam */
.data th:first-child + th + th { width: 240px; min-width: 240px; max-width: 240px; } /* omschrijving */
.data th:first-child + th + th + th { width: 180px; min-width: 180px; max-width: 180px; } /* start */
.data th:first-child + th + th + th + th { width: 180px; min-width: 180px; max-width: 180px; } /* einde */
.data th:first-child + th + th + th + th + th { width: 80px; min-width: 80px; max-width: 80px; } /* interval */
.data th:first-child + th + th + th + th + th + th { width: 80px; min-width: 80px; max-width: 80px; } /* repeat */
.data th:first-child + th + th + th + th + th + th + th { width: 80px; min-width: 80px; max-width: 80px; } /* status */
.data th:first-child + th + th + th + th + th + th + th + th { width: 100px; min-width: 100px; max-width: 100px; } /* screens */
.data th:first-child + th + th + th + th + th + th + th + th + th { width: 30px; min-width: 30px; max-width: 30px; } /* edit */
.data th:first-child + th + th + th + th + th + th + th + th + th + th { width: 30px; min-width: 30px; max-width: 30px; } /* */
.data th:first-child + th + th + th + th + th + th + th + th + th + th + th { width: 30px; min-width: 30px; max-width: 30px; } /* */
.data th:first-child + th + th + th + th + th + th + th + th + th + th + th + th { width: 30px; min-width: 30px; max-width: 30px; } /* */
.data th:first-child + th + th + th + th + th + th + th + th + th + th + th + th + th { width: 30px; min-width: 30px; max-width: 30px; } /* */
.data th:first-child + th + th + th + th + th + th + th + th + th + th + th + th + th + th { width: 30px; min-width: 30px; max-width: 30px; } /* */
.data th:first-child + th + th + th + th + th + th + th + th + th + th + th + th + th + th + th { width: 30px; min-width: 30px; max-width: 30px; } /* */
.data td:first-child { width: 50px; min-width: 50px; max-width: 50px; } /* id */
.data td:first-child + td { width: 120px; min-width: 120px; max-width: 120px; } /* naam */
.data td:first-child + td + td { width: 240px; min-width: 240px; max-width: 240px; } /* omschrijving */
.data td:first-child + td + td + td { width: 180px; min-width: 180px; max-width: 180px; } /* start */
.data td:first-child + td + td + td + td { width: 180px; min-width: 180px; max-width: 180px; } /* einde */
.data td:first-child + td + td + td + td + td { width: 80px; min-width: 80px; max-width: 80px; } /* interval */
.data td:first-child + td + td + td + td + td + td { width: 80px; min-width: 80px; max-width: 80px; } /* repeat */
.data td:first-child + td + td + td + td + td + td + td { width: 80px; min-width: 80px; max-width: 80px; } /* status */
.data td:first-child + td + td + td + td + td + td + td + td { width: 100px; min-width: 100px; max-width: 100px; } /* screens */
.data td:first-child + td + td + td + td + td + td + td + td + td { width: 30px; min-width: 30px; max-width: 30px; } /* edit */
.data td:first-child + td + td + td + td + td + td + td + td + td + td { width: 30px; min-width: 30px; max-width: 30px; } /* */
.data td:first-child + td + td + td + td + td + td + td + td + td + td + td { width: 30px; min-width: 30px; max-width: 30px; } /* */
.data td:first-child + td + td + td + td + td + td + td + td + td + td + td + td { width: 30px; min-width: 30px; max-width: 30px; } /* */
.data td:first-child + td + td + td + td + td + td + td + td + td + td + td + td + td { width: 30px; min-width: 30px; max-width: 30px; } /* */
.data td:first-child + td + td + td + td + td + td + td + td + td + td + td + td + td + td { width: 30px; min-width: 30px; max-width: 30px; } /* */
.data td:first-child + td + td + td + td + td + td + td + td + td + td + td + td + td + td + td { width: 30px; min-width: 30px; max-width: 30px; } /* */


.images {
	font-size: 9pt;
}

body {
		font-size: 9pt;
}