/*
 * Style sheet for Semantic Pad Editor.
 *
 * (c) Mark Dixon 2015, 2016, 2017.
 */
html {
	height: 100%;
	font-family: 'Arial';
}

body {
	margin: 0;
	padding: 0;
	border: 0;
	overflow: auto;
	height: 100%;
	max-height: 100%;
	background: #eef;
}

.noSelect {
	/* Prevent text from been selected */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	/*cursor: default;*/
}

.smalltext {
	font: normal normal 14px Verdana, Geneva, Arial, Helvetica, sans-serif;
	vertical-align: top;
}

.hidden {
	display: none;
}
/*********************************************************************************************
 *
 * Styling for the overall page.
 *
 */

/* Beta Image styling. Will be removed once beta release longer used */
#beta-image {
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 10;
	pointer-events: none;
	opacity: 0.4;
}

/* The top bar is in a fixed position at the top of the window, it carries the Page title and main menu options */
#topbar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 40px; /*Height of frame div*/
	overflow: hidden; /*Disable scrollbars*/
	background-color: #147;
	/*border-bottom-style: ridge;*/
	border-bottom-color: #bbb;
	z-index: 10;
	min-width: 640px;
}

/* Formatting for the menu at the top drop down menu */
#topBarMenu {
	position: fixed;
	width: 100px;
	height: 200px;
	background-color: #123;
	z-index: 12;
	right: 125px;
	/* makes a border */
	border-style: solid;
	border-color: black;
}

/* Code for showing username */
#topBarMenu #topBarUsernameMenu {
	float: right;
	padding-right: 2px;
	font: normal normal 15px Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-transform: uppercase;
}

/* Formatting for rows */
.topBarMenuRow {
	width: 100%;
	background-color: white;
	height: 20px;
	font-size: 13px;
	text-align: right;
	padding-top: 1px;
}

/* The Main title (typically displayed to the left hand side of the topbar) */
#title {
	position: absolute;
	left: 41px;
	top: 7px;
	font-size: 21px;
	font-family: 'Arial';
	color: #fff;
	cursor: default;
}

#title-logo {
	position: absolute;
	left: 10px;
	top: 5px;
}

#title-logo-spin {
	position: absolute;
	left: 10px;
	top: 5px;
}

/* The Main toolbar (shown to the right of the main title). */
#toolbar_main {
	position: absolute;
	left: 212px;
	top: 0px;
	right: 8px;
	/*background-color:#f00;*/
}

/* The Main toolbar sharing text (shown over toolbar for sharing/readonly info). */
#toolbar_txt {
	position: absolute;
	left: 560px;
	top: 12px;
	background-color: transparent;
	color: #bbb;
	font-size: 15px;
}

/* The Main toolbar login text (shown over toolbar for logged in user name). */
#login_txt {
	position: absolute;
	right: 78px;
	top: 12px;
	background-color: #147;
	color: #bbb;
	font-size: 15px;
}

#title:hover span#titleLeft {
	color: #888;
}

#title:hover span#titleRight {
	color: #fff;
}

#titleRight {
	color: #888;
}

/* Contains the main page contents below the top bar. General container for all other content (except the topbar) */
#mainframe {
	position: absolute;
	background: #eef;
	top: 40px;
	bottom: 0px;
	width: 100%;
	min-width: 640px;
}

/*********************************************************************************************
 *
 * Styling for the main working area (the three panes)
 *
 *
 */

/* 
 * Pane manager window which contains the resizable main panes. The pane manager exists so that 
 * it can deal with events that allows the user to resize individual panes.
 */
#pane_manager {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	/*background-color: #ff0;*/
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/*
 * The upper pane managed by the pane manager.
 */
#upper_pane {
	position: absolute;
	top: 0px;
	bottom: 160px;
	left: 0px;
	right: 0px;
	overflow: hidden;
}

/*
 * The lower pane managed by the pane manager.
 */
#lower_pane {
	position: absolute;
	height: 160px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	overflow: hidden;
}

/*
 * The left hand pane managed by the pane manager.
 */
#left_pane {
	position: absolute;
	/*background-color: #f00;*/
	top: 0px;
	bottom: 0px;
	left: 0px;
	width: 210px;
}

/*
 * The central pane managed by the pane manager.
 */
#middle_pane {
	position: absolute;
	/*background-color: #0f0;*/
	top: 0px;
	bottom: 0px;
	left: 210px;
	right: 250px;
}

/*
 * The right hand pane managed by the pane manager.
 */
#right_pane {
	position: absolute;
	/*background-color: #00f;*/
	top: 0px;
	bottom: 0px;
	right: 0px;
	width: 250px;
}

/*
 * Provides a class for inner panes shown within the resizable pane areas. This provides a buffer area and a shadow
 * around the internal panes.
 */
div.inner_pane {
	position: absolute;
	margin-left: 2px;
	margin-right: 2px;
	left: 2px;
	right: 3px;
	top: 6px;
	bottom: 2px;
	/* border-style: outset;
	 border-width: 3px;
	 border-color: #eee; */
	/*box-shadow: 6px 6px 2px #666;*/
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	overflow: hidden;
	border: 1px solid #bbb;
}

/*
 * The pane content appears within an inner_pane, below the title_bar and tool_bar, and holds the main content of the pane.
 *
 * This uses absolute positioning allowing the height of the window to exactly fit that of the parent inner_pane.
 * The 'top' value is the height of the title_bar and tool_bar area shown above the main content.
 */
div.pane_content {
	position: absolute;
	bottom: 0px;
	top: 52px;
	background-color: #eef;
	width: 100%;
}

/*
 * The toolwin_content appears within an inner_pane, below the tool_bar, and holds the main content of the pane.
 *
 * This uses absolute positioning allowing the height of the window to exactly fit that of the parent inner_pane.
 * The 'top' value is the height of the tool_bar area shown above the main content.
 *
 * The background colour specified here is shown in any part of the window not populated with child content.
 */
div.toolwin_content {
	position: absolute;
	bottom: 0px;
	top: 27px;
	background-color: #aaaab8;
	width: 100%;
}

/*
 * The toolwin_banner optionally appears within an inner_pane, between the tool_bar and the main content of the pane.
 */
div.toolwin_banner {
	background-color: #fff;
	border-bottom: 1px solid #bbb;
	width: 100%;
	overflow: hidden;
	font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
}

/*
 * The banner handle that allows the optional banner to be resized.
 */
div.toolwin_banner_handle {
	background-color: #eef;
	height: 7px;
	cursor: row-resize;
	border-bottom: 1px solid #bbb;
}

/*
 * The toolwin item is a useful style for elements appearing as items within a banner.
 */
div.toolwin_item {
	display: inline-block;
	height: 100%;
	width: 100px;
	border-right: 1px dashed #444;
	text-align: center;
	vertical-align: top;
	white-space: normal;
}

/* Resize handle which sits between the accordion window and the main editor window */
#resize_handle1 {
	position: absolute;
	top: 40px;
	bottom: 40px;
	left: 210px;
	width: 5px;
	height: 90%;
	background-color: #888;
	z-index: 3;
}

/* Change the cursor on the resize handle when the user presses the mouse button */
#resize_handle1:active {
	cursor: col-resize;
}

/*********************************************************************************************
 * Styling for the Title bar.
 *
 * These are designed to be shown at the top of the panes (like a window title bar for each pane).
 */
div.title_bar {
	height: 20px;
	background-color: #eef;
	color: #000;
	font-size: 14px;
	cursor: default;
	padding-top: 5px;
	padding-left: 5px;
	/*border-top-left-radius: 5px;
	border-top-right-radius: 5px;*/
	overflow: hidden;
	white-space: nowrap;
	/* Prevent text from been selected */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/*********************************************************************************************
 * Styling for the Tabbed Window.
 *
 */

/*
  * The tab bar appears at the top of a tabbed window control. It shown a horizontal list of tabs which can be selected by the user.
  * If the list of tabs exceeds the width a scroll bar is shown to allow all tabs to be selected.
  */
div.tab_bar {
	background-color: #eef;
	color: #444;
	font-size: 14px;
	cursor: default;
	white-space: nowrap;
	overflow-y: hidden;
	overflow-x: auto;
}

/* Format the element which represents the tab button */
.tab_button {
	display: inline-block;
	padding: 5px 7px;
	border-right: 1px solid #bbb;
	cursor: pointer;
}

/* Additional formatting for a tab button which is the active button. */
.tab_selected {
	background-color: #fff;
	color: #000;
	border-bottom: none;
}

/* Setup a different BG colour when the user hovers over a tab button */
.tab_button:hover {
	background-color: #fff;
}

/* Setup a different BG colour when the user clicks on a tab button */
.tab_button:active {
	background-color: #bbb;
}

/* Setup the tab close 'x' div */
.tab_close {
	padding: 5px 8px;
	margin-left: 4px;
}

/* Setup a different BG colour when the user hovers over a close button */
.tab_close:hover {
	background-color: #eef;
	color: #f22;
}

/* Setup a different BG colour when the user clicks on a close button */
.tab_close:active {
	background-color: #bbb;
}

/*
 * The tab content appears within an inner_pane, below the tab_bar, and holds the stacked content for each tabbed window.
 *
 * Only one contained <div> is visible at any one time (handled in JS as the tabs are selected).
 *
 * The background colour specified here is shown in any part of the window not populated with child content. Note: this colour would normally match that of div.toolwin_content
 */
div.tab_content {
	position: absolute;
	top: 26px;
	bottom: 0px;
	width: 100%;
	background-color: #aaaab8;
}

/*********************************************************************************************
 *
 * Styling for the Toolbars.
 *
 * A toolbar can contain text, icons or both. i.e. it can be a toolbar or a regular text based menubar.
 *
 */

/*
 * Formatting for the full tool bar itself (contains graphical button like object for menu short-cuts or textual names like in a menubar).
 */
div.tool_bar {
	height: 24px;
	cursor: default;
	padding-top: 1px;
	padding-left: 2px;
	z-index: 4;
	background-color: #FFF;
	border: 1px solid #bbb;
	/* Prevent text from been selected */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	overflow: hidden;
}

/* Format the slot in which each toolbar option is shown. Acts as an outer container */
.tool_bar_slot {
	display: inline;
	padding-left: 2px;
	padding-right: 2px;
	margin-left: 1px;
	margin-right: 1px;
	cursor: pointer;
}

/* Setup a different BG colour when the user hovers over a toolbar option slot */
.tool_bar_slot:hover {
	background-color: #eef;
}

/* Setup a different BG colour when the user clicks over a menu option slot */
.tool_bar_slot:active {
	background-color: #bbb;
}

/* Format the slot in which each toolbar option is shown when disabled. This different style does not have any associated hover or active pseudo styles. */
.tool_bar_slot_dis {
	display: inline;
	padding-left: 2px;
	padding-right: 2px;
	margin-left: 1px;
	margin-right: 1px;
}

/* This formats the image which is shown on the toolbar menu options */
.toolbar_icon {
	cursor: pointer;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	padding: 2px 2px 1px 4px;
	/* Prevent the image being dragged by the user */
	pointer-events: none;
}

/* This formats the image which is shown on the toolbar menu option, when the option is checked */
.toolbar_icon_chk {
	cursor: pointer;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	padding: 1px 1px 0px 3px;
	border: 1px dotted #bbb;
	background-color: #eef;
	/* Prevent the image being dragged by the user */
	pointer-events: none;
}

/* This formats the (optional) image which is shown on the right hand side of a toolbar option icon to show the availability of a sub-menu */
.toolbar_subicon {
	cursor: pointer;
	padding-bottom: 1px;
	padding-right: 2px;
	padding-left: 2px;
	padding-top: 6px;
	width: 12px;
	height: 12px;
	/* Prevent the image being dragged by the user */
	pointer-events: none;
}

/* This formats the (optional) image which is shown on the right hand side of a toolbar option icon to show the checked status of text */
.toolbar_tick {
	cursor: pointer;
	padding-bottom: 3px;
	padding-right: 2px;
	padding-left: 2px;
	padding-top: 6px;
	width: 12px;
	height: 12px;
	/* Prevent the image being dragged by the user */
	pointer-events: none;
}

/* Setup the style of a toolbar separator */
.toolbar_separator {
	background-color: #bbb;
	height: 100%;
	padding-left: 1px;
	margin-left: 4px;
	margin-right: 4px;
	padding-top: 0px;
}

/* This formats the text which is shown on the toolbar menu options (making it a regular text based menu, i.e. when an icon is not used) */
.toolbar_text {
	display: inline-block;
	padding: 4px 2px;
	font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
	cursor: pointer;
	vertical-align: top;
}

/* outline prevents some browser showing selection box around text when in focus */
.toolbar_input {
	outline: none;
	width: 100%;
	border: 1px solid #bbb;
	margin-top: 2px;
}

/*********************************************************************************************
/* Toolbar Variation used by main (top) toolbar */

/* Format the slot in which each toolbar option is shown. Acts as an outer container */
.tool_bar_slot_main {
	display: inline;
	padding: 10px;
	margin-left: 1px;
	margin-right: 1px;
	cursor: pointer;
}

/* Format the slot in which each toolbar option is shown when disabled. This different style does not have any associated hover or active pseudo styles. */
.tool_bar_slot_dis_main {
	display: inline;
	padding: 10px;
	margin-left: 1px;
	margin-right: 1px;
}

/* Setup a different BG colour when the user hovers over a toolbar option slot */
.tool_bar_slot_main:hover {
	background-color: #26a;
}

/* Setup a different BG colour when the user clicks over a menu option slot */
.tool_bar_slot_main:active {
	background-color: #159;
}

/* This formats the image which is shown on the toolbar menu options */
.toolbar_icon_main {
cursor: pointer;
	width: 16px;
	height: 16px;
	margin-top: 0px;
	padding: 2px 0px 1px 3px;
	/* Prevent the image being dragged by the user */
	pointer-events: none;
}

/* This formats the (optional) image which is shown on the right hand side of a toolbar option icon to show the availability of a sub-menu */
.toolbar_subicon_main {
	cursor: pointer;
	padding-bottom: 1px;
	padding-right: 2px;
	padding-left: 4px;
	padding-top: 6px;
	width: 12px;
	height: 12px;
	/* Prevent the image being dragged by the user */
	pointer-events: none;
}

.toolbar_text_main {
	display: inline-block;
	padding: 2px 2px;
	font: normal normal normal 15px Arial, Verdana, Geneva, Helvetica,
		sans-serif;
	cursor: pointer;
	vertical-align: top;
	color: #fff;
}
/*********************************************************************************************
 *
 * Styling for the Context Menu.
 *
 */

/* Setup the general style of a menu option */
.menu_option {
	list-style-type: none;
	padding: 5px 22px 5px 22px;
	font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
	cursor: pointer;
}

/* Format the whole menu slot. This contains text and any images which are provided by an option */
.menu_slot {
	display: block;
}

/* Setup a different BG colour when the user hovers over a menu option slot */
.menu_slot:hover {
	background-color: #ddf;
}

/* Setup a different BG colour when the user clicks over a menu option slot */
.menu_slot:active {
	background-color: #bbb;
}

/* Format the whole menu slot when the option is disabled. This different style does not have any associated hover or active pseudo styles. */
.menu_slot_dis {
	display: block;
}

/* This formats the (optional) image which is shown on the left hand side of menu options */
.menu_icon {
	cursor: pointer;
	padding: 3px 1px;
	float: left;
	width: 16px;
	height: 16px;
	/* Prevent the image being dragged by the user */
	pointer-events: none;
}

/* This formats the (optional) images which are shown on the right hand side of menu options  (e.g.to show the availability of a sub-menu, or a tick symbol) */
.menu_icon_right {
	cursor: pointer;
	padding-top: 5px;
	width: 12px;
	height: 12px;
	position: absolute;
	right: 2px;
	/* Prevent the image being dragged by the user */
	pointer-events: none;
}

/* Setup the style of a horizontal-bar menu separator */
.menu_separator {
	background-color: #bbb;
	height: 1px;
	width: 100%;
	margin-top: 2px;
	margin-bottom: 1px;
}

/* Setup the UL which represents the context menu */
ul.context_menu {
	list-style-type: none;
	padding: 2px;
	margin: 0px;
	z-index: 10;
	position: absolute;
	background-color: #FFF;
	list-style: none;
	border: 1px solid #bbb;
	display: none;
	cursor: pointer;
	box-shadow: 2px 2px 6px #888;
	border-radius: 5px;
	/* Prevent text from been selected */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/*********************************************************************************************
 *
 * Styling for the DatePicker.
 *
 */

/* Setup the DIV which represents the whole picker. Setup so appearance matches pop-up menu's */
div.date_picker {
	padding: 2px;
	margin: 0px;
	z-index: 10;
	position: absolute;
	background-color: #FFF;
	border: 1px solid #bbb;
	display: none;
	cursor: pointer;
	box-shadow: 2px 2px 6px #888;
	border-radius: 5px;
	/* Prevent text from been selected */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	font-size: 14px;
}

/* Collapse the table border so numbers shown in tidy grid */
div.date_picker table {
	border-collapse: collapse;
}

/* each day number centred in padded grid square */
div.date_picker td {
	text-align: center;
	padding: 5px;
	border: 1px dotted #bbb;
}

/* Setup a different BG colour when the user hovers over a day number */
div.date_picker td:hover {
	background-color: #eef;
}

/* Setup a different BG colour when the user clicks on a day number */
div.date_picker td:active {
	background-color: #bbb;
}

/* Div for the header which shows the month and year text */
div.date_header {
	margin: 2px;
	background-color: #cdf;
	text-align: center;
	vertical-align: middle;
	padding: 4px;
	margin-bottom: 5px;
}

/* Add padding for left/right images. */
div.date_header img {
	padding: 3px;
}

/* Setup a different BG colour when the user hovers over an image */
div.date_header img:hover {
	background-color: #eef;
}

/* Setup a different BG colour when the user clicks on an image */
div.date_header img:active {
	background-color: #bbb;
}

/* Style the time-selector listbox (if present). */
div.date_picker select {
	margin-top: 3px;
	/* text-align does not right justify options in web-kit browsers! */
	text-align: right;
	border: none;
}

/*********************************************************************************************
 *
 * Styling for the Slider.
 *
 */

/* Whole slider outer area */
.slider {
	display: table;
	background-color: #fff;
	width: 100%;
	height: 15px;
	border: 1px solid #bbb;
	border-radius: 2px;
}

/* Left inner container which holds the handle */
.slider_left {
	display: table-cell;
	background-color: transparent;
	height: 100%;
	width: 100%;
}

/* Right inner container, which makes left container narrower than outer area by width of the slider */
.slider_right {
	display: table-cell;
	background-color: transparent;
	width: 18px;
	height: 100%;
	float: right;
}

/* The handle itself */
div.slider_handle {
	position: relative;
	background-color: #abf;
	width: 18px;
	height: 13px;
	border: 1px solid #888;
	cursor: pointer;
	border-radius: 2px;
}

div.slider_handle:hover {
	background-color: #cdf;
}

/*********************************************************************************************
 *
 * Styling for the combobox.
 *
 */

/* Styling for inner input container */
.combo_inner {
	overflow: hidden;
	margin-right: 16px;
	border: none;
	vertical-align: middle;
}

/* Styling for select list button */
.combo_button {
	height: 100%;
	float: right;
	border: 1px outset #aaa;
	background-color: #eee;
	padding: 0px 2px;
	font-size: 12px;
	overflow: hidden;

}

/* Setup a different BG colour when the user hovers over button */
.combo_button:hover {
	background-color: buttonhighlight;
}

/* Setup a different BG colour when the user clicks over button */
.combo_button:active {
	background-color: #bbb;
}

/*********************************************************************************************
 *
 * Styling for the spinner.
 *
 */

/* Styling for inner input container */
.spinner_inner {
	overflow: hidden;
	margin-right: 32px;
	border: none;
	vertical-align: middle;
}

/* Styling for buttons container */
.spinner_btns {
	float: right;
	width: 31px;
	font-size: 11px;
}

/* Styling for spinner buttons */
.spinner_button {
	height: 8px;
	border: 1px outset #aaa;
	background-color: #eee;
	text-align: center;
	overflow: hidden;
	padding : 4px 4px;
}

/* Style for span inside buttons (which moves text up slightly so visible in small button). */
.spinner_button span {
	position: relative;
	top: -2px;
}

/* Setup a different BG colour when the user hovers over button */
.spinner_button:hover {
	background-color: buttonhighlight;
}

/* Setup a different BG colour when the user clicks over button */
.spinner_button:active {
	background-color: #bbb;
}
/*********************************************************************************************
 *
 * Styling for the popup windows which are dynamically shown.
 *
 */
.sim_popup {
	z-index: 15;
	position: absolute;
	vertical-align: middle;
	border: 1px solid #bbb;
	margin: 0px;
	outline: none;
	font-size: 11pt;
	/*background-color: rgba(224, 224, 255, 0.7);*/
	background-color: rgba(242, 248, 148, 0.9);
	padding: 3px 5px;
}

.popup {
	z-index: 15;
	position: absolute;
	border: 1px solid #bbb;
	vertical-align: middle;
	margin: 0px;
	outline: none;
	/*background-color: rgba(255, 128, 0, 0.7);*/
	/*background-color: rgba(224, 224, 255, 0.7);*/
	background-color: rgba(242, 248, 148, 0.9);
	padding: 3px 5px;
}

.popup img {
	vertical-align: middle;
	margin-right: 5px;
}

/* Styling for popup's dismiss 'x' */
img.popup_x {
	position: relative;
	top: -2px;
	left: 9px;
	background-color: white;
	float: right;
}

img.popup_x:hover {
	background-color: #bbb;
}

img.popup_x:active {
	background-color: #888;
}

/*********************************************************************************************
 *
 * Styling for the User projects tool (TODO put this in different css file since not generic?).
 *
 */

/* Styling for popup's dismiss 'x' */
img.del_x {
	background-color: white;
}

img.del_x:hover {
	background-color: #bbb;
}

img.del_x:active {
	background-color: #888;
}

/* Styling for popup's dismiss 'x' */
img.user_x {
	float: right;
	margin: 2px;
}

img.user_x:hover {
	background-color: #bbb;
}

img.user_x:active {
	background-color: #888;
}

/* The block that holds all of the user images and names */
div.proj_collab {
	background-color: transparent;
	/* Border causes rendering error in IE */
	border: 1px solid #bbb;
	overflow-y: hidden;
	height: 75px;
	max-height: 78px;
	font-size: 12px;
	width: 100%;
	padding-top: 9px;
	margin: 0px 2px;
	color: #888;
}

/* A block that holds a single user image and name */
div.proj_user {
	display: inline-block;
	border: 1px dotted #bbb;
	text-align: center;
	overflow: hidden;
	white-space: nowrap;
	width: 80px;
	padding: 2px 0px;
	background-color: #fff;
	color: #000;
}

/* the user image */
img.proj_user {
	position: relative;
	/*right: -10px;*/
	top: 2px;
	cursor: pointer;
	height: 40px;
}

/* A block that holds a single owner image */
div.proj_owner {
	display: inline-block;
	border: 1px dashed #bbb;
	text-align: center;
	overflow: hidden;
	white-space: nowrap;
	width: 80px;
	padding: 2px 0px;
	background-color: #fff;
	color: #000;
}

/* the owners image */
img.proj_owner {
	position: relative;
	/*right: -10px;*/
	top: 2px;
	cursor: pointer;
	height: 64px;
}

/* 
Format the project name input and button elements.
*/
#proj_input {
	padding: 0px 2px;
	margin: 9px 2px;
	border: 1px solid #bbb;
	font-size: 12px;
	background: #fff;
	/* make input textbox size easy to specify as width (without usual padding) */
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 95%;
}

/* The create/cancel buttons */
#proj_name button {
	padding: 3px 4px;
	margin: 4px 0px;
	width: 100%;
	display: block;
}

/* THe project decsription */
.proj_descr {
	padding: 2px 2px;
}

/*********************************************************************************************
 *
 * Styling for the Text Input/Area and dropdown list boxes dynamically shown.
 *
 */
.textinput_box {
	z-index: 5;
	position: absolute;
	border: 1px solid #bbb;
	vertical-align: middle;
	margin: 0px;
	outline: none;
	/* make input textbox size easy to specify as width (without usual padding) */
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.textarea_box {
	z-index: 5;
	position: absolute;
	border: 1px solid #bbb;
	margin: 0px;
	outline: none;
	resize: none;
	overflow-y: scroll;
	box-shadow: 2px 2px 6px #888;
	border-radius: 5px;
	/* make input textbox size easy to specify as width (without usual scrollbar padding) */
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.dropdowninput_box {
	z-index: 5;
	position: absolute;
	border: 1px solid #bbb;
	vertical-align: middle;
	margin: 0px;
	outline: none;
	/* make input textbox size easy to specify as width (without usual padding) */
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

/*********************************************************************************************
 *
 * Styling for the Properties Window.
 *
 */

/*
 * General styling for the property tables (header table and main property table)
 */
table.properties_table {
	color: #000;
	border: 1px solid gray;
	border-collapse: collapse;
	font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
	width: 100%;
	/* Allows clipping of data within the cells */
	table-layout: fixed;
}

/*
 * Formatting for property tables header rows
 */
table.properties_table th {
	background: #eef;
	/* border-left: 1px solid #CEF;
	 border-right: 2px solid #9AB;
	 border-top: 1px solid #CEF; */
	border-right: 1px solid black;
	font-weight: normal;
	padding: 1px 2px;
	text-align: left;
	overflow: hidden;
	/* Prevent text from been selected */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Change the cursor on the header of the properties table when the user pressed the mouse button */
table.properties_table:active th {
	cursor: col-resize;
}

/*
 * Formatting for property tables data rows
 */
table.properties_table td {
	color: #000;
	padding: 0px;
	overflow: hidden;
	white-space: nowrap;
	border: 1px solid gray;
}

/* This formats the right hand text labels (which cannot be edited) within the properties table */
table.properties_table td.properties_label {
	padding: 1px 3px;
}

/* Formatting for the lower container (which contains the properties table, but not the property table header) */
div.properties_table {
	position: absolute;
	top: 20px;
	bottom: 0px;
	width: 100%;
	overflow-y: scroll;
}

/* Format any input elements in the table to have no border or margin. This prevents editiable properties from appearing too large in the cells. */
table.properties_table input {
	padding: 1px 3px;
	border: none;
	margin: 0px;
	vertical-align: middle;
}

/* Format any select elements in the table to have no border. This prevents dropdown list type properties from having additional surrounds in the cells. */
table.properties_table select {
	border: none;
	font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
	/* To style a select in Safari you first have to turn off the OS styling: */
	/*-webkit-appearance: none;*/
	/* Setting the BG turns off Aqua styling in Safari, allows font size to work. */
	background: #fff;
}

/* This formats the text inputs within the properties table */
.properties_text {
	width: 100%;
	font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
	background-color: #fff;
}

/* This formats the colour picker inputs within the properties table */
.properties_colpicker {
	width: 100%;
	font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
}

/* This formats the image which is used to expand or contract category based property groups */
.properties_expand {
	cursor: pointer;
	padding-top: 0px;
	padding-right: 2px;
	float: left;
	width: 12px;
	height: 12px;
}

/*********************************************************************************************
 *
 * Styling for the Palette search box.
 *
 */

/*
 * Formats the div which contains the input textbox in the filter/search bar.
 *
 * This leaves enough room at the left and right of the input box for the options and right-side button images.
 * But will always fill the rest of the window when it is resized.
 */
.search_box_slot {
	position: absolute;
	left: 32px;
	right: 31px;
	top: 2px;
	padding-right: 4px;
}

/*********************************************************************************************
 *
 * Styling for the Accordion Window (displays multiple accordion panes hidden by selectable slider bars)
 *
 */
.accordion_window {
	position: absolute;
	top: 0px;
	bottom: 0px;
	color: #000;
	cursor: default;
	overflow: hidden;
	width: 100%;
}

/*
 The selector tab shown for each accordion pane.
 */
.accordion_tab {
	font-size: 13px;
	position: absolute;
	width: 100%;
	padding: 5px 8px;
	border: 1px solid #bbb;
	cursor: pointer;
	background-color: #eef;
	/* Prevent tab text wrapping onto next line */
	white-space: nowrap;
}

/* Setup a different BG colour when the user hovers over a tab button */
.accordion_tab:hover {
	background-color: #fff;
}

/* Setup a different BG colour when the user clicks on a tab button */
.accordion_tab:active {
	background-color: #bbb;
}

/* Additional formatting for a tab button which is the active button. 
.accordion_tab_sel{
	background-color: #fff;
	border-bottom: none;
}
*/

/* A single content pane showed when its tab is selected */
.accordion_pane {
	position: absolute;
	background-color: #fff;
	width: 100%;
	border: 1px solid #bbb;
}

/*********************************************************************************************
 *
 * Styling for the Palette window. Each palette window contains items which can be dragged onto views by the user.
 *
 */
div.palette_pane {
	overflow-y: scroll;
	overflow-x: hidden;
	width: 100%;
	height: 100%;
}

.palette_pane table {
	width: 100%;
	background-color: #fff;
	font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
	/* Prevent text from been selected */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: default;
}

.palette_pane td {
	text-align: center;
	border-bottom: 1px dashed #bbb;
	padding-top: 5px;
}

.palette_pane img {
	cursor: pointer;
	height: 48px;
}

.palette_next img {
	cursor: pointer;
	height: 32px;
}

/*********************************************************************************************
 *
 * Styling for the A Post-It note type div (used on PM tool).
 *
 */

/* Container for the list view, fills the entire editor window */
div.postit_note {
	text-align: left;
	width: 120px;
	word-wrap: break-word;
	min-height: 50px;
	height: auto;
	display: inline-block;
	margin: 4px;
	padding: 1px;
	background-color: #FDF;
	font-family: "Comic Sans MS", cursive, sans-serif;
	font-size: 13px;
	overflow-x: hidden;
}

/* Style for the text within a post-it. This is only used when a post-it is being dragged. When a postit is within a tabularview it inherits its style from that class */
.postit_note_text {
	resize: none;
	font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
	width: 100%;
	height: 60px;
}

/* Style for the text within a post-it, when shown as read-only div */
.postit_note_rd_only {
	font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
	height: 60px;
	background-color: #FFF;
	white-space: pre-wrap;
	padding: 2px;
	overflow-y: auto;
}

/*********************************************************************************************
 *
 * Styling for the TabView.
 *
 */

/* Container for the list view, fills the entire editor window */
div.tabview_container {
	position: absolute;
	background-color: #fff;
	width: 100%;
	height: 100%;
}

/*********************************************************************************************
 *
 * Styling for a general editor view container.
 *
 */

/* Container for a view, fills the entire editor window */
div.view_container {
	position: absolute;
	background-color: #fff;
	width: 100%;
	height: 100%;
}

/*********************************************************************************************
 *
 * Styling for the ListView.
 *
 */

/* Container for the list view, fills the entire editor window */
div.listview_container {
	position: absolute;
	background-color: #eef;
	width: 100%;
	height: 100%;
}

table.listview {
	width: 100%;
	background-color: #fff;
}

.listview td {
	border-bottom: 1px dashed #bbb;
	padding: 10px;
	font: normal normal 14px Verdana, Geneva, Arial, Helvetica, sans-serif;
	vertical-align: top;
}

/* Setup a different BG colour for selected rows */
tr.listview_sel {
	/*background-color: #BFE1F5;
	background-color: #F2FCFF;*/
	background-color: #FFe080;
	box-shadow: 10px 10px 5px #888888;
}

tr.listview_notsel {
	background-color: #fff;
}

/*********************************************************************************************
 *
 * Styling for the TextView.
 *
 */

/* Container for the text view, fills the entire editor window */
div.textview_container {
	position: absolute;
	background-color: #eef;
	height: 100%;
	right: 3px;
	left: 0px;
	/* set to 30px to provide room for markers/line number gutter */
}

.textview_box {
	z-index: 5;
	position: absolute;
	border: 1px solid #bbb;
	margin: 0px;
	outline: none;
	resize: none;
	overflow-y: scroll;
	overflow-x: auto;
	width: 100%;
	height: 100%;
	/* these two attributes prevent wrapping of text */
	white-space: pre;
	word-wrap: normal;
}

/*********************************************************************************************
 *
 * Styling for the HTMLView.
 *
 */
.web_frame {
	width: 100%;
	height: 100%;
	border: 1px solid #bbb;
}

/* External window label - shown at top-right of tab margin */
.web_ext {
	position: absolute;
	top: -25px;
	right: 2px;
	font-size: 12px;
	height: 24px;
}

/*********************************************************************************************
 *
 * Styling for the ChatView window.
 *
 */

/* upper box containing the console output window */
.chatupper {
	position: absolute;
	width: 100%;
	top: 0px;
	bottom: 30px;
	border: 1px solid #bbb;
}

/* lower box containing text input uses absolute so all space taken except the send button */
.chatlower {
	position: absolute;
	left: 0px;
	right: 70px;
	bottom: 2px;
}

.chatinput {
	width: 100%;
	background-color: #ffe080;
}

/* Clear button - shown at top-right of tab margin */
.chatclear {
	position: absolute;
	top: -25px;
	right: 2px;
	font-size: 12px;
	height: 24px;
	width: 60px;
}

/* Send button - shown at bottom-right of chat window */
.chatsend {
	position: absolute;
	bottom: 2px;
	right: 2px;
	font-size: 12px;
	height: 24px;
	width: 60px;
}

.chat_text {
	color: #000;
	font: normal normal 14px Verdana, Geneva, Arial, Helvetica, sans-serif;
}

/*********************************************************************************************
 *
 * Styling for the ConsoleView window.
 *
 */
.consoleview {
	display: inline-block;
	width: 100%;
	height: 100%;
	background-color: #fff;
	font: normal normal 12px Courier;
	overflow-y: scroll;

	/* Uncomment below if messages are not to be wrapped
	overflow-x: auto;
	white-space: nowrap;
	*/
}

.consoleview div {
	/* (re)enable selecting of the text inside the console divs */
	-webkit-user-select: text;
	-khtml-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
}

.console_warn {
	color: #f88;
	font: normal normal 12px Courier;
}

.console_error {
	color: #f22;
	font: normal normal 12px Courier;
}

.console_text {
	color: #000;
	font: normal normal 12px Courier;
}

/*********************************************************************************************
 *
 * Styling for the TableView window.
 *
 */

/* Formatting for the table container (which contains the main table content) */
div.tableview {
	position: absolute;
	top: 0px;
	bottom: 0px;
	width: 100%;
	overflow-y: scroll;
	border: 1px solid #bbb;
}

/* Formatting for the table content itself.*/
table.tableview {
	width: 100%;
	background-color: #fff;
	color: #000;
	border-bottom: 1px solid gray;
	font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
	/* Allows clipping of data within the cells */
	/* table-layout: fixed; */
	border-collapse: collapse;
	vertical-align: middle;
}

/*
 * Formatting for tables rows
 */
table.tableview tr {
	height: 24px;
}

table.tableview tr:HOVER {
	background-color: #fc9;
}

/* Stripe the table rows */
table.tableview tr:nth-child(odd) {
	background-color: #f7f7ff;
}

table.tableview tr:nth-child(odd):HOVER {
	background-color: #fc9;
}

/*
 * Formatting for table data
 */
table.tableview td {
	color: #000;
	padding: 3px 10px;
	border-bottom: 1px solid #eef;
	/* Allow wrapping, uncomment below to introduce scroll bar */
	/*white-space: nowrap; */
}

/*
 * Formatting for table images
 */
table.tableview img:FIRST-CHILD {
	vertical-align: middle;
	padding-right: 10px;
}

/*
.tableview div {
	 (re)enable selecting of the text inside the table divs
	-webkit-user-select: text;
	-khtml-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
}
*/

/*********************************************************************************************
 *
 * Styling for the TabularView window.
 *
 */

/*
 * General styling for the outer container of the tabular view (only when printing)
 */
div.tabularview_pr {
	position: absolute;
	left: 20px;
	right: 20px;
	top: 28px;
	height: 100%;
}

/*
 * General styling for the tabular view (header table and main content table)
 *
 * The background colour defined here specifies the colour of the even rows within the table.
 */
table.tabularview {
	color: #000;
	background-color: #fff;
	border-collapse: collapse;
	font: normal normal 11px Arial, Verdana, Geneva, Helvetica, sans-serif;
	width: 100%;
	/* Allows clipping of data within the cells */
	table-layout: fixed;
}

/*
 * Formatting for property tabular view header rows
 */
table.tabularview th {
	/* background: #abf; */
	/* background: #4ea6ea; */
	background: #f0f0ff;
	border: 1px solid #ddf;
	border-bottom-color: #bbb;
	font-weight: normal;
	font-size: 13px;
	padding: 6px 2px 5px 2px;
	text-align: left;
	overflow: hidden;
	white-space: nowrap;
	/* Prevent text from been selected */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

table.tabularview th:HOVER {
	/*background: #26a;*/
	background: #cdf;
}

/**
Images within the table headers
*/
table.tabularview th img {
	/* prevent image being dragged */
	pointer-events: none;
	padding: 0px 5px;
}

/*
 * Formatting for tabular view data rows
 */
table.tabularview td {
	color: #000;
	padding: 7px 2px;
	overflow: hidden;
	white-space: nowrap;
	border: 1px solid #ddf;
}

/* Stripe the table rows */
table.tabularview tr:nth-child(odd) {
	/*background-color: #f0f0ff;*/
	background-color: #f8f8f8;
}

/* Formatting for the lower container (which contains the content table, but not the table header) */
div.tabularview {
	position: absolute;
	top: 27px;
	bottom: 0px;
	width: 100%;
	overflow-y: scroll;
	/* prevent x-scroll so content table does not show scroll-bar when column sizes moved off right edge */
	overflow-x: hidden;
}

/* Prevent some browser showing selection box around whole table when in focus */
table.tabularview:focus {
	outline: none;
}

/* Format any input elements in the table to have no border or margin. This prevents editiable elements from appearing too large in the cells. 
   Also set the font to match the table , the width so it fills the table and the background to be transparent (so row striping visible).
*/
table.tabularview input {
	padding: 0px 2px;
	border: none;
	margin: 0px;
	vertical-align: middle;
	font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
	width: 100%;
	background: transparent;
}

/* Prevent some browser showing selection box around text when in focus */
table.tabularview input:focus {
	outline: none;
}

/* Format any text area elements in the table to have no border or margin. This prevents editiable elements from appearing too large in the cells. 
   Also set the font to match the table , the width so it fills the table and the background to be transparent (so row striping visible).
   NOTE: height has no effect since parent TD has no explicit height set. Textarea element should have its rows style set to reflect required height.
*/
table.tabularview textarea {
	padding: 2px 2px;
	/*outline: none;
	border: none; */
	resize: none;
	/*background: transparent;*/
	width: 100%;
	/* make input textbox size easy to specify as width (without usual padding) */
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
}

/* Read-only Label type property values placed in tabular view.*/
table.tabularview span.tabviewlabel {
	padding: 0px 2px;
	color: #777;
}

/* Format any select elements in the table to have no border. This prevents dropdown list type elements from having additional surrounds in the cells. */
table.tabularview select {
	border: none;
	font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
	/* To style a select in Safari you first have to turn off the os styling: */
	/*-webkit-appearance: none;*/
	/* Setting the BG turns off Aqua styling in Safari, allows font size to work. */
	background: transparent;
	width: 100%;
}

/* Format for the text shown when the table is empty. */
.tabularview_msg {
	margin: 20px;
	color: #147;
}

/*********************************************************************************************
 *
 * Styling for the Modal Dialog boxes.
 *
 */

/* The dialog box container, covers whole screen with alpha value to darken the background */
.dialog_container {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0, 0, 0, .6);
	z-index: 100;
	/* makes contained div with display style of inline-block be center aligned */
	text-align: center;
}

/* The dialog window itself. Made to appear when a dialog box is required */
.dialog_box {
	width: 300px;
	background: #eef;
	margin: auto;
	margin-top: 10%;
	border: 1px solid #fff;
	padding: 15px;
}

.dialog_title {
	text-align: left;
	width: 73%;
	margin: auto;
	margin-top: 5px;
	padding-bottom: 10px;
	font-size: 18px;
}

.dialog_text {
	text-align: center;
	width: 80%;
	margin: auto;
	padding-bottom: 10px;
	font-size: 15px;
}

.dialog_positive {
	background: #fff;
	padding: 5px 5px;
	border-radius: 5px;
	display: block;
	width: 130px;
	margin: 10px auto 0px auto;
}

.dialog_btn {
	background: #fff;
	padding: 3px 5px;
	border-radius: 5px;
	width: 80px;
	margin: 10px auto 0px auto;
}

.dialog_box input {
	padding: 5px;
	margin-top: 3px;
	margin-bottom: 10px;
	outline: none;
	border: 1px solid #bbb;
	width: 70%;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.dialog_box input:focus {
	box-shadow: 0 0 4px 0px #147;
}

/* The text editor window itself. Made to appear when a text editor box is required */
.editor_box {
	width: 50%;
	background: #eef;
	margin: auto;
	margin-top: 10%;
	border: 1px solid #fff;
	padding: 5px;
	text-align: right;
}

.editor_title {
	text-align: left;
	width: 100%;
	margin: auto;
	padding-left: 2px;
	padding-bottom: 5px;
	font-size: 14px;
}

.editor_textarea {
	height: 300px;
	width: 100%;
	outline: none;
	resize: none;
	overflow-y: scroll;
	/* make input textbox size easy to specify as width (without usual scrollbar padding) */
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font: 12px monospace;
	padding: 2px 2px;
}

/* The login dialog window itself. Made to appear when a login dialog box is required */
#login_box {
	font: normal normal 14px Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-align: left;
	width: auto;
	background: #eef;
	margin: auto;
	margin-top: 10%;
	border: 1px solid #fff;
	padding: 0px 15px 10px 15px;
	/* this display makes the div base its width on its contents */
	display: inline-block;
}

#login_box input {
	padding: 5px;
	margin-top: 3px;
	margin-bottom: 10px;
	outline: none;
	border: 1px solid #bbb;
	width: 100%;
	/* make input textbox size the same as the submit button */
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

#login_box input:focus {
	box-shadow: 0 0 4px 0px #147;
}

/*********************************************************************************************
 *
 * Styling for the Profile input boxes.
 *
 */

/* The profile box container, covers whole screen with alpha value to darken the background */
.profile_container {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0, 0, 0, .6);
	z-index: 99;
	/* makes contained div with display style of inline-block be center aligned */
	text-align: center;
}

/* The profile window itself. Made to appear when a profile window is required */
.profile_box {
	/* this display makes the div base its width on its contents */
	display: inline-block;
	width: auto;
	min-width: 300px;
	background: #eef;
	margin: auto;
	margin-top: 10%;
	border: 1px solid #bbb;
	padding: 10px 15px;
	background: white;
	font-size: 15px;
	text-align: left;
}

.profile_box input[type=text] {
	padding: 5px;
	margin-top: 3px;
	margin-bottom: 10px;
	outline: none;
	border: 1px solid #bbb;
	font-size: 14px;
	width: 100%;
	/* make input textbox size the same as the submit button */
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.profile_box select {
	padding: 5px;
	margin-top: 3px;
	margin-bottom: 10px;
	outline: none;
	border: 1px solid #bbb;
	font-size: 14px;
	width: 100%;
	/* make select size the same as the submit button */
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	background-color: #f6faac
}

.profile_btn {
	padding: 4px;
	margin: 4px 0;
	width: 100%;
	border: 1px solid;
}

#profile_title {
	font-size: 18px;
}

.profile_err {
	font-size: 12px;
	color: #f22;
	visibility: hidden;
}

#profile_img {
	float: left;
	padding-right: 10px;
	width: 64px;
	cursor: pointer;
}

#profile_rm_img {
	position: relative;
	font-size: 12px;
	left: 10px;
	top: -2px;
	color: #888;
	clear: both;
	cursor: pointer;
}

/*********************************************************************************************
 *
 * Styling for the drag and drop image container.
 *
 */

/* An image container, contains images which can be dragged */
#drag_container {
	position: absolute;
	z-index: 100;
}

#drag_img_n {
	display: none;
}

#drag_img_y {
	display: none;
}