Old Blackthorn Theme Demo

<style>

/* Background */
.phb {background-image: url('https://www.gmbinder.com/images/YBm5C9t.jpg')}
.phb {background-size: cover}

/* #, ##, ###, ####*/
.phb h2, .phb h1 {color: #35402d; font-family: "EB Garamond";font-variant: small-caps; letter-spacing: 0.02em;}
.phb h3 {color: #35402d; border-bottom: 2px solid #d9b257; font-family: "EB Garamond"; font-variant: small-caps; letter-spacing: 0.02em}
.phb h4 {color: #000; font-family: "EB Garamond";font-variant: small-caps; letter-spacing: 0.02em;} 
.phb h5 {color: #000;}
.phb h6 {font-family: "EB Garamond"; font-size: 2.75em; color: #35402d; line-height: .8em; font-variant: small-caps; text-align: center;}

/* Main Text, Lists, Links, First Letter after # */
p {font-family: "PT Serif", serif; font-size: 0.97em;}
ul {font-family: "PT Serif", serif; font-size: 0.97em;}
.phb {color; #000;}
.phb a{color: #414d47;}
.phb h1+p::first-letter{color:#04260a; vertical-align: text-top; line-height: 0.9em; padding-right: 1px}

/* Center, Pad left, Pad right */
.center         {text-align: center}
.tab            {padding-left: 30px; }
.doubletab      {padding-left: 60px;}
.padright       {padding-right: 30px}
.doublepadright {padding-right: 60px}

/* Class Block - Opaque Light */
.phb .classTable
{
    border-image-outset: 25px 10px !important;
    align:center;
    width:90%;
    margin-left:auto;
    margin-right:auto;
    line-height:11px;
    border-image-source: url(https://www.gmbinder.com/images/8W4JC1B.png);
    background-color: #e3e5e4;
}

/* Tables */
table tr:nth-child(odd) td {background-color: #a3adaa;}
.phb table {font-family: "Alegreya Sans";}
.phb table em {font-family: "Alegreya Sans";}
.phb table strong {font-family: "Alegreya Sans";}

table.table1 {box-shadow: 0px 0px 25px 3px #000;}
table.table1 tbody tr td {padding: .1em .1em}
table.table1 tr:nth-child(odd) td {background-color: #b8bfbd}
table.table1 tr:nth-child(even) td {background-color: #b8bfbd}
table.table1 td {vertical-align: top;}

/* Note Block */
.phb blockquote {background-color: #99a29f; font-size: 1em;}
.phb blockquote h1 {font-weight: 100; color: #FFF;}
.phb blockquote h2 {font-weight: 100; color: #FFF;}
.phb blockquote h3 {font-weight: 100; color: #FFF;}
.phb blockquote h4 {font-weight: 100; color: #FFF;}
.phb blockquote h5 {font-weight: 100; color: #FFF;}
.phb blockquote p {font-size: 1em; font-family: "Source Sans Pro"; letter-spacing: 0.02em; color: #000;}
.phb blockquote strong {font-family: "Source Sans Pro", letter-spacing: 0.02em;}
.phb blockquote em {font-family: "Source Sans Pro"; letter-spacing: 0.02em;}

/*Description Block*/
.phb .descriptive {background-color:#171a18; border-image:url(https://www.gmbinder.com/images/W2snoqV.png) 12 round; border-image-outset:4px;}
.phb .descriptive {color: #d4d9d6}
.phb .descriptive h1 {font-weight: 100; color: #d1e5d9}
.phb .descriptive h2 {font-weight: 100; color: #d1e5d9}
.phb .descriptive h3 {font-weight: 100; color: #d1e5d9}
.phb .descriptive h4 {font-weight: 100; color: #d1e5d9}
.phb .descriptive h5 {font-weight: 100; color: #c3e5d4}
.phb .descriptive p {padding-bottom:0; line-height:1.3em}
.phb .descriptive p {font-family: "Source Sans Pro"; font-size: 1em; letter-spacing: 0.02em; color: FFF;}
.phb .descriptive p+p {padding-top:0em}
.phb .descriptive a{color: #c3e5d4;}
.phb .descriptive strong {font-family: "Source Sans Pro", serif; letter-spacing: 0.02em;}
.phb .descriptive italics {font-family: "Source Sans Pro", serif; letter-spacing: 0.02em;}

/* Code Block */
.phb code{border:none; font-family: "Alegreya Sans"; line-height: 1.2em; background-color: #aab3af; color: #000; letter-spacing: -0.02em;}
.phb pre{background-color: #aab3af;}

/* Monster Statblock */
.phb hr+section blockquote
{   background-image: url('https://www.gmbinder.com/images/qbt6phP.png');
    border-image: url('https://www.gmbinder.com/images/kIjTWRV.png');
    background-position: center;
    border-image-slice: 20
}
.phb hr+section blockquote hr {background-image: url(https://www.gmbinder.com/images/nyuK5zP.png);
    height: 5px; margin: 7px 0;
} 
.phb hr+section blockquote {box-shadow: none;}
.phb hr+section blockquote {color: #000;}
.phb hr+section blockquote h2 {color: #000;}
.phb hr+section blockquote h3 {font-family:"Source Sans Pro"; border-bottom:1px solid #000; color: #000}
.phb hr+section blockquote h4 {color: #000;}
.phb hr+section blockquote h5 {color: #000;}
.phb hr+section blockquote p {color: #21332b; font-family: "Alegreya Sans"; font-size: 1.1em; letter-spacing: 0.02em; font-size: 1.02em;}
.phb hr+section blockquote p em {color: #000; font-family: "Alegreya Sans"; font-size: 1.1em; letter-spacing: 0.02em; font-size: 1.02em;}
.phb hr+section blockquote p strong {color: #000; font-family: "Lato"; font-size: 0.93em; letter-spacing: 0.02em}
.phb hr+section blockquote hr+ul {color: #21332b; font-family: "Alegreya Sans"; font-size: 1.1em; letter-spacing: -0.02em}
.phb hr+section blockquote hr+ul strong {color: #000; font-family: "Lato"; font-size: 0.93em; letter-spacing: 0.02em}
.phb hr+section blockquote hr+ul em {color: #000; font-family: "Lato"; font-size: 0.93em; letter-spacing: 0.02em}
.phb hr+section blockquote table {color: #000;  line-height:6px; padding-bottom: 4px; padding-top: 6px;}
.phb hr+section blockquote table tr {letter-spacing: 0.02em;}
.phb hr+section blockquote table td {background-color: inherit; color: #21332b;}

/* Vehicle Statblock - Narrow */
.phb .vehicle
{   position: relative; padding-top: 15px; padding-bottom: 5px;
    background-color: #dfe5e3;
    border-style: solid;
    border-image: url('https://www.gmbinder.com/images/SecVDGD.png');
    border-width: 8px; border-image-slice: 20
}
.phb .vehicle hr {visibility: visible;
    height: 6px; margin: 4px 0;
    background-image: url('https://www.gmbinder.com/images/vmb7Fq6.png');
    background-size: 100% 100%; border: none;
} 
.phb .vehicle {box-shadow: none;}
.phb .vehicle {color: #000;}
.phb .vehicle h2 {font-weight: 100; color: #21332b; margin-top: -8px; margin-bottom: 0}
.phb .vehicle h2+p {padding-bottom: 0}
.phb .vehicle h3 {color: #21332b; font-family: "Source Sans Pro"; font-variant: small-caps; font-weight: 500;border-bottom:1px solid #1f4d38;}

.phb .vehicle p {color: #21332b; font-family: "Alegreya Sans"; letter-spacing: 0.02em; font-size: 1.02em;}
.phb .vehicle p em {color: #000; font-family: "Alegreya Sans"; letter-spacing: 0.02em; font-size: 1.02em;}
.phb .vehicle p strong {color: #000; font-family: "Lato"; font-size: 0.93em; letter-spacing: 0.02em}
.phb .vehicle p+p {margin-top: 0; margin-bottom: 7px; text-indent:0;}

.phb .vehicle hr+ul {color: #21332b;; font-family: "Alegreya Sans"; letter-spacing: -0.02em}
.phb .vehicle hr+ul strong {color: #000; font-family: "Lato"; font-size: 0.93em; letter-spacing: 0.02em}
.phb .vehicle hr+ul em {color: #000; font-family: "Lato"; font-size: 0.93em; letter-spacing: 0.02em}
.phb .vehicle table {margin: 0;
    line-height: 6px;
    padding-bottom: 4px; padding-top: 6px;
    column-span: 1;
    background-color: transparent;
    border-style: none; border-image: none;
    -webkit-column-span: 1}
.phb .vehicle table tr {letter-spacing: 0.02em; background-color: inherit;}
.phb .vehicle table td {background-color: inherit;  color: #21332b;}
.phb .vehicle hr+table tbody tr:nth-child(odd) {background-color: inherit;}

/* Vehicle Statblock - Wide */
.phb .vehiclewide
{   column-span: all; column-fill: auto; column-gap: 1cm; column-width: 7.68cm;
    position: relative; padding-top: 15px; padding-bottom: 10px;
    background-color: #dfe5e3;
    border-style: solid; border-image: url('https://www.gmbinder.com/images/SecVDGD.png');
    border-width: 8px; border-image-slice: 20
}
.phb .vehiclewide hr {visibility: visible;
    height: 6px; margin: 4px 0;
    background-image: url('https://www.gmbinder.com/images/vmb7Fq6.png');
    background-size: 100% 100%; border: none;
} 
.phb .vehiclewide {box-shadow: none;}
.phb .vehiclewide {color: #000;}
.phb .vehiclewide h2 {font-weight: 100; color: #21332b; margin-top: -8px; margin-bottom: 0}
.phb .vehiclewide h2+p {padding-bottom: 0}
.phb .vehiclewide h3 {color: #21332b; font-family: "Source Sans Pro"; font-variant: small-caps; font-weight: 500;border-bottom:1px solid #1f4d38;}

.phb .vehiclewide p {color: #21332b; font-family: "Alegreya Sans"; letter-spacing: 0.02em; font-size: 1.02em;}
.phb .vehiclewide p em {color: #000; font-family: "Alegreya Sans"; letter-spacing: 0.02em; font-size: 1.02em;}
.phb .vehiclewide p strong {color: #000; font-family: "Lato"; font-size: 0.93em; letter-spacing: 0.02em}
.phb .vehiclewide p+p {margin-top: 0; margin-bottom: 7px; text-indent:0;}

.phb .vehiclewide hr+ul {color: #21332b;; font-family: "Alegreya Sans"; letter-spacing: -0.02em}
.phb .vehiclewide hr+ul strong {color: #000; font-family: "Lato"; font-size: 0.93em; letter-spacing: 0.02em}
.phb .vehiclewide hr+ul em {color: #000; font-family: "Lato"; font-size: 0.93em; letter-spacing: 0.02em}
.phb .vehiclewide table {margin: 0;
    line-height: 6px;
    padding-bottom: 4px; padding-top: 6px;
    column-span: 1;
    background-color: transparent;
    border-style: none; border-image: none;
    -webkit-column-span: 1}
.phb .vehiclewide table tr {letter-spacing: 0.02em; background-color: inherit;}
.phb .vehiclewide table td {background-color: inherit; color: #21332b}
.phb .vehiclewide hr+table tbody tr:nth-child(odd) {background-color: inherit}

/* Part Page Heading Text Color */
.phb .partpage {background-image:url(https://www.gmbinder.com/images/6mU9UPK.png);}
.phb .partpage {color: #171a18;}
.phb .partpage h1 {color: #e1e5e3;}
.phb .partpage h2 {color: #e1e5e3;}
.phb .partpage h3 {color: #e1e5e3;}
.phb .partpage h4 {color: #e1e5e3;}
.phb .partpage h5 {color: #171a18;}

.phb .partpage-dmg {background-image:url(https://www.gmbinder.com/images/TkOugaQ.png);}
.phb .partpage-dmg {color: #171a18;}
.phb .partpage-dmg h1 {color: #e1e5e3;}
.phb .partpage-dmg h2 {color: #e1e5e3;}
.phb .partpage-dmg h3 {color: #e1e5e3;}
.phb .partpage-dmg h4 {color: #e1e5e3;}
.phb .partpage-dmg h5 {color: #171a18;}

/* Footer */
.phb:nth-child(odd):after
{
    content          : "";
    position         : absolute;
    bottom           : 0;
    left             : 0;
    z-index          : -1;
    height           : 392px;
    width            : 100%;
    background-image : url('https://www.gmbinder.com/images/1pA0D6q.png');
    background-size: cover
}
.phb:nth-child(even):after
{ 
    content          : '';
    position         : absolute;
    bottom           : 0;
    left             : 0;
    z-index          : -1;
    height           : 392px;
    width            : 100%;
    background-image : url('https://www.gmbinder.com/images/aFkA76H.png');
    background-size  : cover;
}

/* Center Footer Image Only */
.phb:nth-child( ):after
{
    content          : "";
    position         : absolute;
    bottom           : 0;
    left             : 0;
    z-index          : -1;
    height           : 392px;
    width            : 100%;
    background-image : url('https://www.gmbinder.com/images/p0n916P.png');
    background-size: cover;
}

/* Footnote */
.phb .footnote
{
    position   : absolute;
    right      : 80px;
    bottom     : 34px;
    z-index    : 150;
    width      : 700px;
    text-align : right;
    color      : #3b403e;
    font-size  : 13pt;
    letter-spacing: 0.5px;
    font-variant: small-caps;
}

/* Page Number */
.phb .pageNumber.auto
{
    font-size: 13pt;
    color: #434d46;
    position   : absolute;
    bottom     : 34px;
    width      : 50px;
    text-align : center;
}
    
.phb:nth-child(even) .pageNumber.auto {left: 6px;}
.phb:nth-child(odd) .pageNumber.auto {right: 6px;}

</style>

# Blackthorn Theme 2.0

This is version 2 of the **Blackthorn** theme, a theme for GM binder by /u/blckthorn. You can find the dark version of this theme [here](https://www.gmbinder.com/share/-LKYVliROX20cBbSI0r3 "Blackthorn Dark theme"). Feel free to PM me with any questions, criticisms, comments or suggestions

<div class='wide'

<table class="table1">
  <tr>
    <td> </td>
    <td></td>
    <td></td>
  <tr>
    <td> <B>About this theme</B>  -  <a href="#use">Use</a>, <a href="#changes">Changes</a></td>
    <td><B>Statblocks</B>  -  <a href="#monster">Monster</a>, <a href="#vehicle">Vehicle</a></td>
    <td><B>Using Art</B>  -  <a href="#stains">Full Page Stains</a>, <a href="#diy">DIY</a></td>
    </tr>
  <tr>
    <td><B> Basic elements</B>   -  <a href="#headings">Headings</a>, <a href="#noteblocks">Note Blocks</a></td>
    <td><B>Footers</B>    -  <a href="#foottrees">Tree Images</a>, <a href="#footold">Old Footers</a></td>
    <td><B>Credits</B>     -  <a href="#credits">Credits and Thanks</a></td>
    </tr>
  <tr>
    <td><B> Tables</B>        -  <a href="#tables">Tables,</a> <a href="#classblocks">Class Blocks</a></td>
    <td><B>Extras</B>     -  <a href="#divider">Divider Images</a>, <a href="#etc">etc.</a></td>
    <td></td>
    <tr>
  <tr>
    <td> </td>
    <td></td>
    <td></td>
  <tr>
</table>

</div>

### About this theme

##### Use </div>

Use all or parts of this theme freely within GM Binder, even if it's something you're selling. A brief mention is always nice as I like seeing what people have done with it

___
**To use this theme** - copy the theme (and html) code section and paste into the top of your document
___
**Back up your work** - It bears mentioning that if you are making tweaks to this, or any other theme, copy your code regularly to a text file or Google Docs

##### Changes </div>

- New custom footer images.  The tree silhouette on the side can be disabled.  There is also an option to use the old Xanathar's-style footers (see below)
- New full-page watercolor stains - an adaptation of those created by [FallenWyvern](https://www.reddit.com/user/FallenWyvern/ "FallenWyvern")
- A brief how-to on creating your own watercolor stains using Photoshop/GIMP
- Vehicle statblocks have been added
- Minor element, color and font adjustments
- Added classes that can be used for centering, indenting or padding text left and right
- New divider art

\columnbreak

### Themed Elements

To my knowledge, all elements have been themed.  This includes fonts, headings, part headers, noteblocks, tables, statblocks, footers, fonts and art.
<BR>
Snippets, including cover pages, should work correctly

##### Headings </div>
There are 6 headings.  Headings 1-5 are pretty standard, while heading 6 is centered and can be easily modified for special uses

**h1**  (#)  is at the top of this page
<div style="margin-top:12px;"></div>

## h2 heading (##)
<div style="margin-top:16px;"></div>

### h3 heading (###)
<div style="margin-top:20px;"></div>

#### h4 heading (####)
<div style="margin-top:16px;"></div>

##### h5 heading (#####)
<div style="margin-top:16px;"></div>

###### h6  (######)

##### Part Headers </div>

Part header examples are on pages 2 and 4

<div class=footnote>Footnote Example</div>

\pagebreakNum

# PHB
##### Part Header Example
</div>

##### Note Blocks </div>

<BR>

> ##### Note Block
> All Note Block headings are white
> <BR>
> Text is black
> <BR>

##### Description Block
 
Description block headings are colored
<BR>
For this theme, I reduced the line spacing for the Description Block
</div>
<div style='margin-top:36px;'></div>

Should you prefer the original Description Block line spacing, remove the following 2 lines from that theme section:
<div style='margin-top:20px;'></div>

~~~
<font color=#d9b257> .phb .descriptive p {padding-bottom:0; line-height:1.2em}
.phb .descriptive p+p {padding-top:0em} </font>
~~~

### Tables
Including Class Blocks, tables and wide tables
<div style='margin-top:24px;'></div>

##### Tables </div>
<div style='margin-top:8px;'></div>

| Size   | | HP | AC | | Str | Dex | | Attack | Damage   |
| :----- | -    | :-:| :-:| -    | :-: | :-: | -    | :----: | :------: |
| Tiny   |      | 20 | 18 |      | 4   | 18  |      | +8     | 1d4 + 4  |
| Small  |      | 25 | 16 |      | 6   | 14  |      | +6     | 1d8 + 2  |
| Medium |      | 40 | 13 |      | 10  | 12  |      | +5     | 2d6 + 1  |
| Large  |      | 50 | 10 |      | 14  | 10  |      | +6     | 2d10 + 2 |
| Huge   |      | 80 | 10 |      | 18  | 6   |      | +8     | 2d12 + 4 |

\columnbreak

To make a wide table, insert the following before the table, making sure not to forget the </div> tag afterwards

~~~
<div class=wide>
~~~

##### Class Blocks </div>

##### The Deadly Class

|Level| | Proficiency Bonus | Features | Deadliness Modifier |
|:---:|-|:---:|:----------------:|:---:
| 1st | | +2 | angry chicken     | +3
| 2nd | | +3 | fatal blunder    | +4
| 10th| | +4 | deadly on Tuesday | +10
| 20th| | +5 | a true ninja      | +42

</div>

There is also a transparent Class Block option.
<BR>
Activate it by replacing the existing Class Block section with:

~~~
/* Class Block - Clear */
.phb .classTable
{
    border-image-outset: 25px 10px !important;
    align:center;
    width:90%;
    margin-left:auto;
    margin-right:auto;
    line-height:11px;
    border-image-source: url(https://www.gmbinder.com/images/9MsVmEn.png);
    background-color: inherit;
}
.phb .classTable h5 {color: #c3e5d4; font-weight: 100;}
~~~

\pagebreakNum

<BR>

### Monster Blocks </div>
Yep, custom theme for the monster block

___
> ## Monster Name
>*Size, Alignment*
> ___
> - **Armor Class**  AC
> - **Hit Points**  Hitpoints
> - **Speed**  Speed
>___
>|STR|DEX|CON|INT|WIS|CHA|
>|:---:|:---:|:---:|:---:|:---:|:---:|
>|4 (-3)|16 (+3)|10 (+0)|2 (-4)|10 (+0)|1 (-5)|
>___
> - **Saving Throws**  saving_throws
> - **Skills**  skills
> - **Damage Vulnerabilities**  damage_vulnerabilities
> - **Damage Resistances**  Resistances
> - **Damage Immunities**  Damage_Immunities
> - **Condition Immunities**  condition_Immunities
> - **Senses**  Senses
> - **Languages**  Languages
> - **Challenge**  Challenge and Xp
> ___
>
> ### Actions
> ***Multiattack.***  The Creature Name makes Number and type of attacks
>
> ***Ability Description.***  *Attack Style:*  Attack Bonus to hit, Reach/Range, one target. *Hit:*  Damage Damage Type damage
>
> ***General Ability Description.***  General Attack Description

### Vehicle Blocks </div>

Ghosts of Saltmarch introduced Vehicle statblocks.
<BR>
___
Note that since there is no snippet, you will need to copy the examples found in this theme to use them.  The following narrow and wide vehicle statblocks are templates
___
Since the vehicle statblocks do take up a few lines of code, I normally delete those style sections from the theme when not using them.

\columnbreak

<BR>

##### Narrow Vehicle Statblock
<div style='margin-top:24px;'></div>

## Vehicle Type
*Size of vehicle (0 ft. by 0 ft.)*
___
- **Creature Capacity** 0 crew, 0 passengers
- **Cargo Capacity** 0 tons
- **Travel Pace** 0 miles per hour (0 miles per day)
___
| STR   | DEX   | CON   | |INT|  |WIS| |CHA|
|:-----:|:-----:|:-----:| -    |:-:| -          |:-:| -    |:-:|
|10 (+0)|10 (-0) |10 (+0)|      | 0 |            | 0 |      | 0 |

___
- **Damage Immunities** immunities
- **Condition Immunities** immunities

___
### Actions
On its turn...

**Fire Weapon.** weapon
<BR>
**Move.** movement

### Hull
**Armor Class** 10
<BR>
**Hit Points** 0 (damage threshold 0)

### Control: Type
**Armor Class** 10
<BR>
**Hit Points** 0

How vehicle moves

### Movement: Type1
**Armor Class** 10
<BR>
**Hit Points** 0; -0 ft. speed per 0 damage taken
<BR>
**Speed (land or water)** 0 ft.

### Movement: Type2
**Armor Class** 10
<BR>
**Hit Points** 0; -0 ft. speed per 0 damage taken
<BR>
**Speed (land or water)** 0 ft.

### Weapon: Weapon1
**Armor Class** 10
<BR>
**Hit Points** 0
<BR>
*Attack Type:* +0 to hit, range 0/0 ft. *Hit:* 0 (0d0) damage

Weapon description

</div>

\pagebreakNum

# DMG
##### Part Header Example

</div>

##### Wide Vehicle Block

</div>

<BR>

___
- **Damage Immunities** immunities
- **Condition Immunities** immunities

___
### Actions
On its turn...

**Fire Weapon.** weapon
<BR>
**Move.** movement

### Hull
**Armor Class** 10
<BR>
**Hit Points** 0 (damage threshold 0)

### Control: Type
**Armor Class** 10
<BR>
**Hit Points** 0

How vehicle moves

### Movement: Type1
**Armor Class** 10
<BR>
**Hit Points** 0; -0 ft. speed per 0 damage taken
<BR>
**Speed (land or water)** 0 ft.

### Movement: Type2
**Armor Class** 10
<BR>
**Hit Points** 0; -0 ft. speed per 0 damage taken
<BR>
**Speed (land or water)** 0 ft.

### Weapon: Weapon1
**Armor Class** 10
<BR>
**Hit Points** 0
<BR>
*Attack Type:* +0 to hit, range 0/0 ft. *Hit:* 0 (0d0) damage

Weapon description

</div>

### Footers
<div style='margin-top:16px;'></div>

##### Removing the tree image </div>

You may not always (or ever) want the tree silhouette as part of the footer image.
___
If so, go to the following section:

~~~
/* Center Footer Image Only */
.phb:nth-child(  ):after
~~~

To remove the tree, leaving only the bottom line on all pages, type n+1 in between the parenthesis:

\columnbreak

~~~
.phb:nth-child( n+1 ):after
~~~

To remove the tree on a single page, type that page number in between the parenthesis.
To remove the tree on multiple pages, you will need to create multiple statements:

~~~
.phb:nth-child( 4 ):after

.phb:nth-child( 4 ):after, .phb:nth-child( 9 ):after
~~~

\pagebreakNum

<BR>

##### Footer Images - trees only

If, for any reason, you wanted to use only the tree silhouettes (no bottom art), go to the  **Footer Images**  section and replace what's there with the following:

~~~
/* Right Tree Only */
.phb:nth-child( ):after
{
    content          : "";
    position         : absolute;
    bottom           : 0;
    left             : 0;
    z-index          : -1;
    height           : 392px;
    width            : 100%;
    background-image : url('https://www.gmbinder.com/images/GHhitPd.png');
    background-size: cover;
}

/* Left Tree Only */
.phb:nth-child( ):after
{ 
    content          : '';
    position         : absolute;
    bottom           : 0;
    left             : 0;
    z-index          : -1;
    height           : 392px;
    width            : 100%;
    background-image : url('https://www.gmbinder.com/images/VBwHEx6.png');
    background-size  : cover;
}
~~~

<BR>

##### Footer Images - old Xanathar-style footers </div>

To use the old Xanathar-style footers, go to the  **Footer Images**  section and replace what's there with the following:

~~~
.phb:nth-child(odd):after
{
    content          : '';
    position         : absolute;
    bottom           : -12px;
    left             : 20px;
    z-index          : -1;
    height           : 336px;
    width            : 99%;
    background-image : url('https://www.gmbinder.com/images/Vjq0KhB.png');
    background-size  : cover;
}
    
.phb:nth-child(even):after
{ 
    content          : '';
    position         : absolute;
    bottom           : -12px;
    left             : -12px;
    z-index          : -1;
    height           : 336px;
    width            : 99%;
    background-image : url('https://www.gmbinder.com/images/ySad6mT.png');
    background-size  : cover;
}
~~~

If using these, you may want to go to the  **Footnote**  and

**Page Number**  sections and change   **bottom: 34px;**  to be

**bottom: 32px**

</div>

### Divider Line Art </div>

Above and below are simple and fancy divider images you can use to delineate sections.  When inserting the images (code examples on the right), I find that measuring from the top generally has better results when printing or creating PDFs

___
Image Links:
<BR>
[https://www.gmbinder.com/images/qeDdWrL.png](https://www.gmbinder.com/images/qeDdWrL.png "plain section break line")
<BR>
[https://www.gmbinder.com/images/uyfGm3f.png](https://www.gmbinder.com/images/uyfGm3f.png "fancy section break line")

\columnbreak

~~~
<img src='https://www.gmbinder.com/images/qeDdWrL.png' 
  style='position:absolute; top:642px; left:0px; width:100%' />

<img src='https://www.gmbinder.com/images/uyfGm3f.png' 
  style='position:absolute; top:892px; left:0px; width:100%' />
~~~

\pagebreakNum

<BR>

##### Etc... </div>

Adding the page number to the last page can be tricky as the normal method doesn't seem to work with this theme.  Instead, use the following:

~~~
<div class='pageNumber auto'></div>
~~~

<BR>

</div>

### Working with Images </div>
<div style='margin-top:16px;'></div>

##### Full Page Watercolor Stains

I've adapted the full-page watercolor stains by [FallenWyvern](https://www.reddit.com/user/FallenWyvern/ "FallenWyvern") to work with this theme:
<div style='margin-top:20px;'></div>

[Blackthorn Light Watercolor Stains](http://bit.ly/BlackthornLightWatercolor)
<div style='margin-top:20px;'></div>

</div>
</div>

How to use these is beyond the scope of this document, but here's some tutorials:
___
[https://www.gmbinder.com/share/-L4Yt8ZSxmhwqt--yNRT](https://www.gmbinder.com/share/-L4Yt8ZSxmhwqt--yNRT)
[https://www.gmbinder.com/share/-Kx5i9fuxhuci6BUrbJq](https://www.gmbinder.com/share/-Kx5i9fuxhuci6BUrbJq)

\columnbreak

##### Photoshop/GIMP Stains </div>

For those who use Photoshop, here's the steps I use to create my own watercolor stains.  GIMP works well too, I'm just not as familiar with it
___

Start by downloading and importing the brushes

(Resource zip file link in the following tutorial):
___

[Tutorial](https://dnd-5e-homebrew.tumblr.com/post/134421010799/phb-homebrewing-tutorial),   [Direct Link to resource file](https://t.umblr.com/redirect?z=https%3A%2F%2Fmega.nz%2F%23%21DMcEhRQI%21RdV02Wqy4hThUxcxQVg1_pz_OGZARFgibZ38moSc5p8&t=YWU5ODRiZTMwNGIzYmJiMGVjM2YzYjAwOTU1M2RlYjE1YWJlYzFiMix4Nmd2cmdaZw%3D%3D&b=t%3AiwpyZfVra5yckXL7sTcK2w&p=https%3A%2F%2Fdnd-5e-homebrew.tumblr.com%2Fpost%2F134421010799%2Fphb-homebrewing-tutorial&m=1)

**Step 1 - Get rid of the smooth edge**

- Select all on the image and copy it into a new document with a transparent background
- Select the eraser tool and set the mode to 'Pencil'
- Choose a brush and erase just of the edge of the image, giving it a "torn paper" look.  Don't drag these large brushes, just click.  I usually use more than 1 brush to vary the effect
___
**Step 2 - Create a semi-transparent edge**

- Change the eraser tool mode to 'Brush' and set the opacity to 50%
- Choose a different brush and use it to erase a little bit more of the edge - this creates the semi-transparent look
___
**Step 3 (optional) - Create a faded stain under the edge**

- Start a new layer and make sure it is underneath the original image
- Select the brush tool, set it to 50% opacity and select a black color
- Paint underneath the edge by clicking with your choice of brush
- When you are done, set the opacity of the underneath layer to 40%
- To give it a lighter color so it shows against a dark background - make sure the bottom layer is selected, then go into Hue/Saturation.  Adjust the Brightness up by 60%.

\pagebreakNum

> ## Credits and thanks
>
> Thank you to the [GMbinder](https://www.reddit.com/r/gmbinder "GMbinder reddit page") developers for all their work creating GM Binder
>
> Check out their [Patreon Page](https://www.patreon.com/gmbinder "GMbinder Patreon page")
>
> ___
>
> ##### Art Used to create this theme:
>
> ___
> Background was created by modifying 'Some Old Gray Worn Paper Background' by [My Free Textures ](http://www.myfreetextures.com/worn-parchment-paper-5/ "Some Old Gray Worn Paper Background")
> ___
> Texture used to create the Monster Statblock and the Part Headers can be found at: [Texture King](https://www.textureking.com/10_5520/ "Free Textures")
> ___
> Footer image branch and tree elements created using my own photos.  Celtic knots inspired by the Book of Kells

</div>

Blackthorn Dark Theme by /u/blckthorn</div>