Page #1: Tag Cloud

<!--
Page #1: Tag Cloud
by Phil (spirkism/spirkthemes)

Rules:
- please do not steal/redistribute, I spent quite a bit of time coding this
- also don't remove the credit please, that would make me very sad :(
- don't use as a base code
- you are allowed to edit as much as you like though, have fun playing around   with code, that's how you learn! :)
- tell me if there are any bugs or if you have any questions, need help with    the theme or want a detail differently - I'll see what I can do for you ;)
And now: enjoy! :)
-->

<!DOCTYPE html>
<head>

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

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

<style type="text/css">


body {
    margin: 0 auto;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
}

#content {
    margin: 0 auto;
    text-align: center;
    left: 50%;
    margin-left: -400px;
    position: relative;
}

.title {
    text-align:center;
    color: #00053E;
    font-size:50px;
    margin-top: 20px;
    left: 50%;
    margin-left: -100px;
    font-family: 'Engagement', serif;
    width: 200px;
    height: 60px;
    overflow: hidden;
    position:fixed;
}

.cloud {
    margin-top:7%;
    margin-left: -5px;
    border: 3px double;
    border-color: #828282; /*here you can change the cloud's border color */
    width: 800px;
    height: 450px;
    overflow: hidden;
    position: fixed;

}



.linkbar {
    position: fixed;
    margin-top: 280px;
    margin-left: 27px;
    text-transform: uppercase;
    font-family: Calibri;
    font-size: 15px;
    background-color: none;
    width: 105px;
    text-align: center;
    transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
}

.linkbar a {
    text-align: center;
    color: #595959;         /* change the link color here */
    transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
}

.linkbar a:hover {
    text-align: center;
    transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
}


.links {
    background-color: #E1E1E1; /* change the link box color here */
    text-align: center;
    border: 2px solid #fff;
    padding: 5px;
    margin-bottom: 5px;
}

.links:hover {
    border: 2px solid #212121;
    color:#fff;         /* change the link hover color here */
    background-color: #001634;  /* change the link box hover color here */
    transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
}


#sidebar {
    width: 150px;
    height: 200%;
    position: fixed;
    background-color: #D6D6D6; /*change the sidebar color here (left sidebar) */
    margin-top: -10px;
    margin-left: -10px;
}

#sidebar2 {
    width: 145px;
    height: 200%;
    position: fixed;
    background-color: #D6D6D6; /*change the sidebar color here (right sidebar) */
    overflow: hidden;
    margin-top: -100px;
    right: 0;
}

.icon {
    border: 2px solid #fff; /* change icon border color here */
    width: 96px;
    height: 96px;
    margin-top: 150px;
    margin-left: 30px;
    position: fixed;
    overflow: hidden;
}

#pics {
    margin-top: 90px;
    margin-left: 20px;
}

.pic01 {
    position: fixed;
    overflow: hidden;
    width: 100px;
    height: 100px;
    border: 2px solid #fff; /* change pic01 border color here */
    margin-top: 150px;
}

.pic02 {
    position: fixed;
    overflow: hidden;
    width: 100px;
    height: 100px;
    border: 2px solid #fff; /* change pic02 border color here */
    margin-top: 270px;
}

.pic03 {
    position: fixed;
    overflow: hidden;
    width: 100px;
    height: 100px;
    border: 2px solid #fff; /* change pic02 border color here */
    margin-top: 390px;
}


/* CREDIT THINGS - do not remove please! */

 .themecredit {
        bottom: 8px;
        right: 8px;
        border: 1px solid #BABABA;
        font-size: 10px;
        color: #5A5A5A;
        height: 13px;
        width: 13px;
        line-height: 13px;
        position: fixed;
        text-align: center;
        -webkit-transition: 0.5s ease;transition: 0.5s ease;
    -o-transition: 0.5s ease;
    -moz-transition: 0.5s ease;
    }

    .themecredit:hover {
        background-color: #2E2E2E;
        color: #fff;
        -webkit-transition: 0.5s ease;transition: 0.5s ease;
    -o-transition: 0.5s ease;
    -moz-transition: 0.5s ease;
    }


</style>
</head>

<body>


<div id="sidebar">
<div class="icon"><img src="{PortraitURL-96}" /></div>
 <div class="linkbar">

  <!-- these are your sidebar links - you can change their url if you need to-->
 <a href="/"><div class="links">home</div></a>
 <a href="/ask"><div class="links">ask</div></a>

 <!-- if you want more links just copy this template and fill in the blanks:

    <a href="/"><div class="links">link name here</div></a>

(make sure to put it outside of the comment or it will not work!)-->

  </div>
  </div>

<div id="content"><center>
  <div class="title">Tag Cloud</div>
  <div class="cloud">
  <!-- paste your tagcloud code here! it has to be 800px wide and 450 high or else it will look weird because it doesn't fit the box -->
  </div>

  <div id="sidebar2">
  <div id="pics">
  <!-- enter your 3 right sidebar images here in between the quotation marks! -->
  <div class="pic01"><img src=""/></div>
  <div class="pic02"><img src=""/></div>
  <div class="pic03"><img src=""/></div>
  </div>
  </div>


</center>
  </div>

<!-- credit - do not remove please! -->
<a href="http://spirkthemes.tumblr.com"><center><div class="themecredit">P</div></center></a>

</body>
</html>