@tabs-background-color: #F1F2F2;
@tabs-border-color: #F1F2F2;
@tabs-border: 1px solid @tabs-border-color;

#wrapper .fusion-tabs {
	margin-bottom: 50px;
	
	.nav-tabs {
		display: block;
		list-style: none outside none;
		margin: 0;
		padding: 0;
		border: @tabs-border;
		border-bottom: none;		
		background-color: #fff;
		
		&:before, 
		&:after {
			content: " ";
			display: table;
		}
		
		&:after {
			clear: both;
		}
	
		&.nav-justified {
		    width: 100%;		
		    border-bottom: 0 none;
		}

		li {
			display: block;
			position: relative;
			float: none;
			text-align:center;
			
			.tab-link {
				display: block;
				position: relative;
				margin: 0;
				padding: 8px 0;
				outline: 0;
				border: none;
				border-top: 3px solid @tabs-background-color;
				background-color: @tabs-background-color;
				color: #747474;
				cursor: pointer;

				&:hover,
				&:focus {
					border-top-color: #fff;
					background-color: #fff;
					color: #747474;
				}				
			}
		}
	
		> .active {
			> .tab-link {
				border: none;
				border-top: 3px solid @primary-color;
				background-color: #fff;
				cursor: pointer;
				line-height: 20px;
				
				&:hover,
				&:focus {		
					border-top: 3px solid @primary-color;
				}
			}
		}
	}
	
	.tab-content {
		> .active {
			display: block;
		}
	}
	
	.tab-pane {
		display: none;
		padding: 15px;
		border: @tabs-border;
		border-top: none;
	}
	
	&.nav-not-justified {
		.nav-tabs {
			.tab-link {
				padding: 8px 15px;
			}
		}
	}
}

@media (min-width: 768px) {
	#wrapper .fusion-tabs {			
		.nav-tabs {
			display: inline-block;
		
			&.nav-justified {

				> li {
					display: table-cell;
					width: 1%;
				}		
			}
			
			li {
				.tab-link {
					margin-right: 1px;
				}
				
				&:last-child {
					.tab-link {
						margin-right: 0;
					}
				}
			}
		}
		
		&.horizontal-tabs {
			.nav-tabs {
				margin: 0 0 -7px 0;
			}
			
			.nav {
				border-bottom: @tabs-border;
			}
		}
		
		&.nav-not-justified {
			border: none;

			.nav-tabs {
				margin: 0 0 -1px 0;
		
				li {
					display: inline-block;
				}
			}		
		}

		&.vertical-tabs {
			border: none;
			clear: both;
			.clearfix();

			.nav-tabs {
				position: relative;
				left: 1px;
				float: left;
				width: 15.5%;
				border: @tabs-border;
				border-right: none;

				> li {
					
					.tab-link {
						margin-right: 0;
						margin-bottom: 1px;
						padding: 8px 10px;
						border-top: none;
						text-align: left;
					}
					
					&:last-child {
						.tab-link {
							margin-bottom: 0;
						}
					}					
					
					&.active {
						> .tab-link {
							border-bottom: none;
							border-left: 3px solid @primary-color;
							border-top: none;
							cursor: pointer;
						}

					}								
				}
			}

			.tab-content {
				float: left;
				width: 84.5%;
			}

			.tab-pane {
				float: left;
				padding: 30px;
				border: @tabs-border;
			}		
		}
	}
}