@IMPOrt url('../base.css');

:root {
	--green-bg-image-games:url('../img/green-burnished-metal.jpg');
	--dark-green-bg-image-games:url('../img/dark-green-burnished-metal.jpg');
	--gray-bg-image-games:url('../img/gray-burnished-metal.jpg');
  --light-gray-image-games:url('../img/light-gray-burnished-metal.jpg');
}

html {
	height:1300px;
}
div.categorySummary {
	width:100%;
	margin-bottom:5px;
}

div.tab {
  background-image:var(--green-bg-image-games);
  background-color:var(--bg-green);
  border:3px solid black;
  padding:20px;
  box-shadow:0px 4px 8px 0px black;
  min-height:100px;
  width:800px;
  margin:0px auto;
  height:auto;

  div.anchor {
    min-width:50px;
    min-height:50px;
    position:absolute;
    top:140px;
    z-index:20;
  }
  div.anchor ~ span {
    cursor:default;

    color:var(--text-dark-green);
    a {
      color:var(--text-dark-green);
    }
    a:hover {
      color:var(--text-dark-red);
    }
    a:active {
      color:red;
    }

  }
  div.anchor ~ div.tabContent {
    display:none;
    position:absolute;
    left:50%;
    width:800px;
    min-height:100px;
    margin-left:-400px;
    margin-top:40px;
    padding:23px;
    border:3px solid black;
    background-image:var(--green-bg-image-games);
    background-color:var(--bg-dark-green);
    box-shadow:0px 4px 8px 0px black;
  }
  div.anchor:target ~ span {
    color:var(--text-dark-red);
    a {
      color:var(--text-dark-red);
    }
  }
  div.anchor:target ~ div.tabContent {
    display:flow
  }
}

a.entryAnchor {
  text-decoration:none;
  div.programEntry {
    text-decoration:none;
    background:var(--gray-bg-image-games);
    color:var(--white);
    background-size:200px;
    background-attachment:fixed;
    box-shadow:0px 4px 8px 0px black;
    border:3px solid black;
    width:100%;
    height:100px;
    display:flex;
    overflow-wrap:normal;
    overflow:hidden;
    justify-content:space-between;
    div.title {
      align-items:center;
      display:flex;
      width:56%;
      height:100%;
      img {
        height:50%;
      }
    }
    div.description {
      width:44%;
      border:1px solid black;
      padding:5px;
      background-color:#00000040;
      height:100%;
      overflow:scroll;
      p {
        display:inline-block;
        vertical-align:center;
      }
    }
  }
  div.hilight {
    padding:8px;
    display:flex;
    width:100%;
    height:100%;
    background-color:#ffffff00;
  }
}

a.entryAnchor:hover {
  div.description {
    color:var(--white);
  }
  div.title {
    color:var(--text-light-red);
  }
  div.hilight {
    background-color:#ffffff08;
  }
}

a.entryAnchor:active {
  div.description {
    color:red;
  }
  div.title {
    color:red;
  }
  div.hilight {
    background-color:#ffffff15;
  }
}

div.buttons {
  margin-top:10px;
  display:flex;
  justify-content:space-around;
  align-items:center;
  flex-wrap:wrap;
  width:100%;
}

dl.linkList {
  background-color:var(--code-block-black);
  border:3px solid black;
  box-shadow:inset 0px 0px 10px 3px black;
  color:var(--white);
  padding:10px;
  list-style-type:square;
  overflow:scroll;
  a:hover {
    text-decoration:none;
  }
  a:last-child {
    div {
      border:0px;
    }
  }
  div {
    display:list-item;
    padding:5px;
    border-bottom:2px solid var(--text-dark-red);
    dt {
      color:var(--white);
      width:50%;
      border-bottom:3px dashed var(--text-dark-red);
      padding-bottom:3px;
    }
    dd {
      color:var(--white);
    }
  }
  div:hover {
    background-color:#ffffff03;
    dt {
      color:var(--text-dark-red);
    }
    dd {
    }
  }
  div:active {
    background-color:#ffffff15;
    dt {
      color:red;
    }
    dd {
    }
  }
}

.programEntry:hover {
	color:var(--text-light-red);
	text-decoration:none;
}
.programEntry:active {
	color:red;
}

@media only screen and (max-width:800px) {
  div.tab {
    width:100%;
    min-width:0px;
    border:0px;
    border-top:3px solid black;
    border-bottom:3px solid black;
    div.anchor ~ div.tabContent {
      margin:0px auto;
      margin-top:40px;
      left:0px;
      width:100%;
      border:0px;
      border-top:3px solid black;
      border-bottom:3px solid black;
    }
  }
}