FAQ #2 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}">

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

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

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
<script>
(function($){
$(document).ready(function(){
$("[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:90,
tip_fade_speed:600,
attribute:"title"
});
});
})(jQuery);
</script>

<style type="text/css">

#s-m-t-tooltip {
padding:7px;
padding-right: 5px;
padding-top: 4px;
padding-bottom: 4px;
margin-left:20px;
margin-top: 0px;
background: #fff; /* change the background color */
border:1px solid #000; /* change the border color */
font-family: calibri; /* change the font */
font-size:8px; /* change the font size */
letter-spacing:1.5px; /* change the letter spacing */
text-transform:uppercase; /* can be uppercase, lowercase, none*/
color:#000; /* change the text color */
z-index:999999999999999999999999999999999999;
border-radius: 3px;
}

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

display: none;

}

body {
    background-image:url("https://farm6.staticflickr.com/5512/9319373740_02243839ce_o.jpg");
    background-size:cover;
    background-attachment: fixed;
    background-position: bottom left;
}

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

.header{
    border-bottom: 1px solid #000;
    background:rgba(222,222,222,0.2);
    text-align: center;
    padding: 25px;
    padding-top: 35px;
    padding-bottom: 15px;
    font-family: 'Lato', sans-serif;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 300;
}

a {
    text-decoration: none;
    margin-top: 10px;
    display: inline;
}

.t1 {
    font-family: 'Lato', sans-serif;
    font-size: 28px;
    font-weight: 300;
    margin-top: -10px;
    text-transform: none;
    letter-spacing:1px;
    margin-bottom:20px;
}

h1 {
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    font-weight: 300;
    margin-top:23px;
    margin-bottom: 8px;
    line-height: 140%;
    padding: 10px 15px;
    margin-left: -10px;
    margin-right: -10px;
    background:rgba(222,222,222,0.3);
}

.cont {
    width: 850px;
    border: 4px double #000;
    margin: auto;
    margin-top: -210px;
    top:50%;
    left:50%;
    margin-left:-425px;
    position:fixed;
    height: 420px;
    display: block;
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    color: #000;
    font-weight:300;
}

.cont a {
    color: #000;
    text-decoration: underline;
}

.left {
    width: 339px;
    border-left: 1px solid #000;
    height: 400px;
    padding: 0px 30px 20px;
    background:rgba(225,225,225,0.3);
    position: absolute;
    margin-left: 450px;
    letter-spacing: 0.6px;
    overflow: auto;
    line-height:140%;
}

.right {
    width: 450px;
    height: 420px;
    background:rgba(225,225,225,0.3);
    position: absolute;
}

#ask {
    background-color:transparent;
    margin:25px;
    height: 265px;
    overflow:hidden;
}

#submit {
    background-color:transparent;
    margin:25px;
    height: 265px;
    overflow:scroll;
    display:none;
}

#links a {
    text-decoration: none;
    margin: 10px;
    display: inline;
    font-weight:bold;
}

#uptownfunk a {
    width:10px;
    height:10px;
    background:#fff;
    opacity:.5;
    position:fixed;
    bottom:10px;
    right:10px;
    border:solid 1px #000;
}

</style>
</head>
<body>

<div class="cont">

<div class="right">

<div class="header">
<div class="t1">Ask me something!</div>
<div id="links">
<a href="/">go back</a> //
<a class="ask" style="cursor:help!Important;">ask</a> //
<a class="submit" style="cursor:help!Important;">submit</a> //
<a href="/">link</a>
</div><!--links-->
</div><!--header-->

<div id="askbox">
<iframe frameborder="0" border="0" scrolling="no" width="400px" height="265" allowtransparency="true" opacity="1" src="http://www.tumblr.com/ask_form/{Name}.tumblr.com" style="margin:25px"></iframe>
</div>

<div id="submit"><iframe frameborder="0" border="0" scrolling="no" width="398px" height="535px" allowtransparency="true" src="http://www.tumblr.com/submit_form/{Name}.tumblr.com"></iframe>
</div>

</div><!--right-->

<div class="left">

<h1>This is how you wrap a question</h1>
This is an answer. <b>Bold</b>, <i>italics</i>, <s>strike</s> and <u>underline</u>.

<h1>Who took your background photo?</h1>
<a href="https://www.flickr.com/photos/pedromoriyama/">This wonderful artist.</a>

<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><!--left-->

</div><!--cont-->

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

</body>
</html>