• When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Help How do I remove the gap between rows?

bastion

bastion

just a little guy
Roleplay Availability
Roleplay Type(s)
Once again I've managed to confused myself by editing a freebie u.u This time I wanted to cheat in a table by adding columns since I don't know how to customize the colors on a table. Problem is there's a lot of empty space above the table, as well as between each row of the columns...

unknown.png


Here's the code in action as well as the code itself:

a flower blooms on the battlefield
Yamanaka Inoka
山中 猪香
1
2
3
4
  • 1
    basics
    clan
    Yamanaka
    birthday
    August 20th
    age
    12
    gender
    Trans male
    pronouns
    He/him/his
    affiliation
    Konohagakure
    occupation
    General shinobi, florist
    classification
    Sensor type
    Team
    Team 3 (Zaki)
    rank
    Genin
    registration
    012603
    appearance
    height
    5'1" (155cm)
    weight
    103lbs (47kg)
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed. Donec nec nibh bibendum, pharetra nunc sed, placerat purus. Nulla a ligula lobortis, condimentum lacus eu, efficitur justo. Donec vitae volutpat odio, sed tincidunt enim. Suspendisse at ante sit amet libero blandit dapibus non in turpis. Vestibulum pharetra feugiat lacus a pulvinar. Nullam eget hendrerit dolor, vitae sagittis lacus. Vestibulum lacinia ex et lectus porta iaculis. Suspendisse interdum a nunc vitae egestas. Aliquam dignissim hendrerit leo sit amet sagittis. Vivamus eget ipsum vitae tellus facilisis aliquet. Mauris elementum eu diam id vestibulum.


    Etiam eleifend metus nisi, ac laoreet nibh tincidunt id. In vel auctor magna, nec porta arcu. Morbi eget mattis justo. Fusce vitae auctor erat, at ullamcorper mauris. Ut pharetra vitae eros sed ornare. Quisque in malesuada elit. Nunc at malesuada turpis. Pellentesque at leo congue, faucibus lorem nec, mollis est.
    personality
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed. Donec nec nibh bibendum, pharetra nunc sed, placerat purus. Nulla a ligula lobortis, condimentum lacus eu, efficitur justo. Donec vitae volutpat odio, sed tincidunt enim. Suspendisse at ante sit amet libero blandit dapibus non in turpis. Vestibulum pharetra feugiat lacus a pulvinar. Nullam eget hendrerit dolor, vitae sagittis lacus. Vestibulum lacinia ex et lectus porta iaculis. Suspendisse interdum a nunc vitae egestas. Aliquam dignissim hendrerit leo sit amet sagittis. Vivamus eget ipsum vitae tellus facilisis aliquet. Mauris elementum eu diam id vestibulum.


    Etiam eleifend metus nisi, ac laoreet nibh tincidunt id. In vel auctor magna, nec porta arcu. Morbi eget mattis justo. Fusce vitae auctor erat, at ullamcorper mauris. Ut pharetra vitae eros sed ornare. Quisque in malesuada elit. Nunc at malesuada turpis. Pellentesque at leo congue, faucibus lorem nec, mollis est.
code by @Nano


Code: 
[comment]


Designed and coded by Nano.


Please do not remove the credits or claim the code as your own work.



[font=Changa One].[/font]


[font=Abel].[/font][/comment][comment]



// accents



[/comment][border=0; padding: 0;


     --bgcolor: #111111;


     --accent: #573385;


     --accent2: #BAACCD;


     --grey: #666666;


     --text: #fefefe;


     --mainimg: url('https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fsietske.bplaced.net%2Fwp-content%2Fuploads%2F2014%2F11%2Fe9179499d157660b3d931a7b99b3fb5b.jpg&f=1&nofb=1') bottom/cover no-repeat;


     --profileicon: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fimages3.alphacoders.com%2F976%2F976764.png&f=1&nofb=1') center/cover no-repeat;



     width: 100%;


     font-size: initial;


][border=0px; margin: 0 auto; padding: 20px; width: calc(100% - 40px); max-width: 700px; background: var(--bgcolor); font-size: initial; position: relative; overflow: hidden;][comment]



// [triangle] red border + bg image //



[/comment][border=0px; top: -1px; left: -1px; padding: 0; width: 400px; height: 400px; clip-path: polygon(0 0, 0% 100%, 100% 0); background: var(--accent); position: absolute; z-index: 1; pointer-events: none;][border=0px; padding: 0; width: 380px; height: 380px; clip-path: polygon(0 0, 0% 100%, 100% 0); background: var(--mainimg);][/border][/border][comment]



// start of content //



[/comment][border=0px; display: flex; flex-flow: row wrap; margin-left: -5px; padding: 0; width: calc(100% + 5px); position: relative;][comment]



// start of left side (quote) //



[/comment][border=0px; margin-left: 5px; padding: 0; flex: 1; width: 100%; min-width: 150px; min-height: 450px; position: relative; overflow: hidden; z-index: 2;][border=0px; bottom: 20px; padding: 0; width: 100%; position: absolute;][border=0px; margin: 0 auto 10px; padding: 0; width: 50px; height: 5px; background: var(--accent);][/border][comment]



// quote //



[/comment][border=0px; padding: 0; width: 100%; font-family: 'Changa One', cursive; font-size: 1.8em; line-height: 115%; color: var(--text); text-align: center;]a flower blooms on the battlefield[/border][border=0px; margin: 12px auto 0; padding: 0; width: 50px; height: 5px; background: var(--accent);][/border][/border][/border][comment]



// start of right side //



[/comment][border=0px; margin-left: 5px; padding: 0; flex: 2; width: 100%; min-width: 250px;][border=0px; border-right: 5px solid var(--accent); padding: 2px 5px 5px 0; width: calc(100% - 10px); position: relative; z-index: 2;][comment]



// name + title //



[/comment][border=0px; padding: 0; font-family: 'Changa One', cursive; font-size: 2.2em; line-height: 100%; color: var(--text); text-align: right; text-transform: capitalize;]Yamanaka Inoka[/border][border=0px; margin-top: -3px; padding: 0; font-family: 'Abel', sans-serif; font-size: 1.0em; line-height: 100%; color: var(--accent); font-weight: 700; text-align: right; text-transform: lowercase;]山中 猪香[/border][/border][comment]



// start of tabs + CS details //



[/comment][border=0px; margin-top: 10px; margin-left: -10px; padding: 0; width: calc(100% + 10px); height: 70vh; min-height: 450px; max-height: 500px; position: relative;][border=0px; display: flex; flex-flow: row wrap; left: 20px; margin-left: -10px; padding: 0; width: 240px; height: 24px; position: absolute; z-index: 2; pointer-events: none;][border=0px; margin-left: 10px; padding: 0; flex: 1; width: 50px; height: 24px; font-family: 'Changa One', cursive; font-size: 18px; line-height: 23px; color: var(--grey); text-align: center;]1[/border][border=0px; margin-left: 10px; padding: 0; flex: 1; width: 50px; height: 24px; font-family: 'Changa One', cursive; font-size: 18px; line-height: 23px; color: var(--grey); text-align: center;]2[/border][border=0px; margin-left: 10px; padding: 0; flex: 1; width: 50px; height: 24px; font-family: 'Changa One', cursive; font-size: 18px; line-height: 23px; color: var(--grey); text-align: center;]3[/border][border=0px; margin-left: 10px; padding: 0; flex: 1; width: 50px; height: 24px; font-family: 'Changa One', cursive; font-size: 18px; line-height: 23px; color: var(--grey); text-align: center;]4[/border][/border][border=0px; padding: 0; width: 100%; height: 70vh; min-height: 450px; max-height: 500px; background: var(--bgcolor); position: absolute; pointer-events: none; ][/border][tabs]




[comment]tab one[/comment]


[tab=.][border=0px; left: 20px; top: 0; padding: 0; width: 50px; height: 24px; font-family: 'Changa One', cursive; font-size: 18px; line-height: 23px; color: var(--text); text-align: center; position: absolute; z-index: 3; cursor: default;]1[/border][border=0px; left: 15px; top: 20px; padding: 0; width: calc(100% + 2px); height: calc(70vh - 20px); min-height: 420px; max-height: 470px; overflow: hidden; position: absolute; z-index: 2;][border=0px; padding: 0; padding-right: 18px; width: 100%; height: calc(70vh - 20px); min-height: 420px; max-height: 470px; overflow-y: scroll;][comment]



// content box 1 - basic information //



[/comment][border=1px solid var(--grey); border-radius: 4px; margin-top: 9px; padding: 15px; width: calc(100% - 32px); background: var(--bgcolor); position: relative;][border=1px solid var(--grey); border-radius: 4px; display: inline-block; right: 20px; top: -10px; padding: 3px 10px 2px; background: var(--bgcolor); font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute;]basics[/border][border=0px; display: flex; flex-flow: row-reverse wrap; margin-left: -15px; padding: 0; width: calc(100% + 15px);][border=0px; margin-left: 15px; padding: 0; flex: 1; width: 100%; min-width: 100px;][comment]



// profile image //



[/comment][border=0px; border-radius: 3px; margin-bottom: 15px; padding: 0; width: 100%; padding-top: 100%; background: var(--profileicon);][/border][/border][comment]



// personal info //



[/comment][border=0px; margin-left: 15px; margin-bottom: 15px; padding: 0; flex: 2; width: 100%; min-width: 150px;][comment]



// clan //



[/comment][border=0px; display: flex; flex-flow: row wrap; padding: 0; width: 100%;][border=0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;]clan[/border][border=0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;]Yamanaka[/border][/border][comment]



// birthday //



[/comment][border=0px; display: flex; flex-flow: row wrap; padding: 0; width: 100%;][border=0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;]birthday[/border][border=0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;]August 20th[/border][/border][comment]



// age //



[/comment][border=0px; display: flex; flex-flow: row wrap; padding: 0; width: 100%;][border=0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;]age[/border][border=0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;]12[/border][/border][comment]



// gender and pronouns //



[/comment][border=0px; display: flex; flex-flow: row wrap; padding: 0; width: 100%;][border=0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;]gender[/border][border=0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;]Trans male[/border][/border][comment]



// pronouns //



[/comment][border=0px; display: flex; flex-flow: row wrap; padding: 0; width: 100%;][border=0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;]pronouns[/border][border=0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;]He/him/his[/border][/border][comment]



// end of basic //



[/comment][/border][/border][comment]



// ninja info //



[/comment][comment]



// affiliated with //



[/comment][border=0px; display: flex; flex-flow: row wrap; padding: 0; width: 100%;][border=0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;]affiliation[/border][border=0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;]Konohagakure[/border][/border][comment]



// civillian and shinobi occupations //



[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border=0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;]occupation[/border][border=0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;]General shinobi, florist[/border][/border][comment]



// ninja speciality classification //



[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border=0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;]classification[/border][border=0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;]Sensor type[/border][/border][comment]



// teams assigned to //



[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border=0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;]Team[/border][border=0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text);]Team 3 (Zaki)[/border][/border][comment]



// ninja rank //



[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border=0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;]rank[/border][border=0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text);]Genin[/border][/border][comment]



// ninja registration number //



[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border=0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;]registration[/border][border=0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;]012603[/border][/border][/border][comment]



// content box 2 - appearance //



[/comment][border=1px solid var(--grey); border-radius: 4px; margin-top: 29px; padding: 15px; width: calc(100% - 32px); background: var(--bgcolor); position: relative;][border=1px solid var(--grey); border-radius: 4px; display: inline-block; right: 20px; top: -10px; padding: 3px 10px 2px; background: var(--bgcolor); font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute;]appearance[/border][comment]



// appearance basics //



[/comment][comment]



// height //



[/comment][border=0px; display: flex; flex-flow: row wrap; padding: 0; width: 100%;][border=0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;]height[/border][border=0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;]5'1" (155cm)[/border][/border][comment]



// weight //



[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border=0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;]weight[/border][border=0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text);]103lbs (47kg)[/border][/border][comment]



// appearance description //



[/comment][border=0px; margin-top: 15px; padding: 0; font-family: 'Abel', sans-serif; font-size: 1.0em; line-height: 125%; color: var(--text); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed. Donec nec nibh bibendum, pharetra nunc sed, placerat purus. Nulla a ligula lobortis, condimentum lacus eu, efficitur justo. Donec vitae volutpat odio, sed tincidunt enim. Suspendisse at ante sit amet libero blandit dapibus non in turpis. Vestibulum pharetra feugiat lacus a pulvinar. Nullam eget hendrerit dolor, vitae sagittis lacus. Vestibulum lacinia ex et lectus porta iaculis. Suspendisse interdum a nunc vitae egestas. Aliquam dignissim hendrerit leo sit amet sagittis. Vivamus eget ipsum vitae tellus facilisis aliquet. Mauris elementum eu diam id vestibulum.



Etiam eleifend metus nisi, ac laoreet nibh tincidunt id. In vel auctor magna, nec porta arcu. Morbi eget mattis justo. Fusce vitae auctor erat, at ullamcorper mauris. Ut pharetra vitae eros sed ornare. Quisque in malesuada elit. Nunc at malesuada turpis. Pellentesque at leo congue, faucibus lorem nec, mollis est.[/border][/border][comment]



// content box 3 - personality //



[/comment][border=1px solid var(--grey); border-radius: 4px; margin-top: 29px; padding: 15px; width: calc(100% - 32px); background: var(--bgcolor); position: relative;][border=1px solid var(--grey); border-radius: 4px; display: inline-block; right: 20px; top: -10px; padding: 3px 10px 2px; background: var(--bgcolor); font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute;]personality[/border][comment]



// personality description //



[/comment][border=0px; padding: 0; font-family: 'Abel', sans-serif; font-size: 1.0em; line-height: 125%; color: var(--text); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed. Donec nec nibh bibendum, pharetra nunc sed, placerat purus. Nulla a ligula lobortis, condimentum lacus eu, efficitur justo. Donec vitae volutpat odio, sed tincidunt enim. Suspendisse at ante sit amet libero blandit dapibus non in turpis. Vestibulum pharetra feugiat lacus a pulvinar. Nullam eget hendrerit dolor, vitae sagittis lacus. Vestibulum lacinia ex et lectus porta iaculis. Suspendisse interdum a nunc vitae egestas. Aliquam dignissim hendrerit leo sit amet sagittis. Vivamus eget ipsum vitae tellus facilisis aliquet. Mauris elementum eu diam id vestibulum.



Etiam eleifend metus nisi, ac laoreet nibh tincidunt id. In vel auctor magna, nec porta arcu. Morbi eget mattis justo. Fusce vitae auctor erat, at ullamcorper mauris. Ut pharetra vitae eros sed ornare. Quisque in malesuada elit. Nunc at malesuada turpis. Pellentesque at leo congue, faucibus lorem nec, mollis est.[/border][/border][comment]//extra content boxes here//[/comment][/border][/border][/tab]




[comment]tab two[/comment]


[tab=.][border=0px; left: 80px; top: 0; padding: 0; width: 50px; height: 24px; font-family: 'Changa One', cursive; font-size: 18px; line-height: 23px; color: var(--text); text-align: center; position: absolute; z-index: 3; cursor: default;]2[/border][border=0px; left: 15px; top: 20px; padding: 0; width: calc(100% + 2px); height: calc(70vh - 20px); min-height: 420px; max-height: 470px; overflow: hidden; position: absolute; z-index: 2;][border=0px; padding: 0; padding-right: 18px; width: 100%; height: calc(70vh - 20px); min-height: 420px; max-height: 470px; overflow-y: scroll;][comment]



// content box 2 - background //



[/comment][border=1px solid var(--grey); border-radius: 4px; margin-top: 29px; padding: 15px; width: calc(100% - 32px); background: var(--bgcolor); position: relative;][border=1px solid var(--grey); border-radius: 4px; display: inline-block; right: 20px; top: -10px; padding: 3px 10px 2px; background: var(--bgcolor); font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute;]background[/border][comment]




// historic ages //



[/comment][comment]



// academy graduation //



[/comment][border=0px; display: flex; flex-flow: row wrap; padding: 0; width: 100%;][border=0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;]graduation[/border][border=0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;]Age 12[/border][/border][comment]



// chunin promotion //



[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border=0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;]promotion[/border][border=0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text);]N/A[/border][/border][comment]



// past events //



[/comment][border=0px; margin-top: 15px; padding: 0; font-family: 'Abel', sans-serif; font-size: 1.0em; line-height: 125%; color: var(--text); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed. Donec nec nibh bibendum, pharetra nunc sed, placerat purus. Nulla a ligula lobortis, condimentum lacus eu, efficitur justo. Donec vitae volutpat odio, sed tincidunt enim. Suspendisse at ante sit amet libero blandit dapibus non in turpis. Vestibulum pharetra feugiat lacus a pulvinar. Nullam eget hendrerit dolor, vitae sagittis lacus. Vestibulum lacinia ex et lectus porta iaculis. Suspendisse interdum a nunc vitae egestas. Aliquam dignissim hendrerit leo sit amet sagittis. Vivamus eget ipsum vitae tellus facilisis aliquet. Mauris elementum eu diam id vestibulum.



Etiam eleifend metus nisi, ac laoreet nibh tincidunt id. In vel auctor magna, nec porta arcu. Morbi eget mattis justo. Fusce vitae auctor erat, at ullamcorper mauris. Ut pharetra vitae eros sed ornare. Quisque in malesuada elit. Nunc at malesuada turpis. Pellentesque at leo congue, faucibus lorem nec, mollis est.[/border][/border][comment]



// content box 3 - relationships //



[/comment][border=1px solid var(--grey); border-radius: 4px; margin-top: 29px; padding: 15px; width: calc(100% - 32px); background: var(--bgcolor); position: relative;][border=1px solid var(--grey); border-radius: 4px; display: inline-block; right: 20px; top: -10px; padding: 3px 10px 2px; background: var(--bgcolor); font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute;]relationships[/border][comment]



// important relationships //



[/comment][border=0px; padding: 0; font-family: 'Abel', sans-serif; font-size: 1.0em; line-height: 125%; color: var(--text); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed. Donec nec nibh bibendum, pharetra nunc sed, placerat purus. Nulla a ligula lobortis, condimentum lacus eu, efficitur justo. Donec vitae volutpat odio, sed tincidunt enim. Suspendisse at ante sit amet libero blandit dapibus non in turpis. Vestibulum pharetra feugiat lacus a pulvinar. Nullam eget hendrerit dolor, vitae sagittis lacus. Vestibulum lacinia ex et lectus porta iaculis. Suspendisse interdum a nunc vitae egestas. Aliquam dignissim hendrerit leo sit amet sagittis. Vivamus eget ipsum vitae tellus facilisis aliquet. Mauris elementum eu diam id vestibulum.



Etiam eleifend metus nisi, ac laoreet nibh tincidunt id. In vel auctor magna, nec porta arcu. Morbi eget mattis justo. Fusce vitae auctor erat, at ullamcorper mauris. Ut pharetra vitae eros sed ornare. Quisque in malesuada elit. Nunc at malesuada turpis. Pellentesque at leo congue, faucibus lorem nec, mollis est.[/border][/border][comment]//extra content boxes here//[/comment][/border][/border][/tab]




[comment]tab three[/comment]


[tab=.][border=0px; left: 140px; top: 0; padding: 0; width: 50px; height: 24px; font-family: 'Changa One', cursive; font-size: 18px; line-height: 23px; color: var(--text); text-align: center; position: absolute; z-index: 3; cursor: default;]3[/border][border=0px; left: 15px; top: 20px; padding: 0; width: calc(100% + 2px); height: calc(70vh - 20px); min-height: 420px; max-height: 470px; overflow: hidden; position: absolute; z-index: 2;][border=0px; padding: 0; padding-right: 18px; width: 100%; height: calc(70vh - 20px); min-height: 420px; max-height: 470px; overflow-y: scroll;][comment]



// content box 4b - combat details //



[/comment][border=1px solid var(--grey); border-radius: 4px; margin-top: 29px; padding: 15px; width: calc(100% - 32px); background: var(--bgcolor); position: relative;][border=1px solid var(--grey); border-radius: 4px; display: inline-block; right: 20px; top: -10px; padding: 3px 10px 2px; background: var(--bgcolor); font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute;]combat notes[/border][comment]



// stats //



[/comment]


[Row]


[Column=span2]


[border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border=0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;]nin[/border][/border]


[border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border=0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--grey); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;]#[/border][/border]


[border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border=0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;]str[/border][/border]


[border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border=0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--grey); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;]#[/border][/border]


[/Column][Column=span2]


[border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border=0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;]tai[/border][/border]


[border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border=0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--grey); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;]#[/border][/border]


[border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border=0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;]spd[/border][/border]


[border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border=0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--grey); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;]#[/border][/border]


[/Column][Column=span2]


[border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border=0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;]gen[/border][/border]


[border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border=0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--grey); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;]#[/border][/border]


[border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border=0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;]stm[/border][/border]


[border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border=0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--grey); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;]#[/border][/border]


[/Column][Column=span2]


[border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border=0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;]int[/border][/border]


[border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border=0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--grey); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;]#[/border][/border]


[border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border=0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;]sea[/border][/border]


[border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border=0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--grey); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;]#[/border][/border]


[/Column]


[/Row][comment]



// combat details //



[/comment][border=0px; margin-top: 15px; padding: 0; font-family: 'Abel', sans-serif; font-size: 1.0em; line-height: 125%; color: var(--text); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed. Donec nec nibh bibendum, pharetra nunc sed, placerat purus. Nulla a ligula lobortis, condimentum lacus eu, efficitur justo. Donec vitae volutpat odio, sed tincidunt enim. Suspendisse at ante sit amet libero blandit dapibus non in turpis. Vestibulum pharetra feugiat lacus a pulvinar. Nullam eget hendrerit dolor, vitae sagittis lacus. Vestibulum lacinia ex et lectus porta iaculis. Suspendisse interdum a nunc vitae egestas. Aliquam dignissim hendrerit leo sit amet sagittis. Vivamus eget ipsum vitae tellus facilisis aliquet. Mauris elementum eu diam id vestibulum.



Etiam eleifend metus nisi, ac laoreet nibh tincidunt id. In vel auctor magna, nec porta arcu. Morbi eget mattis justo. Fusce vitae auctor erat, at ullamcorper mauris. Ut pharetra vitae eros sed ornare. Quisque in malesuada elit. Nunc at malesuada turpis. Pellentesque at leo congue, faucibus lorem nec, mollis est.[/border][/border][comment]



// content box 5 - abilities //



[/comment][border=1px solid var(--grey); border-radius: 4px; margin-top: 9px; padding: 15px; width: calc(100% - 32px); background: var(--bgcolor); position: relative;][border=1px solid var(--grey); border-radius: 4px; display: inline-block; right: 20px; top: -10px; padding: 3px 10px 2px; background: var(--bgcolor); font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute;]jutsus[/border][comment]



// power descriptions //



[/comment][border=0px; padding: 0; font-family: 'Abel', sans-serif; font-size: 1.0em; line-height: 125%; color: var(--text); text-align: justify;][comment]



// ability 1 //



[/comment][border=0px; display: flex; flex-flow: row wrap; margin-left: -15px; padding: 0; width: calc(100% + 15px);][border=0px; margin-left: 15px; padding: 0; flex: 1; width: 100%; min-width: 75px; color: var(--accent); font-weight: 700; text-align: left; text-transform: uppercase;]Ability One[/border][border=0px; margin-left: 15px; padding: 0; flex: 5; width: 100%; min-width: 150px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed. Donec nec nibh bibendum, pharetra nunc sed, placerat purus. Nulla a ligula lobortis, condimentum lacus eu, efficitur justo. Donec vitae volutpat odio, sed tincidunt enim. Suspendisse at ante sit amet libero blandit dapibus non in turpis. Vestibulum pharetra feugiat lacus a pulvinar. Nullam eget hendrerit dolor, vitae sagittis lacus. Vestibulum lacinia ex et lectus porta iaculis. Suspendisse interdum a nunc vitae egestas. Aliquam dignissim hendrerit leo sit amet sagittis. Vivamus eget ipsum vitae tellus facilisis aliquet. Mauris elementum eu diam id vestibulum.



Etiam eleifend metus nisi, ac laoreet nibh tincidunt id. In vel auctor magna, nec porta arcu. Morbi eget mattis justo. Fusce vitae auctor erat, at ullamcorper mauris. Ut pharetra vitae eros sed ornare. Quisque in malesuada elit. Nunc at malesuada turpis. Pellentesque at leo congue, faucibus lorem nec, mollis est.[/border][/border][comment]



// ability 2 //



[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 25px; margin-left: -15px; padding: 0; width: calc(100% + 15px);][border=0px; margin-left: 15px; padding: 0; flex: 1; width: 100%; min-width: 75px; color: var(--accent); font-weight: 700; text-align: left; text-transform: uppercase;]Ability Two[/border][border=0px; margin-left: 15px; padding: 0; flex: 5; width: 100%; min-width: 150px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed. Donec nec nibh bibendum, pharetra nunc sed, placerat purus. Nulla a ligula lobortis, condimentum lacus eu, efficitur justo. Donec vitae volutpat odio, sed tincidunt enim. Suspendisse at ante sit amet libero blandit dapibus non in turpis. Vestibulum pharetra feugiat lacus a pulvinar. Nullam eget hendrerit dolor, vitae sagittis lacus. Vestibulum lacinia ex et lectus porta iaculis. Suspendisse interdum a nunc vitae egestas. Aliquam dignissim hendrerit leo sit amet sagittis. Vivamus eget ipsum vitae tellus facilisis aliquet. Mauris elementum eu diam id vestibulum.



Etiam eleifend metus nisi, ac laoreet nibh tincidunt id. In vel auctor magna, nec porta arcu. Morbi eget mattis justo. Fusce vitae auctor erat, at ullamcorper mauris. Ut pharetra vitae eros sed ornare. Quisque in malesuada elit. Nunc at malesuada turpis. Pellentesque at leo congue, faucibus lorem nec, mollis est.[/border][/border][comment]//extra abilities here//[/comment][/border][/border][comment]



// content box 6 - equipment //



[/comment][border=1px solid var(--grey); border-radius: 4px; margin-top: 29px; padding: 15px; width: calc(100% - 32px); background: var(--bgcolor); position: relative;][border=1px solid var(--grey); border-radius: 4px; display: inline-block; right: 20px; top: -10px; padding: 3px 10px 2px; background: var(--bgcolor); font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute;]equipment[/border][comment]



// equipment descriptions //



[/comment][border=0px; padding: 0; font-family: 'Abel', sans-serif; font-size: 1.0em; line-height: 125%; color: var(--text); text-align: justify;][comment]



// equip 1 //



[/comment][border=0px; display: flex; flex-flow: row wrap; margin-left: -15px; padding: 0; width: calc(100% + 15px);][border=0px; margin-left: 15px; padding: 0; flex: 1; width: 100%; min-width: 75px; color: var(--accent); font-weight: 700; text-align: left; text-transform: uppercase;]Equip 1[/border][border=0px; margin-left: 15px; padding: 0; flex: 5; width: 100%; min-width: 150px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed. Donec nec nibh bibendum, pharetra nunc sed, placerat purus. Nulla a ligula lobortis, condimentum lacus eu, efficitur justo. Donec vitae volutpat odio, sed tincidunt enim. Suspendisse at ante sit amet libero blandit dapibus non in turpis. Vestibulum pharetra feugiat lacus a pulvinar. Nullam eget hendrerit dolor, vitae sagittis lacus. Vestibulum lacinia ex et lectus porta iaculis. Suspendisse interdum a nunc vitae egestas. Aliquam dignissim hendrerit leo sit amet sagittis. Vivamus eget ipsum vitae tellus facilisis aliquet. Mauris elementum eu diam id vestibulum.



Etiam eleifend metus nisi, ac laoreet nibh tincidunt id. In vel auctor magna, nec porta arcu. Morbi eget mattis justo. Fusce vitae auctor erat, at ullamcorper mauris. Ut pharetra vitae eros sed ornare. Quisque in malesuada elit. Nunc at malesuada turpis. Pellentesque at leo congue, faucibus lorem nec, mollis est.[/border][/border][comment]//extra weapons/equips here//[/comment][/border][/border][comment]//extra content boxes here//[/comment][/border][/border][/tab]




[comment]tab four[/comment]


[tab=.][border=0px; left: 200px; top: 0; padding: 0; width: 50px; height: 24px; font-family: 'Changa One', cursive; font-size: 18px; line-height: 23px; color: var(--text); text-align: center; position: absolute; z-index: 3; cursor: default;]4[/border][border=0px; left: 15px; top: 20px; padding: 0; width: calc(100% + 2px); height: calc(70vh - 20px); min-height: 420px; max-height: 470px; overflow: hidden; position: absolute; z-index: 2;][border=0px; padding: 0; padding-right: 18px; width: 100%; height: calc(70vh - 20px); min-height: 420px; max-height: 470px; overflow-y: scroll;][comment]



// content box 7 - extras/notes //



[/comment][border=1px solid var(--grey); border-radius: 4px; margin-top: 9px; padding: 15px; width: calc(100% - 32px); background: var(--bgcolor); position: relative;][border=1px solid var(--grey); border-radius: 4px; display: inline-block; right: 20px; top: -10px; padding: 3px 10px 2px; background: var(--bgcolor); font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute;]extra[/border][comment]



// extras //



[/comment][border=0px; padding: 0; font-family: 'Abel', sans-serif; font-size: 1.0em; line-height: 125%; color: var(--text); text-align: justify;][comment]



// likes //



[/comment][border=0px; display: flex; flex-flow: row wrap; margin-left: -5px; padding: 0; width: calc(100% + 5px);][border=0px; margin-left: 5px; padding: 0; flex: 1; width: 100%; min-width: 60px; color: var(--accent); font-weight: 700; text-align: left; text-transform: uppercase;]Likes[/border][border=0px; margin-left: 5px; padding: 0; flex: 9; width: 100%; min-width: 150px;]Item one, Item two, Item three, Item four, Etc[/border][/border][comment]



// dislikes //



[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 20px; margin-left: -5px; padding: 0; width: calc(100% + 5px);][border=0px; margin-left: 5px; padding: 0; flex: 1; width: 100%; min-width: 60px; color: var(--accent); font-weight: 700; text-align: left; text-transform: uppercase;]Dislikes[/border][border=0px; margin-left: 5px; padding: 0; flex: 9; width: 100%; min-width: 150px;]Item one, Item two, Item three, Item four, Etc[/border][/border][comment]



// note 1 //



[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 20px; margin-left: -5px; padding: 0; width: calc(100% + 5px);][border=0px; margin-left: 5px; padding: 0; flex: 1; width: 100%; min-width: 40px; color: var(--accent); font-weight: 700; text-align: left; text-transform: uppercase;]001.[/border][border=0px; margin-left: 5px; padding: 0; flex: 10; width: 100%; min-width: 150px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed.[/border][/border][comment]



// note 2 //



[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 20px; margin-left: -5px; padding: 0; width: calc(100% + 5px);][border=0px; margin-left: 5px; padding: 0; flex: 1; width: 100%; min-width: 40px; color: var(--accent); font-weight: 700; text-align: left; text-transform: uppercase;]002.[/border][border=0px; margin-left: 5px; padding: 0; flex: 10; width: 100%; min-width: 150px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed.[/border][/border][comment]



// note 3 //



[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 20px; margin-left: -5px; padding: 0; width: calc(100% + 5px);][border=0px; margin-left: 5px; padding: 0; flex: 1; width: 100%; min-width: 40px; color: var(--accent); font-weight: 700; text-align: left; text-transform: uppercase;]003.[/border][border=0px; margin-left: 5px; padding: 0; flex: 10; width: 100%; min-width: 150px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed.[/border][/border][comment] // extra notes here //[/comment][/border][/border][comment]//extra content boxes here//[/comment][/border][/border][/tab]



[/tabs][/border][/border][/border][border=0px; right: -1px; bottom: -1px; padding: 0; width: 150px; height: 150px; clip-path: polygon(100% 0, 0% 100%, 100% 100%); background: var(--accent); position: absolute; z-index: 1; pointer-events: none;][/border][/border][comment]//end of code//[/comment][border=0px; margin: 5px auto 0; padding: 0; width: 100%; max-width: 700px; font-size: .6em; text-align: center; text-transform: uppercase; opacity: .7;]code by [USER=20950]@Nano[/USER][/border][/border]
 
So I believe I fixed what you were asking. I first found the original freebee code to see just how much you changed, but it turned out not necessary. Honestly you had too many returns (hitting enter) between the lines. When you mess with BBcode with the toggle off, those returns translate as 'space'. I'm no wiz at BBcode but the reason on the first tab there is so much 'Space/organization' between the tables is because they are adding Comments. When comments are added it is like pocket dimension. It can take up all the space it wants but it won't exist in the offical piece. If you took out all the Comments in this sheet it to would look a bit more like a wall of text.

a flower blooms on the battlefield
Yamanaka Inoka
山中 猪香
1
2
3
4
  • 1
    basics
    clan
    Yamanaka
    birthday
    August 20th
    age
    12
    gender
    Trans male
    pronouns
    He/him/his
    affiliation
    Konohagakure
    occupation
    General shinobi, florist
    classification
    Sensor type
    Team
    Team 3 (Zaki)
    rank
    Genin
    registration
    012603
    appearance
    height
    5'1" (155cm)
    weight
    103lbs (47kg)
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed. Donec nec nibh bibendum, pharetra nunc sed, placerat purus. Nulla a ligula lobortis, condimentum lacus eu, efficitur justo. Donec vitae volutpat odio, sed tincidunt enim. Suspendisse at ante sit amet libero blandit dapibus non in turpis. Vestibulum pharetra feugiat lacus a pulvinar. Nullam eget hendrerit dolor, vitae sagittis lacus. Vestibulum lacinia ex et lectus porta iaculis. Suspendisse interdum a nunc vitae egestas. Aliquam dignissim hendrerit leo sit amet sagittis. Vivamus eget ipsum vitae tellus facilisis aliquet. Mauris elementum eu diam id vestibulum.


    Etiam eleifend metus nisi, ac laoreet nibh tincidunt id. In vel auctor magna, nec porta arcu. Morbi eget mattis justo. Fusce vitae auctor erat, at ullamcorper mauris. Ut pharetra vitae eros sed ornare. Quisque in malesuada elit. Nunc at malesuada turpis. Pellentesque at leo congue, faucibus lorem nec, mollis est.
    personality
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed. Donec nec nibh bibendum, pharetra nunc sed, placerat purus. Nulla a ligula lobortis, condimentum lacus eu, efficitur justo. Donec vitae volutpat odio, sed tincidunt enim. Suspendisse at ante sit amet libero blandit dapibus non in turpis. Vestibulum pharetra feugiat lacus a pulvinar. Nullam eget hendrerit dolor, vitae sagittis lacus. Vestibulum lacinia ex et lectus porta iaculis. Suspendisse interdum a nunc vitae egestas. Aliquam dignissim hendrerit leo sit amet sagittis. Vivamus eget ipsum vitae tellus facilisis aliquet. Mauris elementum eu diam id vestibulum.


    Etiam eleifend metus nisi, ac laoreet nibh tincidunt id. In vel auctor magna, nec porta arcu. Morbi eget mattis justo. Fusce vitae auctor erat, at ullamcorper mauris. Ut pharetra vitae eros sed ornare. Quisque in malesuada elit. Nunc at malesuada turpis. Pellentesque at leo congue, faucibus lorem nec, mollis est.
code by @Nano


Code: 
[comment]



Designed and coded by Nano.



Please do not remove the credits or claim the code as your own work.





[font=Changa One].[/font]



[font=Abel].[/font][/comment][comment]





// accents





[/comment][border="0; padding: 0;



     --bgcolor: #111111;



     --accent: #573385;



     --accent2: #BAACCD;



     --grey: #666666;



     --text: #fefefe;



     --mainimg: url('https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fsietske.bplaced.net%2Fwp-content%2Fuploads%2F2014%2F11%2Fe9179499d157660b3d931a7b99b3fb5b.jpg&f=1&nofb=1') bottom/cover no-repeat;



     --profileicon: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fimages3.alphacoders.com%2F976%2F976764.png&f=1&nofb=1') center/cover no-repeat;





     width: 100%;



     font-size: initial;



"][border=0px; margin: 0 auto; padding: 20px; width: calc(100% - 40px); max-width: 700px; background: var(--bgcolor); font-size: initial; position: relative; overflow: hidden;][comment]





// [triangle] red border + bg image //





[/comment][border=0px; top: -1px; left: -1px; padding: 0; width: 400px; height: 400px; clip-path: polygon(0 0, 0% 100%, 100% 0); background: var(--accent); position: absolute; z-index: 1; pointer-events: none;][border=0px; padding: 0; width: 380px; height: 380px; clip-path: polygon(0 0, 0% 100%, 100% 0); background: var(--mainimg);][/border][/border][comment]





// start of content //





[/comment][border=0px; display: flex; flex-flow: row wrap; margin-left: -5px; padding: 0; width: calc(100% + 5px); position: relative;][comment]





// start of left side (quote) //





[/comment][border=0px; margin-left: 5px; padding: 0; flex: 1; width: 100%; min-width: 150px; min-height: 450px; position: relative; overflow: hidden; z-index: 2;][border=0px; bottom: 20px; padding: 0; width: 100%; position: absolute;][border=0px; margin: 0 auto 10px; padding: 0; width: 50px; height: 5px; background: var(--accent);][/border][comment]





// quote //





[/comment][border="0px; padding: 0; width: 100%; font-family: 'Changa One', cursive; font-size: 1.8em; line-height: 115%; color: var(--text); text-align: center;"]a flower blooms on the battlefield[/border][border=0px; margin: 12px auto 0; padding: 0; width: 50px; height: 5px; background: var(--accent);][/border][/border][/border][comment]





// start of right side //





[/comment][border=0px; margin-left: 5px; padding: 0; flex: 2; width: 100%; min-width: 250px;][border=0px; border-right: 5px solid var(--accent); padding: 2px 5px 5px 0; width: calc(100% - 10px); position: relative; z-index: 2;][comment]





// name + title //





[/comment][border="0px; padding: 0; font-family: 'Changa One', cursive; font-size: 2.2em; line-height: 100%; color: var(--text); text-align: right; text-transform: capitalize;"]Yamanaka Inoka[/border][border="0px; margin-top: -3px; padding: 0; font-family: 'Abel', sans-serif; font-size: 1.0em; line-height: 100%; color: var(--accent); font-weight: 700; text-align: right; text-transform: lowercase;"]山中 猪香[/border][/border][comment]





// start of tabs + CS details //





[/comment][border=0px; margin-top: 10px; margin-left: -10px; padding: 0; width: calc(100% + 10px); height: 70vh; min-height: 450px; max-height: 500px; position: relative;][border=0px; display: flex; flex-flow: row wrap; left: 20px; margin-left: -10px; padding: 0; width: 240px; height: 24px; position: absolute; z-index: 2; pointer-events: none;][border="0px; margin-left: 10px; padding: 0; flex: 1; width: 50px; height: 24px; font-family: 'Changa One', cursive; font-size: 18px; line-height: 23px; color: var(--grey); text-align: center;"]1[/border][border="0px; margin-left: 10px; padding: 0; flex: 1; width: 50px; height: 24px; font-family: 'Changa One', cursive; font-size: 18px; line-height: 23px; color: var(--grey); text-align: center;"]2[/border][border="0px; margin-left: 10px; padding: 0; flex: 1; width: 50px; height: 24px; font-family: 'Changa One', cursive; font-size: 18px; line-height: 23px; color: var(--grey); text-align: center;"]3[/border][border="0px; margin-left: 10px; padding: 0; flex: 1; width: 50px; height: 24px; font-family: 'Changa One', cursive; font-size: 18px; line-height: 23px; color: var(--grey); text-align: center;"]4[/border][/border][border=0px; padding: 0; width: 100%; height: 70vh; min-height: 450px; max-height: 500px; background: var(--bgcolor); position: absolute; pointer-events: none; ][/border][tabs]







[comment]tab one[/comment]



[tab=.][border="0px; left: 20px; top: 0; padding: 0; width: 50px; height: 24px; font-family: 'Changa One', cursive; font-size: 18px; line-height: 23px; color: var(--text); text-align: center; position: absolute; z-index: 3; cursor: default;"]1[/border][border=0px; left: 15px; top: 20px; padding: 0; width: calc(100% + 2px); height: calc(70vh - 20px); min-height: 420px; max-height: 470px; overflow: hidden; position: absolute; z-index: 2;][border=0px; padding: 0; padding-right: 18px; width: 100%; height: calc(70vh - 20px); min-height: 420px; max-height: 470px; overflow-y: scroll;][comment]





// content box 1 - basic information //





[/comment][border=1px solid var(--grey); border-radius: 4px; margin-top: 9px; padding: 15px; width: calc(100% - 32px); background: var(--bgcolor); position: relative;][border="1px solid var(--grey); border-radius: 4px; display: inline-block; right: 20px; top: -10px; padding: 3px 10px 2px; background: var(--bgcolor); font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute;"]basics[/border][border=0px; display: flex; flex-flow: row-reverse wrap; margin-left: -15px; padding: 0; width: calc(100% + 15px);][border=0px; margin-left: 15px; padding: 0; flex: 1; width: 100%; min-width: 100px;][comment]





// profile image //





[/comment][border=0px; border-radius: 3px; margin-bottom: 15px; padding: 0; width: 100%; padding-top: 100%; background: var(--profileicon);][/border][/border][comment]





// personal info //





[/comment][border=0px; margin-left: 15px; margin-bottom: 15px; padding: 0; flex: 2; width: 100%; min-width: 150px;][comment]





// clan //





[/comment][border=0px; display: flex; flex-flow: row wrap; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;"]clan[/border][border="0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;"]Yamanaka[/border][/border][comment]





// birthday //





[/comment][border=0px; display: flex; flex-flow: row wrap; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;"]birthday[/border][border="0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;"]August 20th[/border][/border][comment]





// age //





[/comment][border=0px; display: flex; flex-flow: row wrap; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;"]age[/border][border="0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;"]12[/border][/border][comment]





// gender and pronouns //





[/comment][border=0px; display: flex; flex-flow: row wrap; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;"]gender[/border][border="0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;"]Trans male[/border][/border][comment]





// pronouns //





[/comment][border=0px; display: flex; flex-flow: row wrap; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;"]pronouns[/border][border="0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;"]He/him/his[/border][/border][comment]





// end of basic //





[/comment][/border][/border][comment]





// ninja info //





[/comment][comment]





// affiliated with //





[/comment][border=0px; display: flex; flex-flow: row wrap; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;"]affiliation[/border][border="0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;"]Konohagakure[/border][/border][comment]





// civillian and shinobi occupations //





[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;"]occupation[/border][border="0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;"]General shinobi, florist[/border][/border][comment]





// ninja speciality classification //





[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;"]classification[/border][border="0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;"]Sensor type[/border][/border][comment]





// teams assigned to //





[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;"]Team[/border][border="0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text);"]Team 3 (Zaki)[/border][/border][comment]





// ninja rank //





[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;"]rank[/border][border="0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text);"]Genin[/border][/border][comment]





// ninja registration number //





[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;"]registration[/border][border="0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;"]012603[/border][/border][/border][comment]





// content box 2 - appearance //





[/comment][border=1px solid var(--grey); border-radius: 4px; margin-top: 29px; padding: 15px; width: calc(100% - 32px); background: var(--bgcolor); position: relative;][border="1px solid var(--grey); border-radius: 4px; display: inline-block; right: 20px; top: -10px; padding: 3px 10px 2px; background: var(--bgcolor); font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute;"]appearance[/border][comment]





// appearance basics //





[/comment][comment]





// height //





[/comment][border=0px; display: flex; flex-flow: row wrap; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;"]height[/border][border="0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;"]5'1" (155cm)[/border][/border][comment]





// weight //





[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;"]weight[/border][border="0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text);"]103lbs (47kg)[/border][/border][comment]





// appearance description //





[/comment][border="0px; margin-top: 15px; padding: 0; font-family: 'Abel', sans-serif; font-size: 1.0em; line-height: 125%; color: var(--text); text-align: justify;"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed. Donec nec nibh bibendum, pharetra nunc sed, placerat purus. Nulla a ligula lobortis, condimentum lacus eu, efficitur justo. Donec vitae volutpat odio, sed tincidunt enim. Suspendisse at ante sit amet libero blandit dapibus non in turpis. Vestibulum pharetra feugiat lacus a pulvinar. Nullam eget hendrerit dolor, vitae sagittis lacus. Vestibulum lacinia ex et lectus porta iaculis. Suspendisse interdum a nunc vitae egestas. Aliquam dignissim hendrerit leo sit amet sagittis. Vivamus eget ipsum vitae tellus facilisis aliquet. Mauris elementum eu diam id vestibulum.





Etiam eleifend metus nisi, ac laoreet nibh tincidunt id. In vel auctor magna, nec porta arcu. Morbi eget mattis justo. Fusce vitae auctor erat, at ullamcorper mauris. Ut pharetra vitae eros sed ornare. Quisque in malesuada elit. Nunc at malesuada turpis. Pellentesque at leo congue, faucibus lorem nec, mollis est.[/border][/border][comment]





// content box 3 - personality //





[/comment][border=1px solid var(--grey); border-radius: 4px; margin-top: 29px; padding: 15px; width: calc(100% - 32px); background: var(--bgcolor); position: relative;][border="1px solid var(--grey); border-radius: 4px; display: inline-block; right: 20px; top: -10px; padding: 3px 10px 2px; background: var(--bgcolor); font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute;"]personality[/border][comment]





// personality description //





[/comment][border="0px; padding: 0; font-family: 'Abel', sans-serif; font-size: 1.0em; line-height: 125%; color: var(--text); text-align: justify;"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed. Donec nec nibh bibendum, pharetra nunc sed, placerat purus. Nulla a ligula lobortis, condimentum lacus eu, efficitur justo. Donec vitae volutpat odio, sed tincidunt enim. Suspendisse at ante sit amet libero blandit dapibus non in turpis. Vestibulum pharetra feugiat lacus a pulvinar. Nullam eget hendrerit dolor, vitae sagittis lacus. Vestibulum lacinia ex et lectus porta iaculis. Suspendisse interdum a nunc vitae egestas. Aliquam dignissim hendrerit leo sit amet sagittis. Vivamus eget ipsum vitae tellus facilisis aliquet. Mauris elementum eu diam id vestibulum.





Etiam eleifend metus nisi, ac laoreet nibh tincidunt id. In vel auctor magna, nec porta arcu. Morbi eget mattis justo. Fusce vitae auctor erat, at ullamcorper mauris. Ut pharetra vitae eros sed ornare. Quisque in malesuada elit. Nunc at malesuada turpis. Pellentesque at leo congue, faucibus lorem nec, mollis est.[/border][/border][comment]//extra content boxes here//[/comment][/border][/border][/tab]







[comment]tab two[/comment]



[tab=.][border="0px; left: 80px; top: 0; padding: 0; width: 50px; height: 24px; font-family: 'Changa One', cursive; font-size: 18px; line-height: 23px; color: var(--text); text-align: center; position: absolute; z-index: 3; cursor: default;"]2[/border][border=0px; left: 15px; top: 20px; padding: 0; width: calc(100% + 2px); height: calc(70vh - 20px); min-height: 420px; max-height: 470px; overflow: hidden; position: absolute; z-index: 2;][border=0px; padding: 0; padding-right: 18px; width: 100%; height: calc(70vh - 20px); min-height: 420px; max-height: 470px; overflow-y: scroll;][comment]





// content box 2 - background //





[/comment][border=1px solid var(--grey); border-radius: 4px; margin-top: 29px; padding: 15px; width: calc(100% - 32px); background: var(--bgcolor); position: relative;][border="1px solid var(--grey); border-radius: 4px; display: inline-block; right: 20px; top: -10px; padding: 3px 10px 2px; background: var(--bgcolor); font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute;"]background[/border][comment]







// historic ages //





[/comment][comment]





// academy graduation //





[/comment][border=0px; display: flex; flex-flow: row wrap; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;"]graduation[/border][border="0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;"]Age 12[/border][/border][comment]





// chunin promotion //





[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;"]promotion[/border][border="0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text);"]N/A[/border][/border][comment]





// past events //





[/comment][border="0px; margin-top: 15px; padding: 0; font-family: 'Abel', sans-serif; font-size: 1.0em; line-height: 125%; color: var(--text); text-align: justify;"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed. Donec nec nibh bibendum, pharetra nunc sed, placerat purus. Nulla a ligula lobortis, condimentum lacus eu, efficitur justo. Donec vitae volutpat odio, sed tincidunt enim. Suspendisse at ante sit amet libero blandit dapibus non in turpis. Vestibulum pharetra feugiat lacus a pulvinar. Nullam eget hendrerit dolor, vitae sagittis lacus. Vestibulum lacinia ex et lectus porta iaculis. Suspendisse interdum a nunc vitae egestas. Aliquam dignissim hendrerit leo sit amet sagittis. Vivamus eget ipsum vitae tellus facilisis aliquet. Mauris elementum eu diam id vestibulum.





Etiam eleifend metus nisi, ac laoreet nibh tincidunt id. In vel auctor magna, nec porta arcu. Morbi eget mattis justo. Fusce vitae auctor erat, at ullamcorper mauris. Ut pharetra vitae eros sed ornare. Quisque in malesuada elit. Nunc at malesuada turpis. Pellentesque at leo congue, faucibus lorem nec, mollis est.[/border][/border][comment]





// content box 3 - relationships //





[/comment][border=1px solid var(--grey); border-radius: 4px; margin-top: 29px; padding: 15px; width: calc(100% - 32px); background: var(--bgcolor); position: relative;][border="1px solid var(--grey); border-radius: 4px; display: inline-block; right: 20px; top: -10px; padding: 3px 10px 2px; background: var(--bgcolor); font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute;"]relationships[/border][comment]





// important relationships //





[/comment][border="0px; padding: 0; font-family: 'Abel', sans-serif; font-size: 1.0em; line-height: 125%; color: var(--text); text-align: justify;"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed. Donec nec nibh bibendum, pharetra nunc sed, placerat purus. Nulla a ligula lobortis, condimentum lacus eu, efficitur justo. Donec vitae volutpat odio, sed tincidunt enim. Suspendisse at ante sit amet libero blandit dapibus non in turpis. Vestibulum pharetra feugiat lacus a pulvinar. Nullam eget hendrerit dolor, vitae sagittis lacus. Vestibulum lacinia ex et lectus porta iaculis. Suspendisse interdum a nunc vitae egestas. Aliquam dignissim hendrerit leo sit amet sagittis. Vivamus eget ipsum vitae tellus facilisis aliquet. Mauris elementum eu diam id vestibulum.





Etiam eleifend metus nisi, ac laoreet nibh tincidunt id. In vel auctor magna, nec porta arcu. Morbi eget mattis justo. Fusce vitae auctor erat, at ullamcorper mauris. Ut pharetra vitae eros sed ornare. Quisque in malesuada elit. Nunc at malesuada turpis. Pellentesque at leo congue, faucibus lorem nec, mollis est.[/border][/border][comment]//extra content boxes here//[/comment][/border][/border][/tab]







[comment]tab three[/comment]



[tab=.][border="0px; left: 140px; top: 0; padding: 0; width: 50px; height: 24px; font-family: 'Changa One', cursive; font-size: 18px; line-height: 23px; color: var(--text); text-align: center; position: absolute; z-index: 3; cursor: default;"]3[/border][border=0px; left: 15px; top: 20px; padding: 0; width: calc(100% + 2px); height: calc(70vh - 20px); min-height: 420px; max-height: 470px; overflow: hidden; position: absolute; z-index: 2;][border=0px; padding: 0; padding-right: 18px; width: 100%; height: calc(70vh - 20px); min-height: 420px; max-height: 470px; overflow-y: scroll;][comment]





// content box 4b - combat details //





[/comment][border=1px solid var(--grey); border-radius: 4px; margin-top: 29px; padding: 15px; width: calc(100% - 32px); background: var(--bgcolor); position: relative;][border="1px solid var(--grey); border-radius: 4px; display: inline-block; right: 20px; top: -10px; padding: 3px 10px 2px; background: var(--bgcolor); font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute;"]combat notes[/border][comment]





// stats //





[/comment][Row][Column=span2][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;"]nin[/border][/border][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--grey); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;"]#[/border][/border][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;"]str[/border][/border][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--grey); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;"]#[/border][/border][/Column]

[Column=span2][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;"]tai[/border][/border][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--grey); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;"]#[/border][/border][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;"]spd[/border][/border][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--grey); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;"]#[/border][/border][/Column]

[Column=span2][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;"]gen[/border][/border][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--grey); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;"]#[/border][/border][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;"]stm[/border][/border][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--grey); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;"]#[/border][/border][/Column]

[Column=span2][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;"]int[/border][/border][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--grey); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;"]#[/border][/border][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;"]sea[/border][/border][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--grey); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;"]#[/border][/border][/Column]

[/Row][comment]





// combat details //





[/comment][border="0px; margin-top: 15px; padding: 0; font-family: 'Abel', sans-serif; font-size: 1.0em; line-height: 125%; color: var(--text); text-align: justify;"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed. Donec nec nibh bibendum, pharetra nunc sed, placerat purus. Nulla a ligula lobortis, condimentum lacus eu, efficitur justo. Donec vitae volutpat odio, sed tincidunt enim. Suspendisse at ante sit amet libero blandit dapibus non in turpis. Vestibulum pharetra feugiat lacus a pulvinar. Nullam eget hendrerit dolor, vitae sagittis lacus. Vestibulum lacinia ex et lectus porta iaculis. Suspendisse interdum a nunc vitae egestas. Aliquam dignissim hendrerit leo sit amet sagittis. Vivamus eget ipsum vitae tellus facilisis aliquet. Mauris elementum eu diam id vestibulum.





Etiam eleifend metus nisi, ac laoreet nibh tincidunt id. In vel auctor magna, nec porta arcu. Morbi eget mattis justo. Fusce vitae auctor erat, at ullamcorper mauris. Ut pharetra vitae eros sed ornare. Quisque in malesuada elit. Nunc at malesuada turpis. Pellentesque at leo congue, faucibus lorem nec, mollis est.[/border][/border][comment]





// content box 5 - abilities //





[/comment][border=1px solid var(--grey); border-radius: 4px; margin-top: 9px; padding: 15px; width: calc(100% - 32px); background: var(--bgcolor); position: relative;][border="1px solid var(--grey); border-radius: 4px; display: inline-block; right: 20px; top: -10px; padding: 3px 10px 2px; background: var(--bgcolor); font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute;"]jutsus[/border][comment]





// power descriptions //





[/comment][border="0px; padding: 0; font-family: 'Abel', sans-serif; font-size: 1.0em; line-height: 125%; color: var(--text); text-align: justify;"][comment]





// ability 1 //





[/comment][border=0px; display: flex; flex-flow: row wrap; margin-left: -15px; padding: 0; width: calc(100% + 15px);][border=0px; margin-left: 15px; padding: 0; flex: 1; width: 100%; min-width: 75px; color: var(--accent); font-weight: 700; text-align: left; text-transform: uppercase;]Ability One[/border][border=0px; margin-left: 15px; padding: 0; flex: 5; width: 100%; min-width: 150px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed. Donec nec nibh bibendum, pharetra nunc sed, placerat purus. Nulla a ligula lobortis, condimentum lacus eu, efficitur justo. Donec vitae volutpat odio, sed tincidunt enim. Suspendisse at ante sit amet libero blandit dapibus non in turpis. Vestibulum pharetra feugiat lacus a pulvinar. Nullam eget hendrerit dolor, vitae sagittis lacus. Vestibulum lacinia ex et lectus porta iaculis. Suspendisse interdum a nunc vitae egestas. Aliquam dignissim hendrerit leo sit amet sagittis. Vivamus eget ipsum vitae tellus facilisis aliquet. Mauris elementum eu diam id vestibulum.





Etiam eleifend metus nisi, ac laoreet nibh tincidunt id. In vel auctor magna, nec porta arcu. Morbi eget mattis justo. Fusce vitae auctor erat, at ullamcorper mauris. Ut pharetra vitae eros sed ornare. Quisque in malesuada elit. Nunc at malesuada turpis. Pellentesque at leo congue, faucibus lorem nec, mollis est.[/border][/border][comment]





// ability 2 //





[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 25px; margin-left: -15px; padding: 0; width: calc(100% + 15px);][border=0px; margin-left: 15px; padding: 0; flex: 1; width: 100%; min-width: 75px; color: var(--accent); font-weight: 700; text-align: left; text-transform: uppercase;]Ability Two[/border][border=0px; margin-left: 15px; padding: 0; flex: 5; width: 100%; min-width: 150px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed. Donec nec nibh bibendum, pharetra nunc sed, placerat purus. Nulla a ligula lobortis, condimentum lacus eu, efficitur justo. Donec vitae volutpat odio, sed tincidunt enim. Suspendisse at ante sit amet libero blandit dapibus non in turpis. Vestibulum pharetra feugiat lacus a pulvinar. Nullam eget hendrerit dolor, vitae sagittis lacus. Vestibulum lacinia ex et lectus porta iaculis. Suspendisse interdum a nunc vitae egestas. Aliquam dignissim hendrerit leo sit amet sagittis. Vivamus eget ipsum vitae tellus facilisis aliquet. Mauris elementum eu diam id vestibulum.





Etiam eleifend metus nisi, ac laoreet nibh tincidunt id. In vel auctor magna, nec porta arcu. Morbi eget mattis justo. Fusce vitae auctor erat, at ullamcorper mauris. Ut pharetra vitae eros sed ornare. Quisque in malesuada elit. Nunc at malesuada turpis. Pellentesque at leo congue, faucibus lorem nec, mollis est.[/border][/border][comment]//extra abilities here//[/comment][/border][/border][comment]





// content box 6 - equipment //





[/comment][border=1px solid var(--grey); border-radius: 4px; margin-top: 29px; padding: 15px; width: calc(100% - 32px); background: var(--bgcolor); position: relative;][border="1px solid var(--grey); border-radius: 4px; display: inline-block; right: 20px; top: -10px; padding: 3px 10px 2px; background: var(--bgcolor); font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute;"]equipment[/border][comment]





// equipment descriptions //





[/comment][border="0px; padding: 0; font-family: 'Abel', sans-serif; font-size: 1.0em; line-height: 125%; color: var(--text); text-align: justify;"][comment]





// equip 1 //





[/comment][border=0px; display: flex; flex-flow: row wrap; margin-left: -15px; padding: 0; width: calc(100% + 15px);][border=0px; margin-left: 15px; padding: 0; flex: 1; width: 100%; min-width: 75px; color: var(--accent); font-weight: 700; text-align: left; text-transform: uppercase;]Equip 1[/border][border=0px; margin-left: 15px; padding: 0; flex: 5; width: 100%; min-width: 150px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed. Donec nec nibh bibendum, pharetra nunc sed, placerat purus. Nulla a ligula lobortis, condimentum lacus eu, efficitur justo. Donec vitae volutpat odio, sed tincidunt enim. Suspendisse at ante sit amet libero blandit dapibus non in turpis. Vestibulum pharetra feugiat lacus a pulvinar. Nullam eget hendrerit dolor, vitae sagittis lacus. Vestibulum lacinia ex et lectus porta iaculis. Suspendisse interdum a nunc vitae egestas. Aliquam dignissim hendrerit leo sit amet sagittis. Vivamus eget ipsum vitae tellus facilisis aliquet. Mauris elementum eu diam id vestibulum.





Etiam eleifend metus nisi, ac laoreet nibh tincidunt id. In vel auctor magna, nec porta arcu. Morbi eget mattis justo. Fusce vitae auctor erat, at ullamcorper mauris. Ut pharetra vitae eros sed ornare. Quisque in malesuada elit. Nunc at malesuada turpis. Pellentesque at leo congue, faucibus lorem nec, mollis est.[/border][/border][comment]//extra weapons/equips here//[/comment][/border][/border][comment]//extra content boxes here//[/comment][/border][/border][/tab]







[comment]tab four[/comment]



[tab=.][border="0px; left: 200px; top: 0; padding: 0; width: 50px; height: 24px; font-family: 'Changa One', cursive; font-size: 18px; line-height: 23px; color: var(--text); text-align: center; position: absolute; z-index: 3; cursor: default;"]4[/border][border=0px; left: 15px; top: 20px; padding: 0; width: calc(100% + 2px); height: calc(70vh - 20px); min-height: 420px; max-height: 470px; overflow: hidden; position: absolute; z-index: 2;][border=0px; padding: 0; padding-right: 18px; width: 100%; height: calc(70vh - 20px); min-height: 420px; max-height: 470px; overflow-y: scroll;][comment]





// content box 7 - extras/notes //





[/comment][border=1px solid var(--grey); border-radius: 4px; margin-top: 9px; padding: 15px; width: calc(100% - 32px); background: var(--bgcolor); position: relative;][border="1px solid var(--grey); border-radius: 4px; display: inline-block; right: 20px; top: -10px; padding: 3px 10px 2px; background: var(--bgcolor); font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute;"]extra[/border][comment]





// extras //





[/comment][border="0px; padding: 0; font-family: 'Abel', sans-serif; font-size: 1.0em; line-height: 125%; color: var(--text); text-align: justify;"][comment]





// likes //





[/comment][border=0px; display: flex; flex-flow: row wrap; margin-left: -5px; padding: 0; width: calc(100% + 5px);][border=0px; margin-left: 5px; padding: 0; flex: 1; width: 100%; min-width: 60px; color: var(--accent); font-weight: 700; text-align: left; text-transform: uppercase;]Likes[/border][border=0px; margin-left: 5px; padding: 0; flex: 9; width: 100%; min-width: 150px;]Item one, Item two, Item three, Item four, Etc[/border][/border][comment]





// dislikes //





[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 20px; margin-left: -5px; padding: 0; width: calc(100% + 5px);][border=0px; margin-left: 5px; padding: 0; flex: 1; width: 100%; min-width: 60px; color: var(--accent); font-weight: 700; text-align: left; text-transform: uppercase;]Dislikes[/border][border=0px; margin-left: 5px; padding: 0; flex: 9; width: 100%; min-width: 150px;]Item one, Item two, Item three, Item four, Etc[/border][/border][comment]





// note 1 //





[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 20px; margin-left: -5px; padding: 0; width: calc(100% + 5px);][border=0px; margin-left: 5px; padding: 0; flex: 1; width: 100%; min-width: 40px; color: var(--accent); font-weight: 700; text-align: left; text-transform: uppercase;]001.[/border][border=0px; margin-left: 5px; padding: 0; flex: 10; width: 100%; min-width: 150px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed.[/border][/border][comment]





// note 2 //





[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 20px; margin-left: -5px; padding: 0; width: calc(100% + 5px);][border=0px; margin-left: 5px; padding: 0; flex: 1; width: 100%; min-width: 40px; color: var(--accent); font-weight: 700; text-align: left; text-transform: uppercase;]002.[/border][border=0px; margin-left: 5px; padding: 0; flex: 10; width: 100%; min-width: 150px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed.[/border][/border][comment]





// note 3 //





[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 20px; margin-left: -5px; padding: 0; width: calc(100% + 5px);][border=0px; margin-left: 5px; padding: 0; flex: 1; width: 100%; min-width: 40px; color: var(--accent); font-weight: 700; text-align: left; text-transform: uppercase;]003.[/border][border=0px; margin-left: 5px; padding: 0; flex: 10; width: 100%; min-width: 150px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed.[/border][/border][comment] // extra notes here //[/comment][/border][/border][comment]//extra content boxes here//[/comment][/border][/border][/tab]





[/tabs][/border][/border][/border][border=0px; right: -1px; bottom: -1px; padding: 0; width: 150px; height: 150px; clip-path: polygon(100% 0, 0% 100%, 100% 100%); background: var(--accent); position: absolute; z-index: 1; pointer-events: none;][/border][/border][comment]//end of code//[/comment][border=0px; margin: 5px auto 0; padding: 0; width: 100%; max-width: 700px; font-size: .6em; text-align: center; text-transform: uppercase; opacity: .7;]code by [USER=20950]@Nano[/USER][/border][/border]
 
Last edited:
I assume the reason you tried to write the table like that is because you were wanting the organization that freebee codes offer. Those codes are purposely written differently for ease of understand where and when something begins or where to change it for those who don't understand anything they are looking at. So I took your code and implemented the existing organization into your table, including headers on where to change the stat '#'. Instead of the appropriate wall of text, it is now spread out so you can find each column.

Code: 
[comment]







Designed and coded by Nano.







Please do not remove the credits or claim the code as your own work.











[font=Changa One].[/font]







[font=Abel].[/font][/comment][comment]











// accents











[/comment][border="0; padding: 0;







     --bgcolor: #111111;







     --accent: #573385;







     --accent2: #BAACCD;







     --grey: #666666;







     --text: #fefefe;







     --mainimg: url('https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fsietske.bplaced.net%2Fwp-content%2Fuploads%2F2014%2F11%2Fe9179499d157660b3d931a7b99b3fb5b.jpg&f=1&nofb=1') bottom/cover no-repeat;







     --profileicon: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fimages3.alphacoders.com%2F976%2F976764.png&f=1&nofb=1') center/cover no-repeat;











     width: 100%;







     font-size: initial;







"][border=0px; margin: 0 auto; padding: 20px; width: calc(100% - 40px); max-width: 700px; background: var(--bgcolor); font-size: initial; position: relative; overflow: hidden;][comment]











// [triangle] red border + bg image //











[/comment][border=0px; top: -1px; left: -1px; padding: 0; width: 400px; height: 400px; clip-path: polygon(0 0, 0% 100%, 100% 0); background: var(--accent); position: absolute; z-index: 1; pointer-events: none;][border=0px; padding: 0; width: 380px; height: 380px; clip-path: polygon(0 0, 0% 100%, 100% 0); background: var(--mainimg);][/border][/border][comment]











// start of content //











[/comment][border=0px; display: flex; flex-flow: row wrap; margin-left: -5px; padding: 0; width: calc(100% + 5px); position: relative;][comment]











// start of left side (quote) //











[/comment][border=0px; margin-left: 5px; padding: 0; flex: 1; width: 100%; min-width: 150px; min-height: 450px; position: relative; overflow: hidden; z-index: 2;][border=0px; bottom: 20px; padding: 0; width: 100%; position: absolute;][border=0px; margin: 0 auto 10px; padding: 0; width: 50px; height: 5px; background: var(--accent);][/border][comment]











// quote //











[/comment][border="0px; padding: 0; width: 100%; font-family: 'Changa One', cursive; font-size: 1.8em; line-height: 115%; color: var(--text); text-align: center;"]a flower blooms on the battlefield[/border][border=0px; margin: 12px auto 0; padding: 0; width: 50px; height: 5px; background: var(--accent);][/border][/border][/border][comment]











// start of right side //











[/comment][border=0px; margin-left: 5px; padding: 0; flex: 2; width: 100%; min-width: 250px;][border=0px; border-right: 5px solid var(--accent); padding: 2px 5px 5px 0; width: calc(100% - 10px); position: relative; z-index: 2;][comment]











// name + title //











[/comment][border="0px; padding: 0; font-family: 'Changa One', cursive; font-size: 2.2em; line-height: 100%; color: var(--text); text-align: right; text-transform: capitalize;"]Yamanaka Inoka[/border][border="0px; margin-top: -3px; padding: 0; font-family: 'Abel', sans-serif; font-size: 1.0em; line-height: 100%; color: var(--accent); font-weight: 700; text-align: right; text-transform: lowercase;"]山中 猪香[/border][/border][comment]











// start of tabs + CS details //











[/comment][border=0px; margin-top: 10px; margin-left: -10px; padding: 0; width: calc(100% + 10px); height: 70vh; min-height: 450px; max-height: 500px; position: relative;][border=0px; display: flex; flex-flow: row wrap; left: 20px; margin-left: -10px; padding: 0; width: 240px; height: 24px; position: absolute; z-index: 2; pointer-events: none;][border="0px; margin-left: 10px; padding: 0; flex: 1; width: 50px; height: 24px; font-family: 'Changa One', cursive; font-size: 18px; line-height: 23px; color: var(--grey); text-align: center;"]1[/border][border="0px; margin-left: 10px; padding: 0; flex: 1; width: 50px; height: 24px; font-family: 'Changa One', cursive; font-size: 18px; line-height: 23px; color: var(--grey); text-align: center;"]2[/border][border="0px; margin-left: 10px; padding: 0; flex: 1; width: 50px; height: 24px; font-family: 'Changa One', cursive; font-size: 18px; line-height: 23px; color: var(--grey); text-align: center;"]3[/border][border="0px; margin-left: 10px; padding: 0; flex: 1; width: 50px; height: 24px; font-family: 'Changa One', cursive; font-size: 18px; line-height: 23px; color: var(--grey); text-align: center;"]4[/border][/border][border=0px; padding: 0; width: 100%; height: 70vh; min-height: 450px; max-height: 500px; background: var(--bgcolor); position: absolute; pointer-events: none; ][/border][tabs]















[comment]tab one[/comment]







[tab=.][border="0px; left: 20px; top: 0; padding: 0; width: 50px; height: 24px; font-family: 'Changa One', cursive; font-size: 18px; line-height: 23px; color: var(--text); text-align: center; position: absolute; z-index: 3; cursor: default;"]1[/border][border=0px; left: 15px; top: 20px; padding: 0; width: calc(100% + 2px); height: calc(70vh - 20px); min-height: 420px; max-height: 470px; overflow: hidden; position: absolute; z-index: 2;][border=0px; padding: 0; padding-right: 18px; width: 100%; height: calc(70vh - 20px); min-height: 420px; max-height: 470px; overflow-y: scroll;][comment]











// content box 1 - basic information //











[/comment][border=1px solid var(--grey); border-radius: 4px; margin-top: 9px; padding: 15px; width: calc(100% - 32px); background: var(--bgcolor); position: relative;][border="1px solid var(--grey); border-radius: 4px; display: inline-block; right: 20px; top: -10px; padding: 3px 10px 2px; background: var(--bgcolor); font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute;"]basics[/border][border=0px; display: flex; flex-flow: row-reverse wrap; margin-left: -15px; padding: 0; width: calc(100% + 15px);][border=0px; margin-left: 15px; padding: 0; flex: 1; width: 100%; min-width: 100px;][comment]











// profile image //











[/comment][border=0px; border-radius: 3px; margin-bottom: 15px; padding: 0; width: 100%; padding-top: 100%; background: var(--profileicon);][/border][/border][comment]











// personal info //











[/comment][border=0px; margin-left: 15px; margin-bottom: 15px; padding: 0; flex: 2; width: 100%; min-width: 150px;][comment]











// clan //











[/comment][border=0px; display: flex; flex-flow: row wrap; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;"]clan[/border][border="0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;"]Yamanaka[/border][/border][comment]











// birthday //











[/comment][border=0px; display: flex; flex-flow: row wrap; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;"]birthday[/border][border="0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;"]August 20th[/border][/border][comment]











// age //











[/comment][border=0px; display: flex; flex-flow: row wrap; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;"]age[/border][border="0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;"]12[/border][/border][comment]











// gender and pronouns //











[/comment][border=0px; display: flex; flex-flow: row wrap; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;"]gender[/border][border="0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;"]Trans male[/border][/border][comment]











// pronouns //











[/comment][border=0px; display: flex; flex-flow: row wrap; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;"]pronouns[/border][border="0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;"]He/him/his[/border][/border][comment]











// end of basic //











[/comment][/border][/border][comment]











// ninja info //











[/comment][comment]











// affiliated with //











[/comment][border=0px; display: flex; flex-flow: row wrap; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;"]affiliation[/border][border="0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;"]Konohagakure[/border][/border][comment]











// civillian and shinobi occupations //











[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;"]occupation[/border][border="0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;"]General shinobi, florist[/border][/border][comment]











// ninja speciality classification //











[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;"]classification[/border][border="0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;"]Sensor type[/border][/border][comment]











// teams assigned to //











[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;"]Team[/border][border="0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text);"]Team 3 (Zaki)[/border][/border][comment]











// ninja rank //











[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;"]rank[/border][border="0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text);"]Genin[/border][/border][comment]











// ninja registration number //











[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;"]registration[/border][border="0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;"]012603[/border][/border][/border][comment]











// content box 2 - appearance //











[/comment][border=1px solid var(--grey); border-radius: 4px; margin-top: 29px; padding: 15px; width: calc(100% - 32px); background: var(--bgcolor); position: relative;][border="1px solid var(--grey); border-radius: 4px; display: inline-block; right: 20px; top: -10px; padding: 3px 10px 2px; background: var(--bgcolor); font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute;"]appearance[/border][comment]











// appearance basics //











[/comment][comment]











// height //











[/comment][border=0px; display: flex; flex-flow: row wrap; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;"]height[/border][border="0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;"]5'1" (155cm)[/border][/border][comment]











// weight //











[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;"]weight[/border][border="0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text);"]103lbs (47kg)[/border][/border][comment]











// appearance description //











[/comment][border="0px; margin-top: 15px; padding: 0; font-family: 'Abel', sans-serif; font-size: 1.0em; line-height: 125%; color: var(--text); text-align: justify;"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed. Donec nec nibh bibendum, pharetra nunc sed, placerat purus. Nulla a ligula lobortis, condimentum lacus eu, efficitur justo. Donec vitae volutpat odio, sed tincidunt enim. Suspendisse at ante sit amet libero blandit dapibus non in turpis. Vestibulum pharetra feugiat lacus a pulvinar. Nullam eget hendrerit dolor, vitae sagittis lacus. Vestibulum lacinia ex et lectus porta iaculis. Suspendisse interdum a nunc vitae egestas. Aliquam dignissim hendrerit leo sit amet sagittis. Vivamus eget ipsum vitae tellus facilisis aliquet. Mauris elementum eu diam id vestibulum.











Etiam eleifend metus nisi, ac laoreet nibh tincidunt id. In vel auctor magna, nec porta arcu. Morbi eget mattis justo. Fusce vitae auctor erat, at ullamcorper mauris. Ut pharetra vitae eros sed ornare. Quisque in malesuada elit. Nunc at malesuada turpis. Pellentesque at leo congue, faucibus lorem nec, mollis est.[/border][/border][comment]











// content box 3 - personality //











[/comment][border=1px solid var(--grey); border-radius: 4px; margin-top: 29px; padding: 15px; width: calc(100% - 32px); background: var(--bgcolor); position: relative;][border="1px solid var(--grey); border-radius: 4px; display: inline-block; right: 20px; top: -10px; padding: 3px 10px 2px; background: var(--bgcolor); font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute;"]personality[/border][comment]











// personality description //











[/comment][border="0px; padding: 0; font-family: 'Abel', sans-serif; font-size: 1.0em; line-height: 125%; color: var(--text); text-align: justify;"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed. Donec nec nibh bibendum, pharetra nunc sed, placerat purus. Nulla a ligula lobortis, condimentum lacus eu, efficitur justo. Donec vitae volutpat odio, sed tincidunt enim. Suspendisse at ante sit amet libero blandit dapibus non in turpis. Vestibulum pharetra feugiat lacus a pulvinar. Nullam eget hendrerit dolor, vitae sagittis lacus. Vestibulum lacinia ex et lectus porta iaculis. Suspendisse interdum a nunc vitae egestas. Aliquam dignissim hendrerit leo sit amet sagittis. Vivamus eget ipsum vitae tellus facilisis aliquet. Mauris elementum eu diam id vestibulum.











Etiam eleifend metus nisi, ac laoreet nibh tincidunt id. In vel auctor magna, nec porta arcu. Morbi eget mattis justo. Fusce vitae auctor erat, at ullamcorper mauris. Ut pharetra vitae eros sed ornare. Quisque in malesuada elit. Nunc at malesuada turpis. Pellentesque at leo congue, faucibus lorem nec, mollis est.[/border][/border][comment]//extra content boxes here//[/comment][/border][/border][/tab]















[comment]tab two[/comment]







[tab=.][border="0px; left: 80px; top: 0; padding: 0; width: 50px; height: 24px; font-family: 'Changa One', cursive; font-size: 18px; line-height: 23px; color: var(--text); text-align: center; position: absolute; z-index: 3; cursor: default;"]2[/border][border=0px; left: 15px; top: 20px; padding: 0; width: calc(100% + 2px); height: calc(70vh - 20px); min-height: 420px; max-height: 470px; overflow: hidden; position: absolute; z-index: 2;][border=0px; padding: 0; padding-right: 18px; width: 100%; height: calc(70vh - 20px); min-height: 420px; max-height: 470px; overflow-y: scroll;][comment]











// content box 2 - background //











[/comment][border=1px solid var(--grey); border-radius: 4px; margin-top: 29px; padding: 15px; width: calc(100% - 32px); background: var(--bgcolor); position: relative;][border="1px solid var(--grey); border-radius: 4px; display: inline-block; right: 20px; top: -10px; padding: 3px 10px 2px; background: var(--bgcolor); font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute;"]background[/border][comment]















// historic ages //











[/comment][comment]











// academy graduation //











[/comment][border=0px; display: flex; flex-flow: row wrap; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;"]graduation[/border][border="0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;"]Age 12[/border][/border][comment]











// chunin promotion //











[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;"]promotion[/border][border="0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text);"]N/A[/border][/border][comment]











// past events //











[/comment][border="0px; margin-top: 15px; padding: 0; font-family: 'Abel', sans-serif; font-size: 1.0em; line-height: 125%; color: var(--text); text-align: justify;"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed. Donec nec nibh bibendum, pharetra nunc sed, placerat purus. Nulla a ligula lobortis, condimentum lacus eu, efficitur justo. Donec vitae volutpat odio, sed tincidunt enim. Suspendisse at ante sit amet libero blandit dapibus non in turpis. Vestibulum pharetra feugiat lacus a pulvinar. Nullam eget hendrerit dolor, vitae sagittis lacus. Vestibulum lacinia ex et lectus porta iaculis. Suspendisse interdum a nunc vitae egestas. Aliquam dignissim hendrerit leo sit amet sagittis. Vivamus eget ipsum vitae tellus facilisis aliquet. Mauris elementum eu diam id vestibulum.











Etiam eleifend metus nisi, ac laoreet nibh tincidunt id. In vel auctor magna, nec porta arcu. Morbi eget mattis justo. Fusce vitae auctor erat, at ullamcorper mauris. Ut pharetra vitae eros sed ornare. Quisque in malesuada elit. Nunc at malesuada turpis. Pellentesque at leo congue, faucibus lorem nec, mollis est.[/border][/border][comment]











// content box 3 - relationships //











[/comment][border=1px solid var(--grey); border-radius: 4px; margin-top: 29px; padding: 15px; width: calc(100% - 32px); background: var(--bgcolor); position: relative;][border="1px solid var(--grey); border-radius: 4px; display: inline-block; right: 20px; top: -10px; padding: 3px 10px 2px; background: var(--bgcolor); font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute;"]relationships[/border][comment]











// important relationships //











[/comment][border="0px; padding: 0; font-family: 'Abel', sans-serif; font-size: 1.0em; line-height: 125%; color: var(--text); text-align: justify;"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed. Donec nec nibh bibendum, pharetra nunc sed, placerat purus. Nulla a ligula lobortis, condimentum lacus eu, efficitur justo. Donec vitae volutpat odio, sed tincidunt enim. Suspendisse at ante sit amet libero blandit dapibus non in turpis. Vestibulum pharetra feugiat lacus a pulvinar. Nullam eget hendrerit dolor, vitae sagittis lacus. Vestibulum lacinia ex et lectus porta iaculis. Suspendisse interdum a nunc vitae egestas. Aliquam dignissim hendrerit leo sit amet sagittis. Vivamus eget ipsum vitae tellus facilisis aliquet. Mauris elementum eu diam id vestibulum.











Etiam eleifend metus nisi, ac laoreet nibh tincidunt id. In vel auctor magna, nec porta arcu. Morbi eget mattis justo. Fusce vitae auctor erat, at ullamcorper mauris. Ut pharetra vitae eros sed ornare. Quisque in malesuada elit. Nunc at malesuada turpis. Pellentesque at leo congue, faucibus lorem nec, mollis est.[/border][/border][comment]//extra content boxes here//[/comment][/border][/border][/tab]















[comment]tab three[/comment]







[tab=.][border="0px; left: 140px; top: 0; padding: 0; width: 50px; height: 24px; font-family: 'Changa One', cursive; font-size: 18px; line-height: 23px; color: var(--text); text-align: center; position: absolute; z-index: 3; cursor: default;"]3[/border][border=0px; left: 15px; top: 20px; padding: 0; width: calc(100% + 2px); height: calc(70vh - 20px); min-height: 420px; max-height: 470px; overflow: hidden; position: absolute; z-index: 2;][border=0px; padding: 0; padding-right: 18px; width: 100%; height: calc(70vh - 20px); min-height: 420px; max-height: 470px; overflow-y: scroll;][comment]











// content box 4b - combat details //











[/comment][border=1px solid var(--grey); border-radius: 4px; margin-top: 29px; padding: 15px; width: calc(100% - 32px); background: var(--bgcolor); position: relative;][border="1px solid var(--grey); border-radius: 4px; display: inline-block; right: 20px; top: -10px; padding: 3px 10px 2px; background: var(--bgcolor); font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute;"]combat notes[/border][comment]











// stats //











[/comment][Row][Column=span2][comment]



//    NIN NAME  //



[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;"]nin[/border][/border][comment]



//  NIN  # //



[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--grey); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;"]#[/border][/border][comment]



//  STR NAME //



[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;"]str[/border][/border][comment]



//  STR # //



[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--grey); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;"]#[/border][/border][/Column][comment]
[/comment][Column=span2][comment]



//  TAI NAME //



[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;"]tai[/border][/border][comment]



//  TAI # //



[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--grey); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;"]#[/border][/border][comment]



//  SPD NAME //



[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;"]spd[/border][/border][comment]



//  SPD # //



[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--grey); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;"]#[/border][/border][/Column][comment]
[/comment][Column=span2][comment]



//  GEN NAME //



[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;"]gen[/border][/border][comment]



//  GEN # //



[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--grey); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;"]#[/border][/border][comment]



//  STM NAME //



[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;"]stm[/border][/border][comment]



// STM # //



[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--grey); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;"]#[/border][/border][/Column][comment]
[/comment][Column=span2][comment]



// INT NAME //



[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;"]int[/border][/border][comment]



//  INT # //



[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--grey); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;"]#[/border][/border][comment]



//  SEA NAME //



[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;"]sea[/border][/border][comment]



//  SEA # //



[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--grey); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;"]#[/border][/border][/Column][/Row][comment]











// combat details //











[/comment][border="0px; margin-top: 15px; padding: 0; font-family: 'Abel', sans-serif; font-size: 1.0em; line-height: 125%; color: var(--text); text-align: justify;"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed. Donec nec nibh bibendum, pharetra nunc sed, placerat purus. Nulla a ligula lobortis, condimentum lacus eu, efficitur justo. Donec vitae volutpat odio, sed tincidunt enim. Suspendisse at ante sit amet libero blandit dapibus non in turpis. Vestibulum pharetra feugiat lacus a pulvinar. Nullam eget hendrerit dolor, vitae sagittis lacus. Vestibulum lacinia ex et lectus porta iaculis. Suspendisse interdum a nunc vitae egestas. Aliquam dignissim hendrerit leo sit amet sagittis. Vivamus eget ipsum vitae tellus facilisis aliquet. Mauris elementum eu diam id vestibulum.











Etiam eleifend metus nisi, ac laoreet nibh tincidunt id. In vel auctor magna, nec porta arcu. Morbi eget mattis justo. Fusce vitae auctor erat, at ullamcorper mauris. Ut pharetra vitae eros sed ornare. Quisque in malesuada elit. Nunc at malesuada turpis. Pellentesque at leo congue, faucibus lorem nec, mollis est.[/border][/border][comment]











// content box 5 - abilities //











[/comment][border=1px solid var(--grey); border-radius: 4px; margin-top: 9px; padding: 15px; width: calc(100% - 32px); background: var(--bgcolor); position: relative;][border="1px solid var(--grey); border-radius: 4px; display: inline-block; right: 20px; top: -10px; padding: 3px 10px 2px; background: var(--bgcolor); font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute;"]jutsus[/border][comment]











// power descriptions //











[/comment][border="0px; padding: 0; font-family: 'Abel', sans-serif; font-size: 1.0em; line-height: 125%; color: var(--text); text-align: justify;"][comment]











// ability 1 //











[/comment][border=0px; display: flex; flex-flow: row wrap; margin-left: -15px; padding: 0; width: calc(100% + 15px);][border=0px; margin-left: 15px; padding: 0; flex: 1; width: 100%; min-width: 75px; color: var(--accent); font-weight: 700; text-align: left; text-transform: uppercase;]Ability One[/border][border=0px; margin-left: 15px; padding: 0; flex: 5; width: 100%; min-width: 150px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed. Donec nec nibh bibendum, pharetra nunc sed, placerat purus. Nulla a ligula lobortis, condimentum lacus eu, efficitur justo. Donec vitae volutpat odio, sed tincidunt enim. Suspendisse at ante sit amet libero blandit dapibus non in turpis. Vestibulum pharetra feugiat lacus a pulvinar. Nullam eget hendrerit dolor, vitae sagittis lacus. Vestibulum lacinia ex et lectus porta iaculis. Suspendisse interdum a nunc vitae egestas. Aliquam dignissim hendrerit leo sit amet sagittis. Vivamus eget ipsum vitae tellus facilisis aliquet. Mauris elementum eu diam id vestibulum.











Etiam eleifend metus nisi, ac laoreet nibh tincidunt id. In vel auctor magna, nec porta arcu. Morbi eget mattis justo. Fusce vitae auctor erat, at ullamcorper mauris. Ut pharetra vitae eros sed ornare. Quisque in malesuada elit. Nunc at malesuada turpis. Pellentesque at leo congue, faucibus lorem nec, mollis est.[/border][/border][comment]











// ability 2 //











[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 25px; margin-left: -15px; padding: 0; width: calc(100% + 15px);][border=0px; margin-left: 15px; padding: 0; flex: 1; width: 100%; min-width: 75px; color: var(--accent); font-weight: 700; text-align: left; text-transform: uppercase;]Ability Two[/border][border=0px; margin-left: 15px; padding: 0; flex: 5; width: 100%; min-width: 150px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed. Donec nec nibh bibendum, pharetra nunc sed, placerat purus. Nulla a ligula lobortis, condimentum lacus eu, efficitur justo. Donec vitae volutpat odio, sed tincidunt enim. Suspendisse at ante sit amet libero blandit dapibus non in turpis. Vestibulum pharetra feugiat lacus a pulvinar. Nullam eget hendrerit dolor, vitae sagittis lacus. Vestibulum lacinia ex et lectus porta iaculis. Suspendisse interdum a nunc vitae egestas. Aliquam dignissim hendrerit leo sit amet sagittis. Vivamus eget ipsum vitae tellus facilisis aliquet. Mauris elementum eu diam id vestibulum.











Etiam eleifend metus nisi, ac laoreet nibh tincidunt id. In vel auctor magna, nec porta arcu. Morbi eget mattis justo. Fusce vitae auctor erat, at ullamcorper mauris. Ut pharetra vitae eros sed ornare. Quisque in malesuada elit. Nunc at malesuada turpis. Pellentesque at leo congue, faucibus lorem nec, mollis est.[/border][/border][comment]//extra abilities here//[/comment][/border][/border][comment]











// content box 6 - equipment //











[/comment][border=1px solid var(--grey); border-radius: 4px; margin-top: 29px; padding: 15px; width: calc(100% - 32px); background: var(--bgcolor); position: relative;][border="1px solid var(--grey); border-radius: 4px; display: inline-block; right: 20px; top: -10px; padding: 3px 10px 2px; background: var(--bgcolor); font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute;"]equipment[/border][comment]











// equipment descriptions //











[/comment][border="0px; padding: 0; font-family: 'Abel', sans-serif; font-size: 1.0em; line-height: 125%; color: var(--text); text-align: justify;"][comment]











// equip 1 //











[/comment][border=0px; display: flex; flex-flow: row wrap; margin-left: -15px; padding: 0; width: calc(100% + 15px);][border=0px; margin-left: 15px; padding: 0; flex: 1; width: 100%; min-width: 75px; color: var(--accent); font-weight: 700; text-align: left; text-transform: uppercase;]Equip 1[/border][border=0px; margin-left: 15px; padding: 0; flex: 5; width: 100%; min-width: 150px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed. Donec nec nibh bibendum, pharetra nunc sed, placerat purus. Nulla a ligula lobortis, condimentum lacus eu, efficitur justo. Donec vitae volutpat odio, sed tincidunt enim. Suspendisse at ante sit amet libero blandit dapibus non in turpis. Vestibulum pharetra feugiat lacus a pulvinar. Nullam eget hendrerit dolor, vitae sagittis lacus. Vestibulum lacinia ex et lectus porta iaculis. Suspendisse interdum a nunc vitae egestas. Aliquam dignissim hendrerit leo sit amet sagittis. Vivamus eget ipsum vitae tellus facilisis aliquet. Mauris elementum eu diam id vestibulum.











Etiam eleifend metus nisi, ac laoreet nibh tincidunt id. In vel auctor magna, nec porta arcu. Morbi eget mattis justo. Fusce vitae auctor erat, at ullamcorper mauris. Ut pharetra vitae eros sed ornare. Quisque in malesuada elit. Nunc at malesuada turpis. Pellentesque at leo congue, faucibus lorem nec, mollis est.[/border][/border][comment]//extra weapons/equips here//[/comment][/border][/border][comment]//extra content boxes here//[/comment][/border][/border][/tab]















[comment]tab four[/comment]







[tab=.][border="0px; left: 200px; top: 0; padding: 0; width: 50px; height: 24px; font-family: 'Changa One', cursive; font-size: 18px; line-height: 23px; color: var(--text); text-align: center; position: absolute; z-index: 3; cursor: default;"]4[/border][border=0px; left: 15px; top: 20px; padding: 0; width: calc(100% + 2px); height: calc(70vh - 20px); min-height: 420px; max-height: 470px; overflow: hidden; position: absolute; z-index: 2;][border=0px; padding: 0; padding-right: 18px; width: 100%; height: calc(70vh - 20px); min-height: 420px; max-height: 470px; overflow-y: scroll;][comment]











// content box 7 - extras/notes //











[/comment][border=1px solid var(--grey); border-radius: 4px; margin-top: 9px; padding: 15px; width: calc(100% - 32px); background: var(--bgcolor); position: relative;][border="1px solid var(--grey); border-radius: 4px; display: inline-block; right: 20px; top: -10px; padding: 3px 10px 2px; background: var(--bgcolor); font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute;"]extra[/border][comment]











// extras //











[/comment][border="0px; padding: 0; font-family: 'Abel', sans-serif; font-size: 1.0em; line-height: 125%; color: var(--text); text-align: justify;"][comment]











// likes //











[/comment][border=0px; display: flex; flex-flow: row wrap; margin-left: -5px; padding: 0; width: calc(100% + 5px);][border=0px; margin-left: 5px; padding: 0; flex: 1; width: 100%; min-width: 60px; color: var(--accent); font-weight: 700; text-align: left; text-transform: uppercase;]Likes[/border][border=0px; margin-left: 5px; padding: 0; flex: 9; width: 100%; min-width: 150px;]Item one, Item two, Item three, Item four, Etc[/border][/border][comment]











// dislikes //











[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 20px; margin-left: -5px; padding: 0; width: calc(100% + 5px);][border=0px; margin-left: 5px; padding: 0; flex: 1; width: 100%; min-width: 60px; color: var(--accent); font-weight: 700; text-align: left; text-transform: uppercase;]Dislikes[/border][border=0px; margin-left: 5px; padding: 0; flex: 9; width: 100%; min-width: 150px;]Item one, Item two, Item three, Item four, Etc[/border][/border][comment]











// note 1 //











[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 20px; margin-left: -5px; padding: 0; width: calc(100% + 5px);][border=0px; margin-left: 5px; padding: 0; flex: 1; width: 100%; min-width: 40px; color: var(--accent); font-weight: 700; text-align: left; text-transform: uppercase;]001.[/border][border=0px; margin-left: 5px; padding: 0; flex: 10; width: 100%; min-width: 150px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed.[/border][/border][comment]











// note 2 //











[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 20px; margin-left: -5px; padding: 0; width: calc(100% + 5px);][border=0px; margin-left: 5px; padding: 0; flex: 1; width: 100%; min-width: 40px; color: var(--accent); font-weight: 700; text-align: left; text-transform: uppercase;]002.[/border][border=0px; margin-left: 5px; padding: 0; flex: 10; width: 100%; min-width: 150px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed.[/border][/border][comment]











// note 3 //











[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 20px; margin-left: -5px; padding: 0; width: calc(100% + 5px);][border=0px; margin-left: 5px; padding: 0; flex: 1; width: 100%; min-width: 40px; color: var(--accent); font-weight: 700; text-align: left; text-transform: uppercase;]003.[/border][border=0px; margin-left: 5px; padding: 0; flex: 10; width: 100%; min-width: 150px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed.[/border][/border][comment] // extra notes here //[/comment][/border][/border][comment]//extra content boxes here//[/comment][/border][/border][/tab]











[/tabs][/border][/border][/border][border=0px; right: -1px; bottom: -1px; padding: 0; width: 150px; height: 150px; clip-path: polygon(100% 0, 0% 100%, 100% 100%); background: var(--accent); position: absolute; z-index: 1; pointer-events: none;][/border][/border][comment]//end of code//[/comment][border=0px; margin: 5px auto 0; padding: 0; width: 100%; max-width: 700px; font-size: .6em; text-align: center; text-transform: uppercase; opacity: .7;]code by [USER=20950]@Nano[/USER][/border][/border]
 
Yellow Swan said:
I assume the reason you tried to write the table like that is because you were wanting the organization that freebee codes offer. Those codes are purposely written differently for ease of understand where and when something begins or where to change it for those who don't understand anything they are looking at. So I took your code and implemented the existing organization into your table, including headers on where to change the stat '#'. Instead of the appropriate wall of text, it is now spread out so you can find each column.

Code: 
[comment]







Designed and coded by Nano.







Please do not remove the credits or claim the code as your own work.











[font=Changa One].[/font]







[font=Abel].[/font][/comment][comment]











// accents











[/comment][border="0; padding: 0;







     --bgcolor: #111111;







     --accent: #573385;







     --accent2: #BAACCD;







     --grey: #666666;







     --text: #fefefe;







     --mainimg: url('https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fsietske.bplaced.net%2Fwp-content%2Fuploads%2F2014%2F11%2Fe9179499d157660b3d931a7b99b3fb5b.jpg&f=1&nofb=1') bottom/cover no-repeat;







     --profileicon: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fimages3.alphacoders.com%2F976%2F976764.png&f=1&nofb=1') center/cover no-repeat;











     width: 100%;







     font-size: initial;







"][border=0px; margin: 0 auto; padding: 20px; width: calc(100% - 40px); max-width: 700px; background: var(--bgcolor); font-size: initial; position: relative; overflow: hidden;][comment]











// [triangle] red border + bg image //











[/comment][border=0px; top: -1px; left: -1px; padding: 0; width: 400px; height: 400px; clip-path: polygon(0 0, 0% 100%, 100% 0); background: var(--accent); position: absolute; z-index: 1; pointer-events: none;][border=0px; padding: 0; width: 380px; height: 380px; clip-path: polygon(0 0, 0% 100%, 100% 0); background: var(--mainimg);][/border][/border][comment]











// start of content //











[/comment][border=0px; display: flex; flex-flow: row wrap; margin-left: -5px; padding: 0; width: calc(100% + 5px); position: relative;][comment]











// start of left side (quote) //











[/comment][border=0px; margin-left: 5px; padding: 0; flex: 1; width: 100%; min-width: 150px; min-height: 450px; position: relative; overflow: hidden; z-index: 2;][border=0px; bottom: 20px; padding: 0; width: 100%; position: absolute;][border=0px; margin: 0 auto 10px; padding: 0; width: 50px; height: 5px; background: var(--accent);][/border][comment]











// quote //











[/comment][border="0px; padding: 0; width: 100%; font-family: 'Changa One', cursive; font-size: 1.8em; line-height: 115%; color: var(--text); text-align: center;"]a flower blooms on the battlefield[/border][border=0px; margin: 12px auto 0; padding: 0; width: 50px; height: 5px; background: var(--accent);][/border][/border][/border][comment]











// start of right side //











[/comment][border=0px; margin-left: 5px; padding: 0; flex: 2; width: 100%; min-width: 250px;][border=0px; border-right: 5px solid var(--accent); padding: 2px 5px 5px 0; width: calc(100% - 10px); position: relative; z-index: 2;][comment]











// name + title //











[/comment][border="0px; padding: 0; font-family: 'Changa One', cursive; font-size: 2.2em; line-height: 100%; color: var(--text); text-align: right; text-transform: capitalize;"]Yamanaka Inoka[/border][border="0px; margin-top: -3px; padding: 0; font-family: 'Abel', sans-serif; font-size: 1.0em; line-height: 100%; color: var(--accent); font-weight: 700; text-align: right; text-transform: lowercase;"]山中 猪香[/border][/border][comment]











// start of tabs + CS details //











[/comment][border=0px; margin-top: 10px; margin-left: -10px; padding: 0; width: calc(100% + 10px); height: 70vh; min-height: 450px; max-height: 500px; position: relative;][border=0px; display: flex; flex-flow: row wrap; left: 20px; margin-left: -10px; padding: 0; width: 240px; height: 24px; position: absolute; z-index: 2; pointer-events: none;][border="0px; margin-left: 10px; padding: 0; flex: 1; width: 50px; height: 24px; font-family: 'Changa One', cursive; font-size: 18px; line-height: 23px; color: var(--grey); text-align: center;"]1[/border][border="0px; margin-left: 10px; padding: 0; flex: 1; width: 50px; height: 24px; font-family: 'Changa One', cursive; font-size: 18px; line-height: 23px; color: var(--grey); text-align: center;"]2[/border][border="0px; margin-left: 10px; padding: 0; flex: 1; width: 50px; height: 24px; font-family: 'Changa One', cursive; font-size: 18px; line-height: 23px; color: var(--grey); text-align: center;"]3[/border][border="0px; margin-left: 10px; padding: 0; flex: 1; width: 50px; height: 24px; font-family: 'Changa One', cursive; font-size: 18px; line-height: 23px; color: var(--grey); text-align: center;"]4[/border][/border][border=0px; padding: 0; width: 100%; height: 70vh; min-height: 450px; max-height: 500px; background: var(--bgcolor); position: absolute; pointer-events: none; ][/border][tabs]















[comment]tab one[/comment]







[tab=.][border="0px; left: 20px; top: 0; padding: 0; width: 50px; height: 24px; font-family: 'Changa One', cursive; font-size: 18px; line-height: 23px; color: var(--text); text-align: center; position: absolute; z-index: 3; cursor: default;"]1[/border][border=0px; left: 15px; top: 20px; padding: 0; width: calc(100% + 2px); height: calc(70vh - 20px); min-height: 420px; max-height: 470px; overflow: hidden; position: absolute; z-index: 2;][border=0px; padding: 0; padding-right: 18px; width: 100%; height: calc(70vh - 20px); min-height: 420px; max-height: 470px; overflow-y: scroll;][comment]











// content box 1 - basic information //











[/comment][border=1px solid var(--grey); border-radius: 4px; margin-top: 9px; padding: 15px; width: calc(100% - 32px); background: var(--bgcolor); position: relative;][border="1px solid var(--grey); border-radius: 4px; display: inline-block; right: 20px; top: -10px; padding: 3px 10px 2px; background: var(--bgcolor); font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute;"]basics[/border][border=0px; display: flex; flex-flow: row-reverse wrap; margin-left: -15px; padding: 0; width: calc(100% + 15px);][border=0px; margin-left: 15px; padding: 0; flex: 1; width: 100%; min-width: 100px;][comment]











// profile image //











[/comment][border=0px; border-radius: 3px; margin-bottom: 15px; padding: 0; width: 100%; padding-top: 100%; background: var(--profileicon);][/border][/border][comment]











// personal info //











[/comment][border=0px; margin-left: 15px; margin-bottom: 15px; padding: 0; flex: 2; width: 100%; min-width: 150px;][comment]











// clan //











[/comment][border=0px; display: flex; flex-flow: row wrap; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;"]clan[/border][border="0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;"]Yamanaka[/border][/border][comment]











// birthday //











[/comment][border=0px; display: flex; flex-flow: row wrap; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;"]birthday[/border][border="0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;"]August 20th[/border][/border][comment]











// age //











[/comment][border=0px; display: flex; flex-flow: row wrap; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;"]age[/border][border="0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;"]12[/border][/border][comment]











// gender and pronouns //











[/comment][border=0px; display: flex; flex-flow: row wrap; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;"]gender[/border][border="0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;"]Trans male[/border][/border][comment]











// pronouns //











[/comment][border=0px; display: flex; flex-flow: row wrap; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;"]pronouns[/border][border="0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;"]He/him/his[/border][/border][comment]











// end of basic //











[/comment][/border][/border][comment]











// ninja info //











[/comment][comment]











// affiliated with //











[/comment][border=0px; display: flex; flex-flow: row wrap; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;"]affiliation[/border][border="0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;"]Konohagakure[/border][/border][comment]











// civillian and shinobi occupations //











[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;"]occupation[/border][border="0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;"]General shinobi, florist[/border][/border][comment]











// ninja speciality classification //











[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;"]classification[/border][border="0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;"]Sensor type[/border][/border][comment]











// teams assigned to //











[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;"]Team[/border][border="0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text);"]Team 3 (Zaki)[/border][/border][comment]











// ninja rank //











[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;"]rank[/border][border="0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text);"]Genin[/border][/border][comment]











// ninja registration number //











[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;"]registration[/border][border="0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;"]012603[/border][/border][/border][comment]











// content box 2 - appearance //











[/comment][border=1px solid var(--grey); border-radius: 4px; margin-top: 29px; padding: 15px; width: calc(100% - 32px); background: var(--bgcolor); position: relative;][border="1px solid var(--grey); border-radius: 4px; display: inline-block; right: 20px; top: -10px; padding: 3px 10px 2px; background: var(--bgcolor); font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute;"]appearance[/border][comment]











// appearance basics //











[/comment][comment]











// height //











[/comment][border=0px; display: flex; flex-flow: row wrap; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;"]height[/border][border="0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;"]5'1" (155cm)[/border][/border][comment]











// weight //











[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;"]weight[/border][border="0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text);"]103lbs (47kg)[/border][/border][comment]











// appearance description //











[/comment][border="0px; margin-top: 15px; padding: 0; font-family: 'Abel', sans-serif; font-size: 1.0em; line-height: 125%; color: var(--text); text-align: justify;"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed. Donec nec nibh bibendum, pharetra nunc sed, placerat purus. Nulla a ligula lobortis, condimentum lacus eu, efficitur justo. Donec vitae volutpat odio, sed tincidunt enim. Suspendisse at ante sit amet libero blandit dapibus non in turpis. Vestibulum pharetra feugiat lacus a pulvinar. Nullam eget hendrerit dolor, vitae sagittis lacus. Vestibulum lacinia ex et lectus porta iaculis. Suspendisse interdum a nunc vitae egestas. Aliquam dignissim hendrerit leo sit amet sagittis. Vivamus eget ipsum vitae tellus facilisis aliquet. Mauris elementum eu diam id vestibulum.











Etiam eleifend metus nisi, ac laoreet nibh tincidunt id. In vel auctor magna, nec porta arcu. Morbi eget mattis justo. Fusce vitae auctor erat, at ullamcorper mauris. Ut pharetra vitae eros sed ornare. Quisque in malesuada elit. Nunc at malesuada turpis. Pellentesque at leo congue, faucibus lorem nec, mollis est.[/border][/border][comment]











// content box 3 - personality //











[/comment][border=1px solid var(--grey); border-radius: 4px; margin-top: 29px; padding: 15px; width: calc(100% - 32px); background: var(--bgcolor); position: relative;][border="1px solid var(--grey); border-radius: 4px; display: inline-block; right: 20px; top: -10px; padding: 3px 10px 2px; background: var(--bgcolor); font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute;"]personality[/border][comment]











// personality description //











[/comment][border="0px; padding: 0; font-family: 'Abel', sans-serif; font-size: 1.0em; line-height: 125%; color: var(--text); text-align: justify;"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed. Donec nec nibh bibendum, pharetra nunc sed, placerat purus. Nulla a ligula lobortis, condimentum lacus eu, efficitur justo. Donec vitae volutpat odio, sed tincidunt enim. Suspendisse at ante sit amet libero blandit dapibus non in turpis. Vestibulum pharetra feugiat lacus a pulvinar. Nullam eget hendrerit dolor, vitae sagittis lacus. Vestibulum lacinia ex et lectus porta iaculis. Suspendisse interdum a nunc vitae egestas. Aliquam dignissim hendrerit leo sit amet sagittis. Vivamus eget ipsum vitae tellus facilisis aliquet. Mauris elementum eu diam id vestibulum.











Etiam eleifend metus nisi, ac laoreet nibh tincidunt id. In vel auctor magna, nec porta arcu. Morbi eget mattis justo. Fusce vitae auctor erat, at ullamcorper mauris. Ut pharetra vitae eros sed ornare. Quisque in malesuada elit. Nunc at malesuada turpis. Pellentesque at leo congue, faucibus lorem nec, mollis est.[/border][/border][comment]//extra content boxes here//[/comment][/border][/border][/tab]















[comment]tab two[/comment]







[tab=.][border="0px; left: 80px; top: 0; padding: 0; width: 50px; height: 24px; font-family: 'Changa One', cursive; font-size: 18px; line-height: 23px; color: var(--text); text-align: center; position: absolute; z-index: 3; cursor: default;"]2[/border][border=0px; left: 15px; top: 20px; padding: 0; width: calc(100% + 2px); height: calc(70vh - 20px); min-height: 420px; max-height: 470px; overflow: hidden; position: absolute; z-index: 2;][border=0px; padding: 0; padding-right: 18px; width: 100%; height: calc(70vh - 20px); min-height: 420px; max-height: 470px; overflow-y: scroll;][comment]











// content box 2 - background //











[/comment][border=1px solid var(--grey); border-radius: 4px; margin-top: 29px; padding: 15px; width: calc(100% - 32px); background: var(--bgcolor); position: relative;][border="1px solid var(--grey); border-radius: 4px; display: inline-block; right: 20px; top: -10px; padding: 3px 10px 2px; background: var(--bgcolor); font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute;"]background[/border][comment]















// historic ages //











[/comment][comment]











// academy graduation //











[/comment][border=0px; display: flex; flex-flow: row wrap; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;"]graduation[/border][border="0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;"]Age 12[/border][/border][comment]











// chunin promotion //











[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;"]promotion[/border][border="0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text);"]N/A[/border][/border][comment]











// past events //











[/comment][border="0px; margin-top: 15px; padding: 0; font-family: 'Abel', sans-serif; font-size: 1.0em; line-height: 125%; color: var(--text); text-align: justify;"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed. Donec nec nibh bibendum, pharetra nunc sed, placerat purus. Nulla a ligula lobortis, condimentum lacus eu, efficitur justo. Donec vitae volutpat odio, sed tincidunt enim. Suspendisse at ante sit amet libero blandit dapibus non in turpis. Vestibulum pharetra feugiat lacus a pulvinar. Nullam eget hendrerit dolor, vitae sagittis lacus. Vestibulum lacinia ex et lectus porta iaculis. Suspendisse interdum a nunc vitae egestas. Aliquam dignissim hendrerit leo sit amet sagittis. Vivamus eget ipsum vitae tellus facilisis aliquet. Mauris elementum eu diam id vestibulum.











Etiam eleifend metus nisi, ac laoreet nibh tincidunt id. In vel auctor magna, nec porta arcu. Morbi eget mattis justo. Fusce vitae auctor erat, at ullamcorper mauris. Ut pharetra vitae eros sed ornare. Quisque in malesuada elit. Nunc at malesuada turpis. Pellentesque at leo congue, faucibus lorem nec, mollis est.[/border][/border][comment]











// content box 3 - relationships //











[/comment][border=1px solid var(--grey); border-radius: 4px; margin-top: 29px; padding: 15px; width: calc(100% - 32px); background: var(--bgcolor); position: relative;][border="1px solid var(--grey); border-radius: 4px; display: inline-block; right: 20px; top: -10px; padding: 3px 10px 2px; background: var(--bgcolor); font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute;"]relationships[/border][comment]











// important relationships //











[/comment][border="0px; padding: 0; font-family: 'Abel', sans-serif; font-size: 1.0em; line-height: 125%; color: var(--text); text-align: justify;"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed. Donec nec nibh bibendum, pharetra nunc sed, placerat purus. Nulla a ligula lobortis, condimentum lacus eu, efficitur justo. Donec vitae volutpat odio, sed tincidunt enim. Suspendisse at ante sit amet libero blandit dapibus non in turpis. Vestibulum pharetra feugiat lacus a pulvinar. Nullam eget hendrerit dolor, vitae sagittis lacus. Vestibulum lacinia ex et lectus porta iaculis. Suspendisse interdum a nunc vitae egestas. Aliquam dignissim hendrerit leo sit amet sagittis. Vivamus eget ipsum vitae tellus facilisis aliquet. Mauris elementum eu diam id vestibulum.











Etiam eleifend metus nisi, ac laoreet nibh tincidunt id. In vel auctor magna, nec porta arcu. Morbi eget mattis justo. Fusce vitae auctor erat, at ullamcorper mauris. Ut pharetra vitae eros sed ornare. Quisque in malesuada elit. Nunc at malesuada turpis. Pellentesque at leo congue, faucibus lorem nec, mollis est.[/border][/border][comment]//extra content boxes here//[/comment][/border][/border][/tab]















[comment]tab three[/comment]







[tab=.][border="0px; left: 140px; top: 0; padding: 0; width: 50px; height: 24px; font-family: 'Changa One', cursive; font-size: 18px; line-height: 23px; color: var(--text); text-align: center; position: absolute; z-index: 3; cursor: default;"]3[/border][border=0px; left: 15px; top: 20px; padding: 0; width: calc(100% + 2px); height: calc(70vh - 20px); min-height: 420px; max-height: 470px; overflow: hidden; position: absolute; z-index: 2;][border=0px; padding: 0; padding-right: 18px; width: 100%; height: calc(70vh - 20px); min-height: 420px; max-height: 470px; overflow-y: scroll;][comment]











// content box 4b - combat details //











[/comment][border=1px solid var(--grey); border-radius: 4px; margin-top: 29px; padding: 15px; width: calc(100% - 32px); background: var(--bgcolor); position: relative;][border="1px solid var(--grey); border-radius: 4px; display: inline-block; right: 20px; top: -10px; padding: 3px 10px 2px; background: var(--bgcolor); font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute;"]combat notes[/border][comment]











// stats //











[/comment][Row][Column=span2][comment]



//    NIN NAME  //



[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;"]nin[/border][/border][comment]



//  NIN  # //



[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--grey); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;"]#[/border][/border][comment]



//  STR NAME //



[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;"]str[/border][/border][comment]



//  STR # //



[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--grey); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;"]#[/border][/border][/Column][comment]
[/comment][Column=span2][comment]



//  TAI NAME //



[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;"]tai[/border][/border][comment]



//  TAI # //



[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--grey); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;"]#[/border][/border][comment]



//  SPD NAME //



[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;"]spd[/border][/border][comment]



//  SPD # //



[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--grey); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;"]#[/border][/border][/Column][comment]
[/comment][Column=span2][comment]



//  GEN NAME //



[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;"]gen[/border][/border][comment]



//  GEN # //



[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--grey); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;"]#[/border][/border][comment]



//  STM NAME //



[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;"]stm[/border][/border][comment]



// STM # //



[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--grey); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;"]#[/border][/border][/Column][comment]
[/comment][Column=span2][comment]



// INT NAME //



[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;"]int[/border][/border][comment]



//  INT # //



[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--grey); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;"]#[/border][/border][comment]



//  SEA NAME //



[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;"]sea[/border][/border][comment]



//  SEA # //



[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border="0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--grey); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: uppercase;"]#[/border][/border][/Column][/Row][comment]











// combat details //











[/comment][border="0px; margin-top: 15px; padding: 0; font-family: 'Abel', sans-serif; font-size: 1.0em; line-height: 125%; color: var(--text); text-align: justify;"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed. Donec nec nibh bibendum, pharetra nunc sed, placerat purus. Nulla a ligula lobortis, condimentum lacus eu, efficitur justo. Donec vitae volutpat odio, sed tincidunt enim. Suspendisse at ante sit amet libero blandit dapibus non in turpis. Vestibulum pharetra feugiat lacus a pulvinar. Nullam eget hendrerit dolor, vitae sagittis lacus. Vestibulum lacinia ex et lectus porta iaculis. Suspendisse interdum a nunc vitae egestas. Aliquam dignissim hendrerit leo sit amet sagittis. Vivamus eget ipsum vitae tellus facilisis aliquet. Mauris elementum eu diam id vestibulum.











Etiam eleifend metus nisi, ac laoreet nibh tincidunt id. In vel auctor magna, nec porta arcu. Morbi eget mattis justo. Fusce vitae auctor erat, at ullamcorper mauris. Ut pharetra vitae eros sed ornare. Quisque in malesuada elit. Nunc at malesuada turpis. Pellentesque at leo congue, faucibus lorem nec, mollis est.[/border][/border][comment]











// content box 5 - abilities //











[/comment][border=1px solid var(--grey); border-radius: 4px; margin-top: 9px; padding: 15px; width: calc(100% - 32px); background: var(--bgcolor); position: relative;][border="1px solid var(--grey); border-radius: 4px; display: inline-block; right: 20px; top: -10px; padding: 3px 10px 2px; background: var(--bgcolor); font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute;"]jutsus[/border][comment]











// power descriptions //











[/comment][border="0px; padding: 0; font-family: 'Abel', sans-serif; font-size: 1.0em; line-height: 125%; color: var(--text); text-align: justify;"][comment]











// ability 1 //











[/comment][border=0px; display: flex; flex-flow: row wrap; margin-left: -15px; padding: 0; width: calc(100% + 15px);][border=0px; margin-left: 15px; padding: 0; flex: 1; width: 100%; min-width: 75px; color: var(--accent); font-weight: 700; text-align: left; text-transform: uppercase;]Ability One[/border][border=0px; margin-left: 15px; padding: 0; flex: 5; width: 100%; min-width: 150px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed. Donec nec nibh bibendum, pharetra nunc sed, placerat purus. Nulla a ligula lobortis, condimentum lacus eu, efficitur justo. Donec vitae volutpat odio, sed tincidunt enim. Suspendisse at ante sit amet libero blandit dapibus non in turpis. Vestibulum pharetra feugiat lacus a pulvinar. Nullam eget hendrerit dolor, vitae sagittis lacus. Vestibulum lacinia ex et lectus porta iaculis. Suspendisse interdum a nunc vitae egestas. Aliquam dignissim hendrerit leo sit amet sagittis. Vivamus eget ipsum vitae tellus facilisis aliquet. Mauris elementum eu diam id vestibulum.











Etiam eleifend metus nisi, ac laoreet nibh tincidunt id. In vel auctor magna, nec porta arcu. Morbi eget mattis justo. Fusce vitae auctor erat, at ullamcorper mauris. Ut pharetra vitae eros sed ornare. Quisque in malesuada elit. Nunc at malesuada turpis. Pellentesque at leo congue, faucibus lorem nec, mollis est.[/border][/border][comment]











// ability 2 //











[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 25px; margin-left: -15px; padding: 0; width: calc(100% + 15px);][border=0px; margin-left: 15px; padding: 0; flex: 1; width: 100%; min-width: 75px; color: var(--accent); font-weight: 700; text-align: left; text-transform: uppercase;]Ability Two[/border][border=0px; margin-left: 15px; padding: 0; flex: 5; width: 100%; min-width: 150px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed. Donec nec nibh bibendum, pharetra nunc sed, placerat purus. Nulla a ligula lobortis, condimentum lacus eu, efficitur justo. Donec vitae volutpat odio, sed tincidunt enim. Suspendisse at ante sit amet libero blandit dapibus non in turpis. Vestibulum pharetra feugiat lacus a pulvinar. Nullam eget hendrerit dolor, vitae sagittis lacus. Vestibulum lacinia ex et lectus porta iaculis. Suspendisse interdum a nunc vitae egestas. Aliquam dignissim hendrerit leo sit amet sagittis. Vivamus eget ipsum vitae tellus facilisis aliquet. Mauris elementum eu diam id vestibulum.











Etiam eleifend metus nisi, ac laoreet nibh tincidunt id. In vel auctor magna, nec porta arcu. Morbi eget mattis justo. Fusce vitae auctor erat, at ullamcorper mauris. Ut pharetra vitae eros sed ornare. Quisque in malesuada elit. Nunc at malesuada turpis. Pellentesque at leo congue, faucibus lorem nec, mollis est.[/border][/border][comment]//extra abilities here//[/comment][/border][/border][comment]











// content box 6 - equipment //











[/comment][border=1px solid var(--grey); border-radius: 4px; margin-top: 29px; padding: 15px; width: calc(100% - 32px); background: var(--bgcolor); position: relative;][border="1px solid var(--grey); border-radius: 4px; display: inline-block; right: 20px; top: -10px; padding: 3px 10px 2px; background: var(--bgcolor); font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute;"]equipment[/border][comment]











// equipment descriptions //











[/comment][border="0px; padding: 0; font-family: 'Abel', sans-serif; font-size: 1.0em; line-height: 125%; color: var(--text); text-align: justify;"][comment]











// equip 1 //











[/comment][border=0px; display: flex; flex-flow: row wrap; margin-left: -15px; padding: 0; width: calc(100% + 15px);][border=0px; margin-left: 15px; padding: 0; flex: 1; width: 100%; min-width: 75px; color: var(--accent); font-weight: 700; text-align: left; text-transform: uppercase;]Equip 1[/border][border=0px; margin-left: 15px; padding: 0; flex: 5; width: 100%; min-width: 150px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed. Donec nec nibh bibendum, pharetra nunc sed, placerat purus. Nulla a ligula lobortis, condimentum lacus eu, efficitur justo. Donec vitae volutpat odio, sed tincidunt enim. Suspendisse at ante sit amet libero blandit dapibus non in turpis. Vestibulum pharetra feugiat lacus a pulvinar. Nullam eget hendrerit dolor, vitae sagittis lacus. Vestibulum lacinia ex et lectus porta iaculis. Suspendisse interdum a nunc vitae egestas. Aliquam dignissim hendrerit leo sit amet sagittis. Vivamus eget ipsum vitae tellus facilisis aliquet. Mauris elementum eu diam id vestibulum.











Etiam eleifend metus nisi, ac laoreet nibh tincidunt id. In vel auctor magna, nec porta arcu. Morbi eget mattis justo. Fusce vitae auctor erat, at ullamcorper mauris. Ut pharetra vitae eros sed ornare. Quisque in malesuada elit. Nunc at malesuada turpis. Pellentesque at leo congue, faucibus lorem nec, mollis est.[/border][/border][comment]//extra weapons/equips here//[/comment][/border][/border][comment]//extra content boxes here//[/comment][/border][/border][/tab]















[comment]tab four[/comment]







[tab=.][border="0px; left: 200px; top: 0; padding: 0; width: 50px; height: 24px; font-family: 'Changa One', cursive; font-size: 18px; line-height: 23px; color: var(--text); text-align: center; position: absolute; z-index: 3; cursor: default;"]4[/border][border=0px; left: 15px; top: 20px; padding: 0; width: calc(100% + 2px); height: calc(70vh - 20px); min-height: 420px; max-height: 470px; overflow: hidden; position: absolute; z-index: 2;][border=0px; padding: 0; padding-right: 18px; width: 100%; height: calc(70vh - 20px); min-height: 420px; max-height: 470px; overflow-y: scroll;][comment]











// content box 7 - extras/notes //











[/comment][border=1px solid var(--grey); border-radius: 4px; margin-top: 9px; padding: 15px; width: calc(100% - 32px); background: var(--bgcolor); position: relative;][border="1px solid var(--grey); border-radius: 4px; display: inline-block; right: 20px; top: -10px; padding: 3px 10px 2px; background: var(--bgcolor); font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute;"]extra[/border][comment]











// extras //











[/comment][border="0px; padding: 0; font-family: 'Abel', sans-serif; font-size: 1.0em; line-height: 125%; color: var(--text); text-align: justify;"][comment]











// likes //











[/comment][border=0px; display: flex; flex-flow: row wrap; margin-left: -5px; padding: 0; width: calc(100% + 5px);][border=0px; margin-left: 5px; padding: 0; flex: 1; width: 100%; min-width: 60px; color: var(--accent); font-weight: 700; text-align: left; text-transform: uppercase;]Likes[/border][border=0px; margin-left: 5px; padding: 0; flex: 9; width: 100%; min-width: 150px;]Item one, Item two, Item three, Item four, Etc[/border][/border][comment]











// dislikes //











[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 20px; margin-left: -5px; padding: 0; width: calc(100% + 5px);][border=0px; margin-left: 5px; padding: 0; flex: 1; width: 100%; min-width: 60px; color: var(--accent); font-weight: 700; text-align: left; text-transform: uppercase;]Dislikes[/border][border=0px; margin-left: 5px; padding: 0; flex: 9; width: 100%; min-width: 150px;]Item one, Item two, Item three, Item four, Etc[/border][/border][comment]











// note 1 //











[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 20px; margin-left: -5px; padding: 0; width: calc(100% + 5px);][border=0px; margin-left: 5px; padding: 0; flex: 1; width: 100%; min-width: 40px; color: var(--accent); font-weight: 700; text-align: left; text-transform: uppercase;]001.[/border][border=0px; margin-left: 5px; padding: 0; flex: 10; width: 100%; min-width: 150px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed.[/border][/border][comment]











// note 2 //











[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 20px; margin-left: -5px; padding: 0; width: calc(100% + 5px);][border=0px; margin-left: 5px; padding: 0; flex: 1; width: 100%; min-width: 40px; color: var(--accent); font-weight: 700; text-align: left; text-transform: uppercase;]002.[/border][border=0px; margin-left: 5px; padding: 0; flex: 10; width: 100%; min-width: 150px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed.[/border][/border][comment]











// note 3 //











[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 20px; margin-left: -5px; padding: 0; width: calc(100% + 5px);][border=0px; margin-left: 5px; padding: 0; flex: 1; width: 100%; min-width: 40px; color: var(--accent); font-weight: 700; text-align: left; text-transform: uppercase;]003.[/border][border=0px; margin-left: 5px; padding: 0; flex: 10; width: 100%; min-width: 150px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed.[/border][/border][comment] // extra notes here //[/comment][/border][/border][comment]//extra content boxes here//[/comment][/border][/border][/tab]











[/tabs][/border][/border][/border][border=0px; right: -1px; bottom: -1px; padding: 0; width: 150px; height: 150px; clip-path: polygon(100% 0, 0% 100%, 100% 100%); background: var(--accent); position: absolute; z-index: 1; pointer-events: none;][/border][/border][comment]//end of code//[/comment][border=0px; margin: 5px auto 0; padding: 0; width: 100%; max-width: 700px; font-size: .6em; text-align: center; text-transform: uppercase; opacity: .7;]code by [USER=20950]@Nano[/USER][/border][/border]
Click to expand...
Thank you so much for the help! To be sure I understand, the reason there was those big gaps between lines was because I had seperated them into their own lines / with line breaks in the code, when normally it should all be on one line? I'm still very new to coding and barely code my own additions to the freebies I use, so I'm very unfamiliar with how it all works. I assumed I needed to put them on separate lines so they would appear that way in the final.
 
You must log in or register to reply here.

Users who are viewing this thread

Total: 2 (members: 0, guests: 2)

Similar threads

StardustTroubadour
Help I am looking for a sci-fi template.
Replies
2
Views
167
StardustTroubadour
StardustTroubadour
Darkbloom
Help Need help!
Replies
3
Views
72
GrandAdmiralJello
GrandAdmiralJello
Back
Top