/* ----------------------------------------------------
20/04/23  Copied from staging.compost123.com settings
user.css for compost123.com staging area  
There should be four different group of css items
(1) from header to footer orderly fashion css items 
(2) Specific/bespoke classes that go inside the config of a J4 object
(3) a test area to validate the css functioning as expected
(4) Where a precedence is needed; i.e. a class needs to come after another one
31/03/23 Structured css items into 4 groups
---------------------------------------------------- */

/* ----------------------------------------------------
(1) from header to footer orderly fashion css items 
---------------------------------------------------- */

/* important to enable blog items to be aligned */
.com-content-article.item-page .float-end.item-image {
  text-align: left;}

.com-content-article.item-page .float-start.item-image {
  text-align: right;}

.blog-item .float-center.item-image {
  text-align: center;}
  
/* main menu change bold items   */
.container-header .mod-menu {
   	font-weight: bold !important;
  	background-image: none !important;}

/* changing colour of the menu buttons when active, visited or hover */
.container-header .mod-menu>li:active  {color:#000080; background-color:white;}
.container-header .mod-menu>li:hover {color:#000080; background-color:white;}
.container-header .mod-menu>li:visited  {color:#000080; background-color:white;}

/* colour around the category blog items, light blue #F0F8FF  #a4d4ff */
.blog-item {
  	background-color:#a4d4ff;
	border-radius: 3%;
	border: 3px solid #000080;}

/* reduces the padding around the blog items from menus */
.blog-item .item-content {
  	padding-left: 10px;!important;
  	padding-right: 0px;!important;
  	padding-bottom: 0px;!important;
}

/* change attributes for the "readmore" buttons for the category blogs */
a.btn.btn-secondary{
	font-size: 8pt;
  	background-color: #F5F5DC !important; 
  	font-weight: bold !important;
	border-radius: 5%;}

/* Article details on a single horizontal line - from Joomla forum */
dl.article-info {
  display: inline-flex;
  font-size: 8pt;}

/* Module breadcrum: you are here >> */
.breadcrumb {
    background-color: #F5F5DC!important;
  	color: #000000 !important;
  	font-size: 8pt;
  	font-weight: bold !important;}

/* ----------------------------------------------------
(2) Specific/bespoke classes that go inside the config of a J4 object
---------------------------------------------------- */

/* It changes background colour to light yellow, used in some modules (displaying lists) */
.mytopbanner {
    /* background-color: white; */
  	background-color: #F5F5DC !important;  
    background-image: none !important;
  	line-height: 0.8;
  	font-size: 10pt;
  	list-style: square !important;
  	font-weight: bold !important;
	border-radius: 5%;} 

/* ----------------------------------------------------
(4) Where a precedence is needed; i.e. a class needs to come after another one
---------------------------------------------------- */

/* All paragraph with better line spacing */
p {
	line-height: 1.5;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12pt;}

h1{font-size: 18pt;!important}

/* Yes it works, but your lack of discipline means many article have title not in H1 but <p> */
.blog-item .item-content h1,
.blog-item .item-content h2,
.blog-item .item-content p {
  line-height: 1.2;!important;}
	/*font-size: 18pt;!important*/

/* ----------------------------------------------------
(5) 
---------------------------------------------------- */
.myrmhyperlinks{
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none;}
a:active {text-decoration: none;}
}