/*
	Author: Jonathan Lum
	Date Modified: 5/31/2017
	File Name: free_play.css
	
	Brief Description: This is the stylesheet for the Free Play Page of the JonEl Media website.
*/

    body, html {
        height: 100%;
        background-color: #3b3b3b;
    }

/* temporary fix for page-content */
#page-content { width: auto; height: 100%; }

    #free-play .row { margin: 0; 
        //border: 1px solid orange; }
    #free-play .col-xs-12, #free-play .col-sm-3 { 
        padding-left: 0;
        padding-right: 0;
    }


/* CSS for Desktop 768px and > width */
@media all and (min-width: 768px) {

    #free-play {
        margin: 0 auto;
//border: 1px solid red;
        border: none;
        padding: 0;
    }
	#free-play .header {
        margin: 0 auto;
//border: 1px solid green;
		border: none;
		padding: 0;
        background-color: #1d1e20;
        overflow: hidden;
	}
    #free-play .header h1 {
        margin: 0;
//border: 1px solid red;
        border: none;
        padding: 2% 5% 2% 3%;
        color: #FFF;
        font-size: 2em;
    }
    #free-play-list {
        margin: 0;
//border: 1px solid blue;
        border: none;
        padding: 0;
        overflow: hidden;
    }
    .fp_game_container {
        margin: 0;
//border: 1px solid green;
        border: none;
        padding: 1% 0 1% 0;
    }
    .border-box {
        margin: 0 auto;
        border: 1px solid #3b3b3b;
        padding: 2px;
        width: 95%;
        overflow: hidden;
    }
    .border-box:hover {
        border: 1px solid red;
    }
    .fp_game_container h2 {
        margin: 0 auto;
//border: 1px solid purple;
        border: none;
        border-bottom: 2px solid orange;
        padding: 2% 2% 0 2%;
        font-size: 100%;
//text-overflow: ellipsis;
//white-space: nowrap;
        text-align: center;
        height: 60px;
        overflow: hidden;
        color: #FFF;
        background-color: #1d1e20;
/* maybe make different heights for different screen sizes */
    }
    .fp_game_container .img-container {
        margin: 0 auto;
//border: 1px solid blue;
        border: none;
        overflow: hidden;
        position: relative;
    }
	.fp_game_container .youtube-overlay {
		position: absolute;
		top: 40%;
		left:40%;
		height: 25%;
		width: 20%;
		z-index: 10;
	}
    .fp_game_container img {
        margin: 0;
//border: 1px solid red;
        border: none;
        padding: 0;
        width: 100%;
    }
    .fp_game_container .description {
        margin: 0 auto;
//border: 1px solid green;
        border: none;
        border-top: 2px solid orange;
        padding: 1% 2% 1% 2%;
        background-color: #FFF;
        height: 100px;
        font-size: .9em;
        overflow: hidden;
    }
	
}
/* End CSS for Desktop */


/* CSS for Mobile 767px and < width */
@media all and (max-width:767px ) {
	
    #free-play {
        margin: 0 auto;
//border: 1px solid red;
        border: none;
        padding: 0;
    }
	#free-play .header {
        margin: 0 auto;
//border: 1px solid green;
		border: none;
		padding: 0;
        background-color: #1d1e20;
        overflow: hidden;
	}
    #free-play .header h1 {
        margin: 0;
//border: 1px solid red;
        border: none;
        padding: 2% 5% 2% 3%;
        color: #FFF;
        font-size: 2em;
    }
    #free-play-list {
        margin: 0;
//border: 1px solid blue;
        border: none;
        padding: 0;
        overflow: hidden;
    }
    .fp_game_container {
        margin: 0;
//border: 1px solid green;
        border: 1px solid #3b3b3b;
        //border: none;
        padding: 1% 0 1% 0;
    }
    .border-box {
        margin: 0 auto;
        border: none;
        padding: 0;
        width: 100%;
        overflow: hidden;
    }
    .border-box:hover {
        border: none;
    }
    .fp_game_container h2 {
        margin: 0 auto;
//border: 1px solid purple;
        border: none;
        border-bottom: 2px solid orange;
        padding: 2% 2% 0 2%;
        font-size: 1em;
//text-overflow: ellipsis;
//white-space: nowrap;
        height: 60px;
        overflow: hidden;
        color: #FFF;
        background-color: #1d1e20;
/* maybe make different heights for different screen sizes */
    }
    .fp_game_container .img-container {
        margin: 0 auto;
//border: 1px solid blue;
        border: none;
        overflow: hidden;
        position: relative;
    }
	.fp_game_container .youtube-overlay {
		position: absolute;
		top: 40%;
		left:40%;
		height: 25%;
		width: 20%;
		z-index: 10;
	}
    .fp_game_container img {
        margin: 0;
//border: 1px solid red;
        border: none;
        padding: 0;
        width: 100%;
    }
    .fp_game_container .description {
        margin: 0 auto;
//border: 1px solid green;
        border: none;
        border-top: 2px solid orange;
        padding: 1% 2% 1% 2%;
        background-color: #FFF;
        height: 100px;
        font-size: .9em;
        overflow: hidden;
    }
	
}
/* End CSS for Mobile */