Theme 06 - Serenity

<!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}

<!---------------------------------------------------------------------
----------------- THEME BY ELISE WHITE (MISSCAPALDI) ------------------
-------- PLEASE DO NOT REMOVE THE CREDIT OR USE AS A BASE CODE --------
------------------- THANKS AND HAVE A LOVELY DAY ;) -------------------
---------------------------------------------------------------------->

<meta name="color:Background" content="#ffffff"/>
<meta name="color:Text" content="#838282"/>
<meta name="color:Link" content="#b8b8b8"/>
<meta name="color:Link Hover" content="#456d77"/>
<meta name="color:Title" content="#4f4f4f"/>
<meta name="color:Top Bar Links" content="#ababab"/>
<meta name="color:Post Info Background" content="#f5f8f7"/>
<meta name="color:Scrollbar" content="#91a4a9">
<meta name="color:Chat Odd" content="#63868f">
<meta name="color:Chat Even" content="#9fb8be">

<meta name="image:Top Bar" content=""/>
<meta name="image:Opt BG Image" content=""/>

<meta name="text:link1" content="" />
<meta name="text:link1 url" content="/">
<meta name="text:link2" content="" />
<meta name="text:link2 url" content="/">
<meta name="text:link3" content="" />
<meta name="text:link3 url" content="/">
<meta name="text:link4" content="" />
<meta name="text:link4 url" content="/">
<meta name="text:link5" content="" />
<meta name="text:link5 url" content="/">

<meta name="if:BackgroundImage" content="">
<meta name="if:ShowUpdatesTab" content="1">
<meta name="if:ShowTitle" content="1">
<meta name="if:ShowPostInfo" content="1">

<script language="JavaScript" src="http://dl.dropbox.com/u/3173073/GothicDarkness/qTip.js" type="text/JavaScript"></script>

<link href='http://fonts.googleapis.com/css?family=Crimson+Text:400italic' rel='stylesheet' type='text/css'>

<style type="text/css">

::-webkit-scrollbar-thumb{
background-color: {color:scrollbar};
border: 2px solid {color:background};
height:auto;
}

::-webkit-scrollbar {
height:auto;
width:11px;
background-color:{color:scrollbar};
border:5px solid {color:background};
}

div#qTip {
    padding: 2px;
    display: none;
    text-align: center;
    position: absolute;
    font-style:italic;
    font-size:8px;
    line-height:10px;
    font-family:cambria;
    text-transform:uppercase;
    z-index: 1000;
    background: white;
    border:1px solid;
    border-color:#ebebeb;
    color:#c9c9c9;

    letter-spacing: 1px;
    }

body {
    background:{color:background};

    {block:IfBackgroundImage}
    background-image:url({image:Opt BG Image});
    background-attachment:fixed;
    {/block:IfBackgroundImage}

    margin:0px;
    color:{color:text};
    font-family:Calibri;
    font-size:10px;
    line-height:100%;
}

a {
    text-decoration:none;
    outline:none;
    -moz-outline-style:none;
    color:{color:link};
    -moz-transition-duration:1s;
    -webkit-transition-duration:1s;
    -o-transition-duration:1s;
    }
    a:hover {
        color:{color:Link Hover};
        -moz-transition-duration:1s;
        -webkit-transition-duration:1s;
        -o-transition-duration:1s;
        }

img {
    border:none;
}

blockquote {
    padding-left:5px;
    border-left:2px solid;
}

blockquote blockquote {
    padding-left:5px;
    border-left:2px solid;
}

h1 {
    font-size:9px;
    font-family: 'Noto Sans', sans-serif;
    font-weight:normal;
    text-transform:uppercase;
    text-align:center;
    margin-bottom:15px;
    letter-spacing:1px;
}

#container {
    position:absolute;
    width:500px;
    left:50%;
    margin:0 0 0 -250px;
}

#entries {
    width:500px;
    margin-top:110px;
}

#post {
    width:500px;
    padding-bottom:10px;
}

.albumcover {
    position: relative;
    z-index: 1;
    height: 80px;
    float:left;
    border:1px solid #f2f2f2;
    padding:4px;
    }

.playbutton {
    overflow: hidden;
    position: relative;
    z-index: 99;
    margin: 5px 0px 0px 0px;
    }

.musicbin {
    height:50px;
    width:50px;
    background-color: #fff;
    position: absolute;
    z-index: 99;
    margin-top: 20px;
    margin-left: 20px;
    opacity: 0.2;
    -webkit-transition: opacity 0.5s linear;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
}
    .musicbin:hover {
        opacity:0.5;
        -webkit-transition: opacity 0.5s linear;
        -webkit-transition: all 0.5s linear;
        -moz-transition: all 0.5s linear;
        -o-transition: all 0.5s linear;
    }

.musicinfo {
    padding-top:20px;
    font-size:12px;
    margin-left: 100px;
    text-align:center;
    background: {color:Post Info Background};
    margin-top:5px;
    min-height:70px;
}

.quote {
    padding:5px 5px 15px 5px;
    text-align:center;
    font-size:14px;
    letter-spacing:1px;
    font-family: 'Crimson Text', serif;
    font-style:italic;
}

.linkpost {
    text-align:center;
    padding: 0px 15px 0px 15px;
}


#topbar {
    width:500px;
    height:100px;
    position:fixed;
    z-index:1000;
    margin-top:0px;
    }

    #topbarimage {
        width: 500px;
        height:100px;
        background:white;
        padding-bottom:10px;
        }
        #topbarimage img {
            width:500px;
            height:100px;
            }

   #topbar:hover #textcontainer {
       height:45px;
       /* RGBa with 0.8 opacity */
       background-color: rgba(255, 255, 255, 0.8);

       {block:IfNotShowTitle}
       opacity:0.9;
       {/block:IfNotShowTitle}

       -moz-transition-duration:1s;
       -webkit-transition-duration:1s;
       -o-transition-duration:1s;
   }

    #topbar:hover #links {
        opacity:1;
        -moz-transition-duration:1s;
        -webkit-transition-duration:1s;
        -o-transition-duration:1s;
        }
    #topbar:hover #description {
        opacity:1;
        -moz-transition-duration:1s;
        -webkit-transition-duration:1s;
        -o-transition-duration:1s;
        }
    #topbar:hover #title {
        opacity:0;
        -moz-transition-duration:1s;
        -webkit-transition-duration:1s;
        -o-transition-duration:1s;
        }
    #topbar:hover #pagination {
        opacity:1;
        -moz-transition-duration:1s;
        -webkit-transition-duration:1s;
        -o-transition-duration:1s;
        }

#textcontainer {
    display:block;
    width:175px;
    height:20px;

    {block:IfNotShowTitle}
    height:45px;
    {/block:IfNotShowTitle}

    opacity:0.9;

    {block:IfNotShowTitle}
    opacity:0;
    {/block:IfNotShowTitle}

    margin-left:auto;
    margin-right:auto;
    margin-top:-100px;
    padding:3px 0px 3px 0px;
    background-clip:content-box;
    /* Fallback for web browsers that doesn't support RGBa */
    background-color: rgb(255, 255, 255) transparent;
    /* RGBa with 0.6 opacity */
    background-color: rgba(255, 255, 255, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
    border-top:1px solid white;
    border-bottom:1px solid white;
    -moz-transition-duration:1s;
    -webkit-transition-duration:1s;
    -o-transition-duration:1s;
}

#title {
    display:block;
    opacity:1;
    letter-spacing:1px;
    font-family:calibri;
    font-size:11px;
    text-transform:uppercase;
    color:{color:Title};
    text-align:center;
    padding: 2px 0px 2px 0px;
    font-weight:bold;
    vertical-align:middle;
    margin-top:3px;
    -moz-transition-duration:1s;
    -webkit-transition-duration:1s;
    -o-transition-duration:1s;
    }

#linksfloater {
    float:left;
    height:50%;
    margin-bottom:-10px;
    position:relative;
}

#links {
    letter-spacing:1px;
    font-family:calibri;
    width:500px;
    font-size:11;
    text-transform:uppercase;
    text-align:center;
    font-style:none;
    height:20px;
    clear:both;
    position:relative;
    opacity:0;
    margin-top:-34px;
    -moz-transition-duration:1s;
    -webkit-transition-duration:1s;
    -o-transition-duration:1s;
}

#links a {
    width:10px;
    margin: 0px 3px 0px 3px;
    color:{color:Top Bar Links};
    letter-spacing:0px;
    padding:1px 5px 1px 5px;
    text-decoration:none;
    vertical-align:middle;
    border-top:1px solid {color:Top Bar Links};
    border-bottom:1px solid {color:Top Bar Links};
    -moz-transition-duration:0.5s;
    -webkit-transition-duration:0.5s;
    -o-transition-duration:0.5s;
}

    #links a:hover {
        text-align:center;
        padding:5px 5px 5px 5px;
        border-top:1px solid white;
        border-bottom:1px solid white;
        -moz-transition-duration:0.5s;
        -webkit-transition-duration:0.5s;
        -o-transition-duration:0.5s;
    }

#description {
    display:block;
    opacity:0;
    letter-spacing:0px;
    font-family:calibri;
    font-size:10px;
    text-transform:none;
    color:#333333;
    text-align:center;
    padding: 2px 2px 2px 2px;
    margin-top:-18px;

    {block:IfNotShowTitle}
    margin-top:0px;
    {/block:IfNotShowTitle}

    -moz-transition-duration:1s;
    -webkit-transition-duration:1s;
    -o-transition-duration:1s;
    }

#pagination {
    display:block;
    opacity:0;
    font-size:10px;
    text-transform:lowercase;
    margin-top:-55px;
    letter-spacing:1px;
    font-style:normal;
    color:gray;
    margin-left:10px;
    -moz-transition-duration:1s;
    -webkit-transition-duration:1s;
    -o-transition-duration:1s;
    }

#pagination a {
    color: {color:link};
    }

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

#info {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    width:491px;
    margin-top:10px;
    padding:5px;
    word-spacing:1px;
    font-size:7px;
    color:{color:text};
    text-transform:uppercase;
    font-style:normal;
    text-align:left;
    background: {color:Post Info Background};
    -moz-transition-duration:0.5s;
    -webkit-transition-duration:0.5s;
    -o-transition-duration:0.5s;
    }
    #info a {
        margin-right:2px;
        color:{color:link};
        font-style:normal;
        }
            #info a:hover {
                color:{color:link hover};
                }

    .tags {
        font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
        width:495px;
        text-transform:normal;
        line-height:120%;
        font-size:9px;
        text-align:center;
        opacity:0;
        padding-top:5px;
        padding-bottom:10px;
        -moz-transition-duration:1s;
        -webkit-transition-duration:1s;
        -o-transition-duration:1s;
        }
        .tags a{
            color:{color:link};
            -moz-transition-duration:.5s;
            -webkit-transition-duration:.5s;
            -o-transition-duration:.5s;
            }
            .tags a:hover{
                color:{color:link hover};
                -moz-transition-duration:.5s;
                -webkit-transition-duration:.5s;
                -o-transition-duration:.5s;
                }
        #post:hover .tags{
            opacity:1;
            -moz-transition-duration:1s;
            -webkit-transition-duration:1s;
            -o-transition-duration:1s;
            }

#asker {
    float:right;
    margin-left:5px;
    }
    #asker img{
        border:1px solid #f2f2f2;
        padding:2px;
        }

#answerer {
    float:left;
    margin-right:5px;
    }
    #answerer img{
        border:1px solid #f2f2f2;
        padding:2px;
        }

.chat .label {
    text-transform:uppercase;
    font-weight:bold;
}

.line_odd .label {color: {color:Chat Odd}}
.line_even .label {color: {color:Chat Even}}


#credit {
    font-size:9px;
    font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
    font-style:italic;
    letter-spacing:1px;
}

    #credit a {
        background-color:#fff;
        padding:5px;
        border-top:1px solid #e9e9e9;
        border-bottom:1px solid #e9e9e9;
        position:fixed;
        right:15px;
        bottom:10px;
        -moz-transition-duration:1s;
        -webkit-transition-duration:1s;
        -o-transition-duration:1s;
    }

        #credit a:hover {
            color:#fff;
            background-color:#747474;
            -moz-transition-duration:1s;
            -webkit-transition-duration:1s;
            -o-transition-duration:1s;
        }

#updatecontainer {
    position:fixed;
    width:200px;
    margin:5px 0px 0px 90px;
}

    #updatecontainer:hover #updatetext {
        opacity:1;
        -moz-transition-duration:0.7s;
        -webkit-transition-duration:0.7s;
        -o-transition-duration:0.7s;
    }

#updateheader {
    width:200px;
    padding:3px 0px 3px 0px;
    font-family:calibri;
    font-size:11px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:{color:Text};
    text-align:center;
    border-top:1px solid {color:Top Bar Links};
    border-bottom:1px solid {color:Top Bar Links};
}

#updatetext {
    opacity:0;
    width:200px;
    padding:10px 0px 0px 0px;
    margin-bottom:0px;
    font-family:calibri;
    font-size:10px;
    text-align:justify;
    -moz-transition-duration:0.7s;
    -webkit-transition-duration:0.7s;
    -o-transition-duration:0.7s;
}

{CustomCSS}</style></head><body>



<!--------------------------------------------
    UPDATES TAB
 --------------------------------------------->

{block:IfShowUpdatesTab}
<div id="updatecontainer">
<div id="updateheader">Updates</div>
<div id="updatetext">
        Here's where your updates will go!<br /><br />
        You can replace this text with your own updates by going to "Edit HTML" and finding this block of text underneath the "Updates Tab" section.<br /><br />
        This tab is, however, completely optional. If you'd like to disable it, you only need to uncheck the box that says "ShowUpdatesTab" in "Appearance Options".<br /><br />
        Any problems just message me!! :D
</div>
</div>
{/block:IfShowUpdatesTab}

<!--------------------------------------------
    TOP BAR
 --------------------------------------------->

<div id="container">

<div id="topbar">

<div id="topbarimage"><img src="{image:Top Bar}"></div>

<div id="linksfloater">
<div id="links">
{block:Pagination}{block:PreviousPage}<a href="{PreviousPage}">-</a>{/block:PreviousPage}{/block:Pagination}
<a href="{text:link1 url}">{text:link1}</a>
<a href="{text:link2 url}">{text:link2}</a>
<a href="{text:link3 url}">{text:link3}</a>
<a href="{text:link4 url}">{text:link4}</a>
<a href="{text:link5 url}">{text:link5}</a>
{block:Pagination}{block:NextPage}<a href="{NextPage}">+</a>{/block:NextPage}{/block:Pagination}
</div>
</div>

<div id="textcontainer">
{block:IfShowTitle}
<div id="title">{Title}</div>
{/block:IfShowTitle}
<div id="description">{description}</div>
</div>


</div>

<!--------------------------------------------
    POST TYPES
 --------------------------------------------->

<div id="entries">{block:Posts}<div id="post">

<!---------- TEXT POSTS ---------->

{block:Text}
<h1>{block:Title}{Title}{/block:Title}</h1>{Body}
{/block:Text}

<!---------- PHOTO POSTS ---------->

{block:Photo}
{LinkOpenTag}<img src="{PhotoURL-500}">{LinkCloseTag}
{block:Caption}{Caption}{/block:Caption}
{/block:Photo}

<!---------- PHOTOSET POSTS ---------->

{block:Photoset}
{Photoset-500}
{block:Caption}{Caption}{/block:Caption}
{/block:Photoset}

<!---------- QUOTE POSTS ---------->

{block:Quote}
<div class="quote">{Quote}</div>
{block:Source}<div style="text-align:right; margin-right:15px;">{Source}</div>{/block:Source}
{/block:Quote}

<!---------- LINK POSTS ---------->

{block:Link}
<div class="linkpost">
<h1><a href="{URL}" {Target}>{Name}</a></h1>
{block:Description}{Description}{/block:Description}
</div>
{/block:Link}

<!---------- CHAT POSTS ---------->

{block:Chat}
{block:Title}<h1>{Title}</h1>{/block:Title}
<div class="chat">{block:Lines}<div class="line_{Alt}">{block:Label}<span class="label">{Label}</span>{/block:Label}
{Line}<br /></div>{/block:Lines}</div>
{/block:Chat}

<!---------- AUDIO POSTS ---------->

{block:Audio}
<div class="musicbin"><div class="playbutton">{block:AudioPlayer}{AudioPlayerWhite}{/block:AudioPlayer}</div></div>
{block:AlbumArt}<img src="{AlbumArtURL}" class="albumcover">{/block:AlbumArt}
<div class="musicinfo">
{block:TrackName}<div style="font-size:11px; padding:5px!imporant; text-transform:uppercase; margin-bottom: 15px; font-weight:bold; letter-spacing:1px;">{TrackName}</div>{/block:Trackname}
{block:Artist}<div style="font-size:10px; margin-bottom: 2px;">{Artist}{/block:Artist}
{block:Album} - {Album}</div>{/block:Album}
{block:PlayCount}<div style="font-style:normal; font-size:8px; text-transform:uppercase; letter-spacing:1px;">{PlayCount} plays</div> {/block:PlayCount}
</div>
<div style="margin-top:20px;">{block:caption}{Caption}{/block:caption}</div>
{/block:Audio}

<!---------- VIDEO POSTS ---------->

{block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}

<!---------- ANSWER POSTS ---------->

{block:Answer}
<div id="asker"><img src="{AskerPortraitURL-48}"></div>
<div style="text-align:right; font-size:11px;">{Asker} asked:</div>
<div style="background:{color:Post Info Background}; padding:15px 5px 15px 5px; margin-top:5px; margin-right:59px; min-height:10px; text-align:right;">{Question}</div>
<br>
<div id="answerer"><img src="{PortraitURL-48}"></div>
<div style="text-align:left; font-size:11px;">{Name} replied:</div>
<div style="background:{color:Post Info Background}; padding:5px 5px 5px 5px; margin-top:5px; margin-left:59px; min-height:10px; text-align:left;">{Answer}</div>
{/block:Answer}

<!--------------------------------------------
    POST INFO
 --------------------------------------------->

{block:IfShowPostInfo}
{block:Date}
<div id="info">
<a href="{Permalink}">{TimeAgo}</a>{/block:Date}{block:NoteCount} with <a href="{Permalink}">{NoteCountWithLabel}</a> {/block:NoteCount} {block:RebloggedFrom} via <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom}
{block:ContentSource}<div style="float:right;"><a href="{SourceURL}">source</a></div>{/block:ContentSource}</div>
{block:HasTags}
<div class="tags">{block:Tags} <a href="{TagURL}">&nbsp; -{Tag}</a>&nbsp; {/block:Tags}</div>{/block:HasTags}
<div class="postnote">
{block:PostNotes}{PostNotes}{/block:PostNotes}
</div>
</div>
{/block:IfShowPostInfo}
{/block:Posts}

</div>
</div>

<!--------------------------------------------
    CREDIT - YOU MAY EDIT BUT YOU MAY NOT REMOVE
 --------------------------------------------->

<div id="credit"><a href="http://misscapaldi.tumblr.com">elise white</a></div>

</body></html>