/* Style sheet for : LilyMonster
    Version: 1.0
    Date: 29 November 2019
    Author: D
    Purpose: Font, headings, colour and other items not relating to layout
    For layout styles, please refer to the file layout.css
*/ 

/* Variables go here */
:root {
 	--color-background: #f9f5ec; 
        --color-contenttext: #333; /* The bulk of the text on the site */
        --color-default: #000; /* default base color in absence of any other */
	--color-error: #F00; /*red */
	--color-faceplatebg: #fff; /* html page color before content added */
	
	--color-formback-lgrey: #F4F4F4;  /* color for forms with light grey  */	
	--color-formbackground: #FAFAFA;  /* color for form background  */
	--color-formborder: #305A72;  /* color for form borders */
	--color-form-fieldshadow: #B0CFE0;  /* color for form fields shadow on focus */
	--color-form-button: #216288;  /* color for form button background */
	--color-form-buttonborder: #17445E;  /* color for form button border */
	--color-form-buttontext: #fff;  /* color for form button text  */
	--color-form-buttonhover: #28739E;  /* color for form button when hovered over  */		
        --color-forms-back-yellow: #f5f0c3; /* good for replicating a text book */	
		/*--color-header: #aadbf7;*/
	--color-main: #fff; /* html page content background colour. Orignal #cff */
	--color-page: #fff; /* html page color before content added */
		
	--color-topmenu: #156bc3; /* background colour of top menu on each page */
	--color-topmenu-hover: #337fce; /* background colour of top menu on each page when the link is hovered */
	--color-topmenu-border: #aa99d0; /* little strip above menu when hovered */

      
        --color-visited: #00f; /*blue */
        --color-warning: #F00; /*red */
        --color-orange: #DF4500 /*orange*/
     
}

/**************************/
/* HTML Element styles    */
/**************************/

a  {
    color: var(--color-default);  
    font-size: 1em;
}
    a:link {
        color: var(--color-default);
        text-decoration: none;
    }
    a:visited {
    /*    color: var(--color-visited);*/
    }
    /*
    a:hover {
        color: var(--color-form-buttonhover);
        text-decoration: none;
        box-shadow: 0 0 20px var(--color-form-fieldshadow);
       
    }
    */
    a:active {
        color: var(--color-default);
    }
body {
    font-family: Calibri,'Times New Roman',sans-serif;
}


h1 {
    font-size: 2.5em;
}
h2 {
    font-size: 2em;
}
h3 {
    font-size: 1.5em;
}
h1, h2, h3 {
	color: var(--color-contenttext);
}
hr {
    color: var(--color-default);
    height: 1px;
}
html {
    background-color: var(--color-page);
}
input  {
    font-size: 1.2em; 
    border: 1px #ccc solid;
    border-radius: 5px;
    
}

svg {
    stroke: #000;
    stroke-width: 2;
}

select  {
    border: 1px #ccc solid;
    border-radius: 5px;
}

button  {
    border: 1px #444 solid;
    border-radius: 5px;
}

p, ul {
    font-size: 1.2em; 
    text-align: justify;
    color: var(--color-contenttext);
    margin-top: 5px;
    margin-bottom: 5px;
}

.ul-standard {
    font-size: 1.5em;
    color: var(--color-contenttext);
    list-style: none;
}
.p-list > p {
    font-size: 1.5em;
    color: var(--color-contenttext);
    margin: 0px 5px 5px 0px;
}
.p-list > a {
    font-size: 1.5em;
    background-color: #ebf9ff;
}

.input-user-edit {
   background-color: var(--color-background); 
}



/*********************/
/* Announcement Area */
/*********************/
.announcement {
	background-color:#f00;
}
.announcement h3 {
	color: var(--color-default);
}
.announcement p {
	color: var(--color-default);
}


/***************/
/* Banner Area */
/***************/
.banner-format {
    background: url('/images/reef.jpg') repeat;
}
.banner-format a.headerlogo {
	
        /*background: url('../images-old/monster.jpg') no-repeat ;*/
	background-size: contain;
}

.banner-format h1 {
	text-align:center;
	color:aqua;
}

/**************/
/* Breadcrumb */
/**************/
.breadcrumb {
	background-color: var(--color-main);
}
.breadcrumb nav a {
	text-decoration:none;
	text-transform:uppercase;
	color: var(--color-form-buttontext);
	background: var(--color-topmenu);
}
.breadcrumb nav a::after {
	content:'';
	border-top: 50px solid transparent;
	border-bottom: 50px solid transparent;
	border-left: 30px solid var(--color-topmenu);
}
.breadcrumb nav a::before {
	content:'';
	border-top: 50px solid transparent;
	border-bottom: 50px solid transparent;
	border-left: 30px solid var(--color-main);
}

/*********************/
/* containers        */
/*********************/
.contain-submenu {
	background-color: var(--color-form-button);
	border-radius: 5px;
}
.contain-submenu .form-label {
	color: var(--color-form-buttontext);
}

.contain-download-large {
    font-size: 1.2em;
    font-weight: 800;
}

.contain-download-medium {
    font-size: 1.2em;
    font-weight: 400;
}
.contain-download-button {
    font-size: 1.5em;
    font-weight: 500;
}

.contain-border-top {
    border-top: 1px #ddd solid;
}

/* Top Menu */

.contain-topmenu {
	background-color: var(--color-topmenu);
	font-size: 1.5em;
}

.contain-topmenu div {
	flex: 1 1 100%;
}
.contain-topmenu div p {
	/*color: #fff;*/
	font-size: 1.5em;
}

/* Main Container */

.contain-main {
	/*background-color: #333;*/
	background-color: var(--color-main);
}
.contain-lightgrey {
    background-color: var(--color-formback-lgrey);
}


/* 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 {
	background-color: var(--color-topmenu);
	font-size: 1.5em;
}

.contain-topmenu-flex > nav > ul {
	list-style: none;
}
.contain-topmenu-flex .menu-li {
	text-align: center; 
	border-top: 3px solid var(--color-topmenu);
	/*margin: 0 10px 0 10px;*/
}
.contain-topmenu-flex .menu-li > a {
	/*border-top: 3px solid var(--color-topmenu);*/  /* change to #3d85d0 when hovered */
	/*background-color: white;*/
	color: #fff;
	font-weight: 600;
}

/*
.contain-topmenu-flex .menu-li > a:hover {
	background-color: var(--color-topmenu-hover);
	border-top: 3px solid var(--color-topmenu-border);
	cursor: pointer;
}
*/

.contain-topmenu-flex .menu-li-hover {
	background-color: var(--color-topmenu-hover);
	border-top: 3px solid var(--color-topmenu-border);
	cursor: pointer;
}


.contain-topmenu-flex .menu-active {
	border-top: 3px solid #3d85d0;  
	background-color: #bdd1ff;
}
.contain-topmenu-flex .menu-active > a {
	color: #333;
}


/**********************/
/*    Cards           */
/**********************/

.card {
	border-top: 5px solid ;
	border-top-color: #66ddaa;
}

.card:hover {
	-webkit-transition: all 0.30s ease-in-out;
	-moz-transition: all 0.30s ease-in-out;
	-ms-transition: all 0.30s ease-in-out;
	-o-transition: all 0.30s ease-in-out;
	box-shadow: 0 0 20px #43D1AF;
}

.card-body {
	background-color: #eee;
}
.card-title {
	font-size: 1.5em;
}
.card-content {
	font-size: 1em;
}

/********************/
/* Emphasis         */
/********************/

.emph-imagecaption {
    font-style: italic;
    font-size: 1.2em;
    font-weight: 700;
}

.emph-bold {
    font-weight: 700;
}

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

.faceplate {
    background-color: var(--color-faceplatebg);
}


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

.form-1 {
	background: var(--color-formbackground);
	border: 6px solid var(--color-formborder);
	box-shadow: 1px 1px 25px rgba(0, 0, 0, 0.35);
	border-radius: 10px;
}

.form-1 h3 {
	margin: 5px;
}
.form-1 ul {
	list-style:none;
}
.form-1 ul li .field-style {
	border: 1px solid var(--color-form-fieldshadow);
	-webkit-transition: all 0.30s ease-in-out;
	-moz-transition: all 0.30s ease-in-out;
	-ms-transition: all 0.30s ease-in-out;
	-o-transition: all 0.30s ease-in-out;
}
/*
.form-1 ul li .field-style:focus {
	box-shadow: 0 0 20px var(--color-form-fieldshadow);
	border:1px solid var(--color-form-fieldshadow);
}
*/
.form-1 ul li input[type=button], .form-1 ul li input[type=submit] {
	/*-moz-box-shadow: inset 0px 1px 0px 0px #3985B1;
	-webkit-box-shadow: inset 0px 1px 0px 0px #3985B1;
	box-shadow: inset 0px 1px 0px 0px #3985B1;*/
	background-color: var(--color-form-button);
	border: 1px solid var(--color-form-buttonborder);
	cursor: pointer;
	color: var(--color-form-buttontext);
	text-decoration: none;
	font: 12px Arial, Helvetica, sans-serif;
}
/*
.form-1 ul li input[type=button]:hover, .form-1 ul li input[type=submit]:hover {
	background: linear-gradient(to bottom, #2D77A2 5%, #337DA8 100%);
	background-color: var(--color-form-buttonhover);
}
*/

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

.footer {
    background-color: var(--color-contenttext);
}
.footer .contain-flex-25 > h5 {
	color: var(--color-main);
}
.footer .contain-flex-25 {
	font-size: 1.5em;
}
.footer .contain-flex-25 > p {
    color: var(--color-main);
    font-size: 0.8em;
}
.footer .contain-flex-25 > p > a {
    color: var(--color-main);
}

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

/* Paragraphs for text */

.formula-n {
    font-size: 1.5em;
}
.formula-s {
    font-size: 1.1em;
}

/*******************/
/*    Links        */
/*******************/

.links-standard {
    font-style: italic;
}
.links-standard:link {
    text-decoration: underline;
    color: var(--color-topmenu-hover); 
}
.links-standard:visited {
    color: var(--color-visited);
}
.links-standard:hover {
    font-weight: 600;
}


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

.nav-standard, .nav-full {
    background-color: var(--color-formbackground);
}
.nav-smaller {
    font-size: 0.8em;
}
.nav-full a:hover, .nav-standard a:hover {
    color: var(--color-form-buttontext);
}

/**********************/
/*    Specification   */
/**********************/

.spec-contain {
    background-color: var(--color-formbackground);
}

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

.svg-colour-main {
    background-color: var(--color-forms-back-yellow);
}

.svg-nocolour {
    background-color: #fff;
}


.svg-nofill, .svg-standard, .not-visible {
    fill: none;
}

.svg-axis {
    stroke: #000;
    stroke-width: 3;
}

.svg-dashed-even {
    stroke-dasharray: 20;
}

.svg-standard {
    stroke: #000;
    stroke-width: 1;
}

.svg-text-2 {
    font: italic 1.5em Calibri;
}

.svg-text-1 {
    font: italic 0.8em Calibri;
    font-weight: 200;
}

.svg-redline {
    stroke: #f00;
    stroke-width: 2;
}
.triangle-nofill {
	fill: none;
	stroke: #000;
	stroke-width: 1;
}
.not-visible {
    stroke-width: 0;
}

/***************/
/* Titles      */
/***************/

.title-faceplate > h3 {
    font-size: 1.2em;
    font-weight: 700;
    margin: 5px;
}

.title-faceplate > p {
    font-size: 1em;
    margin: 5px;
}

.warning-text {
    font-style: italic;
    color: var(--color-warning);
}


/***************/
/* General     */
/***************/

.border-red {
    border: 1px #F00 solid
}

.test-label {
   /* background-color: cyan;*/
}