Theme 04: Too Loud

<!--THEME 04 BY PONDERRFUL - TOO LOUD
Edit as much as you want, sweetie! But please, do not remove the credit because that would be like using the theme as a base code, and it is NOT a base code. It would be amazing if you would read the rules and reblog/like the post of the theme. Nobody is probably going to read this. Whatever. If you have any questions, you can always ask me, okay? Thank you for using my theme!-->




<!--Farahmir base code-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<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="#000000"/>
<meta name="color:hover" content="#ffffff"/>

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

<meta name="text:secondtitle" content:""/>
<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>




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




<!--CSS customization here. -->

<style type="text/css">

::-webkit-scrollbar { width: 7px; height: 4px; }
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment  { height: 0px; display: block; background: #fff; }
::-webkit-scrollbar-track-piece  { background: #fff; }
::-webkit-scrollbar-thumb {height: 50px; background-color: #ccc; }

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



/*basics*/
blockquote {padding:5px 0 5px 30px;
border-left:1px solid {color:text};
margin-left:30px;
}

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


a {
color:{color:link};
text-decoration:none;
   -moz-transition-duration: all 0.7s ease-in-out;
    -o-transition-duration: all 0.7s ease-in-out;
    -webkit-transition-duration: all 0.7s ease-in-out;
     transition: all 0.7s ease-in-out;
}

a:hover {
text-decoration:none;
color:{color:hover};
    -moz-transition-duration: all 0.7s ease-in-out;
    -o-transition-duration: all 0.7s ease-in-out;
    -webkit-transition-duration: all 0.7s ease-in-out;
     transition: all 0.7s ease-in-out;

}

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


small {
font-size:9px;}

big {
font-size:12px;}


#title {font-size:12px;
line-height:18px;
font-weight:bold;
margin-bottom:10px;
text-transform:uppercase;
text-align:left;}


/*sidebar*/
#sidebar {text-align:left;
position:fixed;
margin-left:-300px;
margin-top:60px;
width:200px;
}

#sidebarim {margin-bottom:20px}

#sidebarim img {width:125px}

#secondtitle {font-size:16px;
font-family: 'Lato', sans-serif;
text-transform:uppercase;
word-spacing:3px;
letter-spacing:2px;
margin-bottom:10px;
}

#secondtitle a {
text-decoration:none;
}

#secondtitle a:hover{
text-shadow: 2px 2px 2px #1C1C1C;
   -moz-transition-duration: all 0.7s ease-in-out;
    -o-transition-duration: all 0.7s ease-in-out;
    -webkit-transition-duration: all 0.7s ease-in-out;
     transition: all 0.7s ease-in-out;

}

#links {
line-height:14px;
text-transform:uppercase;
font-family: 'Lato', sans-serif;
}


#links a {
margin-right:5px;
display:inline-block;
margin-bottom:5px;
   -moz-transition-duration: all 0.7s ease-in-out;
    -o-transition-duration: all 0.7s ease-in-out;
    -webkit-transition-duration: all 0.7s ease-in-out;
     transition: all 0.7s ease-in-out;
}

#links a:hover {
color:{color:hover};
   -moz-transition-duration: all 0.7s ease-in-out;
    -o-transition-duration: all 0.7s ease-in-out;
    -webkit-transition-duration: all 0.7s ease-in-out;
     transition: all 0.7s ease-in-out;

}

#description {
margin:20px 0;
opacity:0;
  -moz-transition-duration: all 1s ease-in-out;
    -o-transition-duration: all 1s ease-in-out;
    -webkit-transition-duration: all 1s ease-in-out;
     transition: all 1s ease-in-out;
}

#description:hover {
opacity:1;
  -moz-transition-duration: all 1s ease-in-out;
    -o-transition-duration: all 1s ease-in-out;
    -webkit-transition-duration: all 1s ease-in-out;
     transition: all 1s ease-in-out;
}


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

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



/*posts*/

#entries {
margin-top:75px;
width:500px;
margin-bottom:40px;
}



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

#h1 {
font-family: 'Lato', sans-serif;
}

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

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

}

/*quote*/

#titlequote{text-align:left;
font-size:14px;
line-height:18px;
font-family: 'Lato', sans-serif;
}
#source {
margin-top:15px;
margin-left:15px;}

/*audio*/

.player {
width:25px;
height:25px;
overflow:hidden;
position:absolute;
background:white;}

.audioinfo {
margin-left:50px;
}


/*asks*/
.q {margin-bottom:10px;
font-family: 'Lato', sans-serif;
font-size:12px;
text-align:center;
}
.as {
font-weight:bold;
font-family: 'Lato', sans-serif;
font-size:14px;
text-align:center;
}

.a {
margin-top:10px;
text-align:center;
}


/*chat*/

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

.label {font-weight:bold;
}





/*permalink and notes*/

#permalink {
margin-top:15px;
font-size:9px;
text-transform:uppercase;
font-family: 'Lato', sans-serif;
font-size:10;
}
#permalink a {margin-right:10px;
}


.tags {
word-break:break-all;
font-size:9px;
text-transform:lowercase;
word-spacing:2px;

}



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



    #cred {
            position:fixed;
            color:#e6e6e6;
            font-family:arial;
            bottom:5px;
            right:5px;
            font-size:9px;
            padding:5px;
            text-transform:lowercase;



    }



{CustomCSS}


</style>



</head>

<body>

<div id="cred">
    <a title="ponderrful"href="http://ponderrful.tumblr.com">isa</a>
                    </div>

<div id="con">

<div id="sidebar">
<div id="sidebarim"><img src="{image:Sidebar Image}"></div>
<div id="secondtitle"><a href="/">{text:secondtitle}</a></div>
<div id="links">
{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 id="pagination">
{block:Pagination}
{block:PreviousPage}
<a href="{PreviousPage}">&larr;  </a>
{/block:PreviousPage}


{block:NextPage}
<a href="{NextPage}"> &rarr;</a>
{/block:NextPage}
{/block:Pagination}
</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">&mdash; {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-500}" alt="{PhotoAlt}"/>{LinkCloseTag}
{/block:Photo}

{block:Photoset}
{Photoset-500}
{/block:Photoset}

{block:Video}
{Video-500}
{/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} asked: </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}" >{12Hour}:{Minutes} {AmPm}</a>{block:NoteCount}<a href="{Permalink}">+ {NoteCount}</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}
{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">
{PostNotes}
</div>
{/block:PostNotes}


{/block:Posts}





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



</body></html>