thetruththemes

Triforce - Courage

Aug 4th, 2015 (edited)
1,804
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 54.53 KB | None | 0 0
  1. <html>
  2. <!---------------------------------------------------------------------------
  3.  
  4. ,,
  5. ,GG,
  6. GIIG
  7. Gl''lG
  8. ;G' 'G;
  9. GP YG
  10. oQ' 'Qo -Tʀɪғᴏʀᴄᴇ ᴛʜᴇᴍᴇ ʙʏ
  11. *TGGGGGGGGGGGGQQQ, ,QQQGGGGGGGGGGGGP* ɴʏᴄᴛᴏᴛʜᴇᴍᴇs.ᴛᴜᴍʙʟʀ.ᴄᴏᴍ
  12. *TGo, '* *' ,oGP*
  13. *TGo, ɴʏᴄᴛ□ᴛʜᴇᴍᴇs ,oGP* -ᴘʟᴇᴀsᴇ ʀᴇғᴇʀ ᴛᴏ ᴏʀɪɢɪɴᴀʟ
  14. *TGio,, ,,oiGP* ᴘᴏsᴛ ʟɪɴᴋ ғᴏʀ ʀᴜʟᴇs ᴀɴᴅ ᴍɪsᴄ
  15. ;GGT' 'TGG:
  16. GG' ii 'GG -ᴅᴏ ɴᴏᴛ ʀᴇᴍᴏᴠᴇ ᴀɴʏ ᴏғ ᴛʜᴇ
  17. GG' ,GG, 'GG ᴄᴏᴅᴇ ᴄʀᴇᴅɪᴛ ᴏʀ ᴍᴏᴠᴇ ɪᴛ ᴛᴏ
  18. GG* oGGGGo. *GG ᴀ ᴘᴀɢᴇ.
  19. oG* oGG* *GGo. *Go
  20. ;GG;oGG* *GGo;GG;
  21. ,GGGT* *TGGG,
  22. ""' '""
  23.  
  24. ---------------------------------------------------------------------------->
  25.  
  26. <!-- hover titles -->
  27. <link href="style-my-tooltips.css" rel="stylesheet" type="text/css" />
  28. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script><script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script><script>(function($){$(document).ready(function(){$("[title]").style_my_tooltips();});})(jQuery);</script>
  29.  
  30. <head>
  31.  
  32. {block:Ifcustomfavicon}<link rel="shortcut icon" href="{image:favicon}"/>{/block:Ifcustomfavicon}
  33. {block:IfNotcustomfavicon}<link rel="shortcut icon" href="{favicon}"/>{/block:IfNotcustomfavicon}
  34.  
  35. <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
  36. <title>{Title}</title>
  37. {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
  38.  
  39. <!-------------------------------- IMAGES ---------------------------------->
  40. <meta name="image:Background" content="http://static.tumblr.com/u5vz4xb/rXkojycpg/theme6_2.png"/>
  41. <meta name="image:Power Triforce BG" content="http://static.tumblr.com/u5vz4xb/ARDok042o/theme2.png"/>
  42. <meta name="image:Power Triforce Hover BG" content="http://static.tumblr.com/u5vz4xb/vC7ok042w/theme5.png"/>
  43. <meta name="image:Wisdom Triforce BG" content="http://static.tumblr.com/u5vz4xb/NgSok0433/theme3.png"/>
  44. <meta name="image:Wisdom Triforce Hover BG" content="http://static.tumblr.com/u5vz4xb/vC7ok042w/theme5.png"/>
  45. <meta name="image:Courage Triforce BG" content="http://static.tumblr.com/u5vz4xb/jlKok043f/theme4.png"/>
  46. <meta name="image:Courage Triforce Hover BG" content="http://static.tumblr.com/u5vz4xb/vC7ok042w/theme5.png"/>
  47. <meta name="image:Custom Cursor" content="http://static.tumblr.com/u5vz4xb/1fZo99aws/force_cursor.png"/>
  48. <meta name="image:Custom Cursor Links" content="http://static.tumblr.com/u5vz4xb/1fZo99aws/force_cursor.png"/>
  49. <meta name="image:Favicon" content="https://41.media.tumblr.com/ec013e085af242e22d2db201527b6dc9/tumblr_nrb6lhcASH1s60yyoo8_r1_75sq.png"/>
  50. <meta name="image:Default Audio Pic" content="http://static.tumblr.com/9ba5dad06a998cb6565e3fd88dbfd801/u5vz4xb/n6xnskqcl/tumblr_static_1egr9qlsieg0os84cg0gkg0kk.png"/>
  51.  
  52. <!-------------------------------- COLORS ---------------------------------->
  53. <!-- Full Body -->
  54. <meta name="color:Background" content="#878e6c"/>
  55. <meta name="color:Scroll BG" content="#878e6c"/>
  56. <meta name="color:Scroll Thumb" content="#8f494e"/>
  57. <!-- Gameplay HUD -->
  58. <meta name="color:Hearts" content="#cc7d68"/>
  59. <meta name="color:Hearts Outline" content="#f0d1c4"/>
  60. <meta name="color:Energy" content="#9bb370"/>
  61. <meta name="color:Energy Outline" content="#517950"/>
  62. <meta name="color:Rupee Dark" content="#547b3e"/>
  63. <meta name="color:Rupee Light" content="#69b04d"/>
  64. <meta name="color:Rupee Text" content="#dfcfbc"/>
  65. <meta name="color:A Button BG" content="#cc7d68"/>
  66. <meta name="color:A Button Border" content="#a2545a"/>
  67. <meta name="color:B Button BG" content="#b2c870"/>
  68. <meta name="color:B Button Border" content="#60845f"/>
  69. <!-- Sidebar -->
  70. <meta name="color:Power Triforce BG" content="#878e6c"/>
  71. <meta name="color:Power Triforce Hover BG" content="#878e6c"/>
  72. <meta name="color:Wisdom Triforce BG" content="#878e6c"/>
  73. <meta name="color:Wisdom Triforce Hover BG" content="#878e6c"/>
  74. <meta name="color:Courage Triforce BG" content="#878e6c"/>
  75. <meta name="color:Courage Triforce Hover BG" content="#878e6c"/>
  76. <meta name="color:Triforce Text" content="#6b7b55"/>
  77. <meta name="color:Items Links BG" content="#cebfac"/>
  78. <meta name="color:Items Links Border" content="#dfcfbc"/>
  79. <meta name="color:Items Links Hover BG" content="#f8e394"/>
  80. <meta name="color:Items Rings" content="#b36855"/>
  81. <meta name="color:Items BG" content="#8f494e"/>
  82. <meta name="color:Description Text" content="#dfcfbc"/>
  83. <meta name="color:Description Links" content="#e58f79"/>
  84. <meta name="color:Description Links Hover" content="#eda885"/>
  85. <!-- Posts -->
  86. <meta name="color:Posts BG" content="#e6d9c5"/>
  87. <meta name="color:Posts 2nd BG" content="#dfcfbc"/>
  88. <meta name="color:Posts Title" content="#a18d83"/>
  89. <meta name="color:Posts Text" content="#a29895"/>
  90. <meta name="color:Posts Bold" content="#a18d83"/>
  91. <meta name="color:Posts Italic" content="#a29895"/>
  92. <meta name="color:Posts Code" content="#a8a8a8"/>
  93. <meta name="color:Posts Code BG" content="#cccccc"/>
  94. <meta name="color:Posts Links" content="#c06e59"/>
  95. <meta name="color:Posts Links Hover" content="#d4927e"/>
  96. <meta name="color:Posts Blockquote" content="#e9bf6f"/>
  97. <meta name="color:Audio Player" content="#697e00"/>
  98. <!-- Post Endings -->
  99. <meta name="color:Postending Symbols" content="#dfcfbc"/>
  100. <meta name="color:Postending Symbols BG" content="#8f494e"/>
  101. <meta name="color:Postending Symbols Border" content="#b36855"/>
  102. <meta name="color:Postending Symbols Hover" content="#f8e394"/>
  103. <meta name="color:Postending Symbols BG Hover" content="#b36855"/>
  104. <meta name="color:Postending Symbols Border Hover" content="#b36855"/>
  105. <meta name="color:Postending Symbols Liked Post" content="#cc7d68"/>
  106. <meta name="color:Postending Text" content="#c9a58e"/>
  107. <meta name="color:Postending Text BG" content="#ab624f"/>
  108. <meta name="color:Postending Text Links" content="#deae67"/>
  109. <meta name="color:Postending Text Links Hover" content="#f8e394"/>
  110. <meta name="color:Postending Border" content="#c06e59"/>
  111. <!-- Permalink -->
  112. <meta name="color:Permalink Text" content="#e58f79"/>
  113. <meta name="color:Permalink Links" content="#dfcfbc"/>
  114. <meta name="color:Permalink Links Hover" content="#eda885"/>
  115. <meta name="color:Permalink Blockquote" content="#91967b"/>
  116. <!-- Misc. -->
  117. <meta name="color:Link Hover BG" content="#24282a"/>
  118. <meta name="color:Link Hover Text" content="#e2d9c6"/>
  119. <meta name="color:Selection BG" content="#a4b096"/>
  120. <meta name="color:Selection Text" content="#f5f1e5"/>
  121. <meta name="color:Selection Links" content="#f5f1e5"/>
  122.  
  123. <!-------------------------------- OPTIONS --------------------------------->
  124. <meta name="select:Description Text Alignment" content="justify" title="justify"/>
  125. <meta name="select:Description Text Alignment" content="right" title="right"/>
  126. <meta name="select:Description Text Alignment" content="left" title="left"/>
  127. <meta name="select:Description Text Alignment" content="center" title="center"/>
  128.  
  129. <meta name="if:White Tumblr Controls" content="0"/>
  130. <meta name="if:Small Tumblr Controls" content="1"/>
  131. <meta name="if:Gameplay HUD" content="1"/>
  132. <meta name="if:Hover for Sidebar" content="1"/>
  133. <meta name="if:Monochrome Photos" content="0"/>
  134. <meta name="if:Fade Photos" content="1"/>
  135. <meta name="if:Postending Symbols for Indexpage" content="1"/>
  136. <meta name="if:Custom Cursor" content="1"/>
  137. <meta name="if:Custom Favicon" content="1"/>
  138. <meta name="if:Dark Audio Player" content="0"/>
  139.  
  140. <!--------------------------------- TEXTS ---------------------------------->
  141. <meta name="text:Health Hearts" content="&#xf004; &#xf004; &#xf004; &#xf004; &#xf004; &#xf004; &#xf004; &#xf004; &#xf004; &#xf004; &#xf004; &#xf004; &#xf004;"/>
  142. <meta name="text:Energy Length" content="100px" />
  143. <meta name="text:Rupees" content="475"/>
  144. <meta name="text:Ask Verb" content="wondered" />
  145. <meta name="text:Link 1 Image" content="http://static.tumblr.com/u5vz4xb/1kUojyfno/08.png" />
  146. <meta name="text:Link 1 URL" content="/" />
  147. <meta name="text:Link 1 Hover" content="Link 1" />
  148. <meta name="text:Link 2 Image" content="http://static.tumblr.com/u5vz4xb/RAgojyfnz/09.png" />
  149. <meta name="text:Link 2 URL" content="/" />
  150. <meta name="text:Link 2 Hover" content="Link 2" />
  151. <meta name="text:Link 3 Image" content="http://static.tumblr.com/u5vz4xb/7vdojyfo5/10.png" />
  152. <meta name="text:Link 3 URL" content="/" />
  153. <meta name="text:Link 3 Hover" content="Link 3" />
  154. <meta name="text:Link 4 Image" content="http://static.tumblr.com/u5vz4xb/A33ojyfoc/12.png" />
  155. <meta name="text:Link 4 URL" content="/" />
  156. <meta name="text:Link 4 Hover" content="Link 4" />
  157. <meta name="text:Link 5 Image" content="http://static.tumblr.com/u5vz4xb/Heeojyfot/11.png" />
  158. <meta name="text:Link 5 URL" content="/" />
  159. <meta name="text:Link 5 Hover" content="Link 5" />
  160. <meta name="text:Link 6 Image" content="http://static.tumblr.com/u5vz4xb/WSbojyfoy/07.png" />
  161. <meta name="text:Link 6 URL" content="/" />
  162. <meta name="text:Link 6 Hover" content="Link 6" />
  163.  
  164. <!-- symbol font (like the credit) -->
  165. <script src="https://use.fontawesome.com/a71f6a22b2.js"></script>
  166. <!-- custom font 1/2 -->
  167. <link href="https://fonts.googleapis.com/css?family=Cinzel|Montserrat:400,700" rel="stylesheet">
  168.  
  169. </head>
  170.  
  171. <style type="text/css">
  172.  
  173. /* custom font 3/3 */
  174. @import url(http://fonts.googleapis.com/css?family=Cinzel|Cinzel+Decorative:400,700);
  175.  
  176. /* ------------------------------- DECORATION ---------------------------- */
  177.  
  178. /* body */
  179. body {
  180. color:{color:Posts Text};
  181. background:{color:background} url('{image:background}') fixed;
  182. font: normal normal normal 11px/17px 'Montserrat', sans-serif;
  183. text-align:justify;}
  184.  
  185. /*-------------------------- CREDIT; DON'T REMOVE -------------------------*/
  186.  
  187. #credit {
  188. z-index:99999; position:fixed;
  189. display:block;
  190. bottom:10px; right:10px;
  191. height:20px; width:20px;
  192. border-radius:50%;
  193. padding:6px 7px 8px 7px;
  194. background:{color:Postending symbols BG};
  195. box-shadow:0px 0px 0px 4px {color:Postending symbols Border} inset;}
  196. #credit:hover {
  197. padding:5px 7px 9px 7px;
  198. background:{color:Postending symbols BG Hover};
  199. box-shadow:0px 0px 0px 4px {color:Postending symbols Border Hover} inset;
  200. -webkit-transition: all 0.2s linear;
  201. -moz-transition: all 0.2s linear;
  202. transition: all 0.2s linear;}
  203. #credit:after {
  204. position:absolute;
  205. content:"";
  206. width:0px; height:0px;
  207. border:20px solid {color:Postending symbols};
  208. border-width:0px 10px 18px 10px;
  209. border-color:transparent transparent {color:Postending symbols} transparent;
  210. -webkit-transition: all 0.2s linear;
  211. -moz-transition: all 0.2s linear;
  212. transition: all 0.2s linear;}
  213. #credit:hover:after {
  214. width:0px; height:0px;
  215. margin-left:-1px;
  216. border:20px solid {color:Postending symbols Hover};
  217. border-width:0px 11px 20px 11px;
  218. border-color:transparent transparent {color:Postending symbols Hover} transparent;}
  219.  
  220. /* ------------------------------ MINOR STUFF ---------------------------- */
  221.  
  222. /* tumblr controls */
  223. .tmblr-iframe {
  224. z-index:9999 !important;
  225. {block:IfWhiteTumblrControls}
  226. -webkit-filter: invert(100%) hue-rotate(180deg) !important;
  227. -moz-filter: invert(100%) hue-rotate(180deg) !important;
  228. -ms-filter: invert(100%) hue-rotate(180deg) !important;
  229. -o-filter: invert(100%) hue-rotate(180deg) !important;
  230. filter: invert(100%) hue-rotate(180deg) !important;
  231. {/block:IfWhiteTumblrControls}
  232. {block:IfSmallTumblrControls}
  233. transform: scale(0.8) !important;
  234. -webkit-transform: scale(0.8) !important;
  235. -moz-transform: scale(0.8) !important;
  236. -o-transform: scale(0.8) !important;
  237. -ms-transform: scale(0.8) !important;
  238. transform-origin:right;
  239. webkit-transform-origin:right;
  240. -moz-transform-origin:right;
  241. -o-transform-origin:right;
  242. -ms-transform-origin:right;
  243. {/block:IfSmallTumblrControls}}
  244.  
  245. /* hover text */
  246. #s-m-t-tooltip {
  247. z-index: 99999; display: block;
  248. margin-left: 30px; margin-top: 5px;
  249. max-width:200px;
  250. padding: 5px 5px 5px 6px;
  251. font: normal normal normal 9px/10px 'Montserrat', san-serif;
  252. color: {color:Link Hover Text};
  253. text-transform:uppercase;
  254. letter-spacing:1px;
  255. text-align:center;
  256. background: {color:Link Hover BG};}
  257.  
  258. /* scrollbar */
  259. ::-webkit-scrollbar {
  260. height: 14px; width: 14px;
  261. background: {color:Scroll BG};}
  262. ::-webkit-scrollbar-thumb {
  263. background: {color:Scroll Thumb};
  264. border:4px solid {color:Scroll BG};
  265. border-radius:5px;}
  266.  
  267. /* drag n' click selection */
  268. ::selection {
  269. background: {color:Selection BG};
  270. color: {color:Selection Text};}
  271. ::-moz-selection {
  272. background: {color:Selection BG};
  273. color: {color:Selection Text};}
  274. a::selection {
  275. background: {color:Selection BG};
  276. color: {color:Selection Links};}
  277. a::-moz-selection {
  278. background: {color:Selection BG};
  279. color: {color:Selection Links};}
  280.  
  281. /* ------------------------------ FONT STUFF ----------------------------- */
  282.  
  283. /* links */
  284. a:link, a:active, a:visited{
  285. text-decoration:none;
  286. color:{color:Posts Links};
  287. -webkit-transition: all 0.5s linear;
  288. -moz-transition: all 0.5s linear;
  289. transition: all 0.5s linear;}
  290. a:hover {
  291. color:{color:Posts Links Hover};
  292. -webkit-transition: all 0.2s linear;
  293. -moz-transition: all 0.2s linear;
  294. transition: all 0.2s linear;}
  295. a i, i a, a em, em a, a b, b a, a strong, strong a {
  296. color:{color:Posts Links} !important;
  297. -webkit-transition: all 0.35s linear;
  298. -moz-transition: all 0.35s linear;
  299. transition: all 0.35s linear;}
  300. a i:hover, i a:hover, a em:hover, em a:hover, a b:hover, b a:hover, a strong:hover, strong a:hover {
  301. color:{color:Posts Links Hover} !important;}
  302.  
  303. /* main font decorations */
  304. .posts p:last-child {
  305. margin-bottom:0px;}
  306. .posts p:first-child {
  307. margin-top:0px;}
  308. b, strong {color:{color:Posts Bold};}
  309. i, em {color:{color:Posts Italic};}
  310. pre {color:{color:Posts Code};
  311. font-size:10px;
  312. max-width:100%;
  313. font-family:consolas;
  314. background:{color:Posts Code BG};
  315. padding:4px 7px 5px 7px;
  316. white-space: pre-wrap;
  317. white-space: -moz-pre-wrap;
  318. white-space: -pre-wrap;
  319. white-space: -o-pre-wrap;
  320. word-wrap: break-word;}
  321. code {
  322. color:{color:Posts Code};
  323. font-size:10px;
  324. font-family:consolas;
  325. background:{color:Posts Code BG};
  326. padding:0px 1px 0px 1px;}
  327. .posts p:last-child {
  328. margin-bottom:0px;}
  329. .posts p:first-child {
  330. margin-top:0px;}
  331.  
  332. /* text and link post titles */
  333. h1 {font: normal normal 700 16px/18px 'Cinzel', serif;
  334. color:{color:Posts Title};
  335. text-align:center;
  336. text-transform:lowercase;
  337. letter-spacing:2px;}
  338. /* quote and ask post titles */
  339. h2 {font: normal normal 700 15px/17px 'Cinzel', serif;
  340. color:{color:Posts Bold};
  341. text-align:center;
  342. text-transform:lowercase;
  343. letter-spacing:1px;}
  344. .posts h1:first-child, .posts h2:first-child {margin-top:0px;}
  345.  
  346. h1 small, h2 small, small h2, small h1 {
  347. font-family:Cinzel !important;
  348. font-size:13px !important; line-height:13px !important;
  349. letter-spacing:0.5px !important;}
  350. h2 sup, h2 sub {
  351. font-family:Cinzel !important;
  352. font-size:11px !important; line-height:11px !important;
  353. letter-spacing:0.5px !important;}
  354. h2 a, a h2 {
  355. font: normal normal 700 15px/17px 'Cinzel', serif !important;
  356. text-align:center !important;
  357. text-transform:lowercase !important;
  358. letter-spacing:1px !important;}
  359.  
  360. /*---------------------------------------------------------------------------
  361. E N T I R E S I D E B A R
  362. ---------------------------------------------------------------------------*/
  363.  
  364. /* ------------------------------- TRIFORCE ------------------------------ */
  365.  
  366. /* all together */
  367. .tri {
  368. position:fixed;
  369. top:50%; left:45%;
  370. height:100px; width:120px;
  371. overflow:hidden;
  372. -webkit-transition: all 0.4s ease-in-out;
  373. -moz-transition: all 0.4s ease-in-out;
  374. transition: all 0.4s ease-in-out;}
  375. .tri:hover {
  376. -webkit-transition: all 0.4s ease-in-out;
  377. -moz-transition: all 0.4s ease-in-out;
  378. transition: all 0.4s ease-in-out;}
  379.  
  380. /* words */
  381. .tri center {
  382. opacity:0;
  383. font: normal normal normal 13px/8px 'Cinzel', serif;
  384. text-transform:lowercase;
  385. letter-spacing:3px;
  386. color:{color:Triforce Text};
  387. text-shadow:0px 0px 0px {color:Triforce Text}, 0px 0px .25px {color:Triforce Text};
  388. text-align:center;
  389. position:relative;
  390. top:50%; margin:10px 0px 0px 3px;
  391. -webkit-transform: translateY(-50%);
  392. -ms-transform: translateY(-50%);
  393. transform: translateY(-50%);
  394. -webkit-transition: all 0.4s ease-in-out;
  395. -moz-transition: all 0.4s ease-in-out;
  396. transition: all 0.4s ease-in-out;}
  397. .tri:hover center {opacity:1;}
  398.  
  399. /* each force individually */
  400. #power {
  401. margin-left:-370px;
  402. background: {color:Power Triforce BG} url({image:Power Triforce BG}) center/cover;
  403. box-shadow:0px 0px 1px 0px {color:background} inset;}
  404. #powerbg {
  405. opacity:0; display:block;
  406. height:100px; width:120px;
  407. position:relative; top:0px;
  408. margin-bottom:-100px;
  409. background: {color:Power Triforce Hover BG} url({image:Power Triforce Hover BG}) center/cover;
  410. -webkit-transition: all 0.4s ease-in-out;
  411. -moz-transition: all 0.4s ease-in-out;
  412. transition: all 0.4s ease-in-out;}
  413. #power:hover #powerbg {
  414. opacity:1;}
  415.  
  416. #wisdom {
  417. margin-left:-430px;
  418. background: {color:Wisdom Triforce BG} url({image:Wisdom Triforce BG}) center/cover;
  419. box-shadow:0px 0px 1px 0px {color:background} inset;}
  420. #wisdom:hover {
  421. margin-left:-450px;}
  422. #wisdombg {
  423. opacity:0; display:block;
  424. height:100px; width:120px;
  425. position:relative; top:0px;
  426. margin-bottom:-100px;
  427. background: {color:Wisdom Triforce Hover BG} url({image:Wisdom Triforce Hover BG}) center/cover;
  428. -webkit-transition: all 0.4s ease-in-out;
  429. -moz-transition: all 0.4s ease-in-out;
  430. transition: all 0.4s ease-in-out;}
  431. #wisdom:hover #wisdombg {
  432. opacity:1;}
  433.  
  434. #courage {
  435. margin-top:-120px; margin-left:-310px;
  436. background: {color:Courage Triforce BG} url({image:Courage Triforce BG}) center/cover;
  437. box-shadow:0px 0px 1px 0px {color:background} inset;}
  438. #courage:hover {
  439. margin-top:-105px; margin-left:-290px;}
  440. #couragebg {
  441. opacity:0; display:block;
  442. height:100px; width:120px;
  443. position:relative; top:0px;
  444. margin-bottom:-100px;
  445. background: {color:Courage Triforce Hover BG} url({image:Courage Triforce Hover BG}) center/cover;
  446. -webkit-transition: all 0.4s ease-in-out;
  447. -moz-transition: all 0.4s ease-in-out;
  448. transition: all 0.4s ease-in-out;}
  449. #courage:hover #couragebg {
  450. opacity:1;}
  451.  
  452. /* what 'clips' the rectangle into a triangle */
  453. .clip-left {
  454. position:relative;
  455. top:-45px; left:-25px;
  456. height:120px; width:60px;
  457. overflow:hidden;
  458. background:{color:background} url('{image:background}') fixed;
  459. box-shadow:0px 0px 1px 0px {color:background};
  460. -ms-transform: rotate(31deg);
  461. -webkit-transform: rotate(31deg);
  462. transform: rotate(31deg);}
  463. .clip-right {
  464. position:relative;
  465. top:-165px; left:85px;
  466. height:120px; width:60px;
  467. overflow:hidden;
  468. background:{color:background} url('{image:background}') fixed;
  469. box-shadow:0px 0px 1px 0px {color:background};
  470. -ms-transform: rotate(329deg);
  471. -webkit-transform: rotate(329deg);
  472. transform: rotate(329deg);}
  473. /* so backgrounds are regular and NOT rotated */
  474. .clip-left .clipbg {
  475. position:relative;
  476. top:-10px; left:-30px;
  477. height:140px; width:120px;
  478. background:{color:background} url('{image:background}') fixed;
  479. -ms-transform: rotate(329deg);
  480. -webkit-transform: rotate(329deg);
  481. transform: rotate(329deg);}
  482. .clip-right .clipbg {
  483. position:relative;
  484. top:-10px; left:-30px;
  485. height:140px; width:120px;
  486. background:{color:background} url('{image:background}') fixed;
  487. -ms-transform: rotate(31deg);
  488. -webkit-transform: rotate(31deg);
  489. transform: rotate(31deg);}
  490.  
  491. /* ------------------------------ LOWER MENUS ---------------------------- */
  492.  
  493. /* description */
  494. #description {
  495. position:fixed; z-index:2;
  496. left:45%; top:50%;
  497. width:130px;
  498. text-align:{select:Description Text Alignment};
  499. color:{color:Description Text};
  500. font-size:10px; line-height:12px;
  501. letter-spacing:1px;}
  502. #description a {color:{color:Description Links}}
  503. #description a:hover {color:{color:Description Links Hover}}
  504. #description b, #description strong, #description i, #description em {color:{color:Description Text};}
  505. .space {float:left; clear:left; height:12px;}
  506.  
  507. /* pagination */
  508. #pagination {
  509. color:{color:description text};
  510. z-index:99999; position:fixed;
  511. top:0px; left:50%;
  512. margin-left:-57px;
  513. background:{color:background} url('{image:background}') fixed;
  514. width:550px; padding:10px 1px;
  515. font-size:10px;
  516. text-transform:uppercase;
  517. letter-spacing:1px;
  518. text-align:center;}
  519. #pagination b, #pagination strong {color:{color:description text};}
  520. .p-active {
  521. display:inline-block;
  522. min-width:18px;
  523. line-height:10px;
  524. padding:7px 2px 7px 2px;
  525. letter-spacing:1px;}
  526. #pagination a .p-active {
  527. color:{color:description links};
  528. -webkit-transition: all 0.3s linear;
  529. -moz-transition: all 0.3s linear;
  530. transition: all 0.3s linear;}
  531. #pagination a .p-active:hover {
  532. color:{color:description links hover};}
  533.  
  534. /* sidebar links */
  535. .inventory {
  536. position:fixed; z-index:1;
  537. top:50%; left:45%;
  538. height:132px; width:145px;
  539. text-align:center;
  540. letter-spacing:-1px;}
  541. .inventory a {
  542. display:block; position:absolute;
  543. width:46px; height:46px;
  544. border-radius:50%;
  545. background-color:{color:Items Links BG};
  546. box-shadow: 0px 0px 0px 5px {color:Items Links Border} inset;
  547. -webkit-transition: all 0.2s linear;
  548. -moz-transition: all 0.2s linear;
  549. transition: all 0.2s linear;
  550. transform: rotate(5deg);
  551. -webkit-transform: rotate(5deg);
  552. -moz-transform: rotate(5deg);
  553. -o-transform: rotate(5deg);
  554. -ms-transform: rotate(5deg);}
  555. .inventory a:hover {
  556. width:50px; height:50px;
  557. margin:0px;
  558. background:{color:Items Links Hover BG};
  559. box-shadow: 0px 0px 0px 5px {color:Items Links Hover BG} inset;
  560. transform: rotate(0deg);
  561. -webkit-transform: rotate(0deg) translate(-2px, -2px);
  562. -moz-transform: rotate(0deg) translate(-2px, -2px);
  563. -o-transform: rotate(0deg) translate(-2px, -2px);
  564. -ms-transform: rotate(0deg) translate(-2px, -2px);}
  565. .inventory a img {width:100%; height:100%;
  566. -webkit-transition: all 0.2s linear;
  567. -moz-transition: all 0.2s linear;
  568. transition: all 0.2s linear;}
  569. .inventory a:hover img {margin-bottom:-2px;}
  570.  
  571. .inventory a:nth-of-type(1) {margin-top:-1px; margin-left:24px;}
  572. .inventory a:nth-of-type(2) {margin-top:-1px; margin-left:75px;}
  573. .inventory a:nth-of-type(3) {margin-top:44px; margin-left:99px;}
  574. .inventory a:nth-of-type(4) {margin-top:89px; margin-left:75px;}
  575. .inventory a:nth-of-type(5) {margin-top:89px; margin-left:24px;}
  576. .inventory a:nth-of-type(6) {margin-top:44px; margin-left:0px;}
  577.  
  578. /* inventory background */
  579. #ring {
  580. opacity:1;
  581. position:fixed; z-index:1;
  582. top:50%; left:45%;
  583. height:80px; width:80px;
  584. border:20px double {color:Items Rings};
  585. background:{color:Items BG};
  586. border-radius:50%;
  587. text-align:center;}
  588. #items {
  589. display:inline-block;
  590. position:relative;
  591. top:50%; margin-left:-4px;
  592. -webkit-transform: translateY(-50%);
  593. -ms-transform: translateY(-50%);
  594. transform: translateY(-50%);
  595. font: normal normal bold 12px/8px 'Cinzel', san-serif;
  596. text-transform:lowercase;
  597. text-align:center;
  598. letter-spacing:2.5px;
  599. color:{color:Items Links Hover BG};
  600. padding:3px 0px 3px 2px;
  601. -webkit-transition: all 0.5s linear;
  602. -moz-transition: all 0.5s linear;
  603. transition: all 0.5s linear;}
  604.  
  605. /* --------------------------- SIDEBAR + HOVER --------------------------- */
  606.  
  607. {block:IfNotHoverforSidebar}
  608. /* side container */
  609. #side {
  610. position:fixed;
  611. top:50%; left:45%;
  612. margin-top:-245px; margin-left:-485px;
  613. width:350px; height:450px;
  614. border-radius:50% 50% 30px 50px;}
  615.  
  616. /* everything else */
  617. #power {margin-top:-220px;
  618. -webkit-transition: all 0.7s ease-in-out;
  619. -moz-transition: all 0.7s ease-in-out;
  620. transition: all 0.7s ease-in-out;}
  621. #power:hover {margin-top:-240px;}
  622. #wisdom {margin-top:-120px;
  623. -webkit-transition: all 0.7s ease-in-out;
  624. -moz-transition: all 0.7s ease-in-out;
  625. transition: all 0.7s ease-in-out;}
  626. #wisdom:hover {margin-top:-105px;}
  627. #courage {margin-top:-120px;
  628. -webkit-transition: all 0.7s ease-in-out;
  629. -moz-transition: all 0.7s ease-in-out;
  630. transition: all 0.7s ease-in-out;}
  631. #courage:hover {margin-top:-105px;}
  632. #ring {margin-left:-443px; margin-top:45px;}
  633. .inventory {margin-left:-458px; margin-top:39px;}
  634. #description {opacity:1; margin-left:-310px; margin-top:52px;}
  635. {/block:IfNotHoverforSidebar}
  636.  
  637. {block:IfHoverforSidebar}
  638. /* speed that everything moves */
  639. #side, #side #ring, #side .inventory, #side #description{
  640. -webkit-transition: all 0.7s ease-in-out;
  641. -moz-transition: all 0.7s ease-in-out;
  642. transition: all 0.7s ease-in-out;}
  643.  
  644. /* side container */
  645. #side {
  646. position:fixed;
  647. top:50%; left:45%;
  648. margin-top:-190px; margin-left:-440px;
  649. width:260px; height:230px;
  650. border-radius:50% 50% 10px 10px;}
  651. #side:hover {
  652. margin-top:-245px; margin-left:-485px;
  653. width:350px; height:450px;
  654. border-radius:50% 50% 30px 50px;}
  655.  
  656. /* everything else when hovered */
  657. #side #power {margin-top:-170px;
  658. -webkit-transition: all 0.7s ease-in-out;
  659. -moz-transition: all 0.7s ease-in-out;
  660. transition: all 0.7s ease-in-out;}
  661. #side:hover #power {margin-top:-220px;}
  662. #side:hover #power:hover {margin-top:-240px;}
  663.  
  664. #side #wisdom {margin-top:-70px;
  665. -webkit-transition: all 0.7s ease-in-out;
  666. -moz-transition: all 0.7s ease-in-out;
  667. transition: all 0.7s ease-in-out;}
  668. #side:hover #wisdom {margin-top:-120px;}
  669. #side:hover #wisdom:hover {margin-top:-105px;}
  670.  
  671. #side #courage {margin-top:-70px;
  672. -webkit-transition: all 0.7s ease-in-out;
  673. -moz-transition: all 0.7s ease-in-out;
  674. transition: all 0.7s ease-in-out;}
  675. #side:hover #courage {margin-top:-120px;}
  676. #side:hover #courage:hover {margin-top:-105px;}
  677.  
  678. #side #ring {
  679. opacity:0;
  680. margin-left:-393px; margin-top:45px;
  681. transform: rotate(90deg);
  682. -webkit-transform: rotate(90deg);
  683. -moz-transform: rotate(90deg);
  684. -o-transform: rotate(90deg);
  685. -ms-transform: rotate(90deg);}
  686. #side:hover #ring {
  687. opacity:1;
  688. margin-left:-443px; margin-top:45px;
  689. transform: rotate(0deg);
  690. -webkit-transform: rotate(0deg);
  691. -moz-transform: rotate(0deg);
  692. -o-transform: rotate(0deg);
  693. -ms-transform: rotate(0deg);}
  694.  
  695. #side .inventory {
  696. opacity:0;
  697. margin-left:-408px; margin-top:39px;
  698. transform: rotate(90deg);
  699. -webkit-transform: rotate(90deg);
  700. -moz-transform: rotate(90deg);
  701. -o-transform: rotate(90deg);
  702. -ms-transform: rotate(90deg);}
  703. #side:hover .inventory {
  704. opacity:1;
  705. margin-left:-458px; margin-top:39px;
  706. transform: rotate(0deg);
  707. -webkit-transform: rotate(0deg);
  708. -moz-transform: rotate(0deg);
  709. -o-transform: rotate(0deg);
  710. -ms-transform: rotate(0deg);}
  711.  
  712. #side #description {opacity:0; margin-left:-400px; margin-top:52px;}
  713. #side:hover #description {opacity:1; margin-left:-310px; margin-top:52px;}
  714. {/block:IfHoverforSidebar}
  715.  
  716. /* ----------------------------- GAMEPLAY HUD ---------------------------- */
  717.  
  718. #hearts {
  719. position:fixed;
  720. top:35px; left:15px;
  721. width:130px; height:26px;
  722. padding:1px 2px;
  723. overflow:hidden;
  724. font:normal normal normal 10px/13px fontawesome;
  725. word-spacing:.5px;
  726. word-wrap: break-word;
  727. text-align:left;
  728. color:{color:Hearts};
  729. text-shadow:1px 0px 0px {color:Hearts Outline}, -1px 0px 0px {color:Hearts Outline}, 0px 1px 0px {color:Hearts Outline}, 0px -1px 0px {color:Hearts Outline};}
  730. #hearts span {
  731. display:inline-block;
  732. font-size:14px;
  733. line-height:13px;
  734. margin-left:-2px;}
  735.  
  736. #energy {
  737. position:fixed;
  738. top:70px; left:17px;
  739. width:125px; height:6px;
  740. border:1px solid {color:Energy Outline};
  741. border-radius:2px;
  742. box-shadow: {text:Energy Length} 0px 0px {color:Energy} inset, 0px 0px 16px -4px {color:Energy Outline} inset;}
  743.  
  744. #rupees {
  745. position:fixed;
  746. bottom:20px; left:21px;
  747. width:130px;
  748. font: normal normal normal 11px/10px 'Montserrat', san-serif;
  749. letter-spacing:1.5px;
  750. color: {color:Rupee Text};}
  751. #rupee {
  752. vertical-align:middle;
  753. margin-top:5px;
  754. z-index:1; margin-right:7px;
  755. display:inline-block;
  756. height:6px; width:6px;
  757. background:{color:Rupee Light};
  758. border:2px solid {color:Rupee Light};
  759. border-width: 0px 0px 2px 2px;
  760. border-color: transparent transparent {color:Rupee Dark} {color:Rupee Dark};}
  761. #rupee:before {
  762. content:""; z-index:2;
  763. display:inline-block;
  764. position:relative;
  765. left:0px; top:-6px;
  766. height:11px; width:12px;
  767. background:{color:Rupee Light};
  768. box-shadow: 3px 0px 0px 0px rgba(255,255,255,0.5) inset, -3px 0px 0px 0px {color:Rupee Dark} inset;
  769. transform: rotate(45deg);
  770. -webkit-transform: rotate(45deg);
  771. -moz-transform: rotate(45deg);
  772. -o-transform: rotate(45deg);
  773. -ms-transform: rotate(45deg);}
  774. #rupee:after {
  775. content:""; z-index:1;
  776. display:inline-block;
  777. position:relative;
  778. left:6px; top:-22px;
  779. height:6px; width:6px;
  780. background:{color:Rupee Light};
  781. border:2px solid {color:Rupee Light};
  782. border-width:2px 2px 0px 0px;
  783. border-color:#fff {color:Rupee Dark} transparent transparent;}
  784.  
  785. #buttons {
  786. z-index:-999; position:fixed;
  787. font-size:11px; font-weight:bold;
  788. border-radius:50%;}
  789. #letters {
  790. text-align:center;
  791. position:relative; top:50%;
  792. -webkit-transform: translateY(-50%);
  793. -ms-transform: translateY(-50%);
  794. transform: translateY(-50%);}
  795. .a {top:30px; right:10px;
  796. width:23px; height:23px;
  797. background:{color:A Button BG};
  798. color:{color:A Button Border};
  799. border:1px solid {color:A Button Border};}
  800. .b {top:45px; right:40px;
  801. width:18px; height:18px;
  802. background:{color:B Button BG};
  803. color:{color:B Button Border};
  804. border:1px solid {color:B Button Border};}
  805.  
  806. /*---------------------------------------------------------------------------
  807. E N T I R E P O S T S
  808. ---------------------------------------------------------------------------*/
  809.  
  810. /* posts position */
  811. #entries {
  812. z-index:1;
  813. margin-top:90px; margin-left:50%;
  814. position:relative;}
  815. /* posts themselves */
  816. .posts {
  817. margin:0 0 100px -50px;
  818. width: 500px; padding:20px;
  819. overflow:hidden;
  820. border-radius:3px;
  821. background: {color:Posts BG} url('');}
  822.  
  823. /* ------------------------------- POST TYPES ---------------------------- */
  824. /* text post */
  825. blockquote {
  826. padding:0px;
  827. padding-left:6px;
  828. margin:-3px 0 -1px 6px;
  829. border-left: 2px solid {color:posts blockquote};}
  830. hr {display: block;
  831. margin: 30px 80px;
  832. border:1px solid {color:posts blockquote};
  833. border-width:2px 0px 0px 0px;}
  834.  
  835. /* bullet lists */
  836. ol {margin-left:-8px;
  837. list-style-type:decimal;}
  838. ul {margin-left:-20px;
  839. list-style-type:none;}
  840. ul li::before {
  841. content:"";
  842. margin:0px 10px 2px 0px;
  843. display:inline-block;
  844. height:4px; width:4px;
  845. border-radius:50%;
  846. background:{color:posts blockquote};}
  847. li {margin-bottom:3px;}
  848.  
  849. /* text-images */
  850. .posts img {
  851. vertical-align:middle;
  852. max-width:100%;}
  853. .posts img a, .posts a img {
  854. box-shadow:none;}
  855. /* the credit below images that are from other people */
  856. .tmblr-full {margin:0;}
  857. .tmblr-attribution {
  858. opacity:.8;
  859. margin-top:0px;
  860. font-family:Calibri;
  861. font-size:8px; line-height:8px;
  862. text-transform:uppercase;
  863. letter-spacing:1px;}
  864. .tmblr-attribution::after {content: " >";}
  865.  
  866. /* link posts */
  867. .link-posts a {
  868. background: {color:Posts Links};
  869. display:inline-block;
  870. width: 480px;
  871. padding:10px;
  872. color:{color:Posts BG};}
  873. .link-posts a:hover {
  874. background: {color:Posts Links Hover}}
  875.  
  876. /* ask posts */
  877. .ask-posts img {
  878. vertical-align:middle;
  879. display:inline-block;
  880. margin-right:7px;
  881. max-width:64px;}
  882. .ask-posts .question {
  883. vertical-align:middle;
  884. display:inline-block;
  885. min-height:44px; width:406px;
  886. padding: 10px;
  887. background: {color:Posts 2nd BG};}
  888.  
  889. .ask-posts h2 {
  890. text-align:left;
  891. margin:-5px 0px 5px -10px;
  892. padding:0px 10px 0px 10px;}
  893. .ask-posts h2 a {
  894. font: normal normal 400 12px/14px 'Orbitron', sans-serif;
  895. box-shadow:none;}
  896.  
  897. /* quote posts */
  898. .quote-posts {
  899. padding:10px 0px;
  900. text-align:center}
  901. .quote {
  902. vertical-align:middle;
  903. width:430px;
  904. display:inline-block;}
  905. .quote-posts .fa {
  906. font-size:20px;
  907. vertical-align:middle;
  908. display:inline-block;
  909. color:{color:Posts Blockquote}}
  910.  
  911. /* chat posts */
  912. .chat {margin:0px; padding:0px; line-height:14px;}
  913. .chat li {text-align:left;}
  914. .chat li::before {display:none;}
  915. .chat li {
  916. padding:6px 8px;
  917. margin-bottom:2px;
  918. background: {color:Posts 2nd BG};}
  919. .chat li:last-of-type {
  920. margin-bottom:0px;}
  921.  
  922. /* photo posts */
  923. .posts img, .posts .html_photoset, .posts #audio-pic {
  924. {block:IfFadePhotos}opacity:0.75;{/block:IfFadePhotos}
  925. {block:IfMonochromePhotos}
  926. -webkit-filter: grayscale(100%);
  927. -moz-filter: grayscale(100%);
  928. -ms-filter: grayscale(100%);
  929. -o-filter: grayscale(100%);
  930. filter: grayscale(100%);{/block:IfMonochromePhotos}
  931. -webkit-transition-duration: 0.5s;
  932. -moz-transition-duration:0.5s;
  933. -o-transition-duration:0.5s;
  934. transition-duration:0.5s;}
  935. .posts:hover img, .posts:hover .html_photoset, .posts:hover #audio-pic {
  936. opacity:1;
  937. -webkit-filter: grayscale(0%);
  938. -moz-filter: grayscale(0%);
  939. -ms-filter: grayscale(0%);
  940. -o-filter: grayscale(0%);
  941. filter: grayscale(0%);
  942. -webkit-transition-duration: 0.5s;
  943. -moz-transition-duration:0.5s;
  944. -o-transition-duration:0.5s;
  945. transition-duration:0.5s;}
  946.  
  947. /* photoset focused image background */
  948. .tmblr-lightbox {
  949. background-color:transparent !important;}
  950. .vignette {
  951. z-index:99998! important;
  952. opacity:.75 !important;
  953. background-color:{color:background} !important;
  954. background-image:none !important;}
  955. .tmblr-lightbox .lightbox-image {
  956. z-index:99999! important;
  957. border-radius:0px !important;
  958. background:{color:background} !important;
  959. box-shadow:0px 0px 0px 30px {color:background} !important;}
  960. .tmblr-lightbox .lightbox-caption {
  961. z-index:99999! important;
  962. font-family:consolas !important;
  963. font-size:10px !important;
  964. font-size: 15px !important;
  965. font-weight: bold !important;
  966. color: {color:posts title} !important;
  967. text-shadow: 0 4px 30px {color:background} !important;}
  968.  
  969. /* video posts */
  970. #youtube_iframe, .tumblr_video_container {
  971. margin-bottom:5px; max-width:100%;}
  972. .caption iframe, .caption #youtube_iframe, .caption .tumblr_video_container {
  973. margin:5px 0px; max-width:100%;}
  974.  
  975. /* audio posts */
  976. #audio-pic {
  977. display:inline-block;
  978. vertical-align:middle;
  979. margin-right:2px;
  980. width:135px; height:135px;
  981. background: url('{image:Default Audio Pic}');
  982. background-size:cover;}
  983. #info-container {
  984. display:inline-block;
  985. vertical-align:middle;
  986. text-align:left;
  987. font-size:8px; line-height:15px;
  988. width:355px;
  989. text-transform:uppercase;
  990. letter-spacing:1px;}
  991. #info-container li {
  992. display:block;
  993. padding:5px 8px;
  994. margin:2px 0px;
  995. background: {color:Posts 2nd BG};}
  996. #info-container li::before {display:none;}
  997. .posts .audio_player {
  998. max-width:355px; max-height:27px;
  999. margin:0px;
  1000. background:{color:Audio Player};
  1001. {block:IfMonochromePhotos}
  1002. -webkit-filter: grayscale(100%);
  1003. -moz-filter: grayscale(100%);
  1004. -ms-filter: grayscale(100%);
  1005. -o-filter: grayscale(100%);
  1006. filter: grayscale(100%);{/block:IfMonochromePhotos}
  1007. -webkit-transition: all 0.2s linear;
  1008. -moz-transition: all 0.2s linear;
  1009. transition: all 0.2s linear;}
  1010. .posts:hover .audio_player {
  1011. {block:IfMonochromePhotos}
  1012. -webkit-filter: grayscale(0%);
  1013. -moz-filter: grayscale(0%);
  1014. -ms-filter: grayscale(0%);
  1015. -o-filter: grayscale(0%);
  1016. filter: grayscale(0%);{/block:IfMonochromePhotos}}
  1017. .tumblr_audio_player {
  1018. width:355px; opacity:.66;}
  1019.  
  1020. /* ----------------------------- POSTS INFO ------------------------------ */
  1021.  
  1022. /* if Symbols */
  1023. #postinfo {
  1024. position:absolute;
  1025. margin-top:30px; margin-left:-20px;
  1026. text-align:center;
  1027. width: 540px;}
  1028. /* individual circles */
  1029. #postinfo a {
  1030. display:inline-block; margin:0px 8px;
  1031. height:20px; width:20px;
  1032. padding:6px 7px 8px 7px;
  1033. border-radius:50%;
  1034. vertical-align:middle;
  1035. line-height:22px; font-size:22px;
  1036. color:{color:Postending symbols};
  1037. background:{color:Postending symbols BG};
  1038. box-shadow:0px 0px 0px 4px {color:Postending symbols Border} inset;
  1039. -webkit-transition: all 0.2s linear;
  1040. -moz-transition: all 0.2s linear;
  1041. transition: all 0.2s linear;}
  1042. #postinfo a:hover {
  1043. margin:0px 12px;
  1044. padding:5px 7px 9px 7px; font-size:24px;
  1045. color:{color:Postending symbols Hover};
  1046. background:{color:Postending symbols BG Hover};
  1047. box-shadow:0px 0px 0px 4px {color:Postending symbols Border Hover} inset;}
  1048.  
  1049. /* circles like button */
  1050. #postinfo #like {
  1051. vertical-align:middle;
  1052. display:inline-block;}
  1053. #postinfo .like_button {
  1054. display:inline-block;
  1055. position:relative;
  1056. top:0px; left:0px;}
  1057. #postinfo .like_button iframe {
  1058. position:absolute;
  1059. margin:1px 0px 0px -31px;
  1060. display:inline-block;
  1061. opacity:0; z-index:99;}
  1062. #postinfo .like_button::before {
  1063. content:"\f08a";
  1064. display:inline-block;
  1065. margin-left:8px;
  1066. height:20px; width:20px;
  1067. padding:6px 7px 8px 7px;
  1068. border-radius:50%;
  1069. text-align:center;
  1070. font-size:20px; line-height:24px;
  1071. font-family:'FontAwesome';
  1072. color:{color:Postending symbols};
  1073. background:{color:Postending symbols BG};
  1074. box-shadow:0px 0px 0px 4px {color:Postending symbols Border} inset;
  1075. -webkit-transition: all 0.2s linear;
  1076. -moz-transition: all 0.2s linear;
  1077. transition: all 0.2s linear;}
  1078. #postinfo .like_button:hover::before {
  1079. margin-left:12px; font-size:22px;
  1080. color:{color:Postending symbols Hover};
  1081. background:{color:Postending symbols BG Hover};
  1082. box-shadow:0px 0px 0px 4px {color:Postending symbols Border Hover} inset}
  1083. #postinfo .like_button.liked::before {
  1084. content:"\f004";
  1085. color:{color:Postending symbols Liked Post}; !important;}
  1086.  
  1087. /* if no Symbols */
  1088. #postending {
  1089. padding:10px; width:500px;
  1090. margin:15px 0px -10px -10px;
  1091. background: {color:Postending Text BG};
  1092. text-align:center;
  1093. margin-top:15px;
  1094. font-size:9px;
  1095. text-transform:uppercase;
  1096. letter-spacing:1px;
  1097. color: {color:Postending Text};}
  1098. #postending a {
  1099. color:{color:Postending Text Links};}
  1100. #postending a:hover {
  1101. color:{color:Postending Text Links Hover};}
  1102.  
  1103. /* ---------------------------- PERMALINK -------------------------------- */
  1104.  
  1105. /* permalink position */
  1106. #permalink {
  1107. background:;/* if you want the post-notes to have a non-transparent bg */
  1108. margin:-100px 0px 0px -50px;
  1109. width: 500px; padding: 20px;}
  1110.  
  1111. /* scrollbar */
  1112. ::-webkit-scrollbar {
  1113. height: 14px; width: 14px;
  1114. background: {color:Scroll BG};}
  1115. ::-webkit-scrollbar-thumb {
  1116. background: {color:Scroll Thumb};
  1117. border:4px solid {color:Scroll BG};
  1118. border-radius:5px;}
  1119.  
  1120. /* post notes container */
  1121. .notes {
  1122. max-height:600px;
  1123. overflow: auto;
  1124. text-align:center;
  1125. line-height:0px; font-size:0px;
  1126. color:transparent;
  1127. letter-spacing:0px;}
  1128. .notes li::before {display:none;}
  1129. .notes a {
  1130. font: normal normal normal 9px/17px 'Montserrat', san-serif;
  1131. text-transform:uppercase;
  1132. letter-spacing:1px;
  1133. color:{color:Permalink Links};}
  1134. .notes a:hover {
  1135. color:{color:Permalink Links Hover};}
  1136. .notes blockquote, .notes .answer_content {
  1137. font: normal normal normal 9px/17px 'Montserrat', san-serif;
  1138. letter-spacing:1px;
  1139. max-width:350px;
  1140. margin:3px auto; border:none;
  1141. color:{color:Permalink Links};
  1142. background:{color:Permalink Blockquote};}
  1143. .notes blockquote {
  1144. display:inline-block;
  1145. padding:1px 10px 0px 10px;}
  1146. .notes .answer_content {
  1147. display:block;
  1148. padding:2px 10px 1px 10px;}
  1149. .notes img {display:none;}
  1150. .notes li {margin-left:-10px;}
  1151.  
  1152. /* replaced regular sentences with fa symbols */
  1153. .notes .like span a::after, .notes .reblog .tumblelog::after, .notes .reblog blockquote::before, .notes .reblog blockquote::after, .notes .answer_content::before, .notes .answer_content::after, .notes .reply .action a::after {
  1154. font-weight:normal;
  1155. vertical-align:middle;
  1156. content:"";
  1157. font-family:'FontAwesome';
  1158. display:inline-block; margin:0px 5px;
  1159. font-size:10px;
  1160. color:{color:Permalink Text};}
  1161. .notes .like span a::after {content:"\f004";}
  1162. .notes .reblog .tumblelog::after {content: "\f079";}
  1163. .notes .reblog blockquote::before, .notes .answer_content::before {content: "\f10d"; margin-top:-1px;}
  1164. .notes .reblog blockquote::after, .notes .answer_content::after {content: "\f10e"; margin-top:-1px;}
  1165. .notes .reply .action a::after {content: "\f063";}
  1166.  
  1167. </style>
  1168. <body>
  1169.  
  1170. <!-------------------------------- CURSOR ---------------------------------->
  1171.  
  1172. {block:IfCustomCursor}
  1173. <style type="text/css"> body {cursor: url({image:Custom Cursor}), auto;} a, a:hover{cursor:url({image:Custom Cursor Links}), auto;}
  1174. </style>
  1175. <!-- Custom cursors don't show up on empty spaces, but this fixes that -->
  1176. <div style="position:fixed; background:rgba(0,0,0,0); top:0px; left:0px; width:100%; height:100%; z-index: -99999999999999;"></div>{/block:IfCustomCursor}
  1177.  
  1178. <!-------------------------- CREDIT; DON'T REMOVE -------------------------->
  1179. <a href="http://nyctothemes.tumblr.com/" title="© nyctothemes" id="credit"></a>
  1180.  
  1181. <!--------------------------------- HUD ------------------------------------>
  1182. {block:IfGameplayHUD}
  1183. <div id="hearts">{text:Health Hearts} <span>&#xf004;</span></div>
  1184. <div id="energy"></div>
  1185. <div id="rupees">
  1186. <div id="rupee"></div> {text:Rupees}
  1187. </div>
  1188. <div id="buttons" class="a"><div id="letters">A</div></div>
  1189. <div id="buttons" class="b"><div id="letters">B</div></div>
  1190. {/block:IfGameplayHUD}
  1191.  
  1192. <!------------------------------- TRIFORCE --------------------------------->
  1193. <div id="side">
  1194. <a href="/" class="tri" id="power">
  1195. <div id="powerbg"></div>
  1196. <center>home</center>
  1197. <div class="clip-left"><div class="clipbg"></div></div>
  1198. <div class="clip-right"><div class="clipbg"></div></div>
  1199. </a>
  1200. <a href="/archive" class="tri" id="wisdom">
  1201. <div id="wisdombg"></div>
  1202. <center>past</center>
  1203. <div class="clip-left"><div class="clipbg"></div></div>
  1204. <div class="clip-right"><div class="clipbg"></div></div>
  1205. </a>
  1206. <a href="/ask" class="tri" id="courage">
  1207. <div id="couragebg"></div>
  1208. <center>ask</center>
  1209. <div class="clip-left"><div class="clipbg"></div></div>
  1210. <div class="clip-right"><div class="clipbg"></div></div>
  1211. </a>
  1212.  
  1213. <!-------------------------------- MENU ------------------------------------>
  1214. <!-- description -->
  1215. <div id="description">
  1216. <div class="space" style="width:0px;"></div>
  1217. <div class="space" style="width:6px;"></div>
  1218. <div class="space" style="width:15px;"></div>
  1219. <div class="space" style="width:20px;"></div>
  1220. <div class="space" style="width:21px;"></div>
  1221. <div class="space" style="width:19px;"></div>
  1222. <div class="space" style="width:13px;"></div>
  1223. <div class="space" style="width:5px;"></div>
  1224. {description}</div>
  1225. <!-- page navigation -->
  1226. {block:Pagination}<div id="pagination">
  1227. {block:PreviousPage}<a href="{PreviousPage}">{/block:PreviousPage}<div class="p-active">◀</div>{block:PreviousPage}</a>{/block:PreviousPage}
  1228. chapter <b>{CurrentPage}</b> of <b>{TotalPages}</b>
  1229. {block:NextPage}<a href="{NextPage}">{/block:NextPage}<div class="p-active">▶</div>{block:NextPage}</a>{/block:NextPage}
  1230. </div>{/block:Pagination}
  1231.  
  1232. <!-- sidebar links -->
  1233. <div id="ring"><div id="items">ITEMS</div></div>
  1234. <div class="inventory">
  1235. <a href="{text:link 1 URL}" title="{text:link 1 hover}"><img src="{text:Link 1 Image}"></a>
  1236. <a href="{text:link 2 URL}" title="{text:link 2 hover}"><img src="{text:Link 2 Image}"></a>
  1237. <a href="{text:link 3 URL}" title="{text:link 3 hover}"><img src="{text:Link 3 Image}"></a>
  1238. <a href="{text:link 4 URL}" title="{text:link 4 hover}"><img src="{text:Link 4 Image}"></a>
  1239. <a href="{text:link 5 URL}" title="{text:link 5 hover}"><img src="{text:Link 5 Image}"></a>
  1240. <a href="{text:link 6 URL}" title="{text:link 6 hover}"><img src="{text:Link 6 Image}"></a>
  1241. </div>
  1242.  
  1243. </div>
  1244. <!--------------------------------- POSTS --------------------------------->
  1245. <div id="entries">
  1246. {block:posts}
  1247.  
  1248. <div class="posts">
  1249.  
  1250. <!-- text posts -->
  1251. {block:Text}
  1252. {block:Title}<h1>{Title}</h1>{/block:Title}
  1253. <div class="caption">{Body}</div>
  1254. {/block:Text}
  1255.  
  1256. <!-- link posts -->
  1257. {block:Link}
  1258. {block:Thumbnail}<center>
  1259. <a href="{Thumbnail-HighRes}">
  1260. <img src="{Thumbnail}" class="photo-posts" style="margin-bottom:5px;">
  1261. </a>
  1262. </center>{/block:Thumbnail}
  1263. <div class="link-posts"><h1><a href="{URL}">
  1264. {Name}&nbsp;&#8594;
  1265. </a></h1></div>
  1266. {block:Description}<div class="caption">
  1267. <p>{Description}</p>
  1268. </div>{/block:Description}
  1269. {/block:Link}
  1270.  
  1271. <!-- ask posts -->
  1272. {block:Answer}
  1273. <div class="ask-posts">
  1274. <img src="{AskerPortraitURL-64}">
  1275. <div class="question">
  1276. <h2>{Asker} {text:Ask Verb}:</h2> {Question}
  1277. </div></div><br>
  1278. <div id="caption">{Answer}</div>
  1279. {/block:Answer}
  1280.  
  1281. <!-- quote posts -->
  1282. {block:Quote}
  1283. <h2 class="quote-posts">
  1284. <l class="fa fa-quote-left"></l>
  1285. <div class="quote">{Quote}</div>
  1286. <l class="fa fa-quote-right"></l>
  1287. </h2>
  1288. <div style="text-align:right; margin-right:20px">
  1289. {block:Source}<b>- {Source}</b>{/block:Source}
  1290. </div>
  1291. {/block:Quote}
  1292.  
  1293. <!-- chat posts -->
  1294. {block:Chat}
  1295. {block:Title}<h1>{Title}</h1>{/block:Title}
  1296. <ul class="chat">{block:Lines}
  1297. <li class="user_{UserNumber}">{block:Label}
  1298. <b style="margin-right:5px">{Label}</b>
  1299. {/block:Label} {Line}</li>
  1300. {/block:Lines}</ul>
  1301. {/block:Chat}
  1302.  
  1303. <!-- photo posts -->
  1304. {block:Photo}
  1305. <center>
  1306. {block:HighRes}<a href="{PhotoURL-HighRes}" target="_blank" style="box-shadow:none">{/block:HighRes}<img src="{PhotoURL-500}" class="photo-posts"/>{block:HighRes}</a>{/block:HighRes}
  1307. </center>
  1308. {block:Caption}<br><div class="caption">{Caption}</div>{/block:Caption}{/block:Photo}
  1309.  
  1310. {block:Photoset}
  1311. <div style="width:540px; margin-left:-20px; text-align:middle">
  1312. {Photoset}
  1313. </div>
  1314. {block:Caption}<br><div class="caption">{Caption}</div>{/block:Caption}{/block:Photoset}
  1315.  
  1316. <!-- video post -->
  1317. {block:Video}
  1318. {Video-500}
  1319. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1320. {/block:Video}
  1321.  
  1322. <!-- audio posts -->
  1323. {block:Audio}
  1324. <!--image-->
  1325. {block:IndexPage}<a href="{Permalink}">{/block:IndexPage}<div id="audio-pic" {block:AlbumArt}style="background:none"{/block:AlbumArt}>
  1326. {block:AlbumArt}<img src="{AlbumArtURL}">{/block:AlbumArt}
  1327. </div>{block:IndexPage}</a>{/block:IndexPage}
  1328. <div id="info-container">
  1329. <!--player-->
  1330. {block:ifDarkAudioPlayer}{AudioPlayerBlack}{/block:ifDarkAudioPlayer}
  1331. {block:ifNotDarkAudioPlayer}{AudioPlayerWhite}{/block:ifNotDarkAudioPlayer} <!--info-->
  1332. {block:TrackName}<li><b>Track:</b> {TrackName}</li>{/block:TrackName}
  1333. {block:Artist}<li><b>Artist:</b> {Artist}</li>{/block:Artist}
  1334. {block:Album}<li><b>Album:</b> {Album}</li>{/block:Album}
  1335. {block:PlayCount}<li><b>Plays:</b> {FormattedPlayCount}</li>{/block:PlayCount}
  1336. </div>
  1337. {block:Caption}<div class="caption" style="margin-top:10px;">{Caption}</div>{/block:Caption}{/block:Audio}
  1338.  
  1339. <!------------------------------ POST ENDING ------------------------------->
  1340.  
  1341. {block:PermalinkPage}{block:Date}<div id="postending">
  1342.  
  1343. <!-- date posted -->
  1344. <a href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}">{ShortMonth}.{DayOfMonthWithZero}.{ShortYear}</a>
  1345. <!-- notes counter -->
  1346. {block:NoteCount}
  1347. || {NoteCountWithLabel}
  1348. {/block:NoteCount}
  1349. <!-- reblogged from -->
  1350. {block:RebloggedFrom}<br>
  1351. Via: <a href="{ReblogParentURL}">{ReblogParentName}</a>
  1352. {/block:RebloggedFrom}
  1353. <!-- original poster -->
  1354. {block:ContentSource}
  1355. || Source: <a href="{SourceURL}">{SourceTitle}</a>
  1356. {/block:ContentSource}
  1357. <!-- tags -->
  1358. {block:HasTags}<br><div style="padding:0px 20px 0px 20px">
  1359. Tags: {block:Tags}<a href="{TagURL}">{Tag}</a>, {/block:Tags}
  1360. </div>{/block:HasTags}
  1361.  
  1362. </div>{/block:Date}{/block:PermalinkPage}
  1363.  
  1364. <!------------- If Symbols for Index Page ------------->
  1365. {block:IfPostendingSymbolsForIndexpage}
  1366. {block:IndexPage}
  1367. <div id="postinfo">
  1368.  
  1369. <!-- date posted -->
  1370. {block:Date}
  1371. <a href="{Permalink}" title="{ShortMonth}.{DayOfMonthWithZero}.{ShortYear}"><l class="fa fa-hourglass-half"></l></a>
  1372. {/block:Date}
  1373. <!-- notes counter -->
  1374. {block:NoteCount}
  1375. <a href="{Permalink}" title="{NoteCountWithLabel}"><l class="fa fa-search"></l></a>
  1376. {/block:NoteCount}
  1377. <!-- original poster -->
  1378. {block:ContentSource}
  1379. <a href="{SourceURL}" title="Source: {SourceTitle}"><l class="fa fa-copyright"></l></a>
  1380. {/block:ContentSource}
  1381. <!-- reblogged from -->
  1382. {block:RebloggedFrom}
  1383. <a href="{ReblogParentURL}" title="Via: {ReblogParentName}"><l class="fa fa-at"></l></a>
  1384. {/block:RebloggedFrom}
  1385. <!-- tags -->
  1386. {block:HasTags}
  1387. <a href="{Permalink}" title="# {block:Tags}{Tag}, {/block:Tags}"><l class="fa fa-tag"></l></a>
  1388. {/block:HasTags}
  1389. <!-- reblog and like -->
  1390. <a href="{ReblogURL}" title="Reblog"><l class="fa fa-refresh"></l></a>
  1391. <div id="like" title="like">{LikeButton size="30"}</div>
  1392.  
  1393. </div>
  1394. {/block:IndexPage}
  1395. {/block:IfPostendingSymbolsForIndexpage}
  1396.  
  1397. <!------------- If NO Symbols for Index Page ------------->
  1398. {block:IfNotPostendingSymbolsForIndexpage}
  1399. {block:IndexPage}
  1400. {block:Date}<div id="postending">
  1401.  
  1402. <!-- date posted -->
  1403. <a href="{Permalink}">{ShortMonth}.{DayOfMonthWithZero}.{ShortYear}</a>
  1404. <!-- notes counter -->
  1405. {block:NoteCount}
  1406. || {NoteCountWithLabel}
  1407. {/block:NoteCount}
  1408. <!-- reblogged from -->
  1409. {block:RebloggedFrom}<br>
  1410. Via: <a href="{ReblogParentURL}">{ReblogParentName}</a>
  1411. {/block:RebloggedFrom}
  1412. <!-- original poster -->
  1413. {block:ContentSource}
  1414. || Source: <a href="{SourceURL}">{SourceTitle}</a>
  1415. {/block:ContentSource}
  1416. <!-- tags -->
  1417. {block:HasTags}<br><div style="padding:0px 20px 0px 20px">
  1418. Tags: {block:Tags}<a href="{TagURL}">{Tag}</a>, {/block:Tags}
  1419. </div>{/block:HasTags}
  1420.  
  1421. </div>{/block:Date}
  1422. {/block:IndexPage}
  1423. {/block:IfNotPostendingSymbolsForIndexpage}
  1424.  
  1425. </div> <!-- ending div tag for "posts" -->
  1426.  
  1427. {/block:Posts}
  1428.  
  1429. <!------------------------------- PERMALINK -------------------------------->
  1430.  
  1431. {block:PostNotes}
  1432. <div id="permalink">
  1433. <div id="notescontainer">{PostNotes}</div>
  1434. </div>
  1435. {/block:PostNotes}
  1436.  
  1437. </div> <!-- ending div tag for "entries" --><script>
  1438. /* questions? ask oddhour.tumblr.com */
  1439. var updatePhotosetCss = "<style id='updatePhotosetStyle'> .photoset .photoset_row.photoset_row_1 img { max-width: 540px; } .photoset .photoset_row.photoset_row_1 { margin-top:5px; } .photoset .photoset_row.photoset_row_2 img { max-width: 268px; } .photoset .photoset_row.photoset_row_2 { margin-top:5px; } .photoset .photoset_row.photoset_row_3 img { max-width: 177px; } .photoset .photoset_row.photoset_row_3 { margin-top:5px; } .photoset .photoset_row { text-align: center; width: 540px; } .photoset .photoset_row .photoset_photo {margin-left:4px;} .photoset { width: 540px; }</style>";
  1440. function updatePhotoset() {
  1441.  
  1442. $(".photoset").each( function (i, e) {
  1443. if($(this.contentDocument).find("#updatePhotosetStyle").size() <= 0)
  1444. $(this.contentDocument).find("head").append(updatePhotosetCss);
  1445. var photoset = $(this.contentDocument).find(".photoset");
  1446. var photosetRows = photoset.find(".photoset_row");
  1447. photoset.find(".photoset_photo")
  1448. .each(function () {
  1449. var hiResSrc = $(this).attr("href");
  1450. var img = $(this).find('img');
  1451. img.attr("src", hiResSrc );
  1452. img.attr("style", "");
  1453. });
  1454. photosetRows.attr("style", "").css("margin-bottom", "-5px");
  1455. photoset.attr("style","");
  1456.  
  1457. $(this).height($(this.contentDocument.body).height());
  1458. });
  1459. }
  1460.  
  1461. updatePhotoset();
  1462.  
  1463. var photosetTimer = setInterval(updatePhotoset, 1500);
  1464. $(window).on('load', function () { setTimeout(function() {clearInterval(photosetTimer)}, 2000); })
  1465. </script>
  1466.  
  1467. </body>
  1468. </html>
Add Comment
Please, Sign In to add comment