@media all{

html					{background-color: #000000; font-family: Arial; font-size: 12pt; color: #000000}
/*body					{background-color: #000000; font-family: Arial; font-size: 12pt; color: #000000}*/
div.pag					{background-color: #cccccc; width: 820px; text-align: left; padding: 5px; margin-left: auto; margin-right: auto; border-radius: 10px}
textarea				{font-family: Arial; font-size: 12pt; color: #000000}
input, select			{background-color: #ffff99;font-family: Arial; font-size: 12pt; color: #000000; border: 1px solid #000000}
th						{text-align: left; vertical-align: top}
td						{vertical-align: top; font-family: Arial; font-size: 12pt}
h2						{margin-bottom: 0px}
hr						{border: 0; height: 1px; background: #000000}

.form					{margin-left: auto; margin-right: auto; border-collapse: collapse; width: 600px}

td.boven				{border-style: solid solid none solid}
td.bovenlinks			{border-style: solid none none solid}
td.bovenrechts			{border-style: solid solid none none}
td.links				{border-style: none none none solid}
td.rechts				{border-style: none solid none none}
td.onder				{border-style: none solid solid solid}

input[type="submit"]	{cursor: pointer; border-radius: 5px}
input[type="text"]		{width: 400px}
input[type="password"]	{width: 400px}

.melding				{color: #FF0000; font-weight: bold; font-style: italic}

table.kopbreed			{display: table}
table.kopsmall			{display: none}

}

@media only screen and (max-width: 768px) {
div.pag					{width: calc(100vw - 10px)}
.form					{width: calc(100vw - 12px); max-width: 600px}
input[type="text"]		{width: calc(100% - 1.5em); max-width: 400px}
input[type="password"]	{width: calc(100% - 1.5em); max-width: 400px}

table.kopbreed			{display: table}
table.kopsmall			{display: none}
}

@media only screen and (max-width: 550px) {
table.kopbreed			{display: none}
table.kopsmall			{display: table}
	
}