Skip to content

Instantly share code, notes, and snippets.

@chrisenytc
Created December 12, 2013 09:02
Show Gist options
  • Save chrisenytc/7925083 to your computer and use it in GitHub Desktop.
Save chrisenytc/7925083 to your computer and use it in GitHub Desktop.
Bella Tumblr Theme
<html>
<head>
<meta charset="utf-8">
<title>{Title}{block:PostSummary} - {PostSummary}{/block:PostSummary}</title>
<link rel="icon" href="{Favicon}"/>
{block:Description}<meta name="description" content="{MetaDescription}">{/block:Description}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}"/>
<!-- Appearance option -->
<meta name="color:Background" content="#ffffff"/>
<meta name="image:Background Image" content=""/>
<meta name="image:Profile Background" content=""/>
<meta name="color:Body Background" content="#363738"/>
<meta name="color:Text Color" content="#363738"/>
<meta name="text:External Link Title" content=""/>
<meta name="text:External Link URL" content=""/>
<meta name='text:Disqus Shortname' content='' />
<!-- STYLESheet -->
<style>
@import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700);
/* ==========================================================================
Theme: GAIA
Author: Awhin
Preview: http://gaia-theme.tumblr.com/
Version: 1.0
========================================================================== */
/* ==========================================================================
/* -- Micro Clearfix, Resets and Common Classes
========================================================================== */
/* Micro Clearfix */
.clear:before,
.clear:after {
content: "";
display: table;
}
.clear:after {
clear: both;
}
.clear {
zoom: 1;
}
.section:before,
.section:after {
content: "";
display: table;
}
.section:after {
clear: both;
}
.section {
zoom: 1;
}
.checkbox:before,
.checkbox:after {
content: "";
display: table;
}
.checkbox:after {
clear: both;
}
.checkbox {
zoom: 1;
}
/* General Resets */
/* Start font size at 100% */
html {
font-size: 100%;
}
/* Make all form fonts consistent */
button,
input,
select,
textarea {
font-family: sans-serif;
}
/* Remove default borders */
form,
fieldset,
a img {
border: 0;
}
/* Remove default spacing */
form,
fieldset {
margin: 0;
padding: 0;
}
/* Common Classes */
.left {
float: left;
}
.right {
float: right;
}
.block {
display: block;
}
.inline-block {
display: inline-block;
*zoom: 1;
*display: inline;
}
.inline {
display: inline;
}
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
left: -9999em;
}
.visuallyvisible {
clip: auto;
width: auto;
height: auto;
overflow: visible;
left: 0;
}
.strong {
font-weight: bold;
}
.alert {
background-color: #d64553;
color: #ffffff;
display: block;
padding: 4px 8px;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 0;
-webkit-border-top-left-radius: 0;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 0;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-topleft: 0;
border-top-right-radius: 3px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
-moz-background-clip: padding-box;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.nolist {
list-style: none;
}
.nopadding {
padding: 0;
}
.nomargin {
margin: 0;
}
.none,
.nodesktop {
display: none;
}
/* ==========================================================================
/* 1.0 - Document Setup (body, links, headings, code, tables, forms etc)
========================================================================== */
/* Body */
body {
font-family: PT Sans, Arial, sans-serif;
font-size: 16px;
font-size: 1rem;
line-height: 30px;
line-height: 1.875rem;
background-color: #ffffff;
color: #16202a;
margin: 0;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
/* Links */
a {
color: #16a085;
text-decoration: underline;
}
a:visited {
color: #16a085;
}
a:hover {
text-decoration: none;
}
a:active {
color: #333333;
}
/* 1.1 Headings - h1, h2, h3, h4, h5, h6 & other (if any)
========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
line-height: normal;
font-weight: normal;
}
h1,
.h1 {
font-size: 36px;
font-size: 2.25rem;
margin-bottom: 10px;
}
h2,
.h2 {
font-size: 32px;
font-size: 2rem;
margin-bottom: 8px;
}
h3,
.h3 {
font-size: 26px;
font-size: 1.625rem;
margin-bottom: 6px;
}
h4,
.h4 {
font-size: 24px;
font-size: 1.5rem;
margin-bottom: 4px;
}
.no-style-heading {
margin-bottom: 0;
font-size: 16px;
font-size: 1rem;
}
/* 1.2 Paragraphs, block quotes, code, pre, etc
========================================================================== */
small {
font-size: 12px;
font-size: 0.75rem;
}
/* Block Quotes, Pre and Code Blocks */
blockquote {
font-size: 20px;
font-size: 1.25rem;
line-height: 32px;
line-height: 2rem;
padding: 5px;
margin: 0;
font-family: PT Sans, Arial, sans-serif;
font-style: italic;
}
code {
padding: 2px 6px;
font-family: Monaco, Andale Mono, "Courier New", monospace;
font-size: 12px;
font-size: 0.75rem;
background-color: #dddddd;
border: 1px solid #7a7a7a;
line-height: normal;
color: #222222;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 0;
-webkit-border-top-left-radius: 0;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 0;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-topleft: 0;
border-top-right-radius: 3px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
-moz-background-clip: padding-box;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
/* Horizontal Rule */
hr {
border: 0;
background: none;
outline: 0;
height: 1px;
background-color: #dddddd;
margin: 2em 0;
}
/* 1.3 Tables
========================================================================== */
table {
width: 100%;
border-collapse: collapse;
border-left: 0;
background-color: #fff;
border-spacing: 0;
table-layout: fixed;
word-wrap: break-word;
-ms-word-wrap: break-word;
*white-space: normal;
}
table th,
table td {
padding: 8px;
line-height: 18px;
text-align: left;
vertical-align: top;
border-top: 1px solid #eeeeee;
}
table thead th {
vertical-align: bottom;
font-weight: bold;
background-color: #ffffff;
color: #222222;
}
table tfoot td {
font-weight: bold;
}
table caption {
padding: 0.5em;
font-style: italic;
background-color: #eeeeee;
border-bottom: 0;
font-weight: bold;
}
/* 1.4 Lists
========================================================================== */
ul {
list-style: disc;
padding: 0 0 0 25px;
margin: 0;
}
ol {
list-style: decimal;
padding: 0 0 0 25px;
margin: 0;
}
.text-right {
text-align: right;
}
/* ==========================================================================
/* 2.0 - Grid Layout (Responsive)
========================================================================== */
/* Sections & Content Blocks */
.section {
position: relative;
}
.row {
margin-bottom: 1em;
}
.container {
max-width: 940px;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
}
.container-full {
max-width: 960px;
margin: 0 auto;
}
/* Fluid Grid */
.col {
margin-left: 2%;
*margin-left: 1.7%;
float: left;
}
.col:first-child {
margin-left: 0;
}
/* Columns */
.one {
width: 6.5%;
}
.two {
width: 15%;
}
.three {
width: 23.5%;
}
.four {
width: 32%;
}
.five {
width: 40.5%;
}
.six {
width: 49.0%;
}
.seven {
width: 57.5%;
}
.eight {
width: 66%;
}
.nine {
width: 74.5%;
}
.ten {
width: 83%;
}
.eleven {
width: 91.5%;
}
.twelve {
width: 100%;
}
.quarter {
width: 23.5%;
}
.half {
width: 49.0%;
}
.one-third {
width: 32%;
}
/* ==========================================================================
/* -- Tablet Devices (Layout, Modifications, etc)
========================================================================== */
@media only screen and (min-width: 762px) and (max-width: 940px) {
.container {
width: 720px;
padding-left: 10px;
padding-right: 10px;
}
/* Tablet Grid
* For stacking full width columns, please use the new class .tablet-full
* New tablet columns have been added
*/
.tablet-one {
width: 6.5%;
}
.tablet-two {
width: 15%;
}
.tablet-three {
width: 23.5%;
}
.tablet-four {
width: 32%;
}
.tablet-five {
width: 40.5%;
}
.tablet-six {
width: 49.0%;
}
.tablet-seven {
width: 57.5%;
}
.tablet-eight {
width: 66%;
}
.tablet-nine {
width: 74.5%;
}
.tablet-ten {
width: 83%;
}
.tablet-eleven {
width: 91.5%;
}
.tablet-twelve {
width: 100%;
}
.tablet-full {
clear: both;
float: none;
width: 100%;
margin-left: 0;
margin-right: 0;
margin-top: 1em;
}
.tablet-full:first-child {
margin-top: 0;
}
.notablet {
display: none;
}
.showtablet {
display: block;
}
}
/* End Tablet Media Query */
/* ==========================================================================
/* -- Mobile Devices (Layout, Modifications, etc)
========================================================================== */
@media only screen and (max-width: 720px) {
/* Mobile Grid
* For stacking full width columns, please use the new class .mobile-full
* New mobile columns have been added
*/
.mobile-one {
width: 6.5%;
}
.mobile-two {
width: 15%;
}
.mobile-three {
width: 23.5%;
}
.mobile-four {
width: 32%;
}
.mobile-five {
width: 40.5%;
}
.mobile-six {
width: 49.0%;
}
.mobile-seven {
width: 57.5%;
}
.mobile-eight {
width: 66%;
}
.mobile-nine {
width: 74.5%;
}
.mobile-ten {
width: 83%;
}
.mobile-eleven {
width: 91.5%;
}
.mobile-twelve {
width: 100%;
}
.mobile-full {
clear: both;
float: none;
width: 100%;
margin: 1em 0 0 0;
}
.mobile-full:first-child {
margin-top: 0;
}
.container {
padding-left: 20px;
padding-right: 20px;
}
/* Mobile Tables */
table th,
table td {
padding: 4px;
}
/* Mobile Forms */
input[type=text],
input[type=password],
input[type=email],
input[type=search],
input[type=tel],
textarea {
width: 90%;
padding: 5%;
}
select {
width: 100%;
}
.nomobile {
display: none;
}
.showmobile {
display: block;
}
.two,
.three,
.four,
.five,
.six {
float: none;
width: 99%;
margin-bottom: 20px;
margin-left: 0;
}
}
/* End Mobile Media Query *//* 1.5 Forms, Labels and Inputs
========================================================================== */
.fieldset {
margin: 1.5em 0;
}
legend {
font-family: PT Sans, Arial, sans-serif;
font-size: 32px;
font-size: 2rem;
line-height: normal;
width: 100%;
display: block;
border: 0;
*margin-left: -5px;
}
label {
font-weight: bold;
cursor: pointer;
}
.inline-field label {
display: inline-block;
*zoom: 1;
*display: inline;
margin-right: 1em;
}
.field {
padding: 0.2em 0;
}
.field label {
display: block;
}
.checkbox {
display: block;
position: relative;
line-height: normal;
padding: 0.2em 0;
}
.checkbox label {
display: block;
overflow: hidden;
*zoom: 1;
}
.checkbox input[type=checkbox],
.checkbox input[type=radio] {
float: left;
top: -2px;
position: relative;
margin-right: 1em;
}
/* Inputs (Text, Search, Email, etc) */
input[type=text],
input[type=password],
input[type=email],
input[type=search],
input[type=tel],
input[type=file] {
outline: 0;
padding: 2px 3px;
height: 20px;
-webkit-appearance: none;
-moz-appearance: none;
vertical-align: middle;
font-size: 12px;
font-size: 0.75rem;
background-color: #ffffff;
color: #16202a;
border: 1px solid #040609;
resize: none;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-webkit-border-top-left-radius: 3px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 3px;
-moz-border-radius-topleft: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
-moz-background-clip: padding-box;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
}
input[type=file] {
border: 0;
height: 15px;
}
input[type=button]::-moz-focus-inner,
input[type=submit]::-moz-focus-inner,
input[type=reset]::-moz-focus-inner {
padding: 0;
border: 0;
}
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
}
input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input[type=file]:focus {
border-color: #090f15;
-webkit-transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
-moz-transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
-o-transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
input[type=submit],
input[type=button],
input[type=reset] {
line-height: normal;
cursor: pointer;
-webkit-appearance: none;
/* Remove Default Browser Behaviour for Safari */
-moz-appearance: none;
/* Remove Default Browser Behaviour for Firefox */
}
textarea {
font-size: 14px;
font-size: 0.875rem;
font-weight: bold;
background-color: #ffffff;
color: #16202a;
outline: 0;
vertical-align: top;
border: 2px solid #4b6c8e;
padding: 10px;
resize: none;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-webkit-border-top-left-radius: 3px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 3px;
-moz-border-radius-topleft: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
-moz-background-clip: padding-box;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-webkit-transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
-moz-transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
-o-transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
textarea:focus {
border-color: #1abc9c;
}
select {
font-size: 14px;
font-size: 0.875rem;
color: #7a7a7a;
outline: 0;
padding: 7px;
line-height: normal;
display: inline-block;
*zoom: 1;
*display: inline;
vertical-align: middle;
border: 2px solid #4b6c8e;
resize: none;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-webkit-border-top-left-radius: 3px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 3px;
-moz-border-radius-topleft: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
-moz-background-clip: padding-box;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
}
select[multiple] {
min-height: 100px;
border: 2px solid #4b6c8e;
vertical-align: top;
}
select,
input[type=text],
input[type=password],
input[type=email],
input[type=search],
input[type=tel] {
width: 280px;
}
textarea {
width: 260px;
}
table {
width: 100%;
border: 0;
color: #7a7a7a;
}
table th,
table td {
padding: 8px;
line-height: inherit;
border: 0;
}
table td p {
margin: 0;
padding: 0;
}
table th {
font-weight: 700;
background-color: #ffffff;
color: #d64553;
}
table tfoot td {
font-weight: 400;
}
table th {
width: 20%;
}
table td {
width: 80%;
}
@media only screen and (min-width: 762px) and (max-width: 940px) {
table th,
table td {
padding: 4px;
margin: 0;
font-size: 14px;
font-size: 0.875rem;
line-height: 30px;
line-height: 1.875rem;
}
}
@media only screen and (max-width: 720px) {
table th,
table td {
padding: 4px;
font-size: 12px;
font-size: 0.75rem;
line-height: 30px;
line-height: 1.875rem;
}
table td p {
font-weight: normal;
font-size: 12px;
font-size: 0.75rem;
line-height: 30px;
line-height: 1.875rem;
font-weight: 400;
margin: 0;
}
}
body {
color: #ffffff;
background: {color:Body Background} url('{image:Background Image}');
}
/* Links */
a {
color: #1abc9c;
text-decoration: none;
}
a:visited {
color: #1abc9c;
}
a:hover {
text-decoration: none;
color: #16a085;
}
a:active {
color: #d64553;
text-decoration: none;
}
h1,
h2,
h3,
h5 {
font-weight: 400;
text-transform: uppercase;
}
p {
font-size: 16px;
font-size: 1rem;
line-height: 30px;
line-height: 1.875rem;
font-weight: 300;
}
.navbar {
overflow: visible;
margin: 0 0 10px 0;
}
.navbar-inner {
min-height: 60px;
}
.navbar .container {
width: auto;
}
.nav {
list-style: none;
font-weight: normal;
}
.nav > li > a {
display: block;
}
.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
}
.navbar .nav {
position: relative;
left: 0;
display: block;
margin: 0;
float: right;
}
.navbar .nav > li {
float: left;
}
.navbar .nav > li > a {
float: none;
padding: 15px 15px 15px;
color: #bfbfbf;
text-decoration: none;
text-transform: uppercase;
}
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
color: #ffffff;
}
@media only screen and (min-width: 762px) and (max-width: 940px) {
.navbar .container {
width: auto;
padding: 0;
}
.nav {
font-size: 12px;
font-size: 0.75rem;
font-weight: 400;
}
}
@media only screen and (max-width: 720px) {
.navbar {
display: block;
position: static;
}
.navbar .nav {
font-size: 12px;
font-size: 0.75rem;
font-weight: 400;
padding: 0;
float: right;
}
.navbar .nav > li > a {
padding: 7.5px 10px 7.5px;
}
.navbar-inner {
margin-right: 2%;
}
}
.sidebar-container {
background: {color:Background};
color: {color:Text Color};
height: 100%;
position: fixed;
top: 0;
z-index: 1000;
}
.sidebar-content {
padding:10px;
text-align: center;
}
.sidebar-heading {
font-size: 18px;
font-size: 1.125rem;
font-weight: bold;
text-transform: uppercase;
}
.sidebar-about {
font-size: 14px;
font-size: 0.875rem;
line-height: 24px;
line-height: 1.5rem;
}
.sidebar-pic-background {
width: 80%;
height: 268px;
}
.sidebar-pic {
-webkit-border-top-right-radius: 100px;
-webkit-border-bottom-right-radius: 100px;
-webkit-border-bottom-left-radius: 100px;
-webkit-border-top-left-radius: 100px;
-moz-border-radius-topright: 100px;
-moz-border-radius-bottomright: 100px;
-moz-border-radius-bottomleft: 100px;
-moz-border-radius-topleft: 100px;
border-top-right-radius: 100px;
border-bottom-right-radius: 100px;
border-bottom-left-radius: 100px;
border-top-left-radius: 100px;
-moz-background-clip: padding-box;
-webkit-background-clip: padding-box;
background-clip: padding-box;
background-color: #1abc9c;
width: 90px;
height: 90px;
margin: -10px 0 15px;
}
.sidebar-nav {
text-align: center;
width: 60%;
}
ul.sidebar-nav {
list-style: none;
margin: 0px 0 40px 0px;
display: inline-block;
padding: 0;
}
ul.sidebar-nav li {
margin-top: 10px;
font-size: 14px;
font-size: 0.875rem;
}
ul.sidebar-nav li a {
background-color: #090f15;
border: 1px solid #202121;
font-weight: bold;
text-transform: uppercase;
color: #ffffff;
text-decoration: none;
padding: 3px;
display: block;
}
ul.sidebar-nav li a:hover,
ul.sidebar-nav li a:active {
background-color: #1abc9c;
border: 1px solid #1abc9c;
text-transform: uppercase;
color: #ffffff;
}
.sidebar-search i.icon-search {
position: relative;
right: 30px;
cursor: pointer;
color: #28425c;
font-size: 12px;
}
.sidebar-search .search-query {
margin-left: 5%;
padding: 4px 20px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 20px;
-moz-border-radius-topleft: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
border-top-left-radius: 20px;
-moz-background-clip: padding-box;
-webkit-background-clip: padding-box;
background-clip: padding-box;
width: 150px;
vertical-align: middle;
border: 0;
background-color: #111c27;
color: #ffffff;
}
@media only screen and (min-width: 762px) and (max-width: 940px) {
.sidebar-heading {
font-size: 14px;
font-size: 0.875rem;
}
.sidebar-about {
font-size: 12px;
font-size: 0.75rem;
line-height: 19px;
}
.sidebar-pic {
width: 40px;
height: 40px;
margin: 5px 0 5px;
}
.sidebar-nav {
text-align: center;
width: 60%;
}
ul.sidebar-nav {
margin: 0px 0 10px 0px;
}
ul.sidebar-nav li {
margin-top: 4px;
font-size: 12px;
font-size: 0.75rem;
}
ul.sidebar-nav li a {
font-weight: normal;
text-transform: uppercase;
padding: 0;
}
.sidebar-search i.icon-search {
top: 5px;
right: 25px;
font-size: 11px;
}
.sidebar-search .search-query {
margin-top: 10px;
margin-left: 15%;
width: 40%;
}
}
@media only screen and (max-width: 720px) {
.sidebar-container {
position: static;
z-index: auto;
top: 0;
margin: 0;
width: 100%;
}
.sidebar-heading {
font-size: 14px;
font-size: 0.875rem;
}
.sidebar-about {
font-size: 12px;
font-size: 0.75rem;
line-height: 20px;
}
.sidebar-pic {
width: 45px;
height: 45px;
margin: 5px 0 5px;
}
.sidebar-nav {
text-align: center;
width: 50%;
}
ul.sidebar-nav {
margin: 0px 0 30px 0px;
}
ul.sidebar-nav li {
margin-top: 7px;
font-size: 12px;
font-size: 0.75rem;
}
ul.sidebar-nav li a {
font-weight: normal;
text-transform: uppercase;
padding: 1px;
}
.sidebar-search i.icon-search {
display: none;
}
.sidebar-search .search-query {
margin-left: 0;
width: 42%;
margin-bottom: 20px;
}
}
.blog {
position: relative;
left: 23.5%;
width: 65.5%;
}
/* Timeline */
.timeline {
margin: 20px 20px 0 -15%;
padding: 0;
list-style: none;
position: relative;
}
.timeline:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 10px;
background: #1abc9c;
left: 20%;
margin-left: -10px;
}
.timeline > li {
position: relative;
margin: 0;
}
/* Notes*/
.timeline > li .notes {
text-align: right;
color: #aaaaaa;
margin: 10px 0 -20px 0;
}
.timeline > li .notes span,
.timeline > li .notes i {
margin: 0;
padding-left: 4px;
font-size: 13px;
font-size: 0.8125rem;
text-transform: uppercase;
}
.timeline > li .notes span a {
color: #aaaaaa;
text-decoration: none;
}
.timeline > li .notes span a:hover {
color: #c4c4c4;
}
/* Blog Post */
.timeline > li .timeline_label {
margin: 0 0 15px 25%;
background: #ffffff;
color: #28394b;
padding: 2em;
position: relative;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-topleft: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
-moz-background-clip: padding-box;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.timeline > li .timeline_label p {
font-size: 14px;
font-size: 0.875rem;
line-height: 24px;
line-height: 1.5rem;
}
.timeline > li .timeline_label p b {
color: #d64553;
}
.timeline > li .timeline_label p i {
color: #1abc9c;
}
.timeline > li .timeline_label .pic {
width: 100%;
}
.timeline > li .timeline_label h1,
.timeline_label h1 a {
margin: 0px;
padding: 0 0 5px 0;
border-bottom: 1px solid #e0e0e0;
font-size: 24px;
font-size: 1.5rem;
color: #39536d;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
}
.timeline > li .timeline_label:after {
right: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-right-color: #ffffff;
border-width: 10px;
top: 10px;
}
.timeline > li .timeline_label:last-child {
margin-bottom: 2.5em;
}
.timeline > li .timeline_label .video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.timeline > li .timeline_label .video-container iframe,
.timeline > li .timeline_label .video-container object,
.timeline > li .timeline_label .video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.timeline > li .timeline_label .audio-container {
margin: 0;
}
.timeline > li .timeline_label .audio-container iframe,
.timeline > li .timeline_label .audio-container object,
.timeline > li .timeline_label .audio-container embed {
width: 100%;
}
.timeline > li p.quote {
font-size: 18px;
font-size: 1.125rem;
line-height: 28px;
line-height: 1.75rem;
font-weight: bold;
font-style: italic;
color: #39536d;
}
.timeline > li p.author {
color: #d64553;
font-weight: bold;
font-size: 16px;
font-size: 1rem;
line-height: 30px;
line-height: 1.875rem;
}
.timeline > li blockquote {
font-size: 14px;
font-size: 0.875rem;
line-height: 24px;
line-height: 1.5rem;
font-style: normal;
margin: 1.50em 0.20em;
padding: 0.10em 40px;
position: relative;
color: #6086ac;
}
.timeline > li blockquote a {
color: #39536d;
font-weight: bold;
text-decoration: none;
}
.timeline > li blockquote a:hover {
color: #16202a;
}
.timeline > li blockquote p {
margin: 0;
}
.timeline > li blockquote:before {
display: block;
content: "\201C";
font-size: 106px;
font-size: 6.625rem;
position: absolute;
left: 0;
top: 25px;
color: #1abc9c;
}
.timeline > li .separator {
width: 100%;
height: 7px;
background: #ffffff url(http://static.tumblr.com/dpngoqb/nC3mub7it/sep.png) repeat-x;
}
.timeline > li .userpic {
float: left;
width: 30px;
height: 30px;
-webkit-border-top-right-radius: 100px;
-webkit-border-bottom-right-radius: 100px;
-webkit-border-bottom-left-radius: 100px;
-webkit-border-top-left-radius: 100px;
-moz-border-radius-topright: 100px;
-moz-border-radius-bottomright: 100px;
-moz-border-radius-bottomleft: 100px;
-moz-border-radius-topleft: 100px;
border-top-right-radius: 100px;
border-bottom-right-radius: 100px;
border-bottom-left-radius: 100px;
border-top-left-radius: 100px;
-moz-background-clip: padding-box;
-webkit-background-clip: padding-box;
background-clip: padding-box;
margin: 0 10px 10px 0;
}
.timeline > li .ask {
padding: 10px;
font-size: 14px;
font-size: 0.875rem;
line-height: 24px;
line-height: 1.5rem;
background-color: #f6f7f7;
position: relative;
color: #16202a;
margin-top: 25px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 20px;
-moz-border-radius-topleft: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
border-top-left-radius: 20px;
-moz-background-clip: padding-box;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border-bottom: 1px solid #eceded;
}
.timeline > li .ask:after {
bottom: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.timeline > li .ask:after {
border-bottom-color: #f6f7f7;
border-width: 10px;
left: 5%;
margin-left: -10px;
}
.timeline > li a.username {
color: #d64553;
}
/* Icons, Reblog, Like */
.timeline > li .timeline_icon {
width: 40px;
height: 40px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
font-size: 1.4em;
line-height: 40px;
-webkit-font-smoothing: antialiased;
position: absolute;
color: #ffffff;
background: #1abc9c;
border-radius: 50%;
box-shadow: 0 0 0 8px #148f77;
text-align: center;
left: 20%;
top: 0;
margin: 0 0 0 -25px;
}
.timeline > li .timeline_like {
width: 30px;
height: 30px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
font-size: 1em;
line-height: 33px;
-webkit-font-smoothing: antialiased;
position: absolute;
color: #ffffff;
background: #d64553;
border-radius: 50%;
box-shadow: 0 0 0 6px #be2a38;
text-align: center;
left: 20%;
top: 0;
margin: 60px 0 0 -20px;
}
.timeline > li .timeline_like:hover {
background: #db5a66;
box-shadow: 0 0 0 6px #d13040;
}
.timeline > li .timeline_like a,
.timeline > li .timeline_like a:visited,
.timeline > li .timeline_like a:hover,
.timeline > li .timeline_like a:active {
color: #ffffff;
}
.timeline > li .timeline_reblog {
width: 30px;
height: 30px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
font-size: 1em;
line-height: 33px;
-webkit-font-smoothing: antialiased;
position: absolute;
color: #ffffff;
background: #16202a;
border-radius: 50%;
box-shadow: 0 0 0 6px #0d1319;
text-align: center;
left: 20%;
top: 0;
margin: 110px 0 0 -20px;
}
.timeline > li .timeline_reblog:hover {
background: #28394b;
box-shadow: 0 0 0 6px #0f161d;
}
.timeline > li .timeline_reblog a,
.timeline > li .timeline_reblog a:visited,
.timeline > li .timeline_reblog a:hover,
.timeline > li .timeline_reblog a:active {
color: #ffffff;
}
.timeline > li .timeline_disqus {
margin: 0 0 15px 25%;
background: #ffffff;
color: #28394b;
padding: 2em;
position: relative;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-topleft: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
-moz-background-clip: padding-box;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.timeline > li .timeline_disqus:after {
left: 10px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-bottom-color: #ffffff;
border-width: 10px;
top: -20px;
bottom: 100%;
}
.timeline > li .timeline_prev {
width: 20px;
height: 20px;
font-style: normal;
font-weight: bold;
font-variant: normal;
text-transform: none;
font-size: 12px;
font-size: 0.75rem;
line-height: 20px;
-webkit-font-smoothing: antialiased;
position: absolute;
color: #ffffff;
background: #1abc9c;
border-radius: 50%;
box-shadow: 0 0 0 6px #148f77;
text-align: center;
left: 20%;
top: 0;
margin: -20px 0 0 -15px;
}
.timeline > li .timeline_prev a,
.timeline > li .timeline_prev a:hover,
.timeline > li .timeline_prev a:active,
.timeline > li .timeline_prev a:visited {
color: #ffffff;
}
.timeline > li .timeline_next {
width: 20px;
height: 20px;
font-style: normal;
font-weight: bold;
font-variant: normal;
text-transform: none;
font-size: 12px;
font-size: 0.75rem;
line-height: 20px;
-webkit-font-smoothing: antialiased;
position: absolute;
color: #ffffff;
background: #1abc9c;
border-radius: 50%;
box-shadow: 0 0 0 6px #148f77;
text-align: center;
left: 20%;
top: 0;
margin: 20px 0 0 -15px;
}
.timeline > li .timeline_next a,
.timeline > li .timeline_next a:hover,
.timeline > li .timeline_next a:active,
.timeline > li .timeline_next a:visited {
color: #ffffff;
}
.timeline > li .timeline_prev:hover,
.timeline > li .timeline_next:hover {
background: #1dd2af;
box-shadow: 0 0 0 6px #17a689;
}
.timeline > li .timeline_end {
width: 10px;
height: 10px;
line-height: 20px;
position: absolute;
background: #16a085;
border-radius: 50%;
box-shadow: 0 0 0 4px #107360;
text-align: center;
left: 20%;
top: 0;
margin: 5px 0 0 -10px;
}
.timeline > li .credits {
color: #a9c1da;
font-weight: 300;
text-transform: uppercase;
font-size: 14px;
font-size: 0.875rem;
text-align: center;
margin: 0 0 20px 25%;
position: relative;
padding-top: 5px;
}
.timeline > li .credits a {
color: #a9c1da;
text-decoration: none;
}
.timeline > li .credits a:hover {
text-decoration: underline;
}
.timeline > li ul.tags {
margin-bottom: 20px;
list-style: none;
text-align: right;
}
.timeline > li .tags li {
display: inline;
margin: 0 5px 5px 0;
}
.timeline > li .tags li a,
.timeline > li .tags li a:visited,
.timeline > li .tags li a:active {
color: #16a085;
background-color: #edf1f5;
border: 1px solid #dddddd;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-topleft: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
-moz-background-clip: padding-box;
-webkit-background-clip: padding-box;
background-clip: padding-box;
font-size: 11px;
font-size: 0.6875rem;
text-decoration: none;
padding: 4px;
}
.timeline > li .tags li a:hover {
background-color: #f3f6f9;
border: 1px solid #eaeaea;
color: #1abc9c;
}
@media only screen and (min-width: 762px) and (max-width: 940px) {
.blog {
position: relative;
left: 23.5%;
margin-left: 32.75px;
width: 70%;
}
.timeline {
margin: 20px 20px 0 -20%;
}
.timeline > li .timeline_time span {
font-size: 14px;
font-size: 0.875rem;
}
.timeline > li .timeline_label {
margin: 0 0 15px 27%;
}
.timeline > li .timeline_label p {
font-size: 13px;
font-size: 0.8125rem;
line-height: 23px;
line-height: 1.4375rem;
}
.timeline > li .timeline_label h1,
.timeline_label h1 a {
font-size: 20px;
font-size: 1.25rem;
}
.timeline > li p.quote {
font-size: 16px;
font-size: 1rem;
line-height: 26px;
line-height: 1.625rem;
}
.timeline > li p.author {
font-size: 14px;
font-size: 0.875rem;
line-height: 24px;
line-height: 1.5rem;
}
.timeline > li blockquote {
font-size: 13px;
font-size: 0.8125rem;
line-height: 23px;
line-height: 1.4375rem;
margin: 0.3em 0.3em;
padding: 0.20em 30px;
}
.timeline > li blockquote:before {
font-size: 86px;
font-size: 5.375rem;
top: 20px;
}
.timeline > li .ask {
font-size: 13px;
font-size: 0.8125rem;
}
.timeline > li .timeline_label .audio-container {
position: relative;
padding-bottom: 21.25%;
padding-top: 30px;
height: auto;
overflow: hidden;
margin: 0;
}
}
@media only screen and (max-width: 720px) {
.blog {
position: static;
margin-left: 10%;
width: 89%;
}
.timeline {
position: relative;
margin: 0;
left: -5%;
}
.timeline:before {
display: none;
}
.timeline > li .timeline_icon {
position: relative;
float: none;
left: auto;
width: 30px;
height: 30px;
font-size: 1em;
line-height: 28px;
margin: 0 0 25px 14px;
}
.timeline > li .timeline_like {
left: 16%;
top: 0;
margin: 1px 0 0 0;
}
.timeline > li .timeline_reblog {
left: 28%;
top: 0;
margin: 1px 0 0 0;
}
.timeline > li .notes {
margin: 10px 0 0 0;
}
.timeline > li .notes span,
.timeline > li .notes i {
padding-left: 4px;
font-size: 10px;
font-size: 0.625rem;
}
.timeline > li .timeline_label {
margin: 30px 0 30px 0;
padding: 1em;
font-weight: 400;
}
.timeline > li .timeline_label:after {
right: auto;
left: 17px;
border-right-color: transparent;
border-bottom-color: #ffffff;
top: -20px;
}
.timeline > li .timeline_label p {
font-size: 13px;
font-size: 0.8125rem;
line-height: 21px;
line-height: 1.3125rem;
}
.timeline > li .timeline_label h1,
.timeline_label h1 a {
font-size: 17px;
font-size: 1.0625rem;
}
.timeline > li blockquote {
font-size: 13px;
font-size: 0.8125rem;
line-height: 21px;
line-height: 1.3125rem;
margin: 0.1em 0.2em;
padding: 0.20em 25px;
}
.timeline > li blockquote:before {
font-size: 61px;
font-size: 3.8125rem;
top: 15px;
}
.timeline > li p.quote {
font-size: 14px;
font-size: 0.875rem;
line-height: 22px;
line-height: 1.375rem;
}
.timeline > li p.author {
font-size: 12px;
font-size: 0.75rem;
line-height: 20px;
line-height: 1.25rem;
}
.timeline > li .ask {
font-size: 12px;
font-size: 0.75rem;
line-height: 20px;
line-height: 1.25rem;
}
.timeline > li .ask:after {
left: 10%;
margin-left: 0;
}
.timeline > li .timeline_prev {
float: left;
left: 0;
top: 0;
position: static;
margin: -20px 0 0 0;
}
.timeline > li .timeline_next {
position: static;
float: right;
left: 0;
top: 0;
margin: -20px 0 0 0;
clear: both;
}
.timeline > li .timeline_end {
display: none;
}
.timeline > li .credits {
position: static;
display: block;
margin: auto;
padding: 5px 0 5px 0;
font-size: 12px;
font-size: 0.75rem;
}
.timeline > li .timeline_label .audio-container {
position: relative;
padding-bottom: 40%;
padding-top: 30px;
height: auto;
overflow: hidden;
margin: 0;
}
}
@media only screen and (max-width: 430px) {
.timeline > li:first-child {
margin-top: 10%;
}
.timeline > li .timeline_icon,
.timeline > li .timeline_icon:hover {
background-color: #16202a;
-webkit-box-shadow: 0 0 0;
-moz-box-shadow: 0 0 0;
box-shadow: 0 0 0;
font-size: 1em;
}
.timeline > li .timeline_like,
.timeline > li .timeline_like:hover {
background-color: #16202a;
-webkit-box-shadow: 0 0 0;
-moz-box-shadow: 0 0 0;
box-shadow: 0 0 0;
font-size: 1em;
}
.timeline > li .timeline_reblog,
.timeline > li .timeline_reblog:hover {
background-color: #16202a;
-webkit-box-shadow: 0 0 0;
-moz-box-shadow: 0 0 0;
box-shadow: 0 0 0;
font-size: 1em;
}
}
/**
* BxSlider v4.0 - Fully loaded, responsive content slider
* http://bxslider.com
*
* Written by: Steven Wanderski, 2012
* http://stevenwanderski.com
* (while drinking Belgian ales and listening to jazz)
*
* CEO and founder of bxCreative, LTD
* http://bxcreative.com
*/
/** RESET AND LAYOUT
===================================*/
.bx-wrapper {
position: relative;
margin: 0 0 20px 0;
padding: 0;
*zoom: 1;
height: auto;
}
.bx-wrapper img {
width: 100%;
display: block;
}
/** THEME
===================================*/
.bx-wrapper .bx-viewport {
background: #ffffff;
}
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
display: none;
}
/* LOADER */
.bx-wrapper .bx-loading {
min-height: 50px;
background: url(images/bx_loader.gif) center center no-repeat #ffffff;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2000;
}
/* PAGER */
.bx-wrapper .bx-pager {
display: none;
}
.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
display: none;
}
/* DIRECTION CONTROLS (NEXT / PREV) */
.bx-wrapper .bx-prev {
left: 0;
background-color: #16202a;
color: #ffffff;
-moz-opacity: 0.6;
-khtml-opacity: 0.6;
-webkit-opacity: 0.6;
opacity: 0.6;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);
filter: alpha(opacity=60);
text-align: center;
font-size: 30px;
font-size: 1.875rem;
}
.bx-wrapper .bx-next {
right: 1px;
background-color: #16202a;
color: #ffffff;
-moz-opacity: 0.6;
-khtml-opacity: 0.6;
-webkit-opacity: 0.6;
opacity: 0.6;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);
filter: alpha(opacity=60);
text-align: center;
font-size: 30px;
font-size: 1.875rem;
}
.bx-wrapper .bx-prev:hover {
-moz-opacity: 1;
-khtml-opacity: 1;
-webkit-opacity: 1;
opacity: 1;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
filter: alpha(opacity=100);
}
.bx-wrapper .bx-next:hover {
-moz-opacity: 1;
-khtml-opacity: 1;
-webkit-opacity: 1;
opacity: 1;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
filter: alpha(opacity=100);
}
.bx-wrapper .bx-controls-direction a {
position: absolute;
top: 40%;
outline: 0;
padding-top: 5px;
width: 40px;
height: 40px;
z-index: 9999;
text-decoration: none;
}
.bx-wrapper .bx-controls-direction a.disabled {
display: none;
}
/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
text-align: left;
width: 80%;
}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
right: 0;
width: 35px;
}
/* IMAGE CAPTIONS */
.bx-wrapper .bx-caption {
position: absolute;
bottom: 0;
left: 0;
background-color: #16202a;
width: 100%;
font-family: PT Sans, Arial, sans-serif;
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
-webkit-opacity: 0.7;
opacity: 0.7;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
filter: alpha(opacity=70);
}
.bx-wrapper .bx-caption span {
color: #ffffff;
display: block;
font-size: 16px;
font-size: 1rem;
font-weight: 400;
padding: 10px;
}
/** Responsive Captions and Controls
===================================*/
@media only screen and (min-width: 762px) and (max-width: 940px) {
.bx-wrapper .bx-caption span {
font-size: 14px;
font-size: 0.875rem;
font-weight: 400;
padding: 0 10px 5px 10px;
}
.bx-wrapper .bx-controls-direction a {
padding-top: 0;
width: 20px;
height: 33px;
top: 40%;
}
.bx-wrapper .bx-prev {
font-size: 20px;
font-size: 1.25rem;
}
.bx-wrapper .bx-next {
font-size: 20px;
font-size: 1.25rem;
}
}
@media only screen and (max-width: 720px) {
.bx-wrapper .bx-caption span {
font-size: 12px;
font-size: 0.75rem;
font-weight: 400;
padding: 0 5px 2px 5px;
}
.bx-wrapper .bx-controls-direction a {
padding-top: 0;
width: 20px;
height: 32px;
top: 35%;
}
.bx-wrapper .bx-prev {
font-size: 18px;
font-size: 1.125rem;
}
.bx-wrapper .bx-next {
font-size: 18px;
font-size: 1.125rem;
}
}
</style>
<style>
{CustomCSS}
</style>
<!-- FONT ICONS -->
<link rel="stylesheet" href="http://static.tumblr.com/dpngoqb/jrGmmjd99/fontello.css">
<link rel="stylesheet" href="http://static.tumblr.com/dpngoqb/FNGmmjd9t/fontello-embedded.css">
</head>
<body>
<!-- CONTENT-->
<div class="row">
<!-- SIDEBAR-->
<div class="col three sidebar-container">
<div class="sidebar-content">
<section id="#about">
<img src="{image:Profile Background}" class="sidebar-pic-background" alt="profile background">
<img src="{PortraitURL-128}" class="sidebar-pic" alt="userpic">
<h1 class="sidebar-heading">{Title}</h1>
{block:Description}<p class="sidebar-about">{Description}</p>{/block:Description}
</section>
<section id="#nav">
<ul class="sidebar-nav">
<li><a href="/">Home</a></li>
<li><a href="/random">Random</a></li>
{block:HasPages}{block:Pages}<li><a href="{URL}">{Label}</a></li> {/block:Pages}{/block:HasPages}
{block:ifExternalLinkURL}<li><a href="{text:External Link URL}">{text:External Link Title}
</a></li>{/block:ifExternalLinkURL}
</ul>
</section>
<section id="#search">
<form class="sidebar-search">
<input type="text" class="search-query" placeholder="Search" name="q" value="{SearchQuery}"> <i
class="icon-search"></i>
</form>
</section>
</div> <!-- sidebar-content -->
</div>
<!-- BLOG-->
<div class="col nine blog">
<!--NAVIGATION-->
<div class="navbar clearfix">
<div class="navbar-inner">
<ul class="nav">
<li><a href="/"><i class="icon-home"></i> Home</a></li>
<li><a href="/archive"><i class="icon-drive"></i> Archive</a></li>
{block:AskEnabled}<li><a href="/ask"><i class="icon-mail-alt"></i> Ask</a></li>{/block:AskEnabled}
{block:SubmissionsEnabled}<li><a href="/submit"><i class="icon-star"></i> Submit</a></li>
{/block:SubmissionsEnabled}
<li><a href="{RSS}"><i class="icon-rss"></i> Feed</a></li>
</ul>
</div>
</div> <!-- end of navbar-->
<ul class="timeline clearfix">
{block:Posts}
{Block:Photo}
<!-- ==========================================================================
IMAGE POST
========================================================================== */
-->
<li>
<div class="timeline_icon"><i class="icon-picture-1"></i></div>
<div class="timeline_like">{LikeButton color="white" size="14"}</div>
<div class="timeline_reblog"><p style="margin:2px 0 0 6px;";>{ReblogButton color="white" size="18"}</a></p></a></div>
<div class="timeline_label">
{LinkOpenTag}<img src="{PhotoURL-500}" class="pic" alt="{PhotoAlt}">{LinkCloseTag}
{block:Caption}<p>{Caption}</p> {/block:Caption}
{block:HasTags}
<ul class="tags">
{block:Tags}<li><a href="{TagURL}">#{Tag}</a></li> {/block:Tags}
</ul>
{/block:HasTags}
<div class="separator"></div>
<div class="notes">
{block:Date}<span><i class="icon-clock"></i> <a href="{Permalink}">{DayOfMonth} {DayOfMonthSuffix} {ShortMonth} {ShortYear}</a></span>
{/block:Date}
{block:NoteCount} <span> <i class="icon-star"></i><a href="{Permalink}">{NoteCountWithLabel} </a></span> {/block:NoteCount}
<span><i class="icon-user"></i> posted by <a href="{PostAuthorURL}">{PostAuthorName}</a></span>
{block:IfDisqusShortname}<span><i class="icon-comment-1"></i> <a class="dsq-comment-count" href="{Permalink}#disqus_thread">Comments</a></span> {/block:IfDisqusShortname}
</div>
</div>
</li>
{/Block:Photo}
{block:Panorama}
<!-- ==========================================================================
PANORAMA POST
========================================================================== */
-->
<li>
<div class="timeline_icon"><i class="icon-picture-1"></i></div>
<div class="timeline_like">{LikeButton color="white" size="14"}</div>
<div class="timeline_reblog"><p style="margin:2px 0 0 6px;";>{ReblogButton color="white" size="18"}</a></p></a></div>
<div class="timeline_label">
{LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}">{LinkCloseTag}
{block:Caption}<p>{Caption}</p> {/block:Caption}
{block:HasTags}
<ul class="tags">
{block:Tags}<li><a href="{TagURL}">#{Tag}</a></li> {/block:Tags}
</ul>
{/block:HasTags}
<div class="separator"></div>
<div class="notes">
{block:Date}<span><i class="icon-clock"></i> <a href="{Permalink}">{DayOfMonth}{DayOfMonthSuffix} {ShortMonth} {ShortYear}</a></span>
{/block:Date}
{block:NoteCount} <span> <i class="icon-star"></i><a href="{Permalink}">{NoteCountWithLabel}</a></span> {/block:NoteCount}
<span><i class="icon-user"></i> posted by <a href="{PostAuthorURL}">{PostAuthorName}</a></span>
{block:IfDisqusShortname}<span><i class="icon-comment-1"></i> <a class="dsq-comment-count" href="{Permalink}#disqus_thread">Comments</a></span> {/block:IfDisqusShortname}
</div>
</div>
</li>
{/block:Panorama}
{block:Photoset}
<!-- ==========================================================================
PHOTOSET POST
========================================================================== */
-->
<li>
<div class="timeline_icon"><i class="icon-picture"></i></div>
<div class="timeline_like">{LikeButton color="white" size="14"}</div>
<div class="timeline_reblog"><p style="margin:2px 0 0 6px;";>{ReblogButton color="white" size="18"}</a></p></a></div>
<div class="timeline_label">
<section id="slider">
<div class="bx-wrapper" style="max-width: 100%;">
<div class="bx-viewport">
<ul class="bxslider" style="width: auto%; position: relative; margin: 0; -webkit-margin-before: 0; -webkit-padding-start: 0; -webkit-margin-after: 0; list-style-type: none;">
{block:Photos} <li>
<img src="{PhotoURL-500}" alt="{PhotoAlt}">
{block:Caption} <div class="bx-caption">
<span> {Caption}</span>
</div>{/block:Caption}
</li>{/block:Photos}
</ul>
</div>
</div>
</section>
{block:Caption}{Caption}{/block:Caption}
{block:HasTags}
<ul class="tags">
{block:Tags}<li><a href="{TagURL}">#{Tag}</a></li> {/block:Tags}
</ul>
{/block:HasTags}
<div class="separator"></div>
<div class="notes">
{block:Date}<span><i class="icon-clock"></i> <a href="{Permalink}">{DayOfMonth}{DayOfMonthSuffix} {ShortMonth} {ShortYear}</a></span>
{/block:Date}
{block:NoteCount} <span> <i class="icon-star"></i><a href="{Permalink}">{NoteCountWithLabel}</a></span> {/block:NoteCount}
<span><i class="icon-user"></i> posted by <a href="{PostAuthorURL}">{PostAuthorName}</a></span>
{block:IfDisqusShortname}<span><i class="icon-comment-1"></i> <a class="dsq-comment-count" href="{Permalink}#disqus_thread">Comments</a></span> {/block:IfDisqusShortname}
</div>
</div>
</li>
{/block:Photoset}
{block:Text}
<!-- ==========================================================================
TEXT POST
========================================================================== */
-->
<li>
<div class="timeline_icon"><i class="icon-align-left"></i></div>
<div class="timeline_like">{LikeButton color="white" size="14"}</div>
<div class="timeline_reblog"><p style="margin:2px 0 0 6px;";>{ReblogButton color="white" size="18"}</a></p></a></div>
<div class="timeline_label">
{block:Title}<h1><a href="{Permalink}">{Title}</a></h1>
{/block:Title}
{Body}
{block:HasTags}
<ul class="tags">
{block:Tags}<li><a href="{TagURL}">#{Tag}</a></li> {/block:Tags}
</ul>
{/block:HasTags}
<div class="separator"></div>
<div class="notes">
{block:Date}<span><i class="icon-clock"></i> <a href="{Permalink}">{DayOfMonth}{DayOfMonthSuffix} {ShortMonth} {ShortYear}</a></span>
{/block:Date}
{block:NoteCount} <span> <i class="icon-star"></i><a href="{Permalink}">{NoteCountWithLabel}</a></span> {/block:NoteCount}
<span><i class="icon-user"></i> posted by <a href="{PostAuthorURL}">{PostAuthorName}</a></span>
{block:IfDisqusShortname}<span><i class="icon-comment-1"></i> <a class="dsq-comment-count" href="{Permalink}#disqus_thread">Comments</a></span> {/block:IfDisqusShortname}
</div>
</div>
</li>
{/block:Text}
{block:Quote}
<!-- ==========================================================================
QUOTE POST
========================================================================== */
-->
<li>
<div class="timeline_icon"><i class="icon-quote"></i></div>
<div class="timeline_like">{LikeButton color="white" size="14"}</div>
<div class="timeline_reblog"><p style="margin:2px 0 0 6px;";>{ReblogButton color="white" size="18"}</a></p></a></div>
<div class="timeline_label">
<p class="quote">{Quote}</p>
{block:Source}<p class="author"><i class="icon-right-open-mini"></i>{Source}</p>
{/block:Source}
{block:HasTags}
<ul class="tags">
{block:Tags}<li><a href="{TagURL}">#{Tag}</a></li> {/block:Tags}
</ul>
{/block:HasTags}
<div class="separator"></div>
<div class="notes">
{block:Date}<span><i class="icon-clock"></i> <a href="{Permalink}">{DayOfMonth}{DayOfMonthSuffix} {ShortMonth} {ShortYear}</a></span>
{/block:Date}
{block:NoteCount} <span> <i class="icon-star"></i><a href="{Permalink}">{NoteCountWithLabel}</a></span> {/block:NoteCount}
<span><i class="icon-user"></i> posted by <a href="{PostAuthorURL}">{PostAuthorName}</a></span>
{block:IfDisqusShortname}<span><i class="icon-comment-1"></i> <a class="dsq-comment-count" href="{Permalink}#disqus_thread">Comments</a></span> {/block:IfDisqusShortname}
</div>
</div>
</li>
{/block:Quote}
{block:Video}
<!-- ==========================================================================
VIDEO POST
========================================================================== */
-->
<li>
<div class="timeline_icon"><i class="icon-video"></i></div>
<div class="timeline_like">{LikeButton color="white" size="14"}</div>
<div class="timeline_reblog"><p style="margin:2px 0 0 6px;";>{ReblogButton color="white" size="18"}</a></p></a></div>
<div class="timeline_label">
<div class="video-container">{Video-500}</div>
{block:Caption}{Caption}{/block:Caption}
{block:HasTags}
<ul class="tags">
{block:Tags}<li><a href="{TagURL}">#{Tag}</a></li> {/block:Tags}
</ul>
{/block:HasTags}
<div class="separator"></div>
<div class="notes">
{block:Date}<span><i class="icon-clock"></i> <a href="{Permalink}">{DayOfMonth}{DayOfMonthSuffix} {ShortMonth} {ShortYear}</a></span> {/block:Date}
{block:NoteCount} <span> <i class="icon-star"></i><a href="{Permalink}">{NoteCountWithLabel}</a></span> {/block:NoteCount}
<span><i class="icon-user"></i> posted by <a href="{PostAuthorURL}">{PostAuthorName}</a></span>
{block:IfDisqusShortname}<span><i class="icon-comment-1"></i> <a class="dsq-comment-count" href="{Permalink}#disqus_thread">Comments</a></span> {/block:IfDisqusShortname}
</div>
</div>
</li>
{/block:Video}
{block:Chat}
<!-- ==========================================================================
CHAT POST
========================================================================== */
-->
<li>
<div class="timeline_icon"><i class="icon-chat"></i></div>
<div class="timeline_like">{LikeButton color="white" size="14"}</div>
<div class="timeline_reblog"><p style="margin:2px 0 0 6px;";>{ReblogButton color="white" size="18"}</a></p></a></div>
<div class="timeline_label">
{block:Title}
<h1><a href="{Permalink}">{Title}</a></h1>
{/block:Title}
<table>
{block:Lines}
<tr>
<th>{block:Label}{Label}{/block:Label}</th>
<td><p>{Line}</p></td>
</tr>
{/block:Lines}
</table>
{block:HasTags}
<ul class="tags">
{block:Tags}<li><a href="{TagURL}">#{Tag}</a></li> {/block:Tags}
</ul>
{/block:HasTags}
<div class="separator"></div>
<div class="notes">
{block:Date}<span><i class="icon-clock"></i> <a href="{Permalink}">{DayOfMonth}{DayOfMonthSuffix} {ShortMonth} {ShortYear}</a></span> {/block:Date}
{block:NoteCount} <span> <i class="icon-star"></i><a href="{Permalink}">{NoteCountWithLabel}</a></span> {/block:NoteCount}
<span><i class="icon-user"></i> posted by <a href="{PostAuthorURL}">{PostAuthorName}</a></span>
{block:IfDisqusShortname}<span><i class="icon-comment-1"></i> <a class="dsq-comment-count" href="{Permalink}#disqus_thread">Comments</a></span> {/block:IfDisqusShortname}
</div>
</div>
</li>
{/block:Chat}
{block:Audio}
<!-- ==========================================================================
AUDIO POST
========================================================================== */
-->
<li>
<div class="timeline_icon"><i class="icon-note"></i></div>
<div class="timeline_like">{LikeButton color="white" size="14"}</div>
<div class="timeline_reblog"><p style="margin:2px 0 0 6px;";>{ReblogButton color="white" size="18"}</a></p></a></div>
<div class="timeline_label">
{block:ExternalAudio} <div class="audio-container">
{ExternalAudioURL}</div>{/block:ExternalAudio}
{block:AudioEmbed} <div class="audio-container">{AudioEmbed}
</div>{/block:AudioEmbed}
{block:AudioPlayer} <div class="audio-container">
{AudioPlayerGrey}</div>{/block:AudioPlayer}
{block:Caption}{Caption}{/block:Caption}
{block:HasTags}
<ul class="tags">
{block:Tags}<li><a href="{TagURL}">#{Tag}</a></li> {/block:Tags}
</ul>
{/block:HasTags}
<div class="separator"></div>
<div class="notes">
{block:Date}<span><i class="icon-clock"></i> <a href="{Permalink}">{DayOfMonth}{DayOfMonthSuffix} {ShortMonth} {ShortYear}</a></span> {/block:Date}
{block:NoteCount} <span> <i class="icon-star"></i><a href="{Permalink}">{NoteCountWithLabel}</a></span> {/block:NoteCount}
<span><i class="icon-user"></i> posted by <a href="{PostAuthorURL}">{PostAuthorName}</a></span>
{block:IfDisqusShortname}<span><i class="icon-comment-1"></i> <a class="dsq-comment-count" href="{Permalink}#disqus_thread">Comments</a></span> {/block:IfDisqusShortname}
</div>
</div>
</li>
{/block:Audio}
{block:Link}
<!-- ==========================================================================
LINK POST
========================================================================== */
-->
<li>
<div class="timeline_icon"><i class="icon-link"></i></div>
<div class="timeline_like">{LikeButton color="white" size="14"}</div>
<div class="timeline_reblog"><p style="margin:2px 0 0 6px;";>{ReblogButton color="white" size="18"}</a></p></a></div>
<div class="timeline_label">
<h1><a href="{URL}" {Target}>{Name}</a></h1>
{block:Description}<p>{Description}</p> {/block:Description}
{block:HasTags}
<ul class="tags">
{block:Tags}<li><a href="{TagURL}">#{Tag}</a></li> {/block:Tags}
</ul>
{/block:HasTags}
<div class="separator"></div>
<div class="notes">
{block:Date}<span><i class="icon-clock"></i> <a href="{Permalink}">{DayOfMonth}{DayOfMonthSuffix} {ShortMonth} {ShortYear}</a></span>
{/block:Date}
{block:NoteCount} <span> <i class="icon-star"></i><a href="{Permalink}">{NoteCountWithLabel}</a></span> {/block:NoteCount}
<span><i class="icon-user"></i> posted by <a href="{PostAuthorURL}">{PostAuthorName}</a></span>
{block:IfDisqusShortname}<span><i class="icon-comment-1"></i> <a class="dsq-comment-count" href="{Permalink}#disqus_thread">Comments</a></span> {/block:IfDisqusShortname}
</div>
</div>
</li>
{/block:Link}
{block:Answer}
<!-- ==========================================================================
ASK POST
========================================================================== */
-->
<li>
<div class="timeline_icon"><i class="icon-chat-empty"></i></div>
<div class="timeline_like">{LikeButton color="white" size="14"}</div>
<div class="timeline_reblog"><p style="margin:2px 0 0 6px;";>{ReblogButton color="white" size="18"}</a></p></a></div>
<div class="timeline_label">
<img src="{AskerPortraitURL-30}" class="userpic"><h1>{Asker}
asked</h1>
<div class="ask">{Question}</div>
<p>{Answer}</p>
{block:Answerer}<b>{Answerer}</b>{/block:Answerer}
<p>{Replies}</p>
{block:HasTags}
<ul class="tags">
{block:Tags}<li><a href="{TagURL}">#{Tag}</a></li> {/block:Tags}
</ul>
{/block:HasTags}
<div class="separator"></div>
<div class="notes">
{block:Date}<span><i class="icon-clock"></i> <a href="{Permalink}">{DayOfMonth}{DayOfMonthSuffix} {ShortMonth} {ShortYear}</a></span>
{/block:Date}
{block:NoteCount} <span> <i class="icon-star"></i><a href="{Permalink}">{NoteCountWithLabel}</a></span> {/block:NoteCount}
<span><i class="icon-user"></i> posted by <a href="{PostAuthorURL}">{PostAuthorName}</a></span>
{block:IfDisqusShortname}<span><i class="icon-comment-1"></i> <a class="dsq-comment-count" href="{Permalink}#disqus_thread">Comments</a></span> {/block:IfDisqusShortname}
</div>
</div>
</li>
{/block:Answer}
<li>
{block:Permalink}{block:Date}
<div class="timeline_disqus">
<!-- ==========================================================================
DISQUS
========================================================================== */
-->
{block:IfDisqusShortname}
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = '{text:Disqus Shortname}';
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by
Disqus.</a></noscript>
{/block:IfDisqusShortname}
{block:PostNotes}{PostNotes}{/block:PostNotes}
</div>
{/block:Date}{/block:Permalink}
</li>
<script type="text/javascript">
var disqus_shortname = '{text:Disqus Shortname}';
(function () {
var s = document.createElement('script'); s.async = true;
s.type = 'text/javascript';
s.src = '//' + disqus_shortname + '.disqus.com/count.js';
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
}());
</script>
{/block:Posts}
{block:Pagination}
<!-- ==========================================================================
PAGINATION
========================================================================== */
-->
<li>
{block:NextPage}<div class="timeline_next"><a href="{NextPage}"><i class="icon-right-open-mini"></i></a></div>{/block:NextPage}
{block:PreviousPage}<div class="timeline_prev"><a href="{PreviousPage}"><i class="icon-left-open-mini"></i></a></div>{/block:PreviousPage}
<div class="credits">
{Title} {CopyrightYears} - Powered by <a href="www.tumblr.com">tumblr</a></a>
</div>
</li>
{/block:Pagination}
<li>
<div class="timeline_end"></div>
<div class="credits"></div>
</li>
</ul>
</div>
</div>
<!-- SCM Music Player http://scmplayer.net -->
<script type="text/javascript" src="http://scmplayer.net/script.js"
data-config="{'skin':'http://static.tumblr.com/83zgfej/nA4m1mgt5/skin16.css','volume':100,'autoplay':true,'shuffle':true,'repeat':1,'placement':'bottom','showplaylist':false,'playlist':[{'title':'Time Of Our Lives','url':'http://www.youtube.com/watch?v=J9xW36DB9l8'},{'title':'A Drop In The Ocean','url':'http://www.youtube.com/watch?v=LVsrP9OJ6PA'},{'title':'I Wouldn%27t Mind','url':'http://www.youtube.com/watch?v=55QoKSd78Xs'},{'title':'Give It All','url':'http://www.youtube.com/watch?v=EzueDvbBxak'},{'title':'BlackBirds','url':'http://www.youtube.com/watch?v=q_Kk3AxQZfs'},{'title':'Echo','url':'http://www.youtube.com/watch?v=oPuzpT2iCZU'},{'title':'Down','url':'http://www.youtube.com/watch?v=M8He7KJwhqc'},{'title':'Keep Me Watching','url':'http://www.youtube.com/watch?v=7aMZ318yuto'},{'title':'You And Me','url':'http://www.youtube.com/watch?v=27nHtyAeiUU'},{'title':'Perfect For Me','url':'http://www.youtube.com/watch?v=4PCAHTQIRJk'},{'title':'Everything','url':'http://www.youtube.com/watch?v=fjDojEOiMcE'}]}" ></script>
<!-- SCM Music Player script end -->
<!-- JavaScript Files -->
<script src="http://static.tumblr.com/dpngoqb/y5Ymugpgp/jquery-2.0.3.min.js"></script>
<script src="http://static.tumblr.com/dpngoqb/QhRmug6os/jquery.bxslider.min.js"></script>
<!-- Slider Script -->
<script>
$('.bxslider').bxSlider({
mode: 'fade',
easing: 'cubic-bezier(0.95, 0.05, 0.795, 0.035)',
captions: true
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment