@import url(http://fonts.googleapis.com/css?family=Open+Sans|Press+Start+2P);

body {
    margin: 0;
    background: #FFF;
    font-family:'Open Sans',sans-serif;
    font-size:13px;
    font-weight: 400;
    font-style: normal;
    padding: 50px 0px 0px 0px;
}

#content { padding:0px 50px 0px 50px; }

span.normal {font-style:normal}
span.italic {font-style:italic}
span.bold {font-weight:bold}

h1 { 
    font-size: 30px; 
    text-align: left; 
    font-family: 'Press Start 2P', cursive;
    padding-bottom:50px;
}

h3 { font-size: 20px; }

p { font-size: 17px; }


/* cover art gallery */

#portfolio {
    overflow: hidden;
    margin: 30px 10px 50px 10px;
}

/* box elements around each item contain a game element, which contains a blurb element */

/* when you add more games, you might want to change the number of items per row. */
/* This is affected by .box.width. So for four boxes, it would be 25%, and so on. */
/* padding-bottom should be equal to width to maintain squares, or adjusted for rectangles */

.box {
    float: left;
    position: relative;
    width: 33.3%;
    padding-bottom: 33.3%;
}

.game {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 10px;
    bottom: 10px;
    overflow: hidden;
    border: 3px solid black; 
}

.game img { width: 100%; }

.game .blurb {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin-bottom: -50px;
    background: #000;
    background: rgba(0, 0, 0, 0.5);
    color: #FFF;
    padding: 10px;
    text-align: center;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

body .game:hover .blurb {
    margin-bottom: 0;
}

a.title { text-decoration: none; font-weight: bold; color: #772200; }



/* @media */

@media only screen and (max-width : 480px) {
    /* smartphone - one tile */
    .box, .feature {
	width: 100%;
	padding-bottom: 100%;
    }
    
}

@media only screen and (max-width : 650px) and (min-width : 481px) {
    /* tablet - portrait - two tiles */
    .box, .feature {
	width: 50%;
	padding-bottom: 50%;
    }
}

@media only screen and (max-width : 1050px) and (min-width : 651px) {
    /* tablet - landscape - three tiles */
    .box {
        width: 33.3%;
        padding-bottom: 33.3%;	
    }    
}

@media only screen and (min-width: 1291px) {
    /* add some extra padding on a full-sized screen */
    #portfolio {
	padding-left:100px;
	padding-right:100px;
    }
}

ul#plain {
list-style: none;
padding-left:0;
line-height:30px;
}