/* =========================================
   LAB 1.3 (creative.html): LISTS + TABLES
   Required things: list-style-* + display:list-item; table sections; colgroup; rowspan/colspan; caption-side; border-collapse; border-spacing; empty-cells
   ========================================= */

/* ---- List-based horizontal menu demo (UL navigation) ---- */
ul.labnav {
  list-style: none;
  margin: 8px 0 0 0;
  padding: 0;
}

ul.labnav li {
  display: inline; /* classic way to make horizontal menus */
}

ul.labnav li a {
  display: inline-block;
  padding: 4px 10px;
  margin: 2px 2px;
  border: 1px solid #666;
  background: rgba(255,255,255,0.08);
  text-decoration: none;
  text-align: center;
}

ul.labnav li a:hover {
  background: rgba(255,255,255,0.14);
}

/* ---- Lists demo ---- */
ul.bullets-square {
  list-style-type: square;
  border: 2px solid rgb(200,125,45);
  padding: 10px 22px;
}

.li-inside { list-style-position: inside; }
.li-outside { list-style-position: outside; }

/* list-style-image + fallback marker + shorthand list-style */
ul.marker-image {
  list-style-image: url("../img/bullet.svg"); /* <- put your asset here */
  list-style-type: disc; /* fallback */
  list-style-position: outside;
  border: 2px dotted #666;
  padding: 10px 22px;
}

/* nested lists slightly indented for visibility */
ul.nested, ol.nested-ol {
  margin-top: 6px;
  margin-bottom: 6px;
  list-style-image: initial;
}

/* ordered list demo (roman) */
ol.roman {
  list-style-type: upper-roman;
  border: 2px dashed #888;
  padding: 10px 46px;
}

/* display:list-item demo on headings */
h3.as-list {
  display: list-item;
  list-style: square inside; /* shorthand list-style */
  margin-left: 18px;
  padding-left: 6px;
}

/* ---- Table demo ---- */
table.tech-table {
  border-collapse: collapse; /* one of the required properties */
  empty-cells: show;         /* show borders even for empty cells */
}

table.tech-table caption {
  caption-side: bottom; /* required */
  padding: 6px 0;
  font-style: italic;
  color: #c8c8c8;
}

table.tech-table th,
table.tech-table td {
  border: 1px solid rgba(255,255,255,0.18);
  vertical-align: top;
}

table.tech-table thead th {
  background: rgba(255,255,255,0.10);
}

table.tech-table tbody tr:nth-child(even) td {
  background: rgba(255,255,255,0.03);
}

/* colgroup/col styling (visible column grouping) */
table.tech-table col.col-area  { background: rgba(124,255,178,0.05); }
table.tech-table col.col-tech  { background: rgba(179,139,255,0.05); }
table.tech-table col.col-usage { background: rgba(255,211,110,0.05); }
table.tech-table col.col-notes { background: rgba(255,255,255,0.03); }

/* Mini tables to demonstrate border models */
table.demo-collapse {
  border-collapse: collapse;
}

table.demo-separate {
  border-collapse: separate;  /* second required model */
  border-spacing: 10px 4px;   /* required property */
}

table.demo-collapse caption,
table.demo-separate caption {
  caption-side: top;
  padding: 4px 0;
  font-style: italic;
  color: #c8c8c8;
}