/* 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; }

/* misc */
@font-face { font-family:FreeSans; src:local('FreeSans'), url('FreeSans.woff')                                  format('woff'); font-weight:normal; font-style:normal; }
@font-face { font-family:Ubuntu; src:local('UbuntuRegular'), url('ubuntu-regular-webfont.woff')                 format('woff'); font-weight:normal; font-style:normal; }

@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            { clear:left; border-bottom:0px solid #9c9; }
#description       { color:#bbb; }
#logo              { position:relative; top:7px; }
#content_menue     { position:relative; top:-125px; float:left; }
#impressum         { position:relative; top:10px; float:right; }
#footer            { width:760px; position:relative; top:85px; padding-bottom:10px; }
#footer_alternativ { border-top:1px solid #9c9; position:absolute; height:10px; width:760px; vertical-align:bottom; }
#linie1            { border-bottom:1px solid #9c9; 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; 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; position:relative; top:90px; color:#bbb; white-space:nowrap; text-shadow:1px 1px 1px black; }
#content           { font-family:FreeSans, Arial, Helvetica, 'Droid Sans', sans-serif; position:relative; top:80px; }
#copyright         { color:#bbb; font-size:0.85em; }
#Portrait          { position:relative; top:20px; left:75px; float:right; }

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; }
h5  { font-family:FreeSans, Arial, Helvetica, 'Droid Sans', sans-serif; font-size:1.00rem; line-height:1.25rem; color:#9c5; text-align:center; }
p   { font-family:FreeSans, Arial, Helvetica, 'Droid Sans', sans-serif; color:#eee; }
ul  { list-style-type:square; }
li  { font-family:FreeSans, Arial, Helvetica, 'Droid Sans', sans-serif; margin-bottom:10px; color:#eee; }
img { 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; }
.links                { text-align:left; }
.oben                 { vertical-align:top; }
.eingerueckt          { text-indent:28px; }
.hochgestellt         { vertical-align:super; font-size:smaller; }
.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; }
.kapitaelchen         { font-variant:small-caps; }
.hoeher               { position:relative; top:-28px; }
.serif                { font-family:FreeSerif, 'Times New Roman', Georgia, 'Droid Serif', serif; }
.fl                   { font-size:3.0em; position:relative; top:20px; left:-5px; }
.fl2                  { 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; }
.fixed                { position:fixed; bottom:0px; text-indent:770px; }
.kleiner              { font-size:85%; }
.groesser             { font-size:1.5em; color:#9c9; }
.groesser2            { font-size:1.05em; color:white; }
.kursiv               { font-style:italic; }
.haengend             { padding-left:26px; }
.outline              { color:#fda; text-shadow:0px 0px 4px white; }
.kurz                 { width:75%; }
.normal_link          { font-size:100%; text-decoration:none; }
.weiss                { color:white; }
.schwarz              { color:black; }
.hellgruen            { color:#9c9; }
.rot                  { color:lightcoral; }
.grau                 { color:#bbb; }
.bild_abstand         { margin-bottom:10px; }
.bildumfluss          { float:left; margin-top:4px; margin-right:10px; }
.bildumfluss-rechts   { float:right; margin-bottom:10px; margin-left:10px; }
.textumfluss          { float:right; margin-left:4px; margin-bottom:4px; }
.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"; }
.listebuchstabe       { list-style-type: upper-alpha; }
.freiesmagazin        { list-style-type:none; background-image:url('../graphics/icons/freies-magazin_klein.png'); background-repeat:no-repeat; background-position:0px 3px; padding-left:26px; margin-left:-40px; }
.frieden              { list-style-type:none; background-image:url('../graphics/icons/frieden-achim-schmitz_klein.png'); background-repeat:no-repeat; background-position:0px 3px; padding-left:26px; margin-left:-40px; }
.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; }
.linux-praktiker      { list-style-type:none; background-image:url('../graphics/icons/linux-praktiker_klein.png'); background-repeat:no-repeat; background-position:0px 3px; padding-left:26px; margin-left:-40px; }
.zonesystem           { list-style-type:none; background-image:url('../graphics/icons/zonesystem_klein.png'); background-repeat:no-repeat; background-position:0px 3px; padding-left:26px; margin-left:-40px; }
.fas                  { color:#4eb638; background-color:white; font-weight:bold; padding:2px 5px 0px 5px; border-radius:5px; }
.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; }
.mbd1                 { color:#9c9; background-color:#033; font-weight:bold; padding:2px; border-radius:5px 0px 0px 5px; }
.mbd2                 { color:#fda; text-shadow:0px 0px 4px white; background-color:#033; font-style:italic; padding:2px 5px 2px 2px; border-radius:0px 5px 5px 0px; }
.zs                   { color:#3c78a6; background-color:#aaaaaf; font-weight:bold; padding:2px; border-radius:5px; }


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

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


/* zwischen 1024 und 1600 Pixel */

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


/* zwischen 800 und 1024 Pixel */

@media only screen and (max-width:1024px) {
body { font-size:100%; width:100%; margin-left:3%; margin-top:-1.5%; }
#header { width:75%; height:130px; }
#title2 { font-size:125%; white-space:normal; }
#menu { width:98%; height:10px; margin-top:-13%; white-space:normal; }
}


/* zwischen 768 und 800 Pixel */

@media only screen and (max-width:800px) {
body { font-size:100%; width:95%; margin-left:3%; margin-top:-1%; }
#header { width:100%; height:130px; }
#title2 { font-size:125%; white-space:normal; }
#menu { width:98%; height:10px; margin-top:-18%; white-space:normal; }
}


/* zwischen 640 und 768 Pixel */

@media only screen and (max-width:768) {
body { font-size:100%; width:100%; margin-left:3%; }
#header { width:100%; height:130px; }
#title2 { font-size:125%; white-space:normal; }
#menu { width:98%; height:10px; margin-top:-17%; white-space:normal; }
}


/* zwischen 600 und 640 Pixel */

@media only screen and (max-width:640px) {
body { width:640px; }
#header { margin-top:4%; }
#linie1 { width:95%; margin-top:2%; }
#menu { width:600px; font-size:100%; margin-top:-20%; white-space:normal; }
}


/* zwischen 480 und 600 Pixel */

@media only screen and (max-width:600px) {
body { width:600px; }
#header { margin-top:7%; }
#linie1 { width:95%; margin-top:5%; }
#menu { width:600px; font-size:100%; margin-top:-22%; white-space:normal; }
}


/* 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; }
#Neuigkeiten { height:10px; font-size:200%; box-sizing:content-box; margin-top:20%; }
#Kontakt { height:10px; font-size:200%; box-sizing:content-box; margin-top:70%; }
#Themenbereiche { margin-top:35%; }
#Links-Themen { margin-top:-5%; }
#Eigene-Projekte-und-Experimente { margin-top:35%; }
#description { width:98%; height:10px; 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%; }
#Neuigkeiten { margin-top:5%; }
#Termine { margin-top:25%; }
#Verweise { margin-top:20%; }
#Links-Themen { margin-top:25%; }
#Texte { margin-top:25%; }
#Datenschutzerklaerung { margin-top:25%; }
#Kontakt { margin-top:25%; }

}