Bubbles

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

<!-- octomoosey @ tumblr -->

<html xmlns="//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}

<style type="text/css">

 ::-webkit-scrollbar {
width: 5px;height: 5px;}

::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
height: 6px;display: block;background-color:#fff;}

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

::-webkit-scrollbar-thumb:vertical {
height: 9px;background-color: #d58303;} /* change the scrollbar color here */

body {
    background:#fff; /* change the background color here */
    background-image: url('//static.tumblr.com/86jccts/jaDmuawos/bottom_border_circles2.png'); /* change the background image here */
    background-position:bottom right;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family:Calibri;
    font-size:10px;
    padding:5px;
    line-height:100%;}

a:link, a:active, a:visited {
    color: #d58303; /* change the text link color here */
    text-decoration: none;
    transition: all 0.6s ease-out;
    -webkit-transition: all 0.6s ease-out;
    -moz-transition: all 0.6s ease-out;
    -o-transition: all 0.6s ease-out;}

a:hover {
    color: #eee; /* change the text link hover color here */
    transition: all 0.6s ease-out;
    -webkit-transition: all 0.6s ease-out;
    -moz-transition: all 0.6s ease-out;
    -o-transition: all 0.6s ease-out;}

#image1 {
    margin-top:75px;
    width: 100px;}

#image1 img {
    width:100px;
    margin-top:10px;
    margin-left:245px;}

.shape{
    width:100px;
    height:100px;
    border:2px double #d58303; /* change the image border color here */
    -moz-border-radius:50px 50px 50px 50px;
    -o-border-radius:50px 50px 50px 50px;
    -webkit-border-radius:50px 50px 50px 50px;
    border-radius:50px 50px 50px 50px;}

#info {
    overflow-y:scroll; overflow-x:hidden;
    color:#fff; /* change the box text color here */
    text-align:center;
    line-height:100%;
    font-size:11px;
    font-style:normal;
    letter-spacing:2px;
    width:345px;
    height:340px;
    background:#000;
    border:2px double #d58303; /* change box border color here */
    padding:10px;
    position:relative;
    margin-top:-350px;
    margin-left:0px;}

#info img {
    max-width:300px;}

#links a{
    display: inline-block;
    text-transform: lowercase;
    letter-spacing: 2px;
    color:#ffffff; /* change the main links color here */
    background:#000000; /* change the main links background color here */
    text-align:center;
    width:60px;
    margin-top:10px;
    padding:5px 2px 5px 2px;}

#links a:hover{
    background:#ffffff; /* change the main links hover background color here */
    color:#1d1d1d; /* change the main links hover color here */
    transition: all 0.6s ease-out;
    -webkit-transition: all 0.6s ease-out;
    -moz-transition: all 0.6s ease-out;
    -o-transition: all 0.6s ease-out;}

#title {
    font-size:13px;
    margin-top:5px;
    margin-bottom:5px;
    border-bottom:1px solid #fff; /* change the title border color here */
    padding-bottom:8px;}

{CustomCSS}</style>

</head>
<body>
<div align="center">

<!-- change the image urls here -->

<div id="image1"><img src="//static.tumblr.com/86jccts/abFmu5hcc/samlaptop.gif" class="shape"><br>
<img src="//static.tumblr.com/86jccts/iNymu9f0v/sam-asylum.gif" class="shape"><br>
<img src="//static.tumblr.com/86jccts/a1omu9fq6/samlookup2.gif" class="shape"></div>

<!-- change the title here -->

<div id="info"><div id="title">A b o u t ~ M e</div>

<!-- change the description here -->

This is how <a href="/">your links</a> will look.<p>

Lorem ipsum dolor sit amet, tation placerat qui ne, no timeam pericula vix, diceret convenire an mel. Vel stet vocent aliquip in. An dico aeterno nostrud eum, elit nulla at has. Et timeam bonorum reprehendunt sed, nec aliquip instructior et.<p>

You can also insert images like so...<p>

<img src="//static.tumblr.com/uopakca/8glmuay6r/huggg.gif"><p>

Tempor dolorum definitionem ius ut. Usu debitis tibique efficiantur no, in nec sint invenire, mel convenire conceptam sadipscing eu. At imperdiet laboramus est, unum gubergren vel et, ea mel wisi minim. Te unum postea reformidans pri. Meis equidem sed ut, at aliquid corrumpit eam. Enim repudiare ea has.<p>

Eam fugit consul phaedrum et, duo animal regione facilisis ne. Te stet accusam urbanitas his, summo partem persecuti no vel, scaevola eloquentiam efficiantur at has. Ut duo alia mollis consulatu, stet reque pericula nec in. Quo et apeirian facilisis, in mei assum scripta, qui vitae ignota te. Liber signiferumque id mea, graeco virtute mentitum cu nec. Ei singulis vituperatoribus sit.<p>

Congue admodum ponderum eu sed. Ne principes contentiones eam, quis graece salutandi nec in. Ut pri cetero ullamcorper, vix albucius neglegentur ex. Ex sed sint dolore utamur. Justo tincidunt ne usu.<p>

Nobis noster accommodare mei no. Eum no discere aliquando. Mei in tibique hendrerit, sed ad dignissim conceptam. Euripidis persecuti an pri, partem nostrud dissentiunt vel ne, in has aeque dolorum philosophia. Et causae dolorum intellegat vim, eam commune nominati facilisis no.

</div>

<!-- change the bottom links here -->

<center><div id="links">
<a href="/">home</a>
<a href="/ask">ask</a>
<a href="/submit">submit</a>
<a href="//www.tumblr.com/dashboard">dash</a>
</div>

<!-- DO NOT REMOVE CREDIT -->

<div style="position:fixed;bottom:3px; right:3px; font-size:7px; letter-spacing:1px; font-family:cambria;"><a href="//octomoosey.tumblr.com/">© OCTOMOOSEY</a></center></div>
</div>
</div>

</body></html>