/*
	
	This file contains all styling outside the canvas. 
	For example the positioning of the head, footer, right column, left column and the main editor area.
	
	
	
	Designing tips
	--------------
	The coding area should be the "happy place" (most colorful and most contrast)
	
	Press F6 to reload CSS while working on the editior
	
	Do Not use platform/theme default colors! (eg. color: Menu) Or we'll end up with white text on white background (OS X) 
	
*/



/* 
	To be on the safe side. All element, unless specified, should have no border boxing ...
	Do it here so that we do not have to specify it on everything.
*/
* {
	padding: 0px;
	margin: 0px;
	border: 0;
	/*-webkit-font-smoothing: none;*/
	/*border: 1px solid pink!important;*/
	
	/*
	-webkit-font-smoothing: none;
	-webkit-font-smoothing: antialiased;
	-webkit-font-smoothing: subpixel-antialiased;
	// -webkit-text-stroke: 0.015em;
	text-rendering: auto;
	text-rendering: optimizeSpeed;
	text-rendering: optimizeLegibility;
	text-rendering: geometricPrecision;
	*/
	
}

html {
	height: 100%; /* We need height 100% here for height 100% to work in child elements */
	
	/* Try to prevent click delay on mobile browsers */
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	}

body {
	margin: 0px;
	background-color: #edeff3; /* same color as canvas artifact. Only visible if something is not 100% height */
	height: 100%; /* We need height 100% here for height 100% to work in child elements */
	font-family: Arial, Helvetica, sans-serif;
	-webkit-transform: scale(1.00); /* Prevents the browser from "accidently" zooming out when switching orientation */
}


/* prevent menu from making the page higher - screwing up layout 
	#canvasContextmenu {
	overflow: scroll;
}
*/


.spinner {
	display: inline-block;
	position: relative;
	margin: auto;
	width: 64px;
	height: 64px;
}
.spinner:after {
	content: " ";
	display: block;
	border-radius: 50%;
	width: 0;
	height: 0;
	margin: 6px;
	box-sizing: border-box;
	border: 26px solid #fff;
	border-color: #5188f3 transparent #32155c transparent;
	animation: spinner 1.2s infinite;
}
@keyframes spinner {
	0% {
		transform: rotate(0);
		animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
	}
	50% {
		transform: rotate(900deg);
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	100% {
		transform: rotate(1800deg);
	}
}


/* ############### DASHBOARD ############# */

.dashboard {
	display: none;
	
	font-family: Arial, Helvetica, sans-serif;
	
	/*background-color: rgba(215,215,215, .6);*/
	text-shadow: none;
	
	overflow-y: scroll;
}

.dashboard span {
	text-shadow: none;
	font-family: Arial, Helvetica, sans-serif;
}

.dashboardWidget {
	background: #ffffff;
	border: 1px solid #e7e7e7;
	margin: 10px;
	padding: 10px;
	color: #868686;
	
	text-shadow: none;
	}

.dashboardWidget .value {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	font-weight: 600;
	}

.dashboardWidget .description {
	text-transform: uppercase;
	font-size: 0.75em;
}

.dashboardWidget hr {
	border-bottom: 1px solid #e6e6e6;
	}

.dashboardWidget .big {
	margin-top: 0.2em;
	font-size: 6.5em;
	text-shadow: -1px 0 #585858, 0 1px #585858, 1px 0 #585858, 0 -1px #585858;
}

.dashboardWidget div.previous {
	font-size: 1.5em;
	}


.dashboardWidget .posetive {
	color: #709933;
}

.dashboard .pageViewStat {
	font-size: 1em;
}


.dashboardWidget.newfile {
	padding-top: 0;
	padding-bottom: 0;
}

.dashboardWidget.newfile span {
	margin-right: 1em;
	vertical-align: middle;
	}

.dashboardWidget button {
	margin: 0;
	padding: 0.5em;
	height: 2.5em;
	min-width: 9em;
	text-transform: uppercase;
	font-size: 0.8em;
	color: #666666;
	background-color: #ffffff;
	border: 1px ridge #f6f6f6;
	margin: 5px;
	
	vertical-align: middle;
	
	cursor: pointer;
	}
.dashboardWidget button:hover {
	background-color: #f6f6f6;
}

.dashboardWidget button img {
	vertical-align: middle;
	margin-right: 4px;
	}


.dashboardWidget .strong {
	color: #323232;
}

.dashboardWidget .weak {
	color: #a6a6a6;
}

.dashboardWidget .time {
	font-size: 5em;
}

.dashboardWidget .ampm {
	font-size: 2em;
	text-transform: uppercase;
}

.dashboardWidget .weekDay {
	font-size: 1.5em;
}

.dashboardWidget .formattedDate {
	font-size: 2em;
	font-weight: bold;
}

.dashboardWidget hr.space {
	margin-top: 0.7em;
	margin-bottom: 0.7em;
}

.dashboardWidget.smallGraph {
	position: relative;
	width: 242px;
	max-width: calc(50% - 42px);
	float: left;
}

.dashboardWidget.smallGraph .graph {
	position: relative;
	height: 100px;
}

.dashboardWidget.smallGraph .graph .itemwrap {
	position: relative;
	
	height: 100px;
	
	width: 20px;
	display: inline-block;
	margin-right: 4px;
}

.dashboardWidget.smallGraph .graph .item {
	position: absolute;
	bottom: 0px;
	
	width: 20px;
	background-color: #858585;
	
	display: inline-block;
	/*transition: height 1s*/;
	/* transition uses an extra 5% cpu time! */
}

.dashboardWidget.smallGraph .graph .item0 {
	background-color: #f2f2f2;
}
.dashboardWidget.smallGraph .graph .item1 {
	background-color: #efefef;
}
.dashboardWidget.smallGraph .graph .item2 {
	background-color: #ededed;
}
.dashboardWidget.smallGraph .graph .item3 {
	background-color: #e8e8e8;
}
.dashboardWidget.smallGraph .graph .item4 {
	background-color: #e7e7e7;
}
.dashboardWidget.smallGraph .graph .item5 {
	background-color: #f2f2f2;
}
.dashboardWidget.smallGraph .graph .item6 {
	background-color: #d9d9d9;
}
.dashboardWidget.smallGraph .graph .item7 {
	background-color: #d2d2d2;
}
.dashboardWidget.smallGraph .graph .item8 {
	background-color: #b8b8b8;
}

.dashboardWidget.smallGraph .current {
	position: absolute;
	top: 35px;
	left: 0px;
	z-index: 6;
	font-size: 2em;
	text-align: right;
	border: 0px solid green;
	width: 100px;
}

.dashboardWidget.smallGraph .currentsmall {
	position: absolute;
	top: 70px;
	font-size: 1em;
	z-index: 6;
}



.clear {
	clear: both;
}

.removed {
	display: none;
}

/* ############################ */


canvas {
	text-rendering: optimizeLegibility;
	font-kerning : normal;
	z-index: 2; /* Try not to cover the canvas as it might impact performance */
}

.wireframe {
	user-select: none;
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none;   /* Chrome/Safari/Opera */
}


/* Only the file canvas should have the fileCanvas class! */
.fileCanvas { /* CAN NOT HAVE BORDER, PADDING or MARGIN */
	display: none;
	cursor: text;
}

.columns {
	/*border: 1px solid red; */
	background: linear-gradient(to right, #edf0f3, #e8e8e8, #e8e9e9);
}

.leftColumn {
	/* Can not have height. With is set by JavaScript in editor.js editor.resize() */
	float: left;
	vertical-align: top;
	padding: 0px;
	margin: 0px;
	border: 0px solid blue;
}

.centerColumn { /* CAN NOT HAVE BORDER, PADDING or MARGIN */
	overflow:hidden;
	vertical-align: top;
	float: left;
	overflow: auto!important;
}

.rightColumn {
	/* Can not have height. With is set by JavaScript in editor.js editor.resize() */
	float: right;
	border: 0px solid red;
	vertical-align: top;
}


.header {
	/* Needs to have height!? */
	
	background: linear-gradient(to right, #edf0f3, #e8e8e8, #e8e9e9);
	
	}

.footer {
	/* Needs to have height! */
	clear: both;
	background: linear-gradient(#595959, #555555);
	box-shadow: inset 0px 4px 10px #888888;
	
}
/* 
	:empty doesn't kick in with child elements that has display: none
	so we need to put the border on the child element 
	to prevent it from showing when all childs are not displayed.
*/
.footer > div {
	border-top: 2px solid #767676;
	padding-top: 4px;
	padding-bottom: 4px;
	padding-left: 4px;
	padding-right: 4px;
	margin: 0;
}

/* Add the wrap class to widgets living in the left or right column! */
.wrap {
	overflow: auto!important;
	overflow-y: scroll!important; /* So that you never need the x-scroll */
	white-space: nowrap;
}

/* ###### Standard settings ####### (Place high so they can be over-written by custom styling)*/

fieldset {
	border: 2px groove #747474;
	display: inline-block;
	font-size: 13px;
	font-weight: bold;
	line-height: 13px;
	padding-top: 0px;
	padding-bottom: 5px;
	margin-bottom: 8px;
	margin-top: 0px;
	text-align: center;
	vertical-align: middle;
	background: rgba(200, 200, 200, 0.1);
}

span.nobreak {
	
}

.footer table {
	margin: 0px;
	padding: 0px;
	border-spacing: 0px;
	border-collapse: separate;
	/*margin-bottom: -2px;  adjust so the top/bottom margin will be the same like wihout a table */
	/*margin-top: -2px; */
	
}

.footer td {
	padding: 2px;
	margin: 0px;
}


.footer table.data {
	color: white;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 13px;
	width: 100%;
}

div.tableHolder {
	background-color: #f6f6f6;
	margin-top: 2px;
}

.footer table.data tr {
	background-color: #f6f6f6;
	color: black;
	border-bottom: 1px solid #bcbcbc;
}

.footer table.data tr:nth-child(even) {background: #f6f6f6;}
.footer table.data tr:nth-child(odd) {background: #ffffff;}

.footer table.data tr.selected {
	background-color: #b6d1fd;
}

.footer table.data th {
	font-weight: bold;
	text-align: left;
	border-bottom: 1px solid #bcbcbc;
	color: #f6f6f3;
	background-color: #414141;
	background: linear-gradient(#545657, #434343, #454545);
	text-shadow: 0px -1px 0px #1f2020;
	padding: 2px;
	padding-top: 6px;
	padding-bottom: 6px;
}

.footer table.data td {
	padding-top: 3px;
	padding-bottom: 3px;
	border-bottom: 1px solid #cccccc;
	}

.footer table.data td.text {
	line-height: 28px;
	max-width: 500px;
}



.footer table.data select {
	background-color: transparent;
	min-width: 100%;
	max-width: 150px;
	}

.footer table.data span {
color: black;
	text-shadow: none;
}

.footer p {
	margin: 4px;
}

ul, li {
	margin: 0px;
	list-style-type: none;
}

ul {
	margin-top: 2px;
}

li ul {
	margin-left: 1em;
}

.footer label, .footer span, .footer p, .footer legend {
	color: #f6f6f3;
	text-shadow: 0px -1px 0px #1f2020;
	font-weight: normal;
	font-family: caption;
	}

label {
	break-after: avoid;
}

a.signup {
	padding: 3px;
	border-radius: 3px;
	border: 1px solid blue;
	color: blue;
	background-color: white;
	text-shadow: none;
	font-weight: normal;
	text-decoration: underline;
margin-left: 1em;
}

input[type=text], input[type=password], select.select {
	border-radius: 2px;
	border: 1px inset #4a4a4a;
	font-size: 16px;
	background-color: #e6e6e6;
	box-shadow: 0px 1px 1px #b3b3b3, inset 0px 1px 1px #333333;
	padding: 3px;
	margin: 4px;
	}


input[type=checkbox] {
	text-align: absmiddle;
	vertical-align: middle;
	margin: 3px;
	width: 16px;
	height: 16px;
}

.button.active {
	font-weight: bold;
	}


input[type=button], button.button, input[type=submit] {
	border-radius: 3px;
	border: 1px solid rgba(19, 19, 19, 0.5);
	box-shadow: 0px 2px 5px #505050, inset 0px 1px 1px #888888;
	color: #f6f6f3;
	min-width: 120px;
	background-color: #414141;
	background: linear-gradient(#545657, #434343, #454545);
	cursor: default;
	text-shadow: 0px -1px 0px #1f2020;
	padding: 4px;
	margin: 4px;
	font-size: 13px;
	vertical-align: middle;
}

input[type=button].half, input[type=submit].half, button.half {
	min-width: 55px;
}

input[type=button]:active, button.button:active, input[type=submit]:active {
	/* when clicking on a button */
	margin-top: 4px;
	border-bottom: 0;
}

input[type=button]:disabled, button.button:disabled, input[type=submit]:disabled {
	/* when a button is disabled*/
	background: #414141;
	box-shadow: 0px 2px 5px #505050, inset 0px 1px 3px #888888;
	border: none;
	text-decoration: line-through;
}


input[type=button]:hover, button.button:hover, input[type=submit]:hover {
	/* when hovering over a button */
	box-shadow: 0px 2px 5px #505050, inset 0px 1px 3px #888888;
	}

/* For showing key-combo shortcut for the button functionality */
button .key {
	color: #919191;
	font-size: 9px;
	text-shadow: none;
	vertical-align: middle;
	margin-left: 4px;
	font-family: inherit;
	display: block;
	margin-top: 2px;
	}
button .key:hover {
	color: white;
	}


.highlighted {
	background-color: orange!important;
	background: linear-gradient(#ffbf00, #a67b00, #bf9a30)!important;
	border: 1px solid #ffbf00!important;
	box-shadow: 0px 2px 5px #3d3324, inset 0px 1px 1px #f0ce5b!important;
}

input[type=text].error {
	background-color: #f88a99;
}

td input[type=text] {
	max-width: calc(100% - 16px);
}



.mercurialAnnotationWidget {
	background-color: rgba(255,255,255, 0.9);
	color: black;
	border: 1px solid #555555;
	padding: 3px;
	margin-top: 2px;
	margin-bottom: 2px;
	}


/* ############### File Tabs ############## */

ul#tabList {
	z-index: 1;
	margin: 0;
	padding: 0;
	padding-left: 3px;
	
	white-space:nowrap; /* Prevent tabs fallingn down*/
	display: flex;
	align-items: stretch; /* Default */
}

ul#tabList li.tabFolderItem {
	z-index: 1;
	border-radius: 10px 10px 0px 0px;
	
	border-top: 1px solid #d6d6d6;
	border-bottom: 1px solid #d6d6d6;
	
	/*-webkit-transform: perspective(100px) rotateX(30deg); */
	
	
	
	font-size: 10px;
	text-align: center;
	line-height: 1px;
	
	margin-top: 3px;
	margin-bottom: 0px;
	margin-left: 2px;
	
	padding-top: 3px;
	padding-bottom: 0px;
	padding-left: 0px;
	
	color: #585565;
	display: inline-block;
	list-style-type : none;
	line-height: 6px;
	box-shadow: 0px 1px 2px #dcdae3, inset 0px 1px 1px #ecebf0;
	background: linear-gradient(#f2f2f2, #f6f6f6);
	cursor: default;
	
}

ul#tabList li.tabFolderItem.active {
	color: #000000;
	border-bottom: 1px solid #ffffff; /* same color as canvas */
	background: linear-gradient(#d7dde6 10%, #f6f6f6 60%, #ffffff);
	z-index: 2;
	}

ul#tabList ul.folderFileList {
	
	max-height: 27px;
	
	overflow: visible;
	
	display: flex;
	}

/* Able to click all the way up */
ul#tabList .single ul.folderFileList li.tabFileItem {
	line-height: 50px;
	margin-top: -10px;
}


ul#tabList li ul {
	margin: 0;
	padding: 0;
}


/* ### File Item */
ul#tabList li.tabFileItem {
	display: inline-block;
	list-style-type : none;
	
	
	border-top-right-radius: 25px 170px;
	border-top-left-radius: 20px 90px;
	
	margin-top: 4px;
	margin-right: -15px;
	margin-bottom: 0px;
	margin-left: -7px;
	
	padding-top: 4px;
	padding-right: 30px;
	padding-bottom: 5px;
	padding-left: 30px;
	
	font-size: 12px;
	cursor: pointer;
	
	background: linear-gradient(#f2f2f2, #ffffff);
	box-shadow: 0 10px 20px rgba(0,0,0,.5);
	
	height: 170px; /* sets the curve */
	position : relative;
	line-height: 14px;
	max-width : 200px;
	
	-webkit-tap-highlight-color: transparent; /* disable annoying blue box on mobiles */
}

ul#tabList li.tabFileItem.active {
	z-index: 3;
	background: #ffffff;
	
}

/* Chrome like tabs: http://codepen.io/jcblw/pen/DxAJF */
ul#tabList > li.tabFileItem:before, ul#tabList > li.tabFileItem:after {
	content : '';
	background : transparent;
	height: 20px;
	width: 20px;
	border-radius: 100%;
	border-width: 10px;
	top: 0px;
	border-style : solid;
	position : absolute;
	}
ul#tabList li.tabFileItem:before {
	border-color : transparent #ddd transparent transparent;
	-webkit-transform : rotate(48deg);
	left: -23px;
	}
ul#tabList li.tabFileItem:after {
	border-color : transparent transparent transparent #ddd;
	-webkit-transform : rotate(-48deg);
	right: -17px;
}
ul#tabList > li.tabFileItem.active:before {
border-color : transparent #efefef transparent transparent;
}

ul.tabs > li.tabFileItem.active:after {
border-color : transparent transparent transparent #efefef;
}


ul#tabList li.tabFileItem a {
	border-bottom: 2px solid transparent;
	}

ul#tabList li.tabFileItem.active a {
	padding-bottom: 1px;
	border-bottom: 1px solid orange;
}

/* Folder item with only one file in it */
ul#tabList li.tabFolderItem.single {
	/* Hide the folder text */
	font-size: 0px;
	line-height: 0px;
	
	/* Complement for the lost height */
	padding-top: 3px;
	box-shadow: none;
}
/* Single file in folder list */
ul#tabList li.tabFolderItem.single li.tabFileItem {
	border: 0;
	box-shadow: none;
	background: none;
	}
ul#tabList li.tabFolderItem.single li.tabFileItem.active {
	border: 0;
	}


/* ### Close tab button */
ul#tabList button.closeFileTab {
	color: #85919e;
	
	display: none;
	font-size: 16px;
	line-hieght: 10px;
	font-weight: bold;
	vertical-align: text-top;
	margin-left: -15px;
	margin-right: 3px;
	border-radius: 2px;
	width: 12px;
	height: 15px;
	background-color: rgba(0,0,0,0);
}

ul#tabList button.closeFileTab:hover {
	background-color: #d34444;
	color: #fdf7f7;
}

ul#tabList li.tabFileItem.active button.closeFileTab {
	display: inline-block;
}














/* ###### Document Preview ####### */
.documentPreviewDiv {
	border: 0px solid blue;
	margin: 0px;
	
}

.documentPreviewCanvas {
	
}







/* ############### Function List ############### */

.functionListWrap {
	display: none;
background-color: white;
	max-width: 400px;
}

select.functionList {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: black;
	outline: 0;
	width: 100%;
	padding-right: 21px; /* Just in case there is a scrollbar, so that the scrollbar doesnt hide the text */
	overflow-x: hidden!important;
}

select.functionList.floatingInHeader {
	with: auto;
	max-width: 50%;
	height: 16px;
	width: 16px;
	position: absolute;
	
	z-index: 0; /* So that it does not cover something else */
	position: absolute;
	right: 40px;
	top: 0px;
	height: 32px;
	width: 32px;
	margin: 4px;
	
	background-color: #dcdcdc;
	background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='32px' width='32px'><text x='3' y='20' fill='black' font-size='18'>ƒ</text></svg>");
}

select.functionList.floatingInHeader::before {
	display: block;
	content: "foo foo foo";
	background-color: yellow;
	color: red;
	font-weight: bold;
	
	z-index: 0; /* So that it does not cover something else */
	position: absolute;
	right: 100px;
	top: 0px;
}

select.functionListInMenu {
	
	
	color: black;
	outline: 0;
	width: 100%;
	padding-right: 28px; /* pushes the option text away */
	
	overflow-x: hidden!important;
	max-width: 48px; /* too wide and the option text will start to show */
	
	background-color: transparent;
	
	/* Set height in the image below! */
	
	background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='32px' width='32px'><text x='3' y='20' fill='black' font-size='15'>ƒ</text></svg>");
	background-repeat: no-repeat;
	background-position: center;
	
}




/* ############### Search box ############### */





/* ############### File List ############### */
div.fileList {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: black;
	background-color: blue;
	border: 2px solid red;
}



/* ########### gotoFIle ################## */
div.gotoFile {
	color: #f6f6f3;
	/*text-shadow: 0px -1px 0px #1f2020;*/
	margin-top: 4px;
}


div.gotoFile li {
	font-size: 13px;
	padding: 2px;
	padding-top: 2px;
	padding-bottom: 2px;
	background-color: #2b2c27;
	color: #838383;
	
	background-color: #f6f6f6;
	color: black;
	
	font-family: menu;
	
	/*border-top: 1px solid #32342e;
	border-bottom: 1px solid #151513;*/
}

div.gotoFile li.selected {
	background-color: #3c3f37;
	
	background-color: #b5d4ff;
	color: #b5d4ffText;
	
}

div.gotoFile li b {
	color: black;
	}

div.gotoFile li:hover {
	background-color: #b5d4ff;
	color: black;
	cursor: pointer;
}

.blink {
	-webkit-animation-name: blinker; /* Chrome, Safari, Opera */
	-webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
	-webkit-animation-timing-function: steps;
	-webkit-animation-iteration-count: infinite;
	
}


@-webkit-keyframes blinker {
	
	from {
		
		color: yellow;
	}
	to {
		
		color: red;
		
	}
}




/*
	We CAN NOT have margin, padding or border on the .centerDiv or .fileCanvas !!!
	It kinda works with box-sizing: border-box; But then the text get screwed.
	
	It's however OK to have it on the surrounding boxes.
*/
.centerDiv, .fileCanvas {
	margin: 0px!important; 
	padding: 0px!important; 
	border: 0px solid black!important; 
}



/*
	Having overflow on any element will totally screw out the layout!
*/
* {
	overflow: hidden;
}


/* Add this class to elements that should not be selectable (text) */
.noselect {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}




/* ### Window menu */

.windowMenuHeight {
	/* needed to reserve height */
	height: 28px;
	border-bottom: 0px solid blue;
	
}

.windowMenu {
	overflow: visible;
	z-index: 5;
	position: absolute; /* needed so that children can be on top of other elements */
	
	font-family: menu, 'Lucida Grande', Tahoma, Verdana, sans-serif;
	font-weight: normal;
	font-size: 13px;
	}

.windowMenu .menu {
	z-index: 5;
	border-radius: 0;
	margin: 0;
	padding: 0;
	
	color: #6b6b6b;
}

.windowMenu .branch {
	background-color: rgb(235, 236, 239);
	border: 1px solid #cac7c4;
	color: #000000;
}

.windowMenu .pulloutright {
}

.windowMenu .pulloutbottom {
}

.windowMenu .root {
	background-color: transparent;
	border: 0px solid red;
}

.windowMenu .item {
	border: 0px solid green;
	padding: 0;
	margin: 0;
	height: 27px;
}
.windowMenu .item:hover {
	background-color: #ffffff;
	color: #000000;
	
}

.windowMenu .bullet {
	color: #45b73b;
	font-weight: bold;
	text-shadow: 0px 0px 0px black;
	width: 15px;
	text-align: center;
	font-size: 20px;
	margin: 0;
	padding: 0;
	padding-left: 0.5em;
}

.windowMenu .bullet.inactive:before {
	content: '\2003';
}

.windowMenu .bullet.active {
	padding-right: 0.5em;
}

.windowMenu .bullet.active:before {
	content: '\2022';
}

.windowMenu .label {
	border: 0px solid blue;
	
	padding-right: 1em;
	
	/* avoid line breaks */
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	overflow-x:-webkit-marquee;
	
}

.windowMenu .key {
	border: 0px solid red;
	
	color: #919191;
	font-size: 12px;
	text-align: right;
	
	padding-left: 1em;
	padding-right: 1em;
	
	/* avoid line breaks */
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.windowMenu .key.empty {
	padding: 0;
}

.windowMenu .item:hover .key {
	color: #1460AA;
}

.windowMenu .pulloutIcon {
	
	color: #c0c0c0;
	font-size: 10px;
	text.align: right;
	
}


.windowMenu .separatortop:not(:first-child) td {
	border-top: 1px dotted #cac7c4;
}

.windowMenu .separatorbottom:not(:last-child) td {
	border-bottom: 1px dotted #cac7c4;
}


/* ### Stying for the context menus */

.canvasContextmenu {
	/* We can't use .display="none" or it will not be possible to measure the size of the menu! */
	display: block;
	position: absolute;
	visibility: hidden;
	top: 100px;
	left: 100px;
	z-index: 10;
	background-color: rgba(217, 227, 250, 0.75);
	border: 1px solid;
	border-color: #777 #6c6c6c #666;
	border-radius: 3px;
	/*
		-webkit-transition: 0.2s ease-out;
		-moz-transition: 0.2s ease-out;
		-o-transition: 0.2s ease-out;
		transition: 0.2s ease-out;
		-webkit-transition-property: opacity, padding, visibility;
		-moz-transition-property: opacity, padding, visibility;
		-o-transition-property: opacity, padding, visibility;
		transition-property: opacity, padding, visibility;
	*/
	
	background-image: linear-gradient(to bottom, #eef3fe, #d9e3fa);
	background-image: linear-gradient(to bottom, #eef3fe, #d9e3fa);
	
	box-shadow: 0 1px 10px ThreeDShadow;
	max-width: 90%;
	max-height: 100%;
	min-width: 150px;
	overflow-x: hidden;
	overflow-y: auto;
	}

.canvasContextmenu.visible {
	visibility: visible;
}

.canvasContextmenu li {
	background-color: #f6f6f6;
	/*text-shadow: 0 1px white;*/
	cursor: default;
	display: block;
	position: relative;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 2px;
	padding-right: 5px;
	text-decoration: none;
	border: 1px solid transparent;
}

.canvasContextmenu li.sep {
	margin-top: 4px;
	padding-top: 4px;
	border-top: 1px solid #b4bbce;
	-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.6);
	box-shadow: inset 0 1px rgba(255, 255, 255, 0.6);
}

.canvasContextmenu li.item:hover {
	color: black;
	/*text-shadow: 0 1px rgba(0, 0, 0, 0.3);*/
	
	background: #5a70b0;
	background-color: #b5d4ff;
	
	border-color: #5a70b0 #495d98 #42558a;
	
	/* background-image: linear-gradient(to bottom, #7688bd, #4e64a3); */
}

.canvasContextmenu li.item:focus {
	background: #b5d4ff;
	outline: none;
}

.canvasContextmenu li .bullet {
	display: inline-block;
	vertical-align: middle;
	color: #45b73b;
	font-weight: bold;
	text-shadow: 0px 0px 0px black;
	font-size: 13px;
	width: 15px;
	text-align: center;
	font-size: 20px;
	line-height: 13px;
}

.canvasContextmenu li .bullet.inactive:before {
	content:"\2003";
	
	}

.canvasContextmenu li .bullet.active:before {
	content:"\2022";
	}

.canvasContextmenu li .text {
	font-family: menu, 'Lucida Grande', Tahoma, Verdana, sans-serif;
	font-weight: normal;
	text-shadow: none;
	font-size: 13px;
	color: #838ca2;
	color: #313a4f;
	color: black;
}

.canvasContextmenu li .key {
	display:inline-block;
	color: #919191;
	font-size: 9px;
	text-shadow: none;
	vertical-align: middle;
	margin-left: 4px;
	float: right;
	right: 0px;
	margin-top: 4px;
	}

.canvasContextmenu li.item:hover .key {
	color: #1460AA;
	}

.canvasContextmenu li ul {
	margin: 0;
	padding: 0;
}

.canvasContextmenu li.temp {
	margin: 0;
	padding: 0;
	border: 0;
}


/* ### Dialogs */
.dialog {
	position: absolute;
	top: 50px;
	left: 50px,
	z-index: 100;
	text-align: center;
	font-family: Verdana;
	background-color: #ededf1;
	background: linear-gradient(#595959, #555555);
	border-top: 2px solid #767676;
	box-shadow: inset 0px 4px 10px #888888;
	padding-top: 6px;
	padding-bottom: 6px;
	padding-left: 4px;
	padding-right: 4px;
	border-radius: 7px;
	border: 16px solid #3a3b44;
	box-shadow: 0px 4px 20px #000000;
	color: #1f2122;
	background-image: linear-gradient(to bottom, #dde1e9 0%, #fafafa 100%), linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
	max-width: 408px;
	word-wrap: break-word;
}

.dialog .message {
	min-width: 360px;
	min-height: 32px;
	max-height: 400px;
	font-family: Segoe UI, sans-serif;
	font-size: 15px;
	text-align: left;
	padding: 20px;
}

.dialog img {
	float: left;
	margin: 10px;
	}

.dialog button {
	border-radius: 3px;
	border: 1px solid rgba(19, 19, 19, 0.5);
	box-shadow: 0px 2px 5px #505050, inset 0px 1px 1px #888888;
	color: #f6f6f3;
	min-width: 90px;
	background-color: #414141;
	background: linear-gradient(#545657, #434343, #454545);
	cursor: default;
	text-shadow: 0px -1px 0px #1f2020;
	padding: 4px;
	margin: 4px;
	font-size: 12px;
}

.dialog button:focus {
	font-weight: bold;
	
}

.dialog button.alert {
	float: right;
}

.dialog button.confirm {
	min-width: 45%;
	}

.dialog button.prompt {
	float: right;
}

.dialog .input {
	width: 90%;
	border-radius: 2px;
	border: 1px inset #4a4a4a;
	background-color: #e6e6e6;
	box-shadow: 0px 1px 1px #b3b3b3, inset 0px 1px 1px #333333;
	padding: 3px;
	margin-bottom: 10px;
	font-size: 15px;
	font-family: Verdana;
}


/* ############### Mercurial plugin widgets ############### */
.repoCommit select {
	overflow-y: scroll;
}

.repoCommit select, .repoCommit textarea {
	padding-left: 2px;
	height: 7em;
}

ul.resolveList li {
	margin: 4px;
	padding: 1px;
	border: 0px solid blue;
	border-radius: 0px;
	display: inline-block;
}

.resolveList a {
	color: #b8dfff;
	text-decoration: underline;
	vertical-align: middle;
}

/* ############### File explorer ############### */

.annotationRev {
	float: right;
}

/* ############### File explorer ############### */

	.fileExplorer {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 13px;
	box-sizing: border-box;
	border-left: 2px solid #e8e8e8;
	/* Can not have padding, or the canvas will fall down */
}
.fileExplorer ul {
	background-color: #fff; /* #e8e8e8 */
	color: black;
}
.fileExplorer li {
	cursor: default;
	margin-top: 4px;
	margin-bottom: 4px;
	}

.fileExplorer li.folder {
	}

.fileExplorer li.file {
	}

.fileExplorer li.problem {
	color: brown;
}

.fileExplorer ul.fileContextMenu {
	}


.fileExplorer li img {
	vertical-align: middle;
	margin-right: 4px;
}

.fileExplorer li.file img {
	margin-left: 13px;
}

.fileExplorer li a:hover {
	text-decoration: underline;
}

.fileExplorer .box {
	font-family: Verdana, Geneva, sans-serif, monospace;
	font-size: 12px;
	display: inline-block;
	border: 0px solid black;
	width: 12px;
	height: 12px;
	
	text-align: center;
	vertical-align: middle;
	margin-right: 2px;
	margin-bottom: 2px;
	outline: 0;
	color: #6e6e6e;
}

.fileExplorer.loaderSpinner {
	text-align: center;
}

.fileExplorer.header {
	background-color: green;
	border: 0px solid orange;
	display: table;
	width: 100%;
	box-sizing: border-box;
}

.fileExplorer.hide {
	display: table-cell;
	width: auto;
	border: 0px solid red;
	border-radius: 3px;
	padding: 4px;
	margin: 2px;
	margin-right: 2px;
	margin-bottom: 2px;
	font-size: 13px;
	
	border: 1px outset #cccccc;
	
	width: auto;
	width: 30%;
	box-sizing: border-box;
}

.fileExplorer select {
	border-radius: 3px;
	padding: 3px;
	margin: 2px;
	margin-top: 0px;
	margin-bottom: 2px;
	margin-left: 2px;
	font-size: 13px;
	vertical-align: middle;
	
	display: table-cell;
	width: auto;
	width: 68%;
	box-sizing: border-box;
}


/* ###### Tree list */
.tree, .tree ul {
	position:relative;
	padding:0;
	margin: 0;
}
.tree ul {
	margin-left: 10px; /* indentation */ 
	list-style:none;
	}

.tree ul {margin-left:5px} /* (indentation/2) */

.tree:before,
.tree ul:before {
	content:"";
	display:block;
	width:0;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	/*border-left:1px dotted #999999;*/
}

.tree li {
	margin:0;
	margin-top: 4px;
	margin-bottom: 4px;
	padding-left: 12px; /* indentation + .5em */
	line-height:14px; /* default list item's `line-height` */
	position:relative;
}

.tree li:before {
	content:"";
	display:block;
	width: 10px; /* same as indentation */
	height:0;
	/*border-top:1px dotted #999999;*/
	margin-top: 0px; /* border top width */
	position:absolute;
	top:7px; /* (line-height/2) */
	left:0;
}

.tree li:last-child:before {
	background:white; /* same with body background */
	height:auto;
	top: 7px; /* (line-height/2) */
	bottom:0;
}


noscript div {
	font-size: 2em;
	margin: 2em;
	padding: 1em;
	background: yellow;
	border: 5px dotted black;
	}
noscript div p {
	font-family: Arial, Helvetica, sans-serif;
	color: #222222;
	text-shadow: none;
	margin: .5em;
}

p.noscript {
	font-family: Arial, Helvetica, sans-serif;
	color: #222222;
	text-shadow: none;
	margin: .5em;
}


progress {
	display: none; /* Need to explicitly show it! */
width: 100%;
	height: 5px;
	margin: 0;
	padding: 0;
}

#clipboardcatcher {
	width: 100px; 
	position: absolute; 
	left: -200px; 
	top: -200px;
}

#keyboardCatcher {
	width: 100px; 
	position: absolute; 
	left: -200px; 
	top: -200px; 
	/*left:0px; top: 0px; z-index: 2*/
}

#fileInput {
	display:none;
}

#fileSaveAs {
	display:none;
}

#directoryInput {
	display:none;
}

/* Editor built-in progress-bar */
.progressbar {
	display: none;
	width: 100%; 
	position: absolute;
	bottom: 0px;
	left: 0px;
}

div.group {
	display: inline-block;
	padding: 2px;
	vertical-align: middle;
	max-wdith: 500px;
}

.repoCommit .group.buttons {
	border: 0px solid red;
	max-width: 260px; /* many rows */
}

.folderPicker button, .filePicker button {
	font-size: 1em;
	padding: 2px;
	margin: 2px;
	margin-top: 4px;
	margin-bottom: 4px;
	border-radius: 5px;
	min-width: 2em;
	background-color: #dcdcdc;
}

.folderPicker button:focus {
	background-color: #ffffff;
}


/* 
### Discovery bar 
Assuming it's placed in the left column
*/

.discoveryBar {
	display: inline-block;
}

.discoveryBar .discoveryItem img {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
	filter: gray; /* IE6-9 */
	-webkit-filter: grayscale(80%); /* Chrome 19+ & Safari 6+ */
	opacity: .6;
	width: 100%;
	height: 100%;
}

.header .discoveryBar {
	border: 0px solid pink;
float: right;
margin-left: 5px;
	max-height: 34px; /* In case no file tab is open (this is the standard height of file tabs) */
}

.header .discoveryBar .discoveryItem {
	display: inline-block; /* side by side */
	border: 0px solid red;
	margin: 0;
	max-height: 30px;
	max-width: 32px;
}


.header .discoveryBar .discoveryItem img {

	height: 70%;
	width: 70%;
	margin: 15%;
	margin-top: 20%;
	margin-bottom: 10%
padding: 0;
}

.discoveryBar .discoveryItem {
	bacgkround-color: blue;
	margin: 0px;
	width: 38px;
	height: 38px;
	max-height: 90%;
	max-width: 90%;
	overflow: hidden;
}

.discoveryBar .discoveryItem:hover img, .discoveryBar .discoveryItem img.active {
	filter: none;
	-webkit-filter: grayscale(0%);
	cursor: pointer;
	opacity: 1;
}

.leftColumn .discoveryBar .discoveryItem {
	display: block;
	max-width: 100%;
	margin: 10px;
margin-top: 20px;
}


/* ### runBanner */

.runBanner {
	pisition: relative;
	border: 0px solid pink;
}

.runBanner .url {
	display:inline-block;
	border: 0px solid blue;
	vertical-align: middle;
}

.runBanner .url a {
	color: white;
}

.runBanner .button {
	display:inline-block;
	width: 50px;
	height; 20px;
	float: right;
	vertical-align: middle;
	margin: 0;
	padding: 1px;
}


.timeline {
	width: 100%;
}

.audioPlayer {
	height: 26px;
	vertical-align: middle;
	background-color: transparent;
	margin-left: 5px;
	margin-right: 5px;
}

.soundVisualizer {
	vertical-align: middle;
	border: 1px solid #222;
	margin-left: 5px;
	margin-right: 5px;
	background-color: #555555;
}

.fakeMouseElement {
	position: absolute;
	z-index: 40;
	top: 100px;
	left: 100px;
	opacity: .4;
	background-color: red;
	border-radius: 50%;
	transition: 0.15s ease;
}

.fakeMouseElement.hidden {
	display: none;
}

.fakeMouseElement.click {
	background-color: green;
}

.playbackKeyCombo {
	display: inline-block;
	position: absolute;
	top: 75%; 
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	background-color: #ccc;
	padding: 1em;
	border-radius: 5px;
	visibility: visible;
	opacity: 1;
}

.playbackKeyCombo .combo {
	font-size: 200%;
}

.playbackKeyCombo .desc {
	font-size: 100%;
}

.playbackKeyCombo.hidden {
	opacity: 0;
	visibility: hidden;
	transition: 1s;
}


/* ### loader animation */
.loader {
	display: inline-block;
	vertical-align: middle;
	border: 3px solid #f3f3f3; /* Light grey */
	border-top: 3px solid #3498db; /* Blue */
	border-radius: 50%;
	width: 8px;
	height: 8px;
	animation: spin 2s linear infinite;
	margin-right: 5px;
}

.loader.hidden {
	display: none;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}


@keyframes flash
{
	0%{transform: scale( 1 );}
	25%{transform: scale( 0.95 );}
	50%{transform: scale( 1.07 );}
	75%{transform: scale( 0.95 );}
	100%{transform: scale( 1 );}
	}

.flash
{
	animation: flash 1s infinite;
}


/*
* {
	 So that we only have to do this once 
	padding: 0px!important;
	margin: 0px!important;
	border: 0px solid #ff8059!important;
	border-spacing: 0px!important;
	overflow: auto!important;
}

*/



/*
	https://www.emailonacid.com/blog/article/email-development/emailology_media_queries_demystified_min-width_and_max-width
	
	min-width:  greater than or equal to
	max-width:  less than or equal to
	
*/


@media print {
	
	.leftColumn {display: none;}
	.rightColumn {display: none;}
	.header {display: none;}
	.footer {display: none;}
	
}



@media (max-height: 570px) { /* HEIGHT Less then or equal to */

	.canvasContextmenu {
		max-height: 100%;
		max-width: 75%;
		overflow-y: scroll;
	}
	.canvasContextmenu li {
		font-size: 10px;
		padding: 5px 10px 5px 7px;
		}
	
	
	ul#tabList li.tabFileItem {
		margin-top: 3px;
		padding-top: 1px;
		line-height: 10px;
	}
	
	ul#tabList ul.folderFileList {
		max-height: 19px;
	}
	
	ul#tabList li.tabFolderItem.single {
		padding-top: 2px; /* 8px */
		padding-bottom: 1px;
		min-height: 25px; /* same heigh when grouped */
	}
	
	ul#tabList li.tabFileItem {
		font-size: 10px;
		}
	
	ul#tabList button.closeFileTab {
		margin-top: -3px;
		margin-left: -16px;
	}
	
	ul#tabList .single ul.folderFileList li.tabFileItem {
		line-height: 56px;
	}
	
	select.functionList.floatingInHeader {
		height: 21px;
	}
	
	
	.header .discoveryBar {
		max-height: 27px;
	}
	
	.header .discoveryBar .discoveryItem {
	}
	
	.header .discoveryBar .discoveryItem img {
		height: 18px;
	}
	
}






@media (max-width: 1315px) {
	div.group, .repoCommit .group.buttons {
	border: 0px solid yellow;
	max-width: none; /* one long row */
}
	
	.leftColumn .discoveryBar {
		margin-top: 5px;
	}
	
	.leftColumn .discoveryBar .discoveryItem {
		max-width: 30px;
		border: 0px solid orange;
		margin: 7px;
		margin-top: 10px;
	}
	
}

@media (max-width: 600px) {
	
	.windowMenu .label {
		padding: 0;
	}
	.windowMenu .bullet {
		padding: 0;
	}
	
	.dialog {
		box-shadow: inset 0px 4px 10px #888888;
		padding-top: 6px;
		padding-bottom: 6px;
		padding-left: 4px;
		padding-right: 4px;
		border-radius: 7px;
		border: 8px solid #3a3b44;
		box-shadow: 0px 4px 20px #000000;
		max-width: 408px;
		
	}
	
	.dialog .message {
		min-width: 260px;
		min-height: 32px;
		max-height: 400px;
		font-size: 12px;
		padding: 10px;
	}
	
	.dialog img {
		margin: 10px;
	}
	
	.dialog button {
		font-size: 12px;
	}
	
	.dialog .input {
		margin-bottom: 10px;
		font-size: 12px;
	}
	
	.header .discoveryBar .discoveryItem {
		max-width: 26px;
	}
	
	.leftColumn .discoveryBar {
		margin-top: 5px;
	}
	
	.leftColumn .discoveryBar .discoveryItem {
		max-width: 20px;
		border: 0px solid orange;
		margin: 4px;
		margin-left: 2px;
	}

}

@media (max-width: 350px) {
	
	input[type=button], button.button, input[type=submit] {
		min-width: 80px;
	}
	
	.windowMenu .root .label {
		
max-width: 40px;
		max-width: 2ch;
		overflow: hidden;
		white-space: nowrap;
		text-overflow:clip; /* gets rid of the ... ellipsis */

		padding: 4px;
	}
	
	.windowMenu .root .key {
		display: none;
		width: 0;
		margin: 0;
		padding: 0;
	}
	
	.windowMenu .root .pulloutIcon {
		display: none;
		width: 0;
		margin: 0;
		padding: 0;
	}
	
	.windowMenu .root .bullet {
		display: none;
		width: 0;
		margin: 0;
		padding: 0;
	}
	
	.dialog .message {
		min-width: 80px;
}
	
	.header .discoveryBar {
		/* make it show on separate row */
		float: none;
		border: 0px solid green;
	}
	
	.header .discoveryBar .discoveryItem {
		max-width: 10%; /* 100% devided by number of items  */
	}
}

/* Make mobile browsers NOT zoom */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	select,
	textarea,
	input {
		font-size: 16px;
		}
	}



/* Detect OS theme */

#themeDetector {
	display: none;
	content: "default";
}

@media (prefers-color-scheme: light) {
	#themeDetector {
		content: "light";
	}
}
@media (prefers-color-scheme: dark) {
	#themeDetector {
		content: "dark";
	}
}

/*** Styles added to fix the issue with zoom in on iphone ***/
/* iPhone < 5: */
@media screen and (device-aspect-ratio: 2/3) {
	select, textarea, input[type="text"], input[type="password"],
	input[type="datetime"], input[type="datetime-local"],
	input[type="date"], input[type="month"], input[type="time"],
	input[type="week"], input[type="number"], input[type="email"],
	input[type="url"]{ font-size: 21px; }
}

/* iPhone 5, 5C, 5S, iPod Touch 5g */
@media screen and (device-aspect-ratio: 40/71) {
	select, textarea, input[type="text"], input[type="password"],
	input[type="datetime"], input[type="datetime-local"],
	input[type="date"], input[type="month"], input[type="time"],
	input[type="week"], input[type="number"], input[type="email"],
	input[type="url"]{ font-size: 21px; }
}

/* iPhone 6, iPhone 6s, iPhone 7 portrait/landscape */
@media screen and (device-aspect-ratio: 375/667) {
	select, textarea, input[type="text"], input[type="password"],
	input[type="datetime"], input[type="datetime-local"],
	input[type="date"], input[type="month"], input[type="time"],
	input[type="week"], input[type="number"], input[type="email"],
	input[type="url"]{ font-size: 21px; }
}

/* iPhone 6 Plus, iPhone 6s Plus, iPhone 7 Plus portrait/landscape */
@media screen and (device-aspect-ratio: 9/16) {
	select, textarea, input[type="text"], input[type="password"],
	input[type="datetime"], input[type="datetime-local"],
	input[type="date"], input[type="month"], input[type="time"],
	input[type="week"], input[type="number"], input[type="email"],
	input[type="url"]{ font-size: 21px; }
}