/* CSS for funkyh.at 
 * © Matt Wheeler */

@import url('http://static.funkyhat.net/fonts/quicksand/font.css');

/* Main Stuff */
* {
    border: 0;
    margin: 0;
    padding: 0;
}

::selection {
    background: #e366b5;
}


::-moz-selection {
    background: #e366b5;
}

body , html {
    height: 100%;
}

body {
    background: #444 url('lines.png') repeat-y top right;
    font-family: Quicksand, "Century Gothic", "DejaVu Sans", "Trebuchet MS", Sans, sans-serif;
    color: #444;
}

a {
    color: #444;
    text-decoration: none;
}

a:hover , a:focus {
    color: #c7007d;
}

#page {
    background: #fff url('large.png') top right;
    margin: 0 350px 0 0;
    min-height: 100%;
    min-width: 15em;
}

#page-inner {
    padding: 3em 0 0;
    text-align: right;
    position: relative;
}

/* Silly things to make the title do fancy things */
h1 {
    font-size: 3.5em;
    font-weight: normal;
    font-family: QuicksandLight, "Century Gothic", "DejaVu Sans", "Trebuchet MS", Sans, sans-serif;
    margin-bottom: 0.8em;
}

#h1-white {
    color: white;
    position: absolute;
    left: 100%;
}

#h1-hdot {
    letter-spacing: -0.125em;
}

#h1-dot {
    position: relative;
}

h1 a:before {
    content: "m@";
    margin-right: -0.43em;
    opacity: 0;
}

h1:hover a:before , h1 a:focus:before {
    opacity: 1;
}

h1 a:hover , h1 a:focus {
    /*color: #929;*/
}

h1 a:hover:before , h1 a:focus:before {
    /*color: #929;*/
}

h1:hover #h1-dot , h1 a:focus #h1-dot {
    opacity: 0;
}

h1:hover #h1-white:after , h1 a:focus #h1-white:after {
    content: ".org";
}
/* Logo image position */
#logo-img {
    margin-right: -80px;
}

/* Silly Lists */
ul {
    margin: 1.5em 0;
}

li {
    list-style-type: none;
}

li a , li.nl {
    padding-right: 1em;
}

li span {
    padding: 0 1em 1em;
    position: absolute;
    left: 100%;
    text-align: left;
    width: 280px;
    color: #fff;
}

li span::selection {
    background: #d939a8;
}


li span::-moz-selection {
    background: #d939a8;
}

li .url {
    opacity: 0;
}

li a:hover + .url , li .url:hover ,li a:focus + .url {
    opacity: 1;
}

* {
    transition: all .3s;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
}