Advertisement
tsiappoworks

Hiro Winter Wonderland

Jan 7th, 2017
98
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 28.00 KB | None | 0 0
  1. <!DOCTYPE html>
  2.  
  3. <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
  4.  
  5.  
  6. <!----------------------POPUP_BLOCK SCRIPT BELOW-------------------------->
  7. <script type="text/javascript"
  8. src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  9. <script>
  10. $(document).ready(function() {
  11. //
  12. $('a.poplight[href^=#]').click(function() {
  13. var popID = $(this).attr('rel'); //Get Popup Name
  14. var popURL = $(this).attr('href'); //Get Popup href to define size
  15. var query= popURL.split('?');
  16. var dim= query[1].split('&');
  17. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  18. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"></a>');
  19. var popMargTop = ($('#' + popID).height() + 80) / 2;
  20. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  21. //Apply Margin to Popup
  22. $('#' + popID).css({
  23. 'margin-top' : -popMargTop,
  24. 'margin-left' : -popMargLeft
  25. });
  26. $('body').append('<div id="fade"></div>');
  27. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  28. return false;
  29. });
  30. $('a.close, #fade').live('click', function() {
  31. $('#fade , .popup_block, .popup_block2').fadeOut(function() {
  32. $('#fade, a.close').remove(); //fade them both out
  33. });
  34. return false;
  35. });
  36. });
  37. </script>
  38. <!-------------------- VERSES SCRIPT BELOW -------------------->
  39. <script src="http://static.tumblr.com/dxh5xq2/v6Gn8ju1e/tabs.js"></script>
  40.  
  41. <title>{Title}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
  42. <link rel="shortcut icon" href="" />
  43. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  44.  
  45. <meta name="color:Accent" content="#eaeaea" />
  46. <meta name="color:Accent2" content="#333333" />
  47. <meta name="color:Accent3" content="#ffffff" />
  48. <meta name="color:body font" content="#707070" />
  49. <meta name="color:Page BG" content="#dfdfdf" />
  50.  
  51. <meta name="text:LinkSymbol" content="✕" />
  52.  
  53. <script type="text/javascript" src="http://static.tumblr.com/86jccts/wpsmuemne/hoverqtip.js"></script>
  54.  
  55. <style type="text/css">
  56.  
  57. ::-webkit-scrollbar-thumb{
  58. background-color: transparent;
  59. height:auto;
  60. }
  61.  
  62. ::-webkit-scrollbar {
  63. background-color:transparent;
  64. height:auto;
  65. width:4px;
  66. }
  67.  
  68. hr {
  69. border: 0;
  70. height: 1px;
  71. background-image: linear-gradient(to right, rgba(55, 62, 33, 0), rgba(55, 62, 33, 0.75), rgba(55, 62, 33, 0));
  72. }
  73.  
  74. h1 {
  75. font-weight:normal;
  76. font-size:22px;
  77. text-align:center;
  78. font-style:normal;
  79. line-height:100%;
  80. letter-spacing:1px;
  81. text-transform:normal;
  82. color:{color:accent2};
  83. font-family: 'Oswald', sans-serif;
  84. }
  85.  
  86. h2 {
  87. font-size:26px;
  88. text-align:center;
  89. line-height:100%;
  90. letter-spacing:-0.5px;
  91. color:{color:accent2};
  92. font-weight:bold;
  93. padding:5px;
  94. font-family: 'Oswald', sans-serif;
  95. }
  96.  
  97. blockquote {
  98. padding:2px 5px 2px 10px;
  99. margin:5px;
  100. border-left:2px solid {color:body font};
  101. -moz-border-radius: 15px;
  102. -webkit-border-radius: 15px;
  103. }
  104.  
  105. blockquote img {
  106. max-width:100%;}
  107.  
  108. body {
  109. background:{color:Page BG};
  110. background-image:url('http://static.tumblr.com/oh3xcbq/HBDoje2za/hirobg.png');
  111. background-position:left top fixed;
  112. background-repeat:no-repeat;
  113. color:{color:body font};
  114. font-size:11px;
  115. line-height:120%;
  116. word-wrap: break-word;
  117. font-family:Calibri, helvetica, arial, sans-serif;
  118. }
  119.  
  120. pre {
  121. white-space: pre-wrap;
  122. white-space: -moz-pre-wrap;
  123. white-space: -pre-wrap;
  124. white-space: -o-pre-wrap;
  125. word-wrap: break-word;
  126. }
  127.  
  128. small,sub,sup {
  129. font-size:12px;
  130. font-family: calibri,helvetica,arial,sans-serif;
  131. }
  132.  
  133. b,strong {
  134. color:{color:accent2};
  135. font-size:15px;
  136. font-family: 'Oswald', sans-serif;
  137. }
  138.  
  139. em,i {
  140. color:{color:accent2};
  141. font-family: 'Oswald', sans-serif;
  142. }
  143.  
  144. s,strike {
  145. color:{color:accent2};
  146. }
  147.  
  148. u,underline {
  149. color:{color:accent2};
  150. }
  151.  
  152. a {
  153. text-decoration:none;
  154. outline:none;
  155. -moz-outline-style:none;
  156. color:{color:accent2};
  157. -moz-transition-duration:0.5s;
  158. -webkit-transition-duration:0.5s;
  159. -o-transition-duration:0.5s;
  160. }
  161.  
  162. a:hover {
  163. outline:none;
  164. -moz-outline-style:none;
  165. color:#FFFFFF;
  166. }
  167.  
  168. img{border:0; max-width:100%;max-height:auto;}
  169.  
  170. .fancytitle {
  171. font-size:11px;
  172. font-family: 'Oswald', sans-serif;
  173. padding:2px 4px;
  174. border:2px solid {color:page bg};
  175. text-align:right;
  176. margin-bottom:5px;
  177. background-image:url('http://static.tumblr.com/oh3xcbq/RZ3oje40m/selectiondarkblueblack.png');
  178. background-repeat:no-repeat;
  179. background-position: top center;
  180. color:#f9fcfc;
  181. }
  182.  
  183.  
  184. /*-----------------------------POPUP BOXES---------------------------*/
  185. .popup_block{
  186. display:none;
  187. height:493px;
  188. width:440px;
  189. overflow-y:auto transparent;
  190. overflow-x:hidden;
  191. background:#c7c7c7;
  192. background-image:url();
  193. padding:2px 5px;
  194. float:none;
  195. position:fixed;
  196. font-size:11px;
  197. top:380px;
  198. left:290px;
  199. z-index: 99999;
  200. }
  201.  
  202. *html #fade {position: absolute;}
  203. *html .popup_block {position: absolute;}
  204. #fade {
  205. display:none;
  206. position:fixed;
  207. left:0px;
  208. top:0px;
  209. width:100%;
  210. height:100%;
  211. z-index:9999;
  212. background:#000; /* change to #fff for solid white */
  213. opacity:0; /* change to opacity:1; */
  214. }
  215.  
  216. #boxy {
  217. margin-right:10px;
  218. padding-right:5px;
  219. padding-left:5px;
  220. margin-left:5px;
  221. padding-top:10px;
  222. margin-top:10px;
  223. height: 305px;
  224. width: 290px;
  225. overflow:auto;
  226. }
  227.  
  228. #boxydos {
  229. margin-top:10px;
  230. height: 448px;
  231. width: 400px;
  232. overflow:auto;
  233. }
  234.  
  235.  
  236. iframe#tumblr_controls {
  237. white-space:nowrap;
  238. -webkit-filter: invert(100%);
  239. -moz-filter: invert(100%);
  240. -o-filter: invert(100%);
  241. -ms-filter: invert(100%);
  242. filter: invert(100%);
  243. opacity:.2;transition: .8s ease-in-out;
  244. -webkit-transition: .8s ease-in-out;
  245. -moz-transition: .8s ease-in-out;
  246. -o-transition: .8s ease-in-out;
  247. }
  248.  
  249. #post {
  250. width:400px;
  251. margin:0px 0px 0px 3px;
  252. padding:10px 10px;
  253. background-color:transparent;
  254. font-family:calibri,helvetica,arial,sans-serif;
  255. color:{color:body font};
  256. }
  257.  
  258. #post .text{font-size:11px; line-height:16px;}
  259. #post .title{font-size:20px;;line-height:22px;}
  260. #post .text ul li{list-style-type:circle;}
  261.  
  262. #container {
  263. position:fixed;
  264. overflow-y:scroll;
  265. overflow-x:auto;
  266. padding:1px;
  267. width:430px;
  268. height:495px;
  269. left:38px;
  270. top:94px;
  271. }
  272.  
  273.  
  274. div#qTip {
  275. background-image:url('http://static.tumblr.com/oh3xcbq/RZ3oje40m/selectiondarkblueblack.png');
  276. border:1px solid white;
  277. padding: 5px;
  278. display: none;
  279. text-align: center;
  280. position: absolute;
  281. font-size:13px;
  282. line-height:10px;
  283. z-index: 9999999;
  284. color:{color:accent3};
  285. letter-spacing: 1px;
  286. font-family: 'Oswald', sans-serif;
  287. }
  288.  
  289. /*-------------------------PERMALINKS AND TAGS------------------------*/
  290. #permalink{
  291. position:absolute;
  292. z-index:9;
  293. margin-top:-5px;
  294. padding:3px;
  295. font-size:10px;
  296. text-align:center;
  297. text-transform:uppercase;
  298. font-family:calibri,helvetica,arial,sans-serif;
  299. color:{color:accent};
  300. background:url('http://static.tumblr.com/oh3xcbq/RZ3oje40m/selectiondarkblueblack.png');
  301. width:300px;
  302. margin-left:60px;
  303. border:2px solid {color:page bg};
  304. }
  305.  
  306. #permalink a{color:{color:accent};vertical-align:middle;}
  307. #permalink a:hover{color:{color:accent2};}
  308.  
  309. #tags{
  310. margin-top:20px;
  311. font-size:10px;
  312. font-family:calibri,helvetica,arial,sans-serif;
  313. width:300px;
  314. text-align:center;
  315. margin-bottom:40px;
  316. margin-left:60px;
  317. }
  318.  
  319. /*------------------------EXTRA BITS AND BOBBLES----------------------*/
  320. .chat ul {list-style:none; margin:0; padding:0;}
  321. .chat li {font-size:11px;list-style-type: none;margin-left: 0px;padding: 3px;}
  322.  
  323. #notesbox{width:500px;margin:20px auto;font-size:11px;font-family:calibri,helvetica,arial,sans-serif;}
  324. #notesbox ol.notes{list-style-type:none;margin:7px 0px;padding:0px 0px;}
  325. #notesbox img.avatar{display:none;}
  326.  
  327. /*------------------- "SIDEBAR" ------------------*/
  328. #nav{
  329. position:fixed;
  330. z-index:75;
  331. margin-left:10px;
  332. margin-top:170px;
  333. width:400px;
  334. text-align:center;
  335. -ms-transform: rotate(90deg); /* IE 9 */
  336. -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
  337. transform: rotate(90deg);
  338. }
  339.  
  340. #navigation a{color:{color:accent2}; font-size:15px;}
  341.  
  342. #navigation a:hover{
  343. color:{color:accent}; text-decoration:bold;
  344. }
  345.  
  346. #pagination{
  347. font-family:Calibri, Helvetica, Arial, sans-serif;
  348. font-size:10px;
  349. text-align:center;
  350. color:{color:accent2};
  351. text-transform:uppercase;
  352. letter-spacing:3px;
  353. }
  354.  
  355. #pagination a{color:{color:accent2}; padding:0px 2px;}
  356.  
  357. /*--------------BITS AND BOBBLES-------------------*/
  358.  
  359. #audioplayer {
  360. width:30px;
  361. height:30px;
  362. overflow:hidden;
  363. position:absolute;
  364. margin-top:93px;
  365. margin-bottom:93px;
  366. margin-left:93px;
  367. }
  368.  
  369. #albumart { margin:0px 4px;}
  370.  
  371. .question {
  372. padding:9px;
  373. text-align:left;
  374. color:#bb6e8a;
  375. line-height:100%;
  376. -moz-border-radius: 6px;
  377. -webkit-border-radius: 6px;
  378. }
  379.  
  380. .answer {
  381. text-align:left;
  382. padding:7px;
  383. color:#bb6e8a;
  384. }
  385.  
  386. #ask a{color:white;
  387. }
  388.  
  389. /*-----------------------BIG BIO AHEAD------------------------*/
  390. .title {
  391. font-family: 'Oswald', sans-serif;/*title font*/
  392. font-size:70px;
  393. padding-top:100px;
  394. text-shadow:0 0 10px rgba(0,0,0,0.3);
  395. text-transform:bold;
  396. }
  397.  
  398. .subheader {
  399. margin-top:50px;
  400. }
  401.  
  402. .header {
  403. width:510px;
  404. height:200px;
  405. -webkit-transition:ease-in-out .3s;
  406. -moz-transition:ease-in-out .3s;
  407. -o-transition:ease-in-out .3s;
  408. transition:ease-in-out .3s;
  409. text-align:center;
  410. letter-spacing:1px;
  411. color:#fff;
  412. text-shadow:0 0 10px rgba(255,255,255);
  413. border-bottom:solid #fff 10px;
  414. background-color:#acacac;
  415. background-image:url(http://i.imgur.com/f64F0BG.png);
  416. background-position:center;
  417. background-size:100% auto;
  418. }
  419.  
  420. .header:hover {
  421. letter-spacing:3px;
  422. text-shadow:0 0 30px rgba(255,255,255);
  423. }
  424.  
  425. /* ---------------------SECTION TITLE CUSTOMIZATION--------------------- */
  426. .header2 {
  427. font-family: 'Oswald', sans-serif;
  428. font-size:14px;
  429. position:relative;
  430. z-index:1;
  431. width:400px;
  432. padding:5px 5px;
  433. padding-top:20px;
  434. text-align:center;
  435. letter-spacing:1px;
  436. }
  437.  
  438. .header2:before {
  439. position:absolute;
  440. z-index:-1;
  441. top:25px;
  442. right:0;
  443. bottom:0;
  444. left:0;
  445. width:95%;
  446. margin:0 auto;
  447. content:'';
  448. border-top:1px solid #dfdfdf;
  449. }
  450.  
  451. .header2 span {
  452. padding:0 5px;
  453. background:#B9B9B9;
  454. }
  455.  
  456. .content {
  457. position:relative;
  458. overflow:hidden;
  459. width:400px;
  460. min-height:75px;
  461. }
  462.  
  463. /* -----------------------TEXT SELECTION CUSTOMIZATION----------------------- */
  464. ::selection {
  465. color:#fff;
  466. background:#379eca;
  467. }
  468.  
  469. ::-moz-selection {
  470. color:#fff;
  471. background:#379eca;
  472. }
  473.  
  474. ::-webkit-selection {
  475. color:#fff;
  476. background:#379eca;
  477. }
  478.  
  479. /*---------------------------DROP CAP CUSTOMIZATION---------------------------*/
  480. #dropcap {
  481. font-family: 'Oswald', sans-serif;
  482. font-size:230%;
  483. float:left;
  484. margin-right:5px;
  485. padding:10px 3px;
  486. color:#fff;
  487. background-color:#000;
  488. }
  489.  
  490.  
  491. /* ---------------------------- UPDATES ------------------------------*/
  492.  
  493. #updates {
  494. font-size:10px;
  495. font-family:century gothic, arial;
  496. color:{color:body font};
  497. text-align:center;
  498. height:303px;
  499. width:110px;
  500. padding:0px;
  501. top:94px;
  502. left:497px;
  503. z-index:10;
  504. position:fixed;
  505. overflow-x:hidden;
  506. overflow-y:auto;
  507. }
  508.  
  509. #headerbar{
  510. width:410px; /*– sets width of your text –*/
  511. overflow:scroll;
  512. text-align:justify;
  513. color:#fff;
  514. font-family:calibri;
  515. font-size:12px;
  516. }
  517.  
  518. #tabbar{
  519. left:50%;
  520. top:50%;
  521. height:auto; /*– sets height of your text –*/
  522. overflow-y:scroll;
  523. overflow-x:hidden;
  524. text-align:justify;
  525. color:#222;
  526. font-family:calibri;
  527. font-size:11.4px;
  528. }
  529.  
  530. ul#tabs {text-align: center;}
  531. ul#tabs li { /*– your inactive / not viewed tabs –*/
  532. display:inline-block;
  533. padding:2px 3px;
  534. width:60px;
  535. cursor:pointer;
  536. text-decoration:none;
  537. margin:0px -2px;
  538. opacity:1;
  539. color:#fff;
  540. background-color:{color:body font};
  541. }
  542.  
  543. ul#tabs li.active { /*– your active tab –*/
  544. background-color:#fff;
  545. color:{color:body font};
  546. border:1px solid {color:body font};
  547. padding:1px 3px;
  548. }
  549.  
  550. ul#tab, ul#tabs{list-style-type:none;margin:0px;padding:0px;}
  551. ul#tab li.active {display: block;}
  552. ul#tab li {display: none;}
  553.  
  554.  
  555. /*--------------------CREDITS-----------------------*/
  556. #cred
  557. {
  558. width: 50px;
  559. height: 18px;
  560. font-family: Arial;
  561. font-size: 7px;
  562. text-transform: uppercase;
  563. text-align: center;
  564. bottom: 10px;
  565. right: 10px;
  566. letter-spacing: 1px;
  567. line-height: 4px;
  568. padding: 10px 3px;
  569. display: block;
  570. color:{color:body font};
  571. background: {color:page bg};
  572. position: fixed;
  573. }
  574.  
  575. #cred a
  576. {
  577. font-weight: bold;
  578. line-height: 17px;
  579. font-size: 15px;
  580. font-family: 'Oswald', sans-serif;
  581. text-transform: uppercase;
  582. color:{color:body font};
  583. letter-spacing: 6px;
  584. margin-left:5px;
  585. }
  586.  
  587. </style>
  588.  
  589. </head>
  590.  
  591.  
  592. <body style="overflow:hidden;">
  593.  
  594. <!-- begin updates tab -->
  595.  
  596. <div id="updates">
  597.  
  598. <div style="padding-top:10px;">
  599.  
  600. <b><p><span style="font-size:16px"><b>❛</b> <a href="/" title="refresh"><b>呪われた冬 </b></a> <b>❜</b></span></b><br>
  601. <div class="fancytitle">about</div>
  602. <p>SELECTIVE & PRIVATE<br>
  603. written by <b>Ghost</b>
  604. </p>
  605.  
  606. <!------------------------- NAVIGATION -------------------------->
  607. <div class="fancytitle">navigation</div><p>
  608. <div id="navigation" style="font-size:11px;">
  609. <a href="/ask" title="ask">✕</a>
  610. <a href="#?w=400" rel="story" class="poplight" title="story">✕</a>
  611. <a href="#?w=400" rel="guide" class="poplight" title="school code">✕</a>
  612. <a href="#?w=400" rel="verses" class="poplight" title="verses">✕</a>
  613. <a href="#?w=400" rel="sched" class="poplight" title="schedule">✕</a>
  614. </div></p>
  615. <!------------------------ NAV END ------------------------------>
  616. {block:Pagination}<div class="fancytitle">pagination</div><p>
  617. {block:NextPage}<a href="{NextPage}" style="color:{color:accent2};">old</a>{/block:NextPage}
  618. {block:PreviousPage}&nbsp;/&nbsp;<a href="{PreviousPage}" style="color:{color:accent2};">new</a>{/block:PreviousPage}
  619. </p>{/block:Pagination}
  620. <!---------------------- MUSIC PLAYER -------------------------->
  621. <div class="fancytitle">music</div>
  622. [PUT MUSIC PLAYER CODE HERE]
  623.  
  624.  
  625. </div></div>
  626.  
  627. <!-- end updates tab -->
  628.  
  629. </div>
  630.  
  631. <div id="container">
  632. {block:Posts}
  633.  
  634. <!--------------------------TYPES OF POSTS----------------------------->
  635. <div id="post">
  636.  
  637. {block:Photo}
  638. <img src="{PhotoURL-400}" />
  639. {block:Caption}<div class="text">{Caption}</div>{/block:Caption}
  640. {/block:Photo}
  641.  
  642. {block:Photoset}
  643. {Photoset-400}
  644. {block:Caption}<div class="text">{Caption}</div>{/block:Caption}
  645. {/block:Photoset}
  646.  
  647. {block:Video}
  648. {Video-400}
  649. {block:Caption}<div class="text">{Caption}</div>{/block:Caption}
  650. {/block:Video}
  651.  
  652. {block:Audio}
  653. <div class="musicbox">
  654. {block:AudioPlayer}{AudioPlayerBlack}{/block:AudioPlayer}
  655. <div style="background-color:rgba(255,255,255,0.5);height:100px;padding:5px;">{block:TrackName}<div class="text" style="color:{color:Accent};"><strong>{TrackName}</strong></div>{/block:TrackName}<br/>
  656. {block:Artist}<div class="text" style="margin-top:-17px;"><strong>Artist:&nbsp;</strong>{Artist}</div>{/block:Artist}<br/>
  657. {block:Album}<div class="text" style="margin-top:-17px;"><strong>Album:&nbsp;</strong>{Album}</div>{/block:Album}<br/>
  658. <div class="text" style="margin-top:-17px;">{PlayCountWithLabel}</div></div></div>
  659. {block:Caption}<div class="text">{Caption}</div>{/block:Caption}
  660. {/block:Audio}
  661.  
  662. {block:Quote}
  663. <div class="title" style="width:380px;text-align:justify;padding-top:10px;line-height:20px;">{Quote}</div>
  664. {block:Source}<div class="text" style="text-align:right;padding-right:50px;"><br/>&mdash;{Source}</div>{/block:Source}
  665. {/block:Quote}
  666.  
  667. {block:Text}
  668. {block:Title}<div class="title" style="padding-top:10px;">{Title}<br/></div>{/block:Title}
  669. <div class="text">{Body}</div>
  670. {/block:Text}
  671.  
  672. {block:Answer}<div id="ask">
  673. <div style="background-color:{color:accent2};color:white; padding:10px 10px 10px 10px;"><div class="title" style="font-size:12px;padding-top:10px;">{Question}<br/></div>
  674. <div class="text" style="text-align:right;color:white;text-decoration:underline:">&mdash;<span style="color:white">{Asker}</span><br/></div></div></div>
  675. <div class="text" style="width:400px;">{Answer}</div>
  676. {/block:Answer}
  677.  
  678. {block:Chat}
  679. {block:Title}<div class="title" style="padding-top:10px;">{Title}<br/></div>{/block:Title}
  680. {block:Lines}<div class="chat"><li class="line_{Alt}">
  681. {block:Label}<strong>{Label}</strong>{/block:Label} {Line}</li></div>
  682. {/block:Lines}
  683. {/block:Chat}
  684.  
  685. {block:Link}
  686. <div class="title" style="padding-top:10px;"><a href="{URL}">{Name}</a></div>
  687. {block:Description}<div class="text">{Description}</div>{/block:Description}
  688. {/block:Link}
  689.  
  690. </div>
  691. <!---------------------PERMALINK + REBLOG STUFF---------------------->
  692. <div id="permalink">{block:Date}<a href="{Permalink}">{DayOFMonthWithZero} {ShortMonth}</a>&nbsp;&nbsp;{/block:Date}{block:NoteCount}<a href="{Permalink}">{NoteCount}♥</a>&nbsp;&nbsp;{/block:NoteCount}{block:RebloggedFrom}<a href="{ReblogParentURL}" title="{ReblogParentName}">via</a>{/block:RebloggedFrom}{block:ContentSource}&nbsp;&nbsp;<a href="{SourceURL}" title="{SourceName}">©</a>{/block:ContentSource}<a href="{ReblogURL}" target="_blank" class="details">&nbsp;&nbsp;reblog</a></div>
  693.  
  694. <!----------------------------TAG STUFF----------------------------->
  695. <div id="tags">{block:Tags}#<a href="{TagURL}">{Tag}</a>&nbsp;&nbsp;{/block:Tags}</div>{/block:HasTags}
  696.  
  697. {block:PostNotes}
  698. <div id="notesbox">{PostNotes}</div>
  699. {/block:PostNotes}
  700. {/block:Posts}
  701. </div></div>
  702.  
  703. <iframe scrolling="no" width="1" height="1" frameborder="0" style="background-color:transparent; overflow:hidden; position:absolute; top:0; left:0; z-index:9999;" id="ga_target"></iframe>
  704.  
  705. </body>
  706.  
  707. <!-------HERE BEGIN THE POPUP BOXES------->
  708. <div id="story" class="popup_block" style="margin:0px auto;font-family:calibri, helvetica, arial, sans-serif;font-size: 11.5px;line-height:15px;overflow:auto;color:{color:body font};">
  709.  
  710. <div id="headerbar">
  711. <ul id="tabs">
  712. <li class="active">STATS</li>
  713. <li>STORY</li>
  714. <li>VOCAB</li>
  715. </ul></div>
  716. <div id="tabbar">
  717. <div id="boxydos">
  718. <div class="container" style="color:#000;">
  719. <ul id="tab">
  720.  
  721. <li class="active" style="color:{color:body font};">
  722. <center><b>HIRO TAKE'SHI</b></center>
  723. <div class="content">
  724. <div align="center"><div style="width:385px; text-align: justify;font-size:11.5px;">
  725. <b>nickname:</b> Kaichou, Ice King, Chilly Kitty<br>
  726. <b>age:</b> Appears thirty<br>
  727. <b>birth date:</b> His real date of birth is unknown. But his family celebrates it on: October 25th<br>
  728. <b>ethnicity/race:</b> Japanese/Koorineko<br>
  729. <b>gender:</b> Male<br>
  730. <b>romantic orientation:</b> Demiromantic<br>
  731. <b>sexual orientation:</b> Demisexual<br>
  732. <b>religion:</b> N/A<br>
  733. <b>spoken language:</b> Common, Japanese, and English<br>
  734. <b>current living conditions:</b> Heir to the Take'shi fortune<br>
  735. <b>occupation:</b> Professor at Black Forest Academy<br><br>
  736. <center><b>relationships</b></center>
  737. <b>parents:</b> Hideki and Annaliese Take'shi<br>
  738. <b>siblings:</b> N/A <br>
  739. <b>significant other:</b> Dependent upon verse<br>
  740. <b>children:</b> N/A<br><br>
  741. <center><b>physical</b></center>
  742. <b>eye colour:</b> Grey<br>
  743. <b>hair colour:</b> Black<br>
  744. <b>height:</b> 6'1"<br>
  745. <b>body build:</b> Lithe, well muscled/toned<br>
  746. <b>notable physical traits:</b> Feline ears/eyes & tail along as well as the obsidian skin to about his forearm and the massive claws where his finger nails should be<br><br>
  747. <center><b>phobias and disorders</b></center>
  748. <b>phobias:</b> classified.<br>
  749. <b>mental disorders:</b> Depression & paranoia<br>
  750. <b>when was this diagnosed?:</b> N/A<br><br>
  751. <center><b>personality</b></center>
  752. <b>intelligence:</b> Highly intelligent.<br>
  753. <b>likes:</b> Cats, tea, piano, teaching, instructing band, work, independence, lacy things, classical music ----<br>
  754. <b>dislikes:</b> Dogs, coffee, drums, slackers, his parents, loud noises ---<br>
  755. <b>disposition:</b> Cold, aloof, detached, apathetic</b>
  756. </div></div></div>
  757.  
  758. <!-------------------QUOTE/PLAYLIST SECTION ENDS HERE------------------->
  759.  
  760. </li>
  761.  
  762. <li style="color:{color:body font};">
  763. <center><b>BRIEF HISTORY</b></center>
  764. <div class="content">
  765.  
  766. <div align="center"><div style="width:380px; text-align: justify;font-size:12px;">
  767. <p>&nbsp; &nbsp; &nbsp; &nbsp; far atop the mountains that towered both kingdoms, lie a monastary of the koorineko: a race of peaceful demons. they had been tasked since the very beginning to tend to the goddess in which they worshipped: maylee, the goddess of winter. and if they did their job well, she would be reincarnated within a child every thousand years.
  768.  
  769. <p>&nbsp; &nbsp; &nbsp; &nbsp; there was a prophecy that when a male was born with the power of their goddess, that their lives would never be the same. and thus hiro was born with the power of winter in his hands.
  770.  
  771. <p>&nbsp; &nbsp; &nbsp; &nbsp; it was no secret that the humans that resided within the kingdom of tara would kill to get their hands on such a creature ---- and that's what they did. scientists eventually discovered where the koorineko resided and razed their peaceful society to the ground. hiro was still a baby while his entire world burned around him and one single cry from the child called down a blizzard that doused the flames and took the lives of many of his own people and the one's that meant them harm.
  772.  
  773. <p>&nbsp; &nbsp; &nbsp; &nbsp; there was nothing anyone could do to save the child. all his bretheren lie dead or severly wounded. and so the scentists that managed to cling to their worthless lives took the child from his home. (fun fact: hiro would have had been trained to reach his full potential. with most of the koorineko dead, he would never see that come to fruition.)
  774.  
  775. <p>&nbsp; &nbsp; &nbsp; &nbsp; with nearly the entire race of the koorineko destroyed, the humans took the small child to a facility to be, put simply, experiemnted upon. they put the small kitten through the worst pain imaginable to try and attain the secret to his elemental prowess. they tortured the poor child into a state of trauma induced amnesia and he bears scars that liter his entire body for the rest of his life.
  776.  
  777. <p>&nbsp; &nbsp; &nbsp; &nbsp; the facility, or the 'white room' was hiro's life for three years until demon-kind activists found what the humans were doing and raided the place, subsequently shutting it down for good. that's where they discovered the barely alive, emaciated, terrified child. they took him in and not before restoring the precious little boy to what he should have been, was put up for adoption.
  778.  
  779. <p>&nbsp; &nbsp; &nbsp; &nbsp; not long after, hiro was adopted by a couple by the name of take'shi: annaliese and hideki (a sub-species of demon feline) who could not bear children of their own and needed an heir and brought little hiro into a life of splendor, or so he thought. it didn't take long for his adoptive mother to begin abusing the small child, both physically and mentally. she hated him because she could not bear children, she hated him because he wasn't their true son. and that's how Hiro grew up. His Mother's hatred of him simply grew, while he managed to develop a bond with his father. But because of his Mother's harsh words, how hard she drilled him in his studies as a child, the man had become an emotionless husk.
  780.  
  781. <p>&nbsp; &nbsp; &nbsp; &nbsp; hiro doesn't know he was adopted, the severe trauma he endured as a child blocked out most of his memories, and for good reason. he is also unaware of his powers or the importance he holds to the remaining koorineko (if there are any). his powers are very volatile, having to learn how to control them himself. while other koorineko could control their body temperature and how much cold they wished to give off: hiro cannot. his skin is frozen to the touch and there is a aura of winter surrounding the man.</div></div></div>
  782.  
  783. </li>
  784.  
  785. <li style="color:{color:body font};">
  786. <center><b>A GLOSSARY</b></center>
  787. <div align="center"><div style="width:380px; text-align: justify;font-size:12px;">
  788. <b>koorineko:</b> a race of peaceful demonic feline creatures. they weild the power of winter.<br>
  789. <b>take'shi:</b> a very prominent family within the kingdom of harmony.<br>
  790. <b>black forest academy:</b> an academy within a magically enchanted forest so that demon-kind and others could learn without fear of persecution.<br>
  791. <b>kingdom of harmony:</b> a kingdom where demon-kind and other non-humans may live and prosper. the ruling power is monarchy under the hand of Prince Gaius. <br>
  792. <b>kingdom of tara:</b> originally created as a base of operations to hunt vampires, it soon prospered and grew into a place where humans could live unchallenged by demons and other of their ilk. the ruling power is monarchy under the peaceful gaze of Queen Catterina.
  793.  
  794. </center> </div>
  795.  
  796. </li>
  797.  
  798. </ul> <!--- important. don’t delete --->
  799. </div></div></div></div></div></div></div></div>
  800.  
  801. <div id="guide" class="popup_block" style="font-family:calibri, helvetica, arial, sans-serif;font-size: 11px;line-height:15px;overflow:auto;color:{color:body font}">
  802.  
  803. <h1 style="text-align:center; background-image:url('http://static.tumblr.com/oh3xcbq/B9Coje412/selectiondarkblueblack.png');border:1px solid {color:page bg};color:white;letter-spacing:2px;padding:5px 0px;height:20px;font-size:20px;">GUIDELINES</h1>
  804.  
  805. <p style="font-family:calibri,helvetica,arial,sans-serif;"><small>INSERT RULES HERE
  806.  
  807. </div>
  808.  
  809. <div id="verses" class="popup_block" style="font-family:calibri, helvetica, arial, sans-serif;font-size: 11px;line-height:15px;overflow:auto;color:{color:body font}">
  810.  
  811. <h1 style="text-align:center; background-image:url('http://static.tumblr.com/oh3xcbq/B9Coje412/selectiondarkblueblack.png');border:1px solid {color:page bg};color:white;letter-spacing:2px;padding:5px 0px;height:20px;font-size:20px;">VERSES</h1>
  812.  
  813. <p style="font-family:calibri,helvetica,arial,sans-serif;"><small>VERSES GO HERE
  814.  
  815. </div>
  816.  
  817. <div id="sched" class="popup_block" style="font-family:calibri, helvetica, arial, sans-serif;font-size: 11px;line-height:15px;overflow:auto;color:{color:body font}">
  818.  
  819. <h1 style="text-align:center; background-image:url('http://static.tumblr.com/oh3xcbq/B9Coje412/selectiondarkblueblack.png');border:1px solid {color:page bg};color:white;letter-spacing:2px;padding:5px 0px;height:20px;font-size:20px;">SCHEDULE</h1>
  820.  
  821. <p style="font-family:calibri,helvetica,arial,sans-serif;"><small>SCHEDULE GOES HERE
  822. </div>
  823.  
  824.  
  825.  
  826. </div></div></div></div></div></div>
  827. <div id="cred">theme by<br><a href="#?w=400" rel="credit" class="poplight" title="credit" style="color:#382c3f;">CHE</a></div>
  828.  
  829. <div id="credit" class="popup_block" style="font-family:calibri, helvetica, arial, sans-serif;font-size: 11.5px;line-height:15px;overflow:auto;color:{color:body font};height:448px;">
  830.  
  831. <div class="fancytitle">credit</div>
  832.  
  833. <p style="font-family:calibri,helvetica,arial,sans-serif;text-align:center;"><small>theme and bg art by <a href="http://uminojo.tumblr.com/"><b>che</b></a><br>
  834. with the assistance of <a href="http://octomoosey.tumblr.com/"><b>octomoosey</b></a><br>
  835. pop-ups by <a href="http://str-wrs.tumblr.com/"><b>str-wrs</b></a><br>
  836.  
  837. </div>
  838. </div></div></div></div></div></div>
  839. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement