/* 
	Author: Jonathan Lum
	Date Modified: 8/6/2017
	File Name: playthroughs.css
	
	Brief Description: This is the stylesheet for the Playthroughs page of the JonEl Media site
*/

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

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

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

/* CSS for Desktop 768px and > width */
@media all and (min-width: 768px) {
    
    #playthroughs {
        margin: 0 auto;
//border: 1px solid red;
        border: none;
        padding: 0;
    }
	#playthroughs .header {
        margin: 0 auto;
//border: 1px solid green;
		border: none;
		padding: 0;
        background-color: #1d1e20;
        overflow: hidden;
	}
    #playthroughs .header h1 {
        margin: 0;
//border: 1px solid red;
        border: none;
        padding: 2% 5% 2% 3%;
        color: #FFF;
        font-size: 2em;
    }
    
    /* pagination */
    #playthroughs .page-number {
        margin: 0;
    //border: 1px solid red;
        padding: 1% 0 0 0;
    }
    #playthroughs .page-number ul {
        margin: 0 auto;
    //border: 1px solid purple;
        padding: 0;
        text-align: center;
        display: table;
        overflow: hidden;
    }
    
    .playthroughs-mobile {
        display: none;
    }
    
    #playthroughs h2 {
        margin: 1% 0 0 0;
//border: 1px solid purple;
        border-bottom: 2px solid orange;
        padding: 1% 5% 1% 5%;
        background-color: #1d1e20;
        color: #FFF;
        font-size: 1.5em;
    }
    #playthroughs .game-container {
//border: 1px solid green;
        background-color: grey;
        overflow: hidden;
    }   
    #playthroughs .video {}
    #playthroughs a {
        text-decoration: none;
    }
    #playthroughs h3 {
        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 */
    }
    
    .playthroughs_game_container {
        margin: 0;
//border: 1px solid green;
        border: none;
        padding: 1% 0 1% 0;
    }
    .border-box {
        margin: 0 auto;
        border: 1px solid grey;
        padding: 2px;
        width: 95%;
        overflow: hidden;
    }
    .border-box:hover {
        border: 1px solid red;
    }
    .playthroughs_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 */
    }
    .playthroughs_game_container .img-container {
        margin: 0 auto;
//border: 1px solid blue;
        border: none;
        overflow: hidden;
        position: relative;
    }
	.playthroughs_game_container .youtube-overlay {
		position: absolute;
		top: 40%;
		left:40%;
		height: 25%;
		width: 20%;
		z-index: 10;
	}
    .playthroughs_game_container img {
        margin: 0;
//border: 1px solid red;
        border: none;
        padding: 0;
        width: 100%;
    }
    .playthroughs_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 ) {

    #playthroughs {
        margin: 0 auto;
//border: 1px solid red;
        border: none;
        padding: 0;
    }
	#playthroughs .header {
        margin: 0 auto;
//border: 1px solid green;
		border: none;
		padding: 0;
        background-color: #1d1e20;
        overflow: hidden;
	}
    #playthroughs .header h1 {
        margin: 0;
//border: 1px solid red;
        border: none;
        padding: 2% 5% 2% 3%;
        color: #FFF;
        font-size: 2em;
    }

    /* pagination */
    #playthroughs .page-number {
        margin: 0;
    //border: 1px solid red;
        padding: 1% 0 0 0;
    }
    #playthroughs .page-number ul {
        margin: 0 auto;
    //border: 1px solid purple;
        padding: 0;
        text-align: center;
        display: table;
        overflow: hidden;
    }
    
    .playthroughs-desktop {
        display: none;
    }
    .playthroughs-mobile {
        margin: 0 0 3% 0;
//border: 1px solid red;
    }
    
    #playthroughs h2 {
        margin: 1% 0 0 0;
//border: 1px solid purple;
        border-bottom: 2px solid orange;
        padding: 1% 5% 1% 5%;
        background-color: #1d1e20;
        color: #FFF;
        font-size: 1.5em;
    }
    #playthroughs .game-scroller {
        overflow: auto;
        background-color: grey;
    }
    #playthroughs .game-container {
//border: 1px solid green;
        background-color: grey;
    }   
    #playthroughs .video {
        width: 200px;
        float: left;
    }
    #playthroughs a {
        text-decoration: none;
    }
    #playthroughs h3 {
        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 */
    }
    
    .playthroughs_game_container {
        margin: 0;
//border: 1px solid green;
        border: none;
        padding: 1% 0 1% 0;
        background-color: grey;
    }
    .border-box {
        margin: 0 auto;
        border: 1px solid grey;
        padding: 2px;
        width: 95%;
        overflow: hidden;
    }
    .border-box:hover {
        border: 1px solid red;
    }
    .playthroughs_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 */
    }
    .playthroughs_game_container .img-container {
        margin: 0 auto;
//border: 1px solid blue;
        border: none;
        overflow: hidden;
        position: relative;
    }
	.playthroughs_game_container .youtube-overlay {
		position: absolute;
		top: 40%;
		left:40%;
		height: 25%;
		width: 20%;
		z-index: 10;
	}
    .playthroughs_game_container img {
        margin: 0;
//border: 1px solid red;
        border: none;
        padding: 0;
        width: 100%;
    }
    .playthroughs_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 */