All: Blush

<!--

    ALL IN ONE PAGE: BLUSH
    by acuite

- pages included: about, ask, links, tags, faq, blogroll
- recently updated!
- don't steal this pls
- enjoy, ilu (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

- @acuite for more themes

-->

<!DOCTYPE html>
<html>
<head>

<title>Navigation</title>
<link rel="shortcut icon" href="{Favicon}" />
<script src="http://static.tumblr.com/dxh5xq2/CZJn8ju09/jquery-1.9.1.min.js"></script>
<script src="http://static.tumblr.com/dxh5xq2/b40n8ju0e/modernizr.js"></script>
<script src="http://static.tumblr.com/dxh5xq2/v6Gn8ju1e/tabs.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
<script>
   (function($){
       $(document).ready(function(){
           $("[title]").style_my_tooltips({
               tip_follows_cursor:true,
               tip_delay_time:200,
               tip_fade_speed:300
           }
               );
       });
   })(jQuery);
</script>

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

::-webkit-scrollbar {height:2px;width:2px;background:#fff;}
::-webkit-scrollbar-thumb {background:#eee;}

/* General */

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

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

#c{position:fixed;bottom:30px;right:30px;}

/* Containers */

#center {width:492px;margin:130px auto 0px;}
ul#tab {list-style-type:none;margin:0px;padding:0px;}
ul#tab li.active {display:block;}
ul#tab li {
    display:none;
    width:450px;
    max-height:450px;
    overflow:hidden;
    padding:20px;
    background:#fff;
    border:1px solid #eee;
}

/* Header */

ul#tabs {
    list-style-type:none;
    margin:0px 0px 25px;
    width:100%;
    padding:0px;
    text-align:center;
}

ul#tabs li.active {color:#222;}
ul#tabs li {
    display:inline-block;
    margin:0px 15px;
    color:#aaa;
    cursor:pointer;
}

/* About */

.image img{height:100%;}
.image{float:left;height:213px;border:1px solid #eee;}
.desc p {margin-top:0px;}
.desc {
    padding:0px 20px;
    text-align:justify;
    line-height:175%;
    overflow-y:scroll;
    letter-spacing:0.2px;
    height:215px;
}

.quote {
    margin-top:20px;
    padding:20px;
    border-top:1px solid #eee;
    line-height:15px;
    font-size:11px;
    font-weight:300;
    line-height:175%;
}

/* Contact */

.disclaimer {
    line-height:150%;
    margin-top:10px;
    padding:10px 10px 0px;
    border-top:1px solid #eee;
}

/* Tags */

h2{
    margin:0px 0px 5px;
    font-size:9px;
    text-transform:uppercase;
    font-weight:400;
    letter-spacing:0.5px;
    color:#222;
}

.tag_hold {
    text-align:center;
    font-size:0px;
    display:block;
    margin:0px -10px -10px 0px;
}

.tags_box {
    display:inline-block;
    vertical-align:top;
    width:133px;
    margin:0px 10px 10px 0px;
    text-align:left;
    font-size:9px;
    padding:0px 0px 10px 10px;
    border-bottom:1px solid #eee;
}

.tags a {display:block;}
.tags {line-height:175%;max-height:130px;overflow:auto;}

/* Blogroll */

.blogroll {overflow:auto;height:298px;opacity:1;font-size:0px;}
.blogroll:hover .box {opacity:0.8;-webkit-filter: grayscale(1);}
.blogroll:hover .box:hover {opacity:1;-webkit-filter: grayscale(0);}
.box img{width:100%;}
.box {
    display:inline-block;
    vertical-align:top;
    margin:0px 10px 10px 0px;
    height:34px;
    width:34px;
    transition: 0.5s ease;
    -o-transition: 0.5s ease;
    -moz-transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
}

/* Links */

.links {font-size:0px;text-align:center;}
.links a:hover {background:#fff;}
.links a {
    display:inline-block;
    vertical-align:top;
    padding:15px;
    height:24px;
    line-height:24px;
    margin:5px;
    font-size:9px;
    text-align:left;
    letter-spacing:0.5px;
    width:185px;
    text-transform:capitalize;
    background:#eee;
}

/* FAQ */

.faq_hold {
    text-align:center;
    font-size:0px;
    display:block;
    margin:0px -10px 0px 0px;
}

blockquote {
    margin:5px 5px 0px;
    padding:1px 7px;
    color:#888;
    font-size:9px;
    border-left:1px solid #eee;
}

.faq {
    display:inline-block;
    vertical-align:top;
    width:200px;
    text-align:left;
    padding:10px;
    margin:0px 10px 0px 0px;
    border-bottom:1px solid #eee;
}

/* Etc */

#s-m-t-tooltip,#c,ul#tabs li {
    font-size:8px;
    letter-spacing:1px;
    text-transform:uppercase;
}

#s-m-t-tooltip{
    max-width:300px;
    margin:15px;
    z-index:9999;
    color:#fff;
    background:#222;
    padding:6px;
}

</style>
</head>
<body>
<div id="center">

<!-- Start Header -->
<ul id="tabs">
    <li class="active">about</li>
    <li>enquire</li>
    <li>Links</li>
    <li>Tags</li>
    <li>faq</li>
    <li>blogroll</li>
</ul>
<!-- End Header -->


<ul id="tab">


<!-- Start Bio --><li class="active">


<!-- image goes here -->
<div class="image"><img src="http://36.media.tumblr.com/f3578358cd14245442624d9ed49692e2/tumblr_n4lc484has1s3vsdho1_500.jpg"/></div>

<!-- start description -->
<div class="desc">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacus erat, placerat mattis semper vel, pharetra eget nisl. Vestibulum cursus vestibulum porttitor. Aliquam accumsan libero in mauris varius convallis. Sed ultricies augue quis sollicitudin mollis. Sed iaculis mi eu fermentum pharetra. Etiam dignissim varius massa, at aliquet neque congue vel. Proin ut varius magna. </p>

<p>Cras laoreet pharetra sodales. Proin varius, felis sit amet auctor consectetur, eros quam vehicula turpis, sit amet ornare ligula est a diam. Aenean mauris ante, hendrerit at nulla vitae, ultricies tristique tortor. Fusce ac viverra enim, quis iaculis ante. Phasellus ultricies risus in diam tincidunt faucibus. Ut eget urna sed purus cursus consequat vel vitae lectus. Nulla in imperdiet libero. Aliquam sed adipiscing nisl, in blandit mauris. Phasellus ultricies risus in diam tincidunt faucibus. Ut eget urna sed purus cursus consequat vel vitae lectus. Nulla in imperdiet libero. Aliquam sed adipiscing nisl, in blandit mauris.</p>

<p>Cras laoreet pharetra sodales. Proin varius, felis sit amet auctor consectetur, eros quam vehicula turpis, sit amet ornare ligula est a diam. Aenean mauris ante, hendrerit at nulla vitae, ultricies tristique tortor. Fusce ac viverra enim, quis iaculis ante. Phasellus ultricies risus in diam tincidunt faucibus. Ut eget urna sed purus cursus consequat vel vitae lectus. Nulla in imperdiet libero. Aliquam sed adipiscing nisl, in blandit mauris.</p>
</div>
<!-- end description -->

<div class="quote"><!-- quote -->
Do not try to be pretty. You weren’t meant to be pretty; you were meant to burn down the earth and graffiti the sky. Don’t let anyone ever simplify you to just “pretty.”
</div>


</li><!-- End Bio -->


<!-- Start Ask --><li>


<iframe frameborder="0" height="200" id="ask_form" scrolling="yes" src="http://www.tumblr.com/ask_form/{Name}.tumblr.com" width="100%"></iframe>

<!-- start disclaimer (feel free to delete!) -->
<div class="disclaimer">
I apologise in advance if I don't respond to your message immediately. The main things to blame: school, forgetfulness and awkwardness. If it's super important, just send the ask twice (or on fanmail) because tumblr has a habit of eating asks.
</div>
<!-- end disclaimer -->


</li><!-- End Ask -->


<!-- Start Links -->
<li>
<div class="links">
    <a href="/">link one</a>
    <a href="/">link two</a>
    <a href="/">link three</a>
    <a href="/">link four</a>
    <a href="/">link five</a>
    <a href="/">link six</a>
    <a href="/">link seven</a>
    <a href="/">link eight</a>
</div>
</li>
<!-- End Links -->


<!-- Start Tags -->
<li><span class="tag_hold">


<div class="tags_box">
<h2>category</h2>
<div class="tags">
    <a href="/tagged/tag-link">Tag Name</a>
    <a href="/tagged/tag-link">Tag Name</a>
    <a href="/tagged/tag-link">Tag Name</a>
    <a href="/tagged/tag-link">Tag Name</a>
</div>
</div>


<div class="tags_box">
<h2>category</h2>
<div class="tags">
    <a href="/tagged/tag-link">Tag Name</a>
    <a href="/tagged/tag-link">Tag Name</a>
    <a href="/tagged/tag-link">Tag Name</a>
    <a href="/tagged/tag-link">Tag Name</a>
</div>
</div>


<div class="tags_box">
<h2>category</h2>
<div class="tags">
    <a href="/tagged/tag-link">Tag Name</a>
    <a href="/tagged/tag-link">Tag Name</a>
    <a href="/tagged/tag-link">Tag Name</a>
    <a href="/tagged/tag-link">Tag Name</a>
</div>
</div>


<div class="tags_box">
<h2>category</h2>
<div class="tags">
    <a href="/tagged/tag-link">Tag Name</a>
    <a href="/tagged/tag-link">Tag Name</a>
    <a href="/tagged/tag-link">Tag Name</a>
    <a href="/tagged/tag-link">Tag Name</a>
</div>
</div>


<div class="tags_box">
<h2>category</h2>
<div class="tags">
    <a href="/tagged/tag-link">Tag Name</a>
    <a href="/tagged/tag-link">Tag Name</a>
    <a href="/tagged/tag-link">Tag Name</a>
    <a href="/tagged/tag-link">Tag Name</a>
</div>
</div>


<div class="tags_box">
<h2>category</h2>
<div class="tags">
    <a href="/tagged/tag-link">Tag Name</a>
    <a href="/tagged/tag-link">Tag Name</a>
    <a href="/tagged/tag-link">Tag Name</a>
    <a href="/tagged/tag-link">Tag Name</a>
</div>
</div>


</span></li>
<!-- End Tags -->


<!-- Start FAQ -->
<li><span class="faq_hold">


<div class="faq">
<h2>question?</h2>
<blockquote>
    answer goes here
</blockquote>
</div>

<div class="faq">
<h2>question?</h2>
<blockquote>
    answer goes here
</blockquote>
</div>

<div class="faq">
<h2>question?</h2>
<blockquote>
    answer goes here
</blockquote>
</div>

<div class="faq">
<h2>question?</h2>
<blockquote>
    answer goes here
</blockquote>
</div>

<div class="faq">
<h2>question?</h2>
<blockquote>
    answer goes here
</blockquote>
</div>

<div class="faq">
<h2>question?</h2>
<blockquote>
    answer goes here
</blockquote>
</div>


</span></li>
<!-- End FAQ -->


<!-- Start Blogroll (do not edit!!!) -->
<li>
<div class="blogroll">{block:Following}{block:Followed}<div class="box"><a title="{FollowedName}" href="{FollowedURL}"><img src="{FollowedPortraitURL-40}" align="left"></a></div>{/block:Followed}{/block:Following}</div>
</li>
<!-- End Blogroll -->

</ul>
</div>

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