div#qTip { font: 8px/10px Karla; color: {color:Body Font}; text-align: center; text-transform: uppercase; background: {color:Sidebar Background}; display: none; border: 1px solid {color:Border}; max-width: 350px; position: absolute; text-align: justify; z-index: 99; padding: 2px 4px; margin: -5px 0 0 20px; border-radius: 2px; letter-spacing: 1px; } .tmblr-iframe { top: 14px!important; right: 8px!important; position: fixed!important; opacity: 0.2!important; {block:IfInvertedControls} white-space: nowrap; -webkit-filter: invert(100%); filter: invert(100%); {block:IfInvertedControls} } body { font-family: Karla, Arial; color: {color:Body Font}; font-size: {select:Body Font Size}; background: {color:Background} url({image:Background}); {select:Background Type} line-height: 18px; } sub, sup, small { font-size: {select:Body Font Size}; } a { color: {color:Link}; text-decoration: none; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } a:hover { color: {color:Hover Link}; } h1 { font: normal 14px/14px Montserrat; text-align: center; width: calc(100% + 20px); margin-left: -10px; padding-bottom: 10px; border-bottom: 1px solid {color:Border}; color: {color:Title}; text-transform: lowercase; } #bar { height: 5px; width: 100%; position: fixed; z-index: 9; background: {color:Accent Two}; top: 0; left: 0; } nav#top { width: 25%; background: {color:Sidebar Background}; height: 40px; top: 5px; position: fixed; font-size: 8px; letter-spacing: 1px; border-bottom: 1px solid {color:Border}; text-transform: uppercase; } nav#top ul { padding: 0; margin: 0; text-align: center; } nav#top ul li { display: inline-block; list-style-type: none; line-height: 41px; padding-right: 25px; } nav#top ul li:last-of-type { padding: 0; } nav#top svg { width: 11px; height: 11px; fill: {color:Accent One}; margin-bottom: -3px; margin-right: 3px; } nav#top a { color: {color:Body Font}; } nav#top a:hover { color: {color:Accent Two}; } aside { background: {color:Sidebar Background}; width: 25%; height: 100%; position: fixed; top: 46px; display: table; border-right: 1px solid {color:Border}; } #content { margin: 0 auto; left: 0; right: 0; position: relative; text-align: justify; text-align-last: center; display: table-cell; vertical-align: middle; padding-bottom: 90px; } #avatar img { width: 120px; height: 120px; margin: 0 auto; position: relative; border-radius: 3px; padding: 2px; border: 1px solid {color:Border}; {select:Avatar Shape} } #title { font-size: 24px; text-transform: lowercase; letter-spacing: -1px; font-family: montserrat; line-height: 24px; width: 270px; margin: 0 auto; margin-top: 15px; margin-bottom: 2px; color: {color:Title}; } #subtitle { background: {color:Accent One}; background: -moz-linear-gradient(left, {color:Accent One} 0%, {color:Accent Two} 100%); background: -webkit-linear-gradient(left, {color:Accent One} 0%, {color:Accent Two} 100%); background: linear-gradient(to right, {color:Accent One} 0%, {color:Accent Two} 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='{color:Accent One}', endColorstr='{color:Accent Two}',GradientType=1 ); color: {color:Accent Font}; padding: 2px 5px; letter-spacing: 2px; border-radius: 2px; font-size: 8px; font-style: italic; text-transform: uppercase; display: inline; width: 270px; margin: 0 auto; } #description { border: 1px solid {color:Border}; padding: 0 12px; margin: 10px auto; width: 70%; } #description span { display: block; background: {color:Sidebar Background}; padding: 9px; position: relative; line-height: 16px; margin-top: -1px; margin-bottom: -1px; } nav#main { list-style-type: none; margin: 0 auto; padding: 0; width: 250px; } nav#main li { width: 100px; display: inline-block; text-transform: uppercase; font-size: 8px; letter-spacing: 1px; border-bottom: 1px solid {color:Border}; padding: 7px; margin-right: 7px; margin-top: -1px; } nav#main b { color: {color:Accent Two}; font-weight: bold; margin-right: 4px; } nav#main a { color: {color:Body Font}; } nav#main a:hover { color: {color:Accent One}; } #right-bar { height: 40px; top: 5px; position: fixed; width: 75%; left: 25%; background: {color:Sidebar Background}; border-bottom: 1px solid {color:Border}; border-left: 1px solid {color:Border}; z-index: 9; } #search { margin-left: 15px; margin-top: 10px; width: 180px; } #search input[type=text] { border: 1px solid {color:Border}; width: 150px; outline: none; padding: 2px 0 1px 0; font-family: Karla; border-radius: 2px; color: {color:Body Font}; line-height: 15px; font-size: 11px; background: {color:Background}; text-align: center; } #search button { float: right; background: none; outline: none; margin-left: 70px; border: none; cursor: pointer; margin-top: -20px; } #search button svg { width: 15px; height: 15px; fill: {color:Accent One}; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } #search button svg:hover { fill: {color:Accent Two}; } #wrap { width: 75%; left: 25%; top: 35px; padding-bottom: 35px; position: absolute; } #container { {block:IfMulticolumn} width: calc(({select:Post Size} * 2}) + ({text:Post Margin} * 4) + 44px); {/block:IfMulticolumn} {block:IfNotMulticolumn} width: calc({select:Post Size} + 20px + ({text:Post Margin} * 2)); {/block:IfNotMulticolumn} {block:PermalinkPage} width: 500px; {/block:PermalinkPage} margin: 0 auto; left: 0; right: 0; position: absolute; } #entries { {block:IndexPage} width: {select:Post Size}; {/block:IndexPage} {block:PermalinkPage} width: 500px; {/block:PermalinkPage} text-align: justify; margin-top: 60px; margin-bottom: 60px; } .post { width: {select:Post Size}; text-align: justify; background: {color:Post Background}; border: 1px solid {color:Border}; box-shadow:1px 1px 3px #bbb; padding: 10px; padding-bottom: 0; {block:IndexPage} {block:IfShowTags} margin: 0px {text:Post Margin} calc({text:Post Margin} + 30px); {/block:IfShowTags} {block:IfNotShowTags} margin: 0px {text:Post Margin} calc({text:Post Margin} + 10px); {/block:IfNotShowTags} {block:IfMulticolumn} opacity: 0; z-index: -1; {/block:IfMulticolumn} {/block:IndexPage} {block:PermalinkPage} margin: 0 auto; width: 500px; {/block:PermalinkPage} } .post-pad { height: 6px; } .post img { max-width: 100%; height: auto; {block:IndexPage} width: {select:Post Size}; {/block:IndexPage} {block:PermalinkPage} width: 100%; {/block:PermalinkPage} } .post blockquote { border-left: 1px solid {color:Border}; margin: -8px 10px 10px 10px; padding: 0 0 0 15px; } .caption { width: 100%; margin-left: -10px; border-top: 1px solid {color:Border}; padding: 0 10px; margin-top: 4px; } .video, .video iframe { height: auto; width: 100%; } .quote { text-align: justify; font-size: 18px; line-height:120%; font-style: italic; font-family:georgia; padding: 5px 0; } .quote::before {position:relative; top:24px; content:"❝ "; font-size: 64px; color: #8cc200;} .source { font-style: normal; font-size: {select:Body Font Size}; } .player { position: absolute; line-height: 0; z-index: 1; overflow: hidden; width: 27px; height: 27px; border-radius: 100%; margin-left: 26px; margin-top: 28px; } .art { width: 80px; height: 80px; position: absolute; z-index: 0; } .details { height: 55px; text-align: center; line-height: 15px; padding-top: 25px; margin-left: 80px; } .asker { margin-bottom: 10px; font-family: Montserrat; font-size: 13px; text-transform: lowercase; } .asker .avatar img { width: 20px; height: 20px; border-radius: 100%; float: left; margin-right: 7px; } .asker a, .asker { color: {color:Accent Two}; } .question { border-top: 1px solid {color:Border}; width: 100%; padding: 10px; margin-left: -10px; } #permalink { text-transform: uppercase; font-size: 8px; line-height: 13px; height: 13px; border-top: 1px solid {color:Border}; padding: 7px 0 7px 10px; letter-spacing: 1px; width: calc({select:Post Size} + 10px); margin-left: -10px; margin-top: 4px; } #permalink a { color: {color:Body Font}; } #permalink a:hover .time, .controls a:hover { background: {color:Accent Two}; } .time { background: {color:Accent One}; color: {color:Accent Font}; padding: 1px 2px 1px 4px; border-radius: 2px; margin-right: 2px; font-size: 8px; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .controls { -webkit-transition: all 0.5s ease; transition: all 0.5s ease; float: right; margin-top: -21px; margin-right: -1px; line-height: 20px; } .controls svg { width: 7px; height: 9px; overflow: visible; display: inline-block; border-radius: 100%; fill: {color:Accent Font}; text-shadow: 0 0; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; margin-left: 4px; margin-bottom: 1px; } .controls a { position: relative; background: {color:Accent One}; border-radius: 100%; width: 15px; height: 15px; display: inline-block; margin-right: 1px; } .controls .reblog svg { width: 7px; height: 7px; margin-bottom: 2px; margin-left: 4px; display: inline-block; } .controls .like .liked + svg path { fill: {color:Accent Two}; } .controls .like .like_button iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; opacity: 0; z-index: 2; } .perma-link { position:relative; display:inline-block;} .perma-link a { color:{color:Accent Two}; font-size:12px;} .perma-link a:hover {font-size:12px; color:{color:Accent One};} #permpage { text-transform: uppercase; text-align: center; margin-top: 5px; line-height: 16px; font-size: 9px; border-top: 1px solid {color:Border}; border-bottom: 1px solid {color:Border}; width: 520px; margin-left: -10px; padding: 10px 0; } .tags { text-transform: uppercase; text-align: center; position: absolute; font-size: 7px; border: 1px solid {color:Border}; padding: 7px 10px 7px 10px; letter-spacing: 1px; width: calc({select:Post Size} + 10px); margin-left: -11px; background:#ffffff; width: {select:Post Size}; letter-spacing: 1px; line-height: 11px; box-shadow:1px 1px 3px #bbb; } .tags a { color: {color:Body Font}; margin-right: 3px; } .tags a:last-of-type { margin: 0; } ol.notes { padding: 0; margin: 20px 0px; list-style-type: none; } ol.notes li.note { margin-bottom: 10px; } ol.notes li.note img.avatar { border-radius: 100%; vertical-align: -4px; margin-right: 10px; width: 16px; height: 16px; } .pagination { margin: 0 auto; text-align: center; position: relative; margin-top: 40px; display: block; font-size: 9px; {block:IfInfiniteScroll} display: none; {/block:IfInfiniteScroll} } .pagination a, .current_page { margin: 0 4px; display: inline-block; width: 20px; height: 20px; text-align: center; border-radius: 100%; color: {color:Body Font}; line-height: 20px; border: 1px solid {color:Border}; } .pagination a:hover { background: {color:Accent Two}; color: {color:Accent Font}; } .pagination svg { width: 10px; height: 10px; display: inline-block; fill: {color:Body Font}; margin-bottom: -2px; } .pagination a svg { margin-top: 5px; } .pagination a:hover svg { fill: {color:Accent Font}; } .current_page { background: {color:Accent One}; color: {color:Sidebar Background}; } ::selection { background: {color:Link}; color: #FFF; } #infscr-loading { opacity: 0; line-height: 0px; }