//
// Widgets
// --------------------------------------------------

// Buttons widget
// -------------------------

.menubar {
	list-style: none;
	padding: 0;
	margin: 0;
	list-style: none;
	> li {
		display: inline-block;
		> a {
			text-decoration: none;
			color: #878787;
			height: 30px;
			line-height: 30px;
			padding: 0 10px;
			display: block;
			.badge {
				margin-top: 6px;
				margin-left: 7px;
			}
		}
		&.active, &.open {
			> a {
				background: #ededed;
				color: #3b3b3b;
				font-weight: 600;
			}
		}
	}
}

// Widgets
// -------------------------

a.widget { display: block; text-decoration: none; i.display-block { margin-bottom: 10px } }

.widget {
	background: @widgetBg;
	margin: 0 auto @spacing;
	position: relative;
	border: 1px solid #e6e6e6;
	.tab-content { padding: 0; }
	.widget-head {
		background: @inverseColor;
		border-bottom: 1px solid @contentBorder;
		height: 40px;
		line-height: 40px;
		position: relative;
		padding: 0 8px 0 0;
		overflow: hidden;
		&.progress {
			.rounded();
			margin: 0;
			padding: 0;
			.progress-bar {
				line-height: 39px;
			}
		}
		.heading { 
			margin: 0; 
			color: @bodyText;
			font-size: 14px;
			height: 40px;
			line-height: 40px;
			padding: 0 @spacing;
			float: left;
			&.glyphicons {
				width: auto;
				display: block;
				padding: 0 0 0 35px;
				i:before {
					padding: 0;
					margin: 0;
					left: 0;
					top: 0;
					height: 40px;
					line-height: 40px;
					text-align: center;
					width: 35px;
					color: @bodyText;
					font-size: 16px;
					font-weight: normal;
					text-shadow: none;
				}
			} 
		}
		a { text-shadow: none; }
		.btn-xs {
			margin-top: 8px;
		}
		.btn-group {
			&.btn-group-xs {
				margin-top: 8px;
			}
		}
	}
	.details { font-size: 8pt; color: @bodyText; }
	.widget-body {
		form { margin: 0; }
		p.lead {font-size: 25px;}
		padding: @spacing;
		> pre:last-child, > p:last-child { margin: 0; }
		&.list {
			.count { font-size: 15pt; font-weight: 400; }
			color: @bodyText;
			padding: 0;
			ul {
				margin: 0;
				list-style: none;
				li {
					.badge { position: absolute; right: 8px; top: 10px; } 
					padding: 0 10px; 
					height: 39px; 
					border-bottom: 1px solid @contentBorder;
					position: relative;
					line-height: 39px; 
					text-align: left; 
					text-shadow: @bodyTextShadow;
					clear: both;
					&:first-child { border-top: none; }
					&:last-child { border-bottom: none; } 
					.count { float: right; color: @bodyText2; } 
					.sparkline { position: relative; top: 5px; margin-left: 5px; }
					a { color: @bodyText2; font-weight: bold; }
				}
			}
			&.products {
				li {
					height: 60px;
					line-height: 60px;
				}
				.img {
					float: left;
					display: inline-block;
					width: 48px;
					height: 44px;
					line-height: 44px;
					color: #fff;
					text-align: center;
					background: #272729;
					margin: 8px 8px 0 0;
					.rounded(3px,3px,3px,3px);
					text-shadow: none;
					cursor: pointer;
					font-size: 10pt;
					font-weight: 600;
				}
				.title {
					line-height: normal;
					display: inline-block;
					padding: 13px 0 0;
					text-transform: uppercase;
					strong {
						font-family: "Open Sans", sans-serif;
						text-transform: none;
					}
				}
			}
			&.fluid {
				ul li { height: auto; line-height: normal; padding: 10px; }
			}
			&.list-2 {
				ul li {
					border-bottom: 1px solid #d8d9da;
					border-top: none;
					background: #f8f8f8;
					&.active {
						border-color: #dddddd; 
						background: #fff;
						i:before { font-weight: normal; background: @primaryColor; color: #fff; text-shadow: none; height: 20px; }
						a { color: @primaryColor; } 
					}
					&:last-child { border-bottom: none; }
					a {
						display: block;
						color: #222;
						padding: 0 0 0 30px;
						i:before { color: #555; width: 20px; height: 20px; font-size: 14px; border: 1px solid #ccc; background: #dddddd; top: 9px; left: 0; text-align: center; vertical-align: middle; padding-top: 3px; text-shadow: 0 1px 0 #fff; } 
					}
					&.hasSubmenu {
						height: auto;
						> a {  }
						ul {
							padding: 0 0 10px;
							li {
								height: auto;
								line-height: normal;
								background: none;
								border: none;
								line-height: 20px;
								a {
									color: #333;
									padding: 0 0 0 20px;
								}
								&.active a { font-weight: bold; }
							}
						}
					}
				}
			}
		}
	}
	.widget-footer {
		background: @contentBg1;
		height: 25px;
		line-height: 25px;
		border-top: 1px solid @contentBorder2;
		.glyphicons {
			width: 25px; height: 25px; line-height: 25px; padding: 0; float: right;
			vertical-align: top;
			i:before {
				font-size: 16px;
				color: #c3c3c3;
				text-align: center;
				width: 20px;
				height: 25px;
				line-height: 25px;
				text-shadow: @bodyTextShadow;
			}
			&:hover i:before {
				color: rgba(0,0,0,.5);
			}
		}
	}
	
    &.margin-bottom-none { margin-bottom: 0; }
	&.widget-gray {
		background: #f5f5f5;
		.widget-head {
			background: #e9e9e9;
			border-color: #d1d2d3;
			.bevelEmboss(0.6, 0);
			.heading {
				color: #555555; text-shadow: 0 1px 0 #fff;
				&.glyphicons {
					i:before { background: none; color: #555; border-color: rgba(0,0,0,.1); }
				}
			}
		}
	}

	&.widget-primary {
		background: @primaryColor;
		color:#fff;
		p {color:#fff;}
		.widget-head {
			background: #e9e9e9;
			border-color: #d1d2d3;
			.bevelEmboss(0.6, 0);
			.heading {
				color: #555555; text-shadow: 0 1px 0 #fff;
				&.glyphicons {
					i:before { background: none; color: #555; border-color: rgba(0,0,0,.1); }
				}
			}
		}
	}

	&.widget-profile {
		.widget-head {
			
			a.pull-right {position: absolute; right:10px; font-size:18px;color: lighten(@primaryColor,10%); display: inline;
				&:hover { color:#fff;}
			}
			padding-top:15px;
			height: auto;
			text-align: center;
			color:#fff;
			font-weight: bold;
			a { color:#fff;}
		}
	}
	&.widget-2 {
		&:before, &:after { display: none; }
		.widget-head {
			background: #e2e2e4;
			.bevelEmboss(0.6, 0);
			height: 36px;
			line-height: 36px;
			border-color: #d1d2d3;
			.heading {
				line-height: 36px;
				color: #555555;
				text-shadow: 0 1px 0 #fff;
				font-size: 12pt;
				i:before {
					color: #555555;
					background: none;
					border: none;
					left: 3px;
					top: 2px;
				}
			}
		}
		.widget-body {
			border: 1px solid #d1d2d3;
			border-top: 0;
			background: #f5f5f5;
		}
		&.primary {
			.widget-head { 
				background: @primaryColor;
				border-color: @primaryColor;
				.bevelEmboss(0.6,0.1);
				.heading { color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.5); i:before { color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.5); } } 
			}
		}
	}
	&.widget-3 {
		.widget-head {
			height: 36px;
			line-height: 36px;
			.heading {
				display: block;
				text-align: center;
				float: none;
				line-height: 36px;
				height: 36px;
				text-transform: uppercase;
				font-size: 12pt;
				i:before {
					background: none;
					border: none;
					left: 3px;
					top: 5px;
					font-size: 20px;
					color: #fff;
				}
				.glyphicons {
					vertical-align: middle;
					width: 35px;
					height: 36px;
					padding: 0;
				}
			}
		}
		.widget-body {
			border-bottom: 1px solid @contentBorder;
			&.large {
				font-size: 26pt;
				font-weight: bold;
				text-align: center;
				padding: 25px 0;
				vertical-align: middle;
				line-height: normal;
				&.cancellations {
					span {
						line-height: 20px;
						text-align: left;
						font-size: 17pt;
						display: inline-block;
						text-shadow: none;
						span { display: block; }
						span:first-child { color: @primaryColor; text-transform: uppercase; font-size: 13pt; }
					}
				}
				&.dashboard {
					padding: 15px 0;
				}
			}
		}
		.widget-footer {
			background: @contentBg1;
			border-top: none;
			a { 
				float: none; color: #dddddd; width: auto; padding: 0 10px 0 30px; border-right: 1px solid @contentBorder; text-decoration: none; i:before { color: #dddddd; left: 5px; }
				&:hover {
					color: @primaryColor;
					i:before { color: @primaryColor; }
				} 
			}
			&.align-center { text-align: center; a:first-child { border-left: 1px solid @contentBorder; } }
			&.align-right { text-align: right; a:first-child { border-left: 1px solid @contentBorder; } a:last-child { border-right: none; } }
		}
	}
	&.widget-4 {
		border: none;
		background: none;
		.widget-head {
			background: none;
			padding: 10px;
			border: none;
			.heading {
				color: #544f49;
				text-shadow: none;
				padding: 0;
				margin: 0;
			}
		}
		.widget-body {
			padding: 0 10px 10px;
			border: none;
			&.list {
				ul li { padding: 0; }
			}
		}
	}
	&.widget-heading-simple {
		border: none;
		background: none;
		> .widget-head {
			border: none;
			background: none;
			#reset #gradient();
			padding: 0 0 5px;
			height: 25px;
			line-height: 25px;
			.heading { 
				padding: 0;
				height: 25px;
				line-height: 25px;
				&.glyphicons {
					padding: 0 0 0 25px;
					i:before { 
						text-align: left; 
						width: 25px;
						height: 25px;
						line-height: 25px; 
					}
				} 
			}
		}
		> .widget-body {
			border: 1px solid @contentBorder;
		}
	}
	&.widget-body-simple {
		#reset .rounded();
		> .widget-body {
			background: none;
			border: none;
			padding: 0;
			#reset .rounded();
		}
	}
	&.widget-body-white {
		> .widget-body { background: @widgetBg; }
	}
	&.widget-body-gray {
		> .widget-body {  background: @widgetBgGray; }
	}
	&.widget-body-primary {
		> .widget-body { 
			background: @primaryColor; 
			* { color: #fff; text-shadow: none; } 
		}
	}
	&.widget-body-inverse {
		> .widget-body {
			background: @inverseColor;
			*, i:before { color: #fff; text-shadow: none; }
		}
	}
	&.widget-body-default {
		> .widget-body {
			background: @defaultColor;
			*, i:before { color: #fff; text-shadow: none; }
		}
	}
	&.widget-body-multiple {
		#reset .boxShadow();
		> .widget-body {
			margin-bottom: @spacing/2;
			&:last-of-type { margin-bottom: 0; }
		}
	}
	&.widget-inverse {
		
		> .widget-head {
			// background: #686868;
			background-color: @inverseColor;
			color: #fff;
			.heading { color: #fff; }
		}
	}
	&.widget-info {
		background: @infoColor;
		color:#fff;
	}
	&.widget-dark {
		background: @inverseColor;
		color:#fff;
	}
}
	
.widget-flat {
	#reset .boxShadow();
	#reset .rounded();
	> .widget-body {
		#reset .boxShadow();
		#reset .rounded();
		border: none !important;
	}
}

// Glyphicons
// -------------------------

h4.glyphicons {
	padding: 0 0 0 35px;
	display: block;
	i:before { font-size: 22px; font-weight: normal; color: #575655; }
}
h3.glyphicons,
h2.glyphicons {
	padding: 0 0 0 35px;
	display: block;
	i:before { font-size: 27px; font-weight: normal; left: 2px; top: 3px; color: #575655; }
	&.cogwheels i:before { left: 5px; }
}

// Finances Summary
// -------------------------

.finances_summary {
	.well {
		font-size: 16px;
		text-align: center;
		strong {
			display: block;
			font-size: 22pt;
			color: #45494c;
			line-height: normal;
		}
	}
	.glyphicons.standard i:before { color: #cccccc; }
}

// Icons within content
// -------------------------

div.glyphicons, div.glyphicons-social {
	padding: 0 0 0 47px;
	i:before { color: #e2e2e2; font-size: 32px; }
	&.glyphicon-large {
		padding: 0 0 0 75px;
		i:before { font-size: 50px; left: 0; }
		&.group-column {
			padding: 0 0 0 85px;
			i:before { font-size: 45px; left: 12px; }
		}
	}
	&.glyphicon-xlarge {
		padding: 0 0 0 85px;
		i { padding: 0 0 10px; }
		i:before { font-size: 70px; }
	}
	&.glyphicon-top {
		padding: 0;
		text-align: center;
		i {
			display: block;
			position: relative;
			padding: 5px 0 10px;
			&:before {
				position: relative;
				left: auto;
				top: auto;
			}
		}
	}
	&.glyphicon-primary {
		i:before { color: @primaryColor; }
	}
	@media (max-width: 979px) and (min-width: 768px)
	{
		&.hidden-tablet-partial {
			padding: 0;
		}
	}
}
.widget-body-primary {
	div.glyphicons i:before { color: #fff; }
}

// Large social icons
// -------------------------

.social-large {
	height: 97px;
	a {
		display: block;
		height: 97px;
		float: left;
		padding: 10px 19px;
		color: #d5d5d5;
		background: #ffffff;
		font-weight: bold;
		text-align: center;
		border-right: 1px solid #e5e5e5;
		text-decoration: none;
		i {
			display: block;
			position: relative;
			padding: 0 0 8px;
			&:before { display: block; text-align: center; top: auto; left: auto; position: relative; font-size: 50px; color: #d5d5d5; }
		}
		&.active, &:hover {
			color: #fff;
			background: @primaryColor;
			i:before { color: #fff; }
		}
		&:last-child { border: none; }
	}
	&.social-large-2 {
		a {
			display: inline-block;
			font-weight: 400;
			float: none;
			border: none;
			background: none;
			color: #444444;
			i:before { color: #444444; }
			&.active, &:hover {
				color: @primaryColor;
				i:before { color: @primaryColor; }
			} 
		}
	}
}

// Search
// ---------------------------
.widget-search {
	input { width: 100%; }
}