// style.less
// Copyright (C) 2011  Jason Woofenden
// Lincensed under CC0 (ie public domain).
// Note that most of Peach CGT is AGPLv3

@table-width: 1000px;
@table-height: 800px;

@card-width: 100px;
@card-height: 140px;

@pile-width: @card-width * 1.3;
@hand-height: @card-height * 1.3;

@area-lightness: 44%;
@area-border-color: #ccc;
@your-side-color: #ffe2e2;
@my-side-color: #e2ffe2;

#loading_card {
	top: (@table-height - @card-height) / 2 - 4px;
	left: (@table-width - @card-width) / 2 - 4px;
}


.shadow (@x: 0, @y: 0, @blur: 1px, @alpha) {
	@val: @x @y @blur rgba(0, 0, 0, @alpha);
	box-shadow:         @val;
	-webkit-box-shadow: @val;
	-moz-box-shadow:    @val;
}

body, #other_player_url {
	color: black;
	background: #ccc;
	font-size: 11px;
	font-weight: normal;
	margin: 0;
	padding: 10px;
}

h1 {
	margin-top: 0;
	font: bold 20px 'Verdana';
	color: blue;
}

#main_header {
	margin-bottom: 0px; // no decenders, big font
}

#main_warning {
	color: red;
	font-weight: bold;
	margin-top: 0px;
}

#table {
	width: @table-width;
	height: @table-height;
	background: #eee;
	position: relative;
	.shadow(2px, 2px, 10px, 0.4);
	border: 2px solid #468;
}

.card, .blank_card {
	width: @card-width;
	height: @card-height;
	padding: 2px;
	position: absolute;
	border-radius: 4px;
}

.blank_card {
	border: 1px solid #777;
}

.card {
	background: #fff;
	border: 2px solid #fff;
	overflow: hidden;
	.shadow(1px, 1px, 8px, 0.4);

	&:hover {
		height: auto;
		min-height: @card-height;
		z-index: 9999 !important;
	}
	.button {
		display: none;
		border: 1px solid #aaa;
		border-radius: 2px;
		background-color: #fff;
	}
	.button:hover {
		background: #eee;
		cursor: pointer;
	}
	&:hover .button {
		display: block;
	}
}

.your_card {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
	&:hover {
		-webkit-transform: none;
		-moz-transform: none;
		-ms-transform: none;
		-o-transform: none;
		transform: none;
	}
}

.marked {
	border-color: black;
}

.flipped, .your_hand {
	.cardtext {
		display: none;
	}
	background-color: #ddd;
}

#my_side, #your_side {
	position: absolute;
	width: @table-width;
	height: @hand-height;
	left: 0;
}

#your_side {
	background: @your-side-color;
	border-bottom: 2px solid @area-border-color;
	top: 0;
}

#my_side {
	background: @my-side-color;
	border-top: 2px solid @area-border-color;
	top: @table-height - @hand-height - 2px;
}

.discard_area, .deck_area, .hand_area {
	position: absolute;
	height: @hand-height;
}
.discard_area, .deck_area {
	border-right: 2px solid @area-border-color;
	width: @pile-width;
}
.hand_area {
	width: @table-width - (@pile-width + 2px) * 2;
}
.discard_area {
	left: 0px;
}
.deck_area {
	left: @pile-width + 2px;
}
.hand_area {
	left: (@pile-width + 2px) * 2;
}

#your_side div {
	top: 0px;
}

#my_side div {
	top: 0; // @table-height - @hand-height;
}

#deck_designer {
	position: absolute;
	top: 40px;
	left: 10px;
	background: white;
	z-index: 10000;
	width: @table-width + 10;
	height: @table-height + 20;
	overflow: scroll;
	.shadow(3px, 3px, 16px, 0.8);

	li, div {
		cursor: pointer;
	}

	.in_deck {
		color: #080;
	}
}

#copyright {
	padding-top: 4px;
}