FAQ Page 03 - Grey

<head>

<link rel="shortcut icon" href="{Favicon}"/>
<title>FAQ</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

<!---------------------------------------------------------------------
----------------- THEME BY ELISE WHITE (MISSCAPALDI) ------------------
-------- PLEASE DO NOT REMOVE THE CREDIT OR USE AS A BASE CODE --------
------------------- THANKS AND HAVE A LOVELY DAY ;) -------------------
---------------------------------------------------------------------->

<style type="text/css">

::-webkit-scrollbar-thumb {
    height:auto;
    background-color:#999999;
}

::-webkit-scrollbar {
    height:9px;
    width:4px;
    background-color:#FFFFFF;
}

#container {
    position:absolute;
    width:710px;
    height:450px;
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right:0;
    text-align:center;
}

#links {
    width:550px;
    padding-bottom:0px;
    margin-right:auto;
    margin-left:auto;
    text-align:center;
    border-bottom:2px solid #777777;
}

    #links a {
        display:inline-block;
        width:125px;
        font-family:calibri;
        color:black;
        font-size:10px;
        letter-spacing:2px;
        text-transform:uppercase;
        line-height:300%;
        text-decoration:none;
        -o-transition: all 0.5s ease-out;
        -webkit-transition: all 0.5s ease-out;
        -moz-transition: all 0.5s ease-out;
    }

    #links a:hover {
        background-color:#777777;
        color:white;
        line-height:200%;
        -o-transition: all 0.5s ease-out;
        -webkit-transition: all 0.5s ease-out;
        -moz-transition: all 0.5s ease-out;
    }

#box {
    margin-top:20px;
    width:710px;
    height:400px;
}

#content {
    width:280px;
    height:400px;
    padding:0px 10px 0px 0px;
    float:left;
    overflow:scroll;
}

    #content h1 {
        margin-top:15px;
        font-family:century gothic;
        font-size:13px;
        color:#444444;
        text-decoration:none;
        font-weight:normal;
        text-align:justify;
        border-bottom:1px solid #777777;
    }

    #content p {
        font-family: 'Open Sans', sans-serif;
        font-size:11px;
        color:#666666;
        text-align:justify;
    }

    #content p a {
        color:#ADADAD;
        text-decoration:none;
        -o-transition: all 0.5s ease-out;
        -webkit-transition: all 0.5s ease-out;
        -moz-transition: all 0.5s ease-out;
    }

    #content p a:hover {
        color:#EEEEEE;
        -o-transition: all 0.5s ease-out;
        -webkit-transition: all 0.5s ease-out;
        -moz-transition: all 0.5s ease-out;
    }

#column {
    width:410px;
    height:370px;
    float:right;
    margin-top:0px;
    text-align:left;
    background-color:#050505;
}

    #column img {
        width:410px;
        height:200px;
    }

#askbox {
    display:block;
    width:410px;
    margin:0px auto 0px auto;
    background-color:white;
}

#title {
    margin-top:-250px;
    padding-right:10px;
    font-family:century gothic;
    font-size:28px;
    color:white;
    letter-spacing:2px;
    text-align:right;
}

#credit {
    font-size:9px;
    font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
    font-style:italic;
    letter-spacing:1px;
}

    #credit a {
        background-color:#fff;
        padding:5px;
        border-top:1px solid #e9e9e9;
        border-bottom:1px solid #e9e9e9;
        position:fixed;
        right:15px;
        bottom:10px;
        text-decoration:none;
        color:gray;
        -moz-transition-duration:1s;
        -webkit-transition-duration:1s;
        -o-transition-duration:1s;
    }

        #credit a:hover {
            color:#fff;
            background-color:#747474;
            -moz-transition-duration:1s;
            -webkit-transition-duration:1s;
            -o-transition-duration:1s;
        }

</style>

<body>

<div id="container">

<!--------------------------------------------
    TOP LINKS
 --------------------------------------------->

<div id="links">
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/navigation">Navigation</a>
    <a href="http://www.tumblr.com/dashboard">Dashboard</a>
</div>

<!--------------------------------------------
    CONTENT
 --------------------------------------------->

<div id="box">

<!--------------- FAQ ---------------->

<div id="content">
    <h1>How do I install this page on my blog?</h1>
    <p>Just create a new page and pick "Custom Layout" from the dropdown. Then copy and paste the <a href="http://pastebin.com/dtvdAiGR">page code</a> from Pastebin into the HTML space provided!</p>
    <p>IMPORTANT: You <i>must</i> change the URL embedded in the askbox to your own. After you've copied the code, find the portion marked off with "Askbox" and change the part that says "YOURURLHERE" to your specific URL. Once you do this, the askbox will appear below the picture to the right.</p>
    <h1>How do I replace this text with my FAQ?</h1>
    <p>Find the part of the code in which this content lies, and delete the text. Each question will go inside an &#60;h1&#62; tag and each answer will go in a &#60;p&#62; tag.</p>
    <p>If you have too much content to fit in the predetermined box, a scrollbar will appear to accomodate the extra space needed.</p>
    <h1>Is there another version of this page?</h1>
    <p>Why, yes - I'm so glad you asked! I have created a more dramatic "black version" of this page that you can use if you'd rather have something with a little more contrast.</p>
    <p><a href="http://pastebin.com/h5hBtGBA">Contrast FAQ (Black) Preview</a></p>
    <h1>Are there more pages in this collection?</h1>
    <p>This is the only page in the collection at the moment, but I may choose to create more when I get a bit more time. If I do publish more, they will be posted with the rest of <a href="http://misscapaldi.tumblr.com/pages">my pages</a>.</p>
</div>

<!-------------- IMAGE --------------->

<div id="column">
    <img src="https://31.media.tumblr.com/b3488aca3df07b74f0194e0b3a711e42/tumblr_n12iya6kC11rv5n8go1_400.png">

<!------------- ASKBOX --------------->

    <div id="askbox">
    <iframe frameborder="0" height="190" id="ask_form" scrolling="no" src="http://www.tumblr.com/ask_form/YOURURLHERE.tumblr.com" width="100%" style="background-color: transparent; overflow: hidden;"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]-->
    </div>

<!-------------- TITLE --------------->

    <div id="title">faq;</div>
</div>

</div>
</div>

<!--------------------------------------------
    CREDIT - YOU MAY EDIT BUT YOU MAY NOT REMOVE
 --------------------------------------------->

<div id="credit"><a href="http://misscapaldi.tumblr.com">elise white</a></div>

</body>