API tools faq
paste
thejacketslut

Lunar s

thejacketslut
Jun 25th, 2015
16,839
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 53.08 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4.  
  5. <!--
  6.  
  7. Theme «Lunar S» by felinum
  8.  
  9. Last update: 25.08.2016
  10.  
  11. Rules:
  12. 1. Don't claim any part of the code as your own.
  13. 2. Don't redistribute it on other sites.
  14. 3. Don't implement parts of my code into your themes w/o permission.
  15. 4. Leave the credit intact and visible (don't move it to secondary pages).
  16. 5. You may edit the theme, but not beyond recognition.
  17.  
  18.  
  19. Credits:
  20.  - Infinite Scroll: Paul Irish (https://github.com/infinite-scroll/infinite-scroll)
  21.  - Masonry with Infinite Scroll and PXU Photosets: @ shythemes (http://shythemes.tumblr.com/post/148791415248/)
  22.  - Video Resizing: @ shythemes (http://shythemes.tumblr.com/post/134536748863/)
  23.  - Photo Lightbox: @ shythemes (http://shythemes.tumblr.com/post/140444996328/)
  24.  - Masonry: David DeSandro (http://masonry.desandro.com/)
  25.  - Like Button with Infinite Scroll: @ magnusthemes (http://magnusthemes.tumblr.com/post/132530444620)
  26.  - Styled Tooltips: Manos Malihutsakis (http://manos.malihu.gr/tuts/style-my-tooltips.html)
  27.  - Pop-up Askbox: (http://academyoftumblr.tumblr.com/)
  28.  
  29. -->
  30.                    
  31.     <title>{Title}</title>
  32.     <link rel="shortcut icon" href="{Favicon}">
  33.     <link rel="alternate" type="application/rss+xml" href="{RSS}">
  34.     {block:Description}
  35.     <meta name="description" content="{MetaDescription}"/>
  36.     {/block:Description}
  37.     <meta http-equiv="x-dns-prefetch-control" content="off"/>
  38.     <style> body, a, a:hover{cursor:url({select:Tiny Cursor}), auto} </style>
  39.     <link href='https://fonts.googleapis.com/css?family=Karla|Lato:400italic, 400|Muli:400italic, 400|Roboto|Inconsolata|Hind|Lily+Script+One' rel='stylesheet' type='text/css'>
  40.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  41.     <link href="http://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  42.  
  43.     <!--META TAGS-->
  44.    
  45.     <meta name="image:Background" content=""/>
  46.     <meta name="image:Header Logo" content="http://static.tumblr.com/cb68243563bd378b82953563b3c4890a/0cdn90j/Edeobi9fz/tumblr_static_4afc070j1wqog8s8ossg0w4ws.png"/>
  47.     <meta name="image:Message Icon" content="http://static.tumblr.com/0cdn90j/XIunq1ytf/pencil43.png"/>
  48.     <meta name="image:User Menu Icon" content="http://static.tumblr.com/0cdn90j/W0Ynq1yso/user157.png"/>
  49.     <meta name="image:Link 1 Icon" content="http://static.tumblr.com/0cdn90j/q9onq3dys/house6_copy.png"/>
  50.     <meta name="image:Link 2 Icon" content="http://static.tumblr.com/0cdn90j/Gntnq3dzn/books12.png"/>
  51.     <meta name="image:Link 3 Icon" content="http://static.tumblr.com/0cdn90j/ug1nq3e09/cogs4.png"/>
  52.     <meta name="image:Menu Link 1" content="http://static.tumblr.com/0cdn90j/s4Rnq3dpt/loving4.png"/>
  53.     <meta name="image:Menu Link 2" content="http://static.tumblr.com/0cdn90j/VqYnq3dq6/multiple25.png"/>
  54.     <meta name="image:Menu Link 3" content="http://static.tumblr.com/0cdn90j/8B8nq3dqn/question58.png"/>
  55.    
  56.     <meta name="color:Background" content="#e8eff5"/>
  57.     <meta name="color:Loading Screen BG" content="#e8eff5"/>
  58.     <meta name="color:Text" content="#9a9a9a"/>
  59.     <meta name="color:Link" content="#7c8daa"/>
  60.     <meta name="color:Link Hover" content="#cecece"/>
  61.     <meta name="color:Posts BG" content="#fff"/>
  62.     <meta name="color:Italic" content="#a0acc9"/>
  63.     <meta name="color:Bold" content="#56585b"/>
  64.     <meta name="color:Header BG" content="#fff"/>
  65.     <meta name="color:Search Text" content="#ccc"/>
  66.     <meta name="color:Message Icon BG" content="#e8eff5"/>
  67.     <meta name="color:Popup Askbox Screen BG" content="#e9ebf0"/>
  68.    
  69.     <meta name="color:User Menu BG" content="#fff"/>
  70.     <meta name="color:Menu Links" content="#000"/>
  71.     <meta name="color:Menu Links BG Hover" content="#e4ebf0"/>
  72.     <meta name="color:Blog URL" content="#000"/>
  73.     <meta name="color:Blog URL Hover" content="#575757"/>
  74.     <meta name="color:Blog Title" content="#aab2b8"/>
  75.     <meta name="color:Additional Links" content="#8992a2"/>
  76.     <meta name="color:Additional Links Hover" content="#ccc"/>
  77.  
  78.     <meta name="color:Post Info Icons" content="#000"/>
  79.     <meta name="color:Tags" content="#ccc"/>
  80.     <meta name="color:Text Post Title" content="#4f4f4f"/>
  81.     <meta name="color:Text Post Title Hover" content="#adadad"/>
  82.     <meta name="color:Text Post BG" content="#f5f6f7"/>
  83.     <meta name="color:Blockquote Border" content="#eee"/>
  84.     <meta name="color:Quote" content="#000"/>
  85.     <meta name="color:Chat Label 1" content="#a3aeb6"/>
  86.     <meta name="color:Chat Label 2" content="#6e7297"/>
  87.     <meta name="color:Question" content="#474747"/>
  88.     <meta name="color:Back to Top BG" content="#fff"/>
  89.     <meta name="color:Back to Top Arrow" content="#949494"/>
  90.     <meta name="color:Back to Top Arrow Hover" content="#ccc"/>
  91.     <meta name="color:Selection BG" content="#e2eff5"/>
  92.     <meta name="color:Selection Text" content="#000"/>
  93.     <meta name="color:Tooltip BG" content="#fff"/>
  94.     <meta name="color:Tooltip Text" content="#929292"/>
  95.    
  96.     <meta name="select:Font Size" content="10" title="10px"/>
  97.     <meta name="select:Font Size" content="11" title="11px"/>
  98.     <meta name="select:Font Size" content="12" title="12px"/>
  99.    
  100.     <meta name="select:Font Family" content="Muli" title="Muli"/>
  101.     <meta name="select:Font Family" content="Hind" title="Hind"/>
  102.     <meta name="select:Font Family" content="Karla" title="Karla"/>
  103.     <meta name="select:Font Family" content="Roboto" title="Roboto"/>
  104.     <meta name="select:Font Family" content="Inconsolata" title="Inconsolata"/>
  105.     <meta name="select:Font Family" content="Lato" title="Lato"/>
  106.    
  107.     <meta name="select:Photoset Gutter" content="2" title="2px"/>
  108.     <meta name="select:Photoset Gutter" content="1" title="1px"/>
  109.     <meta name="select:Photoset Gutter" content="3" title="3px"/>
  110.     <meta name="select:Photoset Gutter" content="4" title="4px"/>
  111.    
  112.     <meta name="select:Permalink Post Size" content="540" title="540px"/>
  113.     <meta name="select:Permalink Post Size" content="250" title="250px"/>
  114.     <meta name="select:Permalink Post Size" content="300" title="300px"/>
  115.     <meta name="select:Permalink Post Size" content="350" title="350px"/>
  116.     <meta name="select:Permalink Post Size" content="400" title="400px"/>
  117.     <meta name="select:Permalink Post Size" content="450" title="450px"/>
  118.     <meta name="select:Permalink Post Size" content="500" title="500px"/>
  119.    
  120.     <meta name="select:Post Padding" content="5" title="5px"/>
  121.     <meta name="select:Post Padding" content="10" title="10px"/>
  122.     <meta name="select:Post Padding" content="15" title="15px"/>
  123.     <meta name="select:Post Padding" content="20" title="20px"/>
  124.    
  125.     <meta name="select:Post Side Margins" content="30" title="30px"/>
  126.     <meta name="select:Post Side Margins" content="10" title="10px"/>
  127.     <meta name="select:Post Side Margins" content="20" title="20px"/>
  128.     <meta name="select:Post Side Margins" content="40" title="40px"/>
  129.     <meta name="select:Post Side Margins" content="50" title="50px"/>
  130.     <meta name="select:Post Side Margins" content="60" title="60px"/>
  131.    
  132.     <meta name="select:Post Bottom Margin" content="80" title="80px"/>
  133.     <meta name="select:Post Bottom Margin" content="20" title="20px"/>
  134.     <meta name="select:Post Bottom Margin" content="30" title="30px"/>
  135.     <meta name="select:Post Bottom Margin" content="40" title="40px"/>
  136.     <meta name="select:Post Bottom Margin" content="50" title="50px"/>
  137.     <meta name="select:Post Bottom Margin" content="60" title="60px"/>
  138.     <meta name="select:Post Bottom Margin" content="70" title="70px"/>
  139.     <meta name="select:Post Bottom Margin" content="90" title="90px"/>
  140.     <meta name="select:Post Bottom Margin" content="100" title="100px"/>
  141.    
  142.     <meta name="select:Post Icon" content="folder-open" title="folder-open"/>
  143.     <meta name="select:Post Icon" content="bars" title="bars"/>
  144.     <meta name="select:Post Icon" content="bookmark" title="bookmark"/>
  145.     <meta name="select:Post Icon" content="bookmark-o" title="bookmark-o"/>
  146.     <meta name="select:Post Icon" content="cogs" title="cogs"/>
  147.     <meta name="select:Post Icon" content="ellipsis-h" title="ellipsis-h"/>
  148.     <meta name="select:Post Icon" content="star" title="star"/>
  149.     <meta name="select:Post Icon" content="star-o" title="star-o"/>
  150.  
  151.     <meta name="select:Avatar Shape" content="0" title="square"/>
  152.     <meta name="select:Avatar Shape" content="20" title="circle"/>
  153.     <meta name="select:Avatar Shape" content="4" title="round corners"/>
  154.    
  155.     <meta name="select:Tiny Cursor" content="http://cur.cursors-4u.net/cursors/cur-9/cur817.cur" title="white"/>
  156.     <meta name="select:Tiny Cursor" content="http://media.tumblr.com/tumblr_lqs4qdUu8n1qfoi4t.png" title="black"/>
  157.    
  158.     <meta name="select:Tumblr Controls" content=".5" title="gray"/>
  159.     <meta name="select:Tumblr Controls" content="1" title="black"/>
  160.  
  161.     <meta name="if:3 columns 250px" content="0"/>
  162.     <meta name="if:2 columns 250px" content="0"/>
  163.     <meta name="if:1 column 250px" content="0"/>
  164.     <meta name="if:2 columns 300px" content="1"/>
  165.     <meta name="if:1 column 300px" content="0"/>
  166.     <meta name="if:2 columns 400px" content="0"/>
  167.     <meta name="if:1 column 400px" content="0"/>
  168.     <meta name="if:1 column 500px" content="0"/>
  169.     <meta name="if:1 column 540px" content="0"/>
  170.    
  171.     <meta name="if:Loading Screen" content="1"/>
  172.     <meta name="if:Infinite Scroll" content="1"/>
  173.     <meta name="if:Show Caption" content="1"/>
  174.     <meta name="if:Header Logo" content="1"/>
  175.     <meta name="if:Link 1" content="1"/>
  176.     <meta name="if:Link 2" content="1"/>
  177.     <meta name="if:Link 3" content="1"/>
  178.     <meta name="if:User Menu" content="1"/>
  179.     <meta name="if:Menu Section 3" content="1"/>
  180.     <meta name="if:Menu Section 4" content="1"/>
  181.     <meta name="if:Menu Section 5" content="1"/>
  182.  
  183.     <meta name="text:Link 1 URL" content="/"/>
  184.     <meta name="text:Link 1 Title on Hover" content="home"/>
  185.     <meta name="text:Link 2 URL" content="/"/>
  186.     <meta name="text:Link 2 Title on Hover" content="Link 2"/>
  187.     <meta name="text:Link 3 URL" content="/"/>
  188.     <meta name="text:Link 3 Title on Hover" content="Link 3"/>
  189.     <meta name="text:Number Of Liked Posts" content="∞"/>
  190.     <meta name="text:Number Of Blogs You Follow" content="∞"/>
  191.     <meta name="text:Menu Link 3" content="Menu Link 3"/>
  192.     <meta name="text:Menu Link 3 URL" content="/"/>
  193.     <meta name="text:Section 3 Title" content="Info"/>
  194.     <meta name="text:Section 3 Content" content="To edit this section, scroll down the Theme Options panel on the Customize page until you find the 'Section 3 Content' text field. To edit the next two sections, go to line 1229 and follow the instructions."/>
  195.     <meta name="text:Section 4 Title" content="Links"/>
  196.     <meta name="text:Section 5 Title" content="Updates"/>
  197.    
  198.     <style type="text/css">
  199.    
  200.     a, a:hover,
  201.     #scrolltotop:hover .fa-angle-up, .fa-angle-up,
  202.     .tmblr-iframe, .tmblr-iframe:hover,
  203.     img, img:hover,
  204.     #audio_player_container, #audio_player_bg,
  205.     #audio_player_container:hover #audio_player_bg,
  206.     #post_info_container, #audio_player_bg_container,
  207.     #audio_player_container:hover #audio_player_bg_container
  208.         {transition-duration:.5s;}
  209.    
  210.     ::-webkit-scrollbar {width:11px; height:11px;}
  211.     ::-webkit-scrollbar-track {border:5px solid #fff; background-color:#eee;}
  212.     ::-webkit-scrollbar-thumb {
  213.         border:5px solid rgba(0, 0, 0, 0);
  214.         background-clip:padding-box;
  215.         background-color:rgba(0, 0, 0, 1);
  216.     }
  217.  
  218.     #s-m-t-tooltip {
  219.         max-width:300px;
  220.         z-index:9999999;
  221.         margin:24px 14px 7px 12px;
  222.         padding:3px;
  223.         background:{color:Tooltip BG};
  224.         color:{color:Tooltip Text};
  225.         font:7px muli, calibri, sans-serif;
  226.         text-transform:uppercase;
  227.         border:1px solid #f0f0f0;
  228.         text-shadow:none;
  229.         letter-spacing:1px;
  230.     }
  231.    
  232.     #scrolltotop {
  233.         position:fixed;
  234.         top:50%;
  235.         right:-50px;
  236.         cursor:pointer;
  237.         z-index:99999;
  238.         text-align:center;
  239.         background-color:{color:Back to Top BG};
  240.     }
  241.    
  242.     .fa-angle-up {font-size:15px; color:{color:Back to Top Arrow}; padding:5px 20px; background:{color:Back to Top BG};}
  243.    
  244.     #scrolltotop:hover .fa-angle-up {color:{color:Back to Top Arrow Hover};}
  245.    
  246.     .tmblr-iframe {
  247.         position:fixed;
  248.         top:100% !important;
  249.         margin:-28px 0 0 0;
  250.         right:5px !important;
  251.         -webkit-filter: invert(100%);
  252.         -moz-filter: invert(100%);
  253.         -o-filter: invert(100%);
  254.         -ms-filter: invert(100%);
  255.         filter: invert(100%);
  256.         z-index:1000000000000000000000000000000;
  257.         opacity:{select:Tumblr Controls};
  258.     }
  259.    
  260.     .tmblr-iframe:hover {opacity:.7;}
  261.  
  262.     ::selection {background:{color:Selection BG}; color:{color:Selection Text};}
  263.     ::-moz-selection {background:{color:Selection BG}; color:{color:Selection Text};}
  264.  
  265.     body {
  266.         font-size:{select:Font Size}px;
  267.         font-family:{select:Font Family}, calibri, sans-serif;
  268.         color:{color:Text};
  269.         background:{color:Background} url('{image:Background}') repeat fixed center;
  270.         overflow-wrap:break-word;  
  271.         word-wrap:break-word;
  272.     }
  273.    
  274.     a {text-decoration:none;}
  275.     a:link, a:visited {color:{color:Link};}
  276.     a:hover {color:{color:Link Hover};}
  277.     a:active {color:{color:Link};}
  278.    
  279.     i, em {color:{color:Italic};}
  280.     b, strong {color:{color:Bold};}
  281.     pre {
  282.         font-family:inherit !important;
  283.         white-space:pre-wrap;      
  284.         white-space:-moz-pre-wrap;  
  285.         white-space:-pre-wrap;      
  286.         white-space:-o-pre-wrap;  
  287.         word-wrap:break-word;      
  288.     }
  289.    
  290.     h6, small, big, sup, sub {font-size:1em;}
  291.     h4, h5, h6 {margin:6px 0;}
  292.     h5 {font-size:1.1em;}
  293.     h4 {font-size:1.2em;}
  294.     h3 {font-size:1.3em;}
  295.     h2 {font-size:1.4em;}
  296.     h1 {font-size:1.5em;}
  297.  
  298.     blockquote {
  299.         margin:0;
  300.         padding:0 10px;
  301.         border-left:1px solid {color:Blockquote Border};
  302.     }
  303.    
  304.     ul:not(.shuu):not(.tags) {margin:0 0 0 -35px; list-style-type:none;}
  305.     ol {margin-left:-25px;}
  306.     ul:not(.shuu):not(.tags) li:before {
  307.         content:'—';
  308.         display:inline-block;
  309.         margin-right:5px;
  310.     }
  311.    
  312.     img {max-width:100%; height:auto;}
  313.    
  314.     /*     top bar    */
  315.    
  316.     #header {
  317.         position:fixed;
  318.         top:0;
  319.         left:0;
  320.         width:100%;
  321.         height:50px;
  322.         z-index:99;
  323.         background-color:{color:header BG};
  324.     }
  325.    
  326.     #logo_search_container {
  327.         position:fixed;
  328.         top:0;
  329.         left:45px;
  330.         padding:5px 5px 0 0;
  331.         z-index:999;
  332.     }
  333.    
  334.     #logo img {height:100%; opacity:1;}
  335.     #logo img:hover {opacity:.7;}
  336.     #logo {
  337.         float:left;
  338.         height:40px;
  339.         padding-right:25px;
  340.     }
  341.    
  342.     #search {float:left; margin-top:10px;}
  343.  
  344.     #sfm input {
  345.         border:none;
  346.         outline:none;
  347.         text-transform:uppercase;
  348.         color:{color:Search Text};
  349.         padding:4px 16px;
  350.         font:8px Lato;
  351.         letter-spacing:1px;
  352.     }
  353.    
  354.     ::-webkit-input-placeholder {color:#ccc;}
  355.     :-moz-placeholder {color:#ccc; opacity:1;}
  356.     ::-moz-placeholder {color:#ccc; opacity:1;}
  357.     :-ms-input-placeholder {color:#ccc;}
  358.    
  359.     #sf {
  360.         background:url('http://static.tumblr.com/0cdn90j/MJNnpa88p/search-3-512.png') left center no-repeat;    
  361.         background-size:11px 11px;
  362.     }
  363.    
  364.     #header_links_container {
  365.         position:fixed;
  366.         top:0;
  367.         right:90px;
  368.         {block:IfUserMenu}right:145px;{/block:IfUserMenu}
  369.         z-index:999;
  370.         padding:5px 10px 10px 10px;
  371.     }
  372.    
  373.     #header_links_container ul {list-style-type:none;}
  374.     #header_links_container li img {height:100%;}
  375.     #header_links_container li {
  376.         display:inline-block;
  377.         height:18px;
  378.         padding:0 15px;
  379.     }
  380.  
  381.     #mssg_icon_container {
  382.         position:fixed;
  383.         top:7px;
  384.         right:20px;
  385.         padding:7px 17px;
  386.         background:{color:Message Icon BG};
  387.         z-index:999;
  388.     }
  389.    
  390.     #mssg_icon img {height:100%;}
  391.     #mssg_icon {height:22px;}
  392.    
  393.     #fade {
  394.         position:fixed;
  395.         display:none;
  396.         left:0;
  397.         top:0;
  398.         width:100%;
  399.         height:100%;
  400.         opacity:.6;
  401.         z-index:9999;
  402.         background:{color:Popup Askbox Screen BG};
  403.     }
  404.    
  405.     .popup_block {
  406.         position:fixed;
  407.         display:none;
  408.         float:left;
  409.         top:50%;
  410.         left:50%;
  411.         padding:15px;
  412.         z-index:9999999999;
  413.         font-size:1.2em;
  414.         background:white;
  415.     }
  416.    
  417.     *html #fade, *html .popup_block {position:absolute;}
  418.    
  419.     #user_icon_container {
  420.         position:fixed;
  421.         top:14px;
  422.         right:115px;
  423.         padding:2px;
  424.         z-index:999;
  425.     }
  426.    
  427.     #user_icon img {height:100%;}
  428.     #user_icon {height:18px;}
  429.    
  430.     #user_menu {
  431.         position:fixed;
  432.         display:none;
  433.         top:47px;
  434.         right:20px;
  435.         width:200px;
  436.         z-index:999999;
  437.         font-size:10px;
  438.         background:{color:User Menu BG};
  439.     }
  440.    
  441.     .menu_top_sections, .menu_bottom_sections {
  442.         overflow:auto;
  443.         margin-bottom:1px;
  444.         background-color:#f6f7f8;
  445.     }
  446.    
  447.     .menu_bottom_sections:hover {background-color:#e4ebf0;}
  448.    
  449.     .menu_sections_title {
  450.         float:left;
  451.         padding:5px 10px;
  452.         text-transform:uppercase;
  453.         font-weight:bold;
  454.         font-size:9px;
  455.         color:#686868;
  456.     }
  457.    
  458.     .menu_minititles_and_data {
  459.         float:right;
  460.         padding:5px 13px 5px 5px;
  461.         text-transform:uppercase;
  462.         font-size:9px;
  463.         color:#aaa;
  464.     }
  465.    
  466.     .menu_links {overflow:auto;}
  467.     .menu_links:hover {background-color:{color:Menu Links BG Hover};}
  468.     .menu_links_icon img {height:100%;}
  469.     .menu_links_icon {
  470.         float:left;
  471.         padding:10px 5px 10px 15px;
  472.         height:15px;
  473.     }
  474.    
  475.     .menu_links_title a {color:{color:Menu Links}; text-decoration:none;}
  476.     .menu_links_title a:hover {letter-spacing:2px;}
  477.     .menu_links_title {
  478.         float:left;
  479.         padding:11px 5px 10px 10px;
  480.         text-transform:uppercase;
  481.         color:{color:Menu Links};
  482.     }
  483.    
  484.     @-moz-document url-prefix() {.menu_links_title a, #blog_url a {letter-spacing:0px;}}
  485.    
  486.     .menu_links_no {
  487.         float:right;
  488.         padding:10px 15px 10px 5px;
  489.         font:11px calibri;
  490.         color:#aaa;
  491.     }
  492.    
  493.     #menu_avatar {
  494.         float:left;
  495.         padding:10px 10px 10px 15px;
  496.         height:40px;
  497.     }
  498.  
  499.     #menu_avatar img {
  500.         height:100%;
  501.         -webkit-border-radius:{select:Avatar Shape}px;
  502.            -moz-border-radius:{select:Avatar Shape}px;
  503.                 border-radius:{select:Avatar Shape}px;
  504.     }
  505.  
  506.     #url_and_title {
  507.         float:left;
  508.         max-width:120px;
  509.         padding:12px 10px 7px 0;
  510.         text-align:justify;
  511.     }
  512.    
  513.     #blog_url a {color:{color:Blog URL};}
  514.     #blog_url a:hover {letter-spacing:2px; color:{color:Blog URL Hover};}
  515.     #blog_url {
  516.         padding:0 10px 3px 0;
  517.         font-size:14px;
  518.         font-weight:bold;
  519.     }
  520.  
  521.     #blog_title {font-size:12px; color:{color:Blog Title};}
  522.    
  523.     .bottom_sections_content {padding:10px;}
  524.     .bottom_sections_content span a {color:{color:Additional Links};}
  525.     .bottom_sections_content span a:hover {color:{color:Additional Links Hover};}
  526.     .bottom_sections_content span:hover {background-color:{color:Menu Links BG Hover};}
  527.     .bottom_sections_content span {
  528.         display:block;
  529.         padding:5px;
  530.         border-bottom:1px solid #f5f5f5;
  531.     }
  532.    
  533.     .column a { text-transform:uppercase; color:{color:Additional Links};}
  534.     .column a:hover {color:{color:Additional Links Hover};}
  535.     .column {
  536.         padding:5px;
  537.         font-size:8px;
  538.         -webkit-column-count:2;
  539.            -moz-column-count:2;
  540.                 column-count:2;
  541.     }
  542.  
  543.     .section3 {text-align:justify;}
  544.    
  545.     .additional_links {
  546.         display:inline-block;
  547.         width:65px;
  548.         white-space:nowrap;
  549.         overflow:hidden;
  550.         text-overflow:ellipsis;
  551.     }
  552.     .additional_links_icons img {max-height:100%;}
  553.     .additional_links_icons {
  554.         height:16px;
  555.         padding:5px;
  556.         vertical-align:middle;
  557.     }
  558.  
  559.    /*     posts    */
  560.        
  561.     #posts_container {
  562.         {block:Permalink}width:calc({select:Permalink Post Size}px + {select:Post Padding}px * 2 - 4px);{/block:Permalink}
  563.         {block:IndexPage}
  564.         {block:If3columns250px}width:calc(750px + 6 * ({select:Post Padding}px + {select:Post Side Margins}px));{/block:If3columns250px}
  565.         {block:If2columns250px}width:calc(500px + 4 * ({select:Post Padding}px + {select:Post Side Margins}px));{/block:If2columns250px}
  566.         {block:If1column250px}width:calc(250px + 2 * {select:Post Padding}px);{/block:If1column250px}
  567.         {block:If2columns300px}width:calc(600px + 4 * ({select:Post Padding}px + {select:Post Side Margins}px));{/block:If2columns300px}
  568.         {block:If1column300px}width:calc(300px + 2 * {select:Post Padding}px);{/block:If1column300px}
  569.         {block:If2columns400px}width:calc(800px + 4 * ({select:Post Padding}px + {select:Post Side Margins}px));{/block:If2columns400px}
  570.         {block:If1column400px}width:calc(400px + 2 * {select:Post Padding}px);{/block:If1column400px}
  571.         {block:If1column500px}width:calc(500px + 2 * {select:Post Padding}px);{/block:If1column500px}
  572.         {block:If1column540px}width:calc(540px + 2 * {select:Post Padding}px);{/block:If1column540px}
  573.         {/block:IndexPage}
  574.         margin:0 auto;
  575.         left:auto;
  576.         right:auto;
  577.         margin-top:100px;
  578.         z-index:9;
  579.     }
  580.    
  581.     #posts {
  582.         {block:IndexPage}
  583.             {block:If3columns250px}margin:0 {select:Post Side Margins}px;{/block:If3columns250px}
  584.             {block:If2columns250px}margin:0 {select:Post Side Margins}px;{/block:If2columns250px}
  585.             {block:If1column250px}margin:0;{/block:If1column250px}
  586.             {block:If2columns300px}margin:0 {select:Post Side Margins}px;{/block:If2columns300px}
  587.             {block:If1column300px}margin:0;{/block:If1column300px}
  588.             {block:If2columns400px}margin:0 {select:Post Side Margins}px;{/block:If2columns400px}
  589.             {block:If1column400px}margin:0;{/block:If1column400px}
  590.             {block:If1column500px}margin:0;{/block:If1column500px}
  591.             {block:If1column540px}margin:0;{/block:If1column540px}
  592.             opacity:0;
  593.             z-index:-1;
  594.         {/block:IndexPage}
  595.         margin-bottom:{select:Post Bottom Margin}px;
  596.         padding:{select:Post Padding}px;
  597.         overflow-wrap:break-word;  
  598.         word-wrap:break-word;
  599.         text-align:justify;
  600.         background:{color:Posts BG};
  601.     }
  602.    
  603.     .vertebrae {
  604.         margin:auto;
  605.         overflow:hidden;
  606.         {block:Permalink}width:calc({select:Permalink Post Size}px - 4px);{/block:Permalink}
  607.         {block:IndexPage}
  608.             {block:If3columns250px}width:246px;{/block:If3columns250px}
  609.             {block:If2columns250px}width:246px;{/block:If2columns250px}
  610.             {block:If1column250px}width:246px;{/block:If1column250px}
  611.             {block:If2columns300px}width:296px;{/block:If2columns300px}
  612.             {block:If1column300px}width:296px;{/block:If1column300px}
  613.             {block:If2columns400px}width:396px;{/block:If2columns400px}
  614.             {block:If1column400px}width:396px;{/block:If1column400px}
  615.             {block:If1column500px}width:496px;{/block:If1column500px}
  616.             {block:If1column540px}width:536px;{/block:If1column540px}
  617.         {/block:IndexPage}
  618.     }
  619.    
  620.     .photo-slideshow .count-1, .pancake {
  621.         {block:Permalink}width:{select:Permalink Post Size}px;{/block:Permalink}
  622.         {block:IndexPage}
  623.             {block:If3columns250px}width:250px;{/block:If3columns250px}
  624.             {block:If2columns250px}width:250px;{/block:If2columns250px}
  625.             {block:If1column250px}width:250px;{/block:If1column250px}
  626.             {block:If2columns300px}width:300px;{/block:If2columns300px}
  627.             {block:If1column300px}width:300px;{/block:If1column300px}
  628.             {block:If2columns400px}width:400px;{/block:If2columns400px}
  629.             {block:If1column400px}width:400px;{/block:If1column400px}
  630.             {block:If1column500px}width:500px;{/block:If1column500px}
  631.             {block:If1column540px}width:540px;{/block:If1column540px}
  632.         {/block:IndexPage}
  633.     }
  634.    
  635.     .photo-slideshow {position:relative;}
  636.     .photo-slideshow .count-3 {max-width:177px; margin-bottom:calc({select:Photoset Gutter}px + 2px);}
  637.     .photo-slideshow .row:last-of-type .count-3 {margin-bottom:0 !important;}
  638.     .photo-slideshow .count-3:last-child {float:right;}
  639.     .photo-slideshow .count-3:nth-child(2) {
  640.         max-width:178px;
  641.         position:absolute;
  642.         left:50%;
  643.         transform: translateX(-50%);
  644.         -webkit-transform: translateX(-50%)
  645.     }
  646.    
  647.     /*    photoset lightbox    */
  648.    
  649.     .vignette, #vignette {opacity:0;}
  650.    
  651.     .lightbox-image, #tumblr_lightbox img {
  652.         box-shadow:none !important;
  653.         max-width:none;
  654.         -moz-box-sizing:border-box;
  655.         box-sizing:border-box;
  656.     }
  657.    
  658.     .tmblr-lightbox, #tumblr_lightbox {background-color:rgba(255,255,255,.9) !important;} /*you can change the lightbox bg color by pasting a new rgb color code over 255, 255, 255*/
  659.    
  660.     /*    text / caption    */
  661.        
  662.     .text, .caption {padding:1px 8px; background:{color:Text Post BG};}
  663.     .caption {margin-top:5px;}
  664.    
  665.     .text_post_title {
  666.         padding:10px;
  667.         margin-bottom:5px;
  668.         text-align:center;
  669.         font-size:11px;
  670.         text-transform:uppercase;
  671.         letter-spacing:2px;
  672.         color:{color:Text Post Title};
  673.         background:{color:Background};
  674.     }
  675.        
  676.     .text_post_title a {color:{color:Text Post Title};}
  677.     .text_post_title a:hover {color:{color:Text Post Title Hover};}
  678.    
  679.     /*    question    */
  680.  
  681.     #asker_avatar, #question {display:inline-block;}
  682.    
  683.     #question {
  684.         width:calc(100% - 60px);
  685.         min-height:30px;
  686.         float:right;
  687.         margin-bottom:5px;
  688.         padding:5px;
  689.         color:{color:Question};
  690.         background-color:{color:Background};
  691.     }
  692.    
  693.     #question:before {
  694.         content:' ';
  695.         position:absolute;
  696.         width:0;
  697.         height:0;
  698.         left:calc(45px + {select:Post Padding}px);
  699.         top:calc(15px + {select:Post Padding}px);
  700.         border-top:6px solid transparent;
  701.         border-bottom:6px solid transparent;
  702.         border-right:6px solid {color:Background};
  703.     }
  704.    
  705.     #answer {clear:right;}
  706.     #answer img {height:auto;}
  707.    
  708.     /*    quote    */
  709.    
  710.     #quo {
  711.         position:absolute;
  712.         {block:IndexPage}top:-17px; left:18px;{/block:IndexPage}
  713.         {block:Permalink}margin-top:-33px;{/block:Permalink}
  714.         font:50px 'Lily Script One';
  715.     }
  716.    
  717.     #quote {
  718.         padding:10px;
  719.         color:{color:Quote};
  720.         background:{color:Text Post BG};
  721.     }
  722.    
  723.     #source {
  724.         padding:5px 20px 3px 20px;
  725.         text-align:center;
  726.         text-transform:uppercase;
  727.         font-size:9px;
  728.         color:{color:Quote};
  729.     }
  730.    
  731.     /*    chat    */
  732.    
  733.     #convo {padding:10px 10px 0 10px;}
  734.     #convo #label {text-transform:uppercase; font-weight:bold;}
  735.     #convo li {
  736.         list-style:none;
  737.         border-top:1px solid #f0f0f0;
  738.         padding:5px 0;
  739.     }
  740.  
  741.     #line_odd #label {color:{color:Chat Label 1};}
  742.     #line_even #label {color:{color:Chat Label 2};}
  743.    
  744.     /*    audio player    */
  745.    
  746.     #album_art {
  747.         position:absolute;
  748.         width:70px;
  749.         height:70px;
  750.         z-index:1;
  751.         background-color:{color:Background};
  752.     }
  753.    
  754.     #album_art img {max-width:100%;}
  755.    
  756.     #audio_player_bg_container {
  757.         position:absolute;
  758.         width:30px;
  759.         height:30px;
  760.         margin-top:20px;
  761.         margin-left:20px;
  762.         z-index:9;
  763.         overflow:hidden;
  764.         opacity:0.5;
  765.         border-radius:25px;
  766.         background-color:white;
  767.     }
  768.    
  769.     #audio_player_container:hover #audio_player_bg_container {opacity:1;}
  770.    
  771.     #audio_player_bg {
  772.         width:30px;
  773.         height:30px;
  774.         margin-top:7px;
  775.         margin-left:7px;
  776.         overflow:hidden;
  777.     }
  778.    
  779.     #audio_player {margin-top:-5px; margin-left:-9px;}
  780.    
  781.     #track_details_container {
  782.         display:table;
  783.         height:70px;
  784.         padding:0 5px;
  785.         margin-left:74px;
  786.     }
  787.    
  788.     #track_details {display:table-cell; vertical-align:middle;}
  789.    
  790.     #track_name {
  791.         text-transform:lowercase;
  792.         font-weight:bold;
  793.         font-size:14px;
  794.         color:{color:Link};
  795.     }
  796.    
  797.     #artist_name {
  798.         text-transform:uppercase;
  799.         font-size:9px;
  800.         letter-spacing:1px;
  801.         color:#ccc
  802.     }
  803.    
  804.     /*    post notes    */
  805.    
  806.     #notecontainer .notes {
  807.         width:calc({text:Permalink Post Size}px - 20px);
  808.         margin-bottom:30px;
  809.         max-height:400px;
  810.         overflow-y:auto;
  811.         overflow-wrap:break-word;  
  812.         word-wrap:break-word;
  813.         background-color:{color:Posts BG};
  814.     }
  815.  
  816.     #notecontainer ol {
  817.         list-style-type:none;
  818.         margin:70px 0 0 0;
  819.         padding:10px;
  820.     }
  821.    
  822.     #notecontainer li {padding:8px 5px;}
  823.    
  824.     .retags {padding-left:25px;}
  825.     .retags a {
  826.         font-weight:bold;
  827.         font-size:7px;
  828.         text-transform:uppercase;
  829.         letter-spacing:2px;
  830.     }
  831.    
  832.     #notecontainer a:hover, #notecontainer .retags a:hover {color:{color:Link Hover} !important;}
  833.    
  834.     #notecontainer .answer_content {font-style:italic; color:{color:Italic};}
  835.  
  836.     #notecontainer blockquote {
  837.         border-color:transparent;
  838.         margin:10px 5px 10px 20px;
  839.         font-style:italic;
  840.     }
  841.    
  842.     #notecontainer img.avatar {
  843.         margin-right:10px;
  844.         width:16px;
  845.         height:16px;
  846.         vertical-align:middle;
  847.         -webkit-border-radius:8px;
  848.            -moz-border-radius:8px;
  849.                 border-radius:8px;
  850.     }
  851.    
  852.     /*    post info    */
  853.  
  854.     #post_info_container {
  855.         position:absolute;
  856.         font-family:muli;
  857.         {block:IndexPage}top:-17px; right:0;{/block:IndexPage}
  858.         {block:Permalink}
  859.             margin-top:calc(-18px - {select:Post Padding}px);
  860.             margin-left:calc({select:Permalink Post Size}px + {select:Post Padding}px - 23px);
  861.             height:17px;
  862.         {/block:Permalink}
  863.         background:{color:Posts BG};
  864.     }
  865.    
  866.     #post_info_container ul {
  867.         padding:0;
  868.         list-style: none;
  869.         {block:IndexPage}font-size:0;{block:IndexPage}
  870.     }
  871.    
  872.     #post_info_container ul li {
  873.         display:inline-block;
  874.         {block:IndexPage}padding-top:3px; font-size:10px;{/block:IndexPage}
  875.     }
  876.    
  877.     #post_info_container .fa {
  878.         {block:Permalink}vertical-align:top; margin-top:-5px;{/block:Permalink}
  879.         padding:0 3px;
  880.         font-size:10px;
  881.         color:{color:Post Info Icons};
  882.         border-right:1px solid {color:Background};
  883.     }
  884.    
  885.     #post_info_container li:last-child .fa {border:none;}
  886.     #post_info_container ul li ul.tags {
  887.         display:none;
  888.         position:absolute;
  889.         max-width:200px;
  890.         left:39px;
  891.         padding:0 3px 3px 5px;
  892.         z-index:9999999999999999999;
  893.         border:1px solid #f0f0f0;
  894.         background:{color:Posts BG};
  895.     }
  896.    
  897.     #post_info_container ul li:hover ul.tags {display:block;}
  898.     #post_info_container ul li ul.tags li a {
  899.         font:7px muli, calibri, sans-serif;
  900.         text-transform:uppercase;
  901.         letter-spacing:1px;
  902.         color:{color:Tooltip Text};
  903.     }
  904.    
  905.     #permatag a {color:{color:Tags};}
  906.     #post_info_container ul li ul.tags li a:hover, #permatag a:hover {color:{color:Link Hover};}
  907.     #permatag {padding-top:5px;}
  908.     #permatag .fa {color:{color:Post Info Icons};}
  909.    
  910.     #c {
  911.         position:fixed;
  912.         z-index:9999999999999999;
  913.         bottom:7px;
  914.         left:7px;
  915.         height:24px;
  916.     }
  917.    
  918.     #c img {height:100%; opacity:1;}
  919.     #c img:hover {opacity:.6;}
  920.    
  921.     #pag {
  922.         position:fixed;
  923.         top:15px;
  924.         left:calc(50% - 50px);
  925.         width:100px;
  926.         text-align:center;
  927.         z-index:9999999;
  928.     }
  929.    
  930.     #prev, #next {display:inline-block;}
  931.    
  932.     #loader{
  933.         position:fixed;
  934.         top:0;
  935.         width:100%;
  936.         height:100%;
  937.         margin:0;
  938.         padding:0;
  939.         overflow:hidden;
  940.         z-index:9999999999999999999;
  941.         text-align:center;
  942.         background-color:{color:Loading Screen BG};
  943.     }
  944.    
  945.     #loader img {margin:0 auto; margin-top:30%;}
  946.  
  947.     </style>
  948. </head>
  949.  
  950.     <script type="text/javascript" src="http://static.tumblr.com/iuggpng/bGqm4yfv9/jquery-1.7.2.js"></script>
  951.     <script>
  952.         $(window).load(function(){
  953.             $("#loader").delay(3000).fadeOut("fast");
  954.     });
  955.     </script>
  956.    
  957. <body>
  958.  
  959.     <!------------------LOADING------------------>
  960.    
  961.     {block:IfLoadingScreen}
  962.     <div id="loader">
  963.         <img src="http://static.tumblr.com/0cdn90j/IQlnqeeny/ajax-loader__2_.gif"> <!--you can change the loading image by visiting this website: http://www.ajaxload.info/-->
  964.     </div>
  965.     {/block:IfLoadingScreen}
  966.      
  967.      <!------------------HEADER LINKS------------------>
  968.      
  969.      <div id="header_links_container">
  970.          <ul class="shuu">
  971.              {block:IfLink1}<li><a href="{text:Link 1 URL}" title="{text:Link 1 Title on Hover}"><img src="{image:Link 1 Icon}"></a></li>{/block:IfLink1}
  972.              {block:IfLink2}<li><a href="{text:Link 2 URL}" title="{text:Link 2 Title on Hover}"><img src="{image:Link 2 Icon}"></a></li>{/block:IfLink2}
  973.              {block:IfLink3}<li><a href="{text:Link 3 URL}" title="{text:Link 3 Title on Hover}"><img src="{image:Link 3 Icon}"></a></li>{/block:IfLink3}
  974.          </ul>
  975.      </div>
  976.  
  977.     <!------------------PAGINATION------------------>
  978.  
  979.     {block:IndexPage}  
  980.     {block:IfNotInfiniteScroll}
  981.     {block:Pagination}
  982.     <div id="pag">
  983.         <div id="prev">{block:PreviousPage}<a href="{PreviousPage}" title="Previous Page"><img src="http://static.tumblr.com/0cdn90j/aGno5ezd4/arrows__1_.png"></a>{/block:PreviousPage}</div>&nbsp;&nbsp;
  984.         <div id="next">{block:NextPage}<a href="{NextPage}" title="Next Page"><img src="http://static.tumblr.com/0cdn90j/pfmo5ezcw/arrows.png"></a>{/block:NextPage}</div>
  985.     </div>
  986.     {/block:Pagination}
  987.     {/block:IfNotInfiniteScroll}
  988.    
  989.     {block:ifInfiniteScroll}
  990.     <div class="navigation" id="navigation">
  991.         {block:Pagination}
  992.         {block:PreviousPage}<a href="{PreviousPage}" class="navigate">{/block:PreviousPage}{block:PreviousPage}</a>{/block:PreviousPage}
  993.         {block:NextPage}<a href="{NextPage}" class="navigate" id="nextPage">{/block:NextPage}{block:NextPage}</a>{/block:NextPage}
  994.         {/block:Pagination}
  995.     </div>
  996.     {/block:IfInfiniteScroll}
  997.     {/block:IndexPage}
  998.  
  999.     <!------------------POSTS CONTAINER------------------>
  1000.      
  1001.     <div id="posts_container">
  1002.    
  1003.     <!------------------POSTS------------------>
  1004.    
  1005.         {block:Posts}
  1006.         <div id="posts">
  1007.  
  1008.     <!------------------POST INFO------------------>
  1009.    
  1010.             {block:Date}
  1011.             <div id="post_info_container">
  1012.                 <ul class="shuu">
  1013.                     <li><a href="{Permalink}" title="{TimeAgo} / {DayOfMonthWithZero} {ShortMonth} {ShortYear} {block:NoteCount}+{NoteCountWithLabel}{/block:NoteCount}"><i class="fa fa-{select:Post Icon} fa-fw"></i></a></li>
  1014.        
  1015.                     {block:IndexPage}
  1016.                     <li><a href="{ReblogURL}" title="Reblog"><i class="fa fa-refresh fa-fw"></i></a></li>
  1017.        
  1018.                     {block:HasTags}
  1019.                     <li>
  1020.                         <i class="fa fa-tags fa-fw"></i>
  1021.                         <ul class="tags">{block:Tags}<li><a href="{TagURL}">{Tag};</a></li><br/>{/block:Tags}</ul>
  1022.                     </li>
  1023.                     {/block:HasTags}
  1024.                     {/block:IndexPage}  
  1025.                 </ul>
  1026.                 <a href="{ReblogParentURL}" style="display:none"></a>
  1027.             </div>
  1028.             {/block:Date}
  1029.  
  1030.  
  1031.             {block:Text}
  1032.             <div class="vertebrae">
  1033.                 {block:Title}<div class="text_post_title"><a href="{Permalink}">{Title}</a></div>{/block:Title}
  1034.                 <div class="text">{Body}</div>
  1035.             </div>
  1036.             {/block:Text}
  1037.  
  1038.  
  1039.             {block:Link}
  1040.             <div class="vertebrae">
  1041.                 <div class="text_post_title"><a href="{URL}">{Name}</a></div>
  1042.                 {block:Description}<div class="text">{Description}</div>{/block:Description}
  1043.             </div>
  1044.             {/block:Link}
  1045.  
  1046.  
  1047.             {block:Quote}
  1048.             <div class="vertebrae">
  1049.                 <div id="quote"><span id="quo">“</span>{Quote}</div>
  1050.                 {block:Source}<div id="source">{Source}</div>{/block:Source}
  1051.             </div>
  1052.             {/block:Quote}
  1053.  
  1054.  
  1055.             {block:Chat}
  1056.             <div class="vertebrae">
  1057.                 {block:Title}<div class="text_post_title">{Title}</div>{/block:Title}
  1058.                 <ul id="convo" class="shuu">{block:Lines}<li id="line_{Alt}">{block:Label}<span id="label">{Label}</span>{/block:Label}&nbsp;{Line}</li>{/block:Lines}</ul>
  1059.             </div>
  1060.             {/block:Chat}
  1061.  
  1062.  
  1063.             {block:Answer}
  1064.             <div class="vertebrae">
  1065.                 <div id="asker_avatar"><img src="{AskerPortraitURL-40}"></div>
  1066.                 <div id="question"><span style="text-transform:uppercase"><span style="font-weight:bold;">{Asker}</span> asked:</span><br /> {Question}</div>
  1067.                 <div id="answer">{Answer}</div>
  1068.             </div>
  1069.             {/block:Answer}
  1070.  
  1071.  
  1072.             {block:AudioPlayer}
  1073.             <div class="vertebrae">
  1074.                 <div id="audio_player_container">
  1075.                     <div id="album_art">{block:AlbumArt}<img src="{AlbumArtURL}">{/block:AlbumArt}</div>
  1076.                     <div id="audio_player_bg_container"><div id="audio_player_bg"><div id="audio_player">{AudioPlayerWhite}</div></div></div>
  1077.                     <div id="track_details_container">
  1078.                         <div id="track_details">
  1079.                             {block:TrackName}<span id="track_name">{TrackName}</span>{/block:TrackName}<br />
  1080.                             {block:Artist}<span id="artist_name">{Artist}</span>{/block:Artist}<br />
  1081.                         </div>
  1082.                     </div>
  1083.                 </div>
  1084.                 {block:IfShowCaption}{block:Caption}<div class="caption" style="margin-top:5px;">{Caption}</div>{/block:Caption}{/block:IfShowCaption}  
  1085.             </div>
  1086.             {/block:AudioPlayer}
  1087.  
  1088.  
  1089.             {block:Photo}
  1090.             <div class="vertebrae">
  1091.                 <div class="pancake">
  1092.                     {LinkOpenTag}
  1093.                     <a href="#" style="margin:0 !important; height:0 !important;" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"></a>
  1094.                     {LinkCloseTag}
  1095.                     {block:IfShowCaption}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfShowCaption}
  1096.                 </div>
  1097.             </div>
  1098.             {/block:Photo}
  1099.  
  1100.  
  1101.             {block:Photoset}
  1102.             <div class="vertebrae">
  1103.                 <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">
  1104.                     {block:Photos}
  1105.                     <div class="photo-data">
  1106.                         <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>
  1107.                         <a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a>
  1108.                     </div>
  1109.                     {/block:Photos}
  1110.                 </div>
  1111.                 {block:IfShowCaption}{block:Caption}<div class="caption">{Caption}</div> {/block:Caption}{/block:IfShowCaption}
  1112.             </div>
  1113.             {/block:Photoset}
  1114.  
  1115.  
  1116.             {block:Video}
  1117.             <div class="vertebrae">
  1118.                 <div class="video">{Video-500}</div>
  1119.                 {block:IfShowCaption}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfShowCaption}
  1120.             </div>
  1121.             {/block:Video}
  1122.  
  1123.  
  1124.             {block:Permalink}{block:Date}{block:HasTags}<div id="permatag">{block:Tags}<a href="{TagURL}">{Tag};&nbsp;&nbsp;</a>{/block:Tags}</div>{/block:HasTags}{/block:Date}{/block:Permalink}
  1125.  
  1126.         </div>
  1127.  
  1128.     <!------------------END POSTS------------------>
  1129.    
  1130.         {block:ContentSource}<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->{/block:ContentSource}
  1131.    
  1132.         <div id="notecontainer">{PostNotes}</div>
  1133.    
  1134.         {/block:Posts}
  1135.  
  1136.     </div>
  1137.  
  1138.     <!------------------END POSTS CONTAINER------------------>
  1139.  
  1140.     <div id="popup_name" class="popup_block"><p><iframe frameborder="0" border="0" scrolling="no" width="450" height="200" allowtransparency="true" src="http://www.tumblr.com/ask_form/{name}.tumblr.com" style="background-color:transparent; overflow:hidden;"></iframe></p></div>  
  1141.    
  1142.     <div id="c"><a href="http://felinum.tumblr.com" title="theme by felinum"><img src="http://static.tumblr.com/0cdn90j/ZjQobhv98/snowshoe-cat.png"></a></div> <!--DO NOT REMOVE THIS-->
  1143.    
  1144.     <!------------------HEADER------------------>
  1145.    
  1146.     <div id="header"></div>
  1147.    
  1148.     <!------------------LOGO, SEARCH BAR------------------>
  1149.    
  1150.     <div id="logo_search_container">
  1151.         {block:IfHeaderLogo}<div id="logo"><a href="http://{name}.tumblr.com"><img src="{image:Header Logo}"></a></div>{/block:IfHeaderLogo}
  1152.         <div id="search">
  1153.             <script language="javascript">function send(){document.searchf.submit()}</script>
  1154.             <form action="/search" method="get" id="sfm" name="searchf"><input type="text" placeholder="Search" name="q" value="" id="sf"/></form>  
  1155.         </div>
  1156.     </div>
  1157.      
  1158.     <!------------------MESSAGE ICON------------------>
  1159.    
  1160.     <div id="mssg_icon_container">
  1161.         <div id="mssg_icon">
  1162.             <a href="#?w=450" rel="popup_name" class="poplight"><img src="{image:Message Icon}"></a>
  1163.          </div>
  1164.     </div>
  1165.      
  1166.     {block:IfUserMenu}
  1167.    
  1168.     <!------------------USER ICON------------------>
  1169.    
  1170.     <div id="user_icon_container">
  1171.         <div id="user_icon">
  1172.             <img src="{image:User Menu Icon}">
  1173.         </div>
  1174.     </div>
  1175.      
  1176.     <!------------------USER MENU------------------>
  1177.    
  1178.     <div id="user_menu">
  1179.      
  1180.         <!--SECTION 1-->
  1181.        
  1182.         <div class="menu_top_sections" style="margin-bottom:0;">
  1183.             <div class="menu_sections_title">account</div>
  1184.             <div class="menu_minititles_and_data">Log Out</div>
  1185.         </div>
  1186.        
  1187.         <!--SECTION 1 LINKS-->
  1188.        
  1189.         <div class="menu_links" style="clear:both;">
  1190.             <div class="menu_links_icon"><img src="{image:Menu Link 1}"></div>
  1191.             <div class="menu_links_title"><a href="http://www.tumblr.com/liked/by/{text:Your Username}">Likes</a></div>
  1192.             <div class="menu_links_no">{text:Number Of Liked Posts}</div>
  1193.         </div>
  1194.  
  1195.            
  1196.         <div class="menu_links" style="clear:both;">
  1197.             <div class="menu_links_icon"><img src="{image:Menu Link 2}"></div>
  1198.             <div class="menu_links_title"><a href="/blogroll">Following</a></div>
  1199.             <div class="menu_links_no">{text:Number Of Blogs You Follow}</div>
  1200.         </div>
  1201.            
  1202.            
  1203.         <div class="menu_links" style="clear:both;">
  1204.             <div class="menu_links_icon"><img src="{image:Menu Link 3}"></div>
  1205.             <div class="menu_links_title"><a href="{text:Menu Link 3 URL}">{text:Menu Link 3}</a></div>
  1206.         </div>
  1207.        
  1208.         <!--SECTION 2-->
  1209.        
  1210.         <div class="menu_top_sections" style="clear:both; margin-bottom:0;">
  1211.             <div class="menu_sections_title">Blog</div>
  1212.             <div class="menu_minititles_and_data">+New</div>
  1213.         </div>
  1214.        
  1215.         <!--AVATAR, USERNAME AND BLOG TITLE-->
  1216.        
  1217.         <div class="menu_links" style="background-color:{color:Message Icon BG};">
  1218.             <div id="menu_avatar"><img src="{PortraitURL-128}"/></div>
  1219.             <div id="url_and_title">
  1220.                 <div id="blog_url"><a href="{BlogUrl}">{Name}</a></div>
  1221.                 <div id="blog_title">{Title}</div>
  1222.             </div>
  1223.         </div>
  1224.        
  1225.         {block:IfMenuSection3}
  1226.        
  1227.         <!--SECTION 3-->
  1228.        
  1229.         <div class="menu_bottom_sections" >
  1230.             <div class="menu_sections_title">{text:Section 3 Title}</div>
  1231.             <div class="menu_minititles_and_data">Expand</div>
  1232.         </div>
  1233.        
  1234.         <!--SECTION 3 CONTENT-->
  1235.        
  1236.         <div class="bottom_sections_content" style="text-align:justify;">{text:Section 3 Content}</div>
  1237.         {/block:IfMenuSection3}
  1238.        
  1239.         {block:IfMenuSection4}
  1240.        
  1241.         <!--SECTION 4-->
  1242.        
  1243.         <div class="menu_bottom_sections">
  1244.             <div class="menu_sections_title">{text:Section 4 Title}</div>
  1245.         </div>
  1246.        
  1247.         <!--SECTION 4 CONTENT-->
  1248.        
  1249.         <div class="bottom_sections_content column">
  1250.        
  1251.         <!-----YOU CAN EITHER EDIT THE LINKS (INSERT YOUR URL, IMG ADDRESSES AND LINK TITLES) OR YOU CAN DELETE THE CODE BELOW AND WRITE YOUR OWN CONTENT. TO DISABLE THIS SECTION, GO BACK TO THE THEME OPTIONS PANEL AND TURN OFF THE 'MENU SECTION 4' OPTION. SAME GOES FOR MENU SECTION 5 BELOW------>
  1252.      
  1253.             <div><a href="/"><img src="http://static.tumblr.com/0cdn90j/ANXnpfduu/attachment13.png" class="additional_links_icons"><div class="additional_links">link1link2link3</div></a></div>
  1254.            
  1255.             <div><a href="/"><img src="http://static.tumblr.com/0cdn90j/S2dnpfdml/quaver3.png" class="additional_links_icons"><div class="additional_links">Link 2</div></a></div>
  1256.            
  1257.             <div><a href="/"><img src="http://static.tumblr.com/0cdn90j/wT3npfdr9/blog1.png" class="additional_links_icons"><div class="additional_links">Link 3</div></a></div>
  1258.            
  1259.             <div><a href="/"><img src="http://static.tumblr.com/0cdn90j/gKTnpfdss/twitter1.png" class="additional_links_icons"><div class="additional_links">soundcloudcloud</div></a></div>
  1260.            
  1261.             <div><a href="/"><img src="http://static.tumblr.com/0cdn90j/gQBnpfdty/list-1.png" class="additional_links_icons"><div class="additional_links">Link 5</div></a></div>
  1262.            
  1263.             <div><a href="/"><img src="http://static.tumblr.com/0cdn90j/JLlnpfeyr/deviantart3.png" class="additional_links_icons"><div class="additional_links">Link 6</div></a></div>
  1264.            
  1265.         <!--END EDITING-->  
  1266.        
  1267.         </div>
  1268.         {/block:IfMenuSection4}
  1269.        
  1270.         {block:IfMenuSection5}
  1271.        
  1272.         <!--SECTION 5-->
  1273.        
  1274.         <div class="menu_bottom_sections" style="margin-bottom:0;">
  1275.             <div class="menu_sections_title">{text:Section 5 Title}</div>
  1276.         </div>
  1277.        
  1278.         <!--SECTION 5 CONTENT-->
  1279.        
  1280.         <div class="bottom_sections_content">
  1281.        
  1282.             <!--START EDITING-->
  1283.            
  1284.             <span><a href="/">Link 1</a></span>
  1285.             <span><a href="/">Link 2</a></span>
  1286.             <span><a href="/">Link 3</a></span>
  1287.            
  1288.             <!--END EDITING-->
  1289.            
  1290.         </div>
  1291.         {/block:IfMenuSection5}
  1292.        
  1293.      </div>
  1294.      
  1295.      <!------------------END USER MENU------------------>
  1296.      {/block:IfUserMenu}
  1297.      
  1298.  
  1299.     <div id="scrolltotop"><i class="fa fa-angle-up" aria-hidden="true"></i></div>
  1300.    
  1301.     <!------------------SCRIPTS------------------>
  1302.    
  1303.     <script type="text/javascript" src="http://static.tumblr.com/iuggpng/bGqm4yfv9/jquery-1.7.2.js"></script><script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script><script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>{block:IndexPage}{block:ifInfiniteScroll}<script src="http://static.tumblr.com/0cdn90j/vsOo9wcfa/infinitescroll.js"></script>{/block:ifInfiniteScroll}<script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.min.js"></script>{/block:IndexPage}
  1304.     <script>
  1305.         $(document).ready(function(){
  1306.             $('.photo-slideshow').pxuPhotoset({
  1307.                 lightbox:true,
  1308.                 rounded:false,
  1309.                 gutter:'{select:Photoset Gutter}px',
  1310.                 photoset:'.photo-slideshow',
  1311.                 photoWrap:'.photo-data',
  1312.                 photo:'.pxu-photo'
  1313.             });
  1314.             {block:IndexPage}
  1315.             var $container = $('#posts_container');
  1316.             $container.masonry({itemSelector:'#posts'});
  1317.             $container.imagesLoaded(function(){
  1318.                 $container.masonry();
  1319.                 $container.find('#posts').animate({opacity:1, zIndex:1});
  1320.             });
  1321.             {block:ifInfiniteScroll}
  1322.             $container.infinitescroll({
  1323.                 itemSelector:'#posts',
  1324.                 navSelector:'.navigation',
  1325.                 nextSelector:'.navigation a',
  1326.                 loadingImg:'',
  1327.                 loadingText:'<em></em>',
  1328.                 bufferPx:2000
  1329.             },
  1330.             function (newElements){
  1331.                 var $newElems = $(newElements);
  1332.                 resizeVideos();
  1333.                 $newElems.find('.photo-slideshow').pxuPhotoset({
  1334.                     lightbox:true,
  1335.                     rounded:false,
  1336.                     gutter:'{select:Photoset Gutter}px',
  1337.                     photoset:'.photo-slideshow',
  1338.                     photoWrap:'.photo-data',
  1339.                     photo:'.pxu-photo'
  1340.                 },
  1341.                 function(){
  1342.                     $container.masonry();
  1343.                 });
  1344.                 $newElems.imagesLoaded(function(){
  1345.                     $container.masonry('appended', $newElems);
  1346.                     $newElems.animate({opacity:1, zIndex:1});
  1347.                 });
  1348.             });
  1349.             {/block:ifInfiniteScroll}
  1350.             {/block:IndexPage}
  1351.         });
  1352.     </script>
  1353.     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.4/SmoothScroll.js"></script><script src="http://static.tumblr.com/0cdn90j/glvnidntk/jquery.style-my-tooltips.js"></script>
  1354.     <script>
  1355.         (function($){
  1356.             $(document).ready(function(){
  1357.                 $("[title]").style_my_tooltips({
  1358.                     tip_follows_cursor:true,
  1359.                     tip_delay_time:0,
  1360.                     tip_fade_speed:100,
  1361.                     attribute:"title"
  1362.                 });
  1363.             });
  1364.         })(jQuery);
  1365.     </script>
  1366.     <script type="text/javascript">
  1367.         $(document).ready(function(){
  1368.             $(window).scroll(function(){
  1369.                 if ($(this).scrollTop() > 400) {$('#scrolltotop').stop().animate({right:'0px'});}
  1370.                 else {$('#scrolltotop').stop().animate({right:'-50px'});}
  1371.             });
  1372.             $('#scrolltotop').click(function(){
  1373.                 $("html, body").animate({scrollTop:0}, 800);
  1374.                 return false;
  1375.             });
  1376.         });
  1377.     </script>
  1378.     <script>
  1379.     $('a.poplight[href^=#]').click(function(){
  1380.         var popID = $(this).attr('rel');
  1381.         var popURL = $(this).attr('href');
  1382.         var query = popURL.split('?');
  1383.         var dim = query[1].split('&');
  1384.         var popWidth = dim[0].split('=')[1];
  1385.         $('#' + popID).fadeIn().css({'width':Number(popWidth)}).prepend();
  1386.         var popMargTop = ($('#' + popID).height() + 80) / 2;
  1387.         var popMargLeft = ($('#' + popID).width() + 80) / 2;
  1388.         $('#' + popID).css({
  1389.             'margin-top': -popMargTop,
  1390.             'margin-left': -popMargLeft
  1391.         });
  1392.         $('body').append('<div id="fade"></div>');
  1393.         $('#fade').css({'filter':'alpha(opacity=80)'}).fadeIn();
  1394.         return false;
  1395.     });
  1396.     $('a.close, #fade').live('click', function(){
  1397.         $('#fade, .popup_block').fadeOut(function(){
  1398.             $('#fade, a.close').remove();  
  1399.         });
  1400.         return false;
  1401.     });
  1402.     </script>
  1403.     <script type="text/javascript">
  1404.         $(document).ready(function(){
  1405.             $(function(){
  1406.                 $('#user_icon_container').live('click',function(){
  1407.                     $('#user_menu').toggle();
  1408.                 });
  1409.             });
  1410.             $(".bottom_sections_content").hide();
  1411.             $(".menu_bottom_sections").click(function(){
  1412.                 $(this).next(".bottom_sections_content").slideToggle(500);
  1413.             });
  1414.         });
  1415.     </script>
  1416.  
  1417. </body>
  1418. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!