/* File Details:
<!-- #bbinclude "filestatps.pl" -->
                        Filename:     css-smartph.css
                        Filesize:     4497 Byte
                        Last update:  08-Aug-2017 10:22 +1200
                        By:           Peter Scheuerl peter@scheuerl.net
<!-- end bbinclude -->
*/

/* browser prefix: -webkit- linear gradient is in for old Android browser, as that has significant share */
/* imported for screens smaller than 737 (iphone plus in 2017) */

#contentcontainer {margin: 0; padding: 0; background: none;}
#content {width: auto; padding: 5px; border-radius: 0; border: 0;}
.logo {float: none;}
.logo a {display: block;}
.logo img {padding: 10px; max-width: calc(100% - 20px);}
.penaltylist tr.boat td {font-size: 18px;}
.penaltylist tr:not(.boat) td {padding: 15px 5px; font-size: 16px;}	/* for penalties table */
.penaltylist tr:not(.boat) td.remarks {padding: 0 5px;}	/* for penalties description */
label {display: block; margin-bottom: 10px; position: relative;}
label select {position: absolute; left: 11em;}
@supports not (display: grid) {
  @media only screen and (orientation : portrait) /* For the few without grid support, old android mainly */
  {
    .penaltylist:before {content: "Turn device to landscape for desktop layout / additional information"; display: block; padding: 10px 0 20px 0; color: #ed135a; font-size: 24px;}
    .penaltylist th:nth-child(4), .penaltylist th:nth-child(5) {display: none;}
    .penaltylist td:nth-child(4), .penaltylist td:nth-child(5) {display: none;} /*do initially not show the observation and Rule */
    /* for protest table */
    .protestlist th:nth-child(n+1), .protestlist td:nth-child(n+1) {display: table-cell;}
    .protestlist th:nth-child(6), .protestlist th:nth-child(7) {display: none;}
    .protestlist td.Decision, .protestlist td.Rules {display: none;}
  }
}

@supports (display: grid) {
  .protestlist:before {content: none;}
  .protestlist {display: block;}
  .protestlist td, .protestlist th {border-right: 0;}
  .protestlist tr {display: grid; padding-bottom: 10px; grid-gap: 2px; grid-template-columns: 2em 3em auto auto 6em;}

  .ProtestNo {grid-row: 1 / span 4; grid-column: 1 / span 1;}
  .RaceNo    {grid-row: 1 / span 1; grid-column: 2 / span 1;}
  .Date      {grid-row: 1 / span 1; grid-column: 3 / span 1;}
  .Rules     {grid-row: 1 / span 1; grid-column: 4 / span 1;}
  .Panel     {grid-row: 1 / span 1; grid-column: 5 / span 1;}
  .Protestor {grid-row: 2 / span 1; grid-column: 2 / span 2;}
  .Protestee {grid-row: 2 / span 1; grid-column: 4 / span 2;}
  .Witness   {grid-row: 3 / span 1; grid-column: 3 / span 3; opacity: .6;}
  .Decision  {grid-row: 4 / span 1; grid-column: 2 / span 4; padding-right: 5px;}

  .Witness:before {content: "Witness: ";}
  .Witness:empty:before {content: "";}
  .protestlist th {background: #dbebf5;}
  .ProtestNo, .Protestor, .Protestee {font-weight: bold;}
  .Date br, th.Panel br, th.Decision br {display: none;}
  th.Protestor, th.Protestee, th.Witness, th.Decision, th.Rules, th.Date, th.Panel,
  td.Protestor, td.Protestee, td.Witness, td.Decision, td.Rules, td.Panel {text-align: left;}


  .penaltylist {display: block;}
  .penaltylist td, .penaltylist th {border: 0;}
  .penaltylist th {background: #dbebf5;}
  .penaltylist tr {display: grid; padding-bottom: 5px; grid-gap: 2px; grid-template-columns: auto auto 20% 20%; border-bottom: 1px solid #788bad;}
  .penaltylist tr:not(.boat) td {padding: 8px 5px; font-size: 16px;}	/* for penalties table */
/* Interaktivity */
/*
  .penaltylist tr:first-child {grid-template-rows: auto auto auto;}
  .penaltylist tr {grid-template-rows: auto 0 0;}
  .penaltylist tr:hover {grid-template-rows: auto auto auto;}
 */

/*  Boat number is standard block element */
  .penaltylist tr.boat {padding-bottom: 0;}
  tr.boat, tr.boat td  {display: block; width: 100%; border: none;}

  .date    {grid-row: 1 / span 1; grid-column: 1 / span 1; font-weight: bold;}
  .race    {grid-row: 1 / span 1; grid-column: 2 / span 1;}
  .legno   {grid-row: 1 / span 1; grid-column: 3 / span 1;}
  .ruleno  {grid-row: 1 / span 1; grid-column: 4 / span 1;}
  .actionconsequence {grid-row: 3 / span 1; grid-column: 1 / span 2;}
  .judges  {grid-row: 3 / span 1; grid-column: 3 / span 2;}
  .remarks {grid-row: 2 / span 1; grid-column: 1 / span 4; }

/*
  td.remarks, td.actionconsequence, td.judges  {transform: rotateX(90deg);}
  tr:hover > td.remarks, tr:hover > td.actionconsequence, tr:hover > td.judges  {transform: rotateX(0deg);}
 */
}