body, html { background-color:#000;
             background-image: url(../images/karbon_hintergrund.png);
             margin-top: 0px; 
             margin-left: 0px; 
             margin-right: 0px;
             margin-bottom: 0px;  
             padding: 0px; 
             height: 100%;
             min-height: 100%;
             margin:0;
           }

#main { width:1200px;
        margin-top:0em;
        margin-right:auto;
        margin-bottom:0em;
        margin-left:auto;
        min-height: 100%;
        background-color: #f4f3af;
        background-image: -webkit-linear-gradient(to right, #f4f3af,#ff5522);
        background-image: linear-gradient(to right, #f4f3af,#ff5522);
        /*box-shadow: 0px -5px 30px #ff5522;*/
        /*background-image: linear-gradient(to right, #f4f3af,#ff5522,rgb(44,44,255));
        -moz-box-shadow: 10px 0 10px #999 inset;
	      -webkit-box-shadow: 10px 0 10px #999 inset;
	      box-shadow: 10px 0 10px #999 inset;*/
        overflow: hidden;
        z-index:0;
        position: relative;
       }
      
#content { margin-left:260px;
           margin-right:30px;
           /*min-height: 100%;*/
           background-color: lightblue;
           -webkit-box-shadow: hsla(36, 4%, 25%, 0.8) 0px 0px 20px;
           box-shadow: hsla(36, 4%, 25%, 0.8) 0px 0px 20px;
           padding-top:1em;
           padding-left: 1em;
           position:relative;
           /*border:3px solid;*/
           border-radius:15px;
           overflow: hidden;
           top:35px;
           margin-bottom:25px;
           z-index: 3;
          }
          
/* img { width: auto; height: auto; } */          

#ham_menu { top:5px;
            left:5px;
            /* width: 40px;
            height: 30px; */
            /* bottom: 90%; */
            padding: 5px 5px 5px 5px;
            position: absolute;
            font-size:30px;
            vertical-align: middle;
            cursor:pointer;
            background-color: azure;
            border-color: black;
            border-radius: 8px;
            z-index: 99;
          }

.content_trans { /*height:880px;*/
                   opacity:0.8;
                   color: rgba(0,0,0,1);
               } 

.header_spass   { text-align: center;
                  color: rgba(10,66,255,1);
                  font-family: Verdana, Geneva, Tahoma, sans-serif;
                  font-size: 2.5em;
                  text-shadow: 0 0 10px #f00,
                               0 0 60px #f00,
                               0 0 150px #f00;
                }    

.header_comment { color:#2255ff;
                  background-color: lightgoldenrodyellow;
                  border-radius: 5px;
                  padding: 3px;
                }

.content_comment  { color:#000;
                    background-color: palegreen;
                    border-radius: 5px;
                    padding: 3px;
                    padding-left: 15px;
                    padding-right: 15px;
                    margin-left: 22px;
                    margin-bottom: 18px;
                    display: inline-block;
                  }                

.table_spass  { width:80%;
                border:0;
                margin-left:auto; 
                margin-right:auto;
              } 

.liste a      { color: black;
                text-decoration: underline;
              }                                                
          
#menuleft { margin-top: 35px; 
            /*margin-bottom: 20px;*/
            margin-left: 30px;
            /*height:800px;*/
            width:210px;
            background-color:#ddaa99;
            border-radius:15px;
            float:left;
            overflow: hidden;
            /*position:fixed;*/
            z-index:4;
          }          
      
#wife   {
          position: fixed;
          bottom: 0px;
          opacity: 0.5;
          z-index: -1;
        }      

#welcome  { top:50px;
          }

#nice     { padding-bottom: 90px;
          }  

table.intro { border:0;
              margin-left:auto; 
              margin-right:auto;
              margin-top:50px;
              margin-bottom:50px;
              /* width:630px; */
            }      

td.center { width:100%;
            text-align: center;
          }

.begriffe { border: 0;
            margin-left: auto;
            margin-right: auto;
            width: 85%;
          }

.backpre { background-color: #44aadd;
           font-family: 'Consolas', 'Lucida Console', 'Helvetica Mono', 'MS Consolas', 'Sans Typewriter', 'Courier New', 'Verdana', 'Arial', 'Sans-Serif'; 
           color:#000000; 
           font-size:12pt;
         }

.backpre a { color: #fff;}

.overlay { height: 100%;
           width: 0;
           position: fixed;
           z-index: 15;
           top: 0;
           left: 0;
           background-color: rgb(0,0,0);
           background-color: rgba(0,0,0, 0.9);
           overflow-x: hidden;
           transition: 0.5s;
         }

.overlay-content { position: relative;
                   top: 5%;
                   width: 50%;
                   text-align: center;
                   margin-top: 30px;
                   border-radius:15px;
}

.overlay a { padding: 8px;
             text-decoration: none;
             font-size: 14px;
             color: #818181;
             display: block;
             transition: 0.3s;
           }

.overlay a:hover, .overlay a:focus { color: #f1f1f1;
                                   }

.overlay .closebtn { position: absolute;
                     top: 0px;
                     right: 0px;
                     font-size: 60px;
                     color: hsl(0, 1%, 56%);
                   }

/*#navigation, #navigation *
{
   padding: 0;
   margin: 0;
   line-height: 1.5;
   float:left;
}*/
#scrollnav  { width: 11em;
              font-size: 16px;
              /*position: relative;*/
              top: 8px;
              z-index: 1;
              background-color: #991133;
              color: #fff;
              padding:0;
              float:left;
              margin:0;
              line-height: 1.5;
            }

.denken  { font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
           font-size: 1.5em;
         } 


.henry  { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
          font-size: 1.4em;
          color: rgb(99,99,66);
        }   

.backli {
          background: #ff5522;
        }

.glow           { border: 1px solid #ad9c9c;
                  background-color: rgb(100,210,190);
                  width: 22em;
                  line-height: 1.2;
                  padding: 6px 12px;
                  border-radius: 6px;
                  -webkit-box-shadow: 0 1px rgba(34,25,25,0.15) inset, 0 1px #ffffff;
                  box-shadow: 0 1px rgba(34,25,25,0.15) inset, 0 1px #ffffff;
                  -webkit-transition: all 0.4s ease-in-out 0s;
                  transition: all 0.4s ease-in-out 0s;
                }       

.glow:focus     { border-color: #993300;
                  -webkit-box-shadow: 0 1px rgba(34,25,25,0.15) inset, 0 1px rgba(255,255,255,0.8), 0 0 14px rgba(235,82,82,0.35);
                  box-shadow: 0 1px rgba(34,25,25,0.15) inset, 0 1px rgba(255,255,255,0.8), 0 0 14px rgba(235,82,82,0.35);
                  background-color: rgb(0,150,255);
                }

.zButton        { /*margin: 20px;           /* Zitate Button */
                  width: 80px;
                  height: 32px;
                  /*line-height: 14px;*/
                  cursor: pointer;
                  text-align: center;
                  border-radius: 6px;
                  /*border-color: rgb(100,210,190);*/
                  border-color: #A8CEF3;
                  color: black;
                  background: rgb(55,99,200);
                  background-image: -webkit-linear-gradient(rgb(55,99,200), rgb(100,210,190));
                  background-image: linear-gradient(rgb(55,99,200), rgb(100,210,190));
                  background-repeat: repeat-x;
                }

.zButton:hover  { background-color: rgb(100,210,190);
                  background-position: 0 -5px;
                  -webkit-transition: background-position 0.2s linear;
                  transition: background-position 0.2s linear;
                }

.cButton1 { width: 80px;
            height: 24px;
            cursor: not-allowed;
            text-align: center;
            color: red;
            background-color: black;
            border: 1px solid red;
            margin-left: 10px;
            margin-top:6px;
          } 

.cButton2 { width: 80px;
            height: 24px;
            cursor: pointer;
            text-align: center;
            color: green;
            background-color: #A8CEF3;
            border: 1px solid #000;
            margin-left:10px;
            margin-top:6px;
          }                          

.cButton3 { width: 80px;
            height: 24px;
            cursor: not-allowed;
            text-align: center;
            color: red;
            background-color: black;
            border: 1px solid red;
            margin-left: 10px;
            margin-top:6px;
            font-size: 16px;
          } 

.cButton4 { width: 80px;
            height: 24px;
            cursor: pointer;
            text-align: center;
            color: green;
            background-color: #A8CEF3;
            border: 1px solid #000;
            margin-left:10px;
            margin-top:6px;
            font-size: 16px;
          } 

.puzzle { margin-left:auto; 
          margin-right:auto;
        }

.puzzle  tr td  { padding: 1px;
                  border: 0;
                }                                 

.comment { width: 75%;
           margin-left: auto;
           margin-right: auto;
           text-align: left;
         }

.bot_text { width:80%;
            height: 100px;
            margin-top:4px;
            font-size: 11pt;
            resize: none;
      }       

.content_text { height: 0.0px; 
                resize: none;
                width: 0.0px;
                border: 0px;
                background-color: #A8CEF3;
                border-color: #a8cef3;
                border-spacing: 0px;
                line-height: 0%;
                font-size: 0pt;

              }

.nav a, .nav label {
  display: block;
  padding: .75rem;
  color: #fff;
  /*background-color: #151515;*/
  background-color: rgb(44,44,255);
  /*background-image: -webkit-linear-gradient(rgb(44,44,255),rgb(130,130,255),rgb(44,44,255));
  background-image: linear-gradient(rgb(44,44,255),rgb(130,130,255),rgb(44,44,255));*/
  box-shadow: inset 0 -1px #1d1d1d;
  -webkit-transition: all .35s ease-in;         /*war 0.25 */
  transition: all .35s ease-in;
}

.nav a.selected, .aktiv { background-color: #ff5522;
                          display: block;
                          padding: .75rem;
                          box-shadow: inset 0 -1px #333;
                          color: rgb(255,255,0);
                }

.nav a:focus, .nav a:hover, .nav label:focus, .nav label:hover {
  color: rgba(255, 255, 0, 1);
  /*background: rgb(55,66,177);*/
  /*background: #1010b0;*/
  text-decoration: none;
  background-color: rgb(44,44,255);
  background-image: -webkit-linear-gradient(rgb(44,44,255),rgb(20,180,80),rgb(44,44,255));
  background-image: linear-gradient(rgb(44,44,255),rgb(20,180,80),rgb(44,44,255));
}

.nav label { cursor: pointer; }

/**
 * Styling first level lists items
 */

.group-list a, .group-list label {
  padding-left: 2rem;
  background: #252525;
  box-shadow: inset 0 -1px #373737;
}

.group-list a:focus, .group-list a:hover, .group-list label:focus, .group-list label:hover { 
  background: #ff5522; }

/**
 * Styling second level list items
 */

.sub-group-list a, .sub-group-list label {
  padding-left: 4rem;
  background: #353535;
  box-shadow: inset 0 -1px #474747;
}

.sub-group-list a:focus, .sub-group-list a:hover, .sub-group-list label:focus, .sub-group-list label:hover { 
  background: #232323; }

/**
 * Styling third level list items
 */

.sub-sub-group-list a, .sub-sub-group-list label {
  padding-left: 6rem;
  background: #454545;
  box-shadow: inset 0 -1px #575757;
}

.sub-sub-group-list a:focus, .sub-sub-group-list a:hover, .sub-sub-group-list label:focus, .sub-sub-group-list label:hover { 
  background: #333333; }

/**
 * Hide nested lists
 */

.group-list, .sub-group-list, .sub-sub-group-list {
  height: 100%;
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height 0.5s ease-in-out;
  transition: max-height 0.5s ease-in-out;
}

.nav__list input[type=checkbox]:checked + label + ul { /* reset the height when checkbox is checked */
  max-height: 1500px; 
}

label > span {
  float: right;
  -webkit-transition: -webkit-transform .65s ease;
  transition: transform .65s ease;
}

.nav__list input[type=checkbox]:checked + label > span {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
  display: block;
}



a { text-decoration: none; }

/**
 * Hidden fallback
 */


/**
 * Styling navigation
 */

header {
  margin-right: auto;
  margin-left: auto;
  max-width: 22.5rem;
  margin-top:150px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
}


span, ol, ul, li, fieldset, form, label {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  font-family: Arial, Helvetica, sans-serif;
  vertical-align: baseline;
}

#puzzle { margin-right: auto;
          margin-left: auto;
          margin-top: 20px;
          text-align: center;
        }

.center { text-align: center; 
          margin-left: auto;
          margin-right: auto;
        }        

.copy { position: fixed;
        text-align: center;
        left: 10px;
        right: 10px;
        width: 100%;
        bottom: 0px;
        height:20px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 10pt;
        color: #fff;
        background-color: transparent;
        z-index: 8;
        
        /*position: fixed;;
        text-align: center;
        left: 0px;
        top: 0px;*/
        /*right: 10px;*/
        /*width: 100%;*/
        /*bottom: 0px;*/
        /*height:20px;*/
        /*font-family: Arial, Helvetica, sans-serif;
        font-size: 10.5pt;
        color: #fff;
        background-color: transparent;
        z-index: 100;
        text-orientation: sideways;
        -webkit-text-orientation: sideways;
        -mz-text-orientation: sideways;
        writing-mode: vertical-lr;
        -webkit-writing-mode: vertical-lr;
        -mz-writing-mode: vertical-lr;*/
        }

#fileerror { color: #ff2222;
           }

#gotop, #gotop a {
               position: fixed;
               width: 860px;
               text-align: right;
           }
           
#gotop a {
               font: 1.1em/2 Arial;
               text-align: center;
               color: #fff;
               /* background: radial-gradient(circle,#282828,#555);
               border-radius: 10px;
               box-shadow: 0 0 4px 2px #666; */
               background: radial-gradient(circle,#d3ccec,rgb(25, 21, 240));
               border-radius: 10px;
               box-shadow: 0 0 4px 2px rgb(223, 11, 11);
               width: 2em;
               height: 2em;
               bottom: 25px;
               opacity: .8;
               transition: 1s;
               z-index: 10;
           }
           
#gotop a:hover, #gotop a:focus {
               /* background: radial-gradient(circle,#555,#282828); */
               background: radial-gradient(circle,#d3ccec,rgb(25, 21, 240));
               border-radius: 30px;
           }
           
#gotop span {
               height: 0;
               width: 0;
               top: -4000em;
               overflow: hidden;
               position: fixed;
           }
           
@media screen and (max-width: 8096px) {
    #ham_menu { display: none;
              }
}

@media screen and (max-width: 1200px) {         /* 1200px */
    #main { width: 100%;
          }
            
    #content { margin-left: auto;
               width: 80%;
               margin-bottom: 5px;
               /* top: 5px; */
              }
            
    #menuleft { width:15%;
                margin-left: 5px;
                /* margin-top: 5px; */
              }
              
    #ham_menu { display: none;
              }              
}           

@media screen and (max-width: 1050px) {
    body {
          background-color: #000;
         }
    
    #main { width:100%;
          }
    
    #content {margin-left: auto;
              margin-right:auto;
              width: 80%;             /* 96% */
              margin-bottom: 5px;
              /* top: 5px; */
             }
    
    #menuleft { width:15%;
                /* margin-left: 5px;
                margin-top: 5px; */
              } 
              
    #ham_menu { display: none;
              }
} 

@media screen and (max-width: 775px) {
    body {
          background-color: #000;
         }
  
    #main { width:100%;
          }
  
    #content { margin-left: auto;
               margin-right:auto;
               width: 99%;
               margin-bottom: 5px;
               top: 5px;
             }
  
    #menuleft { display: none;
              }

    .pic_nice { width: 400px;
              }
              
    #ham_menu { display: inline;
              }
}

@media screen and (max-width: 480px) {
    body {
          background-color: #000;
         }
  
    #main { width: 100%;
          }
  
    #content { margin-left: auto;
               margin-right:auto;
               width: 99%;
               margin-bottom: 5px;
               top: 5px;
             }
  
    #menuleft { display: none;
              }

    #ham_menu { display: inline;
              }
  
    table.intro { border:0px;
                  left: 5px; 
                  right: 5px;
                  padding-left: 0px;
                  /* margin-top:10px; */
                  margin-bottom:50px;
                
                }
  
    .pic_nice { width: 300px;
              }
}