#loginbereichabbruch {
    position:absolute; top:0; left:0; right:0; bottom:0; background:transparent;
}

.hellerKnopf {
    background: rgb(240, 240, 240);
    border:     1px solid rgb(200, 200, 200);

    padding: 0 10px;
    height:     30px;
    margin: 0;

    color:      #000;
    font-family:"Raleway", arial, serif;
    font-weight:400;
    font-size:  10pt;

       -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
            border-radius: 8px;
}

.hellerKnopf:hover {
    background: rgb(230, 230, 230);
    border-color: #FFF;
}


#registerbox {
    padding: 20px;
    padding-bottom: 30px;

    background:rgb(222, 222, 222);

    position:absolute;
    margin-left:-150px;
    left:50%;
    top:20px;

    width:300px;

    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.5);
}

#loginbox {
    padding: 20px;
    padding-bottom: 30px;

    background:rgb(222, 222, 222);

    position:absolute;
    margin-left:-150px;
    left:50%;
    top:20px;

    width:300px;

    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.5);
}

#loginbereich td
    {
        width: 100%;
    }

/*
#loginbox input {
    background: rgb(240, 240, 240);
    border:     1px solid rgb(200, 200, 200);

    padding: 0 10px;
    height:     30px;
    margin: 0;

    color:      #000;
    font-family:"Raleway", arial, serif;
    font-weight:400;
    font-size:  10pt;

    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
            border-radius: 8px;
}

#loginbox input:hover {
    background: rgb(180, 180, 180);
    border-color: #FFF;
}
*/

.musterbox {
    width:200px; height:200px; float:left; background: #000;
    margin:10px;

    cursor: pointer;

    background: #6a6a6a;
    background: rgb(222, 222, 222);
    position: relative;
}

.musterbox:hover {
background: rgb(200, 200, 200);
}

.musterboxcanvas {
    /*width:200px; height:180px;*/
    cursor: pointer;
/*    background: rgb(222, 222, 222);*/
}

.musterboxcanvas:hover {
    /*width:200px; height:180px;*/

/*    background: rgb(200, 200, 200);*/
}

.musterboxoverlay {
    color: rgb(100, 100, 100);
    position: absolute;
    bottom: 15px;
    left: 0px;
    right: 0px;

    text-align: center;
    font-weight: 400;
}


body {
    overflow: hidden;
    min-width: 700px;
    min-height: 400px;
}

#spielfeld {
    display:block;
    background-color: rgb(200, 200, 200);
}

#header {
    position: relative;
    z-index: 100;
    background:rgb(222, 222, 222);
    width: 100%;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.5);
}

#header input {
    background: rgb(240, 240, 240);
    border:     1px solid rgb(200, 200, 200);

    padding: 0 10px;
    height:     30px;
    margin: 0;

    color:      #000;
    font-family:"Raleway", arial, serif;
    font-weight:400;
    font-size:  10pt;

    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
            border-radius: 8px;
}

#header input:hover {
    background: rgb(180, 180, 180);
    border-color: #FFF;
}

#header #levelSchliessenButton {
    background: rgb(255, 128, 0);
    color: #fff;
}


#header div {
    padding: 10px;
}

#content {
    position: relative; /* Damit Buttons richtig positioniert werden können */
    overflow: hidden;
}

/* - - - */
#spielelemente
input {
    width:      30px;
    height:     30px;

    position: absolute;
    left: 50%;
    margin-left: -15px;
    top: 40px;
    margin-top: -15px;

    background: rgb(240, 240, 240);

    border: 1px rgb(240, 240, 240) solid;
    border: 0;

    background-color: rgb(220, 220, 220);
    background-image:   url(../Images/Buttons.png);
    background-position:-90px 0px;
    background-size:    auto 60px;

    color:      #000;
    font-family:"Raleway", arial, serif;
    font-weight:400;
    font-size:  10pt;

       -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
            border-radius: 30px;
}

#spielelemente
input:hover {
    background-color: #ff7600;
    cursor: pointer;
}

#spielelemente #bausteuerung input{
    background-color: rgb(180, 180, 180);
}
#spielelemente #bausteuerung input:hover {
    background-color: #ff7600;
    cursor: pointer;
}

#spielelemente
#kameraPlusButton {
    margin-left: -130px;
}

#spielelemente
#kameraMinusButton {
    margin-left: -95px;
}

#spielelemente
#kameraFrameButton {
    width: 120px;
    margin-left: -60px;
    background-image: none;
}

#spielelemente
#kameraCWButton {
     margin-left: 65px;
}

#spielelemente
#kameraCCWButton {
     margin-left: 100px;
}


#spielelemente
.plusHintergrund,

#spielelemente
.minusHintergrund,

#spielelemente
.cwDrehenHintergrund,

#spielelemente
.ccwDrehenHintergrund {
    background-image:   url(../Images/Buttons.png);
    background-size:    auto 60px;
}

#spielelemente
.plusHintergrund {
    background-position: -90px 0px;
}

#spielelemente
.minusHintergrund {
    background-position: -60px 0px;
}

#spielelemente
.cwDrehenHintergrund {
    background-position:   0px 0px;
}

#spielelemente
.ccwDrehenHintergrund {
    background-position: -30px 0px;
}

#spielelemente
#tilePlusButton {
    top: 0px;
    left: 0px;
}

#spielelemente
#tileMinusButton {
     top: 20px;
    left: 50px;
}

#spielelemente
#tileCWButton {
     top: 40px;
    left: 100px;
}

#spielelemente
#tileCCWButton {
     top: 60px;
    left: 150px;
}

#musteruebersicht {
    background: rgba(168, 168, 168, 0.69); 
    position: absolute; 
    top:0; left:0; right:0; bottom: 0px;

    padding-top: 30px;
    padding-bottom: 30px;

    overflow-y:scroll;
    overflow-x: hidden;

    display: none;
}

#musteruebersichtabbruch {
    position:absolute; top:0; left:0; right:0; bottom:0; background:transparent;
}

#levelliste {
    margin: 0 auto; min-width: 660px; max-width: 1320px;
}

#status {
    text-align: center;
}

/* - - - */

.levelAddButton {
    background: #000000;
    border:     1px solid #000000;
    color:      #ffffff;
    padding:    5px;

    height:     30px;
    width:      130px;

    font-family:"Raleway", arial, serif;
    font-weight:100;
    font-size:  12pt;

    vertical-align: middle;
/*    z-index:    10;*/
}

.levelAddButton:hover {
    background: #262626;
}

.levelAddName {
    background: #000000;
    border:     1px solid #000000;
    height:     30px;
    width:      200px;
    padding-left: 5px;
    padding-right: 5px;
    color:      #ffffff;
    font-family:"Raleway", arial, serif;
    font-weight:200;
    font-size:  12pt;
    vertical-align: middle;
    z-index:    9;
    border-top-color: #292929;
    border-left-color: #292929;
    border-bottom-color: #818181;
    border-right-color: #818181;
}


.levelContainer {
    position:absolute;
    width: 100%;
    top: 0;
    margin:0;
    padding:0;
    overflow-x: hidden;
    overflow-y: scroll;
    background: rgba(0, 0, 0, 0);
    z-index: 2;
}

.levelText {
    color : #fff;
    position : relative;
    margin : 0 auto;
    top: 80%;
    font-family: "Raleway", arial, serif;
    font-weight:100;
    font-size:  16pt;
}

.levelRating {
    background-color: #008e07;
    position : relative;
    left: 5%;
    height: 5px;
    width: 10%;
    top: 77.5%;
}

.levelRatingRest {
    background-color: #898989;
    position : relative;
    left: 5%;
    height: 2.5%;
    width: 90%;
    top: 80%;
}

.levelCanvas {
    position : absolute;
    background : #6a6a6a;
    left:0; top:0;
    width : 100%;
    height : 100%;
}

.levelCanvas:hover {
    background: #5a5a5a;
}

.levelAdd {
/*    background: #6a6a6a;

    text-align: center;
    vertical-align: middle;

    width:200px;
    height:200px;
    float:left;
    margin:10px;
*/
    background: #6a6a6a;

    position: relative;
}

.levelAdd:hover {
    background: #5a5a5a;
}

.levelAddText {
    position : relative;
    color : #fff;
    top : 44%;
    margin : 0 auto;
    font-family: "Raleway", arial, serif;
    font-weight:100;
    font-size:  16pt;
}

.levelAddPlusS {
    margin: 100px auto;
    width: 1%;
    height: 25%;
    background: #898989;
}

.levelAddPlusW {
/*
    position: relative;
    left: 32.5%;
    top: 49.5%;
    width: 35%;
*/
    margin: 100px auto;
    width: 35%;
    height: 1%;
    background: #898989;
}

.levelBlock {
    position:   absolute;
    z-index:    10;
    text-align: center;
}

.levelAddInfo {
    background: #6a6a6a;
    width: 420;
    height:200px;
    min-width: 420px;
    text-align: center;
    float:left;
    margin:10px;
    position: relative;
}

#footer {    
    position: relative;
    z-index: 100;
    background:rgb(222, 222, 222);
    width: 100%;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}


#footer div {
    padding: 10px;

    color:      #000;
    font-family:"Raleway", arial, serif;
    font-weight:400;
    font-size:  10pt;
}

#levelButton {

}

.ms_buttons input {
    background-color: rgba(155, 155, 155, 0.5);
    height:     30px;
    width:      30px;
    color:      black;
    border:     0;

    background-image:   url(../Images/Buttons.png);
    background-position:-90px 0px;
    background-size:    auto 60px;

    font-family:"Raleway", "arial", serif;
    font-weight:600;
    font-size:  10pt;
       -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
            border-radius: 15px;

    position:  absolute;
      /* IE 10+ */

    /*z-index: 2000;*/
}

.ms_buttons input:hover {
    cursor: pointer;
}

#ms_plus {
    left: 50px;
    background-position: -90px 0px;
}
#ms_plus:hover {
    background-position: -90px 30px;
}

#ms_minus {
    background-position: -60px 0px;
    left: 100px;
}
#ms_minus:hover {
    background-position: -60px 30px;
}

#ms_cw_drehen {
    background-position: 0px 0px;
    left: 150px;
}
#ms_cw_drehen:hover {
    background-position: 0px 30px;
}

#ms_ccw_drehen {
    background-position: -30px 0px;
    left: 200px;
}
#ms_ccw_drehen:hover {
    background-position: -30px 30px;
}

.bedienelementeBereich {
    background-color: rgba(255, 255, 255, 0);
    width:      250px;
    padding:    4px 4px 4px 4px;
    position:   relative;
    margin:     0 auto;
    z-index:    3;
}

.bedienelementeBereichUnten {
    -webkit-filter: none;
       -moz-filter: none;
        -ms-filter: none;
         -o-filter: none;
            filter: none;

    -webkit-transition: -webkit-filter 400ms ease-in-out;
       -moz-transition: -moz-filter 1s ease-in-out;
        -ms-transition: -ms-filter 1s ease-in-out;
         -o-transition: -o-filter 1s ease-in-out;
    
    position:   relative;
    top:        -280px;
    transition: top 1s 500ms ease-in-out;
}

.blurred {
    -webkit-filter: blur(15px);
       -moz-filter: blur(15px);
        -ms-filter: blur(15px);
         -o-filter: blur(15px);
            filter: blur(15px);

    -webkit-transition: -webkit-filter 400ms ease-in-out;
       -moz-transition: -moz-filter 400ms ease-in-out;
        -ms-transition: -ms-filter 400ms ease-in-out;
         -o-transition: -o-filter 400ms ease-in-out;
}

.unblurred {
    -webkit-filter: none;
       -moz-filter: none;
        -ms-filter: none;
         -o-filter: none;
            filter: none;

    -webkit-transition: -webkit-filter 400ms ease-in-out;
       -moz-transition: -moz-filter 400ms ease-in-out;
        -ms-transition: -ms-filter 400ms ease-in-out;
         -o-transition: -o-filter 400ms ease-in-out;
}

.bedienelementeBereichOben {
    -webkit-filter: blur(10px);
       -moz-filter: blur(20px);
        -ms-filter: blur(20px);
         -o-filter: blur(20px);
            filter: blur(20px);

    -webkit-transition: -webkit-filter 400ms ease-in-out;
       -moz-transition: -moz-filter 1s ease-in-out;
        -ms-transition: -ms-filter 1s ease-in-out;
         -o-transition: -o-filter 1s ease-in-out;

    position:   relative;
    top:        -450px;
    transition: top 1s ease-in-out;
}

.bedienelement {
    height:30px;
    width: 30px;
}

.rechtsDrehen {
    background-image: url(../Images/Buttons.png);
    background-position: 0px 0px;
    background-size: auto 60px;
    overflow: hidden;
}

.linksDrehen {
    background-image: url(../Images/Buttons.png);
    background-position: -30px 0px;
    background-size: auto 60px;
    overflow: hidden;
}

.resetButton {
    background-color: rgba(155, 155, 155, 0.5);
    height:     30px;
    width:      60px;
    color:      black;

/*    text-shadow:white 0 0 10px;*/
    text-align: center;
    border:     0;
    font-family:"Raleway", arial, serif;
    font-weight:400;
    font-size:  12pt;
       -moz-border-radius: 40px;
    -webkit-border-radius: 40px;
            border-radius: 40px;
}

.resetButton:hover {
    background: transparent;
    text-shadow:white -1px -1px, white 1px -1px, white 1px 1px, white -1px 1px;
}

.verkleinern {
    background-image:   url(../Images/Buttons.png);
    background-position:-60px 0px;
    background-size:    auto 60px;
    overflow:           hidden;
}

.vergroessern {
    background-image:   url(../Images/Buttons.png);
    background-position:-90px 0px;
    background-size:    auto 60px;
    overflow:           hidden;
}

.canvasAusblenden {
	-webkit-filter: blur(10px);
	   -moz-filter: blur(20px);
		-ms-filter: blur(20px);
		 -o-filter: blur(20px);
			filter: blur(20px);

	-webkit-transition: -webkit-filter 400ms ease-in-out;
	   -moz-transition: -moz-filter 1s ease-in-out;
		-ms-transition: -ms-filter 1s ease-in-out;
		 -o-transition: -o-filter 1s ease-in-out;
}

.canvasEinblenden {
	-webkit-filter: none;
	   -moz-filter: none;
		-ms-filter: none;
		 -o-filter: none;
			filter: none;

	-webkit-transition: -webkit-filter 400ms ease-in-out;
	   -moz-transition: -moz-filter 1s ease-in-out;
		-ms-transition: -ms-filter 1s ease-in-out;
		 -o-transition: -o-filter 1s ease-in-out;
}

.dimmFlaeche {
	background: rgba(0, 0, 0, 0.5);
	position:relative;
	top:0px;
	height:80px;
	width:200px;
	margin: 0 auto;
	margin-top:-10px;
}

.loginStatus {
    position:   absolute;
	height:     40px;
	right:      220px;
    top:        17px;
    color:      #ffffff;
    font-family:"Raleway", arial, serif;
    font-weight:100;
    font-size:  12pt;
    text-align: right;
    vertical-align: bottom;
    z-index:    10;
}

.registerButton {
    background: #000000;
    border:     1px solid #000000;
	position:   absolute;
	height:     40px;
	width:      100px;
	right:      110px;
    top:        5px;
    color:      #ffffff;
    font-family:"Raleway", arial, serif;
    font-weight:100;
    font-size:  16pt;
    vertical-align: middle;
    z-index:    10;
}

.registerButton:hover {
    background: #262626;
/*    border:     1px solid #262626;*/
}

.registerSeite {
    position:absolute;
    width: 100%;
    margin:0 auto;
    overflow:hidden;
    background: rgba(0, 0, 0, 0);
    z-index: 10;
}

.registerBez {
    color: #fff;
    padding-right: 5px;
}

.registerFeld {
    background: #000000;
    border:     1px solid #000000;
	height:     30px;
    padding-left: 5px;
    padding-right: 5px;
    color:      #ffffff;
    font-family:"Raleway", arial, serif;
    font-weight:200;
    font-size:  12pt;
    vertical-align: middle;
    z-index:    9;
    border-top-color: #292929;
    border-left-color: #292929;
    border-bottom-color: #818181;
    border-right-color: #818181;
}

.abschickenButton {
    background: #000000;
    border:     1px solid #000000;
    color:      #ffffff;
    margin-top: 5px;
    padding:    5px;
    font-family:"Raleway", arial, serif;
    font-weight:100;
    font-size:  12pt;
    vertical-align: middle;
    z-index:    10;
}

.abschickenButton:hover {
    background: #262626;
/*    border:     1px solid #262626;*/
}

.loginButton {
    background: #000000;
    border:     1px solid #000000;
	position:   absolute;
	height:     40px;
	width:      80px;
	right:      20px;
    top:        5px;
    color:      #ffffff;
    font-family:"Raleway", arial, serif;
    font-weight:100;
    font-size:  16pt;
    vertical-align: middle;
    z-index:    10;
}

.loginButton:hover {
    background: #262626;
/*    border:     1px solid #262626;*/
}

.loginFeld {
    background: #000000;
    border:     1px solid #000000;
	position:   absolute;
	height:     30px;
    padding-left: 5px;
    padding-right: 5px;
    top:        10px;
    color:      #ffffff;
    font-family:"Raleway", arial, serif;
    font-weight:200;
    font-size:  12pt;
    vertical-align: middle;
    z-index:    9;
    border-top-color: #292929;
    border-left-color: #292929;
    border-bottom-color: #818181;
    border-right-color: #818181;
}

.loginFeld:hover {
    background: #262626;
    transition: background 0s;
}

.passwortVisible {
    right:      110px;
    width:      100px;
    transition: all 400ms ease-in-out;
    visibility: visible;
}

.userVisible {
    right:      230px;
    width:      100px;
    transition: all 400ms ease-in-out;
    visibility: visible;
}

.passwortHidden {
    right:      20px;  /*100px*/
    width:      0px;
    visibility: hidden;
}

.userHidden {
    right:      20px;
    width:      0px;
    visibility: hidden;
}

.profilBereich {
    position: absolute;
     
}



.levelContainer {
    position:absolute;
    width: 100%;
    top: 0;
    margin:0;
    padding:0;
    overflow:scroll;
    background: rgba(0, 0, 0, 0);
    z-index: 2;
}

.levelBlock {
    position:   absolute;
    background: grey;
    z-index:    10;
    text-align: center;
    padding:    0px;
    color:      white;
    border:     0px solid rgba(0, 0, 0, 0);
    font-family: "Raleway", arial, serif;
    font-weight:100;
    font-size:  16pt;
    vertical-align: middle;
}

.levelBlock:hover {
    background: #5a5a5a;
}

.nichtauswahl {
	-webkit-user-select: none;
	   -moz-user-select: none;
		-ms-user-select: none;
	 -khtml-user-select: none;
			user-select: none;
	cursor:default;
}

.kontextMenu {
    background-color: rgba(17, 17, 17, 0.25);
    color: #fff;
    position:absolute;
    padding: 5px;
    padding-top: 0px;
    z-index:100;
}

.kontextMenuItem {
    background: #000000;
    border:     1px solid #000000;
	position:   relative;
	height:     30px;
	width:      150px;
	margin-top: 5px;
    padding-top: 8px;
    color:      #ffffff;
    font-family:"Raleway", arial, serif;
    font-weight:100;
    font-size:  12pt;
}

.kontextMenuItem:hover {
    background: #262626;
/*    border:     1px solid #262626;*/
}




.container {
    width   : 200px;
    height  : 200px;
    position: relative;
/*    border: 1px solid #CCC;*/
    -webkit-perspective: 800px;
       -moz-perspective: 800px;
         -o-perspective: 800px;
            perspective: 800px;
}
#card {
    width   : 100%;
    height  : 100%;
    position: absolute;
    top     : 0;
    left    : 0;
    -webkit-transition: -webkit-transform 1s;
       -moz-transition: -moz-transform 1s;
         -o-transition: -o-transform 1s;
            transition: transform 1s;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
#card.flipped {
    -webkit-transform: rotateY(180deg);
       -moz-transform: rotateY(180deg);
         -o-transform: rotateY(180deg);
            transform: rotateY(180deg);
}
#card figure {
    position: absolute;
    display : block;
    height  : 100%;
    width   : 100%;
    
    
    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
         -o-backface-visibility: hidden;
            backface-visibility: hidden;
}
#card .front {
    background-color: rgb(222, 222, 222);
    background-image: url(../Images/Plus.gif);
    background-size: 200px 200px;
    background-position: center;
    background-repeat: no-repeat;
    
    cursor: default;
}

#card .front:hover {
    background-color: rgb(200, 200, 200);
    cursor: pointer;
}

#card .back {
    background-color: #6a6a6a;
    background-color: rgb(220, 220, 220);
    -webkit-transform: rotateY(180deg);
       -moz-transform: rotateY(180deg);
         -o-transform: rotateY(180deg);
            transform: rotateY(180deg);
    cursor: default;
}

figure {
    margin: 0;
}