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/mainbackground.jpg) top center no-repeat;
}
h1 {
    background-image: url(../img/title/maintitle.png);
    height: 140px;
    width: 800px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    margin: 0;
    text-align: center;
    opacity: 0.75;
}
div#index {
    position: absolute;
    margin-left: 50%;
    margin-top: 100px;
    width: 800px;
    left: -400px;
}
div#aboutme,
div#contactme,
div#gallery,

div#glider {
    margin-left: auto;
    margin-right: auto;
    float: left;
}

div#gallery {
    width: 144px;
}
.gallery {
    position: relative;
    top: -36px;
    left: -40px;
    display: block;
    width: 144px;
    height: 375px;
    text-decoration: none;
    opacity: 0.5;
    background: url(../img/main/gallery.png);
}
.gallery:hover {
    opacity: 1;
    background-position: -144px 0;
}
div#aboutme {
    width: 218px;
}
.aboutme {
    position: relative;
    top: 204px;
    left: 125px;
    display: block;
    width: 218px;
    height: 300px;
    text-decoration: none;
    opacity: 0.5;
    background: url(../img/main/aboutme.gif);
}
.aboutme:hover {
    opacity: 1;
    background-position: -218px 0;
}
div#contactme {
    width: 201px;
}
.contactme {
    position: relative;
    top: 104px;
    left: 345px;
    display: block;
    width: 201px;
    height: 330px;
    text-decoration: none;
    opacity: 0.5;
    background: url(../img/main/contact.png);
}
.contactme:hover {
    opacity: 1;
    background-position: -201px 0;
}

div#glider {
    width: 120px;
}
.glider {
    position: relative;
    top: 433px;
    left: 153px;
    display: block;
    width: 120px;
    height: 117px;
    text-decoration: none;
}

@media screen and (max-width: 799px) {
    div#index {
        position: absolute;
        width: 100%;
        left: 0;
        margin: 0;
    }
    h1 {
        background-image: url(../img/title/maintitle-small.png);
        background-repeat: no-repeat;
        height: 108px;
        width: 300px;
        margin: 3em auto 1em;
    }
    div#background {
        background: url(../img/background/chalkboard.jpg) top center;
    }
    div#aboutme,
    div#contactme,
    div#gallery {
        width: 300px;
        margin-left: auto;
        margin-right: auto;
        float: none;
        padding: 1em 0;
    }
    .aboutme,
    .contactme,
    .gallery {
        top: 0;
        left: 0;
        position: relative;
        display: inline-block;
        width: 100%;
        text-decoration: none;
        opacity: 0.5;
    }
    .aboutme:hover,
    .contactme:hover,
    .gallery:hover {
        opacity: 1;
        background-position: 0 0;
    }
    .gallery {
        height: 93px;
        background: url(../img/main/gallery-small.png);
    }
    .aboutme {
        height: 91px;
        background: url(../img/main/aboutme-small.png);
    }
    .contactme {
        height: 82px;
        background: url(../img/main/contact-small.png);
    }

    div#glider {
        width: 0;
    }
    .glider {
        display: none;
    }

}