/*  Style sheet for lilythemonster.com
    Version: 1.0.2
    Date: 3 March 2025
    Author: D
    Purpose: Layouts and formatting
    Copyright 2020 "lilythemonster.com"
*/

/* Variables */
:root {
}
/*
$orange: #DF4500;
$gray: #35302D;
$gray-shine: #3C3735;
$white-off: #DFDBD9;
$sans: 'Source Sans Pro', Helvetica, Arial, sans-serif;
*/
/*********************/
/*    Elements       */
/*********************/

body {
    margin: 0 5% 0 5%;
}
button, input {
	min-width: 30%;
	margin: 5px;
        padding: 5px;
}

.input-100 {
    max-width: 100px;
}
.input-200 {
    max-width: 200px;
}

.input-standard {
    padding: 5px;
}

.label-input {
    display: inline-block;
    min-width: 50%;
}

.align-centre {
    text-align: center;
}
.align-left {
    text-align: left;
}

/*********************/
/* Announcement Area */
/*********************/
.announcement {
	min-height: 50px;
	display:none;
}
.announcement h3 {
	text-align:center;
	width: 100%;
	margin: 0;
}
.announcement p {
	text-align:center;
}

/***************/
/* Banner Area */
/***************/
.banner-format {
    min-height: 120px;
    display: flex;
    padding: 0 5% 0 5%;
}
.banner-format a.headerlogo {
	display: inline-block;
	height: 100px;
	width: 100px;
	margin-left: 10px;
	margin-top: 10px;
}
.banner-format a.headerlogo span {
	display: none;
}
.banner-format h1 {
	width: 100%;
}

/**************/
/* Borders    */
/**************/

.border-1-grey {
	border: 1px #ccc solid;
}


/******************/
/*    Breadcrumb  */
/******************/
.breadcrumb {
	/*display: flex;*/
	/*min-height:20px;*/
}
.breadcrumb nav a {
	display: inline-block;
	padding: 2px 0 2px 25px;
	margin: 0 20px 0 0;
	position: relative;
}
.breadcrumb nav a::after {
	display:block;
	margin-top: -50px;
	position: absolute;
	top: 50%;
	left: 100%;
	z-index:2;
}
.breadcrumb nav a::before {
	display:block;
	margin-top: -50px;
	margin-left: 7px;
	position: absolute;
	top: 50%;
	left: 100%;
	z-index:1;
}
.breadcrumb nav {
	overflow:hidden;
	padding-right: 10px;
}


/*********************/
/*                   */
/* buttons & links   */
/*                   */
/*********************/

.button-type1 {
    background-image: linear-gradient(
        to right,
        #00a,
        #77f,
        #05f 100%,
        #00f 200%
    );
    border-radius: 8px;
    color: white;
    font-size: 1.2em;
    text-shadow: 0 1px 1px #333;
    padding: 10px 20px 10px 20px;
    transition: 800ms ease all;
}
.button-type1:link {
    color: white;
}

.button-type1:hover {
    background-position-x: 100%;
    font-size: 1.4em;
}
/* for downloads */
.button-type2 {
    background-color: blue;
    border-radius: 8px;
    color: white;
    font-size: 1.2em;
    text-shadow: 0 1px 1px #333;
    padding: 10px 20px 10px 20px;
    transition: 800ms ease all;
}
.button-type2:link {
    color: white;
}

.button-type2:hover {
    background-position-x: 100%;
    font-size: 1.4em;
}


/*********************/
/*                   */
/*    containers     */
/*                   */
/*********************/

.contain-70 {  /*70% width centred */
	margin: 10px 15% 10px 15%;
}
.contain-70 p {
	text-align: left;
}

.contain-flex-row {
	display: flex;
	flex-direction: row;  /* multiple containers horizontally left to right */
        margin: 10px;
        box-sizing: border-box;
        justify-content: center;
}

.contain-flex-col {
	display: flex;
	flex-direction: column;  /* multiple containers vertically */
        margin: auto;
        justify-content: center;
}

.contain-flex-10 {
	justify-content: center;
        align-content: center;
	flex: 0 0 8%;
	/*margin: auto;*/
	/*max-width: 20%;*/
	padding: 0 15px 0 15px;
}


.contain-flex-20 {
	justify-content: center;
        /*align-content: center;*/
	flex: 0 0 18%;
	margin-right: 10px;
	/*max-width: 20%;*/
	padding: 10px 15px 10px 15px;
}
.contain-flex-25 {
	justify-content: center;
	flex: 0 0 22%;
	margin-right: 10px;
	/*max-width: 20%;*/
	padding: 10px 15px 10px 15px;
}
.contain-flex-33 {
	justify-content: center;
	flex: 0 0 30%;
        align-content: center;
	margin-right: 10px;
	/*max-width: 33%;*/
	padding: 10px 15px 10px 15px;	
}
.contain-flex-50 {
	justify-content: center;
	flex: 0 0 45%;
	margin-right: 10px;
	/*max-width: 50%;*/
        margin: 0;
	padding: 10px 15px 10px 15px;	
}
.contain-flex-66 {
	justify-content: center;
	flex: 3 0 60%;
        margin-right: 10px;
       /* max-width: 60%*/
}

.contain-flex-33a {
    flex: 1 1 10%; 
    margin: 0;
    padding: 5px 0 5px 10px;
    height: auto;
    text-align: left;
}
.contain-flex-66a {
    flex: 1 1 50%; 
    margin: 0;
    padding: 5px 0 5px 10px;
    text-align: left;
}

.contain-flex-80 {
	justify-content: center;
	flex: 0 0 75%;
	margin: auto;
        /*max-width: 80%*/
}

.contain-flex-auto {
	justify-content: center;
	flex: 2 1 auto;
	margin: auto;
}
.contain-card-body {
        flex: 1 1 auto;
	text-align: center;
	padding: 20px 0 20px 0;
}

.contain-floatright {
	float: right;
}

.contain-svg {
	margin: 10px;
}

.contain-submenu {
	height: 30px;
}
.contain-submenu .form-label {
	margin: 5px;
}

.contain-nav-left {
    padding: 0 5px 0 10px;
    box-shadow: 0 0 4px #888;
}

/******************/
/* Main Container */
/******************/

.contain-main {
	min-height: 200px;
}
.contain-main .centre {
	text-align:center;
}
.contain-main .centre > h1 {
	margin: 0;
}

/**************************************/
/*                                    */
/* Containers for faceplates or forms */
/*                                    */
/**************************************/

.con-face-flex-r {
	display: flex;
	flex-direction: row;
}
.con-face-flex-c {
	display: flex;
	flex-direction: column;
}

.con-flex-50 {
	justify-content: center;
	flex: 1 1 50%;
}


/**********************/
/*    Cards           */
/**********************/
/*
.card-body {
	flex: 1 1 auto;
	text-align: center;
	padding: 20px 0 20px 0;
}*/



/************/
/* Top Menu */
/************/
/* List of menu in one row for menus using unordered lists and flex box */
/* example = https://www.cdc.gov/coronavirus/2019-ncov/your-health/index.html */

.contain-topmenu-flex {
	display: flex;
}
.contain-topmenu-flex > nav {
	display: flex;
	width: 100%;
}
.contain-topmenu-flex > nav > ul {
	display: flex;
	width: 100%;
	flex-direction: row; 
	margin: 0;
	padding: 0 40px 0 40px;
}
.contain-topmenu-flex .menu-li {
	flex: 1 1 auto; 
	margin: 0;
}
.contain-topmenu-flex .menu-li > a {
	padding: 10px;
	display: block;
}


.display-2col {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 30%;
    margin: auto;
    
    /*flex: 1 0 50%;*/
    background-color: #fff;
    
       
    border-style:solid;
}

/* define container items */
.display-item1 {
    display: flex;
    flex-direction: column;  
    flex: 1 0 0;
    
}
.display-item1 > * {
    flex: 0 1 100%;
    margin: 5px;
}


.display-flexboxes {
    flex: 1 0 auto;
}

/*******************/
/*    Footer       */
/*******************/

.footer {
    min-height: 80px;
    margin-top: 100px;
}
.footer .contain-flex-25 > h5, .contain-flex-25 > p {
    text-align: center;
}

.footer-legal {
    padding: 10px 0 0 10px;
    color: #fff;
}

.footer-legal > a {
    color: #fff;
}


/************/
/* Forms    */
/************/

.form-1 {
	padding: 5px;
	margin: auto;
}

.form-1 ul {
	padding:0;
	margin:0;
}
.form-1 ul li {
	display: block;
	margin-bottom: 5px;
	min-height: 25px;
}

.form-1 ul li .field-style {
	box-sizing: border-box; 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	padding: 2px;
	outline: none;
}
.form-1 ul li .field-split{
	min-width: 150px;
}

.form-1 ul li input[type=button], .form-1 ul li input[type=submit] {
	display: inline-block;
	padding: 8px 18px;
}



.fieldset-1 {
	border: none;
	/*border-radius: 10px;*/
	/*background-color: #fff;*/
	margin: 0;
}

/****************/
/*              */
/*  Formatting  */
/*              */
/****************/

/* Paragraphs for text */
.format-para, .format-h1, .format-h2, .format-p1, .format-p2  {
    display: block;
    justify-content: left;
    font-family: candara; 
    padding-right: 10%
}

.format-h1, .format-h2 {
    margin-top: 20px;
}

.format-h1 {
    font-size: 1.5em;
    font-weight: 600;
}
.format-h2 {
    font-size: 1.3em;
    font-weight: 600;
}

.format-h1, .format-h2 {
    padding-left: 10px;
} 
.format-p1  {
    padding-left: 5%;
}
.format-p2  {
    padding-left: 10%;
}
.format-it {
    font-style: italic;
}
.format-pcen, .format-figure {
    font-family: candara;
    text-align:center;
}

.format-figure {
    font-size: 1.3em;
    font-weight: 600;
}

/* Use this for centre boxes to emphasis a statement in the middle */
.format-emphasis-centre {
    margin: 20px 0 0 20px;
    padding: 20px;
    text-align:center;
    font-size: 1.3em;
    font-weight: 600;
    border-color: var(--color-formborder);
    border-style: solid;
    border-radius: 15px;
    border-width: 1px;
    background-color: var(--color-forms-back-yellow);
    
}


/************/
/* Hidden   */
/************/


.hide-me {
	display: none;
}
.unhide-me {
	display: inherit;
}



/********************/
/* faceplate boxes  */
/********************/

.faceplate {
    display: flex;
    flex-direction: column;
    width: 30%;
    margin: 10px auto 10px auto;
    border-radius: 5px;
}

.face-item {
    display: flex;
    flex-direction: row;
    flex: 0 1 100%;
    margin: 5px;
    justify-content: center;
}

.face-item-child, .face-item-child-col, .face-item-child-col-small {
    display: flex;
    justify-content: center;
    align-content: center;
    flex: 1 1 50%;
    margin: 5px;
}

.face-item-child-col, .face-item-child-col-small {
    flex-direction: column;
}

.face-item-child-col-small {
    flex: 0 1 20%;
}

.face-item-child-col-small > *, .face-item-child-col > * {
    flex: 0 1 50%;
}



.mf-header {
  background: tomato;
}
.mf-article {
	text-align: left;
	background: deepskyblue;
	flex: 1 0;
	display: flex;
}
.col1 > label, .col1 > input {
	display:block;
}
.col1 {
	flex: 2 0;
}

.form-fieldset {
	border: none;
	border-radius: 10px;
	background-color: #fff;
	margin: 0;
	/*width: 50%;*/
}

.form-container {
	display: flex;
	margin-top: 10px;
justify-content: center;


}
.form-columnwide {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
}

/*******************/
/*    Images       */
/*******************/

.img-90 {
    width: 90%;
}
.img-75 {
    width: 75%;
}
.img-66 {
    width: 66%;
}
.img-50 {
    width: 50%;
}
.img-40 {
    width: 40%;
}
.img-33 {
    width: 33%;
}
.img-25 {
    width: 25%;
}

/*******************/
/*    Lists        */
/*******************/

.ul-standard {
    list-style: none; 
    padding: 0; 
    margin: 0;
}
.ul-standard a {
    text-decoration: none;
}
.ul-standard :before {
    box-sizing: border-box;
}
.ul-standard :after {
    box-sizing: border-box;
}

.ul-dotpoint {
    padding-left: 50px; 
    text-align: left;
    list-style-type: circle; 
}


.list-hover-slide li {
    position: relative;
    overflow: hidden;
}
.list-hover-slide a {
    display: block;
    position: relative;
    z-index: 1;
    transition: .35s ease color;
}
.list-hover-slide a:before {
      content: '';
      /*display: block;*/
      z-index: -1;
      position: absolute;
      left: -100%; 
      top: 0;
      width: 100%; 
      height: 100%;
      border-right: solid 5px var(--color-orange);
      background: var(--color-topmenu);
      transition: .35s ease left;
}

.list-hover-slide a.is-current:before, .list-hover-slide a:hover:before {
  left: 0;
}


/*******************/
/*    Nav          */
/*******************/

.nav-standard, .nav-full {
    border-radius: 0.5em;
}
.nav-standard a, .nav-full a {
    padding: 0.5em 0;
    text-indent: 10px;
}

 
/**********************/
/*    Specification   */
/*       Boxes        */
/**********************/

.spec-contain {
    border: 1px solid #222;
    border-radius: 0.5em;
    width: 33%;
    display: flex;
    flex-direction: column;
}
.spec-contain-row {
    display: flex;
    flex-direction: row;
}
.spec-1col {
    flex: 1 1 100%; 
    margin: 10px;
    
}
.spec-2col-33 {
    flex: 1 1 10%; 
    margin: 0;
    padding: 5px 0 5px 10px;
    height: auto;
    text-align: left;
}
.spec-2col-66 {
    flex: 1 1 50%; 
    margin: 0;
    padding: 5px 0 5px 10px;
    text-align: left;
}

.spec-cell {
    margin: 5px 0 5px 10px;
    text-align: left;
}


/*******************/
/*    SVG          */
/*******************/

.svg-40 {
    width: 40%;
}



/*******************/
/*    Tables       */
/*******************/

.table-standard {
    display: inline;
    border-collapse: collapse;
}


.table-standard td,th {
    text-align: left;
    padding: 0.5rem;
   /* border-bottom: 1px solid #e9e9e9;*/
}

.table-standard thead {
    border: 1px solid #b9b9b9;
    background-color: #eee;
    font-weight: 800;
}

.table-standard td:first-of-type {
    font-weight: 800;
    background-color: #eee;
    border-right: 1px solid #b9b9b9;
    
}

.table-standard tbody tr {
    border-bottom: 1px solid #e9e9e9;
}

.table-standard tbody tr:nth-of-type(2n) {
    background-color: #eee;
}
.table-standard tbody {
    border: 1px solid #b9b9b9;
    background-color: #f8f8f8;
}

.table-multicol {
    border: 1px solid #222;
    border-radius: 0.5em;
    width: 66%;
    display: flex;
    flex-direction: column;
}
.table-multicol-row {
    display: flex;
    flex-direction: row;
}
.table-multicol-4col-narrow {
    flex: 1 1 20%; 
    margin: 0;
    padding: 5px 0 5px 10px;
    height: auto;
    text-align: left;
}
.table-multicol-4col-1col {
    flex: 0 0 12%; 
    margin: 0;
    padding: 5px 0 5px 10px;
    height: auto;
    text-align: left;
    background-color: #000;
}
.table-multicol-4col-1col-left {
    flex: 0 0 12%; 
    margin: 0;
    padding: 5px 0 5px 10px;
    height: auto;
    text-align: left;
    border-right: 1px solid #222;
}

.table-multicol-4col-wide {
    flex: 1 1 30%; 
    margin: 0;
    padding: 5px 0 5px 10px;
    height: auto;
    text-align: left;
}
.table-multicol-1strow {
    border-bottom: 1px solid #222;
    font-size: 1.2em;
    background-color: #eee;
}
.table-low {
    background-color: green;
}
.table-medium {
    background-color: orange;
}
.table-high {
    background-color: red;
}


.svg-border-1 {
	border: 1px #333 solid;
}

/*******************/
/*    Legacy       */
/*******************/

/* Use contain-flex-col

.contain-flex-container {
	display: flex;
	margin: 10px;
	flex-direction: column;
}
*/

/*
@media all and (min-width: 600px) {
  .mf-article { flex: 1 0 0; }
}

@media all and (min-width: 800px) {
  .mf-article { order: 1; } 
  .aside-2 { order: 3; }
}
*/

/************/
/* Top Menu */
/************/
/*
.topmenu {
	display: flex;
	min-height:50px;
	background-color:#00f;
}
.topmenu div {
	flex: 1 1 100%;
}
.topmenu div p {
	text-align:center;
	color: #fff;
	font-size: 1.5em;
	margin: 5px;
}
*/