Belle

<!--

theme by septim

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


-->


<!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="#cccccc"/>
<meta name="color:link" content="#a7a7a7"/>
<meta name="color:title"content="#070707"/>
<meta name="color:blog title"content="#aaaaaa"/>
<meta name="color:scrollbar" content="#d5d5d5" />
<meta name="color:accents" content="#f4f4f4"/>
<meta name="color:link hover" content="#aaaaaa"/>

<meta name="image:header image" content=""/>

<meta name="if:Show Sidebar Image" content="1"/>
<meta name="if:Hide Captions" content="0"/>
<meta name="if:Show Tags" content="0">



<meta name="text:Link One" content="" />
<meta name="text:Link One Height" content="100"/>
<meta name="text:Link Two" content="" />
<meta name="text:Link Two Height" content="100"/>
<meta name="text:Link Three" content="" />
<meta name="text:Link Three Height" content="100"/>


<!-- jquery -->


<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{
    font-size:9px;
    position:absolute;
    margin-top: 15px;
    letter-spacing:1px;
    z-index:9999;
    background:white;
    color:{color:text};
    text-transform:uppercase;
    padding:2px 3px 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;
}





/*scrollbar*/
::-webkit-scrollbar{height: 5px;
width: 3px;
-webkit-border-radius: 0px;
background-color:{color:background}}
::-webkit-scrollbar-thumb{background-color:{color:scrollbar};}
::-webkit-scrollbar-track{background-color:{color:background};}




#text {position:fixed;
bottom:5px;
right:10px;
text-transform:uppercase;
font-family:arial;
font-weight:bold;
padding:5px 5px;
font-size:14px;
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-webkit-transform:rotate(90deg); /* Safari and Chrome */}
#text a {text-decoration:none;}

/*main structure*/
blockquote {padding:5px 0 5px 30px;
border-left:1px solid {color:text};
margin-left:30px;
}
.caption blockquote {text-align:justify;
border-left:1px solid {color:link hover};}


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


a {
color:{color:link};
text-decoration:none;
border-bottom:1px solid transparent;
-webkit-transition:all 0.6s;
    -moz-transition:all 0.6s;
    -ms-transition:all 0.6s;
    -o-transition:all 0.6s;
    transition:all 0.6s;
}

a:hover {border-bottom:1px solid {color:link hover};
-webkit-transition:all 0.6s;
    -moz-transition:all 0.6s;
    -ms-transition:all 0.6s;
    -o-transition:all 0.6s;
    transition:all 0.6s; }

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


b, strong {
color:{color:title}}
i, em {
font-weight:200;
color:{color:text}}
p {
margin-top:5px;
margin-bottom:5px}
ol {
list-style:normal;}
ul {
list-style:square;}

small {
font-size:8px;}

big {
font-size:12px;}




#title {font-size:12px;
line-height:18px;
font-weight:bold;
text-transform:uppercase;
margin-left:20px;
margin-top:20px;
margin-bottom:15px;
text-align:left;
color:{color:title};}
#title a {color:{color:title};}




/*header*/

#headers {
position:fixed;
font-weight:100;
text-align:left;
z-index:2;
width:140px;
margin-left:475px;
margin-top:100px;

}
#bat img {width:60px;
height:60px;
border:1px solid {color:accents};
padding:5px;
margin-bottom:25px;
border-radius:100%;}
#bat a {border:none;}


#blogt {font-size:12px;
letter-spacing:3px;
text-transform:uppercase;}

#blogt a {color:{color:title};
    text-decoration:none;border:none;}



.standardlinks {
font-size:8px;
letter-spacing:2px;
margin-top:15px;
text-transform:uppercase;
}


.standardlinks a {
margin-bottom:5px;
display:block;
padding:2px 0px;
text-align:left;
text-decoration:none;
margin-left:10px;
line-height:16px;
border-bottom:2px solid transparent;
-webkit-transition:all 0.6s;
    -moz-transition:all 0.6s;
    -ms-transition:all 0.6s;
    -o-transition:all 0.6s;
    transition:all 0.6s;
}
.standardlinks a:before,
.standardlinks label:before {
    width:5px;
    position : absolute;
    content:'';
    height:16px;
    margin-left:-10px;
    z-index:-1;
    background:{color:accents};
    transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -webkit-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
}

.standardlinks a:hover::before,
.standardlinks label:hover::before{
    width:140px;
    background:{color:link hover};
    transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -webkit-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
}
.standardlinks label:hover , .standardlinks a:hover {color:{color:background};}
.standardlinks label{
    padding:5px;
    position: relative;
    margin-bottom:5px;
    cursor:pointer;
    display:block;
    padding:2px 0px;
    text-align:left;
    text-decoration:none;
    margin-left:10px;
    line-height:16px;
    border-bottom:2px solid transparent;
    -webkit-transition:all 0.6s;
    -moz-transition:all 0.6s;
    -ms-transition:all 0.6s;
    -o-transition:all 0.6s;
    transition:all 0.6s;
}

.standardlinks input:checked + label::before,
.standardlinks input:checked + label::before{
    background:{color:link hover};
    width:140px;}

.standardlinks input:checked + label {color:{color:background}}


.standardlinks input{
    display: none;
}
.standardlinks article{
    overflow:hidden;
    margin:0;
font-size:10px;
text-transform:none;
letter-spacing:0;
    height: 0px;
    position: relative;
    z-index: 10;
     -webkit-transition:all 0.6s;
    -moz-transition:all 0.6s;
    -ms-transition:all 0.6s;
    -o-transition:all 0.6s;
    transition:all 0.6s;
}
.standardlinks input:checked ~ article{
 -webkit-transition:all 0.6s;
    -moz-transition:all 0.6s;
    -ms-transition:all 0.6s;
    -o-transition:all 0.6s;
    transition:all 0.6s;
}

.standardlinks input:checked ~ article.ac-1{
    height:{text:link one height}px;
}
.standardlinks input:checked ~ article.ac-2{
    height:{text:link two height}px;
}
.standardlinks input:checked ~ article.ac-3{
    height:{text:link three height}px;
}

#description {margin-top:10px;
line-height:20px;
color:{color:Description};}


/*pagination*/
#pagination {
margin-top:15px;
text-align:center;
text-transform:uppercase;
border-top:5px solid {color:accents};
letter-spacing:1px;
font-size:10px;
font-family:arial;
padding-top:5px;
line-height:16px;
}
#pagination a {
margin:0 6px;
display:inline-block;
border:none;
}

.current_page {margin:0 6px;
text-decoration:none;
font-weight:bold;
display:inline-block;}


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



/*posts*/

#entries {
margin-top:100px;
width:500px;
}



#posts {
width:410px;
{block:IndexPage}
margin-bottom:80px;
{/block:IndexPage}
{block:PermalinkPage}
margin-bottom:50px;
{/block:PermalinkPage}

}
#posts img {
max-width:400px;
display:block;
padding:5px;
background:{color:accents};
}
.photoset {background:{color:accents};
padding:5px;}



#titlequote{
font-size:11px;
line-height:18px;
text-align:center;
border:5px solid {color:accents};
padding:5px;
color:{color:title};
}

#source {text-align:center;
background:{color:accents};
font-size:10px;
padding:5px;
margin-bottom:5px;}

#posts img, #posts li, #posts blockquote {max-width: 100%;}
.caption img{max-width:300px;}
.caption {width:400px;
padding:5px;
margin-top:5px;
background:{color:accents};
text-transform:none;
{block:IfHideCaptions}
{block:IndexPage}
display:none;
{/block:IndexPage}
{/block:IfHideCaptions}
}




/*audio*/

.player {
width:25px;
height:25px;
overflow:hidden;
margin-left:5px;
padding:5px;
position:absolute;
margin-top:5px;
border:7px solid white;
background:white;
z-index:2;}

.audioinfo {
text-align:right;
z-index:2;
position:absolute;
padding-top:12px;
text-transform:uppercase;
width:350px;
font-size:8px;
letter-spacing:1px;
margin-left:50px;
}
.audioinfo b {font-size:14px;
letter-spacing:0;
border-bottom:3px solid black;}

.playerback {height:59px;
background-color:{color:Accents};
}







/*asks*/
.q {
padding:5px;
border:5px solid {color:accents};
}
.as {
font-weight:bold;
margin-right:5px;
text-transform:lowercase;}

.a {
margin:15px 10px;}





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

.line.odd {
background:{color:accents};
padding:5px;
}

.line.even {
padding:5px;
}

.label {font-weight:bold;
padding-right:1px;
letter-spacing:1px;
text-transform:uppercase;
color:{color:title};
}





/*permalink and notes*/


#permalink {
text-align:left;
width:400px;
padding:5px;
background:{color:accents};
margin-top:5px;
font-size:9px;
text-transform:uppercase;
}
#permalink a {margin:0 5px;
}

.tags {{block:ifNotShowTags}
{block:IndexPage}
display:none;
{/block:IndexPage}
{/block:ifNotShowTags}
word-break:break-all;
font-size:9px;
text-align:right;
float:right;
letter-spacing:1px;

}
.tags a{
text-transform:none;
text-decoration:none;}


.pagenotes {
{block:IndexPage}
display: none!important;
{/block:IndexPage}
{block:PermalinkPage}
width:400px;
{/block:PermalinkPage}
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;
font-size:9px;
text-transform:uppercase;
}
.t {
font-size:12px;
font-weight:bold;
letter-spacing:1px;
color:{color:title};
text-transform:uppercase;}











{CustomCSS}


</style>








</head>

<body>



<div id="con">


<div id="headers">
{block:IfShowSidebarImage}
<div id="bat">
    <a href="/"><img src="{image:Header image}"></a>
</div>
{/block:IfShowSidebarImage}
<div id="blogt"><a href="/">{Title}</a></div>

<section class="standardlinks">
<a href="/ask">message</a>

<!--first link-->
{block:ifLinkOne}<div>
        <input id="ac-1" name="accordion-1" type="checkbox" />
        <label for="ac-1">{text:Link One}</label>
        <article class="ac-1">

            <!--put info here-->
            This is where you put info for your first link. Lookie here, a short description. Remember, you can adjust the height of each of these!
            <!--putting {Description} instead of the above text will automatically include your description-->
            <!--end info-->

</article></div>{/block:ifLinkOne}

    <!--second link-->
{block:ifLinkTwo}<div>
        <input id="ac-2" name="accordion-1" type="checkbox"  />
        <label for="ac-2">{text:Link Two}</label>
        <article class="ac-2">

            <!--put info here-->
            A second link, and a list.
            <br>Important things:
            <ul>
                <li>Sex</li>
                <li>Food</li>
            </ul>
            <!--end info-->

</article></div>{/block:ifLinkTwo}

     <!--third link-->
{block:ifLinkThree}<div>
        <input id="ac-3" name="accordion-1" type="checkbox"  />
        <label for="ac-3">{text:Link Three}</label>
        <article class="ac-3">

        <!--put info here-->
        This is  <b>bold text</b> and this is <em>italic text</em>
        and wow even <u>underlined text</u>!
         <!--end info-->

</article></div>{/block:ifLinkThree}
</section>

<div id="description">{Description}</div>
{block:IndexPage}
<div id="pagination">
{block:Pagination}
{block:JumpPagination length="5"}
{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:Pagination}
</div>
{/block:IndexPage}
</div>







<div id="entries">

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


{block:Quote}

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

{/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}
<center>{LinkOpenTag}<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>{LinkCloseTag}</center>
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}


{/block:Photo}

{block:Photoset}
<div class="photoset">
<div style="margin-left:-5px;margin-top:-5px;margin-bottom:-10px">{Photoset-400}</div>
</div>
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}


{/block:Photoset}

{block:Video}
<div class="photoset">
{Video-400}
</div>
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{/block:Video}



{block:Audio}

<div class="audioinfo">
{block:TrackName}<b>{TrackName}</b>{/block:TrackName}{block:Artist}<br>{Artist}{/block:Artist}
</div>
<div class="playerback">
<div class="player">{AudioPlayerWhite}</div>
</div>
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{/block:Audio}

{block:Answer}
<div class="q">
<span class="as">{Asker} said:</span>
{Question}</div>

<div class="a">{Answer}</div>

{/block:Answer}

{block:Date}
<div id="permalink">
<a href="{Permalink}">{DayofMonth}.{MonthNumber}.{Year}</a>{block:NoteCount}<a href="{Permalink}">+ {NoteCount}</a>{/block:NoteCount}
{block:PermalinkPage}
{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}<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:PermalinkPage}
{/block:PermalinkPage}
<div class="pagenotes">
{block:NoteCount}<div class="t">Notes</div>{/block:NoteCount}
{PostNotes}
</ol>



</div>
{/block:PostNotes}
{/block:Posts}





</div>


<div id="text">
<a href="http://farahmir.tumblr.com" target="_blank" title="septim">S</a></div>
</body></html>