/*
 * Copyright (C) 2022 Micro Systems Marc Balmer, CH-5073 Gipf-Oberfrick.
 * All rights reserved.
 *
 * This source code is the proprietary confidential property of Micro Systems
 * Marc Balmer, and is provided to licensee solely for documentation and
 * educational purposes. Reproduction, publication, or distribution in any form
 * to any party other than the licensee is strictly prohibited.
 *
 * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
 * WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
 * MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
 * ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
 * WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
 * ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
 * OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
 */

/* Define the Grid Layout */
@media only screen and (min-width: 280px) {
	.wrapper {
		font-size: smaller;
		display: grid;
		grid-template-columns: 1fr;
		gap: 8px;
		grid-template-areas:
			"title"
			"login"
			"content"
			"links"
			"actions"
			"logo"
			"footer"
			"debug";
	}

	.footer {
		grid-area: footer;
		margin: 0px;
		padding: 8px;
		background-color: #f0f0f0;
		font-size: smaller;

		display: grid;
		grid-template-columns: 1fr;
		grid-template-areas:
			"services"
			"products"
			"company"
			"legal";
	}
	
}

@media only screen and (min-width: 600px) {
	.footer {
		grid-area: footer;
		margin: 0px;
		padding: 16px;
		background-color: #f0f0f0;
		font-size: smaller;

		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"services products"
			"company legal";
	}
}

@media only screen and (min-width: 800px) {
	.wrapper {
		font-size: inherit;
		display: grid;
		grid-template-columns: 3fr 1fr;
		gap: 8px;
		grid-template-areas:
			"title login"
			"content actions"
			"content actions"
			"links actions"
			"logo actions"
			"footer footer"
			"debug debug";
	}

	.footer {
		grid-area: footer;
		margin: 0px;
		padding: 16px;
		background-color: #f0f0f0;
		font-size: smaller;

		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-template-areas:
			"services products company legal";
	}
}

@media only print {
	.button {
		display: none;
	}

	.language__code {
		display: none;
	}

	.login {
		display: none;
	}
	.actions {
		display: none;
	}

	.footer {
		display: none;
	}

	.links {
		display: none;
	}

	table { page-break-after:auto }
	tr    { page-break-inside:avoid; page-break-after:auto }
	td    { page-break-inside:avoid; page-break-after:auto }
	thead { display:table-header-group }
	tfoot { display:table-footer-group }
}

.logo {
	grid-area: logo;
	margin: 0px;
}

.login {
	grid-area: login;
	margin: 8px;
}

.content {
	grid-area: content;
	margin: 8px;
}

.links {
	grid-area: links;
	margin: 8px;
}

.links a {
	text-decoration: none;
}

.actions {
	grid-area: actions;
	margin: 8px;
}

.actions a {
	text-decoration: none;
}

.title {
	margin: 8px;
	grid-area: title;
}

.title__tagline {
	font-size: larger;
	font-weight: bold;
}

.footer__services {
	grid-area: services;
}

.footer__products {
	grid-area: products;
}

.footer__company {
	grid-area: company;
}

.footer a {
	text-decoration: none;
}

.software {
	margin: 8px;
	font-size: x-small;
}

.debug {
	margin: 8px;
	grid-area: debug;
}

/* Properties of HTML elements */
label {
	display: block;
	margin: 4px;
	margin-top: 4px;
}

body {
	margin: 0px;
	font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
	color: #414042;
	hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
}

p {
	color: black;
}

a {
	font-weight: bold;
	text-decoration: none;
	color: #aa0000;
}

td a {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a[target="_blank"]:after {
	font-family: 'Font Awesome 5 Free';
	font-style: normal;
	font-size: smaller;
	font-weight: 400;
	content: " \f35d";
}

h1, h2, h3 {
	color: #58595B;
}
.logo [target="_blank"]:before {
	content: none;
}

input[type=submit] {
	font-family: Helvetica, sans-serif;
	border: 0;
	font-weight: bold;
	font-size: inherit;
	color: white;
	background-color: black;
	text-decoration: none;
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 4px;
	padding-bottom: 4px;
	margin: 8px;
}

input[type=submit]:hover {
	background-color: grey;
	text-decoration: underline;
}

input[type=text], input[type=password], input[type=email], input[type=date] {
	background-color: lightgrey;
	color: black;
	font-weight: bold;
	width: 100%;
	overflow: hidden;
	padding: 0px;
}

table, th, tr, td {
	border: 1px solid black;
	border-collapse: collapse;
	padding: 8px;
}

th {
	text-align: left;
	vertical-align: top;
}

td {
	vertical-align: top;
	color: black;
}

ul {
	list-style: none;
}

ul li::before {
	content: "\2022";
	color: #aa0000;
	font-weight: bold;
	font-size: 18pt;
	margin-top: -1em;
	margin-bottom: -1em;
	display: inline-block;
	width: 1em;
	margin-left: -1em;
}

/* Our own classes */
.button {
	color: white;
	background-color: black;
	text-decoration: none;
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 4px;
	padding-bottom: 4px;
}

.button:hover {
	background-color: grey;
}

.language__code {
	font-weight: bold;
	text-decoration: none;
	text-transform: uppercase;
	color: black;
}

.uppercase {
	text-decoration: uppercase;
}

.td--header {
	font-weight: bold;
	color: #aa0000;
	hyphens: none;
	-webkit-hyphens: none;
	-ms-hyphens: none;
	vertical-align: top;
}

.td--center {
	text-align: center;
}

.th--right-align, .td--right-align {
	text-align: right;
}

.h2--email {
	text-transform: none;
}