/* CSS - styles.css */

@import url('http://fonts.googleapis.com/css?family=Caveat|Gloria+Hallelujah');

a:link {	color: #002d00ff; 	background-color: white;}
a:active { color: gray; text-decoration: none;}
a:visited { color: gray; text-decoration: none; }
a:hover { color: green; text-decoration: none;}

.wrapper {width: 800px; margin: 0 auto;}

h1 {font-size: 30px; font-family: Caveat; color: gray; line-height:110%; text-align: center; padding: 0; margin: 0; }
h2 {font-size: 24px; font-family: Caveat; color: black; line-height:125%; padding: 0; margin: 0; display: inline;}

body {font-family: Caveat;}

.contentArea {width: 800px; margin: 0 auto; vertical-align: top;}

ul.e20 {margin: 0 auto; font-size: 20px; font-family: Caveat;color: black; line-height:125%;}
p.text1 {margin: 0 auto; font-size: 20px; font-family: Caveat;color: black; margin-left: 0px; line-height:125%; text-align: justify; }
p.text2 {margin: 0 auto; font-size: 24px; font-family: Caveat;color: black; background-color:#FaF6B3; margin-left: 0px; line-height:125%; text-align: justify; }
p.sc {margin: 0 auto; font-size: 16px; font-family: Caveat;color: black; margin-left: 0px; line-height:125%; text-align: center; }

.rahmen {width:690px; background-color:#F9F9F9; margin:25px 0px 70px 155px; box-shadow: 2px 2px 4px 2px gray;}

.banner {
 height: 35px;
 overflow: hidden;
 position: relative;
}
.banner h4 {
 position: absolute;
 width: 110%;
 height: 100%;
 margin: 0;
 font-family: Caveat; font-size: 32px; color: white; background-color: #51abea; text-align: center; 
 /* Starting position */
 transform:translateX(98%); /*100%=Beginn am rechten Rand*/
 /* Apply animation to this element */
 animation: banner 12s linear infinite;
}
 @keyframes banner {
  0% { transform: translateX(101%);} /*Startverzögerung/Beginn rechter Rand*/
 92% { transform: translateX(-101%); } /*Rücklauf*/
}