pages pack 2 - faq


<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# blog: http://ogp.me/ns/blog#">
<title>{Title}</title>
<!--- change the title of the page here --->

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

faq page by hardziam.tumblr.com // septembre.co.vu

--->


<style type="text/css">


#header{color:white;  background:black;}
.title{border-bottom:2px solid #FF75B6;}
.title:after{background:#aaa;}

#post a{color:#aaa;}
#post a:hover{color:#eee;}
#post a:before{background:#ccc;}
#post b{color:#CBEBF5;}
#post em{color:#ffaacc;}

.question{background:#eee; border-left:3px solid #EBA0C3;}
.answer{background:white; border-left:3px solid #eee;}

#abxtitle{border-color:#3C9DDE;color:#eee;background:#000;}

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


/* end of customization. only go further if 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}


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;
    position:fixed;
    height:40px;
    z-index:1000;
}

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

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

#entries{
    width:760px;
    margin-left:20px;
    margin-top:80px;
}

#post{
    width:500px;
    margin:20px;
    float:left;
}

.question{
    padding:7px;
    display:block;
    -moz-transition-duration:1s;
-webkit-transition-duration:1s;
-o-transition-duration:1s;
}

.question:first-letter{
    text-transform:uppercase;
}

#abxtitle{
    padding:14px;
    font-size:15px;
    font-style:italic;
}


.answer{
    display:block;
    padding:10px;
    border-left:3px solid #f8f8f8;
    margin-bottom:10px;
}

.answer a{
    color:black;
    border-bottom:1px dotted #aaa;
    font-weight:bold;
}

.answer a:hover{
    color:black;
}


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

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

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

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

#box a:hover{
    color:white;
}

.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;
}


#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">FAQ</div>
</div>

<div id="box">
<!--- here you can change the image ---->
    <img src="http://33.media.tumblr.com/69d8465096e840f3f9b3e67fd39266db/tumblr_mgqvsajBLO1qlt206o6_250.png">
<!--- here you can change the image ---->

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

<!---- remove this below if you don't want a search box ------>
    <a href="javascript:unhide('searchbx');">search tags</a>
    <div id="searchbx" class="hidden"><div class="search"><form method="get" action="/search"><input type="text" placeholder="Type and press enter..." value="" name="q"></input></form></div></div>
<!------------------------------------------------------------>


</div>

<div id="entries">
    <div id="post">
<div class="question">here is your question?</div>
        <div class="answer">and here is the answer. you can add in a <a href="/tagged/yeahps">link</a> too.</div>


<div class="question" id="abxtitle">anything else, ask away!</div>

<!-----
HERE IS YOUR ASK BOX. PUT IN YOUR URL WHERE IT SAYS YOURURLHERE
---->
<div class="answer">
<iframe frameborder="0" height="190" id="ask_form" scrolling="yes" src="http://www.tumblr.com/ask_form/YOURURLHERE.tumblr.com" width="100%"></iframe>
 </div>


</div>

 <div id="credit"><a href="http://hardziam.tumblr.com">HZ</a></div>


</body>


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

</html>