code 8 | weathered

<!DOCTYPE html>
<head>

<!----------------------------------------------------------------------
        "weathered" |8| by soltvde ~ crimicalthemes

        you may
        - customize the code as much as you want

        as long as you do not
        - claim the base as your own
        - take parts of the code for other themes
        - delete the credit

        thank you!
----------------------------------------------------------------------->

<title>tags</title>

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

                <!--  fonts  -->

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

                <!--  masonry -->

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

<script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>

<script>
    $(function(){
    var $container = $('#main');
    $container.imagesLoaded(function(){
    $container.masonry({
    itemSelector: '.post',
    });
    });
    $container.infinitescroll({
    itemSelector : ".post",
    navSelector : "div.pagination",
    nextSelector : ".pagination a#next",
    loadingImg : "",
    loadingText : "<em></em>",
    bufferPx : 10000,
    extraScrollPx: 12000,
    },
    // trigger Masonry as a callback
    function( newElements ) {
      var $newElems = $( newElements ).css({ opacity: 0 });
    // ensure that images load before adding to masonry layout
    $newElems.imagesLoaded(function(){
    $newElems.animate({ opacity: 1 });
    $container.masonry( 'appended', $newElems, true );
    });
    }
    );
    });
</script>

<style type="text/css">

/* *  basic  * */

body{
    margin:0px;
    padding:0px;
    background:url('URL') white repeat;  /* add background image here */
    color:#333;
    font-family:'pt sans';
    font-size:9px;
    line-height:180%;
    text-align:justify;
}

a{
    text-decoration:none;
    color:#333;
}

a:hover{
    opacity:0.6;
    letter-spacing:2px;
}

u{
    border-bottom:1px solid;
    text-decoration:none;
}

blockquote{
    margin-left:20px;
    border-left:3px solid #f7f7f7;
    padding-left:17px;
}

img{
    display:block;
    max-width:100%;
}

small{ font-size:10px !important; }

.line, hr{
    width:100px;
    height:3px;
    background:#f0f0f0;
    margin:13px auto 10px;
    border:0;
}

.line{ margin:8px auto 13px; }

*, *:hover{
    -webkit-transition:0.8s ease-in-out;
       -moz-transition:0.8s ease-in-out;
         -o-transition:0.8s ease-in-out;
            transition:0.8s ease-in-out;
}

/* *  features  * */

#tumblr_controls{
    position:fixed !important;
    opacity:0.5;
    -webkit-filter:invert(1);
    -webkit-filter:blur(3);
}

#tumblr_controls:hover{ opacity:1; }

::-webkit-scrollbar{
    height:auto;
    width:15px;
    background-color:{color:border};
    border:7px solid #fff;
}

::-webkit-scrollbar-thumb{
    background-color:#333;
    border:7px solid #fff;
    height:auto;
}

     ::selection{ background:#333; color:#fff; }
::-moz-selection{ background:#333; color:#fff; }

/* *  topbar  * */

#top{
    background:white;
    margin:100px auto 0;
    width:360px;
    padding:30px 40px 30px;
    border:1px solid #f5f5f5;
    text-align:center;
}

h1{
    font-family:'montserrat';
    text-transform:uppercase;
    letter-spacing:1px;
    font-size:11px;
    margin:0 0 5px;
}

#top h1.links{
    margin:10px 0 0;
    font-size:7px;
}

#top .links a{ margin:0 5px 0; }

/* *  main  * */

#main{
    width:666px;
    margin:20px auto 100px;
}

.post{
    background:white;
    width:200px;
    margin:10px;
    border:1px solid #f5f5f5;
    float:left;
}

h2{
    font-family:'montserrat';
    text-transform:uppercase;
    letter-spacing:0px;
    font-size:10px;
    margin:0;
    padding:10px 15px 8px;
    text-align:center;
}

.post a{ display:block; margin-bottom:0px; }
.post a.sub{ margin-bottom:5px; }

h3{
    margin:7px 0 0px;
    font-family:'montserrat';
    text-transform:uppercase;
    font-size:8px;
    letter-spacing:0px;
}

.cap{
    padding:10px 15px 10px;
    text-align:center;
    font-size:7px;
    letter-spacing:1px;
    font-weight:bold;
    text-transform:uppercase;
    border-top:1px solid #f5f5f5;
}

/* *  credit  * */

.cr{
    position:fixed;
    bottom:15px;
    right:15px;
    font-family:'montserrat';
    font-weight:700;
    opacity:0.9;
}

.cr:hover{
    -webkit-transform:rotate(360deg);
    opacity:1;
}

.cr a{
    padding:2px 5px 3px 4px;
    border:2px solid #333;
    -webkit-border-radius:100%;
    letter-spacing:0px;
}

.cr a:hover{
    letter-spacing:0px;
    opacity:1;
    -webkit-border-radius:5%;
}

</style>
</head>

<body>

<div class="cr"> <a href="http://crimicalthemes.tumblr.com/">C</a> </div>

        <!--  topbar  -->
        <div id="top"> <div class="box">

<h1>tags</h1>
<h1 class="links">
    <a href="/" title="back">back</a>
    <a href="/ask" title="message">message</a>
    <a href="http://www.tumblr.com/" title="dashboard">dashboard</a>
</h1>

<!--  seach bar  -->
<form id="searchthis" action="/search" style="display:inline" method="get">
<input id="search-box" name="q" size="25" type="text" value="search" style="background-color:transparent; width:250px; border:0px; text-align:center; margin-top:10px; font-family:'montserrat'; text-transform:uppercase; letter-spacing:1px; font-size:7px; font-weight:bold; color:#555; "/>
<input id="search-btn" value="" type="submit" style="display:none"/>
</form>  <!--  seach bar end  -->

        </div> </div> <!--  topbar end  -->

        <!--  main  -->
        <div id="main">


<!--  item start  -->
<div class="post">
<h2> apples </h2>   <!--  section title  -->
<div class="cap">
    <a href="/tagged/braeburn">braeburn</a>
    <a href="/tagged/gala">gala</a>
    <a href="/tagged/red delicious">red delicious</a>
    <a href="/tagged/granny smith">granny smith</a>
    <a href="/tagged/cortland">cortland</a>
</div> </div>
<!--  item end  -->


<div class="post">
<h2> pears </h2>
<div class="cap">
    <a href="/tagged/bartlett">bartlett</a>
    <a href="/tagged/packham">packham</a>
    <a href="/tagged/williams">williams</a>
    <a href="/tagged/bosc" class="sub">bosc</a>

    <a href="/tagged/red blush">red blush</a>
    <a href="/tagged/limonera">limonera</a>
    <a href="/tagged/comice">comice</a>
</div> </div>


<div class="post">
<h2> bananas </h2>
<div class="cap">
    <a href="/tagged/praying hands">praying hands</a>
    <a href="/tagged/papoulu lohilahi">papoulu lohilahi</a>
    <a href="/tagged/blue java">blue java</a>
    <a href="/tagged/papoulu papoulu">papoulu papoulu</a>

    <h3>subtitle</h3>
    <a href="/tagged/cuban red">cuban red</a>
    <a href="/tagged/tall brazilian">tall brazilian</a>
    <a href="/tagged/goldfinger">goldfinger</a>
</div> </div>


<div class="post">
<h2> peaches </h2>
<div class="cap">
    <a href="/tagged/august pride">august pride</a>
    <a href="/tagged/bonita">bonita</a>
    <a href="/tagged/empress">empress</a>
    <a href="/tagged/harken">harken</a>
    <a href="/tagged/cardinal">cardinal</a>
    <a href="/tagged/suncrest">suncrest</a>

    <h3>subtitle</h3>
    <a href="/tagged/polly">polly</a>
    <a href="/tagged/loring">loring</a>
    <a href="/tagged/frost">frost</a>
</div> </div>


<div class="post">
<h2> grapes </h2>
<div class="cap">
    <a href="/tagged/rondinella">rondinella</a>
    <a href="/tagged/corvina" class="sub">corvina</a>

    <a href="/tagged/molinara">molinara</a>
    <a href="/tagged/rossanella">rossanella</a>
    <a href="/tagged/oseleta">oseleta</a>
    <a href="/tagged/thompson">thompson</a>
</div> </div>


<div class="post">
<h2> cherries </h2>
<div class="cap">
    <a href="/tagged/tieton">tieton</a>
    <a href="/tagged/brooks">brooks</a>
    <a href="/tagged/rainier">rainier</a>
    <a href="/tagged/tartarian" class="sub">tartarian</a>

    <a href="/tagged/utah giant">utah giant</a>
    <a href="/tagged/lapin">lapin</a>
</div> </div>


        </div> <!--  main end  -->
</body>
</html>