:root {  --root-background-color: #FDE;
		 --root-label-color: #666; 
		 --root-menu-font-color: #FFF; 
		 --root-font-color: yellow;
		 --root-font-family: Lucida Sans;
}
	/* nightmare  --root-link-color: #000; */

 @view-transition {
      navigation: auto;
    }


@font-face {
		font-family : LucidaCalligraphyItalic;
		src: url(/fonts/Lucida_Calligraphy_Italic.ttf);
}

img, table, caption, tbody, tfoot, thead, tr, td, textarea, input  {
	margin: 0;
	border: 0;
	padding: 0;
	font-size: 100%;
	font: inherit;
}
img { border-style: none; outline: none;   }

* { box-sizing: border-box; }	/* from Symfony app.css */

	/*
	* Page colouring - set html to light gray; then 
	* Body is white but with a fixed width so wider than that gives a gray outline L and R
	*/ 

html { background-color: #ccc; }
	/* mods 2024.05 per MDN responsive design
       2025.0101 try increase to 1500 	*/ 
body {  /* height:  96%;*/
		width: 100%;
		/*max-width: 1500px;  2025.09 try cutting out */
        margin: 0 auto;
        /* background-color: #fff; 	/* set gray borders on image if v.port wider than 1200 */
        font-family: var(--root-font-family);
        font-size: 16px;
        line-height: 1.42857;       
}

	/* background: url(/images/composite_meo_v9.jpg) no-repeat center;    height: 400px; 
		header is empty - just has absolute placements for menu, basket etc.
		but content has top-margin which is confusing so set height here
	*/
 header {
		display:block; 	/* for older browsers(?) */
		min-height:240px; 
      }

/* Leave these as "standard" - changes required for menus are modified below in that section */
a, a:link,  a:active { color: var(--root-link-color); text-decoration: none;  }
A:hover 		{color: #F00;  }
A.roll:hover 	{	color:#5A9Ad6; }

#MTAB a { color:#222; font-weight: 600;  }

.sbs { display: inline-block; }	
.hidden, .inline.hidden  { display: none; }
.blockHide  {display: none; }
	/* blockShow moved down */

h2 {
    display: block;
    font-size: 1.5em;
	font-weight: bold;
    margin-block-start: 0.5em;  margin-block-end: 0.5em;
    margin-inline-start: 0px;   margin-inline-end: 0px;
    unicode-bidi: isolate;
}

#tooltip {
	position: absolute;
	display:none;
	width: 12em;
	border: 1px solid black;
	padding: 5px;
	background-color: #EEC; 
	z-index: 100;
}


/*===============================================
    OVERRIDES - override settings in app.css (tho not used in this symfony app) 
=================================================*/
h1 { font-size:2em;  margin-top:10px; margin-bottom:10px;  }
h2.invoice { display: block;   font-size: 1.5em; font-weight: bold;
    margin:0; 
}

.faux_href { color: var(--root-font-color);} 
.faux_href:hover { color: #F00; cursor:pointer; } 


    /* Override the app.css:1060 body Font-family as Arial is larger */
label, .label-style {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-family: Arial, Calibri, sans-serif;
  font-weight: 700; 
  color:var(--root-label-color);
  }
label.comment{ 
	margin-bottom:0px; 
}
.sub_label { 
	font-size: 12px;
}

	/*	
	width: 100%;
    margin-bottom: 21px;
	border: 0;	border-bottom: 1px solid #e5e5e5;
	*/
legend {
    display: block;
	padding:0 10px; 
    font-size: 22px;
    line-height: inherit;
    color: #333333;
}


/*===============================================
    
	PAGE STRUCTURE - CONTAINERS
     box-sizing: border-box; is on by default *{setting} app.css: 1045
	 
	2025.09 main_image - can NOT have  
=================================================*/

.posrel { position: relative; }


div.banner_top_right { 
	position: absolute; 
	color:white;
	right:10px;
	top: 30px; 		/* inc from 30 */
}
	/* height:40px;  */
div.title_wrap { 
	position: relative; 	
}

div.main_title { 
	position: relative; 
	right: 20px; 
	padding-left:25px; 
	color:white; 
}
div.title_leader { 
		font-size: 2.5em;
		font-weight:500; 
}
div.title_strap { 
	font-style:italic; 
	font-size: 1.5em; 
	padding-left: 10px; 	
}

div.container_A {
		position:relative;
		width:100%;    height:600px;  min-height:600px;   
		margin:0;
		padding:0;
}

/*OBS  div.container_B {width:100%; } 

*/

   /* on small screens shove the detail text down so the About menu shows 
	* controlled by _menu.JS onclick About 
	* done by image foot.er so not required .margin_top_55 { margin-top:55px; }
	* WRONG! to put  flex-basis : auto; here - its on the children
	*/

div.body-2col { display:flex;
                flex-direction:row;
                }

div.body_lhs {  width: 200px;
                padding: 5px;
}

	/* flex 1=>grow, 1=>shrink, -basis auto=if px use px size, else use content */
div.container_ADM {
	flex: 1 1 auto;
}

div.body_central {
    margin-left:0px;
    padding-left:0px;
    border-right: 0.0em solid #999;
}

div.foot_list { width:300px; margin: 0 auto; padding: 10px; }
span.foot_item { padding-right:10px;}
div#cookie_notice { 
	position: relative;
	top: -300px; 
	margin: 0 auto;
	font-size: larger; 
	width:24em;
	/* height: 100px;  */
	border: 1px solid #CCC;
    padding: 5px;
    background-color: #EEC; /* ; EEEEEE99*/
    visibility: hidden;        /* xx only display if we've got content start Hidden; if has contents, set visible then  then fade to hidden */
    z-index:200;     
}

div#backToTop { 
		/* background-color: var(--root-background-color); 		padding-bottom:20px; */
		padding: 0 0 20px 20px;
		font-size : 18pt;
		margin-top:2em;
}
	/* deflt is 250 x 156 */
img.back-totop { width : 40px; height: auto; }


div.update_notice {
        position:fixed; left : 300px; top:150px;
            /* borrow rest from tooltip */
        width: 24em;
        border: 1px solid #CCC;
        padding: 5px;
        background-color: #EEC; /* ; EEEEEE99*/
        /* visibility: hidden;        /* xx only display if we've got content start Hidden; if has contents, set visible then  then fade to hidden */
        z-index:200;        /* 14.0923 for BudgetWorkflowLines its appearing behind the table */
 }

/*===============================================
    PAGE STRUCTURE - LEFT SIDE  BLOCK
=================================================*/

div.lhs_header { margin:20px; margin-bottom:30px; }
div.lhs_title { }

div.body_lhs.choice_list { width: 200px; border:1px solid #FCC; border-radius:8px;  }
    /* space off & down for emailController student ref list */

div.lhs_list_box { 
	height:500px; 
	overflow-y:auto;
}

/*===========================================================
        IMAGE SRC, POSITIONING 
===========================================================*/
div.top-pic { 
	display:block;
	} 

div#image_holder { 
	position : absolute; 
	width:100%;
}

	/* don't need position:relative because without it 
	   position is relative to the viewpoert which is just fine
	   JS reduces the depth image holder instead of scrolling 
	   the lower part page upwards 
	   */
div#image_holder { 
	position:fixed;
	z-index: -10; 
	
	display:block;
	width : 100%; 
	height:100vh;
	
	/* overflow:hidden; */
	}

img#stargroup { 
	position:absolute; 
	left:240px;
	top:220px; 
}
/* javascript _menu.js  only scales the height */
img.starscale { 
	width: auto; 
}


img.main_image { display:block;
	width : 100%; 	/*height: 600px; */
	height: 100%; 	/* not preset to 1040 or whatever */
	}


/* ==================================================
	CONTENT LAYOUT 
	
	border-radius needs to be on background 
	content HAS to be ABS to allow it to scroll with the page
	2nd; TRY relatrive but shifted down below menu areas - 240px 
	then content can join the flow
	3rd go: make the header height 240px and let content_holder be static
	Reduce width to 80% else it overlays the item_selector 
	
  ========================================================== */


div.content_holder {
	 /* take width:85%  out altogether   ...? reinstate   	/**/
	 width:70%;
	 margin-left:20px;
			/* position:relative;  top:240px; */
	padding-left:40px;
	padding-right:10px; 
	min-height:400px;

}

	
	/*  margin:50px; 
	box-shadow: 0px 0px 25px 25px rgba(255,254,251,1);
	*/
div.content-background, .footer-background { 
	
	
}

div.content_style { 
	padding:20px; 
	border-radius : 50px; 
	/*border:1px solid red;  */
	/*font-size: 1.8rem; 			/* define parent */
	font-weight: bold; 
	background-color:white; 
	opacity: 0.9;
}

/* generic classes for content */
div.item-title { 
	padding-bottom:2rem; 
}

/* no width here - it overrides the container: 800px;
	font : use em based on parent: content_style
	remove the <p> elemet and set bott margin here
	10.22 why font so small? homepage barely visible
	*/ 
div.narrative { 
	/*font-size: 0.65em;*/
	font-weight:500;
	margin-right:20%; 
	
	}

div.costline, div.introductory  { 
	padding-top:10px; 
}
div.costline { 
	font-size: 1.0rem;
	text-align:right; 
}
div.introductory  { 
	font-size: 0.9rem;
}



div.buynow { 
	margin-right:20px; 
}

div.no_content {
	text-align:center; 
	margin-top:200px; 
	margin-left: 30%;
	width:400px; 
	padding:20px;
	margin: 0 auto;
	margin-top: 60px; 
}

	
/* 	since the content is relative and shifted down 240 to clear the menus, 
		the footer's got to be shifted down as well; and add top margin to leave a gap
	*/

div.bottom_footer { 
	/*position:relative;  top:240px; 
	margin-top:50px; 
	position: absolute; 
	left:0; bottom:-30px;*/
	width:50%; 
	margin: 0 auto;
	height: 50px;
}

div.item { margin-top: 20px; }	


	/* Consultations need smaller font 16 -> 15pt*/
span.cons-type, span.contype
 { 	font-size: 15pt; font-weight: bold; }	

	/* parenthesised sub-item for Consultations */
div.parens { font-style: italic;} 



	/* for homepage in addition to header ht 240px 
		need to bring text down further and onto the 
		orange "dawn" area */

div.homepage_content {
	margin-top:18%; 
	margin-left: 30%; 
}
	
div.homepage {
	
	/*margin-top : 40px; */
	padding:0px; 
	
	display:grid;
	grid-template-columns: 3fr 1fr; 
	grid-template-rows: 1fr 1fr auto ; 
	grid-template-areas: 
		"content helen"
		"content rusty"
		"content ."; 
}	
	/* NOT aspect-ratio: 16 / 9;  
		optional (Noeffect) 
		height: auto;
		object-fit: cover;
	*/
.homepage img { 
	width: 100%;	
	
}
.homepage .helen { grid-area: helen; }
.homepage .rusty { grid-area: rusty; }
.homepage .home_content { grid-area: content; }

img.staff  { display: block; 
	width : 200px; height:auto;
	padding: 10px; 
	padding-left:20px; 
	border-radius:30px; 
	}


div.signoff { font-size: 16pt;
	margin-top: 10px;}

	
span.nowrap { white-space: nowrap; }



/* ==================================================
	DIV controls
  ========================================================== */
  
.ta-c { text-align:center;}
.ta-rt { text-align:right;}
.flo-rt { float:right;}

div.flex-row  { display:flex;
                flex-direction:row;
                flex-basis : auto; }
div.flex-col  { display:flex;
                flex-direction:column;
                flex-basis : auto; }
				
div.flex-1     {flex:1 1 auto;}
div.flex-2     {flex:2;}
div.flex-3     {flex:3;}  
  
    /* use in Student edit with hidden blocks */
.w150       { width: 150px; }	
.w160       { width: 160px; }	
.w180       { width: 180px; }	
.w200       { width: 200px; }	
.w250       { width: 250px; }	
.w300       { width: 300px; }
.w450       { width: 450px; }
.w500       { width: 500px; }
.w560       { width: 560px; }
.w600       { width: 600px; }
.w650       { width: 650px; }
.w80pc      {width:80%;  }
.w100pc     {width:100%; }

.pad-10    {padding:10px; }
.pad-20    {padding:20px; }
.pad-a20   {padding-left:20px; }
.pad-t-5   {padding-top: 5px;  }
.pad-t-10  {padding-top:10px; }
.pad-t-20  {padding-top: 20px;  }
.pad-tb-5  {padding-top: 5px; padding-bottom:5px; }
.pad-tb-10 {padding-top: 10px; padding-bottom:10px; }
.pad-tb-20 {padding-top: 20px; padding-bottom:20px; }
.pad-b-10  {padding-bottom:10px; }
.pad-l-10  {padding-left:10px; }
.pad-l-20  {padding-left:20px; }
.pad-lr-10 {padding-left:10px; padding-right:10px; }
.pad-r-5   {padding-right:5px; }
.pad-r-10  {padding-right:10px; }
.pad-r-20  {padding-right:20px; }
.pad-r-30  {padding-right:30px; }
.empty_table { width:100%; padding:30px; font-size:18px; font-weight:800;}



/* ================================ 
		CONTENT - BLOG /ARTICLE / VIDEO ITEMS 
		text-align:right; 
}
ul.rhs_menu_detail > li  { 
	padding-top:10px; 
/*background-image: url("/images/starry_sky_600.jpg");
=================================== */

div#item_selector  { 
	position:absolute;
	top: 200px;
	right : 20px;
	padding:16px;
	text-align:right;	
    font-size: 1.25em;
	color: white;
	font-weight:800;
	/*z-index:100; 	/* required as else content-block at 100% width overwrites & disables the scroll bar */
}

div#item_selector > div.item_holder { 
	padding-right:25px; 
	height: 400px; 
	overflow-y:auto
	}
div#item_selector li { padding-top:10px; }

div.body_rhs { position :absolute; right:20px; top:20px;  }

div.blog-title { font-size: 24pt; font-weight: bold; min-width:400px;  }
div.blog-date { font-size: 18pt;  }
div.blog-narrative { font-size: 16pt; margin: 10px 0 10px 0; width:60%;}

div.rhs_header { font-size: 16pt; font-weight:bold;}
div.rhs_list_box {  height: 400px; overflow-y:scroll;}


/* ================================ 

		CONTENT - ALMANAC LISTINGS 
		
=================================== */

.almanac_style {
	font-family: LucidaCalligraphyItalic, "Lucida";
	font-size:1.2em;
	font-weight:800; 
	font-style: italic;
}
label.almanac-label {
	font-size:0.8em; 
}
div.almanac_grid_view {
	display:grid;
	width:100%;
	grid-template-columns: 100px 1fr;
	grid-gap:5px;
}
div.almanac_header_pub{
	text-align: center;
}
	/* try geary.co / internal-borders-css-grid */
div.almanac_grid_admin {
	display:grid;
	width:100%;
	grid-template-columns: 100px 1fr 1fr;
	/*grid-gap:5px;*/
	gap: var (--gap);
}

div.almanac_grid label       { text-align:right; padding-right:10px;}
div.almanac_grid label:after { content: ":"; }

table.admin_raw{
	border-width: 1px;
    border-spacing: 2px;
    border-style: outset;
    border-color: gray;
    border-collapse: collapse;
    background-color: white;
}

table.admin_raw td {
    border-width: 1px;
    padding: 4px;
    border-style: inset;
    border-color: gray;
	min-width:120px;
   }
	




/*===========================================================

         MENUS   HREFS - SPECIFIC TO TOPMENU

  ========================================================== */

	   /* js-controlled class; on drop-down of "About" add
	   textured background to make white options visible 
	   against evening sky; only if media < 765 
	   2024.1114 add footer to image try cover the gap opened up */
.image_footer { display: none; }	   
	
.backdrop { 
		background-image:url("/images/starrysky_filler.jpg");
		width:200px; 
		border-radius:52px;
		padding-bottom:20px;
}

/* =========================================== 
	2025.09 for slidemenu to align with hamburger, get rid of inherited <ul> baggage
	 ban bullets everwhere 
*/

ul  { 
	display:inline;
	padding:0; 
	list-style-type : none; 
} 	
ul.nav > a,  
ul.nav > a:link,    
ul.nav > a:active { color: white;  
					text-decoration: none; 
					font-weight: bold; 	}
ul.nav > a:hover  { color: #F00; text-decoration: none; }
ul.nav > a.roll:hover 	{	color:#5A9Ad6; }
	

    /* add 2019.12 to override app.css body color: #333333; Making the RHS drop-downs black on dark background*/
.navbar { margin-bottom:10px; }     /* app.css:3648: was 21 */
.navbar-brand { padding-top:16px;}

	/* with banner shifted left, bring menu back to the right 
		margin-left:50px; */
.navbar-top {	
	padding-left:10px;
    padding-top:10px; padding-bottom:10px;
}
    /* override App.css LL 3165  to maintain blue color set in ashton_styles.css */
.dropdown-menu > li > a { color: var(--root-font-color); }

    /* 2015.05 don't make nav.li a any smaller else we get a disjoint on the top/bottom border
        ul.nav li's         are the top-line menu choices
        ul.nav li ul        start the drop-down unordered list
        ul.nav li ul li     are the items in the drop-down list but the middle 'ul' is redundant for CSS
       */
li.last { padding-bottom: 0.5em; }

      /* without a width here the width of the li children makes the Firs Row list "fan out" */
ul.nav > li {

    display:inline-block;   /*  ul is inline but this MUST be  inline-block */
    position:relative;      /* need for absolute following */
    margin:2px;
    padding:0;			/*padding-right:1em; */
					/*background-color: var(--root-background-color);*/
					/* width: 4.5em;           /*spacing on First Row: ADJ to smallest then manually adjust wider in template*/
    cursor: default;
}


	/* Applies to Level 1 :  must use the div for specificity
		remove class nav from  ul.nav - Allow to affect Top and Side Menus */
ul.nav > li > div > a   {
        display:block;
		font-size : 1.5em;
		font-weight:600;
		color: white; 
        padding-top: 6px;
        padding-bottom: 6px;
        padding-left: 0px; padding-right:10px;
        /*transition-property: color, background-color;
        transition-duration: 500ms;
		*/
    }

	/* MUST create overlap for level 2 to mouseover without losing :hover effect 
	   Also need specificity else ul.nav padding 0 overrides */
ul.nav > li.parrot { 
		/*border:1px solid red; */
	padding-bottom:20px; 
	z-index:20;
	}

ul.level2 {
	list-style-type: none; 
	display: none;       
    position: absolute;     /* essential else background depth increases to depth of drops */
    top: 32px; 		/*  down-set but still enough to project into containing block of the parent li    */
	/*left:0; */
    padding-left:0;         /* Essential to avoid DEFAULT VALUE  */
    z-index:0;
	/* background-image: url("/images/starry_sky_600x340.jpg");*/
		} 
	
ul.level2  li {
	/*font-size:1.25em;		/* same as 20px */
	font-weight: 500;
	white-space:nowrap; 
    text-align: left;
    padding-left:8px;
    padding-top: 10px;
}


		/* 	fine tuning level2 LI items  padding-top:1.0em; 
			border:1px solid red;   */
ul.level2  li.first {  }
ul.level2  li.last {
    border-bottom-left-radius : 12px;
    border-bottom-right-radius : 12px;
}
ul.level2 li > a { border-radius : 4px; } 

    /* this covers all of the descenders 
	again take out the "nav" in nav.ul - apply to both menus 
	NB the class you're trying to modify MUST BE contained within 
	the parent (parrot) element, so NO 	li>a:hover 
	  */

ul.nav > li.parrot:hover .level2  {
    display: block;
}

ul.nav li>ul.user  li {
    width:5em;
}
	

/* for highlighting active menu (request 2021.0430 tymos_menu.js adds menu_highlight 
  Oops - border radius not normally set on the title  root-color is a blueish #3080D0;*/
  
.title_1.menu_highlight {
	background-color: #CC4;
	border-radius : 8px;
}
ul.nav > li > div.menu_highlight > a {
	color:#35E; 
}

li { transition: 0.5s}
.disappear { 
	opacity:0; 
	height:0;
}	
	/* seem to inherit padding-inline-start: 40px;
	   + reduce line-height for narrow mobiles */
ul.mobile { padding-left:20px; line-height:1.5em; } 	
ul.mobile > li > ul { display: none; }
 
	/* for the Media menu, want to display "level 2" items 
	   on the top row,  ie selection inline  
	   but reduce font size from usual L1 */
.menu_L1  .level1 { font-size:1.0em }

ul.level1 > li {
	display:inline; 	
}
/* ==================================================
		MENU & IMAGE - CONTROL OF DISPLAY 
  ========================================================== */

	/* js-added class needs higher specifity than just .block... 
	* use:not  to increase it by 1xID 
	*/
.blockShow:not(#i) { display: block; visibility:visible; 	}
 
ul.blockShow:not(#i) { display:block }

/* =========================

	SIDEBAR MENU  for Sub-items e.g. Consultancy 
	
	set width to restrict sidebar from overlapping content at LHS
============================ */

div.sidemenu_parent, slider-left  { 
	display:block; 
	position:fixed; 
	width:300px; 
	top: 150px; 
	right: 20px; 		/* 	width: 40px;height:60px;  */
	z-index:20;
	font-size: 1.8rem; 		/* set parent font-size */
}
	/* was _lhs */
div.slidemenu_one  { 
	display:inline-block; 
	position:relative; 
	left:410px; 	
	opacity:1.0;
}

div.slidemenu_all {
	position:absolute; 
	display:inline; 
	width:750px; 
	left:620px; 
	opacity: 0.0;
	}

	/* I want a NEW container for the vertical menu
	   OFFSET from the menu_L1 by one fixed amount set here;
	   Then the children are stored off-page to teh right and 
	   enter stage right to zero offset; 
	   so pos here is relative to menu_L1
	*/

div.vertical_container {
	position: relative; 
	left: 160px; 

}

	/* for vertical menu on slider #3 placed in storage;
	   menu#3 only used for media screen < 480 */
.collapsed { 
	position:relative;
	left: 200px; 
	height:0px; 
	display:none; 
	font-size: 0.9em; 	
	/* opacity: 0.1; */
	
	/*animation-name: slide_in ; 
	animation-fill-mode:forwards ; 
	*/
	
}


	/* lhs visible is at 200 px from left of menu_L1 
	so just bang this right on top - it doesn't have to move 
	display inline else they wrap onto 2nd line
	pos relative so we make a train and just move the first (LH) carriage
	uh-uh! the original layout wraps the 2nd line 
	*/
div.slidemenu_rhs {
	display:inline-block; 	
	position: absolute; 
	top:0px;  
	left:300px; 		/* may get overridden */
	width: 500px; 
	opacity:0.0;
}

div.carrier { 
	position:relative;
	display:inline-block;
	}

span.hidden_item { 
	padding-left: 0px; padding-right:10px;
}

	/* this is quoted by javascript for the "slideaway" disappearance*/
div.sidebar_detail { 
	position:relative;
	padding-top:20px; 
	padding-right:25px; 
	height: 400px; 
	
	/* 
	overflow-y:scroll; 
	leaves a gray bar at the bottom of the div..???
		overflow-y:auto
	*/
	
}

.menu_L1  { 
	width: 600px; 
	color: white; 
	font-size:0.9em; 	
	font-weight:500;
	background:transparent; 
	}

.menu_L1 .level2 {
	font-size:1.0em; 
}

button.hamburger { 
	position:absolute; 
	top:0px; right:20px; 
	/*display:inline-block; */
	background: white;
	width: 46px;
    height:46px;
    border-radius: 23px;	
}

.hamburger-box { 
	color: white; 
   
}
.hamburger-inner {
	/*width:100%;	height:100%; */
    transition-property: transform;
    transition-duration: .15s;
    transition-timing - function : ease;
}

.hamburger-inner, .hamburger-inner:before, .hamburger-inner:after  {
	position: relative;
	display:block;
	top: 0px; 
	left:2px; 
    background-color: #000;
	width: 27px;
    height: 4px;
	border-radius: 4px;
}


.hamburger-inner:before {
	content: ""; 
	top:-10px; 
	left:0px; 
	}
.hamburger-inner:after {
	content: ""; 
	top: 6px; 
	left:0px; 
}


ul.rhs_menu_detail { 
	text-align:right; 
	font-size: 0.8em;
	font-weight:500;
	color:white;
	
}
ul.rhs_menu_detail > li  { 
	padding-top:10px; 
	/*font-size:1.25em; */
	
}

/* =========================
	ADMIN NAVBAR - single line of colour with page options 
	for editing content or posts
============================ */
	/* no fix height height:60px; */
	
.admin_navbar {
	width: 100%; 
	height:60px; 
	background-color:#AAA;
	border : 1px solid green;
	padding-left: 10px; 	
	position : relative;
}
.admin_navbar span.font a { color: white; }
.admin_navbar span.font a:hover { color: red; }

.admin_navbar > .admin_title { color:white; font-size:16pt;}

span.admin_title { position: absolute: top:10px; left:10px;}

	/* V4 Height here seems to be critical as the 
	tops of the  level twos buts up against bottom of this container */

.admin_tab_holder { 
	position:absolute;
	left:120px; top:10px;
	width:90%;
	height:40px; 	
	/* border:1px solid yellow; */
}
	/* now a div to hold the actual tabs and these got to be bottom-aligned */
div.tabrow_tabs { 
	display: flex;
	flex-direction:row;
    flex-basis : auto;
	height:20px;
	/* border:1px solid red; */
	/* padding: 0 20px; 
	 /* height:40px;   REDUCE height so content sticks out the base */
	
}
	/* ul comes with a bloody T, B margin so can't access level 2s!! */
ul#adnav_ul { 
	margin-top:0; 
	margin-bottom:0;
}

ul#adnav_ul > li.tabber {
        display:inline-flex; 
		
		font-size : 1.2em;
		font-weight:400;
		background-color:#CCC;
		color: #333;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 10px;
		
		border-top-left-radius : 10px;
		border-top-right-radius : 10px;
}
ul#adnav_ul li:hover {
	background-color: #FFA;
}

    /* use display:none to get the subment to start working; block to set it up */
ul.nav_m2 {  
	display:none;         /* <<<< */
    position: absolute;     /* essential else background depth increases to depth of drops */
    top: 100%;
    padding-left:0;         /* Essential to avoid DEFAULT VALUE  */
    z-index:100;		  
}
ul.nav_m2 { 
	padding:10px; 
	padding-left: 15px;
    padding-right: 15px;
}
	/* not div.level2 */
ul#adnav_ul > li:hover  ul.nav_m2 {
    display: block;
	background-color: #CCC;
	color:#333;
}	



/* ==================================================
	ADMIN:  CONTENT EDITING CONTAINERS 
  ========================================================== */
.content_container { margin-top: 10px;
		padding: 10px; 
}
.content_options { width: 100%; /* height: 20px; */
	 background-color: #ccc;
	 border: 1px solid #aaa; 
	 margin-bottom:10px; 
}
#CETAB  > .tab {
	margin: 10px 0px 0 30px;	
    border: 1px solid green;
    border-bottom: none;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
#CETAB  > .tab:hover { background-color: #bbb; }


div.admin .no_content { 
	width:50em; height:400px; border:1px solid #CCC; 
}

textarea.ta-contentText { 
	font-size: 0.8em; 
	width: 50em; height:400px; 
	}

textarea.ta-almanac { 
	font-size: 0.8em; 
	/*width: 35em; */
	height:200px; 
	}

.comment { font-size:10pt; }

div.admin_grid {
	display:grid;
	grid-template-columns: 200px 1fr;
	grid-gap:5px;
}
div.admin_grid label       { text-align:right; padding-right:10px;}
div.admin_grid label:after { content: ":"; }

div.content_grid { 
	display:grid; 
	grid-template-columns: 8px 1fr;
	grid-gap:5px;
}
div#content_line_numbers {
	margin-top:4px; 
	width:8px; 
	font-size: 14px;
	line-height: 1.42857;
}


/* ==================================================
	ADMIN:  USER HELP 
  ========================================================== */
	   /* width 80% is causig huge width increases */
div.user_help_text { margin-top:5px; margin-left:10px; border : 1px solid #aaa;
	position:relative; 
}
div.user_help_turnoff { position:absolute; top: -0.66em; right: -0.75em;  }
div.user_help_turnoff  img { width:16px; height:16px;  } 

	
/* =========================
	ADMIN TABBED NAVIGATION 
============================ */
.tabber {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  color:#333;
}
.tabber .jsTab{  
	background-color: inherit;
	float: left;
	border: 1px solid gray;
	outline: none;
	cursor: pointer;
	padding: 14px 16px;
	transition: 0.3s;	
}
.tabber .jsTab:hover {
  background-color: #ddd;
}
.tabber div.active {
  background-color: #ccc;
}
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

  /* when it goes ON just switch off the bottom border */
.tabber div:hover, 
.tabber .on {
	border-bottom:none;
    background:#FFA;        /* light yellow  color: red; */
}
.tablinks .on {
	border-bottom:none;
    background:#FFA;        /* light yellow */
}
		

/* ==================================================
	INPUT / DATA ENTRY FIELDS 
  ========================================================== */


    /* from app.css 2322 height: 43px; padding 10px 18px; font 15px
		take out width 100% fttb width: 100%;
	*/
.form-control {
  display: block;
  height: 32px;
  padding: 4px 16px;
  font-size: 14px;
  line-height: 1.42857;
  color: #333333;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; }
  .form-control:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }
  .form-control::-moz-placeholder {
    color: #999999;
    opacity: 1; }
  .form-control:-ms-input-placeholder {
    color: #999999; }
  .form-control::-webkit-input-placeholder {
    color: #999999; }
  .form-control::-ms-expand {
    background-color: transparent;
    border: 0; }
  /*.form-control[disabled], .form-control[readonly],*/

.form-control.nopad {
	padding: 0;
	font-size: 14px;
}	

.inline, .form-control.inline { display:inline;}

span.note { font-size:0.75em; }

.form-control.widthdef {
	padding: 0;
	font-size: 14px;
	 width: inherit;
}	

textarea.product_description, div.product_description { 
	width:500px; 
	min-height: 100px; 
	border:1px solid #ccc; 
	padding: 4px, 10px; 
}
input[checkbox].sq16,
   .checkbox.sq16  { width:16px; height:16px; margin:auto; }
input[checkbox].sq25,
   .checkbox.sq25  { width:25px; height:25px; margin:auto; }

/*===========================================================

        INPUT  -  BUTTONS 
  ========================================================== */

.btn { padding:10px 15px;}
.btn-primary { 
	color: #fff;
	background-color :#2c3e50;
	border-color : :#2c3e50;
}

input.subbutton,
   button.subbutton {
    margin:  10px 2px; 
	border:0;
    padding: 5px 10px;
    border-radius: 8px;
    box-shadow:               rgba(0,0,0,0.3) 1px 2px 1px;
    background: linear-gradient( #aac, #cce  );
    font-size: 1.066em; 
	font-family: "Source Sans Pro", Calibri, Candara, Arial, sans-serif;
}

input.subbutton login,
   button.subbutton login { margin: 10px 2px;
   }

input.subbutton.sml, 
	button.subbutton.sml { font-size:0.75em; }
button.invoice  { font-size:0.75em; }
   
input.subbutton:hover,
   button.subbutton:hover {   background: linear-gradient( #6c8, #6e8  ); }
button.button-offset   { margin-left:100px; } 

input.subbutton.dialog {  margin-left:20px;  }
div.btn_tar { float:right; text-align:right; }  /* border:0px solid red;*/

    /* from newjob.tpl */
input.autocomp { autocomplete:off; }          	/* err this is html, not valid css FIX */

		/*	FORM printform - printable subform to eliminate LHS menu etc.  */
form.printform	{   	display:block; 	clear:left;               }

button.toggle { border:none; }
button.toggle:hover { color: var(--root-font-color); }

	



/*=============================================

  LOGIN BLOCK - NOW INSIDE  MENU-WRAPPER DIV

================================================*/

    /* used by login box ; 2023.12 add width
	   all children are width 100%; 
	   add 40px top, bottom*/
.login_container {
	margin: 40px auto; 
	width: 350px; 
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05)
}


   /* login block is   referenced in  login_page_1.tpl
        tcols=100+200 + 3xborder-spacing at 10px; plus 50x2=>430
        2) 70+150 + 30 ->250+100 ... marg :0 auto; 
        */
div.login_block { margin:48px auto;  width:350px; padding:20px; }
div.login_block.p2 { width:530px;} 

table.login_table {  margin:0px; border:30px solid #E9E9E9; padding:20px;
        border-spacing:10px;          background:#F3F3F3;
        }
            /* set font-size & line-height in one */
table.login_table td, .login_table td input{ font: 1em/1.5em  Calibri;}

#login_message_table {   align:center;   border:0; padding:3; width:300px; }
div.login_notice   {    text-align:center;  	
                        font-size: 0.8em;  	
                        font-family: Verdana, Arial; }


/*=============================================

         SHOPPING /BASKET 

================================================*/

img.basket_img { margin-left:20px; width:25px; height:25px; }
img.basket_img:hover { content: url("/images/basket_add.svg");  }

img.trash_img { width:25px; height:25px; }
img.trash_img:hover { content: url("/images/trash-bin-red.png"); }

img.eu_icon {  width:40px; margin-left:70px; }	
img.world_icon {  width:20px; margin-left:20px; padding-top:5px;}
img.world_icon:hover {  cursor:pointer;}

div.item_added_message { padding-left: 40px; }

div.basket_holder { 
	position: absolute; 
	right:0px;
	top: 2px; 
}
div.basket_top_right { 
	display:inline-block;
	width:55px;  height:40px;
	border-radius:20px;
	border:2px solid  red; 
	background-color:white;
}
img.basket_with_items { 	width:45px; }
div.basket_count{ 
	position: relative; 
	float:right;
	right:24px;
	font-size:1.8em;
	color:black;
}

div.basket_review,
div.basket_checkout,
div.payment_response { 
	position: absolute;
	top:150px; left: 200px; 
	background: white;
	border-radius: 5px;
	z-index:100;
}
div.basket_banner{ 
	height: 35px; 
	background: #ccc;
	margin-bottom:5px;
}
div.basket_banner:hover{ 
	cursor:move; 
}
div.basket_content{ 
	padding: 15px; 
}
.basket_request_a_date {
	display:inline;
}
.basket_buttons {
	display:inline-block;
	float:right;
	margin-right:20px;
}
.basket_payment_recap { 
	padding-left: 40px; 
}
span.basket_note { font-size: 0.8em; }

		/* higher specificity else overridden by .inline */
#discount_box .hidden  { display: hidden } 

.offer_text { font-size:0.9em; 
	cursor: pointer; 
}



/* ============= CHECKOUT ============= */

div.checkout_width {width:60%;}

.checkout_options_hdr { padding:10px; background: #CDC; }


/* ============= CALENDAR ============= */


.calendar_holder {
	position:absolute;
	top:70px;
	left:0px;
	padding-left:10px; 
}

.calendar_header {
	background-color:#CFC;
	margin-bottom:1px;
}
.calendar_header span.explain{
	margin: 0 20px;		
}
.calendar_header span.jump{
	margin-left:50px; 		
}


/*=============================================

	CUSTOMER LOG IN 

===========================================*/

.password_view {position:absolute;  top:22px; right: 5px;  }

.icon_password_view {
	width:32px; height:32px; right:15px; 
	content:url("/images/password_view.png");	
}

.icon_password_view.hide {
	content:url("/images/password_hide.png");	
}


/*=============================================

  MEDIA QUERIES 
	picture sources are in base.html <header>
	min-width: 500px - overrides for phones held horizontally
	min-width: 750px - overrides for ipads held vertically
	min-width: 1000px - overrides for ipads held horizontally
	min-width: 1250px - overrides for laptops and desktops

	mobile 	320-480px
	tablets 481-768px
	laptops 769-1024px
	desktops 1025-1200 and more

	content controlled by wrapper astro_content, 
	then item-title and narrative
	item-title font default is 30pt narrative is 16pt
================================================*/

@media screen and (width > 1000px ) { 
	/* div.astro_content{ width: 850px;} 	/* default  add 50 for basket*/
}

@media screen and (width <= 1000px ) { 
	div.title_leader { font-size: 2.0em; }	/* desktop is 2.5em */
	div.title_strap { font-size: 1.0em; }
	
		/* at W800; content-holder crashes into consultations menu */
	div.content_holder { width: 60%; margin-left:0px; }
	div.sidebar_detail { padding-right:0px; }
}	

@media screen and (width > 768px ) { 
	div.navbar-top { display: block; position:relative; }
	div.hamburger_menu { display:none; }		/* temp setting */
	/* item-title & narrative font-size return to default (30t) */
	
	
	
}

/* 	RHS (default) menu has L2 absolutely positioned to ensure 
	L2 > li items don't take part in the doc flow
	
	At 768 switch to Vertical Menu on LHS 
	BUT for level2 vertical menu, 
	position needs to become **Relative** 
	to ensure following items ARE  shoved down
	
   do NOT set astro_content width: 480px; 
   Top menu Wraps at about 1020 ..
   
   2025.0103 The top Menu container is pos:abs with right:10px but 
   the banner content shoves the left margin over to mid-page, then the 
   div.navbar-top is left-aligned so the menu drops down into the middle of teh screen,
   crashes into the stars; so fix by floating that div right
   
   Image holder height starts at 1040 pix and gets reduced by JS for a animation 
   of the part of the screen moving up into view, which it doesn't otherwise do on a desktop
   Image for 768 is 768x535 - a big reduction on 1040!! 
   for <480 image is 480x 334 !
   
   */
@media screen and (width <= 768px ) { 
	
	div#image_holder { /* height: 600px; */
		}
	
		/* shove the Title right up on small screens from 20 -> 6px */
	div.banner_abs_right { 
		top:5px; 
	}
		/* 2025.01 need to bring the menu to top, 
		 z-index no use on static elements so add relative */
	div.navbar-top { 
		padding: 0; 
		padding-top:20px; 
		margin-left:0; 
		float:right; 	/* see comment 2025.0103 */
		position:relative;
		z-index:200; 
	}
	
		/* user agent stylesheet has 40px !! 
		2025.10.23 leave menu as horizontal 
		ie not >li display:block */
	ul.nav { padding-inline-start: 10px;  }
	/*ul.nav > li { display: block; } */
	
	
	ul.level2 { position: relative } 
	
	div.title_leader { font-size: 1.6em; }	/* desktop is 2.5em */
	div.title_strap { font-size: 1.2em; }
	
		/* blog list / selector is on RHS for large screens but
		   at this level its got to come over to the left.
		   pos is absolute. Duh now it obscures the menu!!!  */
	div#item_selector { 
		left:10px; top : 10px; 
		max-width: 150px; 
	}
	
	
	div.container_B2 { padding-left: 20px; } 
		/* modify menu depth / appearance 
			need to mod the slidemenu as well 
			menu_L1 already has font 0.9em (863)
			which is .nav>li>a 
			so cut out the > div > 
			*/
	ul.nav > li  a { 
		padding: 0;  		/* squeeze up the 1st HREFs  */
		/*font-size:1.2em; */
	}
	ul.level2 li  { padding-top :0px; } /* squeeze up the 2nd li items */		
	div.ta-c { text-align:left; }
	
	/* New : base child reductions on rems 
	div.item-title { font-size: 24pt; }
	div.narrative, div.signoff { font-size: 14pt; }
	*/
	
	div.blog-title { font-size: 22pt; min-width: 300px; }
		/* deflt has "sbs" but for <=768 get date to wrap onto next line */
	div.blog-date { font-size: 16pt; display: block; }
	div.blog-narrative { font-size: 14pt; width: 50%; }
	
	/* for narrow, shift HDR and list of posts Right-Align */
	div.rhs_header { text-align: right;}	
	div.rhs_list_box {  text-align: right;}
	
	/* ===========   =============*/
	
	/* 	reduce parent style and let 
		child rems reduce accordingly */
	div.content_style { 
		font-size: 1.0rem; 
	}
	div.no_content { 
		width:200px;
	}
	
	/* ===========  CHECKOUT =============*/
	
	div.basket_review,
	div.basket_checkout,
	div.payment_response { 
		
		top:75px; left: 20px; 
		
		border-radius: 5px;
		padding-bottom:30px; 	/* extend white space to cover Consultations still showing */
		
	}	
	div.checkout_width {
		width: 80%;
	}
		/* destroy flex on narrow inputs */
	div.customer_inputs .flex-row {
		display:block;
	}
	
}

	/* at 480 & below, blog list has to go over to LHS */

@media screen and (width <= 480px ) { 
	
	div#image_holder {   	/*height: 300px; */	}
	
		/* oct 27; for image tall & narrow, 
		reduce LM and increase top margin to shift text down into sunset 
		*/
	div.homepage_content { 
		margin-top:30%;
		margin-left:12%;
	}
		/* and shift the images down */
	div.homepage .helen {
		padding-top: 60px; 
	}
	
	div.container_B2 { padding-left: 5px; } 
	div.title_leader { font-size: 1.4em; }
	div.title_strap { font-size: 1.0em; }

	div.sidemenu_parent { 	}
	
	ul.nav > li > div > a   {
		font-size: 1.0em; 
		padding-right:4px; 
	}
		/* vertical menu normally 0.9em */
	div.collapsed { 
		font-size: 0.8em;
	}

		/* 	reduce parent style and let 
		child rems reduce accordingly */
	div.content_style { 
		/* font-size: 1.4rem; */
	}
	div.no_content { 
		width:125px;
	}
	div.slidemenu_one { 
		font-size: 0.9em;
	}
	/* keeping parent of 1.8rem; but reduce sidebar    
		for < 480 instead of text right-aligned in a big box;
		shift the box over (posrel; left 100px)
		then left-justify text within it
		
		, */
	ul.rhs_menu_detail {
		position:relative;
		left:140px; 
		display:block; width:190px; 
		text-align: left; 
		font-size: 0.60em; 	
	}
	div.menu_L1 { font-size:0.8em; }
	
	div.sidebar_detail {
		padding-right:0px; 
		padding-top: 20px;
	}
	
	div.content_holder { 
		margin-left:0px;  
		padding-left: 10px; 
		width:56%; /* down from 70% */
	}
	

		/* blog list / selector is on RHS for large screens but
		   at this level its got to come over to the left.
		   pos is absolute. Duh now it obscures the menu!!!  */
	div#item_selector { 
		left:10px; top : 10px; 
		max-width: 150px; 
	}
	
	
	/*div.item-title { font-size: 20pt; }
	div.narrative, div.signoff { font-size: 12pt; }
	*/
	
	p { margin-block-start: 0.5em; } 
		/* try scaling it deeper for smallest images */
	img.main-image {
		height: 120%; 	
	}
	
	div.blog-title { font-size: 18pt; min-width: 200px; }
	div.blog-date { font-size: 14pt; }
	div.blog-narrative { font-size: 12pt; width: 50%; }
	

	div.basket_review,
	div.basket_checkout,
	div.payment_response { 
		
		top:50px; left: 5px; 
		
		border-radius: 5px;
		padding-bottom:30px; 	/* extend white space to cover Consultations still showing */
		
	}	
		
	div.basket_content{
		font-size:0.9em;	/* body font is 16px */
	}
		/* basket font */
	h2 { font-size:1.0em; }	
	
	div.checkout_width {
		width: 80%;
	}
	
}