/* This section of styles handles the layout */

/* This is the top bar on the page that contains the site information.
It disappears when the user scrolls down. */

body {
	margin: 0;
}

.sydaviContainer {
	margin-right: auto;
	justify-content: center;
	align-content: center;
	text-align: center;
}

.main-grid-container {
	display: grid;
	grid-template-columns: auto auto;
	grid-gap: 10px;
	justify-content: center;
	align-content: center;
}

.header {
	position: relative;
	height: 110px;
	padding: 0px 16px;
	line-height: 60px;
	background-color: #FFFFFF;
	color: #f1f1f1;
	overflow:hidden;
	z-index: 2;
}

.siteName {
	line-height: 60px;
	font-family: 'Times New Roman', Times, sans-serif;
	font-style: italic;
	font-size: 30px;
	font-weight: bold;
	letter-spacing: 2px;
	color: #778899;
	text-shadow: 0px 0px #000000;
	display: block;
	position: absolute;
	top: 17px;
}

.welcome {
	float: right!important;
	letter-spacing: 2px;
}

.profilePhoto {
	box-shadow: 0px 8px 16px 0px #00000033;
}

img.profilePhoto {
	width: 100px;
	height: 100px;
}

.centreCrest {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 120px;
	height: 120px;
}

.leftCrest {
	width: 120px;
	height: 120px;
	margin: 0px;
	float: left!important;
}

.rightCrest {
	width: 120px;
	height: 120px;
	margin: 0px;
	float: right!important;
}

/* This is the sticky navbar that scrolls to the top of the page. */
.horizontalNavBar {
	position: relative;
	background-color: #24B6AE;
    background-image: linear-gradient(to bottom right, darkturquoise, LightSeaGreen); /*gradient color effect*/
	box-shadow: 0 2px 5px 0 #00000029,0 2px 10px 0 #0000001F;
	color: #24B6AE;
	width: 100%;
	padding: 0px;
	letter-spacing: 1px;
	overflow: hidden;
	z-index: 2;
}

.horizontalNavBar a {
	float: left;
/*	display: inline-block;	*/
	position: relative;
	color: #FFFFFF;
	text-align: center;
	vertical-align: middle;
	padding: 10px 14px;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	z-index: 2;
}

/* change the colour of the menu items on hover. #4CAF50*/
.horizontalNavBar a:hover {
	background-color: #FFFAF0;
	opacity: 0.6;
    color: black;
}

/* Set the colour of the active link. */
.horizontalNavBar a.active {
	background-color: #4CAF50;
	color: white;
}

/* This class will keep the bar at the top of the window */
.horizontalNavBar.sticky {
    position: sticky;
    top: 0px;
}

/* Positions an item on the right side of the nav bar */
.horizontalNavBar-RightLink {
    float: right;
}

/* This is the sidebar */
.sideMenu {
    width: 220px;
	border-right-style: solid;
	border-width: 1px;
	border-color: #028AC6;    
	text-decoration: none;
	z-index: 1;
} 

.sideMenuInner {
	position: fixed;
	top: 0px;
	padding-top: 20px;
	padding-bottom: 0;    
	height: 100%;
	width: 220px;
	background-color: transparent;
	box-sizing: border-box;
}

.sideMenuInnerInner {
	height: 100%;
	width: 100%;
	overflow-y: scroll;
	overflow-x: hidden;
	padding-top: 10px;
	box-sizing: border-box;
}

/* This class will keep the sidebar just below the menu bar */
.stickySideMenu {
	position: fixed;
	top: 30px;
}

.mainArea {
	display: grid;
	grid-template-columns: auto auto;
	margin-left: 220px;
	padding-top: 0px;
	position: relative;
}

.specialMainArea {
	margin-left: 220px;
	padding-top: 0px;
	position: relative;
}

.detailsArea {
/*	float: right;	*/
	padding: 20px;
	position: relative;
}

.centeredElement {
	display: inline-block;
}

.centeredCell {
	text-align: center;
}

.centeredTable {
	margin-left: auto;
	margin-right: auto;
}

.fixedTable {
	table-layout: fixed;
}

.wideTable {
/*	table-layout: fixed; */
	width: 100%;
	border-collapse: collapse;
}

/* listTable will be used to format all tables which are used to display lists of records */
.listTable {
	width: 100%;
	border-collapse: collapse;
}

.listTable a:hover {
	text-decoration: none;
	color: blue;
}

.listTable th, .listTable td {
	border: 1px solid #708090;
	padding: 2px;
}

.listTable th {
	padding-top: 12px;
	padding-bottom: 12px;
	text-align: center;
	background-color:#48D1CC;
	color: #FFFFFF;
}

.listTable tr:nth-child(even) {
	background-color:#AFEEEE;
}

.listTable tr:nth-child(odd) {
	background-color: #FEFEFE;
}

.listTable tr:hover {
	background-color: #D3D3D3;
}

.listTable a {
	text-decoration: none;
	color: #111111;
}

.listTableTD {
	border-collapse: collapse;
	border: none; 
	background:#CCFFCC;
}

/* used for the grade tables */
.gradeTable {
	width: 100%;
	border-collapse: collapse;
}

.gradeTable th, .gradeTable td {
	border: 1px solid black;
	padding: 0px;
}

.gradeTable th {
	padding-top: 0px;
	padding-bottom: 0px;
	text-align: center;
	background-color: #48D1CC;
	color: #FFFFFF;
}

.gradeTable tr:hover {
	background-color: #D3D3D3;
}

/* used for the attendance tables */
.attendanceTable {
	border-collapse: collapse;
}

.attendanceTable td, .attendanceTable th {
	border: 2px solid white;
}

.attendanceTable th {
	padding-top: 0px;
	padding-bottom: 0px;
	text-align: center;
	background-color: #008000;
	color: #FFFFFF;
}

.attendanceTable tr:hover {
	background-color: #ddd;
}

.reportTable {
	table-layout: fixed;
	width: 100%;
	border-collapse: collapse;
}

.reportTable td, .reportTable th {
	vertical-align: top;
	border: 1px solid black;
}

.reportFooter {
	position: fixed;
	left: 0;
	bottom: 10px;
	width: 100%;
	text-align: center;
}

.reportFooterTable {
	table-layout: fixed;
	width: 100%;
	border-collapse: collapse;
}

.watermark {
	position: absolute;
	text-align: left;
	transform: rotate(60deg);	
	opacity: 0.2;
	z-index: 99;
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	font-style: italic;
	font-size: 72px;
	font-weight: bold;
	letter-spacing: 4px;
}

.watermarkBackground {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	/*position: absolute;*/
	top: 0px;
	opacity: 0.2;
	z-index: 99;
}

.principalSignature {
	position: fixed; 
	right: 0;
	bottom: 100px;
	z-index: 1;
}

.signatureTableLeft {
	float: left!important;
	padding: 0;
	margin: 0;
}

.signatureTable {
	float: right!important;
	padding: 0;
	margin: 0;
}

.tableNumberBox {
	background: #00000000;
	border: 0;
	text-align: right;
	margin: 0px;
	transition: none;
	outline: none;
	max-width: 40px;
	padding-right: 2px;
}

/* Webkit browsers*/
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Firefox*/
input[type=number] {
	-moz-appearance: textfield;
}

.tableTextAreaBox {
	transition: all 0.20s linear;
	outline: none;
	padding: 4px 10px;
	box-sizing: border-box;
	background: #00000000;
	border: 1px #999999;
	text-align: left;
	width: 100%;
	height: 100%;
	resize: none;
}

.tableTextBox:focus {
	background-color: #ddd;
}


/* This section handles height of rows */
.thinRow {
	height: 10px;
}


/* This section handles width of columns */
.thinColumn {
	width: 40px;
}

.narrowColumn {
	width: 50px;
}

.mediumColumn {
	width: 60px;
}

.upperMediumColumn {
	width: 64px;
}

.maxMediumColumn {
	width: 80px;
}

.normalColumn {
	width: 100px;
}

.overNormalColumn {
	width: 120px;
}

.upperNormalColumn {
	width: 160px;
}

.largeColumn {
	width: 200px;
}

.upperLargeColumn {
	width: 220px;
}

.broadColumn {
	width:300px;
}

.wideColumn {
	width: 400px;
}

.twoPercentColumn {
	width: 2%;
}

.fourPercentColumn {
	width: 4%;
}

.fivePercentColumn {
	width: 5%;
}

.tenPercentColumn {
	width: 10%;
}

.fifteenPercentColumn {
	width: 15%;
}

.twentyPercentColumn {
	width: 20%;
}

.twentyFivePercentColumn {
	width: 25%;
}

.thirtyPercentColumn {
	width: 30%;
}

.fortyNinePercentColumn {
	width: 49%;
}

/* This section deals with text direction. */
.verticalText {
	white-space: nowrap;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	padding: 10px 0px;
}

.cellCenter {
	text-align: center;
}

.cellAlignTop {
	vertical-align: top;
}

.cellAlignBottom {
	vertical-align: bottom;
}

.maxGradeLabel {
	appearance: none;
	text-align: left;
	background: #00000000;
	border: 0;
	margin: 0px 0px 0px -4px; 
	max-width: 40px;
}

.gradeEventHeader {
	background-color: #4CAF50; 
	border: none;
}

.gradeTabWindow {
	overflow: hidden;
	border: 1px solid #ccc;
	background-color: #f1f1f1;
}

.gradeTabWindow button {
	background-color: inherit;
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 14px 16px;
	transition: 0.3s;
	border-radius: 0px;
}

.gradeTabWindow button:hover {
	background-color: #ddd;
}

.gradeTabWindow button.active {
	background-color: #ccc;
}

.gradeTabContent {
	display: none;
	padding: 6px 12px;
	border: 1px solid #ccc;
	border-top: none;
}

.photoArea {
	align-content: center;
	text-align: center;
	overflow: auto;
}

img.thumbnail {
	width: 180px;
	height: 180px;
	padding: 4px;
	border: 10px solid #00CED1;
	border-style: inset;
}

.inputModal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 3; /* Sit on top */
    padding-top: 40px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: #000000; /* Fallback color */
    background-color: #00000066; /* Black w/ opacity */
}

.inputModalContent {	
	text-align: center; 
	position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 70%;
    box-shadow: 0 4px 8px 0 #00000033,0 6px 20px 0 #00000030;
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
	max-width: 80vw; /* 80% of viewport width */
	max-height: 80vh; /* 80% of viewport height */
	overflow-y: auto; /* Add scroll if content overflows vertically */
	overflow-x: hidden; /* Hide horizontal scrollbar, adjust if needed */
	display: flex; /* For flexbox layout of body and footer */
	flex-direction: column; /* Stack body and footer vertically */
}

.inputModalHeader {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}	

.inputModalBody {
	padding: 2px 16px;
	margin: 10px;
}

.inputModalBody input {
	margin: 4px;
}

.inputModalFooter {
    padding: 2px 16px;
    background-color: #48D1CC;
    color: white;
}

.imageContainer {
	max-width: 100%;
	margin-top: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid #e2e8f0; /* Add a border for clarity */
	position: relative; /* Crucial for positioning the viewfinder */
	cursor: crosshair; /* Indicate clickable area */
	background-color: #e2e8f0; /* Add a background to see container bounds */
	user-select: none; /* Prevent text selection during dragging/resizing */
}

.imageContainer img {
	max-width: 100%; /* Make image responsive */
	height: auto; /* Maintain aspect ratio */
	display: block;
	pointer-events: none; /* Prevent image itself from interfering with mouse events */
	/* Center the image within the flex container */
	margin: auto;
}

.viewfinder {
	position: absolute;
	border: 2px solid #A0A0A0; /* gray solid border for viewfinder */
	box-sizing: border-box; /* Include border in dimensions */
	cursor: move; /* Indicate draggable area */
	display: none; /* Hidden by default */
	/* Add a semi-transparent overlay outside the viewfinder */
	box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
	touch-action: none; /* Prevent default touch actions like scrolling */
}

.resize-handle {
	position: absolute;
	width: 12px;
	height: 12px;
	background-color: #A0A0A0; /* Gray handle */
	border: 1px solid white;
	border-radius: 3px;
	z-index: 10; /* Ensure handles are on top */
}

.handle-nw { top: -6px; left: -6px; cursor: nwse-resize; }
.handle-ne { top: -6px; right: -6px; cursor: nesw-resize; }
.handle-sw { bottom: -6px; left: -6px; cursor: nesw-resize; }
.handle-se { bottom: -6px; right: -6px; cursor: nwse-resize; }


.gradeEventModal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 3; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: #000000; /* Fallback color */
    background-color: #00000066; /* Black w/ opacity */
}

/* Modal Content */
.gradeEventModalContent {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 440px;
    box-shadow: 0 4px 8px 0 #00000033,0 6px 20px 0 #00000030;
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

.gradeEventModalHeader {
    padding: 2px 16px;
    background-color: #48D1CC;
    color: white;
}

.gradeEventModalBody {
	padding: 2px 16px;
	margin: 10px;
}

.gradeEventModalBody input {
	margin: 4px;
}

.gradeEventModalFooter {
    padding: 2px 16px;
    background-color: #48D1CC;
    color: white;
}

.animate {
	animation: animatezoom 0.6s;
}

.genericModal {
	display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
	z-index: 2; /* Sit on top */
    padding-top: 40px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: #000000; /* Fallback color */
    background-color: #00000066; /* Black w/ opacity */
}
	
.genericModalContent {
	background-color: #fefefe;
	margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
	border: 1px solid #888888;
	width: 50%; /* Could be more or less, depending on screen size */
}

.slidePhotos {
	display: none;
}

.slidePhotos img {
	vertical-align: middle;
	width: 100%;
}

.photoSlideshow {
	max-width: 480px;
	position: relative;
	margin: auto;
}

/* i inside a circle used to launch modal */
.infoIcon:hover, .infoIcon:focus {
	color: blue;
	cursor: pointer;
}

/* text appears as a link and is used to launch modal */
.modalLink:hover, .modalLink:focus {
	color: blue;
	cursor: pointer;
}
	
.closeIcon {
	float: right;
	margin: 25px;
	top: 0;
	color: #000;
	font-size: 35px;
	font-weight: bold;
}

.closeIcon:hover,
.closeIcon:focus {
	color: red;
	cursor: pointer;
}

.previousButton, .nextButton {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	padding: 16px;
	margin-top: -22px;
	color: #BBBBBB;
/*	background-color: #BBB;	*/
	font-weight: bold;
	font-size: 32px;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
}

.previousButton {
	left: 0;
	border-radius: 3px 0 0 3px;
}

.nextButton {
	right: 0;
	border-radius: 3px 0 0 3px;
}

.previousButton:hover, .nextButton:hover {
	background-color: #000000CC;
}

.photoCaption {
	color: #F2F2F2;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	padding: 8px 12px;
	position: absolute;
	bottom: 8px;
	width: 100%;
	text-align: center;
}

.slideNumber {
	color: #F2F2F2;
	font-size: 12px;
	padding: 8px 12px;
	position: absolute;
	top: 0;
}

.slideIndicator {
	cursor: pointer;
	height: 15px;
	width: 15px;
	margin: 0 2px;
	background-color: #BBB;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;
}

.active, .slideIndicator:hover {
	background-color: #717171;
}

.fade {
	-webkit-animation-name: fade;
	-webkit-animation-duration: 1.5s;
	animation-name: fade;
	animation-duration: 1.5s;
}

@-webkit-keyframes fade {
	from {opacity: .4}
	to {opacity: 1}
}

@keyframes fade {
	from {opacity: .4}
	to {opacity: 1}
}

/* This section of styles deals with page controls */

/* Make forms appear as links */
.formLink {
	background: none;
	border: none;
	text-decoration: none;
	cursor: pointer;
	font-family: inherit;
	font-size: inherit;
	display: inline;
}

.formLink:hover, .formLink:focus {
	color: blue;
}

.linkButton {
	background: none;
	border: none;
	text-decoration: none;
	cursor: pointer;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	display: inline;
}

.linkButton:focus {
	background: none;
	outline: none;
}

.linkButton:hover {
	text-decoration: none;
	color: blue;
	background: none;
}

.linkButton:active {
	color:red;
}

.inputBox {
	transition: all 0.20s linear;
	outline: none;
	padding: 4px 10px;
	margin: 5px;
	border: 1px solid #999999;
	border-radius: 6px;
}

.inputBox:focus {
	box-shadow: 0 0 5px 1px #48F9FC;
	border: 1px solid #00CED1;
}

.inputArea {
	transition: all 0.20s linear;
	width: 90%;
	outline: none;
	padding: 4px 10px;
	margin: 5px;
	border: 1px solid #999999;
	border-radius: 6px;
	resize: none;
}

.inputArea:focus {
	box-shadow: 0 0 5px 1px #48F9FC;
	border: 1px solid #00CED1;
}

.inputButton {
	width: 180px;
	color: #FFFFFF;
	background-color: #48D1CC;
	padding: 14px 20px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	margin: 4px;
	border: none;
	border-radius: 10px 10px 10px 10px;
	cursor: pointer;
}

.inputButton:hover,.inputButton:focus {
	width: 180px;
	color: #FFFFFF;
	background-color: #0DDDC1;
	box-shadow:0 8px 16px 0 #00000033,0 6px 20px 0 #00000030
}


/* Flat square button */
.buttonLink {
	display: inline-block;	
	font-family: 'Times New Roman', Times, serif;
	font-size: 16px;
	margin: 4px;
	padding: 8px 3px;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	color: #000000;
	background-color:transparent;
	border: 2px solid #00CED1;
	border-radius: 5px;
	width: 180px;
}

.buttonLink:hover, .buttonLink:focus {
	text-decoration: none;
	font-weight: bold;
	border: 2px solid #0DDDC1;
	background-color:#0DDDC1;
	box-shadow:0 8px 16px 0 #00000033,0 6px 20px 0 #00000030
}

.buttonLink:active {
	text-decoration: none;
	transform: translateY(4px);
}


.tabLink {
 /*   background-color: #555;	*/
 	background-color: #015463;
    color: white;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
	font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    width: 33.33%;
}

/* Change background color of buttons on hover */
.tabLink:hover {
    background-color: #777;
	opacity: 0.6;
}

/* Set default styles for tab content */
.tabContent {
    color: black;
    display: none;
    padding: 0px;
    text-align: center;
}

/*set the behaviour of the active tab */
.activeTab {
	background-color: #015463;
	color: #ffffff;
	float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
	font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    font-weight: bold;
	width: 25%;
	text-align: center;
	text-decoration: none;
}

.inactiveTab {
    background-color: #555;
    color: white;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
	font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    width: 25%;
	text-align: center;
	text-decoration: none;
}

/* Change background color of buttons on hover */
.inactiveTab:hover {
    background-color: #777;
}


.formButton {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: 500;
	margin: 4px;
	padding: 8px;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	color: #000000;
	background-color:transparent;
	border: none;
	border-radius:5px;
	width: 190px;	
}

.formButton:hover, .formButton:focus {
	text-decoration: none;
	font-weight: bold;
	box-shadow:0 8px 16px 0 #00000033,0 6px 20px 0 #00000030
}

.formButton:active {
	text-decoration: none;
	transform: translateY(4px);
}

/* This section deals with div alignment */
.positionLeft {
	float: left!important;
}

.positionRight {
	float: right!important;
}

/* This section handles padding */
.paddingNone {
	padding: 0;
}

.paddingSmall {
	padding: 4px;
}

.paddingMedium {
	padding: 8px;
}

.paddingUpperMedium {
	padding: 12px;
}

.paddingLarge {
	padding: 16px;
}

.paddingExtraLarge {
	padding: 20px;
}

/* This is the table padding section */

.tablePaddingNone th, .tablePaddingNone td {
	padding: 0;
}

.tablePaddingSmall th, .tablePaddingSmall td {
	padding: 4px;
}

.tablePaddingMedium th, .tablePaddingMedium td {
	padding: 8px;
}

.tablePaddingUpperMedium th, .tablePaddingUpperMedium td {
	padding: 12px;
}

.tablePaddingLarge th, .tablePaddingLarge td {
	padding: 16px;
}


/* This section is for notification related styles. */

.invisible {
	display: none;
}

.warningLarge {
	color: red;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 32px;
	padding: 20px;
}

.warningMedium {
	color: red;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	padding: 20px;
}

.warningSmall {
	color: red;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	padding: 16px;
}

.successLarge {
	color: #00FF00;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 32px;
	padding: 20px;
}

.successMedium {
	color: #00FF00;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	padding: 20px;
}

.successSmall {
	color: #00FF00;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	padding: 20px;
}

/* This section handles borders */
.thinBorder th, .thinBorder td {
	border: 1px solid black;
}

.thickBorder th, .thickBorder td {
	border: 2px solid black;
}

.topBorder {
	border-top: 1px solid black;
}

.rightBorder {
	border-right: 1px solid black;
}

.bottomBorder {
	border-bottom: 1px solid black;
}

.leftBorder {
	border-left: 1px solid black;
}

.middleBorder td:first-child {
	border-right: 1px solid black;
}

.noBorder {
	border: 0;
}

.noBorder td {
	border: 0;
}

.noTopBorder {
	border-top: 0;
}

.noRightBorder {
	border-right: 0;
}

.noBottomBorder {
	border-bottom: 0;
}

.noLeftBorder {
	border-left: 0;
}


/* This section handles the borders for the buttons */
.buttonBorderBlue {
	background-color: transparent;
	border: 2px solid #0000FF;
}

.buttonBorderGray {
	background-color: transparent;
	border: 2px solid #808080;
}

.buttonBorderGreen {
	background-color: transparent;
	border: 2px solid #00FF00;
}

.buttonBorderLilac {
	background-color: transparent;
	border: 2px solid #C8A2C8;
}

.buttonBorderOrange {
	background-color: transparent;
	border: 2px solid #FFA500;
}

.buttonBorderPink {
	background-color: transparent;
	border: 2px solid #FFC0CB;
}

.buttonBorderPurple {
	background-color: transparent;
	border: 2px solid #800080;
}

.buttonBorderRed {
	background-color: transparent;
	border: 2px solid #990000;
}

.buttonBorderTeal {
	background-color: transparent;
	border: 2px solid #00CED1;
}

.buttonBorderYellow {
	background-color: transparent;
	border: 2px solid #EEF122;
}

.buttonBorderBlue:hover, .buttonBorderBlue:focus {
	background-color:#0000FF;
	border: 2px solid #0000FF;
}

.buttonBorderGray:hover, .buttonBorderGray:focus {
	background-color: #808080;
	border: 2px solid #808080;
}

.buttonBorderGreen:hover, .buttonBorderGreen:focus {
	background-color: #00FF00;
	border: 2px solid #00FF00;
}

.buttonBorderLilac:hover, .buttonBorderLilac:focus {
	background-color: #C8A2C8;
	border: 2px solid #C8A2C8;
}

.buttonBorderPink:hover, .buttonBorderPink:focus {
	background-color: #FFC0CB;
	border: 2px solid #FFC0CB;
}

.buttonBorderPurple:hover, .buttonBorderPurple:focus {
	background-color: #800080;
	border: 2px solid #800080;
}

.buttonBorderRed:hover, .buttonBorderRed:focus {
	background-color: #990000;
	border: 2px solid #990000;
}

.buttonBorderTeal:hover, .buttonBorderTeal:focus {
	background-color:#0DDDC1;
	border: 2px solid #0DDDC1;
}

.buttonBorderYellow:hover, .buttonBorderYellow:focus {
	background-color: #ABD100;
	border: 2px solid #ABD100;
}


/* This section handles text size, style, case, weight and alignment */
.textVeryLarge {
	font-size: 36px;
}

.textLarge {
	font-size: 30px;
}

.textUpperMedium {
	font-size: 24px;
}

.textMedium {
	font-size: 20px;
}

.textSmall {
	font-size: 16px;
}

.textNormal {
	font-size: 12px;
}

.textArial {
	font-family: Arial, Helvetica, sans-serif;
}

.textTimes {
	font-family: "Times New Roman", Times, serif;
}

.textCapitalise {
	text-transform: capitalize;
}

.textLowerCase {
	text-transform: lowercase;
}

.textUpperCase {
	text-transform: uppercase;
}

.textNormal {
	font-weight: normal;
}

.textBold {
	font-weight: bold;
}

.textVeryBold {
	font-weight: bolder;
}

.textLeft {
	text-align: left;
}

.textCentre {
	text-align: center;
}

.textRight {
	text-align: right;
}


/* This section handles text decorations */
.textOverline {
	text-decoration: overline;
}

.textLineThrough {
	text-decoration: line-through;
}

.textUnderline {
	text-decoration: underline;
}

.textUnderlineOverline {
	text-decoration: underline overline;
}

/* This block handles alternating colours */
.stripedTable tr:nth-child(odd) {
	background-color: #FEFEFE;
}

.stripedTable tr:nth-child(even) {
	background-color:#AFEEEE;
}

.stripedTable tr:hover {
	background-color: #D3D3D3;
}


/* This section handles colours */
.textGreen {
	color: #009900;
}

.textGrey {
	color: #F2F2F2;
}

.textPurple {
	color: #660066;
}

.textRed {
	color: #FF0000;
}

.textYellow {
	color: #CCCC00;
}

.textBlue {
	color: #0000FF;
}

.textWhite {
	color: #FFFFFF;
}

.backgroundBlue {
	background-color: #0000FF;
}

.backgroundGreen {
	background-color: #009900;
}

.backgroundGray {
	background-color: #808080;
}

.backgroundPurple {
	color: #FFFFFF;
	background-color: #660066;
}

.backgroundRed {
	background-color: #990000;
}

.backgroundYellow {
	color: #FFFFFF;
	background-color: #CCCC00;
}

.backgroundBlue:hover, .backgroundBlue:focus {
	background-color: #000066;
}

.backgroundGreen:hover, .backgroundGreen:focus {
	background-color: #006600;
}

.backgroundGray:hover, .backgroundGray:focus {
	background-color: #505050;
}

.backgroundRed:hover, .backgroundRed:focus {
	background-color: #660000;
}

.backgroundYellow:hover, .backgroundYellow:focus {
	background-color: #808000;
}

.headingHighlight {
	border-top: 1px dotted #015463;
	border-bottom: 1px dotted #015463;
	background-color: #CEF2F8;
}

.blueBorder {
	border-color: #00CCFF;
}

.yellowBorder {
	border-color: #E6B800;
}


.attendanceColor {
	background-color: #00FF00;
}

.attendanceColorA {
	background-color: #FF0000;
}

.attendanceColorC {
	background-color: #FF8500;
}

.attendanceColorE {
	background-color: #009999;
}

.attendanceColorI {
	background-color: #0000FF;
}

.attendanceColorK {
	background-color: #80D4FF;
}

.attendanceColorL {
	background-color: #FFFF00;
}

.attendanceColorM {
	background-color: #FFB3C1;
}

.attendanceColorN {
	background-color: #D9D9D9;
}

.attendanceColorP {
	background-color: #00FF00;
}

.attendanceColorS {
	background-color: #FF8000;
}

.attendanceColorT {
	background-color: #990099;
}