body {
    max-width: 60em;
    margin-left: auto;
    margin-right: auto;
    padding: 2em 0;
    line-height: 1.6em;
    font-family: 'Georgia', 'Nimbus Roman No. 9', serif;
/*    color: #333;*/

    background-image: url("/Bilder/Paul Hintergrund.jpg");
    background-color: #cccccc;
    background-size: cover;
    background-size: 1150px;
    background-repeat: repeat-y;
    background-position: center;
    background-attachment: fixed;
    font: 1.1em/130% Georgia, Times, serif;
    overflow: scroll;     /* scrollbalken, bzw. Platz dafür auf jeder Seite erzwingen */
}
a {
    color: #00c;
    text-decoration: none;
}
.hausmensch {
    color: #999;
    text-decoration: none;
    font-size: 100%;
}
footer {
    margin-top: 3em;
/*    opacity: 0.6;*/
    text-align: center;
}
.autor {
    font-size: 200%;
    font-style: italic;
    color: #aaa;
    margin-top: 0;
}
.sitename {
    font-style: italic;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    font-size: 350%;
    font-weight: bold;
}

#tags {
    margin-top: 3em;
    padding-left: 0;
}
#tags li {
    display: inline;
    margin-right: 0.7em;
    padding: 0.5em;
    border-radius: 0.5em;
    background-color: #ddd;
}
#tags li a {
    text-decoration: none;
}

#hauptmenue ul {
    padding: 0.5em;
    margin-bottom: 2em;
    text-align: center;
    border-width: 0;
    border-bottom-width: thin;
    border-style: solid;
    border-color: #ddd;
}
#hauptmenue li {
    display: inline;
    padding: 0em;
    font-size: 120%;
}
#hauptmenue li + li:before {
    content: " | ";
}
#hauptmenue .aktiv {
    color: #333;
}
#hauptmenue a:visited
{
color: #123;
}
#hauptmenue a:link
{
color: #00f;
}
#hauptmenue a:hover
{
background-color: #369;
color: #fff;
}

.nachhause {
    padding: 0em;
    font-size: 180%;
    color: #00f;
}
.nachhause a:visited
{
color: #123;
}

.nachhause a:link
{
color: #321;
}
.nachhause a:hover
{
background-color: #fff;
color: #000;
}


.magenta {
    font-style: italic;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    font-size: 350%;
    font-weight: bold;
    text-decoration: none;
    color: #aa0088;
}

img {
	max-width: 100%;
	height: auto;
}

img.large {width: auto; height: 300px; }
img.medium {width: auto; height: 200px; }
img.small {width: auto; height: 150px; }

img.align-left {
        float: left;
        margin-right: 10px;
        margin-bottom: 10px;
        margin-top: 10px;
}
img.align-right {
        float: right;
        margin-left: 10px;
        margin-bottom: 10px;
        margin-top: 10px;
}
img.align-center {
        display: block;
        margin: 0px auto;
}


.textbild {
	float: left;
	max-width: 50%;
        margin-top: 0.5em;
	padding: 0 5% 3% 0;
}
/*img {
	float: left;
	max-width: 20%;
	padding: 0 5% 3% 0;
}*/

#kontakt {
	color: #000;
	text-decoration-color: #fff;
	font-size: 90%;
	margin: 1% 50% 0px 20%;
/*	position: fixed;*/
       top: 0%;
       left: 50%;
       text-align: left;
       z-index: 0;
/*
    opacity: 1; 
    -ms-transition: opacity 3s;
    -moz-transition: opacity 3s;
    -webkit-transition: opacity 3s;
    -o-transition: opacity 3s;
    transition: opacity 3s;
*/
}

#trans { text-align: center; margin-top: 10px; }

#trans img {
  z-index: 110;
  margin: 0px 5px;
  
/*  border: 1px solid white;*/

/*  Seit kurzem - Fehler beim Mouseover: Wenn das Bild sich beim
    entfernen der Maus verkleinert, bleit ein 
    schwarzer Hintergrund zurück (Firefox). Durch das entfernen
    der folgenden 'transitions' plopt das Bild wieder
    klein, aber der Hintergrund wird wieder hergestellt  

Dez.2016: geht wieder    
    
*/


  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;



  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px

} 

#trans a img:hover {
  -webkit-transform: scale(3);
  -moz-transform: scale(3);
  -ms-transform: scale(3);
  -o-transform: scale(3);
  transform: scale(3);
  
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
 }


#trans-shift-r a img:hover {
	-webkit-transform: scale(3) translate(100px);
  -moz-transform: scale(3) translate(100px);
  -ms-transform: scale(3) translate(100px);
  -o-transform: scale(3) translate(100px);
  transform: scale(3) translate(100px);
  
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
 }

#trans-shift-l a img:hover {
  -webkit-transform: scale(3) translate(-100px);
  -moz-transform: scale(3) translate(-100px);
  -ms-transform: scale(3) translate(-100px);
  -o-transform: scale(3) translate(-100px);
  transform: scale(3) translate(-100px);
  
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
 }


article {
 max-width: 50em;
 margin:0 auto;      /* Zentrieren */
 font: 1.3em/130% Georgia, Times, serif;
}

video {
        display: block;
        margin: 0px auto;
}
#linke_spalte {
	width: 500px;
	float:left;
}
#rechte_spalte {
	margin-left: 530px;
	width: 500px;
}
a:focus {
  outline: none;
}