/* -----------------------------------------
	07. Widgets Styling
----------------------------------------- */
.sidebar {
	margin-bottom: 50px;
}

.widget {
	margin: 0 0 60px;
}

.sidebar .widget:last-child,
.widget p:last-child { /* Nullify bottom margin for last elements in widgets and sidebars */
	margin-bottom: 0;
}

.widget-title {
	@extend h3;
	font-size: 16px;
	font-weight: 500;
	padding-top: 12px;
	margin: 0 0 30px;
	border-top: 1px solid $border-color;
	text-transform: uppercase;

	label {
		display: block;
		font-size: inherit;
		margin: 0;
		color: $text-color;
		line-height: inherit;
		font-weight: inherit;
	}
}

/* Section Widgets
========================================= */

/* WIDGET: #Instagram Slideshow
========================================= */
section.widget .instagram-pics {
	margin-left: -15px;
	margin-right: -15px;

	li {
		margin: 0 15px;

		a {
			display: block;
			position: relative;

			&::after {
				content: "";
				position: absolute;
				top: 0;
				bottom: 0;
				right: 0;
				left: 0;
				border: 15px solid $secondary-bg;
				transition: border-color 0.18s ease;
			}

			&:hover {
				&::after {
					border-color: transparent;
				}
			}
		}
	}
}

/* WIDGET: #List Widgets
========================================= */

.widget {
	select {
		width: 100%;
		padding: 5px 10px;
		border-radius: 0;
		border: 1px solid $border-color;
	}
}

.widget_meta,
.widget_pages,
.widget_categories,
.widget_archive,
.widget_nav_menu,
.widget_recent_entries {
	ul {
		list-style: none;
		margin: 0;
		padding: 0;

		ul {
			margin-left: 15px;
		}

		li {
			line-height: normal;
			display: block;
			position: relative;

			a {
				display: inline-block;
				margin-bottom: 14px;
			}
		}
	}

	> ul {
		margin-bottom: -14px;
	}
}

.widget_recent_comments {
	ul {
		margin: 0;
		padding: 0;
		list-style: none;

		li {
			display: block;
			padding: 11px 0;
			border-bottom: 1px solid $border-color;
		}
	}
}

.widget_pages,
.widget_categories,
.widget_archive {
	select {
		@include select-style;
	}
}
/* WIDGET: #Ads125
========================================= */

#ads125,
.ads125 {
	margin: 0;
	padding: 0;
	list-style: none;

	li {
		background: none;
		border: none;
		float: left;
		margin: 0 15px 10px 0;
		padding: 0;
		max-width: 125px;
		height: auto;
	}
}

/* WIDGET: #Search
========================================= */

.searchform {
	padding: 15px;
	background-color: $secondary-bg;

	> div {
		position: relative;
	}

	input[type="text"],
	input[type="search"] {
		// Styling for the search input if required
	}

	.searchsubmit {
		position: absolute;
		top: 0;
		right: 0;
		height: 100%;
	}
}

/* WIDGET: #Search
========================================= */

.newsletter-form {
	padding: 15px;
	background-color: $secondary-bg;

	> div {
		position: relative;
	}

	input[type="text"],
	input[type="search"] {
		// Styling for the search input if required
	}

	.emailsubmit {
		position: absolute;
		top: 0;
		right: 0;
		height: 100%;
	}
}

/* WIDGET: #Flickr
========================================= */

.flickr_badge_image {
	float: left;
	margin: 0 15px 15px 0;

	a {
		display: block;
		line-height: 0;
	}
}

/* WIDGET: #About
========================================= */

.widget-about {

	h5 {
		text-transform: uppercase;;
	}

	.widget-about-avatar {
		margin: 0 0 25px;

		img {
			height: auto;
			padding: 15px;
			background-color: $secondary-bg;
		}
	}

	.alignleft {
		float: left;
		margin: 5px 15px 6px 0;
	}

	.alignright {
		float: right;
		margin: 5px 0 6px 15px;
	}
}

/* WIDGET: #Text Widget
========================================= */

.widget_text p:last-child {
	margin-bottom: 0;
}

/* WIDGET: #Twitter
========================================= */

.widget_ci_twitter_widget {
	ul {
		margin: 0;
		padding: 0;
		list-style: none;

		li {
			margin-bottom: 12px;
		}

		li:first-child {
			padding-top: 0;
		}
	}

	.twitter-time {
		display: block;
		font-size: 0.85em;
	}
}

/* WIDGET: #Calendar
================================================== */

#wp-calendar {
	width: 100%;

	a {
		font-weight: bold;
		font-style: italic;
	}

	caption {
		text-align: left;
		margin-top: 10px;
		background: none repeat scroll 0 0 rgba(0, 0, 0, 0.03);
		padding: 9px;
	}

	thead {
		font-size: 10px;

		th {
			background: rgba(0, 0, 0, 0.1);
			font-weight: bold;
			padding: 8px;
		}
	}

	tbody {
		td { background: none; border: 1px solid rgba(0, 0, 0, 0.1); text-align: center; padding: 3px;}
		td:hover { background: rgba(0, 0, 0, 0.1); }
		.pad { background: none; }
	}

	tfoot {
		#next { font-size: 10px; text-transform: uppercase; text-align: right; }
		#prev { font-size: 10px; text-transform: uppercase; padding-top: 10px; }
	}
}

/* Social Icons
========================================= */
.social-icons {
	@include clearfix;
	margin: 0;
	padding: 0;
	list-style: none;

	li {
		float: left;
		margin: 0 0 -1px -1px;
		padding: 0;
	}
}

.social-icon {
	display: inline-block;
	width: 50px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	font-size: 14px;
	border: 1px solid $border-color;
	color: $text-color-light;

	&:hover {
		background-color: $secondary-bg;
		color: $primary-color;
	}

	.social-icons-sm & {
		width: 34px;
		height: 34px;
		line-height: 34px;
		font-size: 12px;
	}
}