Container Theme August

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>{Title}</title>

<link rel="shortcut icon" href="{Favicon}">




<!----------------------FONTS-------------------------->

<link href='https://fonts.googleapis.com/css?family=Oleo+Script:400,700' rel='stylesheet' type='text/css'>

<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>

<link href='https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,300' rel='stylesheet' type='text/css'>

<!----------------------JAVASCRIPT-------------------------->


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



<!----------------------META TAGS-------------------------->

<meta name="image:Side Image" content="http://static.tumblr.com/wdbtmuh/HG1obtile/zuiouhjo.png" />


<meta name="color:Background" content="#1b1b1b" />
<meta name="color:Navigation Links" content="#706666" />
<meta name="color:Navigation Links Hover" content="#393333" />
<meta name="color:Container Border" content="#393333" />
<meta name="color:Container Background" content="#202020" />
<meta name="color:Blog Title" content="#252525" />
<meta name="color:Blog Title Glow" content="#848484" />
<meta name="color:Blog Quote" content="#282828" />
<meta name="color:Description Background" content="#0c0a0a" />
<meta name="color:Description Border" content="#554f4d" />
<meta name="color:Description Text" content="#888888" />
<meta name="color:Description Bold" content="#c18484" />
<meta name="color:Description Italic" content="#655555" />
<meta name="color:Description Link" content="#aaaaaa" />
<meta name="color:Description Link Hover" content="#605959" />
<meta name="color:Post Background" content="#1a1a1a" />
<meta name="color:Post Title" content="#625c5c" />
<meta name="color:Text" content="#525252" />
<meta name="color:Bold" content="#706864" />
<meta name="color:Italic" content="#9d9d9d" />
<meta name="color:Blockquote" content="#6b6664" />
<meta name="color:Links" content="#979797" />
<meta name="color:Links hover" content="#494949" />
<meta name="color:Post Info" content="#474747" />
<meta name="color:Post Info Hover" content="#686868" />
<meta name="color:Tags" content="#474747" />
<meta name="color:Tags Hover" content="#686868" />
<meta name="color:Ask Background" content="#282525" />
<meta name="color:Ask Text" content="#707070" />

<meta name="text:Blog Quote" content="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore" />

<meta name="text:Sidebar Image Position Left" content="0" />
<meta name="text:Sidebar Image Position Top" content="0" />


<meta name="text:Link1" content="/" />
<meta name="text:Link1 Title" content="Link1" />
<meta name="text:Link2" content="/" />
<meta name="text:Link2 Title" content="Link2" />
<meta name="text:Link3" content="/" />
<meta name="text:Link3 Title" content="Link3" />
<meta name="text:Link4" content="/" />
<meta name="text:Link4 Title" content="Link4" />
<meta name="text:Link5" content="/" />
<meta name="text:Link5 Title" content="Link5" />
<meta name="text:Link6" content="/" />
<meta name="text:Link6 Title" content="Link6" />

<meta name="if:PhotoFading" content="1" />




<!----------------------CSS-------------------------->

<style type="text/css">

@import url('http://k003.kiwi6.com/hotlink/nhl43ohwzb/stylesheet.css');

/*----------basics-----------*/

    iframe#tumblr_controls {
    z-index:999999999999999;
    right:2px !important;
    position: fixed !important
    }

	body {
	background-image: url("{image:Background Image}");
	background-color:{color:Background};
	background-attachment:fixed;
    font-family: calibri;
	font-size: 11px;
	color:{color:Text};
    margin:0;
    width:100%;
    overflow-x:hidden;
	}

	small{
	font-size: 9px;
	letter-spacing:0.5px;
	}

	h2{
	font-size: 14px;
	font-family:  calibri;
	}

    a {
    color:{color:Links};
    text-decoration:none;
    transition:0.5s;
    -o-transition-transition:0.5s;
    -webkit-transition-duration:0.5s;
    -moz-transition-duration:0.5s;
    }

    a:hover {
    color:{color:Links hover};
    transition:0.5s;
    -o-transition-transition:0.5s;
    -webkit-transition-duration:0.5s;
    -moz-transition-duration:0.5s;
    }


    b, strong{
    font-style:bold;
    color:{color:Bold};
    }

    pre{
    margin-left:10px;
    padding:3px;
    font-size:9px;
    color:{color:Ask Text};
    background-color:{color:Ask Background};
    }

    i, em{
    font-style:italic;
    color:{color:Italic};
    }

    u {
    text-decoration: underline;
    }

    blockquote {
    text-align:justify;
    width:95%;
    margin-bottom:10px;
    padding:0px 5px 0px 10px;
    margin-left:0px;
    border-left:1px solid {color:Blockquote};
    }

    blockquote blockquote {
    padding:0 0 0 10px;
    color:{color:Text};
    }

    blockquote {
    font-size:10px;
    }

    blockquote img {
    max-width:300px;
    height:auto;
    }



/*----------sidebar-----------*/


    .container {
    width:1220px;
    margin-top:100px;
    margin-left:auto;
    margin-right:auto;
    height:645px;
    overflow:auto;
    position:relative;
    vertical-align: middle;
    }


    .side-container {
    width:710px;
    margin-left:510px;
    height:645px;
    position:absolute;
    background-image: url("{image:Side Image}");
    background-repeat: no-repeat;
    background-position: {text:Sidebar Image Position Left}px {text:Sidebar Image Position Top}px;
    }


    .title-container{
    max-width:300px;
    }

    #blogtitle{
    text-align:right;
    font-family: 'Oleo Script', cursive;
    font-weight:bold;
    color:{color:Blog Title};
    font-size:30px;
    text-shadow: 0 0 3px {color:Blog Title Glow};
    }

    #blogquote{
    font-family: 'Yanone Kaffeesatz', sans-serif;
    text-align:right;
    color:{color:Blog Quote};
    font-size:12px;
    font-style:italic;
    letter-spacing:0.5px;
    }



	.desc {
	width:120px;
	position:absolute;
    background: {color:Description Background};
	margin-top:150px;
	opacity:0.5;
	font-family: calibri;
	text-align:justify;
	font-size:10px;
	color: {color:Description Text};
	padding:10px;
	border:1px solid {color:Description Text};
	transition:0.5s;
    -o-transition-transition:0.5s;
    -webkit-transition-duration:0.5s;
    -moz-transition-duration:0.5s;
	}

	.desc:hover{
	opacity:1;
	transition:0.5s;
    -o-transition-transition:0.5s;
    -webkit-transition-duration:0.5s;
    -moz-transition-duration:0.5s;
	}

	.desc i, em{
    color:{color:Description Italic};
    }

    .desc b, strong{
    color:{color:Description Bold};
    }

    .desc a {
    color:{color:Description Link};
    }

    .desc a:hover {
    color:{color:Description Link Hover};
    }

	.post-container{
    width:510px;
    height:645px;
    position:absolute;
    }


	#pagination {
	word-spacing: 15px;
	font-size:9.5px;
	margin-top:10px;
	margin-left:9px;
	width:445px;
	padding:0px 10px;
    text-transform:uppercase;
    text-align:center;
    color:{color:Text};
	}

	#pagination a {
	color:{color:Navigation Links};
	text-decoration:none;
	}

	#pagination a:hover {
	color:{color:Navigation Links Hover};
	}


	#navlinks {
	font-size:9.5px;
	margin-top:30px;
	margin-bottom:10px;
	width:445px;
	padding:0px 10px;
    text-transform:uppercase;
    text-align:center;
	}

	#navlinks a {
	color:{color:Navigation Links};
	margin: 0px 8px;
	}

	#navlinks a:hover {
	color:{color:Navigation Links Hover};
	}

	#navlinks a:empty{
    display:none;
    }




/*----------posts-----------*/

	#entries {
    border:1px solid {color:Container Border};
	background: {color:Container Background};
	width:445px;
	height:471px;
	margin-left:9px;
	overflow-y:auto;
	overflow-x:hidden;
	}

	#posts {
	background: {color:Post Background};
	margin: 15px 0px 15px 1px;
	width:400px;
	word-wrap: break-word;
	padding:19px;
    overflow:scroll;
	}

	#posts img {
	max-width:100%;
	}

	.post-title{
	font-size:20px;
	font-family: 'Oleo Script', cursive;
    font-weight:bold;
	color:{color:Post Title};
	text-align:center;
	}

	.text {
	width: 100%;
	letter-spacing:0.5px;
	font-size: 11px;
	}

	.text img{
    height: auto;
    {block:ifPhotoFading}
    opacity: 0.7;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    {/block:ifPhotoFading}
	}

	.text img:hover{
    {block:ifPhotoFading}
    opacity: 1;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    {/block:ifPhotoFading}
	}


	{block:ifPhotoFading}
	.fading{
    opacity: 0.7;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    }{/block:ifPhotoFading}

    {block:ifPhotoFading}
	.fading:hover{
    opacity: 1;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    }{/block:ifPhotoFading}


	.photo{
	width:400px;
	text-align: center;
	}


	.photo img {
	max-width: 100%;
	{block:ifPhotoFading}
    opacity: 0.7;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    {/block:ifPhotoFading}
	}

	.photo img:hover {
	{block:ifPhotoFading}
    opacity: 1;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    {/block:ifPhotoFading}
	}


	.quote{
    font-size:20px;
	font-family: 'Oleo Script', cursive;
	color:{color:Post Title};
	text-align:right;
	}

	.source{
	margin-top:10px;
	padding:5px 25px;
    font-size:10px;
    font-family:calibri;
	}

	.link{
	font-family: 'Open Sans Condensed', sans-serif;
	font-size:16px;
	padding:5px 15px;
	text-align:right;
	background-color:{color:Ask Background};
	}


	.link-description{
	padding:5px 25px;
    font-size:10px;
    text-align:right;
    text-decoration:none;
    font-family:calibri;
	}

    .chat ol {
    margin-left:-25px;
    letter-spacing:1px;
    list-style:none;
    }

    .label {
    font-weight:bold;
    }

    .line.even {
    padding: 3px 3px;
    background-color:{color:Post Background};
    }

    .line.odd {
    padding: 3px 3px;
    background-color:{color:Ask Background};
    color:{color:Ask Text};
    }

	.video{
	width:400px;
    height: auto;
	}

    .audio {
	width:400px;
    }

    .audio-info {
    margin-left:10px;
    padding-bottom:5px;
    border-bottom:1px solid {color:Ask Background};
    }

    .audio-player {
    padding:10px;
    position:absolute;
    max-height:30px;
    }
    .audio-player-border{
    margin-left:10px;
    margin-top:30px;
    padding-top:5px;
    border-bottom:1px solid {color:Ask Background};
    }
    .audio-desc{
    margin-top:10px;
    padding:15px;
    }

	.ask{
	background-color: {color:Ask Background};
	padding:5px;
	color:{color:Ask Text};
	min-height: 69px
	}

	.asker-pic{
	height:64px;
	width:64px;
    float:left;
	border:3px solid {color:Post Background};
	}


	.ask1{
	margin-left:80px;
	padding-left:5px;
	border-left:1px solid {color:Post Background};
	}

	.asker{
	font-family: 'Open Sans Condensed', sans-serif;
	font-size:14px;
	font-style:italic;
	word-spacing:3px;
	}


	.asker a{
	color: {color:Link};
	text-decoration:none;
	}

	.asker a:hover{
	color: {color:Text};
	}

    .question{
    word-spacing:2px;
    letter-spacing:0.5px;
    padding:3px;
    }

    .replies{
    padding-left:10px;
	}

	.caption{
	font-size:11px
	}

	.info {
	font-family:calibri;
	letter-spacing:0.6px;
	margin-top:5px;
	margin-bottom:10;
	font-size:9px;
	text-align:right;
	border-top:solid 1px {color:Ask Background};
	text-transform:lowercase;
	font-style:italic;
	padding:5px 0px 5px 0px;
	}

	.info a {
	text-decoration:none;
	color:{color:Post Info};
	}

	.info a:hover {
	color:{color:Post Info Hover};
	}


	.tags {
	padding:2px 0px 2px 0px;
	font-family:calibri;
	text-align:right;
	font-size:10px;
	font-style:italic;
	letter-spacing:0.7px;
	}

	.tags a {
	text-decoration:none;
	color:{color:Tags};
	}

	.tags a:hover {
	text-decoration:none;
	color:{color:Tags Hover};
	}

	.permalink{
	margin-top:30px;
	padding:5px 0px 3px 0px;
	}


::-webkit-scrollbar {width: 3px; height: 3px; background:{color:Background};}
::-webkit-scrollbar-thumb {background:{color:Text};}


{CustomCSS}

</style>


</head>

<!----------------------BODY-------------------------->

<body>

<div class="container">

<div class="side-container">

<div class="title-container">
<div id="blogtitle"><span style="text-shadow:none; color:{color:Description Background};">“</span> {Title} <span style="text-shadow:none;color:{color:Description Background};">”</span></div>
<div id="blogquote">{text:Blog Quote}</div>
</div>

<div class="desc">{Description}</div>

</div>

<div class="post-container">

<div id="navlinks">

<a href="/">home</a>
<a href="/ask">ask</a>
<a href="/archive">archive</a>
<a href="{text:Link1}">{text:Link1 Title}</a>
<a href="{text:Link2}">{text:Link2 Title}</a>
<a href="{text:Link3}">{text:Link3 Title}</a>
<a href="{text:Link4}">{text:Link4 Title}</a>
<a href="{text:Link5}">{text:Link5 Title}</a>
<a href="{text:Link6}">{text:Link6 Title}</a>

<!----------------------Please do not remove the credit-------------------------->

<a href="http://spiteful-crow.tumblr.com">theme</a>

<!------------------------------------------------------------------------------->
</div>

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

<div id="posts">

{block:Text}
<div class="text">
{block:Title}<div class="post-title">{Title}</div>{/block:Title}
{Body}
</div>
{/block:Text}


{block:Photo}{LinkOpenTag}<center> <div class="photo">
<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}">
</div></center>{LinkCloseTag}{block:Caption}<div id="caption">{Caption}</div>{/block:Caption}{/block:Photo}


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


{block:Quote}
<div class="quote">
&ldquo; {Quote} &rdquo;
{block:Source}<div class="source">- {Source}</div>{/block:Source}
</div>
{/block:Quote}



{block:Link}
<div class="link"><a href="{URL}" class="link" {Target}>{Name} 	&#x21E2;</a></div>
{block:Description}<div class="link-description"> {Description}</div>{/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:Video}<div class="video"><center>
{Video-500}
</center>{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
</div>
{/block:Video}


{block:Audio}
<div class="audio">
<div class="audio-info">
{block:TrackName}<b>Title:</b> {TrackName} {/block:TrackName}|{block:Artist}<b>Artist:</b> {Artist} {/block:Artist} |
{block:PlayCount}<b>Plays:</b> {PlayCount} {/block:PlayCount}<br>
<div class="audio-player">{block:AudioPlayer}{AudioPlayer}{/block:AudioPlayer}</div></div><div class="audio-player-border"></div></div>
<div class="audio-desc">{block:Caption}<blockquote>{Caption}{/block:Caption}</div>
{/block:Audio}


{block:Answer}
<div class="ask">
<div class="asker-pic">
<img src="{AskerPortraitURL-64}"></div>
<div class="ask1">
<div class="asker">{Asker} :</div>
<div class="question">{Question}</div>
</div>
</div>

<div class="replies">
{Replies}
</div>{/block:Answer}



<div class="info">
<a href="{Permalink}">
{block:Date}{ShortMonth} {DayOfMonth}{DayOfMonthSuffix}	{Year}{/block:Date}</a> &bull; <a href="{Permalink}">{NoteCount}</a>{block:RebloggedFrom} &bull; <a href="{ReblogParentURL}"> via </a>{/block:RebloggedFrom} {block:ContentSource} &bull; <a href="{SourceURL}"> source </a> {/block:ContentSource}
</div>
<div class="tags">{block:Tags}#<a href="{TagURL}">{Tag}</a> {/block:Tags}
</div>



{block:PostNotes}<div class="permalink"><img src="{PostNotes-16}" style="border:3px solid {color:Post Background};vertical-align:middle">{PostNotes}</div>{/block:PostNotes}

</div>

{/block:Posts}
</div>



{block:Pagination}<div id="pagination">
{block:PreviousPage}
<a href="{PreviousPage}">«prev</a>{/block:PreviousPage} {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:NextPage}
<a href="{NextPage}">next»</a>{/block:NextPage}
</div>

{/block:Pagination}


</div>

</div>




</body>
</html>