incangold.css

/**
 *------
 * BGA framework: (c) Gregory Isabelli <gisabelli@boardgamearena.com> & Emmanuel Colin <ecolin@boardgamearena.com>
 * incangold implementation : (c) Antonio Soler <morgald.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.
 * -----
 *
 * incangold.css
 *
 * incangold 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 (incangold_incangold.tpl), and to HTML elements you create dynamically
    (in incangold.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;
    }
*/

#playArea{
	width:100%	
	}

#playArea td{
	border: 0px solid black !important;
	}
	
.templediv{
	width:400px;
	height:388px;	
	margin:10px
	}

.templeclass{
	width:400px;
	height:388px;
	border-collapse: collapse;
	}

#templecell{
    vertical-align: top;
	}

.templecard{
    height:129px;
    /* width: 180px; */
    background-image: url('img/temple-off.png');
    background-repeat: no-repeat;
    border-radius: 10px;
    /* box-shadow: 2px 3px 3px 2px rgba(59, 59, 59, 0.58); */
}	
		
.t1{        
    background-position: left bottom
	}
.t2{
    background-position: right bottom
	}
.t3{
    background-position: left center
	}
.t4{
	background-position: right center
	}
.t5{    
    background-position: center top;
    width: 50%;
 }

.tspacer{
	width: 100px;
}

.on{
    background-image: url('img/temple-on.png')!important;
	}

.fields {
    min-height: 200px !important;
    width: 280px;
    float: left;
    margin: 5px;
    padding: 10px;
    padding-top: 5px;
}
.tablecamp {
    width: 100%;
    height: 200px;
}
.hidden {
    display: none;
}

#info {
    width: 260px;
    height: 190px;
}

#campscell{
  /*min-width: 300px*/;
}

.whiteblock {
    min-height: 100px;
    border-radius: 10px;
    /* position: relative; */
}

.card {
    background-image: url('img/cards.jpg'); 
}

.gameArt {
    width: 200px;
    height: 139px;
    background-image: url('img/incangold.jpg');
    margin-bottom: 0px;
}

.gem {
    width: 30px;
    height: 30px;
    margin: 3px;
    margin-left: auto;
    background-image: url('img/gem.png');
    background-repeat: no-repeat;
    transform: translateZ(6px);
}

.gem::after {
	content:"";
	width: 30px;
	height: 30px;
	position: absolute;
	top:0px;
	left:0px;
	background-image: url('img/gem.png');
	background-repeat: no-repeat;
	transform: translateZ(-3px);
}

.gem::before {
	content:"";
	width: 30px;
	height: 30px;
	position: absolute;
	top:0px;
	left:0px;
	background-image: url('img/gem.png');
	background-repeat: no-repeat;
	transform: translateZ(-6px);
}

.gemfield {
    width: 30px;
    height: 30px;
    background-image: url('img/gem.png');
    background-repeat: no-repeat;
    right:10px;
    font: normal normal bold 20px/1 Arial, Helvetica, sans-serif;
    color: rgba(1,1,1,1);
    text-align: center;
    position: relative;
    float: right;
    transform: translateZ(6px);
    z-index: 500;
    display: table-cell;
 }

.gemfield::after {
	content:"";
	width: 30px;
	height: 30px;
	position: absolute;
	top:0px;
	left:0px;
	background-image: url('img/gem.png');
	background-repeat: no-repeat;
	transform: translateZ(-3px);
	z-index:-1
}

.gemfield::before {
	content:"";
	width: 30px;
	height: 30px;
	position: absolute;
	top:0px;
	left:0px;
	background-image: url('img/gem.png');
	background-repeat: no-repeat;
	transform: translateZ(-6px);
	z-index:-1

}
.tent {
    width: 150px;
    height: 121px;
    display: table-cell;
    /* background-image: url('img/tent.png'); */
    background-repeat: no-repeat;
    background-position: center center;
    text-align:center;
    vertical-align: middle;
    position: absolute;
    font: normal normal bold 19px/1 Arial, Helvetica, sans-serif;
    color: rgba(1,1,1,1);
    transform: scale3d(0.8,0.8,0.8);
    transform-origin: top center;
 }	

.tent_side1 {
    width: 150px;
    height: 114px;
    background-image: url('img/tenta.png');
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    z-index: 10;
    font: normal normal bold 19px/1 Arial, Helvetica, sans-serif;
    color: rgba(1,1,1,1);
    transform: translate3d(46px,40px,50px) rotateZ(-30deg) rotateX(-60deg);
 }	

.tent_side2 {
    width: 150px;
    height: 114px;
    background-image: url('img/tenta.png');
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    z-index: 10;
    font: normal normal bold 19px/1 Arial, Helvetica, sans-serif;
    color: rgba(1,1,1,1);
    transform: translate3d(20px,-10px,50px)  rotateZ(-210deg) rotateX(-60deg);
 }
 .tent_side3 {
    width: 150px;
    height: 114px;
    background-image: url('img/tentb.png');
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    z-index: 10;
    font: normal normal bold 19px/1 Arial, Helvetica, sans-serif;
    color: rgba(1,1,1,1);
    transform: translate3d(-31px,51px,50px)  rotateZ(-120deg) rotateX(-90deg);
 }		

 .tent_side4 {
    width: 150px;
    height: 114px;
    background-image: url('img/tentb.png');
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    z-index: 10;
    font: normal normal bold 19px/1 Arial, Helvetica, sans-serif;
    color: rgba(1,1,1,1);
    transform: translate3d(97px,-20px,50px)  rotateZ(-120deg) rotateX(-90deg);
 }		
#tentcount {
 position: absolute;
 top: 40%;
 font-size: 30px;
 transform: translate3d(40px,40px,60px) rotateZ(-30deg) rotateX(-20deg);
 z-index: 100;
}
 
.tentholder{
 padding: 5px;
 width: 160px;
 height: 121px;
 vertical-align: middle;
 position: relative;
 text-align: center;
 display: table;
 transform: translateZ(5px);
}
 
.gemtent {
    width: 150px;
    height: 30px;
    display: table-cell;
    vertical-align: middle;
    background-image: url('img/gem.png');
    background-repeat: no-repeat;
    background-position: center center;
    text-align:center;
    z-index: 9;
    font: normal normal bold 19px/1 Arial, Helvetica, sans-serif;
    color: rgba(1,1,1,1);
 }
	
.cardback {
    width: 115px;
    height: 180px;
	position:absolute;
    background-image: url('img/vote-cards.jpg');
	background-repeat: no-repeat;
	background-position: left top
	}
	
.votecardExplore {
	width: 115px;
	height: 180px;
	position:absolute;
	background-image: url('img/vote-cards.jpg');
	background-repeat: no-repeat;
	border-radius: 6px;
	background-position: center top !important;
	box-shadow: 3px 5px 3px 2px rgba(59, 59, 59, 0.58);
	z-index: 190;
	}

.votecardLeave {
	width: 115px;
    height: 180px;
	position:absolute;
    background-image: url('img/vote-cards.jpg');
	background-repeat: no-repeat;
	border-radius: 6px;
	background-position: right top !important;
	box-shadow: 3px 5px 3px 2px rgba(59, 59, 59, 0.58);
	z-index: 190;
	}	

.votecardBack {
    width: 115px;
    height: 180px;
    position:absolute;
    background-image: url('img/vote-cards.jpg');
    background-repeat: no-repeat;
    border-radius: 6px;
    background-position: left top;
    box-shadow: 3px 5px 3px 2px rgba(59, 59, 59, 0.58);
 }

 #deck {
    width: 159px;
    height: 247px;
     	transform:translate3d(1px,1px,30px);
    display: inline;
    margin: 15px;
    flex: 0 1 auto;
 }
 
.backdeck {
    width: 159px;
    height: 247px;
    background-image: url('img/card-back.jpg');
    border-radius: 7px;
    background-size: cover;
    position: absolute;
    box-shadow: inset 0px 0px 1px 1px #4e4d4d;
 }

#deck div:nth-child(1) {
 	transform:translate3d(1px,1px,-3px);
 }                             
#deck div:nth-child(2) {        
 	transform:translate3d(2px,2px,-6px);
 }                             
#deck div:nth-child(3) {        
 	transform:translate3d(3px,3px,-9px);
 }                             
#deck div:nth-child(4) {        
 	transform:translate3d(4px,4px,-12px);
 }                             
#deck div:nth-child(5) {        
 	transform:translate3d(5px,5px,-15px);
 }                             
#deck div:nth-child(6) {        
 	transform:translate3d(6px,6px,-18px);
 }                             
#deck div:nth-child(7) {        
 	transform:translate3d(7px,7px,-21px);
 }                             
#deck div:nth-child(8) {        
 	transform:translate3d(8px,8px,-24px);
}                              
#deck div:nth-child(9) {        
 	transform:translate3d(9px,9px,-27px);
 	box-shadow: 10px 20px 3px 11px rgba(0, 0, 0, 0.26);
} 
 
#table_wrap {
	display: inline-flex;
	width: 95%;
}

#tablecards{
	min-width:50%;
	flex: 1 1 auto;
}

.cardholder {
	width: 115px;
	height: 180px;
	display: table-cell;
	position: relative;
	transform: translateZ(10px);
	}
	
.artifacticon {
	margin-left: 4px;
	float:left;
	background-image: url('img/artifact.jpg');
	background-repeat: no-repeat;
	width: 22px;
	height: 35px;
	transform: translateZ(5px);
	box-shadow: 3px 5px 3px 2px rgba(59, 59, 59, 0.58);
	}

.stockitem {
    margin:10px;
    display: inline-table;
    border-radius: 10px;
    box-shadow: 3px 5px 3px 2px rgba(59, 59, 59, 0.58);
    transform: translateZ(5px);
}

.animatedcard{	
	animation-name: shrink;
    animation-duration: 0.5s;
    transform: scale(1);
	-webkit-animation: shrink 0.5s;
}

/* Standard syntax */
@keyframes shrink {
	from{transform: scale(1)}
	to {transform: scale(0.2) }
}
@-webkit-keyframes shrink {
	from{transform: scale(1)}
	to {transform: scale(0.2) }
}

.spining{	
	animation: spin 0.5s infinite;
	-webkit-animation: spin 0.5s infinite;
	transform: rotate(1deg);
}

/* Standard syntax */
@keyframes spin {
	from{transform: rotate(1deg)}	
	to {transform: rotate(359deg) }
}

@-webkit-keyframes spin {
	
	from{transform: rotate(1deg)}	
	to {transform: rotate(359deg) }
	}
	
.traveller {
    -webkit-animation: travelanim 1s ease 1;
    -moz-animation: travelanim 1s ease 1;
    -o-animation: travelanim 1s ease 1;
    animation: travelanim 1s ease 1
}

@keyframes "travelanim" {
    50% {
        transform: translateZ(250px);
    }
}

@-webkit-keyframes "travelanim" {
    50% {
        transform: translateZ(250px);
    }
}

@-moz-keyframes "travelanim" {
    50% {
        transform: translateZ(250px);
    }
}

@-o-keyframes travelanim {
    50% {
        transform: translateZ(250px)
    }
}