.dropdown-check-list {
  display: inline-block;
  /*position: absolute;*/
}
.dropdown-check-list .anchor {
  /*position: relative;*/
  cursor: pointer;
  display: inline-block;
  /*padding: 5px 50px 5px 10px;*/
  padding-right: 10px;
  border: 0px solid #ccc;
}
.dropdown-check-list .anchor:after {
  /* position: absolute;
 content: "";
  border-left: 2px solid white;
  border-top: 2px solid white;
  padding: 5px;
  right: 10px;
  top: 20%;
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);*/
}
.dropdown-check-list .anchor:active:after {
  right: 8px;
  top: 21%;
}
.dropdown-check-list ul.items {
  position: absolute;/**/
  overflow: visible;
  padding: 2px;
  display: none;
  margin: 0;
  border: 1px solid #ccc;
  background-color: grey;
  border-top: none;
  z-index: 1000;
}
.dropdown-check-list ul.items li {
  list-style: none;
}
.dropdown-check-list.visible .anchor {
  color: #0094ff;
}
.dropdown-check-list.visible .items {
  display: block;
}


/************************/


body {
	background-color:#000000;
	/* background-image:url(resources/hackground.png);*/
	font-family:Verdana;
	color:white; 
	border:0px solid white; 
}

a {
  transition: color .4s;
  color: #265C83;
}
a:link,
a:visited { color: #265C83; }
a:hover   { color: #7FDBFF; }
a:active  {
  transition: color .3s;
  color: #007BE6;
}
.link { text-decoration: none; }

#headerbox {
	width:95%;
	margin:0 auto;	/* to center div*/
	text-align: left;
	border:0px solid blue; 
}

#mainbox {
	width:95%;
	margin:0 auto;	/* to center div*/
	border:0px solid red; 
}

#footerbox {
	width:95%;
	font-size:12px;
	margin:0 auto;	/* to center div*/
	text-align: center;
	border:0px solid blue; 
}

.clickable-row {
    cursor: pointer;
}

table.clickable tr > td { cursor: pointer; }
table.clickable tr > td > a { display: block; text-decoration: none; }

#menulink {
	text-decoration: none;
	color:white;
	font-size:14px;
}


/********** Category lines left and right ***********/
#topic_table { /* doesn't work on safari?!*/
	width:100%;
}

#hr_kat_links {
    border:solid #FFFFFF 1px;
    width:20px;
}
#hr_kat_rechts {
    border:solid #FFFFFF 1px;
	width:100%;
}
#hr_kat_text {
    padding-left:5px; 
    padding-right:5px;
	font-size:20px;
	font-weight:bold;
	vertical-align:top;
    white-space: nowrap;
}

#hr_faderight { /* custom hr line fading out to the right */
	width:100%; 
	border:0; 
	margin:0px; 
	margin-top:-14px; 
	height:2px; 
	background-image: linear-gradient(to right, rgba(255, 255, 255, 0.80), rgba(255, 255, 255, 0.40), rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0));
}

.text-key {
	font-family:Verdana;
	/*font-weight:bold;*/
	color:white; 
}
.text-subkey {
	font-family:Verdana;
	font-size:12px;
	/*font-weight:bold;*/
	color:white; 
}
.text-value {
	font-family:Courier;
	font-size:16px;
	color:lightgreen; 
}
.text-value a {
	color:lightgreen; 
}


.tabletoggle {
	cursor: pointer;
	padding-right:4px;
}

#table_details {
	border:1px white solid;
	/*border-radius:10px;
	border-collapse:separate;*/
	border-collapse:collapse;
	width:100%;
	background-color:#171717;
}
#table_details td, #table_details th {
    border: 1px solid #ddd;
    padding: 4px; /* 8 */
}

#table_details2 {
	border:0px grey solid;
	/* font-size:14px; */
	border-collapse:collapse;
	width:100%;
	/* margin:-8px; */
}
#table_details2 td, #table_details2 th {
	border:0px grey solid;
}
#table_details2 td:nth-child(1), #table_details2 th:nth-child(1) {
	border:0px grey solid;
	width:25%;
}
#table_details2 tr:nth-child(1) {
	border-top:0px grey solid;
}
#table_details2 tr {
	border-top:1px #404040 solid;
}



#myInput {
    background-image: url('searchicon.png'); /* Add a search icon to input */
    background-position: 5px 6px; /* 10px 12px Position the search icon */
    background-repeat: no-repeat; /* Do not repeat the icon image */
    width: 100%; /* Full-width */
    font-size: 16px; /* Increase font-size */
    padding: 7px 10px 6px 35px; /* 12px 20px 12px 40px; Add some padding */
    border: 1px solid #ddd; /* Add a grey border */
    margin-bottom: 0px; /* Add some space below the input */
}




#UMDTable {
	/* font-family:courier; */
	border-collapse: collapse;
	overflow: hidden;
	width: 100%;
    border: 1px solid #EEE; /* white border around everything */
    font-size: 14px;
	color:white; /* text color */
	text-align:left; 
}

#UMDTable th {
	background-color:#478eff77;  /* blue */	
	
	font-size: 15px;
	color:#CCCCCCFF; /* text color */
	font-style:bold;
	text-transform: uppercase;
	
	padding-top: 4px;
    padding-bottom: 4px;
    /*cursor: pointer;*/
	white-space: nowrap;
	
	border-bottom: 1px solid #EEE; /* white border around everything */
}

#UMDTable td {
    padding: 2px;
}

#UMDTable tr {
	border-bottom: 0.5px solid #888;
	border-left: 1px solid #EEE; /* white border around everything */
	border-right: 1px solid #EEE; /* white border around everything */
}

#UMDTable tr:nth-child(even) {
	background-color: #111;     
}
#UMDTable tr:nth-child(odd) {
	background-color:#111;      
}
#UMDTable tbody tr:hover {
    /* Add a grey highlight color on hover */
    background-color:#222;
}







#viewcat_rowtable {
	/* font-family:courier; */
	overflow: hidden;
	border-collapse: collapse; /* Collapse borders */
    background-color:#000000;  /*#000000;*/
	width: 100%; /* Full-width */
    border: 1px solid #BBB; /* Add a grey border */
    font-size: 18px; /* Increase font-size */
}
#viewcat_rowtable td {
	text-align: left; /* Left-align text */
    padding: 2px; /* Add padding */
}

#viewcat_rowtable tr {
    /* Add a bottom border to all table rows */
    font-size: 16px;
	border-bottom: 1px solid #333;
}
#viewcat_rowtable th {
	font-size: 16px;
	text-align: left; /* Left-align text */
    font-style:bold;
	padding-top: 4px; /* Add padding */
    padding-bottom: 4px; /* Add padding */
    cursor: pointer;
	white-space: nowrap;
	border-bottom: 1px solid #BBB;
	/*background-color:#8f343a;   a-red */
	background-color:#111;  /* blue */	
}



#UMDTable_pic {
	/* font-family:courier; */
	position: relative;
	border-collapse: collapse; /* Collapse borders */
	overflow: hidden;
    background-color:#000000;  /*#000000;*/
	color:white;
	text-align: center;
	width: 100%; /* Full-width */
    border: 1px solid #BBB; /* Add a grey border */
	empty-cells: hide;
}
#UMDTable_pic th {
	background-color:#478eff77;  /* blue */	
	
	font-size: 15px;
	color:#CCCCCCFF; /* text color */
	font-style:bold;
	text-transform: uppercase;
	
	padding-top: 4px;
    padding-bottom: 4px;
    /*cursor: pointer;*/
	white-space: nowrap;
	
	border-bottom: 1px solid #EEE; /* white border around everything */
}
#UMDTable_pic td {
	width:20%;
	padding-top:20%; 
	background-size: 100% 100%;
	border: 1px solid #BBB; /* Add a grey border */
}
#UMDTable_pic tr {
	border: 1px solid #BBB; /* Add a grey border */
}



#viewcat_bigtable {
	border-collapse: collapse; /* Collapse borders */
    background-color:#000000;  /*#000000;*/
	width: 80%; 
    border: 1px solid #BBB; /* Add a grey border */
}
#viewcat_bigtable td {
    border: 1px solid #BBB; /* Add a grey border */
}
#bigtabletable {
	border: 0px solid #BBB; /* Add a grey border */
	padding:20px; border:0px;
}
#bigtabletable td, tr, th {
	padding:8px;
	border: 0px dashed #BBB; /* Add a grey border */
}


#idtable {
	border-collapse: collapse; /* Collapse borders */
    background-color:#000000;  /*#000000;*/
    border: 1px solid #BBB; /* Add a grey border */
}
#idtable th {
	background-color:#222222;  /*#000000;*/
	padding:8px;
}
#idtable td {
	padding-top:2px;
	padding-bottom:2px;
	padding-left:8px;
	padding-right:8px;
    border: 1px solid #BBB; /* Add a grey border */
}



#tablebutton {
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s; 
  cursor:pointer; 
  background-color: black;
  padding:4px; 
  border:2px solid grey; 
  margin-right:-8px;
}

#tablebutton:hover {
  background-color: #008CBA99;
}



#coolbuttongreen {
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.6s; /* Safari */
  transition-duration: 0.6s;
  background-color: lightgreen; 
  color: black; 
  border: 4px solid #4CAF50;
  border-radius: 6px;
}
#coolbuttongreen:hover {
  background-color: #4CAF50;
  color: white;
}

#coolbuttonred {
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.6s; /* Safari */
  transition-duration: 0.6s;
  background-color:#F08080; 
  color: black; 
  border: 4px solid #f44336;
  border-radius: 6px;
}
#coolbuttonred:hover {
  background-color: #f44336;
  color: white;
}

/********** Filesystem fade & expand stuff ***********/

div#fade-container{
	max-width: 900px;
	padding-left:20px;
	position:relative;
	line-height: 1.3;
}

div#fade-container2{
	max-width: 900px;
	padding-left:20px;
	position:relative;
	line-height: 1.3;
}

div#fade-content{
	max-height: 200px; /* set initial height here */
	overflow: hidden;
}

div#fade-content2{
	max-height: 200px; /* set initial height here */
	overflow: hidden;
}

div#fade-content.full{
	max-height: none;
}
div#fade-content2.full{
	max-height: none;
}

.fade-anchor {
	background: -webkit-linear-gradient(top,rgba(237,239,240,0),rgba(237,239,240,0) 0px,#000000 180px);
	background: linear-gradient(to bottom,rgba(237,239,240,0),rgba(237,239,240,0) 0px,#000000 180px);
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	cursor: pointer;
	display: block;
	height: 200px;
	padding-top: 180px;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	text-align: center;
	-webkit-transition: background 180ms ease-in;
	transition: background 180ms ease-in;
}
.fade-anchor2 {
	background: -webkit-linear-gradient(top,rgba(237,239,240,0),rgba(237,239,240,0) 0px,#000000 180px);
	background: linear-gradient(to bottom,rgba(237,239,240,0),rgba(237,239,240,0) 0px,#000000 180px);
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	cursor: pointer;
	display: block;
	height: 200px;
	padding-top: 180px;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	text-align: center;
	-webkit-transition: background 180ms ease-in;
	transition: background 180ms ease-in;
}

.fade-anchor-text { /* unused currently (for a button) */
	background: grey;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 3pt 3pt 3pt 3pt;
	border-color: white;
	color: white;
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	padding: 6px;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.fade-anchor2-text { /* unused currently (for a button) */
	background: grey;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 3pt 3pt 3pt 3pt;
	border-color: white;
	color: white;
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	padding: 6px;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}




.searchtag {
	/* float:right; */
	margin:0 0 0px 5px;
	position:relative;

	cursor: pointer;

	font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size:0.75em;
	font-weight:bold;
	text-decoration:none;

	color:#996633;
	text-shadow:0px 1px 0px rgba(255,255,255,.4);

	padding:0.200em 0.5em 0.150em 1.5em;

	border-top:1px solid #d99d38;
	border-right:1px solid #d99d38;
	border-left:1px solid #d99d38;
	border-bottom:1px solid #d99d38;

	-webkit-border-radius:0 0.25em 0.25em 0;
	-moz-border-radius:0 0.25em 0.25em 0;
	border-radius:0.25em 0.25em 0.25em 0.25em;

	background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
	background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
	background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
	background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
	background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');

	-webkit-box-shadow:
		inset 0 1px 0 #faeaba,
		0 1px 1px rgba(0,0,0,.1);
	-moz-box-shadow:
		inset 0 1px 0 #faeaba,
		0 1px 1px rgba(0,0,0,.1);
	box-shadow:
		inset 0 1px 0 #faeaba,
		0 1px 1px rgba(0,0,0,.1);
}

.searchtag:before {

}

.searchtag:after {
	content:'x';

	width:1.5em;
	height:0.5em;

	position:absolute;
	top:0.200em;
	left:-0.083em;
	z-index:9999;
}

.searchtag:hover {
	background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
	background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
	background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
	background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
	background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c');

	border-color:#e1b160;
}

.searchtag:hover:before {
	background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
	background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
	background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
	background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
	background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c');

	border-color:#e1b160;
}

.searchtag:hover:after {
	 color:grey;
}

.filtertag {
	/* float:right; */
	margin:0 0 0px 5px;
	position:relative;

	cursor: pointer;

	font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size:0.75em;
	font-weight:bold;
	text-decoration:none;

	color:#DDDDDD;
	text-shadow:0px 1px 0px rgba(255,255,255,.4);

	padding:0.200em 0.5em 0.150em 1.5em;

	border-top:1px solid #0066CC;
	border-right:1px solid #0066CC;
	border-left:1px solid #0066CC;
	border-bottom:1px solid #0066CC;

	-webkit-border-radius:0 0.25em 0.25em 0;
	-moz-border-radius:0 0.25em 0.25em 0;
	border-radius:0.25em 0.25em 0.25em 0.25em;

	background-image: -webkit-linear-gradient(top, rgb(0, 150, 200), rgb(50, 150, 200));
	background-image: -moz-linear-gradient(top, rgb(0, 150, 200), rgb(50, 150, 200));
	background-image: -o-linear-gradient(top, rgb(0, 150, 200), rgb(50, 150, 200));
	background-image: -ms-linear-gradient(top, rgb(0, 150, 200), rgb(50, 150, 200));
	background-image: linear-gradient(top, rgb(0, 150, 200), rgb(50, 150, 200));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#0066CC', EndColorStr='#0066CC');

	-webkit-box-shadow:
		inset 0 1px 0 #0066CC,
		0 1px 1px rgba(0,0,0,.1);
	-moz-box-shadow:
		inset 0 1px 0 #0066CC,
		0 1px 1px rgba(0,0,0,.1);
	box-shadow:
		inset 0 1px 0 #0066CC,
		0 1px 1px rgba(0,0,0,.1);
}

.filtertag:before {

}

.filtertag:after {
	content:'x';

	width:1.5em;
	height:0.5em;

	position:absolute;
	top:0.200em;
	left:-0.083em;
	z-index:9999;
}

.filtertag:hover {
	background-image: -webkit-linear-gradient(top, rgb(0, 100, 141), rgb(0, 100, 148));
	background-image: -moz-linear-gradient(top, rgb(0, 100, 141), rgb(0, 100, 148));
	background-image: -o-linear-gradient(top, rgb(0, 100, 141), rgb(0, 100, 148));
	background-image: -ms-linear-gradient(top, rgb(0, 100, 141), rgb(0, 100, 148));
	background-image: linear-gradient(top, rgb(0, 100, 141), rgb(0, 100, 148));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c');

	border-color:#3859d9;
}

.filtertag:hover:before {
	background-image: -webkit-linear-gradient(left top, rgb(0, 0, 141), rgb(0, 0, 108));
	background-image: -moz-linear-gradient(left top, rgb(0, 0, 141), rgb(0, 0, 108));
	background-image: -o-linear-gradient(left top, rgb(0, 0, 141), rgb(0, 0, 108));
	background-image: -ms-linear-gradient(left top, rgb(0, 0, 141), rgb(0, 0, 108));
	background-image: linear-gradient(left top, rgb(0, 0, 141), rgb(0, 0, 108));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c');

	border-color:#3859d9;
}

.filtertag:hover:after {
	 color:grey;
}



#CompareTable1 {
	/* font-family:courier; */
	border-collapse: collapse;
	overflow: hidden;
	width: 100%;
    border: 1px solid #EEE; /* white border around everything */
    font-size: 12px;
	color:white; /* text color */
	text-align:left; 
}

#CompareTable1 th {
	background-color:#478eff77;  /* blue */	
	
	font-size: 14px;
	color:#CCCCCCFF; /* text color */
	font-style:bold;
	/*text-transform: uppercase;*/
	
	padding-top: 4px;
    padding-bottom: 4px;
    /*cursor: pointer;*/
	white-space: nowrap;
	
	border-bottom: 1px solid #EEE; /* white border around everything */
}

#CompareTable1 td {
    padding: 1px;
}

#CompareTable1 tr {
	border-bottom: 0.5px solid #888;
	border-left: 1px solid #EEE; /* white border around everything */
	border-right: 1px solid #EEE; /* white border around everything */
}

#CompareTable1 tr:nth-child(even) {
	background-color: #111;     
}
#CompareTable1 tr:nth-child(odd) {
	background-color:#111;      
}
#CompareTable1 tbody tr:hover {
    /* Add a grey highlight color on hover */
    background-color:#222;
}

#CompareTable2 {
	/* font-family:courier; */
	border-collapse: collapse;
	overflow: hidden;
	width: 100%;
    border: 1px solid #EEE; /* white border around everything */
    font-size: 12px;
	color:white; /* text color */
	text-align:left; 
}

#CompareTable2 th {
	background-color:#478eff77;  /* blue */	
	
	font-size: 14px;
	color:#CCCCCCFF; /* text color */
	font-style:bold;
	/*text-transform: uppercase;*/
	
	padding-top: 4px;
    padding-bottom: 4px;
    /*cursor: pointer;*/
	white-space: nowrap;
	
	border-bottom: 1px solid #EEE; /* white border around everything */
}

#CompareTable2 td {
    padding: 1px;
}

#CompareTable2 tr {
	border-bottom: 0.5px solid #888;
	border-left: 1px solid #EEE; /* white border around everything */
	border-right: 1px solid #EEE; /* white border around everything */
}

#CompareTable2 tr:nth-child(even) {
	background-color: #111;     
}
#CompareTable2 tr:nth-child(odd) {
	background-color:#111;      
}
#CompareTable2 tbody tr:hover {
    /* Add a grey highlight color on hover */
    background-color:#222;
}

#discord-button {
    color: white;
    font-weight: bold;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    padding: 5px 15px;
    background-color: #7289da;
	text-shadow: 1px 1px #555555;
    text-decoration: none;
}

#discord-button:hover {
      background-color: #6a7fc9;
}
#start-button {
    color: white;
    font-weight: bold;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    padding: 5px 15px;
    background-color: #2e86c1;
	text-shadow: 1px 1px #555555;
    text-decoration: none;
}

#start-button:hover {
      background-color: #2471a3;
}
#orange-button {
    color: white;
    font-weight: bold;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    padding: 5px 15px;
    background-color: #ec9e14;
	text-shadow: 1px 1px #555555;
    text-decoration: none;
}

#orange-button:hover {
      background-color: #ec9702;
}
#grey-button {
    color: white;
    font-weight: bold;
    border-radius: 8px;
    border-color: white;
    display: inline-flex;
    align-items: center;
    padding: 5px 15px;
    background-color: #646464;
	text-shadow: 1px 1px #333333;
    text-decoration: none;
}
#grey-button:hover {
      background-color: #4d4d4d;
}


#line_top {
	border:0; 
	margin:0px; 
	height:1px; 
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0));
}

#line_bot {
	border:0; 
	margin:0px; 
	height:2px; 
	background-image: linear-gradient(to right, rgba(200, 200, 200, 0), rgba(200, 200, 200, 0.20), rgba(200, 200, 200, 0));
}

#headertext {
	margin:8px;
}

#tbox {
	margin-top:80px; 
	margin-bottom:40px; 
	/*background-color:#262626AA;*/
	background-image:linear-gradient(145deg, #262626aa 0%, #101010aa 45%, #262626aa 100%); 
	width:75%; 
	max-width: 1400px;
	border: 2px solid #262626;  
	border-radius: 25px; 
	padding-top:10px;
}

#tbox_head {
	text-align:center; 
	width:95%;
}

#tbox_content {
	text-align:justify; 
	width:95%;
}


@media only screen and (max-width: 1024px), (min-device-width: 0px) and (max-device-width: 100%)  { /* if window is smaller than 1024px do... */
	#box {
		width:100%;
	}
}