/**
 * Style of akiraohgaki.com
 */
body {
    background: #222222 url("brand/background.jpg") no-repeat center top;
    color: #a9a9a9;
    /*font-family: 'Droid Sans', Arial, Helvetica, sans-serif;*/
    font-size: 92%;
}

h1, h2, h3, h4, h5, h6 {
    color: #d3d3d3;
    /*font-family: 'Droid Sans', Verdana, Arial, Helvetica, sans-serif;*/
    text-shadow: 0px -1px 1px #000000;
}

pre, textarea {
    /*font-family: 'Droid Sans Mono', 'Courier New', Courier, monospace;*/
}

blockquote {
    /*font-family: 'Droid Serif', 'Times New Roman', Times, serif;*/
}

a {
    color: #ffffff;
}
a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.widget {
    margin-bottom: 1em;
    border-color: #cccccc;
    background-color: #191919;
}

.linklist.icon a[href] {
    padding-left: 48px;
    background-image: url("favicons/feed.png");
    background-repeat: no-repeat;
    background-position: 16px center;
}
.linklist.icon a[href*="gmail.com"] {
    background-image: url("favicons/gmail.png");
}
.linklist.icon a[href*="facebook.com"] {
    background-image: url("favicons/facebook.png");
}
.linklist.icon a[href*="twitter.com"] {
    background-image: url("favicons/twitter.png");
}
.linklist.icon a[href*="youtube.com"] {
    background-image: url("favicons/youtube.png");
}
.linklist.icon a[href*="flickr.com"] {
    background-image: url("favicons/flickr.png");
}
.linklist.icon a[href*="last.fm"] {
    background-image: url("favicons/lastfm.png");
}
.linklist.icon a[href*="digg.com"] {
    background-image: url("favicons/digg.png");
}
.linklist.icon a[href*="blogspot.com"] {
    background-image: url("favicons/blogger.png");
}
.linklist.icon a[href*="launchpad.net"] {
    background-image: url("favicons/launchpad.png");
}
.linklist a:hover {
    background-color: #4581b3;
}

.linklist-horizontal.icon a[href] {
    padding-left: 20px;
    background-repeat: no-repeat;
    background-position: left center;
}
.linklist-horizontal.icon a[href$="/"] {
    background-image: url("mono-icons-white/16/places/user-home.png");
}
.linklist-horizontal.icon a[href="projects"] {
    background-image: url("mono-icons-white/16/places/user-bookmarks.png");
}
.linklist-horizontal.icon a[href="junk"] {
    background-image: url("mono-icons-white/16/places/folder.png");
}
.linklist-horizontal.icon a[href="contact"] {
    background-image: url("mono-icons-white/16/apps/internet-mail.png");
}
.linklist-horizontal.icon a[href="feed"] {
    background-image: url("mono-icons-white/16/apps/internet-news-reader.png");
}
.linklist-horizontal.icon a[href*="facebook.com"] {
    background-image: url("favicons/facebook.png");
}
.linklist-horizontal.icon a[href*="twitter.com"] {
    background-image: url("favicons/twitter.png");
}

#container {
    width: 640px;
    margin: 0 auto;
}

#header {
    margin: 2em 0 1em 0;
}
    #header hgroup {
        margin-bottom: 1em;
    }
        #header hgroup h1 a {
            display: block;
            width: 164px;
            height: 32px;
            overflow: hidden;
            background: transparent url("brand/akiraohgaki-logo-white.png") no-repeat left center;
            text-indent: -2000px;
        }
        #header hgroup h2 {
            display: none;
        }
    #header nav .linklist-horizontal {
        padding: 0.5em;
        background-color: #191919;
        font-weight: bold;
    }

#footer {
    margin: 1em 0 2em 0;
}
    #footer .linklist-horizontal {
        padding: 0.5em;
        background-color: #191919;
    }

/**
 * Style enhancement
 */
.widget,
#header nav .linklist-horizontal,
#footer .linklist-horizontal {
    background: rgba(0,0,0,0.6);
}

#header nav .linklist-horizontal,
#footer .linklist-horizontal {
    -moz-box-shadow: 0 -1.5em 5px rgba(0,0,0,0.3) inset;
    -webkit-box-shadow: 0 -1.5em 5px rgba(0,0,0,0.3) inset;
    box-shadow: 0 -1.5em 5px rgba(0,0,0,0.3) inset;
    opacity: 0.6;
    -moz-transition: opacity 0.3s ease-out;
    -webkit-transition: opacity 0.3s ease-out;
    transition: opacity 0.3s ease-out;
}
#header nav .linklist-horizontal:hover,
#footer .linklist-horizontal:hover {
    opacity: 1.0;
}

.linklist a {
    -moz-transition: background-color 0.3s ease-out;
    -webkit-transition: background-color 0.3s ease-out;
    transition: background-color 0.3s ease-out;
}

@-moz-keyframes fade-01 {
    0% {
        opacity: 1.0;
    }
    70% {
        opacity: 0.9;
    }
    90% {
        opacity: 0.6;
    }
    100% {
        opacity: 1.0;
    }
}
@-webkit-keyframes fade-01 {
    0% {
        opacity: 1.0;
    }
    70% {
        opacity: 0.9;
    }
    90% {
        opacity: 0.6;
    }
    100% {
        opacity: 1.0;
    }
}
@keyframes fade-01 {
    0% {
        opacity: 1.0;
    }
    70% {
        opacity: 0.9;
    }
    90% {
        opacity: 0.6;
    }
    100% {
        opacity: 1.0;
    }
}
#header hgroup h1 a {
    -moz-animation: fade-01 15s ease-in-out 0s infinite;
    -webkit-animation: fade-01 15s ease-in-out 0s infinite;
    animation: fade-01 15s ease-in-out 0s infinite;
}