CT frepo

<!DOCTYPE html>
<html>
<head>

<!--
     ---------------------
      -------------------
       -----------------
        ---------------
         -BADMECHA007-
          -----------
           ---------
            -------
             -----
              ---
               -


========================personal theme 1 - 80's baby==============================
-->


<title>THEMES</title>

<link href="https://fonts.googleapis.com/css?family=Amiri|Anaheim|Bigelow+Rules|Butcherman|Caesar+Dressing|Condiment|Faster+One|Fontdiner+Swanky|Freckle+Face|Geostar|Geostar+Fill|Henny+Penny|Joti+One|Kumar+One|Kumar+One+Outline|Limelight|Luckiest+Guy|Monoton|Mountains+of+Christmas|Mrs+Sheppards|Orbitron|Pirata+One|Play|Seaweed+Script|Slackey|Stalinist+One|Trochut|UnifrakturCook:700|Wallpoet" rel="stylesheet">

    <link href="https://fonts.googleapis.com/css?family=Prompt:900" rel="stylesheet">
    <link rel="stylesheet" href="http://malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.min.css"><!--scrollbaar stylesheet-->

<style type="text/css">

	body {
		background: #322E2B url('http://i.imgur.com/atYtIOA.png') top right fixed no-repeat ;
		background-size: cover;
        margin-left: auto;
        z-index:-999;
		margin-right: auto;
        padding: 0;
        font:normal 20px 'Anaheim', sans-serif;
        font-size: 20px;
        color: {color:Text};
}


h2,h3,h4{
            font-family: 'Limelight', cursive;
}

    img {
        border: 0;
        max-width: 100%;
        height: auto;
        margin-left:auto;
        margin-right: auto;
}


#bgrnd{
        height:0px;
        width: 0px;
        z-index:-1;
        margin:auto;
        position: fixed;
        right:50%;
        top: 50%;
        transform: translateY(-50%);


}

#bgrnd #blk{
    width:800px;
    height:500px;
    background: rgba(0,0,0,0.7);
    position:absolute;
    top:-190px;
    left:-300px;
    border-right:5px outset #372EA1 ;
    border-left:5px outset #372EA1;
    border-bottom:5px outset #372EA1;
      animation-name: lights;
  animation-duration: 10s;
  animation-iteration-count: 999;
}




@keyframes lights {
    0% {box-shadow:
        0 0 3px 3px #fff,
        0 0 10px 6px #e58b50,
        0 0 14px 9px #f95454;}
    8% {box-shadow:
        0 0 6px 3px #fff,
        0 0 15px 6px #e58b50,
        0 0 14px 9px #f95454;}
    25% {box-shadow:
        0 0 9px 3px #fff,
        0 0 20px 6px #70d8a8,
        0 0 14px 9px #e58b50;}
    41% {box-shadow:
        0 0 6px 3px #fff,
        0 0 15px 6px #0ff,
        0 0 14px 9px #70d8a8;}
    57% {box-shadow:
        0 0 3px 3px #fff,
        0 0 10px 6px #9370DB,
        0 0 14px 9px #0ff;}
    83% {box-shadow:
        0 0 6px 3px #fff,
        0 0 5px 6px #cc70d8,
        0 0 14px 9px #9370DB;}
    100% {box-shadow:
        0 0 3px 3px #fff,
        0 0 10px 6px #e58b50,
        0 0 14px 9px #f95454;}
}


	.header  {


		position: fixed;
		margin-left: auto;
		margin-right: auto;
		z-index:1;

		}

    #headert{
        height: 20px;
		width: 100% ;
		top: 0px;
		z-index: 1;
		background: #58D6FC;
    }

    #headerb{
        height: 20px;
		width: 100% ;
		bottom: 0px;
		z-index: 1;
		background: #E54BB4;
    }

    #headerr{
        width: 20px;
		height: 100%;
		right: 0px;
		z-index: 2;
		background: linear-gradient(to bottom, rgba(88,214,252,1) 0%,rgba(83,134,237,1) 40%,rgba(229,75,180,1) 100%);
    }

    #headerl{
        width: 20px;
		height: 100%;
		left: 0px;
		z-index: 2;
		background: linear-gradient(to bottom, rgba(88,214,252,1) 0%,rgba(83,134,237,1) 40%,rgba(229,75,180,1) 100%);
    }



    #topmid {
        height:0px;
        width: 0px;
        z-index:999;
        margin:auto;
        position: fixed;

        right:50%;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(0,0,0,0.25);


    }

    #topmid #titleblock {
        height:240px;
        width:600px;
		position: fixed;
    border-top-left-radius:120px;
    border-bottom-left-radius:120px;
	top:-330px;
	left:-500px;
		z-index:9999;
        transform: rotate(-17deg);
	}
 #topmid  #titleblock a{
                color:rgba(242,242,242,1);
     text-shadow: 0 0 10px rgba(0,67,255,1) , 0 0 20px rgba(0,127,255,1) , 0 0 30px rgba(0,174,255,1) , 0 0 40px #00ffc3 , 0 0 70px #00ff6a , 0 0 80px #00ff4c , 0 0 100px #00ff1d ;
     transition: text-shadow .5s;
     z-index:9999;
  }
   #topmid #titleblock a:hover {
  text-shadow: 0 0 10px rgba(0,255,25,1) , 0 0 20px rgba(0,255,85,1) , 0 0 30px rgba(0,255,148,1) , 0 0 40px #00ffff , 0 0 70px #00bbff , 0 0 80px #00bbff , 0 0 100px #00aeff ;
}
  .titletext{
    position:fixed;
    margin-left:220px;
    font: 100px 'Seaweed Script', cursive;

  }
    #topmid #titleblock img{
      top: 12px;
  }
  .neonbars{
      z-index:-9999;
      position:fixed;
            animation-name: lights;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  width:700px;
  height:0;

  }
    #neon1{
      margin-top:100px;
  }
  #neon2{
      margin-top:120px;
  }



    #sidebarm {
        height:100%;
        width: 1000px;
        margin-left: auto;
		margin-right: auto;
		z-index: 1;
		top: 25%;
		bottom:0;
    }

    .opbars {
        height: 20px;
        -webkit-box-shadow: 15px 10px 0px 0px rgba(0,0,0,1);
        -moz-box-shadow: 15px 10px 0px 0px rgba(0,0,0,1);
        box-shadow: 15px 10px 0px 0px rgba(0,0,0,1);
        text-align: right;
        letter-spacing: 5px;
        text-transform: uppercase;
        text-decoration:none;
        z-index:98;
        font: 12px 'Oswald', sans-serif;
        padding-right:.4em;
        transition: box-shadow 0.4s, background 0.4s, letter-spacing 0.8s;
    }

    #topmid #redopbar {
        width:600px;
        background:red;
        cursor:cell;
		position: fixed;
		top: -220px;
		left: -60px;
		color:yellow;
    }

    #topmid #redopbar:hover {
        color: red;
        letter-spacing: 10px;
        background-color:cyan;
        box-shadow:
        0 0 3px 1px #fff,  /* inner white */
        0 0 5px 3px #9370DB  , /* middle magenta */
        0 0 7px 4px #0ff; /* outer cyan */
    }


    #topmid #ylwopbar {
        background:yellow;
		position: fixed;
		top: -190px;
		left: -200px;
        width:650px;
    }

    #topmid #grnopbar {
        background:green;
		position: fixed;
		top: -160px;
		left: -300px;
        width:650px;
    }

    #topmid #bluopbar {
        background:blue;
		position: fixed;
		top: -130px;
        width:600px;
        left:-350px;
    }

    #topmid #desc{
        width:180px;
        max-height:400px;
        min-height:20px;
       /* background:url('https://scontent.cdninstagram.com/t51.2885-15/s320x320/e15/11417399_440096642832305_369483626_n.jpg?ig_cache_key=MTAwMzc2NjY1MjIzMzcwNTM2NQ%3D%3D.2') center no-repeat;
        background-size:cover;  */
        box-shadow:
        0 0 3px 1px #fff,
        0 0 5px 3px #9370DB  ,
        0 0 7px 4px #0ff;
        position:fixed;
        border: 3px outset red;
        padding: .3em .1em .3em .1em;
        transform: translate(-275px,-30px);
        font: 18px 'Limelight', cursive;
        text-shadow:
            1px 1px #000,
            2px 2px #000,
            3px 3px #000;
        color: yellow;
        text-align:center;
        text-transform: uppercase;
        transition: text-shadow 1s;
    }

    #topmid #desc:hover{
        text-shadow:
        0 0 rgba(255,255,255,0),
        1px 1px 0 red,
        2px 2px 0 orange,
        3px 3px 0 yellow,
        4px 4px 0 green,
        5px 5px 0 blue,
        6px 6px 0 indigo,
        7px 7px 0 violet;
    }

    #content {
        background:url('http://www.richardfarrar.com/downloads/cctv-lines.png') top left fixed repeat;
        left:200px;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        top: 50%;
        margin-top: -220px;
        position:absolute;
		width: 750px;
		height: 380px;
        overflow-y: auto;
        overflow-x: hidden;
		color: #fff;
		float: center;
		margin: auto;
		margin-top: -220px;
	    border: 5px outset #372EA1;
	    transform: translate(0,130px);

    }



#infoblock{
    display:inline-block;

}


    #ident {
        background: url('http://i.imgur.com/9MBwXCI.png') center no-repeat;
        background-size: contain;
        height:50px;
        width:50px;
        bottom:20px;
        z-index:99999999;
        position:fixed;
        right:20px;
        opacity:0.6;
        transition: opacity 0.6s;
    }
    #ident:hover {
        opacity:1;
    }

    #ident2 {
        background: url('http://i.imgur.com/LUl64GJ.png') center no-repeat;
        background-size: contain;
        height:50px;
        width:50px;
        bottom:75px;
        z-index:99999999;
        position:fixed;
        right:20px;
        opacity:0.6;
        transition: opacity 0.6s;
    }
    #ident2:hover {
        opacity:1;
    }


#s-m-t-tooltip {
    max-width:300px;
    transform: translate(0.5em, 0.5em);
    height:18px;
    border-radius: 0px;
    padding:4px;
    color:#FFFF00;
    text-shadow: 1px 1px #000;
    border:2px solid #000;
    letter-spacing:1px;
    background: #ef3ed5; /* Old browsers */
    background: -moz-linear-gradient(top, #ef3ed5 0%, #2ec5ea 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ef3ed5 0%,#2ec5ea 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ef3ed5 0%,#2ec5ea 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ef3ed5',      endColorstr='#2ec5ea',GradientType=0 );
    font: 15px 'Limelight', cursive;
    z-index:99999;}


#banner{
	    font: 20px 'Seaweed Script', cursive;
	    height: 330px;
	    width: 125px;
	    top:0;
	        pointer-events: none;

}
/*beginning of head link for post*/



.links_body {
    display: block;
    float:center;
    padding: .2em .8em;
    text-decoration: none;

}

 .links_body li {
     margin: 0 0 .4em 0;
    /* font: 15px 'Seaweed Script', cursive;*/
     text-align:center;
}
.links_body ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    width:424px;
}

 .links_body a
{
    display: block;
    padding: 0em .8em;
    text-decoration: none;


}

 .links_list {
    margin: 20px 0 20px 150px;
    padding:0px;
    width:460px;
    float:center;
    overflow: hidden;
    display:block;

}

 .links_head {
    font:20px 'Seaweed Script', cursive;
    padding-top:50px;
    padding-bottom:50px;
    cursor:pointer;
    float:center;
    position:relative;
    margin:0px;
    width:450px;
    text-align:center;
    opacity:1.0;
    transition: color 0.4s, background-color 0.4s, opacity 0.4s;


}

 .links_head:hover{
    opacity:0.5;

}





.mCSB_scrollTools .mCSB_draggerRail { background:rgba(0,255,106, 0.5); width:2px; }


.mCSB_draggerContainer { width:8px; }
.mCSB_scrollTools .mCSB_dragger { cursor:auto; }
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    width:5px;
    background:#ffffcc;
    text-align:center;
    box-shadow: 0 0 3px 1px #fff, 0 0 5px 3px #ffff1a, 0 0 7px 4px #ffff4d;
    border-radius:2px; }
.mCSB_scrollTools { opacity:1; }



</style>

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

 <script src="http://malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.min.js"></script><!--scrollbar code-->

  <script src="http://malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>

 <script>
 var jqscroll = $.noConflict()
    (function(jqscroll){
        jqscroll(window).on("load",function(){
            jqscroll("#content").mCustomScrollbar({
                scrollInertia:700,
                alwaysShowScrollbar: 2,
                MouseWheel:{ enable: true },
                scrollButtons:{ enable: false },
                keyboard:{ enable: true },
                scrollbarPosition:"inside",
            });
        });
    })(jQuery);
</script>



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

<script src="http://static.tumblr.com/fiw4iub/4jdnu5ta4/jquery.style-my-tooltips.js"></script><!--tooltip code-->
 <!--tooltip script-->
<script>
 var jqttip = $.noConflict()
(function(jqttip){
jqttip(document).ready(function(){
jqttip("a[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:10,
tip_fade_speed:0,
attribute:"title"
});
});
})(jQuery);
</script>


<script type="text/javascript">
function open(askbox) {
    var askcontainer = document.getElementById(askbox);
    if (askcontainer) {askcontainer.className=(askcontainer.className=='closed')?'open':'closed';}
}
</script>

<script type="text/javascript" src="http://static.tumblr.com/3ikgvxs/0TGl4zgpu/jquery.min.js"></script>
<script type="text/javascript">
 var jqopenbox = $.noConflict()
jqopenbox(document).ready(function(){
jqopenbox(".links_body").hide();
jqopenbox(".links_head").click(function(){
jqopenbox(this).next(".links_body").slideToggle('fast');
}); }); </script>


</head>
<body>
<div id="headert" class="header"></div>
<div id="headerb" class="header"></div>
<div id="headerr" class="header"></div>
<div id="headerl" class="header"></div>

<div id="bgrnd">
    <div id="blk"></div>
</div>

<div id="topmid">
    <a href="/" title="BACK TO CROCKETT'S THEMES"><div id="redopbar" class="opbars" ><i>HOME</i></div></a>
    <div id="ylwopbar" class="opbars"> ♦ </div>
    <div id="grnopbar" class="opbars"> ♦ </div>
    <div id="bluopbar" class="opbars"> ♦ </div>


	<div id="titleblock"><a href="http://crocketts-themes.tumblr.com/">
<img src="http://i.imgur.com/LUl64GJ.png" width="220" height="220" style="position: absolute; z-index: 1">
<div id="neon1" class="neonbars"></div>
<div id="neon2" class="neonbars"></div>
<div class="titletext">crockett's </div>
<div class="titletext" style="margin-top:90px">themes</div>
</a>
</div>

</div>



<!--DO NOT REMOVE THIS CODE WITHIN THIS COMMENT-->

 <a href="http://crocketts-themes.tumblr.com/" title="theme by crockett">
<div id="ident2"></div></a>

<a href="http://badmecha007.tumblr.com/" title="main blog">
<div id="ident"></div></a>


<div id="content">

<div style="font: 40px 'Limelight', cursive;">crocketts-theme's font repository</div>

<p style="font: 20px 'Anaheim', sans-serif;">The below fonts are included in the big pack of fonts.</p>


<p style="width:500px; background:rgba(0,0,0,0.6);word-wrap: break-word;">&lt;link href="https://fonts.googleapis.com/css?family={PUT FONTS HERE}|{SEPERATED BY A BAR}" rel="stylesheet"&gt; </p>





<table id="fontblock" width="600px" style="border: 3px inset rgb(229, 75, 180);" border="4">
  <tr align="center">
    <th>Sans Serif:</th>
    <th>Serif</th>
	<th>Cursive</th>
  </tr>
  <tr align="center">
	<td style="font-family: 'Play', sans-serif;">Play</td>
    <td style="font-family: 'Amiri', serif;">Amiri</td>
	<td style="font-family: 'Limelight', cursive;">Limelight</td>
  </tr>
  <tr align="center">
    <td style="font-family: 'Orbitron', sans-serif;">Orbitron</td>
    <td></td>
	<td style="font-family: 'Seaweed Script', cursive;">Seaweed Script</td>
  </tr>
  <tr align="center">
    <td style="font-family: 'Anaheim', sans-serif;">Anaheim</td>
    <td></td>
	<td style="font-family: 'Faster One', cursive;">Faster One</td>
  </tr>
  <tr align="center">
    <td></td>
    <td></td>
	<td style="font-family: 'Monoton', cursive;">Monoton</td>
  </tr>
</table>


</div> <!--content-->

</body>