Frequently Asked Questions #1

<!---
Code by slyytherinsam

Dont remove the credit, and don't redistribute, steal, or claim as your own. Other than that, go nuts!

If you have any questions at all, please come ask!
-->

<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="{Favicon}" />
<title>{Title}</title>

<!--Tooltip javascript-->
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
<script>
   (function($){
       $(document).ready(function(){
           $("[title]").style_my_tooltips({
               tip_follows_cursor:true,
               tip_delay_time:200,
               tip_fade_speed:300
           }
               );
       });
   })(jQuery);
</script>

 <!--Special fonts-->
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans|Tangerine' rel='stylesheet' type='text/css'>


<style type="text/css">

/*Tooltips style*/
#s-m-t-tooltip{
max-width:300px;
background:#fff; /*change the background color here*/
border:3px double #000;
color:#000; /*change the font color here*/
z-index:9999999;
font-size:10px;
text-transform:lowercase;
}

/*Scrollbar style*/
::-webkit-scrollbar {
    width: 2px;
    height:4px;
    background:transparent;
}
::-webkit-scrollbar-thumb {
    background-color:#acccc6; /*Change the scrollbar color here*/
}


body {
background: #fff;
position:relative;
margin:40px auto;
color:#090909;      /*Change the general font color here*/
font-family:calibri;
font-size:11px;
text-align:justify;
overflow:scroll;
}

a {
    text-decoration:none;
    color:#444;      /*Change the link color here*/
    padding-left:1px;
    padding-right:1px;
}

/*Transition Speeds*/
*, *:hover {-webkit-transition: all 0.7s ease-in;-moz-transition: all 0.7s ease-in;-o-transition: all 0.7s ease-in;-webkit-transition: all 0.7s ease-out;-moz-transition: all 0.7s ease-out;-o-transition: all 0.7s ease-out;}


#container {
    width:60%;
    margin-left:20%;
    height:auto;
    overflow:scroll;
}

#title {
    width:100%;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    font-size:44px;
    margin-bottom:8px;
    font-family:'Tangerine'; /*This is the special font for the title. It won't show up in preview, but it will show up on the actual page */
}

#toplinks {
    width:100%;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}

#toplinks a {
    font-size:11px;
    text-transform:lowercase;
    font-family:'Josefin Sans', calibri;
    padding-left:5px;
    padding-right:5px;
    color:#bbb;     /*Change the color of the navigation links here*/
    font-weight:bold;
    margin-left:5px;
    margin-right:5px;
}

#toplinks a:hover {
    color:#c3848e;  /*Change the color of the navigation links on hover*/
    background-color:#fff;
}

#faqbox {
    width:47%;
    float:left;
    height:auto;
    margin-top:13px;
    margin-left:3px;
    border:5px solid #fff;
}

#faqbox:hover {
    border:5px solid #acccc6; /*Change the border when you hover over the questions*/
}

.questions {
    font-size:15px;
    font-style:italic;
    font-family:times;
    padding-bottom:1px;
    border-bottom:2px double #c3848e; /*Change the border between questions and answers*/
    margin-top:2px;
    margin-bottom:2px;
    margin-right:3px;
}

.answers {
    font-size:13px;
    color:#888;
    margin-bottom:18px;
    margin-right:3px;
}

#askbox {
    width:45%;
    float:right;
    height:auto;
    margin-top:3px;
    margin-right:20px;
}

#ask_form {
    border:5px solid #fff;
}
#ask_form:hover {
    border:5px solid #acccc6; /*Change the border when you hover over the ask box*/
}

#submitbox {
    width:45%;
    float:right;
    height:auto;
    margin-top:3px;
    margin-right:20px;
}

#submit_form {
    border:5px solid #fff;
}
#submit_form:hover {
    border:5px solid #acccc6; /*Change the border when you hover over the submit box*/
}



/*Don't mess with the credit, seriously it's tiny, it won't even bother you*/
#credit {bottom:3px;position:fixed; right:-100px;font-size:15px;}
#credit:hover {right:5px;}


</style>
</head>

<body>

<div id="container">

<div id="title">Frequently Asked Questions</div>

<div id="toplinks">
<!--You can put as many extra links here as you want-->
    <a href="/">Home</a>
    <a href="/URL">Link 1</a>
    <a href="/URL">Link 2</a>
    <a href="/URL">Link 3</a>
    <a href="http://tumblr.com/dashboard">Dash</a>
</div>

<div id="faqbox">
<div class="questions">Question 1</div>
<div class="answers">Answer 1</div>

<div class="questions">Question 2</div>
<div class="answers">Answer 2</div>

<div class="questions">Question 3</div>
<div class="answers">Answer 3</div>

<div class="questions">Question 4</div>
<div class="answers">Answer 4</div>

<div class="questions">Question 5</div>
<div class="answers">you can put</div>

<div class="questions">Question 6</div>
<div class="answers">as many</div>

<div class="questions">Question 7</div>
<div class="answers">questions here</div>

<div class="questions">Question 8</div>
<div class="answers">As you want</div>
<!--If you want more questions, just copy/paste the templates above-->
</div>

<div id="askbox">
    <center><p><p>
<iframe frameborder="0" height="250" id="ask_form" scrolling="no"
src="http://www.tumblr.com/ask_form/YOURURLHERE.tumblr.com"
width="100%"></iframe><!--[if IE]><mce:script type="text/javascript"><!document.getElementById('ask_form').allowTransparency=true; // —><!--[endif]--></center>
</div>
<!--Don't forget to replace YOURURLHERE with your actual url above, otherwise the askbox won't work!-->



<!--For some people, the submit box won't show up on preview. Don't worry, it's there. Open the page in a new tab and it'll work-->
<div id="submitbox">
   <center><p><p>
<iframe frameborder="0" scrolling="no" width="100%" height="330" src="http://tumblr.com/submit_form/YOURURLHERE.tumblr.com" style="overflow:hidden;" id="submit_form"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('submit_form').allowTransparency=true;</script><![endif]--></center>
</div>
<!--Don't forget to replace YOURURLHERE with your actual url above, otherwise the submitbox won't work!-->

</div>
<!--again, don't mess with the credit-->
<div id="credit"><a href="http://slyytherinsam.tumblr.com">&#9651;
<span style="font-size:10px;padding-left:15px;">code by slyytherinsam</span></a></div>

</body>

</html>