/***** CALENDAR BASE STRUCTURE
	with this file an some variables the calendar will be not very sexy
	but should be functional
**/

.calendar-archives {
	position: relative; // DO NOT CHANGE
	width: 100%; // DO NOT CHANGE
	* {
		box-sizing: border-box !important; // DO NOT CHANGE
	}

	a {
		&:focus,
		&:active {
			outline: none !important;
		}
	}

	> .calendar-navigation {
		position: relative;
		display: table;
		width: 100%;
		height: $navigation-height;
		> .prev-year,
		> .next-year,
		> .menu-container {
			position: relative;
			display: table-cell; // DO NOT CHANGE
			//height: 100%; // DO NOT CHANGE
			height: $navigation-height;
			vertical-align: middle; // DO NOT CHANGE

			> a.title {
				display: block;
				height: $navigation-height;
				line-height: $navigation-height;
			}
			> ul.menu {
				position: absolute;
				display: none;
				width: 100%;
				top: 0;
				overflow: hidden;
				background-color: $menu-bg-color;
				z-index: 99;
			}
			li {
				display: block;
				> a {
					display: block;
					height: $navigation-height;
					line-height: $navigation-height;
				}
			}
			> .arrow-down {
				position: absolute;
				top: 0;
				right: 0;
				height: $navigation-height;
				line-height: $navigation-height;
				font-family: Verdana, Arial, Helvetica, sans-serif;
			}
		}
	}

	> .archives-years {
		position: relative; // DO NOT CHANGE
		overflow: hidden; // DO NOT CHANGE

		// Month/year container. Calendar "pages".
		// DO NOT CHANGE
		> .year {
			position: absolute;
			top: 0;
			left: 0;
			margin-left: -100%;
			width: 100%;
			z-index: 0;
			.year-link {
				display: none;
			}
			&.last {
				position: relative;
			}
			&.current {
				margin-left: 0;
				z-index: 1;
			}
		}
	}

	.month, .day {
		position: relative;
		overflow: hidden;
		float: left;
	}

	.month {
		width: $month-width;
		height: $month-height;
	}
	.day {
		width: $day-width !important;
	}

  .today {
    font-weight: $day-today-font-width;
    color: $day-today-color;
    background-color: $day-today-background;
  }
}

/* FOR PREVIEW IN CONFIGURATION ONLY */
.settings_page_Archives_Calendar_Widget {
	#TB_ajaxContent {
		background-color: $preview-background;
	}
}