/********************************************
The elements in this library are from mixed sources. 
All items are original authored by Charlton Bishop except those identified with w3 are drawn from w3 schools directly. 
sidenav, navbar were adapted from w3 schools, but with significant changes.
Approach to expanding tree navigator adapted from w3 schools
Most items including those drawn from w3 schools have had various modifications to suite our preferred style.
*********************************************/	

/* CSS Global Variables*/
:root {
  --sideNavWidth:290px;
  --sideNavWidthP:291px;
}

*{ 
	-webkit-box-sizing: border-box;
	box-sizing:border-box;
}


html,body {
  font-family: Arial, Helvetica, sans-serif;
  margin:0px;
  padding:0px;
	height:100%;
}


#container {
   min-height:100%;
   position:relative;
}

.leftPanel {
	position: fixed;
	top:0px;
	width: 0px;
	background-color: #66a1bf;
	min-height: 100%;
	z-index:0;
}

.snShow .leftPanel{
	width: var(--sideNavWidth);
}

/* Main column */
.main { 
/*  flex: 100%; /*70%; /* Set the width of the main content */
  display: flex;
  -webkit-flex-flow: row wrap;
  -moz-box-flex-flow: row wrap;
  flex-flow: row wrap;
  align-items: stretch;
  background-color: white; /* White background color */
	margin-left : 0px;
  transition: .5s;
  min-height: 100%;
  padding-bottom: 60px;   /* Height of the footer */
	z-index: -1;
  -webkit-transition:  0.5s;
  transition:  0.5s;
/*  padding: 20px; /* Some padding */
}


.main > * {
  padding: 0px;
  flex: 1 100%;
  -webkit-flex: 1 100%;
  -moz-box-flex: 1 100%;
}

/*
.snShow #main {
	margin-left : var(--sideNavWidth);
}
*/

.footer {
  background-color:/*#ffddaa;#4ba6ff;*/#77b2ef;
   position: absolute;
   bottom :0px;
   height:60px;
   width:100%;
  text-align: center;
  /*border-top:solid #eecc99 #888888 2px;*/
  /*box-shadow: 0px 0px 8px 2.5px #888888;*/
  font-weight: bold;
  font-size: 20px;
  color:#ffffff;
  z-index: 2;
}

.footertext {
  /*display: block;
  vertical-align: middle;
  line-height: normal;*/
  position: relative;
  top:50%;
  bottom:50%;
  /*left:50%;
  right:50%;*/
}

/****************** Tree Navigator ***************/
/* Remove default bullets from lists in the sidenav*/
.sidenav UL, #snavRootUL {
  list-style-type: none;
}

/* Remove margins and padding from the parent ul */
#snavRootUL {
  margin: 0;
  padding: 0;
}

.header {
  margin: 0px;
  padding:0px;
  top: 0px;
  width: auto;
  text-align: center; /* center the text */
  background: #66a1bf; /*#4da6bf;  dull blue background */
/*  background: #1abc9c;  green background */
/*  background: #6e83aa; * brighter blue background */
  color: white; /* white text color */
  z-index: 1;
}


/* Increase the font size of the <h1> element */
.header h1 {
  background-color: /*#cd9a01;*/#666666;  
  color: transparent;
  text-shadow: 2px 2px 3px rgba(255, 255, 255,0.9);
  -webkit-background-clip: text;
     -moz-background-clip: text; 
/*          background-clip: text; */
  font-size: 100px;
  border: 1px solid;
  margin: 0px;
  padding:0px;
}

/* MS Edge supports text-shadow differently from chrome, safari and firefox - this gives an almost substitute.
   Approach to feature detect taken from stackoverflow */
@supports (-ms-ime-align:auto) {
    .header h1 {
        color: #eeeeee;
/*    color: #3B5957;
*/    background-color: #666666; /*#5D8D89;*/
  		text-shadow: 1px 1px 2px rgba(255, 255, 255,0.8), 2px 2px 1px rgba(255, 255, 255,0.5), -1px -1px 3px rgba(36,36,20,0.9);
    }
}

/* Style the top navigation bar */
.navbar {
  position: -webkit-sticky;
	position: sticky;
	top: 0px; 
	margin-top: 0px;
  overflow: hidden; /* Hide overflow */
  background-color: #77b2ef; /*#333; #ffddaa;#4d88ff;#4da6ff;*/
  -webkit-transition:  0.5s;
  transition:  0.5s;
  max-height: 49px;
  z-index: 1;
}

/* Style the navigation bar links */
.navbar a {
  float: left; /* Make sure that the links stay side-by-side */
  display: block; /* Change the display to block, for responsive reasons  */
  color: #4444ff; /* white; * White text color */
  text-align: center; /* Center the text */
  padding: 14px 20px; /* Add some padding */
  text-decoration: none; /* Remove underline */
  font-family:sans-serif;
  font-weight: bold;
}

/* Right-aligned link */
.navbar a.right {
  float: right; /* Float a link to the right */
}

/* Change color on hover/mouse-over */
.navbar a:hover {
  background-color:  #76a9ef; /* #ddd; * Grey background color */
  color: #1111ff; /* black;  * Black text color */
}

/* Right-aligned link */
.navbar a.pagelinksel1 {
	color: #000000;
}

/* Change color on hover/mouse-over */
.navbar a.pagelinksel1:hover {
  background-color:  #76a9ef; /* #ddd; * Grey background color */
  color: #000000; /* black;  * Black text color */
}

/* Home link */
.navbar a.pagelinksel {
	color: #000000;
}

/* Change color on hover/mouse-over */
.navbar a.pagelinksel:hover {
  background-color:  #76a9ef; /* #ddd; * Grey background color */
  color: #000000; /* black;  * Black text color */
}


#menubutton{
  float: left;
  width: auto;
  font-family:sans-serif;
  font-weight: bold;
  text-decoration: none;
  color: #4444ff;
  display: block;
  padding-left:4px;
  padding-right:4px;
  padding-top: 15px;
  padding-bottom: 15px;
  -webkit-transition:  0.5s;
  transition:  0.5s;
}

#menubutton:hover{
  color: #1111ff;
  background: #76a9ef
}

.snShow #menubutton {
  float: right;
}

#menubargroup{
  float: left;
  width: auto;
  -webkit-transition:  .5s;
  transition:  .5s;
}

.snShow #menubargroup{
	width: var(--sideNavWidth); /*15%;*/
}

.bar1, .bar2, .bar3 {
  width: 17.5px;
  height: 2.5px;
  background-color: #333;
  margin-top: 3px;
  transition: 0.4s;
  margin-left: auto;
  margin-right: auto;
}

.snShow .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-4.5px, 3px);
}

.snShow .bar2 {opacity: 0;}

.snShow .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-4px, -4px);
}

/* Ensure proper sizing * 
* {

  box-sizing: border-box;
}
*/

#flexBox {
	display: flex;
	flex-direction: row ;
	flex-wrap: wrap;
	align-items: stretch;
	height : 100%;
}

.snShow #flexBox {
	left : var(--sideNavWidth); 
}

/*
#flexBox > * {
  flex: 1 auto;
}

 .sidenav { order: 1; }
 .row   { order: 2; }
*/

/* Column container */
.row { 
  display: inline-block;
	position : relative;
	width: 100%;
	top: 0px;

/*	flex : 70%;
  display: flex;
  flex-wrap: wrap;
*/
  padding: 16px; /* From Stick Navbar */
  -webkit-transition:  .5s;
  transition:  .5s;
  z-index:0;
}

.snShow .row {
	top: 0px;
	margin-left : 0; /* var(--sideNavWidth); */
	width: calc(100% - var(--sideNavWidthP));
	/*left : var(--sideNavWidthP);*/
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.sidenav {
  position: -webkit-sticky;
	position: sticky ;
	display : none;
	top: 46px; 
	margin-top: 0px;
/*	min-height: 100%; */
/*	flex-grow: 1; */
	align-self: stretch;
  height:  100%; /* 858px; Full-height */
  width: 0px; /* 0 width - change this with JavaScript */
/*  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
/*  top: 0; /* Stay at the top */
  left: 0;
/*  background-color: #f1f1f1; /* Grey background color */
  background: #66a1bf; /*#4da6bf; /* dull blue background */
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  padding-bottom: 20px; /* Place content 60px from the top */
  -webkit-transition:  .5s;
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
/*  flex: 30%; * Set the width of the sidebar *
  background-color: #f1f1f1; * Grey background color *
  padding: 20px; * Some padding */
}

.sidenav {
	-webkit-flex: none;
	-moz-box-flex: none;
	flex: none;
}

.row {
	-webkit-flex: 1 1 0;
	-moz-box-flex: 1 1 0;
	flex: 1 1 0;
}

.snShow .sidenav {
  width: var(--sideNavWidth); 
	display : inline-block;
	align-self: stretch;
  min-height: 100%; 
	
}


/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.sidenav li {
	padding-top: 8px;
}

.sidenav a {
  text-decoration: none; /* Remove underline */
  color: black; /* White text color */
}

.sidenav  a.activepage {
	color: white;
}

.sidenav .snav1:hover {
  background-color: #ddd; /* Grey background color */
/*  color: black; * Black text color */
}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 900px) {
  .row { 
/*    flex-direction: column; */
  }
}

/* Responsive layout - when the screen is less than 600px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 760px) {
	.header h1 {
		font-size : 50px;
	}
  .navbar a {
    float: left;
    width: 30%;
  }
	.snShow .leftPanel{
		width: 0px;
	}
  
  .sidenav {padding-top: 15px;}
	.snShow .sidenav {
  	width: 100%;
  }
	.snShow #menubargroup{
		width: auto; /*15%;*/
	}
}


/* Style the caret/arrow */
.caret {
  cursor: pointer; 
  user-select: none; /* Prevent text selection */
}

/* Create the caret/arrow with a unicode, and style it */
.caret::before {
  content: "\25B6";
  color: black;
  display: inline-block;
  margin-right: 6px;
}

/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.caret-down::before {
  transform: rotate(90deg); 
}

/* Hide the nested list */
.nested {
  display: none;
}

/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
.active {
  display: block;
}

/****************** Sticky Navbar ***************/
/*
.content {
  padding: 16px;
}
*/

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

/* Row element immediately following the stiky element */
.sticky + .row {
  padding-top: 60px;
}

.sticky + .sidenav {
/*	top: 46px; */
  padding-top: 60px;
}

/****************** Page Containers ***************/
/** All styles staring "w3-" taken from w3Schools website **/

.w3-container,.w3-panel{padding:0.01em 16px}
.cb-panel{width:100%}
.w3-panel{margin-top:16px;margin-bottom:16px;width:100%}
.w3-container:after,.w3-container:before,.w3-panel:after,.w3-panel:before,.w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-padding:before,
.w3-cell-row:before,.w3-cell-row:after,.w3-clear:after,.w3-clear:before,.w3-bar:before,.w3-bar:after{content:"";display:table;clear:both}
.w3-light-grey,.w3-hover-light-grey:hover,.w3-light-gray,.w3-hover-light-gray:hover{color:#000!important;background-color:#f1f1f1!important}

.cb-embed-display {width:100%; height:80%; background-color:#fff;padding:8px 12px;border-left:4px solid #4CAF50}

.w3-code,.w3-codespan{font-family:Consolas,"courier new";font-size:16px}
.w3-code{width:auto;background-color:#fff;padding:8px 12px;border-left:4px solid #4CAF50;word-wrap:break-word}
.w3-codespan{color:crimson;background-color:#f1f1f1;padding-left:4px;padding-right:4px;font-size:110%}
.w3-section,.w3-code,.cb-embed-display{margin-top:16px!important;margin-bottom:16px!important}

/*********************************Special Purpose Containers *******************************/

.htmleditor {
	position : relative;
  left:0px; 
  top:0px;
  overflow-y: auto;
  width:  100%; /* calc(100vw - 20px);      /* calc and viewport to the rescue */
  height: 100%; /*calc(100vh - 20px); */
  min-height: 200px;
  resize: vertical;
}

.htmldisplayer {
	overflow-y: auto;
  resize: vertical;
}

.htmldisplaypanel {
	overflow-y: hidden;
  resize: vertical;
}

table.cb-greyzebra {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

.cb-greyzebra td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

.cbgzwidf1
{
	width:120px;
}

.cbgzwidf2
{
	width:200px;
}

.cb-greyzebra th {
  background-color: #d1e1ff;;
}

.cb-greyzebra tr:nth-child(even) {
  background-color: #f1f1f1; /*#dddddd;*/
}

.cb-bolddesc dt {
	font-weight:bold;
}

.cb-bold {
	font-weight:bold;
}

.cb-responsive {
	width:100%;
  max-width: 100%;
  height: auto;
}

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.cnavbar{
	width:100%;  /*stretch the navbar across the page */
	background-color:black;  /*Make it black */
	color:white; /*Make the text color white */
  overflow:hidden; /*Hide any overflow */
  padding: 14px 20px; /* Add some top and bottom padding */
}

.cnavbar a {
	color:white; /*Make the text color white */
	text-decoration:none; /*Remove the default text underline */
  text-align: center; /* Center the text */
  padding: 14px 20px; /* Add some top & bottom padding */
}
.cnavbar a:hover {
 			background-color:green;  /*Make the background green on hovering */
}
 		
/********************* CSS Examples ***************************************/

.cbexamplepara {
	color : blue;
	background-color : green;
	font-size : 20px;
	margin-left : 100px;
	border : 2px solid black;
	font-weight: bold;
	border-style: dotted;
}

/* This is the standard (default) settings- you don't actually need to define them, as they are assumed */<br/>
.exccss_base {
	color : black;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	font-size: medium;
	font-family:Arial, Helvetica, sans-serif;
}
 
/* Italics */
.exccss_italics {
	font-style: italic;
}
 
/* Bold */
.exccss_bold {
	font-weight: bolder;
}
	
/* Small Caps */
.exccss_fvariant {
	font-variant: small-caps;
}
	
/* Large Font */
.exccss_fsize {
	font-size: large;
}

/* Green Font */
.exccss_fgreen {
	color: green;
}

/* 3 Columns */
.exccss_3Column {
	-webkit-columns : 120px 3; /* Chrome, Safari, Opera */
	-moz-columns : 120px 3; /* Firefox */
  -webkit-column-rule: 1px solid brown;/* Chrome, Safari, Opera */
  -moz-column-rule: 1px solid brown; /* Firefox */
  -webkit-column-gap: 20px; /* Chrome, Safari, Opera */
  -moz-column-gap: 20px; /* Firefox */
	columns : 120px 3;
	column-rule:1px solid brown;
	column-gap: 20px;
}

.exccss_3Column h2 {
  -webkit-column-span: all; /* Chrome, Safari, Opera */
	column-span: all;
}

/* Div Settings showing disply, position, border, margin and sizing */
.exccss_d1{
	  margin-top:5px;
		border:2px solid black;
	  box-sizing: border-box;
		width:49%;
		display: inline-block;
}

.exccss_d2{
	  margin-top:5px;
		border:2px solid black;
  	box-sizing: border-box;
		width:49%;
		height:80px;
		display: inline-block;
}

.exccss_d3{
	  margin-top:5px;
		border:2px solid black;
		border-radius:25px;
}

.exccss_d4{
	  margin-top:10px;
		border:2px dotted black;
		padding:20px;	
}

.exccss_d5{
	  margin-top:5px;
		border:2px solid black;
		height:300px;
		box-shadow:10px 10px 10px grey;
		position:relative;
		top:0px;
		left:0px;
}
.exccss_d6{
	  margin-top:5px;
		border:5px groove red;
		height:100px;
		width:150px;
		box-shadow:10px 10px 10px grey;
		position:relative;
		top:50px;
		left:50px;
}
.exccss_d7{
	  margin-top:5px;
		border:2px solid black;
		height:100px;
		width:150px;
		box-shadow:10px 10px 10px grey;
		position:absolute;
		top:50px;
		left:300px;
		border-radius:25px;
		padding:20px;	
}
.exccss_d8{
	  margin-top:5px;
		border:5px ridge purple;
		height:100px;
		width:150px;
		position:relative;
		top:50px;
		left:50px;
}

/*Background Colout CSS */
.exccss_bkgrndc{
	background-color:yellow;
}

/*Background Image CSS */
.exccss_bkgrndi{
	background-image:url('../images/honeycomb1.jpg');
	background-position:center;
	background-size:cover;
}