azurethemes

theme 35: hopeless

Sep 14th, 2017
2,101
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 45.78 KB | None | 0 0
  1. <!----
  2.  
  3.  
  4.  
  5. theme 35 hopeless
  6. 1 2 0 4 p x . t u m b l r . c o m
  7. © 2017. all rights reserved
  8.  
  9. -----
  10.  
  11. this theme was coded by azure (1204px).
  12. !this theme must not be republished or
  13. used as a basecode!
  14. all coding was created by me, unless it
  15. was stated otherwise.
  16.  
  17. -----
  18.  
  19. video resize script by shythemes
  20. photo resize by excolo
  21. smooth scrolling by deadpoolkilledzac
  22. photo set fix by pxuphoto
  23. tumblr caption plugin by neothms & magnusthemes
  24. icon font by saturnthemes
  25. icon font by zavalokom
  26.  
  27. -----
  28.  
  29. all themes by 1204px.tumblr.com are licensed
  30. under a Creative Commons Attribution-NoDerivatives
  31. 4.0 International License.
  32.  
  33.  
  34.  
  35. --->
  36. <!--start html-->
  37. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  38. <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  39. <!--custom google fonts-->
  40. <link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i|Roboto:300i,400,400i,500,500i,700,700i|Source+Sans+Pro:400,600,700|Nunito:400,600,700|Lato:400,700|Cabin:400,500,600,700|Muli:400,600,700|Raleway:400,500,600,700|Khula:400,600,700|Cutive+Mono|Inconsolata:400,700|Lora:400,700|Parisienne|Abhaya+Libre:400,500,600,700" rel="stylesheet">
  41. <!--tooltips-->
  42. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script><script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  43. <script>
  44. (function($){
  45. $(document).ready(function(){
  46. $("a[title]").style_my_tooltips({
  47. tip_follows_cursor:true,
  48. tip_delay_time:10,
  49. tip_fade_speed:900,
  50. attribute:"title"
  51. });
  52. });
  53. })(jQuery);
  54. </script>
  55. <!--back to top button-->
  56. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
  57. <script>
  58. $(document).ready(function(){
  59.  
  60. // Der Button wird mit JavaScript erzeugt und vor dem Ende des body eingebunden.
  61. var back_to_top_button = ['<a href="#top" class="back-to-top"><span class="sf sf-arrow-up"></span> scroll to top</a>'].join("");
  62. $("body").append(back_to_top_button)
  63.  
  64. // Der Button wird ausgeblendet
  65. $(".back-to-top").hide();
  66.  
  67. // Funktion für das Scroll-Verhalten
  68. $(function () {
  69. $(window).scroll(function () {
  70. if ($(this).scrollTop() > 100) { // Wenn 100 Pixel gescrolled wurde
  71. $('.back-to-top').fadeIn();
  72. } else {
  73. $('.back-to-top').fadeOut();
  74. }
  75. });
  76.  
  77. $('.back-to-top').click(function () { // Klick auf den Button
  78. $('body,html').animate({
  79. scrollTop: 0
  80. }, 800);
  81. return false;
  82. });
  83. });
  84.  
  85. });
  86. </script>
  87. <script type="text/javascript">
  88. /* Photoset Resize Code by Kevin - EXCOLO.TUMBLR.COM */
  89. $(document).ready(function() {
  90. function photosetResize() {
  91. $('iframe.photoset').each(function(){
  92. var newSize = 500;
  93. var newSrc = $(this).attr('src').replace('500',newSize);
  94. $(this).attr('src', newSrc).width(newSize);
  95. var high = $(this).css('height');
  96. var calculate = parseInt(high, 10)* newSize/500;
  97. $(this).css('height', calculate);
  98. });
  99. }
  100. photosetResize();
  101. });
  102. </script>
  103. <script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  104. <script>
  105. $(document).ready(function(){
  106. $('.photo-slideshow').pxuPhotoset({
  107. lightbox: true,
  108. rounded: false,
  109. gutter: '1px',
  110. borderRadius: '0px',
  111. photoset: '.photo-slideshow',
  112. photoWrap: '.photo-data',
  113. photo: '.pxu-photo'
  114. });
  115. });
  116. </script>
  117. <!-- smooth scrolling by deadpoolkilledzac.tumblr.com -->
  118. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js"></script>
  119. <!--minimalist fonts-->
  120. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  121. <link href="https://dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">
  122. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  123. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">
  124. <script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  125. <!-- meta names -->
  126. <head>
  127. <title>{Title}</title>
  128. <link rel="shortcut icon" href="{Favicon}">
  129. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  130. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  131. <!-- toggles -->
  132. <meta name="if:FontLora" content="0"/>
  133. <!-- all colors -->
  134. <meta name="color:background" content="#ffffff"/>
  135. <meta name="color:posts" content="#ffffff">
  136. <meta name="color:text" content="#000000"/>
  137. <meta name="color:links" content="#000000"/>
  138. <meta name="color:credit" content="#000000"/>
  139. <meta name="color:accent" content="#f6f6f6">
  140. <meta name="color:info" content="#000000">
  141. <meta name="color:hover" content="#888888">
  142. <meta name="color:credit hover" content="#888888">
  143. <meta name="color:asks" content="#fbfbfb">
  144. <meta name="color:border" content="#fbfbfb"/>
  145. <meta name="color:scrollbar" content="#fbfbfb">
  146. <meta name="color:tooltip" content="#fbfbfb">
  147. <meta name="color:tooltip text" content="#000000">
  148.  
  149. <!-- images -->
  150. <meta name="image:icon" content=""/>
  151. <meta name="image:muse photo" content=""/>
  152. <!-- texts -->
  153. <meta name="text:sidebar label" content="kali ma."/>
  154. <!-- sidebar links -->
  155. <meta name="text:tab one label" content="Muse">
  156. <meta name="text:tab two label" content="Navigation">
  157. <meta name="viewport"
  158. content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
  159. <!-- custom css -->
  160. <style type="text/css">
  161. @media screen and (max-width: 3480px) {
  162. @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  163. @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  164. @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  165. .fade-in {
  166. opacity:0;
  167. -webkit-animation:fadeIn ease-in 1;
  168. -moz-animation:fadeIn ease-in 1;
  169. animation:fadeIn ease-in 1;
  170. -webkit-animation-fill-mode:forwards;
  171. -moz-animation-fill-mode:forwards;
  172. animation-fill-mode:forwards;
  173. -webkit-animation-duration:1s;
  174. -moz-animation-duration:1s;
  175. animation-duration:1s;}
  176. .fade-in.one {
  177. -webkit-animation-delay:0s;
  178. -moz-animation-delay:0s;
  179. animation-delay:0s;}
  180. .fade-in.two {
  181. -webkit-animation-delay:0.8s;
  182. -moz-animation-delay:0.8s;
  183. animation-delay:0.8s;
  184. }
  185. .fade-in .post_container {
  186. -webkit-animation-delay:0.9s;
  187. -moz-animation-delay:0.9s;
  188. animation-delay:0.9s;
  189. }
  190. /*tumblr controls*/
  191. .tmblr-iframe{ white-space:nowrap; -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%);opacity:.2;transition: .4s ease-in-out; -webkit-transition: .4s ease-in-out;-moz-transition: .4s ease-in-out;-o-transition: .4s ease-in-out;position:fixed!important;right:-20px!important;transform:scale(0.7,0.7); } .tmblr-iframe:hover { opacity:1; }
  192. /*scrollbar*/
  193. ::-webkit-scrollbar {
  194. width:6px;
  195. height:6px;
  196. background:white;
  197. }
  198. ::-webkit-scrollbar-thumb {
  199. background:{color:scrollbar};
  200. }
  201. /*tooltips*/
  202. #s-m-t-tooltip{
  203. margin:13px 10px 6px 10px;
  204. padding:6px;
  205. background-color:{color:tooltip};
  206. font-family: 'khula', sans-serif;
  207. {block:IfFontLora}
  208. font-family: 'lora', sans-serif;
  209. {/block:IfFontLora}
  210. font-weight:600;
  211. font-size:8px;
  212. text-transform:lowercase;
  213. letter-spacing:0px;
  214. color:{color:tooltip text};
  215. z-index:999999999999999999999999999999999999;
  216. transition:0.3s ease-in-out;
  217. -webkit-transition:0.3s ease-in-out;
  218. -moz-transition:0.3s ease-in-out;
  219. -ms-transition:0.3s ease-in-out;
  220. -o-transition:0.3s ease-in-out;
  221. }
  222. /*body basics*/
  223. body{
  224. background-color:{color:background};
  225. font-family: 'khula', sans-serif;
  226. {block:IfFontLora}
  227. font-family: 'lora', sans-serif;
  228. {/block:IfFontLora}
  229. margin:0px;
  230. padding:0px;
  231. -webkit-font-smoothing: antialiased;
  232. -moz-osx-font-smoothing: grayscale;
  233. }
  234. p {
  235. padding-left:15px;
  236. padding-right:15px;
  237. }
  238. a{
  239. text-decoration:none;
  240. color:{color:links};
  241. -moz-transition-duration:0.5s;
  242. -webkit-transition-duration:0.5s;
  243. -o-transition-duration:0.5s;
  244. transition: all 0.3s ease-out;
  245. }
  246. a:hover{
  247. text-decoration:none;
  248. color:{color:hover};
  249. -moz-transition-duration:0.5s;
  250. -webkit-transition-duration:0.5s;
  251. -o-transition-duration:0.5s;
  252. transition: all 0.3s ease-out;
  253. }
  254. img {
  255. }
  256. blockquote {
  257. width:auto;
  258. border-left:1px solid {color:border};
  259. text-align:left;
  260. padding:1px;
  261. font-weight:none;
  262. margin-top:11px;
  263. margin-left:13px;
  264. padding-top:0.5px;
  265. padding-bottom:0.5px;
  266. font-size:10px;
  267. font-family: 'khula', sans-serif;
  268. {block:IfFontLora}
  269. font-family: 'lora', sans-serif;
  270. {/block:IfFontLora}
  271. margin-right:20px;
  272. padding-left:2px;
  273. color:{color:text};
  274. }
  275. pre{
  276. font-size:11px;
  277. text-align:center;
  278. text-transform:none;
  279. font-family: 'Cutive Mono', monospace;
  280. font-weight:300;
  281. line-height:9px;
  282. margin-left:10px;
  283. margin-right:10px;
  284. letter-spacing:0px;
  285. background-color:{color:background};
  286. color:{color:text};
  287. padding:10px;
  288. }
  289. small{
  290. font-size:9px;
  291. font-family: 'khula', sans-serif;
  292. {block:IfFontLora}
  293. font-family: 'lora', sans-serif;
  294. {/block:IfFontLora}
  295. }
  296. big{
  297. font-size:12px;
  298. font-family: 'khula', sans-serif;
  299. {block:IfFontLora}
  300. font-family: 'lora', sans-serif;
  301. {/block:IfFontLora}
  302. font-weight:700;
  303. }
  304. sub{
  305. font-size:7px;
  306. letter-spacing:0px;
  307. font-weight:600;
  308. text-transform:none;
  309. font-family: 'khula', sans-serif;
  310. {block:IfFontLora}
  311. font-family: 'lora', sans-serif;
  312. {/block:IfFontLora}
  313. }
  314. h1 {
  315. font-size:15px;
  316. text-align:left;
  317. font-family: 'nunito', sans-serif;
  318. letter-spacing:0px;
  319. margin-left:7px;
  320. text-transform:uppercase;
  321. font-weight:700;
  322. line-height:0px;
  323. color:{color:text};
  324. padding:10px;
  325. padding-top:15px;
  326. }
  327. h1 a{
  328. color:{color:text};
  329. text-align:left;
  330. }
  331. h2{
  332. color:{color:text};
  333. text-transform:uppercase;
  334. font-family: 'nunito', sans-serif;
  335. text-align:left;
  336. }
  337. b {
  338. font-weight:600;
  339. font-family: 'khula', sans-serif;
  340. {block:IfFontLora}
  341. font-family: 'lora', sans-serif;
  342. {/block:IfFontLora}
  343. color:{color:text};
  344. }
  345. sh {
  346. color:{color:links};
  347. text-transform:uppercase;
  348. font-family: 'khula', sans-serif;
  349. font-size:13px
  350. font-weight:800;
  351. }
  352. am {
  353. color:{color:text};
  354. font-size:22px;
  355. padding:8px;
  356. padding-top:2px;
  357. text-transform:uppercase;
  358. font-family: 'khula', sans-serif;
  359. letter-spacing:0px;
  360. font-weight:500;
  361. }
  362. t {
  363. font-weight:bold;
  364. letter-spacing:0px;
  365. font-size:45px;
  366. font-style:italic;
  367. font-family: 'khula', sans-serif;
  368. text-transform:uppercase;
  369. color:{color:text};
  370. }
  371. u {
  372. text-decoration:none;
  373. color:{color:text};
  374. border-bottom:1px solid {color:text};
  375. }
  376. p.npf_quirky {
  377. font-family: 'Parisienne', cursive;
  378. font-size:25px;
  379. }
  380. /*back to top button*/
  381. .back-to-top {
  382. position: fixed;
  383. color:{color:text};
  384. bottom:60px;
  385. text-transform:lowercase;
  386. right:10px;
  387. text-align:right;
  388. font-family: 'khula', sans-serif;
  389. {block:IfFontLora}
  390. font-family: 'lora', sans-serif;
  391. {/block:IfFontLora}
  392. font-size:9px;
  393. z-index:9999999999;
  394. font-weight:400;
  395. line-height:15px;
  396. padding:10px;
  397. }
  398. /*jump pagination*/
  399. .pagination{
  400. font-family: 'khula', sans-serif;
  401. {block:IfFontLora}
  402. font-family: 'lora', sans-serif;
  403. {/block:IfFontLora}
  404. margin-left:-190px;
  405. width:auto;
  406. padding-top:-10px;
  407. letter-spacing:2px;
  408. padding-bottom:20px;
  409. font-size:13px;
  410. text-align:center;
  411. }
  412. .pagination a{
  413. padding:5px;
  414. font-family: 'khula', sans-serif;
  415. {block:IfFontLora}
  416. font-family: 'lora', sans-serif;
  417. {/block:IfFontLora}
  418. font-weight:600;
  419. bottom:10px;
  420. margin-left:5px;
  421. color:{color:text};
  422. }
  423. .pagination a:hover{
  424. color:{color:hover};
  425. -moz-transition-duration:0.5s;
  426. -webkit-transition-duration:0.5s;
  427. -o-transition-duration:0.5s;
  428. transition: all 0.3s ease-out;
  429. }
  430. #description {
  431. width:240px;
  432. height:90px;
  433. position:fixed;
  434. top:240px;
  435. left:30px;
  436. font-family: 'khula', sans-serif;
  437. {block:IfFontLora}
  438. font-family: 'lora', sans-serif;
  439. {/block:IfFontLora}
  440. font-size:10px;
  441. z-index:9999999999999;
  442. line-height:16px;
  443. background:{color:posts};
  444. color:{color:text};
  445. text-align:center;
  446. overflow:hidden;
  447. }
  448. /*header*/
  449. #header_con {
  450. position:relative;
  451. width:1200px;
  452. opacity:1;
  453. height:470px;
  454. text-align:center;
  455. background:{color:posts};
  456. margin:0px auto;
  457. z-index:999;
  458. }
  459. #sidebar_con {
  460. position:fixed;
  461. left:0px;
  462. top:0px;
  463. width:300px;
  464. height:100%;
  465. background:{color:posts};
  466. opacity:1;
  467. border-radius:0px;
  468. text-align:center;
  469. z-index:9999999;
  470. }
  471. #image_big {
  472. position:fixed;
  473. margin-top:0px;
  474. width:500px;
  475. height:50px;
  476. margin-left:0px;
  477. z-index:9999999999999999;
  478. }
  479. #image_bigimage {
  480. z-index:-99999;
  481. }
  482. #image_bigimage img {
  483. width:80px;
  484. height:80px;
  485. position:relative;
  486. margin:70px auto;
  487. border-radius:100px;
  488. opacity:1;
  489. z-index:-999999;
  490. }
  491. #sidebar_icon {
  492. position:fixed;
  493. margin-top:0px;
  494. width:200px;
  495. height:50px;
  496. margin-left:0px;
  497. border-radius:100px;
  498. z-index:9999999999999999;
  499. }
  500. #sidebar_iconimage {
  501. z-index:-99999;
  502. }
  503. #sidebar_iconimage img {
  504. width:200px;
  505. height:250px;
  506. position:fixed;
  507. margin-left:35px;
  508. margin-top:65px;
  509. opacity:1;
  510. z-index:99999999999;
  511. }
  512. #tit_sdebr {
  513. width:300px;
  514. font-family: 'Abhaya Libre', sans-serif;
  515. color:{color:text};
  516. text-align:center;
  517. height:23px;
  518. line-height:30px;
  519. font-size:23px;
  520. background:{color:posts};
  521. letter-spacing:0px;
  522. font-weight:700;
  523. position:fixed;
  524. top:180px;
  525. left:0px;
  526. z-index:99999999;
  527. text-transform:lowercase;
  528. }
  529. #tit_sdebr #border{
  530. width:60px;
  531. text-align:center;
  532. margin:10px auto;
  533. border-bottom:2px solid {color:text};
  534. height:1px;
  535. }
  536. #navi{
  537. margin:0px 0px;
  538. font-size:10px;
  539. height:70px;
  540. letter-spacing:0px;
  541. font-weight:600;
  542. z-index:9999;
  543. width:1180px;
  544. color:{color:links};
  545. font-family: 'khula', sans-serif;
  546. {block:IfFontLora}
  547. font-family: 'lora', sans-serif;
  548. {/block:IfFontLora}
  549. line-height:73px;
  550. position:fixed;
  551. opacity:0;
  552. padding-left:20px;
  553. background:{color:posts};
  554. font-style:none;
  555. text-align:left;
  556. -webkit-transition: all 0.3s ease-in-out;
  557. -moz-transition: all 0.3s ease-in-out;
  558. -o-transition: all 0.3s ease-in-out;
  559. -ms-transition: all 0.3s ease-in-out;
  560. transition: all 0.3s ease-in-out;
  561. }
  562. #navi a{
  563. display:inline-block;
  564. color:{color:links};
  565. padding:4px 0px 4px 0px;
  566. margin:2px 10px 0px 5px;
  567. font-weight:500;
  568. margin-top:-4px;
  569. text-align:center;
  570. line-height:10px;
  571. font-style:none;
  572. border-bottom:3px solid transparent;
  573. border-top:3px solid transparent;
  574. font-family: 'khula', sans-serif;
  575. {block:IfFontLora}
  576. font-family: 'lora', sans-serif;
  577. {/block:IfFontLora}
  578. text-transform:uppercase;
  579. -webkit-transition: all 0.6s ease-in-out;
  580. -moz-transition: all 0.6s ease-in-out;
  581. -o-transition: all 0.6s ease-in-out;
  582. -ms-transition: all 0.6s ease-in-out;
  583. transition: all 0.6s ease-in-out;
  584. }
  585. #navi a:hover{
  586. color:{color:hover};
  587. padding:29px 0px 25px 0px;
  588. border-bottom:3px solid {color:hover};
  589. border-top:3px solid {color:hover};
  590. -webkit-transition: all 0.6s ease-in-out;
  591. -moz-transition: all 0.6s ease-in-out;
  592. -o-transition: all 0.6s ease-in-out;
  593. -ms-transition: all 0.6s ease-in-out;
  594. transition: all 0.6s ease-in-out;
  595. }
  596. /*search box*/
  597. .search {
  598. text-align:left;
  599. line-height:100%;
  600. position:relative;
  601. margin-top:-453px;
  602. opacity:1;
  603. z-index:99999999999999999999999;
  604. margin-left:1090px;
  605. }
  606. .search input{
  607. color:black;
  608. position:absolute;
  609. font-family: 'calibri', sans-serif;
  610. font-size:8px;
  611. border:0px;
  612. text-transform:none;
  613. letter-spacing:1px;
  614. opacity:0.4;
  615. font-weight:800;
  616. padding:3px 8px;
  617. text-align:left;
  618. background:{color:second links};
  619. border-radius:3px;
  620. margin-left:-125px;
  621. width:170px;
  622. padding-left:33px;
  623. height:24px;
  624. outline:none;
  625. }
  626. input.sbutton{
  627. outline:none;
  628. cursor:help;
  629. font-family:'icomoon';
  630. padding:10px;
  631. margin-left:-125px;
  632. opacity:1;
  633. margin-top:0px;
  634. color:{color:text};
  635. font-size:12px;
  636. text-transform:uppercase;
  637. background:none;
  638. font-weight:normal;
  639. width:30px;
  640. height:25px;
  641. outline:none;
  642. }
  643. @font-face {
  644. font-family:'icomoon';
  645. src:url('https://dl.dropboxusercontent.com/s/2irmmmxhhoz2w7h/icomoon.ttf');
  646. font-style:normal;
  647. font-weight:normal;
  648. }
  649. ::-webkit-input-placeholder {
  650. color:black;text-transform:uppercase;opacity:1;letter-spacing:1px;
  651. }
  652. ::-moz-input-placeholder {
  653. color:black;text-transform:uppercase;opacity:1;letter-spacing:1px;
  654. }
  655. ::-o-input-placeholder {
  656. color:black;text-transform:uppercase;opacity:1;letter-spacing:1px;
  657. }
  658. ::-ms-input-placeholder {
  659. color:black;text-transform:uppercase;opacity:1;letter-spacing:1px;
  660. }
  661. #maintitle{
  662. margin-top:-63px;
  663. width:130px;
  664. opacity:1;
  665. position:absolute;
  666. font-family: 'khula', sans-serif;
  667. {block:IfFontLora}
  668. font-family: 'lora', sans-serif;
  669. {/block:IfFontLora}
  670. letter-spacing:0.5px;
  671. text-align:left;
  672. overflow:hidden;
  673. font-weight:500;
  674. word-wrap:none;
  675. color:{color:second links};
  676. padding-top:10px;
  677. text-transform:uppercase;
  678. font-style:none;
  679. line-height:33px;
  680. font-size:10px;
  681. margin-left:610px;
  682. z-index:99;
  683. -webkit-transition: all 0.4s ease-in-out;
  684. -moz-transition: all 0.4s ease-in-out;
  685. -o-transition: all 0.4s ease-in-out;
  686. -ms-transition: all 0.4s ease-in-out;
  687. transition: all 0.4s ease-in-out;
  688. }
  689. /*blog container*/
  690. .container {
  691. width:calc(100% + 0px + 0px + 0px);
  692. margin:0 auto;
  693. text-align:center;
  694. overflow:hidden;
  695. }
  696. /*post notes*/
  697. ol.notes {
  698. padding: 0px;
  699. margin: 0px 0px;
  700. font-family: 'khula', sans-serif;
  701. {block:IfFontLora}
  702. font-family: 'lora', sans-serif;
  703. {/block:IfFontLora}
  704. list-style-type: none;
  705. margin-top:-25px;
  706. font-size:9px;
  707. background:{color:posts};
  708. margin-left:15px;
  709. text-align:left;
  710. width:499px;
  711. border-radius:0px;
  712. {block:IfRoundedCorners}
  713. border-radius:0px 0px 3px 3px;
  714. {/block:IfRoundedCorners}
  715. border-left: solid 1px {color:border};
  716. border-right: solid 1px {color:border};
  717. border-bottom: solid 1px {color:border};
  718. }
  719. ol.notes li.note {
  720. border-top: solid 1px {color:border};
  721. padding: 10px;
  722. }
  723. ol.notes li.note img.avatar {
  724. vertical-align: -10px;
  725. border-radius:100px;
  726. margin-left: 10px;
  727. padding:6px;
  728. width: 16px;
  729. height: 16px;
  730. }
  731. ol.notes li.note span.action {
  732. font-weight: 300;
  733. }
  734. ol.notes li.note .answer_content {
  735. font-weight: normal;
  736. }
  737. ol.notes li.note blockquote {
  738. border-color: {color:border};
  739. padding: 4px 10px;
  740. margin: 10px 0px 0px 25px;
  741. }
  742. ol.notes li.note blockquote a {
  743. text-decoration: none;
  744. }
  745. /*like button*/
  746. .buttons a {
  747. position:relative;
  748. display:inline-block;
  749. padding:3px;
  750. }
  751. .custom-like-button {
  752. position: relative;
  753. display: inline-block;
  754. width: 12px;
  755. height: 12px;
  756. cursor: pointer;
  757. top: -4px;
  758. left: -2px;
  759. }
  760. .like_button {
  761. position: absolute;
  762. right: 0;
  763. font-size:9px;
  764. bottom: -1px;
  765. width: 12px;
  766. height: 12px;
  767. opacity: 0;
  768. z-index: 10;
  769. }
  770. .like_button iframe {
  771. width: 100% !important;
  772. height: 100% !important;
  773. }
  774. .our_button {
  775. position: absolute;
  776. top: 1.5px;
  777. left: 0;
  778. right: 0;
  779. bottom: 0;
  780. width: 100%;
  781. height: 100%;
  782. z-index: 1;
  783. -webkit-transition:all 0.6s ease-in-out;/*chrome-safari*/
  784. -o-transition:all 0.6s ease-in-out;/*opera*/
  785. -moz-transition:all 0.6s ease-in-out;/*mozilla firefox*/
  786. -ms-transition:all 0.6s ease-in-out;/*ie*/
  787. transition:all 0.6s ease-in-out;/*w3c*/
  788. }
  789. .like_button:hover + .our_button {
  790. color: {color:link hover};
  791. }
  792. .custom-like-button:hover {
  793. color:{color:hover};
  794. }
  795. .like_button.liked + .our_button {
  796. color: red;
  797. }
  798. /*audio*/
  799. .audio_artist {
  800. font-family: 'khula', sans-serif;
  801. {block:IfFontLora}
  802. font-family: 'lora', sans-serif;
  803. {/block:IfFontLora}
  804. font-size:10px;
  805. text-transform:capitalize;
  806. font-weight:600;
  807. margin-left:55px;
  808. padding-left:23px;
  809. }
  810. .audio_tit {
  811. font-family: 'khula', sans-serif;
  812. {block:IfFontLora}
  813. font-family: 'lora', sans-serif;
  814. {/block:IfFontLora}
  815. font-size:10px;
  816. text-transform:capitalize;
  817. font-weight:600;
  818. margin-top:-45px;
  819. margin-left:55px;
  820. padding-left:23px;
  821. }
  822. .audio_play {
  823. font-family: 'khula', sans-serif;
  824. {block:IfFontLora}
  825. font-family: 'lora', sans-serif;
  826. {/block:IfFontLora}
  827. font-size:10px;
  828. text-transform:capitalize;
  829. font-weight:600;
  830. margin-left:55px;
  831. padding-left:23px;
  832. }
  833. .audio_player {
  834. width:200px;
  835. margin-left:5px;
  836. color:{color:text};
  837. }
  838. .album_cover img {
  839. width:50px;
  840. border-radius:100px;
  841. margin-left:15px;
  842. }
  843. /*post styles*/
  844. .photo_caption{
  845. font-family: 'khula', sans-serif;
  846. {block:IfFontLora}
  847. font-family: 'lora', sans-serif;
  848. {/block:IfFontLora}
  849. margin-left:-10px;
  850. margin-top:5px;
  851. }
  852. .tumblr_avatar {
  853. display:inline-block;
  854. margin-right:10px;
  855. margin-left:13px;
  856. border-radius:100%;
  857. width:18px;
  858. vertical-align:middle;
  859. }
  860. .tumblr_parent {
  861. padding:0px;
  862. margin-top:18px;
  863. font-family: 'khula', sans-serif;
  864. {block:IfFontLora}
  865. font-family: 'lora', sans-serif;
  866. {/block:IfFontLora}
  867. font-size:10px;
  868. text-align:left;
  869. font-weight:500;
  870. color:{color:info};
  871. letter-spacing:0px;
  872. border:none;
  873. }
  874. .psets{
  875. width:100%;
  876. margin-top:0px;
  877. margin-left:0px;
  878. }
  879. .vsets{
  880. width:100%;
  881. margin-top:-12px;
  882. }
  883. .ppost{
  884. width:100%;
  885. margin-top:-12px;
  886. }
  887. .quote_cap{
  888. font-family: 'khula', sans-serif;
  889. {block:IfFontLora}
  890. font-family: 'lora', sans-serif;
  891. {/block:IfFontLora}
  892. font-size:15px;
  893. margin-left:15px;
  894. margin-top:15px;
  895. padding-right:15px;
  896. letter-spacing:0px;
  897. text-align:justify;
  898. text-transform:none;
  899. color:{color:text};
  900. font-weight:200;
  901. }
  902. .quote_src{
  903. font-size:10px;
  904. margin-left:15px;
  905. margin-top:12px;
  906. text-align:left;
  907. letter-spacing:0px;
  908. font-family: 'khula', sans-serif;
  909. {block:IfFontLora}
  910. font-family: 'lora', sans-serif;
  911. {/block:IfFontLora}
  912. text-transform:capitalize;
  913. font-style:italic;
  914. font-weight:300;
  915. }
  916. .chat_box{
  917. font-family: 'khula', sans-serif;
  918. {block:IfFontLora}
  919. font-family: 'lora', sans-serif;
  920. {/block:IfFontLora}
  921. margin-left:15px;
  922. padding-right:15px;
  923. }
  924. .chat_line {
  925. padding:3px;
  926. }
  927. .chat_label {
  928. padding:5px;
  929. border-radius:3px;
  930. font-weight:600;
  931. font-family: 'khula', sans-serif;
  932. {block:IfFontLora}
  933. font-family: 'lora', sans-serif;
  934. {/block:IfFontLora}
  935. background:{color:accent};
  936. text-transform:uppercase;
  937. }
  938. .chat_box blockquote {
  939. padding-left:12px;
  940. border-left:1px solid {color:border};
  941. margin-left:2px;
  942. }
  943. .post_container {
  944. width:calc(1000px + 120px + 0px + 0px);
  945. margin:45px auto;
  946. text-align:center;
  947. z-index:99;
  948. overflow:hidden;
  949. }
  950. /*posts*/
  951. #entries {
  952. margin-left:470px;
  953. overflow:auto;
  954. z-index:999999;
  955. }
  956. #post {
  957. font-size:10px;
  958. width:500px;
  959. color:{color:text};
  960. opacity:1;
  961. background-color:{color:posts};
  962. text-align:justify;
  963. border-radius:0px;
  964. z-index:99999999999999999;
  965. font-family: 'khula', sans-serif;
  966. {block:IfFontLora}
  967. font-family: 'lora', sans-serif;
  968. {/block:IfFontLora}
  969. margin-left:15px;
  970. margin-bottom:40px;
  971. padding-bottom:0px;
  972. overflow:hidden;
  973. }
  974. #post img{
  975. max-width:100%;
  976. margin-top:-5px;
  977. height:auto;
  978. }
  979. /*post info*/
  980. #info {
  981. width:515px;
  982. text-align:left;
  983. font-family: 'khula', sans-serif;
  984. {block:IfFontLora}
  985. font-family: 'lora', sans-serif;
  986. {/block:IfFontLora}
  987. text-transform:lowercase;
  988. margin-left:0px;
  989. font-size:10px;
  990. margin-top:0px;
  991. padding-left:20px;
  992. padding-top:0px;
  993. padding-bottom:6px;
  994. opacity:1;
  995. overflow:hidden;
  996. border-top:1px solid {color:border};
  997. font-weight:400;
  998. line-height:21px;
  999. letter-spacing:0px;
  1000. background:{color:posts};
  1001. z-index:9999999999999999;
  1002. color:{color:info};
  1003. }
  1004. #info a {
  1005. text-align:left;
  1006. font-weight:400;
  1007. padding:2px;
  1008. font-size:10px;
  1009. letter-spacing:-1px;
  1010. font-family: 'khula', sans-serif;
  1011. {block:IfFontLora}
  1012. font-family: 'lora', sans-serif;
  1013. {/block:IfFontLora}
  1014. text-transform:lowercase;
  1015. line-height:12px;
  1016. color:{color:info};
  1017. -moz-transition-duration:0.2s;
  1018. -webkit-transition-duration:0.2s;
  1019. -o-transition-duration:0.2s;
  1020. transition: all 0.2s ease-out;
  1021. }
  1022. #info a,date:hover{
  1023. color:{color:hover};
  1024. -moz-transition-duration:0.2s;
  1025. -webkit-transition-duration:0.2s;
  1026. -o-transition-duration:0.2s;
  1027. transition: all 0.2s ease-out;
  1028. }
  1029. #info tagged {
  1030. font-family: 'khula', sans-serif;
  1031. {block:IfFontLora}
  1032. font-family: 'lora', sans-serif;
  1033. {/block:IfFontLora}
  1034. text-transform:lowercase;
  1035. font-size:10px;
  1036. margin-top:0px;
  1037. color:{color:info};
  1038. padding-top:0px;
  1039. text-align:left;
  1040. display:inline-block;
  1041. line-height:15px;
  1042. letter-spacing:0px;
  1043. margin-left:-2px;
  1044. margin-bottom:0px;
  1045. padding-bottom:1px;
  1046. font-weight:400;
  1047. -moz-transition-duration:0.2s;
  1048. -webkit-transition-duration:0.2s;
  1049. -o-transition-duration:0.2s;
  1050. transition: all 0.2s ease-out;
  1051. }
  1052. #info tagged:hover{
  1053. color:{color:hover};
  1054. -moz-transition-duration:0.2s;
  1055. -webkit-transition-duration:0.2s;
  1056. -o-transition-duration:0.2s;
  1057. transition: all 0.2s ease-out;
  1058. }
  1059. #info span {
  1060. padding:4px;
  1061. }
  1062. #info namee {
  1063. text-transform:lowercase;
  1064. color:{color:info};
  1065. letter-spacing:1px;
  1066. font-family: 'khula', sans-serif;
  1067. {block:IfFontLora}
  1068. font-family: 'lora', sans-serif;
  1069. {/block:IfFontLora}
  1070. font-weight:600;
  1071. }
  1072. #post_info {
  1073. width:520px;
  1074. padding:5px;
  1075. margin-top:-10px;
  1076. font-size:10px;
  1077. margin-left:-28px;
  1078. color:{color:info};
  1079. text-align:left;
  1080. margin-bottom:-16px;
  1081. z-index:9999999999999999;
  1082. padding-left:12px;
  1083. line-height:20px;
  1084. letter-spacing:0px;
  1085. font-family: 'khula', sans-serif;
  1086. {block:IfFontLora}
  1087. font-family: 'lora', sans-serif;
  1088. {/block:IfFontLora}
  1089. -moz-transition-duration:0.2s;
  1090. -webkit-transition-duration:0.2s;
  1091. -o-transition-duration:0.2s;
  1092. transition: all 0.2s ease-out;
  1093. }
  1094. #post_info date {
  1095. font-size:9px;
  1096. letter-spacing:0px;
  1097. text-transform:lowercase;
  1098. font-family: 'khula', sans-serif;
  1099. {block:IfFontLora}
  1100. font-family: 'lora', sans-serif;
  1101. {/block:IfFontLora}
  1102. font-weight:600;
  1103. width:512px;
  1104. padding:2px;
  1105. text-align:left;
  1106. padding-left:0px;
  1107. line-height:17px;
  1108. color:{color:info};
  1109. padding-bottom:3px;
  1110. padding-top:1px;
  1111. }
  1112. #post_info a {
  1113. font-size:12px;
  1114. letter-spacing:0px;
  1115. color:{color:info};
  1116. font-family: 'khula', sans-serif;
  1117. {block:IfFontLora}
  1118. font-family: 'lora', sans-serif;
  1119. {/block:IfFontLora}
  1120. }
  1121. #post_info span {
  1122. font-size:10px;
  1123. font-weight:bold;
  1124. }
  1125. #post_info a:hover {
  1126. color:{color:hover};
  1127. -moz-transition-duration:0.2s;
  1128. -webkit-transition-duration:0.2s;
  1129. -o-transition-duration:0.2s;
  1130. transition: all 0.2s ease-out;
  1131. }
  1132. #permalink{
  1133. margin-bottom:12px;
  1134. text-align:left;
  1135. font-size:9px;
  1136. margin-left:15px;
  1137. margin-top:16px;
  1138. font-weight:bold;
  1139. width:520px;
  1140. font-size:11px;
  1141. text-transform:none;
  1142. font-weight:300;
  1143. font-family: 'khula', sans-serif;
  1144. {block:IfFontLora}
  1145. font-family: 'lora', sans-serif;
  1146. {/block:IfFontLora}
  1147. letter-spacing:0px;
  1148. line-height:10px;
  1149. color:{color:text};
  1150. }
  1151. #permalink a{
  1152. color:{color:text};
  1153. font-family: 'khula', sans-serif;
  1154. {block:IfFontLora}
  1155. font-family: 'lora', sans-serif;
  1156. {/block:IfFontLora}
  1157. font-size:10px;
  1158. margin-left:-3px;
  1159. text-transform:none;
  1160. font-weight:600;
  1161. padding:3px;
  1162. }
  1163. #permalink a:hover{
  1164. color:{color:hover};
  1165. }
  1166. #permalink b {
  1167. color:{color:text};
  1168. font-family: 'khula', sans-serif;
  1169. {block:IfFontLora}
  1170. font-family: 'lora', sans-serif;
  1171. {/block:IfFontLora}
  1172. font-size:9px;
  1173. margin-left:-3px;
  1174. text-transform:none;
  1175. font-weight:600;
  1176. padding:3px;
  1177. }
  1178. #permalink span {
  1179. color:{color:text};
  1180. font-size:10px;
  1181. text-transform:none;
  1182. font-weight:700;
  1183. padding:3px;
  1184. }
  1185. /*questions and answers*/
  1186. #asking {
  1187. margin-left:40px;
  1188. margin-top:-55px;
  1189. }
  1190. #question {
  1191. padding:25px;
  1192. padding-left:52px;
  1193. margin-top:5px;
  1194. padding-top:22px;
  1195. margin-left:10px;
  1196. width:457px;
  1197. text-transform:none;
  1198. border-radius:0px;
  1199. {block:IfRoundedCorners}
  1200. border-radius:3px;
  1201. {/block:IfRoundedCorners}
  1202. font-family: 'khula', sans-serif;
  1203. {block:IfFontLora}
  1204. font-family: 'lora', sans-serif;
  1205. {/block:IfFontLora}
  1206. color:{color:text};
  1207. background-color:{color:asks};
  1208. }
  1209. #asker{
  1210. margin-top:12px;
  1211. padding:20px;
  1212. font-weight:300;
  1213. width:435px;
  1214. font-size:10px;
  1215. z-index:9999999999;
  1216. color:{color:text};
  1217. opacity:1;
  1218. background:{color:asks};
  1219. border-radius:2px;
  1220. margin-left:12px;
  1221. line-height:18px;
  1222. letter-spacing:0px;
  1223. font-family: 'khula', sans-serif;
  1224. {block:IfFontLora}
  1225. font-family: 'lora', sans-serif;
  1226. {/block:IfFontLora}
  1227. text-transform:none;
  1228. }
  1229. askerurl{
  1230. font-weight:600;
  1231. font-family: 'khula', sans-serif;
  1232. {block:IfFontLora}
  1233. font-family: 'lora', sans-serif;
  1234. {/block:IfFontLora}
  1235. font-size:10px;
  1236. margin-bottom:16px;
  1237. }
  1238. /*credit (u better leave this here u goof)*/
  1239. #credit{
  1240. position:fixed;
  1241. font-size:9px;
  1242. font-weight:400;
  1243. height:20px;
  1244. width:52px;
  1245. opacity:1;
  1246. right:12px;
  1247. bottom:10px;
  1248. line-height:10px;
  1249. letter-spacing:0px;
  1250. border-radius:3px;
  1251. background:{color:credit};
  1252. padding:7px;
  1253. z-index:9999999999999999999999999999;
  1254. text-align:center;
  1255. font-family: 'lora', sans-serif;
  1256. border:1px solid {color:border};
  1257. color:{color:text};
  1258. text-transform:lowercase;
  1259. -moz-transition-duration:0.6s;
  1260. -webkit-transition-duration:0.6s;
  1261. -o-transition-duration:0.6s;
  1262. transition: all 0.6s ease-out;
  1263. }
  1264. #credit a:hover{
  1265. color:{color:credit hover};
  1266. -moz-transition-duration:0.6s;
  1267. -webkit-transition-duration:0.6s;
  1268. -o-transition-duration:0.6s;
  1269. transition: all 0.6s ease-out;
  1270. }
  1271. .tabs {
  1272. width:227px;
  1273. height:30px;
  1274. color:#fff;
  1275. position:fixed;
  1276. display:inline-block;
  1277. top:315px;
  1278. z-index:999999999999;
  1279. margin-left:750px;
  1280. }
  1281. /*----- Tab Links -----*/
  1282.  
  1283. /* Clearfix */
  1284. .tab-links:after {
  1285. display:block;
  1286. clear:both;
  1287. content:'';
  1288. }
  1289. .tab-links li {
  1290. margin-right:-3px;
  1291. display:inline-block;
  1292. list-style:none;
  1293. text-transform:uppercase;
  1294. }
  1295. .tab-links a {
  1296. width:auto;
  1297. height:20px;
  1298. margin-bottom:4px;
  1299. text-align:left;
  1300. text-transform:none;
  1301. padding:4px;
  1302. padding-left:15px;
  1303. line-height:21px;
  1304. color:{color:text};
  1305. font-style:none;
  1306. background:{color:posts};
  1307. z-index:99999;
  1308. font-weight:600;
  1309. font-family: 'khula', sans-serif;
  1310. {block:IfFontLora}
  1311. font-family: 'lora', sans-serif;
  1312. {/block:IfFontLora}
  1313. letter-spacing:1px;
  1314. font-size:10px;
  1315. display:inline-block;
  1316. -webkit-transition: all 0.7s ease-in-out 0s;
  1317. -moz-transition: all 0.7s ease-in-out 0s;
  1318. -o-transition: all 0.7s ease-in-out 0s;
  1319. -ms-transition: all 0.7s ease-in-out 0s;
  1320. transition: all 0.7s ease-in-out 0s;
  1321. }
  1322. .tab-links a:hover {
  1323. color:{color:hover};
  1324. }
  1325. li.active a, li.active a:hover {
  1326. -webkit-transition: all 0.7s ease-in-out 0s;
  1327. -moz-transition: all 0.7s ease-in-out 0s;
  1328. -o-transition: all 0.7s ease-in-out 0s;
  1329. -ms-transition: all 0.7s ease-in-out 0s;
  1330. transition: all 0.7s ease-in-out 0s;
  1331. }
  1332. /*----- -----*/
  1333. .tab-content {
  1334. }
  1335. .tab {
  1336. display:none;
  1337. }
  1338. .tab.active {
  1339. display:block;
  1340. }
  1341. #tab-links-bar{
  1342. display:inline-block;
  1343. text-align:left;
  1344. position:fixed;
  1345. z-index:999999;
  1346. margin-top:3px;
  1347. margin-left:-886px;
  1348. }
  1349. .tabcontent {
  1350. position:static;
  1351. margin-left:-400px;
  1352. margin-top:-220px;
  1353. padding:4px;
  1354. width:600px;
  1355. height:500px;
  1356. text-transform:none;
  1357. font-size:9px;
  1358. line-height:11px;
  1359. color:{color:text};
  1360. background:{color:posts};
  1361. z-index:999999999;
  1362. overflow:auto;
  1363. text-align:left;
  1364. }
  1365. #title1 {
  1366. height:3px;
  1367. position:fixed;
  1368. padding:20px;
  1369. line-height:5px;
  1370. top:96px;
  1371. text-align:left;
  1372. width:569px;
  1373. font-weight:300;
  1374. color:{color:posts};
  1375. margin-left:-4px;
  1376. font-size:17px;
  1377. font-family: 'khula', sans-serif;
  1378. {block:IfFontLora}
  1379. font-family: 'Abhaya Libre', sans-serif;
  1380. {/block:IfFontLora}
  1381. text-transform:lowercase;
  1382. overflow:hidden;
  1383. z-index:999;
  1384. opacity:1;
  1385. background:{color:text};
  1386. }
  1387. #tab_background {
  1388. width:100%;
  1389. height:100%;
  1390. background:{color:background};
  1391. top:0px;
  1392. left:300px;
  1393. position:fixed;
  1394. z-index:-9;
  1395. }
  1396. #tabdescription {
  1397. overflow:auto;
  1398. position:fixed;
  1399. text-align:justify;
  1400. margin-top:320px;
  1401. margin-left:26px;
  1402. font-family: 'khula', sans-serif;
  1403. {block:IfFontLora}
  1404. font-family: 'lora', sans-serif;
  1405. {/block:IfFontLora}
  1406. width:200px;
  1407. height:auto;
  1408. opacity:1;
  1409. line-height:15px;
  1410. color:{color:text};
  1411. padding:10px;
  1412. letter-spacing:0px;
  1413. font-size:10px;
  1414. z-index:99999999999999999999999;
  1415. transition-duration: 0.9s;
  1416. -moz-transition-duration:0.9s;
  1417. -webkit-transition-duration:0.9s;
  1418. -o-transition-duration:0.9s;
  1419. }
  1420. .links_box {
  1421. margin-top:65px;
  1422. margin-left:65px;
  1423. font-size:11px;
  1424. height:50px;
  1425. letter-spacing:0px;
  1426. font-weight:200;
  1427. opacity:1;
  1428. z-index:99999999999999999;
  1429. width:550px;
  1430. font-style:none;
  1431. text-align:left;
  1432. }
  1433. .links_box #all {
  1434. margin-left:15px;
  1435. margin-top:1px;
  1436. padding:10px;
  1437.  
  1438. }
  1439. .links_box a{
  1440. display:inline-block;
  1441. color:{color:text};
  1442. padding:5px;
  1443. width:150px;
  1444. font-weight:200;
  1445. margin-top:1px;
  1446. text-align:left;
  1447. line-height:15px;
  1448. font-style:none;
  1449. text-decoration:none;
  1450. font-family: 'lora', sans-serif;
  1451. text-transform:lowercase;
  1452. }
  1453. .links_box a:hover{
  1454. color:{color:hover};
  1455. -webkit-transition: all 0.4s ease-in-out;
  1456. -moz-transition: all 0.4s ease-in-out;
  1457. -o-transition: all 0.4s ease-in-out;
  1458. -ms-transition: all 0.4s ease-in-out;
  1459. transition: all 0.4s ease-in-out;
  1460. }
  1461. .links_box h3 {
  1462. font-family: 'lora', sans-serif;
  1463. font-size:12px;
  1464. padding-left:4px;
  1465. padding-bottom:-3px;
  1466. font-weight:500;
  1467. color:{color:text};
  1468. }
  1469. #about_description {
  1470. width:310px;
  1471. max-height:410px;
  1472. position:absolute;
  1473. margin-top:60px;
  1474. margin-left:260px;
  1475. font-family: 'khula', sans-serif;
  1476. {block:IfFontLora}
  1477. font-family: 'lora', sans-serif;
  1478. {/block:IfFontLora}
  1479. font-size:10px;
  1480. z-index:999999;
  1481. display:block;
  1482. line-height:18px;
  1483. color:#222222;
  1484. padding-right:20px;
  1485. text-align:justify;
  1486. overflow:auto;
  1487. }
  1488. #about_description b {
  1489. font-weight:700;
  1490. font-family: 'khula', sans-serif;
  1491. {block:IfFontLora}
  1492. font-family: 'lora', sans-serif;
  1493. {/block:IfFontLora}
  1494. color:#222222;
  1495. }
  1496. #about_description a {
  1497. font-weight:700;
  1498. font-size:12px;
  1499. text-transform:uppercase;
  1500. font-family: 'khula', sans-serif;
  1501. {block:IfFontLora}
  1502. font-family: 'lora', sans-serif;
  1503. {/block:IfFontLora}
  1504. color:#222222;
  1505. }
  1506. #about_description::-webkit-scrollbar-thumb {
  1507. height:7px;
  1508. width:5px;
  1509. background-color:#eeeeee;
  1510. }
  1511. #about_description::-webkit-scrollbar {
  1512. height:4px;
  1513. width:1px;
  1514. background:#ffffff;
  1515. opacity:0.2;
  1516. }
  1517. {CustomCSS}</style>
  1518. <style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/others/oth-6/oth589.cur), progress !important;}</style><a href="http://www.cursors-4u.com/cursor/2011/03/03/tiny-hand-10.html" target="_blank" title="Tiny Hand"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Tiny Hand" /></a>
  1519. <script>
  1520. $(document).ready(function() {
  1521. $('.tabs .tab-links a').on('click', function(e) {
  1522. var currentAttrValue = $(this).attr('href');
  1523.  
  1524. // Show/Hide Tabs
  1525. $('.tabs ' + currentAttrValue).fadeIn(000).siblings().hide();
  1526.  
  1527. // Change/remove current tab to active
  1528. $(this).parent('li').addClass('active').siblings().removeClass('active');
  1529.  
  1530. e.preventDefault();
  1531. });
  1532. });
  1533. </script>
  1534.  
  1535. <script>
  1536. $(document).ready(function() {
  1537. $('#filterOptions li a').click(function() {
  1538. // fetch the class of the clicked item
  1539. var ourClass = $(this).attr('class');
  1540.  
  1541. // reset the active class on all the buttons
  1542. $('#filterOptions li').removeClass('active');
  1543. // update the active state on our clicked button
  1544. $(this).parent().addClass('active');
  1545.  
  1546. if(ourClass == 'all') {
  1547. // show all our items
  1548. $('#ourHolder').children('div.item').show();
  1549. }
  1550. else {
  1551. // hide all elements that don't share ourClass
  1552. $('#ourHolder').children('div:not(.' + ourClass + ')').hide();
  1553. // show all elements that do share ourClass
  1554. $('#ourHolder').children('div.' + ourClass).show();
  1555. }
  1556. return false;
  1557. });
  1558. });
  1559. </script>
  1560. </head>
  1561. <body>
  1562. <div class="container fade-in one">
  1563. <div id="sidebar_con">
  1564. <div id="image_bigimage"><img src="{image:icon}"></div>
  1565. <div id="tit_sdebr">{text:sidebar label}<div id="border"></div></div>
  1566. <div id="description">{description}</div>
  1567. <div id="tab-links-bar">
  1568. <div class="tabs">
  1569. <ul class="tab-links">
  1570. <li class="active"<>
  1571. <li><a href="/">Home</a></li>
  1572. <li><a href="/ask">Ask</a></li>
  1573. <li><a href="#tab2">{text:tab one label}</a></li>
  1574. <li><a href="#tab3">{text:tab two label}</a></li>
  1575.  
  1576. </ul>
  1577. </div>
  1578. </div>
  1579. <div class="tabs">
  1580.  
  1581. <div id="tab2" class="tab">
  1582. <div class="tabcontent">
  1583. <div id="tab_background"></div>
  1584. <p><div id="title1">Muse description</div></p>
  1585. <!-- to place an image, just paste the image address below</a> -->
  1586. <div id="sidebar_iconimage"><img src="IMAGE URL HERE"></div>
  1587. <!-- edit muse/about tab below -->
  1588. <div id="tabdescription">
  1589. <b>Name:</b> Marie Rosefill</br>
  1590. <b>Zodiac Sign:</b> Libra</br>
  1591. <b>Birtdhay:</b> 21st October 1993</br>
  1592. <b>Age:</b> 24 years</br>
  1593. <b>Birthplace:</b> Orlando, Florida</br>
  1594. <b>Current Residence:</b> Los Angeles, California </br>
  1595. <b>Parents:</b> Arthur Rosefill and Amelie Rosefill</br>
  1596. <b>Siblings:</b> Isaac Rosefill, James Rosefill and Franz Rosefill</br></div>
  1597. <div id="about_description">
  1598. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  1599.  
  1600. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  1601.  
  1602. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
  1603.  
  1604. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  1605.  
  1606. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
  1607.  
  1608. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
  1609. </div>
  1610. </div>
  1611. </div>
  1612. <div id="tab3" class="tab">
  1613. <div class="tabcontent"style="overflow:hidden">
  1614. <div id="tab_background"></div>
  1615. <p><div id="title1">Navigation</div></p>
  1616. <div class="links_box">
  1617. <!-- to add more links, just copy and paste <a href="/">Link label</a> -->
  1618. <div id="all">
  1619. <h3>Link category one</h3>
  1620. <a href="/">Link label</a>
  1621. <a href="/">Link label</a>
  1622. <a href="/">Link label</a>
  1623. <a href="/">Link label</a>
  1624. <a href="/">Link label</a>
  1625. <a href="/">Link label</a>
  1626. </br></br>
  1627. <h3>Link category two</h3>
  1628. <a href="/">Link label</a>
  1629. <a href="/">Link label</a>
  1630. <a href="/">Link label</a>
  1631. <a href="/">Link label</a>
  1632. <a href="/">Link label</a>
  1633. <a href="/">Link label</a>
  1634. </br></br>
  1635. <h3>Link category three</h3>
  1636. <a href="/">Link label</a>
  1637. <a href="/">Link label</a>
  1638. <a href="/">Link label</a>
  1639. <a href="/">Link label</a>
  1640. <a href="/">Link label</a>
  1641. <a href="/">Link label</a>
  1642. </br></br>
  1643. <h3>Link category four</h3>
  1644. <a href="/">Link label</a>
  1645. <a href="/">Link label</a>
  1646. <a href="/">Link label</a>
  1647. <a href="/">Link label</a>
  1648. <a href="/">Link label</a>
  1649. <a href="/">Link label</a>
  1650. </div></div></div>
  1651.  
  1652. </div></div></div>
  1653. <div class="post_container fade-in one">
  1654. <!-- posts and entries -->
  1655. <div id="entries"class="fade-in one">
  1656. {block:Posts}
  1657. <div id="post"class="fade-in one">
  1658. <!-- texts -->
  1659. {block:Text}
  1660. {block:Title}<h1>{Title}</h1>{/block:Title}
  1661. <p>{Body}</p>
  1662. {/block:Text}
  1663. <!-- question and answers -->
  1664. {block:Answer}
  1665. <div id="asker"><askerurl>{Asker} asked:</askerurl></br> {Question}</div>
  1666. {Answer}{/block:Answer}
  1667. <!-- quotes -->
  1668. {block:Quote}
  1669. <div class="quote_cap"><i class="zmdi zmdi-quote"></i>
  1670. {Quote}<i class="zmdi zmdi-quote"></i>
  1671. </div>
  1672. <div class="quote_src">
  1673. {block:Source}- {Source}{/block:Source}
  1674. </div>
  1675. {/block:Quote}
  1676. <!-- links -->
  1677. {block:Link}
  1678. <h2><center><a href="{URL}">{Name}</center></a></h2>
  1679. {block:Description}{Description}{/block:Description}
  1680. {/block:Link}
  1681. <!-- chats -->
  1682. {block:Chat}
  1683. {block:Title}<h1>{Title}</h1>{/block:Title}
  1684. <div class="chat_box">{block:Lines}<div class="chat_line">{block:Label}<div class ="chat_label">{Label}</div>{/block:Label}
  1685. <blockquote>{Line}</blockquote></div>{/block:Lines}</div>
  1686. {/block:Chat}
  1687. <!-- photos -->
  1688. {block:Photo}
  1689. {LinkOpenTag}<div class="ppost"><img src="{PhotoURL-500}" alt="{PhotoAlt}" width="100%">{LinkCloseTag}</div>
  1690. {block:Caption}<div class="photo_caption">{Caption}</div>{/block:Caption}
  1691. {/block:Photo}
  1692. <!-- photosets -->
  1693. {block:Photoset}
  1694. <div class="set"style="margin-top:-15px"><center><div class="pxu"><div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}
  1695. <div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" ></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div></div></center></div>
  1696. {block:Caption}<div class="photo_caption">{Caption}</div>{/block:Caption}
  1697. {/block:Photoset}
  1698. <!-- videos -->
  1699. {block:Video}
  1700. <div class="vsets">{Video-500}</div>
  1701. {block:Caption}<div class="photo_caption">{Caption}</div>{/block:Caption}
  1702. {/block:Video}
  1703. <!-- audios -->
  1704. {block:Audio}<div class="album_cover">{block:AlbumArt}<img src="{AlbumArtURL}">{/block:AlbumArt}</div>
  1705. {block:TrackName}<div class="audio_tit">Title: <audioinfo>{TrackName}</audioinfo><br/></div>{/block:TrackName}
  1706. {block:Artist}<div class="audio_artist">Artist: <audioinfo>{Artist}</audioinfo><br/></div>{/block:Artist}
  1707. {/block:ExternalAudio}<div class="audio_play">Played: <audioinfo>{PlayCount} times</audioinfo> </div>
  1708. </br>
  1709. <div class="audio_player">{AudioPlayer}</div>
  1710. {/block:Audio}
  1711. <!-- info -->
  1712. <div id="info">
  1713. <div id="permalink">
  1714. <div id="post_info">
  1715. <date><a href="{Permalink}">{TimeAgo} </a><font style="float:right;margin-right:60px;margin-top:0px;"> {NoteCountWithLabel}</font style></date></br>
  1716. {block:RebloggedFrom}{block:ContentSource}
  1717. <a href="{ReblogParentURL}" title="via">via</a><a href="{SourceURL}"title="source">src</a>
  1718. {/block:ContentSource}
  1719. {/block:RebloggedFrom}
  1720. <font style="float:right;margin-right:60px;margin-top:-3px;"><a href="{ReblogURL}" title="reblog"target="_blank" class="details">reblog</a>
  1721. </a><div class="custom-like-button"style="margin-top:-25px">{LikeButton}<span class="our_button"><span class="sf sf-heart-o"></span></div></font style>
  1722. </div></div>
  1723. {/block:Date}
  1724.  
  1725. {block:HasTags}<tagged>{block:Tags} <a href="{TagURL}"> <tagged>#{Tag}</tagged> </a> {/block:Tags}
  1726.  
  1727. {/block:HasTags}
  1728. </div></div>
  1729. {block:PostNotes} {PostNotes} {/block:PostNotes}
  1730. {/block:Posts}
  1731. {/block:Posts}
  1732. <div class="pagination"style="{color:title text}">
  1733. {block:PreviousPage}<a href="{PreviousPage}"title="previous page">BACK</a>{/block:PreviousPage}{block:JumpPagination length="4"}{block:CurrentPage}<span class="current_page"style="color:{color:accent};font-weight:600;padding:5px">{PageNumber}</span>{/block:CurrentPage}{block:JumpPage}<a class="jump_page"style="{color:text}" href="{URL}">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination}{block:NextPage}<a href="{NextPage}"title="next page">NEXT</a>{/block:NextPage}
  1734. {/block:Pagination}</div>
  1735. </div>
  1736.  
  1737. </div>
  1738. <!-- credit(u better dont touch this here u goof) -->
  1739. <div id="credit">
  1740. <a href="http://ceesty.com/qNgV4R"title="Coded by 1204px">themes by azure</a>
  1741. </div></div>
  1742. </html>
  1743. <script src="http://static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js"></script>
  1744. <script> $(function(){ $('#entries').unnest({
  1745. yourCaption: ".photo_caption", //your caption selector, the div wrapping {Caption}
  1746. wrapName: ".tumblr_parent", //the name of the captions’ new wrapper
  1747. newCaptionUsername: false, //if the user adds a new caption, following a series of captions, show their username above the caption
  1748. originalPostCaptionUsername: false, //for the original captions, or a user-added caption that previously didn’t have any, have their username on it
  1749. tumblrAvatars: true, //”dashboard style” caption, have the avatar of the blog next to the username
  1750. tumblrAvatarClass: ".tumblr_avatar", //class of the avatar next to the username
  1751. usernameColon: false //if turned to false, removes the colon at the end of usernames
  1752. }); });
  1753. </script>
  1754. <!-- pixel union photoset script -->
  1755. <link href="http://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  1756. <script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  1757. <script>
  1758. $(document).ready(function(){
  1759. $('.photo-slideshow').pxuPhotoset({
  1760. lightbox: true,
  1761. rounded: false,
  1762. gutter: '0px',
  1763. borderRadius:'0px',
  1764. photoset: '.photo-slideshow',
  1765. photoWrap: '.photo-data',
  1766. photo: '.pxu-photo'
  1767. });</script>
  1768.  
  1769. </body>
  1770. <!-- end html -->
Advertisement
Add Comment
Please, Sign In to add comment