bonbons.css

/**
 *------
 * BGA framework: © Gregory Isabelli <gisabelli@boardgamearena.com> & Emmanuel Colin <ecolin@boardgamearena.com>
 * bonbons implementation : © Antonio Soler morgalad.es@gmail.com
 *
 * This code has been produced on the BGA studio platform for use on http://boardgamearena.com.
 * See http://en.boardgamearena.com/#!doc/Studio for more information.
 * -----
 *
 * bonbons.css
 *
 * bonbons stylesheet
 *
 */

/*
    This is the CSS stylesheet of your game User Interface.
    
    Styles defined on this file will be applied to the HTML elements you define in your
    HTML template (bonbons_bonbons.tpl), and to HTML elements you create dynamically
    (in bonbons.js).
    
    Usually, you are using CSS to:
    
    1°) define the overall layout of your game
        (ex: place the board on the top left, place player's hand beside, place the deck on the right, ...).

    2°) create your CSS-sprites:
        All images of your games should be gathered into a small number of image files. Then, using
        background-image and background-position CSS properties, you create HTML blocks that can 
        display these images correctly (see example below).
    
    3°) ... anything else:
        It is really easy to add and remove CSS classes dynamically from your Javascript with
        dojo.addClass and dojo.removeClass. It is also easy to check if an element has a class
        (dojo.hasClass) or to get all elements with a specific class (dojo.query). This is why,
        very often, using CSS classes for the logic of your user interface allow you to do complex
        thing easily.
        
        
     Note: on the production platform, this file will be compressed and comments will be removed.
           Consequently, don't hesitate to put as many comments as necessary.
*/

@import url(../../../css/csslayer.css); /* Note: you must not use any @import directive other than this one */

/********* You can start writing your CSS below this line: **********/


/*
    Example of CSS sprites (a black token and a white token, 20x20px each, embedded in the same "tokens.png" 40x20px image):

    .white_token {
        background-image: url('img/tokens.png');
        background-position: 0px 0px;
    }
    .black_token {
        background-image: url('img/tokens.png');
        background-position: -20px 0px;
    }
    .token {
        width: 20px;
        height: 20px;
        background-repeat: none;
    }
*/
body {
    // background-image: url("img/background.png");
	 background-color:#fdf3f7;
}

#playarea {
 text-align: center;
 margin: initial;
 }

#tablearea {
 margin: 40px;
 text-align: center;
 margin:60px;
 display: inline-block;
 display: inline-block;
 background-color: #fdf3f7;
 }
 
#fieldswrapper {
  margin: auto;
  text-align: center;
  display: inline-block;
  }

	.boardtable {
	    width: 625px;
	    height: 624px;
	    border:2px #72afa0;
	    border-style: solid;
	    border-collapse:separate;
	    border-spacing:3px;
	    padding:1px;
	    margin:60px;
	    box-shadow: 
	    0 0 0 2px #e664ab,
	    0 0 0 4px #fdf3f7, 
	    0 0 0 12px #e664ab,
	    0 0 0 14px #fdf3f7, 
	    0 0 0 16px #e664ab, 
	    0 0 0 21px #fdf3f7, 
	    0 0 0 32px #6db6af, 
	    0 0 0 38px #fdf3f7, 
	    0 0 0 40px #e664ab, 
	    0 0 0 42px #fdf3f7,
	    0 0 0 48px #e664ab,
	    0 0 0 50px #fdf3f7,
	    0 0 0 52px #e664ab
	     ;
	}
	.boardtable tbody {
		border:8px  #fdf3f7;
		padding:1px;
	}
	.boardtable td {
		border:1px solid #76a092;
		text-align:center;
		padding:1px;
		width:100px;
		height:100px;
		background-image: url('img/squareback.png');
		background-repeat: no-repeat;
		background-position: center center; 
		background-size: 100% 100%;
		}

.playerfield {
    padding: 10px;
    margin: 5px;
    height: 160px;
    width: 580px;
    background-image: url('img/border.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 98% 96%;
    background-color: #e290b3;
}

.roundtile {
	perspective: 200px;
	position: relative;
	margin: 2px;
	top:0px;
	display: inline-block;
	height: 100px;
	width: 100px;
	padding:1px;
	}
	
.roundtile--front {
  top:0px;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: transform 1s ease, visibility 1s ease;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border:2px solid #645b5e;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  position: relative;
  background-image: url('img/roundback.png');
  transform: rotateY(0deg);
}

.roundtile--back {
  top:0px;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: transform 1s ease, visibility 1s ease;
  width: 99px;
  height: 99px;
  border-radius: 50%;
  border:2px solid #645b5e;
  background-repeat: no-repeat;
  position:abosulte;
  background-image: url('img/tiles.png');
  visibility: hidden;
  position: absolute;
  transform: rotateY(180deg);
  
}

.roundtile.flipped  .roundtile--front {
    visibility: hidden;
    position: absolute;
    transform: rotateY(-180deg);
	}
  
 .roundtile.flipped .roundtile--back {
    visibility: visible;
    position: static;
    transform: rotateY(0deg);
	}

.roundtile.visible .roundtile--front {
    visibility: hidden;
    position: absolute;
    transform: rotateY(-180deg);
	}
  
 .roundtile.visible .roundtile--back {
    visibility: visible;
    position: static;
    transform: rotateY(0deg);	
	}
	
.squaretile {
	perspective: 200px;
	position: relative;
	margin: 0px;
	top:0px;
	display: inline-block;
	height: 100px;
	width: 100px;
	padding: 0px;
	}
	
.squaretile--front {
  top:0px;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: transform 1s ease, visibility 1s ease;
  width: 100px;
  height: 100px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  position: relative;
  background-image: url('img/squareback.png');
  transform: rotateY(0deg);
}

.squaretile--back {
  top:0px;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: transform 1s ease, visibility 1s ease;
  width: 99px;
  height: 99px;
  border:1px solid #645b5e;
  background-repeat: no-repeat;
  position: relative;
  background-image: url('img/tiles.png');
  visibility: hidden;
  position: absolute;
  transform: rotateY(180deg);
}

.squaretile.flipped  .squaretile--front {
    visibility: hidden;
    position: absolute;
    transform: rotateY(-180deg);
	}

.squaretile.visible  .squaretile--front {
    visibility: hidden;
    position: absolute;
    transform: rotateY(-180deg);
	}
	
 .squaretile.flipped  .squaretile--back {
    visibility: visible;
    position: static;
    transform: rotateY(0deg);
	}

.squaretile.visible  .squaretile--back {
    visibility: visible;
    position: static;
    transform: rotateY(0deg);
	}