EVENTS/TAGS PAGE #5

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


    events/tags page #5;            - ᴅᴏɴ'ᴛ sᴛᴇᴀʟ ɪᴛ.
    © made by chloe                 - ᴘʟᴇᴀsᴇ ʟᴇᴀᴠᴇ ᴛʜᴇ ᴄʀᴇᴅɪᴛ ᴏɴ ᴛʜᴇ ᴛʜᴇᴍᴇ.
    chcodes.tumblr


------------------------------------------------------------------------------>

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


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
<script>
    (function($){
        $(document).ready(function(){
            $("[title]").style_my_tooltips();
        });
    })(jQuery);
</script>


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


    if you add more "boxes" of tags/events you'll need to add more
    to the script as well!

    $("#one").click(function(){
        $(".one").slideToggle(1000);});

    this corresponds to one box. there are 6 existent boxes, so if you
    add more, the seventh would be for example:

    $("#seven").click(function(){
        $(".seven").slideToggle(1000);});


------------------------------------------------------------------------------>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#one").click(function(){
        $(".one").slideToggle(1000);});
    $("#two").click(function(){
        $(".two").slideToggle(1000);});
    $("#three").click(function(){
        $(".three").slideToggle(1000);});
    $("#four").click(function(){
        $(".four").slideToggle(1000);});
    $("#five").click(function(){
        $(".five").slideToggle(1000);});
    $("#six").click(function(){
        $(".six").slideToggle(1000);});

});
</script>

<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Alegreya+Sans+SC:400,800,900|Carrois+Gothic|Exo:400,800,900|Exo+2:400,900,800|Carrois+Gothic+SC' rel='stylesheet' type='text/css'>

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


        note: custom fonts don't display on the preview so
        don't worry;


 ---------------------------------------------------------------------------->

<style type="text/css">

body {background: #f5f5f5 ;text-align: center;line-height: 100%;}
a:link, a:active, a:visited {text-decoration:none;color:#333;}

#s-m-t-tooltip {    display: block;
                    background: #000;
                    font-size: 10px;
                    font-family: Alegreya Sans SC;
                    letter-spacing: 1px;
                    text-transform: uppercase;
                    color: #fff;
                    text-align: center;
                    margin-left: 20px;
                    padding: 10px;
                    min-width: 40px;
                    z-index: 999999999;}

::-webkit-scrollbar-track {background-color:#ddd;border:1px solid #fff;}
::-webkit-scrollbar-thumb {background-color:#333;}
::-webkit-scrollbar {width:3px;height:5px;}

#title{ margin:auto;
        margin-top:90px;
        font: 900 50px 'exo';
        text-transform:uppercase;
        letter-spacing:13px;
        line-height:100%;
        color: #111;
        text-align:left;
        z-index:99999;
        margin-left:5px;}

/*----------------------------------------------------------------------------


        besides the script you also will need to add the number here
        so it would become:

        .one, .two, .three, .four, .five, .six, .seven {display:none;}

        and so on, don't forget the name you give the boxes in the
        script have to be the same as the css and the html!!


-----------------------------------------------------------------------------*/
.one, .two, .three, .four, .five, .six {display:none;}


#sets a {color:#111;margin:3px;background:#fff;padding:12px;display:block;}

#search{    margin-top:10px;
            text-align:left;
            margin-left:4px;
            margin-bottom:10px;}

            #search input[type="text"]{
            width:300px;
            border-radius:3px;
            font:12px 'exo';
            letter-spacing:2px;
            color:#000;
            border:1px solid #eee;
            background:#fff ;
            padding:10px;
            text-transform:uppercase;}

            #search input[type="submit"]{
            cursor:pointer;
            text-transform:uppercase;
            margin-left:2px;
            padding:10px 18px 11px;
            border:1px solid #eee;
            color:#111;
            background:#fff;
            border-radius:3px;}

            #search input[value=" "] {
            background:#fff url( 'http://static.tumblr.com/camqjbz/kBynmg22v/1424134900_11_search-128.png') no-repeat 11px center;}


.box {  width: 650px;
        margin: auto;
        margin-top:30px;
        margin-bottom: 50px;
        padding:25px 20px 25px 25px;}

        .caption {
        display: inline-block;
        position: relative;
        margin: auto;
        margin-bottom: 7px;
        z-index: 66;
        width:210px;}

        #titles {
        font:800 13px 'exo';
        text-align:center;
        color:#000;
        background:#fff;
        border-radius:3px;
        padding:25px 15px;
        letter-spacing:5px;
        text-transform:uppercase;
        border:1px solid #eee;
        cursor:pointer;}

        #sets {
        font:9px Alegreya Sans SC;
        letter-spacing:1px;
        text-transform:uppercase;
        color:#333;
        margin-top:2px;
        text-align:center;
        margin:auto;
        width:210px;}

.links{ position:fixed;
        letter-spacing:1px;
        left:15px;
        bottom:15px;
        z-index:9999999;}

        .links a{
        background:#fff;
        text-transform:uppercase;
        color:#333;
        display:block;
        width:60px;
        font: 8px calibri;
        margin-bottom:5px;
        padding:5px;
        text-align:center;
        border:1px solid #eee;}


</style>
</head>
<body>

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


        the boxes are set in columns!!
        a column is <td style="vertical-align:top;"> </td>
        so the boxes have to be inside those!!

        to add more boxes this is the code
        (for example the seventh):

        <div class="caption">
        <div id="seven">
        <div id="titles">
        TITLE HERE</div>
        </div>
        <div id="sets">
        <div class="seven">
        <a href="/">event number one</a>
        <a href="/">event number two</a>
        <a href="/">event number three</a>
        <a href="/">event number four</a>
        <a href="/">event number five</a>
        <a href="/">event number six</a>
        </div></div></div>


 ---------------------------------------------------------------------------->


<div class="box">

<!------------- -----------------   TITLE  --------------------   ------------>
<div id="title">
   masterlist
</div>


<div id="search">
    <form action="/search" method="get" class="sfm">
    <input type="text" name="q" value="" placeholder="search" /><input type="submit" value=" " />
    </form>
</div>


<table>

<!-------------     START COLUMN ONE     ------------>
<td style="vertical-align:top;">

<!-------------    ONE     ------------>
<div class="caption">
<div id="one">
<div id="titles">
TITLE HERE</div>
</div>
<div id="sets">
<div class="one">
<a href="/">event number one</a>
<a href="/">event number two</a>
<a href="/">event number three</a>
<a href="/">event number four</a>
<a href="/">event number five</a>
<a href="/">event number six</a>
</div></div></div>


<!-------------    TWO     ------------>
<div class="caption">

<div id="two">
<div id="titles">
TITLE HERE</div>
</div>
<div id="sets">
<div class="two">
<a href="/">event number one</a>
<a href="/">event number two</a>
<a href="/">event number three</a>
<a href="/">event number four</a>
<a href="/">event number five</a>
</div></div></div>


</td><!-------------    END COLUMN ONE     ------------>


 <!-------------     START  COLUMN TWO     ------------>
 <td style="vertical-align:top;">


<!-------------   THREE     ------------>
<div class="caption">

<div id="three">
<div id="titles">
TITLE HERE</div>
</div>
<div id="sets">
<div class="three">
<a href="/">event number one</a>
<a href="/">event number two</a>
<a href="/">event number three</a>
<a href="/">event number four</a>
<a href="/">event number five</a>
</div> </div></div>


<!-------------    FOUR     ------------>
<div class="caption">

<div id="four">
<div id="titles">
TITLE HERE</div>
</div>
<div id="sets">
<div class="four">
<a href="/">event number one</a>
<a href="/">event number two</a>
<a href="/">event number three</a>
<a href="/">event number four</a>
<a href="/">event number five</a>
</div></div></div>


</td><!-------------   END  COLUMN TWO     ------------>


<!-------------   START COLUMN THREE     ------------>
<td style="vertical-align:top;">


<!-------------    FIVE     ------------>
<div class="caption">

<div id="five">
<div id="titles">
TITLE HERE</div>
</div>
<div id="sets">
<div class="five">
<a href="/">event number one</a>
<a href="/">event number two</a>
<a href="/">event number three</a>
<a href="/">event number four</a>
<a href="/">event number five</a>
</div></div></div>


<!-------------    SIX     ------------>
<div class="caption">

<div id="six">
<div id="titles">
TITLE HERE</div>
</div>
<div id="sets">
<div class="six">
<a href="/">event number one</a>
<a href="/">event number two</a>
<a href="/">event number three</a>
<a href="/">event number four</a>
<a href="/">event number five</a>
</div></div></div>

</td><!-------------   END COLUMN THREE     ------------>


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


        any more doubts, come ask!


 ---------------------------------------------------------------------------->

</table>


</div>


<div class="links">
<a href="/">home</a>
<a href="/ask">message</a>
<a href="http://chcodes.tumblr.com/" title="coded by chloe">chso</a>
</div>


</body>
</html>