API tools faq
paste
Advertisement
southcodes

'SOLANDER' book theme #1

southcodes
Oct 4th, 2020 (edited)
1,431
1
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 69.51 KB | None | 1 0
raw download clone embed print report
  1. <!--
  2.  
  3. ---------  
  4.    
  5.     ------------ NOTE: ------------
  6.    
  7.     - I WILL NOT HELP WITH MAJOR CUSTOMIZATION QUESTIONS.
  8.    
  9.     - FEEL FREE TO ASK ME ABOUT MINOR CHANGES OR IF YOU'RE NOT SURE WHAT YOU WANT COUNTS AS 'MINOR'
  10.    
  11.    - HOWEVER: YOU CAN COMMISSION ME TO FULLY CUSTOMIZE THIS THEME FOR YOU, JUST SEND ME AN ASK FOR MORE INFORMATION!
  12.    
  13. --------
  14.    
  15.    - book theme #1 'solander' by skye southcodes.tumblr.com
  16.    - modify as you please but please do not touch the credit
  17.    - any errors? need help? have questions? let me know!
  18.    southcodes.tumblr.com/inbox
  19.    
  20.    
  21.    - fade in effect by @yearsandsyears
  22.    - custom not found page https://fukuo.tumblr.com/post/145043341255/how-to-make-a-custom-not-found-page-on-tumblr
  23.    - slide left navi https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav_push_opacity
  24.    - popups by http://jsfiddle.net/WGPhG/1123/
  25.    - css carousel by https://yeolithm.com/carousel/tutorial
  26.    - normalize css by https://github.com/necolas
  27.    - fonts by google
  28.    - like button by @shythemes
  29.    - captions documentation by @bychloethemes
  30.    - honeybee icon font https://honeybee.suiomi.com/
  31.    - embed audio css and hide empty answers script by @gukthemes
  32.    - css photosets by https://annasthms.tumblr.com/ & egg.design https://annasthms.github.io/photosets/
  33.    - faq accordion by https://jqueryui.com/accordion
  34.    - chapter tabs https://stackoverflow.com/questions/52610253/switch-between-tabs-using-a-select-dropdown
  35.    - show/hide elements according to page number css by https://rachaelthemes.com/
  36.    - video reizing by https://nouvae.tumblr.com/post/176815415055/tutorial-responsive-tumblr-videos-and-external
  37.    
  38. -->
  39. <!DOCTYPE html>
  40. <html>
  41. <head>
  42.    
  43.     <title>{title}</title>
  44.  
  45.    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  46.  
  47.    <link rel="shortcut icon" href="{favicon}">
  48.    
  49.    <!-- jquery ui accordion -->
  50.    <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  51.  
  52.    <!-- fonts-->
  53.    <link href="https://fonts.googleapis.com/css2?family=Cardo:ital@0;1&family=Montserrat:ital,wght@0,500;0,600;1,500;1,600&family=Open+Sans:ital,wght@0,400;0,600;1,400;1,600&display=swap" rel="stylesheet">
  54.    
  55.    <!-- normalize css-->
  56.    <link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet">
  57.    
  58.    <!--  css photoset -->
  59.    <link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">
  60.    
  61.    <!-- honeybee icon font--> <link rel="stylesheet" href="https://solrainha.github.io/honeybee/honeybee.css" >
  62.    
  63.    
  64. <meta name="if: Image Header" content="1"/>
  65. <meta name="image:header image" content=""/>
  66.  
  67. <meta name="color:background" content="#fefefe"/>
  68. <meta name="color:posts" content="#ffffff"/>
  69. <meta name="color:text" content="#333333"/>
  70. <meta name="color:links" content="#df70d4"/>
  71. <meta name="color:links hover" content="##c32c91"/>
  72. <meta name="color:borders" content="#facade"/>
  73. <meta name="color:accents" content="#eed2f8"/>
  74. <meta name="color:icons color" content="#d981ea"/>
  75.  
  76. <meta name="select:post size" content="450px"/>
  77. <meta name="select:post size" content="350px"/>
  78. <meta name="select:post size" content="400px"/>
  79. <meta name="select:post size" content="500px"/>
  80.  
  81. <meta name="select:font size" content="13px"/>
  82. <meta name="select:font size" content="12px"/>
  83. <meta name="select:font size" content="14px"/>
  84. <meta name="select:font size" content="15px"/>
  85.  
  86. <meta name="text:summary" content="enter text or edit it in the code" />
  87.    
  88. <meta name="text:Link 1" content="inbox" />
  89. <meta name="text:Link 1 URL" content="/ask" />
  90. <meta name="text:Link 2" content="" />
  91. <meta name="text:Link 2 URL" content="" />
  92. <meta name="text:Link 3" content="" />
  93. <meta name="text:Link 3 URL" content="" />
  94. <meta name="text:Link 4" content="" />
  95. <meta name="text:Link 4 URL" content="" />
  96. <meta name="text:Link 5" content="" />
  97. <meta name="text:Link 5 URL" content="" />
  98. <style>
  99.  
  100.  
  101. @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  102. @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  103. @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  104. .fade-in {opacity:0;-webkit-animation:fadeIn ease-in 1;-moz-animation:fadeIn ease-in 1;animation:fadeIn ease-in 1;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-duration:.8s;
  105.    -moz-animation-duration:.8s;
  106.    animation-duration:.8s;
  107.    -webkit-animation-delay:1.8s;
  108.    -moz-animation-delay:1.8s;
  109.    animation-delay:1.8s;}
  110.  
  111. .tmblr-iframe {opacity:.6;-ms-transform: scale(0.85); /* IE 9 */-webkit-transform: scale(0.85); /* Safari */transform: scale(0.85);}
  112. .tmblr-iframe:hover {opacity:.8;}
  113. .iframe-controls--desktop {margin-right:4rem;}
  114.  
  115. ::-webkit-scrollbar-thumb:vertical {border-left:2px solid {color:borders};}
  116. ::-webkit-scrollbar-thumb:horizontal {margin:0;padding:0;border-top:2px solid {color:borders};}
  117. ::-webkit-scrollbar {width:6px;height:3px;}
  118. ::-webkit-scrollbar-track-piece{margin:5px 0;}
  119.  
  120. pre {font-family:consolas;
  121.    white-space: pre-wrap;       /* css-3 */
  122.    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  123.    white-space: -pre-wrap;      /* Opera 4- */
  124.    white-space: -o-pre-wrap;    /* Opera 7 */
  125.    word-wrap: break-word;
  126.    border:1px solid {color:borders};
  127.    padding:1rem;
  128.    background:#fdfdfd;
  129. }      /* Internet Explorer 5.5+ */
  130.  
  131. body, figure{margin:0;padding:0}
  132. html{font: 14px 'Open Sans', sans-serif;}
  133. body {font-size:{select:font size};color:{color:text};background:{color:background};}
  134. a {text-decoration: none;color:{color:links};word-break:break-word;}
  135. a:hover {color:{color:links hover};}
  136. blockquote {margin:0;padding:0;}
  137. img {max-width:100%;height: auto;display: block;margin: .7rem 0}
  138. hr {border:0;border-top:1px solid {color:borders};margin:.5rem 0;}
  139. b{font-weight: 600}
  140. video,iframe { max-width:100%;}
  141. small {font-size:.9rem}
  142.  
  143. /* hidden navi on the left */
  144.  
  145. /* hidden menu */
  146.  
  147. .open-menu{
  148.    cursor:pointer;
  149.    text-align:center;
  150. }
  151. .open-menu-title {
  152.    margin:.5rem 0 1rem;
  153.    text-transform:uppercase;
  154.    font-size:.9rem;
  155.    font-weight:500;
  156.    letter-spacing:.04rem;
  157.    font-family:'Montserrat', sans-serif;
  158. }
  159. .th-dial-o {
  160.    font-size:1.6rem;
  161.    color:{color:icons color};
  162.    display:block;
  163. }
  164.  
  165. #hidden-navi {
  166.    height: 100%;
  167.    width: 250px;
  168.    position: fixed;
  169.    z-index: 1;
  170.    top: 0;
  171.    right: 4rem;
  172.    background: rgba({RGBcolor:accents}, .3);
  173.    border-left:1px solid {color:borders};
  174.    text-align:right;
  175.    box-sizing:border-box;
  176.    text-align:left;
  177.    padding-top:4rem;
  178.    display:none;
  179.    overflow:auto;
  180. }
  181.  
  182. #hidden-navi ul,#hidden-navi ul li {
  183.    list-style-type:none;
  184.    margin:0;
  185.    padding:0;
  186.    font:600 1.1rem 'Montserrat', sans-serif;
  187.    text-transform:uppercase;
  188. }
  189. #hidden-navi ul li {
  190.    background:white;
  191.    border:1px solid {color:borders};
  192.    width:calc(90% - 1rem);
  193.    margin:1rem auto 3rem;
  194.    display:block;
  195. }
  196.  
  197. #hidden-navi ul li a{
  198.    border-left:1rem solid {color:borders};
  199.    display:block;
  200.    padding:.5rem;
  201. }
  202.  
  203.  
  204. /* carousel navigation */
  205.  
  206.  
  207. .th-loupe-o,[class^="label_"] {
  208.    display: block;
  209.    cursor: pointer;
  210.    padding:.6rem .5rem .4rem;
  211.    text-align: center;
  212.    box-sizing:border-box;
  213.    transition: all 0.3s ease;
  214.    margin:1rem auto;
  215.    color:{color:icons color};
  216.    border-radius:4px;
  217.    background:#fafafa;
  218.    border:1px solid rgba({RGBcolor:icons color}, .5);
  219. }
  220. .th-loupe-o {
  221.    padding:.4rem .6rem .2rem;
  222. }
  223. .th-loupe-o:hover,[class^="label_"]:hover {
  224.    background:{color:links};
  225.    color:white;
  226. }
  227.  
  228. .carousel-navi  {
  229.    position:fixed;top:0;bottom:0;right:0;
  230.    z-index:3;
  231.    background:{color:posts};
  232.    width:4rem;
  233.    text-align:center;
  234.    border-left:1px solid {color:borders};
  235.    display:flex;
  236.    align-items:center;
  237.    justify-content:center;
  238.    
  239. }
  240.  
  241. .carousel-navi .th {font-size:1.2rem;}
  242.  
  243. .carousel-navi ul,.carousel-navi li {margin:0;padding:0;list-style-type:none;display:inline-block;}
  244.  
  245. .label_home_nav{margin-bottom:1rem}
  246. .label_home_nav:hover .th {
  247.    color:white;
  248. }
  249. .linkslide {
  250.    z-index:-2;
  251.    position:absolute;
  252.    margin-top:-3.4rem;
  253.    transition-duration:.5s;
  254.    text-transform:uppercase;
  255.    font-size:.85rem;
  256.    font-weight:500;
  257.    background:white;
  258.    border:1px solid {color:borders};
  259.    padding:.5rem;
  260.    letter-spacing:.04rem;
  261.    font-family:'Montserrat', sans-serif;
  262.    right:-5rem;
  263.    display:none;
  264. }
  265.  
  266.  
  267. .linkslide-home-nav {
  268.    z-index:-2;
  269.    position:absolute;
  270.    margin-top:-2.1rem;
  271.    transition-duration:.5s;
  272.    text-transform:uppercase;
  273.    font-size:.85rem;
  274.    font-weight:500;
  275.    background:white;
  276.    border:1px solid {color:borders};
  277.    padding:.5rem;
  278.    letter-spacing:.04rem;
  279.    font-family:'Montserrat', sans-serif;
  280.    right:-5rem;
  281.    display:none;
  282.    width:200%;
  283.    color:{color:text}
  284. }
  285.  
  286. .carousel-navi ul li:hover .linkslide, .carousel-navi ul li:hover .linkslide-home-nav {right:5rem;display:block;}
  287.  
  288. #search {
  289.    display:none;
  290.    padding:.5rem;
  291.    bottom:0;left:0;right:calc(4rem - 1px);
  292.    background:rgba({RGBcolor:icons color}, .3);
  293.    position:fixed;
  294.    z-index:999;
  295.    border-top:1px solid {color:borders};
  296.    font-size:1rem;
  297. }
  298. #search:before {
  299.    font-family:'honeybee';
  300.    content:'\ebc6';
  301.    position:absolute;
  302.    left:1rem;
  303.    bottom:1.4rem;
  304.    color:{color:links};
  305. }
  306. #search input:focus {outline:0}
  307. .sbar {border:0px;width:100%;height:40px;letter-spacing:1px;color:#000;background:#fff;padding:1rem 1rem 1rem 2rem;box-sizing:border-box;font-weight:500;
  308.    font-family:'Montserrat', sans-serif;}
  309. .sbar::-webkit-input-placeholder { /* Chrome */color: #666;font-style:italic;}
  310. .sbar:-ms-input-placeholder { /* IE 10+ */color: #666;font-style:italic;}
  311. .sbar::-moz-placeholder { /* Firefox 19+ */color: #666;font-style:italic;opacity: 1;}
  312. .sbar:-moz-placeholder { /* Firefox 4 - 18 */color: #666;font-style:italic;opacity: 1;}
  313.  
  314.  
  315. /* carousel */
  316.  
  317.  
  318. #carousel {overflow: hidden;}
  319.            
  320. .p-wrapper {
  321.    transition: transform 0.4s ease-in-out;
  322.     height: 100vh;
  323.     box-sizing: border-box;
  324. }
  325.  
  326. #button_header:checked ~ #carousel .p-wrapper {-webkit-transform: translateY(0);transform: translateY(0);}
  327. #button_profile:checked ~ #carousel .p-wrapper {-webkit-transform: translateY(-100%);transform: translateY(-100%);}
  328. #button_information:checked ~ #carousel .p-wrapper {-webkit-transform: translateY(-200%);transform: translateY(-200%);}
  329. #button_characters:checked ~ #carousel .p-wrapper {-webkit-transform: translateY(-300%);transform: translateY(-300%);}
  330. #button_chapters:checked ~ #carousel .p-wrapper {-webkit-transform: translateY(-400%);transform: translateY(-400%);}
  331. #button_blog:checked ~ #carousel .p-wrapper {-webkit-transform: translateY(-500%);transform: translateY(-500%);}
  332.  
  333. #button_header:checked ~ .carousel-button-checked  .label_header,
  334. #button_profile:checked ~ .carousel-button-checked  .label_profile,
  335. #button_information:checked ~ .carousel-button-checked  .label_information,
  336. #button_characters:checked ~ .carousel-button-checked .label_characters,
  337. #button_chapters:checked ~ .carousel-button-checked .label_chapters,
  338. #button_blog:checked ~ .carousel-button-checked .label_blog{
  339.     /*cursor: default;*/
  340.     background:{color:accents};
  341.     color:{color:text};
  342. }
  343.  
  344. [class^="panel_"] {
  345.    overflow: auto;
  346.    position: relative;
  347.    width: inherit;
  348.    height: inherit;
  349.    box-sizing:border-box;
  350.    width:calc(100% - 4rem);
  351. }
  352.  
  353. /* header */
  354.  
  355. #header {
  356.    box-sizing:border-box;
  357.    text-align:right;
  358. }
  359. figure.header-image {
  360.    width:50%;
  361.    height:90vh;
  362.    float:left;
  363.    margin:5vh;
  364. }
  365. img.header-image {
  366.    margin:0;
  367.    width:100%;
  368.    height:100%;
  369.    object-fit:cover;
  370. }
  371.  
  372. #header-inside {
  373.    width:calc(50% - 10vh);
  374.    float:right;
  375. }
  376.  
  377.  
  378. #blog-title {
  379.    margin:10vh 2rem 0 0;
  380.    font: 400 3.5rem 'Cardo', serif;
  381.    font-style:italic;
  382.    letter-spacing:.08rem;
  383. }
  384.  
  385. #header-summary {
  386.    padding:1rem;
  387.    right:1rem;
  388.    line-height:165%;
  389.    position:absolute;bottom:1rem;
  390.    max-height:70vh;
  391.    overflow:auto;
  392.    width:40%;
  393. }
  394.  
  395. /*  profile  */
  396.  
  397.  
  398. #profile {
  399.    width:90vw;
  400.    max-width: 50rem;
  401.    margin:5vh auto 0;
  402.    box-sizing: border-box;
  403.    height:90vh;
  404.    background:{color:posts};
  405.    border:1px solid {color:borders};
  406.    overflow:auto;
  407.    padding:2rem;
  408. }
  409.  
  410. #profile-quote,#profile-about,#finished-works,#ongoing-works {
  411.    border:1px solid {color:borders};
  412. background:{color:background};
  413.    box-sizing: border-box;
  414.    padding:1rem;
  415. }
  416.  
  417. #social {
  418.    border:1px solid {color:borders};
  419.   background:{color:background};
  420.    box-sizing: border-box;
  421.    height:calc(100% - 10vh - 4rem);
  422.    margin-top:calc(5vh + 2rem);
  423.    width:5rem;
  424.    text-align:center;
  425.    position:fixed;top:100vh
  426.    
  427. }
  428. #social ul,#social ul li {margin:0;padding:0;list-style-type:none;}
  429.  
  430. #social ul {
  431.    display:flex;
  432.    height:100%;
  433.    flex-flow:column nowrap;
  434.    justify-content:space-around
  435. }
  436.  
  437. #social .th {
  438.    font-size:1.5rem;
  439.    color:{color:icons color};
  440. }
  441.  
  442. #profile-inside {
  443.    box-sizing: border-box;
  444.    float:right;
  445.    width:calc(100% - 7rem);
  446. }
  447.  
  448. figure.profile-image {
  449.    width:10rem;
  450.    height:10rem;
  451.    float:left;
  452.    border: 1rem solid #fff;
  453.    margin:0 2rem 1rem 0;
  454.    outline:1px solid {color:borders}
  455. }
  456. img.profile-image {
  457.    width: 100%;
  458.    height: 100%;
  459.    object-fit: cover;
  460.    display:block;
  461.    margin:0;
  462. }
  463.  
  464. #profile-info {
  465.    width:calc(100% - 14rem);
  466.    float:right;
  467.    height:12rem;
  468.    margin-bottom:2rem;
  469.    font-size:.9rem;
  470.    letter-spacing:.04rem;
  471.    color:#777
  472. }
  473.  
  474. #profile-name {
  475.    font:400 2.5rem 'Cardo', serif;
  476.    margin:0 ;
  477.    /* font-size:1rem; */
  478.    font-style:italic;
  479.    color:#000
  480. }
  481.  
  482. #profile-quote {
  483.    margin-top:2rem;
  484.    max-height:calc(5.2rem + 1px);
  485.    font-size: .95rem;
  486.    font-style: italic;
  487.    letter-spacing: .04rem;
  488.    text-align: center;
  489.    overflow:auto;
  490.    line-height: 170%;
  491. }
  492.  
  493. #profile-about {
  494.    clear:both;
  495.    font-size:.95rem;
  496.    line-height: 170%;
  497. }
  498.  
  499. #finished-works,#ongoing-works {
  500.    padding:0
  501. }
  502.  
  503. #finished-works ul,#ongoing-works ul,
  504. #finished-works ul li,#ongoing-works ul li{
  505.    margin:0;padding:0;list-style-type:none;}
  506.  
  507.  
  508. #finished-works {
  509.    margin:2rem 1rem 0 0;
  510.    float:left;
  511.    width:calc(50% - .5rem)
  512.  
  513. }
  514.  
  515. #ongoing-works {margin-top:2rem;
  516. float:right;
  517. width:calc(50% - .5rem)}
  518.  
  519. .work-header{
  520.    margin:0;
  521.    line-height:100%;
  522.    text-transform: uppercase;
  523.    font-size: 1rem;
  524.    text-align:center;
  525.    letter-spacing: .02rem;
  526.    background:{color:background};
  527.    padding:1.5rem 1rem;
  528.    border-bottom: 1px solid {color:borders};
  529. }
  530.  
  531. .work-header::first-letter{
  532.    background: {color:accents};
  533.    padding:.2rem .6rem;
  534.    margin-right:.3rem;
  535. }
  536.  
  537. .work-name, .work-description{
  538.    padding:1rem;
  539. }
  540.  
  541. .work-name {
  542.    background:{color:accents};
  543.    text-align: center;
  544.    font-weight: 600;
  545.    text-transform: uppercase;
  546.    font-size: .95rem;
  547. }
  548.  
  549. .work-description{
  550.    font-size: .9rem;
  551.    border-top: 1px solid {color:borders};
  552.    line-height: 170%;
  553.    letter-spacing:.02rem
  554. }
  555.  
  556. /*  info  */
  557.  
  558. #information {padding:5rem 0;}
  559.  
  560. #updates-data-wrapper {
  561.    
  562.    width:90vw;
  563.    max-width:45rem;
  564.    margin:0rem auto 0;
  565.    box-sizing:border-box;
  566.    display:flex;
  567.    flex-flow:row wrap;
  568.    justify-content:space-between;
  569. }
  570.  
  571. /* updates */
  572.  
  573. #updates, #data {
  574.    box-sizing:border-box;
  575.    width:calc(50% - 2rem);
  576.    box-sizing:border-box;
  577. }
  578.  
  579. #updates {margin-right:3rem;}
  580.  
  581. #updates-inside,#data-inside {
  582.    max-height:20rem;
  583.    overflow:auto;
  584.    box-sizing:border-box;
  585.    letter-spacing:.04rem;
  586. }
  587.  
  588. #updates .th-calendar-1-o,#data .th-information, #faq .th-question, #progress .th-percentage-o {
  589.    margin-right:.5rem;
  590.    border:1px solid {color:borders};
  591.    color:{color:icons color};
  592.    padding:.5rem;
  593. }
  594.    
  595. .updates-title,.data-title {
  596.    margin:0 0 1rem ;
  597.    font:600 1rem 'Montserrat',sans-serif;
  598.    text-transform:uppercase;
  599.    letter-spacing:.04rem;
  600.    border:1px solid {color:borders};
  601.    padding:.6rem;
  602.    background:{color:posts};
  603. }
  604.  
  605. .update-date, .data-name {
  606.    font:600 .9rem 'Montserrat',sans-serif;
  607.    text-transform:uppercase;
  608.    background:{color:accents};
  609.    padding:.7rem;
  610. }
  611.  
  612. .update-line, .data-line {
  613.    padding:1rem;
  614.    background:{color:posts};
  615. }
  616.  
  617.  
  618. /* progress */
  619.  
  620.  
  621. #faq-title,#progress-title {
  622.    margin:0 0 1rem ;
  623.    font:600 1.2rem 'Montserrat',sans-serif;
  624.    text-transform:uppercase;
  625.    letter-spacing:.04rem;
  626.    border:1px solid {color:borders};
  627.    padding:1rem;
  628.    background:{color:posts};
  629. }
  630.  
  631. #progress {
  632.    width:90%;
  633.    margin:10rem auto;
  634.    max-width:40rem;
  635.    box-sizing:border-box;
  636. }
  637.  
  638. #progress-inside {
  639.    background:{color:posts};
  640.    border:1px solid {color:borders};
  641.    padding:1rem 1rem 0;
  642. }
  643.  
  644. .progress-bar {position:relative;width:100%;height: .5rem;background:#eee;border-radius: 4px;margin:1.5rem auto;}
  645. .progress-full {margin-left:1.5rem}
  646. .progress-bar-inside {position: absolute;top: 0;right: 0;left:0;bottom: 0;background: {color:borders};border-radius: 4px;}
  647. .progress-bar-title,.progress-full {
  648.    font:500 1.1rem 'Montserrat', sans-serif;
  649. }
  650.  
  651. /* faq */
  652.  
  653. #faq {
  654.    width:90%;
  655.    margin:10rem auto 3rem;
  656.    max-width:40rem;
  657. }
  658.  
  659. #faq-note {
  660.    background:{color:posts};
  661.    border:1px solid {color:borders};
  662.    padding:1rem;
  663.    margin-bottom:1rem;
  664.    border-bottom-left-radius:4px;
  665.    border-bottom-right-radius:4px;
  666.    font-style:italic;
  667. }
  668.  
  669. .faq-note-title {
  670.    font-style:none;
  671.    font:600 1.2rem 'Montserrat',sans-serif;}
  672.  
  673. .ui-accordion{font:400 1rem 'Open Sans', sans-serif;}
  674. /*.ui-accordion-header-icon {background:white;color:blue;}*/
  675. .ui-accordion *:focus {outline: 0}
  676. .ui-accordion-header {
  677.    font-weight:600;
  678.    border:3px double {color:borders};
  679.    background: {color:accents};
  680.    font-size:1.1rem!important;
  681.  transition-duration:.3s;}
  682. .ui-accordion-header-active {background: {color:borders};color:{color:text};}
  683. .ui-accordion-header-collapsed {opacity:.7}
  684. .ui-accordion-content {
  685.    font-size:.9rem!important;
  686.    border:1px solid {color:borders};
  687.    line-height:170%;
  688. }
  689.  
  690. /* characters */
  691.  
  692.  
  693. #characters {
  694.    max-width:65rem;
  695.    margin:0rem auto;
  696.    display:flex;
  697.    flex-flow:row wrap;
  698.    justify-content:space-around;
  699.    align-content:center;
  700.    min-height:100vh;
  701. }
  702.  
  703. /* characters */
  704.  
  705. .character-box {
  706.    width:17rem;
  707.     padding: 1rem 1rem 1rem;
  708.     background: {color:accents};
  709.     box-sizing: border-box;
  710.     border: 1px solid {color:borders};
  711.     margin:2rem 0;
  712. }
  713.  
  714. figure.character-icon{
  715.     width:12rem;
  716.     height:12rem;
  717.     margin:auto;
  718. }
  719. img.character-icon {
  720.     width: 100%;
  721.     height: 100%;
  722.     object-fit: cover;
  723.     border-radius: 100%;
  724.     border: .7rem solid white;
  725.     box-sizing: border-box;
  726. }
  727.  
  728. .character-name {
  729.     text-align: center;
  730.     text-transform: capitalize;
  731.     font: 500 1.2rem 'Montserrat', sans-serif
  732. }
  733.  
  734. .viewfull {
  735.     cursor: pointer;
  736.     text-transform: uppercase;
  737.     font-size: .9rem;
  738.     font-weight: 600;
  739.     letter-spacing: .04rem;
  740.     text-align: center;
  741.     padding:1rem .7rem;
  742.     border: 1px solid  {color:borders};
  743.     background: #fcfcfc
  744. }
  745.  
  746. .viewfull:hover {
  747.    background:{color:links};
  748.    border: 1px solid #fcfcfc
  749. }
  750.  
  751. .character-popup {
  752.    position:fixed;top:600vh;right:0;left:-4rem;bottom:0;
  753.     display: none;
  754.    z-index:9999;
  755.    width:33rem;
  756.    height:30.5rem;
  757.    margin:auto;
  758.    background: {color:posts};
  759.    padding: 1rem;
  760.    border:1px solid {color:borders};
  761.    box-sizing: border-box;
  762.    max-width:calc(90vw - 4rem);
  763.     letter-spacing:.04rem;
  764.     max-height:90vh;
  765. }
  766.    
  767. .cancel {
  768.     position:absolute;top:1rem;right:1rem;
  769.     cursor: pointer;
  770.     color:{color:links};
  771. }
  772.  
  773. .character-photoset {
  774.     width: calc(10rem + 20px);
  775.     display: inline-block;
  776.     vertical-align: top;
  777.     margin:-5px 0 0 -5px;
  778. }
  779.  
  780. .photoset-image {
  781.     width: 5rem;
  782.     height: 5rem;
  783.     object-fit: cover;
  784.     float: left;
  785.     margin: 5px;
  786.     box-sizing: border-box;
  787.     border: 1px solid {color:borders};
  788. }
  789.  
  790. .popup-character-name {
  791.     margin: .5rem 0 1rem;
  792.     text-transform:capitalize;
  793.     font:600 1.3rem 'Montserrat', sans-serif;
  794.     box-shadow: inset 0px -8px {color:accents};
  795. }
  796.  
  797. .popup-character-info {
  798.     display: inline-block;
  799.     vertical-align: top;
  800.     box-sizing: border-box;
  801.     width: calc(100% - (10rem + 20px));
  802.     overflow:auto;
  803.     height:calc(10rem + 10px);
  804.     border:1px solid {color:borders};
  805.     padding:0 1rem;
  806. }
  807.  
  808. .detail-line {
  809.    margin:1.5rem 0;
  810. }
  811.  
  812. .detail-name {
  813.    background:{color:accents};
  814.    padding:.3rem;
  815.     font:600 .9rem 'Montserrat', sans-serif;
  816.     text-transform:uppercase;
  817.     margin-right:.5rem;
  818. }
  819.  
  820. .character-biography {
  821.     width: 100%;
  822.     height:calc(100% - (16rem + 10px));
  823.     overflow:auto;
  824.     border:1px solid {color:borders};
  825.     padding:1rem;
  826.     margin:.5rem 0;
  827.     box-sizing:border-box;
  828. }
  829.  
  830. .character-links {
  831.    padding-bottom:.3rem;
  832.    margin-top:.6rem;
  833.    background:white;
  834.    overflow-x:auto;
  835.    white-space: nowrap;
  836.     box-sizing:border-box;
  837.     text-transform:uppercase;
  838.     font-size:.9rem;
  839.     font-weight:600;
  840. }
  841.  
  842. .character-links a {
  843.    background:{color:accents};
  844.    display:inline-block;
  845.    padding:.3rem .4rem;
  846.    margin-right: 1rem;
  847.    color:{color:text};
  848.    transition-duration:.3s;
  849. }
  850.  
  851. .character-links a:hover {
  852.    background:{color:accents};
  853.    color:{color:links};
  854. }
  855.  
  856. .character-biography p:first-of-type {margin-top:0;}
  857. .character-biography p:last-of-type {margin-bottom:0;}
  858.  
  859. /*  chapters  */
  860.  
  861.  
  862.  
  863.  
  864. /* chapters */
  865. .panel_chapters  {
  866.    height:100vh;
  867.    position:relative;
  868.    display:flex;
  869.    align-content:center;
  870.    align-items:center;
  871.    justify-content:center;
  872.    
  873. }
  874.    
  875. #chapters {
  876.    width:80vw;
  877.    height:90vh;
  878.    max-width:40rem;
  879.    margin:5vh auto;
  880.    position:relative;
  881. }
  882.  
  883. .chapter-tab {
  884.    padding:1rem 1rem 1rem;
  885.    width:100%;
  886.    height:80vh;
  887.    display:none;
  888.    box-sizing:border-box;
  889.    overflow:auto;
  890.    border:1px solid {color:borders};
  891.    background:white;
  892.    border-radius:4px;
  893.    font-size:1.1rem;
  894.    line-height:170%;
  895.    letter-spacing:.02rem;
  896. }
  897. .active-chapter-tab {display: block;}
  898.  
  899.  
  900. .inside-chapter{
  901.    animation:fadeEffect 1s;
  902. }
  903.  
  904.  
  905. @keyframes fadeEffect {
  906.    from{opacity:0} to {opacity:1}
  907. }
  908.  
  909. #chapter-navigation {
  910.    width:100%;
  911.    background:{color:accents};
  912.    position:absolute;top:0;left:0;right:0;
  913.    width:100%;
  914.    max-width:40rem;
  915.    padding:1rem;opacity: 1;
  916.    box-sizing:border-box;
  917.    border-top-left-radius:4px;
  918.    border-top-right-radius:4px;
  919.    text-align:right;
  920.    position:relative;
  921.    border:1px solid {color:borders};
  922.    border-bottom:0;
  923. }
  924.  
  925. #chapter-label {
  926.    font:600 1rem 'Montserrat', sans-serif;
  927.    text-transform:uppercase;
  928.    letter-spacing:.03rem;
  929.    margin-right:1rem;
  930. }
  931.  
  932. #chapter-navigation select{
  933.    border:2px solid white;
  934.    padding:.3rem;
  935. }
  936. #select-chapter {
  937.    font-size:1.1rem;
  938.    position:relative;
  939.    background: {color:accents};
  940.    font-size:uppercase!important;
  941.    margin-right:1rem;
  942. }
  943.  
  944. #select-chapter {
  945.    font-size:1rem;
  946.    text-transform: uppercase;
  947.    font:500 1rem 'Montserrat', sans-serif;
  948.    
  949. }
  950.  
  951.  
  952.  
  953. /* blog */
  954.  
  955.  
  956. #blog {
  957.    display:flex;
  958.    flex-flow:column nowrap;
  959.    min-height:100vh;
  960.    align-items:center;
  961.    align-content:center;
  962.    
  963.    {block:AskPage}
  964.    height:100vh;
  965.    justify-content:center;
  966.    {/block:AskPage}
  967.    {block:SubmitPage}
  968.    height:100vh;
  969.    justify-content:center
  970.    {/block:SubmitPage}
  971. }
  972.  
  973. .sticky-date {
  974.    position:sticky;
  975.    top:7.5rem;
  976.    float:right;
  977.    margin:3.3rem -4.8rem 0 0;
  978.    text-align:center;
  979.    width:3rem;
  980.    text-transform: uppercase;
  981.    font:500 .85rem 'Montserrat', sans-serif;
  982.    letter-spacing:.05rem;
  983. }
  984.  
  985. .post-type {
  986.    position:sticky;
  987.    top:4rem;
  988.    float:right;
  989.    margin:0rem  -4rem 4.3rem 0;
  990.    height:2.1rem;
  991.    width:2.1rem;
  992.    text-align:center;
  993. }
  994. .post-type .th {
  995.    margin:0rem 0 0rem 0;
  996.    background:{color:posts};
  997.    padding:.7rem;
  998.    font-size:1.2rem;
  999.    color:{color:icons color};
  1000.    border:1px solid {color:borders};
  1001.    box-shadow: 2px 2px 2px #eee;
  1002. }
  1003.  
  1004. .day-date {margin:.3rem 0 0 0;display:block;
  1005.    color:#888;}
  1006.  
  1007. #posts .posts{
  1008.    padding:1rem;
  1009.    width:{select:post size};
  1010.    max-width:calc(95vw - 6rem);
  1011.    margin:6rem auto 13rem;
  1012.    position:relative;
  1013.    word-break:break-word;
  1014.    {block:SubmitPage}
  1015.    margin:2rem auto ;
  1016.    {/block:SubmitPage}
  1017. }
  1018.  
  1019. #posts .posts:last-of-type {
  1020.    margin-bottom:6rem;
  1021. }
  1022.  
  1023.  
  1024. .posttitle {
  1025.    margin:0 0 -1px ;
  1026.    font:600 1.5rem 'Montserrat',sans-serif;
  1027.    letter-spacing:.02rem;
  1028.    border:1px solid {color:borders};
  1029.    background:{color:posts};
  1030.    line-height:160%;
  1031.    padding:1rem;
  1032. }
  1033. .posttitle:first-letter {
  1034.    background:{color:accents};
  1035.    line-height:200%;
  1036.    padding:.5rem 1rem;
  1037.    margin-right:.3rem;
  1038.    text-transform:uppercase;
  1039.    
  1040. }
  1041.  
  1042.  
  1043. #pinned-post {margin:0;border:1px solid #eee;text-align:center;font:600 .95rem 'Montserrat', sans-serif;padding:1rem;background:{color:accents}}
  1044.  
  1045.  
  1046. .photo {display: block;margin: 0;width:100%;}
  1047.  
  1048. /*               posts              */
  1049.  
  1050. .link-post {display:block;border:1px solid {color:borders};padding:1rem;font:500 1.2rem 'Montserrat', sans-serif;text-transform:uppercase;font-weight:600;letter-spacing:.07rem;color:#666;background:{color:accents};transition-duration:.4s;}
  1051.  
  1052. .link-post:hover {
  1053.    background:{color:links}
  1054. }
  1055.  
  1056. .link-excerpt {text-transform:none;font-weight:500;margin-top:.6rem; font-size:.9rem!important;color:#aaa}
  1057.  
  1058. .text-post {
  1059.    line-height:170%;
  1060.    letter-spacing:.02rem;
  1061. }
  1062.  
  1063. /*      photosets      */
  1064.  
  1065. .photoset-grid img{
  1066.  margin:0px;
  1067. }
  1068.  
  1069. [photoset-layout] {
  1070.  grid-gap: 1px
  1071. }
  1072.  
  1073. /*      asks        */
  1074.  
  1075.  
  1076. .ask-post {
  1077.    line-height:170%;
  1078.    letter-spacing:.03rem;
  1079. }
  1080.  
  1081. .asker-wrap {
  1082.    background:{color:accents};padding:1rem 1rem 0;border:1px solid {color:borders};border-bottom:0;font-family:'Montserrat', sans-serif;font-weight:500;
  1083.    text-transform:uppercase;
  1084. }
  1085. img.asker-img {
  1086.    display:inline-block;vertical-align:middle;height:3rem;width:3rem;border-radius:400px;margin-right:1rem;margin-bottom:-1rem;
  1087. }
  1088. .asker {margin-top:1rem;
  1089.    display:inline-block;vertical-align:bottom;
  1090. }
  1091. .asker a {vertical-align:bottom;}
  1092. .answerer a{vertical-align:bottom;color:{color:links hover};}
  1093. .asker a:hover {color:{color:links}}
  1094. .q {padding:1.5rem 1rem 1rem;background:{color:posts};border:1px solid {color:borders};border-top:0;}
  1095.  
  1096. .answer {background:{color:posts};margin-top:1rem;border:1px solid {color:borders};}
  1097. img.answerer-img {
  1098.    width:3rem;height:3rem;display:inline-block;vertical-align:middle;border-radius:4px;margin-right:1rem;
  1099. }
  1100. .answerer-wrap {padding:1rem;
  1101.    background:{color:accents};
  1102.    padding:0 1rem;
  1103. }
  1104. .answerer {display:inline-block;vertical-align:middle;font-family:'Montserrat', sans-serif;font-weight:500;
  1105.    text-transform:uppercase;}
  1106. .reply {padding:1rem;
  1107. }
  1108.  
  1109.  
  1110. /*    chat    */
  1111. .chat-line_odd {
  1112.    background:#fff;
  1113.    padding:.8rem;
  1114.    border:1px solid {color:borders};
  1115. }
  1116. .chat-line_even {
  1117.    background:#fff;
  1118.    text-align:right;
  1119.    padding:.8rem;
  1120.    border:1px solid {color:borders};
  1121. }
  1122. .chat-label_odd {
  1123.    padding:.8rem;
  1124.    font-weight:500;
  1125.    font-family:'Montserrat', sans-serif;
  1126.    background:{color:links};
  1127.    text-transform:uppercase;
  1128.  
  1129. }
  1130. .chat-label_even {
  1131.    padding:.8rem;
  1132.    font-weight:500;
  1133.    font-family:'Montserrat', sans-serif;
  1134.    background:{color:accents};
  1135.    text-align:right;
  1136.    text-transform:uppercase;
  1137. }
  1138.  
  1139. /*    quotes    */
  1140. .quote {
  1141.    font:400 1.5rem 'Cardo', serif;
  1142.    font-style:italic;
  1143.  
  1144. }
  1145. .qsrc {
  1146.    margin-top:1rem;
  1147.    text-align:right;
  1148. }
  1149.  
  1150. /*  audio   */
  1151. #youtube_iframe {display:block;margin:0;}
  1152. iframe.spotify_audio_player {height:80px;overflow:hidden;}
  1153.  
  1154. /*  captions    */
  1155.  
  1156. .capt {
  1157.    padding:1rem;
  1158.    border:1px solid {color:borders};
  1159.    background:{color:posts};
  1160.    margin-top:-1px;
  1161. }
  1162. .cimg {display:none;}
  1163. .user {font:600 .9rem 'Open Sans', sans-serif;text-transform:uppercase;letter-spacing:.04rem;}
  1164. .userd:after {
  1165.    color:#aaa;
  1166.    margin-left:.5rem;
  1167.    content:' (deactivated)';
  1168.    display:inline-block;
  1169. }
  1170. /* extras */
  1171.  
  1172. .pnotes {
  1173.    font-size:.9rem;
  1174.    color: #aaa;letter-spacing:.03rem;
  1175. }
  1176.  
  1177. .rl {
  1178.    margin-top:.3rem;
  1179. }
  1180. svg {width:13px;height:auto;opacity:.5;display:block;overflow:visible;}
  1181. .controls {display:inline-block;margin:.2rem .2rem 0 .6rem;}
  1182. .controls .like .liked + svg {opacity:1;}
  1183. .controls .like .liked + svg path {fill:#ec5a5a;}
  1184. .controls .like .like_button {position:relative;}
  1185. .controls .like .like_button iframe {position:absolute;top:0;left:0;bottom:0;right:0;z-index:2;opacity:0;}
  1186.  
  1187.  
  1188. .tags {
  1189.    line-height:180%;
  1190.    margin-top:1rem;
  1191.    color:#aaa;
  1192. }
  1193.  
  1194. .tags a {margin-right:1rem;}
  1195.  
  1196. .posts-note {
  1197.    margin-top:1rem;
  1198.    vertical-align:middle;
  1199.    float:right;
  1200. }
  1201. .th-bookmark-1 {
  1202.    color:{color:icons color};
  1203.    font-size:1.3rem;
  1204.    margin-right:1rem;
  1205.    vertical-align:bottom;
  1206. }
  1207.  
  1208. .notes {
  1209.    letter-spacing:.03rem;
  1210.    font-size:.9rem;
  1211.    line-height:2rem;
  1212.    margin:4rem auto 2rem;}
  1213. .notes a{font-style:italic;}
  1214. .notes img{display:none;}
  1215. .notes li, .notes ol {margin:0;padding:0;list-style-type:none;}
  1216. .notes ol{max-height:30rem;overflow:auto;}
  1217.  
  1218. .via-source {
  1219.    font-family:'Montserrat', sans-serif;
  1220.    text-transform:lowercase;
  1221.    margin-top:1rem;
  1222. }
  1223. .via-source .th {
  1224.    color:{color:icons color};
  1225.    font-size:1.3rem;
  1226.    margin-right:.7rem;
  1227.    vertical-align:middle;
  1228. }
  1229. .post-via {
  1230.    margin:1rem 0 .5rem;
  1231. }
  1232. .post-source {
  1233.    margin-top:1rem;
  1234.    
  1235. }
  1236.  
  1237. .pagi {
  1238.    width:90%;
  1239.    margin:0 auto 4rem;
  1240. }
  1241. .pagi .th {
  1242.    font-size:1.7rem;
  1243. }
  1244.  
  1245.  
  1246. .jump-next {float:right;}
  1247. .jump-back {float:left;}
  1248.  
  1249.  
  1250. /* show carousel navi on certain pages */
  1251.  
  1252. .custom-show-carousel-{CurrentPage} {display:none;}
  1253. .custom-show-carousel-1 {display:block;}
  1254. .custom-carousel {display: block;}
  1255.  
  1256. .wrapper .th-chevron-left {padding:.5rem .5rem .5rem}
  1257. .wrapper:not(.wrap-1) .custom-carousel.page-1,
  1258. .wrapper:not(.is-homepage) .custom-carousel.page-1 {
  1259.    /* hides page 1 content on all pages */
  1260.    /* hides content if it's not the homepage */
  1261.     display: none;
  1262. }
  1263. .wrapper.is-homepage.wrap-1 .custom-carousel.all-pages {
  1264.     /* hides regular content on page 1 */
  1265.     display: none;
  1266. }
  1267.  
  1268. /* not found page */
  1269.  
  1270. .wrapper_notfound {
  1271.     position: fixed;
  1272.     visibility:hidden;
  1273.     left: 0px;
  1274.     top: 0px;
  1275.     width: 100%;
  1276.     height: 100%;
  1277.     background-color: {color:background};
  1278.     z-index: 0;
  1279. }
  1280.  
  1281. .actual_notfound {
  1282.     position: absolute;
  1283.     left:50%;
  1284.     top:50%;
  1285.     font-family:'Montserrat', sans-serif;
  1286.     transform:translate(-50%, -50%);
  1287.     width:calc(600px + 0.25vw);
  1288.     font-size:calc(22px + 0.25vw);
  1289.     line-height:170%;
  1290.     text-align: center;
  1291. }
  1292.  
  1293. .actual_notfound a {
  1294.     color:#444;
  1295.     text-decoration: none;
  1296.     border-bottom:3px solid {color:borders};
  1297. }
  1298.  
  1299.  
  1300. #tagtitle {
  1301.     margin-top:6rem;
  1302.     text-align:center;
  1303.     padding:0 .5rem 0rem;
  1304.     box-shadow: inset 0 -10px {color:borders};
  1305. }
  1306.  
  1307. .responsive-rl, .responsive-posts-note,.responsive-day-date {display:none;}
  1308.  
  1309.  
  1310. @media only screen and (min-width:0) and (max-width:750px) {
  1311.    
  1312.     .post-type {
  1313.         position:absolute;
  1314.         top:-2.5rem;
  1315.         float:none;
  1316.         margin:0rem  ;
  1317.         height:2.1rem;
  1318.         width:2.1rem;
  1319.         text-align:center;
  1320.     }
  1321.    
  1322.     .post-type .th {
  1323.         margin:0rem 0 0rem 0;
  1324.         background:white;
  1325.         padding:.7rem;
  1326.         font-size:1.2rem;
  1327.         color:{color:icons color};
  1328.         border:1px solid {color:borders};
  1329.         box-shadow: 2px 2px 2px #eee;
  1330.     }
  1331.     .posts-note {display:none;}
  1332.        
  1333.         /* header*/
  1334.        
  1335.     figure.header-image {
  1336.         width:100%;
  1337.         height:10rem;
  1338.         float:none;
  1339.         margin:0;
  1340.     }
  1341.    
  1342.     #header-inside {
  1343.         width:100%;
  1344.         float:none;
  1345.     }
  1346.    
  1347.     #blog-title {margin:2rem 2rem 0 0;}
  1348.    
  1349.    
  1350.     #header-summary {max-height:calc(100% - 20rem);width:calc(95% - 4rem);}
  1351.    
  1352.    
  1353.     /* info */
  1354.    
  1355.     #information {padding:0;}
  1356.    
  1357.     #updates-data-wrapper {
  1358.         width:90%;
  1359.         max-width:40rem;
  1360.         margin:0rem auto 0;
  1361.     }
  1362.    
  1363.     /* updates */
  1364.    
  1365.     #updates, #data {
  1366.         width:100%;
  1367.         max-width:40rem;
  1368.         margin:5rem auto;
  1369.     }
  1370.    
  1371.     #updates {margin-right:0rem;}
  1372.    
  1373.     .sticky-date  {display:none}
  1374.    
  1375.     .responsive-rl {
  1376.         float:right;
  1377.         display:block;
  1378.         color:#aaa;
  1379.         margin:1rem 0 0 1.5rem;
  1380.     }
  1381.    
  1382.     .responsive-posts-note {
  1383.         font-size:1rem ;
  1384.         display:inline;
  1385.     }
  1386.    
  1387.     .responsive-day-date {
  1388.         display:block;float:right;
  1389.         text-transform: uppercase;
  1390.         font:500 .85rem 'Montserrat', sans-serif;
  1391.         letter-spacing:.05rem;
  1392.         margin-top:-2.6rem;
  1393.         color:#999;
  1394.     }
  1395. }
  1396.  
  1397. @media only screen and (min-width:0) and (max-width:550px) {
  1398.  
  1399.    
  1400.     #social {
  1401.         border:1px solid #facade;
  1402.         background:#fefefe;
  1403.         box-sizing: border-box;
  1404.         width:calc(100% - 4rem);
  1405.         margin:2rem auto 2rem;
  1406.         height:5rem;
  1407.         text-align:center;
  1408.         position:static;
  1409.        
  1410.     }
  1411.     #social ul {
  1412.     display:flex;
  1413.     height:100%;
  1414.     flex-flow:row wrap;
  1415.     justify-content:space-around;
  1416.     align-items:center;
  1417.     }
  1418.        
  1419.        
  1420.     figure.profile-image {
  1421.         float:none;
  1422.         margin:4rem auto 2rem;
  1423.     }
  1424.        
  1425.     #profile-inside {
  1426.         width:90%;
  1427.         float:none;
  1428.         margin:auto;
  1429.     }
  1430.    
  1431.    
  1432.     #profile-info {
  1433.         width:90%;
  1434.         float:none;
  1435.         margin:auto;
  1436.         text-align:center;
  1437.         height:auto;
  1438.     }
  1439.     #profile-quote {
  1440.         width:100%;
  1441.         margin:2rem auto;
  1442.         max-height:100%;
  1443.        
  1444.     }
  1445.    
  1446.     #profile-about {
  1447.         clear:both;
  1448.         font-size:.95rem;
  1449.         line-height: 170%;
  1450.     }
  1451.        
  1452.     #finished-works {
  1453.         margin:3rem auto 0;
  1454.         float:none;
  1455.         width:90%;
  1456.    
  1457.     }
  1458.    
  1459.     #ongoing-works {
  1460.         float:none;
  1461.         width:90%;
  1462.         margin:3rem auto 1rem;
  1463.     }
  1464.  
  1465. }
  1466.  
  1467.  
  1468. @media only screen and (min-height:0) and (max-height:550px) {
  1469.    
  1470.      #blog {
  1471.         {block:SubmitPage}
  1472.         display:block;
  1473.         {/block:SubmitPage}
  1474.      }
  1475.      
  1476.          .carousel-navi {
  1477.         display:block;
  1478.         overflow:scroll;
  1479.         padding:3rem 0;
  1480.     }
  1481.      
  1482. }
  1483.  
  1484.  
  1485. @media only screen and (min-width:0) and (max-width:600px) {
  1486. #profile {
  1487.     width:calc(95vw - 5rem);
  1488.     margin-left:auto;
  1489.     padding:0;
  1490.     box-sizing:border-box;
  1491.     margin-right:auto;
  1492.     }
  1493. }
  1494.  
  1495.  
  1496.  
  1497.  
  1498.  
  1499. {CustomCSS}
  1500.  
  1501.  
  1502. @-moz-document url-prefix() {
  1503.      
  1504.     .character-popup {
  1505.         position:fixed;top:350vh;
  1506.        
  1507.     }
  1508. }
  1509.  
  1510.  
  1511. </style>
  1512. </head>
  1513. <body class="fade-in">
  1514.  
  1515.          
  1516. <!-- hidden inputs -->
  1517. <input hidden type="radio" name="carousel-control" id="button_header" checked />
  1518. <input hidden type="radio" name="carousel-control" id="button_profile"/>
  1519. <input hidden type="radio" name="carousel-control" id="button_information"  />
  1520. <input hidden type="radio" name="carousel-control" id="button_characters" />
  1521. <input hidden type="radio" name="carousel-control" id="button_chapters"  />
  1522. <input hidden type="radio" name="carousel-control" id="button_blog"  />  
  1523.  
  1524.  
  1525.  
  1526. <div id="hidden-navi">
  1527.  
  1528.     <!-- hidden navigation on the left, add as many as you want -->
  1529.    
  1530.     <nav><ul>
  1531.         {block:iflink1}<li><a href="{text:Link 1 URL}">{text:Link 1}</a></li>{/block:iflink1}
  1532.         {block:iflink2}<li><a href="{text:Link 2 URL}">{text:Link 2}</a></li>{/block:iflink2}
  1533.         {block:iflink3}<li><a href="{text:Link 3 URL}">{text:Link 3}</a></li>{/block:iflink3}
  1534.         {block:iflink4}<li><a href="{text:Link 4 URL}">{text:Link 4}</a></li>{/block:iflink4}
  1535.         {block:iflink5}<li><a href="{text:Link 5 URL}">{text:Link 5}</a></li>{/block:iflink5}
  1536.     </ul></nav>
  1537.  
  1538. </div><!--hidden navi end-->
  1539.  
  1540.  
  1541.  
  1542.  
  1543. <!-- START CAROUSEL  -->
  1544. <div id="carousel">
  1545. <div class="p-wrapper">
  1546.  
  1547. {block:Homepage}
  1548. {block:IndexPage}
  1549.  
  1550. <!-- start header section -->
  1551.  
  1552. <section class="panel_header custom-show-carousel-{CurrentPage}">
  1553. <header id="header">
  1554.  
  1555.     {block:IfImageHeader}<figure class="header-image"><img class="header-image" src="{image:header image}"/></figure>{/block:IfImageHeader}
  1556.    
  1557. <section id="header-inside">
  1558.  
  1559.         <h1 id="blog-title">
  1560.        
  1561.         <!-- blog title -->
  1562.        
  1563.             {title}
  1564.            
  1565.         </h1>
  1566.  
  1567.         <article id="header-summary">
  1568.                
  1569.             <!-- summary -->
  1570.            
  1571.             {text:summary}
  1572.            
  1573.         </article> <!-- header text end -->
  1574.        
  1575. </section>
  1576. </header>
  1577. </section> <!-- end header section -->
  1578.  
  1579. <section class="panel_profile custom-show-carousel-{CurrentPage}">
  1580.  
  1581. <!-- start profile -->
  1582. <section id="profile">
  1583.  
  1584.     <article id="social"><ul>
  1585.            
  1586.         <li title="twitter"><a href=""><i class="th th-twitter-o"></i></a></li>
  1587.        
  1588.         <li title="instagram"><a href=""><i class="th th-instagram-o"></i></a></li>
  1589.        
  1590.         <li title="facebook"><a href=""><i class="th th-facebook-o"></i></a></li>
  1591.        
  1592.         <li title="archive of our own"><a href=""><i class="th th-ao3"></i></a></li>
  1593.        
  1594.         <li title="fanfiction.net"><a href=""><i class="th th-fanfiction-net"></i></a></li>
  1595.        
  1596.         <li title="ko-fi"><a href=""><i class="th th-ko-fi"></i></a></li>
  1597.  
  1598.         <li title="patreon"><a href=""><i class="th th-patreon"></i></a></li>
  1599.  
  1600.     </ul></article>
  1601.    
  1602.    
  1603. <div id="profile-inside">
  1604.  
  1605.     <!-- profile image-->
  1606.    
  1607.     <figure class="profile-image"><img class="profile-image" src="PROFILE IMAGE URL" alt="profile image"></figure>
  1608.  
  1609.     <article id="profile-info">
  1610.    
  1611.         <h2 id="profile-name">
  1612.             <!-- name -->
  1613.            
  1614.             name
  1615.            
  1616.         </h2>
  1617.        
  1618.         <!-- details -->
  1619.        
  1620.         info | info2
  1621.  
  1622.         <article id="profile-quote">
  1623.         <!-- quote-->
  1624.             add a quote, if you wish
  1625.             add a quote, if you wish
  1626.             add a quote, if you wish
  1627.             add a quote, if you wish
  1628.             add a quote, if you wish
  1629.             add a quote, if you wish
  1630.             add a quote, if you wish
  1631.             add a quote, if you wish
  1632.             add a quote, if you wish
  1633.             add a quote, if you wish
  1634.             add a quote, if you wish
  1635.         </article>
  1636.  
  1637.     </article>     <!-- profile info end -->
  1638.  
  1639.     <article id="profile-about">
  1640.    
  1641.         <!-- profile about -->
  1642.        
  1643.         <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus tincidunt condimentum. Nam commodo feugiat augue, vitae fermentum ex hendrerit vitae. Phasellus v<p>olutpat nibh sed elit vulputate venenatis. Sed ullamcorper viverra dui, gravida ultricies lorem. Pellentesque id magna dignissim, aliquet nunc non, tempus purus. Mauri<p>s non nibh quis massa gravida tempus a non metus. Curabitur elementum imperdiet augue eu pellentesque.<p> Ut sodales cursus aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
  1644.  
  1645.     </article>
  1646.    
  1647.     <!-- projects start -->
  1648.  
  1649.     <article id="finished-works">
  1650.    
  1651.         <!-- project header -->
  1652.        
  1653.         <h2 class="work-header">finished projects</h2>
  1654.    
  1655.         <!-- project 1 -->
  1656.  
  1657.         <div class="work-name">name</div>
  1658.        
  1659.         <div class="work-description">description</div>
  1660.        
  1661.         <!-- project 2 -->
  1662.  
  1663.         <div class="work-name">name</div>
  1664.        
  1665.         <div class="work-description">description</div>
  1666.  
  1667.  
  1668.     </article>
  1669.  
  1670.  
  1671.     <article id="ongoing-works">
  1672.  
  1673.         <!-- project header -->
  1674.        
  1675.         <h2 class="work-header">on going projects</h2>
  1676.        
  1677.         <!-- project 1 -->
  1678.  
  1679.         <div class="work-name">name</div>
  1680.        
  1681.         <div class="work-description">description</div>
  1682.        
  1683.         <!-- project 2 -->
  1684.  
  1685.         <div class="work-name">name</div>
  1686.        
  1687.         <div class="work-description">description</div>
  1688.     </article>
  1689.  
  1690. </div>
  1691.  
  1692. <div style="clear:both"></div>
  1693. </section><!-- #profile end-->
  1694. </section><!-- profile tab end-->
  1695.  
  1696. <!-- start information section -->
  1697.  
  1698. <section class="panel_information custom-show-carousel-{CurrentPage}">
  1699. <section id="information">
  1700. <div id="updates-data-wrapper">
  1701.  
  1702. <article id="updates">
  1703.     <h2 class="updates-title">
  1704.        
  1705.         <i class="th th-calendar-1-o"></i>
  1706.        
  1707.         updates
  1708.        
  1709.     </h2>
  1710.  
  1711.     <div id="updates-inside">
  1712.        
  1713.         <!-- updates -->
  1714.        
  1715.         <div class="update-date">01.02.20</div>
  1716.         <div class="update-line">this is what happened</div>
  1717.        
  1718.         <div class="update-date">01.02.20</div>
  1719.         <div class="update-line">this is what happened</div>
  1720.    
  1721.     </div><!-- updates inside scroll -->
  1722. </article>        <!-- end #updates -->
  1723.  
  1724.         <!-- start #data-->
  1725. <article id="data">
  1726.    
  1727.     <h2 class="data-title">
  1728.         <i class="th th-information"></i>
  1729.        
  1730.         info
  1731.        
  1732.     </h2>
  1733.    
  1734. <div id="data-inside">
  1735.    
  1736.     <div class="data-name">title</div>
  1737.    
  1738.     <div class="data-line">text text text</div>
  1739.    
  1740.    
  1741.     <div class="data-name">title 2</div>
  1742.    
  1743.     <div class="data-line">text 2</div>
  1744.    
  1745.  
  1746. </div> <!-- updates inside end/scroll -->
  1747. </article> <!-- #data -->
  1748. </div>    <!-- updates & data wrapper-->
  1749.    
  1750. <!-- start progress -->
  1751.  
  1752. <article id="progress">
  1753.  
  1754.     <h2 id="progress-title">
  1755.        
  1756.         <i class="th th-percentage-o"></i>
  1757.        
  1758.         progress
  1759.     </h2>
  1760.    
  1761. <div id="progress-inside">
  1762.  
  1763.     <!-- PROGRESS BAR 1-->
  1764.     <span class="progress-bar-title">
  1765.         name
  1766.     </span>
  1767.     <!-- percentage number -->
  1768.     <span class="progress-full">50%</span>
  1769.    
  1770.     <!-- make sure the % above is the same number as in the width: below this-->
  1771.     <div class="progress-bar">
  1772.     <!-- percentage bar. change the width:0-100% to 'fill' the progress bar-->
  1773.         <div class="progress-bar-inside" style="width:50%;"></div>
  1774.     </div>
  1775.     <!-- PROGRESS BAR 1 END-->
  1776.    
  1777.    
  1778.    
  1779.  
  1780.     <!-- PROGRESS BAR 2-->
  1781.     <span class="progress-bar-title">
  1782.         name
  1783.     </span>
  1784.     <!-- percentage number -->
  1785.     <span class="progress-full">25%</span>
  1786.    
  1787.     <!-- make sure the % above is the same number as in the width: below this-->
  1788.     <div class="progress-bar">
  1789.     <!-- percentage bar. change the width:0-100% to 'fill' the progress bar-->
  1790.         <div class="progress-bar-inside" style="width:25%;"></div>
  1791.     </div>
  1792.     <!-- PROGRESS BAR 2 END-->
  1793.    
  1794.    
  1795.    
  1796.    
  1797.            
  1798. </div>        <!-- #progressi-inside end -->
  1799. </article>    <!-- end #progress-->
  1800.    
  1801.     <!-- start faq -->
  1802.    
  1803. <article id="faq">
  1804.  
  1805.     <h2 id="faq-title">
  1806.        
  1807.         <i class="th th-question"></i>
  1808.        
  1809.         faq
  1810.    
  1811.     </h2>
  1812.    
  1813.     <div id="faq-note">
  1814.         <h2 class="faq-note-title">
  1815.  
  1816.             faq note title
  1817.  
  1818.         </h2>
  1819.        
  1820.         <p>faq note</p>
  1821.        
  1822.         <p>texty text</p>
  1823.        
  1824.     </div>
  1825.  
  1826.     <div id="accordion">
  1827.     <!-- start faq questions & answers -->
  1828.    
  1829.    
  1830.         <div class="ui-accordion-header">
  1831.            
  1832.             <p>question</p>
  1833.            
  1834.         </div>
  1835.        
  1836.         <div class="ui-accordion-content">
  1837.        
  1838.             <p>answer</p>
  1839.            
  1840.         </div>
  1841.        
  1842.        
  1843.         <div class="ui-accordion-header">
  1844.            
  1845.             <p>question</p>
  1846.            
  1847.         </div>
  1848.        
  1849.         <div class="ui-accordion-content">
  1850.        
  1851.             <p>answer</p>
  1852.            
  1853.         </div>
  1854.        
  1855.        
  1856.     </div>        <!-- #accordion -->
  1857.  
  1858. </article>    <!-- #faq -->
  1859.  
  1860. </section>     <!--#information end-->
  1861. </section>
  1862. <!-- end information tab end-->
  1863.  
  1864.  
  1865.  
  1866.                    
  1867. <section class="panel_characters custom-show-carousel-{CurrentPage}">
  1868. <!-- start characters tab -->
  1869.                
  1870. <section id="characters">
  1871. <!-- start characters -->
  1872.  
  1873.  
  1874.  
  1875.     <!-- CHARACTER 1 START -->
  1876.    
  1877. <article class="character-box">
  1878. <figure class="character-icon">
  1879.  
  1880.     <!-- character image -->
  1881.  
  1882.     <img class="character-icon" src="IMAGE URL"/>
  1883.  
  1884.     </figure>
  1885.  
  1886. <div class="character-name">
  1887.  
  1888.     <!-- character name -->
  1889.     <p>Character Name</p>
  1890.  
  1891. </div>
  1892. <div class="viewfull" onClick="openPopup(this)">view full character</div>
  1893.  
  1894. <div class="character-popup">
  1895. <i title="close" class="cancel th th-cross" onclick="closePopup();"></i>
  1896.    
  1897. <!-- popup character information -->
  1898.  
  1899. <h3 class="popup-character-name">
  1900.  
  1901. <!-- character name -->
  1902.     character name
  1903.    
  1904. </h3>
  1905. <figure class="character-photoset">
  1906.  
  1907. <!-- character photoset -->
  1908.  
  1909.     <img class="photoset-image" src="IMAGE URL"></img>
  1910.    
  1911.     <img class="photoset-image" src="IMAGE URL"></img>
  1912.    
  1913.     <img class="photoset-image" src="IMAGE URL"></img>
  1914.    
  1915.     <img class="photoset-image" src="IMAGE URL"></img>
  1916.    
  1917. </figure>
  1918. <div class="popup-character-info">
  1919.  
  1920.     <!-- character info  -->
  1921.    
  1922.     <div class="detail-line"><span class="detail-name">detail:</span> info</div>
  1923.     <div class="detail-line"><span class="detail-name">name:</span> value</div>
  1924.  
  1925.    
  1926. </div>
  1927.        
  1928. <div class="character-biography">
  1929.  
  1930.     <!-- character biography -->
  1931.  
  1932.     <p>paragraph 1</p>
  1933.    
  1934. </div>
  1935.        
  1936. <div class="character-links">
  1937.  
  1938.     <!-- character links -->
  1939.    
  1940.     <a href="LINK URL">link name</a>
  1941.    
  1942.     <a href="LINK URL">link name</a>
  1943.    
  1944. </div>
  1945. </div>    <!-- char pop up end -->
  1946. </article>
  1947.     <!-- CHARACTER 1 END -->
  1948.    
  1949.    
  1950.    
  1951.     <!-- CHARACTER 2 START -->
  1952.    
  1953. <article class="character-box">
  1954. <figure class="character-icon">
  1955.  
  1956.     <!-- character image -->
  1957.  
  1958.     <img class="character-icon" src="IMAGE URL"/>
  1959.  
  1960.     </figure>
  1961.  
  1962. <div class="character-name">
  1963.  
  1964.     <!-- character name -->
  1965.     <p>Character Name</p>
  1966.  
  1967. </div>
  1968. <div class="viewfull" onClick="openPopup(this)">view full character</div>
  1969. <div class="character-popup"><i title="close" class="cancel th th-cross" onclick="closePopup();"></i>
  1970.    
  1971. <!-- popup character information -->
  1972.  
  1973. <h3 class="popup-character-name">
  1974.  
  1975. <!-- character name -->
  1976.     character name
  1977.    
  1978. </h3>
  1979. <figure class="character-photoset">
  1980.  
  1981. <!-- character photoset -->
  1982.  
  1983.     <img class="photoset-image" src="IMAGE URL"></img>
  1984.    
  1985.     <img class="photoset-image" src="IMAGE URL"></img>
  1986.    
  1987.     <img class="photoset-image" src="IMAGE URL"></img>
  1988.    
  1989.     <img class="photoset-image" src="IMAGE URL"></img>
  1990.    
  1991. </figure>
  1992. <div class="popup-character-info">
  1993.  
  1994.     <!-- character info  -->
  1995.    
  1996.     <div class="detail-line"><span class="detail-name">detail:</span> info</div>
  1997.     <div class="detail-line"><span class="detail-name">name:</span> value</div>
  1998.  
  1999.    
  2000. </div>
  2001.        
  2002. <div class="character-biography">
  2003.  
  2004.     <!-- character biography -->
  2005.  
  2006.     <p>paragraph 1</p>
  2007.    
  2008. </div>
  2009.        
  2010. <div class="character-links">
  2011.  
  2012.     <!-- character links -->
  2013.    
  2014.     <a href="LINK URL">link name</a>
  2015.    
  2016.     <a href="LINK URL">link name</a>
  2017.    
  2018. </div>
  2019. </div>    <!-- char pop up end -->
  2020. </article>
  2021.     <!-- CHARACTER 2 END -->
  2022.    
  2023.    
  2024.    
  2025.    
  2026.    
  2027.    
  2028. </section></section>     <!-- characters tab end -->
  2029.    
  2030.  
  2031. <!-- start chapters tab-->
  2032.  
  2033. <section class="panel_chapters custom-show-carousel-{CurrentPage}">
  2034. <section id="chapters">
  2035.  
  2036. <div id="chapter-navigation">
  2037.  
  2038. <label id="chapter-label">select chapter:</label>
  2039.  
  2040. <select id="select-chapter">
  2041.  
  2042.     <!-- add your chapters to the menu here
  2043.    
  2044.     NOTE: the value="" name has to be the same as the id="" name of the div under this menu
  2045.    
  2046.     -->
  2047.    
  2048.     <option value="chapter-1">chapter one</option>
  2049.    
  2050.     <option value="chapter-2">chapter two</option>
  2051.  
  2052.    
  2053. </select>
  2054. </div>  <!-- end .chapter-navigation -->
  2055.  
  2056. <!-- chapter tabs  -->
  2057.    
  2058.    
  2059. <!-- make sure the id of this div matches the value="" in the option tag above! -->  <!-- make sure to format your text!
  2060.  
  2061.         ONLY USE THE CLASS 'active-chapter-ta' FOR THE FIRST CHAPTER!
  2062. -->
  2063. <div class="chapter-tab active-chapter-tab" id="chapter-1"><div class="inside-chapter">
  2064.    
  2065.     <p> chapter 1 text here. this tab will show first by default</p>
  2066.        
  2067. </div></div>    <!-- chapter # end-->
  2068.  
  2069.  
  2070. <!-- chapter 2 -->
  2071.  
  2072. <!-- note that the div below does not have the class 'active-chapter-tab', for the chapters ahead use the template below -->
  2073. <div class="chapter-tab" id="chapter-2"><div class="inside-chapter">
  2074.    
  2075.     <p> chapter 2 text here. this tab will NOT show by default</p>
  2076.        
  2077. </div></div>    <!-- chapter # end-->
  2078.  
  2079.  
  2080. </section></section> <!-- chapters tab end-->
  2081.  
  2082.  
  2083. {/block:IndexPage}
  2084. {/block:Homepage}
  2085.  
  2086. <!-- blog tab-->
  2087.  
  2088. <main id="blog" class="panel_blog">
  2089.  
  2090. <article id="posts">
  2091. {block:TagPage}
  2092.     <h2 id="tagtitle">You're currently browsing through the "{Tag}" tag.</h2>
  2093. {/block:TagPage}
  2094. {block:Posts}
  2095.        
  2096. <article class="posts" id="{PostID}">
  2097.  
  2098. {block:Date}
  2099. <a class="responsive-day-date" href="{Permalink}" title="{TimeAgo}">{ShortDayOfWeek}</a>
  2100. {/block:Date}
  2101.  
  2102.  
  2103. {block:PinnedPostLabel}<div id="pinned-post">THIS IS A PINNED POST</div>{/block:PinnedPostLabel}
  2104.  
  2105. {block:Date}<div class="sticky-date">
  2106.  
  2107. <a class="day-date" href="{Permalink}" title="{TimeAgo}">{ShortDayOfWeek}</a>
  2108.  
  2109. <div class="rl">
  2110. <span class="rbg"><a href="{ReblogURL}" title="reblog" target="_blank"><i class="th th-reblog"></i></a></span>
  2111.  
  2112. <div class="controls"><a class="like">{LikeButton}<svg xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewbox="0 0 442.403 442.403" style="enable-background:new 0 0 442.403 442.403;" xml:space="preserve"><g><g><path d="M213.05,422.652c2.833,1.7,5.95,2.833,9.35,2.833c3.117,0,6.517-0.85,9.35-2.833c7.65-5.1,187.283-123.533,207.683-243.95    c10.483-62.333-8.783-100.867-26.633-122.117c-20.967-24.933-52.133-39.667-83.017-39.667c-10.2,0-20.117,1.7-28.9,5.1    c-43.067,16.15-72.25,44.767-88.117,64.317c-15.583-19.267-42.217-47.033-74.517-58.083c-9.917-3.4-20.683-5.1-32.017-5.1    c-28.9,0-56.383,11.9-75.367,32.867c-16.717,18.417-35.7,53.55-29.75,114.75C13.016,291.185,204.833,417.268,213.05,422.652z     M56.083,78.685c17.283-18.983,38.817-21.817,50.15-21.817c7.367,0,14.45,1.133,20.967,3.4    c39.383,13.317,70.833,63.467,71.4,63.75c3.117,5.1,8.783,8.217,14.733,7.933c5.95,0,11.333-3.4,14.45-8.5    c0.283-0.567,28.617-48.733,85.283-69.983c4.817-1.7,10.767-2.833,16.717-2.833c20.967,0,42.217,10.483,56.95,27.767    c19.267,22.667,25.783,55.533,18.983,94.633c-7.367,43.067-42.5,94.633-101.717,149.317c-33.433,30.883-66.3,54.683-81.6,65.45    c-16.15-11.05-51-36.55-86.417-68.85C74.216,262.285,39.366,209.868,35.116,167.368C31.433,128.552,38.516,97.952,56.083,78.685z"/></g></g></svg></a></div>
  2113. </div>
  2114. </div>{/block:Date}
  2115.  
  2116.  
  2117. {block:Text}
  2118.  
  2119. {block:Date}
  2120. <a href="{Permalink}" title="{TimeAgo}">
  2121. <div class="post-type">
  2122.    <div class="th th-pencil-o"></div>
  2123. </div>
  2124. </a>{/block:Date}
  2125.  
  2126. {block:Title}<h2 class="posttitle">{Title}</h2>{/block:Title}
  2127. {block:Body}<div class="capt text-post">
  2128. {block:NotReblog}{Body}{/block:NotReblog}
  2129. {block:RebloggedFrom}{block:Reblogs}
  2130. {block:HasAvatar}
  2131.    {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  2132.    {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  2133.    {/block:HasAvatar}
  2134.    {block:HasPermalink}<a target="_blank" class="user {block:IsDeactivated}userd{/block:IsDeactivated}" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  2135.    {block:HasNoPermalink}<div class="user {block:IsDeactivated}userd{/block:IsDeactivated}">{Username}</div>{/block:HasNoPermalink}
  2136.        {Body}
  2137. {/block:Reblogs}{/block:RebloggedFrom}
  2138. </div>{/block:Body}
  2139. {/block:Text}
  2140.  
  2141. {block:Answer}
  2142.  
  2143. <a href="{Permalink}" title="{TimeAgo}">
  2144. <div class="post-type">
  2145.    <div class="th th-question-o"></div>
  2146. </div>
  2147. </a>
  2148.  
  2149. <article class="ask-post">
  2150.    
  2151.    <div class="asker-wrap">
  2152.        <img class="asker-img"  src="{AskerPortraitURL-96}"/>
  2153.        
  2154.        <div class="asker">{Asker} asked:</div>
  2155.    </div>
  2156.    
  2157.    <div class="q" >{Question}</div>
  2158.    
  2159.    {block:Answerer}
  2160.    
  2161.    <div class="answer">
  2162.    
  2163.    <div class="answerer-wrap">
  2164.        <img class="answerer-img" src="{AnswererPortraitURL-96}"/>
  2165.        
  2166.        <div class="answerer">{Answerer} answered:</div>
  2167.    </div>
  2168.    
  2169.        <div class="reply">{Answer}</div>
  2170.    </div>
  2171.  
  2172.    {/block:Answerer}
  2173. </article>
  2174.    {block:NotReblog}{Replies}
  2175.    {/block:NotReblog}
  2176.    {block:RebloggedFrom}
  2177. {block:Reblogs}<div class="capt">
  2178. {block:HasAvatar}
  2179.    {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  2180.    {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  2181.    {/block:HasAvatar}
  2182.    {block:HasPermalink}<a target="_blank" class="user {block:IsDeactivated}userd{/block:IsDeactivated}" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  2183.    {block:HasNoPermalink}<div class="user {block:IsDeactivated}userd{/block:IsDeactivated}">{Username}</div>{/block:HasNoPermalink}
  2184.        {Body}
  2185. </div>{/block:Reblogs}{/block:RebloggedFrom}
  2186.  
  2187. {/block:Answer}
  2188.  
  2189.  
  2190. {block:Quote}
  2191.  
  2192. <a href="{Permalink}" title="{TimeAgo}">
  2193. <div class="post-type">
  2194.    <div class="th th-quote-down-o"></div>
  2195. </div>
  2196. </a>
  2197.  
  2198. <div class="quote">{Quote}</div>
  2199. {block:Source}<div class="qsrc">— {Source}</div>{/block:Source}
  2200. {/block:Quote}
  2201.  
  2202. {block:Link}
  2203.  
  2204. <a href="{Permalink}" title="{TimeAgo}">
  2205. <div class="post-type">
  2206.    <div class="th th-link"></div>
  2207. </div>
  2208. </a>
  2209. <a href="{URL}" class="link-post">{Name}
  2210. {block:Excerpt}<div class="link-excerpt">{Excerpt}</div>{/block:Excerpt}</a>
  2211.  
  2212. {block:Description}<div class="capt">
  2213. {block:NotReblog}{Description}{/block:NotReblog}
  2214. {block:RebloggedFrom}{block:Reblogs}
  2215. {block:HasAvatar}
  2216.    {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  2217.    {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  2218.    {/block:HasAvatar}
  2219.    {block:HasPermalink}<a target="_blank" class="user {block:IsDeactivated}userd{/block:IsDeactivated}" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  2220.    {block:HasNoPermalink}<div class="user {block:IsDeactivated}userd{/block:IsDeactivated}">{Username}</div>{/block:HasNoPermalink}
  2221.        {Body}
  2222. {/block:Reblogs}{/block:RebloggedFrom}
  2223. </div>{/block:Description}
  2224. {/block:Link}
  2225.  
  2226. {block:Chat}
  2227.  
  2228. <a href="{Permalink}" title="{TimeAgo}">
  2229. <div class="post-type">
  2230.    <div class="th th-chat-bubbles"></div>
  2231. </div>
  2232. </a>
  2233.  
  2234. {block:Title}
  2235. <h2 class="posttitle">{Title}</h2>{/block:Title}
  2236. {block:Lines}
  2237. {block:Label}<div class="chat-label_{alt}">{Label}</div>{/block:Label}
  2238. <div class="chat-line_{alt}">{Line}</div>
  2239. {/block:Lines}
  2240. {/block:Chat}
  2241.  
  2242. {block:Photo}
  2243.  
  2244. <a href="{Permalink}" title="{TimeAgo}">
  2245. <div class="post-type">
  2246.    <div class="th th-camera-o"></div>
  2247. </div>
  2248. </a>
  2249.  
  2250. <img src="{PhotoURL-500}" class="photo" alt="{PhotoAlt}"/>
  2251. {block:Caption}<div class="capt">
  2252. {block:NotReblog}{Caption}{/block:NotReblog}
  2253. {block:RebloggedFrom}{block:Reblogs}
  2254. {block:HasAvatar}
  2255.    {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  2256.    {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  2257.    {/block:HasAvatar}
  2258.    {block:HasPermalink}<a target="_blank" class="user {block:IsDeactivated}userd{/block:IsDeactivated}" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  2259.    {block:HasNoPermalink}<div class="user {block:IsDeactivated}userd{/block:IsDeactivated}">{Username}</div>{/block:HasNoPermalink}
  2260.        {Body}
  2261. {/block:Reblogs}{/block:RebloggedFrom}
  2262. </div>{/block:Caption}
  2263. {/block:Photo}
  2264.  
  2265. {block:Photoset}
  2266.  
  2267. <a href="{Permalink}" title="{TimeAgo}">
  2268. <div class="post-type">
  2269.    <div class="th th-app-o"></div>
  2270. </div>
  2271. </a>
  2272.  
  2273.    <div class="photoset-grid" photoset-layout="{PhotosetLayout}">{block:Photos}<div data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" data-lowres="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}" onclick="lightbox(this)"><img src="{PhotoURL-HighRes}" /></div>{/block:Photos}</div>
  2274. {block:Caption}<div class="capt">
  2275. {block:NotReblog}{Caption}{/block:NotReblog}
  2276. {block:RebloggedFrom}{block:Reblogs}
  2277. {block:HasAvatar}
  2278.    {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  2279.    {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  2280.    {/block:HasAvatar}
  2281.    {block:HasPermalink}<a target="_blank" class="user {block:IsDeactivated}userd{/block:IsDeactivated}" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  2282.    {block:HasNoPermalink}<div class="user {block:IsDeactivated}userd{/block:IsDeactivated}">{Username}</div>{/block:HasNoPermalink}
  2283.        {Body}
  2284. {/block:Reblogs}{/block:RebloggedFrom}
  2285. </div>{/block:Caption}
  2286. {/block:Photoset}
  2287.  
  2288. {block:Audio}
  2289.  
  2290. <a href="{Permalink}" title="{TimeAgo}">
  2291. <div class="post-type">
  2292.    <div class="th th-volume-o"></div>
  2293. </div>
  2294. </a>
  2295. {block:AudioEmbed}<div style="height:85px;overflow:hidden;" class="audio">{AudioEmbed}</div>{/block:AudioEmbed}
  2296. {block:Caption}<div class="capt">
  2297. {block:NotReblog}{Caption}{/block:NotReblog}
  2298. {block:RebloggedFrom}{block:Reblogs}
  2299. {block:HasAvatar}
  2300.    {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  2301.    {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  2302.    {/block:HasAvatar}
  2303.    {block:HasPermalink}<a target="_blank" class="user {block:IsDeactivated}userd{/block:IsDeactivated}" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  2304.    {block:HasNoPermalink}<div class="user {block:IsDeactivated}userd{/block:IsDeactivated}">{Username}</div>{/block:HasNoPermalink}
  2305.        {Body}
  2306. {/block:Reblogs}{/block:RebloggedFrom}
  2307. </div>{/block:Caption}
  2308. {/block:Audio}
  2309.  
  2310. {block:Video}
  2311.  
  2312. <a href="{Permalink}" title="{TimeAgo}">
  2313. <div class="post-type">
  2314.    <div class="th th-video"></div>
  2315. </div>
  2316. </a>
  2317. <div class="video">{Video-500}</div>
  2318. {block:Caption}<div class="capt">
  2319. {block:NotReblog}{Caption}{/block:NotReblog}
  2320. {block:RebloggedFrom}{block:Reblogs}
  2321. {block:HasAvatar}
  2322.    {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  2323.    {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  2324.    {/block:HasAvatar}
  2325.    {block:HasPermalink}<a target="_blank" class="user {block:IsDeactivated}userd{/block:IsDeactivated}" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  2326.    {block:HasNoPermalink}<div class="user {block:IsDeactivated}userd{/block:IsDeactivated}">{Username}</div>{/block:HasNoPermalink}
  2327.        {Body}
  2328. {/block:Reblogs}{/block:RebloggedFrom}
  2329. </div>{/block:Caption}
  2330. {/block:Video}
  2331.  
  2332.  
  2333. <div class="responsive-rl">
  2334.  
  2335. {block:NoteCount}<a class="pnotes responsive-posts-note" href="{Permalink}">{NoteCount}</a>&nbsp;&nbsp;&nbsp;&nbsp;l&nbsp;&nbsp;&nbsp;&nbsp;{/block:NoteCount}
  2336.  
  2337. <span class="rbg"><a href="{ReblogURL}" title="reblog" target="_blank"><i class="th th-reblog"></i></a></span>
  2338.  
  2339. <div class="controls"><a class="like">{LikeButton}<svg xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewbox="0 0 442.403 442.403" style="enable-background:new 0 0 442.403 442.403;" xml:space="preserve"><g><g><path d="M213.05,422.652c2.833,1.7,5.95,2.833,9.35,2.833c3.117,0,6.517-0.85,9.35-2.833c7.65-5.1,187.283-123.533,207.683-243.95    c10.483-62.333-8.783-100.867-26.633-122.117c-20.967-24.933-52.133-39.667-83.017-39.667c-10.2,0-20.117,1.7-28.9,5.1    c-43.067,16.15-72.25,44.767-88.117,64.317c-15.583-19.267-42.217-47.033-74.517-58.083c-9.917-3.4-20.683-5.1-32.017-5.1    c-28.9,0-56.383,11.9-75.367,32.867c-16.717,18.417-35.7,53.55-29.75,114.75C13.016,291.185,204.833,417.268,213.05,422.652z     M56.083,78.685c17.283-18.983,38.817-21.817,50.15-21.817c7.367,0,14.45,1.133,20.967,3.4    c39.383,13.317,70.833,63.467,71.4,63.75c3.117,5.1,8.783,8.217,14.733,7.933c5.95,0,11.333-3.4,14.45-8.5    c0.283-0.567,28.617-48.733,85.283-69.983c4.817-1.7,10.767-2.833,16.717-2.833c20.967,0,42.217,10.483,56.95,27.767    c19.267,22.667,25.783,55.533,18.983,94.633c-7.367,43.067-42.5,94.633-101.717,149.317c-33.433,30.883-66.3,54.683-81.6,65.45    c-16.15-11.05-51-36.55-86.417-68.85C74.216,262.285,39.366,209.868,35.116,167.368C31.433,128.552,38.516,97.952,56.083,78.685z"/></g></g></svg></a></div>
  2340.  
  2341. </div>
  2342.  
  2343. {block:NoteCount}<a class="pnotes posts-note" href="{Permalink}">{NoteCount}</a>{/block:NoteCount}
  2344.  
  2345.  
  2346.  
  2347. {block:HasTags}<div class="tags"><i class="th th-bookmark-1"></i>{block:Tags}
  2348. # <a href="{TagURL}">{Tag} </a>
  2349. {/block:Tags}</div>{/block:HasTags}
  2350.  
  2351.  
  2352.  
  2353. </date>{/block:Date}
  2354.  
  2355. {block:PermalinkPage}
  2356. {block:RebloggedFrom}<div class="via-source">
  2357.  
  2358. <p class="post-via" title="{ReblogParentTitle}"><i class="th th-reblog"></i>via &nbsp;<a href="{ReblogParentURL}">{ReblogParentName}</a><p>
  2359.  
  2360. <p class="post-source" title="{ReblogRootTitle}"><i class="th th-location-4-o"></i>source &nbsp;<a href="{ReblogRootURL}">{ReblogRootName}</a></p>
  2361.  
  2362. </div>{/block:RebloggedFrom}
  2363. {/block:PermalinkPage}
  2364.  
  2365. <!-- {block:ContentSource}{SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}"height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->{/block:ContentSource}<!--{block:NoRebloggedFrom}{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}{/block:NoRebloggedFrom} -->
  2366.  
  2367. {block:PostNotes}
  2368. <div class="notes">{PostNotes}</div>
  2369. {/block:PostNotes}
  2370.  
  2371. </article> <!--posts-->
  2372.  
  2373. {/block:Posts}
  2374.  
  2375. </article> <!-- #posts -->
  2376.  
  2377. {block:Pagination}<div class="pagi">
  2378. {block:PreviousPage}<a href="{PreviousPage}" class="jump-back" title="previous page"><i class="th th-left-arrow"></i></a>{/block:PreviousPage}
  2379. {block:NextPage}<a href="{NextPage}" class="jump-next" title="next page"><i class="th th-right-arrow"></i></a>{/block:NextPage}</div>
  2380. {/block:Pagination}
  2381.  
  2382. </main>
  2383.  
  2384.  
  2385. </section><!-- end blog tab -->
  2386.                
  2387.                    
  2388. </div>
  2389. <!-- end .p-wrapper -->
  2390. </div>
  2391. <!-- END CAROUSEL  -->  
  2392.  
  2393.  
  2394. <!-- carousel nav for /page/2 onwards -->
  2395.  
  2396. <div class="carousel-button-checked wrapper wrap-{CurrentPage} {block:Homepage}is-homepage{/block:Homepage}">
  2397.  
  2398. <div class="custom-carousel all-pages">
  2399.    <nav class="carousel-navi"><ul>
  2400.    
  2401.    
  2402.         <li class="open-menu"><div class="th th-dial-o"></div>
  2403.    <p class="open-menu-title">menu</p>
  2404. </li>
  2405.    
  2406.    <a href="/" style="color:{color:icons color}">
  2407.    <li class="label_home_nav">
  2408.        <i class="th th-chevron-left"></i>
  2409.    
  2410.        <div class="linkslide-home-nav">back home</div>
  2411.    
  2412.    </li></a>
  2413.    
  2414.    <!-- search button -->
  2415.    <li title="search" class="search-button"><i class="th th-loupe-o"></i>
  2416.    <div class="linkslide">search</div></li>
  2417.    
  2418.    </ul></nav>
  2419. </div>
  2420. <!-- end carousel nav for /page/2 onwards -->
  2421.  
  2422.  
  2423. <!-- carousel nav for /page/1 only -->
  2424. <div class="carousel-button-checked custom-carousel page-1">
  2425.    
  2426.    <nav class="carousel-navi"><ul>
  2427.  
  2428.            <!-- button to open the hidden navigation on the left -->
  2429.  
  2430.         <li class="open-menu"><div class="th th-dial-o"></div>
  2431.    <p class="open-menu-title">menu</p>
  2432. </li>
  2433.        
  2434.        <li title="header"><label for="button_header" class="label_header">
  2435.        
  2436.        <i class="th th-home-o"></i></label>
  2437.            
  2438.        
  2439.            <div class="linkslide">header</div>
  2440.            
  2441.        </li>
  2442.        
  2443.        
  2444.            
  2445.        <li title="profile"><label for="button_profile" class="label_profile">
  2446.        
  2447.        <i class="th th-user-o"></i></label>
  2448.            
  2449.        
  2450.            <div class="linkslide">profile</div>
  2451.            
  2452.        </li>
  2453.        
  2454.        
  2455.        
  2456.        
  2457.        <li title="information"><label for="button_information" class="label_information"><i class="th th-information-o"></i></label>
  2458.            
  2459.            <div class="linkslide">information</div>
  2460.        </li>
  2461.        
  2462.        <li title="characters"><label for="button_characters" class="label_characters"><i class="th th-users-o"></i></label>
  2463.            
  2464.            <div class="linkslide">characters</div>
  2465.        </li>
  2466.        
  2467.        <li title="chapters"><label for="button_chapters" class="label_chapters"><i class="th th-notebook-o"></i></label>
  2468.            
  2469.            <div class="linkslide">chapters</div>
  2470.        </li>
  2471.        
  2472.        <li title="blog"><label for="button_blog" class="label_blog"><i class="th th-tumblr-o"></i></label>
  2473.            
  2474.            <div class="linkslide">blog</div>
  2475.        </li>
  2476.    
  2477.        <!-- search button -->
  2478.        <li title="search" class="search-button"><i class="th th-loupe-o"></i>
  2479.            <div class="linkslide">search</div></li>
  2480.    
  2481.    </ul></nav>
  2482.    <!-- end carousel nav -->  
  2483.  
  2484. </div>
  2485.  
  2486.    
  2487. </div> <!-- navis wrapper -->
  2488.  
  2489.  
  2490. <div class="wrapper_notfound">
  2491.    <div class="actual_notfound">
  2492.        <h1>Not Found</h1>
  2493.        
  2494.        Sorry! The URL you requested could not be found.
  2495.        
  2496.        <a href="/" style="cursor:pointer;padding: 0 .5rem .5rem;border-bottom:.5rem solid {color:borders}">However, you can go back home.</a>
  2497.    </div>
  2498.    
  2499.    
  2500.    <div class="wrapper wrap-{CurrentPage} {block:Homepage}is-homepage{/block:Homepage}">
  2501.        
  2502.        
  2503.        <div class="custom-carousel all-pages">
  2504.        
  2505.          <nav class="carousel-navi"><ul>
  2506.            
  2507.            
  2508.             <a href="/" style="color:{color:icons color}">
  2509.            <li class="label_home_nav" style="margin-bottom:1rem">
  2510.            
  2511.            
  2512.                <i style="padding:.5rem .5rem .5rem;" class="th th-chevron-left"></i>
  2513.                
  2514.            
  2515.               <div class="linkslide-home-nav">back home</div>
  2516.                
  2517.            </li>
  2518.        
  2519.            </a>
  2520.        
  2521.            <!-- search button -->
  2522.            <li title="search" class="search-button"><i class="th th-loupe-o"></i>
  2523.                <div class="linkslide">search</div></li>
  2524.        
  2525.        </ul></nav>
  2526.        
  2527.        
  2528.        </div>
  2529.    </div>
  2530. </div> <!-- end not found page -->
  2531.  
  2532.  
  2533. <!-- search form -->
  2534.  
  2535. <div id="search"><form action="/search" method="get"><input placeholder=" type and press enter..." class="sbar" type="text" name="q" value=""/></form></div>
  2536.  
  2537.  
  2538.  
  2539.  
  2540. <!-- DO NOT TOUCH-->
  2541. <a style="position:fixed;z-index:999999999;bottom:1.3rem;right:1.25rem;font-size:15px;line-height:14px;height:14px;padding:3px;color:#555;text-align:center;letter-spacing:.7px" href="https://southcodes.tumblr.com" target="_blank" title="southcodes">sc</a>
  2542.  
  2543.  
  2544.  
  2545.  
  2546. <!-- scripts -->
  2547. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  2548. <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  2549. <script src="https://rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
  2550. <script type="text/javascript">
  2551. $(document).ready(function(){
  2552.    
  2553.    // video reizing
  2554.    flexibleFrames($(".video"));
  2555.    
  2556.    
  2557.    // custom not found page
  2558.    if ($('p:contains("The URL you requested could not be found.")').html())         {
  2559.    $(".wrapper_notfound").css( "visibility", "visible" );
  2560.    $(".article_position").remove();
  2561.    $('title').prepend( "Not Found | " ); };
  2562.  
  2563.  
  2564.    // accordion faq
  2565.    $( function() {
  2566.        $( "#accordion" ).accordion({
  2567.        heightStyle: "content"
  2568.        });
  2569.    });
  2570.  
  2571.  
  2572.    // open right menu
  2573.    $(".open-menu").click(function(){
  2574.        $("#hidden-navi").fadeToggle()
  2575.    });
  2576.    
  2577.  
  2578.    // fade in search
  2579.    $(".search-button").click(function(){
  2580.        $("#search").fadeToggle()
  2581.    });
  2582.    
  2583.    
  2584.    // chapter tabs
  2585.    $('#select-chapter').on('change', function(e) {
  2586.        $('.chapter-tab').removeClass('active-chapter-tab')
  2587.        $('#' + $(e.currentTarget).val()).addClass("active-chapter-tab");
  2588.    });
  2589.  
  2590.  
  2591.    // audio posts width
  2592.    $(".audio iframe").each(function(index, elem) {elem.setAttribute("width","100%");});
  2593.  
  2594.  
  2595.    // hide reply box on asks without answers
  2596.    $( ".ask-post .reply:empty" ).parent().hide();
  2597.  
  2598.  
  2599.    // photoset css
  2600.    function gatherData(images, arr) {
  2601.      for (let i = 0; i < images.length; i++) {
  2602.        let currentData = {
  2603.          "width": images[i].getAttribute('data-width'),
  2604.          "height": images[i].getAttribute('data-height'),
  2605.          "low_res": images[i].getAttribute('data-lowres'),
  2606.          "high_res": images[i].getAttribute('data-highres')
  2607.        };
  2608.        arr.push(currentData);
  2609.      }
  2610.    }
  2611.    function getIndex(elem) {
  2612.      let i = 0;
  2613.      while( (elem = elem.previousElementSibling) != null ) i++;
  2614.      return i;
  2615.    }
  2616.    function lightbox(elem) {
  2617.      let currentPhotoset = elem.parentNode;
  2618.      let photosetPhotos = currentPhotoset.getElementsByTagName('div');
  2619.      let data = [];
  2620.      gatherData(photosetPhotos, data);
  2621.      Tumblr.Lightbox.init(data, getIndex(elem) + 1);
  2622.    }
  2623.    
  2624. });
  2625. </script>
  2626. <script>
  2627.  
  2628. // character pop ups
  2629. function openPopup(elem) {
  2630.  $(elem).next().fadeIn(200);
  2631.  $(elem).next().siblings(".character-popup").hide();
  2632. }
  2633.  
  2634. function closePopup() {
  2635.  $('.character-popup').fadeOut(300);
  2636. }
  2637. </script>
  2638.  
  2639. </body>
  2640. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!