Theme 001

<!DOCTYPE html>

<!--        macfustythemes     -->
    <head>
        {MobileAppHeaders}
        <meta charset="utf-8">
        <title>{Title}</title>
        {block:Description}
        <meta name="description" content="{MetaDescription}">
        {/block:Description}

        <!-- Theme Defaults -->
        <meta name="image:Sidebar" content="http://static.tumblr.com/j2tdnxz/SGrn1vign/amber.png">

        <meta name="if:Tags" content="0">

        <meta name="color:Background1" content="#3f0404">
        <meta name="color:Background2" content="#b10e0e">
        <meta name="color:Background3" content="#6b0707">
        <meta name="color:Background4" content="#2b0101">
        <meta name="color:Text" content="#a34545">
        <meta name="color:Links" content="#c59090">
        <meta name="color:Hover" content="#fff">
        <meta name="color:Title" content="#723e3e">

        <meta name="text:Link1" content="/">
        <meta name="text:Link1 Title" content="link 1">
        <meta name="text:Link2" content="/">
        <meta name="text:Link2 Title" content="link 2">
        <meta name="text:Link3" content="/">
        <meta name="text:Link3 Title" content="link 3">
        <meta name="text:Link4" content="/">
        <meta name="text:Link4 Title" content="link 4">
        <meta name="text:Link5" content="/">
        <meta name="text:Link5 Title" content="link 5">

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

        <link href='http://fonts.googleapis.com/css?family=Alegreya+Sans+SC:100,400' rel='stylesheet' type='text/css'>

        <!-- HTML5 Shiv -->
        <!--[if lt IE 9]>
                <script src="http://static.tumblr.com/hriofhd/Qj0m8pn7q/html5shiv.js"></script>
        <![endif]-->

        <style>

        body {
            background-color: {color:Background1};
            color: {color:Text};
            font-size: 11px;
            font-family: 'Calibri', sans-serif;
            line-height: 18px;
        }

        a {
            color: {color:Links};
            text-decoration: none;
            -moz-transition: all 0.5s ease;
            -o-transition: all 0.5s ease;
            -webkit-transition: all 0.5s ease;
            transition: all 0.5s ease;
        }

        a:hover {
            color: {color:Hover};
        }

        blockquote {
            border-left: 3px solid {color:Text};
            padding-left: 10px;
        }

        /**     LEFT SIDEBAR    */

        #left {
            width: 450px;
            height: 100%;
            position: fixed;
        }

        /** CIRCLE 1 + SIDEBAR PICTURE */

        #circle1 {
            position: absolute;
            margin: 20px 0 0 10px;
            width: 275px;
            height: 275px;
            border-radius: 100%;
            background-color: {color:Background2};
        }

        .sidebarpic img {
            width: 275px;
            height: 275px;
            border-radius: 100%;
        }

        /** CIRCLE 2 + DESCRIPTION */

        #circle2 {
            position: absolute;
            margin: 180px 0 0 200px;
            width: 190px;
            height: 190px;
            border-radius: 100%;
            background-color: {color:Background3};
            padding: 50px;
        }

        .description {
            text-align: center;
            height: 190px;
            overflow: auto;
            padding-right: 3px;
            color: {color:Text};
        }

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

        /* Track */
        .description::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
            -webkit-border-radius: 10px;
            border-radius: 10px;
        }

        /* Handle */
        .description::-webkit-scrollbar-thumb {
            -webkit-border-radius: 10px;
            border-radius: 10px;
            background: {color:Background3};
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
        }

        /** CIRCLE 3 + TITLE */

        #circle3 {
            position: absolute;
            margin: 240px 0 0 30px;
            width: 150px;
            height: 150px;
            border-radius: 100%;
            background-color: {color:Background4};
            padding: 25px;
        }

        .title1 {
            margin: 40px 0 0 0;
            font-size: 20px;
            letter-spacing: 5px;
            text-align: center;
            font-family: 'Alegreya Sans SC', sans-serif;
        }

        .title1 a {
            color: {color:Title};
        }

        .title1 a:hover {
            color:{color:Hover};
        }

        /**     NAVIGATION LINKS    */

        #navcontainer {
            width: 350px;
            margin: 490px 0 0 70px;
        }

        .nav {
            float: left;
            margin: 0 10px 10px 10px;
            width: 60px;
            height: 60px;
            line-height: 60px;
            border-radius: 100%;
            background-color: {color:Background2};
            text-align: center;
            text-transform: lowercase;
        }

        .nav a {
            color: {color:Links};

        }

        .nav a:hover {
            color: {color:Hover};

        }

        /**     POSTS       */

        #postcontainer {
            position: absolute;
            width: 600px;
            margin: 50px 0 0 550px;
        }

        .post {
            width: 500px;
            padding: 20px;
            background-color: {color:Background4};
            color: {color:Text};
            margin-bottom: 75px;
        }

        .post img {
            {block:RebloggedFrom}
            max-width: 400px;
            {/block:RebloggedFrom}
        }

        .title2 {
            font-family: 'Alegreya Sans SC', sans-serif;
            font-size: 18px;
        }

        .title3 {
            font-family: 'Alegreya Sans SC', sans-serif;
            font-size: 18px;
            text-align: center;
        }

        .source {
            text-align: right;
        }

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

        .chat li {
            padding: 5px;
        }

        .chat li.odd {
            background-color: {color:Background3};
        }

        .chat li.even {

        }

        .label {
            text-transform: uppercase;
            display: inline-block;
        }

        .audiopost {
            width: 500px;
            padding: 20px;
            color: {color:Text};
            margin-bottom: 75px;

        }


        .audiocirclecontainer {
            width: 500px;
            margin: 10px 0 0 -20px;


        }

        .audiocircle1, .audiocircle2 {
            background-color: {color:Background3};
            overflow: hidden;
            border-radius: 100%;
            float: left;
        }


        .player {
            margin-top: 20px;
            float: left;
            z-index: -1;
            background-color: {color:Background3};
        }

        .audiocircle1 {
            width: 50px;
            height: 50px;
            font-family: 'Alegreya Sans SC', sans-serif;
            font-size: 14px;
            text-align: center;
            padding: 20px;
            margin: -10px 0 0 -10px;
        }
        .audiocircle2 {
            width: 100px;
            height: 100px;
            margin: -15px 0 0 0;
        }

        .audiocircle2 img {
            width: 100px;
            height: 100px;
            border-radius: 100%;
        }

        .audiocaption {
            width: 500px;
            padding: 20px 10px 10px 10px;
            margin-top: 80px;
            background-color: {color:Background4};
        }

        .questioncontainer {
            width: 500px;
            padding: 20px 20px 5px 20px;
            color: {color:Text};
            margin: 20px 0 75px 0;
        }
        .asker {

        }

        .asker img {
            border-radius: 100%;
            margin: -55px 0 0 -50px;
            height: 70px;
            width: 70px;
            float: left;
            z-index: 999;
        }

        .user {
            position: absolute;
            margin: -50px 0 0 20px;
            font-family: 'Alegreya Sans SC', sans-serif;
            font-size: 12px;
        }

        .question {
            position: relative;
            width: 470px;
            padding: 10px 20px 10px 20px;
            background-color: {color:Background4};
            margin: -30px 0 0 10px;
            z-index: -1;
        }

        .clear {
            clear: both;
        }
        .answer {
            width: 490px;
            padding: 10px;
            background-color: {color:Background4};
            margin: 5px 0 0 10px;
        }


        /**     NOTES       */

        .infocontainer {
            position: absolute;
            z-index: 999;
            margin: -20px 0 0 520px;
        }

        .infocircle {
            width: 60px;
            height: 55px;
            background-color: {color:Background3};
            border-radius: 100%;
            margin-bottom: 5px;
            text-align: center;
            padding-top: 5px;
            font-family: 'Alegreya Sans SC', sans-serif;
            font-size: 16px;
            text-transform: uppercase;
            line-height: 22px;
            color: {color:Links};
        }


        .infocircle a:hover {
            color:{color:Hover};
        }

        .number {
            font-size: 24px;
        }

        .tags {
            font-size: 10px;
            margin: -75px 0 75px 5px;
        }


        #postnotes {
            color: {color:Text};
        }

        #postnotes ul {
            width: 540px;
            list-style-type: none;
            margin: -50px 0 0 -40px;

        }

        #postnotes ul li {
            padding: 10px;
            border: none;
        }

        #postnotes img {
            border-radius: 100%;
            height: 20px;
            margin-right: 10px;
        }

        /**     PAGINATION      */

        #right {
            position: fixed;
            right: 0%;
            top: 40%;
            width: 200px;
        }

        .paginationcircle {
            width: 60px;
            height: 60px;
            border-radius: 100%;
            background-color: {color:Background2};
            margin: 0 0 20px 50px;
            text-align: center;
            line-height: 60px;
            font-size: 14px;
        }


        </style>
    </head>
    <body>
<!--        LEFT SIDEBAR        -->
    <div id="left">
        <div id="circle1">
            <div class="sidebarpic">
                <img src="{image:Sidebar}">
            </div>
        </div>
        <div id="circle2">
            <div class="description">
                {Description}
            </div>
        </div>
        <div id="circle3">
            <div class="title1">
                <a href="/">{Title}</a>
            </div>
        </div>

        <div id="navcontainer">
            <div class="nav">
                <a href="/">Home</a>
            </div>
            <div class="nav">
                <a href="/ask">Ask</a>
            </div>
            {block:ifLink1}
            <div class="nav">
                <a href="{text:Link1}">{text:Link1 Title}</a>
            </div>
            {/block:ifLink1}
            {block:ifLink2}
            <div class="nav">
                <a href="{text:Link2}">{text:Link2 Title}</a>
            </div>
            {/block:ifLink2}
            {block:ifLink3}
            <div class="nav">
                <a href="{text:Link3}">{text:Link3 Title}</a>
            </div>
            {/block:ifLink3}
            {block:ifLink4}
            <div class="nav">
                <a href="{text:Link4}">{text:Link4 Title}</a>
            </div>
            {/block:ifLink4}
            {block:ifLink5}
            <div class="nav">
                <a href="{text:Link5}">{text:Link5 Title}</a>
            </div>
            {/block:ifLink5}
            <div class="nav">
                <a href="http://macfustythemes.tumblr.com/">Theme</a>
            </div>
        </div>
    </div>

<!--    POSTS       -->
    <div id="postcontainer">
        {block:Posts}
        <div class="infocontainer">
            {block:Date}
            <div class="infocircle">
            <a href="{Permalink}">
                <div class="number">{DayofMonth}</div>
                {ShortMonth}
            </a>
            </div>
            <div class="infocircle">
                <div class="number">{NoteCount}</div>
                notes
            </div>
            {/block:Date}
        </div>
        <!-- Text  -->
        {block:Text}
        <div class="post">
            {block:Title}<div class="title2">{Title}</div>{/block:Title}
            {Body}
        </div>
        {/block:Text}

        <!--  Photo  -->
        {block:Photo}
        <div class="post">
            <img src="{PhotoUrl-500}">
            {block:Caption}
            <p>{Caption}</p>
            {/block:Caption}
        </div>
        {/block:Photo}
        {block:Photoset}
        <div class="post">
            {Photoset}
            {block:Caption}
            <p>{Caption}</p>
            {/block:Caption}
        </div>
        {/block:Photoset}

        <!--  Quote  -->
        {block:Quote}
        <div class="post">
            <div class="title3">{Quote}</div>
            {block:Source}
            <div class="source">{Source}</div>
            {/block:Source}
        </div>
        <div class="clear"></div>
        {/block:Quote}

        <!-- Link -->
        {block:Link}
        <div class="post">
            <div class="title3">
                <a href="{URL}" target="{Target}">{Name}</a>
            </div>
            {block:Description}
            <p>{Description}</p>
            {/block:Description}
        </div>
        {/block:Link}

        <!--  Chat  -->
        {block:Chat}
        <div class="post">
            {block:Title}
            <div class="title2">{Title}</div>
            {/block:Title}
            <div class="chat">
                <ul>
                    {block:Lines}
                    <li class="{Alt}">
                        {block:Label}
                        <div class="label">{Label}</div>
                        {/block:Label}
                        {Line}
                    </li>
                    {/block:Lines}
                </ul>
            </div>
        </div>
        {/block:Chat}

        <!-- Audio  -->
        {block:Audio}
        <div class="audiopost">
            <div class="audiocirclecontainer">
            <div class="audiocircle2">
            {block:AlbumArt}
            <img src="{AlbumArtURL}">
            {/block:AlbumArt}
            </div>
            <div class="audiocircle1">{PlayCountWithLabel}</div>
            <div class="player">
            {AudioPlayerBlack}
            </div>

            </div>
            <div class="audiocaption">{Caption}</div>
            <div class="clear"></div>
        </div>
        {/block:Audio}

        <!-- Video  -->
        {block:Video}
        <div class="post">
            {Video-500}
            {block:Caption}
            <p>{Caption}</p>
            {/block:Caption}
        </div>
        {/block:Video}

        <!-- Question -->
        {block:Answer}
        <div class="questioncontainer">
            <div class="asker">
                <img src="{AskerPortraitURL-96}">
                <div class="user">{Asker} asked:</div>
            </div>
            <div class="question">{Question}</div>
            <div class="clear"></div>
            <div class="answer">{Answer}</div>
        </div>
        {/block:Answer}

        <!-- Tags  -->
        {block:ifTags}
        {block:HasTags}
        <div class="tags">
        {block:Tags}<a href="{TagURL}">#{Tag}</a>&nbsp;{/block:Tags}
        </div>
        {/block:HasTags}
        {/block:ifTags}

        <!-- Post Notes -->
        {block:PostNotes}
        <div id="postnotes">
            <ul>
                <li>{PostNotes-64}</li>
            </ul>
        </div>
        {/block:PostNotes}
        {/block:Posts}
    </div>

<!--        PAGINATION      -->

    {block:Pagination}
    <div id="right">
            {block:NextPage}
            <div class="paginationcircle">
            <a href="{NextPage}">&rarr;</a>
            </div>
            {/block:NextPage}
            {block:PreviousPage}
            <div class="paginationcircle">
            <a href="{PreviousPage}">&larr;</a>
            </div>
            {/block:PreviousPage}
    </div>
    {/block:Pagination}
    </body>
</html>