[nobr]

[class=tag]
    display: inline;
    margin-top: 10px;
    padding: 0px 0px 2px 4px;
    color: #085f63;
    font-size: 12px;
    font-family: Playfair Display;
[/class]

    [class name=tab]
        box-sizing: border-box;
        width: 30px;
        height: 30px;
        text-align: center;
        font-family: Arial;
        font-size: 10px;
        color: #333;
        margin: 1px;
        padding-top: 7px;
        background: #f7f7f7;
        border-radius: 5px;
        border: 1px solid #e6e6e6;
        transition: all .5s ease-in-out;
        cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important;
    [/class]

    [class name=selectedtab]
        box-sizing: border-box;
        width: 30px;
        height: 30px;
        text-align: center;
        font-family: Arial;
        font-size: 10px;
        color: #fff;
        margin: 1px;
        padding-top: 7px;
        background: #49beb7;
        border-radius: 5px;
        border: 1px solid #49beb7;
        transition: all .5s ease-in-out;
        cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important;
    [/class]

    [class name=tab state=hover]
        border: 1px solid #49beb7;
        cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important;
    [/class]

[class name=titleslide]
    font-family: Times New Roman;
    text-align: center;
    font-size: 30px;
    box-sizing: border-box;
[/class]


    [script class=tab on=click]
        hide tabcontents
        hide titleslide
        removeClass selectedtab tab
        set currentTab (getText)

        if (eq ${currentTab} 01) (addClass selectedtab tabone)
        if (eq ${currentTab} 02) (addClass selectedtab tabtwo)
        if (eq ${currentTab} 03) (addClass selectedtab tabthree)
        if (eq ${currentTab} 04) (addClass selectedtab tabfour)

        if (eq ${currentTab} 01) (show tabcontentsone)
        if (eq ${currentTab} 02) (show tabcontentstwo)
        if (eq ${currentTab} 03) (show tabcontentsthree)
        if (eq ${currentTab} 04) (show tabcontentsfour)
    [/script]


[div=cursor: url(https://66.media.tumblr.com/232c090ebdd37ae4bc17adb54e1e0344/tumblr_inline_ol4nwhvSwg1uxxza6_75sq.png), auto!important; width: 600px; margin: auto; margin-bottom: 10px;]
[div=font-family: Playfair Display; color: #49beb7; font-size: 40px; margin-bottom: -65px; margin-left: 5px; text-transform: lowercase;]the saint[/div]
[div=padding-top: 20px; width: 150px; margin-left: 455px; display: flex; justify-content: space-evenly;]
[div class="tab tabone"]01[/div]
[div class="tab tabtwo"]02[/div]
[div class="tab tabthree"]03[/div]
[div class="tab tabfour"]04[/div]
[/div][/div]


[div=width: 600px; margin: auto; background: #f7f7f7; box-sizing: border-box; padding: 20px; border-radius: 5px; border: 1px solid #e6e6e6; cursor: url(https://66.media.tumblr.com/232c090ebdd37ae4bc17adb54e1e0344/tumblr_inline_ol4nwhvSwg1uxxza6_75sq.png), auto!important;]

[div=display: flex; flex-direction: row;]

[div=flex: .8; background: #fff; margin-right: 15px; border-radius: 5px; color: #000; box-sizing: border-box;]
[div=border-radius: 5px 5px 0px 0px; height: 150px; background: url(https://66.media.tumblr.com/b05da299d8b66214f3138d8276d21cde/cbe0aaac52ec9722-d1/s640x960/dafaf3d8ee75457693f90debc0847e85d1c6ad89.png); background-size: cover;][/div]
[div=border-right: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; border-left: 1px solid #e6e6e6; border-radius: 0px 0px 5px 5px; height: 140px;]
[div=font-size: 14px; color: #49beb7; text-align: center; padding: 20px; font-weight: bold; font-family: Playfair Display;]character name[/div]
[div=font-size: 11px; color: #085f63; text-align: center; padding: 20px; padding-top: 0px; font-family: Playfair Display;]you could maybe put a quote here, if you like.[/div]
[/div]
[/div]


[div=flex: 2; background: #fff; border-radius: 5px; border: 1px solid #e6e6e6; color: #000;]

[div class="tabcontents tabcontentsone"][div=height: 250px; margin: 20px; display: flex; background: #fff;]
[div=flex: 2; font-size: 11px; line-height: 24px; text-align: justify; overflow-y: auto;]
[div class=tag]tag.[/div] info.
[br][/br]
[div class=tag]tag.[/div] info.
[br][/br]
[div class=tag]tag.[/div] info.
[br][/br]
[div class=tag]tag.[/div] info.
[br][/br]
[div class=tag]tag.[/div] info.
[br][/br]
[div class=tag]tag.[/div] info.
[/div]

[div=flex: .6; display: flex; flex-direction: column;]
[div=flex: 1; background: url(https://dimensionmill.org/wp-content/uploads/2019/03/square-placeholder.jpg); background-size: cover; margin-bottom: 10px;][/div]
[div=flex: 1; background: url(https://dimensionmill.org/wp-content/uploads/2019/03/square-placeholder.jpg); background-size: cover; margin-bottom: 10px;][/div]
[div=flex: 1; background: url(https://dimensionmill.org/wp-content/uploads/2019/03/square-placeholder.jpg); background-size: cover;][/div]
[/div]

[/div][/div]




[div class="tabcontents tabcontentstwo" style="display: none;"][div=height: 250px; margin: 20px; display: flex; background: #fff;]
[div=flex: 2; font-size: 11px; line-height: 24px; text-align: justify; overflow-y: auto;]
[div class=tag]tag.[/div] info.
[br][/br]
[div class=tag]tag.[/div] info.
[br][/br]
[div class=tag]tag.[/div] info.
[br][/br]
[div class=tag]tag.[/div] info.
[br][/br]
[div class=tag]tag.[/div] info.
[br][/br]
[div class=tag]tag.[/div] info.
[/div]

[div=flex: .6; display: flex; flex-direction: column;]
[div=flex: 1; background: url(https://dimensionmill.org/wp-content/uploads/2019/03/square-placeholder.jpg); background-size: cover; margin-bottom: 10px;][/div]
[div=flex: 1; background: url(https://dimensionmill.org/wp-content/uploads/2019/03/square-placeholder.jpg); background-size: cover; margin-bottom: 10px;][/div]
[div=flex: 1; background: url(https://dimensionmill.org/wp-content/uploads/2019/03/square-placeholder.jpg); background-size: cover;][/div]
[/div]

[/div][/div]




[div class="tabcontents tabcontentsthree" style="display: none;"][div=height: 250px; margin: 20px; display: flex; background: #fff;]
[div=flex: 2; font-size: 11px; line-height: 24px; text-align: justify; overflow-y: auto;]
[div class=tag]tag.[/div] info.
[br][/br]
[div class=tag]tag.[/div] info.
[br][/br]
[div class=tag]tag.[/div] info.
[br][/br]
[div class=tag]tag.[/div] info.
[br][/br]
[div class=tag]tag.[/div] info.
[br][/br]
[div class=tag]tag.[/div] info.
[/div]

[div=flex: .6; display: flex; flex-direction: column;]
[div=flex: 1; background: url(https://dimensionmill.org/wp-content/uploads/2019/03/square-placeholder.jpg); background-size: cover; margin-bottom: 10px;][/div]
[div=flex: 1; background: url(https://dimensionmill.org/wp-content/uploads/2019/03/square-placeholder.jpg); background-size: cover; margin-bottom: 10px;][/div]
[div=flex: 1; background: url(https://dimensionmill.org/wp-content/uploads/2019/03/square-placeholder.jpg); background-size: cover;][/div]
[/div]

[/div][/div]




[div class="tabcontents tabcontentsfour" style="display: none;"][div=height: 250px; margin: 20px; display: flex; background: #fff;]
[div=flex: 2; font-size: 11px; line-height: 24px; text-align: justify; overflow-y: auto;]
[div class=tag]tag.[/div] info.
[br][/br]
[div class=tag]tag.[/div] info.
[br][/br]
[div class=tag]tag.[/div] info.
[br][/br]
[div class=tag]tag.[/div] info.
[br][/br]
[div class=tag]tag.[/div] info.
[br][/br]
[div class=tag]tag.[/div] info.
[/div]

[div=flex: .6; display: flex; flex-direction: column;]
[div=flex: 1; background: url(https://dimensionmill.org/wp-content/uploads/2019/03/square-placeholder.jpg); background-size: cover; margin-bottom: 10px;][/div]
[div=flex: 1; background: url(https://dimensionmill.org/wp-content/uploads/2019/03/square-placeholder.jpg); background-size: cover; margin-bottom: 10px;][/div]
[div=flex: 1; background: url(https://dimensionmill.org/wp-content/uploads/2019/03/square-placeholder.jpg); background-size: cover;][/div]
[/div]

[/div][/div][/div]



[/div]
[/div]
[div=font-size: 8px; margin-top: 5px; text-align: center;]coded by luna.[/div]
[/nobr]