[nospaces][googlefont=Roboto:400,700|Montserrat:200,400|Montserrat+Alternates:300|Open+Sans:400|Source+Sans+Pro:700]
[attr="class","reolContain"]
[attr="class","reolHeader"]
[attr="class","reolButton"]
[attr="class","th th-bookmark-1-o"]
[attr="class","reolBody"]
header one
header two is a mini-title for info or prettiness. you can delete it if you hate it
normal text looks like this. also, you can swap out the icon in the span class for each separate page (so a face for face claims, a book for plot, et cetera) if you want, it'll look nice. grab the link to honeybee icons below.
header 3 is a subtitle
blockquotes do a, well...blockquote. they're designed for lists of canons, faces, et cetera. [break][break]
SERIES, character as @selkie [break]
SERIES, character as @tagged. use italics for reservations [break]
SERIES, character as @tagged [break]
SERIES, character as @tagged [break]
SERIES, character as @tagged [break]
header 3 is a subtitle
header 4 is a bulletpoint. use it for rules, mostly? or anything else you use multi-lines bullet for, i guess. if you want to change the hashtag symbol to something else, change \e42f in .reolbody h4:before to the wanted icon's unicode found on honeybee's site.
[attr="class","reolCredit"]
SELKIE[newclass=.reolContain] --reolAccent:#7B9AFD; [/newclass]
[newclass=.reolContain] width:500px; background-color:#eee; margin:10px; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25); position:relative; [/newclass]
[newclass=.reolHeader] display:flex; flex-flow:column nowrap; [/newclass]
[newclass=.reolHeader img:first-child] width:500px; height:250px; filter:grayscale(100%) contrast(250%); [/newclass]
[newclass=.reolHeader:after] content:''; width:500px; height:250px; position:absolute; top:0px; left:0px; background-color: var(--reolAccent); opacity:.75; [/newclass]
[newclass=.reolButton] width:70px; height:70px; background-color:#f8f8f8; margin-top:-35px; position:relative; border-radius:100%; z-index:1; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25); [/newclass]
[newclass=.reolButton span] font-size:33px; width:70px; height:70px; display:flex; align-items:center; justify-content:center; color:var(--reolAccent); transition:.25s ease; [/newclass]
[newclass=.reolBody] padding:25px 25px 25px 25px; [/newclass]
[newclass=.reolBody h1] margin:0px 0px; height:35px; display:flex; align-items:center; justify-content:center; font:200 35px/35px montserrat; color:var(--reolAccent); text-shadow: -1px -1px 0 #fafafa, 1px -1px 0 #fafafa, -1px 1px 0 #fafafa, 1px 1px 0 #fafafa; [/newclass]
[newclass=.reolBody h1:before] content:''; height:1px; flex-grow:1; margin-right:10px; background-color:var(--reolAccent); border:1px solid #fafafa; [/newclass]
[newclass=.reolBody h1:after] content:''; height:1px; flex-grow:1; margin-left:10px; background-color:var(--reolAccent); border:1px solid #fafafa; [/newclass]
[newclass=.reolBody h2] margin:0px; font:700 8px source sans pro; color:#bbb; text-transform:uppercase; text-align:center; [/newclass]
[newclass=.reolBody h3] margin:10px; height:25px; font:300 25px/25px montserrat alternates; color:#bababa; text-shadow: -1px -1px 0 #fafafa, 1px -1px 0 #fafafa, -1px 1px 0 #fafafa, 1px 1px 0 #fafafa; [/newclass]
[newclass=.reolBody h4] margin:0px 10px 0px 0px; display:block; min-height:45px; font:11px/15px roboto; margin-top:10px; [/newclass]
[newclass=.reolBody h4:before] content: '\eaf7'; float: left; width: 45px; height: 37px; overflow: hidden; display: flex; align-items: flex-start; justify-content: center; font: 40px 'Honeybee'; color: var(--reolAccent); margin-right: 10px; margin-top: 5px; border-bottom: 1px solid #ccc;[/newclass]
[newclass=.reolBody div] padding:25px; font:400 11px/15px roboto; color:#7a7a7a; text-align:justify; [/newclass]
[newclass=.reolBody div b] font:700 11px/14px roboto; color:var(--reolAccent); text-shadow: -1px -1px 0 #fafafa, 1px -1px 0 #fafafa, -1px 1px 0 #fafafa, 1px 1px 0 #fafafa; [/newclass]
[newclass=.reolBody div i] color:#aaa; [/newclass]
[newclass=.reolBody div blockquote] margin:0px; padding:0px 25px; [/newclass]
[newclass=.reolBody div a] text-shadow: -1px -1px 0 #fafafa, 1px -1px 0 #fafafa, -1px 1px 0 #fafafa, 1px 1px 0 #fafafa; [/newclass]
[newclass=.reolBody code] display:flex!important; align-items:center; justify-content:center; margin:0px!important; width:328px!important; height:auto!important; border:1px solid #ccc!important; padding:10px!important; font:400 10px open sans!important; color:#7a7a7a; background-color:#ddd!important; margin: 0 auto!important;[/newclass]
[newclass=.reolBody button]display:none!important;[/newclass]
[newclass=.reolCredit] font:bold 7px roboto; margin-left:450px; margin-top:-10px; [/newclass]
[newclass=.reolCredit a] font:bold 7px roboto!important; [/newclass]
[newclass=.reolContain .th]font-family: "honeybee" !important;font-style: normal !important;font-weight: normal !important;font-variant: normal !important;text-transform: none !important;speak: none;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; } @font-face { font-family: "honeybee";src:url("//dl.dropbox.com/s/7v31tyaf53kmcv7/honeybee.eot");src:url("//dl.dropbox.com/s/7v31tyaf53kmcv7/honeybee.eot?#iefix") format("embedded-opentype"),url("//dl.dropbox.com/s/awr1gt01c87aaxi/honeybee.woff") format("woff"),url("//dl.dropbox.com/s/hru9ka6dgfcgjg1/honeybee.ttf") format("truetype"),url("//dl.dropbox.com/s/xylorgamsf6fthx/honeybee.svg#honeybee") format("svg");font-weight: normal;font-style: normal;[/newclass]
[newclass=.th-bookmark-1-o:before]content: "\e91b"; font-family: "honeybee";[/newclass]
