Catamaran

<!DOCTYPE html>
<head><link href='http://fonts.googleapis.com/css?family=Marmelad' rel='stylesheet' type='text/css'>

<!----theme by draculahs @ tumblr,  rules are on my tumblr. :)--->




<title>{Title}</title>

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

<!--Default Variables-->

<meta name="color:Background" content="#ffffff"/>
<meta name="color:Text" content="#aaaaaa"/>
<meta name="linksbg" content="#f1f1f1"/>
<meta name="color:Link" content="#000000"/>

<meta name="image:Sidebar Image" content=""/>
   <meta name="if:SidebarImg" content="1"/>

  <meta name="text:link1" content="">
    <meta name="text:link1 url" content="/">
    <meta name="text:link2" content="">
    <meta name="text:link2 url" content="/">
    <meta name="text:link3" content="">
    <meta name="text:link3 url" content="/">
    <meta name="text:link4" content="">
    <meta name="text:link4 url" content="/">


<!-- jquery for tooltips-->


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>

<script>

(function($){

$(document).ready(function(){

$("a[title]").style_my_tooltips({

tip_follows_cursor:true,

tip_delay_time:30,

tip_fade_speed:300,

attribute:"title"

});

});

})(jQuery);

</script>






<!--CSS customization here. -->

<style type="text/css">

#s-m-t-tooltip{
    position:absolute;
    margin-top: 15px;
    z-index:9999;
    background:{color:background};
}


::-webkit-scrollbar {background-color:white; height:2px; width:5px}
::-webkit-scrollbar-thumb:vertical {background-color:{color:text}; height:50px}
::-webkit-scrollbar-thumb:horizontal {background-color:{color:text}; height:3px!important}


/*basics*/
blockquote {padding-left:5px;
border-left:1px dotted #ddd;
margin-left:20px;
}

body {
background:{color:background};
color:{color:text};
font-family:serif;
font-size:11px;
text-align:justify;
margin:0;
line-height:16px;}


a {
color:{color:link};
text-decoration:none;
}

a:hover {
background:#f1f1f1;}

img{opacity:1;
text-decoration:none;

}

img a:hover {
background:transparent;}
.photoset {

}photoset a:hover {
background:transparent;}


small {
font-size:9px;}

big {
font-size:12px;}


#title {font-size:11px;
line-height:18px;
text-decoration:underline;
font-weight:bold;
margin-bottom:10px;
text-transform:none;
text-align:right;}


/*sidebar*/
#sidebar {
    {block:ifSidebarImg}text-align:justify;
margin:auto;
width:400px;
padding-left:0px;
{/block:ifSidebarImg}
padding-top:100px;
text-align:justify;
margin:auto;width:400px;
padding-left:0px;
}


#sidebarim {margin-top:5px; margin-left:170px;

}

#sidebarim img {width:80px;height:80px;
box-shadow:0px 0px 0px;
border:0px solid;}

#blogt {font-size:14px;
font-weight:lighter;
padding:1px;
font-family:baskerville;

letter-spacing:2px;
text-transform:uppercase;
text-align:center;}

#blogt a:hover{
background-color:transparent;}

#links {
font-size:8px;
font-weight:lighter;
letter-spacing:2px;
margin-top:3px;
font-family:baskerville;background:{color:linksbg};
text-transform:uppercase;
padding:5px;
text-align:center;
}


#links a {
margin-right:5px;
margin-bottom:0px;
font-weight:bold;
}

#links a:hover{

}

#description {
margin:0px 0;
line-height:180%;
padding-top:5px;
font-size:11px;
padding-bottom:10px;
letter-spacing:0px;
}


/*pagination*/
#pagination {
margin:50px 0;
text-transform:lowercase;
font-weight:bold;
}
#pagination a {
padding:0 15px;
}

/*container*/
#con {
left:50%;
margin-left:-250px;
position:absolute;

}



/*posts*/

#entries {
margin-top:100px;
width:400px;
}
 #posts:hover{        -webkit-filter: grayscale(0%);

         -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
 }


#posts {
         padding:0px;
       -webkit-filter: grayscale(0%);

    -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
width:400px;
text-decoration:none;
{block:IndexPage}
margin-bottom:100px;
{/block:IndexPage}
{block:PermalinkPage}
margin-bottom:40px;
{/block:PermalinkPage}

}
#posts img {
max-width:400px;
}


#posts img, #posts li, #posts blockquote {max-width: 100%;}
.caption {width:100%;
margin-top:10px;

}

/*quote*/

#titlequote{text-align:center;
font-size:10px;padding:10px;
text-transform:uppercase;
line-height:18px;
font-weight:lighter;
}
#source {
padding:5px;border-top:1px solid #f1f1f1;
text-align:center;
}

/*audio*/

.player {
width:30px;
height:50px;background:#e4e4e4;
overflow:hidden;
border-right:1px solid #ddd;
position:absolute;
}

.audioinfo {
margin-left:30px;
background:#f8f8f8;
padding:10px;
text-align:left;
}


/*asks*/
.q {margin-bottom:10px;padding:10px;
margin-left:0px;
text-align:left;
width:380px;

background:#f1f1f1;


}
.q img {
padding-right:5px;float:left;box-shadow:0px 0px 0px;
border:0px solid;

}
#asker{
    font-weight:lighter;
    text-transform:uppercase;
    font-size:9px;
}

.a {
margin-top:-10px;
width:390;
padding:5px;
border-left:4px solid #f1f1f1;
border-bottom:4px solid #f1f1f1;
border-top:1px solid #eee;
border-right:4px solid #f1f1f1;

}

/*chat*/

.chat ol {
padding:0;
list-style:none;
}
.line {padding:5px 0;}

.label {font-weight:bold;
}

 #border1 {
 border-left:100px solid {color:background};
 height:60px;
 width:50px;
 margin-top:15px;
 margin-left:20px;
 position:absolute;

 transform: rotate(-60deg);
    -webkit-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    transform: rotate(60deg);
 }#border2 {
 border-right:100px solid {color:background};
 height:60px;
 width:54px;
 margin-top:15px;
 margin-left:-91px;
 position:absolute;

 transform: rotate(60deg);
   -webkit-transform: rotate(-60deg);
   -o-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    transform: rotate(-60deg);
 }



/*permalink and notes*/

#permalink {
margin-top:0px;
font-size:8px;
font-weight:bold;
padding:10px;
z-index:-11111;
text-transform:uppercase;
background:transparent;
max-width:100%;    -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
opacity:1;
text-align:center;
font-family:baskerville;
}
#permalink a {margin-right:10px;
}
#posts:hover #permalink{
    opacity:1;
}


.tags {
font-size:9px;
}

.pagenotes {
{block:IndexPage}
display: none!important;
{/block:IndexPage}
width:400px;
text-align:left;

}
.pagenotes img {
display:none!important;}
.pagenotes li {
list-style-type:none;
padding:5px 0px;
text-align:left;
margin:0 0 0 -40px;
}

 /*CREDIT*/

#cred {
text-transform:lowercase;
font-size:9px;
right:9px;
text-align:center;
bottom:9px;
padding:5px;
padding-top:9px;
padding:1px;
position:bottom right;background:#f1f1f1;
letter-spacing:1px;
color:black;
position:fixed;
-moz-transition-duration:0.3s;
-webkit-transition-duration:0.3s;
-o-transition-duration:0.3s;
}

#cred a {
   font-weight:bold;
    color:black;
    text-align:right;
    -moz-transition-duration:0.3s;
-webkit-transition-duration:0.3s;
-o-transition-duration:0.3s;



}
{CustomCSS}


</style>



</head>

<body>

<div id="con">

<div id="sidebar">
<div id="sidebarim">
{block:ifSidebarImg}

<div id="border1">
</div>{/block:ifSidebarImg}{block:ifSidebarImg}
<div id="border2">
</div>

{/block:ifSidebarImg}
{block:ifSidebarImg}
<img src="{image:sidebar image}">{/block:ifSidebarImg}</div>

<div id="blogt"><a href="/">{Title}</a></div>
<div id="links">
<a href="/">home</a>
<a href="/ask">ask</a>

    {block:IfLink1}
<a href="{text:link1 url}">{text:link1}</a>
{/block:IfLink1}


    {block:IfLink2}
<a href="{text:link2 url}">{text:link2}</a>
{/block:IfLink2}

  {block:IfLink3}
<a href="{text:link3 url}">{text:link3}</a>
{/block:IfLink3}

{block:IfLink4}
<a href="{text:link4 url}">{text:link4}</a>
{/block:IfLink4}


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




</div>




<div id="entries">

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


{block:Quote}


<div id="titlequote">{Quote}</div>
{block:Source}<div id="source"> {Source}</div>{/block:Source}
{/block:Quote}



{block:Text}

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

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

{block:Chat}
{block:Title}
<h1>{Title}</h1>
{/block:Title}
<div class="chat">
<ol>{block:Lines}
<li class="line {Alt}">
{block:Label}
<span class="label">
{Label}</span>
{/block:Label}{Line}</li>
{/block:Lines}
</ol></div>
{/block:Chat}

{block:Photo}
{LinkOpenTag}<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>{LinkCloseTag}
{/block:Photo}

{block:Photoset}<div class="photoset">

{Photoset-400}</div>

{/block:Photoset}

{block:Video}
{Video-400}
{/block:Video}

{block:Audio}
<div class="player">{AudioPlayerGrey}</div>
<div class="audioinfo">
{block:TrackName}{TrackName}{/block:TrackName}{block:Artist}<br>{Artist}{/block:Artist}
</div>
{/block:Audio}

{block:Answer}
<div class="q">
<div class="as"><img src="{AskerPortraitURL-30}"><div id="asker">{Asker}</div>  </div>
{Question}</div>
<div class="a">{Answer}</div>
{/block:Answer}

{block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}


{block:Date}
<div id="permalink">
<a href="{Permalink}" >
{DayOfWeek}</a>
<span style="font-size:10px">( {DayOfMonth}.{monthnumber}.{shortyear} )</span> &nbsp;
&nbsp;

{block:NoteCount}<a href="{Permalink}"><span style="font-size:10px"> + {NoteCount}</span></a>{/block:NoteCount}

{block:RebloggedFrom}<a href="{ReblogParentURL}" title="{ReblogParentName}">via</a> {block:ContentSource}<a href="{ReblogRootURL}" title="{ReblogRootName}">source</a>{/block:ContentSource}{/block:RebloggedFrom}
&nbsp;
  {block:HasTags}<span style="font-weight:lighter;text-transform:lowercase;font-size:9px">{block:Tags}<a href="{TagUrl}">#{Tag}</a>{/block:Tags}</span>{/block:HasTags}

</div>
{/block:Date}

</div>


{block:PostNotes}
<div class="pagenotes">
{PostNotes}
</div>
{/block:PostNotes}


{/block:Posts}

<div id="pagination">
{block:Pagination}
{block:PreviousPage}
<a href="{PreviousPage}">&larr; previous </a>
{/block:PreviousPage}


{block:NextPage}
<a href="{NextPage}">next &rarr;</a>
{/block:NextPage}
{/block:Pagination}
</div>


</div>


</div>


{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="cred">theme by<br>
  <a href="http://draculahs.tumblr.com/">draculahs</a>

</div>






</body></html>