/* Timeline */

.timeline {
    display: grid;
    grid-template-columns: 1fr 4em 1em 4fr 1px 4fr 1px 4fr 1px 4fr;
    grid-template-rows: 20px repeat(52,94px);
    grid-gap: 4px;

    
}

.timeline div {
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
}


.timeline img {
    height: 90px;
    width: 68px;
    border: solid 1px black;
    border-radius: 4px;
    margin-left: 2px;
    margin-right: 2px;
    filter: drop-shadow(1.5px 1.5px 1.5px dimgray);
}

/* Sidebar Labels */

.sidebarlabel {

    position: relative;
    font-size: 90%;
    font-style: italic;
    font-weight: bold;
    line-height: 0px;
    writing-mode: vertical-lr;
    transform: rotate(180deg);

    border-radius: 3px;
    background-color: white;
    filter: drop-shadow(-1.5px -1.5px 1.5px dimgray);
    border: solid .5px black;
}


.sidebarlabel > a:link {
    color: white;
    text-decoration: none;
}

.sidebarlabel > a:hover {
    text-decoration: underline;
}

.sidebarcut {
    border-top: 0px;
    border-bottom: 0px;
    filter: drop-shadow(0px 0px 0px rgba(0,0,0,0));
    border-radius: 0px;
}

/* Entry Labels */

.coverandlabel {

    display: inline-block !important;
    position: relative;
}

.booklabel {

    box-sizing: border-box;
    font-size: 90%;
    font-style: italic;
    font-weight: bold;
    border-radius: 0px;
    background-color: white;
    border: solid 1px black;
    position: absolute;
    bottom: 5px;

    width: 98%;
    left: 1px;
    filter: drop-shadow(1.5px 1.5px 1.5px dimgray);    
}

/* Label Colors */

.central { background-color: silver; }

.australia { background-color: sienna; color: white; }
.australia > a { color: white; }

.australia-half { background: repeating-linear-gradient(
		-45deg,
		transparent,
		transparent 10px,
		sienna 10px,
		sienna 20px
	      )
	  }
	    
.canada { background-color: orange; }

.finland { background-color: cyan; }

.germany {background-color: black; color: white; }
.germany > a { color: white; }

.swedish { background-color: yellow; }

.unitedkingdom { background-color: crimson; color: white; }
.unitedkingdom > a { color: white; }

.unitedstates { background-color: royalblue; color: white; }
.unitedstates > a { color: white; }

.digital { background-color: dimgray; color: white; }
.digital > a { color: white; }

/* Genre Colors */

.cyberpunk { background-color: black; color: #2CF91D; }
.espionage { background-color: crimson; color: white; }
.historical { background-color: lemonchiffon; color: black; }
.humor { background-color: pink; color: black; }
.licensed { background-color: rgba(255,255,255,.6); color: black; }
.mecha { background-color: #c0c6c7; color: black; }
.military { background-color: black; color: white; }
.multiverse { background-color: cyan; color: black; }
.postapoc { background-color: #2CF91D; color: black; }
.pulp { background-color: yellow; color: black; }
.scifantasy { background-color: purple; color: white; }
.survival { background-color: black; color: red; }
.timetravel { background-color: violet; color: black; }
.uf { background-color: gold; color: black; }
.universal { background-color: white; color: black; }
.western { background-color: sienna; color: white; }

/* Legend */

.legendbox {
    
    display: flex;
    flex-direction: column;
    border: ridge 2px black;
    margin: 10px;
    padding: 10px;
    filter: drop-shadow(3px 3px 3px black);

}

.legendtitle {
    font-size: 150%;
    font-weight: bold;
    font-style: italic;
    
    margin-bottom: 10px;
}

.legendentry {

    font-weight: bold;
    font-style: italic;

    width: 100%;
    height: 32px;
    border: 1px solid black;
    margin: 2px;
    filter: drop-shadow(1.5px 1.5px 1.5px dimgray);

}    

.graphpaper {

    background-color: #e5e5f7;
    opacity: 0.5;
      
    background-image:  linear-gradient(rgba(0,0,255,.10) 2px, transparent 2px), linear-gradient(90deg, rgba(0,0,255,.10) 2px, transparent 2px), linear-gradient(rgba(0,0,255,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,255,.10) 1px, #e5e5f7 1px);
    background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
      
}
  
/* Grid Columns */

.gamelist {
    grid-column: 1;
    border-width: 0px !important;
    text-decoration: underline;
}

.year {
    grid-column: 2;
    border-width: 0px !important;
    background-color: black;
    color: white;
    font-weight: bold;
    border-width: 0px !important;
    border-radius: 0px !important;
}

/* Grid Rows */

.allrows {
    grid-row: 1/54;
}

.timeline-index {
    grid-row: 1;
    color: white;
    position: sticky;
    top: 0;
    z-index: 100;
    font-weight: bold;
    border-width: 0px !important;
    border-radius: 0px !important;
}

.y1974 { grid-row: 2; }
.y1975 { grid-row: 3; }
.y1976 { grid-row: 4; }
.y1977 { grid-row: 5; }
.y1978 { grid-row: 6; }
.y1979 { grid-row: 7; }
.y1980 { grid-row: 8; }
.y1981 { grid-row: 9; }
.y1982 { grid-row: 10; }
.y1983 { grid-row: 11; }
.y1984 { grid-row: 12; }
.y1985 { grid-row: 13; }
.y1986 { grid-row: 14; }
.y1987 { grid-row: 15; }
.y1988 { grid-row: 16; }
.y1989 { grid-row: 17; }
.y1990 { grid-row: 18; }
.y1991 { grid-row: 19; }
.y1992 { grid-row: 20; }
.y1993 { grid-row: 21; }
.y1994 { grid-row: 22; }
.y1995 { grid-row: 23; }
.y1996 { grid-row: 24; }
.y1997 { grid-row: 25; }
.y1998 { grid-row: 26; }
.y1999 { grid-row: 27; }
.y2000 { grid-row: 28; }
.y2001 { grid-row: 29; }
.y2002 { grid-row: 30; }
.y2003 { grid-row: 31; }
.y2004 { grid-row: 32; }
.y2005 { grid-row: 33; }
.y2006 { grid-row: 34; }
.y2007 { grid-row: 35; }
.y2008 { grid-row: 36; }
.y2009 { grid-row: 37; }
.y2010 { grid-row: 38; }
.y2011 { grid-row: 39; }
.y2012 { grid-row: 40; }
.y2013 { grid-row: 41; }
.y2014 { grid-row: 42; }
.y2015 { grid-row: 43; }
.y2016 { grid-row: 44; }
.y2017 { grid-row: 45; }
.y2018 { grid-row: 46; }
.y2019 { grid-row: 47; }
.y2020 { grid-row: 48; }
.y2021 { grid-row: 49; }
.y2022 { grid-row: 50; }
.y2023 { grid-row: 51; }
.y2024 { grid-row: 52; }
.y2025 { grid-row: 53; }