theme 1

<!DOCTYPE html>
<html>
<head>

<!--Customisation Options (part 2)-->

<meta name="color:Background" content="#cccccc" />
<meta name="color:Primary Colour" content="#03999b" />
<meta name="color:Secondary Colour" content="#4cc3c5" />
<meta name="color:Sidebar" content="" />

<meta name="font:Body" content="Georgia" />

<meta name="image:Background" content="" />
<meta name="image:Sidebar" content="" />

<meta name="if:Infinite Scroll" content="0">

<!--Things that go in the tab (part 1)-->

<title>{Title}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
<link rel="shortcut icon" href="{Favicon}" />

<!--Custom font (part 4)-->

<link href='http://fonts.googleapis.com/css?family=Oregano' rel='stylesheet' type='text/css'>

<style type="text/css">

/*Notes in CSS look like this. If you use <!--these--> it will not work*/

/*The Background (part 3)*/

body {
	background-color: {color:Background};
	font-family: {font:Body};
	background-image: url({image:Background});
	background-attachment: fixed;
	margin: 0;
	word-wrap: break-word;
}

/*The Sidebar (part 4)*/

#sidebar {
	background-color: {color:sidebar};
	width: 350px;
	position: fixed;
	padding:20px;
	padding-top:50px;
	height:550px;
	margin-top:-55px;
	border:7px solid white;
	box-shadow: 5px 5px 10px gray;
}

/*The Sidebar: Title*/

#titlebar .title {
	font-family: 'Oregano', cursive;
	font-size: 30px;
	text-align: center;
	padding: 10px;
	float:right;
	position:relative;
	top:-10px;
}

#titlebar .title a {
	color: {color:Primary Colour};
	text-decoration: none;
	transition: all 2s;
	-webkit-transition: all 2s ease-in-out;
	-moz-transition: all 2s ease-in-out;
	font-family: 'Oregano', cursive;
	font-size: 30px;
	text-align: center;
	padding: 10px;
	float:right;
}

#titlebar .title a:hover {
	color: {color:Secondary Colour};
	transform: rotate(3deg);
	-webkit-transform: rotate(3deg);
	font-family: 'Oregano', cursive;
	font-size: 30px;
	text-align: center;
	padding: 10px;
	float:right;
}

/*The Sidebar: Image*/

#sidebar .image {
	width: auto;
	height: auto;
	border: 3px outset white;
	box-shadow:3px 3px 5px black;
}

/*The Sidebar: Description*/

#sidebar .description {
	color: black;
	font-size: 13px;
	text-align: justify;
	text-align:center;
	padding:10px;
	line-height:110%;
	margin-top:40px;
	margin-bottom:30px;
	background: -webkit-radial-gradient(circle, rgba(255,255,255,1), rgba(255,255,255,0));
	background: -moz-radial-gradient(circle, rgba(255,255,255,1), rgba(255,255,255,0));
	position: relative;
}

#sidebar .description a {
	color: {color:Primary Colour};
	text-decoration: none;
}

#sidebar .description a:hover {
	color: {color:Secondary Colour};
}

/*The Sidebar: Links*/

#sidebar .links {
	font-size: 12px;
	text-align: center;
	padding: 3px 5px;
    	margin: 5px;
   	float: left;
	width: 60px;
	margin: 4px 8px 2px 8px;
	color:black;
	background: -webkit-radial-gradient(circle, rgba(255,255,255,1), rgba(255,255,255,0));
	background: -moz-radial-gradient(circle, rgba(255,255,255,1), rgba(255,255,255,0));
	display: inline;
}

#sidebar .links a {
	text-decoration:none;
}

#sidebar .links:hover {
	background-color: {color:Secondary Colour};
	transition: all 1.5s ease-in-out;
	-webkit-transition: all 1.5s ease-in-out;
	-moz-transition: all 1.5s ease-in-out;
}

/*The Sidebar: Pagination (part 8)*/

#sidebar .pagination {
    width: 260px;
    text-align: center;
    padding: 3px 0;
}

#sidebar .pagination a {
    color: {color:Primary Colour};
    text-decoration: none;
}

#sidebar .pagination a:hover {
    color: {color:Secondary Colour};
}


/***************************/

/*The Main Content (Part 6)*/

#content {
    width: 560px;
    background-color: rgba(255, 255, 255, 0.6);
    margin: 60px 0 60px 460px;
    padding: 20px 0;
    color: black;
    border: 3px outset white;
    box-shadow: 5px 5px 10px gray;
}

#content a {
    color: {color:Primary Colour};
    text-decoration: none;
}

#content a:hover {
    color: {color:Secondary Colour};
}

#content blockquote {
    border-left: solid 2px black;
    margin: 0;
    padding-left: 10px;
}

img {
    border: 0;
    max-width: 100%;
}

#content #posts {
    background-color: rgba(255,255,255,.9);
    width: 500px;
    margin: 0 auto 20px;
    padding:10px;
}

#content #posts .title {
    font-size: 22px;
}

#content #posts .text {
    font-size:13px;
}

#player {
width:30px;
height:30px;
position:absolute;
overflow:hidden;
margin-top:35px;
margin-bottom:35px;
margin-left:45px;
opacity: 0.7;
filter:alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
}

#albumart {
    float:left;
    margin:0px 15px 0px 0px;
    border:3px solid white;
    height:100px;
    width:100px;
    background-color: rgba(215,215,215,.5);
    box-shadow:5px 5px 9px gray;
}

#audioplayerbox {
    background-image:url("https://31.media.tumblr.com/8daa9cd4a770540f75e2175e7afea863/tumblr_nell0cqJQO1thncmho1_500.jpg");
    height:110px;
    padding:10px;
}

li {
    display:block;
    padding:2px;
}
.questionbox {
    background-color: rgba(230,230,230,.5);
    padding: 10px;
    border-radius: 10px;
}

/***************************/

/*The Permalink and Tags (part 7)*/

#content #posts #permalink {
    font-size:11px;
    margin-top:10px;
}

#content #posts #tags {
    font-size:13px;
}

#content #posts #tags .comma:last-child {
    display: none;
}

/*Note Container (part 7)*/

#content #notecontainer {
    margin: 20px auto;
    width: 500px;
    font-size: 11px;
}

#content #notecontainer ol.notes {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#content #notecontainer img.avatar {
    margin-right: 10px;
    width: 16px;
    height: 16px;
}

/*Custom CSS (part 8)*/

{CustomCSS}

#search {
    margin-left: 50px;
}

#titlebar {
    height:45px;
    width:1025px;
    top:0px;
    background: -webkit-linear-gradient(right, rgba(255,255,255,.9), rgba(255,255,255,0));
	background: -moz-linear-gradient(right, rgba(255,255,255,.9), rgba(255,255,255,.0));
    position:absolute;
    position:fixed;
    padding-bottom:5px;
    transition: all 3s;
	-webkit-transition: all 2s ease-in-out;
	-moz-transition: all 2s ease-in-out;
}

#titlebar:hover {
    height:45px;
    width:1050px;
    top:0px;
    background: -webkit-linear-gradient(right, rgba(255,255,255,.9), rgba(255,255,255,0));
	background: -moz-linear-gradient(right, rgba(255,255,255,.9), rgba(255,255,255,.0));
    position:absolute;
    position:fixed;
    padding-bottom:5px;
}


#themecredit {
    position:relative;
    position:absolute;
    top:575px;
    left:10px;
}

.lcb a{
    text-decoration:none;
    color: {color:Primary Colour};
}

.lcb a:hover{
    color: {color:Secondary Colour};
	transition: all 1.5s ease-in-out;
	-webkit-transition: all 1.5s ease-in-out;
	-moz-transition: all 1.5s ease-in-out;
}

#rilakkuma {
    height:35px;
    width:35px;
}

</style>

<!--Infinite Scroll (part 8)-->

{block:IfInfiniteScroll}
<script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>
{/block:IfInfiniteScroll}

<script type="text/javascript"
    src="http://www.google.com/jsapi"></script>

<script type="text/javascript">
  google.load("jquery", "1.3");
  google.setOnLoadCallback(function() {
    jQuery(function($) {
      // do some stuff here, eg load your tweets, ...
       $(document).ready(function() {

            });
    });
  });
</script>

</head>

<body>




<!--The Sidebar (part 4)-->

<div id="sidebar">


<img class="image" src="{image:Sidebar}" />

{block:AskEnabled}<a href="/ask"><div class="links">{AskLabel}</div></a>{/block:AskEnabled}
{block:SubmissionsEnabled}<a href="/submit"><div class="links">{SubmitLabel}</div></a>{/block:SubmissionsEnabled}
{block:HasPages}{block:Pages}<a href="{url}"><div class="links">{Label}</div></a>{/block:Pages}{/block:HasPages}

<hr>

<div class="description">{Description}</div>

<div id="search">
<form action="/search" method="get">
    <input type="text" name="q" value="{SearchQuery}"/>
    <input type="submit" value="Search"/>
</form>
</div>
<!--Pagination (part 8)-->

{block:IfNotInfiniteScroll}
<div class="pagination">
{block:PreviousPage}<a href="{PreviousPage}"><-Previous | </a>{/block:PreviousPage}
{block:NextPage}<a href="{NextPage}"> Next-></a>{/block:NextPage}
</div>
{/block:IfNotInfiniteScroll}

<div id="themecredit">
    <img id="rilakkuma" src="https://38.media.tumblr.com/avatar_aa05499ce1b8_96.png" />
    <span class="lcb">Theme made by <a href="http://lilcherrybearr.tumblr.com">LilCherryBearr</a></span>
</div>

</div> <!--sidebar-->

<div id="titlebar">
    <div class="title"><a href="/">{Title}</a></div>
</div>

<!--------------------------->

<!--The Main Content (part 5 & 6)-->

<div id="content">
<div class="autopagerize_page_element">
{block:Posts}
<div id="posts">

{block:Photo}
{LinkOpenTag}<img src="{PhotoURL-500}" />{LinkCloseTag}
{block:Caption}<div class="text">{Caption}</div>{/block:Caption}
{/block:Photo}

{block:Photoset}
{Photoset-500}
{block:Caption}<div class="text">{Caption}</div>{/block:Caption}
{/block:Photoset}

{block:Video}
{Video-500}
{block:Caption}<div class="text">{Caption}</div>{/block:Caption}
{/block:Video}

{block:Audio}
<div id="audioplayerbox">
<div id="player">{AudioPlayerWhite} </div>
<div id="albumart">{block:AlbumArt}<img src="{AlbumArtURL}" width="100">{/block:AlbumArt}</div>
{PlayCountWithLabel}
{block:TrackName}
    <li>Track: {TrackName}</li>
{/block:TrackName}

{block:Artist}
    <li>Artist: {Artist}</li>
{/block:Artist}

{block:Album}
    <li>Album: {Album}</li>
{/block:Album}

</div>
<p>
{block:caption}<div class="audiocaption">{caption}</div>{/block:caption}
</p>
{/block:Audio}

{block:Quote}
<div class="title">“{Quote}”</div>
{block:Source}<div class="text"><br> <hr> {Source}</div>{/block:Source}
{/block:Quote}

{block:Text}
{block:Title}<div class="title">{Title}</div>{/block:Title}
<div class="text">{Body}</div>
{/block:Text}

{block:Answer}
<div class="questionbox">
<div class="asker_container"><img src="{AskerPortraitURL-24}">  {Asker}</div>
<div class="title">Asked: {Question}</div>
</div>
<div class="text">{Answer}</div>
{block:Answer}

{block:Chat}
{block:Title}<div class="title">{Title}</div>{/block:Title}
<div class="text">
{block:Lines}
{block:Label}<strong>{Label}</strong>{/block:Label} {Line}<br />
{/block:Lines}
</div> <!--text-->
{/block:Chat}

{block:Link}
<div class="title"><a href="{URL}">{Name}</a></div>
{block:Description}
<div class="text">{Description}</div>
{/block:Description}
{/block:Link}

<!--------------------------->

<!--The Permalink (Part 7)-->

<div id="permalink">
<a href="{Permalink}">
{block:Date}{lang:Posted TimeAgo}{/block:Date}
{block:NoteCount} with {NoteCountWithLabel}{/block:NoteCount}
</a>
</div> <!--permalink-->
<!--The Tags (Part 7)-->

{block:HasTags}<div id="tags">
{block:Tags}<a href="{TagURL}">{Tag}</a><span class="comma">, </span>{/block:Tags}.
</div> <!--tags-->
{/block:HasTags}

</div> <!--posts-->

<!--Note Container (Part 7)-->

{block:PostNotes}
<div id="notecontainer">{PostNotes}</div>
{/block:PostNotes}


{/block:Posts}
</div> <!--autopagerize_page_element-->
</div> <!--content-->

</body>

</html>