body {
	margin: 0;
	font-family: Segoe UI, Helvetica, Tahoma, Arial, sans-serif;
	font-weight: normal;
	height: 100vh;
	display: flex;
    flex-direction:column;
}

a {
	color: white;
    text-decoration: none;
}

img.inline {
	display: inline;
	height: 1em;
}

header {
	background-color: #005EAD;
	color: white;
    display: flex;
	align-items: center;
	margin: 0em;
	padding: 0.3em;
	box-shadow: 0 0 5px rgba(33,33,33,.5);
}

header a {
    margin: 0 0.5em 0 0.5em;
}

header h1 {
	margin: 0 0.3em 0 0.3em;
	padding-bottom: 0.1em;
    padding-right: 0.5em;
	font-size: 28pt;
	line-height: 100%;
	font-weight: normal;
	border-right: 2px solid white;
}

main h1 {
	font-size: 22pt;
}

main h2 {
	font-size: 16pt;
}

main a {
	color: #005EAD;
}

div.preamble {
    margin: 1em;	
}

div.websites {
    display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-gap: 10px;
	place-items: stretch;
	padding: 0;
	margin: 10px;
}

div.websites span {
    display: block;
	color: white;
	background-color: magenta;
	height: 100px;
	padding: 15px 0.1em 0.1em 75px;
	font-size: 14pt;
	background-image:url("logo.svg");
	background-size: 50px 50px, 20px 20px;
	background-repeat: no-repeat, no-repeat;
	background-position: left 10px top 10px, right 10px bottom 10px;
	transition: box-shadow .1s;
}

div.websites span:hover {
	box-shadow: 0 0 11px rgba(33,33,33,.5);
}

div.websites span.blue         { background-color: #005EAD; }
div.websites span.blue:hover   { background-color: #1F7ACA; }
div.websites span.green        { background-color: #15C61F; }
div.websites span.green:hover  { background-color: #25D526; }
div.websites span.purple       { background-color: #6D00AD; }
div.websites span.purple:hover { background-color: #8D20CD; }

div.websites span.mes          { background-image:url("mes.svg"); }
div.websites span.package      { background-image:url("package.svg"); }
div.websites span.interface    { background-image:url("interface.svg"); }
div.websites span.interfaceTcp { background-image:url("interface_tcp.svg"); }
div.websites span.interfaceXml { background-image:url("interface_xml.svg"); }

div.websites span.private.mes          { background-image:url("mes.svg"), url("lock_white.svg"); }
div.websites span.private.package      { background-image:url("package.svg"), url("lock_white.svg"); }
div.websites span.private.interface    { background-image:url("interface.svg"), url("lock_white.svg"); }
div.websites span.private.interfaceTcp { background-image:url("interface_tcp.svg"), url("lock_white.svg"); }
div.websites span.private.interfaceXml { background-image:url("interface_xml.svg"), url("lock_white.svg"); }

footer {
	color: white;
	background-color: #3B3B3B;
    margin-top:auto; 
}