tags / SILVER

<!DOCTYPE html>
<head>

<!--





                            silver

                          @odeysseus




- accent colors: #cfecfc (light); #57b5ed (dark); #eee (borders) - use colorpicker.com if you want to replace them

-->


<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">

<title>navigation</title> <!--title-->


<style type="text/css">
.tmblr-iframe { display:none; }
* { margin:0;padding:0; }

@-webkit-keyframes fadein {
        0%   {opacity: 0;}
        100% { opacity: 1; }
}

@-moz-keyframes fadein {
        0%   { opacity: 0; }
        100% { opacity: 1; }
}

@keyframes fadein {
        0%   { opacity: 0; }
        100% { opacity: 1; }
}


 ::-webkit-scrollbar{
    height:3px;
    width:7px;
    background:#fff;
}

::-webkit-scrollbar-thumb {background:#cfecfc;border:3px solid #fff;}
::-webkit-scrollbar-track {background:#eee;border:3px solid #fff};}

::-moz-selection{ background: #eee; color:#777;}
::selection { background:#eee; color:#777; }

body {
background:#fff; /* background color */
color:#767676;
font-family:'Source Sans Pro', sans-serif; /* font */
font-size:11px;  /* font size */
-moz-osx-font-smoothing:grayscale;
-webkit-font-smoothing:antialiased;
font-smoothing:antialiased;
}


a {
color:#767676; /* link color - use colorpicker.com if you want to change */
text-decoration:none;
transition:all .4s ease;
-webkit-transition:all .4s ease;
-moz-transition:all .4s ease;
-o-transition:all .4s ease;
}

a:hover,.hide a:hover,.header a:hover { text-decoration:none; color:#222;letter-spacing:0;  } /* #222 is the link hover color - use colorpicker.com if you want to change it */

section {
    margin:50px auto;
    column-count:3; /* number of columns: if you change this, change the * 3 in width: to match */
    column-gap:100px;
    width:calc((170px + 2px) * 3 + 200px);

}

.box {
    width:170px;
    break-inside:avoid;
    display:inline-block;
    margin:50px auto;
    background:#fff; /* box background */
    border:1px solid #eee; /* box border */
    border-radius:3px;
}

.link a {
    display:block;
    padding:7px;
    border-top:1px solid #eee; /* link border */
}

.box b { /* box headings */
    font-size:12px;
    color:#444; /* heading color */
    font-size:13px;
    font-weight:600;
    padding:10px 7px;
    display:block;
    border-top:3px solid #cfecfc; /* box top border */
}
.hide { /* drop down */
    display:none;
    background:#f8f8f8;
    border-top:1px solid #eee;
    max-height:110px;
    overflow-y:auto;
}

.hide a {
    display:inline-block;
    width:calc(49% - 14px);
    border-top:0;
    letter-spacing:.5px;
    font-style:italic;
    font-size:10px;
    color:#555;
    text-align:center;
}

a.slide { cursor:help;} a.slide:after { content:'▾';margin-right:5px;color:#57b5ed;float:right;} .header b { text-align:center; } .header .link { background:#f8f8f8;border-top:1px solid #eee; } .c { bottom:27px;right:27px;position:fixed;} .header a { width:calc(32% - 14px);display:inline-block;text-align:center;border:none;color:#666;letter-spacing:.5px;font-style:italic;font-size:10px; }

</style>

</head>

<body>

<section>
<!--begin editing-->

<!--header box-->
<div class="box header">

    <b>navigation</b> <!--heading-->
    <div class="link">
    <a href="/">return</a>
    <a href="http://tumblr.com/dashboard">dash</a>
    <a href="link url">link</a>
    </div>
</div>
<!--end header box-->
<!--start tags-->

<!--example box-->
<div class="box">
    <b>heading</b><!--heading-->

    <div class="link"><!--tags here-->
        <a href="/tagged/">tag name</a>
        <a href="/tagged/">tag name</a>
        <a href="/tagged/">tag name</a>

        <!--drop down section-->
        <a class="slide">group name</a>
        <div class="hide">
            <a href="/tagged/">extra</a>
            <a href="/tagged/">extra</a>
            <a href="/tagged/">extra</a>
            <a href="/tagged/">extra</a>
        </div>
        <!--end drop down section-->

        <a href="/tagged/">tag name</a>
        <a href="/tagged/">tag name</a>
    </div>
</div>
<!--end example box-->

<!--example box-->
<div class="box">
    <b>heading</b><!--heading-->

    <div class="link"><!--tags here-->
        <a href="/tagged/">tag name</a>
        <a href="/tagged/">tag name</a>
        <a href="/tagged/">tag name</a>

        <!--drop down section-->
        <a class="slide">group name</a>
        <div class="hide">
            <a href="/tagged/">extra</a>
            <a href="/tagged/">extra</a>
            <a href="/tagged/">extra</a>
            <a href="/tagged/">extra</a>
        </div>
        <!--end drop down section-->

        <a href="/tagged/">tag name</a>
        <a href="/tagged/">tag name</a>
    </div>
</div>
<!--end example box-->

<!--end tags-->
<!--end editing-->
</section>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function () {
$('.slide').click(function() {
$(this).next('.hide').slideToggle(300);
});
});
</script>
<div class="c"><a href="http://odeysseus.tumblr.com">O</a></div>

</body>

</html>