* {
    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: auto;
        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: 180px;
        font-weight:; margin-top: 25px;
        margin-left:27px; 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: 0px;
    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:220px;
        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:##000000;
        padding:5px 0px;
        color:#FFFF00;
        text-shadow:0px 0px 60px #FB7D00;
        text-decoration:none;
        display:inline-block;
        border:0px solid;
        float:left;
        clear:both;
        width:180px;
}

/* Main Navigation  ENDE */


#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;}





.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,0.80);
            background-color: rgba(0,0,0,1.00); margin-top:60px;
            padding-bottom:170px;
            font-size: 25px; text-align: center; line-height: 35px;letter-spacing: 3px;}



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


#ctbackground   {background-color: #000000 ; height: auto; width: 100%;
                 margin: 0px; float: left; position:relative;
                 margin-bottom: 100px; padding-top:100px;
                 }

h1             {background-color:  ; height: 50px; width: auto;
                 margin: 10px ;margin-bottom: 20px; color:#FFFF00 ; font-size: 40px;text-align: center; font-style:italic; font-weight: bold;
                 position:relative; border-bottom: 2px solid #FFFF00;}


#gameplay         {background-color: #000000; height: auto; width: 1160px; text-align:justify;
                 margin-left: 20px; margin-right: 20px;  position:relative; float: left; position:relative;
                 color: #FFFFFF; font-size: 18px; line-height:2;
                  }



#links          {background-color: #000000 ; height: 250px; width: 720px; text-align:left;
                 margin-left: 30px;  position:relative; float: left; position:relative;
                 color: #FFFFFF; font-size: 18px; line-height:2;
                  }

#rechts         {background-color: #000000 ; height: 200px; width: 400px;
                 margin: 0px; float: left; position:relative;
                 color: #FFFFFF; font-size: 18px; line-height:2;  }

figure           {background:#000000;padding-left:25px; padding-bottom: 8px;
                  padding-top: 20px; padding-right: 20px; width: 300px; float: right;
                 }
figcaption       {text-align: center; padding-left:30px;  }


#ccenter         {background-color: #000000 ; height: auto; width: 100%;
                 margin: 0px; float: left; position:relative;  color: #FFFFFF;
                 margin-bottom: 50px; padding-top:100px;
                 }

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




#gamescreen2 a   { background-size: 100%;background-repeat: no-repeat ;

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

                 [src="ccenterimg"]           {background-image: url("../img/control-center-leer.png");}
                 [src="ccenterimg"]:hover     {background-image: url("../img/control-center.png");  border-radius:0px;}


#iconcontrol    {background-color: #000000 ; height: auto; width: 100%;
                 margin: 0px; float: left; position:relative;
                 margin-bottom: 200px; padding-top:100px;}



#gameplayleft    {background-color:#2F2F2F; height: auto; width: 515px; text-align:left;
                  margin-top: 50px;
                 padding-left: 20px; margin-left:20px; padding-right:20px; margin-right: 20px;  position:relative; float: left;
                 color: #FFFFFF; font-size: 18px; line-height:2; border: solid 1px #FFFF00;
                  }



#gameplayright    {background-color:#2F2F2F ; height: auto; width: 515px; text-align:left;
                 margin-top: 50px;
                 padding-left: 20px; margin-left:20px; padding-right:20px; margin-right: 20px;  position:relative; float: left;
                 color: #FFFFFF; font-size: 18px; line-height:2; border: solid 1px #FFFF00;
                  }


#screenmenues    {background-color: #000000 ; height: 1300px; width: 100%;
                 margin: 0px; float: left; position:relative;
                 margin-bottom: 20px; padding-top:150px; }


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

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

                 [src="#screenyellowimg"]         {background-image: url("../img/icon_yellowmonitor.png");}
                 [src="#screenyellowimg"]:hover   {background-image: url("../img/screenyellow.gif");  border-radius:0px;}

#screenred a   { background-size: 85%;background-repeat: no-repeat;background-position:center;

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

                 [src="#screenredimg"]           {background-image: url("../img/icon_redmonitor.png");}
                 [src="#screenredimg"]:hover     {background-image: url("../img/screenred.gif");  border-radius:0px;}

#screengreen a   { background-size: 85%;background-repeat: no-repeat;background-position:center;

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

                 [src="#screengreenimg"]           {background-image: url("../img/icon_greenmonitor.png");}
                 [src="#screengreenimg"]:hover     {background-image: url("../img/screengreen.gif");}

#screenquit a   { background-size: 85%;background-repeat: no-repeat;background-position:center;

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

                 [src="#screenquitimg"]           {background-image: url("../img/quiticon.png");}
                 [src="#screenquitimg"]:hover     {background-image: url("../img/screenquit.gif");  border-radius:0px;}


#screengreen img { padding-bottom: 10px;}


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

#spalten3   {background-color:#000000 ; height: 550px; width: 315px; text-align:center; border-radius:10px;
                 margin-top: 30px; padding-top:20px; padding-bottom: 20px;
                 padding-left: 20px; margin-left:20px; padding-right:20px; margin-right: 20px;  position:relative; float: left;
                 color: #FFFFFF; font-size: 18px; line-height:2; border: solid 1px #FFFF00;
                 }

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



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

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

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

#yellow             {background-color:#000000 ;
                   height: 1300px;  width: 1200px;
                   position:relative; float:left; margin-top: 0px; margin-bottom: 0px; padding-bottom:0px;
                  }



#red              {background-color:#000000 ;
                   height: 1100px;  width: 1200px;
                   position:relative; float:left; margin-top: 0px; margin-bottom: 20px; padding-bottom:20px;
                  }


#green              {background-color:#000000;
                   height: 500px;  width: 1200px;
                   position:relative; float:left; margin-top: 0px; margin-bottom: 20px; padding-bottom:20px;
                  }


#quit              {background-color:#000000;
                   height: 530px;  width: 1200px;
                   position:relative; float:left; margin-top: 0px; margin-bottom: 20px; padding-bottom:20px;
                  }


.gsyellow           {background-color: rgba(0,0,0,1.00);  text-align: center;
                   padding-top:20px;  padding-bottom:0px;}

.gsgreen           {background-color: rgba(0,0,0,1.00);  text-align: center;
                   padding-top:20px;  padding-bottom:0px;}


#tickerred       { background-color: rgba(100,0,0,1.00);
                 position: absolute; top: 208px; left:60px; z-index: 200;}



.gsred           {background-color: rgba(0,0,0,1.00);  text-align: center;
                   padding-top:20px;  padding-bottom:0px;}

#alert img      {position: absolute; top:179px; left:209px;}




#b2screen       {background-color:#1F1F1F; height: 180px; width: 510px; text-align:left;
                 margin-top: 0px; padding-top:20px; padding-bottom: 20px;
                 padding-left: 20px; margin-left:20px; padding-right:20px; margin-right: 38px;  position:relative; float:left;
                 color: #FFFFFF; font-size: 18px; line-height:2; border: solid 1px #FFFF00; }

#b3screen       {background-color:#1F1F1F ; height: auto; width: 510px; text-align:justify;
                 margin-top: 0px; padding-top:20px; padding-bottom: 20px;
                 padding-left: 20px; margin-left:20px; padding-right:20px; margin-right: 38px;  position:relative; float:left;
                 color: #FFFFFF; font-size: 18px; line-height:2; border: solid 1px #FFFF00; }


.b2s2 img          { width:40%; height: auto; border: 0px solid #0000FF; position:relative; float: left;
                 margin: 0px; margin-top:0px; margin-right:20px; background-color: rgba(0,0,0,1.00);}

.b2s3 img          { width:60%; height:20% auto; border: 0px solid #0000FF; position:relative; float: left;
                 margin: 0px; margin-top:0px; margin-right:20px; background-color: rgba(0,0,0,1.00);}

.b2s4 img          { width:100%; height:20% auto; border: 0px solid #0000FF; position:relative; float: left;
                 margin: 0px; margin-top:0px; margin-right:20px; background-color: rgba(0,0,0,1.00);}

.b2s5 img         { width:250px; height:140px; border: 0px solid #0000FF; position:relative; float: left;
                 margin: 0px; margin-top:0px; margin-right:20px; background-color: rgba(0,0,0,1.00);}

.b2s6 img         { width:25%; height:200px; border: 0px solid #0000FF; position:relative; float: left;
                 margin: 0px; margin-top:0px; margin-right:20px; background-color: rgba(0,0,0,1.00);}

#aimzw2             {background-color: #000000; height: 20px; width:550px;  border-bottom: solid 0px #FFFF00;
                   margin-left: 20px ; margin-right: 0px; color:#FFFF00 ; font-size: 20px; text-align:center; font-style:italic;
                 font-weight: bold ; padding-top:0px;padding-bottom: 10px;position:relative;float:left; }

#aimzw3        {background-color: #000000; height: 20px; width: 550px;  border-bottom: solid 0px #FFFF00;
                   margin-left: 20px ; margin-right: 0px; color:#FFFF00 ; font-size: 20px; text-align:center; font-style:italic;
                 font-weight: bold ; padding-top:0px;padding-bottom: 10px;position:relative;float:left; }

#aimzw4        {background-color: #000000; height: 20px; width: 550px;  border-bottom: solid 0px #FFFF00;
                   margin-left: 20px ; margin-right: 0px; color:#FFFF00 ; font-size: 20px; text-align:center; font-style:italic;
                 font-weight: bold ; padding-top:0px;padding-bottom: 10px;position:relative;float:left; }


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

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

#bleft       { background-color: #000000; height: auto; width:500px; position: relative; float: left ;padding-right: 100px; padding-top:30px;}

#bright      { background-color: #000000; height: auto; width:550px;  position: relative; float: left;padding-top:30px;}


#gameplay2       {background-color: #000000; height: auto; width: 1160px;
                 margin-left: 20px; margin-right: 20px;  position:relative; float: left; position:relative;
                 color: #FFFFFF; font-size: 18px; line-height:2;text-align: left;
                  }

#bqscreen       {background-color:#2F2F2F ; height: 200px; width: 1120px; text-align:left;
                 margin-top: 40px; padding-top:20px; padding-bottom: 40px; margin-bottom:150px;
                 padding-left: 20px; margin-left:20px; padding-right:20px; margin-right: 38px;  position:relative; float:left;
                 color: #FFFFFF; font-size: 18px; line-height:2; border: solid 1px #FFFF00; }

#bleftq       { background-color: rgba(0,0,0,1.00); height: 350px; width:1160px; position: relative; float: left ;}

/* #zwblock      {background-color:#FF0040; width:1200px; height:550px; position:relative; float:left;} */

#css           {background-color: rgba(0,0,0,1.00); height: auto; width: 1200px;text-align: center;
                   position: relative; float:left; padding-left:0px;padding-right:0px;
                    }

#css img       {margin-top:20px;  padding-bottom:0px;}

#text1        { height: 170px; width:1160px; color: #FFFFFF; font-size: 18px;
                 position:relative; float:left; text-align: justify; padding-left:30px; padding-right:30px;}

#gameplay3         {background-color: #000000; height: auto; width: 1160px; text-align:center;
                 margin-left: 20px; margin-right: 20px;  position:relative; float: left; position:relative;
                 color: #FFFFFF; font-size: 18px; line-height:2;   }


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

 hr  {width: 100%; margin-left:0px; margin-bottom: 10px; }


 #sevrbalken    {background-color:; width: 460px; height: 10px;  position: absolute; float:left;
                 left:225px; top:283px; z-index:; }



#musicframe    {background-color: #000000 ; height: auto; width: 100%;
                 margin: 0px; float: left; position:relative;
                 margin-bottom: 0px; margin-top:70px;padding-top:100px;}

#zweispalten     {background-color: #000000; height: 600px; width:1160px; position: relative; float: left ;
                 margin-top: 0px; margin-bottom:0px; margin-left: 20px ; margin-right: 5px; color:#FFFFFF ;text-align:center;
                 color: #FFFFFF; font-size: 18px; line-height:2; border: 0px solid #FFFF00; }

#zweispaltenA     {background-color: #000000; height: 700px; width:1160px; position: relative; float: left ;
                 margin-top: 0px; margin-bottom:0px; margin-left: 20px ; margin-right: 5px; color:#FFFFFF ;text-align:center;
                 color: #FFFFFF; font-size: 18px; line-height:2; border: 0px solid #FFFF00; }

.sp2-left        {background-color: #000000; height: 600px ; width:500px; position: relative; float: left ; padding:10px;
                 text-align:left;margin-bottom:10px; color: #FFFFFF;}

.sp2-right       {background-color:#000000; height: 400px; width:580px; position: relative; float: left ;
                 text-align:left; margin-left:20px;margin-right:20px; margin-top:0px;margin-bottom:10px;padding:10px; }


#versionframe    {background-color: #000000 ; height: auto; width: 100%;
                 margin: 0px; float: left; position:relative;
                 margin-bottom: 0px; margin-top:50px;padding-top:100px;}

#versionframeca    {background-color: #000000 ; height: auto; width: 100%;
                 margin: 0px; float: left; position:relative;
                 margin-bottom: 0px; margin-top:100px;padding-top:150px;}

#usmall2        {background-color: #000000; height: 40px; width: 1160px;
                 margin-left: 20px ; margin-right: 20px; color:#FFFF00 ; font-size: 30px; text-align:left; font-style:italic;
                 font-weight: bold ;position: relative; float:left; padding-top:135px; border-bottom: solid 1px #FFFF00;}
/*
#leftpack        {background-color:#FFBF00;height: 365px; width:560px;position: relative; float:left;
                 border: 2px solid #FFFF00; margin-right:16px;}


#rightpack       {background-color:#0060FF;height: 365px; width:560px;position: relative; float:left;
                 border: 2px solid #FFFF00;margin-left:16px;}

#spaltenpack     {background-color:#FF00DF; height:350px;width:270 px; margin:9px; position: relative; float:left;}
*/


#leftpack        {background-color:#000000;height: auto; width:560px;position: relative; float:left;
                 border-bottom: 2px solid #FFFF00; margin-right:16px; margin-bottom: 10px;
                 font-size: 20px; font-weight: bold; color:#FFFF00;}


#rightpack       {background-color:#000000;height: auto; width:560px;position: relative; float:left;
                 border-bottom : 2px solid #FFFF00;margin-left:16px; margin-bottom: 10px;
                 font-size: 20px; font-weight: bold;color:#FFFF00;}



#middlepack      {background-color:#000000;height: 365px; width:1160px;position: relative; float:left;
                 border: 0px solid #FFFF00; padding-left:0px;padding-right:0px; padding-bottom: 100px;}



#middlepack img {padding-left:5px; background-color:#000000;}
#middlepack a {padding-left:40px;}




/*-----------------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 {
                      border: 0px solid #FFFFFF;
                      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 ----------------------- */