.widget-area {
	font-size: .888888889em;

	@media screen and (min-width: $size__site-reg){
		float: left;
		width: $size__site-sidebar;

		+ .content-wrap {
			margin-top: 3.75em;
		}
	}
}

.widget {
	background-color: $color__background-alt;
	color: $color__link;
	margin: 0 0 1.875em 0;
	overflow: hidden;
	padding: 0;
	padding: 1.875em 1em;

	@media screen and (min-width: $size__site-med){
		padding: 1.875em;
	}

	/* Make sure select elements fit in widgets. */
	select {
		max-width: 100%;
	}

	ul {
		list-style: none;
		margin-bottom: 0;
		margin-left: 0;

		li {
			margin-bottom: 5px;
		}
	}

	a {
		color: $color__text-main;

		&:hover {
			color: $color__link-hover;
		}
	}
}

.widget-title {
	color: $color__meta;
	font-size: 1.277777778em; // 23/18
	margin-bottom: 10px;
	margin-top: 0;
}

/* Search widget. */
.widget_search .search-submit {
	display: none;
}

.search.search-no-results .site-footer {
	.widget {
		input[type="search"] {
			background-color: #fff;
			width: 100%;
		}
	}
}

/* Calendar */
#wp-calendar {
	font-size: .75em;

	caption {
		margin-bottom: 10px;
	}

	th, td {
		padding: 5px;
		text-align: center;
	}

	thead {
		margin-top: 10px;

		th {
			//background-color:  $color__background-hr;
		}
	}

	tbody {

		td {
			background-color: #fff;
			border: 1px solid $color__background-hr;

			&.pad {
				background-color: $color__background-alt;
				border-top: 1px solid #fff;
			}
		}

	}
}

/*--------------------------------------------------------------
9.3 About Me Widget
--------------------------------------------------------------*/
.simple-melody-about-me-widget-container {

	.simple-melody-about-me-image {
		background-size: cover;
		background-position: center;
		margin: 15px auto;
		width: 150px;
		height: 150px;

		&.-circle {
			border-radius: 50%;
		}
	}

	.text-container {
		line-height: 1.6;
		font-size: .9375rem;

		p:first-of-type {
			margin-top: 0;
		}
	}

	.simple-melody-about-me-read-more {

		a.simple-melody-about-me-link {
			color: $color__link-hover;
			font-size: .875rem;

			&:hover {
				color: $color__link;
			}

			&:after {
				content: '\00BB';
				padding-left: .5em;
			}
		}

		.site-footer & {

		}
	}
}
