Muse Page 01. - Bubble Tea

<html>
<head>

<!--
Muse Page 01. by CrimsonxThemes
Bubble Tea
bəb(ə)l tē

            Please don't steal this, I worked really hard on it
                      And thieves are ugly butts ^u^
                                (●´ω｀●)

                                CREDITS

TOOLTIPS: Acuite (http://acuite.tumblr.com/post/53152126640/tutorial-tooltips)
PREVIEW ICONS: Acuite (http://acuite.tumblr.com/icons)
DRAGGABLE TAGS: (http://www.jqueryscript.net/other/Tumblr-Like-Draggable-Tag-Bar-with-jQuery-CSS3-Tag-Overflow.html)
FILTER CODE: Riverbellthemes (http://riverbellthemes.tumblr.com/post/97052682986/)

-->

    <link href="https://fonts.googleapis.com/css?family=Lato:300,300i|Open+Sans+Condensed:300" rel="stylesheet">

    <title>{Title}</title>
    <link rel="shortcut icon" href="{Favicon}">
    <link rel="altertnate" type="application/rss+xml" href="{RSS}">
    <meta name="description" content="" />
    <meta http-equiv="x-dns-prefetch-control" content="off"/>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
<script>
    //tooltips @ acuite
   (function($){
       $(document).ready(function(){
           $("[title]").style_my_tooltips({
               tip_follows_cursor:true,
               tip_delay_time:200,
               tip_fade_speed:300
           }
               );
       });
   })(jQuery);
</script>


<style type="text/css">

/*IF YOU DO NOT WANT MINIMAL TUMBLR CONTROLS, DELETE FROM HERE*/
.tmblr-iframe.tmblr-iframe--desktop-logged-in-controls.iframe-controls--desktop {display:none;}
/*TO HERE, AND LOOK FOR <div class="minimal"> IN THE BEGINNING OF THE HTML SECTION*/



body {
    background:#f8f8f8; /*CHANGE BACKGROUND COLOR*/
    COLOR:#999; /*CHANGE DEFAULT TEXT COLOR*/
    font-family:Lato; font-size:9px;}



a {
    color:#aaa; /*CHANGE LINK COLOR*/
    text-decoration:none;}


/*CHANGE SCROLLBAR COLORS*/
::-webkit-scrollbar {width: 11px;height: 11px;background:#eee;}
::-webkit-scrollbar-thumb {background: #ddd;}
::-webkit-scrollbar,::-webkit-scrollbar-thumb {border: 5px solid #fff;}



#s-m-t-tooltip{
    background:#fff; /*CHANGE TOOLTIP BACKGROUND*/
    color:#555; /*CHANGE TOOLTIP TEXT COLOR*/
    max-width:300px; margin:15px; padding:2px 8px; z-index:999; font-size:8px; text-transform:uppercase;}



.topbar {
    background:#fff; /*CHANGE TOPBAR BACKGROUND COLOR*/
    width:100%; height:150px; position:fixed; top:0; left:0; z-index:2;}



.box {
    background-color:#fff; /*CHANGE BOX BACKGROUND COLOR*/
width:200px; margin:15px 23px; padding:10px; float: left;}



.name,.info {font-family:open sans condensed; font-size:12px; text-transform:uppercase; text-align:center; line-height:30px;}



.content {
/*
FOR FOUR COLUMNS, CHANGE TO:
    width:1066px;
    left:calc(50% - 533px);

FOR THREE COLUMNS (DEFAULT), CHANGE TO:
    width:800px;
    left:calc(50% - 400px);

FOR TWO COLUMNS, CHANGE TO:
    width:534px;
    left:calc(50% - 267px);
*/

    width:800px; /*CHANGE ACCORDINGLY FOR COLUMN AMOUNT*/
    left:calc(50% - 400px); /*CHANGE ACCORDINGLY FOR COLUMN AMOUNT*/
    height:calc(100% - 165px);position:absolute;top:150px;padding-top:15px;}



.pic img {width:75px;height:75px;float:left;margin:15px 12px;-moz-transition-duration: 0.7s;-o-transition-duration: 0.7s;-webkit-transition-duration: 0.7s;transition-duration: 0.7s;}
.pic img:hover {opacity:.5;-moz-transition-duration: 0.7s;-o-transition-duration: 0.7s;-webkit-transition-duration: 0.7s;transition-duration: 0.7s;}



.name {
    border-bottom:1px solid #eee; /*CHANGE MUSE NAME BORDER COLOR*/
    margin-top:-7px;}



.info {
    border-top:1px solid #eee; /*CHANGE URL BORDER COLOR*/
    margin-top:105px;margin-bottom:-7px;}



.extra {
    border-top:5px solid #f8f8f8; /*for pseudo box effect, make this color the same as the background color*/
    color:#777; /*CHANGE TAG TEXT COLOR*/
    width:220px; text-transform:uppercase; font-size:8px; text-align:center; margin-left:-10px; padding-top:10px; height:10px; overflow:hidden;}



span {margin-right:1px;margin-left:5px;}



/*TAG CSS - DON'T WORRY ABOUT ANY OF THIS EXCEPT WHAT'S LABELED */
.post_tags {position: relative;margin-top: 6px;white-space: nowrap;overflow: hidden;}
.post_tags.draggable .post_tags_inner {cursor: pointer;-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.post_tags_inner {float: left;position: relative;padding: 0 20px 0 15px;}
.post_tags .post_tag {text-decoration: none;}


.post_tags:before {content: '';position: absolute;top: 0;left: 0;bottom: 0;width: 20px;z-index:2;
/*MAKE SURE THE FOLLOWING IS THE SAME AS YOUR BOX COLOR*/
background: #fff;}



.post_tags:after {content: '';position: absolute;top: 0;right: 0;bottom: 0;width: 20px;
/*MAKE SURE THE FOLLOWING IS THE SAME AS YOUR BOX COLOR*/
background: #fff;}



.title {
    color:#999; /*CHANGE TITLE COLOR IF YOU'D LIKE*/
    font-family:open sans condensed; text-align:center; font-size:20px; margin-top:37px;}



.home {text-align:center; margin-top:5px;}



#filters {
    border-top:5px solid #f8f8f8;/*for pseudo box effect, make this color the same as the background color*/
    text-align:center; margin-top:31px; padding-top:10px;}



.home a, #filters a {
    color:#555; /*CHANGE FILTER & HOME LINK TEXT COLOR*/
    text-transform:uppercase; font-size:8px; letter-spacing:.5px; margin:0 5px; -moz-transition-duration: 0.7s; -o-transition-duration: 0.7s; -webkit-transition-duration: 0.7s; transition-duration: 0.7s;}



.home a:hover {
    color:#999; /*CHANGE HOME LINK TEXT HOVER COLOR*/
    -moz-transition-duration: 0.7s;-o-transition-duration: 0.7s;-webkit-transition-duration: 0.7s;transition-duration: 0.7s;}



.minimal {position:fixed;top:10px;right:15px;text-align:right;}



.minimal a{
    color:#555; /*CHANGE TUMBLR CONTROL LINK COLOR*/
    text-transform:uppercase; margin:0 5px; font-size:8px;}


</style>
</head>

<body>

<div class="topbar">

<!--IF YOU DO NOT WANT MINIMAL TUMBLR CONTROLS, DELETE FROM HERE-->
<div class="minimal">
    <a href="http://tumblr.com/message/{Name}">Message</a>
    <a href="http://tumblr.com/follow/{Name}">Follow</a>
    <a href="http://tumblr.com/">Dashboard</a>
</div>
<!--TO HERE-->


<!--CHANGE TITLE-->
<div class="title">Muses</div>



<div class="home">
    <a href="/">Index</a>
    <a href="/">Contact</a>
    <a href="/">Archive</a>
    <!--<a href="url">link title</a>-->
</div>



<div id="filters">

<!--

MAKE SURE THAT YOUR FILTER TITLE IS EITHER ONE WORD, OR TWO WORDS SEPARATED BY AN UNDERSCORE, OTHERWISE IT WON'T WORK PROPERLY! IN YOUR BOX DIV, ADD YOUR FILTER TITLE IN THE CLASS SECTION AFTER "BOX MUSE" (EX "BOX MUSE FILTER".) USE AS MANY FILTERS AS YOUR LITTLE HEART DESIRES BUT MAKE SURE "BOX MUSE" REMAINS!

-->

Filters:
 <a href="#" rel="muse" class="filters">All</a>
 <!--<a href="#" rel="FILTER_TITLE" class="filters">FILTER TEXT</a>-->

 </div>


<!--LEAVE THIS INTACT-->
</div>
<!---->


<!--To paste a new box, just copy this!

<div class="box muse">
    <div class="name">muse name</div>
    <div class="pic"><a href="" title=""><img src="image url"/></a></div>
    <div class="pic"><a href="" title=""><img src="image url"/></a></div>
    <div class="info">URL</div>
    <div class="extra post_tags draggable">
    <div class="post_tags_inner">
        <span>◦</span>tag
    </div>
    </div>
</div>

-->

<!--LEAVE THIS INTACT-->
<div class="content">
<!---->

<div class="box muse">
    <div class="name">muse name</div>
    <div class="pic"><a href="" title=""><img src=""/></a></div>
    <div class="pic"><a href="" title=""><img src=""/></a></div>
    <div class="info"><a title="link title" href="">URL</a></div> <!--If you don't use a separate blog for your muses, you could use this section for a muse label, or anything else you'd like!-->
    <!--MAKE SURE THESE REMAIN INTACT, OTHERWISE TAGS WILL NOT SCROLL-->
    <div class="extra post_tags draggable">
    <div class="post_tags_inner">
    <!---->
        <span>◦</span>tag
     <!--MAKE SURE THESE REMAIN INTACT, OTHERWISE TAGS WILL NOT SCROLL-->
    </div>
    </div>
</div>
<!---->

<!--PASTE NEW BOX UNDER THIS LINE-->




<!--NO NEED TO EDIT BELOW THIS LINE!-->
</div>




<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

<script>
//draggable tags @ (http://www.jqueryscript.net/other/Tumblr-Like-Draggable-Tag-Bar-with-jQuery-CSS3-Tag-Overflow.html)
$(document).ready(function(){
$(".post_tags_inner").draggable({
  axis : "x",
  scroll: false,
  stop: function() {
    var __left = $(this).css("left").replace(/[^-\d\.]/g, '');
    if(__left > 0){
    $(this).animate({left: 0}, 400, 'easeOutExpo');
    }
    var __width = $(this).outerWidth();
    var __parentWidth = $(".post_tags.draggable").outerWidth();
    if(__width > __parentWidth) {
    if(__left < __parentWidth-__width){
      $(this).animate({left: __parentWidth-__width}, 400, 'easeOutExpo');
    }
    } else {
    $(this).animate({left: 0}, 400, 'easeOutExpo');
    }
  }
});
});

//filter code @ riverbellthemes
 $(document).ready(function(){
 $(".filters").click(function(e) {
 e.preventDefault();
 $(".muse").not("." + $(this).attr("rel")).hide(800);
 $("." + $(this).attr("rel")).show(800);
 });
 });
</script>

<a href="http://crimsonxthemes.tumblr.com" title="Crimson Themes" style="position:fixed; bottom:7px; right:10px; color:#aaa;">CT</a>

</body>
</html>