@CHARSET "UTF-8";

/* these styles are for page content and can be changed by editors (and used in page editor fields)
    this stylesheet is loaded before the site stylesheet and so that may override these styles  */
html {	
	position:relative;
	height:100%;
}

body {	
	box-sizing: border-box;
	position:relative;
	overflow:auto;
	min-height:100%;
	/* w3c says don't set font size but accept device default as that will be visible (so use % ro em to adjust that?) */
	/* that's fine but IE 11 default font is too small - tough on them?  **** */
	font-size:1.1em;
    /* font-size:18px;	/* vw gives problems with widescreen v 4:3 and vh gives problems with CKEditor, px not adaptable to smaller/larger screens */
    margin:0;
    border-width:0;
    padding:0;
    padding-bottom:160px;	/* for footer on longer pages */
    background-color:rgb(153,187,255);	/* base colour for page (gradient will be added by next line) */
    /* background-image: linear-gradient(to right, rgba(150,180,255,0.5), rgba(160,190,255,0.5), rgba(170,200,255,0.5), rgba(180,210,255,0.5), rgba(180,210,255,0.5), rgba(170,200,255,0.5), rgba(160,190,255,0.5), rgba(150,180,255,0.5));*/
    background-image: linear-gradient(to right, rgba(180,180,180,0.4), rgba(190,190,190,0.4), rgba(200,200,200,0.4), rgba(210,210,210,0.4), rgba(210,210,210,0.4), rgba(200,200,200,0.4), rgba(190,190,190,0.5), rgba(180,180,180,0.4));
}

div {
    margin:0;
    border-width:0;
    padding:0;
}

footer {
	position:absolute;
	bottom:10px;
	height:160px;
	text-align:center;
	clear:both;	
	width:100%;
}

#adwords {	/* div added by Google */
	
}

#content {  /* div to contain all editable page content (which comes from the database en masse) */

    margin:0px;
    padding:0px;
    border:0px;
	overflow:auto;	/* to allow for handing floated images */
}

#dropdownmenu {
	position:absolute;
	left:0;
	top:0;
	height:1em;
	width:14em;
	z-index:2147483647;	
}

#navbuttons {
	position:relative;
	height:2em;
	width:6em;
	margin-left:auto;
	margin-right:auto;
	padding:0;	
	border:0;
}


.navprevious {
	width:2em;
	height:1em;
	float:left;
	padding:0;
	margin:0;
	border:0;
	text-align:center;
	float:left;
}
.navup {
	width:2em;
	height:1em;
	float:left;
	padding:0;
	margin:0;
	border:0;	
	text-align:center;
}

.navnext {
	width:2em;
	height:1em;
	float:left;
	padding:0;
	margin:0;
	border:0;		
	text-align:center;
}


.navbox  a {
	line-height:1em;
	display:block;
	padding:0;
	margin:0;
	border:0;	
	text-align:center;
	text-decoration:none;
}


#childrenlinks {
	height:2em;
	margin-left:auto;
	margin-right:auto;
}

.childlink {
	height:2em;
	width:6em;
	float:left;
	text-align:center;
}

/* override that layout with a flex box if the browser supports it */
/* all same width gives symmetry but width based on their content is most efficient if space limited */
@supports ((display:flex) and (flex-wrap:wrap) and (flex-direction:row)) {
	#childrenlinks {
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		min-height:2em;
		height:auto;
		max-width:80%;
		width:auto !important;
		margin-left:auto;
		margin-right:auto;
		justify-content:center;
	}
	
	.childlink {
		
		width:auto;	/* child element will size to fit amount of text */
		margin-left:10px;
		margin-right:10px;
		text-align:center;
		float:none;
	}
}

.childlink a {	/* the immediate children of the current page can be shown as a link bar */
	color:white;	
	font-size:0.8em;
	
}

#showhidecomments {
	font-size:0.8em;
}

#comments { /* the DIV containing all comments on this page - initially "minimised" */

    display:none;
    border-width:0.1em;
    border-style:solid;
    border-color:#777777;
}

p {
	
}

h1 {
	color:white;
	text-align:center;
}

h2 {
    
}

h3 {
    
}

h4 {
    
}

pre.highlightsyntax {
	
}

ul {
	
}

ol {
	
}

img {
	padding:5px;
}

a {
	
}

object {
	
}

table {
	
}

thead {
	
}

tbody {
	
}

tr {
	
}

th {
	
}

td {
	
}

hr {
	
}

iframe {
	
}

blockquote {
	
}
/* styles to override syntax highlighting from codesnippet - original styles in highlight.js 
	within codesnippet plug folder ./javascript/ckeditor/plugins/codesnippet/lib/highlight/styles/default.css */
	
.hljs {  
  background: rgba(255,255,255,.25);
}
	
/* end of codesnippet/highlight.js styles */

/* class not needed so use title attribute as rule instead
/* for anything that has a title for pop up help 
.tipped {	
	border-bottom-style: dashed;
	border-bottom-color: #3333FF;
	border-bottom-width: 1px;
} */

/* give visual clue for presence of a title - should it be all elements or just some? */
span[title] {	
	border-bottom-style: dashed;
	border-bottom-color: #3333FF;
	border-bottom-width: 1px;
}

/* not links but have JavaScript attached */
.clickable {
	color:blue;
	text-decoration:underline;
}


li.sitemap {
	/* font-size:0.8em;	/* gives problems as each level of list shrinks */
	list-style-image:url('./images/navdown.png');
}

.lowlight {	/* reduced emphasis - greyed out */
	opacity:0.6;
}
.notdisplayed {	/* used to hide items for later reveal by user */
	display:none;
}

pre code{
	overflow-x:auto;
}

blockquote {
	background-color:rgba(255,255,255,0.1);
	border-style:solid;
	border-width:1px;
	border-color:rgba(255,255,255,0.8);
	padding: 5px;
	box-shadow:2px 2px 1px rgba(0,0,0,0.25);
	font-style:italic;
}