/*----------- A href, urls ---------------*/
#map_section
{
    border: 0px solid black;
    overflow: hidden;       
}

#map_section img
{
    border: 0px solid black;
    overflow: hidden;
}

/*----------- Layers ---------------*/
.L0
{
    pointer-events:none; 
    position: absolute;
    z-index: 0;
}

.L1
{
    pointer-events:none; 
    position: absolute;
    z-index: 1;
}

.L2 /* Buildings, blood, corpses */
{
    position: absolute;
    z-index: 2;       
}

.L3 /* Building decoration layer */
{
    position: absolute;
    z-index: 3;    
}

.L4 /* Unit layer */
{
    position: absolute;
    z-index: 4;        
}

.L5 /* Značkovací kříž */
{
    position: absolute;
    z-index: 5;
}


.e-mod /* for map-editor mode */
{
    border: 0px;
    position: absolute;
    z-index: 8;
}

/*----------- Map decorations ---------------*/
#kat_projectile /* strela z katapultu */ {
    pointer-events: none;
    position: absolute;
    overflow: hidden;
    z-index: 400;
}
#kat_projectile_shadow /* stin strely z katapultu */ {
    pointer-events: none;
    position: absolute;
    overflow: hidden;
    z-index: 10;
}
.projectile /* kouzla, ohnivy dest a dalsi */ {
    pointer-events: none;
    position: absolute;
    overflow: hidden;
    z-index: 400;
}

#hur_projectileA1 {
    pointer-events: none;
    margin-left: 29px;
    margin-top: 29px;    
}

#hur_projectileB1 {
    pointer-events: none;
    margin-left: 32px;
    margin-top: 32px;    
}

#hur_projectileC1 {
    pointer-events: none;
    margin-left: 35px;
    margin-top: 35px;    
}

#decor_section
{
    overflow: hidden;
}

#decor_section img
{
    overflow: hidden;
    position: absolute;
}


#decor_section img : not(#kat_projectile) /* for default decoration */
{
    z-index: 2;
}

#decor_section .F /* for footprint */
{
    position: absolute;
    z-index: 2;
    filter: alpha(opacity=60);
    opacity: 0.6;
    pointer-events: none;
}

#decor_section .P /* lezici pytel (ci kombinovany obrazek surovin) na mape (je nad budovami!)*/
{
    position: absolute;
    z-index: 5;
    margin-left: 10px;
    margin-top: 48px;
    cursor: pointer;
    z-index: 6;
}

#decor_section .B /* krev (blood) na mape (je nad budovami!)*/
{
    position: absolute;
    z-index: 3;
    pointer-events: none;
}


#decor_section .D /* oheň nad poškozenými budovami, krátery, kouře, portálový pentagram*/
{
    position: absolute;
    z-index: 3;
    margin-left: 2px;
    pointer-events: none;
}


#decor_section .C /* mrtvola na mape (je nad budovami!)*/
{
    position: absolute;
    z-index: 3;
    margin-left: 2px;
    pointer-events: none;
}

#decor_section .Box /* truhla s artefkaty na mape */
{
    position: absolute;
    z-index: 6;
    margin-left: 28px;
    margin-top: 44px;
    cursor: pointer;
}

/*----------- Buildings -------------------------*/
#buildings_section .building
{
    cursor: pointer;    
}

#buildings_section .I /* NEPOUZIVA SE, SMAZ TO! jednotlive dilky obrazku stavby */
{
    position: absolute;
}

/*----------- Units -------------------------*/
#units_section .unit
{
    cursor: pointer;
}

.sh_R, .sh_R_2x2, .sh_G, .sh_G_2x2, .sh_B, .sh_B_2x2, .sh_RG, .sh_RG_2x2, .sh_RB, .sh_RB_2x2, .sh_GB, .sh_GB_2x2, .sh_RGB, .sh_RGB_2x2
{
    -moz-border-radius-bottomleft: 24px;
    -moz-border-radius-bottomright: 24px;
    -moz-border-radius-topleft: 14px;
    -moz-border-radius-topright: 24px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%; 
}

.sh_R
{
    width: 64px;
    height: 64px;    
    background: radial-gradient(70px at 50% 124%, rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0), rgba(255,0,0,0.32));   /* male jednotky zle */       
}

.sh_R_2x2
{
    width: 128px;
    height: 128px;        
    background: radial-gradient(128px at 50% 115%, rgba(0,0,0,0),  rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0), rgba(255,0,0,0.35)); /*velke jednotky zle*/     
}

.sh_G
{
    width: 64px;
    height: 64px;    
    background: radial-gradient(70px at 50% 110%, rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,255,0,0.3));   /* male jednotky dobre */       
}

.sh_G_2x2
{
    width: 128px;
    height: 128px;    
    background: radial-gradient(128px at 50% 115%, rgba(0,0,0,0),  rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,255,0,0.35)); /* velke jednotky dobre */     
}

.sh_B
{
    width: 64px;
    height: 64px;    
    background: radial-gradient(70px at 50% 110%, rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,255,0.3));   /* male jednotky stit */    
   
}

.sh_B_2x2
{
    width: 128px;
    height: 128px;    
    background: radial-gradient(128px at 50% 115%, rgba(0,0,0,0),  rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,255,0.3)); /* velke jednotky stit */     
}

.sh_RG
{
    width: 64px;
    height: 64px;    
    background: radial-gradient(70px at 50% 125%, rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0), rgba(255,0,0,0.35), rgba(0,255,0,0.3));   /* male jednotky dobre + zle*/       
}

.sh_RG_2x2
{
    width: 128px;
    height: 128px;    
    background: radial-gradient(128px at 50% 110%, rgba(0,0,0,0),  rgba(0,0,0,0), rgba(255,0,0,0.3), rgba(0,255,0,0.3)); /*velke jednotky dobre + zle */     
}

.sh_RB
{
    width: 64px;
    height: 64px;       
    background: radial-gradient(70px at 50% 130%, rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0),rgba(255,0,0,0.32), rgba(0,0,255,0.28));   /* male jednotky zle + stit */       
}

.sh_RB_2x2
{
    width: 128px;
    height: 128px;        
    background: radial-gradient(128px at 54% 112%, rgba(0,0,0,0),  rgba(0,0,0,0), rgba(255,0,0,0.3), rgba(0,0,255,0.35)); /*velke jednotky zle + stit*/ 
    
}

.sh_GB
{
    width: 64px;
    height: 64px;    
    background: radial-gradient(70px at 50% 130%, rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,255,0,0.32), rgba(0,0,255,0.28));   /* male jednotky dobre + stit */       
}

.sh_GB_2x2
{
    width: 128px;
    height: 128px;        
    background: radial-gradient(128px at 54% 112%, rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,255,0,0.3), rgba(0,0,255,0.35));  /* velke jednotky dobre + stit */     
}

.sh_RGB
{
    width: 64px;
    height: 64px;        
    background: radial-gradient(70px at 50% 115%, rgba(0,0,0,0), rgba(0,255,0,0.3), rgba(255,0,0,0.34),rgba(0,0,222,0.35)); /* male jednotky dobre + zle + stit */   
}

.sh_RGB_2x2
{
    width: 128px;
    height: 128px;    
    background: radial-gradient(128px at 50% 117%, rgba(0,0,0,0), rgba(0,255,0,0.3), rgba(255,0,0,0.3),rgba(0,0,222,0.3)); /* velke jednotky dobre + zle + stit */    
}


#units_section .UI /* unit img */
{
    position: absolute;
    z-index: 5; /* border:1px solid black; */
}

#units_section .E /* energy bar */
{
    position: absolute;
    z-index: 5;
    width: 2px;
    border: 1px solid black;
    margin-left: 55px;
}

#units_section .H /* health bar */
{
    position: absolute;
    z-index: 5;
    width: 2px;
    border: 1px solid black;
    margin-left: 58px;
}

#units_section .F /* flag on bar */
{
    position: absolute;
    z-index: 5;
    margin-left: 54px;
    margin-top: 41px;
}

#units_section .R /* unit rank */
{
    position: absolute;
    z-index: 5;
    margin-left: 50px;
    margin-top: 54px;
}

#units_section .P /* unit bag in units (not map decor!)*/
{
    position: absolute;
    z-index: 5;
    margin-left: -2px;
    margin-top: 41px;
}


/* --------------------- CURSORS ARROWS ------------------- */
#cursor
{
    position: absolute;
    z-index: 10;
    display: none;
    cursor: pointer;
}

#a1 /* Arow UP */
{
    position: absolute;
    left: 33px;
    top: -6px;
    z-index: 10;
    cursor: pointer;
    padding: 6px 3px 6px 3px;
}

#a2 /* Arow RIGHT */
{
    position: absolute;
    right: -7px;
    top: 30px;
    z-index: 10;
    cursor: pointer;
    padding: 3px 6px 3px 6px;
}

#a3 /* Arow DOWN */
{
    position: absolute;
    left: 33px;
    bottom: -9px;
    z-index: 10;
    cursor: pointer;
    padding: 6px 3px 6px 3px;
}

#a4 /* Arow LEFT */
{
    position: absolute;
    left: -6px;
    top: 33px;
    z-index: 10;
    cursor: pointer;
    padding: 3px 6px 3px 6px;
}


#at102
{
    position: absolute;
    left: 0px;
    top: 33px;
    z-index: 10;
    cursor: pointer;
}

#at103
{
    position: absolute;
    left: 0px;
    top: 100px;
    z-index: 10;
    cursor: pointer;
}

#at201
{
    position: absolute;
    left: 34px;
    top: 0px;
    z-index: 10;
    cursor: pointer;
}

#at203
{
    position: absolute;
    left: 34px;
    bottom: 0px;
    z-index: 10;
    cursor: pointer;
}

#at204
{
    position: absolute;
    left: 34px;
    bottom: 0px;
    z-index: 10;
    cursor: pointer;
}

#at301
{
    position: absolute;
    left: 100px;
    top: 0px;
    z-index: 10;
    cursor: pointer;
}

#at302
{
    position: absolute;
    right: 0px;
    top: 34px;
    z-index: 10;
    cursor: pointer;
}

#at304
{
    position: absolute;
    left: 100px;
    bottom: 0px;
    z-index: 10;
    cursor: pointer;
}

#at402 /* Arow RIGHT */
{
    position: absolute;
    right: 0px;
    top: 33px;
    z-index: 10;
    cursor: pointer;
}

#at403 /* Arow RIGHT */
{
    position: absolute;
    right: 0px;
    top: 100px;
    z-index: 10;
    cursor: pointer;
}


#ai /* button INFO or button take (bag) */
{
    position: absolute;
    left: 71px;
    top: 0px;
    padding: 0 4px 4px 1px;
    cursor: pointer;
}


/* buttons stop attack, shooter, healer, builder, bomb, flying, superattack, walk, menu */
.butt_unit
{
    position: absolute;
    left: 0px;
    top: 0px;
    cursor: pointer;
}

.health_anim
{
    pointer-events:none;
    z-index: 100;
    display: block;
    position: absolute;
    color: red;
    width: 49px; /* pro kor. zobr. v chrome */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.disable_pointer_events
{
    pointer-events:none;
}

.alert_msg
{    
    font-family: Verdana;
    font-size: 13px;
    z-index: 100;
    display: block;
    position: absolute;
    color: white;
    text-align: center;
    background-color: rgba(50, 50, 50, 0.3);
    padding: 3px 8px 3px 8px;
    -moz-border-radius-bottomleft: 15px;
    -moz-border-radius-bottomright: 14px;
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-topright: 14px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 14px;
    border-top-left-radius: 15px;
    border-top-right-radius: 14px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.med
{
    cursor: help;
    padding:2px 0 0 2px;
}

.tile_black {
    position:absolute;
    background-color:black;
    width: 64px;
    height: 64px;        
}

.tile_dark { /* mlha válku fog FoW */
    position: absolute;
    background-color: RgbA(0,0,0,0.4);
    width: 64px;
    height: 64px;
    pointer-events: none;
}