*{
        font-family: 'Arial';
        font-size: 16px;
        box-sizing: border-box;
        margin: 0px;
        padding: 0px;
        -webkit-appearance: none;
        -moz-appearance: none;
    }

    *::-ms-expand {
        display: none;
    }

    body {
        padding: 8px;
        margin: 0px;
    }


    h1, h1 > span {
        float: left;
        font-size: 38px;
        font-weight: bold;
        line-height: 50px;
        vertical-align: middle;    
    }

    h2, h2 > span {
        font-size: 24px;
        font-weight: bold;
    }

    h3, h3 > span {
        font-size: 20px;
        font-weight: bold;
    }

    img {
        background-image: none;
        background-repeat: no-repeat;
        background-position: center; 
        background-size: 70% 70%;
    }

    ul {
        padding-left: 20px;
    }

    label, input, button, select, textarea {
        display: block;
        width: 302px;
        max-width: 302px;
    }

    input, button, select, textarea {
        height: 26px; 
        border: 1px solid;
        border-color: #000000;
        border-radius: 4px;
        background-color:transparent;
        padding: 2px;
        padding-left: 8px;
        padding-right: 8px;
        border-radius: 8px;

    }

    textarea {
        height: 200px;
    }

    label {
        margin-top: 8px;
    }
    label:first-child {
        margin-top: 0px;
    }

    select {
        background: url('/Images/Select.png') right center no-repeat;
        padding-right: 26px;
    }

    input:hover, select:hover, textarea:hover {
        border-color: #f0ff02;
    }

    select:hover {
        background: url('/Images/SelectYellow.png') right center no-repeat;
    }

    input:focus, button:focus, select:focus, textarea:focus {
        background-color: #f0ff02;
        background: linear-gradient(to bottom, #dddd00 0%,#ffff00 100%); 
        border-color: #000000;
    }

    select:focus {
        background: url('/Images/Select.png') right center no-repeat, linear-gradient(to bottom, #dddd00 0%,#ffff00 100%);
    }

    input:disabled, select:disabled, textarea:disabled {
        border-color: #777777;
        color: #777777;
    }
    select:disabled {
        background: url('/Images/SelectGrey.png') right center no-repeat;
    }
    input:disabled:hover, select:disabled:hover, textarea:disabled:hover {
        border-color: #777777;
        color: #777777;
    }
    select:disabled:hover {
        background: url('/Images/SelectGrey.png') right center no-repeat;
    }


    input[type=checkbox] {
        width: 0px;
        height: 0px;
        position: fixed;
        left: -500px;
        right: -500px;
        }

    input[type=checkbox] + label {
        vertical-align: middle;
        padding-left: 30px;
        }
    label + input[type=checkbox] + label {
        margin-top: 0px;
        }
    input[type=checkbox] + label + input[type=checkbox] + label {
        margin-top: 8px;
        }
    input[type=checkbox] + label + input, input[type=checkbox] + label + select , input[type=checkbox] + label + div {
        margin-top: 8px;
    }
    Form > Div > Div > Div .EnablerCheckBox + label + div, Form > Div > Div > Div .DisablerCheckBox + label + div, Form > Div > Div > Div .EnablerAndDisablerCheckBox + label + div  {
        margin-left: 0px;
    }
    Form > Div > Div > Div .EnablerCheckBox + label + div > Div, Form > Div > Div > Div .DisablerCheckBox + label + div > Div, Form > Div > Div > Div .EnablerAndDisablerCheckBox + label + div > Div  {
        margin-left: -8px;
    }
    Form > Div > Div > Div .EnablerAndDisablerCheckBox + label + div + div  {
        margin-left: 0px;
    }
    Form > Div > Div > Div .EnablerAndDisablerCheckBox + label + div + div > Div  {
        margin-left: -8px;
    }
    .EnablerCheckBox:not(:checked) + label + input, .EnablerCheckBox:not(:checked) + label + select, .EnablerCheckBox:not(:checked) + label + div {
        display: none;
    }
    .DisablerCheckBox:checked + label + input, .DisablerCheckBox:checked + label + select, .DisablerCheckBox:checked + label + div {
        display: none;
    }

    .EnablerAndDisablerCheckBox:not(:checked) + label + div {
        display: none;
    }
    .EnablerAndDisablerCheckBox:checked + label + div + div {
        display: none;
    }

    input[type=checkbox] + label::before {
        display: inline-block;
        content: "";
        width: 20px;
        height: 20px;
        border: 1px solid;
        border-color: #000000;
        background-color:transparent;
        border-radius: 8px;
        margin: 0px;
        vertical-align: middle;
        cursor: pointer;
        margin-left: -30px;
        margin-right: 8px;
        }

    input[type=checkbox] + label:hover::before {
        border-color: #f0ff02;
        }

    input[type=checkbox]:focus + label::before {
        border-color: #000000;
        background-color: #f0ff02;
        background: linear-gradient(to bottom, #dddd00 0%,#ffff00 100%); 
        }

    input[type=checkbox]:disabled + label::before {
        border-color: #777777;
    }

    input[type=checkbox]:disabled + label:hover::before {
        border-color: #777777;
    }

    input[type=checkbox]:checked + label::before {
        content: url('/images/Checkbox.png');
    }

     input[type=checkbox]:checked:disabled + label::before {
        content: url('/images/CheckboxGrey.png');
    }

    input[type="submit"], button {
        display: inline-block;
        vertical-align: top;
        margin-left: 8px;
        margin-top: 8px;
        width: auto;
        cursor: pointer;
        font-weight: bold;
        padding-left: 8px;
        padding-right: 8px;
        border-radius: 12px;
        background-color: #ff03de;
        background: linear-gradient(to bottom, #ff33ff 0%,#ee00cc 100%); 
    }
    input[type="submit"]:hover, button:hover, input[type="submit"]:focus, button:focus {
        border-color: #000000;
        background-color: #ff55ff;
        background: linear-gradient(to bottom, #ff77ff 0%,#ee44ee 100%);  
    }

    input[type="submit"]:active, button:active {
        border-color: #000000;
        background-color: #f0ff02;
        background: linear-gradient(to bottom, #dddd00 0%,#ffff00 100%);
    }

    input[type="submit"]:disabled, button:disabled{
        color: #777777;
        border-color: #777777;
        background-color: #c0c0c0;
        opacity: 1.0;
        background: linear-gradient(to bottom, #bbbbbb 0%,#dddddd 100%)
    }
    input[type="submit"]:disabled:hover, button:disabled:hover {
        color: #777777;
        border-color: #777777;
        background-color: #c0c0c0;
        opacity: 1.0;
        background: linear-gradient(to bottom, #bbbbbb 0%,#dddddd 100%)
    }
    input[type="submit"]:disabled:active, button:disabled:active {
        color: #777777;
        border-color: #777777;
        background-color: #c0c0c0;
        opacity: 1.0;
        background: linear-gradient(to bottom, #bbbbbb 0%,#dddddd 100%)
    }


    #Wrapper {
        display:block;
        margin: 0 auto;
    }

    @media (max-width: 1946px) {
        #Wrapper {
            width: 1610px;
        }
    }
    @media (max-width: 1626px) {
        #Wrapper {
            width: 1290px;
        }
    }
    @media (max-width: 1306px) {
        #Wrapper {
            width: 970px;
        }
    }
    @media (max-width: 986px) {
        #Wrapper {
            width: 650px;
        }
    }
    @media (max-width: 666px) {
        #Wrapper {
            width: 330px;
        }
    }

    #BannerImage {
        height: 50px;
        float: left;
        margin-right: 8px;
    }
    
    #LoginBannerImage {
        height: 200px;
        float: left;
        margin-right: 8px;
    }
    #LoginBannerLabel {
        line-height:200px;
    }
    #UserMenu {
        display: block;
        background-color: #00c6cf;
        background: linear-gradient(to bottom, #00aaaa 0%,#00cccc 100%); 
        padding: 8px;
        padding-left: 0px;
        padding-top: 0px;
        float: right;
        text-align: right;
        border: 1px solid;
        border-color: #000000;
        border-radius: 8px;
    }

    #UserMenu a {
        display: inline-block;
        vertical-align: top;
        background-color: #ff03de;
        background: linear-gradient(to bottom, #ff33ff 0%,#ee00cc 100%); 
        color: #000000;
        padding: 2px;
        padding-left: 8px;
        padding-right: 8px;
        text-decoration: none;
        font-weight: bold;
        margin-left: 8px;
        margin-top: 8px;
        text-align:left ;
        border: 1px solid;
        border-color: #000000;
        border-radius: 12px;
        height: 26px;
    }
    @media (max-width: 666px) {
        #UserMenu a {
            width: 312px;
        }
    }

    #UserMenu a:hover {
        background-color: #ff55ff;
        background: linear-gradient(to bottom, #ff77ff 0%,#ee44ee 100%);  
    }

    #UserMenu a:active {
        background-color: #f0ff02;
        background: linear-gradient(to bottom, #dddd00 0%,#ffff00 100%);
    }

    #Header {
        width: 100%;
        display: block;
        float: left;
        background-color: #00f6ff;
        background: linear-gradient(to bottom, #00dddd 0%,#00ffff 100%); 
        padding: 8px;
        font-size: 14px;
        font-weight: bold;
        text-align: center;
        margin-top: 8px;
        border: 1px solid;
        border-color: #000000;
        border-radius: 8px;
    }

    #Menu {
        display: block;
        float: left;
        width: 100%;
        background-color: #00c6cf;
        background: linear-gradient(to bottom, #00aaaa 0%,#00cccc 100%); 
        padding: 8px;
        padding-left: 0px;
        padding-top: 0px;

        margin-top: 8px;
        border: 1px solid;
        border-color: #000000;
        border-radius: 8px;
    }

    #Menu a {
        display: inline-block;
        vertical-align: top;
        background-color: #ff03de;
        background: linear-gradient(to bottom, #ff33ff 0%,#ee00cc 100%); 
        color: #000000;
        padding: 2px;
        padding-left: 8px;
        padding-right: 8px;
        text-decoration: none;
        font-weight: bold;
        margin-top: 8px;
        margin-left: 8px;
        text-align:left ;
        border: 1px solid;
        border-color: #000000;
        border-radius: 12px;
        height: 26px; 
    }

    @media (max-width: 666px) {
        #Menu a {
            width: 312px;
        }
    }

    #Menu a:last-child {
        margin-right: 0px;
    }

    #Menu a:hover {
        background-color: #ff55ff;
        background: linear-gradient(to bottom, #ff77ff 0%,#ee44ee 100%);  
    }

    #Menu a:active {
        background-color: #f0ff02;
        background: linear-gradient(to bottom, #dddd00 0%,#ffff00 100%);
    }

    #Content {
        display: block;
        float: left;
        width: 100%;
        background-color: #00f6ff;
        background: linear-gradient(to bottom, #00dddd 0%,#00ffff 100%); 
        padding: 8px;
        margin-top: 8px;
        border: 1px solid;
        border-color: #000000;
        border-radius: 8px;
    }

    #Footer {
        display: block;
        float: left;
        width: 100%;
        margin-top: 8px;
        text-align:center;
    }

     .ErrorList {
        display: block;
        color: #FF0000;
    }

    .Form {
    }

    .Form > div{
        margin-left: -8px;
        font-size: 0px;
    }
    .Form > div:first-child{
        margin-top: -8px;
    }
    .Form > div > div {
        display: inline-block;
        vertical-align: top;
        margin-left: 8px;
        margin-top: 8px;
        border: 1px solid;
        border-color: #00c6cf;
        border-radius: 8px;
        padding: 4px;
        width: 312px;
        background-color: #00f6ff;
        background: linear-gradient(to bottom, #00dddd 0%,#00ffff 100%); 
    }

    .Form > div > div > div {
        display: block;
        margin-left: -8px;
    }
    .Form > div > div > div:first-child {
        margin-top: 0px;
    }

    .Form .PreviewImage {
        width: 302px;
        height: 302px;
        display: block;
        border: 1px solid;
        border-color: #000000;
        border-radius: 8px;
        overflow: hidden;
        margin-left: 0px;
        text-align:center;
        cursor: pointer;
    }
    .Form .PreviewImage > div {
        width: 302px;
        height: 302px;
        display: table-cell;
        text-align:center;
        vertical-align: middle;
    }
    .Form .PreviewImage  img {
        display: block;
        max-width: 302px;
        max-height: 302px;
        text-align: center;
        vertical-align: middle;
    }

    .SubForm {
        display: block;
        position:fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        background-color: rgba(255,255,255,0.7);
        padding: 8px;
        overflow: auto;
        z-index:2;
    }

    .Form .SubForm {
        display: block;
        position:fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        background: none;
        background-color: rgba(255,255,255,0.7);
        padding: 8px;
        overflow: auto;
    }

    .SubForm > div {
        display: table;
        width: 100%;
        height: 100%;
    }

    .SubForm > div > div {
        display: table-cell;
        text-align:center;
        vertical-align: middle;
    }
    
    .SubForm > div > div > img {
        max-width: 90%;
        max-height: 90%;
    }

    .SubForm .Form {
        display: inline-block;
        background-color: #00f6ff;
        background: linear-gradient(to bottom, #00dddd 0%,#00ffff 100%); 
        padding: 8px;
        text-align:left;
        border: 1px solid;
        border-color: #000000;
        border-radius: 8px;
        vertical-align: middle;
        max-width: 90%;
        min-width: 330px;
    }


    @media (max-width: 1946px) {
        .SubForm .Form {
            max-width: 1290px;
        }
    }
    @media (max-width: 1626px) {
        .SubForm .Form {
            max-width: 970px;
        }
    }
    @media (max-width: 1306px) {
        .SubForm .Form {
            max-width: 650px;
        }
    }
    @media (max-width: 986px) {
        .SubForm .Form {
            max-width: 330px;
        }
    }

    .HiddenSubForm {
        display: none;
    }
    .Form .HiddenSubForm {
        display: none;
    }
    .ImageUpload {
    }

     .Form > div > label, .Form > div > span, .Form > div > input, .Form > div > button, .Form > div > select, .Form > div > textarea {
        display: inline-block;
        width: auto;
        vertical-align: middle;
        margin-left: 8px;
        margin-top: 8px;
    }
    .Form > div > div > div > span {
        display:block;
        margin-left: 8px;
    }

    .Form > div > div > img {
        display: block;
        width: 302px;
        height: 302px;
        border: 1px solid;
        border-color: #000000;
        border-radius: 8px;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
    }

    .Form > span {
        display: block;
    }

    .Form > ul + span {
        margin-top: 8px;
    }

    .Form .GamePanel {
    }
    .Form .GamePanel > span{
        display:block;
        margin-top: 4px;
    }
    .Form .GamePanel > h3 > span{
        display:block;
        margin-top: 4px;
    }
    .Form .GamePanel > div > span {
        display: block;
        margin-left: 8px;
        margin-top: 4px;
    }

    .Form .GamePanel > div > h3 > span {
        display: block;
        margin-left: 8px;
        margin-top: 4px;
    }

    .Form .GamePanel > img {
        display: block;
        width: 302px;
        height: 302px;
        border: 1px solid;
        border-color: #000000;
        border-radius: 8px;
        text-align: center;
        vertical-align: middle;
        cursor: auto;
    }

    .Form .RandomAnimation {
        display: none;
    }

    .Form .Random {
        background-color: #feb645;
        background: linear-gradient(to bottom, #f1e767 0%,#feb645 100%); 
        animation-name: AnimateRandomBackground;
        animation-duration: 1s;
        animation-iteration-count: infinite;
    }

    @keyframes AnimateRandomBackground {
        0% {
            background-color: #e0bf00;
            background: linear-gradient(to bottom, #cc9900 0%,#eebb00 100%); 
        }
        50% {
            background-color: #f0ff02;
            background: linear-gradient(to bottom, #dddd00 0%,#ffff00 100%); }
        100% {
            background-color: #e0bf00;
            background: linear-gradient(to bottom, #cc9900 0%,#eebb00 100%); 
        }
    }

    .ExpansionPanel {
        display:block;
        margin-top: 8px;
        margin-left: 8px;
        padding: 4px;
        border: 1px solid;
        border-color: #00c6cf;
        border-radius: 8px;
    }
    .ExpansionPanel > div{
        display:inline-block;
        vertical-align: top;
        margin-left:-8px;
        width: 215px;
    }
    .ExpansionPanel > div span{
        display:block;
        margin-left: 8px;
    }

    .ExpansionPanel > img {
        display: inline-block;
        width: 80px;
        height: 80px;
        border: 1px solid;
        border-color: #000000;
        border-radius: 8px;
        text-align: center;
        vertical-align: middle;          
    }

    
    .ExpansionPanel h3, .ExpansionPanel h3 > span {
        font-size: 16px;
    }

    .Form .Stored {
        background-color: #00f6ff;
        background: linear-gradient(to bottom, #00dddd 0%,#00ffff 100%); 
    }
    .Form .Borrow {
        background-color: #44ccdd;
        background: linear-gradient(to bottom, #007777 0%,#009999 100%); 
    }
    .Form .Troll {
        background-color: #00c6cf;
        background: linear-gradient(to bottom, #00aaaa 0%,#00cccc 100%); 

    }
    .Form .Wished {
        background-color: #e0bf00;
        background: linear-gradient(to bottom, #cc9900 0%,#eebb00 100%); 
    }
    .Form .Ordered {
        background-color: #f0ff02;
        background: linear-gradient(to bottom, #dddd00 0%,#ffff00 100%); 
    }
    .Form .CanDisposed {
        background-color: #c0c0c0;
        background: linear-gradient(to bottom, #bbbbbb 0%,#dddddd 100%); 
    }
    .Form .Disposed {
        background-color: #909090;
        background: linear-gradient(to bottom, #777777 0%,#999999 100%); 
    }
    .GamePlay {
        font-weight: bold;
    }
    .GameSubPlay {
        font-style: italic;
    }

    .GamePlayPanel {
        display:block;
        margin-top: 8px;
        margin-left: 8px;
        padding: 4px;
        border: 1px solid;
        border-color: #00c6cf;
        border-radius: 8px;
        background-color: #00f6ff;
        background: linear-gradient(to bottom, #00dddd 0%,#00ffff 100%); 
    }
    .GamePlayPanel > span {
        display: block;
    }
    .GamePlayPanel > div {
        margin-left: 0px;
    }

    .GamePlayPanel > .ExpansionPanel > div {
        width: 205px;
    }

    .Winner::before {
        content: ' ';
        display: block;
        background-image: url('/Images/Pokal.png');
        background-size: 78px 78px;
        background-position: center center; 
        background-repeat: no-repeat;
        z-index: 1;
        width: 80px;
        height: 80px;
        border: 0px solid;
        border-radius: 8px;
        position:absolute;
    }