/* Master page styles */

/* Define the body attributes. */
body
{
	/*line-height: 1.5;		/* Set the line height to 1.5 of the current font size. */
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
							/* Set the font family as defined by Darlington. */
	font-size: 16px;		/* Set the font size. */
	height: 90%;			/* Set the body height to allow space of the footer. */
}

/* Display the Darlington header by default. */
#DarlingtonOptionalHeader
{
	display: block;
}

/*------------------------- Navigation div -------------------------*/




/*-------------------------- Generic --------------------------*/

/*-------------------------- Setup --------------------------*/

/* Show the optional header. */
.optionalHeader {
	display: block;
    width: 100%;
}

#imgmapOptionalHeaderSocialMedia {
    margin-left: 10%;
}
/* Don't show the master page default footer. */
.defaultFooter {
	display: none;
}

/* Show the custom footer. */
.customFooter
{
	display: block;
}

/* No spacing for li elements. */
li.noSpacing
{
	letter-spacing: normal !important;	/* Set the line spacing to normal. !important forces this
										   style to override any other style that may be in scope
										   at the time. */
}

/*-------------------------- Optional Header CSS --------------------------*/

/* The Darlington optional header style. */
.optionalHeader
{
	background: Black;		/* Background colour. */
	padding-top: 2px;		/* Pad to the top. */
}

/* the Darlington optional header home class style. */
.optionalHeader .optionalHeaderHomeAddress
{
	color: White;			/* Colour. */
	float: left;			/* Float the following elements to the left of this element. */
	font-size: 25px;		/* Font size. */
	padding-left: 5px;		/* Left padding. */
	width: 33.3%;			/* Width. */
}


/*-------------------------- Default Header --------------------------*/

/* Modify the navigation div style. */
.headerBar {
	background-color: white; /* Background colour. */
	background-image: none; /* Background image. */
	height:80px
}

.headerGrid {
	grid-template-columns: auto auto 2fr 1fr;
	grid-template-rows: 44px 25px;
}


/* Don't display the default logo because a custom logo is to be used. */
.defaultLogo {
	display: none;
}

.navigationTitle {
	display: none;
}
/* Display the custom logo and text. */
.customLogo {
	grid-row: 1;
	background: url('./img/Home_Icon_Single_Small.png') no-repeat;
	background-size: cover;
	display: block;
	background-color: #48aca5;
	height: 43px;
	width: 40px;
}

	.customLogo:hover {
		background-color: #48aca5;
	}

/* The some sometext section style. */
.headerBar #sometext {
	display: none; /* Don't display this element. */
}

/* The following style settings cater for the new background images that are used with
   the Darlington skin. */

/* The back ground image for the section. */
.headerBar .navBar{
	grid-row:2;
}
.headerBar .navBar .navItem {
	background: #018339;
}

.headerBar .navBar .navItem:hover {
	background-color: #0ba44d !important;
}

.navItem.notab {
	background: none !important;
	color:black;
	font-weight:normal;
}

.headerBar .navBar .navItem.notab:hover {
	background: none !important;
	color: black;
	font-weight: normal;
}

.burger {
	grid-row: 2;
}

.burgerImg {
	filter: invert(1) !important;
}

@media (max-width: 910px) {
	.navBar.expanded {
		grid-row: 3;
	}
}
/* CustomisationOne hyperlink menu home style. */
.customTitle {
	display: block;
	grid-row: 1;
	background-color: #48aca5;
	border-left-style: solid; /* Left border style. */
	border-left-color: #fff; /* Left border color. */
	border-left-width: 1px; /* Left border width. */
	border-right-style: solid; /* Right border style. */
	border-right-color: #fff; /* Right border colour. */
	border-right-width: 1px; /* Right border width. */
	color: #fff; /* Text color. */
	float: left; /* Float the following elements to the left of this element. */
	font-size: 0.9em; /* Reduce the font size. */
	padding-left: 10px; /* Pad to the left. */
	padding-right: 10px; /* Pad to the right. */
	padding-top: 3px; /* Pad to the top.*/
	text-decoration: none; /* No text decoration. */
	text-align: center; /* Centre the text. */
	width: 100px; /* Set the width. */
	height: 40px;
}

.customTitle:hover {
	background-color: #48aca5;
	color: Black; /* Text colour. */
}

.customLAText {
	display: block;
	grid-row: 1;
	grid-column: 3/5;
	background-color: #48aca5;
	height: 31px;
	padding: 12px 0 0 7px;
}

/*-------------------------- Darlington Navigation CSS --------------------------*/

/* CustomisationOne custom logo style. */
#customisationOne
{
	height: 40px;			/* Height of the container set to 40px. */
}

/* CustomisationOne custom logo image style. */
#customisationOne img
{
	height: 100%;			/* Set the height of the image. */
}

/* CustomisationOne custom logo list style. */
#customisationOne ul
{
	list-style: none;		/* No list style. */
	margin-left: 0px;		/* Set the left margin. */
}

/* CustomisationOne custom logo list item style. */
#customisationOne li
{
	border-left-style: solid;	/* Add a border to the left. */
	border-left-width: 1px;		/* Set the left border width. */
	border-left-color: White;	/* Set the left border colour. */
	float: left;				/* Float the following elements to the left of this element. */
	height: 30px;				/* Set the list item height. */
	padding-top: 11px;			/* Set the top padding. */
	padding-left: 5px;			/* Set the left padding. */
	padding-right: 5px;			/* Set the right padding. */
}

/* CustomisationOne custom logo list item local authority name style. */
#customisationOne .listitemLAName a
{
	color: #fff;				/* Set the list item colour. */
	background-color: #48aca5;
	text-decoration: none;		/* Don't display the underscore. */
	cursor: default;			/* Set the default cursor action. */
}

/* Set the attributes of the custom logo link. */
#customisationOne a
{
	float: left;	/* Float the following elements to the left of this element. */
	height: 100%;	/* Set the height to the height of the container. */
}


/*-------------------------- Custom (Darlington) Footer CSS --------------------------*/

/* The footer container style. */
#customFooterInner
{
	height: 5em;				/* Set the height to 5 times the current font size. */
	margin-top: 1.5em;			/* Set the top margin to 1.5 time the curfrent font size. */
	background-color: #565656;	/* Set the background colour RGB(86, 86, 86). */
}

/* The list of services container style. */
#customFooterInner .listOfServicesDiv
{
	height: 22px;				/* Set the height of the element to 22px */
	padding-top: 5px;
}

/* List of services list label style. */
#customFooterInner .listOfServicesLabel
{
	color: #fff;				/* Set the colour. */
	float: left;				/* Float the following elements to the left of this element. */
	font-weight: bold;			/* Bold font. */
	padding-left: 6px;			/* Pad to the left. */
}

/* List of services list style. */
#customFooterInner .listOfServices
{
	color: #fff;				/* Set the colour. */
	font-weight: bold;			/* Bold font. */
	list-style: none;			/* No list style. */
	margin: 0 0 0 1em;			/* Margin to the left. */
	padding-left: 0;			/* No padding to the left. */
}

/* List of services list item style. */
#customFooterInner .listOfServices li
{
	float: left;				/* Float the following elements to the left of this element. */
	letter-spacing: 1em;		/* Set the letter spacing to 1 times the font size. */
	margin-left: 5px;			/* Left margin between the items. */
}

/* List of services list item style nudge-right class. */
#customFooterInner .listOfServices li.nudge-right
{
	margin-left: 25px;			/* Nudge the list item. */
}

/* List of services list item link style. */
#customFooterInner .listOfServices li a
{
	color: #fff;				/* Set the colour. */
	background-color: #48aca5;
	font-size: 0.9em;			/* Set the font to 0.9 times the fint size. */
	font-weight: bold;			/* Bold font. */
	text-decoration: none;		/* Don't display the underscore. */
}

/* List of services list item link noLetterSpace class for a link style */
#customFooterInner .listOfServices li.noLetterSpace a
{
	letter-spacing: 5px;		/* Set the letter spacing. */
}

/* Darlington list of services list item link hover style. */
#customFooterInner .listOfServices li a:hover
{
	color: #428bca;				/* The colour to use when the mouse hovers over a link RGB(66, 139, 202) */
	background-color: #48aca5;
	text-decoration: none;		/* Don't decorate the link. */
}

/* The Darlington footer links container style. */
#customFooterInner .footerLinksDiv
{
	background-color: #565656;	/* Set the background colour RGB(86, 86, 86). */
	height: 48px;				/* Container height. */
	padding-left: 0.2em;		/* Left padding set to 0.2 times the current font size. */
	padding-top: 0.2em;			/* Top padding set to 0.2 times the current font size. */
}

/* The Darlington footer links container span style. */
#customFooterInner .footerLinksDiv img
{
	float: left;				/* Float the following elements to the left of this element. */
	margin: 0 0 0 0;			/* No margin. */
}

/* The Darlington footer links container list style. */
#customFooterInner .footerLinksList
{
	list-style: none;			/* No list style. */
	margin-left: 55px;			/* Position the list using the left margin. */
	margin-top: 15px;			/* Poisition the list using the top margin. */
}

/* The Darlington footer links container list items styles. */
#customFooterInner .footerLinksList li
{	color: #fff;				/* Set the list item colour. */
	float: left;				/* Float the following elements to the left of this element. */
	line-height: 1.5em;			/* Set the line height to the height of the current font. */
	padding-left: 5px;			/* Add 5px worth of padding to each element. */
	padding-right: 5px;			/* Add 5px worth of padding to each element. */
}

/* The Darlington footer links container list item link styles. */
#customFooterInner .footerLinksList li a
{
	color: #fff;				/* Set the list item colour. */
	background-color: #565656;
	font-size: 0.9em;			/* Set the font size to 0.8 times the current font. */
	text-decoration: none;		/* Don't display the underscore. */
}

/* The Darlington footer links container list item link hover styles. */
#customFooterInner .footerLinksList li a:hover
{
	text-decoration: underline;	/* Underline the link. */
}

/* The Darlington footer links container list item accessibility class styles. */
#customFooterInner .footerLinksList .accessibility
{
	border-left-color: #fff;	/* Set the left border colour. */
	border-left-style: solid;	/* Set the left border style. */
	border-left-width: 1px;		/* Set the left border width. */
}

/* The Darlington footer links container list item login class styles. */
#customFooterInner .footerLinksList .login
{
	border-left-color: #fff;	/* Set the left border colour. */
	border-left-style: solid;	/* Set the left border style. */
	border-left-width: 1px;		/* Set the left border width. */
}


/*-------------------------- Actuals CSS --------------------------*/

/* Skin the solid bars on the top of calendars and other navigation boxes on the left of some of the screens. */
div.expando p.title
{
	background-image: url('img/tree_title.bmp');
}


/* Skin the navigation boxes on the left of some of the screens with a pale green background. */
div.expando p
{
	background-color: rgb(235, 255, 235);
}

/* Skin the 'bullet' for the navigation boxes on the left of some of screens. */
.expando p.bullet
{
	bckground-imge: url('img/dot.png');
}