I am trying to build a tumblr based website because I don't have a lot of money to pay for web hosting.
This is the beginnings of what I have:
http://dfasus.tumblr.com/

A few things that I need help changing:
1. Change all title/heading text (the words on the left hand side of page) to all lowercase.
2. Change all fonts to helvetica
3. When you first view the page, photos are viewed by scrolling sideways, but when you click on of the page headings (like "everyday") on the left, the photos on those pages are viewed by scrolling down vertically.
I would like to change this so that the viewing experience is the exact same as the home page




here is my code, thanks for your help :)

[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}
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<!--
THEME: UNTITLED
CREATED BY: HTTP://RAWMOANS.TUMBLR.COM
-->

<style type="text/css">
/*
RESET & BASIC SETUP
*/
* { margin: 0; padding: 0; }
body{ font-size: 12px; font-family: Times; background: #fff; padding: 20px; color: #333; text-align:justify;}
.tumblrAutoPager_page_info, .tumblrAutoPager_page_separator {display:none;}
iframe#tumblr_controls{position:fixed !important;}
a {text-decoration:none; color:#000; text-decoration:underline;}
img{opacity:1;-moz-transition: 0.3s ease-in; -webkit-transition: 0.3s ease-in;-o-transition: 0.3s ease-in;transition: 0.3s ease-in;}
{block:IndexPage}img:hover{opacity:1.0;-moz-transition: 0.3s ease-in; -webkit-transition: 0.3s ease-in;-o-transition: 0.3s ease-in;transition: 0.3s ease-in;}{/block:IndexPage}
/*
STRUCTURE
*/
.post {max-width:800px;min-width:250px; margin:0px 5px 0px 5px;}
.post img {max-width:800px; min-width:250px; max-height:450px;}
#side{position:fixed; text-align:left; text-transform:uppercase; font-size:10px;background:#fff; left:0px; width:100px; padding:40px; padding-top:70px; height:100%; top:0; z-index:1000; color:#444;}
#side a {text-decoration:none;}
#posts{margin-left:155px; margin-top:10px; }

/*
TYPOGRAPHY
*/
p { font-size: 11px; margin: 0 0 15px 0; }
h2 { font-size: 12px; text-transform:uppercase; color:#000;}
h2 a{color:#000; text-decoration:none;}
.quote{font-size:25px; line-height:25px; font-style:italic; margin-bottom:10px;}
.description{font-size:11px; font-style:italic; text-transform:none; line-height:12px}
ul{list-style-type:none;}
.permalink{font-size:10px; text-transform:uppercase; text-align:left; color:#242424; margin-top:10px; padding-top:2px; border-top:1px solid #ccc;}
.links{padding-bottom:5px;}
.links a{color:#888;}
</style>

<script src="http://static.tumblr.com/fiton9k/T5Mlg92fv/jquery-1.2.6.min.js" type="text/javascript" charset="utf-0"></script>

<script type="text/javascript" charset="utf-0">
$(function(){
$("#page-wrap").wrapInner("<table><tr>");
$(".post").wrap("<td>");
});
</script>

<script src="http://static.tumblr.com/fiton9k/D0Plgbx3t/hscroll.js" type="text/javascript" charset="utf-0"></script>

</head>


<body>
<div id="side">
<b><a href="/">{Title}</a></b><br><Br>
{block:Description}<div class="description">{Description}</div><br>{/block:Description}
{block:AskEnabled}<div class="links"><a href="/ask">Message</a></div>{/block:AskEnabled}
{block:SubmissionsEnabled}<div class="links"><a href="/submit">Submit</a></div>{/block:SubmissionsEnabled}
{block:HasPages}{block:Pages}<div class="links"><a href="{URL}">{Label}</a></div>{/block:Pages}{/block:HasPages}
</div>
<br><br>
{block:Pagination}{block:PreviousPage}<a href="{PreviousPage}">Forward</a><br>{/block:PreviousPage}{block:NextPage}<a href="{NextPage}">Backward</a>{/block:NextPage}{/block:Pagination}
{block:PermalinkPagination}{block:PreviousPost}<a href="{PreviousPost}">Forward</a><br>{/block:PreviousPost}{block:NextPost}<a href="{NextPost}">Backward</a>{/block:NextPost}{/block:PermalinkPagination}

</div>


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


{block:Text}<div class="post">
{block:Title}
<h2><a href="{Permalink}">{Title}</a></h2>
{/block:Title}

<p> {Body}</p></div>
{/block:Text}

{block:Photo}
<div class="post">
{block:IndexPage}<a href="{Permalink}">{/block:IndexPage}
{block:PermalinkPage}{LinkOpenTag}{/block:PermalinkPage}
<img src="{block:IndexPage}{PhotoURL-HighRes}{/block:IndexPage}{block:PermalinkPage}{PhotoURL-HighRes}{/block:PermalinkPage}" alt="{PhotoAlt}"/>
{block:IndexPage}</a>{/block:IndexPage}
{block:PermalinkPage}{LinkCloseTag}{/block:PermalinkPage}
</div>
{/block:Photo}



{block:Photoset}<div class="post">
<li class="post photoset">
{Photoset-500}

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



{block:Quote}<div class="post">
<h2>“</span>{Quote}”</h2>

{block:Source}
<div align="right">— {Source}</div>
{/block:Source}
</div>
{/block:Quote}

{block:Link}<div class="post">
<h2><a href="{URL}" class="link" {Target}>{Name}</a></h2>

{block:Description}
{Description}
{/block:Description}
</div>
{/block:Link}

{block:Chat}<div class="post">
{block:Title}
<h3><a href="{Permalink}">{Title}</a></h3>
{/block:Title}
<ul class="chat">
{block:Lines}
<li class="{Alt} user_{UserNumber}">
{block:Label}
<span class="label">{Label}</span>
{/block:Label}

{Line}
</li>
{/block:Lines}
</ul>
</li></div>
{/block:Chat}

{block:Video}<div class="post">
{Video-500}

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

{block:Audio}<div class="post">
{AudioPlayerBlack}
{block:IndexPage}<br>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}{/block:IndexPage}
</div>
{/block:Audio}

{block:PermalinkPage}{block:Caption}<div style="float:right; padding-left:5px; width:250px;">{Caption}</div>{/block:Caption}{/block:PermalinkPage}

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

</body>

</html>
[CODE]