/*
	Author: Jonathan Lum
	Date Modified: 8/16/2017
	File Name: playstation_plus.css
	
	Brief Description: This is the stylesheet for the Playstation Plus Minus page of the Jon El Media website
*/

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

    body, html {
        height: 100%;
        background-color: #3b3b3b;
    }
    
    #playstation-plus .row { margin: 0; }
    #playstation-plus .col-xs-12 { padding: 0; }
    #playstation-plus .col-xs-6 { padding: 0; }
    #playstation-plus .col-xs-4 { padding: 0; }

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

	#playstation-plus {
		margin: 0 auto;
		border: none;
//border: 1px solid yellow;
		padding: 0;
		color: #FFFFFF;
	}
	#playstation-plus .header {
		margin: 0;
		border: none;
//border: 1px solid green;
		padding: 0;
        background-color: purple;
	}
    #playstation-plus .header img {
        width: 100%;
    }
    #playstation-plus-list {
        margin: 1% 0 0 0;
        border: none;
//border: 1px solid red;
        padding: 0;
    }    
    .year {
        margin: 0;
        border: none;
//border: 1px solid blue;
        padding: 0;
    }
    .year h1 {
        margin: 0 0 1% 0;
//border: 1px solid purple;
        border: none;
        padding: 1% 0 1% 0;
        background-color: #1d1e20;
        font-size: 1.6em;
        text-align: center;
    }
     #playstation-plus-list .month {
        margin: 0 0 2% 0;
        border: none;
//border: 1px solid #FFF;
        padding: 0;
    }
    .month h2 {
        margin: 0;
        border: none;
        border-top: 1px solid #0079d3;
        padding: 1% 0 1% 5%;
        font-size: 1.4em;
        font-weight: bold;
        color: #ffc72d;
        background-color: #022a7f;
    }
    .games-container {}
    #playstation-plus .system {
        margin: 0;
//border: 1px solid red;
        border: none;
        padding: .5% .25% .5% .25%;
    }
    #playstation-plus .left {
        padding-left: 0;
    }
    #playstation-plus .right {
        padding-right: 0;
    }
    .system-icon-container {
        margin: 0;
        border: none;
        padding: 2% 0 2% 0;        
        background-color: #0148a0;
        text-align: center;        
    }
    .system-icon-container .pslogo { height: 12px; }
    .game {
        margin: 0;
        border: 1px solid #3b3b3b;
        padding: 0;
    }
    .game a { color: #FFF; }
    .game a:hover {
        text-decoration: none;
        color: #ffbe09;
    }
    .game h4 {
        margin: 0;
        border: none;
        border-bottom: 2px solid #ffbe09;
        padding: 2% 3% 0 3%;
        font-size: 1em;
        text-align: center;
        background-color: #1d1e20;
        height: 50px;        
    }
    .cover-image-container {
        margin: 0 auto;
        border: none;
        padding: 0;
        background-color: #000;
        text-align: center;
        height: 150px;
    }
    .cover-image {
        max-width: 100%;
        max-height: 150px;
    }
    .system-rating {
        margin: 0;
        border: none;
        padding: 0;
        background-color: #0079d3;
        text-align: center;
        overflow: hidden;
    }
    .system-rating .system-rating-header {
        margin: 0;
        border: none;
//border: 1px solid blue;
        padding: 0;
        width: 80%;        
        float: left;        
    }
    .system-rating h5 {
        margin: 0;
        border: none;
//border: 1px solid green;
        padding: 0 5% 0 0;
        font-weight: bold;
        line-height: 2.2em;
        text-align: right;
    }
    .system-rating .rating {
        margin: 0;
        border: none;
//border: 1px solid red;
        padding: 0;
        color: #ffe416;
        background-color: #0079d3;
        font-weight: bold;
        font-size: 1.6em;
        text-align: left;
        width: 20%;
        float: left;
    }
    .blurb-container {
        margin: 0;
        border: none;
//border: 1px solid red;
        padding: 1% 5% 1% 5%;
        color: #0148A0;
        background-color: #FFF;
    }
    .blurb-container .blurb {
        margin: 0;
        border: none;
//border: 1px solid green;
        padding: 1% 3% 1% 3%;
        color: #3b3b3b;
    }
    .blurb-container .article-link {
        margin: 0 auto;
        margin-bottom: 1%;
        border: none;
        padding: 0;
        text-align: center;
    }
    .blurb-container a {
        margin: 0;
        border: none;
//border: 1px solid green;
        padding: 0;
        background-color: #FFF;
        color: #022A7f;
        font-weight: bold;
        display: inline-block;
    }
    .blurb-container a:hover {
        text-decoration: none;
        color: #0079d3;
    }
    .all-rating {
        margin: 0;
        border: none;
        padding: 0;
        background-color: #0079d3;
        text-align: center;
        overflow: hidden;
    }
    .all-rating .all-rating-header {
        margin: 0;
        border: none;
//border: 1px solid blue;
        padding: 0;
        width: 50%;        
        float: left;
    }
    .all-rating h5 {
        margin: 0;
        border: none;
//border: 1px solid green;
        padding: 0 5% 0 0;
        font-weight: bold;
        line-height: 2.2em;
        text-align: right;            
    }
    .all-rating .rating {
        margin: 0;
        border: none;
//border: 1px solid red;
        padding: 0;
        color: #ffe416;
        background-color: #0079d3;
        font-weight: bold;
        font-size: 1.6em;
        text-align: left;
        width: 50%;
        float: left;
    }

}
/* End CSS for Desktop */

/* CSS for Mobile 767px and < width */
@media all and (max-width: 767px ) {
	
	#playstation-plus {
		margin: 0 auto;
		border: none;
//border: 1px solid yellow;
		padding: 0;
		color: #FFFFFF;
	}
	#playstation-plus .header {
		margin: 0;
		border: none;
//border: 1px solid green;
		padding: 0;
        background-color: purple;
	}
    #playstation-plus .header img {
        width: 100%;
    }
    #playstation-plus-list {
        margin: 1% 0 0 0;
        border: none;
//border: 1px solid red;
        padding: 0;
    }
    .year {
        margin: 0;
        border: none;
//border: 1px solid blue;
        padding: 0;
    }
    .year h1 {
        margin: 0 0 1% 0;
//border: 1px solid purple;
        border: none;
        padding: 1% 0 1% 0;
        background-color: #1d1e20;
        font-size: 1.4em;
        text-align: center;
    }
     #playstation-plus-list .month {
        margin: 0 0 3% 0;
        border: none;
//border: 1px solid #FFF;
        padding: 0;
    }
    .month h2 {
        margin: 0;
        border: none;
        border-top: 1px solid #0079d3;
        padding: 1% 0 1% 5%;
        font-size: 1.2em;
        font-weight: bold;
        color: #ffc72d;
        background-color: #022a7f;
    }
    .games-container {}
    #playstation-plus .system {
        margin: 0;
//border: 1px solid red;
        border: none;
        padding: .5% 0% .5% 0;
    }
    .system-icon-container {
        margin: 0;
        border: none;
        padding: 1% 0 1% 0;        
        background-color: #0148a0;
        text-align: center;        
    }
    .system-icon-container .pslogo { height: 9px; }
    .game {
        margin: 0;
        border: 1px solid #3b3b3b;
        padding: 0;
    }
    .game a { color: #FFF; }
    .game a:hover {
        text-decoration: none;
        color: #ffbe09;
    }
    .game h4 {
        margin: 0;
        border: none;
        border-bottom: 2px solid #ffbe09;
        padding: 2% 3% 0 3%;
        font-size: .9em;
        text-align: center;
        background-color: #1d1e20;
        height: 50px;        
    }
    .cover-image-container {
        margin: 0 auto;
        border: none;
        padding: 0;
        background-color: #000;
        text-align: center;
        height: 100px;
    }
    .cover-image {
        max-width: 100%;
        max-height: 100px;
    }
    .system-rating {
        margin: 0;
        border: none;
        padding: 0;
        background-color: #0079d3;
        text-align: center;
        overflow: hidden;
    }
    .system-rating .system-rating-header {
        margin: 0;
        border: none;
//border: 1px solid blue;
        padding: 0;
        width: 80%;        
        float: left;        
    }
    .system-rating h5 {
        margin: 0;
        border: none;
//border: 1px solid green;
        padding: 0 5% 0 0;
        font-weight: bold;
        line-height: 1.7em;
        text-align: right;
    }
    .system-rating .rating {
        margin: 0;
        border: none;
//border: 1px solid red;
        padding: 0;
        color: #ffe416;
        background-color: #0079d3;
        font-weight: bold;
        font-size: 1.2em;
        text-align: left;
        width: 20%;
        float: left;
    }
    .blurb-container {
        margin: 0;
        border: none;
//border: 1px solid red;
        padding: 1% 5% 1% 5%;
        color: #0148A0;
        background-color: #FFF;
    }
    .blurb-container .blurb {
        margin: 0;
        border: none;
//border: 1px solid green;
        padding: 1% 3% 1% 3%;
        color: #3b3b3b;
        font-size: .8em;
        text-align: center;
    }
    .blurb-container .article-link {
        margin: 0 auto;
        margin-bottom: 1%;
        border: none;
        padding: 0;
        text-align: center;
        font-size: 1.1em;
    }
    .blurb-container a {
        margin: 0;
        border: none;
//border: 1px solid green;
        padding: 0;
        background-color: #FFF;
        color: #022A7f;
        font-weight: bold;
        display: inline-block;
    }
    .blurb-container a:hover {
        text-decoration: none;
        color: #0079d3;
    }
    .all-rating {
        margin: 0;
        border: none;
        padding: 0;
        background-color: #0079d3;
        text-align: center;
        overflow: hidden;
    }
    .all-rating .all-rating-header {
        margin: 0;
        border: none;
//border: 1px solid blue;
        padding: 0;
        width: 80%;        
        float: left;
    }
    .all-rating h5 {
        margin: 0;
        border: none;
//border: 1px solid green;
        padding: 0 5% 0 0;
        font-weight: bold;
        line-height: 1.7em;
        text-align: right;            
    }
    .all-rating .rating {
        margin: 0;
        border: none;
//border: 1px solid red;
        padding: 0;
        color: #ffe416;
        background-color: #0079d3;
        font-weight: bold;
        font-size: 1.3em;
        text-align: left;
        width: 20%;
        float: left;
    }
	
}
/* End CSS for Mobile */