page pack - faq

<head>
<title>FAQ</title>
<!--- change the title of the page here --->

<link rel="shortcut icon" href="{Favicon}">
<!---
ғᴀǫ ᴘᴀɢᴇ ᴛʜᴇᴍᴇ ʙʏ ʜᴀʀᴅᴢɪᴀᴍ
    please don't take off the credit it's really small!!!!


                    ╭━━━━┳╮╱╭┳━━━┳━╮╭━┳━━━┳━━━╮ ╭━━┳╮╱╱╭╮
                    ┃╭╮╭╮┃┃╱┃┃╭━━┫┃╰╯┃┃╭━━┫╭━╮┃ ┃╭╮┃╰╮╭╯┃
                    ╰╯┃┃╰┫╰━╯┃╰━━┫╭╮╭╮┃╰━━┫╰━━╮ ┃╰╯╰╮╰╯╭╯
                    ╱╱┃┃╱┃╭━╮┃╭━━┫┃┃┃┃┃╭━━┻━━╮┃ ┃╭━╮┣╮╭╯
                    ╱╱┃┃╱┃┃╱┃┃╰━━┫┃┃┃┃┃╰━━┫╰━╯┃ ┃╰━╯┃┃┃
                    ╱╱╰╯╱╰╯╱╰┻━━━┻╯╰╯╰┻━━━┻━━━╯ ╰━━━╯╰╯
                    ╭╮╱╭┳━━━┳━━━┳━━━┳━━━━┳━━┳━━━┳━╮╭━╮
                    ┃┃╱┃┃╭━╮┃╭━╮┣╮╭╮┣━━╮━┣┫┣┫╭━╮┃┃╰╯┃┃
                    ┃╰━╯┃┃╱┃┃╰━╯┃┃┃┃┃╱╭╯╭╯┃┃┃┃╱┃┃╭╮╭╮┃
                    ┃╭━╮┃╰━╯┃╭╮╭╯┃┃┃┃╭╯╭╯╱┃┃┃╰━╯┃┃┃┃┃┃
                    ┃┃╱┃┃╭━╮┃┃┃╰┳╯╰╯┣╯━╰━┳┫┣┫╭━╮┃┃┃┃┃┃
                    ╰╯╱╰┻╯╱╰┻╯╰━┻━━━┻━━━━┻━━┻╯╱╰┻╯╰╯╰╯


               hardziam.tumblr.com // themesbyzsu.tumblr.com


--->


<style type="text/css">

/* ----- HERE YOU EDIT ALL THE COLORS AND PUT IN AN IMAGE ------ */

.left {
/* ------------   SIDE IMAGE HERE  ----------- */
    background-image:url(http://31.media.tumblr.com/41078fe84f1a6677965a3042a2cf78ef/tumblr_mok3c6lqT61s7ly1xo1_500.png);
/* ------------   SIDE IMAGE HERE  -----------*/
}

/* ------- HERE YOU CHANGE THE COLORS ----- */

.links a{
    border-right:10px solid #fff;
    color:black;}

.links a:hover {
    color:black;
    border-right:20px solid #ccbbaa;}

#title {
    color:black;}

.question{
    color:gray;
    background:#eeeeee;}

.answer {
    color:black;}

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

/* ------ END OF CUSTOMISATION ----- */


body {
        background: #fff;
        margin-left:0px;
        padding: 0;
        position:fixed;
        }

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

#mainContainer {
    margin-top:-10px;
    width:900px;
    height:100%;
}

.left {
    height:700px;
    width:400px;
    z-index:99;
    background-size:cover;
    background-position: center;
    position:fixed;
    float:left;
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
}

.left:hover {
    margin-top:0px;
}

.links {
    margin-top:10px;
    text-align:right;
}

.links a{
    font-family:century gothic;
    font-size:10px;
    text-transform:uppercase;
    border-right:10px solid #fff;
    padding-right:5px;
    display:block;
    margin-bottom:5px;
}

.links a:hover{
    padding-right:15px;
}

.container {
    width:500px;
    margin-left:400px;
    z-index:20000;
    position:fixed;
    background:white;
}

#title {
    font-family:century gothic;
    text-align:center;
    background:white;
    text-transform:uppercase;
    color:#000;
    position:fixed;
    width:500px;
    font-size:40px;
    letter-spacing:10px;
}

#mainstuff {
    height:550px;
    overflow:auto;
    background:#fff;
    position:absolute;
    margin-top:50px;
    padding:10px;
    color:black;
    width:480px;
}

.question{
    background:#eeeeee;
    padding:5px;
    border:1px solid #fff;
    color:gray;
    text-transform:uppercase;
    letter-spacing:1px;
    font-size:10px;
    border-radius:3px;
    font-family:calibri;
    font-style:italic;
}


.answer {
    padding:10px;
    font-family:calibri;
    font-size:13px;
    border-bottom:1px solid #eee;
    margin-bottom:20px;
}

#credit {
position:fixed;
right:0px;
bottom:0px;
padding:4px;
width:15px;
text-transform:none;
font-family: helvetica;
font-weight:none;
letter-spacing:1px;
margin-bottom:3px;
font-size:9px;
margin-right:3px;
border:1px solid;
opacity:0.7;
border-color:#bbb;
background: #fff;
-moz-transition-duration:1s;
-webkit-transition-duration:1s;
-o-transition-duration:1s;
}

#credit:hover {
opacity:1;
width:15px;
background:black;
-moz-transition-duration:0.5s;
-webkit-transition-duration:0.5s;
-o-transition-duration:0.5s;
}

</style>


</head>

<body>

<div id="mainContainer">
<div class="left">
    <div class="links">
        <a href="/">home</a>
        <a href="/ask">message</a>
        <a href="/">link</a>
        <a href="/">link</a>
        <a href="link">link</a>

        </div>
</div>
<div class="container">
<div id="title">faq.</div>

<div id="mainstuff">

<!--- here you start your questions --->

<div class="question">
    question?
</div>
<div class="answer">
    answer.
</div>

<p><iframe frameborder="0" height="190" id="ask_form" scrolling="no" src="http://www.tumblr.com/ask_form/YOURURLHERE.tumblr.com" width="100%" style="line-height: 1.4;"></iframe></p>

</div>
</div>

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

</body>


</html>