FAQ page #3

<!--

// FAQ #3

by espoirthemes //

-->

<html>
    <head>
        <link rel="shortcut icon" href="{Favicon}" />
        <link rel="alternate" type="application/rss+xml" href="{RSS}" />
        <title>{name}'s faq</title>
        <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    </head>
    <style type="text/css">

    .tmblr-iframe.tmblr-iframe--desktop-logged-in-controls.iframe-controls--desktop {
    white-space:nowrap; -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%);
     position:fixed;
top:6px;
     opacity:.4;

  /*to make the tumblr controls not show up, just add "display:none;"*/

}


    /*scrollbar*/
    ::-webkit-scrollbar {
        width:12px;
        background:#ccc;
        border:5px solid #fefefe;

    }

    ::-webkit-scrollbar-thumb {
        border:5px solid #fefefe;
        background:#888;
    }


    body {
        margin:0;
        background:#fefefe; /*background color */
        font-family:Roboto; /*font */
        font-size:.9em;
        color:#686868; /*font color */
    }

    a {
        color:#5ccccb; /*link color */
        border-bottom:1px solid black; /*link underline */
        text-decoration:none;
        transition:.6s;
    }

    a:hover {
        color:#eee; /*hover link */
        transition:.6s;
    }

    #faq {
        position:relative;
        width:100%;
        padding-top:40px;
        padding-bottom:20px;
        margin:10px auto;
        overflow-x:hidden;

}


    /* question bubble */
     .bub {
        margin-top:40px;
        position: relative;
        width: 320px;
        left:-20px;
        height: auto;
        text-align:center;
        padding: 0px;
        background: #FFFFFF; /*bubble background */
        border-radius: 2px;
        padding:20px;
        border: #aaa solid 1px; /*bubble border*/
}

.bub:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 12px 17px 12px 0;
border-color: transparent #FFFFFF; /*must be same color as bubble background */
display: block;
width: 0;
z-index: 1;
left: -17px;
top: 23px;
}

.bub:before
{

content: '';
position: absolute;
border-style: solid;
border-width: 12px 17px 12px 0;
border-color: transparent #5cccc6; /*speech bubble triangle border */
display: block;
width: 0;
z-index: 0;
left: -18px;
top: 23px;
}

    /*answer bubble */
    .bub2 {
        padding:4px;
        left:20px;
        position: relative;
        width: 320px;
        bottom:20px;
        margin-top:40px;
        text-align:left;
        height: auto;
        min-height:24px;
        padding: 20px;
        background: #FFFFFF; /*bubble background */
        border-radius: 2px;
        border: #5cccc6 solid 1px; /*bubble border */
}

.bub2:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 10px 0 10px 17px;
border-color: transparent #FFFFFF; /*bubble background */
display: block;
width: 0;
z-index: 1;
right: -17px;
top: 38px;
}

.bub2:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 10px 0 10px 17px;
border-color: transparent #aaa; /*bubble triangle border */
display: block;
width: 0;
z-index: 0;
right: -18px;
top: 38px;
}

.top {
    position:fixed;
    z-index:9999;

}

.top a {
    margin:8px;
    text-decoration:none;
    border:none;
    color:#888;
}


#egg { opacity:.8;left:10px; bottom:10px; position:fixed;display:block; width: 14px; height: 18px; background-color:#FFFEFC; -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
           font-family: "up";
border:1px solid #888;  z-index:4;

            }

  #egg:hover   { animation-name: egg;
    animation-duration: 1s;
    animation-iteration-count: infinite;}
      @keyframes egg{
        0%{}
        10%{transform:rotate(6deg)}
        80%{transform:rotate(-6deg)}
        100%{}
    }
    </style>

 <body>
<div class="top">
    <a href="/"> <i class="fa fa-arrow-left"></i> back</a>
    <a href="/archive"> <i class="fa fa-history"></i> archive </a>
    <a href="/"> <i class="fa fa-navicon"></i> extra link</a>

</div>

<div id="faq">
<center>
<!-- to add more questions,
     copy and paste the question bubble
     and answer bubble
-->

<!--question bubble -->
<div class="bub">

this is a question?

</div>
<!--end bubble-->

<!--answer bubble -->
<div class="bub2">

this is an answer!

</div>
<!--end bubble -->

<div class="bub">
Sed sapien diam, mollis lobortis auctor vel, bibendum a nisl. Cras eleifend nibh accumsan lorem suscipit vehicula. Donec non leo lorem.
</div>

<div class="bub2">
    Vestibulum interdum rhoncus eros, ac semper ex tristique sit amet.
</div>

<div class="bub">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae lectus vitae ante convallis consequat non vitae tellus. Curabitur rutrum, magna eget gravida lobortis, tortor libero aliquet ex, quis tempus nulla nibh at lectus.
</div>

<div class="bub2">
Integer tempor convallis magna, et porta neque efficitur id.
</div>

   <iframe frameborder="0" border="0" scrolling="no" width="400" height="240" allowtransparency="true" src="http://www.tumblr.com/ask_form/{name}.tumblr.com" style="background-color:transparent; overflow:hidden;"></iframe>

</center>
           </div>
           <br>
  <a href="http://espoirthemes.tumblr.com" title="credit"><div id="egg"></div></a>

       </body>
</html>