Sunrise

<!-- septim theme -->

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

<meta name="color:Background" content="#ffffff"/>
<meta name="color:Text" content="#aaaaaa"/>
<meta name="color:Link" content="#cccccc"/>
<meta name="color:Title" content="#000000"/>
<meta name="color:Link Hover" content="#000000"/>
<meta name="color:Scrollbar" content="#aaaaaa"/>
<meta name="color:Borders" content="#eeeeee"/>

<meta name="if:Hide Tags" content="1"/>
<meta name="if:Hide Captions" content="1"/>

<meta name="if:500px" content="1"/>

<meta name="image:Header Image" content=""/>
<meta name="image:About Image" content=""/>

<meta name="if:Header Image" content="1"/>
<meta name="if:About Image" content="1"/>

<meta name="text:Short URL" content="url here"/>
<meta name="text:About Title" content="About"/>
<meta name="text:Message Title" content="Message"/>
<meta name="text:Links Title" content="Links"/>

<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="" />
<meta name="text:Link 4 URL" content="" />
<meta name="text:Link 4" content="" />
<meta name="text:Link 5 URL" content="" />
<meta name="text:Link 5" 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>

<script src="http://static.tumblr.com/sas2ex2/ovqn6rc4a/woo.js" type="text/javascript"></script>

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

<script type="text/javascript" src="http://static.tumblr.com/fki2yxd/XtUmn1zq3/jquery.sticky.js"></script>
  <script>
    $(window).load(function(){
      $(".sidebar").sticky({ topSpacing: 50 });
      $("#blogt").sticky({ topSpacing: 0 });
    });
  </script>


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


<!--CSS customization here. -->

<style type="text/css">

@import url(http://weloveiconfonts.com/api/?family=fontawesome);

/* fontawesome */
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

#s-m-t-tooltip{
    position:absolute;
    margin:20px 15px;
    z-index:9999;
    background:{color:background};
    font-size:8px;
    text-transform:uppercase;
    letter-spacing:1px;
    font-family:lato;
    border:1px solid {color:borders};
    padding:5px 10px;
    box-shadow:2px 2px 2px rgba({RGBcolor:text},.6);
}

#text {position:fixed;
right:15px;
bottom:15px;
font-size:10px;}

/*basics*/
blockquote {padding:0 0 0 10px;
border-left:3px solid {color:borders};
margin:5px 0;
}

body {
background:{color:background};
color:{color:text};
font-family:georgia;
font-size:12px;
text-align:justify;
margin:0;
line-height:150%;}

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

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


::-webkit-scrollbar-thumb{
background:{color:scrollbar};
border:3px solid {color:background};
height:auto;
}

::-webkit-scrollbar {
height:auto;
width:11px;
background:{color:scrollbar};
border:5px solid {color:background};
}


iframe#tumblr_controls {
    -webkit-filter: invert(100%);
    -moz-filter: invert(100%);
    -o-filter: invert(100%);
    -ms-filter: invert(100%);
    filter: invert(100%);
    white-space:nowrap;
}


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


small {
font-size:12px;}

big {
font-size:12px;}


#title {font-size:15px;
margin-bottom:25px;
text-align:center;
color:{color:title};
}
#title a {color:{color:title};}

/*header*/
#header {
{block:ifHeaderImage}
margin-top:250px;
{block:if500px}
margin-top:350px;
{/block:if500px}
{/block:ifHeaderImage}
{block:ifnotHeaderImage}
margin-top:100px;
{block:if500px}
margin-top:200px;
{block:if500px}
{/block:ifnotHeaderImage}
}


#blogt {width:400px;
{block:if500px}
width:500px;
{/block:if500px}
padding:0 50px 0 49px;
font-weight:700;
font-family:lato;
text-align:center;
position: relative;
line-height:69px;
z-index:1000;
background:{color:background};
border-bottom:1px solid {color:borders};
border-left:1px solid {color:borders};
letter-spacing:3px;
text-transform:uppercase;
}
#blogt a {color:{color:title};}

*[class^="prlx"] {
  position: absolute;
  overflow:hidden;
  width: 500px;
  height: 250px;
  {block:if500px}
  width: 600px;
  height: 350px;
  {/block:if500px}
  top:0;
  left:0;
  z-index: -1;
}
.prlx-1{ background: url('{image:header image}') center center repeat;
      -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


.sidebar {
z-index:2!Important;
position:Relative;
display:block;
}
#s {
position:absolute;
}
.wrap {position:absolute;
background:{color:background};
width:300px;
left:-300px;
}
.nav {
margin-left:15px;
padding-top:50px;
width:15px;
list-style:none;
z-index:9999;
}

#bar {width:600px;
position:fixed;
top:0;
background:{color:background};
border-right:1px solid {color:borders};
left:50%;
margin-left:-850px;
  {block:if500px}
  margin-left:-900px;
    {block:if500px}
z-index:20!important;
    height:100%;
}

.nav li {cursor:pointer;
font-size:12px;
display:block;
margin-bottom:15px;
}

.nav li:hover, .nav li.active {color:black;}

.panel {padding:50px 15px;
background:{color:background};
width:270px;
position:absolute;}

.panel #one {left:0;}
.panel #two, .panel #three, .panel #four {left:-300px;}

#two a {display:block;
margin:5px 0;
text-transform:uppercase;
letter-spacing:1px;
font-size:10px;
float:left;
width:50%;
font-family:lato;
text-align:right;
}

#avatar {text-align:center;margin-bottom:25px;}
#avatar img {width:100px;
height:100px;
border-radius:100%;
}

.tat {color:{color:title};
font-size:14px;
margin-bottom:15px;
text-transform:capitalize;
}
#two .tat {padding-bottom:10px;
border-bottom:1px solid {color:borders};}

.huh {width:20px;text-align:center;}
/*pagination*/
#pagination {
margin:100px 0 50px 0;
text-align:center;
font-style:italic;
font-size:12px;
}
#pagination a {
padding:0 15px;
}

/*container*/
#con {
left:50%;
top:0;
width:500px;
margin-left:-250px;
{block:if500px}
width:600px;
margin-left:-300px;
{/block:if500px}
position:absolute;
overflow-x:hidden;
}
.woah {border-left:1px solid {color:borders};
border-right:1px solid {color:borders};
background:transparent;
width:500px;
margin-left:-251px;
{block:if500px}
width:600px;
margin-left:-301px;
{/block:if500px}
height:100%;
left:50%;
top:0;
position:fixed;
}


/*posts*/

#entries {display:block;
background:{color:background};
width:400px;
{block:if500px}
width:500px;
{/block:if500px}
border-left:1px solid {color:borders};
padding:50px 50px 50px 49px;
}



#posts {
width:400px;
{block:if500px}
width:500px;
{/block:if500px}
{block:IndexPage}
margin-bottom:100px;
{/block:IndexPage}
{block:PermalinkPage}
margin-bottom:50px;
{/block:PermalinkPage}

}
#posts img {
max-width:400px;
{block:if500px}
max-width:500px;
{/block:if500px}
}

#posts img, #posts li, #posts blockquote {max-width: 100%;}
.caption {
width:100%;
margin-top:10px;
{block:ifhidecaptions}
{block:indexpage}
display:none;
{/block:indexpage}
{/block:ifhidecaptions}
}

/*quote*/

#titlequote{text-align:center;
font-size:16px;
line-height:200%;
color:{color:title};
}
#source {
margin-top:15px;
text-align:center;}

/*audio*/
.tumblr_audio_player {width:400px;}

.player {
width:30px;
height:30px;
overflow:hidden;
background:white;
margin:0 auto;
text-align:center;
}

.audioinfo {
margin-top:15px;
text-align:center;
}


/*asks*/
.q {margin-bottom:25px;
text-align:center;
font-style:italic;
}
.as {color:{color:title};
font-weight:bold;
margin-bottom:10px;
}
.as a {color:{color:title};}

.a {
margin-top:10px;
}


/*chat*/

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

.label {font-weight:bold;
}





/*permalink and notes*/

#permalink {
margin-top:15px;
padding-top:10px;
border-top:1px solid {color:borders};
font-size:8px;
letter-spacing:1px;
text-align:center;
text-transform:uppercase;
font-family:lato;
}
#permalink a {margin:0 5px;
color:{color:text};
}
#permalink a:hover {color:{color:link hover};}
.tags {
word-break:break-all;
{block:ifhidetags}
{block:indexpage}
display:none;
{/block:indexpage}
{/block:ifhidetags}
}

.pagenotes {
font-size:10px;
width:400px;
{block:if500px}
width:500px;
{/block:if500px}
text-align:center;
margin-bottom:100px;
}
.pagenotes img {
display:none!important;}
.pagenotes ol {margin:0;padding:0;
line-height:200%;}
.pagenotes li {font-family:lato;
list-style-type:none;
text-align:center;
text-transform:uppercase;
letter-spacing:1px;
}

input[type="search"] {
-webkit-appearance:textfield;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box;
box-sizing:content-box}

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {-webkit-appearance:none}

.search-form {margin:0 0 20px 0;
border:none;
border-bottom:1px solid {color:borders};
}

#lame {position:Absolute;
right:15px;
margin-top:10px;
width:15px;
background:transparent;
}

.search-form input {
border:none;
width:250px;
padding:5px 20px 5px 0;
background:{color:background};
outline:none
}

.search-form input:focus{outline:none}


{CustomCSS}


</style>



</head>


<body>

<div id="bar"></div>

<div class="woah"></div>
<div id="con">


<div id="header">
{block:ifheaderimage}<div class="prlx-1"></div>{/block:ifheaderimage}
    <div id="blogt"><a href="/">{Title}</a></div>
<div id="s">
    <div class="sidebar">
        <div class="wrap">
            <div class="panel" id="one">
            {block:ifaboutimage}<div id="avatar"><img src="{image:about image}"></div>{/block:ifaboutimage}
            <div class="tat">{text:About Title}</div>
            {Description}
            </div>
            <div class="panel" id="two">
                <form action="/search" class="search-form" method="get">
                    <div class="icon-search" id="lame"></div>
                    <input id="searchField" name="q" placeholder="Search" type="text" value="" />
                </form>
                <div class="tat">{text:Links Title}</div>
                <a href="/">Home</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}
                    {block:ifLink4}<a href="{text:Link 4 URL}">{text:Link 4}</a>{/block:ifLink4}
                    {block:ifLink5}<a href="{text:Link 5 URL}">{text:Link 5}</a>{/block:ifLink5}
            </div>
            <div class="panel" id="three">
                <div class="tat">{text:Message Title}</div>
                    <iframe frameborder="0" height="260" id="ask_form" scrolling="auto" src="http://www.tumblr.com/ask_form/{text:Short URL}.tumblr.com" width="100%"> </iframe>
            </div>
    </div>
    <div class="nav">
        <li class="null" id="o"><span class="fontawesome-user huh"></span></li>
        <li class="null" id="e"><span class="fontawesome-comment huh"></span></li>
        <li class="null" id="t"><span class="fontawesome-reorder huh"></span></li>
    </div>
</div>
</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}<div id="title">{Title}</div>{/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}
{block:ifnot500px}
{LinkOpenTag}<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>{LinkCloseTag}
{/block:ifnot500px}
{block:if500px}
{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}
{/block:if500px}
{/block:Photo}

{block:Photoset}
{block:ifnot500px}
{Photoset-400}
{/block:ifnot500px}
{block:if500px}
{Photoset-500}
{/block:if500px}
{/block:Photoset}

{block:Video}
{block:ifnot500px}
{video-400}
{/block:ifnot500px}
{block:if500px}
{video-500}
{/block:if500px}
{/block:Video}

{block:Audio}
<div class="player">{AudioPlayerWhite}</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">{Asker} said: </div>
{Question}</div>
<div class="a">{Answer}</div>
{/block:Answer}

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

{block:Date}
<div id="permalink">
<a href="{Permalink}" title="{timeago}">{12Hour}:{Minutes} {AmPm}</a>{block:NoteCount}<a href="{Permalink}">{NoteCountwithlabel}</a>{/block:NoteCount}{block:permalinkpage}{block:RebloggedFrom}<a href="{ReblogParentURL}" title="{ReblogParentName}">via</a>{block:ContentSource}<a href="{ReblogRootURL}" title="{ReblogRootName}">source</a>{/block:ContentSource}{/block:RebloggedFrom}{/block:permalinkpage}
{block:HasTags}<div class="tags">{block:Tags}<a href="{TagUrl}">#{Tag}</a>{/block:Tags}</div>{/block:HasTags}
</div>
{/block:Date}



</div>


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


{/block:Posts}


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


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



</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="text"><a href="http://farahmir.tumblr.com" title="septim" target="_blank">&copy;</a></div>
</body>

  <script type="text/javascript">
			$(document).ready(function() {
				$(window).scroll(function(){
					$('*[class^="prlx"]').each(function(r){
						var pos = $(this).offset().top;
						var scrolled = $(window).scrollTop();
				    	$('*[class^="prlx"]').css('top', +(scrolled * 0.5) + 'px');
				    });
				});
			});
		</script>





</html>