pages pack 2 - icons

<title>{Title}</title>

<link rel="shortcut icon" href="{Favicon}">
<!---

icons page by hardziam // themesbyzsu

--->


<style type="text/css">


#header{color:white;  background:black;
}


.title{border-bottom:2px solid #fff;}
.title:after{background:#222266;}

#post h1{border-bottom:1px solid #000;}
#post a{border-bottom:1px dotted #aaa; color:#aaa;}
#post a:hover{color:#eee;}
#post a:before{background:#ccc;}

/* sidebar */
#box{background:#000;}
#box a{color:white;}




/* don't touch anything below unless you know what you're doing */

::-webkit-scrollbar {background-color:black; border:2px solid #fff;height:5px; width:5px;}
::-webkit-scrollbar-thumb:vertical {background-color:black; border:1px solid #fff; height:40px;}
::-webkit-scrollbar-thumb:horizontal {background-color:black;border:1px solid #fff; height:8px!important}

#searchbx::-webkit-scrollbar {background-color:#fff; border:2px solid #000;height:5px; width:5px;}
#searchbx::-webkit-scrollbar-thumb:vertical {background-color:#fff; border:1px solid #000; height:40px;}
#searchbx::-webkit-scrollbar-thumb:horizontal {background-color:#fff;border:1px solid #000; height:8px!important}



body {
        background: #fff;
        margin:0;width:100%;height:100%;
        font:11px Corbel;
        padding: 0;
        position:absolute;
        }

a {
    text-decoration:none;
    outline:none;
    color:gray;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}

a:hover {
    color:#eee;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}

#header{
    width:100%;
    top:0;left:0;
    padding:20px;
    padding-left:40px;
    height:40px;
    position:fixed;
    z-index:1000;
}

.title{
    font-size:20px;
    text-transform:uppercase;
    display:inline-block;
    padding:10px;
    padding-top:4px;
    letter-spacing:5px;
}

.title:after{
    width:700px;
    content:'';
    position:absolute;
    margin-top:34px;
    margin-left:9px;
    height:2px;
}

#entries{
    width:760px;
    margin-left:20px;
    top:0;
    position:absolute;
}

.set h1{
    font:10px corbel;
    text-align:left;
    letter-spacing:3px;
    padding:10px 20px;
    text-transform:uppercase;
}

#box{
    width:110px;
    padding:20px;
    padding-top:70px;
    position:fixed;
    left:780px;
    top:0;
    z-index:9999;
}

#box img{
    width:85px;
    padding:10px;
    padding-bottom:20px;
}

#box span{
    font:9px Corbel;
    text-align:justify;
    margin-bottom:10px;
}

#box a{
    display:block;
    font-size:10px;
    padding:6px;
    font-style:italic;
    color:#eee;
    text-align:center;
}

#box:hover a{
    color:#999;
}

#box a:hover{
    color:white;
}

#box a#open{
    font-style:normal;
    text-transform:uppercase;
    letter-spacing:2px;
}

.hidden{display:none;}
.unhidden{display:block;}

.search{
    height:26px;
    margin-left:-20px;
    width:150px;
    margin-bottom:-40px;
    overflow:hidden;
    background:#333;
}

.search input{
    border:1px solid #333;
    background:#333;
    padding:2px;
    padding-left:5px;
    color:white;
    width:150px;
    padding-top:5px;
    font:10px Calibri;
}

.set{
    padding:10px;
    padding-top:100px;
    margin-bottom:-50px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.set img{
    width:100px;
    margin:2px;
}

#searchbx{
    margin-top:60px;
    outline:20px solid white;
    text-align:center;
    overflow:auto;
    outline-offset:20px;
}

#searchbx h1{
    color:white;
    text-transform:uppercase;
    letter-spacing:1px;
    font:10px Calibri;

}

#credit a{
position:fixed;
right:10px;
bottom:10px;
padding:6px;
background:black;
text-transform:uppercase;
color:white;
-moz-transition-duration:1s;
-webkit-transition-duration:1s;
-o-transition-duration:1s;
}

#credit a:hover {
background:white;
color:black;
-moz-transition-duration:0.5s;
-webkit-transition-duration:0.5s;
-o-transition-duration:0.5s;
}


</style>


</head>

<body>


<div id="header">
    <div class="title">icons</div>
</div>

<div id="box">

<!--- here you can change the image! --->
    <img src="http://41.media.tumblr.com/3fa2a6d817ac1ccc35b7913a083ce546/tumblr_mgfpr12lNG1qlt206o7_250.png">
<!--- here you can change the image! --->

    <a href="/">back to blog</a>
    <a href="/faq">message</a>
    <a href="/dashboard">dashboard</a>

<!----- here you put all the characters, make sure you add a # before --->
    <div id="searchbx">
    <h1>character list</h1>

     <a href="#allison">allison</a>


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


</div>

<div id="entries">

<!------ START FIRST BOX------->
<div class="set" id="allison">
<!--- change allison to the name of the character.
             >> they must correlate to the links above ---->

<h1>allison</h1>

<!----- now all the icons. you don't need to put anything in between them, just add them all one after another --->
<img src="https://31.media.tumblr.com/3fc495d71d17b90288ba4afd9ce510d9/tumblr_inline_n9drljtECn1s2ykwd.png">

</div>
<!---- END OF FIRST BOX --->











</div>







































































<!---- leave this here please!!!!1 ---->
 <div id="credit"><a href="http://hardziam.tumblr.com">HZ</a></div>


</body>

<!------ S C R I P T S! ------>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/me5sfsd/12Qlmj66n/script.js"></script>


<script language="JavaScript">
function function1(){
window.scrollTo(0,5);
}
function function2(){
window.scroll(0,2);
}
</script>
<!---- end masonry scripts -->

<script type="text/javascript">
 function unhide(searchbx) {
 var set = document.getElementById(searchbx);
 if (set) {
 set.className=(set.className=='hidden')?'unhidden':'hidden';
 }
 }
</script>

<script src="http://static.tumblr.com/heqtwlw/ftAn7cy1u/jquery.scrollto-1.4.2-min.js"></script>

</html>