body { background-color: #888; }

.matches { background-color: #fff; position: absolute; top: 20px; bottom: 20px; left: 20px; right: 20px; overflow: hidden; z-index: 1; }

.match {

	display: block; width: 16px; height: 100px; background: transparent url('../img/match.png') center center;

	position: relative; left: 0; top: 0; display: block; z-index: 4;

}

.match--origin { display: none; }

.match__remove {

	width: 16px; height: 16px; position: absolute; top: 16px; left: 0;

	background: transparent url('../img/remove.png') center center; cursor: pointer;

}

.ui-rotatable-handle { position: absolute; left: 0; bottom: 0; }

.button { position: fixed; right: 30px; z-index: 3; }

.button__add { top: 30px; }

.button__toggle { top: 66px; }

.logistics { z-index: 3; position: absolute; bottom: 30px; left: 20px; right: 20px; text-align: center; }

.logistics__import, .logistics__export { width: 10%; }

.logistics__value { width: 75%; }



.hide-handles .match__remove, .hide-handles .ui-rotatable-handle  { visibility: hidden; }

h1 { position: absolute; left: 20px; right: 20px; top: 30px; text-align: center; z-index: 2; }

h2 { position: absolute; left: 20px; right: 20px; top: 66px; text-align: center; z-index: 2; }