body{
    background-color:#333333;
    color:#ffffff;
    font-family:arial,sans-serif;
    font-size:0.8em;
}
a{
    color:#9696ff;
    text-decoration:none;
    font-weight:bold;
}
a:hover{
    text-decoration:underline;
    color:#b072cf;
}
.page{
    position:relative;
    background-color:#555555;
    width:900px;
    margin-left:auto;
    margin-right:auto;
}
.hdr{
    width:100%;
    clear:both;
    background-color:black;
    padding-bottom:20px;
}

.hdr h1{
    text-align:center;
}

.hdr p{
    padding:0px 50px;
}
.boxes{
    height:auto;
    margin-left:auto;
    margin-right:auto;
    clear:both;
    background-color:#555555;
    padding-bottom:40px;
}
.boxes h2{
    width:100%;
    text-align:center;
    margin-top:30px;
    margin-bottom:0px;
    font-size:2em;
}

.tilebox-outer{
    float:left;
    height:auto;
    padding:10px;
    z-index:50;
}
.tilebox{
    width:280px;
    height:auto;
    text-align:center;
    position:relative;
    display:block;
    overflow:hidden;
    opacity:1.0;
}

.tilebox img{
    width:100%;
    border:#ffffff solid 0px;
    display:block;
    z-index:50;
    margin-left:auto;
    margin-right:auto;
}

.tilebox h3{
    color:#ffffff;
    font-weight:bold;
    position:absolute;
    display:block;
    z-index:90;
    margin: 0px auto;
    text-align:center;
    width:110%;
    line-height:1.5em;
    font-size:1em;
    left:-5%;
    background-color:black;
    opacity:0.5;
    transition:all 0.2s linear;
    -webkit-transition:all 0.2s linear;
    -moz-transition:all 0.2s linear;
    -o-transition:all 0.2s linear;
}

.tilebox h3.box-on{
    opacity:0.8;
}

.tilebox .link-bg{
    position:absolute;
    display:block;
    bottom:0px;
    width:100%;
    height:1.5em;
    background-color:black;
    z-index:70;
    opacity:0.5;
    transition:all 0.2s linear;
    -webkit-transition:all 0.2s linear;
    -moz-transition:all 0.2s linear;
    -o-transition:all 0.2s linear;
}

.tilebox .link-bg.box-on{
    opacity:0.8;
}

.tilebox span.link{
    position:absolute;
    display:block;
    bottom:0px;
    width:55%;
    opacity:1.0;
    line-height:1.5em;
    z-index:80;
}

.tilebox span a{
    color:#ffffff;
    text-decoration:none;
    font-weight:bold;
    opacity:1.0;
    z-index:90;
}

.tilebox span.size{
    position:absolute;
    display:block;
    bottom:0px;
    width:100%;
    opacity:1.0;
    height:1.5em;
    line-height:1.5em;
    text-align:center;
    font-weight:normal;
    z-index:70;
}

.zip{
    left:-5%;
    text-align:center;
}
.tar{
    right:-5%;
    text-align:center;
}

.tilebox .desc{
    position:absolute;
    display:block;
    width:100%;
    left:0px;
    line-height:1.2em;
    bottom:-3em;
    background-color:black;
    opacity:0.8;
    margin:0px;
    padding-bottom:3px;
    z-index:60;
    transition:all 0.2s linear;
    -webkit-transition:all 0.2s linear;
    -moz-transition:all 0.2s linear;
    -o-transition:all 0.2s linear;
}
.tilebox .img-link{
    position:absolute;
    display:block;
    width:100%;
    left:0px;
    line-height:1.2em;
    top:-3em;
    background-color:black;
    opacity:0.8;
    margin:0px;
    padding-bottom:3px;
    z-index:60;
    transition:all 0.2s linear;
    -webkit-transition:all 0.2s linear;
    -moz-transition:all 0.2s linear;
    -o-transition:all 0.2s linear;
}

.tilebox .img-link.box-on{
    top:1.5em;
}
.tilebox .desc.box-on{
    bottom:1.5em;
}
@media(max-width:900px){
    .page{
        width:100%;
    }
    .tilebox-outer{
        width:30%;
        padding:10px 1.5%;
    }
    .tilebox{
        width:100%;
    }
}
@media(max-width:800px){
    .tilebox-outer{
        width:45%;
        padding: 10px 2.5%;
    }
}
@media(max-width:600px){
    .tilebox-outer{
        width:95%;
    }
}