birthdays / APRICOT (v1)

<!DOCTYPE html>
<head>

<!--
               apricot v1

               @odeysseus

- you can choose new colors using colorpicker.com
-->


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

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <div style="bottom:20px;right:20px;position:fixed"><a href="http://odeysseus.tumblr.com">O</a></div>

<title>birthdays</title> <!--title-->


<style type="text/css">

#s-m-t-tooltip{
    position:absolute;
    margin:15px;
    max-width:250px;
    z-index:999999999999999;
    padding:5px;
    font-size:10px;
    border-radius:2px;
    font-family:'open sans';
    background:#fff;
    border:1px dotted #eee;
    color:#777;
}

body {
background:#fcfcfc; /* main background */
color:#767676; /* body text */
font-family:'Georgia', sans-serif;
font-size:11px;
-moz-osx-font-smoothing:grayscale;
-webkit-font-smoothing:antialiased;
font-smoothing:antialiased;
}


a {
color:#aaa;
text-decoration:none;
transition:all .4s ease;
-webkit-transition:all .4s ease;
-moz-transition:all .4s ease;
-o-transition:all .4s ease;
}

a:hover { text-decoration:none; color:#555;  }

section {
    margin:130px auto 50px;
    width:calc(242px * 3); /* can change the 3 depending on how many columns you want */
}

.box {
    width:180px;
    margin:20px;
    padding:10px;
    background:#fff; /* box background */
    border:1px solid #eee; /* box border */
    border-radius:2px;
}

.link a{
    display:inline-block;
    width:28px;margin:3px;
    border:1px solid transparent;
    height:28px;float:left;
    border-radius:2px;
}
.link a:hover {
    background:#fafafa; /* color of bdays on hover */
    border:1px dotted #eee; /* border of bdays on hover */
}
.title { margin-bottom:5px;
font-style:italic;
color:#555; /* bday box title color */
text-align:center;
border-bottom:1px solid #eee; /* bday box title border color */
padding-bottom:10px;
}

/* COLORS FOR EACH MONTH */
.jan a { background:#e2f8fd; }
.feb a { background:#fbeff5; }
.mar a { background:#fbefc5; }
.apr a { background:#defbc5; }
.may a { background:#c4e3f4; }
.jun a { background:#c4f4ec; }
.jul a { background:#fdceff; }
.aug a { background:#f2e1ff; }
.sep a { background:#f5e7d4; }
.oct a { background:#ffe1c7; }
.nov a { background:#dddef1; }
.dec a { background:#fdc8c8; }

header {
    top:0px;left:0px;width:100%;position:fixed;text-align:center;z-index:1;padding:30px 0px 20px;
    background:#fff; /* header background */
    border-bottom:1px solid #eee; /* header bottom border */
    font-family:'open sans';
    font-size:10px;
}
header a { font-style:normal; }
header b {
    font-size:12px;
    font-weight:400;
    color:#444; /* header title color */
    font-style:italic;font-family:georgia;padding:5px;
    background:#fafafa; /* header title background */
    margin:5px;
    border:1px solid #eee; /* header title border */
    border-radius:2px;
}
header a {
    padding:5px;
    background:#fafafa; /* header link background */
    margin:5px;
    color:#666; /* header link color */
    border:1px dotted transparent;
    border-radius:2px; }
header a:hover {
    border:1px dotted #eee; /* header link border on hover */
    background:#fff; /* header link background on hover */
}

</style>

</head>

<body>

<header>
    <b>birthday page</b> <!--main title-->
    <!--links below: add or remove if you want-->
    <a href="/">home</a>
    <a href="http://tumblr.com/dashboard">dash</a>
    <a href="link to join post">join</a>


    <br><br> be sure to wish these sunshines happy birthday!
    <!--delete the above line if you just want a title n links in the header-->

</header>
<section>
<!--start bdays

NOTE: if you want more of a calendar look and want there to be numbers rather than just colored boxes, follow these instructions:

scroll up until you find .link a { and delete the line that says height:28px; then paste these two lines there:
text-align:center;
padding:7px 0px;
color:#767676;

then rather than it being <a href="blog url" title="name,date"></a> for the links below, make it this instead:
<a href="blog url" title="name">01</a>

 -->

    <div class="box jan">

        <div class="title">january</div>
        <div class="link jan">
        <!--birthdays go here! copy and paste the following as many times as u need: <a href="blog url" title="name, date"></a>  -->
              <a href="blog url" title="name, date"></a>
              <a href="blog url" title="name, date"></a>
        </div>
    </div>



    <div class="box feb">

        <div class="title">february</div>
        <div class="link feb">

               <a href="blog url" title="name, date"></a>
               <a href="blog url" title="name, date"></a>

        </div>
    </div>



    <div class="box mar">

        <div class="title">march</div>
        <div class="link mar">

               <a href="blog url" title="name, date"></a>
               <a href="blog url" title="name, date"></a>
        </div>
    </div>

 <div class="box apr">
 <div class="title">april</div>
        <div class="link apr">

               <a href="blog url" title="name, date"></a>
               <a href="blog url" title="name, date"></a>

        </div>
    </div>
    <div class="box may">
    <div class="title">may</div>
        <div class="link may">

               <a href="blog url" title="name, date"></a>
               <a href="blog url" title="name, date"></a>
        </div>
    </div>

    <div class="box jun">
    <div class="title">june</div>
        <div class="link jun">

               <a href="blog url" title="name, date"></a>
               <a href="blog url" title="name, date"></a>
        </div>
    </div>

    <div class="box jul">
    <div class="title">july</div>
        <div class="link jul">

               <a href="blog url" title="name, date"></a>
               <a href="blog url" title="name, date"></a>
        </div>
    </div>

    <div class="box aug">
    <div class="title">august</div>
        <div class="link aug">

               <a href="blog url" title="name, date"></a>
               <a href="blog url" title="name, date"></a>
        </div>
    </div>

    <div class="box sep">
    <div class="title">september</div>
        <div class="link sep">

               <a href="blog url" title="name, date"></a>
               <a href="blog url" title="name, date"></a>
        </div>
    </div>

    <div class="box oct">
    <div class="title">october</div>
        <div class="link oct">

               <a href="blog url" title="name, date"></a>
               <a href="blog url" title="name, date"></a>
        </div>
    </div>

    <div class="box nov">
    <div class="title">november</div>
        <div class="link nov">

               <a href="blog url" title="name, date"></a>
               <a href="blog url" title="name, date"></a>
        </div>
    </div>

    <div class="box dec">
    <div class="title">december</div>
        <div class="link dec">

               <a href="blog url" title="name, date"></a>
               <a href="blog url" title="name, date"></a>
        </div>
    </div>

<!--end bdays-->
</section>

<!--scripts-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>

<script>
(function($){
$(document).ready(function(){
$("a[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:30,
tip_fade_speed:300,
attribute:"title"
});
});
})(jQuery);
</script>

 <script src="http://static.tumblr.com/twte3d7/H8Glm663z/masonry.js"></script>
<script type="text/javascript">
$(window).load(function () {
$('section').masonry({
itemSelector : ".box",
},
function() { $('section').masonry({ appendedContent: $(this) }); }
);
});
</script>

</body>



</html>