body{
	background: #ccc;
}
#page{
	background: #fff;
	max-width: 1200px;
	width: 100%;
	box-sizing: border-box;
	padding: 15px;
	margin: 0 auto;
}
#errors{
	color: red;
}
/* header */
.top-banner{
	text-align: center;
}
.header-image{
	max-width: 100%;
}
.menu{
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
	background: #9cc;
}
.menu > *{
	margin: 1px 1%;
	padding: 0;
	float: left;
	box-sizing: border-box;
	width: 48%;
	max-width: 130px;
}
.menu > *:hover{
	background: rgba(0,0,0,0.3);
}
.menu a{
	display: block;
	margin: 0;
	padding: 5px;
	box-sizing: border-box;
	color: #000;
	font-weight: bold;
	text-decoration: none;
	font-size: 15px;
}
.menu a .fa{
	font-size: 20px;
}
.menu > *:hover a{
	color: #fff;
}
.menu:after{
	content: '';
	display: block;
	clear: both;
}
/* form elements */
.formlist label{
	display: block;
}
.formlist textarea{
	min-height: 50px;
}
.page.attendance #class-filter{
	display: block;
}
input[type="checkbox"] {
    width: 17px;
    height: 17px;
}
/* calendar */
table.calendar {
    width: 100%;
    max-width: 400px;
}
table.calendar tr{
}
table.calendar td{
	height: 30px;
	background: #bbc;
	vertical-align: top;
	position: relative;
	width: 14.1%;
}
table.calendar td span.day {
	font-size: 0.7em;
	top: 0;
	display: inline-block;
	line-height: 0.9em;
	background: #fff;
	border-radius: 0 0 20px;
	padding: 0 5px 5px 0;
	position: absolute;
	left: 0;
}
table.calendar td span.count,
table.calendar td span.totalcount {
	line-height: 30px;
	text-align: right;
	width: 100%;
	display: inline-block;
}
table.calendar td span.count{
	display: none;
}
table.calendar td a {
	width: 100%; 
	height: 30px;
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	text-decoration: none;
}
table.calendar td.mainmonth {
	background: #ddd;
}
table tr.student.filtered, 
table tr.student.hidden {
	display: none;
}
table tr.student.inactive{
	color: #777;
	font-style: italic;
} 
/* notifications */
.notification{
	margin-right: 10px;
	color: blue;
	font-size: 1.1em;
}
.notification.pastdue{
	color: red;
}
.notification.close,
.notification.dueunknown{
	color: orange;
}
.notification:hover:after {
	content: attr(title);
	display: block;
	position: absolute;
	margin: -26px 5% 0;
	width: 90%;
	max-width: 300px;
	background: #eef;
	padding: 10px 15px;
	box-sizing: border-box;
	border-radius: 15px;
	text-align: center;
	color: black;
	border: 1px solid blue;
}
.studentlist .list table {
	counter-reset: students;
}
.studentlist .list table tbody tr:not(.inactive) {
	counter-increment: students;
}
.studentlist .list table tbody tr:not(.inactive) td:first-child:before {
	content: counter(students) ' - ';
}
.attendancerecord.pending,
.attendancerecord.pending a {
	text-decoration: line-through red;
}
/* make it spread out on a larger screen */
@media screen and (min-width: 600px){
	.formlist label{
		display: inline-block;
		width: 70px;
		text-align: right;
		margin-right: 5px;
	}
	.formlist.widelist label{
		width: 120px;
	}
	.menu > *{
		width: auto;
		margin: 1px 15px;
	}
	.page.attendance #class-filter{
		display: inline;
	}
	.page.attendance:after {
		content: '';
		display: block;
		clear: both;
	}
	.page.attendance > * {
		float: left;
	}
	.page.attendance .attendancerecords {
		margin-left: 100px;
	}
	.page.attendance .attendancerecords h3 {
		margin-top: 0;
	}
}
@media screen and (min-width: 768px){
	.page.attendance:after {
		content: '';
		display: block;
		clear: both;
	}
	.page.attendance > * {
		float: left;
	}
	.page.attendance .attendancerecords {
		float: right;
	}
	.page.attendance .attendancerecords h3 {
		margin-top: 0;
	}
}
/*
 * groupid-1
 * Testing
 */
body.groupid-1 {
	background: #ccc;
}
body.groupid-1 a,
body.groupid-1 a:visited{
	color: #009561;
}
body.groupid-1 a:active,
body.groupid-1 a:hover{
	color: #007cb9;
}
body.groupid-1 #page{
	background: #fff;
}
body.groupid-1 #errors{
	color: red;
}
body.groupid-1 .top-banner{
	background: #000;
	padding: 10px 0 0;
}
body.groupid-1 .menu{
	background: #000;
}
body.groupid-1 .menu a{
	color: #fff;
}
body.groupid-1 .menu > *:nth-child(4n+1):hover{ background: rgba(  0,149, 97,0.3);/*#009561*/ }
body.groupid-1 .menu > *:nth-child(4n+2):hover{ background: rgba(228, 18, 18,0.3);/*#e41212*/ }
body.groupid-1 .menu > *:nth-child(4n+3):hover{ background: rgba(246,185, 62,0.3);/*#f6b93e*/ }
body.groupid-1 .menu > *:nth-child(4n+4):hover{ background: rgba(  0,124,185,0.3);/*#007cb9*/ }
body.groupid-1 .menu > *:nth-child(4n+1):hover a{ color: #009561; }
body.groupid-1 .menu > *:nth-child(4n+2):hover a{ color: #e41212; }
body.groupid-1 .menu > *:nth-child(4n+3):hover a{ color: #f6b93e; }
body.groupid-1 .menu > *:nth-child(4n+4):hover a{ color: #007cb9; }
body.groupid-1 table.calendar td{
	background: #bbc;
}
body.groupid-1 table.calendar td span.day {
	background: #fff;
}
body.groupid-1 table.calendar td.mainmonth {
	background: #ddd;
}
body.groupid-1 .notification{
	color: black;
}
body.groupid-1 .notification.pastdue{
	color: red;
}
body.groupid-1 .notification.close,
body.groupid-1 .notification.dueunknown{
	color: orange;
}
body.groupid-1 .notification:hover:after {
	background: #eee;
	color: black;
	border: 1px solid black;
}
/*
 * groupid-2
 * Taylorsville
 */
body.groupid-2 {
	background: #ccc;
}
body.groupid-2 a,
body.groupid-2 a:visited{
	color: #009561;
}
body.groupid-2 a:active,
body.groupid-2 a:hover{
	color: #007cb9;
}
body.groupid-2 #page{
	background: #fff;
}
body.groupid-2 #errors{
	color: red;
}
body.groupid-2 .top-banner{
	background: #000;
	padding: 10px 0 0;
}
body.groupid-2 .menu{
	background: #000;
}
body.groupid-2 .menu a{
	color: #fff;
}
body.groupid-2 .menu > *:nth-child(4n+1):hover{ background: rgba(  0,149, 97,0.3);/*#009561*/ }
body.groupid-2 .menu > *:nth-child(4n+2):hover{ background: rgba(228, 18, 18,0.3);/*#e41212*/ }
body.groupid-2 .menu > *:nth-child(4n+3):hover{ background: rgba(246,185, 62,0.3);/*#f6b93e*/ }
body.groupid-2 .menu > *:nth-child(4n+4):hover{ background: rgba(  0,124,185,0.3);/*#007cb9*/ }
body.groupid-2 .menu > *:nth-child(4n+1):hover a{ color: #009561; }
body.groupid-2 .menu > *:nth-child(4n+2):hover a{ color: #e41212; }
body.groupid-2 .menu > *:nth-child(4n+3):hover a{ color: #f6b93e; }
body.groupid-2 .menu > *:nth-child(4n+4):hover a{ color: #007cb9; }
body.groupid-2 table.calendar td{
	background: #bbc;
}
body.groupid-2 table.calendar td span.day {
	background: #fff;
}
body.groupid-2 table.calendar td.mainmonth {
	background: #ddd;
}
body.groupid-2 .notification{
	color: black;
}
body.groupid-2 .notification.pastdue{
	color: red;
}
body.groupid-2 .notification.close,
body.groupid-2 .notification.dueunknown{
	color: orange;
}
body.groupid-2 .notification:hover:after {
	background: #eee;
	color: black;
	border: 1px solid black;
}