@import "../../../css/ui.less";

.uiReputation {
	display: none;
	width: 600px;
	height: 385px;
	border: 5px solid fade(@blackB, 90%);
	text-align: center;

	> .heading {
		color: @blueA;
		width: 100%;
		height: 36px;
		background-color: fade(@blackB, 90%);

		.heading-text {
			padding-top: 8px;
			margin: auto;
		}
	}

	.list, .info {
		background-color: fade(@blackC, 90%);
		float: left;
		height: calc(100% - 36px);
	}

	.list {
		width: 40%;
		padding: 15px 15px 15px 15px;

		.faction {
			width: 100%;
			padding: 5px 10px;
			background-color: @grayD;
			color: @white;
			margin-bottom: 15px;
			cursor: pointer;

			&.selected {
				color: @green;
			}

			&:hover {
				background-color: @grayC;
			}
		}
	}

	.info {
		width: 60%;
		padding: 15px 15px 15px 0px;

		.heading {
			width: 100%;
			height: 36px;
			color: @blueB;

			.heading-bottom {
				margin: auto;
			}
		}

		.description {
			color: @grayB;
			height: calc(100% - 36px - 25px);
			text-align: center;
		}

		.bar-outer {
			width: 100%;
			margin: auto;
			height: 25px;
			position: relative;

			.back {
				width: 100%;
				height: 100%;
				background-color: @purpleC;
			}

			.front {
				width: 50%;
				height: 100%;
				position: absolute;
				left: 0px;
				top: 0px;
				background-color: @purpleB;
			}

			.tier {
				width: 100%;
				height: 100%;
				color: @white;
				text-align: center;
				position: absolute;
				left: 0px;
				top: 5px;
				filter:
					drop-shadow(0px -2px 0px @blackD) 
					drop-shadow(0px 2px 0px @blackD)
					drop-shadow(2px 0px 0px @blackD) 
					drop-shadow(-2px 0px 0px @blackD);

				-moz-filter:
					drop-shadow(0px -2px 0px @blackD) 
					drop-shadow(0px 2px 0px @blackD)
					drop-shadow(2px 0px 0px @blackD) 
					drop-shadow(-2px 0px 0px @blackD);
			}
		}
	}
}
