.tabs {
    border-radius: 4px;
    margin-bottom: 35px;
}

.nav-tabs {
	margin: 0;
	font-size: 0;
	border-bottom-color: #EEE;

	li {
		display: inline-block;
		float: none;

		&:last-child {
			a {
				margin-right: 0;
			}
		}

		a {
			border-radius: 5px 5px 0 0;
			font-size: 14px;
			margin-right: 1px;

			&,
			&:hover {
				background: #F4F4F4;
				border: {
					bottom: none;
					left: 1px solid #EEE;
					right: 1px solid #EEE;
					top: 3px solid #EEE;
				}
				color: #CCC;
			}

			&:hover {
				border-bottom-color: transparent;
				border-top: 3px solid #CCC;
				box-shadow: none;
			}

			&:active,
			&:focus {
				border-bottom: 0;
			}
		}

		&.active {
			a,
			a:hover,
			a:focus {
				background: #FFF;
				border-left-color: #EEE;
				border-right-color: #EEE;
				border-top: 3px solid #CCC;
				color: #CCC;
			}
		}
	}
}

.tab-content {
	border-radius: 0 0 4px 4px;
	box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.04);
	background-color: #FFF;
	border: 1px solid #EEE;
	border-top: 0;
	padding: 15px;
}

/* Right Aligned */
.nav-tabs.nav-right {
	text-align: right;
}

/* Justified */
.nav-tabs.nav-justify {
	display: table;
	table-layout: fixed;
	margin-bottom: -1px;
	width: 100%;

	li {
		display: table-cell;
		margin-bottom: 0;
		width: 100%;

		&:first-child {
			a,
			a:hover {
				border-radius: 5px 0 0 0;
				border-left: 1px solid #EEE;
			}
		}

		&:last-child {
			a,
			a:hover {
				border-radius: 0 5px 0 0;
				border-right: 1px solid #EEE;
			}
		}

		a {
			border-left: none;
			border-right: none;
			border-bottom: 1px solid #EEE;
			border-radius: 0;
			margin-right: 0;

			&:hover,
			&:focus {
				border-bottom: 1px solid #EEE;
				border-left: none;
				border-right: none;
			}
		}

		&.active {
			a {
				border-bottom: 1px solid #FFF;

				&:hover {
					border-bottom: 1px solid #FFF;
				}
			}
		}
	}
}

/* Bottom Tabs */
.tabs.tabs-bottom {

	.tab-content {
		border-radius: 4px 4px 0 0;
		border-bottom: 0;
		border-top: 1px solid #EEE;
	}

	.nav-tabs {
		border-bottom: none;
		border-top: 1px solid #EEE;

		li {
			margin-bottom: 0;
			margin-top: -1px;

			&:last-child {
				a {
					margin-right: 0;
				}
			}

			a {
				border-radius: 0 0 5px 5px;
				font-size: 14px;
				margin-right: 1px;

				&,
				&:hover {
					border: {
						bottom: 3px solid #EEE;
						top: 1px solid #EEE;
					}
				}

				&:hover {
					border-bottom: 3px solid #CCC;
					border-top: 1px solid #EEE;
				}
			}

			&.active {
				a,
				a:hover,
				a:focus {
					border-bottom: 3px solid #CCC;
					border-top-color: transparent;
				}
			}
		}
	}
}

/* Bottom Tabs with Justified Nav */
.tabs.tabs-bottom {
	.nav-tabs.nav-justify {
		border-top: none;
		li {
			a {
				margin-right: 0;
			}

			&:first-child {
				a {
					border-radius: 0 0 0 5px;
				}
			}

			&:last-child {
				a {
					margin-right: 0;
					border-radius: 0 0 5px 0;
				}
			}
		}
	}
}

/* Vertical */
.tabs-vertical {
	display: table;
	width: 100%;
	border-top: 1px solid #EEE;

	.tab-content {
		display: table-cell;
		vertical-align: top;
	}

	.nav-tabs {
		border-bottom: none;
		display: table-cell;
		height: 100%;
		float: none;
		padding: 0;
		vertical-align: top;

		& > li {
			display: block;

			a {
				border-radius: 0;
				display:block;
				padding-top: 10px;

				&,
				&:hover,
				&:focus {
					border-bottom: none;
					border-top: none
				}
			}

			&.active {
				a,
				a:hover,
				&:focus {
					border-top: none;
				}
			}
		}
	}
}

/* Vertical - Left Side */
.tabs-left {
	.tab-content {
		border-radius: 0 5px 5px 5px;
		border-left: none;
	}

	.nav-tabs {
		& > li {
			margin-right: -1px;

			&:first-child {
				a {
					border-radius: 5px 0 0 0;
				}
			}

			&:last-child {
				a {
					border-radius: 0 0 0 5px;
				}
			}

			a {
				border: {
					right: 1px solid #EEE;
					left: 3px solid #EEE;
				}
				margin-right: 1px;
				margin-left: -3px;

				&:hover {
					border-left-color: #CCC;
				}
			}

			&.active {
				a,
				a:hover,
				a:focus {
					border-left: 3px solid #CCC;
					border-right-color: #FFF;
				}
			}
		}
	}
}

/* Vertical - Right Side */
.tabs-right {

	.tab-content {
		border-radius: 5px 0 5px 5px;
		border-right: none;
	}

	.nav-tabs {
		& > li {
			margin-left: -1px;

			&:first-child {
				a {
					border-radius: 0 5px 0 0;
				}
			}

			&:last-child {
				a {
					border-radius: 0 0 5px 0;
				}
			}

			a {
				border: {
					right: 3px solid #EEE;
					left: 1px solid #EEE;
				}
				margin-right: 1px;
				margin-left: 1px;

				&:hover {
					border-right-color: #CCC;
				}
			}

			&.active {
				a,
				a:hover,
				a:focus {
					border-right: 3px solid #CCC;
					border-left: 1px solid #FFF;
				}
			}
		}
	}
}