Theme 12: The Bright Sky

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>{title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:regular,bold" rel="stylesheet" type="text/css"/>
<meta name="color:background" content="#ffffff">
  <meta name="color:text" content="#6c6c6c">
  <meta name="color:selection text" content="#ffffff">
  <meta name="color:scrollbar" content="#CBDBE0">
  <meta name="color:scrollbar bg" content="#ffffff">
  <meta name="color:links" content="#CBDBE0">
  <meta name="color:links hover" content="#ffffff">
  <meta name="color:bold" content="#BED2D9">
  <meta name="color:italic" content="#BED2D9">
  <meta name="color:blockquote text" content="#6c6c6c">
  <meta name="color:blockquote bg" content="#F7F9FE">
  <meta name="color:blockquote border" content="#BED2D9">
  <meta name="color:bar" content="#BED2D9">
  <meta name="color:bar border" content="#ccdce1">
  <meta name="color:title" content="#ffffff">
  <meta name="color:sidebar" content="#ccdce1">
  <meta name="color:menu bg" content="#dde9ec">
  <meta name="color:menu text" content="#93b1ba">
  <meta name="color:description" content="#ccdce1">
  <meta name="color:description bg" content="#ffffff">
  <meta name="color:post bg" content="#ffffff">
  <meta name="color:post title bg" content="#f9f9f9">
  <meta name="color:post title text" content="#ccdce1">
  <meta name="color:tag bg" content="#ccdce1">
  <meta name="color:tag" content="#ffffff">
  <meta name="color:page number" content="#ffffff">
  <meta name="color:page bg" content="#ccdce1">
  <meta name="color:quote bg" content="#ccdce1">
  <meta name="color:quote text" content="#ffffff">
  <meta name="color:chat border" content="#BED2D9">
  <meta name="color:chat bg" content="#ECF1F2">
  <meta name="color:chat text" content="#6c6c6c">
  <meta name="color:music border" content="#BED2D9">
  <meta name="color:asker bg" content="#BED2D9">
  <meta name="color:asker text" content="#FFFFFF">
  <meta name="color:scroll to top" content="#BED2D9">

  <meta name="image:background" content="http://25.media.tumblr.com/tumblr_lxwynw0Pdg1r9g6hvo6_100.png">
  <meta name="image:sidebar img" content="http://static.tumblr.com/avd6qy6/qr6muimgn/untitled-1.png">
  <meta name="image:bar img" content="http://colourlovers.com.s3.amazonaws.com/images/patterns/707/707090.png">

  <meta name="text:Link1" content="" />
  <meta name="text:Link1URL" content=""/>
  <meta name="text:Link2" content="" />
  <meta name="text:Link2URL" content=""/>
  <meta name="text:Link3" content="" />
  <meta name="text:Link3URL" content=""/>
  <meta name="text:Link4" content="" />
  <meta name="text:Link4URL" content=""/>
  <meta name="text:Link5" content="" />
  <meta name="text:Link5URL" content=""/>
  <meta name="text:Link6" content="" />
  <meta name="text:Link6URL" content=""/>
  <meta name="text:Link7" content="" />
  <meta name="text:Link7URL" content=""/>
  <meta name="text:Link8" content="" />
  <meta name="text:Link8URL" content=""/>
</head>
<style>
 body {
font-family:PT Sans Narrow;
font-size:13px;
background:url({image:background}) fixed {color:background};
color:{color:text};
}

::-moz-selection {
background-color:{color:selection bg};
color:{color:selection text};
}

::selection {
background-color:{color:selection bg};
color:{color:selection text};
}

a {
color:{color:links};
text-decoration:none;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
}

a:hover {
color:{color:links hover};
}

b,strong {
color:{color:bold};
}

i,em {
color:{color:italic};
}

blockquote,pre {
background:{color:blockquote bg};
border-left:5px solid {color:blockquote border};
color:{color:blockquote text};
padding:3px;
}

pre {
word-break:break-word;
font-family:consolas;
}

blockquote img {
max-width:90%;
}

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

.post img,.photo {
z-index:-1;
opacity:.8;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
}

.post img:hover,.photo:hover {
opacity:1;
}

#bar {
z-index:1;
top:0;
left:0;
border-bottom:8px solid {color:bar border};
width:100%;
height:40px;
background:url({image:bar img}) {color:bar};
text-transform:uppercase;
position:fixed;
}

.title {
letter-spacing:5px;
color:{color:title};
font-size:28px;
text-align:center;
font-weight:700;
text-transform:uppercase;
margin-bottom:10px;
}

::-webkit-scrollbar {
width:6px;
}

::-webkit-scrollbar-track {
background:{color:scrollbar};
}

::-webkit-scrollbar-thumb {
background:{color:scrollbar bg};
}

#link {
width:370px;
padding:10px;
background:{color:sidebar};
position:fixed;
left:700px;
top:0;
z-index:2;
border-radius:0 0 10px 10px;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
}

#stat {
width:370px;
padding:10px;
background:url({image:bar img}) {color:bar};
position:fixed;
left:700px;
bottom:0;
z-index:2;
border-radius: 10px 10px 0 0;
}

#link a {
display:inline-block;
width:75px;
padding:5px;
margin-bottom:5px;
margin-left:5px;
text-align:center;
color:{color:menu text};
background:{color:menu bg};
text-transform:uppercase;
font-size:11px;
text-decoration:none;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
}

#link a:hover {
background:transparent;
color:{color:menu bg};
}

#link:hover {
z-index:5;
}

.description {
color:{color:description};
padding:10px;
text-align:justify;
background:{color:description bg};
margin-bottom:5px;
margin-top:0;
overflow:auto;
}

#sidebar {
position:fixed;
top:170px;
left:700px;
height:75%;
}

#content {
margin-left:50px;
margin-top:70px;
margin-bottom:30px;
}

.post {
background:{color:post bg};
padding:50px;
width:500px;
-webkit-box-shadow:0 4px 6px rgba(159,214,210,0.5);
-moz-box-shadow:0 4px 6px rgba(159,214,210,0.5);
box-shadow:0 4px 6px rgba(159,214,210,0.5);
text-align:justify;
margin-top:30px;
}

.titled {
margin-top:-50px;
padding:10px;
margin-left:-50px;
border-bottom:2px dashed {color:post title text};
color:{color:post title text};
text-transform:uppercase;
font-size:25px;
text-align:center;
width:580px;
font-weight:700;
background:{color:post title bg};
margin-bottom:30px;
}

.tag {
margin-bottom:10px;
width:590px;
padding:5px;
}

.tag a {
background:{color:tag bg};
color:{color:tag};
padding-left:5px;
padding-right:5px;
}

.date {
position:absolute;
padding:5px;
margin-top:-60px;
margin-left:200px;
opacity:0;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
}

.post:hover .date {
margin-left:-20px;
opacity:1;
}

.date a {
color:{color:tag};
}

#pagination {
width:100%;
text-align:center;
margin-top:25px;
}

#pagination a {
padding:10px;
text-transform:uppercase;
background:{color:page bg};
color:{color:page number};
margin:5px;
}

#pagination .current_page {
background:{color:page number};
color:{color:page bg};
padding:10px;
}

.quote {
background:{color:quote bg};
font-size:20px;
font-family:cambria;
padding:10px;
width:97.5%;
padding:5px;
color:{color:quote text};
margin-bottom:-15px;
}

.chat ul {
list-style:none;
margin:0;
padding:0;
}

.chat li {
padding:3px;
text-align:justify;
border-bottom:2px solid {color:chat border};
background:{color:chat bg};
color:{color:chat text};
}

#albumart {
border:5px solid {color:music border};
}

#albumart img {
display:block;
opacity:1;
}

#audioplayer {
display:block;
width:25px;
height:25px;
padding:37.5px;
padding-left:10px;
padding-right:65px;
overflow:hidden;
position:absolute;
background:#fff;
margin-top:5px;
margin-left:5px;
opacity:0;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
}

.post:hover #audioplayer {
opacity:.7;
}

.satu {
background:{color:asker bg};
padding:5px;
color:{color:asker text};
}

.satu a {
color:{color:asker text};
}

.dua {
text-align:justify;
border:1px dashed {color:asker bg};
padding:5px;
width:390px;
}

#scrolltotop {
font-size:50px;
color:{color:scroll to top};
position:fixed;
bottom:10px;
right:35px;
}

#scrollToTop:link,#scrollToTop:visited {
color:{color:scroll to top};
background-color:transparent;
display:none;
position:fixed;
bottom:10px;
right:35px;
font-size:50px;
}

iframe#tumblr_controls {
position:fixed!important;
opacity:0.5;
-webkit-transition:all .8s ease-out;
-moz-transition:all .8s ease-out;
transition:all .8s ease-out;
-webkit-filter:invert(100%);
-moz-filter:invert(100%);
-o-filter:invert(100%);
-ms-filter:invert(100%);
filter:invert(100%);
}

#image2 {
width:380px;
}


</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script src="http://static.tumblr.com/ikeq9mi/DfYl6o46t/scrolltotop.min.js"></script>
<body>
<div class="topp">
    <a href="javascript:;" id="scrollToTop">▲</a>
</div>
<div id="bar">
</div>
<div id="link">
    <div class="title">
        {title}
    </div>
	<img src="{image:sidebar img}">
	<div class="description">
		{description}
	</div>
	<a href='/'>Home</a>
	<a href='/ask'>Message</a>
	<a href='/archive'>Archive</a>
	<a href='http://hellolittlered.org'>Theme</a>
	{block:iflink1}<a href="{text:Link1URL}">{text:Link1}</a>{/block:iflink1}
	{block:iflink2}<a href="{text:Link2URL}">{text:Link2}</a>{/block:iflink2}
	{block:iflink3}<a href="{text:Link3URL}">{text:Link3}</a>{/block:iflink3}
	{block:iflink4}<a href="{text:Link4URL}">{text:Link4}</a>{/block:iflink4}
	{block:iflink5}<a href="{text:Link5URL}">{text:Link5}</a>{/block:iflink5}
	{block:iflink6}<a href="{text:Link6URL}">{text:Link6}</a>{/block:iflink6}
	{block:iflink7}<a href="{text:Link7URL}">{text:Link7}</a>{/block:iflink7}
	{block:iflink8}<a href="{text:Link8URL}">{text:Link8}</a>{/block:iflink8}
</div>
{block:Pagination}<div id="stat">

	<div id="pagination">
		 {block:PreviousPage}<a href="{PreviousPage}">Prev</a>&nbsp;&nbsp;{/block:PreviousPage} {block:JumpPagination length="5"} {block:CurrentPage}<span class="current_page">✘</span>&nbsp;&nbsp;{/block:CurrentPage} {block:JumpPage}<a class="jump_page" href="{URL}">{PageNumber}</a>&nbsp;&nbsp;{/block:JumpPage} {/block:JumpPagination} {block:NextPage}<a href="{NextPage}">Next</a>{/block:NextPage}
	</div>
</div>{/block:Pagination}
<div id="content">
	 {block:posts}
	<div class="post">
		<a href="/">
		<div class="date">
			<table>
			<tr>
				 {block:Date}
				<td style="background:{color:tag bg};color:{color:tag};padding:5px">
					<a href="{Permalink}">{ShortMonth} {DayOfMonth}{DayOfMonthSuffix} {Year}</a>
				</td>
				{/block:Date} {block:NoteCount}
				<td style="background:{color:tag bg};color:{color:tag};padding:5px">
					{NoteCountWithLabel}
				</td>
				{/block:NoteCount}
				<td style="background:{color:tag bg};color:{color:tag};padding:5px">
					{LikeButton color="white" size="18"}
				</td>
				<td style="background:{color:tag bg};color:{color:tag};padding:5px">
					{ReblogButton color="white size="18"}
				</td>
			</tr>
			</table>
		</div>
		</a>
		{block:Text} {block:Title}
		<div class="titled">
			<a href="{Permalink}">{Title}</a>
		</div>
		 {/block:Title} {Body} {/block:Text} {block:Photo}
		<div class="photo">
			<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
		</div>
		 {block:Caption}{Caption}{/block:Caption} {/block:Photo} {block:Photoset}
		<div class="photo">
			{Photoset-500}
		</div>
		 {block:Caption}{Caption}{/block:Caption} {/block:Photoset} {block:Quote}
		<div class="quote">
			{Quote}
		</div>
		<center>{block:Source}<span style="font-size:25px;color:{color:quote bg};">◥</span> {Source}{/block:Source}</center><br>
		 {/block:Quote} {block:Link}
		<div class="titled">
			<a href="{URL}" target="{Target}"> {Name} (x) </a>
		</div>
		 {block:Description} {Description} {/block:Description} {/block:Link} {block:Chat} {block:Title}
		<div class="titled">
			<a href="{Permalink}">{Title}</a>
		</div>
		{/block:Title}
		<div class="chat">
			<ul>
				 {block:Lines}
				<li class="{Alt}">{block:Label} <b>{Label}</b> {/block:Label}{Line}</li>
				{/block:Lines}
			</ul>
		</div>
		 {/block:Chat} {block:Audio}
		<table align="center">
		<tr>
			<td>
				<div id="audioplayer">
					{AudioPlayerWhite}
				</div>
				<div id="albumart">
					{block:AlbumArt}<img src="{AlbumArtURL}" width="100">{/block:AlbumArt}
				</div>
			</td>
			<td>
				<div class="chat">
					<ul>
						<li class="odd"><b>Plays:</b>{PlayCountWithLabel} </li>
						<li class="even">{block:Artist}<b>Artist:</b> {Artist}{/block:Artist}</li>
						<li class="odd">{block:Album}<b>Album:</b> {Album}{/block:Album}</li>
						<li class="even">{block:TrackName}<b>Title:</b> {TrackName}{/block:TrackName}</li>
					</ul>
				</div>
			</td>
		</tr>
		</table>
		 {block:Caption}
		<p>
			{Caption}
		</p>
		{/block:Caption} {/block:Audio} {block:Video} {Video-500} {block:Caption}{Caption}{/block:Caption} {/block:Video} {block:Answer}
		<table>
		<tr>
			<td class="satu">
				<img src="{AskerPortraitURL-128}" width="100px"><br>
				<center>{Asker}</center>
			</td>
			<td class="dua">
				{Question}
			</td>
		</tr>
		</table>
		 {Answer} {/block:Answer}

		 {block:PostNotes}{PostNotes}{/block:PostNotes}
	</div>
	 {block:HasTags}
	<div class="tag">
		<b>TAGGED AS:</b> {block:Tags}<a href="{TagURL}"> {Tag}</a> {/block:Tags}
	</div>
	{/block:HasTags} {/block:posts}
</div>
</body>
</html>