@media all {

body, div,
h1, h2, h3, h4, h5, h6,
p, 
blockquot, pre, code,
ul, ol, li, 
table, th, td,
form, fieldset, legend, input, textarea
{padding:0; margin:0;}

h2, h3, h4, h5, h6,
p, blockquote, pre, 
ul, ol 
{margin-bottom:1em;}

ul, ol { margin-left:2em;}
ul ul, ul ol, ol ol,ol ul {margin-bottom:0;}
blockquote {margin:1em 2em;}

.clearing {
  clear:both;
}

}

/* ------------------- */

@media screen {

body {
  background-color:#8c8c8c;
  background-image:url(hntgr.png);
  background-attachment:fixed;
  color:white;
  font-family:Verdana, Arial, sans-serif;
  font-size:80%;
}

h1#name {
  font-size:120%; font-style:normal; font-weight:normal;
  position:absolute;
  top:12px;
  right:10px;
  padding-left:12px;
  letter-spacing:2.5px;
  text-shadow: 2px 2px 2px black;
  color:silver; 
}
h2#homepage {
  font-size:180%; font-style:normal; font-weight:bold;
  text-shadow: 2px 2px 2px black;
  position:absolute;
  top:30px;
  right:10px;
}
h2#qtitel {
  font-size:180%; font-style:normal; font-weight:bold;
  text-shadow: 2px 2px 2px black;
  color:white;
}
h2#seitentitel {
  text-shadow: 2px 2px 2px gray;
}
h2#kseitentitel {
  margin-bottom:0.5em;
  font-size:3em;
  color:red;
  text-shadow: 3px 3px 3px #f3c600;
}
h3 {
  font-size:100%;
  padding-top: 1em;
}
h4 {
  padding-top: 1em;
}

address {
  text-align:center;
  font-size:80%;
  font-style:normal;
  letter-spacing:2px;
  padding-bottom:2px;
}

span#datum {
  font-size:80%;
  font-style:normal;
  letter-spacing:2px;
}

p#aenderung {
  color:red;	
}
	
img.brahmenlinks {
  margin:15px;
  margin-left:0;
  border:1px solid;
  border-color:#909090 #ffffff #ffffff #909090;
}

img.brahmenrechts {
  margin:15px;
  margin-right:0;
  border:1px solid;
  border-color:#909090 #ffffff #ffffff #909090;
}

img.floatlinks {
  float:left;
}

img.floatrechts {
  float:right;
}

div.tmarkierung {
  padding:1em 1em 0 1em;
  margin-top:1em;
  background-color:#e8e8e8;
  border:1px solid;
  border-color:#909090 #000000 #000000 #909090;
}

div.ktmarkierung {
  padding:1em;
  margin-top:-1px;
  background-color:#ddefe8;
  border:1px solid;
  border-top-color:#909090;
  border-right-color:#000000;
  border-bottom-color:#000000;
  border-left-color:#909090;
}

div.bmarkierung {
  margin:1.5em 0 0 0;
}

img.bildrahmen {
  padding:1px;
  margin:0;
  background-color:#cccccc;
  border:1px solid;
  border-color:#909090 #000000 #000000 #909090;
}

a.vfarbe {
  padding:1em;
  padding-right:10em;
  padding-left:1em;
  color:white;
}

.tvfarbe {
  color:white;
}

.tfarbe_{
  padding:1em;
  color:black;
  background-color:#BB7777;
}
.tfarbe_r1{
  padding:1em;
  background-color:#998877;
}
.tfarbe_r2{
  padding:1em;
  background-color:#228877;
}
.tfarbe_r3{
  padding:1em;
  background-color:#995577;
}
.tfarbe_r4{
  padding:1em;
  background-color:#779977;
}
.tfarbe_r5{
  padding:1em;
  background-color:#BB8877;
}
.tfarbe_r6{
  padding:1em;
  background-color:#88AA99;
}
.tfarbe_r7{
  padding:1em;
  background-color:#669955;
}
.tfarbe_r8{
  padding:1em;
  background-color:#888844;
}
.tfarbe_r9{
  padding:1em;
  background-color:#AA9999;
}
.tfarbe_r10{
  padding:1em;
  background-color:#6FC600;
}
.tfarbe_r11{
  padding:1em;
  background-color:#889911;
}
.tfarbe_r12{
  padding:1em;
  background-color:#559887;
}
.tfarbe_r13{
  padding:1em;
  background-color:#887744;
}
.tfarbe_r14{
  padding:1em;
  background-color:#FFCC00;
}
.tfarbe_r15{
  padding:1em;
  background-color:#44CC00;
}
.tfarbe_r16{
  padding:1em;
  background-color:#CC2200;
}
.tfarbe_r17{
  padding:1em;
  background-color:#11FF55;
}
.tfarbe_r18{
  padding:1em;
  background-color:#EEDD00;
}
.tfarbe_r19{
  padding:1em;
  background-color:#77DD00;
}
.tfarbe_r20{
  padding:1em;
  background-color:#DD00FF;
}
.tfarbe_r21{
  padding:1em;
  background-color:#664488;
}
.tfarbe_r22{
  padding:1em;
  background-color:#008844;
}
.tfarbe_r23{
  padding:1em;
  background-color:#776600;
}
.tfarbe_r24{
  padding:1em;
  background-color:#006677;
}
.tfarbe_r25{
  padding:1em;
  background-color:#FF0055;
}
.tfarbe_r26{
  padding:1em;
  background-color:#770055;
}
.tfarbe_r27{
  padding:1em;
  background-color:#226655;
}
.tfarbe_r28{
  padding:1em;
  background-color:#AA7700;
}
.tfarbe_r29{
  padding:1em;
  background-color:#0066DD;
}
.tfarbe_r30{
  padding:1em;
  background-color:#009944;
}
.tfarbe_r31{
  padding:1em;
  background-color:#770022;
}
.tfarbe_r32{
  padding:1em;
  background-color:#BB9900;
}
.tfarbe_r33{
  padding:1em;
  background-color:#BB3300;
}
.tfarbe_r34{
  padding:1em;
  background-color:#AABB00;
}
.tfarbe_r35{
  padding:1em;
  background-color:#00BBAA;
}
.tfarbe_r36{
  padding:1em;
  background-color:#CCBBAA;
}
.tfarbe_r37{
  padding:1em;
  background-color:#0055CC;
}
.tfarbe_r38{
  padding:1em;
  background-color:#AA9900;
}
.tfarbe_r39{
  padding:1em;
  background-color:#22CCBB;
}
.tfarbe_r40{
  padding:1em;
  background-color:#44EE88;
}
.tfarbe_r41{
  padding:1em;
  background-color:#990066;
}
.tfarbe_r42{
  padding:1em;
  background-color:#99EE00;
}
.tfarbe_r43{
  padding:1em;
  background-color:#EEBB22;
}
.tfarbe_r44{
  padding:1em;
  background-color:#AA6633;
}
.tfarbe_r45{
  padding:1em;
  background-color:#004477;
}
.tfarbe_r46{
  padding:1em;
  background-color:#CC6622;
}
.tfarbe_r47{
  padding:1em;
  background-color:#FF2200;
}
.tfarbe_r48{
  padding:1em;
  background-color:#77FFAA;
}
.tfarbe_r49{
  padding:1em;
  background-color:#CCCC00;
}

div.quittabstand {
  padding-top:10em;
  padding-bottom:10em;
}

div#wrapper {
  background-color:white;
  color:black;
  width:96%;
  margin-top:10px;
  margin-right:auto;
  margin-bottom:10px;
  margin-left:auto;
}

div#kopfbereich {
  position:relative;
  background-color:#3877ea;
  color:silver;
  padding:0;
}

div#kopfband {
  height:120px;
  background:url(blauband.gif) repeat-x;
  min-width:300px;
  border:1px solid #f3c600;
}

span#kbild {
  position:absolute;
  top:1px;
  left:1px;
}

span#slogan {
  position:absolute;
  top:90px;
  right:10px;
  letter-spacing:1.2px;
  text-shadow: 2px 2px 2px black;
  color:#dddddd;
  font-size:80%; font-weight:bold;
}

div#titel {
  padding-top:0.6em;
  padding-left:9em;
}

span#qslogan {
  position:relative;
  top:-14px;
  text-shadow: 2px 2px 2px black;
  color:silver;
  font-style:italic;
}

div#quizende {
  font-weight:bold;
  text-shadow: 1px 1px 1px white;
  color:red;
  background-color:#f3c600;
  padding-top:1em;
  padding-left:2em;
}

div#wrapper1foto {
  background-color:green;
  color:black;
  width:100%;   /*1000px;*/
  margin-top:0;
  margin-right:auto;
  margin-bottom:0;
  margin-left:auto;
}

div#textbereich {
  padding-top:20px;
  padding-right:20px;
  padding-bottom:20px;
  padding-left:20px;
  line-height:1.5;
}

div#ktextbereich {
  padding-top:20px;
  padding-right:10px;
  padding-bottom:20px;
  padding-left:10px;
  line-height:1.5;
  background-color:yellow;
}

ul.antworten {
  line-height:3.5em;
  list-style-type:none;
}

ul.antworten label {
  padding-left:1em;
}

div#pangaben {
  padding-right:1em;
  padding-left:1em;
  margin-top:1em;
  background-color:#c0c0c0;
  border:1px solid;
  border-color:#909090 #000000 #000000 #909090;
}

ul.kontaktdaten_angaben {
  line-height:2em;
  list-style-type:none;
}

div#pangaben input {
  margin-left:3em;
  border:1px solid green;
}

input.kontaktdaten_knoepfe {
  margin-top:1em;
  width:10em;
}

input.umfrage_knoepfe {
  margin-top:1em;
  width:10em;
}

div#gnachricht {
  padding:0.3em;
  margin:0.3em;
  margin-bottom:1em;
  color:black;
  background-color:#88aaee;
  border:1px solid #dddddd; border-right:1px solid #444444; border-bottom:1px solid #444444;
}

label#kibenutzer {
  font-size:100%; font-style:normal; font-weight:bold;
  color:#ff0044;
}

label#kidatumzeit {
  font-size:100%; font-style:italic; font-weight:bold;
  color:#ffc600;
}

p#kinachricht {
  margin-top:0;
  font-size:100%; font-style:normal; font-weight:normal;
}

ul#gewinner {
  line-height:3em;
  list-style-type: square;
  font-weight:bold;
  color: blue;
}

div#fussbereich {
  padding-top:10px;
  padding-right:20px;
  padding-bottom:10px;
  padding-left:20px;
  border-top:1px solid #8c8c8c;
  margin-top:0;
}

input.ki_senden {
  margin-top:1em;
  width:10em;
}

input.ki_verwerfen {
  margin-top:1em;
  width:10em;
}

input#ki_senden {
  font-size:1em;
  margin-top:0.5em;
  margin-right:5px;
  margin-bottom:0.5em;
  margin-left:0;
  padding:0.5em;
  color:black;
  background-color:white;
  box-shadow:5px 5px 5px 5px gray;
  border:1px solid blue;
  border-radius:1em;
}

input#ki_verwerfen {
  font-size:1em;
  margin-top:0.5em;
  margin-right:1em;
  margin-bottom:0.5em;
  margin-left:0;
  padding:0.5em;
  color:black;
  background-color:white;
  box-shadow:5px 5px 5px 5px gray;
  border:1px solid brown;
  border-radius:1em;
}

}

/* ------------------- */

@media screen {

div#navibereich {
  text-align:left;
  color:black;
  background-color:#f3c600;
  padding-top:15px;
  padding-right:1px;
  padding-bottom:4px;
  padding-left:1px;
  border-bottom:1px solid #8c8c8c;
}
div#knavizusatz {
  margin-left:2em;
  margin-bottom:-2px;
}

div#navibereich ul, div#knavibereich ul {
  margin:0;
  list-style-type:none;
}

div#navibereich li, div#knavibereich li {
  margin:0; 
  display:inline;
}

div#navibereich a, div#knavibereich a {
  color:black;
  background-color:#ffeda0;
  text-decoration:none;
  padding:4px 2px 4px 2px;
  border:1px solid #8c8c8c;
}

div#navibereich li.kinderquiz a {
  color:red;
  background-color:yellow;
}

div#navibereich li.sie-sind-hier a {
  color:black;
  background-color:white;
  border-bottom-color:white;
}

div#navibereich li.ihr-seid-hier a, div#knavibereich li.ihr-seid-hier a {
  color:red;
  background-color:white;
  border-bottom-color:white;
}

div#navibereich a:hover,
div#navibereich a:focus,
div#knavibereich a:hover,
div#knavibereich a:focus {
  color:maroon;
  background-color:white;
  border-bottom-color:white;
}

div#navibereich a:active,
div#knavibereich a:active {
  color:white;
  background-color:#8c8c8c;
  border-bottom-color:white;
}

.ki_nachricht {
  margin-top:0;
  margin-right:4em;
  margin-bottom:1em;
  width:80%;
  border:1px solid #444444; border-right:1px solid #EEEEEE; border-bottom:1px solid #EEEEEE;
}

}

/* ------------------- */

@media only screen and (min-width: 2561px) {
  div#wrapper {
    width:20%;
  }
}

@media only screen and (max-width: 2560px) {
  div#wrapper {
    width:31%;
  }
}

@media only screen and (max-width: 2048px) {
  div#wrapper {
    width:38%;
  }
}

@media only screen and (max-width: 1920px) {
  div#wrapper {
    width:41%;
  }
}

@media only screen and (max-width: 1820px) {
  div#wrapper {
    width:43%;
  }
}

@media only screen and (max-width: 1710px) {
  div#wrapper {
    width:46%;
  }
}

@media only screen and (max-width: 1600px) {
  div#wrapper {
    width:49%;
  }
}

@media only screen and (max-width: 1490px) {
  div#wrapper {
    width:53%;
  }
}

@media only screen and (max-width: 1380px) {
  div#wrapper {
    width:57%;
  }
}

@media only screen and (max-width: 1280px) {
  div#wrapper {
    width:61%;
  }
}

@media only screen and (max-width: 1160px) {
  div#wrapper {
    width:67%;
  }
}

@media only screen and (max-width: 1060px) {
  div#wrapper {
    width:76%;
  }
}

@media only screen and (max-width: 900px) {
  div#wrapper {
    width:86%;
  }
}

@media only screen and (max-width: 780px) { 
  div#wrapper {
    width:100%;
  }
}

@media only screen and (max-width: 650px) {
  div#wrapper {
    width:100%;
    margin-top:0;
    margin-bottom:0;
  }
  p#slogan {
    position:absolute;
    top:80px;
    right:10px;
    padding:5px 0 5px 0;
  }
  div#navibereich {
    text-align:left;
    color:black;
    background-color:#f3c600;
    padding-top:45px;
    padding-right:0px;
    padding-bottom:10px;
    padding-left:5px;
  }
  div#navibereich ul {
    margin:0;
    list-style-type:none;
  }
  div#navibereich li {
    display:block;
    padding:10px;
    margin:10px;
  }
  div#navibereich a {
    color:black;
    background-color:#ffeda0;
    padding:8px;
    padding-left:70px;
  }
  div#navibereich li.sie-sind-hier a {
    color:black;
    background-color:white;
    border-bottom-color:#8c8c8c;
  }
  div#navibereich a:hover,
  div#navibereich a:focus {
    color:maroon;
    background-color:white;
    border:4px solid #8c8c8c;
  }

  div#navibereich a:active {
    color:red;
    background-color:#8c8c8c;
  }

  div#textbereich {
    padding:0;
    padding-top:20px;
  }
}

@media only screen and (max-width: 480px) {
  div#wrapper {
    width:100%;
    margin-top:0;
    margin-bottom:0;
  }
  p#slogan {
    position:absolute;
    top:80px;
    right:10px;
    padding:5px 0 5px 0;
  }
  div#navibereich {
    text-align:left;
    color:black;
    background-color:#f3c600;
    padding-top:45px;
    padding-right:0px;
    padding-bottom:10px;
    padding-left:5px;
  }
  div#navibereich ul {
    margin:0; 
    list-style-type:none;
  }
  div#navibereich li {
    display:block;
    padding:10px;
    margin:10px;
  }
  div#navibereich a {
    color:black;
    background-color:#ffeda0;
    padding:8px;
    padding-left:70px;
  }
  div#navibereich li.sie-sind-hier a {
    color:black;
    background-color:white;
    border-bottom-color:#8c8c8c;
  }
  div#navibereich a:hover,
  div#navibereich a:focus {
    color:maroon;
    background-color:white;
    border:4px solid #8c8c8c;
  }

  div#navibereich a:active {
    color:red;
    background-color:#8c8c8c;
  }

  div#textbereich {
    padding:0;
    padding-top:20px;
  }
}

@media only screen and (max-width: 320px) {
  div#wrapper {
    width:100%;
    margin-top:0;
    margin-bottom:0;
  }
  p#slogan {
    position:absolute;
    top:70px;
    right:10px;
    left:110px;
    color:black;
    padding:5px 0 5px 0;
  }
  div#navibereich {
    text-align:left;
    color:black;
    background-color:#f3c600;
    padding-top:50px;
    padding-right:0px;
    padding-bottom:10px;
    padding-left:5px;
  }
  div#navibereich ul {
    margin:0; 
    list-style-type:none;
  }
  div#navibereich li {
    display:block;
    padding:10px;
    margin:10px;
  }
  div#navibereich a {
    color:black;
    background-color:#ffeda0;
    padding:8px;
    padding-left:70px;
  }
  div#navibereich li.sie-sind-hier a {
    color:black;
    background-color:white;
    border-bottom-color:#8c8c8c;
  }
  div#navibereich a:hover,
  div#navibereich a:focus {
    color:maroon;
    background-color:white;
    border:4px solid #8c8c8c;
  }

  div#navibereich a:active {
    color:red;
    background-color:#8c8c8c;
  }

  div#textbereich {
    padding:0;
    padding-top:20px;
  }

}