{
  box-sizing: border-box;
}

@font-face {
    font-family: 'ITCBenguaitGothicBold'; /*a name to be used later*/
    src: url('ITCBenguiatGothicBold.otf'); /*URL to font*/
}

.lightbox .lb-image {
  height : 85vh !important;
  width : auto !important;
  display: block;
  /* height: auto; */
  border-radius: 3px;

  /* Image border */
  border: 4px solid white;
}

.buttonbox {
	position:fixed;
	left:5px;
	right:0px;
	top:0px;
}

.buttontext {
	line-height: 1.0em;
	margin-bottom: 0.25em;
	color: white;
	padding-right: 5px;
	font-family: "ITCBenguaitGothicBold", "Times New Roman", "Times", serif;
	font-size: 1.5rem;
}

/* Center website */
.main {
  max-width: 1000
  margin: auto;
}

h1 {
  font-size: 3.5rem;
  font-family: "ITCBenguaitGothicBold", "Times New Roman", "Times", serif;
}

h1.black a {
	color: black;
}

h1.black a:hover {
	color:red;
}
h1.black {
	color: black;
	font-weight: bold;
	text-decoration: underline;
}

h1 a {
	color: 0000FF;
	font-weight: bold;
	text-decoration: underline;
}

h2 {
  font-size: 3.0rem;
  font-family: "ITCBenguaitGothicBold", "Times New Roman", "Times", serif;
}

h2 a {
	color: 0000FF;
	font-weight: bold;
	text-decoration: underline;
}

h3 {
  font-size: 2.5rem;
  font-family: "ITCBenguaitGothicBold", "Times New Roman", "Times", serif;
}

h3 a {
	color: 0000FF;
	font-weight: bold;
	text-decoration: underline;
}

h4 {
  font-size: 2.0rem;
  font-family: "ITCBenguaitGothicBold", "Times New Roman", "Times", serif;
}

h4 a {
	color: 0000FF;
	font-weight: bold;
	text-decoration: underline;
}

figcaption {
	font-family: "ITCBenguaitGothicBold", "Times New Roman", "Times", serif;
	color: white;
}

p {
    font-size: 1.75rem;
}

p.black {
    font-size: 1.3rem;
	font-family: "ITCBenguaitGothicBold", "Times New Roman", "Times", serif;
	color:#FFFFFF;
}

p.black a {
	color:#00FFFF;
    font-size: 1.3rem;
}

p.red {
    font-size: 1.75rem;
	font-family: "ITCBenguaitGothicBold", "Times New Roman", "Times", serif;
	color:#FF0000;
}

div.ITC {
	display: inline-block;
	font-family: "ITCBenguaitGothicBold", "Times New Roman", "Times", serif;
	color: white;
}

.row {
  margin: 8px -16px;
}

/* Add padding BETWEEN each column (if you want) */
.row,
.row > .column {
  padding: 4px;
}

/* Create three equal columns that floats next to each other */
.column {
	margin-top: -20px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	display: none; /* Hide columns by default */
	font-family: "ITCBenguaitGothicBold", "Times New Roman", "Times", serif;
	color: white;
}

.bookmarkblock {
	display: inline-block;
	height: 375px;
}


/* Clear floats after rows */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Content */
.content {
  background-color: white;
  padding: 10px;
}

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

.ttable {
	display: table;
	width:75%;
	max-width: 1600px;
	min-width: 800px;
	background-image: url("../images/starfield.jpg");
	font-family: "ITCBenguaitGothicBold", "Times New Roman", "Times", serif;
	}

.trow {
	display: table-row;
	border: 1px solid #FFFFC7;
}

.trowhide {
	visibility: collapse;
}

.tcell {
	display: table-cell;
	padding: 10px;
	color: 00FFFF;
    font-size: 1.25rem;
	border: 1px solid #FFFFC7;
	max-width: 15%;
}

.tcellleft {
	text-align: left;
}

tcell2:hover {
	color: red;
}


a.big {
	color: 0000FF;
	font-weight: bold;
	text-decoration: underline;
    font-size: 1.75rem;
	font-family: "ITCBenguaitGothicBold", "Times New Roman", "Times", serif;
}

a:visited {
	color: 0000FF;
}

a:hover {
	color: red;
}

a.black:active {
	color: red;
}

a.black {
	color: #00FFFF;
	font-weight: bold;
	text-decoration: underline;
    font-size: 1.25rem;
}

a.black:visited {
	color: #00FFFF;
}

a.black:hover {
	color: red;
}

a.black:active {
	color: blue;
}

a.yellow {
	color: 000000;
	font-weight: bold;
	text-decoration: underline;
}

a.yellow:visited {
	color: 00FFFF;
}

a.yellow:hover {
	color: green;
}

a.yellow:active {
	color: blue;
}


.thead {
	font-weight: bold;
	text-decoration: underline;
	color: black;
	background-image: url("../images/paperyellow.jpg");
	border: 0px solid #FFFFC7;
}

/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 3px 10px;
  background-color: white;
  cursor: pointer;
}

/* Add a grey background color on mouse-over */
.btn:hover {
  background-color: #666;
}

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

.btn2 {
  border: none;
  outline: none;
  padding: 6px 8px;
  background-color: white;
  cursor: pointer;
}


.booklist {
    background-color: #eee;
    color: #444;
    border: 1px solid black;
    cursor: pointer;
    padding: 0.25rem;
    width: 30%;
	display: block;
	min-width: 400px;
    text-align: left;
    outline: none;
    font-size: 1rem;
	transition: 0.5s;
    border-radius: 1rem;
	font-family: "ITCBenguaitGothicBold", "Times New Roman", "Times", serif;
	font-size: 1.5rem;
}

.active, .booklist:hover {
    background-color: #ccc;
    width: 40%;
	min-width: 400px;
	transition: 0.5s;
}

.active, .bookdescription:hover {
    background-color: #ccc;
	transition: 0.5s;
}

.bookdescription {
    background-color: #eee;
    color: #444;
    border: 1px solid black;
    cursor: pointer;
    padding: 0.5rem;
    width: 60%;
    text-align: left;
    outline: none;
    font-size: 1.5rem;
	transition: 0.5s;
    border-radius: 1.25rem;
}

.panel {
    padding: 0.8rem;
    display: none;
}

hr {
    display: block;
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 2px;
}
p.nomargin {
    font-size: 1rem;
    text-indent: 1.25rem;
    margin: 0;
}
img {
    border: 0px;
	//display: inline-block;
}

figure {
	float: left;
	text-align: center;
	margin-left: 0px;
	margin-right: 4px;
	display: inline-block;
	color: black;
	height: 380;
	}


/* Style the buttons */
.btnstrength {
  border: none;
  outline: none;
  padding: 3px 10px;
  background-color: #FFFFFF;
  cursor: pointer;
}

/* Add a grey background color on mouse-over */
.btnstrength:hover {
  background-color: #FFFF00;
}

/* Add a dark background color to the active button */
.btnstrength.activestrength {
   background-color: #FFFF00;
   color: Black;
}

/* Style the buttons */
.btnresetall {
  border: none;
  outline: none;
  padding: 3px 10px;
  background-color: black;
  color: white;
  cursor: pointer;
}

/* Add a grey background color on mouse-over */
.btnresetall:hover {
  background-color: white;
   color: black;
}

/* Add a dark background color to the active button */
.btnresetrall.activeresetall {
   background-color: black;
   color: white;
}

/* Style the buttons */
.btncardedition {
  border: none;
  outline: none;
  padding: 3px 10px;
  background-color: white;
  cursor: pointer;
}

/* Add a grey background color on mouse-over */
.btncardedition:hover {
  background-color: #666;
}

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

/* Style the buttons */
.btnrarity {
  border: none;
  outline: none;
  padding: 3px 10px;
  background-color: White;
  cursor: pointer;
}

/* Add a grey background color on mouse-over */
.btnrarity:hover {
  background-color: #000080;
}

/* Add a dark background color to the active button */
.btnrarity.activerarity {
   background-color: #000080;
   color: white;
}

/* Style the buttons */
.btnreaction {
  border: none;
  outline: none;
  padding: 3px 10px;
  background-color: #FFFFFF;
  cursor: pointer;
}

/* Add a grey background color on mouse-over */
.btnreaction:hover {
  background-color: RED;
}

/* Add a dark background color to the active button */
.btnreaction.activereaction {
   background-color: RED;
   color: white;
}

/* Style the buttons */
.btnmycards {
  border: none;
  outline: none;
  padding: 3px 10px;
  background-color: #FFFFFF;
  cursor: pointer;
}

/* Add a grey background color on mouse-over */
.btnmycards:hover {
  background-color: #8B0000;
}

/* Add a dark background color to the active button */
.btnmycards.activemycards {
   background-color: #8B0000;
   color: white;
}

/* Style the buttons */
.btncardtype {
  border: none;
  outline: none;
  padding: 3px 10px;
  background-color: #FFFFFF;
  cursor: pointer;
}

/* Add a grey background color on mouse-over */
.btncardtype:hover {
  background-color: #006400;
}

/* Add a dark background color to the active button */
.btncardtype.activecardtype {
   background-color: #006400;
   color: white;
}

/* Style the buttons */
.btnempire {
  border: none;
  outline: none;
  padding: 3px 10px;
  background-color: white;
  cursor: pointer;
}

/* Add a grey background color on mouse-over */
.btnempire:hover {
  background-color: #666;
}

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

/* Style the buttons */
.btnabilities {
  border: none;
  outline: none;
  padding: 3px 10px;
  background-color: white;
  cursor: pointer;
}

/* Add a grey background color on mouse-over */
.btnabilities:hover {
  background-color: #666;
}

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

/* Style the buttons */
.btnartist {
  border: none;
  outline: none;
  padding: 3px 10px;
  background-color: white;
  cursor: pointer;
  height: 25px;
  max-height: 25px;
}

/* Add a grey background color on mouse-over */
.btnartist:hover {
  background-color: #666;
}

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

/* Style the buttons */
.btncommandpoints {
  border: none;
  outline: none;
  padding: 3px 10px;
  background-color: white;
  cursor: pointer;
}

/* Add a grey background color on mouse-over */
.btncommandpoints:hover {
  background-color: #FF0000;
}

/* Add a dark background color to the active button */
.btncommandpoints.activecommandpoints {
   background-color: #FF0000;
   color: White;
}

/* Style the buttons */
.btneconomypoints {
  border: none;
  outline: none;
  padding: 3px 10px;
  background-color: white;
  cursor: pointer;
}

/* Add a grey background color on mouse-over */
.btneconomypoints:hover {
  background-color: #FF7F00;
}

/* Add a dark background color to the active button */
.btneconomypoints.activeeconomypoints {
   background-color: #FF7F00;
   color: White;
}



/* Style the buttons */
.btnsupplypoints {
  border: none;
  outline: none;
  padding: 3px 10px;
  background-color: white;
  cursor: pointer;
}

/* Add a grey background color on mouse-over */
.btnsupplypoints:hover {
  background-color: #FFFF00;
}

/* Add a dark background color to the active button */
.btnsupplypoints.activesupplypoints {
   background-color: #FFFF00;
   color: Black;
}



/* Style the buttons */
.btnenergypoints {
  border: none;
  outline: none;
  padding: 3px 10px;
  background-color: white;
  cursor: pointer;
}

/* Add a grey background color on mouse-over */
.btnenergypoints:hover {
  background-color: #00FF00;
}

/* Add a dark background color to the active button */
.btnenergypoints.activeenergypoints {
   background-color: #00FF00;
   color: Black;
}



/* Style the buttons */
.btnammopoints {
  border: none;
  outline: none;
  padding: 3px 10px;
  background-color: white;
  cursor: pointer;
}

/* Add a grey background color on mouse-over */
.btnammopoints:hover {
  background-color: #0000FF;
}

/* Add a dark background color to the active button */
.btnammopoints.activeammopoints {
   background-color: #0000FF;
   color: White;
}



/* Style the buttons */
.btnresearchpoints {
  border: none;
  outline: none;
  padding: 3px 10px;
  background-color: white;
  cursor: pointer;
}

/* Add a grey background color on mouse-over */
.btnresearchpoints:hover {
  background-color: #4B0082;
}

/* Add a dark background color to the active button */
.btnresearchpoints.activeresearchpoints {
   background-color: #4B0082;
   color: White;
}

/* Style the buttons */
.btnduplicate {
  border: none;
  outline: none;
  padding: 3px 10px;
  background-color: white;
  cursor: pointer;
}

/* Add a grey background color on mouse-over */
.btnduplicate:hover {
  background-color: #4B0082;
}

/* Add a dark background color to the active button */
.btnduplicate.activeduplicate {
   background-color: #4B0082;
   color: White;
}



/* Style the buttons */
.btnrepairpoints {
  border: none;
  outline: none;
  padding: 3px 10px;
  background-color: white;
  cursor: pointer;
}

/* Add a grey background color on mouse-over */
.btnrepairpoints:hover {
  background-color: #9400D3;
}

/* Add a dark background color to the active button */
.btnrepairpoints.activerepairpoints {
   background-color: #9400D3;
   color: White;
}



/* Style the buttons */
.btncommandcost {
  border: none;
  outline: none;
  padding: 3px 10px;
  background-color: white;
  cursor: pointer;
}

/* Add a grey background color on mouse-over */
.btncommandcost:hover {
  background-color: #FF0000;
}

/* Add a dark background color to the active button */
.btncommandcost.activecommandcost {
   background-color: #FF0000;
   color: White;
}



/* Style the buttons */
.btneconomycost {
  border: none;
  outline: none;
  padding: 3px 10px;
  background-color: white;
  cursor: pointer;
}

/* Add a grey background color on mouse-over */
.btneconomycost:hover {
  background-color: #FF7F00;
}

/* Add a dark background color to the active button */
.btneconomycost.activeeconomycost {
   background-color: #FF7F00;
   color: White;
}



/* Style the buttons */
.btnsupplycost {
  border: none;
  outline: none;
  padding: 3px 10px;
  background-color: white;
  cursor: pointer;
}

/* Add a grey background color on mouse-over */
.btnsupplycost:hover {
  background-color: #FFFF00;
}

/* Add a dark background color to the active button */
.btnsupplycost.activesupplycost {
   background-color: #FFFF00;
   color: Black;
}



/* Style the buttons */
.btnenergycost {
  border: none;
  outline: none;
  padding: 3px 10px;
  background-color: white;
  cursor: pointer;
}

/* Add a grey background color on mouse-over */
.btnenergycost:hover {
  background-color: #00FF00;
}

/* Add a dark background color to the active button */
.btnenergycost.activeenergycost {
   background-color: #00FF00;
   color: Black;
}



/* Style the buttons */
.btnammocost {
  border: none;
  outline: none;
  padding: 3px 10px;
  background-color: white;
  cursor: pointer;
}

/* Add a grey background color on mouse-over */
.btnammocost:hover {
  background-color: #0000FF;
}

/* Add a dark background color to the active button */
.btnammocost.activeammocost {
   background-color: #0000FF;
   color: White;
}



/* Style the buttons */
.btnresearchcost {
  border: none;
  outline: none;
  padding: 3px 10px;
  background-color: white;
  cursor: pointer;
}

/* Add a grey background color on mouse-over */
.btnresearchcost:hover {
  background-color: #4B0082;
}

/* Add a dark background color to the active button */
.btnresearchcost.activeresearchcost {
   background-color: #4B0082;
   color: White;
}



/* Style the buttons */
.btnrepaircost {
  border: none;
  outline: none;
  padding: 3px 10px;
  background-color: white;
  cursor: pointer;
}

/* Add a grey background color on mouse-over */
.btnrepaircost:hover {
  background-color: #9400D3;
}

/* Add a dark background color to the active button */
.btnrepaircost.activerepaircost {
   background-color: #9400D3;
   color: White;
}

/* Style the buttons */
.btnheavyweapons {
  border: none;
  outline: none;
  padding: 3px 10px;
  background-color: white;
  cursor: pointer;
}

/* Add a grey background color on mouse-over */
.btnheavyweapons:hover {
  background-color: #FF0000;
}

/* Add a dark background color to the active button */
.btnheavyweapons.activeheavyweapons {
   background-color: #FF0000;
   color: White;
}



/* Style the buttons */
.btnphasers {
  border: none;
  outline: none;
  padding: 3px 10px;
  background-color: white;
  cursor: pointer;
}

/* Add a grey background color on mouse-over */
.btnphasers:hover {
  background-color: #FF7F00;
}

/* Add a dark background color to the active button */
.btnphasers.activephasers {
   background-color: #FF7F00;
   color: White;
}



/* Style the buttons */
.btncarddamage {
  border: none;
  outline: none;
  padding: 3px 10px;
  background-color: white;
  cursor: pointer;
}

/* Add a grey background color on mouse-over */
.btncarddamage:hover {
  background-color: #FFFF00;
}

/* Add a dark background color to the active button */
.btncarddamage.activecarddamage {
   background-color: #FFFF00;
   color: Black;
}



/* Style the buttons */
.btndefenses {
  border: none;
  outline: none;
  padding: 3px 10px;
  background-color: white;
  cursor: pointer;
}

/* Add a grey background color on mouse-over */
.btndefenses:hover {
  background-color: #00FF00;
}

/* Add a dark background color to the active button */
.btndefenses.activedefenses {
   background-color: #00FF00;
   color: Black;
}

td.black a {
	color: #00ffff;
}

td.black:hover a {
	color: red;
}

anchor {
	padding-top: 300px;
	margin-top: -300px;
}