Genesys Style by Saethone

<style>

/* Main */
  .phb { background-image: url("https://i.imgur.com/5s6VJkT.png"); text-align:justify; text-indent:0px;}
  
  .phb p { 
    font-size: 10pt; 
  	letter-spacing: 0.2px;
  	line-height:1.2em;
  	text-indent:0px !important;
  }

.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, 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-left: 0.2em;}
    .phb table thead {display: table-row-group; }
    .phb table .subheader td {color:white;
                    text-transform:uppercase;
           	        padding-top: 0.3em;
                    padding-left: 0.5em;
                    background-color: #2D4864;
                    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: 'Minion Pro';
     letter-spacing: 0.5px;
    }

.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: 'Minion Pro';
        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") }

/* Fonts */

.phb h1,
.phb h2,
.phb h3,
.phb h4,
.phb h5 { letter-spacing: 0.6px;
}
.phb h1{
        font-family: 'Bebas Neue';
        color: #1ABEEF;
        font-weight:400;
        font-variant: uppercase;
        font-size:42pt;
        margin-bottom:30px;
}

.phb h1 + p:first-letter {
    font-family: 'Minion Pro';
    color: #326DA1;
    font-size:32pt;    
    line-height:90%;
    margin-bottom:-9px;
}

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

.phb h2:after {
        content:"";
        border-bottom: 2px solid #CCCCCC;
        display: table;
        width:100%;
        margin-top:-5px;
        margin-left:20px;

}

.phb h2 + p:first-letter {
    font-family: 'Minion Pro';
    color: #326DA1;
    font-size:32pt; 
    line-height:90%;
    margin-top:3px;
    float:left;
    margin-bottom:-9px;
}

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

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

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

}

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

.phb {
    font-family: 'Minion Pro';
}

/* 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:23px;
    top:7px;
}

.phb .archetype .agi {
    position:relative;
    left:70px;
    top:7px;
}
.phb .archetype .int {
    position:relative;
    left:114px;
    top:7px;
}

.phb .archetype .cun {
    position:relative;
    left:157px;
    top:7px;
}
.phb .archetype .wil {
    position:relative;
    left:203px;
    top:7px;
}
.phb .archetype .pre {
    position:relative;
    left:246px;
    top:7px;
}
/* Adversaries */

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

.phb .adversary .bra {
    position:relative;
    left:33px;
    top:6px;
}

.phb .adversary .agi {
    position:relative;
    left:75px;
    top:6px;
}
.phb .adversary .int {
    position:relative;
    left:115px;
    top:6px;
}

.phb .adversary .cun {
    position:relative;
    left:155px;
    top:6px;
}
.phb .adversary .wil {
    position:relative;
    left:196px;
    top:6px;
}
.phb .adversary .pre {
    position:relative;
    left:236px;
    top:6px;
}

.phb .adversary .soak {
    position:relative;
    left:-25px;
    top:62px;
}
.phb .adversary .wound {
    position:relative;
    left:43px;
    top:62px;
}
.phb .adversary .strain {
    position:relative;
    left:109px;
    top:62px;
}
.phb .adversary .mdef {
    position:relative;
    left:165px;
    top:62px;
}
.phb .adversary .rdef {
    position:relative;
    left:181px;
    top:62px;
}

/* Vehicles */

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

.phb .vehicle .sil {
    position:relative;
    left:26px;
    top:9px;
}

.phb .vehicle .speed {
    position:relative;
    left:66px;
    top:9px;
}
.phb .vehicle .hand {
    position:relative;
    left:135px;
    top:9px;
}

.phb .vehicle .armor {
    position:relative;
    left:187px;
    top:14px;
}
.phb .vehicle .def {
    position:relative;
    left:270px;
    top:14px;
}
.phb .vehicle .ht {
    position:relative;
    left:165px;
    top:60px;
}

.phb .vehicle .ss {
    position:relative;
    left:239px;
    top:60px;
}

/*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;
    }
    
.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;
    width:325px;
    max-height:100%;
}

</style>
<div class="wide"></div>

# 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.

## 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.

You can start a new column like this by using the `\columnbreak` command.

## 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 style="margin-top:35px;"

<p>

Genesys never uses a single column like this for just regular text. You may occasionally see it used for particularly large "Note" sections or Tables, though. You can create one of these with the HTML DIV tag and the "wide" class. It can be tricky to correctly position these, so be careful! You cannot use a "wide" class after a \columnbreak or things get REALLY out of control.

</p> 
</div>

<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>

</div>

You can create a "Note" box like this with `<div class='note'></div>`. To create the dice and their symbols
`<span class='symbols'>a, h, f, s, t, d</span>` <br /> will create your symbols, while 
`<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>`<br />
will create your dice. Please note, these currently require you to download and install the "EotE Symol" and "Genesys" fonts on your own, currently.

##### 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. Juuuuust a bit more.</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>` <br />
`</div>`

##### Adversary Statblock

`<div class="adversary">`
`[[Use the same spans for the attributes]]`
`<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>`

##### Vehicle Statblock

`<div class="vehicle">`
`<span class="sil">1</span>`
`<span class="hand">2</span>`
`<span class="speed">3</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>

<br/>

### Bug List
* Some paragraphs are still indenting when the shouldnt be ?

</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

<div style="margin-top:25px;"></div>
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>
<img class="non-blended" src="https://cf.geekdo-images.com/images/pic1074405_md.jpg">
</div>

<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>

\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>