/* Styles for the shaft tables: stiffness (oars/shafts/stiffness) and, at the
   end of the file, weight (oars/shafts/construction).

   Stiffness table
   Builds on paddle_table.css and restores the compact layout of the old site's
   stiffness table, using the new template's paddle table colours.

   Markup:
     <table class="paddle_table stiffness_table">   (no "responsive" class)
     <tr class="small_row">                          on the two H (cm) scale rows

   Every selector starts with table.paddle_table.stiffness_table so it wins over
   paddle_table.css regardless of the order the stylesheets are loaded in. */

table.paddle_table.stiffness_table {
	width: 100%;
	margin-bottom: 20px;
	font-family: Arial, Helvetica, sans-serif;
	/*font-size: 12px;*/
	line-height: 100%;
}

/* All cells: compact padding instead of the 9px 10px from responsive_tables.css */
table.paddle_table.stiffness_table td,
table.paddle_table.stiffness_table th {
	padding: 2px 3px;
	text-align: center;
	vertical-align: middle;
}

/* Header (F, G, H (cm), Stiff --- Soft): drop the forced 42px height */
table.paddle_table.stiffness_table th {
	height: auto !important;
	padding: 3px;
	white-space: nowrap;
}

table.paddle_table.stiffness_table th.side_border {
	border-style: none solid;
	border-color: #005F7F;
}

/* Data rows: 35px instead of 60px, stripes on the 1st, 3rd, 5th... row of each
   group (rows 4, 6, 8, 10, 12) instead of paddle_table's 2n+3 pattern */
table.paddle_table.stiffness_table tr:nth-child(n+3) {
	height: 35px;
	background: none;
}

table.paddle_table.stiffness_table tr:nth-child(2n+4) {
	background: #E4E7F3;
}

/* H (cm) scale rows: small text, a divider after every value, no background */
table.paddle_table.stiffness_table tr.small_row {
	height: auto;
	background: none;
	border-style: none;
}

table.paddle_table.stiffness_table tr.small_row td {
	border-style: none solid none none;
	border-width: 1px;
	border-color: #005F7F;
	padding: 3px 1px;
	white-space: nowrap;
}

/* Empty spacer cell at the start of the second scale row */
table.paddle_table.stiffness_table tr.small_row td[colspan] {
	border-style: none;
}

/* ...so the first value after it needs its own left border */
table.paddle_table.stiffness_table tr.small_row td[colspan] + td {
	border-left-style: solid;
}

/* Narrow screens: scroll the whole table sideways instead of the pinned-column
   split from responsive_tables.js, which cannot handle the rowspans here.
   The scroll.png hint in td.top_left is shown by responsive_tables.css. */
@media only screen and (max-width: 1200px) {
	table.paddle_table.stiffness_table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	table.paddle_table.stiffness_table > tbody {
		display: table;
		width: 100%;
	}

	table.paddle_table.stiffness_table td.top_left img {
		height: 32px;
	}
}


/* Shade every data row instead of every other one, for paddle tables with the
   usual two header rows (e.g. oars/shafts/inboard-settings)
   Markup: <table class="paddle_table shaded_rows responsive"> */
table.paddle_table.shaded_rows tr:nth-child(n+3) {
	background: #E4E7F3;
}


/* Shaft weight table (oars/shafts/construction)
   Markup: <table class="paddle_table weight_table responsive">
   paddle_table.css styles data rows from the 3rd row on (two header rows); this
   table has one header row, so start at row 2 and shade every data row.
   The Sculls / Sweeps cells stay white through td.light_bg.
   The fixed height (4 lines of values + padding) keeps the rows aligned with
   the pinned first column that responsive_tables.js creates on narrow screens. */
table.paddle_table.weight_table tr:nth-child(n+2) {
	height: 95px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 150%;
	text-align: center;
	border: 1px solid #005F7F;
	background: #E4E7F3;
}