Theme #56/Navi Theme #2: All The Small Things

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!-- navi theme #2/ theme #56 by alexgaeskarth
pls do not do anything against the rules-->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">


<head>

<title>{Title}</title>

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

   <style type="text/css">

   @font-face {font-family:Bebas Neue;src:url(http://static.tumblr.com/cvlbtjz/cnsln9tpp/bebasneue.otf);}

::-webkit-scrollbar-thumb:vertical {border:2px solid #fff;height:12px; background-color:#fff;}
::-webkit-scrollbar-thumb:horizontal {background-color:#fff;}
::-webkit-scrollbar {background-color:#fff;height:7px;width:12px;border:5px solid #fff;}


    body {
    margin:0px;
    background:url(http://static.tumblr.com/1a50d04f8ec8679c4b7f3f05ef3a2186/jqlwb54/n02mwae13/tumblr_static_2m30orn.png) top left fixed repeat;
    font-style:none;
    background-color:#fff;
    }


    a {
    text-decoration:none;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease
    }

    a:hover {
    text-decoration:none;
    -webkit-transition: all 0.8s ease-out;
    -moz-transition: all 0.8s ease-out;
    transition: all 0.8s ease-out;
    }


body, a{cursor:url("http://i.imgur.com/2qleX.jpg"), auto !important; }

a:hover{cursor:url("http://i.imgur.com/IepP2.jpg"), auto !important;}


    #everything {
    margin-left:150px;
    }


    #group1 {
    position:fixed;
    width:180px;
    text-align:left;
    margin-left:200px;
    margin-top:200px;
    }

    #group2 {
    position:fixed;
    width:180px;
    text-align:left;
    margin-left:430px;
    margin-top:199px;
    }

    #group3 {
    position:fixed;
    width:180px;
    text-align:left;
    margin-left:660px;
    margin-top:198px;
    }

    #groupimage {
    width:180px;
    }

    #groupimage img {
    width:180px;
    }

    #credit {
    right:2px;
    bottom:0px;
    font-size:9px;
    padding:5px;
    text-transform:uppercase;
    position:fixed;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    }


    #panel,#flip {
    margin-top:-4px;
    padding:1px;
    text-align:center;
    color:#000;
    }

    #panel {
    display:none;
    text-align:left;
    padding:5px;
    background-color:#fff;
    }

    #panel a {
    margin-bottom:3px;
    display:inline-block;
    padding:3px;
    text-align:center;
    width:78px;
    font-family:bebas neue;
    font-size:13px;
    background-color:#000;
    color:#fff;
    }

    #panel a:hover {
    background-color:#ff79e6;
    color:#fff;
    }

    #flip {
    cursor:help;
    font-size:20px;
    padding-top:4px;
    font-family:bebas neue;
    color:#fff;
    background-color:#000;
    }

    #panel2,#flip2 {
    padding:1px;
    margin-top:-4px;
    text-align:center;
    color:#000;
    }

    #panel2 {
    display:none;
    text-align:left;
    padding:5px;
    background-color:#fff;
    }

    #panel2 a {
    margin-bottom:3px;
    display:inline-block;
    padding:3px;
    text-align:center;
    width:78px;
    font-family:bebas neue;
    font-size:13px;
    background-color:#000;
    color:#fff;
    }

    #panel2 a:hover {
    background-color:#ff79e6;
    color:#fff;
    }

    #flip2 {
    cursor:help;
    padding-top:4px;
    font-size:20px;
    font-family:bebas neue;
    color:#fff;
    background-color:#000;
    }

    #panel3,#flip3 {
    margin-top:-4px;
    padding:1px;
    text-align:center;
    color:#000;
    }

    #panel3 {
    display:none;
    text-align:left;
    padding:5px;
    background-color:#fff;
    }

    #panel3 a {
    margin-bottom:3px;
    display:inline-block;
    padding:3px;
    text-align:center;
    width:78px;
    font-family:bebas neue;
    font-size:13px;
    background-color:#000;
    color:#fff;
    }

    #panel3 a:hover {
    background-color:#ff79e6;
    color:#fff;
    }

    #flip3 {
    cursor:help;
    font-size:20px;
    font-family:bebas neue;
    color:#fff;
    padding-top:4px;
    background-color:#000;
    }


    {CustomCSS}

    </style></head>


<!--clicky thing javascript-->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});
</script>
<script>
$(document).ready(function(){
  $("#flip2").click(function(){
    $("#panel2").slideToggle("slow");
  });
});
</script>

<script>
$(document).ready(function(){
  $("#flip3").click(function(){
    $("#panel3").slideToggle("slow");
  });
});
</script>

<body>

<div id="everything">

<!--start of first group panel-->
<div id="group1">
<div id="groupimage">
<!--group icon-->
<img src="http://media.tumblr.com/a8d92f4da3cc8c2d58da819b83b2a6ab/tumblr_inline_mwso9aRsLz1s79012.png"></div>

<div id="flip">group 1</div> <!--group title-->
<div id="panel">
<!--links-->
<a href="/">link</a>
<a href="/">link</a>
<a href="/">link</a>
<a href="/">link</a>
</div>
</div>
<!--end of of first group panel-->

<!--start of second group panel-->
<div id="group2">
<div id="groupimage">
<!--group icon-->
<img src="http://media.tumblr.com/90d4eb752a0489f7d8409c673f2b7e2b/tumblr_inline_mticsoSON61rxvag1.png"></div>


<div id="flip2">group 2</div><!--group title-->
<div id="panel2">
<!--links-->
<a href="/">link</a>
<a href="/">link</a>
<a href="/">link</a>
<a href="/">link</a>
</div>
</div>
<!--end of of second group panel-->

<!--start of third group panel-->
<div id="group3">
<div id="groupimage">
<!--group icon-->
<img src="https://31.media.tumblr.com/5a5e9cfd43b7e0e7614796753ae54af3/tumblr_mwkivwZFSO1rpz4dzo5_250.png"></div>

<div id="flip3">group 3</div><!--group title-->
<div id="panel3">
<!--links-->
<a href="/">link</a>
<a href="/">link</a>
<a href="/">link</a>
<a href="/">link</a>
</div>
</div>
<!--end of third group panel-->

</div>

<div id="credit"><a href="http://alexgaeskarth.tumblr.com/"><img src="http://static.tumblr.com/ujmsumm/TJamv4jm6/sg.png" width="40px;"></div></a>
</body>
</html>