* { margin:0; padding:0; }
.header{ padding:10px; background-color:#333; color:#FFF; font-family:Arial, Helvetica, sans-serif; }
.header h2, .header h4 { float:left; clear:both; }
.header .creator { float:right; font-size:13px; }
.header .creator span.credit { cursor:pointer; color:#33CCFF; font-weight:bold; }
.header #ChibChand { cursor: pointer; color: #33CCFF; padding-bottom: 5px; }
.header #RajaShadabKhan { cursor: pointer; }

.overflow { overflow:auto; position:relative; background-color:#EFEFF0; padding-top:10px; padding-bottom:10px; }
ul.tree { display:block; font:11px Arial, Helvetica, sans-serif; #000;
}
ul.tree li { display:inline-block; text-align:center; margin:5px; vertical-align:top; }
ul.tree li.none { display:none; }
ul.tree ul.show { display:block!important; }
ul.tree li > div { display:inline-block; padding:6px 8px; text-decoration:none; background:#fff; border:solid 1px #aaaaaa; box-shadow:0 0 3px #ccc; border-radius:3px; position:relative; min-width:40px; z-index:2; }
ul.tree li > div.zindex { z-index:inherit; }
ul.tree li > div:hover { background-color: #DDD; cursor: pointer; }
ul.tree li form { display:block; text-align:left; padding:10px; border:dashed 1px #aaa; margin-top:28px; position:absolute; z-index:4; background:#fff; color:#000; }
ul.tree li form img.close { float:right; cursor:pointer; }
ul.tree li textarea { height:35px; width:150px; background:#FFC; padding:4px; font:12px Arial, Helvetica, sans-serif; color:#000; border:solid 1px #ccc; border-radius:5px; margin:5px 0; display:block; }
ul.tree li textarea.error { border:solid 1px #ff0000; }
ul.tree li textarea:focus { background:#FF9; }
ul.tree li span.submit, ul.tree li span.edit { text-align:center; display:block; background:#b7c3f7; font:11px Arial, Helvetica, sans-serif; font-weight:bold; color:#fff; border:none; border-radius:3px; padding:3px 7px; cursor:pointer; }
ul.tree li span.submit:hover, ul.tree li span.edit:hover { background:#8a9ef5; }
ul.tree li div.current { background:#006600; border:solid 1px #006600; color:#fff; box-shadow:none; font-weight:bold; }
ul.tree li div.children { background:#89B389; border:solid 1px #669966; color:#fff; box-shadow:none; }
ul.tree li div.parent { background:#3651A3; border:solid 1px #3651A3; color:#fff; box-shadow:none; }
ul.tree li span.vertical, ul.tree li span.horizontal { display:inline-block; position:absolute; z-index:1; background:#aaaaaa; }
ul.tree li span.vertical { width:1px; }
ul.tree li span.horizontal { height:1px; }
ul.tree li b.hide { position:absolute; width:11px; height:12px; bottom:0; left:-15px; background:url(img/hide.png) no-repeat; cursor:pointer; }
ul.tree li b.hide.show { background:url(img/show.png) no-repeat; }
ul.tree li b.hide.none { display:none; }
ul.tree li span.highlight { position:absolute; width:10px; height:10px; bottom:-5px; right:-5px; cursor:pointer; display:none; background:url(img/highlight.png) no-repeat; }
ul.tree li span.add_action { position:absolute; width:10px; height:10px; top:-5px; left:-5px; cursor:pointer; display:none; background:url(img/add.png) no-repeat; }
ul.tree li span.delete_action { position:absolute; width:10px; height:10px; top:-5px; right:-5px; cursor:pointer; display:none; background:url(img/close.png) no-repeat; }
ul.tree li span.edit_action { position:absolute; width:10px; height:10px; bottom:-5px; left:-5px; cursor:pointer; display:none; background:url(img/edit.png) no-repeat; }
img.back_btn { position:fixed; left:15px; top:75px; cursor:pointer; z-index:3; }
ul.tree li span.notes { display:none; position:absolute; float:left; border:3px solid #33CCFF; z-index:1000000; background-color:#FFF; width:250px; padding:5px; margin:5px;
	-webkit-border-radius: 10px; -webkit-border-top-left-radius: 0; -moz-border-radius: 10px; -moz-border-radius-topleft: 0; border-radius: 10px; border-top-left-radius: 0; } /*right:20px;*/
ul.tree li span.notes h2 { margin-bottom:5px; }
.resources { padding:20px; background-color:#CCC; color:#333; font-family:Arial, Helvetica, sans-serif; font-size:12px; }
.resources h3 { margin-bottom:5px; }
.resources .sources { float:left; }
.resources .sources ol { list-style-type:upper-roman; margin-left:30px; }
.resources .sources span.credit { cursor:pointer; }
.resources .sources span.credit:hover { text-decoration:underline; }
.resources .last-update { float:right; width:200px; }
.resources .last-update ul { margin-left:20px; }

/* ── Contact button ─────────────────────────────────────────────────── */
#contact-btn {
  background: none; border: none; padding: 0; margin-top: 4px;
  color: #33CCFF; font: 11px Arial, Helvetica, sans-serif;
  cursor: pointer; text-decoration: underline; display: block; margin-left: auto;
}
#contact-btn:hover { color: #66DDFF; }

/* ── Contact modal ──────────────────────────────────────────────────── */
#contact-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.55); z-index: 5000;
  align-items: center; justify-content: center; padding: 16px;
}
#contact-overlay.is-open { display: flex; }
#contact-modal {
  background: #fff; border-radius: 4px; padding: 20px 24px 24px;
  width: 100%; max-width: 420px;
  font: 12px Arial, Helvetica, sans-serif; color: #333;
}
#contact-modal h3 { color: #33CCFF; margin-bottom: 14px; font-size: 14px; }
#contact-modal label { display: block; margin-bottom: 10px; font-weight: bold; color: #555; }
#contact-modal input[type=text],
#contact-modal input[type=email],
#contact-modal textarea {
  display: block; width: 100%; margin-top: 3px; padding: 6px 8px;
  border: 1px solid #ccc; border-radius: 3px; box-sizing: border-box;
  font: 12px Arial, Helvetica, sans-serif; color: #333;
}
#contact-modal input:focus, #contact-modal textarea:focus { outline: none; border-color: #33CCFF; }
#contact-modal textarea { height: 80px; resize: vertical; }
#contact-result { margin-top: 6px; font-size: 12px; min-height: 16px; }
.contact-actions { margin-top: 12px; display: flex; gap: 8px; }
.contact-actions button {
  padding: 6px 16px; border: 1px solid #ccc; border-radius: 3px;
  cursor: pointer; font: 12px Arial, Helvetica, sans-serif; background: #f0f0f0;
}
.contact-actions button[type=submit] {
  background: #33CCFF; border-color: #33CCFF; color: #fff; font-weight: bold;
}
.contact-actions button:disabled {
  cursor: default; opacity: .6;
}
.contact-actions button:disabled:hover {
  opacity: .6;
}
.contact-actions button:hover { opacity: .85; }
/* Honeypot — visually hidden but not display:none (bots ignore that) */
#c-hp { opacity: 0; position: absolute; top: -9999px; left: -9999px; height: 0; width: 0; }