API tools faq
paste
Advertisement
mardeemoe

[09] the sea otter

mardeemoe
Jul 23rd, 2014
4,402
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 45.21 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <!--------------------------------------------
  3. THEME 09: THE SEA OTTER
  4.  
  5. THEME BY CYNESSIE
  6. http://cythemes.tumblr.com // http://cynessie.tumblr.com
  7. ---------------------------------------------
  8. TERMS OF USE:
  9. ● DO NOT REMOVE THE CREDITS
  10. ● DO NOT CLAIM AS YOUR OWN
  11. ● DO NOT REDISTRIBUTE
  12. ● DO NOT USE AS A BASE
  13. ----------------------------------------------->
  14.  
  15. {block:IfinfiniteScroll}<script type="text/javascript"
  16. src="http://codysherman.com/tools/infinite-scrolling/code"></script>{/block:IfinfiniteScroll}
  17.  
  18. <head>
  19.  
  20. <title>{Title}</title>
  21. <link rel="shortcut icon" href="{Favicon}">
  22. <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  23. <meta name="description" content="" />
  24. <meta http-equiv="x-dns-prefetch-control" content="off"/>
  25.  
  26. <!-- S-M-T TOOLTIP CODE START -->
  27. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  28. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  29. <script>
  30. (function($){
  31. $(document).ready(function(){
  32. $("a[title]").style_my_tooltips({
  33. tip_follows_cursor:true,
  34. tip_delay_time:0,
  35. tip_fade_speed:0,
  36. attribute:"title"
  37. });
  38. });
  39. })(jQuery);
  40. </script>
  41. <!-- S-M-T TOOLTIP CODE END -->
  42.  
  43. <!-- HINT CODE START -->
  44. <link rel="stylesheet" href="">
  45. <!-- HINT CODE END -->
  46.  
  47. <meta name="image:background" content="http://static.tumblr.com/becd274016c3986cb01d45bbec604774/skpdfau/Nlen955l9/tumblr_static_dapapw393dw0k0g8gkc48gc8w.png">
  48. <meta name="image:big side image" content="http://static.tumblr.com/c359e178d197c84f748e8f8f460d3a89/skpdfau/cAzn93m7g/tumblr_static_779oo3abemkosk4c8008440c0.png">
  49. <meta name="image:small side image" content="http://static.tumblr.com/7a5951e2104e0fe673476ddb6a79539d/skpdfau/6PGn95hk6/tumblr_static_1j027udc5tq84wsscoo0oc0cw.gif">
  50.  
  51. <meta name="color:background" content="#ffffff">
  52.  
  53. <meta name="color:text" content="#686663">
  54. <meta name="color:bold" content="#d7bd77">
  55. <meta name="color:italic" content="#d7bd77">
  56. <meta name="color:link" content="#e5a787">
  57. <meta name="color:link hover" content="#ceb062">
  58.  
  59. <meta name="color:tooltip text" content="#686663">
  60. <meta name="color:tooltip bg" content="#e2cd97">
  61. <meta name="color:tooltip border" content="#da9f7f">
  62.  
  63. <meta name="color:scrollbar bg" content="#e2cd97">
  64. <meta name="color:scrollbar thumb" content="#da9f7f">
  65.  
  66. <meta name="color:button text" content="#da9f7f">
  67. <meta name="color:button bg" content="#e2e2e2">
  68. <meta name="color:button text hover" content="#e2e2e2">
  69. <meta name="color:button bg hover" content="#da9f7f">
  70. <meta name="color:button tooltip text" content="#686663">
  71. <meta name="color:button tooltip bg" content="#e2cd97">
  72.  
  73. <meta name="color:header" content="#d48155">
  74. <meta name="color:header bg" content="#e2cd97">
  75. <meta name="color:header border" content="#da9f7f">
  76.  
  77. <meta name="color:post bg" content="#e8e8e8">
  78. <meta name="color:post title" content="#d48155">
  79. <meta name="color:post title bg" content="#e2cd97">
  80. <meta name="color:post title border" content="#da9f7f">
  81. <meta name="color:post title link" content="#d48155">
  82. <meta name="color:post title link hover" content="#eaeaea">
  83. <meta name="color:subtitle text" content="#ceb062">
  84. <meta name="color:subtitle bg" content="#e2e2e2">
  85. <meta name="color:blockquote border" content="#e2cd97">
  86. <meta name="color:pre bg" content="#e2e2e2">
  87. <meta name="color:pre border" content="#e2cd97">
  88. <meta name="color:pre text" content="#686663">
  89.  
  90. <meta name="color:asker text" content="#d48155">
  91. <meta name="color:asker text hover" content="#eaeaea">
  92. <meta name="color:asker bg" content="#e2cd97">
  93. <meta name="color:asker border" content="#da9f7f">
  94.  
  95. <meta name="color:quote" content="#ce8259">
  96. <meta name="color:quote marks" content="#eaeaea">
  97. <meta name="color:quote bg" content="#e2cd97">
  98. <meta name="color:quote border" content="#da9f7f">
  99.  
  100. <meta name="color:chat even name" content="#d7bd77">
  101. <meta name="color:chat even text" content="#686663">
  102. <meta name="color:chat even bg" content="#e8e8e8">
  103. <meta name="color:chat odd name" content="#e5a787">
  104. <meta name="color:chat odd text" content="#686663">
  105. <meta name="color:chat odd bg" content="#e8e8e8">
  106.  
  107. <meta name="color:audio info bg" content="#e8e8e8">
  108. <meta name="color:audio info label" content="#d7bd77">
  109. <meta name="color:audio info text" content="#686663">
  110.  
  111. <meta name="if:infinite scroll" content="0">
  112. <meta name="if:500px posts" content="1">
  113. <meta name="if:monochrome photos" content="0">
  114. <meta name="if:faded photos" content="1">
  115. <meta name="if:black audio player" content="1">
  116. <meta name="if:show captions" content="1">
  117. <meta name="if:show tags" content="1">
  118. <meta name="if:music player" content="1">
  119.  
  120. <meta name="text:header" content="title here">
  121. <meta name="text:link 1 title" content="link 1">
  122. <meta name="text:link 1 url" content="/">
  123. <meta name="text:link 1 icon" content="fa-circle-o">
  124.  
  125. <meta name="text:link 2 title" content="">
  126. <meta name="text:link 2 url" content="">
  127. <meta name="text:link 2 icon" content="fa-circle-o">
  128.  
  129. <meta name="text:link 3 title" content="">
  130. <meta name="text:link 3 url" content="">
  131. <meta name="text:link 3 icon" content="">
  132.  
  133. <meta name="text:link 4 title" content="">
  134. <meta name="text:link 4 url" content="">
  135. <meta name="text:link 4 icon" content="">
  136.  
  137. <meta name="text:link 5 title" content="">
  138. <meta name="text:link 5 url" content="">
  139. <meta name="text:link 5 icon" content="">
  140.  
  141. <meta name="text:link 6 title" content="">
  142. <meta name="text:link 6 url" content="">
  143. <meta name="text:link 6 icon" content="">
  144.  
  145. <meta name="text:link 7 title" content="">
  146. <meta name="text:link 7 url" content="">
  147. <meta name="text:link 7 icon" content="">
  148.  
  149. <meta name="text:link 8 title" content="">
  150. <meta name="text:link 8 url" content="">
  151. <meta name="text:link 8 icon" content="">
  152.  
  153. <meta name="text:link 9 title" content="">
  154. <meta name="text:link 9 url" content="">
  155. <meta name="text:link 9 icon" content="">
  156.  
  157. <meta name="text:link 10 title" content="">
  158. <meta name="text:link 10 url" content="">
  159. <meta name="text:link 10 icon" content="">
  160.  
  161.  
  162. <link href="//fonts.googleapis.com/css?family=Oswald:300,400,700" rel="stylesheet" type="text/css">
  163. <link href="//fonts.googleapis.com/css?family=Share+Tech Mono:400" rel="stylesheet" type="text/css">
  164.  
  165. <style type="text/css">
  166. /*---BASICS---*/
  167.  
  168. @import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);
  169.  
  170. @font-face {
  171. font-family: 'tinytots';
  172. src: url('https://dl.dropboxusercontent.com/s/k85vnokasc9renw/tinytots.ttf?');
  173. }
  174.  
  175. body {
  176. margin: 0;
  177. background: url('{image:background}') {color:background} fixed;
  178. color: {color:text};
  179. font-family: verdana;
  180. font-size: 10px;
  181. }
  182.  
  183. a {
  184. color: {color:link};
  185. text-decoration: none;
  186. transition: 0.4s;
  187. -moz-transition: 0.4s;
  188. -webkit-transition: 0.4s;
  189. -o-transition: 0.4s;
  190. }
  191.  
  192. a:hover {
  193. color: {color:link hover};
  194. transition: 0.4s;
  195. -moz-transition: 0.4s;
  196. -webkit-transition: 0.4s;
  197. -o-transition: 0.4s;
  198. }
  199.  
  200.  
  201. i, em {
  202. color: {color:italic};
  203. }
  204.  
  205. b, strong {
  206. color: {color:bold};
  207. }
  208.  
  209. pre {
  210. padding: 5px;
  211. background-color: {color:pre bg};
  212. border-left: 1px solid {color:pre border};
  213. }
  214.  
  215. blockquote {
  216. margin: 0 0 0 10px;
  217. padding-left: 5px;
  218. border-left: 1px solid {color:blockquote border};
  219. }
  220.  
  221. h1 {
  222. background-color: {color:subtitle bg};
  223. color: {color:subtitle text};
  224. font-family: oswald;
  225. font-size: 15px;
  226. font-weight: normal;
  227. letter-spacing: 3px;
  228. text-align: center;
  229. text-transform: uppercase;
  230. }
  231.  
  232. h2 {
  233. color: {color:subtitle text};
  234. font-family: oswald;
  235. font-size: 13px;
  236. font-weight: normal;
  237. letter-spacing: 3px;
  238. text-align: center;
  239. }
  240.  
  241. h3 {
  242. color: {color:text};
  243. font-family: oswald;
  244. font-size: 11px;
  245. font-weight: normal;
  246. letter-spacing: 2px;
  247. text-align: center;
  248. }
  249.  
  250. ::-webkit-scrollbar {
  251. width: 5px;
  252. height: 5px;
  253. background: {color:scrollbar bg};
  254. }
  255.  
  256. ::-webkit-scrollbar-thumb {
  257. background: {color:scrollbar thumb};
  258.  
  259. }
  260.  
  261. .container {
  262. {block:if500pxposts}width: 850px;{/block:if500pxposts}
  263. {block:ifnot500pxposts}width: 750px;{/block:ifnot500pxposts}
  264. margin: auto;
  265. }
  266.  
  267. /*---SIDEBAR---*/
  268.  
  269. .sidehold {
  270. z-index: 999;
  271. position: fixed;
  272. width: 250px;
  273. height: 500px;
  274. margin: 0px 0 0 61px;
  275. }
  276.  
  277. .sidebar {
  278. position: fixed;
  279. width: 230px;
  280. height: 500px;
  281.  
  282. }
  283.  
  284. .sideimg1 {
  285. position: absolute;
  286. z-index: 5;
  287. transition: .5s;
  288. -moz-transition: .5s;
  289. -webkit-transition: .5s;
  290. -o-transition: .5s;
  291. transition-delay: 1s;
  292. -webkit-transition-delay: 1s;
  293. }
  294.  
  295. .sidehold:hover .sideimg1 {
  296. opacity: 0;
  297. transition: .5s;
  298. -moz-transition: .5s;
  299. -webkit-transition: .5s;
  300. -o-transition: .5s;
  301. transition-delay: 0s;
  302. -webkit-transition-delay: 0s;
  303. }
  304.  
  305. .sideimg2 {
  306. position: absolute;
  307. opacity: 0;
  308. z-index: 10;
  309. margin: 15px 0 0 0;
  310. background: {color:desc bg};
  311. transition: 1s;
  312. -moz-transition: 1s;
  313. -webkit-transition: 1s;
  314. -o-transition: 1s;
  315. }
  316.  
  317. .sidehold:hover .sideimg2 {
  318. opacity: 1;
  319. margin: 0 0 0 0;
  320. transition: 1s;
  321. -moz-transition: 1s;
  322. -webkit-transition: 1s;
  323. -o-transition: 1s;
  324. transition-delay: .5s;
  325. -webkit-transition-delay: .5s;
  326. }
  327.  
  328. .sideimg1 img{
  329. width: 230px;
  330. height: 500px;
  331. }
  332.  
  333. .sideimg2 img {
  334. width: 230px;
  335. height: 230px;
  336. }
  337.  
  338. .header {
  339. position: absolute;
  340. z-index: 20;
  341. height: auto;
  342. width: 380px;
  343. margin: 223px 0 0 -285px;
  344. padding: 5px 20px 5px 20px;
  345. background: {color:header bg};
  346. color: {color:header};
  347. font-family: oswald;
  348. font-size: 25px;
  349. font-weight: normal;
  350. letter-spacing: 7px;
  351. line-height: 43px;
  352. text-transform: uppercase;
  353. border-left: 80px solid {color:header border};
  354. -webkit-transform: rotate(-90deg);
  355. -moz-transform: rotate(-90deg);
  356. transition: .5s;
  357. -moz-transition: .5s;
  358. -webkit-transition: .5s;
  359. -o-transition: .5s;
  360. transition-delay: .5s;
  361. -webkit-transition-delay: .5s;
  362. }
  363.  
  364. .sidehold:hover .header {
  365. opacity: 0;
  366. transition: 1s;
  367. -moz-transition: 1s;
  368. -webkit-transition: 1s;
  369. -o-transition: 1s;
  370. transition-delay: .5s;
  371. -webkit-transition-delay: .5s;
  372. }
  373.  
  374.  
  375.  
  376. .desc {
  377. position: absolute;
  378. opacity: 0;
  379. z-index: 20;
  380. height: 245px;
  381. width: 210px;
  382. margin: 250px 0 0 0;
  383. padding: 10px 10px;
  384. background: {color:post bg};
  385. transition: 1s;
  386. -moz-transition: 1s;
  387. -webkit-transition: 1s;
  388. -o-transition: 1s;
  389. }
  390.  
  391. .sidehold:hover .desc {
  392. opacity: 1;
  393. margin: 235px 0 0 0;
  394. transition: 1s;
  395. -moz-transition: 1s;
  396. -webkit-transition: 1s;
  397. -o-transition: 1s;
  398. transition-delay: .5s;
  399. -webkit-transition-delay: .5s;
  400. }
  401.  
  402. .nav {
  403. height: auto;
  404. width: 230px;
  405. margin: 510px 0 0 0;
  406. background: transparent;
  407. text-align:center;
  408. }
  409.  
  410. .nav a {
  411. display: inline-block;
  412. height: 40px;
  413. width: 40px;
  414. margin: 5px;
  415. background: {color:button bg};
  416. color: {color:button text};
  417. font-size: 20px;
  418. line-height: 40px;
  419. text-align: center;
  420. border-radius: 50%;
  421. }
  422.  
  423. .nav a:hover {
  424. background: {color:button bg hover};
  425. color: {color:button text hover};
  426. }
  427.  
  428. .cnav {
  429. position: absolute;
  430. opacity: 0;
  431. z-index: 25;
  432. height: 500px;
  433. width: 40px;
  434. margin: 0 0 0 -45px;
  435. background: transparent;
  436. transition: 1s;
  437. -moz-transition: 1s;
  438. -webkit-transition: 1s;
  439. -o-transition: 1s;
  440. }
  441.  
  442. .sidehold:hover .cnav {
  443. opacity: 1;
  444. transition: 1s;
  445. -moz-transition: 1s;
  446. -webkit-transition: 1s;
  447. -o-transition: 1s;
  448. transition-delay: 1s;
  449. -webkit-transition-delay: 1s;
  450. }
  451.  
  452. .cnav a {
  453. display: inline-block;
  454. height: 30px;
  455. width: 30px;
  456. margin: 5px;
  457. background: {color:button bg};
  458. color: {color:button text};
  459. font-size: 15px;
  460. line-height: 30px;
  461. text-align: center;
  462. border-radius: 50%;
  463. }
  464.  
  465. .cnav a:hover {
  466. background: {color:button bg hover};
  467. color: {color:button text hover};
  468. }
  469.  
  470.  
  471. /*---ENTRIES---*/
  472.  
  473. .postwrap {
  474. margin: 30px 0 0 311px;
  475. {block:if500pxposts}width: 520px;{/block:if500pxposts}
  476. {block:ifnot500pxposts}width: 420px;{/block:ifnot500pxposts}
  477.  
  478. }
  479.  
  480. .entryhold {
  481. {block:if500pxposts}width: 520px;{/block:if500pxposts}
  482. {block:ifnot500pxposts}width: 420px;{/block:ifnot500pxposts}
  483. background: transparent;
  484. margin: 0 0 30px 0;
  485. transition: 0.4s;
  486. -moz-transition: 0.4s;
  487. -webkit-transition: 0.4s;
  488. -o-transition: 0.4s;
  489. transition-delay: .4s;
  490. -webkit-transition-delay: .4s;
  491. }
  492.  
  493. .entry {
  494. z-index: 4;
  495. {block:if500pxposts}width: 500px;{/block:if500pxposts}
  496. {block:ifnot500pxposts}width: 400px;{/block:ifnot500pxposts}
  497. background: transparent;
  498. }
  499.  
  500. .entrytitle {
  501. background: {color:post title bg};
  502. color: {color:post title};
  503. padding: 3px 15px 3px 15px;
  504. font-family: oswald;
  505. font-size: 15px;
  506. letter-spacing: 4px;
  507. text-align: left;
  508. text-transform: uppercase;
  509. border-left: 60px solid {color:post title border};
  510. }
  511.  
  512. .entrytitle a {
  513. color: {color:post title link};
  514. }
  515.  
  516. .entrytitle a:hover {
  517. color: {color:post title link hover};
  518. letter-spacing: 6px;
  519. }
  520.  
  521. .entrytext {
  522. margin: 5px 0 0 0;
  523. background: {color:post bg};
  524. padding: 10px;
  525. }
  526.  
  527. .entrytext img {
  528. max-width:100%;
  529. }
  530.  
  531. /*---ANSWER---*/
  532.  
  533. .allques {
  534. {block:if500pxposts}width: 500px;{/block:if500pxposts}
  535. {block:ifnot500pxposts}width: 400px;{/block:ifnot500pxposts}
  536.  
  537. margin: 0 0 5px 0;
  538. background: transparent;
  539. }
  540.  
  541. .aiconhold {
  542. position: absolute;
  543. width: 48px;
  544. padding: 0px;
  545. }
  546.  
  547. .aicon {
  548. z-index: 99;
  549. position: absolute;
  550. height: 48px;
  551. width: 48px;
  552. padding: 5px;
  553. background: {color:asker border};
  554. }
  555.  
  556. .asker {
  557. z-index: 4;
  558. {block:if500pxposts}width: 429px;{/block:if500pxposts}
  559. {block:ifnot500pxposts}width: 329px;{/block:ifnot500pxposts}
  560. margin: 5px 0 2px 58px;
  561. padding: 3px 4px 3px 10px;
  562. background: {color:asker bg};
  563. color: {color:asker text};
  564. font-family: oswald;
  565. font-size: 15px;
  566. letter-spacing: 4px;
  567. text-align: left;
  568. text-transform: uppercase;
  569. border-left: 0px solid {color:asker border};
  570. transition: 0.4s;
  571. -moz-transition: 0.4s;
  572. -webkit-transition: 0.4s;
  573. -o-transition: 0.4s;
  574. }
  575.  
  576.  
  577.  
  578. .asker a {
  579. margin: 0;
  580. color: {color:asker text};
  581. border-left: 0 solid {color:asker border};
  582. }
  583.  
  584. .asker a:hover {
  585. color: {color:asker text hover};
  586. letter-spacing: 6px;
  587. }
  588.  
  589. .question {
  590. position: relative;
  591. min-height: 13px;
  592. {block:if500pxposts}width: 428px;{/block:if500pxposts}
  593. {block:ifnot500pxposts}width: 328px;{/block:ifnot500pxposts}
  594. margin: 5px 0 0px 63px;
  595. padding: 5px 5px 5px 5px;
  596. background: {color:post bg};
  597. color: {color:text};
  598. font-size: 9px;
  599. }
  600.  
  601.  
  602. /*---QUOTES---*/
  603. .quotehold {
  604. padding: 10px;
  605. background: {color:quote bg};
  606. border-left: 60px solid {color:quote border};
  607. }
  608.  
  609. .marks {
  610. overflow: hidden;
  611. position: absolute;
  612. margin: -20px 0 0 -75px;
  613. height: 60px;
  614. width: 60px;
  615. color: {color:quote marks};
  616. font-family: georgia;
  617. font-size: 130px;
  618. font-style: italic;
  619. }
  620.  
  621. .quote {
  622. margin: 10px 0 0 0px;
  623. color: {color:quote};
  624. font-family: oswald;
  625. font-size: 17px;
  626. letter-spacing: 2px;
  627. text-transform: uppercase;
  628. }
  629.  
  630. /*---CHAT---*/
  631.  
  632. .convo li {
  633. list-style: none;
  634. margin-left: -40px;
  635. }
  636.  
  637. .line_odd {
  638. background-color: {color:chat odd bg};
  639. color: {color:chat odd text};
  640. margin-bottom: 5px;
  641. padding: 8px 4px;
  642.  
  643.  
  644. }
  645.  
  646. .line_even {
  647. background-color: {color:chat even bg};
  648. color: {color:chat even text};
  649. margin-bottom: 5px;
  650. padding: 8px 4px;
  651. }
  652.  
  653. .convo .label {
  654. font-family: oswald;
  655. font-size: 11px;
  656. letter-spacing: 1px;
  657. text-transform: uppercase;
  658. }
  659.  
  660. .line_odd .label {
  661. color: {color:chat odd name};
  662. }
  663.  
  664. .line_even .label {
  665. color: {color:chat even name};
  666. }
  667.  
  668.  
  669. /*---PHOTO---*/
  670.  
  671. .photos {
  672. margin-bottom: 5px;
  673. {block:iffadedphotos}
  674. -webkit-transition: opacity 0.8s linear;
  675. opacity: 0.60;{/block:iffadedphotos}
  676. {block:ifmonochromephotos}-webkit-filter: grayscale(1);
  677. -webkit-transition: all 0.5s ease-in-out;
  678. -moz-transition: all 0.5s ease-in-out;
  679. -o-transition: all 0.5s ease-in-out;
  680. -ms-transition: all 0.5s ease-in-out;
  681. transition: all 0.5s ease-in-out;{/block:ifmonochromephotos}
  682. }
  683.  
  684. .photos:hover {
  685. {block:iffadedphotos}-webkit-transition: opacity 0.8s linear;
  686. opacity: 1;{/block:iffadedphotos}
  687. {block:ifmonochromephotos}
  688. filter: none;
  689. -webkit-filter: grayscale(0);
  690. -webkit-transition: all 0.5s ease-in-out;
  691. -moz-transition: all 0.5s ease-in-out;
  692. -o-transition: all 0.5s ease-in-out;
  693. -ms-transition: all 0.5s ease-in-out;
  694. transition: all 0.5s ease-in-out;{/block:Ifmonochromephotos}
  695. }
  696.  
  697.  
  698.  
  699. /*---AUDIO---*/
  700.  
  701. .playbox {
  702. height: 150px;
  703. margin: 0 0 10px 0;
  704. }
  705.  
  706. .player {
  707. position: absolute;
  708. opacity: .3;
  709. overflow: hidden;
  710. height: 30px;
  711. width: 30px;
  712. margin-top: 60px;
  713. margin-left: 60px;
  714. transition: 0.4s;
  715. -moz-transition: 0.4s;
  716. -webkit-transition: 0.4s;
  717. -o-transition: 0.4s;
  718. }
  719.  
  720. .player:hover {
  721. opacity: 1;
  722. transition: 0.4s;
  723. -moz-transition: 0.4s;
  724. -webkit-transition: 0.4s;
  725. -o-transition: 0.4s;
  726. }
  727.  
  728. .artwork {
  729. position: absolute;
  730. width: 150px;
  731. height: 150px;
  732. margin-bottom: 5px;
  733. }
  734.  
  735. .artwork img {
  736. width: 150px;
  737. height: 150px;
  738. }
  739.  
  740. .trackinfo {
  741. position: absolute;
  742. height: 150px;
  743. {block:ifnot500pxposts}width: 235px;{/block:ifnot500pxposts}
  744. {block:if500pxposts}width: 335px;{/block:if500pxposts}
  745. margin: 0 0 0 165px;
  746. background-color: transparent;
  747.  
  748. }
  749.  
  750. .tracklist {
  751. height: 30px;
  752. {block:ifnot500pxpost}width: 227px;{/block:ifnot500pxpost}
  753. {block:if500pxpost}width: 327px;{/block:if500pxpost}
  754. padding: 0px 4px;
  755. margin-bottom: 10px;
  756. background-color: {color:audio info bg};
  757. color: {color:audio info text};
  758. line-height: 30px;
  759. }
  760.  
  761. .tracklabel {
  762. color: {color:audio info label};
  763. font-family: oswald;
  764. font-size: 12px;
  765. letter-spacing: 1px;
  766. text-transform: uppercase;
  767. }
  768.  
  769. /*---INDEX POST INFO---*/
  770.  
  771. .postinfo {
  772. position: absolute;
  773. opacity: 0;
  774. height: auto;
  775. width: auto;
  776. {block:if500pxposts}margin: 0 0 0 500px;{/block:if500pxposts}
  777. {block:ifnot500pxposts}margin: 0 0 0 400px;{/block:ifnot500pxposts}
  778. transition: 0.4s;
  779. -moz-transition: 0.4s;
  780. -webkit-transition: 0.4s;
  781. -o-transition: 0.4s;
  782. }
  783.  
  784. .postinfo a {
  785. display: inline-block;
  786. height: 30px;
  787. width: 30px;
  788. margin: 5px 5px 0px 5px;
  789. background: {color:button bg};
  790. color: {color:button text};
  791. font-size: 15px;
  792. line-height: 30px;
  793. text-align: center;
  794. border-radius: 50%;
  795. }
  796.  
  797. .postinfo a:hover {
  798. background: {color:button bg hover};
  799. color: {color:button text hover};
  800. }
  801.  
  802. .entryhold:hover .postinfo {
  803. opacity: 1;
  804. transition: 0.4s;
  805. -moz-transition: 0.4s;
  806. -webkit-transition: 0.4s;
  807. -o-transition: 0.4s;
  808. }
  809.  
  810. .tagt {
  811. position: absolute;
  812. overflow: hidden;
  813. width: 0;
  814. margin: 10px 0 0 10px;
  815. transition-delay: .4s;
  816. -webkit-transition-delay: .4s;
  817. }
  818.  
  819. .tagb:hover .tagt{
  820. width: 110px;
  821. transition-delay: 0s;
  822. -webkit-transition-delay: 0s;
  823. }
  824.  
  825. .taghold {
  826. opacity: 0;
  827. margin: -10px 0 0 0;
  828. transition: 0.4s;
  829. -moz-transition: 0.4s;
  830. -webkit-transition: 0.4s;
  831. -o-transition: 0.4s;
  832. }
  833.  
  834. .tagb:hover .taghold {
  835. opacity: 1;
  836. margin: 0px 0 0 0;
  837. transition: 0.4s;
  838. -moz-transition: 0.4s;
  839. -webkit-transition: 0.4s;
  840. -o-transition: 0.4s;
  841. }
  842.  
  843. .tagarrow {
  844. position: absolute;
  845. margin: 0 0 0 5px;
  846. color: {color:button tooltip bg};
  847. font-size: 9.5px;
  848. transform:rotate(45deg);
  849. -ms-transform:rotate(45deg);
  850. -webkit-transform:rotate(45deg);
  851. }
  852.  
  853. .tags {
  854. margin: 6px 0 0 0;
  855. padding: 5px;
  856. background: {color:button tooltip bg};
  857. color: {color:button tooltip text};
  858. font-family: tinytots, share tech mono;
  859. font-size: 8px;
  860. text-transform: uppercase;
  861. }
  862.  
  863. .tags a {
  864. color: {color:button tooltip text};
  865. }
  866.  
  867. .tags a:hover {
  868. color: {color:button tooltip text hover};
  869. }
  870.  
  871. .tagb {
  872. position: absolute;
  873. height: 30px;
  874. width: 30px;
  875. }
  876.  
  877. .tagb a {
  878. display: inline-block;
  879. height: 30px;
  880. width: 30px;
  881. margin: 5px 5px 0px 5px;
  882. background: {color:button bg};
  883. color: {color:button text};
  884. font-size: 15px;
  885. line-height: 30px;
  886. text-align: center;
  887. border-radius: 50%;
  888. }
  889.  
  890. .tagb a:hover {
  891. background: {color:button bg hover};
  892. color: {color:button text hover};
  893. }
  894.  
  895.  
  896. /*---PERMALINK PAGE---*/
  897. .permalink {
  898. position: relative;
  899. z-index: 999px;
  900. {block:if500pxposts}width: 500px;{/block:if500pxposts}
  901. {block:ifNot500pxposts}width: 400px;{/block:ifNot500pxposts}
  902. margin: 0px 20px 0px 0px;
  903. padding-top: 5px;
  904. background: {color:post bg};
  905. color: {color:subtitle};
  906. font-family: oswald;
  907. font-size: 11px;
  908. letter-spacing: 1px;
  909. text-align: center;
  910. text-transform: uppercase;
  911. }
  912.  
  913. .permalinknotes {
  914. position: relative;
  915. z-index: 999px;
  916. overflow: hidden;
  917. margin-top: 20px;
  918. {block:if500pxposts}width: 500px;{/block:if500pxposts}
  919. {block:ifNot500pxposts}width: 400px;{/block:ifNot500pxposts}
  920. background: {color:post bg};
  921. color: {color:text};
  922. font-family: verdana;
  923. font-size: 8px;
  924. letter-spacing: 1px;
  925. text-transform: lowercase;
  926.  
  927. }
  928.  
  929. .permalinknotes a {
  930. color: {color:link};
  931. font-family: verdana;
  932. font-size: 8px;
  933. text-decoration: none;
  934. text-transform: lowercase;
  935. transition: 0.4s;
  936. -moz-transition: 0.4s;
  937. -webkit-transition: 0.4s;
  938. -o-transition: 0.4s;
  939. }
  940.  
  941. .permalinknotes a:hover {
  942. color: {color:link hover};
  943. }
  944.  
  945. .pagination {
  946. z-index: 9999;
  947. position: relative;
  948. height: 40px;
  949. {block:if500pxposts}width: 520px;{/block:if500pxposts}
  950. {block:ifNot500pxposts}width: 420px;{/block:ifNot500pxposts}
  951. margin: 10px 0 20px 0;
  952.  
  953. }
  954.  
  955. .pagination a {
  956. display: inline-block;
  957. height: 30px;
  958. width: 30px;
  959. margin: 5px 5px 0px 5px;
  960. background: {color:button bg};
  961. color: {color:button text};
  962. font-size: 15px;
  963. line-height: 30px;
  964. text-align: center;
  965. border-radius: 50%;
  966. }
  967.  
  968. .pagination a:hover {
  969. background: {color:button bg hover};
  970. color: {color:button text hover};
  971. }
  972.  
  973. .pagithold {
  974. position: absolute;
  975. {block:if500pxposts}width: 520px;{/block:if500pxposts}
  976. {block:ifNot500pxposts}width: 420px;{/block:ifNot500pxposts}
  977. }
  978.  
  979. .pagitext {
  980.  
  981. height: 30px;
  982. width: 60px;
  983. margin: 5px auto 5px auto;
  984. padding: 0px 8px;
  985. background: {color:post bg};
  986. color: {color:text};
  987. font-family: tinytots, share tech mono;
  988. font-size: 8px;
  989. line-height: 30px;
  990. text-align: center;
  991. text-transform: uppercase;
  992. }
  993.  
  994. .pagilink1 {
  995. position: absolute;
  996. z-index: 999;
  997. width: 30px;
  998. height: 30px;
  999. {block:if500pxposts}margin: 0 0 0 160px;{/block:if500pxposts}
  1000. {block:ifNot500pxposts}margin: 0 0 0 130px;{/block:ifNot500pxposts}
  1001. }
  1002.  
  1003. .pagilink2 {
  1004. position: absolute;
  1005. z-index: 999;
  1006. width: 30px;
  1007. height: 30px;
  1008. {block:if500pxposts}margin: 0 0 0 320px;{/block:if500pxposts}
  1009. {block:ifNot500pxposts}margin: 0 0 0 250px;{/block:ifNot500pxposts}
  1010. }
  1011.  
  1012. /*---NOTES---*/
  1013.  
  1014. ol.notes {
  1015. overflow: auto;
  1016. position: static;
  1017. padding: 2px;
  1018. max-height: 200px;
  1019. {block:if500pxposts}width: ;{/block:if500pxposts}
  1020. {block:ifNot500pxposts}width: ;{/block:ifNot500pxposts}
  1021. margin: 15px 0px;
  1022. padding: 10px;
  1023. letter-spacing: 1px;
  1024. list-style-type: none;
  1025. }
  1026.  
  1027. ol.notes li.note {
  1028. margin-left: 10px
  1029. margin-bottom: 10px;
  1030. letter-spacing: 1px;
  1031. line-height: 20px;
  1032. }
  1033.  
  1034. .notes img{
  1035. opacity: .7;
  1036. margin-bottom: -5px;
  1037. margin-right: 5px;
  1038. }
  1039.  
  1040. .notes::-webkit-scrollbar {
  1041. width: 5px;
  1042. height: 5px;
  1043. background-color: {color:scrollbar bg};
  1044. }
  1045.  
  1046. .notes::-webkit-scrollbar-thumb {
  1047. background-color: {color:scrollbar thumb};
  1048. }
  1049.  
  1050. /*---CREDIT - DO NOT REMOVE---*/
  1051. .logo {
  1052. overflow: hidden;
  1053. z-index: 9999;
  1054. position: fixed;
  1055. height: 30px;
  1056. width: 30px;
  1057. right: 10px;
  1058. bottom: 10px;
  1059. background-color: {color:post bg};
  1060. color: {color:link};
  1061. text-align: center;
  1062. border: 1px solid {color:link};
  1063. transition: 0.4s;
  1064. -moz-transition: 0.4s;
  1065. -webkit-transition: 0.4s;
  1066. -o-transition: 0.4s;
  1067. transition-delay: .4s;
  1068. -webkit-transition-delay: .4s;
  1069. }
  1070.  
  1071. .logo:hover {
  1072. width: 90px;
  1073. transition: 0.4s;
  1074. -moz-transition: 0.4s;
  1075. -webkit-transition: 0.4s;
  1076. -o-transition: 0.4s;
  1077. transition-delay: .4s;
  1078. -webkit-transition-delay: .4s;
  1079. }
  1080.  
  1081. .logo a {
  1082. color: #b0647f;
  1083. width: 100px;
  1084. font-family: trebuchet ms;
  1085. font-size: 8px;
  1086. transition: 0.4s;
  1087. -moz-transition: 0.4s;
  1088. -webkit-transition: 0.4s;
  1089. -o-transition: 0.4s;
  1090.  
  1091. }
  1092.  
  1093. .logo a:hover {
  1094. color: {color:link};
  1095. width: 100px;
  1096. font-size: 8px;
  1097. transition: 0.4s;
  1098. -moz-transition: 0.4s;
  1099. -webkit-transition: 0.4s;
  1100. -o-transition: 0.4s;
  1101. }
  1102.  
  1103. .logobolt {
  1104. position: absolute;
  1105. height: 30px;
  1106. width: 30px;
  1107. color: {color:link};
  1108. font-size: 20px;
  1109. line-height: 30px;
  1110. text-align: center;
  1111. transition: 0.4s;
  1112. -moz-transition: 0.4s;
  1113. -webkit-transition: 0.4s;
  1114. -o-transition: 0.4s;
  1115. transition-delay: .8s;
  1116. -webkit-transition-delay: .8s;
  1117. }
  1118.  
  1119. .logo:hover .logobolt {
  1120. opacity: 0;
  1121. transition: 0.4s;
  1122. -moz-transition: 0.4s;
  1123. -webkit-transition: 0.4s;
  1124. -o-transition: 0.4s;
  1125. transition-delay: 0s;
  1126. -webkit-transition-delay: 0s;
  1127. }
  1128.  
  1129. .logoline1 {
  1130. opacity: 0;
  1131. margin: 3px 1px 0 1px;
  1132. font-family: trebuchet ms;
  1133. font-size: 8px;
  1134. letter-spacing: 4px;
  1135. line-height: 8px;
  1136. transition: 0.4s;
  1137. -moz-transition: 0.4s;
  1138. -webkit-transition: 0.4s;
  1139. -o-transition: 0.4s;
  1140. transition-delay: 0s;
  1141. -webkit-transition-delay: 0s;
  1142. }
  1143.  
  1144. .logo:hover .logoline1 {
  1145. opacity: 1;
  1146. transition: 0.4s;
  1147. -moz-transition: 0.4s;
  1148. -webkit-transition: 0.4s;
  1149. -o-transition: 0.4s;
  1150. transition-delay: .8s;
  1151. -webkit-transition-delay: .8s;
  1152. }
  1153.  
  1154. .logoline2 {
  1155. opacity: 0;
  1156. margin: 0px 1px 1px 1px;
  1157. font-family: oswald;
  1158. font-size: 16px;
  1159. letter-spacing: 1px;
  1160. line-height: 16px;
  1161. transition: 0.4s;
  1162. -moz-transition: 0.4s;
  1163. -webkit-transition: 0.4s;
  1164. -o-transition: 0.4s;
  1165. transition-delay: 0s;
  1166. -webkit-transition-delay: 0s;
  1167. }
  1168.  
  1169. .logo:hover .logoline2 {
  1170. opacity: 1;
  1171. transition: 0.4s;
  1172. -moz-transition: 0.4s;
  1173. -webkit-transition: 0.4s;
  1174. -o-transition: 0.4s;
  1175. transition-delay: .8s;
  1176. -webkit-transition-delay: .8s;
  1177. }
  1178.  
  1179. #s-m-t-tooltip {
  1180. z-index:999;
  1181. padding: 5px 10px;
  1182. margin:20px 14px 7px 10px;
  1183. background-color: {color:tooltip bg};
  1184. color: {color:tooltip text};
  1185. font-family: verdana;
  1186. font-size: 8px;
  1187. letter-spacing: 0px;
  1188. text-transform:uppercase;
  1189. border: 3px solid {color:tooltip border};
  1190. }
  1191.  
  1192. /*---MUSIC PLAYER---*/
  1193.  
  1194. .playholder {
  1195. position:fixed;
  1196. overflow: hidden;
  1197. height: 30px;
  1198. width: 30px;
  1199. bottom: 10px;
  1200. margin-left: 35px;
  1201. margin-bottom: 5px;
  1202. background: {color:button bg};
  1203. color: {color:button text};
  1204. border-radius: 50%;
  1205. -webkit-transition: all 0.4s ease-in-out;
  1206. -moz-transition: all 0.4s ease-in-out;
  1207. -o-transition: all 0.4s ease-in-out;
  1208. -ms-transition: all 0.4s ease-in-out;
  1209. transition: all 0.4s ease-in-out;
  1210. }
  1211.  
  1212. .eplayer {
  1213. margin-top: 0px;
  1214. margin-left: -22px;
  1215. -webkit-transition: all 0.4s ease-in-out;
  1216. -moz-transition: all 0.4s ease-in-out;
  1217. -o-transition: all 0.4s ease-in-out;
  1218. -ms-transition: all 0.4s ease-in-out;
  1219. transition: all 0.4s ease-in-out;
  1220. }
  1221.  
  1222. .playgif {
  1223. margin-bottom: 20px;
  1224. font-size: 20px;
  1225. line-height: 30px;
  1226. text-align: center;
  1227. -webkit-transition: all 0.4s ease-in-out;
  1228. -moz-transition: all 0.4s ease-in-out;
  1229. -o-transition: all 0.4s ease-in-out;
  1230. -ms-transition: all 0.4s ease-in-out;
  1231. transition: all 0.4s ease-in-out;
  1232. }
  1233.  
  1234. .playholder:hover .playgif {
  1235. margin-top: -30px;
  1236. -webkit-transition: all 0.4s ease-in-out;
  1237. -moz-transition: all 0.4s ease-in-out;
  1238. -o-transition: all 0.4s ease-in-out;
  1239. -ms-transition: all 0.4s ease-in-out;
  1240. transition: all 0.4s ease-in-out;
  1241. }
  1242.  
  1243. .playholder:hover .eplayer {
  1244. margin-top: -15px;
  1245. -webkit-transition: all 0.4s ease-in-out;
  1246. -moz-transition: all 0.4s ease-in-out;
  1247. -o-transition: all 0.4s ease-in-out;
  1248. -ms-transition: all 0.4s ease-in-out;
  1249. transition: all 0.4s ease-in-out;
  1250. }
  1251.  
  1252.  
  1253.  
  1254. /*-------*/
  1255.  
  1256.  
  1257.  
  1258. .scrolltthold {
  1259. position: fixed;
  1260. opacity: 0;
  1261. z-index: 99999;
  1262. bottom: 10px;
  1263. margin: 0 0 0 240px;
  1264. transition: 0.4s;
  1265. -moz-transition: 0.4s;
  1266. -webkit-transition: 0.4s;
  1267. -o-transition: 0.4s;
  1268. }
  1269.  
  1270. .scrollttholdaf {
  1271. opacity: 1;
  1272. transition: 0.4s;
  1273. -moz-transition: 0.4s;
  1274. -webkit-transition: 0.4s;
  1275. -o-transition: 0.4s;
  1276. }
  1277.  
  1278. .scrolltt {
  1279. height: 30px;
  1280. width: 30px;
  1281. background: {color:button bg};
  1282. color: {color:button text};
  1283. font-size: 15px;
  1284. line-height: 30px;
  1285. text-align: center;
  1286. border-radius: 50%;
  1287. transition: 0.4s;
  1288. -moz-transition: 0.4s;
  1289. -webkit-transition: 0.4s;
  1290. -o-transition: 0.4s;
  1291. }
  1292.  
  1293. .scrolltt:hover {
  1294. background: {color:button bg hover};
  1295. color: {color:button text hover};
  1296. transition: 0.4s;
  1297. -moz-transition: 0.4s;
  1298. -webkit-transition: 0.4s;
  1299. -o-transition: 0.4s;
  1300. }
  1301.  
  1302. /*! Hint.css - v1.3.3 - 2014-07-06
  1303. * http://kushagragour.in/lab/hint/
  1304. * Copyright (c) 2014 Kushagra Gour; Licensed MIT */
  1305.  
  1306. /*-------------------------------------*\
  1307. HINT.css - A CSS tooltip library
  1308. \*-------------------------------------*/
  1309. /**
  1310. * HINT.css is a tooltip library made in pure CSS.
  1311. *
  1312. * Source: https://github.com/chinchang/hint.css
  1313. * Demo: http://kushagragour.in/lab/hint/
  1314. *
  1315. * Release under The MIT License
  1316. *
  1317. */
  1318. /**
  1319. * source: hint-core.scss
  1320. *
  1321. * Defines the basic styling for the tooltip.
  1322. * Each tooltip is made of 2 parts:
  1323. * 1) body (:after)
  1324. * 2) arrow (:before)
  1325. *
  1326. * Classes added:
  1327. * 1) hint
  1328. */
  1329. .hint, [data-hint] {
  1330. position: relative;
  1331. display: inline-block;
  1332. /**
  1333. * tooltip arrow
  1334. */
  1335. /**
  1336. * tooltip body
  1337. */ }
  1338. .hint:before, .hint:after, [data-hint]:before, [data-hint]:after {
  1339. position: absolute;
  1340. opacity: 0;
  1341. z-index: 1000000;
  1342. width: auto;
  1343. visibility: hidden;
  1344. pointer-events: none;
  1345. -webkit-transform: translate3d(0, 0, 0);
  1346. -moz-transform: translate3d(0, 0, 0);
  1347. transform: translate3d(0, 0, 0);
  1348. -webkit-transition: 0.4s ease;
  1349. -moz-transition: 0.4s ease;
  1350. transition: 0.4s ease;
  1351. -webkit-transition-delay: 0ms;
  1352. -moz-transition-delay: 0ms;
  1353. transition-delay: 0ms; }
  1354. .hint:hover:before, .hint:hover:after, .hint:focus:before, .hint:focus:after, [data-hint]:hover:before, [data-hint]:hover:after, [data-hint]:focus:before, [data-hint]:focus:after {
  1355. visibility: visible;
  1356. opacity: 1; }
  1357. .hint:hover:before, .hint:hover:after, [data-hint]:hover:before, [data-hint]:hover:after {
  1358. -webkit-transition-delay: 100ms;
  1359. -moz-transition-delay: 100ms;
  1360. transition-delay: 100ms; }
  1361. .hint:before, [data-hint]:before {
  1362. content: '';
  1363. position: absolute;
  1364. z-index: 1000001;
  1365. background: transparent;
  1366. border: 6px solid transparent;
  1367. }
  1368. .hint:after, [data-hint]:after {
  1369. content: attr(data-hint);
  1370. padding: 4px 2px;
  1371. background: {color:button tooltip bg};
  1372. color: {color:button tooltip text};
  1373. font-family: tinytots, share tech mono;
  1374. font-size: 8px;
  1375. line-height: 12px;
  1376. text-transform: uppercase;
  1377. white-space: pre-line;
  1378. }
  1379.  
  1380. /**
  1381. * source: hint-position.scss
  1382. *
  1383. * Defines the positoning logic for the tooltips.
  1384. *
  1385. * Classes added:
  1386. * 1) hint--top
  1387. * 2) hint--bottom
  1388. * 3) hint--left
  1389. * 4) hint--right
  1390. */
  1391. /**
  1392. * set default color for tooltip arrows
  1393. */
  1394. .hint--top:before {
  1395. border-top-color: {color:button tooltip bg}; }
  1396.  
  1397. .hint--bottom:before {
  1398. margin: 0 0 0 -5px;
  1399. border-bottom-color: {color:button tooltip bg}; }
  1400.  
  1401. .hint--left:before {
  1402. border-left-color: {color:button tooltip bg}; }
  1403.  
  1404. .hint--right:before {
  1405. border-right-color: {color:button tooltip bg}; }
  1406.  
  1407. .hint--right2:before {
  1408. border-right-color: {color:button tooltip bg}; }
  1409.  
  1410. /**
  1411. * top tooltip
  1412. */
  1413. .hint--top:before {
  1414. margin-bottom: -12px; }
  1415. .hint--top:after {
  1416. margin-left: -18px; }
  1417. .hint--top:before, .hint--top:after {
  1418. bottom: 100%;
  1419. left: 50%; }
  1420. .hint--top:hover:after, .hint--top:hover:before, .hint--top:focus:after, .hint--top:focus:before {
  1421. -webkit-transform: translateY(-8px);
  1422. -moz-transform: translateY(-8px);
  1423. transform: translateY(-8px); }
  1424.  
  1425. /**
  1426. * bottom tooltip
  1427. */
  1428. .hint--bottom:before {
  1429. margin-top: -12px; }
  1430. .hint--bottom:after {
  1431. width: 50px;
  1432. margin-left: -25px; }
  1433. .hint--bottom:before, .hint--bottom:after {
  1434. top: 100%;
  1435. left: 50%;
  1436. }
  1437. .hint--bottom:hover:after, .hint--bottom:hover:before, .hint--bottom:focus:after, .hint--bottom:focus:before {
  1438. -webkit-transform: translateY(8px);
  1439. -moz-transform: translateY(8px);
  1440. transform: translateY(8px); }
  1441.  
  1442. /**
  1443. * right tooltip
  1444. */
  1445. .hint--right:before {
  1446. margin-left: -12px;
  1447. margin-bottom: -6px; }
  1448. .hint--right:after {
  1449. white-space: nowrap;
  1450. margin-bottom: -10px;
  1451. padding: 4px 10px;
  1452. }
  1453. .hint--right:before, .hint--right:after {
  1454. left: 100%;
  1455. bottom: 50%; }
  1456. .hint--right:hover:after, .hint--right:hover:before, .hint--right:focus:after, .hint--right:focus:before {
  1457. -webkit-transform: translateX(8px);
  1458. -moz-transform: translateX(8px);
  1459. transform: translateX(8px); }
  1460.  
  1461. /**
  1462. * right2 tooltip
  1463. */
  1464. .hint--right2:before {
  1465. margin-left: -12px;
  1466. margin-bottom: -6px; }
  1467. .hint--right2:after {
  1468. width: 100px;
  1469. margin-bottom: -10px;
  1470. padding: 4px 10px;
  1471. }
  1472. .hint--right2:before, .hint--right2:after {
  1473. left: 100%;
  1474. bottom: 50%; }
  1475. .hint--right2:hover:after, .hint--right2:hover:before, .hint--right2:focus:after, .hint--right2:focus:before {
  1476. -webkit-transform: translateX(8px);
  1477. -moz-transform: translateX(8px);
  1478. transform: translateX(8px); }
  1479.  
  1480.  
  1481.  
  1482. /**
  1483. * left tooltip
  1484. */
  1485. .hint--left:before {
  1486. margin-right: -12px;
  1487. margin-bottom: -6px; }
  1488. .hint--left:after {
  1489. margin-bottom: -10px;
  1490. padding: 4px 10px;
  1491. white-space: nowrap;
  1492. }
  1493. .hint--left:before, .hint--left:after {
  1494. right: 100%;
  1495. bottom: 50%; }
  1496. .hint--left:hover:after, .hint--left:hover:before, .hint--left:focus:after, .hint--left:focus:before {
  1497. -webkit-transform: translateX(-8px);
  1498. -moz-transform: translateX(-8px);
  1499. transform: translateX(-8px); }
  1500.  
  1501.  
  1502.  
  1503. </style>
  1504. </head>
  1505. <!-- START SCROLL STICK -->
  1506. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
  1507. <script>
  1508. $(document).ready(function(){
  1509. $(window).bind('scroll', function(){
  1510. if($(window).scrollTop() > 100){
  1511. $('.scrolltthold').addClass('scrollttholdaf');
  1512. }
  1513. else{
  1514. $('.scrolltthold').removeClass('scrollttholdaf');
  1515. }
  1516. });
  1517. });
  1518. </script>
  1519. <!-- END SCROLL STICK -->
  1520.  
  1521.  
  1522. <!--START SCROLL TO TOP-->
  1523. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  1524. <script src="http://static.tumblr.com/ikeq9mi/DfYl6o46t/scrolltotop.min.js"></script>
  1525. <!--END SCROLL TO TOP-->
  1526.  
  1527.  
  1528.  
  1529. <body>
  1530. <a href="http://cythemes.tumblr.com"><div class="logohold">
  1531. <div class="logo">
  1532. <div class="logobolt"><span class="fa fa-bolt"></span></div>
  1533. <div class="logoline1">THEME BY</div>
  1534. <div class="logoline2">CYTHEMES</div>
  1535. </div></a>
  1536.  
  1537.  
  1538.  
  1539. <div class="container">
  1540. {block:ifmusicplayer}
  1541. <div class="playholder">
  1542. <div class="playgif"><span class="fa fa-music"></span></div>
  1543. <div class="eplayer">
  1544. <!-- REMOVE THIS AND EMBED YOUR OWN MUSIC PLAYER (MUST BE A BILLY PLAYER) HERE!!!! -->
  1545. </div>
  1546. </div>
  1547. {/block:ifmusicplayer}
  1548.  
  1549. <!--START SCROLL TO TOP-->
  1550. <div class="scrolltthold">
  1551. <span class="hint--left" data-hint="back to top"><a href="javascript:;" id="scrollToTop"><div class="scrolltt"><span class="fa fa-chevron-up"></span></div></a></span></div>
  1552. <!--END SCROLL TO TOP-->
  1553.  
  1554.  
  1555. <div class="sidehold">
  1556. <div class="sidebar">
  1557. <div class="header">{text:header}</div>
  1558. <div class="cnav">
  1559. {block:iflink1title}<span class="hint--left" data-hint="{text:link 1 title}"><a href="{text:link 1 url}"><span class="fa {text:link 1 icon}"></span></a></span>{/block:iflink1title}
  1560.  
  1561. {block:iflink2title}<span class="hint--left" data-hint="{text:link 2 title}"><a href="{text:link 2 url}"><span class="fa {text:link 2 icon}"></span></a></span>{/block:iflink2title}
  1562.  
  1563. {block:iflink3title}<span class="hint--left" data-hint="{text:link 3 title}"><a href="{text:link 3 url}"><span class="fa {text:link 3 icon}"></span></a></span>{/block:iflink3title}
  1564.  
  1565. {block:iflink4title}<span class="hint--left" data-hint="{text:link 4 title}"><a href="{text:link 4 url}"><span class="fa {text:link 4 icon}"></span></a></span>{/block:iflink4title}
  1566.  
  1567. {block:iflink5title}<span class="hint--left" data-hint="{text:link 5 title}"><a href="{text:link 5 url}"><span class="fa {text:link 5 icon}"></span></a></span>{/block:iflink5title}
  1568.  
  1569. {block:iflink6title}<span class="hint--left" data-hint="{text:link 6 title}"><a href="{text:link 6 url}"><span class="fa {text:link 6 icon}"></span></a></span>{/block:iflink6title}
  1570.  
  1571. {block:iflink7title}<span class="hint--left" data-hint="{text:link 7 title}"><a href="{text:link 7 url}"><span class="fa {text:link 7 icon}"></span></a></span>{/block:iflink7title}
  1572.  
  1573. {block:iflink8title}<span class="hint--left" data-hint="{text:link 8 title}"><a href="{text:link 8 url}"><span class="fa {text:link 8 icon}"></span></a></span>{/block:iflink8title}
  1574.  
  1575. {block:iflink9title}<span class="hint--left" data-hint="{text:link 9 title}"><a href="{text:link 9 url}"><span class="fa {text:link 9 icon}"></span></a></span>{/block:iflink9title}
  1576.  
  1577. {block:iflink10title}<span class="hint--left" data-hint="{text:link 10 title}"><a href="{text:link 1 0url}"><span class="fa {text:link 10 icon}"></span></a></span>{/block:iflink10title}
  1578. </div>
  1579.  
  1580. <div class="sideimg1"><img src="{image:big side image}"></div>
  1581. <div class="sideimg2"><img src="{image:small side image}"></div>
  1582.  
  1583.  
  1584.  
  1585. <div class="desc">
  1586. <table cell-padding="0" cell-spacing="0" style=" height: 245px; width: 210px; font-size: 10px; text-align: justify;"><tr><td>
  1587. {Description}
  1588. </tr></td></table>
  1589. </div>
  1590. </div>
  1591. <div class="nav">
  1592. <span class="hint--bottom" data-hint="reboot"><a href="/"><span class="fa fa-power-off"></span></a></span>
  1593. <span class="hint--bottom" data-hint="contact"><a href="/ask"><span class="fa fa-comment"></span></a></span>
  1594. <span class="hint--bottom" data-hint="history"><a href="/archive"><span class="fa fa-clock-o"></span></a></span>
  1595. <span class="hint--bottom" data-hint="theme"><a href="http://cynessie.tumblr.com"><span class="fa fa-bolt"></span></a></span>
  1596. </div>
  1597. </div>
  1598.  
  1599. <div class="postwrap">
  1600. {block:IfinfiniteScroll}<div class="autopagerize_page_element">{/block:IfinfiniteScroll}
  1601. {block:Posts}
  1602.  
  1603.  
  1604.  
  1605. <div class="entryhold">
  1606. {block:IndexPage}{block:Date}
  1607. <div class="postinfo">
  1608. <span class="hint--right" data-hint="{DayOfMonth} {Month} {Year}"><a href="{Permalink}"><span class="fa fa-calendar-o"></span></a></span><br>
  1609. <span class="hint--right" data-hint="{NoteCountWithLabel}"><a href="{Permalink}"><span class="fa fa-heart"></span></a></span><br>
  1610. <span class="hint--right" data-hint="reblog"><a href="{ReblogURL}"><span class="fa fa-retweet"></span></a></span><br>
  1611. {block:HasTags}<div class="tagb">
  1612. <a href="{Permalink}"><span class="fa fa-tag"></span></a>
  1613. <div class="taghold"><div class="tagt">
  1614. <div class="tagarrow">◤</div>
  1615. <div class="tags">{block:Tags}# {Tag}<br>{/block:Tags}</div>
  1616. </div></div>
  1617. </div>{/block:HasTags}
  1618. </div>
  1619. {/block:Date}{/block:IndexPage}
  1620. <div class="entry">
  1621.  
  1622. <!---------------------------------------------------
  1623. TEXT POSTS
  1624. ---------------------------------------------------->
  1625. {block:Text}
  1626. {block:Title}<div class="entrytitle">{Title}</div>{/block:Title}
  1627. {block:Body}<div class="entrytext">{Body}</div>{/block:Body}
  1628. {/block:Text}
  1629.  
  1630. <!---------------------------------------------------
  1631. ANSWER POSTS
  1632. ---------------------------------------------------->
  1633. {block:Answer}
  1634. <div class="allques">
  1635. <div class="aiconhold"><div class="aicon"><img src="{AskerPortraitURL-48}"></div></div>
  1636. <div class="asker">{Asker} said:</div>
  1637. <div class="question">
  1638. {Question}</div>
  1639. </div>
  1640.  
  1641.  
  1642. <div class="entrytext">{Answer}</div>
  1643. {/block:Answer}
  1644.  
  1645. <!---------------------------------------------------
  1646. QUOTE POSTS
  1647. ---------------------------------------------------->
  1648. {block:Quote}<div class="quotehold">
  1649. <div class="marks">“</div><div class="quote">{Quote}</div>
  1650. <br>
  1651. </div>
  1652. {block:Source}<div class="entrytext" align="right">— {Source}</div>{/block:Source}
  1653. {/block:Quote}
  1654.  
  1655. <!---------------------------------------------------
  1656. LINK POSTS
  1657. ---------------------------------------------------->
  1658. {block:Link}
  1659. <div class="entrytitle"><a href="{URL}">{Name}</a></div>
  1660. {block:Description}<div class="entrytext">{Description}</div>{/block:Description}
  1661. {/block:Link}
  1662.  
  1663. <!---------------------------------------------------
  1664. CHAT POSTS
  1665. ---------------------------------------------------->
  1666. {block:Chat}
  1667. {block:Title}<div class="entrytitle">{Title}</div>
  1668. {/block:Title}
  1669. <ul class="convo">{block:Lines}
  1670. <li class="line_{Alt}">{block:Label}<span class="label">{Label}</span>{/block:Label}
  1671. {Line}</li>
  1672. {/block:Lines}</ul>
  1673.  
  1674. {/block:Chat}
  1675.  
  1676. <!---------------------------------------------------
  1677. AUDIO POSTS
  1678. ---------------------------------------------------->
  1679. {block:Audio}
  1680. <div class="playbox">
  1681. {block:AlbumArt}<div class="artwork"><img src="{AlbumArtURL}" width="150"></div>{/block:AlbumArt}
  1682.  
  1683. {block:AudioPlayer}<div class="player">
  1684. {block:ifblackaudioplayer}{AudioPlayerBlack}{block:ifblackaudioplayer}
  1685. {block:ifnotblackaudioplayer}{AudioPlayerWhite}{block:ifnotblackaudioplayer}
  1686. </div>{/block:AudioPlayer}
  1687.  
  1688. <div class="trackinfo">
  1689. <div class="tracklist"><span class="tracklabel">TRACK:</span> {block:TrackName}{TrackName}{/block:TrackName}</div>
  1690. <div class="tracklist"><span class="tracklabel">ARTIST:</span> {block:Artist}{Artist}{/block:Artist}</div>
  1691. <div class="tracklist"><span class="tracklabel">ALBUM:</span> {block:Album}{Album}{/block:Album}</div>
  1692. <div class="tracklist"><span class="tracklabel">PLAYS:</span> {PlayCount}</div>
  1693. </div>
  1694. </div>
  1695. {block:IfShowCaptions}{block:Caption}<div class="entrytext">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
  1696. {/block:Audio}
  1697.  
  1698.  
  1699. <!---------------------------------------------------
  1700. PHOTO POSTS
  1701. ---------------------------------------------------->
  1702. {block:Photo}
  1703.  
  1704. {block:IfNot500pxposts}{LinkOpenTag}<div class="photos"><img src="{PhotoURL-400}" alt="{PhotoAlt}" width="400px"></div>{LinkCloseTag}{/block:IfNot500pxposts}
  1705.  
  1706. {block:if500pxposts}{LinkOpenTag}<div class="photos"><img src="{PhotoURL-500}" alt="{PhotoAlt}" width="500px"></div>{LinkCloseTag}{/block:if500pxposts}
  1707. {block:IfShowCaptions}{block:Caption}<div class="entrytext">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
  1708. {/block:Photo}
  1709.  
  1710. <!---------------------------------------------------
  1711. PHOTOSET POSTS
  1712. ---------------------------------------------------->
  1713. {block:Photoset}
  1714. {block:IfNot500pxposts}<div class="photos">{Photoset-400}</div>{/block:IfNot500pxposts}
  1715. {block:If500pxposts}<div class="photos">{Photoset-500}</div>{/block:if500pxposts}
  1716. {block:IfShowCaptions}{block:Caption}<div class="entrytext">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
  1717. {/block:Photoset}
  1718.  
  1719. <!---------------------------------------------------
  1720. VIDEO POSTS
  1721. ---------------------------------------------------->
  1722. {block:Video}
  1723. {block:IfNot500pxposts}{Video-400}{/block:IfNot500pxposts}
  1724. {block:If500pxposts}{Video-500}{/block:If500pxposts}
  1725. {block:IfShowCaptions}{block:Caption}<div class="entrytext">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
  1726. {/block:Video}
  1727.  
  1728. <!---------------------------------------------------
  1729. POST INFO
  1730. ---------------------------------------------------->
  1731. {block:PermalinkPage}{block:Date}
  1732. <div class="permalinknotes">
  1733. <div class="permalink">
  1734. {block:Date}posted {12Hour}:{Minutes} {AmPm} on {DayOfWeek}, {Month} {DayOfMonth}, {Year}{/block:Date} {block:NoteCount}with {NoteCountWithLabel}{/block:NoteCount}<br>{block:RebloggedFrom}origin: <a href="{ReblogRootURL}">{ReblogRootName}</a> &nbsp;&nbsp; via: <a href="{ReblogParentURL}">{ReblogParentName}</a><br />{/block:RebloggedFrom}
  1735. {block:HasTags}tags: {block:Tags}<a href="{TagURL}">#{Tag}</a>&nbsp;{/block:Tags}{/block:HasTags}
  1736. </div>
  1737. {block:PostNotes}
  1738. {PostNotes-16} {PostNotes}
  1739. {/block:PostNotes}
  1740. </div>
  1741. {/block:Date}{/block:PermalinkPage}
  1742.  
  1743. </div></div>
  1744. {/block:Posts}
  1745. {block:IfinfiniteScroll}</div>{/block:IfinfiniteScroll}
  1746.  
  1747. <!---------------------------------------------------
  1748. PAGENATION
  1749. ---------------------------------------------------->
  1750.  
  1751. {block:IfNotinfiniteScroll}
  1752. <div class="pagination">
  1753. {block:Pagination}
  1754. <span class="pagilink1">
  1755. {block:PreviousPage}
  1756. <a href="{PreviousPage}"><span class="fa fa-chevron-left"></span></a>
  1757. {/block:PreviousPage}
  1758. </span>
  1759. <div class="pagithold"><div class="pagitext">
  1760. {CurrentPage} of {TotalPages}
  1761. </div></div>
  1762. <span class="pagilink2">
  1763. {block:NextPage}
  1764. <a href="{NextPage}"><span class="fa fa-chevron-right"></span></a>
  1765. {/block:NextPage}
  1766. </span>
  1767. {/block:Pagination}
  1768. </div>
  1769. {/block:IfNotinfiniteScroll}
  1770. </div>
  1771.  
  1772.  
  1773. </div>
  1774. </body>
  1775. </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!