@nav_office_rows: 2;
@nav_office_cols: ceil(@office_count/2);

.ListPane() {
	background : @listpane_background;
	bottom     : 0;
	left       : 0;
	overflow   : hidden;
	position   : fixed;
	top        : 0;
	width      : @pane_width;

	nav {
		@horiz_padding: 2 * @grid_size;
		padding: (1 * @grid_size) @horiz_padding (0.5 * @grid_size);

		a {
			@height        : 4 * @grid_size;
			color          : @inactive_blue;
			display        : inline-block;
			font           : 22px "Knockout 52";
			height         : @height;
			line-height    : @height;
			text-align     : center;
			text-transform : uppercase;
			width          : (@pane_width - (2 * @horiz_padding)) / @nav_office_cols;

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

			&.active {
				color: white;

				&:hover {
					background-color : transparent;
					cursor           : default;
				}
			}
		}
	}

	.queryContainer {
		left     : 2 * @grid_size;
		position : absolute;
		right    : 2 * @grid_size - 1px;
		top      : 10 * @grid_size;
	}

	.query {
		background          : transparent url('../images/magnifier-white.png') no-repeat 13px 1.5*@grid_size;
		border              : 1px solid @light_line_color;
		border-bottom-color : fade(@light_line_color, 50%);
		border-width        : 1px 0;
		color               : white;
		font                : 20px "Knockout 32";
		height              : 5 * @grid_size - 1px;
		line-height         : 5 * @grid_size - 1px; // IE ignores text-indent until first change event
		text-indent         : 5 * @grid_size - 1px;
		width               : 100%;

		.placeholder(){
			color: @inactive_blue;
			opacity: 1;
		}

		&::-webkit-input-placeholder {
			.placeholder();
		}

		&:-moz-placeholder {
			.placeholder();
		}

		&::-moz-placeholder {
			.placeholder();
		}

		&:-ms-input-placeholder {
			.placeholder();
		}
	}

	.people {
		bottom     : 20 * @grid_size;
		left       : 0;
		overflow-x : hidden;
		overflow-y : auto;
		position   : absolute;
		right      : -20px;
		top        : 16 * @grid_size;

		.person {
			@img_size    : @grid_size * 5 + 1px;
			cursor       : pointer;
			padding-left : 2 * @grid_size;
			width        : @pane_width - (2 * @grid_size); //overconstrained, but scrollbars tweak the width otherwise

			&.filtered_name, &.filtered_tag {
				display: none;
			}

			&:hover, &.active {
				background: @hover_background_color;
			}

			/*.name, img {
				display        : inline-block;
				vertical-align : middle;
			}*/

			.name {
				font-family : "Knockout 31";
				font-size   : 25px;
				line-height : @img_size;
				margin: 0 @grid_size 0 (7 * @grid_size);
				.ellipsis();
			}

			img, .icon {
				height       : @img_size;
				line-height  : @img_size - 3px; //for the + icon in "Add a person"
				width        : @img_size;
				position: absolute;
			}
		}
	}

	.tags {
		border-top  : 1px solid @light_line_color;
		bottom      : 1.5 * @grid_size;
		left        : 2 * @grid_size;
		padding-top : 0.5 * @grid_size;
		position    : absolute;
		right       : 2 * @grid_size - 1px;

		a {
			color          : white;
			display        : inline-block;
			font           : 18px "Knockout 52";
			line-height    : 4 * @grid_size;
			text-align     : center;
			text-transform : uppercase;
			width          : 83px;

			&:nth-child(4n){
				width: 82px;
			}

			&.filtered {
				color: @inactive_blue;
			}

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

}