/* grnwld.me -  styles.css 
 *  .class elements
 *  #id elements
 * 	element <tag>
 * */
 
:root {
	--vbgd: #EAEAEA;
	--bgd: #D5D5D5;
			 
	/* Grau*/
	
	--color1:#96858F;
	--color2:#6D7993;
	--color3:#9099A2;
	--color4:#D5D5D5;
	
	/*
	 Weiß
	--color1:#CAEBF2;
	--color2:#A9A9A9;
	--color3:#FF383F;
	--color4:#EFEFEF;


	 Grün -> Gradient?
	--color1:#77C9D4;
	--color2:#57BC90;
	--color3:#015249;
	--color4:#A5A5AF;
	
	/*
	HBlau /Eis 
	--color1:#99D3DF;
	--color2:#88BBD6;
	--color3:#CDCDCD;
	--color4:#EEEEEE;
	
	DBlau
	--color2:#333A56;
	--color1:#F7F5E6;
	--color3:#52658F;
	--color4:#E8E8E8;
	*/
	
	
}
a:active {
	color: var(--color2);
}

a:active,a:hover {
	outline:0;
}

a:focus {
	outline:thin dotted
}

a:hover {
	*color: var(--color2);
	outline:0;
}

a,a:visited {
	color: var(--color1);
	text-decoration:none
}

aside h2 {
	*margin-top:0
}

b,strong {
	font-weight:700;
	padding:0em 1em 0em 0em;
	display:inline-block;
	font-size:1.1em;
}

body {
	padding:10px;
	margin:0
}

footer {
	display:block;
	margin:0.8em 0 0
}

h1,h2 {
	clear:both;
	margin:3.2em auto 1.7em
}

h3 {
	font-weight:400
}

h1,h2,header p,footer {
	font-size:0.8em;
	line-height:1.9em;
	text-transform:uppercase;
	letter-spacing:0.18em;
	font-weight:500
}

header, header a{
	position:relative;
	padding:1.3em 0 0.85em;
	margin:0 auto 1.7em;
	color: var(--color1)
}

header h1,header p {
	display:inline
}

header:before {
	left:-2.4em
}

header:after {
	right:-2.4em
}

header,.front {
	position:relative
}

header:before,header:after {
	position:absolute;
	top:1.95em;
	display:block;
	width:0;
	height:0;
	background:#000000;
	content:"";
	overflow:hidden;
	border:0.3em solid var(--color1);
	
}

[hidden] {
	display:none
}

html {
	font-family:sans-serif
}

html,body {
	background: var(--bgd);
	color: var(--color2);
	font:400 14px/1.7em "DejaVu Sans",Calibri,sans-serif; 
}

p {
	margin:0
}

section {
	overflow:auto;
	padding:1.7em 2.4em 2.8em
}

section,aside {
	max-width:32em;
	margin:0 auto
}

section.elsewhere {
	max-width:37em;
	padding:1.7em 0
}

aside {
	padding:0.2em 2.4em 1.7em;
	margin:0 auto;
	background: var(--color1);
	color: var(--color4);
	clear:both;
	
}
.banner {
	background: var(--color1);
	color: var(--color4);
	left:0;
	right:0;
	clear:both;
	*width:100%;
	*height:100%;
	position:absolute; /* static|absolute|fixed|relative|initial|inherit; */
}

.desc {
	text-align:justify;
	padding:1em 0em 1em 0em;
}

#link:hover{
	text-decoration-line: underline;
    text-decoration-style: dotted
}

.elsewhere h2 {
	padding:0 0.3em
}

.im p:last-child {
	margin-bottom:0em;
}

.fingerprint {
	letter-spacing: 0.6em;
	color: var(--color1);
	font-family:    monospace;
	text-align:center;
	text-shadow:    1px 1px var(--color3);
	border-left:    2px solid var(--color1);
	border-right:    2px solid var(--color1);
	padding:0.75em 1em 0.75em 1em;
	margin-bottom:3em
 }
 
.grurl {

}

.value {
	font-family:"Linux Libertine",Times,serif;
	font-size:1.5em;
	color: var(--color2);
}

.vcard {
	background: var(--vbgd);
	margin:0 auto
}

.vcard a,.vcard a:link,.vcard a:visited {
	color: var (--color3);
	text-decoration:none;
}

.vcard a:focus,.vcard a:hover,.vcard a:active {
	color: var(--color1);

}