API tools faq
paste
Advertisement
ochizukes

Lilith V1.0

ochizukes
Jul 14th, 2014
2,259
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 52.00 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. Lilith v1.0
  4. Terms of Use: http://maomuthemes.tumblr.com/#tou
  5. Support: http://maomuthemes.tumblr.com/ask
  6.  
  7. This theme is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International license.
  8.  
  9. http://creativecommons.org/licenses/by-nc-nd/4.0/
  10.  
  11. Please check out my theme shop! http://maomu.storenvy.com
  12.  
  13. -->
  14.  
  15. <!DOCTYPE html>
  16. <head>
  17.  
  18. <!-- META -->
  19.  
  20. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  21. <title>{Title}{block:PostTitle}: {PostTitle}{/block:PostTitle}</title>
  22. {block:Description}
  23. <meta name="description" content="{MetaDescription}" />
  24. {/block:Description}
  25. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  26. <!--[if lt IE 9]>
  27. <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
  28. <![endif]-->
  29.  
  30. <!-- LINK REL -->
  31.  
  32. <link rel="shortcut icon" href="{image:Favicon}"/>
  33. <link rel="apple-touch-icon" href="{PortraitURL-128}"/>
  34. <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
  35. <link href="http://fonts.googleapis.com/css?family=Maven+Pro" rel="stylesheet" type="text/css"/>
  36. <link href='http://fonts.googleapis.com/css?family=Cousine:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
  37.  
  38. <!-- IMAGES -->
  39.  
  40. <meta name="image:BG 1" content="http://static.tumblr.com/b8d5aeba1645c6781d2081406510ddc9/at44twr/b6On8pmzy/tumblr_static_8o61lkohsvks04kocc8g8gokg.png"/>
  41. <meta name="image:BG 2" content="http://static.tumblr.com/a600f9d21771b33754dd32d0d4258f60/at44twr/Yhsn8oqpq/tumblr_static_7trmxatzhi80ccgwk0w04os04.jpg"/>
  42. <meta name="image:BG 3" content="http://static.tumblr.com/fefa985bd46e609bf9463ef482284efc/at44twr/27Un8pmvh/tumblr_static_4fkzn11cqjggkoccgkk48o8sk.jpg"/>
  43. <meta name="image:Favicon" content=""/>
  44. <meta name="image:Portrait" content="http://static.tumblr.com/38dfc8b4e28b10dae7cb437fb42bb60f/at44twr/Rvsn8pjoy/tumblr_static_b4a7cdx95zk80w0k0kkkow8gk.jpg"/>
  45. <meta name="image:Post Section BGs" content=""/>
  46.  
  47. <!-- COLORS -->
  48.  
  49. <meta name="color:BG 1" content="#000000"/>
  50. <meta name="color:Page Title" content="#ffffff"/>
  51. <meta name="color:Header Bar BG" content="#000000"/>
  52. <meta name="color:Header Bar Borders" content="#ffffff"/>
  53. <meta name="color:Navigation Dots" content="#ffffff"/>
  54. <meta name="color:BG 2" content="#ffffff"/>
  55. <meta name="color:Post Section BGs" content="#000000"/>
  56. <meta name="color:Post Section Borders" content="#ffffff"/>
  57. <meta name="color:Post Section Headers" content="#2e2e2e"/>
  58. <meta name="color:Post Header Text" content="#ffffff"/>
  59. <meta name="color:Left Gradient" content="#ffffff"/>
  60. <meta name="color:Right Gradient" content="#000000"/>
  61. <meta name="color:Description Text" content="#000000"/>
  62. <meta name="color:Post BG" content="#000000"/>
  63. <meta name="color:Text" content="#c6c6c6"/>
  64. <meta name="color:Link" content="#f0bfb3"/>
  65. <meta name="color:Link Hover" content="#ffffff"/>
  66. <meta name="color:Blockquote" content="#bebebe"/>
  67. <meta name="color:Post Border Top" content="#ffffff"/>
  68. <meta name="color:Post Border Left" content="#b3b3b3"/>
  69. <meta name="color:Post Border Right" content="#b3b3b3"/>
  70. <meta name="color:Post Border Bottom" content="#ffffff"/>
  71. <meta name="color:Perma BG" content="#222222"/>
  72. <meta name="color:Perma Text" content="#ffffff"/>
  73. <meta name="color:Post Title BG" content="#222222"/>
  74. <meta name="color:Post Title Border" content="#bad8eb"/>
  75. <meta name="color:Post Title Text" content="#bad8eb"/>
  76. <meta name="color:Chat Border" content="#f0bfb3"/>
  77. <meta name="color:Chat Text" content="#c6c6c6"/>
  78. <meta name="color:Chat Title" content="#c6c6c6"/>
  79. <meta name="color:Link BG" content="#222222"/>
  80. <meta name="color:Link Border" content="#888888"/>
  81. <meta name="color:Link Text" content="#f0bfb3"/>
  82. <meta name="color:Message BG" content=""/>
  83. <meta name="color:Message Icon" content=""/>
  84. <meta name="color:Message Icon BG" content=""/>
  85. <meta name="color:Message Text" content=""/>
  86. <meta name="color:Quote BG" content="#222222"/>
  87. <meta name="color:Quote Border" content="#ede5f3"/>
  88. <meta name="color:Quote Text" content="#cab1da"/>
  89. <meta name="color:Popular Tags" content=""/>
  90. <meta name="color:Extra Links" content=""/>
  91. <meta name="color:BG 3" content=""/>
  92. <meta name="color:Playlist Title" content="#ffffff"/>
  93. <meta name="color:Song Title" content="#bad8eb"/>
  94. <meta name="color:Song Title BG" content="#ffffff"/>
  95.  
  96. <!-- ON/OFF -->
  97.  
  98. <meta name="if:Light Tumblr Controls" content="0"/>
  99. <meta name="if:Tile BG 1" content="1"/>
  100. <meta name="if:Tile BG 2" content="0"/>
  101. <meta name="if:Tile BG 3" content="0"/>
  102. <meta name="if:Social Media" content="1"/>
  103. <meta name="if:Transparent BGs" content="0"/>
  104. <meta name="if:Caption" content="1"/>
  105. <meta name="if:Tag Cloud" content="1"/>
  106. <meta name="if:Light Playlist BGs" content="1"/>
  107.  
  108. <!-- TEXT -->
  109.  
  110. <meta name="text:Facebook" content="/"/>
  111. <meta name="text:Twitter" content="/"/>
  112. <meta name="text:Pinterest" content="/"/>
  113. <meta name="text:Google Plus" content="/"/>
  114. <meta name="text:Vimeo" content="/"/>
  115. <meta name="text:Flickr" content="/"/>
  116. <meta name="text:Linkedin" content="/"/>
  117. <meta name="text:Behance" content="/"/>
  118. <meta name="text:Instagram" content="/"/>
  119. <meta name="text:YouTube" content="/"/>
  120. <meta name="text:Blogger" content="/"/>
  121. <meta name="text:Skype" content="/"/>
  122. <meta name="text:Wordpress" content="/"/>
  123. <meta name="text:Dribbble" content="/"/>
  124. <meta name="text:Soundcloud" content="/"/>
  125.  
  126. <meta name="text:Tag Count" content="30"/>
  127. <meta name="text:Link1" content="link 1"/>
  128. <meta name="text:Link1 URL" content="/"/>
  129. <meta name="text:Link2" content="link 2"/>
  130. <meta name="text:Link2 URL" content="/"/>
  131. <meta name="text:Link3" content="link 3"/>
  132. <meta name="text:Link3 URL" content="/"/>
  133. <meta name="text:Link4" content="link 4"/>
  134. <meta name="text:Link4 URL" content="/"/>
  135.  
  136. <meta name="text:Song Pixel" content="http://media.tumblr.com/tumblr_m7vybiAx4t1r6o8v2.gif"/>
  137. <meta name="text:Song1 MP3" content=".mp3"/>
  138. <meta name="text:Song1 Album Art" content="https://38.media.tumblr.com/97907ccb20a974ba6cc45ed97c152ec2/tumblr_n8rpfi5wCN1th2eq2o1_400.jpg"/>
  139. <meta name="text:Song1 Title" content="title"/>
  140. <meta name="text:Song2 MP3" content=".mp3"/>
  141. <meta name="text:Song2 Album Art" content="https://38.media.tumblr.com/97907ccb20a974ba6cc45ed97c152ec2/tumblr_n8rpfi5wCN1th2eq2o1_400.jpg"/>
  142. <meta name="text:Song2 Title" content="title"/>
  143. <meta name="text:Song3 MP3" content=".mp3"/>
  144. <meta name="text:Song3 Album Art" content="https://38.media.tumblr.com/97907ccb20a974ba6cc45ed97c152ec2/tumblr_n8rpfi5wCN1th2eq2o1_400.jpg"/>
  145. <meta name="text:Song3 Title" content="title"/>
  146. <meta name="text:Song4 MP3" content=".mp3"/>
  147. <meta name="text:Song4 Album Art" content="https://38.media.tumblr.com/97907ccb20a974ba6cc45ed97c152ec2/tumblr_n8rpfi5wCN1th2eq2o1_400.jpg"/>
  148. <meta name="text:Song4 Title" content="title"/>
  149. <meta name="text:Song5 MP3" content=".mp3"/>
  150. <meta name="text:Song5 Album Art" content="https://38.media.tumblr.com/97907ccb20a974ba6cc45ed97c152ec2/tumblr_n8rpfi5wCN1th2eq2o1_400.jpg"/>
  151. <meta name="text:Song5 Title" content="title"/>
  152. <meta name="text:Song6 MP3" content=".mp3"/>
  153. <meta name="text:Song6 Album Art" content="https://38.media.tumblr.com/97907ccb20a974ba6cc45ed97c152ec2/tumblr_n8rpfi5wCN1th2eq2o1_400.jpg"/>
  154. <meta name="text:Song6 Title" content="title"/>
  155. <meta name="text:Song7 MP3" content=".mp3"/>
  156. <meta name="text:Song7 Album Art" content="https://38.media.tumblr.com/97907ccb20a974ba6cc45ed97c152ec2/tumblr_n8rpfi5wCN1th2eq2o1_400.jpg"/>
  157. <meta name="text:Song7 Title" content="title"/>
  158. <meta name="text:Song8 MP3" content=".mp3"/>
  159. <meta name="text:Song8 Album Art" content="https://38.media.tumblr.com/97907ccb20a974ba6cc45ed97c152ec2/tumblr_n8rpfi5wCN1th2eq2o1_400.jpg"/>
  160. <meta name="text:Song8 Title" content="title"/>
  161. <meta name="text:Song9 MP3" content=".mp3"/>
  162. <meta name="text:Song9 Album Art" content="https://38.media.tumblr.com/97907ccb20a974ba6cc45ed97c152ec2/tumblr_n8rpfi5wCN1th2eq2o1_400.jpg"/>
  163. <meta name="text:Song9 Title" content="title"/>
  164.  
  165. <!-- SELECT -->
  166.  
  167. <meta name="select:BG Color" content="0,0,0" title="Dark"/>
  168. <meta name="select:BG Color" content="255,255,255" title="Light"/>
  169.  
  170. <meta name="select:BG Transparency" content="1" title="Opaque"/>
  171. <meta name="select:BG Transparency" content=".9" title="90%"/>
  172. <meta name="select:BG Transparency" content=".8" title="80%"/>
  173. <meta name="select:BG Transparency" content=".7" title="70%"/>
  174. <meta name="select:BG Transparency" content=".6" title="60%"/>
  175. <meta name="select:BG Transparency" content=".5" title="50%"/>
  176. <meta name="select:BG Transparency" content=".4" title="40%"/>
  177. <meta name="select:BG Transparency" content=".3" title="30%"/>
  178. <meta name="select:BG Transparency" content=".2" title="20%"/>
  179. <meta name="select:BG Transparency" content=".1" title="10%"/>
  180. <meta name="select:BG Transparency" content=".0" title="Transparent"/>
  181.  
  182. <style type="text/css">
  183.  
  184. /* TUMBLR CONTROLS */
  185.  
  186. {block:IfLightTumblrControls}
  187.  
  188. iframe#tumblr_controls { opacity:0.35; position:fixed !important; -webkit-filter:invert(100%); -moz-filter:invert(100%); -o-filter:invert(100%); -ms-filter:invert(100%); filter:invert(100%); -webkit-transition:all 0.8s ease-out; -moz-transition:all 0.8s ease-out; transition:all 0.8s ease-out; z-index:9999; }
  189.  
  190. iframe#tumblr_controls:hover { opacity:0.8;  -webkit-filter:invert(100%); -moz-filter:invert(100%); -o-filter:invert(100%); -ms-filter:invert(100%); filter:invert(100%); -webkit-transition:all 0.4s ease-out; -moz-transition:all 0.4s ease-out; transition:all 0.4s ease-out ;z-index:9999; }
  191.  
  192. {/block:IfLightTumblrControls}
  193.  
  194. /* ----------- BODY + SECTION PROPERTIES ----------- */
  195.  
  196. /* Sets all sections to full height unless otherwise specified */
  197.  
  198. html, body, .container, .cbp-fbscroller, .cbp-fbscroller section { color:{color:Text}; font:0.92em cousine; line-height:1.364em; height:100%; margin:0; }
  199.  
  200. /* Links + Links on mouseover */
  201.  
  202. a { color:{color:Link}; text-decoration:none; transition-duration:0.5s; -webkit-transition-duration:0.5s; }
  203.  
  204. a:hover { color:{color:Link Hover}; transition-duration:0.5s; -webkit-transition-duration:0.5s; }
  205.  
  206. /* Preformatted + small text */
  207.  
  208. pre { display:block; font:0.90em cousine; letter-spacing:0.091em; padding-left:0.182px; width:100%; word-wrap:break-word; }
  209.  
  210. small { font:.90em cousine; letter-spacing:0.091em; }
  211.  
  212. /* Blockquotes */
  213.  
  214. blockquote { border-left:1px solid {color:Blockquote}; margin-left:12px; padding-top:1px; padding-left:12px; padding-bottom:1px; padding-right:0; width:90%; word-wrap:break-word; }
  215.  
  216. /* Aligns posts from the left rather than the center. */
  217.  
  218. figure, .links-box p { margin:0; }
  219.  
  220. /* Restricts photos to post margins */
  221.  
  222. img { max-width:100%; border:0; }
  223.    
  224. /* ----------- SECTION NAVIGATION -----------  */
  225.  
  226. /* Navigation dots */
  227.  
  228. .cbp-fbscroller > nav { position:fixed; right:70px; top:20%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%); z-index:9999; }
  229.  
  230. .cbp-fbscroller > nav a { color:transparent; display:block; height:60px; position:relative; }
  231.  
  232. .cbp-fbscroller > nav a:after { border:3px solid {color:Navigation Dots}; content:''; height:6px; position:absolute; width:6px; }
  233.  
  234. .cbp-fbscroller > nav a:hover:after { background:rgba(255,255,255,0.6); }
  235.  
  236. .cbp-fbscroller > nav a.cbp-fbcurrent:hover:after { background:rgba(255,255,255,0.6); }
  237.  
  238. .cbp-fbscroller > nav a.cbp-fbcurrent:after { background:transparent; }
  239.  
  240. /* ----------- SECTION CONTENT -----------  */
  241.  
  242. /* This creates the parallax scrolling effect */
  243.  
  244. .cbp-fbscroller section { background-attachment:fixed; background-position:top center; background-repeat:no-repeat; background-size:cover; position:relative; }
  245.  
  246. /* ----------- PAGE TITLE SECTION ----------- */
  247.  
  248. /* Page title background */
  249.  
  250. #page-title { background-color:{color:BG 1}; background-image:url('{image:BG 1}'); {block:IfTileBG1} background-repeat:repeat; background-size:auto; {/block:IfTileBG1} height:250px; }
  251.  
  252. /* Page title */
  253.  
  254. .page-title { color:{color:Page Title}; font:1.75em maven pro; letter-spacing:0.249em; padding-top:115px; text-align:center; text-transform:uppercase; }
  255.  
  256. /* ----------- HEADER BAR -----------  */
  257.  
  258. #header-bar { background:{color:Header Bar BG}; border-top:1px solid {color:Header Bar Borders}; border-bottom:1px solid {color:Header Bar Borders}; height:50px; opacity:.5; width:100%; }
  259.  
  260. /* ----------- POST SECTION -----------  */
  261.  
  262. /* Post section background */
  263.  
  264. #posts { background-color:{color:BG 2}; background-image:url('{image:BG 2}'); {block:IfTileBG2}background-repeat:repeat; background-size:auto; {/block:IfTileBG2} }
  265.  
  266. /* Three-column layout */
  267.  
  268. #wrapper { margin:0 auto; width:1304px; }
  269.  
  270. /* Left column */
  271.  
  272. #primary { float:left; width:337px; }
  273.  
  274. /* Center column */
  275.  
  276. #content { float:left; width:645px; }
  277.  
  278. /* Right column */
  279.  
  280. #secondary { float:left; width:322px; }
  281.  
  282. /* ----------- LEFT SIDEBAR (PRIMARY) -----------  */
  283.  
  284. /* Description + social media box wrap */
  285.  
  286. .sidebar { padding-right:15px; }
  287.  
  288. /* Gradient upper half of description box */
  289.  
  290. #description-box { background:-webkit-linear-gradient(left top, {color:Left Gradient} , {color:Right Gradient});  background:-o-linear-gradient(bottom right, {color:Left Gradient}, {color:Right Gradient});  background:-moz-linear-gradient(bottom right, {color:Left Gradient}, {color:Right Gradient});  background:linear-gradient(to bottom right, {color:Left Gradient} , {color:Right Gradient}); border:1px solid {color:Post Section Borders}; border-bottom:none; height:105px; width:320px; }
  291.  
  292. /* Portrait image */
  293.  
  294. .portrait { {block:IfNotTransparentBGs} background:{color:Post Section BGs}; {/block:IfNotTransparentBGs} {block:ifTransparentBGs} background-color:rgba({select:BG Color}, {select:BG Transparency}); {/block:IfTransparentBGs} display:block; margin-left:auto; margin-right:auto; margin-top:70px; padding:7px; width:80px; }
  295.  
  296. /* Lower half of description box */
  297.  
  298. .description-box { background-image:url('{image:Post Section BGs}'); {block:IfNotTransparentBGs} background-color:{color:Post Section BGs}; {/block:IfNotTransparentBGs} {block:ifTransparentBGs} background-color:rgba({select:BG Color}, {select:BG Transparency}); {/block:IfTransparentBGs} border-left:1px solid {color:Post Section Borders}; border-right:1px solid {color:Post Section Borders}; border-bottom:1px solid {color:Post Section Borders}; height:auto; width:320px; }
  299.  
  300. /* Description */
  301.  
  302. .description { color:{color:Description Text}; padding:10px; }
  303.  
  304. /* Searchbox wrap */
  305.            
  306. .searchbox { background:{color:Post Section Headers}; border:1px solid {color:Post Section Borders}; border-top:none; font:11px consolas; height:27px; padding:15px; text-align:center; width:290px; }
  307.  
  308.  
  309. /* Search query */
  310.  
  311. .search-text { border:none; border-radius:0; color:{color:Post Section Headers}; font:11px consolas; height:25px; text-align:left; width:290px; }
  312.  
  313. /* Social media + tag coud & links title tabs */
  314.  
  315. .social-title, .links-title { background:{color:Post Section Headers}; border:1px solid {color:Post Section Borders}; border-bottom:none; color:{color:Post Header Text}; display:inline-block; float:left; font:1.767em maven pro; height:25px; letter-spacing:0.1em; padding:10px; width:300px; }
  316.  
  317. /* Social media box */
  318.  
  319. .social-box { background-image:url('{image:Post Section BGs}'); {block:IfNotTransparentBGs} background-color:{color:Post Section BGs}; {/block:IfNotTransparentBGs} {block:ifTransparentBGs} background-color:rgba({select:BG Color}, {select:BG Transparency}); {/block:IfTransparentBGs} border:1px solid {color:Post Section Borders}; border-top:none; display:inline-block; float:left; height:auto; padding-left:5px; padding-top:4px; padding-bottom:7px; width:315px; }
  320.    
  321. /* Social media icons wrap */
  322.  
  323. .media { margin-left:-4px; margin-top:8px; text-align:center; }
  324.  
  325. /* Social media icons + on mouseover */
  326.        
  327. .icons { margin-right:-1px; opacity:1; transition-duration:0.5s; -webkit-transition-duration:0.5s; width:55px; }
  328.  
  329. .icons:hover { opacity:.65; transition-duration:0.5s; -webkit-transition-duration:0.5s; }
  330.  
  331. /* ----------- POST BOX (CONTENT) -----------  */
  332.  
  333. /* Post box title tab */
  334.  
  335. .main-title { background:{color:Post Section Headers}; border:1px solid {color:Post Section Borders}; border-bottom:none; color:{color:Post Header Text}; display:inline-block; float:left; font:1.767em maven pro; height:25px; letter-spacing:0.1em; padding:10px; width:610px; }
  336.  
  337. /* Index, message, archive, etc. */
  338.  
  339. #mobile-menu { display:none; }
  340.  
  341. .navigate { font:0.6em maven pro; letter-spacing:0.098em; text-transform:uppercase; }
  342.  
  343. .navigate a { color:{color:Post Header Text}; }
  344.  
  345. /* Post box */
  346.  
  347. .main { background-image:url('{image:Post Section BGs}'); {block:IfNotTransparentBGs} background-color:{color:Post Section BGs}; {/block:IfNotTransparentBGs} {block:ifTransparentBGs} background-color:rgba({select:BG Color}, {select:BG Transparency}); {/block:IfTransparentBGs} border:1px solid {color:Post Section Borders}; border-top:none; display:inline-block; float:left; height:500px; overflow:auto; padding:80px; padding-top:60px; padding-bottom:40px; width:470px; }
  348.    
  349. /* Posts + on mouseover */
  350.  
  351. .contain, .notecontainer { background:{color:Post BG}; border-top:10px solid {color:Post Border Top}; border-left:10px solid {color:Post Border Left}; border-right:10px solid {color:Post Border Right}; border-bottom:10px solid {color:Post Border Bottom}; line-height:18px; margin-bottom:30px; padding:25px; padding-top:25px; transition-duration:0.5s; -webkit-transition-duration:0.5s; width:400px; }
  352.        
  353. .contain:hover { border-top:10px solid {color:Post Border Left}; border-left:10px solid {color:Post Border Bottom}; border-right:10px solid {color:Post Border Top}; border-bottom:10px solid {color:Post Border Right}; transition-duration:0.5s; -webkit-transition-duration:0.5s; }
  354.  
  355. /* ----------- POST TYPES -----------  */
  356.  
  357. /* Post titles - quote, text, link, chat */
  358.  
  359. .quote-source, .text-title { background:{color:Post Title BG}; border:1px solid {color:Post Title Border}; color:{color:Post Title Text}; font-weight:normal; margin-bottom:5px; padding:10px; text-align:center; width:379px; }
  360.  
  361. .link { background:{color:Link BG}; border:1px solid {color:Link Border}; font-size:1.05em; letter-spacing:0.091em; margin-top:0px; padding:32px; text-align:center; text-transform:uppercase; width:335px; }
  362.  
  363. .link a { color:{color:Link Text}; font-weight:normal; }
  364.  
  365. .chat-title { color:{color:Chat Title}; font-size:1.2em; font-weight:normal; letter-spacing:0.091em; padding-left:10px; text-align:center; width:379px; }
  366.  
  367. /* Video properties */
  368.  
  369. .videoWrapper { height:0; padding-bottom:56.25%; position:relative; }
  370.  
  371. .videoWrapper iframe { height:100%; left:0; position:absolute; top:0; width:100%; }
  372.  
  373. /* Chat line dividers */
  374.  
  375. .chat-line { border-bottom:1px dashed {color:Chat Border}; color:{color:Perma Link}; margin-bottom:3px; padding:5px; width:390px; }
  376.  
  377. /* Quote properties */
  378.  
  379. .quote { background:{color:Quote BG}; border:1px solid {color:Quote Border}; color:{color:Quote Text}; padding:10px; width:379px; }
  380.  
  381. /* Photoset properties */
  382.  
  383. .photoset { max-width:400px; padding-left:12.5px; }
  384.  
  385. /* Message icon (questions) */
  386.  
  387. .mail { border-top:1em solid transparent; border-left:1.5em solid {color:Message Icon}; border-right:1.5em solid {color:Message Icon}; border-bottom:1em solid {color:Message Icon}; display:block; font-size:10px; height:0; position:relative; width:0; }
  388.  
  389. .mail:before { border-top:1em solid {color:Message Icon}; border-left:1.5em solid transparent; border-right:1.5em solid transparent; border-bottom:1em solid transparent; content:''; display:block; font-size:0.8em; left:-1.5em; position:absolute; top:-1.23em; }
  390.    
  391. /* Length of audio player and questions */
  392.  
  393. .tumblr_audio_player, .question-table { max-width:400px; }
  394.  
  395. /* ----------- PERMALINK -----------  */
  396.  
  397. /* Permalink + reblog buttons */
  398.  
  399. .perma { margin-top:-5px; width:400px; }
  400.  
  401. .permalink-wrap { margin-top:-8px; text-align:center; }
  402.  
  403. .permalinks { background:{color:Perma BG}; border-top:4px solid {color:Post Border Top}; border-left:4px solid {color:Post Border Left}; border-right:4px solid {color:Post Border Right}; border-bottom:4px solid {color:Post Border Bottom}; color:{color:Perma Text}; font:0.9em maven pro; font-weight:normal; letter-spacing:0.098em; padding:4px; text-transform:uppercase; }
  404.    
  405. .permalinks a { color:{color:Perma Text}; }
  406.    
  407. .border { border-bottom:1px solid {color:Perma Text}; padding-top:30px; width:400px; }
  408.  
  409. /* Date, notes, via, and source */
  410.  
  411. .permainfo { color:{color:Chat Title}; font-size:1.2em; font-weight:normal; letter-spacing:0.091em; line-height:22px; padding:10px; padding-top:0px; text-align:center; width:375px; }
  412.  
  413. .permainfo a { font-weight:normal; }
  414.  
  415. /* Permalink pagination wrap */
  416.  
  417. #permapage { margin-left:auto; margin-right:auto; text-align:center; }
  418.    
  419. /* Previous + next post */    
  420.  
  421. .permapage { background:{color:Perma BG}; border-top:4px solid {color:Post Border Top}; border-left:4px solid {color:Post Border Left}; border-right:4px solid {color:Post Border Right}; border-bottom:4px solid {color:Post Border Bottom}; color:{color:Perma Text}; padding:7px; padding-bottom:8px; }
  422.  
  423. .permapage a { font-weight:normal; }
  424.  
  425. /* Note container */
  426.  
  427. .notecontainer a { font-weight:normal; }
  428.    
  429. /* Notes */
  430.  
  431. ol.notes { list-style-type:none; margin:25px 0px; padding:0px; }
  432.  
  433. ol.notes li.note { border-top: solid 1px {color:Perma Text}; padding: 10px; }
  434.  
  435. ol.notes li.note img.avatar { height:16px; margin-right:10px; vertical-align:-4px; width:16px; }
  436.  
  437. ol.notes li.note span.action, ol.notes li.note .answer_content, ol.notes li.note blockquote a { font-weight:normal; text-decoration:none; }
  438.  
  439. ol.notes li.note blockquote { border-color:{color:Blockquote}; margin:10px 0px 0px 25px; padding:4px 10px; }
  440.  
  441. /* ----------- PAGINATION -----------  */
  442.  
  443. .pagination { margin-left:auto; margin-right:auto; text-align:center; }
  444.  
  445. .jump_page { background-color:{color:Perma BG}; border-top:4px solid {color:Post Border Top}; border-left:4px solid {color:Post Border Left}; border-right:4px solid {color:Post Border Right}; border-bottom:4px solid {color:Post Border Bottom}; color:{color:Perma Text}; font:0.92em cousine; font-weight:normal; margin-right:10px; padding:5px 10px; text-align:center; text-decoration:none; }
  446.    
  447. .jump_page a { font-weight:normal; }
  448.  
  449. /* ----------- RIGHT SIDEBAR (SECONDARY) -----------  */
  450.                    
  451. /* Tag cloud + extra links box */
  452.  
  453. .links-box { background-image:url('{image:Post Section BGs}'); {block:IfNotTransparentBGs} background-color:{color:Post Section BGs}; {/block:IfNotTransparentBGs} {block:ifTransparentBGs} background-color:rgba({select:BG Color}, {select:BG Transparency}); {/block:IfTransparentBGs} border:1px solid {color:Post Section Borders}; border-top:none; display:inline-block; float:left; font:0.9em maven pro; height:auto; letter-spacing:0.091em; padding-bottom:11px; text-transform:uppercase; width:320px; }
  454.  
  455. .tag-cloud { background:{color:Post BG}; border-bottom:1px solid {color:Perma Text}; font:1.1em cousine; letter-spacing:0px; line-height:15px; padding:10px; text-align:left; text-transform:none; width:274px; }
  456.  
  457. /* Extra links */
  458.  
  459. .ex { display:block; margin-left:auto; margin-right:auto; }
  460.  
  461. .extra-links { background:{color:Post BG}; border-bottom:1px solid {color:Perma Text}; line-height:18px; padding:10px; text-align:left; width:274px; }
  462.    
  463. .tag-cloud a { color:{color:Popular Tags}; }
  464.  
  465. .extra-links a { color:{color:Extra Links}; }
  466.  
  467. /* ----------- MUSIC SECTION -----------  */
  468.  
  469. /* Music Section Background */
  470.  
  471. #playlist { background-color:{color:BG 3}; background-image:url('{image:BG 3}'); {block:IfTileBG3}background-repeat:repeat; background-size:auto;{/block:IfTileBG3} }
  472.  
  473. /* Playlist wrap */
  474.  
  475. .playlist { padding-left:35px; padding-top:50px; text-align:center; }
  476.  
  477. /* Playlist title */
  478.        
  479. #playlist-title { {block:IfNotLightPlaylistBGs} background:rgba(0,0,0,0.5); {/block:IfNotLightPlaylistBGs} {block:IfLightPlaylistBGs} background:rgba(255,255,255,0.5); {/block:IfLightPlaylistBGs} border-bottom:1px solid {color:Playlist Title}; color:{color:Playlist Title}; font:25px maven pro; font-weight:100; letter-spacing:0.249em; margin-left:auto; margin-right:auto; padding:10px; text-transform:uppercase; width:250px; }
  480.  
  481. /* Song wrap + album art */
  482.  
  483. .image-wrap { display:inline-block; height:180px; margin-right:35px; position:relative; width:170px; }
  484.  
  485. .image { {block:IfNotLightPlaylistBGs} background:rgba(0,0,0,0.5); {/block:IfNotLightPlaylistBGs} {block:IfLightPlaylistBGs} background:rgba(255,255,255,0.5); {/block:IfLightPlaylistBGs} float:left; height:180px; overflow:hidden; padding:10px; padding-bottom:10px; position:relative; width:180px; z-index:2; }
  486.  
  487. /* Label wrap + label */
  488.  
  489. .label-wrap { height:148px; left:8px; opacity:1; position:absolute; top:0px; width:126px; z-index:100; }
  490.  
  491. .label { background:{color:Song Title BG}; font:0.9em maven pro; letter-spacing:0.091em; margin:10px 0 0 2px; overflow:hidden; padding:10px; text-align:center; text-transform:uppercase; width:160px; }
  492.  
  493. .label a { color:{color:Song Title}; }
  494.  
  495. /* ----------- POPUP ASK BOX (Mobile menu) -----------  */
  496.  
  497. /* Fade background screen to black */
  498.  
  499. #fade { background:#000; display:none; height:100%; left:0; opacity:.7; position:fixed; top:0; width:100%; z-index:9999; }
  500.  
  501. *html #fade { position:absolute; }
  502.  
  503. /* Popup box */
  504.  
  505. .popup_block { background:{color:Post BG};border-top:5px solid {color:Post Border Top}; border-left:5px solid {color:Post Border Left}; border-right:5px solid {color:Post Border Right}; border-bottom:5px solid {color:Post Border Bottom}; color:{color:Text}; display:none; float:left; height:200px; left:55%; max-width:50%; overflow-x:hidden; overflow-y:scroll; padding:10px; position:fixed; text-align:left; top:65%; z-index:99999; }
  506.  
  507. *html .popup_block { position:absolute; }
  508.  
  509. /* Popup title */
  510.  
  511. .menu-titles { font-size:15px; letter-spacing:1px; line-height:25px; }
  512.  
  513. /* Close button */
  514.  
  515. img.btn_close { float:right; margin: 0 0 0 0; }
  516.  
  517. /* Moves navigation dots over so they don't overlap the right sidebar in smaller screen resolutions */
  518.  
  519. @media screen and (max-width:1490px) { .cbp-fbscroller > nav { right:30px; } }
  520.  
  521. /* ----------- IF 1400PX SCREEN RESOLUTION -----------  */
  522.  
  523. @media screen and (max-width:1399px) { #wrapper { width:1170px; }
  524.  
  525. #content { width:511px; }
  526.    
  527. .main-title { width:475px; }
  528.  
  529. .main { width:335px; }
  530.  
  531. .contain, .photoset, .question-table, .perma, .border, .notecontainer { max-width:250px; }
  532.  
  533. .text-title, .quote-source, .quote, .chat-title { width:229px; }
  534.  
  535. .link { padding:32px; width:190px; }
  536.  
  537. .chat-line { width:240px; }
  538.  
  539. .tumblr_audio_player { height:70px; width:250px; }
  540.  
  541. .permainfo { width:235px; }
  542.    
  543. .image-wrap { height:150px; width:140px; }
  544.  
  545. .image { height:150px; width:150px; }
  546.  
  547. .label { width:130px; } }
  548.  
  549. /* ----------- IF 1260PX SCREEN RESOLUTION -----------  */
  550.  
  551. @media screen and (max-width:1260px) { #wrapper { width:930px; }  
  552.    
  553. #primary { width:217px; }
  554.  
  555. #secondary { width:202px; }
  556.    
  557. #description-box { width:200px; }
  558.  
  559. .portrait { width:60px; }
  560.    
  561. .description-box, .links-box { width:200px; }
  562.  
  563. .description { margin-top:-20px; }
  564.  
  565. .searchbox { width:170px; }
  566.  
  567. .search-text { width:160px; }
  568.  
  569. .tag-title, .tag-box, .social-title, .links-title { width:180px; }
  570.  
  571. .social-box { width:195px; }
  572.  
  573. .icons { width:34px; margin-left:-2px; }
  574.  
  575. .tag-cloud, .extra-links { padding:5px; width:165px; } }
  576.  
  577. /* ----------- IF 1010PX SCREEN RESOLUTION (Tablet) -----------  */
  578.  
  579. @media screen and (max-width:1010px) { #wrapper { width:728px; }
  580.  
  581. #secondary { width:0px; }    
  582.    
  583. .links-title, .links-box { display:none; height:0; width:0; }
  584.  
  585. .image-wrap { height:130px; width:120px; }
  586.  
  587. .image { height:130px; width:130px; }
  588.  
  589. .label { width:110px; } }
  590.  
  591. /* ----------- IF 760PX SCREEN RESOLUTION (Small tablet) -----------  */
  592.  
  593. @media screen and (max-width:760px) { #wrapper { width:430px; }  
  594.    
  595. #primary { width:0px; }
  596.  
  597. #content { width:430px; }
  598.    
  599. #description-box, .description-box, .social-title, .social-box, .searchbox { display:none; width:0px; }
  600.  
  601. .main-title { width:395px; }
  602.  
  603. #mobile-menu { display:inline; }
  604.  
  605. .main { padding:40px; padding-top:30px; padding-bottom:30px; padding-right:15px; width:360px; }
  606.  
  607. .image-wrap { height:100px; width:90px; }
  608.  
  609. .image { height:100px; width:100px; }
  610.  
  611. .label { width:80px; }
  612.    
  613. .popup_block { height:260px; left:48%; max-width:65%; top:50%; } }
  614.  
  615. /* ----------- IF 480PX SCREEN RESOLUTION (Mobile) -----------  */
  616.  
  617. @media screen and (max-width:480px) { body { background-color:{color:BG 2}; background-image: url('{image:BG 2}'); {block:IfTileBG2}background-repeat:repeat; background-size:auto;{/block:IfTileBG2} }
  618.  
  619. .cbp-fbscroller > nav a:after { display:none; }
  620.  
  621. #posts { background:transparent; }
  622.  
  623. #wrapper, #content { width:320px; }
  624.  
  625. #page-title { height:175px; }
  626.  
  627. .page-title { padding-top:75px; }
  628.  
  629. #header-bar { height:43px; }
  630.    
  631. .main-title { border:none; height:23px; margin-top:-59px; position:absolute; width:300px; z-index:9999; }
  632.  
  633. .main { background:transparent; border:none; height:auto; padding:0px; padding-top:15px; padding-bottom:30px; padding-right:0px; width:320px; }
  634.  
  635. #playlist { display:none; }
  636.    
  637. .popup_block { height:230px; left:55%; max-width:65%; top:55%; } }
  638.  
  639. /* somethin */
  640.  
  641. @media screen and (min-height:1200px) { .main { height:880px; } }
  642.  
  643. @media screen and (min-height:1050px) and (max-height:1199px) { .main { height:740px; } }
  644.  
  645. @media screen and (min-height:900px) and (max-height:1049px) { .main { height:640px; } }
  646.  
  647. @media screen and (max-height:600px) { #posts, #playlist { height:150%; } }
  648.  
  649. {CustomCSS}
  650. </style>
  651.  
  652. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  653.  
  654. <!-- POPUP SCRIPT-->
  655.  
  656. <script>
  657. $(document).ready(function() {
  658.  
  659. $('a.poplight[href^=#]').click(function() {
  660.     var popID = $(this).attr('rel');
  661.     var popURL = $(this).attr('href');
  662.  
  663.     var query= popURL.split('?');
  664.     var dim= query[1].split('&');
  665.     var popWidth = dim[0].split('=')[1];
  666.  
  667.     $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://tiny.cc/closeimg" class="btn_close" title="Close Window" alt="Close" /></a>');
  668.  
  669.     var popMargTop = ($('#' + popID).height() + 80) / 2;
  670.     var popMargLeft = ($('#' + popID).width() + 80) / 2;
  671.  
  672.     $('#' + popID).css({
  673.         'margin-top' : -popMargTop,
  674.         'margin-left' : -popMargLeft
  675.     });
  676.  
  677.     $('body').append('<div id="fade"></div>');
  678.     $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
  679.     return false;
  680. });
  681.  
  682. $('a.close, #fade').live('click', function() {
  683.     $('#fade , .popup_block').fadeOut(function() {
  684.         $('#fade, a.close').remove();
  685.     });
  686.     return false;
  687. });
  688. });
  689. </script>
  690.  
  691. <!-- END POPUP SCRIPT -->
  692.  
  693. </head>
  694. <body>
  695.  
  696. <!-- PARALLAX SCROLL WRAP -->
  697.  
  698. <div id="cbp-fbscroller" class="cbp-fbscroller">
  699.    
  700. <!-- NAVIGATION DOTS -->    
  701.    
  702.     <nav>
  703.         <a href="#page-title" class="cbp-fbcurrent"></a>
  704.         <a href="#posts"></a>
  705.         <a href="#playlist"></a>
  706.     </nav>
  707.      
  708. <!-- END NAVIGATION DOTS -->
  709.  
  710. <!-- PAGE TITLE SECTION -->
  711.      
  712. <section id="page-title">
  713.  
  714.     <div class="page-title">{Title}</div>
  715.  
  716. </section><!-- END PAGE TITLE SECTION -->
  717.  
  718. <!-- POST SECTION -->
  719.    
  720. <section id="posts">
  721.  
  722. <!-- HEADER BAR -->
  723.    
  724.     <div id="header-bar"></div><br>
  725.    
  726. <!-- END HEADER BAR -->
  727.  
  728. <!-- THREE-COLUMN LAYOUT -->
  729.    
  730. <div id="wrapper">
  731.  
  732. <!-- LEFT COLUMN -->
  733.    
  734. <div id="primary">
  735.     <div class="sidebar">
  736.    
  737. <!-- TOP DESCRIPTION BOX -->
  738.    
  739.       <div id="description-box">
  740.         <img class="portrait" src="{image:Portrait}" alt=""/>
  741.       </div>
  742.      
  743. <!-- END TOP DESCRIPTION BOX -->
  744.    
  745. <!-- BOTTOM DESCRIPTION BOX -->
  746.      
  747.       <div class="description-box">
  748.         <br><br><br><br>
  749.         <div class="description">{Description}</div>
  750.       </div>
  751.    
  752. <!-- END BOTTOM DESCRIPTION BOX -->
  753.  
  754. <!-- SEARCH BOX -->
  755.  
  756.     <div class="searchbox">
  757.  
  758.         <form onsubmit="return tagSearch(this)">
  759.         <input type="text" class="search-text" name="tag" value=" ➨ Search..." onfocus="if (this.value == ") {this.value="}" onblur="if (this.value == ") {this.value="}">
  760.         </form>
  761.  
  762.     </div><br>
  763.  
  764. <!-- END SEARCH BOX -->
  765.  
  766. {block:IfSocialMedia}
  767.  
  768. <!-- SOCIAL MEDIA -->
  769.  
  770.     <div class="social-title">Social Media</div>
  771.     <div class="social-box">
  772.     <div class="media">
  773.        
  774.         {block:IfFacebook}
  775.         <a href="{text:Facebook}"><img class="icons" alt="" src="http://static.tumblr.com/3ko0y3m/Ewbn87d2v/facebook.png"/></a>
  776.         {/block:IfFacebook}
  777.        
  778.         {block:IfTwitter}
  779.         <a href="{text:Twitter}"><img class="icons" alt="" src="http://static.tumblr.com/3ko0y3m/yPZn87dcm/twitter.png"/></a>
  780.         {/block:IfTwitter}
  781.        
  782.         {block:IfPinterest}
  783.         <a href="{text:Pinterest}"><img class="icons" alt="" src="http://static.tumblr.com/3ko0y3m/zoVn87dca/pinterest.png"/></a>
  784.         {/block:IfPinterest}
  785.        
  786.         {block:IfGooglePlus}
  787.         <a href="{text:Google Plus}"><img class="icons" alt="" src="http://static.tumblr.com/3ko0y3m/lK6n87dby/google__.png"/></a>
  788.         {/block:IfGooglePlus}
  789.        
  790.         {block:IfVimeo}
  791.         <a href="{text:Vimeo}"><img class="icons" alt="" src="http://static.tumblr.com/3ko0y3m/ZLtn87dd2/vimeo.png"/></a>
  792.         {/block:IfVimeo}
  793.    
  794.         {block:IfFlickr}
  795.         <a href="{text:Flickr}"><img class="icons" alt="" src="http://static.tumblr.com/3ko0y3m/Q3xn87dbw/flickr.png"/></a>
  796.         {/block:IfFlickr}
  797.        
  798.         {block:IfLinkedin}
  799.         <a href="{text:Linkedin}"><img class="icons" alt="" src="http://static.tumblr.com/3ko0y3m/tFJn87dc6/linkedin.png"/></a>
  800.         {/block:IfLinkedin}
  801.        
  802.         {block:IfBehance}
  803.         <a href="{text:Behance}"><img class="icons" alt="" src="http://static.tumblr.com/3ko0y3m/sAfn87dbe/behance.png"/></a>
  804.         {/block:IfBehance}
  805.        
  806.         {block:IfInstagram}
  807.         <a href="{text:Instagram}"><img class="icons" alt="" src="http://static.tumblr.com/3ko0y3m/pTen87dc1/instagram.png"/></a>
  808.         {/block:IfInstagram}
  809.        
  810.         {block:IfYouTube}
  811.         <a href="{text:YouTube}"><img class="icons" alt="" src="http://static.tumblr.com/3ko0y3m/fltn87dd8/youtube.png"/></a>
  812.         {/block:IfYouTube}
  813.  
  814.         {block:IfBlogger}
  815.         <a href="{text:Blogger}"><img class="icons" alt="" src="http://static.tumblr.com/3ko0y3m/V0Kn87dbk/blogger.png"/></a>
  816.         {/block:IfBlogger}
  817.        
  818.         {block:IfSkype}
  819.         <a href="{text:Skype}"><img class="icons" alt="" src="http://static.tumblr.com/3ko0y3m/lyOn87dce/skype.png"/></a>
  820.         {/block:IfSkype}
  821.        
  822.         {block:IfWordpress}
  823.         <a href="{text:Wordpress}"><img class="icons" alt="" src="http://static.tumblr.com/3ko0y3m/MMxn87dd2/wordpress.png"/></a>
  824.         {/block:IfWordpress}
  825.        
  826.         {block:IfDribbble}
  827.         <a href="{text:Dribbble}"><img class="icons" alt="" src="http://static.tumblr.com/3ko0y3m/97yn87dbp/dribbble.png"/></a>
  828.         {/block:IfDribbble}
  829.        
  830.         {block:IfSoundcloud}
  831.         <a href="{text:Soundcloud}"><img class="icons" alt="" src="http://static.tumblr.com/3ko0y3m/6kCn87dci/soundcloud.png"/></a>
  832.         {/block:IfSoundcloud}
  833.  
  834.     </div>
  835.     </div>
  836.    
  837. <!-- END SOCIAL MEDIA -->
  838.  
  839. {/block:IfSocialMedia}
  840.    
  841.     </div>
  842. </div>
  843.  
  844. <!-- END LEFT COLUMN -->
  845.  
  846. <!-- CENTER COLUMN -->
  847.    
  848. <div id="content">
  849.  
  850.     <div class="main-title">Posts — <span class="navigate"><a href="/">index</a> &middot; <a href="/ask">mail</a> &middot; <a href="/archive">archive</a><a id="mobile-menu" href="#?w=500" rel="popup_name" class="poplight"> &middot; ✕</a></span>
  851.     </div>
  852.    
  853. <div class="main" role="main">
  854.  
  855. <!-- POSTS -->
  856.  
  857. {block:Posts}
  858. <div class="contain">
  859.  
  860. <!-- PHOTO -->
  861.  
  862. {block:Photo}
  863.     <article>
  864.         <figure>
  865.        
  866.         {LinkOpenTag}
  867.             <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>
  868.         {LinkCloseTag}
  869.  
  870.         </figure>
  871.     </article>
  872. {/block:Photo}
  873.  
  874. <!-- END PHOTO -->
  875.  
  876. <!-- PHOTOSET -->
  877.  
  878. {block:Photoset}
  879.     <article>
  880.         <figure>
  881.  
  882.         <div class="photoset" style="margin-left:-24px;">{Photoset}</div>
  883.             {block:HighRes}
  884.                 {PhotoURL-HighRes}
  885.             {/block:HighRes}
  886.  
  887.         </figure>
  888.     </article>
  889. {/block:Photoset}
  890.  
  891. <!-- END PHOTOSET -->
  892.  
  893. <!-- TEXT -->
  894.  
  895. {block:Text}
  896.     <article>
  897.         <figure>
  898.        
  899.         {block:Title}
  900.             <header>
  901.             <div class="text-title">{Title}</div>
  902.             </header>
  903.         {/block:Title}
  904.  
  905.         <div style="max-width:400px;">{Body}</div>
  906.  
  907.         </figure>
  908.     </article>
  909. {/block:Text}
  910.  
  911. <!-- END TEXT -->
  912.  
  913. <!-- LINK -->
  914.  
  915. {block:Link}
  916.     <article>
  917.         <figure>
  918.  
  919.         <h2 class="link">
  920.             <a href="{URL}">{Name} &#62;&#62;</a>
  921.         </h2>
  922.  
  923.         {block:Description}
  924.             {Description}
  925.         {/block:Description}
  926.  
  927.         </figure>
  928.     </article>
  929. {/block:Link}
  930.  
  931. <!-- END LINK -->
  932.  
  933. <!-- CHAT -->
  934.  
  935. {block:Chat}
  936.     <article>
  937.         <figure>
  938.        
  939.         {block:Title}
  940.             <header>
  941.             <div class="chat-title">{Title}</div><br>
  942.             </header>
  943.         {/block:Title}
  944.  
  945.                 {block:Lines}
  946.                     <div class="chat-line">
  947.                    
  948.                         {block:Label}
  949.                             {Label}
  950.                         {/block:Label}
  951.                    
  952.                     {Line}
  953.                     </div>
  954.                 {/block:Lines}
  955.            
  956.         </figure>
  957.     </article>
  958. {/block:Chat}
  959.  
  960. <!-- END CHAT -->
  961.  
  962. <!-- QUOTE -->
  963.  
  964. {block:Quote}
  965.     <article>
  966.         <figure>
  967.        
  968.         {block:Source}
  969.             <div class="quote-source">Quote by {Source}</div>
  970.         {/block:Source}
  971.  
  972.         <div class="quote">{Quote}</div>
  973.  
  974.         </figure>
  975.     </article>
  976. {/block:Quote}
  977.  
  978. <!-- END QUOTE -->
  979.  
  980. <!-- AUDIO -->
  981.  
  982. {block:Audio}
  983.     <article>
  984.         <figure>
  985.        
  986.         {AudioEmbed}
  987.  
  988.         </figure>
  989.     </article>
  990. {/block:Audio}
  991.  
  992. <!-- END AUDIO -->
  993.  
  994. <!-- VIDEO -->
  995.  
  996. {block:Video}
  997.     <article>
  998.         <figure>
  999.        
  1000.             <div class="videoWrapper">{VideoEmbed-400}</div>
  1001.        
  1002.         </figure>
  1003.     </article>
  1004. {/block:Video}
  1005.  
  1006. <!-- END VIDEO -->
  1007.  
  1008. <!-- MESSAGE -->
  1009.  
  1010. {block:Answer}
  1011.     <article>
  1012.         <figure>
  1013.        
  1014.         <table class="question-table" style="padding-bottom:5px;margin-bottom:3px;"><tr>
  1015.        
  1016.             <td style="border:1px solid {color:Message Icon};vertical-align:top;padding:10px;background:{color:Message Icon BG};height:auto;">
  1017.            
  1018.                 <div class="mail"></div>
  1019.            
  1020.             </td>
  1021.        
  1022.             <td style="border:1px solid {color:Post Border};vertical-align:top;background:{color:Message BG};color:{color:Message Text};padding:8px;line-height:17px;">
  1023.            
  1024.                 {lang:Asker asked}: {Question}
  1025.            
  1026.             </td>
  1027.        
  1028.         </tr></table>
  1029.  
  1030.         {Answer}
  1031.  
  1032.         </figure>
  1033.     </article>
  1034. {/block:Answer}
  1035.  
  1036. <!-- END MESSAGE -->
  1037.  
  1038. <!-- CAPTION -->
  1039.  
  1040. {block:IfCaption}
  1041.  
  1042.     {block:Caption}
  1043.         {Caption}
  1044.     {/block:Caption}
  1045.    
  1046. {/block:IfCaption}
  1047.  
  1048. {block:IfNotCaption}
  1049.     {block:PermalinkPage}
  1050.    
  1051.         {block:Caption}
  1052.             {Caption}
  1053.         {/block:Caption}
  1054.        
  1055.     {/block:PermalinkPage}
  1056. {/block:IfNotCaption}
  1057.  
  1058. <!-- END CAPTION -->
  1059.  
  1060. <!-- PERMALINKS -->
  1061.  
  1062. {block:IndexPage}
  1063.     {block:Date}
  1064.         <div class="perma">
  1065.         <div class="border"></div>
  1066.         <div class="permalink-wrap">
  1067.             <a class="permalinks" href="{Permalink}" style="padding-left:9px;padding-right:9px;">Permalink</a> &nbsp;
  1068.             <a class="permalinks" href="{ReblogURL}" style="padding-left:17px;padding-right:17px;">Reblog</a><br>
  1069.         </div>    
  1070.         </div>
  1071.     {/block:Date}
  1072. {/block:IndexPage}
  1073.    
  1074. <!-- END PERMALINKS -->
  1075.  
  1076. <!-- TAGS -->
  1077.  
  1078. {block:PermalinkPage}
  1079.     <br>{block:HasTags}
  1080.    
  1081.         {block:Tags}
  1082.             <a href="{TagURL}"><span style="font-weight:normal;color:{color:Perma Text};line-height:19px;">#{Tag}</span></a>
  1083.         {/block:Tags}
  1084.        
  1085.     {/block:HasTags}
  1086. {/block:PermalinkPage}
  1087.    
  1088. <!-- END TAGS -->
  1089.  
  1090. <!-- REMOVE VIA AND SOUCE -->
  1091.  
  1092. <div style="display:none;">
  1093.  
  1094.     {block:ContentSource}    
  1095.         <a href="{SourceURL}" title="{lang:Originally from ReblogRootName}">Source</a>  
  1096.     {/block:ContentSource}
  1097.    
  1098.     {block:RebloggedFrom}
  1099.         <a title="Via" href="{ReblogParentURL}">Via</a>
  1100.     {/block:RebloggedFrom}
  1101.    
  1102. </div>
  1103.  
  1104. <!-- END REMOVE -->
  1105.  
  1106. </div><!-- Ends contain div -->
  1107.  
  1108. <!-- PERMALINK PAGINATION -->
  1109.  
  1110. {block:PermalinkPagination}
  1111.  
  1112.     <div id="permapage">
  1113.    
  1114.     <!-- PREVIOUS POST -->
  1115.  
  1116.         {block:PreviousPost}
  1117.             <a class="permapage" href="{PreviousPost}"> ← previous post </a>&nbsp;
  1118.         {/block:PreviousPost}
  1119.  
  1120.     <!-- END PREVIOUS POST -->
  1121.    
  1122.     <!-- NEXT POST -->
  1123.        
  1124.         {block:NextPost}
  1125.             <a class="permapage" href="{NextPost}"> next post → </a>
  1126.         {/block:NextPost}    
  1127.        
  1128.     <!-- END NEXT POST -->
  1129.    
  1130.     </div><br>
  1131.  
  1132. {/block:PermalinkPagination}
  1133.  
  1134. <!-- END PERMALINK PAGINATION -->
  1135.  
  1136. <!-- NOTE CONTAINER -->
  1137.  
  1138. {block:PermalinkPage}
  1139.     {block:Date}<br>
  1140.    
  1141.         <div class="notecontainer">
  1142.        
  1143.             <header>
  1144.                 <h2 class="permainfo">
  1145.                     Posted {TimeAgo} on {DayOfWeek}, {Month} {DayOfMonth}{DayOfMonthSuffix} with {NoteCountWithLabel}. {block:RebloggedFrom}Reblogged from <a href="{ReblogParentURL}">{ReblogParentName}.</a> Originally posted by <a href="{ReblogRootURL}">{ReblogRootName}</a>.{/block:RebloggedFrom}
  1146.                 </h2>
  1147.             </header>
  1148.        
  1149.         {PostNotes}
  1150.        
  1151.         </div>
  1152.    
  1153.     {/block:Date}
  1154. {/block:PermalinkPage}
  1155.  
  1156. <!-- END NOTE CONTAINER -->
  1157.  
  1158. {/block:Posts}
  1159.  
  1160. <!-- END POSTS -->
  1161.  
  1162. <!-- PAGINATION -->
  1163.  
  1164. {block:Pagination}
  1165.     <div class="pagination">
  1166.         {block:PreviousPage}
  1167.             <a href="{PreviousPage}" class="jump_page">&laquo;</a>
  1168.         {/block:PreviousPage}
  1169.    
  1170.         {block:JumpPagination length="3"}
  1171.        
  1172.             {block:CurrentPage}
  1173.                 <span class="jump_page">{PageNumber}</span>
  1174.             {/block:CurrentPage}
  1175.        
  1176.             {block:JumpPage}
  1177.                 <a class="jump_page" href="{URL}">{PageNumber}</a>
  1178.             {/block:JumpPage}
  1179.        
  1180.         {/block:JumpPagination}
  1181.    
  1182.         {block:NextPage}
  1183.             <a href="{NextPage}" class="jump_page">&raquo;</a>
  1184.         {/block:NextPage}
  1185.     </div>
  1186. {/block:Pagination}
  1187.  
  1188. <!-- END PAGINATION -->
  1189.  
  1190.     </div>
  1191. </div>
  1192.  
  1193. <!-- END CENTER COLUMN -->
  1194.  
  1195. <!-- RIGHT COLUMN -->
  1196.    
  1197. <div id="secondary">
  1198.  
  1199. <!-- NAVIGATION LINKS -->
  1200.        
  1201.     <div class="links-title">{block:IfTagCloud}Tags + {/block:IfTagCloud}Links</div>
  1202.     <div class="links-box"><br>
  1203.     <div class="ex" align="center">
  1204.    
  1205.         {block:IfTagCloud}
  1206.        
  1207.             <p class="tag-cloud">Popular Tags:<br><br>
  1208.    
  1209.                 <span id="tagCloud"></span><script type="text/javascript" src="http://post-theory.com/public/tagcloud/{Name}?dev=w5drv2deqtau&sort=frequency&limit={text:Tag Count}&mincount=2&scale=false&pad=4" async="async"></script>
  1210.            
  1211.             </p>
  1212.            
  1213.         {/block:IfTagCloud}
  1214.        
  1215.         {block:IfLink1}
  1216.         <p class="extra-links"><a href="{text:Link1 URL}"> {text:Link1}</a></p>
  1217.         {/block:IfLink1}
  1218.        
  1219.         {block:IfLink2}
  1220.         <p class="extra-links"><a href="{text:Link2 URL}"> {text:Link2}</a></p>
  1221.         {/block:IfLink2}
  1222.        
  1223.         {block:IfLink3}
  1224.         <p class="extra-links"><a href="{text:Link3 URL}"> {text:Link3}</a></p>
  1225.         {/block:IfLink3}
  1226.        
  1227.         {block:IfLink4}
  1228.         <p class="extra-links"><a href="{text:Link4 URL}"> {text:Link4}</a></p>
  1229.         {/block:IfLink4}
  1230.        
  1231.         <p class="extra-links" style="border:none;"><a href="http://maomuthemes.tumblr.com"> Theme</a></p>
  1232.    
  1233.     </div>
  1234.     </div>    
  1235.  
  1236. <!-- END NAVIGATION LINKS -->
  1237.        
  1238. </div><!-- END RIGHT COLUMN -->
  1239. </div><!-- END THREE-COLUMN LAYOUT -->
  1240. </section><!-- END POST SECTION -->
  1241.  
  1242. <!-- MUSIC SECTION -->
  1243.    
  1244. <section id="playlist">
  1245.  
  1246. <div class="playlist">
  1247.  
  1248. <div id="playlist-title">my playlist</div><br><br>
  1249.  
  1250. <!-- SONG 1 -->
  1251.  
  1252. <div class="image-wrap">
  1253.  
  1254.     <div class="label-wrap"><div class="label">
  1255.  
  1256.         <a target="_blank" href="{text:Song1 MP3}"><img alt="" src="{text:Song Pixel}"/> {text:Song1 Title}</a>
  1257.  
  1258.     </div></div>
  1259.    
  1260. <!-- album art -->
  1261.  
  1262.     <div class="image">
  1263.    
  1264.         <img alt="" src="{text:Song1 Album Art}"/>
  1265.        
  1266.     </div><!-- end album art -->
  1267.    
  1268. </div>
  1269.  
  1270. <!-- END SONG 1 -->
  1271.  
  1272. <!-- SONG 2 -->
  1273.  
  1274. <div class="image-wrap">
  1275.  
  1276.     <div class="label-wrap"><div class="label">
  1277.  
  1278.         <a target="_blank" href="{text:Song2 MP3}"><img alt="" src="{text:Song Pixel}"/> {text:Song2 Title}</a>
  1279.  
  1280.     </div></div>
  1281.    
  1282. <!-- album art -->
  1283.  
  1284.     <div class="image">
  1285.    
  1286.         <img alt="" src="{text:Song2 Album Art}"/>
  1287.        
  1288.     </div><!-- end album art -->
  1289.    
  1290. </div>
  1291.  
  1292. <!-- END SONG 2 -->
  1293.  
  1294. <!-- SONG 3 -->
  1295.  
  1296. <div class="image-wrap">
  1297.  
  1298.     <div class="label-wrap"><div class="label">
  1299.  
  1300.         <a target="_blank" href="{text:Song3 MP3}"><img alt="" src="{text:Song Pixel}"/> {text:Song3 Title}</a>
  1301.  
  1302.     </div></div>
  1303.    
  1304. <!-- album art -->
  1305.  
  1306.     <div class="image">
  1307.    
  1308.         <img alt="" src="{text:Song3 Album Art}"/>
  1309.        
  1310.     </div><!-- end album art -->
  1311.    
  1312. </div><br><br><br>
  1313.  
  1314. <!-- END SONG 3 -->
  1315.  
  1316. <!-- SONG 4 -->
  1317.  
  1318. <div class="image-wrap">
  1319.  
  1320.     <div class="label-wrap"><div class="label">
  1321.  
  1322.         <a target="_blank" href="{text:Song4 MP3}"><img alt="" src="{text:Song Pixel}"/> {text:Song4 Title}</a>
  1323.  
  1324.     </div></div>
  1325.    
  1326. <!-- album art -->
  1327.  
  1328.     <div class="image">
  1329.    
  1330.         <img alt="" src="{text:Song4 Album Art}"/>
  1331.        
  1332.     </div><!-- end album art -->
  1333.    
  1334. </div>
  1335.  
  1336. <!-- END SONG 4 -->
  1337.  
  1338. <!-- SONG 5 -->
  1339.  
  1340. <div class="image-wrap">
  1341.  
  1342.     <div class="label-wrap"><div class="label">
  1343.  
  1344.         <a target="_blank" href="{text:Song5 MP3}"><img alt="" src="{text:Song Pixel}"/> {text:Song5 Title}</a>
  1345.  
  1346.     </div></div>
  1347.    
  1348. <!-- album art -->
  1349.  
  1350.     <div class="image">
  1351.    
  1352.         <img alt="" src="{text:Song5 Album Art}"/>
  1353.        
  1354.     </div><!-- end album art -->
  1355.    
  1356. </div>
  1357.  
  1358. <!-- END SONG 5 -->
  1359.  
  1360. <!-- SONG 6 -->
  1361.  
  1362. <div class="image-wrap">
  1363.  
  1364.     <div class="label-wrap"><div class="label">
  1365.  
  1366.         <a target="_blank" href="{text:Song6 MP3}"><img alt="" src="{text:Song Pixel}"/> {text:Song6 Title}</a>
  1367.  
  1368.     </div></div>
  1369.    
  1370. <!-- album art -->
  1371.  
  1372.     <div class="image">
  1373.    
  1374.         <img alt="" src="{text:Song6 Album Art}"/>
  1375.        
  1376.     </div><!-- end album art -->
  1377.    
  1378. </div><br><br><br>
  1379.  
  1380. <!-- END SONG 6 -->
  1381.  
  1382. <!-- SONG 7 -->
  1383.  
  1384. <div class="image-wrap">
  1385.  
  1386.     <div class="label-wrap"><div class="label">
  1387.  
  1388.         <a target="_blank" href="{text:Song7 MP3}"><img alt="" src="{text:Song Pixel}"/> {text:Song7 Title}</a>
  1389.  
  1390.     </div></div>
  1391.    
  1392. <!-- album art -->
  1393.  
  1394.     <div class="image">
  1395.    
  1396.         <img alt="" src="{text:Song7 Album Art}"/>
  1397.        
  1398.     </div><!-- end album art -->
  1399.    
  1400. </div>
  1401.  
  1402. <!-- END SONG 7 -->
  1403.  
  1404. <!-- SONG 8 -->
  1405.  
  1406. <div class="image-wrap">
  1407.  
  1408.     <div class="label-wrap"><div class="label">
  1409.  
  1410.         <a target="_blank" href="{text:Song8 MP3}"><img alt="" src="{text:Song Pixel}"/> {text:Song8 Title}</a>
  1411.  
  1412.     </div></div>
  1413.    
  1414. <!-- album art -->
  1415.  
  1416.     <div class="image">
  1417.    
  1418.         <img alt="" src="{text:Song8 Album Art}"/>
  1419.        
  1420.     </div><!-- end album art -->
  1421.    
  1422. </div>
  1423.  
  1424. <!-- END SONG 8 -->
  1425.  
  1426. <!-- SONG 9 -->
  1427.  
  1428. <div class="image-wrap">
  1429.  
  1430.     <div class="label-wrap"><div class="label">
  1431.  
  1432.         <a target="_blank" href="{text:Song9 MP3}"><img alt="" src="{text:Song Pixel}"/> {text:Song9 Title}</a>
  1433.  
  1434.     </div></div>
  1435.    
  1436. <!-- album art -->
  1437.  
  1438.     <div class="image">
  1439.    
  1440.         <img alt="" src="{text:Song9 Album Art}"/>
  1441.        
  1442.     </div><!-- end album art -->
  1443.    
  1444. </div><br><br><br>
  1445.  
  1446. <!-- END SONG 9 -->
  1447.  
  1448. </div>
  1449.  
  1450. </section><!-- END MUSIC SECTION -->
  1451.  
  1452. </div><!-- END PARALLAX SCROLLING WRAP -->
  1453.  
  1454. <!-- MOBILE MENU -->
  1455.  
  1456. <div id="popup_name" class="popup_block">
  1457.  
  1458.     <span class="menu-titles">Description</span><br>{Description}<br><br>
  1459.    
  1460. {block:IfSocialMedia}
  1461.    
  1462.     <span class="menu-titles">Social Media</span><br>
  1463.    
  1464.         {block:IfFacebook}
  1465.         <a href="{text:Facebook}"><img class="icons" alt="" src="http://static.tumblr.com/3ko0y3m/Ewbn87d2v/facebook.png"/></a>
  1466.         {/block:IfFacebook}
  1467.        
  1468.         {block:IfTwitter}
  1469.         <a href="{text:Twitter}"><img class="icons" alt="" src="http://static.tumblr.com/3ko0y3m/yPZn87dcm/twitter.png"/></a>
  1470.         {/block:IfTwitter}
  1471.        
  1472.         {block:IfPinterest}
  1473.         <a href="{text:Pinterest}"><img class="icons" alt="" src="http://static.tumblr.com/3ko0y3m/zoVn87dca/pinterest.png"/></a>
  1474.         {/block:IfPinterest}
  1475.        
  1476.         {block:IfGooglePlus}
  1477.         <a href="{text:Google Plus}"><img class="icons" alt="" src="http://static.tumblr.com/3ko0y3m/lK6n87dby/google__.png"/></a>
  1478.         {/block:IfGooglePlus}
  1479.        
  1480.         {block:IfVimeo}
  1481.         <a href="{text:Vimeo}"><img class="icons" alt="" src="http://static.tumblr.com/3ko0y3m/ZLtn87dd2/vimeo.png"/></a>
  1482.         {/block:IfVimeo}
  1483.        
  1484.         {block:IfFlickr}
  1485.         <a href="{text:Flickr}"><img class="icons" alt="" src="http://static.tumblr.com/3ko0y3m/Q3xn87dbw/flickr.png"/></a>
  1486.         {/block:IfFlickr}
  1487.        
  1488.         {block:IfLinkedin}
  1489.         <a href="{text:Linkedin}"><img class="icons" alt="" src="http://static.tumblr.com/3ko0y3m/tFJn87dc6/linkedin.png"/></a>
  1490.         {/block:IfLinkedin}
  1491.        
  1492.         {block:IfBehance}
  1493.         <a href="{text:Behance}"><img class="icons" alt="" src="http://static.tumblr.com/3ko0y3m/sAfn87dbe/behance.png"/></a>
  1494.         {/block:IfBehance}
  1495.        
  1496.         {block:IfInstagram}
  1497.         <a href="{text:Instagram}"><img class="icons" alt="" src="http://static.tumblr.com/3ko0y3m/pTen87dc1/instagram.png"/></a>
  1498.         {/block:IfInstagram}
  1499.        
  1500.         {block:IfYouTube}
  1501.         <a href="{text:YouTube}"><img class="icons" alt="" src="http://static.tumblr.com/3ko0y3m/fltn87dd8/youtube.png"/></a>
  1502.         {/block:IfYouTube}
  1503.        
  1504.         {block:IfBlogger}
  1505.         <a href="{text:Blogger}"><img class="icons" alt="" src="http://static.tumblr.com/3ko0y3m/V0Kn87dbk/blogger.png"/></a>
  1506.         {/block:IfBlogger}
  1507.        
  1508.         {block:IfSkype}
  1509.         <a href="{text:Skype}"><img class="icons" alt="" src="http://static.tumblr.com/3ko0y3m/lyOn87dce/skype.png"/></a>
  1510.         {/block:IfSkype}
  1511.        
  1512.         {block:IfWordpress}
  1513.         <a href="{text:Wordpress}"><img class="icons" alt="" src="http://static.tumblr.com/3ko0y3m/MMxn87dd2/wordpress.png"/></a>
  1514.         {/block:IfWordpress}
  1515.        
  1516.         {block:IfDribbble}
  1517.         <a href="{text:Dribbble}"><img class="icons" alt="" src="http://static.tumblr.com/3ko0y3m/97yn87dbp/dribbble.png"/></a>
  1518.         {/block:IfDribbble}
  1519.        
  1520.         {block:IfSoundcloud}
  1521.         <a href="{text:Soundcloud}"><img class="icons" alt="" src="http://static.tumblr.com/3ko0y3m/6kCn87dci/soundcloud.png"/></a>
  1522.         {/block:IfSoundcloud}<br><br>
  1523.        
  1524.     {/block:IfSocialMedia}
  1525.    
  1526. <span class="menu-titles">Extra Links</span><br>
  1527.    
  1528.     {block:IfLink1}
  1529.     <span><a href="{text:Link1 URL}"> {text:Link1}</a></span> &middot;
  1530.     {/block:IfLink1}
  1531.        
  1532.     {block:IfLink2}
  1533.     <span><a href="{text:Link2 URL}"> {text:Link2}</a></span> &middot;
  1534.     {/block:IfLink2}
  1535.        
  1536.     {block:IfLink3}
  1537.     <span><a href="{text:Link3 URL}"> {text:Link3}</a></span> &middot;
  1538.     {/block:IfLink3}
  1539.        
  1540.     {block:IfLink4}
  1541.     <span><a href="{text:Link4 URL}"> {text:Link4}</a></span> &middot;
  1542.     {/block:IfLink4}
  1543.    
  1544.     {block:IfLink5}
  1545.     <span><a href="{text:Link5 URL}"> {text:Link5}</a></span>
  1546.     {/block:IfLink5}
  1547.    
  1548. </div><!-- END MOBILE MENU -->
  1549.  
  1550. </body>
  1551. </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!