Network: Unfold

<!--

    NETWORK PAGE: UNFOLD
    by acuite

- you can use this page for characters / ships / etc
- don't steal this pls
- enjoy, ilu (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

- @acuite for more themes

-->

<!DOCTYPE html>
<html>
<head>

<title>{Title}</title>
<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>
<link rel="shortcut icon" href="{Favicon}" />

<link href='//fonts.googleapis.com/css?family=Open+Sans:300,400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<style type="text/css">

::-webkit-scrollbar-thumb {background:#eee;}
::-webkit-scrollbar {width:5px;height:5px;background:#f8f8f8;}

 /* General */

body {
    margin:0px;
    font-family:'Open Sans',Helvetica,Arial,sans-serif;
    color:#555;
    font-size:9px;
    background:#f8f8f8;
}

a:hover {color:#222;}
a {
    color:#999;
    text-decoration:none;
    transition: 0.5s ease;
    -o-transition: 0.5s ease;
    -moz-transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
}

 /* Containers */

#c{position:fixed;right:30px;bottom:30px;}
#center {width:786px;margin:30px auto;text-align:center;font-size:0px;}
.box,.header {
    display:inline-block;
    vertical-align:top;
    margin:30px;
    background:#fff;
    border:1px solid #eee;
}

 /* Boxes */

.box {font-size:9px;width:200px;}
.pic img {width:100%;display:block;}
.pic {padding:4px;}

.info p{margin:0px;}
.info {
    padding:15px;
    color:#888;
    text-align:left;
    line-height:165%;
    font-weight:300;
    border-top:1px solid #eee;
}

h1 a{color:#555;}
h1 {
    margin:0px 0px 10px;
    display:inline-block;
    color:#555;
    border-bottom:1px solid #555;
    font-weight:400;
    font-size:8px;
    letter-spacing:0.75px;
}

 /* Header */

.header{margin:30px 60px;width:400px;padding:15px;}
.header h2{
    margin:0px;
    color:#888;
    font-weight:300;
    letter-spacing:1.5px;
    font-size:12px;
}

.links a{margin:0px 7px;}
.desc {
    padding:10px;
    margin:10px;
    font-size:9px;
    border-top:1px solid #eee;
    border-bottom:1px solid #eee;
}

 /* Common */

.links, #c {letter-spacing:1px;font-size:8px;color:#999;}
h1, h2, #c, .links{text-transform:uppercase;}
img {display:block;}

</style>
</head>
<body>

<div id="center">

<!-- Header Start -->
<div class="header">
<h2>network page</h2><!-- Title -->

<!-- Put a little description here, feel free to delete tho -->
<div class="desc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel rutrum est, vel consequat massa. Proin in lacinia ex. Aliquam tempor eleifend sem non egestas.
</div>

<div class="links">
    <a href="/">index</a> /
    <a href="/ask">enquire</a> /
    <a href="http://acuite.tumblr.com">credit</a>
</div>
</div>
<!-- Header End -->


<!-- Example Start -->
<div class="box">
<div class="pic">
    <img src="http://i.imgur.com/A3cw9r6.png"/><!-- Image URL -->
</div>

<div class="info">
<h1>ship name</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel rutrum est, vel consequat massa. Proin in lacinia ex. Aliquam tempor eleifend sem non egestas.</p>
</div>
</div>
<!-- Example End -->


<!-- Example Start -->
<div class="box">
<div class="pic">
    <img src="http://i.imgur.com/A3cw9r6.png"/><!-- Image URL -->
</div>

<div class="info">
<h1>ship name</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel rutrum est, vel consequat massa. Proin in lacinia ex. Aliquam tempor eleifend sem non egestas.</p>
</div>
</div>
<!-- Example End -->


</div>
<div id="c"><a href="http://acuite.tumblr.com">acuite</a></div>
</body>
</html>