deersprouts

╰ ° 011: lalisa — contained with header

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