theme 3

<!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="font:Body" content="Georgia" />

<meta name="image:Background" 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 {
	width: 450px;
	height: 400px;
	position:fixed;
	left:5px;
	top:130px;
	background-color:rgba(0,0,0,.5);
	border:5px ridge white;
}

#sidebar #innersidebar {
    background-color:rgba(150,150,150,.7);
    height:160px;
    border:2px solid black;
    border-radius:20px;
    box-shadow:0px 5px 0px black;
    margin:5px;
}

/*The Sidebar: Title*/

#title1 {
	font-family: 'Oregano', cursive;
	font-size: 25px;
	text-align: center;
	padding: 10px;
	position:relative;
	position:fixed;
	left:50px;
	top:0px;
	width:370px;
	height:auto;
	clear:both;
	line-height:100%;
	opacity:.5;
	transition: all 1s ease-in-out;
	transform: scale(1);
}

#title1:hover {
    opacity:1;
    transform:scale(1.25);
}


/*The Sidebar: Description*/

#sidebar .description {
    padding:5px;
    margin:5px;
    width:248px;
    height:108px;
    float:right;
    font-size:14px;
    z-index:1;
    overflow-y:scroll;
    margin-top:-7px;
    background-color:#81B581;
    border:1px solid black;
}

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

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

/*The Sidebar: Links*/

#sidebar .links {
    position:relative;
    text-align:center;
    top:-100px;
    left:100px;
    display:inline-block;
    padding:5px;
    background-color:SaddleBrown;
    margin:5px;
    color:white;
    border:2px groove Peru;
    text-shadow:0px 0px 5px black;

}

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


#links2 {
    position:relative;
    top:110px;
    height:200px;
    border:2px solid black;
    background-color:rgba(200,200,150,.7);
}

#sidebar #links2 #archive {
    position:relative;
    float:right;
    top:-177px;
}

#sidebar #links2 #home {
    position:relative;
    top:-12px;
}

#sidebar #links3 {
    position:relative;
    left:130px;
    top:-20px;
}
/*The Sidebar: Pagination (part 8)*/

#sidebar .pagination {
    width: 150px;
    text-align: center;
    padding: 3px 0;
    position:relative;
    left:280px;
    top:50px;
}

#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;
    margin: 60px 0 60px 460px;
    padding: 20px 0;
    color: white;
}

#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 {
    width: 500px;
    height:auto;
    margin: 0 auto 20px;
    padding:10px;
    background-color: rgba(164, 132, 46, 0.65);
    border:5px outset SaddleBrown;
    box-shadow: 5px 5px 5px black;
}

#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:3px 3px 9px black;
}

#audioplayerbox {
    background-color:rgba(0,0,0,.5);
    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:15px;
}

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

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

/*Note Container (part 7)*/

#content #notecontainer {
    margin: 25px auto;
    width: 500px;
    height:1000px;
    font-size: 12px;
    padding-bottom:50px;
}

#content #notecontainer ol.notes {
    list-style-type: none;
    margin-top: 5px;
    padding: 2px;
}

#content #notecontainer img.avatar {
    margin-right: 10px;
    padding:2px;
    width: 14px;
    height: 14px;
    border:1px solid white;
}

  ol.notes {
                padding: 0px;
                margin: 25px 0px;
                list-style-type: none;
                border-bottom: solid 1px #ccc;
            }

            ol.notes li.note {
                padding: 10px;
            }

            ol.notes li.note img.avatar {
                vertical-align: -4px;
                margin-right: 10px;
                width: 16px;
                height: 16px;
            }

            ol.notes li.note span.action {
                font-weight: bold;
            }

            ol.notes li.note .answer_content {
                font-weight: normal;
            }

            ol.notes li.note blockquote {
                border-color: #eee;
                padding: 4px 10px;
                margin: 10px 0px 0px 25px;
            }

            ol.notes li.note blockquote a {
                text-decoration: none;
            }

/*Custom CSS (part 8)*/

{CustomCSS}

#search {
    margin-left: 100px;
    position:relative;
    top:-85px;
    left:-90px;
    width:190px;
    height:30px;
}

#rilakkuma {
    height:50px;
    width:50px;
    opacity:.7;
}

.avatar {
    clear:left;
    float:left;
    border:5px solid white;
    box-shadow:0px 0px 10px black;
    transition: all 1s ease-in-out;
}

#sbl {
    position:relative;
    clear:both;
    padding:30px;
}

#bottomofposts {
    background-color: rgba(0,0,0,.6);
    padding:0px 7px 2px 7px;
    border: 1.5px solid white;
    clear:left;
}

#content #posts #likereblog li{
    display:inline;
    float:left;
    position:relative;
    top:0px;
    padding:3px 8px 3px 5px;
    left:-38px;
    background-color:rgba(45,70,150,.6);
    height:20px;
    width:20px;
}

.arrow {
    height:8px;
    width:8px;
    float:right;
    background-color:white;
    position:relative;
    top:-10px;
    border-radius:0px 50px 50px 0px;
}

#profile {
    font-size:20px;
    margin-bottom:-18px;
    padding-left:50px;
    background-color:rgba(0,0,0,.5);
    border:1px solid black;
    border-radius:15px 15px 0px 0px;
    color:orange;
}

#theme a{
    text-decoration:none;
    color:white;
}

#text {
    position:relative;
    top:15px;
    text-align:center;
    margin:1px;
}
#theme {
    background-color: SaddleBrown;
    height:50px;
    width:50px;
    border:1.5px solid chocolate;
    border-radius:5px;
    position:relative;
    left:245px;
    top:-75px;
}

</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="title1"><a href="/"><img src="https://31.media.tumblr.com/36706a88347154a491fd56f9d9072caf/tumblr_inline_nhm4f7Dm0L1qfjhw8.png" /></a></div>

<div id="sidebar">

<div id="innersidebar">
<div id="profile">Profile</div>
<div id="sbl">
<a href="{BlogURL}"> <img class="avatar" src={PortraitURL-96}> </a>

<div class="description">{Description}</div>
</div> <!--innersidebar-->

<div id="links2">

<div id="links3">
{block:AskEnabled}<a href="/ask" title="ask"><img src="https://31.media.tumblr.com/d007cb4026d8d3107f08bdd00cb21696/tumblr_inline_nhkff3eKYO1qfjhw8.png" /></a>{/block:AskEnabled}
{block:SubmissionsEnabled}<a href="/submit" title="submit"><img src="https://31.media.tumblr.com/d3e2c18340725d23dbeb769a704477c3/tumblr_inline_nhkm1sctbZ1qfjhw8.png" /></a>{/block:SubmissionsEnabled}
</div>
<div id="theme"> <a href="http://themebylilcherrybearr.tumblr.com" title="lilcherrybearr"> <span id="text">theme</span> </a> </div>
<div id="archive"><a href="/archive" title="archive"> <img src="https://31.media.tumblr.com/08c567eb1293afba507963db81ac56b4/tumblr_inline_nhm5i6mxiY1qfjhw8.png" /></a></div>
<div id="home"><a href="{Blogurl}" title="home"> <img src="https://31.media.tumblr.com/0938be769c8cc499c6f95de12e0d25c5/tumblr_inline_nho63yK6ba1qfjhw8.png" /> </a></div>

{block:HasPages}{block:Pages}<a href="{url}"><div class="links">{Label}</div></a>{/block:Pages}{/block:HasPages}
</div>

<div id="search">
<form action="/search" method="get">
    <input type="text" name="q" value="{SearchQuery}" style="width:110px; border-radius:20px; padding:2px 5px 2px 5px;"/>
    <input type="submit" value="Search" style="position:relative;"/>
</form>
</div>

{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> <!--links2 -->

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

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

<!--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}

<!--------------------------->
<ul id="likereblog">
    <li> {LikeButton} </li>
    <li> {ReblogButton} </li>
</ul>

<!--The Permalink (Part 7)-->
<div id="bottomofposts">

<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 class="arrow"></div>
</div>

</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>