FAQ page #1 for tumblr

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Lato:300,400:latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>

<!---- FAQ page #1 by Sofi (castiiel.tumblr.com). DON'T REMOVE THE CREDIT OR CLAIM THE THEME AS YOURS. DON'T USE IT AS A BASE --->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".ask").click(function(){
        $("#submit").hide();
    });
    $(".ask").click(function(){
        $("#askbox").show();
    });
});
</script>

<script>
$(document).ready(function(){
    $(".submit").click(function(){
        $("#askbox").hide();
    });
    $(".submit").click(function(){
        $("#submit").show();
    });
});
</script>

<style type="text/css">

.tmblr-iframe.tmblr-iframe--desktop-logged-in-controls.iframe-controls--desktop {

display: none;

}

::-webkit-scrollbar {width: 2px; height: 2px; background: transparent; }
::-webkit-scrollbar-thumb { background-color: #ccc; -webkit-border-radius: 0ex; }

body{
font-family:Arial;
background: #f3f3f3;
margin:-10px;
overflow-x:hidden;
}

a{
text-decoration:none;
-webkit-transition-duration:.6s;
-moz-transition-duration:.6s;
-o-transition-duration:.6s;
-ms-transition-duration:.6s;
}

a:hover{
-webkit-transition-duration:.6s;
-moz-transition-duration:.6s;
-o-transition-duration:.6s;
-ms-transition-duration:.6s;
}

h1 {
    font-family:'lato', sans-serif;
    text-transform:uppercase;
    font-size:10px;
    font-weight:bolder;
    text-align:left;
    line-height:150%;
    margin-top:15px;
}

#content {
margin:auto;
margin-top:50px;
width:770px;
text-align:center;
}

#tabz {
    width:330px;
    margin-bottom:10px;
}

#tabz a {
    padding:10px;
    border:1px solid #dfdfdf;
    background:#fff;
    text-align: center;
    display:inline-block;
    width:135px;
    font-size:11px;
font-family: trebuchet ms, consolas, 'lato', sans-serif;
text-transform:uppercase;
letter-spacing:1.4px;
color:#000;
margin:0px;
     transition: all 0.1s linear;
    -moz-transition-duration:0.1s;
    -webkit-transition-duration:0.1s;
    -o-transition-duration:0.1s;
cursor:help!Important;
}

#tabz a:hover {
    letter-spacing:2px;
     transition: all 0.1s linear;
    -moz-transition-duration:0.1s;
    -webkit-transition-duration:0.1s;
    -o-transition-duration:0.1s;
}

#right {
    width:330px;
    height:400px;
    margin-top:-400px;
    margin-left:390px;
}

#faq {
    max-height:383px;
    overflow:auto;
    border:1px solid #dfdfdf;
    background:#fff;
    padding:0px 15px 15px;
    letter-spacing:1.2px;
    font-size:10px;
    font-family:'lato', sans-serif;
    line-height:150%;
    text-align:left;
}

#left {
    width:330px;
    height: 400px;
    margin-left:50px;
}

#askbox {
    border:1px solid #dfdfdf;
    background:#fff;
    padding:15px;
}

#submit {
    overflow-x:hidden;
    overflow-y:auto;
    border:1px solid #dfdfdf;
    background:#fff;
    padding:15px;
    max-height: 324px;
    display:none;
}

#topbar {
width: 100%;
margin:auto;
background:#fff;
border-bottom:1px solid #dfdfdf;
font-size:14px;
font-family: trebuchet ms, consolas, 'lato', sans-serif;
text-transform:uppercase;
padding: 25px 0px 15px;
letter-spacing:1.4px;
color:#000;
text-align:right;
}

#topbar a {
color: #000;
font-size:10px;
margin-right:15px;
}

#uptownfunk {
    margin:auto;
margin-top:50px;
width:770px;
text-align:center;
font-family: trebuchet ms, 'lato', sans-serif;
margin-bottom:50px;
font-size: 10px;
letter-spacing:2px;
text-transform:uppercase;
}

#uptownfunk a {
    color:#000;
}

</style>
</head>
<body>

<div id="topbar">
<a href="http://tumblr.com">dash</a>
<a href="/">index</a>
<a href="/ask">mail</a>
<a href="/">tags</a>
<b><span style="margin-right:25px;">Frequently asked questions</span></b>
</div>

<div id="content">

<div id="left">
<div id="tabz">
<a class="ask" style="margin-right:10px;">ask box</a>
<a class="submit">submit box</a>
</div>

<div id="askbox"><iframe frameborder="0" scrolling="no" width="100%" height="260" src="http://www.tumblr.com/ask_form/{Name}.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]--></div>

<div id="submit"><iframe frameborder="0" border="0" scrolling="no" width="298px" height="535px" allowtransparency="true" src="http://www.tumblr.com/submit_form/{Name}.tumblr.com" style="background-color:transparent;"></iframe></div>
</div>

<div id="right">
<div id="faq">
<h1>This is how you wrap a question</h1>
This is an answer.

<h1>Why didn't you reply?</h1>
I'm sorry if I didn't! Tumblr must have eaten your message or I am very busy at the moment. Anyway, don't doubt to send it again!

<h1>Can you tag something for me?</h1>
Sure! I can always tag anything that bothers you :)

<h1>Vote for me in a poll?</h1>
Yes, sure. Just send me the link.

<h1>Can you recommend me good blogs?</h1>
Every blog I follow is very good, so you can check out my blogroll.

<h1>Do you take requests?</h1>
Not at the moment, but I will put it in my updates tab when they are opened.

<h1>Can I talk to you about random stuff, tell you about my day, ask for an advice or just be friends?</h1>
Yes, PLEASE! I love meeting people here ♥
</div>

</div>

<div id="uptownfunk"><a href="http://castiiel.tumblr.com">theme by castiiel</a></div>

</body>
</html>