contained theme

<html>
<!----


ᴛʜᴇᴍᴇ ʙʏ KAZUNES!! (◑.◑)
● ᴅᴏɴ'ᴛ ʀᴇᴘᴏsᴛ
● ᴅᴏɴ'ᴛ sᴛᴇᴀʟ
● ᴅᴏɴ'ᴛ ᴜsᴇ ᴀs ᴀ ʙᴀsᴇ ᴄᴏᴅᴇ
● ᴅᴏɴ'ᴛ ᴄʟᴀɪᴍ ᴀs ʏᴏᴜʀ ᴏᴡɴ


----->

<meta name="image:favicon" content=""/>
<meta name="image:sidebar" content=""/>
<meta name="image:background" content=""/>
<meta name="image:corner image" content=""/>
<meta name="color:background" content=""/>
<meta name="color:container bg" content=""/>
<meta name="color:text" content=""/>
<meta name="color:link" content=""/>
<meta name="color:link hover" content=""/>
<meta name="color:border" content=""/>
<meta name="color:sidebar border" content=""/>
<meta name="color:top bar background" content=""/>
<meta name="color:top bar text" content=""/>
<meta name="color:description text" content="#fff"/>
<meta name="color:description background" content="#000"/>
<meta name="if:full background" content=""/>
<meta name="select:post size" content="250px">
<meta name="select:post size" content="300px">
<meta name="select:post size" content="350px">
<meta name="select:font" content="arial">
<meta name="select:font" content="karla">
<meta name="select:font" content="ms gothic">
<meta name="select:font" content="ms pgothic">
<meta name="text:font size" content="14px"/>
<meta name="text:link 1" content=""/>
<meta name="text:link 1 text" content=""/>
<meta name="text:link 2" content=""/>
<meta name="text:link 2 text" content=""/>
<meta name="text:link 3" content=""/>
<meta name="text:link 3 text" content=""/>

<link rel="shortcut icon" href="{image:favicon}">

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

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

<script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>

<script>

(function($){

$(document).ready(function(){

$("a[title]").style_my_tooltips({

tip_follows_cursor:true,

tip_delay_time:30,

tip_fade_speed:200,

attribute:"title"

});

});

})(jQuery);

</script>
<!--basic tooltip from tutorial-baby! Enjoy-->
<style>
.tooltip{
    display: inline;
    position: relative;
}
#s-m-t-tooltip {
max-width:300px; /*how big the tooltip can be at most*/
border-radius: 0px; /*change your border radius*/
padding:3px 4px 5px 4px; /*padding inside tooltip*/
margin:20px 7px -2px 20px; /*distance from word*/
background-color:#ffffff; /*background color*/
border:1px solid {color:border}; /*border info*/
font-family:{select:font}; /*tooltip font*/
font-size:9px; /*tooltip font size*/
letter-spacing:2px; /*tooltip letter spacing*/
text-transform:uppercase; /*makes the tooltip title uppercase*/
color:#000; /*tooltip font color*/
z-index:999999999999999999999999999999999999;
}
</style>
    </head>
    <style>

        ::-webkit-scrollbar {width: 6px; height: 4px; background: {color:container bg}; }
        ::-webkit-scrollbar-thumb { background-color: #000000; -webkit-border-radius: 1ex; }

        body {
            background-image: url('{image:background}');
            {block:iffullbackground}
            background-size: cover;
            background-attachment: fixed;
            {/block:iffullbackground}
            {block:ifnotfullbackground}
            background-repeat: repeat;
            background-attachment: fixed;
            {/block:ifnotfullbackground}
            background-color:{color:background};
            font-family:{select:font};
            font-size:{text:font size};
        }


        a, a:visited {
            color:{color:link};
            text-decoration:none;
            transition-duration: .3s;
            -moz-transition-duration: .3s;
            -o-transition-duration: .3s;
            -ie-transition-duration: .3s;
            -webkit-transition-duration: .3s;
        }

        a:hover { color:{color:link hover}; }

        pre {
            white-space: pre-wrap;
            white-space: -moz-pre-wrap;
            white-space: -pre-wrap;
            white-space: -o-pre-wrap;
            word-wrap: break-word;
        }

        ol.notes img { display:none; }

        #topbar {
            position: fixed;
            border: 2px solid {color:border};
            width: 570px;
            background: {color:top bar background};
            left: 550px;
            top: 5%;
            padding: 5px;
            color: {color:top bar text};
            z-index: 9999;
        }

        #topbar a {
            color: {color:top bar text};
        }

        .title { float:left; margin-left: 6px; font-weight: 700;  letter-spacing: 2px;}
        .pagination { float: right; margin-right: 6px;  letter-spacing: 4px;}

        #container{
            position:fixed;
            width:500px;
            height:600px;
            overflow: auto;
            overflow-x:hidden!important;
            border: 3px solid {color:border};
            padding: 40px;
            left: 550px;
            top: 5%;
            background-color: {color:container bg};
        }

        #posts {
            width: {select:post size};
            border: 1px solid black;
            padding: 20px;
            display:block;
            margin: 30px auto;
            background-color: #fff;
        }

         #posts blockquote {
            color: {color:text};
            border-left: 1px solid {color:border};
            padding: 0px 0px 0px 5px;
            margin-left: 15px;
        }

        #sidebar {
            position: fixed;
            top: 295px;
            left: 20%;
        }

        #sidebar .image img {
            width: 90px;
            height: 90px;
            border-radius: 100%;
            border: 3px solid {color:sidebar border};
            margin-top: -10px;
            margin-left: 15%;
        }

        .links {
             text-align: center; padding-bottom: 4px;
        }

        .description {
            color:{color:description text};
            padding:15px;
            background:{color:description background};
            border: 1px solid {color:border};
            width: 100px;
            max-height: 50px;
            margin-top: 25px;
            overflow:auto;
            overflow-x:hidden;
            text-align:center;
        }

        .description:before {
           content:"\00a0";
           color:{color:description background};
           display:block; /* reduce the damage in FF3.0 */
           position:absolute;
           left:60px;
           top: 107px;
           width:0;
           height:0;
           border-width:0 8px 8px;
           border-style:solid;
           border-color:{color:description background} transparent;
        }

        .playerbuttonbg {
                position: absolute;
                left: 20px;
                top: 20px;
                width: 19px;
                height: 19px;
                background-color: #ffffff;
                padding: 10px;
                -webkit-border-radius: 40px;
                -moz-border-radius: 40px;
                border-radius: 40px;
                opacity: .9;
                filter: alpha(opacity=40);
                -moz-opacity: 0.4;
                -khtml-opacity: 0.4;
                transition: opacity .7s ease-in-out;
                -moz-transition: opacity .7s ease-in-out;
                -webkit-transition: opacity .7s ease-in-out;
            }

            .playerbuttonbg:hover {
                opacity: 1;
                filter: alpha(opacity=100);
                -moz-opacity: 1;
                -khtml-opacity: 1;
            }

            .newplayerbutton {
                position: relative;
                width: 19px;
                height: 19px;
                overflow: hidden;
            }

            .playerbuttonhug {
                position: absolute;
                top: -18px;
                left: -7px;
            }

            .tumblr_audio_player {
                height: 90px;
                width: 270px;
                -moz-transform: scale(0.60, 0.60);
                -webkit-transform: scale(0.60, 0.60);
                -o-transform: scale(0.60, 0.60);
                -ms-transform: scale(0.60, 0.60);
                transform: scale(0.60, 0.60);
                -moz-transform-origin: top left;
                -webkit-transform-origin: top left;
                -o-transform-origin: top left;
                -ms-transform-origin: top left;
                transform-origin: top left;
            }

            .audioimgwrapper {
                position: absolute;
                left: 0px;
                top: -1px;
                width: 86px;
                height: 86px;
            }

            .audioimgwrapper img {
                width: 100%;
                height: auto;
                border: 1px solid {color:border};
            }

            .trackdetails {
                width: auto;
                border: 1px solid {color:border};
                display:inline-block;
                margin-top: -1px;
                margin-left: 95px;
                min-height: 74px;
                padding: 6px;
            }

            .audiowrapper {
                position: relative;
                display:inline-block;
            }

    </style>
    <body>


         <img src="{image:corner image}" height=auto style="
     position:fixed;
     bottom:0px;
     right:0px;
     z-index:-999"/>

        <div id="sidebar">
            <div class="image">
            <a title="{Title}" href="/">
                <img src="{image:sidebar}">
            </a>
            </div>
            <div class="description">
            <div class="links">
                <a title="{text:link 1 text}" href="{text:link 1}">{text:link 1 text}</a>
                <a title="{text:link 2 text}" href="{text:link 2}">{text:link 2 text}</a>
                <a title="{text:link 3 text}" href="{text:link 3}">{text:link 3 text}</a>
            </div>
                {Description}
            </div>
        </div>

        <div id="topbar">

            <div class="title">"{Title}"</div>
            <div class="pagination">
        {block:Pagination}
        {block:PreviousPage}
        <a href="{PreviousPage}">◀</a>
        {/block:PreviousPage}
        {block:JumpPagination length="5"}
        {block:CurrentPage}
        <a href="{URL}">
        {PageNumber}
        </a>
        {/block:CurrentPage}
        {block:JumpPage}
        <a class="jump_page" href="{URL}">
        {PageNumber}
        </a>
        {/block:JumpPage}
        {/block:JumpPagination}
        {block:NextPage}
        <a href="{NextPage}">▶</a>
        {/block:NextPage}
        {/block:Pagination}
            </div>

        </div>

        <div id="credit" style="position:fixed; bottom: 5px; left: 5px;">
            <a title="theme by kazunes!" href="http://kazunes.tumblr.com">
            <img src="http://i.imgur.com/rZdi65b.gif">
            </a>
        </div>

        <div id="container" align="center">
        {block:Posts}
        <div id="posts" align="left">

        <div style="margin-top: -30px; margin-left: 250px; position: absolute;">
        <a title="PERMALINK" href="{Permalink}">
        <img src="http://i.imgur.com/BsSj2ov.png">
        </a>
        </div>

        {block:Text}
        {block:Title}
        <div style="font-weight: 700; font-size: 15px;">
        {Title}
        </div>
        {/block:Title}
        {Body}
        {/block:Text}

        {block:Photo}
        <img src="{PhotoURL-400}" alt="{PhotoAlt}" style="width: {select:post size};">
        {block:Caption}
        {Caption}
        {/block:Caption}
        {/block:Photo}

        {block:Photoset}
        <div style="width: {select:post size};">
        {Photoset}
        </div>
        {block:Caption}
        {Caption}
        {/block:Caption}
        {/block:Photoset}

        {block:Quote}
        "{Quote}"
        {block:Source}
        —{Source}
        {/block:Source}
        {/block:Quote}

        {block:Link}
        <a href="{URL}" target="_blank">{Name}</a>
        {block:Description}
        {Description}
        {/block:Description}
        {/block:Link}

        {block:Chat}
        {block:Title}
        {Title}
        {/block:Title}
        <ol>
        {block:Lines}
        <li>
        {block:Label}
        <span class="label">
        <b>{Label}</b>
        </span>
        {/block:Label}
        {Line}
        </li>
        {/block:Lines}
        </ol>
        {/block:Chat}

        {block:AudioPlayer}
        <div class="audiowrapper">
        {block:AlbumArt}
        <div class="audioimgwrapper"><img src="{AlbumArtURL}"></div>
        {/block:AlbumArt}

        <div class="playerbuttonbg">
        <div class="newplayerbutton">
        <div class="playerbuttonhug">
        {AudioPlayerWhite}
        </div>
        </div>
        </div>

        <div class="trackdetails">

        {block:TrackName}{TrackName}{/block:TrackName}<br/>
        {block:Artist}Artist: {Artist}{/block:Artist}<br/>
        {PlayCountWithLabel}

        </div>

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

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

        {block:Answer}
        <div class="question">
        <b>{Asker}:</b>
        {Question}
        </div>
        <div class="caption">
        {Answer}
        </div>
        {/block:Answer}

        {block:PostNotes}
        {PostNotes}
        {/block:PostNotes}

        {block:PermalinkPage}
        {12Hour}:{Minutes} /
        {NoteCountWithLabel} /
        {block:HasTags}
        {block:Tags}
        <a title="tagged/{Tag}" href="{TagURL}">#{Tag}</a>
        {/block:Tags}
        {/block:HasTags}
        {/block:PermalinkPage}


        </div>

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