@charset "UTF-8";

/* these styles are for the site - menus, dialogs etc. which cannot be changed by page editors */

@font-face {
    font-family: 'Ebrima';
    src: url('./fonts/ebrima.ttf') format('truetype');		       
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Ebrima';
    src: url('./fonts/ebrimabd.ttf') format('truetype');		       
    font-weight: bold;
    font-style: normal;
}

body {
	font-family:Ebrima,Verdana, "sans serif";
	/* font-size:16px;*/
	min-width:22em;	/* figure arbitrary - needs to be set to prevent sticky/fixed header going over the main content **** tried to move that to paddingForHeader() in JS so not needed any more or do I need a @ for smaller screens? */
	/* **** using another flex box with direction column could fix this problem completely but IE11 might be a problem so would need to leave original styles there as well - do later*/
	padding-top:8em;	/* JS will change this to match the height of the header element */
}

header {   /* menu bar for pages */
    position:fixed;
    top:0;
    left:0;
    /* height:8em; does not allow for wrapping of h1 or lots of child links */
    height:auto;
    width:100%;
    background-color:rgb(153,187,255);
    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));
    min-width:35em;	/* needs to be set to prevent sticky/fixed header going over the main content **** do I need a @ for smaller screens? */   
}

/* although the next two are holding content they are part of the cms so are styles here */
main {
	/* IE 11 does not recognise main elements so need to tell it it is a block */
	display:block;
	/* margin-top:9em;	/* based on the body font size so has to be set there, allows for two rows of child pages but not flexible so moved to JS */
	margin-top:1em; /* plus whatever is set by JavaScript as body padding */
	margin-right:3em;
	margin-bottom:3em;
	margin-left:3em;
}




#extramenu {
	position:absolute;
	right:0px;
	top:0px;
	height:100%;
	width:300px;
}


table, th, td {
    border-width:1px;
    border-style:solid; 
}

table {
	border-collapse:collapse;
	
    margin-left:auto;
    margin-right:auto;
}

th, td {
	padding:3px;
}

h1 {
	font-size:130%;
}

h2 {
    font-size:120%;
}

.navbutton {	
	border-width:0px;
	padding:0px;
	margin:0px;	
}

.downarrowclass {
	
}

div.dialog {
	position:fixed;
	opacity:0.85;
    border-style:solid;
    border-width:3px;
    border-color:#BBBBBB;
    border-radius:10px;
    padding:10px;
    box-shadow:10px 10px 2px 5px #666666;
}

div.controlBar h1 {
	font-size:110%;
    color:white;
    margin:1px;
    line-height:20px;
}

#shadowDiv {    /* used to grey out page during dialog pop-ups */
    position:fixed;
    top:0px;
    left:0px;
	width:100%;	
	opacity:0.9;
	background-color:#BBBBBB;
}

#loginDiv {
	width:340px;
	height:540px;	
	background-color:yellow;
}

#registerDiv {
	width:340px;
	height:540px;	
	background-color:yellow;	
}

.closeDialogue {    /* to close any dialog */
	position:absolute;
	top:0px;
	right:0px;	
	width:20px;
	bottom:0px;
	vertical-align:middle;
}

label.login {
	display:block;
	width:250px;
    margin-left:auto;
    margin-right:auto;
    text-align:left;
    margin-top:40px;
}

input.login {
	display:block;
	height:25px;
	width:250px;
	margin-left:auto;
	margin-right:auto;
	font-size:18px;
}

#logoutDiv {    
    width:340px;
    height:540px;   
    background-color:yellow;   
}

#pagecontent {  /* textarea containing the edit version of the page content */
	width:100%;
	margin:0px;
	padding:0px;
	border:0px;
}

#editpagesavecontrols {
	text-align:center;
	margin:3px;
}

#editpagesavecontrols input {    
    margin:3px;
}



.todo > a { /* to highlight any items still needing initial stages of creation */
	color:red !important;
}

.tocheck {  /* to highlight areas needing a brush up */
	
}

.controlBar {   /* the bar at the top of imitation dialogue boxes used for dragging etc. */
    position:relative;
	height:20px;
	padding:5px;	
	background-image: linear-gradient(to right, #000000, #AAAAAA);	
	border-top-left-radius:7px;
	border-top-right-radius:7px;
	vertical-align:middle;
	margin-top:-10px;
	margin-left:-10px;
	margin-right:-10px;
	margin-bottom:5px;
	cursor:move;
}

.clickable {
	cursor:pointer;
	/* cursor:hand; **** not sure why this was here */
}

#commentDiv {
    position:fixed;
    width:340px;
    height:540px;   
    background-color:yellow;
   
}

#commentDiv textarea {
	position:relative;
	width:90%;	
	height:300px;
}

#reportPageDiv {
    position:fixed;
    width:340px;
    height:540px;   
    background-color:green;
   
}

#reportPageDiv textarea {
	position:relative;
	width:90%;	
	height:300px;
}

.dialogMessage{	/* initially non-displayed paragraph to display brief messages in dialogs as needed */
	display:none;
	color:red;
		
}

#inbox{
	width:95%;
}

.messageSubject {
	min-width:65%;
}

.inboxdatetime {
	min-width:10em;	/* 19 characters but not M widths **** how to make sure date fits? */
}

.inboxactions {
	min-width:120px;
}

td.read, td.read a {
	opacity:0.50;
}

#message { /* DIV within TD in messaging page which shows chosen message in table cell */
    margin-top:10px;
}

#replyDiv {
	position:absolute;	
	margin-left:auto;
	margin-right:auto;
	background-color:#FFFF88;
}
#forwardDiv {
    position:absolute;  
    margin-left:auto;
    margin-right:auto;
    background-color:#88FF88;
}
#sendNewMessageDiv {
	position:absolute; 
    margin-left:auto;
    margin-right:auto;
    background-color:#FFFF88;
}

div.formfield {
	margin:3px;
}



#subject {  /* the subject field */
	width:80%;
}


#inbox td {     /* allows message to appear below without alignment looking wrong */
	vertical-align:top;
}

#predictionDiv {
	position:absolute;
	background-color:#0000FF;
	height:200px;
	width:200px;	
	color:white;
}

#predictionDiv li {
	list-style:none;
}

#pageEditDiv {
	position:absolute;
	background-color:#AA66AA;
	height:95%;
	width:95%;	
}

/* rules for standard forms on full pages */

/* a label and field pair will appear on one line */
.formEntry {
	padding:5px;
	clear:both;
}

.formLabel {
	padding:5px;
	margin-right:5px;
	width:400px;
	background-color:orange;
	float:left;	
	height:90px;
}

.formLabel label {
	font-weight:bolder;
}

.formField {
	padding:5px;
	background-color:orange;
	float:left;
	height:90px;
}

.warning {  /* warnings to editors etc. - normally paragraphs? */
	border-width:1px;
	border-style:solid;
	border-color:red;
	padding:2px;
}

/* the text sitemap */

.inTextIcon {
	height:1em;
	width:1em;
	vertical-align:	text-bottom;
}

.inTextIcon:hover {
	cursor:pointer;
}

/* for the non-existent sitemap (div version) */

.upright {
	    
	position:absolute;
	width:0px;
	height:0.5em;
	border:0px;
	padding:0px;
	margin:0;
	border-width:0px;
	border-left-width:0.06em;
	border-left-style:solid;
	border-left-color:black;
	left:50vw;

}

.horiz {

	position:absolute;
	width:7em;
	height:0em;
	border:0px;
	padding:0px;
	margin:0;
	border-width:0px;
	border-top-width:0.06em;
	border-top-style:solid;
	border-top-color:black;
	left:50vw;

}

.pagename {

	position:absolute;
	width:6em;
	height:1em;
	border:0px;
	padding:0px;
	margin:0;
	background-color:red;
	left:50vw;

}

/* end of sitemap div version styles */

.small {
	font-size:0.8em;
}

.lowlight {
	opacity:50%;
}