<?php
  header("Content-Type: text/css");

  $colours = array(
  //'yellow' => array( 'bg' => '#EAD177', 'fg' => '#EABB11'),
    'yellow' => array( 'bg' => '#EAD067', 'fg' => '#EABB11'),
    'purple' => array( 'bg' => '#C5A5EA', 'fg' => '#A25CF4'),
    'green'  => array( 'bg' => '#96E19D', 'fg' => '#67BD6F'),
    'blue'   => array( 'bg' => '#96BEE1', 'fg' => '#659FD5'),
    'red'    => array( 'bg' => '#D58F8F', 'fg' => '#D55757'),
  );

?>

/* CSS stylesheet for DDR score table */
/* 2011-01-29 Anne Bennett <anne@porcupine.ca> */

.footer {
  font-size:                  50%;
}


/* ====== borders ===== */

table.ddr {
  border-style:               solid;
  border-width:               2px;
  border-collapse:            collapse;
  border-color:               white;
}

table.ddr th, 
table.ddr td {
  border-style:               solid;
  border-width:               1px;
  border-color:               black;
}

/* merge title/artist and bpm columns (no border) */
table.ddr tr > td:first-child {
  border-right-style:         hidden;
}
table.ddr tr > td:first-child +td {
  border-left-style:          hidden;
}


/* ====== background and text colours ===== */

body {
  color:                      black;
  background-color:           white;
}

table.ddr {
  color:                      white;
  background-color:           black;
}
table.ddr tr > th {
  background-color:           black;
  color:                      white;
}
table.ddr tr > td {
  background-color:           inherit; /* from row */
  color:                      inherit; /* from row */
}

table.ddr tr.yellow {
  background-color:           <?php print($colours["yellow"]["bg"]); ?>;
  color:                      <?php print($colours["yellow"]["fg"]); ?>;
}
table.ddr tr.yellow > td.na {
  background-color:           <?php print($colours["yellow"]["fg"]) ?>;
  color:                      white; /* not used; satisfy css validator */
}
table.ddr tr.purple {
  background-color:           <?php print($colours["purple"]["bg"]); ?>;
  color:                      <?php print($colours["purple"]["fg"]); ?>;
}
table.ddr tr.purple > td.na {
  background-color:           <?php print($colours["purple"]["fg"]); ?>;
  color:                      white; /* not used; satisfy css validator */
}
table.ddr tr.green {
  background-color:           <?php print($colours["green"]["bg"]); ?>;
  color:                      <?php print($colours["green"]["fg"]); ?>;
}
table.ddr tr.green > td.na {
  background-color:           <?php print($colours["green"]["fg"]); ?>;
  color:                      white; /* not used; satisfy css validator */
}
table.ddr tr.blue {
  background-color:           <?php print($colours["blue"]["bg"]); ?>;
  color:                      <?php print($colours["blue"]["fg"]); ?>;
}
table.ddr tr.blue > td.na {
  background-color:           <?php print($colours["blue"]["fg"]); ?>;
  color:                      white; /* not used; satisfy css validator */
}
table.ddr tr.red {
  background-color:           <?php print($colours["red"]["bg"]); ?>;
  color:                      <?php print($colours["red"]["fg"]); ?>;
}
table.ddr tr.red > td.na {
  background-color:           <?php print($colours["red"]["fg"]); ?>;
  color:                      white; /* not used; satisfy css validator */
}

/* song title and artist */
table.ddr tr > td:first-child {
  color:                      black;
}
/* bpm */
table.ddr tr > td:first-child +td {
  color:                      white;
}
/* score */
table.ddr tr > td:first-child +td +td                 > div > div:first-child +div,
table.ddr tr > td:first-child +td +td +td             > div > div:first-child +div,
table.ddr tr > td:first-child +td +td +td +td         > div > div:first-child +div,
table.ddr tr > td:first-child +td +td +td +td +td     > div > div:first-child +div,
table.ddr tr > td:first-child +td +td +td +td +td +td > div > div:first-child +div {
  color:                      black;
}

/* ====== column widths ===== */

/* title and artist */
table.ddr tr > td:first-child {
  width:                      45%;
}
/* bpm */
table.ddr tr > td:first-child +td {
  width:                      5%;
}
/* scores  */
table.ddr tr > td:first-child +td +td,
table.ddr tr > td:first-child +td +td +td,
table.ddr tr > td:first-child +td +td +td +td,
table.ddr tr > td:first-child +td +td +td +td +td,
table.ddr tr > td:first-child +td +td +td +td +td +td {
  width:                      10%;
}

/* ====== display positions and text ===== */

table.ddr {
  padding:                    3px;
}

/* headers */
/* title and artist */;
table.ddr tr > th:first-child {
  font-size:                  130%;
  font-weight:                bold;
  text-align:                 center;
}
/* bpm, scores */
table.ddr tr > th:first-child +th,
table.ddr tr > th:first-child +th +th,
table.ddr tr > th:first-child +th +th +th,
table.ddr tr > th:first-child +th +th +th +th,
table.ddr tr > th:first-child +th +th +th +th +th,
table.ddr tr > th:first-child +th +th +th +th +th +th {
  font-size:                  15%;
  font-weight:                normal;
  font-variant:               small-caps;
}
/* bpm only */
table.ddr tr > th:first-child +th {
  font-style:                 italic;
}

/* song title */
table.ddr tr > td:first-child > div:first-child {
  font-weight:                bold;
}
/* artist */
table.ddr tr > td:first-child > div:first-child +div {
  font-style:                 italic;
}
/* bpm */
table.ddr tr > td:first-child +td {
  font-style:                 italic;
}

/* title and artist */
table.ddr tr > td:first-child {
  padding:                    0.2em 0     0.2em 0.5em;
}
/* bpm */
table.ddr tr > td:first-child +td {
  padding:                    0     0.3em 0     0;
}
/* scores */
table.ddr tr > td:first-child +td +td,
table.ddr tr > td:first-child +td +td +td,
table.ddr tr > td:first-child +td +td +td +td,
table.ddr tr > td:first-child +td +td +td +td +td,
table.ddr tr > td:first-child +td +td +td +td +td +td {
  padding:                    0.2em;
}

/* bpm */
table.ddr tr > td:first-child +td {
  text-align:                 right;
  font-size:                  1.2em;
}

/* Now it gets cute so we can force the difficulty level and score */
/* to the left and right respectively, while keeping them on one line */
/* and letting them overlap if the table cell gets narrow.  */
/* To accomplish this we need a containing block which is "positioned" */
/* and which has a height specified: */
table.ddr tr > td:first-child +td +td                 > div,
table.ddr tr > td:first-child +td +td +td             > div,
table.ddr tr > td:first-child +td +td +td +td         > div,
table.ddr tr > td:first-child +td +td +td +td +td     > div,
table.ddr tr > td:first-child +td +td +td +td +td +td > div {
  position:                   relative; /* required for absolute in child to work */
  height:                     3.2em;    /* required for absolute in child to work */
                                        /* (overridden by taller contained elements, */
                                        /* but used to position children) */
  width:                      4em;      /* make sure there's enough room for AA score */
}
/* ... and the contained blocks can use absolute positioning: */

/* difficulty level */
table.ddr tr > td:first-child +td +td                 > div > div:first-child,
table.ddr tr > td:first-child +td +td +td             > div > div:first-child,
table.ddr tr > td:first-child +td +td +td +td         > div > div:first-child,
table.ddr tr > td:first-child +td +td +td +td +td     > div > div:first-child,
table.ddr tr > td:first-child +td +td +td +td +td +td > div > div:first-child {
  width:                      80%; /* may overlap with neighbour */
  position:                   absolute;
  left:                       0;
  padding-left:               0.1em;
  text-align:                 left;
  font-size:                  2.7em;
  font-weight:                bold;
  font-style:                 normal;
}
/* score */
table.ddr tr > td:first-child +td +td                 > div > div:first-child +div,
table.ddr tr > td:first-child +td +td +td             > div > div:first-child +div,
table.ddr tr > td:first-child +td +td +td +td         > div > div:first-child +div,
table.ddr tr > td:first-child +td +td +td +td +td     > div > div:first-child +div,
table.ddr tr > td:first-child +td +td +td +td +td +td > div > div:first-child +div {
  width:                      80%; /* may overlap with neighbour */
  position:                   absolute;
  right:                      0;
  padding-right:              0.1em;
  text-align:                 right;
  font-size:                  2.7em;
  font-weight:                normal;
  font-style:                 italic;
}

/* ====== background image for perfect combo ===== */

/* score */
table.ddr tr > td:first-child +td +td                 > div > div:first-child +div.perf,
table.ddr tr > td:first-child +td +td +td             > div > div:first-child +div.perf,
table.ddr tr > td:first-child +td +td +td +td         > div > div:first-child +div.perf,
table.ddr tr > td:first-child +td +td +td +td +td     > div > div:first-child +div.perf,
table.ddr tr > td:first-child +td +td +td +td +td +td > div > div:first-child +div.perf {
  background-image:           url("perfect-combo.png");
  background-position:        right top;
  background-repeat:          no-repeat;
}