@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Source+Code+Pro:400,600,700');

:root, .theme.default {
	--font-color: #000000;
	
	--desktop-background-color: #008080;
	--desktop-font-color: #ffffff;
	
	--3d-face-color: #c0c0c0;
	--3d-light-color: #dfdfdf;
	--3d-lighter-color: #ffffff;
	--3d-dark-color: #808080;
	--3d-darker-color: #000000;
	
	--active-caption-background-color: #000080;
	--active-caption-background-gradient-color: #000080;
	--active-caption-font-color: #ffffff;
	
	--inactive-caption-background-color: #808080;
	--inactive-caption-background-gradient-color: #808080;
	--inactive-caption-font-color: #c0c0c0;
	
	--window-background-color: #ffffff;
	--window-font-color: #000000;
	
	--window-disabled-background-color: #dfdfdf;
	--window-disabled-font-color: #000000;
	
	--selection-background-color: #000080;
	--selection-font-color: #ffffff;
	
	--inactive-selection-background-color: #808080;
	--inactive-selection-font-color: #ffffff;
	
	--workspace-background-color: #808080;
	
	--cur-default-file: cur_default.gif;
	--cur-wait-file: cur_wait.gif;
	--cur-progress-file: cur_progress.gif;
	--cur-default: url(cur_default.gif) 0 0, progress;
	--cur-wait: url(cur_wait.gif) 15 15, wait;
	--cur-progress: url(cur_progress.gif) 0 3, progress;
	
	--quickinfo-background-color: #ffffdf;
	--quickinfo-font-color: #000000;
	--quickinfo-border-color: #000000;
}

:root {	
	width: 100%;
	height: 100%;
	
	background-color: black;
	
	font-family: "Source Sans Pro";
	font-size: 12px;
	letter-spacing: 0.02em;
	color: var(--desktop-font-color);
	
	cursor: var(--cur-default);
	
	-webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none; /* Standard syntax */
}

body {
	display: none;
	
	width: 100%;
	height: 100%;
	
	margin: 0;
	
	background-color: var(--desktop-background-color);
	
	overflow: hidden;
}

::selection {
	background-color: var(--selection-background-color);
	color: var(--selection-font-color);
}

button {
	background: none;
	border: none;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
}

.object {
	box-sizing: border-box;
	position: relative;
	
	padding: 2px;
	
	background-color: var(--3d-face-color);
	
	--top-left-outer-color: var(--3d-light-color);
	--top-left-inner-color: var(--3d-lighter-color);
	--bottom-right-outer-color: var(--3d-darker-color);
	--bottom-right-inner-color: var(--3d-dark-color);
	
	--left-outer-color: var(--top-left-outer-color);
	--top-outer-color: var(--top-left-outer-color);
	--left-inner-color: var(--top-left-inner-color);
	--top-inner-color: var(--top-left-inner-color);
	
	--right-outer-color: var(--bottom-right-outer-color);
	--bottom-outer-color: var(--bottom-right-outer-color);
	--right-inner-color: var(--bottom-right-inner-color);
	--bottom-inner-color: var(--bottom-right-inner-color);
	
	--outline-color: transparent;
	box-shadow: 0 0 0 1px var(--outline-color);
}

.object:before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	pointer-events: none;
	
	box-shadow: 
		inset 0 -1px var(--bottom-outer-color),
		inset -1px 0 var(--right-outer-color),
		inset 0 1px var(--top-outer-color),
		inset 1px 0 var(--left-outer-color),
		inset 0 -2px var(--bottom-inner-color),
		inset -2px 0 var(--right-inner-color),
		inset 0 2px var(--top-inner-color),
		inset 2px 0 var(--left-inner-color),
		0 0 0 1px var(--outline-color);
		
	z-index: 999;
}

.sunken {
	--top-left-outer-color: var(--3d-dark-color);
	--top-left-inner-color: transparent;
	--bottom-right-outer-color: var(--3d-lighter-color);
	--bottom-right-inner-color: transparent;
}

.button {
	display: inline-block;
	
	width: auto;
	min-width: 76px;
	
	padding: 4px 8px;
	
	--top-left-outer-color: var(--3d-lighter-color);
	--top-left-inner-color: var(--3d-light-color);
	
	text-align: center;
	color: var(--font-color);
	overflow: hidden;
	text-overflow: ellipsis;
}

.button.default {
	--top-left-inner-color: var(--3d-lighter-color);
	--outline-color: var(--font-color);
}

.button.pressed, button:not(.disabled):not([disabled]):active {	
	--top-left-outer-color: var(--3d-darker-color);
	--top-left-inner-color: var(--3d-dark-color);
	--bottom-right-outer-color: var(--3d-lighter-color);
	--bottom-right-inner-color: var(--3d-light-color);
	
	padding-left: 9px;
	padding-right: 7px;
}

.button.disabled, .button[disabled] {
	color: var(--3d-dark-color);
	text-shadow: 1px 1px var(--3d-lighter-color);
}

.button.focus:after {
	content: "";
	position: absolute;

	left: 3px;
	top: 3px;
	right: 3px;
	bottom: 3px;

	border: 1px dotted var(--font-color);
	border-radius: 1px;
}

.field {
	position: relative;
	padding: 1px 1px;
	
	background-color: var(--window-background-color);	
	
	--top-left-outer-color: var(--3d-dark-color);
	--top-left-inner-color: var(--3d-darker-color);
	--bottom-right-outer-color: var(--3d-lighter-color);
	--bottom-right-inner-color: var(--3d-light-color);
	
	color: var(--window-font-color);
	
	overflow: auto;
}

.field.disabled, .field[disabled] {
	background-color: var(--window-disabled-background-color);
	color: var(--window-disabled-font-color);
}

.field input[type=text] {
	width: 100%;
	margin: 1px 0;
	border: none;
	font-family: inherit;
	font-size: inherit;
	color: var(--window-font-color);
}

.field.checkbox {
	display: inline-block;
	
	top: 2px;
	
  width: 11px;
  height: 11px;
	
  padding: 0;
	
  background-position: center;
}

.field.checkbox.checked {
  background-image: url("check.gif");
}

.field.checkbox.checked.disabled {
  background-image: url("check_disabled.gif");
}

.field.checkbox input[type=checkbox] {
  margin: 0;
  opacity: 0;
}

.field.radioButton {
	display: inline-flex;
	
	width: 13px;
	height: 13px;
	
	padding: 0;
	
	border-radius: 100%;
}

.field.radioButton:before {	
	border-radius: 100%;
}

.field.radioButton input[type=radio] {
	margin: 0;
	opacity: 1;
}

.field.radioButton .indicator {
	position: absolute;
	left: 2px;
	right: 2px;
	top: 2px;
	bottom: 2px;
	
	background-color: var(--window-background-color);
	
	border-radius: 100%;
	
	pointer-events: none;
}

.field.radioButton input:checked + .indicator {
	background-color: var(--window-font-color);
	box-shadow: inset 0 0 0 2px var(--window-background-color);
}

.quickinfo {
  padding: 5px;
	
	background-color: var(--quickinfo-background-color);
	
	box-shadow: inset 0 0 0 1px var(--quickinfo-border-color);
	
	color: var(--quickinfo-font-color);
}

hr {
	width: 100%;
	
	border-style: solid;
	border-top-color: var(--3d-dark-color);
	border-left-color: var(--3d-dark-color);
	border-bottom-color: var(--3d-lighter-color);
	border-right-color: var(--3d-lighter-color);
}

.workspace {
	background-color: var(--workspace-background-color);
}

.window {
	display: flex;
	flex-direction: column;
	position: fixed;
	
	color: var(--font-color);
}

.window > .titleBar {
	position: absolute;
	top: 3px;
	left: 3px;
	right: 3px;
	
	min-height: 18px;
	
	padding: 0 56px 0 21px;
	
	background-color: var(--inactive-caption-background-color);
	background: none;
	background: -moz-linear-gradient(left, var(--inactive-caption-background-color) 0%, var(--inactive-caption-background-gradient-color) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, var(--inactive-caption-background-color) 0%, var(--inactive-caption-background-gradient-color) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, var(--inactive-caption-background-color) 0%, var(--inactive-caption-background-gradient-color) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */	
	
	font-weight: bold;
	line-height: 18px;
	color: var(--inactive-caption-font-color);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.window.active > .titleBar {
	background-color: var(--active-caption-background-color);
	background: -moz-linear-gradient(left, var(--active-caption-background-color) 0%, var(--active-caption-background-gradient-color) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, var(--active-caption-background-color) 0%, var(--active-caption-background-gradient-color) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, var(--active-caption-background-color) 0%, var(--active-caption-background-gradient-color) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */	

	color: var(--active-caption-font-color);
}

.window > .titleBar .windowLabel {
	pointer-events: none;
}

.window.noicon > .titleBar {
	padding-left: 3px;
}

.window.noMinMaxClose > .titleBar {
	padding-right: 3px;
}

.window.noMinMax > .titleBar,
.window.noMinClose > .titleBar,
.window.noMaxClose > .titleBar {
	padding-right: 20px;
}

.window > .titleBar > :not(.windowLabel) {
	font-weight: normal;
}

.window > .titleBar .icon {
	position: absolute;
	
	width: 16px;
	height: 16px;
	
	left: 2px;
	top: 1px;
	
	image-rendering: optimizespeed;
}

.window > .titleBar .button {
	position: absolute;
	display: flex;
	
	top: 2px;
	width: 16px;
	min-width: 0;
	height: 14px;
	padding: 0;
	
	font-size: 11px;
	line-height: 8px;
}

.window > .titleBar .button.pressed {
	padding: 1px;
	line-height: 10px;
}

.window > .titleBar .button.pressed:before {
	background-position: 1px 1px;
}

.window > .titleBar .minBtn {
	right: 36px;
}

.window > .titleBar .minBtn:before {
	content: "";
	background-image: url("ico_win_min.gif");
}

.window.noClose > .titleBar .minBtn {
	right: 18px;
}

.window.noMaxClose > .titleBar .minBtn {
	right: 2px;
}

.window > .titleBar .maxBtn,
.window > .titleBar .restoreBtn,
.window > .titleBar .disabledMaxBtn {
	right: 20px;
}

.window > .titleBar .maxBtn:before {
	content: "";
	background-image: url("ico_win_max.gif");
}

.window > .titleBar .restoreBtn:before {
	content: "";
	background-image: url("ico_win_restore.gif");
}

.window > .titleBar .disabledMaxBtn:before {
	content: "\1F5D6";
	line-height: 11px;
}

.window.noClose > .titleBar .maxBtn,
.window.noClose > .titleBar .restoreBtn,
.window.noClose > .titleBar .disabledMaxBtn,
.window.noMinClose > .titleBar .maxBtn,
.window.noMinClose > .titleBar .restoreBtn,
.window.noMinClose > .titleBar .disabledMaxBtn {
	right: 2px;
}

.window > .titleBar .closeBtn {
	right: 2px;
}

.window > .titleBar .closeBtn:before {
	content: "";
	background-image: url("ico_win_close.gif");
}

.window > .menuBar {
	margin-top: 19px;
	padding: 0 1px;
}

.window > .menuBar > .menuItem {
	display: inline-block;
	margin: 1px 1px 0;
	padding: 1px 6px;
}

.window > .content {
	box-sizing: border-box;
	flex-grow: 1;
	
	margin-left: 2px;
	margin-right: 2px;
	margin-top: 0px;
	margin-bottom: 2px;
	
	padding: 0;
	
	color: var(--font-color);
	
	overflow: hidden;
}

.window .dialogBody {
	min-width: 192px;
	max-width: 85vw;
	
	margin: 12px;
	
	background-size: 32px 32px;
	background-repeat: no-repeat;
	background-position-x: 4px;
	
	text-align: center;
	
	image-rendering: optimizespeed;
}

.window .dialogBody .message {
	flex-grow: 1;
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	
	min-height: 32px;
	
	margin-bottom: 12px;
	padding-left: 52px;
	
	text-align: left;
	white-space: pre-wrap;
}


.window .dialogBody .buttonWrapper {
	display: flex;
	justify-content: space-around;
}

.window .dialogBody .buttonWrapper .button {
	margin: 0 2px;
}

.window :not(.window).active {
	background-color: var(--inactive-selection-background-color);
	color: var(--inactive-selection-font-color);
}

.window.active :not(.window).active {
	background-color: var(--selection-background-color);
	color: var(--selection-font-color);
}

.window.locked * {
	pointer-events: none;
}

.statusBar {
  margin-top: 2px;
}

.statusBar:before {
  content: "";
  display: block;
  position: absolute;
  
  right: 5px;
  bottom: 5px;
  
  width: 14px;
  height: 14px;
  
  background-image: url("data:image/gif;base64,R0lGODlhDgAOAKIAAAAAAP///8DAwICAgP///wAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFAAAEACwAAAAADgAOAAADK0i6vNGQBBFZGLTKgfXFGfQJUzReocORa3Ou6YuVisxm9rjN60gKwKAwmAAAOw==");
  background-position: bottom right;
  background-repeat: no-repeat;
  
  pointer-events: none;
  
  z-index: 1000;
}

body > .iconWrapper .caption {
	background-color: var(--desktop-background-color);
}

.window .iconWrapper.active .caption {
	color: var(--window-font-color);
}

.desktop .iconWrapper.active .caption {
	color: var(--desktop-font-color);
}

.window.active .iconWrapper.active .caption,
.desktop.active .iconWrapper.active .caption {
	background-color: var(--selection-background-color);
	color: var(--selection-font-color);
}

.iconWrapper {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	
	box-sizing: border-box;
	
	width: 106px;
	height: 80px;
	
	padding: 8px 4px;
}

.iconWrapper.active {
	background-color: transparent !important;
}

.iconWrapper.active .caption {
  white-space: normal;
}

.iconWrapper .icon,
.iconWrapper .caption {
  flex-shrink: 0;
  flex-grow: 0;
}

.iconWrapper .icon {
	position: relative;
	
	width: 32px;
	height: 32px;
	
	overflow: hidden;
}

.iconWrapper .icon > * {
	position: absolute;
	
	left: 0;
	top: 0;
	
	width: 100%;
	height: 100%;
	
	pointer-events: none;
}

.iconWrapper .icon .iconActive {
	display: none;
}

.active .iconWrapper.active .icon .iconActive {
	display: block;
}

.iconWrapper .caption {
	box-sizing: border-box;
	
	max-width: 100%;
	
	margin-top: 4px;
	padding: 0 1px;
	
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.iconWrapper.link:not(.controlPanel) .icon:before {
	content: "";
	
	position: absolute;
	
	width: 32px;
	height: 32px;
	
	background-image: url("link.gif");
	background-size: 11px 11px;
	background-position: bottom left;
	background-repeat: no-repeat;
	
	z-index: 9;
	
	pointer-events: none;
}

.folder.smallIcons {
	flex-direction: column;
}

.folder.smallIcons .iconWrapper {
	flex-direction: row;
	width: 128px;
	height: auto;
	margin: -1px 0;
	padding: 0;
}

.folder.smallIcons .iconWrapper .icon {
	width: 16px;
	height: 16px;
}

.folder.smallIcons .iconWrapper .caption {
	margin: 1px;
	padding: 2px;
}

.folder.details {
	flex-direction: column;
	flex-wrap: nowrap !important;
}

.folder.details .iconWrapper {
	flex-direction: row;
	width: 100%;
	height: auto;
	margin: -1px 0;
	padding: 0;
}

.folder.details .iconWrapper .icon {
	width: 16px;
	height: 16px;
}

.folder.details .iconWrapper > :not(.icon) {
	flex-grow: 0;
	flex-shrink: 0;
	
	margin: 1px;
	padding: 2px;
	
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.folder.details .iconWrapper .caption
{
	background-color: transparent !important;
	width: 128px;
}

.folder.details .iconWrapper .size {
	width: 64px;
}

.folder.details .iconWrapper .type {
	width: 128px;
}

.folder.details .iconWrapper.active > :not(.caption) {
	color: var(--window-font-color);
}

.folder.details .iconWrapper.active .caption .captionWrapper {
	padding: 1px;
	border: 1px dotted var(--window-font-color);
	color: var(--window-font-color);
}

.active .folder.details .iconWrapper.active .caption .captionWrapper {
	background-color: var(--selection-background-color);
	border: 1px dotted var(--window-background-color);
	color: var(--selection-font-color);
}

.iconWrapper.moveIconDummy {
	opacity: 0.4;
	
	pointer-events: none;
}

#taskBar {
	box-sizing: border-box;
	position: fixed;
	display: flex;
	
	bottom: 0px;
	
	height: 28px;
	width: 100%;
	
	padding: 2px;
	
	border-left: none;
	border-right: none;
	border-bottom: none;
	
	color: var(--font-color);
	
	z-index: 2147483647;
}

#taskBar:before {
	border-left: none;
	border-right: none;
	border-bottom: none;
}

#startBtn {
	min-width: 0;
	
	margin-right: 2px;
	padding-left: 21px;
	padding-right: 4px;
	
	background-image: url("data:image/gif;base64,R0lGODlhEAAQAMIAAAAAAIAAAP8AAICAgAAAAAAAAAAAAAAAACH+EUNyZWF0ZWQgd2l0aCBHSU1QACH5BAEKAAQALAAAAAAQABAAAAM3SEoRACvKIJy81A14V35cx1TAJo5NYxKgV31cyWVo26JKtt1Mk5OPVecjHAJDRg0yuRw6midJAgA7") !important;
	background-size: 16px 16px;
	background-repeat: no-repeat;
	background-position: 3px center;
	
	font-weight: bold;
	
	image-rendering: optimizespeed;
}

#startBtn.pressed,
#startBtn.active {
	padding-left: 22px;
	padding-right: 3px;
	
	background-position-x: 4px;
}


#startBtn.active {
	--top-left-outer-color: var(--3d-darker-color);
	--top-left-inner-color: var(--3d-dark-color);
	--bottom-right-outer-color: var(--3d-lighter-color);
	--bottom-right-inner-color: var(--3d-light-color);
}

#taskList {
	display: flex;
	width: 1px;
	flex-grow: 1;
}

#taskList .task {
	box-sizing: border-box;
	display: inline-block;
	
	flex-shrink: 1;
	flex-grow: 0;
	
	width: 160px;
	height: 22px;
	
	margin: 1px;
	padding-left: 23px;
	
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
}

#taskList .task.noicon {
	padding-left: 6px;
}

#taskList .task.pressed {
	background-image: url("data:image/gif;base64,R0lGODlhAgACAJEAAAAAAP///////wAAACH5BAEAAAIALAAAAAACAAIAAAIDVCIFADs=");
	font-weight: bold;
}

#taskList .task .icon {
	position: absolute;
	
	left: 3px;
	top: 2px;
	
	width: 16px;
	height: 16px;
}

#taskList .task * {
	pointer-events: none;
}

#tray {
	margin: 2px 2px 2px 4px;
	padding: 1px 3px;
	
	line-height: 16px;
}

#debug {
	position: fixed;
	bottom: 2px;
	right: 4px;
}


#dosScreen {
	position: fixed;
	
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	
	background-color: black;
	
	z-index: 2147483646;
}

#bootScreen {
	position: fixed;
	
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	
	background-color: black;
	background-image: url("bootscreen.gif");
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
	image-rendering: optimizespeed;
	
	z-index: 2147483647;
}

#bootScreen:before {
	content: "";
	display: block;
	position: fixed;
	
	left: 0;
	bottom: 0;
	
	width: 100%;
	height: 3%;
	
	background-image: url("bootbar.png");
	background-size: 100%;
	
	animation-name: bootmove;
  animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes bootmove {
    from { background-position-x: 0; }
    to { background-position-x: calc(100vh * 3); }
}

.menu {
	position: fixed;
	
	min-width: 96px;
	
	padding: 3px 2px;
	
	background-color: var(--3d-face-color);
	
	color: var(--font-color);
	
	z-index: 2147483647;
}

.menu .menuItem {
	padding: 2px 22px;
	margin: 0px 1px;
	
	background-size: 16px auto;
	background-repeat: no-repeat;
	background-position: 3px;
	
	white-space: nowrap;
}

.menu .menuItem:hover, .menu .menuItem.active {
	background-color: var(--selection-background-color);
	color: var(--selection-font-color);
}

.menu .menuItem.strong {
	font-weight: bold;
}

.menu .menuItem.separator {
	height: 0;
	padding: 0;
	margin: 4px 2px;
	
	border-top: 1px solid var(--3d-dark-color);
	border-bottom: 1px solid var(--3d-lighter-color);
}

.menuBar .menuItem.disabled,
.menu .menuItem.disabled {
	color: var(--3d-dark-color);
	text-shadow: 1px 1px 0 var(--3d-lighter-color);
}

.menu .menuItem.disabled:hover {
	background-color: transparent;
}

.menu .menuItem.submenu {
	position: relative;
}

.menu .menuItem.submenu:after {
	content: "\25B6";
	display: inline-block;
	position: absolute;
	right: 3px;
	top: 1px;
	transform: scale(0.45, 0.95);
}

.menuItem.checked:before {
  content: "";
  
  display: block;
  
  position: absolute;
  left: 4px;
  
  width: 16px;
  height: 16px;
  
  background-image: url("check.gif");
  background-position: 2px 2px;
  background-repeat: no-repeat;
}

.menu.startMenu {
  padding-left: 20px;
}

.menu.startMenu:after {
  content: "";
  
  display: block;
  position: absolute;
  
  left: 2px;
  top: 2px;
  bottom: 2px;
  
  width: 22px;
  
  background-color: var(--3d-dark-color);
}

.menu.startMenu > :last-child:before {
	content: "Frames";
	display: block;
	position: absolute;

	left: 5px;
	bottom: 10px;

	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: 900;
	color: var(--3d-face-color);
	letter-spacing: -0.05em;
	writing-mode: tb-rl;
	text-shadow: none;

	transform: scale(-1);

	z-index: 1;
}

.menu.startMenu > :last-child:after {
	content: "18";
	display: block;
	position: absolute;

	left: 5px;
	bottom: 78px;

	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: var(--3d-light-color);
	letter-spacing: -0.05em;
	writing-mode: tb-rl;
	text-shadow: none;

	transform: scale(-1);

	z-index: 1;
}

.menu.startMenu .menuItem:not(.separator) {
	padding: 3px 28px;
	
	background-position: 5px;	
}

.menu.startMenu > .menuItem:not(.separator) {
	min-width: 80px;
	padding: 9px 22px 9px 50px;
	
	background-size: 32px auto;
	background-position-x: 10px;
}

.menu.startMenu > .menuItem.submenu:after {
	top: 7px;
}

.desktop {
	color: var(--desktop-font-color);
}

.tabsheet {
	flex-grow: 1;
	
	display: flex;
	flex-direction: column;
}

.tabsheet .tabHeaderWrapper {
	display: flex;
}

.tabsheet .tabHeaderWrapper .tabHeader {
	position: relative;
	
	margin-top: 2px;
	padding: 2px 6px 0;
	
	border-left: 1px solid var(--3d-light-color);
	border-right: 1px solid var(--3d-darker-color);
	border-top: 1px solid var(--3d-light-color);
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	
	z-index: 2000;
	
	margin-bottom: -1px;
	background-color: var(--3d-face-color);
}

.tabsheet .tabHeaderWrapper .tabHeader:before {
	content: "";
	
	display: block;
	position: absolute;
	
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	
	border-left: 1px solid var(--3d-lighter-color);
	border-right: 1px solid var(--3d-dark-color);
	border-top: 1px solid var(--3d-lighter-color);
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}

.tabsheet .tabHeaderWrapper .tabHeader.active {
	margin-top: 0;
	margin-bottom: -2px;
	background-color: inherit;
	box-shadow: inset 0 -2px var(--3d-face-color);
	color: inherit;
}

.tabsheet .tabBodyWrapper {
	flex-grow: 1;
	padding: 12px;
}