/* 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:           #EAD067;
  color:                      #EABB11;
}
table.ddr tr.yellow > td.na {
  background-color:           #EABB11;
  color:                      white; /* not used; satisfy css validator */
}
table.ddr tr.purple {
  background-color:           #C5A5EA;
  color:                      #A25CF4;
}
table.ddr tr.purple > td.na {
  background-color:           #A25CF4;
  color:                      white; /* not used; satisfy css validator */
}
table.ddr tr.green {
  background-color:           #96E19D;
  color:                      #67BD6F;
}
table.ddr tr.green > td.na {
  background-color:           #67BD6F;
  color:                      white; /* not used; satisfy css validator */
}
table.ddr tr.blue {
  background-color:           #96BEE1;
  color:                      #659FD5;
}
table.ddr tr.blue > td.na {
  background-color:           #659FD5;
  color:                      white; /* not used; satisfy css validator */
}
table.ddr tr.red {
  background-color:           #D58F8F;
  color:                      #D55757;
}
table.ddr tr.red > td.na {
  background-color:           #D55757;
  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;
}