body {
    background-image: url('/frontend/img/mattex.jpg');
    color: white;
    font-size: 14pt;
}

#gametypeinfo {
    position: fixed;
    left:10px;
    top:65px;
}

#trickbox {
    position: fixed;
    left: 46px;
    top: 90px;
}

#playerdata {
    width: 235px;
    width: 235px;

    position: fixed;
    top: 5px;
    left: 5px;


    border: black 2px solid;
    border-radius: 10px;
    background-color: linen;
    color: black;
}

#myname {
    font-size: 22px;
    margin-left: 10px;
}

#myscore {
    position: fixed;
    top: 10px;
    left: 176px;
    width: 60px;
    text-align: right;
}

#mybid {
    position: fixed;
    top: 32px;
    left:16px;
    width: 200px;
    height: 30px;
}


#editname {
    background-color: white;
    border-radius: 5px;
    width: 20px;
    height:20px;
    text-align:center;
    vertical-align: middle;
    position: relative;
    left: 120px;
    top: -20px;
    color: green;
}

.lasttrickbutton {
    background-image: url('/frontend/img/lasttrick.png');
    /*position: fixed;
    top: 120px;
    left: 50px;*/
    position: relative;
    left:464px;
    bottom:72px;
}

.scorebutton {
    background-image: url('/frontend/img/score_button.png');
    position: fixed;
    top: 120px;
    left: 5px;
}

#trumpsuit {
    position: fixed;
    top: 86px;
    left: 8px;
}

.smallbutton {
    background-size: contain;
    height: 40px;
    width: 40px;
    background-color: #2c3c11 !important;
    border-radius: 15px !important;
    border: darkolivegreen 2px solid !important;
    margin: 0px 0px 0px 0px !important;
}



button {
    border: black 2px solid;
    border-radius: 10px;
    margin: 5px 5px 5px 5px;
    font-size: 14pt;
}

.bidButton {
    min-width: 45px;
}

.handcard {
    height: 185px;
    width: 130px;
    border: 1px solid black;
    border-radius: 10px;

    filter: brightness(100%);
    -webkit-filter: brightness(100%);
    /*opacity: 0.5;*/
}


.score_total {
    background-color: khaki;
}


.score_delta {
    background-color: #fffa90 ;
}

#handcards {alignment:center; list-style-type: none; margin: 0; padding: 0; }
#handcards li { float:left; font-size: 1.4em; width: 40px; height: 180px; }

#tablecards { list-style-type: none; margin: 0; padding: 0; }
#tablecards li { margin: 3px 3px 3px 0px; padding: 1px; float: left; width: 130px; height: 180px; font-size: 4em; text-align: center; }


.handcontainer {
    width: 620px;
    height: 190px;
    /*position: fixed;
    bottom: 20px;**/

}

#hand {
    width: 660px;
    position: fixed;
    bottom: 20px;
    left: 50%;
    margin-left:  -330px;
}

#handsort{
    position: fixed;
    bottom: 92px;
    margin-left: -55px;
    margin-top: 0px;
    height:120px;
    width: 42px;

}


.sortButton {
    height: 30px;
    width: 44px;
    margin-bottom: 1px !important;
    margin-top: 0px !important;
    background-repeat: no-repeat;
    cursor: pointer;
    visibility: hidden;
}


#btnSortS2A {
    background-image: url('/frontend/img/sort_S2A.png');
}
#btnSortSA2 {
    background-image: url('/frontend/img/sort_SA2.png');
}
#btnSortA2 {
    background-image: url('/frontend/img/sort_A2.png');
}

#btnSort2A {
    background-image: url('/frontend/img/sort_2A.png');
}


.cardtable {
    float: left;
    width: 540px;
    height: 300px;
    border: black 1px solid;
}

#card_table {
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -270px;
    margin-top: -210px;
    width: 540px;
    height: 300px;
    border: black 0px solid;
}

.trumpcard {
    visibility: hidden;
    position: fixed;
    top: 50%;
    margin-top: -152px;
    margin-left: 0px;
    display: block;
}

#tablesuit {
    position: relative;
    top: -52px;
    left: 3px
    /*margin-top: -20px;
    margin-left: 0px;
    display: block;*/
}



#gameinfo {
    position: fixed;
    left: 5px;
    top: 120px;
    height: 140px;
    width: 200px;
}


.boxstyle {
    background-color: #2c3c11 !important;
    border-radius: 15px !important;
    border: darkolivegreen 2px solid !important;
}



.dialog {
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -102px;
    margin-top: -110px;
    padding: 7px 7px 7px 7px;
    width: 204px;
    height: 120px;
    visibility: hidden;
    text-align:center;

}

#dlgShuffling {
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -102px;
    margin-top: -110px;
    padding: 7px 7px 7px 7px;
    width: 204px;
    height: 100px;
    text-align: center;
    visibility: hidden;
}

#dlgShuffling span{
    position:relative;
    top:35px;
}

#dlgScores {
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -302px;
    margin-top: -280px;
    padding: 7px 7px 7px 7px;
    width: 604px;
    height: 430px;
    visibility: hidden;
    text-align:center;
    overflow: hidden;
}


#scoresClose {
    float:right;
    margin: 0px 0px 0px 0px !important;
}


#scoretable{

}

#dlgLastTrick {
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -271px;
    margin-top: -185px;
    padding: 7px 7px 7px 7px;
    width: 544px;
    height: 240px;
    visibility: hidden;
    text-align:center;
}


#lastTrickClose {
    float:right;
    margin: 0px 0px 0px 0px !important;
}

.leftfloat {
    float: left;
}

#dlgGoingAlone, #dlgBid {
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -120px;
    margin-top: -255px;
    /*background-color: darkolivegreen;*/
    padding: 7px 7px 7px 7px;
    width: 300px;
    height: 370px;
    visibility: hidden;
    text-align: center;
}


.openmiserebutton {
    visibility: hidden;
    background-image: url('/frontend/img/openmisere_button.png');
    position: fixed;
    top: 120px;
    left: 50px;
}

#openmisere_container {
    position: fixed;
    right: 20px;
    visibility: hidden;
}

.openmisere {
    width: 285px;
    height: 80px;
    padding-top: 105px;
    overflow: hidden;
    margin-top: 5px;
}

.openmisere img {
    margin-left: 05px;
    margin-top: -70px;
    height: 90px;
    border: 1px solid black;
    border-radius: 5px;
}

.openmisere span {
    display:block;
    margin-top: -95px;
    margin-bottom: 75px;
    margin-left: 15px;
}


.cardslider {
    width: 152px;
    margin-left: 25px;
    margin-top: 10px;
}


#players {
    position: fixed;
    top: 50%;
    margin-top: -85px;
    left:  50%;
    margin-left: -460px;
    width: 185px;
    height: 200px;
}

.player {
    float:left;
    width: 180px;
    height: 55px;
    background-color: linen;
    border: black 1px solid;
    border-radius: 10px;
    margin-bottom: 4px;
}

/*
#player_1 {

    margin-top: -148px;
    margin-left: -456px;
}

#player_2 {
    margin-top: -66px;
    margin-left: -456px;
}

#player_3 {
    margin-top: 16px;
    margin-left: -456px;
}

 */

.player .name {
    margin: 0px 5px 0px 5px;
    font-size: 18pt;
    color: #2b2b2b;
    text-align: left;
}
.player .score {
    margin: -24px 5px 0px 5px;
    horiz-align: right;
    text-align: right;
    font-size: 14pt;
    color: #2b2b2b;
}

.player .bid {
    margin: 0px 5px 0px 5px;
    font-size: 14pt;
    color: #2b2b2b;
}

#content{
    display: inline-block;
}

#container{
    height: 100%;
    width: 100%;
    text-align: center;
    vertical-align: middle;
}

.sidebar {
    float: left;
    border: black 1px solid;
    background-color: seagreen;
    width: 300px;
}

.suit {
    height: 28px;
    width: 28px;
    background-color: white;
    border: black 1px solid;
    border-radius: 5px;
}


#dlgSetName {
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -132px;
    margin-top: -80px;
    padding: 7px 7px 7px 7px;
    width: 264px;
    height: 40px;
    visibility: hidden;
}


#takeTrick {
    visibility: hidden;
    position: relative;
    left: 120px;
    bottom: 65px;
    width: 140px;
}

#startGame {
    visibility: hidden;
    position: relative;
    left: -38px;
    bottom: 60px;
    width: 140px;
}

.trumpButton {
    height: 28px;
    width: 28px;
    background-color: white;
    border-radius: 5px;
    background-size: contain;

}

.hearts {
    background-image: url('/frontend/img/suit_h.png');
}

.spades {
    background-image: url('/frontend/img/suit_s.png');
}

.diamonds {
    background-image: url('/frontend/img/suit_d.png');
}

.clubs {
    background-image: url('/frontend/img/suit_c.png');
}