Ask Page Theme

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">

<!-- --------------------------------------------------------------------

     Ask Page Theme
     Made by Unzo
     http://unzo.tumblr.com/

-------------------------------------------------------------------- -->

<head>

<title>{Title}</title>

<link rel="shortcut icon" href="{Favicon}">

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


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


<script src="http://static.tumblr.com/kjtbii3/y9Wmz7ys3/basics.js">
</script>


<style type="text/css">


#tumblr_controls{
    display:none !important;
}


body{
    background:#fdfdfd;
    color:#9c9c9c;

    font-family:'Georgia', sans-serif;
    font-size:11px;
    line-height:150%;

    cursor:default;
}

a{
    color:#8394a5;

    text-decoration:none;

    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

a:hover{
    color:#eee;

    font-style:none;
    text-decoration:none;
}


#container{
    overflow:hidden;
    position:fixed;

    top:50%;
    left:50%;

    width:500px;
    height:290px;

    margin:-200px 0 0 -271px;
    padding:20px;

    background:white;

    border:1px solid #eee;
}


.title{
    padding:10px;

    color:#8394a5;

    font-size:23px;
    letter-spacing:1px;
    text-align:center;
}


.nav{
    margin:0 0 15px 0;
    padding:5px 0 6px;

    text-align:center;

    border-bottom:1px solid #eee;;
}

.nav a{
    margin:0 8px;

    font-family:'Calibri', sans-serif;
    font-style:normal;
    text-transform:uppercase;
    letter-spacing:1px;
}


#content{
    width:480px;
    height:0;

    margin:0 10px;

    font-family:'Calibri', sans-serif;
    font-size:12px;
    text-align:justify;

    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
}


#ask{
    opacity:0;
    padding:5px 0;

    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
}

#container:hover #ask{
    opacity:1;
    margin-top:-190px;

    -webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
}

#container:hover #content{
    opacity:0;
    margin-top:190px;

    -webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
}


</style>
</head>

<body>

<div id="container">

<div class="title">
Message
</div>

<div class="nav">
<em>
<a href="/">← Return</a>
<a href="/">Link 1</a>
<a href="/">Link 2</a>
<a href="/">Link 3</a>
<a href="/">Link 4</a>
<a href="/">Link 5</a>
</em>
</div>

<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.
</p>

<p>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse sed ligula. Sed volutpat odio non turpis gravida luctus. Praesent elit pede, iaculis facilisis, vehicula mattis, tempus non, arcu.
</p>
</div>

<br>

<div id="ask">
<iframe id="ask_form" src="http://www.tumblr.com/ask_form/{name}.tumblr.com" frameborder="0" scrolling="no" width="500" height="200"></iframe>
</div>

<br>

</div>

</body>
</html>