body {
 	margin: 0;
	overflow: hidden; /* overflow: hidden prevents full scrollbar in IE */ 
	width: 100%;
	height: 100%;
	font-family: Arial, Helvetica;
	font-size: 12px;
	background-color: #efefef;
 }
 
/* branding elements */
.system_logo {

}

.reseller_logo {

}

.customer_logo {

}

/* login page elements */
.login_page {
	height: 450px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-flow: column wrap;
	align-items:stretch;
	align-content:center;
	position: absolute;
}

.login_box {
	flex-grow: 2;
	width: 250px;
}

.login_branding {
	align-items:stretch;
	flex-grow: 3;
	height: 450px;
	width: 350px;
}

.login_logo {
	max-width: 200px;
	min-width: 200px; /*for SVGs which have small internal dimensions*/
	max-height: 120px;
}
	
.password_change {
	flex-grow: 1;
	width: 250px;
}

.login_item { /*common bounding box for login items. */
	background-color: /*#ffffff*/rgba(255, 255, 255, 0.4);
	border: 1px solid #e6e6e6;
	border-radius: 3px;
	padding: 10px;
	margin: 5px;
	display: flex;
	flex-direction: column;	
	justify-content:space-evenly;
	overflow: hidden;
}

.login_item div {
	flex-grow: 1;
	width: 100%;
	align-content:center;
}

.login_field { /* typically used on text input boxes */
	border: 1px solid #e6e6e6;
	border-radius: 3px;
	padding: 10px;
	margin: 5px;
	width: 220px;
}

.login_button { /*  */
	border: 1px solid #e6e6e6;
	border-radius: 3px;
	padding: 10px;
	margin: 5px;
	width: 240px;
}

	
/* header elements*/
 header { /* sets attributes of page top header bar; you must include "div" for IE */ 
	position: absolute; 
	width: 100%; 
	height: 60px; 
	background-color: #d0d0d0/*#5376F4*/; 
	overflow: hidden; 
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: space-between;
	align-items: stretch;
} 

.header_branding { /* system, reseller and customer logos on the left side of the header */
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	padding-left: 10px;
	top: 50%;
	position: relative;
	transform: translateY(-50%);
}

.header_item { /* sets padding on SVG logo and icon DIV sections */
 	display: inline-block;
 	padding-left: 5px;
 	padding-right: 5px;
}

/* chris, this has changed to stop wide logos getting out of hand */ 

.header_logo {
	max-height: 40px;
	max-width: 150px;
}

.header_icon { /* sets dimensions of top menu SVG icon DIV sections */
  	width: 35px;
  	height: 35px;
}

.header_buttons { /* system buttons on the right side of the header */
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	position: absolute;
	padding-right: 5px;
	top: 50%;
	position: relative;
	transform: translateY(-50%);
}

.circle {
	border-radius: 50%;
	width: 25px;
	height: 25px; 
	background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 0%, red 100%);
	background-image: -webkit-radial-gradient(45px 45px, circle cover, black, red);
	background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 0%, red 100%);
	color: white;
	font-family: arial;
}

.circle div {
	padding-top: 5px;
}

/* side toolbar elements */	
.toolbar { /* left-side tool / function bar */
  	top: 60px;
  	bottom: 0;
  	left: 0;
  	width: 70px;
  	position: absolute;
  	overflow: hidden;
}

.tab {
  width: 70px;
  right: 0;
  background-color: #777777;
}

/* need to tidy these two tags up, as they are both trying to do the same thing, and the second one is too general See .trigger, which should replace all this*/
label.tab > input { /* HIDE RADIO */
  visibility: hidden; /* Makes input not-clickable */
/*  position: absolute; /* Remove input from document flow */
}

[type="radio"] {
  border: 0; 
  clip: rect(0 0 0 0); 
  height: 1px; margin: -1px; 
  overflow: hidden; 
  padding: 0; 
  position: absolute; 
  width: 1px;
}

.tab_spacer {
  	background-color: #777777;
  	height: 100%
}

.tab > input + svg {
	display: block;
	width: 70px;
	padding-top: 10px;
	padding-bottom: 10px;
	fill: #e6e6e6; /* transparency won't make icon brightness dim when the panel is out, as it's relative to the toolbar background, not the body */
  background-color: #777777;
}

label.tab > input:checked + svg { /* (RADIO CHECKED) IMAGE STYLES */
	background-color: rgba(0, 0, 0, 0); /* sets the tab background to transparent, so it can dim with the body when the panel is out */
	display: block;
	fill: #000000;
}  

 .icon {
  	/* sets dimensions of side toolbar SVG icon DIV sections */
  	width: 40px;
  	height: 40px;
}

/* footer elements */
footer {
	bottom: 0;
	width: 100%;
	height: 25px;
	padding-top: 5px;
	position: fixed;
	overflow: hidden;
	background-color: #101010;
	color: #ffffff;
	display: inline-block;

}

/* main body elements */
section {
	overflow: auto;	
	position: absolute;
	top: 60px;
	left: 70px;
	bottom: 30px;
	padding-left: 10px;
	margin-right: 10px;
}

/* standard data list table */
.list {
	border-spacing: 0px;
}
.list td, th {
	text-align: left;
	padding: 5px 30px 5px 5px;
	margin: 0px;
}

.list thead tr {
	background: #444444;
	font-weight: bold;
	color: #e6e6e6;
}

.list tbody tr:nth-child(odd) {
	background: #e0e0e0;
}

.list tbody tr:nth-child(even) {
	background: #d0d0d0;
}

/* dashboard */
.dashboard {
	width: 100%;
	display: inline-flex;
	flex-wrap: wrap;
}

.dashboard_item { /*common bounding box for dashboard items. */
	background-color: /*#ffffff*/rgba(255, 255, 255, 0.4);
	border: 1px solid #e6e6e6;
	border-radius: 3px;
	padding: 10px;
	margin: 5px;
	position: relative;
	display: block;
	flex-grow: 1;
	width: 250px;
	height: 250px;
	overflow: hidden;
}

.dashboard_item svg { /* just playing with SVGs inside the dashboard items because I don't have charts */
	max-width: 90%;
	max-height: 90%;
}

.spinner {
	animation-name: rotation;
	animation-duration: 2s;
	animation-timing-function: linear;
	animation-delay: 1s;
	animation-iteration-count: infinite; 
	height: 50px;
	fill: #aaa;
}

@keyframes rotation {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}


/* fly-in panel common style */
.panel {
	position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  box-shadow: 0px 0px 10px grey;
  -webkit-transform-origin: 100% 50%;
  -webkit-transform: scaleX(0.00001);
  -webkit-transition: -webkit-transform 0.2s ease-in-out;
  outline: 0;
  overflow-y: auto;
  background: #eeeeee; /*chris, this has moved!*/
  z-index: 201; /*so has this!*/
  width: 400px; /*and this!*/
  
}

.panel_header {
	background-color: #0080ff;
	color: #ffffff;
	top: 0;
	width: 100%;
	height: 50px;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: space-between;
	align-items: stretch;
}

.panel_title {
	height: 20px;
	padding-left: 10px;
	top: 50%;
	position: relative;
	transform: translateY(-50%);
	font-size: 16px;
	font-weight: bold;
}

.panel_icons {
	height: 20px;
	padding-right: 10px;
	top: 50%;
	position: relative;
	transform: translateY(-50%);
}

.panel_icon {
	height: 20px;
	width:20px;
	fill: #ffffff;
}

.panel_content {
	display: block;
	width: 90%;
	padding-top: 10px;
	padding-left: 10px;
}

.panel_notification {
	display: block;
	border-bottom: 1px solid #ffffff;
	padding-top: 10px;
}

.panel_notification_controls {
	visibility: hidden;
	color: #0080ff;
	width: 100%;
	height: 8px;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: space-around;
	align-items: stretch;	
	margin-top: 3px;
}

/* pseudo-class control */
label.panel_notification > input:checked ~ div.panel_notification_controls,
/* javascript control - not in use yet */
.panel_notification_controls_show {
	visibility: visible; /* replace with animation? */
	height: 30px;
}

.panel_notification_button {
	height: 18px;
	top: 50%;
	position: relative;
	transform: translateY(-50%);
	font-size: 13px;
	font-weight: bold;
}

label.panel_notification > input {
  visibility: hidden;
}

/* chris... panel definitions have been removed and default values moved to .panel */

.notifications_panel { /* different width to default */
    width: 200px;
}

.second_panel { /* different width and z-index to default */
    width: 380px;
    z-index: 202;
}

/* dialogs */
.dialog_frame {
	left: 50%;
	top: 50%;
	position: absolute;
	z-index: 301;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
}

.dialog {
	border-radius: 10px;
	visibility: hidden;
	background-color:  #e6f2ff;
	width: 400px;
	display: none;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

/* exclusive or priority dialogs */
.dialog_over {
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 302;
	border-radius: 10px;
	position: absolute;
	visibility: hidden;
	background-color:  #e6f2ff;
}

.dialog_header {
	background-color: #0080ff;
	color: #ffffff;
	top: 0;
	width: 100%;
	height: 30px;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: space-between;
	align-items: stretch;
	border-radius: 10px 10px 0px 0px;
}

.dialog_title {
	height: 20px;
	padding-left: 10px;
	top: 50%;
	position: relative;
	transform: translateY(-50%);
	font-size: 14px;
	font-weight: bold;
}

.dialog_icons {
	height: 16px;
	padding-right: 10px;
	top: 50%;
	position: relative;
	transform: translateY(-50%);
}

.dialog_icon {
	height: 16px;
	width:16px;
	fill: #ffffff;
}

.dialog_content {
	display: block;
	padding-top: 0px;
	padding: 0px 10px 0px 10px;
}

.dialog_controls {
	background-color: #0080ff;
	color: #ffffff;
	bottom: 0;
	width: 100%;
	height: 30px;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: space-around;
	align-items: stretch;
	border-radius: 0px 0px 10px 10px;
}

.dialog_button {
	height: 20px;
	top: 50%;
	position: relative;
	transform: translateY(-50%);
	font-size: 14px;
	font-weight: bold;
}


@-webkit-keyframes dialog-animation {  
	0% {
		opacity: 0;
	    visibility: hidden;
	}
	100% {
		opacity: 0.9;
		transform: translate(-50%, -50%) scale(1.05);
		visibility: visible;

	}
}

@keyframes dialog-animation {  
	0% {
		opacity: 0;
	  visibility: hidden;
	}
	100% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1.05);
	  visibility: visible;	  
	}
}

/* common trigger for pseudo-class control*/
.trigger {
  border: 0; 
  clip: rect(0 0 0 0); 
  height: 1px; margin: -1px; 
  overflow: hidden; 
  padding: 0; 
  position: absolute; 
  width: 1px;	
}

/* chris, what follows is a mix of old pseudo-class control and javascript control. much has changed here */

/*pseudo-class trigger changes*/
.trigger:checked ~ nav.toolbar,
.trigger:checked ~ section,
.trigger:checked ~ header,
/*javascript trigger changes*/
.focusnok nav,
.focusnok header,
.focusnok section,
.focusnok footer {
    opacity: 0.5;
    overflow: hidden;
    pointer-events: none;
    cursor: default;
}

/* chris, all these used to be separate entries. */

/*pseudo-class trigger changes*/
.trigger_one:checked ~ .first_panel,
.trigger_two:checked ~ .second_panel,
.trigger_notifications:checked ~ .notifications_panel,
.trigger_system:checked ~ .system_panel,
.trigger_user:checked ~ .user_panel,
/*javascript trigger changes*/
.panel_show {
    -webkit-transform: scaleX(1);
}

/*pseudo-class trigger changes*/
.trigger_two:checked ~ .first_panel,
/*javascript trigger changes*/
div.focusnok { /* alters the colour of the first fly-out when the second is revealed */
    background: #bbbbbb;
    overflow: hidden;
}

/*pseudo-class trigger changes*/
.trigger_two:checked ~ .first_panel div.panel_header,
/*javascript trigger changes*/
div.focusnok div.panel_header { /* alters the colour of the first fly-out header when the second is revealed */
    background: #0057AD;
}

/* changes made when dialogs are invoked */
.trigger_dialog:checked + div.dialog { /* invokes dialog via check-box */
	  display: block;
}

.trigger_dialog:checked + div.dialog, /* invokes dialog via check-box */
.trigger_dialog_over:checked + div.dialog_over { /* invokes dialog via check-box */
    animation-name: dialog-animation;
    animation-duration: 0.2s;
    animation-direction: normal;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    -webkit-animation-name: dialog-animation;
    -webkit-animation-duration: 0.2s;
    -webkit-animation-direction: normal;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
}

/* pop-up alerts */
.flash {
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 999;
	border-radius: 10px;
	position: absolute;
	padding: 20px;
	font-size: 160px;
	font-weight: bold;
	visibility: hidden;
}

.show {
    -webkit-animation: flash-animation 1.5s alternate;
    animation: flash-animation 1.5s alternate;
    opacity: 0;
}

@-webkit-keyframes flash-animation {  
	0% {
		opacity: 0;
	    visibility: visible;
	}
	5% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1.1);
	}
}

@keyframes flash-animation {  
	0% {
		opacity: 0;
	    visibility: visible;
	}
	5% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1.1);
	}
}

.flash div {
	padding-left: 50px;
	padding-right: 50px;
	display: inline-block;
}

.flash_green {
	border: 20px solid rgba(0, 255, 0, 0.8);
	color: rgba(0, 255, 0, 0.8);
}

.flash_red {
	border: 20px solid rgba(255, 0, 0, 0.8);
	color: rgba(255, 0, 0, 0.8);
}

.flash_amber {
	border: 20px solid rgba(255, 200, 0, 0.8);
	color: rgba(255, 200, 0, 0.8);
}

/* chris, these elements are all new */

/* file upload interface elements */
.drop_area {
	display: block;
	height: 10px;
	text-align: center;
	border: 2px dashed #ddd;
	background: #fff;
	padding: 25px;
	margin: 8px 0px 8px 0px;
}

.drop_instructions {
	display: block;
	height: 46px;
}

.drop_uploading,
.drop_success,
.drop_error,
.drop_over {
	display: none;
	height: 46px;
}

.drop_over {
	font-weight: bold;
}

.selectedfiles img {
	max-width: 350px;
	max-height: 200px;
	margin-top:10px;
}


/* chris's CSS */
 .popupdialog { 
    width: 350px; min-height: 120px; padding: 3px; border: 2px solid blue; background: white
    display: inline-block;
    visibility: visible; 
  }    

  .popupdialog { 
    display: inline-block;
    visibility: hidden; 
    position:fixed; 
    top:0; 
    left:0;
  }    
  
  .popupprompt { 
    display: inline-block;
    visibility: hidden; 
    position:fixed; 
    top:0; 
    left:0;
  }    

  .popupfloat { 
    display: inline-block;
    visibility: hidden; 
    position:fixed; 
    top:0; 
    left:0;
  }    

  .content { 
    display: inline-block;
    visibility: hidden; 
    position:fixed; 
    top:0; 
    left:0;
 }
 
  .popupdialogblock { 
    width: 350px; min-height: 120px; padding: 3px; border: 2px solid blue; 
    background: white;
    display: inline-block;
    background: white;
    overflow: auto;
  }  

  .contentblock { 
    min-width: 150px; 
    min-height: 120px; 
    background: white;
    display: inline-block;
    overflow: auto;
  }   
  
 .functionblock { 
    min-width: 150px; 
    min-height: 120px; 
    padding: 3px; 
    border: 2px solid blue; 
    background: lightgrey;
    overflow: auto;
  }    
  
  .outputblock { 
    min-width: 150px; 
    min-height: 120px; 
    padding: 3px; 
    border: 2px solid red; 
    overflow: auto;
  }    
  
  .outputgui { 
    min-width: 150px; 
    min-height: 120px; 
    padding: 3px; 
    border: 2px solid purple; 
    background: white;
    overflow: auto;
  }    
  
  .inputblock { 
    min-width: 150px; 
    min-height: 120px; 
    padding: 3px; 
    border: 2px solid green; 
    overflow: auto;
  }