* {
    margin: 0;

}

@font-face { font-family: 'REDENSEK';
            local: REDENSEK;
            src: url('fonts/REDENSEK.ttf');  format('truetype'),
         }

body          {font-family: 'Exo', sans-serif; 'REDENSEK';
                width: 100%; height: 100%; margin: 0px;
                 background-color: rgba(0,0,0,1.00);
                 cursor: crosshair;}

#wrapper  {width: 1200px; height: auto; margin:auto; text-align: left;}





/* Main Navigation */
#nav {  position:fixed;
        width:1200px;
        height: 80px;
        margin: 0;
        margin-top:0px;

        z-index: 100;
        padding:px;
        background-color: rgba(0,0,0,1.00);}

#navigation li img {width: 100px; font-size: 9px;}

ul#navigation {
        margin:auto;
        position: relative;
        float:left;
        border-left:0px solid #c4dbe7;
        border-right:0px solid #c4dbe7;}


ul#navigation li {
        display:inline;
        font-size:15px;
        width: 190px;
        font-weight:; margin-top: 25px;
        margin-left:21px; margin-right: 21px;

        float:left;
        position:relative;
        border-top:0px solid #c4dbe7;
        border-bottom:0px solid #c4dbe7;
}

ul#navigation li a {
        padding:10px 10px;
        color: #FFFF00;
        text-shadow:0px 0px 60px #FB7D00;
        text-decoration:none;
        display:inline-block;
        border-right:0px solid #fff;
        border-left:0px solid #C2C2C2;
        border-top:0px solid #fff;
        background-color: rgba(0,0,0,1.00);

        -webkit-transition:color 0.1s linear, background 0.1s linear;
        -moz-transition:color 0.1s linear, background 0.1s linear;
        -o-transition:color 0.1s linear, background 0.1s linear;
        transition:color 0.1s linear, background 0.1s linear;
}

ul#navigation li a:hover {
        background-color:rgba(0,0,0,0.8);
        color:#FFFF00;
}

ul#navigation li a.first {
        border-left: thin solid;
}

ul#navigation li a.last {
        border-right:thin solid;
}

ul#navigation li:hover > a {
        background:#A02000; opacity: 0.9; /** farbe des #FFA500n navibalken **/
}



/* Drop-Down Navigation */
ul#navigation li:hover > ul
{
/*these 2 styles are very impor#D2B48Ct,
being the ones which make the drop-down to appear on hover */
        visibility:visible;
        opacity:1;
}

ul#navigation ul, ul#navigation ul li ul {
        list-style: none;
    margin: 0;
    padding: 0;
  /*the next 2 styles are very impor#D2B48Ct,
  being the ones which make the drop-down to stay hidden */
    visibility:hidden;
    opacity:0;
    position: absolute;
    z-index: 99999;
        width:245px;
        background-color: rgba(0,0,0,0.80); /* Hintergrund des aufgeklappten menüs */
        box-shadow:0px 0px 0px #ccc;
/* css3 transitions for smooth hover effect */
        -webkit-transition:opacity 0.2s linear, visibility 0.2s linear;
        -moz-transition:opacity 0.2s linear, visibility 0.2s linear;
        -o-transition:opacity 0.2s linear, visibility 0.2s linear;
        transition:opacity 0.2s linear, visibility 0.2s linear;
}

ul#navigation ul {
    top: 40px;
    left: 0px;
}

ul#navigation ul li ul {
    top: 0px;
    left: 150px; /* strong related to width:180px; from above */
}

ul#navigation ul li {
        clear:both;
        width:80%;
        border:0 none; padding-left: 0px;
        border-bottom:0px solid #FB7D00;
        border-left:0px solid #FB7D00;
}

ul#navigation ul li a {
        background:none;
        padding:9px 1px;
        color:#FFFF00;
        text-shadow:0px 0px 60px #FB7D00;
        text-decoration:none;
        display:inline-block;
        border:0px solid;
        float:left;
        clear:both;
        width:200px;}

/* Main Navigation  ENDE */






.content    {background-color: rgba(0,0,0,1.00);
              padding-top:125px;

            }



#titel      {color: #FFFF00; background-color: rgba(0,0,0,0.30);
            font-size: 100px; font-weight: bold; font-style:italic; letter-spacing: 7px;
             text-align: center;  text-shadow:2px 10px 10px #FB7D00;

            padding-top: 160px; padding-bottom: 20px; height: 40px; width:auto;
            border-top: 0.0px solid; border-color: #FFFFFF;
            border-bottom: 0.0px solid; border-color: #FFFFFF;
            }


.titeltext   {color: rgba(255,255,0,1.00);
            background-color: rgba(0,0,0,1.00); margin-top:30px;
            padding-bottom:130px;
            font-size: 16px; text-align: center; line-height: 25px;letter-spacing: 0px;}



#gamescreen1  {background-color: rgba(0,0,0,1.00); margin: auto; text-align: center;
              padding-top:0px;}


#gamescreen1 img { border: solid 4px #FFFFFF;border-radius:15px;}

#ctbackground   {background-color: #000000 ; height: auto; width: 100%;

                  float:left; position:relative;

                 margin-bottom: 100px; padding-top:70px;
                 }



#gameplay        {background-color: #000000; height: auto; width: 1160px; text-align:left;
                 margin-left: 20px; margin-right: 20px; margin-bottom: 30px; position:relative; float: left;
                 color: #5F00FF; font-size: 18px; }

.itext           {background-color: #000000;font-size:18px;text-align:center; }


#gameplay p       {color:#FFFFFF; font-size: 16px; line-height:1.5;word-spacing:1px;}

figure           {background:#000000;padding-left:10px;margin-left: 30px; margin-bottom: 20px;padding-bottom: 10px; position:relative;
                  margin-top:50px;padding-top: 10px; padding-right: 10px; width: 500px; float: right; border:solid 2px #FFFF00;
                  border-radius:20px;
                 }

figure2           {background:#000000;padding-left:10px;margin-right: 30px; margin-bottom: 10px;padding-bottom: 10px; position:relative;
                  margin-top:10px;padding-top: 10px; padding-right: 10px; width: 280px; float: left; border:solid 2px #FFFF00;
                  border-radius:20px;
                 }

figurecanvas           {background:#000000;padding-left:10px;margin-left: 30px; margin-bottom: 10px;padding-bottom: 10px; position:relative;
                  margin-top:10px;padding-top: 10px; padding-right: 10px; width: 600px; float: right; border:solid 2px #FFFF00;
                  border-radius:20px;
                 }

figure4           {background:#000000;padding-left:10px;margin-left: 30px; margin-bottom: 10px;padding-bottom: 10px; position:relative;
                  margin-top:10px;padding-top: 10px; padding-right: 10px; width: 280px; float: right; border:solid 2px #FFFF00;
                  border-radius:20px;
                 }

figure5           {background:#000000;padding-left:10px;margin-right: 30px; margin-bottom: 10px;padding-bottom: 10px; position:relative;
                  margin-top:10px;padding-top: 10px; padding-right: 10px; width: 200px; height: 200px; float: left; border:solid 2px #FFFF00;
                  border-radius:20px;
                 }

figure5mini           {background:#000000;padding-left:5px;margin-right: 10px; margin-bottom: 5px;padding-bottom: 5px; position:relative;
                  margin-top:5px;padding-top: 5px; padding-right: 5px; width: 50px; height: 50px; float: left; border:solid 2px #FFFF00;
                  border-radius:5px;
                 }



figure5sm         {background:#000000;padding-left:10px;margin-right: 30px; margin-bottom: 10px;padding-bottom: 10px; position:relative;
                  margin-top:10px;padding-top: 10px; padding-right: 10px; width: 150px; height: 200px; float: left; border:solid 2px #FFFF00;
                  border-radius:20px;
                 }




figure5s           {background:#000000;padding-left:10px;margin-right: 30px; margin-bottom: 10px;padding-bottom: 10px; position:relative;
                  margin-top:10px;padding-top: 10px; padding-right: 10px; width: 160px; height: 280px; float: left; border:solid 2px #FFFF00;
                  border-radius:20px;
                 }

figure5sr           {background:#000000;padding-left:10px;margin-right: 30px; margin-bottom: 10px;padding-bottom: 10px; position:relative;
                  margin-top:10px;padding-top: 10px; padding-right: 10px; width: 160px; height: 280px; float: right; border:solid 2px #FFFF00;
                  border-radius:20px;
                 }




figure5r           {background:#000000;padding-left:10px;margin-right: 0px; margin-left: 20px; margin-bottom: 10px;padding-bottom: 10px; position:relative;
                  margin-top:10px;padding-top: 10px; padding-right: 10px; width: 200px;float: right; border:solid 2px #FFFF00;
                  border-radius:20px;
                 }


figure5w           {background:#000000;padding-left:10px;margin-right: 30px; margin-bottom: 10px;padding-bottom: 10px; position:relative;
                  margin-top:10px;padding-top: 10px; padding-right: 10px; width: 300px; float: left; border:solid 2px #FFFF00;
                  border-radius:20px;
                 }


figure5wr           {background:#000000;padding-left:10px;margin-right: 0px; margin-left: 30px; margin-bottom: 10px;padding-bottom: 10px; position:relative;
                  margin-top:10px;padding-top: 10px; padding-right: 10px; width: 300px; float: right; border:solid 2px #FFFF00;
                  border-radius:20px;
                 }

figure6           {background:#000000;padding-left:10px;margin-left: 30px; margin-bottom: 10px;padding-bottom: 10px; position:relative;
                  margin-top:10px;padding-top: 10px; padding-right: 10px; width: 200px; float: right; border:solid 2px #FFFF00;
                  border-radius:20px;
                 }



figcaption       {text-align: center; line-height:1;}

.centerline       {background-color: #000000; width: 1160px; height:auto;<br>
                   font-size:50px; font-weight: bold; color:#FFFFFF;
                   border-top: 1px solid #FFFF00;border-bottom: 1px solid #FFFF00;
                   padding: 8px 8px; text-align: center;  }


#music  {background-color: rgba(0,0,0,0.80) ;height: 25px; width: 1200px;float:left; position:fixed;
          top:80px;
           text-align:right; padding-top:10px; z-index:50;
           border-top: solid thin #7F0000;}


#ueber1          {background-color: #000000; height: 60px; width: 1200px;
                  margin-left: 0px ; margin-right: 0px; color:#FFFF00 ; font-size: 40px; text-align:center; font-style:italic;
                  font-weight: bold ; position: relative; float:left; padding-top:135px; border-bottom: solid 2px #FFFF00; }

#ueber2          {background-color: #000000; height: 60px; width: 1200px;
                  margin-left: 0px ; margin-right: 0px; color:#FFFF00 ; font-size: 40px; text-align:center; font-style:italic;
                  font-weight: bold ; position: relative; float:left; padding-top:135px; border-bottom: solid 2px #FFFF00; }

#ueber3          {background-color: #000000; height: 60px; width: 1200px;
                  margin-left: 0px ; margin-right: 0px; color:#FFFF00 ; font-size: 40px; text-align:center; font-style:italic;
                  font-weight: bold ; position: relative; float:left; padding-top:135px; border-bottom: solid 2px #FFFF00; }

#ueber4          {background-color: #000000; height: 60px; width: 1200px;
                  margin-left: 0px ; margin-right: 0px; color:#FFFF00 ; font-size: 40px; text-align:center; font-style:italic;
                  font-weight: bold ; position: relative; float:left; padding-top:135px; border-bottom: solid 2px #FFFF00; }


/*-----------------zoom hover -----------------------*/

 img.zoom      {
                   transition: transform 1s;
                   -moz-transition: transform 1s;
                   -webkit-transition: transform 1s;
                   -o-transition: transform 1s;
                   -ms-transition: transform 1s;
                  }

img.zoom:hover {

                      cursor: zoom-in;
                      cursor: -moz-zoom-in;
                      cursor: -webkit-zoom-in;
                      transform: scale(2.0, 2.0);
                      -moz-transform: scale(2.0, 2.0);
                      -webkit-transform: scale(2.0, 2.0);
                      -o-transform: scale(2.0, 2.0);
                      -ms-transform: scale(2.0, 2.0);
                     }

 /*-----------------zoom hover ----------------------- */

 #screenyellow a   { background-size: 80%;background-repeat: no-repeat;background-position:center;

                    width: 100%; height: 190px;
                   margin: 0px; margin-top:0px;float: left;
                    background-color: rgba(0,0,0,1.00);}

                   [src="#gibsonimg"]         {background-image: url("../img/iv_gibson.jpg");}
                   [src="#gibsonimg"]:hover   {background-image: url("../img/iv_johngibson.gif");  border-radius:0px;}


 #screenkaren a   { background-size: 80%;background-repeat: no-repeat;background-position:center;

                    width: 100%; height: 190px;
                   margin: 0px; margin-top:0px;float: left;
                    background-color: rgba(0,0,0,1.00);}

                   [src="#karenimg"]         {background-image: url("../img/iv_karen.jpg");}
                   [src="#karenimg"]:hover   {background-image: url("../img/iv_karen.gif");  border-radius:0px;}


 #screencain a   { background-size: 80%;background-repeat: no-repeat;background-position:center;

                    width: 100%; height: 190px;
                   margin: 0px; margin-top:0px;float: left;
                    background-color: rgba(0,0,0,1.00);}

                   [src="#cainimg"]         {background-image: url("../img/iv_cain.jpg");}
                   [src="#cainimg"]:hover   {background-image: url("../img/iv_cain.gif");  border-radius:0px;}

 #screenally a   { background-size: 80%;background-repeat: no-repeat;background-position:center;

                    width: 100%; height: 190px;
                   margin: 0px; margin-top:0px;float: left;
                    background-color: rgba(0,0,0,1.00);}

                   [src="#allyimg"]         {background-image: url("../img/iv_ally.jpg");}
                   [src="#allyimg"]:hover   {background-image: url("../img/iv_allyanim.gif");  border-radius:0px;}

 #screenkenny a   { background-size: 80%;background-repeat: no-repeat;background-position:center;

                    width: 100%; height: 190px;
                   margin: 0px; margin-top:0px;float: left;
                    background-color: rgba(0,0,0,1.00);}

                   [src="#kennyimg"]         {background-image: url("../img/iv_kenny_2.jpg");}
                   [src="#kennyimg"]:hover   {background-image: url("../img/iv_kenny_anim2.gif");  border-radius:0px;}


 #screenian a   { background-size: 80%;background-repeat: no-repeat;background-position:center;

                    width: 100%; height: 190px;
                   margin: 0px; margin-top:0px;float: left;
                    background-color: rgba(0,0,0,1.00);}

                   [src="#ianimg"]         {background-image: url("../img/iv_ian_anim.jpg");}
                   [src="#ianimg"]:hover   {background-image: url("../img/iv_ian_anim.gif");  border-radius:0px;}

 #screenheap a   { background-size: 80%;background-repeat: no-repeat;background-position:center;

                    width: 100%; height: 190px;
                   margin: 0px; margin-top:0px;float: left;
                    background-color: rgba(0,0,0,1.00);}
                    
                   [src="#heapimg"]         {background-image: url("../img/iv_heap.jpg");}
                   [src="#heapimg"]:hover   {background-image: url("../img/iv_heap.gif");  border-radius:0px;}


  #screenfred a   { background-size: 80%;background-repeat: no-repeat;background-position:center;

                    width: 100%; height: 190px;
                   margin: 0px; margin-top:0px;float: left;
                    background-color: rgba(0,0,0,1.00);}

                   [src="#fredimg"]         {background-image: url("../img/fredgrayyoung.jpg");}
                   [src="#fredimg"]:hover   {background-image: url("../img/fredyoung_anim.gif");  border-radius:0px;}



  #screenbutler a   { background-size: 80%;background-repeat: no-repeat;background-position:center;

                    width: 100%; height: 190px;
                   margin: 0px; margin-top:0px;float: left;
                    background-color: rgba(0,0,0,1.00);}

                   [src="#butlerimg"]         {background-image: url("../img/iv_butler2.jpg");}
                   [src="#butlerimg"]:hover   {background-image: url("../img/iv_butler_anim2.gif");  border-radius:0px;}
                 /*  [src="#butlerimg"]:hover   {background-image: url("../img/iv_butler_anim.gif");  border-radius:0px;}*/

  #screendave a   { background-size: 80%;background-repeat: no-repeat;background-position:center;

                    width: 100%; height: 190px;
                   margin: 0px; margin-top:0px;float: left;
                    background-color: rgba(0,0,0,1.00);}

                   [src="#daveimg"]         {background-image: url("../img/iv_dave.jpg");}
                   [src="#daveimg"]:hover   {background-image: url("../img/iv_dave_anim.gif");  border-radius:0px;}




#gameplayscreen    {background-color:#2F2F2F ; height: auto; width: 180px; text-align:center;
                 margin-top: 30px; padding-top:0px; padding-bottom: 0px; margin-bottom:20px;
                 padding-left: 5px; margin-left:20px; padding-right:5px; margin-right: 20px;  position:relative; float: left;
                 color: #FFFFFF; font-size: 18px; line-height:2; border: solid 1px #FFFF00; border-radius: 10px; }

#image           {border-top: solid 0px #FFFFFF;
                  border-left: solid 0px #FFFFFF;
                  border-right: solid 0px #5F0000;
                  border-bottom: solid 0px #7F0000;
                  margin-top:0px;  margin-right:0px;
                  position:relative;float:left;
                  background-color:#000000; height: 140px; width: 80px;padding-top:80px; margin-top:10px;text-align:right;
                  margin-bottom:0px;
                  }

#imagekaren           {border-top: solid 0px #FFFFFF;
                  border-left: solid 0px #FFFFFF;
                  border-right: solid 0px #5F0000;
                  border-bottom: solid 0px #7F0000;
                  margin-top:0px;  margin-right:0px;
                  position:relative;float:left;
                  background-color:#000000; height: 100px; width: 80px;padding-top:80px; margin-top:10px;text-align:right;
                  margin-bottom:0px;
                  }

#usmall1        {background-color: #000000; height: 40px; width: 1060px;
                 margin-left: 0px ; margin-right: 20px; color:#FFFF00 ; font-size: 30px; text-align:left; font-style:italic;padding-bottom:10px; margin-bottom:30px;
                 font-weight: bold ;position: relative; float:left; padding-top:135px; border-bottom: solid 1px #FFFF00;}

#usmall2        {background-color: #000000; height: 40px; width: 1100px;
                 margin-left: 0px ; margin-right: 20px; color:#FFFF00 ; font-size: 30px; text-align:left; font-style:italic;padding-bottom:10px; margin-bottom:0px;
                 font-weight: bold ;position: relative; float:left; padding-top:135px; border-bottom: solid 1px #FFFF00;}



#usmall3        {background-color: #000000; height: 40px; width: 1060px;
                 margin-left: 0px ; margin-right: 20px; color:#FFFF00 ; font-size: 30px; text-align:left; font-style:italic;padding-bottom:10px; margin-bottom:0px;
                 font-weight: bold ;position: relative; float:left; padding-top:135px; border-bottom: solid 1px #FFFF00;}

#usmall4        {background-color: #000000; height: 40px; width: 1100px;
                 margin-left: 0px ; margin-right: 20px; color:#FFFF00 ; font-size: 30px; text-align:left; font-style:italic;padding-bottom:10px; margin-bottom:0px;
                 font-weight: bold ;position: relative; float:left; padding-top:135px; border-bottom: solid 1px #FFFF00;}

#usmall5        {background-color: #000000; height: 40px; width: 1100px;
                 margin-left: 0px ; margin-right: 20px; color:#FFFF00 ; font-size: 30px; text-align:left; font-style:italic;padding-bottom:10px; margin-bottom:0px;
                 font-weight: bold ;position: relative; float:left; padding-top:135px; border-bottom: solid 1px #FFFF00;}




#usmall6        {background-color: #000000; height: 40px; width: 1060px;
                 margin-left: 0px ; margin-right: 20px; color:#FFFF00 ; font-size: 30px; text-align:left; font-style:italic;padding-bottom:10px; margin-bottom:0px;
                 font-weight: bold ;position: relative; float:left; padding-top:135px; border-bottom: solid 1px #FFFF00;}





#usmall8         {background-color: #000000; height: 40px; width: 1060px;
                 margin-left: 0px ; margin-right: 20px; color:#FFFF00 ; font-size: 30px; text-align:left; font-style:italic;padding-bottom:10px; margin-bottom:0px;
                 font-weight: bold ;position: relative; float:left; padding-top:135px; border-bottom: solid 1px #FFFF00;}



#usmall9         {background-color: #000000; height: 40px; width: 1060px;
                 margin-left: 0px ; margin-right: 20px; color:#FFFF00 ; font-size: 30px; text-align:left; font-style:italic;padding-bottom:10px; margin-bottom:0px;
                 font-weight: bold ;position: relative; float:left; padding-top:135px; border-bottom: solid 1px #FFFF00;}



#usmall7        {background-color: #000000; height: 40px; width: 1060px;
                 margin-left: 0px ; margin-right: 20px; color:#FFFF00 ; font-size: 30px; text-align:left; font-style:italic;padding-bottom:10px; margin-bottom:0px;
                 font-weight: bold ;position: relative; float:left; padding-top:135px; border-bottom: solid 1px #FFFF00;}


#usmall10        {background-color: #000000; height: 40px; width: 1100px;
                 margin-left: 0px ; margin-right: 20px; color:#FFFF00 ; font-size: 30px; text-align:left; font-style:italic;padding-bottom:10px; margin-bottom:0px;
                 font-weight: bold ;position: relative; float:left; padding-top:135px; border-bottom: solid 1px #FFFF00;}