body { margin: 20px 20px 100px 20px; font-family: sans-serif; font-size: 16px; }
a    { color: #0074d9;}

/* table cells */
#lm td   { padding: 6px; }
#lm th   { padding: 10px; background: #0074d9; color: #fff; } 
#lm th a { color: #fff; text-decoration: none; }

/* inputs and buttons */
#lm input, #lm select, #lm textarea, #lm .lm_button  { background: #fff; border-radius: 10px; padding: 10px; border: 2px solid #eee; font-size: 16px; }
#lm .lm_button       { padding: 10px; min-width: 100px; color: #fff; background: #0074d9; border: 0; font-weight: bold; margin: 5px; opacity: 0.90; cursor: pointer; }
#lm .lm_button:hover { opacity: 1.0; }
#lm .dull            { background: #888; }
#lm .error           { background: #FF4136; }
#lm input[type=checkbox], #lm input[type=radio] { margin: 0 7px 0 12px; }

/* search box and pagination */
#lm input.lm_search_button     { margin-left: 12px; }
#lm form.lm_search_box a       { text-decoration: none; }
#lm table.lm_paginati#lm table.lm_grid tr.lm_active, #lm table.lm_grid tr:hover { background: #FFD700; } /* highlight hover and current row edited */ 
on select { padding: 3px; }
#lm table.lm_pagination        { margin-top: -10px; }
#lm table.lm_add_search        { margin-top: -10px; }

/* form */
#lm table.lm_form                { margin: 0 auto; }
#lm table.lm_form td:first-child { text-align: right; }
#lm table.lm_form tr             { background: #eee; }
#lm div.lm_form_button_bar       { text-align: center; }
#lm span.lm_validate_error       { color: #ff4136; font-size: 13px; font-weight: bold; margin-left: 10px; }
#lm span.lm_validate_tip         { color: #777777; font-size: 13px; font-weight: bold; margin-left: 10px; }
#lm div.lm_form_button_bar       { margin: 10px auto; }   

/* grid */
#lm table.lm_grid { margin-bottom: 11px; }
#lm table.lm_grid tr:nth-child(even) { background: #eee; }
#lm table.lm_grid tr.lm_active { background: #c2e3ff; } /* highlight hover and current row edited */ 
#lm table.lm_grid tr:hover { background: #FFD700; } /* highlight hover and current row edited */

/*#lm table.lm_grid select { background: #FFD700; } /* highlight hover and current row edited */ 
/*#lm table.lm_grid tr.lm_active, #lm table.lm_grid tr:hover { background: #c2e3ff; } /* highlight hover and current row edited */ 

/* success and error messages */
#lm div.lm_success, #lm div.lm_error { color: #2ecc40; border: 1px solid #2ecc40; border-radius: 3px; padding: 10px; margin: 10px auto; width: 50%; text-align: center; }
#lm div.lm_error                     { color: #ff4136; border-color: #ff4136;  }

#lm table.lm_grid tr td:nth-child(2) { min-width: 300px; }

#ul {
	list-style-type: none;
	margin: 0;
	padding: 0; 
	overflow: hidden;
}
#li {
	list-style-type: none; 
	float: left; 
}
#li a {
	display: inline-block; 
	padding: 4px; 
	background-color: #dddddd;
}
#leftnavigation {
	width: absolute; 
	position: fixed; 
	top: 0; 
	font-size: 15px;
}
#leftnavigation a{
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
#leftnavigation a:hover{
	color: #ff0000;		(* Rode kleur *)  
}
#leftnavigation a:active{
	background-color: yellow;
}
#main {
	list-style-type: none;
	display:inline-block;
}
#login_table {
	background_:#ffeaba;  
	border:3px solid red;
	border-radius:20px;
	margin:10px 50px 30px 50px;  
	font:normal bold 12px; 
	font-size:30px;  
}
#login_table td{
	background-color:BurlyWood;
	border-radius:20px;
	border-left:0px;
	border-right:0px;
	padding:10px;
}
#login_div {
	border:1vw solid Aqua;  
	border-radius:1vw;
	width:70%;
}
#login_status {
	margin-top:1vw;
	color:red;
}
#centered { 
	display: flex;
	align-items: center;
}
<!-- Smartphones (portrait and landscape) -->
@media screen and (min-width: 320px) and (max-width: 480px){
	width: auto;
	height: auto;
}
<!-- Smartphones (portrait) -->
@media screen and (max-width: 320px){
	width: auto;
	height: auto;
}
<!-- Smartphones (landscape) -->
@media screen and (min-width: 321px){
	width: auto;
	height: auto;
}
<!-- Tablets, iPads (portrait and landscape) -->
@media screen and (min-width: 768px) and (max-width: 1024px){
	width: auto;
	height: auto;
}
<!-- Tablets, iPads (portrait) -->
@media screen and (min-width: 768px){
	width: auto;
	height: auto;
}
<!-- Tablets, iPads (landscape) -->
@media screen and (min-width: 1024px){
	width: auto;
	height: auto;
}
<!-- Desktops and laptops -->
@media screen and (min-width: 1224px){
	width: auto;
	height: auto;
}
<!-- Large screens -->
@media screen and (min-width: 1824px){
	width: auto;
	height: auto;
}

