API tools faq
paste
sullissi

theme uel pirata

sullissi
Jul 31st, 2012
260
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 96.18 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5. <!--
  6. POPCASE TUMBLR THEME v.1.1
  7. Created by TOFUTHEMES
  8. (http://tofuthemes.com)
  9. -->
  10.  
  11. <title>{Title}{block:PostSummary} &bull; {PostSummary}{/block:PostSummary}</title>
  12.  
  13. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  14. <meta name="viewport" content="width=device-width; initial-scale=1" />
  15.  
  16. <!-- Description -->
  17. {block:Description}
  18. <meta name="description" content="{MetaDescription}"/>
  19. {/block:Description}
  20.  
  21. <!-- Favicon & logo -->
  22. <meta name="image:Favicon" content=""/>
  23. <meta name="image:Logo" content=""/>
  24.  
  25. <!-- Logo/Avatar Image Upload -->
  26. <meta name="image:Profile Picture" content=""/>
  27.  
  28. <!-- Image slider upload -->
  29. <meta name="image:Image Slider 1" content=""/>
  30. <meta name="image:Image Slider 2" content=""/>
  31. <meta name="image:Image Slider 3" content=""/>
  32. <meta name="image:Image Slider 4" content=""/>
  33. <meta name="image:Image Slider 5" content=""/>
  34.  
  35. <!-- Link Image slider -->
  36. <meta name="text:Link Slider 1" content=""/>
  37. <meta name="text:Link Slider 2" content=""/>
  38. <meta name="text:Link Slider 3" content=""/>
  39. <meta name="text:Link Slider 4" content=""/>
  40. <meta name="text:Link Slider 5" content=""/>
  41.  
  42. <!-- Social Account -->
  43. <meta name="text:Twitter Account" content="#" />
  44. <meta name="text:Facebook Account" content="#" />
  45. <meta name="text:Gplus Account" content="#" />
  46. <meta name="text:Flickr Account" content="#" />
  47. <meta name="text:Dribbble Account" content="#" />
  48. <meta name="text:Pinterest Account" content="#" />
  49. <meta name="text:Instagram Account" content="" />
  50.  
  51. <!-- Color Option -->
  52. <meta name="color:Body" content="#e4e6e9"/>
  53. <meta name="color:Header" content="#000000"/>
  54. <meta name="color:Frame Header" content="#212121"/>
  55. <meta name="color:Title" content="#000000"/>
  56. <meta name="color:Link" content="#ff9600"/>
  57. <meta name="color:Font" content="#585858"/>
  58. <meta name="color:Frame Post" content="#ffffff"/>
  59. <meta name="color:Post Ribbon" content="#ff0000"/>
  60. <meta name="color:Post Question" content="#f0f0f0"/>
  61. <meta name="color:Post Answer" content="#dee2e6"/>
  62. <meta name="color:Widget Title" content="#5a5a5a"/>
  63. <meta name="color:Post Title" content="#000000"/>
  64. <meta name="color:Widget Content" content="#f2f2f2"/>
  65.  
  66. <!-- Widget -->
  67. <meta name="if:Enabled Following Widget" content="1" />
  68. <meta name="if:Enabled About Widget" content="1" />
  69. <meta name="if:Enabled Tag Cloud Widget" content="1" />
  70. <meta name="if:Enabled Likes Widget" content="1" />
  71. <meta name="if:Enabled Flickr Widget" content="1" />
  72. <meta name="if:Enabled Facebook Widget" content="1" />
  73. <meta name="if:Enabled Twitter Widget" content="1" />
  74. <meta name="if:Enabled Dribbble Widget" content="1" />
  75. <meta name="if:Enabled Instagram Widget" content="1" />
  76.  
  77.  
  78. <!-- Disqus Shortname -->
  79. <meta name="text:Disqus Shortname" content="tofuthemes"/>
  80.  
  81. <!-- Google Analytics -->
  82. <meta name="text:Google Analytics ID" content="" />
  83.  
  84. <!-- Favicon -->
  85. {block:ifFaviconImage}
  86. <link rel="shortcut icon" href="{image:Favicon}" />
  87. {/block:ifFaviconImage}
  88.  
  89. {block:ifNotFaviconImage}
  90. <link rel="shortcut icon" href="{Favicon}" />
  91. {/block:ifNotFaviconImage}
  92.  
  93. <!-- import flexslider css -->
  94. <link rel="stylesheet" href="http://static.tumblr.com/xingagi/sFNm072nr/flexslider.css" type="text/css" media="screen" />
  95. <!-- font -->
  96. <link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
  97. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  98.  
  99. <style type="text/css">
  100.  
  101. * {margin:0; padding:0}
  102.  
  103. /*---------- GENERAL ----------*/
  104. body {
  105. background-color: {color:Body};
  106. font-family: Helvetica, Arial, sans-serif;
  107. font-size: 12px;
  108. font-style: normal;
  109. color: {color:Font};
  110. }
  111. a {
  112. text-decoration: none;
  113. color: {color:Link};
  114. }
  115. h1,h2,h3,h4,h5,h6 {
  116. font-family: 'Abel', sans-serif;
  117. font-weight: normal;
  118. }
  119. p {
  120. font-size: 12px;
  121. line-height: 20px;
  122. }
  123.  
  124.  
  125. /*---------- LAYOUT ----------*/
  126. #container {
  127. position: relative;
  128. width: 100%;
  129. }
  130. #header-wrapper, #content-wrapper {
  131. position: relative;
  132. width: 100%;
  133. float: left;
  134. }
  135. #banner-wrapper, #footer-wrapper, #footer_sosmed {
  136. position: relative;
  137. width: 100%;
  138. background-color: {color:Header};
  139. float: left;
  140. }
  141. #header, #content, #footer {
  142. position: relative;
  143. margin: 0 auto;
  144. }
  145. #banner {
  146. position: relative;
  147. overflow: inherit;
  148. height: auto;
  149. margin: 0 auto;
  150. }
  151. #footer_sosmed{
  152. background-color:{color:Post Answer} ;
  153. }
  154. p.copyright {
  155. float: left;
  156. margin: 10px;
  157. font-size: 11px;
  158. color: {color:Widget Title};
  159. }
  160. p.powered {
  161. float: right;
  162. margin: 10px;
  163. font-size: 11px;
  164. color: {color:Widget Title};
  165. }
  166. p.copyright a:hover,
  167. p.powered a:hover {
  168. text-decoration: underline;
  169. }
  170.  
  171.  
  172. /*---------- TITLE & LOGO ----------*/
  173. #TitleLogo {
  174. float: left;
  175. height: 40px;
  176. overflow: hidden;
  177. margin: 30px 10px 20px 10px;
  178. padding: 0;
  179. }
  180. #TitleLogo h1 a {
  181. font-family: 'Abel', sans-serif;
  182. font-size: 38px;
  183. font-weight: normal;
  184. text-transform: uppercase;
  185. line-height: 40px;
  186. color: {color:Title};
  187. -webkit-transition: 0.3s;
  188. -moz-transition: 0.3s ease-in-out;
  189. -o-transition: 0.3s ease-in-out;
  190. -ms-transition: 0.3s ease-in-out;
  191. transition: 0.3s ease-in-out;
  192. }
  193. #TitleLogo h1 a:hover {
  194. color: {color:Link};
  195. }
  196. #TitleLogo h1 a img {
  197. height: 40px;
  198. border: none;
  199. }
  200.  
  201.  
  202.  
  203. /*---------- TOP-MENUS ----------*/
  204. #top-icons {
  205. float: right;
  206. padding: 0;
  207. }
  208.  
  209. #top-menus {
  210. float: right;
  211. margin: 0;
  212. padding: 0;
  213. }
  214. #top-menus ul {
  215. float: right;
  216. margin: 0;
  217. padding: 0;
  218. }
  219. #top-menus ul li.menu, #top-menus ul li.menu_mobile {
  220. position: relative;
  221. list-style: none;
  222. float: right;
  223. }
  224. #top-menus ul li a.pages_mobile, #top-menus ul li a.pages_info {
  225. float: left;
  226. width: 23px;
  227. height: 22px;
  228. margin-top: 10px;
  229. margin-left: 10px;
  230. margin-right: 0px;
  231. border: none;
  232. }
  233. #top-menus ul li a.home,
  234. #top-menus ul li a.archive,
  235. #top-menus ul li a.pages,
  236. #top-menus ul li a.rss,
  237. #top-menus ul li a.ask,
  238. #top-menus ul li a.submission,
  239. #top-menus ul li a.search {
  240. float: left;
  241. width: 32px;
  242. height: 32px;
  243. margin-left: 10px;
  244. margin-right: 0px;
  245. border: none;
  246. }
  247. #top-menus ul li a.home {
  248. background: url('http://static.tumblr.com/xingagi/sBVlvz7ia/icon-home.png') no-repeat top left;
  249. }
  250. #top-menus ul li a.home:hover {
  251. background: url('http://static.tumblr.com/xingagi/sBVlvz7ia/icon-home.png') no-repeat bottom left;
  252. }
  253. #top-menus ul li a.archive {
  254. background: url('http://static.tumblr.com/xingagi/nSylvz7kv/icon-archive.png') no-repeat top left;
  255. }
  256. #top-menus ul li a.archive:hover {
  257. background: url('http://static.tumblr.com/xingagi/nSylvz7kv/icon-archive.png') no-repeat bottom left;
  258. }
  259. #top-menus ul li a.pages {
  260. background: url('http://static.tumblr.com/xingagi/s6Nlvz7lq/icon-pages.png') no-repeat top left;
  261. }
  262. #top-menus ul li a.pages:hover {
  263. background: url('http://static.tumblr.com/xingagi/s6Nlvz7lq/icon-pages.png') no-repeat bottom left;
  264. }
  265. #top-menus ul li a.rss {
  266. background: url('http://static.tumblr.com/xingagi/EiMlvz7my/icon-rss.png') no-repeat top left;
  267. }
  268. #top-menus ul li a.rss:hover {
  269. background: url('http://static.tumblr.com/xingagi/EiMlvz7my/icon-rss.png') no-repeat bottom left;
  270. }
  271. #top-menus ul li a.ask {
  272. background: url('http://static.tumblr.com/xingagi/0Aelvz7nx/icon-ask.png') no-repeat top left;
  273. }
  274. #top-menus ul li a.ask:hover {
  275. background: url('http://static.tumblr.com/xingagi/0Aelvz7nx/icon-ask.png') no-repeat bottom left;
  276. }
  277. #top-menus ul li a.submission {
  278. background: url('http://static.tumblr.com/xingagi/ME6lvz7ol/icon-submit.png') no-repeat top left;
  279. }
  280. #top-menus ul li a.submission:hover {
  281. background: url('http://static.tumblr.com/xingagi/ME6lvz7ol/icon-submit.png') no-repeat bottom left;
  282. }
  283. #top-menus ul li a.search {
  284. background: url('http://static.tumblr.com/xingagi/rIplvz7pc/icon-search.png') no-repeat top left;
  285. }
  286. #top-menus ul li a.search:hover {
  287. background: url('http://static.tumblr.com/xingagi/rIplvz7pc/icon-search.png') no-repeat bottom left;
  288. }
  289. #top-menus-dropdown li a.pages_mobile {
  290. background: url('http://static.tumblr.com/xingagi/7rdm03xgg/icon-dropdown.png') no-repeat top left;
  291. }
  292. #top-menus-dropdown li a.pages_mobile:hover {
  293. background: url('http://static.tumblr.com/xingagi/7rdm03xgg/icon-dropdown.png') no-repeat bottom left;
  294. }
  295. #top-menus-dropdown li a.pages_info {
  296. background: url('http://static.tumblr.com/xingagi/hTRm04u1u/icon-information.png') no-repeat top left;
  297. }
  298. #top-menus-dropdown li a.pages_info:hover {
  299. background: url('http://static.tumblr.com/xingagi/hTRm04u1u/icon-information.png') no-repeat bottom left;
  300. }
  301.  
  302. #search {
  303. visibility: hidden;
  304. position: absolute;
  305. top: 35px;
  306. right: -2px;
  307. width: 150px;
  308. height: 40px;
  309. background: url('http://static.tumblr.com/he6jwsj/Gj7lvpicr/searchbg.png') no-repeat;
  310. z-index: 100;
  311. }
  312. .searchText {
  313. float: left;
  314. width: 95px;
  315. margin: 12px 3px 5px 5px;
  316. padding: 5px;
  317. background: #ffffff;
  318. border: none;
  319. outline: none;
  320. font-size: 12px;
  321. font-style: italic;
  322. color: #a8a8a9;
  323. }
  324. .searchBtn {
  325. float: right;
  326. width: 30px;
  327. margin: 12px 5px 5px 2px;
  328. padding: 5px;
  329. background: #b4b4b4;
  330. color: #ffffff;
  331. font-size: 11px;
  332. border: none;
  333. cursor: pointer;
  334. -webkit-border-radius: 3px;
  335. -khtml-border-radius: 3px;
  336. -moz-border-radius: 3px;
  337. border-radius: 3px;
  338. }
  339. .searchBtn:hover {
  340. background: {color:Link};
  341. }
  342.  
  343. span.pointer-sub {
  344. position: absolute;
  345. top: -6px;
  346. right: 20px;
  347. width: 10px;
  348. height: 7px;
  349. background: url('http://static.tumblr.com/xingagi/TRzlvz83t/pointmenu.png') no-repeat;
  350. }
  351. .pages-menu, .pages-menu-mobile {
  352. visibility: hidden;
  353. position: absolute;
  354. top: 40px;
  355. right: -10px;
  356. width: 160px;
  357. height: auto;
  358. padding: 5px;
  359. background: #ffffff;
  360. border: 1px solid #acafb3;
  361. z-index: 100;
  362. -webkit-border-radius: 5px;
  363. -khtml-border-radius: 5px;
  364. -moz-border-radius: 5px;
  365. border-radius: 5px;
  366. }
  367. .pages-menu-info {
  368. visibility: hidden;
  369. position: absolute;
  370. top: 40px;
  371. right: -10px;
  372. width: 260px;
  373. height: auto;
  374. padding: 5px;
  375. background: #ffffff;
  376. border: 1px solid #acafb3;
  377. z-index: 100;
  378. -webkit-border-radius: 5px;
  379. -khtml-border-radius: 5px;
  380. -moz-border-radius: 5px;
  381. border-radius: 5px;
  382. }
  383. .pages-menu li.submenu, .pages-menu-mobile li.submenu {
  384. margin: 0;
  385. padding: 0;
  386. list-style: none;
  387. }
  388. .pages-menu-info p{
  389. width: 250px;
  390. color: #5a5a5a;
  391. text-decoration: none;
  392. background: none;
  393. float: left;
  394. overflow: hidden;
  395. margin: 0;
  396. padding: 10px;
  397. }
  398. .pages-menu li a, .pages-menu-mobile li a {
  399. float: left;
  400. overflow: hidden;
  401. margin: 0;
  402. padding: 5px;
  403. width: 150px;
  404. font-size: 12px;
  405. line-height: 18px;
  406. text-transform: uppercase;
  407. color: #5a5a5a;
  408. text-decoration: none;
  409. background: none;
  410. -webkit-border-radius: 3px;
  411. -khtml-border-radius: 3px;
  412. -moz-border-radius: 3px;
  413. border-radius: 3px;
  414. }
  415. .pages-menu li a:hover, .pages-menu-mobile li a:hover {
  416. color: #fff;
  417. background: {color:Link};
  418. }
  419.  
  420.  
  421. /*---------- TOP-SOSMED ICONS ----------*/
  422. #top-sosmed {
  423. position: relative;
  424. float: right;
  425. margin: 0;
  426. margin-left: 10px;
  427. border-left: 1px dashed #8f8f8f;
  428. }
  429. #bottom-sosmed {
  430. position: relative;
  431. margin: 0 auto;
  432. width: 280px;
  433. border-left: none;
  434. display: none;
  435. }
  436. #top-sosmed ul, #bottom-sosmed ul {
  437. float: right;
  438. margin: 0;
  439. padding: 0;
  440. }
  441. #bottom-sosmed ul{
  442. padding: 10px;
  443. }
  444. #top-sosmed li, #bottom-sosmed li {
  445. list-style: none;
  446. display: inline;
  447. float: left;
  448. }
  449. #top-sosmed li a, #bottom-sosmed li a {
  450. float: left;
  451. width: 33px;
  452. height: 32px;
  453. margin-left: 10px;
  454. margin-right: 0px;
  455. text-indent: -10000px;
  456. border: none;
  457. }
  458. #top-sosmed li a.twitter, #bottom-sosmed li a.twitter {
  459. background: url('http://static.tumblr.com/xingagi/RfClvz86m/icon-twitter.png') no-repeat top left;
  460. }
  461. #top-sosmed li a.twitter:hover, #bottom-sosmed li a.twitter:hover {
  462. background: url('http://static.tumblr.com/xingagi/RfClvz86m/icon-twitter.png') no-repeat bottom left;
  463. }
  464. #top-sosmed li a.facebook, #bottom-sosmed li a.facebook {
  465. background: url('http://static.tumblr.com/xingagi/ooglvz87b/icon-facebook.png') no-repeat top left;
  466. }
  467. #top-sosmed li a.facebook:hover, #bottom-sosmed li a.facebook:hover {
  468. background: url('http://static.tumblr.com/xingagi/ooglvz87b/icon-facebook.png') no-repeat bottom left;
  469. }
  470. #top-sosmed li a.gplus, #bottom-sosmed li a.gplus {
  471. background: url('http://static.tumblr.com/xingagi/CQvlvz87z/icon-gplus.png') no-repeat top left;
  472. }
  473. #top-sosmed li a.gplus:hover, #bottom-sosmed li a.gplus:hover {
  474. background: url('http://static.tumblr.com/xingagi/CQvlvz87z/icon-gplus.png') no-repeat bottom left;
  475. }
  476.  
  477. #top-sosmed li a.pinterest, #bottom-sosmed li a.pinterest {
  478. background: url('http://static.tumblr.com/xingagi/SBLm03vat/icon-pinterest.png') no-repeat top left;
  479. }
  480. #top-sosmed li a.pinterest:hover, #bottom-sosmed li a.pinterest:hover {
  481. background: url('http://static.tumblr.com/xingagi/SBLm03vat/icon-pinterest.png') no-repeat bottom left;
  482. }
  483. #top-sosmed li a.dribbble, #bottom-sosmed li a.dribbble {
  484. background: url('http://static.tumblr.com/xingagi/kXam03vfx/icon-dribbble.png') no-repeat top left;
  485. }
  486. #top-sosmed li a.dribbble:hover,#bottom-sosmed li a.dribbble:hover {
  487. background: url('http://static.tumblr.com/xingagi/kXam03vfx/icon-dribbble.png') no-repeat bottom left;
  488. }
  489. #top-sosmed li a.flickr, #bottom-sosmed li a.flickr {
  490. background: url('http://static.tumblr.com/xingagi/4eFm03vhu/icon-flickr.png') no-repeat top left;
  491. }
  492. #top-sosmed li a.flickr:hover, #bottom-sosmed li a.flickr:hover {
  493. background: url('http://static.tumblr.com/xingagi/4eFm03vhu/icon-flickr.png') no-repeat bottom left;
  494. }
  495.  
  496.  
  497. /*---------- PROFILE ----------*/
  498. #profile {
  499. position: relative;
  500. overflow: hidden;
  501. float: left;
  502. width: 200px;
  503. height: 280px;
  504. background: {color:Header};
  505. border: 10px solid {color:Frame Header};
  506. margin: 30px 0 30px 10px;
  507. padding: 0;
  508. }
  509. #photo-portrait {
  510. width: 200px;
  511. margin: 0px;
  512. background: #e4e6e9;
  513. }
  514. #photo-portrait img {
  515. min-width: 200px;
  516. height: 280px;
  517. border: none;
  518. }
  519. #profile .button_info a img {
  520. position: absolute;
  521. right: 7px;
  522. bottom: 7px;
  523. padding: 0px;
  524. width: 20px;
  525. height: 20px;
  526. z-index: 10;
  527. }
  528. .bio-desc {
  529. display: none;
  530. position: absolute;
  531. overflow: hidden;
  532. top: 0;
  533. left: 0;
  534. width: 180px;
  535. height: 260px;
  536. padding: 10px;
  537. color: #ffffff;
  538. background: #000000;
  539. opacity: 0.8;
  540. }
  541. .bio-desc p {
  542. font-size: 11px;
  543. line-height: 16px;
  544. margin-bottom: 10px;
  545. }
  546.  
  547. /*---------- SLIDER ----------*/
  548. /* flex slider */
  549. .flexslider {
  550. position: relative;
  551. float: right;
  552. background: {color:Frame Header};
  553. margin: 30px 10px 30px 20px;
  554. padding: 0;
  555. border : 10px solid {color:Frame Header};
  556. }
  557. .flexslider {
  558. max-height: 280px;
  559. overflow: hidden;
  560. }
  561.  
  562.  
  563. /*----- panel -----*/
  564. #panel-wrapper {
  565. position: relative;
  566. width: 100%;
  567. float: left;
  568. }
  569. #panel-button {
  570. position: relative;
  571. margin: 0 auto;
  572. }
  573. span a.panelbar {
  574. position: absolute;
  575. top: -5px;
  576. right: 10px;
  577. width: 34px;
  578. height: 22px;
  579. z-index: 100;
  580. -webkit-border-radius: 5px;
  581. -khtml-border-radius: 5px;
  582. -moz-border-radius: 5px;
  583. border-radius: 5px;
  584. background: {color:Header};
  585. }
  586. span a.panelbar img {
  587. width: 12px;
  588. height: 8px;
  589. border: 0;
  590. position: absolute;
  591. bottom: 6px;
  592. left: 11px;
  593. }
  594.  
  595.  
  596. /* ========== WIDGET ========== */
  597. #widget-bar {
  598. position: relative;
  599. margin: 0;
  600. float: left;
  601. display: none;
  602. }
  603. .widgets {
  604. width: 220px;
  605. margin: 10px;
  606. float: left;
  607. }
  608. h3.widget-title {
  609. font-size: 16px;
  610. line-height: 20px;
  611. margin-left: 10px;
  612. margin-right: 10px;
  613. padding-bottom: 10px;
  614. border-bottom: 1px dashed #515151;
  615. color: {color:Widget Title};
  616. }
  617. .widget-content {
  618. width: 200px;
  619. margin: 10px;
  620. float: left;
  621. }
  622. .following .widget-content, .following .liked {
  623. width: 200px;
  624. height: 215px;
  625. margin: 10px;
  626. float: left;
  627. overflow: hidden;
  628. }
  629.  
  630.  
  631. /*========== TEXT WIDGET ==========*/
  632. .widget-text {
  633. overflow: hidden;
  634. width: 220px;
  635. height: auto;
  636. margin-top: 10px;
  637. margin-left: 10px;
  638. }
  639. .widget-text span.widtext {
  640. width: 200px;
  641. color: {color:Widget Content};
  642. font-size: 11px;
  643. line-height: 20px;
  644. margin-top: 10px;
  645. margin-left: 10px;
  646. float: left;
  647. }
  648. .widget-text span.widtext a {
  649. font-size: 11px;
  650. text-decoration: none;
  651. color: {color:Link};
  652. }
  653.  
  654.  
  655. /*========== DRIBBBLE ==========*/
  656. #dribbble-widget{
  657. margin-left: 10px;
  658. margin-top: 10px;
  659. }
  660. .dribbble-shot {
  661. overflow: hidden;
  662. width: 220px;
  663. }
  664. .dribbble-shot ul li {
  665. list-style: none;
  666. float: left;
  667. }
  668. .dribbble-shot ul li a {
  669. text-decoration: none;
  670. border: none;
  671. margin: 5px 13px 10px 0px;
  672. float: left;
  673. }
  674. .dribbble-shot ul li a img {
  675. width: 53px;
  676. height: 53px;
  677. border: none;
  678. -webkit-border-radius: 3px;
  679. -khtml-border-radius: 3px;
  680. -moz-border-radius: 3px;
  681. border-radius: 3px;
  682. }
  683.  
  684.  
  685. /*========== INSTAGRAM ==========*/
  686. #instagram-widget{
  687. margin-left: 10px;
  688. margin-top: 10px;
  689. }
  690. .instagram-photo {
  691. overflow: hidden;
  692. width: 220px;
  693. }
  694. .instagram-photo img {
  695. float: left;
  696. text-decoration: none;
  697. border: none;
  698. margin: 5px 13px 13px 0px;
  699. width: 53px;
  700. height: 53px;
  701. border: none;
  702. -webkit-border-radius: 3px;
  703. -khtml-border-radius: 3px;
  704. -moz-border-radius: 3px;
  705. border-radius: 3px;
  706. }
  707.  
  708.  
  709. /*========== FLICKR ==========*/
  710. .flickr_widget {
  711. overflow: hidden;
  712. width: 220px;
  713. height: 280px;
  714. }
  715. #photos {
  716. overflow: hidden;
  717. height: 215px;
  718. float: left;
  719. margin-top: 10px;
  720. margin-left: 10px;
  721. }
  722. #photos a {
  723. text-decoration: none;
  724. border: none;
  725. margin: 5px 13px 10px 0px;
  726. float: left;
  727. }
  728. #photos a img {
  729. width: 53px;
  730. height: 53px;
  731. border: none;
  732. -webkit-border-radius: 3px;
  733. -khtml-border-radius: 3px;
  734. -moz-border-radius: 3px;
  735. border-radius: 3px;
  736. }
  737.  
  738. .show_photo {
  739. margin-top: 10px;
  740. margin-left: 5px;
  741. float: right;
  742. }
  743.  
  744.  
  745. /*========== TAG CLOUD ==========*/
  746. #taglist {
  747. overflow: hidden;
  748. height: auto;
  749. float: left;
  750. }
  751. #tag_list {
  752. position: relative;
  753. overflow: hidden;
  754. width: 220px;
  755. height: 275px;
  756. margin-top: 10px;
  757. float: left;
  758. }
  759. #tag_list li {
  760. list-style: none;
  761. background-color: #1b1d26;
  762. padding: 5px 10px;
  763. margin: 5px;
  764. float: left;
  765. border-radius: 5px;
  766. -webkit-border-radius: 5px;
  767. -moz-border-radius: 5px;
  768. -khtml-border-radius: 5px;
  769. font-size: 12px !important;
  770. }
  771. #tag_list li:hover {
  772. background-color: {color:Link};
  773. }
  774. #tag_list li a, #tag_list li a:hover {
  775. color: #ffffff;
  776. }
  777.  
  778.  
  779. /*========== TWEETROLL ==========*/
  780. .stream {
  781. overflow: hidden;
  782. width: 200px;
  783. height: auto;
  784. margin: 0;
  785. }
  786. .stream p {
  787. color: {color:Widget Content};
  788. font-size: 11px;
  789. line-height: 18px;
  790. }
  791. .stream ul li {
  792. list-style: none;
  793. width: 200px;
  794. margin-bottom: 10px;
  795. padding-bottom: 10px;
  796. border-bottom: 1px dashed #515151;
  797. float: left;
  798. }
  799. .stream ul li:last-child {
  800. border-bottom: 0px;
  801. }
  802. .stream ul li a.tweet-time {
  803. font-size: 11px;
  804. text-decoration: none;
  805. float: right;
  806. margin-top: 5px;
  807. color: #4e555a;
  808. }
  809. .stream ul li a.tweet-time:hover {
  810. color: {color:Link};
  811. }
  812.  
  813.  
  814. /*========== LIKED POSTS ==========*/
  815. li.likes {
  816. width: 200px;
  817. padding: 0;
  818. float: left;
  819. }
  820. li.like_post {
  821. list-style: none;
  822. overflow: hidden;
  823. margin-top: 3px;
  824. font-size: 11px;
  825. }
  826. li.like_post img {
  827. width: 200px;
  828. margin-bottom: 10px;
  829. -webkit-border-radius: 3px;
  830. -khtml-border-radius: 3px;
  831. -moz-border-radius: 3px;
  832. border-radius: 3px;
  833. }
  834. li.like_post blockquote {
  835. margin: 0;
  836. padding: 0 0 0 10px;
  837. border-left: 1px solid #eee;
  838. }
  839. li.like_post ol, li.like_post ul {
  840. margin: 0 0 0 0px;
  841. padding: 0;
  842. }
  843. li.like_post .like_link a {
  844. font-weight: normal;
  845. }
  846. li.like_post .like_title {
  847. font-weight: bold;
  848. }
  849. li.like_post .like_caption {
  850. margin: 0 0 10px 0;
  851. display: block !important;
  852. padding: 0px;
  853. }
  854. li.like_post .like_caption p {
  855. font-size: 11px;
  856. color: {color:Widget Content};
  857. }
  858. li.like_post .post_info_bottom {
  859. margin: 0 0 10px 0;
  860. display: block !important;
  861. padding: 0px;
  862. }
  863.  
  864.  
  865. /*========== FOLLOWING ==========*/
  866. .following {
  867. overflow: hidden;
  868. width: 200px;
  869. height: auto;
  870. }
  871. .following ul li {
  872. list-style: none;
  873. float: left;
  874. }
  875. .following ul li a {
  876. text-decoration: none;
  877. border: none;
  878. margin: 5px 13px 10px 0px;
  879. float: left;
  880. }
  881. .following ul li a img {
  882. width: 53px;
  883. height: 53px;
  884. border: none;
  885. -webkit-border-radius: 3px;
  886. -khtml-border-radius: 3px;
  887. -moz-border-radius: 3px;
  888. border-radius: 3px;
  889. }
  890.  
  891. .more_stuff a {
  892. float: right;
  893. color: {color:Widget Title};
  894. font-size: 11px;
  895. margin-right: 10px;
  896. margin-bottom: 10px;
  897. }
  898. .more_stuff a:hover {
  899. color: {color:Link};
  900. }
  901.  
  902.  
  903.  
  904. /*========== Jcarousel ==========*/
  905.  
  906. .jcarousel-skin-tango .jcarousel-direction-rtl {
  907. direction: rtl;
  908. }
  909. .jcarousel-skin-tango .jcarousel-container-horizontal {
  910. width: 920px;
  911. padding: 0 20px;
  912. }
  913. .jcarousel-skin-tango .jcarousel-container-vertical {
  914. width: 75px;
  915. height: 245px;
  916. padding: 40px 20px;
  917. }
  918. .jcarousel-skin-tango .jcarousel-clip {
  919. overflow: hidden;
  920. }
  921. .jcarousel-skin-tango .jcarousel-clip-horizontal {
  922. width: 920px;
  923. height: auto;
  924. }
  925. .jcarousel-skin-tango .jcarousel-clip-vertical {
  926. width: 75px;
  927. height: 245px;
  928. }
  929. .jcarousel-skin-tango .jcarousel-item {
  930. width: 220px;
  931. height: auto;
  932. }
  933. .jcarousel-skin-tango .jcarousel-item-horizontal {
  934. margin-left: 0;
  935. margin-right: 10px;
  936. }
  937. .jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal {
  938. margin-left: 10px;
  939. margin-right: 0;
  940. }
  941. .jcarousel-skin-tango .jcarousel-item-vertical {
  942. margin-bottom: 10px;
  943. }
  944. .jcarousel-skin-tango .jcarousel-item-placeholder {
  945. background: #fff;
  946. color: #000;
  947. }
  948.  
  949. /* Horizontal Buttons */
  950. .jcarousel-skin-tango .jcarousel-next-horizontal {
  951. position: absolute;
  952. top: 35%;
  953. right: -30px;
  954. width: 32px;
  955. height: 32px;
  956. cursor: pointer;
  957. background: transparent url(http://static.tumblr.com/bygdzhm/Qsmlz1132/btn-arrow-right.png) no-repeat 0 0;
  958. }
  959. .jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
  960. left: 5px;
  961. right: auto;
  962. background-image: url(http://static.tumblr.com/bygdzhm/n8tlz112h/btn-arrow-left.png);
  963. }
  964. .jcarousel-skin-tango .jcarousel-next-horizontal:hover,
  965. .jcarousel-skin-tango .jcarousel-next-horizontal:focus {
  966. opacity: 0.6;
  967. }
  968. .jcarousel-skin-tango .jcarousel-next-horizontal:active {
  969. opacity: 0.6;
  970. }
  971. .jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
  972. .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
  973. .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:focus,
  974. .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
  975. cursor: default;
  976. background-position: -96px 0;
  977. }
  978. .jcarousel-skin-tango .jcarousel-prev-horizontal {
  979. position: absolute;
  980. top: 35%;
  981. left: -20px;
  982. width: 32px;
  983. height: 32px;
  984. cursor: pointer;
  985. background: transparent url(http://static.tumblr.com/bygdzhm/n8tlz112h/btn-arrow-left.png) no-repeat 0 0;
  986. }
  987. .jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
  988. left: auto;
  989. right: 5px;
  990. background-image: url(http://static.tumblr.com/bygdzhm/Qsmlz1132/btn-arrow-right.png);
  991. }
  992. .jcarousel-skin-tango .jcarousel-prev-horizontal:hover,
  993. .jcarousel-skin-tango .jcarousel-prev-horizontal:focus {
  994. opacity: 0.6;
  995. }
  996. .jcarousel-skin-tango .jcarousel-prev-horizontal:active {
  997. opacity: 0.6;
  998. }
  999. .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
  1000. .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
  1001. .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:focus,
  1002. .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
  1003. cursor: default;
  1004. }
  1005.  
  1006. /* Vertical Buttons */
  1007. .jcarousel-skin-tango .jcarousel-next-vertical {
  1008. position: absolute;
  1009. bottom: 5px;
  1010. left: 43px;
  1011. width: 32px;
  1012. height: 32px;
  1013. cursor: pointer;
  1014. background: transparent url(http://static.tumblr.com/xingagi/Gp0lzgptt/next-vertical.png) no-repeat 0 0;
  1015. }
  1016. .jcarousel-skin-tango .jcarousel-next-vertical:hover,
  1017. .jcarousel-skin-tango .jcarousel-next-vertical:focus {
  1018. background-position: 0 -32px;
  1019. }
  1020. .jcarousel-skin-tango .jcarousel-next-vertical:active {
  1021. background-position: 0 -64px;
  1022. }
  1023. .jcarousel-skin-tango .jcarousel-next-disabled-vertical,
  1024. .jcarousel-skin-tango .jcarousel-next-disabled-vertical:hover,
  1025. .jcarousel-skin-tango .jcarousel-next-disabled-vertical:focus,
  1026. .jcarousel-skin-tango .jcarousel-next-disabled-vertical:active {
  1027. cursor: default;
  1028. background-position: 0 -96px;
  1029. }
  1030. .jcarousel-skin-tango .jcarousel-prev-vertical {
  1031. position: absolute;
  1032. top: 5px;
  1033. left: 43px;
  1034. width: 32px;
  1035. height: 32px;
  1036. cursor: pointer;
  1037. background: transparent url(http://static.tumblr.com/xingagi/W8zlzgpu8/prev-vertical.png) no-repeat 0 0;
  1038. }
  1039. .jcarousel-skin-tango .jcarousel-prev-vertical:hover,
  1040. .jcarousel-skin-tango .jcarousel-prev-vertical:focus {
  1041. background-position: 0 -32px;
  1042. }
  1043. .jcarousel-skin-tango .jcarousel-prev-vertical:active {
  1044. background-position: 0 -64px;
  1045. }
  1046. .jcarousel-skin-tango .jcarousel-prev-disabled-vertical,
  1047. .jcarousel-skin-tango .jcarousel-prev-disabled-vertical:hover,
  1048. .jcarousel-skin-tango .jcarousel-prev-disabled-vertical:focus,
  1049. .jcarousel-skin-tango .jcarousel-prev-disabled-vertical:active {
  1050. cursor: default;
  1051. background-position: 0 -96px;
  1052. }
  1053. #widget_carousel{
  1054. min-width: 40000px;
  1055. }
  1056.  
  1057. /* Hide Show More on instagram */
  1058. #more{
  1059. display: none;
  1060. }
  1061. /* Hide menu dropdown for mobile */
  1062. .menu_mobile{
  1063. visibility: hidden;
  1064. }
  1065.  
  1066.  
  1067.  
  1068.  
  1069. /* ========== POSTS ========== */
  1070. #all-posts {
  1071. position: relative;
  1072. margin: 30px 0 30px 0;
  1073. padding: 0;
  1074. float: left;
  1075. }
  1076. .posts {
  1077. position: relative;
  1078. width: 320px;
  1079. height: 370px;
  1080. float: left;
  1081. }
  1082. .frame-post {
  1083. position: relative;
  1084. overflow: hidden;
  1085. float: left;
  1086. width: 280px;
  1087. height: 325px;
  1088. margin: 10px;
  1089. padding: 10px;
  1090. background: {color:Frame Post};
  1091. -webkit-border-radius: 7px;
  1092. -khtml-border-radius: 7px;
  1093. -moz-border-radius: 7px;
  1094. border-radius: 7px;
  1095. -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  1096. -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  1097. box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  1098. -webkit-transition: all 0.1s ease-in-out;
  1099. -moz-transition: all 0.1s ease-in-out;
  1100. -o-transition: all 0.1s ease-in-out;
  1101. -ms-transition: all 0.1s ease-in-out;
  1102. transition: all 0.1s ease-in-out;
  1103. }
  1104. .frame-post:hover {
  1105. width: 280px;
  1106. height: 360px;
  1107. }
  1108.  
  1109. .content-thumbnail {
  1110. position: relative;
  1111. width: 270px;
  1112. height: 270px;
  1113. margin: 5px;
  1114. overflow: hidden;
  1115. }
  1116. .content-thumbnail img {
  1117. width: 270px;
  1118. height: auto;
  1119. }
  1120. .content-thumbnail iframe {
  1121. width: 270px !important;
  1122. height: 270px !important;
  1123. }
  1124. span.ribbon-icon {
  1125. position: absolute;
  1126. top: 0px;
  1127. right: 0px;
  1128. z-index: 100;
  1129. width: 0px;
  1130. height: 35px;
  1131. border-width: 10px 20px;
  1132. border-style: solid;
  1133. border-color: {color:Post Ribbon} {color:Post Ribbon} transparent {color:Post Ribbon};
  1134. }
  1135. span.photo-icon {
  1136. position: absolute;
  1137. top: 8px;
  1138. right: 7px;
  1139. z-index: 110;
  1140. background: url('http://static.tumblr.com/xingagi/BOFlvzujn/icon-photo.png') no-repeat;
  1141. width: 26px;
  1142. height: 26px;
  1143. }
  1144. span.photoset-icon {
  1145. position: absolute;
  1146. top: 8px;
  1147. right: 7px;
  1148. z-index: 110;
  1149. background: url('http://static.tumblr.com/xingagi/Mjflvzukc/icon-photoset.png') no-repeat;
  1150. width: 26px;
  1151. height: 26px;
  1152. }
  1153. span.video-icon {
  1154. position: absolute;
  1155. top: 8px;
  1156. right: 7px;
  1157. z-index: 110;
  1158. background: url('http://static.tumblr.com/xingagi/Faylvzul2/icon-video.png') no-repeat;
  1159. width: 26px;
  1160. height: 26px;
  1161. }
  1162.  
  1163.  
  1164. .postmid-info {
  1165. width: 270px;
  1166. margin-left: 5px;
  1167. margin-right: 5px;
  1168. float: left;
  1169. }
  1170. span.date {
  1171. float: left;
  1172. margin-top: 20px;
  1173. font-size: 12px;
  1174. line-height: 12px;
  1175. color: #858585;
  1176. }
  1177. a.viewBtn {
  1178. float: right;
  1179. margin-top: 10px;
  1180. padding: 10px 15px 10px 15px;
  1181. font-size: 11px;
  1182. line-height: 12px;
  1183. color: #ffffff;
  1184. background: {color:Link};
  1185. -webkit-border-radius: 7px;
  1186. -khtml-border-radius: 7px;
  1187. -moz-border-radius: 7px;
  1188. border-radius: 7px;
  1189. opacity: 1;
  1190. }
  1191. a.viewBtn:hover {
  1192. opacity: 0.7;
  1193. }
  1194. .frame-hover {
  1195. position: absolute;
  1196. top: 0;
  1197. left: 0;
  1198. width: 320px;
  1199. height: 400px;
  1200. background: none;
  1201. -webkit-transition: all 0.1s ease-in-out;
  1202. -moz-transition: all 0.1s ease-in-out;
  1203. -o-transition: all 0.1s ease-in-out;
  1204. -ms-transition: all 0.1s ease-in-out;
  1205. transition: all 0.1s ease-in-out;
  1206. }
  1207. .frame-hover:hover {
  1208. background: url(http://static.tumblr.com/he6jwsj/PBwlvpig9/post-hoverbg.png) no-repeat;
  1209. -webkit-border-radius: 7px;
  1210. -khtml-border-radius: 7px;
  1211. -moz-border-radius: 7px;
  1212. border-radius: 7px;
  1213. -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  1214. -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  1215. box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  1216. }
  1217.  
  1218. .postbot-info {
  1219. width: 270px;
  1220. border-top: 1px dashed #a0a0a0;
  1221. margin-top: 15px;
  1222. margin-left: 5px;
  1223. margin-right: 5px;
  1224. padding-top: 7px;
  1225. float: left;
  1226. }
  1227. .postbot-info ul {
  1228. display: inline;
  1229. margin: 0;
  1230. }
  1231. .postbot-info ul li {
  1232. list-style: none;
  1233. line-height: 15px;
  1234. }
  1235. .postbot-info ul li a.like {
  1236. margin-right: 20px;
  1237. padding-left: 20px;
  1238. background: url(http://static.tumblr.com/he6jwsj/DYklvpigo/icon-like.png) no-repeat;
  1239. float: left;
  1240. }
  1241. .postbot-info ul li a.comments {
  1242. margin-right: 20px;
  1243. padding-left: 23px;
  1244. background: url(http://static.tumblr.com/he6jwsj/7uQlvpih2/icon-comment.png) no-repeat;
  1245. float: left;
  1246. }
  1247. .postbot-info ul li a.reblog {
  1248. width: 17px;
  1249. height: 16px;
  1250. margin-left: 10px;
  1251. background: url(http://static.tumblr.com/he6jwsj/r7Ulvpihg/icon-reblog.png) no-repeat;
  1252. float: right;
  1253. }
  1254. .postbot-info ul li a.postURL {
  1255. width: 19px;
  1256. height: 15px;
  1257. margin-left: 20px;
  1258. background: url(http://static.tumblr.com/he6jwsj/uD8lvpihs/icon-permalink.png) no-repeat;
  1259. float: right;
  1260. }
  1261.  
  1262.  
  1263.  
  1264. .content-posts {
  1265. position: relative;
  1266. float: left;
  1267. margin: 0 0 20px 0;
  1268. padding-bottom: 20px;
  1269. border-bottom: 1px dashed #a0a0a0;
  1270. }
  1271.  
  1272. .post-audio img{
  1273. width:270px;
  1274. }
  1275.  
  1276. .permalink-post-photo,
  1277. .permalink-post-video,
  1278. .permalink-post-audio {
  1279. margin-bottom: 15px;
  1280. overflow: hidden;
  1281. }
  1282. .permalink-post-photo img {
  1283. padding: 2px;
  1284. border: 8px solid #f2f3f4;
  1285. }
  1286.  
  1287.  
  1288. /* ---------- POST PHOTOSET ---------- */
  1289. .permalink-post-photoset {
  1290. padding: 10px;
  1291. border: 8px solid #f2f3f4;
  1292. margin-bottom: 15px;
  1293. }
  1294. .photoset-container {
  1295. margin: 0;
  1296. padding: 0;
  1297. }
  1298. .html_photoset,
  1299. .html_photoset iframe.photoset {
  1300. width: 100%;
  1301. margin: 0;
  1302. padding: 0;
  1303. }
  1304.  
  1305.  
  1306.  
  1307. /* ---------- POST VIDEO ---------- */
  1308. .content-posts .permalink-post-video embed,
  1309. .content-posts .permalink-post-video iframe {
  1310. margin: 0;
  1311. padding: 2px;
  1312. border: 8px solid #f2f3f4;
  1313. }
  1314.  
  1315.  
  1316.  
  1317. /* ---------- POST AUDIO ---------- */
  1318. .audioplayer {
  1319. position: absolute;
  1320. bottom: 0;
  1321. background: #000000;
  1322. width: 270px;
  1323. height: 25px;
  1324. padding: 5px;
  1325. }
  1326. .audio-player {
  1327. position: relative;
  1328. overflow: hidden;
  1329. float: left;
  1330. margin-right: 20px;
  1331. margin-bottom: 5px;
  1332. padding: 2px;
  1333. border: 8px solid #f2f3f4;
  1334. }
  1335. .album-art {
  1336. position: relative;
  1337. margin: 0;
  1338. padding: 0;
  1339. float: left;
  1340. }
  1341. .album-art img {
  1342. border: none;
  1343. }
  1344. .audio-data {
  1345. position: relative;
  1346. overflow: hidden;
  1347. float: left;
  1348. margin: 0;
  1349. color: #000000;
  1350. }
  1351. .player-box {
  1352. position: absolute;
  1353. bottom: 0px;
  1354. left: 0px;
  1355. height: auto;
  1356. padding: 4px 5px;
  1357. z-index: 10;
  1358. background: #000000;
  1359. -webkit-border-radius: 5px;
  1360. -khtml-border-radius: 5px;
  1361. -moz-border-radius: 5px;
  1362. border-radius: 5px;
  1363. }
  1364. h3.artist-name {
  1365. font-size: 20px;
  1366. font-weight: normal;
  1367. text-transform: uppercase;
  1368. margin-bottom: 10px;
  1369. }
  1370. h2.track-name {
  1371. font-size: 30px;
  1372. margin-bottom: 30px;
  1373. }
  1374. h4.album-title {
  1375. font-size: 16px;
  1376. margin-bottom: 20px;
  1377. }
  1378. p.play-count {
  1379. position: absolute;
  1380. top: 6px;
  1381. right: 6px;
  1382. font-size: 12px;
  1383. color: #585858;
  1384. padding: 3px 6px;
  1385. background: #f0f0f0;
  1386. -webkit-border-radius: 3px;
  1387. -khtml-border-radius: 3px;
  1388. -moz-border-radius: 3px;
  1389. border-radius: 3px;
  1390. }
  1391.  
  1392.  
  1393.  
  1394. /* ---------- POST TEXT ---------- */
  1395. .post-title {
  1396. color: {color:Post Title};
  1397. font-size: 30px;
  1398. line-height: 30px;
  1399. margin-bottom: 10px;
  1400. padding-bottom: 10px;
  1401. border-bottom: 1px dashed #a0a0a0;
  1402. }
  1403. .textpost p {
  1404. line-height: 18px;
  1405. text-align: justify;
  1406. margin-bottom: 10px;
  1407. }
  1408. .textpost ol, .textpost ul {
  1409. margin: 5px 0 5px 40px;
  1410. line-height: 20px;
  1411. }
  1412. .textpost blockquote {
  1413. margin: 5px 0 5px 25px;
  1414. padding-left: 15px;
  1415. line-height: 20px;
  1416. border-left: 2px solid #999;
  1417. font-style: italic;
  1418. font-size: 14px;
  1419. }
  1420. .permalink-post-text img {
  1421. height: auto;
  1422. padding: 2px;
  1423. border: 8px solid #f2f3f4;
  1424. }
  1425.  
  1426.  
  1427. /* ---------- POST LINK ---------- */
  1428. .linkpost {
  1429. background: url('http://static.tumblr.com/he6jwsj/4xXlvpiij/icon-link.png') no-repeat center top;
  1430. background-position-y: 10%;
  1431. float: left;
  1432. width: 270px;
  1433. height: 270px;
  1434. overflow: hidden;
  1435. }
  1436. .post-link-url {
  1437. width: 270px;
  1438. margin-top: 100px;
  1439. padding-bottom: 50px;
  1440. background: url('http://static.tumblr.com/he6jwsj/IG5lvpiiz/linkbottom.png') no-repeat left bottom;
  1441. }
  1442. .post-link-url p {
  1443. font-size: 24px;
  1444. line-height: 30px;
  1445. font-weight: normal;
  1446. text-align: center;
  1447. }
  1448. .post-link-url a p,
  1449. .linkpost-permalink a p {
  1450. font-size: 24px;
  1451. line-height: 30px;
  1452. font-weight: normal;
  1453. text-decoration: none;
  1454. color: #000000;
  1455. }
  1456. .post-link-url a p:hover,
  1457. .linkpost-permalink a p:hover {
  1458. text-decoration: underline;
  1459. }
  1460. .linkpost-permalink {
  1461. position: relative;
  1462. float: left;
  1463. background: #f2f3f4;
  1464. padding: 50px 30px 50px 50px;
  1465. margin-bottom: 15px;
  1466. -webkit-border-radius: 5px;
  1467. -khtml-border-radius: 5px;
  1468. -moz-border-radius: 5px;
  1469. border-radius: 5px;
  1470. }
  1471. .linkpost-permalink a {
  1472. float: left;
  1473. padding: 0;
  1474. margin-left: 70px;
  1475. text-align: left;
  1476. }
  1477. span.permalink-link-icon {
  1478. position: absolute;
  1479. top: 35px;
  1480. left: 40px;
  1481. width: 58px;
  1482. height: 58px;
  1483. background: url('http://static.tumblr.com/sa2opwr/2edlw1c5r/icon-link-pl.png') no-repeat left top;
  1484. }
  1485.  
  1486.  
  1487.  
  1488. /* ---------- POST ANSWER ---------- */
  1489. .answerpost {
  1490. float: left;
  1491. width: 270px;
  1492. height: 270px;
  1493. overflow: hidden;
  1494. background: {color:Post Answer};
  1495. -webkit-border-radius: 5px;
  1496. -khtml-border-radius: 5px;
  1497. -moz-border-radius: 5px;
  1498. border-radius: 5px;
  1499. }
  1500. p.post-question {
  1501. position: relative;
  1502. font-size: 18px;
  1503. line-height: 24px;
  1504. font-weight: normal;
  1505. text-align: left;
  1506. margin: 0px;
  1507. padding: 30px 20px 30px 20px;
  1508. color: #000000;
  1509. background: {color:Post Question};
  1510. -webkit-border-radius: 5px;
  1511. -khtml-border-radius: 5px;
  1512. -moz-border-radius: 5px;
  1513. border-radius: 5px;
  1514. }
  1515. .askerpoint {
  1516. position: absolute;
  1517. bottom: -10px;
  1518. left: 20px;
  1519. width: 0;
  1520. height: 0;
  1521. border-left: 10px solid transparent;
  1522. border-right: 10px solid transparent;
  1523. border-top: 10px solid #f0f0f0;
  1524. overflow: hidden; /* IE fix */
  1525. }
  1526. p.post-asker {
  1527. font-size: 12px;
  1528. line-height: 20px;
  1529. font-weight: normal;
  1530. margin: 0px;
  1531. padding: 20px 20px 10px 20px;
  1532. }
  1533. p.the-answer {
  1534. font-size: 12px;
  1535. line-height: 20px;
  1536. margin-top: 10px;
  1537. }
  1538. .answerpost-permalink {
  1539. overflow: hidden;
  1540. background: #dee2e6;
  1541. -webkit-border-radius: 5px;
  1542. -khtml-border-radius: 5px;
  1543. -moz-border-radius: 5px;
  1544. border-radius: 5px;
  1545. }
  1546.  
  1547.  
  1548.  
  1549.  
  1550. /* ---------- POST QUOTE ---------- */
  1551. .quotepost {
  1552. width: 270px;
  1553. height: 270px;
  1554. overflow: hidden;
  1555. }
  1556. p.quoteline {
  1557. background: url('http://static.tumblr.com/he6jwsj/Efflvpijj/icon-quotes.png') no-repeat;
  1558. background-position: 0 20px;
  1559. color: #000000;
  1560. font-size: 18px;
  1561. line-height: 24px;
  1562. font-style: italic;
  1563. font-weight: normal;
  1564. text-align: left;
  1565. height: auto;
  1566. overflow: hidden;
  1567. vertical-align: text-top;
  1568. padding-top: 40px;
  1569. padding-bottom: 0;
  1570. padding-left: 10px;
  1571. }
  1572. p.quotesource {
  1573. font-size: 12px;
  1574. line-height: 20px;
  1575. font-weight: normal;
  1576. text-align: right;
  1577. overflow: hidden;
  1578. margin-top: 10px;
  1579. }
  1580. .quotepost-permalink {
  1581. padding: 40px 40px 40px 40px;
  1582. background: #f2f3f4;
  1583. margin-bottom: 15px;
  1584. -webkit-border-radius: 5px;
  1585. -khtml-border-radius: 5px;
  1586. -moz-border-radius: 5px;
  1587. border-radius: 5px;
  1588. }
  1589.  
  1590.  
  1591.  
  1592. /* ---------- POST CHAT ---------- */
  1593. .chat-lines {
  1594. padding: 0;
  1595. font-size: 12px;
  1596. line-height: 20px;
  1597. text-align: left;
  1598. border-collapse: collapse;
  1599. margin-top: 10px;
  1600. margin-bottom: 10px;
  1601. }
  1602. .chat-lines tr {
  1603. padding-bottom: 10px;
  1604. border-bottom: 1px dashed #a0a0a0;
  1605. }
  1606. .chat-lines tr:last-child {
  1607. border-bottom: 0px;
  1608. }
  1609. .chat-lines td, .chat-lines th {
  1610. padding: 5px 5px;
  1611. }
  1612. .chat-lines th.label {
  1613. text-align: right;
  1614. vertical-align: text-top;
  1615. font-weight: bold;
  1616. padding-right: 0;
  1617. }
  1618. .chat-lines-permalink {
  1619. padding: 0;
  1620. font-size: 12px;
  1621. line-height: 20px;
  1622. text-align: left;
  1623. border-collapse: collapse;
  1624. margin-top: 15px;
  1625. margin-bottom: 10px;
  1626. }
  1627. .chat-lines-permalink td, .chat-lines-permalink th {
  1628. padding: 5px 7px;
  1629. }
  1630. .chat-lines-permalink th.label {
  1631. text-align: right;
  1632. vertical-align: text-top;
  1633. font-weight: bold;
  1634. padding-right: 0;
  1635. }
  1636. .chat-lines-permalink .odd {
  1637. background: #f2f3f4;
  1638. }
  1639. .chat-lines-permalink .user1 th,
  1640. .chat-lines-permalink .user1 td {
  1641. background: #f2f3f4;
  1642. }
  1643. .chat-lines-permalink .user2 th,
  1644. .chat-lines-permalink .user2 td {
  1645. background: none;
  1646. }
  1647.  
  1648.  
  1649.  
  1650. /* PAGINATION */
  1651. #pagination {
  1652. position: relative;
  1653. margin: 0 auto;
  1654. }
  1655.  
  1656. #pagination .prev,
  1657. #pagination .next {
  1658. width: 45px;
  1659. height: 45px;
  1660. float: right;
  1661. margin: 10px 10px 20px 10px;
  1662. }
  1663. #pagination .prev a.prev-btn {
  1664. background: url('http://static.tumblr.com/xingagi/w6Ulvzwi6/btn-prev.png') no-repeat left top;
  1665. width: 45px;
  1666. height: 45px;
  1667. float: left;
  1668. }
  1669. #pagination .prev a.prev-btn:hover {
  1670. background: url('http://static.tumblr.com/xingagi/w6Ulvzwi6/btn-prev.png') no-repeat left bottom;
  1671. }
  1672. #pagination .next a.next-btn {
  1673. background: url('http://static.tumblr.com/xingagi/F2alvzwgl/btn-next.png') no-repeat left top;
  1674. width: 45px;
  1675. height: 45px;
  1676. float: left;
  1677. }
  1678. #pagination .next a.next-btn:hover {
  1679. background: url('http://static.tumblr.com/xingagi/F2alvzwgl/btn-next.png') no-repeat left bottom;
  1680. }
  1681.  
  1682.  
  1683.  
  1684. #permalink-page-preview {
  1685. position: relative;
  1686. margin: 30px 0 30px 10px;
  1687. padding: 0;
  1688. float: left;
  1689. }
  1690. #permalink-posts {
  1691. position: relative;
  1692. float: left;
  1693. margin: 0;
  1694. z-index: 500;
  1695. }
  1696. #sidebar {
  1697. position: relative;
  1698. margin-top: 8px;
  1699. }
  1700. #sidebar .side-nav {
  1701. position: relative;
  1702. margin: 0 auto;
  1703. }
  1704. #sidebar .side-nav a.prev-nav {
  1705. position: relative;
  1706. margin: 0;
  1707. padding: 10px 30px 10px 35px;
  1708. font-size: 12px;
  1709. line-height: 20px;
  1710. color: #787878;
  1711. background-color: #cecece;
  1712. -webkit-border-radius: 5px 0 0 5px;
  1713. -khtml-border-radius: 5px 0 0 5px;
  1714. -moz-border-radius: 5px 0 0 5px;
  1715. border-radius: 5px 0 0 5px;
  1716. }
  1717. #sidebar .side-nav a.next-nav {
  1718. position: relative;
  1719. margin: 0;
  1720. padding: 10px 35px 10px 30px;
  1721. font-size: 12px;
  1722. line-height: 20px;
  1723. color: #787878;
  1724. background-color: #cecece;
  1725. -webkit-border-radius: 0 5px 5px 0;
  1726. -khtml-border-radius: 0 5px 5px 0;
  1727. -moz-border-radius: 0 5px 5px 0;
  1728. border-radius: 0 5px 5px 0;
  1729. }
  1730. #sidebar .side-nav a.home-nav {
  1731. position: relative;
  1732. margin: 0;
  1733. padding: 10px 30px 10px 30px;
  1734. font-size: 12px;
  1735. line-height: 20px;
  1736. color: #787878;
  1737. background-color: #cecece;
  1738. border-left: 1px solid #b4b4b4;
  1739. border-right: 1px solid #b4b4b4;
  1740. }
  1741. #sidebar .side-nav a.prev-nav:hover,
  1742. #sidebar .side-nav a.next-nav:hover,
  1743. #sidebar .side-nav a.home-nav:hover {
  1744. color: #cecece;
  1745. background-color: #9c9c9c;
  1746. }
  1747.  
  1748. #sidebar .side-nav a.prev-nav > span.previcon {
  1749. float: left;
  1750. position: absolute;
  1751. top: 10px;
  1752. left: 15px;
  1753. width: 8px;
  1754. height: 17px;
  1755. background-image: url('http://static.tumblr.com/xingagi/8aOlvzwm2/page-prev-arrow.png');
  1756. background-repeat: no-repeat;
  1757. background-position: top left;
  1758. }
  1759. #sidebar .side-nav a.prev-nav:hover > span.previcon {
  1760. background-position: bottom left;
  1761. }
  1762. #sidebar .side-nav a.next-nav > span.nexticon {
  1763. float: left;
  1764. position: absolute;
  1765. top: 10px;
  1766. right: 15px;
  1767. width: 8px;
  1768. height: 17px;
  1769. background-image: url('http://static.tumblr.com/xingagi/s12lvzwl2/page-next-arrow.png');
  1770. background-repeat: no-repeat;
  1771. background-position: top left;
  1772. }
  1773. #sidebar .side-nav a.next-nav:hover > span.nexticon {
  1774. background-position: bottom left;
  1775. }
  1776.  
  1777.  
  1778. #sidebar .side-list {
  1779. float: left;
  1780. margin-top: 20px;
  1781. }
  1782. #sidebar .side-list ul {
  1783. display: inline;
  1784. overflow: hidden;
  1785. margin-left: 10px;
  1786. }
  1787. #sidebar .side-list ul li {
  1788. list-style: none;
  1789. font-size: 12px;
  1790. line-height: 20px;
  1791. padding: 10px 0px 10px 0px;
  1792. border-bottom: 1px dashed #a0a0a0;
  1793. float: left;
  1794. }
  1795. #sidebar .side-list ul li a {
  1796. text-decoration: none;
  1797. color: #585858;
  1798. }
  1799. #sidebar .side-list ul li a:hover {
  1800. color: {color:Link};
  1801. }
  1802. #sidebar .side-list ul li span.list-date {
  1803. float: left;
  1804. width: 20px;
  1805. height: 20px;
  1806. margin-right: 10px;
  1807. background: url('http://static.tumblr.com/xingagi/aaClvzz81/side-icon-date.png') no-repeat center center;
  1808. }
  1809. #sidebar .side-list ul li span.list-notes {
  1810. float: left;
  1811. width: 20px;
  1812. height: 20px;
  1813. margin-right: 10px;
  1814. background: url('http://static.tumblr.com/xingagi/ZlDlvzz8u/side-icon-notes.png') no-repeat center center;
  1815. }
  1816. #sidebar .side-list ul li span.list-comment {
  1817. float: left;
  1818. width: 20px;
  1819. height: 20px;
  1820. margin-right: 10px;
  1821. background: url('http://static.tumblr.com/xingagi/aBrlvzz7f/side-icon-comment.png') no-repeat center center;
  1822. }
  1823. #sidebar .side-list ul li span.list-reblog {
  1824. float: left;
  1825. width: 20px;
  1826. height: 20px;
  1827. margin-right: 10px;
  1828. background: url('http://static.tumblr.com/xingagi/ECElvzza3/side-icon-reblog.png') no-repeat center center;
  1829. }
  1830. #sidebar .side-list ul li span.list-permalink {
  1831. float: left;
  1832. width: 20px;
  1833. height: 20px;
  1834. margin-right: 10px;
  1835. background: url('http://static.tumblr.com/xingagi/XpDlvzz9f/side-icon-permalink.png') no-repeat center center;
  1836. }
  1837. #sidebar .side-list ul li span.list-author {
  1838. float: left;
  1839. width: 20px;
  1840. height: 20px;
  1841. margin-right: 10px;
  1842. background: url('http://static.tumblr.com/xingagi/mPXlvzz6r/side-icon-author.png') no-repeat center center;
  1843. }
  1844. #sidebar .side-list ul li span.list-tag {
  1845. float: left;
  1846. width: 20px;
  1847. height: 20px;
  1848. margin-right: 10px;
  1849. background: url('http://static.tumblr.com/xingagi/2bJlvzzaq/side-icon-tag.png') no-repeat center center;
  1850. }
  1851.  
  1852. #sidebar .sharethis {
  1853. float: left;
  1854. width: 280px;
  1855. margin-top: 20px;
  1856. }
  1857. #sidebar .sharethis .shortURL {
  1858. width: 235px;
  1859. margin-top: 10px;
  1860. padding: 10px 20px 10px 20px;
  1861. line-height: 20px;
  1862. color: #585858;
  1863. background: #f4f4f4;
  1864. border: 1px solid #bdbdbd;
  1865. -webkit-border-radius: 3px;
  1866. -khtml-border-radius: 3px;
  1867. -moz-border-radius: 3px;
  1868. border-radius: 3px;
  1869. outline: none;
  1870. }
  1871. #sidebar .sharebutton {
  1872. float: right;
  1873. width: 300px;
  1874. margin-top: 20px;
  1875. }
  1876. #sidebar .sharebutton .twitter-share-button {
  1877. float: left;
  1878. width: 80px !important;
  1879. margin-right: 10px;
  1880. }
  1881. #sidebar .sharebutton iframe {
  1882. width: 80px !important;
  1883. }
  1884. #sidebar .sharebutton .fb-share {
  1885. margin-right: 10px;
  1886. position: relative;
  1887. top: -6px;
  1888.  
  1889.  
  1890. }
  1891.  
  1892.  
  1893.  
  1894.  
  1895. /* ---------- Disqus ---------- */
  1896. #disqus {
  1897. position: relative;
  1898. margin-bottom: 30px;
  1899. padding-bottom: 10px;
  1900. border-bottom: 1px dashed #a0a0a0;
  1901. float: left;
  1902. }
  1903. #disqus h3 {
  1904. font-size: 12px;
  1905. line-height: 20px;
  1906. color: #4e4e4e;
  1907. text-shadow : 1px 1px 1px #fff;
  1908. }
  1909.  
  1910.  
  1911.  
  1912. /* ---------- NOTES ---------- */
  1913. .notelists {
  1914. height: auto;
  1915. margin-top: 20px;
  1916. margin-bottom: 10px;
  1917. float: left;
  1918. }
  1919. p.noteslabel {
  1920. font-size: 20px;
  1921. line-height: 20px;
  1922. margin-bottom: 10px;
  1923. }
  1924. ol.notes {
  1925. padding: 0px;
  1926. margin: 25px 0px;
  1927. list-style-type: none;
  1928. border-bottom: 1px dashed #a0a0a0;
  1929. }
  1930. ol.notes a {
  1931. color: {color:Link};
  1932. }
  1933. ol.notes li.note {
  1934. border-top: 1px dashed #a0a0a0;
  1935. padding: 10px;
  1936. }
  1937.  
  1938. ol.notes li.note img.avatar {
  1939. vertical-align: -4px;
  1940. margin-right: 10px;
  1941. width: 16px;
  1942. height: 16px;
  1943. }
  1944.  
  1945. ol.notes li.note span.action {
  1946. font-weight: normal;
  1947. }
  1948.  
  1949. ol.notes li.note .answer_content {
  1950. font-weight: normal;
  1951. }
  1952.  
  1953. ol.notes li.note blockquote {
  1954. border-left: 2px solid #eee;
  1955. padding: 4px 10px;
  1956. margin: 10px 0px 0px 25px;
  1957. font-style: italic;
  1958. }
  1959.  
  1960. ol.notes li.note blockquote a {
  1961. text-decoration: none;
  1962. }
  1963.  
  1964.  
  1965. a img {border:none; /*ie7 bugfixed */}
  1966.  
  1967.  
  1968.  
  1969. /* ==================================================
  1970. Media Query for Responsive layout
  1971. ===================================================== */
  1972.  
  1973.  
  1974. /* ========== Desktop Layout ========== */
  1975. @media only screen and (min-width: 768px) {
  1976.  
  1977. #header, #content, #footer {width: 960px;}
  1978. #banner {width: 960px;}
  1979. #TitleLogo {max-width: 340px;}
  1980. #TitleLogo h1 a img {max-width: 340px;}
  1981. #top-icons {margin: 33px 10px 30px 10px;}
  1982. #top-menus-icons {display: block;}
  1983. #top-menus-dropdown {display: none;}
  1984. #top-sosmed {display: block;}
  1985. #bottom-sosmed {display:none;}
  1986. #profile {display: block;}
  1987. .flexslider {width: 680px;}
  1988. #widget-bar {width: 960px;}
  1989. #panel-button {width: 960px;}
  1990. #all-posts {width: 960px;}
  1991. #pagination {width: 960px;}
  1992.  
  1993. .content-posts {width: 620px;}
  1994. .permalink-post-photo,
  1995. .permalink-post-video,
  1996. .permalink-post-audio {
  1997. width: 620px;
  1998. }
  1999. .permalink-post-photo img {width: 600px;}
  2000. .permalink-post-text img {max-width: 600px;}
  2001. .permalink-post-photoset {width: 500px; margin-left: 40px;}
  2002. .photoset-container {width: 500px;}
  2003.  
  2004. .content-posts .permalink-post-video embed,
  2005. .content-posts .permalink-post-video iframe {
  2006. width: 600px;
  2007. }
  2008. .media-big {display: block;}
  2009. .media-small {display: none;}
  2010. .audio-player {width: 200px; height: 200px;}
  2011. .album-art {width: 200px; height: 200px;}
  2012. .album-art img {width: 200px; height: 200px;}
  2013. .audio-data {width: 380px; height: 220px;}
  2014. .player-box {width: 370px;}
  2015. .linkpost-permalink {width: 540px;}
  2016. .answerpost-permalink {width: 620px;}
  2017. .quotepost-permalink {width: 540px;}
  2018. .chat-lines-permalink {width: 620px;}
  2019.  
  2020. #permalink-page-preview {width: 960px;}
  2021. #permalink-posts {width: 620px;}
  2022.  
  2023. #sidebar {width: 300px; float: right;}
  2024. #sidebar .side-nav {width: 280px; float: left;}
  2025. #sidebar .side-list {width: 280px;}
  2026. #sidebar .side-list ul li {width: 280px;}
  2027.  
  2028. #disqus {width: 620px;}
  2029. .notelists {width: 620px;}
  2030.  
  2031. /* jcarousel css style */
  2032. .jcarousel-skin-tango .jcarousel-container-horizontal{width: 920px;margin-left: 0px;}
  2033. .jcarousel-skin-tango .jcarousel-clip-horizontal{width: 920px;margin-left: 10px;}
  2034. .jcarousel-skin-tango .jcarousel-prev-horizontal{left: 0px;}
  2035.  
  2036. .widget-about .jcarousel-item{
  2037. display: none;
  2038. }
  2039. }
  2040.  
  2041.  
  2042.  
  2043. /* ========== Tablet Layout ========== */
  2044. @media only screen and (min-width: 480px) and (max-width: 768px) {
  2045.  
  2046. #header, #content, #footer {width: 640px;}
  2047. #banner {width: 640px;}
  2048. #TitleLogo {max-width: 300px;}
  2049. #TitleLogo h1 a img {max-width: 300px;}
  2050. #top-icons {margin: 33px 10px 30px 10px;}
  2051. #top-menus-icons {display: block;}
  2052. #top-menus-dropdown {display: none;}
  2053. #top-sosmed {display: none;}
  2054. #bottom-sosmed {display:block;}
  2055. #profile {display: none;}
  2056. .flexslider {width: 600px;}
  2057. #widget-bar {width: 640px;}
  2058. #panel-button {width: 620px;}
  2059. #all-posts {width: 640px;}
  2060. #pagination {width: 640px;}
  2061.  
  2062. .content-posts {width: 620px;}
  2063. .permalink-post-photo,
  2064. .permalink-post-video,
  2065. .permalink-post-audio {
  2066. width: 620px;
  2067. }
  2068. .permalink-post-photo img {width: 600px;}
  2069. .permalink-post-text img {max-width: 600px;}
  2070. .permalink-post-photoset {width: 500px; margin-left: 40px;}
  2071. .photoset-container {width: 500px;}
  2072.  
  2073. .content-posts .permalink-post-video embed,
  2074. .content-posts .permalink-post-video iframe {
  2075. width: 600px;
  2076. }
  2077. .media-big {display: block;}
  2078. .media-small {display: none;}
  2079. .audio-player {width: 200px; height: 200px;}
  2080. .album-art {width: 200px; height: 200px;}
  2081. .album-art img {width: 200px; height: 200px;}
  2082. .audio-data {width: 380px; height: 220px;}
  2083. .player-box {width: 370px;}
  2084. .linkpost-permalink {width: 540px;}
  2085. .answerpost-permalink {width: 620px;}
  2086. .quotepost-permalink {width: 540px;}
  2087. .chat-lines-permalink {width: 620px;}
  2088.  
  2089. #permalink-page-preview {width: 640px;}
  2090. #permalink-posts {width: 620px;}
  2091.  
  2092. #sidebar {width: 620px; float: left;}
  2093. #sidebar .side-nav {width: 280px;}
  2094. #sidebar .side-list {width: 620px;}
  2095. #sidebar .side-list ul li {width: 620px;}
  2096.  
  2097. #disqus {width: 620px;}
  2098. .notelists {width: 620px;}
  2099.  
  2100.  
  2101. /* jcarousel css style */
  2102. .jcarousel-skin-tango .jcarousel-container-horizontal{width: 520px;margin-left: 40px;}
  2103. .jcarousel-skin-tango .jcarousel-clip-horizontal{width: 460px;margin-left: 30px;}
  2104.  
  2105. }
  2106.  
  2107.  
  2108.  
  2109. /* ========== Mobile Layout ========== */
  2110. @media only screen and (max-width: 480px) {
  2111.  
  2112. #header, #content, #footer {width: 320px;}
  2113. #banner {width: 320px;}
  2114. #TitleLogo {max-width: 300px;}
  2115. #TitleLogo h1 {text-align:center;}
  2116. #TitleLogo h1 a img {max-width: 220px;}
  2117. #top-icons {margin: 0 20px 20px 0;}
  2118. #top-menus-icons {display: block;}
  2119. #top-menus-dropdown {display: none;}
  2120. #top-sosmed {display: none;}
  2121. #bottom-sosmed {display:block;}
  2122. #profile {display: none;}
  2123. .flexslider {width: 280px;}
  2124. #widget-bar {width: 280px; margin-left:20px;}
  2125. #panel-button {width: 300px;}
  2126. #all-posts {width: 320px;}
  2127. #pagination {width: 140px;}
  2128.  
  2129. .content-posts {width: 300px;}
  2130. .permalink-post-photo,
  2131. .permalink-post-video,
  2132. .permalink-post-audio {
  2133. width: 300px;
  2134. }
  2135. .permalink-post-photo img {width: 280px;}
  2136. .permalink-post-text img {max-width: 280px;}
  2137. .permalink-post-photoset {width: 250px; margin-left: 5px;}
  2138. .photoset-container {width: 250px;}
  2139.  
  2140. .content-posts .permalink-post-video embed,
  2141. .content-posts .permalink-post-video iframe {
  2142. width: 280px;
  2143. height: auto;
  2144. }
  2145. .media-big {display: none;}
  2146. .media-small {display: block;}
  2147. .audio-player {width: 280px; height: 280px;}
  2148. .album-art {width: 280px; height: 280px;}
  2149. .album-art img {width: 280px; height: 280px;}
  2150. .audio-data {width: 300px; height: 200px;}
  2151. .player-box {width: 280px;}
  2152. .player-box span.player {width: 160px; overflow:hidden;}
  2153. .linkpost-permalink {width: 200px;}
  2154. .answerpost-permalink {width: 300px;}
  2155. .quotepost-permalink {width: 220px;}
  2156. .chat-lines-permalink {width: 300px;}
  2157.  
  2158. #permalink-page-preview {width: 320px;}
  2159. #permalink-posts {width: 300px;}
  2160.  
  2161. #sidebar {width: 300px; float: left;}
  2162. #sidebar .side-nav {width: 280px;}
  2163. #sidebar .side-list {width: 300px;}
  2164. #sidebar .side-list ul li {width: 300px;}
  2165.  
  2166. #disqus {width: 300px;}
  2167. .notelists {width: 300px;}
  2168.  
  2169. /* jcarousel css style */
  2170. .jcarousel-skin-tango .jcarousel-container-horizontal{width: 220px;margin-left: 10px;}
  2171. .jcarousel-skin-tango .jcarousel-clip-horizontal{width: 220px; ;margin-left: 0px;}
  2172.  
  2173. }
  2174.  
  2175.  
  2176.  
  2177.  
  2178. {CustomCSS}
  2179.  
  2180. </style>
  2181.  
  2182. <!-- General Javascript ( jQuery and other plugins ) -->
  2183.  
  2184. <script type="text/javascript" src="http://static.tumblr.com/he6jwsj/WE7lvpi4l/jquery-1.6.min.js"></script>
  2185. <script type="text/javascript" src="http://static.tumblr.com/he6jwsj/Z3vlvpi4z/easing.js"></script>
  2186. <script type="text/javascript" src="http://static.tumblr.com/xingagi/KF2lzgpiw/jquery.jcarousel.min.js"></script>
  2187. <script type="text/javascript" src="http://static.tumblr.com/xingagi/pQplzhjun/jribbble.js"></script>
  2188. <script type="text/javascript" src="http://static.tumblr.com/5v7b2gn/I0Plzqdne/jquery.instagram.js"></script>
  2189. <script type="text/javascript" src="http://static.tumblr.com/xingagi/JR5lzb9jl/jquery.flexslider-min.js"></script>
  2190.  
  2191. </head>
  2192. <body>
  2193.  
  2194. <div id="container">
  2195.  
  2196. <div id="header-wrapper">
  2197.  
  2198. <div id="header">
  2199. <div id="TitleLogo">
  2200. <h1>
  2201. <a href="/" title="{Title}">
  2202. {block:IfLogoImage}<img src="{image:Logo}" alt="{Title}" />{/block:IfLogoImage}
  2203. {block:IfNotLogoImage}{Title}{/block:IfNotLogoImage}
  2204. </a>
  2205. </h1>
  2206. </div>
  2207.  
  2208. <div id="top-icons">
  2209. <div id="top-sosmed">
  2210. <ul>
  2211. {block:ifTwitterAccount}
  2212. <li><a href="http://twitter.com/{text:Twitter Account}" class="twitter"> {text:Twitter Account} </a></li>
  2213. {/block:ifTwitterAccount}
  2214.  
  2215. {block:ifFacebookAccount}
  2216. <li><a href="http://facebook.com/{text:Facebook Account}" class="facebook"> {text:Facebook Account} </a></li>
  2217. {/block:ifFacebookAccount}
  2218.  
  2219. {block:ifGplusAccount}
  2220. <li><a href="http://gplus.to/{text:Gplus Account}" class="gplus"> {text:Gplus Account} </a></li>
  2221. {/block:ifGplusAccount}
  2222.  
  2223. {block:ifPinterestAccount}
  2224. <li><a href="http://pinterest.com/{text:Pinterest Account}" class="pinterest"> {text:Pinterest Account} </a></li>
  2225. {/block:ifPinterestAccount}
  2226.  
  2227. {block:ifDribbbleAccount}
  2228. <li><a href="http://dribbble.com/{text:Dribbble Account}" class="dribbble"> {text:Dribbble Account} </a></li>
  2229. {/block:ifDribbbleAccount}
  2230.  
  2231. {block:ifFlickrAccount}
  2232. <li><a href="http://www.flickr.com/photos/{text:Pinterest Account}" class="flickr"> {text:Flickr Account} </a></li>
  2233. {/block:ifFlickrAccount}
  2234. </ul>
  2235. </div>
  2236.  
  2237.  
  2238. <div id="top-menus">
  2239. <ul id="top-menus-icons">
  2240. <li class="menu"><a href="javascript:void(0)" class="search click-off" title="Search"> </a>
  2241. <div id="search">
  2242. <form method="get" action="/search">
  2243. <input class="searchText" type="text" name="q" placeholder="{SearchQuery}" />
  2244. <input class="searchBtn" type="submit" name="go" value="GO" />
  2245. </form>
  2246. </div>
  2247. </li>
  2248. {block:SubmissionsEnabled}
  2249. <li class="menu"><a href="/submit" class="submission" title="Submission"> </a></li>
  2250. {/block:SubmissionsEnabled}
  2251. {block:AskEnabled}
  2252. <li class="menu"><a href="/ask" class="ask" title="Ask Something"> </a></li>
  2253. {/block:AskEnabled}
  2254. <li class="menu"><a href="{RSS}" class="rss" title="Subscribe"> </a></li>
  2255. {block:HasPages}
  2256. <li class="menu"><a href="javascript:void(0)" class="pages dropdown" title="Pages"> </a>
  2257. <div class="pages-menu">
  2258. <span class="pointer-sub"></span>
  2259. <ul>
  2260. {block:Pages}
  2261. <li class="submenu"><a href="{URL}"> {Label} </a></li>
  2262. {/block:Pages}
  2263. </ul>
  2264. </div>
  2265. </li>
  2266. {/block:HasPages}
  2267. <li class="menu"><a href="/archive" class="archive" title="Archive"> </a></li>
  2268. <li class="menu"><a href="/" class="home" title="Home"> </a></li>
  2269. </ul>
  2270.  
  2271. <ul id="top-menus-dropdown">
  2272. <li class="menu_mobile"><a href="javascript:void(0)" class="pages_mobile dropdown_mobile" title="Pages"> </a>
  2273. <div class="pages-menu-mobile">
  2274. <span class="pointer-sub"></span>
  2275. <ul>
  2276. <li class="submenu"><a href="/">HOME</a></li>
  2277. <li class="submenu"><a href="/archive"> </a></li>
  2278. {block:AskEnabled}<li class="submenu"><a href="/ask">ASK ME</a></li>{/block:AskEnabled}
  2279. <li class="submenu"><a href="{RSS}"> SUBSCRIBE </a></li>
  2280. {block:SubmissionsEnabled}<li class="submenu"><a href="/submit">SUBMIT</a></li>{/block:SubmissionsEnabled}
  2281. {block:HasPages}
  2282. {block:Pages}
  2283. <li class="submenu"><a href="{URL}"> {Label} </a></li>
  2284. {/block:Pages}
  2285. {/block:HasPages}
  2286. </ul>
  2287. </div>
  2288. </li>
  2289. <li class="menu_mobile"><a href="javascript:void(0)" class="pages_info dropdown_info" title="About"> </a>
  2290. <div class="pages-menu-info">
  2291. <span class="pointer-sub"></span>
  2292. <p>{Description}</p>
  2293. </div>
  2294. </li>
  2295. </ul>
  2296. </div>
  2297. </div>
  2298.  
  2299. </div> <!-- end #header -->
  2300.  
  2301. </div> <!-- end #header-wrapper -->
  2302.  
  2303.  
  2304.  
  2305. <div id="banner-wrapper">
  2306.  
  2307. <div id="banner">
  2308. <div id="profile">
  2309. <div id="photo-portrait">
  2310. {block:ifProfilePictureImage}
  2311. <a href="/"><img src="{image:Profile Picture}" alt="" /></a>
  2312. {/block:ifProfilePictureImage}
  2313. </div>
  2314. <span class="button_info">
  2315. <a href="#">
  2316. <img src="http://static.tumblr.com/he6jwsj/U9Xlvpo1e/icon-info.png" alt="" />
  2317. </a>
  2318. </span>
  2319. <div class="bio-desc">
  2320. <p>
  2321. {Description}
  2322. </p>
  2323. </div>
  2324. </div> <!-- end #profile -->
  2325.  
  2326.  
  2327. <!-- IMAGE SLIDER -->
  2328. <div class="flexslider">
  2329. <ul class="slides">
  2330. <!-- Image Slider 1 -->
  2331. {block:ifImageSlider1Image}
  2332. <li>
  2333. <a href="{block:ifLinkSlider1}{text:Link Slider 1}{/block:ifLinkSlider1}" target="_blank">
  2334. <img src="{image:Image Slider 1}" alt="" />
  2335. </a>
  2336. </li>
  2337. {/block:ifImageSlider1Image}
  2338.  
  2339. <!-- Image Slider 2 -->
  2340. {block:ifImageSlider2Image}
  2341. <li>
  2342. <a href="{block:ifLinkSlider2}{text:Link Slider 2}{/block:ifLinkSlider2}" target="_blank">
  2343. <img src="{image:Image Slider 2}" alt="" />
  2344. </a>
  2345. </li>
  2346. {/block:ifImageSlider2Image}
  2347.  
  2348. <!-- Image Slider 3 -->
  2349. {block:ifImageSlider3Image}
  2350. <li>
  2351. <a href="{block:ifLinkSlider3}{text:Link Slider 3}{/block:ifLinkSlider3}" target="_blank">
  2352. <img src="{image:Image Slider 3}" alt="" />
  2353. </a>
  2354. </li>
  2355. {/block:ifImageSlider3Image}
  2356.  
  2357. <!-- Image Slider 4 -->
  2358. {block:ifImageSlider4Image}
  2359. <li>
  2360. <a href="{block:ifLinkSlider4}{text:Link Slider 4}{/block:ifLinkSlider4}" target="_blank">
  2361. <img src="{image:Image Slider 4}" alt="" />
  2362. </a>
  2363. </li>
  2364. {/block:ifImageSlider4Image}
  2365.  
  2366. <!-- Image Slider 5 -->
  2367. {block:ifImageSlider5Image}
  2368. <li>
  2369. <a href="{block:ifLinkSlider5}{text:Link Slider 5}{/block:ifLinkSlider5}" target="_blank">
  2370. <img src="{image:Image Slider 5}" alt="" />
  2371. </a>
  2372. </li>
  2373. {/block:ifImageSlider5Image}
  2374. </ul>
  2375. </div>
  2376.  
  2377.  
  2378. <!-- WIDGETS -->
  2379. <div id="widget-bar">
  2380.  
  2381. <ul id="widget_carousel" class="jcarousel-skin-tango">
  2382.  
  2383. {block:ifEnabledAboutWidget}
  2384. <li class="widget-about">
  2385. <div class="widgets widget-text">
  2386. <h3 class="widget-title">ABOUT</h3>
  2387. <span class="widget-divider"></span>
  2388.  
  2389. <div class="widget_content">
  2390. <span class="widtext">{Description}</span>
  2391. </div>
  2392. </div>
  2393. </li>
  2394. {/block:ifEnabledAboutWidget}
  2395.  
  2396. {block:IfEnabledFlickrWidget}
  2397. <li>
  2398. <div class="widgets flickr_widget">
  2399. <h3 class="widget-title">PHOTOSTREAM</h3>
  2400. <span class="widget-divider"></span>
  2401.  
  2402. <div class="widget_content">
  2403. <div id="photos">
  2404. <script type="text/javascript">
  2405. jQuery(function() {
  2406. var apiKey = 'bced12293bbe0ab3204b70f337cad8d1' ;
  2407. var userId ='{text:Flickr Account}';
  2408.  
  2409. var perPage = '9';
  2410. var showOnPage = '6';
  2411.  
  2412. jQuery.getJSON('http://api.flickr.com/services/rest/?format=json&method='+
  2413. 'flickr.photos.search&api_key=' + apiKey + '&user_id=' + userId +
  2414. '&per_page=' + perPage + '&jsoncallback=?',
  2415. function(data){
  2416. var classShown = 'class="lightbox"';
  2417. var classHidden = 'class="lightbox hidden"';
  2418.  
  2419. jQuery.each(data.photos.photo, function(i, rPhoto){
  2420. var basePhotoURL = 'http://farm' + rPhoto.farm + '.static.flickr.com/'
  2421. + rPhoto.server + '/' + rPhoto.id + '_' + rPhoto.secret;
  2422.  
  2423. var thumbPhotoURL = basePhotoURL + '_s.jpg';
  2424. var mediumPhotoURL = basePhotoURL + '.jpg';
  2425.  
  2426. var photoStringStart = '<a ';
  2427. var photoStringEnd = 'title="' + rPhoto.title + '" href="'+
  2428. mediumPhotoURL +'"><img src="' + thumbPhotoURL + '" alt="' +
  2429. rPhoto.title + '"/></a>;'
  2430. var photoString = (i < showOnPage) ?
  2431. photoStringStart + classShown + photoStringEnd :
  2432. photoStringStart + classHidden + photoStringEnd;
  2433.  
  2434. jQuery(photoString).appendTo("#photos");
  2435.  
  2436.  
  2437. });
  2438.  
  2439.  
  2440. });
  2441. });
  2442. </script>
  2443. </div> <!-- end of .photos -->
  2444.  
  2445. <!-- Hidden this show more photos -->
  2446. <!-- <div class="show_photo"><a href="http://flickr.com/photos/{text:Flickr Account}" target="_blank">Show More Photos</a></div> -->
  2447.  
  2448. </div>
  2449.  
  2450.  
  2451. </div>
  2452. </li>
  2453. {/block:IfEnabledFlickrWidget}
  2454.  
  2455. {block:IfEnabledDribbbleWidget}
  2456. {block:ifDribbbleAccount}
  2457. <li>
  2458. <div class="widgets dribbble-shot">
  2459. <h3 class="widget-title">DRIBBBLE SHOOT</h3>
  2460. <span class="widget-divider"></span>
  2461.  
  2462. <div class="widget_content">
  2463. <ul id="dribbble-widget">
  2464.  
  2465. </ul>
  2466. </div>
  2467. </div>
  2468. </li>
  2469. {/block:ifDribbbleAccount}
  2470. {/block:IfEnabledDribbbleWidget}
  2471.  
  2472. {block:ifEnabledInstagramWidget}
  2473. {block:ifInstagramAccount}
  2474. <li>
  2475. <div class="widgets instagram-photo">
  2476. <h3 class="widget-title">INSTAGRAM</h3>
  2477. <span class="widget-divider"></span>
  2478.  
  2479. <div class="widget_content">
  2480. <div id="instagram-widget">
  2481. </div>
  2482. </div>
  2483. </div>
  2484. </li>
  2485. {/block:ifInstagramAccount}
  2486. {/block:ifEnabledInstagramWidget}
  2487.  
  2488. {block:ifEnabledTwitterWidget}
  2489. {block:Twitter}
  2490. <li>
  2491. <div class="widgets tweetroll">
  2492. <h3 class="widget-title">LATEST TWEET</h3>
  2493.  
  2494. <div class="widget-content">
  2495. <div class="stream">
  2496. <script type="text/javascript">
  2497.  
  2498. function recent_tweets(data) {
  2499. var time_ago = '';
  2500. var tweet = '';
  2501. document.getElementById("twitter_widget").innerHTML = "";
  2502. for (i=0; i<3; i++) {
  2503.  
  2504. time_ago = ago(data[i].created_at);
  2505. // process links and reply
  2506. var tweet = data[i].text.replace(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig, function(url) {
  2507. return '<a href="'+url+'">'+url+'</a>';
  2508. }).replace(/(^|[\W])@(\w+)/ig, function(reply) {
  2509. return "<a href='http://twitter.com/" +reply.substring(1)+ "'>" +reply.charAt(0)+reply.substring(1) + "</a>";
  2510. });
  2511.  
  2512. document.getElementById("twitter_widget").innerHTML =
  2513. document.getElementById("twitter_widget").innerHTML +
  2514. "<li><p>" + tweet + "</p><a href=http://twitter.com/#!/{TwitterUsername}/status/"
  2515. + (data[i].id_str ? data[i].id_str : data[i].id) +" class='tweet-time'>"
  2516. + time_ago +"</a></li>" ;
  2517. }
  2518. }
  2519. function ago(a) {
  2520. var b = new Date();
  2521. var c = new Date(a);
  2522.  
  2523. var d = b - c;
  2524. var e = 1000,
  2525. minute = e * 60,
  2526. hour = minute * 60,
  2527. day = hour * 24,
  2528. week = day * 7;
  2529. if (isNaN(d) || d < 0) {
  2530. return "";
  2531. }
  2532. if (d < e * 7) {
  2533. return "right now";
  2534. }
  2535. if (d < minute) {
  2536. return Math.floor(d / e) + " seconds ago";
  2537. }
  2538. if (d < minute * 2) {
  2539. return "about 1 minute ago";
  2540. }
  2541. if (d < hour) {
  2542. return Math.floor(d / minute) + " minutes ago";
  2543. }
  2544. if (d < hour * 2) {
  2545. return "about 1 hour ago";
  2546. }
  2547. if (d < day) {
  2548. return Math.floor(d / hour) + " hours ago";
  2549. }
  2550. if (d > day && d < day * 2) {
  2551. return "yesterday";
  2552. }
  2553. if (d < day * 365) {
  2554. return Math.floor(d / day) + " days ago";
  2555. } else {
  2556. return "over a year ago";
  2557. }
  2558. }
  2559. </script>
  2560.  
  2561. <ul id="twitter_widget">
  2562. </ul>
  2563. </div>
  2564. </div>
  2565. <script type="text/javascript" src="/tweets.js"></script>
  2566. </div>
  2567. </li>
  2568. {/block:Twitter}
  2569. {/block:ifEnabledTwitterWidget}
  2570.  
  2571. {block:IfEnabledFacebookWidget}
  2572. {block:ifFacebookAccount}
  2573. <li>
  2574. <div class="widgets facebook-like">
  2575. <h3 class="widget-title">FACEBOOK</h3>
  2576. <div class="widget-content">
  2577. <div class="facebook_like">
  2578.  
  2579. <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like-box href="http://www.facebook.com/{text:Facebook Account}" width="200" show_faces="true" border_color="{color:Header}" stream="false" header="false"></fb:like-box>
  2580. </div>
  2581. </div>
  2582. </div>
  2583. </li>
  2584. {/block:ifFacebookAccount}
  2585. {/block:IfEnabledFacebookWidget}
  2586.  
  2587. {block:ifEnabledLikesWidget}
  2588. <li>
  2589. <div class="widgets liked">
  2590. <h3 class="widget-title">LATEST POST I LIKE</h3>
  2591.  
  2592. <div class="widget-content">
  2593. <ul id="likes">
  2594. {block:Likes}
  2595. <li class="like_post like_photo_post">
  2596. {Likes limit="1" summarize="100" width="200"}
  2597. </li>
  2598. {/block:Likes}
  2599. </li>
  2600. </ul>
  2601. </div>
  2602. <div class="more_stuff">
  2603. <a href="http://www.tumblr.com/liked/by/{Name}"> View More </a>
  2604. </div>
  2605. </div>
  2606. </li>
  2607. {/block:ifEnabledLikesWidget}
  2608.  
  2609. {block:IfEnabledFollowingWidget}
  2610. {block:Following}
  2611. <li>
  2612. <div class="widgets following">
  2613. <h3 class="widget-title">FOLLOWING</h3>
  2614.  
  2615. <div class="widget-content">
  2616. <div class="following">
  2617. <ul>
  2618. {block:Followed}
  2619. <li><a href="{FollowedURL}"><img src="{FollowedPortraitURL-48}" alt="" /></a></li>
  2620. {/block:Followed}
  2621. </ul>
  2622. </div>
  2623. </div>
  2624. <div class="more_stuff">
  2625. <a href="javascript:void(0)" class="show_followed"> Show all following </a>
  2626. </div>
  2627. </div>
  2628. </li>
  2629. {/block:Following}
  2630. {block:IfEnabledFollowingWidget}
  2631.  
  2632. {block:IfEnabledTagCloudWidget}
  2633. <li>
  2634. <div class="widgets tagcloud">
  2635. <h3 class="widget-title">TAG CLOUDS</h3>
  2636. <span class="widget-divider"></span>
  2637.  
  2638. <div class="widget_content">
  2639. <div id="taglist">
  2640. <script type="text/javascript" src="http://static.tumblr.com/xingagi/9sRlz3zyx/tag-cloud.js?minsize=50&amp;maxsize=100&amp;order=alphabetical"></script>
  2641. </div>
  2642. </div>
  2643. </div>
  2644. </li>
  2645. {/block:IfEnabledTagCloudWidget}
  2646. </ul>
  2647. </div> <!-- end #widget-bar -->
  2648.  
  2649. </div> <!-- end #banner -->
  2650. </div> <!-- end #banner-wrapper -->
  2651.  
  2652.  
  2653. <div id="panel-wrapper">
  2654. <div id="panel-button">
  2655. <span>
  2656. <a href="javascript:void(0)" class="panelbar down">
  2657. <img src="http://static.tumblr.com/he6jwsj/jAylvpq5x/triangle-down.png" />
  2658. </a>
  2659. </span>
  2660. </div>
  2661. </div>
  2662.  
  2663.  
  2664. <div id="content-wrapper">
  2665. <div id="content">
  2666.  
  2667. {block:NoSearchResults}
  2668. <div style="width:940px; margin-top:30px; margin-left:10px;">
  2669. <h2 class="post-title">
  2670. {lang:Sorry no posts found}
  2671. </h2>
  2672. <p>
  2673. {lang:No search results for SearchQuery 2}
  2674. </p>
  2675. <p>
  2676. You can try from <a href="/tagged/{SearchQuery}">tagged</a> or <a href="/archive">Archive</a>
  2677. </p>
  2678.  
  2679. </div>
  2680. {/block:NoSearchResults}
  2681.  
  2682. <!-- ===== INDEX PAGE ===== -->
  2683.  
  2684. <!-- =====BEGIN POSTS===== -->
  2685.  
  2686. <div id="all-posts">
  2687. {block:Posts}
  2688.  
  2689. {block:IndexPage}
  2690.  
  2691. <!-- PHOTO POST -->
  2692. {block:Photo}
  2693. <div class="post-photo posts">
  2694. <div class="frame-hover">
  2695. <div class="frame-post">
  2696. <div class="content-thumbnail">
  2697. <span class="ribbon-icon"></span>
  2698. <span class="photo-icon"></span>
  2699. <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" />
  2700. </div>
  2701.  
  2702. <div class="postmid-info">
  2703. <span class="date">{block:Date} {Month} {DayOfMonth}, {Year} {/block:Date}</span>
  2704. <a href="{Permalink}" class="viewBtn">VIEW POST</a>
  2705. </div>
  2706.  
  2707. <div class="postbot-info">
  2708. <ul>
  2709. {block:NoteCount}<li><a href="{Permalink}#notes" class="like"> {NoteCount} </a></li>{/block:NoteCount}
  2710. {block:IfDisqusShortname}
  2711. <li><a href="{Permalink}#disqus_thread" class="comments">{lang:Comments}</a></li>
  2712. {/block:IfDisqusShortname}
  2713. <li><a href="http://tmv.proto.jp/reblog.php?post_url={Permalink};" class="reblog"></a></li>
  2714. <li><a href="{Permalink}" class="postURL"></a></li>
  2715. </ul>
  2716. </div>
  2717. </div>
  2718. </div>
  2719. </div>
  2720. {/block:Photo}
  2721.  
  2722.  
  2723.  
  2724. <!-- VIDEO POST -->
  2725. {block:Video}
  2726. <div class="post-video posts">
  2727. <div class="frame-hover">
  2728. <div class="frame-post">
  2729. <div class="content-thumbnail">
  2730. <span class="ribbon-icon"></span>
  2731. <span class="video-icon"></span>
  2732. {Video-400}
  2733. </div>
  2734.  
  2735. <div class="postmid-info">
  2736. <span class="date">{block:Date} {Month} {DayOfMonth}, {Year} {/block:Date}</span>
  2737. <a href="{Permalink}" class="viewBtn">VIEW POST</a>
  2738. </div>
  2739.  
  2740. <div class="postbot-info">
  2741. <ul>
  2742. {block:NoteCount}<li><a href="{Permalink}#notes" class="like"> {NoteCount} </a></li>{/block:NoteCount}
  2743. {block:IfDisqusShortname}
  2744. <li><a href="{Permalink}#disqus_thread" class="comments">{lang:Comments}</a></li>
  2745. {/block:IfDisqusShortname}
  2746. <li><a href="http://tmv.proto.jp/reblog.php?post_url={Permalink};" class="reblog"></a></li>
  2747. <li><a href="{Permalink}" class="postURL"></a></li>
  2748. </ul>
  2749. </div>
  2750. </div>
  2751. </div>
  2752. </div>
  2753. {/block:Video}
  2754.  
  2755.  
  2756. <!-- AUDIO POST -->
  2757. {block:Audio}
  2758. <div class="post-audio posts">
  2759. <div class="frame-hover">
  2760. <div class="frame-post">
  2761. <div class="content-thumbnail">
  2762. {block:AlbumArt}<img src="{AlbumArtUrl}" alt="" width="270" />{/block:AlbumArt}
  2763. <div class="audioplayer"> {AudioPlayerBlack}</div>
  2764. </div>
  2765.  
  2766. <div class="postmid-info">
  2767. <span class="date">{block:Date} {Month} {DayOfMonth}, {Year} {/block:Date}</span>
  2768. <a href="{Permalink}" class="viewBtn">VIEW POST</a>
  2769. </div>
  2770.  
  2771. <div class="postbot-info">
  2772. <ul>
  2773. {block:NoteCount}<li><a href="{Permalink}#notes" class="like"> {NoteCount} </a></li>{/block:NoteCount}
  2774. {block:IfDisqusShortname}
  2775. <li><a href="{Permalink}#disqus_thread" class="comments">{lang:Comments}</a></li>
  2776. {/block:IfDisqusShortname}
  2777. <li><a href="http://tmv.proto.jp/reblog.php?post_url={Permalink};" class="reblog"></a></li>
  2778. <li><a href="{Permalink}" class="postURL"></a></li>
  2779. </ul>
  2780. </div>
  2781. </div>
  2782. </div>
  2783. </div>
  2784. {/block:Audio}
  2785.  
  2786.  
  2787. <!-- TEXT POST -->
  2788. {block:Text}
  2789. <div class="post-text posts">
  2790. <div class="frame-hover">
  2791. <div class="frame-post">
  2792. <div class="content-thumbnail">
  2793.  
  2794. <div class="textpost">
  2795. <h2 class="post-title"> {block:Title} {Title} {/block:Title} </h2>
  2796. <p>
  2797. {Body}
  2798. {block:More}
  2799. <p>
  2800. <a href="{Permalink}" class="read_more">Read More ...</a>
  2801. </p>
  2802. {/block:More}
  2803. </p>
  2804. </div>
  2805.  
  2806. </div>
  2807.  
  2808. <div class="postmid-info">
  2809. <span class="date">{block:Date} {Month} {DayOfMonth}, {Year} {/block:Date}</span>
  2810. <a href="{Permalink}" class="viewBtn">VIEW POST</a>
  2811. </div>
  2812.  
  2813. <div class="postbot-info">
  2814. <ul>
  2815. {block:NoteCount}<li><a href="{Permalink}#notes" class="like"> {NoteCount} </a></li>{/block:NoteCount}
  2816. {block:IfDisqusShortname}
  2817. <li><a href="{Permalink}#disqus_thread" class="comments">{lang:Comments}</a></li>
  2818. {/block:IfDisqusShortname}
  2819. <li><a href="http://tmv.proto.jp/reblog.php?post_url={Permalink};" class="reblog"></a></li>
  2820. <li><a href="{Permalink}" class="postURL"></a></li>
  2821. </ul>
  2822. </div>
  2823. </div>
  2824. </div>
  2825. </div>
  2826. {/block:Text}
  2827.  
  2828.  
  2829. <!-- LINK POST -->
  2830. {block:Link}
  2831. <div class="post-link posts">
  2832. <div class="frame-hover">
  2833. <div class="frame-post">
  2834. <div class="content-thumbnail">
  2835.  
  2836. <div class="linkpost">
  2837. <div class="post-link-url">
  2838. <a href="{URL}">
  2839. <p>
  2840. {Name}
  2841. </p>
  2842. </a>
  2843. </div>
  2844. </div>
  2845.  
  2846. </div>
  2847.  
  2848. <div class="postmid-info">
  2849. <span class="date">{block:Date} {Month} {DayOfMonth}, {Year} {/block:Date}</span>
  2850. <a href="{Permalink}" class="viewBtn">VIEW POST</a>
  2851. </div>
  2852.  
  2853. <div class="postbot-info">
  2854. <ul>
  2855. {block:NoteCount}<li><a href="{Permalink}#notes" class="like"> {NoteCount} </a></li>{/block:NoteCount}
  2856. {block:IfDisqusShortname}
  2857. <li><a href="{Permalink}#disqus_thread" class="comments">{lang:Comments}</a></li>
  2858. {/block:IfDisqusShortname}
  2859. <li><a href="http://tmv.proto.jp/reblog.php?post_url={Permalink};" class="reblog"></a></li>
  2860. <li><a href="{Permalink}" class="postURL"></a></li>
  2861. </ul>
  2862. </div>
  2863. </div>
  2864. </div>
  2865. </div>
  2866. {/block:Link}
  2867.  
  2868.  
  2869.  
  2870. <!-- CHAT POST -->
  2871. {block:Chat}
  2872. <div class="post-chat posts">
  2873. <div class="frame-hover">
  2874. <div class="frame-post">
  2875. <div class="content-thumbnail">
  2876.  
  2877. <div class="chatpost">
  2878. <h2 class="post-title"> {Title} </h2>
  2879. <table cellspacing="0" class="chat-lines">
  2880. <tbody>
  2881. {block:Lines}
  2882. <tr class="user{UserNumber} {Alt}">
  2883. <th class="label">{block:Label}{Label}{/block:Label}</th>
  2884. <td>{Line}</td>
  2885. </tr>
  2886. {/block:Lines}
  2887. </tbody>
  2888.  
  2889. </table>
  2890. </div>
  2891. </div>
  2892.  
  2893. <div class="postmid-info">
  2894. <span class="date">{block:Date} {Month} {DayOfMonth}, {Year} {/block:Date}</span>
  2895. <a href="{Permalink}" class="viewBtn">VIEW POST</a>
  2896. </div>
  2897.  
  2898. <div class="postbot-info">
  2899. <ul>
  2900. {block:NoteCount}<li><a href="{Permalink}#notes" class="like"> {NoteCount} </a></li>{/block:NoteCount}
  2901. {block:IfDisqusShortname}
  2902. <li><a href="{Permalink}#disqus_thread" class="comments">{lang:Comments}</a></li>
  2903. {/block:IfDisqusShortname}
  2904. <li><a href="http://tmv.proto.jp/reblog.php?post_url={Permalink};" class="reblog"></a></li>
  2905. <li><a href="{Permalink}" class="postURL"></a></li>
  2906. </ul>
  2907. </div>
  2908. </div>
  2909. </div>
  2910. </div>
  2911. {/block:Chat}
  2912.  
  2913.  
  2914.  
  2915. <!-- ANSWER POST -->
  2916. {block:Answer}
  2917. <div class="post-answer posts">
  2918. <div class="frame-hover">
  2919. <div class="frame-post">
  2920. <div class="content-thumbnail">
  2921.  
  2922. <div class="answerpost">
  2923. <p class="post-question">
  2924. <span class="askerpoint"></span>
  2925. {Question}
  2926. </p>
  2927. <p class="post-asker">
  2928. {Asker}
  2929. </p>
  2930. </div>
  2931.  
  2932. </div>
  2933.  
  2934. <div class="postmid-info">
  2935. <span class="date">{block:Date} {Month} {DayOfMonth}, {Year} {/block:Date}</span>
  2936. <a href="{Permalink}" class="viewBtn">VIEW POST</a>
  2937. </div>
  2938.  
  2939. <div class="postbot-info">
  2940. <ul>
  2941. {block:NoteCount}<li><a href="{Permalink}#notes" class="like"> {NoteCount} </a></li>{/block:NoteCount}
  2942. {block:IfDisqusShortname}
  2943. <li><a href="{Permalink}#disqus_thread" class="comments">{lang:Comments}</a></li>
  2944. {/block:IfDisqusShortname}
  2945. <li><a href="http://tmv.proto.jp/reblog.php?post_url={Permalink};" class="reblog"></a></li>
  2946. <li><a href="{Permalink}" class="postURL"></a></li>
  2947. </ul>
  2948. </div>
  2949. </div>
  2950. </div>
  2951. </div>
  2952. {/block:Answer}
  2953.  
  2954.  
  2955.  
  2956. <!-- PHOTOSET POST -->
  2957. {block:Photoset}
  2958. <div class="post-photoset posts">
  2959. <div class="frame-hover">
  2960. <div class="frame-post">
  2961. <div class="content-thumbnail">
  2962. <span class="ribbon-icon"></span>
  2963. <span class="photoset-icon"></span>
  2964. {Photoset-400}
  2965. </div>
  2966.  
  2967. <div class="postmid-info">
  2968. <span class="date">{block:Date} {Month} {DayOfMonth}, {Year} {/block:Date}</span>
  2969. <a href="{Permalink}" class="viewBtn">VIEW POST</a>
  2970. </div>
  2971.  
  2972. <div class="postbot-info">
  2973. <ul>
  2974. {block:NoteCount}<li><a href="{Permalink}#notes" class="like"> {NoteCount} </a></li>{/block:NoteCount}
  2975. {block:IfDisqusShortname}
  2976. <li><a href="{Permalink}#disqus_thread" class="comments">{lang:Comments}</a></li>
  2977. {/block:IfDisqusShortname}
  2978. <li><a href="http://tmv.proto.jp/reblog.php?post_url={Permalink};" class="reblog"></a></li>
  2979. <li><a href="{Permalink}" class="postURL"></a></li>
  2980. </ul>
  2981. </div>
  2982. </div>
  2983. </div>
  2984. </div>
  2985. {/block:Photoset}
  2986.  
  2987.  
  2988.  
  2989. <!-- QUOTE POST -->
  2990. {block:Quote}
  2991. <div class="post-quote posts">
  2992. <div class="frame-hover">
  2993. <div class="frame-post">
  2994. <div class="content-thumbnail">
  2995.  
  2996. <div class="quotepost">
  2997. <p class="quoteline">
  2998. {Quote}
  2999. </p>
  3000. <p class="quotesource">{block:Source} _{Source} {/block:Source} </p>
  3001. </div>
  3002.  
  3003. </div>
  3004.  
  3005. <div class="postmid-info">
  3006. <span class="date">{block:Date} {Month} {DayOfMonth}, {Year} {/block:Date}</span>
  3007. <a href="{Permalink}" class="viewBtn">VIEW POST</a>
  3008. </div>
  3009.  
  3010. <div class="postbot-info">
  3011. <ul>
  3012. {block:NoteCount}<li><a href="{Permalink}#notes" class="like"> {NoteCount} </a></li>{/block:NoteCount}
  3013. {block:IfDisqusShortname}
  3014. <li><a href="{Permalink}#disqus_thread" class="comments">{lang:Comments}</a></li>
  3015. {/block:IfDisqusShortname}
  3016. <li><a href="http://tmv.proto.jp/reblog.php?post_url={Permalink};" class="reblog"></a></li>
  3017. <li><a href="{Permalink}" class="postURL"></a></li>
  3018. </ul>
  3019. </div>
  3020. </div>
  3021. </div>
  3022. </div>
  3023. {/block:Quote}
  3024.  
  3025.  
  3026. {/block:IndexPage}
  3027. {/block:Posts}
  3028. </div>
  3029.  
  3030. <!-- =====END POSTS===== -->
  3031.  
  3032. {block:IndexPage}
  3033. {block:Pagination}
  3034. <div id="pagination">
  3035. <div class="prev">
  3036. <a href="{block:NextPage}{NextPage}{/block:NextPage}" class="prev-btn"> </a>
  3037. </div>
  3038.  
  3039. <div class="next">
  3040. <a href="{block:PreviousPage}{PreviousPage}{/block:PreviousPage}" class="next-btn"> </a>
  3041. </div>
  3042. </div>
  3043. {/block:Pagination}
  3044. {/block:IndexPage}
  3045. <!-- ===== END INDEX PAGE ===== -->
  3046.  
  3047.  
  3048. <!-- ===== PERMALINK PAGE ===== -->
  3049. {block:PermalinkPage}
  3050. <div id="permalink-page-preview">
  3051.  
  3052. {block:Posts}
  3053.  
  3054. <div id="permalink-posts">
  3055.  
  3056. <!-- PHOTO POST -->
  3057. {block:Photo}
  3058. <div class="content-posts">
  3059. <div class="permalink-post-photo">
  3060. <img src="{PhotoURL-HighRes}" alt="" />
  3061. </div>
  3062. <p>
  3063. {block:Caption}
  3064. {Caption}
  3065. {/block:Caption}
  3066. </p>
  3067. </div>
  3068. {/block:Photo}
  3069.  
  3070. <!-- VIDEO POST -->
  3071. {block:Video}
  3072. <div class="content-posts">
  3073. <div class="permalink-post-video">
  3074. {Video-500}
  3075. </div>
  3076. <p>
  3077. {block:Caption}
  3078. {Caption}
  3079. {/block:Caption}
  3080. </p>
  3081. </div>
  3082. {/block:Video}
  3083.  
  3084. <!-- AUDIO POST -->
  3085. {block:Audio}
  3086. <div class="content-posts">
  3087. <div class="permalink-post-audio">
  3088. <div class="audio-player">
  3089. {block:AlbumArt}<div class="album-art"> <img src="{AlbumArtUrl}" alt="" /> </div>{/block:AlbumArt}
  3090. </div>
  3091. <div class="audio-data">
  3092. <h3 class="artist-name"> {block:Artist}{Artist}{/block:Artist}</h3>
  3093. <h2 class="track-name"> {block:TrackName}{TrackName}{/block:TrackName} </h2>
  3094. <h4 class="album-title"> {block:Album}{Album}{/block:Album} </h4>
  3095. <div class="player-box">
  3096. <p class="play-count">
  3097. {PlayCountWithLabel}
  3098. </p>
  3099. <span class="player">{AudioPlayerBlack}</span>
  3100. </div>
  3101. </div>
  3102. </div>
  3103. <p>
  3104. {block:Caption}
  3105. {Caption}
  3106. {/block:Caption}
  3107. </p>
  3108. </div>
  3109. {/block:Audio}
  3110.  
  3111. <!-- TEXT POST -->
  3112. {block:Text}
  3113. <div class="content-posts">
  3114. <div class="permalink-post-text">
  3115. <div class="textpost">
  3116. <h2 class="post-title"> {block:Title}{Title}{/block:Title}</h2>
  3117. {Body}
  3118. </div>
  3119. </div>
  3120. </div>
  3121. {/block:Text}
  3122.  
  3123. <!-- LINK POST -->
  3124. {block:Link}
  3125. <div class="content-posts">
  3126. <div class="permalink-post-link">
  3127. <div class="linkpost-permalink">
  3128. <span class="permalink-link-icon"></span>
  3129. <a href="{URL}"><p> {Name} </p></a>
  3130. </div>
  3131.  
  3132. <p class="link-caption">
  3133. {block:Description}
  3134. {Description}
  3135. {/block:Description}
  3136. </p>
  3137.  
  3138. </div>
  3139. </div>
  3140. {/block:Link}
  3141.  
  3142. <!-- CHAT POST -->
  3143. {block:Chat}
  3144. <div class="content-posts">
  3145. <div class="permalink-post-chat">
  3146. <div class="chatpost">
  3147. <h2 class="post-title"> {block:Title}{Title}{/block:Title} </h2>
  3148. <table cellspacing="0" class="chat-lines-permalink">
  3149. <tbody>
  3150. {block:Lines}
  3151. <tr class="user{UserNumber} {Alt}">
  3152. <th class="label">{block:Label}{Label}{/block:Label}</th>
  3153. <td>{Line}</td>
  3154. </tr>
  3155. {/block:Lines}
  3156. </tbody>
  3157. </table>
  3158. </div>
  3159. </div>
  3160. </div>
  3161. {/block:Chat}
  3162.  
  3163. <!-- ANSWER POST -->
  3164. {block:Answer}
  3165. <div class="content-posts">
  3166. <div class="permalink-post-answer">
  3167. <div class="answerpost-permalink">
  3168. <p class="post-question">
  3169. <span class="askerpoint"></span>
  3170. {Question}
  3171. </p>
  3172. <p class="post-asker">
  3173. {Asker}
  3174. </p>
  3175. </div>
  3176.  
  3177. <p class="the-answer">
  3178. {Answer}
  3179. </p>
  3180. </div>
  3181. </div>
  3182. {/block:Answer}
  3183.  
  3184. <!-- PHOTOSET POST -->
  3185. {block:Photoset}
  3186. <div class="content-posts">
  3187. <div class="permalink-post-photoset">
  3188. <div class="photoset-container">
  3189. <div class="media-big">{Photoset-500}</div>
  3190. <div class="media-small">{Photoset-250}</div>
  3191. </div>
  3192. </div>
  3193. <p>
  3194. {block:Caption} {Caption} {/block:Caption}
  3195. </p>
  3196. </div>
  3197. {/block:Photoset}
  3198.  
  3199. <!-- QUOTE POST -->
  3200. {block:Quote}
  3201. <div class="content-posts">
  3202. <div class="permalink-post-quote">
  3203. <div class="quotepost-permalink">
  3204. <p class="quoteline">
  3205. {Quote}
  3206. </p>
  3207. <p class="quotesource"> _{Source} </p>
  3208. </div>
  3209. </div>
  3210. </div>
  3211. {/block:Quote}
  3212.  
  3213.  
  3214. </div> <!-- end #permalink-posts -->
  3215.  
  3216.  
  3217. <div id="sidebar">
  3218. {block:PermalinkPagination}
  3219. <div class="side-nav">
  3220. <a href="{block:PreviousPost}{PreviousPost}{/block:PreviousPost}" class="prev-nav"><span class="previcon"></span> Prev </a>
  3221. <a href="/" class="home-nav"> Home </a>
  3222. <a href="{block:NextPost}{NextPost}{/block:NextPost}" class="next-nav"><span class="nexticon"></span> Next </a>
  3223. </div>
  3224. {/block:PermalinkPagination}
  3225. {block:Date}
  3226. <div class="side-list">
  3227. <ul>
  3228. {block:PostTitle}<li><h2>{PostTitle}</h2> </li>{/block:PostTitle}
  3229. <li><span class="list-date"></span> {Month} {DayOfMonth}, {Year} </li>
  3230. {block:PostNotes}
  3231. <li><span class="list-notes"></span><a href="{Permalink}#notes"> {block:NoteCount}{NoteCountWithLabel}{/block:NoteCount} </a></li>
  3232. {/block:PostNotes}
  3233. <li><span class="list-reblog"></span><a href="http://tmv.proto.jp/reblog.php?post_url={Permalink};"> Reblog This Post </a></li>
  3234. <li><span class="list-permalink"></span><a href="{Permalink}"> Permalink </a></li>
  3235. {block:RebloggedFrom}
  3236. <li><span class="list-author"></span>Source: <a href="{ReblogRootURL}"> {ReblogRootName} </a></li>
  3237. {/block:RebloggedFrom}
  3238. {block:HasTags}
  3239. <li><span class="list-tag"></span>{block:Tags}<a href="{TagUrl}"> #{Tag} </a>{/block:Tags}</li>
  3240. {/block:HasTags}
  3241. </ul>
  3242. <!-- início do código para o contador de visitas CódigoFonte.net -->
  3243. <script language="JavaScript" type="text/javascript" src="http://contador.codigofonte.net/log.php?id=144422&d=a"></script>
  3244. <!-- final do código para o contador de visitas CódigoFonte.net -->
  3245. </div>
  3246. {/block:Date}
  3247. <div class="sharethis">
  3248. <p> Share this: </p>
  3249. <input class="shortURL" type="url" id="shortURL" name="shortURL" value="{ShortURL}" />
  3250. </div>
  3251. <div class="sharebutton">
  3252. <!--twitter-->
  3253. <a href="https://twitter.com/share" class="twitter-share-button" data-url="{Permalink}" data-text="{text:Twitter Text}" data-count="horizontal">Tweet</a>
  3254. <script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
  3255.  
  3256. <!--Facebook -->
  3257. <a expr:share_url="{Permalink}" class="fb-share" href="http://www.facebook.com/sharer.php?" name="fb_share" rel="nofollow" type="button_count" >Share</a>
  3258. <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"/></script>
  3259.  
  3260. <!-- Gplus -->
  3261. <!-- Place this tag where you want the +1 button to render -->
  3262. <g:plusone size="medium" href="{Permalink}"></g:plusone>
  3263.  
  3264. <!-- Place this render call where appropriate -->
  3265. <script type="text/javascript">
  3266. (function() {
  3267. var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
  3268. po.src = 'https://apis.google.com/js/plusone.js';
  3269. var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  3270. })();
  3271. </script>
  3272. </div>
  3273. </div> <!-- end #sidebar -->
  3274.  
  3275.  
  3276. <!-- DISQUS HERE -->
  3277. <!-- Disqus -->
  3278. {block:IfDisqusShortname}
  3279. <div id="disqus" class="post-desc">
  3280. <div class="notecontainer" style="margin: 40px 0 0 0; padding: 0;">
  3281. <div id="disqus_thread"></div>
  3282. <script type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/embed.js"></script>
  3283. <noscript><a href="http://{text:Disqus Shortname}.disqus.com/?url=ref">{lang:View the discussion thread}</a></noscript>
  3284. </div>
  3285. <div style="text-align: right; margin-top: 5px">
  3286. {lang:Blog comments powered by Disqus 2}
  3287. </div>
  3288. </div>
  3289. {/block:IfDisqusShortname}
  3290.  
  3291.  
  3292. <!-- Notes -->
  3293. {block:PostNotes}
  3294. <div class="notelists">
  3295. <p class="noteslabel"> Notes: </p>
  3296. <p>
  3297. {PostNotes}
  3298. </p>
  3299. </div>
  3300. {/block:PostNotes}
  3301.  
  3302. {/block:Posts}
  3303.  
  3304. </div> <!-- end #permalink-page-preview -->
  3305. {/block:PermalinkPage}
  3306. <!-- ===== END PERMALINK PAGE ===== -->
  3307.  
  3308. </div> <!-- end #content -->
  3309.  
  3310. </div> <!-- end #content-wrapper -->
  3311.  
  3312. <div id="footer_sosmed">
  3313. <div id="bottom-sosmed">
  3314. <ul>
  3315. {block:ifTwitterAccount}
  3316. <li><a href="http://twitter.com/{text:Twitter Account}" class="twitter"> {text:Twitter Account} </a></li>
  3317. {/block:ifTwitterAccount}
  3318.  
  3319. {block:ifFacebookAccount}
  3320. <li><a href="http://facebook.com/{text:Facebook Account}" class="facebook"> {text:Facebook Account} </a></li>
  3321. {/block:ifFacebookAccount}
  3322.  
  3323. {block:ifGplusAccount}
  3324. <li><a href="http://gplus.to/{text:Gplus Account}" class="gplus"> {text:Gplus Account} </a></li>
  3325. {/block:ifGplusAccount}
  3326.  
  3327. {block:ifPinterestAccount}
  3328. <li><a href="http://pinterest.com/{text:Pinterest Account}" class="pinterest"> {text:Pinterest Account} </a></li>
  3329. {/block:ifPinterestAccount}
  3330.  
  3331. {block:ifDribbbleAccount}
  3332. <li><a href="http://dribbble.com/{text:Dribbble Account}" class="dribbble"> {text:Dribbble Account} </a></li>
  3333. {/block:ifDribbbleAccount}
  3334.  
  3335. {block:ifFlickrAccount}
  3336. <li><a href="http://www.flickr.com/photos/{text:Pinterest Account}" class="flickr"> {text:Flickr Account} </a></li>
  3337. {/block:ifFlickrAccount}
  3338. </ul>
  3339. </div>
  3340.  
  3341. </div>
  3342.  
  3343. <div id="footer-wrapper">
  3344.  
  3345. <div id="footer">
  3346. <p class="copyright"> © {CopyrightYears} | <a href="http://themeforest.net/item/popcase/1162441">Theme</a> by <a href="http://tofuthemes.com">Tofuthemes</a> </p>
  3347. <p class="powered"> Powered by <a href="http://www.tumblr.com">Tumblr</a> </p>
  3348. </div>
  3349.  
  3350. </div> <!-- end #footer-wrapper -->
  3351.  
  3352. </div> <!-- end #container -->
  3353.  
  3354. <!-- End Document
  3355. =========================================== -->
  3356.  
  3357.  
  3358. <script language="javascript">
  3359. $(document).ready(function(){
  3360.  
  3361. // Flex Slider
  3362. $('.flexslider').flexslider({
  3363. animation: "fade",
  3364. directionNav: false,
  3365. controlNav: true,
  3366. slideshowSpeed: 5000,
  3367. animationDuration: 600,
  3368. controlsContainer: ".flex-container"
  3369. });
  3370.  
  3371. // Widget Carousel
  3372. $('#widget_carousel').jcarousel({
  3373. wrap: 'circular',
  3374. scroll: 1
  3375. });
  3376.  
  3377. // Dribbble Widget
  3378.  
  3379. $.jribbble.getShotsByPlayerId('{text:Dribbble Account}', function (playerShots) {
  3380. var html = [];
  3381. $.each(playerShots.shots, function (i, shot) {
  3382. html.push('<li><a href="' + shot.url + '">');
  3383. html.push('<img src="' + shot.image_teaser_url + '" ');
  3384. html.push('alt="' + shot.title + '"></a></li>');
  3385. });
  3386.  
  3387. $('#dribbble-widget').html(html.join(''));
  3388. }, {page: 1, per_page: 9});
  3389.  
  3390. // Instagram Widget
  3391. {block:IfInstagramAccount}
  3392. $("#instagram-widget").instagram('getStream', {
  3393. count: 9,
  3394. user: {text:Instagram Account},
  3395. getUser: false,
  3396. callback: function() {
  3397. $.each($('#instagram-widget img'), function() {
  3398. var $this = $(this);
  3399. $(this).css({'cursor':'pointer'});
  3400. var largeUrl = $this.data('altImageSizes').standard_resolution.url;
  3401. $this.click(function() {
  3402. window.open(largeUrl);
  3403. });
  3404. });
  3405. }
  3406. });
  3407. {/block:IfInstagramAccount}
  3408.  
  3409. //slide Up widget
  3410. $('#widget-bar').delay(1500).slideUp();
  3411.  
  3412. //for short url input
  3413. $("#shortURL").click(function() {
  3414. $(this).select();
  3415. });
  3416.  
  3417.  
  3418. //for each posts
  3419. $('.frame-hover').each(function() {
  3420. $(this).mouseover(function() {
  3421. $(this).parent(".posts").css({"z-index":10000});
  3422. }).mouseout(function(){
  3423. $(this).parent(".posts").css({"z-index":10});
  3424. });
  3425. });
  3426.  
  3427. //for profile description
  3428. $('.button_info').live('mouseover mouseout',function(event){
  3429. if ( event.type == "mouseover" ) {
  3430. $(this).parent().find('.bio-desc').stop().fadeTo(300,0.8);
  3431. } else {
  3432. $(this).parent().find('.bio-desc').stop().fadeTo(300,0);
  3433. }
  3434.  
  3435. });
  3436.  
  3437. //for search button
  3438. $(".click-off").live('click',function(){
  3439. $('#search').css({"visibility":"visible"});
  3440. $(this).removeClass('click-off');
  3441. $(this).addClass('click-on');
  3442. });//eo .click-on
  3443.  
  3444. $(".click-on").live('click',function(){
  3445. $('#search').css({"visibility":"hidden"});
  3446. $(this).removeClass('click-on');
  3447. $(this).addClass('click-off');
  3448. });//eo .click-off
  3449.  
  3450.  
  3451. //for dropdown menu
  3452. $(".dropdown").live('click',function(){
  3453. $('.pages-menu').css({"visibility":"visible"});
  3454. $(this).removeClass('dropdown');
  3455. $(this).addClass('dropup');
  3456. });//eo .click-on
  3457.  
  3458. $(".dropup").live('click',function(){
  3459. $('.pages-menu').css({"visibility":"hidden"});
  3460. $(this).removeClass('dropup');
  3461. $(this).addClass('dropdown');
  3462. });//eo .click-off
  3463.  
  3464.  
  3465. var banner_height = $("#banner").height();
  3466.  
  3467. //for widget panel up-down
  3468. $(".down").live('click',function(){
  3469. $('#widget-bar').slideDown();
  3470. $(this).removeClass('down');
  3471. $(this).addClass('up');
  3472. $(this).html('<img src="http://static.tumblr.com/he6jwsj/0lblvpo04/triangle-up.png" />');
  3473. });//eo paneldown click
  3474.  
  3475. $(".up").live('click',function(){
  3476. $('#widget-bar').slideUp();
  3477. $(this).removeClass('up');
  3478. $(this).addClass('down');
  3479. $(this).html('<img src="http://static.tumblr.com/he6jwsj/jAylvpq5x/triangle-down.png" />');
  3480. });//eo panelup click
  3481.  
  3482.  
  3483. //for following
  3484. $(".show_followed").live('click',function(){
  3485. $('.following .widget-content').css('height','auto');
  3486. $(this).removeClass('show_followed');
  3487. $(this).addClass('hide_followed');
  3488.  
  3489. $(this).html('Hide all following');
  3490. });//eo .show_followed click
  3491.  
  3492. $(".hide_followed").live('click',function(){
  3493. $('.following .widget-content').css('height','215px');
  3494. $(this).removeClass('hide_followed');
  3495. $(this).addClass('show_followed');
  3496. $(this).html('Show all following');
  3497. });//eo .hide_followed click
  3498.  
  3499.  
  3500. $(".fan_box .connections_grid .grid_item").css("padding","0 10px 8px 0 !important");
  3501.  
  3502.  
  3503. });
  3504.  
  3505.  
  3506. </script>
  3507.  
  3508.  
  3509. {block:IfDisqusShortname}
  3510. <script type="text/javascript">
  3511. //<![CDATA[
  3512. (function() {
  3513. var links = document.getElementsByTagName('a');
  3514. var query = '?';
  3515. for(var i = 0; i < links.length; i++) {
  3516. if(links[i].href.indexOf('#disqus_thread') >= 0) {
  3517. query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
  3518. }
  3519. }
  3520. document.write('<script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/get_num_replies.js' + query + '"></' + 'script>');
  3521. })();
  3522. //]]>
  3523. </script>
  3524. {/block:IfDisqusShortname}
  3525.  
  3526.  
  3527. <!-- GOOGLE ANALYTICS -->
  3528. <script type="text/javascript">
  3529. var _gaq = _gaq || [];
  3530. _gaq.push(['_setAccount', '{text:Google Analytics ID}']);
  3531. _gaq.push(['_trackPageview']);
  3532.  
  3533. (function() {
  3534. var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  3535. ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  3536. var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  3537. })();
  3538. </script>
  3539. </body>
  3540. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!