/* CSS Document */



#content {

    align-content: center;

    width:800px;

}

#navigation {

     background-color: #FF9900;

    padding: 10px;

}

html body div#content table tbody tr td div#navigation table tbody{

    background-color: #FF9900;

    width: 800px;    

}



html body div#content table tbody tr td div#navigation {

    padding:10px;

    width:800px;

}



html body div#content table tbody tr td div#navigation a.navi{margin-right: 10px;

}



a:link.navi{

    

    width:100%;

    color: #FFFF00;

    padding: 10px;

    font-family: 'Luckiest Guy', cursive;

    font-size: 0.46em;

    text-decoration: none;

    text-decoration-line: none; !important

    background-color:#FF9900;!important

    }

a:hover.navi{

    width:100%;

    color: #09F;

    padding: 10px;

    font-family: 'Luckiest Guy', cursive;

    font-size: 0.46em;

    text-decoration: none;

    text-decoration-line: none; !important

    background-color:#FFFF00;!important

    }

    

a:active.navi{

    width:100%;

    color: #09F;

    padding: 10px;

    font-family: 'Luckiest Guy', cursive;

    font-size: 0.46em;

    text-decoration: none;

    text-decoration-line: none; !important

    background-color:#FFFF00;!important

    }



p {

	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

	font-size: 1em;

	color: #4C3D00;

    line-height: normal;

}



h1 {font-family: 'Luckiest Guy', cursive;

    font-size: 2em;

    font-weight:400;

    color: #FF9900;

    line-height: normal;

    margin-bottom: -10px;

    margin-top: 30px;

}

a:link {

	font-family: Arial;

	font-size: 1em;

	color: #F27A00;

	font-weight: bold;

}

a:hover {

	font-family: Arial;

	font-size: 1em;

	color: #F27A00;

	font-weight: bold;

}

a:visited {

	font-family: Arial;

	font-size: 1em;

	color: #F27A00;

	font-weight: bold;

}

img {

	max-width: 100%; height: auto;

	}

	

html body div#content table tbody tr{

    background-color: #FFFFE6;

    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

	font-size: 1em;

	color: #191919;

    }

html body {

	background-color:#CC6600;important!

	background-image:url(http://kleinekumpel.de/bilder/schmuck/hg_suare.png);important!

	}







/* portrait and landscape */

@media screen and (min-device-width : 320px) 

and (max-device-width : 480px)  {



 html body div#content {

      

      width:99vw;

   }  

      

      html body div#content table{

             width:95vw;

   }  

      

   html body div#content table tbody tr td div#navigation{

    background-color: #FF9900;

          width: contain;

      }

      

          html body div#content table tbody tr td div#navigation a.navi {

              width:contain;

              display:block;

              float:left;

              font-size: 1.5em;

          }

      

      p {

	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

	font-size: 2em;

	color: #4C3D00;

          line-height: normal;}

    a:link  {

        

	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

	font-size: 1em;

	color: #FF9900;

    font-weight: 400;

    padding:10px;   

    }

          h1 {font-family: 'Luckiest Guy', cursive;

    font-size: 3em;

    font-weight:400;

    color: #FF9900;

    line-height: normal;

    margin-bottom: -10px;

    margin-top: 30px;

}

      a:link.navi {

	font-family: 'Luckiest Guy', cursive;

	font-size: 1em;

	color: #FFFF00;

    background-color: #FF9900;      

	font-weight: 400;

        padding:10px;   

          float: right;

}

a:hover.navi {

	font-family: 'Luckiest Guy', cursive;

	font-size: 1em;

	color: #FFFF00;

    background-color: #FF9900;

    font-weight: 400;

        padding:10px;   

          float: right;                     

}

a:visited.navi {

	font-family: 'Luckiest Guy', cursive;

	font-size: 1em;

	color: #FFFF00;

    background-color: #FF9900;

    font-weight: 400;

        padding:10px;   

          float: right;

}

    

    /*  portrait */

@media screen and (max-width : 320px)  {



         html body div#content table tbody tr td div#navigation{

    background-color: #FF9900;

                width:95vw;

                

                }

   



}

    

}



/*Bildschirm 1024 */

@media only screen

    and (min-device-width: 950px)

    {

        #content {

    align-content: center;

    width:800px;

    margin-left:15vw;

    margin-top: 15vh;

        }

    }



/* ----------- iPhone 4 and 4S ----------- */



/* Portrait and Landscape */

@media only screen 

  and (min-device-width: 320px) 

  and (max-device-width: 480px)

  and (-webkit-min-device-pixel-ratio: 2) {

      

      html body div#content {

      

      width:99vw;

   }  

      

      html body div#content table{

             width:95vw;

   }  

      

   html body div#content table tbody tr td div#navigation{

    background-color: #FF9900;

          width: contain;

      }

      

          html body div#content table tbody tr td div#navigation a.navi {

              width:contain;

              display:block;

              float:left;

              font-size: 1.5em;

          }

      

      p {

	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

	font-size: 2em;

	color: #4C3D00;

          line-height: normal;}

    a:link  {

        

	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

	font-size: 1em;

	color: #FF9900;

    font-weight: 400;

    padding:10px;   

    }

          h1 {font-family: 'Luckiest Guy', cursive;

    font-size: 3em;

    font-weight:400;

    color: #FF9900;

    line-height: normal;

    margin-bottom: -10px;

    margin-top: 30px;

}

a:link.navi {

	font-family: 'Luckiest Guy', cursive;

	font-size: 1em;

	color: #FFFF00;

    background-color: #FF9900;      

	font-weight: 400;

        padding:10px;   

          float: right;

}

a:hover.navi {

	font-family: 'Luckiest Guy', cursive;

	font-size: 1em;

	color: #FFFF00;

    background-color: #FF9900;

    font-weight: 400;

        padding:10px;   

          float: right;                     

}

a:visited.navi {

	font-family: 'Luckiest Guy', cursive;

	font-size: 1em;

	color: #FFFF00;

    background-color: #FF9900;

    font-weight: 400;

        padding:10px;   

          float: right;

}

      

}



/* Portrait */

@media only screen 

  and (min-device-width: 320px) 

  and (max-device-width: 480px)

  and (-webkit-min-device-pixel-ratio: 2)

  and (orientation: portrait) {

      

            

            html body div#content table tbody tr td div#navigation{

    background-color: #FF9900;

                width:95vw;

                

                }

   

   }  

      

   #navigation {

    

    width:95vw;

    height:auto;

    display:block;

    float: inherit;

    height:contain;      

    color: #FFFF00;

    background-color: #FF9900;      

    padding: 10px;

    font-family: 'Luckiest Guy', cursive;

    font-size: 3em;

    text-decoration: none;

    text-decoration-line: none; !important

    

    }





/* Landscape */

@media only screen 

  and (min-device-width: 320px) 

  and (max-device-width: 480px)

  and (-webkit-min-device-pixel-ratio: 2)

  and (orientation: landscape) {

      

      

}



/* ----------- iPhone 5 and 5S ----------- */



/* Portrait and Landscape */

@media only screen 

  and (min-device-width: 320px) 

  and (max-device-width: 568px)

  and (-webkit-min-device-pixel-ratio: 2) {



          html body div#content {

      

      width:99vw;

   }  

      

      html body div#content table{

             width:95vw;

   }  

      

   html body div#content table tbody tr td div#navigation{

    background-color: #FF9900;

          width: contain;

      }

      

          html body div#content table tbody tr td div#navigation a.navi {

              width:contain;

              display:block;

              float:left;

              font-size: 1.5em;

          }

      

      p {

	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

	font-size: 2em;

	color: #4C3D00;

          line-height: normal;}

    a:link  {

        

	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

	font-size: 1em;

	color: #FF9900;

    font-weight: 400;

    padding:10px;   

    }

          h1 {font-family: 'Luckiest Guy', cursive;

    font-size: 3em;

    font-weight:400;

    color: #FF9900;

    line-height: normal;

    margin-bottom: -10px;

    margin-top: 30px;

}

      a:link.navi {

	font-family: 'Luckiest Guy', cursive;

	font-size: 1em;

	color: #FFFF00;

    background-color: #FF9900;      

	font-weight: 400;

        padding:10px;   

          float: right;

}

a:hover.navi {

	font-family: 'Luckiest Guy', cursive;

	font-size: 1em;

	color: #FFFF00;

    background-color: #FF9900;

    font-weight: 400;

        padding:10px;   

          float: right;                     

}

a:visited.navi {

	font-family: 'Luckiest Guy', cursive;

	font-size: 1em;

	color: #FFFF00;

    background-color: #FF9900;

    font-weight: 400;

        padding:10px;   

          float: right;

}

      

}

      

}



/* Portrait */

@media only screen 

  and (min-device-width: 320px) 

  and (max-device-width: 568px)

  and (-webkit-min-device-pixel-ratio: 2)

  and (orientation: portrait) {

      

                

            html body div#content table tbody tr td div#navigation{

    background-color: #FF9900;

                width:95vw;

                

                }

   

   }  

      

   #navigation {

    

    width:95vw;

    height:auto;

    display:block;

    float: inherit;

    height:contain;      

    color: #FFFF00;

    background-color: #FF9900;      

    padding: 10px;

    font-family: 'Luckiest Guy', cursive;

    font-size: 3em;

    text-decoration: none;

    text-decoration-line: none; !important

    

    }

}



/* Landscape */

@media only screen 

  and (min-device-width: 320px) 

  and (max-device-width: 568px)

  and (-webkit-min-device-pixel-ratio: 2)

  and (orientation: landscape) {



}



/* ----------- iPhone 6 ----------- */



/* Portrait and Landscape */

@media only screen 

  and (min-device-width: 375px) 

  and (max-device-width: 667px) 

  and (-webkit-min-device-pixel-ratio: 2) { 



        html body div#content {

      

      width:99vw;

   }  

      

      html body div#content table{

             width:95vw;

   }  

      

   html body div#content table tbody tr td div#navigation{

    background-color: #FF9900;

          width: contain;

      }

      

          html body div#content table tbody tr td div#navigation a.navi {

              width:contain;

              display:block;

              float:left;

              font-size: 1.5em;

          }

      

      p {

	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

	font-size: 2em;

	color: #4C3D00;

          line-height: normal;}

    a:link  {

        

	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

	font-size: 1em;

	color: #FF9900;

    font-weight: 400;

    padding:10px;   

    }

          h1 {font-family: 'Luckiest Guy', cursive;

    font-size: 3em;

    font-weight:400;

    color: #FF9900;

    line-height: normal;

    margin-bottom: -10px;

    margin-top: 30px;

}

      a:link.navi {

	font-family: 'Luckiest Guy', cursive;

	font-size: 1em;

	color: #FFFF00;

    background-color: #FF9900;      

	font-weight: 400;

        padding:10px;   

          float: right;

}

a:hover.navi {

	font-family: 'Luckiest Guy', cursive;

	font-size: 1em;

	color: #FFFF00;

    background-color: #FF9900;

    font-weight: 400;

        padding:10px;   

          float: right;                     

}

a:visited.navi {

	font-family: 'Luckiest Guy', cursive;

	font-size: 1em;

	color: #FFFF00;

    background-color: #FF9900;

    font-weight: 400;

        padding:10px;   

          float: right;

}

      

}  

      

}



/* Portrait */

@media only screen 

  and (min-device-width: 375px) 

  and (max-device-width: 667px) 

  and (-webkit-min-device-pixel-ratio: 2)

  and (orientation: portrait) { 

      

                

            html body div#content table tbody tr td div#navigation{

    background-color: #FF9900;

                width:95vw;

                

                }

   

   }  

      

   #navigation {

    

    width:95vw;

    height:auto;

    display:block;

    float: inherit;

    height:contain;      

    color: #FFFF00;

    background-color: #FF9900;      

    padding: 10px;

    font-family: 'Luckiest Guy', cursive;

    font-size: 3em;

    text-decoration: none;

    text-decoration-line: none; !important

    

    }



}



/* Landscape */

@media only screen 

  and (min-device-width: 375px) 

  and (max-device-width: 667px) 

  and (-webkit-min-device-pixel-ratio: 2)

  and (orientation: landscape) { 



}



/* ----------- iPhone 6+ ----------- */



/* Portrait and Landscape */

@media only screen 

  and (min-device-width: 414px) 

  and (max-device-width: 736px) 

  and (-webkit-min-device-pixel-ratio: 3) { 



}



/* Portrait */

@media only screen 

  and (min-device-width: 414px) 

  and (max-device-width: 736px) 

  and (-webkit-min-device-pixel-ratio: 3)

  and (orientation: portrait) { 



}



/* Landscape */

@media only screen 

  and (min-device-width: 414px) 

  and (max-device-width: 736px) 

  and (-webkit-min-device-pixel-ratio: 3)

  and (orientation: landscape) { 



}



/* ----------- iPad mini ----------- */



/* Portrait and Landscape */

@media only screen 

  and (min-device-width: 768px) 

  and (max-device-width: 1024px) 

  and (-webkit-min-device-pixel-ratio: 1) {



  }



/* Portrait */

@media only screen 

  and (min-device-width: 768px) 

  and (max-device-width: 1024px) 

  and (orientation: portrait) 

  and (-webkit-min-device-pixel-ratio: 1) {



            html body div#content {

      zoom:2;

      }

}



/* Landscape */

@media only screen 

  and (min-device-width: 768px) 

  and (max-device-width: 1024px) 

  and (orientation: landscape) 

  and (-webkit-min-device-pixel-ratio: 1) {

      

     

            html body div#content {

      zoom:2;

      }



}



/* ----------- iPad 1 and 2 ----------- */

/* Portrait and Landscape */

@media only screen 

  and (min-device-width: 768px) 

  and (max-device-width: 1024px) 

  and (-webkit-min-device-pixel-ratio: 1) {



               html body div#content {

      zoom:2;

      }

}



/* Portrait */

@media only screen 

  and (min-device-width: 768px) 

  and (max-device-width: 1024px) 

  and (orientation: portrait) 

  and (-webkit-min-device-pixel-ratio: 1) {



}



/* Landscape */

@media only screen 

  and (min-device-width: 768px) 

  and (max-device-width: 1024px) 

  and (orientation: landscape) 

  and (-webkit-min-device-pixel-ratio: 1) {



}



/* ----------- iPad 3 and 4 ----------- */

/* Portrait and Landscape */

@media only screen 

  and (min-device-width: 768px) 

  and (max-device-width: 1024px) 

  and (-webkit-min-device-pixel-ratio: 2) {



}



/* Portrait */

@media only screen 

  and (min-device-width: 768px) 

  and (max-device-width: 1024px) 

  and (orientation: portrait) 

  and (-webkit-min-device-pixel-ratio: 2) {



}



/* Landscape */

@media only screen 

  and (min-device-width: 768px) 

  and (max-device-width: 1024px) 

  and (orientation: landscape) 

  and (-webkit-min-device-pixel-ratio: 2) {



}