Page Theme #10: FAQ II

<!---
                     _______
|\  /|    / \    | \    |    |  |  |\  /|   ___
| \/ |   /___\   |  |   |    |--|  | \/ |  |__
|    |  /     \  | /    |    |  |  |    |  ___|


if you need any help editing this let me know n i'll try to help

Main Blog: http://madpal.tumblr.com/
Theme Blog: http://madthms.tumblr.com/

my theme blog also has lots of resources and stuff if u like coding!

Rules:
- no removing credit
- no moving credit to a different page
- no taking elements from my themes n putting them in someone elses or vice versa

thanks for using my theme!

if u wanna find ur favorite colors in html go here:
http://www.colorpicker.com/

--->


<html>
<head>
<link rel="shortcut icon" href="{Favicon}">
<!---change {favicon} above to a url of a small pic to change the lil icon in the tab of ur page--->
<link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" />

<title>{title}</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
<script>
    (function($){
        $(document).ready(function(){
            $("[title]").style_my_tooltips();
        });
    })(jQuery);
</script>


<style type="text/css">

/***************SCROLLBAR***********/
::-webkit-scrollbar{
    height: 1px;
    width: 1px;
    -webkit-border-radius: 0px;
    background:transparent;
}

::-webkit-scrollbar-thumb{
    background:transparent;}
::-webkit-scrollbar-track{
    background:transparent;
 }

/************BODY***********/
body {
    font-family: arial;
    color:#fff; /*color of font that isn't links/title */
    margin: 0px;
    background-color:#183344;/*background color of everything*/
    background-image:url(''); /*you can put an image url here!*/
    background-position:top left;
    background-repeat:no-repeat;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
}


/*************LINKS************/
a {text-decoration: none;color:#fff;letter-spacing:2px;}

/*this is the thing that pops up when you hover over a link with a title*/
#s-m-t-tooltip {
    position:relative;
    overflow:hidden;
    z-index:99999999999999;
    max-width:100px;
    margin:20px;
    background:#183344; /*background color of the thing that pops up when you hover over a link with a title*/
    padding:5px;
    color:#fff; /*color of font*/
    border:1px solid #fff; /*color of border on link title*/
    text-align:center;
    font-size:15px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
}

#all {
    left:42%;
    top:100px;
    position:fixed;
}

#title {
    font-family:arial;
    font-size:40px;
    letter-spacing:2px;
    color:#fff; /*color of title*/
    cursor:help;
    max-width:420px;
    -moz-transition-duration:.6s;
    -webkit-transition-duration:.6s;
    -o-transition-duration:.6s;
}
    .line {
        border-bottom:2px solid #fff;/*side border of title color*/
        width:130px;
        margin-top:25px;
        margin-left:-140px;
        position:absolute;
        -moz-transition-duration:.6s;
        -webkit-transition-duration:.6s;
        -o-transition-duration:.6s;
    }

#title:hover .line {width:200px;margin-left:-210px;}
#title:hover {padding-left:70px;}
#title a{cursor:help;}

#holder {
    border-left:2px solid #fff; /*side border color*/
    padding:30px 0px 1px 20px;
    width:540px;
    margin-left:-160px;
    height:415px;
}


#box {
    margin-bottom:20px;
    padding:20px;
    background:transparent;/*change transparent to a color if u want*/
    border:1px solid #fff; /*border color of links*/
    width:100px;
    height:17px;
    font-size:15px;
    text-align:center;
    text-transform:uppercase;
    -moz-transition-duration:.4s;
    -webkit-transition-duration:.4s;
    -o-transition-duration:.4s;
}

#box:hover {background:#fff;/*bg of links on hover*/
border:1px solid #183344/*border of links on hover*/;-moz-transition-duration:.4s;-webkit-transition-duration:.4s;-o-transition-duration:.4s;}
#box:hover a {color:#183344;/*color of links on hover*/-moz-transition-duration:.4s;-webkit-transition-duration:.4s;-o-transition-duration:.4s;}

#box2 {
    position:absolute;
    margin-left:165px;
    margin-top:-316px;
    width:330px;
    height:259px;
    padding:20px;
    border:1px solid #fff; /*border color*/
    padding-top:15px;
}


#box3 {
    position:relative;
    border:1px solid #fff; /*border color*/
    padding:20px;
    width:496px;
    margin-bottom:20px;
    margin-top:30px;
    height:25px;
    overflow:scroll;
    background-color:#183344;/*color box3 background*/
    -moz-transition-duration:.7s;
    -webkit-transition-duration:.7s;
    -o-transition-duration:.7s;
}
    #box3:hover {
        height:350px;
        margin-top:-317px;
        -moz-transition-duration:.7s;
        -webkit-transition-duration:.7s;
        -o-transition-duration:.7s;
    }

#box3 h3 {
    margin:0px;
    text-align:center;
    opacity:1;
    -moz-transition-duration:.7s;
    -webkit-transition-duration:.7s;
    -o-transition-duration:.7s;
}
    #box3:hover h3 {
        opacity:0;
        -moz-transition-duration:.7s;
        -webkit-transition-duration:.7s;
        -o-transition-duration:.7s;

    }

#box3 h4 {
    margin:0px;
    line-height:20px;
    opacity:0;
    -moz-transition-duration:.7s;
    -webkit-transition-duration:.7s;
    -o-transition-duration:.7s;
}
    #box3:hover h4 {
        opacity:1;
        -moz-transition-duration:.7s;
        -webkit-transition-duration:.7s;
        -o-transition-duration:.7s;
    }

#box3 p {
    margin:10px;
    margin-bottom:25px;
    text-align:justify;
    opacity:0;
    -moz-transition-duration:.7s;
    -webkit-transition-duration:.7s;
    -o-transition-duration:.7s;
}
    #box3:hover p {
        opacity:1;
        -moz-transition-duration:.7s;
        -webkit-transition-duration:.7s;
        -o-transition-duration:.7s;
    }

#plus {
    margin-left:-166px;
    margin-top:-26px;
    position:fixed;
}

</style>

</head>

<body>

<div id="all">

<div id="title">
<div class="line"></div>
<a href="/" title="home">your only hope is evil</a>
</div>

<div id="plus"><a href="http://madthms.tumblr.com/" title="theme"><img src="http://www.stockpodium.com/images/plus_icon_disabled.gif" width="14px" height="14px"></a></div>

<div id="holder">
<div id="box"><a href="/">link</a></div>
<div id="box"><a href="/">link</a></div>
<div id="box"><a href="/">link</a></div>
<div id="box"><a href="/">link</a></div>

<div id="box2">
<!---REPLACE "UR URL" WITH URS OR ELSE IT WON'T WORK--->
<iframe frameborder="0" height="260" id="ask_form" scrolling="no" src="http://www.tumblr.com/ask_form/UR URL.tumblr.com" width="100%" style="background-color: transparent; overflow: hidden;"></iframe>
</div>

<div id="box3">

<h3>frequently asked questions</h3>

<h4>what is google?</h4>
<p>the thing u should use instead of my askbox</p>

<h4>question</h4>
<p>answer</p>

<h4>question?</h4>
<p>answer</p>

<h4>question?</h4>
<p>answer</p>

<h4>can you put as many questions as you want?</h4>
<p>yes!</p>

<h4>question?</h4>
<p>answer</p>

</div>


</div>

</div>

</body>
</html>