Whiterun

<!DOCTYPE html>


<!--

theme by septim

╔╔ ══ ══        Rules:
║║                     -do not use as base
╚╚ ══ ╗╗               -do not steal bits of code
      ║║               -do not remove credits
══ ══ ╝╝


-->
<html>
    <head>
        <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 are here, folks-->
<meta name="color:Background" content="#ffffff"/>
<meta name="color:Text" content="#cccccc"/>
<meta name="color:link" content="#a7a7a7"/>
<meta name="color:title"content="#070707"/>
<meta name="color:blog title" content="#000000">


<meta name="text:Link 1 URL" content="" />
<meta name="text:Link 1" content="" />
<meta name="text:Link 2 URL" content="" />
<meta name="text:Link 2" content="" />
<meta name="text:Link 3 URL" content="" />
<meta name="text:Link 3" content="" />
        <!-- jQuery -->
        <script src="http://static.tumblr.com/j9zrgpw/Pikmg130a/jquery-1.7.1.min.js"></script>

        <!-- Modernizr -->
        <script src="http://static.tumblr.com/j9zrgpw/3iymg1311/modernizr-1.7.min.js"></script>


        <!--[if IE]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
            <![endif]-->



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




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

    <style type="text/css">



#s-m-t-tooltip{
    font-size:8px;
    position:absolute;
    margin-top: 15px;
    letter-spacing:1px;
    z-index:9999;
    background:rgba(255,255,255,1);
    border-radius:2px;
    color:black;
    padding:5px 3px;
    line-height:8px;
    -webkit-transition:all 0.3s;
    -moz-transition:all 0.3s;
    -ms-transition:all 0.3s;
    -o-transition:all 0.3s;
    transition:all 0.3s;
}

::-moz-selection {
background:black;
color:white;
}

::-webkit-selection {
background:black;
color:white;
}

/* TO TOP BUTTON */
#toTop {
text-align:center;
margin:auto;
position:fixed;
display:none;
bottom:20px;
font-size:24px;
cursor:pointer;
}

#right_container {
position: fixed;
top: 30%;
right: 40px;
z-index:100;
font-size: 18px;
}




body{background:{color:background};
font-family:raleway;
font-size:11px;
line-height:14px;
color:{color:Text};
text-align:justify;
padding:40px 20px;
margin:0}

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

a:hover{
text-decoration:underline;
}

#blogt{font-size:34px;;
letter-spacing:1px;
text-transform:uppercase;
color:{color:blog title};}

#s {
margin:80px auto 0 auto;
width:500px;
text-align:center;}

#standardlinks {text-transform:uppercase;
margin-top:15px;}

#standardlinks a {
text-decoration:none;
margin:5px;
padding:2px 3px;
    -webkit-transition:all 0.3s;
    -moz-transition:all 0.3s;
    -ms-transition:all 0.3s;
    -o-transition:all 0.3s;
    transition:all 0.3s;
}
#standardlinks a:hover {background:rgba(0,0,0,1);
color:white;
    -webkit-transition:all 0.3s;
    -moz-transition:all 0.3s;
    -ms-transition:all 0.3s;
    -o-transition:all 0.3s;
    transition:all 0.3s; }


#description {
margin-top:5px;
text-align:center;
}

#container{margin-top:50px;
padding:0}



#posts {margin:0 auto;
clear:both}

.post {margin:50px;
float:left;
min-width:340px;
background:{color:background};}


.post img { -webkit-transition-duration:0.6s;
    -moz-transition-duration:0.6s;
    -o-transition-duration:0.6s;
    transition-duration:0.6s;
    border:5px solid #f4f4f4;}

.double{width:330px;
float:left;
}

.double img{width:340px;
display:block;
}
{block:IndexPage}
.post img:hover {opacity:.5;
 -webkit-transition-duration:0.6s;
    -moz-transition-duration:0.6s;
    -o-transition-duration:0.6s;
    transition-duration:0.6s}
{/block:IndexPage}



.fade{display:normal}

.masonry,.masonry .masonry-brick{
    -webkit-transition-duration:0.6s;
    -moz-transition-duration:0.6s;
    -o-transition-duration:0.6s;
    transition-duration:0.6s}

   .masonry .masonry-brick{-webkit-transition-property:left, right, top;
-moz-transition-property:left, right, top;
-o-transition-property:left, right, top;
transition-property:left, right, top}





.chat{
margin:0;}

.chat ol {
padding:0;
line-height:180%;
list-style:none;
}

.line.odd {
}

.line.even {

}

.label {
padding-right:1px;
letter-spacing:1px;
text-transform:uppercase;
color:{color:title};
}
{block:PermalinkPage}.text img {max-width:540px;}{block:PermalinkPage}
.text {
margin:0;
}
.link{}

.link p{margin:0}

.quote{
font-size:16px;
text-align:left;
color:{color:title};
line-height:20px;}
.source {letter-spacing:0;
font-size:10px;}

/*audio*/

.player {
    padding:10px;
    width:20px;
    overflow:hidden;
}
#song img {margin-bottom:5px;}
.audioinfo {
text-align:right;
padding-right:10px;
padding-top:12px;
color:white;
background:black;
float:right;
letter-spacing:1px;
}


.playerback {
width:100%;
background-color:black
}

blockquote {
text-align:center;
margin:0;
background-color:#f2f2f2;

}


#question {line-height:14px;
}
.asker a {color:{color:text}}
.answer {margin-top:5px}

.caption {padding:10px 0;
text-align:center;}
#ps {padding-top:0px;}

#ps a {letter-spacing:1px;
text-transform:uppercase;}

.tags {
word-break:break-all;


}
.tags a{
letter-spacing:1px;
padding:0 5px;
text-transform:none;}

#pagination {

	display: none;}



    {CustomCSS}

    </style>


    </head>

<body>



<div id="right_container">
<div id="toTop"><img src="http://static.tumblr.com/95njt7t/WY7lqgdrx/backtotop_arrowblk.png"></div>
</div>

<div id="s">

<div id="blogt">{Title}</div>
<div id="standardlinks">
<a href="/" >Home</a>
<a href="/ask">Ask</a>
{block:ifLink1}<a href="{text:Link 1 URL}">{text:Link 1}</a>{/block:ifLink1}
{block:ifLink2}<a href="{text:Link 2 URL}">{text:Link 2}</a>{/block:ifLink2}
{block:ifLink3}<a href="{text:Link 3 URL}" >{text:Link 3}</a>{/block:ifLink3}
<a href="http://farahmir.tumblr.com/" target="_blank" title="septim">theme</a>
</div>
<div id="description">{Description}</div>

</div>


<div id="container">









    <section id="posts">

    {block:Posts}



                <section class="post double">






        {block:Text}
        <!-- Text Post -->
        <div class="text">
            {block:Title}<a href="{Permalink}"><span style="font-size:14px;text-transform:uppercase">{Title}</span></a>{/block:Title}


            {Body}
        </div>
        {/block:Text}





        {block:Photo}
        <!-- Photo post -->

            {block:IndexPage}
                <a href="{Permalink}" title="{TimeAgo}"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/></a>
            {/block:IndexPage}

            {block:PermalinkPage}
                <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>
            {/block:PermalinkPage}

        {/block:Photo}




        {block:Photoset}
        <!-- Photoset post -->
            {block:Photos}
<div id="song">
                {block:IndexPage}
                    <a href="{Permalink}" title="{TimeAgo}"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" /></a>
                {/block:IndexPage}

                {block:PermalinkPage}
                    <img src="{PhotoURL-500}" width="{PhotoWidth-500}" />

                {/block:PermalinkPage}
</div>
            {/block:Photos}


        {/block:Photoset}




        {block:Video}
        <!-- Video post -->

            {Video-250}


        {/block:Video}





        {block:Quote}
        <!-- Quote post -->

            <div class="quote">“{Quote}”
                {block:Source}
                    <div class="source">
                    <a href="{Permalink}">&rarr; {Source}</a>

                    </div>
                {/block:Source}
            </div>

        {/block:Quote}





        {block:Chat}
        <!-- Chat post -->

            <div class="chat">

                    {block:Title}
                        <h1>{Title}</h1>
                    {/block:Title}
                        <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:Audio}

            <div class="playerback">
            <div class="audioinfo">
                <a href="{Permalink}" style="color:white">{block:TrackName}{TrackName}{/block:TrackName}{block:Artist}<br>{Artist}{/block:Artist}</a>
            </div>
                <div class="player">{AudioPlayerBlack}</div>

            </div>
        {/block:Audio}



        {block:Link}
        <!-- Link post -->

            <div class="link">
                <a href="{URL}" class="the-link" {Target}>{Name} &rarr;</a>

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

        {/block:Link}

        {block:Answer}
            <div class="text">
            <div id="question">
                    <span class="asker">{Asker} said:</span>
                    {Question}
            <div class="answer">{Answer}</div>
            </div>
            </div>
        {/block:Answer}



{block:PermalinkPage}
{block:Date}
<div id="ps">
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
<br>
<span style="font-weight:bold;text-transform:uppercase">Posted: </span>
<a href="{Permalink}">{TimeAgo}</a>
{block:NoteCount}<br>
<span style="font-weight:bold;text-transform:uppercase">Notes: </span><a href="{Permalink}">{NoteCount}</a>{/block:NoteCount}
{block:ContentSource}
<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
{/block:SourceLogo}
{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
{/block:ContentSource}
{block:RebloggedFrom}<br>
<span style="font-weight:bold;text-transform:uppercase">Reblogged from: </span>
<a href="{ReblogParentURL}">{ReblogParentName}</a>
{block:ContentSource}<br>
<span style="font-weight:bold;text-transform:uppercase">Source: </span>
<a href="{ReblogRootURL}">{ReblogRootName}</a>{/block:ContentSource}{/block:RebloggedFrom}
{block:HasTags}<div class="tags">
<span style="font-weight:bold;text-transform:uppercase">FILED AS: </span>
{block:Tags}<a href="{TagUrl}">{Tag}</a>{/block:Tags}</div>{/block:HasTags}
</div>
{/block:Date}
{/block:PermalinkPage}

</section>
    {/block:Posts}

    </section>

<ul id="pagination" style="margin: 0; padding: 0;">
<li style="margin: 0; padding: 0;">
{block:Pagination}
{block:PreviousPage}<a href="{PreviousPage}">{/block:PreviousPage}{lang:PREV}{block:PreviousPage}</a>{/block:PreviousPage}
<span class="bull">/</span>
{block:NextPage}<a href="{NextPage}" class="pagination_nextlink">{/block:NextPage}{lang:NEXT}{block:NextPage}</a>{/block:NextPage}
{/block:Pagination}
</li>
</ul>




</div> <!-- #container -->


<!-- jQuery Masonry -->


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});

$('#toTop').click(function() {
$('body,html').animate({scrollTop:0},800);
});
});
</script>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://static.tumblr.com/glziqhp/DMKlqoahr/jquery.masonry.min.js"></script>
<script src="http://static.tumblr.com/misqj4e/wRnm75f7d/totop.js" type="text/javascript"></script>
<script src="http://static.tumblr.com/j9zrgpw/M6qmg12yb/jquery.masonry.min.js"></script>
<script src="http://static.tumblr.com/glziqhp/dTTlsbw8e/jquery.infinitescroll.min.js"></script>
<script>
$(window).load(function(){




  $(function(){

    var $container = $('#posts');
    $container.imagesLoaded(function(){
      $container.masonry({
        itemSelector: '.post',
        columnWidth: 440,
        isFitWidth: true,
        isAnimated: !Modernizr.csstransitions

     });

    $container.infinitescroll({
      navSelector  : '#pagination',    // selector for the paged navigation
      nextSelector : '#pagination li a.pagination_nextlink',  // selector for the NEXT link (to page 2)
      itemSelector : '.post',     // selector for all items you'll retrieve
      loading: {
          img: 'http://static.tumblr.com/glziqhp/Dadlv68zl/1.gif',
  donetext  : ''
        }
      },
      // trigger Masonry as a callback
function( newElements ) {
  var $newElems = $( newElements ).css({ opacity: 0 });
  // ensure that images load before adding to masonry layout
  $newElems.imagesLoaded(function(){
    $newElems.animate({ opacity: 1 });
    $container.masonry( 'appended', $newElems, true );
  });
}
    );

  });
  });



});
</script>


    </body>
</html>