ntp-maple

<!DOCTYPE html lang="en">
<!----
    MAPLE PAGE THEME MADE BY NOTTE-THEMES.TUMBLR.COM <- DO NOT REMOVE!
    PLEASE DO NOT REMOVE CREDIT BUTTON!

Be proud of who made your theme, keep the credit!

Follow my rules in my terms of use, enjoy the theme and be sure to report any errors you may find directly to the theme creator. You have plenty of customization options so please look at them before you attempt to alter anything.

For easy access color codes here are some URLS:
http://colorschemedesigner.com

Use this to match with an image color scheme:
http://www.pictaculous.com

QUICK HTML LESSONS:
    TO BOLD SOMETHING
        <strong> BOLD TEXT HERE </strong>
    TO ITALICIZE SOMETHING
        <i> ITALIC TEXT HERE </i>
    TO LINK SOMETHING
        <a href="URL HERE"> TEXT HERE </a>
    TO SIGNIFY A PARAGRAPH
        <p> TEXT IN PARAGRAPH HERE </p>
    TO START ON A NEW A LINE IN A PARAGRAPH
        <p> SOME TEXT HERE <br />
        SOME MORE TEXT HERE </p>

-->
<head>

<script type="text/javascript" src="http://static.tumblr.com/d0qlne1/DiAl6ekb7/jquery-1.4.2.min.js"></script>
<link href="http://static.tumblr.com/eih4pta/Flam72cb8/animate-custom__1_.css" rel="stylesheet">

<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}" />
<link rel="alternate" type="application/rss+xml" href="{RSS}">

<style type="text/css">

/* -------------- SCROLLBAR --------------- */

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

::-webkit-scrollbar-thumb {
    background-color: #ED857A; /*scrollbar color*/
}

/* -------------- CONTENT --------------- */

body{
    color:#524a48; /*text color */
    font-family: Calibri, sans-serif;
    font-size: 12px;
    line-height:120%;
    overflow-x:hidden;
    word-wrap: break-word;
    text-decoration: none;
    background-color: #eee5d0; /*main background color*/

/* image background code - if you want a image for your background remove the / * and * / around the code below  */

    /*
    background-image: url('YOUR IMAGE LINK HERE');
    background-attachment: fixed;
   */

/* If you want the background to stretch to fit the screen then remove the / * and * / around the code below */

    /*
        background-size:100% 100%;
    */
}

a {
    text-decoration:none;
    color:#706866; /*default link color */
}

#containme{width:95%; margin-top:20px;}


/* -------------- LINKS --------------- */

.links{
    font-family: Gill Sans, sans-serif;
    text-transform:uppercase;
    text-align:justify;
    width:95%;
    background-color:#ED857A; /*links background color */
    padding:10px;
}

.links a{
    display:inline-block;
    display:-moz-inline-stack;
    color:#ffffff; /*links text color */
    padding:10px;
    position:relative;

}

.links a:hover{
    background-color:#ffffff; /*links background hover color */
    color:#ED857A; /*links text hover color */
}

/* -------------- THIN BAR --------------- */

#thinbar{
    position:fixed;
    left:0px;
    top:0px;
    height:100%;
    width:20px;
    background-color:#ED857A; /*  thin bar color */
    /* banner background image - remove if not wanted */

    background-image: url('http://static.tumblr.com/43f59cb213ecda891e3d43628ee18957/ko5czgu/V1ymnlgsc/tumblr_static_2.jpg');
    background-attachment: fixed;

    background-size:auto 100%;
    /* end banner background image */

}

/* -------------- TITLE --------------- */

.title{
    text-align:center;
    font-family: Calibri, sans-serif;
    letter-spacing:1px;
    font-size: 28px;
    width:280px;
    line-height:120%;
    padding:10px;
    background-color:#FFDE8D;
    text-transform: uppercase;
    color: #160C0A; /* title color */
}

/* -------------- SIDE IMAGE --------------- */

/* to activate image scroll down further for instructions */
.yourimage{
    width:280px;
    margin-top:20px;
    border:10px solid #FFDE8D; /* border color of image */
}
/* it'll being with <!--- START SIDE IMAGE ----> */

/* -------------- DESCRIPTION --------------- */

.description{
    text-align:justify;
    width:280px;
    padding:10px;
    background-color:#eee5d0;
}


/* -------------- TAG BOX CATEGORY --------------- */

#tags{margin-top:20px; left:230px; width:700px; position:relative;}
 /* if you want three columns, increase the width above until you see three or your desired amount. you may also need to increase the number for left as well. */

#tags .subtags{
    padding:10px;
    width:250px;
    margin:5px;
    float:left;
    background-color:#ED857A; /* tags box color */
    overflow:auto;
    display:inline-block;
    display:-moz-inline-stack;
    vertical-align:top;

    /* tags background image - remove if not wanted */

    background-image: url('http://static.tumblr.com/871b30611927fdc80206b8933f24d0e1/ko5czgu/3hSmnlko4/tumblr_static_3.jpg');

    /* end tags background image */

    background-attachment: fixed;
    border:1px solid #FEFEFE; /* thin tag box border color */

}

/* -------------- TAG BOX CATEGORY TITLE --------------- */

#tags .subtags h2{
    color:#706866; /*tags sub title color*/
    font-size:12px;
    margin-top:-10px;
    position:absolute;
    margin-bottom:-15px;
    font-family: Gill Sans, sans-serif;
    text-transform:uppercase;
    text-align:center;
    letter-spacing:1px;
    padding:5px;
    font-weight: normal;
    background-color: #FEFEFE; /*tags sub title background*/

}

/* -------------- INDIVIDUAL TAGS --------------- */
.subtags ul{
    text-align:left;
    list-style-position: inside;
    padding-left:0px;
}
.subtags ul li{list-style: none;
    border-bottom:1px solid #FEFEFE; /* tags bottom border color */
    padding-bottom:5px;
    padding-top:10px;
    letter-spacing:1px;
}
.uniarrow { float: left; width: 1.2em; }
.u1:before { content: "→"; font-size:9px; float:left;}


.subtags li a{color:#706866;} /* individual color of tags */

.subtags li a:hover{
    color:#706866;  /* color of tags when you hover  */
}

.subtags li:hover{
    background-color:#FEFEFE;  /*color of tags background when you hover*/
}


</style>

<script src="http://static.tumblr.com/twte3d7/H8Glm663z/masonry.js"></script>

<script>
$(window).load(function () {
var $container = $('#tags');
  $container.masonry({
   columnWidth: 320,
   isFitWidth: true,
   itemSelector: '.subtags'
  }).imagesLoaded(function() {
  $container.masonry('reload');
  });

});
</script>

</head>
<body>

<center>

<div id="thinbar"></div>


<div id="containme">
<div style="float:left; width:35%;">


<!---------- START TITLE ----------------------><div class="title">

Notte Theme's <br /> Tag Page

</div><!---------- END TITLE ---------------------->


<!---------- START SIDE IMAGE
this is just if you want an image instead of a description or along with
feel free to remove the ----->  <!----- bars around the code if you wish to have one.
---------------------->


<!------------

<img src ="http://static.tumblr.com/43f59cb213ecda891e3d43628ee18957/ko5czgu/V1ymnlgsc/tumblr_static_2.jpg" class="yourimage">

-------->


<!---------- END SIDE IMAGE ---------------------->


<!---------- START DESCRIPTION --------------><div class="description">

<p>Fusce a metus eu diam varius
<strong>congue nec nec sapien.</strong>
Vestibulum orci tortor, sollicitudin ac euismod non, placerat ac augue. Nunc convallis accumsan justo. Pellentesque habitant morbi tristique senectus et netus et malesuada
<a href="http://notte-themes.tumblr.com">fames ac turpis egestas.</a>
Donec malesuada vehicula lectus, viverra sodales ipsum gravida nec. Integer gravida nisi ut magna mollis molestie. Nullam pharetra accumsan sagittis. Proin tristique rhoncus orci, eget vulputate nisi sollicitudin et. Quisque lacus augue, mollis non mollis et, ullamcorper in purus. Morbi et sem orci. Praesent accumsan odio in ante ullamcorper id pellentesque mauris rhoncus. Duis vitae neque dolor. Duis sed purus at eros bibendum cursus nec a nulla.<br /> <i>Donec turpis quam, ultricies id pretium sit amet, gravida eget leo.</i></p>

<!-- Replace the text with what you want, you can use both paragraphs or just one or even add another. If you don't have a description to introduce your tags feel free to delete this -->

<p>Proin ut quam eros. Donec sed lobortis diam. Nulla nec odio lacus. Quisque porttitor egestas dolor in placerat. Nunc vehicula dapibus ipsum. Duis venenatis risus non nunc fermentum dapibus. Morbi lorem ante, malesuada in mollis nec, auctor nec massa. Aenean tempus dui eget felis blandit at fringilla urna ultrices. Suspendisse feugiat, ante et viverra lacinia, lectus sem lobortis dui, ultricies consectetur leo mauris at tortor. Nunc et tortor sit amet orci consequat semper. Nulla non fringilla diam.  </p>

</div><!---------- END DESCRIPTION ---------------------->


</div><!-- float:left -->


<!---------- START LINKS ----------------------><div class="links">

<a href="/">Main Page</a>
<a href="http://tumblr.com/dashboard">Dashboard</a>
        <a href="/">link</a>
        <a href="/">link</a>
        <a href="/">link</a>
        <a href="/">link</a>
        <a href="/">link</a>
        <a href="/">link</a>

        <!---------- DO NOT REMOVE THIS NEXT LINK ------------------>
        <a href="http://notte-themes.tumblr.com">credit</a>
        <!---------- DO NOT REMOVE THE ABOVE LINK ------------------>


</div><!---------- END LINKS ---------------------->


<!---------- START TAGS -- -----><div id="tags">


<!-------- START TAGS CATEGORY BOX -- duplicate for another box ----->

<div class="subtags">
<h2>CATEGORY</h2> <!--THIS IS THE CATEGORY TITLE -->
<br /><ul>
<li><span class="uniarrow u1"></span>
<a href="/">tag</a>  <!--THIS IS THE TAG YOU CHANGE -->
</li>
<li><span class="uniarrow u1"></span>
<a href="/">tag</a>  <!--THIS IS THE TAG YOU CHANGE -->
</li>
<li><span class="uniarrow u1"></span>
<a href="/">tag</a>  <!--THIS IS THE TAG YOU CHANGE -->
</li>
<li><span class="uniarrow u1"></span>
<a href="/">tag</a>  <!--THIS IS THE TAG YOU CHANGE -->
</li>
</ul>
</div>

<!-------- END TAGS CATEGORY BOX ---------------------->


<!-------- START TAGS CATEGORY BOX -- duplicate for another box ----->

<div class="subtags">
<h2>CATEGORY</h2> <!--THIS IS THE CATEGORY TITLE -->
<br /><ul>
<li><span class="uniarrow u1"></span>
<a href="/">tag</a>  <!--THIS IS THE TAG YOU CHANGE -->
</li>
<li><span class="uniarrow u1"></span>
<a href="/">tag</a>  <!--THIS IS THE TAG YOU CHANGE -->
</li>
<li><span class="uniarrow u1"></span>
<a href="/">tag</a>  <!--THIS IS THE TAG YOU CHANGE -->
</li>
<li><span class="uniarrow u1"></span>
<a href="/">tag</a>  <!--THIS IS THE TAG YOU CHANGE -->
</li>
<li><span class="uniarrow u1"></span>
<a href="/">tag</a>  <!--THIS IS THE TAG YOU CHANGE -->
</li>
<li><span class="uniarrow u1"></span>
<a href="/">tag</a>  <!--THIS IS THE TAG YOU CHANGE -->
</li>
<li><span class="uniarrow u1"></span>
<a href="/">tag</a>  <!--THIS IS THE TAG YOU CHANGE -->
</li>

</ul>
</div>

<!-------- END TAGS CATEGORY BOX ---------------------->


<!-------- START TAGS CATEGORY BOX -- duplicate for another box ----->

<div class="subtags">
<h2>CATEGORY</h2> <!--THIS IS THE CATEGORY TITLE -->
<br /><ul>
<li><span class="uniarrow u1"></span>
<a href="/">tag</a>  <!--THIS IS THE TAG YOU CHANGE -->
</li>
<li><span class="uniarrow u1"></span>
<a href="/">tag</a>  <!--THIS IS THE TAG YOU CHANGE -->
</li>
<li><span class="uniarrow u1"></span>
<a href="/">tag</a>  <!--THIS IS THE TAG YOU CHANGE -->
</li>
<li><span class="uniarrow u1"></span>
<a href="/">tag</a>  <!--THIS IS THE TAG YOU CHANGE -->
</li>
<li><span class="uniarrow u1"></span>
<a href="/">tag</a>  <!--THIS IS THE TAG YOU CHANGE -->
</li>

</ul>
</div>

<!-------- END TAGS CATEGORY BOX ---------------------->


<!-------- START TAGS CATEGORY BOX -- duplicate for another box ----->

<div class="subtags">
<h2>CATEGORY</h2> <!--THIS IS THE CATEGORY TITLE -->
<br /><ul>
<li><span class="uniarrow u1"></span>
<a href="/">tag</a>  <!--THIS IS THE TAG YOU CHANGE -->
</li>
<li><span class="uniarrow u1"></span>
<a href="/">tag</a>  <!--THIS IS THE TAG YOU CHANGE -->
</li>
<li><span class="uniarrow u1"></span>
<a href="/">tag</a>  <!--THIS IS THE TAG YOU CHANGE -->
</li>
<li><span class="uniarrow u1"></span>
<a href="/">tag</a>  <!--THIS IS THE TAG YOU CHANGE -->
</li>

</ul>
</div>

<!-------- END TAGS CATEGORY BOX ---------------------->

</div><!---------- END TAGS---------------------->


<div style="width:100%; height:30px"></div>
</div><!-- containme -->

</center>

</body>
</html>