@font-face {
  font-family: Collegiate;
  src: url("Collegiate.ttf");
}

.ribbon-holder {
  position: absolute;
  top: 0;
  overflow: hidden;
  height: 10em;
}

.right.ribbon-holder {
  right: 0;
  margin-right: 0%;
}

.left.ribbon-holder {
  left: 0;
}

.ribbon,
.ribbon:hover {
  text-decoration: none;
}

.ribbon {
  font-family: Collegiate, sans-serif;
  letter-spacing: -.1px;
  opacity: 0.95;

  padding: 0.0em 0;
  position: relative;
 /* top: 1.2em; */
  top: 2.2em;


  /* Defaults friendly for white pages. */
  -moz-box-shadow: 0 0 13px #888;
  -webkit-box-shadow: 0 0 13px #888;
  color: #FFF;
  display: block;
  line-height: 1.35em;
}

.ribbon .text {
  padding: 0.1em 2.5em;
}

.right .ribbon {
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  right: -2.6em;
}

.left .ribbon {
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  left: -2.6em;
}

.white.ribbon {
  color: #111;
  background-color: #F5F5F5;
  background: -webkit-gradient(linear, left bottom, left top, from(#f3f3f3), to(#fff));
  -moz-box-shadow: 0 0 13px #999;
  -webkit-box-shadow: 0 0 13px #999;
  text-shadow: 0 0 .05em;
}

.white.ribbon .text {
  border: 1px solid #cecece;
}

.red.ribbon {
  background-color: #9a0000;
  background: -webkit-gradient(linear, left bottom, left top, from(#9a0000), to(#a90000));
}

.red.ribbon .text {
  border: 1px solid #bf6060;
}

.green.ribbon {
  background-color: #006e00;
  background: -webkit-gradient(linear, left bottom, left top, from(#006e00), to(#007200));
}

.green.ribbon .text {
  border: 1px solid #6bac6b;
}

.darkblue.ribbon {
  background-color: #121621;
  color: #ecedee;
}

.darkblue.ribbon .text {
  border: 1px solid #53565e;
}

.orange.ribbon {
  background-color: #E57504;
  background: -webkit-gradient(linear, left bottom, left top, from(#dc7202), to(#ee7906));
}

.orange.ribbon .text {
  border: 1px solid #ebaa65;
}

.gray.ribbon {
  background-color: #6d6d6d;
  background: -webkit-gradient(linear, left bottom, left top, from(#6a6a6a) to(#6d6d6d));
}

.gray.ribbon .text {
  border: 1px solid #a4a4a4;
}


#banner
{
	position: absolute;
	top: 0px;
	left: 0px;
	
/*	  background-color: #9e9e9e;
  background-image: linear-gradient(to bottom, #9e9e9e, #454545); */
  background: linear-gradient(to bottom right, rgba(110,67,46,1.0), rgba(247,238,214,0.7));
	
	width: 30%;

	font-size: 80%;
	
	z-index: 6;
	
	
    border-radius: 5px;
	
}


#csi_banner {
	margin-left: 2%;
	margin-right: 10%;
/*	Border: #ff0000 solid 10px; */
	Background: yellow ;
	Color:black;
	Font-size:18px;
	Text-align: right;
	Padding-right: 10px;
	Padding-left: 10px;
	Padding-right: 40px;
	white-space: nowrap;
	overflow: hidden;
	font-weight: bold;
}

/* the main text at the left side */
#textflow
{		
	position: relative;
	max-width: 80%;
	
	left: 0px;
	top: 0px;

	right: 0%;
		
	background-color: #FFF6E2;

	margin-left: 1%;
	margin-right:9em;
	padding-left: 1%;
	margin-bottom: 1%;
	padding-bottom: 1%;
	
	z-index: 1;
	
    border-radius: 20px;
}

@media (prefers-color-scheme: dark) {
#textflow
{				
	background-color: Black;
	}
}

/* the right side of the sheet */
#navigation    
{ 	
	width: 15%;
	min-width: 10em;
	position: absolute;
	right: 0px;
	
	background-color: #FFF6E2;
	/*
	background-image:url(../images/MacMark_hexley_64_shad.gif);
	background-repeat: no-repeat;
	background-position: 80% 5%;
	*/
	
	font-size: 80%;
	
/*	webkit-transform-style:preserve-3d; */
	
	
	margin-right: 1%;
	padding-left: 1%;
	padding-bottom: 1%;
	
	z-index: 2;	
	
    border-radius: 20px;
}

@media (prefers-color-scheme: dark) {
	#navigation    
{ 
	background-color: black;
}
}
	
/*
According to
http:jendryschik.de/wsdev/css/fixed/#probleme
I first did an absolute positioning for the navigation
and now I override this with fixed positioning for the
navigation for all browsers that understand
attribute conditions.
*/	

#navigation[id] { position: fixed; } 
#banner[id] { position: fixed; } 

/* Background color for all english words in main text */
/*
#textflow span[lang="en"] 
{
	background-color: #eefff8;
}
*/

#textflow a.out:before 
{
	content: url(../images/outlink.gif)" ";
	white-space: nowrap;
}

.right, .google_ad, #google_ad, #twitter_box
{
	float: right;
	margin-left: 5em;
	margin-top: 0em;
	margin-right: 10%;;
	margin-bottom: 1em;
}

.left {
	float: left;
}


body 
{
	background-color: #83553C;	
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
	
	font-family: Optima, Garamond, Verdana, Helvetica, Arial, sans-serif;
	
} 

@media (prefers-color-scheme: dark) {

	body 
	{
		background-color: rgb(36, 37, 37);	
		
	} 
}
	
img.centered
{
	width: 100%;
}	
	
img.rounded
{
	
    border-radius: 20px;
}
	
img.roundedcentered
{
	width: 100%;
	
    border-radius: 20px;
}
	
		
img.smallroundedcentered
{
	width: 35%;
	
    border-radius: 20px;
}

	
img.mediumroundedcentered
{
	width: 50%;
	
    border-radius: 20px;
}
	
img.floated
{
	float: left;
	width: 50%;
	margin-right: 5%;
	margin-bottom: 5%;
	
}	

img.floatedright
{
	float: right;
	width: 70%;
	margin-left: 5%;
	margin-top: 5%;
	margin-right: 0%;
	margin-bottom: 5%;
	
    border-radius: 0px;
}
	
img.roundedfloated
{
	float: left;
	width: 50%;
	margin-right: 5%;
	margin-bottom: 5%;
	
    border-radius: 20px;
}

img.floatleft {
	float: left;
	margin-right: 1em;
	margin-bottom: 1em;
}

img.smallroundedfloated
{
	float: left;
	width: 25%;
	margin-right: 5%;
	margin-bottom: 5%;
	
    border-radius: 20px;
}

img.smallroundedfloatedright
{
	float: right;
	width: 25%;
	margin-right: 5%;
	margin-bottom: 5%;
	
    border-radius: 20px;
}

img.mediumfloated
{
	float: left;
	width: 25%;
	margin-top: 5%;
	margin-right: 5%;
	margin-bottom: 5%;
}

img.roundedfloatedright
{
	float: right;
	width: 25%;
	margin-top: 5%;
	margin-right: 0%;
	margin-bottom: 5%;
    border-radius: 20px;
}

img.smallfloated
{
	float: left;
	width: 6.0em;
	margin-top: 5%;
	margin-right: 5%;
	margin-bottom: 5%;
}

img.smallfloatedright
{
	float: right;
	width: 6.0em;
	margin-top: 5%;
	margin-right: 5%;
	margin-bottom: 5%;
}


pre code {
	border-radius: 8px;
	margin-left: 10%;
	margin-right: 10%;
}

@media (prefers-color-scheme: dark) {
	pre
	{	
		color: #1b8d1b;
	}
}

code
{
	white-space: pre-wrap;
/*	white-space: collapse; */
	font-size: 100%;
	color: #1b8d1b;

/*
	margin-left: 10%; 
	margin-right: 10%;
*/	
}


.mono
{
	font-family: monospace;
	color: #1b8d1b;
}
	

p
{	
	font-size: 100%;
	color: #444444;
	margin-left: 10%;
	margin-right: 10%;
}

@media (prefers-color-scheme: dark) {
	p
	{	
		color: white;
	}
}

div.gplus {
	padding-left: 10%;
}
	

legend 
{	 
	font-size: 120%;
	color: #444444;
	margin-left: 10%;
	margin-right: 10%;
	font-weight: 700;
}
	
	
strong
{
	font-weight: 700;	
}

div.bildtext {
	font-weight: 700;
    text-align: center;
    margin-bottom: 4.0em
}

div.done 
{
	text-decoration: line-through;
}
	
kbd
{
	background-color: #b8ffba;
}
@media (prefers-color-scheme: dark) {
	kbd
	{
		background-color:darkblue;
	}
}


div.detailinfo
{
	margin-left: 20%;
	margin-right: 10%;
	margin-top: 20px;
	margin-bottom: 20px;
	font-size: 80%;  
	padding: 13px;
	background-color: #e2e4ec;
	
    border-radius: 20px;
}

@media (prefers-color-scheme: dark) {
	div.detailinfo
{
	background-color: #362e2e;
}
}


div.blogunfertig
{
	background-image: url(../images/unfertig.gif);

}


#unfertig
{
	background-image: url(../../images/unfertig.gif);
	
	
}

div.quote
{
	margin-left: 20%;
	margin-right: 10%;
	margin-top: 20px;
	margin-bottom: 20px;
	font-size: 80%;  
	padding: 13px;
	background-image: url(../images/quote.gif);
	background-repeat: no-repeat;
	padding-left: 35px;
	background-position: left center;
}

div.bibinfo
{
	margin-left: 20%;
	margin-right: 10%;
	margin-top: 20px;
	margin-bottom: 20px;
	font-size: 80%;  
	padding: 13px;
	background-image: url(../images/book_icon.gif);
	background-repeat: no-repeat;
	padding-left: 35px;
	background-position: left center;
}

div.resizing {	
	text-align: right;
	padding: 5px;
}

div.note
{
	margin-left: 20%;
	margin-right: 10%;
	margin-top: 20px;
	margin-bottom: 20px;
	padding: 13px;
	font-size: 80%;
	background-image: url(../images/quill_icon.gif);
	background-repeat: no-repeat;
	padding-left: 35px;
	background-position: left center;	
}

div.note p, div.bibinfo p
{
	margin-left: 5%;
	margin-right: 5%;
}

div.paratext
{
	margin-left: 20px;
	font-size: 80%;
	padding-bottom: 2.0em;
}

@media (prefers-color-scheme: dark) {
	div.paratext
	{	
		color: white;
	}
}

h1, h2, h3, h4, h5, h6
{
	border-bottom: 1px #606b94 solid;
	padding: 6px;
	text-shadow: 4px 4px 8px #606b94;
	
	margin-right: 50%;
	color: #606b94;

	font-family: Optima, Garamond, Verdana, Helvetica, Arial, sans-serif;
}	

@media (prefers-color-scheme: dark) {
	h1, h2, h3, h4, h5, h6
	{
		border-bottom: 1px #abb2ca solid;
		text-shadow: 4px 4px 8px #7c8ecf;
		color: #7893ec;
	}	
}


#textflow h1, h2, h3, h4, h5, h6
{
}

	
h1 
{
	font-size: 150%; 
	padding-top: 1.0em;
	margin-left: 0%;
	margin-right: 10%;
}
	

h2 { 
	font-size: 140%; 
	margin-left: 2%;
}


h3 
{ 
	font-size: 130%;
	margin-left: 4%;
}

h4 { 
	font-size: 120%; 
	margin-left: 6%; 
}

h5 
{  
	font-size: 110%; 
	margin-left: 8%;
}

h6 
{  
	font-size: 100%; 
	margin-left: 10%;
}
	
		
#navigation h1
{
	border-left: none;
	border-right: none;
	border-top: none;
	border-bottom: none;
	text-align: left;
}	

	
#navigation ul
{
	padding-left: 0px;	
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	background-position: bottom center;
	background-repeat: no-repeat;
	margin-left: 1em;
	margin-right: 0em;
}

#navigation ul li
{
	list-style-type: none;
	margin-top: 5px;
	margin-bottom: 5px;
}

#navigation ul li ul
{
	padding-bottom: 0px;
}
	
	
#navigation ul li a
{
	padding-left: 0px;
}
	
#navigation ul li.selected 
{
	padding-left: 0px;
	background-position: left top;
	font-weight: 700;
}

#navigation ul li a:hover 
{
	padding-left: 0px;
	background-position: left top;
	background-color:AliceBlue;
}

@media (prefers-color-scheme: dark) {
	#navigation ul li a:hover 
	{
		background-color:DimGrey;
	}
}


@media (prefers-color-scheme: dark) {
	a:hover 
	{ 
		background-color:DimGrey;
	}
}

#navigation p, legend 
{
}

#navigation form 
{
	text-align: left;
}
		
#textflow a:hover 
{
	background-color:AliceBlue;
}

@media (prefers-color-scheme: dark) {
#textflow a:hover 
	{ 
		background-color:DimGrey;
	}
}

@media (prefers-color-scheme: dark) {
	a:visited
	{ 
		color: lightseagreen;
	}
}

@media (prefers-color-scheme: dark) {
	a
	{ 
		color: lightskyblue;
	}
}


#textflow a[href="index.php#toc"] 
{
	font-size: 50%;
}

#textflow a[href="index.php#toc"]:before
{
	content: "("
}

#textflow a[href="index.php#toc"]:after
{
	content: " ansehen)"
}

/*
#textflow h1:after
{
	content: " <button type="button" id="resizing_button" onclick="resizeNaivgation()">Navi</button>"
}
*/


#textflow div[class="bildtext"] p:before
{
	content: "Bild: "
}


#textflow div[class="paratext"]:first-line
{
/*	color: blue; */
}


#table.personal_data td.property
{
	font-weight: 700;
}
	

ul.toc
{ 
	list-style-type: none;
}

ul
{ 
	margin-left: 10%; 
	margin-right: 10%;
	color: #444444;
}
@media (prefers-color-scheme: dark) {
	ul 
	{ 
		color: white;
	}
}

ul.einzug li {
    text-indent:-5.4em; 
    padding-left:5.4em;
}


ol	
{ 
	margin-left: 10%; 
	margin-right: 10%;
	color: #444444;
}
@media (prefers-color-scheme: dark) {
	ol 
	{ 
		color: white;
	}
}

dl	
{ 
	margin-left: 10%; 
	margin-right: 10%;
	color: #444444;
}
@media (prefers-color-scheme: dark) {
	dl 
	{ 
		color: white;
	}
}

li 	
{  
	margin-left: 5%;
	margin-right: 10%;
	margin-top: 10px;
	margin-bottom: 10px;
}

fieldset
{
	border-style: none;
	border-width: 1px;
}

table 
{ 
	color: #444444;
	padding-left: 10%;
	padding-right: 10%;
	margin-bottom: 1.5em;
}

@media (prefers-color-scheme: dark) {
	table 
	{ 
		color: white;
	}
}
		
table.personal_data
{
	width: 100%;	
}

caption
{
	font-size: 100%;
	margin-left: 10%;
	margin-right: 15%;
	text-align: left;
}


th
{
	padding: 7px;
	text-align: left;
	vertical-align: top;
	font-size: 100%;
}

tr
{
}

td
{
	text-align: left;
	vertical-align: top;
	font-size: 100%;
	padding: 7px;
	border-style: dotted;
	border-width: 1px;
}
		
td.property 
{
	font-weight: bold;
}

td.value 
{
	padding: 5px;
}		
		
			
td.date 
{
	font-weight: bold;
}

td.content 
{
	padding: 5px;
}
			
hr
{
	margin-right: 5%;
}