/* Front page at eigenrankings */
/* Section headers + brief guards only; commentary in the parallel
   dashboard-css.md (repo-only, not deployed).  Canonical copy: edit here,
   then copy to ~/Dropbox/Public/assets/dashboard.css for local preview;
   deploy.sh pushes that copy live. */

/* iPad Safari: keep text-autosizing off so the em-based .fwall widths hold. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }


h1 {color:#FFE47A; font-size:1.5em; text-shadow: 1px 2px 0 black; margin: 1em 1em 0 1em; padding: 0.5em 0 0 0;}
h3 {color:#FFE47A; font-size:1.1em; text-shadow: 1px 1px 0 black;}

a:link {text-decoration:none; color:#505050;}
a:visited {text-decoration:none; color:#505050;}
a:hover,a:active {text-decoration:underline; color:#FFE47A;}

/* .clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 10px; 
   clear: both;
	}
*/	

div.main {width:53em; float:left; margin:1.5em 1em;}
div.fwall {width:25.5em; float:left; margin:1.5em 1em;}
/* Fixed heights align the two-column masonry (a 28em tall table beside two
   14em short ones + the 3em gap between them = same total height).  They
   are intentionally a hair under the content so a long table's rows reach
   the paired stack's bottom.  In the single column below 33em the boxes
   would overflow into each other, so the media query drops them there. */
div.short {height:14em;}
div.tall {height:28em;}

		
div.index
    {
    margin: auto;
	min-width:25.5em;
	max-width:55em;
	color:#303030;
	font-family: Calibri;
	/* fluid: shrink the em-based 2-col masonry to fit narrow (iPad-portrait)
	   device widths, full 16px once there is room; see dashboard-css.md */
	font-size: min(16px, 1.7vw);
    padding: 0.5em 1em 1em 1em;
	table-layout: fixed;
	overflow-x: hidden; 
				 
    /* rounded corners */
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
 
    /* gradient */
    background-image: -webkit-gradient(linear, left top, left bottom, from(#606060), to(#808080));
    background-image: -moz-linear-gradient(top, #606060, #808080);
	background-image: -ms-linear-gradient(top, #606060, #808080);
	background-image: linear-gradient(to bottom, #606060, #808080);
 
    /* box shadows */
    -moz-box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
    -webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
    box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
    }

     
/*** table ***/
table.front {
	float:left;
    width:100%;
    border-collapse:collapse;
    text-align:center;
    color:#505050; 
    }
		
table.front a {
	display:block;
	/* text-decoration:underline; */
	}

table.front a:hover,a:active {
	color:#FFE47A;
	}
 
table.front td {
    vertical-align:middle;
	padding-top:0.25em;
	padding-bottom:0.25em;
	padding-left:0.5em;
	padding-right:0.25em;
    }
 
	/*** thead ***/
table.front thead th
       {
	color: #dadada;
	text-shadow: 1px 1px 0 black;
    padding: 0.5em;
    background-color: #808080;
    background: -webkit-gradient(linear, left top, left bottom, from(#606060), to(#909090));
    background: -moz-linear-gradient(top, #606060, #909090);
	background: -ms-linear-gradient(top, #606060, #909090);
    }

table.front thead tr td  {
    background-color:#efefef;
	text-align:left;
    vertical-align:middle;
    padding:0.6em;
    font-size:0.8em;
    }
	
table.front thead th a {color: #efefef;text-align: left;}

table.front thead th:first-child {
	text-align: left;
    }
	/*** tbody  ***/
table.front tbody td:first-child {
	text-align: left;
    }
table.front tbody td:last-child {
	text-align: left; border-right: solid 1px #505050;
    }
	
table.front tbody tr:nth-child(odd) {
    background-color: #fafafa;
    }
 
table.front tbody tr:nth-child(even) {
    background-color: #efefef;
	}
			
table.front tbody tr:last-child {
    border-bottom: solid 1px #505050;
    }
 
/*** separator row pseudo-class ***/
table.front tbody tr.separator {
    background-color: #808080;
    background: -webkit-gradient(linear, left top, left bottom, from(#606060), to(#909090));
    background: -moz-linear-gradient(top, #606060, #909090);
	background: -ms-linear-gradient(top, #606060, #909090);
    color: #dadada;
	text-shadow: 1px 1px 0 black;
    }

/*** tfoot ***/
table.front tfoot{
	text-align:center;
    color:white;
	text-shadow: 1px 1px 0 black;
	background: -webkit-gradient(linear, left bottom, left top, from(#606060), to(#909090));
    background: -moz-linear-gradient(bottom, #606060, #909090);
	background: -ms-linear-gradient(bottom, #606060, #909090);
    text-shadow: 0 1px 1px rgba(255,255,255,0.3);
	-moz-box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
    -webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
    box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
	border-right: solid 1px #505050;
    }
	
table.front tbody td:nth-child(2) {
	text-align: left;
    }
table.front thead th:nth-child(2) {
	text-align: left;
    }


table.hover tbody tr:hover {
    background-color: #808080;
	background: -webkit-gradient(linear, left top, left bottom, from(#606060), to(#909090));
    background: -moz-linear-gradient(top, #606060, #909090);
	background: -ms-linear-gradient(top, #606060, #909090);
    color: #FFE47A; 
	text-shadow: 1px 1px 0 black;
    }
    
table.hover tbody tr:hover a {color:#FFE47A;}

th.tableHeader {color:#FFE47A; font-size:1.1em; text-shadow: 1px 1px 0 black;}


/* for seasons summary */

td.gold {background-color:#D4AF37;
	background: -webkit-gradient(linear, left top, left bottom, from(#D4AF37), to(#DDBF5F));
	background: -moz-linear-gradient(top,#D4AF37,#DDBF5F);
	background: -ms-linear-gradient(top,#D4AF37,#DDBF5F);	
	text-shadow:none;
	color:inherit;}
td.silver {background-color:#C0C0C0;
	background: -webkit-gradient(linear, left top, left bottom, from(#C0C0C0), to(#DDDDDD)); 
	background: -moz-linear-gradient(top,#C0C0C0,#DDDDDD);
	background: -ms-linear-gradient(top,#C0C0C0,#DDDDDD);	
	text-shadow:none;
	color:inherit;}
td.bronze {background-color:#B89470;
	background: -webkit-gradient(linear, left top, left bottom, from(#B89470), to(#C6A98D));
	background: -moz-linear-gradient(top,#B89470,#C6A98D);
	background: -ms-linear-gradient(top,#B89470,#C6A98D);
	text-shadow:none;
	color:inherit;}


/* Narrow screens: single-column stack */
/* Once two columns no longer fit, stack the tables in one full-width
   column with natural heights.  The short/tall fixed heights exist only
   to align the two-column masonry; below this breakpoint they would let
   taller content overflow into the next table (squeezing).  Dropping them
   makes the vertical rhythm match the two-column state.  See
   dashboard-css.md. */
@media (max-width: 33em) {
	div.index { max-width: none; font-size: min(16px, 3.4vw); }
	div.main  { width: auto; float: none; margin: 1em 0; overflow-x: auto; }
	div.fwall { width: auto; float: none; height: auto; margin: 1em 0; }
	div.short, div.tall { height: auto; }
	table.front { float: none; width: 100%; }
	}