API tools faq
paste
Advertisement
hermionemessi

Theme 02 v1 (revamp)

hermionemessi
Jul 2nd, 2016
1,476
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 52.28 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <!--
  4.  
  5. THEME #2 Reflection v1 (Revamp) by hermionegrangcr
  6.  
  7. THEME BLOG: grangersdesigns
  8.  
  9.  
  10. ♛ ♛ ♛
  11. ♛♛♛ ♛♛♛ ♛♛♛
  12. ♛ ♛ ♛ ♛ ♛ ♛ ♛ ♛
  13. ♛♛♛ ♥ G♚D ♥ ♛♛♛
  14. ♛ ♛ ♛ ♛ ♛ ♛ ♛ ♛
  15. ♛ ♛ ♛ ♛ ♛ ♛ ♛ © hermionegrangcr
  16.  
  17.  
  18. Important:
  19.  
  20. ♚ Basic rules apply (see https://hermionegrangcr.tumblr.com/rules)
  21.  
  22. ♚ This theme is optimised for Google Chrome and laptops of 13~15 in.
  23.  
  24. ♚ Tweak this to your preference as long as the credits remain intact.
  25.  
  26. ♚ If you encounter any issues or have any suggestions, please message me at https://grangersdesigns.tumblr.com/faq
  27.  
  28. -->
  29. <head>
  30. <meta charset="UTF-8" />
  31. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  32. <meta name="viewport" content="width=device-width, initial-scale=1">
  33. <link rel="shortcut icon" href="{Favicon}">
  34. <title>{Title}</title>
  35.  
  36. {Block:Description}
  37. <meta name="description" content="{MetaDescription}" />
  38. {/Block:Description}
  39.  
  40.  
  41. <meta name="if:inverted controls" content="1">
  42. <meta name="if:show tags" content="1">
  43. <meta name="if:infinite scroll" content="">
  44. <meta name="if: manual load" content="">
  45.  
  46.  
  47. <meta name="select:bg"content="simple_bg"title="Simple">
  48. <meta name="select:bg"content="gradient_bg"title="Gradient">
  49. <meta name="select:bg"content="image_bg"title="Image">
  50. <meta name="select:bg"content="grid_bg"title="Grid">
  51. <meta name="select:bg"content="white_bg"title="White">
  52. <meta name="select:bg"content="colour_bg"title="Colour">
  53.  
  54.  
  55. <meta name="select:post width"content="post500"title="500px"/>
  56. <meta name="select:post width"content="post450"title="450px"/>
  57. <meta name="select:post width"content="post400"title="400px"/>
  58. <meta name="select:post width"content="post350"title="350px"/>
  59. <meta name="select:post width"content="post300"title="300px"/>
  60. <meta name="select:post width"content="post250"title="250px"/>
  61.  
  62. <meta name="select:photoset gutter"content="5px"title="5px">
  63. <meta name="select:photoset gutter"content="10px"title="10px">
  64. <meta name="select:photoset gutter"content="2px"title="2px">
  65. <meta name="select:photoset gutter"content="1px"title="1px">
  66. <meta name="select:photoset gutter"content="0px"title="0px">
  67.  
  68.  
  69. <meta name="color:text" content="#000">
  70. <meta name="color:accent" content="#000">
  71. <meta name="color:highlight" content="#FEFEA4">
  72. <meta name="color:lightbox" content="#fff">
  73. <meta name="color:links" content="#ababab">
  74. <meta name="color:background" content="#fafafa">
  75. <meta name="color:grad1" content="#ababab">
  76. <meta name="color:grad2" content="#fafafa">
  77.  
  78. <meta name="text:info" content="Name, Age, MBTI">
  79. <meta name="text:updates" content="Write your updates here">
  80.  
  81. <meta name="text:Link1" content="Link1">
  82. <meta name="text:link1 URL" content="/">
  83. <meta name="text:Link2" content="Link2">
  84. <meta name="text:link2 URL" content="/">
  85. <meta name="text:Link3" content="Link3">
  86. <meta name="text:link3 URL" content="/">
  87. <meta name="text:Link4" content="Link4">
  88. <meta name="text:link4 URL" content="/">
  89. <meta name="text:Link5" content="Link5">
  90. <meta name="text:link5 URL" content="/">
  91. <meta name="text:Link6" content="Link6">
  92. <meta name="text:link6 URL" content="/">
  93. <meta name="text:Link7" content="Link7">
  94. <meta name="text:link7 URL" content="/">
  95. <meta name="text:Link8" content="Link8">
  96. <meta name="text:link8 URL" content="/">
  97. <meta name="text:Link9" content="Link9">
  98. <meta name="text:link9 URL" content="/">
  99.  
  100. <meta name="image:fullscreen bg" content="https://static.tumblr.com/a9986351fcfa95c8483ef6d67bbbdae6/xbvpdcx/Zi2ntp45i/tumblr_static_5e2qtth58jokow4wo8448cwcs.jpg">
  101. <meta name="image:grid bg" content="https://41.media.tumblr.com/bf8dfe2e6ff97f506306344fe021504e/tumblr_ndpupoDTro1rnmh3no2_250.png">
  102.  
  103. <link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,700' rel='stylesheet' type='text/css'>
  104. <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,700,100' rel='stylesheet' type='text/css'>
  105. <link href='https://fonts.googleapis.com/css?family=Karla:400,700' rel='stylesheet' type='text/css'>
  106.  
  107. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animsition/4.0.1/css/animsition.min.css">
  108.  
  109. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
  110. <script src="https://cdnjs.cloudflare.com/ajax/libs/animsition/4.0.1/js/animsition.min.js"></script>
  111.  
  112. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  113. <script src="//static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  114.  
  115. <script>
  116. $(document).ready(function() {
  117. $(".animsition").animsition({
  118. inClass: 'fade-in',
  119. outClass: 'fade-out',
  120. inDuration: 1500,
  121. outDuration: 800,
  122. linkElement: '.a-link',
  123. // e.g. linkElement: 'a:not([target="_blank"]):not([href^=#])'
  124. loading: true,
  125. loadingParentElement: 'body', //animsition wrapper element
  126. loadingClass: 'animsition-loading',
  127. loadingInner: '', // e.g '<img src="loading.svg" />'
  128. timeout: true,
  129. timeoutCountdown: 200,
  130. onLoadEvent: true,
  131. browser: [ 'animation-duration', '-webkit-animation-duration'],
  132. overlay : false,
  133. overlayClass : 'animsition-overlay-slide',
  134. overlayParentElement : 'body',
  135. transition: function(url){ window.location.href = url; }
  136. });
  137.  
  138. $('.photo-slideshow').pxuPhotoset({
  139. lightbox: true,
  140. rounded: false,
  141. gutter: '0px',
  142. borderRadius: '0px',
  143. photoset: '.photo-slideshow',
  144. photoWrap: '.photo-data',
  145. photo: '.pxu-photo'
  146. });
  147.  
  148. $(function() {
  149. $('.captions a').addClass('a-link');
  150. });
  151.  
  152. });
  153. </script>
  154.  
  155. <style type="text/css">
  156.  
  157. .animsition-loading {display:none;}
  158.  
  159. .tmblr-iframe.tmblr-iframe--controls.iframe-controls--desktop, .tmblr-iframe.tmblr-iframe--desktop-logged-in-controls.iframe-controls--desktop {z-index:11!important;}
  160.  
  161. {block:ifinvertedcontrols}
  162. .tmblr-iframe.tmblr-iframe--desktop-logged-in-controls.iframe-controls--desktop, #tumblr_controls { white-space:nowrap; -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%);}
  163.  
  164. {/block:ifinvertedcontrols}
  165.  
  166. #tumblr_teaser_follow,.tmblr-iframe--follow-teaser {z-index:8!important;}
  167.  
  168. ::selection {background:{color:highlight}; color:#000;}
  169. ::-moz-selection {background:{color:highlight};color:#000;}
  170. ::-webkit-selection {background:{color:highlight};color:#000;}
  171.  
  172. ::-webkit-scrollbar {
  173. width:2px;
  174. background:transparent;
  175. }
  176.  
  177. ::-webkit-scrollbar:horizontal {display:none;}
  178.  
  179. ::-webkit-scrollbar-thumb { background-color: {color:accent}; }
  180.  
  181. /*Tooltip*/
  182. #s-m-t-tooltip{
  183. position:absolute;
  184. margin-top: -10px !important;
  185. z-index:9999;
  186. padding:5px;
  187. color:#fff;
  188. background:{color:accent};
  189. font-size:12px;
  190.  
  191. }
  192.  
  193. *,
  194. *::before,
  195. *::after {
  196. box-sizing: inherit;
  197. -webkit-box-sizing: inherit;
  198. -moz-box-sizing: inherit;
  199. }
  200.  
  201. html {
  202. box-sizing: border-box;
  203. -webkit-box-sizing: border-box;
  204. -moz-box-sizing: border-box;
  205. }
  206.  
  207. html, body {height:100%;}
  208.  
  209. body {
  210. font-family:'karla',arial,sans-serif;
  211. overflow-x:hidden;
  212. margin:0;
  213. font-size:12px;
  214. line-height:160%;
  215. background-attachment:fixed;
  216. -webkit-font-smoothing: antialiased;
  217. -moz-osx-font-smoothing: grayscale;
  218. /* -webkit-animation:fadeIn ease-in 1s;
  219. -o-animation:fadeIn ease-in 1s;
  220. -moz-animation:fadeIn ease-in 1s;
  221. animation:fadeIn ease-in 1s;*/
  222. }
  223.  
  224. @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  225. @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  226. @-o-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  227. @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  228.  
  229. body.post400, body.post350 {line-height:150%;}
  230.  
  231. body.post300, body.post250 {font-size:10px;line-height:140%;}
  232.  
  233. a {
  234. color:{color:links};
  235. text-decoration:none;
  236. cursor:crosshair;
  237. transition: all 0.3s ease-in-out;
  238. -webkit-transition: all 0.3s ease-in-out;
  239. -moz-transition: all 0.3s ease-in-out;
  240. -o-transition: all 0.3s ease-in-out;
  241. }
  242.  
  243. a:hover {
  244. color:{color:highlight};
  245. transition: all 0.3s ease-in-out;
  246. -webkit-transition: all 0.3s ease-in-out;
  247. -moz-transition: all 0.3s ease-in-out;
  248. -o-transition: all 0.3s ease-in-out;
  249. }
  250.  
  251. a:focus, a:active {color:{color:highlight};}
  252.  
  253. b, strong {font-weight:bold;}
  254. i, em {font-style:italic;}
  255.  
  256. pre {
  257. white-space: pre-wrap;
  258. white-space: -moz-pre-wrap;
  259. white-space: -pre-wrap;
  260. white-space: -o-pre-wrap;
  261. word-wrap: break-word;
  262. background:#fafafa;
  263. padding:5px;
  264. }
  265.  
  266. blockquote {
  267. border-left: 1px #eaeaea solid;
  268. padding-left: 10px;
  269. margin-left: 10px;
  270. max-width: 100%;
  271. margin:0;
  272. }
  273.  
  274.  
  275. blockquote blockquote {
  276. border:none;
  277. padding: 0;
  278. margin: 0;
  279.  
  280. }
  281.  
  282. iframe, img:not(.lightbox-image), embed, object, video, pre, li, blockquote {max-width: 100% !important;}
  283.  
  284. /*bg options*/
  285. .gradient_bg {
  286. background: -webkit-linear-gradient(90deg, {color:grad1} 10%, {color:grad2} 90%); /* Chrome 10+, Saf5.1+ */
  287. background: -moz-linear-gradient(90deg, {color:grad1} 10%, {color:grad2} 90%); /* FF3.6+ */
  288. background: -ms-linear-gradient(90deg, {color:grad1} 10%, {color:grad2} 90%); /* IE10 */
  289. background: -o-linear-gradient(90deg, {color:grad1} 10%, {color:grad2} 90%); /* Opera 11.10+ */
  290. background: linear-gradient(90deg, {color:grad1} 10%, {color:grad2} 90%); /* W3C */
  291.  
  292. }
  293.  
  294. .image_bg {
  295. background-image: url('{image:fullscreen bg}');
  296. background-repeat: no-repeat;
  297. background-attachment: fixed;
  298. background-position: center;
  299. background-size:cover;
  300. }
  301.  
  302. .simple_bg {
  303. background:#efefef;
  304. }
  305.  
  306. .white_bg {background:#fff;}
  307.  
  308. .colour_bg {
  309. background:{color:background};
  310. }
  311.  
  312. .grid_bg {
  313. background:url('{image:grid bg}');
  314. }
  315.  
  316. /*header*/
  317.  
  318. .barca {
  319. position: fixed;
  320. top: 0;
  321. left: 0;
  322. width: 100%;
  323. z-index: 10;
  324. height: 120px;
  325. overflow: visible;
  326. -webkit-transition: height 0.3s;
  327. -moz-transition: height 0.3s;
  328. transition: height 0.3s;
  329. }
  330.  
  331.  
  332. .midget {
  333. height: 50px;
  334. -webkit-transition: height 0.3s;
  335. -moz-transition: height 0.3s;
  336. transition: height 0.3s;
  337. }
  338.  
  339. .midget ul.oe_menu > li > a {
  340. height:30px;
  341. transition: all 0.3s ease-in-out;
  342. -webkit-transition: all 0.3s ease-in-out;
  343. -moz-transition: all 0.3s ease-in-out;
  344. -o-transition: all 0.3s ease-in-out;
  345. }
  346.  
  347. .midget ul.oe_menu div {
  348. top:55px;
  349. transition: all 0.3s ease-in-out;
  350. -webkit-transition: all 0.3s ease-in-out;
  351. -moz-transition: all 0.3s ease-in-out;
  352. -o-transition: all 0.3s ease-in-out;
  353. }
  354.  
  355.  
  356. .oe_wrapper *{
  357. margin:0;
  358. padding:0;
  359. box-sizing:content-box;
  360. -webkit-box-sizing:content-box;
  361. -moz-box-sizing:content-box;
  362.  
  363. }
  364.  
  365. /*cont*/
  366.  
  367. #cont {
  368. width:500px;
  369. height:80px;
  370. backdrop-filter: blur(3px);
  371. -webkit-backdrop-filter: blur(3px);
  372. margin: 20px auto;
  373. position:relative;
  374. transition: all 0.3s ease-in-out;
  375. -webkit-transition: all 0.3s ease-in-out;
  376. -moz-transition: all 0.3s ease-in-out;
  377. -o-transition: all 0.3s ease-in-out;
  378. }
  379.  
  380. .post400 #cont, .post350 #cont {width:400px;height:70px;}
  381. .post300 #cont, .post250 #cont {width:300px;height:45px;}
  382.  
  383. .midget #cont {
  384. margin-top:0;
  385. height:50px;
  386. transition: all 0.3s ease-in-out;
  387. -webkit-transition: all 0.3s ease-in-out;
  388. -moz-transition: all 0.3s ease-in-out;
  389. -o-transition: all 0.3s ease-in-out;
  390. }
  391.  
  392. .post400 .midget #cont, .post350 .midget #cont {height:50px;}
  393.  
  394. .post300 .midget #cont, .post250 .midget #cont {height:30px;}
  395.  
  396. .gradient_bg #cont {
  397.  
  398. background: -webkit-linear-gradient(90deg, rgba({RGBcolor:grad1},0.5) 10%, rgba({RGBcolor:grad2},0.5) 90%); /* Chrome 10+, Saf5.1+ */
  399. background: -moz-linear-gradient(90deg, rgba({RGBcolor:grad1},0.5) 10%, rgba({RGBcolor:grad2},0.5) 90%); /* FF3.6+ */
  400. background: -ms-linear-gradient(90deg, rgba({RGBcolor:grad1},0.5) 10%, rgba({RGBcolor:grad2},0.5) 90%); /* IE10 */
  401. background: -o-linear-gradient(90deg, rgba({RGBcolor:grad1},0.5) 10%, rgba({RGBcolor:grad2},0.5) 90%); /* Opera 11.10+ */
  402. background: linear-gradient(90deg, rgba({RGBcolor:grad1},0.5) 10%, rgba({RGBcolor:grad2},0.5) 90%); /* W3C */
  403. }
  404.  
  405. .simple_bg #cont, .colour_bg #cont, .white_bg #cont{
  406. background:rgba(220,220,220,0.5);
  407. }
  408.  
  409. .grid_bg #cont {
  410. display: block;
  411. }
  412.  
  413. .grid_bg #cont::after {
  414. content: "";
  415. background:url('{image:grid bg}');
  416. opacity: 0.7;
  417. top: 0;
  418. left: 0;
  419. bottom: 0;
  420. right: 0;
  421. position: absolute;
  422. z-index: 9;
  423. }
  424.  
  425. .image_bg #cont {
  426. background:rgba(0,0,0,0.5);
  427. }
  428.  
  429. /* Top Menu */
  430. .oe_overlay{
  431. background:{color:accent};
  432. opacity:0;
  433. position:fixed;
  434. top:0px;
  435. left:0px;
  436. width:100%;
  437. height:100%;
  438. }
  439.  
  440. ul.oe_menu{
  441. list-style:none;
  442. position:absolute;
  443. margin:-1px auto;
  444. z-index:100 !important;
  445. width:500px;
  446. float:left;
  447. clear:both;
  448. }
  449.  
  450. .post400 ul.oe_menu, .post350 ul.oe_menu {width:400px;}
  451. .post300 ul.oe_menu, .post250 ul.oe_menu {width:300px;}
  452.  
  453. ul.oe_menu > li{
  454. width:100px;
  455. height:90px;
  456. padding-bottom:2px;
  457. float:left;
  458. position:relative;
  459. transition: all 0.3s ease-in-out;
  460. -webkit-transition: all 0.3s ease-in-out;
  461. -moz-transition: all 0.3s ease-in-out;
  462. -o-transition: all 0.3s ease-in-out;
  463.  
  464. }
  465.  
  466. .post400 ul.oe_menu > li, .post350 ul.oe_menu > li {width:80px;}
  467. .post300 ul.oe_menu > li, .post250 ul.oe_menu > li {width:60px;}
  468.  
  469. .midget ul.oe_menu > li {
  470. height:60px;
  471. transition: all 0.3s ease-in-out;
  472. -webkit-transition: all 0.3s ease-in-out;
  473. -moz-transition: all 0.3s ease-in-out;
  474. -o-transition: all 0.3s ease-in-out;
  475. }
  476.  
  477.  
  478. ul.oe_menu > li > a{
  479. display:block;
  480. background-color:{color:accent};
  481. color:#bababa;
  482. text-decoration:none;
  483. text-transform:uppercase;
  484. font-family:'Roboto', Arial, Sans-Serif;
  485. font-weight:bold;
  486. font-size:14px;
  487. letter-spacing:1.5px;
  488. width:calc((100% - 8px)/5));
  489. line-height:100%;
  490. height:60px;
  491. padding:10px;
  492. margin:1px;
  493. text-shadow:0px 0px 1px #000;
  494. opacity:0.8;
  495. white-space:nowrap;
  496. overflow:hidden;
  497. text-overflow: ellipsis;
  498. transition: all 0.3s ease-in-out;
  499. -webkit-transition: all 0.3s ease-in-out;
  500. -moz-transition: all 0.3s ease-in-out;
  501. -o-transition: all 0.3s ease-in-out;
  502. display:flex;
  503. display: -webkit-flex;
  504. display: -moz-flex;
  505. display: -ms-flex;
  506. align-items: center;
  507. -webkit-align-items:center;
  508. -ms-align-items:center;
  509. -webkit-justify-content:center;
  510. -ms-justify-content:center;
  511. justify-content: center;
  512. }
  513.  
  514. .post400 ul.oe_menu > li > a,.post350 ul.oe_menu > li > a {height:50px;font-size:12px;}
  515.  
  516. .post300 ul.oe_menu > li > a,.post250 ul.oe_menu > li > a {height:35px;font-size:10px;padding:5px;}
  517.  
  518. .post400 .midget ul.oe_menu > li > a, .post350 .midget ul.oe_menu > li > a {height:30px;}
  519. .post300 .midget ul.oe_menu > li > a, .post250 .midget ul.oe_menu > li > a {height:20px;}
  520.  
  521. ul.oe_menu > li > a.numfirst {margin-left:0;}
  522. ul.oe_menu > li > a.numlast {margin-right:0;}
  523.  
  524. ul.oe_menu > li > a:hover,
  525. ul.oe_menu > li.selected > a{
  526. background:#fff;
  527. color:{color:accent};
  528. opacity:1.0;
  529. transition: all 0.3s ease-in-out;
  530. -webkit-transition: all 0.3s ease-in-out;
  531. -moz-transition: all 0.3s ease-in-out;
  532. -o-transition: all 0.3s ease-in-out;
  533. }
  534. .oe_wrapper ul.hovered > li > a{
  535. background:#fff;
  536. text-shadow:0px 0px 1px #fff;
  537. }
  538.  
  539. ul.oe_menu div::-webkit-scrollbar {display:none; }
  540.  
  541. ul.oe_menu div::-webkit-scrollbar-thumb { display:none; }
  542.  
  543.  
  544. ul.oe_menu div{
  545. position:absolute;
  546. left:1px;
  547. background:#fff;
  548. display:none;
  549. overflow:auto;
  550. text-align:center;
  551. top:85px;
  552. width:460px;
  553. height:250px;
  554. padding:20px;
  555.  
  556. }
  557.  
  558. .post400 ul.oe_menu div, .post350 ul.oe_menu div {
  559. top:75px;width:380px;padding:10px;
  560. height:200px;
  561. transition: all 0.3s ease-in-out;
  562. -webkit-transition: all 0.3s ease-in-out;
  563. -moz-transition: all 0.3s ease-in-out;
  564. -o-transition: all 0.3s ease-in-out;
  565. }
  566.  
  567. .post400 .midget ul.oe_menu div, .post350 .midget ul.oe_menu div {
  568. top:55px;
  569. transition: all 0.3s ease-in-out;
  570. -webkit-transition: all 0.3s ease-in-out;
  571. -moz-transition: all 0.3s ease-in-out;
  572. -o-transition: all 0.3s ease-in-out;
  573. }
  574.  
  575. .post300 ul.oe_menu div, .post250 ul.oe_menu div {
  576. top:50px;width:280px;padding:10px;
  577. height:180px;
  578. transition: all 0.3s ease-in-out;
  579. -webkit-transition: all 0.3s ease-in-out;
  580. -moz-transition: all 0.3s ease-in-out;
  581. -o-transition: all 0.3s ease-in-out;
  582. }
  583.  
  584. .post300 .midget ul.oe_menu div, .post250 .midget ul.oe_menu div {
  585. top:35px;
  586. transition: all 0.3s ease-in-out;
  587. -webkit-transition: all 0.3s ease-in-out;
  588. -moz-transition: all 0.3s ease-in-out;
  589. -o-transition: all 0.3s ease-in-out;
  590. }
  591.  
  592. .selected div.nullbox {visibility:hidden;}
  593.  
  594. ul.oe_menu div.block1 {left:-100px;}
  595. ul.oe_menu div.block2 {left:-200px;}
  596. ul.oe_menu div.block3 {left:-300px;}
  597. ul.oe_menu div.block4 {left:-400px;}
  598.  
  599. .post400 ul.oe_menu div.block1, .post350 ul.oe_menu div.block1 {left:-80px;}
  600. .post400 ul.oe_menu div.block2, .post350 ul.oe_menu div.block2 {left:-160px;}
  601. .post400 ul.oe_menu div.block3, .post350 ul.oe_menu div.block3 {left:-240px;}
  602. .post400 ul.oe_menu div.block4, .post350 ul.oe_menu div.block4 {left:-320px;}
  603.  
  604. .post300 ul.oe_menu div.block1, .post250 ul.oe_menu div.block1 {left:-60px;}
  605. .post300 ul.oe_menu div.block2, .post250 ul.oe_menu div.block2 {left:-120px;}
  606. .post300 ul.oe_menu div.block3, .post250 ul.oe_menu div.block3 {left:-180px;}
  607. .post300 ul.oe_menu div.block4, .post250 ul.oe_menu div.block4 {left:-240px;}
  608.  
  609. ul.oe_menu div p {
  610. margin:1.12em;
  611. }
  612.  
  613.  
  614. .post400 ul.oe_menu div iframe#owl, .post350 ul.oe_menu div iframe#owl,.post300 ul.oe_menu div iframe#owl, .post250 ul.oe_menu div iframe#owl {height:230px !important;}
  615.  
  616. .post400 ul.oe_menu div.block1, .post350 ul.oe_menu div.block1,.post300 ul.oe_menu div.block1, .post250 ul.oe_menu div.block1 {height:280px !important;}
  617.  
  618.  
  619. ul.oe_menu div ul li a{
  620. text-decoration:none;
  621. color:#000;
  622. background:#fafafa;
  623. margin:2px 4px;
  624. padding:8px;
  625. display:block;
  626. font-size:1em;
  627. white-space:nowrap;
  628. overflow:hidden;
  629. text-overflow:ellipsis;
  630. text-transform:uppercase;
  631. font-family:'lato',arial,sans-serif;
  632. letter-spacing:1.2px;
  633. font-weight:300;
  634. transition: all 0.3s ease-in-out;
  635. -webkit-transition: all 0.3s ease-in-out;
  636. -moz-transition: all 0.3s ease-in-out;
  637. -o-transition: all 0.3s ease-in-out;
  638. }
  639.  
  640. .post400 ul.oe_menu div ul li a, .post350 ul.oe_menu div ul li a {font-size:12px;}
  641.  
  642.  
  643. .post300 ul.oe_menu div ul li a, .post250 ul.oe_menu div ul li a {font-size:10px;}
  644.  
  645. ul.oe_menu div ul li a:empty {visibility:hidden;}
  646.  
  647. ul.oe_menu div ul.oe_full{
  648. width:100%;
  649. }
  650.  
  651. .oe_full {
  652. text-align:center;
  653. text-transform:uppercase;
  654. font-size:1.2em;
  655. font-weight:300;
  656. }
  657.  
  658. .post400 .oe_full, .post350 .oe_full {font-size:1em;}
  659.  
  660. .post300 .oe_full, .post250 .oe_full {font-size:0.9em;}
  661.  
  662. ul.oe_menu div ul li a:hover{
  663. background:#000;
  664. color:#fff;
  665. transition: all 0.3s ease-in-out;
  666. -webkit-transition: all 0.3s ease-in-out;
  667. -moz-transition: all 0.3s ease-in-out;
  668. -o-transition: all 0.3s ease-in-out;
  669. }
  670. ul.oe_menu li ul{
  671. list-style:none;
  672. width:100%;
  673. }
  674.  
  675. ul.oe_menu div ul:not(.oe_full) li {width:30%;display:inline-block;}
  676.  
  677.  
  678. li.oe_heading{
  679. color:#000;
  680. font-size:1.5em;
  681. margin-bottom:10px;
  682. padding-bottom:6px;
  683. border-bottom:1px solid #ddd;
  684. font-family:'lato',arial,sans-serif;
  685. }
  686.  
  687.  
  688. /*posts*/
  689.  
  690. #entries {
  691. width:500px;
  692. position:relative;
  693. margin:auto;
  694. top:150px;
  695. }
  696.  
  697. .post300 #entries, .post250 #entries {top:120px;}
  698.  
  699.  
  700. .posts {
  701. color:{color:text};
  702. position:relative;
  703. margin:50px auto 80px auto;
  704. padding:20px;
  705. background:#fff;
  706. {block:ifmanualload}
  707. -webkit-animation:fadeIn ease-in 1s;
  708. -o-animation:fadeIn ease-in 1s;
  709. -moz-animation:fadeIn ease-in 1s;
  710. animation:fadeIn ease-in 1s;
  711. {/block:ifmanualload}
  712. }
  713.  
  714. .posts:first-of-type {margin-top:25px;}
  715. .posts:last-of-type {margin-bottom:40px;}
  716.  
  717.  
  718. .posts video, .posts .tumblr_video_container {
  719. width: 100% !important;
  720. height: auto !important;
  721. }
  722.  
  723. .posts img {
  724. max-width:100%;
  725. height:auto;
  726. }
  727.  
  728. .posts figure {margin:12px 0 12px 0 !important;}
  729.  
  730. .post500 .posts {width:500px;}
  731. .post450 .posts {width:450px;}
  732. .post400 .posts {width:400px;}
  733. .post350 .posts {width:350px;}
  734. .post300 .posts {width:300px;}
  735. .post250 .posts {width:250px;}
  736.  
  737. .post350 .posts {padding:15px;}
  738. .post250 .posts, .post300 .posts {padding:10px;}
  739.  
  740. .posts .captions a {
  741. border-bottom:1px solid #dedede;
  742. transition: all 0.3s ease-in-out;
  743. -webkit-transition: all 0.3s ease-in-out;
  744. -moz-transition: all 0.3s ease-in-out;
  745. -o-transition: all 0.3s ease-in-out;
  746. }
  747.  
  748. .posts .captions {word-wrap:break-word;}
  749.  
  750. .posts .captions a:hover, .posts .captions a:focus, .posts .captions a:active {
  751. color:{color:accent};
  752. border-bottom:1px solid {color:accent};
  753. transition: all 0.3s ease-in-out;
  754. -webkit-transition: all 0.3s ease-in-out;
  755. -moz-transition: all 0.3s ease-in-out;
  756. -o-transition: all 0.3s ease-in-out;
  757. }
  758.  
  759. .posts ul {padding-left:0;}
  760. .posts ol {padding-left:20px;}
  761. .posts ul li {list-style:none; padding:2px;text-indent:8px;}
  762. .posts ol li {padding:2px;}
  763. .posts ul li:before {content:"―"; position:relative; left:-8px;}
  764.  
  765. /*t*/
  766.  
  767. .titre {
  768. font-size:1.8em;
  769. color:#000;
  770. letter-spacing:1.2px;
  771. margin-bottom:10px;
  772. line-height:160%;
  773. text-transform:uppercase;
  774. font-family:'lato',arial,sans-serif;
  775. white-space:nowrap;
  776. overflow:hidden;
  777. text-overflow:ellipsis;
  778. }
  779.  
  780. .post350 .titre {font-size:1.6em;}
  781.  
  782. .post300 .titre, .post250 .titre {
  783. font-size:1.5em;
  784. margin-bottom:8px;
  785. }
  786.  
  787. .posts h2 {font-weight:400 !important;font-size:110%;line-height:160%;color:#000;}
  788.  
  789. /*lightbox*/
  790. #tumblr_lightbox,.tmblr-lightbox {background:rgba({RGBcolor:lightbox}, 0.95)!important;backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px); }
  791.  
  792.  
  793. #tumblr_lightbox img,.tmblr-lightbox .vignette {
  794. opacity:0;
  795. border-radius:0!important;
  796. -moz-border-radius: 0!important;
  797. -webkit-border-radius: 0!important;
  798. -o-border-radius: 0!important;
  799. -webkit-box-shadow:none!important;
  800. box-shadow:none!important;
  801. }
  802.  
  803. #tumblr_lightbox_center_image {
  804. opacity: 1!important;
  805. background-color: #fff!important;
  806. }
  807.  
  808. #tumblr_lightbox_left_image, #tumblr_lightbox_right_image {opacity:0.5!important;
  809. transition: opacity 0.3s ease-in-out;
  810. -webkit-transition: opacity 0.3s ease-in-out;
  811. -moz-transition: opacity 0.3s ease-in-out;
  812. -o-transition: opacity 0.3s ease-in-out;
  813. }
  814.  
  815. #tumblr_lightbox_left_image:hover, #tumblr_lightbox_right_image:hover {
  816. opacity:1!important;
  817. transition: opacity 0.3s ease-in-out;
  818. -webkit-transition: opacity 0.3s ease-in-out;
  819. -moz-transition: opacity 0.3s ease-in-out;
  820. -o-transition: opacity 0.3s ease-in-out;
  821. }
  822.  
  823. #tumblr_lightbox_center_image, #tumblr_lightbox_left_image, #tumblr_lightbox_right_image,.tmblr-lightbox .lightbox-image {
  824. box-shadow: 0 0 0 transparent !important;
  825. border-radius: 0!important;
  826. -moz-border-radius: 0!important;
  827. -webkit-border-radius: 0!important;
  828. -o-border-radius: 0!important;
  829.  
  830. }
  831.  
  832.  
  833.  
  834. #tumblr_lightbox_caption,.tmblr-lightbox .lightbox-caption { visibility: hidden; }
  835.  
  836.  
  837. .tumblr-box {cursor:help;}
  838.  
  839. #tumblr_lightbox_center_link, #tumblr_lightbox_left_link, #tumblr_lightbox_right_link {cursor:crosshair;}
  840.  
  841. .tumblr-box {
  842. background-color:rgba(255,255,255,0)!important;
  843. transition: all 0.3s ease-in-out;
  844. -webkit-transition: all 0.3s ease-in-out;
  845. -moz-transition: all 0.3s ease-in-out;
  846. -o-transition: all 0.3s ease-in-out;
  847. }
  848.  
  849. .tumblr-box:hover{
  850. background-color:rgba(255,255,255,0.5)!important;
  851. transition: all 0.3s ease-in-out;
  852. -webkit-transition: all 0.3s ease-in-out;
  853. -moz-transition: all 0.3s ease-in-out;
  854. -o-transition: all 0.3s ease-in-out;
  855. }
  856.  
  857. /* cr: agustd/gukthemes & sughyun/caulfielld; do not take w/o credit. */
  858. .photo-slideshow .count-1 {
  859. margin-bottom:{select:photoset gutter}!important;
  860. }
  861.  
  862. .photo-slideshow .count-2 {
  863. margin-left:{select:photoset gutter}!important;
  864. margin-bottom:{select:photoset gutter}!important;
  865. width:calc(50% - ({select:photoset gutter}/2))!important;
  866. }
  867.  
  868. .photo-slideshow .count-2:first-child {
  869. margin-left:0!important;
  870. }
  871.  
  872. .photo-slideshow .count-3 {
  873. margin-left:{select:photoset gutter}!important;
  874. margin-bottom:{select:photoset gutter}!important;
  875. width:calc((100% - (2 * {select:photoset gutter}))/3)!important;
  876. }
  877.  
  878. .photo-slideshow .count-3:first-child {
  879. margin-left:0!important;
  880. }
  881. .photo-slideshow {
  882. display:inline-block!important;
  883. margin-bottom:calc(-({select:photoset gutter} - 3px));
  884. position:relative;
  885. width:100%;
  886. }
  887.  
  888. .photo-slideshow.processed {margin-bottom:-{select:photoset gutter} !important;}
  889.  
  890. /*audio posts*/
  891. .flitwick {
  892. width:100%;
  893. display:flex;
  894. display:-webkit-flex;
  895. display:-moz-flex;
  896. display:-ms-flex;
  897. align-items:center;
  898. -webkit-align-items:center;
  899. -moz-align-items:center;
  900. -ms-align-items:center;
  901. display: -webkit-box;
  902. -webkit-box-align: center;
  903. position:relative;
  904. }
  905.  
  906. .grammy {
  907. position:relative;
  908. margin-left:0;
  909. }
  910.  
  911. .post500 .grammy, .post450 .grammy {
  912. width:100px;
  913. height:100px;
  914. }
  915.  
  916. .post400 .grammy, .post350 .grammy, .post300 .grammy {
  917. width:80px;
  918. height:80px;
  919. }
  920.  
  921. .post250 .grammy {
  922. width:50px;
  923. height:50px;
  924. }
  925.  
  926. .mariah {
  927. position:absolute;
  928. background:#fff;
  929. z-index:10;
  930. opacity:0;
  931. text-align:center;
  932. transition: all 0.3s ease-in-out;
  933. -webkit-transition: all 0.3s ease-in-out;
  934. -moz-transition: all 0.3s ease-in-out;
  935. -o-transition: all 0.3s ease-in-out;
  936. }
  937.  
  938. .post500 .mariah, .post450 .mariah {
  939. width:80px;
  940. height:80px;
  941. margin-top:10px;
  942. margin-left:10px;
  943. }
  944.  
  945. .post400 .mariah, .post350 .mariah, .post300 .mariah {
  946. width:60px;
  947. height:60px;
  948. margin-top:10px;
  949. margin-left:10px;
  950. }
  951.  
  952. .post250 .mariah {
  953. width:40px;
  954. height:40px;
  955. margin-top:5px;
  956. margin-left:5px;
  957. }
  958.  
  959. .mariah:hover {
  960. opacity:0.8;
  961. transition: all 0.3s ease-in-out;
  962. -webkit-transition: all 0.3s ease-in-out;
  963. -moz-transition: all 0.3s ease-in-out;
  964. -o-transition: all 0.3s ease-in-out;
  965. }
  966.  
  967. .playbox {
  968. overflow:hidden;
  969. }
  970.  
  971. .post500 .playbox, .post450 .playbox {
  972. width:40px;
  973. height:40px;
  974. margin-top:25px;
  975. margin-left:20px;
  976. }
  977.  
  978. .post400 .playbox, .post350 .playbox, .post300 .playbox {
  979. width:40px;
  980. height:40px;
  981. margin-top:15px;
  982. margin-left:12px;
  983. }
  984.  
  985. .post250 .playbox {
  986. width:25px;
  987. height:25px;
  988. margin-top:5px;
  989. margin-left:8px;
  990. }
  991.  
  992. .taylor {
  993. padding:0;
  994. margin-left:0px;
  995. background:#fafafa;
  996. display:flex;
  997. display:-webkit-flex;
  998. display:-moz-flex;
  999. display:-ms-flex;
  1000. align-items:center;
  1001. -webkit-align-items:center;
  1002. -moz-align-items:center;
  1003. -ms-align-items:center;
  1004. justify-content:center;
  1005. -webkit-justify-content:center;
  1006. -moz-justify-content:center;
  1007. -ms-justify-content:center;
  1008. display: -webkit-box;
  1009. -webkit-box-align: center;
  1010. -webkit-box-pack:center;
  1011.  
  1012. }
  1013.  
  1014. .post500 .taylor, .post450 .taylor {
  1015. width:calc(100% - 100px);
  1016. height:100px;
  1017. }
  1018.  
  1019. .post400 .taylor, .post350 .taylor,.post300 .taylor {
  1020. width:calc(100% - 80px);
  1021. height:80px;
  1022. }
  1023.  
  1024. .post250 .taylor {
  1025. width:calc(100% - 50px);
  1026. height:50px;
  1027. }
  1028.  
  1029. .swift {
  1030. color:#000;
  1031. font-weight:normal;
  1032. text-overflow: ellipsis;
  1033. white-space: nowrap;
  1034. overflow:hidden;
  1035. }
  1036.  
  1037. .post500 .swift, .post450 .swift {
  1038. max-width:calc(100% - 50px);
  1039. }
  1040.  
  1041. .post400 .swift, .post350 .swift,.post300 .swift {
  1042. max-width:calc(100% - 50px);
  1043. font-size:10px;
  1044. }
  1045.  
  1046. .post250 .swift {
  1047. max-width:calc(100% - 30px);
  1048. font-size:8px;
  1049. line-height:12px;
  1050. }
  1051.  
  1052. .swift b {
  1053. font-family:'lato', arial,sans-serif;
  1054. font-weight:bold;
  1055. color:#000;
  1056. }
  1057.  
  1058. /*chat*/
  1059.  
  1060. .chats {
  1061. line-height:160%;
  1062. padding:5px;
  1063. }
  1064.  
  1065. .chats strong {
  1066. font-family:'Lato', arial, sans-serif;
  1067. text-transform:uppercase;
  1068. color:#000;
  1069. }
  1070.  
  1071. .post250 .chats, .post350 .chats, .post300 .chats {
  1072. font-size:10px;
  1073. padding:3px;
  1074. }
  1075.  
  1076. /*links*/
  1077.  
  1078. .posts nav *,
  1079. .posts nav *:after,
  1080. .posts nav *:before {
  1081. -webkit-box-sizing: border-box;
  1082. -moz-box-sizing: border-box;
  1083. box-sizing: border-box;
  1084. }
  1085.  
  1086. .posts nav a {
  1087. position: relative;
  1088. display: inline-block;
  1089. margin: 0 auto;
  1090. outline: none;
  1091. color: #000;
  1092. text-decoration: none;
  1093. text-transform: uppercase;
  1094. letter-spacing: 1.5px;
  1095. font-weight: 400;
  1096. text-shadow: 0 0 1px rgba(255,255,255,0.3);
  1097. font-size: 1.2em;
  1098. }
  1099.  
  1100. .posts nav a:hover,
  1101. .posts nav a:focus {
  1102. outline: none;
  1103. }
  1104.  
  1105. .remus a {
  1106. color: #000;
  1107. text-shadow: 0 0 1px rgba(111,134,134,0.3);
  1108. width:100%;
  1109. text-align:center;
  1110. font-size:1.5em;
  1111. background:#fafafa;
  1112. padding:15px;
  1113. margin-top:0;
  1114. margin-bottom:0;
  1115. white-space:nowrap;
  1116. overflow:hidden;
  1117. }
  1118.  
  1119. .post500 .remus a, .post450 .remus a {font-size:2em;}
  1120.  
  1121. .remus a::before {
  1122. color: #000;
  1123. content: attr(data-hover);
  1124. position: absolute;
  1125. opacity: 0;
  1126. text-shadow: 0 0 1px rgba(255,255,255,0.3);
  1127. -webkit-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
  1128. -moz-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
  1129. transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
  1130. -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  1131. -moz-transition: -moz-transform 0.3s, opacity 0.3s;
  1132. transition: transform 0.3s, opacity 0.3s;
  1133. pointer-events: none;
  1134. }
  1135.  
  1136. .remus a:hover::before,
  1137. .remus a:focus::before {
  1138. -webkit-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
  1139. -moz-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
  1140. transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
  1141. opacity: 1;
  1142. }
  1143.  
  1144. /*quotes*/
  1145.  
  1146. .quotes {
  1147. font-size:140%;
  1148. display:inline;
  1149. line-height:160%;
  1150. }
  1151.  
  1152. .speaker {
  1153. margin-top:12px;
  1154. margin-bottom:12px;
  1155. text-align:right;
  1156. }
  1157.  
  1158. .post250 .speaker,.post300 .speaker, .post350 .speaker {margin-top:8px;margin-bottom:8px;}
  1159.  
  1160. /*Ask*/
  1161.  
  1162. .ask_cont {
  1163. background:#fafafa;
  1164. padding:10px;
  1165. line-height:160%;
  1166. }
  1167.  
  1168.  
  1169. .post350 .ask_cont, .post300 .ask_cont, .post250 .ask_cont {padding:5px 8px;}
  1170.  
  1171. .asker {
  1172. text-transform:uppercase;
  1173. margin-bottom:8px;
  1174. letter-spacing:1px;
  1175. }
  1176.  
  1177. .post350 .asker, .post300 .asker, .post250 .asker {margin-bottom:3px;}
  1178.  
  1179.  
  1180. .asker a {
  1181. border-bottom:1px solid #dedede;
  1182. font-family:'lato',arial,sans-serif;
  1183. color:#000;
  1184. transition: all 0.3s ease-in-out;
  1185. -webkit-transition: all 0.3s ease-in-out;
  1186. -moz-transition: all 0.3s ease-in-out;
  1187. -o-transition: all 0.3s ease-in-out;
  1188.  
  1189. }
  1190.  
  1191. .asker a:hover {
  1192. border-bottom:1px solid {color:highlight};
  1193. color:{color:highlight};
  1194. transition: all 0.3s ease-in-out;
  1195. -webkit-transition: all 0.3s ease-in-out;
  1196. -moz-transition: all 0.3s ease-in-out;
  1197. -o-transition: all 0.3s ease-in-out;
  1198. }
  1199.  
  1200. /*footer*/
  1201.  
  1202. .footer {
  1203. font-weight:300;
  1204. color:#dedede;
  1205. text-transform:uppercase;
  1206. width:100%;
  1207. margin:10px auto 0 auto;
  1208. }
  1209.  
  1210. .footer a {
  1211. color:#666;
  1212. border-bottom:1px solid #dedede;
  1213. transition: all 0.3s ease-in-out;
  1214. -webkit-transition: all 0.3s ease-in-out;
  1215. -moz-transition: all 0.3s ease-in-out;
  1216. -o-transition: all 0.3s ease-in-out;
  1217. }
  1218.  
  1219.  
  1220. .footer a:hover, .footer a:focus {
  1221. color:{color:accent};
  1222. border-bottom:1px solid {color:accent};
  1223. transition: all 0.3s ease-in-out;
  1224. -webkit-transition: all 0.3s ease-in-out;
  1225. -moz-transition: all 0.3s ease-in-out;
  1226. -o-transition: all 0.3s ease-in-out;
  1227. }
  1228.  
  1229. .tags {
  1230. {block:ifnotshowtags}
  1231. {block:indexpage}
  1232. display:none;
  1233. {/block:indexpage}
  1234. {/block:ifnotshowtags}
  1235. font-size:90%;
  1236. width:100%;
  1237. margin-top:5px;
  1238. margin-bottom:-5px;
  1239. {block:permalinkpage}
  1240. font-style:italic;
  1241. {/block:permalinkpage}
  1242. word-wrap:break-word;
  1243. }
  1244.  
  1245. .tags a {
  1246. display:inline;
  1247. margin-left:5px;
  1248. }
  1249.  
  1250. .tags a:first-of-type {margin-left:0;}
  1251.  
  1252. .viasrc {width:100%;margin-top:5px;font-size:90%;text-transform:uppercase;}
  1253.  
  1254. .viasrc a {
  1255. color:{color:links};
  1256. border-bottom:1px solid #eaeaea;
  1257. transition: all 0.3s ease-in-out;
  1258. -webkit-transition: all 0.3s ease-in-out;
  1259. -moz-transition: all 0.3s ease-in-out;
  1260. -o-transition: all 0.3s ease-in-out;
  1261. }
  1262.  
  1263. .viasrc a:hover {
  1264. color:{color:accent};
  1265. border-bottom:1px solid {color:accent};
  1266. transition: all 0.3s ease-in-out;
  1267. -webkit-transition: all 0.3s ease-in-out;
  1268. -moz-transition: all 0.3s ease-in-out;
  1269. -o-transition: all 0.3s ease-in-out;
  1270. }
  1271.  
  1272. .notes h1 {font-weight:400;text-transform:uppercase;font-size:1.5em; text-align:center;}
  1273.  
  1274.  
  1275. div.notes::-webkit-scrollbar {width: 2px; height: 3px; background: #FFFFFF; }
  1276.  
  1277. div.notes::-webkit-scrollbar-thumb { background-color: {color:accent}; }
  1278.  
  1279. ol.notes {
  1280. padding: 0px;
  1281. margin: 0px;
  1282. list-style-type: none;
  1283. }
  1284.  
  1285. ol.notes li.note {padding: 8px; text-indent:10px; line-height:150%;}
  1286.  
  1287. .post350 ol.notes li.note {padding: 6px; text-indent:9px; line-height:160%; font-size:11px;letter-spacing:1px;}
  1288.  
  1289. .post250 ol.notes li.note, .post300 ol.notes li.note {padding: 5px;padding-left:0; line-height:150%; font-size:10px;letter-spacing:1px;}
  1290.  
  1291. ol.notes li.note .action a {
  1292. border-bottom:1px solid #dedede;
  1293. color:#5f5f5f;
  1294. transition: all 0.3s ease-in-out;
  1295. -webkit-transition: all 0.3s ease-in-out;
  1296. -moz-transition: all 0.3s ease-in-out;
  1297. -o-transition: all 0.3s ease-in-out;
  1298. }
  1299.  
  1300. ol.notes li.note .action a:hover {
  1301. border-bottom: 1px solid {color:highlight};
  1302. color:{color:highlight};
  1303. transition: all 0.3s ease-in-out;
  1304. -webkit-transition: all 0.3s ease-in-out;
  1305. -moz-transition: all 0.3s ease-in-out;
  1306. -o-transition: all 0.3s ease-in-out;
  1307. }
  1308.  
  1309. ol.notes li.note:before {content:"―"; position:relative; left:-10px;}
  1310.  
  1311. .post350 ol.notes li.note:before {left:-8px;}
  1312.  
  1313. .post300 ol.notes li.note:before, .post250 ol.notes li.note:before {display:none;}
  1314.  
  1315. .post350 ol.notes li.note:before {left:-8px;}
  1316.  
  1317. ol.notes li.note img.avatar {display:none;}
  1318.  
  1319. li.more_notes_link_container:before {display:none;}
  1320.  
  1321. li.more_notes_link_container {text-indent:0; text-transform:uppercase; font-size:14px; margin-top:10px; margin-bottom:-5px;}
  1322.  
  1323. .post350 li.more_notes_link_container {font-size:12px;padding:0;}
  1324.  
  1325. .post250 li.more_notes_link_container, .post300 li.more_notes_link_container {font-size:12px;padding:0;}
  1326.  
  1327. li.more_notes_link_container a {
  1328. color:#000;
  1329. font-family:'lato',arial,sans-serif;
  1330. transition: all 0.3s ease-in-out;
  1331. -webkit-transition: all 0.3s ease-in-out;
  1332. -moz-transition: all 0.3s ease-in-out;
  1333. -o-transition: all 0.3s ease-in-out;
  1334. }
  1335.  
  1336. li.more_notes_link_container a:hover {
  1337. color:{color:highlight};
  1338. transition: all 0.3s ease-in-out;
  1339. -webkit-transition: all 0.3s ease-in-out;
  1340. -moz-transition: all 0.3s ease-in-out;
  1341. -o-transition: all 0.3s ease-in-out;
  1342. }
  1343.  
  1344.  
  1345. ol.notes li.note blockquote {
  1346. border-color: #eaeaea;
  1347. padding: 4px 10px;
  1348. margin: 10px 0px 0px 25px;
  1349. }
  1350. with_commentary.blockquote {max-width:100%;}
  1351.  
  1352. ol.notes li.note blockquote a {
  1353. text-decoration: none;
  1354. border-bottom:none;
  1355. }
  1356.  
  1357. .pg {
  1358.  
  1359. margin:auto;
  1360. margin-bottom:50px;
  1361. font-size:1.5em;
  1362. line-height:1.6em;
  1363. width:100%;
  1364. z-index:10;
  1365. color:{color:accent};
  1366. text-transform:uppercase;
  1367. letter-spacing:1.5px;
  1368. background:transparent;
  1369. text-align:center;
  1370. word-spacing:20px;
  1371. {block:ifinfinitescroll}
  1372. display:none;
  1373. {/block:ifinfinitescroll}
  1374. }
  1375.  
  1376. .pg a {
  1377. display:inline-block;
  1378. margin-left:15px;
  1379. color:{color:accent};
  1380. font-weight:400;
  1381. transition: all 0.3s ease-in-out;
  1382. -webkit-transition: all 0.3s ease-in-out;
  1383. -moz-transition: all 0.3s ease-in-out;
  1384. -o-transition: all 0.3s ease-in-out;
  1385. }
  1386.  
  1387. .pg a:hover {
  1388. color:{color:highlight};
  1389. transition: all 0.3s ease-in-out;
  1390. -webkit-transition: all 0.3s ease-in-out;
  1391. -moz-transition: all 0.3s ease-in-out;
  1392. -o-transition: all 0.3s ease-in-out;
  1393. }
  1394.  
  1395. .image_bg .pg, .grid_bg .pg {
  1396. background:rgba(255,255,255,0.6);
  1397. padding-top:5px;
  1398. padding-bottom:5px;
  1399. backdrop-filter: blur(3px);
  1400. -webkit-backdrop-filter: blur(3px);
  1401. }
  1402.  
  1403. span.current {font-style:italic;margin-left:15px;}
  1404.  
  1405. footer {
  1406. margin:0px auto 10px auto;
  1407. width:100%;
  1408. }
  1409.  
  1410. #infscr-loading {display:none !important;}
  1411.  
  1412. .bottom {display:block;text-align:center;text-transform:uppercase;}
  1413. a.append {
  1414. padding-bottom:2px;
  1415. font-size:1.1em;
  1416. cursor:help;
  1417. letter-spacing:1.2px;
  1418. color:#000;
  1419. border-bottom:1px solid #000;
  1420. transition: all 0.3s ease-in-out;
  1421. -webkit-transition: all 0.3s ease-in-out;
  1422. -moz-transition: all 0.3s ease-in-out;
  1423. -o-transition: all 0.3s ease-in-out;
  1424. }
  1425.  
  1426. a.append:hover {
  1427. color:{color:highlight};
  1428. border-bottom:1px solid {color:highlight};
  1429. transition: all 0.3s ease-in-out;
  1430. -webkit-transition: all 0.3s ease-in-out;
  1431. -moz-transition: all 0.3s ease-in-out;
  1432. -o-transition: all 0.3s ease-in-out;
  1433. }
  1434.  
  1435. .img_bg a.append, .r_bg a.append, .gradient_bg a.append, .colour_bg a.append {
  1436. background:#fff;
  1437. padding:5px;
  1438. border:none;
  1439. transition: all 0.3s ease-in-out;
  1440. -webkit-transition: all 0.3s ease-in-out;
  1441. -moz-transition: all 0.3s ease-in-out;
  1442. -o-transition: all 0.3s ease-in-out;
  1443. }
  1444.  
  1445. .img_bg a.append:hover, .r_bg a.append:hover, .gradient_bg a.append:hover, .colour_bg a.append:hover {
  1446. background:{color:accent};
  1447. color:#fff;
  1448. border:none;
  1449. transition: all 0.3s ease-in-out;
  1450. -webkit-transition: all 0.3s ease-in-out;
  1451. -moz-transition: all 0.3s ease-in-out;
  1452. -o-transition: all 0.3s ease-in-out;
  1453. }
  1454.  
  1455. /*PLEASE DO NOT ALTER OR COVER THE CREDIT, THANKS! C: */
  1456. #leo {
  1457.  
  1458. font-family: Arial, Sans-Serif;
  1459. text-transform:uppercase;
  1460. text-align:center;
  1461. z-index:7;
  1462. box-sizing:content-box;
  1463. -webkit-box-sizing:content-box;
  1464. -moz-box-sizing:content-box;
  1465. }
  1466.  
  1467. #leo a {
  1468.  
  1469. position:fixed;
  1470. font-size:12px;
  1471. line-height:16px;
  1472. width:18px;
  1473. height:18px;
  1474. font-weight:300;
  1475. bottom:10px;
  1476. right:10px;
  1477. color:#000;
  1478. background:rgba(255,255,255,0.4);
  1479. padding:5px;
  1480. transition: all 1s ease-in-out;
  1481. -webkit-transition: all 1s ease-in-out;
  1482. -o-transition: all 1s ease-in-out;
  1483. -moz-transition: all 1s ease-in-out;
  1484.  
  1485. }
  1486.  
  1487. #leo a:hover {
  1488. background-color:rgba(0,0,0,1);
  1489. color:#fff;
  1490. border-radius:50%;
  1491. -webkit-animation: hermione 1s; /* Chrome, Safari, Opera */
  1492. -moz-animation: hermione 1s;
  1493. -o-animation: hermione 1s;
  1494. animation: hermione 1s;
  1495. animation-timing-function: ease-in-out;
  1496. -webkit-animation-timing-function: ease-in-out;
  1497. -moz-animation-timing-function: ease-in-out;
  1498. -o-animation-timing-function: ease-in-out;
  1499.  
  1500. -moz-transform: rotate(720deg); /* IE 9 */
  1501. -webkit-transform: rotate(720deg); /* Chrome, Safari, Opera */
  1502. transform: rotate(720deg);
  1503.  
  1504. transition: all 1s ease-in-out;
  1505. -webkit-transition: all 1s ease-in-out;
  1506. -o-transition: all 1s ease-in-out;
  1507. -moz-transition: all 1s ease-in-out;
  1508.  
  1509.  
  1510. }
  1511.  
  1512. @-webkit-keyframes hermione {
  1513. 0% {color:#000;}
  1514. 25% {color:#ACE4EA;}
  1515. 50% {color:#FFFBDD;}
  1516. 75% {color:#ACE4EA;}
  1517. 100% {color:#fff;}
  1518. }
  1519. @-moz-keyframes hermione {
  1520. 0% {color:#000;}
  1521. 25% {color:#ACE4EA;}
  1522. 50% {color:#FFFBDD;}
  1523. 75% {color:#ACE4EA;}
  1524. 100% {color:#fff;}
  1525. }
  1526. @-o-keyframes hermione {
  1527. 0% {color:#000;}
  1528. 25% {color:#ACE4EA;}
  1529. 50% {color:#FFFBDD;}
  1530. 75% {color:#ACE4EA;}
  1531. 100% {color:#fff;}
  1532. }
  1533.  
  1534. @keyframes hermione {
  1535. 0% {color:#000;}
  1536. 25% {color:#ACE4EA;}
  1537. 50% {color:#FFFBDD;}
  1538. 75% {color:#ACE4EA;}
  1539. 100% {color:#fff;}
  1540. }
  1541. /*END OF CREDIT*/
  1542. </style>
  1543. {block:indexpage}
  1544. {block:ifinfinitescroll}
  1545. <script src="https://static.tumblr.com/xbvpdcx/9LRo1g4a7/jquery.infinitescroll.min.js"></script>
  1546.  
  1547. <script>
  1548.  
  1549. // Infinite Scroll
  1550. $(function() {
  1551.  
  1552. var $container = $('section');
  1553. $container.infinitescroll({
  1554.  
  1555. loading: {
  1556. finishedMsg: "<em>No more posts</em>",
  1557. img: null,
  1558. msg: null,
  1559. msgText: "<em>Loading posts...</em>",
  1560. {block:ifmanualload}
  1561. finished: function () {$('.append').text('Load More'); },
  1562. {/block:ifmanualload}
  1563.  
  1564. },
  1565.  
  1566. navSelector : '.pg',
  1567. nextSelector : '.pg a:last',
  1568. itemSelector : '.posts',
  1569. {block:ifmanualload}
  1570. errorCallback: function () {$('.append').fadeOut();},
  1571. {/block:ifmanualload}
  1572. bufferPx : 400,
  1573.  
  1574. },
  1575.  
  1576. function( newElements ) {
  1577. $( newElements ).find('.photo-slideshow').pxuPhotoset({
  1578. lightbox: true,
  1579. rounded: true,
  1580. gutter: '0px',
  1581. borderRadius: '0px',
  1582. photoset: '.photo-slideshow',
  1583. photoWrap: '.photo-data',
  1584. photo: '.pxu-photo'
  1585. });
  1586.  
  1587. $( newElements ).find('.togglet').click(function(){
  1588.  
  1589. $(this).closest('.posts').find('div.tags').slideToggle();
  1590. $(this).text( $(this).text() == 'Hide' ? "Show" : "Hide");
  1591. });
  1592.  
  1593.  
  1594. });
  1595.  
  1596. {block:ifmanualload}
  1597. $container.infinitescroll('unbind');
  1598. $('.append').on('click', function(e) {
  1599. e.preventDefault();
  1600. $container.infinitescroll('retrieve');
  1601. });
  1602. {/block:ifmanualload}
  1603. });
  1604. </script>
  1605. {/block:ifinfinitescroll}
  1606. {/block:indexpage}
  1607.  
  1608.  
  1609. </head>
  1610. <body class="animsition {select:bg} {select:post width}">
  1611.  
  1612. <div class="oe_wrapper">
  1613. <div id="oe_overlay" class="oe_overlay"></div>
  1614.  
  1615. <div class="barca">
  1616.  
  1617. <div id="cont">
  1618. <ul id="oe_menu" class="oe_menu">
  1619. <li><a class="numfirst a-link" href="/">Home</a>
  1620. <div class="nullbox"></div>
  1621. </li>
  1622.  
  1623. <li><a class="a-link" href="/ask">Ask</a>
  1624. <div class="block1">
  1625.  
  1626. <ul class="oe_full">
  1627. <li class="oe_heading">{AskLabel}</li>
  1628. </ul>
  1629. <center>
  1630. <p> <iframe frameborder="0" height="190" id="owl" scrolling="no" src="https://www.tumblr.com/ask_form/{Name}.tumblr.com" width="100%" height="100%"></iframe></p>
  1631. </center>
  1632.  
  1633.  
  1634. </div>
  1635. </li>
  1636.  
  1637. <!--This is the description-->
  1638. <li><a class="top"href="#">Info</a>
  1639. <div class="block2 captions">
  1640. <ul class="oe_full">
  1641. <li class="oe_heading">{text:info}</li>
  1642. </ul>
  1643. {Block:Description} <p>{Description}</p>{/Block:Description}
  1644. </div>
  1645. </li>
  1646.  
  1647.  
  1648. <!--The links go here-->
  1649. <li><a class="top"href="#">Links</a>
  1650. <div class="block3">
  1651. <ul class="oe_full">
  1652. <li class="oe_heading">Links</li>
  1653. </ul>
  1654. <ul>
  1655. <li><a href="{text:Link1 URL}">{text:Link1}</a></li>
  1656. <li><a href="{text:Link2 URL}">{text:Link2}</a></li>
  1657. <li><a href="{text:Link3 URL}">{text:Link3}</a></li>
  1658. </ul>
  1659. <ul>
  1660. <li><a href="{text:Link4 URL}">{text:Link4}</a></li> <li><a href="{text:Link5 URL}">{text:Link5}</a></li> <li><a href="{text:Link6 URL}">{text:Link6}</a></li>
  1661. </ul>
  1662. <ul>
  1663. <li><a href="{text:Link7 URL}">{text:Link7}</a></li>
  1664. <li><a href="{text:Link8 URL}">{text:Link8}</a></li>
  1665. <li><a href="{text:Link9 URL}">{text:Link9}</a></li>
  1666. </ul>
  1667. </div>
  1668. </li>
  1669. <!--Updates-->
  1670. <li><a class="top numlast"href="#">Updates</a>
  1671. <div class="block4">
  1672. <ul class="oe_full">
  1673. <li class="oe_heading">Updates</li>
  1674. </ul>
  1675. <p>{text:updates}</p>
  1676. </div>
  1677. </li>
  1678. </ul>
  1679.  
  1680. </div>
  1681.  
  1682. </div>
  1683.  
  1684. </div>
  1685.  
  1686. <div id="entries">
  1687. <section>
  1688. {block:Posts}
  1689. <div class="posts">
  1690.  
  1691. {block:Photo}
  1692. {LinkOpenTag}<img src="{PhotoURL-500}" width="100%" height="auto"/>{LinkCloseTag}
  1693. {block:Caption}
  1694. <div class="captions">
  1695. {Caption}
  1696. </div>
  1697. {/block:Caption}
  1698. {/block:Photo}
  1699.  
  1700. {block:Photoset}
  1701. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
  1702. {block:Caption}
  1703. <div class="captions">
  1704. {Caption}
  1705. </div>
  1706. {/block:Caption}
  1707. {/block:Photoset}
  1708.  
  1709. {block:Video}
  1710. {Video-500}
  1711. {block:Caption}
  1712. <div class="captions">
  1713. {Caption}
  1714. </div>
  1715. {/block:Caption}
  1716. {/block:Video}
  1717.  
  1718. {block:Audio}
  1719. <div class="flitwick">
  1720.  
  1721. <div class="mariah">
  1722. <div class="playbox">{AudioPlayerWhite}</div>
  1723. </div>
  1724.  
  1725. <div class="grammy">
  1726. <img src="https://static.tumblr.com/jn9hrij/20Ul2zzsr/albumart.jpg" style="position:absolute;" width="100" height="100" />
  1727. {block:AlbumArt}
  1728. <img src="{AlbumArtURL}" style="position:absolute;">
  1729. {/block:AlbumArt}
  1730. </div>
  1731.  
  1732.  
  1733. <div class="taylor">
  1734. <div class="swift">
  1735. {block:TrackName}
  1736. <b>Song:</b> {TrackName}
  1737. {/block:TrackName}<br>
  1738.  
  1739. {block:Artist}
  1740. <b>Artist:</b> {Artist}
  1741. {/block:Artist}<br>
  1742.  
  1743. {block:Album}
  1744. <b>Album:</b> {Album}
  1745. {/block:Album}
  1746.  
  1747. </div>
  1748. </div>
  1749.  
  1750. </div>
  1751. {block:Caption}
  1752. <div class="captions">
  1753. {Caption}
  1754. </div>
  1755. {/block:Caption}
  1756. {/block:Audio}
  1757.  
  1758. {block:Quote}
  1759. <div class="quotes">"{Quote}"</div>
  1760.  
  1761. {block:Source}
  1762. <div class="speaker captions">
  1763. ― {Source}
  1764. </div>
  1765. {/block:Source}
  1766. {/block:Quote}
  1767.  
  1768. {block:Text}
  1769. {block:Title}<div class="titre">{Title}</div>{/block:Title}
  1770. <div class="captions">{Body}</div>
  1771. {/block:Text}
  1772.  
  1773. {block:Answer}
  1774. <div class="ask_cont">
  1775. <div class="asker">{Asker} asked:</div>
  1776. {Question}
  1777. </div>
  1778. <div class="captions">{Answer}</div>
  1779. {/block:Answer}
  1780.  
  1781. {block:Chat}
  1782. {block:Title}<div class="titre">{Title}</div>{/block:Title}
  1783. {block:Lines}
  1784. <div class="chats">
  1785. {block:Label}<strong>{Label}</strong>{/block:Label} {Line}
  1786. </div>
  1787. {/block:Lines}
  1788. {/block:Chat}
  1789.  
  1790. {block:Link}
  1791. <nav class="remus" id="remus">
  1792. <a href="{URL}" data-hover="{Name}">{Name}</a>
  1793.  
  1794. </nav>
  1795. {block:Description}{Description}{/block:Description}
  1796.  
  1797. {/block:Link}
  1798.  
  1799. {block:date}
  1800.  
  1801. <div class="footer">
  1802.  
  1803. <a class="a-link" href="{Permalink}">{ShortMonth}. {DayOfMonth}{DayOfMonthSuffix} '{ShortYear}</a>
  1804. {block:notecount} / <a class="a-link" href="{Permalink}">{NoteCount}N</a>{/block:notecount} / <a href="{ReblogURL}">reblog</a>
  1805.  
  1806.  
  1807. {block:ifnotshowtags}
  1808. {block:indexpage}
  1809. {block:HasTags}
  1810. / <a class="togglet {PostID}" href="javascript:;">tags</a>
  1811. {/block:HasTags}
  1812. {/block:indexpage}
  1813. {/block:ifnotshowtags}
  1814. </div>
  1815.  
  1816. {block:permalinkpage}
  1817. {block:RebloggedFrom}
  1818. <div class="viasrc">
  1819. via <a href="{ReblogParentURL}">{ReblogParentName}</a>
  1820. {block:ContentSource}
  1821. , by <a href="{SourceURL}">{ReblogRootName}</a>
  1822. {/block:ContentSource}
  1823. </div>
  1824. {/block:RebloggedFrom}
  1825. {/block:permalinkpage}
  1826.  
  1827. {block:HasTags}
  1828. <div class="tags {PostID}">
  1829. {block:Tags}
  1830. <a class="a-link" href="{TagURL}">#{Tag}</a>
  1831. {/block:Tags}
  1832. </div>
  1833. {/block:HasTags}
  1834.  
  1835. {/block:date}
  1836.  
  1837. <!-- {block:NoRebloggedFrom}
  1838. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  1839. {/block:NoRebloggedFrom} -->
  1840.  
  1841. {block:ContentSource}<!-- {SourceURL}
  1842. {block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  1843. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1844. {/block:ContentSource}
  1845. </div>
  1846.  
  1847. {block:PermalinkPage}
  1848. {block:date}
  1849. {block:NoteCount}
  1850. <div class="posts">
  1851.  
  1852. <div class="notes">
  1853. <h1>Notes</h1>
  1854. {block:PostNotes}
  1855. {PostNotes}
  1856. {/block:PostNotes}
  1857. </div>
  1858.  
  1859. </div>
  1860. {block:NoteCount}
  1861. {/block:date}
  1862. {/block:PermalinkPage}
  1863.  
  1864. {/block:Posts}
  1865.  
  1866. </section>
  1867.  
  1868. {block:IndexPage}
  1869. {block:Pagination}
  1870.  
  1871. <div class="pg">
  1872.  
  1873. {block:PreviousPage}<a class="a-link" href="{PreviousPage}">&laquo;</a>{/block:PreviousPage}
  1874. {block:JumpPagination length="5"}
  1875. {block:CurrentPage}<span class="current">{PageNumber}</span>{/block:CurrentPage}
  1876. {block:JumpPage}<a class="jump_page a-link" href="{URL}">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination}
  1877. {block:NextPage}<a class="a-link" href="{NextPage}">&raquo;</a>{/block:NextPage}
  1878.  
  1879. </div>
  1880.  
  1881. {/block:Pagination}
  1882. {/block:IndexPage}
  1883.  
  1884. {block:ifmanualload}
  1885. {block:IndexPage}
  1886. {block:Pagination}
  1887.  
  1888. <footer>
  1889. <div class="bottom"><a class="append">Load More</a></div>
  1890. </footer>
  1891. {/block:Pagination}
  1892. {/block:IndexPage}
  1893. {/block:ifmanualload}
  1894.  
  1895. </div>
  1896.  
  1897.  
  1898. <!--PLEASE DO NOT ALTER OR COVER THE CREDIT-->
  1899. <div id="leo">
  1900. <a href="https://hermionegrangcr.tumblr.com">♚</a>
  1901. </div>
  1902. <!--END OF CREDIT-->
  1903.  
  1904. <script src="https://static.tumblr.com/xbvpdcx/0Joo5tua9/smoothscroll.js"></script>
  1905.  
  1906. <script src="https://static.tumblr.com/xbvpdcx/8a7nkqvai/classie.js" ></script>
  1907. <script>
  1908. /**
  1909. * cbpAnimatedHeader.min.js v1.0.0
  1910. * https://www.codrops.com
  1911. *
  1912. * Licensed under the MIT license.
  1913. * https://www.opensource.org/licenses/mit-license.php
  1914. *
  1915. * Copyright 2013, Codrops
  1916. * https://www.codrops.com
  1917. */
  1918. var cbpAnimatedHeader=(function(){
  1919.  
  1920. var b=document.documentElement,g=document.querySelector(".barca"),
  1921. e=false,a=100;function f(){window.addEventListener("scroll",function(h){if(!e){e=true;setTimeout(d,250)}},false)}function d(){var h=c();if(h>=a){classie.add(g,"midget")}else{classie.remove(g,"midget")}e=false}function c(){return window.pageYOffset||b.scrollTop}f()})();
  1922. </script>
  1923.  
  1924.  
  1925.  
  1926. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  1927. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  1928.  
  1929. <script>
  1930. jQuery.noConflict();
  1931. (function($){
  1932.  
  1933. $(document).ready(function(){
  1934.  
  1935. $("a[title],img[title],[title]").style_my_tooltips({
  1936.  
  1937. tip_follows_cursor:true,
  1938.  
  1939. tip_delay_time:30,
  1940.  
  1941. tip_fade_speed:300,
  1942.  
  1943. attribute:"title"
  1944.  
  1945. });
  1946.  
  1947. });
  1948.  
  1949. })(jQuery);
  1950. </script>
  1951.  
  1952. <script>
  1953. $(function () {
  1954.  
  1955. $(".top").click(function(){
  1956. $('body,html').animate({scrollTop:0},600);
  1957. return false;
  1958.  
  1959. });
  1960. });
  1961. </script>
  1962.  
  1963.  
  1964.  
  1965. {block:indexpage}
  1966. {block:ifnotshowtags}
  1967. {block:posts}
  1968. <script>
  1969. $(document).ready(function(){
  1970. $('a.togglet.{PostID}').click(function(e){
  1971. e.preventDefault();
  1972. $('div.tags.{PostID}').slideToggle();
  1973. $(this).text( $(this).text() == 'Hide' ? "Show" : "Hide");
  1974. });
  1975. });
  1976. </script>
  1977. {/block:posts}
  1978. {/block:ifnotshowtags}
  1979. {/block:indexpage}
  1980.  
  1981. <script>
  1982. $(function() {
  1983. var $oe_menu = $('#oe_menu');
  1984. var $oe_menu_items = $oe_menu.children('li');
  1985. var $oe_overlay = $('#oe_overlay');
  1986.  
  1987. $oe_menu_items.bind('mouseenter',function(){
  1988. var $this = $(this);
  1989. $this.addClass('slided selected');
  1990. $this.children('div').css('z-index','9999').stop(true,true).slideDown(200,function(){
  1991. $oe_menu_items.not('.slided').children('div').hide();
  1992. $this.removeClass('slided');
  1993. });
  1994. }).bind('mouseleave',function(){
  1995. var $this = $(this);
  1996. $this.removeClass('selected').children('div').css('z-index','1');
  1997. });
  1998.  
  1999. $oe_menu.bind('mouseenter',function(){
  2000. var $this = $(this);
  2001. $oe_overlay.stop(true,true).fadeTo(200, 0.8).css('z-index','10');
  2002. $this.addClass('hovered');
  2003. }).bind('mouseleave',function(){
  2004. var $this = $(this);
  2005. $this.removeClass('hovered');
  2006. $oe_overlay.stop(true,true).fadeTo(200, 0).css('z-index','0');
  2007. $oe_menu_items.children('div').hide();
  2008. })
  2009. });
  2010. </script>
  2011.  
  2012.  
  2013.  
  2014. </body>
  2015. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!