@charset "UTF-8";
/*
    "Cassiopeia_2_footers - Default" template user.css
 */
:root {
	--sd-cassiopeia-color-primary: #4169e1; /* RoyalBlue */
	--sd-h1-color: #4169e1; /* RoyalBlue */
	--sd-footers-background-color: #555555; /* Davy grey */
	--sd-latest-news-enhanced-theming-item-border-color: #a9a9a9; /* darkgrey */
	/*
	#a9a9a9 rgb(169,169,169) darkgrey
	#d3d3d3 rgb(211,211,211) lightgrey
	#808080 rgb(128,128,128) grey
	#555555 rgb(85,85,85) Davy’s grey
	NOTE: The "Latest News Enhanced" Module configuration doesn't accept var values, so the hex codes are used within it.  The additional CSS does accept them.
	*/
	--sd-footer-a-height: 40px;
}
/* *************************** */
/* ***** Position topbar ***** */
/* *************************** */
.header.container-header {  background-color: var(--sd-cassiopeia-color-primary); }
/* ****************************** */
/* ***** Position below-top ***** */
/* ****************************** */
div.grid-child.container-below-top {
	background-color: var(--sd-cassiopeia-color-primary);
	padding-top: 0;
	padding-bottom: 0;
}
.mod-branding {
	background-color: var(--sd-cassiopeia-color-primary);
	color: white;
	border: 0;
}
p.mod-branding { margin-bottom: 0; }
/* ************************* */
/* ***** Position menu ***** */
/* ************************* */
.grid-child.container-nav {  background-color: var(--sd-cassiopeia-color-primary); }
.navbar.navbar-expand-md {  background-color: var(--sd-cassiopeia-color-primary); }
#id-ul-men-main li a:hover { background-color: var(--teal); /* #5abfdd */ }
.container-header .container-nav {
    padding-bottom: 0;
}
.container-header .grid-child {
    padding: 0;
}
.container-header nav {
    margin-top: 0;
    padding: 0;
}
.mod-branding .card-body {
    padding: 0;
}
/* ************************** */
/* ***** Article Titles ***** */
/* ************************** */
/* cassiopeia default is black #000 */
h1 {
/*    text-shadow: 2px 2px 8px rgba(150, 150, 150, 1);
    color: rgba(119, 9, 121, 1);  */
	color: var(--sd-h1-color);
}
h1#sd-id-offline-sitename { color: white; }
/* ************************** */
/* ***** Article Images ***** */
/* ************************** */
#sd-id-img-about { border: 10px solid transparent; }
#sd-id-about-gallery-row {
	box-sizing: border-box;
	float: left;
	width: 33.33%;
	padding: 5px;
}
/* Clearfix (clear floats) */
#sd-id-about-gallery-row::after {
  content: "";
  clear: both;
  display: table;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 500px) {
  #sd-id-about-gallery-row .column {
    width: 100%;
  }
}
/* ****************************** */
/* ***** Article Paragraphs ***** */
/* ****************************** */
#sd-id-p-about-hidden {
	visibility: hidden;
	line-height: 0.5em;
	margin-bottom: 0;
}
/* ******************************** */
/* ***** Position main-bottom ***** */
/* ******************************** */
/* Refer to Theming>"CSS Overrides" */

/* ***************************** */
/* ***** Position bottom-b ***** */
/* ***************************** */
.men-bottom {
    background-color: var(--cassiopeia-color-primary);
	height: auto; /* was 88px 50px isn't bad */
    margin: 0;
	border: 0;
}
.menbottom .navbar {
	padding: 0;
}
/* Float left for a horizontal menu */
#id-ul-men-bottom li { float: left; }
#id-ul-men-bottom li a:hover { background-color: var(--teal); /* #5abfdd */ }
#id-ul-men-bottom li a {
    display: block;
    color: white;
    text-align: center;
    /* padding: 1px; */			/* was 16px */
    text-decoration: none;
}
#navbar125 {
	height: 5px;
}
/* From template.css, .container-bottom-b grid-area: bot-b; } */
.container-bottom-b {
	grid-template-areas: 'bot-b bot-b bot-b bot-b bot-b bot-b'; /* All 6 columns */
    margin: 0;
}

/* ***************************** */
/* ***** Position footer-a ***** */
/* ***************************** */
.footer-a {
	/* Doesn't match the template color */
    /* background-color: var(--cassiopeia-color-primary); */
    background-color: var(--sd-footers-background-color);
	height: var(--sd-footer-a-height); /* Not 59.98 */
}
.footer-a .grid-child { height: inherit; }
#id-men-footer-a-ul-tag {
	background-color: var(--sd-footers-background-color);
	height: var(--sd-footer-a-height);
}
#id-men-footer-a-ul-tag li a {
	color: white;
    text-decoration: none;
}
#id-men-footer-a-ul-tag li a:hover { background-color: var(--teal); /* #5abfdd */ }

/* *************************** */
/* ***** Position footer ***** */
/* *************************** */
/* Both footer classes on one line - div class="mod-footer" */
footer div.mod-footer {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
@media (min-width: 768px) {
  footer div.mod-footer {
    flex-direction: row;
  }
}
/* Footer class change colours */
.footer {
/*    background: rgb(2, 0, 36);
    background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(119, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%);
*/
/*	background: rgb(0,48,143);
	background: linear-gradient(90deg, rgba(0,48,143,1) 0%, rgba(0,0,255,1) 50%, rgba(0,127,255,1) 100%);
*/
	background-image: none;
    /* background-color: var(--sd-h1-color); */
	background-color: var(--sd-footers-background-color);
}
/* Footer class reduce height */
/*
    "margin", "border", "padding", "text"
	margin-top: 1em;		(Relative to the font-size of the element (2em means 2 times the size of the current font)
	border: 
div class="grid-child"
	padding-top: 2.5rem;	(Relative to font-size of the root element = 40px)
	padding-bottom: 2.5rem;	(Relative to font-size of the root element = 40px)
	text:
*/
.footer .grid-child{
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;	(Relative to font-size of the root element)
}
.footer { margin-top: 0; }