theme pack 1 faq

<!--
theme pack #1 - faq by Sabina (briqhter/cutiephil)
please do not remove the credit
-->

<!DOCTYPE html>
<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">

/* fonts */
@font-face { font-family:"bb"; src: url('https://dl.dropboxusercontent.com/s/mw5tqnd88mxflxw/Saniretro.ttf');}

/* basics1 */
body {
font-family:calibri;
font-size:11px;
line-height:12px;
color:#888;
background-color:#ffffff;
background-image:url(http://static.tumblr.com/bgzjy3u/0Zznfopt2/tumblr_inline_mx3lrqyox41r8f9nah.gif); /* replace this with your background image */
background-attachment:fixed;
background-repeat:repeat;
}

a:link, a:active, a:visited{
color:#888;
text-decoration:none;
}

a:hover {
color: #888;
}

img {
border:0;
max-width:100%;
}

#wrap{
margin:auto;
position: absolute;
overflow:hidden;
width:880px;
height:600px;
top: 0; left: 0; bottom: 0; right: 0;
}

::-webkit-scrollbar {width: 2px; height: 4px; background: #e2ddce; }
::-webkit-scrollbar-thumb { background-color: #a9ccd4; -webkit-border-radius: 1ex; }

/* basics2 */

#content {
z-index:10;
position:fixed;
overflow:hidden;
margin-top:0px;
margin-left:400px;
width:460px;
height:600px;
background-color:#ffffff;
background-image:url(http://static.tumblr.com/bgzjy3u/0Zznfopt2/tumblr_inline_mx3lrqyox41r8f9nah.gif); /* replace this with your background image */
background-attachment:fixed;
background-repeat:repeat;
}

#sidebar {
position:fixed;
margin-left:0px;
margin-top:0px;
width:440px;
height:600px;
background:#fff;
}

#sidebar img{
height:600px;
width:440px;
overflow:hidden;
}

#backbar {
z-index:1;
position:fixed;
margin-left:440px;
margin-top:0px;
width:440px;
height:600px;
background:#fff;
}

#backbar img{
height:600px;
width:440px;
overflow:hidden;
}

#qutitle{
z-index:3;
position:fixed;
margin-top:5px;
margin-left:12px;
width:420px;
color:#d1c293;
font-family:bb;
font-size:40px;
line-height:30px;
text-transform:uppercase;
text-align:right;
}

#qutitleshadow{
z-index:2;
position:fixed;
margin-top:3px;
margin-left:15px;
width:420px;
color:#e2ddce;
font-family:bb;
font-size:40px;
line-height:30px;
text-transform:uppercase;
text-align:right;
}

#box1 {
position:fixed;
margin-top:30px;
margin-left:0px;
width:460px;
height:290px;
background:white;
font-size:11px;
}

#qu {
position:fixed;
overflow-y:scroll;
margin-top:10px;
margin-left:10px;
width:440px;
height:270px;
background:white;
text-align:left;
color:#888;
}

#n1 {
float:left;
margin-top:4px;
margin-left:4px;
width:420px;
height:20px;
background:#a9ccd4;
color:white;
line-height:20px;
padding-left:10px;
transition: all 0.1s ease-out;
-o-transition-transition: all 0.1s ease-out;
-webkit-transition: all 0.1s ease-out;
-moz-transition: all 0.1s ease-out;
}

#n2 {
float:left;
margin-top:4px;
margin-left:4px;
width:418px;
height:18px;
background:white;
color:#888;
line-height:18px;
padding-left:10px;
border:1px solid #e2ddce;
transition: all 0.1s ease-out;
-o-transition-transition: all 0.1s ease-out;
-webkit-transition: all 0.1s ease-out;
-moz-transition: all 0.1s ease-out;
}

#box2 {
position:fixed;
margin-top:320px;
margin-left:0px;
width:450px;
height:200px;
background:white;
font-size:11px;
padding:5px;
}

#btitle {
z-index:3;
position:fixed;
margin-top:540px;
margin-left:12px;
width:440px;
height:100px;
color:#d1c293;
font-family:bb;
font-size:80px;
line-height:60px;
text-transform:uppercase;
}

#btitleshadow{
z-index:2;
position:fixed;
margin-top:537px;
margin-left:16px;
width:440px;
height:100px;
color:#e2ddce;
font-family:bb;
font-size:80px;
line-height:60px;
text-transform:uppercase;
}

#credit {
z-index: 4783;
position:fixed;
bottom:10px;
right:10px;
background:white;
border: 1px solid #eee;
padding: 3px;
font-family: times;
font-size: 10px;
line-height: 15px;
font-style:italic;
transition: all 0.6s ease-out;
-o-transition-transition: all 0.4s ease-out;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
}

#credit a{
color:#bbb;
}

#credit:hover{
opacity: 2;
transition: all 0.6s ease-out;
-o-transition-transition: all 0.4s ease-out;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
}

{CustomCSS}

</style>

<title>Frequenly Asked Questions</title>
<link rel="shortcut icon" href="{Favicon}" />

</head>

<body>

<div id="credit"><a href="http://cutiephil.tumblr.com">CP</a></div>

<div id="wrap">

<div id="sidebar">
<img src="http://41.media.tumblr.com/e1feef3666c2cc0680b0a82f3260235d/tumblr_mse83dQLJl1s4h64eo1_1280.png"><!--put the url of the image you want here-->
</div>
<div id="backbar">
<img src="http://41.media.tumblr.com/e1feef3666c2cc0680b0a82f3260235d/tumblr_mse83dQLJl1s4h64eo1_1280.png"><!--put the url of the image you want here-->
</div><!--sidebar-->

<div id="content">

<!-----change (//general) to anything you want as the first title------>
<div id="qutitle">//curious george</div>
<div id="qutitleshadow">//curious george</div>

<!----change (faq and ask//) to anything you want as the main title------>
<div id="btitle">faq and ask//</div>
<div id="btitleshadow">faq and ask//</div>

<div id="box1">
<div id="qu">

<!------------------------------------------------------------------
replace (Q: this is a question) and (A: this is an answer) with your own.

the lines with (n1) is the question and (n2) is the answer.
------------------------------------------------------------------->
<div id="n1">Q: this is a question</div>
<div id="n2">A: this is an answer</div>
<div id="n1">Q: this is a question</div>
<div id="n2">A: this is an answer</div>
<div id="n1">Q: this is a question</div>
<div id="n2">A: this is an answer</div>
<div id="n1">Q: this is a question</div>
<div id="n2">A: this is an answer</div>
<div id="n1">Q: this is a question</div>
<div id="n2">A: this is an answer</div>
<div id="n1">Q: this is a question</div>
<div id="n2">A: this is an answer</div>
<div id="n1">Q: this is a question</div>
<div id="n2">A: this is an answer</div>
</div>
</div>

<!----replace (YOURUSERNAME) with your own url------>
<div id="box2">
<iframe frameborder="0" scrolling="no" width="450px" height="190px" src="http://www.tumblr.com/ask_form/YOURUSERNAME.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form">
</div>

</div><!--content-->

</div><!--wrap-->
</body>

</html>