/**
Theme Name: TimexSinclair
Theme URI: https://www.timexsinclair.com/
Author: David Anderson
Description: Standalone theme for timexsinclair.com (grown out of the former Astra child theme). Layout, typography and colours live in assets/css/theme.css; this file keeps the site's long-standing content styles.
Version: 2.0.0
Requires PHP: 8.1
Text Domain: timexsinclair
*/

.entry-content[data-ts-blocks-layout] > ul,.entry-content[data-ts-blocks-layout] > ol {margin-left: 3em;}

.articletag {font-size: 80%; background-color: #545454; border-radius: 10%; margin-left: 5px; padding: 0px 3px; float: right; white-space: nowrap; text-align: center;}
.arttagbutton {font-size: 80%; background-color: #545454; border-radius: 10%; margin-left: 5px; padding: 2px 3px; white-space: nowrap; text-align: center; font-weight: bold; color: black;}

.computertag {font-size: 80%; background-color: #545454; border-radius: 10%; margin-left: 5px; margin-bottom: 2px; padding: 0px 3px; white-space: nowrap; text-align: center; font-weight: 900;}
.booktag {font-size: 80%; background-color: #545454; border-radius: 10%; margin-right: 10px; padding: 0px 3px; display: inline; white-space: nowrap; text-align: center;}
span.archivebutton, span.downloadbutton {margin: .7em 1em .7em 0; display: inline-block;}
div.notonline {margin: 1em; padding: 1em; background-color: lightgoldenrodyellow;}

.breadcrumb {font-size: 16px; font-weight: bold; margin-bottom: 10px;}

.wp-block-list {padding-left: 2rem;}

/* div a button {margin-bottom: .2em; font-size: 90%; padding: 8px;} */


div.issuecontainer {display: flex; flex-direction: row-reverse; width: 100%; align-items: flex-start;}
div.issueimage {float: right; flex:30%; padding-left: 2em;}
div.issuecontent {padding-right: 2em; flex: 70%;}
div.issuecontent div.issueinfo {margin-bottom: 1em;}
div.issuecontent h3 {margin-top: 1em; clear: none;}

.zx80, .microace, .zx81, .ts1000, .ts1500, .ql, .z88 {background-color: #545454; color: #fff; font-weight: bold;}
.ts2068, .ts2000, .tc2068, .zx-spectrum { background-color: #545454; color: #fff; font-weight: bold;}
.downloadable {background-color: #545454; color: #fff; font-weight: bold;}

.articleabstract {padding: 0 0 0.7em 3em; line-height: 1.2;}
.bookinfo {margin-bottom: 1em;}
.postfooter {clear: right; margin: 1.5em 0 0 0; border-top: 1px solid #ccc; padding-top: .9em;}

.band, .band .tangible-paginator-target {
  width: 90%;
  max-width: 1240px;
  margin: 0 auto 4rem auto;
  display: grid;
  grid-template-rows: auto;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.card {
  background: #303030;
  width: 100%;
  text-decoration: none !important;
  color: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  min-height: 100%;
  position: relative;
  top: 0;
  transition: all .1s ease-in;
}

a.card {text-decoration: none;}

.card:hover {
  top: -2px;
  box-shadow: 0 4px 5px rgba(0,0,0,0.2);
}

.card article {
  padding: 20px;
}

.card .thumb {
  /* padding-bottom: 90%; */
  background-size: cover;
  height: 220px;
  background-position: top center;
}

/* typography */
.card h4 {
  font-size: 20px;
  margin: 0;
  color: #fff;
  line-height: 1.4;
}

.card p { 
  line-height: 1.4;
}

.card span {
  font-size: 12px;
  font-weight: bold;
  color: #eee;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 2em 0 0 0;
}

.flextop {align-self: flex-start;}

h3.comsechead { margin: 0em 0 .7em 0; padding: 0 0 .2em .2em;}

/* DivTable.com */
.divTable{
	width: 100%;
	align-content: center;
}
.divTableRow {width: 100%; border-bottom: 1px solid #eee; margin-bottom: .3em; }
.productEntry {
	display: flex; width: 100%; align-items: flex-start; flex-direction: row;
}

.divProdName {flex:20%; padding-left: .7em;}
.divProdDesc {flex:65%; padding-left: 2em;}
.divProdTags {flex:15%; padding-left: 2em; text-align: right;}


.two-col-container {
  display: grid;
  row-gap: 2px;
  grid-template-columns: auto auto;
  padding: 10px;
}

.three-col-container {
  display: grid;
  row-gap: 2px;
  grid-template-columns: auto auto auto;
  padding: 10px;
}

.corner {
  width: 0; 
	height: 0; 
	border-top: 100px solid #ffcc00;
	border-bottom: 100px solid transparent;
	border-right: 100px solid transparent;
}

/* https://codepen.io/martinjkelly/pen/vEOBvL */
 
.corner span {
  position:absolute;
  top: 0px;
  width: 70px;
  left: 4px;
  text-align: center;
  font-size: 16px;
  font-family: arial;
  transform: rotate(-45deg);
  display:block;
	color: #000;
}

div.divTableBody {overflow: hidden;}
div.articlelist {padding-right: 2em; overflow: hidden;}
#myBtnContainer {padding-bottom: .7em;} 
.filterDiv {
  display: none; /* Hidden by default */
}

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

/* Style the buttons */
.arttagbutton {
  border: none;
  outline: none;
  cursor: pointer;
}

/* Add a light grey background on mouse-over */
.arttagbutton:hover {
  background-color: #ddd;
}

/* Add a dark background to the active button */
.arttagbutton.active {
  background-color: #666;
  color: white;
}


@media only screen and (max-width: 750px) {
  /* .band {
    grid-template-columns: 1fr 1fr;
  }
  */
	div.issuecontainer {flex-direction: column;}
	div.issueimage {flex:100%; padding-left: 0em;}
	div.issuecontent {padding-right: 0em; flex: 100%;}
	div.productEntry { flex-direction: column;}
	.divProdName {flex:100%;}
	.divProdDesc {flex:100%; }
	.divProdTags {flex:100%;  text-align: left;}
	.two-col-container {
  	display: block;
  }
  .three-col-container {
  display: block;
}
}

.band .item {max-width: 300px;}

article.computer_media h3 {margin-bottom:0; margin-top: 1rem;}