@import 'colors.less';
@import 'utility.less';
@import 'typography.less';

@import 'components/buttons.less';
@import 'components/qb-modal.less';
@import 'components/qb-options-list.less';
@import 'components/qb-bars-list.less';
@import 'components/qb-chart.less';
@import 'components/qb-icon-picker.less';
@import 'components/qb-form-box.less';
@import 'components/qb-setup-steps.less';

@import 'pages/bars.less';
@import 'pages/settings.less';
@import 'pages/setup.less';
@import 'pages/help.less';

.quickiebar-page{
	
	position:relative;float:left;
	width:100%;

	.qb-header{
		position:relative;float:left;
		padding-top:15px;

		.qb-header-text,.qb-page-icon{
			position:relative;
			float:left;
			clear:none;
		}

		.qb-header-text{
			line-height:40px;
			margin:0 10px;
			padding:0;

			color:@dark;
			small{
				color:fade(@dark, 50%);
			}
		}
		.qb-page-icon{
			width:40px;
			height:40px;
			background-size:100%;

			background-image:url("../images/page-icon.png");
		}
		
		.qb-header-notification{
			position:relative;
			display:inline-block;
			
			padding:3px 30px 3px 10px;
			
			top:-5px;
			
			line-height:20px;
			font-size:13px;
			color:#FFF;
			font-weight:bold;
			
			.rounded-corners(2px);
			
			&.qb-success{
				background:#84C334;
			}
			&.qb-failure{
				background:#CA4119;
			}
			
			i{
				color:#FFF;
				
				&.fa-times-circle{
					position:absolute;
					right:0;
					top:0;
					padding:2px;
					line-height:22px;
					width:22px;
					text-align:center;
					
					opacity:.5;
					
					&:hover{
						cursor:pointer;
						opacity:1;
					}
				}
			}
		}
	}

	.actionable{
		cursor:pointer;
	}

	.faded{
		opacity:.65;
	}
	.faded2x{
		opacity:.40;
	}
	.faded3x{
		opacity:.25;
	}

	.qb-main-content{
		position:relative;
		float:left;
		clear:both;

		width:100%;
		padding-right:230px;
		.paddingSubtractsFromWidth();

		max-width:1280px;
		
		&.no-sidebar{
			padding-right:0;
		}
	}
	.qb-sidebar-content{
		width:200px;
		.paddingSubtractsFromWidth();
		
		top:100px;
		right:30px;
		padding-left:25px;
		border-left:1px solid #DDD;

		min-height:80vh;
		
		position:fixed;

		h5{
			margin:1rem 0;
			color:@dark;
			font-weight:bold;
		}
		p{

		}
		button{
			margin:10px 0 0 0;
		}
	}
	
	.qb-sidebar-ad{
		position:relative;float:left;clear:both;margin-top:100px;
		
		width:175px;
		height:225px;
		
		.transition();
		
		&:hover{
			cursor:pointer;
			.drop-shadow(1px, 3px, 7px, 3px, fade(@dark, 25%));
		}
		
		&.ad1{
			background-image:url('../images/ads/sidebar-ad.png');
		}
		&.ad2{
			background-image:url('../images/ads/sidebar-ad-2.png');
		}
	}
	
}


/*Tooltipster styles*/
.tooltipster-qb {
	border-radius: 3px; 
	border: 1px solid @dark;
	background: @dark;
	color: #FFF;
}
.tooltipster-qb .tooltipster-content {
	font-family: 'Aleo';
	font-size: 13px;
	line-height: 16px;
	padding: 3px 5px;
}