@font-face {
    font-family: DOS;
    src: url("../fonts/PerfectDOSVGA437.woff");
}
body{
	margin: 0px;
	padding: 0px;
	background-color: rgb(192,192,192);
}
#window-top{
	box-sizing: border-box; 
	background-color: rgb(160,200,240);
	background-image: url("../img/fm-top-full-700px.png");
	overflow: hidden;
	height: 22px;
	text-align: center;
	padding-top: 2px;
	font-family: Sarabun;
	font-weight: bold;
	font-size: 14px;
	letter-spacing: 0.5px;
	display: block;
	position: relative;
}
#window-main{
	box-sizing: border-box; 
	overflow-y: auto;
	overflow-x: hidden;
	background-color: rgb(255,255,255);
	padding-top: 5px;
	padding-bottom: 5px;
	width: 692px;
	margin: 4px;
	display: block;
	position: relative;
	/*min-height: 100px;*/
	max-height: calc(82% - 27px);
}
#window-main hr{
	width: 95%;
	border: 0; 
  	height: 1px; 
  	background-image: -webkit-linear-gradient(left, rgb(140,140,140), rgb(20,20,20), rgb(140,140,140));
  	background-image: -moz-linear-gradient(left, rgb(140,140,140), rgb(20,20,20), rgb(140,140,140));
  	background-image: -ms-linear-gradient(left,rgb(140,140,140), rgb(20,20,20), rgb(140,140,140));
  	background-image: -o-linear-gradient(left, rgb(140,140,140), rgb(20,20,20), rgb(140,140,140));*
}
#window-main #footer{
	font-family: Arimo;
	font-size: 11px;
	display: block;
	width: 95%; /* same as the hr */
	margin: 0 auto;
}
#window-main a, #window-abar a{
	color: rgb(0,0,0);
	text-decoration: none;
}
#window-main  .info_i{
	font-family: DOS, sans-serif;
	font-size: 12px;
	padding: 2px 4px 1px 4px;
	border-radius: 2px;
	color: rgb(255,255,255);
	background-color: rgb(0, 85, 205);
	box-shadow: inset 0px 0px 0px 1px rgb(255,255,255);
    border: 2px solid rgb(0, 85, 205);
	transition: 0.3s ease;
}
#window-main  .info_i:hover{ 
	border: 2px solid rgb(155, 205, 255); 
	background-color: rgb(155, 205, 255);
	color: rgb(0,0,0);
}
#window-main .button_c {
	border: 1px solid rgb(0,0,0);
	border-radius: 3px;
	text-align: center;
	padding: 3px 1px 1px 3px; /* top right bottom left*/
	margin: 0px;
	font-family: DOS, sans-serif;
	font-size: 12px;
	text-shadow:-1px -1px 0 rgba(0,0,0,0.3);
	color: rgb(255,255,255);
	display: inline-block;
	background-color: rgb(109,109,109);
	transition: 0.3s ease;
}
#window-main .button_c:hover {
	border: 1px solid rgb(119,119,119);
	color: rgb(0,0,0);
	background-color: rgb(221,221,221);
	cursor: pointer;
}
.button_gry2{
	margin-top: 2px;
	margin-bottom: 2px;
	color: rgb(0,0,0);
	border: 1px dashed rgba(0,0,0,0.7);
	background-color: rgb(255,255,255);
	padding: 2px 5px; /* top right bottom left*/
	border-radius: 3px;
	font-family: "Microsoft Sans Serif",Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	transition: 0.3s ease;
}
.button_gry2:hover{ background-color: rgb(160,200,240); border: 1px solid rgba(0,0,0,1); color: rgb(255,255,255);}
#window-main .smallprint{ font-size: 8px; }
#filler0{
	box-sizing: border-box; 
	height: 17px;
	display: block;
}
#filler{
	height: 29px;
	display: block;
}
#window-abar{
	box-sizing: border-box; 
	background-color: rgb(255,255,255);
	overflow: hidden;
	height: 21px;
	width: 692px;
	margin: 0 auto;
	display: block;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	position: absolute;
	display: block;
	left: 4px;
	top: 22px;
	z-index: 5;
}
#window-abar #content{
	font-family: Arimo;
	font-size: 14px;
	text-shadow: none;
	padding-left: 5px;
	padding-top: 2px;
	display: inline-block;
}
#window-abar #content a:hover{
	color: rgb(0,0,220);
	text-decoration: underline;
}
#window-bottom{
	overflow: hidden;
	height: 4px;
	background-image: url("../img/700px_border.png");
}
.window-part{
	width: 700px;
	background-color: rgb(192,192,192); /* shows a grey background until page has loaded (which it does pretty quickly) */
	border: 0;
}
#window-container{
	padding: 0px;
	margin: 30px auto 0; /* Which is shorthand for: margin: 30px auto 0 auto [top] [right] [bottom] [left]; */
	position: relative;
	width: 700px;
	max-height: calc(92% - 50px); /* 50px is height of menubar */
	/* the box-shadow creates the margin on the left and right that emulates the win3.1 window border */
	box-shadow:
	/* left side */
	inset 1px 0px 0px 0px #000,
	inset 3px 0px 0px 0px rgb(192,192,192),
	inset 4px 0px 0px 0px #000,
	/* right side */
	inset -1px 0px 0px 0px #000,
	inset -3px 0px 0px 0px rgb(192,192,192),
	inset -4px 0px 0px 0px #000;
    /*10px 10px 7px rgba(0,0,0,0.5);*/   /* this is the 'proper' shadow but at the moment I think it looks better without it */
}
#user-data{
	/* This border and inner shadow replicates the "3d effect" of the status bar in e.g. file manager. The FM looks 
	 * different anyway though because of font and fields, but this gets the look closer at least */
	border-top: 1px solid #000;
    box-shadow: inset 0px 1px rgb(248,252,248);
	background: rgb(192,192,192);
	font-family: Arimo;
	font-size: 10px;
	font-weight: normal;
	margin-left : 0px;
	color: black;
	position: absolute;
	bottom: 4px;
	left: 4px;
	width: 685px;
	height: 27px;
	overflow-y: hide;
	padding-top: 5px;
	padding-right: 7px;
	text-align: right;
}
#user-data .user-data-line{	margin-left: 5px;}
#user-data .emph { font-weight: 600;}
.content-container{
	padding-left: 0px;
	width: 675px;
}
#menu-bar{
	display: block;
	width: 700px;
	height: 50px;
	margin: 10px auto 0;
	/*padding: 5px;*/
	text-align: justify;
}
#menu-bar .item{
	display: inline-block;
	*display: inline;
	width: 70px;
	/*margin: 3px;*/
	top: 0px;
	position: relative;
	zoom: 1
}
#menu-bar .stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}
#menu-bar .item:hover > div.iconholder{
	filter: grayscale(100%) contrast(200%);
	transition: 0.3s ease;
}
#menu-bar .item:hover > div.textholder{
	background: rgb(172,172,172);
	background: linear-gradient(9deg, rgba(172,172,172,1) 0%, rgba(255,255,255,1) 100%);
	border: 1px solid rgb(80,80,80);
	transition: 0.3s ease;
}
#menu-bar .iconholder, #menu-bar .textholder{
	text-align: center;
}
#menu-bar .textholder{
	margin-top: 3px;
	font-family: "Microsoft Sans Serif",Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: rgb(0,0,0);
	background-color: rgb(225,225,225);
	padding: 2px;
	border: 1px solid rgb(225,225,225);
}
.content-row{
	font-family: "Microsoft Sans Serif",Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
}
.content-row:hover{ background-color: rgba(250,250,250,0.5);}
.content-row .num{
	width: 25px;
	text-align: right;
}
.content-row .name{
	width: 376px;
	text-align: left;
}
.content-row .name .dl-link:hover, #window-main .clickable, #menu-bar .item:hover{
	cursor: pointer;
}
.content-row .size{
	width: 80px;
	text-align: right;
}
.content-row .extra, .content-row .icon{
	width: 16px;
	text-align: center;
}

/* check out https://css-tricks.com/custom-scrollbars-in-webkit/ */
::-webkit-scrollbar {
    width: 16px;
    border-top: 1px solid #000; 
    border-left: 1px solid #000; 
    border-bottom: 1px solid #000; 
    background-color: #c0c0c0;
}

::-webkit-scrollbar-button {
    height: 16px;
    width: 16px;
}
::-webkit-scrollbar-button:increment {
    background-image: url("../img/sbar_d.png");
}
::-webkit-scrollbar-button:decrement {
    background-image: url("../img/sbar_u.png");
}
::-webkit-scrollbar-button:horizontal:increment {
    background-image: url("../img/sbar_r.png");
}
::-webkit-scrollbar-button:horizontal:decrement {
    background-image: url("../img/sbar_l.png");
}
::-webkit-scrollbar-thumb{
    width: 14px;
    background-color: #c0c0c0;
    border-top: 1px solid #000; 
    border-left: 1px solid #000; 
    border-bottom: 1px solid #000; 
    /* create the "3d effect" by setting a light internal shadow on top left and a dark
	internal shadow on the bottom right of the thumb */
    -moz-box-shadow:		inset 1px 1px #f8fcf8, inset -2px -2px #808080;
    -webkit-box-shadow:	inset 1px 1px #f8fcf8, inset -2px -2px #808080;
    box-shadow: 		inset 1px 1px #f8fcf8, inset -2px -2px #808080;
}
.slink {
    background: linear-gradient(to right, rgb(225,225,225) 50%, white 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all 0.25s ease;
}
.slink:hover {
    background-position: left bottom;
	cursor: pointer;
}
.gslink {
    background: linear-gradient(to right, rgb(255,255,255) 50%, rgb(192,192,192) 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all 0.25s ease;
}
.gslink:hover {
    background-position: left bottom;
	cursor: pointer;
}
.gslink a{
	color: rgb(0,0,0);
	text-decoration: none;
}
#executables {
	background: #000;
	font-size: 14px;
	color : rgb(200,200,200);
	font-family : DOS;
}
#executables .header{
	top: 12px;
	font-size: 15px;
	text-align: center;
}
#executables .execs{
	top: 12px;
}

/* taken from http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/ */

#executables input[type=radio   ]:not(old){
  width     : 2em;
  margin    : 0;
  padding   : 0;
  font-size : 1em;
  opacity   : 0;
}
#executables input[type=radio   ]:not(old) + label{
  display      : inline-block;
  margin-left  : -2em;
  line-height  : 1.5em;
}
#executables input[type=radio   ]:not(old) + label > span{
  display          : inline-block;
  width            : 0.875em;
  height           : 0.875em;
  margin           : 0.25em 0.5em 0.25em 0.25em;
  border           : 0.0625em solid rgb(192,192,192);
  border-radius    : 0.25em;
  background       : rgb(224,224,224);
  background-image :    -moz-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image :     -ms-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image :      -o-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image : -webkit-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image :         linear-gradient(rgb(240,240,240),rgb(224,224,224));
  vertical-align   : bottom;
}
#executables input[type=radio   ]:not(old):checked + label > span{
  background-image :    -moz-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image :     -ms-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image :      -o-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image : -webkit-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image :         linear-gradient(rgb(224,224,224),rgb(240,240,240));
}
#executables input[type=checkbox]:not(old):checked + label > span:before{
  content     : '✓';
  display     : block;
  width       : 1em;
  color       : rgb(153,204,102);
  font-size   : 0.875em;
  line-height : 1em;
  text-align  : center;
  text-shadow : 0 0 0.0714em rgb(115,153,77);
  font-weight : bold;
}
#executables input[type=radio]:not(old):checked + label > span > span{
  display          : block;
  width            : 0.5em;
  height           : 0.5em;
  margin           : 0.125em;
  border           : 0.0625em solid rgb(115,153,77);
  border-radius    : 0.125em;
  background       : rgb(153,204,102);
  background-image :    -moz-linear-gradient(rgb(223,156,134),rgb(194,48,12));
  background-image :     -ms-linear-gradient(rgb(223,156,134),rgb(194,48,12));
  background-image :      -o-linear-gradient(rgb(223,156,134),rgb(194,48,12));
  background-image : -webkit-linear-gradient(rgb(223,156,134),rgb(194,48,12));
  background-image :         linear-gradient(rgb(223,156,134),rgb(194,48,12));
}
#information_files body {
	background: rgb(255,255,255);
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color : Black;
	margin-left : 5px;
	position: relative;
	top: 5px;
}
#information_files .fileid{
	padding-left: 7px;
	background: rgb(255,255,255);
	font-size: 11px;
	top: 12px;
	font-family: "Courier New", Courier, monospace;
}
#information_files .fileidhl{
	background: #69FBE8;
	font-size: 13px;
	font-weight: bold;
	top: 12px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#login .shaded, #logout .shaded {
	-moz-box-shadow: 10px 10px 7px rgba(0,0,0,0.5);
	-webkit-box-shadow: 10px 10px 7px rgba(0,0,0,0.5);
	box-shadow: 10px 10px 7px rgba(0,0,0,0.5);
}
#login #win31login{
	width: 463px;
	height: 133px;
	position: relative;
	display: block;
	margin: 70px auto 0;
	background-image: url("../img/win311login.png");
	background-repeat: no-repeat;
	padding: 0px;
}
#login #dragbar{
	width: 453px;
	height: 20px;
	position: absolute;
	left: 5px;
	top: 5px;
	z-index: 999;
}
#logout #dragbar{
	width: 280px;
	height: 20px;
	position: absolute;
	left: 5px;
	top: 5px;
	z-index: 999;
}
#login #dragbar:hover, #logout #dragbar:hover{
	cursor: move;
}
#login #username, #login #password{
	position: absolute;
	left: 180px;
	border: 1px solid rgb(0,0,0);
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #000000;
	width: 150px;
	height: 22px;
	padding-left: 3px;
}
#login #username{
	top: 65px;
}
#login #password{
	top: 95px;
}
#login #okbutton{
	position: absolute;
	left: 380;
	top: 37;
}
#login #username:focus, #login #password:focus, #login #okbutton:focus{
	outline:none;
}
.pdfcontainer body, .pdfcontainer html{
	padding-top: 5px;
	background-color: rgb(192,192,192);
	text-align: center;
	width: 100%;
	height: 100%;
	overflow-y: hidden;
	position: relative;
}
.pdfcontainer .cover{
	display: block;
	margin: 0px auto;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
	position: absolute;
	left: 5px;
	top: 5px;
}
.pdfcontainer #whileload{
	position: absolute;
	top: 40px;
	left: 62px;
	width: 276px;
	font-family: "Microsoft Sans Serif",Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
}
.pdfcontainer .loader{
	position: absolute;
	top: 80px;
	left: 105px;
	width: 50px;
	height: 50px;
	display: block;
}
.pdfcontainer #pdftext{
	color: rgb(50,50,200);
}
#midilink{
	font-family: "Microsoft Sans Serif",Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-align: center;
}
#win31logout{
	width: 290px;
	height: 110px;
	position: relative;
	display: block;
	margin: 70px auto 0;
	background-image: url("../img/exit_win.png");
	background-repeat: no-repeat;
	padding: 0px;
}
#logout #buttonholder{
	display: block;
	position: absolute;
	left: 125px;
	top: 70px;
	z-index: 998;
}
#logout #textholder{
	font-family: "Microsoft Sans Serif",Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: rgb(0,0,0);
	display: block;
	position: absolute;
	left: 55px;
	top: 30px;
	width: 216;
}
#fupl, #chpw, #chpw table{
	font-family: "Microsoft Sans Serif",Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: rgb(0,0,0);
	background-color: rgb(255,255,255);
	padding: 5px;
}
#fupl #ftext{ margin-bottom: 25px; }
#fupl #progressBar{ width: 330px; height: 20px; }
#fupl input[type="file"] { display: none; }
#fupl .c-fupl, #fupl .upl_but{
	font-family: "Microsoft Sans Serif",Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	padding: 2px 7px 2px 7px;
	border: 1px solid rgb(0,0,0);
	border-radius: 3px;
	background-color: rgb(225,225,225);
	margin-right: 7px;
	margin-top: 5px;
}
#fupl .c-fupl:hover, #fupl .upl_but:hover{
	background-color: rgb(200,200,200);
	border: 1px solid rgb(70,70,70);
	cursor: pointer;
}
#fupl .ftext2{ margin-bottom: 5px;}
#fupl .fhead{ font-weight: 700; margin-bottom: 15px;}
#fupl .ralign { text-align: right; padding-right: 10px;}
#chooseBG {
	background-color: rgb(192,192,192);
	font-family: "Microsoft Sans Serif",Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	overflow-y: hidden;
}
#chooseBG .picdiv{
	box-sizing: border-box; 
	width: 100px;
	height: 100px;
	margin: 10px;
	padding: 10px;
	display: inline-block;
	background-color: pink;
}
#chooseBG #bg-container{
	display: block;
}
#chooseBG #bgtext{
	display: block;
	width: 965px;
	margin: 0 auto;
	margin-top: 15px;
	margin-bottom: 15px;
}
#search{
	background-color: rgb(255,255,255);
	font-family: "Microsoft Sans Serif",Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	width: 98%;
	height: 98%;
	padding: 5px;
}
#search #black{
	font-weight: 700;
	font-size: 14px;
	display: block;
	width: 100%;
	margin: 0 auto;
	position: relative;
}
#search #main{
	width: 95%;
	margin-top: 15px;
	margin-bottom: 15px;
}
#search .white {
	font-size: 12px;
}
#search .results { 
	display: table; 
	width: 100%; 
	font-family: "Microsoft Sans Serif",Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
}
#search .resrow { display: table-row; }
#search .rescell { display: table-cell; }
#search .no, #search .icon {width: 16px; text-align: right;}
#search #formdiv .formrow{
	padding-left: 10px;
	margin-bottom: 2px;
}
#search .header{
	margin-bottom: 3px;
	margin-top: 8px;
	font-weight: 700;
}
#search .namelink a{
	text-decoration: none;
	color: rgb(0,0,0);
}
#img_thumbnail{
	background-color: rgb(0,0,0);
	text-align: center;
}
#incorr_logins, #incorr_logins table{ 
	background-color: rgb(255,255,255);
	font-family: "Microsoft Sans Serif",Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
}
#incorr_logins table{ margin: 0auto; }
#incorr_logins th{ background-color: rgb(192,192,192); }
#incorr_logins .w75{ width: 75px; }
#incorr_logins .w100{ width: 100px; }
#incorr_logins .w130{ width: 130px; }
#incorr_logins .rg{ text-align: right; }

#adduser { background-color: rgb(255,255,255); }
#adduser table{ 
	font-family: "Microsoft Sans Serif",Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
}
#dosbox_help {
	background-color: rgb(255,255,255);
	font-family: "Microsoft Sans Serif",Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: rgb(0,0,0);
	padding: 5px;
}
#dosbox_help .header_alt{
	display: block;
	width: 100%;
	text-align: center;
	font-weight: 700;
}
#dosbox_help .highlight{
	font-weight: 700;
	color: rgb(70,0,0);
}
#dosbox_help .info a{
	text-decoration-style: dashed;
	color: rgb(0,0,0);
}
#midicontainer{
	position: fixed;
	top: 30px;
	right: 10px;
	padding: 5px;
	border: 1px solid rgb(0,0,0);
	border-radius: 3px;
	background-color: rgb(255,255,255);
	visibility: hidden;
	font-family: Arimo;
	font-size: 11px;
	color: rgb(0,0,0);
	z-index: 999;
}
#midimessage{
	font-size: 12px;
	font-weight: 600;
}
#bottomnav{
	background-color: rgb(255,255,255);
	z-index: 1500;
	text-align: center;
	position: fixed;
	bottom: 0px;
	right: 0px;
	display: block;
	width: 400px;
}
.pageclick, .pagenoclick{
	margin-left: 3px;
	margin-right: 3px;
	color: rgb(0,0,0);
	font-family: Sarabun;
	font-size: 18px;
}
.pageclick a{
	text-decoration: none;
	color: rgb(0,0,0);
}
.pagenoclick{
	color: rgb(255,255,255);
}