/*  USER LEVEL CSS  */

::selection{
	background: var(--highlightColor);
	color: var(--highlightText);
}

/*	SQUISHY BUTTONS */
/*base element contains structure and normal highlights. Before element contains icon. 
After element contains shadows. Base colors fetched from colors.css via background-color prop*/
softbutton{
	display: inline-block;
	width:31px;
	height:31px;
	margin: 1px;
	border-radius: 4px;
	background-size: 31px;
	position: relative;
	background: radial-gradient(at 10% 10%, #ffffff66 0%, #ffffff4a 10%, #ffffff00 60%), radial-gradient(at 85% 85%, #ffffff33 0%, #ffffff19 30%, #ffffff00 50%);
}
softbutton img{
	height: 31px;
	width: 31px;
	display: block;
	position: absolute;
	top:1px;
	pointer-events: none;
}
softbutton:before{
	filter: multiply;
	height: inherit;
	width: inherit;
	content:" ";
	display: block;
	/*transform: translateY(-100%);*/
	margin: 0 0 0 -1px;
	border-radius: 5px;
	box-shadow: inset -1.5px -1.5px 4.5px #00000088, inset 1px 1px 1px #00000029;
	background: radial-gradient(at 100% 100%, #00000022 0%, #00000000 40%);
	border:1px solid white;
}
softbutton:after{
	position: absolute;
	top:1px;
}
/*HOVER STATES*/
softbutton:hover{
/*	background: radial-gradient(at 10% 10%, #ffffff88 0%, #ffffff66 10%, #ffffff00 60%), radial-gradient(at 85% 85%, #ffffff66 0%, #ffffff22 30%, #ffffff00 50%);*/
	cursor: url("../../res/ui/cursors/link.cur"), pointer;
}
/*softbutton:hover:after{
	box-shadow: inset -1.5px -1.5px 4.5px #00000088, inset 1px 1px 1px #00000022;
	background: none;
}*/
/*CLICK STATES*/
/*softbutton:active{
	background: radial-gradient(at 90% 90%, #ffffff33 0%, #ffffff22 20%, #ffffff00 50%);
}
softbutton:active:after{
	filter: multiply;
	box-shadow: inset -1.5px 1.5px 4.5px #00000055, inset 1.5px 1.5px 3px #00000055;
	background: radial-gradient(at 10% 10%, #0000002a 0%, #00000000 60%);
	border:1px solid white;
}*/
softbutton:active img{
	opacity: 0.6;
}

/*  DOUBLED SQUISHY BUTTON  */
.bigbutton{
	display: inline-block;
	width:64px;
	height:64px;
	border:2px solid white;
	border-radius: 8px;
	background: none;
	background-size: 64px;
}
.bigbutton:after{
	filter: multiply;
	height: inherit;
	width: inherit;
	content:" ";
	display: block;
	margin-top: -100%;
	border-radius: 8px;
	box-shadow: inset -3px -3px 8px #000044aa, inset 2px 2px 1px #00004433;
	border:2px solid white;
}
/*  USER PROFILE PICTURES  */
startmenu usericon{
	display: inline-block;
	height: 52px;
	margin: 30px 0;
}
startmenu usericon span{
	display: inline-block;
	text-shadow: 2px 2px 3px #00000033;
	line-height: 48px;

	font-family: var(--contentFont);
	color: #fff;
	margin: 13px 0 0 12px;
	font-weight: 600;
	transform: translateY(-18px);
}
startmenu usericon img{
	width:48px;
	height: 48px;
	display: inline-block;
	margin-left: 2px;
	border:1px solid #d5d3e8;
	border-radius: 2px;
	box-shadow: 1px 0 #d5d3e8, -1px 0 #d5d3e8, 0 1px #d5d3e8, 0 -1px #d5d3e8, 2px 2px 3px #0003;
}
/*usericon:after{
	content: ' ';
	width:52px;
	height: 52px;
	display: block;
	margin: -70px 0 0 0;
	background-color: #d5d3e8;
	border-radius: 4px;
	box-shadow: 2px 2px 3px #00000033;
}*/

/*  OLD UI BUTTON METHOD, DEPRECATED  */
oldbutton{
	/*bgcol for base, border for the selection ring, box shadow for surround*/
	display: inline-block;
	font-family: var(--contentFont);
	font-size: var(--contentFontSize);
	text-align: center;
	color:#000;
	background: linear-gradient(to bottom, #fcfcfb, #ecebe6);
	margin:3px;
	padding: 1px 5px;

	min-width:71px;

	border-radius: 2.5px;
	border: 2px solid;
	border-image-slice: 1;
	border-image-source: linear-gradient(to bottom, #fcfcfb, #ecebe6 90%, #d6d0c5 100%);
	box-shadow: 0 0 0px 1px #003c74, 0px -1px 0 1px #00000022, 0px 1px 0 1px #ffffff55;
}
oldbutton.default{
	border-image-source: linear-gradient(to bottom,#cee7ff 0%, #bcd4f6 10%, #89ade4 95%, #6982ee 100%);
}
oldbutton:hover{
	border-image-source: linear-gradient(to bottom,#fff0cf 0%, #fcd279 10%, #f8b230 95%, #e59700 100%);
}
oldbutton:active{
	background: linear-gradient(to bottom, #e6e6e0, #e0e0d7);
	border-image-source: linear-gradient(to bottom, #c1bdb3 0%, #e2e1da 5%, #e2e1da 87.5%, #f2f1ee 100%);
}
oldbutton.disabled{
	color:#8c8a7e;
	background: #f8f6ea;
	border-image-source: linear-gradient(to bottom,#f8f6ea, #f8f6ea);
	box-shadow: 0 0 0 1px #c6c6ba;
}

/*  UI BUTTONS - OK, CANCEL ETC  */
btncontainer.right{
	position: absolute;
	right: 0px;
	margin-top: 2px;
	margin-right: 6px;
}
btncontainer.left{
	position: absolute;
	left: 0px;
	margin-top: 2px;
	margin-left: 6px;
}
btncontainer.center{
	margin: 2px auto 0;
}

winbutton{
	/*bgcol for base, border for the selection ring, box shadow for surround*/
	display: inline-block;
	border: 1px solid;
	border-color: var(--3dHighlight) var(--3dDarkShade) var(--3dDarkShade) var(--3dHighlight);
	background: var(--mainColor);
	padding: 0;
	margin: 2px;
	height: 19px;
	box-shadow: inset -1px -1px var(--3dLightShade);
	min-width: 71px;
}
winbutton btnopt{
	display:block;
	font-family: var(--contentFont);
	font-size: var(--contentFontSize);
	text-align: center;
	color:var(--mainText);
	margin:2px;
	padding: 0px 4px;
	width:inherit;
}

/* states */
winbutton.default{
	border-color: #000;
	box-shadow: inset -1px -1px var(--3dDarkShade),inset 1px 1px var(--3dHighlight), inset -2px -2px var(--3dLightShade);
}
winbutton.default btnopt{
	/*box-shadow: 1px 0 0 #fff, -1px 0 0 #fff;*/
}
winbutton:active:not(.disabled){
	border-color: #000;
	box-shadow: inset 1px 0 0 var(--3dLightShade), inset -1px 0 0 var(--3dLightShade), inset 0 1px 0 var(--3dLightShade), inset 0 -1px 0 var(--3dLightShade);
}
winbutton:active:not(.disabled) btnopt{
	transform: translate(1px, 1px);
}
winbutton.disabled{
	color: var(--3dLightShade);
	text-shadow: 1px 1px var(--3dHighlight);
	pointer-events: none;
}
winbutton.disabled btnopt{
	color: var(--3dLightShade);
	background: none;
	box-shadow: none;
}

/*  COMBO BOXES  */
combobox{
	margin-top: -1px;
	background-color: var(--contentColor);
	color: var(--contentText);
	border: 1px solid;
	border-color: var(--lowerBoxLight);
	box-shadow: var(--insetBSLowerDark);
	width: inherit;
	height: 16px;
	padding: 2px 0;
	display: inline-block;
	vertical-align: middle;
	line-height: 16px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
combobox img{
	width: 16px;
	height: 16px;
	vertical-align: middle;
	margin: -2px 2px 0 2px;
}

/*  DATA SLIDERS  */
app input[type="range"] {
	-webkit-appearance: none;
	background: transparent;
	width: 100%;
	height: 20px;
}
app input[type="range"]::-moz-range-track {
	height: 2px;
	border: 1px solid;
	border-color: var(--3dLightShade) var(--3dHighlight) var(--3dHighlight) var(--3dLightShade);
  	box-shadow: inset 0 1px var(--3dDarkShade), inset 0 -1px var(--mainColor);
}
app input[type="range"]::-moz-range-thumb {
	-webkit-appearance: none;
	height: 19px;
	width: 9px;
	background: var(--mainColor);
	border-radius: 0;
	box-shadow: inset -1px -1px var(--3dLightShade);
	/*clip-path: polygon(100% 0%, 100% 75%, 50% 100%, 0% 75%, 0 0);*/
	border: 1px solid;
	border-color: var(--3dHighlight) var(--3dDarkShade) var(--3dDarkShade) var(--3dHighlight);
}
app input[type="range"][disabled=""]::-moz-range-track{
	border-color: var(--mainColor) var(--3dHighlight) var(--3dHighlight) var(--mainColor);
	box-shadow: inset 0 1px var(--3dLightShade), inset 0 -1px var(--mainColor);
}
app input[type="range"][disabled=""]::-moz-range-thumb{
	box-shadow: inset -1px -1px var(--3dLightShade);
	border-color: var(--3dHighlight) var(--3dLightShade) var(--3dLightShade) var(--3dHighlight);
}

app input[type="range"]::-webkit-slider-runnable-track {
	height: 4px;
	width: inherit;
	border: 1px solid;
	border-color: var(--3dLightShade) var(--3dHighlight) var(--3dHighlight) var(--3dLightShade);
  	box-shadow: inset 0 1px var(--3dDarkShade), inset 0 -1px var(--mainColor);
}
app input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	height: 21px;
	width: 11px;
	background: var(--mainColor);
	border-radius: 0;
	box-shadow: inset -1px -1px var(--3dLightShade);
	/*clip-path: polygon(100% 0%, 100% 75%, 50% 100%, 0% 75%, 0 0);*/
	border: 1px solid;
	border-color: var(--3dHighlight) var(--3dDarkShade) var(--3dDarkShade) var(--3dHighlight);
	margin-top: -10px;
}
app input[type="range"][disabled=""]::-webkit-slider-runnable-track{
	border-color: var(--mainColor) var(--3dHighlight) var(--3dHighlight) var(--mainColor);
	box-shadow: inset 0 1px var(--3dLightShade), inset 0 -1px var(--mainColor);
}
app input[type="range"][disabled=""]::-webkit-slider-thumb{
	box-shadow: inset -1px -1px var(--3dLightShade);
	border-color: var(--3dHighlight) var(--3dLightShade) var(--3dLightShade) var(--3dHighlight);
}


/* 	VERTICAL DATA SLIDERS  */
app input[type="range"].vertical.segmented{
	width: 30px;
	background: 
	repeating-linear-gradient(to right, transparent 0px, var(--mainColor) 4px, var(--mainColor) 26px, transparent 30px),
	repeating-linear-gradient(var(--3dDarkShade) 0px, transparent 1px, transparent 11px);
}

app input[type="range"].vertical::-moz-range-track {
	width: 2px;
	height: 100%;
/*	border-color: var(--3dLightShade) var(--3dHighlight) var(--3dHighlight) var(--3dLightShade);*/
  	box-shadow: inset 1px 0 var(--3dDarkShade), inset -1px 0 var(--mainColor);
}
app input[type="range"].vertical::-moz-range-thumb {
	height: 9px;
	width: 19px;
	transform: scaleY(-1);
}
app input[type="range"].vertical::-webkit-slider-thumb {
	height: 9px;
	width: 19px;
}

app input[type="range"].vertical {
	-webkit-appearance: slider-vertical;
	writing-mode: vertical-lr;
	transform: scaleY(-1);
}
app input[type="range"].vertical::-webkit-slider-runnable-track {
	width: 4px;
	border-color: var(--3dHighlight) var(--3dHighlight) var(--3dLightShade) var(--3dLightShade);
  	box-shadow: inset 1px 0 var(--3dDarkShade), inset -1px 0 var(--mainColor);
}
app input[type="range"].vertical::-webkit-slider-thumb {
	width: 21px !important;
	height: 11px !important;
	transform: scaleY(-1);
	margin-top: unset;
	margin-left: -9px;
}

/*  CHECKS AND RADIOS  */
app form li{
	position: relative;
	padding: 2px 0 2px 18px;
	height: 16px;
	list-style: none;
}
app form li label input[type="checkbox"], app form li label input[type="radio"]{
	visibility: hidden;
	width: 0;
	height: 0;
}
app form li label wincheckbox, app form li label winradio{
	box-sizing: border-box;
	width: 13px;
	height: 13px;

	position: absolute;
	top: 4px;
	left: 0;

	border: 1px solid;
	border-color: var(--3dLightShade) var(--3dHighlight) var(--3dHighlight) var(--3dLightShade);
	box-shadow: var(--insetBSLowerDark);
	display: inline-block;
	background-color: var(--contentColor);
}
app form li label winradio{
	border-radius: 100%;
}
app form li label wincheckbox:after{
	display: none;
	transform: rotate(-45deg);
	width: 2px;
	height: 4px;
	content: "";
	position: absolute;
	background-color: var(--contentText);
	top: 4px;
	left: 3px;
}
app form li label wincheckbox:before{
	display: none;
	transform: rotate(45deg);
	width: 2px;
	height: 6px;
	content: "";
	position: absolute;
	background-color: var(--contentText);
	top: 2px;
	right: 3px;
}
app form li label winradio:after{
	content: "";
	width: 5px;
	height: 5px;
	display: none;
	position: absolute;
	top: 3px;
	left: 3px;
	background-color: var(--contentText);
	border-radius: 100%;
}
app form li label input:checked + wincheckbox:after, app form li label input:checked + wincheckbox:before, app form li label input:checked + winradio:after{
	display: block;
}
app form li label input:disabled + wincheckbox, app form li label input:disabled + winradio{
	background-color: var(--mainColor);
}


/*  PROGRESS BARS  */
app progress {
	-webkit-appearance: none;
	-moz-appearance: progressbar;
	width: -webkit-fill-available;
	width: -moz-available;
	height: 7px;
	padding: 2px 3px 1px;

	border: 1px solid;
	border-color: var(--3dLightShade) var(--3dHighlight) var(--3dHighlight) var(--3dLightShade);
	border-radius: 0;
	background-color: var(--mainColor);
	box-shadow: var(--insetBSLowerDark);

	display: block;
	box-sizing: content-box;
}
app progress.tall {
	height: 15px;
}
app progress::-moz-progress-bar {
	background:repeating-linear-gradient(to right, var(--highlightColor) 0 6px, var(--mainColor) 6px 8px);
}
app progress::-webkit-progress-bar {
	background: transparent;
}
app progress::-webkit-progress-value {
	background:repeating-linear-gradient(to right, var(--highlightColor) 0 6px, var(--mainColor) 6px 8px);
}

grouper{
	border: 1px solid var(--3dLightShade);
	box-shadow: inset 1px 1px var(--3dHighlight), 1px 1px var(--3dHighlight);
	display: block;
	width:100%;
	padding:2px 5px 5px 5px;
}
grouper grouperHeading{
	margin-left: 4px;
	transform: translateY(-10px);
	display: inline-block;
	background: var(--mainColor);
	padding: 0 4px;
}
tab_ui grouper{
	width: auto;
	margin: 14px 0;
}

/* SCROLLBARS WEBKIT */
appcontents *::-webkit-scrollbar{
	background-image: 
	linear-gradient(45deg, var(--3dHighlight) 25%, transparent 26%),
	linear-gradient(135deg, var(--3dHighlight) 25%, transparent 26%),
	linear-gradient(45deg, transparent 75%, var(--3dHighlight) 76%),
	linear-gradient(135deg, var(--mainColor) 75%, var(--3dHighlight) 76%);
	background-position: 0 0, 1px 0, 1px -1px, 0 1px;
	background-size: 2px 2px;
	width: 16px;
	height: 16px;
}
appcontents *::-webkit-scrollbar-thumb{
	background: var(--mainColor);
	border: 1px solid;
	border-color: var(--raiseBoxDark);
	box-shadow: var(--insetBSRaiseLight);
}
appcontents *::-webkit-scrollbar-button{
	display: block;
	height: 16px;
	width: 16px;
	background: url("../../res/ui/classic/scroll_up_classic.png"), var(--mainColor);
	border: 1px solid;
	border-color: var(--raiseBoxDark);
	box-shadow: var(--insetBSRaiseLight);
}
appcontents *::-webkit-scrollbar-button:vertical:start:increment,
appcontents *::-webkit-scrollbar-button:vertical:end:decrement,
appcontents *::-webkit-scrollbar-button:horizontal:start:increment, 
appcontents *::-webkit-scrollbar-button:horizontal:end:decrement 
{
    display: none;
}
/*appcontents *::-webkit-scrollbar-button:vertical:start:decrement,
appcontents *::-webkit-scrollbar-button:vertical:end:increment,
appcontents *::-webkit-scrollbar-button:horizontal:start:decrement, 
appcontents *::-webkit-scrollbar-button:horizontal:end:increment{
	display: block;
}*/
appcontents *::-webkit-scrollbar-button:vertical:decrement{
	background: url("../../res/ui/classic/scroll_up_classic.png"), var(--mainColor);
}
appcontents *::-webkit-scrollbar-button:vertical:increment{
	background: url("../../res/ui/classic/scroll_down_classic.png"), var(--mainColor);
}
appcontents *::-webkit-scrollbar-button:horizontal:decrement{
	background: url("../../res/ui/classic/scroll_left_classic.png"), var(--mainColor);
}
appcontents *::-webkit-scrollbar-button:horizontal:increment{
	background: url("../../res/ui/classic/scroll_right_classic.png"), var(--mainColor);
}
appcontents *::-webkit-scrollbar-corner{
	background: var(--mainColor);
}
/* SCROLLBARS GECKO */
appcontents{
	scrollbar-color: var(--mainColor) var(--3dHighlight);
}
/* CHROMIUM MITIGATION - scrollbar color overrides more advanced webkit customization if present */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
	appcontents {
		scrollbar-color: unset !important;
	}
}
/* TABBED UI */

appcontents tab_ui{
	display: block;
	height: calc(100% - 52px);
	margin: 6px;
	margin-bottom: 26px;
}
appcontents tab_ui.nomargin{
	margin: 0;
	margin-bottom: 26px;
}
appcontents tab_ui tabholder{
	position: relative;
	z-index: 1;
}
appcontents tab_ui tabholder ul.tabs {
	margin: 0 0 -3px 2px;
	padding: 2px;
	font-size: 0;
}
appcontents tab_ui tabholder ul.tabs li{
	font-size: var(--contentFontSize);
	display: inline-block;
	list-style-type: none;
	border:1px solid;
	border-color: var(--3dHighlight) var(--3dDarkShade) var(--3dHighlight) var(--3dHighlight);
	box-shadow: inset -1px 0 var(--3dLightShade);
	padding: 0 5px;
	margin: 0 0px 0 0;
	border-radius: 3px 3px 0 0 ;
	background: var(--mainColor);
	color: var(--mainText);
}
appcontents tab_ui tabholder ul.tabs li.selected{
	margin: 0 0px 0 -2px;
	padding: 2px 7px 0 7px;
	border-color: var(--3dHighlight) var(--3dDarkShade) var(--mainColor) var(--3dHighlight);
}
appcontents tab_ui tabcontent{
	background: var(--mainColor);
	padding: 0 12px; 
	margin: 0;
	border: 1px solid;
	border-color: var(--3dHighlight) var(--3dDarkShade) var(--3dDarkShade) var(--3dHighlight);
	box-shadow: inset -1px -1px var(--3dLightShade);
	display: block;
	height: 100%;
	width: inherit;
	position: relative;
	overflow-y: auto;
	/* Hide scrollbar cross-browser */
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none;    /* Firefox */
}
appcontents tab_ui tabcontent::-webkit-scrollbar {
	display: none; /* Chrome, Safari, Opera */
}
appcontents tab_ui tabcontent:not(.selected){
	display: none;
}

/*dropdown box, also data input fields*/

appcontents select, input[type="text"], input[type="number"]{
	border:1px solid;
	border-color: var(--lowerBoxLight);
	box-shadow: var(--insetBSLowerDark);
	background: var(--contentColor);
	color: var(--contentText);
	font-size: var(--contentFontSize);
	font-family: var(--contentFont);
	padding: 3px 4px;
	margin: 1px 2px;
}
input[type="number"]{
	padding: 3px 1px 3px 4px;
}
input[type="text"]{
	height: 16px;
	padding: 2px 3px 1px 3px;
	margin: 2px;
	line-height: 16px;
	vertical-align: middle;
}
appcontents select:focus, input[type="number"]:focus, input[type="text"]:focus, input[type="range"]:focus{
	outline: 1px dotted var(--mainText);
}

/*list view box*/

appcontents scrollbox{
	display: block;
	border: 1px solid;
	border-color: var(--lowerBoxDark);
	box-shadow: var(--BSLowerLight);
	overflow-y: scroll;
	margin: 6px 0;
	padding: 0 4px;
	background: #fff;
}
app appcontents scrollbox li{
	display: block;
	vertical-align: middle;

}
app appcontents scrollbox li.highlighted{
	background: var(--highlightColor);
	color: var(--highlightText);
}
appcontents scrollbox li img{
	width: 16px;
	height: 16px;
	display: inline;
	vertical-align: middle;
	margin-right: 4px;
}

appcontents dialogbuttons{
	display: inline-block;
	right:0px;
	position: absolute;
	margin-top: 28px;
	margin-right: 6px;
}
appcontents dialogbuttons winbutton{
	margin: 2px 4px;
}
appcontents winbutton colorpicker{
	background:#585768;
}

balloonpopup {
	opacity: 0;
	animation: fadein 0.5s ease;
	animation-delay: 8s;
	animation-fill-mode: forwards;

	min-width: 32px;
	min-height: 32px;
	max-width: 240px;

	margin: 0;
	padding: 4px 5px 9px 11px;

	display: block;	
	position: absolute;
	bottom:33px;

	filter:drop-shadow(3px 3px 2px #00000099);
	background-color: #fffee8;
	color: #000;
	color: #000;
	color: black;
	border: 1px solid black;
	border-radius: 6px;
	font-size: var(--contentFontSize);
	text-align: left;
	right: 92px;
	z-index: 2;
}
@keyframes fadein {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

balloonpopup:before, balloonpopup:after{
	content: ' ';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    z-index: 2;
    right: 15px;
}
balloonpopup:before {
	bottom:-18px;
	border-width: 0 17px 18px 0;
	border-color: transparent #000 transparent transparent;
	transform: translateX(1px);

}
balloonpopup:after {
	bottom:-15px;
	border-width: 0 15px 15px 0;
	border-color: transparent #fffee8 transparent transparent;

}
balloonpopup *{
	/*outline: 1px solid red;*/
}
balloonpopup balloontitle{
	height: 16px;
	font-weight: 900;
	display: inline-block;
	line-height: 12px;
	vertical-align: middle;
	margin-top: -5px;
}
balloonpopup .balloonicon{
	padding: 0 8px 0 0;
	display: inline-block;
	width: 16px;
	height: 16px;
	line-height: 12px;
	vertical-align: middle;
}
balloonpopup closeballoon{
	display: block;
	position: absolute;
	right:5px;
	top:4px;
	width: 16px;
	height: 16px;
	padding: 0;

	border-radius: 2px;
	border: 1px solid #d0c9b6;
	background: #fffff7;

	line-height: 12px;
}
balloonpopup closeballoon img, taskbar balloonpopup closeballoon img{
	width: 14px;
	height: 14px;
	filter: invert(70%) sepia(100%);
	padding: 1px;
}
balloonpopup closeballoon:hover{
	border:1px solid white;
	box-shadow: 1px 1px 1px #b8b8a2, -1px -1px 0px #b8b8a266, inset -1px -1px 1px #b6700788, inset 1px 1px 0 #ffad31;
	background: radial-gradient(at 10% 10%, #fff6 0%, #fff0 33%), radial-gradient(at 80% 80%, #ffdc18 0%, #ffdc1800 40%), linear-gradient(#ffad31, #ffad31);
}
balloonpopup closeballoon:hover img, taskbar balloonpopup closeballoon:hover img{
	filter: none;
}

balloonpopup closeballoon:active{
	border:1px solid white;
	box-shadow: 1px 1px 1px #b8b8a2, -1px -1px 0px #b8b8a266, inset 1px 1px 1px #653c00;
	background: radial-gradient(at 0% 0%, #8c5200 0%, #8c520000 33%), radial-gradient(at 80% 80%, #eea600 0%, #eea60000 50%), linear-gradient(#cc7900, #cc7900);
}
balloonpopup closeballoon:active img, taskbar balloonpopup closeballoon:active img{
	filter: brightness(70%) sepia(100%);
}

balloonpopup span.messagetext{
	display: block;
	padding: 0 25px  0 0;
	line-height: 16px;
	color: #000;
}

/******* EXPLORER STUFF *******/

/* set app height bounds */
app appcontentholder {
	height: 100%;
	display: block;
}

/* EXPLORER SIDEBAR VIEW */

/* set grid layouting for explorer's specific case */
app appcontentholder.explorer {
	height: 100%;
	display: grid;
	grid-template-rows: min-content auto;
	grid-template-columns: 210px auto;
}
app appcontentholder.explorer appnavigation{
	grid-column: 1 / 3;
	grid-row: 1;
	min-width: 210px;
}
app appcontentholder.explorer.nosidebar{
	grid-template-columns: 0px auto;
}
app appcontentholder.explorer.nosidebar sidebarcontents{
	display: none;
}

app appcontentholder.explorer sidebarcontents{
	grid-column: 1;
	grid-row: 2;
	/*max-height: calc(100% - 107px);*/
	color:  var(--contentText);
	background: var(--contentColor);
	padding: 12px 12px 0;
	display: block;
	overflow-y: auto;
	overflow-x: hidden;
}
app appcontentholder.explorer sidebarcontents .sidebargroup{
	width: 100%;
	display: block;
	background: var(--mainColor);
	color: var(--bodyText);
	border-radius: 0;
	margin-bottom: 15px;
	height: auto;
}
app appcontentholder.explorer sidebarcontents .sidebargroup.collapsed{
	height: 25px;
	overflow: hidden;
	z-index: 1;
}
app appcontentholder.explorer sidebarcontents .sidebargroup.collapsed ul{
	opacity: 0;
	transform: translateY(-100%);
	/*height: 0;*/
	overflow: hidden;
	padding: 0;
	border: none;
	pointer-events: none;
	z-index: 0;
}
app appcontentholder.explorer sidebarcontents .sidebargroup.collapsed .collapser{
	transform: rotate(180deg);
}
app appcontentholder.explorer sidebarcontents .sidebargroup span{
	padding: 5px 13px 4px;
	display: inline-block;
	font-weight: 600;
	color: var(--mainText);
}
app appcontentholder.explorer sidebarcontents .sidebargroup .collapser{
	float: right;
	margin-top: 5px;
	margin-right: 6px;

	width: 15px;
	height: 15px;
	border-radius: 100%;
	background-color: none;
	border: none;
	box-shadow: none;
	text-shadow: none;
}
app appcontentholder.explorer sidebarcontents .sidebargroup .collapser span{
	padding: 0;
	font-weight: 700;
	transform: rotate(-90deg) scaleX(0.5) translateY(-2px);
	display: block;
	letter-spacing: -3px;
	z-index: 1;
	-webkit-font-smoothing: auto;
}
app appcontentholder.explorer sidebarcontents .sidebargroup ul{
	opacity: 1;
	transform: translateY(0%);
	display: block;
	background-color: var(--contentColor);
	padding: 9px 15px;
	margin: 0;
	border-width: 0 1px 1px 1px;
	border-style: solid;
	border-color: var(--mainColor);
	transition-property: opacity, transform;
	transition-duration: 0.3s;
	transition-timing-function: ease-out;
	list-style-type: none;
	height: initial;
}
app appcontentholder.explorer sidebarcontents .sidebargroup ul li{
	padding: 2px 0;
}
app appcontentholder.explorer sidebarcontents .sidebargroup ul li#parentfolder{
	/*display: none;*/
}
app appcontentholder.explorer sidebarcontents .sidebargroup.details ul li.name{
	font-weight: 600;
}
app appcontentholder.explorer sidebarcontents .sidebargroup:not(.details) ul li:hover{
	text-decoration: underline;
	cursor: url("../../res/ui/cursors/link.cur"), pointer;
}
app appcontentholder.explorer sidebarcontents .sidebargroup ul li img{
	vertical-align: middle;
	margin-right: 7px;
}
/* EXPLORER BROWSE ICONS */

appcontentholder.explorer fscontents {
	grid-column: 2;
	grid-row: 2;

	overflow-y: auto;
	display: block;
	/*max-height: calc(100% - 107px);*/
	padding-bottom: 20px;
}
appcontentholder.explorer items{
	display: flex;
	flex-wrap: wrap;
}

appcontentholder fscontents fsicon.spoof-folder icontitle{
	background-color: var(--highlightColor);
	color: var(--highlightText);
}