Traveller Template (MGT2)

.phb .cover-diamond {
    background-image: url('https://www.gmbinder.com/images/RIVVWVX.png');
    background-size: 600px;
    background-repeat: no-repeat;
    position: absolute;
    left: 100px;
    top: 150px;
    width: 700px;
    height: 50px;
}
  
  .phb .cover-footer {
    position: absolute;
    font-family: Orbitron;
    font-size: 20px;
    color: white;
    bottom: 15px;
    right: 0px;
    width: 810px;
    text-shadow: 1px 1px 2px #000000, -1px 1px 2px #000000, 1px -1px 2px #000000, -1px -1px 2px #000000;
    filter: opacity(100%);
    text-align: center;
}

.phb .cover-splotch {
        background-image: url('https://www.gmbinder.com/images/2kVLy63.png');
        background-size: 350px;
        background-repeat: no-repeat;
        position: absolute;
        left: 0;
        bottom: 100px;
        width: 500px;
        height: 400px;
        
}
    
    .phb .cover-splotch-text {
        font-family: Orbitron;
        font-size: 16pt;
        color: white;
        text-shadow: 1px 1px 2px #000000, -1px 1px 2px #000000, 1px -1px 2px #000000, -1px -1px 2px #000000;
        filter: opacity(100%);
        text-align: left;
        text-transform: uppercase;
        position: relative;
        left: 162px;
        top: 152px;
    }

</style>

<div class='cover-header'>The <br> Traveller's Handbook</div>

<div class='cover-splotch'>
    <div class='cover-splotch-text'>
    sabinar main
    </div>
</div>

\pagebreak

.top-to-bottom {
    border-width: 3px;
    border-style: solid;
    -webkit-border-image: 
      -webkit-gradient(linear, 0 0, 0 100%, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
    -webkit-border-image: 
      -webkit-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;
    -moz-border-image:
      -moz-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;    
    -o-border-image:
      -o-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;
    border-image:
      linear-gradient(to bottom, black, rgba(0, 0, 0, 0)) 1 100%;
}

.phb{
    font-family: Roboto;
    font-size: 10pt;
    font-weight: 400;
}

.phb p{
    line-height: 1.4em;
    font-family: Roboto;
    font-weight: 400;
}

.phb strong{
    font-family: Roboto;
    font-weight: 700;
}

.phb h1{
    font-family: Orbitron;
    font-size: 29pt;
    text-align: center;
    color: #222;
    text-transform: uppercase;
    border-bottom: 4px solid #f4c031;
}

.phb h2{
    font-family: 'Exo 2';
    text-transform: uppercase;
    font-size: 18pt;
    color: #23363a;
}

.phb h3{
    font-family: 'Exo 2';
    font-size: 14pt;
    color: #23363a;
    border-bottom:  2px solid #f4c031;   
}

.phb h5 {
    font-family: 'Exo 2';
    color: #00526d;
}

.phb h1+p::first-letter {
    float:          left;
    font-family:    Orbitron;
    font-size:      10em;
    color:          #222;
    line-height:    .8em
}

/* unvisited link */
a:link {
    color: #00a0d1;
}

/* visited link */
a:visited {
    color: #00697a;
}

/* mouse over link */
a:hover {
    color: hotpink;
}

/* selected link */
a:active {
    color: blue;
}

.phb code{
    color: #00a0d1
}

.phb#p4:after { display:none; }
  .phb#p5:after { display:none; }
  
.phb .descriptive {
    display: block-inline;
    margin-bottom: 1em;
    background-color: #faf7ea;
    font-family: Roboto;
    font-size: 9pt;
    border-style: solid;
    border-width: 7px;
    border-image: url(/assets/img/sidebars.png) 12 round;
    border-image-outset: 4px;
    box-shadow: 0 0 6px #faf7ea;
    padding: 0px 5px;
}

.phb .descriptive em {
    font-family: Roboto;
    font-style: italic;
}

.phb .descriptive strong {
    font-family: Roboto;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.phb blockquote {
    font-family: Roboto;
    font-size: 9pt;
    box-sizing: border-box;
    margin-bottom: 1em;
    margin-top: 9px;
    padding: 5px 10px;
    background-color: #dcedf3;
    border-style: solid;
    border-width: 11px;
    border-image: url(https://www.gmbinder.com/images/GkN0CFA.png) 11;
    border-image-outset: 9px 0;
    box-shadow: 1px 4px 14px #888;
}

.phb blockquote strong {
    font-family: Roboto;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.phb blockquote em {
    font-family: Roboto;
    font-style: italic;
}

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

/* Tables */
  table tr:nth-child(odd) td {background-color: #cccccc}
  table th {font-family: Exo 2;}
  .phb table {
    font-family: Roboto;
    width: 100%;
    margin-bottom: 1em;
    font-size: 10pt;
    line-height: 1.1em;
}

/* Footer */
  .phb .pageNumber {color: rgba(0, 0, 0, 0.5)}
  .phb .footnote {color: rgba(0, 0, 0, 0.5)}
  .phb:nth-child(odd):after{ 
    content          : '';
    position         : absolute;
    bottom           : -3px;
    left             : 0px;
    z-index          : 1;
    height           : 336px;
    width            : 100%;
    background-image : url('https://www.gmbinder.com/images/mO6mjVE.png');
    background-size  : cover;
    transform: scaleX(-1);
}

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

/* Page Number */
.phb .pageNumber{
    position   : absolute;
    bottom     : 30px;
    width      : 50px;
    text-align : center;
}
.phb:nth-child(even) .pageNumber{
    left      : 12px;
}
.phb:nth-child(odd) .pageNumber{
    right      : 12px;
}

.phb .pageNumber.auto{
    position   : absolute;
    bottom     : 41px;
    width      : 70px;
    text-align : center;
}
.phb:nth-child(even) .pageNumber.auto{
    left      : 12px;
}
.phb:nth-child(odd) .pageNumber.auto{
    right      : 12px;
}

</style>

# MGT2e Traveller Skin

## Overview on Creating
GMBinder uses markdown for its primary content. To learn about Markdown and its supporting syntax, [check this out](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)

In addition, GM Binder allows for HTML content within your document. However, "User Beware" warnings apply. Especially now in this early stage. Using HTML for things like images and links is pretty safe. However, structured HTML like divs, tables, etc, may have undesired consequences.
## GMBinder Specific
### Page Breaks
* Using `\pagebreak` will result in a page break. Or press `Ctrl+;` or `Cnd+;` to insert this.
* Using `\pagebreakNUm` will result in a page break with page number. Or press `Ctrl+'` or `Cnd+'` to insert this.

### Links
* Internal Links - Press Ctrl+Space to get a list of all of your document's headers. Press tab on one to insert the link into your document. ie: [Welcome to your next campaign binder!](#welcome-to-your-next-campaign-binder)
* External Links - Using the standard markdown link syntax with an external URL will result in a link that opens a new tab. ie: [Staff of Darkening](https://www.dndbeyond.com/magic-items/29957-staff-of-anti-thunder-and-darkening)
* If you would like the actual URL to show in your external link, a simple solution is to simply wrap it with < and >. ie: <https://www.gmbinder.com>

### Table of Contents
In the menu above, you'll see a Table of Contents for your document.

### Images
There are a couple ways you can place images. If you would like something positioned like you see on this page, you will need to provide the appropriate styles to do so. For example:

`<img src='https://www.gmbinder.com/assets/img/books.jpg' style='position:absolute;bottom:45px;right:30px;width:380px; mix-blend-mode:multiply;' />`

If you would like to place an image in-line within your content, simply providing an image tag with an external URL will be sufficient. Do be aware that your images should be sized appropriately for the content.

\columnbreak
### Wrapping to Column Two
Sometimes you want your content in column 1 to be cut short and continue on to column 2. The simplest way to accomplish this is to use: `\columnbreak`
___
You can also press `Ctrl+.` or `Cnd+.` to insert this.

### Footnotes
This is an example of using html and built in styles to get a desired output.

`<div class='footnote'>Part 1 | Introduction</div>`

<img src='https://i.pinimg.com/originals/f4/e1/61/f4e1610e9cd631ee3a877be9376edaa3.jpg' style='position:absolute;bottom:45px;right:30px;width:350px; mix-blend-mode:multiply;' />
<div class='footnote'>Part 1 | Tutorial</div>

## Basic Editor Shortcuts

### Find and Replace
* `Ctrl+F` or `Cmd+F` - Find
* `Alt+Ctrl+F` or `Alt+Cmd+F` - Find & Replace

### Editing
* `Ctrl+Z` or `Cmd+Z` - Undo
* `Ctrl+Shift+Z` or `Cmd+Shift+Z` - Redo
* `Ctrl+D` or `Cmd+D` - Remove current line
* `Ctrl+U` - Uppercase current selection
* `Ctrl+Shift+U` - Lowercase current selection

### Content Folding
* `F2` - Fold / Unfold a block of content
* `Ctrl+Cmd+Alt+0` Fold everything
* `Shift+Cmd+Alt+0` UnFold everything

\pagebreakNum

# Ready. Set. Go!
Here are some other widgets and things to test *re-coloring* and **font changes**.  E.g. description block, note block, and tables.

<div class='footnote'>Part 2 | Your Introduction</div>
<div class='descriptive'>

##### Description Block
 This block contains *useful information* or call-out for **further info** on a topic.  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa ultricies mi quis hendrerit dolor magna. Viverra ipsum nunc aliquet bibendum enim. Sem viverra aliquet eget sit amet tellus cras. Accumsan tortor posuere ac ut. Nibh tortor id aliquet lectus proin nibh nisl condimentum. 
 
 Libero volutpat sed cras ornare. Cursus risus at ultrices mi tempus imperdiet nulla. Natoque penatibus et magnis dis parturient montes nascetur ridiculus. Justo donec enim diam vulputate ut pharetra sit amet aliquam. Leo vel orci porta non pulvinar neque. Scelerisque eu ultrices vitae auctor eu augue ut. Et malesuada fames ac turpis egestas maecenas pharetra. Neque laoreet suspendisse interdum consectetur libero id faucibus nisl. Tortor posuere ac ut consequat semper viverra nam libero. Diam maecenas sed enim ut sem. Aliquam sem et tortor consequat id.
 
 </div>

> ##### Note Block
 > This block contains *shorter blurbs* of **supplementary** information. 
 >
 > In vitae turpis massa sed elementum tempus. Cursus mattis molestie a iaculis at erat pellentesque adipiscing. 
 >
 > Proin nibh nisl condimentum id venenatis a condimentum. Diam maecenas ultricies mi eget. 
 
 \columnbreak
 
 
 
 | d6 |         Loot        |   Flavor  |   Color  |
|:--:|:-------------------:|:---------:|:--------:|
|  1 |     1 Ship Share    |   Banana  |  Yellow  |
|  2 |        5000Cr       |  Vanilla  |   Blue   |
|  3 | Plasma Rifle (TL14) | Chocolate |    Red   |
|  4 |     Sword (TL5)     |  Vanilla  |  Yellow  |
|  5 | 10 Military Rations |   Metal   | Metallic |
|  6 |     1 Ship Share    |    Flan   |   Beige  |
 
 <div style='column-count:2'>
 
 | d8  | Loot |
 |:---:|:-----------:|
 |  1  | 100Cr |
 |  2  | 200Cr |
 |  3  | 300Cr |
 |  4  | 400Cr |
 
 | d8  | Loot |
 |:---:|:-----------:|
 |  5  | 500Cr |
 |  6  | 600Cr |
 |  7  | 700Cr |
 |  8  | 1000Cr |
 
 </div>

\pagebreakNum