
.userMsg span, #helpMsgHead {   
	display: table-cell; 
	vertical-align: middle; 

	/* if 'display' appears to set a color to ffff99 temporarily - look at jquery-ui highlight... */
}
#helpMsgHead {font-weight:bold}
#gameTable, #gameSelector{
	opacity:.99;
	border-spacing:0;
}
.gameSquare {
	cursor:pointer;
	border-style: solid;
	border-color: gray;
	border-width: 0;

    text-align:center;
    align-content: center;
    align-items: center;
}
.gameSquareRowM .gameSquare {
	border-width: 2 0 2 0;
}
.gameSquareM{
	border-width: 0 2 0 2;
}
.gameSquareRowM .gameSquareM {
	border-width: 2;
}

#gameSelector{
	border-radius:8%;
}
.selectSquare {
	cursor:pointer;
	border-style: solid;
	border-color: gray;
	border-width: 0;
}
.selectGameRowM .selectSquare {
	border-width: 2 0 2 0;
}

.actionBtn,#settingsTable,.user0Icon,.user1Icon,.player0NameSpan,.player1NameSpan,.p0WinsCount,.p1WinsCount,#userMsgTable,#prefsTable
{
    z-index:110;
}


/* #ebc932 or rgba(235, 201, 50, 0.89) - sweet gold color... */
/* #daa520 or rgba(218, 165, 32, 0.89) - sweeter */
/* 255, 215, 0, 0.690  -ok */ 

/* new light blue: 144,222,222 */
 
/*  #gameSelector {background: rgba(0, 190, 250, 0.199);} */
#gameSelector {background: rgba(0, 162, 190, 0.99) /* rgba(50, 186, 235, 0.19); rgba(235, 201, 50, 0.190); */ }

#gameTable {background: rgba(235, 201, 50, 0.692);} /* general background - basically when gameshowOff */
#gameTable.gameShowOn {background: transparent;} /* transparent so that gameshow-background ui looks better */

#gameInfoTable /* #mainGameTitleTD, #gameInfoTable, mainGameTitleImg, #shareLink2 */
{
    /* golden - rgba(218, 165, 32, 0.890);
       bluish - rgba(144, 222, 222, 0.950);
       etc    - rgba(255, 201, 111, 1)
    */
    background: rgba(0, 196, 231, 0.99);

    border-radius: 10px;
}
#shareLink2{color:rgba(100, 84, 19, 0.99); /* white */}

#userMsgTableParent { /*background: rgba(255, 215, 0, 0.019); */  opacity:.99; }
#sideTable {/*background: rgba(255, 215, 0, 0.019);  */ opacity:.99; margin-right:0; }
#settingsTable,#selectCharacterDiv{
    /*  background:cyan;
        background: rgba(0, 215, 0, 0.99);
        background: rgba(0, 195, 0, 0.99);
        background: rgba(0, 215, 255, 0.99);
     */
    background: rgba(20, 135, 155, 0.99);

    margin:0;
}
#selectCharacterTable,#selectCharacterDiv{
	border-radius:30px;
}
#settingsDiv{
    background:transparent;bottom:0;right:0;z-index:-20;position:absolute;
} 

.gameInfoHighlight{/*color: rgba(0, 34, 71, 0.54);*/ font-style: italic;}

.p0WinsCount,.p1WinsCount {padding-right:0px}
.player0NameSpan,.player1NameSpan {padding-right:0px}

img{border:none;}
img.map{
	outline: none;
}

#mapImg {
	border: none;
	height: auto;
	max-width: 100%;
	width: 100%;
}

#selectGameDlg {
	overflow:hidden;
    background-color:transparent;
}

.gameSelectArea{
    cursor:pointer;
    text-align:center;
    display: table-cell; 
    vertical-align:middle;
}

.gameSelText{
    display: table-cell; 
    vertical-align: middle;
	text-align:center;
    padding:0; margin:0;
}

.gameDetailsRow{
    height:20px;
}

/* TODO: fix this...
#learnMoreBtn .infoShown
{
	opacity:0.75;
}
*/

#bodySub{
	width:100%;
	height:100%;
	border:0;
	margin:0;
	overflow:hidden;
}

body{
	font-family: "Verdana", "Arial", "Times New Roman", "Trebuchet MS", "sans-serif";
	/* font-size: 62.5%; why? */
	width:100%;
	height:100%;
	border:0;
	margin:0;
	overflow:hidden;
    background:#444444;
    color:white;
}

.bkground{
	position:absolute;
	width:100%;
	height:100%;
	border:0;
	margin:0;
	overflow:hidden;
	opacity:0.2;
}

/*	#outerTable{border:10}  - interesting raised look */

/* jqui
.ui-widget-overlay{display:none}
*/

#stealthCount, #backgroundVolume, #effectsVolume /* .digitSpinner - don't use class. go direct to override jqui css */
{
    text-align: center;
    border-style:none;
}

.buyBtn {
	-moz-box-shadow:inset 0px 1px 0px 0px #f9eca0;
	-webkit-box-shadow:inset 0px 1px 0px 0px #f9eca0;
	box-shadow:inset 0px 1px 0px 0px #f9eca0;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ebc932), color-stop(1, #edcd91) );
	background:-moz-linear-gradient( center top, #ebc932 5%, #edcd91 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebc932', endColorstr='#edcd91');
	background-color:#ebc932;
	text-indent:0;
	border:1px solid #e6d5d1;
	display:inline-block;
	color:#d40808;
	font-weight:bold;
	font-style:normal;
	text-decoration:none;
	text-align:center;
	text-shadow:1px 1px 0px #ded17c;
}
.buyBtn:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #edcd91), color-stop(1, #ebc932) );
	background:-moz-linear-gradient( center top, #edcd91 5%, #ebc932 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#edcd91', endColorstr='#ebc932');
	background-color:#edcd91;
}
/*
.tobuy {
}
.setoff {
}
.seton {
}
*/

/* for prefs/etc buttons */
.disabled {
    color: gray;
    opacity:.4;
}
.actionBtn, .purchaseHelpBtn, .buttonSettingInfoTD, .buyBtnLabel, .shareLink
{
    cursor:pointer;
}
hr{margin: 2 10 2 10;}
.gameTitleHozrule{margin: 0 10 -2 10;}
#midGameInfoHr{margin: 10 0 5 0;}
#eachSettingTable, #purchaseTable, #moreInfoTable{margin: 0 0 -7 0; width:100%; padding-left:5px;}

.alertifyHeadTb{margin:-10 0 5 0}
.alertify-text{text-align:center; }
.alertify-message,.alertify-log,.alertify-text-wrapper{overflow:hidden;background: rgba(20, 135, 155, 0.99); /* #8A86F7 f0f0f0*/ color:white;}
.alertify-log-success{background:#18A808}
.alertify-log-error{background:#BF3F3F}
/*only using 1 button now, so will hide and use the click-away option for closing - see handleGenericClick */
/* will add a class for confirm dialogs so that the OK on those will be shown... */
.alertify-button-ok{display:none}
.alertify-confirm-button-ok{display:initial}

a{color:rgb(0, 0, 185); text-decoration:none}
#showFullCopyright{color:rgb(0, 0, 185); text-decoration:none}

/* for some droids, had to add the specific class anyway 
    TODO: maybe add !important below jic */
    * {-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; -webkit-user-select: none;}
    .alertify, .alertify-cover, .gameSquare{ -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; -webkit-user-select: none;}
/* ------ */

.stealthMsgLogNote
{
    font-size:medium;
    /* color:#222222; white is good actually - background now blue */
    width:100%;
    text-align:center;
}

/* keep the logs small - override the @media setting in alertify) */
.alertify-logs { max-width: 300; width: initial; cursor:pointer}

.alertify{cursor:pointer}

/* will add some color so each player can easily tell whose turn it is */
#gameTable{border:8px solid transparent}

.gameShowOn { /* for gameShowTable really */

	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d9edf7), color-stop(1, #2f1bf7) );
	background:-moz-linear-gradient( center top, #d9edf7 5%, #2f1bf7 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d9edf7', endColorstr='#2f1bf7');
	background-color:#d9edf7;
    background-size: cover;
    border-radius: 8%;
    /* #gameShowTable 
        background-image: url(images/border1.png);
        border-spacing:10 - or 20 for large - but needs massaging
    */
}
.gameShowOff { /* for gameShowTable really */

   	background: transparent;
}

#selectCharacterDiv
{
    width: 295px; /* now that there are 9+ item */
    height: 325px; /* override other height from elswhere - but initial wont cut it */
    max-height: 330px;
    min-height: 290px;
    right:0;
    bottom:0;
}

/* ================================== */
/* Networked stuff - changing players */
.user0IconTD,.user1IconTD,#eachCharacterTable,#characterTableParentDiv, #gameInfoTable, #userMsgTable {
	cursor:pointer;
}
/* ================================== */

.undesiredCharBtn,.desiredCharBtn {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-border-top-left-radius:9px;
	-moz-border-radius-topleft:9px;
	border-top-left-radius:9px;
	-webkit-border-top-right-radius:9px;
	-moz-border-radius-topright:9px;
	border-top-right-radius:9px;
	-webkit-border-bottom-right-radius:9px;
	-moz-border-radius-bottomright:9px;
	border-bottom-right-radius:9px;
	-webkit-border-bottom-left-radius:9px;
	-moz-border-radius-bottomleft:9px;
	border-bottom-left-radius:9px;
	text-indent:-1.39px;
	border:1px solid #dcdcdc;
	display:inline-block;
	font-family:arial;
	font-size:14px;
	font-weight:bold;
	font-style:italic;
	height:28px;
	line-height:28px;
	width:60px;
	text-decoration:none;
	text-align:center;
	text-shadow:1px 1px 0px #ffffff;
}
.desiredCharBtn {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #3835f2), color-stop(1, #0b363b) );
	background:-moz-linear-gradient( center top, #3835f2 5%, #0b363b 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3835f2', endColorstr='#0b363b');
	background-color:#3835f2;
	color:rgb(253, 193, 2);
}
.undesiredCharBtn {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bd6f57), color-stop(1, #4a1010) );
	background:-moz-linear-gradient( center top, #bd6f57 5%, #4a1010 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bd6f57', endColorstr='#4a1010');
	background-color:#bd6f57;
	color:rgb(253, 193, 2);
}
.undesiredCharBtn:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4a1010), color-stop(1, #bd6f57) );
	background:-moz-linear-gradient( center top, #4a1010 5%, #bd6f57 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4a1010', endColorstr='#bd6f57');
	background-color:#4a1010;
}
.desiredCharBtn:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #0b363b), color-stop(1, #3835f2) );
	background:-moz-linear-gradient( center top, #0b363b 5%, #3835f2 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0b363b', endColorstr='#3835f2');
	background-color:#0b363b;
}
.undesiredCharBtn:active,.desiredCharBtn:active  {
	position:relative;
	top:1px;
}

#iconForCharacterBtn {color: yellow}
#nameForCharacterBtn {color: orange}
#appIdForCharacterBtn {color: rgb(128, 85, 9)}
#removeCharacterBtn {color: rgb(231, 107, 128); font-size:12px;}

p {
-webkit-margin-before: 0.4em;
-webkit-margin-after: 0px;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}

