#order_step {
	margin: 0px;
	list-style: none outside;
	clear: both;
	overflow: auto;

	li {
		float: left;
		width: 166px;
		padding: 12px 0px 14px 20px;
		background: @ordersteps_current_bg;
		margin-left: 5px;

		span {
			width: 100px;
			height: 17px;
			float: left;
			padding-top: 3px;

			&.number {
				width: 20px;
				height: 17px;
				float: left;
				text-align: center;
				padding-top: 3px;
				margin-right: 10px;
				display: ~`@{ordersteps_numbers} == "no"? "none": "block"`;
			}
		}

		&:first-child {
			margin-left: 0px;
		}

		&.step_todo {
			color: @ordersteps_todo;
			background: @ordersteps_todo_bg;

			span.number {
				color: @ordersteps_todo_bg;
				background: @ordersteps_todo;
			}
		}

		&.step_done {
			padding: 0px;
			width: 174px;

			span {
				color: @ordersteps_done;
				background: @ordersteps_done_bg;

				&.number {
					color: @ordersteps_done_bg;
					background: @ordersteps_done;
				}
			}

			a {
				overflow: auto;
				display: block;
				padding: ~`@{ordersteps_numbers} == "no"? "12px": "20px"` 0px 14px 20px;
				background: @ordersteps_done_bg;

				&:hover {
					background: @ordersteps_done;
					color: @ordersteps_done_bg;

					span {
						color: @ordersteps_done_bg;
						background: @ordersteps_done;

						&.number {
							color: @ordersteps_done;
							background: @ordersteps_done_bg;
						}
					}
				}
			}
		}

		&.step_current {
			span {
				color: @ordersteps_current;
				background: @ordersteps_current_bg;

				&.number {
					color: @ordersteps_current_bg;
					background: @ordersteps_current;
				}
			}
		}
	}

	.ordersteps_style;
}