/*************** 1. Table of Content [.table-of-content] ***************/

.body-index {
	background-color: #1a1a1a;
	text-align: center;
	padding-top: 30px;
	overflow-y: auto;

	.container {
		overflow-y: auto;
	}

	.logo {
		display: block;
		clear: both;
	}

	.table-of-content {
		display: inline-block;
		text-align: left;
		padding-top: 15px;

		small {
			padding: 0 0 10px 10px;
			display: block;
			font-weight: 300;
			color: #ccc;
			.font-size(11);
		}

		a {
			color: @red;
		}

		h2 {
			padding-top: 20px;
			color: @white;
			text-align: center;
		}
		
		ul {
			padding-top: 0;
			font-weight: 800;
			.font-size(14);

			li {
				padding-top: 10px;
				color: @grey;

				> ul {
					margin: 10px 0px;
					padding: 0;
					font-weight: 400;
					.font-size(14);

					li {
						padding: 0 0 0 20px;
						color: @grey;

						>ul {
							border-left: 1px solid @grey;

							li {
								.font-size(12);
							}
						}
					}
				}
			}
		}
		
		span {
			.font-size(10);
			font-weight: 300;
			.rounded-corners(2px);
			display: inline-block;
			color: @black;
			background-color: @grey;
			vertical-align: middle;
			position: relative;
			top: -2px;
			padding: 2px 3px;
			line-height: 10px;
		}

		.new {

			span {
				color: @white;
				background-color: @red;

				&:before {
					content: "NEW\00a0|\00a0";
				}
			}
		}

		.updated {

			span {
				color: @white;
				background-color: blue;

				&:before {
					content: "UPDATED\00a0|\00a0";
				}
			}
		}

		.deprecated {
			.opacity(.5);
			text-decoration: line-through;

			span {
				background-color: @grey;
				color: @black;

				&:before {
					content: "DEPRECATED\00a0|\00a0";
					color: @black;
				}
			}
		}
	}
}