Genesys Theme by /u/saethone

@import url('https://fonts.googleapis.com/css?family=Crimson+Text:400,600,600i,700');

/* Main Background */
  .phb { background-image: url("https://i.imgur.com/5s6VJkT.png"); text-align:justify; text-indent:0px;}

/* Fonts */

.phb {
    font-family: 'Crimson Text', serif;
}

.phb h1, .phb h2, .phb h3, .phb h4, .phb h5, .phb h6 { 
    letter-spacing: 0.6px;
    font-family: 'Bebas Neue';
}

.phb h1{
    color: #1ABEEF;
    font-weight:400;
    font-variant: uppercase;
    font-size:42pt;
    margin-bottom:30px;
}

/* Makes the bigger "first letter" in paragraphs under H1 and H2*/
.phb h1 + p:first-letter, .phb h2 + p:first-letter  {
    font-family: 'Crimson Text';
    color: #326DA1;
    font-size:32pt;    
    line-height:95%;
    margin-bottom:-9px;
    margin-right:2px;
    margin-top:-5px;
    float:left;
}

.phb h2 {
    color: #1ABEEF;
    font-variant: small-caps;
    display:table;
    font-size:32pt;
    font-weight:300;
    column-span:all;
}

/* create the offset underline under h2s */
.phb h2:after {
    content:"";
    border-bottom: 2px solid #CCCCCC;
    display: table;
    width:100%;
    margin-top:-5px;
    margin-left:20px;
}

.phb h3 {
    color: #1ABEEF;
    font-variant: small-caps;
    font-size: 18pt;
    font-weight:1;
    border:none;
}

.phb h4 {
    color: #ed9629;
    font-variant: small-caps;
    font-size: 16pt;
    text-align:center;
}

.phb h5 {
    color: #326DA1;
    font-weight: 1;
    font-variant: small-caps;
    font-size: 16pt;
}

.phb h6 {
    color: #ea702b;
    font-variant: small-caps;
    font-size: 16pt;
    display: table;
    border-bottom: 1px solid #ea702b;
}

.phb p { 
    font-size: 15px; 
  	letter-spacing: -0.4px;
  	line-height:1.15em;
  	text-indent:0px !important;
  	font-weight:400;
  	padding-bottom:1px;
  	column-fill:balance;
  }
  
.phb p + p {
    margin-top:0px;  
  }

.phb wide {clear:both;}
.phb ul {list-style: none;}
.phb ul li::before {
    content: "•"; 
    color: #F69337;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
  }

/* Tables */
.phb td {
    font-family: 'Crimson Text', serif;
    font-size:8pt;
    font-weight:400;
    text-align:left;
}
.phb td, th {border: 1px solid gray;}
.phb table {overflow:auto;}
.phb table tr:nth-child(odd) td {background-color: #E0F4FC;}
.phb table thead th {
    color: white; 
    background-color: #F69337; 
  	padding-top: 0.3em;
    padding-left: 0.5em;
    text-transform: uppercase;
}
.phb table tbody tr td {  padding: 0.5em;}
.phb table thead {display: table-row-group; }
.phb table .subheader td {
    color:white;
    text-transform:uppercase;
    padding-bottom:2px;
    background-color: #2D4864 !important;
    font-size:10pt;
    font-weight:bold;
    }

/* Genesys Notes */

.phb .note
{
    position:relative;
    color: white;
    background-color: #2D4864;
    border-radius: 0px 0px 30px 0px;
    padding: 10px 20px;  
    font-family: 'Crimson Text';
    letter-spacing: 0.5px;
    font-size:12ptx;
    font-weight:600
    }

.phb .note:before {
    position:absolute;
    content:" ";
    border-style:solid;
    border-width:1px;
    -moz-border-image: -moz-linear-gradient(-45deg, rgba(219,219,219,.7) 0%, rgba(219,219,219,0) 50%, rgba(219,219,219,0) 100%);
    -webkit-border-image: -webkit-linear-gradient(-45deg, rgba(219,219,219,.7) 0%,rgba(219,219,219,0) 50%,rgba(219,219,219,0) 100%);
    border-image: linear-gradient(135deg, rgba(219,219,219,.7) 0%,rgba(219,219,219,0) 50%,rgba(219,219,219,0) 100%); 
    left:4px;
    top:4px;
    right:4px;
    bottom:4px;
    border-image-slice:1;
}

.phb .note h5 {color:white;}
.phb .note td {color:black;}
.phb .note table tr:nth-child(even) td { background-color: #ffffff;}
  
  
/* Example Block */

.phb .example
{
    position:relative;
    color: black;
    background: rgba(204, 203, 199, 0.4);
    border-radius: 0px 0px 30px 0px;
    padding: 14px 20px;
}

/* Read-aloud */

.phb .read {
    display:block;
    font-family: 'Crimson Text';
    font-size:10pt;
    font-style: italic;
    color: rgb(230,0,0);
    border: 1px dotted rgb(230,0,0);
    border-radius:30px;
    padding:15px;
    position:relative;
}

.phb .read:before {
    content:'';
    position:absolute;
    display:block;
    border: 1px dotted rgb(230,0,0);
    border-radius:30px;
    left:2px;
    top:2px;
    right:2px;
    bottom:2px;
    }

/* Footer */
.phb .pageNumber { color: #000000}
.phb .footnote { color: #000000 }
.phb:nth-child(odd) .pageNumber { color: black;
	right: 40px;
	bottom: 52px;
	width: 50px;
	text-align: center;
    font-family: 'Bebas Neue';
    font-size:11pt;
    font-weight:bold;
}

.phb:nth-child(even) .pageNumber { color: black;
	left: 40px;
	bottom: 52px;
	width: 50px;
    text-align: center;
    font-family: 'Bebas Neue';
    font-size:11pt;
    font-weight:bold;
}

.phb .footnote { color: black 
    font-family: 'Bebas Neue' 
    font-weight: bold 
    vertical-align: center;
    padding-top:11px;
}

.phb:nth-child(even) .footnote {border-left:2px solid black;
    padding-left:6px;
}

.phb:nth-child(odd) .footnote {border-right:2px solid black;
    padding-right:6px;
}

.phb:after { 
    background-image:url("none") 
}

/* Dice and Symbols */

@font-face {
  font-family: 'Genesys';
  src: local('Genesys');
}
.phb .symbols {
    font-family: Genesys;
}

@font-face {
  font-family: 'Genesys1';
  src: local('EotE Symbol');
}
.phb .dice {
    font-family: Genesys1;
}

.phb .setback {
    font-family: Genesys1;
    color: black;
    text-shadow: -1px 0 #000000,0 1px #000000,1px 0 #000000,0 -1px #000000;
}

.phb .note .setback, .phb .note .boost, .phb .note .challenge, .phb .note .proficiency, .phb .note .difficulty, .phb .note .ability {
    text-shadow: -1px 0 #ffffff,0 1px #ffffff,1px 0 #ffffff,0 -1px #ffffff;
}

.phb .note  td > .setback, .phb .note td > .boost, .phb .note td > .challenge, .phb .note td > .proficiency, .phb .note td >  .difficulty, .phb .note td.ability {
    text-shadow:  -1px 0 #000000,0 1px #000000,1px 0 #000000,0 -1px #000000;
}

.phb .boost {
    font-family: Genesys1;
    color: #76CDDB;
    text-shadow: -1px 0 #000000,0 1px #000000,1px 0 #000000,0 -1px #000000;
}

.phb .challenge {
    font-family: Genesys1;
    color: #751317;
    text-shadow: -1px 0 #000000,0 1px #000000,1px 0 #000000,0 -1px #000000;
}

.phb .proficiency {
    font-family: Genesys1;
    color: #FEF035;
    text-shadow: -1px 0 #000000,0 1px #000000,1px 0 #000000,0 -1px #000000;
}

.phb .difficulty {
    font-family: Genesys1;
    color: #52287E;
    text-shadow: -1px 0 #000000,0 1px #000000,1px 0 #000000,0 -1px #000000;
}

.phb .ability {
    font-family: Genesys1;
    color: #46AC4E;
    text-shadow: -1px 0 #000000,0 1px #000000,1px 0 #000000,0 -1px #000000;
}

/* Archetypes */

.phb .archetype {
    background-image: url('https://i.imgur.com/wk1XTwj.png');
    height:62px;
    width:329px;
    background-size:100%;
    font-family: 'Bebas Neue';
    font-size:14pt;

}

.phb .archetype .bra {
    position:relative;
    left:14px;
    top:6px;
    text-align:center;
    display:inline-block;
    width:25px;
}

.phb .archetype .agi {
    position:relative;
    left:42px;
    top:6px;
    width:25px;
    text-align:center;
    display:inline-block;
}
.phb .archetype .int {
    position:relative;
    left:68px;
    top:6px;
    width:25px;
    text-align:center;
    display:inline-block;
}

.phb .archetype .cun {
    position:relative;
    left:95px;
    top:6px;
    width:25px;
    text-align:center;
    display:inline-block;
}
.phb .archetype .wil {
    position:relative;
    left:122px;
    top:6px;
    width:25px;
    text-align:center;
    display:inline-block;
}
.phb .archetype .pre {
    position:relative;
    left:148px;
    top:6px;
    width:25px;
    text-align:center;
    display:inline-block;
}
/* Adversaries */

.phb .adversary {
    background-image: url('https://i.imgur.com/ks1JaPU.png');
    height:47px;
    width:329px;
    background-position: -3px 0px;
    background-size:102%;
    font-family: 'Bebas Neue';
    font-size:14pt;
}

.phb .adversary .soak {
    position:relative;
    left:26px;
    top:13px;
    width:25px;
    text-align:center;
    display:inline-block;
}
.phb .adversary .wound {
    position:relative;
    left:79px;
    top:13px;
    width:25px;
    text-align:center;
    display:inline-block;
}
.phb .adversary .strain {
    position:relative;
    left:135px;
    top:13px;
    width:25px;
    text-align:center;
    display:inline-block;
}
.phb .adversary .mdef {
    position:relative;
    left:176px;
    top:13px;
    width:25px;
    text-align:center;
    display:inline-block;
}
.phb .adversary .rdef {
    position:relative;
    left:175px;
    top:13px;
    width:25px;
    text-align:center;
    display:inline-block;
}

/* MINION STAT BLOCK */

.phb .minion {
    background-image: url('https://i.imgur.com/K1aEwZa.png');
    height:63px;
    width:329px;
    background-position: 42px 0px;
    background-repeat:no-repeat;
    background-size:75%;
    font-family: 'Bebas Neue';
    font-size:14pt;
}

.phb .minion .soak {
    position:relative;
    left:71px;
    top:13px;
    width:25px;
    text-align:center;
    display:inline-block;
}

.phb .minion .wound {
    position:relative;
    left:125px;
    top:13px;
    width:25px;
    text-align:center;
    display:inline-block;
}

.phb .minion .mdef {
    position:relative;
    left:165px;
    top:13px;
    width:25px;
    text-align:center;
    display:inline-block;
}
.phb .minion .rdef {
    position:relative;
    left:165px;
    top:13px;
    width:25px;
    text-align:center;
    display:inline-block;
}

/* Vehicles */

.phb .vehicle {
    background-image: url('https://i.imgur.com/JEgri2b.png');
    height:80px;
    width:329px;
    background-size: 100%;
    background-repeat:no-repeat;
    font-family: 'Bebas Neue';
    font-size:14pt;
}

.phb .vehicle .sil {
    position:relative;
    left:14px;
    top:6px;
    text-align:center;
    display:inline-block;
    width:25px;
}

.phb .vehicle .speed {
    position:relative;
    left:41px;
    top:6px;
    text-align:center;
    display:inline-block;
    width:25px;
}

.phb .vehicle .hand {
    position:relative;
    left:67px;
    top:6px;
    text-align:center;
    display:inline-block;
    width:25px;
}

.phb .vehicle .armor {
    position:relative;
    left:107px;
    top:12px;
    text-align:center;
    display:inline-block;
    width:25px;
}
.phb .vehicle .def {
    position:relative;
    left:163px;
    top:12px;
    text-align:center;
    display:inline-block;
    width:25px;    
}
.phb .vehicle .ht {
    position:relative;
    left:53px;
    top:53px;
    text-align:center;
    display:inline-block;
    width:25px;    
}

.phb .vehicle .ss {
    position:relative;
    left:107px;
    top:53px;
    text-align:center;
    display:inline-block;
    width:25px;    
}

/*Index*/

.phb .index-letter {
    color:rgb(118,18,19);
    font-size:24pt;font-weight:bold; 
    font-family:'Bebas Neue';
    line-height:1.1em;
}

.phb .index {
    list-style:none;
    padding:0;
    overflow-x:hidden;
    max-width:329px;
}

.phb .index li::before {
            content: ""; }
            
.phb .index li {
    
    display:flex;
}
            
.phb .index li span:first-child {
    margin-right:0.2em;
    order:1;
}
            
.phb .index li::after {
  content: "";
  border-bottom: 1px dotted;
  flex-grow: 1;
  order: 2;
  position:relative;
  top:-5px
}

.phb .index span + span {
    order:3;
    margin-left:0.2em;
    }
    
/* NON BLENDED IMAGE BORDER */
    
.phb .non-blended {
    padding:10px;
    border-width:2px;
    border-style:solid;
    border-image:linear-gradient(135deg, rgba(230,0,0,1) 0%,rgba(230,0,0,0.01) 99%,rgba(230,0,0,0) 100%);
    -moz-border-image:-moz-linear-gradient(-45deg, rgba(230,0,0,1) 0%, rgba(230,0,0,0.01) 99%, rgba(230,0,0,0) 100%); -webkit-border-image:-webkit-linear-gradient(-45deg, rgba(230,0,0,1) 0%,rgba(230,0,0,0.01) 99%,rgba(230,0,0,0) 100%);
    border-image-slice: 1;
}

</style>

# Genesys GM Binder Theme

Header 1 should be used to create chapter titles (like above). The first letter of the next text block will be capitalized just like this automatically! Headline 1 and Headline 2 both also span both columns. If you separate your text above a Headline 1 or Headline 2 with a blank line in the editor it will automatically shift the contents of everything after the blank line to the second size.

If you reach the end of a column it will roll over to the next column automatically, but this will not always create an attractive spacing at the bottom. You can force GM binder to start a new column like this by using the `\columnbreak` command. To indent a paragraph (they should be after the first under each header) just use about 5 ` ` before the text.

## Headline 2

Headline 2 denotes major sections of the chapter. Whenever you need a header inside a chapter, this should be your go to!

### Headline 3

Headline 3 is simply a 2nd layer of denotation you can use. Any time you need to separate out different ideas underneath an H2, use this.

#### Headline 4

This is to be used inside the "Notes" with the bottom row underlined. More information on this later.

##### Headline 5

Headline 5 is simply a 3rd layer of denotation you can use. Any time you need to separate out different ideas underneath an H3, use this. Note, that this is usually the deepest level of denotation you should use. If you are doing a considerable list, consider using Headline 6 instead.

###### Headline 6
Headline 6 is used to create lists that require significant detail. It is most notably used to list talents. This is a bottom tier header, meaning there should never be any headers "underneath" it in the document.

## Type Faces

There are many different type faces. Underlines can be created with the HTML `<u></u>` tag, while the rest can be done with <a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#code">markdown</a>.

* **Bold**
* *Italics*
* ~~Strikethrough~~
* <u>Underline</u>
* ^Super^
* <sup>SuperScript</sup>
* <sub>SubScript</sub>
* [Internal Link](https://www.gmbinder.com)
* [External Link](https://www.reddit.com/r/uneartherarcana)

1. Item 1
2. Item 2
3. Item 3

* Item 1
* Item 2
* Item 3

## Footers and Pages

Footers, like the one at the bottom of this page, can be created with the following code:

`<div class="footnote">THEME TESTER<BR /><p>GENESYS</p></div>`

When you're ready to end a page, you can use

`\pagebreaknum`. This will automatically create a new page for you! If you're at the end of your document, and don't want a new page, you'll want to hide the blank page with `<style> #pX{ display: none;}</style>`, where "X" is the number of the page that needs hidden.

<div class="footnote">THEME TESTER<BR />
<p>GENESYS</p></div>

\pagebreakNum

#### <u>Symbol Key</u>

<br />

Note: The bottom line of these boxes title's should be underlined with the HTML underline tag. <br />
<span class='symbols'>a</span> = Advantage<br>
<span class='symbols'>h</span> = Threat<br>
<span class='symbols'>f</span> = Failure<br>
<span class='symbols'>s</span> = Success<br>
<span class='symbols'>t</span> = Triumph<br>
<span class='symbols'>d</span> = Despair<br>
<span class='setback'>b</span> = Setback Dice<br>
<span class='boost'>b</span> = Boost Dice<br>
<span class='difficulty'>d</span> = Difficulty Dice<br>
<span class='ability'>d</span> = Ability Dice<br>
<span class='challenge'>c</span> = Challenge Dice<br>
<span class='proficiency'>c</span> = Proficiency Dice <br>

You can create a "Note" box like this with `<div class='note'></div>`. To create the dice and their symbols

</div>

To create the dice and their symbols, use: 
 
```
<span class='symbols'>a, h, f, s, t, d </span>
<span class='setback'>b</span>
<span class='boost'>b</span
<span class='difficulty'>d</span>
<span class='ability'>d</span>
<span class='challenge'>c</span>
<span class='proficiency'>c</span>
```

##### Example
You can create example boxes like this with `<div class='example'></div>`

</div>

<div class="read"> Read Aloud Text  like this is created with the HTML DIV tag and the "read" class. It normally has some more stuff in it so I'm just gonna type a bit of random mumbo jumbo to make the box a little bigger.</div>

\columnbreak

### Stat Blocks

You can create a number of stat blocks as seen in the book with the following code:

##### Archetype Statblock

```
<div class="archetype">
<span class="bra">1</span>
<span class="agi">2</span>
<span class="int">3</span>
<span class="cun">4</span>
<span class="wil">5</span>
<span class="pre">6</span>
</div>
```

##### Adversary and Minion Statblock

Start with an Archetype then add:

```
<div class="adversary">
<span class="soak">7</span>
<span class="wound">18</span>
<span class="strain">19</span>
<span class="mdef">0</span>
<span class="rdef">1</span>
</div>
```

Or use "minion" for the class, and delete the strain span.

##### Vehicle Statblock

```
<div class="vehicle">
<span class="sil">1</span>
<span class="speed">3</span>
<span class="hand">2</span>
<span class="armor">4</span>
<span class="def">5</span>
<span class="ht">55</span>
<span class="ss">66</span>
</div>
```

<div class="footnote">THEME TESTER<BR />
<p>GENESYS</p>
</div>

\pagebreakNum

#### <u>Wide Note</u>

In the Genesys book there are notes and tables that span both columns like this. Simply add the "wide" class to either one to get this effect. Be careful, though, as it does wreak havoc on the page's formatting - be prepared to manually position some of the paragraphs and items on these pages.

<br/>

### Bug List

</div>

##### Chart of Examples
<table>
    <thead>
        <tr>
            <th>ROLL</th><th>RESULT</th>
        </tr>
    </thead>
    <tbody>
        <tr> 
            <td><span class='symbols'>a or t</span></td><td>Recover 1 strain. Add <span class='boost'>b</span> to next check by yourself or  ally.  </td>
        </tr>
        <tr class="subheader">
            <td colspan="2">"Subheader" is a tr class</td>
        </tr>
        <tr>
        <td><span class='symbols'>aa or t</span></td><td> Perform an immediate free maneuver (still max 2 per turn). Add <span class='boost'>b</span> to next skill check by opponent.</td>
        </tr>
        <tr>
        <td><span class='symbols'>aaa or t</span></td><td> Negate enemy defense. Ignore environment. Damage a target's gear/limbs. Gain +1 defense for 1 turn.</td>
        </tr>
    </tbody>
</table>

You can use markup to create tables just fine, normally, but you do need to build the table in HTML if you want to use a "Subheader" row (such as a weapon table). Unforunately Markdown doesn't support applying a class to a table row!

You can also create an index for your document (and with a little bit of formatting, use this to create a table of contents as well!) The title page for index is just a Headline 2, wide, and centered. The code for the letters and rows is below:

```
<span class="index-letter">A</span>
<ul class="index">
<li><span>Apple</span><span>32</span></li>
<li><span>Angry</span><span>25</span></li>
</ul>
```
     This will automatically space the dots for you, so no worrying about counting them out! You can see the example on the next page.

\columnbreak

In the Genesys book, images that don't blend into the background are surrounded by the frame like below. Simply add the "nonblended" class to the image tag when adding it to create this surround.

<div class="footnote">THEME TESTER<BR />
<p>GENESYS</p></div>

\pagebreakNum

## Index

</div>

<span class="index-letter">A</span>
<ul class="index">
<li><span>Apple</span><span>32</span></li>
<li><span>Angry</span><span>25</span></li>
</ul>

#### <u>Change Log</u>

##### 2/8/18

* Updated sheet to use the "Crimson Text" font in leiu of Minion. This will keep the document more uniform as all fonts can now be hosted.
* Adjusted font sizes/weights to more accurately represent the book.
* Added "Minion" statblock
* Updated "Adversary" statblock - the characteristics are now applied separately with an "archetype" statblock. * Resized statblocks to prevent background clipping
*Sswapped position of "Handling" and "speed" in vehicle stat block - **Note: PREVIOUSLY MADE STAT BLOCKS NEED TO SWAP THESE SPANS AS WELL, OR FORMATTING WILL BE BROKEN**
* Corrected a bug that prevented subheaders on certain table rows.
* Added spacing between paragraphs.
* Provided instructions to indent subsequent paragraphs - cannot be done automaticaly as forced paragraph breaks are neccessary for breaking columns sometimes.
* Removed image sizing from the non-blended image - image sizing should be done in the image tag.
* Made some improvements to the Style Guide
* General cleaning of CSS code

</div>

\columnbreak

<span class="index-letter">B</span>
<ul class="index">
<li><span>Bangarang</span><span>42</span></li>
<li><span>Batman</span><span>33, 126</span></li>
</ul>

<div class="footnote">THEME TESTER<BR />
<p>GENESYS</p></div>

\pagebreakNum
<style>
    #p5{ display: none;}
</style>