﻿@media (min-width: 800px) {
	.event-body {
		margin-bottom: 20px;

		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	#calendar-stackbody {
		display: none;
	}

	.event-selectorbar {
		background-color: #003365FF;

		display: flex;
		justify-content: space-between;

		border-radius: 10px;
		box-shadow: 0 0 15px #00336588;
		
		overflow: hidden;
	}

	.event-selectorbar-navbtn {
		background-color: #003365FF;

		height: 100%;

		padding-left: 10px;
		padding-right: 10px;

		border: 0px solid #00000000;

		cursor: pointer;
		transition: background-color 0.25s ease;
	}
		.event-selectorbar-navbtn:hover {
			background-color: #067CEBFF;
		}

	#navbtn-leftbtn {
		width: 40px;
	}
	#navbtn-rightbtn {
		width: 40px;
	}


	.calendar-container {
		background-color: #003365FF;
		padding: 0px;

		margin-top: 10px;
		margin-bottom: 10px;

		border: 3px solid #003365FF;
		box-shadow: 0 0 15px #00336588;
		border-radius: 10px;
		overflow: hidden;
		box-sizing: border-box;
	}
	#calendar-content {
		background-color: #DCE4F8FF;

		width: 100%;

		table-layout: fixed;

		border-collapse: collapse;
		border-radius: 10px;
	}

	.calendar-column {
		width: 14.2857%;
	}

	.calendar-headrow {
		background-color: #003365FF;

		border-left: 2px solid #003365FF;
		border-right: 2px solid #003365FF;
	}

	.calendar-bodycell {
		height: 100px;

		padding: 1px;

		border: 2px solid #003365FF;
	}

	.calendar-bodycell-cover {
		width: 100%;
		height: 100%;

		top: 0px;
		
		position: relative;
	}

	.calendar-bodycell-coverbtn {
		background-color: #00000000;

		width: 100%;
		height: 98.5%;

		position: absolute;

		box-sizing: border-box;
		border: 0px solid #00000000;

		cursor: pointer;
		transition: background-color 0.25s ease;
	}
		.calendar-bodycell-coverbtn:hover {
			background-color: #067CEB44;
		}

	.calendar-bodycell-content {
		padding: 5px;
	}

	.calendar-bodycell-header {
		margin: 0px;
	}

	.calendar-bodycell-entry {
		margin: 0px;
		margin-top: 5px;
	}


	#day-stack {
		background-color: #DCE4F8FF;

		width: 100%;
	}

	.day-evententry {
		background-color: #DCE4F8FF;

		display: flex;
		justify-content: space-between;

		border-top: 1px solid #003365FF;
		border-bottom: 1px solid #003365FF;
		box-sizing: border-box;
	}
	.day-missingtext {
		width: 100%;
	}

	.day-titlesect {
		background-color: #003365FF;

		width: 15%;

		padding-left: 5px;
		padding-right: 5px;
		padding-top: 2px;
		padding-bottom: 2px;

		cursor: default;
	}

	.day-eventdesc {
		width: 70%;

		margin-right: auto;

		padding-left: 5px;
		padding-right: 5px;
		padding-top: 5px;
		padding-bottom: 5px;

		display: flex;
		align-items: center;

		cursor: default;
	}
	.day-longdesc {
		margin-top: auto;
		margin-bottom: auto;
	}
	.day-shortdesc {
		display: none;
	}

	.day-actionsect {
		width: 15%;

		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
	.day-delbtn {
		width: 60px;
		height: 30px;
	}


	.splash-titlesect {
		width: 20%;
	}
	.splash-eventsect {
		width: 75%;

		margin-left: auto;
		margin-right: 0px;
	}
}

@media (min-width: 500px) and (max-width: 799px) {
	.event-body {
		margin-bottom: 20px;

		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.event-selectorbar {
		background-color: #003365FF;

		display: flex;
		justify-content: space-between;

		border-radius: 10px;
		box-shadow: 0 0 15px #00336588;
		
		overflow: hidden;
	}

	.event-selectorbar-navbtn {
		background-color: #003365FF;

		height: 100%;

		padding-left: 10px;
		padding-right: 10px;

		border: 0px solid #00000000;

		cursor: pointer;
		transition: background-color 0.25s ease;
	}
		.event-selectorbar-navbtn:hover {
			background-color: #067CEBFF;
		}

	#navbtn-leftbtn {
		width: 40px;
	}
	#navbtn-rightbtn {
		width: 40px;
	}


	.calendar-container {
		padding: 0px;

		margin-top: 10px;
		margin-bottom: 10px;

		border: 3px solid #003365FF;
		box-shadow: 0 0 15px #00336588;
		border-radius: 10px;
		overflow: hidden;
		box-sizing: border-box;
	}
	#calendar-monthbody {
		display: none;
	}

	#calendar-content {
		background-color: #DCE4F8FF;

		width: 100%;

		table-layout: fixed;

		border-collapse: collapse;
	}

	.calendar-column {
		width: 14.2857%;
	}

	.calendar-headrow {
		background-color: #003365FF;

		border-left: 2px solid #003365FF;
		border-right: 2px solid #003365FF;
	}

	.calendar-bodycell {
		height: 100px;

		padding: 1px;

		border: 2px solid #003365FF;
	}

	.calendar-bodycell-cover {
		width: 100%;
		height: 100%;

		top: 0px;
		
		position: relative;
	}

	.calendar-bodycell-coverbtn {
		background-color: #00000000;

		width: 100%;
		height: 98.5%;

		position: absolute;

		box-sizing: border-box;
		border: 0px solid #00000000;

		cursor: pointer;
		transition: background-color 0.25s ease;
	}
		.calendar-bodycell-coverbtn:hover {
			background-color: #067CEB44;
		}

	.calendar-bodycell-content {
		padding: 5px;
	}

	.calendar-bodycell-header {
		margin: 0px;
	}

	.calendar-bodycell-entry {
		margin: 0px;
		margin-top: 5px;
	}

	.calendar-dayentry {
		min-height: 50px;

		display: flex;
		justify-content: space-between;

		border-top: 1px solid #003365FF;
		border-bottom: 1px solid #003365FF;
	}
	.calendar-dayentry-date {
		background-color: #003365FF;

		width: 27%;

		padding-left: 5px;
		padding-right: 5px;
		padding-top: 5px;
		padding-bottom: 5px;

		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.calendar-dayentry-content {
		width: 73%;

		position: relative;
	}
	.calendar-bodycell-content {
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 5px;
		padding-bottom: 5px;

		display: block;
	}

	.calendar-dayentry-innertext {
		margin: 0px;
	}


	#day-stack {
		background-color: #DCE4F8FF;

		width: 100%;
	}

	.day-evententry {
		background-color: #DCE4F8FF;

		display: flex;
		justify-content: space-between;

		border-top: 1px solid #003365FF;
		border-bottom: 1px solid #003365FF;
		box-sizing: border-box;
	}
	.day-missingtext {
		width: 100%;
	}

	.day-titlesect {
		background-color: #003365FF;

		width: 15%;
		min-width: 75px;

		padding-left: 5px;
		padding-right: 5px;
		padding-top: 2px;
		padding-bottom: 2px;

		cursor: default;
	}

	.day-eventdesc {
		width: 65%;

		margin-right: auto;

		padding-left: 5px;
		padding-right: 5px;
		padding-top: 5px;
		padding-bottom: 5px;

		display: flex;
		align-items: center;

		cursor: default;
	}
	.day-longdesc {
		display: none;
	}
	.day-shortdesc {
		margin-top: auto;
		margin-bottom: auto;
	}

	.day-actionsect {
		width: 20%;

		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
	}
	.day-delbtn {
		width: 55px;
		height: 25px;
	}


	.splash-titlesect {
		width: 20%;
	}
	.splash-eventsect {
		width: 75%;

		margin-left: auto;
		margin-right: 0px;
	}
}

@media (min-width: 0px) and (max-width: 499px) {
	.event-body {
		margin-bottom: 20px;

		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.event-selectorbar {
		background-color: #003365FF;

		display: flex;
		justify-content: space-between;

		border-radius: 10px;
		box-shadow: 0 0 15px #00336588;
		
		overflow: hidden;
	}

	.event-selectorbar-navbtn {
		background-color: #003365FF;

		height: 100%;

		padding-left: 10px;
		padding-right: 10px;

		border: 0px solid #00000000;

		cursor: pointer;
		transition: background-color 0.25s ease;
	}
		.event-selectorbar-navbtn:hover {
			background-color: #067CEBFF;
		}

	#navbtn-leftbtn {
		width: 40px;
	}
	#navbtn-rightbtn {
		width: 40px;
	}


	.calendar-container {
		padding: 0px;

		margin-top: 10px;
		margin-bottom: 10px;

		border: 3px solid #003365FF;
		box-shadow: 0 0 15px #00336588;
		border-radius: 10px;
		overflow: hidden;
		box-sizing: border-box;
	}
	#calendar-monthbody {
		display: none;
	}

	#calendar-content {
		background-color: #DCE4F8FF;

		width: 100%;

		table-layout: fixed;

		border-collapse: collapse;
	}

	.calendar-column {
		width: 14.2857%;
	}

	.calendar-headrow {
		background-color: #003365FF;

		border-left: 2px solid #003365FF;
		border-right: 2px solid #003365FF;
	}

	.calendar-bodycell {
		height: 100px;

		padding: 1px;

		border: 2px solid #003365FF;
	}

	.calendar-bodycell-cover {
		width: 100%;
		height: 100%;

		top: 0px;
		
		position: relative;
	}

	.calendar-bodycell-coverbtn {
		background-color: #00000000;

		width: 100%;
		height: 98.5%;

		position: absolute;

		box-sizing: border-box;
		border: 0px solid #00000000;

		cursor: pointer;
		transition: background-color 0.25s ease;
	}
		.calendar-bodycell-coverbtn:hover {
			background-color: #067CEB44;
		}

	.calendar-bodycell-content {
		padding: 5px;
	}

	.calendar-bodycell-header {
		margin: 0px;
	}

	.calendar-bodycell-entry {
		margin: 0px;
		margin-top: 5px;
	}

	.calendar-dayentry {
		min-height: 50px;

		display: flex;
		justify-content: space-between;

		border-top: 1px solid #003365FF;
		border-bottom: 1px solid #003365FF;
	}
	.calendar-dayentry-date {
		background-color: #003365FF;

		width: 27%;

		padding-left: 5px;
		padding-right: 5px;
		padding-top: 5px;
		padding-bottom: 5px;

		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.calendar-dayentry-content {
		width: 73%;

		position: relative;
	}
	.calendar-bodycell-content {
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 5px;
		padding-bottom: 5px;

		display: block;
	}

	.calendar-dayentry-innertext {
		margin: 0px;
	}


	#day-stack {
		background-color: #DCE4F8FF;

		width: 100%;
	}

	.day-evententry {
		background-color: #DCE4F8FF;

		display: flex;
		justify-content: space-between;

		border-top: 1px solid #003365FF;
		border-bottom: 1px solid #003365FF;
		box-sizing: border-box;
	}
	.day-missingtext {
		width: 100%;
	}

	.day-titlesect {
		background-color: #003365FF;

		width: 20%;
		min-width: 65px;

		padding-left: 5px;
		padding-right: 5px;
		padding-top: 2px;
		padding-bottom: 2px;

		cursor: default;
	}

	.day-eventdesc {
		width: 55%;

		margin-right: auto;

		padding-left: 5px;
		padding-right: 5px;
		padding-top: 5px;
		padding-bottom: 5px;

		display: flex;
		align-items: center;

		cursor: default;
	}
	.day-longdesc {
		display: none;
	}
	.day-shortdesc {
		margin-top: auto;
		margin-bottom: auto;
	}

	.day-actionsect {
		width: 25%;

		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
	}
	.day-delbtn {
		width: 40px;
		height: 25px;
	}


	.splash-titlesect {
		width: 20%;
	}
	.splash-eventsect {
		width: 75%;

		margin-left: auto;
		margin-right: 0px;
	}
}