.block {
    border: 1px solid #aaa;
    float:left;
    width: 35px;
    height: 35px;
    -webkit-transition:0.1s linear background;
    -moz-transition:0.1s linear background;
    -o-transition:0.1s linear background;
    transition:0.1s linear background;
}

.block.valid:hover {
    background-color: #f4f4f4;
    z-index: 99;
}

.block.valid:focus, .block.valid:active {
    background-color: #ddd;
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.3);
    z-index: 99;    
}

.block.empty, .block.empty:hover  {
    background-color: #aaa;
}

.block.selected, .block.center.selected, .block.selected:hover {
    background-color: #FFEAA6;
    border-color: #FFEAA6;
    z-index: 99;
}

.block.selected:focus, .block.selected:active {
    background-color: #FFE180;  
}

.block.center{
    background-color: #2ecc71;
}

.block .piece{
    opacity: 0.3;
}

.block.valid .piece{
    opacity: 1;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.block.validTo {
    background-color: #E6F1FF;
}

.block.validTo:hover {
    background-color: #ABD2FF;    
}

.block.center.validTo{
    background-color: #7EEDAE;
}

.block.validTo:focus, .block.validTo:active {
    background-color: #9EC0E8;
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.3);
    z-index: 99;    
}

.block.captured .piece {
    width: 0%;
    height: 0%;
    top: 50%;
    left: 50%;
    -webkit-animation:1s anim_capture;
    -moz-animation:1s anim_capture;
    -o-animation:1s anim_capture;
    animation:1s anim_capture;
}

.piece {
    border-radius: 50%;
    width: 70%;
    height: 70%;
    position: absolute;
    top: 15%;
    left: 15%;
    -webkit-transition:0.1s linear all;
    -moz-transition:0.1s linear all;
    -o-transition:0.1s linear all;
    transition:0.1s linear all;
}

.piece.B, .B .piece {
    background-color: #000;
}

.piece.R, .R .piece {
    background-color: #e74c3c;
}


@-webkit-keyframes anim_capture {
    from {     
        width: 70%;
        height: 70%;
        top: 15%;
        left: 15%;
    }
    to {     
        width: 0%;
        height: 0%;
        top: 50%;
        left: 50%;
    }
}

@-moz-keyframes my_animation {
  from { opacity:1; }
  to { opacity:0; }
}

@-o-keyframes my_animation {
  from { opacity:1; }
  to { opacity:0; }
}

.ico-help {
    background:url(../imgs/ico_help.png);
    width: 24px;
    height: 24px;
    opacity: 0.6;
    cursor: pointer;
    z-index: 1000;
}

.ico-help:hover {
    opacity: 1;
}

.modal-content {
    border-radius: 3px;
}

.btn {
    background: #f8f8f8;
    border-radius: 2px;
    border: 1px solid #ddd;
}

.carousel-inner{
    left: 15%;
    width: 70%;
    box-sizing: border-box;
}
.carousel-control.right, .carousel-control.left{
    background: transparent;
}

.glyphicon.glyphicon-chevron-right, .glyphicon.glyphicon-chevron-left{
    color: #333;
    box-shadow: none;
}


.carousel-indicators li {
  background-color: #888;
}
.carousel-indicators .active {
    background-color: #e74c3c;
}

.carousel-indicators {
  bottom: -55px;
}

@media screen and (min-width: 768px){
    .carousel-indicators {
      bottom: -55px;
    }
}

.modal-footer {
    height: 40px;
    border:none;
}