* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 12px Helvetica, Arial; 
/*background-image: url("floor_mom.jpg");*/
background-color:white;
}


#lout:hover {
cursor: pointer;

}

.collapsing {
display:none;
}

#cardTable {
 margin: 0%; 
 padding: 0;
}

#ty_auto:hover, #sp_auto:hover, #np_auto:hover, #activePlayers:hover, #chat:hover, #pms:hover {
background-color: gray;
cursor:pointer;
}



.table_header:hover {
cursor: pointer;
}

.table_header {
text-decoration: underline;
text-align: center;
}

.tab_head {
text-align: center;
}

.standard_card {
text-align: center;
font-size: 100%;
}

.lead_card {
text-align: center;
font-weight: 900;
font-size: 125%;
}

.standard_card:hover {
cursor: pointer;
background-color: #d3d3d3;
}

.btn:hover {
background-color: #d3d3d3;
}

#serverMessageHover:hover {
cursor:pointer;
}


#leaveTable:hover, #startGame:hover, #admin:hover, #pick:hover,
#pass:hover, #crack:hover, #blackBlitz:hover, #redBlitz:hover, #blackCrack:hover,
#redCrack#hover, #buryCards:hover, #reset:hover, #clubs_call:hover, #hearts_call:hover,
#spades:hover, #along_call:hover, #choose_under:hover, #bootStaller:hover {
color: white;
background-color: red;
border: 1px solid red;
font-size: 150%;
}


#header-wrap {
background: rgba(0,0,0,.6);
position: fixed;
color: white;
visibility: hidden;
width: 80%;
height: 50px;
top: 0;
z-index: 1;
}




div.opponents {
vertical-align: top;
display: none;
text-align: center;


}



#dealer0 {
border: 1px solid black;
display: block;
position: absolute;
background-color: gray;

}

#dealer1 {
border: 1px solid black;
display: block;
position: absolute;
background-color: gray;

}

#dealer2 {
border: 1px solid black;
display: block;
position: absolute;
background-color: gray;

}

#dealer3 {
border: 1px solid black;
display: block;
position: absolute;
background-color: gray;

}

#dealer4 {
border: 1px solid black;
display: block;
position: absolute;
background-color: gray;

}

#isDealer1 {
border: 1px solid black;
display: block;
position: absolute;
background-color: gray;
}

#isDealer2 {
border: 1px solid black;
display: block;
position: absolute;
background-color: gray;
}

#isDealer3 {
border: 1px solid black;
display: block;
position: absolute;
background-color: gray;
}

#isDealer4 {
border: 1px solid black;
display: block;
position: absolute;
background-color: gray;

}


.list-group-item {
text-align: center;
}

.list-group-item:hover {
cursor:pointer;
background-color: #D3D3D3;

}



div.card0 {
position: absolute;
top: 40%;
left: 45%;
height: 8%;
width: 5%;
text-align: center;
}

div.card1 {
position: absolute;
top: 35%;
left: 20%;
height: 8%;
width: 5%;
text-align: center;

transform: rotate(270deg);
}
div.card2 {
position: absolute;
top: 0%;
left: 35%;
height: 8%;
width: 5%;
text-align: center;
}
div.card3 {
position: absolute;
top: 0%;
left: 50%;
height: 8%;
width: 5%;
text-align: center;
}
div.card4 {
position: absolute;
top: 30%;
left: 70%;
height: 8%;
width: 5%;
text-align: center;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}


#card0 {
padding: 0px;
margin: 0px;
width: 55px;
height: 70px;

}


#pos1 {
/*   -webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);*/
margin-left: 10px;

}

#pos4 {
/*   -webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);*/
margin-right: 10px;
}



#card1 {
padding: 0px;
margin: 0px;  
width: 55px;
height: 70px;

}


#card2 {
padding: 0px;
margin: 0px;
width: 55px;
height: 70px;

}

#card3 {
padding: 0px;
margin: 0px;
width: 55px;
height: 70px;

}

#card4 {
padding: 0px;
margin: 0px;
width: 55px;
height: 70px;

}
/*
#pos4 {
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
*/


#words0:hover {
cursor: pointer;
}

#words1:hover {
cursor: pointer;

}

#words2:hover {
cursor: pointer;

}

#words3:hover {
cursor: pointer;

}

#words4:hover {
cursor: pointer;

}


#words {
display: block;

}
#pts {
display: block;
}


#pickNot0 {
display: block;
position: absolute;
margin-left: 3px;
}


#pickNot1 {
display: block;
position: absolute;
margin-left: 3px;
}

#pickNot2 {
display: block;
position: absolute;
margin-left: 3px;
}

#pickNot3 {
display: block;
position: absolute;
margin-left: 3px;
}

#pickNot4 {
display: block;
position: absolute;
margin-left: 3px;
}


.playerHand {
display: inline-block;
position: absolute;
width: 100%;
left: 0%;
top: 70%;
}

#blind {
   text-align: justify;
}

#blind img{
   padding: 5px;
   display: inline-block;
   height: 85px;
   width: 60px;
}
#blind:after{
   content: '';
   display: inline-block;
   
}

#hand {
   text-align: justify;
}

#hand img{
   padding: 5px;
   display: inline-block;
}
#hand:after{
   content: '';
   display: inline-block;
   
}

.glyph_turn {
width: 55px;
height: 70px;
border-style: solid;
border-color: #FFFFF2;
font-size: 4em;
color: #FF007F;
margin-top: 10px;
}


img{
width: 55px;
height: 70px;
}

#hand {
   height: 87px;
}


@media (min-width: 768px) {

#cardTable {
 margin-left: 0%; 
 padding: 0;
}


#hand0, #hand1, #hand2, #hand3, #hand4, #hand5, #hand6, #hand7, #hand8, #hand9, #hand10, #hand11{
width: 12%;
height: 83px;
}

.glyph_turn {
width: 70px;
height: 85px;
border-style: solid;
border-color: #FFFFF2;
font-size: 6em;
color: #FF007F;
}

#hand {
   height: 85px;
}

.profLinks span {
cursor:pointer;

}

#hand0:hover, #hand1:hover, #hand2:hover, #hand3:hover, #hand4:hover, #hand5:hover, #hand6:hover, #hand7:hover, #hand8:hover, #hand9:hover, #hand10:hover, #hand11:hover{
width:13%;
height: 95px;
}
#card0, #card1, #card2, #card3, #card4 {
padding: 0px;
margin: 0px;
width: 70px;
height: 85px;
}

}

@media (min-width: 992px) {
#cardTable {
 margin-left: 0%; 
 padding: 0;
}

#hand0:hover, #hand1:hover, #hand2:hover, #hand3:hover, #hand4:hover, #hand5:hover, #hand6:hover, #hand7:hover{
width:13%;
height: 115px;
}
#hand {
   height: 102px;
}

.glyph_turn {
width: 70px;
height: 85px;
border-style: solid;
border-color: #FFFFF2;
font-size: 6em;
color: #FF007F;
}


#hand0, #hand1, #hand2, #hand3, #hand4, #hand5, #hand6, #hand7, #hand8, #hand9, #hand10, #hand11{
width: 12%;
height: 110px;
}
#card0, #card1, #card2, #card3, #card4 {
padding: 0px;
margin: 0px;
width: 70px;
height: 85px;  
}


}




@media (min-width: 2000px) {
#cardTable {
 margin-left: -20%; 
 padding: 0;
}

#hand0:hover, #hand1:hover, #hand2:hover, #hand3:hover, #hand4:hover, #hand5:hover, #hand6:hover, #hand7:hover, #hand8:hover, #hand9:hover, #hand10:hover, #hand11:hover{
width:13%;
height: 220px;
}
#hand {
   height: 200px;
}

.glyph_turn {
width: 140px;
height: 170px;
border-style: solid;
border-color: #FFFFF2;
font-size: 6em;
color: #FF007F;
}


#hand0, #hand1, #hand2, #hand3, #hand4, #hand5, #hand6, #hand7{
width: 12%;
height: 200px;
}
#card0, #card1, #card2, #card3, #card4 {
padding: 0px;
margin: 0px;
width: 140px;
height: 170px;  
}


}







.pickBtn {
display: inline-block;
position: absolute;
top: 50%;
left: 0%;
visibility: hide;
}




.mess {
   position: relative; 
}
#m {position: fixed; margin-left: 50%; height: 5%; bottom: 5%; padding: 0px; width: 40%; overflow-y: scroll;}
#chatButton { position: fixed; width: 9%; height: 5%; bottom: 5%; margin-left: 90%; background: rgb(130, 224, 255); border: none;  }
#msgs {position: fixed; margin-left: 50%; height: 20%; bottom: 10%; padding: 0px; width: 49%; overflow-y: scroll; background: #eee;}


/*      div.foot {
  position: absolute; top:98%;
}
*/
.tableView {
display: none;
}

.panel.panel-primary {
position: absolute;
bottom: 0%;
margin-left: 50%;
margin-top: 20%;
width: 70%;


}







.chat
{
list-style: none;
margin: 0;
padding: 0;
}

.chat li
{
margin-bottom: 10px;
padding-bottom: 5px;
border-bottom: 1px dotted #B3A9A9;
}

.chat li.left .chat-body
{
margin-left: 60px;
}

.chat li.right .chat-body
{
margin-right: 60px;
}

.chat-image.pull-right {
margin-left: 80%;

}

#circleRt {
margin-left: 90%;

}

.serverMsg {
text-align: center;
color: blue;

}

.chat li .chat-body p
{
margin: 0;
color: #777777;
}

.panel .slidedown .glyphicon, .chat .glyphicon
{
margin-right: 5px;

}

.body-panel
{
overflow-y: scroll;
height: 125px;

}

::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}

::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}