Themes Page 01

<head>

<link rel="shortcut icon" href="{Favicon}"/>
<title>Themes</title>
<link href='http://fonts.googleapis.com/css?family=Karla' rel='stylesheet' type='text/css'>

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

<style type="text/css">

::-webkit-scrollbar-thumb {
    height:auto;
    background-color: #8b8a8b;
}

::-webkit-scrollbar {
    height:9px;
    width:2px;
    background-color: #fff;
}

#header {
    width:500px;
    height:150px;
    margin-left:auto;
    margin-right:auto;
    margin-top:-10px;
    text-align:center;
}

    #header img {
        width:500px;
        height:150px;
    }

#title {
    width:550px;
    font-family: 'Karla', sans-serif;
    text-transform:uppercase;
    background-color:#e0e0e0;
    margin-top:-150px;
    margin-left:-25px;
    opacity:0.8;
    color:black;
    padding:2px 0px 2px 0px;
    letter-spacing:1px;
    font-size:15px;
}

#description {
    width:150px;
    margin-top:10px;
    margin-left:175px;
    background-color:#ffffff;
    opacity:0.8;
    color:#4c4c4c;
    padding:2px 2px 2px 2px;
    font-size:8px;
    font-family:calibri;
    text-align:center;
    letter-spacing:1px;
    text-transform:uppercase;
}

#links {
    width:auto;
    margin-left:auto;
    margin-right:auto;
    margin-top:5px;
    padding-bottom:5px;
    border-bottom:1px solid #667371;
}

    #links a {
        display:inline-block;
        width:70px;
        padding:1px 0px 1px 0px;
        background-color:#ffffff;
        color:gray;
        font-size:10px;
        font-family:calibri;
        text-align:center;
        letter-spacing:1px;
        margin-left:2px;
        margin-right:2px;
        text-transform:uppercase;
        text-decoration:none;
        -o-transition: all 0.5s ease-out;
        -webkit-transition: all 0.5s ease-out;
        -moz-transition: all 0.5s ease-out;
    }

    #links a:hover {
        background-color:#667371;
        color:#ffffff;
        -o-transition: all 0.5s ease-out;
        -webkit-transition: all 0.5s ease-out;
        -moz-transition: all 0.5s ease-out;
    }

#themes {
    width:500px;
    margin-top:40px;
    margin-left:auto;
    margin-right:auto;
}

#themecontainer {
    display:inline-block;
    margin-top:10px;
    width:235px;
    height:135px;
    padding:5px 5px 5px 5px;
    border:1px solid #D8D8D8;
}

    #themecontainer:hover #screenshot img {
        opacity:0;
        transition: all 0.5s ease-out;
        -o-transition: all 0.5s ease-out;
        -webkit-transition: all 0.5s ease-out;
        -moz-transition: all 0.5s ease-out;
    }

    #themecontainer:hover #themetitle {
        opacity:0.9;
        -o-transition: all 0.5s ease-out;
        -webkit-transition: all 0.5s ease-out;
        -moz-transition: all 0.5s ease-out;
    }

    #themecontainer:hover #themelinks {
        opacity:0.9;
        -o-transition: all 0.5s ease-out;
        -webkit-transition: all 0.5s ease-out;
        -moz-transition: all 0.5s ease-out;
    }

#screenshot {
    display:block;
}

    #screenshot img {
        width:235px;
        height:135px;
        transition: all 0.5s ease-out;
        -o-transition: all 0.5s ease-out;
        -webkit-transition: all 0.5s ease-out;
        -moz-transition: all 0.5s ease-out;
    }

#themetitle {
    display:block;
    opacity:0;
    font-family: 'Karla', sans-serif;
    font-size:13px;
    letter-spacing:1px;
    color:#333333;
    text-align:center;
    text-transform:uppercase;
    margin-top:-110px;
    z-index:1000;
    padding:2px 0px 5px 0px;
    border-bottom:1px solid gray;
    -o-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
}

#themelinks {
    display:block;
    opacity:0;
    padding:2px 0px 2px 0px;
    background-color:white;
    font-family:calibri;
    font-size:10px;
    letter-spacing:2px;
    text-align:center;
    text-transform:uppercase;
    margin-top:10px;
    z-index:1000;
    -o-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
}

    #themelinks a {
        text-decoration:none;
        color:gray;
        padding:0px 1px 0px 2px;
        -o-transition: all 0.5s ease-out;
        -webkit-transition: all 0.5s ease-out;
        -moz-transition: all 0.5s ease-out;
    }

    #themelinks a:hover {
        color:white;
        background-color:#667371;
        -o-transition: all 0.5s ease-out;
        -webkit-transition: all 0.5s ease-out;
    -    -moz-transition: all 0.5s ease-out;
    }

#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;
        text-decoration:none;
        color:gray;
        -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;
        }

</style>

<body>

<!------------------------------------
     HEADER
------------------------------------->

<div id="header">
    <img src="https://24.media.tumblr.com/fcabfe205b232886996566431cbd7cb4/tumblr_myvbq3xh5l1rv5n8go1_500.png">
    <div id="links">
        <a href="/">HOME</a>
        <a href="/ask">ASK</a>
        <a href="/tagged/answered">ANSWERED</a>
        <a href="http://tumblr.com/dashboard">DASH</a>
    </div>
    <div id="title">TITLE GOES HERE</div>
    <div id="description">Your description will go here. You'll want to keep it fairly short or it will run off of the header. Hope you like!! :)</div>
</div>

<!------------------------------------
     THEME BOXES
------------------------------------->

<div id="themes">

<!------------ THEME 01 ------------->

<div id="themecontainer" style="float:left;">
<div id="screenshot">
    <img src="https://24.media.tumblr.com/8ec246eeebf90db80139973191b4c7ca/tumblr_mxvtf6yigh1rv5n8go1_250.png">
</div>
<div id="themetitle">THEME TITLE HERE</div>
<div id="themelinks">
<a href="/">Preview</a> - <a href="/">Code</a> - <a href="/">Info</a>
</div>
</div>

<!---------- THEME 01 END ----------->

<!------------ THEME 02 ------------->

<div id="themecontainer" style="float:right;">
<div id="screenshot">
    <img src="https://24.media.tumblr.com/8ec246eeebf90db80139973191b4c7ca/tumblr_mxvtf6yigh1rv5n8go1_250.png">
</div>
<div id="themetitle">THEME TITLE HERE</div>
<div id="themelinks">
<a href="/">Preview</a> - <a href="/">Code</a> - <a href="/">Info</a>
</div>
</div>

<!---------- THEME 02 END ----------->

<!------------ THEME 03 ------------->

<div id="themecontainer" style="float:left;">
<div id="screenshot">
    <img src="https://24.media.tumblr.com/8ec246eeebf90db80139973191b4c7ca/tumblr_mxvtf6yigh1rv5n8go1_250.png">
</div>
<div id="themetitle">THEME TITLE HERE</div>
<div id="themelinks">
<a href="/">Preview</a> - <a href="/">Code</a> - <a href="/">Info</a>
</div>
</div>

<!---------- THEME 03 END ----------->

<!------------ THEME 04 ------------->

<div id="themecontainer" style="float:right;">
<div id="screenshot">
    <img src="https://24.media.tumblr.com/8ec246eeebf90db80139973191b4c7ca/tumblr_mxvtf6yigh1rv5n8go1_250.png">
</div>
<div id="themetitle">THEME TITLE HERE</div>
<div id="themelinks">
<a href="/">Preview</a> - <a href="/">Code</a> - <a href="/">Info</a>
</div>
</div>

<!---------- THEME 04 END ----------->
<!------------ THEME 05 ------------->

<div id="themecontainer" style="float:left;">
<div id="screenshot">
    <img src="https://24.media.tumblr.com/8ec246eeebf90db80139973191b4c7ca/tumblr_mxvtf6yigh1rv5n8go1_250.png">
</div>
<div id="themetitle">THEME TITLE HERE</div>
<div id="themelinks">
<a href="/">Preview</a> - <a href="/">Code</a> - <a href="/">Info</a>
</div>
</div>

<!---------- THEME 05 END ----------->

<!------------ THEME 06 ------------->

<div id="themecontainer" style="float:right;">
<div id="screenshot">
    <img src="https://24.media.tumblr.com/8ec246eeebf90db80139973191b4c7ca/tumblr_mxvtf6yigh1rv5n8go1_250.png">
</div>
<div id="themetitle">THEME TITLE HERE</div>
<div id="themelinks">
<a href="/">Preview</a> - <a href="/">Code</a> - <a href="/">Info</a>
</div>
</div>

<!---------- THEME 06 END ----------->

</div>

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

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

</body>