API tools faq
paste
deersprouts

╰ ° 011: lalisa — no sidebar hover

deersprouts
Jul 10th, 2017
413
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 70.69 KB | None | 0 0
raw download clone embed print report diff
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <!---------------- HEY! LISTEN --------------*/
  4.  
  5.  
  6. ╰ ° LALISA THEME BY JCNNIE *°
  7.  
  8. - you can edit it to your heart's content but
  9. keep the credit please! plagiarism ain't cool.
  10. - do not take any part of this theme
  11. and claim it as your own.
  12. - do not lift any section of coding and use it
  13. elsewhere.
  14.  
  15.  
  16. base code: neonbike themes
  17. chat post code: animalites
  18.  
  19.  
  20. /*--------------------------------------------->
  21.  
  22. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  23. <head><title>{Title}</title>
  24. <link rel="shortcut icon" href="{Favicon}">
  25. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  26. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  27.  
  28. <meta name="color:background" content="#d6d6d6"/>
  29. <meta name="color:accent" content="#bbb" />
  30. <meta name="color:desc bg" content="#ececec" />
  31. <meta name="color:sidebar bg" content="#f8f8f8" />
  32. <meta name="color:posts bg" content="#fff" />
  33. <meta name="color:text" content="#000"/>
  34. <meta name="color:navi" content="#fff"/>
  35. <meta name="color:title" content="#000" />
  36. <meta name="color:headertitle" content="#fff" />
  37. <meta name="color:link" content="#000"/>
  38. <meta name="color:linkhover" content="#777"/>
  39. <meta name="color:bold" content="#777" />
  40. <meta name="color:italic" content="#777" />
  41. <meta name="color:underline" content="#777" />
  42. <meta name="color:icon border" content="#fff" />
  43.  
  44. <meta name="text:header title" content="header title"/>
  45. <meta name="text:title" content="sidebar title"/>
  46. <meta name="text:subtitle" content="try some bold or italic text here"/>
  47. <meta name="text:username" content="put your username/url here so the askbox can work (ex. jcnnie)"/>
  48. <meta name="text:navtitle" content="navigation"/>
  49. <meta name="text:navsubtitle" content="this is a nav subtitle"/>
  50. <meta name="text:askbox title" content="ask me anything."/>
  51. <meta name="text:tab 1 title" content="home"/>
  52. <meta name="text:tab 2 title" content="message"/>
  53. <meta name="text:tab 3 title" content="navigate"/>
  54. <meta name="text:tab 4 title" content="network"/>
  55. <meta name="text:link 1 title" content="link one"/>
  56. <meta name="text:link 1 url" content="/"/>
  57. <meta name="text:link 2 title" content="link two"/>
  58. <meta name="text:link 2 url" content="/"/>
  59. <meta name="text:link 3 title" content="link three"/>
  60. <meta name="text:link 3 url" content="/"/>
  61. <meta name="text:link 4 title" content="link four"/>
  62. <meta name="text:link 4 url" content="/"/>
  63. <meta name="text:link 5 title" content="link five"/>
  64. <meta name="text:link 5 url" content="/"/>
  65. <meta name="text:link 6 title" content="link six"/>
  66. <meta name="text:link 6 url" content="/"/>
  67. <meta name="text:link 7 title" content="link seven"/>
  68. <meta name="text:link 7 url" content="/"/>
  69. <meta name="text:link 8 title" content="link eight"/>
  70. <meta name="text:link 8 url" content="/"/>
  71. <meta name="text:link 9 title" content="link nine"/>
  72. <meta name="text:link 9 url" content="/"/>
  73.  
  74.  
  75. <meta name="select:title font" content="glowies" title="rowo"/>
  76. <meta name="select:title font" content="glowies2" title="playlist"/>
  77. <meta name="select:title font" content="glowies4" title="banaue"/>
  78. <meta name="select:title font" content="glowies5" title="mix yonder"/>
  79.  
  80. <meta name="select:title font size" content="27px" title="27"/>
  81. <meta name="select:title font size" content="36px" title="36"/>
  82. <meta name="select:title font size" content="48px" title="48"/>
  83. <meta name="select:title font size" content="54px" title="54"/>
  84. <meta name="select:title font size" content="68px" title="68"/>
  85.  
  86. <meta name="select:subtitle padding" content="-15px" title="-15"/>
  87. <meta name="select:subtitle padding" content="-10px" title="-10"/>
  88. <meta name="select:subtitle padding" content="-5px" title="-5"/>
  89. <meta name="select:subtitle padding" content="0px" title="0"/>
  90. <meta name="select:subtitle padding" content="5px" title="5"/>
  91. <meta name="select:subtitle padding" content="10px" title="10"/>
  92.  
  93. <meta name="image:background" content=""/>
  94. <meta name="image:header icon" content=""/>
  95. <meta name="image:side icon" content=""/>
  96. <meta name="image:side icon2" content=""/>
  97. <meta name="image:tab icon" content=""/>
  98. <meta name="image:tab icon2" content=""/>
  99. <meta name="image:tab icon3" content=""/>
  100. <meta name="image:tab icon4" content=""/>
  101.  
  102. <meta name="if:greyscale" content="1"/>
  103. <meta name="if:400px" content="1"/>
  104. <meta name="if:clearsidebarbg" content="1"/>
  105. <meta name="if:NoHeader" content="1"/>
  106. <meta name="if:FullBG" content="1"/>
  107. <meta name="if:DarkTumblrCtrls" content="0"/>
  108. <meta name="text:text size" content="9px" />
  109.  
  110.  
  111.  
  112. <!--- SCRIPTS AND STUFF --->
  113.  
  114.  
  115. <script type="text/javascript" src="http://static.tumblr.com/86jccts/wpsmuemne/hoverqtip.js"></script>
  116. <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i" rel="stylesheet">
  117. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  118. <link href="https://github.com/IanLunn/Hover.git" rel="stylesheet" media="all">
  119. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  120. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  121.  
  122. <!-- TABS/ALL-INN-ONE SCRIPTS DO NOT REMOVE!!! -->
  123.  
  124. <script>
  125. $(document).ready(function() {
  126. $('.tabs .tab-links a').on('click', function(e) {
  127. var currentAttrValue = $(this).attr('href');
  128.  
  129. // Show/Hide Tabs
  130. $('.tabs ' + currentAttrValue).fadeIn(600).siblings().hide();
  131.  
  132. // Change/remove current tab to active
  133. $(this).parent('li').addClass('active').siblings().removeClass('active');
  134.  
  135. e.preventDefault();
  136. });
  137. });
  138. </script>
  139.  
  140.  
  141. <script>
  142. $(document).ready(function() {
  143. $('#filterOptions li a').click(function() {
  144. // fetch the class of the clicked item
  145. var ourClass = $(this).attr('class');
  146.  
  147. // reset the active class on all the buttons
  148. $('#filterOptions li').removeClass('active');
  149. // update the active state on our clicked button
  150. $(this).parent().addClass('active');
  151.  
  152. if(ourClass == 'all') {
  153. // show all our items
  154. $('#ourHolder').children('div.item').show();
  155. }
  156. else {
  157. // hide all elements that don't share ourClass
  158. $('#ourHolder').children('div:not(.' + ourClass + ')').hide();
  159. // show all elements that do share ourClass
  160. $('#ourHolder').children('div.' + ourClass).show();
  161. }
  162. return false;
  163. });
  164. });
  165. </script>
  166.  
  167. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/8mXm7q8vn/jquery.js"></script>
  168.  
  169. <script>
  170. $(document).ready(function() {
  171. $('.tabs .tab-links a').on('click', function(e) {
  172. var currentAttrValue = $(this).attr('href');
  173.  
  174. // Show/Hide Tabs
  175. $('.tabs ' + currentAttrValue).fadeIn(600).siblings().hide();
  176.  
  177. // Change/remove current tab to active
  178. $(this).parent('li').addClass('active').siblings().removeClass('active');
  179.  
  180. e.preventDefault();
  181. });
  182. });
  183. </script>
  184.  
  185. <script>
  186. $(document).ready(function() {
  187. $('#filterOptions li a').click(function() {
  188. // fetch the class of the clicked item
  189. var ourClass = $(this).attr('class');
  190.  
  191. // reset the active class on all the buttons
  192. $('#filterOptions li').removeClass('active');
  193. // update the active state on our clicked button
  194. $(this).parent().addClass('active');
  195.  
  196. if(ourClass == 'all') {
  197. // show all our items
  198. $('#ourHolder').children('div.item').show();
  199. }
  200. else {
  201. // hide all elements that don't share ourClass
  202. $('#ourHolder').children('div:not(.' + ourClass + ')').hide();
  203. // show all elements that do share ourClass
  204. $('#ourHolder').children('div.' + ourClass).show();
  205. }
  206. return false;
  207. });
  208. });
  209. </script>
  210.  
  211.  
  212. <script type="text/javascript">
  213. jQuery(document).ready(function() {
  214. jQuery(".sub").hide();
  215. //toggle the component with class msg_body
  216. jQuery(".cthrough").click(function()
  217. {
  218. jQuery(this).next(".sub").slideToggle(500);
  219. });});
  220. </script>
  221.  
  222. <script>
  223. var element_to_scroll_to = document.getElementById('bodystuf');
  224. // Or:
  225. var element_to_scroll_to = document.querySelectorAll('.cont')[0];
  226. // Or:
  227. var element_to_scroll_to = $('.cont')[0];
  228. // Basically `element_to_scroll_to` just have to be a reference
  229. // to any DOM element present on the page
  230. // Then:
  231. element_to_scroll_to.scrollIntoView();
  232. </script>
  233.  
  234. <!--- END OF SCRIPTS AND STUFF --->
  235.  
  236.  
  237.  
  238.  
  239.  
  240.  
  241.  
  242. <style type="text/css">
  243.  
  244. /* ╰ ° EXTRAS N STUFF *° */
  245.  
  246. ::-webkit-scrollbar-thumb:vertical {
  247. height:10px;
  248. border:0px solid {color:icon border};
  249. background-color:{color:icon border};
  250. -webkit-border-fill-color: transparent;
  251. }
  252.  
  253. ::-webkit-scrollbar-thumb:horizontal, ::-webkit-scrollbar:horizontal {
  254. display:none;
  255. }
  256.  
  257. ::-webkit-scrollbar {
  258. width:1px;
  259. height:5px;
  260. border:2px solid transparent;
  261. background:transparent;
  262. display:none;
  263. -webkit-border-fill-color: transparent;
  264. }
  265.  
  266. ::-moz-selection {
  267. color:{color:posts bg};
  268. background-color:{color:accent};
  269. }
  270.  
  271. ::selection {
  272. color:{color:posts bg};
  273. background-color:{color:accent};
  274. }
  275.  
  276. @font-face{
  277. font-family:"glowies";
  278. src: url('https://dl.dropboxusercontent.com/s/exkgvog2renheyj/r.ttf');
  279. }
  280.  
  281. @font-face{
  282. font-family:"glowies2";
  283. src: url('https://dl.dropboxusercontent.com/s/gdn9befynhd1v6x/ps.otf');
  284. }
  285.  
  286. @font-face{
  287. font-family:"glowies3";
  288. src: url('https://dl.dropboxusercontent.com/s/108jph3jeqb1zlb/ax.otf');
  289. }
  290. @font-face{
  291. font-family:"glowies4";
  292. src: url('https://dl.dropboxusercontent.com/s/vfdfby7jf9tq7ii/ban.otf');
  293. }
  294.  
  295. @font-face{
  296. font-family:"glowies5";
  297. src: url('https://dl.dropboxusercontent.com/s/ucpi3ltz43w4h2m/my.ttf');
  298. }
  299.  
  300. @font-face{
  301. font-family:"icony";
  302. src: url('https://dl.dropboxusercontent.com/s/a7bri7ihdzf1r5h/icony.ttf');
  303. }
  304.  
  305.  
  306.  
  307.  
  308. #tumblr_controls, .tmblr-iframe{ z-index:999999999999999999!important;
  309. {block:IfDarkTumblrCtrls}-webkit-filter:invert(100%); -moz-filter:invert(100%); -o-filter:invert(100%); -ms-filter:invert(100%); filter:invert(100%);{/block:IfDarkTumblrCtrls} position:fixed!important; top:0px!important; right:0px!important; -webkit-transform: scale(0.8);transform: scale(0.8); opacity:.5; -webkit-transition:all 0.6s ease-out;-webkit-transition: opacity 0.7s linear;opacity: 0.2;-webkit-transition: all 0.8s ease-out;-moz-transition: all 0.8s ease-out;transition: all 0.8s ease-out}
  310.  
  311. #tumblr_controls, .tmblr-iframe:hover { -webkit-transform: scale(0.8);transform: scale(0.8); opacity:.8;webkit-transition: all 0.4s ease-out;-moz-transition: all 0.4s ease-out;transition: all 0.4s ease-out; -webkit-transition:all 0.6s ease-out;{block:IfDarkTumblrCtrls}-webkit-filter:invert(80%); -moz-filter:invert(80%); -o-filter:invert(80%); -ms-filter:invert(80%); filter:invert(80%);{/block:IfDarkTumblrCtrls} }
  312.  
  313.  
  314. div#qTip {
  315. padding: 2px 5px 2px 5px;
  316. display: none;
  317. margin-left:10px;
  318. margin-top:-37px;
  319. background:{color:posts bg};
  320. opacity:0.8;
  321. font-weight:700;
  322. position: absolute;
  323. border-radius:10px;
  324. text-transform:uppercase;
  325. font-size:7px;
  326. z-index:99999999999999;
  327. color: {color:text};
  328. letter-spacing: 1px;
  329. }
  330.  
  331.  
  332. /* ╰ ° HOVER EFFECTS AND FONT ICONS *° */
  333.  
  334. /* Grow Rotate */
  335. .hvr-grow-rotate {display: inline-block;vertical-align: middle;-webkit-transform: translateZ(0);transform: translateZ(0);box-shadow: 0 0 1px rgba(0, 0, 0, 0);-webkit-backface-visibility: hidden;backface-visibility: hidden;-moz-osx-font-smoothing: grayscale;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;-webkit-transition-property: transform;transition-property: transform;}
  336. .hvr-grow-rotate:hover, .hvr-grow-rotate:focus, .hvr-grow-rotate:active {
  337. -webkit-transform: scale(1.1) rotate(4deg);transform: scale(1.1) rotate(4deg);}
  338.  
  339.  
  340. /* Push */
  341. @-webkit-keyframes hvr-push {
  342. 50% {-webkit-transform: scale(0.8);transform: scale(0.8);}100% {-webkit-transform: scale(1);transform: scale(1);}}
  343. @keyframes hvr-push {50% {-webkit-transform: scale(0.8);transform: scale(0.8);}100% {-webkit-transform: scale(1);transform: scale(1);}}
  344. .hvr-push {display: inline-block;vertical-align: middle;-webkit-transform: translateZ(0);transform: translateZ(0);box-shadow: 0 0 1px rgba(0, 0, 0, 0);-webkit-backface-visibility: hidden;backface-visibility: hidden;-moz-osx-font-smoothing: grayscale;}
  345. .hvr-push:hover, .hvr-push:focus, .hvr-push:active {-webkit-animation-name: hvr-push;animation-name: hvr-push;-webkit-animation-duration: 0.3s;animation-duration: 0.3s;-webkit-animation-timing-function: linear;animation-timing-function: linear;-webkit-animation-iteration-count: 1;animation-iteration-count: 1;
  346. }
  347.  
  348.  
  349. .lnr-tag {
  350. color: {color:text};
  351. font-size: 8px;
  352. }
  353. .lnr-leaf {
  354. color: {color:accent};
  355. font-size: 12px;
  356. text-align:center;
  357. display:block;
  358. margin-top:5px;
  359. margin-bottom:15px;
  360. }
  361. .lnr-arrow-right, .lnr-arrow-left {
  362. color: {color:text};
  363. font-size: 10px;
  364. }
  365. .sprout {
  366. color: {color:accent};
  367. font-size: 14px;
  368. font-family:'icony';
  369. text-align:center;
  370. display:block;
  371. text-shadow:none;
  372. font-weight:400;
  373. margin-top:-2px;
  374. margin-bottom:5px;
  375. }
  376.  
  377.  
  378. /* ╰ ° THE ESSENTIALS *° */
  379.  
  380. body {
  381. background-color:{color:background};
  382. {block:IfFullBG}
  383. background: url('{image:background}') no-repeat center center fixed;
  384. -webkit-background-size: cover;
  385. -moz-background-size: cover;
  386. -o-background-size: cover;
  387. background-size: cover;
  388. {/block:IfFullBG}
  389. line-height:150%;
  390. color:{color:text};
  391. font-family: 'roboto', sans-serif ;
  392. font-size: {text:text size};
  393. letter-spacing:0.5px;-webkit-font-smoothing: antialiased;
  394. -moz-osx-font-smoothing: grayscale;
  395. }
  396.  
  397.  
  398.  
  399. a {
  400. text-decoration:none;
  401. color:{color:link};
  402. -webkit-transition: all 0.5s ease;
  403. -moz-transition: all 0.5s ease;
  404. -o-transition: all 0.5s ease;
  405. }
  406.  
  407. a:hover {
  408. color:{color:linkhover};
  409. text-shadow:0px 0px 1px rgba(0,0,0,0.5);
  410. -webkit-transition: all 0.5s ease;
  411. -moz-transition: all 0.5s ease;
  412. -o-transition: all 0.5s ease;
  413. }
  414.  
  415. hr {
  416. width: 40%;
  417. margin-left: auto;
  418. margin-right: auto;
  419. margin-top: 20px;
  420. margin-bottom: 20px;
  421. opacity:0.5;
  422. color:{color:text};
  423. }
  424.  
  425. blockquote {
  426. background-color:rgba(255,255,255,0);
  427. padding:0px 6px 0px 12px;
  428. margin:4px 2px 2px 2px;
  429. border-left:1px solid {color:icon border};
  430. }
  431.  
  432. blockquote img {
  433. max-width:100%;
  434. height:auto;
  435. }
  436.  
  437. b, strong {
  438. color:{color:bold};
  439. font-weight:bold;
  440. }
  441.  
  442. i, em {
  443. color:{color:italic};
  444. }
  445. u, s, strike {
  446. color:{color:underline};
  447. }
  448.  
  449. small,sup,sub {
  450. font-size:{text:Text Size}}
  451.  
  452. big {
  453. font-size:11px;}
  454.  
  455. pre {
  456. border:1px solid {color:sidebar bg};
  457. opacity:0.65;
  458. border-radius:5px;
  459. padding:20px;
  460. white-space: pre-wrap; /* css-3 */
  461. white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
  462. white-space: -pre-wrap; /* Opera 4-6 */
  463. white-space: -o-pre-wrap; /* Opera 7 */
  464. word-wrap: break-word; /* Internet Explorer 5.5+ */}
  465.  
  466. pre b, pre strong{
  467. color:{color:text};
  468. }
  469.  
  470. .entries ul {
  471. padding-left:6px;
  472. margin-left:20px;
  473. margin-right:20px;
  474. }
  475.  
  476. .entries ol {
  477. padding-left:3px;
  478. margin-left:20px;
  479. margin-right:20px;
  480. text-align:justify;
  481. }
  482. .entries li {
  483. padding-left:3px;
  484. margin-left:6px;
  485. text-align:justify;
  486. margin-bottom:10px;
  487. }
  488.  
  489.  
  490.  
  491. /* ╰ ° HEADER STUFF *° */
  492.  
  493. .header {
  494. background: url('{image:background}') no-repeat center center fixed;
  495. -webkit-background-size: cover;
  496. -moz-background-size: cover;
  497. -o-background-size: cover;
  498. background-size: cover;
  499. background-color:{color:background};
  500. height:100%;
  501. width:100%;
  502. position: absolute;
  503. {block:IfNoHeader}display:none;{/block:IfNoHeader}
  504. top: 0px;
  505. left:0px;
  506. opacity:1;
  507. z-index:99999999;
  508. }
  509. .headerbar {
  510. background: url('{image:background}') no-repeat center center fixed;
  511. -webkit-background-size: cover;
  512. -moz-background-size: cover;
  513. -o-background-size: cover;
  514. background-size: cover;
  515. background-color:none;
  516. {block:IfFullBG}
  517. background: none;
  518. background-color:{color:background};
  519. {/block:IfFullBG}
  520. height:50px;
  521. width:100%;
  522. position:fixed;
  523. top:0px;
  524. left:0px;
  525. z-index:999999;
  526. }
  527.  
  528. #headericon {
  529. display:static;
  530. {block:IfNoHeader}display:none;{/block:IfNoHeader}
  531. position:absolute;
  532. z-index:-9;
  533. padding:0px;
  534. top: -25px;
  535. left:45px;
  536. width:190px;
  537. height:190px;
  538. -webkit-transition: all .4s ease-out;
  539. -moz-transition: all .4s ease-out;
  540. -o-transition: all .4s ease-out;
  541. -ms-transition: all .4s ease-out;
  542. transition: all .4s ease-out;
  543. }
  544.  
  545.  
  546. #headericon img {
  547. width:auto;
  548. height:auto;
  549. background-color: none;
  550. overflow:hidden;
  551. padding:8px;
  552. border-radius: 50%;
  553. border:1px solid {color:headertitle};
  554.  
  555. }
  556.  
  557.  
  558. .headertitle {
  559. text-align:center;
  560. padding:8px;
  561. position:absolute;
  562. {block:IfNoHeader}display:none;{/block:IfNoHeader}
  563. width:50%;
  564. margin-left:auto;
  565. margin-right:auto;
  566. top:40%;
  567. left:30%;
  568. font-size:130px;
  569. text-transform:lowercase;
  570. line-height:50%;
  571. vertical-align:middle;
  572. opacity:1;
  573. word-spacing:0px;
  574. z-index:9999999999999;
  575. font-weight:500;
  576. color:{color:headertitle};
  577. text-shadow: 0px 0px 0.5px rgba(0,0,0,.2);
  578. font-family: {select:Title Font};
  579. -webkit-transform:translate(0px,0%) rotate(-3deg) scale(1);
  580. transform:translate(0px,0%) rotate(-3deg) scale(1);
  581. }
  582.  
  583.  
  584. .headertitle b {
  585. color:{color:headertitle};
  586. font-size:170px;
  587. font-weight:500;
  588. -webkit-transform:translate(0px,0%) rotate(-12deg) scale(1);
  589. transform:translate(0px,0%) rotate(-12deg) scale(1);
  590. }
  591.  
  592. .headertitle a {
  593. color:{color:headertitle};
  594. text-shadow:none;
  595. }
  596.  
  597.  
  598. /* ╰ ° NAVTAB STUFF *° */
  599.  
  600. .nav {
  601. position:absolute;
  602. top: 365px;
  603. left: 10px;
  604. height:60px;
  605. width:230px;
  606. {block:If400px}
  607. left: 20px;
  608. {/block:If400px}
  609. background: none;
  610. margin:0px;
  611. padding:4px;
  612. margin-bottom:-20px;
  613. border-radius:10px;
  614. border:0px solid {color:desc bg};
  615. z-index:999999;
  616. }
  617.  
  618. .nav a {
  619. width:60px;
  620. {block:If400px}
  621. width:60px;
  622. {/block:If400px}
  623. height:10px;
  624. font-size:7px;
  625. line-height:130%;
  626. vertical-align:middle;
  627. letter-spacing:1.5px;
  628. text-transform:uppercase;
  629. font-family: 'Raleway';
  630. padding:4px;
  631. margin:3px;
  632. text-align:center;
  633. font-weight:600;
  634. opacity:1.0;
  635. background:{color:link};
  636. color:{color:posts bg};
  637. border-radius:7px;
  638. text-shadow:none;
  639. display: inline-block;
  640. vertical-align: middle;
  641. -webkit-transform: translateZ(0);
  642. transform: translateZ(0);
  643. box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  644. -webkit-backface-visibility: hidden;
  645. backface-visibility: hidden;
  646. -moz-osx-font-smoothing: grayscale;
  647. -webkit-transition-duration: 0.3s;
  648. transition-duration: 0.3s;
  649. -webkit-transition-property: background;
  650. transition-property: background;
  651. box-shadow: inset 0 0 0 1px {color:link}, 0 0 1px rgba(0, 0, 0, 0);
  652. /* Hack to improve aliasing on mobile/tablet devices */
  653. -webkit-transition: all 0.3s ease;
  654. -moz-transition: all 0.3s ease;
  655. -o-transition: all 0.3s ease;
  656. }
  657. .nav a:hover, .nav a:focus, .nav a:active {
  658. background: {color:posts bg};
  659. color:{color:accent};
  660. box-shadow: inset 0 0 0 1px {color:accent}, 0 0 1px rgba(0, 0, 0, 0);
  661. /* Hack to improve aliasing on mobile/tablet devices */
  662. -webkit-transition: all 0.3s ease;
  663. -moz-transition: all 0.3s ease;
  664. -o-transition: all 0.3s ease;
  665. }
  666.  
  667. .nav .mn {
  668. position:absolute;
  669. right:0px;
  670. top:-50px;
  671. }
  672.  
  673.  
  674. .ntitle {
  675. text-align:left;
  676. padding:8px;
  677. position:absolute;
  678. top:-60px;
  679. left:10px;
  680. font-size:36px;
  681. text-transform:lowercase;
  682. line-height:100%;
  683. vertical-align:middle;
  684. opacity:1;
  685. word-spacing:0px;
  686. z-index:999999;
  687. font-weight:500;
  688. color:{color:title};
  689. text-shadow: 0px 0px 0.5px rgba(0,0,0,.2);
  690. font-family: {select:Title Font};
  691. -webkit-transform:translate(0px,0%) rotate(-3deg) scale(1);
  692. transform:translate(0px,0%) rotate(-3deg) scale(1);
  693. -webkit-transition: all 0.4s ease-out;
  694. -webkit-transition: all 0.4s ease-out;
  695. -moz-transition: all 0.4s ease-out;
  696. -o-transition: all 0.4s ease-out;
  697. }
  698.  
  699. .entries2:hover .ntitle {
  700. -webkit-transform:translate(-5px,0%) rotate(0deg) scale(1.05);
  701. transform:translate(-5px,0%) rotate(0deg) scale(1.05);
  702. -webkit-transition: all 0.4s ease-out;
  703. -webkit-transition: all 0.4s ease-out;
  704. -moz-transition: all 0.4s ease-out;
  705. -o-transition: all 0.4s ease-out;
  706. }
  707.  
  708.  
  709. .entries2:hover .nsubtitle {
  710. letter-spacing:1px;
  711. -webkit-transform:translate(-6px,0%) rotate(0deg);
  712. transform:translate(-6px,0%) rotate(0deg);
  713. -webkit-transition: all 0.4s ease-out;
  714. -webkit-transition: all 0.4s ease-out;
  715. -moz-transition: all 0.4s ease-out;
  716. -o-transition: all 0.4s ease-out;
  717. }
  718.  
  719.  
  720.  
  721. .nsubtitle {
  722. text-align:center;
  723. padding:8px;
  724. padding-left:15px;
  725. position:absolute;
  726. top:-20px;
  727. left:30px;
  728. padding-top:0px;
  729. font-size:8px;
  730. text-transform:uppercase;
  731. line-height:130%;
  732. vertical-align:middle;
  733. opacity:1;
  734. word-spacing:0px;
  735. z-index:9;
  736. font-weight:800;
  737. letter-spacing:0.5px;
  738. padding:1px;
  739. background:{color:accent};
  740. color:{color:title};
  741. text-shadow: 0px 0px 0.5px rgba(0,0,0,.2);
  742. font-family: 'Raleway';
  743. -webkit-transform:translate(0px,0%) rotate(-3deg);
  744. transform:translate(0px,0%) rotate(-3deg);
  745. -webkit-transition: all 0.4s ease-out;
  746. -webkit-transition: all 0.4s ease-out;
  747. -moz-transition: all 0.4s ease-out;
  748. -o-transition: all 0.4s ease-out;
  749. }
  750.  
  751.  
  752.  
  753. .updates {
  754. position:absolute;
  755. top: 35px;
  756. right:20px;
  757. width:100px;
  758. height:160px;
  759. {block:If400px}
  760. width:170px;
  761. height:160px;
  762. {/block:If400px}
  763. z-index:999;
  764. overflow:hidden;
  765. background:{color:desc bg};
  766. font-size:7.5px;
  767. letter-spacing:1px;
  768. text-align:left;
  769. line-height:250%;
  770. text-transform:uppercase;
  771. padding:10px;
  772. border-radius:5px;
  773. }
  774.  
  775. .updates b {
  776. font-weight:600;
  777. letter-spacing:1px;
  778. padding:2px;
  779. text-shadow:none;
  780. border-radius:3px;
  781. margin-right:3px;
  782. background:{color:link};
  783. color:{color:sidebar bg};
  784. }
  785.  
  786.  
  787. .updates h4 {
  788. padding:3px;
  789. margin-bottom:5px;
  790. font-size:13px;
  791. color:{color:underline};
  792. border-bottom:1px solid {color:posts bg};
  793. }
  794.  
  795.  
  796. h4::before{
  797. content:'●● ';
  798. font-family:'raleway';
  799. color:{color:underline};
  800. }
  801. .updates h4::before{
  802. content:'●● ';
  803. font-family:'raleway';
  804. color:{color:text};
  805. }
  806.  
  807.  
  808.  
  809. .z {
  810. position:absolute;
  811. top: 25px;
  812. left:20px;
  813. width:170px;
  814. height:240px;
  815. {block:If400px}
  816. width:200px;
  817. height:250px;
  818. {/block:If400px}
  819. overflow:auto;
  820. z-index:9;
  821. letter-spacing:0.5px;
  822. text-align:justify;
  823. text-transform:lowercase;
  824. padding:20px 20px 10px 20px;
  825. border-radius:5px;
  826. border:1px solid {color:icon border};
  827. }
  828.  
  829. .ff {
  830. overflow:auto;
  831. height:125px;
  832. }
  833.  
  834. .f {
  835. overflow:auto;
  836. height:200px;
  837. {block:If400px}
  838. height:210px;
  839. {/block:If400px}
  840. }
  841.  
  842. .z p {
  843. margin-bottom:10px;
  844. }
  845. .z xo, .z xx {
  846. font-weight:600;
  847. font-family:'glowies3';
  848. font-size:18px;
  849. padding:6px 4px 2px 4px;
  850. text-transform:uppercase;
  851. }
  852.  
  853. .z xo {
  854. float:right;
  855. text-align:right;
  856. margin-left:3px;
  857. color:{color:italic};
  858. }
  859. .z xx {
  860. float:left;
  861. text-align:left;
  862. margin-right:3px;
  863. padding-left:0px;
  864. color:{color:link};
  865. }
  866.  
  867. .m {
  868. position:absolute;
  869. top: 220px;
  870. right:-10px;
  871. width:180px;
  872. z-index:99999999;
  873. -webkit-transform: scale(0.8);
  874. transform:scale(0.8);
  875. {block:If400px}
  876. right:20px;
  877. -webkit-transform: scale(1);
  878. transform:scale(1);
  879. {/block:If400px}
  880. text-align:center;
  881. }
  882.  
  883. .mn {
  884. display:static;
  885. padding:4px;
  886. border:1px solid {color:icon border};
  887. background-color: {color:desc bg};
  888. overflow:hidden;
  889. margin:3px;
  890. width:36px;
  891. height:36px;
  892. border-radius: 50%;
  893. }
  894.  
  895. .mm {
  896. margin-top:15px;
  897. }
  898.  
  899.  
  900. .messages {
  901. position:absolute;
  902. bottom: 20px;
  903. right:20px;
  904. overflow:hidden;
  905. height:150px;
  906. width:90px;
  907. {block:If400px}
  908. height:140px;
  909. width:170px;
  910. {/block:If400px}
  911. z-index:99999;
  912. }
  913. .tw, .tw2 {
  914. width:75px;
  915. {block:If400px}
  916. width:120px;
  917. {/block:If400px}
  918. height:auto;
  919. padding:6px;
  920. font-size:8px;
  921. line-height:125%;
  922. text-align:left;
  923. background:{color:desc bg};
  924. border-radius:10px;
  925. margin-bottom:10px;
  926. }
  927. .tw {
  928. float:left;
  929. }
  930. .tw2 {
  931. background:{color:accent};
  932. color:{color:posts bg};
  933. float:right;
  934. }
  935.  
  936. .tw::after {content:"";position:relative;float:left;bottom:-12px;width:.5em;height:1em;border-right:.5em solid {color:desc bg};border-bottom-right-radius:1em .5em
  937. }
  938. .tw2::after {content:"";position:relative;float:right;bottom:-12px;width:.5em;height:1em;border-left:.5em solid {color:accent};border-bottom-left-radius:1em .5em;
  939. }
  940. .tw b {
  941. color:{color:underline};
  942. font-style:italic;
  943. }
  944. .tw2 b {
  945. color:{color:sidebar bg};
  946. font-style:italic;
  947. }
  948.  
  949.  
  950.  
  951. /* MUSES */
  952.  
  953.  
  954. #musearea{
  955. overflow-x:none;
  956. width: 300px;
  957. {block:If400px}
  958. width:350px;
  959. {/block:If400px}
  960. padding-top:5px;
  961. margin-bottom:50px;
  962. margin-right: auto;
  963. margin-left: auto;
  964. }
  965.  
  966. #musearea a.name{
  967. width: 180px;
  968. {block:If400px}
  969. width:220px;
  970. {/block:If400px}
  971. display:block;
  972. height:20px;
  973. font-size:36px;
  974. letter-spacing:0px;
  975. text-transform:lowercase;
  976. font-family:{select:title font};
  977. font-weight:400;
  978. text-align:right;
  979. padding:10px 40px 0px 0px;
  980. background:none;
  981. z-index:9999999;
  982. color:{color:title};
  983. margin-top:-80px;
  984. margin-left:20px;
  985. text-shadow:none;
  986. margin-bottom:10px;
  987. -webkit-transition: all 0.5s ease-in-out;
  988. -moz-transition: all 0.5s ease-in-out;
  989. -o-transition: all 0.5s ease-in-out;
  990. }
  991.  
  992.  
  993. #musearea a.name:hover{
  994. color:{color:accent};
  995. }
  996.  
  997. #museleft a.name {
  998. text-align:left;
  999. padding:10px 0px 0px 20px;
  1000. background:none;
  1001. color:{color:accent};
  1002. }
  1003. #museleft a.name:hover {
  1004. color:{color:title};
  1005. }
  1006.  
  1007.  
  1008. .muse {
  1009. display: block;
  1010. width: 230px;
  1011. {block:If400px}
  1012. width:300px;
  1013. {/block:If400px}
  1014. margin-top: 10px;
  1015. margin-bottom: 0px;
  1016. margin-right: auto;
  1017. margin-left: auto;
  1018. }
  1019.  
  1020. .musextra {
  1021. display:block;
  1022. position:relative;
  1023. top:-72px;
  1024. left:242px;
  1025. {block:If400px}
  1026. left:278px;
  1027. {/block:If400px}
  1028. width:12px;
  1029. margin-bottom:-70px;
  1030. -webkit-transition: all 0.5s ease;
  1031. -moz-transition: all 0.5s ease;
  1032. transition: all 0.5s ease;
  1033. }
  1034.  
  1035. .musextra a{
  1036. display:block;
  1037. width:11px;
  1038. height:11px;
  1039. border-radius:50%;
  1040. background-color:none;
  1041. border:1px solid {color:desc bg};
  1042. font-size:11px;
  1043. font-family:'icony';
  1044. color:{color:accent};
  1045. padding:5px;
  1046. margin:-5px;
  1047. line-height:100%;
  1048. text-shadow:none;
  1049. }
  1050. .musextra a:hover{
  1051. background-color:{color:accent};
  1052. border:1px solid {color:accent};
  1053. color:{color:posts bg};
  1054. }
  1055.  
  1056. #museleft .musextra {
  1057. left:47px;
  1058. {block:If400px}
  1059. left:54px;
  1060. {/block:If400px}
  1061. top:-72px;
  1062. }
  1063. #museleft .musextra a {
  1064. color:{color:title};
  1065. }
  1066.  
  1067. #museleft .musextra a:hover{
  1068. background-color:{color:title};
  1069. border:1px solid {color:title};
  1070. color:{color:posts bg};
  1071. }
  1072.  
  1073. .musesubtitle{
  1074. position:relative;
  1075. top:-38px;
  1076. left:87px;
  1077. {block:If400px}
  1078. left:129px;
  1079. {/block:If400px}
  1080. text-align:right;
  1081. max-width:120px;
  1082. padding:2px;
  1083. font-size:8px;
  1084. text-transform:uppercase;
  1085. line-height:90%;
  1086. vertical-align:middle;
  1087. font-style:italic;
  1088. letter-spacing:1px;
  1089. word-spacing:1px;
  1090. padding-right:10px;
  1091. font-weight:500;
  1092. z-index:-9;
  1093. background:{color:accent};
  1094. color:{color:posts bg};
  1095. }
  1096. #museleft .musesubtitle {
  1097. position:relative;
  1098. left:80px;
  1099. text-align:left;
  1100. padding-right:2px;
  1101. padding-left:10px;
  1102. background-color:{color:title};
  1103. }
  1104.  
  1105.  
  1106. .museimg1, .museimg2 {
  1107. border-radius: 50%;
  1108. box-shadow: 1px 1px 1px rgba(250,250,250,0);
  1109. background-color: {color:sidebar bg};
  1110. }
  1111.  
  1112.  
  1113. .museimg1 {
  1114. width: 70px;
  1115. height:70px;
  1116. position:relative;
  1117. top:0px;
  1118. left:210px;
  1119. {block:If400px}
  1120. left:250px;
  1121. {/block:If400px}
  1122. margin: 4px;
  1123. z-index:999;
  1124. padding:5px;
  1125. border: 1px solid {color:navi};
  1126. }
  1127. .museimg2 {
  1128. width: 42px;
  1129. height: 42px;
  1130. position:relative;
  1131. top:15px;
  1132. left:165px;
  1133. {block:If400px}
  1134. left:200px;
  1135. {/block:If400px}
  1136. z-index:99999;
  1137. padding:4px;
  1138. background:none;
  1139. border: 1px solid {color:accent};
  1140. }
  1141.  
  1142. #museleft {
  1143. margin-left:20px;
  1144. }
  1145.  
  1146. #museleft .muse {
  1147. margin-left:10px;
  1148. }
  1149. #museleft .muse b {
  1150. color:{color:accent};
  1151. }
  1152.  
  1153. #museleft .museimg1 {
  1154. position:relative;
  1155. top:0px;
  1156. left:0px;
  1157. border: 1px solid {color:underline};
  1158. }
  1159.  
  1160. #museleft .museimg2 {
  1161. position:relative;
  1162. top:15px;
  1163. left:0px;
  1164. margin-left:-100px;
  1165. border: 1px solid {color:bold};
  1166. }
  1167.  
  1168.  
  1169. .c2 {
  1170. margin-left:60px;
  1171. }
  1172.  
  1173.  
  1174. .museinfo {
  1175. width: 170px;
  1176. {block:If400px}
  1177. width:220px;
  1178. {/block:If400px}
  1179. height: 80px;
  1180. font-size:7px;
  1181. letter-spacing:1px;
  1182. text-transform: uppercase;
  1183. overflow:auto;
  1184. display: block;
  1185. background-color: {color:desc bg};
  1186. padding: 4px 10px 4px 10px;
  1187. margin-left: 0px;
  1188. {block:If400px}
  1189. margin-left: -5px;
  1190. {/block:If400px}
  1191. margin-top: 20px;
  1192. border: 3px solid {color:desc bg};
  1193. border-radius:5px;
  1194. z-index:1;
  1195. }
  1196.  
  1197. #museleft .museinfo {
  1198. margin-left: 10px;
  1199. }
  1200.  
  1201.  
  1202.  
  1203. .muse b, #museleft b {
  1204. font-size:8.5px;
  1205. font-family:'raleway';
  1206. letter-spacing:0.5px;
  1207. font-weight:800;
  1208. text-shadow: 0px 0px 0.5px rgba(0,0,0,.2);
  1209. }
  1210. .muse a {
  1211. font-size:8.5px;
  1212. font-style:italic;
  1213. text-transform:uppercase;
  1214. color:{color:italic};
  1215. font-family:'raleway';
  1216. letter-spacing:0.5px;
  1217. font-weight:800;
  1218. word-spacing:3px;
  1219. text-shadow: 0px 0px 0.5px rgba(0,0,0,.2);
  1220. }
  1221.  
  1222. #museleft .muse a {
  1223. color:{color:underline};
  1224. }
  1225.  
  1226. .muse a:hover, #museleft .muse a:hover {
  1227. color:{color:linkhover};
  1228. }
  1229.  
  1230.  
  1231.  
  1232. /* ╰ ° TITLES N HEADINGS *° */
  1233.  
  1234. .title {
  1235. text-align:center;
  1236. padding:8px;
  1237. position:absolute;
  1238. top:95px;
  1239. left:10px;
  1240. font-size:{select:title font size};
  1241. text-transform:lowercase;
  1242. line-height:100%;
  1243. vertical-align:middle;
  1244. opacity:1;
  1245. word-spacing:0px;
  1246. z-index:999999;
  1247. font-weight:500;
  1248. color:{color:title};
  1249. text-shadow: 0px 0px 0.5px rgba(0,0,0,.2);
  1250. font-family: {select:Title Font};
  1251. -webkit-font-smoothing: antialiased;
  1252. -webkit-filter: blur(0.0000000001px);
  1253. -webkit-transform:translate(0px,0%) rotate(-3deg) scale(1);
  1254. transform:translate(0px,0%) rotate(-3deg) scale(1);
  1255. -webkit-transition: all 0.4s ease-out;
  1256. -webkit-transition: all 0.4s ease-out;
  1257. -moz-transition: all 0.4s ease-out;
  1258. -o-transition: all 0.4s ease-out;
  1259. }
  1260.  
  1261.  
  1262.  
  1263. .subtitle {
  1264. text-align:center;
  1265. padding:8px;
  1266. padding-left:15px;
  1267. position:absolute;
  1268. top:150px;
  1269. left:30px;
  1270. margin-top:{select:subtitle padding};
  1271. font-size:8px;
  1272. text-transform:uppercase;
  1273. line-height:100%;
  1274. vertical-align:middle;
  1275. opacity:1;
  1276. word-spacing:0px;
  1277. z-index:9;
  1278. font-weight:600;
  1279. color:{color:title};
  1280. text-shadow: 0px 0px 0.5px rgba(0,0,0,.2);
  1281. font-family: 'Raleway';
  1282. -webkit-font-smoothing: antialiased;
  1283. -webkit-filter: blur(0.0000000001px);
  1284. -webkit-transform:translate(0px,0%) rotate(-3deg);
  1285. transform:translate(0px,0%) rotate(-3deg);
  1286. -webkit-transition: all 0.4s ease-out;
  1287. -webkit-transition: all 0.4s ease-out;
  1288. -moz-transition: all 0.4s ease-out;
  1289. -o-transition: all 0.4s ease-out;
  1290. }
  1291.  
  1292.  
  1293. .subtitle b{
  1294. font-weight:800;
  1295. letter-spacing:0.5px;
  1296. padding:1px;
  1297. line-height:90%;
  1298. background:{color:accent};
  1299. color:{color:text};
  1300. }
  1301.  
  1302. .subtitle i {
  1303. padding:1px;
  1304. font-style:italic;
  1305. letter-spacing:1px;
  1306. line-height:90%;
  1307. font-weight:500;
  1308. color:{color:accent};
  1309. text-shadow: 0px 0px 0.5px rgba(0,0,0,.2);
  1310. }
  1311.  
  1312.  
  1313. h1 {
  1314. font-size:20px;
  1315. padding:5px;
  1316. margin:5px;
  1317. font-weight:800;
  1318. line-height:100%;
  1319. letter-spacing:0px;
  1320. text-transform:none;
  1321. font-family:{select:title font};
  1322. text-align:center;
  1323. color:{color:accent};
  1324. }
  1325.  
  1326. h2, h3 {
  1327. line-height:120%;
  1328. font-family:'glowies3';
  1329. text-shadow: 0px 0.5px 0px rgba(0,0,0,.1);
  1330. text-transform:uppercase;
  1331. margin-bottom:5px;
  1332. margin-top:5px;
  1333. }
  1334.  
  1335. h2 {
  1336. font-size:14px;
  1337. font-weight:800;
  1338. letter-spacing:-0.5px;
  1339. background:none;
  1340. text-align:right;
  1341. width:auto;
  1342. padding:4px;
  1343. color:{color:link};
  1344. }
  1345.  
  1346. .posts h3 {
  1347. background:{color:desc bg};
  1348. }
  1349.  
  1350.  
  1351. h3 {
  1352. font-weight:700;
  1353. color:{color:text};
  1354. font-size:8px;
  1355. padding:8px;
  1356. border-radius:5px;
  1357. text-align:center;
  1358. background:{color:posts bg};
  1359. }
  1360.  
  1361. h4 {
  1362. font-weight:700;
  1363. color:{color:accent};
  1364. font-size:18px;
  1365. padding:3px 3px 6px 3px;
  1366. border-bottom:1px solid {color:underline};
  1367. text-align:left;
  1368. text-transform:uppercase;
  1369. background:transparent;
  1370. margin-bottom:10px;
  1371. margin-top:0px;
  1372. font-family:'glowies3';
  1373. }
  1374.  
  1375. /* ╰ ° IMAGE FILTERS *° */
  1376.  
  1377. {block:IfGreyscale}
  1378.  
  1379. img {
  1380. -webkit-filter:grayscale(100%);
  1381.  
  1382. }
  1383.  
  1384. .html_photoset {
  1385. -webkit-filter: grayscale(100%);
  1386. }
  1387.  
  1388. {/block:IfGreyscale}
  1389.  
  1390. img {
  1391. max-width:100%;
  1392. height:auto;}
  1393.  
  1394.  
  1395. /* ╰ ° NAVIGATION *° */
  1396.  
  1397.  
  1398. /*----- Tab Links -----*/
  1399.  
  1400. /* Clearfix */
  1401. .tab-links:after {
  1402. display:inline-block;
  1403. clear:both;
  1404. content:'';
  1405.  
  1406. }
  1407.  
  1408. .tab-links li {
  1409. margin:0px;
  1410. display:inline-block;
  1411. list-style:none;
  1412. z-index:-999;
  1413. padding:0px;
  1414. }
  1415.  
  1416. .tab-links {
  1417. position:absolute;
  1418. top: 170px;
  1419. left: 10px;
  1420. height:150px;
  1421. width:30px;
  1422. background:none;
  1423. text-align:center;
  1424. margin:0px;
  1425. opacity:1;
  1426. padding:4px;
  1427. padding-top:16px;
  1428. border:0px solid {color:icon border};
  1429. z-index:0;
  1430. -webkit-transition: all 0.5s ease;
  1431. -moz-transition: all 0.5s ease;
  1432. -o-transition: all 0.5s ease;
  1433. }
  1434.  
  1435. .tab-links a {
  1436. width:14px;
  1437. height:14px;
  1438. display:block;
  1439. font-size:20px;
  1440. line-height:80%;
  1441. letter-spacing:0px;
  1442. text-align:center;
  1443. font-family: 'glowies3';
  1444. padding:4px;
  1445. margin:5px 0px;
  1446. opacity:1.0;
  1447. background:transparent;
  1448. color:{color:navi};
  1449. border-radius:50%;
  1450. border:1px solid transparent;
  1451. text-shadow:none;
  1452. text-transform:uppercase;
  1453. transform:rotate(0deg);
  1454. -webkit-transform:rotate(0deg);
  1455. -webkit-transition: all 0.3s ease;
  1456. -moz-transition: all 0.3s ease;
  1457. -o-transition: all 0.3s ease;
  1458. }
  1459.  
  1460. .tab-links a:hover, li.active a:hover{
  1461. -webkit-text-stroke: 1px {color:sidebar bg};
  1462. background:{color:accent};
  1463. color:{color:accent};
  1464. border:1px solid {color:accent};
  1465. transform:scale(1.4) rotate(10deg);
  1466. -webkit-transform:scale(1.4) rotate(10deg);
  1467. }
  1468.  
  1469.  
  1470.  
  1471.  
  1472. /* ╰ ° ICONS N STUFF *° */
  1473.  
  1474. #icon, #icon2 {
  1475. display:static;
  1476. position:absolute;
  1477. z-index:-999;
  1478. padding:0px;
  1479. top: 20px;
  1480. left:100px;
  1481. width:80px;
  1482. height:80px;
  1483. -webkit-transition: all .4s ease-out;
  1484. -moz-transition: all .4s ease-out;
  1485. -o-transition: all .4s ease-out;
  1486. -ms-transition: all .4s ease-out;
  1487. transition: all .4s ease-out;
  1488. }
  1489.  
  1490. #icon img, #icon2 img {
  1491. width:auto;
  1492. height:auto;
  1493. background-color: none;
  1494. overflow:hidden;
  1495. padding:4px;
  1496. border-radius: 50%;
  1497. border:1px solid {color:icon border};
  1498. }
  1499.  
  1500.  
  1501. #icon2 {
  1502. top: 45px;
  1503. left:60px;
  1504. width:50px;
  1505. height:50px;
  1506. }
  1507.  
  1508.  
  1509.  
  1510. /* ╰ ° ENTRIES *° */
  1511.  
  1512. .tabs {
  1513. width:100%;
  1514. margin-left:0px;
  1515. display:inline-block;
  1516. }
  1517.  
  1518. .bigcon {
  1519. width:500px;
  1520. {block:If400px}
  1521. width:600px;
  1522. {/block:If400px}
  1523. top:100%;
  1524. {block:IfNoHeader}top:0;{/block:IfNoHeader}
  1525. margin-top: 120px;
  1526. left:70%;
  1527. -webkit-transform:translate(-70%,0%);
  1528. transform:translate(-70%,0%);
  1529. position:absolute;
  1530. overflow-y:none;
  1531. overflow-x:none;
  1532. padding:0px;
  1533. opacity:0.95;
  1534. border-radius:0px 0px 5px 5px;
  1535. }
  1536.  
  1537. /*----- TAB CONTENT -----*/
  1538.  
  1539. .tab {
  1540. display:none;
  1541. }
  1542.  
  1543. .tab.active {
  1544. display:block;
  1545. }
  1546.  
  1547. .entries, .entries2 {
  1548. display:block;
  1549. width:355px;
  1550. {block:If400px}
  1551. width:455px;
  1552. {/block:If400px}
  1553. background:none;
  1554. margin-left:120px;
  1555. margin-top:0px;
  1556. position:sticky;
  1557. margin-bottom:450px;
  1558. {block:IfNoHeader}
  1559. margin-bottom:0px;{/block:IfNoHeader}
  1560. top: 100px;
  1561. left:120px;
  1562. background:none;
  1563. text-align:justify;
  1564. overflow-y:auto;
  1565. overflow-x:hidden;
  1566. padding: 0px 10px 0px 0px;
  1567. }
  1568.  
  1569. .entries2 {
  1570. top:100%;
  1571. position:-webkit-sticky;
  1572. position:sticky;
  1573. opacity:0.85;
  1574. height:450px;
  1575. margin-left:120px;
  1576. margin-bottom:200px;
  1577. background:{color:posts bg};
  1578. border-radius:5px;
  1579. -webkit-transition: all 0.5s ease;
  1580. -moz-transition: all 0.5s ease;
  1581. -o-transition: all 0.5s ease;
  1582. }
  1583. .entries3 {
  1584. top:100%;
  1585. position:-webkit-sticky;
  1586. position:sticky;
  1587. opacity:0.85;
  1588. height:330px;
  1589. margin-left:120px;
  1590. margin-bottom:320px;
  1591. margin-top:0px;
  1592. {block:IfNoHeader}
  1593. margin-top:120px;{/block:IfNoHeader}
  1594. background:{color:posts bg};
  1595. border-radius:5px;
  1596. -webkit-transition: all 0.5s ease;
  1597. -moz-transition: all 0.5s ease;
  1598. -o-transition: all 0.5s ease;
  1599. }
  1600. .posts:hover, .entries2:hover, .entries3:hover {
  1601. opacity:1;
  1602. }
  1603.  
  1604. .posts {
  1605. width: 300px;
  1606. {block:If400px}
  1607. width:400px;
  1608. {/block:If400px}
  1609. padding: 20px;
  1610. background: {color:posts bg};
  1611. margin-bottom:0px;
  1612. margin-left:15px;
  1613. margin-top:15px;
  1614. text-align:justify;
  1615. border-radius:5px;
  1616. opacity:0.85;
  1617. -webkit-transition: all 0.5s ease;
  1618. -moz-transition: all 0.5s ease;
  1619. -o-transition: all 0.5s ease;
  1620. }
  1621.  
  1622. #message {
  1623. padding:30px;
  1624. }
  1625.  
  1626.  
  1627. #tab {
  1628. padding:20px;
  1629. overflow:auto;
  1630. }
  1631.  
  1632.  
  1633. /* ╰ ° TABLE STUFF *° */
  1634.  
  1635.  
  1636. table, th, td {
  1637. border: 1px solid {color:desc bg};
  1638. }
  1639. th, td {
  1640. border-bottom: 1px solid {color:desc bg};
  1641. }
  1642.  
  1643. table {
  1644. width: 100%;
  1645. text-align: center;
  1646. table-layout: fixed;
  1647. }
  1648.  
  1649. th {
  1650. height: 12px;
  1651. text-align: center;
  1652. }
  1653.  
  1654. th, td {
  1655. padding:5px;
  1656. background-color:{color:posts bg};
  1657. }
  1658.  
  1659. .tablenav {
  1660. border-collapse: collapse;
  1661. width:200px;
  1662. margin-left:auto;
  1663. margin-right:auto;
  1664. }
  1665.  
  1666. .tablenav a {
  1667. display:block;
  1668. font-size:7px;
  1669. text-transform:uppercase;
  1670. font-weight:700;
  1671. text-align: center;
  1672. letter-spacing:1.5px;
  1673. }
  1674.  
  1675.  
  1676. /* ╰ ° DESCRIPTION *° */
  1677.  
  1678. .cont {
  1679. display: block;
  1680. position: fixed;
  1681. top: 135px;
  1682. left:27%;
  1683. width:245px;
  1684. height:370px;
  1685. background:{color:sidebar bg};
  1686. {block:Ifclearsidebarbg}
  1687. background:none;
  1688. {/block:Ifclearsidebarbg}
  1689. border-radius:5px;
  1690. opacity:0.85;
  1691. z-index:-9999999999;
  1692. -webkit-transition: all .4s ease-out;
  1693. -moz-transition: all .4s ease-out;
  1694. -o-transition: all .4s ease-out;
  1695. -ms-transition: all .4s ease-out;
  1696. transition: all .4s ease-out;
  1697. -webkit-font-smoothing: antialiased;
  1698. -webkit-filter: blur(0.0000000001px);
  1699. -moz-osx-font-smoothing: grayscale;
  1700. -webkit-transition-property: all;
  1701. transition-property: all;
  1702. -webkit-transition-duration: 0.3s;
  1703. transition-duration: 0.3s;
  1704. }
  1705.  
  1706. .description{
  1707. display:static;
  1708. position:relative;
  1709. top:175px;
  1710. left:53px;
  1711. width:170px;
  1712. height:150px;
  1713. padding:0px;
  1714. margin-bottom:-5px;
  1715. border: 0px solid {color:accent};
  1716. background:none;
  1717. -webkit-font-smoothing: antialiased;
  1718. -webkit-filter: blur(0.0000000001px);
  1719. -webkit-transform:translate(0px,0%);
  1720. transform:translate(0px,0%);
  1721. -webkit-transition: all 0.5s ease;
  1722. -moz-transition: all 0.5s ease;
  1723. -o-transition: all 0.5s ease;
  1724. box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  1725. -webkit-backface-visibility: hidden;
  1726. backface-visibility: hidden;
  1727. }
  1728.  
  1729.  
  1730.  
  1731. .description::before{
  1732. display:block;
  1733. content:'┐';
  1734. color:{color:icon border};
  1735. font-size:15px;
  1736. width:15px;
  1737. font-weight:300;
  1738. line-height:100%;
  1739. height:20px;
  1740. position:absolute;
  1741. top:-15px;
  1742. right:-15px;
  1743. z-index:99999;
  1744. }
  1745.  
  1746. .description::after{
  1747. display:block;
  1748. content:'└';
  1749. color:{color:icon border};
  1750. font-size:15px;
  1751. width:15px;
  1752. font-weight:300;
  1753. line-height:100%;
  1754. height:20px;
  1755. position:absolute;
  1756. bottom:-30px;
  1757. left:-15px;
  1758. z-index:99999;
  1759. }
  1760.  
  1761.  
  1762. #desc {
  1763. position:absolute;
  1764. top: 0;
  1765. left:0;
  1766. width:150px;
  1767. height:130px;
  1768. margin:0px;
  1769. text-transform:uppercase;
  1770. font-size:7px;
  1771. line-height:200%;
  1772. text-align:justify;
  1773. padding:5px 5px 15px 5px;
  1774. border:5px solid rgba(255,255,255,0);
  1775. overflow-y:auto;
  1776. overflow-x:none;
  1777. border-radius:5px;
  1778. background:{color:desc bg};
  1779. -webkit-font-smoothing: antialiased;
  1780. -webkit-filter: blur(0.0000000001px);
  1781. }
  1782.  
  1783.  
  1784.  
  1785.  
  1786. /* ╰ ° KEEP READING *° */
  1787.  
  1788. .readsummore{
  1789. position: relative;
  1790. padding: 20px 0;
  1791. width: 100%;
  1792. }
  1793.  
  1794. .readsummore a:link{
  1795. -webkit-transition: all 0.2s ease;
  1796. -moz-transition: all 0.2s ease;
  1797. -o-transition: all 0.2s ease;
  1798. transition: all 0.2s ease;
  1799. position: relative;
  1800. left: calc(50% - 47px);
  1801. padding: 4px 8px;
  1802. border: 1px solid {color:desc bg};
  1803. background: transparent;
  1804. border-radius:20px;
  1805. height:10px;
  1806. font-size:7px;
  1807. line-height:130%;
  1808. vertical-align:middle;
  1809. letter-spacing:1.5px;
  1810. text-transform:uppercase;
  1811. font-family: 'Raleway';
  1812. text-align:center;
  1813. font-weight:600;
  1814. text-shadow:none;
  1815. }
  1816. .readsummore a:hover{
  1817. background: {color:accent};
  1818. color: {color:posts bg};
  1819. }
  1820.  
  1821. /* ╰ ° PAGINATION *° */
  1822.  
  1823. #pagination {
  1824. padding:5px;
  1825. letter-spacing:1px;
  1826. text-transform:uppercase;
  1827. font-size:7.5px;
  1828. font-family:'glowies3';
  1829. text-align:center;
  1830. word-spacing:6px;
  1831. margin-top:0px;
  1832. width:150px;
  1833. position:absolute;
  1834. left:55px;
  1835. top:327px;
  1836. z-index:99999999;
  1837. -webkit-transition: all 0.5s ease;
  1838. -moz-transition: all 0.5s ease;
  1839. -o-transition: all 0.5s ease;
  1840. }
  1841.  
  1842. #pagination a{
  1843. font-weight:400;
  1844. letter-spacing:1.5px;
  1845. padding:2px;
  1846. text-shadow:none;
  1847. line-height:100%;
  1848. border-radius:3px;
  1849. border: 1px solid transparent;
  1850. background:{color:navi};
  1851. color:{color:sidebar bg};
  1852. }
  1853. #pagination a:hover{
  1854. border: 1px solid {color:desc bg};
  1855. background:{color:sidebar bg};
  1856. color:{color:linkhover};
  1857. }
  1858.  
  1859.  
  1860.  
  1861. /* ╰ ° CHAT CODE *° */
  1862.  
  1863. .convo li{
  1864. margin:0 0 5px;border-radius:1em;padding:.5em 10px;max-width:75%;clear:both;position:relative;
  1865.  
  1866. }
  1867.  
  1868. .user_1 b,.user_3 b,.user_5 b,.user_7 b,.user_9 b,.user_11 b,.user_13 b,.user_15 b,.user_17 b,.user_19 b,.user_21 b, .user_23 b,.user_25 b,.user_27 b,.user_29 b,.user_31 b, .user_33 b,.user_35 b,.user_37 b,.user_39 b, .user_41 b,.user_43 b,.user_45 b,.user_47 b,.user_49 b,.user_51 b,.user_53 b,.user_55 b,.user_57 b,.user_59 b{color:{color:posts bg};}
  1869.  
  1870. .user_2 b,.user_4 b,.user_6 b,.user_8 b,.user_10 b,.user_12 b, .user_14 b,.user_16 b,.user_18 b,.user_20 b,.user_22 b, .user_24 b,.user_26 b,.user_28 b,.user_30 b,.user_32 b, .user_34 b,.user_36 b,.user_38 b,.user_40 b, .user_42 b,.user_44 b,.user_46 b,.user_48 b,.user_50 b,.user_52 b, .user_54 b,.user_56 b,.user_58 b,.user_60 b{color:{color:text};}
  1871.  
  1872. .user_1,.user_3,.user_5,.user_7,.user_9,.user_11, .user_13,.user_15,.user_17,.user_19, .user_21,.user_23,.user_25,.user_27,.user_29, .user_31,.user_33,.user_35,.user_37,.user_39, .user_41,.user_43,.user_45,.user_47,.user_49,.user_51, .user_53,.user_55,.user_57,.user_59{
  1873. float:left;background:{color:accent};color:{color:posts bg};left:3px
  1874. }
  1875. .user_1::after,.user_3::after,.user_5::after,.user_7::after,.user_9::after,.user_11::after, .user_13::after,.user_15::after,.user_17::after,.user_19::after, .user_21::after,.user_23::after,.user_25::after,.user_27::after,.user_29::after, .user_31::after,.user_33::after,.user_35::after,.user_37::after,.user_39::after, .user_41::after,.user_43::after,.user_45::after,.user_47::after,.user_49::after,.user_51::after, .user_53::after,.user_55::after,.user_57::after,.user_59::after{
  1876. content:"";position:absolute;left:-.5em;bottom:0;width:.5em;height:1em;border-right:.5em solid {color:accent};border-bottom-right-radius:1em .5em
  1877.  
  1878. }
  1879. .user_2,.user_4,.user_6,.user_8,.user_10,.user_12, .user_14,.user_16,.user_18,.user_20,.user_22, .user_24,.user_26,.user_28,.user_30,.user_32, .user_34,.user_36,.user_38,.user_40, .user_42,.user_44,.user_46,.user_48,.user_50,.user_52, .user_54,.user_56,.user_58,.user_60{
  1880. right:3px;float:right;background-color:{color:desc bg};color:{color:text};
  1881.  
  1882. }
  1883. .user_2::after,.user_4::after,.user_6::after,.user_8::after,.user_10::after,.user_12::after, .user_14::after,.user_16::after,.user_18::after,.user_20::after, .user_22::after,.user_24::after,.user_26::after,.user_28::after,.user_30::after, .user_32::after,.user_34::after,.user_36::after,.user_38::after,.user_40::after, .user_42::after,.user_44::after,.user_46::after,.user_48::after,.user_50::after,.user_52::after, .user_54::after,.user_56::after,.user_58::after,.user_60::after{content:"";position:absolute;right:-.5em;bottom:0;width:.5em;height:1em;border-left:.5em solid {color:desc bg};border-bottom-left-radius:1em .5em;
  1884.  
  1885. }
  1886.  
  1887. .convo {
  1888. overflow: hidden;
  1889. list-style-type: none;
  1890. padding: 0;
  1891. margin: 0;
  1892. }
  1893.  
  1894.  
  1895. /* ╰ ° ASKS N ANSWERS *° */
  1896.  
  1897. #asker {
  1898. position:absolute;
  1899. right:45px;
  1900. width:auto;
  1901. display:inline;
  1902. padding:4px 8px 4px 8px;
  1903. margin-top:-30px;
  1904. margin-bottom:30px;
  1905. font-size:15px;
  1906. letter-spacing:0px;
  1907. text-transform:uppercase;
  1908. font-family: 'glowies3';
  1909. color: {color:linkhover};
  1910. background:{color:posts bg};
  1911. border:0px solid black;
  1912. }
  1913.  
  1914. #asker a {
  1915. color: {color:linkhover};
  1916. text-shadow:none;
  1917. }
  1918.  
  1919. #asker a:hover {
  1920. color: {color:desc bg};
  1921. }
  1922.  
  1923. #question {
  1924. width:272px;
  1925. {block:If400px}
  1926. width:372px;
  1927. {/block:If400px}
  1928. margin-left:-5px;
  1929. margin-top:0px;
  1930. margin-bottom:20px;
  1931. border:1px solid {color:desc bg};
  1932. padding:15px;
  1933. font-size:8px;
  1934. font-weight: 600;
  1935. text-align:center;
  1936. color: {color:text};
  1937. letter-spacing:0.5px;
  1938. text-transform:uppercase;
  1939. border-radius:5px;
  1940.  
  1941. }
  1942.  
  1943.  
  1944.  
  1945. /* ╰ ° QUOTES *° */
  1946.  
  1947. #quote {
  1948. text-align: center;
  1949. font-weight: 600;
  1950. line-height:180%;
  1951. opacity:0.6;
  1952. padding:15px;
  1953. z-index:0;
  1954. text-transform:uppercase;
  1955. font-family:'raleway';
  1956. letter-spacing: 1px;
  1957. padding-bottom: 10px;
  1958. background:{color:desc bg};
  1959. }
  1960.  
  1961. #quotesrc {
  1962. font-size:20px;
  1963. font-family: {select:title font};
  1964. letter-spacing:0.5px;
  1965. margin-right:40px;
  1966. margin-top:5px;
  1967. text-align:right;
  1968. display:block;
  1969. font-style:none;
  1970. z-index:999;
  1971. text-transform:lowercase;
  1972. color:{color:text};}
  1973. #quote:before {
  1974. content: "❝ ";
  1975. font-size:16px;
  1976. font-family: 'roboto', sans-serif ;
  1977. color:{color:underline};}
  1978. #quote:after {
  1979. content: " ❞";
  1980. font-size:16px;
  1981. font-family: 'roboto', sans-serif ;
  1982. color:{color:underline};}
  1983.  
  1984.  
  1985. /* ╰ ° TUNES *° */
  1986.  
  1987. .playerbuttonbg {
  1988. position: absolute;
  1989. left: 20px;
  1990. top: 20px;
  1991. width: 19px;
  1992. height: 19px;
  1993. background-color: #ffffff;
  1994. padding: 10px;
  1995. -webkit-border-radius: 40px;
  1996. -moz-border-radius: 40px;
  1997. border-radius: 40px;
  1998. opacity: .4;
  1999. filter: alpha(opacity=40);
  2000. -moz-opacity: 0.4;
  2001. -khtml-opacity: 0.4;
  2002. transition: opacity .7s ease-in-out;
  2003. -moz-transition: opacity .7s ease-in-out;
  2004. -webkit-transition: opacity .7s ease-in-out;
  2005. }
  2006.  
  2007. .playerbuttonbg:hover {
  2008. opacity: 1;
  2009. filter: alpha(opacity=100);
  2010. -moz-opacity: 1;
  2011. -khtml-opacity: 1;
  2012. }
  2013.  
  2014. .newplayerbutton {
  2015. position: relative;
  2016. width: 19px;
  2017. height: 19px;
  2018. overflow: hidden;
  2019. }
  2020.  
  2021. .playerbuttonhug {
  2022. position: absolute;
  2023. top: -18px;
  2024. left: -7px;
  2025. }
  2026.  
  2027. .tumblr_audio_player {
  2028. height: 90px;
  2029. width: 270px;
  2030. -moz-transform: scale(0.60, 0.60);
  2031. -webkit-transform: scale(0.60, 0.60);
  2032. -o-transform: scale(0.60, 0.60);
  2033. -ms-transform: scale(0.60, 0.60);
  2034. transform: scale(0.60, 0.60);
  2035. -moz-transform-origin: top left;
  2036. -webkit-transform-origin: top left;
  2037. -o-transform-origin: top left;
  2038. -ms-transform-origin: top left;
  2039. transform-origin: top left;
  2040. }
  2041.  
  2042. .audioimgwrapper {
  2043. position: absolute;
  2044. left: 0px;
  2045. top: 0px;
  2046. -webkit-border-radius: 40px;
  2047. -moz-border-radius: 40px;
  2048. border-radius: 40px;
  2049. overflow: hidden;
  2050. width: 79px;
  2051. height: 79px;
  2052. }
  2053.  
  2054. .audioimgwrapper img {
  2055. width: 100%;
  2056. height: auto;
  2057. -webkit-border-radius: 40px;
  2058. -moz-border-radius: 40px;
  2059. border-radius: 40px;
  2060. }
  2061.  
  2062. .trackdetails {
  2063. width: auto;
  2064. font-family:'raleway';
  2065. text-transform:uppercase;
  2066. font-weight:600;
  2067. display:inline-block;
  2068. margin-left: 90px;
  2069. padding:10px;
  2070. letter-spacing:1px;
  2071. min-height: 55px;
  2072. }
  2073. .trackdetails b{
  2074. font-weight:800;
  2075. }
  2076. .trackdetails i{
  2077. font-weight:800;
  2078. font-style:italic;
  2079. font-size:14px;
  2080. color:{color:posts bg};
  2081. padding:2px 5px 2px 5px;
  2082. margin-left:-5px;
  2083. margin-bottom:10px;
  2084. line-height:180%;
  2085. background:{color:accent};
  2086. letter-spacing:0px;
  2087. }
  2088.  
  2089. .audiowrapper {
  2090. position: relative;
  2091. display:inline-block;
  2092. margin-bottom:10px;
  2093. margin-left:45px;
  2094. {block:If400px}
  2095. margin-left:80px;
  2096. {/block:If400px}
  2097. }
  2098.  
  2099.  
  2100. /* ╰ ° NOTES *° */
  2101.  
  2102. .note {
  2103. color:{color:text};
  2104. text-transform:uppercase;
  2105. width:290px;
  2106. {block:If400px}
  2107. width:390px;
  2108. {/block:If400px}
  2109. font-style:normal;
  2110. letter-spacing:1px;
  2111. font-size: 7px;
  2112. text-align:left;
  2113. line-height:130%;
  2114. margin-left:-5px;}
  2115.  
  2116.  
  2117. .note a {
  2118. color:{color:link};
  2119. }
  2120.  
  2121. .note a:hover{
  2122. color:{color:linkhover};
  2123. }
  2124.  
  2125. .note li {
  2126. list-style-type:none;
  2127. padding:4px 15px 4px 15px;
  2128. text-align:left;
  2129. -moz-transition-duration:0.5s;
  2130. -webkit-transition-duration:0.5s;
  2131. -o-transition-duration:0.5s;}
  2132.  
  2133. .note img.avatar {
  2134. margin-right: 10px;
  2135. display:none;
  2136. width: 16px;
  2137. height: 16px;
  2138.  
  2139. }
  2140.  
  2141.  
  2142. /* ╰ ° TAGS N PERMALINKS *° */
  2143.  
  2144. .tags {
  2145. font-size:7px;
  2146. letter-spacing:1.5px;
  2147. padding-top:10px;
  2148. margin-top:-10px;
  2149. margin-bottom:0px;
  2150. margin-left:0px;
  2151. opacity:0;
  2152. width:300px;
  2153. text-transform:uppercase;
  2154. {block:If400px}
  2155. width:400px;
  2156. {/block:If400px}
  2157. padding:15px;
  2158. line-height:150%;
  2159. z-index:999;
  2160. text-align:center;
  2161. -webkit-transition: all 0.8s ease;
  2162. -moz-transition: all 0.8s ease;
  2163. transition: all 0.8s ease;
  2164.  
  2165. }
  2166. .tags:hover {
  2167. opacity:1;
  2168. margin-left:15px;
  2169. }
  2170.  
  2171. .tags a, .permalink a {
  2172. color:{color:link};
  2173. }
  2174.  
  2175. .tags a:hover{
  2176. color:{color:linkhover};
  2177. text-shadow:none;
  2178. }
  2179.  
  2180. .permalink a{
  2181. font-size:10px;
  2182. text-align:center;
  2183. line-height:100%;
  2184. padding:6px;
  2185. border-radius:50%;
  2186. text-shadow:none;
  2187. border:1px solid {color:posts bg};
  2188. background:{color:desc bg};
  2189. -webkit-transition: all 0.4s ease;
  2190. -moz-transition: all 0.4s ease;
  2191. transition: all 0.4s ease;
  2192. }
  2193.  
  2194.  
  2195. .permalink a:hover{
  2196. color: {color:posts bg};
  2197. background:{color:link};
  2198. border:1px solid {color:link};
  2199. }
  2200.  
  2201. .permalink {
  2202. width:300px;
  2203. {block:If400px}
  2204. width:400px;
  2205. {/block:If400px}
  2206. word-spacing:4px;
  2207. text-align:center;
  2208. margin-top:-15px;
  2209. margin-left:auto;
  2210. margin-right:auto;
  2211. margin-bottom:-5px;
  2212. text-transform:none;
  2213. font-family:'icony';
  2214. color:{color:text};
  2215. padding:3px;
  2216. opacity:1;
  2217. }
  2218.  
  2219.  
  2220.  
  2221.  
  2222. /* ╰ ° COPYRIGHT - DON'T_TOUCH_THIS.MP3 *° */
  2223.  
  2224. .credit, .credit a {
  2225. position:fixed;
  2226. left:10px;
  2227. bottom:10px;
  2228. width:11px;
  2229. height:11px;
  2230. border-radius:50%;
  2231. background-color:{color:posts bg};
  2232. border:1px solid {color:posts bg};
  2233. font-size:11px;
  2234. color:{color:text};
  2235. letter-spacing:1px;
  2236. padding:5px;
  2237. line-height:100%;
  2238. opacity:0.75;
  2239. -webkit-transition: all 0.5s ease;
  2240. -moz-transition: all 0.5s ease;
  2241. transition: all 0.5s ease;
  2242. }
  2243. .credit i{
  2244. font-family:'icony';
  2245. font-style:normal;
  2246. color:{color:text};
  2247. -webkit-transition: all 0.5s ease;
  2248. -moz-transition: all 0.5s ease;
  2249. transition: all 0.5s ease;
  2250. }
  2251.  
  2252. .credit a:hover {
  2253. opacity:1;
  2254. background:none;
  2255. color:{color:posts bg};
  2256. }
  2257.  
  2258. .credit a:hover i{
  2259. color:{color:posts bg};
  2260. text-shadow:none;
  2261. -webkit-transition: all 0.5s ease;
  2262. -moz-transition: all 0.5s ease;
  2263. transition: all 0.5s ease;
  2264. }
  2265.  
  2266. .credit:hover {
  2267. opacity:1;
  2268. background:none;
  2269. color:{color:posts bg};
  2270. }
  2271. .credit a span{
  2272. width: 45px;
  2273. height: auto;
  2274. padding: 3px;
  2275. left: 0%;
  2276. margin-left: 15px;
  2277. font-weight: 400;
  2278. font-size:6.5px;
  2279. text-align: center;
  2280. border: 4px solid {color:posts bg};
  2281. background-color:{color:posts bg};
  2282. text-indent: 0px;
  2283. text-transform:uppercase;
  2284. border-radius: 5px;
  2285. position: absolute;
  2286. color:{color:text};
  2287. pointer-events: none;
  2288. opacity: 0;
  2289. text-shadow:none;
  2290. transition: all 0.3s ease-in-out;
  2291. -webkit-transform: translate3d(20px,20px,0px) rotate(45deg);
  2292. transform: translate3d(20px,20px,0px) rotate(45deg);
  2293. }
  2294. .credit a span:before,
  2295. .credit a span:after{
  2296. content: '';
  2297. position: absolute;
  2298. bottom: -10px;
  2299. left: 50%;
  2300. margin-left: -21px;
  2301. width: 0;
  2302. height: 0;
  2303. border-left: 6px solid transparent;
  2304. border-right: 6px solid transparent;
  2305. border-top: 6px solid {color:posts bg};
  2306. }
  2307.  
  2308. .credit a:hover span{
  2309. opacity: 0.9;
  2310. -webkit-transform: translate3d(-20px,-55px,0px) rotate(0deg);
  2311. transform: translate3d(-20px,-55px,0px) rotate(0deg);
  2312. }
  2313.  
  2314. .credit span b{
  2315. font-style:none;
  2316. font-family:'glowies5';
  2317. font-weight:800;
  2318. text-transform:lowercase;
  2319. letter-spacing:0.5px;
  2320. font-size:19px;
  2321. }
  2322.  
  2323.  
  2324. {CustomCSS}</style>
  2325.  
  2326.  
  2327. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  2328. <script src="http://static.tumblr.com/2b2izpj/cB7ogqs8l/jquery.initialize.js"></script>
  2329.  
  2330. <script>
  2331. $(document).ready(function(){
  2332. // un-uglify new tumblr controls by magnusthemes@tumblr
  2333. $(".tmblr-iframe--unified-controls").initialize(function(){
  2334. var originalURL = $(this).attr("src").split("useThemeColors");
  2335. var srcpart = originalURL[1].split("scrollHeader")[1];
  2336. var newURL = originalURL[0] + 'useThemeColors":false, "scrollHeader' + srcpart;
  2337. $(this).attr("src", newURL);
  2338. });
  2339. $(".tmblr-iframe--loaded").initialize(function(){
  2340. $(this).appendTo("div#tumblr-controls");
  2341. });
  2342. });
  2343. </script>
  2344.  
  2345.  
  2346. </head><body>
  2347.  
  2348.  
  2349.  
  2350. <div id="tumblr-controls"></div>
  2351.  
  2352.  
  2353. <div class="headertitle"><div id="headericon"><img src="{image:header icon}" class="hvr-grow-rotate"></div><a title="scroll down!">{text:header title}</a></div>
  2354. <div class="header"></div>
  2355. <div class="headerbar"></div>
  2356.  
  2357.  
  2358.  
  2359. <div class="cont">
  2360.  
  2361. <div class="title">{text:title}</div>
  2362. <div class="subtitle">{text:subtitle}</div>
  2363.  
  2364. <div id="icon"><img src="{image:side icon}" class="hvr-grow-rotate"></div><div id="icon2"><img src="{image:side icon2}" class="hvr-grow-rotate"></div>
  2365.  
  2366. <div class="tabs">
  2367. <ul class="tab-links">
  2368. <li class="active"><a href="/" title="{text:tab 1 title}">a</a></a></li>
  2369. <li><a href="#tab2" title="{text:tab 2 title}">b</a></li>
  2370. <li><a href="#tab3" title="{text:tab 3 title}">c</a></li>
  2371. <li><a href="#tab4" title="{text:tab 4 title}">d</a></li>
  2372. </ul>
  2373.  
  2374. <div class="description">
  2375. <div id="desc">{Description}</div>
  2376. </div>
  2377.  
  2378. </div>
  2379.  
  2380.  
  2381.  
  2382. <div id="pagination">{block:Pagination} {block:PreviousPage}<a href="{PreviousPage}">sink</a>{/block:PreviousPage} {block:NextPage}<a href="{NextPage}">swim</a>{/block:NextPage}{/block:Pagination}
  2383. </div>
  2384.  
  2385. </div>
  2386.  
  2387.  
  2388.  
  2389. <div class="bigcon">
  2390.  
  2391.  
  2392. <!-- --------------------------- TABS -------------------------- -->
  2393.  
  2394. <div class="tabs">
  2395.  
  2396. <!-- --------------------------- TAB 1 -------------------------- -->
  2397.  
  2398. <div id="tab1" class="tab active">
  2399. <div class="entries">
  2400. {block:Posts}
  2401. <div class="posts">
  2402.  
  2403. {block:Text}<h1>{block:Title}{Title}{/block:Title}</h1>{Body}{/block:Text}
  2404.  
  2405. {block:Photo}<center>{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}</center>{block:Caption}{Caption}{/block:Caption}
  2406. {/block:Photo}
  2407.  
  2408. {block:Photoset}{Photoset}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  2409.  
  2410. {block:Link}<h1><a href="{URL}" {Target}>{Name}</a></h1>{block:Description}{Description}{/block:Description}{/block:Link}
  2411.  
  2412. {block:Quote}<div id="quote">{Quote}</div><br>{block:Source}<div id="quotesrc">{Source}</div>{/block:Source}{/block:Quote}
  2413.  
  2414.  
  2415. {block:AudioPlayer}
  2416. <div class="audiowrapper">
  2417. {block:AlbumArt}
  2418. <div class="audioimgwrapper"><img src="{AlbumArtURL}"></div>
  2419. {/block:AlbumArt}
  2420.  
  2421. <div class="playerbuttonbg">
  2422. <div class="newplayerbutton">
  2423. <div class="playerbuttonhug">
  2424.  
  2425. {AudioPlayerWhite}
  2426.  
  2427. </div>
  2428. </div>
  2429. </div>
  2430.  
  2431. <div class="trackdetails">
  2432.  
  2433. {block:TrackName}<i>{TrackName}</i>{/block:TrackName}<br/>
  2434. {block:Artist}<b>Artist:</b> {Artist}{/block:Artist}<br/>
  2435. {block:Album}<b>Album:</b> {Album}{/block:Album}
  2436.  
  2437. </div>
  2438. </div>
  2439. {block:Caption}{Caption}{/block:Caption}
  2440. {/block:AudioPlayer}
  2441.  
  2442.  
  2443.  
  2444. {block:Video}{Video-250}
  2445. {block:Caption}{Caption}{/block:Caption}
  2446. {/block:Video}
  2447.  
  2448. {block:Chat}
  2449. {block:Title}
  2450. <h2>{Title}</h2>{/block:Title}<br>
  2451. <ul class="convo">{block:Lines}<li class="line_{Alt} user_{UserNumber}">{block:Label}<b>{Label}</b>{/block:Label}
  2452. {Line}</li>{/block:Lines}</ul>
  2453. {/block:Chat}
  2454.  
  2455. {block:Answer}<div id="question">{Question}</div><div id="asker">{Asker}</div>{Answer}{/block:Answer}
  2456.  
  2457. {block:More}<div class="readsummore"><a href="{Permalink}" class="more-btn">Read More</a></div>{/block:More}
  2458.  
  2459. </div>
  2460.  
  2461.  
  2462. {block:Date}
  2463. <div class="permalink">
  2464. <a class="hvr-push" href="{Permalink}" title="{TimeAgo}">l</a>{block:RebloggedFrom} <a class="hvr-push" href="{ReblogParentURL}" title="via">P</a>{/block:RebloggedFrom} <a class="hvr-push" href="{Permalink}" title="{NoteCount} notes">X</a> <a class="hvr-push" href="{ReblogURL}" title="reblog">*</a>{/block:permalinkpage}
  2465. </div>
  2466. {/block:Date}
  2467.  
  2468.  
  2469.  
  2470.  
  2471. {block:HasTags}<div class="tags">{block:Tags} <a href="{TagUrl}"><span class="lnr lnr-tag"></span> {Tag}</a>{/block:Tags}</div>{/block:HasTags}
  2472.  
  2473. {block:PostNotes}
  2474. <div class="note">
  2475. {PostNotes}
  2476. </div>
  2477. {/block:PostNotes}
  2478.  
  2479. <!-- {block:NoRebloggedFrom}
  2480. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  2481. {/block:NoRebloggedFrom} -->
  2482.  
  2483. {block:ContentSource}<!-- {SourceURL}
  2484. {block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  2485. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  2486. {/block:ContentSource}
  2487.  
  2488.  
  2489. {/block:Posts}
  2490.  
  2491. </div><!---end of tab1--->
  2492. </div><!---end of tab--->
  2493.  
  2494.  
  2495. <!-- -------------------------- TAB 2 -------------------------- -->
  2496.  
  2497.  
  2498. <div id="tab2" class="tab">
  2499. <div class="entries3">
  2500. <div id="message">
  2501. <h4>{text:askbox title}</h4>
  2502. <iframe frameborder="0" scrolling="no" width="100%" height="210" src="http://www.tumblr.com/ask_form/{text:username}.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]-->
  2503. </div>
  2504. </div>
  2505. </div>
  2506.  
  2507.  
  2508. <!-- -------------------------- TAB 3 -------------------------- -->
  2509.  
  2510. <div id="tab3" class="tab">
  2511. <div class="entries2">
  2512. <div id="tab">
  2513.  
  2514.  
  2515. <div class="updates">
  2516. <h4>updates</h4>
  2517. <div class="ff">
  2518. <b>02/27:</b> update here<br>
  2519. <b>03/05:</b> more updates<br>
  2520. <b>04/20:</b> hey this overflows too<br>
  2521. <b>06/11:</b> wow! another update<br>
  2522. <b>02/27:</b> update here<br>
  2523. <b>03/05:</b> more updates<br>
  2524. <b>06/11:</b> wow! another update<br>
  2525. <b>04/20:</b> hey this overflows too
  2526. </div>
  2527. </div>
  2528.  
  2529. <div class="nav">
  2530.  
  2531. <div class="ntitle">{text:navtitle}</div>
  2532. <div class="nsubtitle">{text:navsubtitle}</div>
  2533. <img class="hvr-push mn" src="{image:tab icon4}">
  2534.  
  2535. <a href="{text:link 1 url}">{text:link 1 title}</a>
  2536. <a href="{text:link 2 url}">{text:link 2 title}</a>
  2537. <a href="{text:link 3 url}">{text:link 3 title}</a>
  2538. <a href="{text:link 4 url}">{text:link 4 title}</a>
  2539. <a href="{text:link 5 url}">{text:link 5 title}</a>
  2540. <a href="{text:link 6 url}">{text:link 6 title}</a>
  2541. <a href="{text:link 7 url}">{text:link 7 title}</a>
  2542. <a href="{text:link 8 url}">{text:link 8 title}</a>
  2543. <a href="{text:link 9 url}">{text:link 9 title}</a>
  2544. </div>
  2545.  
  2546. <div class="z">
  2547. <h4>more stuff</h4>
  2548. <div class="f">
  2549. <p><xo>a.</xo> The key is to drink coconut, fresh coconut, trust me. The weather is amazing, walk with me through the pathway of more success. Take this journey with me, Lion! Major key, don’t fall for the trap, stay focused. </p>
  2550. <p><xx>b.</xx>It’s the ones closest to you that want to see you fail. Let me be clear, you have to make it through the jungle to make it to paradise, that’s the key, Lion! Bless up. Eliptical talk. Don’t ever play yourself. Fan luv. </p>
  2551. <p><xo>c.</xo>The weather is amazing, walk with me through the pathway of more success. Take this journey with me, Lion! How’s business? Boomin.</p>
  2552. </div>
  2553. </div>
  2554.  
  2555. <div class="m">
  2556. <img class="hvr-push mn" src="{image:tab icon}">
  2557. <img class="hvr-push mn mm" src="{image:tab icon2}">
  2558. <img class="hvr-push mn" src="{image:tab icon3}">
  2559. </div>
  2560.  
  2561.  
  2562. <div class="messages">
  2563.  
  2564. <!----- START OF RIGHT BUBBLE ----->
  2565. <div class="tw2">so this is a message thing</div>
  2566. <!----- END OF RIGHT BUBBLE ----->
  2567. <!----- START OF LEFT BUBBLE ----->
  2568. <div class="tw">keep it short n simple so it looks nice</div>
  2569. <!----- END OF LEFT BUBBLE ----->
  2570. <!----- START OF RIGHT BUBBLE ----->
  2571. <div class="tw2">this doesn't overflow so just a heads up!!</div>
  2572. <!----- END OF RIGHT BUBBLE ----->
  2573.  
  2574. </div>
  2575.  
  2576.  
  2577.  
  2578. </div>
  2579. </div>
  2580. </div>
  2581.  
  2582.  
  2583. <!-- -------------------------- TAB 4 -------------------------- -->
  2584.  
  2585. <div id="tab4" class="tab">
  2586. <div class="entries2">
  2587. <div id="tab">
  2588.  
  2589.  
  2590.  
  2591.  
  2592.  
  2593. <!---------------------- START OF NEW MUSE SECTION ------------------>
  2594.  
  2595. <div id="musearea">
  2596.  
  2597.  
  2598.  
  2599. <img class="museimg1" src="https://68.media.tumblr.com/3ff398ddbc95c19eb0c811d2e0f30e2e/tumblr_inline_osls6r7E2Q1up84fh_540.png"> <!------- THE BIGGER IMAGE ------>
  2600.  
  2601. <img class="museimg2" src="https://68.media.tumblr.com/318d7dccf9cd8b5cb4af6968d627d2a1/tumblr_inline_osls66tr3e1up84fh_540.png"><!------- THE SMALL IMAGE ------>
  2602.  
  2603. <div class="musesubtitle">label here</div>
  2604.  
  2605.  
  2606. <a class="name">muse name</a><!------- TITLE HERE ------>
  2607.  
  2608.  
  2609.  
  2610. <div class="muse">
  2611. <div class="museinfo">
  2612.  
  2613. <p><b>STATISTICS—</b> you can put <u>anything</u> <a>here</a>, it'll <i>overflow</i> and stuff! Lorem Khaled Ipsum is a major key to success. To be successful you’ve got to work hard, to make history, simple, you’ve got to make it. Major key, don’t fall for the trap, stay focused. It’s the ones closest to you that want to see you fail. I told you all this before, when you have a swimming pool, do not use chlorine, use salt water, the healing, salt water is the healing. In life there will be road blocks but we will over come it. Let’s see what Chef Dee got that they don’t want us to eat. They will try to close the door on you, just open it. Special cloth alert.</p>
  2614.  
  2615.  
  2616. </div>
  2617. </div>
  2618.  
  2619. <div class="musextra">
  2620. <a href="URL HERE" title="MUSINGS">#</a><br>
  2621. <a href="URL HERE" title="INTERACTIONS">Z</a><br>
  2622. <a href="URL HERE" title="VISAGE">7</a>
  2623. </div>
  2624.  
  2625.  
  2626. </div><!--- end of musearea --->
  2627.  
  2628.  
  2629.  
  2630. <!------------------------- END OF MUSE SECTION ------------------------>
  2631.  
  2632.  
  2633.  
  2634. <!-------------------- START OF NEW MUSE LEFT SECTION ------------------>
  2635.  
  2636. <div id="musearea"><div id="museleft">
  2637.  
  2638.  
  2639. <img class="museimg1" src="https://68.media.tumblr.com/921c41288fbec96c2565581bbe420dd2/tumblr_inline_osls6pMeFe1up84fh_540.png"> <!------- THE BIGGER IMAGE ------>
  2640.  
  2641. <img class="museimg2" src="https://68.media.tumblr.com/4f54d79a473aaa5e2f422f605e4cba12/tumblr_inline_osls6u8uDE1up84fh_540.png"><!------- THE SMALL IMAGE ------>
  2642.  
  2643. <div class="musesubtitle">label here</div>
  2644.  
  2645. <div class="c2"><a class="name">muse name</a><!------- TITLE HERE ------>
  2646.  
  2647.  
  2648.  
  2649. <div class="muse">
  2650. <div class="museinfo">
  2651.  
  2652. <p><b>STATISTICS—</b> you can put <u>anything</u> <a>here</a>, it'll <i>overflow</i> and stuff! They never said winning was easy. Some people can’t handle success, I can. You see the hedges, how I got it shaped up? It’s important to shape up your hedges, it’s like getting a haircut, stay fresh. Bless up. A major key, never panic. Don’t panic, when it gets crazy and rough, don’t panic, stay calm. How’s business? Boomin. They key is to have every key, the key to open every door. I’m up to something. The other day the grass was brown, now it’s green because I ain’t give up. Never surrender.</p>
  2653.  
  2654.  
  2655. </div>
  2656. </div>
  2657. </div>
  2658.  
  2659.  
  2660. <div class="musextra">
  2661. <a href="URL HERE" title="MUSINGS">#</a><br>
  2662. <a href="URL HERE" title="INTERACTIONS">Z</a><br>
  2663. <a href="URL HERE" title="VISAGE">7</a>
  2664. </div>
  2665.  
  2666.  
  2667. </div></div><!--- end of musearea --->
  2668.  
  2669.  
  2670.  
  2671. <!----------------------- END OF MUSE LEFT SECTION -------------------->
  2672.  
  2673.  
  2674.  
  2675.  
  2676.  
  2677.  
  2678.  
  2679.  
  2680. <!--------////// INSTRUCTIONS /////-------------
  2681.  
  2682. To add a whole new section aligned to the RIGHT:
  2683. - copy the entire code from the START OF NEW MUSE SECTION
  2684. to END OF NEW MUSE SECTION
  2685.  
  2686. To add a whole new section aligned to the LEFT:
  2687. - copy the entire code from the START OF NEW MUSE LEFT SECTION
  2688. to END OF NEW MUSE LEFT SECTION
  2689.  
  2690. muse icon dimensions: 70x70px and 40x40px
  2691.  
  2692. if you have any more questions, you can reach me at nintcndos.tumblr.com
  2693.  
  2694. -------- END OF INSTRUCTIONS /////-------------->
  2695.  
  2696. </div><!--- end of tab --->
  2697. </div><!--- end of entries --->
  2698. </div><!--- end of tab4 --->
  2699. </div><!--- end of tabs --->
  2700. </div><!--- end of bigcon --->
  2701.  
  2702.  
  2703.  
  2704.  
  2705.  
  2706.  
  2707. <!------- PLEASE DON'T REMOVE THE CREDIT! --------->
  2708.  
  2709. <div class="credit"><a href="http://cli.re/gK8B4r"><span>theme by <b>jcnnie</b></span><i>=</i></a></div>
  2710.  
  2711.  
  2712.  
  2713.  
  2714. </body>
  2715. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!