API tools faq
paste
Advertisement
faluvtha

[#38] — Tetsuya - 黒子 テツヤ

faluvtha
Mar 14th, 2014
2,278
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 44.61 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!--
  4.  
  5. Fukuo@Tumblr
  6.  
  7. -->
  8.  
  9. <html>
  10. <head>
  11. <title>{block:TagPage}{Tag} - {/block:TagPage} {block:SearchPage}{lang:Search results for SearchQuery} - {/block:SearchPage}{block:PostSummary}{PostSummary} - {/block:PostSummary}{Title}</title>
  12.  
  13. <!-- Google Web Fonts -->
  14. <link href='http://fonts.googleapis.com/css?family=Lato:400,400italic,700italic' rel='stylesheet' type='text/css'>
  15.  
  16. <link rel="shortcut icon" href="{Favicon}">
  17. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  18. <meta charset="UTF-8">
  19. {block:Description}
  20. <meta name="description" content="{MetaDescription}" />
  21. {/block:Description}
  22.  
  23. <!-- DEFAULT OPTIONS -->
  24. <meta name="if:Animation on Scroll" content="1"/>
  25. <meta name="if:Lazy Load Posts" content="0"/>
  26. <meta name="if:Show Caption" content="1"/>
  27. <meta name="if:Infinite Scrolling" content="0"/>
  28. <meta name="if:Pop Up Links" content="0"/>
  29. <meta name="if:Loading Bar" content="1"/>
  30. <meta name="if:Sliding Menu bar" content="1"/>
  31.  
  32. <!-- DEFAULT IMAGE -->
  33. <meta name="image:Main Icon" content="http://24.media.tumblr.com/35a9110d2561a44a97bc4477928d763d/tumblr_n0wtamcGpG1tnx84to7_r1_250.png"/>
  34. <meta name="image:Background" content="http://25.media.tumblr.com/tumblr_ltqq73Kh5g1qhvdofo6_250.png"/>
  35. <meta name="image:Leftside Background" content="http://25.media.tumblr.com/tumblr_m4y2lnkD1V1rx3sj3o2_250.png"/>
  36.  
  37. <!-- DEFAULT COLOR -->
  38. <meta name="color:Background" content="#eee" />
  39. <meta name="color:Post" content="#fff" />
  40. <meta name="color:Post Border" content="#111" />
  41. <meta name="color:Sidebar Background" content="#ffffff" />
  42. <meta name="color:Body" content="#777777" />
  43. <meta name="color:Description Background" content="#fff" />
  44. <meta name="color:Description Text" content="#666" />
  45. <meta name="color:Blockquote" content="#eeeeee" />
  46. <meta name="color:Border Blockquote" content="#777777" />
  47. <meta name="color:Chat Odd" content="#FBFBFB"/>
  48. <meta name="color:Chat Even" content="#F0F0F0"/>
  49. <meta name="color:Line Accent" content="#8abdca"/>
  50. <meta name="color:Title Background Post" content="#eeeeee"/>
  51. <meta name="color:Title Post" content="#111"/>
  52. <meta name="color:Top Bar" content="#111"/>
  53. <meta name="color:Title on Topbar" content="#fff"/>
  54. <meta name="color:Caption" content="#111"/>
  55. <meta name="color:Caption Text" content="#fff"/>
  56. <meta name="color:Caption Bold" content="#a7a7a7"/>
  57. <meta name="color:Caption Links" content="#8abdca"/>
  58. <meta name="color:Holder Menu" content="#111"/>
  59. <meta name="color:Holder Menu on Hover" content="#8abdca"/>
  60. <meta name="color:Reblog and Zoom" content="#111"/>
  61. <meta name="color:Reblog and Zoom Hover" content="#8abdca"/>
  62. <meta name="color:Tags Background" content="#111"/>
  63. <meta name="color:Tags Color" content="#fff"/>
  64.  
  65. <meta name="color:Menu Background" content="#111"/>
  66. <meta name="color:Menu Text Color" content="#fff"/>
  67. <meta name="color:Title Circle One" content="#111"/>
  68. <meta name="color:Title Circle Two" content="#8abdca"/>
  69. <meta name="color:Ask background" content="#eeeeee"/>
  70. <meta name="color:Links" content="#bf6e0d" />
  71. <meta name="color:Links Hover" content="#aaa" />
  72. <meta name="color:Bold text" content="#101010" />
  73. <meta name="color:Italic text" content="#101010" />
  74. <meta name="color:Scrollbar" content="#8abdca" />
  75. <meta name="color:Scrollbar Background" content="#f7f7f7" />
  76. <meta name="color:Selection Color" content="#fff"/>
  77. <meta name="color:Selection Background" content="#111"/>
  78.  
  79. <meta name="color:Menu Pop Text Background" content="#ffffff" />
  80. <meta name="color:Menu Pop Text Background Hover" content="#ffffff" />
  81. <meta name="color:Menu Pop Background" content="#111" />
  82. <meta name="color:Menu Pop Background Hover" content="#111111" />
  83. <meta name="color:Selection Color" content="#fff" />
  84. <meta name="color:Selection Background" content="#111" />
  85.  
  86. <!-- DEFAULT TEXT -->
  87. <meta name="text:Font" content="consolas"/>
  88. <meta name="text:Font Size" content="9"/>
  89. <meta name="text:Line height" content="15"/>
  90. <meta name="text:Main Icon Title" content="Tetsuya"/>
  91. <meta name="text:Title of Topbar" content="黒子のバスケ"/>
  92. <meta name="text:Custom Link Name" content="Links"/>
  93. <meta name="text:Custom Link URL" content="/links"/>
  94.  
  95. <!-- MENU POP UP -- OPTIONS -->
  96. <meta name="text:Custom Link One" content=""/>
  97. <meta name="text:Custom Link One URL" content=""/>
  98. <meta name="text:Custom Link Two" content=""/>
  99. <meta name="text:Custom Link Two URL" content=""/>
  100. <meta name="text:Custom Link Three" content=""/>
  101. <meta name="text:Custom Link Three URL" content=""/>
  102. <meta name="text:Custom Link Four" content=""/>
  103. <meta name="text:Custom Link Four URL" content=""/>
  104. <meta name="text:Custom Link Five" content=""/>
  105. <meta name="text:Custom Link Five URL" content=""/>
  106. <meta name="text:Custom Link Six" content=""/>
  107. <meta name="text:Custom Link Six URL" content=""/>
  108.  
  109. <!-- Animation by Justin Aguliar -->
  110. <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  111. <script src="http://static.tumblr.com/5ojoydj/DXKn11b3v/jquery-1.8.3.min.js"></script>
  112. <script src="http://static.tumblr.com/5ojoydj/7nUn11bxp/animatescroll2.js"></script>
  113. <link rel="stylesheet" href="http://static.tumblr.com/5ojoydj/HRdn1xuk2/fukuo-animation.css" type="text/css"/>
  114.  
  115. <!-- Style My-Tool-Tips by Malihu -->
  116.  
  117. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  118. <script src="http://static.tumblr.com/5ojoydj/p9wmmzopi/jquery.style-my-tooltips.js"></script>
  119. <script src="http://static.tumblr.com/5ojoydj/En2mmzorm/style-my-tooltips.css"></script>
  120. <script>
  121. (function($){
  122. $(document).ready(function(){
  123. $("[title]").style_my_tooltips({
  124. tip_follows_cursor:true,
  125. tip_delay_time:200,
  126. tip_fade_speed:300,
  127. attribute:"title"
  128. });
  129. });
  130. })(jQuery);
  131. </script>
  132. <style type="text/css">
  133. {CustomCSS}
  134.  
  135. /* I-frame Tumblr Controls */
  136. iframe#tumblr_controls {
  137. right:3px!important;
  138. position:fixed!important;
  139. -webkit-transition:
  140. opacity 0.7s linear;
  141. opacity:0.5;
  142. -webkit-transition: all 0.8s ease-out;
  143. -moz-transition: all 0.8s ease-out;
  144. transition: all 0.8s ease-out;}
  145.  
  146. iframe#tumblr_controls:hover {
  147. -webkit-transition:opacity 0.7s linear;
  148. opacity:1;
  149. -webkit-transition: all 0.5s ease-out;
  150. -moz-transition: all 0.5s ease-out;
  151. transition: all 0.5s ease-out;}
  152.  
  153.  
  154. /* Webkit Scrollbar - It only shows up on Safari and Google Chrome*/
  155. ::-webkit-scrollbar {width: 4px;}
  156.  
  157. ::-webkit-scrollbar-track-piece
  158. {background-color: {color:Scrollbar Background};}
  159.  
  160. ::-webkit-scrollbar-thumb:vertical
  161. {width:4px;
  162. background-color: {color:Scrollbar};}
  163.  
  164. /* General Structure*/
  165. body {
  166. font-family: {text:Font};
  167. font-size: {text:Font size}px;
  168. line-height:{text:Line height}px;
  169. background-color:{color:Background};
  170. background-image:url('{image:Background}');
  171. background-position: fixed;
  172. background-attachment:fixed;
  173. background-repeat:repeat;}
  174.  
  175. /* Links */
  176. a {
  177. text-decoration:none;
  178. color:{color:Links};
  179. }
  180.  
  181. a:link, a:visited, a:active {
  182. text-decoration:none;
  183. -webkit-transition: all 0.5s ease;
  184. -moz-transition: all 0.5s ease;
  185. -o-transition: all 0.5s ease;
  186. }
  187.  
  188. a:hover {
  189. color:{color:Links hover};
  190. text-decoration:none;
  191. -webkit-transition: all 0.5s ease;
  192. -moz-transition: all 0.5s ease;
  193. -o-transition: all 0.5s ease;
  194. }
  195.  
  196.  
  197. /* ----- SELECTION COLOR ---- */
  198. ::selection {
  199. background:{color:Selection Background};
  200. color:{color:Selection Color};
  201. }
  202.  
  203. ::-moz-selection {
  204. background:{color:Selection Background};
  205. color:{color:Selection Color};
  206. }
  207.  
  208. ::-webkit-selection {
  209. background:{color:Selection Background};
  210. color:{color:Selection Color};
  211. }
  212.  
  213.  
  214. /* STYLE-MY-TOOLTIPS */
  215.  
  216. #s-m-t-tooltip{
  217. width:auto;
  218. z-index:10;
  219. margin:24px 14px 7px 12px;
  220. padding:8px;
  221. background:#111;
  222. font-family: 'Silkscreen', Courier New;
  223. font-size:12px;
  224. line-height:16px;
  225. color:#fff;
  226. text-transform:uppercase;
  227. border:1px solid #fff;
  228. z-index:9999999;
  229. }
  230.  
  231. /* Custom Fonts - Unfortunately, it only shows up on Google Chrome :( */
  232. @font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/1kdckk4/9yjlolf0w/slkscr.ttf'); }
  233.  
  234. /* BlockQuote */
  235. blockquote{
  236. padding:10px;
  237. margin:5px;
  238. border-left:10px solid {color:border blockquote};
  239. background-color:{color:blockquote};
  240. }
  241.  
  242.  
  243. /* Music ... */
  244. #bubble-music {
  245. position:fixed;
  246. right:90px;
  247. top:50px;
  248. width:30px;
  249. height:30px;
  250. background-color:#8abdca;
  251. border-radius:100%;
  252. -moz-border-radius:100%;
  253. overflow:hidden;
  254. z-index:99999;
  255. -webkit-transition: all 0.5s ease-out;
  256. -moz-transition: all 0.5s ease-out;
  257. transition: all 0.5s ease-out
  258.  
  259. }
  260.  
  261. #bubble-music:hover {
  262. border-radius:9px;
  263. -moz-border-radius:9px;
  264. width:140px;
  265. height:30px;
  266. }
  267.  
  268. .music_embed {
  269. margin:-23px 0 0 70px;
  270. z-index:1;
  271. font-family:consolas;
  272. font-size:8px;
  273. -webkit-transition: all 0.5s ease-out;
  274. -moz-transition: all 0.5s ease-out;
  275. transition: all 0.5s ease-out
  276. }
  277.  
  278. #bubble-music:hover .music_embed {
  279. margin:-23px 0 0 34px;
  280. opacity:1;
  281. }
  282.  
  283. /* The title of the posts */
  284. .titles {
  285. font-size:28px;
  286. font-style:normal;
  287. font-weight:lighter;
  288. font-family: 'Lato', sans-serif;
  289. text-align:left;
  290. line-height:110%;
  291. text-transform:none;
  292. background-color:{color:Title Background Post};
  293. padding:17px 17px 20px 70px;
  294. }
  295.  
  296. .titles a { color:{color:Title Post};}
  297.  
  298. .titles:before {
  299. content:'';
  300. position:absolute;
  301. margin:12px 0 0 -50px;
  302. border-radius:100%;
  303. -moz-border-radius:100%;
  304. -webkit-border-radius:100%;
  305. -o-border-radiud:100%;
  306. background-color:{color:Title Circle One};
  307. width:10px;
  308. height:10px;
  309. -webkit-box-shadow: 17px 0px 0px 0px {color:Title Circle Two};
  310. -moz-box-shadow:17px 0px 0px 0px {color:Title Circle Two};
  311. box-shadow: 17px 0px 0px 0px {color:Title Circle Two};
  312. }
  313.  
  314.  
  315.  
  316. /* NO --------------- NO*/
  317. #credit {
  318. position:fixed;
  319. width:90px;
  320. padding:5px;
  321. background-color:#000;
  322. bottom:0px;
  323. right:-77px;
  324. color:white;
  325. font-family:calibri;
  326. font-size:13px;
  327. font-weight:lighter;
  328. text-transform:uppercase;
  329. -webkit-transition: all 0.5s ease;
  330. -moz-transition: all 0.5s ease;
  331. -o-transition: all 0.5s ease;
  332. }
  333.  
  334.  
  335. #credit:hover {
  336. background-color:{color:Line Accent};
  337. right:-19px;
  338. color:#FFF;
  339. }
  340.  
  341. /* Left Border */
  342. #left-border {
  343. width:150px;
  344. height:100%;
  345. top:0;
  346. left:0;
  347. background-image:url('{image:Leftside Background}');
  348. position:fixed;
  349. background-color:#111;
  350. display:block;
  351. }
  352.  
  353. .title-top {
  354. position:absolute;
  355. margin:20px 0 0 20px;
  356. font-family:'Lato';
  357. font-size:29px;
  358. color:white;
  359.  
  360. }
  361.  
  362. /* Top Menu */
  363. #top_menu {
  364. position:fixed;
  365. left:270px;
  366. top:0;
  367. width:428px;
  368. border-right:12px solid {color:Line Accent};
  369. height:60px;
  370. background-color:rgba(0,0,0,0.8);
  371. padding:12px;
  372. z-index:9999;
  373. box-shadow:1px 13px 20px rgba(0,0,0,0.2);
  374. }
  375.  
  376. #top_menu:after {
  377. content:'';
  378. width:138px;
  379. height:10px;
  380. background-color:{color:Line Accent};
  381. position:absolute;
  382. margin:28px 0 0 440px;
  383. }
  384.  
  385. /* Pop Up Menu .. */
  386.  
  387. @keyframes fly{
  388. 0%{
  389. transform:scale(0.2) rotate(0deg);
  390. }
  391. 100%{
  392. transform:scale(1) rotate(360deg);
  393. }
  394. }
  395.  
  396. @-moz-keyframes fly{
  397. 0%{
  398. -moz-transform:scale(0.2) rotate(0deg);
  399. }
  400. 100%{
  401. -moz-transform:scale(1) rotate(360deg);
  402. }
  403.  
  404. }
  405. @-webkit-keyframes fly{
  406. 0%{
  407. -webkit-transform:scale(0.2) rotate(0deg);
  408. }
  409. 100%{
  410. -webkit-transform:scale(1) rotate(360deg);
  411. }
  412. }
  413.  
  414. #fade {
  415. display: none;
  416. background: #000;
  417. position: fixed;
  418. left: 0;
  419. top: 0;
  420. width: 100%;
  421. height: 100%;
  422. opacity: .50;
  423. z-index: 9999;
  424. }
  425.  
  426. .popup_block{
  427. display: none;
  428. background:{color:Post};
  429. padding: 20px;
  430. float: left;
  431. position: fixed;
  432. top: 50%;
  433. left: 50%;
  434. z-index: 99999;
  435. -moz-border-radius:8px;
  436. border-radius:8px;
  437. -o-border-radius:8px;
  438. -webkit-animation: fly 0.5s linear normal ;
  439. -webkit-animation-duration: 0.5s;
  440. -moz-animation: fly 0.5s linear normal ;
  441. -moz-animation-duration: 0.5s;
  442. animation: fly 0.5s linear normal ;
  443. animation-duration: 0.5s;
  444.  
  445. }
  446.  
  447. img.btn_close {
  448. padding:8px;
  449. -moz-border-radius:8px;
  450. border-radius:8px;
  451. -o-border-radius:8px;
  452. background-color:{color:Post};
  453. float: right;
  454. margin: -65px -55px 0 10px;
  455. }
  456.  
  457. *html #fade {
  458. position: absolute;
  459. }
  460.  
  461. *html .popup_block {
  462. position: absolute;
  463. }
  464.  
  465. /* Menu ... */
  466. #main_holder_menu {
  467. width:170px;
  468. height:70px;
  469. overflow:hidden;
  470. position:absolute;
  471. margin:7px 0 0 280px;
  472. -webkit-transition: all 0.5s ease-out;
  473. -moz-transition: all 0.5s ease-out;
  474. transition: all 0.5s ease-out;
  475. }
  476.  
  477. #main_holder_menu:hover {
  478. height:400px;
  479. -webkit-transition: all 1s ease-out;
  480. -moz-transition: all 1s ease-out;
  481. transition: all 1s ease-out;
  482. }
  483.  
  484. #main_pop_menu {
  485. width:20px;
  486. height:20px;
  487. padding:12px 15px 15px 10px;
  488. background-color:{color:Menu Background};
  489. color:white;
  490. overflow:hidden;
  491. font-size:44px;
  492. position:absolute;
  493. margin:7px 0 0 375px;
  494. -webkit-transition: all 0.5s ease-out;
  495. -moz-transition: all 0.5s ease-out;
  496. transition: all 0.5s ease-out;
  497. }
  498.  
  499. #main_pop_menu a { color:{color:Menu Text Color};}
  500.  
  501. .title_menu {
  502. width:20px;
  503. height:20px;
  504. cursor:crosshair;
  505. text-align:center;
  506. color:{color:Menu Text Color};
  507. padding:15px 15px 10px 10px;
  508. margin:0 0 30px 90px;
  509. background-color:{color:Menu Background};
  510. font-family:sans-serif;
  511. font-size:44px;
  512. }
  513.  
  514. .holder_menu {
  515. width:140px;
  516. display:block;
  517. color:white; /* The color of menu */
  518. text-align:center;
  519. font-family: 'Lato', sans-serif;
  520. font-size:18px;
  521. border:10px solid rgba(0,0,0,0.4);
  522. background-color:{color:Holder Menu}; /* The background of menu */
  523. margin-bottom:10px;
  524. padding:13px 10px 15px 0px;
  525. }
  526.  
  527. .holder_menu:hover {
  528. background-color:{color:Holder Menu on Hover};
  529. color:#111;
  530. }
  531.  
  532. #main_holder_menu:hover .one_delay {
  533. margin-left:0px;
  534. transition-delay:0.2s;
  535. -webkit-transition-delay:0.2s;
  536. }
  537.  
  538. .one_delay {
  539. margin-left:220px;
  540. -webkit-transition: all 0.5s ease;
  541. -moz-transition: all 0.5s ease;
  542. transition: all 0.5s ease;
  543. }
  544.  
  545. #main_holder_menu:hover .two_delay {
  546. margin-left:0px;
  547. transition-delay:0.5s;
  548. -webkit-transition-delay:0.5s;
  549. }
  550.  
  551. .two_delay {
  552. margin-left:-220px;
  553. -webkit-transition: all 0.5s ease;
  554. -moz-transition: all 0.5s ease;
  555. transition: all 0.5s ease;
  556. }
  557.  
  558. #main_holder_menu:hover .three_delay {
  559. margin-left:0px;
  560. transition-delay:0.8s;
  561. -webkit-transition-delay:0.8s;
  562. }
  563.  
  564. .three_delay {
  565. margin-left:220px;
  566. -webkit-transition: all 0.5s ease;
  567. -moz-transition: all 0.5s ease;
  568. transition: all 0.5s ease;
  569. }
  570.  
  571. #main_holder_menu:hover .four_delay {
  572. margin-left:1px;
  573. transition-delay:1s;
  574. -webkit-transition-delay:1s;
  575. }
  576.  
  577. .four_delay {
  578. margin-left:-220px;
  579. -webkit-transition: all 0.5s ease;
  580. -moz-transition: all 0.5s ease;
  581. transition: all 0.5s ease;
  582. }
  583.  
  584. /* Description */
  585.  
  586. #description_content {
  587. position:absolute;
  588. margin:140px 0 0 180px;
  589. width:220px;
  590. height:auto;
  591. padding:25px;
  592. background-color:white;
  593. color:#666;
  594. font-family:consolas;
  595. font-size:11px;
  596. text-align:justify;
  597. border-bottom:10px solid #222;
  598. }
  599.  
  600.  
  601. /* circle */
  602. #circle-main {
  603. display:block;
  604. position:fixed;
  605. left:780px;
  606. top:100px;
  607. width:150px;
  608. height:150px;
  609. background-position:10px;
  610. background-image:url('{image:Main Icon}');
  611. border-radius:100%;
  612. -moz-border-radius:100%;
  613. background-color:#222;
  614. background-size:150px;
  615. z-index:99;
  616. -webkit-transition: all 0.7s ease;
  617. -moz-transition: all 0.7s ease;
  618. -o-transition: all 0.7s ease;
  619. }
  620.  
  621. #circle-main:before {
  622. content:'';
  623. position:absolute;
  624. left:70px;
  625. top:-200px;
  626. width:10px;
  627. height:200px;
  628. background-color:#8abdca;
  629. z-index:-1;
  630. z-index:99;
  631. }
  632.  
  633. .circle-n {
  634. position:absolute;
  635. width:10px;
  636. height:10px;
  637. padding:30px;
  638. background:rgba(0,0,0,0.3);
  639. margin:40px 0 0 40px;
  640. border-radius:100%;
  641. font-style:italic;
  642. font-family:'Lato';
  643. font-size:22px;
  644. -moz-border-radius:100%;
  645. opacity:0;
  646. color:transparent;
  647. overflow:hidden;
  648. -webkit-transition: all 0.5s ease;
  649. -moz-transition: all 0.5s ease;
  650. -o-transition: all 0.5s ease;
  651. }
  652.  
  653. .circle-n span {
  654. position:absolute;
  655. margin:24px 0 0 0;
  656. }
  657.  
  658. #circle-main:hover .circle-n {
  659. margin:10px 0 0 10px;
  660. color:#fff;
  661. opacity:1;
  662. width:70px;
  663. height:70px;
  664. -webkit-transition: all 0.4s ease;
  665. -moz-transition: all 0.4s ease;
  666. -o-transition: all 0.4s ease;
  667. }
  668.  
  669. /* LINE ... */
  670. .line-c-1 {
  671. position:absolute;
  672. margin:187px 0 0 29px;
  673. width:85px;
  674. height:10px;
  675. background-color:{color:Line Accent};
  676. transform:rotate(-90deg);
  677. -webkit-transform:rotate(-90deg);
  678. -moz-transform:rotate(-90deg);
  679. -o-transform: rotate(-90deg);
  680. }
  681.  
  682. .line-c-2 {
  683. position:absolute;
  684. margin:72px 0 0 150px;
  685. width:115px;
  686. height:10px;
  687. background-color:{color:Line Accent};
  688. }
  689.  
  690. .line-c-3 {
  691. position:absolute;
  692. margin:109px 0 0 244px;
  693. width:100px;
  694. height:10px;
  695. background-color:{color:Line Accent};
  696. -webkit-transform:rotate(50deg);
  697. -moz-transform:rotate(50deg);
  698. -o-transform: rotate(50deg);
  699. }
  700.  
  701. .line-c-4 {
  702. position:absolute;
  703. margin:229px 0 0 66px;
  704. width:470px;
  705. height:10px;
  706. background-color:{color:Line Accent};
  707. }
  708.  
  709. .line-c-4:after {
  710. content:'';
  711. position:absolute;
  712. margin:-8px 0 0 460px;
  713. border-radius:100%;
  714. -moz-border-radius:100%;
  715. -o-border-radius:100%;
  716. background-color:{color:Line Accent};
  717. width:25px;
  718. height:25px;
  719. z-index:10;
  720. }
  721.  
  722. /* Permalink Page */
  723.  
  724. #permalinks {
  725. width:400px;
  726. z-index:999;
  727. padding:30px;
  728. color:{color:Body};
  729. }
  730.  
  731. #permalinks li {list-style-type:square;}
  732.  
  733. #permalinks img {
  734. width:30px;
  735. height:30px;
  736. opacity:1;
  737. margin-top:5px;
  738. margin-right:7px;
  739. border:7px solid {color:Title};
  740. vertical-align:middle;
  741. }
  742.  
  743. /* The main article - position of the content */
  744. #posts {
  745. margin-top:130px;
  746. width:430px;
  747. margin-left:262px;
  748. }
  749.  
  750. /* Actual Posts */
  751. .post {
  752. width:400px;
  753. margin-top:10px;
  754. margin-bottom:35px;
  755. padding:30px;
  756. background-color:{color:Post};
  757. color:{color:Body};
  758. border:2px solid transparent;
  759. -webkit-transition: all 0.7s ease;
  760. -moz-transition: all 0.7s ease;
  761. -o-transition: all 0.7s ease;
  762. }
  763.  
  764. /* Posts Image and Bullet */
  765. .post img { max-width:100%; }
  766.  
  767. .post li {
  768. list-style-type:square;
  769. color:{color:Body};
  770. }
  771.  
  772. .post:hover {
  773. border:2px solid {color:Tags Background};
  774. margin-bottom:90px;
  775. -webkit-transition: all 0.7s ease;
  776. -moz-transition: all 0.7s ease;
  777. -o-transition: all 0.7s ease;
  778. }
  779.  
  780. #tagg_option {
  781. position:absolute;
  782. margin:20px 0 0 -32px;
  783. width:444px; /* DO NOT CHANGE OKAY */
  784. padding:10px;
  785. background-color:{color:Tags Background};
  786. font:9px consolas;
  787. opacity:0;
  788. text-transform:uppercase;
  789. -webkit-transition: all 0.4s ease;
  790. -moz-transition: all 0.4s ease;
  791. -o-transition: all 0.4s ease;
  792. }
  793.  
  794. #tagg_option:before {
  795. position:absolute;
  796. content:'';
  797. margin:-38px 0 0 220px;
  798. width:7px;
  799. height:35px;
  800. background-color:{color:Tags Background};
  801. }
  802.  
  803. .post:hover #tagg_option {
  804. margin:60px 0 0 -32px;
  805. opacity:1;
  806. padding:10px;
  807. transition-delay: 0.4s;
  808. }
  809.  
  810. #tagg_option a {
  811. color:{color:Tags Color};
  812. text-shadow:0 0 0px #FF0000, 0px 0 0 #00F1F5;
  813. }
  814.  
  815. #tagg_option a:hover {
  816. text-shadow: 2px 0 .5px #FF0000, -2px 0 .5px #00F1F5;
  817. }
  818.  
  819. /* LINKS: Additional */
  820.  
  821. .link {
  822. float:left;
  823. width:60px;
  824. height:15px;
  825. font-size:8px;
  826. letter-spacing:1px;
  827. display:inline-block;
  828. text-align:center;
  829. font-family:consolas;
  830. text-transform:uppercase;
  831. padding:8px;
  832. background-color:{color:Menu Pop Background};
  833. color:{Menu Pop Text Background};
  834. margin-left:6px;
  835. margin-top:5px;
  836. -webkit-transition: all 0.5s ease-out;
  837. -moz-transition: all 0.5s ease-out;
  838. -o-transition: all 0.5s ease-out;
  839. }
  840.  
  841. .link:hover {
  842. height:15px;
  843. background-color:{color:Menu Pop Background Hover};
  844. color:{color:Menu Pop Text Background Hover};
  845. text-align:center;
  846. -webkit-transition: all 0.5s ease-in;
  847. -moz-transition: all 0.5s ease-in;
  848. -o-transition: all 0.5s ease-in;
  849. }
  850.  
  851. /* JUMP PAGINATION by Excolo@Tumblr */
  852.  
  853. .pagination_c {
  854. position:absolute;
  855. width:220px;
  856. margin:360px 0 0 185px;
  857. }
  858.  
  859. .jump_page {
  860. padding: 4px 8px;
  861. border: 2px solid {color:Border Blockquote};
  862. background-color:{color:Title Circle Two};
  863. color:{color:Post};
  864. font-family:consolas;
  865. font-size:11px;
  866. text-decoration:none;
  867. }
  868.  
  869. .current_page, .jump_page:hover {
  870. padding: 4px 8px;
  871. border: 2px solid transparent;
  872. background-color:{color:Blockquote};
  873. color:{color:Body};
  874. border: 2px solid {color:Border Blockquote};
  875. font-family:consolas;
  876. font-size:11px;
  877. text-decoration:none;
  878. }
  879.  
  880.  
  881.  
  882. /* Caption of the posts */
  883. .caption_posts {
  884. background-color:{color:Caption};
  885. color:{color:Caption Text};
  886. text-transform:uppercase;
  887. font-size:9px;
  888. text-align:center;
  889. padding:15px;
  890. margin-top:-5px;
  891. }
  892.  
  893. .caption_posts pre {
  894. color:{color:Caption Text};
  895. }
  896.  
  897. .caption_posts code {
  898. color:{color:Caption Text};
  899. }
  900.  
  901. .caption_posts em { color:{color:Caption Text}; }
  902.  
  903. .caption_posts strong {
  904. color:{color:Caption Bold};
  905. }
  906.  
  907. .caption_posts:before {
  908. content:'';
  909. position:absolute;
  910. margin:-33px 0 0 -14px;
  911. border-bottom:18px solid {color:Caption};
  912. border-left:18px solid transparent;
  913. border-right:18px solid transparent;
  914. }
  915.  
  916. .caption_posts blockquote {
  917. background-color:transparent;
  918. border:none;
  919. padding:0;
  920. margin:none;
  921. }
  922.  
  923. .caption_posts a {
  924. color:{color:Caption Links};
  925. border-bottom:1px solid transparent;
  926. padding-bottom:2px;
  927. -webkit-transition: all 0.7s ease;
  928. -moz-transition: all 0.7s ease;
  929. -o-transition: all 0.7s ease;
  930. }
  931.  
  932. .caption_posts a:hover {
  933. border-bottom:1px solid white;
  934. -webkit-transition: all 0.7s ease;
  935. -moz-transition: all 0.7s ease;
  936. -o-transition: all 0.7s ease;
  937. }
  938.  
  939. /* Permalink Notes and Line */
  940. #line-posts {
  941. position:absolute;
  942. margin:90px auto auto -200px;
  943. width:168px;
  944. height:3px;
  945. background-color:{color:Line Accent};
  946. box-shadow: inset 0 0 0 0 transparent;
  947. -webkit-transition: all 0.7s ease;
  948. -moz-transition: all 0.7s ease;
  949. -o-transition: all 0.7s ease;
  950. }
  951.  
  952. .post:hover #line-posts {
  953. box-shadow: inset 170px 0 0 0 {color:Tags Background};
  954. -webkit-transition: all 0.3s ease-in;
  955. -moz-transition: all 0.3s ease-in;
  956. -o-transition: all 0.3s ease-in;
  957. }
  958.  
  959.  
  960. #line-posts:before {
  961. content:'';
  962. position:absolute;
  963. left:-2px;
  964. top:-14px;
  965. height:30px;
  966. width:30px;
  967. box-shadow: inset 0 0 0 0 transparent;
  968. border-radius:100%;
  969. -moz-border-radius:100%;
  970. background-color:{color:Line Accent};
  971. -webkit-transition: all 0.7s ease;
  972. -moz-transition: all 0.7s ease;
  973. -o-transition: all 0.7s ease;
  974. }
  975.  
  976. .post:hover #line-posts:before {
  977. background-color:{color:Tags Background};
  978. box-shadow: inset 170px 0 0 0 #222;
  979. -webkit-transition: all 0.3s ease-in;
  980. -moz-transition: all 0.3s ease-in;
  981. -o-transition: all 0.3s ease-in;
  982. }
  983.  
  984. #icon-posts {
  985. width:40px;
  986. padding:10px;
  987. position:absolute;
  988. margin-left:-275px;
  989. margin-top:23px;
  990. }
  991.  
  992.  
  993. #icon-posts img {
  994. width:30px;
  995. height:30px;
  996. padding:8px;
  997. background-color:{color:Reblog and Zoom};
  998. border-radius:100%;
  999. -moz-border-radius:100%;
  1000. -webkit-transition: all 0.7s ease;
  1001. -moz-transition: all 0.7s ease;
  1002. -o-transition: all 0.7s ease;
  1003. }
  1004.  
  1005. .post:hover #icon-posts img {
  1006. -webkit-transform:rotate(360deg);
  1007. -moz-transform:rotate(360deg);
  1008. -o-transform: rotate(360deg);
  1009. background-color:{color:Reblog and Zoom Hover};
  1010. -webkit-transition: all 0.7s ease;
  1011. -moz-transition: all 0.7s ease;
  1012. -o-transition: all 0.7s ease;
  1013.  
  1014. }
  1015.  
  1016. .reblog-bl {
  1017. position:absolute;
  1018. margin:3px 0 0 -265px;
  1019. width:30px;
  1020. height:30px;
  1021. padding:8px;
  1022. border-radius:100%;
  1023. -moz-border-radius:100%;
  1024. opacity:0;
  1025. z-index:99;
  1026. -webkit-transition: all 0.7s ease;
  1027. -moz-transition: all 0.7s ease;
  1028. -o-transition: all 0.7s ease;
  1029. }
  1030.  
  1031. .post:hover .reblog-bl {
  1032. opacity:1;
  1033. margin:33px 0 0 -265px;
  1034. -webkit-transition: all 0.4s ease;
  1035. -moz-transition: all 0.4s ease;
  1036. -o-transition: all 0.4s ease;
  1037. }
  1038.  
  1039. .perma-bl {
  1040. position:absolute;
  1041. margin:125px 0 0 -265px;
  1042. width:30px;
  1043. height:30px;
  1044. padding:8px;
  1045. border-radius:100%;
  1046. -moz-border-radius:100%;
  1047. opacity:0;
  1048. z-index:99;
  1049. -webkit-transition: all 0.7s ease;
  1050. -moz-transition: all 0.7s ease;
  1051. -o-transition: all 0.7s ease;
  1052. }
  1053.  
  1054. .post:hover .perma-bl {
  1055. opacity:1;
  1056. margin:95px 0 0 -265px;
  1057. -webkit-transition: all 0.4s ease;
  1058. -moz-transition: all 0.4s ease;
  1059. -o-transition: all 0.4s ease;
  1060. }
  1061.  
  1062. /* Loading.. */
  1063. #loading {
  1064. position: fixed;
  1065. left: 0px;
  1066. top: 0px;
  1067. width: 100%;
  1068. height: 100%;
  1069. z-index: 999999;
  1070. background: url(http://static.tumblr.com/5ojoydj/PMFmx3x7v/483__1_.gif) 50% 50% no-repeat #eee;
  1071. background-size:190px;
  1072. }
  1073.  
  1074. /* Chat! */
  1075. .chats .chat {
  1076. background: {color:Chat Odd};
  1077. padding:11px;
  1078. margin-bottom:0px;
  1079. }
  1080.  
  1081. .chats .chat.even {
  1082. background: {color:Chat Even};
  1083. }
  1084.  
  1085. /* Bold and Italic! */
  1086. b, em, strong{
  1087. color: {color:Bold text};
  1088. font-weight:bold;
  1089. }
  1090.  
  1091. i, em {
  1092. color: {color:Italic text};
  1093. font-weight:lighter;
  1094. font-style:italic;
  1095. }
  1096.  
  1097. .stabilize {
  1098. display:block;
  1099. padding:9px;
  1100. height:100px;
  1101. }
  1102.  
  1103. #audio {
  1104. width:30px;
  1105. height:34px;
  1106. padding:30px 30px 30px 30px;
  1107. background-color:#000;
  1108. overflow:hidden;
  1109. margin:0 0 0 29px;
  1110. opacity:0.7;
  1111. z-index:12;
  1112. border-radius:8px 8px 0 0;
  1113. -moz-border-radius:8px 8px 0 0;
  1114. -webkit-transition: all 0.7s ease;
  1115. -moz-transition: all 0.7s ease;
  1116. -o-transition: all 0.7s ease;
  1117. }
  1118.  
  1119. #audio:hover {
  1120. opacity:1;
  1121. }
  1122.  
  1123. #audio-album {
  1124. position:absolute;
  1125. display:block;
  1126. width:130px;
  1127. height:130px;
  1128. margin:-30px 0 0 0;
  1129. z-index:1;
  1130. border:10px solid #eee;
  1131. }
  1132.  
  1133. #audio-album img {
  1134. opacity:0.8;
  1135. }
  1136.  
  1137.  
  1138. .audioplayer {
  1139. position:absolute;
  1140. margin-left:90px;
  1141. margin-top:0px;
  1142. padding-bottom:7px;
  1143. }
  1144.  
  1145.  
  1146. .artist , .play {
  1147. width:180px;
  1148. margin-top:-7px;
  1149. margin-left:90px;
  1150. padding:9px;
  1151. border-radius:8px 8px 8px 8px;
  1152. -moz-border-radius:8px 8px 8px 8px;
  1153. background-color: {color:Blockquote};
  1154. }
  1155.  
  1156. .track {
  1157. width:180px;
  1158. margin-top:-7px;
  1159. margin-left:100px;
  1160. padding:9px;
  1161. border-radius:8px 8px 8px 8px;
  1162. -moz-border-radius:8px 8px 8px 8px;
  1163. background-color:#111;
  1164. color:#FFFFFF;
  1165. }
  1166.  
  1167. .track b {
  1168. color:#999;
  1169. }
  1170.  
  1171. .source{
  1172. font-style:italic;
  1173. text-align:center;
  1174. padding:9px;
  1175. }
  1176.  
  1177. #question {
  1178. width:260px;
  1179. background-color:{color:Ask Background};
  1180. color:{color:Ask Body};
  1181. padding:20px;
  1182. text-align:justify;
  1183. }
  1184.  
  1185. #question a {
  1186. color:white;
  1187. border-bottom:none;
  1188. }
  1189.  
  1190. #question img {
  1191. width:30px;
  1192. height:30px;
  1193. }
  1194.  
  1195. .asker a {
  1196. color:white;
  1197. }
  1198.  
  1199. /* Quote */
  1200. .links {
  1201. padding:20px;
  1202. text-align:justify;
  1203. font-family:'Lato';
  1204. font-size:20px;
  1205. font-style:italic;
  1206. line-height:22px;
  1207. color:#454545;
  1208. font-weight:500;
  1209. background-color:#eee;
  1210. }
  1211.  
  1212.  
  1213. .links span {
  1214. font-style:normal;
  1215. color:#8abdca;
  1216. font-size:60px;
  1217. float:left;
  1218. font-family:Garamond;
  1219. margin:11px;
  1220. }
  1221.  
  1222. .sa {
  1223. font-size:28px;
  1224. font-style:normal;
  1225. font-weight:lighter;
  1226. font-family: 'Lato', sans-serif;
  1227. text-align:left;
  1228. line-height:110%;
  1229. text-transform:none;
  1230. background-color:{color:Title Background Post};
  1231. padding:17px 17px 20px 70px;
  1232. }
  1233.  
  1234. .sa a { color:{color:Menu background};}
  1235.  
  1236. .sa:before {
  1237. content:'';
  1238. position:absolute;
  1239. margin:12px 0 0 -50px;
  1240. border-radius:100%;
  1241. -moz-border-radius:100%;
  1242. -webkit-border-radius:100%;
  1243. -o-border-radiud:100%;
  1244. background-color:{color:Title Circle One};
  1245. width:10px;
  1246. height:10px;
  1247. -webkit-box-shadow: 17px 0px 0px 0px {color:Title Circle Two};
  1248. -moz-box-shadow:17px 0px 0px 0px {color:Title Circle Two};
  1249. box-shadow: 17px 0px 0px 0px {color:Title Circle Two};
  1250. }
  1251.  
  1252.  
  1253. .si {
  1254. font-size:15px;
  1255. font-style:normal;
  1256. font-weight:lighter;
  1257. font-family:cambria;
  1258. text-align:left;
  1259. padding-left:10px;
  1260. text-transform:uppercase;
  1261. border-bottom:2px solid {color:Title Post};
  1262. background-color:{color:Title Background Post};
  1263. padding:6px;
  1264. }
  1265.  
  1266. .pagination {
  1267. position:absolute;
  1268. margin-top:90px;
  1269. text-align:center;
  1270. color:{color:Body);
  1271. background-color:{color:Sidebar Background};
  1272. padding:7px;
  1273. }
  1274.  
  1275. </style>
  1276.  
  1277. <!-- Lazy Load Effects by Mika Tuupola -->
  1278. {block:IfLazyLoadPosts}
  1279. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/8mXm7q8vn/jquery.js"></script>
  1280. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/ogWm7q8w1/lazyload.js"></script>
  1281. <script type="text/javascript" charset="utf-8">
  1282. var $j = jQuery.noConflict();
  1283. $j(function() {
  1284. if (navigator.platform == "iPad" || navigator.platform == "iPhone") return;
  1285. $j("img").lazyload({
  1286. placeholder : "http://static.tumblr.com/twte3d7/RSvlio0k5/grey.gif",
  1287. effect: "fadeIn",
  1288. });
  1289. });
  1290. </script>
  1291. {/block:IfLazyLoadPosts}
  1292.  
  1293. <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/sn/trunk/html5.js"></script><![endif]-->
  1294.  
  1295. <!-- Loading Bar -->
  1296. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  1297.  
  1298. <script type="text/javascript">
  1299. $(window).load(function() { $("#loading").delay(1000).fadeOut("slow");
  1300. })
  1301. </script>
  1302.  
  1303.  
  1304. <!-- Lazy Load Effects by Mika Tuupola -->
  1305. {block:IfLazyLoadPosts}
  1306. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/8mXm7q8vn/jquery.js"></script>
  1307. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/ogWm7q8w1/lazyload.js"></script>
  1308. <script type="text/javascript" charset="utf-8">
  1309. var $j = jQuery.noConflict();
  1310. $j(function() {
  1311. if (navigator.platform == "iPad" || navigator.platform == "iPhone") return;
  1312. $j("img").lazyload({
  1313. placeholder : "http://static.tumblr.com/twte3d7/RSvlio0k5/grey.gif",
  1314. effect: "fadeIn",
  1315. });
  1316. });
  1317. </script>
  1318. {/block:IfLazyLoadPosts}
  1319.  
  1320. <!-- Infinite Scrolling by Cody Sherman -->
  1321. {block:IfInfiniteScrolling}
  1322. <script type="text/javascript" src="http://static.tumblr.com/q0etgkr/EIBmz7s0p/infinitescrolling.js"></script>
  1323. {/block:IfInfiniteScrolling}
  1324.  
  1325. <script type="text/javascript"
  1326. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  1327.  
  1328. <script>
  1329.  
  1330. $(document).ready(function() {
  1331.  
  1332. //
  1333.  
  1334. //When you click on a link with class of poplight and the href starts with a #
  1335.  
  1336. $('a.poplight[href^=#]').click(function() {
  1337.  
  1338. var popID = $(this).attr('rel'); //Get Popup Name
  1339.  
  1340. var popURL = $(this).attr('href'); //Get Popup href to define size
  1341.  
  1342.  
  1343.  
  1344. //Pull Query & Variables from href URL
  1345.  
  1346. var query= popURL.split('?');
  1347.  
  1348. var dim= query[1].split('&');
  1349.  
  1350. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  1351.  
  1352.  
  1353.  
  1354. //Fade in the Popup and add close button
  1355.  
  1356. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="https://dl.dropboxusercontent.com/u/36901456/pixelated-light/x.gif" class="btn_close" title="Close Window" alt="Close" /></a>');
  1357.  
  1358.  
  1359. //Define margin for center alignment (vertical horizontal) - we add 80px to the height/width to accomodate for the padding and border width defined in the css
  1360.  
  1361. var popMargTop = ($('#' + popID).height() + 80) / 2;
  1362.  
  1363. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  1364.  
  1365.  
  1366.  
  1367. //Apply Margin to Popup
  1368.  
  1369. $('#' + popID).css({
  1370.  
  1371. 'margin-top' : -popMargTop,
  1372.  
  1373. 'margin-left' : -popMargLeft
  1374.  
  1375. });
  1376.  
  1377.  
  1378.  
  1379. //Fade in Background
  1380.  
  1381. $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
  1382.  
  1383. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies
  1384.  
  1385.  
  1386.  
  1387. return false;
  1388.  
  1389. });
  1390.  
  1391.  
  1392.  
  1393. //Close Popups and Fade Layer
  1394.  
  1395. $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
  1396.  
  1397. $('#fade , .popup_block').fadeOut(function() {
  1398.  
  1399. $('#fade, a.close').remove(); //fade them both out
  1400.  
  1401. });
  1402.  
  1403. return false;
  1404.  
  1405. });
  1406.  
  1407. });
  1408.  
  1409. </script>
  1410. <!-- END -->
  1411.  
  1412.  
  1413. </head>
  1414. <body>
  1415.  
  1416. <div id="bubble-music">
  1417. <img style="margin:7px;" src="http://media.tumblr.com/tumblr_m7w2py1dEP1r6o8v2.gif">
  1418. <div class="music_embed">
  1419. <embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=true&f0=https://dl.dropboxusercontent.com/u/36901456/01%20-%20The%20Other%20self.mp3&t0=&total=1" quality="high" wmode="transparent" width="200" height="10" name="billy" align="middle" type="application/x-shockwave-flash" />
  1420. </div>
  1421. </div>
  1422.  
  1423. {block:IfPopUpLinks}
  1424. <div id="popup_name" class="popup_block">
  1425. {block:IfCustomLinkOne}<a href="{text:Custom Link One URL}" class="link">{text:Custom Link One}</a>{/block:IfCustomLinkOne}
  1426. {block:IfCustomLinkTwo}<a href="{text:Custom Link Two URL}" class="link">{text:Custom Link Two}</a>{/block:IfCustomLinkTwo}
  1427. {block:IfCustomLinkThree}<a href="{text:Custom Link Three URL}" class="link">{text:Custom Link Three}</a>{/block:IfCustomLinkThree}
  1428. {block:IfCustomLinkFour}<a href="{text:Custom Link Four URL}" class="link">{text:Custom Link Four}</a>{/block:IfCustomLinkFour}
  1429. {block:IfCustomLinkFive}<a href="{text:Custom Link Five URL}" class="link">{text:Custom Link Five}</a>{/block:IfCustomLinkFive}
  1430. {block:IfCustomLinkSix}<a href="{text:Custom Link Six URL}" class="link">{text:Custom Link Six}</a>{/block:IfCustomLinkSix}
  1431. </div>
  1432. {/block:IfPopUpLinks}
  1433.  
  1434. {block:IfLoadingBar}
  1435. <!-- Loading -->
  1436. <div id="loading"></div>
  1437. {/block:IfLoadingBar}
  1438.  
  1439. <!-- Left Border -->
  1440. <div id="left-border"></div>
  1441.  
  1442. <!-- Circle -->
  1443. <div id="circle-main">
  1444. <!-- MEH -->
  1445. <a href="/"><div class="circle-n">
  1446. <span>{text:Main Icon Title}</span>
  1447. </div>
  1448. </a>
  1449.  
  1450. <!-- .. LINE .. -->
  1451. <div class="line-c-1"></div>
  1452. <div class="line-c-2"></div>
  1453. <div class="line-c-3"></div>
  1454. <div class="line-c-4"></div>
  1455.  
  1456. <!-- .. Description Box .. -->
  1457. <div id="description_content">
  1458. {Description}
  1459. </div>
  1460.  
  1461. <div class="pagination_c">
  1462. {block:IfNotInfiniteScrolling}
  1463. {block:Pagination}
  1464. {block:PreviousPage}
  1465. <a href="{PreviousPage}" class="jump_page">&laquo;</a>
  1466. {/block:PreviousPage}
  1467. {block:JumpPagination length="5"}
  1468. {block:CurrentPage}
  1469. <span class="current_page">{PageNumber}</span>
  1470. {/block:CurrentPage}
  1471. {block:JumpPage}<a class="jump_page" href="{URL}">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination}
  1472. {block:NextPage}<a href="{NextPage}" class="jump_page">&raquo;</a>{/block:NextPage}
  1473. {/block:Pagination}
  1474. {/block:IfNotInfiniteScrolling}
  1475. </div>
  1476. </div>
  1477.  
  1478. <!-- Top Menu -->
  1479. <div id="top_menu">
  1480. <div class='title-top'> {text:Title of Topbar} </div>
  1481. {block:IfPopUpLinks}
  1482. <a title="Click!" href="#?w=500" rel="popup_name" class="poplight">
  1483. <div id="main_pop_menu">
  1484. ≡
  1485. </div>
  1486. </a>
  1487. {/block:IfPopUpLinks}
  1488.  
  1489. {block:IfSlidingMenuBar}
  1490. <div id="main_holder_menu">
  1491. <div class="title_menu">
  1492. <!-- You can change the '≡' with your own words -->
  1493. ≡
  1494. </div>
  1495. <div class="one_delay"><a class="holder_menu" href="/">Home</a></div>
  1496. <div class="two_delay"><a class="holder_menu" href="/archive">Archive</a></div>
  1497. <div class="three_delay"><a class="holder_menu" href="/ask">Contact</a></div>
  1498. <div class="four_delay"><a class="holder_menu" href="{text:Custom Link URL}">{text:Custom Link Name}</a></div>
  1499. </div>
  1500. {/block:IfSlidingMenuBar}
  1501.  
  1502. </div>
  1503.  
  1504.  
  1505. <div id="posts">
  1506.  
  1507.  
  1508. <!-- Infinite Scrolling by Cody Sherman -->
  1509. {block:IfInfiniteScrolling}
  1510. <div class="autopagerize_page_element">
  1511. {/block:IfInfiniteScrolling}
  1512.  
  1513. {block:Posts}
  1514.  
  1515. <article class="post">
  1516.  
  1517. <!-- LINE on the Posts -->
  1518. <div id="line-posts"></div>
  1519.  
  1520.  
  1521. <div class="reblog-bl"><a title="Reblog?" href="{ReblogURL}"><img src="http://static.tumblr.com/5ojoydj/J4zmwc8by/loop.png"></a></div>
  1522. <div class="perma-bl"><a title="Go to permalink?" href="{Permalink}"><img src="http://static.tumblr.com/5ojoydj/t0Umwc8sn/zoomin.png"></a></div>
  1523.  
  1524. <div id="icon-posts">
  1525. <a href="{ReblogURL}"><img src="http://static.tumblr.com/5ojoydj/aJQmvo3nm/loop.png"></a> <p></p><a href="{Permalink}"><img src="http://static.tumblr.com/5ojoydj/xmdmvo3ol/zoomin.png"></a>
  1526. </div>
  1527.  
  1528. {block:Text}
  1529. {block:Title}
  1530. <div class="titles"><a href="{Permalink}">{Title}</a></div>
  1531. {/block:Title}
  1532. {Body}
  1533. {/block:Text}
  1534.  
  1535. {block:Photo}
  1536. {block:PermalinkPage}
  1537. {LinkOpenTag}
  1538. <img src="{PhotoURL-400}">
  1539. {LinkCloseTag}
  1540. {/block:PermalinkPage}
  1541.  
  1542. {block:IndexPage}
  1543. {LinkOpenTag}
  1544. <meta name="{PhotoAlt}" content="{PhotoAlt}"/>
  1545. <img src="{PhotoURL-500}" width="400px" alt="{PhotoAlt}"/>{LinkCloseTag}
  1546. {/block:IndexPage}
  1547.  
  1548. {block:IfShowCaption}
  1549. <div class="caption_posts">
  1550. {block:Caption}{Caption}{/block:Caption}</div>
  1551. {/block:IfShowCaption}
  1552.  
  1553. {block:IfNotShowCaption}{block:PermalinkPage}
  1554. <div class="caption_posts">
  1555. {block:Caption}{Caption}{/block:Caption}</div>
  1556. {block:PermalinkPage}{/block:IfNotShowCaption}
  1557. {/block:Photo}
  1558.  
  1559. {block:Photoset}
  1560. {block:PermalinkPage}{Photoset-400} {/block:PermalinkPage}
  1561. {block:IndexPage} {Photoset-400}{/block:IndexPage}
  1562. {block:IfShowCaption}
  1563. <div class="caption_posts">{block:Caption}{Caption}{/block:Caption}</div>
  1564. {/block:IfShowCaption}
  1565.  
  1566. {block:IfNotShowCaption}{block:PermalinkPage}
  1567. <div class="caption_posts">{block:Caption}{Caption}{/block:Caption}</div>
  1568. {block:PermalinkPage}{/block:IfNotShowCaption}
  1569. {/block:Photoset}
  1570.  
  1571. {block:Quote}
  1572. <div class="links">
  1573. <span>❝</span>
  1574. {Quote}
  1575. </div>
  1576. {block:Source}
  1577. <div class="source"> — {Source} </div>
  1578. {/block:Source}
  1579. {/block:Quote}
  1580.  
  1581. {block:Link}
  1582. <div class="sa">
  1583. <a href="{URL}" {Target}>{Name}</a>
  1584. </div>
  1585. {block:Description}
  1586. {Description}
  1587. {/block:Description}
  1588. {/block:Link}
  1589.  
  1590. {block:Chat}
  1591. {block:Title}
  1592. <div class="si">{Title}</div>
  1593. {/block:Title}
  1594. <div class="chats">
  1595. {block:Lines}
  1596. <div class="chat {Alt}">{block:Label}<span>{Label}</span>{/block:Label} {Line}</div>
  1597. {/block:Lines}
  1598. </div>
  1599. {/block:Chat}
  1600.  
  1601. {block:Audio}
  1602. <div id="audio">{AudioPlayerBlack}</div>
  1603. <div id="audio-album"><img src="http://media.tumblr.com/tumblr_md46tfaw9F1rfymxfo1_400.jpg"/></div>
  1604. <div id="audio-album">
  1605. {block:AlbumArt}
  1606. <img src="{AlbumArtURL}">
  1607. {/block:AlbumArt}
  1608. </div>
  1609. <div class="audioplayer">
  1610. <div class="artist"> {block:Artist} <b>Artist:</b> {Artist}{/block:Artist}</div> <br /> <div class="track"><b>Track:</b> {block:TrackName} "{TrackName}" {/block:TrackName}</div> <br /> <b> <div class="play">Plays: </b> {PlayCountWithLabel} </div> </div>
  1611. <div class="stabilize"></div>
  1612. {/block:Audio}
  1613.  
  1614. {block:Video}
  1615. {block:PermalinkPage}{Video-500}{/block:PermalinkPage}
  1616. {block:IndexPage}{Video-400}{/block:IndexPage}
  1617. {block:IfShowCaption}
  1618. {block:Caption}{Caption}{/block:Caption}
  1619. {/block:IfShowCaption}
  1620.  
  1621. {block:IfNotShowCaption}{block:PermalinkPage}
  1622. {block:Caption}{Caption}{/block:Caption}
  1623. {block:PermalinkPage}{/block:IfNotShowCaption}
  1624. {/block:Video}
  1625.  
  1626. {block:Answer}
  1627. <p>
  1628. <div id="question">
  1629. <div style="position:absolute;background-color:{color:Menu Background};color:white;margin:-40px 0 0 10px;padding:9px;">{Asker}:</div>
  1630. <div style="position:absolute;font-size:40px;margin:0 0 0 274px;color:{color:Ask Background};">◤</div>
  1631. <img style="position:absolute;border:10px solid #eee;margin:-10px 0 0 320px;" src="{AskerPortraitURL-30}">
  1632. {Question}
  1633. </div>
  1634. <p>
  1635. {Answer}
  1636. {/block:Answer}
  1637.  
  1638. {block:IndexPage}
  1639. {block:HasTags}
  1640. <div id="tagg_option">
  1641. {block:Tags} <a href="{TagURL}">#{Tag}</a> {/block:Tags}
  1642. </div>
  1643. {/block:HasTags}
  1644. {/block:IndexPage}
  1645.  
  1646. </article>
  1647.  
  1648. {block:PermalinkPage}
  1649. <div id="permalinks">
  1650. {block:Date}
  1651. <center><span style="text-transform:uppercase; font-size:15px;margin-top:5px;margin-bottom:5px;">{DayOfWeek}, {Month} {DayOfMonth}{DayOfMonthSuffix}, {Year}</span></center><br/>{/block:Date}
  1652. <div style="border-bottom:1px dotted {color:border blockquote};"></div>
  1653. <br>
  1654. {block:RebloggedFrom}<b>original:</b> <a href="{ReblogRootURL}">{ReblogRootName}</a> <br> <b>via:</b> <a href="{ReblogParentURL}">{ReblogParentName}</a><br />{/block:RebloggedFrom}
  1655. {block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}<br>
  1656. {block:HasTags} {block:Tags} <a href="{TagURL}">#{Tag}</a> {/block:Tags}{/block:HasTags}
  1657. <div style="border-bottom:1px solid {color:border blockquote};margin-bottom:5px;"></div>
  1658. {block:PostNotes}
  1659. {PostNotes}
  1660. {/block:PostNotes}
  1661. </div>
  1662. {/block:PermalinkPage}
  1663. {/block:Posts}
  1664. </div>
  1665.  
  1666. {block:IfAnimationOnScroll}
  1667. <!-- DONT TOUCH : 01 -->
  1668. <script>
  1669. $(window).scroll(function() {
  1670. $('#posts').each(function(){
  1671. var imagePos = $(this).offset().top;
  1672.  
  1673. var topOfWindow = $(window).scrollTop();
  1674. if (imagePos < topOfWindow+900) {
  1675. $(this).addClass("slideRight");
  1676. }
  1677. });
  1678. });
  1679. </script>
  1680. {/block:IfAnimationOnScroll}
  1681.  
  1682. {block:IfAnimationOnScroll}
  1683. <!-- DONT TOUCH : 02 -->
  1684. <script>
  1685. $(window).scroll(function() {
  1686. $('#top_menu').each(function(){
  1687. var imagePos = $(this).offset().top;
  1688.  
  1689. var topOfWindow = $(window).scrollTop();
  1690. if (imagePos < topOfWindow+900) {
  1691. $(this).addClass("fadeIn");
  1692. }
  1693. });
  1694. });
  1695. </script>
  1696. {/block:IfAnimationOnScroll}
  1697.  
  1698. {block:IfAnimationOnScroll}
  1699. <!-- DONT TOUCH : 03-->
  1700. <script>
  1701. $(window).scroll(function() {
  1702. $('#circle-main').each(function(){
  1703. var imagePos = $(this).offset().top;
  1704.  
  1705. var topOfWindow = $(window).scrollTop();
  1706. if (imagePos < topOfWindow+900) {
  1707. $(this).addClass("bigEntrance");
  1708. }
  1709. });
  1710. });
  1711. </script>
  1712. {/block:IfAnimationOnScroll}
  1713.  
  1714. <!-- DO NOT REMOVE :( -->
  1715. <a title="A theme by Fukuo" href="http://fukuo.tumblr.com/" id="credit">
  1716. ✂ &nbsp; Fukuo
  1717. </a>
  1718. </body>
  1719. </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!