style.css

body
{
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
}

/* makes links (including fake links like modal showinfo dialogues) always blue and never as if visited */
a
{
    color: blue;
}

/* Style the tab */
.tab
{
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button
{
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

.tablinks
{
    font-weight: bold;
}

/* Change background colour of buttons on hover */
.tab button:hover
{
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active
{
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent
{
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

/* Tables */
.filterTable
{
    border-collapse: collapse;
    width: 100%;
    border: 1px solid #ddd;
    font-size: 18px;
}

.filterTable th, .filterTable td
{
    text-align: left;
    padding: 12px;
    border: 1px solid #ddd;
}

.filterTable tr
{
    border: 1px solid #ddd;
}

.filterTable tr.header, .filterTable tr:hover
{
    background-color: #f1f1f1;
}

tr.header
{
   white-space: nowrap; /* ensures sort button is on same line as searchbox rather than breaking to new line */
}

/* The Modal (background) */
.modal
{
    display: none; /* Hidden by default */
    position: absolute;
    z-index: 1; /* Sit on top */
    padding-top: 50px; /* Location of the box */
    left: 0;
    top: 0;
    min-height: 150%;
    width: 100%; /* Full width */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
}

/* Modal Content */
.modal-content
{
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}

/* The Close Button */
.close
{
    color: #aaaaaa;
    float: right;
    font-size: 40px;
    font-weight: bold;
}

.close:hover, .close:focus
{
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

/* 4e-style vertical power cards, adapted from roll20 4e power card macro css */
.dnd4epower td:before {
  content: '' !important;
  display: block !important; 
  width: 380px !important; /* otherwise smaller powers with minimal text like Hasty Retreat shrink down to smaller sizes despite having min-width:400px set on the table - note we don't use 400px on this pseudo element as that actually causes a scrollbar to appear that we don't want */
}

.dnd4epower .sheet-power-header {
	color: #ffffff !important;
    padding-left: 5px !important;
	line-height: 1.6em !important;
	font-size: 1.2em !important;
    text-align: left !important;
}

.dnd4epower .sheet-power-header {
	color: #ffffff !important;
    padding-left: 5px !important;
	line-height: 1.6em !important;
	font-size: 1.2em !important;
    text-align: left !important;
}

.dnd4epower .sheet-subheader-alignright {
    color: #ffffff !important;
    padding-left: 5px !important;
	line-height: 1em !important;
	font-size: 1em !important;
    text-align: right !important;
}

.dnd4epower tr:nth-of-type(odd) {
    background: -webkit-linear-gradient(left,rgba(217, 209, 199,1),rgba(217, 209, 199,0.25)) !important; 
    background: -o-linear-gradient(right,rgba(217, 209, 199,1),rgba(217, 209, 199,0.25)) !important; 
    background: -moz-linear-gradient(right,rgba(217, 209, 199,1),rgba(217, 209, 199,0.25)) !important; 
    background: linear-gradient(to right, rgba(217, 209, 199,1), rgba(217, 209, 199,0.25)) !important; 
}

.dnd4epower td {
    color: #000000 !important;
    padding-left: 5px !important;
	line-height: 1em !important;
	font-size: 1em !important;
    text-align: left !important;
}

.dnd4epower .sheet-template-bold {
    font-weight: bold !important;
}