@import url("animation-webkit.css") screen;
@import url("animation-moz.css") screen;
@import url("dock.css") screen;
@import url("window.css") screen;

#head {
  visibility: visible !important;
  opacity: 1 !important;
}

/*-----------------------------------------------------------------------------------*/
/*	0.	CSS Reset
/*-----------------------------------------------------------------------------------*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } :focus { outline: 0; } ins { text-decoration: none; } del { text-decoration: line-through; } table { border-collapse: collapse; border-spacing: 0; }

::-moz-selection { background:rgba(124,196,255,0.7); }
::selection      { background:rgba(124,196,255,0.7); }

@font-face {
    font-family: "LucidaGrande";
    src: url("../fonts/lucidagrande.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

html, body {
    font-family: "LucidaGrande";
    font-size: 12px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: #000;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
	cursor:url(/assets/img/cursor/Arrow.png), auto;
}

a:hover {
	cursor:url(/assets/img/cursor/Arrow.png), auto;
}

abbr:hover {
	cursor:url(/assets/img/cursor/Arrow.png), auto;
 }
    .ui-draggable,
    .ui-draggable-handle,
    .ui-draggable-dragging {
    cursor: url(/assets/img/cursor/Arrow.png), auto;
}


/*-----------------------------------------------------------------------------------*/
/*  sad code to make it so that windows cannot cause boundary break
/*-----------------------------------------------------------------------------------*/

html, body {
	overflow: hidden !important;
	position: relative !important;
	scroll-behavior: auto !important;
}

/*-----------------------------------------------------------------------------------*/
/*	03.	Desktop
/*-----------------------------------------------------------------------------------*/

#page {
background: url(../img/Wallpaper.png) no-repeat center center;
background-size: cover;
width: 100%;
height: 100%;
position: absolute;
z-index: 0;
font-family: "LucidaGrande";
visibility: visible;
opacity: 1;
-moz-animation: none;
-webkit-animation: none;
}



#page.vis {
	visibility:visible;
	opacity:1;
	z-index:0;
	-moz-animation:none;
	-webkit-animation:none;
}
#head.vis {
	visibility:visible;
	opacity:1;
	z-index:1000;
	-moz-animation:none;
	-webkit-animation:none;
}
#head {
visibility: visible;
background: none;
background-image: url(../img/menubar.png);
background-repeat: repeat-x;
background-position: top;
background-size: auto 22px;
width: 100%;
height: 22px;
position: fixed;
z-index: 1000;
box-shadow: 0px 0px 10px #141414;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
backdrop-filter: blur(1.1px) brightness(1.50) saturate(2.10)

}




#head nav#menu-dx{
	position:absolute;
	right:10px;
	top:0;
	line-height:21px;
}
#head nav#menu-dx ul {
	margin:0;
	padding:0;
}
#head nav#menu-dx ul li {
	float:left;
	position:relative;
	height:21px;
}
#head nav#menu-dx ul li.timemachine a {
	background:url(../img/timemachine.png) 9px 2px no-repeat;
    display: block;
    position: relative;
    text-indent: -9999px;
	width:25px;
	height:21px;
	top:-2px;
	padding:0 4px;
}
#head nav#menu-dx ul li.bluetooth a {
background:url(../img/bluetooth.png) 12px 2px no-repeat;
display: block;
position: relative;
text-indent: -9999px;
width:25px;
height:21px;
top:-2px;
padding:0 0px;
}
#head nav#menu-dx ul li.wireless a {
background:url(../img/wireless.png) 10px 2px no-repeat;
display: block;
position: relative;
text-indent: -9999px;
width:25px;
height:21px;
top:-2px;
padding:0 4px;
}
#head nav#menu-dx ul li.volume a {
background:url(../img/volume.png) 9px 2px no-repeat;
display: block;
position: relative;
text-indent: -9999px;
width:25px;
height:21px;
top:-2px;
padding:0 3px;
}
#head nav#menu-dx ul li.battery a {
background:url(../img/battery.png) 6px 2px no-repeat;
display: block;
position: relative;
text-indent: -9999px;
width:25px;
height:21px;
top:-2px;
padding:0 8px;
}
#head nav#menu-dx ul li.spotlight a {
background:url(../img/spotlight.png) 1px 2px no-repeat;
display: block;
position: relative;
text-indent: -9999px;
width:25px;
height:21px;
top:-2px;
padding:0 2px;
}
#head nav#menu-dx ul li.notifications a {
background:url(../img/notifications.png) 2px 2px no-repeat;
display: block;
position: relative;
text-indent: -9999px;
width:25px;
height:21px;
top:-2px;
padding:0 4px;
}
#head nav#menu-dx ul li.username a {
font-weight: bold;
font-size:14px;
padding: 1px 21px 0 ;
}
#head nav#menu-dx ul li.time {
	font-size:14px;
	color:#000;
	text-shadow: 0 1px 1px #dbdbdb;
	padding: 1px 0px 0 ;
	margin-right: -5px;
}
#head nav#menu-dx ul li.time #DateAbbr {
	padding-right:5px;
}
#head nav#menu-dx ul li a {
	display:block;
	color:#000;
	font-size:13px;
	text-decoration:none;
	text-shadow: 0 1px 1px #dbdbdb;
	padding:0 5px;
	font-weight:400;
}

#head nav#menu{
	position:absolute;
	left:10px;
	top:0;
	line-height:21px;
}
#head nav#menu ul {
	margin:0;
	padding:0;
}
#head nav#menu ul li {
	float:left;
	position:relative;
	height:21px;
}
#head nav#menu ul li.apple a {
	background:url(../img/apple-logo.png) no-repeat 10px 1px;
    display: block;
    position: relative;
    text-indent: -9999px;
    top: 0;
	padding:0 10px 0 10px;
    width: 20px;
	height: 21px;
}
#head nav#menu ul li a {
display: block;
color: #000;
font-size: 14px;
text-decoration: none;
text-shadow: 0 1px 1px #dbdbdb;
padding: 0 9px;
font-weight: 400;
line-height: 23px;
}

#head nav#menu ul li.here a {
font-weight: bold;
}

#head nav#menu ul li.active {
background: #7793f5;
background: -moz-linear-gradient(top, #7793f5 0%, #406df2 50%, #275af1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7793f5), color-stop(50%, #406df2), color-stop(100%, #275af1));
border-bottom: 1px solid #1746d7;
}

#head nav#menu ul li.active {
background: #7793f5;
background: -moz-linear-gradient(top, #7793f5 0%, #406df2 50%, #275af1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7793f5), color-stop(50%, #406df2), color-stop(100%, #275af1));
border-bottom: 1px solid #1746d7;
}

#head nav#menu ul li.active a {
color: #fff;
text-shadow: none;
}

#head nav#menu ul li.apple.active a {
background-position: 10px -19px;
}

#head nav#menu ul li ul.sublist {
float: left;
left: 0;
top: 22px;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7);
border-radius: 0 0 5px 5px;
visibility: hidden;
display: none;
z-index: 99;
}

#head nav#menu ul li.active > ul.sublist {
visibility: visible;
display: block;
}

#head nav#menu ul li ul.sublist li a {
display: block;
padding: 6px 12px;
color: #000;
text-decoration: none;
}

#head nav#menu ul li ul.sublist li:hover {
background: #7793f5;
background: -moz-linear-gradient(top, #7793f5 0%, #406df2 50%, #275af1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7793f5), color-stop(50%, #406df2), color-stop(100%, #275af1));
border-bottom: 1px solid #1746d7;
}

#head nav#menu ul li ul.sublist li:hover a {
color: #fff;
text-shadow: none;
}

#head nav#menu ul li ul.sublist li.active,
#head nav#menu ul li ul.sublist li.active a {
background: #7793f5;
background: -moz-linear-gradient(top, #7793f5 0%, #406df2 50%, #275af1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7793f5), color-stop(50%, #406df2), color-stop(100%, #275af1));
border-bottom: 1px solid #1746d7;
color: #fff;
text-shadow: none;
}

#head nav#menu ul li:hover > ul.sublist,
#head nav#menu ul li ul.sublist:hover,
#head nav#menu ul li ul.sublist li:hover > ul.sublist-menu,
#head nav#menu ul li ul.sublist li ul.sublist-menu:hover {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition-delay: 0s;
}

#head nav#menu ul li ul.sublist li.active > ul.sublist-menu {
visibility: visible;
display: block;
}

#head nav#menu ul li ul.sublist li ul.sublist-menu li:hover,
#head nav#menu ul li ul.sublist li ul.sublist-menu li.active {
background: #7793f5;
background: -moz-linear-gradient(top, #7793f5 0%, #406df2 50%, #275af1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7793f5), color-stop(50%, #406df2), color-stop(100%, #275af1));
border-bottom: 1px solid #1746d7;
}

#head nav#menu ul li ul.sublist li ul.sublist-menu li:hover a,
#head nav#menu ul li ul.sublist li ul.sublist-menu li.active a {
color: #fff;
text-shadow: none;
}

#head nav#menu ul li.active a {
color: #fff;
text-shadow: none;
}

#head nav#menu ul li.apple a {
background-position: 10px 1px;
}

#head nav#menu ul li.apple.active a,
#head nav#menu ul li.apple.active:hover a {
background-position: 10px -19px;
}

#head nav#menu ul li.apple:hover:not(.active) a {
background-position: 10px 1px;
}


#head nav#menu ul li ul.sublist {
	float: left;
    left: 0;
	top:22px;
	width: 200px;
	list-style:none;
    margin: 0;
    padding: 0;
    position: absolute;
	background:rgba(255,255,255,0.95);
	box-shadow:0 6px 12px rgba(0,0,0,0.7);
	border-radius:0 0 5px 5px;
	visibility:hidden;
}
#head nav#menu ul li ul.sublist li {
    clear: both;
    padding: 0;
	margin:0;
	padding:0 0 0 22px;
	width: 178px;
	font-size:14px;
	line-height:20px;
}
#head nav#menu ul li:hover ul.sublist {
	visibility:visible;
}
#head nav#menu ul li ul.sublist li:hover {
	color:#fff;
	width: 178px;
}
#head nav#menu ul li ul.sublist li a {
	color:#000;
	text-indent:0;
    width: 200px;
	background-image:none;
	padding:0;
	font-weight:normal;
	display:block;
}
#head nav#menu ul li ul.sublist li:hover a {
	color:#fff;
}
#head nav#menu ul li ul.sublist li:first-child {
	margin:5px 0 0 0;
}
#head nav#menu ul li ul.sublist li:last-child {
	margin:0 0 5px 0;
}
#head nav#menu ul li ul.sublist li.divider {
	border-top:1px solid #e2e2e2;
	height:1px;
	width: 178px;
	background:none;
	margin:5px 0 4px 0;
}
#head nav#menu ul li ul.sublist li.divider:hover {
	border-top:1px solid #e2e2e2;
}
#head nav#menu ul li ul.sublist li:hover {
	border:none;
}
#head nav#menu ul li ul.sublist li.disable {
	color:#969696;
}
#head nav#menu ul li ul.sublist li.disable:hover {
	background:none;
}
#head nav#menu ul li ul.sublist li span.arrow {
	position:relative;
	display:inline-block;
	width:0;
	height:0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left:9px solid rgba(0,0,0,0.5);
	top:5px;
	right:10px;
	text-indent:-9999px;
	float:right;
}
#head nav#menu ul li ul.sublist li:hover span.arrow {
	border-left-color:#fff;
}
#head nav#menu ul li ul.sublist li.disable span.arrow, #head nav#menu ul li ul.sublist li.disable:hover span.arrow {
	border-left-color:rgba(0,0,0,0.35);
}
#head nav#menu ul li ul.sublist li ul.sublist-menu {
	float: left;
    left: 100%;
	top:-5px;
	list-style:none;
    margin: 0;
    padding: 0;
    position: absolute;
	background:rgba(255,255,255,0.95);
	box-shadow:4px 9px 12px rgba(0,0,0,0.7);
	border-radius:0 5px 5px 5px;
	visibility:hidden;
	color:#000;
}
#head nav#menu ul li ul.sublist li ul.sublist-menu li {
    clear: both;
    padding: 0;
	margin:0;
	padding:0 0 0 22px;
	width:200px;
	font-size:14px;
	line-height:20px;
}
#head nav#menu ul li ul.sublist li:hover ul.sublist-menu {
	visibility:visible;
}
#head nav#menu ul li ul.sublist li ul.sublist-menu li:hover {
	color:#fff;
}
#head nav#menu ul li ul.sublist li ul.sublist-menu li:first-child {
	margin:5px 0 0 0;
}
#head nav#menu ul li ul.sublist li ul.sublist-menu li:last-child {
	margin:0 0 5px 0;
}
#head nav#menu ul li ul.sublist li ul.sublist-menu li.divider {
	border-top:1px solid #e2e2e2;
	height:1px;
	background:none;
	margin:5px 0 4px 0;
}
#head nav#menu ul li ul.sublist li ul.sublist-menu li.divider:hover {
	border-top:1px solid #e2e2e2;
}
#head nav#menu ul li ul.sublist li ul.sublist-menu li:hover {
	border:none;
}
#head nav#menu ul li ul.sublist li ul.sublist-menu li.disable {
	color:#969696;
}
#head nav#menu ul li ul.sublist li ul.sublist-menu li.disable:hover {
	background:none;
}

a.button.about {
	width:118px;
}
a.button {
	display: inline-block;
	height: 16px;
	line-height: 16px;
	font-size: 11px;
	border-radius: 4px;
	border:1px solid #9a9a9a;
	text-decoration: none;
	font-family: "Lucida Grande", "Lucida Sans Unicode", sans-serif;
	font-weight:normal;
	color: #000;
	text-shadow: 0 1px 0 rgba(255,255,255,0.09);
	background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0, #EBEBEB),color-stop(0.5, #ECECEC),color-stop(0.5, #F3F3F3),color-stop(1, #FFFFFF));
	background-image:-moz-linear-gradient( center bottom, #EBEBEB 0%, #ECECEC 50%, #F3F3F3 50%, #FFFFFF 100%);
	box-shadow:inset 0 1px 0 rgba(255,255,255,1), 0 1px 0 rgba(0,0,0,0.09);
}

a.button:active {
	box-shadow:inset 0 16px 0 rgba(0,115,215,0.3), inset 0 1px 0 rgba(255,255,255,1), 0 1px 0 rgba(0,0,0,0.09);
	background-image:-webkit-gradient( linear, left bottom, left top, color-stop(0, #D3F7FD), color-stop(0.5, #87C5FB), color-stop(0.5, #A1D1F9), color-stop(1, #D4E9FC));
	background-image:-moz-linear-gradient( center bottom, #D3F7FD 0%, #87C5FB 50%, #A1D1F9 50%, #D4E9FC 100% );
	border-top-color:#5a5caf;
	border-bottom-color:#52536f;
	border-left-color:#56578f;
	border-right-color:#56578f;
}

a.button.blink {
	height: 19px;
	line-height: 19px;
	font-size: 12px;
	text-align:center;
	float:right;
	margin:10px 0 10px 15px;
	padding:0 20px;
	box-shadow:inset 0 19px 0 rgba(0,115,215,0.3), inset 0 1px 0 rgba(255,255,255,1), 0 1px 0 rgba(0,0,0,0.09);
	background-image:-webkit-gradient( linear, left bottom, left top, color-stop(0, #D3F7FD), color-stop(0.5, #87C5FB), color-stop(0.5, #A1D1F9), color-stop(1, #D4E9FC));
	background-image:-moz-linear-gradient( center bottom, #D3F7FD 0%, #87C5FB 50%, #A1D1F9 50%, #D4E9FC 100% );
	border-top-color:#5a5caf;
	border-bottom-color:#52536f;
	border-left-color:#56578f;
	border-right-color:#56578f;
	-webkit-animation:blinking 1s infinite ease-in-out;
	-moz-animation:blinking 1s infinite ease-in-out;
}
a.button.simple {
	height: 19px;
	line-height: 19px;
	font-size: 12px;
	text-align:center;
	float:right;
	margin:10px 0 10px 15px;
	padding:0 20px;
	box-shadow:inset 0 1px 0 rgba(255,255,255,1), 0 1px 0 rgba(0,0,0,0.09);
	background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0, #EBEBEB),color-stop(0.5, #ECECEC),color-stop(0.5, #F3F3F3),color-stop(1, #FFFFFF));
	background-image:-moz-linear-gradient( center bottom, #EBEBEB 0%, #ECECEC 50%, #F3F3F3 50%, #FFFFFF 100%);
}
a.button.blink:active, a.button.simple:active {
	box-shadow:inset 0 19px 0 rgba(0,115,215,0.3), inset 0 1px 0 rgba(255,255,255,1), 0 1px 0 rgba(0,0,0,0.09);
	background-image:-webkit-gradient( linear, left bottom, left top, color-stop(0, #D3F7FD), color-stop(0.5, #87C5FB), color-stop(0.5, #A1D1F9), color-stop(1, #D4E9FC));
	background-image:-moz-linear-gradient( center bottom, #D3F7FD 0%, #87C5FB 50%, #A1D1F9 50%, #D4E9FC 100% );
	border-top-color:#5a5caf;
	border-bottom-color:#52536f;
	border-left-color:#56578f;
	border-right-color:#56578f;
	-moz-animation:none;
	-webkit-animation:none;
}

@-webkit-keyframes blinking {
	0% { -webkit-box-shadow:inset 0 19px 0 rgba(0,115,215,0), inset 0 1px 0 rgba(255,255,255,1), 0 1px 0 rgba(0,0,0,0.09);}
	50% { -webkit-box-shadow:inset 0 19px 0 rgba(0,115,215,0.2), inset 0 1px 0 rgba(255,255,255,1), 0 1px 0 rgba(0,0,0,0.09);}
	100% { -webkit-box-shadow:inset 0 19px 0 rgba(0,115,215,0), inset 0 1px 0 rgba(255,255,255,1), 0 1px 0 rgba(0,0,0,0.09); }
}

@-moz-keyframes blinking {
	0% { -moz-box-shadow:inset 0 19px 0 rgba(0,115,215,0), inset 0 1px 0 rgba(255,255,255,1), 0 1px 0 rgba(0,0,0,0.09);}
	50% { -moz-box-shadow:inset 0 19px 0 rgba(0,115,215,0.2), inset 0 1px 0 rgba(255,255,255,1), 0 1px 0 rgba(0,0,0,0.09);}
	100% { -moz-box-shadow:inset 0 19px 0 rgba(0,115,215,0), inset 0 1px 0 rgba(255,255,255,1), 0 1px 0 rgba(0,0,0,0.09); }
}


/*-----------------------------------------------------------------------------------*/
/*	04.	Support Browser
/*-----------------------------------------------------------------------------------*/

#fail {
	background: url(../img/gradient.png) no-repeat center, url(../img/background.png) repeat left top #000;
	width:100%;
	height:100%;
	position:absolute;
	z-index:0;
	visibility:hidden;
}

#fail .fail-browser-logo {
	position:absolute;
	width:120px;
	height:120px;
	left:50%;
	top:50%;
	margin-left:-60px;
	margin-top:-60px;
	margin-bottom:60px;
}
#fail.visible {
	visibility:visible;
}
#fail .fail-browser {
	position:absolute;
	left:50%;
	top:70%;
	width:1100px;
	margin-left:-550px;
	text-align:center;
	font-size:24px;
	line-height:40px;
	color:rgba(0,0,0,0.69);
	text-shadow:0 1px 1px rgba(153,153,153,0.45);
}
#fail .fail-browser a {
	text-decoration:none;
	color:rgba(190,190,190,0.95);
	text-shadow:0 1px 1px rgba(153,153,153,0.45);
}
#fail .fail-browser a:hover {
	text-shadow:0 0px 5px rgba(153,153,153,0.95);
}

#buttons .container-inside {
display: grid;
grid-template-columns: repeat(4, 88px);
grid-auto-rows: 31px;
gap: 60px;
overflow-y: scroll;
max-height: 301px;
padding: 44px 90px 44px 10px;
justify-content: start;
position: relative;


scrollbar-width: none;
-ms-overflow-style: none;
}

#buttons .container-inside::-webkit-scrollbar {
display: none;
}

#buttons .container-inside img,
#buttons .container-inside a img {
width: 88px;
height: 31px;
object-fit: contain;
display: block;
border: none;
margin: 0;
padding: 0;

box-shadow:
0 0 0 6px white,
0 0 3px 8px #7b7b7b;
}

#buttons .container {
background: white !important;
min-height: 9200px;
}