/* All elements */
* {
	font-family:"Arial";
	font-size:12pt;
	color:#AAAAAA;
	padding:0px;
	margin:0px;
	border-style:none;
}

/* background color body */
body{
	background-color:black;
}

button { 
	padding:5px;
	width:100%;margin:2px;	
}
.buttonimage { 
	vertical-align:middle;
}

.buttonspan { 
	display:inline-block;
	width:80%;
	vertical-align: middle;

}

/* Tables with noooo border */
table,tr,td,tbody,th {
	color: white;
	padding:0px;
	margin:0px;
	border-style:none;
	border-width: 0px;
	border-collapse: collapse;
}
th:first-child, td:first-child{
	/*padding-top:0px;*/
	padding-left:0px;
}
th,td {
	padding-top:7px;
	padding-left:7px
}

/* For td elements in the search results table */
.searchtable {
	padding:2px;
}

/* no border of any kind */
.nopadding {
	padding:0px;
	margin:0px;
	border-width:0px;
}

/*Boxes backgrounds*/
.box {margin:0px;border: 2px chocolate solid;
	box-sizing: border-box;z-index:2;
	background-color:coral;
	background-size:100% 100%;
  }

/* Wood like structures (basic style overwriteable with local styles)*/
.structure {
	border: 1px saddlebrown solid;
	box-sizing: border-box;
	z-index:2; /*?*/
	background-color:sienna;
}

/* Repeated texture elements with no border of any kind */
.texture {
	z-index:2;/*?*/
}

/* Single picture with no background or border */
.free{
	z-index:2;/*?*/
	background-size:100% 100%;
}

/* A horizontal text */
.text{
	color:black;
	font-size: 25px;
	font-weight: bold;
	text-align: justify;
	z-index:2;/*?*/
	background-size:100% 100%;
	text-shadow:
	   -1px -1px 0 #999,
	    1px -1px 0 #999,
	   -1px  1px 0 #999,
	    1px  1px 0 #999;
}

/* A vertical text */
.chapter{
	color:white;
	font-size: 25px;
	font-weight: bold;
	text-align: left;
	z-index:2;
	text-shadow: /*contour*/
	   -1px -1px 0 #999,
	    1px -1px 0 #999,
	   -1px  1px 0 #999,
	    1px  1px 0 #999;

	transform: rotate(90deg);

	/* Safari */
	-webkit-transform: rotate(90deg);
	/* Firefox */
	-moz-transform: rotate(90deg);
	/* IE */
	-ms-transform: rotate(90deg);
	/* Opera */
	-o-transform: rotate(90deg);
}

/* Highlight a selected element */
.selected, .selectediframe {
	opacity:0.5;
 }

/* Highlight for keyboard driven selection in searchresults */
.searchrow {
 	background-color:#444444
 }

/* Highlight for a found element (search) */
.dotted-border {
 	background-image: url(/img/selection.gif);
 	background-clip: content-box;
 }

/*Input elements take 100% of available space*/
input,select {
	width:100%;
}
input:invalid {
  border: red solid 1px;
}
/*Spaces out forms by forcing a minimal row height */
.field{
	height:20px;
}

/* used in login to center elements */
.centered{
	text-align:center;vertical-align: middle;
}

/* Defines the rectangle used to split a floor. */
#split {
	border: solid 3px green;
}

/*classes for login windows.*/
.loggedout{background-color:rgba(0,0,255,1);color:white;}
.loggedin{background-color: rgba(0,255,0,1);color:black;}
.log {
  position: absolute;
  top: 50%;left:50%;
  transform: translate(-50%,-50%);
  border-spacing:20px;
  border-collapse:separate;
}
.logout{padding:10px}

/*The two lids needed to scale the floor to size*/
.lid{
    /*opacity: 0.8;*/
    background-color: black;
    z-index:10000; /* Always on top of all elements */
    width:100%;
}


/*Containers*/
.container {
	position:fixed;
	z-index:1004; /* Should stay above all construction elements.*/
	padding:10px;
	overflow:visible;
	visibility:hidden;
	background-color:rgba(0,0,0,0.95);
}

/* A cocon is the working area inside a container. */
.cocon {
	width:100%;
	height:100%;
	overflow:auto;
	vertical-align:middle;
	text-align:justify;
}

/*Style for menu images*/
.menuimg {
	filter:drop-shadow(3px 3px 2px #000);
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
}

/*Text elements*/
/***************/

/* Swiss dingsbums keyboard font */
@font-face {
    font-family: 'skbf';
    src: url(DingsBumsSwissKeyboardFont.ttf) format('truetype');
}

/*Use above defined font to display key strokes. */
.key{
	font-family: 'skbf';
	font-size: 25px;
}

h1:first-child {
	margin-top:0px;
}

h1 {
	margin-top:20px;
	border-bottom:solid 1px ;
	margin-bottom:10px;
}

.xl {
	font-size:72px;
	border-bottom:1px solid ;
	font-weight:bold;
	margin-bottom:10px;
	margin-top:20px;
}

.xl:first-child {
	margin-top:0px;
}

.l {
	font-size:48px;
	font-weight:bold;
	margin-bottom:10px;
}

.m {
	font-size:32px;
	font-weight:bold;
	margin-bottom:5px;
}

.s {
	font-size:18px;
	font-weight:bold;
}
.xs {
	font-size:10px;
	font-weight:bold;
}

ul {
	padding-left:40px;
	padding-right:40px;
	margin-bottom:5px;
    list-style-type: circle;
}

/* prevent text selection */
.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
}


/*Editor*/
kbd {
	 background-color: #eee;
	 border-radius: 3px;
	 border: 1px solid #b4b4b4;
	 box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;
	 color: #333;
	 display: inline-block;
	 font-size: .85em;
	 font-weight: 700;
	 line-height: 1;
	 padding: 2px 4px;
	 white-space: nowrap;
}

/* See http://philarcher.org/diary/2013/headingnumbers/ */
body {counter-reset: h2}
h2 {counter-reset: h3}
h3 {counter-reset: h4}
h4 {counter-reset: h5}
h5 {counter-reset: h6}

h2:before {counter-increment: h2; content: counter(h2) ". "}
h3:before {counter-increment: h3; content: counter(h2) "." counter(h3) ". "}
h4:before {counter-increment: h4; content: counter(h2) "." counter(h3) "." counter(h4) ". "}
h5:before {counter-increment: h5; content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "}
h6:before {counter-increment: h6; content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "}

h2.nocount:before, h3.nocount:before, h4.nocount:before, h5.nocount:before, h6.nocount:before { content: ""; counter-increment: none }

ol {
		counter-reset: item;
}

ol > li {
		counter-increment: item;
}

ol ol > li {
		display: block;
}

ol ol > li:before {
		content: counters(item, ".") ". ";
		margin-left: -20px;
}

blockquote:before {content:"« "}
blockquote:after  {content:" »"}

hr {
	height:0px;
	border-top:1px solid;
	border-color: #AAA;
	margin:5px 20px;
}


/* For Treeview
See:
https://www.w3schools.com/howto/howto_js_treeview.asp
*/
/* Remove default bullets */
.tvul, #tvtopul { /*ul,#myUL*/
 list-style-type: none;
}

/* Remove margins and padding from the parent ul */
#tvtopul { /*#myUL*/
 margin: 0;
 padding: 0;
}

/* Style the caret/arrow */
.tvcaret { /*caret*/
 cursor: pointer;
 user-select: none; /* Prevent text selection */
}

/* Create the caret/arrow with a unicode, and style it */
.tvcaret::before {
 content: "\25B6";
 color: #AAAAAA;
 display: inline-block;
 margin-right: 5px;
}

/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.tvcaret-down::before {
 transform: rotate(90deg);
}

/* Hide the nested list */
.tvnested {
 display: none;
}

/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
.tvactive {
 display: block;
 border-left:1px solid #AAAAAA;
 margin-left:5px;
 padding-left:10px;
}