/* /////////////////  GLOBAL  ///////////////// */
@font-face 
{
font-family: 'robgravesmedium';
src: url('../fonts/robgraves-webfont.eot');
src: url('../fonts/robgraves-webfont.eot?#iefix') format('embedded-opentype'),
     url('../fonts/robgraves-webfont.woff') format('woff'),
     url('../fonts/robgraves-webfont.ttf') format('truetype'),
     url('../fonts/robgraves-webfont.svg#robgravesmedium') format('svg');
font-weight: normal;
font-style: normal;
}

html, body
{
font-size: 100%;
height:100%;
background:#222;
}

html
{
width:100%; 
}

body
{
margin: 0px auto;
max-width:1024px;
padding:0px 10px;
}

ul
{
list-style-type:none;
}

img
{
border:none;
}

/* /////////////////  HEADER  ///////////////// */

header
{
width:100%;
background:#222;
height:80px;
border-style:solid;
border-width:0px 0px 1px 0px;
border-color:#111;
background-image:url("../img/background/background_cards.png"); 
background-repeat:no-repeat;
background-position:100% 5%;
}

header figure
{
padding:10px 17px 0px 0px;
float:left;
margin:0px;
height:70px;
}

h1
{
width:397px;
color:white;
font-size:22pt;
font-family:"impact", Gadget, sans-serif;
padding:30px 0px 10px 0px;
background-image:url("../img/icon/icon_spadeSmall.png"); 
background-repeat:no-repeat;
background-position:143px 34px
}

h1 span
{
color:#df0000;
font-size:10pt;
font-family:"arial", Gadget, sans-serif;
}

.ace
{
color:white;
font-size:22pt;
font-family:"impact", Gadget, sans-serif;
margin:0px 4px 0px 2px;
visibility:hidden;
}

/* /////////////////  NAVIGATION  ///////////////// */

nav, h3
{
background:#2392d1;
height:22px;
border-style:solid;
border-width:1px 0px 1px 0px;
border-color:#5EB2F2 #000;
}

nav ul
{
float:left;
padding:0px;
height:23px;
}

.navOther
{
float:right;
}

nav ul li
{
float:left;
height:23px;
max-width:160px;
padding: 0px 7px;
margin:0px;
}

nav ul a, h3
{
color:#ffffff;
display:block;
font-family: Arial, sans-serif;
font-size:.6em;
font-weight:normal;
letter-spacing:.06rem;
padding:3.5px;
text-align:left;
text-transform:uppercase;
}

h3
{
padding-bottom:0px;
}

nav ul a:link, nav ul a:visited
{
color:#ffffff;
padding-top:8px;
}

nav ul a:hover
{
color:#93D0F4;
height:16px;
background:url("../graphics/siteAssets/overState.jpg"); 
background-repeat:no-repeat; 
background-position:0px 24px;
padding-top:7px;
margin-top:1px;
}

/* /////////////////  LEFT SIDE COLOMN  ///////////////// */

.colomn
{
clear:both;
border-style:solid;
border-width:2px 0px 0px 0px;
border-color:#25567E;
float:left;
background-color:#222;
width:25%;
height:700px;
}

.colomn div
{
padding:1%;
margin:1% auto;
width:96%;
height:98%;
background:white;
}

#dashboard
{
background:url("../img/background/background_dashboard.jpg");
color:white;
margin:auto;
width:98%;
height:15%;
}

#dashboard table
{
width:100%;
font-size:1em;
font-family: "robgravesmedium", sans-serif;
margin:5% 2% 2% 2%;
overflow:hidden;
}

tr
{
height:15px;
}

td
{
width:30%;
text-align:center;
}

tr:first-of-type
{
height:25px;
}

.rowTitle
{
width:40%;
text-align:left;
padding-left:3%;
}

#chat
{
margin:1% auto;
width:97%;
height:77%;
border-style:solid;
border-width:1px;
border-color:#bbb;
}

#chat p, #chat div
{
font-family: Tahoma, Geneva, sans-serif;
font-size:.85em;
padding:2px 2px 2px 6px;
width:97%;
border-width:1px 0px 1px 0px;
border-style:solid;
border-color:#eee #000 #bbb #000;
margin-bottom:1px;
}

#meldSetup
{
background:#2392d1;
margin:2% auto;
width:97%;
height:4%;
border-style:solid;
border-width:1px;
}

#meldSetup button
{
color:white;
font-family: Arial, sans-serif;
border-width:0px;
font-size:.6em;
font-weight:normal;
letter-spacing:.06rem;
text-transform:uppercase;
float:left;
margin:5px 0px;
text-decoration:underline;
background:none;
width:19%;
}

#meldSetup input
{
width:30%;
float:left;
margin-left:15%;
}

#meldSetup form
{

width:100%;
margin:2px 0px 0px 0px;
}

.playableArea
{
clear:right;
border-style:solid;
border-width:2px 0px 0px 0px;
border-color:#25567E;
background:url("../img/background/background01_MLS.jpg"); 
background-position: -400px -30px;
height:695px;
width:75%;
margin-left:25%;
}


/* *****************  PLAYERS ******************** */

.row
{
/* background:url("../img/background/background_userArea.png");  */
background-repeat:repeat;
width:100%;
height:25%;
float:left;
}

.side
{
width:25%;
height:50%;
}

.user
{
margin:10px 0px 0px 3%;
float:left;
}

.user img
{
box-shadow: 1px 1px 3px #000;
width:48px;
height:48px;
}

.user figcaption
{
color:white;
font-family:Arial;
font-size:.75em;
margin-bottom:8px;
height:15px;
padding:0px 0px 0px 4px;
}


.player
{
width:350px;
background-repeat:repeat;
height:165px;
margin:0% auto;
}

.side .player
{
width:100%;
height:300px;
}

.details 
{
width:100%;
}

.details div
{
font-family:arial;
font-size:.7em;
color:white;
width:35%;
height:9px;
clear:both;
margin:6px 0px 0px 0px;
white-space: nowrap;
}


.small figure
{
width:36px;
height:50px;
background:url("../img/card/allCards_small.png");
box-shadow: 1px 1px 1px #222; 
}

.cardSet   /* defines a generic "set" of cards (typically a row of 10) */
{
clear:both;
height:auto;
margin:0% auto;
position:relative;
width:70%;
z-index:3;
} 


.top .cardSet
{
width:50%;
clear:none;
padding-top:33px;
left:0px;
}

.side .cardSet  
{
width:95%;
left:0px;
top:5px;
}

.side .bottomSet, .row .bottomSet
{
left:-5px;
z-index:4;
position:relative;
top:-32px;
}

.small .cardSet 
{
z-index:none;
top:0px;
width:70%;
}

.outerCard
{
float:left;
width:50px;
}

.small .outerCard
{
float:left;
width:17px;  /* must be smaller than card area to overlap cards */
position:relative;
}

.innerCard
{
width:72px;
height:100px;
background:url("../img/card/allCards.png");
box-shadow: 1px 1px 1px #222; 
}

/* FACE DOWN CARDS */
 
/* .cards
{
float:left;
padding:35px 0px 0px 0px;
height:86px;
width:86px;
}

.side .cards
{
float:none;
padding:35px 0px 0px 60px;
} */

#humanCards
{
color:white;
}
#textCards
{
display:none;
width:100%;
clear:both;
height:20px;
margin-top:5px;
}

.sa
{
background-position:0px -100px;
}

.st
{
background-position:-71px -100px;
}

.sk
{
background-position:-142px -100px;
}

.sq
{
background-position:-214px -100px;
}

.sj
{
background-position:-285px -100px;
}

.da
{
background-position:0px -200px;
}

.dt
{
background-position:-71px -200px;
}

.dk
{
background-position:-142px -200px;
}

.dq
{
background-position:-214px -200px;
}

.dj
{
background-position:-285px -200px;
}


.ca
{
background-position:0px -300px;
}

.ct
{
background-position:-71px -300px;
}

.ck
{
background-position:-142px -300px;
}

.cq
{
background-position:-214px -300px;
}

.cj
{
background-position:-285px -300px;
}

.ha
{
background-position:0px -400px;
}

.ht
{
background-position:-71px -400px;
}

.hk
{
background-position:-142px -400px;
}

.hq
{
background-position:-213px -400px;
}

.hj
{
background-position:-285px -400px;
}

/* FOR SMALL CARDS */

.small .sa
{
background-position:0px -50px;
}

.small .st
{
background-position:-35px -50px;
}

.small .sk
{
background-position:-71px -50px;
}

.small .sq
{
background-position:-107px -50px;
}

.small .sj
{
background-position:-143px -50px;
}

.small .da
{
background-position:0px -100px;
}

.small .dt
{
background-position:-35px -100px;
}

.small .dk
{
background-position:-71px -100px;
}

.small .dq
{
background-position:-107px -100px;
}

.small .dj
{
background-position:-143px -100px;
}


.small .ca
{
background-position:0px -150px;
}

.small .ct
{
background-position:-35px -150px;
}

.small .ck
{
background-position:-71px -150px;
}

.small .cq
{
background-position:-107px -150px;
}

.small .cj
{
background-position:-143px -150px;
}

.small .ha
{
background-position:0px -200px;
}

.small .ht
{
background-position:-35px -200px;
}

.small .hk
{
background-position:-71px -200px;
}

.small .hq
{
background-position:-106px -200px;
}

.small .hj
{
background-position:-143px -200px;
}

.centerTableBorder
{
float:left;
width:50%;
height:50%;
}

#centerTable .row
{
background:none;
width:100%;
}

#centerTable .side
{
width:50%;
float:left;
}

#centerTable .outerCard
{
width:100%;
/* width:72px; */
height:100px;
}

#centerTable .innerCard
{
margin:0px auto;
width:72px;
height:100px;
}

footer
{
clear:both;
width:100%;
}


#knownBugs 
{
clear:both;
width:100%;
color:white;
font-family: Arial, sans-serif;
font-size:8pt;
letter-spacing:.06rem;
height:300px;
margin-top:15px;
}

#knownBugs li
{
margin-top:5px;
}

h3
{
font-weight:bold;
margin-bottom:10pt;
}





@media all and (max-width: 400px) and (min-width: 0px) {

h1
{
width:300px;
padding:15px 0px 10px 0px;
background-position:143px 19px
}

nav, nav ul, .navOther
{
background:#2392d1;
height:auto;
padding:0px;
margin:0px;
width:100%;
}



nav ul li
{
float:none;
height:23px;
min-width:100%;
padding:0px;
margin:0px;
border-width:0px 0px 1px 0px;
border-style:solid;
border-color:#5EB2F2;
}