@changesListWidth:   250px;
@changesListPadding: 10px;

#trackChangesPanel {
	.track-changes-diff {
		position: absolute;
		right: @changesListWidth + 1px;
		left: 0;
		top: 0;
		bottom: 0;
		padding: 0px 12px;
		height: 100%;
		.ace_editor {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
		}
	}

	.track-changes-side-bar {
		border-left: 1px solid #999;
		height: 100%;
		width: @changesListWidth;
		position: absolute;
		right: 0;
	}

	.change-list-area {
		overflow: scroll;
		position: absolute;
		left: 0px;
		right: 0px;
		top: 0px;
		bottom: 0px;
	}

	.deleted-change-background, .deleted-change-foreground, .inserted-change, .change-name-marker {
		position: absolute;
		z-index: 2;
	}

	.change-name-marker {
		.name {
			font-size: 0.8em;
			padding: 2px 6px;
			.border-radius(3px 3px 3px 3px);
			position: absolute;
			left: 0;
		}
	}

	ul.change-list {
		li {
			padding: 4px;
			position: relative;
			.change-selectors {
				position: absolute;
				top: 4px;
				left: 4px;
				.change-selector-from {
					position: absolute;
					top: 0;
					left: 0;
				}
				.change-selector-to {
					position: absolute;
					top: 0;
					left: 20px;
				}
			}
			.change-description {
				padding-left: 40px;
			}
		}
		li.selected {
			background-color: rgb(190, 226, 244);
		}
	}
}