Genesys Style by Saethone

<style>

/* Main */
  .phb { background-image: url("https://i.imgur.com/5s6VJkT.png") }
  .phb p { 
    font-size: 10pt; 
  	letter-spacing: 0.2px;
  }
  .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 td {color:black;}
  
/* 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;

}

.phb h1 + p:first-letter {
    font-family: 'Minion Pro';
    color: #326DA1;
    font-size:32pt;    
    
}

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

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

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

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

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

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

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

}

.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 .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:69px;
    top:7px;
}
.phb .archetype .int {
    position:relative;
    left:113px;
    top:7px;
}

.phb .archetype .cun {
    position:relative;
    left:157px;
    top:7px;
}
.phb .archetype .wil {
    position:relative;
    left:201px;
    top:7px;
}
.phb .archetype .pre {
    position:relative;
    left:245px;
    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:7px;
}

.phb .adversary .agi {
    position:relative;
    left:74px;
    top:7px;
}
.phb .adversary .int {
    position:relative;
    left:114px;
    top:7px;
}

.phb .adversary .cun {
    position:relative;
    left:154px;
    top:7px;
}
.phb .adversary .wil {
    position:relative;
    left:194px;
    top:7px;
}
.phb .adversary .pre {
    position:relative;
    left:235px;
    top:7px;
}

.phb .adversary .soak {
    position:relative;
    left:-27px;
    top:63px;
}
.phb .adversary .wound {
    position:relative;
    left:40px;
    top:63px;
}
.phb .adversary .strain {
    position:relative;
    left:106px;
    top:63px;
}
.phb .adversary .mdef {
    position:relative;
    left:161px;
    top:63px;
}
.phb .adversary .rdef {
    position:relative;
    left:176px;
    top:63px;
}

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

.phb .vehicle .speed {
    position:relative;
    left:64px;
    top:9px;
}
.phb .vehicle .hand {
    position:relative;
    left:133px;
    top:9px;
}

.phb .vehicle .armor {
    position:relative;
    left:186px;
    top:14px;
}
.phb .vehicle .def {
    position:relative;
    left:269px;
    top:14px;
}
.phb .vehicle .ht {
    position:relative;
    left:164px;
    top:60px;
}

.phb .vehicle .ss {
    position:relative;
    left:237px;
    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;
    max-width:100%;
    max-height:100%;
}

</style>

**The intent of this document is be a test document for any new GM Binder themes you might create. To use it, grab the source of this document, paste it into a new document, and then apply your theme styles above.**

</div>

# Genesys GM Binder Theme

Whether lle uma tanya amin khiluva lle a' gurtha ar' thar fighting lome. Shaalth Nuduin amin panta tangwewa. into tanya! Naugrim tula uialtum tenna' san'. Aman tel' Seldarine aa' menle nauva calen ar' ta hwesta e' ale'quenle uuma dela amin uuma malia. Gorgaerea rwalaerea atost en' entula orme amin autien rath.

Lye yala onna en' kemen tanya awra! En!. Lirimaerea mereth en draugrim Yallume Elenya. Amin hiraetha quel undome nai uuvanimo turamin cormamin niuve tenna' ta elea lle au'. Yavannie ram en' ondo mereth en draugrim tanka tel' taurnin. Aman tel' Seldarine ram en' templa Amrun'quessir amin khiluva lle a' gurtha ar' thar.

## Headline 2

Ho mankoi lle uma tanya amin khiluva lle a' gurtha ar' thar quel lome. Shaalth Nuduin amin panta tangwa. Tampa tanya! Naugrim tula uialtum tenna' san'. Aman tel' Seldarine aa' menle nauva calen ar' ta hwesta e' ale'quenle uuma dela amin uuma malia. Gorgaerea rwalaerea atost en' entula orme amin autien rath.

### Headline 3

#### Headline 4

This is to be used inside the "Notes" with the bottom row underlined.

\columnbreak

##### Headline 5

###### Headline 6

### Type Faces
* **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

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

\pagebreakNum

# Theme Specific Styles

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

<br />
Note: The bottom line of these boxes title's should be underlined with the HTML < u > 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>

##### Example
Text here

</div>

##### Archetype Statblock

##### Adversary Statblock

\columnbreak

Why can't i get the borders on the right and bottom to show??

| d8  | Loot |
|:---:|:-----------:|
|  1  | 100gp |
|  2  | 200gp |
|  3  | 300gp |
|  4  | 400gp |

| d8  | Loot |
|:---:|:-----------:|
|  1  | 100gp |
|  2  | 200gp |
| 3   | 300gp |  
|  4  | 400gp |

<table>
    <thead>
        <tr>
            <th>d8</th><th>Loot</th>
        </tr>
    </thead>
    <tbody>
        <tr> 
            <td>1</td><td>100gp </td>
        </tr>
        <tr class="subheader">
            <td colspan="2">Subheader</td>
        </tr>
        <tr>
        <td>2</td><td> 200gp</td>
        </tr>
        <tr>
        <td>2</td><td> 200gp</td>
        </tr>
    </tbody>
</table>

</div>

## Chart of Examples

| Roll |  Result | 
|:---:|:---:|
|<span class='symbols'>a or t</span>| Recover 1 strain. Add <span class='boost'>b</span> to next check by yourself or  ally. 
|<span class='symbols'>aa or t</span>| Perform an immediate free maneuver (still max 2 per turn). Add <span class='boost'>b</span> to next skill check by opponent.
|<span class='symbols'>aaa or t</span>| Negate enemy defense. Ignore environment. Damage a target's gear/limbs. Gain +1 defense for 1 turn. 
|<span class='symbols'>t</span>| Upgrade difficulty of target's next check. Upgrade an ally's next check. Do something "vital". 
|<span class='symbols'>tt</span>| Destroy a target's equipment or limb completely.

##### Vehicle Statblock

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

\pagebreakNum

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

<br/>

### To-Do List

* Table Sub-Headers (Page 144)

</div>

<div class="read"> Read Aloud Text Ho mankoi lle uma tanya amin khiluva lle a' gurtha ar' thar quel lome. Shaalth Nuduin amin panta tangwa. Tampa tanya! Naugrim tula uialtum tenna' san'. Aman tel' Seldarine aa' menle nauva calen ar' ta hwesta e' ale'quenle uuma dela amin uuma malia. Gorgaerea rwalaerea atost en' entula orme amin autien rath.</div>

\columnbreak

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