Hiatus Theme

<!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">
<head>

<!--
HIATUS THEME BY ALLIECATISALLAMA/FERNANDOSSPECTACLES
-->

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

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

<link href='http://fonts.googleapis.com/css?family=Lora:400,400italic' rel='stylesheet' type='text/css'>

<meta name="color:text" content="#838282"/>
<meta name="color:link" content="#757171"/>
<meta name="color:title" content="#757171"/>
<meta name="color:link hover" content="#dadada"/>

    <meta name="text:link 1" content="link 1" />
    <meta name="text:link 1 url" content="/" />
    <meta name="text:link 2" content="link 2" />
    <meta name="text:link 2 url" content="/" />
    <meta name="text:link 3" content="link 3" />
    <meta name="text:link 3 url" content="/" />
    <meta name="text:yoururl" content="this is your url" />


<style type="text/css">
body {
    font:11px calibri, century gothic, arial, sans-serif;
    color:{color:text};
    margin:0px;padding:0px;
}

a {
    text-decoration:none;
    color:{color:link};
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    -o-transition: all 0.7s ease;
}

a:hover {
    text-decoration:none;
    color:{color:link hover};
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

#container {
    width:500px;
    margin:80px auto;
}

.box1 {
    width:290px;
    height:190px;
    padding:5px;
    margin-left:150px;
    background:url(http://25.media.tumblr.com/45fb1aad72c0dad093e5e8b001981a71/tumblr_mhmhgrs8sd1s54ovso1_r1_400.png);
}

.box2 {
    width:450px;
    height:190px;
    padding:5px;
    margin-left:430px;
    margin-top:-60px;
}

.info {
    background:#ffffff;
    width:270px;
    height:170px;
    padding:10px;
    opacity:0;
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    transition: all 0.8s ease;
}

.info2 {
    background:#ffffff;
    width:430px;
    height:170px;
    padding:10px;
    opacity:1;
}

.box1:hover .info{
    opacity:1;
}


.top {
    margin:0 0 10px 150px;
}

.title {
    position:absolute;
    font-style:italic;
    width:130px;
    height:150px;
    margin:50px 0 0 10px;
}


.title h2 {
    font-family:'century gothic';
    text-transform:uppercase;
    letter-spacing:-1px;
    font-size:18px;
    color:{color:title};
    text-align:center;
    margin-left:-20px;
    margin-bottom:-5px;
}

#theme {
position: fixed;
bottom: 0px;
right: 0px;
font-family: Arial;
font-size: 8px;
text-transform: uppercase;
text-align: right;
letter-spacing: 1px;
}

</style>
</head>

<body>
<div id="container">
    <div class="title">
        <h2><em>{title}</em></h2><br>

    </div>

        <div class="box1">
            <div class="info"><center><b>{description}</em></b>
            </center></div>
        </div>
    </div>


        <div class="box2">
            <div class="info2"><iframe frameborder="0" scrolling="no" width="440" height="149" src="http://www.tumblr.com/ask_form/{text:yoururl}.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe>
</div></div>
        </div>
    </div>

<div id="theme"></a><a href="http://fernandosspectacles.tumblr.com/"><img src="http://i1065.photobucket.com/albums/u386/AHT_Livingston/Untitled-2.png?t=1344121641"></a></div>

</div>
</body>
</html>