BODY, #BODY
{
padding: 0;
margin: 0;
overflow: hidden;
//background-color: black;
font-family: Arial;
}

BODY
{
background-color: black;
}

* {outline:none;}

H1
{
font-size: 14px;
font-weight: bold;
margin: 10px;
}

.U
{
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}


.UUXX
{
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
}

.XXUU
{
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
}

.UXXU
{
border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
}

.XUUX
{
border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
}

.UXXX
{
border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
}

.XUXX
{
border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
}

.XXUX
{
border-radius: 0 0 5px 0;
-moz-border-radius: 0 0 5px 0;
-webkit-border-radius: 0 0 5px 0;
}

.XXXU
{
border-radius: 0 0 0 5px;
-moz-border-radius: 0 0 0 5px;
-webkit-border-radius: 0 0 0 5px;
}

.txt00
{
font: 10px monospace;
font-weight: normal;
}

.txt0
{
font-family: Verdana,Arial;
font-size: 9px;
font-weight: normal;
}

.txt2
{
font-size: 12px;
}

.txt3
{
font-size: 15px;
}

.bold0 {font-family: Verdana; font-size: 6.5px; font-weight: bold; line-height: 15px;}

#myLifesDIV, #opLifesDIV
{
position: relative;
top: -16px;
left: 68px;
width: 38px;
background: white;
opacity: 0.95;
border: #CCCCCC 1px solid;
padding:0;
margin:0;
z-index: 100;
}

#myLifesSelector
{
margin: 0;
padding: 0;
position: absolute;
display: none;
left: -1px;
top: -241px;
width: 38px;

cursor: pointer;
}

#myLifesSelector LI
{
height: 22px;
width: 100%;
list-style: none;
}

#myLifesSelector LI.selectable.plus
{
color: #aaff56;
}

#myLifesSelector LI.selectable.minus
{
color: #ffaa56;
}

#myLifesSelector LI.selectable
{
text-align: center;
border: 1px solid #333333;
border-top-style: none;
font-size: 80%;
color: #CCCCCC;
font-weight: bold;
height: 20px;
width: 100%;
background-color: #666666;
padding-top: 3px;

cursor: pointer;
}

#myLifes, #opLifes
{
width: 38px;
height: 20px;
font-weight: bold;
}

#myLifes
{
cursor: pointer;
}

.ShadowField
{
// background-color: #000000; opacity: 1;
background: url('../fondot.gif');
}

#op-bg, #my-bg
{
	background: no-repeat center center fixed;
}

.card 
{
height: 80px;
width: 56px;
}

.inLib:not(.beforeAnimateFlyTo):not(.card_sealed) .card
{
height: 80px;
width: 56px;
z-index: 1 !important;
}

.inLib:not(.ui-draggable-dragging):not(.card_sealed)
{
z-index: 1 !important;
}

.inLib:not(.ui-draggable-dragging):not(.CardSelector):not(.beforeAnimateFlyTo):not(.card_sealed)
{
left: 10px !important;
}

.inOut:not(.ui-draggable-dragging):not(.beforeAnimateFlyTo) .card,
.inGrave:not(.ui-draggable-dragging):not(.beforeAnimateFlyTo) .card,
.inOut:not(.ui-draggable-dragging):not(.CardSelector):not(.beforeAnimateFlyTo),
.inGrave:not(.ui-draggable-dragging):not(.CardSelector):not(.beforeAnimateFlyTo)
{
height: 40px !important;
width: 28px !important;
}

.inOut:not(.ui-draggable-dragging):not(.CardSelector):not(.beforeAnimateFlyTo),
.inGrave:not(.ui-draggable-dragging):not(.CardSelector):not(.beforeAnimateFlyTo)
{
position: absolute !important;
z-index: 1 !important;
left: 23px !important;
}

.my-card, .op-card
{
padding: 0;
margin 0;
position: absolute;
left: 10px;
}

.op-card IMG {cursor: default;}
.my-card IMG {cursor: pointer;}
.op-card IMG, .my-card IMG 
{
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

#CardPicture, .CardPicture
{
width: auto;
height: auto;

max-width: 265px;
max-height: 370px;

border-radius: 13px;
-moz-border-radius: 13px;
-webkit-border-radius: 13px;
}

.A {text-decoration: underline; cursor: pointer;}

.INFO {cursor: help;}

.counter {width: 48px;}
.counter-dropped
{
width: 20px;
height: 20px;
background-size: 20px 20px;
text-shadow: 0px 0px 3px #000000;
font: bold 11px Verdana;
text-align: center;
padding-top: 3px;
background-repeat: no-repeat;
color: #FFFFFF;
cursor: crosshair;
z-index:1;
}

.counter-dropped-1 {background-image: url("../counters/counter-1.png");}
.counter-dropped-2 {background-image: url("../counters/counter-2.png");}
.counter-dropped-3 {background-image: url("../counters/counter-3.png");}
.counter-dropped-4 {background-image: url("../counters/counter-4.png");}
.counter-dropped-5 {background-image: url("../counters/counter-5.png");}

.counter-dropped-position-1 {position: absolute; top: 55%; left: 2%;}
.counter-dropped-position-2 {position: absolute; top: 65%; left: 40%;}
.counter-dropped-position-3 {position: absolute; top: 50%; left: 80%;}
.counter-dropped-position-4 {position: absolute; top: 75%; left: 10%;}
.counter-dropped-position-5 {position: absolute; top: 70%; left: 70%;}

#my_avatar_div .counter-dropped-position-1, #op_avatar_div .counter-dropped-position-1 
{position: absolute; top: 87px; left: -2px;}
#my_avatar_div .counter-dropped-position-2, #op_avatar_div .counter-dropped-position-2
{position: absolute; top: 67px; left: -2px;}
#my_avatar_div .counter-dropped-position-3, #op_avatar_div .counter-dropped-position-3
{position: absolute; top: 87px; left: 18px;}
#my_avatar_div .counter-dropped-position-4, #op_avatar_div .counter-dropped-position-4
{position: absolute; top: 47px; left: -2px;}
#my_avatar_div .counter-dropped-position-5, #op_avatar_div .counter-dropped-position-5
{position: absolute; top: 87px; left: 38px;}

#Phases IMG
{
width: 36px;
margin: 1px 0 0 2px;
cursor: pointer;
}

.Phase_Selected
{
opacity: 1;
box-shadow: 0px 0px 10px 5px #ffc000;
-moz-box-shadow: 0px 0px 10px 5px #ffc000;
-webkit-box-shadow: 0px 0px 10px 5px #ffc000;
}

.tapped 
{
//transform: rotate(90deg);
//-webkit-transform: rotate(90deg);
//-moz-transform: rotate(90deg);
//-o-transform: rotate(90deg);
	
// height:expression("180px");
// width:expression("110px");
}

.untapped-temperary
{
transform: rotate(0deg);
-webkit-transform: rotate(0);
//-moz-transform: rotate(0);
//-o-transform: rotate(0);
}

.untapped-temperary .card
{
opacity: 0.5
}

.inPlay.my-card .card, .inHand.my-card .card, .myCardShadow
{
box-shadow: 3px 3px 3px #333;
-moz-box-shadow: 3px 3px 3px #333;
-webkit-box-shadow: 3px 3px 3px #333;
}

.tapped.my-card .card
{
box-shadow: 3px 3px 3px #333;
-moz-box-shadow: 3px 3px 3px #333;
-webkit-box-shadow: 3px -3px 3px #333;
}

.Token.my-card .card, .myTokenShadow
{
box-shadow: 3px 3px 3px #0b0b4d;
-moz-box-shadow: 3px 3px 3px #0b0b4d;
-webkit-box-shadow: 3px 3px 3px #0b0b4d;
}

.Token.tapped.my-card .card
{
box-shadow: 3px 3px 3px #0b0b4d;
-moz-box-shadow: 3px 3px 3px #0b0b4d;
-webkit-box-shadow: 3px -3px 3px #0b0b4d;
}

.inPlay.op-card .card:not(.CursorSelected), .inHand.op-card .card
{
box-shadow: 2px 2px 3px #CC0000;
-moz-box-shadow: 2px 2px 3px #CC0000;
-webkit-box-shadow: 2px 2px 3px #CC0000;
// filter: progid:DXImageTransform.Microsoft.Shadow(color='#CC0000', Direction=145, Strength=3);
}

.tapped.op-card:not(.CursorSelected) .card
{
box-shadow: 2px -2px 3px #CC0000;
-moz-box-shadow: 2px -2px 3px #CC0000;
-webkit-box-shadow: 2px -2px 3px #CC0000;
// filter: progid:DXImageTransform.Microsoft.Shadow(color='#CC0000', Direction=145, Strength=3);
}

.Token.op-card .card
{
box-shadow: 3px 3px 3px #15520e;
-moz-box-shadow: 3px 3px 3px #15520e;
-webkit-box-shadow: 3px 3px 3px #15520e;
}

.Token.tapped.op-card .card
{
box-shadow: 3px 3px 3px #15520e;
-moz-box-shadow: 3px 3px 3px #15520e;
-webkit-box-shadow: 3px -3px 3px #15520e;
}

.ui-selected.my-card.inPlay .card, .CursorSelected:not(.tapped) .card
{
box-shadow: 3px 3px 3px #F3F300 !important;
-moz-box-shadow: 3px 3px 3px #F3F300 !important;
-webkit-box-shadow: 3px 3px 3px #F3F300 !important;
// filter: progid:DXImageTransform.Microsoft.Shadow(color='#F3F300', Direction=145, Strength=3);
}

.tapped.ui-selected.my-card.inPlay .card, .tapped.CursorSelected  .card
{
box-shadow: 2px -2px 3px #F3F300 !important;
-moz-box-shadow: 2px -2px 3px #F3F300 !important;
-webkit-box-shadow: 2px -2px 3px #F3F300 !important;
// filter: progid:DXImageTransform.Microsoft.Shadow(color='#F3F300', Direction=145, Strength=3);
}

.highlighted
{
box-shadow: 2px 2px 15px 10px #ffc000;
-moz-box-shadow: 2px 2px 15px 10px #ffc000;
-webkit-box-shadow: 2px 2px 15px 10px #ffc000;
// filter: progid:DXImageTransform.Microsoft.Shadow(color='#ffc000', Direction=145, Strength=30);
}

.highlightedIN
{
box-shadow: inset 0px 0px 20px 5px #ffc000;
-moz-box-shadow: inset 0px 0px 20px 5px #ffc000;
-webkit-box-shadow: inset 0px 0px 20px 5px #ffc000;
// filter: progid:DXImageTransform.Microsoft.Shadow(color='#ffc000', Direction=145, Strength=30);
}

.Drop_Acceptable_Here
{
transform: scale(1.05);
-webkit-transform: scale(1.05);
//-moz-transform: scale(1.05, 1.05);
//-o-transform: scale(1.05, 1.05);
}

.ui-dialog
{
box-shadow:  3px 3px 5px #666;
-moz-box-shadow:  3px 3px 5px #666;
-webkit-box-shadow: 3px 3px 5px #666;
}

#Chat .CardAction TR:hover
{
background-color: #ffd456;
}

.my-chat
{background-color: #DFDFDF;
}

.op-chat
{background-color: #FFFFFF;
height: 10px;
}

.op-chat-new
{background: #ffff56;
}

.zoneDropAcceptable
{
background-color: #333333;
}

.ui-selectable-helper { position: absolute; z-index: 1000000 !important; border:1px dotted black; }

._jsPlumb_endpoint {z-index:1; opacity: 0.6;}
._jsPlumb_endpoint:hover{cursor: crosshair;}
._jsPlumb_connector {z-index:1000; opacity: 0.7;}
._jsPlumb_connector:hover{cursor: pointer;}
.jsPlumb_hidden {opacity: 0;}

.jsPlumb_dragActive {opacity: 0.3;}


.plus
{
background: #d4ffaa;
}

.minus
{
background: #ffd4aa;
}

.power, .power_new
{
position: absolute;
bottom: 2px;
right: 2px;
text-align: right;
background: #EEEEEE;
padding: 0 4px 0 4px;
width: auto;
font-size: 10px;
font-weight: bold;
}

.power_new
{
background: #FFFFAA;
color: #7f0000;
}

.power_chat, .power_new_chat
{
text-align: right;
background: #EEEEEE;
padding: 0 4px 0 4px;
width: auto;
font-size: 10px;
font-weight: bold;
}

.power_new_chat
{
background: #FFFFAA;
color: #7f0000;
}

.cost
{
position: absolute;
top: 3px;
right: 2px;
text-align: right;
}

.cost IMG
{
box-shadow: 0px 0px 10px 0px #fff;
-moz-box-shadow: 0px 0px 10px 0px #fff;
-webkit-box-shadow: 0px 0px 10px 0px #fff;
}

.card-dialog-selector
{
width: 200px;
height: 17px;
margin: 0 3px 3px 0;
padding: 2px;
border: #CCCCCC 1px solid;
background: #FFFFFF;

box-shadow: 2px 2px 2px #666;
-moz-box-shadow: 2px 2px 2px #666;
-webkit-box-shadow: 2px 2px 2px #666;
}

.card-dialog-selector.blank
{
background: url('../my-card-blank.jpg');
background-size: 200px 17px;
}

.card-dialog-selector:not(.blank):hover
{
background: #FFFF56;
cursor: pointer;
}

#WzTtDiV
{
opacity: 0.95
}

#WzTtDiV TABLE
{
width: 100%;
border: 0;
margin: 0;
padding:0;
}

#WzTtDiV TH {font-size: 15px; padding: 0; text-align: left; font-weight: bold; height: 23px; vertical-align: top;}
#WzTtDiV TD {font-size: 11px; padding: 0; vertical-align: top;}
#WzTtDiV  HR {margin: 10px 0 10px 0;}

.mana
{
	width: 17px;
	height: 17px;
	margin-left: 1px;
	vertical-align: top;
}

.mana-chat
{
	width: 11px;
	height: 11px;
	margin-left: 1px;
	vertical-align: middle;
}

.big-avatar
{
	position: relative;
	width: 100px;
	height: 100px;
	background-color: #000;
	margin-left: 2px;
}

#op_avatar, #my_avatar
{
	width: 100px;
	height: 100px;
	border: #CCCCCC 3px solid;
}

.showTurn
{
position: absolute;
top: 2px;
left: 74px;
width: 30px;
height: 30px;
display: none;
}

.ChatCardPic
{
	width: 21px;
	height: 30px;
}

#my-card-change-p, #my-card-change-t
{
width: 35px; 
height: 20px;
text-align: center;
}

#my-card-change-text, #my-card-change-type
{
background-color: #F5F5F5;
}

HR {
    color: #555; /*для IE */
    background-color:#555; /*для Firefox, Opera, Safari*/
    border:0px none;
    height:1px; /* высота 1px IE, Firefox, Opera, Safari */
    clear:both; /* для очистки, если тег идет после float элемента */
}

#ChatInput
{
width: 225px;
margin: 0 0 3px 0;
}

#Dice
{
position: absolute;
top: 50%;
right: 285px;
width: 40px;
height: 45px;
margin-top: -23px;
z-index: 1000;
}

#Counters
{
position: absolute;
top: 50%;
left: 160px;
width: 240px;
margin-top: -22px;
z-index: 1010;
}

#Counters .counter
{
 margin: 0;
 width: 48px;
 height: 48px;
 float: left;
 font-size: 18px;
 line-height: 45px;
 font-family: verdana;
 font-weight: bold;
 text-align: center;
 padding: 0;
 cursor: pointer;
 
 text-shadow:0 0 10px #000;
 color: #fff;
}

#Counter-place-1 .counter {background: url('../counters/counter-1.png');}
#Counter-place-2 .counter {background: url('../counters/counter-2.png');}
#Counter-place-3 .counter {background: url('../counters/counter-3.png');}
#Counter-place-4 .counter {background: url('../counters/counter-4.png');}
#Counter-place-5 .counter {background: url('../counters/counter-5.png');}

#counter-1.counter
{
text-shadow: 0 0 10px #fff;
color: #000;
}

#CountersAmountSelect
{
margin: 0;
padding: 0;
position: absolute;
width: 30px;
z-index: 1009;
display: none;
box-shadow: 3px 2px 3px #333;
-moz-box-shadow: 3px 2px 3px #333;
-webkit-box-shadow: 3px 2px 3px #333;
}

#CountersAmountSelect LI
{
text-align: center;
border: 1px solid #333333;
border-top-style: none;
font-size: 80%;
color: #CCCCCC;
font-weight: bold;
list-style: none;
height: 20px;
width: 100%;
background-color: #666666;
padding-top: 3px;

cursor: pointer;
}

#CountersAmountSelect LI:first-child
{
border-bottom-style: none;
}

#CountersAmountSelect LI:hover, #myLifesSelector LI.selectable:hover
{
background-color: #333333;
}

#TempCounter
{
position: absolute;
width: 48px;
height: 48px;
z-index: 1111;
background-size: 100% 100%;
}

#TempCounterDropped
{
position: absolute;
width: 20px;
height: 20px;
z-index: 1111;
}

#Phases
{
position: absolute;
width: 40px;
left: 110px;
z-index: 1000;
display: none;
}

#InfoField
{
width: 275px;
height: 100%;
position: absolute;
top:0;
right:0;
}

#myInfo, #opInfo
{
width: 110px;
height: 100%;
text-align: center;
padding-top: 2px;
background-color: #ffffaa;
}

#TokenType, #TokenText
{
width: 100%;
margin": 10px 0 5px 0;
font-size: 12px;
margin-bottom: 5px;
}

#TokenName
{
width: 100%;
height: 135px;
padding-left: 2px;
font-size: 13px;
margin-bottom: 5px;
}

#EmblemName
{
width: 100%;
height: 180px;
padding-left: 2px;
font-size: 13px;
}

#TokenP, #TokenT, #DialogLibCounter
{
width: 41px;
height: 25px;
font-size: 11px;
text-align: center;
font-family: Verdana;
}

#DialogLibCounter
{
height: 20px;
}

.dialog-request-text
{
text-align: center;
}

.ui-widget, .ui-widget .ui-widget
{
font-size: 12px;
}

.opacity-0 {opacity: 0;}
.opacity-25 {opacity: 0.25;}
.opacity-50 {opacity: 0.5;}
.opacity-75 {opacity: 0.75;}
.opacity-80 {opacity: 0.8;}
.opacity-100 {opacity: 1;}

	/* карты с droppable: disabled   */
.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled
{
opacity: 1;
}

.light_green_bg	{background-color: #eeffee;}
.light_red_bg	{background-color: #ffeeff;}
.light_blue_bg	{background-color: #c0c0ff;}
.white_bg 		{background-color: #ffffff;}

.ramka {border: 1px solid #000000;}

#dialog-token-tabs-random-selected-cards
{
margin: 0;
}

#dialog-token-tabs-random-selected-cards img
{
height: 100px;
width: "auto";
margin: 0px 5px -40px 0;
clear: both;
}

.Attackers, .Blockers
{
width: 70%;
height: 70%;
position: absolute;
top: 15%;
left: 15%;
display: none;
opacity: 0.8;
}

.no-close .ui-dialog-titlebar-close
{
  display: none;
}

#WaitingForOppenentCountdown
{
float: right;
}

#myLibCounter, #myHandCounter, #myGraveCounter, #myOutCounter, #opLibCounter, #opHandCounter, #opGraveCounter, #opOutCounter
{
width: 40px;
}

#FacedownField
{
  background: #FFFFFF url('../field_facedown.gif');
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.1;
  position: absolute;
  right: 0;
  border: 1px dashed #000000;
}

.Facedown_Drop_Acceptable
{
opacity: 0.3 !important;
}

#Cursorop, #Cursormy
{
width: 19px;
height: 25px;
position: absolute;

left: 0px;
top: -30px;
z-index: 1111; // больше чем #Counters
}

#Cursorop.Basic
{
background-image: url('../images/cursor_op.png');
}

#Cursormy.Basic
{
background-image: url('../images/cursor_my.png');
}

#Cursorop.Click
{
background-image: url('../images/cursor2.png');
}

#CursorSelector
{
border: dotted 1px black;
position: absolute;
top: 0;
left:0;
width:0;
height:0;
z-index: 1000;
}

.HandShowIcon
{
 width: 30px;
 height: 20px;
 margin-left: 4px;
}

#myLifesBlow, #opLifesBlow
{
  position: absolute;
  width: 180px;
  height: 200px;
  text-align: center;
  z-index: 0;
  font-weight: bold;
  font-size: 8px;
  opacity: 0;
  line-height: 200px;
  border: 0;
}

#ButtonInfo:hover, #ButtonVolume:hover, #ButtonQuit:hover
{
  opacity: 100;
}

#opOnline, #myOnline
{
	margin: 0;
	padding: 0;
	width: 43px;
	height: 19px;
	position: absolute;
	top: 1px;
	left: 1px;
	opacity: 0.85;
}

.online0 {background: url('/play2/images/online.png') no-repeat 0 0;}
.online1 {background: url('/play2/images/online.png') no-repeat -44px 0;}
.online2 {background: url('/play2/images/online.png') no-repeat -88px 0;}
.online3 {background: url('/play2/images/online.png') no-repeat -132px 0;}
.online4 {background: url('/play2/images/online.png') no-repeat -176px 0;}
.online5 {background: url('/play2/images/online.png') no-repeat -220px 0;}

#Sound_Volume_Slider, #Replay_Slider {height:200px; width: 20px; opacity: 0.9;}
#Sound_Volume_Slider .ui-slider-range, #Replay_Slider .ui-slider-range {background: #666666;}
#Sound_Volume_Slider .ui-slider-handle, #Replay_Slider .ui-slider-handle {border-color: #666666;}
#Sound_Volume_Slider_Handle, #Replay_Slider_Handle {width: 26px; height: 26px; text-align: center; color: #000000; font-family: monospace; font-size: 12px; line-height: 26px;}

#MTGruPlayTable th {padding: 5px; height: 40px; width: 220px; font-size: 11px; font-family: Verdana, Arial; text-align: left; background: #EFEFEF;}
#MTGruPlayTable td {padding: 5px; font-size: 11px; font-family: Verdana, Arial; text-align: left;}