@import url('https://fonts.googleapis.com/css?family=Josefin+Slab:700|Open+Sans+Condensed:300');

* {
	font-family: sans-serif;
	box-sizing: border-box;
}
html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
.middle-school-link, .button-group a {
	text-decoration: none;
	color: black;
	border: 1px solid black;
	padding: .5em;
	display: inline-block;
}
.middle-school-link:hover, .button-group a:hover {
	background: #ddd;
}
.middle-school-link {
	margin: .5em;
	border-radius: 8px;
}
.button-group a {
	border-right: none;
}
.button-group a:first-child {
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
}
.button-group a:last-child {
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
	border-right: 1px solid black;
}
body {
	background: url("Img_Res/bg_bottom.png") center bottom no-repeat, url("Img_Res/bg_topleft.png") left top no-repeat, url("Img_Res/bg_topright.png") right top no-repeat, url("Img_Res/bg_bottomright.png") right bottom no-repeat, url("Img_Res/bg_bottomleft.png") left bottom no-repeat, url("Img_Res/bg_tile.svg") center/20%;
	background-attachment: fixed;
	margin: 0;
}
h1 {
	margin: 0;
	padding: 0;
}
.header-logo {
	width: 20em;
	height: auto;
	margin: 2em;
}
.button-bar {
	text-align: center;
}
.section, .form, .admin-page, .info-page {
	margin: 0 auto;
	max-width: 60em;
	border: 2px solid black;
	box-shadow: 10px 10px rgba(0,0,0, 0.1);
	background: white;
}
.main h2 {
	font-family: 'Josefin Slab', serif;
	padding: .2em;
	background: #02ae8d;
	color: white;
}
.titlebar {
	text-align: center;
	font-weight: normal;
	font-size: 12px;
	margin: 0;
	padding: 0;
	height: 2em;
	line-height: 2em;
	position: relative;
	letter-spacing: .3px;
	color: white;
	background: #02ae8d;
}
form {
	padding: 1em;
}
body {
    overflow-y: scroll;
}
body.no-scroll {
    position: fixed;
    width: 100%;
	pointer-events: none;
}
.editor {
	position: fixed;
	margin: 0 auto;
	top: 50%;
	left: 0;
	right: 0;
	background: #eee;
	border: none;
	border-radius: 0px;
	box-shadow: 0 0 0 1px black, 0 0 20px rgba(0,0,0,0.25);
	margin: 0 auto;
	max-width: 22em;
	display: block;
	transform: translate(0,-50%);
	pointer-events: all;
}
.editor-hidden {
	pointer-events: none;
	display: none;
}
#editor-bg {
	background: black;
	opacity: .4;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
input[type=text], input[type=password], input[type=number], textarea {
	cursor: text;
	width: 100%;
	display: block;
}
.admin-list {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.admin-list li {
	font-size: 12px;
	padding: .5em;
	box-shadow: 0 1px rgba(0,0,0,0.5) inset;
	position: relative;
}
.admin-list li::after {
	position: absolute;
	top: 0;
	right: 0;
	width: 20px;
	height: 20px;
	border-bottom-left-radius: 20px;
	content: "";
	display: block;
	background: #888;
}
.admin-list li[data-school="1"]::after {
	background: purple;
}
.admin-list li[data-school="2"]::after {
	background: maroon;
}
.add-prereq .admin-list li:hover {
	background: #cfe;
	cursor: pointer;
}
.add-prereq .admin-list li * {
	pointer-events: none;
}
.add-prereq::after {
	position: fixed;
	top: 40px;
	left: 50%;
	transform: translate(-50%,0);
	color: #fff;
	content: "Click on a class to add it as a prerequisite.";
	background: #02ae8d;
	padding: 1em;
	border-radius: 4px;
}
.prereq {
	background: #02ae8d;
	color: white;
	padding: .25em;
	font-size: 12px;
	margin: .25em;
	display: inline-block;
}
.prereq button {
	margin: 0;
	width: 1em;
	height: 1em;
	text-align: center;
	line-height: 1em;
	padding: 0;
	background: none;
	border: none;
	box-shadow: none;
	color: white;
	cursor: pointer;
}
.prereq button:hover {
	background: white;
	color: #02ae8d;
}
.prereq-notes {
	font-weight: bold;
	color: #063;
}
@keyframes loading {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
.loading {
	margin-top: 0.5em;
	text-align: center;
}
.loading::before {
	display: inline-block;
	content: "";
	margin-right: .5em;
	padding: 0;
	width: 1em;
	height: 1em;
	border-radius: .5em;
	box-shadow: 0 2px 0 black inset;
	animation: 1s linear infinite loading;
}
button {
	border: 1px solid black;
	box-shadow: none;
	background: white;
	padding: .25em;
	margin: .1em;
	color: black;
	transition: box-shadow 0.2s;
}
button:hover {
	background: #eee;
	border: 1px solid #02ae8d;
	box-shadow: 0 0 0 2px #02ae8d;
}
button:active {
	background: #02ae8d;
	border: 1px solid #02ae8d;
	box-shadow: 0 0 0 1px #000;
	color: white;
}
button:focus {
	outline: 1px dashed #02ae8d;
	outline-offset: 2px;
}
input[type=text], input[type=password], textarea, select {
	border: 1px solid black;
	background: white;
	padding: .25em;
	margin: .1em;
	font-size: 16px;
	box-shadow: none;
	flex: 1;
	position: relative;
	transition: box-shadow 0.2s;
}
input[type=text].inline {
	display: inline;
	width: auto;
}
::selection {
	background: #02ae8d;
	color: white;
}
textarea {
	font-family: monospace;
}
select {
	border-radius: 4px;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 1.5em;
	background: url("Img_Res/ui_chevron.svg") right/1.5em no-repeat, white;

}
select[multiple] {
	height: 10em;
	background: none;
}
input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus  {
	outline: none;
	border: 1px solid #02ae8d;
	box-shadow: 0 0 0 2px #02ae8d;
}
.admin-list h4 {
	padding: 0;
	margin: 0;
}
.admin-list p {
	padding: 0;
	padding-bottom: .5em;
	margin: 0;
}
.form-row {
	text-align: center;
}
.form-row h3 {
	text-align: left;
	font-weight: normal;
	color: grey;
	font-size: 80%;
	padding: 0;
	margin: 0;
}
select {
	width: 100%;
}
textarea {
	resize: none;
	height: 16em;
}
.admin-bar {
	background: rgba(0,0,0,0.6);
	color: white;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	display: flex;
	border-bottom-right-radius: 6px;
}
.admin-bar a {
	display: block;
	padding: .25em 1em;
	color: white;
	text-decoration: none;
	cursor: pointer;
	font-size: 12px;
}
.admin-bar a:last-child {
	border-bottom-right-radius: 6px;
}
.admin-bar a:hover {
	background: rgba(255,255,255,0.3);
}
.section {
	display: flex;
	flex-wrap: wrap;
}
.sep {
	margin: 0 2px;
	padding: 0;
	width: 1px;
	background: grey;
}
.toolbar {
	color: #eee;
	border-bottom: 1px solid grey;
	width: 100%;
	display: flex;
}
.toolbar button {
	padding: .5em;
	margin: 2px;
	font-size: 14px;
}
.course-list {
	flex: 1;
	text-align: center;
	border-left: #ccc;
}
.table-container {
	border-right: 1px solid black;
	flex: 2;
	background: #fff;
}
table {
	width: 100%;
	table-layout: fixed;
}
td {
	padding: .5em;
	font-size: 12px;
	border: 1px solid grey;
	border-radius: 0px;
	background: white;
	text-align: center;
}
.dragging td .course:not(.selected) {
	pointer-events: none;
}
tr th:first-child {
	width: 2em;
}
.footer {
	clear: both;
}
.course {
	display: inline-block;
	padding: 0.3em;
	margin: 0.15em;
	border: 1px solid #ccc;
	cursor: move;
	font-size: 12px;
	background: #fff;
}
.course * {
	pointer-events: none;
}
.course:hover {
	border: 1px solid grey;
	box-shadow: 0 0 8px rgba(0,0,0,0.25);
}
.course.selected {
	box-shadow: 0 0 0 2px #02ae8d;
	border: 1px solid #02ae8d;
}
td.selected, td.drop-target {
	box-shadow: 0 0 0 2px #02ae8d inset;
	border: 1px solid #02ae8d;
}
#error {
	margin: .5em;
	text-align: center;
}
#course-desc {
	margin: .5em;
	font-size: 12px;
}
header .course {
	font-size: 16px;
	font-weight: bold;
}
.search-bar {
	display: flex;
}
.hidden, .hidden-filter {
	display: none;
}
td:hover {
	background-image: linear-gradient( rgba(2, 174, 141, 0.2), rgba(2, 174, 141, 0.25) );
}
td:active {
	background-image: linear-gradient( rgba(2, 174, 141, 0.5), rgba(2, 174, 141, 0.6) );
}
.trash {
	color: red;
	display: inline-block;
	padding: .5em;
	border: 2px solid red;
	background: #fff4f4;
	cursor: default;
}
.trash.drop-target, .trash:hover {
	color: white;
	background: red;
}
.trash.drop-target::after {
	display: none;
}
.header {
	text-align: center;
}
.footer {
	padding: .5em;
	text-align: center;
}
.landing-page {
	background: black;
	color: white;
	min-height: 100%;
	background: url("Img_Res/bg_bottom.png") center bottom no-repeat, url("Img_Res/bg_topleft.png") left top no-repeat, url("Img_Res/bg_topright.png") right top no-repeat, url("Img_Res/bg_bottomright.png") right bottom no-repeat, url("Img_Res/bg_bottomleft.png") left bottom no-repeat, linear-gradient(#111, #000);
	background-attachment: fixed;
	text-align: center;
}
.landing-page h1, .landing-page h2 {
	padding-top: 1em;
	text-align: center;
	text-shadow: 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black;
}
.landing-page h1 {
	font-family: 'Josefin Slab', serif;
	font-size: 300%;
}
.header h1 {
	padding: 1em;
	text-align: center;
	font-family: 'Josefin Slab', serif;
}
.grade-group a {
	font-family: 'Open Sans Condensed', sans-serif;
	background: white;
	border-radius: 1em;
	color: black;
	text-decoration: none;
	font-size: 24px;
	padding: .5em;
	margin: 0.2em;
	min-width: 2em;
	line-height: 1em;
	text-align: center;
	display: inline-block;
	transition: transform .2s, opacity .2s;
}
.grade-list a:first-child, .grade-list a:last-child {
	position: relative;
	top: -20px;
}
.grade-group a:hover {
	transform: scale(1.1);
}
.grade-group a:active {
	transform: scale(0.9);
	opacity: 0.8;
}
.other-group {
	max-width: 24em;
	margin: 0 auto;
	padding: 1em;
}
.other-group h2 {
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: 18px;
	font-family: sans-serif;
	background: none;
}
.other-list ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}
.other-list li {
	color: white;
	display: block;
	padding: .5em;
	text-align: center;
	text-decoration: none;
	transition: text-shadow 0.2s;
	color: #bbb;
}
.other-list a {
	color: #fff;
}
.other-list a:hover {
	text-shadow: 0 0 8px white;
	text-decoration: underline;
}
#notification-area {
	position: fixed;
	bottom: 1em;
	right: 1em;
	width: auto;
	padding: .5em;
	background: #fee;
	box-shadow: 0 0 10px black;
}
.course[data-type="1"], td:nth-child(2) {
	background-color: #fee;
}
.course[data-type="2"], td:nth-child(3) {
	background-color: #ffe;
}
.course[data-type="3"], td:nth-child(4) {
	background-color: #efe;
}
.course[data-type="4"], td:nth-child(5) {
	background-color: #eef;
}
.del-ico {
	float: right;
	color: red;
}
.how-to img {
	width: 35em;
	height: auto;
	border: 2px solid black;
	margin: 1em auto;
	display: block;
}
.split-col {
	display: flex;
}
.split-col .col {
	flex: 1;
	padding: .5em;
	border-left: 1px solid #02ae8d;
}
.split-col .col ul {
	padding: .5em;
	padding-left: 2.5em;
	column-count: 1;
}
li span {
	color: #063;
	font-weight: bold;
}
p {
	padding: .5em;
}
hr {
	border: none;
	border-bottom: 1px dashed #02ae8d;
	margin: 0 .5em;
}
.split-col .col:first-child {
	border-left: none;
}
.info-section ul {
	padding: 1em;
	padding-left: 3em;
}
.info-section ul.two-col {
	column-count: 2;
	column-gap: 4em;
}
.info-section h3 {
	padding: .5em;
	padding-bottom: 0;
	color: #02ae8d;
	font-family: 'Josefin Slab', serif;
}
.schedule-link-container {
	text-align: center;
	padding: .5em;
	padding-top: none;
}
a.schedule-link {
	color: #02ae8d;
	background: white;
	border: 2px solid #02ae8d;
	width: auto;
	display: inline-block;
	padding: .25em;
	text-decoration: underline;
}
a.schedule-link:hover {
	color: white;
	background: #02ae8d;
}
@media screen and (max-width: 60em) {
	.section {
		display: block;
		padding: 0.5em;
		border: none;
		max-width: 44em;
	}
	.table-container {
		border: 1px solid grey;
	}
	.how-to img {
		width: 30em;
	}
}
@media screen and (max-width: 36em) {
	tr th:first-child {
		display: none;
	}
	table {
		border-collapse: collapse;
	}
	td {
		padding: 0.5em 0;
	}
	td:first-of-type {
		border-left: none;
	}
	td:last-child {
		border-right: none;
	}
	td .course {
		padding: .1em;
		margin: 0;
		font-size: 10px;
	}
	.header-logo {
		width: 10em;
		margin: 1em;
	}
	.info-section ul.two-col {
		column-count: 1;
	}
	.split-col {
		display: block;
	}
	.split-col .col {
		border-left: none;
		border-top: 1px solid #02ae8d;
	}
	.how-to img {
		width: 14em;
	}
}
@media print {
	.header, .footer {
		display: none;
	}
	body {
		background-color: white;
	}
	.section, .table-container {
		background-color: white;
		border: none;
	}
	.button-bar {
		display: none;
	}
	td {
		text-align: left;
		padding: .5em;
	}
	.course {
		display: list-item;
		margin: 0;
		padding: 0;
		border: none;
		box-shadow: none;
		background: none;
		font-size: 14px;
		margin-left: 1em;
		position: relative;
	}
	.admin-bar, .toolbar {
		display: none;
	}
	.course-list {
		display: none;
	}
	#course-desc {
		display: none;
	}
}