/* containers 
-------------------------------------------------------------------------------*/

.container-center {
	text-align: center;
	
	.brand {
		float: none;
		position: absolute;
	}
	
	.nav, .thumbnails, .inline {
		.inline-block;
		float: none;
	}
	
	.inline {
		margin-left: 5px;
		margin-right: 5px;
	}
    
    .row {
        .inline-block;
    }
	
}

.container-left {
    text-align: left;
    
    .brand {
    	float: left;
		position: relative;
	}
    
    .nav, .thumbnails, .inline {
    	display: block;
		float: left;
	}
	
	.inline {
		margin-left: 5px;
		margin-right: 5px;
	}
    
    .row {
        display: block;
    }
    
}

.container-right {
    text-align: right;
    
    .brand {
    	float: right;
		position: relative;
	}
    
    .nav, .thumbnails, .inline {
    	display: block;
		float: right;
	}
	
	.inline {
		margin-left: 5px;
		margin-right: 5px;
	}
    
    .row {
        display: block;
    }
    
}

.container-fill {
	position: relative;
	.fill;
	.fillMin;
}

@media (max-width: 767px) {    
    .container {
        padding-left: 20px;
        padding-right: 20px;
        
        .container {
            padding-left: 0;
            padding-right: 0;
        }
        
    }
}

/* panes 
-------------------------*/

.ui-pane, [class^="ui-pane-"], [class*=" ui-pane-"] {
	position: absolute;
	min-width: @uiPaneMinWidth;
	min-height: @uiPaneMinHeight;
	.ignore-pointer;
}

.ui-pane-overlay {
	z-index: 9999;
}

.ui-pane-column, [class^="ui-pane-column"], [class*=" ui-pane-column"] {
	height: 100%;
	top: 0;
}

.ui-pane-middle {
	width: 100% - @uiPaneColumnSidesWidth * 2;
	left: @uiPaneColumnSidesWidth;
	right: @uiPaneColumnSidesWidth;
}

.ui-pane-left, .ui-pane-right {
	min-width: @uiPaneColumnSidesWidth;
}

.ui-pane-right {
	right: 0;
	
	& > * {
		.clearfix;
		
		& > * {
			float: right;
			.clearfix;
		}
		
	}
	
}
.ui-pane-top {
	top: 0;
}

.ui-pane-bottom {
	bottom: 0;
}

.ui-pane-body-top {
	top: @uiPaneMinHeight;
}

.ui-pane-body-bottom {
	bottom: @uiPaneMinHeight;
}

.ui-pane-section, [class^="ui-pane-section"], [class*=" ui-pane-section"]  {
	width: 100%;
}

.ui-pane-section-header, .ui-pane-section-footer {
	min-height: @uiPaneMinHeight;
}

.ui-pane-section-header {
	top: 0;
}

.ui-pane-section-footer {
	bottom: 0;
}

.ui-pane-section-body {
	.ui-pane-body-top;
	.ui-pane-body-bottom;
}

.ui-pane-section-half-top, .ui-pane-section-half-bottom {
	height: 50%;
}

.ui-pane-section-third-top, .ui-pane-section-third-middle, .ui-pane-section-third-bottom {
	height: 33%;
}

.ui-pane-section-quarter-top, .ui-pane-section-quarter-top-middle, .ui-pane-section-quarter-bottom-middle, .ui-pane-section-quarter-bottom {
	height: 25%;
}

.ui-pane-section-third-middle {
	top: 33%;
}

.ui-pane-section-quarter-top-middle {
	top: 25%;
}

.ui-pane-section-eighth-top-middle {
	top: 12.5%;
}

.ui-pane-section-quarter-bottom-middle {
	bottom: 25%;
}

.ui-pane-expandable {
		height: auto;
}

/* sticky 
-------------------------------------------------------------------------------*/

.sticky-wrapper {
	width: 100%;
	height: 100%;
}

.is-sticky {
	position: fixed;
	
	&.container-fill {
		top: 0;
		left: 0;
	}
	
}

/* info box 
-------------------------------------------------------------------------------*/

.info-box {
		display: inline-block;
		position: relative;
		background-color: @gray;
		background-color: rgba( 50, 50, 50, 0.8 );
		width: 100%;
		.background-clip( padding-box );
		.box-sizing( border-box );
		padding: @baseLineHeight * 0.5;
		margin: @baseLineHeight * 0.5 0;
		border: 1px solid #222;
		border: 1px solid rgba(0, 0, 0, 0.2);
		.border-radius( 6px );
		.box-shadow( 0 5px 10px rgba(0, 0, 0, 0.2) );
		
		.arrow, .arrow:after {
				position: absolute;
				display: inline-block;
				width: 0;
				height: 0;
				border-color: transparent;
				border-style: solid;
		}
		
		.content, .title {
				margin: 0;
				padding: @baseLineHeight * 0.5 0;		
		}
		
		i + .title, img + .title {
				padding-top: 0;
		}
		
		.title {
				border-bottom: 1px solid #444;
				border-bottom: 1px solid rgba( 255, 255, 255,0.2 );
				.border-radius( 5px 5px 0 0 );
		}
		
		&.bottom {
				margin-top: 10px;
				
				.arrow {
						top: -10px;
						left: 50%;
						margin-left: -10px;
						border-width: 0 10px 10px;
						border-bottom-color: @gray;
						border-bottom-color: rgba( 50, 50, 50, 0.8 );
				}
		}
}