/* font-family FreeSans complete */
@font-face { font-family:FreeSans; src:local('FreeSans'), url('FreeSans.woff')                                  format('woff'); font-weight:normal; font-style:normal; }
@font-face { font-family:FreeSansOblique; src:local('FreeSansOblique'), url('FreeSansOblique.woff')             format('woff'); font-weight:normal; font-style:oblique; }
@font-face { font-family:FreeSansBold; src:local('FreeSansBold'), url('FreeSansBold.woff')                      format('woff'); font-weight:bold;   font-style:normal; }
@font-face { font-family:FreeSansBoldOblique; src:local('FreeSansBoldOblique'), url('FreeSansBoldOblique.woff') format('woff'); font-weight:bold;   font-style:oblique; }

/* font-family FreeSerif complete  */
@font-face { font-family:FreeSerif; src:local('FreeSerif'), url('FreeSerif.woff')                               format('woff'); font-weight:normal; font-style:normal; }
@font-face { font-family:FreeSerifItalic; src:local('FreeSerif'), url('FreeSerifItalic.woff')                   format('woff'); font-weight:normal; font-style:italic; }
@font-face { font-family:FreeSerifBold; src:local('FreeSerifBold'), url('FreeSerifBold.woff')                   format('woff'); font-weight:bold;   font-style:normal; }
@font-face { font-family:FreeSerifBoldItalic; src:local('FreeSerifBoldItalic'), url('FreeSerifBoldItalic.woff') format('woff'); font-weight:bold;   font-style:italic; }

@keyframes blendIn
{ 0% { opacity:0.5; } 100% { opacity:1; } }

body { width:760px; margin:15px auto; background-color:#033; animation:blendIn 0.5s; font-size:100%; }
* { scrollbar-width: auto; scrollbar-color: #9C9 #000; }

#header      { width:760px; clear:left; border-bottom:0px solid; color:#9c9; }
#description { width:760px; color:#bbb; }
#logo        { position:relative; top:7px; }
#backlinks   { height:auto; }
#footer      { width:760px; position:relative; top:85px; padding-bottom:10px; }
#title       { font-family:FreeSerif, 'Times New Roman', Georgia, 'Droid Serif', serif; font-size:2.0em; margin-bottom:0px; color:#9c9; }
#linie1      { border-bottom:1px solid #99cc99; position:absolute; top:85px; width:760px; }
#title1      { font-family:FreeSerif, 'Times New Roman', Georgia, 'Droid Serif', serif; font-size:3.5em; position:absolute; top:5px; color:#9c9; text-shadow:1px 1px 1px black; }
#title2      { font-family:FreeSerif, 'Times New Roman', Georgia, 'Droid Serif', serif; font-size:1.25em; width:600px; position:absolute; top:58px; color:#9c9; padding:0px; margin-top:10px; white-space:nowrap; text-shadow:1px 1px 1px black; }
#menu        { font-family:FreeSans, Arial, Helvetica, 'Droid Sans', sans-serif; font-weight:normal; width:760px; position:relative; top:90px; margin-top:-21%; color:#bbb; white-space:nowrap; text-shadow:1px 1px 1px black; }
#menu01      { position:relative; top:-20px; right:0px; float:right; }
#menu02      { position:relative; top:-80px; right:0px; float:right; }
#menu03      { position:relative; top:-30px; right:-152px; float:right; }
#content     { font-family:FreeSans, Arial, Helvetica, 'Droid Sans', sans-serif; position:relative; top:80px; }
#copyright   { color:#bbb; font-size:0.85em; }

h1    { font-family:FreeSerif, 'Times New Roman', Georgia, 'Droid Serif', serif; font-size:2.00rem; line-height:2.25rem; margin-bottom:0px; color:#9c9; text-shadow:1px 1px 1px black; }
h2    { font-family:FreeSerif, 'Times New Roman', Georgia, 'Droid Serif', serif; font-size:1.75rem; line-height:2.00rem; color:#9c8; text-shadow:1px 1px 1px black; }
h3    { font-family:FreeSerif, 'Times New Roman', Georgia, 'Droid Serif', serif; font-size:1.50rem; line-height:1.75rem; color:#9c7; text-shadow:1px 1px 1px black; }
h4    { font-family:FreeSans, Arial, Helvetica, 'Droid Sans', sans-serif; font-size:1.25rem; line-height:1.50rem; color:#9c6; text-align:center; }
p     { font-family:FreeSans, Arial, Helvetica, 'Droid Sans', sans-serif; color:white; }
ul    { list-style-type:square; }
li    { font-family:FreeSans, Arial, Helvetica, 'Droid Sans', sans-serif; margin-bottom:5px; color:#9c9; }
hr    { color:#9c9; }
img   { max-width:736px; border:2px solid; border-color:#eee; }
video { border:2px solid; border-color:#eee; }

a:link, a:visited, a:active, a:hover { color:#fda; text-decoration:none; -moz-transition:all 0.25s ease-in; -o-transition:all 0.25s ease-in; -webkit-transition:all 0.25s ease-in; -ms-transition:all 0.25s ease-in; transition:all 0.25s ease-in; }
a:active, a:hover                    { text-decoration:underline; -moz-transition:all 0.25s ease-in; -o-transition:all 0.25s ease-in; -webkit-transition:all 0.25s ease-in; -ms-transition:all 0.25s ease-in; transition:all 0.25s ease-in; text-shadow:1px 2px 10px; }
a:link.httpn                         { color:lightcoral; }
a:link.https                         { color:#9c9; }
a.menu:link, a.menu:visited          { color:#fda; text-decoration:none; }
a.menu:active, a.menu:hover          { color:#fda; text-decoration:underline; -moz-transition:all 0.25s ease-in; -o-transition:all 0.25s ease-in; -webkit-transition:all 0.25s ease-in; -ms-transition:all 0.25s ease-in; transition:all 0.25s ease-in; }
img:hover                            { border-color:#fda; -moz-transition:all 0.25s ease-in; box-shadow:0px 0px 3px #fda; -o-transition:all 0.25s ease-in; box-shadow:0px 0px 3px #fda; -webkit-transition:all 0.25s ease-in; box-shadow:0px 0px 3px #fda; -ms-transition:all 0.25s ease-in; box-shadow:0px 0px 3px #fda; transition:all 0.25s ease-in; box-shadow:0px 0px 3px #fda; }

.httpn              { color:lightcoral; }
.https              { color:#9c9; }
.http0              { color:#fda; }
.mitte              { text-align:center; }
/* mitte              { text-align:center; position:relative; top:10px; } */
.rechts             { text-align:right; }
.ueberschrift4      { text-align:left; font-family:FreeSerif, 'Times New Roman', Georgia, 'Droid Serif', serif; font-size:1.25rem; line-height:1.50rem; color:#9c6; text-shadow:1px 1px 1px black; }
.oben               { vertical-align:top; }
.kleiner            { font-size:85%; }
.groesser           { font-size:1.5em; color:#9c9; }
.groesser2          { font-size:1.05em; color:white; }
.outline            { color:#fda; text-shadow:0px 0px 4px white; }
.kursiv             { font-style:italic; }
.eingerueckt        { text-indent:28px; }
.wortabstand        { letter-spacing:0.09em; }
.fett               { font-weight:bold; }
.durchgestrichen    { text-decoration:line-through; }
.unterstrichen      { text-decoration:underline; }
.tief               { vertical-align:sub; font-size:smaller; }
.hochgestellt       { vertical-align:super; font-size:smaller; }
.kapitaelchen       { font-variant:small-caps; }
.slideshowimage     { position:absolute; left:11px; }
.fl                 { font-size:2.0em; float:left; font-family:FreeSerif, 'Times New Roman', Georgia, 'Droid Serif', serif; font-style:italic; padding-right:5px; position:relative; top:-3px; color:#9c9; text-shadow:1px 1px 1px black; }
.fl2                { font-size:3.0em; position:relative; top:20px; left:-5px; }
.fixed              { position:fixed; bottom:0px; text-indent:770px; }
.normal_link        { font-size:100%; text-decoration:none; }
.rot                { color:lightcoral; }
.grau               { color:#bbb; }
.gelb               { color:#fda; }
.gruen              { color:#9c9; }
.blau               { color:#00f; }
.blauhell           { color:#77f; }
.weiss              { color:#fff; }
.maximalbreite      { width:760px; }
.bild_abstand       { margin-bottom:10px; border-style:solid; }
.bildumfluss        { float:left; margin-top:4px; margin-right:10px; }
.bildumfluss-rechts { float:right; margin-bottom:10px; margin-left:10px; }
.noborder           { border:0px solid; border-color:#033; }
.logo               { float:right; border:0px solid; border-color:#033; }
.elipse             { background-color:#bbb; border-radius:15px; text-align:center; padding-top:3px; margin-bottom:2px; }
.links              { vertical-align:super; font-size:75%; text-shadow:1px 1px 1px black; }
.achtung            { font-weight:bold; color:#9c9; }
.copy-left          { display:inline-block; text-align:right; position:relative; top:2px; font-size:1.5em; -moz-transform:scaleX(-1); -o-transform:scaleX(-1); -webkit-transform:scaleX(-1); transform:scaleX(-1); filter:FlipH; -ms-filter:"FlipH"; }
.andersrum          { display:inline-block; text-align:right; padding:0px; position:relative; top:-1px; -moz-transform:scaleX(-1); -o-transform:scaleX(-1); -webkit-transform:scaleX(-1); transform:scaleX(-1); filter:FlipH; -ms-filter:"FlipH"; }
.kopfueber          { display:inline-block; -transform:rotate(180deg); -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg); }
.listenpunkt        { list-style-type:none; background-image:url('../graphics/icons/mutbuerger_klein.png'); background-repeat:no-repeat; background-position:0px 3px; padding-left:26px; margin-left:-40px; }
.linie-kurz         { width:50%; }
.lp                 { color:black; background-color:white; font-weight:bold; font-variant:small-caps; text-shadow:red 2px 2px 1px; font-family:Ubuntu, Arial, Helvetica, 'Droid Sans', sans-serif; font-size:1.25rem; line-height:1.25rem; padding:0px 5px 0px 5px; border-radius:5px; }


/* für GROSSE DESKTOP-Bildschirme zwischen 1600 und 4000 Pixel */ 

@media only screen and (max-width:2400px) {
body { font-size:100%; }
#header { width:100%; height:160px; }
}


/* für KLEINE DESKTOP-Bildschirme zwischen 960 und 1600 Pixel */

@media only screen and (max-width:1600px) {
body { font-size:100%; width:760px; }
#header { width:100%; }
}


/* für TABLET-Bildschirme zwischen 480 und 1024 Pixel */

@media only screen and (max-width:1024px) {
body { font-size:100%; }
#header { width:98%; height:130px; }
#menu { width:48%; height:10px; font-size:85%; margin-top:-18%; box-sizing:border-box; }
}


/* für MOBILES mit max 600 Pixel */

@media only screen and (max-width:600px) {
body { width:198%; font-size:100%; margin-left:3%; }
#header { width:98%; height:10px; font-size:80%; box-sizing:content-box; }
#title1 { font-size:300%; }
#title2 { font-size:100%; margin-top:-3%;}
#linie1 { width:95%; margin-top:-3%; }
#menu { width:48%; height:10px; font-size:85%; margin-top:-3%; box-sizing:border-box; }
#logo { margin-top:-4%; }
#content { width:48%; box-sizing:border-box; }
#footer { width:48%; height:10px; box-sizing:border-box; }
}


/* zwischen 360 und 480 Pixel */

@media only screen and (max-width:480px) {
body { width:198%; font-size:100%; margin-left:3%; }
#header { width:98%; height:10px; font-size:80%; box-sizing:content-box; }
#title2 { font-size:150%; white-space:normal; margin-top:0%; }
#linie1 { width:95%; margin-top:4%; }
#menu { width:48%; height:10px; font-size:100%; box-sizing:border-box; white-space:normal; margin-top:-5%; }
#logo { margin-top:-4%; }
#content { width:48%; box-sizing:border-box; }
#footer { width:48%; height:10px; box-sizing:border-box; }
#description { width:98%; height:10px; font-size:80%; margin-bottom:30%; box-sizing:content-box; }
#titelbild { margin-top:0%; }
#quote { width:98%; height:10px; font-size:100%; margin-top:0%; box-sizing:content-box; }
#years { width:198%; }
}


/* max 360 Pixel */

@media only screen and (max-width:360px) {
body { width:98%; font-size:100%; margin-left:3%; }
#linie1 { width:95%; margin-top:6%; }
#menu { margin-top:-4%; width:200%; }
#content { width:100%; }
}