/*
	This is a template for a Skin's CSS.
	Please rename this file when creating a new skin, preferably [LAName].css
*/

/* -------------- Header Style ---------------*/

/*	
	In order to minimise overlapping when magnifying the screen, the header uses a grid template

	Columns:	1				2						3			4
				¦				¦						¦			¦	
		   Rows	¦				¦						¦			¦	
			1-	--------------------------------------------------------------------
				|											.userDetails			|
			2-	--------------------------------------------------------------------
				|.customLogo/	|	.navigationTitle .controccTitle or	.customTitle|
			3-	|.defaultLogo	|---------------------------------------------------|
				|				|	.navigationTitle .laTitle or .customLAText		|
			4-	--------------------------------------------------------------------
				|													.navBar			|
				--------------------------------------------------------------------

	The logo's rows can be spread out into row 1 and/or 4 if needed however do bear in mind overlaps when at 400% magnification.
*/

/* Change look/colour of header */
.headerBar {
	/*	background: red;*/ /* Change header colour */
	/* border-radius: 0px;*/ /*change rounded corners*/
}

/* Used to change the Grid properties of the header if needed*/
.headerGrid {
	/*
	grid-template-columns: auto 2fr 2fr 1fr;
	grid-template-rows: 20% 30% 25% 25%;
	height: 105px;
	*/
}

/*if you are using a custom logo, make the default not display*/
.defaultLogo{
	/* display:none; */ 
}

/* Affects all header titles, display none to remove both*/
.navigationTitle{
	/*display:none;*/
}

/* Alter the title 'Controcc' in the header*/
.controccTitle {
	/*display:none;*/
}

/* Alter the sub header that display's the LA's name */
.laTtitle {
	/*display:none;*/
}


/* Uncomment out below for custom logo, title or laTitle respectively, these are customised in the .skin file */
/*	.customLogo {
	display: block;
	background: url('./img/logo.png') no-repeat;
	background-position: center;
	width: 200px;
	height: 100px;
}*/

/*
.customTitle {
	display: block;
}*/

/*
.customLAText {
	display: block;
}*/


/* ----- Narigation bar ------ */


/* Change the navBar, usually for location/alignment or background colour */
.headerBar .navBar {
	/* margin: auto auto 5px 0; */ /* will change navBar to be left aligned */
}

/* How each navigation button will look */
.headerBar .navBar .navItem {
	/*background: red*/ /*change background colour*/
	/*border-radius: 0px;*/ /*change rounded corners*/
}

/* Navigation button on hover effect */
.headerBar .navBar .navItem:hover {
}

/* Logout button look if it's not wanted to look the same */
.headerBar .navBar .navItem.notab {
}

.headerBar .navBar .navItem.notab:hover {
}

/* Update the burger button when magnifited. */
.burgerImg {
	/*filter: invert(1) !important;*/  /* Use black button for contrast on light BG.*/
}

/* Edit the style when zoomed into below the default width. This is when the burger should appear.*/
@media (max-width: 910px) {
	/* Alter the look of the navbar when it has been expanded */
	.navBar.expanded {
		/*background-color: red !important;*/
	}

/* swap burger to left side */
	/*.burger {
		grid-column: 1;
		margin: auto auto 5px 20px;
	}*/
}

	/* -------------- Page Style ---------------*/

/* Side bar title colour */
.expando p.title {
	/*background: red;*/
}

/* Side bar border colou, probably the same as the title colour */
.expando ul.tree {
	/*border: 1px solid red;*/
}

	/* -------------- Footer Style ---------------*/