Theme: My copycat

<!DOCTYPE html>

<!--
- theme #22 / caulfielld(tumblr.com) -
don't take parts of this code.
don't remove this comment.
don't remove the credit.
-->

<html>
<head>

<title>{Title}
{block:PostTitle} — {PostTitle}{/block:PostTitle}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="altertnate" type="application/rss+xml" href="{RSS}">
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}

<meta name="color:background" content="#ffffff" />
<meta name="color:text" content="#999999" />
<meta name="color:text 2" content="#dbeaef" />
<meta name="color:link" content="#77b5be" />
<meta name="color:link hover" content="#7e7175" />
<meta name="color:scrollbar" content="#77b5be" />
<meta name="color:border" content="#f5f5f5" />
<meta name="color:blockquote" content="#f5f5f5" />
<meta name="color:selection bg" content="#77b5be" />
<meta name="color:selection text" content="#ffffff" />
<meta name="color:bold" content="#77b5be" />
<meta name="color:answers bg" content="#dbeaef" />
<meta name="color:dropdown bg" content="#fafafa" />
<meta name="color:info bg" content="#fafafa" />

<meta name="text:sb title normal" content="kwon" />
<meta name="text:sb title bold" content="tae" />
<meta name="text:Link 01 URL" content="/" />
<meta name="text:Link 01 title" content="Link 01">
<meta name="text:Link 02 URL" content="/" />
<meta name="text:Link 02 title" content="Link 02">
<meta name="text:Link 03 URL" content="/" />
<meta name="text:Link 03 title" content="Link 03">
<meta name="text:Link 04 URL" content="/" />
<meta name="text:Link 04 title" content="Link 04">

<meta name="if:500px posts" content="0">
<meta name="if:infinite scrolling" content="0">
<meta name="if:sidebar picture" content="0">
<meta name="if:show caption" content="0">
<meta name="if:bg image" content="0">

<meta name="image:sidebar" content="">
<meta name="image:background" content="">

<!--- extras --->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://static.tumblr.com/nb65v05/XPQmpjoyl/jquery.style-my-tooltips.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();}});
$('.scrollup').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;});});
</script>

<script>
(function($){
$(document).ready(function(){
$("[title]").style_my_tooltips({
tip_follows_cursor:false,
tip_delay_time:20,
tip_fade_speed:300,
attribute:"title"
});});})(jQuery);
</script>

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<style type="text/css">

body {
font:09px sans-serif, cambria, calibri;
margin:0;
background:{color:Background} {block:ifBgImage}url('{image:Background}') fixed{/block:ifBgImage};
color:{color:text};}

a {
color:{color:link};
text-decoration: none;
-webkit-transition:all 0.6s ease-in-out;/*chrome-safari*/
-o-transition:all 0.6s ease-in-out;/*opera*/
-moz-transition:all 0.6s ease-in-out;/*mozilla firefox*/
-ms-transition:all 0.6s ease-in-out;/*ie*/
transition:all 0.6s ease-in-out;/*w3c*/}

a:hover {
color:{color:link hover};}

em, strong {
color:{color:bold};}

blockquote {
border-left: 1px solid {color:blockquote};
padding-left: 5px;
margin:05px;}

img {
max-width: 100%;}

ol {
list-style-type:lower-roman;}

sub, sup{
font-size: 10px; /*credit to pohroro*/}

.container  {
width:400px;
{block:if500pxPosts}
width:500px;
{/block:if500pxPosts}
margin: auto;}

.entries {
width:400px;
{block:if500pxPosts}
width:500px;
{/block:if500pxPosts}
position:relative;
padding-top:60px;
padding-bottom:60px;}

#posts {
width:400px;
{block:PermalinkPage}
width:500px;
{block:ifNot500pxPosts}
margin-left:-50px;
{/block:ifNot500pxPosts}
{/block:PermalinkPage}
{block:if500pxPosts}
width:500px;
{/block:if500pxPosts}
overflow:hidden;
background-color:{color:background};
border-radius:0px;
word-wrap: break-word;
{block:IndexPage}
margin-bottom:90px;
{/block:IndexPage}}

#posts .images{
display:block;
max-width:100%;}

.images{
-webkit-transition:all 0.6s ease-in-out;/*chrome-safari*/
-o-transition:all 0.6s ease-in-out;/*opera*/
-moz-transition:all 0.6s ease-in-out;/*mozilla firefox*/
-ms-transition:all 0.6s ease-in-out;/*ie*/
transition:all 0.6s ease-in-out;/*w3c*/
position:relative;
z-index:9;}

{block:IndexPage}
#posts:hover .images{
-moz-transform: scale(1.4);
-o-transform: scale(1.4);
-webkit-transform: scale(1.4);
transform: scale(1.4);
opacity:0.4;}
{/block:IndexPage}

#sidebar {
width: 130px;
height:auto;
margin-left:-200px;
margin-top:200px;
position:fixed;}

.sb-title a{
color:{color:text 2};
display:block;
text-transform:lowercase;
text-align:center;
font:18px sans-serif;
letter-spacing:2px;
padding:05px;}

.sidebar-image {
padding-left:5px;
padding-right:5px;}

.sidebar-image img{
display:block;
width:80px;
padding:20px;
background-color:{color:dropdown bg};
margin-bottom:4px;}

.descr {
margin-top:5px;
text-align:center;
max-height:118px;
overflow:auto;}

.navi {
text-align:center;}

.pag {
margin-top:05px;
text-align:center;
font:italic 09px sans-serif;}

.jump_page {
padding: 4px 6px;}

.current_page, .jump_page:hover {
padding: 4px 6px;}

.text-title {
color:{color:text 2};
display:block;
text-transform:lowercase;
text-align:center;
font:18px sans-serif;
letter-spacing:2px;
padding:05px;
border-bottom:2px solid {color:text 2};}

.quest {
padding:10px;
background-color:{color:answers bg};
color:{color:link};}

.quest img {
float:left;
margin-right: 10px;}

.quote {
padding:0 10px 0 10px;}

.quotetext-short {
font-size: 18px;}

.quotetext-medium {
font-size: 14px;}

.quotetext-long {
font-size: 11px;}

.quote-source {
text-align:right;}

.caption img, .answer img{
{block:if500pxPosts}
max-width:500px;
{/block:if500pxPosts}
{block:ifNot500pxPosts}
max-width:400px;
{/block:ifNot500pxPosts}}

.tumblr_audio_player {
height:20px;
{block:if500pxPosts}
width:40px;
{/block:if500pxPosts}
{block:ifNot500pxPosts}
width:20px;
{/block:ifNot500pxPosts}
z-index:9999;
margin:0;
padding:10px;
margin-left:0px;
position:relative;
float:left;
background-color:white;
border:1px solid {color:border};}

.audio {
height:42px;
background:url('http://31.media.tumblr.com/tumblr_m37lmqN7UD1rsx5i6o3_250.png');
{block:if500pxPosts}
width:500px;
{/block:if500pxPosts}
{block:ifNot500pxPosts}
width:400px;
{/block:ifNot500pxPosts}}

.au-info {
text-align:center;
text-decoration:underline;
font:italic 12px sans-serif;
line-height:100%;
color:white;
text-shadow: 1px 1px 1px #A3A3A3;
padding:14px;}

#posts:hover .posts-info{
opacity:1;
margin-top:10px;}

.posts-info{
padding:3px;
text-align:center;
position:absolute;
margin-top:0%;
z-index:99;
width:80px;
margin-left:40%;
opacity:0;
-webkit-transition:all 0.6s ease-in-out;/*chrome-safari*/
-o-transition:all 0.6s ease-in-out;/*opera*/
-moz-transition:all 0.6s ease-in-out;/*mozilla firefox*/
-ms-transition:all 0.6s ease-in-out;/*ie*/
transition:all 0.6s ease-in-out;/*w3c*/
height:auto;}

.posts-info i{
padding:5px;
background-color:{color:text 2};
color:white;
font-size:13px;}

/* extras */
#s-m-t-tooltip{
z-index:10;
margin:24px 14px 7px 12px;
padding:0 3px 0 3px;
font:07px 'trebuchet ms';
text-transform:uppercase;
letter-spacing:1px;
z-index:9999999999999;
line-height:16px;
background-color:{color:background};
-webkit-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    3px 3px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow:         3px 3px 5px 0px rgba(50, 50, 50, 0.75);}

::selection {
background: {color:selection bg};
color: {color:selection text};}
::-moz-selection {
background: {color:selection bg};
color: {color:selection text};}
::-webkit-selection {
background: {color:selection bg};
color: {color:selection text};}

iframe#tumblr_controls {
top:0%!important;
right:0%!important;
position:fixed!important;
z-index:999999999!important;
opacity:0.3;
-webkit-filter:invert(100%);
-moz-filter:invert(100%);
-o-filter:invert(100%);
-ms-filter:invert(100%);
filter:invert(100%);} /*credit to ladmilk*/

::-webkit-scrollbar {
width: 9px;
height: 3px;
background: {color:background};}

::-webkit-scrollbar-thumb {
background-color:{color:background} ;
border: 1px solid {color:border};}

#notes{
width:500px;
height:190px;
overflow:auto;}

ol.notes {
padding: 0px;
margin: 0;
list-style-type: none;}

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

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

ol.notes li.note span.action {}

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

.scrollup{
width:30px;
height:30px;
opacity:0.3;
position:fixed;
bottom:10px;
right:0px;
display:none;
text-indent:-9999px;
background: url('http://static.tumblr.com/ii9pnwy/6qRn1ekzg/1393103726_up4.png') no-repeat;}

.scrollup:hover{
cursor:pointer;}

.wrapper { /*credit to codrops*/
position: relative;
width: 100px;
margin: 0 auto;
padding: 12px 15px;
background: {color:dropdown bg};
border-radius: 5px;
box-shadow: 0 1px 0 rgba(0,0,0,0.1);
cursor: pointer;
outline: none;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;}

.wrapper:after {
content: "";
width: 0;
height: 0;
position: absolute;
top: 50%;
right: 15px;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: {color:text 2} transparent;}

.wrapper .dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: {color:background};
border-radius: 0 0 5px 5px;
border: 1px solid rgba(0,0,0,0.1);
border-top: none;
border-bottom: none;
list-style: none;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
max-height: 0;
overflow: hidden;}

.wrapper .dropdown li {
padding: 0 10px ;}

.wrapper .dropdown li a {
display: block;
text-decoration: none;
color: {color:text};
padding: 10px 0;
transition: all 0.3s ease-out;
border-bottom: 1px solid #e6e8ea;}

.wrapper .dropdown li:last-of-type a {
border: none;}

.wrapper .dropdown li i {
margin-right: 5px;
color: inherit;
vertical-align: middle;}

.wrapper .dropdown li:hover a {
color: {color:link};}

.wrapper.active {
border-radius: 5px 5px 0 0;
background: {color:text 2};
box-shadow: none;
border-bottom: none;
color: white;}

.wrapper.active:after {
border-color: {color:background} transparent;}

.wrapper.active .dropdown {
border-bottom: 1px solid rgba(0,0,0,0.1);
max-height: 400px;}

#posts:hover .oinfo{
opacity:1;}

.oinfo{
position:absolute;
margin-left:410px;
{block:if500pxPosts}
margin-left:510px;
{/block:if500pxPosts}
border-left: 1px solid rgba(0,0,0,0.1);
background-color:{color:info bg};
border-radius:5px;
padding:5px;
font:07px 'trebuchet ms';
text-transform:uppercase;
letter-spacing:1px;
opacity:0;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;}

#inf{
padding:3px;
text-align:center;
text-transform:lowercase;
background-color:{color:info bg};
margin-top:05px;
margin-bottom:05px;
font:07px 'trebuchet ms';
text-transform:uppercase;
letter-spacing:1px;}

#c{
position:fixed;
bottom:10px;
right:12px;
font: 09px georgia;
letter-spacing:1px;
text-align:right;
z-index:99;}

</style>

<script type="text/javascript">
function DropDown(el) {
this.dd = el;
this.initEvents();}
DropDown.prototype = {
initEvents : function() {
var obj = this;
obj.dd.on('click', function(event){
$(this).toggleClass('active');
event.stopPropagation();});}}
$(function() {
var dd = new DropDown( $('#dd') );
$(document).click(function() {
 $('.wrapper').removeClass('active');});});
</script>
<script type="text/javascript" src="http://tympanus.net/Tutorials/CustomDropDownListStyling/js/modernizr.custom.79639.js"></script>

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

</head>
<body>

<div class="container">

<div id="sidebar">

<div class="sb-title"><a href="/">{text:sb title normal}<b>{text:sb title bold}</b></a></div>
{block:ifSidebarPicture}<div class="sidebar-image"><img src="{image:sidebar}"></div>{/block:ifSidebarPicture}
 <section class="main"><div class="wrapper-demo">
<div id="dd" class="wrapper" tabindex="1">{Title}
<lu class="dropdown">
<li><a href="{text:Link 01 URL}">{text:Link 01 title}</a></li>
<li><a href="{text:Link 02 URL}">{text:Link 02 title}</a></li>
<li><a href="{text:Link 03 URL}">{text:Link 03 title}</a></li>
<li><a href="{text:Link 04 URL}">{text:Link 04 title}</a></li>
</lu></div></div></section>

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

{block:Pagination}{block:ifNotInfiniteScrolling}<div class="pag">
{block:PreviousPage}<a href="{PreviousPage}" class="jump_page">prev</a>{/block:PreviousPage}
{block:JumpPagination length="3"}
{block:CurrentPage}<span class="current_page">{PageNumber}</span>{/block:CurrentPage}
{block:JumpPage}<a class="jump_page" href="{URL}">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination}
{block:NextPage}<a href="{NextPage}" class="jump_page">next</a>{/block:NextPage}</div>{/block:ifNotInfiniteScrolling}
{/block:Pagination}
</div>

<div id="c">
<a href="http://caulfielld.tumblr.com" target="_blank" title="theme by caulfielld"><em>tc.</em></a>
</div>

<div class="entries">

{block:ifInfiniteScrolling}<div class= "autopagerize_page_element">{/block:ifInfiniteScrolling}

{block:Posts}

{block:ContentSource}
<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
{/block:SourceLogo}
{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
{/block:ContentSource}

<div id="posts">

{block:IndexPage}
{block:Date}<div class="oinfo"><a href="{Permalink}" title="{block:NoteCount}w/ {NoteCountWithLabel}{/block:NoteCount}">{DayOfMonthWithZero}/{MonthNumberWithZero}/{ShortYear} <br>{12HourWithZero}:{Minutes}{AmPm}</a>{block:HasTags}<br>{block:Tags}#<a href="{TagURL}">{Tag}</a> {/block:Tags}{/block:HasTags}</div>{/block:Date}
{/block:IndexPage}

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

{block:Photo}
{block:IndexPage}{block:Date}
<div class="posts-info"><a href="{ReblogURL}"><i class="fa fa-retweet"></i></a> {block:HighRes} <a href="{PhotoURL-HighRes}"><i class="fa fa-search"></i></a>{/block:HighRes} <a href="{Permalink}" title="permalink"><i class="fa fa-slack"></i></a></div>
{/block:Date}{/block:IndexPage}
<center>{LinkOpenTag}<img src="{PhotoURL-500}" class="images">{LinkCloseTag}
</center>{block:ifShowCaption}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:ifShowCaption}{block:ifNotShowCaption}{block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}{/block:ifNotShowCaption}
{/block:Photo}

{block:Photoset}
{block:IndexPage}{block:Date}
<div class="posts-info"><a href="{ReblogURL}"><i class="fa fa-retweet"></i></a>{block:HighRes}<a href="{PhotoURL-HighRes}"><i class="fa fa-search"></i></a>{/block:HighRes}{block:HasTags}<a href="{Permalink}" title="permalink"><i class="fa fa-slack"></i></a> {/block:HasTags}
</div>{/block:Date}{/block:IndexPage}
{block:IndexPage}{block:ifNot500pxPosts}<div class="images">{Photoset-400}</div>{/block:ifNot500pxPosts}{block:if500pxPosts}<div class="images">{Photoset-500}</div>{/block:if500pxPosts}{/block:IndexPage}{block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}
{block:ifShowCaption}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:ifShowCaption}{block:ifNotShowCaption}{block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}{/block:ifNotShowCaption}
{/block:Photoset}

{block:Answer}
<div class="quest">
<u>{Asker}</u>: {Question}</div>
{Answer}
{/block:Answer}

{block:Quote}<div class="quote">
<div class="quotetext-{Length}">{Quote}</div>
{block:Source}
<div class="quote-source">{Source}</div>
{/block:Source}
</div>{/block:Quote}

{block:Link}
<div class="text-title">
<a href="{URL}" target="{Target}">{Name} <b>&rarr;</b></a></div>
{block:Description}{Description}{/block:Description}
{/block:Link}

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

{block:Video}
{block:IndexPage}{block:ifNot500pxPosts}{Video-400}{/block:ifNot500pxPosts}{block:if500pxPosts}{Video-500}{/block:if500pxPosts}{/block:IndexPage}
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{/block:Video}

{block:Audio}
<div class="audio">
{block:AudioPlayer}{AudioPlayerWhite}{/block:AudioPlayer}
<div class="au-info">{block:TrackName}{TrackName}{/block:TrackName}
{block:Artist}<small><b>{Artist}</b></small>{/block:Artist}</div>
</div>
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{/block:Audio}

{block:PermalinkPage}
{block:Date}
<div id="inf">
posted <a href="{Permalink}">{TimeAgo}</a>
{block:NoteCount}w/ <a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}{block:RebloggedFrom} — <a href="{ReblogParentURL}" title="{ReblogParentTitle}">via</a> <a href="{ReblogRootURL}" title="{ReblogRootTitle}">(source)</a>{/block:RebloggedFrom}
{block:HasTags}<br />tagged as {block:Tags}<a href="{TagURL}">#{Tag} </a>{/block:Tags} {/block:HasTags}
</div>{/block:Date}{/block:PermalinkPage}

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

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

{/block:Posts}
</div><!-- entries -->
</div><!-- container-->

{block:ifInfiniteScrolling}<a class="scrollup">Scroll</a>{/block:ifInfiniteScrolling}

</body>
</html>