body {
	margin: 0;
	padding: 0;
	overflow: hidden;
}

#toolBar {
	position: absolute;
	left: 0;
	top: 0;
	height: 40px;
	right: 0;
	display: inline; 
	display: table; 
	align-items: center;
}

.toolBarItem {
	position: relative;
	top: -15px;
}

.animePlayer {
	display: inline; 
	/* border: 2px solid black; */
}

.rightJust {
	text-align: right;
}

#ContentDiv {
	position: absolute;
	left: 0;
	top: 40px;
	bottom: 0;
	right: 0;
	/* border: 4px solid #424242;
	border-radius: 4px;
	background-color: #C8C8C8; */
	background-color: #C8C8C8;
	overflow: auto;
}

#BackgroundDiv {
	width: 1280px;
	height: auto;
	min-height: 100% !important;
	border: 4px solid #424242;
	border-radius: 4px;
	background-color: #C8C8C8;
}

#CpuDiv {
	position: absolute;
	left: 0px;
	top: 0px;
	/* bottom: 0px; */
	height: 790px;
	right: 0px;
	/* border: 4px solid #424242;
	border-radius: 4px; */
	background-color: #C8C8C8;
}

#DescDiv {
	position: absolute;
	left: 3px;
	top: 560px;
	width: 856px;
	height: 200px;
	border: 2px solid #7C7C7C;
	border-radius: 6px;
	padding: 10px;
	background-color: #FFFFFF;
	z-index: 1; 
}

#DescDiv2 {
	overflow-y: auto;
	height: 100%;

}

.box {
	border: 2px solid #000000;
	
}

.cursorRol {
	cursor: url(cursorRoller.png) 5 12, ns-resize;
}

.keyWord {
	display: inline;
	color: white;
	background-color: #1D65A6;
	padding-left: 5px;
	padding-right: 5px;
}

.keyLarge {
	font-size: xx-large;
}

.warn {
	background-color: #ff0000;
}

ul.noBullet {
	list-style: none;
}

.formula {
	text-align: center;
	font-weight: bold;
	background-color: lightgray;
}

.instrTitle {
	border-bottom: 4px solid black;
	font-size: 200%;
	font-weight: bold;
}

.borderUp {
	border-top: 1px solid black;
}

.instrD {
	padding-left: 0.5cm;
	font-weight: bold;
	text-align: right;
	vertical-align: text-top;
}

.instrExample {
	padding-left: 0.5cm;
	white-space: pre;
	font-family: monospace;
}

.instrMark {
	display: inline;
	font-weight: bold;
	background-color: #ddd;
}

.sourceFile {
	font-family: monospace;
}

.absSourceFile {
	font-family: monospace;
}

.asm.source {
	font-family: monospace;
	white-space: pre;
	background-color: #E8E8E8;
	padding: 10px;
	border-style: solid;
}

.asm.includeFile {
	display: block;
	background-color: #D8D8D8;
}

.asm.comment {
	color: green;
}

.asm.string {
	color: brown;
	font-weight: bold;
}

.asm.commentDoc {
	display: block;
	padding: 5px;
	background-color: yellow;
	border-style: solid;
}

.asm.commentDoc.docDeprecated {
	background-color: gray;
	opacity: 0.5;
}

.asm.labelDef {
	color: blue;
	font-weight: bold;
}

.asm.labelUse {
	color: blue;
}

.asm.labelUse a:link {
	color: blue;
	text-decoration: none;
}

.asm.labelUse a:visited {
	color: blue;
	text-decoration: none;
}

.asm.labelUse a:active {
	color: #B00000;
	text-decoration: none;
}

.asm.labelUse a:hover {
	color: #B00000;
	text-decoration: underline;
}

.asm.constantDef {
	color: black;
	font-weight: bold;
}

.asm.constantUse {
	color: black;
}

.asm.constantUse a:link {
	color: black;
	text-decoration: none;
}

.asm.constantUse a:visited {
	color: black;
	text-decoration: none;
}

.asm.constantUse a:active {
	color: #B00000;
	text-decoration: none;
}

.asm.constantUse a:hover {
	color: #B00000;
	text-decoration: underline;
}

.asm.instruction {
	color: black;
	font-weight: bold;
}

.asm.number {
	color: magenta;
}

.asm.char {
	color: brown;
}

.asm.operators {
	color: orange;
	font-weight: bold;
	background-color: rgb(153, 255, 255);
}

.asm.directive {
	color: blue;
}

.asm .lineSelected {
	background: cyan;
	display: table-row;
}

.asm.source table {
	border-spacing: 0;
}

.lineNumber {
	background: #C0C0C0;
	color: blue;
	margin-right: 1em;
	text-align: right;
	vertical-align: text-top;
	position: absolute;
	top: 0;
	left: -3.8em;
	width: 3em;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.asm.directive a:link {
	color: blue;
	text-decoration: none;
}

.asm.directive a:visited {
	color: blue;
	text-decoration: none;
}

.asm.directive a:active {
	color: #0000B0;
	text-decoration: none;
}

.asm.directive a:hover {
	color: #0000B0;
	text-decoration: underline;
}

.documented a:link {
	color: yellow;
	text-decoration: none;
}

.documented a:visited {
	color: yellow;
	text-decoration: none;
}

.documented a:active {
	color: yellow;
	text-decoration: none;
}

.documented a:hover {
	color: yellow;
	text-decoration: underline;
}

.asm.regNameUse {
	color: brown;
	font-weight: bold;
	background-color: rgb(153, 255, 255);
}

html.source, body.source {
	height: 100%;
	overflow: hidden; 
	margin: 0;
}

#content {
	height: 100%;
}

#SrcExplorer { 
	font-family: monospace; 
	float: left; 
	width: 20%; 
	height: 100%; 
	overflow: auto;
}

#SrcCode { 
	float: left; 
	width: 80%; 
	height: 100%; 
	overflow: auto;
}

.documented {
	background-color: yellow;
}

ul.tree {
	-webkit-padding-start: 4px;
}

ul.tree li {
	list-style-type: none;
	position: relative;
}

.tree li>ul {
	display: none;
}

.tree li.open>ul {
	display: block;
}

ul.notree li.open  ul { 
	display: block;
}

ul.tree li a {
	text-decoration: none;
}

ul.tree li a:not (.documented ) {
	dispaly: block;
}

ul.tree li:before { 
	content: '+';
	content: url(expand.gif);
}

ul.notree li:before {
	content: "";
}

ul.tree li.open:before {
	content: url(collapse.gif); 
	content: '-';
}

ul, #instrSelector {
	list-style-type: none;
   }
#instrSelector {
	margin: 0;
	padding: 0;
  }   

.caret {
	cursor: pointer; 
	user-select: none; /* Prevent text selection */
  }  
  .caret::before {
	content: "\25B6";
	color: black;
	display: inline-block;
	margin-right: 6px;
  }  

  .caret-down::before {
	transform: rotate(90deg); 
  }  

  .nested {
	display: none;
  }  

  .active {
	display: block;
  }

  .opCode {
	font-family: monospace;
	  background-color: #0000B0;
	  color: gold;
	  padding: 3px;
	  /* display: inline-block; */
	  width: 110px;
  }

  .mnemo {
	  padding: 3px;
	  /* display: inline-block; */
	  width: 80px;
  }

  .params {
	padding: 3px;
	/* display: inline-block; */
	width: 260px;
}


  .parDesc {
	font-weight: bold;
	  background-color: #7C7C7C;
	  color: #000000;
	  padding: 3px;
  }


.includeFileName {
	background: #F0F0F0;
}

.button {
	border: 1px solid #ffffff;
}

.button:hover {
	border: 1px solid #d0d0d0;
}

.button:active {
	border: 1px solid #d0d0d0;
	background: #F0F0F0;
}

.buttonOn {
	background: #F0F0F0;
}

.hiddenSym {
	display: "inline";
}

.left.col {
	width: 300px;
}

.right.col {
	left: 300px;
	right: 0;
}

.header.row {
	height: 40px;
}

.body.row {
	top: 0px;
	bottom: 0px;
}

.footer.row {
	height: 50px;
	bottom: 0;
	line-height: 50px;
}

#SrcExplorerParent {
	top: 40px;
	left: 0px;
}

.page {
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

.row, .col, .page {
	overflow: hidden;
	position: absolute;
}

.row {
	left: 0;
	right: 0;
}

.col {
	top: 0;
	bottom: 0;
}

.scroll {
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

.toolTip {
	left: 0;
	/* right: 0; */
	width: fit-content;
	top: 0;
	/* bottom: 0; */
	height: fit-content;
	position: absolute;
	background-color: #fffAF0;
	border: 1px solid black;
	box-shadow: 2px 2px 4px #000;
	padding: 2px 5px;
	overflow: hidden;
}

#projectMenuMain {
	position: absolute;
	top: 50px;
	left: 0;
	width: 20%;
}

#projectMenuSteps {
	position: absolute;
	top: 50px;
	left: 20%;
	width: 20%;
}

#projectDesc {
	position: absolute;
	top: 50px;
	right: 0;
	left: 40%;
}

.projectMenu ul {
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
	font-weight: normal;
	text-decoration: none;
	position: relative;
}

.projectMenu a {
	line-height: 1.3;
}

.projectMenu>ul>li {
	margin: 0 0 2px 0;
}

.projectMenu>ul>li:last-child {
	margin: 0;
}

.projectMenu>ul>li {
	font-size: 16px;
	display: block;
	color: black;
	background: #C6C6C6;
	border: 1px solid #000;
	padding: 6px 10px;
	font-weight: bold;
	cursor: pointer;
}

.projectMenu>ul>li.projectActive {
	border-bottom: none;
}

.projectMenu>ul>li.projectActive {
	background: #97be10;
	color: blue;
	border: 1px solid #79980d;
}

.none {
	display: none;
}

/* SVG objekty */
.bitChunk {
	stroke: black;
	stroke-width: 2;
}


.flag {
	fill: magenta;
	stroke: black;
}

.windowALU .opALU .bitChunk {
	fill: orange;
}

.windowALU .resultALU .bitChunk {
	fill: yellow;
}

.buttonALU { 
	cursor: pointer;
	fill: white;
	stroke-width: 2;
	stroke: black;
}

.buttonALU:hover {
	fill: #eee;
}

.buttonALU:active {
	fill: #999;
}

.WindowH {
	position: absolute;
	/* top: 00px;
	left: 500px;
	width: 500px;
	bottom: 0; */
	/* background-color: #79980d; */
	border-style: solid;
	border-width: 2px;
	border-color: #7C7C7C;
	overflow: hidden;
}

.WindowHTitle {
	/* position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 27px; */
	background-color: #9C9C9C;
	border-bottom-style: solid;
	border-width: 2px;
	border-color: #7C7C7C;
	overflow: hidden;
	font-weight: bold;
	text-align: center;
	line-height: 27px; /* to iste ako height */
}

.WindowHContent {
	/* position: absolute; */
	/* top: 29px;	height +  WindowHTitle border-width */
	left: 0;
	right: 0;
	/* bottom: 0; */
	overflow: auto;
}

@keyframes animOpacity {
	from {opacity: 0;}
	to {opacity: 1;}
 }