body,
html {
    margin: 0;
    padding: 0;
    border: 0;
}
a {
    outline: 0;
}
div#background {
    position: absolute;
    height: 1600px;
    width: 100%;
    top: 0;
    left: 0;
    background: url(../img/background/chalkboard.jpg) top center no-repeat;
}
h1 {
    background-image: url(../img/title/gallerytitle.png);
    height: 140px;
    width: 800px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    margin: 0 auto 1em;
    text-align: center;
    opacity: 0.75;
}
/*iv#gallery {
    position: absolute;
    margin-left: 50%;
    margin-top: 100px;
    width: 800px;
    left: -400px;
}
*/

div#gallery {
    position: absolute;
    margin-left: 50%;
    margin-top: 100px;
    width: 800px;
    left: -400px;
}
.timeline {
    position: relative;
    top: 0;
    right: 0;
    display: block;
    width: 799px;
    height: 475px;
    text-decoration: none;
    margin: 2em 0em 0em 0em;
    opacity: 0.5;
    background: url(../img/gallery/timelinegraphic-title.png);
}
.timeline:hover {
    opacity: 1;
}
.timeholder {
    float: left;
    width: 799px;
    padding: 5px;
}

.holder {
    float: left;
    width: 190px;
    padding: 5px;
}
.drawing,
.network,
.other,
.trees,
.uzamaki,
.venutian,
.white,
.novaroma,
.bottle,
.old {
    position: relative;
    top: 0;
    right: 0;
    display: block;
    width: 190px;
    height: 300px;
    text-decoration: none;
    opacity: 0.5;
}
.drawing:hover,
.network:hover,
.other:hover,
.trees:hover,
.uzamaki:hover,
.venutian:hover,
.white:hover, 
.novaroma:hover,
.bottle:hover,
.old:hover {
    background-position: -190px 0;
    opacity: 1;
}
.novaroma {
    background: url(../img/gallery/novaroma.png);
}
.white {
    background: url(../img/gallery/white.png);
}
.venutian {
    background: url(../img/gallery/venutian.png);
}
.drawing {
    background: url(../img/gallery/drawing.png);
}
.uzamaki {
    background: url(../img/gallery/uzamaki.png);
}
.other {
    background: url(../img/gallery/other.png);
}
.network {
    background: url(../img/gallery/liminal.png);
}
.trees {
    background: url(../img/gallery/trees.png);
}
.bottle {
    background: url(../img/gallery/bottle.png);
}
.old {
    background: url(../img/gallery/pastwork.png);
}
@media screen and (max-width: 799px) {
    h1 {
        background-image: url(../img/title/gallerytitle-small.png);
        height: 102px;
        width: 300px;
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        margin: 3em auto 1em;
        text-align: center;
    }
    div#gallery {
        position: absolute;
        width: 100%;
        left: 0;
        margin: 0;
    }
    .holder {
        float: none;
        width: 100%;
        padding: 0.25em 0;
        margin-left: auto;
        margin-right: auto;
    }
    .timeholder {
        float: none;
        width: 100%;
        padding: 0.25em 0;
        margin-left: auto;
        margin-right: auto;
        opacity: 0.5;
    }
    .timeholder:hover {
        opacity: 1;
    }
    .drawing,
    .network,
    .other,
    .trees,
    .uzamaki,
    .venutian,
    .white, 
    .novaroma,
    .bottle,
    .old,
    .timeline {
        position: relative;
        top: 0;
        right: 0;
        display: block;
        text-decoration: none;
        opacity: 0.5;
        height: 85px;
        width: 100%;
    }
    .drawing:hover,
    .network:hover,
    .other:hover,
    .trees:hover,
    .uzamaki:hover,
    .venutian:hover,
    .white:hover, 
    .novaroma:hover,
    .bottle:hover,
    .old:hover,
    .timeline {
        background-position: center;
        opacity: 1;
    }
    .novaroma {
        background: url(../img/gallery/novaroma-small.png) center no-repeat;
        height: 78px;
    }
    .white {
        background: url(../img/gallery/white-small.png) center no-repeat;
        height: 81px;
    }
    .venutian {
        background: url(../img/gallery/venutian-small.png) center no-repeat;
    }
    .drawing {
        background: url(../img/gallery/drawing-small.png) center no-repeat;
    }
    .uzamaki {
        background: url(../img/gallery/uzamaki-small.png) center no-repeat;
    }
    .other {
        background: url(../img/gallery/other-small.png) center no-repeat;
    }
    .network {
        background: url(../img/gallery/liminal-small.png) center no-repeat;
        height: 110px;
    }
    .trees {
        background: url(../img/gallery/trees-small.png) center no-repeat;
    }
    .bottle {
        background: url(../img/gallery/bottle-small.png) center no-repeat;
    }
    .old {
        background: url(../img/gallery/pastwork-small.png) center no-repeat;
        height: 120px;
    }
    .timeline {
        background: url(../img/gallery/timeline-small.png) center no-repeat;
        height: 100px;
    }
}