Facebook
Tumblr
Copy the code below by pressing CTRL + C on windows or CMD + C on mac.
<!DOCTYPE html> <!--------------------------------------------------------------- Theme Glock By Draft Themes Last update 29.10.16 Theme Designer: http://www.draft-themes.co/ Support: http://www.draft-themes.co/support ------------------------------------------------------------- --> <html lang="en"> <head> <meta charset="utf-8"> <title>{Title}</title> <link rel="shortcut icon" href="{PortraitURL-128}"> <link rel="apple-touch-icon-precomposed" href="{PortraitURL-128}"> <link rel="alternate" type="application/rss+xml" href="{RSS}"> <link type="text/css" rel="stylesheet" href="http://static.tumblr.com/8rdzlhn/fcSnvrr4u/font-awesome.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <script src="http://static.tumblr.com/8rdzlhn/yglof0qbe/modernizr-custom.js"></script> {block:Description} <meta name="description" content="{MetaDescription}"> {/block:Description} <meta name="color:Background" content="#F5F5F5"/> <meta name="color:Background 2" content="#FFFFFF"/> <meta name="color:Blog Background Transparency" content="#000000"/> <meta name="color:Preloader Background" content="#000000"/> <meta name="color:Preloader Loading Icon" content="#ffffff"/> <meta name="color:Header" content="#000000"/> <meta name="color:Header Title" content="#ffffff"/> <meta name="color:Header Background Gradient Top" content="#00f8cb"/> <meta name="color:Header Background Gradient Bottom" content="#00aef8"/> <meta name="color:Header Background Transparency" content="#000000"/> <meta name="color:Navigation Background" content="#000000"/> <meta name="color:Navigation Divider" content="#333333"/> <meta name="color:Navigation Text" content="#ffffff"/> <meta name="color:Navigation Button" content="#ffffff"/> <meta name="color:Navigation Button Active" content="#ffffff"/> <meta name="color:Top Bar" content="#000000"/> <meta name="color:Top Bar Title" content="#000000"/> <meta name="color:Text" content="#000000"/> <meta name="color:Links" content="#ffffff"/> <meta name="color:Post Captions" content="#000000"/> <meta name="color:Pagination" content="#000000"/> <meta name="color:Social Icons" content="#ffffff"/> <meta name="color:Post Border" content="#ffffff"/> <meta name="color:Post Hover Background" content="#000000"/> <meta name="color:Post Hover Button" content="#ffffff"/> <meta name="color:Post Hover Gradient Top" content="#00f8cb"/> <meta name="color:Post Hover Gradient Bottom" content="#00aef8"/> <meta name="font:Text" content="Futura"/> <meta name="if:Infinite Scroll" content="1" /> <meta name="if:Show Post Hover Gradient" content="0" /> <meta name="if:Show Header Title" content="0" /> <meta name="if:Show Header Background Gradient" content="0" /> <meta name="if:Show Post Captions" content="0" /> <meta name="if:Show Post Border" content="0" /> <meta name="if:Show Archive Link" content="1" /> <meta name="if:Show Random Link" content="0" /> <meta name="if:Show Designer Link" content="1" /> <meta name="if:Show Description" content="0" /> <meta name="if:Show Social Icons" content="0" /> <meta name="image:Background" content=""> <meta name="image:Header" content=""> <meta name="image:Portrait" content=""> <meta name="select:Post Width" content="250" title="250px"> <meta name="select:Post Width" content="180" title="180px"> <meta name="select:Post Width" content="350" title="350px"> <meta name="select:Post Width" content="400" title="400px"> <meta name="select:Post Width" content="600" title="600px"> <meta name="select:Post Spacing" content="1" title="1px"> <meta name="select:Post Spacing" content="5" title="5px"> <meta name="select:Post Spacing" content="30" title="30px"> <meta name="select:Post Spacing" content="50" title="50px"> <meta name="select:Social Icons" content="off" title="Official Color"> <meta name="select:Social Icons" content="cho" title="Color You Choose"> <meta name="select:Navigation Button" content="left" title="Left"> <meta name="select:Navigation Button" content="right" title="Right"> <meta name="select:Title Size" content="20" title="20px"> <meta name="select:Title Size" content="25" title="25px"> <meta name="select:Title Size" content="30" title="30px"> <meta name="select:Title Size" content="35" title="35px"> <meta name="select:Header Title" content="30" title="30px"> <meta name="select:Header Title" content="35" title="35px"> <meta name="select:Header Title" content="40" title="40px"> <meta name="select:Header Title" content="50" title="50px"> <meta name="select:Header Title" content="60" title="60px"> <meta name="select:Header Title" content="90" title="90px"> <meta name="select:Post Hover Transparency" content="10" title="10%"> <meta name="select:Post Hover Transparency" content="20" title="20%"> <meta name="select:Post Hover Transparency" content="30" title="30%"> <meta name="select:Post Hover Transparency" content="40" title="40%"> <meta name="select:Post Hover Transparency" content="50" title="50%"> <meta name="select:Post Hover Transparency" content="60" title="60%"> <meta name="select:Post Hover Transparency" content="70" title="70%"> <meta name="select:Post Hover Transparency" content="80" title="80%"> <meta name="select:Post Hover Transparency" content="90" title="90%"> <meta name="select:Post Hover Transparency" content="0" title="none"> <meta name="select:Blog Background Transparency" content="10" title="10%"> <meta name="select:Blog Background Transparency" content="20" title="20%"> <meta name="select:Blog Background Transparency" content="30" title="30%"> <meta name="select:Blog Background Transparency" content="40" title="40%"> <meta name="select:Blog Background Transparency" content="50" title="50%"> <meta name="select:Blog Background Transparency" content="60" title="60%"> <meta name="select:Blog Background Transparency" content="70" title="70%"> <meta name="select:Blog Background Transparency" content="80" title="80%"> <meta name="select:Blog Background Transparency" content="90" title="90%"> <meta name="select:Blog Background Transparency" content="0" title="none"> <meta name="select:Header Background Transparency" content="10" title="10%"> <meta name="select:Header Background Transparency" content="20" title="20%"> <meta name="select:Header Background Transparency" content="30" title="30%"> <meta name="select:Header Background Transparency" content="40" title="40%"> <meta name="select:Header Background Transparency" content="50" title="50%"> <meta name="select:Header Background Transparency" content="60" title="60%"> <meta name="select:Header Background Transparency" content="70" title="70%"> <meta name="select:Header Background Transparency" content="80" title="80%"> <meta name="select:Header Background Transparency" content="90" title="90%"> <meta name="select:Header Background Transparency" content="0" title="none"> <meta name="text:Header Title" content=""> <meta name="text:Facebook URL" content="" /> <meta name="text:Behance URL" content="" /> <meta name="text:Twitter URL" content="" /> <meta name="text:Youtube URL" content="" /> <meta name="text:Soundcloud URL" content="" /> <meta name="text:Google Plus URL" content="" /> <meta name="text:Dribbble URL" content="" /> <meta name="text:Pinterest URL" content="" /> <meta name="text:Tumblr URL" content="" /> <meta name="text:Vimeo URL" content="" /> <meta name="text:Link 1 Url" content="" /> <meta name="text:Link 1 Title" content="" /> <meta name="text:Link 2 Url" content="" /> <meta name="text:Link 2 Title" content="" /> <meta name="text:Link 3 Url" content="" /> <meta name="text:Link 3 Title" content="" /> <meta name="text:Link 4 Url" content="" /> <meta name="text:Link 4 Title" content="" /> <meta name="text:Link 5 Url" content="" /> <meta name="text:Link 5 Title" content="" /> <style> html,body,div,span,applet,object,iframe,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,label,legend,p,blockquote,table,caption,tbody,tfoot,thead,tr,th,td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; } body { line-height:1; color:black; background:white; } :focus { outline:0; } table { border-collapse:collapse; border-spacing:0; } caption,th,td { text-align:left; font-weight:normal; } fieldset,img { border:0; } address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; } ol,ul { list-style:none; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; } blockquote:before,blockquote:after,q:before,q:after { content:""; } blockquote,q { quotes:"" ""; } abbr,acronym { border:0; } body { font-size:12px; font-family: {font:Text}; font-weight: normal; background: url("{image:Background}") repeat fixed center 5% / cover; background-color:{color:background}; color:{color:Text}; overflow-x: hidden; } a { text-decoration: none; color:{color:links}; } a:active { outline: none; } a:focus { -moz-outline-style: none; } :-moz-any-link:focus { outline: none; } img { border:none; display:block; } .clear { clear:both; } :-webkit-input-placeholder { opacity: 1 !important; color:{color:links}; } ::-webkit-input-placeholder { opacity: 1 !important; color:{color:links}; } :-moz-placeholder { opacity: 1 !important; color:{color:links}; } ::-moz-placeholder { opacity: 1 !important; color:{color:links}; } :-ms-input-placeholder { opacity: 1 !important; color:{color:links}; } ::-ms-input-placeholder { opacity: 1 !important; color:{color:links}; } body #background-transparency { z-index: 0; position:fixed; top: 0; bottom: 0; left: 0; right: 0; } {block:ifBackgroundImage} body #background-transparency { background-color:rgba({RGBcolor:Blog Background Transparency}, 0.{select:Blog Background Transparency}); } {/block:ifBackgroundImage} #ask-container { background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0; display: none; height: 100%; margin: 0 auto; position: fixed; width: 100%; z-index: 99999999; } #ask-container #ask-display { position: fixed; top: 50%; left:50%; width: 600px; -ms-transform: translateX(-50%) translateY(-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } #ask-container #ask-display .inner { background: #ffffff none repeat scroll 0 0; border-radius: 1px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); padding: 15px 25px 25px; } #ask-container #ask-display .inner span { display: inline-block; color: #000000; font-size: 20px; cursor: pointer; text-decoration:none; font-weight: bold; float: right; letter-spacing: 1px; height: 30px; line-height: 33px; text-transform: uppercase; -webkit-transition: all 0.5s ease-out 0s; -moz-transition: all 0.5s ease-out 0s; -o-transition: all 0.5s ease-out 0s; transition: all 0.5s ease-out 0s; } #ask-container #ask-display .inner span:hover { color: #C61B1F; } #ask-container #ask-display .inner h2 { display: inline-block; color: #000000; font-family: {font:Text}; font-size: 19px; font-weight: bold; height: auto; letter-spacing: 0.7; line-height: 32px; margin: 0 auto 7px; text-align: left; text-decoration: none; width: auto; } #ask-container.show { display:block; } #submit-container { background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0; display: none; height: 100%; margin: 0 auto; position: fixed; width: 100%; z-index: 99999999; } #submit-container #submit-display { position: fixed; top: 50%; left:50%; width: 600px; -ms-transform: translateX(-50%) translateY(-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } #submit-container #submit-display .inner { background: #ffffff none repeat scroll 0 0; border-radius: 1px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); padding: 15px 25px 25px; } #submit-container #submit-display .inner span { display: inline-block; color: #000000; font-size: 20px; cursor: pointer; text-decoration:none; font-weight: bold; float: right; letter-spacing: 1px; height: 30px; line-height: 33px; text-transform: uppercase; -webkit-transition: all 0.5s ease-out 0s; -moz-transition: all 0.5s ease-out 0s; -o-transition: all 0.5s ease-out 0s; transition: all 0.5s ease-out 0s; } #submit-container #submit-display .inner span:hover { color: #C61B1F; } #submit-container #submit-display .inner h2 { display: inline-block; color: #000000; font-family: {font:Text}; font-size: 19px; font-weight: bold; height: auto; letter-spacing: 0.7; line-height: 32px; margin: 0 auto 7px; text-align: left; text-decoration: none; width: auto; } #submit-container.show { display:block; } #preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: {color:Preloader Background} none repeat scroll 0 0; z-index: 99999999; height: 100%; } .spinner { width: 60px; height: 60px; position: absolute; top: 46%; left: 47.6%; transform: translate(-50%, -50%); background-color: {color:Preloader Loading icon}; margin: 0 auto; -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; animation: sk-rotateplane 1.2s infinite ease-in-out; } @-webkit-keyframes sk-rotateplane { 0% { -webkit-transform: perspective(120px) } 50% { -webkit-transform: perspective(120px) rotateY(180deg) } 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) } } @keyframes sk-rotateplane { 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) } 50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) } 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } /* make keyframes that tell the start state and the end state of our object */ @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @keyframes fadeIn { from { opacity:0; } to { opacity:1; } } .fade-in { opacity:0; /* make things invisible upon start */ -webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */ -moz-animation:fadeIn ease-in 1; animation:fadeIn ease-in 1; -webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/ -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-duration:0.7s; -moz-animation-duration:0.7s; animation-duration:0.7s; } .fade-in.one { -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; animation-delay: 0.1s; } #navi-trigger:hover { opacity: 0.5; } #navi-trigger.right { width: 23px; height: 20px; right: 70px; top: 32px; position: fixed; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; z-index: 9999999; } #navi-trigger.left { width: 23px; height: 20px; left: 70px; top: 32px; position: fixed; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; z-index: 9999999; } #navi-trigger span { display: block; position: absolute; height: 3px; width: 100%; background: {color:Navigation Button}; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } #navi-trigger span:nth-child(1) { top: 0px; } #navi-trigger span:nth-child(2) { top: 8px; } #navi-trigger span:nth-child(3) { top: 16px; } #navi-trigger.open span:nth-child(1) { top: 8px; background: {color:Navigation Button Active}; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); } #navi-trigger.open span:nth-child(2) { opacity: 0; left: -60px; } #navi-trigger.open span:nth-child(3) { top: 8px; background: {color:Navigation Button Active}; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg); } #navi { background: {color:Navigation Background} none repeat scroll 0 0; display: none; height: 100%; margin: 0 auto; position: fixed; width: 100%; z-index: 999999; } #navi #navi-box { position: absolute; top: 50%; left:50%; width: 35%; padding: 15px; -ms-transform: translateX(-50%) translateY(-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } #navi #navi-box hr { background: {color:Navigation Divider} none repeat scroll 0 0; border: 0 none; height: 1px; margin: 10px auto; } #navi #navi-box #navi-one { display: none; margin: 0 auto; } #navi #navi-box #navi-one #title { margin: 0 auto; padding: 20px 0; text-align: center; {block:IfPortraitImage} display:none; {/block:IfPortraitImage} } #navi #navi-box #navi-one #title a { color:{color:Navigation Text}; display: block; font-family: {font:Text}; font-size: {select:Title Size}px; height: auto; letter-spacing: 3px; text-decoration: none; text-transform: uppercase; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } #navi #navi-box #navi-one #title a:hover { opacity: 0.7; } #navi #navi-box #navi-one #portrait { box-sizing: border-box; position: relative; margin: 0 auto; width: auto; padding: 20px; {block:IfnotPortraitImage} display: none; {/block:IfnotPortraitImage} z-index: 20; } #navi #navi-box #navi-one #portrait img { height: 110px; padding: 0; width: 110px; margin: 0 auto; opacity: 0.7; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } #navi #navi-box #navi-one #portrait img:hover { opacity: 1; } #navi #navi-box #navi-two { display: none; margin: 0 auto; } #navi #navi-box #navi-two #description-container { display: block; line-height: 130%; padding: 20px; text-align: center; margin: 0 auto; {block:IfNOTShowDescription} display:none; {/block:IfNOTShowDescription} } #navi #navi-box #navi-two #description-container .inner { color:{color:Navigation Text}; font-size: 12px; font-family: {font:Text}; text-decoration:none; letter-spacing: 1.5px; margin:0; height: auto; line-height: 22px; text-transform: uppercase; } #navi #navi-box #navi-three { display: none; margin: 0 auto; } #navi #navi-box #navi-three #menu { margin: 0 auto; padding: 20px; text-align: center; } #navi #navi-box #navi-three #menu span, #navi #navi-box #navi-three #menu a { color:{color:Navigation Text}; cursor: pointer; display: block; font-family: {font:Text}; font-size: 25px; height: auto; letter-spacing: 3px; line-height: 130%; margin: 5px auto; text-decoration: none; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } #navi #navi-box #navi-three #menu span:hover, #navi #navi-box #navi-three #menu a:hover { opacity: 0.7; } #navi #navi-box #navi-four { display: none; margin: 0 auto; } #navi #navi-box #navi-four #social.off { display:block; padding: 20px; margin: 0 auto; text-align: center; {block:ifNOTShowSocialIcons} display:none; padding: 0; {/block:ifNOTShowSocialIcons} } #navi #navi-box #navi-four #social.off a { border-radius: 1px; display: inline-block; font-size: 27px; height: auto; line-height: 130%; margin: auto 12px; text-align: center; text-decoration: none; text-transform: uppercase; width: auto; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; } #navi #navi-box #navi-four #social.off a.fa-facebook { color: rgba(59, 89, 152, 1); } #navi #navi-box #navi-four #social.off a.fa-behance { color: rgba(0, 92, 253, 1); } #navi #navi-box #navi-four #social.off a.fa-twitter { color: rgba(68, 204, 246, 1); } #navi #navi-box #navi-four #social.off a.fa-youtube { color: rgba(206, 51, 45, 1); } #navi #navi-box #navi-four #social.off a.fa-soundcloud { color: rgba(252, 124, 14, 1); } #navi #navi-box #navi-four #social.off a.fa-google-plus { color: rgba(207, 63, 45, 1); } #navi #navi-box #navi-four #social.off a.fa-dribbble { color: rgba(234, 76, 137, 1); } #navi #navi-box #navi-four #social.off a.fa-pinterest-square { color: rgba(203, 32, 39, 1); } #navi #navi-box #navi-four #social.off a.fa-tumblr { color: rgba(39, 65, 82, 1); } #navi #navi-box #navi-four #social.off a.fa-instagram { color: rgba(81, 127, 163, 1); } #navi #navi-box #navi-four #social.off a.fa-vimeo-square { color: rgba(133, 200, 238, 1); } #navi #navi-box #navi-four #social.off a.fa-facebook:hover { color: #ffffff; } #navi #navi-box #navi-four #social.off a.fa-behance:hover { color: #ffffff; } #navi #navi-box #navi-four #social.off a.fa-twitter:hover { color: #ffffff; } #navi #navi-box #navi-four #social.off a.fa-youtube:hover { color: #ffffff; } #navi #navi-box #navi-four #social.off a.fa-soundcloud:hover { color: #ffffff; } #navi #navi-box #navi-four #social.off a.fa-google-plus:hover { color: #ffffff; } #navi #navi-box #navi-four #social.off a.fa-dribbble:hover { color: #ffffff; } #navi #navi-box #navi-four #social.off a.fa-pinterest-square:hover { color: #ffffff; } #navi #navi-box #navi-four #social.off a.fa-tumblr:hover { color: #ffffff; } #navi #navi-box #navi-four #social.off a.fa-instagram:hover { color: #ffffff; } #navi #navi-box #navi-four #social.off a.fa-vimeo-square:hover { color: #ffffff; } #navi #navi-box #navi-four #social.cho { display:block; padding: 20px; margin: 0 auto; text-align: center; {block:ifNOTShowSocialIcons} display:none; padding: 0; {/block:ifNOTShowSocialIcons} } #navi #navi-box #navi-four #social.cho a { border-radius: 1px; display: inline-block; font-size: 27px; height: auto; line-height: 130%; margin: auto 12px; text-align: center; text-decoration: none; text-transform: uppercase; width: auto; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; } #navi #navi-box #navi-four #social.cho a.fa-facebook { color: {color:social icons}; } #navi #navi-box #navi-four #social.cho a.fa-behance { color: {color:social icons}; } #navi #navi-box #navi-four #social.cho a.fa-twitter { color: {color:social icons}; } #navi #navi-box #navi-four #social.cho a.fa-youtube { color: {color:social icons}; } #navi #navi-box #navi-four #social.cho a.fa-soundcloud { color: {color:social icons}; } #navi #navi-box #navi-four #social.cho a.fa-google-plus { color: {color:social icons}; } #navi #navi-box #navi-four #social.cho a.fa-dribbble { color: {color:social icons}; } #navi #navi-box #navi-four #social.cho a.fa-pinterest-square { color: {color:social icons}; } #navi #navi-box #navi-four #social.cho a.fa-tumblr { color: {color:social icons}; } #navi #navi-box #navi-four #social.cho a.fa-instagram { color: {color:social icons}; } #navi #navi-box #navi-four #social.cho a.fa-vimeo-square { color: {color:social icons}; } #navi #navi-box #navi-four #social.cho a.fa-facebook:hover { color: rgba(59, 89, 152, 1); } #navi #navi-box #navi-four #social.cho a.fa-behance:hover { color: rgba(0, 92, 253, 1); } #navi #navi-box #navi-four #social.cho a.fa-twitter:hover { color: rgba(68, 204, 246, 1); } #navi #navi-box #navi-four #social.cho a.fa-youtube:hover { color: rgba(206, 51, 45, 1); } #navi #navi-box #navi-four #social.cho a.fa-soundcloud:hover { color: rgba(252, 124, 14, 1); } #navi #navi-box #navi-four #social.cho a.fa-google-plus:hover { color: rgba(207, 63, 45, 1); } #navi #navi-box #navi-four #social.cho a.fa-dribbble:hover { color: rgba(234, 76, 137, 1); } #navi #navi-box #navi-four #social.cho a.fa-pinterest-square:hover { color: rgba(203, 32, 39, 1); } #navi #navi-box #navi-four #social.cho a.fa-tumblr:hover { color: rgba(39, 65, 82, 1); } #navi #navi-box #navi-four #social.cho a.fa-instagram:hover { color: rgba(81, 127, 163, 1); } #navi #navi-box #navi-four #social.cho a.fa-vimeo-square:hover { color: rgba(133, 200, 238, 1); } #header { {block:ifBackgroundImage} background: transparent; {/block:ifBackgroundImage} {block:ifNOTBackgroundImage} background: {color:Header} url("{image:Header}") no-repeat scroll center top / cover ; {/block:ifNOTBackgroundImage} position: relative; text-align: center; height: 444px; } #header #topbar { background: {color:Top Bar} none repeat scroll 0 0; display: block; margin: auto; padding: 0; position: fixed; width: 100%; z-index: 40; } #header #topbar #inner{ padding: 30px 70px; height: 23px; } #header #topbar #inner #title.left { display: inline-block; margin: 0 auto; float: right; width: auto; } #header #topbar #inner #title.right { display: inline-block; margin: 0 auto; float: left; width: auto; } #header #topbar #inner #title a { color:{color:Top Bar Title}; font-family: {font:Text}; height: auto; letter-spacing: 2px; text-decoration: none; font-size: 25px; text-transform: uppercase; } #header #overlay { {block:ifNOTBackgroundImage} {block:ifShowHeaderBackgroundGradient} background: rgba(0, 0, 0, 0) linear-gradient(45deg, {color:Header Background Gradient Top}, {color:Header Background Gradient Bottom}) repeat scroll 0 0; {block:ifHeaderImage} opacity: 0.6; {/block:ifHeaderImage} {/block:ifShowHeaderBackgroundGradient} {block:ifNOTShowHeaderBackgroundGradient} background: rgb({RGBcolor:Header Background Transparency}); {block:ifHeaderImage} opacity: 0.{select:Header Background Transparency}; {/block:ifHeaderImage} {/block:ifNOTShowHeaderBackgroundGradient} {/block:ifNOTBackgroundImage} {block:ifNOTHeaderImage} opacity: 0; {/block:ifNOTHeaderImage} pointer-events: none; position: absolute; top: 0; height: 100%; left: 0; width: 100%; z-index: 0; } #header #about { margin: 0 auto; position: relative; z-index: 1; max-width: 800px; top: 235px; width: 80%; } #header #about #title { display: none; color: {color:Header Title}; font-family: {font:Text}; font-size:{select:Header Title}px; letter-spacing: 4px; margin: 0 auto; text-transform: uppercase; {block:IfShowHeaderTitle} display: block; {/block:IfShowHeaderTitle} } .parallax-window { padding: 170px 0 230px; background: transparent; } #content { margin:auto; padding: 0 50px; position: relative; z-index: 20; {block:ifNOTBackgroundImage} background-color:{color:background}; {/block:ifNOTBackgroundImage} /* -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; */ } #infscr-loading { background: #ffffff none repeat scroll 0 0; border: medium none; border-radius: 4px; bottom: -50px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); color: #000000; font-size: 10px; height: auto; left: 49%; margin-left: -15px; opacity: 1; padding: 8px; position: absolute; text-align: center; text-transform: uppercase; width: auto; } #infscr-loading img { text-align: center; size: 10px; left: 20px; } #content.center { margin: 0 auto 30px; padding: 20px 0 0; } #content.center-180-1 { width: 99%; } #content.center-180-5 { width: 95%; } #content.center-180-30 { width: 98%; } #content.center-180-50 { width: 95%; } #content.center-250-1 { width: 95%; } #content.center-250-5 { width: 95%; } #content.center-250-30 { width: 95%; } #content.center-250-50 { width: 95%; } #content.center-350-1 { width:95%; } #content.center-350-5 { width:95%; } #content.center-350-30 { width:95%; } #content.center-350-50 { width:95%; } #content.center-400-1 { width:93%; } #content.center-400-5 { width:93%; } #content.center-400-30 { width:93%; } #content.center-400-50 { width:95%; } #content.center-600-1 { width:99%; } #content.center-600-5 { width:99%; } #content.center-600-30 { width:99%; } #content.center-600-50 { width:99%; } #content #loading { height: auto; margin: 0 auto; opacity: 1; position: absolute; width: 100%; {block:PermalinkPage} display: none; {/block:PermalinkPage} } #content #loading img { margin: 0 auto; width: 90px; } #content #post-content { margin: 0 auto 50px; display:none; {block:PermalinkPage} display: block; padding: 0 20px; width: 1140px; margin: 0 auto 50px; {/block:PermalinkPage} } #content.center #post-content { margin: 0 auto 70px; {block:PermalinkPage} margin: 0 auto 0; {/block:PermalinkPage} } #content #post-content #other-pages { background-attachment: fixed; z-index:10; overflow: hidden; background-position: center center; background-size: cover; margin: 0 0 {select:Post Spacing}px; padding: 0; width:{select:Post Width}px; position: relative; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; float: left; } #content #post-content #other-pages #inner { position: relative; padding: 20px; background: {color:Post Border} none repeat scroll 0 0; border-radius: 2px; } #content #post-content #other-pages {} #content #post-content #other-pages h3 { font-family: {font:Text}; font-size: 12px; letter-spacing: 0; line-height: 100%; font-weight: bold; height:12px; margin: 0 0 10px; text-transform: uppercase; } /* #post design */ #content #post-content #post { background-attachment: fixed; z-index:10; background-position: center center; background-size: cover; margin: 0 0 {select:Post Spacing}px; padding: 0; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); width:{select:Post Width}px; position: relative; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; {block:PermalinkPage} width: 558px; box-shadow: 0 15px 15px rgba(0, 0, 0, 0); display: block; padding: 0 0 20px; margin: 0 auto; float:left; {/block:PermalinkPage} } #content #post-content #post .text{ width:auto; } #content #post-content #post.video, #content #post-content #post.photoset {} /* Photoset posts */ #content.post-width-250-1 #post.photoset { width: 501px !important; } #content.post-width-250-5 #post.photoset { width: 505px !important; } #content.post-width-250-30 #post.photoset { width: 530px !important; } #content.post-width-250-50 #post.photoset { width: 550px !important; } /* Video posts */ #content.post-width-250-1 #post.video { width: 501px !important; } #content.post-width-250-5 #post.video { width: 520px !important; } #content.post-width-250-30 #post.video { width: 540px !important; } #content.post-width-250-50 #post.video { width: 560px !important; } #content #post-content #post #inner-post { position: relative; border-radius: 2px; {block:ifShowPostBorder} padding: 15px; {/block:ifShowPostBorder} {block:ifNOTShowPostBorder} padding: 0; {/block:ifNOTShowPostBorder} background: {color:Post Border} none repeat scroll 0 0; } #content #post-content #post img { width:100%; } #content #post-content #post #inner-post #post-container { padding:20px; color:{color:Post captions}; font-size: 10px; line-height: 125%; padding: 15px; overflow:hidden; text-align: justify; background: {color:Post Border} none repeat scroll 0 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } #content #post-content #post #inner-post #post-container p { cursor: default; font-size: 9px; opacity: 0.5; text-align: center; text-transform: uppercase; background: {color:Post Border} none repeat scroll 0 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } #content #post-content #post:hover #inner-post #post-container p { opacity:1; } #content #post-content #post #inner-post #post-container a { text-decoration: none; color:{color:post captions}; text-align: center; } #content #post-content #post #inner-post #post-container.photo, #content #post-content #post #inner-post #post-container.video, #content #post-content #post #inner-post #post-container.audio { padding:0px; background: transparent; border-radius: 1px; } #content #post-content #post:hover #inner-post #post-container.photo, #content #post-content #post:hover #inner-post #post-container.video, #content #post-content #post:hover #inner-post #post-container.audio { background: transparent; } /* Basic post : H3, Caption, p, blockquote */ #content #post-content #post h3 { color:{color:post captions}; font-size: 15px; font-weight: bold; cursor: default; margin: 0 0 15px; line-height: 125%; text-decoration: none; text-transform: uppercase; } #content #post-content #post ul { list-style: disc inside none; margin: 5px; } #content #post-content #post #caption { padding: 10px 15px 0; } #content #post-content #post #caption p { color:{color:post captions}; margin: 8px 0 2px; } #content #post-content #post #caption a { margin: 20px 0 0 0; color:{color:post captions}; } #content #post-content #post blockquote { padding: 0 0 2px 5px; overflow: hidden; } #content #post-content #post blockquote p { color:{color:post captions}; margin: 8px 0 2px; } #content #post-content #post #caption blockquote {} #content #post-content #post #caption blockquote a { border-bottom: 1px solid; color:{color:post captions}; font-weight: bold; line-height: 150%; } #content #post-content #post #caption blockquote h2 { color:{color:post captions}; margin: 8px 0 } #content #post-content #post #caption blockquote pre { color:{color:post captions}; margin: 13px 0; } /* Photo post */ #content #post-content #post #photo { position: relative; } #content #post-content #post #photo img { display:block; box-sizing: border-box; margin: 0; } #content #post-content #post #photo a { text-decoration: none; } #content #post-content #post #photo #hover { height: 100%; overflow:hidden; position: absolute; width: 100%; -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; } #content #post-content #post #photo #hover:hover { {block:ifNOTShowPostHoverGradient} background: rgba({RGBcolor:Post Hover Background}, 0.{select:Post Hover Transparency}) repeat scroll 0 0; {/block:ifNOTShowPostHoverGradient} {block:ifShowPostHoverGradient} background: -webkit-linear-gradient(rgba({RGBcolor:Post Hover Gradient Top},0.{select:Post Hover Transparency}), rgba({RGBcolor:Post Hover Gradient Bottom}, 0.{select:Post Hover Transparency})); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(rgba({RGBcolor:Post Hover Gradient Top},0.{select:Post Hover Transparency}), rgba({RGBcolor:Post Hover Gradient Bottom},0.{select:Post Hover Transparency})); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(rgba({RGBcolor:Post Hover Gradient Top},0.{select:Post Hover Transparency}), rgba({RGBcolor:Post Hover Gradient Bottom},0.8)); /* For Firefox 3.6 to 15 */ background: linear-gradient(rgba({RGBcolor:Post Hover Gradient Top},0.{select:Post Hover Transparency}), rgba({RGBcolor:Post Hover Gradient Bottom},0.{select:Post Hover Transparency})); /* Standard syntax */ {/block:ifShowPostHoverGradient} } #content #post-content #post #photo:hover #hover {} #content #post-content #post #photo #hover span, #content #post-content #post #photo #hover a { color: {color:Post Hover Button}; display: inline-block; font-family: {font:Text}; font-size: 12px; line-height: 100%; position: relative; text-transform: uppercase; opacity:0; visibility: hidden; z-index: 5; } #content #post-content #post #photo:hover #hover span, #content #post-content #post #photo:hover #hover a { opacity:1; visibility: visible; } #content #post-content #post #photo #hover #box { margin: -30px 0; opacity: 0; position: absolute; text-align: center; top: 50%; width: 100%; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; transform:scale(.4,.4); -ms-transform:scale(.4,.4); -webkit-transform:scale(.4,.4); opacity:0 } #content #post-content #post #photo #hover #box .notes { font-size: 38px; letter-spacing: 2px; width: 85%; } #content #post-content #post #photo #hover #box.post-width-180 .notes { font-size: 35px; } #content #post-content #post #photo #hover #box.post-width-250 .notes { font-size: 47px; } #content #post-content #post #photo #hover #box.post-width-350 .notes { font-size: 55px; } #content #post-content #post #photo #hover #box.post-width-400 .notes { font-size: 60px; } #content #post-content #post #photo #hover #box.post-width-600 .notes { font-size: 60px; } #content #post-content #post #photo #hover #box .reblog { font-size: 13px; padding: 5px 0 0; letter-spacing: 1px; width: 85%; } #content #post-content #post #photo #hover #box.post-width-180 .reblog { font-size: 12px; } #content #post-content #post #photo #hover #box.post-width-250 .reblog { font-size: 14px; } #content #post-content #post #photo #hover #box.post-width-350 .reblog { font-size: 16px; } #content #post-content #post #photo #hover #box.post-width-400 .reblog { font-size: 18px; } #content #post-content #post #photo #hover #box.post-width-600 .reblog { font-size: 18px; } #content #post-content #post #photo #hover:hover #box { transform:scale(1,1); -ms-transform:scale(1,1); -webkit-transform:scale(1,1); opacity:1 } /* Chat Post */ #content #post-content #post #chat { list-style:none; margin:0; } #content #post-content #post #chat li { padding:5px 0; } #content #post-content #post #chat li:first-child { padding-top:0; } #content #post-content #post #chat li:last-child { padding-bottom:0; } #content #post-content #post #chat li span { font-weight:bold; } /* Ask Post */ #content #post-content #post #ask { cursor: default; padding: 10px; } #content #post-content #post #ask #question {} #content #post-content #post #ask #question span { display: inline-block; font-weight: bold; margin: 0 5px 0 0; opacity: 0.5; text-transform: uppercase; } #content #post-content #post #ask #question p { display: inline; } #content #post-content #post #ask #answer { margin: 20px 0 0; } #content #post-content #post #ask #answer span, .answerer { display: inline-block; font-weight: bold; margin: 0 5px 0 0; opacity: 0.5; text-transform: uppercase; } #content #post-content #post #ask #answer p { display: inline; } /* Video Post */ #content #post-content #post #video { margin: 10px 0; } #content #post-content #post #video iframe {} #content #post-content #post #video.width-180 {} #content #post-content #post #video.width-250 {} #content #post-content #post #video.width-350 {} #content #post-content #post #video.width-400 {} #content #post-content #post #video.width-600 {} #content #post-content #post #video.width-180 iframe { height: 265px; margin: 0 !important; width: 410px; } #content #post-content #post #video.width-250 iframe { height: 265px; margin: 0 !important; width: 480px; } #content #post-content #post #video.width-350 iframe { height: 210px; margin: 0 !important; width: 310px; } #content #post-content #post #video.width-400 iframe { height: 230px; margin: 0 !important; width: 360px; } #content #post-content #post #video.width-600 iframe { height: 230px; margin: 0 !important; width: 560px; } {block:PermalinkPage} #content #post-content #post #video iframe { height: 282px !important; width: 500px !important; } {/block:PermalinkPage} /* Quote Post */ #content #post-content #post #quote { position:relative; } #content #post-content #post #quote #quote_symbol { font-family: {font:Text}; font-size: 140px; line-height: 100%; opacity: 0.1; position: absolute; right: 0; top: -20px; font-weight: bold; } #content #post-content #post #quote a { text-decoration: none; } #content #post-content #post #quote a h3 { font-size: 17px; margin: 0 0 15px; text-align: center; } #content #post-content #post #quote #source { font-size: 9px; text-align: center; text-transform: uppercase; opacity:0.5; cursor: default; -webkit-transition: all 0.35s ease-out 0s; -moz-transition: all 0.35s ease-out 0s; -o-transition: all 0.35s ease-out 0s; transition: all 0.35s ease-out 0s; } #content #post-content #post:hover #quote #source { opacity:1; } /* Audio Post */ #content #post-content #post #audio {} #content #post-content #post #audio #info-side {} #content #post-content #post #audio #info-side #info { list-style: outside none none; margin: 0 0 -1px; } #content #post-content #post #audio #info-side #info li { background: {color:Post Border} none repeat scroll 0 0; font-weight: bold; margin: 0 0 1px; padding: 10px; position: relative; text-transform: uppercase; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } #content #post-content #post:hover #audio #info-side #info li { background: {color:Post Border} none repeat scroll 0 0; } #content #post-content #post #audio #info-side #info li span {} #content #post-content #post #audio #info-side #player { overflow:hidden; } #content #post-content #post #audio #info-side #player div { opacity:0.4; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } #content #post-content #post:hover #audio #info-side #player div { opacity:0.75; } #content #post-content #post #audio #info-side #player div iframe { display: block; margin: 0 -1px -1px; height: 50px !important; } #content #post-content #post #audio #info-side #player.width-180 div iframe { width: 142px !important; } #content #post-content #post #audio #info-side #player.width-250 div iframe { width: 212px !important; } #content #post-content #post #audio #info-side #player.width-350 div iframe { width: 312px !important; } #content #post-content #post #audio #info-side #player.width-400 div iframe { width: 362px !important; } #content #post-content #post #audio #info-side #player.width-600 div iframe { width: 562px !important; } #content #post-content #post #audio #info-side #player #audio { display:block; } /* Photoset posts */ #content #post-content #post #photoset {} #content #post-content #post #photoset img { display: block; height: auto; width: 100%; margin: 0 0 1px; } #content #post-content #post #photoset img:last-child { margin: 0; } /* Permalink below non-photo-posts */ #content #post-content #post #side-permalink { background: {color:Post Border} none repeat scroll 0 0; margin: 10px 0 0; padding: 5px; } #content #post-content #post #side-permalink.photo { display:none; } #content #post-content #post #side-permalink a, #content #post-content #post #side-permalink span { display: inline-block; font-family: {font:Text}; line-height: 100%; padding: 7px 9px; text-decoration: none; color:{color:Post captions}; -webkit-transition: all 0.35s ease-out 0s; -moz-transition: all 0.35s ease-out 0s; -o-transition: all 0.35s ease-out 0s; transition: all 0.35s ease-out 0s; } #content #post-content #post #side-permalink .right { font-family: {font:Text}; text-align: center; } #content #post-content #post #side-permalink .right a, #content #post-content #post #side-permalink .right span { display: inline-block; font-size: 11px; margin: 0 5px 0 0; padding: 8px 5px 6px; text-decoration: none; color:{color:post captions}; font-weight: bold; width: 60px; -webkit-transition: all 0.35s ease-out 0s; -moz-transition: all 0.35s ease-out 0s; -o-transition: all 0.35s ease-out 0s; transition: all 0.35s ease-out 0s; } #content #post-content #post #side-permalink .right a:hover, #content #post-content #post #side-permalink .right span:hover { opacity:0.5; } #content #post-content #post #side-permalink .right #like-button { padding: 9px 6.5px 5px 6.5px; } #content #post-content #post #side-permalink .right #like-button.white { display: none; } #content #post-content #post #side-permalink .right #like-button.black { display: none; } #content #post-content #post #side-permalink .right #like-button div iframe { height: 13px; margin: -2px 0 0; padding: 0; width: 11px; } #content #post-content #post #side-permalink .right .permalink {} #content #post-content #post #side-permalink .right .reblog { } #content #post-content #post #side-permalink .right .day-month-year { } /* Page Navigation : If not infinite scroll */ #content #post-content #post.pagination { height: 62px; } #content #post-content #post.pagination a.prev, #content #post-content #post.pagination a.next { float: right; font-size: 16px; opacity: 0.5; position: relative; z-index: 1; margin: 2px 0 0; -webkit-transition: all 0.35s ease-out 0s; -moz-transition: all 0.35s ease-out 0s; -o-transition: all 0.35s ease-out 0s; transition: all 0.35s ease-out 0s; } #content #post-content #post.pagination a.prev { float:left; } #content #post-content #post.pagination a.prev:hover, #content #post-content #post.pagination a.next:hover { opacity: 1.0; } #content #post-content #post.pagination #jump { height: auto; margin: 0; padding: 0; {block:ifNOTShowPostBorder} padding: 14px 0 12px; {/block:ifNOTShowPostBorder} overflow: hidden; position: relative; text-align: center; width: auto; } #content #post-content #post.pagination #jump a, #content #post-content #post.pagination #jump span { display: inline-block; border: 2px solid {color:Pagination}; color:{color:Pagination}; font-family: {font:Text}; text-transform: uppercase; font-size: 12px; margin: 2px; border-radius: 2px; padding: 10px 0 9px; width: 10%; -webkit-transition: all 0.35s ease 0s; -moz-transition: all 0.35s ease 0s; -o-transition: all 0.35s ease 0s; transition: all 0.35s ease 0s; } #content #post-content #post.pagination #jump a {} #content #post-content #post.pagination #jump a:hover { opacity: 0.3; } #content #post-content #post.pagination #jump .current-page { background: {color:Post Border} none repeat scroll 0 0; cursor: default; opacity: 0.5; } #content #post-content #post.pagination #jump .jump-page {} #content #post-content #permalink-info { display: inline-block; margin: 0 0 0 25px; padding: 0; width: 557px; } #content #post-content #permalink-info #caption, #content #post-content #permalink-info #tag-list { background: {color:Background 2} none repeat scroll 0 0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding: 30px; font-size: 13px; margin: 0 auto; border-radius: 1px; color:{color:text}; } #content #post-content #permalink-info #caption:empty { display: none; } #content #post-content #permalink-info #caption p { color:{color:text}; } #content #post-content #permalink-info #caption a { color:{color:text}; } #content #post-content #permalink-info #caption blockquote { margin: 10px 0 5px 10px; color:{color:text}; } #content #post-content #permalink-info #caption blockquote a { color:{color:text}; padding: 0 5px; } #content #post-content #permalink-info #caption p img, #content #post-content #permalink-info #caption blockquote img{} #content #post-content #permalink-info #caption .tumblr_blog { font-weight: bold; text-transform: capitalize; color:{color:text}; } #content #post-content #permalink-info #info-list { background: {color:Background 2} none repeat scroll 0 0; display: block; padding: 0; border-radius: 1px; text-align: center; font-size: 11px; margin: 5px auto; } #content #post-content #permalink-info #info-list li { display: inline-block; cursor: default; font-size: 11px; font-weight: bold; padding: 20px; text-transform: uppercase; color:{color:text}; -webkit-transition: all 0.4s ease-out 0s; -moz-transition: all 0.4s ease-out 0s; -o-transition: all 0.4s ease-out 0s; transition: all 0.4s ease-out 0s; } #content #post-content #permalink-info #info-list li:hover { opacity: 0.5; } #content #post-content #permalink-info #info-list li a { display: inline-block; margin: 0 1px; padding: 0 4px; text-transform: uppercase; color:{color:text}; -webkit-transition: all 0.4s ease-out 0s; -moz-transition: all 0.4s ease-out 0s; -o-transition: all 0.4s ease-out 0s; transition: all 0.4s ease-out 0s; } #content #post-content #permalink-info #info-list li a:hover { opacity: 0.5; } #content #post-content #permalink-info #info-list li span { cursor: default; } #content #post-content #permalink-info #tag-list { text-align:center; } #content #post-content #permalink-info #tag-list li { display: inline-block; margin: 0 4px 0; text-transform: uppercase; } #content #post-content #permalink-info #tag-list li a { color:{color:text}; opacity: 0.5; } #content #post-content #permalink-info #tag-list li a:hover { opacity: 1; } #content #post-content #permalink-info #notes { background: transparent none repeat scroll 0 0; box-sizing: border-box; display: block; font-size: 11px; margin: 0 auto 1px; padding: 0; } #content #post-content #permalink-info #notes h2 { color:{color:text}; font-family: {font:Text}; background: {color:Background 2} none repeat scroll 0 0; font-size: 15px; font-weight: bold; border-radius: 1px 1px 0 0; padding: 20px 0; position: relative; letter-spacing: 1px; text-align: center; text-transform: uppercase; } #content #post-content #permalink-info #notes ol.notes { list-style-type: none; margin: 0; border-radius: 0 0 1px 1px; padding: 0 30px 15px; text-align: left; background: {color:Background 2} none repeat scroll 0 0; } #content #post-content #permalink-info #notes ol.notes li.note { display: inline-block; font-weight: normal; margin: 0; overflow: hidden; padding: 0 0 5px; text-align: left; width: 35px; height: 35px; } #content #post-content #permalink-info #notes ol.notes li.note:hover { opacity: 1; } #content #post-content #permalink-info #notes ol.notes li.note.more_notes_link_container { border: medium none; clear: both; font-weight: bold; display: block; font-size: 11px; height: auto; margin: 10px 0 0; opacity: 1; overflow: visible; text-transform: uppercase; width: auto; text-align: center; } #content #post-content #permalink-info #notes ol.notes li.note.more_notes_link_container a { color:{color:text}; font-weight: bold; } #content #post-content #permalink-info #notes ol.notes li.note img.avatar { display: inline-block; height: 25px; margin-right: 10px; vertical-align: -5px; width: 25px; } #content #post-content #permalink-info #notes ol.notes li.note span.action { display:none; } #content #post-content #permalink-info #notes ol.notes li.note .answer_content {} #content #post-content #permalink-info #notes ol.notes li.note blockquote { font-size: 9px; margin: 8px 0 2px 26px; } #content #post-content #permalink-info #notes ol.notes li.note blockquote a {} {CustomCSS} </style> </head> <body> <div id="center"> <div id="ask-container"> <div id="ask-display"> <div class="inner"><h2>{AskLabel}</h2><span class="ask-trigger"><i class="fa fa-times" aria-hidden="true"></i></span><iframe height="190" frameborder="0" width="100%" scrolling="yes" src="http://www.tumblr.com/ask_form/{name}.tumblr.com" style="background-color:transparent; overflow:hidden;" class="askbox"></iframe></div> </div> </div> <div id="submit-container"> <div id="submit-display"> <div class="inner"><h2>{SubmitLabel}</h2><span class="submit-trigger"><i class="fa fa-times" aria-hidden="true"></i></span><iframe frameborder="0" border="0" scrolling="yes" width="100%" height="266" allowtransparency="true" src="http://www.tumblr.com/submit_form/{name}.tumblr.com" style="background-color:transparent; overflow:hidden;"></iframe></div> </div> </div> <div id="background-transparency"></div> {block:IndexPage} <div id="preloader"> <div class="spinner"></div> </div> {/block:IndexPage} <a id="navi-trigger" class="{select:Navigation Button}"><span></span> <span></span> <span></span> </a> <div id="navi"> <div id="navi-box"> <hr> <div id="navi-one"> <div id="title"> <a href="http://{name}.tumblr.com">{Title}</a> </div> <div id="portrait"> <a href="http://{name}.tumblr.com"> <img src="{block:IfnotPortraitImage}{PortraitURL-128}{/block:IfnotPortraitImage}{block:IfPortraitImage}{image:Portrait}{/block:IfPortraitImage}" /> </a> </div> </div> <hr> {block:IfShowDescription} <div id="navi-two"> <div id="description-container"> <div class="inner">{Description}</div> </div> </div> <hr> {/block:IfShowDescription} <div id="navi-three"> <div id="menu"> <a href="/">Home</a> {block:AskEnabled} <span class="ask-trigger">{AskLabel}</span> {/block:AskEnabled} {block:SubmissionsEnabled} <span class="submit-trigger">{SubmitLabel}</span> {/block:SubmissionsEnabled} {block:HasPages} {block:Pages} <a class="haspages-trigger" href="{URL}" title="{Label}">{Label}</a> {/block:Pages} {/block:HasPages} {block:ifLink1Title} <a href="{text:Link 1 Url}">{text:Link 1 Title}</a> {/block:ifLink1Title} {block:ifLink2Title} <a href="{text:Link 2 Url}">{text:Link 2 Title}</a> {/block:ifLink2Title} {block:ifLink3Title} <a href="{text:Link 3 Url}">{text:Link 3 Title}</a> {/block:ifLink3Title} {block:ifLink4Title} <a href="{text:Link 4 Url}">{text:Link 4 Title}</a> {/block:ifLink4Title} {block:ifLink5Title} <a href="{text:Link 5 Url}">{text:Link 5 Title}</a> {/block:ifLink5Title} {block:IfShowArchiveLink} <a href="/archive">Archive</a> {/block:IfShowArchiveLink} {block:IfShowRandomLink} <a class="random-trigger" href="/random">Random</a> {/block:IfShowRandomLink} {block:IfShowDesignerLink} <a href="http://goo.gl/r1KLTR" target="_blank">Designer</a> {/block:IfShowDesignerLink} <div class="clear"></div> </div> </div> <hr> {block:ifShowSocialIcons} <div id="navi-four"> <div id="social" class="{select:Social Icons}"> {block:IfFacebookURL} <a href="{Text:Facebook URL}" class="icon fa fa-facebook" title="Facebook"></a> {/block:IfFacebookURL} {block:IfBehanceURL} <a href="{Text:Behance URL}" class="icon fa fa-behance" title="Behance"></a> {/block:IfBehanceURL} {block:IfTwitterURL} <a href="{Text:Twitter URL}" class="icon fa fa-twitter" title="Twitter"></a> {/block:IfTwitterURL} {block:IfYoutubeURL} <a href="{Text:Youtube URL}" class="icon fa fa-youtube" title="Youtube"></a> {/block:IfYoutubeURL} {block:IfSoundcloudURL} <a href="{Text:Soundcloud URL}" class="icon fa fa-soundcloud" title="Soundcloud"></a> {/block:IfSoundcloudURL} {block:IfGooglePlusURL} <a href="{Text:Google Plus URL}" class="icon fa fa-google-plus" title="Google Plus"></a> {/block:IfGooglePlusURL} {block:IfDribbbleURL} <a href="{Text:Dribbble URL}" class="icon fa fa fa-dribbble" title="Dribbble"></a> {/block:IfDribbbleURL} {block:IfPinterestURL} <a href="{Text:Pinterest URL}" class="icon fa fa-pinterest-square" title="Pinterest"></a> {/block:IfPinterestURL} {block:IfTumblrURL} <a href="{Text:Tumblr URL}" class="icon fa fa-tumblr" title="Tumblr"></a> {/block:IfTumblrURL} {block:IfInstagramURL} <a href="{Text:Instagram URL}" class="icon fa fa-instagram" title="Instagram"></a> {/block:IfInstagramURL} {block:IfVimeoURL} <a href="{Text:Vimeo URL}" class="icon fa fa-vimeo-square" title="Vimeo"></a> {/block:IfVimeoURL} <div class="clear"></div> </div> </div> <hr> {/block:ifShowSocialIcons} </div> </div> <header id="header"> <div id="topbar"> <div id="inner"> <div id="title" class="{select:Navigation Button}"> <a href="http://{name}.tumblr.com">{Title}</a> </div> </div> </div> <div id="overlay"></div> <div id="about"> <div id="title">{text:Header Title}</div> </div> </div> </header> <div id="content" class="center-{select:Post Width}-{select:Post Spacing} post-width-{select:Post Width}-{select:Post Spacing} center"> <div id="post-content" class="center"> {block:TagPage} <div id="other-pages"> <div id="inner"> <h3>Posts tagged with <strong>#{Tag}</strong></h3> </div> </div> {/block:TagPage} {block:Posts} <div id="post" class="{block:Video}video{block:Video}{block:Photoset}photoset{block:Photoset}"> <div id="inner-post"> <div id="post-container" class="{PostType}"> {block:Text} {block:Title} <a href="{Permalink}"><h3>{Title}</h3></a> {/block:Title} {Body} {/block:Text} {block:Photo} <div id="photo"> {block:IndexPage} <div id="hover"> <div id="box" class="post-width-{select:Post Width}"> <a href="{Permalink}" class="notes" title="Notes">{NoteCount}</a> <a href="{ReblogURL}" class="reblog" target="_blank" title="Reblog">Reblog</a> </div> </div> <img src="{PhotoURL-500}"/> {/block:IndexPage} {block:PermalinkPage} <center><img src="{PhotoURL-HighRes}"/></center> {/block:PermalinkPage} </div> {/block:Photo} {block:Photoset} {block:IndexPage} <div id="photoset" class="photocount-{PhotoCount} id{PostID}"> {block:Photos} <img src="{PhotoURL-500}" width="{PhotoWidth-500}"height="{PhotoHeight-500}" class="photo-{PhotoCount}" /> {block:Caption} {Caption} {/block:Caption} {/block:Photos} </div> {/block:IndexPage} {block:PermalinkPage} {Photoset-500} {/block:PermalinkPage} {/block:Photoset} {block:Quote} <div id="quote"> <div id="quote_symbol">"</div> <a href="{Permalink}"><h3>{Quote}</h3></a> {block:Source} <div id="source">{Source}</div> {/block:Source} </div> {/block:Quote} {block:Link} <a href="{URL}" class="link" {Target}> <h3>{Name}</h3> </a> {block:Description} <div class="description">{Description}</div> {/block:Description} {/block:Link} {block:Audio} <div id="audio"> <div id="info-side"> <ul id="info"> {block:TrackName} <li><span>Track</span> {TrackName}</li> {/block:TrackName} {block:Artist} <li><span>Artist</span> {Artist}</li> {/block:Artist} {block:PlayCount} <li><span>Play count</span> {PlayCount}</li> {/block:PlayCount} </ul> <div id="player" class="width-{select:Post Width}"> {block:AudioEmbed} <div id="white-audio">{AudioEmbed color="white"}</div> <div id="black-audio">{AudioEmbed color="black"}</div> {/block:AudioEmbed} </div> </div> <div class="clear"></div> </div> {/block:Audio} {block:Chat} {block:Title} <a href="{Permalink}"><h3>{Title}</h3></a> {/block:Title} <ul id="chat"> {block:Lines} <li class="{Alt} user_{UserNumber}"> {block:Label} <span class="label">{Label}</span> {/block:Label} {Line} </li> {/block:Lines} </ul> {/block:Chat} {block:Video} <div id="video" class="width-{select:Post Width}"> {block:IndexPage} {Video-250} {/block:IndexPage} {block:PermalinkPage} <center>{Video-500}</center> {/block:PermalinkPage} </div> {/block:Video} {block:Answer} <div id="ask"> <div id="question"> <span>{Asker}</span> <p>{Question}</p> </div> <div id="answer"> <span {block:Answerer}style="display:none"{block:Answerer}>{Name}</span>{block:Answerer}{Answerer}{/block:Answerer} <p>{Answer}</p> </div> </div> {/block:Answer} </div> <!-- #post-container --> {block:Date}{block:IndexPage} {Block:IfShowPostCaptions}{block:Caption} <div id="caption" class="{select:Text Color} {select:Blog Information}"> <div id="background"></div>{Caption}</div>{/block:Caption} {/Block:IfShowPostCaptions} <div id="side-permalink" class="{block:Photo}photo{/block:Photo}"> <div class="right"> <a href="{Permalink}" class="day-month-year">{DayOfMonth}'{ShortMonth}</a> <a href="{Permalink}" class="permalink" title="Permalink Page" >Permalink</a> <a href="{ReblogURL}" class="reblog" target="_blank" title="Reblog">Reblog</a> <div class="clear"></div> </div> <div class="clear"></div> </div> {/block:IndexPage} {/block:Date} </div> <!-- #inner-post --> </div><!-- end #post --> {block:PermalinkPage} {block:Date} <div id="permalink-info"> {block:Caption} <div id="caption">{Caption}</div> {/block:Caption} {block:HasTags} <ul id="tag-list"> {block:Tags} <li> <a href="{TagURL}" target="_blank">#{Tag}</a> </li> {/block:Tags} <div class="clear"></div> </ul> {/block:HasTags} <ul id="info-list"> {block:NoteCount}<li><span></span>{NoteCountWithLabel}</li>{/block:NoteCount}<li><span>Posted </span>{DayOfMonthWithZero} {Month} {Year}</li>{block:RebloggedFrom}<li><span>source </span><a href="{ReblogRootURL}" target="_blank">{ReblogRootName}</a></li>{/block:RebloggedFrom}{block:ExternalAudio}<li><a href="{ExternalAudioURL}" target="_blank">Download</a><span>audio file</span></li>{/block:ExternalAudio} <div class="clear"></div> </ul> {block:PostNotes} <div id="notes"> <h2>Notes</h2> {PostNotes-64} </div> {/block:PostNotes} {/block:Date} {/block:PermalinkPage} <!--<div class="clear"></div>--> {/block:Posts} {block:Indexpage} {block:ifNotInfiniteScroll} {block:Pagination} <div id="post" class="pagination"> <div id="inner-post"> {block:PreviousPage} <a href="{PreviousPage}" class="prev icon-left-open"></a> {/block:PreviousPage} {block:NextPage} <a href="{NextPage}" class="next icon-right-open-1"></a> {/block:NextPage} <div id="jump"> {block:JumpPagination length="5"}{block:CurrentPage}<span class="current-page">{PageNumber}</span>{/block:CurrentPage}{block:JumpPage}<a class="jump-page" href="{URL}">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination} </div> <div class="clear"></div> </div> </div> {/block:Pagination} {/block:ifNotInfiniteScroll} {/block:Indexpage} </div> </div><!-- End content --> </div><!-- End center --> </div> {block:ifInfiniteScroll}{block:Pagination}<div class="nav">{block:NextPage}<a href="{NextPage}"></a>{/block:NextPage}</div>{/block:Pagination}{/block:ifInfiniteScroll} <script type="text/javascript" src="http://static.tumblr.com/8rdzlhn/YDQov5rq4/dtc.js"></script> <script type="text/javascript"> jQuery(function() { var $wallcenter = $('{block:Indexpage}#post-content{/block:Indexpage}'); $("#caption p").remove(":contains('Source:')"); $("#caption p").remove(":contains('(via')"); $("#post-content.center").imagesLoaded( function(){ $('#post-content').show(); $('#loading').hide(); $wallcenter.masonry({ itemSelector : '#post, #other-pages', columnWidth : {select:Post Width}, gutter : {select:Post Spacing}, isFitWidth: true }); }); $wallcenter.infinitescroll({ navSelector : ".nav", nextSelector : ".nav a", itemSelector : "#post", behavior : 'twitter', extraScrollPx: 50, bufferPx : 500, loading: { finishedMsg: '', msgText: '', img: 'http://static.tumblr.com/8rdzlhn/m3Hobrdkf/ajax-loader.gif', } }, function( newElements ) { $("#caption p").remove(":contains('Source:')"); $("#caption p").remove(":contains('(via')"); var $newElems = $( newElements ).css({ opacity: 0 }); $newElems.imagesLoaded(function(){ $newElems.animate({ opacity: 1 }); $wallcenter.masonry( "appended", $newElems, true ); }); $('.audio').each(function(){ var audioID = $(this).attr("id"); var $audioPost = $(this); $.ajax({ url: 'http://{BlogURL}.tumblr.com/api/read/json?id=' + audioID, dataType: 'jsonp', timeout: 50000, success: function(data){ $audioPost.find('#audio_player_'+audioID).replaceWith('<div style=\"background-color:#000000;\">' + data.posts[0]['audio-player'].replace("audio_player.swf", "audio_player_black.swf") +'</div>');} }); }); }); $(document).load(function(){ e.preventDefault(); $wallcenter.infinitescroll('retrieve'); }); }); {block:AskEnabled} $(".ask-trigger").click(function() { $("#ask-container").fadeToggle("700"); }); {/block:AskEnabled} {block:SubmissionsEnabled} $(".submit-trigger").click(function() { $("#submit-container").fadeToggle("700"); }); {/block:SubmissionsEnabled} $("#navi-trigger").click(function() { $("#navi").fadeToggle("300"); $("#navi #navi-box #navi-one").delay(200).slideToggle("400"); {block:IfShowDescription} $("#navi #navi-box #navi-two").delay(400).slideToggle("400"); {/block:IfShowDescription} $("#navi #navi-box #navi-three").delay(600).slideToggle("400"); {block:IfShowSocialIcons} $("#navi #navi-box #navi-four").delay(800).slideToggle("400"); {/block:IfShowSocialIcons} }); $(document).ready(function(){ $('#navi-trigger').click(function(){ $(this).toggleClass('open'); }); }); function Parallax(){sp = $(this).scrollTop();$("#header").css({"background-position":"50%"+(sp*.7)+"px"});$("#about").css({"opacity":1-(sp*.003),"top":235+(sp*.63)})};$(document).ready(function(){$(window).scroll(function(){Parallax()})}); // makes sure the whole site is loaded jQuery(window).load(function() { // will first fade out the loading animation jQuery(".spinner").fadeOut(); // will fade out the whole DIV that covers the website. jQuery("#preloader").delay(200).fadeOut(1500); }) </script> </body> </html>