/***********************************************************************************/
:root {
/* Layout **************************************************/
  --navWidth: 250px;
  --headerHeight: 120px;
  
/* Colors **************************************************/

  --colorGreen: #10ff10;
  --colorLightGreen: #80ff80;
  --colorDarkGrey: #606060;
  --colorGrey: #808080;
  --colorLightGrey: #c0c0c0;

/*
  --bkColorHeader: #606060;
  --bkColorNavContainer: #606060;
  --bkColorNavList: #f0f0f0;
  --bkColorContent: #404040;
*/
  --bkColorHeader: #404040;
  --bkColorNavContainer: #404040;
  --bkColorNavList: #f0f0f0;
  --bkColorContent: #404040;


  --bkColorSubContent: #f0f0f0;
  
  font-size:100%;
}


/***********************************************************************************/
@font-face {
	font-family: 'HeaderFont';
	src: url('antonio.bold.woff');
}



/***********************************************************************************/
body {
	Color: #000000;

	font-family: Tahoma, Verdana, Segoe, sans-serif;	 
	Font-Size: 1rem;
	
	 
	Background-Color: #ffffff;
}


body.EMail {
	Color: #000000;
	Font-Family: Verdana, Sans-Serif;
	Font-Size: 1rem;
	Background-Color: #e0e0d0;

}


div, p {
    padding: 0px;
    margin: 0px;
	text-align: justify;
}


a:link {
	Color: #a00000;
}

a:visited {
	Color: #a00000;
}

a:hover {
	Color: #a00000;
}

a img {
  border: 0 none;
}



h1 {
    font-family: HeaderFont;
	Font-Size: 4rem;
	Font-weight: normal;
	text-align: center;
    color: var(--colorGreen);
	letter-spacing: 0.2em;
	margin: 0 0 0 0;
	height: var(--headerHeight);
	
	text-shadow: 4px 4px 8px black;
}

h2 {
    font-family: HeaderFont;
	Font-Size: 2rem;
	Font-weight: normal;
	text-align: left;

	margin: 0 0 1em 0;

    color: var(--colorDarkGrey);
}

h3 {
    font-family: HeaderFont;
	Font-Size: 1.5rem;
	Font-weight: normal;

	margin: 0 0 0.3em 0;
	color: #000000;
}

h4 {
    font-family: HeaderFont;
	Font-Size: 1.2rem;
	Font-weight: normal;
	color: #000000;
	margin: 0 0 0.5em 0;
}


p {
	margin: 0 0 1.1em 0;
	
}

/***********************************************************************************/

.subblock {
    margin: 0 0.5rem 0.5rem 0;
    padding: 1rem;
    border: 1px solid rgba(10,10,10,.25);
    border-radius: 3px;
    background-color: #fff;
    color: #0a0a0a;	
}

.subblockinline {
	width: 48%;
	display: inline-block;
	vertical-align: top;
	overflow: auto;
}

a.subblockinline_link {
    border: 1px solid var(--colorLightGrey);
    border-radius: 3px;
	padding: 0.5%;

	width: 47%;
	text-align: left;
	display: inline-block;
	vertical-align: top;
	overflow: auto;
	min-height: 200px;
	margin-right: 0.5%;
	margin-bottom: 0.5rem;
	text-decoration: none; 
	color: black;
}


a.subblockinline_link:hover {
	background-color: var(--colorLightGreen);
}


.thumbnail {
	max-width: 160px;
	max-height: 160px;
	float: left;
	margin: 0 10px 10px 0;
}


.list {
	list-style-type: square;
}


.preview {
	max-width: 95%;
}


li::marker {
	color: var(--colorGreen);
}
/***************************************/
a.linkbutton{
	display: inline-block;
 	padding: 0.5em 1em 0.5em 1em;

	background-color: var(--colorGreen);
	border: 1px solid var(--colorDarkGrey);
    border-radius: 3px;    

	color: black;
	font-Size: 1rem;
	font-weight: normal;
	text-decoration: none; 
}

a.linkbutton:hover{
	background-color: var(--colorDarkGrey);
	background-position: center;
	border: 1px solid var(--colorGreen);
    border-radius: 3px;    

	color: var(--colorGreen);
}


/***********************************************************************************/
#header {
	position: fixed; 
	display: inline;
	width: var(--navWidth);
	height: var(--headerHeight); 
	top: 0;
	left: 0;
	bottom: auto;
    right: 0; 
    text-align: center;
	background-color:var(--bkColorHeader);

	background-image: url("gfx/Background.jpg")

}


#contentblock {
	position: fixed; 
	width: auto; 
	height: auto; 
    min-width: 600px;

	top: 0px;
	left: var(--navWidth);
	bottom: 0px; 
	right: 0;
	
    margin: auto;
	overflow: auto;

	color: #000000;
	font-Size: 1.2rem;
    text-align: left;

	background-color: var(--bkColorContent);
	padding: 0.5rem 1rem;
}


#navcontainer
{
	position: fixed; 
	width: var(--navWidth); 
	height: auto; 
	top: var(--headerHeight);
 	left: 0;
	bottom: 0px; 
    right: auto; 
	vertical-align: middle;
	text-align: center;
	background-color:var(--bkColorNavContainer);

	background-image: url("gfx/Background.jpg");

}



#navlist {
	height: 90%;
	width: auto;
	text-align: center;
	list-style: none;

    border: 1px solid rgba(10,10,10,.25);
    border-radius: 3px;    
	background-color:var(--bkColorNavList);

	margin: 0.5rem;
    padding: 1rem;	
	overflow: auto;
	
}


#navlist li {
	vertical-align: middle;
	width: 100%;

	margin-bottom: 0.25rem;

	display: block;

}


#navlist li a {
    Font-family: HeaderFont;
 	padding: 6px 0 10px 0; 
   
	display: inline-block; 
	font-size: 1.5rem;
   	letter-spacing: 0.1rem;
	color: #000000;
	text-decoration: none;
	width: 100%;

    border: 1px solid var(--bkColorNavList);
    border-radius: 3px;    

}


#navlist li a:hover {
	color: var(--colorGreen);

	background-color: var(--bkColorHeader);
	background-image: url("gfx/Background.jpg");
	background-position: center;

	border: 1px solid rgba(10,10,10,.25);
    border-radius: 3px;    

}