[nobr]
[div class="emain"]
[div class="ewrap"]
[div class="eicon"]
[/div]
[div class="edescription"]
[div class="esubheader"]
Act 05: Versus
[/div]
[div class="etext"]
Decided to make a 2 character format for characters whose CSs I never got to complete in an RP by [USER=23601]@Aster[/USER] (hope you don't mind the tag). This was...a bit disappointing? I nearly had an aneurysm between keeping everything mobile friendly and trying to keep everything transitioning smoothly at the same time, so I feel like the results were a tad underwhelming for all that trouble. ; w ;
[br][/br][br][/br]
Anyway! The colors for this code are all extremely easy to change (edit them once in the "root" and it'll change them throughout the code) and all images are located directly in the CS, so there's no need to dig through the messy CSS portion! Please just make sure to insert the "spacer"/"triviaspacer" and line-breaks accordingly. Additionally, if there's still something funky going around or breaking, please inform me! Your feedback is greatly appreciated~
[br][/br][br][/br]
Update (4/03/2020): A friend mentioned the "top" button being too subtle, so I just did a quick edit so that you can press either the main image or "top" to revert it back to the 2 character screen.
[/div]
[div class="etags"]
[URL=https://pastebin.com/Jry4v8vj]CODE LINK[/URL][br][/br]
mobile friendly | character sheet | 2 character format | 4 tabs | scroll | nobr
[/div]
[/div]
[/div]
[/div]
[comment]
[font=Roboto].[/font]
[font=Roboto Condensed].[/font]
[/comment]
[class name="emain"]
box-sizing: border-box;
margin: 0 auto 50px;
padding: 20px;
width: calc(100% - 40px);
max-width: 600px;
font-size: initial;
background: #fdfdfd;
border: 1px solid #eaeaea;
[/class]
[class name="ewrap"]
display: flex;
flex-flow: row wrap;
margin-left: -20px;
width: calc(100% + 20px);
[/class]
[class name="eicon"]
flex: 1 0 150px;
margin-left: 20px;
width: 100%;
max-width: 150px;
max-height: 150px;
background: url('https://dl.dropboxusercontent.com/s/6y45o6wdebuq8qe/EmmaIcon.jpg') top left/150px 225px no-repeat;
[/class]
[class name="edescription"]
flex: 5 0 200px;
margin-left: 20px;
max-width: 400px;
[/class]
[class name="esubheader"]
font-family: 'Roboto Condensed', sans-serif;
font-size: 1.0em;
color: #777777;
font-weight: bold;
text-transform: uppercase;
[/class]
[class name="etext"]
margin-top: 10px;
font-family: 'Roboto', sans-serif;
font-size: 0.9em;
color: #777777;
line-height: 135%;
text-align: justify;
[/class]
[class name="etags"]
margin-top: 10px;
font-family: 'Roboto', sans-serif;
font-size: 0.8em;
line-height: 125%;
color: #777777;
text-align: justify;
[/class]
[comment]
Designed and coded by Nano.
Please do not remove the credits or claim the code as your own work.
Asking for permission before use is very much appreciated!
Image Sources:
Shinrei Tantei Yakumo
hen-tie (artist)
[/comment]
[comment]--------------------CS Details--------------------[/comment]
[div class="root"]
[div class="shell"]
[div class="fullbg"]
[div class="placeholder"]
[div class="placeholderA"]
[/div]
[div class="placeholderB"]
[/div]
[/div]
[/div]
[comment]---------- cover/landing page ----------[/comment]
[div class="RIGHTimg" style="background: url('https://i.imgur.com/a6FZf6e.jpg') right top/900px 600px no-repeat;"]
[/div]
[div class="LEFTdivider"]
[div class="LEFTimg" style="background: url('https://i.imgur.com/fR5peKI.jpg') center top/900px 600px no-repeat;"]
[/div]
[/div]
[div class="bannerpos"]
[div class="bannerwrap"]
[div class="nameplate"]
[div class="line"]
[/div]
[div class="name"]
[div=display: inline-block; visibility: hidden;].[/div]sette durante[div=display: inline-block; visibility: hidden;]x[/div]
[/div]
[/div]
[div class="banner7 hoveron7 hoveroff7 select7" style="background: url('https://i.imgur.com/IL2S2yL.jpg') 15% 100%/450px 150px no-repeat;"]
[/div]
[div class="bannerS hoveronS hoveroffS selectS" style="background: url('https://i.imgur.com/HSYpy17.jpg') 65% 0%/450px 150px no-repeat;"]
[/div]
[div class="nameplate"]
[div class="name"]
[div=display: inline-block; visibility: hidden;]x[/div]spica sokolova[div=display: inline-block; visibility: hidden;].[/div]
[/div]
[div class="line"]
[/div]
[/div]
[/div]
[/div]
[comment]---------- Character 1 CS starts here ----------[/comment]
[div class="CSwrap7"]
[div class="SetteWrap"]
[div class="SetteRight"]
[div class="MainWrap" style="border: 1px solid var(--border1);"]
[div class="MainIMG deselect7" style="background: url('https://i.imgur.com/TYNMvrx.jpg') center top/470px 470px no-repeat;"]
[/div]
[div class="SetteTabWrap"]
[div class="tabwrap7"]
[div class="home7 deselect7"]
top
[/div]
[div class="tabs7 settemaintabs7 tabselect7"][div=display: none;]settemain#[/div]
main
[/div]
[div class="tabs7 settestorytabs7"][div=display: none;]settestory#[/div]
story
[/div]
[div class="tabs7 setteskillstabs7"][div=display: none;]setteskills#[/div]
skills
[/div]
[div class="tabs7 setteextratabs7"][div=display: none;]setteextra#[/div]
extra
[/div]
[/div]
[/div]
[/div]
[/div]
[div class="SetteLeft"]
[div class="SetteContentWrap"]
[div class="content7 settemaininfo7"]
[div class="scrollbox"]
[div class="settebox"]
[div class="topcover7"]
[/div]
[div class="listwrap7"]
[div class="question7"]
name
[/div]
[div class="answer7"]
sette durante
[/div]
[/div]
[div class="listwrap7"]
[div class="question7"]
age
[/div]
[div class="answer7"]
nineteen
[/div]
[/div]
[div class="listwrap7"]
[div class="question7"]
position
[/div]
[div class="answer7"]
student
[/div]
[/div]
[div class="listwrap7"]
[div class="question7"]
gender
[/div]
[div class="answer7"]
male
[/div]
[/div]
[div class="listwrap7"]
[div class="question7"]
sexuality
[/div]
[div class="answer7"]
...
[/div]
[/div]
[div class="listwrap7"]
[div class="question7"]
affiliation
[/div]
[div class="answer7"]
genesis
[/div]
[/div]
[div class="listwrap7"]
[div class="question7"]
status
[/div]
[div class="answer7"]
initiated
[/div]
[/div]
[div class="bottomcover7"]
[/div]
[/div]
[div class="spacer"]
[/div]
[div class="setteheader"]
appearance
[/div]
[div class="settebody"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus viverra venenatis turpis varius maximus. Integer a orci sit amet enim sagittis sollicitudin quis ut erat. Proin varius convallis libero, eu maximus ligula efficitur sed. In massa mauris, posuere gravida massa et, semper porta dui. Nam tincidunt vestibulum mauris. Pellentesque enim mauris, ultricies sed congue vitae, sagittis vitae ipsum. Donec augue nunc, convallis sed erat id, sollicitudin hendrerit turpis. Ut quis nunc auctor, imperdiet magna ut, mollis felis. Aliquam erat volutpat.
[/div]
[div class="spacer"]
[/div]
[div class="setteheader"]
personality
[/div]
[div class="settebody"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus viverra venenatis turpis varius maximus. Integer a orci sit amet enim sagittis sollicitudin quis ut erat. Proin varius convallis libero, eu maximus ligula efficitur sed. In massa mauris, posuere gravida massa et, semper porta dui. Nam tincidunt vestibulum mauris. Pellentesque enim mauris, ultricies sed congue vitae, sagittis vitae ipsum. Donec augue nunc, convallis sed erat id, sollicitudin hendrerit turpis. Ut quis nunc auctor, imperdiet magna ut, mollis felis. Aliquam erat volutpat.
[br][/br][br][/br]
Suspendisse maximus iaculis ante, et rutrum urna lobortis sed. Praesent elementum sit amet tellus non pretium. Fusce quis diam fringilla, placerat est nec, pulvinar nisl. Etiam mauris ligula, facilisis vitae sapien a, sodales hendrerit dolor. Donec ut justo condimentum, laoreet risus eu, tincidunt metus. Sed pharetra at nulla vitae placerat. Sed mi elit, iaculis in felis sed, facilisis commodo sapien.
[br][/br][br][/br]
[/div]
[/div]
[/div]
[div class="content7 settestoryinfo7 hidecontent7"]
[div class="scrollbox"]
[div class="settebox"]
[div class="topcover7"]
[/div]
[div class="storyimage" style="background: url('https://i.imgur.com/WMhBX6w.jpg') right top/600px 200px no-repeat;"]
[/div]
[div class="bottomcover7"]
[/div]
[/div]
[div class="spacer"]
[/div]
[div class="setteheader"]
backstory
[/div]
[div class="settebody"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus viverra venenatis turpis varius maximus. Integer a orci sit amet enim sagittis sollicitudin quis ut erat. Proin varius convallis libero, eu maximus ligula efficitur sed. In massa mauris, posuere gravida massa et, semper porta dui. Nam tincidunt vestibulum mauris. Pellentesque enim mauris, ultricies sed congue vitae, sagittis vitae ipsum. Donec augue nunc, convallis sed erat id, sollicitudin hendrerit turpis. Ut quis nunc auctor, imperdiet magna ut, mollis felis. Aliquam erat volutpat.
[br][/br][br][/br]
Suspendisse maximus iaculis ante, et rutrum urna lobortis sed. Praesent elementum sit amet tellus non pretium. Fusce quis diam fringilla, placerat est nec, pulvinar nisl. Etiam mauris ligula, facilisis vitae sapien a, sodales hendrerit dolor. Donec ut justo condimentum, laoreet risus eu, tincidunt metus. Sed pharetra at nulla vitae placerat. Sed mi elit, iaculis in felis sed, facilisis commodo sapien.
[br][/br][br][/br]
Nullam rhoncus, nisi eget suscipit tincidunt, odio erat tristique nisi, aliquet posuere eros mauris nec eros. Nulla aliquet tortor in diam tempus, eget tincidunt augue gravida. Maecenas eu nunc eu libero cursus egestas sed sed turpis. Pellentesque erat odio, molestie sit amet ante quis, feugiat faucibus tellus. Maecenas in luctus nibh.
[br][/br][br][/br]
[/div]
[/div]
[/div]
[div class="content7 setteskillsinfo7 hidecontent7"]
[div class="scrollbox"]
[div class="settebox"]
[div class="topcover7"]
[/div]
[div class="listwrap7"]
[div class="question7"]
anima
[/div]
[div class="answer7"]
reset (arcane)
[/div]
[/div]
[div class="listwrap7"]
[div class="question7"]
insignia
[/div]
[div class="answer7"]
right collarbone
[/div]
[/div]
[div class="listwrap7"]
[div class="question7"]
regalia
[/div]
[div class="answer7"]
pocket watch
[/div]
[/div]
[div class="listwrap7"]
[div class="question7"]
weaponry
[/div]
[div class="answer7"]
???
[/div]
[/div]
[div class="bottomcover7"]
[/div]
[/div]
[div class="spacer"]
[/div]
[div class="setteheader"]
anima
[/div]
[div class="settebody"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus viverra venenatis turpis varius maximus. Integer a orci sit amet enim sagittis sollicitudin quis ut erat. Proin varius convallis libero, eu maximus ligula efficitur sed. In massa mauris, posuere gravida massa et, semper porta dui. Nam tincidunt vestibulum mauris. Pellentesque enim mauris, ultricies sed congue vitae, sagittis vitae ipsum. Donec augue nunc, convallis sed erat id, sollicitudin hendrerit turpis. Ut quis nunc auctor, imperdiet magna ut, mollis felis. Aliquam erat volutpat.
[/div]
[div class="spacer"]
[/div]
[div class="setteheader"]
weaknesses
[/div]
[div class="settebody"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus viverra venenatis turpis varius maximus. Integer a orci sit amet enim sagittis sollicitudin quis ut erat. Proin varius convallis libero, eu maximus ligula efficitur sed. In massa mauris, posuere gravida massa et, semper porta dui. Nam tincidunt vestibulum mauris. Pellentesque enim mauris, ultricies sed congue vitae, sagittis vitae ipsum. Donec augue nunc, convallis sed erat id, sollicitudin hendrerit turpis. Ut quis nunc auctor, imperdiet magna ut, mollis felis. Aliquam erat volutpat.
[br][/br][br][/br]
[/div]
[/div]
[/div]
[div class="content7 setteextrainfo7 hidecontent7"]
[div class="scrollbox"]
[div class="setteheader"]
trivia
[/div]
[div class="listwrap7"]
[div class="topic7"]
likes:
[/div]
[div class="description7"]
instant food, plain bread, old buildings, literature, games, orderly workspaces, naps
[/div]
[/div]
[div class="triviaspacer"]
[/div]
[div class="listwrap7"]
[div class="topic7"]
dislikes:
[/div]
[div class="description7"]
his anima, sadists, training, sugar, leeks, mirrors, being praised
[/div]
[/div]
[div class="triviaspacer"]
[/div]
[div class="listwrap7"]
[div class="topic7"]
topic:
[/div]
[div class="description7"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus viverra venenatis turpis varius maximus. Integer a orci sit amet enim sagittis sollicitudin quis ut erat.
[/div]
[/div]
[br][/br][br][/br]
[/div]
[/div]
[/div]
[/div]
[/div]
[/div]
[comment]---------- Character 1 CS ends here ----------[/comment]
[comment]---------- Character 2 CS starts here ----------[/comment]
[div class="CSwrapS"]
[div class="SpicaWrap"]
[div class="SpicaLeft"]
[div class="MainWrap" style="border: 1px solid var(--border2);"]
[div class="MainIMG deselectS" style="background: url('https://i.imgur.com/noav5BV.jpg') center top/470px 470px no-repeat;"]
[/div]
[div class="SpicaTabWrap"]
[div class="tabwrapS"]
[div class="homeS deselectS"]
top
[/div]
[div class="tabsS spicamaintabsS tabselectS"][div=display: none;]spicamain#[/div]
main
[/div]
[div class="tabsS spicastorytabsS"][div=display: none;]spicastory#[/div]
story
[/div]
[div class="tabsS spicaskillstabsS"][div=display: none;]spicaskills#[/div]
skills
[/div]
[div class="tabsS spicaextratabsS"][div=display: none;]spicaextra#[/div]
extra
[/div]
[/div]
[/div]
[/div]
[/div]
[div class="SpicaRight"]
[div class="SpicaContentWrap"]
[div class="contentS spicamaininfoS"]
[div class="scrollbox"]
[div class="spicabox"]
[div class="topcoverS"]
[/div]
[div class="listwrapS"]
[div class="questionS"]
name
[/div]
[div class="answerS"]
spica sokolova
[/div]
[/div]
[div class="listwrapS"]
[div class="questionS"]
age
[/div]
[div class="answerS"]
sixteen
[/div]
[/div]
[div class="listwrapS"]
[div class="questionS"]
position
[/div]
[div class="answerS"]
student
[/div]
[/div]
[div class="listwrapS"]
[div class="questionS"]
gender
[/div]
[div class="answerS"]
female
[/div]
[/div]
[div class="listwrapS"]
[div class="questionS"]
sexuality
[/div]
[div class="answerS"]
¯\_(ツ)_/¯
[/div]
[/div]
[div class="listwrapS"]
[div class="questionS"]
affiliation
[/div]
[div class="answerS"]
pandora
[/div]
[/div]
[div class="listwrapS"]
[div class="questionS"]
status
[/div]
[div class="answerS"]
initiated
[/div]
[/div]
[div class="bottomcoverS"]
[/div]
[/div]
[div class="spacer"]
[/div]
[div class="spicaheader"]
appearance
[/div]
[div class="spicabody"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus viverra venenatis turpis varius maximus. Integer a orci sit amet enim sagittis sollicitudin quis ut erat. Proin varius convallis libero, eu maximus ligula efficitur sed. In massa mauris, posuere gravida massa et, semper porta dui. Nam tincidunt vestibulum mauris. Pellentesque enim mauris, ultricies sed congue vitae, sagittis vitae ipsum. Donec augue nunc, convallis sed erat id, sollicitudin hendrerit turpis. Ut quis nunc auctor, imperdiet magna ut, mollis felis. Aliquam erat volutpat.
[/div]
[div class="spacer"]
[/div]
[div class="spicaheader"]
personality
[/div]
[div class="spicabody"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus viverra venenatis turpis varius maximus. Integer a orci sit amet enim sagittis sollicitudin quis ut erat. Proin varius convallis libero, eu maximus ligula efficitur sed. In massa mauris, posuere gravida massa et, semper porta dui. Nam tincidunt vestibulum mauris. Pellentesque enim mauris, ultricies sed congue vitae, sagittis vitae ipsum. Donec augue nunc, convallis sed erat id, sollicitudin hendrerit turpis. Ut quis nunc auctor, imperdiet magna ut, mollis felis. Aliquam erat volutpat.
[br][/br][br][/br]
Suspendisse maximus iaculis ante, et rutrum urna lobortis sed. Praesent elementum sit amet tellus non pretium. Fusce quis diam fringilla, placerat est nec, pulvinar nisl. Etiam mauris ligula, facilisis vitae sapien a, sodales hendrerit dolor. Donec ut justo condimentum, laoreet risus eu, tincidunt metus. Sed pharetra at nulla vitae placerat. Sed mi elit, iaculis in felis sed, facilisis commodo sapien.
[br][/br][br][/br]
[/div]
[/div]
[/div]
[div class="contentS spicastoryinfoS hidecontentS"]
[div class="scrollbox"]
[div class="spicabox"]
[div class="topcoverS"]
[/div]
[div class="storyimage" style="background: url('https://i.imgur.com/edUxCeL.jpg') center top/600px 200px no-repeat;"]
[/div]
[div class="bottomcoverS"]
[/div]
[/div]
[div class="spacer"]
[/div]
[div class="spicaheader"]
backstory
[/div]
[div class="spicabody"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus viverra venenatis turpis varius maximus. Integer a orci sit amet enim sagittis sollicitudin quis ut erat. Proin varius convallis libero, eu maximus ligula efficitur sed. In massa mauris, posuere gravida massa et, semper porta dui. Nam tincidunt vestibulum mauris. Pellentesque enim mauris, ultricies sed congue vitae, sagittis vitae ipsum. Donec augue nunc, convallis sed erat id, sollicitudin hendrerit turpis. Ut quis nunc auctor, imperdiet magna ut, mollis felis. Aliquam erat volutpat.
[br][/br][br][/br]
Suspendisse maximus iaculis ante, et rutrum urna lobortis sed. Praesent elementum sit amet tellus non pretium. Fusce quis diam fringilla, placerat est nec, pulvinar nisl. Etiam mauris ligula, facilisis vitae sapien a, sodales hendrerit dolor. Donec ut justo condimentum, laoreet risus eu, tincidunt metus. Sed pharetra at nulla vitae placerat. Sed mi elit, iaculis in felis sed, facilisis commodo sapien.
[br][/br][br][/br]
Nullam rhoncus, nisi eget suscipit tincidunt, odio erat tristique nisi, aliquet posuere eros mauris nec eros. Nulla aliquet tortor in diam tempus, eget tincidunt augue gravida. Maecenas eu nunc eu libero cursus egestas sed sed turpis. Pellentesque erat odio, molestie sit amet ante quis, feugiat faucibus tellus. Maecenas in luctus nibh.
[br][/br][br][/br]
[/div]
[/div]
[/div]
[div class="contentS spicaskillsinfoS hidecontentS"]
[div class="scrollbox"]
[div class="spicabox"]
[div class="topcoverS"]
[/div]
[div class="listwrapS"]
[div class="questionS"]
anima
[/div]
[div class="answerS"]
acceleration (arcane)
[/div]
[/div]
[div class="listwrapS"]
[div class="questionS"]
insignia
[/div]
[div class="answerS"]
nape
[/div]
[/div]
[div class="listwrapS"]
[div class="questionS"]
regalia
[/div]
[div class="answerS"]
???
[/div]
[/div]
[div class="listwrapS"]
[div class="questionS"]
weaponry
[/div]
[div class="answerS"]
various
[/div]
[/div]
[div class="bottomcoverS"]
[/div]
[/div]
[div class="spacer"]
[/div]
[div class="spicaheader"]
anima
[/div]
[div class="spicabody"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus viverra venenatis turpis varius maximus. Integer a orci sit amet enim sagittis sollicitudin quis ut erat. Proin varius convallis libero, eu maximus ligula efficitur sed. In massa mauris, posuere gravida massa et, semper porta dui. Nam tincidunt vestibulum mauris. Pellentesque enim mauris, ultricies sed congue vitae, sagittis vitae ipsum. Donec augue nunc, convallis sed erat id, sollicitudin hendrerit turpis. Ut quis nunc auctor, imperdiet magna ut, mollis felis. Aliquam erat volutpat.
[/div]
[div class="spacer"]
[/div]
[div class="spicaheader"]
weaknesses
[/div]
[div class="spicabody"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus viverra venenatis turpis varius maximus. Integer a orci sit amet enim sagittis sollicitudin quis ut erat. Proin varius convallis libero, eu maximus ligula efficitur sed. In massa mauris, posuere gravida massa et, semper porta dui. Nam tincidunt vestibulum mauris. Pellentesque enim mauris, ultricies sed congue vitae, sagittis vitae ipsum. Donec augue nunc, convallis sed erat id, sollicitudin hendrerit turpis. Ut quis nunc auctor, imperdiet magna ut, mollis felis. Aliquam erat volutpat.
[br][/br][br][/br]
[/div]
[/div]
[/div]
[div class="contentS spicaextrainfoS hidecontentS"]
[div class="scrollbox"]
[div class="spicaheader"]
trivia
[/div]
[div class="listwrapS"]
[div class="topicS"]
likes:
[/div]
[div class="descriptionS"]
juice, interesting things, bears, collecting bottle caps
[/div]
[/div]
[div class="triviaspacer"]
[/div]
[div class="listwrapS"]
[div class="topicS"]
dislikes:
[/div]
[div class="descriptionS"]
nothing in particular
[/div]
[/div]
[div class="triviaspacer"]
[/div]
[div class="listwrapS"]
[div class="topicS"]
topic:
[/div]
[div class="descriptionS"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus viverra venenatis turpis varius maximus. Integer a orci sit amet enim sagittis sollicitudin quis ut erat.
[/div]
[/div]
[br][/br][br][/br]
[/div]
[/div]
[/div]
[/div]
[/div]
[/div]
[comment]---------- Character 2 CS ends here ----------[/comment]
[/div]
[/div]
[div=margin: -5px auto 25px; width: 100%; max-width: 900px; text-align: right; opacity: 0.5;][size=1]code by [USER=20950]@Nano[/USER][color=transparent]x[/color][/size][/div]
[comment]
[font=Playfair Display]font[/font]
[font=Roboto]font[/font]
[/comment]
[comment]--------------------CSS--------------------[/comment]
[comment]IMPORTANT NOTE: please edit colors through the accents in the "root" (e.g. --bg1, --bg2, etc). If you choose to touch the other divs and break the code, I may offer my assistance, but I am under no obligation to help you fix it if I'm too busy/tired to.[/comment]
[class name="root"]
--bg1: #222222;
--bg2: #fdfdfd;
--line: #cccccc;
--border1: #aaaaaa;
--border2: #dadada;
--color1: #f2f2f2;
--color2: #929292;
--accent1: #9fa4c4;
--accent2: #ffb6c1;
--hfont: 'Playfair Display', serif;
--hsize: 2.0em;
--bfont: 'Roboto', sans-serif;
--bsize: .9em;
[/class]
[class name="shell" minWidth=750px]
margin: 0 auto;
width: 100%;
max-width: 900px;
max-height: 600px;
background: var(--bg2);
position: relative;
font-size: initial;
overflow: hidden;
transition: max-height 1s ease-in-out .3s, width 1s ease-in-out .3s;
[/class]
[class name="shell" maxWidth=749px]
margin: 0 auto;
width: 100%;
max-width: 900px;
max-height: 450px;
background: var(--bg2);
position: relative;
font-size: initial;
overflow: hidden;
transition: max-height 1s ease-in-out .3s, width 1s ease-in-out .3s;
[/class]
[class name="shellexpand" minWidth=750px]
max-height: 1200px;
transition: height 1s ease-in-out 5.3s, max-height 1s ease-in-out 5.3s;
[/class]
[class name="shellexpand" maxWidth=749px]
max-height: 900px;
transition: height 1s ease-in-out 5.3s, max-height 1s ease-in-out 5.3s;
[/class]
[class name="fullbg" minWidth=750px]
width: 0;
max-height: 600px;
background: var(--bg1);
position: absolute;
transition: width 1.7s ease-in-out 1.6s, max-height 1s ease-in-out .3s;
[/class]
[class name="fullbg" maxWidth=749px]
width: 0;
max-height: 450px;
background: var(--bg1);
position: absolute;
transition: width 1.7s ease-in-out 1.6s, max-height 1s ease-in-out .3s;
[/class]
[class name="bgexpand" minWidth=750px]
width: 100%;
max-height: 1200px;
transition: width 1.7s ease-in-out .9s, max-height 1s ease-in-out 5.3s;
[/class]
[class name="bgexpand" maxWidth=749px]
width: 100%;
max-height: 900px;
transition: width 1.7s ease-in-out .9s, max-height 1s ease-in-out 5.3s;
[/class]
[class name="LEFTdivider" minWidth=750px]
left: 0;
width: 75%;
height: 600px;
max-height: 600px;
background: var(--bg1);
overflow: hidden;
clip-path: polygon(0 0, 100% 0%, 30% 100%, 0% 100%);
position: absolute;
transition: left 1.7s ease-in-out 1.5s;
[/class]
[class name="LEFTdivider" maxWidth=749px]
left: 0;
width: 75%;
height: 450px;
max-height: 450px;
background: var(--bg1);
overflow: hidden;
clip-path: polygon(0 0, 100% 0%, 30% 100%, 0% 100%);
position: absolute;
transition: left 1.7s ease-in-out 1.5s;
[/class]
[class name="LEFTslide1"]
left: 100%;
transition: left 1.7s ease-in-out 1s;
[/class]
[class name="RIGHTslide1"]
left: -100%;
transition: left 1.7s ease-in-out 1s;
[/class]
[class name="LEFTimg" minWidth=750px]
width: 100%;
height: 600px;
max-height: 600px;
opacity: 0;
position: absolute;
transition: opacity .7s ease-in-out;
[/class]
[class name="LEFTimg" maxWidth=749px]
width: 100%;
height: 450px;
max-height: 450px;
opacity: 0;
position: absolute;
transition: opacity .7s ease-in-out;
[/class]
[class name="RIGHTimg" minWidth=750px]
width: 100%;
height: 600px;
max-height: 600px;
opacity: 0;
position: absolute;
transition: opacity .7s ease-in-out;
[/class]
[class name="RIGHTimg" maxWidth=749px]
width: 100%;
height: 450px;
max-height: 450px;
opacity: 0;
position: absolute;
transition: opacity .7s ease-in-out;
[/class]
[class name="GETimg"]
opacity: .1;
transition: opacity .7s ease-in-out;
[/class]
[class name="bannerpos" minWidth=750px]
display: flex;
justify-content: center;
align-items: center;
width: 100%;
max-width: 900px;
height: 600px;
max-height: 600px;
position: relative;
z-index: 1;
transition: opacity 1s ease-in-out 3.5s, height .1s ease-in-out 1.3s, max-height .1s ease-in-out 1.3s, width .1s ease-in-out 3.4s;
[/class]
[class name="bannerpos" maxWidth=749px]
display: flex;
justify-content: center;
align-items: center;
width: 100%;
max-width: 900px;
height: 450px;
max-height: 450px;
position: relative;
z-index: 1;
transition: opacity 1s ease-in-out 3.5s, height .1s ease-in-out 1.3s, max-height .1s ease-in-out 1.3s, width .1s ease-in-out 3.4s;
[/class]
[class name="bannerwrap"]
margin: 0 10px;
flex: 1;
max-width: 450px;
width: calc(100% - 20px);
height: 385px;
overflow: hidden;
[/class]
[class name="nameplate"]
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
width: 100%;
height: 25px;
[/class]
[class name="name"]
margin-top: -7px;
flex: 0 1 auto;
height: 20px;
font-family: var(--hfont);
font-size: 25px;
font-weight: bold;
text-transform: lowercase;
line-height: 100%;
color: var(--bg1);
text-shadow:
-1px -1px 1px var(--bg2),
1px -1px 1px var(--bg2),
-1px 1px 1px var(--bg2),
1px 1px 1px var(--bg2);
position: relative;
[/class]
[class name="line"]
margin-top: 5px;
flex: 1;
height: 1px;
background: var(--line);
position: relative;
[/class]
[class name="namefade"]
opacity: 0;
transition: opacity .5s ease-in-out .2s;
[/class]
[class name="banner7"]
top: 0;
right: 0;
margin-top: 10px;
width: 100%;
height: 150px;
filter: grayscale(100%);
transition: filter .7s ease-in-out;
cursor: pointer;
position: relative;
[/class]
[class name="bannerS"]
top: 0;
left: 0;
margin-top: 15px;
margin-bottom: 5px;
width: 100%;
height: 150px;
filter: grayscale(100%);
transition: filter .7s ease-in-out;
cursor: pointer;
position: relative;
[/class]
[class name="bannercolor"]
filter: grayscale(0%);
transition: filter .7s ease-in-out;
[/class]
[class name="bannercolor2"]
filter: grayscale(0%);
[/class]
[class name="nonselect"]
pointer-events: none;
[/class]
[class name="bannershift7"]
right: -100%;
transition: right 1.7s ease-in-out 1s;
[/class]
[class name="bannershift7v2"]
top: 82px;
transition: top 1s ease-in-out 2.7s;
[/class]
[class name="bannershiftS"]
left: -100%;
transition: left 1.7s ease-in-out 1s;
[/class]
[class name="bannershiftSv2"]
top: -82px;
transition: top 1s ease-in-out 2.7s;
[/class]
[class name="covererase"]
height: 0;
max-height: 0;
width: 0;
opacity: 0;
transition: opacity 1s ease-in-out 4.0s, height .1s ease-in-out 5s, max-height 0.1s ease-in-out 5s, width .1s ease-in-out 5s;
[/class]
[class name="CSwrap7" minWidth=750px]
margin: 0 auto;
width: calc(100% - 100px);
max-width: 800px;
opacity: 0;
position: relative;
z-index: 1;
transition: opacity 1s ease-in-out .3s, margin .1s ease-in-out 1.4s;
font-size: initial;
[/class]
[class name="CSwrap7" maxWidth=749px]
box-sizing: border-box;
margin: 0 auto;
width: calc(100% - 20px);
opacity: 0;
position: relative;
z-index: 1;
transition: opacity 1s ease-in-out .3s, margin .1s ease-in-out 1.4s;
font-size: initial;
[/class]
[class name="CSwrapS" minWidth=750px]
margin: 0 auto;
width: calc(100% - 100px);
max-width: 800px;
opacity: 0;
position: relative;
z-index: 1;
transition: opacity 1s ease-in-out .3s, margin .1s ease-in-out 1.4s;
font-size: initial;
[/class]
[class name="CSwrapS" maxWidth=749px]
margin: 0 auto;
width: calc(100% - 20px);
opacity: 0;
position: relative;
z-index: 1;
transition: opacity 1s ease-in-out .3s, margin .1s ease-in-out 1.4s;
font-size: initial;
[/class]
[class name="CSwrapshow" minWidth=750px]
margin: 50px auto;
opacity: 1;
transition: opacity 1s ease-in-out 5.3s, margin .1s ease-in-out 5s;
[/class]
[class name="CSwrapshow" maxWidth=749px]
margin: 15px auto;
opacity: 1;
transition: opacity 1s ease-in-out 5.3s, margin .1s ease-in-out 5s;
[/class]
[class name="placeholder" minWidth=750px]
box-sizing: border-box;
visibility: hidden;
display: flex;
visibility: visible;
flex-flow: row-reverse wrap;
justify-content: center;
margin-left: -15px;
padding: 50px;
height: auto;
[/class]
[class name="placeholder" maxWidth=749px]
box-sizing: border-box;
visibility: hidden;
display: flex;
visibility: visible;
flex-flow: row-reverse wrap;
justify-content: center;
margin-top: -15px;
margin-left: -15px;
padding: 10px;
height: auto;
[/class]
[class name="placeholderA" minWidth=750px]
margin-top: 15px;
margin-left: 15px;
flex: 1 0 250px;
width: 100%;
height: 500px;
[/class]
[class name="placeholderA" maxWidth=749px]
margin-top: 15px;
margin-left: 15px;
flex: 1 0 250px;
width: 100%;
height: 425px;
[/class]
[class name="placeholderB" minWidth=750px]
margin-top: 15px;
margin-left: 15px;
flex: 2 0 300px;
width: calc(100% - 15px);
height: 500px;
[/class]
[class name="placeholderB" maxWidth=749px]
margin-top: 10px;
margin-left: 15px;
flex: 2 0 300px;
width: calc(100% - 15px);
height: 430px;
[/class]
[class name="SetteWrap"]
display: flex;
flex-flow: row-reverse wrap;
justify-content: center;
margin-top: 0;
margin-left: -15px;
transition: margin-top .1s ease-in-out 1.4s;
[/class]
[class name="SetteRight" minWidth=750px]
margin-top: 0;
margin-left: 15px;
flex: 1 0 250px;
width: 100%;
height: 0;
transition: height .1s ease-in-out 1.4s, margin-top .1s ease-in-out 1.4s;
[/class]
[class name="SetteRight" maxWidth=749px]
margin-top: 0;
margin-left: 15px;
flex: 1 0 250px;
width: 100%;
height: 0;
transition: height .1s ease-in-out 1.4s, margin-top .1s ease-in-out 1.4s;
[/class]
[class name="SetteLeft" minWidth=750px]
box-sizing: border-box;
margin-top: 0;
margin-left: 15px;
flex: 2 0 300px;
width: calc(100% - 15px);
height: 0;
overflow: hidden;
position: relative;
transition: height .1s ease-in-out 1.4s, margin-top .1s ease-in-out 1.4s;
[/class]
[class name="SetteLeft" maxWidth=749px]
box-sizing: border-box;
margin-top: 0;
margin-left: 15px;
flex: 2 0 300px;
width: calc(100% - 15px);
height: 0;
overflow: hidden;
position: relative;
transition: height .1s ease-in-out 1.4s, margin-top .1s ease-in-out 1.4s;
[/class]
[class name="MainWrap"]
box-sizing: border-box;
padding: 14px;
width: 100%;
position: relative;
[/class]
[class name="MainIMG" minWidth=750px]
width: 100%;
height: 470px;
cursor: pointer;
[/class]
[class name="MainIMG" maxWidth=749px]
width: 100%;
height: 395px;
cursor: pointer;
[/class]
[class name="SetteTabWrap"]
bottom: -6px;
right: 14px;
padding: 0 8px;
height: 11px;
background: var(--bg1);
border-left: 1px solid var(--border1);
border-right: 1px solid var(--border1);
position: absolute;
[/class]
[class name="tabwrap7"]
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
margin-top: -1px;
margin-left: -8px;
height: 11px;
font-family: var(--bfont);
font-size: 13px;
line-height: 100%;
text-transform: uppercase;
[/class]
[class name="home7"]
margin-left: 8px;
flex: 0 1 auto;
color: var(--color1);
cursor: pointer;
transition: color .5s ease-in-out .1s;
[/class]
[class name="home7" state="hover"]
margin-left: 8px;
flex: 0 1 auto;
color: var(--accent1);
cursor: pointer;
transition: color .5s ease-in-out .1s;
[/class]
[class name="tabs7"]
margin-left: 8px;
flex: 0 1 auto;
color: var(--color1);
cursor: pointer;
pointer-events: auto;
transition: color .5s ease-in-out .1s;
[/class]
[class name="tabs7" state="hover"]
margin-left: 8px;
flex: 0 1 auto;
color: var(--accent1);
cursor: pointer;
pointer-events: auto;
transition: color .5s ease-in-out .1s;
[/class]
[class name="tabselect7"]
color: var(--accent1);
pointer-events: none;
cursor: auto;
transition: color .1s ease-in-out;
[/class]
[class name="SetteContentWrap" minWidth=750px]
left: -100%;
width: 100%;
height: 500px;
overflow: hidden;
position: relative;
transition: left .1s ease-in-out 1.5s;
[/class]
[class name="SetteContentWrap" maxWidth=749px]
left: -100%;
width: 100%;
height: 430px;
overflow: hidden;
position: relative;
transition: left .1s ease-in-out 1.5s;
[/class]
[class name="RIGHTslide2"]
left: 0;
transition: left 1s ease-in-out 6.3s;
[/class]
[class name="content7"]
left: 0;
width: 100%;
height: inherit;
overflow: hidden;;
position: absolute;
transition: left 1s ease-in-out 1.4s;
[/class]
[class name="hidecontent7"]
left: -100%;
transition: left 1s ease-in-out .2s;
[/class]
[class name="scrollbox"]
padding-right: 20px;
width: 100%;
height: inherit;
overflow-y: auto;
position: relative;
[/class]
[class name="settebox"]
box-sizing: border-box;
padding: 14px;
width: 100%;
border: 1px solid var(--border1);
position: relative;
[/class]
[class name="topcover7"]
top: -1px;
left: 20px;
right: 20px;
width: calc(100% - 40px);
height: 1px;
background: var(--bg1);
position: absolute;
[/class]
[class name="bottomcover7"]
bottom: -1px;
left: 20px;
right: 20px;
width: calc(100% - 40px);
height: 1px;
background: var(--bg1);
position: absolute;
[/class]
[class name="listwrap7"]
display: flex;
flex-flow: row wrap;
width: 100%;
[/class]
[class name="question7"]
flex: 1 0 100px;
font-family: var(--bfont);
font-size: var(--bsize);
color: var(--accent1);
line-height: 125%;
font-weight: bold;
text-transform: uppercase;
[/class]
[class name="answer7"]
flex: 5 0 100px;
font-family: var(--bfont);
font-size: var(--bsize);
color: var(--color1);
line-height: 125%;
text-transform: uppercase;
[/class]
[class name="spacer"]
height: 25px;
[/class]
[class name="setteheader"]
margin-bottom: 10px;
font-family: var(--hfont);
font-size: var(--hsize);
color: var(--accent1);
line-height: 100%;
font-weight: bold;
text-transform: lowercase;
[/class]
[class name="settebody"]
font-family: var(--bfont);
font-size: var(--bsize);
color: var(--color1);
line-height: 150%;
text-align: justify;
[/class]
[class name="storyimage"]
width: 100%;
height: 200px;
overflow: hidden;
[/class]
[class name="topic7"]
flex: 1 0 50px;
font-family: var(--bfont);
font-size: var(--bsize);
color: var(--accent1);
line-height: 125%;
font-weight: bold;
text-transform: uppercase;
[/class]
[class name="description7"]
flex: 10 0 100px;
font-family: var(--bfont);
font-size: var(--bsize);
color: var(--color1);
line-height: 125%;
text-align: justify;
[/class]
[class name="triviaspacer"]
height: 10px;
[/class]
[class name="SpicaWrap"]
display: flex;
flex-flow: row wrap;
justify-content: center;
margin-top: 0;
margin-left: -15px;
transition: margin-top .1s ease-in-out 1.4s
[/class]
[class name="SpicaLeft" minWidth=750px]
margin-top: 0;
margin-left: 15px;
flex: 1 0 250px;
width: 100%;
height: 0;
transition: height .1s ease-in-out 1.4s, margin-top .1s ease-in-out 1.4s;
[/class]
[class name="SpicaLeft" maxWidth=749px]
margin-top: 0;
margin-left: 15px;
flex: 1 0 250px;
width: 100%;
height: 0;
transition: height .1s ease-in-out 1.4s, margin-top .1s ease-in-out 1.4s;
[/class]
[class name="SpicaRight" minWidth=750px]
box-sizing: border-box;
margin-top: 0;
margin-left: 15px;
flex: 2 0 300px;
width: calc(100% - 15px);
height: 0;
overflow: hidden;scro
position: relative;
transition: height .1s ease-in-out 1.4s, margin-top .1s ease-in-out 1.4s;
[/class]
[class name="SpicaRight" maxWidth=749px]
box-sizing: border-box;
margin-top: 0;
margin-left: 15px;
flex: 2 0 300px;
width: calc(100% - 15px);
height: 0;
overflow: hidden;
position: relative;
transition: height .1s ease-in-out 1.4s, margin-top .1s ease-in-out 1.4s;
[/class]
[class name="SpicaContentWrap" minWidth=750px]
right: -100%;
width: 100%;
height: 500px;
overflow: hidden;
position: relative;
transition: right .1s ease-in-out 1.5s;
[/class]
[class name="SpicaContentWrap" maxWidth=749px]
right: -100%;
width: 100%;
height: 430px;
overflow: hidden;
position: relative;
transition: right .1s ease-in-out 1.5s;
[/class]
[class name="LEFTslide2"]
right: 0;
transition: right 1s ease-in-out 6.3s;
[/class]
[class name="contentS"]
right: 0;
width: 100%;
height: inherit;
overflow: hidden;;
position: absolute;
transition: right 1s ease-in-out 1.4s;
[/class]
[class name="hidecontentS"]
right: -100%;
transition: right 1s ease-in-out .2s;
[/class]
[class name="SpicaTabWrap"]
bottom: -6px;
padding: 0 8px;
height: 11px;
background: var(--bg2);
border-left: 1px solid var(--border2);
border-right: 1px solid var(--border2);
position: absolute;
[/class]
[class name="tabwrapS"]
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
margin-left: -8px;
height: 11px;
font-family: var(--bfont);
font-size: 13px;
line-height: 0;
text-transform: uppercase;
[/class]
[class name="homeS"]
margin-left: 8px;
flex: 0 1 auto;
color: var(--color2);
cursor: pointer;
transition: color .5s ease-in-out .1s;
[/class]
[class name="homeS" state="hover"]
margin-left: 8px;
flex: 0 1 auto;
color: var(--accent2);
cursor: pointer;
transition: color .5s ease-in-out .1s;
[/class]
[class name="tabsS"]
margin-left: 8px;
flex: 0 1 auto;
color: var(--color2);
cursor: pointer;
pointer-events: auto;
transition: color .5s ease-in-out .1s;
[/class]
[class name="tabsS" state="hover"]
margin-left: 8px;
flex: 0 1 auto;
color: var(--accent2);
cursor: pointer;
pointer-events: auto;
transition: color .5s ease-in-out .1s;
[/class]
[class name="tabselectS"]
color: var(--accent2);
pointer-events: none;
cursor: auto;
transition: color .1s ease-in-out;
[/class]
[class name="spicabox"]
box-sizing: border-box;
padding: 14px;
width: 100%;
border: 1px solid var(--border2);
position: relative;
[/class]
[class name="topcoverS"]
top: -1px;
left: 20px;
right: 20px;
width: calc(100% - 40px);
height: 1px;
background: var(--bg2);
position: absolute;
[/class]
[class name="bottomcoverS"]
bottom: -1px;
left: 20px;
right: 20px;
width: calc(100% - 40px);
height: 1px;
background: var(--bg2);
position: absolute;
[/class]
[class name="listwrapS"]
display: flex;
flex-flow: row wrap;
width: 100%;
[/class]
[class name="questionS"]
flex: 1 0 100px;
font-family: var(--bfont);
font-size: var(--bsize);
color: var(--accent2);
line-height: 125%;
font-weight: bold;
text-transform: uppercase;
[/class]
[class name="answerS"]
flex: 5 0 100px;
font-family: var(--bfont);
font-size: var(--bsize);
color: var(--color2);
line-height: 125%;
text-transform: uppercase;
[/class]
[class name="spicaheader"]
margin-bottom: 10px;
font-family: var(--hfont);
font-size: var(--hsize);
color: var(--accent2);
line-height: 100%;
font-weight: bold;
text-transform: lowercase;
[/class]
[class name="spicabody"]
font-family: var(--bfont);
font-size: var(--bsize);
color: var(--color2);
line-height: 150%;
text-align: justify;
[/class]
[class name="topicS"]
flex: 1 0 50px;
font-family: var(--bfont);
font-size: var(--bsize);
color: var(--accent2);
line-height: 125%;
font-weight: bold;
text-transform: uppercase;
[/class]
[class name="descriptionS"]
flex: 10 0 100px;
font-family: var(--bfont);
font-size: var(--bsize);
color: var(--color2);
line-height: 125%;
text-align: justify;
[/class]
[class name="wraptrans"]
margin-top: -15px;
transition: margin-top .1s ease-in-out 5s;
[/class]
[class name="sideshow" minWidth=750px]
margin-top: 15px;
height: 500px;
transition: height .1s ease-in-out 5s, margin-top .1s ease-in-out 5s;
[/class]
[class name="sideshow" maxWidth=749px]
margin-top: 15px;
height: 420px;
transition: height .1s ease-in-out 5s, margin-top .1s ease-in-out 5s;
[/class]
[comment]--------------------SCRIPTS--------------------[/comment]
[script class="hoveron7" on=mouseenter]
addClass "bannercolor" "banner7"
addClass "GETimg" "LEFTimg"
[/script]
[script class="hoveroff7" on=mouseleave]
removeClass "bannercolor" "banner7"
removeClass "GETimg" "LEFTimg"
[/script]
[script class="hoveronS" on=mouseenter]
addClass "bannercolor" "bannerS"
addClass "GETimg" "RIGHTimg"
[/script]
[script class="hoveroffS" on=mouseleave]
removeClass "bannercolor" "bannerS"
removeClass "GETimg" "RIGHTimg"
[/script]
[script class="select7" on=click]
removeClass "GETimg" "LEFTimg"
addClass "nonselect" "banner7"
addClass "nonselect" "bannerS"
addClass "bannercolor2" "banner7"
addClass "bannershift7v2" "banner7"
addClass "covererase" "bannerpos"
addClass "LEFTslide1" "LEFTdivider"
addClass "bgexpand" "fullbg"
addClass "namefade" "nameplate"
addClass "bannershiftS" "bannerS"
addClass "CSwrapshow" "CSwrap7"
addClass "shellexpand" "shell"
addClass "wraptrans" "SetteWrap"
addClass "sideshow" "SetteRight"
addClass "sideshow" "SetteLeft"
addClass "RIGHTslide2" "SetteContentWrap"
[/script]
[script class="deselect7" on=click]
removeClass "nonselect" "banner7"
removeClass "nonselect" "bannerS"
removeClass "bannercolor2" "banner7"
removeClass "bannershift7v2" "banner7"
removeClass "covererase" "bannerpos"
removeClass "LEFTslide1" "LEFTdivider"
removeClass "bgexpand" "fullbg"
removeClass "namefade" "nameplate"
removeClass "bannershiftS" "bannerS"
removeClass "CSwrapshow" "CSwrap7"
removeClass "shellexpand" "shell"
removeClass "wraptrans" "SetteWrap"
removeClass "sideshow" "SetteRight"
removeClass "sideshow" "SetteLeft"
removeClass "RIGHTslide2" "SetteContentWrap"
[/script]
[script class="tabs7" version=2]
(= select "settemain")
[/script]
[script class="tabs7" version=2 on=click]
(addClass "hidecontent7" "content7")
(removeClass "tabselect7" "tabs7")
(= select (index (split (getText) "#") 0 ))
(addClass "tabselect7" (+ select "tabs7"))
(removeClass "hidecontent7" (+ select "info7"))
[/script]
[script class="selectS" on=click]
removeClass "GETimg" "RIGHTimg"
addClass "nonselect" "banner7"
addClass "nonselect" "bannerS"
addClass "bannercolor2" "bannerS"
addClass "bannershiftSv2" "bannerS"
addClass "covererase" "bannerpos"
addClass "RIGHTslide1" "LEFTdivider"
addClass "namefade" "nameplate"
addClass "bannershift7" "banner7"
addClass "CSwrapshow" "CSwrapS"
addClass "shellexpand" "shell"
addClass "wraptrans" "SpicaWrap"
addClass "sideshow" "SpicaRight"
addClass "sideshow" "SpicaLeft"
addClass "LEFTslide2" "SpicaContentWrap"
[/script]
[script class="deselectS" on=click]
removeClass "nonselect" "banner7"
removeClass "nonselect" "bannerS"
removeClass "bannercolor2" "bannerS"
removeClass "bannershiftSv2" "bannerS"
removeClass "covererase" "bannerpos"
removeClass "RIGHTslide1" "LEFTdivider"
removeClass "namefade" "nameplate"
removeClass "bannershift7" "banner7"
removeClass "CSwrapshow" "CSwrapS"
removeClass "shellexpand" "shell"
removeClass "wraptrans" "SpicaWrap"
removeClass "sideshow" "SpicaRight"
removeClass "sideshow" "SpicaLeft"
removeClass "LEFTslide2" "SpicaContentWrap"
[/script]
[script class="tabsS" version=2]
(= select "spicamain")
[/script]
[script class="tabsS" version=2 on=click]
(addClass "hidecontentS" "contentS")
(removeClass "tabselectS" "tabsS")
(= select (index (split (getText) "#") 0 ))
(addClass "tabselectS" (+ select "tabsS"))
(removeClass "hidecontentS" (+ select "infoS"))
[/script]
[/nobr]