/*
.................................

I DO KNOW THIS IS A MESS
Please don't look
waah waah
uee ueu e ue
I'm going to cry
if you keep scrolling through this.
Do you want to make me cry?
...
Oh. Okay... oka y. ...

.................................
*/

* {
	box-sizing: border-box;
	cursor: url("stuff/next/cursor.png"), default;
}

body {
	background-color: #555577;
	overflow: hidden;
}

.container {
	margin-left: -25px;
}

p {
	font-family: Helvetica, "Times New Roman", Calibri;
}

h5 {
	font-family: Helvetica, "Times New Roman", Calibri;
	margin-top: -14px;
}

figcaption {
	font-family: Helvetica, "Times New Roman", Calibri;
	margin: -4px -9px 7px -9px;
}

figcaption#selected {
	margin-left: 7px;
	margin-right: 7px;
	width: 50px;
	background-color: #FFF;
}

/*
|  IMAGES  |
|   AND    |
|  ICONS   |
*/

figure { 
	display: inline-block;
	text-align: center;
	margin-top: 4px;
	margin-right: 43px;
	margin-left: 42.5px;
}

figure.lib {
	margin-right: 57px;
	margin-left: 57px;
}

.icon:active {
	border-radius: 5px;
	background-color: white;
}

.arrow {
	margin: 0 -14px 20px -15px;
}

.current {
	border-radius: 5px;
	background-color: white;
}

#NX {
	position: absolute;
	right: 2px;
	top: 1px;
	z-index: 9;
}

#email {
	position: absolute;
	right: 2px;
	top: 65px;
	z-index: 9;
}

#library {
	position: absolute;
	right: 2px;
	top: 130px;
	z-index: 9;
}

#edit {
	position: absolute;
	right: 2px;
	top: 195px;
	z-index: 9;
}

#bin {
	position: absolute;
	right: 2px;
	bottom: 1px;
	z-index: 9;
}

/*
[ Workspace  >]
[ and        >]
[ Icons      >]
*/

h5.edit {
	margin-top: 2px;
	margin-left: 2px;
}

.edit-col {
	position: fixed;
	border: 1px solid black;
	width: 100px;
	height: 211px;
	margin: 0 auto;
	left: 10px;
	top: 5px;
	background-color: #AAAAAA;
	z-index: 10;
}

.top-0 {
	border-width: 1px 1px 1px 1px;
	border-style: solid;
	border-color: #FFF #565656 #565656 #FFF;
	height: 21px;
	color: #FFF;
	background-color: #000;
}

.top-x {
	border-width: 1px 1px 2px 1px;
	border-style: solid;
	border-color: #FFF #565656 #000 #FFF;
	height: 21px;
}

.x {
	margin-top: 1px;
	margin-left: 3px;
}

.x-shortcut {
	font-size: 14px;
	text-align: right;
	margin: 0;
	margin-right: 5px;
	float: right;
}

.top-p {
	border-width: 1px 1px 2px 1px;
	border-style: solid;
	border-color: #FFF #565656 #000 #FFF;
	height: 21px;
}

.p {
	margin-top: 1px;
	margin-left: 3px;
	color: gray;
}

.p-shortcut {
	font-size: 14px;
	text-align: right;
	margin: 0;
	margin-right: 5px;
	float: right;
	color: gray;
}

.top-x:active {
	background-color: #FFF;
}

.arrow-x {
	margin-right: 5px;
	margin-top: 5px;
	float: right;
}

/*
 _____________________
[  Navigation Viewer  ]
*/

#container-1 {
  position: absolute;
	border: 1px solid #000;
	width: 550px;
	height: 420px;
	margin: 0 auto;
	margin-top: 35px;
	left: 10%;
	background-color: #AAAAAA;
	z-index: 1;
}

#top-1 {
	border: 1px outset #AAAAAA;
	height: 21px;
	text-align: center;
	color: #000;
	background-color: #AAAAAA;
}

.square-1 {
	position: relative;
	border-width: 1px 1px 1px 1px;
	border-style: solid;
	border-color: #FFF #000 #000 #FFF;
	width: 15px;
	height: 15px;
	left: 2px;
	top: 2px;
	background: url("stuff/next/minimize.png") no-repeat;
	background-size: 15px 15px;
	background-color: #AAAAAA;
}

.first-col {
	border-top: 1px solid #000;
	padding: 15px;
	padding-left: 30px;
	height: 75px;
}

.mbits {
	font-size: 12px;
	color: gray;
	margin: 0;
	margin-left: 8px;
	margin-bottom: -7px;
}

.second-col {
	border-width: 2px 1px 1px 2px;
	border-style: solid;
	border-color: #000 #FFF #FFF #000;
	text-align: left;
	height: 100px;
	margin: 8px;
	overflow: scroll;
	overflow-y: hidden;
}

.third-col {
	direction: rtl;
	border-width: 2px 1px 1px 2px;
	border-style: solid;
	border-color: #000 #FFF #FFF #000;
	text-align: left;
	height: 173px;
	margin: 8px;
	overflow: scroll;
	overflow-x: hidden;
}

p.folder:active {
	background-color: #FFF;
}

p#selected {
	background-color: #FFF;
}

.fake-scrollbar {
	position: absolute;
	border-width: 1px 1px 0px 1px;
	border-style: solid;
	border-color: #000 #FFF #FFF #000;
	width: 512px;
	height: 19px;
	margin-left: 28px;
	top: 372px;
	background: url("stuff/next/bar2_extra_h.png") left no-repeat,
			url("stuff/next/bar2_extra_h.png") right no-repeat,
			url("stuff/next/bar2_h.png") repeat;
}

/*
 ______________________
[  next.rtf -- Window  ]
*/
#container-2 {
	position: relative;
	border: 1px solid #000;
	width: 740px;
	height: 600px;
	left: 635px;
	background-color: #AAAAAA;
	z-index: 3;
}

#top-2 {
	border: 1px outset #AAAAAA;
	height: 21px;
	text-align: center;
	color: #FFF;
	background-color: #000;
}

.square-2 {
	position: absolute;
	border-width: 1px 1px 1px 1px;
	border-style: solid;
	border-color: #FFF #000 #000 #FFF;
	width: 15px;
	height: 15px;
	right: 3px;
	top: 3px;
	background: url("stuff/next/x.png") no-repeat;
	background-size: 15px 15px;
	background-color: #AAAAAA;
}

.rtf {
	font-family: Helvetica, "Times New Roman", Calibri;
	direction: rtl;
	position: relative;
	border: 1px solid #000;
	width: 740px;
	height: 574px;
	left: -1px;
	padding: 5px;
	background-color: #FFF;
	overflow: scroll;
	overflow-x: hidden;
}

.rtf:focus {
	outline: none;
}

.mirror {
	direction: ltr;
	cursor: url("stuff/next/text.png"), text;
}

.mirror2 {
	direction: ltr;
}

/*
 / / / / / / / / /
 / / / Custm / / /
 / / Scrollbar / /
 / / / / / / / / /
*/

::-webkit-scrollbar {
	width: 19px;
	height: 19px;
}

::-webkit-scrollbar-corner {
	background: #AAAAAA;
}


@supports not selector(::-webkit-scrollbar) {
  html {
     scrollbar-color: silver gray;
  }
}

/* |||||| VERTICAL |||||| */

::-webkit-scrollbar-track:vertical {
	border-right: 1px solid #000;
	background: url("stuff/next/bar2_extra.png") top no-repeat,
			url("stuff/next/bar2_extra.png") bottom no-repeat,
			url("stuff/next/bar2.png") repeat;
	background-color: #808080;
}

::-webkit-scrollbar-thumb:vertical {
	border-right: 1px solid #000;
	background: url("stuff/next/scrollbar_center.png") center no-repeat,
			url("stuff/next/scrollbar_top.png") top no-repeat,
			url("stuff/next/scrollbar_bottom.png") bottom no-repeat,
			url("stuff/next/scrollbar.png") repeat;
	background-color: #AAAAAA;
}

::-webkit-scrollbar-button:end:vertical {
	border-right: 1px solid #000;
	height: 18px;
	width: 19px;
	display: block;
}

::-webkit-scrollbar-button:end:vertical:decrement {
	background: url("stuff/next/up.png") no-repeat;
	background-color: #AAAAAA;
}

::-webkit-scrollbar-button:end:vertical:increment {
	background: url("stuff/next/down.png") no-repeat;
	background-color: #AAAAAA;
}

/* ------ HORIZONTAL ------ */

::-webkit-scrollbar-track:horizontal {
	border-top: 1px solid #000;
	background: url("stuff/next/bar2_extra_h.png") left no-repeat,
			url("stuff/next/bar2_extra_h.png") right no-repeat,
			url("stuff/next/bar2_h.png") repeat;
	background-color: #808080;
}

::-webkit-scrollbar-thumb:horizontal {
	border-top: 1px solid #000;
	background-color: #AAAAAA;
}

/*
________________

IMAGES
________________
*/

/*
- - - - - -

IMAGE 1

- - - - - -*/


.container-image-1 {
	position: relative;
	text-align: right;
	border: 1px solid #000;
	width: 397px;
	height: 409px;
	margin: 0 auto;
	bottom: 125px;
	left: -595px;
	background: url("stuff/next/bars-1.png") bottom left;
	background-color: #AAAAAA;
}

.top-image-1 {
	border: 1px outset #AAAAAA;
	height: 21px;
	text-align: center;
	background-color: #AAAAAA;
}

#image-1 {
	border: 1px solid #000;
	border-right: 0px;
	width: 377px;
	height: 368px;
}

/*
-- -- -- --

IMAGE 2

-- -- -- --
*/

.container-image-2 {
	position: relative;
	text-align: right;
	border: 1px solid #000;
	width: 370px;
	height: 492px;
	left: 602px;
	bottom: 601px;
	margin: 0 auto;
	background: url("stuff/next/bars-2.png") bottom left;
	background-color: #AAAAAA;
}

.top-image-1 {
	border: 1px outset #AAAAAA;
	height: 21px;
	text-align: center;
	background-color: #AAAAAA;
}

#image-2 {
	border: 1px solid #000;
	border-right: 0px;
	width: 350px;
	height: 451px;
}

/*
--- --- ---

IMAGE 3

--- --- ---
*/

.container-image-3 {
	position: relative;
	text-align: right;
	border: 1px solid #000;
	width: 420px;
	height: 325px;
	left: 678px;
	bottom: 1454px;
	margin: 0 auto;
	background: url("stuff/next/bars-3.png") bottom left;
	background-color: #AAAAAA;
}

.top-image-1 {
	border: 1px outset #AAAAAA;
	height: 21px;
	text-align: center;
	background-color: #AAAAAA;
}

#image-3 {
	border: 1px solid #000;
	border-right: 0px;
	width: 400px;
	height: 284px;
}