Theme 007 - FAQ

<!DOCTYPE html>

<!--        macfustythemes     -->
    <head>
        <title>{block:PostTitle}{PostTitle} - {/block:PostTitle}{Title} </title>
        {block:Description}
        <meta name="description" content="{MetaDescription}">
        {/block:Description}

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

        <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

        <!-- HTML5 Shiv -->
        <!--[if lt IE 9]>
                <script src="http://static.tumblr.com/hriofhd/Qj0m8pn7q/html5shiv.js"></script>
        <![endif]-->

        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script src="http://static.tumblr.com/01wstkc/BAXnr15b7/jquery-ui.min.js" type="text/javascript"></script>

        <script>
            $(document).ready(function() {
                $("#faq ul li").not(".show").find("ul").hide();
                $("#faq ul li").not(".show").find("#arrow").addClass("down");
                $("#faq ul li").click(function() {

                  if ($(this).find("ul").is(":hidden")) {
                    $(this).find("ul").slideDown("slow");
                    $(this).find("#arrow").removeClass("down");
                    $(this).siblings().find("ul").slideUp("slow");
                    $(this).siblings().find("#arrow").addClass("down");
                  } else {
                    $(this).find("ul").slideUp("slow");
                    $(this).find("#arrow").addClass("down");
                  }

                        });
                        });
        </script>

        <style>

        body {
            background-color: #0f0f0f;
            background-image: url('{image:Background}');
            background-repeat: no-repeat;
            background-attachment: fixed;
            color: #000;
            font-size: 11px;
            font-family: 'Calibri', sans-serif;
            line-height: 18px;
        }

        a {
            color: #f2992e;
            text-decoration: none;
            -moz-transition: all 0.5s ease;
            -o-transition: all 0.5s ease;
            -webkit-transition: all 0.5s ease;
            transition: all 0.5s ease;
        }

        a:hover {
            color: #fff;
            letter-spacing: 1px;
        }

        .clear {
            clear: both;
        }

        blockquote {
            border-left: 1px solid {color:Border};
            padding: 5px 10px;
        }

        h1 {
            font-weight: normal;
            text-transform: uppercase;
            text-align: center;
            font-size: 18px;
            letter-spacing: 3px;
        }

        h3 {
            font-weight: normal;
            text-transform: uppercase;
            text-align: center;
            font-size: 14px;
            letter-spacing: 3px;
        }

        h2 {
            background-color: #f2992e;
            width: 100%;
            padding: 5px 0;
            font-weight: normal;
            font-family: 'Roboto', sans-serif;
            text-transform: uppercase;
            text-align: center;
            color: #0f0f0f;
        }

        /**     HEADER      **/

        #header {
            position: fixed;
            width: 100%;
            top: 10%;
            left: 7.3%;
            font-family: 'Roboto', sans-serif;
        }

        #header span {
            font-size: 22px;
            text-transform: uppercase;
            letter-spacing: 3px;
            color: #f2992e;
            padding-right: 1%;
        }

        #header a {
            color: #707070;
            text-transform: lowercase;
            padding: 0 2%;
        }

        #header a:hover {
            color: #f2992e;
        }

        /**     CONTAINER     **/

        #container {
            position: fixed;
            height: 77.5%;
            width: 85.4%;
            left: 7.3%;
            top: 15%;
            background-color: #fff;
            border: 1px solid #0f0f0f;
            overflow: auto;
        }

        #container::-webkit-scrollbar
        {
        	width: 4px;
        }

        #container::-webkit-scrollbar-thumb
        {
        	background-color: #f2992e;
        }

        #content {
            width: 810px;
            margin: 4% auto;
            border: 1px solid #eaeaea;
        }

        #faq {
            width: 400px;
            float: left;
        }

        #faq ul {
            padding: 0;
            width: 400px;
        }

        #faq ul li {
            list-style-type: none;
            width: 380px;
            padding: 0 10px;
            margin-bottom: 5px;
        }

        #arrow {
            float: right;
            margin-top: -30px;
            border-radius: 100%;
            width: 10px;
            height: 10px;
            padding: 5px;
            border: 1px solid #fff;
            color: #fff;
            text-align: center;
            line-height: 13px;
            -moz-transition: all 0.5s ease;
            -o-transition: all 0.5s ease;
            -webkit-transition: all 0.5s ease;
            transition: all 0.5s ease;
        }

        #arrow.down {
            -ms-transform: rotate(180deg); /* IE 9 */
            -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
            transform: rotate(180deg);
        }

        #faq ul li:hover > #arrow {
            color: #000;
            border: 1px solid #000;
        }

        .label {
            width: 380px;
            padding: 10px;
            background-color: #f2992e;
            font-family: 'Roboto', sans-serif;
            font-size: 16px;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: #fff;
            -moz-transition: all 0.5s ease;
            -o-transition: all 0.5s ease;
            -webkit-transition: all 0.5s ease;
            transition: all 0.5s ease;
        }


        #faq ul ul {
            padding: 0;
        }

        #faq ul ul li {
            margin-bottom: 0;
            padding: 10px;
            background-color: #eaeaea;
            color: #000;
            font-size: 11px;
            font-family: 'Calibri', sans-serif;
            text-transform: none;
            text-align: justify;
        }

        .q {
            text-transform: uppercase;
            font-size: 12px;
            text-align: right;
            font-weight: bold;
            margin-bottom: 5px;
        }

        #title {
            padding-left: 10px;
            font-family: 'Roboto', sans-serif;
            font-size: 16px;
            text-transform: uppercase;
            letter-spacing: 2px;
            text-align: center;
        }

        #ask {
            position: fixed;
            margin: 15px 10px 0 415px;
            width: 385px;
        }

        /**     CREDIT      **/

        a.macfustys {
            position: fixed;
            bottom: 2%;
            right: 1%;
            border: 1px solid #707070;
            padding: 2px;
            font-size: 12px;
            letter-spacing: 1px;
            color: #707070;
        }

        a.macfustys:hover {
            color: #f2992e;
            letter-spacing: 1px;
        }

        </style>
    <body>

    <!--        HEADER      -->

    <div id="header">
        <span>{Title}</span>
        <a href="/">Home</a>
        <a href="/ask">Message</a>
        <a href="/">Link 2</a>
        <a href="/">Link 3</a>
        <a href="/">Link 4</a>
        <a href="/">Link 5</a>
        <a href="/">Link 6</a>
    </div>

    <!--        CONTAINER       -->

    <div id="container">
        <div id="content">
            <div id="faq">
                <ul>
                    <li class="show"><div class="label">Section 1</div>
                    <div id="arrow">^</div>
                    <ul>
                    <li>
                    <div class="q">What's this page about?</div>
                    <p>This is an FAQ page.
                    </li>
                    <li>
                    <div class="q">What's with the sections?</div>
                    <p>Divide your FAQ into optional sections. Click the section header to open another section. Don't forget to add your URL in the ask box code.
                    </li>
                    </ul>
                    </li>
                    <li><div class="label">Section 2</div>
                    <div id="arrow">^</div>
                    <ul>
                    <li>
                    <div class="q">An sincerity so extremity he additions?</div>
                    <p>Her yet there truth merit. Mrs all projecting favourable now unpleasing. Son law garden chatty temper. Oh children provided to mr elegance marriage strongly. Off can admiration prosperous now devonshire diminution law.
                    </li>
                    <li>
                    <div class="q">Those an equal point no years do?</div>
                    <p>Depend warmth fat but her but played. Shy and subjects wondered trifling pleasant. Prudent cordial comfort do no on colonel as assured chicken. Smart mrs day which begin. Snug do sold mr it if such. Terminated uncommonly at at estimating. Man behaviour met moonlight extremity acuteness direction.

<p>Be me shall purse my ought times. Joy years doors all would again rooms these. Solicitude announcing as to sufficient my. No my reached suppose proceed pressed perhaps he. Eagerness it delighted pronounce repulsive furniture no. Excuse few the remain highly feebly add people manner say. It high at my mind by roof. No wonder worthy in dinner.
                    </li>
                    <li>
                    <div class="q">Unfeeling so rapturous discovery he exquisite?</div>
                    <p>Reasonably so middletons or impression by terminated. Old pleasure required removing elegance him had. Down she bore sing saw calm high. Of an or game gate west face shed. no great but music too old found arose.
                    </li>
                    </ul>
                    </li>
                    <li><div class="label">Section 3</div>
                    <div id="arrow">^</div>
                    <ul>
                    <li>
                    <div class="q">Indulgence announcing uncommonly met she continuing two unpleasing terminated?</div>
                    <p>Share walls stuff think but the arise guest. Course suffer to do he sussex it window advice. Yet matter enable misery end extent common men should. Her indulgence but assistance favourable cultivated everything collecting.

<p>Written enquire painful ye to offices forming it. Then so does over sent dull on. Likewise offended humoured mrs fat trifling answered. On ye position greatest so desirous. So wound stood guest weeks no terms up ought. By so these am so rapid blush songs begin. Nor but mean time one over.
                    </li>
                    </ul>
                    </li>
                </ul>
            </div>
            <div id="ask">
            <div id="title">Frequently Asked Questions</div>
                <p><iframe frameborder="0" scrolling="no" width="100%" height="250" src="http://www.tumblr.com/ask_form/YOURURL.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]--></p>
            </div>
            <div class="clear"></div>
        </div>
    </div>

    <!--        CREDIT      -->
    <a target="new" class="macfustys" href="http://macfustythemes.tumblr.com/">
        MT
    </a>
    </body>
</html>